/* index.html body styles - 19 inline blocks concatenated IN ORIGINAL ORDER.
   Linked in body at the first block position: browsers block rendering of
   content below a body stylesheet until it loads, preserving paint
   correctness for everything under it. */
#product-view{
  --ink:#18181b;--ink2:#52525b;--ink3:#9497a0;
  --orange:#E9550A;--orange2:#F26A24;
  --paper:#fff;--soft:#f4f4f5;--rule:#e4e4e7;--rule2:#f1f1f3;
  --tint:rgba(233,85,10,.06);--tintbd:rgba(233,85,10,.22);
  --grid:#e9ebef;
  --disp:"Bricolage Grotesque",Arial,"Helvetica Neue",sans-serif;--mono:"IBM Plex Mono",ui-monospace,monospace;
  --push-ease:cubic-bezier(.65,0,.15,1);--reveal-ease:cubic-bezier(.22,1,.36,1);
}
#product-view *{box-sizing:border-box}
#product-view, #product-view{margin:0}
#product-view{background:var(--paper);color:var(--ink);font-family:var(--disp);-webkit-font-smoothing:antialiased;line-height:1.5;overflow-x:hidden}
#product-view .mono{font-family:var(--mono)}


@media(prefers-reduced-motion:reduce){#product-view *{animation-duration:.001ms!important;transition-duration:.001ms!important}}
#product-view .logo{display:flex;align-items:center;gap:9px;padding:4px 8px}
#product-view .logo .mk{width:34px;height:34px;border-radius:7px;background:var(--orange);display:grid;place-items:center;color:#fff;font-weight:800;font-size:12px}
#product-view .logo .wm{font-weight:800;font-size:11px;line-height:1.05}









@media(max-width:1080px){}
#product-view .view{min-height:100vh}
#product-view /* PRODUCTS */
#products{padding:128px 5vw 60px;position:relative}
#product-view .p-eyb{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--orange)}
#product-view .p-head{display:grid;grid-template-columns:1.5fr 1fr;gap:40px;align-items:end;margin-top:14px}
#product-view .p-head h1{font-size:clamp(38px,5.6vw,76px);line-height:.98;letter-spacing:-.03em;font-weight:800;margin:0;max-width:13ch}
#product-view .p-head h1 .o{color:var(--orange)}
#product-view .p-head p{font-size:17px;color:var(--ink2);line-height:1.55;margin:0 0 6px}
#product-view .carousel{margin-top:64px;display:flex;align-items:center;gap:34px;justify-content:center}
#product-view .pcard{flex:0 0 auto;width:300px;border-radius:16px;border:1px solid var(--rule);background:#fff;overflow:hidden;box-shadow:0 1px 3px rgba(24,24,27,.06);transition:transform .5s var(--reveal-ease),opacity .5s var(--reveal-ease);position:relative}
#product-view .pcard.side{opacity:.45;transform:scale(.86)}
#product-view .pcard.center{width:360px;cursor:pointer}
#product-view .pcard .pnum{position:absolute;top:-46px;left:50%;transform:translateX(-50%);font-family:var(--mono);font-weight:700;font-size:46px;color:#d8dde3}
#product-view .pcard.center .pnum{color:var(--orange)}
#product-view .pcard .ptag{position:absolute;top:16px;left:16px;z-index:3;font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink2);background:#fff;border:1px solid var(--rule);border-radius:999px;padding:7px 13px}
#product-view .pimg{aspect-ratio:4/3;overflow:hidden;background:#f3f4f6}
#product-view .pimg img{width:100%;height:100%;object-fit:cover;display:block}
#product-view .pmeta{padding:20px 22px 22px}
#product-view .pmeta .code{font-weight:800;font-size:30px;letter-spacing:-.02em}
#product-view .pmeta .sub{font-family:var(--mono);font-size:12px;color:var(--ink3);margin-top:6px}
#product-view .pmeta .spec{font-family:var(--mono);font-size:12px;color:var(--ink2);margin-top:10px}
#product-view .pcard.center .learn{margin-top:16px;display:inline-flex;gap:8px;font-family:var(--mono);font-size:12px;font-weight:600;color:#fff;background:var(--orange);padding:11px 16px;border-radius:11px}

#product-view .arw{width:54px;height:54px;border-radius:999px;border:1px solid var(--rule);background:#fff;display:grid;place-items:center;color:var(--ink3);font-size:18px;flex:0 0 auto}
#product-view .p-foot{margin-top:54px;display:flex;flex-direction:column;align-items:center;gap:18px}
#product-view .dots{display:flex;gap:8px}
#product-view .dots i{width:26px;height:4px;border-radius:4px;background:var(--rule)}
#product-view .dots i.on{background:var(--orange);width:40px}
#product-view .hint{font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink3)}
#product-view /* ZOOM OVERLAY */

.cine 
.cine 
.cine 

/* ===== LIVING BENTO — single screen ===== */
#ppgi{height:100vh;overflow:hidden;padding:92px 3vw 20px;background:#fff}
#product-view .stage{display:grid;grid-template-columns:1.32fr .98fr;gap:16px;height:100%}
#product-view .backf{position:absolute;top:20px;left:20px;z-index:7;display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;font-weight:600;color:#fff;background:rgba(20,22,28,.5);border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:999px;padding:9px 15px;cursor:pointer}
#product-view .backf:hover{background:rgba(20,22,28,.72)}
#product-view /* hero with hotspots */
.pv-hero{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--rule);box-shadow:0 1px 2px rgba(24,24,27,.04)}
#product-view .pv-hero .grad{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,10,16,.05) 35%,rgba(8,10,16,.5) 76%,rgba(8,10,16,.74))}
#product-view .hint-explore{position:absolute;top:20px;right:22px;z-index:5;font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:#fff;opacity:.6;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:6px 11px}
#product-view /* hotspot */
.hot{position:absolute;z-index:6}
#product-view .hot .node{width:34px;height:34px;border-radius:50%;background:rgba(20,22,28,.62);border:1px solid rgba(255,255,255,.4);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:grid;place-items:center;color:#fff;font-size:15px;cursor:pointer;transition:transform .2s var(--reveal-ease),background .2s}
#product-view .hot .node::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1px solid rgba(255,255,255,.35);animation:hpulse 2.4s var(--reveal-ease) infinite}


