:root{font-family:Inter,Arial,sans-serif;color:#17304a;background:#f4f6f8;font-synthesis:none}*{box-sizing:border-box}body{margin:0}header{background:white;padding:24px max(6vw,20px);display:flex;align-items:center;gap:28px;flex-wrap:wrap;border-bottom:1px solid #e2e7ec}header img{width:170px;height:72px;object-fit:contain}header span{font-size:13px;color:#607083}form{display:grid;gap:14px}#search{display:flex;margin-left:auto;flex:1;max-width:520px}input,select,textarea{font:inherit;border:1px solid #ced7e1;border-radius:10px;padding:13px;background:#fff;color:#17304a;width:100%}textarea{min-height:160px}button{font:inherit;cursor:pointer;border:0;background:#16314d;color:white;border-radius:10px;padding:12px 18px;line-height:1.4}button:hover{background:#285173}button:disabled{opacity:.5;cursor:wait}button.secondary{background:#e7edf3;color:#17304a}nav{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;padding:16px}nav button{background:transparent;color:#17304a}nav button.active{background:#17304a;color:white}main{max-width:1100px;margin:auto;min-height:55vh;padding:20px 24px 50px}h1{font-size:clamp(28px,5vw,48px);letter-spacing:-1px;line-height:1.13;margin:20px 0}h2{font-size:23px}h3{font-size:17px;line-height:1.4}p{line-height:1.8;color:#637184}.hero{padding:40px 0;max-width:750px}.eyebrow{font-size:12px;color:#bd5229;text-transform:uppercase;letter-spacing:2px}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(235px,1fr));gap:20px;margin-top:24px}.card,.panel{background:white;border:1px solid #e1e7ed;border-radius:18px;padding:22px}.panel{max-width:660px;margin:20px 0}.card img{width:100%;height:170px;object-fit:contain}.code{color:#c65327;font-weight:700}.muted{font-size:13px;color:#68788a}.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.stack{display:grid;gap:12px}.legal{white-space:pre-wrap;line-height:1.7}.filters{max-width:420px}label{display:grid;gap:7px;font-size:14px}label.check{display:flex;align-items:flex-start;line-height:1.6}input[type=checkbox]{width:auto;margin-top:5px}footer{text-align:center;font-size:11px;line-height:1.8;padding:30px;color:#7a8796}#status{max-width:1052px;margin:0 auto;padding:0 16px;color:#a43727}#status:not(:empty){background:#ffebe6;padding:15px;border-radius:10px}dialog{border:0;border-radius:20px;max-width:760px;width:calc(100% - 32px);padding:24px;color:#17304a}dialog::backdrop{background:#12263c99}dialog img{width:100%;max-height:320px;object-fit:contain}dialog #close{float:right}.admin-list{max-height:400px;overflow:auto;border:1px solid #dce3e9;border-radius:10px;padding:12px}.notice{background:#fff0d5;border-radius:10px;padding:12px;line-height:1.6}@media(max-width:650px){header{padding:16px;gap:12px}header span{display:none}header img{width:145px;height:55px}#search{flex-basis:100%;max-width:none}nav{gap:2px;padding:8px}nav button{font-size:12px;padding:10px}main{padding:12px 16px 35px}.hero{padding:20px 0}.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.card{padding:14px}.card img{height:130px}.card button{width:100%;font-size:12px;padding:10px}.card h3{font-size:14px}.panel{padding:20px}}

.brand-signature{max-width:1052px;margin:16px auto;padding:18px 24px;display:flex;align-items:center;gap:22px;background:#fff;border:1px solid #e0e6ec;border-left:4px solid #c52b32;border-radius:16px}.brand-signature img{width:92px;height:76px;object-fit:contain;flex-shrink:0}.brand-signature strong{display:block;font-size:17px;line-height:1.4;color:#17304a}.brand-signature span{display:block;font-size:12px;line-height:1.6;color:#637184;margin-top:5px}@media(max-width:650px){.brand-signature{margin:12px 16px;padding:14px;gap:14px}.brand-signature img{width:76px;height:64px}.brand-signature strong{font-size:14px}.brand-signature span{font-size:11px}}
body{position:relative;isolation:isolate;background:#f4f6f8}body::before{content:"";position:fixed;inset:180px 0 0;background:url('/brand/logo.png') center 42% / clamp(240px,42vw,460px) auto no-repeat;opacity:.12;pointer-events:none;z-index:-1}@media(max-width:650px){body::before{inset:230px 0 0;background-size:280px;opacity:.14}}

/* Corporate header: cool blue background, original logo on a white plaque. */
header{background:#e3ecf5;border-bottom:3px solid #1b3558;box-shadow:0 3px 16px #17304a0c}
header .logo-sign img{width:212px;height:132px;padding:12px 18px;background:#fff;border:1px solid #cfdae6;border-radius:14px;box-shadow:0 4px 14px #17304a12}
header span{color:#334c69}
@media(max-width:650px){header{justify-content:center;padding:18px 16px;gap:16px}header .logo-sign img{width:190px;height:126px;padding:10px 18px}#search{margin-left:0}}

/* One-shot dimensional sign, preserving the official artwork. */
.logo-sign{display:block;flex-shrink:0;padding:0;background:transparent!important;border:0;border-radius:16px;perspective:850px;cursor:pointer;line-height:0;touch-action:manipulation}
.logo-sign:focus-visible{outline:3px solid #c65327;outline-offset:6px}
.logo-plaque{display:block;position:relative;transform-style:preserve-3d;border-radius:14px;box-shadow:3px 5px 0 #a5b6c8,6px 12px 20px #17304a25;transition:box-shadow .2s}
.logo-sign:hover .logo-plaque{box-shadow:4px 6px 0 #a5b6c8,8px 15px 24px #17304a30}
.logo-sign img{display:block;backface-visibility:hidden;position:relative;z-index:1}
.logo-plaque::before{content:"";position:absolute;inset:0;background:#edf2f7;border:1px solid #cfdae6;border-radius:14px;transform:rotateY(180deg) translateZ(2px);backface-visibility:hidden}
.logo-plaque::after{content:"";position:absolute;inset:0;border-radius:14px;z-index:2;pointer-events:none;background:linear-gradient(110deg,transparent 35%,#ffffff00 40%,#ffffffde 49%,#ffffff20 57%,transparent 65%);background-size:300% 100%;background-position:100% 0;opacity:0;backface-visibility:hidden;transform:translateZ(1px)}
.logo-sign.is-animating .logo-plaque{animation:brand-turn 2.6s cubic-bezier(.45,0,.25,1) both}
.logo-sign.is-animating .logo-plaque::after{animation:brand-shine 2.6s ease both}
@keyframes brand-turn{0%{transform:rotateY(0) rotateX(0)}18%{transform:rotateY(-18deg) rotateX(5deg)}72%{transform:rotateY(370deg) rotateX(-3deg)}100%{transform:rotateY(360deg) rotateX(0)}}
@keyframes brand-shine{0%,67%{opacity:0;background-position:100% 0}76%{opacity:.9}96%{opacity:0;background-position:0% 0}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.logo-sign.is-animating .logo-plaque,.logo-sign.is-animating .logo-plaque::after{animation:none}.logo-plaque{transition:none}}

/* Keep the white mounting plaque still; animate only transparent logo artwork. */
.logo-plaque{background:#fff;border:1px solid #cfdae6;overflow:hidden;perspective:850px}
.logo-plaque::before{display:none}
.logo-sign.is-animating .logo-plaque{animation:none}
header .logo-sign img,.identity .logo-sign img{background:transparent;border:0;box-shadow:none;border-radius:0;backface-visibility:visible;transform-origin:center}
.logo-sign.is-animating img{animation:brand-turn 2.6s cubic-bezier(.45,0,.25,1) both}
@media(prefers-reduced-motion:reduce){.logo-sign.is-animating img{animation:none}}

/* Float the original transparent artwork directly on the corporate header. */
.logo-plaque,.logo-sign:hover .logo-plaque{background:transparent;border:0;border-radius:0;box-shadow:none}
header .logo-sign img,.identity .logo-sign img{filter:drop-shadow(0 4px 3px #17304a26)}
.logo-plaque::after{border-radius:0}

/* Brushed-silver palette, with no separate logo plaque. */
header{background:linear-gradient(115deg,#bfc3c8 0%,#e2e4e7 28%,#f0f1f2 49%,#d0d3d7 74%,#b9bec4 100%);border-bottom:2px solid #949da8;box-shadow:0 4px 18px #202b3912}
header span,.identity span{color:#465363}
.logo-plaque,.logo-sign:hover .logo-plaque{background:transparent;border:0;box-shadow:none}

/* Wine-red header with a soft illuminated area beneath the original logo. */
header{background:radial-gradient(ellipse 350px 230px at 140px 45%,#dec1c8 0%,#bc8796 36%,#8b3d55 73%,#641c35 100%);border-bottom:2px solid #50162b;box-shadow:0 4px 18px #48112420}
header span,.identity strong,.identity span{color:#fff1f3}
header .demo-chip{background:#ffffff20;color:#fff1f3}
header .logo-sign img,.identity .logo-sign img{filter:drop-shadow(0 3px 3px #32101b25)}
@media(max-width:650px){header{background:radial-gradient(ellipse 270px 180px at 50% 60px,#dec1c8 0%,#bc8796 36%,#8b3d55 73%,#641c35 100%)}}

/* Return to silver and add a photographic production watermark. */
header{background:linear-gradient(115deg,#bfc3c8 0%,#e2e4e7 28%,#f0f1f2 49%,#d0d3d7 74%,#b9bec4 100%);border-bottom:2px solid #949da8;box-shadow:0 4px 18px #202b3912}
header span,.identity strong,.identity span{color:#465363}header .demo-chip{background:#eef2f7;color:#53647b}
.production-scene{position:relative;max-width:1052px;height:200px;margin:0 auto 12px;border-radius:18px;overflow:hidden;background:linear-gradient(110deg,#eef0f2aa,#e1e5e980);isolation:isolate}
.production-scene>span{position:absolute;left:22px;bottom:14px;font-size:11px;letter-spacing:1.4px;color:#536272;text-transform:uppercase}
.extrusion-watermark{position:absolute;inset:-45px 0 -30px;max-width:640px;margin:auto;opacity:.3;pointer-events:none;filter:saturate(.45)}
.extrusion-watermark img{position:absolute;width:100%;height:100%;object-fit:contain}
.extrusion-machine{clip-path:inset(0 20.9% 0 0)}
.extrusion-profile{animation:profile-output 7s linear infinite}
@keyframes profile-output{0%{clip-path:inset(49% 20.9% 45% 78.8%);opacity:1}92%{clip-path:inset(49% 1% 45% 78.8%);opacity:1}100%{clip-path:inset(49% 1% 45% 78.8%);opacity:0}}
@media(max-width:650px){header{background:linear-gradient(115deg,#bfc3c8,#f0f1f2 49%,#b9bec4)}.production-scene{margin:0 16px 12px;height:145px}.extrusion-watermark{inset:-25px 0 -10px}.production-scene>span{font-size:9px;left:14px;bottom:10px;letter-spacing:.8px}}
@media(prefers-reduced-motion:reduce){.extrusion-profile{animation:none;clip-path:inset(49% 1% 45% 78.8%)}}
html.motion-paused .extrusion-profile{animation-play-state:paused}

/* Keep image and clipping coordinates in the same 3:2 space. */
.extrusion-watermark{inset:auto;left:50%;top:47%;width:min(100%,470px);height:auto;aspect-ratio:3 / 2;max-width:none;transform:translate(-50%,-50%);opacity:.38}
@media(max-width:650px){.extrusion-watermark{inset:auto;left:50%;top:46%;width:100%;max-width:360px}}

/* Modern machine: align the moving profile with this die outlet. */
.production-scene{height:260px}
.extrusion-watermark{width:min(100%,370px);top:47%;opacity:.4}
.extrusion-machine{clip-path:polygon(0 0,100% 0,100% 44.5%,83% 44.5%,83% 53%,100% 53%,100% 100%,0 100%)}
@keyframes profile-output{0%{clip-path:inset(44.5% 17% 47% 83%);opacity:1}92%{clip-path:inset(44.5% 1% 47% 83%);opacity:1}100%{clip-path:inset(44.5% 1% 47% 83%);opacity:0}}
@media(max-width:650px){.production-scene{height:220px}.extrusion-watermark{width:min(100%,320px);top:47%}}
@media(prefers-reduced-motion:reduce){.extrusion-profile{clip-path:inset(44.5% 1% 47% 83%)}}

/* Consolidated layout: identity, search, then content. */
header{padding:18px 24px;background:linear-gradient(115deg,#c9cdd2,#eff0f2 48%,#c8cdd3);border-bottom:1px solid #b8c0ca;box-shadow:none}
.header-inner{max-width:1052px;margin:auto;width:100%;display:flex;align-items:center;justify-content:space-between;gap:48px}
.corporate-identity{display:flex;align-items:center;gap:20px;flex-shrink:0}
header .logo-sign img,.identity .logo-sign img{width:138px;height:110px;padding:5px;filter:drop-shadow(0 3px 3px #17304a16)}
.corporate-caption{display:block;font-size:15px;font-weight:650;color:#25384d;line-height:1.4}
.corporate-caption small{display:block;font-size:11px;font-weight:400;color:#566475;margin-top:5px}
#search{margin:0;max-width:430px;gap:8px;min-width:0}#search input{min-width:0;background:#ffffffed}#search button{padding:12px 18px}
nav{max-width:1052px;margin:auto;justify-content:flex-start;gap:10px;padding:14px 0;border-bottom:1px solid #dce2e9}
nav button{font-size:13px;border-radius:9px;padding:10px 15px}
.brand-signature{max-width:1052px;margin:0 auto;padding:12px 0;gap:14px;background:transparent;border:0;border-radius:0;border-bottom:1px solid #dce2e9}
.brand-signature img{width:58px;height:48px}.brand-signature strong{font-size:12px;font-weight:650;letter-spacing:.3px}.brand-signature span{font-size:10px;margin-top:3px}
main{padding-top:30px}body::before{opacity:.065;background-position:center 80%}
.hero.has-production{max-width:none;display:grid;grid-template-columns:1.15fr 1fr;align-items:center;gap:28px;padding:32px;border:1px solid #dce2e6;border-radius:20px;background:linear-gradient(120deg,#eef1f4,#e3e8ec);color:#17304a;margin:0 0 28px}
.hero-copy{min-width:0;padding:0}.hero-copy>div{padding:0}.hero-copy h1{font-size:clamp(30px,3.8vw,44px);line-height:1.12;margin:12px 0 20px;color:#17304a;max-width:560px}.hero-copy p{font-size:14px;line-height:1.8;color:#526477}
.hero .production-scene{margin:0;background:transparent;border-radius:0;height:280px;width:100%;min-width:0;align-self:center}
.hero .production-scene>span{left:0;right:0;text-align:center;font-size:9px;bottom:0;letter-spacing:.8px}
.hero .extrusion-watermark{width:100%;max-width:400px;top:46%;opacity:.44}
.card{box-shadow:0 3px 14px #17304a04}.card h3{margin:12px 0}.card p{line-height:1.65}.card button{min-height:44px}.card img{height:185px}
.production-scene[hidden]{display:none!important}
@media(max-width:900px){.header-inner{gap:24px}.corporate-caption{display:none}nav,.brand-signature{margin-left:24px;margin-right:24px}.hero.has-production{gap:12px;padding:26px}.hero .production-scene{height:240px}}
@media(max-width:650px){header{padding:14px 16px;display:block}.header-inner{display:grid;gap:14px}.corporate-identity{justify-content:flex-start;gap:16px}header .logo-sign img,.identity .logo-sign img{width:100px;height:78px;padding:0}.corporate-caption{display:block!important;font-size:13px}.corporate-caption small{font-size:10px}header .logo-plaque{display:block}#search{width:100%;max-width:none;flex-basis:auto}#search input{font-size:13px;padding:12px}#search button{font-size:12px;padding:12px 14px}nav{margin:0;padding:10px 16px;flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;gap:5px}nav button{flex-shrink:0;font-size:12px;padding:10px 12px;min-height:42px}.brand-signature{margin:0 16px;padding:10px 0;gap:12px}.brand-signature img{width:46px;height:38px}.brand-signature strong{font-size:11px}.brand-signature span{font-size:9px;line-height:1.5}main{padding-top:20px}.hero.has-production{grid-template-columns:1fr;padding:22px 20px;gap:0;margin-bottom:20px}.hero-copy h1{font-size:32px}.hero-copy p{font-size:13px}.hero .production-scene{height:200px;margin-top:4px}.hero .extrusion-watermark{max-width:300px;opacity:.35}.grid{gap:12px}.card{padding:14px}.card img{height:135px}.card h3{font-size:14px}.muted{font-size:12px}}

.hero.has-production .extrusion-watermark{padding:0}.hero.has-production .extrusion-watermark img{width:100%;height:100%;min-height:0;object-fit:contain}

/* Original family covers, displayed whole at their portrait proportion. */
.family-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:20px 0 28px}
.family-tile{display:flex;align-items:center;text-align:left;gap:22px;padding:16px;min-height:162px;border:1px solid #dce3eb;border-radius:16px;background:#fff;color:#17304a;box-shadow:0 3px 14px #17304a04;transition:border-color .18s,box-shadow .18s}
.family-tile:hover{background:#fff;border-color:#c65327;box-shadow:0 6px 20px #17304a0c}
.family-tile:focus-visible{outline:3px solid #c65327;outline-offset:3px}
.family-tile img{display:block;width:98px;height:127px;object-fit:contain;background:transparent;border-radius:5px;flex-shrink:0;box-shadow:0 3px 10px #17304a1a}
.family-tile span{flex:1;min-width:0}.family-tile strong{display:block;font-size:16px;line-height:1.4}.family-tile small{display:block;font-size:12px;font-weight:400;line-height:1.5;color:#718093;margin-top:8px}.family-tile b{color:#c65327;font-size:25px}
@media(max-width:650px){.family-grid{grid-template-columns:1fr;gap:12px}.family-tile{padding:14px;gap:18px;min-height:146px}.family-tile img{width:86px;height:111px}.family-tile strong{font-size:15px}.family-tile small{font-size:11px}}

/* Silver product stage; the original technical sheet remains in the detail view. */
.product-card{--family-accent:#c65327;overflow:hidden;display:flex;flex-direction:column;padding:18px;background:#fff}
.product-card .product-visual{position:relative;display:flex;align-items:center;justify-content:center;height:210px;min-height:210px;width:100%;margin:0 0 18px;border-radius:12px;overflow:hidden;background:radial-gradient(ellipse at 45% 30%,#f7f8f9,#e2e5e9 70%,#d5dae0);border:1px solid #d8dfe6;border-top:3px solid var(--family-accent)}
.product-crop{position:relative;overflow:hidden;flex-shrink:0;isolation:isolate;mix-blend-mode:multiply}
.product-card .product-visual img{display:block;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
.product-card .product-visual>img{width:88%;height:175px;object-fit:contain;mix-blend-mode:multiply}
.product-card>div:last-child{flex:1;display:flex;flex-direction:column}.product-card button{margin-top:auto;min-height:44px}.product-card .code{color:var(--family-accent)}
.product-card[data-family-color="2"]{--family-accent:#22609b}.product-card[data-family-color="3"]{--family-accent:#b98b27}.product-card[data-family-color="4"]{--family-accent:#4e8056}.product-card[data-family-color="5"]{--family-accent:#526b9d}.product-card[data-family-color="6"]{--family-accent:#927135}.product-card[data-family-color="7"]{--family-accent:#66862f}.product-card[data-family-color="8"]{--family-accent:#a68126}.product-card[data-family-color="9"]{--family-accent:#5f727d}.product-card[data-family-color="10"]{--family-accent:#af632e}.product-card[data-family-color="11"]{--family-accent:#667b89}.product-card[data-family-color="12"]{--family-accent:#327e91}.product-card[data-family-color="13"]{--family-accent:#85577d}
@media(max-width:650px){.product-card{padding:13px}.product-card .product-visual{height:165px;min-height:165px;margin-bottom:14px}.product-card .product-crop{max-width:88%}.product-card .product-visual>img{height:140px}.product-card>div:last-child{display:flex}.product-card h3{margin-top:10px}}

.preview-access{display:block;margin:12px 0;background:#994623}.preview-access:hover{background:#76331a}