/* ==========================================================
   OMPSH 网站共用样式（四种语言、所有页面都用这一个文件）
   改颜色：只改下面 :root 里的变量即可
   ========================================================== */

/* ---------- 标题字体（仅英文字母和数字；日/韩/中文自动用系统字体） ---------- */
@font-face{
  font-family:"Chakra Petch";font-style:normal;font-weight:600;font-display:swap;
  src:url("/fonts/chakra-petch-latin-600-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Chakra Petch";font-style:normal;font-weight:700;font-display:swap;
  src:url("/fonts/chakra-petch-latin-700-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ---------- 颜色与字体变量 ---------- */
:root{
  --teal:#009695;        /* 品牌主色（Logo 波浪）：装饰、图标、线条 */
  --teal-ink:#007A79;    /* 主色加深一档：白底上的按钮和文字，保证对比度 */
  --blue:#6EA5DD;        /* 品牌辅助色（Logo 字母）：只用于装饰和深色底上的大字 */
  --blue-lite:#A6CBEE;
  --deep:#0A5D59;        /* 深青绿：大色块、页脚 */
  --deep-2:#0E7570;
  --bg:#EFF5F4;
  --card:#FFFFFF;
  --ink:#152E2C;
  --muted:#4D6966;
  --line:#D6E4E1;
  --on-deep:#C4E0DC;     /* 深色块上的次要文字 */
  --cut:34px;
  --sys:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial;
  --body:var(--sys),sans-serif;
  --disp:"Chakra Petch",var(--sys),sans-serif;
}
/* 日文 / 韩文 / 中文：系统字体回退 */
html:lang(ja){
  --body:var(--sys),"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Yu Gothic","Meiryo","Noto Sans JP","Noto Sans CJK JP",sans-serif;
  --disp:"Chakra Petch",var(--sys),"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Yu Gothic","Meiryo","Noto Sans JP","Noto Sans CJK JP",sans-serif;
}
html:lang(ko){
  --body:var(--sys),"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR","Noto Sans CJK KR",sans-serif;
  --disp:"Chakra Petch",var(--sys),"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR","Noto Sans CJK KR",sans-serif;
}
html:lang(zh){
  --body:var(--sys),"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC","Noto Sans CJK SC",sans-serif;
  --disp:"Chakra Petch",var(--sys),"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC","Noto Sans CJK SC",sans-serif;
}

/* ---------- 基础 ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
:focus-visible{outline:2px solid var(--teal-ink);outline-offset:3px}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
h1,h2,h3,.disp{font-family:var(--disp);text-wrap:balance}
html:lang(ko) body{word-break:keep-all}
html:lang(ja) h1,html:lang(ja) h2,html:lang(ja) h3{word-break:auto-phrase;line-break:strict}
.skip{position:absolute;left:-9999px;top:0;background:#fff;color:var(--teal-ink);padding:10px 16px;z-index:100}
.skip:focus{left:8px;top:8px}

/* 斜切角——全站的标志性形状 */
.cut-br{clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%)}
.cut-bl{clip-path:polygon(0 0,100% 0,100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)))}

