/* Apex / Guixin — a material-led engineering website. Build: 20261024 */
:root{
--paper:#f6f5ef;
--white:#fff;
--ink:#182b25;
--muted:#606e65;
--green:#123f32;
--green-soft:#e6ebe2;
--lime:#d9ef84;
--line:#d8ded3;
--radius:22px;
--max:1320px;
--sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans","PingFang SC","Hiragino Sans","Malgun Gothic",Arial,sans-serif;
--ease:cubic-bezier(.2,.75,.25,1)}

*{
box-sizing:border-box}
html{
scroll-behavior:smooth;
scroll-padding-top:110px}
body{
margin:0;
color:var(--ink);
background:var(--paper);
font:16px/1.65 var(--sans);
-webkit-font-smoothing:antialiased}
button,input,textarea,select{
font:inherit}
button,a,input,textarea,select{
-webkit-tap-highlight-color:transparent}
a{
color:inherit;
text-decoration:none}
button{
cursor:pointer}
img{
display:block;
max-width:100%;
height:auto}
svg{
vertical-align:middle}
button svg,a svg{
pointer-events:none}
h1,h2,h3,h4,p,figure{
margin:0}
h1,h2,h3{
font-weight:500;
letter-spacing:-.052em;
line-height:1.07}
h1{
font-size:clamp(2.8rem,5.9vw,6.2rem)}
h2{
font-size:clamp(2.25rem,4.2vw,4.3rem)}
h3{
font-size:clamp(1.4rem,2vw,2rem);
letter-spacing:-.035em}
p{
max-width:65ch}
button{
color:inherit}
::selection{
color:var(--green);
background:var(--lime)}
[hidden]{
display:none!important}
:focus-visible{
outline:3px solid #8ba439;
outline-offset:5px}
.container{
max-width:var(--max);
padding-inline:clamp(22px,4vw,72px);
margin-inline:auto}
.section{
padding-block:clamp(70px,9vw,132px)}
.eyebrow{
display:block;
font-size:.7rem;
font-weight:700;
letter-spacing:.17em;
line-height:1.6;
text-transform:uppercase;
margin-bottom:24px}
.eyebrow:before{
content:"";
display:inline-block;
width:7px;
height:7px;
background:currentColor;
border-radius:50%;
margin-right:10px;
vertical-align:middle}
.lede{
font-size:clamp(1.03rem,1.3vw,1.2rem);
color:var(--muted);
line-height:1.75}
.text-link{
display:inline-flex;
align-items:center;
gap:18px;
border-bottom:1px solid currentColor;
padding:8px 0;
font-size:.9rem;
font-weight:600}
.arrow{
font-size:1.35em;
line-height:1}
.btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:22px;
border:1px solid var(--green);
background:var(--green);
color:white;
padding:15px 23px;
min-height:52px;
border-radius:7px;
font-weight:600;
font-size:.85rem;
line-height:1.4;
transition:background .2s,color .2s,transform .2s;
text-align:center}
.btn:hover{
background:#235844;
transform:translateY(-2px)}
.btn:active{
transform:translateY(0)}
.btn.light{
background:var(--lime);
border-color:var(--lime);
color:var(--green)}
.btn.outline{
background:transparent;
color:var(--green)}
.btn.outline:hover{
background:var(--green-soft)}
.actions{
display:flex;
align-items:center;
gap:20px;
flex-wrap:wrap;
margin-top:34px}
.skip{
position:fixed;
top:-100px;
left:20px;
z-index:100;
background:var(--green);
color:#fff;
padding:12px}
.skip:focus{
top:10px}
.site-header{
position:sticky;
top:0;
z-index:50;
background:rgba(246,245,239,.95);
border-bottom:1px solid transparent;
transition:box-shadow .25s,border-color .25s;
backdrop-filter:blur(18px)}
.site-header.scrolled{
border-color:var(--line);
box-shadow:0 6px 30px #182b2508}
.header-inner{
height:96px;
display:flex;
align-items:center;
gap:32px}
.brand{
display:flex;
align-items:center;
gap:11px;
flex-shrink:0}
.brand svg{
width:32px;
height:38px}
.brand-text{
font-weight:750;
letter-spacing:-.045em;
line-height:1.1;
font-size:1.23rem}
.brand-text small{
display:block;
font-size:.5rem;
letter-spacing:.22em;
margin-top:5px;
font-weight:600}
.nav-links{
display:flex;
gap:23px;
list-style:none;
margin:0;
padding:0;
align-items:center}
.site-nav{
margin-left:auto}
.nav-links a{
font-size:.76rem;
white-space:nowrap;
position:relative;
display:block;
padding:13px 0}
.nav-links a:after{
content:"";
height:1px;
position:absolute;
bottom:6px;
left:0;
right:0;
background:currentColor;
transform:scaleX(0);
transform-origin:left;
transition:transform .25s}
.nav-links a:hover:after,.nav-links a[aria-current=page]:after{
transform:scaleX(1)}
.header-actions{
display:flex;
gap:17px;
align-items:center}
.header-actions>.btn{
font-size:.75rem;
padding:12px 17px;
min-height:43px}
.language{
position:relative}
.language summary{
cursor:pointer;
list-style:none;
font-size:.78rem;
font-weight:600;
min-height:44px;
display:flex;
align-items:center;
gap:7px}
.language summary::-webkit-details-marker{
display:none}
.language ul{
position:absolute;
right:0;
top:42px;
min-width:180px;
max-height:70vh;
overflow:auto;
background:#fff;
border:1px solid var(--line);
padding:8px;
list-style:none;
box-shadow:0 15px 45px #182b2517;
border-radius:10px}
.language li a{
display:block;
padding:10px 13px;
border-radius:5px;
font-size:.85rem}
.language a:hover,.language a[aria-current=true]{
background:var(--green-soft)}
.menu-toggle{
display:none;
align-items:center;
justify-content:center;
background:transparent;
border:1px solid var(--line);
width:44px;
height:44px;
border-radius:5px;
font-size:1.2rem}
.hero{
padding-block:62px 82px;
overflow:hidden}
.hero-grid{
display:grid;
grid-template-columns:1.05fr 1fr;
align-items:center;
gap:clamp(28px,5vw,84px)}
.hero h1{
max-width:9em}
.hero h1 em{
font-style:normal;
color:#66805c}
.hero .lede{
max-width:36em;
margin-top:25px}
.hero-art{
position:relative;
isolation:isolate;
padding-top:26px}
.hero-art:before{
content:"";
position:absolute;
inset:0 -12% 12% 3%;
background-image:linear-gradient(#182b250a 1px,transparent 1px),linear-gradient(90deg,#182b250a 1px,transparent 1px);
background-size:48px 48px;
z-index:-1;
mask-image:radial-gradient(ellipse,#000,transparent 70%)}
.hero-art figure{
background:#edf0e8;
position:relative;
border-radius:45% 45% 18px 18px;
overflow:hidden}
.hero-art img{
width:100%;
height:530px;
object-fit:contain;
mix-blend-mode:multiply;
padding:25px 12px}
.hero-art figcaption{
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
font-size:.68rem;
letter-spacing:.03em;
padding:18px 22px;
border-top:1px solid #182b2510;
background:#ffffff80}
.hero-art figcaption span:last-child{
font-size:1.4rem}
.float-tag{
position:absolute;
bottom:112px;
right:-10px;
max-width:200px;
padding:15px 19px;
background:var(--lime);
border-radius:6px;
font-size:.75rem;
line-height:1.4;
transform:rotate(-5deg);
box-shadow:0 10px 28px #182b2512}
.path-strip{
padding-bottom:44px}
.path-inner{
display:grid;
grid-template-columns:1fr repeat(4,1fr);
gap:25px;
align-items:center;
border-block:1px solid var(--line);
padding-block:24px}
.path-inner>span{
font-size:.75rem;
color:var(--muted)}
.path-inner a{
font-size:.8rem;
line-height:1.45;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px}
.path-inner a:hover{
color:#617b37}
.section-head{
display:flex;
justify-content:space-between;
align-items:end;
gap:45px;
margin-bottom:50px}
.section-head .lede{
max-width:430px}
.problem-shell{
display:grid;
grid-template-columns:.75fr 1.25fr;
gap:64px;
align-items:start}
.problem-tabs{
display:flex;
flex-direction:column;
margin-top:34px}
.problem-tabs button{
font-size:1.15rem;
text-align:left;
background:none;
border:0;
border-top:1px solid var(--line);
padding:20px 0;
display:flex;
justify-content:space-between;
gap:15px;
color:var(--muted);
line-height:1.3}
.problem-tabs button:last-child{
border-bottom:1px solid var(--line)}
.problem-tabs button[aria-selected=true]{
color:var(--green);
font-weight:600}
.problem-tabs button[aria-selected=true] .arrow{
transform:rotate(-40deg)}
.problem-panel{
position:relative;
background:var(--white);
border-radius:var(--radius);
overflow:hidden}
.problem-panel>img{
width:100%;
height:305px;
object-fit:cover}
.problem-notes{
padding:30px}
.problem-note{
display:grid;
grid-template-columns:120px 1fr;
gap:20px;
border-bottom:1px solid var(--line);
padding:16px 0}
.problem-note small{
font-size:.58rem;
letter-spacing:.1em;
font-weight:650;
line-height:1.6;
padding-top:3px}
.problem-note p{
font-size:.87rem;
color:var(--muted);
line-height:1.6}
.problem-notes .text-link{
margin-top:20px}
.application-grid{
display:grid;
grid-template-columns:1.1fr 1fr;
gap:28px}
.application-grid article:first-child{
grid-row:span 2}
.application-tile{
position:relative;
border-radius:var(--radius);
overflow:hidden;
background:#e7e9df}
.application-tile>a{
display:block;
height:100%}
.application-tile picture{
display:block;
overflow:hidden}
.application-tile img{
width:100%;
height:260px;
object-fit:cover;
transition:transform .8s var(--ease)}
.application-tile:first-child img{
height:600px;
object-fit:cover}
.application-tile:hover img{
transform:scale(1.035)}
.application-caption{
position:absolute;
bottom:0;
left:0;
right:0;
padding:28px;
color:#fff;
background:linear-gradient(transparent,#10281edb)}
.application-caption h3{
font-size:1.8rem;
max-width:16em;
line-height:1.15}
.application-caption .eyebrow{
font-size:.6rem;
margin-bottom:14px}
.application-caption .arrow{
position:absolute;
right:25px;
bottom:28px}
.dark-band{
background:var(--green);
color:#fff}
.dark-band .lede{
color:#c5d1c8}
.dark-band .eyebrow{
color:var(--lime)}
.process-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:28px;
margin-top:60px}
.process-item{
border-top:1px solid #ffffff40;
padding-top:23px}
.process-number{
display:block;
font-size:.85rem;
letter-spacing:.1em;
color:var(--lime);
margin-bottom:54px}
.process-item h3{
font-size:1.45rem;
letter-spacing:-.03em}
.process-item p{
color:#c5d1c8;
font-size:.85rem;
margin-top:20px;
line-height:1.7}
.split{
display:grid;
grid-template-columns:1.12fr 1fr;
gap:clamp(30px,6vw,96px);
align-items:center}
.split-visual{
border-radius:var(--radius);
overflow:hidden;
background:var(--green-soft)}
.split-visual img{
width:100%;
height:480px;
object-fit:cover}
.split-copy .lede{
margin-top:28px}
.split-copy .text-link{
margin-top:22px}
.form-section{
background:#e9eee3}
.form-shell{
display:grid;
grid-template-columns:.85fr 1.15fr;
gap:clamp(32px,7vw,100px)}
.form-intro .lede{
margin-top:25px}
.contact-short{
margin-top:30px;
font-size:.9rem}
.contact-short a{
border-bottom:1px solid currentColor}
.inquiry-form{
display:grid;
grid-template-columns:1fr 1fr;
gap:21px}
.form-field{
display:flex;
flex-direction:column;
gap:7px;
min-width:0}
.form-field.full,.inquiry-form>details,.inquiry-form>.full{
grid-column:1/-1}
.form-field label,.form-field>span{
font-size:.75rem;
font-weight:600}
.form-field input,.form-field select,.form-field textarea{
width:100%;
min-width:0;
border:1px solid #c9d3c6;
border-radius:6px;
background:#f9faf5;
padding:13px 15px;
color:var(--ink);
font-size:.88rem;
transition:border-color .2s,box-shadow .2s}
.form-field input:focus,.form-field textarea:focus,.form-field select:focus{
border-color:var(--green);
outline:0;
box-shadow:0 0 0 3px #123f3210}
.form-field textarea{
min-height:130px;
resize:vertical}
.inquiry-form details{
border-block:1px solid #c9d3c6;
padding:15px 0}
.inquiry-form details summary{
cursor:pointer;
font-size:.8rem}
.optional-fields{
display:grid;
grid-template-columns:1fr 1fr;
gap:18px;
padding-top:20px}
.field-help,.file-state{
font-size:.72rem;
color:var(--muted);
line-height:1.6}
.consent{
display:flex;
gap:10px;
align-items:start;
font-size:.75rem;
line-height:1.6}
.consent input{
width:17px;
height:17px;
flex-shrink:0;
margin:3px 0 0;
accent-color:var(--green)}
.consent a{
text-decoration:underline}
.form-result{
grid-column:1/-1;
background:#fff;
padding:25px;
border-radius:12px;
border:1px solid var(--line)}
.form-result h3{
font-size:1.3rem;
margin-bottom:15px}
.form-result p{
font-size:.85rem;
color:var(--muted);
margin-bottom:12px}
.form-result .actions{
margin-top:18px;
gap:12px}
.form-result .btn{
font-size:.75rem;
padding:12px 15px}
.form-feedback{
grid-column:1/-1;
color:#8e3024;
font-size:.85rem}
.honeypot{
position:absolute;
left:-9999px;
opacity:0;
pointer-events:none}
.form-result button.link-button{
font-size:.8rem;
border:0;
background:none;
text-decoration:underline;
padding:10px 0}
.site-footer{
background:#122a22;
color:#d0d9cd;
padding:66px 0 24px}
.footer-grid{
display:grid;
grid-template-columns:1.3fr .7fr 1fr;
gap:60px}
.footer-brand{
font-size:1.8rem;
letter-spacing:-.05em;
color:#fff;
margin-bottom:18px}
.footer-grid p{
font-size:.77rem;
line-height:1.75;
max-width:42em}
.footer-grid .tiny{
font-size:.67rem;
color:#9eb29f;
margin-top:16px}
.footer-links{
list-style:none;
padding:0;
margin:0;
display:grid;
gap:10px;
font-size:.78rem}
.footer-contact{
display:grid;
gap:9px;
align-content:start;
font-size:.8rem}
.footer-contact a{
overflow-wrap:anywhere}
.footer-bottom{
border-top:1px solid #ffffff24;
margin-top:55px;
padding-top:22px;
display:flex;
justify-content:space-between;
gap:24px;
font-size:.65rem;
color:#a8b8a8}
.footer-bottom>div{
display:flex;
gap:20px;
flex-wrap:wrap}
.page-hero{
padding:70px 0 75px;
border-bottom:1px solid var(--line)}
.page-hero .hero-row{
display:grid;
grid-template-columns:1.25fr .75fr;
gap:75px;
align-items:end}
.page-hero h1{
font-size:clamp(2.8rem,5vw,5.2rem)}
.page-hero .lede{
font-size:1.03rem}
.breadcrumbs{
font-size:.7rem;
color:var(--muted);
margin-bottom:38px;
display:flex;
gap:12px;
flex-wrap:wrap}
.breadcrumbs a{
text-decoration:underline}
.page-hero .eyebrow{
color:#68814c}
.chapter-list{
counter-reset:chapter}
.chapter{
display:grid;
grid-template-columns:60px 1fr 1fr;
gap:50px;
padding-block:50px;
border-bottom:1px solid var(--line);
align-items:start}
.chapter>span{
font-size:.8rem;
color:#64804f}
.chapter h2{
font-size:clamp(1.8rem,2.8vw,2.8rem)}
.chapter p{
color:var(--muted);
font-size:.95rem}
.chapter .output{
margin-top:19px;
font-size:.77rem;
color:var(--green);
border-left:2px solid #b4c878;
padding-left:18px}
.method-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:70px;
margin-top:45px}
.method-grid article{
border-top:1px solid var(--line);
padding-top:28px}
.method-grid h3{
margin-bottom:22px}
.method-grid p{
color:var(--muted);
font-size:.94rem}
.note{
font-size:.77rem;
color:var(--muted);
line-height:1.7;
padding:22px 0;
border-top:1px solid var(--line);
margin-top:35px}
.case-feature{
display:grid;
grid-template-columns:1.05fr 1fr;
gap:60px;
align-items:center;
margin-bottom:90px}
.case-feature:nth-child(even) .case-visual{
order:2}
.case-visual{
background:#e7e9df;
border-radius:var(--radius);
overflow:hidden}
.case-visual img{
width:100%;
height:480px;
object-fit:cover}
.case-copy h2{
font-size:clamp(2rem,3vw,3.3rem);
margin-bottom:22px}
.case-facts{
display:grid;
gap:19px;
margin-top:26px}
.case-facts div{
display:grid;
grid-template-columns:110px 1fr;
gap:20px}
.case-facts dt{
font-size:.64rem;
font-weight:650;
letter-spacing:.04em;
line-height:1.6}
.case-facts dd{
margin:0;
font-size:.84rem;
color:var(--muted)}
.case-copy .text-link{
margin-top:28px}
.filter-bar{
display:flex;
flex-wrap:wrap;
gap:9px;
margin-bottom:35px}
.filter-tab{
background:none;
border:1px solid var(--line);
border-radius:30px;
padding:11px 17px;
font-size:.74rem;
line-height:1.4}
.filter-tab[aria-pressed=true]{
background:var(--green);
color:#fff;
border-color:var(--green)}
.filter-count{
font-size:.72rem;
color:var(--muted);
margin-bottom:20px}
.catalog-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:38px 24px}
.catalog-item figure{
overflow:hidden;
background:#e9ece4;
border-radius:15px}
.catalog-item img{
width:100%;
aspect-ratio:1/1;
object-fit:cover;
transition:transform .6s var(--ease)}
.catalog-item:hover img{
transform:scale(1.035)}
.catalog-item h3{
font-size:1.15rem;
line-height:1.3;
margin-top:18px;
letter-spacing:-.02em}
.catalog-item small{
display:block;
margin-top:6px;
font-size:.65rem;
color:var(--muted)}
.factory-hero-photo{
margin-top:-1px}
.factory-hero-photo img{
height:560px;
width:100%;
object-fit:cover}
.factory-stories{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:70px 36px}
.factory-story:first-child{
grid-column:1/-1;
display:grid;
grid-template-columns:1.2fr 1fr;
gap:70px;
align-items:center}
.factory-story img{
height:330px;
width:100%;
object-fit:cover;
border-radius:16px}
.factory-story:first-child img{
height:460px}
.factory-story h2{
font-size:2rem;
margin-top:27px}
.factory-story p{
font-size:.9rem;
color:var(--muted);
margin-top:18px}
.record-grid{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:18px;
margin-top:45px}
.record-grid img{
height:240px;
width:100%;
object-fit:contain;
background:#fff;
border-radius:10px;
padding:8px;
transition:transform .3s}
.record-grid a:hover img{
transform:translateY(-5px)}
.record-grid figcaption{
font-size:.72rem;
margin-top:15px;
line-height:1.5}
.pdp-grid{
display:grid;
grid-template-columns:1.1fr 1fr;
gap:65px;
align-items:start}
.product-main{
position:relative;
background:#e9ece4;
border-radius:20px;
overflow:hidden}
.product-main img{
width:100%;
height:550px;
object-fit:contain}
.gallery-thumbs{
display:flex;
gap:12px;
overflow:auto;
padding:18px 3px}
.gallery-thumbs button{
flex:0 0 85px;
padding:0;
background:#fff;
border:2px solid transparent;
border-radius:10px;
overflow:hidden;
min-height:70px}
.gallery-thumbs button[aria-pressed=true]{
border-color:var(--green)}
.gallery-thumbs img{
width:85px;
height:72px;
object-fit:cover}
.pdp-copy{
padding-top:22px}
.pdp-copy h2{
font-size:clamp(2.2rem,3.6vw,3.5rem);
margin-bottom:25px}
.pdp-copy .lede{
font-size:1rem}
.spec-table{
border-collapse:collapse;
width:100%;
margin-top:36px;
font-size:.82rem}
.spec-table caption{
text-align:left;
font-weight:600;
font-size:1rem;
padding-bottom:18px}
.spec-table th,.spec-table td{
padding:17px 0;
border-bottom:1px solid var(--line);
text-align:left;
vertical-align:top}
.spec-table th{
font-weight:600;
width:34%;
padding-right:22px}
.spec-table td{
color:var(--muted)}
.custom-options{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:24px;
margin-top:46px}
.custom-options p{
border-top:1px solid var(--line);
padding-top:25px;
font-size:.95rem;
line-height:1.5}
.custom-options span{
display:block;
color:#6b824a;
font-size:.7rem;
margin-bottom:19px}
.video-split{
display:grid;
grid-template-columns:1.1fr .9fr;
gap:70px;
align-items:center}
.video-frame{
background:#dce4d7;
border-radius:24px;
overflow:hidden;
position:relative;
text-align:center;
padding:28px}
.video-frame video{
display:block;
width:auto;
max-width:100%;
height:510px;
max-height:70vh;
margin:auto;
background:#182b25;
border-radius:12px}
.video-frame figcaption{
text-align:left;
font-size:.68rem;
color:var(--muted);
margin-top:19px;
line-height:1.65}
.video-copy .lede{
margin-top:26px}
.contact-layout{
display:grid;
grid-template-columns:.85fr 1.15fr;
gap:80px;
align-items:start}
.contact-layout .inquiry-form{
background:#e9eee3;
padding:34px;
border-radius:20px}
.contact-details{
display:grid;
gap:24px;
margin-bottom:44px}
.contact-details dt{
font-size:.66rem;
letter-spacing:.08em;
text-transform:uppercase;
color:var(--muted);
margin-bottom:6px}
.contact-details dd{
margin:0;
font-size:.9rem;
overflow-wrap:anywhere}
.contact-details a{
text-decoration:underline}
.preparation{
border-top:1px solid var(--line);
padding-top:25px}
.preparation h2{
font-size:1.6rem;
margin-bottom:22px}
.preparation ol{
padding-left:20px;
display:grid;
gap:13px;
font-size:.85rem;
color:var(--muted)}
.legal{
max-width:850px}
.legal article{
padding-block:28px;
border-bottom:1px solid var(--line)}
.legal h2{
font-size:1.7rem;
margin-bottom:20px}
.legal p{
color:var(--muted);
font-size:.95rem}
.cta-band{
background:#e7eddf}
.cta-band .split{
grid-template-columns:1.4fr .6fr}
.cta-band .lede{
margin-top:22px}
.cta-band .actions{
justify-content:end}
.reveal{
opacity:1;
transform:none}
.motion-ready .reveal.is-pending{
opacity:0;
transform:translateY(22px)}
.motion-ready .reveal{
transition:opacity .65s var(--ease),transform .65s var(--ease);
transition-delay:var(--delay,0ms)}
.motion-ready .reveal.is-visible{
opacity:1;
transform:none}
.hero-title-line{
display:block}
.motion-ready .hero-title-line{
animation:hero-arrive .85s var(--ease) both}
.motion-ready .hero-title-line:nth-child(2){
animation-delay:.11s}
.motion-ready .hero-art{
animation:hero-art-arrive 1s .12s var(--ease) both}
@keyframes hero-arrive{
from{
opacity:0;
transform:translateY(22px)}
to{
opacity:1;
transform:none}
}
@keyframes hero-art-arrive{
from{
opacity:0;
transform:translateY(15px) rotate(2deg)}
to{
opacity:1;
transform:none}
}
:lang(zh-CN) h1,:lang(ja) h1,:lang(ko) h1{
font-size:clamp(2.7rem,4.8vw,5.2rem);
line-height:1.25;
letter-spacing:-.035em}
:lang(zh-CN) h2,:lang(ja) h2,:lang(ko) h2{
line-height:1.25;
letter-spacing:-.025em}
:lang(de) .nav-links,:lang(fr) .nav-links,:lang(ru) .nav-links{
gap:15px}
:lang(de) .nav-links a,:lang(fr) .nav-links a,:lang(ru) .nav-links a{
font-size:.7rem}
:lang(ru) h1{
font-size:clamp(2.7rem,5vw,5.2rem)}

@media(min-width:1500px){
.hero-art img{
height:580px}
}

@media(max-width:1190px){
.header-inner{
gap:20px}
.header-actions>.btn{
display:none}
.nav-links{
gap:17px}
.hero-grid{
gap:35px}
.hero h1{
font-size:clamp(3.4rem,6vw,5.5rem)}
.hero-art img{
height:470px}
.problem-shell{
gap:38px}
.contact-layout{
gap:38px}
}

@media(max-width:980px){
.header-inner{
height:78px}
.site-nav{
margin-left:auto}
.menu-toggle{
display:flex}
.header-actions{
gap:18px}
.site-nav{
display:none;
position:absolute;
top:100%;
left:0;
right:0;
background:var(--paper);
border-bottom:1px solid var(--line);
padding:14px 30px 24px;
box-shadow:0 20px 35px #182b2510}
.site-nav.open{
display:block}
.nav-links{
display:block}
.nav-links a,:lang(de) .nav-links a,:lang(fr) .nav-links a,:lang(ru) .nav-links a{
font-size:.95rem;
padding:13px 0}
.nav-links a:after{
display:none}
.header-actions{
margin-left:auto}
.hero-grid{
grid-template-columns:1fr 1fr}
.hero h1{
font-size:3.4rem}
.hero .lede{
font-size:.96rem}
.hero .actions{
gap:15px}
.hero-art img{
height:410px}
.float-tag{
right:0;
max-width:170px;
font-size:.65rem}
.path-inner{
grid-template-columns:1fr 1fr;
gap:20px}
.path-inner>span{
grid-column:1/-1}
.problem-shell{
grid-template-columns:.8fr 1.2fr;
gap:25px}
.problem-note{
grid-template-columns:1fr;
gap:8px}
.process-grid{
grid-template-columns:1fr 1fr;
gap:40px}
.process-number{
margin-bottom:30px}
.split{
gap:35px}
.split-visual img{
height:400px}
.form-shell{
gap:35px;
grid-template-columns:1fr 1.2fr}
.footer-grid{
gap:30px;
grid-template-columns:1fr 1fr}
.footer-contact{
grid-column:1/-1}
.page-hero .hero-row{
gap:35px;
grid-template-columns:1.2fr 1fr}
.chapter{
gap:30px;
grid-template-columns:40px 1fr 1fr}
.case-feature{
gap:35px}
.case-facts div{
grid-template-columns:1fr;
gap:6px}
.case-visual img{
height:440px}
.record-grid{
grid-template-columns:repeat(3,1fr)}
.factory-story:first-child{
gap:35px}
.pdp-grid{
gap:30px}
.product-main img{
height:440px}
.video-split{
gap:30px}
.contact-layout{
gap:30px;
grid-template-columns:.85fr 1.15fr}
.contact-layout .inquiry-form{
padding:25px}
.custom-options{
grid-template-columns:1fr 1fr}
}

@media(max-width:720px){
h1{
font-size:3rem}
h2{
font-size:2.4rem}
.container{
padding-inline:22px}
.hero{
padding-block:38px 45px}
.hero-grid{
grid-template-columns:1fr;
gap:35px}
.hero h1{
font-size:clamp(3.25rem,12vw,4.9rem);
max-width:11em}
.hero .lede{
font-size:1rem;
max-width:38em}
.hero .eyebrow{
margin-bottom:18px}
.hero-art{
padding-top:5px;
margin-inline:0}
.hero-art img{
height:400px}
.hero-art figure{
border-radius:43% 43% 15px 15px}
.hero-art figcaption{
font-size:.59rem;
padding:15px 18px}
.float-tag{
bottom:93px;
right:-6px}
.actions{
gap:18px}
.actions .btn{
max-width:100%}
.path-strip{
padding-bottom:5px}
.path-inner{
padding-block:22px}
.path-inner a{
font-size:.76rem}
.section-head{
display:block;
margin-bottom:34px}
.section-head .lede{
margin-top:24px}
.problem-shell{
grid-template-columns:1fr;
gap:28px}
.problem-tabs{
flex-direction:row;
overflow:auto;
gap:8px;
margin-top:25px;
padding-bottom:7px}
.problem-tabs button,.problem-tabs button:last-child{
white-space:nowrap;
flex-shrink:0;
border:1px solid var(--line);
border-radius:30px;
padding:12px 15px;
font-size:.8rem}
.problem-tabs button[aria-selected=true]{
background:var(--green);
color:#fff}
.problem-tabs .arrow{
display:none}
.problem-panel>img{
height:240px}
.problem-notes{
padding:15px 23px 25px}
.problem-note{
grid-template-columns:90px 1fr;
gap:15px}
.problem-note small{
font-size:.53rem}
.problem-note p{
font-size:.8rem}
.application-grid{
grid-template-columns:1fr;
gap:20px}
.application-grid article:first-child{
grid-row:auto}
.application-tile img,.application-tile:first-child img{
height:380px}
.application-caption{
padding:25px}
.application-caption h3{
font-size:1.7rem}
.process-grid{
gap:35px 23px;
margin-top:40px}
.process-item h3{
font-size:1.25rem}
.process-item p{
font-size:.8rem}
.process-number{
margin-bottom:25px}
.split,.form-shell,.contact-layout,.video-split,.pdp-grid{
grid-template-columns:1fr;
gap:35px}
.split-visual img{
height:360px}
.form-intro .lede{
margin-top:22px}
.inquiry-form{
gap:20px 14px}
.form-field label{
font-size:.72rem}
.form-field input,.form-field textarea,.form-field select{
font-size:16px;
padding:12px}
.optional-fields{
grid-template-columns:1fr}
.footer-grid{
grid-template-columns:1fr;
gap:35px}
.footer-contact{
grid-column:auto}
.footer-bottom{
flex-direction:column;
margin-top:38px;
gap:18px}
.page-hero{
padding-block:35px 50px}
.breadcrumbs{
margin-bottom:25px;
font-size:.65rem}
.page-hero .hero-row{
grid-template-columns:1fr;
gap:27px}
.page-hero h1{
font-size:clamp(2.65rem,10vw,4rem);
overflow-wrap:break-word}
.page-hero .lede{
font-size:1rem}
.chapter{
grid-template-columns:30px 1fr;
gap:20px;
padding-block:32px}
.chapter>div:last-child{
grid-column:2}
.chapter h2{
font-size:2rem}
.method-grid{
grid-template-columns:1fr;
gap:35px}
.case-feature{
grid-template-columns:1fr;
gap:30px;
margin-bottom:65px}
.case-feature:nth-child(even) .case-visual{
order:0}
.case-visual img{
height:380px}
.case-copy h2{
font-size:2.4rem}
.case-facts div{
grid-template-columns:105px 1fr;
gap:15px}
.catalog-grid{
grid-template-columns:1fr 1fr;
gap:28px 15px}
.catalog-item h3{
font-size:1rem}
.filter-bar{
gap:7px}
.filter-tab{
padding:10px 13px;
font-size:.7rem}
.factory-hero-photo img{
height:340px}
.factory-stories{
grid-template-columns:1fr;
gap:48px}
.factory-story:first-child{
display:block;
grid-column:auto}
.factory-story img,.factory-story:first-child img{
height:330px}
.factory-story h2{
font-size:2rem}
.record-grid{
grid-template-columns:1fr 1fr;
gap:25px 16px}
.record-grid img{
height:230px}
.product-main img{
height:420px}
.pdp-copy{
padding:0}
.pdp-copy h2{
font-size:2.5rem}
.spec-table{
font-size:.78rem}
.custom-options{
gap:24px 18px}
.video-frame{
padding:18px}
.video-frame video{
height:470px}
.contact-layout .inquiry-form{
padding:24px 20px}
.cta-band .split{
grid-template-columns:1fr}
.cta-band .actions{
justify-content:start}
.cta-band h2{
font-size:2.4rem}
:lang(zh-CN) .hero h1,:lang(ja) .hero h1,:lang(ko) .hero h1{
font-size:clamp(2.6rem,10vw,3.7rem)}
:lang(ru) .hero h1{
font-size:clamp(2.5rem,10vw,4rem)}
}

@media(max-width:380px){
.brand-text{
font-size:1rem}
.brand svg{
width:28px}
.header-actions{
gap:10px}
.container{
padding-inline:18px}
.hero h1{
font-size:3.1rem}
.inquiry-form{
grid-template-columns:1fr}
.form-field{
grid-column:1/-1}
.application-tile img,.application-tile:first-child img{
height:330px}
.problem-note{
grid-template-columns:1fr}
.catalog-grid{
gap:25px 12px}
.contact-layout .inquiry-form{
padding:20px 15px}
.product-main img{
height:350px}
.record-grid img{
height:200px}
}

@media(prefers-reduced-motion:reduce){
html{
scroll-behavior:auto}
*,*:before,*:after{
animation:none!important;
transition:none!important}
.motion-ready .reveal.is-pending{
opacity:1;
transform:none}
}

/* Long localized headings must not widen their grid columns. */
h1,h2,h3{overflow-wrap:anywhere;hyphens:auto}
.hero-grid>*,.hero-row>*,.problem-shell>*,.split>*,.form-shell>*,.contact-layout>*,.pdp-grid>*,.case-feature>*{min-width:0}
.application-caption h3{padding-right:28px}

@media(max-width:980px){
html:not(.nav-ready) .header-inner{height:auto;min-height:78px;flex-wrap:wrap;padding-block:15px}
html:not(.nav-ready) .site-nav{display:block;position:static;order:3;width:100%;padding:0;border:0;box-shadow:none}
html:not(.nav-ready) .nav-links{display:flex;flex-wrap:wrap;gap:6px 20px}
html:not(.nav-ready) .menu-toggle{display:none}
}

:lang(en) h1,:lang(en) h2,:lang(en) h3{-webkit-hyphens:manual;hyphens:manual;overflow-wrap:normal;word-break:normal}
.brand .brand-logo{width:170px;height:88px;object-fit:contain;flex-shrink:0}
.footer-brand{display:inline-block}
.footer-brand .brand-logo{width:195px;height:100px;object-fit:contain;filter:brightness(0) invert(1)}
@media(max-width:1190px){.brand .brand-logo{width:150px;height:78px}}
@media(max-width:980px){.brand .brand-logo{width:138px;height:72px}}