/* Second local version: shared visual system, replaceable background lists. */
/* Animate only the small heading area; native navigation has no artificial delay
   or full-page snapshots of the blurred header and background photographs. */
@keyframes nav-enter{from{opacity:.65;transform:translate3d(0,5px,0)}to{opacity:1;transform:none}}
.hero-copy,.page-intro{animation:nav-enter .18s ease-out}
.site-header{background:#112637c9;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.home-page .site-header{margin-bottom:-95px;background:#10253280}.home-page .hero-grid{padding-top:180px}
.site-header nav>a:after{width:100%;transform:scaleX(0);transform-origin:left;transition:transform .28s ease}.site-header nav>a:hover:after,.site-header nav>a:focus-visible:after,.site-header nav>a[aria-current]:after{transform:scaleX(1)}
.language-menu{position:relative;border:0;padding:0;font-size:12px}.language-menu summary{padding:12px 0;color:white;list-style:none}.language-menu summary::-webkit-details-marker{display:none}.language-options{position:absolute;right:0;top:100%;min-width:245px;padding:10px;background:#142a3bf2;border:1px solid #ffffff33;box-shadow:0 12px 30px #0003;backdrop-filter:blur(18px)}.site-header .language-options a,.language-options>span{display:block;padding:9px 12px!important;font-size:12px;border:0!important;white-space:normal}.language-options>span{color:#c0cbd3}.language-options small{display:block;font-size:10px;color:#a3afb9}.language-options a[aria-current]{color:var(--yellow)}
.hero-immersive{position:relative;isolation:isolate}.hero-immersive .hero-grid{display:block;min-height:760px;padding-bottom:100px}.hero-immersive .hero-copy{max-width:560px}.hero-immersive h1{font-size:46px;line-height:1.35}.hero-subtitle{color:#edf1f4;font-size:22px;line-height:1.5;margin-top:18px}.hero-immersive .hero-description{font-size:13px;margin:20px 0 26px}.hero-immersive .hero-links{color:#fff}.visual-stage{position:absolute;inset:0;z-index:-3;overflow:hidden;background:#22313c}.visual-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .95s ease;pointer-events:none}.visual-slide.is-active{opacity:1}.hero-shade{position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,#0d1b27ed 0%,#0d1b27a3 34%,#0d1b2729 67%,#0d1b270a)}.visual-controls{display:flex;gap:10px;align-items:center;color:#fff;font-size:11px;position:relative;z-index:2}.hero-immersive>.visual-controls{position:absolute;bottom:24px;right:6%}.visual-controls button{color:inherit;border:1px solid #ffffff55;background:#122a3c90;padding:7px 12px;font-size:11px;backdrop-filter:blur(8px)}.visual-controls button:hover{background:#304959}.visual-controls [data-visual-count]{min-width:38px;text-align:center;font-variant-numeric:tabular-nums}
.reveal-band{position:relative;isolation:isolate;overflow:hidden;color:#fff;background:#1d3444;min-height:300px}.reveal-background{position:absolute;inset:0;z-index:-3;object-fit:cover;width:100%;height:100%}.reveal-band:after{content:'';position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,#0a1a2bc9,#0a1a2b5c)}.glass-layer{position:absolute;inset:-20% -30%;z-index:-1;background:#b6d1e12b;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);clip-path:polygon(18% 0,100% 0,82% 100%,0 100%);transform:translate3d(0,0,0);transition:transform .7s cubic-bezier(.22,.65,.25,1);pointer-events:none}
@media(hover:hover){.reveal-band:hover .glass-layer,.reveal-band:focus-within .glass-layer{transform:translate3d(-110%,-12%,0)}}
.reveal-band p,.reveal-band .eyebrow,.reveal-band .facts span{color:#dce5ec}.reveal-band .text-link:hover{color:var(--yellow)}.reveal-band .eyebrow:before{background:var(--yellow)}.about-band-grid{position:relative;z-index:1}.about-band{padding-bottom:64px}.enquiry-background .enquiry-band{position:relative;z-index:1;min-height:270px;padding-block:64px}.enquiry-photo{object-position:center 43%}.enquiry-background .glass-layer{background:#afc5d32a}
.contact-rail{position:fixed;right:12px;top:42%;z-index:25;background:#fffffff2;color:var(--navy);border:1px solid #ccd6de;border-radius:0;overflow:hidden;box-shadow:0 8px 25px #142c4020;backdrop-filter:blur(15px)}#rail-items{display:flex;flex-direction:column}#rail-items button,#rail-items a{border:0;border-bottom:1px solid #e0e6ea;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:4px;background:transparent;color:inherit;padding:10px;width:68px;font-size:10px}#rail-items>:last-child{border-bottom:0}#rail-items svg{width:23px;height:23px}#rail-items button:hover,#rail-items a:hover{background:#e6eef3}#rail-items button[data-rail=whatsapp]{color:#15964b}.product-photo{aspect-ratio:1.4}.card-bottom>span{font-size:9px;max-width:60%}
@media(min-width:1450px){.hero-immersive .hero-grid{min-height:810px}.hero-immersive h1{font-size:52px}}
@media(max-width:1100px){.home-page .site-header{margin-bottom:-86px}.hero-immersive .hero-copy{max-width:500px}.hero-immersive h1{font-size:40px}.hero-immersive .hero-grid{min-height:730px;padding-top:150px}.contact-rail{right:5px}#rail-items button,#rail-items a{width:52px;font-size:9px}}
@media(max-width:760px){.home-page .site-header{margin-bottom:-75px}.hero-immersive .hero-grid{min-height:830px;padding-top:113px;padding-bottom:270px}.hero-immersive .hero-copy{max-width:100%}.hero-immersive h1{font-size:33px;line-height:1.3}.hero-subtitle{font-size:20px;margin-top:16px}.hero-immersive .hero-description{font-size:11px;margin-block:16px 20px}.hero-stage .visual-slide:first-child{object-fit:contain;object-position:center bottom;background:#25272b}.hero-shade{background:linear-gradient(180deg,#0b1c2bf5,#0b1c2bd4 47%,#0b1c2b0a 83%)}.hero-stage .visual-slide:not(:first-child){object-position:center bottom}.hero-immersive>.visual-controls{right:18px;bottom:20px}.visual-controls{gap:6px}.visual-controls button{padding:7px 10px;font-size:10px}.language-menu{margin:0}.language-menu summary{padding:10px 0}.language-options{position:static;min-width:0;max-height:260px;overflow-y:auto;background:#18374d}.site-header .language-options a{padding:9px!important}.contact-rail{top:auto;bottom:15px;right:12px;border-radius:0}#rail-items{display:none}#rail-items button,#rail-items a{width:60px;padding:8px}.about-band{padding-block:45px}.about-band-grid{gap:24px}.enquiry-background .enquiry-band{padding-block:42px;min-height:300px}.enquiry-background h2{font-size:27px}.enquiry-background .enquiry-band .button{align-self:flex-start}.visual-stage img{max-width:none}.toast{bottom:75px}.language-options>span{padding-inline:9px}.hero .search-form button{padding-inline:14px}.hero-links{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){.glass-layer,.visual-slide{transition:none}.hero-immersive .visual-slide:not(.is-active){opacity:0}}

@media(min-width:761px){.container{width:calc(100% - 176px)}}
@media(min-width:761px) and (max-width:1100px){.container{width:calc(100% - 144px)}}

/* Keep the navigation at identical coordinates and opacity on every page. */
:root{view-transition-name:none;background:#132b40}
@view-transition{navigation:auto}
.site-header{position:fixed;inset:0 0 auto;view-transition-name:site-header;background:#132b40b8}
.home-page .site-header{margin-bottom:0;background:#132b40b8}
.inner-page{padding-top:95px}
::view-transition-group(site-header),::view-transition-old(site-header),::view-transition-new(site-header){animation:none;mix-blend-mode:normal}
@media(max-width:1100px){.home-page .site-header{margin-bottom:0}.inner-page{padding-top:86px}}
@media(max-width:760px){.home-page .site-header{margin-bottom:0}.inner-page{padding-top:75px}}

/* Second-round feedback: shared search focus, compact contacts and real channels. */
.search-form:focus-within{outline:2px solid var(--yellow);outline-offset:2px}
.search-form input:focus-visible{outline:none}
.search-form button:focus-visible{outline-offset:-4px}
.search-icon{display:flex;align-items:center;flex-shrink:0}
.search-icon svg{width:22px;height:22px}
.empty-search-icon svg{width:38px;height:38px;margin:0 auto}
.language-menu summary{display:flex;align-items:center;gap:7px;cursor:pointer}
.language-menu summary svg{width:17px;height:17px;flex:none}
#rail-items button,#rail-items a{width:56px;padding:8px 6px;gap:3px;font-size:10px;min-height:58px}
#rail-items svg{width:20px;height:20px}
.wechat-link{border:0;background:transparent;padding:0;cursor:pointer;font:inherit;text-align:start}
.wechat-dialog{width:min(90vw,430px);max-width:90vw;padding:24px}
.wechat-dialog h2{font-size:20px;text-align:center;margin:0 0 18px}
.wechat-dialog img{display:block;width:100%;height:auto;max-height:68vh;object-fit:contain;margin:auto}
.wechat-dialog p{font-size:12px;line-height:1.6;margin:16px 0 0}
.enquiry-actions{flex-wrap:wrap}
.contact-channels dd{overflow-wrap:anywhere}
.detail-extra>p{font-size:14px;line-height:1.9;max-width:850px}
.product-gallery{min-width:0}
.product-gallery-controls{display:flex;align-items:center;justify-content:center;gap:24px;margin:14px 0}
.product-gallery-controls button{background:#132b40;color:white;border:0;padding:10px 18px;cursor:pointer}
.product-thumbnails{display:flex;gap:10px;flex-wrap:wrap}
.product-thumbnails button{width:94px;height:78px;background:#fff;border:2px solid #dce1e5;padding:3px;cursor:pointer}
.product-thumbnails button[aria-pressed="true"]{border-color:#132b40}
.product-thumbnails img{width:100%;height:100%;object-fit:contain}
@media(min-width:1101px){.site-header nav .nav-contact{display:none}}
@media(min-width:761px) and (max-width:1100px){#rail-items button,#rail-items a{width:46px;padding:7px 4px;font-size:9px;min-height:54px}}
@media(max-width:760px){#rail-items button,#rail-items a{width:52px;min-height:52px;padding:7px 5px}}

/* Vector arrow avoids platform-specific emoji glyphs on iOS. */
.arrow-ne{display:inline-block;width:1em;height:1em;vertical-align:-.12em;flex-shrink:0;pointer-events:none}

/* User-supplied workshop images: keep equipment visible in the wide band,
   and preserve full framing for the mixed portrait/landscape About gallery. */
.about-band>.reveal-background{object-position:50% 66%}
.factory-gallery{padding:12px;align-self:start;min-width:0;width:100%}
.factory-gallery .gallery-stage{position:relative;flex:none;aspect-ratio:4/3;overflow:hidden;background:#142b3c}
.factory-gallery .gallery-stage img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain}
.factory-gallery .gallery-controls{flex-wrap:wrap;justify-content:center;margin:12px 0 0}

/* Approved piston photographs integrated from the composition review. */
.hero-stage .visual-slide{object-position:center 48%}
.hero-immersive>.visual-controls{flex-wrap:wrap;max-width:calc(100% - 12%)}
.piston-supply{display:grid;grid-template-columns:.85fr 1.15fr;align-items:center;gap:6vw;padding-block:20px 75px}
.piston-supply h2{font-size:36px;line-height:1.4;margin:0 0 22px}
.piston-supply p:not(.eyebrow){font-size:14px;line-height:2;color:var(--muted);max-width:480px}
.piston-supply .text-link{display:inline-block;margin-top:25px}
.piston-supply figure{margin:0}.piston-supply img{display:block;width:100%;height:auto}
.piston-supply figcaption{font-size:10px;color:var(--muted);padding-top:12px}
.enquiry-photo{object-position:center 50%}
@media(max-width:760px){
  .hero-immersive .hero-grid{min-height:760px;padding-bottom:125px}
  .hero-stage .visual-slide:first-child,.hero-stage .visual-slide:not(:first-child){object-fit:cover;object-position:65% 48%;background:#22313c}
  .hero-shade{background:linear-gradient(90deg,#0d1b27ed,#0d1b2799 72%,#0d1b2760)}
  .hero-immersive>.visual-controls{left:18px;right:18px;max-width:none;gap:6px}
  .piston-supply{grid-template-columns:1fr;gap:25px;padding-block:0 45px}
  .piston-supply h2{font-size:29px}.piston-supply .eyebrow{margin-bottom:18px}
}

/* Review R1: keep references and enquiry close to the photograph. */
.product-photo,.detail-image{background:#fff}
.product-photo img,.detail-image img{mix-blend-mode:normal;object-fit:scale-down}
.detail-grid{grid-template-areas:"photo heading" "photo info" "photo action";grid-template-columns:1.1fr 1fr;column-gap:48px;row-gap:20px;align-items:start}
.product-gallery{grid-area:photo}
.detail-heading{grid-area:heading;min-width:0}
.detail-heading .eyebrow{font-size:10px;margin-bottom:10px}
.detail-heading h1{font-size:clamp(28px,3vw,44px);overflow-wrap:anywhere}
.detail-heading h2{font-size:20px;line-height:1.4;margin-top:12px;letter-spacing:-.02em}
.detail-info{grid-area:info;min-width:0}
.detail-info .specs{margin:0 0 22px}
.detail-info .notice{margin:0 0 18px}
.ordering-note h3{font-size:15px;letter-spacing:0}
.ordering-note p{font-size:13px;margin-top:9px;line-height:1.8}
.detail-action{grid-area:action}
.detail-action .reference-note{margin:12px 0 0;font-size:11px}
.detail-image{aspect-ratio:4/3;padding:18px 18px 36px}
.detail-image>span{display:flex;gap:7px;align-items:center;bottom:10px;right:14px}
.detail-image>span svg,.reset-filters svg{display:inline-block;width:14px;height:14px;vertical-align:middle}
.detail-extra{padding-top:0}
.detail-extra details{border-top:0}
.hero-links>.text-link{color:white;text-shadow:0 1px 5px #081624,0 0 16px #081624}
.enquiry-background{border-top:1px solid #ffffff2b}
.about-intro h1{text-wrap:balance;max-width:1000px}
/* Approved contact glass: same translucent navy as the header. */
@media(min-width:761px){
  .contact-rail{background:#132b40b8;color:#fff;border-color:#ffffff40;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 8px 25px #0b1d3430}
  .contact-rail #rail-items>a,.contact-rail #rail-items>button{border-bottom-color:#ffffff26}
  .contact-rail #rail-items>a:hover,.contact-rail #rail-items>button:hover,.contact-rail #rail-items>a:focus-visible,.contact-rail #rail-items>button:focus-visible{background:#ffffff1f;color:var(--yellow)}
}
@media(max-width:760px){
  html{scroll-padding-bottom:85px}
  body{padding-bottom:calc(62px + env(safe-area-inset-bottom,0px))}
  .contact-rail{left:0;right:0;bottom:0;top:auto;width:100%;border:0;border-top:1px solid #ccd6de;padding-bottom:env(safe-area-inset-bottom,0px);background:#fff;backdrop-filter:none}
  .contact-rail #rail-items{display:flex;flex-direction:row}
  .contact-rail #rail-items>a,.contact-rail #rail-items>button{width:20%;min-height:62px;border:0;border-right:1px solid #e0e6ea;padding:8px 3px;font-size:10px}
  .contact-rail #rail-items>:last-child{border-right:0}
  .toast{bottom:calc(78px + env(safe-area-inset-bottom,0px))}
  .hero-immersive .hero-grid{min-height:650px;padding-bottom:90px}
  .about-intro h1{font-size:clamp(25px,6.8vw,32px);line-height:1.4;letter-spacing:-.025em}
  .detail-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"heading" "photo" "action" "info";gap:18px}
  .detail-heading h1{font-size:30px}
  .detail-heading h2{font-size:18px;margin-top:8px}
  .detail-heading .eyebrow{margin-bottom:6px}
  .detail-image{aspect-ratio:auto;height:clamp(180px,28svh,248px);padding:12px 12px 30px}
  .product-gallery{display:grid;grid-template-columns:1fr 1fr;column-gap:10px;align-items:center}
  .product-gallery>.detail-image{grid-column:1/-1}
  .product-gallery-controls{gap:10px;margin:10px 0 0;font-size:11px}
  .product-gallery-controls button{padding:7px 11px}
  .product-thumbnails{gap:6px;margin-top:10px;justify-content:flex-end}
  .product-thumbnails button{width:54px;height:44px}
  .detail-action .button{width:100%}
  .detail-info .specs{margin:0 0 20px}
}

/* Four company figures share the same layout on home and about pages. */
.facts.company-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:25px 28px}
.company-facts>div{min-width:0}
.company-facts span{display:block;line-height:1.5;overflow-wrap:anywhere}
.about-intro h1{font-size:clamp(30px,3.5vw,46px);line-height:1.25}
.about-intro .about-specialty{font-size:clamp(20px,2.2vw,28px);color:var(--ink);line-height:1.6;margin-top:20px}
.about-intro .about-founded{margin-top:14px;font-size:15px}
@media(max-width:760px){.facts.company-facts{gap:24px 16px}.company-facts strong{font-size:34px}.company-facts span{font-size:12px}}
/* Keep the enquiry button above the fixed contact bar on short phone screens. */
@media(max-width:760px) and (max-height:650px){.detail-image{height:140px}.detail-grid{row-gap:12px}.breadcrumb{padding-block:16px}}