@keyframes hpulse{0%{transform:scale(.8);opacity:.7}70%{transform:scale(1.5);opacity:0}100%{opacity:0}}
#product-view .hot .pop{position:absolute;width:210px;background:rgba(16,18,23,.9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.16);border-radius:14px;padding:13px 15px;color:#fff;opacity:0;transform:translateY(6px) scale(.96);pointer-events:none;transition:all .26s var(--reveal-ease);box-shadow:0 24px 50px -24px rgba(0,0,0,.7)}
#product-view .hot .pop .pl{font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--orange2)}
#product-view .hot .pop .pt{font-size:13px;color:#fff;line-height:1.4;margin-top:6px}
#product-view .hot:hover .node, #product-view .hot.open .node{transform:scale(1.12);background:var(--orange)}
#product-view .hot:hover .node::after, #product-view .hot.open .node::after{display:none}
#product-view .hot:hover .pop, #product-view .hot.open .pop{opacity:1;transform:none}
#product-view .hot.tl .pop{left:44px;top:-6px}
#product-view .hot.tr .pop{right:44px;top:-6px}
#product-view .hot.bl .pop{left:44px;bottom:-6px}
#product-view .hot.br .pop{right:44px;bottom:-6px}
#product-view .hot.s1{left:40%;top:12%}
#product-view .hot.s2{right:8%;top:42%}
#product-view .hot.s3{left:42%;bottom:15%}
#product-view .hot.s4{right:12%;bottom:27%}
#product-view /* config column */
.config{display:flex;flex-direction:column;gap:12px;height:100%;min-height:0}
#product-view .cfg-head{display:flex;align-items:center;justify-content:space-between;gap:14px}
#product-view .cfg-head .ct{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3)}
#product-view .cfg-head .cs{font-family:var(--mono);font-size:11px;font-weight:600;color:var(--orange)}
#product-view .pbar{height:4px;border-radius:4px;background:var(--rule);overflow:hidden}
#product-view .pbar i{display:block;height:4px;background:var(--orange);border-radius:4px;width:20%;transition:width .5s var(--reveal-ease)}
#product-view .steps{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding-right:4px}
#product-view .steps::-webkit-scrollbar{width:6px}
#product-view .steps::-webkit-scrollbar-thumb{background:var(--rule);border-radius:6px}
#product-view .step{background:#fff;border:1px solid var(--rule);border-radius:12px;box-shadow:none;transition:opacity .3s,border-color .3s}
#product-view .step .sh{display:flex;align-items:center;gap:11px;padding:15px 18px;cursor:default}
#product-view .step .sn{width:24px;height:24px;border-radius:50%;background:var(--soft);border:1px solid var(--rule);display:grid;place-items:center;font-family:var(--mono);font-size:11px;font-weight:600;color:var(--ink3);flex:0 0 auto}
#product-view .step .stt{font-weight:700;font-size:14px;letter-spacing:-.01em}
#product-view .step .ssum{font-family:var(--mono);font-size:10.5px;color:var(--ink3);margin-left:auto;text-align:right;max-width:52%;opacity:0;transition:opacity .3s}
#product-view .step .body{max-height:0;overflow:hidden;opacity:0;transition:max-height .5s var(--reveal-ease),opacity .35s}
#product-view .step .bin{padding:2px 18px 18px}
#product-view .step.locked{opacity:.5}
#product-view .step.locked .sh{cursor:not-allowed}
#product-view .step.active{border-color:var(--orange);box-shadow:0 0 0 1px var(--orange)}
#product-view .step.active .sn{background:var(--orange);border-color:var(--orange);color:#fff}
#product-view .step.active .body{max-height:460px;opacity:1}
#product-view .step.done{cursor:pointer}
#product-view .step.done .sn{background:var(--ink);border-color:var(--ink);color:#fff}
#product-view .step.done .sn::after{content:"✓"}
#product-view .step.done .sn span{display:none}
#product-view .step.done .ssum{opacity:1}
#product-view /* controls */
.lab{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3)}
#product-view .row{margin-top:13px}
#product-view .seg2{display:inline-flex;border:1px solid var(--rule);border-radius:11px;overflow:hidden;background:var(--soft);flex-wrap:wrap}
#product-view .seg2 button{font-family:var(--mono);font-size:11px;font-weight:600;border:0;background:transparent;color:var(--ink2);padding:9px 14px;cursor:pointer;border-right:1px solid var(--rule);transition:background .22s var(--reveal-ease),color .22s var(--reveal-ease),transform .12s var(--reveal-ease)}
#product-view .seg2 button:active{transform:scale(.94)}
#product-view .seg2 button:last-child{border-right:0}
#product-view .seg2 button.on{background:var(--orange);color:#fff}
#product-view .seg2{position:relative}
#product-view .seg2 .glide{position:absolute;top:0;left:0;height:100%;width:0;background:var(--orange);transition:left .38s var(--reveal-ease),width .38s var(--reveal-ease);z-index:0;pointer-events:none}
#product-view .seg2 button{position:relative;z-index:1}
#product-view .seg2.kin button.on{background:transparent;color:#fff}
#product-view .seg2.kin button.lit{color:#fff}
#product-view .seg2.or button.on{background:var(--orange)}
#product-view .iout{font-weight:800;letter-spacing:-.02em;font-size:30px;line-height:1}
#product-view .iout small{font-family:var(--mono);font-size:12px;font-weight:500;color:var(--ink3);margin-left:5px}
#product-view .irange{appearance:none;-webkit-appearance:none;width:100%;height:5px;border-radius:6px;outline:none;margin:12px 0 0;background:linear-gradient(90deg,var(--orange) 0,var(--orange) var(--p,40%),var(--rule) var(--p,40%),var(--rule) 100%)}
#product-view .irange::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px var(--orange),0 4px 10px rgba(0,0,0,.2);cursor:pointer}
#product-view .irange::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;border:0;box-shadow:0 0 0 3px var(--orange);cursor:pointer}
#product-view .ticks{display:flex;justify-content:space-between;margin-top:8px}
#product-view .ticks span{font-family:var(--mono);font-size:9px;color:var(--ink3)}
#product-view .chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px}
#product-view .opt-chip{font-family:var(--mono);font-size:11px;color:var(--ink2);background:var(--soft);border:1px solid var(--rule);border-radius:8px;padding:7px 12px;cursor:pointer;transition:all .16s var(--reveal-ease)}
#product-view .opt-chip:active{transform:scale(.94)}
#product-view .opt-chip:hover{border-color:var(--tintbd)}
#product-view .opt-chip.on{background:var(--tint);border-color:var(--tintbd);color:var(--orange);font-weight:600}
#product-view .iswatch{display:flex;gap:9px;margin-top:11px;flex-wrap:wrap;align-items:center}
#product-view .iswatch i{width:30px;height:30px;border-radius:8px;cursor:pointer;border:1px solid rgba(0,0,0,.1);transition:transform .16s}
#product-view .iswatch i:hover{transform:translateY(-2px)}
#product-view .iswatch i.on{outline:2px solid var(--orange);outline-offset:2px}
#product-view .cname{font-family:var(--mono);font-size:11px;color:var(--ink2);margin-top:10px}
#product-view .cname b{color:var(--ink)}
#product-view .two{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:6px}
#product-view .field{display:grid;gap:6px}
#product-view .field.span2{grid-column:1/3}
#product-view .field label{font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3)}
#product-view .inp{font:500 13px var(--disp);color:var(--ink);background:#fff;border:1px solid var(--rule);border-radius:10px;padding:10px 12px;outline:none;transition:border-color .2s,box-shadow .2s;width:100%}
#product-view .inp::placeholder{color:var(--ink3)}
#product-view .inp:focus{border-color:var(--tintbd);box-shadow:0 0 0 3px var(--tint)}
#product-view select.inp{appearance:none}
#product-view .next{font-family:var(--mono);font-size:12px;font-weight:600;color:#fff;background:var(--ink);border:0;border-radius:11px;padding:12px 18px;cursor:pointer;margin-top:16px;display:inline-flex;align-items:center;gap:8px}
#product-view .next:hover{background:#000}
#product-view .next.fin{background:var(--orange);width:100%;justify-content:center;padding:14px}
#product-view .next.fin:hover{background:var(--orange2)}
#product-view /* live build bar */
/* ruler-scale range cards (A3) */
.rulerbox{border:1px solid var(--rule);border-radius:12px;padding:15px 17px;background:#fff;transition:border-color .25s var(--reveal-ease),box-shadow .25s var(--reveal-ease)}
#product-view .rulerbox:hover{border-color:#cfd1d7;box-shadow:0 2px 8px rgba(24,24,27,.05)}
#product-view .bigv{font-weight:800;font-size:27px;letter-spacing:-.02em;line-height:1;margin-top:8px}
#product-view .bigv span{display:inline-block}
#product-view .bigv span.bump{animation:bump .3s var(--reveal-ease)}


@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.09)}100%{transform:scale(1)}}
#product-view .bigv small{font-family:var(--mono);font-size:12px;font-weight:500;color:var(--ink3);margin-left:6px}
#product-view .ruler{appearance:none;-webkit-appearance:none;width:100%;height:34px;margin:12px 0 2px;outline:none;background:
 repeating-linear-gradient(90deg,var(--orange) 0 1.5px,transparent 1.5px 42px) 0 50%/var(--p,50%) 20px no-repeat,
 repeating-linear-gradient(90deg,rgba(233,85,10,.45) 0 1.5px,transparent 1.5px 8px) 0 50%/var(--p,50%) 12px no-repeat,
 repeating-linear-gradient(90deg,#c4c6cc 0 1.5px,transparent 1.5px 42px) 0 50%/100% 20px no-repeat,
 repeating-linear-gradient(90deg,#dcdee3 0 1.5px,transparent 1.5px 8px) 0 50%/100% 12px no-repeat}
#product-view .ruler::-webkit-slider-thumb{-webkit-appearance:none;width:19px;height:19px;border-radius:50%;background:#fff;border:0;box-shadow:inset 0 0 0 4px var(--orange),0 1px 4px rgba(0,0,0,.18);cursor:grab;transition:transform .18s var(--reveal-ease)}
#product-view .ruler:hover::-webkit-slider-thumb{transform:scale(1.14)}
#product-view .ruler:active::-webkit-slider-thumb{transform:scale(1.24);cursor:grabbing}
#product-view .ruler::-moz-range-thumb{width:19px;height:19px;border-radius:50%;background:#fff;border:0;box-shadow:inset 0 0 0 4px var(--orange),0 1px 4px rgba(0,0,0,.18);cursor:grab;transition:transform .18s var(--reveal-ease)}
#product-view .ruler:hover::-moz-range-thumb{transform:scale(1.14)}
#product-view /* A+C RAL picker */
.ral-srch{display:flex;align-items:center;gap:9px;border:1px solid var(--rule);border-radius:10px;padding:10px 13px;background:#fff;transition:border-color .2s,box-shadow .2s}
#product-view .ral-srch:focus-within{border-color:var(--tintbd);box-shadow:0 0 0 3px var(--tint)}
#product-view .ral-srch .pre{font-family:var(--mono);font-weight:700;font-size:13px;color:var(--ink3)}
#product-view .ral-srch input{border:0;outline:none;font:600 12.5px var(--mono);width:100%;color:var(--ink);background:transparent}
#product-view .ral-srch .clr{font-family:var(--mono);font-size:10.5px;color:var(--ink3);cursor:pointer;display:none;white-space:nowrap}
#product-view .ral-srch.has .clr{display:block}
#product-view .ral-tabs{display:flex;gap:6px;flex-wrap:wrap}
#product-view .ral-tabs button{font-family:var(--mono);font-size:10px;font-weight:600;color:var(--ink2);background:var(--soft);border:1px solid var(--rule);border-radius:7px;padding:6px 10px;cursor:pointer;transition:all .15s var(--reveal-ease)}
#product-view .ral-tabs button:active{transform:scale(.94)}
#product-view .ral-tabs button.on{background:var(--orange);border-color:var(--orange);color:#fff}
#product-view .ral-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(62px,1fr));gap:8px;max-height:242px;overflow-y:auto;padding:8px 6px 10px 6px;scroll-behavior:smooth}
#product-view .ral-grid::-webkit-scrollbar{width:6px}
#product-view .ral-grid::-webkit-scrollbar-thumb{background:var(--rule);border-radius:6px}
#product-view .rsw{border:1px solid var(--rule);border-radius:8px;overflow:hidden;cursor:pointer;background:#fff;position:relative;transition:transform .28s cubic-bezier(.34,1.56,.64,1),box-shadow .25s var(--reveal-ease),border-color .2s}
#product-view .rsw:hover{transform:translateY(-4px) scale(1.16);z-index:6;box-shadow:0 16px 28px -10px rgba(24,24,27,.38);border-color:var(--tintbd)}
#product-view .rsw::after{content:attr(data-nm);position:absolute;left:0;right:0;bottom:0;background:var(--ink);color:#fff;font:600 8px var(--mono);padding:3px 2px;line-height:1.25;text-align:center;opacity:0;transform:translateY(5px);transition:.22s var(--reveal-ease);pointer-events:none}
#product-view .rsw:hover::after{opacity:1;transform:none}
#product-view .rsw.on{box-shadow:0 0 0 2px var(--orange)}
#product-view .rsw .c{height:34px}
#product-view .rsw .t{font-family:var(--mono);font-size:8.5px;font-weight:600;text-align:center;padding:3px 1px;color:var(--ink2)}
#product-view .ral-empty{font-family:var(--mono);font-size:11px;color:var(--ink3);padding:22px 0;text-align:center}
#product-view .ral-sel{display:flex;align-items:center;gap:11px;border-top:1px solid var(--rule);padding-top:14px}
#product-view .ral-sel .dot{width:26px;height:26px;border-radius:8px;border:1px solid rgba(0,0,0,.12);flex:0 0 auto;transition:background .3s var(--reveal-ease)}
#product-view .ral-sel .code{font-family:var(--mono);font-weight:700;font-size:13px;white-space:nowrap}
#product-view .ral-sel .nm{font-family:var(--mono);font-size:11px;color:var(--ink2)}
#product-view .ral-sel .next{margin-top:0;margin-left:auto;padding:10px 15px;white-space:nowrap;background:var(--orange)}
#product-view .ral-sel .next:hover{background:var(--orange2)}
#product-view /* form validation + success */
.inp.err{border-color:#d0342c;box-shadow:0 0 0 3px rgba(208,52,44,.12);animation:shake .35s var(--reveal-ease)}


@keyframes shake{0%,100%{transform:none}25%{transform:translateX(-5px)}55%{transform:translateX(5px)}80%{transform:translateX(-3px)}}
#product-view .rfqdone{display:none;flex-direction:column;align-items:center;text-align:center;padding:34px 10px 20px;gap:6px}
#product-view .qform.sent>*:not(.rfqdone){display:none}
#product-view .qform.sent .rfqdone{display:flex;animation:qIn .6s var(--reveal-ease)}
#product-view .ck{width:72px;height:72px;margin-bottom:8px}
#product-view .ck .c1{fill:none;stroke:var(--orange);stroke-width:4;stroke-linecap:round;stroke-dasharray:195;stroke-dashoffset:195;animation:draw .7s var(--reveal-ease) .1s forwards}
#product-view .ck .c2{fill:none;stroke:var(--orange);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:44;stroke-dashoffset:44;animation:draw .45s var(--reveal-ease) .75s forwards}


@keyframes draw{to{stroke-dashoffset:0}}
#product-view .rfqdone .dt{font-weight:800;font-size:24px;letter-spacing:-.02em;margin-top:4px}
#product-view .rfqdone .ds{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--ink2);background:var(--soft);border:1px solid var(--rule);border-radius:8px;padding:8px 14px;margin-top:6px}
#product-view .rfqdone .dn{font-family:var(--mono);font-size:11.5px;color:var(--ink3);margin-top:6px;max-width:44ch;line-height:1.6}
#product-view /* spec icons */
.spec .sh{display:flex;align-items:center;gap:11px}
#product-view .si{width:20px;height:20px;background:transparent;border:0;display:grid;place-items:center;color:var(--ink2);flex:0 0 auto}
#product-view .si svg{width:18px;height:18px}
#product-view .spec .sh .sl{margin:0}
#product-view /* rfq plus button */
.plusbtn{width:32px;height:32px;border-radius:8px;background:var(--orange);color:#fff;display:grid;place-items:center;font-size:20px;font-weight:400;line-height:1;transition:transform .3s var(--reveal-ease);flex:0 0 auto}
#product-view .rfqbox:not(.collapsed) .plusbtn{transform:rotate(45deg)}
#product-view .rfqbox.collapsed .stepc>span:not(.plusbtn){display:none}
#product-view /* ===== two right boxes ===== */
.rightscroll{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:14px;padding-right:4px;scroll-behavior:smooth}
#product-view .rightscroll::-webkit-scrollbar{width:6px}
#product-view .rightscroll::-webkit-scrollbar-thumb{background:var(--rule);border-radius:6px}
#product-view .box{background:#fff;border:1px solid var(--rule);border-radius:14px;box-shadow:0 1px 2px rgba(24,24,27,.04)}
#product-view .hx{width:28px;height:28px;border-radius:7px;background:var(--soft);border:1px solid var(--rule);display:grid;place-items:center;color:var(--ink2);font-weight:800;font-size:13px;flex:0 0 auto}
#product-view .hx svg{width:15px;height:15px}
#product-view /* summary box */
.sumbox{padding:22px 24px}
#product-view .sumhead{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
#product-view .sumhead .ttl{display:flex;gap:11px;align-items:center}
#product-view .sumhead h3{font-size:17px;font-weight:800;letter-spacing:-.01em;margin:0}
#product-view .sumhead .hsub{font-family:var(--mono);font-size:10px;color:var(--ink3);margin-top:3px}
#product-view .callbox{text-align:right}
#product-view .callbox .cl{font-family:var(--mono);font-size:9px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink3);line-height:1.5}
#product-view .callbox .cn{font-family:var(--disp);font-weight:700;font-size:15px;color:var(--orange);margin-top:5px;white-space:nowrap;display:flex;align-items:center;gap:6px;justify-content:flex-end}
#product-view .specgrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px 20px;margin-top:20px}
#product-view .spec .sl{font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3)}
#product-view .spec .sv{font-weight:700;font-size:15px;letter-spacing:-.01em;margin-top:6px}
#product-view .spec .sv small{font-family:var(--mono);font-weight:400;font-size:11px;color:var(--ink3);margin-left:3px;display:block;margin-top:2px}
#product-view .spec .forms{display:grid;gap:5px;margin-top:8px}
#product-view .spec .forms div{font-family:var(--mono);font-size:11px;color:var(--ink2);display:flex;align-items:center;gap:7px}
#product-view .spec .forms div::before{content:"◇";color:var(--orange);font-size:9px}
#product-view .spec .sw{display:flex;gap:6px;margin-top:8px;align-items:center;flex-wrap:wrap}
#product-view .spec .sw i{width:20px;height:20px;border-radius:5px;border:1px solid rgba(0,0,0,.12)}
#product-view .spec .sw .cu{font-family:var(--mono);font-size:10px;color:var(--ink3)}
#product-view .sumdiv{height:1px;background:var(--rule);margin:20px 0 16px}
#product-view .badges{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
#product-view .badge{display:flex;gap:9px;align-items:flex-start}
#product-view .badge .bi{width:26px;height:26px;border-radius:7px;background:var(--soft);border:1px solid var(--rule);display:grid;place-items:center;color:var(--orange);font-size:11px;flex:0 0 auto}
#product-view .badge .bt{font-size:11px;font-weight:700;line-height:1.2}
#product-view .badge .bd{font-family:var(--mono);font-size:9px;color:var(--ink3);margin-top:3px}
#product-view /* rfq box */
.rfqbox{padding:20px 22px;flex:1;display:flex;flex-direction:column;min-height:0}
#product-view .rfqbox:not(.collapsed){flex:0 0 auto}
#product-view .rfqbox.collapsed{justify-content:center;min-height:max-content}
#product-view .rfqtop{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;cursor:pointer;user-select:none}
/* ===== v158 — RFQ card, V's design, all five products =====================
   Big circular glyph, orange rule, two-line title (name in orange), rule,
   sub-copy, and a large orange arrow tile. Same #rfqTop click target, so the
   existing collapse toggle and the phone scroll-into-view handler still work. */
.rfqtop.rfq2{display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:clamp(16px,2vw,26px);justify-content:initial;padding:clamp(6px,1vw,14px) 2px}
.rfqtop.rfq2 .rq-ic{width:clamp(64px,5.4vw,86px);height:clamp(64px,5.4vw,86px);border-radius:50%;
  background:#f1f2f4;color:var(--orange);display:grid;place-items:center;flex:0 0 auto}
.rfqtop.rfq2 .rq-ic svg{width:46%;height:46%}
.rfqtop.rfq2 .rq-body{border-left:2px solid var(--orange);padding-left:clamp(16px,1.8vw,24px);min-width:0}
.rfqtop.rfq2 h3{font-size:clamp(21px,2.1vw,28px);font-weight:800;letter-spacing:-.02em;line-height:1.16;margin:0;color:var(--ink)}
.rfqtop.rfq2 h3 em{font-style:normal;color:var(--orange);display:block}
.rfqtop.rfq2 h3::after{content:"";display:block;width:26px;height:3px;border-radius:2px;
  background:var(--orange);margin:clamp(10px,1.2vw,16px) 0 0}
.rfqtop.rfq2 .hsub{margin-top:clamp(10px,1.2vw,15px);font-size:13px;color:var(--ink2);max-width:44ch}
.rfqtop.rfq2 .rq-go{width:clamp(56px,4.6vw,72px);height:clamp(56px,4.6vw,72px);border-radius:14px;
  background:var(--orange);color:#fff;display:grid;place-items:center;flex:0 0 auto;
  transition:transform .35s var(--reveal-ease),background .25s}
.rfqtop.rfq2 .rq-go svg{width:42%;height:42%}
.rfqbox:not(.collapsed) .rfqtop.rfq2 .rq-go{transform:rotate(90deg)}
.rfqtop.rfq2:hover .rq-go{background:var(--scale2,#c8480a)}
/* #product-view .rfqtop .stepc carries an ID selector, so match its weight */
#product-view .rfqtop.rfq2 .stepc{display:none}
#product-view .rfqbox:not(.collapsed) .rfqtop.rfq2 .stepc{display:block;grid-column:1/-1;justify-self:end;
  font-family:var(--mono);font-size:11px;font-weight:600;color:var(--orange);margin-top:4px}
@media (max-width:760px){
  .rfqtop.rfq2{gap:14px;padding:2px}
  .rfqtop.rfq2 .rq-ic{width:52px;height:52px}
  .rfqtop.rfq2 h3{font-size:19px}
  .rfqtop.rfq2 .hsub{font-size:12px}
  .rfqtop.rfq2 .rq-go{width:48px;height:48px;border-radius:12px}
}
#product-view .rfqtop .ttl{display:flex;gap:11px;align-items:center}
#product-view .rfqtop h3{font-size:21px;font-weight:800;letter-spacing:-.015em;margin:0}
#product-view .rfqtop .hsub{font-family:var(--mono);font-size:12.5px;color:var(--ink2);margin-top:5px;max-width:40ch;line-height:1.55}
#product-view .rfqtop .stepc{font-family:var(--mono);font-size:11px;font-weight:600;color:var(--orange);white-space:nowrap;display:flex;align-items:center;gap:9px}
#product-view .rfqbody{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .6s var(--reveal-ease),opacity .4s var(--reveal-ease)}
#product-view .rfqbox:not(.collapsed) .rfqbody{grid-template-rows:1fr;opacity:1}
#product-view .rfqbody>.qform{overflow:hidden;min-height:0}
#product-view .rfqbox:not(.collapsed) .qform>*{animation:qIn .55s var(--reveal-ease) backwards}
#product-view .rfqbox:not(.collapsed) .qform>*:nth-child(1){animation-delay:.06s}
#product-view .rfqbox:not(.collapsed) .qform>*:nth-child(2){animation-delay:.1s}
#product-view .rfqbox:not(.collapsed) .qform>*:nth-child(3){animation-delay:.14s}
#product-view .rfqbox:not(.collapsed) .qform>*:nth-child(4){animation-delay:.18s}
#product-view .rfqbox:not(.collapsed) .qform>*:nth-child(5){animation-delay:.22s}
#product-view .rfqbox:not(.collapsed) .qform>*:nth-child(6){animation-delay:.26s}
#product-view .rfqbox:not(.collapsed) .qform>*:nth-child(7){animation-delay:.3s}
#product-view .rfqbox:not(.collapsed) .qform>*:nth-child(8){animation-delay:.34s}
#product-view .rfqbox:not(.collapsed) .qform>*:nth-child(9){animation-delay:.38s}
#product-view .rfqbox:not(.collapsed) .qform>*:nth-child(10){animation-delay:.42s}


@keyframes qIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
#product-view .rfqbody .steps{flex:none;overflow:visible;padding-right:0;max-height:none}
#product-view .qform{display:flex;flex-direction:column;gap:16px;padding-top:16px}
#product-view .qrow2{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
#product-view .qdiv{height:1px;background:var(--rule);margin-top:2px}
#product-view span.cname{display:inline-flex;align-items:center}


@media(max-width:980px){#product-view .qrow2{grid-template-columns:1fr}}
#product-view .rfq-foot{margin-top:12px;background:var(--tint);border:1px solid var(--tintbd);border-radius:12px;padding:13px 16px;text-align:center;font-family:var(--mono);font-size:11px;font-weight:600;color:var(--orange);cursor:pointer;letter-spacing:.02em}
#product-view .rangehead{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);margin-bottom:16px}
#product-view .specgrid5{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px}
#product-view .specgrid5 .span2{grid-column:1/3}
#product-view .rv{opacity:0}



@media(max-width:980px){#product-view #ppgi{height:auto;overflow:visible;padding:96px 4vw 40px}
#product-view .stage{grid-template-columns:1fr;height:auto}
#product-view .pv-hero{min-height:360px}
#product-view .steps{overflow:visible}
#product-view .backf{position:static;margin-bottom:14px}
#product-view .rightscroll{overflow:visible}
#product-view .specgrid{grid-template-columns:1fr 1fr}
#product-view .badges{grid-template-columns:1fr 1fr}


}
/* ===== PRODUCT VIEW — layout stability & site-consistency overrides ===== */
#product-view #ppgi{padding-top:118px}
#product-view{background:#fff}
#product-view .stage{height:calc(100vh - 140px)}
/* Left viewer: rock-solid, independent of right-column height (Issue 1) */
#product-view .pv-hero{height:100%;align-self:stretch;position:relative}
/* Right column owns its own scroll; expanding tabs never touches the grid row (Issue 6) */
#product-view .rightscroll{height:100%;min-height:0;overflow-y:auto;overscroll-behavior:contain}
/* Consistency: reconcile bento tokens to the site's (Issue 3) */
#product-view{--ink:#15181d;--rule:#eceff3;--soft:#f4f6f9}

@media(max-width:900px){#product-view #ppgi{height:auto;overflow:visible;padding-top:104px}
#product-view .stage{height:auto}
#product-view .pv-hero{height:auto;min-height:340px}
#product-view .rightscroll{height:auto;overflow:visible}

}
#product-view #ppgi{display:block}
#product-view #ppgi{padding-top:118px}
#product-view{background:#fff}

@media(max-width:900px){#product-view #ppgi{padding-top:106px}}
#product-view .right-cap .lang-menu.open{display:block}
.pr-cine{position:fixed;inset:0;z-index:90;overflow:hidden;pointer-events:none}
.pr-scrim{position:absolute;inset:0;background:rgba(8,8,10,.28);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0}
.pr-clone{position:fixed;overflow:hidden;border-radius:16px;will-change:transform;transform-origin:center center;box-shadow:0 50px 90px -40px rgba(0,0,0,.6)}
.pr-clone img{width:100%;height:100%;object-fit:cover;display:block}
.pr-clone svg{width:100%;height:100%;display:block}



#c3d-root{ position:relative; width:100%; height:100%; overflow:hidden; }
#c3d-root #prodtabs{ display:none; }
#c3d-root canvas{ display:block; }
#c3d-root{
    --ink:#1A1611; --ink-soft:#5C5348; --ink-mute:#8A8177;
    --accent:#E9550A; --hairline:rgba(26,22,17,.1);
    --glass:rgba(253,250,245,.86);
    --bg1:#F9F5EE; --bg2:#F1EADD; --bg3:#E4DBCA;
  }
#c3d-root *{ margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
#c3d-root{ height:100%; overflow:hidden; }
#c3d-root{
    background:
      linear-gradient(to top, rgba(26,22,17,.075), rgba(26,22,17,.02) 18%, transparent 30%),
      radial-gradient(120% 95% at 50% 30%, var(--bg1) 0%, var(--bg2) 55%, var(--bg3) 100%);
    transition:background 1.1s ease;
    font-family:'IBM Plex Mono', ui-monospace, monospace; color:var(--ink);
    user-select:none; -webkit-user-select:none;
  }
#c3d-root #stage{ position:absolute; inset:0; touch-action:none; cursor:grab; }
#c3d-root #stage.dragging{ cursor:grabbing; }
#c3d-root #glow{
    position:absolute; left:50%; top:50%; width:120vmin; height:86vmin;
    transform:translate(-46%,-52%); pointer-events:none; z-index:0;
    background:radial-gradient(48% 44% at 50% 46%, rgba(255,255,255,.5), rgba(255,255,255,0) 72%);
    mix-blend-mode:soft-light;
  }
#c3d-root #hints{
    position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
    z-index:6; pointer-events:none; display:flex; gap:24px; align-items:center;
    padding:10px 18px; border-radius:16px;
    background:var(--glass); backdrop-filter:blur(14px) saturate(1.1);
    -webkit-backdrop-filter:blur(14px) saturate(1.1);
    border:1px solid rgba(26,22,17,.08);
    box-shadow:0 8px 28px rgba(26,22,17,.08);
    white-space:nowrap;
  }
#c3d-root #hints span{
    display:flex; align-items:center; gap:7px;
    font-size:8px; letter-spacing:.22em; color:var(--ink-mute);
  }
#c3d-root #hints b{ font-weight:500; color:var(--ink-soft); }
#c3d-root #hints i{ width:1px; height:12px; background:rgba(26,22,17,.14); }
#c3d-root #hints svg{ width:12px; height:12px; color:var(--ink-mute); flex:none; }
@media (max-width:900px){
#c3d-root #hints{ gap:12px; padding:8px 12px; }
#c3d-root #hints span{ font-size:7px; letter-spacing:.16em; }
}
#c3d-root .vignette{
    position:absolute; inset:0; pointer-events:none; z-index:1;
    background:radial-gradient(120% 120% at 50% 45%, transparent 58%, rgba(38,30,20,.08) 100%);
  }
#c3d-root /* ================= product tabs (preview only) ================= */
  #prodtabs{
    position:absolute; top:20px; left:50%; transform:translateX(-50%); z-index:13;
    display:flex; gap:5px; padding:6px;
    background:var(--glass); backdrop-filter:blur(20px) saturate(1.12);
    -webkit-backdrop-filter:blur(20px) saturate(1.12);
    border:1px solid rgba(26,22,17,.08); border-radius:20px;
    box-shadow:0 12px 40px rgba(26,22,17,.1);
  }
#c3d-root .ptab{
    height:30px; padding:0 15px; border-radius:15px; cursor:pointer; appearance:none;
    border:none; background:transparent;
    font-family:inherit; font-size:9px; letter-spacing:.16em; color:var(--ink-mute);
    transition:all .3s cubic-bezier(.34,1.56,.64,1);
  }
#c3d-root .ptab:hover{ color:var(--ink); }
#c3d-root .ptab.on{
    background:var(--ink); color:#F6F1E8;
    box-shadow:0 5px 14px rgba(26,22,17,.28), 0 0 0 2.5px rgba(233,85,10,.14);
  }
