:root{--graphite:#20262c;--ink:#101418;--paper:#ffffff;--white:#fff;--cobalt:#3979D2;--brass:#A58B57;--muted:#687078;--line:#d8d8d4;--max:1160px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:var(--paper);line-height:1.55}a{color:inherit}.wrap{width:min(calc(100% - 40px),var(--max));margin:auto}.nav{position:sticky;top:0;z-index:20;background:rgba(11,13,16,.96);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}.navin{height:76px;display:flex;align-items:center;gap:28px}.logo img{height:31px;width:auto;display:block}.links{margin-left:auto;display:flex;gap:22px;align-items:center;font-size:14px}.links a{text-decoration:none}.links .cta,.btn{background:var(--graphite);color:white;padding:12px 16px;text-decoration:none;display:inline-block}.menu{display:none;margin-left:auto;background:none;border:0;font-size:26px}.hero{padding:110px 0 86px;border-bottom:1px solid var(--line)}.eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--cobalt)}h1,h2,h3{font-family:Georgia,'Times New Roman',serif;font-weight:500;line-height:1.05;margin:0}h1{font-size:clamp(48px,8vw,92px);max-width:950px}h2{font-size:clamp(34px,5vw,58px)}h3{font-size:28px}.lead{font-size:21px;max-width:760px;color:#333}.section{padding:82px 0}.grid2{display:grid;grid-template-columns:1.05fr .95fr;gap:70px;align-items:start}.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:36px}.card{border:1px solid var(--line);background:#fff;padding:28px;min-height:210px;text-decoration:none;display:block}.card:hover{border-color:var(--cobalt)}.num{font-size:12px;color:var(--cobalt);font-weight:700}.card p{color:var(--muted)}.band{background:var(--graphite);color:#fff}.band .muted{color:#c5cbd0}.proof{border-left:4px solid var(--brass);padding-left:22px}.questions{display:grid;gap:12px;margin-top:28px}.q{background:#fff;border:1px solid var(--line);padding:22px}.q strong{display:block;margin-bottom:6px}.ctaBand{background:var(--cobalt);color:#fff;padding:62px 0}.ctaBand .btn{background:#fff;color:var(--ink)}.footer{background:#11161a;color:#d9dde0;padding:56px 0}.footgrid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:40px}.footer a{color:#fff;text-decoration:none;display:block;margin:8px 0}.small{font-size:13px;color:#9ea6ad}.storyimg{width:100%;max-width:430px;display:block}.form{display:grid;gap:14px}.field label{display:block;font-size:13px;font-weight:700;margin-bottom:6px}.field input,.field textarea,.field select{width:100%;padding:13px;border:1px solid #bfc4c8;background:white;font:inherit}.field textarea{min-height:140px}.privacy-note{font-size:12px;color:var(--muted)}
@media(max-width:850px){.grid2,.footgrid{grid-template-columns:1fr}.cards{grid-template-columns:1fr}.links{display:none;position:absolute;left:0;right:0;top:76px;background:var(--paper);padding:20px;border-bottom:1px solid var(--line);flex-direction:column;align-items:flex-start}.links.open{display:flex}.menu{display:block}.hero{padding-top:72px}.section{padding:62px 0}}

/* EDITORIAL HERO EXPLORATION – independent from the original brand logo asset. */
:root {--ink:#0c0f12;--graphite:#171b20;--brass:#A58B57;--cobalt:#3979D2;--paper:#fff}
.nav {background:#0c0f12;border-bottom:1px solid rgba(255,255,255,.15);color:#fff}
.nav .links a{color:#fff}.nav .links .cta{border:1px solid var(--brass);background:transparent;color:#fff;transition:background .25s}.nav .links .cta:hover{background:var(--brass);color:#0d0e12}
.nav .menu{color:#fff}.nav .logo img{height:31px;max-width:240px;width:auto}
.links a:hover {color:#A58B57}
body{background:#fff}
.hero-editorial {position:relative;min-height:650px;padding:0;border-bottom:0;background:#0b0d10;color:#fff;isolation:isolate;overflow:hidden}
.hero-scenes {position:relative;min-height:650px}
.hero-scene {position:absolute;inset:0;display:grid;align-items:stretch;pointer-events:none;opacity:0;visibility:hidden;transition:opacity 850ms ease, visibility 850ms;overflow:hidden}
.hero-scene.is-active{position:relative;min-height:650px;opacity:1;visibility:visible;pointer-events:auto;z-index:2}
.hero-scenery,.hero-wash,.hero-art{position:absolute;inset:0;pointer-events:none}
.hero-scenery{background-position:center right;background-size:cover;transform:scale(1.07);transition:transform 8.2s ease-out;opacity:.72}
.hero-scene.is-active .hero-scenery{transform:scale(1)}
.hero-scene--opportunity .hero-scenery {background-image:linear-gradient(105deg,rgba(9,12,15,.05),rgba(9,12,15,.32)),url('https://images.pexels.com/photos/34718930/pexels-photo-34718930/free-photo-of-industrial-factory-interior-with-conveyor.jpeg?auto=compress&fit=crop&w=1800&q=82');background-color:#1b2830}
.hero-scene--compete .hero-scenery {background-image:linear-gradient(100deg,rgba(6,9,12,.1),rgba(6,9,12,.34)),url('https://images.pexels.com/photos/38804512/pexels-photo-38804512/free-photo-of-modern-industrial-production-facility-interior.jpeg?auto=compress&fit=crop&w=1800&q=82');background-color:#253039;filter:saturate(.65)}
.hero-scene--scale .hero-scenery {background:radial-gradient(ellipse at 80% 50%,#122856 0%,#0d1829 28%,#080b0f 73%);opacity:1}
.hero-wash{background:linear-gradient(90deg,rgba(5,7,9,.99) 0%,rgba(7,10,14,.95) 26%,rgba(8,11,16,.83) 49%,rgba(8,11,16,.23) 85%),linear-gradient(0deg,rgba(7,8,10,.65) 0%,transparent 26%)}
.hero-scene--scale .hero-wash{background:linear-gradient(90deg,rgba(5,7,9,.96),rgba(7,12,19,.8) 53%,rgba(7,12,19,.05))}
.hero-scene-inner{min-height:650px;display:flex;align-items:center;position:relative;z-index:4;padding-top:55px;padding-bottom:110px}
.hero-copy{max-width:800px}
.hero-editorial .eyebrow{font-size:12px;letter-spacing:.28em;color:#A58B57;font-weight:700;margin-bottom:30px}
.hero-editorial h1,.hero-editorial h2{font-family:'DejaVu Serif',Georgia,'Times New Roman',serif;color:#fff;max-width:820px;font-size:clamp(45px,5.5vw,83px);font-weight:400;line-height:1.07;letter-spacing:-.046em}
.hero-editorial em{font-style:normal;color:#A58B57}
.hero-editorial .hero-description{font-size:clamp(17px,1.8vw,21px);line-height:1.5;color:#e2e5e8;max-width:590px;margin-top:30px;margin-bottom:32px}
.hero-link{font-family:Arial,Helvetica,sans-serif;color:#fff;text-decoration:none;text-transform:uppercase;letter-spacing:.17em;font-size:12px;font-weight:700;display:inline-flex;align-items:center;gap:18px;border-bottom:1px solid var(--brass);padding-bottom:11px;transition:gap .25s}
.hero-link:hover{gap:27px}.hero-link span{font-size:21px;color:var(--brass);font-weight:400;line-height:.8}
.hero-copy>* {opacity:0;transform:translateY(22px);transition:opacity 730ms ease,transform 730ms ease}
.hero-scene.is-active .hero-copy>*{opacity:1;transform:translateY(0)}
.hero-scene.is-active .hero-copy h1,.hero-scene.is-active .hero-copy h2{transition-delay:110ms}
.hero-scene.is-active .hero-description{transition-delay:215ms}
.hero-scene.is-active .hero-link{transition-delay:310ms}
.hero-bottom{position:absolute;z-index:7;left:0;right:0;bottom:28px;display:flex;justify-content:space-between;align-items:end;gap:25px}
.hero-signature{font-size:11px;letter-spacing:.20em;font-weight:700;color:#f2f3f4}.hero-signature span{color:#A58B57}
.hero-navigation{display:flex;align-items:center;gap:24px}.hero-slide-buttons{display:flex;gap:10px;align-items:end}
.hero-step{border:0;padding:10px 5px;background:transparent;color:#b3b9c0;cursor:pointer;text-align:left;font:600 12px Arial,sans-serif;letter-spacing:.08em;width:56px}
.hero-step span{display:block;margin-bottom:9px}.hero-step i{display:block;height:2px;background:rgba(255,255,255,.35);position:relative;overflow:hidden}
.hero-step.is-active{color:#fff}.hero-step.is-active i:after{content:"";position:absolute;inset:0;background:#A58B57;transform-origin:left;animation:hero-progress 7s linear forwards}
.hero-editorial.is-paused .hero-step.is-active i:after{animation-play-state:paused}
@keyframes hero-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.hero-play-pause{background:transparent;border:1px solid rgba(255,255,255,.4);color:#fff;cursor:pointer;padding:10px 12px;font:600 11px Arial,sans-serif;letter-spacing:.1em;min-width:65px;min-height:42px}
.hero-play-pause:hover{border-color:#A58B57;color:#A58B57}
.hero-art{z-index:1;opacity:.88;overflow:hidden}
.hero-orb{position:absolute;width:min(36vw,480px);aspect-ratio:1;border-radius:50%;right:-4vw;top:8%;background:radial-gradient(circle at 26% 24%,#3979D2,#3979D2 45%,#2C62AD 75%,#242A30);box-shadow:-28px 36px 110px rgba(0,0,0,.35);mix-blend-mode:screen;animation:hero-float 10s ease-in-out infinite alternate;opacity:.7}
.hero-orbit-a,.hero-orbit-b{position:absolute;border:1px solid rgba(200,161,104,.6);border-radius:50%;width:clamp(340px,48vw,680px);height:clamp(340px,48vw,680px);right:-8vw;top:-5%;transform:rotate(-25deg) scaleY(.7)}
.hero-orbit-b{width:clamp(390px,54vw,740px);height:clamp(390px,54vw,740px);right:-8vw;top:-10%;transform:rotate(22deg) scaleY(.7);border-color:rgba(200,161,104,.3)}
.hero-slab{position:absolute;right:5%;top:2%;width:19vw;max-width:310px;height:120%;background:linear-gradient(105deg,rgba(22,91,210,.58),rgba(19,41,104,.12));transform:skewX(-21deg);box-shadow:0 0 0 1px rgba(195,156,101,.3)}
.hero-cutline{position:absolute;right:23%;top:-25%;height:140%;border-left:2px solid rgba(202,159,96,.8);transform:rotate(19deg)}
.hero-art--scale .scale-sphere{position:absolute;width:clamp(55px,6.5vw,105px);aspect-ratio:1;right:15%;top:28%;border-radius:50%;background:radial-gradient(circle at 27% 25%,#3979D2,#3979D2 50%,#163f96);box-shadow:0 15px 60px rgba(0,0,0,.28)}
.hero-art--scale .s2{right:26%;top:28%;filter:grayscale(1);opacity:.9}.hero-art--scale .s3{right:26%;top:48%;filter:grayscale(1);opacity:.9}.hero-art--scale .s4{right:15%;top:48%;filter:grayscale(1);opacity:.9}
.hero-art--scale .scale-rule{position:absolute;height:1px;width:60%;top:68%;right:-8%;background:linear-gradient(90deg,transparent,#A58B57)}
@keyframes hero-float{from{transform:translate3d(0,0,0)}to{transform:translate3d(-20px,18px,0)}}
@media(min-width:851px){.hero-scene--opportunity .hero-scenery{background-position:center right}.hero-scene--compete .hero-scenery{background-position:center right}}
@media(max-width:850px){.nav .links{background:#0c0f12}.hero-editorial,.hero-scenes,.hero-scene.is-active,.hero-scene-inner{min-height:620px}.hero-scene-inner{padding-top:75px;padding-bottom:120px}.hero-orb{width:70vw;right:-28vw;top:19%;opacity:.34}.hero-orbit-a,.hero-orbit-b{right:-46vw;opacity:.5}.hero-scenery{background-position:62% 50%}.hero-wash{background:linear-gradient(90deg,rgba(5,7,10,.95),rgba(5,7,10,.69) 67%,rgba(5,7,10,.28))}.hero-bottom{bottom:20px}.hero-signature{max-width:170px;line-height:1.6}.hero-editorial h1,.hero-editorial h2{font-size:clamp(41px,9vw,67px)}.hero-editorial .hero-description{font-size:17px;max-width:520px}}
@media(max-width:500px){.hero-editorial,.hero-scenes,.hero-scene.is-active,.hero-scene-inner{min-height:700px}.hero-scene-inner{padding-top:85px;padding-bottom:150px}.hero-editorial .eyebrow{margin-bottom:21px}.hero-editorial h1,.hero-editorial h2{font-size:clamp(37px,10.2vw,49px)}.hero-editorial .hero-description{margin:25px 0}.hero-bottom{align-items:end;flex-direction:column-reverse;gap:14px}.hero-navigation{width:100%;justify-content:space-between}.hero-signature{max-width:none;align-self:start;font-size:9px}.hero-step{width:52px}}
@media(prefers-reduced-motion:reduce){.hero-scenery,.hero-copy>*,.hero-scene,.hero-orb{animation:none!important;transition:none!important;transform:none!important}.hero-step.is-active i:after{animation:none;transform:scaleX(1)}}
/* The warmth comes from BRASS accents, never from beige surfaces. */
.section[style*="background"]{background:#fff!important}
.card{transition:border-color .25s,transform .3s;border-color:#cdd0d1}.card:hover{transform:translateY(-3px);border-color:var(--brass)}
.section .eyebrow{color:#8d6636}.section .btn{background:#101419;color:#fff}.section .btn:hover{background:#A58B57;color:#101419}
.band{background:#101419}.band .card{background:#171d22;border-color:#3c4146;color:#fff}.band .card p{color:#d5dae0}.band .card:hover{border-color:#A58B57}
@media(max-width:850px){.nav .links a{color:#fff}}

/* REFINEMENT V2 — deeper positioning logic, reduced brass, tighter symbol, clearer page narrative. */
.nav .logo img{height:40px;max-width:none}
.navin{height:84px}
.nav .links .cta{border-color:rgba(255,255,255,.46)}
.nav .links .cta:hover{background:#3979D2;border-color:#3979D2;color:#fff}
.nav .links a:hover{color:#fff;text-decoration:underline;text-decoration-color:#3979D2;text-underline-offset:7px}
.hero-editorial .eyebrow{color:#A58B57}
.hero-editorial em{color:#fff}
.hero-link{border-bottom-color:rgba(255,255,255,.55)}
.hero-link span{color:#fff}
.hero-signature span{color:#A58B57}
.hero-step.is-active i:after{background:#3979D2}
.hero-play-pause:hover{border-color:#A58B57;color:#fff}
.hero-orb{right:2%;top:14%;width:min(31vw,435px);opacity:.83;mix-blend-mode:screen}
.hero-orb-purpose{position:absolute;right:4%;top:85%;color:rgba(255,255,255,.74);font:700 10px Arial,Helvetica,sans-serif;letter-spacing:.19em;text-align:right;max-width:430px}
.hero-slab{box-shadow:none;background:linear-gradient(105deg,rgba(22,91,210,.48),rgba(19,41,104,.05))}
.hero-art--scale .scale-flat-mark{position:absolute;top:28%;right:9%;display:grid;grid-template-columns:repeat(2,90px);grid-template-rows:repeat(2,90px);gap:17px;transform:rotate(0);opacity:.94}
.hero-art--scale .scale-flat-dot{position:static;display:block;width:90px;height:90px;aspect-ratio:1;border-radius:50%;background:#c3c9d1;filter:none;box-shadow:none;opacity:1;transform:none}
.hero-art--scale .scale-flat-dot.dot-cobalt{background:#3979D2;transform:translate(11px,-11px)}
.hero-art--scale .scale-flat-dot.bottom-left{background:#e5e9ec}
.hero-art--scale .scale-flat-dot.bottom-right{background:#9ea8b2}
.hero-scene--scale .hero-copy{max-width:660px}
.section .eyebrow{color:#3979D2}
.card:hover{border-color:#3979D2}
.section .btn:hover{background:#3979D2;color:#fff}
.band .card:hover{border-color:#3979D2}
.calculator-section{background:#f6f8fb;border-top:1px solid #dce1e7;border-bottom:1px solid #dce1e7}
.calculator-section .btn{background:#3979D2}
@media(max-width:850px){.navin{height:82px}.nav .logo img{height:38px}.nav .links{top:82px}.hero-orb{width:62vw;right:-28vw;top:22%;opacity:.32}.hero-orb-purpose{display:none}.hero-art--scale .scale-flat-mark{top:30%;right:-2%;grid-template-columns:repeat(2,62px);grid-template-rows:repeat(2,62px);gap:12px;opacity:.46}.hero-art--scale .scale-flat-dot{width:62px;height:62px}}
@media(max-width:500px){.nav .logo img{height:35px}.hero-art--scale .scale-flat-mark{right:-5%;top:34%;opacity:.22}}

/* HOMEPAGE HOW WE WORK – EDITORIAL JOURNEY CONCEPT (v1).
   No additional card or keyline boxes. Four steps leading to a business outcome.
   This stylesheet affects only the homepage infographic, not the brand logo. */
.pi-process{background:#0b0f13;color:#f6f8fa;padding:100px 0 105px;overflow:hidden}
.pi-process .eyebrow{color:#A58B57;letter-spacing:.23em;margin:0 0 21px;font-size:12px}
.pi-process-top{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(270px,.75fr);gap:70px;align-items:end}
.pi-process h2{font-family:'DejaVu Serif',Georgia,serif;font-weight:400;line-height:1.06;letter-spacing:-.042em;font-size:clamp(45px,5vw,70px);color:#fff}
.pi-process-intro{padding-bottom:6px}
.pi-process-intro p{font-size:19px;line-height:1.55;color:#d3d9de;max-width:390px;margin:0 0 25px}
.pi-process-link{color:#f8fbff;font-size:12px;letter-spacing:.13em;text-transform:uppercase;font-weight:700;text-decoration:none;display:inline-flex;gap:18px;border-bottom:1px solid #3979D2;padding-bottom:12px}
.pi-process-link span{color:#A58B57;font-size:19px;line-height:1}
.pi-process-link:focus-visible{outline:2px solid #A58B57;outline-offset:6px}
.pi-process-diagram{margin-top:83px}
.pi-process-origin{font:700 11px Arial,Helvetica,sans-serif;letter-spacing:.23em;color:#A58B57;margin-bottom:23px}
.pi-process-origin span{margin-left:12px;font-size:19px;letter-spacing:0;vertical-align:middle;color:#A58B57}
.pi-process-stages{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;position:relative}
.pi-process-stages::before{content:'';position:absolute;left:35px;right:calc(12.5% - 11px);top:35px;height:2px;background:linear-gradient(90deg,#3979D2,#A58B57 72%,#A58B57);opacity:.65;z-index:0}
.pi-process-stages::after{content:'';position:absolute;left:35px;top:35px;height:2px;width:14%;max-width:175px;background:linear-gradient(90deg,transparent,#3979D2,transparent);filter:blur(.35px);opacity:.8;z-index:0;animation:pi-process-travel 8s ease-in-out infinite}
.pi-process-stage{position:relative;z-index:1;min-width:0}
.pi-process-stepnum{display:grid;place-items:center;width:72px;height:72px;border:2px solid #3979D2;border-radius:50%;background:#0b0f13;color:#A58B57;font:700 18px Arial,Helvetica,sans-serif;letter-spacing:.015em;transition:border-color .25s ease,background .25s ease,color .25s ease,transform .25s ease}
.pi-process-stage:hover .pi-process-stepnum{background:#3979D2;border-color:#3979D2;color:#fff;transform:scale(1.04)}
.pi-process-stagecopy{margin-top:34px;padding-right:4px}
.pi-process h3{font-family:'DejaVu Serif',Georgia,serif;font-size:clamp(29px,2.4vw,40px);font-weight:400;letter-spacing:-.045em;line-height:1.17;color:#fff;margin:0 0 17px}
.pi-process-dot{color:#A58B57}
.pi-process-stage p{color:#c8cfd5;font-size:15px;line-height:1.66;max-width:225px;margin:0}
.pi-process-outcome{position:relative;display:grid;grid-template-columns:140px minmax(0,.95fr) minmax(0,.75fr);gap:30px;align-items:center;margin-top:70px;border-top:1px solid #3c4650;padding:31px 0 0}
.pi-process-outcome-art{height:122px;display:flex;justify-content:center;align-items:center}
.pi-process-orb{width:114px;height:114px;border-radius:50%;background:radial-gradient(circle at 28% 23%,#81bcff 0%,#3e86ee 21%,#3979D2 46%,#12449e 74%,#0a2553 100%);box-shadow:inset -10px -13px 25px rgba(0,0,0,.18),0 0 30px rgba(40,108,223,.12);animation:pi-process-orb-breathe 6s ease-in-out infinite}
.pi-process-outcome-label span{display:block;color:#A58B57;font:700 11px Arial,Helvetica,sans-serif;letter-spacing:.19em;margin-bottom:12px}
.pi-process-outcome-label strong{font-family:'DejaVu Serif',Georgia,serif;font-weight:400;font-size:clamp(27px,3.1vw,42px);line-height:1.12;letter-spacing:-.045em;color:#fff}
.pi-process-outcome>p{font-size:17px;color:#c8cfd5;line-height:1.5;max-width:300px;border-left:2px solid #A58B57;padding-left:22px;margin:0 0 0 auto}
@keyframes pi-process-travel{0%{transform:translateX(0);opacity:0}15%{opacity:.85}85%{opacity:.85}100%{transform:translateX(620%);opacity:0}}
@keyframes pi-process-orb-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
@media(max-width:900px){
 .pi-process-top{grid-template-columns:1fr;gap:22px}.pi-process-intro p{max-width:690px}.pi-process-diagram{margin-top:55px}
 .pi-process-stages{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:44px}
 .pi-process-stages::before,.pi-process-stages::after{display:none}
 .pi-process-stage{border-top:1px solid #405067;padding-top:25px}
 .pi-process-stagecopy{margin-top:19px}.pi-process-stage p{max-width:290px}
 .pi-process-outcome{grid-template-columns:105px minmax(0,1fr);gap:17px}
 .pi-process-outcome-art{height:105px}.pi-process-orb{width:92px;height:92px}
 .pi-process-outcome>p{grid-column:2;margin:0;padding-left:0;border:0;max-width:500px}
}
@media(max-width:560px){
 .pi-process{padding:68px 0 76px}.pi-process h2{font-size:clamp(37px,10vw,52px)}.pi-process-intro p{font-size:17px}
 .pi-process-diagram{margin-top:41px}.pi-process-stages{grid-template-columns:1fr;gap:0}
 .pi-process-stage{display:grid;grid-template-columns:61px minmax(0,1fr);gap:20px;padding:0 0 29px;border:0}
 .pi-process-stage:not(:last-child)::after{content:'';position:absolute;left:29px;top:60px;bottom:0;width:1px;background:#A58B57}
 .pi-process-stepnum{width:60px;height:60px;font-size:15px}
 .pi-process-stagecopy{margin:4px 0 0}.pi-process h3{font-size:30px;margin:0 0 10px}
 .pi-process-stage p{font-size:14px;line-height:1.55;max-width:360px}
 .pi-process-outcome{margin-top:12px;grid-template-columns:83px 1fr;gap:8px 18px;padding-top:23px}
 .pi-process-outcome-art{height:85px}.pi-process-orb{width:75px;height:75px}
 .pi-process-outcome-label strong{font-size:clamp(24px,6vw,34px)}.pi-process-outcome>p{font-size:15px}
}
@media(prefers-reduced-motion:reduce){.pi-process-orb,.pi-process-stages::after{animation:none!important}.pi-process-stepnum{transition:none!important}}

/* FINAL EDITORIAL REVIEW PASS — SITE REVISION 4 */
:root{--graphite:#242A30;--ink:#242A30;--cobalt:#3979D2;--brass:#A58B57;--paper:#FFFFFF;--white:#FFFFFF}
.nav{background:#242A30;border-color:rgba(255,255,255,.14)}
.navin{height:110px;gap:16px}
.nav .logo img{height:80px;max-width:none;width:auto;object-fit:contain}
.nav .links{gap:14px;font-size:12px;letter-spacing:-.01em}
.nav .links .cta{white-space:nowrap;padding:11px 13px;border:1px solid rgba(255,255,255,.32)}
.nav .links .cta:hover{border-color:var(--cobalt);background:var(--cobalt);color:#fff}
.footer img{max-height:none;filter:none!important}
.footer .footgrid img{filter:none!important}
.hero-editorial .eyebrow{color:#A58B57}
.hero-editorial h1,.hero-editorial h2{font-size:clamp(45px,4.55vw,69px);max-width:760px;line-height:1.09}
.hero-editorial em{color:#fff;font-style:normal}
.hero-editorial .hero-description{font-size:clamp(17px,1.5vw,20px)}
.hero-link{border-bottom:1px solid rgba(165,139,87,.7);gap:12px}
.hero-link span,.pi-process-link span{font-family:Arial,Helvetica,sans-serif;display:inline-block;color:#3979D2!important;font-weight:900!important;font-size:30px!important;line-height:.7;letter-spacing:-.07em;transition:transform .23s ease}
.hero-link:hover span,.pi-process-link:hover span{transform:translate(4px,-4px)}
.hero-step.is-active i:after{background:var(--cobalt)}
.hero-scene--opportunity .hero-scenery{background-image:url('door-window-factory.jpg');background-position:center right;background-color:#1e242b;opacity:.95}
.hero-scene--compete .hero-scenery{background-image:url('https://commons.wikimedia.org/wiki/Special:FilePath/Injection_Molding_Machine_with_a_robot_arm.jpg');background-position:center right;background-color:#1e242b;filter:saturate(.65) contrast(1.07);opacity:.85}
.hero-orb{background:#3979D2!important;box-shadow:none!important;filter:none!important;mix-blend-mode:normal!important;opacity:.36;animation:none!important;width:min(17vw,250px);right:11%;top:48%}
.hero-slab{background:#3979D2;opacity:.12;box-shadow:none!important}
.hero-scene--scale .hero-wash{background:linear-gradient(90deg,rgba(5,7,9,.98),rgba(7,11,15,.92) 46%,rgba(7,12,19,.22) 92%)}
.hero-art--calculator{display:flex;align-items:center;justify-content:flex-end;padding:9% 6% 9% 57%}
.hero-calculator-frame{width:100%;max-width:565px;padding:11px;background:#fff;border:1px solid rgba(165,139,87,.55);box-shadow:0 24px 70px rgba(0,0,0,.35);transform:rotate(-2deg)}
.hero-calculator-topline{display:flex;justify-content:space-between;gap:8px;align-items:center;color:#242A30;letter-spacing:.13em;text-transform:uppercase;font-size:9px;font-weight:700;border-bottom:1px solid #d9dde0;padding:6px 9px 11px}
.hero-calculator-topline .mini-dots{letter-spacing:.2em;color:#3979D2}
.hero-calculator-frame img{display:block;width:100%;height:265px;object-fit:cover;object-position:top}
.hero-calculator-label{color:#242A30;border-top:1px solid #d9dde0;font-size:11px;padding:10px 8px 4px}
/* Single consolidated business-case and calculator section */
.calculator-section{background:#fff;border-top:1px solid #d7dce1;border-bottom:1px solid #d7dce1}
.calculator-layout{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px;align-items:center}
.calculator-copy h2{font-size:clamp(34px,3.55vw,47px);max-width:610px;line-height:1.12;margin:13px 0 19px}
.calculator-copy h2 span{color:#3979D2}
.calculator-description{font-size:19px;max-width:525px;line-height:1.55;margin:0 0 27px}
.calculator-section .btn{background:#2C62AD;color:#fff;font-size:14px;font-weight:700;padding:14px 20px}
.calculator-section .btn span{font-size:23px;line-height:0;margin-left:15px;font-weight:900}
.calculator-inline-visual{padding:11px 11px 8px;background:#fff;box-shadow:0 18px 45px rgba(0,0,0,.1);border:1px solid #d5dadd}
.calculator-inline-visual img{display:block;width:100%;height:auto;max-height:360px;object-fit:cover;object-position:top}
.calculator-inline-caption{font-size:11px;line-height:1.4;color:#646c73;margin-top:10px;text-align:right}
/* The six detailed How We Help solution pages: question cards immediately under intro, not right of it. */
.question-layout>div:first-child{max-width:900px}
.question-layout>div:first-child h2{font-size:clamp(31px,3.2vw,43px)}
.question-layout>div:first-child p{max-width:700px;margin-top:18px}
.question-layout .questions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;margin-top:32px}
.question-layout .q{border:1px solid #cad0d6;border-left:2px solid #A58B57;background:#fff;padding:25px 26px;min-height:125px;text-align:left}
.question-layout .q strong{font-size:18px;color:#242A30;margin-bottom:9px;font-weight:700;line-height:1.3}
.question-layout .q span{color:#414a53;font-size:16px;line-height:1.5;display:block}
/* Four-stage diagram: flat, on-palette, visually uncluttered */
.pi-process{background:#11161a}
.pi-process h2{font-size:clamp(39px,4.3vw,56px);font-weight:500}
.pi-process .eyebrow,.pi-process-origin,.pi-process-outcome-label span{color:#A58B57}
.pi-process h3{font-size:clamp(26px,2.15vw,35px)}
.pi-process-stepnum{border-color:#3979D2;color:#fff}
.pi-process-stage:hover .pi-process-stepnum{background:#3979D2;border-color:#3979D2}
.pi-process-stages::before{background:linear-gradient(90deg,#3979D2,#A58B57);opacity:.65}
.pi-process-stages::after{display:none}
.pi-process-dot{color:#A58B57}
.pi-process-orb{background:#3979D2!important;box-shadow:none!important;filter:none!important;animation:none!important}
.pi-process-outcome>p{border-color:#A58B57}
/* Editorial hierarchy: preserve clarity, reduce excessive subhead scale */
h1{font-size:clamp(42px,5.4vw,70px)}
.section h2{font-size:clamp(31px,3.7vw,48px);line-height:1.13}
.section h3{font-size:clamp(23px,2.15vw,29px)}
.section .lead{font-size:19px}
.section{padding:73px 0}
.section.pi-process{padding:90px 0}
.section .cards{margin-top:31px}
.section .card{min-height:185px}
@media(max-width:1080px){.nav .logo img{height:65px}.navin{height:92px}.nav .links{gap:10px;font-size:11px}}
@media(max-width:850px){
 .nav .logo img{height:70px}.navin{height:100px}.nav .links{top:100px;background:#242A30}
 .hero-editorial,.hero-scenes,.hero-scene.is-active,.hero-scene-inner{min-height:660px}
 .hero-editorial h1,.hero-editorial h2{font-size:clamp(39px,7.5vw,58px)}
 .hero-art--calculator{padding:31% 5% 12% 40%;opacity:.6}.hero-calculator-frame img{height:180px}
 .calculator-layout{grid-template-columns:1fr;gap:28px}
 .calculator-inline-visual{max-width:560px}
 .pi-process-outcome{margin-top:44px}
}
@media(max-width:600px){
 .nav .logo img{height:60px}.navin{height:88px}.nav .links{top:88px}
 .hero-editorial,.hero-scenes,.hero-scene.is-active,.hero-scene-inner{min-height:650px}
 .hero-editorial h1,.hero-editorial h2{font-size:clamp(36px,9vw,46px);max-width:96%;line-height:1.12}
 .hero-copy{max-width:100%}.hero-scenery{background-position:64% center}
 .hero-description{max-width:90%}.hero-art--calculator{padding:0;align-items:flex-end;justify-content:flex-end;opacity:.23;transform:translate(20%,7%)}
 .hero-calculator-frame{max-width:310px}.hero-calculator-frame img{height:145px}
 .question-layout .questions{grid-template-columns:1fr}
 .section h2{font-size:clamp(29px,7.6vw,38px)}.section h3{font-size:25px}
 .section .lead{font-size:17px}.section{padding:58px 0}
 .pi-process h2{font-size:clamp(36px,9vw,46px)}
 .pi-process-outcome{grid-template-columns:74px 1fr}
 .pi-process-orb{width:65px;height:65px}
}
@media(prefers-reduced-motion:reduce){.hero-calculator-frame,.hero-orb{animation:none!important;transition:none!important}}

/* CONTEXTUAL NAVIGATION — site design revision 5 */
.hero-with-crumbs{padding-top:33px}
.breadcrumb-nav{display:block;margin:0 0 37px;max-width:100%;font-family:Arial,Helvetica,sans-serif}
.breadcrumb-list{display:flex;flex-wrap:wrap;align-items:center;gap:7px 10px;list-style:none;padding:0;margin:0;color:#5e6770;font-size:13px;line-height:1.5;letter-spacing:.005em}
.breadcrumb-item{display:inline-flex;align-items:center;gap:10px;max-width:100%}
.breadcrumb-item + .breadcrumb-item::before{content:'›';font-size:17px;line-height:1;color:#A58B57;font-weight:700}
.breadcrumb-item a{text-decoration:none;color:#3b444d;border-bottom:1px solid transparent;transition:color .18s,border-color .18s}
.breadcrumb-item a:hover,.breadcrumb-item a:focus-visible{color:#2C62AD;border-color:#3979D2}
.breadcrumb-item [aria-current='page']{font-weight:700;color:#242A30}
.case-series-nav{display:flex;align-items:center;gap:20px;flex-wrap:wrap;border-bottom:1px solid #d8dde1;padding:0 0 15px;margin:0 0 40px}
.case-series-label{font-size:11px;letter-spacing:.13em;font-weight:700;text-transform:uppercase;color:#687078;white-space:nowrap}
.case-series-links{display:flex;flex:1 1 auto;flex-wrap:wrap;align-items:center;gap:9px}
.case-series-links a{font-size:12px;line-height:1.3;text-decoration:none;padding:9px 12px;border:1px solid #dce1e5;color:#3f4850;font-weight:700;transition:background .18s,color .18s,border-color .18s}
.case-series-links a:hover,.case-series-links a:focus-visible{border-color:#3979D2;color:#2C62AD}
.case-series-links a[aria-current='page']{background:#242A30;color:#fff;border-color:#242A30}
.contextual-more{background:#f8f9f9;border-top:1px solid #dce1e5;padding:40px 0 67px}
.contextual-more-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;margin-bottom:18px}
.contextual-more-head .eyebrow{font-size:11px;color:#71767b;letter-spacing:.16em}
.all-work-link{color:#2C62AD;text-decoration:none;border-bottom:1px solid #3979D2;padding-bottom:2px;font-size:13px;font-weight:700}
.contextual-more-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.contextual-link{display:flex;align-items:center;gap:18px;text-decoration:none;background:#fff;color:#242A30;border:1px solid #dce1e5;padding:23px;min-height:106px;transition:border-color .2s,background .2s}
.contextual-link--next{justify-content:space-between}
.contextual-link:hover,.contextual-link:focus-visible{border-color:#3979D2;background:#fff}
.contextual-link-copy{display:flex;flex-direction:column;gap:7px}
.contextual-direction{font:700 10px/1.3 Arial,Helvetica,sans-serif;text-transform:uppercase;letter-spacing:.14em;color:#687078}
.contextual-link strong{font:700 18px/1.3 Arial,Helvetica,sans-serif}
.contextual-arrow{display:inline-grid;place-items:center;flex:none;background:#242A30;color:#fff;width:38px;height:38px;font:700 26px/1 Arial,Helvetica,sans-serif}
.contextual-link:hover .contextual-arrow{background:#3979D2}
.breadcrumb-nonhero{padding-top:28px}
@media(max-width:850px){.hero-with-crumbs{padding-top:22px}.breadcrumb-nav{margin-bottom:26px}.case-series-nav{gap:12px;margin-bottom:28px}.case-series-label{width:100%}.contextual-link{min-height:95px;padding:18px}.contextual-link strong{font-size:16px}}
@media(max-width:600px){.breadcrumb-list{font-size:12px;gap:5px 8px}.breadcrumb-item{gap:8px}.breadcrumb-item + .breadcrumb-item::before{font-size:15px}.case-series-links{width:100%;gap:7px}.case-series-links a{font-size:11px;padding:8px 9px}.contextual-more{padding:32px 0 48px}.contextual-more-grid{grid-template-columns:1fr;gap:10px}.contextual-link{padding:16px;min-height:78px}.contextual-more-head{gap:8px}.contextual-arrow{width:34px;height:34px;font-size:24px}}


/* FRONT DOOR FEEDBACK — revision 6 (2026-10-16) */
/* Match the navigation to the black used in the cinematic hero, on desktop and mobile. */
.nav, .nav .links {background-color:#080B0F;}
.nav {border-bottom-color:rgba(255,255,255,.12);}
/* Compact, bold up/right CTA arrows, their tails aligned with the action line. */
.hero-link {gap:11px;align-items:flex-end;max-width:100%;line-height:1.35;}
.hero-link .hero-cta-arrow {width:24px;height:24px;flex:0 0 24px;display:block;margin-bottom:-3px;color:#3979D2;transition:transform .23s ease;}
.hero-link:hover .hero-cta-arrow,.hero-link:focus-visible .hero-cta-arrow {transform:translate(2px,-2px);}
/* Give the third-slide longer approved message room, without crowding its preview. */
.hero-scene--scale .hero-copy {max-width:670px;}
.hero-scene--scale .hero-link {max-width:585px;}
@media (max-width:850px) {
 .nav .links {background:#080B0F;}
 .hero-scene--scale .hero-copy {max-width:98%;}
}
@media (max-width:600px) {
 .hero-editorial .hero-scene--scale, .hero-editorial .hero-scene--scale .hero-scene-inner {min-height:780px;}
 .hero-scene--scale .hero-scene-inner {padding-top:60px;padding-bottom:148px;}
 .hero-scene--scale .hero-copy h2 {font-size:clamp(33px,8.35vw,45px);line-height:1.10;}
 .hero-link {font-size:11px;letter-spacing:.12em;}
 .hero-link .hero-cta-arrow{width:22px;height:22px;flex-basis:22px;}
}


/* HOMEPAGE BANNERS — revision 7 (2026-10-17): original AI-generated imagery approved for use. */
.hero-scene--opportunity .hero-scenery {
 background-image:url('hero-window-manufacturing.webp');
 background-color:#101921;
 background-position:67% center;
 opacity:1;
 filter:saturate(.88) contrast(1.03);
}
.hero-scene--compete .hero-scenery {
 background-image:url('hero-injection-moulding.webp');
 background-color:#0d1721;
 background-position:73% center;
 opacity:1;
 filter:saturate(.84) contrast(1.05);
}
.hero-scene--opportunity .hero-wash,.hero-scene--compete .hero-wash {
 background:linear-gradient(90deg,rgba(5,8,12,.88) 0%,rgba(5,8,12,.80) 30%,rgba(5,8,12,.53) 52%,rgba(5,8,12,.13) 87%),linear-gradient(0deg,rgba(5,7,9,.49),transparent 28%);
}
.hero-scene--opportunity .hero-orb{opacity:.15!important}
.hero-scene--compete .hero-slab{opacity:.07!important}
@media(max-width:850px){
 .hero-scene--opportunity .hero-scenery{background-position:69% center}
 .hero-scene--compete .hero-scenery{background-position:77% center}
 .hero-scene--opportunity .hero-wash,.hero-scene--compete .hero-wash{background:linear-gradient(90deg,rgba(5,8,12,.95) 0%,rgba(5,8,12,.85) 46%,rgba(5,8,12,.47) 100%),linear-gradient(0deg,rgba(5,8,12,.42),transparent 50%)}
}
@media(max-width:600px){
 .hero-scene--opportunity .hero-scenery{background-position:72% center}
 .hero-scene--compete .hero-scenery{background-position:83% center}
 .hero-scene--opportunity .hero-wash,.hero-scene--compete .hero-wash{background:linear-gradient(90deg,rgba(5,8,12,.94),rgba(5,8,12,.74)),linear-gradient(0deg,rgba(5,8,12,.45),transparent 55%)}
}

/* PORTFOLIO EXPANSION — revision 7: real selected-work material */
.work-introduction{margin:0 0 35px;max-width:780px}
.work-introduction p:last-child{font-size:clamp(17px,1.7vw,21px);color:#3c454c;margin:12px 0 0;line-height:1.55}
.selected-work-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:23px}
.work-card{display:block;text-decoration:none;color:var(--ink);border:1px solid #d3d8db;background:#fff;overflow:hidden;transition:transform .23s ease,border-color .23s ease,box-shadow .23s ease}
.work-card:first-child{grid-column:span 2;display:grid;grid-template-columns:1.35fr 1fr;min-height:385px}
.work-card-media{position:relative;display:block;aspect-ratio:16 / 10;overflow:hidden;background:#0f1820}
.work-card:first-child .work-card-media{aspect-ratio:auto;min-height:385px}
.work-card-media img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .5s ease}
.work-card:hover,.work-card:focus-visible{transform:translateY(-3px);border-color:#3979D2;box-shadow:0 12px 24px rgba(0,0,0,.07)}
.work-card:hover img,.work-card:focus-visible img{transform:scale(1.045)}
.work-card-view{position:absolute;right:18px;bottom:18px;background:#0a0f14;color:#fff;padding:11px 14px;font:700 11px Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase}
.work-card-view span{color:#3979D2;font-size:17px;margin-left:8px}
.work-card-info{display:flex;flex-direction:column;justify-content:center;padding:32px}
.work-card-info h2{font-size:clamp(29px,3.2vw,47px);line-height:1.14}
.work-card-heading{display:flex;gap:16px;align-items:start;justify-content:space-between;margin:12px 0}
.work-card-heading>span{font-size:26px;color:#3979D2;flex-shrink:0}
.work-card-info p{font-size:16px;line-height:1.55;color:#59636c;max-width:490px;margin:0}
.work-gallery-section{background:#f5f7f9;border-top:1px solid #e3e6e9;border-bottom:1px solid #e3e6e9}
.work-gallery-header{display:grid;grid-template-columns:1.3fr .7fr;gap:60px;align-items:end;margin-bottom:32px}
.work-gallery-header h2{font-size:clamp(37px,4.4vw,56px);margin-top:14px}
.work-gallery-header>p{color:#4a5157;font-size:16px;margin:0;line-height:1.6}
.work-gallery-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.work-gallery-item{display:block;text-align:left;background:#fff;padding:0;border:1px solid #d4d9de;cursor:pointer;font:inherit;color:inherit;transition:border-color .22s ease,transform .22s ease}
.work-gallery-item:first-child:nth-last-child(3){grid-column:span 2;display:grid;grid-template-columns:1.25fr .75fr}
.work-gallery-item:hover,.work-gallery-item:focus-visible{border-color:#3979D2;transform:translateY(-2px);outline:none}
.work-gallery-item:focus-visible{box-shadow:0 0 0 3px rgba(57,121,210,.24)}
.work-gallery-photo{display:block;background:#101a20;overflow:hidden;aspect-ratio:16 / 10}
.work-gallery-item:first-child:nth-last-child(3) .work-gallery-photo{aspect-ratio:1.85/1}
.work-gallery-photo img{width:100%;height:100%;object-fit:contain;display:block;transition:transform .3s ease;background:#eff2f4}
.work-gallery-item:hover img{transform:scale(1.025)}
.work-gallery-meta{display:flex;flex-direction:column;justify-content:center;padding:19px 23px;gap:9px}
.work-gallery-meta strong{font-family:Georgia,serif;font-size:24px;font-weight:400;line-height:1.2}
.work-gallery-meta>span{font-size:14px;color:#59636c;line-height:1.5}
.work-gallery-meta em{font-style:normal;text-transform:uppercase;letter-spacing:.09em;font-size:11px;font-weight:700;color:#3979D2;margin-top:7px}
.work-gallery-resource{margin:27px 0 0;color:#50575e}
.work-gallery-resource a{color:#175aab;text-underline-offset:3px}
.pi-gallery-dialog{padding:0;border:0;width:min(96vw,1200px);max-width:1200px;max-height:94vh;background:#0a1015;color:white;box-shadow:0 20px 90px #0009}
.pi-gallery-dialog::backdrop{background:rgba(2,4,7,.90)}
.pi-lightbox-bar{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #ffffff2c;padding:14px 21px;letter-spacing:.12em;font:700 11px Arial,sans-serif}
.pi-lightbox-close{border:1px solid #a3a9b3;background:transparent;color:#fff;padding:7px 11px;cursor:pointer;font:inherit}.pi-lightbox-close span{font-size:21px;vertical-align:middle;margin-left:8px}
.pi-lightbox-image-wrap{display:flex;align-items:center;justify-content:center;position:relative;background:#151c21;min-height:min(60vh,700px)}
.pi-lightbox-image{display:block;object-fit:contain;max-width:100%;width:auto;max-height:66vh}
.pi-lightbox-step{position:absolute;top:50%;transform:translateY(-50%);font-size:32px;min-width:46px;min-height:56px;border:1px solid #ffffff77;background:#0a0f14b8;color:white;cursor:pointer;z-index:2}
.pi-lightbox-prev{left:12px}.pi-lightbox-next{right:12px}
.pi-lightbox-caption{display:flex;justify-content:space-between;gap:30px;padding:20px 27px}
.pi-lightbox-title{font-family:Georgia,serif;font-size:23px;font-weight:400}
.pi-lightbox-description{color:#c0c8d0;font-size:14px;line-height:1.45;max-width:850px;margin:7px 0 0}
.pi-lightbox-counter{color:#aab3bd;font-size:12px;flex:0 0 auto}
@media(max-width:850px){.work-card:first-child{display:block}.work-card:first-child .work-card-media{aspect-ratio:16/10;min-height:0}.work-gallery-header{grid-template-columns:1fr;gap:16px}}
@media(max-width:600px){.selected-work-grid,.work-gallery-grid{grid-template-columns:1fr}.work-card:first-child,.work-gallery-item:first-child:nth-last-child(3){grid-column:auto;display:block}.work-gallery-item:first-child:nth-last-child(3) .work-gallery-photo{aspect-ratio:16/10}.work-card-info{padding:25px}.work-card-info h2{font-size:33px}.work-gallery-header h2{font-size:37px}.work-gallery-meta{padding:20px}.pi-lightbox-bar{padding:12px}.pi-lightbox-image-wrap{min-height:250px}.pi-lightbox-image{max-height:61vh}.pi-lightbox-step{min-width:36px;min-height:44px}.pi-lightbox-prev{left:3px}.pi-lightbox-next{right:3px}.pi-lightbox-caption{padding:14px;gap:8px}.pi-lightbox-title{font-size:19px}.pi-lightbox-description{font-size:12px}}
@media(prefers-reduced-motion:reduce){.work-card,.work-card img,.work-gallery-item,.work-gallery-item img{transition:none}}

/* MASTERGRAIN selected work refresh — separate imagery, product, and market proof */
.mastergrain-gallery{margin-top:16px}
.mg-chapter{padding-top:36px;margin-top:28px;border-top:1px solid #d8dde0}
.mg-chapter:first-child{margin-top:0;padding-top:0;border-top:0}
.mg-chapter-head{display:flex;align-items:end;gap:28px;justify-content:space-between;margin:0 0 22px}
.mg-chapter-head h3{font-family:Georgia,serif;font-size:clamp(25px,3vw,38px);line-height:1.15;font-weight:normal;margin:0;text-align:right}
.mg-chapter-head .eyebrow{color:#697078;white-space:nowrap}
.mg-gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
.mg-gallery-grid .work-gallery-item:first-child{grid-column:auto;display:block}
.mg-gallery-grid .work-gallery-photo{aspect-ratio:1.55/1;background:#12191f}
.mg-gallery-grid .work-gallery-photo img{object-fit:cover;background:#12191f}
.mg-brand-grid .work-gallery-photo{aspect-ratio:1.62/1}
.mg-brand-grid .work-gallery-photo img{object-fit:contain}
.mg-door-grid{grid-template-columns:1.15fr .85fr}
.mg-door-grid .mg-portrait{grid-row:span 2}
.mg-door-grid .mg-portrait .work-gallery-photo{aspect-ratio:3/4}
.mg-door-grid .mg-portrait .work-gallery-photo img{object-fit:cover}
.mg-door-grid .mg-landscape .work-gallery-photo{aspect-ratio:1.53/1}
.mg-detail-grid .work-gallery-photo{aspect-ratio:1.6/1}
.mg-detail-grid .mg-detail:first-child .work-gallery-photo img{object-position:center 47%}
.mg-gallery-grid .work-gallery-meta{min-height:132px;padding:18px 20px}
.mg-gallery-grid .work-gallery-meta strong{font-size:clamp(20px,2.2vw,27px)}
.mg-gallery-grid .work-gallery-meta>span{max-width:620px}
.mg-resources{margin-top:54px;padding:35px 0 0;border-top:1px solid #d8dde0}
.mg-resources-intro{max-width:750px;margin-bottom:24px}
.mg-resources-intro h3{font-family:Georgia,serif;font-size:clamp(27px,3.2vw,39px);font-weight:normal;margin:12px 0 15px}
.mg-resources-intro p{color:#50575e;line-height:1.6}
.mg-resources-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.mg-resource-card{display:flex;flex-direction:column;min-width:0;text-decoration:none;color:#242A30;background:white;border:1px solid #d4d9de;transition:border-color .2s,transform .2s}
.mg-resource-card:hover,.mg-resource-card:focus-visible{border-color:#3979d2;transform:translateY(-2px);outline:none}
.mg-resource-photo{background:#151a20;display:block;height:310px;overflow:hidden}
.mg-resource-photo img{display:block;width:100%;height:100%;object-fit:cover}
.mg-resource-card:last-child .mg-resource-photo img{object-fit:contain;background:#202020}
.mg-resource-info{display:flex;flex-direction:column;gap:9px;padding:22px;flex:1}
.mg-resource-info strong{font-family:Georgia,serif;font-size:25px;font-weight:normal}
.mg-resource-info>span{color:#59636c;line-height:1.5;font-size:14px}
.mg-resource-info em{font-style:normal;color:#3979d2;font-size:11px;letter-spacing:.09em;font-weight:700;text-transform:uppercase;margin-top:auto;padding-top:12px}
@media(max-width:760px){
 .mg-chapter-head{align-items:start;flex-direction:column;gap:10px}
 .mg-chapter-head h3{text-align:left}
 .mg-gallery-grid,.mg-door-grid,.mg-resources-grid{grid-template-columns:1fr}
 .mg-door-grid .mg-portrait{grid-row:auto}
 .mg-gallery-grid .work-gallery-photo{aspect-ratio:1.5/1}
 .mg-door-grid .mg-portrait .work-gallery-photo{aspect-ratio:4/5}
 .mg-resources{margin-top:32px}
 .mg-resource-photo{height:240px}
}


/* Pre-v9 case portfolio expansion: Husky + JELD-WEN. */
.pi-portfolio-chapter{margin:34px 0 0;padding:33px 0 0;border-top:1px solid #d7dce0}
.pi-portfolio-chapter:first-of-type{border-top:0;padding-top:0;margin-top:0}
.pi-portfolio-chapter-head{display:flex;align-items:end;justify-content:space-between;gap:18px;margin-bottom:23px}
.pi-portfolio-chapter-head .eyebrow{color:#616970;min-width:210px}
.pi-portfolio-chapter-head h3{font-family:Georgia,'Times New Roman',serif;font-size:clamp(26px,3vw,37px);max-width:680px;text-align:right;line-height:1.2}
.pi-portfolio-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.pi-portfolio-grid--three{grid-template-columns:repeat(3,minmax(0,1fr))}
.pi-portfolio-grid--one{grid-template-columns:1fr}
.pi-portfolio-grid .work-gallery-item:first-child:nth-last-child(3){grid-column:auto;display:block}
.pi-portfolio-grid .work-gallery-photo,.pi-portfolio-grid .work-gallery-item:first-child:nth-last-child(3) .work-gallery-photo{aspect-ratio:1.55/1}
.pi-portfolio-grid--three .work-gallery-photo{aspect-ratio:4/3}
.pi-portfolio-grid .work-gallery-photo img{object-fit:cover;background:#f3f4f5}
.pi-portfolio-grid .work-gallery-meta{min-height:148px}
.pi-portfolio-grid .work-gallery-meta strong{font-size:clamp(19px,2vw,25px)}
.pi-portfolio-grid--three .work-gallery-meta{min-height:190px}
.pi-portfolio-grid--portrait .work-gallery-photo{aspect-ratio:4/5;background:#e9eef2}
.pi-portfolio-grid--portrait .work-gallery-photo img{object-fit:contain}
.pi-portfolio-grid--one .work-gallery-photo{aspect-ratio:2.3/1}
.pi-portfolio-grid--one .work-gallery-photo img{object-fit:contain;background:#fff}
.pi-films{padding-bottom:0}
.pi-intro-note{color:#4b555d;margin-top:0;margin-bottom:21px}
.pi-film-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.pi-film-card{border:1px solid #d4d9de;background:#fff;min-width:0}
.pi-film-card video{width:100%;aspect-ratio:16/9;display:block;object-fit:contain;background:#0b1015}
.pi-film-info{padding:17px 20px 22px}.pi-film-info strong{font:normal 23px/1.22 Georgia,serif}
.pi-film-info p{font-size:14px;line-height:1.55;color:#59636c;margin:10px 0 0}
.pi-proof-strip{margin-top:48px;padding:30px;border:1px solid #d8dde1;background:white;display:grid;grid-template-columns:1.1fr 1.25fr .95fr;column-gap:24px;align-items:center}
.pi-proof-strip h3{font-size:30px}.pi-proof-strip p{font-size:14px;line-height:1.55;color:#58616b}
.pi-award-logos{display:flex;align-items:center;justify-content:flex-end;gap:16px}.pi-award{display:grid;gap:6px;text-align:center}.pi-award img{max-width:125px;width:100%;height:auto}.pi-award span{color:#67717a;font-size:12px}
.pi-portfolio-resources{margin-top:50px;border-top:1px solid #d8dde0;padding-top:34px}
.pi-portfolio-resources h3{font-size:clamp(27px,3vw,37px);margin:12px 0 8px}.pi-portfolio-resources p{color:#5c646c}
.pi-resource-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:24px}
.pi-resource-link{border:1px solid #d8dde0;background:#fff;display:flex;align-items:center;justify-content:space-between;gap:15px;padding:16px 20px;text-decoration:none;font-size:14px;min-height:70px}
.pi-resource-link:hover,.pi-resource-link:focus-visible{border-color:#3979d2;color:#1a4e88}
.pi-resource-link b{font-size:11px;letter-spacing:.06em;white-space:nowrap;color:#3979d2}
.pi-viking-link{margin-top:18px}
@media(max-width:1000px){.pi-film-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.pi-proof-strip{grid-template-columns:1fr 1fr}.pi-award-logos{grid-column:1/-1;justify-content:flex-start}.pi-portfolio-grid--three{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.pi-portfolio-chapter-head{display:block}.pi-portfolio-chapter-head h3{text-align:left;margin-top:12px}.pi-portfolio-grid,.pi-portfolio-grid--three,.pi-film-grid,.pi-resource-links{grid-template-columns:1fr}.pi-portfolio-grid .work-gallery-photo{aspect-ratio:16/10}.pi-portfolio-grid--portrait .work-gallery-photo{aspect-ratio:4/5}.pi-proof-strip{grid-template-columns:1fr}.pi-award-logos{grid-column:auto}.pi-portfolio-grid .work-gallery-meta,.pi-portfolio-grid--three .work-gallery-meta{min-height:0}}


/* JELD-WEN Selected Work: full-artwork decal, national campaign and independent brand outcomes. */
.pi-portfolio-grid .pi-decal-tile .work-gallery-photo {aspect-ratio:2000 / 817;background:#f6f8fa}
.pi-portfolio-grid .pi-decal-tile .work-gallery-photo img {object-fit:contain;object-position:center;background:#f6f8fa}
.pi-broadcast-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.pi-broadcast-card {min-width:0;border:1px solid #d4d9de;background:#fff;color:inherit;text-align:left;text-decoration:none;display:block;padding:0;cursor:pointer;font:inherit;transition:border-color .2s ease}
.pi-broadcast-card:hover,.pi-broadcast-card:focus-visible {border-color:#3979D2;outline:2px solid transparent}
.pi-broadcast-photo {display:block;position:relative;aspect-ratio:16/9;overflow:hidden;background:#0c1015}
.pi-broadcast-photo img {width:100%;height:100%;display:block;object-fit:contain}
.pi-broadcast-link .pi-broadcast-photo img {object-fit:cover}
.pi-broadcast-play {position:absolute;bottom:15px;left:15px;display:inline-flex;gap:9px;align-items:center;padding:10px 15px;background:#fff;color:#242A30;font-size:12px;font-weight:700;letter-spacing:.01em}
.pi-broadcast-play span {color:#3979D2}
.pi-broadcast-copy {display:grid;gap:10px;padding:24px}
.pi-broadcast-copy strong {font-family:Georgia,'Times New Roman',serif;font-size:clamp(23px,2.6vw,32px);font-weight:normal;line-height:1.13}
.pi-broadcast-copy>span {font-size:14px;line-height:1.6;color:#54606c}
.pi-broadcast-copy em {font-size:11px;letter-spacing:.07em;font-weight:700;font-style:normal;color:#3979D2;text-transform:uppercase}
.pi-lift-kpis {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.pi-lift-kpi {display:grid;align-content:start;gap:10px;padding:24px 21px;background:#242A30;color:#fff;min-width:0}
.pi-lift-kpi strong {font-family:Georgia,'Times New Roman',serif;font-size:clamp(37px,4.2vw,58px);font-weight:normal;line-height:1;color:#8eb8f1}
.pi-lift-kpi span {font-size:17px;font-weight:700;line-height:1.3}
.pi-lift-kpi small {font-size:12px;line-height:1.5;color:#d0d5da}
.pi-integration-outcomes {display:grid;grid-template-columns:1fr 1.25fr;gap:16px;margin-top:16px}
.pi-integration-insight {padding:24px;border:1px solid #d6dce1;display:grid;gap:11px;background:white}
.pi-integration-insight .eyebrow {font-size:11px;letter-spacing:.09em;color:#616970}
.pi-integration-insight>strong {font-family:Georgia,'Times New Roman',serif;font-size:clamp(26px,3vw,39px);font-weight:normal;color:#242A30;line-height:1.15}
.pi-integration-insight p {font-size:14px;line-height:1.6;color:#59646d;margin:0}
.pi-lift-source {margin:18px 0 0;font-size:12px;color:#59636d;line-height:1.65;max-width:1060px}
@media(max-width:900px){.pi-broadcast-grid,.pi-integration-outcomes {grid-template-columns:1fr}}
@media(max-width:720px){.pi-lift-kpis {grid-template-columns:1fr}.pi-lift-kpi {padding:21px}.pi-lift-kpi strong {font-size:43px}.pi-portfolio-grid .pi-decal-tile .work-gallery-photo {aspect-ratio:2000/817}.pi-broadcast-copy {padding:20px}}

/* Slide 03: calculator image, no device/browser frame */
.hero-art--calculator{padding:0 0 0 52%;overflow:hidden;align-items:center;justify-content:center}
.hero-calculator-unframed{display:block;width:100%;height:100%;object-fit:contain;object-position:center;mask-image:radial-gradient(ellipse 75% 80% at 55% 50%,black 65%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse 75% 80% at 55% 50%,black 65%,transparent 100%)}

/* Editorial standard: written brand name stays lowercase, bold and cobalt. */
.pi-brand-name{font-weight:800!important;color:var(--cobalt,#3979D2)!important;text-transform:none!important;}


/* Husky case study: original portrait print advertisement. */
.pi-print-feature{display:grid;grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr);align-items:center;gap:clamp(26px,5vw,72px);margin-top:20px}
.pi-print-ad-tile{width:100%;max-width:459px}
.pi-print-feature .pi-print-ad-tile .work-gallery-photo{aspect-ratio:459/650;background:#fff}
.pi-print-feature .pi-print-ad-tile .work-gallery-photo img{width:100%;height:100%;object-fit:contain;background:#fff}
.pi-print-feature .pi-print-ad-tile .work-gallery-meta{padding:17px 22px 20px;min-height:unset}
.pi-print-feature .pi-print-ad-tile .work-gallery-meta strong{font-size:clamp(20px,2vw,25px)}
.pi-print-feature-copy{max-width:465px}
.pi-print-feature-copy h4{font:normal clamp(27px,3.3vw,44px)/1.16 Georgia,serif;margin:18px 0 15px;color:#222a32}
.pi-print-feature-copy p{color:#49535d;font-size:clamp(16px,1.3vw,18px);line-height:1.65}
@media(max-width:680px){.pi-print-feature{grid-template-columns:1fr;gap:28px}.pi-print-ad-tile{margin:auto}.pi-print-feature-copy h4{margin-top:10px}}

/* Husky case study: companion microsite link alongside the print ad. */
.pi-campaign-microsite{margin-top:26px;padding-top:22px;border-top:1px solid #d9dfe5}
.pi-campaign-microsite .eyebrow{font-size:11px;letter-spacing:.15em}
.pi-campaign-microsite p{font-size:15px;line-height:1.65;margin:10px 0 17px}
.pi-campaign-link{display:inline-flex;align-items:center;gap:10px;padding:12px 17px;background:#242a30;color:#fff!important;border:1px solid #242a30;text-decoration:none;font-size:14px;font-weight:700;transition:background .18s ease,border-color .18s ease}
.pi-campaign-link:hover,.pi-campaign-link:focus-visible{background:#245eaf;border-color:#245eaf;color:#fff!important}
.pi-campaign-link:focus-visible{outline:3px solid #9ac2f9;outline-offset:3px}
.pi-campaign-link span{font-size:18px;line-height:1}


/* 2026-11-05 | Positionink brand + restrained responsive polish. */
:root{--graphite:#242A30;--ink:#242A30;--cobalt:#3979D2;--paper:#fff;--white:#fff}
body,button,input,select,textarea{font-family:'DejaVu Sans',Arial,Helvetica,sans-serif}
h1,h2,h3,h4,h5,h6,.pi-portfolio-chapter-head h3,.pi-broadcast-copy strong,.pi-lift-kpi strong,.pi-integration-insight>strong,.pi-print-feature-copy h4,.pi-film-info strong,.work-gallery-meta strong,.pi-lightbox-title,.mg-chapter-head h3,.mg-resources-intro h3,.mg-resource-info strong{font-family:'DejaVu Serif',Georgia,'Times New Roman',serif}
.hero-link,.hero-step,.hero-play-pause,.breadcrumb-nav{font-family:'DejaVu Sans',Arial,Helvetica,sans-serif}
.nav .logo img{height:60px;width:auto;max-width:min(250px,55vw);object-fit:contain}
@media(max-width:1080px){.nav .logo img{height:53px}.navin{height:82px}}
@media(max-width:850px){.nav .logo img{height:49px}.navin{height:78px}.nav .links{top:78px}}
@media(max-width:600px){.nav .logo img{height:43px;max-width:min(215px,65vw)}.navin{height:72px}.nav .links{top:72px}}
@media(max-width:360px){.nav .logo img{height:36px;max-width:195px}.navin{height:66px}.nav .links{top:66px}}
.hero-scene--opportunity .hero-scenery{background-image:linear-gradient(105deg,rgba(9,12,15,.05),rgba(9,12,15,.32)),url('hero-fenestration-infographic.svg');background-color:#1b2830}
.hero-scene--compete .hero-scenery{background-image:linear-gradient(100deg,rgba(6,9,12,.1),rgba(6,9,12,.34)),url('hero-injection-molding-infographic.svg');background-color:#253039;filter:none}
html,body{max-width:100%;overflow-x:clip}
img,video,iframe,svg{max-width:100%}
@media(max-width:850px){.wrap{width:calc(100% - 32px)}.navin{gap:12px}.nav .links.open{max-height:calc(100vh - 78px);overflow-y:auto;overscroll-behavior:contain}}
@media(max-width:600px){.wrap{width:calc(100% - 28px)}.nav .links.open{max-height:calc(100vh - 72px)}.hero-bottom{max-width:calc(100% - 28px)}.hero-copy{min-width:0}.hero-editorial h1,.hero-editorial h2{overflow-wrap:break-word}}
@media(max-width:360px){.hero-step{width:44px}.hero-navigation{gap:5px}.hero-slide-buttons{gap:4px}.hero-editorial h1,.hero-editorial h2{font-size:34px}}
@supports not (overflow:clip){html,body{overflow-x:hidden}}

/* Slide 03 visual motion: preserve the original calculator artwork and all carousel behavior.
   Gentle float / depth movement matches the kinetic treatment of the other visuals. */
@keyframes pi-calculator-kinetic {
  0% { transform: translate3d(0, 5px, 0) scale(0.985); }
  50% { transform: translate3d(-6px, -9px, 0) scale(1.015); }
  100% { transform: translate3d(0, 5px, 0) scale(0.985); }
}
.hero-scene--scale.is-active .hero-calculator-unframed {
  animation: pi-calculator-kinetic 9s ease-in-out infinite;
  transform-origin: 54% 50%;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .hero-scene--scale.is-active .hero-calculator-unframed {
    animation: none !important;
    transform: none !important;
    will-change: auto;
  }
}


/* November 2026 approved homepage artwork: cinematic three-scene visual alignment.
   No carousel markup, behavior, link targets or timing changes. */
.hero-scene--opportunity .hero-scenery,
.hero-scene--compete .hero-scenery { background-image:none !important; background-color:#080d15 !important; filter:none !important; opacity:1 !important; }
.hero-scene--opportunity .hero-wash,
.hero-scene--compete .hero-wash { background:linear-gradient(90deg,rgba(6,9,14,.95) 0%,rgba(6,9,14,.90) 32%,rgba(6,9,14,.52) 55%,rgba(6,9,14,0) 85%) !important; }
.hero-art--cinematic { inset:0 0 0 42%; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.hero-art--cinematic img { display:block; width:100%; height:100%; object-fit:contain; object-position:center; -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 14%,#000 100%); mask-image:linear-gradient(90deg,transparent 0%,#000 14%,#000 100%); }
.hero-art--fenestration img { width:auto; max-width:none; height:100%; min-height:100%; }
.hero-art--molding img { width:115%; max-width:none; height:100%; }
.hero-scene--opportunity .hero-orb, .hero-scene--compete .hero-slab {display:none!important;}
@media(max-width:850px) {
 .hero-art--cinematic {left:29%; opacity:.57;}
 .hero-art--fenestration img {height:94%;}
 .hero-art--molding img {width:145%;}
 .hero-scene--opportunity .hero-wash,.hero-scene--compete .hero-wash {background:linear-gradient(90deg,rgba(6,9,14,.95) 0%,rgba(6,9,14,.84) 51%,rgba(6,9,14,.24) 100%) !important;}
}
@media(max-width:600px) {
 .hero-art--cinematic {left:8%; top:22%; opacity:.26;}
 .hero-art--fenestration img {height:92%;}
 .hero-art--molding img {width:165%;}
 .hero-scene--opportunity .hero-wash,.hero-scene--compete .hero-wash {background:linear-gradient(90deg,rgba(6,9,14,.94),rgba(6,9,14,.64)) !important;}
 .hero-scene--scale .hero-copy h2 {font-size:clamp(32px,8.5vw,43px);}
 .hero-scene--scale .hero-description {font-size:16px;line-height:1.55;}
}
@media(prefers-reduced-motion:reduce) { .hero-art--cinematic img { animation:none!important; } }

/* 2026-11-05 QA: lock all carousel artwork to same spatial box and protect copy. */
@media (min-width: 1001px) {
 .hero-editorial .hero-copy {max-width:min(50%,600px);}
 .hero-editorial h1,.hero-editorial h2 {font-size:clamp(40px,4.2vw,62px);line-height:1.1;overflow-wrap:normal;}
 .hero-editorial .hero-description {max-width:550px;font-size:clamp(16px,1.35vw,19px);}
}
.hero-editorial .hero-art--cinematic,.hero-editorial .hero-art--calculator {
 position:absolute;left:auto;right:2%;top:50%;bottom:auto;
 width:49%;height:82%;padding:0;display:flex;align-items:center;justify-content:center;
 transform:translateY(-50%);overflow:hidden;opacity:1;
}
.hero-editorial .hero-art--cinematic img,.hero-editorial .hero-calculator-unframed {
 width:100%;height:100%;min-height:0;max-width:100%;object-fit:contain;object-position:center;
 -webkit-mask-image:linear-gradient(to right,transparent 0%,black 10%,black 100%);
 mask-image:linear-gradient(to right,transparent 0%,black 10%,black 100%);
}
.hero-editorial .hero-art--molding img,.hero-editorial .hero-art--fenestration img {width:100%;height:100%;min-height:0;max-width:100%;}
.hero-editorial .hero-calculator-unframed {animation:hero-calculator-qa-float 8s ease-in-out infinite alternate;}
@keyframes hero-calculator-qa-float {from {transform:translateY(0)}to {transform:translateY(-6px)}}
@media(max-width:1000px){
 .hero-editorial .hero-copy{max-width:64%;}
 .hero-editorial h1,.hero-editorial h2{font-size:clamp(37px,5.6vw,52px);line-height:1.1;}
 .hero-editorial .hero-art--cinematic,.hero-editorial .hero-art--calculator {right:-3%;width:56%;height:75%;opacity:.72;}
 .hero-editorial .hero-wash {background:linear-gradient(90deg,rgba(6,9,14,.97) 0%,rgba(6,9,14,.90) 45%,rgba(6,9,14,.33) 100%)!important;}
}
@media(max-width:700px){
 .hero-editorial,.hero-editorial .hero-scenes,.hero-editorial .hero-scene.is-active,.hero-editorial .hero-scene-inner{min-height:720px;}
 .hero-editorial .hero-scene-inner{align-items:flex-start;padding-top:58px;padding-bottom:180px;}
 .hero-editorial .hero-copy,.hero-editorial .hero-scene--scale .hero-copy{max-width:100%;}
 .hero-editorial h1,.hero-editorial h2,.hero-editorial .hero-scene--scale .hero-copy h2{font-size:clamp(31px,7.5vw,43px);line-height:1.13;}
 .hero-editorial .hero-description{font-size:16px;line-height:1.45;max-width:100%;margin:16px 0 18px;}
 .hero-editorial .eyebrow{margin-bottom:15px;}
 .hero-editorial .hero-art--cinematic,.hero-editorial .hero-art--calculator {
 left:10%;right:10%;width:80%;height:240px;top:auto;bottom:80px;transform:none;opacity:.65;
 }
 .hero-editorial .hero-art--cinematic img,.hero-editorial .hero-calculator-unframed{object-fit:contain;}
 .hero-editorial .hero-wash {background:linear-gradient(180deg,rgba(6,9,14,.97) 0%,rgba(6,9,14,.94) 62%,rgba(6,9,14,.38) 100%)!important;}
 .hero-editorial .hero-bottom{bottom:20px;}
}
@media(max-width:390px){
 .hero-editorial,.hero-editorial .hero-scenes,.hero-editorial .hero-scene.is-active,.hero-editorial .hero-scene-inner{min-height:780px;}
 .hero-editorial .hero-art--cinematic,.hero-editorial .hero-art--calculator{height:210px;bottom:95px;}
}
@media(prefers-reduced-motion:reduce){.hero-editorial .hero-calculator-unframed{animation:none!important;transform:none!important}}


/* positionink brand QA sweep — 2026-11-05: shared typography, spacing and navigation */
:root { --graphite:#242A30; --ink:#242A30; --cobalt:#3979D2; --brass:#A58B57;
  --pi-serif:"DejaVu Serif",Georgia,"Times New Roman",serif;
  --pi-sans:"DejaVu Sans",Arial,Helvetica,sans-serif; }
html,body { font-family:var(--pi-sans); }
body,button,input,textarea,select { font-family:var(--pi-sans); }
h1,h2,h3,h4,h5,h6,
.hero-editorial h1,.hero-editorial h2,.pi-process h2,.pi-process h3,
.work-gallery-meta strong,.pi-lightbox-title,.mg-chapter-head h3,
.mg-resources-intro h3,.mg-resource-info strong,.pi-portfolio-chapter-head h3,
.pi-broadcast-copy strong,.pi-lift-kpi strong,.pi-integration-insight>strong,
.piw h1,.piw h2 { font-family:var(--pi-serif); }
.nav,.nav .links { background:#242A30; background-color:#242A30; }
.nav { border-bottom:1px solid rgba(255,255,255,.14); }
.nav .links,.nav .links a,.nav .menu { font-family:var(--pi-sans); }
.footer { background:#242A30; }
.breadcrumb-nav,.hero-link,.pi-process-link,.hero-step,.hero-play-pause,
.piw,.piw button,.piw input,.piw select { font-family:var(--pi-sans); }
.piw { --ink:#242A30; --cobalt:#3979D2; }
.piw-hero { background:#242A30; }
.piw .btn-primary,.piw .pi-book-actions button,.piw .pi-book-actions a { background:#3979D2; }
.piw .btn-primary:hover { background:#2C62AD; }
.piw .metric-preview { border-left-color:#3979D2; }
/* Align title rhythm without changing established component sizes */
h1,h2,h3,h4,h5,h6 { text-wrap:pretty; }
.section h2,.pi-process h2,.work-gallery-header h2 { line-height:1.13; }
.navin,.nav .logo img { flex-shrink:0; }
@media(max-width:850px) { .nav .links { background:#242A30; } }

/* PositionINK approved cinematic black navigation, desktop and mobile - 2026-11-05 */
.nav, .nav .links { background: #080B0F !important; background-color: #080B0F !important; }
.nav { border-bottom-color: rgba(255,255,255,.12); }

/* Positionink cinematic hero visual blending — perimeter alpha is baked into optimized WebP assets. */
.hero-editorial .hero-art--cinematic img,
.hero-editorial .hero-calculator-unframed {
  -webkit-mask-image:none!important; mask-image:none!important;
}
.hero-editorial .hero-art--cinematic,
.hero-editorial .hero-art--calculator {
  background:transparent!important;
}


/* positionink hero: one entrance movement per slide, then hold its final pose.
   The previous infinite calculator pulse and per-slide visual animation are overridden.
   Slide timing, transitions, dimensions and feathered artwork remain unchanged. */
@keyframes pi-hero-once-settle {
  from { transform: translate3d(0, 10px, 0) scale(.985); }
  to   { transform: translate3d(0, 0, 0) scale(1); }
}
.hero-editorial .hero-art--fenestration img,
.hero-editorial .hero-art--molding img,
.hero-editorial .hero-calculator-unframed {
  animation: none;
  transform: translate3d(0, 0, 0) scale(1);
}
.hero-editorial .hero-scene.is-active .hero-art--fenestration img,
.hero-editorial .hero-scene.is-active .hero-art--molding img,
.hero-editorial .hero-scene.is-active .hero-calculator-unframed {
  animation: pi-hero-once-settle 1.5s cubic-bezier(.22,1,.36,1) 1 both;
  transform-origin: center center;
}
@media (prefers-reduced-motion: reduce) {
  .hero-editorial .hero-scene.is-active .hero-art--fenestration img,
  .hero-editorial .hero-scene.is-active .hero-art--molding img,
  .hero-editorial .hero-scene.is-active .hero-calculator-unframed {
    animation: none !important;
    transform: none !important;
  }
}

/* 2026-11-05 final carousel polish: equal, slower entrance zoom for all three assets.
   No pulse or reverse: each slide holds its expanded final pose until the next slide.
   Deliberately animate the image, not the container or the feathered matte. */
@keyframes pi-hero-grow-and-hold {
  from { transform: translate3d(0,13px,0) scale(.90); }
  to   { transform: translate3d(0,0,0) scale(1.10); }
}
.hero-editorial .hero-art--fenestration img,
.hero-editorial .hero-art--molding img,
.hero-editorial .hero-calculator-unframed {
  animation:none;
  transform:translate3d(0,0,0) scale(1.10);
  transform-origin:center center;
  will-change:transform;
}
.hero-editorial .hero-scene.is-active .hero-art--fenestration img,
.hero-editorial .hero-scene.is-active .hero-art--molding img,
.hero-editorial .hero-scene.is-active .hero-calculator-unframed {
  animation:pi-hero-grow-and-hold 6.8s linear 1 both;
}
/* A seven-second slide has a 0.2s full-size hold before advancing. */
.hero-editorial.is-paused .hero-scene.is-active .hero-art--fenestration img,
.hero-editorial.is-paused .hero-scene.is-active .hero-art--molding img,
.hero-editorial.is-paused .hero-scene.is-active .hero-calculator-unframed {
  animation-play-state:paused;
}
@media (prefers-reduced-motion:reduce) {
  .hero-editorial .hero-scene.is-active .hero-art--fenestration img,
  .hero-editorial .hero-scene.is-active .hero-art--molding img,
  .hero-editorial .hero-scene.is-active .hero-calculator-unframed {
    animation:none!important;transform:scale(1)!important;
  }
}

/* 2026-11-05: Balance the first banner's visible width with the other two scenes.
   The fenestration source contains wider empty/feathered margins, so increase its
   displayed area proportionally within the existing visual viewport. The window,
   door, inlays and long pull handle are not resampled or distorted. Keep the
   shared seven-second carousel and 6.8-second one-way image animation intact. */
.hero-editorial .hero-art--fenestration img {
  width:145%;
  height:145%;
  max-width:none;
  flex:0 0 145%;
  position:relative;
  left:-3%;
  object-fit:contain;
  object-position:center center;
}

/* Fenestration hero: soften its VISIBLE frame after the 145% proportional
   enlargement. The alpha-feathered WebP alone cannot remove cropped matte
   edges once the enlarged picture exceeds the hero-art viewport. */
.hero-editorial .hero-art--fenestration {
  -webkit-mask-image: radial-gradient(ellipse 56% 68% at 53% 43%,
    #000 48%, rgba(0,0,0,.98) 62%, rgba(0,0,0,.70) 75%, transparent 100%);
  mask-image: radial-gradient(ellipse 56% 68% at 53% 43%,
    #000 48%, rgba(0,0,0,.98) 62%, rgba(0,0,0,.70) 75%, transparent 100%);
}
/* positionink | subtle carousel zoom: 97.5% to 100% over 6.8s.
   Identical slow motion on all three banners; no looping or pulsing.
   Artwork, frame feathering, visual boundaries, and slide timing unchanged. */
@keyframes pi-hero-grow-and-hold {
  from { transform: translate3d(0, 0, 0) scale(.975); }
  to   { transform: translate3d(0, 0, 0) scale(1); }
}
.hero-editorial .hero-art--cinematic,
.hero-editorial .hero-art--calculator {
  right:2%; width:48%; height:76%; top:50%; bottom:auto;
  transform:translateY(-50%); overflow:hidden;
  background:transparent;
  /* Identical subtle frame falloff on all three scenes. */
  -webkit-mask-image:radial-gradient(ellipse 65% 68% at 50% 50%,
    #000 55%,rgba(0,0,0,.95) 67%,rgba(0,0,0,.45) 83%,transparent 100%);
  mask-image:radial-gradient(ellipse 65% 68% at 50% 50%,
    #000 55%,rgba(0,0,0,.95) 67%,rgba(0,0,0,.45) 83%,transparent 100%);
}
/* The previous 145% picture enlargement, plus a 110% final scale, caused
   the orb and dark matte to collide with the upper and lower frame edges.
   Preserve the fenestration composition but give it a little extra room. */
.hero-editorial .hero-art--fenestration img {
  width:112%; height:100%; max-width:none; min-height:0;
  flex:0 0 112%; position:relative; left:0;
  object-fit:contain;object-position:center center;
}
.hero-editorial .hero-art--molding img,
.hero-editorial .hero-calculator-unframed {
  width:100%;height:100%;max-width:100%;min-height:0;
  object-fit:contain;object-position:center center;
}
.hero-editorial .hero-art--fenestration img,
.hero-editorial .hero-art--molding img,
.hero-editorial .hero-calculator-unframed {
  animation:none;
  transform:translate3d(0,0,0) scale(1);
  transform-origin:center center;
}
.hero-editorial .hero-scene.is-active .hero-art--fenestration img,
.hero-editorial .hero-scene.is-active .hero-art--molding img,
.hero-editorial .hero-scene.is-active .hero-calculator-unframed {
  animation:pi-hero-grow-and-hold 6.8s linear 1 both;
}
@media (max-width:1000px) and (min-width:701px) {
  .hero-editorial .hero-art--cinematic,
  .hero-editorial .hero-art--calculator {
    right:0; width:49%; height:67%; opacity:.72;
  }
}
@media (max-width:700px) {
  .hero-editorial .hero-art--cinematic,
  .hero-editorial .hero-art--calculator {
    left:10%;right:10%;width:80%;height:240px;
    top:auto;bottom:80px;transform:none;opacity:.65;
  }
}
@media (max-width:390px) {
  .hero-editorial .hero-art--cinematic,
  .hero-editorial .hero-art--calculator {height:210px;bottom:95px;}
}
@media(prefers-reduced-motion:reduce){
  .hero-editorial .hero-scene.is-active .hero-art--fenestration img,
  .hero-editorial .hero-scene.is-active .hero-art--molding img,
  .hero-editorial .hero-scene.is-active .hero-calculator-unframed {
    animation:none!important;transform:scale(1)!important;
  }
}


/* PositionINK editorial slim navigation — November 2026
   Inspired by minimal product-navigation design, with original PositionINK assets.
   Site-wide: all page headings, banners, content and hero animation remain unchanged. */
.nav {
  background:#080B0F !important;
  background-color:#080B0F !important;
  color:#f4f5f7;
  border-bottom:1px solid rgba(255,255,255,.085) !important;
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
}
.nav .navin {
  width:min(calc(100% - 48px), 1120px);
  max-width:1120px;
  height:56px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:clamp(16px,3vw,44px);
  position:relative;
}
.nav .logo {display:block; flex:0 0 auto; line-height:0;}
.nav .logo img {
  width:166px;
  height:auto;
  max-width:166px;
  max-height:40px;
  object-fit:contain;
  display:block;
}
.nav .links {
  margin-left:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:clamp(16px,2.65vw,40px);
  font-family:'DejaVu Sans',Arial,Helvetica,sans-serif;
  font-size:11.5px;
  font-weight:400;
  letter-spacing:-.006em;
  background:#080B0F !important;
  background-color:#080B0F !important;
}
.nav .links a,
.nav .links .cta {
  display:inline-flex;
  align-items:center;
  position:relative;
  flex-shrink:0;
  background:transparent !important;
  background-color:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  padding:10px 0 !important;
  margin:0;
  color:rgba(244,245,247,.82) !important;
  font:inherit;
  text-decoration:none !important;
  text-transform:none;
  box-shadow:none !important;
  white-space:nowrap;
  transition:color .2s ease;
}
.nav .links .cta {gap:8px; color:#fff !important;}
.nav .links .cta::before {
  content:''; display:block; width:5px; height:5px;
  border-radius:50%; background:#3979D2; flex:0 0 5px;
}
.nav .links a:hover,.nav .links a:focus-visible,
.nav .links .cta:hover,.nav .links .cta:focus-visible {
  color:#fff !important;
  background:transparent !important;
  border:0 !important;
  text-decoration:none !important;
}
.nav .links a::after {
  content:''; position:absolute; height:1px; bottom:3px; left:0; right:0;
  background:#3979D2; transform:scaleX(0); transform-origin:center;
  transition:transform .2s ease;
}
.nav .links a:hover::after,.nav .links a:focus-visible::after,
.nav .links a[aria-current="page"]::after {transform:scaleX(1)}
.nav .links a[aria-current="page"] {color:#fff !important;}
.nav a:focus-visible,.nav button:focus-visible {
  outline:2px solid #3979D2; outline-offset:4px;
}
.nav .menu {display:none;}
@media (min-width:851px) and (max-width:1050px) {
  .nav .navin {width:calc(100% - 40px); gap:16px;}
  .nav .logo img {width:149px; max-width:149px;}
  .nav .links {gap:clamp(11px,1.7vw,19px); font-size:11px;}
}
@media (max-width:850px) {
  .nav .navin {height:56px; width:calc(100% - 36px); gap:12px;}
  .nav .logo img {width:154px; max-width:154px; height:auto; max-height:40px;}
  .nav .menu {
    display:flex; position:relative; margin-left:auto;
    align-items:center; justify-content:center; flex-direction:column;
    gap:6px; width:44px; height:44px; padding:0;
    color:#f4f5f7; background:transparent; border:0;
    cursor:pointer;
  }
  .nav .menu span {display:block;width:20px;height:1.5px;background:currentColor;transition:transform .2s ease;}
  .nav .menu[aria-expanded="true"] span:first-child {transform:translateY(3.75px) rotate(45deg);}
  .nav .menu[aria-expanded="true"] span:last-child {transform:translateY(-3.75px) rotate(-45deg);}
  .nav .links, .nav .links.open {
    position:absolute; left:-18px;right:-18px;top:56px; z-index:100;
    flex-direction:column; align-items:stretch; justify-content:flex-start;
    gap:0; padding:12px 20px 20px;
    background:#080B0F !important;
    border-bottom:1px solid rgba(255,255,255,.12);
    box-shadow:0 22px 32px rgba(0,0,0,.28);
    max-height:min(calc(100dvh - 56px),600px);
    overflow-y:auto;
  }
  .nav .links {display:none;}
  .nav .links.open {display:flex;}
  .nav .links a,.nav .links .cta {
    width:100%; min-height:49px; padding:14px 4px !important;
    font-size:13px; line-height:20px;
    border-bottom:1px solid rgba(255,255,255,.085) !important;
  }
  .nav .links a::after {left:4px;right:auto;width:34px;bottom:8px;}
  .nav .links .cta {margin-top:8px; border-bottom:0 !important;}
}
@media (max-width:390px) {
  .nav .navin {width:calc(100% - 28px);}
  .nav .links,.nav .links.open {left:-14px;right:-14px;}
  .nav .logo img {width:142px;max-width:142px;}
}
@media (prefers-reduced-motion:reduce) {
  .nav .links a,.nav .links a::after,.nav .menu span {transition:none;}
}

/* Positionink — fourth AI-enabled business solutions carousel and dedicated page. */
.hero-scene--ai .hero-scenery {background-image:none !important;background-color:#080B0F !important;opacity:1 !important;filter:none !important}
.hero-scene--ai .hero-wash {background:linear-gradient(90deg,rgba(6,9,14,.98) 0%,rgba(6,9,14,.93) 27%,rgba(6,9,14,.59) 50%,rgba(6,9,14,.02) 90%) !important}
.hero-editorial .hero-art--ai img {width:100%;height:100%;max-width:100%;min-height:0;object-fit:contain;object-position:center center;animation:none;transform:scale(1);transform-origin:center center;will-change:transform}
.hero-editorial .hero-scene.is-active .hero-art--ai img {animation:pi-hero-grow-and-hold 6.8s linear 1 both}
.hero-editorial.is-paused .hero-scene.is-active .hero-art--ai img {animation-play-state:paused}
@media(max-width:1000px){.hero-scene--ai .hero-wash {background:linear-gradient(90deg,rgba(6,9,14,.97) 0%,rgba(6,9,14,.90) 48%,rgba(6,9,14,.32) 100%) !important}}
@media(max-width:700px){.hero-scene--ai .hero-wash {background:linear-gradient(180deg,rgba(6,9,14,.97) 0%,rgba(6,9,14,.92) 61%,rgba(6,9,14,.40) 100%) !important}}
@media(prefers-reduced-motion:reduce){.hero-editorial .hero-scene.is-active .hero-art--ai img{animation:none!important;transform:scale(1)!important}}
/* AI service page */
.pi-ai-hero{background:#080B0F;color:#fff;position:relative;overflow:hidden;isolation:isolate}
.pi-ai-hero::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 77% 77%,rgba(57,121,210,.14),transparent 48%)}
.pi-ai-hero-grid{min-height:590px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.95fr);gap:2%;align-items:center;position:relative;padding-top:74px;padding-bottom:84px}
.pi-ai-hero-copy{position:relative;z-index:2}
.pi-ai-hero .breadcrumb-nav{margin-bottom:46px;color:#b4bec7}
.pi-ai-hero .breadcrumb-nav a{color:#d4dbe4}
.pi-ai-hero .eyebrow,.pi-ai-final-cta .eyebrow{color:#A58B57;letter-spacing:.22em;margin-bottom:18px}
.pi-ai-hero h1{font-family:var(--pi-serif);font-weight:400;line-height:1.08;letter-spacing:-.048em;font-size:clamp(44px,4.45vw,67px);color:#fff;max-width:620px}
.pi-ai-hero h1 em{font-style:normal;color:#d4dbe7}
.pi-ai-hero .lead{font-size:clamp(17px,1.5vw,20px);color:#cbd1d8;line-height:1.58;max-width:540px;margin:28px 0 28px}
.pi-ai-primary-link,.pi-ai-final-cta a{display:inline-flex;align-items:center;gap:22px;color:#fff;text-transform:uppercase;font-weight:700;letter-spacing:.12em;font-size:12px;padding:0 0 12px;border-bottom:1px solid #A58B57;text-decoration:none}
.pi-ai-primary-link span,.pi-ai-final-cta a span{color:#3979D2;font-size:24px;line-height:1}
.pi-ai-primary-link:focus-visible,.pi-ai-final-cta a:focus-visible{outline:2px solid #3979D2;outline-offset:6px}
.pi-ai-hero-visual{height:495px;min-width:0;display:grid;place-items:center;overflow:visible}
.pi-ai-hero-visual img{width:125%;height:100%;max-width:none;object-fit:contain;object-position:center}
.pi-ai-statement{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
.pi-ai-statement .eyebrow,.pi-ai-services .eyebrow,.pi-ai-examples .eyebrow,.pi-ai-approach .eyebrow,.pi-ai-faq .eyebrow{margin:0 0 21px;color:#A58B57;letter-spacing:.2em}
.pi-ai-statement h2,.pi-ai-services h2,.pi-ai-examples h2,.pi-ai-approach h2,.pi-ai-faq h2,.pi-ai-final-cta h2{font-size:clamp(34px,4vw,55px);line-height:1.1;letter-spacing:-.04em}
.pi-ai-statement p:not(.eyebrow){font-size:18px;line-height:1.72;color:#454e57;margin:0 0 18px}
.pi-ai-services{background:#f6f8fa}
.pi-ai-section-intro{max-width:750px;color:#4d5966;font-size:18px;margin:22px 0 0}
.pi-ai-service-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:35px}
.pi-ai-service{padding:37px 34px;background:#fff;border-top:2px solid #3979D2;min-width:0}
.pi-ai-service-number,.pi-ai-number{font-size:11px;font-weight:700;letter-spacing:.16em;color:#3979D2}
.pi-ai-service h3,.pi-ai-example-grid h3,.pi-ai-stages h3{font-size:clamp(24px,2.2vw,30px);line-height:1.2;margin:16px 0 14px}
.pi-ai-service p,.pi-ai-example-grid p,.pi-ai-stages p{color:#49535e;line-height:1.62;font-size:16px}
.pi-ai-service ul{margin:20px 0 0;padding:18px 0 0 20px;border-top:1px solid #e0e5eb;color:#3d4753}
.pi-ai-service li{padding:4px 0}
.pi-ai-example-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:29px;margin-top:45px}
.pi-ai-example-grid>div{border-top:1px solid #bac4cf;padding-top:20px}
.pi-ai-examples-note{font-size:13px;color:#697482;margin:33px 0 0}
.pi-ai-approach{background:#242A30;color:#fff}
.pi-ai-approach-top{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:end}
.pi-ai-approach-top>p{font-size:18px;line-height:1.65;color:#c7d0d9;margin:0}
.pi-ai-stages{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;margin-top:52px}
.pi-ai-stages article{border-top:1px solid #657280;padding-top:18px}
.pi-ai-stages article span{font-size:12px;color:#9dbdf0;letter-spacing:.16em}
.pi-ai-stages h3{color:#fff;font-size:25px}
.pi-ai-stages p{color:#cbd2d8}
.pi-ai-guardrail{border-left:2px solid #A58B57;margin-top:49px;padding:13px 20px;max-width:860px;font-size:16px;color:#d5dce2}
.pi-ai-guardrail strong{color:#fff}
.pi-ai-faq-list{margin-top:40px;max-width:970px;border-top:1px solid #d1d8df}
.pi-ai-faq-list details{border-bottom:1px solid #d1d8df;padding:0 0}
.pi-ai-faq-list summary{cursor:pointer;list-style:revert;padding:22px 32px 22px 0;color:#20252B;font-weight:700;font-size:18px;line-height:1.45}
.pi-ai-faq-list details p{margin:0 0 24px;color:#4e5965;max-width:800px;font-size:16px;line-height:1.7}
.pi-ai-final-cta{background:#080B0F;color:#fff;padding:86px 0 95px}
.pi-ai-final-cta h2{max-width:920px}
.pi-ai-final-cta p:not(.eyebrow){color:#cbd2d8;font-size:18px;line-height:1.6;max-width:710px;margin:23px 0 29px}
@media(max-width:960px){.pi-ai-hero-grid{min-height:560px}.pi-ai-hero-visual img{width:145%}.pi-ai-stages{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.pi-ai-hero-grid{grid-template-columns:1fr;gap:4px;padding-top:42px;padding-bottom:45px}.pi-ai-hero .breadcrumb-nav{margin-bottom:28px}.pi-ai-hero h1{font-size:clamp(39px,9vw,53px)}.pi-ai-hero-visual{height:270px;max-width:100%;overflow:hidden}.pi-ai-hero-visual img{width:112%;height:100%}.pi-ai-statement,.pi-ai-approach-top{grid-template-columns:1fr;gap:22px}.pi-ai-service-grid,.pi-ai-example-grid{grid-template-columns:1fr}.pi-ai-services .section,.pi-ai-faq{padding-top:65px}.pi-ai-stages{grid-template-columns:1fr 1fr;gap:16px}.pi-ai-stages article{padding-top:12px}.pi-ai-stages h3{font-size:23px}.pi-ai-stages p{font-size:14px}.pi-ai-hero .lead{font-size:17px}}
@media(max-width:400px){.pi-ai-stages{grid-template-columns:1fr}.pi-ai-hero-visual{height:230px}.pi-ai-service{padding:27px 23px}.pi-ai-hero h1{font-size:37px}}
@media(prefers-reduced-motion:reduce){.pi-ai-primary-link,.pi-ai-final-cta a{scroll-behavior:auto}}


/* positionink — refined four-slide kinetic artwork, 2026-11-05.
   Override legacy one-time/2.5% rules. Over the seven-second dwell,
   each active art image grows gently by ~4.7% and rises 5px, then holds.
   Animate the image itself; leave its alpha-feathered frame unmoved.
   The motion restarts naturally when a scene becomes active again. */
@keyframes pi-four-slide-subtle-kinetic {
  from { transform: translate3d(0, 5px, 0) scale(.955); }
  to   { transform: translate3d(0, 0, 0) scale(1); }
}
.hero-editorial .hero-scene .hero-art--fenestration img,
.hero-editorial .hero-scene .hero-art--molding img,
.hero-editorial .hero-scene .hero-art--calculator img,
.hero-editorial .hero-scene .hero-art--ai img {
  animation: none;
  transform: translate3d(0, 0, 0) scale(.955);
  transform-origin: 50% 50%;
  will-change: transform;
}
.hero-editorial .hero-scene.is-active .hero-art--fenestration img,
.hero-editorial .hero-scene.is-active .hero-art--molding img,
.hero-editorial .hero-scene.is-active .hero-art--calculator img,
.hero-editorial .hero-scene.is-active .hero-art--ai img {
  animation: pi-four-slide-subtle-kinetic 6.8s linear 1 both;
}
.hero-editorial.is-paused .hero-scene.is-active .hero-art--fenestration img,
.hero-editorial.is-paused .hero-scene.is-active .hero-art--molding img,
.hero-editorial.is-paused .hero-scene.is-active .hero-art--calculator img,
.hero-editorial.is-paused .hero-scene.is-active .hero-art--ai img {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .hero-editorial .hero-scene .hero-art--fenestration img,
  .hero-editorial .hero-scene .hero-art--molding img,
  .hero-editorial .hero-scene .hero-art--calculator img,
  .hero-editorial .hero-scene .hero-art--ai img {
    animation: none !important;
    transform: none !important;
    will-change: auto;
  }
}


/* Strategy-first narrative: approved manufacturing art and integrated execution campaign.
   Keep all graphics contained and apply the same 4.7% kinetic motion as slides 3–4. */
.hero-editorial .hero-art--strategy,
.hero-editorial .hero-art--execution {
  left: 40%; right: 0; top: 0; bottom: 0; width: 60%; height: 100%;
  overflow: hidden; display: flex; justify-content: center; align-items: center;
  pointer-events: none;
}
.hero-editorial .hero-art--strategy img,
.hero-editorial .hero-art--execution img {
  width: 100%; height: 100%; max-width: 100%; object-fit: contain;
  -webkit-mask-image: linear-gradient(to right,transparent 0%,black 10%,black 100%);
  mask-image: linear-gradient(to right,transparent 0%,black 10%,black 100%);
  transform: translate3d(0,5px,0) scale(.955);
  transform-origin: 50% 50%;
  animation: none; will-change: transform;
}
.hero-editorial .hero-scene.is-active .hero-art--strategy img,
.hero-editorial .hero-scene.is-active .hero-art--execution img {
  animation: pi-four-slide-subtle-kinetic 6.8s linear 1 both;
}
.hero-editorial.is-paused .hero-scene.is-active .hero-art--strategy img,
.hero-editorial.is-paused .hero-scene.is-active .hero-art--execution img {animation-play-state:paused}
@media(max-width:1000px){
  .hero-editorial .hero-art--strategy,.hero-editorial .hero-art--execution{left:43%;width:60%;opacity:.8}
}
@media(max-width:700px){
  .hero-editorial .hero-art--strategy,.hero-editorial .hero-art--execution{
    top:auto;bottom:80px;left:4%;right:4%;width:92%;height:255px;opacity:.65;
  }
  .hero-editorial .hero-art--strategy img,.hero-editorial .hero-art--execution img{object-fit:contain}
}
@media(prefers-reduced-motion:reduce){
  .hero-editorial .hero-scene.is-active .hero-art--strategy img,
  .hero-editorial .hero-scene.is-active .hero-art--execution img{
    animation:none!important;transform:scale(1)!important;
  }
}


/* FINAL POSITIONINK HERO / HEADER QA — November 2026
   Fix inherited translateY on strategy/execution artworks; preserve approved art.
   Crossfade outgoing and incoming slides while maintaining slow independent zoom.
   Maintain identical near-black header on homepage and calculator; spotlight CTA. */
:root { --pi-hero-black:#080B0F; }
.hero-editorial,
.hero-editorial .hero-scenes,
.hero-editorial .hero-scene { background-color:var(--pi-hero-black); }

/* All panels remain in the same layer stack; do not change position on activation. */
.hero-editorial .hero-scenes { position:relative; isolation:isolate; min-height:650px; }
.hero-editorial .hero-scene,
.hero-editorial .hero-scene.is-active,
.hero-editorial .hero-scene.is-exiting {
  position:absolute !important; inset:0;
  width:100%; min-height:inherit;
  opacity:0; visibility:hidden; pointer-events:none;
  z-index:1;
  transition: opacity 1150ms cubic-bezier(.25,.1,.25,1), visibility 0s linear 1150ms;
}
.hero-editorial .hero-scene.is-exiting {
  opacity:0; visibility:visible; pointer-events:none; z-index:2;
  transition:opacity 1150ms cubic-bezier(.25,.1,.25,1),visibility 0s linear 1150ms;
}
.hero-editorial .hero-scene.is-active {
  opacity:1; visibility:visible; pointer-events:auto; z-index:3;
  transition:opacity 1150ms cubic-bezier(.25,.1,.25,1),visibility 0s linear 0s;
}
/* The hero background itself cannot display an old full-bleed photo during a crossfade. */
.hero-editorial .hero-scene--compete .hero-scenery,
.hero-editorial .hero-scene--opportunity .hero-scenery {
  background-image:none !important; background-color:var(--pi-hero-black) !important;
  opacity:1 !important; filter:none !important;
}
.hero-editorial .hero-wash {pointer-events:none;}

/* Fix the previous top:0 + translateY(-50%) conflict for the two new images. */
.hero-editorial .hero-art--strategy,
.hero-editorial .hero-art--execution {
  position:absolute; left:39%; right:0; top:50%; bottom:auto;
  width:61%; height:78%;
  display:flex; align-items:center; justify-content:center;
  transform:translate3d(0,-50%,0) !important;
  overflow:visible; opacity:1;
  mask-image:none !important; -webkit-mask-image:none !important;
  background:transparent !important;
}
.hero-editorial .hero-art--strategy img,
.hero-editorial .hero-art--execution img {
  position:static; width:100%; height:100%; max-width:100%;
  object-fit:contain; object-position:center center;
  mask-image:none !important; -webkit-mask-image:none !important;
}

/* Gently moving product imagery, with the outgoing frame held during crossfade. */
@keyframes pi-cinematic-continuous {
  from {transform:translate3d(0,4px,0) scale(.955);}
  to {transform:translate3d(0,0,0) scale(1);}
}
.hero-editorial .hero-scene .hero-art img {
  animation:none; transform:translate3d(0,4px,0) scale(.955);
  transform-origin:center center;
  will-change:transform;
}
.hero-editorial .hero-scene.is-active .hero-art img,
.hero-editorial .hero-scene.is-exiting .hero-art img {
  animation:pi-cinematic-continuous 6.8s linear 1 both;
}
.hero-editorial.is-paused .hero-scene.is-active .hero-art img,
.hero-editorial .hero-scene.is-exiting .hero-art img {
  animation-play-state:paused !important;
}
@media (min-width:701px) and (max-width:1100px) {
  .hero-editorial .hero-art--strategy,.hero-editorial .hero-art--execution {
    left:43%;width:57%;height:72%;top:50%;bottom:auto;
    transform:translate3d(0,-50%,0) !important;opacity:.9;
  }
}
@media (max-width:700px) {
  .hero-editorial .hero-art--strategy,.hero-editorial .hero-art--execution {
    left:6%;right:6%;width:88%;height:242px;
    top:auto;bottom:82px;transform:none !important;opacity:.54;
  }
  .hero-editorial .hero-scene .hero-art--strategy img,
  .hero-editorial .hero-scene .hero-art--execution img {object-fit:contain;}
}
@media (max-width:390px) {
  .hero-editorial .hero-art--strategy,.hero-editorial .hero-art--execution {
    height:208px;bottom:92px;
  }
}

/* Bright but understated high-contrast CTA in the slim navigation. */
.nav,.nav .links {background-color:var(--pi-hero-black) !important;}
.nav .links a.cta {
  background:#3979D2 !important; background-color:#3979D2 !important;
  border:1px solid #3979D2 !important; border-radius:999px !important;
  padding:9px 15px !important; margin-left:0;
  color:#fff !important; font-weight:700 !important;
  line-height:1.2 !important; letter-spacing:0 !important;
  box-shadow:0 0 0 1px rgba(57,121,210,.05);
  text-decoration:none !important;
  transition:background-color .2s ease, box-shadow .2s ease, transform .2s ease !important;
}
.nav .links a.cta::before,
.nav .links a.cta::after {display:none !important;content:none !important;}
.nav .links a.cta:hover,.nav .links a.cta:focus-visible {
  background:#2C62AD !important; background-color:#2C62AD !important;
  border-color:#2C62AD !important;
  box-shadow:0 0 0 3px rgba(57,121,210,.18);
  color:#fff !important;
}
@media(max-width:850px){
 .nav .links a.cta {
   justify-content:center; align-self:stretch; min-height:46px;
   margin-top:10px !important; padding:13px 18px !important;
   border-bottom:1px solid #3979D2 !important;
 }
}
@media(prefers-reduced-motion:reduce) {
 .hero-editorial .hero-scene,.hero-editorial .hero-scene.is-exiting,
 .hero-editorial .hero-scene.is-active { transition:none !important; }
 .hero-editorial .hero-scene .hero-art img {
   animation:none !important; transform:none !important; will-change:auto;
 }
 .nav .links a.cta{transition:none!important;}
}


/* 2026-11-05 — integrate artwork revisions for first two strategy-first slides.
   Replaces previous oversized hero boxes while preserving the shared motion and fade. */
@media (min-width:1001px) {
  .hero-editorial .hero-scene .hero-art--strategy,
  .hero-editorial .hero-scene .hero-art--execution {
    position:absolute !important;
    inset:auto 1% auto auto !important;
    top:50% !important;
    left:auto !important;
    width:50% !important;
    height:80% !important;
    transform:translateY(-50%) !important;
    opacity:1 !important;
    overflow:visible !important;
    -webkit-mask-image:none !important;
    mask-image:none !important;
  }
  .hero-editorial .hero-scene--compete .hero-copy,
  .hero-editorial .hero-scene--opportunity .hero-copy {
    max-width:min(46%,600px) !important;
    position:relative;
    z-index:3;
  }
}
@media (min-width:701px) and (max-width:1000px) {
  .hero-editorial .hero-scene .hero-art--strategy,
  .hero-editorial .hero-scene .hero-art--execution {
    position:absolute !important;
    inset:auto 0 auto auto !important;
    top:50% !important;
    left:auto !important;
    width:52% !important;
    height:70% !important;
    transform:translateY(-50%) !important;
    opacity:.82 !important;
    overflow:visible !important;
    -webkit-mask-image:none !important;
    mask-image:none !important;
  }
  .hero-editorial .hero-scene--compete .hero-copy,
  .hero-editorial .hero-scene--opportunity .hero-copy {max-width:50% !important;position:relative;z-index:3;}
}
@media (max-width:700px) {
  .hero-editorial .hero-scene .hero-art--strategy,
  .hero-editorial .hero-scene .hero-art--execution {
    position:absolute !important;
    inset:auto 5% 79px 5% !important;
    top:auto !important;
    width:90% !important;
    height:245px !important;
    transform:none !important;
    opacity:.70 !important;
    overflow:visible !important;
    -webkit-mask-image:none !important;
    mask-image:none !important;
  }
  .hero-editorial .hero-scene--compete .hero-copy,
  .hero-editorial .hero-scene--opportunity .hero-copy {max-width:100% !important;position:relative;z-index:3;}
}
.hero-editorial .hero-scene .hero-art--strategy img,
.hero-editorial .hero-scene .hero-art--execution img {
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
  -webkit-mask-image:none !important;
  mask-image:none !important;
}

/* Navigation review: seven clearly labelled destinations, November 2026. */
@media (min-width:1101px) {
  .nav .links {gap:clamp(12px,1.6vw,24px) !important; font-size:11.3px !important;}
  .nav .navin {gap:18px !important;}
}
@media (min-width:851px) and (max-width:1100px) {
  .nav .links {gap:11px !important;font-size:10.6px !important;}
  .nav .navin {gap:12px !important;width:calc(100% - 34px) !important;}
  .nav .logo img {width:140px !important;max-width:140px !important;}
  .nav .links a.cta {padding:8px 11px !important;}
}

/* Our Story: approved compact, undistorted image crop. */
.our-story-photo, img.storyimg {
  width:min(100%,340px) !important; max-width:340px !important;
  height:auto !important; max-height:none !important; aspect-ratio:1122 / 898 !important;
  object-fit:contain !important; display:block;
}
@media (max-width:600px) {img.storyimg {max-width:min(100%,300px) !important;}}

/* Hero artwork without ornamental orbs — consolidated November 2026 update.
   Heading labels removed in markup; number selectors at bottom intentionally preserved. */
@media (min-width:1001px) {
  .hero-editorial .hero-scene .hero-art--strategy,
  .hero-editorial .hero-scene .hero-art--execution {
    right:1.5% !important; left:auto !important; top:50% !important;
    width:51% !important; height:81% !important; transform:translateY(-50%) !important;
    overflow:hidden !important; pointer-events:none !important;
  }
}
@media (min-width:701px) and (max-width:1000px) {
  .hero-editorial .hero-scene .hero-art--strategy,
  .hero-editorial .hero-scene .hero-art--execution {
    right:0 !important; left:auto !important; top:50% !important;
    width:53% !important; height:76% !important; transform:translateY(-50%) !important;
    overflow:hidden !important;
  }
}
@media (max-width:700px) {
  .hero-editorial .hero-scene .hero-art--strategy,
  .hero-editorial .hero-scene .hero-art--execution {
    top:auto !important; left:5% !important; right:5% !important; bottom:77px !important;
    width:90% !important; height:245px !important; transform:none !important;
    opacity:.78 !important; overflow:hidden !important;
  }
}
/* All four hero illustrations remain readable on the same matte-black field. */
.hero-editorial .hero-scene .hero-art--strategy img,
.hero-editorial .hero-scene .hero-art--execution img,
.hero-editorial .hero-scene .hero-art--calculator img {
  object-fit:contain !important; object-position:center !important;
}
/* Keep opening headlines vertically comfortable after removing eyebrow labels. */
.hero-editorial .hero-scene .hero-copy > h1:first-child,
.hero-editorial .hero-scene .hero-copy > h2:first-child { margin-top:0; }