/* ==========================================================================
   customuniformmanufacturer.com — site.css (全站统一层)
   token 与 _DESIGN-SYSTEM.md §0 一一对应；单节样式一律写在节内 <style>，⛔ 不进这里
   ========================================================================== */

:root{
  --navy:#1B2B41; --steel:#4E6E8A; --orange:#FF6A13; --silver:#C9D1D9; --ok:#2F8F5B;
  --bg:#FFFFFF; --bg2:#F2F4F6; --line:#DCE1E7; --g3:#8A96A3; --g4:#56626F;
  --on-dark:#FFFFFF; --on-dark-2:#C9D1D9;
  --fh:'Barlow Condensed','Arial Narrow',Arial,sans-serif;
  --fb:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  /* 字阶 1.333：14/16/21/28/38/50/67 */
  --t14:.875rem; --t16:1rem; --t21:1.3125rem; --t28:1.75rem; --t38:2.375rem; --t50:3.125rem; --t67:4.1875rem;
  --sec:76px; --in:28px; --card:21px;
  --w-xl:1240px; --w-lg:1080px; --w-sm:760px; --r:4px;
  --band:repeating-linear-gradient(90deg,var(--orange) 0 24px,transparent 24px 28px,var(--silver) 28px 52px,transparent 52px 56px);
  --band-v:repeating-linear-gradient(180deg,var(--orange) 0 24px,transparent 24px 28px,var(--silver) 28px 52px,transparent 52px 56px);
}
@media (max-width:767px){ :root{ --sec:64px; --in:20px; --t67:2.375rem; --t50:1.75rem; --t38:1.75rem; --cut:32px; } .lead{font-size:var(--t16)} }

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--fb);font-size:var(--t16);line-height:1.6;color:var(--navy);background:var(--bg);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
figure{margin:0}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--fh);font-weight:700;line-height:1.08;margin:0;letter-spacing:.005em;text-wrap:balance}
p{margin:0}
p,li,dd,td{text-wrap:pretty}
ul,ol{margin:0;padding:0}
table{border-collapse:collapse;width:100%}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:absolute;left:-9999px;top:8px;z-index:3000;background:var(--orange);color:var(--navy);padding:10px 16px;font-weight:600}
.skip-link:focus{left:8px}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.num,[data-count]{font-variant-numeric:tabular-nums}