#c3d-root /* ================= right control column ================= */
  #ctrl{
    position:absolute; right:18px; top:50%; transform:translateY(-50%); z-index:12;
    width:186px; display:flex; flex-direction:column; gap:12px;
    background:var(--glass); backdrop-filter:blur(22px) saturate(1.12);
    -webkit-backdrop-filter:blur(22px) saturate(1.12);
    border:1px solid rgba(26,22,17,.08); border-radius:20px;
    padding:18px 16px 14px; box-shadow:0 12px 44px rgba(26,22,17,.1);
  }
#c3d-root .rid{ display:flex; align-items:center; gap:11px; }
#c3d-root .rid .rdot0{ width:30px; height:30px; flex:none; }
#c3d-root .ridt{ display:flex; flex-direction:column; gap:2px; min-width:0; }
#c3d-root #rCode{ font-family:'Bricolage Grotesque', system-ui, sans-serif;
          font-size:15px; font-weight:640; letter-spacing:0; color:var(--ink); line-height:1; }
#c3d-root #rName{ font-size:6.5px; letter-spacing:.22em; color:var(--ink-mute); white-space:nowrap;
          overflow:hidden; text-overflow:ellipsis; }
#c3d-root .pid{ display:flex; flex-direction:column; gap:3px; }
#c3d-root .pid b{ font-family:'Bricolage Grotesque', system-ui, sans-serif;
          font-size:17px; font-weight:640; letter-spacing:-.01em; color:var(--ink); line-height:1; }
#c3d-root .pid span{ font-size:6.5px; letter-spacing:.2em; color:var(--ink-mute); line-height:1.6; }
#c3d-root .specrow{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
#c3d-root .specrow label{ font-size:6.5px; letter-spacing:.2em; color:var(--ink-mute); }
#c3d-root .specrow em{ font-style:normal; font-size:8.5px; letter-spacing:.06em; color:var(--ink-soft); }
#c3d-root .cnote{ font-size:6px; letter-spacing:.18em; color:var(--ink-mute); line-height:1.9; }
#c3d-root .cmass{ display:flex; gap:4px; }
#c3d-root .cmass button{
    flex:1; height:24px; border-radius:12px; cursor:pointer; appearance:none;
    border:1px solid rgba(26,22,17,.14); background:rgba(255,255,255,.45);
    font-family:inherit; font-size:7px; letter-spacing:.08em; color:var(--ink-soft);
    transition:all .25s cubic-bezier(.34,1.56,.64,1);
  }
#c3d-root .cmass button:hover{ color:var(--ink); transform:translateY(-1px); }
#c3d-root .cmass button.on{ background:var(--ink); color:#F6F1E8; border-color:var(--ink); }
#c3d-root .cdiv{ height:1px; background:rgba(26,22,17,.1); margin:2px 0; }
#c3d-root .glab{ font-size:6.5px; letter-spacing:.26em; color:var(--ink-mute); padding-left:2px; }
#c3d-root .pills{ display:flex; flex-direction:column; gap:6px; }
#c3d-root .fpill{
    height:30px; width:100%; border-radius:15px; cursor:pointer; appearance:none;
    border:1px solid rgba(26,22,17,.14); background:rgba(255,255,255,.45);
    font-family:inherit; font-size:8px; letter-spacing:.18em; color:var(--ink-soft);
    transition:all .3s cubic-bezier(.34,1.56,.64,1);
  }
#c3d-root .fpill:hover{ transform:translateY(-1px); border-color:var(--ink-mute); color:var(--ink); }
#c3d-root .fpill.on{
    background:var(--ink); color:#F6F1E8; border-color:var(--ink);
    box-shadow:0 5px 14px rgba(26,22,17,.3), 0 0 0 2.5px rgba(233,85,10,.16);
  }
#c3d-root .utils{ display:flex; justify-content:center; gap:6px; padding-top:2px; }
#c3d-root .ubtn{
    width:32px; height:32px; border-radius:50%; cursor:pointer; appearance:none;
    border:none; background:transparent; color:var(--ink-soft);
    display:flex; align-items:center; justify-content:center;
    transition:all .25s cubic-bezier(.34,1.56,.64,1);
  }
#c3d-root .ubtn:hover{ background:rgba(26,22,17,.06); transform:scale(1.1); color:var(--ink); }
#c3d-root .ubtn svg{ width:15px; height:15px; }
#c3d-root /* ================= colour panel ================= */
  #dock{
    --blur:18px;
    position:absolute; left:18px; top:50%; transform:translateY(-50%);
    width:60px; z-index:11; overflow:hidden;
    background:var(--glass);
    backdrop-filter:blur(var(--blur)) saturate(1.12);
    -webkit-backdrop-filter:blur(var(--blur)) saturate(1.12);
    border:1px solid rgba(26,22,17,.08); border-radius:30px;
    box-shadow:0 12px 44px rgba(26,22,17,.1);
    transition:box-shadow .35s ease;
  }
#c3d-root #dock:hover{ box-shadow:0 16px 52px rgba(26,22,17,.16), 0 0 0 4px rgba(233,85,10,.05); }
#c3d-root #dockCol{
    display:flex; flex-direction:column; align-items:center;
    gap:10px; padding:15px 0;
  }
#c3d-root .cswatch{
    width:34px; height:34px; cursor:pointer; appearance:none; padding:0; border:none;
    outline:2px solid var(--accent); outline-offset:3px; border-radius:9px;
    transition:transform .25s cubic-bezier(.34,1.56,.64,1);
  }
#c3d-root .cswatch:hover{ transform:scale(1.07); }
#c3d-root .browse{
    width:30px; height:30px; border-radius:50%;
    appearance:none; background:transparent; cursor:pointer;
    border:1px solid rgba(26,22,17,.14); color:var(--ink-mute);
    display:flex; align-items:center; justify-content:center;
    transition:all .28s cubic-bezier(.34,1.56,.64,1);
  }
#c3d-root .browse svg{ width:13px; height:13px; }
#c3d-root .browse:hover{ color:var(--ink); border-color:var(--ink-mute); transform:scale(1.1); }
#c3d-root #libCol{
    position:absolute; inset:0; display:none; opacity:0;
    flex-direction:column; padding:18px 0 12px;
  }
#c3d-root .phead{
    font-family:'Bricolage Grotesque', system-ui, sans-serif;
    font-size:17px; font-weight:600; letter-spacing:-.01em;
    padding:0 18px 3px; display:flex; align-items:baseline; gap:8px;
  }
#c3d-root .phead{ justify-content:space-between; }
#c3d-root .phead span span{ font-family:'IBM Plex Mono',monospace; font-size:7.5px; letter-spacing:.2em; color:var(--ink-mute); }
#c3d-root .backbtn{
    width:28px; height:28px; border-radius:50%; cursor:pointer; appearance:none;
    border:1px solid var(--hairline); background:transparent;
    font-size:12px; color:var(--ink-soft); font-family:inherit;
    transition:transform .25s cubic-bezier(.34,1.56,.64,1), border-color .2s ease;
  }
#c3d-root .backbtn:hover{ transform:scale(1.1); border-color:var(--ink); color:var(--ink); }
#c3d-root .libsearch{ padding:10px 18px 8px; position:relative; }
#c3d-root .libsearch input{
    width:100%; height:34px; border-radius:10px;
    border:1px solid var(--hairline); background:rgba(255,255,255,.6);
    font-family:inherit; font-size:10px; letter-spacing:.06em; color:var(--ink);
    padding:0 12px 0 30px;
    transition:border-color .25s ease, box-shadow .3s ease, background .25s ease;
  }
#c3d-root .libsearch input::placeholder{ color:var(--ink-mute); }
#c3d-root .libsearch input:focus{
    outline:none; border-color:rgba(233,85,10,.5); background:rgba(255,255,255,.85);
    box-shadow:0 0 0 4px rgba(233,85,10,.09);
  }
#c3d-root .libsearch .si{ position:absolute; left:29px; top:50%; transform:translate(0,-58%);
                  color:var(--ink-mute); font-size:12px; pointer-events:none; }
#c3d-root #libLeft{ padding:0 18px; }
#c3d-root .slabel{ display:flex; justify-content:space-between; align-items:baseline;
           font-size:7px; letter-spacing:.22em; color:var(--ink-mute); margin:8px 0 7px; }
#c3d-root .slabel button{ appearance:none; background:none; border:none; cursor:pointer;
                  font-family:inherit; font-size:7px; letter-spacing:.14em; color:var(--ink-mute); }
#c3d-root .slabel button:hover{ color:var(--accent); }
#c3d-root .chiprow{ display:flex; gap:8px; flex-wrap:wrap; }
#c3d-root /* elegant material swatch — paint finish only */
  .msw{
    position:relative; border-radius:9px;
    background:
      linear-gradient(148deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,.06) 34%, rgba(255,255,255,0) 52%, rgba(0,0,0,.07) 100%),
      var(--c, #999);
    box-shadow:inset 0 0 0 1px rgba(26,22,17,.12), inset 0 1px 1.5px rgba(255,255,255,.22),
               0 1.5px 5px rgba(26,22,17,.16);
  }
#c3d-root .chip{ width:26px; height:26px; cursor:pointer;
         transition:transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease; }
#c3d-root .chip:hover{ transform:translateY(-2px) scale(1.08); z-index:2; }
#c3d-root .chip.sel{ outline:2px solid var(--accent); outline-offset:2.5px; }
#c3d-root .chip .st{
    position:absolute; top:-5px; right:-5px; width:15px; height:15px; border-radius:50%;
    background:rgba(253,250,245,.95); border:1px solid var(--hairline); z-index:3;
    font-size:8px; line-height:13px; text-align:center; color:var(--ink-mute);
    opacity:0; transition:opacity .15s ease; cursor:pointer; appearance:none; padding:0;
  }
