/* index.html head styles - 22 inline blocks concatenated IN ORIGINAL ORDER.
Order is load-bearing (nav-lit-fix etc rely on later-wins). */
html{scroll-padding-top:88px}
:root{--ind1:url('../img_8e4052d1ed.webp');--ind2:url('../img_c4c39b1e08.webp');--ind3:url('../img_0897b773e6.webp');--ind4:url('../img_a0969583da.webp');
--paper:#fff;--ink:#15181d;--ink-2:#525a66;--ink3:#8a929e;
--scale:#E9550A;--scale-2:#F26A24;--rule:#eceff3;
--soft:#f4f6f9;
--disp:'Bricolage Grotesque',Arial,'Helvetica Neue',sans-serif;
--mono:'IBM Plex Mono',ui-monospace,monospace;
}
*{box-sizing:border-box}html,body{margin:0}
body{background:#fff;color:var(--ink);font-family:var(--disp);-webkit-font-smoothing:antialiased}
/* Section eyebrow — applied via .sec-eyebrow class (placeholder for chosen style) */
.sec-eyebrow{
display:inline-block;
font:700 13px var(--mono);
letter-spacing:.24em;
text-transform:uppercase;
color:var(--scale);
margin:0;
}
/* ============ FLOATING NAV ============ */
.nav{position:fixed;top:0;left:0;right:0;z-index:120;display:flex;align-items:center;justify-content:space-between;padding:18px 28px;gap:16px;transition:padding .3s ease}
.nav.scrolled{padding:12px 24px}
/* shared capsule style — over-hero glass */
.cap{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);
backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);
border-radius:999px;display:flex;align-items:center;height:64px;
transition:background .35s ease,border .35s ease,box-shadow .35s ease,color .35s ease}
/* scrolled-state: solid white cards */
.nav.scrolled .cap{background:#fff;border-color:var(--rule);box-shadow:0 8px 24px -10px rgba(20,18,16,.18)}
/* === LEFT: LOGO CAPSULE === */
.logo-cap{padding:8px 18px}
.logo-cap img{height:44px;width:auto;display:block;filter:drop-shadow(0 2px 6px rgba(0,0,0,.45));transition:filter .35s ease}
.nav.scrolled .logo-cap img{filter:none;transition:filter .35s ease}
/* === CENTER: LINKS CAPSULE === */
.center-cap{padding:6px 8px;gap:0;position:relative}
.center-cap a{font:500 13px var(--disp);letter-spacing:0;color:#fff;text-decoration:none;padding:10px 16px;border-radius:999px;
transition:color .35s ease,opacity .25s ease;white-space:nowrap;opacity:.92;position:relative;z-index:2}
.center-cap a:hover,.center-cap a.on{color:#fff;opacity:1}
.nav.scrolled .center-cap a{color:var(--ink);opacity:.78}
.nav.scrolled .center-cap a.on,.nav.scrolled .center-cap a:hover{color:#fff;opacity:1}
/* === LIQUID BLOB === */
.center-cap .blob{position:absolute;top:6px;height:calc(100% - 12px);left:0;z-index:1;
background:linear-gradient(120deg,var(--scale) 0%,var(--scale-2) 60%,#ff8a3d 100%);
border-radius:999px;pointer-events:none;opacity:0;
box-shadow:0 8px 24px -8px rgba(233,85,10,.55), inset 0 1px 0 rgba(255,255,255,.18);
transition:transform .55s cubic-bezier(.4,.0,.2,1), width .55s cubic-bezier(.4,.0,.2,1), opacity .3s ease}
.center-cap.ready .blob{opacity:1}
/* v186 REMOVED — root cause of the vanishing nav links.
This forced EVERY link to #fff for the 560ms the pill was sliding. The
nav-lit-fix neutraliser is `.center-cap.moving a` (0,2,1), which could
not beat the #about-view copy at (1,2,1) — so in the About view all six
other links went white on a white cap and disappeared.
.lit already lights the correct link from measured geometry. */
/* === RIGHT: ACTIONS CAPSULE === */
.right-cap{padding:5px 7px;gap:5px}
/* language dropdown trigger */
.lang{position:relative}
.lang-btn{display:inline-flex;align-items:center;gap:5px;font:600 11px var(--mono);letter-spacing:.16em;
color:#fff;background:transparent;border:none;cursor:pointer;padding:9px 12px;border-radius:999px;transition:background .2s ease}
.lang-btn:hover{background:rgba(255,255,255,.16)}
.lang-btn svg{width:9px;height:9px;opacity:.8;transition:transform .25s ease}
.lang.open .lang-btn svg{transform:rotate(180deg)}
.nav.scrolled .lang-btn{color:var(--ink)}
.nav.scrolled .lang-btn:hover{background:rgba(0,0,0,.06)}
.lang-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:152px;background:rgba(20,18,16,.92);
-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:6px;
opacity:0;transform:translateY(-6px) scale(.96);pointer-events:none;transition:.25s cubic-bezier(.2,.7,.2,1);
box-shadow:0 16px 40px -10px rgba(0,0,0,.45)}
.lang.open .lang-menu{opacity:1;transform:none;pointer-events:auto}
.lang-menu a{display:flex;align-items:center;justify-content:space-between;font:500 13px var(--disp);
color:rgba(255,255,255,.85);text-decoration:none;padding:9px 12px;border-radius:8px;transition:background .15s ease}
.lang-menu a:hover{background:rgba(255,255,255,.08);color:#fff}
.lang-menu a.on{color:var(--scale-2)}
.lang-menu a .tick{opacity:0;font-size:11px}
.lang-menu a.on .tick{opacity:1}
.nav.scrolled .lang-menu{background:#fff;border-color:var(--rule);box-shadow:0 16px 40px -10px rgba(20,18,16,.18)}
.nav.scrolled .lang-menu a{color:var(--ink-2)}
.nav.scrolled .lang-menu a:hover{background:rgba(0,0,0,.04);color:var(--ink)}
.nav.scrolled .lang-menu a.on{color:var(--scale)}
/* divider between lang and hamburger */
.right-cap .divider{width:1px;height:22px;background:rgba(255,255,255,.22);margin:0 2px;transition:background .35s ease}
.nav.scrolled .right-cap .divider{background:var(--rule)}
/* hamburger button */
.ham{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:999px;
background:transparent;border:none;cursor:pointer;transition:background .2s ease}
.ham:hover{background:rgba(255,255,255,.16)}
.nav.scrolled .ham:hover{background:rgba(0,0,0,.06)}
.ham .lines{position:relative;width:18px;height:14px}
.ham .lines span{position:absolute;left:0;right:0;height:1.5px;background:#fff;border-radius:1px;transition:.35s cubic-bezier(.7,0,.3,1)}
.ham .lines span:nth-child(1){top:1px}
.ham .lines span:nth-child(2){top:50%;transform:translateY(-50%)}
.ham .lines span:nth-child(3){bottom:1px}
.nav.scrolled .ham .lines span{background:var(--ink)}
/* ham → X */
body.menu-open .ham .lines span:nth-child(1){top:50%;transform:translateY(-50%) rotate(45deg)}
body.menu-open .ham .lines span:nth-child(2){opacity:0}
body.menu-open .ham .lines span:nth-child(3){bottom:50%;transform:translateY(50%) rotate(-45deg)}
body.menu-open .ham .lines span{background:#fff !important}
/* ============ HERO / SCROLL SIMULATION ============ */
.hero{position:relative;height:100vh;background-image:url('../img_68fff597e7.webp');background-size:cover;background-position:center;background-color:#1a1a1a}
.hero::after{content:"";position:absolute;inset:0;
background:linear-gradient(180deg,rgba(20,18,16,.45) 0%,rgba(20,18,16,0) 35%,rgba(20,18,16,0) 70%,rgba(20,18,16,.35) 100%)}
.hero-copy{position:absolute;left:32px;bottom:90px;z-index:2;color:#fff;max-width:540px}
.hero-copy .ey{font:600 11px var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--scale-2)}
.hero-copy h1{font:900 clamp(48px,7vw,90px)/.95 var(--disp);letter-spacing:-.03em;margin:14px 0 10px;text-shadow:0 2px 28px rgba(0,0,0,.5)}
.hero-copy h1 em{font-style:normal;color:var(--scale-2)}
.hero-copy p{font:500 16px/1.55 var(--disp);color:rgba(255,255,255,.86);text-shadow:0 1px 12px rgba(0,0,0,.55)}
.scroll-hint{position:absolute;left:0;right:0;bottom:28px;text-align:center;color:rgba(255,255,255,.7);font:600 10px var(--mono);letter-spacing:.22em;text-transform:uppercase;z-index:2}
.scroll-hint b{color:var(--scale-2)}
/* white section to demo scrolled state */
.section{padding:140px 32px;background:#fff;text-align:center}
.section .ey{font:600 11px var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--scale)}
.section h2{font:800 clamp(34px,5vw,60px) var(--disp);letter-spacing:-.025em;margin:14px auto 14px;max-width:18ch}
.section p{font:500 16px/1.6 var(--disp);color:var(--ink-2);max-width:60ch;margin:0 auto}
/* second section for more scroll */
.section.alt{background:#fafbfc;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
/* ============ FULL-SCREEN MENU OVERLAY ============ */
.menu{position:fixed;inset:0;z-index:100;background:rgba(20,18,16,.96);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);
opacity:0;pointer-events:none;transition:opacity .5s ease}
body.menu-open .menu{opacity:1;pointer-events:auto}
.menu-inner{display:flex;height:100%;padding:120px 80px 60px;gap:80px}
.menu-links{flex:1;display:flex;flex-direction:column;gap:4px}
.menu-links a{font:800 clamp(40px,6.4vw,80px)/.98 var(--disp);letter-spacing:-.03em;color:rgba(255,255,255,.5);text-decoration:none;
display:inline-flex;align-items:baseline;gap:18px;padding:8px 0;transition:color .3s ease,transform .4s ease;
transform:translateY(20px);opacity:0}
body.menu-open .menu-links a{transform:none;opacity:1;transition-delay:var(--d, 0s)}
.menu-links a .n{font:500 13px var(--mono);letter-spacing:.18em;color:var(--scale-2);min-width:36px}
.menu-links a:hover{color:var(--scale-2)}
.menu-links a em{font-style:normal;color:var(--scale-2)}
.menu-aside{width:320px;display:flex;flex-direction:column;justify-content:flex-end;gap:32px;color:rgba(255,255,255,.7);opacity:0;transition:opacity .5s ease .3s}
body.menu-open .menu-aside{opacity:1}
.menu-aside .blk{padding-top:18px;border-top:1px solid rgba(255,255,255,.14)}
.menu-aside .blk .lbl{font:600 10px var(--mono);letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-bottom:8px}
.menu-aside .blk p{margin:0;font:500 14px/1.5 var(--disp);color:rgba(255,255,255,.85)}
.menu-aside a{color:#fff;text-decoration:none}
.menu-aside a:hover{color:var(--scale-2)}
/* ============ RESPONSIVE ============ */
/* on narrower screens, hide center pill — hamburger becomes primary nav */
@media (max-width:1280px){
.center-cap{display:none}
.nav{justify-content:space-between}
}
@media (max-width:860px){
.nav{padding:14px 18px}
.logo-cap{padding:7px 14px;height:58px}
.logo-cap img{height:36px}
.right-cap{height:58px}
.menu-inner{padding:100px 24px 40px;flex-direction:column;gap:40px}
.menu-aside{width:auto}
.menu-links a{font-size:clamp(34px,8vw,52px)}
}
/* hint banner at very top */
.demo-banner{position:fixed;left:0;right:0;bottom:0;z-index:5;text-align:center;background:rgba(20,18,16,.85);color:#fff;font:500 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;padding:10px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.demo-banner b{color:var(--scale-2)}
/* ===== HERO (scroll-scrub canvas) ===== */
.hero{position:relative;background:#0e0f12;height:100vh}
.hero-pin{position:relative;height:100vh;overflow:hidden;background:#0e0f12;background-size:cover;background-position:center}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hero-canvas.ready{opacity:1}
.hero-scrim{position:absolute;inset:0;pointer-events:none;
background:linear-gradient(180deg,rgba(20,18,16,.42) 0%,rgba(20,18,16,0) 28%,rgba(20,18,16,0) 60%,rgba(255,255,255,.06) 100%),
linear-gradient(90deg,rgba(20,18,16,.55) 0%,rgba(20,18,16,.1) 45%,rgba(20,18,16,0) 100%)}
.hero-white{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
/* loading indicator */
.loader{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:7;
font:600 11px var(--mono);letter-spacing:.22em;text-transform:uppercase;color:#fff;
background:rgba(0,0,0,.45);padding:10px 18px;border-radius:999px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
display:flex;align-items:center;gap:10px;transition:opacity .4s ease}
.loader.done{opacity:0;pointer-events:none}
.loader .dot{width:6px;height:6px;border-radius:999px;background:var(--scale-2);animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.4}50%{opacity:1}}
/* chapters */
.chapter{position:absolute;left:0;right:0;bottom:110px;z-index:5;padding:0 56px;pointer-events:none;opacity:0;transform:translateY(22px);transition:opacity .5s ease,transform .6s cubic-bezier(.2,.7,.2,1);will-change:opacity,transform;color:#fff}
.chapter.on{opacity:1;transform:none}
.chapter .num{display:inline-block;font:700 11px var(--mono);letter-spacing:.22em;color:#fff;background:rgba(233,85,10,.92);border-radius:999px;padding:6px 14px;margin-bottom:18px}
.chapter h1{font:900 clamp(48px,7.4vw,100px)/.95 var(--disp);letter-spacing:-.035em;margin:0 0 16px;max-width:14ch;text-shadow:0 2px 28px rgba(0,0,0,.5)}
.chapter h1 em{font-style:normal;color:var(--scale-2)}
.chapter p{font:500 17px/1.55 var(--disp);color:rgba(255,255,255,.86);max-width:520px;margin:0;text-shadow:0 1px 12px rgba(0,0,0,.55)}
/* progress dots */
.hero-prog{position:absolute;right:32px;top:50%;transform:translateY(-50%);z-index:6;display:flex;flex-direction:column;gap:10px}
.hero-prog i{width:7px;height:7px;border-radius:999px;background:rgba(255,255,255,.32);transition:.35s}
.hero-prog i.on{height:30px;background:var(--scale-2)}
/* hint */
.hero-hint{position:absolute;left:0;right:0;bottom:28px;z-index:5;text-align:center;font:600 10px var(--mono);letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.66);transition:opacity .4s ease}
.hero-hint b{color:var(--scale-2)}
/* ===== STATIC HERO CAPTION (never animates) ===== */
.hero-caption{position:absolute;left:48px;bottom:72px;z-index:5;color:#fff;max-width:640px;pointer-events:none}
.hero-caption .ey{font:600 11px var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--scale-2);display:inline-flex;gap:12px;align-items:center}
.hero-caption .ey::before{content:"";width:26px;height:1px;background:var(--scale-2)}
.hero-caption .ht{font:900 clamp(48px,7.4vw,100px)/.95 var(--disp);letter-spacing:-.035em;margin:18px 0 18px;text-shadow:0 2px 28px rgba(0,0,0,.5)}
.hero-caption .ht em{font-style:normal;color:var(--scale-2)}
.hero-caption .hp{font:500 17px/1.55 var(--disp);color:rgba(255,255,255,.86);max-width:520px;margin:0;text-shadow:0 1px 12px rgba(0,0,0,.55)}
@media (max-width:860px){.hero-caption{left:22px;bottom:48px}.hero-caption .ht{font-size:clamp(38px,9vw,58px)}}
/* ============ ABOUT US SECTION ============ */
/* ===== ABOUT SECTION ===== */
.ab{padding:140px 0 120px;background:var(--paper)}
.ab-eyebrow{font:600 11px var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--scale);display:inline-flex;align-items:center;gap:10px}
.ab-eyebrow::before{content:"";width:26px;height:1px;background:var(--scale);display:inline-block}
.ab-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:72px;align-items:start}
/* LEFT — About text + CTA */
.ab-left .ab-h{font-size:clamp(34px,4.6vw,56px);margin:18px 0 22px;color:var(--ink)}
.ab-left .ab-lede{font:500 18px/1.65 var(--disp);color:var(--ink-2);max-width:60ch;margin:0 0 32px}
/* RIGHT — Light stock ticker, BSE only (sticky) */
.ticker{position:static;background:var(--paper);border:1px solid var(--rule);border-top:2px solid var(--scale);border-radius:14px;padding:22px;box-shadow:0 12px 36px -18px rgba(20,18,16,.14)}
.t-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
/* clickable quote link → TradingView */
.t-quote-link{display:block;text-decoration:none;color:inherit;cursor:pointer;padding:6px 0;border-radius:8px;transition:opacity .2s ease}
.t-quote-link:hover{opacity:.92}
.t-quote-link:hover .t-quote-link:focus-visible{outline:2px solid var(--scale);outline-offset:6px}
.t-quote-link:hover .t-quote-link:hover @keyframes tvpulse{0%,100%{box-shadow:0 0 0 3px rgba(22,163,74,.18)}50%{box-shadow:0 0 0 5px rgba(22,163,74,.06)}}
.ab-cta{display:inline-flex;align-items:center;gap:10px;font:600 12px var(--mono);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:var(--ink);background:transparent;border:1.5px solid var(--ink);padding:14px 24px;border-radius:999px;transition:all .28s cubic-bezier(.4,0,.2,1);margin-top:8px}
.ab-cta:hover{background:var(--ink);color:#fff}
.ab-cta:hover{background:var(--scale);border-color:var(--scale);color:#fff}
.ab-cta .arr{transition:transform .28s ease;display:inline-block}
.ab-cta:hover .arr{transform:translateX(5px)}
.ab-right{position:sticky;top:120px;display:grid;gap:14px;align-self:start}
/* 3 small investor link boxes under the ticker */
.t-extras{display:grid;gap:10px}
.t-extra{display:flex;justify-content:space-between;align-items:center;padding:18px 22px;background:var(--paper);border:1px solid var(--rule);border-radius:10px;text-decoration:none;transition:all .28s cubic-bezier(.4,0,.2,1);box-shadow:0 6px 18px -12px rgba(20,18,16,.08)}
.t-extra:hover{border-color:var(--scale);background:rgba(233,85,10,.04);box-shadow:0 10px 28px -14px rgba(233,85,10,.18)}
.t-extra-label{font:600 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.t-extra:hover .t-extra-label{color:var(--scale)}
.t-extra-arr{font:500 16px var(--mono);color:var(--ink-3);transition:all .28s ease;display:inline-block}
.t-extra:hover .t-extra-arr{color:var(--scale);transform:translateX(5px)}
/* Option 6 styling — sparkline card */
.t-scrip-label{font:600 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.t-live-indicator{font:500 9px var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--green,#16a34a);display:inline-flex;align-items:center;gap:6px}
.t-live-indicator .dot{width:6px;height:6px;border-radius:999px;background:#16a34a;box-shadow:0 0 0 3px rgba(22,163,74,.18);animation:livepulse 1.8s ease-in-out infinite}
@keyframes livepulse{0%,100%{box-shadow:0 0 0 3px rgba(22,163,74,.18)}50%{box-shadow:0 0 0 5px rgba(22,163,74,.06)}}
/* TradingView live widget container — sits flush in the ticker card */
.t-tv{margin:4px -4px 0;min-height:220px}
.t-tv iframe{width:100% !important}
.t-tv .tradingview-widget-container{width:100%}
.t-tv iframe{border-radius:8px}
@media (max-width:960px){
.ab{padding:80px 0 60px}
.wrap{padding:0 24px}
.ab-grid{grid-template-columns:1fr;gap:48px}
.ab-right{position:static;top:auto}
.strengths{grid-template-columns:1fr 1fr;margin-top:60px}
}
/* ============ INFRASTRUCTURE — process flow strip ============ */
.infra{background:#fff;padding:80px 32px 70px;position:relative}
.infra-wrap{max-width:1280px;margin:0 auto}
.infra-head{display:grid;grid-template-columns:1.2fr 1fr;gap:60px;align-items:flex-end;margin-bottom:24px}
.infra-eyebrow{font:600 11px var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--scale)}
.infra-h{font:800 clamp(34px,4.6vw,56px)/.98 var(--disp);letter-spacing:-.025em;margin:18px 0 0;color:var(--ink)}
.infra-h em{font-style:normal;color:var(--scale)}
.infra-lede{font:500 16px/1.65 var(--disp);color:var(--ink-2);max-width:44ch;margin:0;padding-bottom:8px}
/* Process flow */
.process-flow{display:flex;align-items:center;gap:14px;padding:36px 0 16px}
.flow-arr{flex-shrink:0;width:48px;height:48px;border-radius:999px;background:#fff;border:1px solid var(--rule);display:flex;align-items:center;justify-content:center;font:400 24px/1 var(--disp);color:var(--ink-2);cursor:pointer;transition:all .25s ease;padding-bottom:3px}
.flow-arr:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.flow-arr:active{transform:scale(.95)}
.flow-track{flex:1;display:flex;align-items:center;justify-content:space-between;position:relative}
.flow-step{display:flex;flex-direction:column;align-items:center;text-align:center;flex-shrink:0;cursor:pointer;min-width:0}
.step-circle{width:64px;height:64px;border-radius:999px;background:#fff;border:1.5px solid var(--ink);display:flex;align-items:center;justify-content:center;color:var(--ink);transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;z-index:2}
.step-circle svg{width:24px;height:24px}
.flow-step:hover .step-circle{border-color:var(--scale);color:var(--scale);transform:translateY(-3px);box-shadow:0 12px 28px -10px rgba(233,85,10,.35)}
.step-num{font:700 10.5px var(--mono);letter-spacing:.18em;color:var(--scale);margin-top:16px}
.step-label{font:600 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink);margin-top:6px;white-space:nowrap}
/* Connecting line — orange with subtle dashed feel */
.flow-connector{flex:1;height:1.5px;background:var(--scale);opacity:.45;margin:0 -2px;position:relative;align-self:flex-start;margin-top:31px;min-width:14px}
/* CTA */
.infra-cta-wrap{display:flex;justify-content:center;margin-top:32px}
.infra-cta{display:inline-flex;align-items:center;gap:14px;font:600 12px var(--mono);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:#fff;background:var(--ink);padding:18px 32px;border-radius:999px;transition:all .28s cubic-bezier(.4,0,.2,1)}
.infra-cta:hover{background:var(--scale)}
.infra-cta .arr{transition:transform .28s ease;display:inline-block;font-family:var(--disp);font-size:15px}
.infra-cta:hover .arr{transform:translateX(6px)}
@media (max-width:960px){
.infra{padding:80px 24px 60px}
.infra-head{grid-template-columns:1fr;gap:24px;align-items:flex-start}
.infra-lede{padding-bottom:0}
.process-flow{gap:8px;padding:36px 0 16px}
.flow-arr{width:38px;height:38px;font-size:18px}
.flow-track{overflow-x:auto;justify-content:flex-start;gap:0;padding-bottom:16px;scrollbar-width:none}
.flow-track::-webkit-scrollbar{display:none}
.flow-step{min-width:90px}
.step-circle{width:60px;height:60px}
.step-circle svg{width:22px;height:22px}
.flow-connector{min-width:30px;flex:0 0 30px}
.infra-cta{padding:15px 24px;font-size:11px}
}
/* ============ INFRASTRUCTURE DEEP-DIVE — Equipment & Capabilities ============ */
.infra-deep{background:#fff;padding:140px 32px 120px;border-top:1px solid var(--rule)}
.id-wrap{max-width:1280px;margin:0 auto}
.id-head{margin-bottom:72px;max-width:880px}
.id-eyebrow{font:600 11px var(--mono);letter-spacing:.26em;text-transform:uppercase;color:var(--scale)}
.id-h{font:800 clamp(48px,6.4vw,84px)/.96 var(--disp);letter-spacing:-.03em;margin:18px 0 0;color:var(--ink)}
.id-h em{font-style:normal;color:var(--scale)}
.id-lede{font:500 18px/1.7 var(--disp);color:var(--ink-2);max-width:62ch;margin:26px 0 0}
.id-subhead{margin:72px 0 44px;max-width:880px}
.id-h--sub{font:800 clamp(34px,4.4vw,56px)/1 var(--disp)}
/* Equipment accordion — horizontal expand-on-hover */
.eq-accordion{display:flex;gap:6px;height:560px;margin:48px 0 64px}
.eq-panel{flex:1 1 0;min-width:80px;background:#fafbfc;border:1px solid var(--rule);border-radius:14px;position:relative;overflow:hidden;cursor:pointer;
transition:flex .65s cubic-bezier(.4,0,.2,1), background .35s ease, border-color .35s ease, box-shadow .35s ease}
.eq-panel:hover{flex:5 1 0;background:#fff;border-color:var(--scale);box-shadow:0 24px 60px -22px rgba(233,85,10,.22)}
.eq-panel::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--scale);opacity:0;transition:opacity .35s ease}
.eq-panel:hover::before{opacity:1}
/* Collapsed state — visible by default */
.ec{position:absolute;inset:0;padding:28px 14px;display:flex;flex-direction:column;justify-content:center;gap:16px;align-items:center;text-align:center;
transition:opacity .3s ease;pointer-events:none}
.eq-panel:hover .ec{opacity:0}
.ec .cn{display:none}
.ec .ci{color:var(--scale-2);display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 2px 9px rgba(0,0,0,.5))}
.ec .ci svg{width:48px;height:48px}
.ec .cl{font:600 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.55);text-align:center;line-height:1.4;max-width:100%}
/* Expanded content — frosted-glass card that slides in AFTER the photo (1.15s delay) */
.ex{position:absolute;left:24px;right:24px;bottom:24px;top:24px;max-width:none;padding:clamp(28px,3vw,46px);
opacity:0;transform:translateY(26px) scale(.985);pointer-events:none;z-index:3;
border-radius:20px;border:1px solid rgba(255,255,255,.16);
background:rgba(14,14,16,.42);-webkit-backdrop-filter:blur(18px) saturate(135%);backdrop-filter:blur(18px) saturate(135%);
box-shadow:0 26px 60px -28px rgba(0,0,0,.7);display:flex;flex-direction:column;justify-content:flex-end;
transition:opacity .4s ease, transform .45s ease}
.eq-panel:hover .ex{opacity:1;transform:translateY(0) scale(1);pointer-events:auto;
transition:opacity .6s ease 1.15s, transform .7s cubic-bezier(.2,.8,.2,1) 1.15s}
.ex .xt{display:flex;justify-content:flex-start;align-items:baseline;margin-bottom:8px}
.ex .xn{display:none}
.ex .xo{font:600 11px var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--scale-2)}
.ex .xh{font:800 clamp(26px,2.9vw,40px)/1.04 var(--disp);letter-spacing:-.022em;margin:0 0 10px;color:#fff}
.ex .xl{font:500 clamp(14px,1.3vw,16px)/1.5 var(--disp);letter-spacing:0;color:rgba(255,255,255,.82);margin:0 0 14px;max-width:640px}
.ex .xd{font:400 clamp(13.5px,1.15vw,15px)/1.6 var(--disp);color:rgba(255,255,255,.7);margin:0 0 20px;max-width:720px}
.ex .xs{margin:0;padding-top:0;border-top:0;display:flex;flex-wrap:wrap;gap:10px 28px}
.ex .xs > div{display:block;padding:0;border-bottom:0}
.ex .xs dt{font:600 9.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.45);margin:0 0 3px}
.ex .xs dd{font:600 13px var(--disp);color:#fff;margin:0;text-align:left}
/* Hover background photo — reveals FIRST over 1.55s (with a slow settle) + left-darkening tint */
/* Collapsed-state ("outside") background photo for each tab */
.eq-cover{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0}
.eq-cover::after{content:"";position:absolute;inset:0;
background:linear-gradient(180deg,rgba(8,8,10,.30) 0%,rgba(8,8,10,.42) 45%,rgba(8,8,10,.62) 100%)}
.eq-photo{position:absolute;inset:0;background-size:cover;background-position:center;
opacity:0;transform:scale(1.1);transition:opacity .5s ease, transform .7s ease;pointer-events:none;z-index:1}
.eq-photo::after{content:"";position:absolute;inset:0;
background:linear-gradient(72deg,rgba(7,7,9,.84),rgba(7,7,9,.34) 56%,rgba(7,7,9,.10))}
.eq-panel:hover .eq-photo{opacity:1;transform:scale(1.02);
transition:opacity 1.55s ease, transform 2.4s cubic-bezier(.2,.7,.2,1)}
.ec{z-index:2}
/* Closing block */
.id-closer{margin-top:120px;padding:80px 0 20px;text-align:center}
.id-closer-h{font:800 clamp(30px,3.6vw,46px)/1.15 var(--disp);letter-spacing:-.022em;margin:18px auto 36px;max-width:24ch;color:var(--ink)}
.id-closer-h em{font-style:normal;color:var(--scale)}
.id-cta{display:inline-flex;align-items:center;gap:12px;font:600 12px var(--mono);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:#fff;background:var(--ink);padding:18px 32px;border-radius:999px;transition:all .28s cubic-bezier(.4,0,.2,1)}
.id-cta:hover{background:var(--scale)}
.id-cta .arr{transition:transform .25s ease;display:inline-block;font-family:var(--disp);font-size:15px}
.id-cta:hover .arr{transform:translateX(6px)}
@media (max-width:960px){
.infra-deep{padding:80px 24px}
.id-head{margin-bottom:40px}
.id-subhead{margin:48px 0 28px}
.eq-accordion{flex-direction:column;height:auto;gap:8px;margin:32px 0 40px}
.eq-panel{flex:0 0 auto;height:auto;min-width:0}
.ec{position:relative;inset:auto;padding:18px 22px;flex-direction:row;justify-content:flex-start;gap:18px;text-align:left}
/* labels are already horizontal */
.ec .ci{display:none}
.eq-cover{display:none}
.ex{position:relative;inset:auto;left:auto;right:auto;bottom:auto;top:auto;max-width:none;transform:none;
padding:0 22px 22px;opacity:1;pointer-events:auto;transition:none;
background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border:0;box-shadow:none;border-radius:0}
.ex .xt{display:none}
.ex .xn{display:none}
.ex .xh{font-size:22px;color:var(--ink)}
.ex .xl{color:var(--ink-2)}
.ex .xd{color:var(--ink-2)}
.ex .xs dt{color:var(--ink-3)}
.ex .xs dd{color:var(--ink)}
.eq-panel{cursor:default}
.eq-panel:hover{flex:0 0 auto;box-shadow:none;border-color:var(--rule);background:#fafbfc}
.eq-panel::before{display:none}
.id-closer{margin-top:48px;padding:32px 0 20px}
}
/* ============ PRODUCTS — Section 05 · Editorial Filmstrip (full-viewport) ============ */
.products{background:#fafbfc;padding:140px 0 120px;border-top:1px solid var(--rule)}
.pr-narrow{max-width:1400px;margin:0 auto;padding:0 32px;box-sizing:border-box}
.pr-head{margin-bottom:60px;max-width:none;width:100%;box-sizing:border-box;padding:0 clamp(28px,5vw,72px);
display:flex;align-items:flex-end;justify-content:space-between;gap:clamp(32px,4.5vw,72px)}
.pr-head-l{flex:1 1 auto;min-width:0}
.pr-eyebrow{font:600 11px var(--mono);letter-spacing:.26em;text-transform:uppercase;color:var(--scale)}
.pr-h{font:800 clamp(48px,6.4vw,84px)/.96 var(--disp);letter-spacing:-.03em;margin:18px 0 26px;color:var(--ink)}
.pr-h em{font-style:normal;color:var(--scale)}
.pr-lede{font:500 18px/1.7 var(--disp);color:var(--ink-2);margin:0;flex:0 1 46%;max-width:560px}
/* Filmstrip wrapper — full viewport width */
.film-wrap{position:relative;padding:24px 0 56px;width:100%}
/* Arrows */
.film-arr{position:absolute;top:calc(50% + 20px);transform:translateY(-50%);z-index:5;width:54px;height:54px;border-radius:999px;border:1.5px solid var(--ink);background:#fff;color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .25s ease;box-shadow:0 8px 24px -10px rgba(20,18,16,.18)}
.film-arr:hover{background:var(--ink);color:#fff;transform:translateY(-50%) scale(1.04)}
.film-arr svg{width:22px;height:22px}
.film-prev{left:32px}
.film-next{right:32px}
.film-arr:disabled{opacity:.2;cursor:not-allowed;pointer-events:none}
/* Scrollable strip */
.filmstrip{width:100%;overflow-x:scroll;overflow-y:hidden;
scroll-snap-type:x mandatory;
scroll-behavior:smooth;
scrollbar-width:none;
-webkit-overflow-scrolling:touch;
padding:40px 0 32px;
overscroll-behavior-x:contain}
.filmstrip::-webkit-scrollbar{display:none}
/* Track — uses 50vw padding so first/last card center correctly */
.film-track{display:flex;gap:48px;padding-left:calc(var(--vw,100vw) / 2 - 220px);padding-right:calc(var(--vw,100vw) / 2 - 220px);align-items:flex-end;will-change:transform;width:max-content}
/* Card */
.film-card{flex:0 0 440px;scroll-snap-align:center;display:flex;flex-direction:column;align-items:center;
opacity:.38;transform:scale(.92);
transition:opacity .35s ease-out, transform .35s ease-out;
cursor:pointer;contain:layout style;will-change:opacity,transform}
.film-card.active{opacity:1;transform:scale(1)}
/* Number above card */
.film-num{font:700 84px/1 var(--mono);color:var(--ink-3);letter-spacing:-.04em;margin-bottom:-14px;
transition:color .35s ease-out, opacity .35s ease-out;opacity:.35;z-index:1;position:relative}
.film-card.active .film-num{color:var(--scale);opacity:1}
/* Card body */
.film-card-inner{background:#fff;border-radius:20px;border:1px solid var(--rule);width:100%;overflow:hidden;position:relative;
transition:box-shadow .35s ease-out, border-color .35s ease-out}
.film-card.active .film-card-inner{box-shadow:0 36px 80px -28px rgba(20,18,16,.24);border-color:rgba(20,18,16,.18)}
/* Tag */
.film-tag{position:absolute;top:18px;left:18px;font:600 10px var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-2);background:rgba(255,255,255,.95);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);padding:8px 13px;border-radius:999px;border:1px solid var(--rule);z-index:2}
/* Image */
.film-img{width:100%;aspect-ratio:5/4;background:#f3f4f6;overflow:hidden}
.film-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.4,0,.2,1)}
.film-card.active .film-img img{transform:scale(1.02)}
/* Meta */
.film-meta{padding:24px 26px 28px}
.film-code{font:800 36px/1 var(--disp);letter-spacing:-.025em;margin:0 0 6px;color:var(--ink)}
.film-sub{font:500 14px/1.45 var(--disp);color:var(--ink-2);margin:0 0 14px}
.film-spec{font:600 12px var(--mono);letter-spacing:.04em;color:var(--ink);margin:0}
/* Underline */
.film-underline{width:48%;height:2px;background:transparent;margin-top:24px;
transition:background .35s ease-out;border-radius:1px}
.film-card.active .film-underline{background:var(--scale)}
/* Dots */
.film-dots{display:flex;justify-content:center;gap:10px;margin-top:8px;padding-top:0}
.film-dot{width:32px;height:3px;border-radius:2px;background:var(--rule);border:none;cursor:pointer;padding:0;
transition:background .3s ease, width .3s ease}
.film-dot:hover{background:var(--ink-3)}
.film-dot.active{background:var(--scale);width:48px}
.film-hint{text-align:center;font:600 10px var(--mono);letter-spacing:.3em;text-transform:uppercase;color:var(--ink-3);margin:32px auto 0}
/* Closer */
.pr-closer{margin-top:80px;padding:48px;background:#fff;border:1px solid var(--rule);border-radius:16px;
display:grid;grid-template-columns:1.4fr .9fr;gap:48px;align-items:center;box-sizing:border-box}
.pr-closer.pr-narrow{padding:48px;margin-left:auto;margin-right:auto;max-width:calc(1400px - 64px)}
.pr-closer-h{font:800 clamp(22px,2.4vw,28px)/1.3 var(--disp);letter-spacing:-.018em;margin:14px 0 0;color:var(--ink);max-width:32ch}
.pr-closer-cta{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.pr-btn-pri,.pr-btn-sec{display:inline-flex;align-items:center;gap:12px;font:600 12px var(--mono);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;padding:18px 28px;border-radius:999px;transition:all .28s cubic-bezier(.4,0,.2,1);width:100%;justify-content:center}
.pr-btn-pri{background:var(--scale);color:#fff}
.pr-btn-pri:hover{background:var(--ink)}
.pr-btn-sec{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
.pr-btn-sec:hover{background:var(--ink);color:#fff}
.pr-btn-pri .arr,.pr-btn-sec .arr{font-family:var(--disp);font-size:14px;transition:transform .25s ease;display:inline-block}
.pr-btn-pri:hover .arr{transform:translateY(3px)}
.pr-btn-sec:hover .arr{transform:translateX(5px)}
@media (max-width:960px){
.products{padding:80px 0}
.pr-narrow{padding:0 20px}
.pr-head{margin-bottom:32px;flex-direction:column;align-items:flex-start;gap:14px;padding:0 20px}
.pr-lede{flex:none;max-width:none}
.film-arr{display:none}
.film-track{gap:20px;padding-left:calc(var(--vw,100vw) / 2 - 150px);padding-right:calc(var(--vw,100vw) / 2 - 150px);width:max-content}
.film-card{flex:0 0 300px}
.filmstrip{padding:28px 0 24px}
.film-num{font-size:56px;margin-bottom:-10px}
.film-code{font-size:26px}
.film-meta{padding:18px 20px 22px}
.film-hint{margin-top:24px;font-size:9px;letter-spacing:.22em}
.pr-closer{grid-template-columns:1fr;padding:28px;gap:24px;margin-top:48px}
.pr-closer-cta{align-items:stretch}
}
/* ============ INDUSTRIES SERVED — Section 06 · Cross-Fade Pinned ============ */
.ind-pin{position:relative;height:500vh;background:#0a0a0c;overflow:visible}
.ip-stage{position:sticky;top:0;height:100vh;overflow:hidden;background:#0a0a0c}
/* Background image layers — all stacked, opacity controlled by JS */
.ip-bg-layer{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.15s cubic-bezier(.45,0,.2,1);will-change:opacity}
.ip-bg-1{opacity:1;background-image:var(--ind1)}
.ip-bg-2{background-image:var(--ind2)}
.ip-bg-3{background-image:var(--ind3)}
.ip-bg-4{background-image:var(--ind4)}
/* Gradient scrim — darker at bottom for content legibility */
.ip-scrim{position:absolute;inset:0;pointer-events:none;z-index:1;
background:linear-gradient(100deg, rgba(8,9,12,.5) 0%, rgba(8,9,12,.18) 40%, rgba(8,9,12,.02) 66%),
linear-gradient(0deg, rgba(8,9,12,.52) 0%, rgba(8,9,12,.12) 24%, transparent 46%)}
.ip-tag,.ip-title,.ip-desc{text-shadow:0 2px 24px rgba(0,0,0,.42)}
.ip-nav-item{text-shadow:0 1px 12px rgba(0,0,0,.5)}
.ip-hint{background:rgba(10,10,12,.26);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.ip-hint .ip-hint-text{text-shadow:0 1px 10px rgba(0,0,0,.5)}
/* Scroll hint top-right */
.ip-hint{position:absolute;bottom:122px;right:60px;z-index:6;display:inline-flex;align-items:center;gap:14px;padding:12px 20px;border:1px solid rgba(255,255,255,.2);border-radius:999px;background:rgba(255,255,255,.05);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.ip-hint-text{font:600 11px var(--mono);letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.85)}
.ip-hint-arr{font:600 15px var(--disp);color:var(--scale);animation:hintBounceV 1.6s ease-in-out infinite}
@keyframes hintBounceV{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
/* Vertical progress bar on right edge */
.ip-vbar{position:absolute;top:50%;transform:translateY(-50%);right:24px;width:2px;height:200px;background:rgba(255,255,255,.15);z-index:5;border-radius:1px;overflow:hidden}
.ip-vbar-fill{position:absolute;top:0;left:0;width:100%;height:0%;background:var(--scale);transition:height .15s linear;border-radius:1px}
/* Content layers — absolute, opacity + small Y crossfade */
.ip-content-layer{position:absolute;left:0;right:0;bottom:170px;padding:0 80px;z-index:3;opacity:0;transform:translateY(20px);transition:opacity .7s cubic-bezier(.4,0,.2,1), transform .7s cubic-bezier(.4,0,.2,1);will-change:opacity,transform;pointer-events:none}
.ip-content-layer.active{opacity:1;transform:translateY(0);pointer-events:auto}
.ip-c-inner{max-width:780px}
.ip-tag{font:600 11px var(--mono);letter-spacing:.32em;text-transform:uppercase;color:rgba(255,255,255,.75);display:inline-flex;align-items:center;gap:14px}
.ip-tag::before{content:"";display:inline-block;width:6px;height:6px;background:var(--scale);border-radius:50%}
.ip-title{font:800 clamp(72px,9vw,140px)/.95 var(--disp);letter-spacing:-.04em;color:#fff;margin:18px 0 18px}
.ip-title em{font-style:normal;color:var(--scale);font-size:1em}
.ip-rule{width:64px;height:3px;background:var(--scale);margin-bottom:28px;border-radius:2px}
.ip-desc{font:500 17px/1.65 var(--disp);color:rgba(255,255,255,.92);margin:0;max-width:62ch}
/* Bottom nav */
.ip-nav{position:absolute;bottom:36px;left:60px;right:60px;z-index:5}
.ip-nav-segs{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.ip-seg{position:relative;height:3px;background:rgba(255,255,255,.18);border-radius:2px;overflow:hidden}
.ip-seg-fill{position:absolute;inset:0;background:linear-gradient(90deg,var(--scale),var(--scale-2));border-radius:2px;transform:scaleX(0);transform-origin:left center;box-shadow:0 0 8px rgba(233,85,10,.45)}
.ip-nav-row{display:grid;grid-template-columns:repeat(4,1fr);margin-top:18px}
.ip-nav-item{background:none;border:none;cursor:pointer;text-align:left;display:flex;align-items:baseline;gap:14px;font-family:inherit;color:rgba(255,255,255,.4);transition:color .3s ease;padding:6px 0}
.ip-nav-item:hover{color:rgba(255,255,255,.7)}
.ip-nav-item.active{color:#fff}
.ip-nav-item .nn{font:700 11px var(--mono);letter-spacing:.1em}
.ip-nav-item .nm{font:700 16px var(--disp);letter-spacing:-.01em}
/* Trusted-by client strip — light, normal flow */
.industries-clients{background:#fff;padding:60px 32px 100px}
.ic-wrap{max-width:1280px;margin:0 auto}
.ih-eyebrow{font:600 11px var(--mono);letter-spacing:.26em;text-transform:uppercase;color:var(--scale)}
.ic-head{margin-bottom:40px;max-width:720px}
.ic-sub{font:500 15px/1.65 var(--disp);color:var(--ink-2);margin:12px 0 0}
/* Logo marquee — left-to-right continuous flow, hover to pause */
.tb-marquee{
overflow:hidden;
padding:48px 0 16px;
position:relative;
/* Fade-out edges — items blend into background at left/right */
-webkit-mask-image:linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
mask-image:linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.tb-track{
display:flex;
gap:88px;
width:max-content;
align-items:center;
/* LEFT → RIGHT motion: track starts shifted left, moves to zero */
animation: tbMarquee 38s linear infinite;
will-change:transform;
backface-visibility:hidden;
}
.tb-track:hover{animation-play-state:paused}
@keyframes tbMarquee{
from { transform: translate3d(-50%, 0, 0); }
to { transform: translate3d(0, 0, 0); }
}
.tb-logo{
flex:0 0 auto;
height:60px;
width:200px;
display:flex;
align-items:center;
justify-content:center;
}
.tb-logo svg{
max-height:100%;
max-width:100%;
width:auto;
height:auto;
filter:grayscale(100%) opacity(.55);
transition:filter .35s ease;
}
.tb-track:hover .tb-logo svg{filter:grayscale(0%) opacity(1)}
@media (max-width:760px){
.tb-marquee{padding:32px 0 8px}
.tb-track{gap:56px;animation-duration:30s}
.tb-logo{height:48px;width:150px}
}
/* MOBILE — disable pin; show 4 sections stacked, each with bg photo */
@media (max-width:960px){
.ind-pin{height:auto;background:#0a0a0c}
.ip-stage{position:static;height:auto;overflow:visible;display:flex;flex-direction:column}
.ip-bg-layer{display:none}
.ip-scrim{display:none}
.ip-hint{display:none}
.ip-vbar{display:none}
.ip-nav{display:none}
.ip-content-layer{position:relative;inset:auto;bottom:auto;padding:0;height:auto;opacity:1;transform:none;pointer-events:auto;min-height:100vh;display:flex;align-items:flex-end;padding:48px 24px 40px;background-size:cover;background-position:center}
.ip-content-layer[data-idx="0"]{background-image:linear-gradient(180deg, rgba(10,10,12,.10) 0%, rgba(10,10,12,.16) 42%, rgba(10,10,12,.6) 100%), var(--ind1)}
.ip-content-layer[data-idx="1"]{background-image:linear-gradient(180deg, rgba(10,10,12,.10) 0%, rgba(10,10,12,.16) 42%, rgba(10,10,12,.6) 100%), var(--ind2)}
.ip-content-layer[data-idx="2"]{background-image:linear-gradient(180deg, rgba(10,10,12,.10) 0%, rgba(10,10,12,.16) 42%, rgba(10,10,12,.6) 100%), var(--ind3)}
.ip-content-layer[data-idx="3"]{background-image:linear-gradient(180deg, rgba(10,10,12,.10) 0%, rgba(10,10,12,.16) 42%, rgba(10,10,12,.6) 100%), var(--ind4)}
.ip-title{font-size:60px;margin:14px 0 12px}
.ip-desc{font-size:15px;color:rgba(255,255,255,.9)}
.industries-clients{padding:60px 20px}
}
/* Exit transition — fades the dark Industries section to white before Key Apps begins */
.ip-exit-overlay{
position:absolute;inset:0;
background:#fff;
opacity:0;
pointer-events:none;
z-index:7;
will-change:opacity;
}
/* ============ KEY APPLICATIONS · Photo-led BHX bento ============ */
.apps-pbhx{padding:120px 28px 130px;background:#fff;position:relative;border-top:1px solid var(--rule)}
.apps-pbhx-head{max-width:780px;margin:0 auto 56px;text-align:center}
.apps-pbhx-ey{font:600 11px var(--mono);letter-spacing:.26em;text-transform:uppercase;color:var(--scale);display:inline-block;margin-bottom:14px}
.apps-pbhx-h{font:800 clamp(34px,4.6vw,58px)/1.02 var(--disp);letter-spacing:-.028em;color:var(--ink);margin:0 0 18px}
.apps-pbhx-h em{font-style:normal;color:var(--scale)}
.apps-pbhx-lede{font:500 15.5px/1.65 var(--disp);color:var(--ink-2);margin:0 auto;max-width:60ch}
/* Bento grid */
.pbhx{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:minmax(240px,auto);gap:10px}
/* Base tile */
.pbhx-tile{position:relative;overflow:hidden;border-radius:14px;cursor:pointer;background:#0a0a0c;display:block;color:#fff;transition:transform .35s cubic-bezier(.2,.6,.2,1),box-shadow .35s;min-height:240px;isolation:isolate;text-decoration:none}
.pbhx-tile:hover{transform:translateY(-4px);box-shadow:0 22px 44px -22px rgba(20,20,25,.32)}
.pbhx-tile > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform 1s cubic-bezier(.2,.6,.2,1),filter .35s;z-index:0;filter:saturate(.95) contrast(1.02)}
.pbhx-tile:hover > img{transform:scale(1.06);filter:saturate(1.05) contrast(1.05)}
.pbhx-tile::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.05) 0%,rgba(0,0,0,.15) 35%,rgba(0,0,0,.78) 95%);transition:opacity .35s}
.pbhx-tile::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(circle at 100% 0%,rgba(233,85,10,.1) 0%,transparent 50%);opacity:0;transition:opacity .45s}
.pbhx-tile:hover::after{opacity:1}
/* Number eyebrow */
.pbhx-num{position:absolute;top:18px;left:20px;z-index:3;font:600 10.5px var(--mono);letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.92);display:flex;align-items:center;gap:7px}
.pbhx-num::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--scale)}
/* Arrow circle */
.pbhx-arrow{position:absolute;top:16px;right:16px;z-index:3;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.16);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.28);display:flex;align-items:center;justify-content:center;color:#fff;transition:all .3s cubic-bezier(.2,.6,.2,1)}
.pbhx-tile:hover .pbhx-arrow{background:var(--scale);border-color:var(--scale);transform:translate(3px,-3px) scale(1.05);box-shadow:0 8px 18px -6px rgba(233,85,10,.5)}
/* Bottom content overlay */
.pbhx-content{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:24px 24px 22px;display:flex;flex-direction:column;gap:4px}
.pbhx-name{font:700 22px/1.12 var(--disp);letter-spacing:-.018em;color:#fff;margin:0;transition:transform .35s cubic-bezier(.2,.6,.2,1);text-shadow:0 2px 12px rgba(0,0,0,.25)}
.pbhx-tile:hover .pbhx-name{transform:translateY(-6px)}
/* Hover-reveal spec row */
.pbhx-reveal{max-height:0;opacity:0;overflow:hidden;transition:max-height .4s cubic-bezier(.2,.6,.2,1),opacity .3s ease,margin-top .25s;margin-top:0}
.pbhx-tile:hover .pbhx-reveal{max-height:30px;opacity:1;margin-top:8px}
.pbhx-reveal-row{display:flex;align-items:center;gap:10px;font:500 10.5px var(--mono);letter-spacing:.16em;color:rgba(255,255,255,.92);text-transform:uppercase}
.pbhx-reveal-row .arr{margin-left:auto;color:var(--scale-2);font-size:14px;font-weight:600}
/* Variants */
.pbhx-feature{grid-column:span 6;grid-row:span 2;min-height:494px}
.pbhx-feature::before{background:linear-gradient(180deg,rgba(0,0,0,.1) 0%,rgba(0,0,0,.25) 30%,rgba(0,0,0,.88) 95%)}
.pbhx-feature .pbhx-content{padding:34px 36px 32px}
.pbhx-feature .pbhx-name{font:800 48px/1 var(--disp);letter-spacing:-.028em}
.pbhx-feature .pbhx-num{font-size:11px;top:24px;left:28px}
.pbhx-feature .pbhx-arrow{width:42px;height:42px;top:22px;right:22px}
.pbhx-feature .pbhx-meta-permanent{font:600 11px var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--scale-2);margin-top:12px}
.pbhx-feature .pbhx-feature-desc{font:500 13.5px/1.65 var(--disp);color:rgba(255,255,255,.85);margin:14px 0 0;max-width:50ch;max-height:0;opacity:0;overflow:hidden;transition:max-height .45s cubic-bezier(.2,.6,.2,1),opacity .35s,margin .35s}
.pbhx-feature:hover .pbhx-feature-desc{max-height:120px;opacity:1;margin-top:14px}
.pbhx-half{grid-column:span 6}
.pbhx-third{grid-column:span 4}
.pbhx-third .pbhx-name{font-size:18px}
.pbhx-quarter{grid-column:span 3}
.pbhx-quarter .pbhx-name{font-size:17px}
.pbhx-quarter .pbhx-num{font-size:9.5px;letter-spacing:.18em}
.pbhx-quarter .pbhx-content{padding:18px 18px 16px}
.pbhx-full{grid-column:span 12;min-height:160px}
.pbhx-full::before{background:linear-gradient(90deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,.55) 40%,rgba(0,0,0,.85) 100%)}
.pbhx-full .pbhx-content,.pbhx-full-content{position:absolute;inset:0;padding:24px 32px;display:flex;align-items:center;gap:24px;flex-direction:row}
.pbhx-full .pbhx-name{font-size:24px;margin:0;flex-shrink:0}
.pbhx-full .pbhx-num{position:static;flex-shrink:0}
.pbhx-full .pbhx-num::before{display:none}
.pbhx-full-reveal{display:flex;align-items:center;gap:10px;font:500 10.5px var(--mono);letter-spacing:.16em;color:rgba(255,255,255,.85);text-transform:uppercase;margin-left:auto;padding-right:64px}
/* Accent variant */
.pbhx-accent::before{background:linear-gradient(180deg,rgba(122,50,9,.15) 0%,rgba(122,50,9,.4) 35%,rgba(233,85,10,.92) 95%) !important}
.pbhx-accent::after{background:radial-gradient(circle at 100% 0%,rgba(255,255,255,.18) 0%,transparent 50%);opacity:1}
.pbhx-accent .pbhx-num{color:rgba(255,255,255,.95)}
.pbhx-accent .pbhx-num::before{background:#fff}
.pbhx-accent:hover .pbhx-arrow{background:#fff;color:var(--scale);border-color:#fff;box-shadow:0 8px 18px -6px rgba(0,0,0,.3)}
.pbhx-accent .pbhx-reveal-row .arr{color:#fff}
/* Reveal animation on header */
.pbhx-reveal-head{opacity:0;transform:translateY(30px);transition:opacity .8s cubic-bezier(.2,.6,.2,1),transform .8s cubic-bezier(.2,.6,.2,1)}
.pbhx-reveal-head.is-visible{opacity:1;transform:translateY(0)}
.pbhx-ko{position:absolute;inset:0;z-index:4;display:grid;place-items:center;padding:0 8%;text-align:center;
background:rgba(9,10,13,0);opacity:0;transition:opacity .4s ease,background .45s ease}
.pbhx-tile:hover .pbhx-ko,.pbhx-tile.open .pbhx-ko{opacity:1;background:rgba(9,10,13,.56)}
.pbhx-ko-t{display:inline-block;margin:0;font:900 clamp(20px,4.4vw,38px)/0.9 var(--disp);text-transform:uppercase;letter-spacing:-.03em;
color:transparent;-webkit-background-clip:text;background-clip:text;background-image:linear-gradient(135deg,var(--g1),var(--g2));
transform:translateY(14px);opacity:0;transition:transform .5s cubic-bezier(.2,.7,.2,1) .05s,opacity .4s ease .05s}
.pbhx-tile:hover .pbhx-ko-t,.pbhx-tile.open .pbhx-ko-t{transform:none;opacity:1}
.pbhx-ko.bo{--g1:#E9550A;--g2:#F26A24} .pbhx-ko.bb{--g1:#3f87f6;--g2:#1763e8}
.pbhx-feature .pbhx-ko-t{font-size:clamp(34px,5.5vw,58px)}
.pbhx-quarter .pbhx-ko-t{font-size:clamp(15px,2.6vw,22px)}
.pbhx-full .pbhx-ko-t{font-size:clamp(22px,3.4vw,34px)}
/* Tablet */
@media (max-width:980px){
.apps-pbhx{padding:80px 22px 90px}
.apps-pbhx-head{margin-bottom:42px}
.pbhx{grid-auto-rows:minmax(200px,auto);gap:8px}
.pbhx-tile{min-height:200px}
.pbhx-feature{min-height:412px}
.pbhx-feature .pbhx-name{font-size:36px}
.pbhx-feature .pbhx-content{padding:24px 26px}
.pbhx-name{font-size:19px}
}
/* Mobile */
@media (max-width:680px){
.apps-pbhx{padding:60px 16px 70px}
.pbhx{grid-template-columns:repeat(2,1fr);gap:8px;grid-auto-rows:minmax(170px,auto)}
.pbhx-tile{min-height:170px}
.pbhx-feature{grid-column:span 2;grid-row:span 1;min-height:280px}
.pbhx-half{grid-column:span 2;min-height:200px}
.pbhx-third{grid-column:span 1}
.pbhx-quarter{grid-column:span 1}
.pbhx-full{grid-column:span 2}
.pbhx-feature .pbhx-name{font-size:30px}
.pbhx-name{font-size:15px}
.pbhx-content{padding:14px 14px 12px}
.pbhx-num{top:12px;left:12px;font-size:9.5px;letter-spacing:.14em}
.pbhx-arrow{width:28px;height:28px;top:10px;right:10px}
.pbhx-quarter .pbhx-name{font-size:14px}
.pbhx-reveal{max-height:none;opacity:1;margin-top:6px}
.pbhx-feature-desc{display:none}
.pbhx-full-reveal{display:none}
.pbhx-full .pbhx-content{padding:18px 18px}
.pbhx-full .pbhx-name{font-size:17px}
}
/* ============ INVESTOR RELATIONS — Section 07 (v2) · PDF Gallery ============ */
.invest{
padding:120px 32px 100px;
background:#fff;
position:relative;
}
.invest-header{
max-width:1280px;
margin:0 auto 36px;
}
.invest-header .sec-eyebrow{display:block;margin-bottom:14px}
.invest-h{
font:700 clamp(34px,4.2vw,50px)/1.05 var(--disp);
letter-spacing:-.025em;
color:var(--ink);
margin:0 0 14px;
}
.invest-sub{
font:600 12px var(--mono);
letter-spacing:.18em;
text-transform:uppercase;
color:var(--ink-3);
margin:0;
}
/* Filter chips - horizontal scrollable on mobile */
.invest-filters{
max-width:1280px;
margin:0 auto 28px;
display:flex;
gap:7px;
flex-wrap:wrap;
}
.ir-chip{
font:600 11px var(--mono);
letter-spacing:.12em;
text-transform:uppercase;
padding:9px 14px;
border:1px solid var(--rule);
background:#fff;
border-radius:6px;
color:var(--ink-2);
cursor:pointer;
transition:all .2s ease;
white-space:nowrap;
}
.ir-chip:hover{border-color:var(--ink);color:var(--ink)}
.ir-chip.active{
background:var(--ink);
color:#fff;
border-color:var(--ink);
}
/* PDF tile grid */
.invest-grid{
max-width:1280px;
margin:0 auto 80px;
display:grid;
grid-template-columns:repeat(4,1fr);
gap:16px;
}
.ir-tile{
background:#fff;
border:1px solid var(--rule);
border-radius:10px;
overflow:hidden;
text-decoration:none;
color:var(--ink);
transition:transform .35s cubic-bezier(.2,.6,.2,1), box-shadow .35s ease, border-color .25s ease;
cursor:pointer;
display:flex;
flex-direction:column;
}
.ir-tile:hover{
transform:translateY(-4px);
box-shadow:0 18px 38px -18px rgba(20,20,25,.18);
border-color:var(--ink-4);
}
.ir-tile.ir-hidden{display:none}
.ir-thumb{
aspect-ratio:3/4;
background:linear-gradient(165deg,#fff 0%,#fafbfc 55%,#f1f4f8 100%);
position:relative;
padding:22px;
display:flex;
flex-direction:column;
justify-content:flex-end;
border-bottom:1px solid var(--rule);
overflow:hidden;
}
.ir-thumb::before{
content:'';
position:absolute;
top:22px;
right:22px;
width:38px;
height:46px;
background:var(--scale-soft,#FFF1E8);
border-radius:4px;
border:1px solid #f5d4bb;
}
.ir-thumb::after{
content:'PDF';
position:absolute;
top:37px;
right:26px;
font:700 9.5px var(--mono);
color:var(--scale);
letter-spacing:.08em;
width:30px;
text-align:center;
}
.ir-thumb-logo{
position:absolute;
top:22px;
left:22px;
font:700 10px var(--mono);
letter-spacing:.24em;
color:var(--ink);
text-transform:uppercase;
}
.ir-thumb-year{
font:800 28px var(--disp);
letter-spacing:-.02em;
color:var(--ink);
line-height:1;
margin-bottom:6px;
max-width:78%;
}
.ir-thumb-title{
font:600 12.5px var(--disp);
letter-spacing:-.005em;
color:var(--ink-2);
line-height:1.3;
max-width:80%;
}
.ir-info{
padding:13px 15px 16px;
display:flex;
flex-direction:column;
gap:4px;
}
.ir-info-cat{
font:600 9.5px var(--mono);
letter-spacing:.18em;
text-transform:uppercase;
color:var(--scale);
}
.ir-info-name{
font:600 13.5px var(--disp);
letter-spacing:-.005em;
color:var(--ink);
line-height:1.3;
}
.ir-info-meta{
font:500 10.5px var(--mono);
letter-spacing:.08em;
color:var(--ink-3);
}
/* Compact contact block */
.invest-contact-compact{
max-width:1280px;
margin:0 auto;
padding:32px 36px;
background:var(--soft);
border-radius:10px;
display:grid;
grid-template-columns:1fr 1.5fr;
gap:48px;
align-items:center;
}
.icc-left .sec-eyebrow{display:block;margin-bottom:10px}
.icc-pitch{
font:500 14px/1.55 var(--disp);
color:var(--ink-2);
margin:0;
max-width:40ch;
}
.icc-right{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:32px;
}
.icc-item{
display:flex;
flex-direction:column;
gap:4px;
}
.icc-label{
font:600 10px var(--mono);
letter-spacing:.22em;
text-transform:uppercase;
color:var(--ink-3);
}
.icc-value{
font:600 14px var(--disp);
color:var(--ink);
text-decoration:none;
transition:color .2s ease;
}
a.icc-value:hover{color:var(--scale)}
/* Tablet */
@media (max-width:1100px){
.invest-grid{grid-template-columns:repeat(3,1fr)}
}
/* Mobile */
@media (max-width:760px){
.invest{padding:64px 20px 60px}
.invest-header{margin-bottom:24px}
.invest-h{font-size:30px}
.invest-sub{font-size:10px}
.invest-filters{
flex-wrap:nowrap;
overflow-x:auto;
padding-bottom:8px;
margin-bottom:20px;
scrollbar-width:none;
}
.invest-filters::-webkit-scrollbar{display:none}
.ir-chip{padding:8px 12px;font-size:10.5px}
.invest-grid{grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:48px}
.ir-thumb{padding:14px}
.ir-thumb::before{width:28px;height:34px;top:14px;right:14px}
.ir-thumb::after{top:24px;right:17px;font-size:8px;width:22px}
.ir-thumb-logo{top:14px;left:14px;font-size:8.5px;letter-spacing:.2em}
.ir-thumb-year{font-size:20px}
.ir-thumb-title{font-size:10.5px}
.ir-info{padding:10px 12px 12px}
.ir-info-name{font-size:12.5px}
.ir-info-meta{font-size:9.5px}
.invest-contact-compact{
grid-template-columns:1fr;
gap:24px;
padding:24px 22px;
}
.icc-right{
grid-template-columns:1fr;
gap:18px;
}
}
/* ===== Investor category cards — light, headings only ===== */
.invest-cats{
max-width:1280px;margin:0 auto 72px;
display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
}
.ir-cat-card{
background:#fff;border:1px solid var(--rule);border-radius:10px;
padding:24px 22px;text-decoration:none;color:var(--ink);
display:flex;flex-direction:column;justify-content:space-between;
min-height:160px;cursor:pointer;
transition:transform .3s cubic-bezier(.2,.6,.2,1), border-color .25s ease, box-shadow .25s ease;
position:relative;overflow:hidden;
}
.ir-cat-card:hover{
border-color:var(--ink);transform:translateY(-3px);
box-shadow:0 14px 32px -16px rgba(20,20,25,.14);
}
.ir-cat-card::before{
content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
background:var(--scale);transform:scaleY(0);transform-origin:top;
transition:transform .3s ease;
}
.ir-cat-card:hover::before{transform:scaleY(1)}
.ir-cat-card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.ir-cat-num{font:600 11px var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--ink-3)}
.ir-cat-arrow{
width:28px;height:28px;border:1px solid var(--rule);border-radius:50%;
display:flex;align-items:center;justify-content:center;color:var(--ink-3);
transition:all .25s ease;
}
.ir-cat-card:hover .ir-cat-arrow{
background:var(--scale);color:#fff;border-color:var(--scale);transform:translateX(2px);
}
.ir-cat-body{display:flex;flex-direction:column;gap:8px}
.ir-cat-name{font:700 17px/1.25 var(--disp);letter-spacing:-.01em;color:var(--ink);margin:0}
.ir-cat-meta{
display:flex;align-items:center;gap:6px;
font:500 11px var(--mono);letter-spacing:.1em;color:var(--ink-3);text-transform:uppercase;
}
.ir-cat-dot{color:var(--ink-4)}
@media (max-width:1100px){.invest-cats{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){
.invest-cats{grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:48px}
.ir-cat-card{padding:18px 16px;min-height:130px}
.ir-cat-name{font-size:14px}
.ir-cat-meta{font-size:10px}
.ir-cat-arrow{width:24px;height:24px}
}
/* ===== BHX: Bento × Hover-reveal combo ===== */
.bhx{
max-width:1280px;margin:0 auto 72px;
display:grid;grid-template-columns:repeat(12,1fr);
grid-auto-rows:minmax(110px,auto);gap:10px;
}
.bhx-tile{
position:relative;background:#fff;border:1px solid var(--rule);border-radius:14px;
padding:24px 22px;display:flex;flex-direction:column;justify-content:space-between;
text-decoration:none;color:var(--ink);overflow:hidden;cursor:pointer;
transition:transform .35s cubic-bezier(.2,.6,.2,1), border-color .25s, box-shadow .3s;
min-height:110px;
}
.bhx-tile:hover{
border-color:var(--ink);transform:translateY(-4px);
box-shadow:0 18px 36px -18px rgba(20,20,25,.16);
}
.bhx-tile::after{
content:'';position:absolute;inset:auto -50% -60% auto;width:180px;height:180px;
background:radial-gradient(circle, rgba(233,85,10,.1), transparent 70%);
opacity:0;transition:opacity .4s ease;pointer-events:none;
}
.bhx-tile:hover::after{opacity:1}
.bhx-num{font:600 10.5px var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--ink-3);position:relative;z-index:2}
.bhx-name{
font:700 22px/1.08 var(--disp);letter-spacing:-.018em;color:var(--ink);margin:14px 0 0;
position:relative;z-index:2;transition:transform .35s cubic-bezier(.2,.6,.2,1);
}
.bhx-tile:hover .bhx-name{transform:translateY(-4px)}
.bhx-reveal{
max-height:0;overflow:hidden;opacity:0;
transition:max-height .4s cubic-bezier(.2,.6,.2,1), opacity .3s ease, margin-top .25s;
position:relative;z-index:2;
}
.bhx-tile:hover .bhx-reveal{max-height:50px;opacity:1;margin-top:10px}
.bhx-reveal-row{
display:flex;align-items:center;gap:10px;
font:500 10.5px var(--mono);letter-spacing:.12em;color:var(--ink-3);text-transform:uppercase;
}
.bhx-reveal-row .arr{margin-left:auto;color:var(--scale);font-size:13px;font-weight:600}
.bhx-arrow{
position:absolute;top:22px;right:22px;width:30px;height:30px;
border:1px solid var(--rule);border-radius:50%;
display:flex;align-items:center;justify-content:center;color:var(--ink-3);
transition:all .3s ease;z-index:2;
}
.bhx-tile:hover .bhx-arrow{
background:var(--scale);color:#fff;border-color:var(--scale);transform:translateX(3px);
}
/* Sizes */
.bhx-feature{grid-column:span 6;grid-row:span 2}
.bhx-half{grid-column:span 6}
.bhx-third{grid-column:span 4}
.bhx-quarter{grid-column:span 3}
.bhx-full{grid-column:span 12;padding:18px 24px;min-height:auto}
/* Feature tile (Annual Reports) */
.bhx-feature{
background:linear-gradient(160deg, #15181d 0%, #1a1d23 100%);
border-color:#15181d;color:#fff;padding:32px 30px;
}
.bhx-feature:hover{border-color:var(--scale)}
.bhx-feature .bhx-num{color:rgba(255,255,255,.55)}
.bhx-feature .bhx-name{font-size:42px;color:#fff;line-height:1.02;margin-top:auto}
.bhx-feature .bhx-arrow{
background:var(--scale);border-color:var(--scale);color:#fff;
width:38px;height:38px;
}
.bhx-feature::after{
inset:auto -30% -40% auto;width:260px;height:260px;
background:radial-gradient(circle, rgba(233,85,10,.4), transparent 70%);opacity:.3;
}
.bhx-feature:hover::after{opacity:.7}
.bhx-feature .bhx-meta-permanent{
font:500 11px var(--mono);letter-spacing:.14em;color:rgba(255,255,255,.55);
text-transform:uppercase;margin-top:8px;
}
/* Accent tile (Financial Results) */
.bhx-accent{background:var(--scale-soft);border-color:rgba(233,85,10,.18)}
.bhx-accent:hover{border-color:var(--scale);background:#FFE5D2}
.bhx-accent .bhx-num{color:var(--scale);font-weight:700}
.bhx-accent .bhx-name{color:#7a3209}
.bhx-accent:hover .bhx-name{color:var(--scale)}
.bhx-accent .bhx-arrow{border-color:rgba(233,85,10,.25);color:var(--scale)}
.bhx-accent:hover .bhx-arrow{background:var(--scale);color:#fff;border-color:var(--scale)}
/* Full-width slim tile */
.bhx-full{
display:grid;grid-template-columns:auto 1fr auto auto;gap:18px;
align-items:center;padding:18px 26px;background:var(--soft);border-color:transparent;
}
.bhx-full .bhx-num{margin:0}
.bhx-full .bhx-name{font-size:18px;margin:0}
.bhx-full .bhx-reveal{display:block;max-height:none;opacity:1;margin:0}
.bhx-full .bhx-reveal-row{font-size:10px}
.bhx-full .bhx-arrow{position:static;width:30px;height:30px}
.bhx-full:hover{transform:translateX(4px);background:#fff}
.bhx-full:hover .bhx-name{transform:none}
.bhx-full::after{display:none}
/* Medium tile typography */
.bhx-third .bhx-name,.bhx-quarter .bhx-name{font-size:17px}
.bhx-half .bhx-name{font-size:24px}
/* Tablet */
@media (max-width:1080px){
.bhx{grid-template-columns:repeat(6,1fr)}
.bhx-feature{grid-column:span 6;grid-row:span 1}
.bhx-half{grid-column:span 6}
.bhx-third{grid-column:span 3}
.bhx-quarter{grid-column:span 3}
.bhx-feature .bhx-name{font-size:32px}
}
/* Mobile */
@media (max-width:760px){
.bhx{grid-template-columns:repeat(2,1fr);gap:8px}
.bhx-feature{grid-column:span 2;grid-row:span 1;padding:22px 20px;min-height:130px}
.bhx-feature .bhx-name{font-size:24px}
.bhx-half,.bhx-third,.bhx-quarter{grid-column:span 1}
.bhx-full{grid-column:span 2}
.bhx-tile{padding:16px 14px;min-height:96px}
.bhx-name{font-size:14px}
.bhx-half .bhx-name{font-size:15.5px}
.bhx-arrow{top:14px;right:14px;width:24px;height:24px}
.bhx-feature .bhx-arrow{width:30px;height:30px}
/* On mobile show meta permanently (no hover) */
.bhx-reveal{max-height:none;opacity:1;margin-top:8px}
.bhx-reveal-row{font-size:9.5px;letter-spacing:.08em}
.bhx-reveal-row .arr{display:none}
.bhx-feature .bhx-meta-permanent{font-size:10px}
.bhx-full{grid-template-columns:auto 1fr auto;padding:14px 16px}
.bhx-full .bhx-reveal{display:none}
}
/* ===== Sustainability & ESG (Alternating Splits) ===== */
.sus{padding:120px 28px 140px;background:#fff;position:relative;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.sus-head{max-width:780px;margin:0 auto 80px;text-align:center}
.sus-eyebrow{font:600 11px var(--mono);letter-spacing:.26em;text-transform:uppercase;color:var(--scale);display:inline-block;margin-bottom:14px}
.sus-h{font:800 clamp(34px,4.6vw,58px)/1.02 var(--disp);letter-spacing:-.028em;color:var(--ink);margin:0 0 18px}
.sus-h em{font-style:normal;color:var(--scale)}
.sus-lede{font:500 16px/1.65 var(--disp);color:var(--ink-2);margin:0 auto;max-width:60ch}
.sus-stack{max-width:1240px;margin:0 auto;display:flex;flex-direction:column;gap:130px}
.sus-row{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;position:relative}
.sus-row.sus-flip .sus-text{order:2}
.sus-row.sus-flip .sus-photo{order:1}
.sus-text{display:flex;flex-direction:column;align-items:flex-start;gap:0}
.sus-num{font:600 11px var(--mono);letter-spacing:.26em;text-transform:uppercase;color:var(--scale);margin-bottom:14px;display:inline-flex;align-items:center;gap:8px}
.sus-num::before{content:'';width:32px;height:1.5px;background:var(--scale)}
.sus-rh{font:800 clamp(28px,3.6vw,46px)/1.02 var(--disp);letter-spacing:-.022em;color:var(--ink);margin:0 0 18px}
.sus-rh em{font-style:normal;color:var(--scale)}
.sus-rd{font:500 15.5px/1.7 var(--disp);color:var(--ink-2);margin:0 0 26px;max-width:52ch}
.sus-achs{display:flex;flex-direction:column;gap:11px;margin:0 0 32px}
.sus-ach{font:500 12.5px var(--mono);letter-spacing:.06em;color:var(--ink);text-transform:uppercase;padding-left:24px;position:relative}
.sus-ach::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:14px;height:14px;border-radius:50%;background:var(--scale-soft);border:1.5px solid var(--scale)}
.sus-ach::after{content:'';position:absolute;left:4px;top:50%;transform:translateY(-65%) rotate(45deg);width:4px;height:7px;border-right:1.5px solid var(--scale);border-bottom:1.5px solid var(--scale)}
.sus-lk{font:700 11.5px var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--ink);display:inline-flex;align-items:center;gap:8px;padding:14px 20px;border:1.5px solid var(--ink);border-radius:6px;transition:all .25s ease;background:#fff;text-decoration:none}
.sus-lk svg{transition:transform .25s ease}
.sus-lk:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.sus-lk:hover svg{transform:translateX(4px)}
.sus-photo{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:5/4;box-shadow:0 28px 56px -28px rgba(20,20,25,.22)}
.sus-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s cubic-bezier(.2,.6,.2,1)}
.sus-row:hover .sus-photo img{transform:scale(1.03)}
.sus-photo::before{content:'';position:absolute;left:-22px;top:40px;bottom:40px;width:4px;background:var(--scale);border-radius:2px;z-index:-1}
.sus-row.sus-flip .sus-photo::before{left:auto;right:-22px}
.sus-photo::after{content:attr(data-badge);position:absolute;top:18px;left:18px;font:700 10.5px var(--mono);letter-spacing:.22em;text-transform:uppercase;background:rgba(255,255,255,.95);color:var(--scale-deep);padding:7px 11px;border-radius:5px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.6)}
.sus-reveal{opacity:0;transform:translateY(40px);transition:opacity .9s cubic-bezier(.2,.6,.2,1), transform .9s cubic-bezier(.2,.6,.2,1)}
.sus-reveal.is-visible{opacity:1;transform:translateY(0)}
@media (max-width:980px){.sus{padding:80px 24px 100px}.sus-head{margin-bottom:60px}.sus-stack{gap:80px}.sus-row{gap:50px}.sus-rh{font-size:32px}}
@media (max-width:760px){
.sus{padding:60px 18px 70px}
.sus-head{margin-bottom:44px}
.sus-stack{gap:54px}
.sus-row,.sus-row.sus-flip{grid-template-columns:1fr;gap:24px}
.sus-row.sus-flip .sus-text{order:2}
.sus-row.sus-flip .sus-photo{order:1}
.sus-rh{font-size:26px}
.sus-rd{font-size:14px}
.sus-ach{font-size:11px}
.sus-photo{aspect-ratio:4/3;border-radius:12px}
.sus-photo::before{display:none}
.sus-photo::after{top:12px;left:12px;font-size:9.5px;padding:5px 9px}
.sus-lk{font-size:10.5px;padding:12px 16px}
}
/* ===== Contact (BHX language: bento + form panel) ===== */
.cn{
padding:120px 28px 140px;background:var(--soft);position:relative;
border-top:1px solid var(--rule);
}
.cn-head{max-width:780px;margin:0 auto 56px;text-align:center}
.cn-eyebrow{font:600 11px var(--mono);letter-spacing:.26em;text-transform:uppercase;color:var(--scale);display:inline-block;margin-bottom:14px}
.cn-h{font:800 clamp(34px,4.6vw,58px)/1.02 var(--disp);letter-spacing:-.028em;color:var(--ink);margin:0 0 18px}
.cn-h em{font-style:normal;color:var(--scale)}
.cn-lede{font:500 15.5px/1.65 var(--disp);color:var(--ink-2);margin:0 auto;max-width:60ch}
/* BHX in contact section - tighter bottom margin so form follows naturally */
.cn-bhx{margin:0 auto 56px !important}
/* Form panel below the bento */
.cn-form-section{
max-width:1280px;margin:0 auto;
background:#fff;border:1px solid var(--rule);border-radius:18px;
padding:48px 48px;
box-shadow:0 24px 64px -36px rgba(20,20,25,.14);
}
.cn-form-grid{
display:grid;grid-template-columns:1fr 1.25fr;gap:60px;align-items:start;
}
.cn-form-pitch{display:flex;flex-direction:column;gap:14px;position:sticky;top:80px}
.cn-illu{display:block;width:100%;height:auto;margin:0 0 22px;overflow:visible}
.cn-illu g{fill:none;stroke:var(--scale);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.cn-form-num{font:700 11px var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--scale)}
.cn-form-h{font:800 32px/1.06 var(--disp);letter-spacing:-.022em;color:var(--ink);margin:6px 0 10px}
.cn-form-h em{font-style:normal;color:var(--scale)}
.cn-form-sub{font:500 14px/1.65 var(--disp);color:var(--ink-2);margin:0 0 18px;max-width:36ch}
.cn-form-hints{display:flex;flex-direction:column;gap:9px;margin-top:8px;padding-top:18px;border-top:1px solid var(--rule)}
.cn-form-hint{
font:500 12px/1.5 var(--mono);letter-spacing:.04em;color:var(--ink-2);
display:flex;align-items:flex-start;gap:10px;
}
.cn-form-hint .hint-key{
font:700 10px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--scale);
background:var(--scale-soft);padding:3px 7px;border-radius:4px;
border:1px solid rgba(233,85,10,.18);min-width:64px;text-align:center;flex-shrink:0;
}
/* Form fields */
.cn-form{display:flex;flex-direction:column;gap:20px}
.cn-hp{position:absolute;left:-9999px;opacity:0;pointer-events:none}
.cn-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
/* floating-label field */
.cn-field{position:relative;width:100%}
.cn-field input,.cn-field textarea,.cn-field select{
font:500 14px var(--disp);color:var(--ink);
background:var(--soft);border:1.5px solid var(--rule);border-radius:8px;
padding:22px 14px 9px;outline:none;
transition:border-color .2s, background .2s, box-shadow .2s;
width:100%;box-sizing:border-box;
}
.cn-field textarea{resize:vertical;min-height:128px;line-height:1.55;padding-top:26px}
.cn-label{
position:absolute;left:14px;top:15px;
font:500 14px var(--disp);color:#8a929e;
pointer-events:none;transform-origin:left top;
transition:transform .18s ease, color .18s ease;
}
.cn-label .req{color:var(--scale);margin-left:2px}
.cn-field input:focus + .cn-label,
.cn-field input:not(:placeholder-shown) + .cn-label,
.cn-field textarea:focus + .cn-label,
.cn-field textarea:not(:placeholder-shown) + .cn-label,
.cn-field.is-filled .cn-label{
transform:translateY(-9px) scale(.7);
color:var(--ink-2);letter-spacing:.16em;text-transform:uppercase;
}
.cn-field input:focus + .cn-label,
.cn-field textarea:focus + .cn-label,
.cn-field select:focus ~ .cn-label{color:var(--scale)}
.cn-field input::placeholder,.cn-field textarea::placeholder{color:transparent}
.cn-field input:focus::placeholder,.cn-field textarea:focus::placeholder{color:#8a929e}
.cn-field input:focus,.cn-field textarea:focus,.cn-field select:focus{
border-color:var(--scale);background:#fff;
box-shadow:0 0 0 4px rgba(233,85,10,.08);
}
/* animated focus underline */
.cn-field::after{
content:'';position:absolute;left:10px;right:10px;bottom:0;height:2px;
background:var(--scale);border-radius:2px;
transform:scaleX(0);transform-origin:center;
transition:transform .26s cubic-bezier(.2,.7,.2,1);
}
.cn-field:focus-within::after{transform:scaleX(1)}
/* filled-field cue */
.cn-field.is-filled input,.cn-field.is-filled textarea,.cn-field.is-filled select{
border-color:rgba(233,85,10,.35);
}
.cn-tick{
position:absolute;right:13px;top:16px;width:16px;height:16px;border-radius:50%;
background:var(--scale);display:flex;align-items:center;justify-content:center;
opacity:0;transform:scale(.4);transition:opacity .2s, transform .2s;
}
.cn-field.is-filled .cn-tick{opacity:1;transform:scale(1)}
.cn-field textarea ~ .cn-tick{top:18px}
/* select */
.cn-select-wrap{position:relative;width:100%}
.cn-field select{appearance:none;-webkit-appearance:none;-moz-appearance:none;padding-right:38px;cursor:pointer}
.cn-select-arrow{position:absolute;right:14px;top:22px;color:var(--ink-2);pointer-events:none;transition:transform .2s, right .2s}
.cn-field.is-filled .cn-select-arrow{right:36px}
.cn-field select:focus ~ .cn-select-arrow{transform:rotate(180deg);color:var(--scale)}
.cn-form-foot{display:flex;flex-direction:column;gap:10px;margin-top:8px}
/* submit micro-states */
.cn-submit{
position:relative;overflow:hidden;
font:700 12px var(--mono);letter-spacing:.22em;text-transform:uppercase;color:#fff;
background:var(--scale);border:none;border-radius:8px;
padding:16px 22px;cursor:pointer;
display:inline-flex;align-items:center;justify-content:center;gap:10px;
transition:background .2s, transform .12s, box-shadow .2s;align-self:stretch;font-family:var(--mono);
}
.cn-submit svg{transition:transform .25s ease}
.cn-submit:hover{background:var(--scale-2);transform:translateY(-1px);box-shadow:0 12px 28px -10px rgba(233,85,10,.45)}
.cn-submit:hover svg{transform:translateX(4px)}
.cn-submit:active{transform:translateY(0) scale(.99)}
.cn-submit .ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.45);transform:scale(0);animation:cn-rip .55s ease-out;pointer-events:none}
@keyframes cn-rip{to{transform:scale(2.6);opacity:0}}
.cn-submit.is-loading{pointer-events:none;background:var(--scale-2)}
.cn-submit.is-loading .cn-submit-label,.cn-submit.is-loading svg{opacity:0}
.cn-submit .spin{position:absolute;width:16px;height:16px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;opacity:0;animation:cn-sp .7s linear infinite}
.cn-submit.is-loading .spin{opacity:1}
@keyframes cn-sp{to{transform:rotate(360deg)}}
.cn-form-note{font:500 11px/1.5 var(--mono);letter-spacing:.04em;color:#8a929e;margin:4px 0 0;text-align:center}
/* Reveal animation */
.cn-reveal{opacity:0;transform:translateY(30px);transition:opacity .8s cubic-bezier(.2,.6,.2,1), transform .8s cubic-bezier(.2,.6,.2,1)}
.cn-reveal.is-visible{opacity:1;transform:translateY(0)}
/* Tablet */
@media (max-width:980px){
.cn{padding:80px 24px 100px}
.cn-head{margin-bottom:42px}
.cn-bhx{margin-bottom:36px !important}
.cn-form-section{padding:36px 28px}
.cn-form-grid{grid-template-columns:1fr;gap:32px}
.cn-form-pitch{position:static}
.cn-form-h{font-size:26px}
}
/* Mobile */
@media (max-width:600px){
.cn{padding:60px 18px 70px}
.cn-head{margin-bottom:36px}
.cn-form-section{padding:24px 20px;border-radius:12px}
.cn-form-h{font-size:22px}
.cn-form-hint{font-size:11px;gap:8px}
.cn-form-hint .hint-key{min-width:54px;font-size:9px}
.cn-row{grid-template-columns:1fr}
.cn-field input,.cn-field textarea,.cn-field select{font-size:13.5px;padding:12px 12px}
.cn-submit{font-size:11px;padding:14px 20px}
}
/* ===== FOOTER ===== */
.ft{
position:relative;z-index:20;background:#0f0e0c;color:rgba(255,255,255,.78);
padding:44px 28px 22px;overflow:hidden;
}
.ft-glow{
position:absolute;top:-200px;left:50%;transform:translateX(-50%);
width:1400px;height:380px;
background:radial-gradient(ellipse at center, rgba(233,85,10,.09) 0%, transparent 60%);
pointer-events:none;z-index:0;
}
.ft > *{position:relative;z-index:1}
/* Top section: brand + 3 nav cols */
.ft-top{
max-width:1280px;margin:0 auto;
display:grid;grid-template-columns:1.6fr 1fr 1.15fr 1.25fr;gap:30px;
padding-bottom:30px;border-bottom:1px solid rgba(255,255,255,.08);
}
/* Brand column */
.ft-brand-col{display:flex;flex-direction:column;gap:12px;max-width:340px}
.ft-brand{display:flex;flex-direction:column;gap:2px;text-decoration:none}
.ft-wordmark{
font:800 24px/1 var(--disp);letter-spacing:-.02em;color:#fff;
display:inline-flex;align-items:baseline;gap:2px;position:relative;
}
.ft-dot{
display:inline-block;width:7px;height:7px;border-radius:50%;
background:var(--scale);margin-left:6px;transform:translateY(-2px);
}
.ft-wordmark-sub{
font:600 11px var(--mono);letter-spacing:.22em;text-transform:uppercase;
color:rgba(255,255,255,.45);margin-top:6px;
}
.ft-tag{
font:600 13px var(--mono);letter-spacing:.16em;text-transform:uppercase;
color:var(--scale-2);margin:6px 0 0;
}
.ft-blurb{
font:500 13px/1.65 var(--disp);color:rgba(255,255,255,.6);margin:0;
}
.ft-social{display:flex;gap:10px;margin-top:6px}
.ft-soc-btn{
width:33px;height:33px;border:1px solid rgba(255,255,255,.14);border-radius:8px;
display:flex;align-items:center;justify-content:center;
color:rgba(255,255,255,.7);transition:all .25s ease;
}
.ft-soc-btn:hover{
background:var(--scale);border-color:var(--scale);color:#fff;
transform:translateY(-2px);
}
/* Nav columns */
.ft-col{display:flex;flex-direction:column;gap:10px}
.ft-col-h{
font:700 10.5px var(--mono);letter-spacing:.28em;text-transform:uppercase;
color:#fff;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.12);
margin-bottom:2px;display:flex;align-items:center;gap:8px;
}
.ft-col-h::before{
content:'';width:6px;height:6px;border-radius:50%;background:var(--scale);
}
.ft-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
.ft-list a{
font:500 12.5px/1.45 var(--disp);color:rgba(255,255,255,.65);text-decoration:none;
transition:color .2s, padding-left .2s;display:inline-block;
}
.ft-list a:hover{color:#fff;padding-left:6px}
/* Address strip */
.ft-addr{
max-width:1280px;margin:0 auto;
display:grid;grid-template-columns:1fr 1fr auto;gap:30px;align-items:start;
padding:20px 0 20px;border-bottom:1px solid rgba(255,255,255,.08);
}
.ft-addr-block{display:flex;flex-direction:column;gap:8px}
.ft-addr-ey{
font:600 10px var(--mono);letter-spacing:.28em;text-transform:uppercase;
color:var(--scale);
}
.ft-addr-body{
font:500 12.5px/1.55 var(--disp);color:rgba(255,255,255,.75);font-style:normal;margin:0;
}
.ft-addr-cta{align-items:flex-end}
.ft-addr-lk{
font:700 11px var(--mono);letter-spacing:.22em;text-transform:uppercase;color:#fff;
background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:8px;
padding:12px 18px;display:inline-flex;align-items:center;gap:10px;
transition:all .25s ease;text-decoration:none;
}
.ft-addr-lk svg{transition:transform .25s ease}
.ft-addr-lk:hover{background:var(--scale);border-color:var(--scale);transform:translateY(-2px)}
.ft-addr-lk:hover svg{transform:translateX(3px)}
/* Bottom compliance strip */
.ft-bottom{
max-width:1280px;margin:0 auto;
display:flex;justify-content:space-between;align-items:center;gap:24px;
padding-top:16px;flex-wrap:wrap;
}
.ft-legal{
display:flex;align-items:center;gap:20px;flex-wrap:wrap;
font:500 11px var(--mono);letter-spacing:.06em;color:rgba(255,255,255,.5);
}
.ft-copy{color:rgba(255,255,255,.7)}
.ft-cin{position:relative;padding-left:20px}
.ft-cin::before{
content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
width:8px;height:8px;border:1.5px solid var(--scale);border-radius:50%;
}
.ft-iso{position:relative;padding-left:20px}
.ft-iso::before{
content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
width:5px;height:5px;background:var(--scale);border-radius:50%;
}
.ft-utility{
display:flex;align-items:center;gap:14px;
font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;
}
.ft-utility a{color:rgba(255,255,255,.55);transition:color .2s;text-decoration:none}
.ft-utility a:hover{color:#fff}
.ft-sep{color:rgba(255,255,255,.2)}
.ft-totop{
display:inline-flex;align-items:center;gap:6px;
padding:7px 11px;border:1px solid rgba(255,255,255,.14);border-radius:6px;
color:rgba(255,255,255,.7) !important;
}
.ft-totop svg{transition:transform .25s}
.ft-totop:hover{background:var(--scale);border-color:var(--scale);color:#fff !important}
.ft-totop:hover svg{transform:translateY(-2px)}
/* Tablet */
@media (max-width:980px){
.ft{padding:60px 22px 24px}
.ft-top{grid-template-columns:1fr 1fr;gap:36px}
.ft-brand-col{grid-column:span 2}
.ft-addr{grid-template-columns:1fr 1fr;gap:24px}
.ft-addr-cta{grid-column:span 2;align-items:flex-start;margin-top:8px}
}
/* Mobile */
@media (max-width:600px){
.ft{padding:48px 18px 20px}
.ft-top{grid-template-columns:1fr;gap:32px;padding-bottom:36px}
.ft-brand-col{grid-column:auto;max-width:none}
.ft-wordmark{font-size:28px}
.ft-addr{grid-template-columns:1fr;gap:24px;padding:28px 0}
.ft-addr-cta{grid-column:auto}
.ft-bottom{flex-direction:column;align-items:flex-start;gap:16px}
.ft-legal{gap:14px}
.ft-cin,.ft-iso{padding-left:18px}
.ft-utility{flex-wrap:wrap}
}
/* Nav anchor scroll offset - so sticky nav doesn't cover section headings */
section[id], footer[id]{scroll-margin-top:84px}
/* NB: no global `scroll-behavior:smooth` — it fights GSAP ScrollTrigger and breaks programmatic auto-scroll.
Smooth scrolling is applied explicitly in JS (window.scrollTo) where wanted. */
.sp-card{background:#fff;color:var(--ink);border:1px solid #e7ebf0;border-top:2px solid var(--scale);border-radius:14px;
padding:20px;box-shadow:0 14px 36px -20px rgba(20,40,80,.28);display:flex;flex-direction:column;gap:13px}
.sp-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.sp-scrip{font:700 14px var(--disp);display:flex;flex-direction:column;letter-spacing:-.01em}
.sp-scrip small{font:500 9.5px var(--mono);opacity:.55;letter-spacing:.12em;margin-top:3px}
.sp-headr{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.sp-live{font:600 8.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;display:inline-flex;align-items:center;gap:5px;opacity:.7}
.sp-live .dot{width:6px;height:6px;border-radius:50%;background:#16a34a;animation:splp 1.6s infinite}
@keyframes splp{0%{box-shadow:0 0 0 0 rgba(22,163,74,.5)}100%{box-shadow:0 0 0 7px rgba(22,163,74,0)}}
.sp-switch{position:relative;display:inline-flex;background:rgba(0,0,0,.06);padding:3px;border-radius:20px;font:600 10px var(--mono);letter-spacing:.06em}
.sp-switch button{position:relative;z-index:1;border:0;background:none;color:inherit;cursor:pointer;font:inherit;padding:5px 13px;border-radius:16px;opacity:.6;transition:opacity .25s,color .25s}
.sp-switch button.active{opacity:1;color:#fff}
.sp-switch .ind{position:absolute;top:3px;left:3px;width:calc(50% - 3px);height:calc(100% - 6px);border-radius:16px;background:linear-gradient(135deg,var(--scale),var(--scale-2));z-index:0;transition:transform .3s cubic-bezier(.4,0,.2,1)}
.sp-switch.is-y .ind{transform:translateX(100%)}
.sp-pricerow{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.sp-price{font:800 32px var(--disp);letter-spacing:-.025em;line-height:1}
.sp-price .cur{font-size:16px;opacity:.55;font-weight:600;margin-right:2px}
.sp-chg{display:inline-flex;align-items:center;gap:7px;font:600 13px var(--mono);color:#16a34a}
.sp-chg .ar{font-size:11px}.sp-chg.down{color:#e0533a}
.sp-chart{width:100%;height:96px;display:block;overflow:visible}
.sp-chart .grid line{stroke:var(--ink);opacity:.09}
.sp-chart .area{fill:url(#spg);stroke:none}
.sp-chart .line{fill:none;stroke:#16a34a;stroke-width:2;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round;transition:d .5s ease}
.sp-axis{display:flex;justify-content:space-between;font:600 9px var(--mono);opacity:.5}
.sp-cells{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sp-cell{background:rgba(0,0,0,.04);border-radius:10px;padding:9px 11px}
.sp-cell .l{font:600 8.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;opacity:.5}
.sp-cell .v{font:700 12.5px var(--disp);margin-top:3px}
.sp-tv{min-height:78px}
.sp-tv .tradingview-widget-container{width:100%}
.sp-prev{display:flex;align-items:baseline;justify-content:space-between;gap:12px;border-top:1px solid #eef1f5;padding-top:11px}
.sp-prev .l{font:600 9px var(--mono);letter-spacing:.14em;text-transform:uppercase;opacity:.55}
.sp-prev .v{font:700 14px var(--disp)}
.sp-live.closed .dot{background:#9aa1ad;animation:none}
.sp-live.closed .txt{opacity:.72}
@media(prefers-reduced-motion:reduce){.sp-live .dot{animation:none}}
/* eight items: tighten the strip between the cutoff and comfortable width */
@media (min-width:1281px) and (max-width:1560px){.center-cap a{padding:10px clamp(9px,.85vw,16px);font-size:clamp(11.6px,.86vw,13px)}}
#sustain.sus{background:#0f0e0c;padding:0;margin:0}
/* About Us — blurred photo background (3px) + legible light text */
.ab{background:var(--soft);position:relative;overflow:hidden}
.ab-bg{position:absolute;inset:0;z-index:0;background:url('../img_e089e78fda.webp') center/cover no-repeat;filter:blur(2px);transform:scale(1.05)}
.ab-scrim{position:absolute;inset:0;z-index:0;background:linear-gradient(100deg,rgba(247,244,241,.93),rgba(247,244,241,.72) 46%,rgba(247,244,241,.44) 88%),linear-gradient(0deg,rgba(247,244,241,.55),transparent 42%)}
.ab > .wrap{position:relative;z-index:1}
.ab-left .ab-h{color:var(--ink)}
.ab-left .ab-lede{color:var(--ink-2)}
.ab-cta{color:var(--ink);border-color:rgba(21,24,29,.35)}
.ab-bg{filter:blur(2px) brightness(1.12) saturate(1.04)}
/* Equipment & Capabilities — blurred plant photo background (3px) */
.infra-deep{background:#0c1118;position:relative;overflow:hidden}
.infra-deep .id-bg{position:absolute;inset:0;z-index:0;background:url('../img_47ccebab95.webp') center/cover no-repeat;filter:blur(2px);transform:scale(1.05)}
.infra-deep .id-scrim{position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,rgba(8,12,18,.8),rgba(8,12,18,.42) 30%,rgba(8,12,18,.55))}
.infra-deep > .id-wrap{position:relative;z-index:1}
.infra-deep .id-h{color:#fff}
.infra-deep .id-lede{color:rgba(255,255,255,.85)}
/* --- Stacking cards: phase 1 (Hero + About) --- */
html,body{background:#0a0b0d}
/* paint order for the whole page so later sections cover earlier ones */
#hero{position:relative;overflow:hidden;z-index:1}
#about{position:relative;min-height:100vh;z-index:2;display:flex;align-items:center;
padding-top:clamp(56px,8vh,92px);padding-bottom:clamp(56px,8vh,92px)}
#about .ab-right{position:static;top:auto} /* drop inner sticky inside the card */
#products{position:relative;z-index:4}
#industries{position:relative;z-index:5}
#sustain{position:relative;z-index:8}
@media(max-width:760px){
#hero,#about{position:relative;min-height:0}
#about{display:block;padding-top:80px;padding-bottom:60px}
}
/* remove the fade-to-white void at the end of Industries Served — keep a continuous dark->next flow */
#ipExitOverlay{display:none !important}
/* --- Stacking cards: phase (Products) — top-aligned + compact so full cards show with white below --- */
#products{position:sticky;top:0;min-height:100vh;overflow:hidden;border-top:none;
display:flex;flex-direction:column;justify-content:flex-start;
padding-top:clamp(90px,10vh,116px);padding-bottom:clamp(20px,3vh,40px)}
#products .pr-head{margin-bottom:clamp(18px,3vh,38px);align-items:flex-end}
#products .pr-h{font-size:clamp(28px,3.4vw,52px);line-height:1.02;margin:10px 0 0}
#products .pr-lede{font-size:clamp(14px,1.15vw,16px);line-height:1.55;margin:0;flex:0 1 44%;max-width:520px}
#products .film-wrap{padding:4px 0 8px}
#products .film-num{font-size:clamp(34px,3.8vw,50px);margin-bottom:-6px}
#products .film-card{flex:0 0 clamp(250px,22vw,340px)}
#products .film-meta{padding:14px 20px 16px}
#products .film-code{font-size:clamp(24px,2.4vw,32px)}
#products .film-sub{margin-bottom:8px}
#products .film-underline{margin-top:10px}
#products .pr-closer{margin-top:clamp(14px,2vh,24px);padding:clamp(18px,2.2vw,30px)}
@media(max-width:760px){
#products{position:relative;min-height:0;display:block;padding-top:80px;padding-bottom:60px}
}
/* Key Applications slides up OVER the pinned Industries stage as it tucks */
@media(min-width:761px){ }
/* Sustainability slides up OVER Industries Served as it recedes
(Key Applications + Contact now live on their own pages) */
@media(min-width:761px){
#industries{padding-bottom:100vh}
/* v147 — Industries landing (equipment-landing clone). The 4 layers crossfade on a
2.5s timer driven by script#ind-landing-js; layer 1 shows without JS. */
#industries{background:#0f0e0c}
#industries .indland-bgs{position:absolute;inset:0;overflow:hidden;background:#0f0e0c;isolation:isolate;z-index:0}
/* v180 — cinematic match-cut. Two layers overlap through every change; only
opacity+transform animate (never layout). The 6.4s ken-burns drift is gone:
at a 1.5s cadence it read as drift, not as a camera. */
/* v182 — CONTINUOUS DRIFT. Previously each frame settled to rest and then sat
perfectly still for a second and a half; motion existed only during the
dissolve, so the cut fell between two stationary frames. Now every frame
keeps moving for its whole time on screen and the dissolve happens mid-move,
which is what makes a match cut read as one continuous camera.
Opacity stays a TRANSITION (keeps the tuned dissolve easing); transform is a
keyframe ANIMATION so it can settle and then keep drifting on one timeline.
ilRun ends at exactly the x/scale ilOut begins at, so the handoff to the
outgoing layer has no jump.
Base scale never returns to 1.0: the leftward drift needs overhang or it
would expose the right edge. At settle (1.025) the layer overhangs ~18px a
side at 1440; the furthest leftward point (-16px at 1.07) still leaves 34px
of cover, and the parallax only spends 4px of that. */
#industries .il-ly{position:absolute;inset:0;width:100%;height:100%;
object-fit:cover;object-position:center;
opacity:0;z-index:0;will-change:transform,opacity;
transform:translate3d(10px,0,0) scale(1.06);
transition:opacity .72s cubic-bezier(.33,0,.25,1)}
#industries .il-ly.on{opacity:1;z-index:2;
animation:ilRun var(--il-cycle,2220ms) both}
/* outgoing keeps travelling and stays fully opaque underneath, so the two
layers never sum below 1 and the section behind can never show through */
#industries .il-ly.was{opacity:1;z-index:1;
animation:ilOut var(--il-out,720ms) linear both}
@keyframes ilRun{
0% {transform:translate3d(10px,0,0) scale(1.06);
animation-timing-function:cubic-bezier(.22,1,.36,1)}
32% {transform:translate3d(0,0,0) scale(1.025);
animation-timing-function:linear} /* settle, then drift on */
100% {transform:translate3d(-6px,0,0) scale(1.045)}
}
@keyframes ilOut{
from {transform:translate3d(-6px,0,0) scale(1.045)} /* exactly where ilRun ended */
to {transform:translate3d(-16px,0,0) scale(1.07)}
}
/* the parallax wrapper moves, not the images — keeps object-position intact.
No transition here: it is lerped per frame, and a transition would lag it.
The depart push sets its own transition in JS. */
#industries .indland-bgs{transform:translate3d(0,0,0)}
/* v182 — "One Steel Standard." drops to its own line under "Four Industries."
Scoped to this hero: the equipment-landing and sustain heroes keep their
inline . */
#industries .sl-h em{display:block}
/* exposure catch — a highlight off steel, never a white flash */
#industries .il-flash{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;
background:radial-gradient(120% 90% at 50% 45%,rgba(255,245,232,.9),rgba(255,240,225,0) 70%);
transition:opacity .2s ease-out}
#industries .il-flash.pulse{opacity:.075;transition:opacity .11s ease-in}
/* CTA camera-into-image push */
#industries .sl-stage.il-depart .sl-in{opacity:0;transition:opacity .42s ease-out}
@media (prefers-reduced-motion:reduce){
#industries .il-ly{transform:none;transition:opacity .45s linear}
#industries .il-ly.on,#industries .il-ly.was{transform:none;animation:none}
#industries .indland-bgs{transition:none}
#industries .il-flash{display:none}
#industries .indland-bgs{transform:none}}
/* mirror equipment-landing's id-scoped sl overrides so both landings match exactly */
#industries .sl-stage{position:relative;height:100vh;min-height:600px}
#industries .sl-stage{overflow:hidden}
#industries{overflow:clip}
#sustain{overflow:clip}
#home-view > .ft.ftx{overflow:clip}
#sustain{overflow:clip} /* clip, NOT hidden — #sustain .sb-panel is position:sticky */
#industries .sl-in{max-width:1120px}
#industries .sl-h{font-size:clamp(34px,5.4vw,78px)}
#industries .sl-h br{display:none}
/* the rotating set includes a very bright frame (engineering hall) — deepen the scrim
for this landing only; equipment-landing keeps its own */
#industries .sl-scrim{z-index:1;background:linear-gradient(180deg,rgba(10,9,8,.44) 0%,rgba(10,9,8,.34) 34%,rgba(10,9,8,.40) 62%,rgba(10,9,8,.66) 100%)}
#industries .sl-in{position:relative;z-index:2}
#industries .sl-h{text-shadow:0 4px 40px rgba(0,0,0,.45)}
#industries .sl-p,#industries .sl-eyebrow{text-shadow:0 2px 18px rgba(0,0,0,.5)}
}
/* Sustainability slides over Investor Relations; Contact slides over Sustainability */
@media(min-width:761px){
#sustain.sus{margin-top:-100vh;min-height:203vh} /* v162: was 300vh — the stage pinned ~0.65 viewport
before the footer even entered (dead scroll V flagged). 203vh: stage pins at sus_top+42px; footer enters at sus_top+H-100vh-vh; dead = 3vh-42px < 0 for every real viewport, and the -100vh seam keeps a 103vh tail (needs >100vh) and the
footer's -100vh seam still has a 140vh tail to overlap (needs ≥ 200vh + 1px). */
#sustain .sb-panel{position:sticky;top:0} /* pin the panel on screen before Contact slides over it */
/* belt-and-suspenders: keep Contact opaque */
}
/* Masks the pinned early cards (Hero..Products) once Industries takes over,
so every lower-section tuck reveals clean dark instead of Products. */
#stack-void{position:fixed;inset:0;background:#0a0b0d;z-index:4;opacity:0;pointer-events:none;will-change:opacity}
@media(max-width:760px){ #stack-void{display:none} }
#about-view[hidden],#home-view[hidden]{display:none!important}
#about-view{--paper:#fff;--ink:#15181d;--ink-2:#525a66;--ink3:#8a929e;
--scale:#E9550A;--scale-2:#F26A24;--rule:#eceff3;--soft:#f4f6f9;
--disp:"Bricolage Grotesque",Arial,"Helvetica Neue",sans-serif;--mono:"IBM Plex Mono",ui-monospace,monospace;}
#about-view *{box-sizing:border-box}
#about-view, #about-view{margin:0}
#about-view{background:#fff;color:var(--ink);font-family:var(--disp);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
#about-view *{-webkit-tap-highlight-color:transparent}
#about-view a:focus-visible, #about-view button:focus-visible{outline:2px solid var(--scale);outline-offset:2px;border-radius:4px}
#about-view section[id]{scroll-margin-top:96px}
#about-view .nav{position:fixed;top:0;left:0;right:0;z-index:120;display:flex;align-items:center;justify-content:space-between;padding:18px 28px;gap:16px;transition:padding .3s ease}
#about-view .nav.scrolled{padding:12px 24px}
#about-view .cap{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);
backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);
border-radius:999px;display:flex;align-items:center;height:64px;
transition:background .35s ease,border .35s ease,box-shadow .35s ease,color .35s ease}
#about-view .nav.scrolled .cap{background:#fff;border-color:var(--rule);box-shadow:0 8px 24px -10px rgba(20,18,16,.18)}
#about-view .logo-cap{padding:8px 18px}
#about-view .logo-cap img{height:44px;width:auto;display:block;filter:drop-shadow(0 2px 6px rgba(0,0,0,.45));transition:filter .35s ease}
#about-view .nav.scrolled .logo-cap img{filter:none}
#about-view .center-cap{padding:6px 8px;gap:0;position:relative}
#about-view .center-cap a{font:500 13px var(--disp);color:#fff;text-decoration:none;padding:10px 16px;border-radius:999px;
transition:color .35s ease,opacity .25s ease;white-space:nowrap;opacity:.92;position:relative;z-index:2}
#about-view .center-cap a:hover, #about-view .center-cap a.on{color:#fff;opacity:1}
#about-view .nav.scrolled .center-cap a{color:var(--ink);opacity:.78}
#about-view .nav.scrolled .center-cap a.on, #about-view .nav.scrolled .center-cap a:hover{color:#fff;opacity:1}
#about-view .center-cap .blob{position:absolute;top:6px;height:calc(100% - 12px);left:0;z-index:1;
background:linear-gradient(120deg,var(--scale) 0%,var(--scale-2) 60%,#ff8a3d 100%);
border-radius:999px;pointer-events:none;opacity:0;
box-shadow:0 8px 24px -8px rgba(233,85,10,.55), inset 0 1px 0 rgba(255,255,255,.18);
transition:transform .55s cubic-bezier(.4,.0,.2,1), width .55s cubic-bezier(.4,.0,.2,1), opacity .3s ease}
#about-view .center-cap.ready .blob{opacity:1}
/* v186 REMOVED — root cause of the vanishing nav links.
This forced EVERY link to #fff for the 560ms the pill was sliding. The
nav-lit-fix neutraliser is `.center-cap.moving a` (0,2,1), which could
not beat the #about-view copy at (1,2,1) — so in the About view all six
other links went white on a white cap and disappeared.
.lit already lights the correct link from measured geometry. */
#about-view .right-cap{padding:5px 7px;gap:5px}
#about-view .lang{position:relative}
#about-view .lang-btn{display:inline-flex;align-items:center;gap:5px;font:600 11px var(--mono);letter-spacing:.16em;
color:#fff;background:transparent;border:none;cursor:pointer;padding:9px 12px;border-radius:999px;transition:background .2s ease}
#about-view .lang-btn:hover{background:rgba(255,255,255,.16)}
#about-view .lang-btn svg{width:9px;height:9px;opacity:.8;transition:transform .25s ease}
#about-view .lang.open .lang-btn svg{transform:rotate(180deg)}
#about-view .nav.scrolled .lang-btn{color:var(--ink)}
#about-view .nav.scrolled .lang-btn:hover{background:rgba(0,0,0,.06)}
#about-view .lang-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:152px;background:rgba(20,18,16,.92);
-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:6px;
opacity:0;transform:translateY(-6px) scale(.96);pointer-events:none;transition:.25s cubic-bezier(.2,.7,.2,1);
box-shadow:0 16px 40px -10px rgba(0,0,0,.45)}
#about-view .lang.open .lang-menu{opacity:1;transform:none;pointer-events:auto}
#about-view .lang-menu a{display:flex;align-items:center;justify-content:space-between;font:500 13px var(--disp);
color:rgba(255,255,255,.85);text-decoration:none;padding:9px 12px;border-radius:8px;transition:background .15s ease}
#about-view .lang-menu a:hover{background:rgba(255,255,255,.08);color:#fff}
#about-view .lang-menu a.on{color:var(--scale-2)}
#about-view .lang-menu a .tick{opacity:0;font-size:11px}
#about-view .lang-menu a.on .tick{opacity:1}
#about-view .nav.scrolled .lang-menu{background:#fff;border-color:var(--rule);box-shadow:0 16px 40px -10px rgba(20,18,16,.18)}
#about-view .nav.scrolled .lang-menu a{color:var(--ink-2)}
#about-view .nav.scrolled .lang-menu a:hover{background:rgba(0,0,0,.04);color:var(--ink)}
#about-view .nav.scrolled .lang-menu a.on{color:var(--scale)}
#about-view .right-cap .divider{width:1px;height:22px;background:rgba(255,255,255,.22);margin:0 2px;transition:background .35s ease}
#about-view .nav.scrolled .right-cap .divider{background:var(--rule)}
#about-view .ham{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:999px;
background:transparent;border:none;cursor:pointer;transition:background .2s ease}
#about-view .ham:hover{background:rgba(255,255,255,.16)}
#about-view .nav.scrolled .ham:hover{background:rgba(0,0,0,.06)}
#about-view .ham .lines{position:relative;width:18px;height:14px}
#about-view .ham .lines span{position:absolute;left:0;right:0;height:1.5px;background:#fff;border-radius:1px;transition:.35s cubic-bezier(.7,0,.3,1)}
#about-view .ham .lines span:nth-child(1){top:1px}
#about-view .ham .lines span:nth-child(2){top:50%;transform:translateY(-50%)}
#about-view .ham .lines span:nth-child(3){bottom:1px}
#about-view .nav.scrolled .ham .lines span{background:var(--ink)}
#about-view.menu-open .ham .lines span:nth-child(1){top:50%;transform:translateY(-50%) rotate(45deg)}
#about-view.menu-open .ham .lines span:nth-child(2){opacity:0}
#about-view.menu-open .ham .lines span:nth-child(3){bottom:50%;transform:translateY(50%) rotate(-45deg)}
#about-view.menu-open .ham .lines span{background:#fff !important}
#about-view .menu{position:fixed;inset:0;z-index:100;background:rgba(20,18,16,.96);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);opacity:0;pointer-events:none;transition:opacity .5s ease}
#about-view.menu-open .menu{opacity:1;pointer-events:auto}
#about-view .menu-inner{display:flex;height:100%;padding:120px 80px 60px;gap:80px}
#about-view .menu-links{flex:1;display:flex;flex-direction:column;gap:4px}
#about-view .menu-links a{font:800 clamp(40px,6.4vw,80px)/.98 var(--disp);letter-spacing:-.03em;color:rgba(255,255,255,.5);text-decoration:none;
display:inline-flex;align-items:baseline;gap:18px;padding:8px 0;transition:color .3s ease,transform .4s ease;transform:translateY(20px);opacity:0}
#about-view.menu-open .menu-links a{transform:none;opacity:1;transition-delay:var(--d, 0s)}
#about-view .menu-links a .n{font:500 13px var(--mono);letter-spacing:.18em;color:var(--scale-2);min-width:36px}
#about-view .menu-links a:hover{color:var(--scale-2)}
#about-view .menu-links a em{font-style:normal;color:var(--scale-2)}
#about-view .menu-aside{width:320px;display:flex;flex-direction:column;justify-content:flex-end;gap:32px;color:rgba(255,255,255,.7);opacity:0;transition:opacity .5s ease .3s}
#about-view.menu-open .menu-aside{opacity:1}
#about-view .menu-aside .blk{padding-top:18px;border-top:1px solid rgba(255,255,255,.14)}
#about-view .menu-aside .blk .lbl{font:600 10px var(--mono);letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-bottom:8px}
#about-view .menu-aside .blk p{margin:0;font:500 14px/1.5 var(--disp);color:rgba(255,255,255,.85)}
#about-view .menu-aside a{color:#fff;text-decoration:none}
#about-view .menu-aside a:hover{color:var(--scale-2)}
@media (max-width:1280px){#about-view .center-cap{display:none}
#about-view .nav{justify-content:space-between}
}
@media (max-width:860px){#about-view .nav{padding:14px 18px}
#about-view .logo-cap{padding:7px 14px;height:58px}
#about-view .logo-cap img{height:36px}
#about-view .right-cap{height:58px}
#about-view .menu-inner{padding:100px 24px 40px;flex-direction:column;gap:40px}
#about-view .menu-aside{width:auto}
#about-view .menu-links a{font-size:clamp(34px,8vw,52px)}
}
#about-view .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.6,.2,1),transform .8s cubic-bezier(.2,.6,.2,1)}
#about-view .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){#about-view .reveal{opacity:1;transform:none;transition:none}
}
#about-view .lm-eyebrow{display:inline-block;font:700 12px var(--mono);letter-spacing:.26em;text-transform:uppercase;color:var(--scale);margin:0 0 16px}
#about-view .lm-sec{max-width:1180px;margin:0 auto;padding:120px 32px}
#about-view .lm-sec .lm-h{font:800 clamp(32px,4.4vw,56px)/1.02 var(--disp);letter-spacing:-.03em;margin:0 0 18px;color:var(--ink)}
.lm-h em{font-style:normal;color:var(--scale)}
#about-view .lm-sec .lm-lead{font:500 18px/1.6 var(--disp);color:var(--ink-2);max-width:60ch;margin:0}
#about-view .lm-num{font:700 12px var(--mono);color:var(--scale);letter-spacing:.1em}
#about-view .lm-sechead{display:flex;align-items:baseline;gap:14px;margin-bottom:40px}
/* v136: SECTION HEADERS UNIFIED WITH COMPANY OVERVIEW.
lm-03/lm-04 opened on a bare 56px display heading — no eyebrow, no rule —
while lm-01 opens with a mono eyebrow above a 56px orange rule. (Their
.lm-num "03"/"04" was display:none, so the lockup was simply missing.)
These rules mirror #lm-01 .au-eyebrow exactly: same font, same .34em
tracking, same 56px rule, same centred stack. */
#about-view .lm-sechead{flex-direction:column;align-items:center;gap:0}
#about-view .lm-eb{margin:0 auto 16px;font:700 12px var(--mono);letter-spacing:.34em;
text-transform:uppercase;color:var(--scale);text-align:center;margin:0 auto 16px}
#about-view .lm-eb::after{content:"";display:block;width:56px;height:2px;
background:var(--scale);margin:12px auto 0}
#about-view .lm-sechead .lm-h{margin:0}
#about-view .lm-hero{position:relative;min-height:100vh;display:flex;flex-direction:column;justify-content:flex-end;
background:radial-gradient(130% 120% at 72% 8%,#2c2118 0%,#191309 52%,#120d07 100%);color:#fff;overflow:hidden}
#about-view .lm-hero::before{content:"";position:absolute;width:520px;height:520px;right:-80px;top:-60px;border-radius:50%;
background:radial-gradient(circle,rgba(233,85,10,.34),transparent 62%);filter:blur(20px);pointer-events:none}
#about-view .lm-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,13,7,.2),rgba(18,13,7,0) 30%,rgba(18,13,7,.55) 100%)}
#about-view .lm-hero-in{position:relative;z-index:2;max-width:1180px;margin:0 auto;width:100%;padding:0 32px 110px}
#about-view .lm-hero .lm-eyebrow{color:var(--scale-2)}
#about-view .lm-hero h1{font:900 clamp(46px,7vw,96px)/.96 var(--disp);letter-spacing:-.035em;margin:0 0 22px;max-width:16ch;text-shadow:0 2px 30px rgba(0,0,0,.45)}
#about-view .lm-hero h1 em{font-style:normal;color:var(--scale-2)}
#about-view .lm-hero p{font:500 18px/1.6 var(--disp);color:rgba(255,255,255,.84);max-width:54ch;margin:0 0 30px}
#about-view .lm-facts{display:flex;flex-wrap:wrap;gap:0;border-top:1px solid rgba(255,255,255,.16);padding-top:22px}
#about-view .lm-fact{padding-right:42px;margin-right:42px;border-right:1px solid rgba(255,255,255,.16)}
#about-view .lm-fact:last-child{border-right:none;margin-right:0;padding-right:0}
#about-view .lm-fact .fk{display:block;font:600 10px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:6px}
#about-view .lm-fact .fv{font:800 22px var(--disp);color:#fff}
#about-view .lm-scrollhint{position:absolute;left:0;right:0;bottom:26px;text-align:center;z-index:2;color:rgba(255,255,255,.6);font:600 10px var(--mono);letter-spacing:.22em;text-transform:uppercase}
#about-view .lm-vmv{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
#about-view .lm-vmc{border-top:2px solid var(--rule);padding-top:20px}
#about-view .lm-vmc .vk{display:block;font:700 11px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--scale);margin-bottom:12px}
#about-view .lm-vmc h3{font:800 22px var(--disp);letter-spacing:-.01em;margin:0 0 10px;color:var(--ink)}
#about-view .lm-vmc p{font:500 15px/1.6 var(--disp);color:var(--ink-2);margin:0}
#about-view .lm-values{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
#about-view .lm-values span{font:600 12px var(--mono);letter-spacing:.04em;color:var(--ink);border:1px solid var(--rule);border-radius:999px;padding:7px 14px;background:var(--soft)}
#about-view .lm-tl{position:relative;padding-left:36px}
#about-view .lm-tl::before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:2px;background:linear-gradient(var(--scale),var(--rule))}
#about-view .lm-mi{position:relative;padding:0 0 38px 6px}
#about-view .lm-mi:last-child{padding-bottom:0}
#about-view .lm-mi::before{content:"";position:absolute;left:-36px;top:4px;width:16px;height:16px;border-radius:50%;background:var(--scale);border:3px solid #fff;box-shadow:0 0 0 1px var(--rule)}
#about-view .lm-mi .yr{font:800 20px var(--disp);color:var(--scale);margin-bottom:4px;display:flex;align-items:baseline;gap:12px}
#about-view .lm-mi .yr .mh{font:700 17px var(--disp);color:var(--ink);letter-spacing:-.01em}
#about-view .lm-mi p{font:500 15px/1.6 var(--disp);color:var(--ink-2);margin:6px 0 0;max-width:64ch}
#about-view .lm-tl-note{margin-top:8px;font:500 12px var(--mono);color:var(--ink3);letter-spacing:.04em}
#about-view .lm-lead-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
#about-view .lm-lc{border:1px solid var(--rule);border-radius:16px;padding:22px;background:#fff;transition:transform .3s cubic-bezier(.2,.6,.2,1),box-shadow .3s}
#about-view .lm-lc:hover{transform:translateY(-4px);box-shadow:0 24px 50px -30px rgba(20,18,16,.3)}
#about-view .lm-av{width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,#2c2118,#191309);color:#fff;display:grid;place-items:center;font:800 20px var(--disp);margin-bottom:16px}
#about-view .lm-lc h4{font:800 18px var(--disp);margin:0 0 3px;color:var(--ink)}
#about-view .lm-lc .role{font:600 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--scale);margin-bottom:10px}
#about-view .lm-lc p{font:500 14px/1.55 var(--disp);color:var(--ink-2);margin:0}
#about-view .lm-cert{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
#about-view .lm-badges{display:flex;gap:20px}
#about-view .lm-badge{width:130px;height:130px;border-radius:18px;border:1.5px solid var(--rule);background:var(--soft);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:4px}
#about-view .lm-badge .bring{width:46px;height:46px;border-radius:50%;border:3px solid var(--scale);display:grid;place-items:center;font:800 13px var(--disp);color:var(--scale)}
#about-view .lm-badge b{font:800 14px var(--disp);color:var(--ink)}
#about-view .lm-badge span{font:600 9px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink3)}
#about-view .lm-std{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 0}
#about-view .lm-std span{font:700 12px var(--mono);letter-spacing:.06em;color:var(--ink);border:1px solid var(--rule);border-radius:8px;padding:8px 13px;background:#fff}
#about-view .lm-cert h3{font:800 24px var(--disp);margin:0 0 12px;letter-spacing:-.01em}
#about-view .lm-cert p{font:500 15px/1.6 var(--disp);color:var(--ink-2);margin:0}
#about-view .lm-partners{display:grid;grid-template-columns:1fr 1fr;gap:24px}
#about-view .lm-pc{border:1px solid var(--rule);border-radius:18px;padding:28px;background:var(--soft);position:relative;overflow:hidden}
#about-view .lm-pc .pk{font:700 10px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--scale);margin-bottom:12px;display:block}
#about-view .lm-pc h3{font:800 26px var(--disp);letter-spacing:-.01em;margin:0 0 6px;color:var(--ink)}
#about-view .lm-pc .psub{font:600 13px var(--mono);color:var(--ink-2);margin-bottom:14px}
#about-view .lm-pc p{font:500 15px/1.6 var(--disp);color:var(--ink-2);margin:0}
#about-view .lm-prod{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
#about-view .lm-prod span{font:700 12px var(--mono);color:#fff;background:linear-gradient(120deg,var(--scale),var(--scale-2));border-radius:999px;padding:8px 16px}
#about-view .lm-foot{background:#120d07;color:rgba(255,255,255,.7);padding:70px 32px 40px}
/* v136: the About view now uses the SITE footer instead of its own .lm-foot.
CRITICAL: the global `.ft{margin-top:calc(-100vh - 1px)}` is the seam trick
for the main stacked 100vh view — inside #about-view (a normal document
flow) it would yank the footer a full viewport upward over the content.
Cancel it here only; the main view's seam is untouched. */
#about-view .ft{margin-top:0}
#about-view .lm-foot-in{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
#about-view .lm-foot h5{font:700 10px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.45);margin:0 0 14px}
#about-view .lm-foot p{font:500 14px/1.6 var(--disp);margin:0 0 8px}
#about-view .lm-foot a{color:#fff;text-decoration:none}
#about-view .lm-foot a:hover{color:var(--scale-2)}
#about-view .lm-foot .fwm{font:900 22px var(--disp);color:#fff;letter-spacing:-.01em}
#about-view .lm-foot .fcopy{max-width:1180px;margin:40px auto 0;padding-top:20px;border-top:1px solid rgba(255,255,255,.12);font:500 11px var(--mono);letter-spacing:.06em;color:rgba(255,255,255,.4)}
#about-view #lmnav{position:fixed;z-index:90;display:flex;gap:6px;transition:opacity .3s ease}
#about-view #lmnav a{display:flex;align-items:center;gap:9px;text-decoration:none;font:600 12px var(--disp);color:var(--ink-2);
border-radius:10px;padding:8px 12px;transition:background .2s,color .2s}
#about-view #lmnav a .cn{font:700 10px var(--mono);color:var(--ink3);letter-spacing:.06em}
#about-view #lmnav a:hover{background:rgba(0,0,0,.05);color:var(--ink)}
#about-view #lmnav a.on{background:var(--scale);color:#fff}
#about-view #lmnav a.on .cn{color:rgba(255,255,255,.8)}
#about-view.pos-left #lmnav, #about-view.pos-right #lmnav{flex-direction:column;top:50%;transform:translateY(-50%);
background:rgba(255,255,255,.78);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--rule);border-radius:16px;padding:10px;box-shadow:0 18px 50px -28px rgba(20,18,16,.4)}
#about-view.pos-left #lmnav{left:22px}
#about-view.pos-right #lmnav{right:22px}
#about-view.pos-top #lmnav{flex-direction:row;top:92px;left:50%;transform:translateX(-50%);
background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--rule);border-radius:999px;padding:6px;box-shadow:0 14px 40px -22px rgba(20,18,16,.4)}
#about-view.pos-top #lmnav a .lbl{display:none}
#about-view.pos-top #lmnav a{padding:8px 13px}
@media (min-width:1100px){#about-view.pos-top #lmnav a .lbl{display:inline}
}
#about-view.pos-dock #lmnav{flex-direction:row;bottom:22px;left:50%;transform:translateX(-50%);
background:rgba(20,18,16,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:7px;box-shadow:0 20px 50px -24px rgba(0,0,0,.5)}
#about-view.pos-dock #lmnav a{color:rgba(255,255,255,.7)}
#about-view.pos-dock #lmnav a .cn{color:rgba(255,255,255,.45)}
#about-view.pos-dock #lmnav a:hover{background:rgba(255,255,255,.1);color:#fff}
#about-view.pos-dock #lmnav a.on{background:var(--scale);color:#fff}
#about-view.pos-dock #lmnav a .lbl{display:none}
@media (min-width:1100px){#about-view.pos-dock #lmnav a .lbl{display:inline}
}
#about-view.pos-none #lmnav{display:none}
@media (max-width:900px){#about-view.pos-left #lmnav, #about-view.pos-right #lmnav{display:none}
}
#about-view #lmtoggle{position:fixed;right:20px;bottom:20px;z-index:130;background:#fff;border:1px solid var(--rule);
border-radius:16px;box-shadow:0 22px 60px -28px rgba(20,18,16,.45);padding:12px;width:228px;transition:transform .3s,opacity .3s}
#about-view #lmtoggle.min{transform:translateY(calc(100% - 46px))}
#about-view #lmtoggle .tghead{display:flex;align-items:center;justify-content:space-between;cursor:pointer;margin-bottom:10px}
#about-view #lmtoggle .tgt{font:700 10px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--scale)}
#about-view #lmtoggle .tgx{font:700 14px var(--mono);color:var(--ink3);line-height:1}
#about-view #lmtoggle .tgsub{font:600 9px var(--mono);letter-spacing:.08em;color:var(--ink3);margin:-4px 0 10px}
#about-view #lmtoggle .seg{display:grid;grid-template-columns:1fr 1fr;gap:6px}
#about-view #lmtoggle .seg button{font:600 11px var(--disp);padding:9px;border:1.4px solid var(--rule);background:#fff;border-radius:9px;color:var(--ink-2);cursor:pointer;transition:.16s}
#about-view #lmtoggle .seg button:hover{border-color:var(--scale);color:var(--scale)}
#about-view #lmtoggle .seg button.on{background:var(--scale);border-color:var(--scale);color:#fff}
#about-view #lmtoggle .seg button.full{grid-column:1/-1}
@media (max-width:560px){#about-view #lmtoggle{right:12px;bottom:12px;width:200px}
}
#about-view .lm-hero-grid{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.6;
background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
background-size:54px 54px;-webkit-mask-image:radial-gradient(120% 90% at 72% 18%,#000,transparent 76%);mask-image:radial-gradient(120% 90% at 72% 18%,#000,transparent 76%)}
#about-view .lm-scrollhint{display:flex;align-items:center;justify-content:center;gap:8px}
#about-view .lm-chev{display:inline-flex;animation:lmbob 1.8s ease-in-out infinite}
#about-view .lm-chev svg{width:14px;height:14px}
@keyframes lmbob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
@media (prefers-reduced-motion:reduce){#about-view .lm-chev{animation:none}
}
#about-view .lm-vmv{gap:24px}
#about-view .lm-vmc{border:1px solid var(--rule);border-radius:20px;padding:28px;background:#fff;position:relative;overflow:hidden;
transition:transform .35s cubic-bezier(.2,.6,.2,1),box-shadow .35s,border-color .35s}
#about-view .lm-vmc::after{content:"";position:absolute;left:0;top:0;height:3px;width:100%;background:linear-gradient(90deg,var(--scale),var(--scale-2));transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.2,.6,.2,1)}
#about-view .lm-vmc:hover{transform:translateY(-5px);box-shadow:0 30px 60px -34px rgba(20,18,16,.32);border-color:rgba(233,85,10,.3)}
#about-view .lm-vmc:hover::after{transform:scaleX(1)}
#about-view .vm-ic{width:50px;height:50px;border-radius:14px;background:linear-gradient(135deg,rgba(233,85,10,.16),rgba(242,106,36,.06));display:grid;place-items:center;color:var(--scale);margin-bottom:18px}
#about-view .vm-ic svg{width:24px;height:24px}
#about-view .lm-tl{position:relative;max-width:960px;margin:0 auto;padding:0}
#about-view .lm-tl::before{content:"";position:absolute;left:50%;transform:translateX(-50%);top:6px;bottom:30px;width:2px;background:linear-gradient(var(--scale),var(--scale-2) 30%,var(--rule))}
#about-view .lm-mi{position:relative;width:calc(50% - 34px);margin-bottom:24px;padding:0}
#about-view .lm-mi.l{margin-right:auto;text-align:right}
#about-view .lm-mi.r{margin-left:auto;text-align:left}
#about-view .lm-mi::after{content:"";position:absolute;top:18px;width:15px;height:15px;border-radius:50%;background:var(--scale);border:3px solid #fff;box-shadow:0 0 0 1px var(--rule)}
#about-view .lm-mi.l::after{right:-41px}
#about-view .lm-mi.r::after{left:-41px}
#about-view .mi-card{background:#fff;border:1px solid var(--rule);border-radius:16px;padding:18px 20px;box-shadow:0 12px 34px -26px rgba(20,18,16,.3);
transition:transform .32s cubic-bezier(.2,.6,.2,1),box-shadow .32s,border-color .32s}
#about-view .mi-card:hover{transform:translateY(-4px);box-shadow:0 26px 54px -30px rgba(20,18,16,.34);border-color:rgba(233,85,10,.4)}
#about-view .mi-yr{display:inline-block;font:800 12px var(--mono);letter-spacing:.04em;color:#fff;background:linear-gradient(120deg,var(--scale),var(--scale-2));border-radius:999px;padding:4px 12px;margin-bottom:10px}
#about-view .mi-card h4{font:800 17px var(--disp);letter-spacing:-.01em;margin:0 0 6px;color:var(--ink)}
#about-view .mi-card p{font:500 14px/1.55 var(--disp);color:var(--ink-2);margin:0}
@media (max-width:820px){#about-view .lm-tl::before{left:7px;transform:none}
#about-view .lm-mi, #about-view .lm-mi.l, #about-view .lm-mi.r{width:100%;margin:0 0 18px;text-align:left;padding-left:34px}
#about-view .lm-mi.l::after, #about-view .lm-mi.r::after{left:0;right:auto}
}
#about-view .lm-tl-note{text-align:center;margin-top:20px}
#about-view .lm-lead-grid{gap:24px}
#about-view .lm-lc{padding:0;overflow:hidden;border-radius:18px}
#about-view .lc-cover{height:8px;background:linear-gradient(90deg,var(--scale),var(--scale-2))}
#about-view .lc-body{padding:24px;position:relative}
#about-view .lc-arrow{position:absolute;top:18px;right:18px;color:var(--ink3);transition:color .25s,transform .25s}
#about-view .lc-arrow svg{width:18px;height:18px}
#about-view .lm-lc:hover .lc-arrow{color:var(--scale);transform:translate(2px,-2px)}
#about-view .lm-av{box-shadow:0 0 0 4px rgba(233,85,10,.12)}
#about-view .lm-cert{gap:48px}
#about-view .lm-badges{gap:22px}
#about-view .lm-badge{position:relative;width:140px;height:154px;border-radius:20px}
#about-view .lm-badge .bring{position:relative;width:54px;height:54px;border:none}
#about-view .lm-badge .bring::before{content:"";position:absolute;inset:-7px;border-radius:50%;background:conic-gradient(var(--scale) 0% 75%,var(--rule) 75% 100%);-webkit-mask:radial-gradient(closest-side,transparent 72%,#000 73%);mask:radial-gradient(closest-side,transparent 72%,#000 73%)}
#about-view .cert-link{display:inline-flex;align-items:center;gap:7px;margin-top:18px;font:700 12px var(--mono);letter-spacing:.06em;color:var(--scale);text-decoration:none}
#about-view .cert-link svg{width:14px;height:14px;transition:transform .25s}
#about-view .cert-link:hover svg{transform:translateX(3px)}
#about-view .lm-pc{padding:30px;transition:transform .35s cubic-bezier(.2,.6,.2,1),box-shadow .35s,border-color .35s}
#about-view .lm-pc:hover{transform:translateY(-5px);box-shadow:0 30px 64px -36px rgba(20,18,16,.34);border-color:rgba(233,85,10,.3)}
#about-view .pc-ic{position:absolute;right:-12px;bottom:-12px;color:rgba(233,85,10,.10);pointer-events:none}
#about-view .pc-ic svg{width:124px;height:124px}
#about-view .pc-tag{display:inline-block;font:700 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--scale);background:rgba(233,85,10,.10);border-radius:999px;padding:5px 12px;margin-bottom:14px}
#about-view .lm-pc h3, #about-view .lm-pc .psub, #about-view .lm-pc p{position:relative;z-index:1}
#about-view *{box-sizing:border-box}
/* Leadership — Asymmetric Glass Bento (Concept 16) */
#about-view #lm-04{background:#edeff2;max-width:none;width:var(--vw,100vw);position:relative;left:50%;right:50%;margin-left:calc(var(--vw,100vw) / -2);margin-right:calc(var(--vw,100vw) / -2);padding:96px clamp(22px,4vw,64px)}
#about-view .lf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;max-width:none;margin:34px 0 0;width:100%}
@media(max-width:560px){#about-view .lf-grid{gap:14px}}
#about-view .lf{perspective:1700px}
#about-view .lf-inner{position:relative;width:100%;aspect-ratio:1.06/1;transition:transform .8s cubic-bezier(.2,.7,.2,1);transform-style:preserve-3d;-webkit-transform-style:preserve-3d}
#about-view .lf:hover .lf-inner,#about-view .lf:focus-within .lf-inner,#about-view .lf.open .lf-inner{transform:rotateY(180deg)}
#about-view .lf-face{position:absolute;inset:0;border-radius:22px;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 24px 50px -30px rgba(15,23,42,.4)}
#about-view .lf-front{background:#dfe3e8;visibility:visible;opacity:1;transition:visibility 0s .4s,opacity 0s .4s}
#about-view .lf-front .lg-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
#about-view .lf-grad{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 42%,rgba(8,10,14,.85) 100%)}
#about-view .lf-meta{position:absolute;left:0;right:0;bottom:0;padding:26px 24px;color:#fff;z-index:2}
#about-view .lf-meta .nm{font:800 clamp(18px,1.5vw,22px) var(--disp);letter-spacing:-.01em;line-height:1.15;margin:0}
#about-view .lf-meta .rl{font:600 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--scale-2);margin-top:7px}
#about-view .lf-back{transform:rotateY(180deg);background:#fff;border:1px solid var(--rule);padding:28px 26px;display:flex;flex-direction:column;visibility:hidden;opacity:0;transition:visibility 0s .4s,opacity 0s .4s}
#about-view .lf-back::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--scale),var(--scale-2))}
#about-view .lf-back .nm{font:800 19px var(--disp);letter-spacing:-.01em;color:var(--ink);margin:0}
#about-view .lf-back .rl{font:600 10.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--scale);margin:6px 0 0}
#about-view .lf-rule{height:1px;background:var(--rule);margin:14px 0}
#about-view .lf-bio{font:500 13px/1.62 var(--disp);color:var(--ink-2);overflow-y:auto;flex:1;padding-right:6px}
#about-view .lf-bio p{margin:0 0 10px}
#about-view .lf-bio p:last-child{margin-bottom:0}
#about-view .lf-bio::-webkit-scrollbar{width:4px}
#about-view .lf-bio::-webkit-scrollbar-thumb{background:rgba(0,0,0,.14);border-radius:999px}
#about-view .lf:hover .lf-front,#about-view .lf:focus-within .lf-front,#about-view .lf.open .lf-front{visibility:hidden;opacity:0}
#about-view .lf:hover .lf-back,#about-view .lf:focus-within .lf-back,#about-view .lf.open .lf-back{visibility:visible;opacity:1}
@media (prefers-reduced-motion:reduce){#about-view *{transition:none!important}
}
#about-view #lm-03{max-width:none;padding:0;margin:0}
#about-view .tlc{position:relative;margin-left:-24px;margin-right:-24px;background:#0b0a09;color:#fff;font-family:var(--disp)}
#about-view .tlc-zone{position:relative}
#about-view .tlc-pin{position:sticky;top:0;height:100vh;overflow:hidden;background:
radial-gradient(120% 90% at 50% -10%,#221c16 0%,#0d0b0a 58%),
radial-gradient(60% 50% at 50% 108%,rgba(233,85,10,.16),transparent 60%)}
#about-view .tlc-pin::after{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 1px,transparent 1px 64px);pointer-events:none}
#about-view .tlc-sectitle{position:absolute;left:44px;top:96px;z-index:6;pointer-events:none}
#about-view .tlc-sectitle .tlc-se{display:block;font:500 11px var(--mono);letter-spacing:.28em;text-transform:uppercase;color:#F26A24;margin-bottom:12px}
#about-view .tlc-sectitle h2{font:800 clamp(28px,3.6vw,60px)/.9 var(--disp);letter-spacing:-.04em;color:#fff;margin:0}
#about-view .tlc-sectitle .outl{color:transparent;-webkit-text-stroke:1.4px #fff}
#about-view .tlc-procline{position:absolute;left:0;right:0;top:50%;height:2px;transform:translateY(-50%);z-index:1;background:linear-gradient(90deg,transparent,rgba(233,85,10,.5) 14%,rgba(233,85,10,.5) 86%,transparent)}
#about-view .tlc-procdot{position:absolute;left:50%;top:50%;width:150px;height:60px;transform:translate(-50%,-50%);z-index:1;border-radius:60px;background:radial-gradient(closest-side,rgba(233,85,10,.5),transparent 72%);filter:blur(6px)}
#about-view .tlc-rail{overflow:hidden;height:100%}
#about-view .tlc-track{display:flex;height:100%;will-change:transform}
#about-view .tlc-stage{flex:none;width:var(--vw,100vw);height:100%;display:flex;align-items:center;justify-content:center;gap:4vw;padding:0 6vw}
#about-view .tlc-year{flex:none;width:min(30vw,360px);background:#fff;color:var(--ink);border-radius:20px;padding:30px 32px;position:relative;overflow:hidden;transform:scale(.95);opacity:.5;transition:transform .55s cubic-bezier(.2,.6,.2,1),opacity .5s,box-shadow .55s}
#about-view .tlc-stage.active .tlc-year{transform:scale(1);opacity:1;box-shadow:0 56px 120px -46px rgba(0,0,0,.85)}
#about-view .tlc-year::before{content:"";position:absolute;right:-40px;top:-40px;width:130px;height:130px;border-radius:50%;background:radial-gradient(closest-side,rgba(233,85,10,.10),transparent)}
#about-view .tlc-idx{font:600 12px var(--mono);letter-spacing:.18em;color:var(--ink-3,#9aa1ab)}
#about-view .tlc-big{font:800 clamp(64px,9vw,124px)/.86 var(--disp);letter-spacing:-.05em;color:var(--ink);margin:10px 0 0}
#about-view .tlc-rule{height:3px;width:46px;background:var(--scale);border-radius:3px;margin:18px 0 14px}
#about-view .tlc-era{font:500 11px var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--scale)}
#about-view .tlc-panel{flex:none;width:min(36vw,480px);background:#fff;color:var(--ink);border:1px solid rgba(0,0,0,.06);border-radius:22px;padding:38px;transform:scale(.95);opacity:.5;transition:transform .55s cubic-bezier(.2,.6,.2,1),opacity .5s,box-shadow .55s,border-color .5s;box-shadow:0 44px 100px -50px rgba(0,0,0,.6)}
#about-view .tlc-stage.active .tlc-panel{transform:scale(1);opacity:1;border-color:rgba(233,85,10,.4);box-shadow:0 52px 110px -50px rgba(233,85,10,.32)}
#about-view .tlc-ey{display:flex;align-items:center;gap:14px;font:500 12px var(--mono);letter-spacing:.26em;text-transform:uppercase;color:#8a8f99}
#about-view .tlc-ey .tlc-dash{width:30px;height:1px;background:var(--scale);flex:none}
#about-view .tlc-panel h3{font:800 clamp(28px,3.2vw,44px)/1.02 var(--disp);letter-spacing:-.03em;color:var(--ink);margin:20px 0 0}
#about-view .tlc-desc{max-height:0;opacity:0;overflow:hidden;transition:max-height .6s cubic-bezier(.2,.6,.2,1),opacity .45s,margin-top .45s}
#about-view .tlc-stage.active .tlc-desc{max-height:260px;opacity:1;margin-top:18px}
#about-view .tlc-desc p{font:400 clamp(15px,1.15vw,17px)/1.6 var(--disp);color:var(--ink-2);margin:0}
#about-view .tlc-flow{position:absolute;bottom:40px;left:50%;transform:translateX(-50%);z-index:8;display:flex;align-items:center;gap:16px;padding:12px 24px;border-radius:999px;background:#fff;box-shadow:0 8px 24px -10px rgba(20,18,16,.28)}
#about-view .tlc-flow .lab{font:400 11px var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--ink-2)}
#about-view .tlc-flow .yr{font:700 14px var(--mono);color:var(--scale);min-width:42px}
#about-view .tlc-flow .bar{width:150px;height:2px;background:#e7e4e0;border-radius:2px;overflow:hidden}
#about-view .tlc-flow .bar span{display:block;height:100%;width:0;background:var(--scale)}
#about-view .tlc-dots{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:8;display:none;gap:6px}
#about-view .tlc-dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.28);transition:.3s;cursor:pointer}
#about-view .tlc-dots i.on{background:var(--scale);width:18px;border-radius:4px}
@media (max-width:760px){#about-view .tlc-zone{height:auto!important}
#about-view .tlc-pin{position:relative;height:88vh;min-height:600px}
#about-view .tlc-rail{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
#about-view .tlc-rail::-webkit-scrollbar{display:none}
#about-view .tlc-track{transform:none!important}
#about-view .tlc-stage{width:var(--vw,100vw);flex-direction:column;gap:14px;align-items:stretch;justify-content:center;padding:118px 26px 92px;scroll-snap-align:center}
#about-view .tlc-year, #about-view .tlc-panel{width:auto;transform:none!important;opacity:1!important}
#about-view .tlc-big{font-size:60px}
#about-view .tlc-panel{padding:22px}
#about-view .tlc-panel h3{font-size:22px;margin-top:0}
#about-view .tlc-desc{max-height:none!important;opacity:1!important;margin-top:12px!important}
#about-view .tlc-sectitle{left:24px;top:74px}
#about-view .tlc-sectitle h2{font-size:30px}
#about-view .tlc-flow{bottom:54px}
#about-view .tlc-dots{display:flex}
#about-view .tlc-procdot{display:none}
}
#about-view #lm-02{padding-top:48px}
#about-view #lm-02 .vms-wrap{position:relative;left:50%;right:50%;margin-left:calc(var(--vw,100vw) / -2);margin-right:calc(var(--vw,100vw) / -2);width:var(--vw,100vw);margin-top:0}
#about-view .vms, #about-view .vms *{box-sizing:border-box}
#about-view .vms{display:flex;gap:14px;height:80vh;min-height:520px;padding:18px;background:#F2F0ED;font-family:var(--disp)}
#about-view .vms-panel{position:relative;overflow:hidden;border-radius:20px;flex:1 1 0%;min-width:0;flex-grow:1;will-change:flex-grow;transition:flex-grow .82s cubic-bezier(.16,1,.3,1);cursor:default}
#about-view .vms.is-active .vms-panel{flex-grow:.4}
#about-view .vms.is-active .vms-panel.is-open{flex-grow:5.2}
#about-view .vms-bg{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.015);transition:transform 1.6s cubic-bezier(.16,1,.3,1)}
#about-view .vms-panel.is-open .vms-bg{transform:scale(1.09)}
#about-view .vms-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,16,18,.12) 0%,rgba(15,16,18,.28) 42%,rgba(15,16,18,.74) 100%);transition:background .8s ease}
#about-view .vms-panel.is-open .vms-scrim{background:linear-gradient(180deg,rgba(15,16,18,.30) 0%,rgba(15,16,18,.50) 45%,rgba(15,16,18,.86) 100%)}
#about-view .vms-label{position:absolute;left:26px;bottom:30px;display:flex;align-items:center;gap:14px;color:#fff;z-index:3;transform-origin:center bottom;transform:translateX(0) rotate(0deg);opacity:1;white-space:nowrap;pointer-events:none;transition:transform .7s cubic-bezier(.16,1,.3,1),left .7s cubic-bezier(.16,1,.3,1),bottom .7s cubic-bezier(.16,1,.3,1),gap .7s cubic-bezier(.16,1,.3,1),opacity .45s ease}
#about-view .vms-label .vms-bar{width:30px;height:2px;background:var(--scale);flex:0 0 auto}
#about-view .vms-label .vms-txt{font-size:clamp(20px,2.2vw,28px);font-weight:800;letter-spacing:.04em;text-transform:uppercase;transition:font-size .7s cubic-bezier(.16,1,.3,1)}
#about-view .vms.is-active .vms-panel:not(.is-open) .vms-label{left:50%;bottom:40px;gap:12px;transform:translateX(-50%) rotate(-90deg)}
#about-view .vms.is-active .vms-panel:not(.is-open) .vms-label .vms-txt{font-size:19px}
#about-view .vms-panel.is-open .vms-label{opacity:0}
#about-view .vms-content{position:absolute;inset:0;display:flex;align-items:flex-end;padding:54px 56px;opacity:0;transition:opacity .55s ease;z-index:2;pointer-events:none}
#about-view .vms-panel.is-open .vms-content{opacity:1}
#about-view .vms-inner{max-width:760px;color:#fff}
#about-view .vms-head{display:flex;align-items:center;gap:18px;margin-bottom:22px}
#about-view .vms-head .vms-hbar{width:54px;height:3px;background:var(--scale);flex:0 0 auto}
#about-view .vms-content h2{margin:0;font-size:clamp(40px,5.5vw,76px);font-weight:800;line-height:.98;letter-spacing:-.01em;text-transform:uppercase}
#about-view .vms-copy p{margin:0 0 14px;font-size:clamp(15px,1.5vw,20px);line-height:1.6;opacity:0;transform:translateY(12px);transition:opacity .6s ease,transform .6s cubic-bezier(.16,1,.3,1)}
#about-view .vms-panel.is-open .vms-copy p{opacity:.96;transform:none}
#about-view .vms-panel.is-open .vms-copy p:nth-child(1){transition-delay:.28s}
#about-view .vms-panel.is-open .vms-copy p:nth-child(2){transition-delay:.38s}
@media (hover:none),(max-width:760px){#about-view #lm-02 .vms-wrap{margin-top:4px}
#about-view .vms{flex-direction:column;height:auto;min-height:0;gap:12px;padding:14px}
#about-view .vms-panel, #about-view .vms.is-active .vms-panel, #about-view .vms.is-active .vms-panel.is-open{flex:1 1 auto!important;flex-grow:1!important;height:74vh;min-height:440px}
#about-view .vms-label{opacity:0!important}
#about-view .vms-content{position:relative;opacity:1!important;align-items:flex-end}
#about-view .vms-copy p{opacity:.96!important;transform:none!important}
}
.nav-dd{position:absolute;top:calc(100% + 10px);left:0;min-width:250px;background:#fff;
border:1px solid var(--rule,#eceff3);border-radius:16px;padding:8px;
box-shadow:0 18px 44px -16px rgba(20,18,16,.30),0 2px 8px rgba(20,18,16,.06);
opacity:0;visibility:hidden;transform:translateY(-6px);
transition:opacity .22s ease,transform .22s ease,visibility .22s;z-index:200;pointer-events:none}
.nav-dd.open{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}
.nav-dd::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.nav-dd-i{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:10px;
text-decoration:none;color:var(--ink,#15181d);transition:background .18s ease,color .18s ease}
.nav-dd-i .n{font:600 11px var(--mono,monospace);letter-spacing:.12em;color:#b3ada3;min-width:18px}
.nav-dd-i .l{font:600 14px var(--disp,sans-serif);letter-spacing:-.01em}
.nav-dd-i:hover{background:#faf3ee;color:#E9550A}
.nav-dd-i:hover .n{color:#E9550A}
.nav-dd-all{display:flex;align-items:center;gap:8px;margin-top:6px;padding:10px 12px;
border-top:1px solid var(--rule,#eceff3);text-decoration:none;
font:600 12.5px var(--mono,monospace);letter-spacing:.04em;color:#E9550A}
.nav-dd-all .arr{transition:transform .2s ease}
.nav-dd-all:hover .arr{transform:translateX(4px)}
@media(max-width:1100px){.nav-dd{display:none}}
html.v-about #home-view{display:none!important}
html.v-about #about-view{display:block!important}
/* ============ WHATSAPP FLOATING BUTTON =================================
Fixed bottom-left on every page. Markup + CSS only — no JavaScript.
MOUNTED INSIDE #rot-inner, NOT at body level. #rot-shell{z-index:1} is a
stacking context, so a body-level button would paint above EVERYTHING
inside the shell — including the fullscreen company-overview video and
its scrim (.au-cine-scrim, z 9998, mounted into #rot-inner by v43). This
is the same trap v43 documented. Living inside the shell makes it layer
with the page it belongs to.
z-index 85 is chosen against the overlay ladder, not picked round:
60 .eqc-glowctl / 3D back button
85 .wa-fab <-- above all ordinary page content
90 .pr-cine, #lmnav, .eqc-cine (cinematics cover it)
100 .menu (legacy overlay covers it)
120 .nav (never covers navigation)
9998+ .au-cine-scrim (fullscreen video covers it)
On equipment.html .eqc-cine mounts to document.body at z 90, which beats
the whole shell at root z 1, so that cinematic covers it there too.
Bottom-left was empty: every other fixed widget on this site anchors
bottom-RIGHT (#lmtoggle 20/20, .eqc-glowctl 12/12) or centre. */
.wa-fab{
position:fixed;right:22px;bottom:22px;z-index:85;
display:flex;align-items:center;justify-content:center;
width:58px;height:58px;border-radius:50%;
background:#25D366;color:#fff;
text-decoration:none;border:0;
-webkit-tap-highlight-color:transparent;
box-shadow:0 6px 20px rgba(0,0,0,.28),0 2px 6px rgba(0,0,0,.18);
transition:transform .24s cubic-bezier(.3,.7,.2,1),box-shadow .24s ease;
}
.wa-fab svg{width:28px;height:28px;display:block;flex:none}
@media (hover:hover){
.wa-fab:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 12px 30px rgba(0,0,0,.34)}
}
.wa-fab:focus-visible{outline:2px solid #E9550A;outline-offset:3px}
/* Deterministic while the rotate menu is open. Inside a transformed
#rot-inner a fixed child resolves against the shell box and would drift
off-screen anyway — this makes the outcome explicit rather than emergent,
and matches how #lmnav and .eqc-glowctl are already parked. */
body.rot-open .wa-fab,body.rot-closing .wa-fab{visibility:hidden}
@media (max-width:760px){
.wa-fab{right:16px;bottom:16px;width:54px;height:54px}
.wa-fab svg{width:26px;height:26px}
}
@media (prefers-reduced-motion:reduce){
.wa-fab{transition:none}
.wa-fab:hover{transform:none}
}
/* ---- rotate-menu backdrop: independent reveal hooks ----------------------
Observed on the live site: the menu panel was OPEN and hoverable (the status
bar showed a menu link URL, and pointer-events:auto comes ONLY from
.rot-menu.is-open) while .rot-bg stayed hidden. With the backdrop absent the
white page showed through, and the panel's white labels became invisible.
The backdrop was keyed solely off body.rot-open, so if that one class ever
goes missing while the panel is open, the menu is unreadable.
Fixed by keying the reveal off two MORE signals that open() sets in the same
breath — html.rot-lock (universally supported) and the very class that grants
the panel its pointer-events. Any one of the three now reveals it, so the
panel and its backdrop cannot desynchronise. No visual change when the
existing rule already works. */
html.rot-lock .rot-bg{opacity:1;visibility:visible}
body:has(.rot-menu.is-open) .rot-bg{opacity:1;visibility:visible}
/* ============ FOOTER v57 — light, map-led =================================
Every rule is scoped .ft.ftx (specificity 0,2,0) so it beats the legacy
`.ft` rules (0,1,0) regardless of where this block lands in the cascade.
That is what lets it live in instead of last-before-, which
is the FOUC trap from v50. The seam rule `.ft{margin-top:calc(-100vh - 1px)}`
is deliberately NOT redeclared here — the stacked-section seam still owns it.
New children use the .ftx-* namespace, which no legacy rule targets. */
/* ---- v68: the PRODUCT-VIEW footer must not inherit the home-view seam ----
v66 added a second footer (#pvFooter) inside #product-view. It carries
class="ft ftx", so it inherited BOTH home-view-only rules:
.ft { margin-top: calc(-100vh - 1px) } <- rises over #sustain's tail
.ft.ftx { min-height: calc(100vh + 1px) } <- fills the band it rose into
There is no 300vh sustainability scaffold in the product view, so that
negative margin pulled the footer a whole viewport UP, straight over the
spec tables — on desktop as well as mobile. #pvFooter is (1,0,0), which
beats .ft (0,1,0) and .ft.ftx (0,2,0), so this cancels both without
touching the home-view footer or the seam it depends on. */
#pvFooter{margin-top:0;min-height:0}
.ft.ftx{
background:#fbfbfa;color:#3f3d3a;padding:0;overflow:hidden;
border-top:1px solid rgba(15,14,12,.08);
/* ---- v59: cover the whole band the footer is pulled into ----------------
.ft carries margin-top:calc(-100vh - 1px) so it rises over the empty tail
of #sustain's 300vh scaffold (its sticky panel has already been released
by then). That only works while the footer is AT LEAST as tall as the band
it covers. The new light footer is shorter than the old dark one, so the
last stretch of that scaffold was left showing underneath it — the dark
strip with a sliver of the sustainability image below the legal bar.
Filling the band costs no extra scrolling: the 100vh already exists in the
document either way. The extra space goes ABOVE the content so the legal
bar still sits flush at the very bottom of the page. */
min-height:calc(100vh + 1px);
display:flex;flex-direction:column;justify-content:flex-end;
}
.ftx-wrap{max-width:1440px;margin:0 auto;padding:0 clamp(20px,3.6vw,54px)}
/* ---- top band ---- */
.ftx-top{
display:grid;grid-template-columns:1.15fr .72fr .95fr .82fr 1.45fr;
gap:clamp(20px,2.6vw,42px);
padding:clamp(40px,5vw,66px) 0 clamp(34px,4vw,52px);
}
.ftx-logo{display:block;width:clamp(150px,13vw,196px);height:auto;margin:0 0 22px}
.ftx-tag{
font:500 12px/1 var(--mono,'IBM Plex Mono',monospace);letter-spacing:.2em;
text-transform:uppercase;color:#0f0e0c;margin:0 0 18px;
}
.ftx-tag i{font-style:normal;color:#E9550A}
.ftx-blurb{
font:400 14.5px/1.75 var(--disp,'Bricolage Grotesque',Arial,sans-serif);
color:#5d5a55;max-width:34ch;margin:0 0 24px;
}
.ftx-soc{display:flex;gap:12px}
.ftx-soc a{
width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
border:1px solid rgba(233,85,10,.32);color:#E9550A;text-decoration:none;
transition:background .22s,border-color .22s,color .22s,transform .22s;
}
.ftx-soc a:hover{background:#E9550A;border-color:#E9550A;color:#fff;transform:translateY(-2px)}
.ftx-soc svg{width:18px;height:18px;display:block}
.ftx-h{
display:flex;align-items:center;gap:9px;margin:0 0 6px;
font:500 11.5px/1 var(--mono,'IBM Plex Mono',monospace);letter-spacing:.16em;
text-transform:uppercase;color:#0f0e0c;
}
.ftx-h::before{content:"";width:6px;height:6px;border-radius:50%;background:#E9550A;flex:none}
.ftx-rule{width:34px;height:2px;background:#E9550A;opacity:.55;margin:0 0 22px}
.ftx-list{list-style:none;margin:0;padding:0}
.ftx-list li{margin:0 0 15px}
.ftx-list a{
font:400 14px/1.4 var(--disp,'Bricolage Grotesque',Arial,sans-serif);
color:#5d5a55;text-decoration:none;display:inline-block;
transition:color .2s,transform .2s;
}
.ftx-list a:hover{color:#E9550A;transform:translateX(3px)}
/* ---- world map ---- */
.ftx-map{position:relative;align-self:center}
/* v140: pins are positioned against THIS box, not .ftx-map — .ftx-map also
contains the caption below the image, so percentages resolved against it
landed the pins ~3.5% too low (the same trap as the Palej pin in v135). */
.ftx-mapin{position:relative;display:block}
.ftx-map img{width:100%;height:auto;display:block}
.ftx-pin{
position:absolute;width:4px;height:4px;border-radius:50%;background:#E9550A;
transform:translate(-50%,-50%);
box-shadow:0 0 0 1px #fff; /* v166: hairline white cut = smaller dot reads sharper */
}
.ftx-pin::after{
content:attr(data-n);position:absolute;left:50%;top:-8px;transform:translate(-50%,-100%);
background:#0f0e0c;color:#fff;white-space:nowrap;
font:500 10px/1 var(--mono,'IBM Plex Mono',monospace);letter-spacing:.1em;
padding:6px 9px;border-radius:6px;opacity:0;pointer-events:none;transition:opacity .2s;
}
.ftx-pin:hover::after{opacity:1}
.ftx-pin--hq{width:6px;height:6px}
/* v140: the pulse ring moved from .ftx-pin--hq to EVERY pin — V wants all
five markets pulsating. --hq stays as the larger dot for the plant.
transform-box/origin are not needed here (a normal element scales about
its own centre), but the ring must be centred with negative margins
because ::before is positioned from the pin's top-left. */
.ftx-pin::before{
content:"";position:absolute;left:50%;top:50%;width:4px;height:4px;
margin:-2px 0 0 -2px;border-radius:50%;border:1px solid rgba(233,85,10,.7);
animation:ftxPulse 5.2s cubic-bezier(.22,.62,.3,1) infinite;
}
.ftx-pin--hq::before{
width:6px;height:6px;margin:-3px 0 0 -3px;
}
@keyframes ftxPulse{
0%{transform:scale(1);opacity:.55}
60%{opacity:.12}
100%{transform:scale(3.2);opacity:0}
}
@media (prefers-reduced-motion:reduce){
.ftx-pin::before{animation:none;transform:scale(2.1);opacity:.22}
}
.ftx-mapcap{
margin:14px 0 0;text-align:right;
font:500 10.5px/1 var(--mono,'IBM Plex Mono',monospace);letter-spacing:.16em;
text-transform:uppercase;color:#8a867f;
}
/* ---- contact strip ---- */
.ftx-strip{
display:grid;grid-template-columns:repeat(auto-fit,minmax(212px,1fr));
border-top:1px solid rgba(233,85,10,.34);
}
.ftx-cell{
display:flex;gap:16px;align-items:flex-start;
padding:clamp(24px,2.8vw,34px) clamp(14px,2vw,30px);
border-left:1px solid rgba(15,14,12,.09);
}
.ftx-cell:first-child{border-left:0;padding-left:0}
.ftx-ico{
width:52px;height:52px;border-radius:50%;flex:none;display:grid;place-items:center;
border:1px solid rgba(233,85,10,.30);color:#E9550A;
}
.ftx-ico svg{width:21px;height:21px;display:block}
.ftx-cell h4{
font:500 11px/1 var(--mono,'IBM Plex Mono',monospace);letter-spacing:.16em;
text-transform:uppercase;color:#E9550A;margin:5px 0 9px;
}
.ftx-cell p{
font:400 14px/1.6 var(--disp,'Bricolage Grotesque',Arial,sans-serif);
color:#3f3d3a;margin:0;
}
.ftx-cell a{color:#3f3d3a;text-decoration:none;transition:color .2s}
.ftx-cell a:hover{color:#E9550A}
/* ---- bottom bar ---- */
.ftx-base{
border-top:1px solid rgba(15,14,12,.10);
display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center;justify-content:space-between;
padding:20px 0 24px;
}
.ftx-copy{
font:400 13px/1.7 var(--disp,'Bricolage Grotesque',Arial,sans-serif);color:#5d5a55;margin:0;
}
.ftx-reg{
display:block;font:400 11px/1.6 var(--mono,'IBM Plex Mono',monospace);
letter-spacing:.06em;color:#8a867f;
}
.ftx-legal{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.ftx-legal a{
font:400 13px/1 var(--disp,'Bricolage Grotesque',Arial,sans-serif);
color:#5d5a55;text-decoration:none;transition:color .2s;
}
.ftx-legal a:hover{color:#E9550A}
.ftx-legal span{color:rgba(15,14,12,.22)}
/* ---- responsive ---- */
@media (max-width:1180px){
.ft.ftx .ftx-top{grid-template-columns:1.2fr .9fr 1.1fr .9fr}
.ft.ftx .ftx-map{grid-column:1 / -1;max-width:720px;margin:8px auto 0}
.ft.ftx .ftx-mapcap{text-align:center}
}
@media (max-width:900px){
.ft.ftx .ftx-top{grid-template-columns:1fr 1fr;gap:32px}
.ft.ftx .ftx-strip{grid-template-columns:1fr 1fr}
.ft.ftx .ftx-cell{border-left:0;border-top:1px solid rgba(15,14,12,.09);padding-left:0}
.ft.ftx .ftx-cell:nth-child(-n+2){border-top:0}
}
@media (max-width:600px){
.ft.ftx .ftx-top{grid-template-columns:1fr}
.ft.ftx .ftx-strip{grid-template-columns:1fr}
.ft.ftx .ftx-cell{border-top:1px solid rgba(15,14,12,.09)}
.ft.ftx .ftx-cell:first-child{border-top:0}
.ft.ftx .ftx-base{flex-direction:column;align-items:flex-start}
}
/* ==========================================================================
PHONE-ONLY BEHAVIOUR. Every rule is inside a max-width query, so desktop
and laptop rendering is untouched.
========================================================================== */
/* ---- INDUSTRIES on a phone: full-screen swipe (v70) ----------------------
V picked design 4 (sector pills) but asked for the pills to come out — so
this is a full-screen photographic deck: one industry fills the screen, the
copy sits on a gradient over the lower third, and you swipe sideways.
`touch-action` is deliberately NOT set: the v69 bug was `pan-y` here, which
tells the browser a horizontal scroller may only pan VERTICALLY and refuses
every sideways drag. `auto` (the default) routes by gesture direction.
`#industries{padding-bottom:100vh}` is untouched — it cancels
`#sustain.sus{margin-top:-100vh}` in the seam architecture. */
@media (max-width:960px){
#industries{background:#0a0908}
#industries .ip-stage{
display:flex;flex-direction:row;align-items:stretch;
overflow-x:auto;overflow-y:hidden;
scroll-snap-type:x mandatory;
overscroll-behavior-x:contain;
-webkit-overflow-scrolling:touch;
scrollbar-width:none;
gap:0;padding:0;height:auto;min-height:0;
}
#industries .ip-stage::-webkit-scrollbar{display:none}
#industries .ip-content-layer{
position:relative;flex:0 0 100%;
scroll-snap-align:center;scroll-snap-stop:always;
height:100svh;min-height:0;margin:0;padding:0;border:0;border-radius:0;
display:flex;flex-direction:column;justify-content:flex-end;
overflow:hidden;box-shadow:none;
background-size:cover;background-position:center;
opacity:1;pointer-events:auto;transform:none;filter:none;
}
/* photo + a scrim that only darkens where the words are */
#industries .ip-content-layer[data-idx="0"]{background-image:linear-gradient(180deg,rgba(10,9,8,.10) 0%,rgba(10,9,8,.16) 42%,rgba(10,9,8,.88) 100%),var(--ind1)}
#industries .ip-content-layer[data-idx="1"]{background-image:linear-gradient(180deg,rgba(10,9,8,.10) 0%,rgba(10,9,8,.16) 42%,rgba(10,9,8,.88) 100%),var(--ind2)}
#industries .ip-content-layer[data-idx="2"]{background-image:linear-gradient(180deg,rgba(10,9,8,.10) 0%,rgba(10,9,8,.16) 42%,rgba(10,9,8,.88) 100%),var(--ind3)}
#industries .ip-content-layer[data-idx="3"]{background-image:linear-gradient(180deg,rgba(10,9,8,.10) 0%,rgba(10,9,8,.16) 42%,rgba(10,9,8,.88) 100%),var(--ind4)}
#industries .ip-c-inner{
padding:0 20px calc(74px + env(safe-area-inset-bottom));
max-width:none;position:relative;z-index:3;
}
#industries .ip-tag{display:none}
#industries .ip-rule{display:none}
#industries .ip-title{
font:800 clamp(32px,10vw,44px)/.98 var(--disp);
letter-spacing:-.035em;color:#fff;margin:0;
}
#industries .ip-title em{font-style:normal;color:var(--scale,#E9550A)}
#industries .ip-desc{
font:400 14px/1.55 var(--disp);color:rgba(255,255,255,.86);margin:11px 0 0;
}
/* v71: the rail is wrapped WITH the deck (see the module) and positioned
against that wrapper, so it always sits at the bottom of the 100svh frame.
It used to be absolute against #industries, whose box includes the 100vh
seam padding — which threw it a whole viewport out and landed it over the
Products section. */
#industries .ipm-wrap{position:relative}
#industries .ipm-foot{
position:absolute;left:0;right:0;bottom:calc(20px + env(safe-area-inset-bottom));
z-index:6;display:flex;align-items:center;gap:12px;padding:0 20px;pointer-events:none;
}
/* swipe cue — only on the first frame, and it retires once you swipe */
#industries .ipm-cue{
position:absolute;right:18px;bottom:calc(52px + env(safe-area-inset-bottom));
z-index:7;display:flex;align-items:center;gap:9px;pointer-events:none;
padding:9px 14px;border-radius:999px;
background:rgba(10,9,8,.42);border:1px solid rgba(255,255,255,.28);
-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
font:600 9.5px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:#fff;
opacity:1;transition:opacity .45s ease;
}
#industries .ipm-cue.gone{opacity:0}
#industries .ipm-cue svg{width:15px;height:15px;animation:ipmNudge 1.5s ease-in-out infinite}
@keyframes ipmNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
@media (prefers-reduced-motion:reduce){
#industries .ipm-cue svg{animation:none}
}
#industries .ipm-rail{flex:1;display:flex;gap:5px}
#industries .ipm-rail i{flex:1;height:2.5px;border-radius:2px;background:rgba(255,255,255,.3);transition:background .3s}
#industries .ipm-rail i.on{background:var(--scale,#E9550A)}
#industries .ipm-cnt{font:600 11px var(--mono);letter-spacing:.16em;color:rgba(255,255,255,.7);flex:none}
#industries .ipm-cnt b{color:#fff;font-weight:600}
}
/* ---- PPGI on a phone (v66) -----------------------------------------------
The markup already matches the approved mock: #ctrl holds the PPGI title,
the RAL row, the finish group and the tool row; #dock holds the swatch rail.
Both are absolutely positioned for a desktop, so on a phone they land over
the middle of the coil. This lays them out as the mock does — coil on top,
a white sheet along the bottom, swatches on a rail down the LEFT — without
touching the markup, the 3D module, or anything above 760px.
Everything else the mock shows already exists on the live page and is
deliberately left alone: Specifications & Range (.specgrid5), the RAL and
RFQ blocks, the four table accordions (.rfqbox.spec-acc, already press-to-
expand) and the site footer with its map. The DOM order is ALREADY the order
V asked for: stage -> specs -> RAL -> RFQ -> tables -> footer. */
@media (max-width:760px){
/* give the canvas the top of the stage so the coil centres in clear space */
#c3dHeroSlot #c3d-root #stage,
#c3dFullSlot #c3d-root #stage{ inset:0 0 46% 0; }
#c3dHeroSlot #c3d-root #glow,
#c3dFullSlot #c3d-root #glow{ top:26%; }
/* ---- the spec sheet, as a bottom sheet ---- */
#c3d-root #ctrl{
left:8px;right:8px;bottom:8px;top:auto;
transform:none;width:auto;max-width:none;
max-height:44%;overflow-y:auto;-webkit-overflow-scrolling:touch;
overscroll-behavior:contain;
background:#fff;border:1px solid var(--rule,#eceff3);
border-radius:22px;padding:12px 16px 16px;
box-shadow:0 -14px 34px -24px rgba(21,24,29,.55);
}
#c3d-root #ctrl::before{ /* grab handle, as in the mock */
content:"";display:block;width:38px;height:4px;border-radius:3px;
background:#e3e6ea;margin:0 auto 12px;
}
#c3d-root #ctrl .utils{justify-content:center;gap:34px}
/* ---- swatches: a vertical rail down the left of the coil ---- */
#c3d-root #dock{
left:10px;right:auto;top:26%;bottom:auto;
transform:translateY(-50%);width:auto;
display:block;
}
#c3d-root #dockCol{
display:flex;flex-direction:column;align-items:center;gap:8px;
background:#fff;border-radius:999px;padding:9px 8px;
box-shadow:0 10px 26px -14px rgba(21,24,29,.42);
}
#c3d-root #prodtabs{top:auto;bottom:calc(46% + 10px)}
#c3d-root #hints{display:none}
/* ---- v71: ancestry-independent placement for the spec card --------------
`#c3d-root #ctrl` (2,0,0) already out-specifies the desktop `#ctrl`
(1,0,0), and #ctrl IS inside #c3d-root in the markup — yet on a real
iPhone the card still renders in its desktop position. I cannot inspect
the live DOM from here and have now been wrong twice guessing why, so
this stops depending on the ancestry holding at runtime: an id-only rule
with !important, inside the phone breakpoint only. If the module ever
reparents #ctrl, or something raises specificity, this still wins. */
#ctrl{
left:8px!important;right:8px!important;bottom:8px!important;top:auto!important;
transform:none!important;width:auto!important;max-width:none!important;
max-height:44%!important;overflow-y:auto!important;
}
#dock{
left:10px!important;right:auto!important;top:26%!important;bottom:auto!important;
transform:translateY(-50%)!important;width:auto!important;
}
/* v67: the stage is `touch-action:none` so a drag rotates the coil. On a
phone that also means a thumb placed on the coil can NEVER scroll the
page — and the coil fills the top half of the screen, so it is easy to
get stuck. `pan-y` hands VERTICAL drags back to the page scroller while
horizontal drags (which is what rotating is) still reach the module. */
#c3d-root #stage{touch-action:pan-y} /* desktop advice */
/* ---- the four property tables ---- */
/* they already scroll (.spt-wrap{overflow-x:auto}); freeze the grade column
so you can still see which row you are reading while dragging sideways */
#product-view .spt-wrap{overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
#product-view .spt td:first-child,
#product-view .spt th:first-child{
position:sticky;left:0;z-index:2;background:#fff;
box-shadow:1px 0 0 var(--rule,#eceff3);
}
#product-view .spt th:first-child{background:#fbfcfd}
#product-view .spt{font-size:13px}
#product-view .spt td{padding:11px 12px}
#product-view .rfqtop h3{font-size:17px;line-height:1.15}
/* the section heading and spec grid, tightened for 390px */
#product-view .spt-head h2{font-size:22px}
#product-view .specgrid5{gap:16px 14px}
/* ---- VIEW IN 3D (kept from v62) ---------------------------------------
The control exists but renders as a small inline span buried in the config
stepper, well below the fold. On phones it becomes a full-width primary
action so the coil viewer is actually reachable. */
#product-view #view3dBtn{
display:flex!important;align-items:center;justify-content:center;gap:10px;
width:100%;margin:16px 0 4px;padding:16px 18px;
border-radius:14px;
background:var(--orange,#E9550A);color:#fff;
font:600 13px/1 var(--mono,monospace);letter-spacing:.14em;text-transform:uppercase;
box-shadow:0 8px 22px -10px rgba(233,85,10,.75);
-webkit-tap-highlight-color:transparent;
}
#product-view #view3dBtn::after{
content:"";width:16px;height:16px;flex:none;background:currentColor;
-webkit-mask:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2 3 7v10l9 5 9-5V7z'/%3E%3Cpath d='m3 7 9 5 9-5M12 12v10'/%3E%3C/svg%3E");
mask:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2 3 7v10l9 5 9-5V7z'/%3E%3Cpath d='m3 7 9 5 9-5M12 12v10'/%3E%3C/svg%3E");
}
#product-view .pv3d-touchhint{
display:block;text-align:center;margin:8px 0 0;
font:500 10px var(--mono,monospace);letter-spacing:.16em;
text-transform:uppercase;color:rgba(0,0,0,.42);
}
}
@media (min-width:761px){ #product-view .pv3d-touchhint{display:none} }
/* ==========================================================================
v73 — phone-only PPGI experience, to V's two premium reference mockups.
PRODUCT PAGE (hero embed, #c3dHeroSlot): the coil becomes the hero (75% of
the card), the configurator UI leaves the page — swatch rail, finish pills,
tool row and product tabs are hidden here; what remains is a clean strip:
PPGI + subtitle on the left, the RAL readout on the right, plus the Back
and View-in-3D pills.
FULL 3D (#c3dFullSlot): a real configurator — full-bleed stage, PPGI + RAL
readout top-centre, labelled floating controls on the right, and a
persistent draggable bottom sheet holding the module's own finish control
and colour library.
EVERYTHING the chrome adopts STAYS INSIDE #c3d-root, so the module's
scoped styles and CSS variables keep applying — the v72 sheet died
precisely because #libCol was moved outside that scope.
All rules are inside the max-width query. Desktop untouched.
========================================================================== */
@media (max-width:760px){
/* v80 — a stray horizontal overflow let the page pan sideways into black.
clip (not hidden) kills the pan without creating a scroll container, so
position:sticky and window scrolling are untouched; every inner
horizontal scroller (industries deck, swatch strip, spec tables) owns
its own overflow and is unaffected. */
html{overflow-x:clip}
body{overflow-x:clip}
/* ================= PRODUCT PAGE (hero embed) ================= */
#c3dHeroSlot #c3d-root #stage{inset:0 0 25% 0}
#c3dHeroSlot #c3d-root #glow{top:34%}
#c3dHeroSlot #prodtabs{display:none}
#c3dHeroSlot #dock{display:none!important}
#c3dHeroSlot #ctrl{
left:10px!important;right:10px!important;bottom:10px!important;top:auto!important;
transform:none!important;width:auto!important;max-width:none!important;
max-height:none!important;overflow:visible!important;
display:grid;grid-template-columns:1fr auto;align-items:center;gap:6px 14px;
padding:17px 18px;border-radius:18px;
background:#fff;border:1px solid rgba(26,22,17,.09);
box-shadow:0 14px 32px -20px rgba(21,24,29,.4);
}
#c3dHeroSlot #ctrl::before{display:none}
#c3dHeroSlot #ctrl .cdiv{display:none}
#c3dHeroSlot #ctrl #ctrlGroup{display:none}
#c3dHeroSlot #ctrl .utils{display:none}
#c3dHeroSlot #ctrl .pid b{font-size:19px}
#c3dHeroSlot #ctrl .pid span{font-size:6.5px}
#c3dHeroSlot #ctrl #ralRow{padding:0;justify-self:end}
/* hero pills */
#product-view .pv-hero .backf{position:absolute;top:14px;left:14px;margin:0;z-index:9;transition:transform .18s ease}
#product-view .pv-hero #view3dBtn{
position:absolute;top:14px;right:14px;left:auto;bottom:auto;margin:0;z-index:9;
display:inline-flex!important;width:auto;align-items:center;gap:8px;
padding:11px 16px;border-radius:999px;
background:#fff;color:var(--orange,#E9550A);border:1px solid rgba(21,24,29,.08);
box-shadow:0 10px 26px -14px rgba(21,24,29,.4);
font:600 12px var(--mono);letter-spacing:.02em;text-transform:none;
-webkit-backdrop-filter:none;backdrop-filter:none;
transition:transform .18s ease;
}
#product-view .pv-hero #view3dBtn::after{width:14px;height:14px}
#product-view .pv-hero .backf:active,
#product-view .pv-hero #view3dBtn:active{transform:scale(.95)}
#product-view .pv3d-touchhint{display:none}
/* ================= FULL 3D CONFIGURATOR ================= */
#c3dFullSlot #c3d-root #stage{inset:0!important}
#c3dFullSlot #c3d-root #glow{top:40%}
#c3dFullSlot #prodtabs{display:none}
#c3dFullSlot #ctrl{display:none!important}
#c3dFullSlot #dock{display:none!important}
#ppgi3d{min-height:100svh}
#ppgi3d .pv3d-back{top:calc(env(safe-area-inset-top) + 74px);left:14px}
html.c3dfull{overflow:hidden}
html.c3dfull body{overflow:hidden}
html.c3dfull .wa-fab{display:none!important}
/* chrome shell — hidden in the hero embed, shown in the full slot */
#c3d-root .c3dm{display:none}
#c3dFullSlot #c3d-root .c3dm{display:block}
/* readout, top-centre */
#c3d-root .c3dm-head{
position:absolute;top:calc(env(safe-area-inset-top) + 76px);left:0;right:0;z-index:12;
display:flex;flex-direction:column;align-items:center;gap:7px;pointer-events:none;
}
#c3d-root .c3dm-pn{font:600 10px var(--mono,monospace);letter-spacing:.26em;text-transform:uppercase;color:#4C453C;text-shadow:0 1px 0 rgba(255,255,255,.7)}
#c3d-root .c3dm-ral{display:flex;align-items:center;gap:10px}
#c3d-root .c3dm-sw{width:27px;height:27px;border-radius:9px;flex:none;
box-shadow:inset 0 0 0 1px rgba(26,22,17,.14),0 2px 6px rgba(26,22,17,.2)}
#c3d-root .c3dm-code{display:block;font:700 14px 'Bricolage Grotesque',system-ui,sans-serif;letter-spacing:-.01em;color:var(--ink);line-height:1.1}
#c3d-root .c3dm-name{display:block;font:500 6.5px var(--mono,monospace);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-mute);font-style:normal;margin-top:2px}
/* floating labelled controls, right */
#c3d-root .c3dm-rail{
position:absolute;right:12px;top:44%;transform:translateY(-50%);z-index:12;
display:flex;flex-direction:column;gap:8px;
}
#c3d-root .c3dm-rail .utils{display:flex;flex-direction:column;gap:26px;padding:0;justify-content:flex-start}
#c3d-root .c3dm-rail .ubtn{
position:relative;width:46px;height:46px;border-radius:50%;
background:rgba(255,255,255,.94);border:1px solid rgba(26,22,17,.08);
box-shadow:0 8px 20px -10px rgba(26,22,17,.4);color:var(--ink);
display:flex;align-items:center;justify-content:center;
}
#c3d-root .c3dm-rail .ubtn svg{width:17px;height:17px}
#c3d-root .c3dm-rail .ubtn::after{
content:attr(title);position:absolute;top:calc(100% + 5px);left:50%;transform:translateX(-50%);
white-space:nowrap;font:600 6.5px var(--mono,monospace);letter-spacing:.14em;
text-transform:uppercase;color:#4C453C;text-shadow:0 1px 0 rgba(255,255,255,.75);
}
/* gesture hint */
#c3d-root .c3dm-hint{
position:absolute;left:0;right:0;bottom:calc(212px + env(safe-area-inset-bottom));
text-align:center;z-index:11;pointer-events:none;
font:600 8px var(--mono,monospace);letter-spacing:.2em;text-transform:uppercase;
color:#4C453C;text-shadow:0 1px 0 rgba(255,255,255,.7);transition:opacity .3s ease;
}
#c3d-root .c3dm.expanded .c3dm-hint{opacity:0}
/* the persistent bottom sheet */
#c3d-root .c3dm-sheet{
position:absolute;left:0;right:0;bottom:0;z-index:14;
height:min(76svh,700px);
display:flex;flex-direction:column;
background:#F6F1E8;
border-radius:22px 22px 0 0;
touch-action:none;
box-shadow:0 -16px 40px -22px rgba(26,22,17,.55);
padding-bottom:env(safe-area-inset-bottom);
transform:translateY(calc(100% - 200px - env(safe-area-inset-bottom)));
transition:transform .48s cubic-bezier(.30,1.04,.36,1);
}
#c3d-root .c3dm.expanded .c3dm-sheet{transform:translateY(0)}
#c3d-root .c3dm-sheet.dragging{transition:none}
@media (prefers-reduced-motion:reduce){
#c3d-root .c3dm-sheet{transition:none}
}
#c3d-root .c3dm-grabz{flex:none;height:24px;display:flex;align-items:center;justify-content:center;touch-action:none;cursor:grab}
#c3d-root .c3dm-grabz i{width:42px;height:4.5px;border-radius:3px;background:rgba(26,22,17,.18)}
/* finish — the module's own #ctrlGroup, restyled as a joined segmented control */
#c3d-root .c3dm-fin{flex:none;padding:2px 18px 12px}
#c3d-root .c3dm-fin .glab{display:block;font-size:7px;letter-spacing:.24em;color:var(--ink-soft);margin:0 0 8px 2px;padding:0}
#c3d-root .c3dm-fin .pills{display:flex!important;flex-direction:row!important;gap:0!important;
background:#fff;border:1px solid rgba(26,22,17,.12);border-radius:14px;padding:3px}
#c3d-root .c3dm-fin .fpill{flex:1 1 0;width:auto;height:38px;border:0;border-radius:11px;
background:transparent;font-size:8.5px;box-shadow:none}
#c3d-root .c3dm-fin .fpill.on{background:var(--ink);color:#F6F1E8;border:0;box-shadow:none}
/* colours — the module's own #libCol, kept inside #c3d-root's scope */
#c3d-root .c3dm-cols{flex:1;position:relative;min-height:0}
#c3d-root .c3dm-cols #libCol{display:flex!important;opacity:1!important;position:absolute;inset:0;padding:0 0 4px;
overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch}
#c3d-root .c3dm .phead{font-size:15px;padding:2px 18px 6px;align-items:center;position:sticky;top:0;z-index:3;background:#F6F1E8}
#c3d-root .c3dm .phead span span{font-size:8px}
#c3d-root .c3dm #dockClose{display:none}
#c3d-root .c3dm .libsearch{padding:6px 18px 8px}
#c3d-root .c3dm .libsearch input{height:44px;border-radius:13px;font-size:16px;letter-spacing:.02em;background:#fff}
#c3d-root .c3dm .libsearch .si{font-size:13px;left:32px}
#c3d-root .c3dm .cat{height:30px;padding:0 14px;border-radius:999px;font-size:8.5px}
#c3d-root .c3dm #tileGrid{grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:15px 10px;grid-auto-rows:max-content;align-content:start;padding-bottom:18px;flex:none;overflow-y:visible;min-height:0}
#c3d-root .c3dm .tile .sw{width:100%;height:44px;border-radius:12px}
#c3d-root .c3dm .tile .st{opacity:1}
#c3d-root .c3dm #allBtn{height:44px;border-radius:13px;font-size:8.5px;margin:8px 18px 6px}
/* ================= v76 — RFQ / footer overlap (all 5 products) =================
Safari resolves .config{height:100%} against its auto-sized grid row
circularly: the row is measured once at content size, and when the RFQ
accordion (grid-template-rows 0fr -> 1fr) expands, the row is never
re-grown — content overflows visibly but the document height stays
frozen, so #pvFooter paints straight over the form. On a phone this
column is plain stacked content, so remove every definite, percentage
and flex-derived height from the chain and let the accordions drive
the document height like normal flow. */
#product-view .stage{height:auto!important}
#product-view .config{height:auto!important;min-height:0!important}
#product-view .rightscroll{height:auto!important;max-height:none!important;flex:none!important;overflow:visible!important}
#product-view .steps{height:auto!important;max-height:none!important;flex:none!important;overflow:visible!important}
#product-view .rfqbox{flex:none!important}
#product-view .rfqbox,#product-view .rfqbody{max-height:none!important}
#product-view .spec-acc{flex:none!important}
/* an opened box scrolled into view lands below the fixed nav */
#product-view .rfqbox,#product-view .spec-acc{scroll-margin-top:96px}
/* iOS zooms the page on focus for inputs under 16px */
#product-view .qform input,#product-view .qform select,#product-view .qform textarea{font-size:16px}
}
/* ============ v188 — INDUSTRIES HERO AT EVERY WIDTH ============
The whole industries-hero layer CSS lived inside @media(min-width:761px).
While the layers were s carrying background-image they had no
intrinsic size, so on phones they were simply invisible and nobody noticed.
v180 turned them into ![]()
for preload/decode control — and unstyled ![]()
elements DO have intrinsic size, so all four flowed down the page as a
column beside the copy. Declared here at top level, outside any media query,
so the cinematic hero behaves identically on phone and desktop.
=============================================================== */
#industries .indland-bgs{position:absolute;inset:0;overflow:hidden;
background:#0f0e0c;isolation:isolate;z-index:0;transform:translate3d(0,0,0)}
#industries .il-ly{position:absolute;inset:0;width:100%;height:100%;
object-fit:cover;object-position:center;display:block;
opacity:0;z-index:0;will-change:transform,opacity;
transform:translate3d(10px,0,0) scale(1.06);
transition:opacity .72s cubic-bezier(.33,0,.25,1)}
#industries .il-ly.on{opacity:1;z-index:2;animation:ilRun var(--il-cycle,2220ms) both}
#industries .il-ly.was{opacity:1;z-index:1;animation:ilOut var(--il-out,720ms) linear both}
@keyframes ilRun{
0% {transform:translate3d(10px,0,0) scale(1.06);
animation-timing-function:cubic-bezier(.22,1,.36,1)}
32% {transform:translate3d(0,0,0) scale(1.025);
animation-timing-function:linear}
100% {transform:translate3d(-6px,0,0) scale(1.045)}
}
@keyframes ilOut{
from {transform:translate3d(-6px,0,0) scale(1.045)}
to {transform:translate3d(-16px,0,0) scale(1.07)}
}
#industries .il-flash{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;
background:radial-gradient(120% 90% at 50% 45%,rgba(255,245,232,.9),rgba(255,240,225,0) 70%);
transition:opacity .2s ease-out}
#industries .il-flash.pulse{opacity:.075;transition:opacity .11s ease-in}
/* the scrim and the copy must sit above the photographs at every width */
#industries .sl-scrim{z-index:4}
#industries .sl-in{position:relative;z-index:5}
@media (prefers-reduced-motion:reduce){
#industries .il-ly{transform:none;transition:opacity .45s linear}
#industries .il-ly.on,#industries .il-ly.was{transform:none;animation:none}
#industries .il-flash{display:none}
}