/* 插件占位防 CLS */
#topbar-container{min-height:45px}
#dynamic-menu-container{min-height:70px}
@media (max-width:767px){#topbar-container{min-height:0}}

/* ---------- 容器与节 ---------- */
.wrap{width:100%;max-width:calc(var(--w-xl) + 48px);margin-inline:auto;padding-inline:24px}
.wrap--lg{max-width:calc(var(--w-lg) + 48px)}
.wrap--sm{max-width:calc(var(--w-sm) + 48px)}
.sec{padding-block:var(--sec);position:relative}
.bg-w{background-color:var(--bg);background-image:linear-gradient(180deg,#FFFFFF 0%,#FAFBFC 100%)}
.bg-g{background-color:var(--bg2);background-image:linear-gradient(180deg,#F2F4F6 0%,#EEF1F4 100%)}
.bg-d{background-color:var(--navy);color:var(--on-dark)}
.bg-d .muted{color:var(--on-dark-2)}

/* 照片带：底图 + 行内遮罩（遮罩 rgba 写在节内 style，闸扫得到） */
.photo-band{position:relative;isolation:isolate;overflow:hidden;background-size:cover;background-position:center}
.photo-band > .overlay{position:absolute;inset:0;z-index:-1}
.photo-band > .bg-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}

/* ---------- 标题系统 ---------- */
.eyebrow{display:flex;align-items:center;gap:12px;margin:0 0 18px;font-family:var(--fh);font-weight:600;font-size:var(--t14);letter-spacing:.08em;text-transform:uppercase}
.eyebrow .eb-no{color:var(--orange);font-weight:700;font-size:var(--t16)}
.eyebrow .eb-band{width:56px;height:6px;background:var(--band);flex:none}
.eyebrow .eb-tag{position:relative;display:inline-block;border:1px solid currentColor;border-radius:2px;padding:3px 10px 3px 24px;line-height:1.3}
.eyebrow .eb-tag::before{content:"";position:absolute;left:8px;top:50%;width:7px;height:7px;margin-top:-3.5px;border:1px solid currentColor;border-radius:50%}
.h2{font-size:var(--t50);max-width:22ch}
.h2--wide{max-width:none}
.lead{font-size:var(--t21);line-height:1.5;color:var(--g4);max-width:62ch;margin-top:var(--in)}
.bg-d .lead{color:var(--on-dark-2)}
.sec-head{margin-bottom:56px}
.h3{font-size:var(--t21);font-weight:700;line-height:1.2}
.small{font-size:var(--t14);line-height:1.5}
.muted{color:var(--g4)}
.big{font-family:var(--fh);font-weight:700;font-size:var(--t50);line-height:1;font-variant-numeric:tabular-nums}
.big--xl{font-size:var(--t67)}

/* ---------- 按钮 / 链接 ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:var(--r);font-family:var(--fh);font-weight:600;font-size:var(--t16);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:filter .2s,background-color .2s,color .2s}
.btn-primary{background:var(--orange);color:var(--navy)}
.btn-primary:hover{filter:brightness(.92)}
.btn-ghost{border-color:currentColor;background:transparent}
.bg-d .btn-ghost:hover{background:#fff;color:var(--navy)}
.btn svg{width:18px;height:18px}
.tlink{font-weight:600;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:1px}
.tlink:hover{color:var(--steel)}
.bg-d .tlink:hover{color:var(--silver)}
.arrow-link{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:var(--t14);text-decoration:none;letter-spacing:.02em}
.arrow-link::after{content:"→";transition:transform .2s}
.arrow-link:hover::after{transform:translateX(3px)}

/* ---------- 列表 ---------- */
.check-list{list-style:none;display:grid;gap:10px}
.check-list li{position:relative;padding-left:28px}
.check-list li::before{content:"";position:absolute;left:0;top:.3em;width:16px;height:16px;border:1.5px solid currentColor;border-radius:2px;background:linear-gradient(135deg,transparent 45%,currentColor 45% 55%,transparent 55%) no-repeat}
.check-list--tick li::before{border:0;background:none;width:16px;height:10px;top:.45em;border-left:2px solid var(--orange);border-bottom:2px solid var(--orange);transform:rotate(-45deg);border-radius:0}

/* ---------- 规格表（工单风格） ---------- */
.spec-table{font-size:var(--t14);background:#fff}
.spec-table th,.spec-table td{border:1px solid var(--line);padding:12px 14px;text-align:left;vertical-align:top}
.spec-table thead th{background:var(--navy);color:#fff;font-family:var(--fh);font-weight:600;font-size:var(--t14);letter-spacing:.06em;text-transform:uppercase;border-color:var(--navy)}
.spec-table tbody th{font-weight:600;background:var(--bg2);white-space:nowrap}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---------- 卡壳 ---------- */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.card-body{padding:var(--card)}
.bg-g .card{border-color:transparent}

/* ---------- 节间 divider：上节切自己的下沿，下节垫到下面（--cut 高度） ----------
   形 A 斜切下行 · 形 B 斜切上行 · 形 C 吊牌剪口（中央 V 口）· 形 D 阶梯；每形全页 ≤2 次 */
[class*="cut-"]{position:relative;z-index:2;margin-bottom:calc(-1 * var(--cut,56px))}
.cut-a{clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cut,56px)),0 100%)}
.cut-b{clip-path:polygon(0 0,100% 0,100% 100%,0 calc(100% - var(--cut,56px)))}
.cut-c{clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cut,56px)),calc(50% + 40px) calc(100% - var(--cut,56px)),50% 100%,calc(50% - 40px) calc(100% - var(--cut,56px)),0 calc(100% - var(--cut,56px)))}
.cut-d{clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cut,56px)),66% calc(100% - var(--cut,56px)),66% calc(100% - var(--cut,56px) / 2),33% calc(100% - var(--cut,56px) / 2),33% 100%,0 100%)}
.after-cut{padding-top:calc(var(--sec) + var(--cut,56px))}
/* 深色带顶沿反光带 */
.edge-band::before{content:"";position:absolute;left:0;right:0;top:0;height:8px;background:var(--band);z-index:1}
/* 针脚（深色带内上下缝线） */
.dv-stitch::before,.dv-stitch::after{content:"";position:absolute;left:24px;right:24px;height:0;border-top:2px dashed rgba(255,255,255,.55);z-index:1}
.dv-stitch::before{top:18px}
.dv-stitch::after{bottom:calc(18px + var(--cut,0px))}

/* ---------- 页顶反光带阅读进度条（MD2 scroll()） ---------- */
.read-progress{position:fixed;left:0;top:0;height:4px;width:100%;background:var(--band);transform-origin:0 50%;transform:scaleX(0);z-index:2000;pointer-events:none;display:none}
@supports (animation-timeline: scroll()){
  .read-progress{display:block;animation:readp linear both;animation-timeline:scroll(root block)}
  @keyframes readp{from{transform:scaleX(0)}to{transform:scaleX(1)}}
}

/* ---------- 表单 ---------- */
.field{display:grid;gap:6px}
.field label{font-size:var(--t14);font-weight:600}
.field input,.field textarea{font:inherit;font-size:var(--t16);color:var(--navy);background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;min-height:48px;width:100%}
.field textarea{min-height:120px;resize:vertical}
.field input:user-invalid,.field textarea:user-invalid,.was-validated .field :invalid{border-color:#C0392B;box-shadow:0 0 0 1px #C0392B}
.field .err{display:none;font-size:var(--t14);color:#FFB4A8}
.field:has(:user-invalid) .err,.was-validated .field:has(:invalid) .err{display:block}
.hp-field{position:absolute!important;left:-10000px;width:1px;height:1px;overflow:hidden}
.form-status{font-size:var(--t14);min-height:1.5em}
.form-status.is-error{color:#FFB4A8}
.form-status.is-ok{color:#9BE3B8}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .read-progress{display:none!important}
}