#c3d-root .chip:hover .st, #c3d-root .chip .st.on{ opacity:1; }
#c3d-root .chip .st.on{ color:var(--accent); }
#c3d-root .catchips{ display:flex; flex-wrap:wrap; gap:5px; padding:8px 18px 4px; }
#c3d-root .cat{
    height:24px; padding:0 10px; border-radius:12px; cursor:pointer; appearance:none;
    border:1px solid rgba(26,22,17,.13); background:rgba(255,255,255,.4);
    font-family:inherit; font-size:7px; letter-spacing:.14em; color:var(--ink-soft);
    transition:all .25s cubic-bezier(.34,1.56,.64,1);
  }
#c3d-root .cat:hover{ transform:translateY(-1px); color:var(--ink); }
#c3d-root .cat.on{ background:var(--ink); color:#F6F1E8; border-color:var(--ink); }
#c3d-root .rhead{ padding:10px 20px 8px; font-size:7px; letter-spacing:.22em; color:var(--ink-mute); }
#c3d-root #tileGrid{
    flex:1; overflow-y:auto; scrollbar-width:thin; overscroll-behavior:contain;
    display:grid; grid-template-columns:repeat(4, 1fr);
    gap:13px 8px; align-content:start; padding:4px 18px 10px;
  }
#c3d-root .tile{ display:flex; flex-direction:column; align-items:center; gap:5px; cursor:pointer; }
#c3d-root .tile .sw{ width:44px; height:38px;
             transition:transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease; }
#c3d-root .tile:hover .sw{ transform:translateY(-2px) scale(1.05); }
#c3d-root .tile:focus-visible{ outline:2px solid var(--ink-soft); outline-offset:2px; border-radius:10px; }
#c3d-root .tile.sel .sw{ outline:2px solid var(--accent); outline-offset:2.5px; }
#c3d-root .tile .ck{
    position:absolute; inset:0; display:none; align-items:center; justify-content:center;
    color:#fff; font-size:12px; text-shadow:0 1px 4px rgba(0,0,0,.6); z-index:2;
  }
#c3d-root .tile.sel .ck{ display:flex; }
#c3d-root .tile .st{
    position:absolute; top:-4px; right:-4px; width:15px; height:15px; border-radius:50%;
    background:rgba(253,250,245,.95); border:1px solid var(--hairline); z-index:3;
    font-size:8px; line-height:13px; text-align:center; color:var(--ink-mute);
    opacity:0; transition:opacity .15s ease; cursor:pointer; appearance:none; padding:0;
  }
#c3d-root .tile:hover .st, #c3d-root .tile .st.on{ opacity:1; }
#c3d-root .tile .st.on{ color:var(--accent); }
#c3d-root .tile .lb{ font-size:6.5px; letter-spacing:.1em; color:var(--ink-soft); }
#c3d-root .empty{ font-size:8px; letter-spacing:.14em; color:var(--ink-mute); padding:14px 2px; line-height:1.9; grid-column:1/-1; }
#c3d-root #allBtn{
    margin:8px 18px 4px; height:34px; border-radius:10px; cursor:pointer;
    appearance:none; border:1px solid var(--hairline); background:rgba(255,255,255,.5);
    font-family:inherit; font-size:7.5px; letter-spacing:.2em; color:var(--ink-soft);
    transition:all .25s ease;
  }
#c3d-root #allBtn:hover{ background:var(--ink); color:#F6F1E8; border-color:var(--ink); }
@media (max-width:1120px){
#c3d-root #panel{ width:250px; }
#c3d-root #tileGrid{ grid-template-columns:repeat(3,1fr); }
#c3d-root .grp .glab{ display:none; }
}

/* ===== 3D sub-view chrome ===== */
#product-view .view3f{left:auto;right:20px}
#product-view #ppgi3d{display:block;position:relative;min-height:100vh;background:#F9F5EE}
#product-view #ppgi3d .pv3d-back{position:absolute;top:118px;left:24px;z-index:60}
#product-view #ppgi3d, #product-view #ppgi{transition:none}


/* ===== 3D-in-hero embed mode ===== */
#product-view .pv-hero{background:linear-gradient(160deg,#F9F5EE,#EFE7D9)}
#c3dHeroSlot{position:absolute;inset:0;z-index:1}
#c3dHeroSlot #c3d-root{position:absolute;inset:0;width:100%;height:100%;min-height:0}
#product-view .pv-hero .backf{z-index:9}
#c3d-root.c3d-embed #stage{pointer-events:none}
#c3d-root.c3d-embed #hints{display:none}
#c3d-root.c3d-embed .utils{display:none}
#c3dFullSlot{position:relative;min-height:100vh}
#c3dFullSlot #c3d-root{height:100vh}

/* hints bar: centre via auto-margins so a GSAP inline transform can't offset it */
#c3d-root #hints{left:0;right:0;margin-left:auto;margin-right:auto;width:max-content;max-width:calc(100% - 32px);transform:none}

/* ===== refinement pass ===== */
#product-view #ppgi[hidden]{display:none!important}
#product-view #ppgi3d[hidden]{display:none!important}

/* width ruler: five discrete stops */
#product-view .ticks.wticks{display:flex;justify-content:space-between;width:100%}
#product-view .ticks.wticks span{transition:color .2s ease,font-weight .2s ease}
#product-view .ticks.wticks span.on{color:var(--orange);font-weight:700}


/* ===== substrate property tables (concept C) ===== */
#product-view #ppgi{height:auto;min-height:100vh;overflow:visible;padding-bottom:70px}
#product-view .pv-specs{max-width:1520px;margin:34px auto 0}
#product-view .spt-head{margin:6px 4px 20px}
#product-view .spt-eyebrow{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.22em;color:var(--ink3)}
#product-view .spt-head h2{font-size:clamp(22px,2.4vw,30px);font-weight:800;letter-spacing:-.02em;margin-top:8px}
#product-view .spt-sub{font-family:var(--mono);font-size:12px;color:var(--ink2);margin-top:6px}
#product-view .spec-acc{flex:0 0 auto;background:#fff;border:1px solid var(--rule);border-radius:16px;box-shadow:0 1px 2px rgba(24,24,27,.05);margin-bottom:14px}
#product-view .spec-acc .spt-inner{padding:6px 2px 4px;min-height:0;overflow:hidden}
#product-view .spt-wrap{overflow-x:auto}
#product-view .spt{width:100%;border-collapse:collapse;font-size:14px;min-width:640px}
#product-view .spt th{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);text-align:left;padding:12px 14px;border-bottom:1.5px solid var(--rule);white-space:nowrap}
#product-view .spt td{padding:13px 14px;border-bottom:1px solid var(--rule)}
#product-view .spt tr:last-child td{border-bottom:none}
#product-view .spt td.g{font-family:var(--mono);font-weight:600;color:var(--orange)}
#product-view .spt td.n{font-family:var(--mono);font-variant-numeric:tabular-nums}
#product-view .spt tbody tr{transition:background .18s ease}
#product-view .spt tbody tr:hover{background:var(--tint,rgba(233,85,10,.05))}
#product-view .spt-note{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:10.5px;color:var(--ink3);padding:12px 14px 10px;border-top:1px solid var(--rule);margin-top:2px}
#product-view .spt-note svg{width:14px;height:14px;flex:none}
@media(max-width:900px){#product-view .pv-specs{margin-top:26px}}

/* substrate tables: single centred heading */
#product-view .spt-head{text-align:center;margin:14px auto 28px}
#product-view .spt-sub{font-size:13.5px;color:var(--ink2);letter-spacing:.02em;line-height:1.7;max-width:64ch;margin:0 auto}


/* ═══ STATIC PRODUCT MODE — HRPO · CRFH · CRCA · GP/GI (PPGI keeps the 3D configurator) ═══ */
#product-view.pv-static #c3d-root{display:none!important}
#product-view.pv-static #view3dBtn{display:none!important}
#product-view.pv-static #ralbox{display:none!important}
#pvImgSlot{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;overflow:hidden;
  background:radial-gradient(120% 92% at 50% 40%,#F8F3EB 0%,#F1EADD 56%,#E6DBC9 100%)}
#pvImgSlot[hidden]{display:none}
#pvImgSlot::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(118% 96% at 50% 46%,transparent 60%,rgba(58,44,26,.15) 100%)}
#pvImgSlot.pv-in{animation:pvReveal .95s cubic-bezier(.22,1,.36,1) both}
@keyframes pvReveal{from{opacity:0;transform:scale(.965) translateY(14px)}to{opacity:1;transform:none}}
#pvImgWrap{position:absolute;inset:0;overflow:hidden;will-change:transform;animation:pvDrift 16s ease-in-out infinite alternate}
@keyframes pvDrift{from{transform:scale(1.03) translate3d(-.4%,-.3%,0)}to{transform:scale(1.08) translate3d(.4%,.3%,0)}}
#pvImg{display:block;width:100%;height:100%;object-fit:cover;object-position:center;
  transition:transform .9s cubic-bezier(.22,1,.36,1)}
#pvImgTag{position:absolute;right:22px;bottom:22px;z-index:3;background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid rgba(24,24,27,.08);border-radius:14px;padding:12px 16px;
  box-shadow:0 18px 44px -18px rgba(24,24,27,.35);display:flex;flex-direction:column;gap:2px;pointer-events:none}
