/* Proto-style theme override — exact reference palette + minimal header.
   Loaded AFTER site.css; remaps design-system tokens so every section recolors together.
   Palette: #FFFFFF · #393939 · #A4B6C2 · #D0D0C4 · #F37A1F */
:root{
--gi-white:#FFFFFF;
--gi-blue-50:#F7F7F5;--gi-blue-100:#EFEFEA;--gi-blue-200:#D0D0C4;--gi-blue-300:#A4B6C2;--gi-blue-400:#F79A52;
--gi-blue-500:#F37A1F;--gi-blue-600:#D96613;--gi-blue-700:#B5540E;
--gi-navy-700:#5A5A5A;--gi-navy-800:#484848;--gi-navy-900:#393939;
--gi-slate-100:#F2F2EF;--gi-slate-200:#E3E3DC;--gi-slate-300:#D0D0C4;--gi-slate-400:#7B848C;--gi-slate-500:#5E6870;
--color-primary:#F37A1F;--color-primary-hover:#D96613;--color-primary-active:#B5540E;--color-primary-soft:#FDEEE2;
--color-on-primary:#FFFFFF;--color-accent:#A4B6C2;
--surface-page:#FFFFFF;--surface-card:#FFFFFF;--surface-tint:#F7F7F5;--surface-soft:#EDEEEA;--surface-inverse:#393939;
--text-heading:#393939;--text-body:#5E6870;--text-muted:#646D75;--text-link:#F37A1F;
--text-inverse:#FFFFFF;--text-on-inverse-muted:rgba(255,255,255,.72);
--border-default:#E3E3DC;--border-strong:#D0D0C4;--border-focus:#F37A1F;
--focus-ring:0 0 0 3px rgba(243,122,31,.35);
--shadow-xs:0 1px 2px rgba(57,57,57,.05);
--shadow-sm:0 2px 8px rgba(57,57,57,.06);
--shadow-md:0 8px 24px rgba(57,57,57,.08);
--shadow-lg:0 20px 48px -16px rgba(57,57,57,.16);
--shadow-primary:0 8px 20px rgba(243,122,31,.28);
--status-info:#A4B6C2;--status-info-soft:#EDF1F4;
}
body{background:#fff}
.accent{color:var(--color-primary)}
/* ---- header: exact reference treatment — flat white, wordmark left, plain text nav right ---- */
.site-header{position:sticky;top:0;z-index:60;padding:0;background:#fff;border-bottom:1px solid transparent;transition:border-color var(--dur-base),box-shadow var(--dur-base)}
.site-header.stuck{border-bottom-color:var(--border-default);box-shadow:none}
.hrow{height:82px;display:flex;align-items:center;gap:var(--space-8);background:none;backdrop-filter:none;border:0;border-radius:0;box-shadow:none}
.site-header.stuck .hrow{box-shadow:none;border-color:transparent}
.logo{gap:14px}
.logo img{width:34px;height:34px;border-radius:9px;background:none;padding:0;filter:none}
.logo b{font-size:15px;font-weight:var(--weight-medium);color:var(--text-heading);letter-spacing:.24em;text-transform:uppercase}
.nav{gap:var(--space-6);margin-left:auto;margin-right:0}
.nav a,.nav button.navlink{height:auto;padding:6px 0;font-size:14px;font-weight:var(--weight-regular);letter-spacing:.02em;color:var(--text-heading);border-radius:0;background:none}
.nav a:hover,.nav button.navlink:hover{background:none;color:var(--color-primary)}
.nav [aria-expanded="true"]{background:none;color:var(--color-primary)}
.nav a[aria-current="page"]{color:var(--color-primary)}
.hactions{gap:0}
.hactions .btn,.hactions .icon-btn:not(.burger){display:none}
.mega{padding-top:0}
.mega-inner{border-radius:var(--radius-lg)}
@media (max-width:980px){
.nav{display:none}
.hactions{margin-left:auto}
.hactions .burger{display:grid;width:40px;height:40px}
}
/* keep the rest of the page coherent with the flat, neutral system */
.hero{background:#fff}
.hero-stage{background:radial-gradient(70% 55% at 50% 118%,rgba(164,182,194,.22),rgba(164,182,194,0) 70%),radial-gradient(60% 50% at 76% 6%,#fff 0%,rgba(255,255,255,0) 68%),linear-gradient(180deg,#F4F5F2 0%,#E7EAE6 100%)}
.hero-stage::after{box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -60px 80px -60px rgba(57,57,57,.10)}
.ground{background:linear-gradient(90deg,rgba(164,182,194,0),rgba(164,182,194,.35) 22%,rgba(164,182,194,.35) 78%,rgba(164,182,194,0))}
#screen{background:radial-gradient(ellipse at 50% 100%,rgba(243,122,31,.45),rgba(243,122,31,0) 72%)}
.figure img,#sitter img{filter:none;filter:drop-shadow(0 26px 30px rgba(57,57,57,.18))}
.stage-floor{background:rgba(164,182,194,.35)}
.rail [aria-current="step"] .disc img{filter:brightness(0) invert(1)}
.trust-row span.wm{color:var(--gi-slate-400)}
.results>div{border-top-color:var(--text-heading)}
.phone{border-color:var(--text-heading)}
.caret{background:var(--color-primary)}

/* ================= HERO v2 — editorial composition ================= */
.hero-v2{background:#fff;padding:var(--space-10) 0 var(--space-12);overflow:clip;position:relative}
.hero-v2-in{position:relative}
.ghost{position:absolute;left:50%;top:6%;transform:translateX(-46%);font-size:clamp(150px,20vw,300px);font-weight:var(--weight-extrabold);letter-spacing:-.05em;line-height:.8;color:#F4F4F1;pointer-events:none;user-select:none;z-index:0;white-space:nowrap}
.hero-v2-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:var(--space-8);align-items:center}
.hero-v2-copy{padding-top:var(--space-6)}
.hero-v2-h{font-size:clamp(46px,5.6vw,82px);line-height:.94;letter-spacing:-.045em;margin:var(--space-5) 0 var(--space-6)}
.hero-v2 .lead{max-width:24em;font-size:16px}
.hero-v2-cta{display:flex;align-items:center;gap:var(--space-6);flex-wrap:wrap;margin-top:var(--space-8)}
.marklink{position:relative;font-size:15px;font-weight:var(--weight-semibold);color:var(--text-heading);padding-bottom:3px;white-space:nowrap}
.marklink::after{content:"";position:absolute;left:-4px;right:-4px;bottom:0;height:9px;background:var(--color-primary);opacity:.45;z-index:-1;transition:height var(--dur-base) var(--ease-out),opacity var(--dur-base)}
.marklink:hover{color:var(--text-heading);text-decoration:none}
.marklink:hover::after{height:100%;opacity:.28}
.hero-v2 .btn-ghost{border-color:var(--border-default);background:#fff}
/* stage */
.hero-v2-stage{position:relative}
.hero-v2 .hero-stage{height:clamp(400px,40vw,520px);border-radius:0;background:none;overflow:visible}
.hero-v2 .hero-stage::after{display:none}
.hero-v2 .scene{overflow:visible}
.hero-v2 .key{background:radial-gradient(circle at 50% 44%,rgba(255,255,255,.75),rgba(255,255,255,0) 60%)}
.hero-v2 .ground{bottom:9%;background:linear-gradient(90deg,rgba(164,182,194,0),rgba(164,182,194,.30) 25%,rgba(164,182,194,.30) 75%,rgba(164,182,194,0))}
.brush{position:absolute;left:18%;top:6%;width:64%;height:78%;background:var(--color-primary);opacity:.92;border-radius:62% 38% 55% 45%/48% 58% 42% 52%;transform:rotate(-9deg)}
.brush2{position:absolute;left:8%;top:26%;width:40%;height:52%;background:#A4B6C2;opacity:.34;border-radius:48% 52% 40% 60%/58% 42% 58% 42%;transform:rotate(7deg)}
.dotgrid{position:absolute;right:2%;top:8%;width:86px;height:64px;background-image:radial-gradient(var(--color-primary) 1.8px,transparent 1.8px);background-size:14px 14px;opacity:.5}
.hero-v2 .figure img,.hero-v2 #sitter img{filter:drop-shadow(0 30px 34px rgba(57,57,57,.22))}
.hero-v2 #walker{left:2%;height:72%}
.hero-v2 #sitter{right:7%;bottom:6%;height:90%}
.hero-v2 .contact{background:radial-gradient(ellipse at 50% 50%,rgba(57,57,57,.24),rgba(57,57,57,0) 72%)}
.hero-v2 .mini{border-radius:14px;box-shadow:0 20px 44px -20px rgba(57,57,57,.34),0 2px 8px rgba(57,57,57,.06)}
.hero-v2 #c1{left:-4%;top:4%;width:200px}
.hero-v2 #c2{left:-6%;bottom:14%;width:198px}
.hero-v2 #c3{left:auto;right:-3%;bottom:6%}
/* circular CTA */
.orb{position:absolute;right:-6px;top:34%;width:58px;height:58px;border-radius:999px;border:0;background:var(--color-primary);color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:0 14px 28px -10px rgba(243,122,31,.55);transition:transform var(--dur-base) var(--ease-out),background var(--dur-fast);z-index:3}
.orb:hover{background:var(--color-primary-hover);transform:translateY(-2px)}
.tm-who .av{background:var(--surface-inverse);color:#fff}
/* story meta */
.hero-v2-meta{position:relative;z-index:2;display:flex;align-items:center;gap:var(--space-5);margin-top:var(--space-5)}
.counter{font-size:12px;font-weight:var(--weight-bold);color:var(--text-muted);letter-spacing:.14em;font-variant-numeric:tabular-nums;flex:none}
.hero-v2 .story{margin:0;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;flex:1}
.hero-v2 .story li{gap:6px}
.hero-v2 .story .lbl{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}
.hero-v2 .story li.on .lbl{color:var(--text-heading)}
/* dark stat bar */
.statbar{position:relative;z-index:2;margin-top:var(--space-10);background:var(--surface-inverse);border-radius:var(--radius-lg);padding:var(--space-6) var(--space-8);display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) auto;gap:var(--space-6);align-items:center}
.statbar>div{min-width:0;padding-left:var(--space-6);border-left:1px solid rgba(255,255,255,.14)}
.statbar>div:first-child{padding-left:0;border-left:0}
.statbar .stat-n{color:#fff;font-size:clamp(22px,2vw,30px)}
.statbar .stat-l{color:rgba(255,255,255,.7);font-size:12px}
.statbar-social{display:flex;gap:10px;border-left:1px solid rgba(255,255,255,.14)}
.statbar-social a{width:36px;height:36px;border-radius:999px;background:rgba(255,255,255,.08);display:grid;place-items:center;transition:background var(--dur-fast)}
.statbar-social a:hover{background:rgba(255,255,255,.18)}
.statbar-social img{width:18px;height:18px}
@media (max-width:1100px){
.hero-v2-grid{grid-template-columns:minmax(0,1fr);gap:var(--space-10)}
.ghost{top:2%;font-size:clamp(120px,26vw,220px)}
.hero-v2 .hero-stage{height:clamp(360px,62vw,460px)}
.hero-v2 #c1{left:0;top:2%}.hero-v2 #c2{left:0}.hero-v2 #c3{right:0}
.orb{top:auto;bottom:6px;right:0}
.hero-v2-meta{padding-right:74px}
.statbar{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--space-6)}
.statbar>div:nth-child(3){padding-left:0;border-left:0}
.statbar-social{grid-column:1/-1;border-left:0;padding-top:var(--space-5);border-top:1px solid rgba(255,255,255,.14)}
}
@media (max-width:760px){
.hero-v2 .story{display:none}
.hero-v2-meta{margin-top:var(--space-6)}
.orb{bottom:2px}
.hero-v2 .mini{transform:scale(.86);transform-origin:left top}
.hero-v2 #c3{transform-origin:right bottom}
.statbar{padding:var(--space-5)}
}

/* character removed from hero — static composed props */
.hero-v2 .hero-stage{display:block}
.hero-v2 #c1,.hero-v2 #c2,.hero-v2 #c3{animation:none!important;opacity:1;transform:none}
.hero-v2 #c1 .ln{animation:none!important;transform:none}
.hero-v2 .mini{transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base)}
.hero-v2 .mini:hover{transform:translateY(-3px);box-shadow:0 26px 52px -20px rgba(57,57,57,.38)}
.hero-v2 #c1{left:9%;top:11%;width:230px}
.hero-v2 #c2{left:20%;bottom:9%;width:222px}
.hero-v2 #c3{left:auto;right:8%;top:40%;bottom:auto;display:flex;align-items:center;gap:12px}
.hero-v2 .brush{left:22%;top:8%;width:52%;height:76%;opacity:.95}
.hero-v2 .brush2{left:52%;top:26%;width:34%;height:48%;opacity:.4}
.hero-v2 .dotgrid{right:4%;top:6%;opacity:.55}
.hero-v2-meta{display:none}
@media (max-width:1100px){
.hero-v2 #c1{left:2%;top:7%}
.hero-v2 #c2{left:12%;bottom:8%}
.hero-v2 #c3{right:2%;top:42%}
.hero-v2 .brush{left:16%;width:58%}
}
@media (max-width:760px){
.hero-v2 #c1{left:0;top:2%;width:200px}
.hero-v2 #c2{left:6%;bottom:4%;width:196px}
.hero-v2 #c3{right:0;top:44%}
}

/* ---- process rail: scroll-driven progression ---- */
.rail{position:relative}
@media (min-width:981px){
.rail::before,.rail::after{content:"";position:absolute;top:29px;height:2px;border-radius:1px;z-index:0}
.rail::before{left:8.3%;right:8.3%;background:var(--border-default)}
.rail::after{left:8.3%;width:calc((100% - 16.6%) * var(--p,0));background:var(--color-primary);transition:width .5s var(--ease-out)}
.rail button::after{display:none}
}
@media (max-width:980px){
.rail button::after{display:block;background:var(--border-default);transition:background var(--dur-base)}
.rail button:nth-child(3n)::after,.rail button:last-child::after{display:none}
.rail button[data-done="1"]::after{background:var(--color-primary)}
}
.rail .disc{background:#fff;border:1px solid var(--border-default);transition:border-color var(--dur-base),box-shadow var(--dur-base),transform var(--dur-base) var(--ease-out),background var(--dur-base)}
.rail .disc img{filter:grayscale(1) opacity(.55);transition:filter var(--dur-base)}
.rail button:hover .disc{border-color:var(--border-strong);transform:translateY(-2px)}
.rail [aria-current="step"] .disc{background:#fff;border:2px solid var(--color-primary);box-shadow:0 0 0 6px rgba(243,122,31,.14),0 10px 22px -12px rgba(243,122,31,.55);transform:translateY(-2px)}
.rail [aria-current="step"] .disc img{filter:none}
.rail button[data-done="1"] .disc{border-color:var(--color-primary)}
.rail button[data-done="1"] .disc img{filter:none;opacity:.85}
.rail button[data-done="1"] .n{color:var(--color-primary)}
.rail [aria-current="step"] .n,.rail [aria-current="step"] .t{color:var(--color-primary)}
.rail .t{transition:color var(--dur-base)}

/* ---- process: pinned scroll sequence + character ---- */
.pin-inner>.wrap{width:100%}
@media (min-width:1101px){
#process{padding-top:0;padding-bottom:0}
.pin-track{height:calc(100vh + 520vh)}
.pin-inner{position:sticky;top:78px;min-height:0;display:flex;align-items:flex-start;padding:var(--space-6) 0}
#process .sec-head{max-width:640px}
#process .sec-head .h2{font-size:clamp(28px,3vw,40px);margin:var(--space-2) 0 var(--space-2)}
#process .sec-head .lead{font-size:15px;display:block}
#process .rail{margin:var(--space-5) 0 var(--space-5)}
#process .rail .disc{width:50px;height:50px}
#process .rail .disc img{width:26px;height:26px}
#process .rail::before,#process .rail::after{top:25px}
#process .proc h3{font-size:clamp(26px,2.6vw,34px);margin:var(--space-2) 0 var(--space-2)}
#process .proc .lead{font-size:15px}
#process .proc p{margin-top:10px!important}
#process .proc ul{margin:var(--space-4) 0 var(--space-4);gap:6px}
#process .proc .btn{height:var(--control-h-md)}
#process .proc-nav{display:none}
.proc-stage{height:clamp(200px,24vh,260px)}
}
#process .sec-head .h2{margin:var(--space-2) 0 var(--space-3)}
#process .sec-head .lead{font-size:16px}
#process .rail{margin:var(--space-8) 0 var(--space-8)}
#process .proc{gap:var(--space-8);align-items:center}
#process .proc h3{font-size:clamp(28px,3vw,40px);margin:var(--space-3) 0 var(--space-3)}
#process .proc ul{margin:var(--space-4) 0 var(--space-5);gap:8px}
#process .proc li{font-size:14px}
#process .proc-nav{margin-top:var(--space-6)}
.proc-stage{height:clamp(260px,32vh,340px);position:relative;overflow:hidden}
.proc-stage .mini{transform:scale(.82);transform-origin:left top}
.proc-stage .mini:last-of-type{transform-origin:right bottom}
.proc-actor{position:absolute;right:2%;bottom:0;height:86%;width:auto;filter:drop-shadow(0 22px 26px rgba(57,57,57,.20));z-index:0}
.proc-stage .mini{z-index:2}
.proc-stage .mini:last-of-type{right:auto!important;left:4%!important;bottom:6%!important;top:auto!important;transform:scale(.82);transform-origin:left bottom}
@media (max-width:1100px){
.proc-stage{height:300px}
.proc-actor{height:80%}
}

/* ===== complete the palette remap + accessible orange text ===== */
:root{
--gi-amber-500:#B5540E;--gi-amber-100:#FBEFE4;
--gi-green-500:#B5540E;--gi-green-100:#FBEFE4;
--gi-violet-500:#393939;--gi-violet-100:#EDEEEA;
--gi-red-500:#B5540E;--gi-red-100:#FBEFE4;
--status-success:#B5540E;--status-success-soft:#FBEFE4;
--status-warning:#B5540E;--status-warning-soft:#FBEFE4;
--status-danger:#8A3B06;--status-danger-soft:#FBEFE4;
--status-featured:#393939;--status-featured-soft:#EDEEEA;
--status-info:#5E6870;--status-info-soft:#EDEEEA;
--text-link:#B5540E;
}
/* small / UI-scale orange text uses the darker in-palette orange (4.95:1); #F37A1F stays for display accents and fills */
.eyebrow,.cap .n,.tile .n,.svc-list .num,.svc-list [aria-selected="true"] .num,.work-more .m,.story li.on .num,.proc .eyebrow,.link-arrow,.marklink,.res-n em,.counter.on,.svc-kicker b,.rail [aria-current="step"] .n,.rail [aria-current="step"] .t,.rail button[data-done="1"] .n{color:#B5540E}
.svc-kicker b{border-bottom-color:#B5540E}
.nav a:hover,.nav button.navlink:hover,.nav [aria-expanded="true"],.nav a[aria-current="page"],.mega li a:hover,.foot ul a:hover,.svc-all:hover,.work-more a:hover b{color:#B5540E}
a{color:#B5540E}a:hover{color:#8A3B06}
.stars{color:#B5540E}
.svc-corner{color:var(--text-body)}
.accent{color:#F37A1F}
/* filled controls: white on #B5540E = 4.95:1 */
.btn-primary,.news button{background:#B5540E}
.btn-primary:hover,.news button:hover{background:#8A3B06;box-shadow:0 8px 20px rgba(181,84,14,.28)}
.btn-primary:active{background:#6E2F04}
.btn-secondary{border-color:#B5540E;color:#B5540E}
.btn-secondary:hover{background:#FBEFE4;color:#8A3B06}
.tick,.benefits .i-check,.form-card .btn,.orb{background:#B5540E}
.orb:hover{background:#8A3B06}
.play{background:#FBEFE4;color:#B5540E}
.tm-dots [aria-current="true"]{background:#B5540E}
.prog i,.story .bar::after{background:#B5540E}
.rail::after,.rail button[data-done="1"]::after{background:#B5540E}
.rail [aria-current="step"] .disc{border-color:#B5540E;box-shadow:0 0 0 6px rgba(181,84,14,.14),0 10px 22px -12px rgba(181,84,14,.5)}
.rail button[data-done="1"] .disc{border-color:#B5540E}
.marklink::after{background:#F37A1F}
.eyebrow-rule::before{background:#B5540E}
.caret{background:#B5540E}

/* foregrounds on the tinted #FDEEE2 row need the darkest in-palette orange */
.svc-list [aria-selected="true"],.svc-list [aria-selected="true"] .name,.svc-list [aria-selected="true"] .num{color:#8A3B06}
.svc-list [aria-selected="true"] .arw{background:#B5540E;color:#fff}

.proc-nav{display:none!important}

/* results figures: smaller */
.res-n{font-size:clamp(27px,2.9vw,40px)}

/* ===== capabilities: numbered editorial row (restyle) ===== */
.caps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;margin-top:var(--space-12);border-top:1px solid var(--border-default)}
.cap{position:relative;background:none;border:0;border-radius:0;box-shadow:none;padding:var(--space-8) var(--space-6) var(--space-8) 0;transform:none;transition:none}
.cap:hover{background:none;border-color:transparent;box-shadow:none;transform:none}
.cap+.cap{border-left:1px solid var(--border-default);padding-left:var(--space-6)}
.cap::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:#B5540E;transform:scaleX(0);transform-origin:0 50%;transition:transform .45s var(--ease-out)}
.cap:hover::before{transform:scaleX(1)}
.cap .n{order:-1;margin:0 0 var(--space-5);font-size:12px;font-weight:var(--weight-bold);color:var(--text-muted);letter-spacing:.14em;font-variant-numeric:tabular-nums;transition:color var(--dur-base)}
.cap:hover .n{color:#B5540E}
.cap img{width:44px;height:44px;border-radius:12px;background:none;transition:transform var(--dur-base) var(--ease-out)}
.cap:hover img{transform:translateY(-3px)}
.cap h3{font-size:19px;font-weight:var(--weight-extrabold);letter-spacing:-.02em;margin:var(--space-5) 0 8px;color:var(--text-heading)}
.cap p{margin:0;font-size:14px;color:var(--text-body);line-height:1.55;max-width:22ch}
.cap>*{display:block}
.cap{display:flex;flex-direction:column;align-items:flex-start}
@media (max-width:1100px){
.caps{grid-template-columns:repeat(2,minmax(0,1fr))}
.cap{padding:var(--space-6) var(--space-5) var(--space-6) 0}
.cap+.cap{padding-left:var(--space-5)}
.cap:nth-child(odd){border-left:0;padding-left:0}
.cap:nth-child(n+3){border-top:1px solid var(--border-default)}
}
@media (max-width:640px){
.caps{grid-template-columns:minmax(0,1fr)}
.cap,.cap+.cap{padding:var(--space-6) 0 var(--space-6) 0;border-left:0}
.cap+.cap{border-top:1px solid var(--border-default)}
.cap p{max-width:none}
}

/* ===== selected work: restyle + character ===== */
.work-feat{align-items:stretch;gap:var(--space-12)}
.work-feat>div:first-child{display:flex;flex-direction:column;justify-content:center}
.work-feat .eyebrow{margin-bottom:var(--space-4)}
.work-feat h3{font-size:clamp(26px,2.7vw,34px)!important;letter-spacing:-.03em}
.work-metrics{gap:0!important;margin:var(--space-8) 0!important;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--border-default);border-bottom:1px solid var(--border-default)}
.work-metrics>div{padding:var(--space-5) var(--space-5) var(--space-5) 0}
.work-metrics>div+div{padding-left:var(--space-5);border-left:1px solid var(--border-default)}
.work-metrics .stat-n{font-size:26px!important;color:#B5540E!important}
.work-metrics .stat-l{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}
/* stage */
.shot{padding:var(--space-8) var(--space-8) 0;background:var(--surface-soft);border:1px solid var(--border-default);display:flex;align-items:flex-end;min-height:440px;overflow:hidden}
.shot::before{content:"";position:absolute;left:0;right:0;bottom:0;height:34%;background:linear-gradient(180deg,rgba(243,122,31,0),rgba(243,122,31,.10))}
.shot .browser{position:relative;z-index:1;width:100%;margin-bottom:-24px;box-shadow:0 30px 60px -28px rgba(57,57,57,.40)}
.shot .phone{right:16%;bottom:0;width:20%;z-index:3;border-width:5px;box-shadow:0 26px 44px -20px rgba(57,57,57,.45)}
.work-actor{position:absolute;right:3%;bottom:0;height:56%;width:auto;max-width:22%;object-fit:contain;object-position:bottom right;z-index:2;filter:drop-shadow(0 24px 28px rgba(57,57,57,.22))}
@media (max-width:1100px){
.shot{min-height:360px}
.work-actor{height:46%;right:3%;max-width:24%}
.shot .phone{right:22%;width:24%}
}
@media (max-width:640px){
.work-metrics{grid-template-columns:minmax(0,1fr)}
.work-metrics>div{padding:var(--space-4) 0}
.work-metrics>div+div{padding-left:0;border-left:0;border-top:1px solid var(--border-default)}
.work-actor{display:none}
.shot .phone{right:8%;width:30%}
}

/* service hero: move the floating card off the character's head */
.sp-hero .stage .mini:not(:last-child){left:auto!important;right:7%!important;top:15%!important}
.sp-hero .stage .actor{left:2%!important;transform:none!important}
/* selected work: character stands clear of the phone mock, in front of the browser */
.work-actor{right:1%;height:52%;max-width:20%}
.shot .phone{right:26%}
@media (max-width:1100px){
.work-actor{right:1%;height:44%;max-width:22%}
.shot .phone{right:30%;width:22%}
}
@media (max-width:640px){
.shot .phone{right:8%;width:30%}
}