/* ---------- 顶部导航 ---------- */
.site-nav{position:sticky;top:0;z-index:50;background:rgba(239,245,244,.95);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:66px}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--disp);font-weight:700;font-size:15px;line-height:1.25;color:var(--deep)}
.logo-img{height:34px;width:auto;flex:none}
.nav-links{display:flex;gap:24px;font-size:14px;font-weight:500;color:var(--muted)}
.nav-links a{padding:6px 0;border-bottom:2px solid transparent;white-space:nowrap}
.nav-links a:hover{color:var(--teal-ink)}
.nav-links a[aria-current="page"]{color:var(--teal-ink);border-bottom-color:var(--teal)}
.nav-right{display:flex;align-items:center;gap:14px}
.lang{display:flex;border:1px solid var(--line);font-size:12px;background:#fff}
.lang a{padding:7px 10px;color:var(--muted);white-space:nowrap;line-height:1.4}
.lang a:hover{color:var(--teal-ink)}
.lang a.on{background:var(--teal-ink);color:#fff}

.btn{display:inline-flex;align-items:center;gap:10px;background:var(--teal-ink);color:#fff;padding:12px 22px;font-family:var(--disp);font-size:14px;font-weight:600;line-height:1.3;white-space:nowrap;clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%)}
.btn:hover{background:var(--deep)}
.btn .arr{font-family:var(--body)}
.btn-light{background:#fff;color:var(--deep)}
.btn-light:hover{background:var(--bg)}

/* 平板和手机：导航拆成几行，不再固定在顶部 */
@media(max-width:1140px){
  .site-nav{position:static}
  .nav-inner{display:grid;grid-template-columns:1fr auto;grid-template-areas:"brand btn" "links lang";gap:10px 16px;padding-top:12px;padding-bottom:12px}
  .nav-right{display:contents}
  .logo{grid-area:brand}
  .nav-right .btn{grid-area:btn;justify-self:end}
  .nav-links{grid-area:links}
  .lang{grid-area:lang;justify-self:end}
}
@media(max-width:640px){
  .nav-inner{grid-template-areas:"brand btn" "lang lang" "links links"}
  .logo{flex-direction:column;align-items:flex-start;gap:3px;font-size:11.5px}
  .logo-img{height:26px}
  .nav-right .btn{padding:9px 14px;font-size:13px;gap:6px;align-self:center}
  .lang{justify-self:stretch}
  .lang a{flex:1;text-align:center;padding:7px 4px}
  .nav-links{justify-content:space-between;gap:12px}
}

/* ---------- 首页主视觉 ---------- */
.hero-deep{background:var(--deep);color:#fff;padding:84px 0 150px;clip-path:polygon(0 0,100% 0,100% 100%,220px 100%,120px calc(100% - 60px),0 calc(100% - 60px))}
.hero-top{display:grid;grid-template-columns:1.3fr .7fr;gap:40px;align-items:end}
h1{font-size:clamp(32px,4.6vw,56px);line-height:1.14;font-weight:700}
h1 .lite{display:block;font-weight:600;color:var(--blue-lite)}
.hero-sub{font-size:14.5px;color:var(--on-deep);text-align:right;max-width:40ch;justify-self:end}
html:lang(ja) .hero-sub,html:lang(ko) .hero-sub,html:lang(zh) .hero-sub{text-align:left}
.hero-photo{margin-top:-92px;position:relative}
.hero-photo img{width:100%;height:440px;object-fit:cover}
.hero-cta-row{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin-top:26px;flex-wrap:wrap}
.mission{font-size:14px}
.mission .m-title{font-family:var(--disp);font-weight:600;color:var(--deep);margin-bottom:8px}
.mission li{color:var(--muted);margin-bottom:5px}
.mission li::before{content:"› ";color:var(--teal);font-weight:700}
@media(max-width:820px){
  .hero-deep{padding:56px 0 124px;clip-path:polygon(0 0,100% 0,100% 100%,90px 100%,40px calc(100% - 34px),0 calc(100% - 34px))}
  .hero-top{grid-template-columns:1fr;gap:18px}
  .hero-sub{text-align:left;justify-self:start;max-width:none}
  .hero-photo img{height:auto;aspect-ratio:4/3}
  .hero-cta-row{flex-direction:column;gap:22px}
}

/* ---------- 内页标题区（产品 / 关于 / 联系） ---------- */
.page-hero{background:var(--deep);color:#fff;padding:64px 0 96px;clip-path:polygon(0 0,100% 0,100% 100%,220px 100%,120px calc(100% - 60px),0 calc(100% - 60px))}
.page-hero .kicker{color:var(--blue-lite)}
.page-hero h1{font-size:clamp(24px,3.8vw,46px);max-width:24ch}
.page-hero p{color:var(--on-deep);font-size:15px;margin-top:14px;max-width:60ch}
@media(max-width:820px){.page-hero{padding:44px 0 72px;clip-path:polygon(0 0,100% 0,100% 100%,90px 100%,40px calc(100% - 34px),0 calc(100% - 34px))}}

/* ---------- 通用板块 ---------- */
section{padding:86px 0}
section.tight{padding-top:0}
h2{font-size:clamp(25px,3.1vw,38px);line-height:1.22;font-weight:700;color:var(--ink)}
.kicker{font-family:var(--disp);font-size:12px;font-weight:600;letter-spacing:.16em;color:var(--teal-ink);margin-bottom:12px;text-transform:uppercase}
.sec-head{margin-bottom:38px;max-width:30em}
@media(max-width:820px){section{padding:60px 0}}

/* ---------- 图文左右排（公司简介 / 关于我们） ---------- */
.split{display:grid;grid-template-columns:.95fr 1.05fr;gap:56px;align-items:center}
.split-photo{position:relative}
.split-photo img{width:100%;height:360px;object-fit:cover}
.since{position:absolute;right:-18px;bottom:-18px;background:var(--deep);color:#fff;padding:18px 26px;text-align:right;clip-path:polygon(0 0,100% 0,100% 100%,26px 100%,0 calc(100% - 26px))}
.since .s-k{font-size:11px;letter-spacing:.12em;color:var(--on-deep);font-family:var(--disp)}
.since .s-v{font-family:var(--disp);font-size:40px;font-weight:700;line-height:1.05}
.split-txt p{color:var(--muted);font-size:15.5px;margin-top:18px;max-width:56ch}
.split-txt .btn{margin-top:26px}
@media(max-width:820px){
  .split{grid-template-columns:1fr;gap:44px}
  .split-photo img{height:auto;aspect-ratio:4/3}
  .since{right:0;bottom:-18px}
}

/* ---------- 卡片 ---------- */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.cards.three{grid-template-columns:repeat(3,1fr)}
.card{background:var(--card);padding:24px 22px 0;display:flex;flex-direction:column;gap:12px;box-shadow:0 1px 0 var(--line)}
.card.text{padding-bottom:40px}
.card .ico{width:44px;height:44px;border:1px solid var(--teal);display:grid;place-items:center;color:var(--teal-ink);font-family:var(--disp);font-weight:600;font-size:12px}
.card h2,.card h3{font-size:19px;line-height:1.35;font-weight:600;color:var(--ink)}
.card p{font-size:14.5px;color:var(--muted)}
a.card:hover h3{color:var(--teal-ink)}
/* 产品照片：第一张占整行，之后加的照片自动两张一排 */
.card .photos{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:6px -22px 0}
.card .photos img{width:100%;aspect-ratio:4/3;object-fit:cover}
.card .photos img:first-child{grid-column:1/-1}
@media(max-width:900px){.cards.three{grid-template-columns:1fr}.card.text{padding-bottom:34px}}
@media(max-width:640px){.cards{grid-template-columns:1fr}}

/* ---------- 工厂实景（两张照片 + 要点） ---------- */
.factory-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.factory-grid img{width:100%;aspect-ratio:4/3;object-fit:cover}
.checks{margin-top:30px;display:grid;grid-template-columns:repeat(3,1fr);gap:14px 28px;font-size:15px;color:var(--ink)}
.checks li{padding-left:22px;position:relative}
.checks li::before{content:"›";position:absolute;left:0;color:var(--teal);font-weight:700}
@media(max-width:820px){.checks{grid-template-columns:1fr}}
@media(max-width:640px){.factory-grid{grid-template-columns:1fr}}

/* ---------- 数据条 ---------- */
.band{background:var(--deep);color:#fff}
.band-inner{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;padding-top:70px;padding-bottom:86px}
.band h2{color:#fff}
.band p.lead{color:var(--on-deep);font-size:15.5px;margin-top:14px;max-width:50ch}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.stat .v{font-family:var(--disp);font-size:clamp(30px,3.6vw,44px);font-weight:700;line-height:1.1}
.stat .v small{font-size:.5em;font-weight:600}
.stat .k{font-size:13.5px;color:var(--on-deep);margin-top:4px}
@media(max-width:820px){.band-inner{grid-template-columns:1fr;gap:36px;padding-top:56px;padding-bottom:76px}}

/* ---------- 联系引导（深色大框） ---------- */
.cta{padding-bottom:0}
.cta-box{background:var(--deep);color:#fff;display:grid;grid-template-columns:1.1fr .9fr;align-items:stretch}
.cta-txt{padding:56px 48px;align-self:center}
.cta-txt h2{color:#fff;max-width:22ch}
.cta-txt p{color:var(--on-deep);font-size:15px;margin-top:14px;max-width:46ch}
.cta-txt .btn{margin-top:26px}
.cta-box img{width:100%;height:100%;min-height:300px;object-fit:cover}
@media(max-width:820px){.cta-box{grid-template-columns:1fr}.cta-txt{padding:40px 28px}.cta-box img{min-height:0;aspect-ratio:3/2}}

/* ---------- 联系我们页 ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.mail-box{background:var(--card);padding:34px 32px 44px;box-shadow:0 1px 0 var(--line)}
.mail-box .label{font-family:var(--disp);font-size:12px;font-weight:600;letter-spacing:.16em;color:var(--teal-ink);text-transform:uppercase}
.mail-box .mail{display:inline-block;margin:10px 0 24px;font-family:var(--disp);font-weight:700;font-size:clamp(24px,3vw,34px);color:var(--deep);border-bottom:2px solid var(--teal)}
.mail-box .mail:hover{color:var(--teal-ink)}
.contact-help h2{font-size:22px}
.contact-help ul{margin-top:18px}
.contact-help li{padding:12px 0 12px 22px;position:relative;border-bottom:1px solid var(--line);color:var(--muted);font-size:15px}
.contact-help li::before{content:"›";position:absolute;left:2px;color:var(--teal);font-weight:700}
.contact-photo{margin-top:56px}
.contact-photo img{width:100%;height:380px;object-fit:cover}
@media(max-width:820px){.contact-grid{grid-template-columns:1fr;gap:40px}.contact-photo img{height:auto;aspect-ratio:3/2}.mail-box{padding:28px 22px 40px}}

/* ---------- 页脚 ---------- */
footer{background:var(--deep);color:#BFD9D5;margin-top:86px;padding:56px 0 28px}
.f-grid{display:grid;grid-template-columns:1.4fr .8fr 1fr;gap:40px;padding-bottom:36px;border-bottom:1px solid rgba(255,255,255,.16)}
.f-grid .logo{color:#fff;margin-bottom:14px}
.f-grid p{font-size:14px;max-width:40ch}
.f-col .t{font-family:var(--disp);font-weight:600;color:#fff;font-size:14px;margin-bottom:12px}
.f-col li{font-size:14px;margin-bottom:8px}
.f-col a:hover{color:#fff;text-decoration:underline}
.f-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:22px;font-size:12.5px;color:#A9C9C5}
@media(max-width:820px){.f-grid{grid-template-columns:1fr;gap:30px}footer{margin-top:60px}}

/* ---------- 404 页 ---------- */
.nf{min-height:60vh;display:grid;place-items:center;text-align:center;padding:80px 24px}
.nf .code{font-family:var(--disp);font-weight:700;font-size:96px;line-height:1;color:var(--teal)}
.nf h1{font-size:28px;margin:14px 0 10px;color:var(--ink)}
.nf p{color:var(--muted)}
.nf ul,.lang-list{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:26px}