#pvImgTag .code{font-weight:800;font-size:15px;letter-spacing:-.01em;color:#18181B}
#pvImgTag .nm{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#8E8B84}
@media(max-width:760px){#pvImgTag{right:14px;bottom:14px;padding:10px 13px}}
@media(prefers-reduced-motion:reduce){#pvImgWrap{animation:none!important}#pvImgSlot.pv-in{animation:none!important}#pvImg{transition:none!important}}


  #about-view #lm-01{background:#f8f9fa}
  #about-view #lm-01 .au{max-width:1200px;margin:0 auto;padding:140px 40px 112px}
  #about-view #lm-01 .au-eyebrow{font:700 12px var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--scale);text-align:center;margin:0 auto 16px}
  #about-view #lm-01 .au-lead{font:500 clamp(16px,1.35vw,19px)/1.72 var(--disp);color:var(--ink-2);max-width:74ch;margin:0 auto 54px;text-align:center;text-wrap:balance}
  #about-view #lm-01 .au-feature{position:relative}
  #about-view #lm-01 .au-banner{position:relative;height:clamp(340px,38vw,480px);border-radius:24px;overflow:hidden;background:#dcdfe4;box-shadow:0 40px 90px -56px rgba(20,18,16,.5)}
  #about-view #lm-01 .au-banner img,#about-view #lm-01 .au-banner video{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.2,.6,.2,1)}
  #about-view #lm-01 .au-feature:hover .au-banner img,#about-view #lm-01 .au-feature:hover .au-banner video{transform:scale(1.04)}
  #about-view #lm-01 .au-bcap{position:absolute;left:0;right:0;top:0;padding:28px 32px;background:linear-gradient(180deg,rgba(8,10,14,.82),rgba(8,10,14,0))}
  #about-view #lm-01 .au-bcap .k{font:700 11px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--scale-2)}
  #about-view #lm-01 .au-bcap .t{font:800 clamp(20px,1.9vw,27px) var(--disp);color:#fff;margin-top:6px}
  #about-view #lm-01 .au-metrics{position:relative;z-index:2;display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:28px;padding:0 24px}
  #about-view #lm-01 .au-mc{border-radius:18px;padding:26px 24px;border:1px solid var(--rule);background:#fff;box-shadow:0 30px 64px -34px rgba(20,18,16,.42);transition:transform .35s cubic-bezier(.2,.6,.2,1),box-shadow .35s}
  #about-view #lm-01 .au-mc:hover{transform:translateY(-6px);box-shadow:0 42px 80px -38px rgba(20,18,16,.5)}
  #about-view #lm-01 .au-mc .ck{font:600 11px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink3);margin-bottom:14px}
  #about-view #lm-01 .au-mc .cv{font:800 clamp(20px,1.7vw,25px) var(--disp);letter-spacing:-.01em;color:var(--ink);line-height:1.12}
  #about-view #lm-01 .au-mc .cs{font:600 11px var(--mono);letter-spacing:.04em;color:var(--ink3);margin-top:9px}
  #about-view #lm-01 .au-mc .cs.accent{color:var(--scale)}
  #about-view #lm-01 .au-mc.orange{background:var(--scale);border-color:transparent}
  #about-view #lm-01 .au-mc.orange .ck{color:rgba(255,255,255,.82)}
  #about-view #lm-01 .au-mc.orange .cv{color:#fff}
  #about-view #lm-01 .au-mc.orange .cs{color:rgba(255,255,255,.92)}
  #about-view #lm-01 .au-mc.dark{background:#18181b;border-color:transparent}
  #about-view #lm-01 .au-mc.dark .ck{color:#9a9a9e}
  #about-view #lm-01 .au-mc.dark .cv{color:#fff}
  #about-view #lm-01 .au-mc.dark .cs{color:var(--scale-2)}
  /* CONNECTIVITY CARD (v110) — replaced the Technology metric. Six figures do
     not fit the 3-line .au-mc shape, so this card spans the row and the two
     groups sit side by side; at <=820px the grid is already 1fr and they stack. */
  #about-view #lm-01 .au-mc.conn{grid-column:1/-1}
  #about-view #lm-01 .au-conn{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 40px;margin-top:22px;padding-top:20px;border-top:1px solid rgba(255,255,255,.14)}
  #about-view #lm-01 .au-conn .cn-h{font:600 10px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#9a9a9e;margin-bottom:10px}
  #about-view #lm-01 .au-conn .cn-r{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.08)}
  #about-view #lm-01 .au-conn .cn-r:last-child{border-bottom:0}
  #about-view #lm-01 .au-conn .cn-r span{font:600 13.5px var(--disp);color:#e9e9ec;letter-spacing:-.005em}
  #about-view #lm-01 .au-conn .cn-r b{font:600 12px var(--mono);letter-spacing:.03em;color:var(--scale-2);font-variant-numeric:tabular-nums}
  /* ---- v111: metrics section rebuilt to V's mock -----------------------
     Both top cards are now white with a brand icon; the connectivity card
     keeps the dark treatment and gains group icons + a vertical divider.
     Sizes are the mock's, measured 1:1, expressed as clamps so they hold at
     narrower containers. Scoped `#about-view #lm-01` like every rule here —
     a bare class would be out-specified (v103). */
  #about-view #lm-01 .au-mc{padding:clamp(18px,1.45vw,21px) clamp(18px,1.35vw,20px);border-radius:18px}
  #about-view #lm-01 .au-mc .ck{color:var(--scale);margin-bottom:11px}
  #about-view #lm-01 .au-mc .cv{font:800 clamp(23px,1.85vw,26px) var(--disp);line-height:1.06}
  #about-view #lm-01 .au-mc .cs{font:500 clamp(11.5px,.88vw,12.5px) var(--mono);letter-spacing:.01em;margin-top:10px;overflow-wrap:anywhere}
  #about-view #lm-01 .au-fig{display:flex;align-items:center;gap:clamp(14px,1.1vw,16px)}
  #about-view #lm-01 .au-tx{display:flex;flex-direction:column;min-width:0}
  #about-view #lm-01 .au-ic{flex:0 0 auto;display:grid;place-items:center;
    width:clamp(50px,3.75vw,54px);height:clamp(50px,3.75vw,54px);color:#fff;background:var(--scale)}
  #about-view #lm-01 .au-ic.sq{border-radius:16px}
  #about-view #lm-01 .au-ic.rd{border-radius:50%;background:#fdeae0;color:var(--scale)}
  #about-view #lm-01 .au-ic svg{width:46%;height:46%;display:block}
  /* connectivity card */
  #about-view #lm-01 .au-mc.conn .ck{color:var(--scale)}
  #about-view #lm-01 .au-mc.conn .cv{font-size:clamp(23px,2.5vw,36px)}
  #about-view #lm-01 .au-mc.conn .cs{color:var(--scale-2)}
  #about-view #lm-01 .au-conn{gap:0;margin-top:clamp(20px,2.2vw,30px);padding-top:clamp(20px,2.2vw,30px)}
  #about-view #lm-01 .cn-grp{display:flex;align-items:flex-start;gap:clamp(16px,1.9vw,30px);min-width:0}
  #about-view #lm-01 .cn-grp+.cn-grp{border-left:1px solid rgba(255,255,255,.11);padding-left:clamp(22px,3.9vw,60px)}
  #about-view #lm-01 .cn-grp:first-child{padding-right:clamp(22px,3.9vw,60px)}
  #about-view #lm-01 .cn-body{flex:1 1 auto;min-width:0}
  #about-view #lm-01 .cn-ic{flex:0 0 auto;display:grid;place-items:center;
    width:clamp(50px,5.2vw,76px);height:clamp(50px,5.2vw,76px);border-radius:50%;
    background:rgba(255,255,255,.06);color:var(--scale-2)}
  #about-view #lm-01 .cn-ic svg{width:46%;height:46%;display:block}
  #about-view #lm-01 .au-conn .cn-h{font-size:clamp(11px,1.05vw,14px);color:#e9e9ec;margin-bottom:clamp(10px,1.1vw,16px)}
  #about-view #lm-01 .au-conn .cn-r{padding:clamp(11px,1.35vw,19px) 0}
  #about-view #lm-01 .au-conn .cn-r span{font-size:clamp(15px,1.55vw,22px)}
  #about-view #lm-01 .au-conn .cn-r b{font:700 clamp(15px,1.55vw,22px) var(--disp);letter-spacing:-.005em}
  @media(max-width:820px){
  #about-view #lm-01 .cn-grp+.cn-grp{border-left:0;padding-left:0;border-top:1px solid rgba(255,255,255,.11);padding-top:20px}
  #about-view #lm-01 .cn-grp:first-child{padding-right:0}
  }

  /* ---- v133: CONNECTIVITY CARD REBUILT TO V'S REFERENCE -----------------
     Was a dark #18181b panel with two columns. Now a light warm-paper card:
     centred header (eyebrow / title / place between two rules), then three
     columns — By road, a faint Gujarat outline, Ports — split by dotted
     orange rules. Every rule below overrides the v110/v111 dark treatment;
     the `dark` class was dropped from the markup so those rules no longer
     match at all. Scoped `#about-view #lm-01` like every rule in this block
     (a bare class gets out-specified — the v103 lesson). */
  #about-view #lm-01 .au-mc.conn{background:#F8F3EC;border:1px solid #EADFD1;
    padding:clamp(20px,1.6vw,24px) clamp(18px,1.5vw,22px)}
  #about-view #lm-01 .au-mc.conn .cn-head{text-align:center;max-width:760px;margin:0 auto}
  #about-view #lm-01 .au-mc.conn .ck{color:var(--scale);margin-bottom:clamp(8px,.9vw,13px)}
  #about-view #lm-01 .au-mc.conn .cv{color:var(--ink);font-size:clamp(20px,1.6vw,23px);line-height:1.08}
  #about-view #lm-01 .cn-place{display:flex;align-items:center;justify-content:center;
    gap:clamp(12px,1.5vw,22px);margin-top:clamp(9px,1vw,14px)}
  #about-view #lm-01 .cn-place span{font:500 clamp(11.5px,.88vw,12.5px) var(--mono);
    letter-spacing:.06em;color:var(--scale);white-space:nowrap}
  #about-view #lm-01 .cn-place i{height:1px;width:clamp(40px,4vw,60px);background:#E3CDB4}

  #about-view #lm-01 .au-conn{display:grid;
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
    gap:0;align-items:start;border-top:0;
    margin-top:clamp(16px,1.35vw,19px);padding-top:0}
  #about-view #lm-01 .cn-grp{display:block;padding:0 clamp(16px,2.6vw,42px)}
  #about-view #lm-01 .cn-grp+.cn-grp{border-left:0;padding-left:clamp(16px,2.6vw,42px)}
  #about-view #lm-01 .cn-grp:first-child{padding-right:clamp(16px,2.6vw,42px)}
  #about-view #lm-01 .cn-top{display:flex;align-items:center;gap:clamp(10px,1vw,14px);
    margin-bottom:clamp(12px,1.05vw,15px)}
  #about-view #lm-01 .cn-ic{flex:0 0 auto;display:grid;place-items:center;
    width:clamp(34px,2.4vw,36px);height:clamp(34px,2.4vw,36px);border-radius:50%;
    background:#FBE3D3;color:var(--scale)}
  #about-view #lm-01 .cn-ic svg{width:48%;height:48%;display:block}
  #about-view #lm-01 .au-conn .cn-h{margin:0;color:var(--ink);
    font:600 clamp(10.5px,.8vw,11.5px) var(--mono);letter-spacing:.16em;text-transform:uppercase}
  #about-view #lm-01 .au-conn .cn-r{display:flex;align-items:baseline;justify-content:space-between;
    gap:14px;padding:clamp(9px,.8vw,11px) 0;border-bottom:1px solid #E7DDD0}
  #about-view #lm-01 .au-conn .cn-r:last-child{border-bottom:0}
  #about-view #lm-01 .au-conn .cn-r span{color:var(--ink);font:600 clamp(13.5px,1.05vw,15px) var(--disp)}
  #about-view #lm-01 .au-conn .cn-r b{color:var(--scale);
    font:700 clamp(13.5px,1.05vw,15px) var(--disp);font-variant-numeric:tabular-nums}

  /* the map column — decoration, so it is aria-hidden and never a tap target */
  #about-view #lm-01 .cn-map{position:relative;align-self:center;
    width:clamp(206px,16.5vw,236px);padding:0 clamp(8px,.7vw,11px);
    border-left:1px dotted #E0B999;border-right:1px dotted #E0B999}
  #about-view #lm-01 .cn-mapsvg{display:block;width:100%;height:auto}
  #about-view #lm-01 .cn-mapsvg path{fill:var(--scale);fill-opacity:.07;
    stroke:#D3B092;stroke-width:1.1;vector-effect:non-scaling-stroke}
  /* v135: THE PIN LIVES INSIDE THE SVG NOW.
     It used to be an HTML span positioned at left:64%/top:60% of .cn-map —
     but .cn-map carries horizontal padding on desktop and none on phone, so
     the same percentage resolved to two different places, and neither was
     Palej. Inside the svg it shares the outline's own coordinate system, so
     it is pinned to the geometry and is identical at every width.
     Position verified against Palej railway station, 21.921246N 73.072576E,
     through the same projection that generated the outline -> x150.5 y88.8. */
  #about-view #lm-01 .cn-dot{fill:var(--scale)}
  #about-view #lm-01 .cn-pulse{fill:var(--scale);transform-box:fill-box;transform-origin:center;
    animation:cnPulse 2.6s cubic-bezier(.4,0,.6,1) infinite}
  /* the label sits centred UNDER the dot, not beside it: beside, its 14
     characters ran past x=200 and the svg root clipped it ("Palej, Bharuc"). */
  /* v137: label was 6 user-units in a 240px-wide svg = ~7px on screen, too
     small to read on desktop. Bumped to 9.2 units AND the map column widened,
     so it lands around 12px. Still centred under the dot and still inside the
     viewBox (54 units wide, centred on x=150.5 -> 123.5..177.5 of 0..200). */
  #about-view #lm-01 .cn-lbl{fill:var(--scale);font:600 10.4px var(--disp);
    letter-spacing:-.01em;text-anchor:middle;dominant-baseline:middle}
  @keyframes cnPulse{
    0%{transform:scale(1);opacity:.42}
    70%{transform:scale(2.6);opacity:0}
    100%{transform:scale(2.6);opacity:0}
  }
  @media(prefers-reduced-motion:reduce){
    #about-view #lm-01 .cn-pulse{animation:none;opacity:.3}
  }
  #about-view #lm-01 .cn-mapcap{display:block;text-align:center;margin-top:clamp(8px,.9vw,13px);
    font:500 clamp(9px,.85vw,11px) var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ink3)}

  @media(max-width:820px){
  /* phone: one column, map last and centred, dotted side rules become a
     single dotted rule above it. */
  #about-view #lm-01 .au-conn{grid-template-columns:1fr;gap:22px}
  #about-view #lm-01 .cn-grp,#about-view #lm-01 .cn-grp:first-child,
  #about-view #lm-01 .cn-grp+.cn-grp{padding:0;border:0}
  #about-view #lm-01 .cn-map{order:3;width:min(280px,80%);margin:0 auto;padding:20px 0 0;
    border-left:0;border-right:0;border-top:1px dotted #E0B999}
  #about-view #lm-01 .cn-place i{width:clamp(28px,12vw,70px)}
  }
  @media(max-width:820px){
  #about-view #lm-01 .au-conn{grid-template-columns:1fr;gap:18px;margin-top:18px;padding-top:16px}
  }
  @media(max-width:820px){
  #about-view #lm-01 .au{padding:108px 18px 72px}
  #about-view #lm-01 .au-lead{margin-bottom:34px}
  #about-view #lm-01 .au-banner{height:300px}
  #about-view #lm-01 .au-metrics{grid-template-columns:1fr;gap:14px;margin-top:18px;padding:0}
  }
  

    #about-view #lm-03{--img-hp:url("../img_0eab0e3902.webp");--e-hp:cubic-bezier(.22,1,.36,1);max-width:none;margin:0;padding:118px 0 108px;overflow:hidden}
    #about-view #lm-03 .lm-sechead{max-width:1180px;margin:0 auto 40px;padding:0 32px}
    #about-view #lm-03 .hp-wrap{max-width:1280px;margin:0 auto;padding:0 26px}
    #about-view #lm-03 .hp-scroll{width:100%}
    #about-view #lm-03 .hp-stage{position:relative;width:100%;aspect-ratio:2.9611/1;background:#fff}
    #about-view #lm-03 .hp-base{position:absolute;inset:0;background:var(--img-hp) center/100% 100% no-repeat;z-index:1}
    #about-view #lm-03 .hp-veil{position:absolute;inset:0;background:#fff;opacity:0;z-index:3;pointer-events:none;transition:opacity .3s var(--e-hp)}
    #about-view #lm-03 .hp-stage.hp-active .hp-veil{opacity:.42}
    /* v139: there are now EIGHT highlight layers, each with a STATIC clip-path,
       and hovering only toggles opacity. Previously ONE layer had its
       `clip-path:url(#hpzN)` rewritten on every hover — Safari does not
       reliably repaint a url() clip swap on a will-change-promoted layer, so
       the caption changed while the lit piece stayed on the previous one.
       Static clips cannot hit that bug, and the two layers cross-fade, which
       also makes piece-to-piece movement read as one smooth move.
       `will-change` is deliberately NOT set here: 8 permanently promoted
       full-bleed layers is a lot of GPU memory for no gain. */
    #about-view #lm-03 .hp-hi{position:absolute;inset:0;background:var(--img-hp) center/100% 100% no-repeat;opacity:0;z-index:4;pointer-events:none;transition:opacity .3s var(--e-hp),transform .3s var(--e-hp),filter .3s var(--e-hp)}
    #about-view #lm-03 .hp-hi.hp-on{opacity:1;transform:scale(1.012);filter:brightness(1.08) contrast(1.05) drop-shadow(0 12px 30px rgba(0,0,0,.16))}
    #about-view #lm-03 .hp-hit{position:absolute;inset:0;z-index:5;cursor:pointer;background:transparent}
    #about-view #lm-03 .hp-cap{max-width:660px;margin:30px auto 0;text-align:center;min-height:176px;opacity:0;transform:translateY(8px);transition:opacity .3s var(--e-hp),transform .3s var(--e-hp)}
    #about-view #lm-03 .hp-cap.hp-show{opacity:1;transform:none}
    #about-view #lm-03 .hp-y{font:800 36px var(--disp);letter-spacing:-.02em;color:var(--scale);line-height:1}
    #about-view #lm-03 .hp-t{font:700 14px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink);margin-top:11px}
    #about-view #lm-03 .hp-ru{width:54px;height:3px;background:var(--scale);border-radius:2px;margin:15px auto 16px}
    #about-view #lm-03 .hp-d{font:500 14.5px/1.65 var(--disp);color:var(--ink-2)}
    #about-view #lm-03 .hp-hint{text-align:center;font:600 10.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink3);margin-top:16px}
    @media(max-width:760px){
      #about-view #lm-03{padding:80px 0 72px}
      #about-view #lm-03 .lm-sechead{margin-bottom:26px;padding:0 20px}
      #about-view #lm-03 .hp-wrap{padding:0}
      #about-view #lm-03 .hp-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;padding:0 16px 8px}
      #about-view #lm-03 .hp-stage{min-width:1040px}
      #about-view #lm-03 .hp-cap{padding:0 20px;min-height:210px}
      #about-view #lm-03 .hp-hint{padding:0 20px}
    }
  

