/* ===================================================================
   THE AUTOMATION ARCHITECT — shared styles
=================================================================== */
:root{
  --canvas:#EDF1F4; --paper:#FFFFFF; --paper-2:#F5F8FA;
  --navy:#13344C; --brand:#1E6A87; --brand-deep:#155068;
  --ink:#14222E; --steel:#5C6B78; --rule:#CCD6DE; --rule-soft:#DCE3E9;
  --amber:#EE6A1D; --amber-deep:#C9530F;
  --panel:#0D2233; --panel-2:#102A3F; --panel-line:#22425A; --panel-text:#9FB2C0;
  --ease:cubic-bezier(.16,.7,.2,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'IBM Plex Sans',sans-serif;background:var(--canvas);color:var(--ink);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.mono{font-family:'IBM Plex Mono',monospace}
.eyebrow{font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;color:var(--amber-deep);font-weight:500}
.wrap{max-width:1280px;margin:0 auto;padding:0 32px;position:relative;z-index:2}

/* ===== PAGE TRANSITION OVERLAY ===== */
.page-trans{position:fixed;inset:0;z-index:9999;background:var(--panel);transform:translateY(100%);pointer-events:none;display:flex;align-items:center;justify-content:center}
.page-trans .pt-mark{width:88px;height:88px;color:#fff;opacity:.9}

/* ===== CUSTOM CURSOR ===== */
.cursor-dot,.cursor-ring{position:fixed;top:0;left:0;border-radius:50%;pointer-events:none;z-index:9000;mix-blend-mode:difference;will-change:transform}
.cursor-dot{width:7px;height:7px;background:#fff;margin:-3.5px 0 0 -3.5px}
.cursor-ring{width:38px;height:38px;border:1.5px solid #fff;margin:-19px 0 0 -19px;transition:width .2s,height .2s,margin .2s}
.cursor-ring.hover{width:62px;height:62px;margin:-31px 0 0 -31px}
@media (pointer:coarse){.cursor-dot,.cursor-ring{display:none}}

.scroll-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:200;background:linear-gradient(90deg,var(--amber),var(--amber-deep));box-shadow:0 0 10px rgba(238,106,29,.5)}

/* ===== LOGO ===== */
.logo{display:flex;align-items:center;gap:13px}
.logo .mark{width:44px;height:44px;flex:none}
.logo .mark svg{display:block;width:100%;height:100%}
.logo .word{font-family:'Saira',sans-serif;line-height:.96}
.logo .word .l1{display:block;font-weight:800;font-size:1.02rem;letter-spacing:.02em;text-transform:uppercase}
.logo .word .l1 .o{color:var(--amber)} .logo .word .l1 .n{color:var(--navy)}
.logo .word .tag{display:block;font-family:'IBM Plex Mono',monospace;font-size:.53rem;letter-spacing:.2em;color:var(--steel);text-transform:uppercase;margin-top:3px}

/* ===== HEADER ===== */
header{position:fixed;top:0;left:0;right:0;z-index:100;transition:transform .4s ease,background .3s,border-color .3s,box-shadow .3s;background:rgba(237,241,244,0);border-bottom:1px solid transparent}
header.scrolled{background:rgba(237,241,244,.85);backdrop-filter:blur(12px);border-bottom:1px solid var(--rule);box-shadow:0 8px 30px -22px rgba(0,0,0,.4)}
header.hide{transform:translateY(-100%)}
.nav{display:flex;align-items:center;justify-content:space-between;height:74px}
.nav-links{display:flex;gap:30px;align-items:center}
.nav-links a{font-family:'IBM Plex Mono',monospace;font-size:.78rem;letter-spacing:.04em;color:var(--steel);position:relative;transition:color .2s}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-5px;width:0;height:2px;background:var(--amber);transition:width .25s}
.nav-links a:hover{color:var(--navy)} .nav-links a:hover::after{width:100%}
.nav-links a.active{color:var(--navy)} .nav-links a.active::after{width:100%}
.nav-cta{font-family:'Saira',sans-serif;font-weight:600!important;font-size:.82rem!important;letter-spacing:.05em;text-transform:uppercase;background:var(--amber);color:#fff!important;padding:11px 22px;transition:background .2s}
.nav-cta::after{display:none}
.nav-cta:hover{background:var(--amber-deep)}
.menu-btn{display:none;background:none;border:1px solid var(--rule);width:44px;height:40px;cursor:pointer;flex-direction:column;justify-content:center;gap:4px;align-items:center}
.menu-btn span{display:block;width:18px;height:1.8px;background:var(--navy);transition:.3s}
.menu-btn.open span:nth-child(1){transform:translateY(5.8px) rotate(45deg)}
.menu-btn.open span:nth-child(2){opacity:0}
.menu-btn.open span:nth-child(3){transform:translateY(-5.8px) rotate(-45deg)}

/* ===== BUTTONS ===== */
.btn-primary{font-family:'Saira',sans-serif;font-weight:600;letter-spacing:.05em;text-transform:uppercase;font-size:.9rem;background:var(--amber);color:#fff;padding:15px 28px;cursor:pointer;display:inline-flex;align-items:center;gap:10px;border:none;transition:transform .18s,box-shadow .18s;will-change:transform}
.btn-primary:hover{box-shadow:0 10px 0 -3px var(--amber-deep)}
.btn-ghost{font-family:'Saira',sans-serif;font-weight:600;letter-spacing:.05em;text-transform:uppercase;font-size:.9rem;background:transparent;color:var(--navy);padding:15px 26px;border:1.5px solid var(--navy);cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:background .18s,color .18s}
.btn-ghost:hover{background:var(--navy);color:#fff}
.btn-dark{font-family:'Saira',sans-serif;font-weight:600;letter-spacing:.05em;text-transform:uppercase;font-size:1rem;background:var(--navy);color:#fff;padding:18px 34px;display:inline-flex;align-items:center;gap:12px;transition:transform .2s;border:none;cursor:pointer}
.btn-dark:hover{transform:translateX(5px)}

/* ===== HOME HERO ===== */
.hero{min-height:100vh;display:flex;align-items:center;padding:120px 0 60px;position:relative;overflow:hidden}
.grid-bg{position:absolute;inset:0;z-index:0;background-image:linear-gradient(var(--rule-soft) 1px,transparent 1px),linear-gradient(90deg,var(--rule-soft) 1px,transparent 1px);background-size:36px 36px;-webkit-mask-image:radial-gradient(ellipse 100% 80% at 60% 40%,#000 25%,transparent 78%);mask-image:radial-gradient(ellipse 100% 80% at 60% 40%,#000 25%,transparent 78%);will-change:transform}
.hero-glow{display:none}
.hero-inner{display:grid;grid-template-columns:1.05fr 1fr;gap:46px;align-items:center;width:100%}
.hero-tag{display:inline-flex;align-items:center;gap:12px;font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--steel);margin-bottom:24px}
.hero-tag .pip{width:24px;height:2px;border-radius:0;background:var(--amber);animation:none}
@keyframes pip{0%{box-shadow:0 0 0 0 rgba(238,106,29,.55)}70%{box-shadow:0 0 0 8px rgba(238,106,29,0)}100%{box-shadow:0 0 0 0 rgba(238,106,29,0)}}
.hero h1{font-family:'Saira',sans-serif;font-weight:900;font-size:clamp(2.7rem,6.2vw,5.2rem);line-height:.93;letter-spacing:-.015em;text-transform:uppercase}
.hero h1 .line{display:block;overflow:hidden}
.hero h1 .thin{font-weight:300;color:var(--steel)}
.hero h1 .amber{color:var(--amber-deep)}
.hero p.lede{font-size:1.07rem;color:var(--steel);max-width:42ch;margin:24px 0 30px}
.hero-actions{display:flex;gap:13px;flex-wrap:wrap}

/* 3D drawing scene */
.scene{perspective:1400px}
.drawing-frame{position:relative;background:var(--paper);border:1px solid var(--rule);padding:26px;aspect-ratio:5/4;box-shadow:0 30px 60px -40px rgba(19,52,76,.5);transform-style:preserve-3d;transition:box-shadow .3s;will-change:transform}
.corner{position:absolute;width:9px;height:9px;border:1.5px solid var(--brand);transform:translateZ(40px)}
.corner.tl{top:8px;left:8px;border-right:none;border-bottom:none}.corner.tr{top:8px;right:8px;border-left:none;border-bottom:none}
.corner.bl{bottom:8px;left:8px;border-right:none;border-top:none}.corner.br{bottom:8px;right:8px;border-left:none;border-top:none}
.drawing-tag{position:absolute;bottom:12px;left:16px;font-family:'IBM Plex Mono',monospace;font-size:.6rem;letter-spacing:.1em;color:var(--steel);transform:translateZ(30px)}
.drawing-tag.r{left:auto;right:16px}
svg.tech{width:100%;height:100%;overflow:visible;transform:translateZ(20px)}
.actuator-motion{animation:stroke 2.8s ease-in-out 1s infinite}
@keyframes stroke{0%,100%{transform:translateX(0)}50%{transform:translateX(10px)}}
.callout{font-family:'IBM Plex Mono',monospace;font-size:9.5px;fill:var(--ink)}
.callout-amber{fill:var(--amber-deep);font-weight:600}
.dim{font-family:'IBM Plex Mono',monospace;font-size:8.5px;fill:var(--steel)}
.scroll-hint{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);z-index:3;font-family:'IBM Plex Mono',monospace;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--steel);display:flex;flex-direction:column;align-items:center;gap:8px}
.scroll-hint .bar{width:1px;height:30px;background:var(--rule);position:relative;overflow:hidden}
.scroll-hint .bar::after{content:"";position:absolute;top:-100%;left:0;width:100%;height:50%;background:var(--amber);animation:scrolldn 1.8s infinite}
@keyframes scrolldn{to{top:100%}}

/* ===== PAGE HERO (inner pages) ===== */
.page-hero{position:relative;padding:170px 0 72px;overflow:hidden;border-bottom:1px solid var(--rule)}
.page-hero .crumb{font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.12em;color:var(--steel);margin-bottom:18px;text-transform:uppercase}
.page-hero .crumb a{color:var(--amber-deep)}
.page-hero h1{font-family:'Saira',sans-serif;font-weight:900;text-transform:uppercase;font-size:clamp(2.4rem,6vw,4.6rem);line-height:.95;letter-spacing:-.015em;color:var(--navy)}
.page-hero h1 .amber{color:var(--amber-deep)}
.page-hero p{color:var(--steel);max-width:54ch;margin-top:20px;font-size:1.06rem}

/* ===== BRANDS MARQUEE ===== */
.brands{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);background:var(--paper-2);overflow:hidden;position:relative;z-index:2;padding:26px 0}
.brands::before{content:"— Authorised distributor —";display:block;text-align:center;font-family:'IBM Plex Mono',monospace;font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--steel);margin-bottom:16px}
.brands .row{display:flex;justify-content:center;flex-wrap:wrap;gap:14px 46px;padding:0;width:auto;animation:none}
.brands .row span{font-family:'Saira',sans-serif;font-weight:800;font-size:1.25rem;letter-spacing:.06em;color:var(--navy);opacity:.6;text-transform:uppercase;white-space:nowrap}
.brands .row span:nth-child(n+7){display:none}
.brands .row span b{color:var(--amber)}

/* ===== STATS ===== */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--rule);background:var(--rule)}
.stat{background:var(--paper);padding:40px 30px;transition:background .25s,transform .25s}
.stat:hover{background:#fff;transform:translateY(-4px)}
.stat .big{font-family:'Saira',sans-serif;font-weight:900;font-size:2.9rem;line-height:1;letter-spacing:-.02em;color:var(--navy)}
.stat .big small{font-size:1.1rem;color:var(--amber-deep)}
.stat .lbl{font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--steel);margin-top:12px}

/* ===== SECTION SHELL ===== */
section{position:relative;padding:96px 0}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:46px;flex-wrap:wrap}
.sec-head h2{font-family:'Saira',sans-serif;font-weight:800;text-transform:uppercase;font-size:clamp(1.9rem,4vw,3rem);line-height:.98;letter-spacing:-.01em;margin-top:12px;color:var(--navy)}
.sec-head p{color:var(--steel);max-width:46ch}

/* ===== SUPPLY / 3D TILT CARDS ===== */
.tilt-wrap{perspective:1000px}
.supply-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.supply{background:var(--paper);border:1px solid var(--rule);padding:30px 28px 26px;display:flex;flex-direction:column;position:relative;overflow:hidden;transform-style:preserve-3d;transition:border-color .25s,box-shadow .3s;will-change:transform}
.supply:hover{border-color:var(--brand);box-shadow:0 30px 60px -38px rgba(19,52,76,.6)}
.supply .num{position:absolute;top:18px;right:22px;font-family:'Saira',sans-serif;font-weight:800;font-size:2.4rem;color:var(--rule-soft);transform:translateZ(10px)}
.supply .ic{width:52px;height:52px;color:var(--brand);margin-bottom:18px;transform:translateZ(40px)}
.supply .ic svg{width:100%;height:100%}
.supply h3{font-family:'Saira',sans-serif;font-weight:700;text-transform:uppercase;font-size:1.28rem;margin-bottom:8px;color:var(--ink);transform:translateZ(28px)}
.supply .bt{font-family:'IBM Plex Mono',monospace;font-size:.66rem;letter-spacing:.1em;color:var(--amber-deep);margin-bottom:12px;text-transform:uppercase}
.supply p{font-size:.9rem;color:var(--steel);line-height:1.5;margin-bottom:18px;transform:translateZ(16px)}
.supply .go{margin-top:auto;font-family:'IBM Plex Mono',monospace;font-size:.76rem;color:var(--navy);display:inline-flex;align-items:center;gap:7px;transition:gap .2s,color .2s}
.supply:hover .go{gap:13px;color:var(--amber-deep)}

/* ===== PRODUCT EXPLORER ===== */
.explorer{display:grid;grid-template-columns:300px 1fr;gap:26px;align-items:start}
.cat-nav{position:sticky;top:96px;display:flex;flex-direction:column;border:1px solid var(--rule);background:var(--paper)}
.cat-btn{text-align:left;background:none;border:none;border-bottom:1px solid var(--rule);padding:20px 22px;cursor:pointer;display:flex;align-items:center;gap:14px;transition:background .2s;position:relative}
.cat-btn:last-child{border-bottom:none}
.cat-btn::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--amber);transform:scaleY(0);transform-origin:top;transition:transform .25s}
.cat-btn.active::before{transform:scaleY(1)}
.cat-btn .ci{width:30px;height:30px;flex:none;color:var(--brand);transition:color .2s}
.cat-btn .ct{font-family:'Saira',sans-serif;font-weight:700;text-transform:uppercase;font-size:1rem;color:var(--ink);line-height:1.05}
.cat-btn .cb{font-family:'IBM Plex Mono',monospace;font-size:.62rem;letter-spacing:.1em;color:var(--amber-deep);margin-top:3px}
.cat-btn .cc{margin-left:auto;font-family:'IBM Plex Mono',monospace;font-size:.7rem;color:var(--steel)}
.cat-btn.active{background:var(--paper-2)}
.cat-btn:hover .ci{color:var(--amber)}
.stage{min-height:400px;perspective:1000px}
.stage-head{display:flex;align-items:baseline;gap:14px;margin-bottom:18px;padding-bottom:14px;border-bottom:2px solid var(--navy)}
.stage-head h3{font-family:'Saira',sans-serif;font-weight:800;text-transform:uppercase;font-size:1.5rem;color:var(--navy)}
.stage-head .sb{font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.12em;color:var(--amber-deep);text-transform:uppercase}
.stage-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.pcard{background:var(--paper);border:1px solid var(--rule);padding:24px 22px;display:flex;flex-direction:column;position:relative;transition:border-color .25s,box-shadow .25s;transform-style:preserve-3d;will-change:transform}
.pcard:hover{border-color:var(--brand);box-shadow:0 20px 40px -30px rgba(19,52,76,.6)}
.pcard .pic{width:44px;height:44px;color:var(--brand);margin-bottom:15px;transform:translateZ(30px)}
.pcard .pic svg{width:100%;height:100%}
.pcard h4{font-family:'Saira',sans-serif;font-weight:700;text-transform:uppercase;font-size:1.04rem;margin-bottom:8px;color:var(--ink);transform:translateZ(22px)}
.pcard p{font-size:.87rem;color:var(--steel);line-height:1.5;margin-bottom:14px;transform:translateZ(14px)}
.pcard .meta{margin-top:auto;font-family:'IBM Plex Mono',monospace;font-size:.68rem;color:var(--steel);border-top:1px dashed var(--rule);padding-top:11px}
.pcard .meta b{color:var(--navy);font-weight:600}
.pcard::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--amber);transition:width .3s}
.pcard:hover::after{width:100%}
.dl-row{margin-top:26px;font-family:'IBM Plex Mono',monospace;font-size:.78rem;color:var(--steel)}
.dl-row a{color:var(--amber-deep);font-weight:600}
.cat-tabs{display:none;gap:8px;overflow-x:auto;padding-bottom:14px;margin-bottom:18px;-webkit-overflow-scrolling:touch}
.cat-tabs button{flex:none;font-family:'IBM Plex Mono',monospace;font-size:.74rem;letter-spacing:.04em;padding:10px 16px;border:1px solid var(--rule);background:var(--paper);cursor:pointer;white-space:nowrap;text-transform:uppercase}
.cat-tabs button.active{background:var(--navy);color:#fff;border-color:var(--navy)}

/* ===== DARK PANEL / VALUES ===== */
.panel-sec{background:var(--panel);color:#fff;border-top:1px solid var(--panel-line);border-bottom:1px solid var(--panel-line);overflow:hidden}
.panel-sec .grid-bg-dark{position:absolute;inset:0;z-index:0;pointer-events:none;background-image:linear-gradient(var(--panel-line) 1px,transparent 1px),linear-gradient(90deg,var(--panel-line) 1px,transparent 1px);background-size:36px 36px;opacity:.5;will-change:transform}
.panel-sec .wrap{position:relative;z-index:2}
.panel-sec .eyebrow{color:var(--amber)}
.panel-sec h2{color:#fff}
.about-lead{font-size:1.18rem;color:var(--panel-text);max-width:70ch;margin-bottom:48px;line-height:1.6}
.about-lead b{color:#fff;font-weight:600}
.values{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.val{border-top:2px solid var(--panel-line);padding-top:22px;position:relative}
.val::before{content:"";position:absolute;top:-2px;left:0;width:40px;height:2px;background:var(--amber)}
.val .vn{font-family:'Saira',sans-serif;font-weight:800;font-size:.85rem;letter-spacing:.2em;color:var(--amber);margin-bottom:14px}
.val h4{font-family:'Saira',sans-serif;font-weight:700;text-transform:uppercase;font-size:1.18rem;margin-bottom:10px}
.val p{font-size:.9rem;color:var(--panel-text);line-height:1.55}

/* ===== CONTACT ===== */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.office{background:var(--paper);padding:36px 32px;border:1px solid var(--rule);position:relative;overflow:hidden;transition:border-color .25s}
.office:hover{border-color:var(--brand)}
.office .tagline{font-family:'IBM Plex Mono',monospace;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--amber-deep);margin-bottom:12px}
.office h3{font-family:'Saira',sans-serif;font-weight:800;text-transform:uppercase;font-size:1.4rem;color:var(--navy);margin-bottom:14px}
.office .addr{color:var(--steel);font-size:.95rem;margin-bottom:18px;line-height:1.55}
.office .line{display:flex;gap:10px;align-items:center;margin-bottom:9px;font-size:.95rem}
.office .line svg{flex:none;color:var(--amber)}
.office a{color:var(--navy);font-weight:500;transition:color .2s}
.office a:hover{color:var(--amber-deep)}
.office .maplink{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-family:'IBM Plex Mono',monospace;font-size:.74rem;color:var(--brand);border:1px solid var(--rule);padding:9px 14px;transition:all .2s}
.office .maplink:hover{background:var(--navy);color:#fff;border-color:var(--navy)}

/* form */
.enq{background:var(--paper);border:1px solid var(--rule);padding:38px 34px}
.enq h3{font-family:'Saira',sans-serif;font-weight:800;text-transform:uppercase;font-size:1.4rem;color:var(--navy);margin-bottom:8px}
.enq .sub{color:var(--steel);font-size:.92rem;margin-bottom:24px}
.field{margin-bottom:18px}
.field label{display:block;font-family:'IBM Plex Mono',monospace;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--steel);margin-bottom:7px}
.field input,.field textarea{width:100%;font-family:'IBM Plex Sans',sans-serif;font-size:.95rem;padding:13px 15px;border:1px solid var(--rule);background:var(--paper-2);color:var(--ink);transition:border-color .2s,background .2s}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--brand);background:#fff}
.field textarea{resize:vertical;min-height:120px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.enq button{width:100%;justify-content:center;margin-top:4px}
.form-note{margin-top:14px;font-family:'IBM Plex Mono',monospace;font-size:.7rem;color:var(--steel)}

/* ===== CTA ===== */
.cta-band{background:var(--amber);position:relative;overflow:hidden}
.cta-band .wrap{padding:64px 32px;display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap}
.cta-band h2{font-family:'Saira',sans-serif;font-weight:900;text-transform:uppercase;font-size:clamp(1.7rem,4vw,2.9rem);line-height:.96;color:#fff;max-width:20ch}

/* ===== FOOTER ===== */
footer{background:var(--panel);color:var(--panel-text);padding:56px 0 28px}
.foot-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.1fr;gap:30px;padding-bottom:38px;border-bottom:1px solid var(--panel-line)}
.foot-grid .logo .l1 .n{color:#fff}
.foot-grid>div>p{font-size:.86rem;margin-top:16px;max-width:32ch}
.foot-col h5{font-family:'IBM Plex Mono',monospace;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:#6E8294;margin-bottom:16px}
.foot-col a{display:block;color:var(--panel-text);font-size:.88rem;margin-bottom:10px;transition:color .2s}
.foot-col a:hover{color:var(--amber)}
.foot-bottom{display:flex;justify-content:space-between;padding-top:22px;font-family:'IBM Plex Mono',monospace;font-size:.72rem;color:#6E8294;flex-wrap:wrap;gap:12px}

/* ===== SCROLL REVEALS ===== */
[data-reveal]{opacity:0;transform:translateY(46px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal][data-dir="left"]{transform:translateX(-60px)}
[data-reveal][data-dir="right"]{transform:translateX(60px)}
[data-stagger]>*{opacity:0;transform:translateY(40px);transition:opacity .75s var(--ease),transform .75s var(--ease)}
[data-stagger].in>*{opacity:1;transform:none}
[data-stagger].in>*:nth-child(1){transition-delay:.05s}[data-stagger].in>*:nth-child(2){transition-delay:.13s}
[data-stagger].in>*:nth-child(3){transition-delay:.21s}[data-stagger].in>*:nth-child(4){transition-delay:.29s}
[data-stagger].in>*:nth-child(5){transition-delay:.37s}[data-stagger].in>*:nth-child(6){transition-delay:.45s}

/* hero/page intro on load */
[data-hline]{display:block;transform:translateY(118%);transition:transform .95s cubic-bezier(.16,.8,.2,1)}
body.intro [data-hline]{transform:translateY(0)}
.hero h1 .line:nth-child(1) [data-hline],.page-hero .line:nth-child(1) [data-hline]{transition-delay:.05s}
.hero h1 .line:nth-child(2) [data-hline]{transition-delay:.17s}
.hero h1 .line:nth-child(3) [data-hline]{transition-delay:.29s}
.intro-fade{opacity:0;transform:translateY(24px);transition:opacity .85s ease,transform .85s ease}
body.intro .intro-fade{opacity:1;transform:none}
body.intro .intro-fade.d1{transition-delay:.1s}body.intro .intro-fade.d2{transition-delay:.3s}
body.intro .intro-fade.d3{transition-delay:.45s}body.intro .intro-fade.d4{transition-delay:.55s}

@keyframes cardIn{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
.stage-grid .pcard{opacity:0;animation:cardIn .55s var(--ease) forwards}
.stage-grid .pcard:nth-child(1){animation-delay:.04s}.stage-grid .pcard:nth-child(2){animation-delay:.1s}
.stage-grid .pcard:nth-child(3){animation-delay:.16s}.stage-grid .pcard:nth-child(4){animation-delay:.22s}
.stage-grid .pcard:nth-child(5){animation-delay:.28s}.stage-grid .pcard:nth-child(6){animation-delay:.34s}

/* ===== ANIMATED ICONS ===== */
.pic svg [class^="ix-"],.ic svg [class^="ix-"],.ci svg [class^="ix-"]{transform-box:fill-box;transform-origin:center}
@keyframes ix-spin{to{transform:rotate(360deg)}}
@keyframes ix-slide{0%,100%{transform:translateX(-3px)}50%{transform:translateX(3px)}}
@keyframes ix-travel{0%,100%{transform:translateX(-4px)}50%{transform:translateX(4px)}}
@keyframes ix-rod{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
@keyframes ix-blink{0%,100%{opacity:1}50%{opacity:.22}}
@keyframes ix-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
.supply:hover .ix-spin,.pcard:hover .ix-spin,.cat-btn.active .ix-spin{animation:ix-spin 2.6s linear infinite}
.supply:hover .ix-slide,.pcard:hover .ix-slide,.cat-btn.active .ix-slide{animation:ix-slide 1.4s ease-in-out infinite}
.supply:hover .ix-travel,.pcard:hover .ix-travel,.cat-btn.active .ix-travel{animation:ix-travel 1.4s ease-in-out infinite}
.supply:hover .ix-rod,.pcard:hover .ix-rod,.cat-btn.active .ix-rod{animation:ix-rod 1.3s ease-in-out infinite}
.supply:hover .ix-blink,.pcard:hover .ix-blink,.cat-btn.active .ix-blink{animation:ix-blink 1s ease-in-out infinite}
.supply:hover .ix-pulse,.pcard:hover .ix-pulse,.cat-btn.active .ix-pulse{animation:ix-pulse 1.2s ease-in-out infinite}

/* ===== ANIMATED LOGO ===== */
.logo .mark .logo-gear{transform-box:fill-box;transform-origin:center}
.logo:hover .mark .logo-gear{animation:gearspin 4s linear infinite}
@keyframes gearspin{to{transform:rotate(360deg)}}
.logo .mark .logo-arrow{stroke-dasharray:78;stroke-dashoffset:0}
.logo:hover .mark .logo-arrow{animation:arrowdraw 1.1s ease}
@keyframes arrowdraw{from{stroke-dashoffset:78}to{stroke-dashoffset:0}}
.pt-mark .logo-gear{transform-box:fill-box;transform-origin:center;animation:gearspin 5s linear infinite}

/* ===== CARD SPOTLIGHT ===== */
.stat{position:relative;overflow:hidden}
.supply::before,.pcard::before,.stat::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(180px circle at var(--mx,50%) var(--my,50%),rgba(238,106,29,.12),transparent 70%)}
.supply:hover::before,.pcard:hover::before,.stat:hover::before{opacity:1}

/* ===== BACK TO TOP ===== */
.to-top{position:fixed;right:26px;bottom:26px;z-index:120;width:48px;height:48px;border:none;background:var(--navy);color:#fff;font-size:1.3rem;cursor:pointer;opacity:0;transform:translateY(14px) scale(.9);pointer-events:none;transition:opacity .3s,transform .3s,background .2s;box-shadow:0 12px 30px -12px rgba(13,34,51,.6)}
.to-top.show{opacity:1;transform:none;pointer-events:auto}
.to-top:hover{background:var(--amber)}
@media(max-width:680px){.to-top{right:18px;bottom:18px;width:44px;height:44px}}

/* ===== INDUSTRIES / WHY ===== */
.industries-row{display:flex;flex-wrap:wrap;gap:10px}
.tag{font-family:'IBM Plex Mono',monospace;font-size:.78rem;letter-spacing:.03em;color:var(--navy);border:1px solid var(--rule);background:var(--paper);padding:11px 17px;transition:border-color .2s,color .2s,transform .2s}
.tag:hover{border-color:var(--amber);color:var(--amber-deep);transform:translateY(-2px)}
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:44px;border-top:1px solid var(--rule)}
.why{padding:28px 26px 28px 0;border-right:1px solid var(--rule)}
.why:last-child{border-right:none;padding-right:0}
.why .wn{font-family:'IBM Plex Mono',monospace;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--amber-deep);margin-bottom:12px}
.why h4{font-family:'Saira',sans-serif;font-weight:700;text-transform:uppercase;font-size:1.16rem;color:var(--navy);margin-bottom:9px}
.why p{font-size:.9rem;color:var(--steel);line-height:1.55}
@media(max-width:680px){.why-grid{grid-template-columns:1fr}.why{border-right:none;border-bottom:1px solid var(--rule);padding:22px 0}.why:last-child{border-bottom:none}}

/* ===== SCROLL GEARS ===== */
.gearwork{position:absolute;z-index:0;pointer-events:none;color:var(--navy);opacity:.06}
.gearwork svg{width:100%;height:100%;display:block;will-change:transform}
@media(max-width:680px){.gearwork{opacity:.045}}

/* ===== RESPONSIVE ===== */
@media(max-width:1000px){
  .hero-inner{grid-template-columns:1fr;gap:30px}
  .scene{max-width:470px;margin-top:4px}
  .stat-grid{grid-template-columns:repeat(2,1fr)}
  .supply-grid{grid-template-columns:repeat(2,1fr)}
  .values{grid-template-columns:repeat(2,1fr)}
  .explorer{grid-template-columns:1fr}
  .cat-nav{display:none}.cat-tabs{display:flex}
  .stage-grid{grid-template-columns:repeat(2,1fr)}
  .contact-grid{grid-template-columns:1fr}
}
@media(max-width:680px){
  .wrap{padding:0 20px}
  .hero{min-height:auto;padding:92px 0 46px}
  .hero h1{font-size:clamp(2.3rem,9.5vw,3.1rem)}
  .scene{max-width:100%}
  .page-hero{padding:112px 0 46px}
  .nav-links{position:fixed;inset:74px 0 auto 0;background:var(--canvas);flex-direction:column;padding:24px;gap:18px;border-bottom:1px solid var(--rule);transform:translateY(-130%);transition:transform .35s ease;z-index:99}
  .nav-links.open{transform:translateY(0)}
  .nav-cta{display:none}
  .menu-btn{display:flex}
  .stat-grid{grid-template-columns:1fr}
  .supply-grid{grid-template-columns:1fr}
  .stage-grid{grid-template-columns:1fr}
  .values{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .field-row{grid-template-columns:1fr}
  .cta-band .wrap{flex-direction:column;align-items:flex-start}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001s!important;transition-duration:.001s!important}
  html{scroll-behavior:auto}
}