/* portfolio-rest.css */
/* Full-site consolidation — inherits Hero / Remote identity without cloning either section */
.portfolio-rest{--pr-navy:#0b1b31;--pr-navy2:#132943;--pr-ivory:#f5f0e7;--pr-paper:#fffdf8;--pr-sand:#ebe1d3;--pr-gold:#c69b45;--pr-gold2:#e2bd68;--pr-ink:#10233a;--pr-muted:#687386;--pr-line:rgba(16,35,58,.14);--pr-line-dark:rgba(255,255,255,.14);background:var(--pr-ivory);color:var(--pr-ink);font-family:"Avenir Next",Avenir,"Helvetica Neue",Helvetica,Arial,sans-serif}
.portfolio-rest *{box-sizing:border-box}.portfolio-rest a{color:inherit}.portfolio-rest img{display:block;max-width:100%}.portfolio-rest .serif{font-family:inherit!important}.portfolio-rest .wrap{width:min(1180px,calc(100% - 72px));margin:auto}.portfolio-rest .screen{display:block;padding:96px 0;scroll-margin-top:92px;border-top:1px solid var(--pr-line);background:var(--pr-ivory);color:var(--pr-ink)}
.portfolio-rest .screen.paper{background:var(--pr-paper)}.portfolio-rest .screen.sand{background:var(--pr-sand)}.portfolio-rest .screen.ivory{background:var(--pr-ivory)}.portfolio-rest .screen.navy{background:var(--pr-navy);color:#f8f5ef;border-color:var(--pr-line-dark)}
.portfolio-rest .practice-anchor{height:0;position:relative;top:-86px;visibility:hidden}.portfolio-rest .eyebrow,.portfolio-rest .case-label{margin:0;color:var(--pr-gold);font-size:11px;font-weight:850;letter-spacing:.25em;text-transform:uppercase;line-height:1.25}.portfolio-rest h2,.portfolio-rest h3,.portfolio-rest p{font-family:inherit}
.portfolio-rest .section-head{display:grid;grid-template-columns:.38fr 1.62fr;gap:36px;align-items:start;margin-bottom:38px}.portfolio-rest .section-head h2{font-size:clamp(42px,4.3vw,72px);line-height:.98;letter-spacing:-.055em;font-weight:400;margin:0;text-wrap:balance}.portfolio-rest .intro{font-size:16px;line-height:1.55;color:var(--pr-muted);max-width:760px;margin:12px 0 0}
#capabilities{position:relative;overflow:hidden}#capabilities:before{content:"";position:absolute;right:-14vw;top:-28vw;width:48vw;height:48vw;border:1px solid rgba(198,155,69,.18);border-radius:50%;pointer-events:none}.portfolio-rest .capability-feature{display:grid;grid-template-columns:.88fr 1.12fr;gap:52px;align-items:center;margin-bottom:40px}.portfolio-rest .capability-feature .section-head{display:block;margin:0}.portfolio-rest .capability-feature .eyebrow{margin-bottom:14px}.portfolio-rest .capability-feature-media{margin:0;overflow:hidden;border:1px solid var(--pr-line);background:#efe8dc}.portfolio-rest .capability-feature-media img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:center 36%}
.portfolio-rest .cap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--pr-line);border:1px solid var(--pr-line)}.portfolio-rest .card{position:relative;min-height:190px;padding:25px 24px 22px;background:rgba(255,253,248,.93)}.portfolio-rest .card .num{color:var(--pr-gold);font-size:11px;font-weight:850;letter-spacing:.18em}.portfolio-rest .card h3{font-size:19px;line-height:1.08;margin:36px 0 10px;font-weight:650}.portfolio-rest .card p{font-size:13px;line-height:1.5;color:var(--pr-muted);margin:0}
.portfolio-rest #work{padding-top:82px}.portfolio-rest #work:before{content:"SELECTED WORK";display:block;width:min(1180px,calc(100% - 72px));margin:0 auto 30px;color:var(--pr-gold);font-size:11px;font-weight:850;letter-spacing:.25em}.portfolio-rest .work-index{display:none}.portfolio-rest .case-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:54px;align-items:center}.portfolio-rest .case-workflow{row-gap:30px}.portfolio-rest .case-workflow .flow{grid-column:1/-1}.portfolio-rest .case-photo{width:100%;border:1px solid var(--pr-line);background:#eee6d9}.portfolio-rest .case-photo.top{object-fit:cover;object-position:center 18%;aspect-ratio:4/3}
.portfolio-rest .case-copy h2,.portfolio-rest .work04-copy h2,.portfolio-rest .video-copy h2{font-size:clamp(38px,3.8vw,64px);line-height:1;letter-spacing:-.05em;font-weight:400;margin:10px 0 18px;text-wrap:balance}.portfolio-rest .case-copy>p,.portfolio-rest .work04-copy>p,.portfolio-rest .video-copy>p{font-size:15px;line-height:1.55;color:var(--pr-muted);max-width:720px;margin:0}.portfolio-rest .evidence,.portfolio-rest .video-evidence{display:flex;gap:9px;flex-wrap:wrap;margin:22px 0 0}.portfolio-rest .evidence span,.portfolio-rest .video-evidence span{font-size:11px;font-weight:700;letter-spacing:.04em;padding:8px 10px;border-left:2px solid var(--pr-gold);background:rgba(255,255,255,.45);color:#665735}
.portfolio-rest .flow{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--pr-line);border-bottom:1px solid var(--pr-line)}.portfolio-rest .node{position:relative;padding:20px 28px 20px 0}.portfolio-rest .node:not(:last-child):after{content:"→";position:absolute;right:8px;top:20px;color:var(--pr-gold)}.portfolio-rest .node b{display:block;font-size:13px;margin-bottom:7px}.portfolio-rest .node span{display:block;font-size:12px;line-height:1.45;color:var(--pr-muted)}
.portfolio-rest #work02,.portfolio-rest #work03{position:relative}.portfolio-rest .case-process{grid-template-columns:1.06fr .94fr}.portfolio-rest .bullet-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:22px}.portfolio-rest .bullet{border-left:2px solid var(--pr-gold);padding:8px 0 8px 13px}.portfolio-rest .bullet b{display:block;font-size:13px}.portfolio-rest .bullet span{display:block;margin-top:4px;font-size:12px;line-height:1.4;color:var(--pr-muted)}
.portfolio-rest .case-artifact,.portfolio-rest .work04-map{border:1px solid var(--pr-line);background:rgba(255,255,255,.56);padding:28px;box-shadow:0 20px 50px rgba(11,27,49,.08)}.portfolio-rest .artifact-kicker,.portfolio-rest .map-label{color:var(--pr-gold);font-size:10px;font-weight:850;letter-spacing:.2em;text-transform:uppercase}.portfolio-rest .case-artifact h3{font-size:32px;line-height:1.02;letter-spacing:-.04em;font-weight:400;margin:10px 0 10px}.portfolio-rest .artifact-intro{font-size:13px;line-height:1.5;color:var(--pr-muted);margin:0}.portfolio-rest .artifact-flow{display:grid;gap:0;margin-top:22px}.portfolio-rest .artifact-step{display:grid;grid-template-columns:34px 1fr;gap:12px;padding:13px 0;border-top:1px solid var(--pr-line)}.portfolio-rest .artifact-step:first-child{border-top:0}.portfolio-rest .artifact-index{color:var(--pr-gold);font-size:10px;font-weight:850;letter-spacing:.12em}.portfolio-rest .artifact-step b{display:block;font-size:13px}.portfolio-rest .artifact-step span{display:block;margin-top:3px;font-size:12px;line-height:1.4;color:var(--pr-muted)}
.portfolio-rest #work04{background:#f2eadf}.portfolio-rest .work04-grid{display:grid;grid-template-columns:1.03fr .97fr;gap:52px;align-items:center}.portfolio-rest .work04-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:25px;background:var(--pr-line);border:1px solid var(--pr-line)}.portfolio-rest .work04-steps>div{padding:18px;background:#fffaf2}.portfolio-rest .work04-steps b{display:block;font-size:13px}.portfolio-rest .work04-steps span{display:block;margin-top:5px;font-size:12px;line-height:1.4;color:var(--pr-muted)}.portfolio-rest .work04-flow{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:18px}.portfolio-rest .work04-flow>div{min-height:110px;padding:16px;border:1px solid rgba(198,155,69,.34);background:rgba(255,253,248,.72)}.portfolio-rest .work04-flow b{display:block;font-size:13px}.portfolio-rest .work04-flow span{display:block;margin-top:6px;font-size:12px;line-height:1.42;color:var(--pr-muted)}
.portfolio-rest #video{background:var(--pr-ivory)}.portfolio-rest .video-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:54px;align-items:center}.portfolio-rest .video-bullets{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:20px}.portfolio-rest .video-visual{margin:0;border:1px solid var(--pr-line);background:var(--pr-sand);overflow:hidden}.portfolio-rest .video-photo{width:100%;aspect-ratio:4/3;object-fit:cover}.portfolio-rest .video-evidence{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.portfolio-rest .video-evidence span{margin:0}
.portfolio-rest #journey{position:relative;overflow:hidden;background:linear-gradient(110deg,#0a1b2d 0%,#102b43 58%,#0b1d30 100%)}.portfolio-rest #journey:after{content:"";position:absolute;left:48%;top:-20%;width:1px;height:145%;background:linear-gradient(transparent,rgba(226,189,104,.65),transparent);transform:rotate(14deg);pointer-events:none}.portfolio-rest .journey-grid{display:grid;grid-template-columns:.65fr 1.35fr;gap:54px;align-items:center;position:relative;z-index:1}.portfolio-rest .journey-copy h2{font-size:clamp(42px,4.2vw,70px);line-height:.99;letter-spacing:-.055em;font-weight:400;margin:12px 0 18px;text-wrap:balance}.portfolio-rest .journey-copy p{font-size:15px;line-height:1.55;color:rgba(248,245,239,.72);margin:0}.portfolio-rest .timeline{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.12)}.portfolio-rest .step{min-height:132px;padding:18px;background:rgba(255,255,255,.035)}.portfolio-rest .step small{display:block;color:var(--pr-gold2);font-size:10px;font-weight:850;letter-spacing:.15em}.portfolio-rest .step b{display:block;margin:11px 0 6px;font-size:14px}.portfolio-rest .step span{font-size:12px;line-height:1.42;color:rgba(248,245,239,.62)}
.portfolio-rest #capability-expansion,.portfolio-rest #highlights,.portfolio-rest #about{background:var(--pr-paper)}.portfolio-rest .proof-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px}.portfolio-rest .proof-card{display:flex;flex-direction:column;min-height:100%;border:1px solid var(--pr-line);background:#fff;overflow:hidden}.portfolio-rest .proof-card img{width:100%;aspect-ratio:4/3;object-fit:cover}.portfolio-rest .proof-card-body{display:flex;flex:1;flex-direction:column;padding:21px}.portfolio-rest .proof-card h3{font-size:22px;line-height:1.05;letter-spacing:-.035em;font-weight:500;margin:10px 0 12px}.portfolio-rest .proof-card p{font-size:13px;line-height:1.5;color:var(--pr-muted);margin:0}.portfolio-rest .proof-index{display:block;margin-top:auto;padding-top:20px;color:var(--pr-gold);font-size:10px;font-weight:850;letter-spacing:.16em}
.portfolio-rest .moments-grid{display:block}.portfolio-rest #highlights .copy-wide{max-width:1040px}.portfolio-rest #highlights h2{font-size:clamp(40px,4vw,66px)!important;line-height:1!important;letter-spacing:-.05em!important;font-weight:400!important;margin:10px 0 16px!important}.portfolio-rest .moment-list{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;margin-top:28px;background:var(--pr-line);border:1px solid var(--pr-line)}.portfolio-rest .moment{padding:22px;background:#fffdf8}.portfolio-rest .moment .k{color:var(--pr-gold);font-size:10px;font-weight:850;letter-spacing:.16em}.portfolio-rest .moment h3{font-size:18px;line-height:1.15;margin:12px 0 8px}.portfolio-rest .moment p{font-size:13px;line-height:1.48;color:var(--pr-muted);margin:0}
.portfolio-rest .about-grid{display:grid;grid-template-columns:1fr .9fr;gap:62px;align-items:center}.portfolio-rest .about-copy .quote{font-size:clamp(38px,4.1vw,68px);line-height:1;letter-spacing:-.055em;font-weight:400;margin:12px 0 22px;text-wrap:balance}.portfolio-rest .about-copy>p{font-size:15px;line-height:1.58;color:var(--pr-muted);margin:0}.portfolio-rest .about-visual{display:flex;justify-content:flex-end}.portfolio-rest .about-photo{width:100%;max-width:500px;border:1px solid var(--pr-line);background:var(--pr-sand)}.portfolio-rest .fact-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:26px}.portfolio-rest .fact{border-left:2px solid var(--pr-gold);padding:9px 0 9px 13px}.portfolio-rest .fact b{display:block;font-size:13px}.portfolio-rest .fact span{display:block;margin-top:4px;font-size:12px;line-height:1.4;color:var(--pr-muted)}
.portfolio-rest #resume{background:var(--pr-sand)}.portfolio-rest .resume-grid h2{font-size:clamp(40px,4vw,64px);line-height:1;letter-spacing:-.05em;font-weight:400;margin:10px 0 14px}.portfolio-rest .resume-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:28px}.portfolio-rest .resume-card{display:flex;align-items:center;gap:14px;min-height:76px;padding:14px 16px;border:1px solid var(--pr-line);background:#fff}.portfolio-rest .resume-flag{font-size:24px}.portfolio-rest .resume-meta{flex:1;min-width:0}.portfolio-rest .resume-meta b{display:block;font-size:14px}.portfolio-rest .resume-meta span{display:block;margin-top:3px;font-size:11px;color:var(--pr-muted)}.portfolio-rest .resume-card a{font-size:11px;font-weight:850;color:#795e28;border-bottom:1px solid #795e28}
.portfolio-rest #contact{position:relative;overflow:hidden;background:linear-gradient(115deg,#0a192a 0%,#102c46 62%,#0b1c2e 100%)}.portfolio-rest #contact:after{content:"";position:absolute;right:-8vw;bottom:-18vw;width:42vw;height:42vw;border:1px solid rgba(226,189,104,.22);border-radius:50%;pointer-events:none}.portfolio-rest .cta-grid{display:grid;grid-template-columns:1.1fr .75fr;grid-template-areas:'copy visual' 'copy box';gap:28px 42px;align-items:start;position:relative;z-index:1}.portfolio-rest .cta-grid>div:first-child{grid-area:copy;align-self:center}.portfolio-rest .cta h2{font-size:clamp(46px,4.7vw,78px);line-height:.98;letter-spacing:-.06em;font-weight:400;margin:12px 0 20px;text-wrap:balance}.portfolio-rest .cta p{font-size:15px;line-height:1.55;color:rgba(248,245,239,.72);max-width:690px}.portfolio-rest .cta-visual{grid-area:visual}.portfolio-rest .cta-photo{width:100%;border:1px solid rgba(255,255,255,.15)}.portfolio-rest .contact-box{grid-area:box;border-top:1px solid rgba(255,255,255,.18);padding-top:20px}.portfolio-rest .contact-box .big{font-size:30px;letter-spacing:-.03em}.portfolio-rest .contact-box p{font-size:12px}.portfolio-rest .btn.gold{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 18px;margin-top:8px;background:linear-gradient(105deg,#ffe096,#f4c867);color:#09111a;text-decoration:none;font-size:11px;font-weight:850;letter-spacing:.14em}.portfolio-rest .footerline{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:34px;padding-top:18px;border-top:1px solid rgba(255,255,255,.14);font-size:11px;color:rgba(248,245,239,.55);position:relative;z-index:1}.portfolio-rest .social-links{display:flex;align-items:center;gap:10px}.portfolio-rest .social-links a{display:block;width:30px;height:30px;color:#d9dfe6}.portfolio-rest .social-links svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.7}.portfolio-rest .footer-logo{width:150px;height:auto}
@media(max-width:1050px){.portfolio-rest .wrap{width:min(100% - 44px,1180px)}.portfolio-rest .screen{padding:72px 0}.portfolio-rest .capability-feature,.portfolio-rest .case-grid,.portfolio-rest .work04-grid,.portfolio-rest .video-grid,.portfolio-rest .journey-grid,.portfolio-rest .about-grid,.portfolio-rest .cta-grid{grid-template-columns:1fr;gap:34px}.portfolio-rest .cta-grid{grid-template-areas:'copy' 'visual' 'box'}.portfolio-rest .capability-feature-media,.portfolio-rest .about-photo,.portfolio-rest .cta-visual{max-width:680px}.portfolio-rest .cap-grid,.portfolio-rest .proof-grid{grid-template-columns:repeat(2,1fr)}.portfolio-rest .timeline{grid-template-columns:repeat(2,1fr)}.portfolio-rest .section-head{grid-template-columns:1fr}.portfolio-rest .case-workflow .flow{grid-column:auto}.portfolio-rest .flow{grid-template-columns:repeat(2,1fr)}.portfolio-rest .node:nth-child(2):after{display:none}.portfolio-rest .resume-cards{grid-template-columns:1fr}.portfolio-rest #work:before{width:min(100% - 44px,1180px)}}
@media(max-width:720px){.portfolio-rest .wrap{width:min(100% - 28px,1180px)}.portfolio-rest .screen{padding:54px 0}.portfolio-rest .section-head h2,.portfolio-rest .case-copy h2,.portfolio-rest .work04-copy h2,.portfolio-rest .video-copy h2,.portfolio-rest .journey-copy h2,.portfolio-rest #highlights h2,.portfolio-rest .about-copy .quote,.portfolio-rest .resume-grid h2,.portfolio-rest .cta h2{font-size:clamp(36px,11vw,52px)!important}.portfolio-rest .cap-grid,.portfolio-rest .proof-grid,.portfolio-rest .moment-list,.portfolio-rest .timeline,.portfolio-rest .flow,.portfolio-rest .bullet-grid,.portfolio-rest .video-bullets,.portfolio-rest .work04-steps,.portfolio-rest .work04-flow,.portfolio-rest .fact-grid{grid-template-columns:1fr}.portfolio-rest .card{min-height:0}.portfolio-rest .node{padding:16px 0;border-top:1px solid var(--pr-line)}.portfolio-rest .node:first-child{border-top:0}.portfolio-rest .node:after{display:none!important}.portfolio-rest .video-evidence{grid-template-columns:1fr}.portfolio-rest .case-artifact,.portfolio-rest .work04-map{padding:20px}.portfolio-rest .proof-card h3{font-size:20px}.portfolio-rest .about-visual{justify-content:flex-start}.portfolio-rest .footerline{align-items:flex-start;flex-direction:column}.portfolio-rest #work:before{width:min(100% - 28px,1180px)}.portfolio-rest .resume-card{align-items:flex-start}.portfolio-rest .resume-card a{margin-left:auto}}
@media(prefers-reduced-motion:reduce){.portfolio-rest *{scroll-behavior:auto!important}}

/* The Hero quote is an absolute overlay; the About quote is editorial content. */
.portfolio-rest .about-copy .quote{position:static;right:auto;bottom:auto;z-index:auto;width:auto;margin:12px 0 22px;color:var(--pr-ink);font-style:normal}
.portfolio-rest .about-copy .quote::after{display:none}
.remote-title>span:first-child{color:#fbfaf5}
.remote-title>span:last-child{color:#ffdc88}
/* Integration collision resets from the frozen Hero layer */
.portfolio-rest .quote{position:static;right:auto;bottom:auto;z-index:auto;width:auto;max-width:none;text-align:left;color:inherit;font-style:normal;letter-spacing:normal}
.portfolio-rest #highlights .moment-list{background:transparent;border:0;gap:1px}.portfolio-rest #highlights .moment{border:1px solid var(--pr-line)}
.portfolio-rest .quote{display:block!important}.portfolio-rest #highlights .moment:last-child:nth-child(odd){grid-column:1/-1;width:50%;justify-self:center}.mobile-nav-toggle{display:none;border:0;background:transparent;color:#fff;width:42px;height:42px;padding:9px;cursor:pointer}.mobile-nav-toggle span{display:block;height:1px;background:var(--gold-bright);margin:5px 0}
@media(max-width:980px){.site-header .action{display:none}.mobile-nav-toggle{display:block;margin-left:auto}.site-nav{position:absolute;top:100%;left:0;right:0;margin:0!important;padding:14px 7% 18px;display:none!important;flex-direction:column;align-items:flex-start!important;gap:0!important;background:rgba(3,12,24,.98);border-top:1px solid rgba(247,201,100,.12);border-bottom:1px solid rgba(247,201,100,.18);box-shadow:0 18px 30px rgba(0,0,0,.28)}.site-nav.mobile-open{display:flex!important}.site-nav.mobile-open>a:not(.action){display:block!important;width:100%;padding:11px 0;font-size:13px}.site-nav.mobile-open .languages{display:none!important}.site-nav.mobile-open a.active:after{bottom:6px;width:34px;right:auto}.portfolio-rest #highlights .moment:last-child:nth-child(odd){width:100%;grid-column:auto}}

/* Visual calibration pass: carry the frozen scene's navy, ivory and gold into the system sections. */
.portfolio-rest{--pr-navy:#102b42;--pr-navy2:#193b55;--pr-ivory:#f5f1e8;--pr-paper:#fffdf8;--pr-sand:#e9decd;--pr-gold:#c59543;--pr-gold2:#e7bd68;--pr-ink:#102b42;--pr-muted:#607589;--pr-line:rgba(16,43,66,.16);--pr-line-dark:rgba(255,255,255,.16)}
.portfolio-rest .screen:not(.navy){position:relative;isolation:isolate;overflow:hidden}
.portfolio-rest .screen:not(.navy)> .wrap{position:relative;z-index:1}
.portfolio-rest .screen:not(.navy)::before{content:"";position:absolute;left:clamp(28px,5vw,90px);right:clamp(28px,5vw,90px);top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(197,149,67,.34) 22%,rgba(197,149,67,.08) 78%,transparent);pointer-events:none}
.portfolio-rest #work,.portfolio-rest #work03,.portfolio-rest #about{background:linear-gradient(120deg,#fffdf8 0%,#f5f0e7 100%)}
.portfolio-rest #work02,.portfolio-rest #work04,.portfolio-rest #resume{background:linear-gradient(120deg,#e9decd 0%,#f1e8dc 100%)}
.portfolio-rest #video,.portfolio-rest #capability-expansion,.portfolio-rest #highlights{background:linear-gradient(120deg,#f5f1e8 0%,#fffdf8 100%)}
.portfolio-rest #journey{background:linear-gradient(110deg,var(--pr-navy) 0%,var(--pr-navy2) 58%,#0b2237 100%)}
.portfolio-rest #contact{background:linear-gradient(115deg,var(--pr-navy) 0%,var(--pr-navy2) 62%,#0b2237 100%)}
.portfolio-rest .card,.portfolio-rest .proof-card,.portfolio-rest .moment,.portfolio-rest .resume-card,.portfolio-rest .case-artifact,.portfolio-rest .work04-map{box-shadow:inset 0 2px 0 rgba(197,149,67,.24)}
.portfolio-rest .case-artifact,.portfolio-rest .work04-map{position:relative}
.portfolio-rest .case-artifact::after,.portfolio-rest .work04-map::after{content:"";position:absolute;top:18px;right:18px;width:6px;height:6px;border-radius:50%;background:var(--pr-gold2);box-shadow:0 0 0 4px rgba(231,189,104,.10),0 0 16px rgba(231,189,104,.34);pointer-events:none}

/* The remote image is deliberately inset so the second scene reads as a composed panel, not a full-bleed portrait. */
.remote-media{display:flex;align-items:center;justify-content:center;padding:clamp(24px,4vw,58px) clamp(22px,3.5vw,58px);background:linear-gradient(145deg,#cfc5b5 0%,#b4a998 100%)}
.remote-photo{width:92%;height:86%;max-width:100%;max-height:100%;border:1px solid rgba(255,255,255,.22);box-shadow:0 24px 60px rgba(3,11,20,.24)}
@media(max-width:980px){.remote-media{padding:26px 7vw}.remote-photo{width:100%;height:100%}}
@media(max-width:620px){.remote-media{padding:18px 6vw}.remote-photo{width:100%;height:100%}}

/* portfolio-final.css */
/* Final consolidation layer: a responsive system built on the supplied scene and brand assets. */
:root {
  --gb-petroleum: #0d1b2a;
  --gb-petroleum-2: #132b40;
  --gb-ivory: #f4efe6;
  --gb-graphite: #1d2430;
  --gb-gold-shadow: #7b6240;
  --gb-gold: #cda46c;
  --gb-gold-principal: #e9c38a;
  --gb-gold-light: #fbe3ab;
}

html { overflow-x: hidden; }
body { min-width: 320px; overflow-x: hidden; background: var(--gb-petroleum); }

/* Hero is a fixed aspect composition. The source canvas remains intact; only its scene scale changes. */
.hero {
  min-height: 720px;
  height: max(100svh, 56.28vw);
  background: var(--gb-petroleum);
}
.hero .stage { z-index: 0; overflow: hidden; }
.hero .layer-background { z-index: 1; }
.hero .layer-rear { z-index: 2; }
.hero .layer-from-panel { z-index: 9; }
.hero .layer-path { z-index: 9; }
.hero .layer-subject {
  z-index: 10;
  transform: translateX(2%) translateY(-18%) scale(.62);
  transform-origin: 67% 100%;
}

/* Performance gate: reveal the Hero scene as one decoded composition so the
   background, panels, Giovanni and desk never paint in separate waves. */
.hero .stage { opacity: 1; }
.hero.hero-assets-pending .stage { opacity: 0; }
.hero.hero-assets-ready .stage { opacity: 1; }
.hero .stage { transition: opacity 80ms linear; }
@media (prefers-reduced-motion: reduce) {
  .hero .stage { transition: none; }
}
/* Locale swaps keep the current composition visible while decoded text and
   panel sources are committed. A short opacity easing avoids the old blank
   frame that made the H1 and glass panels appear to blink. */
html.language-switching .hero-copy,
html.language-switching .hero .layer-rear,
html.language-switching .hero .layer-better-panel,
html.language-switching .hero .ticker {
  opacity: .94;
}
.hero-copy,
.hero .layer-rear,
.hero .layer-better-panel,
.hero .ticker {
  transition: opacity 140ms ease;
}
@media (prefers-reduced-motion: reduce) {
  .hero-copy,
  .hero .layer-rear,
  .hero .layer-better-panel,
  .hero .ticker {
    transition: none;
  }
}
.hero .layer-foreground { z-index: 5; }
.layer-notebook { display: none; }
.hero .layer-front-panels { z-index: 6; }
.hero .layer-better-panel { z-index: 7; }
.hero .layer-atmosphere { z-index: 8; }
.hero .layer-subject .subject,
.hero .layer-foreground .foreground,
.hero .layer-background .background { width: 100%; height: 100%; }
.hero .layer-subject .subject,
.hero .layer-foreground .foreground,
.hero .layer-background .background { object-fit: cover; object-position: center; }
.hero .layer-background .background { object-position: 50% 50%; }
.hero .layer-background .background-table-plant-cleanup {
  /* Reveal only the edited coffee-table area; the canonical veranda background remains underneath. */
  -webkit-mask-image: radial-gradient(ellipse 12% 12% at 75.5% 66%, #000 60%, transparent 100%);
  mask-image: radial-gradient(ellipse 12% 12% at 75.5% 66%, #000 60%, transparent 100%);
}
.hero .layer-path .light-path { left: 31.5%; top: 7.8%; width: 53.2%; }
.hero .light-path-endpoint { left: 83.7%; top: 13.6%; }
.hero .panel { filter: drop-shadow(0 18px 28px rgba(0,0,0,.24)); }

/* The header has one stable box. Scroll changes its treatment and logo, never its layout footprint. */
.site-header {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  right: 0;
  min-height: 104px;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto minmax(220px, 1fr);
  align-items: center;
  gap: 24px;
  padding: 8px 5.2% 0;
  border-bottom: 1px solid transparent;
  background: linear-gradient(180deg, rgba(4,13,24,.34), transparent);
  transition: min-height .25s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.site-header > a {
  grid-column: 1;
  justify-self: start;
  margin-left: 0;
  line-height: 0;
}
.site-header .brand-full {
  display: block;
  width: clamp(190px, 15vw, 238px);
  height: auto;
  transition: opacity .2s ease, transform .2s ease;
}
.site-header .brand-monogram {
  display: none;
  width: 44px;
  height: 44px;
  object-fit: contain;
}
.site-nav {
  grid-column: 2;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 1.55vw, 28px);
  font-size: clamp(11px, .82vw, 14px);
  font-weight: 500;
  white-space: nowrap;
}
.site-nav > a {
  position: relative;
  color: rgba(255,253,247,.93);
  text-decoration: none;
}
.site-nav > a:hover,
.site-nav > a:focus-visible,
.site-nav .nav-practice-link:hover,
.site-nav .nav-practice-link:focus-visible { color: var(--gb-gold-light); }
.site-nav .active::after {
  bottom: -12px;
  background: var(--gb-gold-principal);
  box-shadow: 0 0 12px rgba(233,195,138,.5);
}
.site-nav .action { display: none !important; }
.site-nav .languages { display: flex; align-items: center; gap: 10px; margin-left: 6px; }
.site-nav .language { color: rgba(255,253,247,.72); font-size: 10px; }
.site-nav .language.current { color: var(--gb-gold-light); }
.nav-practice-wrap { position: relative; display: inline-flex; align-items: center; gap: 4px; }
.nav-practice-link { white-space: nowrap; }
.nav-submenu-toggle {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 26px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--gb-gold-principal);
  font: inherit;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.nav-submenu-toggle:focus-visible,
.mobile-nav-toggle:focus-visible,
.site-nav a:focus-visible { outline: 2px solid var(--gb-gold-light); outline-offset: 5px; }
.nav-submenu {
  position: absolute;
  top: calc(100% + 18px);
  left: 50%;
  display: grid;
  min-width: 260px;
  padding: 10px;
  border: 1px solid rgba(233,195,138,.38);
  background: rgba(13,27,42,.96);
  box-shadow: 0 20px 45px rgba(0,0,0,.34);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -5px);
  transition: opacity .18s ease, transform .18s ease;
}
.nav-submenu.is-open,
.nav-practice-wrap:focus-within .nav-submenu { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.nav-submenu a {
  padding: 10px 12px;
  color: rgba(255,253,247,.84);
  text-decoration: none;
  font-size: 11px;
  letter-spacing: .02em;
}
.nav-submenu a:hover,
.nav-submenu a:focus-visible { color: var(--gb-gold-light); background: rgba(233,195,138,.10); outline: none; }
body.scrolled .site-header {
  min-height: 82px;
  padding-top: 0;
  border-bottom-color: rgba(233,195,138,.20);
  background: rgba(13,27,42,.88);
  box-shadow: 0 8px 28px rgba(0,0,0,.24);
  backdrop-filter: blur(12px);
}
body.scrolled .site-header .brand-full { display: none; }
body.scrolled .site-header .brand-monogram { display: block; }
body.scrolled .hero { z-index: 0; overflow: hidden; }

/* Hero copy is allowed to breathe after the CTAs and quote leave this scene. */
.hero-copy { top: 20.6%; left: 5.48%; width: min(36%, 590px); }
.hero-copy .eyebrow { margin-bottom: 25px; color: var(--gb-gold-light); }
.hero-copy h1 { font-size: clamp(56px, 5.68vw, 95px); line-height: 1.08; }
.hero-copy .support { max-width: 520px; margin: 28px 0 0; }
.hero .buttons,
.hero > .quote { display: none !important; }

/* Two equal groups make the ticker's transform periodic at exactly one group width. */
.ticker { z-index: 35; background: rgba(4,13,24,.70); border-top-color: rgba(233,195,138,.26); }
.ticker-track { animation: gb-ticker-loop 36s linear infinite; }
.ticker-group { display: inline-flex; align-items: center; }
.ticker-track span::after { background: var(--gb-gold-light); }
.signature { color: var(--gb-gold-light); }
.signature::before { background: var(--gb-gold-principal); }
@keyframes gb-ticker-loop { from { transform: translateX(-50%); } to { transform: translateX(0); } }

/* Remote Work stays a distinct, lighter human counterpoint to the Hero. */
.remote-work {
  min-height: 760px;
  background: radial-gradient(circle at 86% 44%, rgba(42,91,113,.30), transparent 38%), linear-gradient(90deg, #0d2639 0%, #102f46 52%, #0d2133 100%);
}
.remote-grid { grid-template-columns: 46% 54%; }
.remote-media { padding: clamp(38px, 5vw, 70px) clamp(34px, 4.2vw, 62px); background: linear-gradient(145deg, #c6bdad 0%, #aa9d8b 100%); }
.remote-photo { width: 100%; height: 100%; border: 1px solid rgba(255,255,255,.24); box-shadow: 0 24px 60px rgba(3,11,20,.24); }
.remote-copy { padding: 88px 4.4vw 38px 4.1vw; }
.remote-title { font-size: clamp(48px, 4.15vw, 72px); }
.remote-body { max-width: 690px; }
.remote-evidence { margin-top: 12px; }

/* Light/dark rhythm for the actual content system. */
.portfolio-rest { --pr-navy: var(--gb-petroleum); --pr-navy2: var(--gb-petroleum-2); --pr-ivory: var(--gb-ivory); --pr-paper: #fffdf8; --pr-sand: #eadfce; --pr-gold: var(--gb-gold); --pr-gold2: var(--gb-gold-principal); --pr-ink: var(--gb-graphite); --pr-muted: #5f7080; --pr-line: rgba(29,36,48,.15); }
.portfolio-rest .screen { scroll-margin-top: 98px; }
.portfolio-rest .screen:not(.navy) { background: linear-gradient(120deg, var(--gb-ivory) 0%, #fffdf8 100%); }
.portfolio-rest .screen.navy { background: linear-gradient(112deg, var(--gb-petroleum) 0%, #15334a 58%, #0b2235 100%); }
.portfolio-rest .wrap { width: min(1180px, calc(100% - 72px)); }
.portfolio-rest .screen { padding: clamp(82px, 8vw, 126px) 0; }
.portfolio-rest .screen:not(.navy) > .wrap { position: relative; z-index: 1; }
.portfolio-rest .screen:not(.navy)::before { left: clamp(28px, 5vw, 90px); right: clamp(28px, 5vw, 90px); background: linear-gradient(90deg, transparent, rgba(205,164,108,.38) 22%, rgba(205,164,108,.08) 78%, transparent); }
.portfolio-rest .eyebrow,
.portfolio-rest .case-label { color: #9f773d; }
.portfolio-rest .section-head { display: block; }
.portfolio-rest .eyebrow {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  margin: 0 0 14px;
  text-align: left;
}
.site-header { border-bottom: 0; }
body.scrolled .site-header { border-bottom-color: transparent; }
.nav-practice-wrap { gap: 2px; }
.nav-submenu-toggle { width: 16px; }

/* Keep the Practice Areas toggle visible without making the Journey gap look
   wider than every other desktop navigation interval. The arrow remains a
   full hit target, but no longer consumes a second flex slot. */
@media (min-width: 921px) {
  .nav-practice-wrap { gap: 0; }
  .nav-practice-wrap .nav-submenu-toggle {
    position: absolute;
    left: calc(100% + 4px);
    top: 50%;
    transform: translateY(-50%);
  }
}
.portfolio-rest .eyebrow::after {
  content: "";
  display: block;
  flex: 0 1 150px;
  min-width: 64px;
  height: 1px;
  background: rgba(159,119,61,.72);
}
.portfolio-rest .section-head h2,
.portfolio-rest .case-copy h2,
.portfolio-rest .work04-copy h2,
.portfolio-rest .video-copy h2,
.portfolio-rest .journey-copy h2,
.portfolio-rest #highlights h2,
.portfolio-rest .about-copy .quote,
.portfolio-rest .resume-grid h2,
.portfolio-rest .cta h2 { color: var(--gb-graphite); }
.portfolio-rest .screen.navy .eyebrow,
.portfolio-rest .screen.navy h2 { color: var(--gb-ivory); }
.portfolio-rest .capability-feature { grid-template-columns: .90fr 1.10fr; gap: 64px; }
.portfolio-rest .capability-feature-media { border-color: rgba(29,36,48,.18); box-shadow: 16px 18px 0 rgba(205,164,108,.14); }
.portfolio-rest .cap-grid { gap: 1px; background: rgba(29,36,48,.16); }
.portfolio-rest .card { min-height: 202px; background: rgba(255,253,248,.95); box-shadow: inset 0 2px 0 rgba(205,164,108,.34); }
.portfolio-rest .card h3 { color: var(--gb-graphite); }
.portfolio-rest .practice-sequence { position: relative; overflow: hidden; }
.portfolio-rest .practice-sequence::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: linear-gradient(transparent, rgba(205,164,108,.34) 12%, rgba(205,164,108,.10) 88%, transparent); pointer-events: none; }
.portfolio-rest .practice-sequence > .screen { position: relative; }
.portfolio-rest .practice-area { isolation: isolate; }
.portfolio-rest #practice-area-01 { background: linear-gradient(120deg, #fffdf8, #f2ecdf); }
.portfolio-rest #practice-area-02 { background: linear-gradient(120deg, #e9decd, #f5eee5); }
.portfolio-rest #practice-area-03 { background: linear-gradient(120deg, #f4efe6, #fffdf8); }
.portfolio-rest #practice-area-04 { background: linear-gradient(120deg, #fffdf8, #f2eadf); }
.portfolio-rest #practice-area-05 { background: linear-gradient(120deg, #e9decd, #f5eee5); }
.portfolio-rest .practice-overview { padding-bottom: 82px; }
.portfolio-rest .practice-overview h2 { max-width: 780px; }
.portfolio-rest .practice-intro { max-width: 720px; margin: 17px 0 0; color: #5f7080; font-size: 16px; line-height: 1.55; }
.portfolio-rest .practice-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; margin-top: 38px; background: rgba(29,36,48,.16); border: 1px solid rgba(29,36,48,.16); }
.portfolio-rest .practice-tile { min-height: 166px; padding: 22px 18px; background: rgba(255,253,248,.92); color: var(--gb-graphite); text-decoration: none; box-shadow: inset 0 2px 0 rgba(205,164,108,.34); transition: background .18s ease, transform .18s ease; }
.portfolio-rest .practice-tile:hover,
.portfolio-rest .practice-tile:focus-visible { background: #fff; transform: translateY(-3px); outline: none; }
.portfolio-rest .practice-tile .num { display: block; color: #9f773d; font-size: 11px; font-weight: 850; letter-spacing: .18em; }
.portfolio-rest .practice-tile strong { display: block; margin-top: 26px; font-size: 15px; line-height: 1.12; }
.portfolio-rest .practice-tile span { display: block; margin-top: 9px; color: #687686; font-size: 11px; line-height: 1.4; }
.portfolio-rest .practice-area .case-label,
.portfolio-rest .practice-area .artifact-kicker,
.portfolio-rest .practice-area .map-label { color: #9f773d; }
.portfolio-rest .case-artifact,
.portfolio-rest .work04-map { background: rgba(255,253,248,.75); border-color: rgba(29,36,48,.16); box-shadow: 18px 18px 0 rgba(205,164,108,.12); }
.portfolio-rest .case-artifact::after,
.portfolio-rest .work04-map::after { background: var(--gb-gold-principal); }
.portfolio-rest #practice-area-03 .video-visual { background: #e9decd; box-shadow: 18px 18px 0 rgba(205,164,108,.14); }

/* One chapter, two screens: no background reset between human proof and highlights. */
.human-proof-chapter { position: relative; overflow: hidden; background: linear-gradient(120deg, #f4efe6 0%, #fffdf8 100%); }
.human-proof-chapter::after { content: ""; position: absolute; right: 9%; top: 8%; width: 28vw; height: 28vw; border: 1px solid rgba(205,164,108,.18); border-radius: 50%; pointer-events: none; }
.human-proof-chapter > .screen { background: transparent !important; border-top: 0; }
.human-proof-chapter #capability-expansion { padding-bottom: 56px; }
.human-proof-chapter #highlights { padding-top: 48px; }
.portfolio-rest .proof-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; }
.portfolio-rest .proof-card { background: rgba(255,255,255,.88); border-color: rgba(29,36,48,.16); }
.portfolio-rest .proof-card img { aspect-ratio: 16 / 10; }
.portfolio-rest .proof-card h3 { color: var(--gb-graphite); }
.portfolio-rest .proof-index { display: none !important; }
.portfolio-rest .moment-list { grid-template-columns: repeat(3, 1fr); background: rgba(29,36,48,.14); border-color: rgba(29,36,48,.14); }
.portfolio-rest .moment { background: rgba(255,253,248,.92); }
.portfolio-rest .moment .k { color: #9f773d; }
.portfolio-rest .moment h3 { color: var(--gb-graphite); }
.portfolio-rest #highlights .moment:last-child:nth-child(odd) { width: auto; grid-column: auto; }
.portfolio-rest .closing-quote { position: relative; z-index: 1; max-width: 690px; margin: 42px 0 0; padding-left: 20px; border-left: 2px solid var(--gb-gold-principal); color: rgba(244,239,230,.86); font-size: clamp(22px, 2.2vw, 34px); line-height: 1.08; letter-spacing: -.035em; }
.portfolio-rest .closing-quote small { display: block; margin-top: 12px; color: rgba(244,239,230,.52); font-size: 10px; letter-spacing: .15em; text-transform: uppercase; }

.portfolio-rest #about { background: linear-gradient(120deg, #fffdf8, #f4efe6); }
.portfolio-rest .about-photo { box-shadow: 18px 18px 0 rgba(205,164,108,.16); }
.portfolio-rest #resume { background: linear-gradient(120deg, #e9decd, #f5eee5); }
.portfolio-rest .resume-card { background: rgba(255,255,255,.85); }
.portfolio-rest #contact { background: linear-gradient(112deg, #0d1b2a, #15334a 58%, #0b2235); }
.portfolio-rest .cta h2 { color: var(--gb-ivory); }
.portfolio-rest .cta-photo { box-shadow: 18px 18px 0 rgba(205,164,108,.16); }
.portfolio-rest .btn.gold { background: linear-gradient(105deg, var(--gb-gold-light), var(--gb-gold-principal)); }
.portfolio-rest .footerline { align-items: center; }
.portfolio-rest .footer-lockup { display: inline-flex; align-items: center; margin-left: 12px; }
.portfolio-rest .footer-logo { width: 148px; }

@media (max-width: 1220px) {
  .site-header { grid-template-columns: minmax(190px, 1fr) auto minmax(160px, 1fr); padding-inline: 4%; }
  .site-nav { gap: 14px; }
  .site-header .brand-full { width: 200px; }
  .hero-copy { width: 40%; }
  .portfolio-rest .practice-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 980px) {
  .site-header { display: flex; min-height: 82px; padding: 7px 6% 0; }
  .site-header > a { margin: 0; }
  .site-header .brand-full { width: 188px; }
  .site-header .brand-monogram { width: 40px; height: 40px; }
  .mobile-nav-toggle { display: block; order: 3; margin-left: auto; }
  .site-nav { position: absolute; top: 100%; left: 0; right: 0; display: none !important; flex-direction: column; align-items: stretch; gap: 0; padding: 14px 7% 20px; background: rgba(13,27,42,.98); border-top: 1px solid rgba(233,195,138,.12); border-bottom: 1px solid rgba(233,195,138,.22); box-shadow: 0 18px 30px rgba(0,0,0,.30); white-space: normal; }
  .site-nav.mobile-open { display: flex !important; }
  .site-nav > a,
  .nav-practice-wrap { width: 100%; min-height: 42px; }
  .site-nav > a { display: flex !important; align-items: center; padding: 10px 0; }
  .site-nav .languages { display: flex !important; gap: 18px; margin: 8px 0 0; padding-top: 13px; border-top: 1px solid rgba(255,255,255,.13); }
  .nav-practice-wrap { display: grid; grid-template-columns: 1fr 42px; gap: 0; align-items: center; }
  .nav-practice-wrap .nav-practice-link { width: auto; }
  .nav-submenu-toggle { width: 42px; height: 42px; justify-self: end; }
  .nav-submenu { position: static; grid-column: 1 / -1; min-width: 0; margin: 0 0 8px; padding: 4px 0 4px 14px; border: 0; border-left: 1px solid rgba(233,195,138,.38); box-shadow: none; opacity: 1; pointer-events: none; transform: none; display: none; background: transparent; }
  .nav-submenu.is-open { display: grid; pointer-events: auto; }
  .nav-submenu a { padding: 9px 10px; }
  body.scrolled .site-header { min-height: 74px; }
  .hero-copy { top: 18%; width: 52%; }
  .hero-copy h1 { font-size: clamp(50px, 5.9vw, 76px); }
  .portfolio-rest .wrap { width: min(100% - 44px, 1180px); }
  .portfolio-rest .practice-grid { grid-template-columns: repeat(2, 1fr); }
  .portfolio-rest .proof-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* The supplied subject is a full transparent canvas. On a narrow viewport it
     must be contained as a canvas, otherwise object-fit:cover magnifies the
     transparent margins and clips Giovanni/chair. */
  .hero .layer-subject { transform: none; }
  .hero .layer-subject .subject {
    position: absolute;
    inset: auto clamp(0px, 13vw, 100px) 16px auto;
    width: clamp(620px, 117vw, 900px);
    height: auto;
    max-width: none;
    object-fit: contain;
    object-position: center;
  }
}
@media (max-width: 720px) {
  .hero { min-height: 760px; height: max(100svh, 760px); }
  .hero .layer-background .background { object-position: 66% center; }
  .hero .layer-subject { transform: none; }
  .hero .layer-subject .subject {
    inset: auto 0 32px auto;
    width: clamp(620px, 159vw, 700px);
  }
  .hero .layer-foreground { transform: translateY(4%); }
  .hero .layer-path,
  .hero .layer-rear,
  .hero .layer-from-panel,
  .hero .layer-subject-occlusion,
  .hero .layer-front-panels,
  .hero .light-path-endpoint { display: none; }
  .site-header { min-height: 74px; padding-inline: 7%; }
  .site-header .brand-full { width: 154px; }
  .site-header .brand-monogram { width: 36px; height: 36px; }
  .hero-copy { top: 17%; left: 7%; width: 74%; }
  .hero-copy .eyebrow { margin-bottom: 18px; font-size: 9px; letter-spacing: .22em; white-space: nowrap; }
  .hero-copy h1 { font-size: clamp(46px, 12.3vw, 58px); line-height: 1.04; letter-spacing: -.07em; }
  .hero-copy .support { max-width: 100%; margin-top: 24px; font-size: 15px; line-height: 1.45; }
  .ticker { height: 62px; min-height: 62px; }
  .ticker-label, .signature { display: none; }
  .ticker-track { font-size: 10px; }
  .remote-work { min-height: 0; }
  .remote-grid { grid-template-columns: 1fr; position: relative; }
  .remote-media { min-height: 420px; height: 58svh; padding: 22px 7vw; }
  .remote-photo { object-position: 50% 29%; }
  .remote-copy { padding: 60px 7% 52px; }
  .remote-title { font-size: clamp(42px, 11vw, 56px); }
  .remote-evidence { grid-template-columns: 1fr; }
  .remote-evidence-item + .remote-evidence-item { padding-left: 0; border-left: 0; border-top: 1px solid rgba(248,245,239,.14); }
  .portfolio-rest .wrap { width: min(100% - 28px, 1180px); }
  .portfolio-rest .screen { padding: 62px 0; }
  .portfolio-rest .practice-sequence::before { left: 16px; }
  .portfolio-rest .practice-grid,
  .portfolio-rest .proof-grid,
  .portfolio-rest .moment-list { grid-template-columns: 1fr; }
  .portfolio-rest .practice-tile { min-height: 132px; }
  .human-proof-chapter::after { right: -18%; top: 6%; width: 62vw; height: 62vw; }
  .portfolio-rest .closing-quote { margin-top: 30px; font-size: 24px; }
  .portfolio-rest .footerline { align-items: flex-start; flex-direction: column; }
  .portfolio-rest .footer-lockup { margin: 10px 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .ticker-track { transform: none !important; }
}

/* The approved ticker closes the Hero viewport on desktop/tablet. */
@media (min-width: 681px) {
  .hero {
    height: 100svh;
    min-height: 100svh;
    max-height: none;
  }
}

/* Hero-only Cumbuco balance: keep Giovanni fixed, bring the connected panels
   back into the legacy Hero relationship, and leave Remote's cream transition
   out of this section. */
@media (min-width: 921px) {
  /* The ticker is the Hero's fold: the section ends exactly at the viewport,
     regardless of a wide/short window ratio. */
  .hero {
    height: 100svh;
    min-height: 100svh;
    max-height: 100svh;
  }

  /* Keep every Hero layer on the same 1672x941 scene canvas. Cover the viewport
     uniformly so wide or tall desktop ratios crop excess scene instead of showing gutters. */
  .hero .stage {
    inset: auto;
    top: 50%;
    left: 50%;
    width: max(100%, 177.6833svh);
    height: auto;
    aspect-ratio: 1672 / 941;
    transform: translate(-50%, -50%);
    container-type: inline-size;
    /* Let the translated desk reach the fixed ticker instead of cropping at the artboard. */
    overflow: visible;
  }

  /* Subject and desk share the same fixed-ratio scene canvas. */
  .hero .layer-subject {
    top: auto;
    bottom: 0;
    height: 100%;
  }

  /* The supplied foreground replacement already includes the notebook and
     desk objects; keep the former isolated notebook layer off. */
  .hero .layer-notebook { display: none !important; }

  .hero .panel-from {
    /* Re-align to the approved legacy Hero balance around the subject. */
    top: 20%;
    left: 42.05%;
    width: 17.35%;
  }
  .hero .panel-to {
    top: 4.7%;
    right: 10.9%;
    width: 17.2%;
    transform: rotate(-1deg);
  }
}

@media (min-width: 681px) and (max-width: 920px) {
  .hero .panel-from { left: 38%; width: 19%; }
  .hero .panel-to { right: 0.8%; width: 19%; }
}

.hero .stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
  /* Hero uses the navy left-to-right treatment only; the cream fade belongs to Remote. */
  background:
    radial-gradient(ellipse 38% 34% at 56% 28%, rgba(255,226,170,.12), transparent 72%),
    linear-gradient(90deg, rgba(5,18,33,.60) 0%, rgba(5,18,33,.36) 38%, rgba(5,18,33,.12) 70%, transparent 100%);
}

/* Keep the approved endpoint readable at the upper-left edge of To Progress,
   without placing the bloom over the panel title. */
@media (min-width: 921px) {
  .hero .stage::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 8;
    pointer-events: none;
    mix-blend-mode: screen;
    background: radial-gradient(
      circle at 74.8% 20.8%,
      rgba(255, 246, 194, .96) 0,
      rgba(255, 211, 104, .62) .9%,
      rgba(255, 186, 72, .18) 2.8%,
      transparent 6%
    );
  }
}

/* Keep the Cumbuco sky, sun and kites readable beneath the copy. */
.hero .layer-atmosphere .atmosphere {
  background:
    radial-gradient(ellipse 53% 82% at 12% 43%, rgba(2,14,29,.66) 0%, rgba(2,14,29,.32) 48%, transparent 100%),
    linear-gradient(90deg, rgba(2,11,24,.54) 0%, rgba(2,13,26,.28) 36%, rgba(2,10,19,.09) 68%, transparent 100%),
    linear-gradient(180deg, rgba(1,7,15,.14), transparent 24%, rgba(1,7,12,.12) 100%);
}

/* Hero typography/header pass: preserve the subject and make the copy breathe. */
@media (min-width: 921px) {
  .hero-copy {
    left: 6.6%;
    width: 33.6%;
  }
  .hero-copy .eyebrow {
    margin-bottom: 1.3cqw;
    font-size: .63cqw;
  }
  .hero-copy h1 {
    font-size: 5.25cqw;
    font-weight: 350;
    letter-spacing: -.07em;
  }
  .hero-copy .support {
    max-width: 100%;
    height: auto;
    margin-top: 1.36cqw;
    color: rgba(249,247,242,.92);
    font-size: .89cqw;
    line-height: 1.4;
    background: none;
    box-shadow: none;
  }
  .site-nav .languages {
    position: absolute;
    top: 50%;
    right: 5.2%;
    margin: 0;
    transform: translateY(-50%);
  }
  body.scrolled .site-header {
    min-height: 104px;
    padding-top: 8px;
    border-bottom-color: transparent;
    background: linear-gradient(180deg, rgba(4,13,24,.48), transparent);
    box-shadow: none;
  }
}

/* Make the existing trajectory read as one rising connection: Automation -> From -> To. */
@media (min-width: 921px) {
  /* Reuse the supplied trajectory, placing it above the atmosphere veil but
     still below Giovanni. The wider canvas only extends its existing curve
     back toward Automation; it does not redraw the line. */
  .hero .layer-path { z-index: 9; }
  .hero .layer-path .light-path {
    left: 10%;
    top: -12%;
    width: 70%;
    height: auto;
    object-fit: contain;
    transform: scaleX(1.08) scaleY(1.2);
    transform-origin: right top;
  }
  .hero .light-path-endpoint {
    left: 78.5%;
    top: 23.5%;
    width: clamp(90px, 9cqw, 170px);
  }
}

@media (min-width: 681px) and (max-width: 920px) {
}

.ticker {
  /* The ticker is a translucent navy/grey glass strip; the Hero scene must remain visible through it. */
  background: rgba(49,62,76,.10);
  border-top-color: rgba(244,239,230,.14);
  backdrop-filter: blur(8px) saturate(104%);
  -webkit-backdrop-filter: blur(8px) saturate(104%);
}

/* The user-supplied desk is a wide transparent strip, already composed for
   the viewport. Anchor it to the bottom without stretching its perspective. */
.hero .layer-foreground { transform: none !important; }
.hero .layer-foreground .foreground {
  inset: auto 0 0 !important;
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
  object-fit: contain !important;
  object-position: center bottom !important;
   /* Preserve the existing bottom anchor so the supplied tabletop stays locked
      to Giovanni without moving the rest of the scene. */
  transform: translateY(0%) !important;
}

@media (min-width: 681px) {
  /* Keep the supplied work objects above the ticker. */
  .hero .layer-foreground .foreground { object-position: center bottom; }

  /* Soften the unrelated lower-left planter in the supplied balcony photo;
     this is a feathered veil, not a hard block, so the navy scene still reads
     continuously behind the copy. */
  .hero .layer-background::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 18% 44% at 0% 100%, rgba(7, 21, 36, .98) 0%, rgba(7, 21, 36, .72) 42%, transparent 78%);
  }

  /* The supplied replacement is already composed edge to edge; keep its
     transparent canvas intact so the desk reads continuously. */
  .hero .layer-foreground .foreground { clip-path: none; z-index: 1; }
}

@media (max-width: 680px) {
  .hero-copy .support {
    height: auto;
    background: none;
    box-shadow: none;
  }
}

/* Universal rhythm pass: keep chapter transitions compact while preserving
   enough room for the content to breathe. */
.portfolio-rest .screen {
  padding-block: clamp(48px, 4vw, 64px);
}
.portfolio-rest .practice-overview { padding-bottom: 48px; }
.human-proof-chapter #capability-expansion { padding-bottom: 44px; }
.human-proof-chapter #highlights { padding-top: 40px; }

@media (max-width: 1050px) {
  .portfolio-rest .screen { padding-block: 52px; }
  .portfolio-rest .practice-overview { padding-bottom: 42px; }
}

@media (max-width: 720px) {
  .portfolio-rest .screen { padding-block: 38px; }
  .portfolio-rest .practice-overview { padding-bottom: 34px; }
  .human-proof-chapter #capability-expansion { padding-bottom: 32px; }
  .human-proof-chapter #highlights { padding-top: 30px; }
}

/* remote-v4.css */
/* FINAL CODEX Remote mother-section: live photo, live copy, glass and discrete light. */
.remote-work.remote-v4{position:relative;min-height:100svh;height:100svh;min-height:760px;overflow:hidden;background:#091c2d;color:#f8f5ef;isolation:isolate;padding:0}
.remote-work.remote-v4:after{display:none}
.remote-v4-grid{position:absolute;inset:0;z-index:2;display:block;width:100%;height:100%;margin:0}
.remote-v4-copy{position:absolute;z-index:4;left:clamp(36px,4vw,80px);top:clamp(112px,13vh,150px);width:min(35vw,520px);padding:0;min-width:0}
.remote-v4 .remote-kicker{display:flex;align-items:center;gap:22px;margin:0 0 22px;color:#f2c35b;font-size:11px;font-weight:800;letter-spacing:.30em}
.remote-v4 .remote-kicker:after{content:"";width:120px;height:1px;background:linear-gradient(90deg,#f2c35b,transparent)}
.remote-v4 .remote-title{margin:0 0 24px;color:#fbfaf5;font-size:clamp(50px,5vw,84px);font-weight:400;letter-spacing:-.055em;line-height:.94;text-shadow:0 3px 18px rgba(3,13,22,.78)}
.remote-v4 .remote-title span{display:block}.remote-v4 .remote-title span:last-child{color:#f6d27c}
.remote-v4 .remote-body{max-width:520px;color:rgba(250,251,252,.94);font-size:clamp(13px,.94vw,16px);line-height:1.5;text-shadow:0 2px 12px rgba(3,13,22,.92)}
.remote-v4 .remote-body p{margin:0 0 13px}
.remote-v4-relationship{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:18px 0 0;color:#f6d27c;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;text-shadow:0 2px 9px rgba(3,13,22,.9)}
.remote-v4-relationship i{width:24px;height:1px;background:#f2c35b;box-shadow:0 0 8px rgba(242,195,91,.5)}
.remote-v4-microfacts{display:flex;flex-wrap:wrap;gap:0;margin-top:26px;border-left:1px solid rgba(242,195,91,.8);color:rgba(250,251,252,.92);font-size:9px;line-height:1.3;letter-spacing:.10em;text-transform:uppercase;text-shadow:0 2px 9px rgba(3,13,22,.9)}
.remote-v4-microfacts span{padding:4px 14px;border-right:1px solid rgba(242,195,91,.36)}
.remote-v4-microfacts span:first-child{padding-left:14px}
.remote-v4-media{position:absolute;inset:0;z-index:0;margin:0;overflow:visible;min-width:0;height:100%}
.remote-v4-media:after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(5,19,31,.82) 0%,rgba(7,25,39,.64) 34%,rgba(7,25,39,.15) 67%,rgba(5,18,29,.32) 100%),linear-gradient(0deg,rgba(5,18,29,.52),transparent 34%,rgba(5,18,29,.18))}
.remote-v4-photo-frame{position:absolute;inset:0;overflow:hidden;border:0;box-shadow:none}
.remote-v4-photo{display:block;width:100%;height:100%;object-fit:cover;object-position:center 50%;filter:saturate(.88) contrast(1.03)}
.remote-v4-photo-frame:after{content:"";position:absolute;inset:0;background:transparent;pointer-events:none}
.remote-parabolas{position:absolute;z-index:2;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;opacity:.82}
.remote-ops-panel{position:absolute;z-index:5;right:4vw;top:12%;width:min(38vw,610px);height:min(45%,410px);min-height:290px;padding:30px 30px 24px;color:#edf3f8;filter:drop-shadow(0 18px 30px rgba(0,0,0,.28))}
.remote-glass-surface{position:absolute;z-index:0;inset:0;width:100%;height:100%;object-fit:fill;opacity:.98;pointer-events:none}
.remote-ops-panel:before{content:"";position:absolute;inset:2%;z-index:0;border:1px solid rgba(248,224,172,.12);border-radius:22px;background:rgba(7,27,43,.16);backdrop-filter:blur(8px) saturate(1.06);pointer-events:none}
.remote-ops-panel:after{content:"";position:absolute;left:7%;right:7%;bottom:6%;height:1px;background:linear-gradient(90deg,transparent,#f2c35b 24%,#f2c35b 76%,transparent);opacity:.56}
.remote-panel-inner{position:relative;z-index:1;height:100%;display:grid;grid-template-rows:auto 1fr auto;gap:14px}
.remote-panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;padding:0 2%}
.remote-panel-head strong{display:block;font-size:15px;letter-spacing:.15em}.remote-panel-head span{display:block;margin-top:5px;color:#c7d2dc;font-size:10px;letter-spacing:.11em}
.remote-panel-commitment{align-self:start;text-align:right;color:rgba(230,237,243,.76);font-size:9px;letter-spacing:.08em;line-height:1.45;text-transform:uppercase}
.remote-panel-body{display:grid;grid-template-columns:minmax(0,1fr) 30%;gap:18px;min-height:0;align-items:center;padding:0 2%}
.remote-map-wrap{position:relative;min-height:0;height:100%;display:flex;align-items:center;justify-content:center}
.remote-us-map{width:100%;height:100%;max-height:225px;object-fit:contain;filter:drop-shadow(0 0 7px rgba(175,192,210,.18))}
.remote-context-list{display:grid;align-content:center;gap:11px;font-size:9px;letter-spacing:.05em;text-transform:uppercase;color:#d8e2ea}
.remote-context-list span{display:flex;align-items:center;gap:8px}.remote-context-list span:before{content:"";width:6px;height:6px;border-radius:50%;background:#f2c35b;box-shadow:0 0 10px rgba(242,195,91,.72)}
.remote-panel-foot{display:flex;justify-content:space-between;align-items:flex-end;padding:0 3% 2%;font-size:8px;letter-spacing:.08em;text-transform:uppercase;color:rgba(231,238,244,.68)}
.remote-panel-foot b{color:#f6d27c;font-weight:700}
.remote-v4-evidence,.remote-v4-signature{display:none!important}
.remote-to-capabilities{position:relative;z-index:3;height:180px;margin-top:-1px;overflow:hidden;background:linear-gradient(180deg,#0a2235 0%,#18394b 30%,#7e786f 64%,#eee9df 88%,#fffdf8 100%)}
.remote-to-capabilities:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(9,28,45,.18),transparent 42%,rgba(255,253,248,.34));pointer-events:none}
.remote-to-capabilities img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.86;mix-blend-mode:screen;pointer-events:none}
@media(max-height:790px) and (min-width:1001px){.remote-v4-copy{top:102px}.remote-v4 .remote-title{font-size:clamp(46px,4.5vw,72px);margin-bottom:17px}.remote-v4 .remote-body{font-size:12.5px;line-height:1.4}.remote-v4 .remote-body p{margin-bottom:8px}.remote-v4-microfacts{margin-top:15px}.remote-ops-panel{top:10%;height:50%;min-height:260px}}
@media(max-width:1000px){.remote-work.remote-v4{height:auto;min-height:100svh;padding:0 5vw 48px;display:block}.remote-v4-grid{position:relative;height:auto;min-height:0;display:flex;flex-direction:column;padding-top:88px}.remote-v4-copy{position:relative;inset:auto;order:1;width:100%;padding:0;max-width:620px}.remote-v4-media{position:relative;order:2;inset:auto;height:62svh;min-height:470px;margin-top:30px}.remote-ops-panel{right:2%;top:45%;width:62%;height:45%;min-height:235px}.remote-v4-microfacts{margin-bottom:0}.remote-to-capabilities{height:150px}}
@media(max-width:620px){.remote-work.remote-v4{padding:0 18px 34px}.remote-v4-grid{padding-top:78px}.remote-v4 .remote-kicker{gap:12px;margin-bottom:17px;font-size:9px;letter-spacing:.22em}.remote-v4 .remote-kicker:after{width:70px}.remote-v4 .remote-title{font-size:clamp(43px,13vw,58px);margin-bottom:20px}.remote-v4 .remote-body{font-size:14px}.remote-v4 .remote-body p{margin-bottom:11px}.remote-v4-relationship{font-size:9px}.remote-v4-microfacts{display:grid;gap:0;margin-top:20px;font-size:8px}.remote-v4-microfacts span{padding:5px 10px;border-right:0;border-bottom:1px solid rgba(242,195,91,.28)}.remote-v4-microfacts span:first-child{padding-left:10px}.remote-v4-media{height:70svh;min-height:500px;margin-top:24px}.remote-v4-photo{object-position:center 50%}.remote-ops-panel{top:53%;right:0;width:96%;height:38%;min-height:210px;padding:18px 18px 16px}.remote-panel-body{grid-template-columns:minmax(0,1fr) 32%;gap:7px}.remote-panel-head{gap:8px}.remote-panel-head strong{font-size:11px}.remote-panel-head span{font-size:8px}.remote-panel-commitment{display:none}.remote-context-list{gap:6px;font-size:7px}.remote-panel-foot{font-size:7px}.remote-to-capabilities{height:120px}}
@media(prefers-reduced-motion:reduce){.remote-parabolas{opacity:.62}}

/* portfolio-v4-next.css */
/* V4 continuation layer: post-Remote system composition only.
   Hero and Remote are deliberately not addressed in this file. */

.portfolio-rest {
  --v4-ink: #102b42;
  --v4-gold: #c59543;
  --v4-gold-light: #e7bd68;
  --v4-paper: #fffdf8;
  --v4-line: rgba(16, 43, 66, .16);
}

/* Capabilities becomes a connected operating map rather than an isolated card grid. */
.portfolio-rest #capabilities .cap-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  padding: 18px 0;
  border: 0;
  background: transparent;
}

.portfolio-rest #capabilities .cap-grid::before,
.portfolio-rest #capabilities .cap-grid::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

.portfolio-rest #capabilities .cap-grid::before {
  top: 50%;
  left: 4%;
  right: 4%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(197,149,67,.55) 12%, rgba(197,149,67,.55) 88%, transparent);
}

.portfolio-rest #capabilities .cap-grid::after {
  top: calc(50% - 4px);
  left: calc(50% - 4px);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--v4-gold-light);
  box-shadow: 0 0 0 7px rgba(231,189,104,.13), 0 0 20px rgba(197,149,67,.42);
}

.portfolio-rest #capabilities .card {
  z-index: 1;
  min-height: 214px;
  border: 1px solid var(--v4-line);
  border-radius: 2px;
  background: linear-gradient(145deg, rgba(255,253,248,.98), rgba(245,240,231,.92));
  box-shadow: 0 16px 30px rgba(16,43,66,.06), inset 0 2px 0 rgba(197,149,67,.38);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.portfolio-rest #capabilities .card:nth-child(n+4) {
  background: linear-gradient(145deg, rgba(233,222,205,.92), rgba(255,253,248,.97));
}

.portfolio-rest #capabilities .card:hover,
.portfolio-rest #capabilities .card:focus-within {
  transform: translateY(-5px);
  border-color: rgba(197,149,67,.46);
  box-shadow: 0 22px 38px rgba(16,43,66,.11), inset 0 2px 0 rgba(231,189,104,.72);
}

.portfolio-rest #capabilities .card .num {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.portfolio-rest #capabilities .card .num::after {
  content: "";
  display: inline-block;
  width: 24px;
  height: 1px;
  background: rgba(197,149,67,.65);
}

/* The five areas are an explicit handoff sequence. */
.portfolio-rest .practice-overview {
  position: relative;
  background: linear-gradient(120deg, #f5f1e8 0%, #fffdf8 58%, #e9decd 100%);
}

.portfolio-rest .practice-overview::after {
  content: "";
  position: absolute;
  right: -10vw;
  bottom: -19vw;
  width: 38vw;
  height: 38vw;
  border: 1px solid rgba(197,149,67,.18);
  border-radius: 50%;
  pointer-events: none;
}

.portfolio-rest .practice-grid {
  position: relative;
  z-index: 1;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  background: transparent;
  border: 0;
}

.portfolio-rest .practice-tile {
  position: relative;
  min-height: 184px;
  border: 1px solid var(--v4-line);
  border-radius: 2px;
  background: rgba(255,253,248,.84);
  box-shadow: inset 0 2px 0 rgba(197,149,67,.42), 0 12px 24px rgba(16,43,66,.05);
}

.portfolio-rest .practice-tile::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -11px;
  width: 10px;
  height: 1px;
  background: var(--v4-gold);
}

.portfolio-rest .practice-tile:last-child::after { display: none; }
.portfolio-rest .practice-tile strong { max-width: 175px; }

.portfolio-rest .practice-sequence > .practice-area {
  border-top: 1px solid rgba(197,149,67,.18);
}

.portfolio-rest .practice-sequence > .practice-area:first-child { border-top: 0; }

.portfolio-rest .practice-area::before {
  content: "";
  position: absolute;
  left: clamp(28px, 5vw, 90px);
  right: clamp(28px, 5vw, 90px);
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(197,149,67,.45), transparent);
  pointer-events: none;
}

/* Journey carries the identity as a readable eight-stage route. */
.portfolio-rest #journey .timeline {
  position: relative;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding: 12px;
  border: 0;
  background: transparent;
}

.portfolio-rest #journey .timeline::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 6%;
  right: 6%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(231,189,104,.62), transparent);
}

.portfolio-rest #journey .step {
  position: relative;
  z-index: 1;
  min-height: 152px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 2px;
  background: linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.025));
  box-shadow: inset 0 2px 0 rgba(231,189,104,.3);
}

.portfolio-rest #journey .step:nth-child(n+5) { background: linear-gradient(145deg, rgba(9,29,48,.38), rgba(255,255,255,.045)); }
.portfolio-rest #journey .step::after {
  content: "";
  position: absolute;
  top: calc(50% - 4px);
  right: -8px;
  width: 7px;
  height: 7px;
  border: 1px solid var(--v4-gold-light);
  border-radius: 50%;
  background: var(--v4-ink);
}
.portfolio-rest #journey .step:nth-child(4)::after,
.portfolio-rest #journey .step:last-child::after { display: none; }

/* Human Proof and Highlights remain one chapter, but gain a stronger editorial rhythm. */
.human-proof-chapter .section-head { position: relative; z-index: 1; }
.human-proof-chapter .proof-card { border-radius: 2px; }
.human-proof-chapter .proof-card-body { position: relative; }
.human-proof-chapter .proof-index {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(197,149,67,.42);
  border-radius: 50%;
  background: rgba(233,222,205,.28);
}

.portfolio-rest #highlights .moment {
  min-height: 154px;
  border-radius: 2px;
}

.portfolio-rest #resume .resume-cards { gap: 14px; }
.portfolio-rest #resume .resume-card { border-radius: 2px; transition: transform .2s ease, border-color .2s ease; }
.portfolio-rest #resume .resume-card:hover { transform: translateY(-3px); border-color: rgba(197,149,67,.48); }
.portfolio-rest #contact .contact-box { border-top-color: rgba(231,189,104,.42); }

@media (max-width: 1220px) {
  .portfolio-rest .practice-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .portfolio-rest .practice-tile:nth-child(3)::after { display: none; }
}

@media (max-width: 980px) {
  .portfolio-rest #capabilities .cap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portfolio-rest #capabilities .cap-grid::before { top: 33.33%; bottom: 33.33%; height: auto; left: 50%; right: auto; width: 1px; background: linear-gradient(transparent, rgba(197,149,67,.5), transparent); }
  .portfolio-rest #capabilities .cap-grid::after { top: calc(50% - 4px); }
  .portfolio-rest #journey .timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portfolio-rest #journey .timeline::before { top: 50%; left: 10%; right: 10%; }
  .portfolio-rest #journey .step:nth-child(2)::after,
  .portfolio-rest #journey .step:nth-child(4)::after,
  .portfolio-rest #journey .step:nth-child(6)::after { display: none; }
}

@media (max-width: 720px) {
  .portfolio-rest #capabilities .cap-grid { grid-template-columns: 1fr; padding: 0; gap: 10px; }
  .portfolio-rest #capabilities .cap-grid::before,
  .portfolio-rest #capabilities .cap-grid::after { display: none; }
  .portfolio-rest #capabilities .card { min-height: 0; }
  .portfolio-rest .practice-grid { grid-template-columns: 1fr; gap: 8px; }
  .portfolio-rest .practice-tile { min-height: 132px; }
  .portfolio-rest .practice-tile::after { top: auto; right: auto; left: 22px; bottom: -9px; width: 1px; height: 8px; }
  .portfolio-rest .practice-tile:last-child::after { display: none; }
  .portfolio-rest #journey .timeline { grid-template-columns: 1fr; padding: 0; }
  .portfolio-rest #journey .timeline::before { top: 0; bottom: 0; left: 12px; right: auto; width: 1px; height: auto; background: linear-gradient(transparent, rgba(231,189,104,.58), transparent); }
  .portfolio-rest #journey .step { min-height: 0; padding-left: 28px; }
  .portfolio-rest #journey .step::after { top: 24px; right: auto; left: 8px; }
  .portfolio-rest #journey .step:nth-child(2)::after,
  .portfolio-rest #journey .step:nth-child(4)::after,
  .portfolio-rest #journey .step:nth-child(6)::after { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .portfolio-rest #capabilities .card,
  .portfolio-rest #resume .resume-card { transition: none; }
}

/* remote-reference-forensic.css */
/* Remote Work final consolidation: the supplied master is the complete
   artwork. This stylesheet only controls the full-bleed image, HTML copy,
   responsive positioning and the seam into Capabilities. */

.remote-work.remote-v4 {
  position: relative !important;
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: 0 !important;
  height: clamp(840px, 54vw, 1030px) !important;
  min-height: 840px !important;
  max-height: none !important;
  padding: 0 !important;
  overflow: hidden !important;
  isolation: isolate !important;
  background: #fdfaf5 !important;
  color: #f8f5ef !important;
}

.remote-work.remote-v4::before,
.remote-work.remote-v4::after,
.remote-v4-media::before,
.remote-v4-media::after {
  content: none !important;
  display: none !important;
}

.remote-v4-media {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  background: #fdfaf5 !important;
  transform: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  filter: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

.remote-v4-media picture,
.remote-v4-master {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

.remote-v4-master {
  max-width: none !important;
  object-fit: cover !important;
  object-position: 50% 0% !important;
  transform: none !important;
  filter: none !important;
}

.remote-v4-photo,
.remote-light-main,
.remote-light-secondary,
.remote-panel-asset {
  display: none !important;
}

.remote-v4-copy {
  position: absolute !important;
  z-index: 3 !important;
  top: 11% !important;
  left: clamp(36px, 4vw, 78px) !important;
  width: min(27vw, 520px) !important;
  max-width: 520px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.remote-v4 .remote-kicker {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  margin: 0 0 34px !important;
  color: #f2c35b !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .28em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  text-shadow: 0 1px 8px rgba(3, 13, 22, .55) !important;
}

.remote-v4 .remote-kicker::after {
  content: "" !important;
  display: block !important;
  width: clamp(90px, 9vw, 150px) !important;
  height: 1px !important;
  background: #f2c35b !important;
}

.remote-v4 .remote-title {
  margin: 0 0 24px !important;
  padding: 0 !important;
  color: #fffdf8 !important;
  font-family: inherit !important;
  font-size: clamp(64px, 4.15vw, 80px) !important;
  font-weight: 400 !important;
  letter-spacing: -.047em !important;
  line-height: .9 !important;
  text-shadow: 0 3px 18px rgba(0, 0, 0, .56) !important;
}

.remote-v4 .remote-title > span {
  display: block !important;
  white-space: nowrap !important;
}

.remote-v4 .remote-title > span:first-child { color: #fffdf8 !important; }
.remote-v4 .remote-title > span:last-child { color: #f5c965 !important; }

.remote-v4 .remote-body {
  width: min(100%, 445px) !important;
  max-width: 445px !important;
  margin: 0 !important;
  color: rgba(249, 249, 246, .96) !important;
  font-size: clamp(14px, .94vw, 17px) !important;
  font-weight: 400 !important;
  line-height: 1.48 !important;
  text-shadow: 0 2px 11px rgba(0, 0, 0, .72) !important;
}

.remote-v4 .remote-body p { margin: 0 !important; }
.remote-v4 .remote-body p:nth-child(n + 2) { display: none !important; }

.remote-values {
  position: absolute !important;
  z-index: 3 !important;
  top: 48% !important;
  left: clamp(38px, 4vw, 78px) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 0 0 20px !important;
  color: rgba(247, 248, 247, .97) !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  letter-spacing: .25em !important;
  line-height: 1.05 !important;
  text-transform: uppercase !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .66) !important;
}

.remote-values::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 2px !important;
  background: #d9aa48 !important;
}

/* The master already contains the glass frame and map. This transparent
   container exists only to anchor translatable HTML text to safe zones. */
.remote-ops-panel {
  position: absolute !important;
  inset: 0 !important;
  z-index: 4 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  pointer-events: none !important;
  container-type: normal !important;
}

.remote-ops-panel::before,
.remote-ops-panel::after {
  content: none !important;
  display: none !important;
}

.remote-panel-title,
.remote-context-list,
.remote-panel-commitment {
  position: absolute !important;
  z-index: 1 !important;
  margin: 0 !important;
  color: #eef3f6 !important;
  text-transform: uppercase !important;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .7) !important;
}

/* Zone A: panel header. */
.remote-panel-title {
  top: 11% !important;
  left: 65% !important;
  width: 16% !important;
  max-width: 16% !important;
}

.remote-panel-title strong {
  display: block !important;
  font-size: clamp(10px, .82vw, 16px) !important;
  font-weight: 650 !important;
  letter-spacing: .14em !important;
  line-height: 1.15 !important;
}

.remote-panel-title span {
  display: block !important;
  margin-top: 7px !important;
  color: #d7dee3 !important;
  font-size: clamp(7px, .52vw, 10px) !important;
  font-weight: 500 !important;
  letter-spacing: .105em !important;
  line-height: 1.22 !important;
}

/* Zone B: service list. The map remains exclusively baked into the master. */
.remote-context-list {
  top: 15% !important;
  left: 84% !important;
  width: 12% !important;
  max-width: 12% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: clamp(7px, .72vw, 13px) !important;
  font-size: clamp(7px, .52vw, 10px) !important;
  font-weight: 520 !important;
  letter-spacing: .035em !important;
  line-height: 1.08 !important;
}

.remote-context-list span {
  display: flex !important;
  align-items: flex-start !important;
  gap: clamp(5px, .45vw, 9px) !important;
  min-width: 0 !important;
  white-space: normal !important;
}

.remote-context-list span::before {
  content: "" !important;
  display: block !important;
  flex: 0 0 auto !important;
  width: clamp(4px, .36vw, 7px) !important;
  height: clamp(4px, .36vw, 7px) !important;
  margin-top: .12em !important;
  border-radius: 50% !important;
  background: #f6d27c !important;
  box-shadow: 0 0 11px rgba(246, 210, 124, .95) !important;
}

/* Zone C: panel footer. */
.remote-panel-commitment {
  display: block !important;
  top: 35% !important;
  left: 84% !important;
  width: 12% !important;
  max-width: 12% !important;
  padding: 10px 0 0 !important;
  color: rgba(238, 241, 243, .94) !important;
  font-size: clamp(7px, .48vw, 9.5px) !important;
  font-weight: 520 !important;
  letter-spacing: .075em !important;
  line-height: 1.42 !important;
  text-align: left !important;
}

.remote-panel-commitment::before { display: none !important; }

.remote-to-capabilities {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

#capabilities {
  margin-top: 0 !important;
  border-top: 0 !important;
  background: #fdfaf5 !important;
}

/* The lower arc is a transition, not a section divider. The locked Remote
   artwork remains untouched; this lightweight SVG continues its visual energy
   into Capabilities without adding layout height or a hard seam. */
.remote-to-capabilities {
  display: block !important;
  position: relative !important;
  z-index: 4 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  background: transparent !important;
  pointer-events: none !important;
}
.remote-to-capabilities::after {
  content: "" !important;
  position: absolute !important;
  z-index: -1 !important;
  left: 0 !important;
  right: 0 !important;
  top: -168px !important;
  height: 208px !important;
  background: linear-gradient(180deg, rgba(253,250,245,0) 0%, rgba(253,250,245,.18) 52%, rgba(253,250,245,.86) 100%) !important;
  filter: blur(12px) !important;
}
.remote-capability-bridge {
  position: absolute !important;
  z-index: 2 !important;
  left: 0 !important;
  top: -174px !important;
  display: block !important;
  width: 100vw !important;
  height: 220px !important;
  overflow: visible !important;
  pointer-events: none !important;
}
.remote-capability-bridge path {
  fill: none !important;
  vector-effect: non-scaling-stroke !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}
.remote-capability-bridge-glow {
  stroke: rgba(224,184,101,.48) !important;
  stroke-width: 7px !important;
  filter: url(#remoteBridgeBlur) !important;
}
.remote-capability-bridge-line {
  stroke: url(#remoteBridgeStroke) !important;
  stroke-width: 1.2px !important;
}

/* Section boundaries remain soft transitions; internal flow/card borders stay
   available for hierarchy and evidence. */
.portfolio-rest .screen {
  border-top: 0 !important;
}
.portfolio-rest .screen:not(.navy)::before {
  display: none !important;
}

@media (min-width: 1024px) and (max-width: 1500px) {
  .remote-v4 .remote-title { font-size: 64px !important; }
  .remote-v4-copy { width: min(28vw, 400px) !important; }
}

@media (max-width: 1023px) {
  .remote-work.remote-v4 {
    height: 900px !important;
    min-height: 900px !important;
    max-height: 900px !important;
  }

  .remote-v4-copy {
    top: 7% !important;
    left: 6% !important;
    width: 52% !important;
    max-width: 430px !important;
  }

  .remote-v4 .remote-title {
    font-size: clamp(44px, 7.4vw, 68px) !important;
  }

  .remote-v4 .remote-body {
    width: 100% !important;
    max-width: 390px !important;
    font-size: 14px !important;
  }

  .remote-values { top: 44% !important; left: 6% !important; }

  .remote-panel-title { top: 10% !important; left: 62% !important; width: 25% !important; max-width: 25% !important; }
  .remote-context-list { top: 15% !important; left: 82% !important; width: 15% !important; max-width: 15% !important; }
  .remote-panel-commitment { top: 35% !important; left: 82% !important; width: 15% !important; max-width: 15% !important; }

  .remote-capability-bridge {
    top: -132px !important;
    height: 170px !important;
  }
  .remote-to-capabilities::after {
    top: -126px !important;
    height: 160px !important;
  }
}

@media (max-width: 620px) {
  .remote-work.remote-v4 {
    height: 900px !important;
    min-height: 900px !important;
    max-height: 900px !important;
  }

  .remote-v4-copy { top: 5% !important; left: 5% !important; width: 90% !important; max-width: 345px !important; }
  .remote-v4 .remote-kicker { gap: 11px !important; margin-bottom: 18px !important; font-size: 9px !important; }
  .remote-v4 .remote-kicker::after { width: 78px !important; }
  .remote-v4 .remote-title { max-width: 350px !important; font-size: clamp(38px, 11vw, 54px) !important; line-height: .96 !important; }
  .remote-v4 .remote-title > span { white-space: normal !important; }
  .remote-v4 .remote-body { max-width: 345px !important; width: 100% !important; font-size: 13px !important; }
  .remote-values { top: 43% !important; left: 6% !important; font-size: 9px !important; gap: 8px !important; padding-left: 16px !important; }
  .remote-panel-title { top: 10% !important; left: 55% !important; width: 35% !important; max-width: 35% !important; }
  .remote-context-list { top: 17% !important; left: 77% !important; width: 20% !important; max-width: 20% !important; font-size: 6.5px !important; gap: 6px !important; }
  .remote-panel-commitment { top: 36% !important; left: 77% !important; width: 20% !important; max-width: 20% !important; font-size: 6.5px !important; }

  .remote-capability-bridge {
    top: -104px !important;
    height: 138px !important;
  }
  .remote-to-capabilities::after {
    top: -100px !important;
    height: 124px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .remote-v4-master { animation: none !important; }
}

/* Remote operations panel: enlarge the live labels and give each language
   enough inset/width to read as a balanced overlay on the approved master. */
.remote-panel-title {
  left: 74% !important;
  width: 18% !important;
  max-width: 18% !important;
  transform: rotate(-4deg) !important;
  transform-origin: left center !important;
}
.remote-panel-title strong { font-size: clamp(12px, .98vw, 18px) !important; }
.remote-panel-title span {
  margin-top: 8px !important;
  font-size: clamp(9px, .68vw, 12px) !important;
  line-height: 1.3 !important;
}
.remote-context-list {
  left: 82.8% !important;
  top: 17% !important;
  width: 14.2% !important;
  max-width: 14.2% !important;
  transform: rotate(-4deg) !important;
  transform-origin: left top !important;
  gap: clamp(8px, .78vw, 14px) !important;
  font-size: clamp(9px, .71vw, 12.8px) !important;
  line-height: 1.2 !important;
}
.remote-panel-commitment {
  left: 80.8% !important;
  width: 15.5% !important;
  max-width: 15.5% !important;
  transform: rotate(-4deg) !important;
  transform-origin: left top !important;
  padding-top: 12px !important;
  font-size: clamp(9px, .64vw, 11.5px) !important;
  line-height: 1.5 !important;
}

html[lang^="pt"] .remote-panel-title { width: 19% !important; max-width: 19% !important; }
html[lang^="pt"] .remote-context-list { width: 16% !important; max-width: 16% !important; }
html[lang^="es"] .remote-panel-title { width: 20% !important; max-width: 20% !important; }
html[lang^="es"] .remote-context-list {
  left: 82.8% !important;
  width: 14.2% !important;
  max-width: 14.2% !important;
  letter-spacing: .015em !important;
}
html[lang^="es"] .remote-panel-commitment { left: 80.5% !important; width: 15.5% !important; max-width: 15.5% !important; }

@media (max-width: 1023px) {
  .remote-panel-title { left: 68.5% !important; width: 27% !important; max-width: 27% !important; }
  .remote-context-list { left: 80.5% !important; top: 17% !important; width: 16% !important; max-width: 16% !important; }
  .remote-panel-commitment { left: 78.5% !important; width: 15.5% !important; max-width: 15.5% !important; }
  html[lang^="pt"] .remote-panel-title { width: 29% !important; max-width: 29% !important; }
  html[lang^="es"] .remote-panel-title { width: 30% !important; max-width: 30% !important; }
  html[lang^="es"] .remote-context-list { left: 80.5% !important; width: 16% !important; max-width: 16% !important; }
  html[lang^="es"] .remote-panel-commitment { left: 78% !important; width: 16% !important; max-width: 16% !important; }
}

@media (max-width: 620px) {
  .remote-panel-title { left: 63% !important; width: 37% !important; max-width: 37% !important; }
  .remote-context-list {
    left: 76% !important;
    top: 18% !important;
    width: 20% !important;
    max-width: 20% !important;
    gap: 7px !important;
    font-size: 8.5px !important;
    line-height: 1.2 !important;
  }
  .remote-panel-commitment {
    left: 75% !important;
    width: 21% !important;
    max-width: 21% !important;
    padding-top: 10px !important;
    font-size: 8.5px !important;
  }
  .remote-panel-title strong { font-size: 12px !important; }
  .remote-panel-title span { font-size: 8.5px !important; }
  html[lang^="pt"] .remote-panel-title { width: 39% !important; max-width: 39% !important; }
  html[lang^="es"] .remote-panel-title { width: 41% !important; max-width: 41% !important; }
  html[lang^="es"] .remote-context-list { left: 76% !important; width: 20% !important; max-width: 20% !important; }
  html[lang^="es"] .remote-panel-commitment { left: 72% !important; width: 22% !important; max-width: 22% !important; }
}

/* Final editorial alignment for the approved non-Hero sections. */
.portfolio-rest .section-head { display: block !important; }
.portfolio-rest .eyebrow {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  width: 100% !important;
  margin: 0 0 14px !important;
  text-align: left !important;
}
.portfolio-rest .eyebrow::after {
  content: "" !important;
  display: block !important;
  flex: 0 1 150px !important;
  min-width: 64px !important;
  height: 1px !important;
  background: rgba(159,119,61,.72) !important;
}
.portfolio-rest .proof-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  max-width: none !important;
}
.portfolio-rest .proof-index { display: none !important; }

@media (max-width: 1050px) {
  .portfolio-rest .proof-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 720px) {
  .portfolio-rest .proof-grid { grid-template-columns: 1fr !important; }
}

/* The visual Remote canvas follows the canonical short-copy composition. */
.remote-values { top: 48% !important; }

@media (min-width: 1024px) and (max-width: 1500px) {
  .remote-v4-copy {
    width: min(28vw, 400px) !important;
    max-width: 400px !important;
  }
}

@media (max-width: 1023px) {
  .remote-values { top: 44% !important; }
}

@media (max-width: 620px) {
  .remote-values { top: 43% !important; }
}

/* Footer identity refinement: use the supplied official lockup and lighter line icons. */
.portfolio-rest .footer-lockup {
  display: inline-flex !important;
  align-items: center !important;
  margin-left: 20px !important;
  padding-left: 18px !important;
  border-left: 1px solid rgba(248,245,239,.2) !important;
}
.portfolio-rest .footer-logo {
  width: 188px !important;
  height: 68px !important;
  object-fit: contain !important;
  object-position: center !important;
  opacity: .96 !important;
}
.portfolio-rest .social-links { gap: 14px !important; }
.portfolio-rest .social-links a {
  width: 36px !important;
  height: 36px !important;
  padding: 5px !important;
  color: rgba(237,201,126,.92) !important;
  border: 1px solid transparent !important;
  border-radius: 50% !important;
  transition: color .2s ease, background-color .2s ease, transform .2s ease !important;
}
.portfolio-rest .social-links a:hover,
.portfolio-rest .social-links a:focus-visible {
  color: var(--gb-gold-light, #f6d37e) !important;
  background: rgba(246,211,126,.08) !important;
  transform: translateY(-1px) !important;
}
.portfolio-rest .social-links svg {
  width: 100% !important;
  height: 100% !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.55 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  vector-effect: non-scaling-stroke !important;
}
@media (max-width: 720px) {
  .portfolio-rest .footer-lockup { margin-left: 0 !important; padding-left: 0 !important; border-left: 0 !important; }
  .portfolio-rest .footer-logo { width: 154px !important; height: 56px !important; }
}

/* Approved crop refinements for the two Capability Expansion photographs. */
#capability-expansion .proof-card:nth-child(2) > img {
  object-position: 50% 28% !important;
}
#capability-expansion .proof-card:nth-child(3) > img {
  object-position: 20% 50% !important;
}

/* Published Remote copy is restored in the approved layout; keep all three
   paragraphs rendered instead of hiding the second and third paragraphs. */
.remote-v4 .remote-body p:nth-child(n + 2) {
  display: block !important;
  margin-top: 12px !important;
}

/* The restored publication copy is longer than the forensic headline block;
   tighten only its typography and move the approved principle rail below the
   copy so the new layout remains readable without changing the photo or card. */
.remote-v4 .remote-body {
  font-size: clamp(11px, .72vw, 13px) !important;
  line-height: 1.34 !important;
}
.remote-v4 .remote-body p { margin-bottom: 8px !important; }
.remote-v4 .remote-values { top: 60% !important; }

/* Pair Better Systems directly beneath To Progress as a second suspended panel. */
.hero .remote-better-panel {
  position: absolute !important;
  top: 34.5% !important;
  right: 12.5% !important;
  bottom: auto !important;
  width: 13.6cqw !important;
  height: auto !important;
  transform: rotate(-1deg) !important;
  transform-origin: 50% 50% !important;
  filter: drop-shadow(0 16px 26px rgba(0, 0, 0, .28)) !important;
  pointer-events: none !important;
}
@media (min-width: 921px) {
  .hero .layer-better-panel { z-index: 3; }
  .hero .remote-better-panel {
    top: 38% !important;
    right: 13.2% !important;
    /* Match the panel's opposing edge slopes in depth; avoid rolling it in-plane. */
    transform: perspective(19cqw) rotateY(-34.2deg) rotateZ(-1.1deg) !important;
  }
}
@media (max-width: 1023px) {
  .remote-v4 .remote-body { font-size: 12px !important; line-height: 1.32 !important; }
  .remote-v4 .remote-values { top: 60% !important; }
}
@media (min-width: 681px) and (max-width: 920px) {
  .hero .remote-better-panel {
    right: 2% !important;
    width: min(19vw, 190px) !important;
  }
}
@media (max-width: 620px) {
  .remote-v4 .remote-body { font-size: 12px !important; line-height: 1.32 !important; }
  .remote-v4 .remote-values { top: auto !important; bottom: 8% !important; }
  .hero .remote-better-panel {
    top: 46% !important;
    right: 3% !important;
    bottom: auto !important;
    width: min(30vw, 116px) !important;
  }
}

/* Surgical review pass from the browser comments. Keep the scrolled header
   legible over every section, remove the stray work label, and give the
   Remote support elements deliberate landing zones. */
body.scrolled .site-header {
  background: #0d1b2a !important;
  border-bottom: 1px solid rgba(233,195,138,.18) !important;
  box-shadow: 0 8px 28px rgba(0,0,0,.24) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.portfolio-rest #work::before {
  content: none !important;
  display: none !important;
}

@media (min-width: 1024px) {
  .remote-v4 .remote-values {
    top: 68% !important;
    left: clamp(48px, 5vw, 92px) !important;
    color: rgba(13,27,42,.94) !important;
    text-shadow: none !important;
  }
  .remote-v4 .remote-values::before { background: #b7863f !important; }
  .remote-v4 .remote-better-panel {
    bottom: clamp(120px, 18vh, 176px) !important;
  }
}

/* Final localized raster composites: same approved frame, translated labels only. */
@media (min-width: 1024px) {
  html[lang^="pt"] .remote-panel-reference-localized .remote-panel-reference-pt,
  html[lang^="es"] .remote-panel-reference-localized .remote-panel-reference-es {
    display: block !important;
  }
  html[lang^="pt"] .remote-panel-reference-localized .remote-panel-reference-es,
  html[lang^="es"] .remote-panel-reference-localized .remote-panel-reference-pt {
    display: none !important;
  }
  html[lang^="pt"] .remote-ops-panel,
  html[lang^="es"] .remote-ops-panel {
    display: none !important;
  }
}

@media (min-width: 621px) and (max-width: 1023px) {
  .remote-v4 .remote-values {
    top: 62% !important;
    left: 6vw !important;
  }
  .remote-v4 .remote-better-panel { bottom: 14vh !important; }
}

/* image-performance.css */
/* Reversible visual/performance layer. Source masters remain untouched. */
.hero .layer-background .background {
  filter: brightness(.96) contrast(1.05) saturate(.94);
}

.hero .layer-subject .subject {
  filter: brightness(.995) contrast(1.02) saturate(.94) sepia(.035) hue-rotate(-3deg)
    drop-shadow(-11px 13px 14px rgba(2, 9, 15, .36));
}

/* Final Hero-only depth/viewport gate: the atmosphere belongs in the front
   plane, including over the desk, while the duplicate subject is disabled so
   it cannot create a second horizontal shadow through Giovanni's legs. */
.hero .stage > .layer-atmosphere { z-index: 17 !important; }
.hero .stage > .layer-path { z-index: 15 !important; }
.hero .stage > .layer-from-panel { z-index: 14 !important; }
.hero .stage > .layer-chair { z-index: 9 !important; }
.hero .stage > .layer-subject { z-index: 10 !important; }
.hero .stage > .layer-foreground { z-index: 16 !important; }
.hero .stage > .layer-subject-occlusion {
  display: none !important;
}

.hero .layer-foreground .foreground {
  filter: brightness(.965) contrast(1.035) saturate(.92) sepia(.035) hue-rotate(-3deg);
}

/* Keep the Hero viewport fixed. Recede only the requested scene objects and
   lift the supplied desk canvas clear of the in-viewport ticker. */
@media (min-width: 921px) {
  .hero .stage > .layer-subject {
    transform: translateX(2%) translateY(-18%) scale(.59);
  }
  .hero .stage > .layer-foreground .foreground {
    left: 2% !important;
    right: auto !important;
    bottom: 3.5% !important;
    width: 96% !important;
    transform: none !important;
  }
  .hero .panel-from {
    top: 20.5% !important;
    left: 42.5% !important;
    width: 16.5% !important;
  }
  .hero .panel-to {
    top: 5.2% !important;
    right: 11.3% !important;
    width: 16.4% !important;
  }
  .hero .ticker {
    bottom: 0 !important;
    height: 8.5% !important;
    min-height: 62px !important;
  }
}

.remote-v4-master {
  filter: brightness(.98) contrast(1.03) saturate(.95);
}

.portfolio-rest img:not(.footer-logo) {
  filter: brightness(.995) contrast(1.02) saturate(.97);
}

/* The foreground is a complete 2172x724 transparent canvas. Keep the
   tabletop continuous from edge to edge while preserving the desktop anchor. */
@media (min-width: 681px) {
  .hero .layer-foreground .foreground {
    object-fit: cover;
    object-position: center bottom;
  }
}

.skip-link{position:fixed;left:12px;top:8px;z-index:1000;padding:10px 14px;background:#f8f5ef;color:#030b14;text-decoration:none;transform:translateY(-160%);transition:transform .15s ease}.skip-link:focus{transform:translateY(0)}

/* Final responsive correction: keep the Capability feature readable on narrow
   screens after the desktop editorial split is applied later in this file. */
@media (max-width: 720px) {
  .portfolio-rest .capability-feature {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .portfolio-rest .capability-feature-media {
    width: 100%;
    max-width: none;
  }
}

/* The locked Remote master remains unchanged. On very narrow crops, restore a
   restrained reading veil over its bright upper field so the approved copy does
   not compete with the baked-in image labels. */
@media (max-width: 620px) {
  .remote-v4-copy {
    isolation: isolate;
  }

  .remote-v4-copy::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -14px -12px -16px -14px;
    pointer-events: none;
    background: linear-gradient(
      90deg,
      rgba(8, 24, 38, .56) 0%,
      rgba(8, 24, 38, .40) 70%,
      rgba(8, 24, 38, .08) 100%
    );
  }

  .remote-v4-media::after {
    content: "" !important;
    display: block !important;
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
      180deg,
      rgba(8, 24, 38, .78) 0%,
      rgba(8, 24, 38, .58) 42%,
      rgba(8, 24, 38, .20) 68%,
      transparent 88%
    ) !important;
  }
}

/* Final owner polish: three local, reversible visual corrections.
   The Remote master, copy and all non-visual runtime behavior remain intact. */
@media (min-width: 721px) {
  /* Seven real highlights: make the final desktop card a deliberate center
     conclusion instead of leaving it on an orphaned grid edge. */
  .portfolio-rest #highlights .moment-list > .moment:last-child:nth-child(odd) {
    grid-column: 2 !important;
    width: auto !important;
    justify-self: stretch !important;
  }
}

@media (max-width: 420px) {
  /* Recover a measured amount of photographic context only at the narrow
     mobile breakpoint; the approved desktop/tablet scene is untouched. */
  .hero .layer-atmosphere .atmosphere {
    opacity: .8 !important;
  }

  /* On a narrow canvas the editorial copy owns the left reading plane. Keep
     the U.S. context labels in their right-side zone without changing the
     locked Remote artwork or any wording. */
  .remote-v4-copy {
    left: 5% !important;
    top: 5% !important;
    width: 50% !important;
    max-width: 198px !important;
    z-index: 6 !important;
  }

  .remote-v4-copy::before {
    inset: -14px -26px -16px -14px;
    background: linear-gradient(
      90deg,
      rgba(8, 24, 38, .86) 0%,
      rgba(8, 24, 38, .72) 78%,
      rgba(8, 24, 38, .30) 100%
    );
  }

  .remote-v4 .remote-body {
    font-size: 11.5px !important;
    line-height: 1.34 !important;
  }
}

/* Extend the established navy copy field across the marked Remote boundary. */
@media (min-width: 1024px) {
  .remote-v4-left-shade {
    position: absolute !important;
    z-index: 1 !important;
    inset: 0 auto 0 0 !important;
    width: 49% !important;
    background: linear-gradient(90deg,
      rgba(5, 24, 42, .74) 0%,
      rgba(5, 24, 42, .66) 58%,
      rgba(5, 24, 42, .42) 78%,
      rgba(5, 24, 42, 0) 100%) !important;
    pointer-events: none !important;
  }
  .remote-v4-copy { width: min(36vw, 500px) !important; max-width: 500px !important; }
  .remote-v4 .remote-body {
    width: 100% !important;
    max-width: 500px !important;
    font-size: clamp(12px, .9vw, 14px) !important;
    line-height: 1.36 !important;
  }
  .remote-v4 .remote-values {
    top: 70% !important;
    color: rgba(248, 245, 239, .98) !important;
    text-shadow: 0 2px 10px rgba(2, 12, 24, .62) !important;
  }
}

/* Owner-supplied chair replacement: keep the locked Giovanni canvas and
   align the isolated chair to the exact visible chair box of the prior asset. */
.hero .stage > .layer-chair {
  isolation: isolate;
}

.hero .stage > .layer-chair::after {
  content: "";
  position: absolute;
  left: 53.8%;
  top: 77.5%;
  width: 30.5%;
  height: 9%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
    rgba(2, 9, 15, .34) 0%,
    rgba(2, 9, 15, .20) 43%,
    rgba(2, 9, 15, 0) 76%);
  filter: blur(15px);
  opacity: .78;
  pointer-events: none;
  z-index: 0;
}

.hero .stage > .layer-chair .chair {
  position: absolute;
  inset: auto;
  left: 47.2%;
  top: 26.4%;
  width: 39.5%;
  height: auto;
  max-width: none;
  object-fit: contain;
  object-position: center top;
  filter: brightness(.93) contrast(1.04) saturate(.84) sepia(.055) hue-rotate(-5deg)
    drop-shadow(0 14px 16px rgba(2, 9, 15, .34));
  z-index: 1;
}

@media (min-width: 681px) and (max-width: 920px) {
  .hero .stage > .layer-chair .chair {
    left: auto;
    right: calc(clamp(0px, 13vw, 100px) + clamp(35px, 5vw, 40px));
    top: auto;
    bottom: -14px;
    width: clamp(415px, 60.8vw, 469px);
  }
}

@media (max-width: 680px) {
  .hero .stage > .layer-chair .chair {
    left: calc(3% + clamp(26px, 6vw, 31px));
    right: auto;
    top: auto;
    bottom: 14px;
    width: clamp(322px, 82.6vw, 364px);
  }
}

/* Carry the Remote navy into its existing pale photographic fade so the
   transition to Capabilities reads as one continuous, intentional wash. */
@media (min-width: 1001px) {
  .remote-work.remote-v4::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 1 !important;
    inset: auto 0 0 !important;
    height: clamp(230px, 32vh, 360px) !important;
    pointer-events: none !important;
    background: linear-gradient(180deg,
      rgba(8, 28, 46, 0) 0%,
      rgba(8, 28, 46, .42) 30%,
      rgba(8, 28, 46, .68) 58%,
      rgba(74, 83, 88, .40) 80%,
      rgba(253, 250, 245, .96) 100%) !important;
  }
}

/* Match the Hero light path: .4s delay, 1.8s reveal, identical easing. */
@keyframes gb-hero-eyebrow-reflection {
  from { background-position: 100% 0; }
  to { background-position: 0 0; }
}

.hero-copy .eyebrow[data-i18n="hero.kicker"] {
  color: #f0bd4e !important;
  background-color: #f0bd4e;
  background-image: linear-gradient(105deg,
    transparent 0%, transparent 47%,
    #fff2c4 49%, #fff 50%, #fff2c4 51%,
    transparent 53%, transparent 100%);
  background-size: 300% 100%;
  background-position: 100% 0;
  background-repeat: no-repeat;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none !important;
}

@keyframes gb-hero-automation-illumination {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

.hero-copy #hero-title > .gold {
  position: relative;
  color: #f9f7f2 !important;
  text-shadow: none !important;
}

.hero-copy #hero-title > .gold .hero-wordmark-light {
  position: absolute;
  inset: 0;
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px rgba(214, 139, 25, .9);
  text-shadow: 0 0 12px rgba(245, 174, 48, .32);
  clip-path: inset(0 100% 0 0);
  pointer-events: none;
}

.hero-copy #hero-title > .gold.hero-wordmark-illumination .hero-wordmark-light {
  animation: gb-hero-automation-illumination 3s cubic-bezier(.22, .78, .26, 1) .4s 1 both;
}

.hero-copy #hero-title > .gold.hero-wordmark-illumination-complete .hero-wordmark-light {
  clip-path: inset(0);
}

.hero-copy .eyebrow.hero-eyebrow-reflection {
  animation: gb-hero-eyebrow-reflection 1.8s cubic-bezier(.22, .78, .26, 1) .4s 1 both;
}

@media (prefers-reduced-motion: reduce) {
  .hero-copy .eyebrow[data-i18n="hero.kicker"] {
    animation: none !important;
    background-image: none !important;
    background-color: transparent;
    -webkit-text-fill-color: #f0bd4e !important;
  }

  .hero-copy #hero-title > .gold .hero-wordmark-light {
    animation: none !important;
    clip-path: inset(0);
  }
}

@media (min-width: 1024px) and (max-width: 1100px) {
  .remote-panel-title { left: 76% !important; }
  .remote-context-list {
    left: 87% !important;
    top: 18% !important;
    width: 11% !important;
    max-width: 11% !important;
  }
  .remote-panel-commitment { left: 83.5% !important; width: 14% !important; max-width: 14% !important; }
  .remote-v4 .remote-values { top: 73% !important; }
  html[lang^="pt"] .remote-context-list,
  html[lang^="es"] .remote-context-list { left: 87% !important; width: 11% !important; max-width: 11% !important; }
  html[lang^="es"] .remote-panel-commitment { left: 83.5% !important; width: 14% !important; max-width: 14% !important; }
}

/* Official activated brand assets and optical alignment requested by Owner. */
.portfolio-rest .footer-logo {
  width: clamp(148px, 15vw, 210px) !important;
  height: auto !important;
  object-fit: contain;
}

.site-header > a {
  justify-self: center;
  transform: translateX(clamp(10px, 2vw, 30px));
}

@media (min-width: 981px) {
  .site-header > a {
    transform: translateX(-2.76vw);
  }
}

/* Desktop scene contract: keep Remote's baked master and its live overlays
   on the same 16:9 coordinate plane. Tablet/mobile retain their own layouts. */
@media (min-width: 1024px) {
  .remote-work.remote-v4 {
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 9 !important;
    container-type: inline-size;
  }

  .remote-v4-copy {
    top: 11% !important;
    left: 4cqw !important;
    width: 36cqw !important;
    max-width: 36cqw !important;
  }

  .remote-v4 .remote-kicker {
    gap: 1.15cqw !important;
    margin-bottom: 1.15cqw !important;
    font-size: .57cqw !important;
  }
  .remote-v4 .remote-kicker::after { width: 6.25cqw !important; }

  .remote-v4 .remote-title {
    margin-bottom: 1.25cqw !important;
    font-size: 5cqw !important;
  }

  .remote-v4 .remote-body {
    width: 100% !important;
    max-width: 100% !important;
    font-size: .9cqw !important;
    line-height: 1.36 !important;
  }

  .remote-v4 .remote-values {
    top: 70% !important;
    left: 4cqw !important;
    gap: .52cqw !important;
    padding-left: 1cqw !important;
    font-size: .57cqw !important;
  }

  .remote-panel-title strong { font-size: .98cqw !important; }
  .remote-panel-title span { font-size: .68cqw !important; }
  .remote-context-list {
    gap: .78cqw !important;
    font-size: .71cqw !important;
  }
  .remote-context-list span { gap: .45cqw !important; }
  .remote-context-list span::before {
    width: .36cqw !important;
    height: .36cqw !important;
  }
  .remote-panel-commitment { font-size: .64cqw !important; }
}

/* Hero-only optical calibration: restore the canonical light-path drawing and
   bind restrained highlights to exact copies of that same asset. The inline
   SVG is an optical overlay traced from the user's six annotations; it does
   not replace the supplied asset or any scene layer. */
@media (min-width: 921px) {
  /* Explicit physical order: line behind the From panel and both behind the
     subject. The atmosphere/foreground gates above remain untouched. */
  .hero .stage > .layer-path { z-index: 8 !important; }
  .hero .stage > .layer-from-panel { z-index: 9 !important; }
  .hero .stage > .layer-subject { z-index: 10 !important; }

  .hero .layer-path .light-path {
    visibility: visible;
  }

  /* The optical passes inherit the canonical image's exact position,
     transform and curve; only their two small line-bound windows are clipped. */
  .hero .layer-path .light-path-optical {
    animation: none !important;
    opacity: .62;
    filter: brightness(1.58) contrast(1.07) saturate(1.06) drop-shadow(0 0 2px rgba(255, 225, 154, .24));
    mix-blend-mode: screen;
  }

  .hero .layer-path .light-path-optical-a {
    clip-path: polygon(30% 82%, 42% 66%, 46% 69%, 34% 85%);
  }

  .hero .layer-path .light-path-optical-b {
    clip-path: polygon(70% 69%, 86% 51%, 90% 54%, 74% 72%);
  }

  .hero .layer-path .light-path-annotation-effect {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
    transform: translateY(5%);
    transform-origin: center center;
  }

  /* The annotated path replaces the old raster trajectory on desktop. The
     supplied asset remains available for the narrower responsive layout. */
  .hero .layer-path > .light-path,
  .hero .layer-path > .light-path-endpoint {
    visibility: hidden !important;
  }

  .hero .layer-path > .light-path-endpoint {
    display: none !important;
  }

  .hero .layer-path .light-path-annotation-glow,
  .hero .layer-path .light-path-annotation-core {
    fill: none;
    stroke: url(#hero-light-path-annotation-gradient);
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .hero .layer-path .light-path-annotation-glow {
    stroke-width: 1.35;
    opacity: .46;
    filter: url(#hero-light-path-annotation-blur);
    mix-blend-mode: screen;
  }

  .hero .layer-path .light-path-annotation-body {
    stroke-width: .44;
    opacity: .62;
    filter: url(#hero-light-path-annotation-body);
    mix-blend-mode: screen;
  }

  .hero .layer-path .light-path-annotation-core {
    stroke-width: .14;
    opacity: .74;
    mix-blend-mode: screen;
  }

  .hero .layer-path .light-path-annotation-flare {
    fill: url(#hero-light-path-annotation-flare);
    opacity: .82;
    filter: url(#hero-light-path-annotation-blur);
    mix-blend-mode: screen;
  }
}

.hero .layer-path .light-path-annotation-effect { display: none; }
.hero .layer-path .light-path-raster-reflowed { display: none; }

@media (min-width: 921px) {
  .hero .layer-path .light-path-annotation-effect { display: block; }
}

/* Final correction from the visual review: the canonical raster drawing is
   the line. The annotated SVG remains disabled so it cannot introduce a
   second shadow or a different trajectory. Move the canonical line and its
   original bloom together by the same 5% stage offset. */
@media (min-width: 921px) {
  .hero .layer-path > .light-path:not(.light-path-optical) {
    display: block !important;
    visibility: visible !important;
    left: 10% !important;
    top: -7% !important;
    width: 70% !important;
    transform: scaleX(1.08) scaleY(1.2) !important;
    clip-path: none !important;
    animation: none !important;
  }

  .hero .layer-path > .light-path.light-path-optical {
    display: none !important;
    visibility: hidden !important;
  }

  .hero .layer-path .light-path-annotation-effect {
    display: none !important;
  }

  .hero .layer-path > .light-path-endpoint {
    display: block !important;
    visibility: visible !important;
    left: 78.5% !important;
    top: 28.5% !important;
  }
}

/* Visual correction from the review: keep the original comet-like mass and
   bloom, but redraw that same organic character along the annotated movement.
   The synthetic hairline is replaced by a broad translucent ribbon, a soft
   body, and the original-style bright core/flaring endpoint. */
@media (min-width: 921px) {
  .hero .layer-path .light-path-raster-reflowed {
    display: block !important;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
    filter: blur(.3px) saturate(1.08);
    mix-blend-mode: screen;
  }

  .hero .layer-path > .light-path:not(.light-path-optical),
  .hero .layer-path > .light-path.light-path-optical,
  .hero .layer-path > .light-path-endpoint {
    display: none !important;
    visibility: hidden !important;
  }

  .hero .layer-path .light-path-annotation-effect {
    display: none !important;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
    transform: translateY(5%);
    transform-origin: center center;
  }

  .hero .layer-path .light-path-annotation-ribbon,
  .hero .layer-path .light-path-annotation-mass,
  .hero .layer-path .light-path-annotation-glow,
  .hero .layer-path .light-path-annotation-body,
  .hero .layer-path .light-path-annotation-core {
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: none;
  }

  .hero .layer-path .light-path-annotation-ribbon {
    fill: none;
    stroke: #e5a03b;
    stroke-width: 2.8;
    opacity: .68;
    filter: url(#hero-light-path-annotation-organic);
    mix-blend-mode: normal;
  }

  .hero .layer-path .light-path-annotation-mass {
    fill: #e8a33e;
    opacity: .44;
    filter: url(#hero-light-path-annotation-organic);
    mix-blend-mode: screen;
  }

  .hero .layer-path .light-path-annotation-glow {
    fill: none;
    stroke: url(#hero-light-path-annotation-gradient);
    stroke-width: 6.2;
    opacity: .24;
    filter: url(#hero-light-path-annotation-ribbon-glow);
    mix-blend-mode: screen;
  }

  .hero .layer-path .light-path-annotation-body {
    fill: none;
    stroke: #ffd889;
    stroke-width: 2.15;
    opacity: .66;
    filter: url(#hero-light-path-annotation-organic);
    mix-blend-mode: normal;
  }

  .hero .layer-path .light-path-annotation-core {
    fill: none;
    stroke: #fff8d2;
    stroke-width: .48;
    opacity: .86;
    mix-blend-mode: screen;
  }

  .hero .layer-path .light-path-annotation-flare {
    fill: url(#hero-light-path-annotation-flare);
    opacity: .95;
    filter: url(#hero-light-path-annotation-blur);
    mix-blend-mode: screen;
  }

  .hero .layer-path .light-path-annotation-flare-core {
    fill: #fffbe2;
    opacity: .98;
    filter: drop-shadow(0 0 3px rgba(255, 226, 142, .9));
    mix-blend-mode: screen;
  }
}

/* Final visual boundary: use only the supplied original raster and its
   original bloom. All synthetic reflows stay disabled on desktop. */
@media (min-width: 921px) {
  .hero .layer-path .light-path-raster-reflowed,
  .hero .layer-path .light-path-annotation-effect {
    display: none !important;
    visibility: hidden !important;
  }

  .hero .layer-path > .light-path:not(.light-path-optical) {
    display: block !important;
    visibility: visible !important;
    left: 10% !important;
    top: -7% !important;
    width: 70% !important;
    transform: scaleX(1.08) scaleY(1.2) !important;
    clip-path: none !important;
    animation: none !important;
  }

  .hero .layer-path > .light-path-endpoint {
    display: block !important;
    visibility: visible !important;
    left: 78.5% !important;
    top: 28.5% !important;
  }
}

/* Final Hero path treatment: the supplied comet bitmap is continuously
   remapped through the annotated ascensions. No synthetic stroke or slice
   layer is allowed to participate in the desktop composition. */
.hero .layer-path .light-path-mesh-reflowed { display: none; }

@media (min-width: 921px) {
  .hero .layer-path .light-path-mesh-reflowed {
    display: block !important;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
    opacity: 1;
    mix-blend-mode: normal;
    filter: none;
    z-index: 1;
  }

  .hero .layer-path > .light-path:not(.light-path-optical),
  .hero .layer-path > .light-path.light-path-optical,
  .hero .layer-path > .light-path-endpoint,
  .hero .layer-path .light-path-raster-reflowed,
  .hero .layer-path .light-path-annotation-effect {
    display: none !important;
    visibility: hidden !important;
  }
}

/* The approved reference keeps the marked geometry; only its optical finish
   is restored here. The original bitmap and mesh remain out of the stack. */
@media (min-width: 921px) {
  .hero .layer-path .light-path-mesh-reflowed,
  .hero .layer-path .light-path-raster-reflowed,
  .hero .layer-path > .light-path:not(.light-path-optical),
  .hero .layer-path > .light-path.light-path-optical,
  .hero .layer-path > .light-path-endpoint {
    display: none !important;
    visibility: hidden !important;
  }

  .hero .layer-path .light-path-annotation-effect {
    display: block !important;
    visibility: visible !important;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
    transform: translateY(5%);
    transform-origin: center center;
  }

  .hero .layer-path .light-path-annotation-ribbon,
  .hero .layer-path .light-path-annotation-mass,
  .hero .layer-path .light-path-annotation-glow,
  .hero .layer-path .light-path-annotation-body,
  .hero .layer-path .light-path-annotation-core {
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: none;
  }

  .hero .layer-path .light-path-annotation-mass {
    opacity: .54;
    filter: url(#hero-light-path-annotation-organic);
    mix-blend-mode: screen;
  }

  .hero .layer-path .light-path-annotation-ribbon {
    stroke-width: 2.8;
    opacity: .78;
    filter: url(#hero-light-path-annotation-organic);
    mix-blend-mode: screen;
  }

  .hero .layer-path .light-path-annotation-glow {
    stroke-width: 7.2;
    opacity: .34;
    filter: url(#hero-light-path-annotation-ribbon-glow);
    mix-blend-mode: screen;
  }

  .hero .layer-path .light-path-annotation-body {
    stroke-width: 2.15;
    opacity: .76;
    filter: url(#hero-light-path-annotation-organic);
    mix-blend-mode: screen;
  }

  .hero .layer-path .light-path-annotation-core {
    stroke-width: .48;
    opacity: .94;
    mix-blend-mode: screen;
  }

  .hero .layer-path .light-path-annotation-flare,
  .hero .layer-path .light-path-annotation-flare-core {
    opacity: 1;
    mix-blend-mode: screen;
  }
}

/* Preview-only removal requested for the luminous Hero path. */
.hero .layer-path {
  display: none !important;
}

/* Preview candidate supplied by the user: preserve the raster exactly and
   place it below the Automation wordmark. */
@media (min-width: 921px) {
  .hero .layer-path {
    display: block !important;
  }

  .hero .layer-path > .light-path,
  .hero .layer-path > canvas,
  .hero .layer-path > svg,
  .hero .layer-path > .light-path-endpoint {
    display: none !important;
    visibility: hidden !important;
  }

  .hero .layer-path > .light-path-restored {
    display: block !important;
    visibility: visible !important;
    position: absolute;
    left: 9.4%;
    top: 8%;
    width: 79%;
    height: 51%;
    object-fit: fill;
    pointer-events: none;
    z-index: 2;
    opacity: 1;
    mix-blend-mode: screen;
    filter: none;
    clip-path: inset(0 100% 0 0);
    animation: reveal-path 3.4s cubic-bezier(.22, .78, .26, 1) .4s forwards;
  }

  /* Surgical depth correction: To Progress sits in front of the restored path. */
  .hero .layer-rear {
    z-index: 9 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero .layer-path > .light-path-restored {
    animation: none !important;
    clip-path: none !important;
  }
}

/* The locked Remote master already contains the canonical off-white fade,
   delicate asymmetric arc and light point. Remove the synthetic bridge so it
   cannot add a second blue band or a geometric return loop. */
.remote-to-capabilities {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* Extend the navy reading field toward Giovanni, but dissolve its lower and
   right edges into the locked master's off-white fade instead of ending in a
   rectangular line. */
@media (min-width: 1024px) {
  .remote-v4-left-shade {
    display: block !important;
    z-index: 1 !important;
    inset: 0 auto auto 0 !important;
    width: 78% !important;
    height: 70% !important;
    background:
      radial-gradient(
        ellipse 30% 42% at 68% 100%,
        rgba(253, 250, 245, .38) 0%,
        rgba(253, 250, 245, .12) 55%,
        rgba(253, 250, 245, 0) 100%
      ),
      linear-gradient(
        90deg,
        rgba(5, 24, 42, .74) 0%,
        rgba(5, 24, 42, .68) 42%,
        rgba(5, 24, 42, .52) 65%,
        rgba(5, 24, 42, .18) 82%,
        rgba(5, 24, 42, 0) 100%
      ) !important;
    -webkit-mask-image: linear-gradient(
      180deg,
      #000 0%,
      #000 48%,
      rgba(0, 0, 0, .85) 62%,
      rgba(0, 0, 0, .38) 82%,
      transparent 100%
    ) !important;
    mask-image: linear-gradient(
      180deg,
      #000 0%,
      #000 48%,
      rgba(0, 0, 0, .85) 62%,
      rgba(0, 0, 0, .38) 82%,
      transparent 100%
    ) !important;
    mask-repeat: no-repeat !important;
    mask-size: 100% 100% !important;
    pointer-events: none !important;
  }
}

/* A later legacy rule reintroduced a full-width navy veil at the bottom of
   Remote. On desktop the locked master is the sole depth and fade authority. */
@media (min-width: 1001px) {
  .remote-work.remote-v4::after,
  .remote-v4-media::after {
    content: none !important;
    display: none !important;
  }
}

/* The same complete panel remains a contained glass layer on narrow screens.
   No foreground mask is used: the source asset must stay continuous. */
.remote-master-foreground-repair {
  display: none !important;
}

/* Frozen panel geometry: move the complete artwork as one unit so its
   corners, map and cards cannot separate or be cropped during positioning. */
@media (min-width: 1024px) {
  .remote-panel-reference {
    transform: translate(1.2%, -1.5%) !important;
    transform-origin: center center !important;
  }

  .remote-panel-reference-composite {
    opacity: .84 !important;
  }

  .remote-panel-reference-localized .remote-panel-reference-base,
  .remote-panel-reference-localized .remote-panel-reference-map {
    opacity: .84 !important;
  }

  /* Controlled locator glows: NC, SC, CA, NY, TX and DC. They sit above the
     map artwork but remain below the HTML labels in the localized variants. */
  .remote-panel-reference::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 6 !important;
    pointer-events: none !important;
    background:
      radial-gradient(circle at 39% 66%, rgba(255, 247, 198, .95) 0 .55%, rgba(255, 214, 104, .72) 1.2%, rgba(255, 214, 104, .16) 3.8%, transparent 6%),
      radial-gradient(circle at 23% 58%, rgba(255, 247, 198, .92) 0 .5%, rgba(255, 214, 104, .64) 1.1%, rgba(255, 214, 104, .14) 3.5%, transparent 5.5%),
      radial-gradient(circle at 55% 53%, rgba(255, 247, 198, .92) 0 .5%, rgba(255, 214, 104, .64) 1.1%, rgba(255, 214, 104, .14) 3.5%, transparent 5.5%),
      radial-gradient(circle at 60% 48%, rgba(255, 247, 198, .95) 0 .55%, rgba(255, 214, 104, .70) 1.2%, rgba(255, 214, 104, .16) 3.8%, transparent 6%),
      radial-gradient(circle at 61% 39%, rgba(255, 247, 198, .92) 0 .5%, rgba(255, 214, 104, .64) 1.1%, rgba(255, 214, 104, .14) 3.5%, transparent 5.5%),
      radial-gradient(circle at 58% 55%, rgba(255, 247, 198, .92) 0 .5%, rgba(255, 214, 104, .64) 1.1%, rgba(255, 214, 104, .14) 3.5%, transparent 5.5%) !important;
    mix-blend-mode: screen !important;
    opacity: .96 !important;
  }

  html[lang^="pt"] .remote-ops-panel,
  html[lang^="es"] .remote-ops-panel {
    transform: translate(1.2%, -1.5%) !important;
    transform-origin: center center !important;
  }
}

@media (max-width: 1023px) {
  .remote-panel-original {
    display: block !important;
    position: absolute !important;
    z-index: 2 !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
    object-fit: contain !important;
    opacity: .55 !important;
    transform: none !important;
    filter: none !important;
    pointer-events: none !important;
  }
}

/* REMOTE CANONICAL MASTER RESTORE — surgical overlays only. */
@media (min-width: 1024px) {
  /* Keep the Remote anchor below the fixed header/ticker boundary. */
  .remote-work.remote-v4 {
    scroll-margin-top: 104px !important;
  }

  .remote-v4-media {
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    overflow: hidden !important;
    background: #fdfaf5 !important;
  }

  .remote-v4-media picture,
  .remote-master-base,
  .remote-master-foreground-restore {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: 50% 0 !important;
    transform: none !important;
    filter: none !important;
    pointer-events: none !important;
  }

  .remote-master-base {
    z-index: 0 !important;
  }

  /* Background-only navy extension. Foreground is restored from the exact same master above it. */
  .remote-v4-left-shade {
    display: block !important;
    position: absolute !important;
    z-index: 1 !important;
    inset: 0 auto auto 0 !important;
    width: 84% !important;
    height: 70% !important;
    background: linear-gradient(
      90deg,
      rgba(5,24,42,.50) 0%,
      rgba(5,24,42,.44) 48%,
      rgba(5,24,42,.28) 72%,
      rgba(5,24,42,.08) 90%,
      rgba(5,24,42,0) 100%
    ) !important;
    -webkit-mask-image: linear-gradient(
      180deg,
      #000 0%,
      #000 48%,
      rgba(0,0,0,.82) 64%,
      rgba(0,0,0,.30) 84%,
      transparent 100%
    ) !important;
    mask-image: linear-gradient(
      180deg,
      #000 0%,
      #000 48%,
      rgba(0,0,0,.82) 64%,
      rgba(0,0,0,.30) 84%,
      transparent 100%
    ) !important;
    pointer-events: none !important;
  }

  .remote-panel-original {
    display: block !important;
    position: absolute !important;
    z-index: 2 !important;
    /* Expand the complete source panel toward the marked lower-left edge.
       The glass remains a single asset; its position keeps the left edge
       behind, rather than over, Giovanni. */
    left: 52% !important;
    top: 3% !important;
    width: 47% !important;
    height: auto !important;
    max-width: none !important;
    object-fit: contain !important;
    /* A little more density lets the baked map and live lettering read. */
    opacity: .66 !important;
    transform: scaleY(.78) !important;
    transform-origin: left top !important;
    filter: none !important;
    pointer-events: none !important;
  }

  .remote-master-foreground-restore {
    z-index: 3 !important;
    -webkit-mask-image: url("assets/remote/REMOTE_MASTER_FOREGROUND_MASK_20260927.png") !important;
    mask-image: url("assets/remote/REMOTE_MASTER_FOREGROUND_MASK_20260927.png") !important;
    -webkit-mask-size: 100% 100% !important;
    mask-size: 100% 100% !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    -webkit-mask-position: 0 0 !important;
    mask-position: 0 0 !important;
  }

  /* Exact master pixels restore only the shoulder/arm overlap. This is a
     narrow repair layer, not the former broad mask that brought the baked
     panel back over the glass. */
  .remote-master-foreground-repair {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 3 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: 50% 0 !important;
    transform: none !important;
    filter: none !important;
    pointer-events: none !important;
  }

  .remote-v4-copy {
    z-index: 4 !important;
  }

  .remote-ops-panel {
    z-index: 5 !important;
  }

  .remote-panel-title {
    top: 18% !important;
    left: 59% !important;
    width: 24% !important;
    max-width: 24% !important;
    transform: rotate(-3deg) !important;
    transform-origin: left center !important;
    font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace !important;
    text-shadow: 0 0 9px rgba(208, 231, 244, .42), 0 1px 7px rgba(0, 0, 0, .76) !important;
  }

  .remote-panel-title strong {
    font-family: inherit !important;
    font-size: clamp(10px, .78vw, 15px) !important;
    font-weight: 700 !important;
    letter-spacing: .16em !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
  }

  .remote-panel-title span {
    font-family: inherit !important;
    margin-top: 7px !important;
    color: #dce9f1 !important;
    font-size: clamp(7px, .50vw, 10px) !important;
    font-weight: 600 !important;
    letter-spacing: .12em !important;
    line-height: 1.22 !important;
    white-space: nowrap !important;
  }

  .remote-context-list {
    top: 18% !important;
    left: 80% !important;
    width: 17% !important;
    max-width: 17% !important;
    gap: clamp(8px, .7vw, 14px) !important;
    font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace !important;
    font-size: clamp(7px, .52vw, 10px) !important;
    font-weight: 600 !important;
    letter-spacing: .08em !important;
    line-height: 1.1 !important;
    text-shadow: 0 0 8px rgba(208, 231, 244, .34), 0 1px 6px rgba(0, 0, 0, .75) !important;
    transform: rotate(-3deg) !important;
    transform-origin: left top !important;
  }

  .remote-context-list span {
    font-family: inherit !important;
    gap: clamp(5px, .45vw, 9px) !important;
    white-space: nowrap !important;
  }

  .remote-panel-commitment {
    top: 37.5% !important;
    left: 78% !important;
    width: 19% !important;
    max-width: 19% !important;
    transform: rotate(-3deg) !important;
    transform-origin: left top !important;
    padding: 0 !important;
    font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace !important;
    font-size: clamp(7px, .50vw, 10px) !important;
    font-weight: 600 !important;
    letter-spacing: .10em !important;
    line-height: 1.45 !important;
    text-shadow: 0 0 8px rgba(208, 231, 244, .34), 0 1px 6px rgba(0, 0, 0, .75) !important;
  }

  html[lang^="pt"] .remote-panel-title,
  html[lang^="es"] .remote-panel-title {
    width: 27% !important;
    max-width: 27% !important;
  }

  html[lang^="pt"] .remote-context-list,
  html[lang^="es"] .remote-context-list {
    left: 80% !important;
    width: 17% !important;
    max-width: 17% !important;
  }

  html[lang^="pt"] .remote-panel-commitment,
  html[lang^="es"] .remote-panel-commitment {
    left: 78% !important;
    width: 19% !important;
    max-width: 19% !important;
  }

  .remote-bottom-fade,
  .remote-curve-long-original,
  .remote-curve-short-original,
  .remote-scene-base,
  .remote-foreground-restore {
    display: none !important;
  }

  .remote-to-capabilities {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .portfolio-rest #capabilities {
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: 0 !important;
  }

  .remote-v4-media::before,
  .remote-v4-media::after {
    content: none !important;
    display: none !important;
  }
}

/* Remote panel art pass — enlarge the canonical glass and reserve its right
   side for a live system-style label stack. The map remains the exact pixels
   from REMOTE_PANEL_ORIGINAL_20260918.png; moving the complete asset is the
   only non-destructive way to move that baked map without redrawing it. */
@media (min-width: 1024px) {
  /* The derivative shoulder WebP is not a valid foreground cutout; keeping
     it out prevents stretched pixels from covering the canonical glass. */
  .remote-master-foreground-repair {
    display: none !important;
  }

  .remote-panel-original {
    left: 55% !important;
    top: 0 !important;
    width: 45% !important;
    opacity: .74 !important;
    transform: scaleY(1) !important;
    transform-origin: left top !important;
    filter: brightness(.90) saturate(1.08) contrast(1.04) !important;
  }

  .remote-panel-title,
  .remote-context-list,
  .remote-panel-commitment {
    font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace !important;
    text-transform: uppercase !important;
    color: #edf8ff !important;
    text-shadow:
      0 0 4px rgba(215, 242, 255, .78),
      0 0 13px rgba(123, 207, 255, .34),
      0 1px 6px rgba(0, 0, 0, .82) !important;
    transform: rotate(-3deg) !important;
    transform-origin: left top !important;
  }

  .remote-panel-title {
    top: 15% !important;
    left: 72% !important;
    width: 24% !important;
    max-width: 24% !important;
  }

  .remote-panel-title::after {
    content: "" !important;
    display: block !important;
    width: 72% !important;
    height: 1px !important;
    margin-top: 10px !important;
    background: linear-gradient(90deg, rgba(221, 245, 255, .95), rgba(126, 214, 255, .08)) !important;
    box-shadow: 0 0 8px rgba(151, 222, 255, .72) !important;
  }

  .remote-panel-title strong {
    display: block !important;
    color: #f4fbff !important;
    font-size: clamp(12px, 1.02vw, 19px) !important;
    font-weight: 700 !important;
    letter-spacing: .19em !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
  }

  .remote-panel-title span {
    display: block !important;
    margin-top: 8px !important;
    color: #bde8fb !important;
    font-size: clamp(8px, .62vw, 12px) !important;
    font-weight: 600 !important;
    letter-spacing: .13em !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
  }

  .remote-context-list {
    top: 33% !important;
    left: 83% !important;
    width: 15% !important;
    max-width: 15% !important;
    gap: clamp(10px, .82vw, 16px) !important;
    align-content: start !important;
    font-size: clamp(8px, .78vw, 13px) !important;
    font-weight: 650 !important;
    letter-spacing: .10em !important;
    line-height: 1.12 !important;
  }

  .remote-context-list span {
    display: grid !important;
    grid-template-columns: clamp(5px, .40vw, 8px) minmax(0, 1fr) !important;
    align-items: center !important;
    gap: clamp(7px, .52vw, 10px) !important;
    color: #e9f6fc !important;
    white-space: nowrap !important;
  }

  .remote-context-list span::before {
    width: clamp(5px, .40vw, 8px) !important;
    height: clamp(5px, .40vw, 8px) !important;
    border-radius: 1px !important;
    background: #d9f4ff !important;
    box-shadow:
      0 0 5px #d9f4ff,
      0 0 12px rgba(112, 211, 255, .92) !important;
  }

  .remote-panel-commitment {
    top: 76% !important;
    left: 77% !important;
    width: 20% !important;
    max-width: 20% !important;
    padding-top: 10px !important;
    border-top: 1px solid rgba(199, 237, 255, .68) !important;
    color: #c8ecfb !important;
    font-size: clamp(8px, .58vw, 11px) !important;
    font-weight: 600 !important;
    letter-spacing: .13em !important;
    line-height: 1.55 !important;
    text-align: left !important;
  }

  html[lang^="pt"] .remote-panel-title,
  html[lang^="es"] .remote-panel-title {
    width: 27% !important;
    max-width: 27% !important;
  }

  html[lang^="pt"] .remote-context-list,
  html[lang^="es"] .remote-context-list {
    left: 80% !important;
    width: 18% !important;
    max-width: 18% !important;
    letter-spacing: .06em !important;
  }

  html[lang^="pt"] .remote-panel-commitment,
  html[lang^="es"] .remote-panel-commitment {
    left: 75% !important;
    width: 22% !important;
    max-width: 22% !important;
    letter-spacing: .08em !important;
  }
}

/* Remote panel correction — clear map zone, upright live typography. */
@media (min-width: 1024px) {
  .remote-panel-original {
    left: 43% !important;
    top: 0 !important;
    width: 57% !important;
    opacity: .84 !important;
    transform: scaleY(.96) !important;
    filter: brightness(.78) saturate(1.16) contrast(1.08) !important;
  }

  .remote-panel-title,
  .remote-context-list,
  .remote-panel-commitment {
    transform: none !important;
    text-shadow:
      0 0 5px rgba(225, 248, 255, .92),
      0 0 15px rgba(91, 201, 255, .52),
      0 1px 5px rgba(0, 0, 0, .9) !important;
  }

  .remote-panel-title {
    top: 14% !important;
    left: 78% !important;
    width: 19% !important;
    max-width: 19% !important;
  }

  .remote-panel-title strong {
    font-size: clamp(11px, .90vw, 17px) !important;
    letter-spacing: .16em !important;
  }

  .remote-panel-title span {
    font-size: clamp(7px, .54vw, 10px) !important;
    letter-spacing: .10em !important;
  }

  .remote-context-list {
    top: 31% !important;
    left: 82% !important;
    width: 16% !important;
    max-width: 16% !important;
    gap: clamp(9px, .72vw, 14px) !important;
    font-size: clamp(8px, .66vw, 12px) !important;
    letter-spacing: .07em !important;
  }

  .remote-context-list span {
    grid-template-columns: clamp(5px, .38vw, 7px) minmax(0, 1fr) !important;
    gap: clamp(6px, .42vw, 9px) !important;
  }

  .remote-panel-commitment {
    top: 75% !important;
    left: 78% !important;
    width: 19% !important;
    max-width: 19% !important;
    padding-top: 9px !important;
    font-size: clamp(7px, .52vw, 10px) !important;
    letter-spacing: .09em !important;
  }

  html[lang^="pt"] .remote-panel-title,
  html[lang^="es"] .remote-panel-title {
    left: 75% !important;
    width: 23% !important;
    max-width: 23% !important;
  }

  html[lang^="pt"] .remote-context-list,
  html[lang^="es"] .remote-context-list {
    left: 79% !important;
    width: 19% !important;
    max-width: 19% !important;
    letter-spacing: .04em !important;
  }

  html[lang^="pt"] .remote-panel-commitment,
  html[lang^="es"] .remote-panel-commitment {
    left: 75% !important;
    width: 22% !important;
    max-width: 22% !important;
  }
}

/* Safe depth fallback: keep the complete glass clear of the baked foreground. */
@media (min-width: 1024px) {
  .remote-panel-original {
    left: 51.5% !important;
    top: -2% !important;
    width: 48.5% !important;
    opacity: .88 !important;
    transform: scaleY(1) !important;
    filter: brightness(1.08) saturate(1.08) contrast(1.22) !important;
  }

  .remote-panel-map-forensic {
    display: block !important;
    position: absolute !important;
    z-index: 4 !important;
    left: 57.25% !important;
    top: 18% !important;
    width: 25% !important;
    height: auto !important;
    max-width: none !important;
    object-fit: contain !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    pointer-events: none !important;
  }

  .remote-panel-title {
    top: 15% !important;
    left: 80% !important;
    width: 17% !important;
    max-width: 17% !important;
    transform: rotate(-5.5deg) !important;
    transform-origin: left center !important;
  }

  .remote-context-list {
    top: 33% !important;
    left: 84% !important;
    width: 14% !important;
    max-width: 14% !important;
    gap: clamp(8px, .65vw, 13px) !important;
    font-size: clamp(7px, .60vw, 11px) !important;
    transform: rotate(-5.5deg) !important;
    transform-origin: left top !important;
  }

  .remote-panel-commitment {
    top: 77% !important;
    left: 80% !important;
    width: 17% !important;
    max-width: 17% !important;
    transform: rotate(-5.5deg) !important;
    transform-origin: left top !important;
  }

  html[lang^="pt"] .remote-panel-title,
  html[lang^="es"] .remote-panel-title {
    left: 77% !important;
    width: 21% !important;
    max-width: 21% !important;
    transform: rotate(-5.5deg) !important;
  }

  html[lang^="pt"] .remote-context-list,
  html[lang^="es"] .remote-context-list {
    left: 81% !important;
    width: 17% !important;
    max-width: 17% !important;
    transform: rotate(-5.5deg) !important;
  }

  html[lang^="pt"] .remote-panel-commitment,
  html[lang^="es"] .remote-panel-commitment {
    left: 77% !important;
    width: 20% !important;
    max-width: 20% !important;
    transform: rotate(-5.5deg) !important;
  }
}

@media (max-width: 1023px) {
  .remote-panel-map-forensic {
    display: block !important;
    position: absolute !important;
    z-index: 3 !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
    object-fit: contain !important;
    opacity: .8 !important;
    transform: none !important;
    filter: none !important;
    pointer-events: none !important;
  }
}

/* Remote panel replacement — supplied reference composite, no legacy overlay. */
.remote-panel-original,
.remote-panel-map-forensic,
.remote-master-foreground-repair {
  display: none !important;
}

.remote-master-foreground-repair {
  display: block !important;
  position: absolute !important;
  z-index: 8 !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  pointer-events: none !important;
}

.remote-panel-reference {
  position: absolute !important;
  z-index: 6 !important;
  left: 48.5% !important;
  top: 5% !important;
  width: 50% !important;
  height: auto !important;
  aspect-ratio: 1550 / 1015 !important;
  overflow: visible !important;
  pointer-events: none !important;
}

.remote-panel-reference-en,
.remote-panel-reference-localized,
.remote-panel-reference-base,
.remote-panel-reference-map {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: contain !important;
  pointer-events: none !important;
}

.remote-panel-reference-en {
  z-index: 2 !important;
}

.remote-panel-reference-localized {
  display: none !important;
  z-index: 1 !important;
}

.remote-panel-reference-base {
  z-index: 1 !important;
}

.remote-panel-reference-map {
  z-index: 2 !important;
}

.remote-ops-panel {
  display: none !important;
}

html[lang^="pt"] .remote-panel-reference-en,
html[lang^="es"] .remote-panel-reference-en {
  display: none !important;
}

html[lang^="pt"] .remote-panel-reference-localized,
html[lang^="es"] .remote-panel-reference-localized {
  display: block !important;
}

html[lang^="pt"] .remote-ops-panel,
html[lang^="es"] .remote-ops-panel {
  display: block !important;
  z-index: 7 !important;
  top: 5% !important;
  left: 48.5% !important;
  right: auto !important;
  width: 50% !important;
  height: 48% !important;
  min-height: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
}

html[lang^="pt"] .remote-panel-title,
html[lang^="es"] .remote-panel-title {
  top: 10% !important;
  left: 8% !important;
  width: 78% !important;
  max-width: 78% !important;
  transform: none !important;
  text-align: center !important;
}

html[lang^="pt"] .remote-context-list,
html[lang^="es"] .remote-context-list {
  top: 35% !important;
  left: 69% !important;
  width: 27% !important;
  max-width: 27% !important;
  gap: clamp(8px, .7vw, 14px) !important;
  transform: none !important;
}

html[lang^="pt"] .remote-panel-commitment,
html[lang^="es"] .remote-panel-commitment {
  top: 82% !important;
  left: 68% !important;
  width: 28% !important;
  max-width: 28% !important;
  transform: none !important;
}

@media (max-width: 1023px) {
  .remote-panel-reference {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1550 / 1015 !important;
    margin-top: 0 !important;
  }

  html[lang^="pt"] .remote-ops-panel,
  html[lang^="es"] .remote-ops-panel {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }
}

/* Final reference assembly: separate transparent glass plus aligned supplied pieces. */
.remote-panel-reference {
  aspect-ratio: 1672 / 941 !important;
}

.remote-panel-reference-en {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

.remote-panel-reference-layer {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: contain !important;
  pointer-events: none !important;
}

.remote-panel-reference-en .remote-panel-reference-base { z-index: 1 !important; }
.remote-panel-reference-en .remote-panel-reference-title { z-index: 2 !important; }
.remote-panel-reference-en .remote-panel-reference-map { z-index: 3 !important; }
.remote-panel-reference-en .remote-panel-reference-list { z-index: 4 !important; }
.remote-panel-reference-composite {
  position: absolute !important;
  inset: 0 !important;
  z-index: 5 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: contain !important;
  pointer-events: none !important;
}

/* The composite panel is already complete; do not paint a second restoration
   canvas over its corners. */
.remote-master-foreground-repair {
  display: none !important;
}

html[lang^="pt"] .remote-panel-reference-en,
html[lang^="es"] .remote-panel-reference-en {
  display: none !important;
}

html[lang^="pt"] .remote-panel-reference-localized,
html[lang^="es"] .remote-panel-reference-localized {
  display: block !important;
}

@media (max-width: 1023px) {
  .remote-panel-reference {
    aspect-ratio: 1672 / 941 !important;
  }
}
/* Archetype data visualization — petroleum blue, gold light, live HTML axes. */
.traits-visualization{position:relative;margin:clamp(72px,9vw,132px) 0 0;padding:clamp(30px,4vw,54px);overflow:hidden;color:#eef5f2;background:linear-gradient(135deg,#071d2b 0%,#0c3040 56%,#09202f 100%);border:1px solid rgba(207,163,76,.36);box-shadow:0 22px 60px rgba(5,24,35,.16);isolation:isolate}
.traits-visualization:before{content:"";position:absolute;inset:-45% -10%;z-index:-1;background:radial-gradient(circle at 78% 18%,rgba(218,173,78,.2),transparent 22%),repeating-linear-gradient(90deg,transparent 0 78px,rgba(211,174,94,.075) 79px 80px),repeating-linear-gradient(0deg,transparent 0 78px,rgba(211,174,94,.05) 79px 80px);transform:rotate(-7deg);pointer-events:none}
.traits-heading{max-width:700px}.traits-heading .eyebrow{color:#e5bd68}.traits-heading h2{margin:10px 0 12px;color:#fff8e8;font-size:clamp(2rem,4vw,3.5rem);line-height:1.02}.traits-heading p{max-width:620px;color:rgba(237,245,241,.78)}
.traits-groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:32px}.trait-group{padding:22px 18px 16px;background:rgba(5,27,40,.6);border:1px solid rgba(224,185,94,.25);backdrop-filter:blur(8px)}.trait-group h3{margin:0 0 22px;color:#e5bd68;font:700 .7rem/1.2 var(--sans,Arial),sans-serif;letter-spacing:.16em;text-transform:uppercase}.trait-axis{display:grid;grid-template-columns:minmax(74px,.8fr) minmax(110px,1.5fr) minmax(74px,.8fr);align-items:center;gap:10px;margin:17px 0;color:rgba(237,245,241,.74);font-size:.66rem;line-height:1.15}.trait-axis>span:last-child{text-align:right}.axis-line{position:relative;height:1px;background:linear-gradient(90deg,rgba(229,189,104,.2),rgba(229,189,104,.78),rgba(229,189,104,.2))}.axis-line:before{content:"";position:absolute;inset:-4px 0;background:linear-gradient(90deg,transparent 0 24%,rgba(255,246,211,.26) 25% 25.5%,transparent 26% 49%,rgba(255,246,211,.26) 50% 50.5%,transparent 51% 74%,rgba(255,246,211,.26) 75% 75.5%,transparent 76%);pointer-events:none}.axis-line i{position:absolute;left:var(--position);top:50%;width:11px;height:11px;border:2px solid #f8e4ab;border-radius:50%;background:#0b7384;box-shadow:0 0 0 3px rgba(210,167,75,.16),0 0 18px rgba(223,184,91,.9);transform:translate(-50%,-50%);transition:transform .2s ease,background .2s ease,box-shadow .2s ease}.trait-axis:hover .axis-line i,.trait-axis:focus-visible .axis-line i{background:#e0ad4b;box-shadow:0 0 0 5px rgba(224,173,75,.15),0 0 28px rgba(224,173,75,1);transform:translate(-50%,-50%) scale(1.28)}.trait-axis:focus-visible{outline:1px solid rgba(224,173,75,.8);outline-offset:6px}
@media(max-width:900px){.traits-groups{grid-template-columns:1fr}.trait-group{padding:20px 16px 12px}}
@media(max-width:620px){.traits-visualization{margin-top:58px;padding:24px 16px}.traits-heading h2{font-size:2rem}.trait-axis{grid-template-columns:minmax(64px,.8fr) minmax(90px,1.4fr) minmax(64px,.8fr);gap:7px;font-size:.59rem}}

/* PT/ES parity line: keep the frozen EN geometry and change only labels. */
@media (min-width: 1024px) {
  html[lang^="pt"] .remote-panel-reference,
  html[lang^="es"] .remote-panel-reference,
  html[lang^="pt"] .remote-ops-panel,
  html[lang^="es"] .remote-ops-panel {
    left: 49.1% !important;
    top: 4.2% !important;
    right: auto !important;
    width: 50% !important;
    height: auto !important;
    min-height: 0 !important;
    transform: none !important;
    transform-origin: center center !important;
  }

  html[lang^="pt"] .remote-ops-panel,
  html[lang^="es"] .remote-ops-panel {
    display: block !important;
    position: absolute !important;
    z-index: 7 !important;
    padding: 0 !important;
  }

  html[lang^="pt"] .remote-panel-reference-localized .remote-panel-reference-base,
  html[lang^="pt"] .remote-panel-reference-localized .remote-panel-reference-map,
  html[lang^="es"] .remote-panel-reference-localized .remote-panel-reference-base,
  html[lang^="es"] .remote-panel-reference-localized .remote-panel-reference-map {
    opacity: 1 !important;
  }
}


/* The approved panel must remain a continuous asset. Do not crop it with the
   old foreground restoration mask. */
.remote-master-foreground-restore {
  -webkit-mask-image: none !important;
  mask-image: none !important;
  -webkit-mask: none !important;
  mask: none !important;
}

.remote-v4-left-shade {
  -webkit-mask-image: none !important;
  mask-image: none !important;
  -webkit-mask: none !important;
  mask: none !important;
}

/* Remote readability correction: keep the approved composition intact while
   placing a restrained petroleum-blue reading field behind the copy only. */
@media (min-width: 1024px) {
  .remote-v4-copy {
    isolation: isolate;
  }

  .remote-v4-copy::before {
    content: "";
    position: absolute;
    z-index: 0;
    left: -18px;
    top: -28px;
    bottom: -26px;
    width: min(35vw, 440px);
    pointer-events: none;
    background: linear-gradient(
      90deg,
      rgba(8, 29, 46, .76) 0%,
      rgba(8, 29, 46, .58) 52%,
      rgba(8, 29, 46, .18) 82%,
      rgba(8, 29, 46, 0) 100%
    );
  }

  .remote-v4-copy > * {
    position: relative;
    z-index: 1;
  }

  .remote-v4 .remote-body,
  .remote-v4 .remote-body p {
    font-family: "Avenir Next", Avenir, "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-weight: 400 !important;
    letter-spacing: normal !important;
  }
}

/* Final localized raster composites: same approved frame, translated labels only. */
@media (min-width: 1024px) {
  html[lang^="pt"] .remote-panel-reference-localized .remote-panel-reference-pt,
  html[lang^="es"] .remote-panel-reference-localized .remote-panel-reference-es { display: block !important; }
  html[lang^="pt"] .remote-panel-reference-localized .remote-panel-reference-es,
  html[lang^="es"] .remote-panel-reference-localized .remote-panel-reference-pt { display: none !important; }
  html[lang^="pt"] .remote-ops-panel,
  html[lang^="es"] .remote-ops-panel { display: none !important; }
}

/* Mobile composition pass — the narrow experience is a deliberate vertical
   composition, not a clipped desktop canvas. The approved source assets stay
   unchanged; only their mobile stage and reading order are re-authored here. */
@media (max-width: 980px) {
  html,
  body {
    min-width: 0;
    max-width: 100%;
    overflow-x: hidden;
  }

  .hero {
    display: block;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
    background: #071827;
  }

  .hero .stage {
    position: relative;
    inset: auto;
    height: min(820px, 100svh);
    min-height: 720px;
    overflow: hidden;
    isolation: isolate;
  }

  .hero .stage > .layer-background,
  .hero .stage > .layer-atmosphere,
  .hero .stage > .layer-subject,
  .hero .stage > .layer-foreground {
    position: absolute;
    inset: 0;
  }

  .hero .stage > .layer-background { z-index: 1 !important; }
  .hero .stage > .layer-atmosphere { z-index: 6 !important; }
  .hero .stage > .layer-subject { z-index: 10 !important; transform: none !important; }
  .hero .stage > .layer-foreground { z-index: 12 !important; transform: none !important; }
  .hero .stage > .layer-chair,
  .hero .stage > .layer-rear,
  .hero .stage > .layer-from-panel,
  .hero .stage > .layer-path,
  .hero .stage > .layer-subject-occlusion,
  .hero .stage > .layer-front-panels,
  .hero .stage > .layer-better-panel {
    display: none !important;
  }

  .hero .layer-background .background {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 64% center !important;
  }

  .hero .layer-background .background-table-plant-cleanup { display: none !important; }

  .hero .layer-atmosphere .atmosphere {
    background:
      linear-gradient(180deg, rgba(3, 13, 25, .96) 0%, rgba(3, 13, 25, .78) 30%, rgba(3, 13, 25, .18) 62%, rgba(3, 13, 25, .56) 100%),
      linear-gradient(90deg, rgba(3, 13, 25, .74) 0%, rgba(3, 13, 25, .18) 72%, rgba(3, 13, 25, .42) 100%);
  }

  .hero .layer-subject .subject {
    position: absolute;
    inset: auto -13% 54px auto;
    width: 120% !important;
    height: auto !important;
    max-width: none !important;
    object-fit: contain !important;
    object-position: center bottom !important;
    transform: none !important;
  }

  .hero .layer-foreground .foreground {
    position: absolute;
    inset: auto auto 0 -24% !important;
    width: 150% !important;
    height: auto !important;
    max-width: none !important;
    object-fit: contain !important;
    object-position: center bottom !important;
    transform: none !important;
    clip-path: none !important;
  }

  .hero-copy {
    position: relative;
    inset: auto !important;
    z-index: 20;
    width: auto !important;
    max-width: 640px;
    margin: 0 7%;
    padding: 96px 0 0;
  }

  .hero-copy .eyebrow {
    max-width: 100%;
    margin-bottom: 18px;
    font-size: 9px;
    line-height: 1.45;
    letter-spacing: .2em;
    white-space: normal;
  }

  .hero-copy h1 {
    max-width: 9ch;
    margin: 0;
    font-size: clamp(50px, 12vw, 78px) !important;
    line-height: .98;
    letter-spacing: -.065em;
    overflow-wrap: normal;
  }

  .hero-copy .support {
    max-width: 32rem;
    margin: 22px 0 0;
    font-size: 15px;
    line-height: 1.45;
  }

  .hero .ticker {
    position: relative;
    inset: auto;
    z-index: 30;
    min-height: 62px;
    height: 62px;
    overflow: hidden;
  }

  .hero .ticker-label,
  .hero .signature { display: none !important; }
  .hero .ticker-track-wrap { min-width: 0; width: 100%; }
  .hero .ticker-track { width: max-content; font-size: 10px; }

  .portfolio-rest,
  .portfolio-rest * { min-width: 0; }

  .portfolio-rest .wrap {
    width: min(100% - 36px, 720px);
  }

  .portfolio-rest .screen {
    padding: 68px 0;
    scroll-margin-top: 80px;
  }

  .portfolio-rest .section-head,
  .portfolio-rest .capability-feature,
  .portfolio-rest .case-grid,
  .portfolio-rest .work04-grid,
  .portfolio-rest .video-grid,
  .portfolio-rest .journey-grid,
  .portfolio-rest .about-grid,
  .portfolio-rest .cta-grid {
    grid-template-columns: 1fr !important;
    gap: 28px;
  }

  .portfolio-rest .section-head h2,
  .portfolio-rest .case-copy h2,
  .portfolio-rest .work04-copy h2,
  .portfolio-rest .video-copy h2,
  .portfolio-rest .journey-copy h2,
  .portfolio-rest #highlights h2,
  .portfolio-rest .about-copy .quote,
  .portfolio-rest .resume-grid h2,
  .portfolio-rest .cta h2 {
    max-width: 13ch;
    font-size: clamp(38px, 10.5vw, 58px) !important;
    line-height: .98 !important;
  }

  .portfolio-rest .cap-grid,
  .portfolio-rest .proof-grid,
  .portfolio-rest .moment-list,
  .portfolio-rest .timeline,
  .portfolio-rest .flow,
  .portfolio-rest .bullet-grid,
  .portfolio-rest .video-bullets,
  .portfolio-rest .work04-steps,
  .portfolio-rest .work04-flow,
  .portfolio-rest .fact-grid,
  .portfolio-rest .resume-cards {
    grid-template-columns: 1fr !important;
  }

  .portfolio-rest .case-artifact,
  .portfolio-rest .work04-map,
  .portfolio-rest .card,
  .portfolio-rest .proof-card,
  .portfolio-rest .moment,
  .portfolio-rest .resume-card,
  .portfolio-rest .contact-box {
    overflow-wrap: anywhere;
  }

  .portfolio-rest .cta-grid { grid-template-areas: 'copy' 'visual' 'box' !important; }
  .portfolio-rest .cta-visual,
  .portfolio-rest .about-photo,
  .portfolio-rest .capability-feature-media { max-width: none; }
  .portfolio-rest .footerline { align-items: flex-start; flex-direction: column; }

  .site-nav.mobile-open .languages {
    display: flex !important;
    width: 100%;
    margin: 8px 0 0 !important;
    padding: 14px 0 0 !important;
    border-top: 1px solid rgba(255,255,255,.13);
  }

  .site-nav.mobile-open .languages .language {
    display: inline-flex !important;
    align-items: center;
    min-height: 34px;
    padding: 0 4px;
    font-size: 11px !important;
    letter-spacing: .16em;
  }
}

@media (max-width: 620px) {
  .hero .stage { height: 760px; min-height: 760px; }
  .hero-copy { padding-top: 88px; }
  .hero-copy h1 { max-width: 8ch; font-size: clamp(46px, 13vw, 62px) !important; }
  .hero .layer-subject .subject { inset: auto -22% 54px auto; width: 136% !important; }
  .hero .layer-foreground .foreground { left: -40% !important; width: 176% !important; }
  .portfolio-rest .wrap { width: min(100% - 28px, 720px); }
  .portfolio-rest .screen { padding: 56px 0; }
  .portfolio-rest .eyebrow { gap: 12px; font-size: 10px; letter-spacing: .18em; }
  .portfolio-rest .eyebrow::after { min-width: 36px; }
}

/* Remote Work mobile screen — rebuild the desktop coordinate plane as a
   contained image card followed by readable copy. The complete panel remains
   one raster unit, so its frame, map, lights and translated labels cannot
   separate or run beyond the viewport. */
@media (max-width: 980px) {
  .remote-work.remote-v4 {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: linear-gradient(180deg, #0b263b 0%, #102f46 58%, #fdfaf5 100%) !important;
  }

  .remote-v4-media {
    position: relative !important;
    inset: auto !important;
    order: 1 !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 3 !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    background: #0a2438 !important;
  }

  .remote-v4-media picture,
  .remote-v4-master {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: 52% 29% !important;
  }

  .remote-panel-original,
  .remote-panel-map-forensic,
  .remote-master-foreground-repair,
  .remote-master-foreground-restore,
  .remote-v4-media::before,
  .remote-v4-media::after {
    display: none !important;
  }

  .remote-panel-reference {
    position: absolute !important;
    inset: 8% 11% auto 11% !important;
    width: 78% !important;
    height: auto !important;
    aspect-ratio: 1672 / 941 !important;
    margin: 0 !important;
    transform: none !important;
    z-index: 4 !important;
    overflow: visible !important;
  }

  .remote-panel-reference-en,
  .remote-panel-reference-localized,
  .remote-panel-reference-composite {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: contain !important;
  }

  .remote-panel-reference-localized { display: block !important; }
  .remote-panel-reference-en { display: block !important; }
  html[lang^="pt"] .remote-panel-reference-en,
  html[lang^="es"] .remote-panel-reference-en { display: none !important; }
  html[lang^="pt"] .remote-panel-reference-localized .remote-panel-reference-es,
  html[lang^="es"] .remote-panel-reference-localized .remote-panel-reference-pt { display: none !important; }
  html[lang^="pt"] .remote-panel-reference-localized .remote-panel-reference-pt,
  html[lang^="es"] .remote-panel-reference-localized .remote-panel-reference-es { display: block !important; }

  .remote-panel-reference::after { display: none !important; }

  .remote-ops-panel {
    display: none !important;
  }
  html[lang^="pt"] .remote-ops-panel,
  html[lang^="es"] .remote-ops-panel { display: none !important; }

  .remote-v4-copy {
    position: relative !important;
    inset: auto !important;
    order: 2 !important;
    width: auto !important;
    max-width: 720px !important;
    margin: 0 !important;
    padding: 52px 7% 62px !important;
    background:
      linear-gradient(180deg, rgba(11, 38, 59, .98) 0%, rgba(11, 38, 59, .94) 78%, rgba(11, 38, 59, .78) 100%);
  }

  .remote-v4-copy::before { display: none !important; }

  .remote-v4 .remote-kicker {
    gap: 14px !important;
    margin: 0 0 18px !important;
    font-size: 9px !important;
    letter-spacing: .22em !important;
    line-height: 1.35 !important;
  }

  .remote-v4 .remote-kicker::after { width: 72px !important; }

  .remote-v4 .remote-title {
    max-width: 9ch !important;
    margin: 0 0 22px !important;
    font-size: clamp(46px, 12vw, 72px) !important;
    line-height: .96 !important;
    letter-spacing: -.06em !important;
  }

  .remote-v4 .remote-title > span {
    white-space: normal !important;
  }

  .remote-v4 .remote-body {
    width: 100% !important;
    max-width: 620px !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    text-shadow: none !important;
  }

  .remote-v4 .remote-body p { margin: 0 0 14px !important; }
  .remote-v4 .remote-body p:nth-child(n + 2) { display: block !important; }
  .remote-v4 .remote-values { display: none !important; }
  .remote-to-capabilities { display: none !important; }
}

@media (max-width: 620px) {
  .remote-v4-media { aspect-ratio: 10 / 9 !important; }
  .remote-panel-reference { inset: 8% 11% auto 11% !important; width: 78% !important; }
  .remote-v4-copy { padding: 44px 7% 52px !important; }
  .remote-v4 .remote-title { font-size: clamp(44px, 13vw, 62px) !important; }
  .remote-v4 .remote-body { font-size: 14px !important; }
}

/* Mobile proportion pass — keep the approved scenes intact while giving the
   narrow layout its own typographic scale and a readable panel-to-photo ratio. */
@media (max-width: 620px) {
  .hero .stage {
    height: clamp(700px, 224vw, 760px) !important;
    min-height: 0 !important;
  }

  .hero-copy {
    padding-top: 82px !important;
  }

  .hero-copy h1 {
    max-width: 9.5ch !important;
    font-size: clamp(42px, 12vw, 58px) !important;
    line-height: .97 !important;
  }

  .hero .layer-subject .subject {
    inset: auto -16% 48px auto !important;
    width: 124% !important;
  }

  .hero .layer-foreground .foreground {
    left: -30% !important;
    width: 160% !important;
  }

  .remote-v4-media {
    aspect-ratio: 4 / 3 !important;
    min-height: 0 !important;
  }

  .remote-panel-reference {
    inset: 7% 6% auto 6% !important;
    width: 88% !important;
  }

  .remote-v4-copy {
    padding: 40px 7% 54px !important;
  }

  .remote-v4 .remote-title {
    max-width: none !important;
    font-size: clamp(36px, 11vw, 54px) !important;
    line-height: .98 !important;
    letter-spacing: -.055em !important;
  }

  .remote-v4 .remote-title > span {
    display: block !important;
    white-space: normal !important;
  }

  html[lang^="pt"] .remote-v4 .remote-title,
  html[lang^="es"] .remote-v4 .remote-title {
    font-size: clamp(32px, 10vw, 50px) !important;
  }

  .remote-v4 .remote-body {
    font-size: clamp(13.5px, 4.3vw, 15px) !important;
    line-height: 1.55 !important;
  }
}

/* Desktop optical correction — the scene canvas is wider than the viewport,
   so keep the editorial copy inside the visible crop instead of allowing the
   first letters to disappear. Reduce only the compositing lift that was
   washing the supplied photographs; the gold path and panel glows remain. */
@media (min-width: 921px) {
  .hero-copy {
    left: max(6.6%, calc((100% - 100vw) / 2 + 4.6vw)) !important;
    width: min(33.6%, 34vw) !important;
  }

  .hero-copy h1 {
    font-size: 4.35cqw !important;
    line-height: 1.02 !important;
    text-wrap: balance;
  }

  .hero-copy .support {
    font-size: .79cqw !important;
    line-height: 1.42 !important;
  }

  .hero .stage::before {
    background: radial-gradient(
      circle at 74.8% 20.8%,
      rgba(255, 246, 194, .72) 0,
      rgba(255, 211, 104, .48) .9%,
      rgba(255, 186, 72, .12) 2.8%,
      transparent 6%
    ) !important;
  }

  .hero .layer-background .background {
    filter: brightness(.93) contrast(1.04) saturate(.93) !important;
  }

  .hero .layer-subject .subject {
    filter: brightness(.95) contrast(1.04) saturate(.93) sepia(.025) hue-rotate(-3deg)
      drop-shadow(-11px 13px 14px rgba(2, 9, 15, .36)) !important;
  }

  .hero .layer-foreground .foreground {
    filter: brightness(.93) contrast(1.04) saturate(.92) sepia(.025) hue-rotate(-3deg) !important;
  }
}

/* Exposure correction v2 — preserve the approved assets and gold accents, but
   remove the cumulative white lift that was flattening the photographs. */
@media (min-width: 921px) {
  .hero .layer-background .background {
    filter: brightness(.78) contrast(1.08) saturate(.88) !important;
  }

  .hero .layer-subject .subject,
  .hero .layer-chair .chair {
    filter: brightness(.82) contrast(1.08) saturate(.88) sepia(.018) hue-rotate(-3deg)
      drop-shadow(-11px 13px 14px rgba(2, 9, 15, .44)) !important;
  }

  .hero .layer-foreground .foreground {
    filter: brightness(.80) contrast(1.08) saturate(.88) sepia(.018) hue-rotate(-3deg) !important;
  }

  .hero .layer-path > .light-path,
  .hero .layer-path > .light-path-endpoint {
    opacity: .72 !important;
  }
}

@media (min-width: 1001px) {
  .remote-v4-master {
    /* Do not filter the complete master: its lower off-white fade must stay
       neutral, otherwise the photographic fade becomes a gray shadow. */
    filter: none !important;
  }

  /* The approved master already carries the photographic lower fade. The
     synthetic section veil created a visible gray shadow at the join with
     Capabilities, so the transition must remain unpainted. */
  .remote-work.remote-v4::after,
  .remote-v4-media::after {
    content: none !important;
    display: none !important;
  }

  .remote-v4-media::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    pointer-events: none !important;
    background:
      linear-gradient(
        180deg,
        rgba(5, 20, 34, .24) 0%,
        rgba(5, 20, 34, .16) 54%,
        rgba(5, 20, 34, 0) 77%,
        rgba(5, 20, 34, 0) 100%
      ),
      linear-gradient(
        90deg,
        rgba(5, 20, 34, .14) 0%,
        rgba(5, 20, 34, .06) 48%,
        rgba(5, 20, 34, 0) 78%
      ) !important;
    mix-blend-mode: multiply !important;
  }

  /* Diagnostic/final removal: no media gradient may paint a shadow at the
     lower edge of Remote. */
  .remote-v4-media::before,
  .remote-v4-media::after {
    content: none !important;
    display: none !important;
    background: none !important;
  }

  .remote-panel-reference-composite {
    opacity: .72 !important;
  }

  .remote-panel-reference-localized .remote-panel-reference-base,
  .remote-panel-reference-localized .remote-panel-reference-map {
    opacity: .76 !important;
  }

  .remote-panel-reference::after {
    opacity: .58 !important;
  }
}
img[data-remote-src]:not([src]) { display: none !important; }

/* Tablet composition: 721–1100px is its own editorial scene. The earlier
   emergency fix removed the off-canvas gap but scaled the transparent subject
   and desk independently, which made the image read as a pasted strip. Keep
   one bounded stage, then give the copy, subject and desk deliberate anchors. */
@media (min-width: 721px) and (max-width: 1100px) {
  /* The tablet scene is intentionally the clean hero composition; the
     desktop-only trajectory panels return at the desktop breakpoint instead
     of appearing as detached cards over the subject. */
  .hero .layer-rear,
  .hero .layer-from-panel,
  .hero .layer-path,
  .hero .layer-front-panels,
  .hero .layer-better-panel,
  .hero .layer-subject-occlusion,
  .hero .stage::before {
    display: none !important;
  }
  .hero .layer-background .background {
    filter: brightness(.93) contrast(1.04) saturate(.93) !important;
  }
  .hero .layer-subject .subject,
  .hero .layer-chair .chair {
    filter: brightness(.95) contrast(1.04) saturate(.93) sepia(.02)
      hue-rotate(-3deg) drop-shadow(-11px 13px 14px rgba(2, 9, 15, .36)) !important;
  }
  .hero .layer-foreground .foreground {
    filter: brightness(.93) contrast(1.04) saturate(.92) sepia(.02)
      hue-rotate(-3deg) !important;
  }
  /* Keep the header mode consistent with the tablet composition through the
     last width at which the desktop navigation becomes cramped. */
  .site-header {
    display: flex !important;
    min-height: 82px !important;
    padding: 7px 6% 0 !important;
  }
  .site-header > a { margin: 0 !important; }
  .site-header .brand-full { width: 188px !important; }
  .mobile-nav-toggle { display: block !important; order: 3; margin-left: auto; }
  .site-nav {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    padding: 14px 7% 20px !important;
    display: none !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    background: rgba(13,27,42,.98) !important;
    border-top: 1px solid rgba(233,195,138,.12) !important;
    border-bottom: 1px solid rgba(233,195,138,.22) !important;
    box-shadow: 0 18px 30px rgba(0,0,0,.30) !important;
    white-space: normal !important;
  }
  .site-nav.mobile-open { display: flex !important; }
  .site-nav > a,
  .site-nav .nav-practice-wrap { width: 100% !important; min-height: 42px; }
  .site-nav > a { display: flex !important; align-items: center; padding: 10px 0; }
  .site-nav .languages { display: flex !important; gap: 18px; margin: 8px 0 0; padding-top: 13px; border-top: 1px solid rgba(255,255,255,.13); }
  .site-nav.mobile-open .languages { display: flex !important; }
  .nav-practice-wrap { display: grid !important; grid-template-columns: 1fr 42px; gap: 0; align-items: center; }
  .nav-practice-wrap .nav-practice-link { width: auto; }
  .nav-submenu-toggle { width: 42px; height: 42px; justify-self: end; }
  .nav-submenu { position: static; grid-column: 1 / -1; min-width: 0; margin: 0 0 8px; padding: 4px 0 4px 14px; border: 0; border-left: 1px solid rgba(233,195,138,.38); box-shadow: none; opacity: 1; pointer-events: none; transform: none; display: none; background: transparent; }
  .nav-submenu.is-open { display: grid; pointer-events: auto; }
  .nav-submenu a { padding: 9px 10px; }
  .hero {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
  }
  .hero .stage {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    height: clamp(720px, 91.5vw, 860px) !important;
    min-height: 720px !important;
    aspect-ratio: auto !important;
    transform: none !important;
    overflow: hidden !important;
  }
  .hero .stage > .layer-background,
  .hero .stage > .layer-atmosphere,
  .hero .stage > .layer-subject,
  .hero .stage > .layer-foreground {
    position: absolute !important;
    inset: 0 !important;
  }
  .hero .stage > .layer-subject { transform: none !important; }
  .hero .stage > .layer-foreground {
    transform: none !important;
    z-index: 18 !important;
  }
  /* Re-establish the physical seating plane on tablet. The isolated chair
     must remain visible behind Giovanni; otherwise the transparent desk
     canvas reads as a floating slab with no supporting furniture. */
  .hero .stage > .layer-chair {
    display: block !important;
    z-index: 9 !important;
  }
  .hero .stage > .layer-chair .chair {
    left: 28% !important;
    right: auto !important;
    top: 16% !important;
    bottom: auto !important;
    width: 68% !important;
    height: auto !important;
    max-width: none !important;
    object-fit: contain !important;
  }
  .hero .hero-copy {
    top: 13.5% !important;
    left: 12% !important;
    width: 40% !important;
  }
  .hero .hero-copy h1 {
    max-width: 9ch !important;
    font-size: clamp(48px, 5.65vw, 64px) !important;
    line-height: 1.01 !important;
  }
  .hero .hero-copy .support {
    max-width: 31ch !important;
    margin-top: 22px !important;
    font-size: clamp(11px, 1.25vw, 14px) !important;
    line-height: 1.42 !important;
  }
  .hero .layer-subject .subject {
    inset: auto clamp(-28px, -2vw, 0px) 76px auto !important;
    width: clamp(570px, 92vw, 820px) !important;
    height: auto !important;
    max-width: none !important;
    object-fit: contain !important;
  }
  .hero .layer-foreground .foreground {
    /* Let the transparent canvas exit below the hero so its lower edge does
       not read as a floating tabletop above the ticker. */
    inset: auto auto -18% -11% !important;
    width: 122% !important;
    height: auto !important;
    max-width: none !important;
    object-fit: contain !important;
    transform: scale(1.08) translateY(4%) !important;
    transform-origin: center bottom !important;
    clip-path: none !important;
  }
  .hero .layer-foreground::after {
    content: "";
    position: absolute;
    left: -11% !important;
    right: auto !important;
    bottom: 0 !important;
    width: 122% !important;
    height: 8% !important;
    background:
      linear-gradient(
        180deg,
        rgba(121, 68, 39, 0) 0%,
        rgba(121, 68, 39, .30) 42%,
        rgba(82, 45, 31, .82) 78%,
        rgba(45, 26, 22, .96) 100%
      );
    box-shadow:
      inset 0 2px 0 rgba(246, 188, 104, .18),
      0 12px 18px rgba(2, 9, 15, .32);
    border-radius: 0 0 4px 4px;
    pointer-events: none;
    z-index: 2 !important;
  }
  .hero .stage::after {
    background:
      radial-gradient(ellipse 38% 34% at 56% 28%, rgba(255,226,170,.10), transparent 72%),
      linear-gradient(90deg, rgba(5,18,33,.42) 0%, rgba(5,18,33,.22) 38%, rgba(5,18,33,.07) 70%, transparent 100%) !important;
  }
  .hero .layer-atmosphere .atmosphere {
    background:
      radial-gradient(ellipse 53% 82% at 12% 43%, rgba(2,14,29,.44) 0%, rgba(2,14,29,.18) 48%, transparent 100%),
      linear-gradient(90deg, rgba(2,11,24,.28) 0%, rgba(2,13,26,.14) 36%, rgba(2,10,19,.04) 68%, transparent 100%),
      linear-gradient(180deg, rgba(1,7,15,.10), transparent 24%, rgba(1,7,12,.08) 100%) !important;
  }
  .hero .ticker {
    position: relative !important;
    inset: auto !important;
    height: 62px !important;
    min-height: 62px !important;
  }
}