:root{--i18n-fade:300ms}
#i18n-veil{position:fixed;inset:0;background:#faf7f2;opacity:0;pointer-events:none;z-index:99998;transition:opacity var(--i18n-fade) ease}
#i18n-veil.on{opacity:1}
/* Indic font stacks — scoped so EN/ES visual identity is untouched */
html[lang="hi"] body,html[lang="gu"] body{font-feature-settings:normal}
html[lang="hi"] body{font-family:'Mukta','Noto Sans Devanagari','Bricolage Grotesque',sans-serif}
html[lang="gu"] body{font-family:'Hind Vadodara','Noto Sans Gujarati','Bricolage Grotesque',sans-serif}
html[lang="hi"] p,html[lang="gu"] p,html[lang="hi"] li,html[lang="gu"] li{line-height:1.75}
/* Indic scripts have no case & break under wide Latin tracking: relax it on mono/label runs */
html[lang="hi"] [class*="tag"],html[lang="gu"] [class*="tag"],
html[lang="hi"] [class*="mono"],html[lang="gu"] [class*="mono"],
html[lang="hi"] [class*="label"],html[lang="gu"] [class*="label"],
html[lang="hi"] [class*="eyebrow"],html[lang="gu"] [class*="eyebrow"],
html[lang="hi"] [class*="kicker"],html[lang="gu"] [class*="kicker"]{letter-spacing:.02em}
/* keep the native language pill in a Latin mono face even under Indic body font */
/* hero video: respect reduced motion — freeze to poster */
@media(prefers-reduced-motion:reduce){.hero-video{display:none}.hero-pin{background:#0f0e0c url('../steelco_hero_poster.webp') center/cover}}
html[lang="hi"] .lang-btn,html[lang="gu"] .lang-btn,
html[lang="hi"] [id$="langCurrent"],html[lang="gu"] [id$="langCurrent"]{font-family:'IBM Plex Mono',monospace}
/* Indic scripts need looser leading on tight-set display type to avoid vowel-sign / conjunct overlap. !important is required to override the site's ID-scoped base rules (e.g. #products .pr-h); scoped strictly to hi/gu so EN/ES are untouched. */
html[lang="hi"] .hero-copy h1,
html[lang="gu"] .hero-copy h1,
html[lang="hi"] .chapter h1,
html[lang="gu"] .chapter h1,
html[lang="hi"] .ht,
html[lang="gu"] .ht,
html[lang="hi"] .ip-title,
html[lang="gu"] .ip-title,
html[lang="hi"] .pr-h,
html[lang="gu"] .pr-h,
html[lang="hi"] .id-h,
html[lang="gu"] .id-h,
html[lang="hi"] .irfs-title,
html[lang="gu"] .irfs-title,
html[lang="hi"] .cbf-title,
html[lang="gu"] .cbf-title,
html[lang="hi"] .lm-hero h1,
html[lang="gu"] .lm-hero h1,
html[lang="hi"] .tlc-big,
html[lang="gu"] .tlc-big,
html[lang="hi"] .ep-title,
html[lang="gu"] .ep-title,
html[lang="hi"] .menu-links a,
html[lang="gu"] .menu-links a{line-height:1.3 !important}
html[lang="hi"] .infra-h,
html[lang="gu"] .infra-h,
html[lang="hi"] .id-h--sub,
html[lang="gu"] .id-h--sub,
html[lang="hi"] .xh,
html[lang="gu"] .xh,
html[lang="hi"] .film-code,
html[lang="gu"] .film-code,
html[lang="hi"] .apps-pbhx-h,
html[lang="gu"] .apps-pbhx-h,
html[lang="hi"] .pbhx-name,
html[lang="gu"] .pbhx-name,
html[lang="hi"] .sus-h,
html[lang="gu"] .sus-h,
html[lang="hi"] .sus-rh,
html[lang="gu"] .sus-rh,
html[lang="hi"] .cn-h,
html[lang="gu"] .cn-h,
html[lang="hi"] .cn-form-h,
html[lang="gu"] .cn-form-h,
html[lang="hi"] .sb-para h2,
html[lang="gu"] .sb-para h2,
html[lang="hi"] .big,
html[lang="gu"] .big,
html[lang="hi"] .irfs-fn,
html[lang="gu"] .irfs-fn,
html[lang="hi"] .cm-h,
html[lang="gu"] .cm-h,
html[lang="hi"] .cbf-done h2,
html[lang="gu"] .cbf-done h2,
html[lang="hi"] .lm-h,
html[lang="gu"] .lm-h,
html[lang="hi"] .tlc-sectitle h2,
html[lang="gu"] .tlc-sectitle h2,
html[lang="hi"] .tlc-panel h3,
html[lang="gu"] .tlc-panel h3,
html[lang="hi"] .hero h2,
html[lang="gu"] .hero h2,
html[lang="hi"] .kx,
html[lang="gu"] .kx,
html[lang="hi"] .ph,
html[lang="gu"] .ph{line-height:1.32 !important}


  /* ---- Scroll seam continuity (desktop stack) -------------------------------
     Two separate defects showed up as a light hairline between sections:
     1. #products is position:sticky with a near-white background, so it sits as
        a pale plane BEHIND the whole stack for the rest of the page — any
        sub-pixel rounding gap between two stacked sections let it show through.
        Every consecutive section now overlaps its predecessor by 1px.
     2. Sustainability's 300vh scaffold released its sticky hero 100vh before the
        section ended, leaving an empty band that Contact used to slide over.
        The footer now rises over that tail exactly as Contact did. ---------- */
  @media(min-width:761px){
    #equipment-landing{margin-top:-1px}
    #products{margin-top:-1px}
    #industries{margin-top:-1px}
    #sustain.sus{margin-top:calc(-100vh - 1px)}
    .ft{margin-top:calc(-100vh - 1px)}
  }


  /* ---- About ---------------------------------------------------------------
     V's approved centred composition (Jul 2026 mock, verbatim): centred
     eyebrow, big centred two-line headline with orange accents, centred
     two-paragraph lede, one dark capsule CTA, then a four-card row —
     live quote card (TradingView mini overview: price + change + sparkline)
     beside the three vertical investor cards. Card hover is the quiet
     premium treatment; the sweep lives only on the CTA capsule. --------- */
  #about.ab{position:relative;background:#fff;padding:clamp(72px,9vh,116px) 0 clamp(56px,8vh,96px);color:var(--ink)}
  #about .wrap{max-width:1320px;margin:0 auto;padding:0 clamp(24px,3.4vw,48px)}

  /* centred eyebrow — mirrors .sl-eyebrow on the landings */
  #about .ab-head{text-align:center;margin-bottom:clamp(26px,4vh,44px)}
  #about .ab-eyebrow{display:inline-block;position:relative;font:600 11px var(--mono);letter-spacing:.34em;text-transform:uppercase;color:var(--scale);padding-bottom:12px}
  #about .ab-eyebrow::before{content:none}
  #about .ab-eyebrow::after{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:56px;height:2px;background:var(--scale)}

  /* centred copy stack */
  #about .ab-center{text-align:center;max-width:940px;margin:0 auto}
  #about .ab-h{font:800 var(--ab-h-size,clamp(38px,4.6vw,66px))/1.08 var(--disp);letter-spacing:-.035em;color:var(--ink);margin:0 auto clamp(20px,3vh,30px)}
  #about .ab-h em{font-style:normal;color:var(--scale)}
  #about .ab-lede{font:400 var(--ab-lede-size,16.5px)/1.75 var(--disp);color:var(--ink2);max-width:var(--ab-lede-measure,68ch);margin:0 auto clamp(12px,2vh,18px)}
  #about .ab-lede:last-of-type{margin-bottom:0}
  #about .ab-center .sl-cta{margin-top:var(--ab-cta-gap,clamp(24px,3.6vh,34px))}

  /* four-card row — quote card slightly wider, all flush */
  #about .ab-row{display:grid;grid-template-columns:var(--ab-row-cols,minmax(0,1.32fr) repeat(3,minmax(0,1fr)));gap:var(--ab-row-gap,clamp(16px,1.6vw,24px));align-items:stretch;margin-top:clamp(38px,5.5vh,60px)}

  #about .sp-card{display:flex;flex-direction:column;gap:12px;background:#fff;border:1px solid rgba(21,24,29,.09);border-radius:18px;padding:20px 20px 16px;box-shadow:0 24px 64px -40px rgba(21,24,29,.35);transition:transform .35s cubic-bezier(.2,.6,.2,1),box-shadow .35s,border-color .35s}
  #about .sp-card:hover{transform:translateY(-3px);border-color:rgba(21,24,29,.14);box-shadow:0 30px 72px -36px rgba(21,24,29,.45)}
  #about .sp-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
  #about .sp-scrip{font:600 10.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink3)}
  #about .sp-live{display:inline-flex;align-items:center;gap:7px;font:600 9.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#1a8f4c}
  #about .sp-live .dot{width:7px;height:7px;border-radius:50%;background:#1a8f4c;box-shadow:0 0 0 0 rgba(26,143,76,.5);animation:spPulse 2.4s ease-out infinite}
  @keyframes spPulse{70%{box-shadow:0 0 0 7px rgba(26,143,76,0)}100%{box-shadow:0 0 0 0 rgba(26,143,76,0)}}
  #about .sp-name{font:700 16px var(--disp);letter-spacing:-.015em;color:var(--ink)}
  #about .sp-tv{flex:1;border:1px solid rgba(21,24,29,.08);border-radius:14px;padding:6px;background:#fbfbfc;min-height:210px;display:flex;align-items:center;overflow:hidden}
  #about .sp-tv .tradingview-widget-container{width:100%}
  /* v145 — live price line (filled by script#sp-quote-js from /.netlify/functions/sgl-quote;
     stays hidden on file:// or if the function is absent, so the card degrades to v144). */
  #about .sp-px{display:none;align-items:baseline;gap:10px;margin:2px 0 4px}
  #about .sp-px.on{display:flex}
  #about .sp-px .p{font:800 26px var(--disp);letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
  #about .sp-px .c{font:600 12.5px var(--mono);letter-spacing:.02em;font-variant-numeric:tabular-nums}
  #about .sp-px .c.up{color:#1a8f4c}
  #about .sp-px .c.dn{color:#c62828}
  #about .sp-px .t{margin-left:auto;font:500 9.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:rgba(21,24,29,.45)}
  /* v146 — self-drawn 3-month sparkline replaces the TradingView embed once the
     quote function answers (the embed shows anonymous EOD data — a second, stale
     price). TV stays in the markup purely as the no-function/file:// fallback. */
  #about .sp-tv.own .tradingview-widget-container{display:none}
  #about .sp-tv svg.sp-spark{display:block;width:100%;height:198px}
  #about .sp-spark text{font:500 9px var(--mono);letter-spacing:.08em;fill:rgba(21,24,29,.42)}

  /* three vertical investor cards — icon chip, title, line, arrow ring.
     Quiet premium hover; no fill sweep on cards. */
  #about .ab-tile{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:0;padding:22px 64px 22px 22px;border-radius:18px;text-decoration:none;color:var(--ink);background:#fff;border:1px solid rgba(21,24,29,.09);box-shadow:0 24px 64px -40px rgba(21,24,29,.35);transition:transform .35s cubic-bezier(.2,.6,.2,1),box-shadow .35s,border-color .35s}
  #about .ab-tile-fill{display:none}
/* ===== v102 · Corporate Announcements — tinted card, auto-rotating ===== */
#about .ab-tile.ab-ann{background:linear-gradient(135deg,rgba(233,85,10,.10),rgba(242,106,36,.05));border-color:rgba(233,85,10,.22);flex-direction:column;align-items:stretch;justify-content:flex-start;gap:12px;padding:18px 20px 20px;overflow:hidden}
.ab-ann-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-right:44px}
.ab-ann-kicker{font:700 10.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--scale)}
.ab-ann-count{font:600 12px var(--mono);color:var(--ink3)}
.ab-ann-count i{font-style:normal}
.ab-ann-arr{position:absolute;right:18px;top:18px;width:34px;height:34px;border-radius:50%;border:1px solid rgba(233,85,10,.35);color:var(--scale);display:grid;place-items:center;background:#fff;transition:transform .3s cubic-bezier(.2,.6,.2,1),background .25s,color .25s}
.ab-ann:hover .ab-ann-arr{background:var(--scale);color:#fff;transform:translate(2px,-2px)}
.ab-ann-arr svg{width:15px;height:15px}
.ab-ann-body{display:flex;align-items:flex-start;gap:14px;min-width:0;flex:1}
.ab-ann-ico{flex:none;width:52px;height:52px;border-radius:14px;display:grid;place-items:center;color:#fff;background:var(--scale);box-shadow:0 10px 24px -12px rgba(233,85,10,.9);margin-bottom:0}
.ab-ann-ico svg{width:24px;height:24px}
.ab-ann-slides{position:relative;flex:1 1 auto;min-width:0;min-height:62px;display:block}
/* stacked absolutely, so the box must clear the tallest wrap. At 1fr/1.35fr
   every announcement lands in TWO lines down to ~1120px; in the last stretch
   before the layout stacks, the longest filing takes a third line, so the box
   gets height there (no type change — the spec forbids shrinking text). */
@media(max-width:1280px){.ab-ann-slides{min-height:80px}}
.ab-ann-slide{position:absolute;inset:0;display:flex;flex-direction:column;gap:3px;opacity:0;transform:translateY(6px);transition:opacity .45s ease,transform .45s cubic-bezier(.2,.6,.2,1);pointer-events:none}
.ab-ann-slide.is-on{opacity:1;transform:none}
.ab-ann-slide b{font:700 15px var(--disp);letter-spacing:-.014em;color:var(--ink)}
.ab-ann-slide span{font:500 12.5px/1.5 var(--disp);color:var(--ink-2)}
@media (prefers-reduced-motion:reduce){.ab-ann-slide{transition:none}}
  #about .ab-tile-ico{flex:none;width:48px;height:48px;border-radius:14px;display:grid;place-items:center;color:var(--scale);background:rgba(233,85,10,.09);margin-bottom:16px;transition:background .3s,transform .35s cubic-bezier(.2,.6,.2,1)}
  #about .ab-tile-ico svg{width:22px;height:22px}
  #about .ab-tile-txt{display:flex;flex-direction:column;gap:5px;min-width:0}
  #about .ab-tile-txt b{font:700 15px var(--disp);letter-spacing:-.014em}
  #about .ab-tile-txt span{font:500 12.5px/1.5 var(--disp);color:var(--ink3)}
  #about .ab-tile-arr{position:absolute;right:18px;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:50%;border:1px solid rgba(21,24,29,.2);display:grid;place-items:center;transition:color .18s ease,border-color .18s ease,background .3s,transform .35s cubic-bezier(.2,.6,.2,1)}
  #about .ab-tile-arr svg{width:14px;height:14px}
  #about .ab-tile:hover{transform:translateY(-3px);border-color:rgba(21,24,29,.16);box-shadow:0 30px 72px -36px rgba(21,24,29,.45)}
  #about .ab-tile:hover .ab-tile-ico{background:rgba(233,85,10,.14)}
  #about .ab-tile:hover .ab-tile-arr{color:var(--scale);border-color:var(--scale);background:rgba(233,85,10,.07);transform:translateY(-50%) translate(2px,-2px)}
  #about .ab-tile:active{transform:translateY(-1px) scale(.995)}
  #about .ab-tile:focus-visible{outline:2px solid var(--scale);outline-offset:3px}

  /* height budget — compact gracefully on short desktop viewports */
  @media(min-width:1081px) and (max-height:880px){
    #about.ab{padding:clamp(60px,8vh,92px) 0 clamp(40px,6vh,72px)}
    #about .ab-head{margin-bottom:clamp(18px,3vh,32px)}
    #about .ab-h{font-size:var(--ab-h-size,clamp(34px,4.1vw,56px))}
    #about .ab-row{margin-top:clamp(28px,4.5vh,44px)}
    #about .sp-tv{min-height:186px}
  }

  @media(max-width:1080px){
    #about .ab-row{grid-template-columns:repeat(2,minmax(0,1fr))}
    #about .sp-card{grid-column:1/-1}
    #about .sp-tv{min-height:190px}
  }
  @media(max-width:640px){
    #about .ab-row{grid-template-columns:1fr}
    #about .ab-h br{display:none}
  }
  @media(prefers-reduced-motion:reduce){
    #about .sp-card,#about .ab-tile,#about .ab-tile-ico,#about .ab-tile-arr{transition:none}
    #about .sp-live .dot{animation:none}
  }


  /* Centre ONLY the Products header (eyebrow + rule + headline) so it matches
     the About / Sustainability header language. Cards, carousel, arrows, dots,
     hint and all JS are untouched. Scoped to #products; sets no margins that
     would affect the section stack (seam-continuity stays the final winner). */
  #products .pr-head{align-items:center;text-align:center}
  #products .pr-head-l{display:flex;flex-direction:column;align-items:center}
  #products .pr-eyebrow{position:relative;letter-spacing:.34em;padding-bottom:12px}
  #products .pr-eyebrow::after{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:56px;height:2px;background:var(--scale)}
  #products .pr-h{text-align:center}


  /* ---- Products: desktop static grid (≥1181px) ---------------------------
     Show all five grades at once instead of the carousel. Cards sit full
     opacity/scale (no dimming), lift on hover, and click still runs the
     existing cinematic enterProduct() zoom (JS guard relaxed to allow entry
     from any card at this width). The scroll-snap, arrows, dots and hint are
     the carousel UI — hidden here, fully intact below 1181px for mobile.
     No section margins set (seam-continuity stays the final winner). ------ */
  @media(min-width:1181px){
    #products .filmstrip{overflow:visible;scroll-snap-type:none;padding:8px 0 16px}
    #products .film-track{width:auto;gap:clamp(14px,1.5vw,22px);padding:0 clamp(24px,3vw,48px);
      justify-content:center;align-items:stretch}
    #products .film-card{flex:1 1 0;min-width:0;max-width:300px;
      opacity:1;transform:none;scroll-snap-align:none;cursor:pointer;
      transition:transform .32s cubic-bezier(.2,.6,.2,1),filter .32s ease}
    /* kill the carousel's dim/scale active-only styling — every card reads as active */
    #products .film-card.active{opacity:1;transform:none}
    #products .film-card .film-card-inner{
      box-shadow:0 18px 44px -30px rgba(20,18,16,.22);border-color:rgba(20,18,16,.12);
      transition:box-shadow .32s ease,border-color .32s ease}
    #products .film-card .film-num{color:var(--ink-3);opacity:.5;transition:color .28s ease,opacity .28s ease}
    #products .film-card .film-underline{background:transparent}

    /* hover pop */
    #products .film-card:hover{transform:translateY(-8px)}
    #products .film-card:hover .film-card-inner{
      box-shadow:0 34px 70px -30px rgba(20,18,16,.32);border-color:rgba(20,18,16,.2)}
    #products .film-card:hover .film-num{color:var(--scale);opacity:1}
    #products .film-card:hover .film-underline{background:var(--scale)}
    #products .film-card:hover .film-img img{transform:scale(1.03)}
    #products .film-card:active{transform:translateY(-4px) scale(.995)}

    /* --- EQUAL DIMENSIONS: every card the same height regardless of how many
       lines the spec text wraps to. Inner is a flex column; the image is a
       FIXED height (not variable aspect-ratio); the meta grows to fill, so all
       five inner boxes end identical. film-num sits above and is excluded from
       the equalised height by giving the inner a fixed min-height too. --- */
    #products .film-track{align-items:stretch}
    #products .film-card{display:flex;flex-direction:column}
    #products .film-card .film-card-inner{flex:1 1 auto;display:flex;flex-direction:column;height:100%}
    #products .film-card .film-img{aspect-ratio:auto;height:clamp(190px,15vw,230px);flex:none}
    #products .film-card .film-meta{flex:1 1 auto;display:flex;flex-direction:column}
    /* spec pinned to the bottom so the sub-line gap doesn't shove short cards taller */
    #products .film-card .film-spec{margin-top:auto;padding-top:12px}

    /* hide the carousel controls on desktop only */
    #products .film-arr,
    #products .film-dots,
    #products .film-hint{display:none}
  }
  @media(min-width:1181px) and (prefers-reduced-motion:reduce){
    #products .film-card,#products .film-card .film-img img,#products .film-card .film-card-inner{transition:none}
    #products .film-card:hover{transform:none}
  }


  /* ---- About right column → Image-2 layout --------------------------------
     Two columns: the stock card on the LEFT, the three investor tiles STACKED
     on the RIGHT as short horizontal rows (icon · text · arrow), instead of
     four equal-height columns. Desktop (≥1081px) only — the ≤1080 / ≤640
     stacking in about-bento is untouched. CSS-only; markup unchanged; sweep
     and hover behaviour preserved. No section margins (seam-safe). --------- */
  @media(min-width:1081px){
    /* left half = stock card, right half = a 3-row stack of tiles */
    #about .ab-row{
      grid-template-columns:var(--ab-row-cols, minmax(0,1.05fr) minmax(0,1fr));
      grid-template-rows:auto auto 1fr;
      gap:var(--ab-row-gap, clamp(16px,1.5vw,22px));align-items:stretch}
    #about .sp-card{grid-column:1;grid-row:1 / span 3}

    /* each tile: horizontal row, icon left, text middle, arrow right */
    #about .ab-tile{
      grid-column:2;
      flex-direction:row;align-items:center;gap:16px;
      padding:20px 20px 20px 22px}
    #about .ab-tile-ico{margin-bottom:0}
    /* arrow returns to inline (flow) position at the row's right end */
    #about .ab-tile-arr{position:static;transform:none;margin-left:auto}
    #about .ab-tile:hover .ab-tile-arr{transform:translate(2px,-2px)}
    #about .ab-tile-txt{gap:3px}
  }
  @media(min-width:1081px) and (prefers-reduced-motion:reduce){
    #about .ab-tile:hover .ab-tile-arr{transform:none}
  }

  /* ===== v108 · WIDTH — the row now fills the wrap ==========================
     ROOT CAUSE of the narrow bento: #about is `display:flex` (style#stack-hero-about,
     for the 100vh vertical centring), so .wrap was a FLEX ITEM and sized to
     fit-content instead of stretching — the four boxes were laid out at their
     content width (~770px) inside a 1224px wrap. Making the item fill the line
     is the whole fix; max-width:1320px on #about .wrap still caps it, and
     .ab-center (max-width:940) plus .ab-lede (68ch = 730px) are unchanged, so
     the headline and the two paragraphs keep their exact line breaks.
     NOTE: this also un-narrows the 761–1080px tablet layout, same cause.  */
  #about > .wrap{width:100%}

  @media(min-width:1081px){
    :root{
      /* Column proportions. The rail:card ratio is this ONE value.
         (Until v108 these tokens were dead: the rule above set the template
         literally, so it won on source order and the tokens never applied.) */
      --ab-row-cols: minmax(0,1.05fr) minmax(0,1fr);
      --ab-row-gap: clamp(16px,1.5vw,22px);
    }
    /* HEIGHT — no box gets taller. The two link tiles tighten (icon 48→44,
       padding-block 20→15) and the third grid row is `1fr`, so ALL the slack
       between the rail and the share-price card lands in the announcements
       card. Bottom edges align because the share card spans all three rows;
       the row's total height is still governed by that card, not by the rail. */
    #about .ab-tile:not(.ab-ann){padding:15px 20px 15px 22px}
    #about .ab-tile:not(.ab-ann) .ab-tile-ico{width:44px;height:44px}
    #about .ab-tile.ab-ann{padding:18px 20px 20px}
    /* the filing sits centred in the taller card rather than clinging to the top */
    #about .ab-ann-body{align-items:center}
  }


  /* Nav locked to its solid/white ("scrolled") state at all times, on every
     page — not scroll-controlled (V). Applying the look to the base .nav too
     means it is correct on first paint, before any JS runs (no transparent
     flash over the hero). The .scrolled class is still added by JS as a
     belt-and-suspenders. Mirrors the same override added to
     assets/sustainability.css for the standalone pages. */
  .nav .cap{background:#fff;border-color:var(--rule);box-shadow:0 8px 24px -10px rgba(20,18,16,.18)}
  .nav .logo-cap img{filter:none}
  .nav .center-cap a{color:var(--ink);opacity:.78}
  .nav .center-cap a.on,.nav .center-cap a:hover{color:#fff;opacity:1}
  .nav .lang-btn{color:var(--ink)}
  .nav .lang-btn:hover{background:rgba(0,0,0,.06)}
  .nav .lang-menu{background:#fff;border-color:var(--rule);box-shadow:0 16px 40px -10px rgba(20,18,16,.18)}
  .nav .lang-menu a{color:var(--ink-2)}
  .nav .lang-menu a:hover{background:rgba(0,0,0,.04);color:var(--ink)}
  .nav .lang-menu a.on{color:var(--scale)}
  .nav .right-cap .divider{background:var(--rule)}
  .nav .ham:hover{background:rgba(0,0,0,.06)}
  .nav .ham .lines span{background:var(--ink)}
  .nav{padding:12px 24px}


  /* ---- Nav link colour driven by the blob, not by timers -----------------
     ROOT CAUSE of the "links vanish on hover" glitch: `.center-cap.moving a`
     forced EVERY link to #fff for the 560ms the blob was sliding. That was
     written for the old transparent-over-hero nav; now the cap is permanently
     white, so white text = invisible. Same for `a.on`, which stayed white even
     after the blob slid away from it.
     Links are now ink by default and turn white ONLY while the orange blob is
     actually beneath them (.lit, assigned every frame from real geometry), so
     the colour can never desync from what is on screen. ------------------- */
  .center-cap.moving a{color:var(--ink) !important;opacity:.78 !important}
  .nav .center-cap a.on,.nav .center-cap a:hover,
  .nav.scrolled .center-cap a.on,.nav.scrolled .center-cap a:hover,
  #about-view .center-cap a.on,#about-view .center-cap a:hover{
    color:var(--ink) !important;opacity:.78 !important}
  .center-cap a{transition:color .18s ease,opacity .18s ease}
  /* must tie-or-beat every neutraliser above (incl. the #about-view ID ones)
     and sit later in the block, so the link under the blob always wins */
  #about-view .nav.scrolled .center-cap a.lit,
  #about-view .center-cap a.lit,
  .nav.scrolled .center-cap a.lit,
  .nav .center-cap a.lit,
  .center-cap.moving a.lit,
  .center-cap a.lit{color:#fff !important;opacity:1 !important}


  /* ---- "Learn More About Us" — headings centred to match the homepage -----
     Every section on the homepage now leads with a centred mono label, a short
     centred orange rule under it, then a centred headline. This page still had
     the old left-aligned treatment (number beside the heading, hero copy hard
     left, Vision/Mission/Values bar to the left of the title). Same language
     applied here. Headings only — cards, timeline entries and body layout are
     untouched. Scoped to #about-view; no section margins (seam-safe). ------ */

  /* -- page hero -- */
  #about-view .lm-hero-in{text-align:center}
  #about-view .lm-hero .lm-eyebrow{letter-spacing:.34em;margin-bottom:18px}
  #about-view .lm-hero .lm-eyebrow::after{content:"";display:block;width:56px;height:2px;
    background:var(--scale-2);margin:12px auto 0}
  #about-view .lm-hero h1{margin-left:auto;margin-right:auto;max-width:20ch}
  #about-view .lm-hero p{margin-left:auto;margin-right:auto}
  #about-view .lm-facts{justify-content:center}
  #about-view .lm-fact:first-child{padding-left:0}

  /* -- section heads (Our Journey, Board & Management): number becomes the
        centred eyebrow with the rule beneath, headline centred under it -- */
  #about-view .lm-sechead{flex-direction:column;align-items:center;justify-content:center;
    text-align:center;gap:14px}
  #about-view .lm-sechead .lm-num{display:inline-block;font-size:12px;letter-spacing:.34em}
  #about-view .lm-sechead .lm-num::after{content:"";display:block;width:56px;height:2px;
    background:var(--scale);margin:12px auto 0}
  #about-view .lm-sec .lm-h,#about-view .lm-sechead .lm-h{text-align:center;
    margin-left:auto;margin-right:auto}

  /* -- Introduction (already centred) — give its label the same rule -- */
  #about-view #lm-01 .au-eyebrow{letter-spacing:.34em}
  #about-view #lm-01 .au-eyebrow::after{content:"";display:block;width:56px;height:2px;
    background:var(--scale);margin:12px auto 0}

  /* -- Vision / Mission / Values: title centred with its bar beneath -- */
  #about-view .vms-inner{margin-left:auto;margin-right:auto;text-align:center}
  #about-view .vms-head{flex-direction:column-reverse;align-items:center;gap:14px}
  #about-view .vms-copy p{margin-left:auto;margin-right:auto;max-width:62ch}

  @media(max-width:760px){
    #about-view .lm-facts{justify-content:flex-start}
  }


  /* ---- Learn More page refinements (V) --------------------------------------
     · section numbers (02/03/04) removed from the headings
     · Vision/Mission/Values: orange dashes dropped, words centred
     · Company Overview video: cinematic expand-to-fullscreen
     Scoped to #about-view; no section margins (seam-safe). ---------------- */

  /* section numbers gone — heading stands alone, centred */
  #about-view .lm-sechead .lm-num{display:none}
  #about-view .lm-sechead{gap:0}

  /* Vision / Mission / Values — no dashes, words centred */
  #about-view .vms-label .vms-bar,
  #about-view .vms-head .vms-hbar{display:none !important}
  #about-view .vms-label{left:50%;right:auto;bottom:34px;transform:translateX(-50%);gap:0;
    text-align:center;max-width:calc(100% - 28px)}
  /* resting / equal-width panels: read horizontally, fully inside the panel */
  #about-view .vms-panel:not(.is-open) .vms-label{transform:translateX(-50%)}
  /* only genuinely collapsed (narrow) panels use the vertical label, and it is
     centred on the panel so the rotation can never push it out of frame */
  #about-view .vms.is-active .vms-panel:not(.is-open) .vms-label{
    top:50%;bottom:auto;transform:translate(-50%,-50%) rotate(-90deg);transform-origin:center center}
  #about-view .vms-head{gap:0}
  #about-view .vms-head h2{text-align:center;width:100%}

  /* ---- cinematic video ---- */
  #about-view #lm-01 .au-banner{cursor:zoom-in}
  #about-view #lm-01 .au-banner.is-cine{cursor:zoom-out;border-radius:0;box-shadow:none;z-index:9999}
  .au-cine-scrim{position:fixed;inset:0;background:#07080a;opacity:0;z-index:9998;
    pointer-events:none;will-change:opacity}
  .au-cine-scrim.on{pointer-events:auto}
  .au-cine-hint{position:fixed;left:50%;bottom:38px;transform:translateX(-50%);z-index:10000;
    font:600 11px var(--mono,monospace);letter-spacing:.22em;text-transform:uppercase;
    color:rgba(255,255,255,.72);opacity:0;pointer-events:none;white-space:nowrap}
  @media(prefers-reduced-motion:reduce){
    #about-view #lm-01 .au-banner,.au-cine-scrim,.au-cine-hint{transition:none !important}
  }


/* ================= CROSS-BROWSER / RESPONSIVE FOUNDATION =====================
   Design-preserving. Fixes the causes of Mac-vs-Windows drift, not the symptoms.

   ROOT CAUSE 1 — viewport units include the scrollbar.
     Mac uses overlay scrollbars, so 100vw == the content width and the
     full-bleed trick (width:var(--vw,100vw); margin-left:calc(var(--vw,100vw) / -2)) lines up perfectly.
     Windows/Chrome/Edge/Firefox reserve ~15-17px for a classic scrollbar, so
     100vw is WIDER than the content box: every full-bleed block overhangs,
     a horizontal scrollbar appears and the whole page shifts. --sbw is measured
     once by JS (0 on Mac, ~15px on Windows) and every viewport-width dependency
     is corrected by it, so both platforms resolve to the same composition.

   ROOT CAUSE 2 — stale layout measurements.
     GSAP pins and the stacked scroll measure on init. Web fonts and large
     images land later (and later still on Windows), so the numbers go stale.
     Handled in JS below with refreshes on font-ready, load and resize.
   ------------------------------------------------------------------------- */
:root{--sbw:0px;--vw:calc(100vw - var(--sbw))}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
img,svg,video,canvas{max-width:100%}
/* ---- v60: intrinsic-size guard -------------------------------------------
   Every <img decoding="async" loading="lazy"> below now carries width/height attributes so the browser can
   reserve the box before the file arrives — that is what stops the page
   jumping as images load. But `img{max-width:100%}` combined with width/height
   attributes and NO height rule SQUASHES an image the moment it is constrained
   (it keeps the attribute height while the width shrinks). This one low-
   specificity declaration restores the aspect ratio. It is (0,0,1), so every
   class-scoped height rule on the site still wins. */
img{height:auto}

button,input,select,textarea{font-family:inherit}

/* full-bleed blocks: same result on both platforms */
#about-view #lm-04,
#about-view #lm-02 .vms-wrap{width:var(--vw);margin-left:calc(var(--vw) / -2);margin-right:calc(var(--vw) / -2)}
#about-view .tlc-stage{width:var(--vw)}

.nav-dd{max-width:calc(var(--vw) - 32px)}
/* carousel centring padding was half-a-scrollbar out on Windows */
.film-track{padding-left:calc(var(--vw) / 2 - 220px);padding-right:calc(var(--vw) / 2 - 220px)}
@media(max-width:760px){
  .film-track{padding-left:calc(var(--vw) / 2 - 150px);padding-right:calc(var(--vw) / 2 - 150px)}
}

/* nav: never let the pill wrap, and keep the full bar on Windows laptops that
   run 125% scaling (1536 physical -> 1229 CSS px, which used to fall under the
   1280 cutoff and drop the whole centre nav to a hamburger) */
.center-cap{flex-wrap:nowrap}
.center-cap a{white-space:nowrap}
@media(min-width:1181px) and (max-width:1280px){
  .center-cap{display:flex}
  .center-cap a{padding:10px clamp(6px,.62vw,11px);font-size:clamp(10.6px,.85vw,12.2px)}
}

/* short laptops (768 / 864 tall) — trim vertical rhythm, keep the composition */
@media(min-width:1081px) and (max-height:800px){
  .sl-stage .sl-in{padding-top:clamp(64px,9vh,96px);padding-bottom:clamp(48px,7vh,80px)}
}

/* mobile: address-bar-safe hero heights (the desktop stack is untouched) */
@media(max-width:760px){
  @supports(height:100svh){
    .lm-hero,.sl-stage{min-height:100svh}
  }
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}



/* ============================================================
   PERSPECTIVE ROTATE MENU
   Final block. Declares no section margins — seam-continuity safe.

   THREE ADAPTATIONS to this codebase, each with a reason:
   · the nav stays position:fixed at rest and only becomes absolute
     (pinned at the frozen scroll offset) WHILE open. Switching it to
     sticky as the pattern suggests would put it back in flow and push
     every page down by its height, which the 100vh stacked sections
     and the seam maths cannot absorb.
   · the shell uses overflow:clip, not hidden, while open. hidden makes
     a scroll container and would break every position:sticky section
     (the whole stacked architecture and the equipment carousel).
   · no pinType change: this site has zero ScrollTrigger pins, so the
     pin problem the pattern warns about does not exist here.
   ============================================================ */
:root{
  --rot-dur:.82s;
  --rot-ease:cubic-bezier(.16,1,.3,1);
  --rot-angle:-34deg;
  --rot-depth:-420px;   /* deeper than the reference values: at -320px the card
                           is wide enough to sit under the menu at every common
                           desktop width (checked 1280-2560) */
  --rot-shift:-2%;
  --rot-persp:1400px;
}

#rot-shell{
  position:relative;z-index:1;background:#fff;
  transform-origin:100% 50%;
  transition:transform var(--rot-dur) var(--rot-ease),
             border-radius var(--rot-dur) var(--rot-ease),
             box-shadow var(--rot-dur) var(--rot-ease);
}
#rot-inner{transition:transform 0s}
/* ---- open state -------------------------------------------------------
   GEOMETRY FIX: #rot-shell wraps the entire document, so rotating it about
   "50%" pivots around the middle of a page that is many screens tall — the
   visible part swings clean out of frame. While open the shell becomes a
   VIEWPORT-SIZED card (position:fixed; inset:0) and #rot-inner is shifted up
   by the frozen scroll offset so the same content stays on screen. Now the
   pivot really is the right edge of the screen, and perspective 1400px with
   translateZ(-320px) scales it to ~0.81 — the inset card in the reference. */
body.rot-open{
  height:100vh;                      /* viewport-sized box, so perspective-origin
                                        resolves against the screen, not the page */
  overflow:hidden;
  padding-right:var(--sbw,0px);
  perspective:var(--rot-persp);
  perspective-origin:100% 50%;
}
html.rot-lock{overflow:hidden}

body.rot-open #rot-shell{
  position:fixed;inset:0;            /* the card */
  transform-origin:100% 50%;
  transform:translateZ(var(--rot-depth)) rotateY(var(--rot-angle)) translateX(var(--rot-shift));
  border-radius:18px;
  overflow:clip;                     /* clip, NOT hidden — keeps sticky alive */
  box-shadow:-44px 0 96px rgba(0,0,0,.46);
  cursor:pointer;
  will-change:transform;
}
/* hold the same content on screen that was there before the card formed */
body.rot-open #rot-inner{transform:translateY(calc(-1 * var(--rot-scroll,0px)))}
/* the fixed navbar is inside the shifted inner, so pin it at the frozen offset */
body.rot-open .nav{position:absolute;top:var(--rot-scroll,0px)}

/* the swing-back keeps the card geometry until it finishes, so the shell never
   pivots against the full-document box mid-transition */
body.rot-closing #rot-shell{position:fixed;inset:0;overflow:clip;border-radius:18px;
  transform-origin:100% 50%}
body.rot-closing #rot-inner{transform:translateY(calc(-1 * var(--rot-scroll,0px)))}
body.rot-closing .nav{position:absolute;top:var(--rot-scroll,0px)}
/* other fixed widgets have their own offsets and would jump — park them */
body.rot-open #lmnav,
body.rot-open .eqc-glowctl{visibility:hidden}
/* the legacy overlay menu is replaced by this one */
body.rot-open .menu{display:none}

/* ---- backdrop ------------------------------------------------------------
   The warm light used to sit at 88%/6% — directly BEHIND the rotated card —
   and a second at 4%/92%, below the list. Both were invisible where you
   actually look, so the field read as flat black. The key light now sits
   behind the MENU COLUMN, the base is the brand warm-black rather than pure
   black, a vignette gives the field edges, and a fine grain stops a large
   dark area reading as a hole. */
.rot-bg{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  /* v127 FIX — see the matching note in assets/responsive.css. A radial-gradient
     SIZE cannot mix % and px inside min(), so that layer was invalid and the
     whole `background` shorthand (base #0f0e0c included) was dropped, leaving
     white menu labels on the white page. Size is now plain percentages and the
     base colour lives in its own longhand. */
  background-color:#0f0e0c;
  background-image:
    radial-gradient(120% 100% at 50% 45%,transparent 40%,rgba(0,0,0,.5) 100%),
    radial-gradient(62.5% 66% at min(24%,300px) 36%,rgba(233,85,10,.20),transparent 62%),
    radial-gradient(60% 55% at 82% 88%,rgba(168,96,48,.13),transparent 64%);
  opacity:0;visibility:hidden;
  transition:opacity .55s var(--rot-ease),visibility 0s .55s;
}
/* grain: greyscale fractal noise, tiled, barely there */
.rot-bg::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='170' height='170' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  background-size:170px 170px;
  opacity:.05;
}
body.rot-open .rot-bg{opacity:1;visibility:visible;transition:opacity .5s var(--rot-ease),visibility 0s 0s}

.rot-menu{
  position:fixed;inset:0;z-index:2;pointer-events:none;
  visibility:hidden;transition:visibility 0s var(--rot-dur);
}
.rot-menu.is-open{visibility:visible;transition:visibility 0s 0s}
.rot-menu.is-open .rot-panel,.rot-menu.is-open .rot-x{pointer-events:auto}

.rot-panel{
  position:absolute;left:0;top:0;bottom:0;width:min(32%,400px);
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(80px,12vh,120px) clamp(20px,2.6vw,44px) 40px;
}
.rot-x{
  position:absolute;top:18px;left:clamp(20px,2.6vw,44px);
  width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(255,255,255,.14);background:none;color:#fff;
  font-size:17px;line-height:1;cursor:pointer;display:grid;place-content:center;
  opacity:0;transition:opacity .4s var(--rot-ease) .3s,background .25s var(--rot-ease),
    border-color .25s var(--rot-ease),transform .3s var(--rot-ease);
}
.rot-menu.is-open .rot-x{opacity:1}
.rot-x:hover{background:#E9550A;border-color:#E9550A;transform:rotate(90deg)}

/* the panel takes focus silently so no ring is painted on open */
.rot-panel:focus{outline:none}

/* ---- the list ----------------------------------------------------------
   Reworked for rhythm rather than size (the panel width caps the type):
   hairline rules give the eight items a measured beat, the numbers recede
   into a proper mono column, the labels sit tighter and darker at rest so
   the hovered one genuinely stands out, and an orange marker rises at the
   left edge instead of turning the whole label orange. */
.rot-list{list-style:none;margin:0;padding:0;border-top:1px solid rgba(255,255,255,.08)}
.rot-row{border-bottom:1px solid rgba(255,255,255,.08);
  opacity:0;transform:translateX(-26px);
  transition:opacity .5s var(--rot-ease),transform .6s var(--rot-ease)}
.rot-menu.is-open .rot-row{opacity:1;transform:none;transition-delay:calc(.05s * var(--i) + .22s)}
.rot-row a{position:relative;display:flex;align-items:baseline;gap:12px;
  padding:clamp(10px,1.6vh,18px) 0;text-decoration:none}
.rot-row a::before{content:"";position:absolute;left:-14px;top:16%;bottom:16%;width:2px;
  border-radius:2px;background:#E9550A;transform:scaleY(0);transform-origin:50% 100%;
  transition:transform .34s var(--rot-ease)}
.rot-row a:hover::before,.rot-row a:focus-visible::before{transform:scaleY(1)}
.rot-row span{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:9.5px;letter-spacing:.2em;
  color:rgba(255,255,255,.32);width:20px;flex:none;font-variant-numeric:tabular-nums;
  transition:color .25s var(--rot-ease)}
.rot-row b{font-family:'Bricolage Grotesque',Arial,sans-serif;
  font-size:clamp(16px,2.6vw,31px);line-height:1.04;letter-spacing:-.035em;font-weight:600;
  color:rgba(255,255,255,.6);white-space:nowrap;
  transition:color .25s var(--rot-ease),transform .35s var(--rot-ease)}
.rot-row a:hover b,.rot-row a:focus-visible b{color:#fff;transform:translateX(5px)}
.rot-row a:hover span,.rot-row a:focus-visible span{color:#E9550A}

.rot-x:focus-visible,.rot-row a:focus-visible{outline:2px solid #E9550A;outline-offset:4px;border-radius:4px}

@media(max-width:900px){
  :root{--rot-angle:-30deg;--rot-depth:-520px;--rot-shift:26%;--rot-persp:1400px}
  /* no room for both on a phone, so the card slides right like a drawer */
  .rot-panel{width:54%}
  .rot-row b{font-size:clamp(20px,5.4vw,28px)}
}
@media(max-width:560px){
  :root{--rot-angle:-26deg;--rot-depth:-560px;--rot-shift:30%}
  /* phone: a wider panel with tighter gutters so the longest label still fits */
  .rot-panel{width:60%;padding-left:16px;padding-right:14px}
  .rot-x{left:22px}
}
body.rot-open.rot-flat{perspective:none}
body.rot-open.rot-flat #rot-shell{transform:none;border-radius:0;box-shadow:none;opacity:.28;
  transition:opacity .45s var(--rot-ease)}
@media(prefers-reduced-motion:reduce){
  #rot-shell,.rot-row,.rot-x,.rot-bg{transition-duration:.01ms!important}
  body.rot-open #rot-shell{transform:none;opacity:.25;box-shadow:none}
}


/* About: land the heading clear of the fixed navbar */
#about{scroll-margin-top:0px}
#about.ab{padding-top:clamp(96px,12vh,120px);padding-bottom:clamp(40px,6vh,72px)}
#products{scroll-margin-top:34px}
/* Industries: drop the "INDUSTRIES · 01 / 04" tag and the bottom numerals */
.ip-tag{display:none}
.ip-nav-item .nn{display:none}
/* Products: drop the 01-05 numerals above the cards */
.film-num{display:none}

/* v43: about-view idle nav links were still white on the white cap */
#about-view .center-cap a{color:var(--ink);opacity:.78}
/* v43: tighter blob morph so it does not bridge two menu items */
.center-cap .blob,#about-view .center-cap .blob{transition:transform .34s cubic-bezier(.3,.7,.2,1),width .34s cubic-bezier(.3,.7,.2,1),opacity .3s ease}
/* v43: the page card glides between sections while previewing from the menu */
body.rot-open.rot-preview #rot-inner{transition:transform .65s cubic-bezier(.22,.9,.28,1)}
/* v43: the pinned nav rides the same variable as the card — give it the
   same glide so it moves WITH the preview instead of jumping ahead */
body.rot-open.rot-preview .nav{transition:top .65s cubic-bezier(.22,.9,.28,1)}



/* ==========================================================================
   v79 — phone-only About view, third pass per V (7 Aug 2026).
   1) Vision / Mission / Values: vertical COLLAPSED accordion. Each is a
      92px titled band over its photograph; tapping expands that one to
      60svh (fixed heights on both ends so the height itself animates),
      the copy unfolds via a 0fr->1fr row, the title wears a +/x. The
      hover module is gated off at phone widths inside its own closure —
      script#about-mobile-v79 is the only phone owner of the state.
   2) Leadership accordion, corrected and smoothed: the flip machinery's
      `.lf.open .lf-front{visibility:hidden}` was still firing on phones —
      that was the white void where the photo should be. The front is now
      pinned visible, and the bio reveal rides grid-template-rows
      auto 0fr -> auto 1fr, a true height animation instead of max-height.
   ========================================================================== */
@media (max-width:760px){
  /* ---- 1 · VMV collapsed accordion ---- */
  #about-view .vms{gap:12px!important;padding:12px!important}
  #about-view .vms .vms-panel,
  #about-view .vms.is-active .vms-panel,
  #about-view .vms.is-active .vms-panel.is-open{
    flex:none!important;height:150px!important;min-height:150px!important;
    cursor:pointer;-webkit-tap-highlight-color:transparent;
    transition:height .6s cubic-bezier(.3,1,.36,1)!important;
  }
  #about-view .vms .vms-panel.is-open,
  #about-view .vms.is-active .vms-panel.is-open{height:60svh!important;min-height:420px!important}
  #about-view .vms-label{opacity:0!important}
  #about-view .vms-content{position:absolute!important;inset:0!important;opacity:1!important;
    display:flex!important;align-items:center!important;justify-content:center!important;
    padding:16px 18px!important;pointer-events:none}
  #about-view .vms-inner{text-align:center;margin:0 auto}
  #about-view .vms-head{margin-bottom:0;transition:margin-bottom .45s ease}
  #about-view .vms .vms-panel.is-open .vms-head{margin-bottom:12px}
  #about-view .vms-inner h2{font-size:22px;display:block;text-align:center;transition:font-size .45s ease}
  #about-view .vms .vms-panel.is-open .vms-inner h2{font-size:26px}
  /* max-height, not a 0fr grid: the Values panel carries TWO paragraphs, and
     0fr only collapses the first implicit row — the second stayed visible
     and shoved the title out of the band. One collapsed box holds them all. */
  #about-view .vms-copy{display:block;max-height:0;opacity:0;overflow:hidden;
    transition:max-height .6s cubic-bezier(.3,1,.36,1),opacity .45s ease}
  #about-view .vms .vms-panel.is-open .vms-copy{max-height:46svh;opacity:1;transition-delay:.06s}
  #about-view .vms-copy p{font-size:13.5px;line-height:1.62;
    opacity:.96!important;transform:none!important;margin:0 auto}
  #about-view .vms-copy p+p{margin-top:10px}
  #about-view .vms .vms-panel.is-open .vms-scrim{background:linear-gradient(180deg,rgba(15,16,18,.2) 0%,rgba(15,16,18,.5) 44%,rgba(15,16,18,.86) 100%)}

  /* ---- 2 · Leadership: one per row, photo stays, bio unfolds below ---- */
  #about-view .lf-grid{grid-template-columns:1fr!important;gap:16px!important}
  #about-view .lf{perspective:none!important;scroll-margin-top:96px}
  #about-view .lf-inner{aspect-ratio:auto!important;transform:none!important;
    transform-style:flat!important;-webkit-transform-style:flat!important;
    display:grid!important;grid-template-rows:auto 0fr;
    transition:grid-template-rows .6s cubic-bezier(.3,1,.36,1)!important}
  #about-view .lf.open .lf-inner{grid-template-rows:auto 1fr}
  #about-view .lf:hover .lf-inner,
  #about-view .lf:focus-within .lf-inner,
  #about-view .lf.open .lf-inner{transform:none!important}
  #about-view .lf-face{position:relative!important;inset:auto!important;
    backface-visibility:visible!important;-webkit-backface-visibility:visible!important}
  /* the flip's front-hiding rule must never fire on a phone */
  #about-view .lf:hover .lf-front,
  #about-view .lf:focus-within .lf-front,
  #about-view .lf.open .lf-front{visibility:visible!important;opacity:1!important;transition:none!important}
  #about-view .lf-front{aspect-ratio:3/3.6;border-radius:18px}
  #about-view .lf-meta{padding:16px 60px 16px 16px}
  #about-view .lf-meta .nm{font-size:17px;line-height:1.18}
  #about-view .lf-meta .rl{font-size:9px;margin-top:6px}
  #about-view .lf-meta::after{content:"+";position:absolute;right:14px;bottom:16px;
    width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.94);
    color:#15181d;font:400 20px/34px var(--disp,system-ui);text-align:center;
    transition:transform .35s ease;box-shadow:0 6px 16px -8px rgba(8,10,14,.5)}
  #about-view .lf.open .lf-meta::after{transform:rotate(45deg)}
  #about-view .lf-back{position:relative!important;transform:none!important;
    visibility:visible!important;opacity:1!important;
    min-height:0;overflow:hidden;max-height:none!important;
    padding:0 16px;margin-top:0;border-radius:16px;
    transition:padding .4s ease,margin-top .4s ease}
  #about-view .lf.open .lf-back{padding:18px 16px;margin-top:10px}
  #about-view .lf-back::before{border-radius:16px 16px 0 0}
  #about-view .lf-back .nm{font-size:16px}
  #about-view .lf-back .rl{font-size:8.5px}
  #about-view .lf-bio{font-size:13px!important;line-height:1.62!important;
    max-height:none!important;overflow:visible!important;flex:none!important}
  @media (prefers-reduced-motion:reduce){
    #about-view .vms .vms-panel,#about-view .vms-copy,#about-view .lf-inner,#about-view .lf-back{transition:none!important}
  }
}