:root {
  --ink: #172433;
  --muted: #617181;
  --navy: #10283d;
  --navy-2: #1d415d;
  --blue: #2f6888;
  --orange: #e58a45;
  --orange-soft: #fff0e1;
  --paper: #f4f7f8;
  --line: #dce4e9;
  --white: #fff;
  --radius: 16px;
  --shadow: 0 12px 32px rgba(17, 42, 61, .08);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--white); font: 16px/1.65 Inter, "Segoe UI", "Microsoft YaHei", sans-serif; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
.wrap { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.topline { background: var(--navy); color: #d9e5ed; font-size: 12px; letter-spacing: .04em; }
.topline .wrap { display: flex; justify-content: space-between; gap: 16px; padding-block: 8px; }
.topline a { color: white; }
.header { position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,.96); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.nav { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 11px; font-weight: 800; color: var(--navy); letter-spacing: -.03em; }
.brand-mark { display: none; }
.brand small { display: block; color: var(--muted); font-size: 10px; letter-spacing: .12em; font-weight: 700; text-transform: uppercase; }
.nav-links { display: flex; align-items: center; gap: 25px; color: #34495a; font-size: 14px; font-weight: 650; }
.nav-links a:hover, .nav-links a.active { color: var(--orange); }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 19px; border: 1px solid transparent; border-radius: 9px; font: inherit; font-size: 14px; font-weight: 750; cursor: pointer; transition: .18s ease; }
.btn-primary { color: white; background: var(--orange); box-shadow: 0 8px 18px rgba(229,138,69,.2); }
.btn-primary:hover { background: #cc7132; transform: translateY(-1px); }
.btn-outline { color: white; border-color: rgba(255,255,255,.45); background: rgba(255,255,255,.06); }
.btn-outline:hover { background: rgba(255,255,255,.14); }
.btn-light { background: white; color: var(--navy); }
.menu-toggle { display: none; border: 1px solid var(--line); background: white; padding: 9px 12px; border-radius: 9px; color: var(--navy); font: inherit; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--orange); text-transform: uppercase; letter-spacing: .14em; font-size: 11px; font-weight: 800; }
.eyebrow::before { content: ""; width: 22px; height: 2px; background: currentColor; }
h1,h2,h3,p { margin-top: 0; }
h1,h2,h3 { color: var(--navy); line-height: 1.16; letter-spacing: -.035em; }
h1 { font-size: clamp(38px, 5.1vw, 64px); margin: 17px 0 20px; }
h2 { font-size: clamp(30px, 3.5vw, 43px); margin-bottom: 14px; }
h3 { font-size: 20px; margin-bottom: 9px; }
p { color: var(--muted); }
.hero { overflow: hidden; color: white; background: radial-gradient(circle at 81% 32%, rgba(89,141,174,.34), transparent 32%), linear-gradient(122deg, #10283d 0%, #173a55 58%, #24516c 100%); }
.hero .wrap { min-height: 540px; display: grid; grid-template-columns: 1.04fr .96fr; align-items: center; gap: 36px; padding-block: 68px; }
.hero .eyebrow { color: #f3b77f; }
.hero h1 { max-width: 700px; color: white; }
.hero-copy { color: #d3e0e9; font-size: 17px; max-width: 570px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 25px; }
.hero-points { display: flex; flex-wrap: wrap; gap: 10px 20px; color: #d8e4eb; font-size: 13px; }
.hero-points span::before { content: "✓"; color: #f1aa69; margin-right: 8px; font-weight: 900; }
.hero-art { position: relative; min-height: 340px; display: grid; place-items: center; }
.art-board { position: relative; width: min(100%, 490px); aspect-ratio: 1.18; border: 1px solid rgba(255,255,255,.15); border-radius: 28px; background: linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.025)); box-shadow: 0 32px 80px rgba(0,0,0,.22); }
.art-board::before { content: "MULTI-CATEGORY SOURCING"; position: absolute; top: 20px; left: 24px; color: #d8e7ef; font-size: 9px; font-weight: 800; letter-spacing: .2em; }
.art-part { position: absolute; width: 43%; height: 56%; border-radius: 18px; display: grid; place-items: center; background: #fff; box-shadow: 0 18px 34px rgba(0,0,0,.18); }
.art-part svg,.art-part img { width: 78%; height: 78%; object-fit: contain; mix-blend-mode: multiply; }
.art-part.screw { top: 20%; left: 7%; transform: rotate(-10deg); }
.art-part.gasket { top: 15%; right: 7%; width: 42%; height: 49%; transform: rotate(8deg); }
.art-part.insert { bottom: 8%; left: 29%; width: 43%; height: 47%; transform: rotate(4deg); }
.art-label { position: absolute; color: white; background: var(--orange); border-radius: 999px; padding: 6px 11px; font-size: 10px; font-weight: 800; letter-spacing: .05em; box-shadow: 0 8px 18px rgba(0,0,0,.17); }
.art-label.l1 { top: 46%; left: 4%; }.art-label.l2 { top: 42%; right: 3%; }.art-label.l3 { bottom: 5%; right: 12%; }
.section { padding: 84px 0; }
.section-soft { background: var(--paper); }
.section-head { max-width: 720px; margin-bottom: 35px; }
.section-head .eyebrow { margin-bottom: 13px; }
.section-head p { font-size: 16px; margin-bottom: 0; }
.category-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.category-card { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: white; box-shadow: var(--shadow); transition: .2s ease; }
.category-card:hover { transform: translateY(-4px); box-shadow: 0 18px 38px rgba(17,42,61,.12); }
.category-visual { min-height: 205px; padding: 20px; display: grid; place-items: center; background: #eaf0f3; }
.category-visual .product-illustration { width: 100%; max-width: 260px; height: 165px; }
.category-body { padding: 22px; }
.category-body p { font-size: 14px; min-height: 48px; }
.tag-row { display: flex; flex-wrap: wrap; gap: 7px; margin: 15px 0 18px; }
.tag { padding: 4px 8px; border: 1px solid #dce7ec; border-radius: 6px; background: #f5f8f9; color: var(--blue); font-size: 11px; font-weight: 750; }
.text-link { color: var(--blue); font-weight: 800; font-size: 14px; }
.text-link span { display: inline-block; transition: transform .18s; }.text-link:hover span { transform: translateX(4px); }
.benefit-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 15px; }
.benefit { padding: 23px; border-radius: 14px; background: white; border: 1px solid var(--line); }
.benefit-num { color: var(--orange); font-size: 11px; font-weight: 900; letter-spacing: .12em; margin-bottom: 23px; }
.benefit p { margin: 0; font-size: 14px; }
.steps { display: grid; grid-template-columns: repeat(3,1fr); counter-reset: steps; gap: 44px 22px; margin-top: 37px; }
.step { padding: 22px 22px 10px 0; border-top: 1px solid #cbd7de; position: relative; }
.step::before { counter-increment: steps; content: "0" counter(steps); display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid #cbd7de; border-radius: 50%; background: white; color: var(--orange); font-size: 12px; font-weight: 850; margin-top: -42px; margin-bottom: 17px; }
.step p { font-size: 14px; margin: 0; }
.about-grid { display: grid; grid-template-columns: .85fr 1.15fr; align-items: start; gap: 58px; }
.about-copy .eyebrow { margin-bottom: 13px; }.about-copy p { max-width: 500px; }
.trust-list { display: grid; gap: 10px; }
.trust-list article { display: grid; grid-template-columns: 42px 1fr; gap: 15px; padding: 17px 19px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.trust-list article > span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--orange-soft); color: #a8561f; font-size: 11px; font-weight: 850; }
.trust-list h3 { font-size: 16px; margin: 0 0 4px; }.trust-list p { font-size: 13px; margin: 0; }
.callout { display: flex; align-items: center; justify-content: space-between; gap: 26px; border-radius: 20px; padding: 35px 40px; color: white; background: var(--navy); }
.callout h2 { color: white; font-size: clamp(26px,3vw,35px); margin-bottom: 8px; }
.callout p { color: #c7d6df; margin: 0; }
.callout .eyebrow { color: #f3b77f; margin-bottom: 12px; }
.footer { padding: 55px 0 22px; color: #b8c8d2; background: #0c2031; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.1fr; gap: 30px; padding-bottom: 35px; }
.footer .brand { color: white; }.footer .brand small { color: #91a8b7; }
.footer p { color: #a8bbc7; font-size: 13px; max-width: 290px; margin-top: 15px; }
.footer h4 { color: white; font-size: 12px; letter-spacing: .13em; text-transform: uppercase; margin: 4px 0 15px; }
.footer ul { list-style: none; margin: 0; padding: 0; }.footer li { font-size: 13px; margin: 8px 0; }.footer li a:hover { color: white; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.14); padding-top: 17px; color: #879daa; font-size: 11px; }
.rfq-home { display: grid; grid-template-columns: .85fr 1.15fr; gap: 46px; align-items: start; }
.rfq-home h2 { margin: 14px 0; }.rfq-home > div > p { max-width: 450px; }
.contact-proof { display: grid; gap: 6px; margin-top: 30px; padding: 18px; border-left: 3px solid var(--orange); border-radius: 0 10px 10px 0; background: #fff; color: var(--ink); }
.contact-proof strong { font-size: 13px; }.contact-proof span { color: var(--blue); font-size: 13px; font-weight: 700; }.contact-proof small { color: var(--muted); font-size: 11px; line-height: 1.5; }
.contact-proof small a { color: var(--blue); font-weight: 750; }.secondary-contact { color: var(--muted); font-size: 12px; text-decoration: underline; text-underline-offset: 3px; }
.rfq-home .rfq-form { grid-template-columns: 1fr 1fr; box-shadow: var(--shadow); border: 1px solid var(--line); }
.page-hero { padding: 63px 0 55px; color: white; background: linear-gradient(120deg,#10283d,#214a66); }
.page-hero .wrap { display: grid; grid-template-columns: 1.1fr .9fr; gap: 32px; align-items: center; }
.page-hero .eyebrow { color: #f3b77f; }
.page-hero h1 { color: white; font-size: clamp(36px,4.6vw,56px); max-width: 720px; }
.page-hero p { color: #d0dee7; max-width: 650px; margin-bottom: 22px; }
.page-hero-art { min-height: 245px; border: 1px solid rgba(255,255,255,.16); border-radius: 22px; display: grid; place-items: center; background: rgba(255,255,255,.06); }
.page-hero-art .product-illustration { width: min(84%, 390px); height: 215px; }
.page-hero-art .hero-product-photo { width: 100%; height: 215px; object-fit: contain; background: transparent; border-radius: 12px; }
.product-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 17px; }
.product-card { overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: white; box-shadow: 0 7px 20px rgba(17,42,61,.045); }
.product-art { height: 178px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 12px 16px 8px; background: #fff; }
.product-art .product-illustration { width: 100%; height: 145px; }
.product-photo { width: 100%; height: 137px; object-fit: contain; background: transparent; }
.product-card:nth-child(1) .product-photo { transform: scale(.88); }
.product-card:nth-child(4) .product-photo { transform: scale(1.28); }
.gaskets-page .product-card:nth-child(1) .product-photo,
.gaskets-page .product-card:nth-child(4) .product-photo { transform: none; }
.photo-source { color: #687d88; font-size: 10px; line-height: 1; text-decoration: underline; text-underline-offset: 2px; }
.category-photo { width: 100%; max-width: 260px; height: 165px; object-fit: contain; background: transparent; mix-blend-mode: multiply; }
.product-info { padding: 19px; }
.product-code { display: inline-block; margin-bottom: 10px; color: var(--blue); background: #eaf2f6; border-radius: 5px; padding: 3px 7px; font-size: 10px; letter-spacing: .04em; font-weight: 850; }
.product-info p { font-size: 13px; min-height: 43px; margin-bottom: 14px; }
.product-meta { padding-top: 12px; border-top: 1px solid var(--line); color: #718190; font-size: 11px; }
.product-meta strong { color: #334b5c; }
.note-band { padding: 15px 18px; border-left: 3px solid var(--orange); background: var(--orange-soft); border-radius: 0 9px 9px 0; color: #684a34; font-size: 13px; }
.info-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.info-box { padding: 26px; border: 1px solid var(--line); border-radius: 14px; background: white; }
.info-box ul { padding-left: 19px; color: var(--muted); margin-bottom: 0; }.info-box li { margin: 7px 0; }
.capability-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px 18px; }
.capability-card { display:grid; grid-template-columns:46px 1fr; align-items:start; gap:14px; padding:18px 16px; border:1px solid transparent; border-radius:13px; background:transparent; transition:background .2s,border-color .2s,box-shadow .2s,transform .2s; }
.capability-card:last-child { grid-column:2; }
.capability-card:hover { transform:translateY(-3px); border-color:var(--line); background:#fff; box-shadow:0 12px 26px rgba(17,42,61,.09); }
.capability-icon { display:grid; place-items:center; width:44px; height:44px; border-radius:13px; background:#eaf0f3; color:var(--navy-2); transition:background .2s,color .2s,transform .2s; }
.capability-icon svg { width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.capability-card:hover .capability-icon { transform:scale(1.06); background:var(--navy); color:#ffc247; }
.capability-card h3 { margin:2px 0 7px; font-size:16px; transition:color .2s; }
.capability-card:hover h3 { color:var(--blue); }
.capability-card p { margin:0; font-size:13px; }
.custom-flow { display:grid; grid-template-columns:repeat(3,1fr); column-gap:28px; row-gap:35px; }
.custom-step { min-height:135px; padding:0 10px 17px 0; border-bottom:1px solid var(--line); transition:border-color .2s; }
.custom-step:hover { border-color:var(--orange); }
.custom-step-mark { display:flex; align-items:center; gap:11px; margin-bottom:13px; }
.custom-step-mark span { display:grid; place-items:center; width:31px; height:31px; border-radius:50%; background:var(--orange-soft); color:#a8561f; font-size:10px; font-weight:900; transition:background .2s,color .2s; }
.custom-step-mark svg { width:22px; height:22px; fill:none; stroke:#557084; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; transition:stroke .2s,transform .2s; }
.custom-step:hover .custom-step-mark span { background:var(--orange); color:#fff; }
.custom-step:hover .custom-step-mark svg { transform:translateY(-2px); stroke:var(--orange); }
.custom-step h3 { margin-bottom:7px; font-size:16px; transition:color .2s; }
.custom-step:hover h3 { color:var(--blue); }
.custom-step p { margin:0; font-size:13px; }
.fabrication-hero-art { padding:30px; }
.fabrication-hero-list { width:min(100%,390px); display:grid; gap:13px; padding:27px; border:1px solid rgba(255,255,255,.2); border-radius:16px; background:rgba(255,255,255,.08); }
.fabrication-hero-list span { padding:12px 14px; border:1px solid rgba(255,255,255,.18); border-radius:8px; color:#fff; font-size:12px; font-weight:800; letter-spacing:.1em; background:rgba(255,255,255,.05); }
.fabrication-hero-list span:nth-child(2) { margin-left:20px; }
.fabrication-hero-list span:nth-child(3) { margin-left:40px; }
.fabrication-hero-list small { margin-top:6px; color:#c4d4de; font-size:11px; }
.fabrication-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.fabrication-card { min-height:220px; padding:23px 22px 19px; border:1px solid var(--line); border-radius:14px; background:#fff; box-shadow:0 7px 20px rgba(17,42,61,.045); transition:transform .2s,border-color .2s,box-shadow .2s; }
.fabrication-card:hover { transform:translateY(-3px); border-color:#c8d7df; box-shadow:0 14px 28px rgba(17,42,61,.09); }
.fabrication-index { display:inline-grid; place-items:center; width:34px; height:34px; margin-bottom:18px; border-radius:11px; background:var(--orange-soft); color:#a8561f; font-size:10px; font-weight:900; }
.fabrication-card h3 { margin-bottom:8px; font-size:17px; }
.fabrication-card p { min-height:64px; margin-bottom:14px; font-size:13px; }
.fabrication-card .product-meta { font-size:10px; }
.fabrication-open { background:#f8fafb; }
.fabrication-open .text-link { display:inline-block; margin-top:5px; }
.fabrication-callout { display:flex; justify-content:space-between; align-items:center; gap:24px; margin-top:22px; padding:21px 24px; border:1px solid var(--line); border-radius:13px; background:#f7fafb; }
.fabrication-callout h3 { margin:0 0 4px; font-size:16px; }
.fabrication-callout p { margin:0; color:var(--muted); font-size:13px; }
.fabrication-callout .btn { flex:none; }
.factory-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:15px; }
.factory-card { overflow:hidden; margin:0; border:1px solid var(--line); border-radius:13px; background:#fff; box-shadow:0 7px 20px rgba(17,42,61,.045); }
.factory-card img { width:100%; height:185px; object-fit:cover; background:#eaf0f3; }
.factory-card figcaption { padding:12px 14px; color:var(--ink); font-size:13px; font-weight:750; }
.factory-note { margin:14px 0 0; font-size:11px; }
.rfq { background: var(--navy); color: white; }
.rfq .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 35px; align-items: center; }
.rfq h2 { color: white; }.rfq p { color: #c1d1dc; }
.rfq-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 22px; border-radius: 16px; background: white; }
.rfq-form label { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 5px; color: #506273; font-size: 11px; font-weight: 750; }
.rfq-form label input,.rfq-form label textarea { grid-column: 1/-1; }
.field-optional { color:#98a5ae; font-size:10px; font-weight:500; }
.rfq-form input,.rfq-form select,.rfq-form textarea { width: 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: 7px; color: var(--ink); font: inherit; font-size: 13px; background: white; }
.rfq-form input::placeholder,.rfq-form textarea::placeholder { color:#b8c2cd; opacity:1; font-weight:400; }
.rfq-form textarea { min-height: 76px; resize: vertical; }.rfq-form .full { grid-column: 1/-1; }.rfq-form button { grid-column: 1/-1; }
.form-hint { grid-column: 1/-1; color: #85929c; font-size: 10px; margin: 0; }
@media(max-width: 900px) {
  .nav-links { gap: 14px; font-size: 12px; }
  .nav > .btn { display: none; }
  .hero .wrap { min-height: 0; grid-template-columns: 1fr; padding-block: 57px; }
  .hero-art { min-height: 310px; }
  .benefit-grid { grid-template-columns: repeat(2,1fr); }
  .capability-grid,.custom-flow { grid-template-columns: repeat(2,1fr); }
  .fabrication-grid { grid-template-columns:repeat(2,1fr); }
  .capability-card:last-child { grid-column:1 / -1; width:calc(50% - 9px); justify-self:center; }
  .factory-grid { grid-template-columns: repeat(2,1fr); }
  .category-grid,.product-grid { grid-template-columns: repeat(2,1fr); }
  .steps { grid-template-columns: repeat(3,1fr); row-gap: 46px; }
  .footer-grid { grid-template-columns: repeat(2,1fr); }
}
@media(max-width: 650px) {
  .wrap { width: min(100% - 30px, 540px); }
  .topline .wrap { font-size: 10px; }
  .nav { min-height: 66px; }
  .menu-toggle { display: block; }
  .nav-links { display: none; position: absolute; left: 0; right: 0; top: 66px; padding: 14px 20px 18px; background: white; border-bottom: 1px solid var(--line); box-shadow: var(--shadow); flex-direction: column; align-items: stretch; gap: 0; }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 12px 4px; border-bottom: 1px solid #edf1f3; font-size: 14px; }
  .nav > .btn { display: none; }
  .hero .wrap { padding-block: 44px 35px; }
  h1 { font-size: 39px; }
  .hero-copy { font-size: 15px; }
  .hero-art { min-height: 245px; }
  .art-board { width: 100%; }
  .section { padding: 60px 0; }
  .category-grid,.product-grid,.info-cols,.rfq .wrap,.about-grid,.rfq-home { grid-template-columns: 1fr; }
  .category-body p { min-height: 0; }
  .benefit-grid { grid-template-columns: 1fr 1fr; }
  .capability-grid,.custom-flow { grid-template-columns: 1fr; }
  .fabrication-grid { grid-template-columns:1fr; }
  .fabrication-card { min-height:0; }
  .fabrication-card p { min-height:0; }
  .fabrication-callout { align-items:flex-start; flex-direction:column; padding:20px; }
  .fabrication-hero-art { padding:18px; }
  .fabrication-hero-list { padding:19px; }
  .capability-card:last-child { grid-column:auto; width:auto; }
  .factory-card img { height:150px; }
  .benefit { padding: 17px; }
  .steps { grid-template-columns: 1fr 1fr; row-gap: 46px; margin-top: 50px; }
  .step { padding-right: 14px; }
  .callout { padding: 27px 22px; align-items: flex-start; flex-direction: column; }
  .about-grid,.rfq-home { gap: 26px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 23px 14px; }
  .page-hero { padding: 45px 0 38px; }
  .page-hero .wrap { grid-template-columns: 1fr; }
  .page-hero-art { min-height: 190px; }.page-hero-art .product-illustration,.page-hero-art .hero-product-photo { height: 170px; }
  .rfq-form { padding: 17px; }
}






/* Supplier capability gallery on the gasket and sealing page */
.supplier-capability { background: var(--white); }
.supplier-capability .section-head { max-width: 780px; }
.supplier-capability-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.supplier-capability-card { margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: white; box-shadow: var(--shadow); }
.supplier-capability-card img { width: 100%; height: 230px; object-fit: cover; }
.supplier-capability-card figcaption { display: grid; gap: 4px; padding: 17px 19px 19px; }
.supplier-capability-card figcaption strong { color: var(--navy); font-size: 17px; }
.supplier-capability-card figcaption span,.supplier-capability-note { color: var(--muted); font-size: 13px; }
.supplier-capability-note { margin: 18px 0 0; }
@media(max-width: 900px) { .supplier-capability-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media(max-width: 650px) { .supplier-capability-grid { grid-template-columns: 1fr; } .supplier-capability-card img { height: 210px; } }
/* Blue and white industrial refresh: editorial navigation, real photography, and clearer quote paths. */
:root {
  --ink: #17202c;
  --muted: #607083;
  --navy: #102b4b;
  --navy-2: #183d67;
  --blue: #2459a6;
  --orange: #e9ad1b;
  --orange-soft: #fff6dc;
  --paper: #f4f6f8;
  --line: #d9e0e7;
  --radius: 12px;
  --shadow: 0 10px 28px rgba(16,43,75,.07);
}
body { color:var(--ink); background:#fff; font-family:Inter,"Segoe UI","Microsoft YaHei",sans-serif; }
.wrap { width:min(1320px,calc(100% - 64px)); }
.topline { color:#d6e1ed; background:#102b4b; font-size:11px; letter-spacing:.035em; }
.topline .wrap { padding-block:6px; }
.header { background:rgba(255,255,255,.97); border-bottom-color:#e5e9ed; }
.nav { min-height:78px; gap:22px; }
.brand { gap:10px; color:#18212c; font-size:19px; letter-spacing:-.035em; }
.brand-mark { display:block; width:36px; height:36px; object-fit:contain; flex:none; }
.brand small { color:#718093; font-size:8px; letter-spacing:.19em; }
.nav-links { gap:clamp(13px,1.7vw,26px); color:#465363; font-size:13px; font-weight:600; }
.nav-links a:hover,.nav-links a.active { color:var(--blue); }
.btn { min-height:45px; padding-inline:20px; border-radius:7px; font-size:13px; }
.btn-primary { color:#fff; background:var(--blue); box-shadow:0 7px 18px rgba(36,89,166,.17); }
.btn-primary:hover { background:#174987; }
.btn-outline { border-color:rgba(255,255,255,.65); background:rgba(255,255,255,.08); }
.btn-light { color:#143b69; }
.eyebrow { color:var(--blue); font-size:10px; letter-spacing:.16em; }
.eyebrow::before { width:18px; height:1px; }
h1,h2,h3 { color:#142c49; letter-spacing:-.04em; }
h1 { font-size:clamp(40px,4.5vw,60px); line-height:1.12; }
h2 { font-size:clamp(30px,3.4vw,46px); line-height:1.1; }
h3 { letter-spacing:-.025em; }
.hero { background:var(--navy); }
.hero .wrap { min-height:620px; grid-template-columns:.95fr 1.05fr; gap:54px; padding-block:64px; }
.hero .eyebrow { color:#e7b733; }
.hero h1 { max-width:650px; margin-block:17px 22px; }
.hero-copy { max-width:590px; color:#d6e0ea; font-size:16px; line-height:1.8; }
.hero-actions { margin:29px 0 26px; }
.hero-points { gap:9px 18px; color:#c9d6e3; font-size:12px; }
.hero-points span::before { content:""; display:inline-block; width:5px; height:5px; border-radius:50%; background:#e7b733; vertical-align:middle; margin:0 9px 1px 0; }
.hero-art { min-height:390px; position:relative; overflow:hidden; border:1px solid rgba(255,255,255,.16); border-radius:10px; background:#fff; box-shadow:0 28px 65px rgba(0,0,0,.25); }
.hero-photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-photo-caption { position:absolute; left:18px; right:18px; bottom:18px; display:grid; gap:4px; padding:14px 17px; color:white; background:rgba(12,36,64,.92); border-left:3px solid #e7b733; }
.hero-photo-caption span { color:#dfc16c; font-size:9px; letter-spacing:.18em; font-weight:800; }
.hero-photo-caption strong { font-size:14px; font-weight:650; }
.section { padding:82px 0; }
.section-soft { background:#f4f6f8; }
.section-head { max-width:760px; margin-bottom:36px; }
.section-head p { max-width:720px; font-size:15px; line-height:1.8; }
.category-grid { gap:20px; }
.category-card { border-radius:10px; box-shadow:0 5px 18px rgba(16,43,75,.045); }
.category-card:hover { transform:translateY(-3px); box-shadow:0 14px 30px rgba(16,43,75,.1); }
.category-visual { min-height:225px; padding:18px; background:#f0f2f3; }
.category-photo { height:185px; max-width:300px; }
.category-body { padding:22px 23px 23px; }
.category-body h3 { font-size:19px; }
.category-body p { min-height:48px; font-size:13px; line-height:1.7; }
.tag { border-radius:4px; color:#28558f; background:#f3f6f9; font-size:10px; }
.text-link { color:var(--blue); font-size:13px; }
.scene-banner { position:relative; display:grid; grid-template-columns:1fr 1fr; min-height:300px; margin:38px 0 30px; overflow:hidden; color:white; background:var(--navy); border-radius:10px; }
.scene-banner > img { width:100%; height:100%; min-height:300px; object-fit:cover; }
.scene-banner-copy { align-self:center; padding:38px clamp(24px,4vw,54px); }
.scene-banner-copy .eyebrow { color:#e7b733; margin-bottom:14px; }
.scene-banner-copy h3 { max-width:480px; color:white; font-size:clamp(24px,2.5vw,34px); line-height:1.2; margin-bottom:12px; }
.scene-banner-copy p { max-width:510px; color:#c9d6e3; font-size:13px; line-height:1.75; }
.fabrication-callout { border-color:#d9e2eb; border-radius:8px; background:#f8fafc; }
.capability-card { border-radius:9px; }
.capability-icon { border-radius:9px; color:var(--blue); background:#e8eef5; }
.capability-card:hover .capability-icon { background:var(--navy); color:#e7b733; }
.step::before { color:var(--blue); }
.trust-list article { border-radius:8px; }
.trust-list article>span { border-radius:7px; color:var(--blue); background:#e8eef5; }
.callout { border-radius:10px; }
.callout .eyebrow { color:#e7b733; }
.footer { background:#102b4b; }
.footer .brand { color:white; }
.footer .brand-mark { filter:brightness(0) invert(1); }
.footer h4 { color:#e7b733; }
.footer-bottom { font-size:11px; }
.rfq { background:#102b4b; }
.contact-proof { border-left-color:var(--blue); }
.page-hero { background:#102b4b; }
.page-hero-art { border-radius:10px; background:#f0f2f3; }
.page-hero-art .hero-product-photo { border-radius:3px; }
.product-card { border-radius:9px; box-shadow:0 5px 18px rgba(16,43,75,.045); }
.product-art { background:#f3f4f5; }
.product-info { padding:20px; }
.product-code { color:#28558f; background:#eaf0f7; border-radius:4px; }
.product-meta { color:#697889; }
.note-band { border-left-color:var(--blue); border-radius:0 7px 7px 0; color:#41576f; background:#eef3f8; }
.factory-card { border-radius:9px; }
.factory-card img { object-fit:cover; }
.rfq-form { border-radius:10px; }
.rfq-form button { background:var(--blue); }
.rfq-form input:focus,.rfq-form select:focus,.rfq-form textarea:focus { outline:2px solid rgba(36,89,166,.25); border-color:var(--blue); }
.menu-toggle { border-radius:6px; }
@media(max-width:900px) {
 .wrap { width:min(100% - 42px,760px); }
 .hero .wrap { grid-template-columns:1fr; gap:28px; padding-block:48px; }
 .hero-art { min-height:350px; }
 .scene-banner { grid-template-columns:1fr; }
 .scene-banner > img { max-height:280px; }
 .scene-banner-copy { padding:26px 28px 30px; }
}
@media(max-width:650px) {
 .wrap { width:min(100% - 30px,540px); }
 .topline .wrap { gap:6px 15px; flex-wrap:wrap; }
 .nav { min-height:66px; }
 .brand { font-size:17px; }
 .brand-mark { width:32px; height:32px; }
 .hero .wrap { padding-block:40px 34px; }
 .hero h1 { font-size:clamp(36px,9.5vw,45px); }
 .hero-copy { font-size:14px; line-height:1.75; }
 .hero-art { min-height:240px; }
 .hero-photo-caption { left:11px; right:11px; bottom:11px; padding:11px 12px; }
 .section { padding:58px 0; }
 .scene-banner { margin-block:26px 20px; }
 .scene-banner > img { min-height:210px; max-height:210px; }
 .scene-banner-copy { padding:22px 20px 24px; }
 .scene-banner-copy h3 { font-size:25px; }
 .category-visual { min-height:190px; }
 .category-photo { height:155px; }
 .page-hero { padding:43px 0 36px; }
}

/* The secondary utility strip competes with the main navigation; keep the header focused. */
.topline { display:block; }

/* Language selector */
.language-switch { display:inline-flex; align-items:center; justify-content:center; min-height:40px; padding:0 13px; border:1px solid var(--line); border-radius:7px; color:var(--ink); font-size:13px; font-weight:650; text-decoration:none; white-space:nowrap; }
.language-switch:hover { border-color:var(--blue); color:var(--blue); }
@media(max-width:900px) { .language-switch { min-height:36px; padding:0 10px; } }

/* Keep the bilingual navigation readable at tablet and narrow desktop widths. */
@media(max-width:1100px) {
  .nav { position:relative; min-height:70px; gap:12px; }
  .nav-links { display:none; position:absolute; left:-21px; right:-21px; top:100%; z-index:21; padding:10px 20px 16px; border-bottom:1px solid var(--line); background:#fff; box-shadow:var(--shadow); flex-direction:column; align-items:stretch; gap:0; }
  .nav-links.open { display:flex; }
  .nav-links a { padding:12px 4px; border-bottom:1px solid #edf1f3; font-size:14px; }
  .menu-toggle { display:block; }
  .nav > .btn { display:none; }
  .language-switch { margin-left:auto; }
}


/* Make the three RFQ commitments easy to scan at a glance. */
.hero-points { display:grid; grid-template-columns:1fr; max-width:580px; margin-top:24px; gap:9px; color:#edf4fa; font-size:15px; line-height:1.5; }
.hero-points span { padding:9px 13px; border:1px solid rgba(222,235,245,.23); border-radius:7px; background:rgba(255,255,255,.07); font-weight:600; }
.hero-points span::before { width:8px; height:8px; margin-right:11px; background:#f1b827; }

.category-photo--cutting-tools { transform:scale(1.18); mix-blend-mode:normal; }


/* Clear RFQ preparation banner in place of an unrelated supplier stock photo. */
.rfq-requirements { display:grid; gap:11px; margin:22px 0 0; padding:0; list-style:none; color:var(--muted); font-size:15px; line-height:1.6; }
.rfq-requirements li { position:relative; padding-left:19px; }
.rfq-requirements li::before { position:absolute; top:.72em; left:0; width:6px; height:6px; border-radius:50%; background:var(--orange); content:""; }
.rfq-requirements strong { color:var(--ink); }


/* Directional, four-stage RFQ flow. */
.steps { grid-template-columns:repeat(4,minmax(0,1fr)); gap:46px 22px; }
.step { padding-right:16px; transition:transform .18s ease; }
.step::after { content:""; position:absolute; top:-5px; right:2px; width:8px; height:8px; border-top:1px solid #aabbd0; border-right:1px solid #aabbd0; transform:rotate(45deg); }
.step:last-child::after { display:none; }
.step::before { transition:background-color .18s,border-color .18s,color .18s; }
.step:hover { transform:translateY(-2px); }
.step:hover::before { border-color:var(--blue); color:var(--blue); background:#e8eef5; }
@media(max-width:900px) { .steps { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(min-width:651px) and (max-width:900px) { .step::after { display:none; } }
@media(max-width:650px) {
 .steps { grid-template-columns:1fr; gap:14px; margin-top:34px; }
 .step { margin-left:18px; padding:0 0 20px 34px; border-top:0; border-left:1px solid #cbd7de; }
 .step::before { position:absolute; top:0; left:-20px; margin:0; }
 .step::after { top:auto; right:auto; left:-4px; bottom:0; transform:rotate(135deg); }
 .step:last-child { border-left-color:transparent; }
}

.steps .step ul { display:grid; gap:8px; margin:0; padding:0; list-style:none; }
.steps .step li { position:relative; padding-left:13px; color:var(--muted); font-size:13px; line-height:1.55; }
.steps .step li::before { content:""; position:absolute; left:0; top:.58em; width:5px; height:5px; border-radius:50%; background:var(--blue); }

.trust-list--roles article { grid-template-columns:76px 1fr; align-items:center; }
.trust-list--roles article > span { width:66px; height:34px; border-radius:5px; font-size:11px; letter-spacing:.01em; }


/* Why-us benefits: concise, buyer-facing reasons with readable card hierarchy. */
.why-us-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; }
.why-us-card { min-height:145px; padding:24px 25px; border:1px solid var(--line); border-radius:10px; background:#fff; transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease; }
.why-us-card:hover { transform:translateY(-2px); border-color:#b8c9dc; box-shadow:var(--shadow); }
.why-us-card h3 { margin:0 0 9px; color:var(--navy); font-size:19px; }
.why-us-card p { max-width:620px; margin:0; color:var(--muted); font-size:14px; line-height:1.7; }
@media(max-width:650px) { .why-us-grid { grid-template-columns:1fr; gap:11px; } .why-us-card { min-height:0; padding:19px 20px; } }


/* Homepage typography and full-bleed sourcing photograph */
.eyebrow { color:var(--blue); font-size:14px; line-height:1.35; letter-spacing:.11em; font-weight:750; gap:10px; }
.eyebrow::before { width:26px; height:2px; flex:none; }
h1 { font-size:clamp(48px,5.5vw,72px); line-height:1.08; font-weight:800; }
h2 { font-size:clamp(36px,4vw,54px); line-height:1.1; font-weight:800; }
.section-head { max-width:780px; }
.section-head .eyebrow { margin-bottom:15px; }
.hero .wrap { display:block; min-height:0; padding:48px 0 34px; }
.hero .wrap > div:first-child { max-width:930px; }
.hero h1 { max-width:900px; }
.hero-copy { max-width:820px; font-size:18px; }
.hero-art { width:100%; min-height:clamp(320px,38vw,520px); border:0; border-radius:0; box-shadow:none; }
.hero-photo-caption { left:clamp(20px,5vw,76px); right:auto; bottom:clamp(18px,3vw,38px); width:min(590px,calc(100% - 40px)); padding:18px 22px; }
.hero-photo-caption span { font-size:12px; letter-spacing:.12em; }
.hero-photo-caption strong { font-size:19px; }
.why-us-card h3 { font-size:22px; }
.why-us-card p { font-size:16px; }
.form-hint { padding:13px 15px; border-left:4px solid #e8b321; border-radius:0 6px 6px 0; color:#17345b; background:#fff5d8; font-size:15px; line-height:1.5; }
.form-hint strong { font-weight:750; }
@media(max-width:650px) {
  .eyebrow { font-size:13px; }
  .hero .wrap { padding:38px 0 25px; }
  .hero-copy { font-size:15px; }
  .hero-art { min-height:230px; }
  .hero-photo-caption { left:15px; bottom:15px; width:calc(100% - 30px); padding:12px 14px; }
  .hero-photo-caption strong { font-size:15px; }
  .form-hint { font-size:14px; }
}


/* Full-bleed hero image under the headline, as in the supplied reference */
.hero { position:relative; isolation:isolate; overflow:hidden; background:#102b4b; }
.hero::before { content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(90deg,rgba(12,35,62,.96) 0%,rgba(12,35,62,.85) 43%,rgba(12,35,62,.48) 100%),linear-gradient(0deg,rgba(12,35,62,.62),transparent 55%); }
.hero .wrap { position:relative; z-index:2; display:flex; align-items:center; min-height:clamp(760px,calc(100vh - 68px),1080px); padding:64px 0 44px; }
.hero .wrap > div:first-child { max-width:1240px; }
.hero .eyebrow { margin-bottom:22px; padding:8px 14px; border:1px solid rgba(240,184,45,.55); border-radius:999px; color:#ffc21c; background:rgba(255,255,255,.07); font-size:14px; letter-spacing:.08em; }
.hero .eyebrow::before { display:none; }
.hero h1 { max-width:940px; margin:18px 0 22px; font-size:clamp(52px,6.2vw,88px); line-height:1.04; }
.hero-copy { max-width:900px; color:#e3eaf1; font-size:18px; line-height:1.75; }
.hero-art { position:absolute; z-index:0; inset:0; width:100%; min-height:100%; overflow:hidden; border:0; border-radius:0; background:transparent; box-shadow:none; }
.hero-photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.hero-points { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; max-width:980px; margin-top:42px; color:#f3f6f9; }
.hero-points span { min-height:92px; display:flex; align-items:flex-start; padding:18px 17px; border:1px solid rgba(255,255,255,.2); border-radius:11px; background:rgba(255,255,255,.08); font-size:15px; font-weight:650; line-height:1.45; backdrop-filter:blur(5px); }
.hero-points span::before { content:""; display:block; flex:none; width:9px; height:9px; margin:5px 12px 0 0; border-radius:50%; background:#ffc21c; }
@media(max-width:900px) { .hero .wrap { min-height:clamp(760px,calc(100vh - 66px),940px); } }
@media(max-width:650px) {
  .hero .wrap { min-height:0; padding:48px 0 30px; }
  .hero .eyebrow { margin-bottom:16px; font-size:12px; }
  .hero h1 { font-size:clamp(42px,11vw,58px); }
  .hero-copy { font-size:15px; }
  .hero-points { grid-template-columns:1fr; gap:9px; margin-top:26px; }
  .hero-points span { min-height:0; padding:12px 13px; font-size:13px; }
  .hero-art { min-height:100%; }
  .hero::before { background:linear-gradient(90deg,rgba(12,35,62,.91),rgba(12,35,62,.66)),linear-gradient(0deg,rgba(12,35,62,.58),transparent 70%); }
}


/* Compact navy navigation that flows into the hero */
.header { background:rgba(16,43,75,.98); border-bottom:1px solid rgba(255,255,255,.1); }
.nav { min-height:68px; gap:18px; }
.brand { color:#fff; font-size:18px; }
.brand-mark { width:32px; height:32px; filter:brightness(0) invert(1); }
.brand small { color:#c0cede; font-size:8px; }
.nav-links { color:#e5ecf3; font-size:13px; }
.nav-links a:hover,.nav-links a.active { color:#ffc21c; }
.language-switch { min-height:36px; padding-inline:12px; border-color:rgba(255,255,255,.3); color:#f5f7fa; font-size:12px; }
.language-switch:hover { border-color:#ffc21c; color:#ffc21c; }
.nav > .btn { min-height:42px; padding-inline:16px; border-radius:7px; color:#142c49; background:#ffc21c; box-shadow:0 6px 18px rgba(0,0,0,.16); font-size:13px; }
.nav > .btn:hover { color:#142c49; background:#ffd04d; }
.menu-toggle { border-color:rgba(255,255,255,.28); color:#fff; background:rgba(255,255,255,.08); }
@media(max-width:650px) {
  .nav { min-height:64px; }
  .brand { font-size:16px; }
  .brand-mark { width:29px; height:29px; }
  .nav-links { top:100%; border-bottom-color:rgba(255,255,255,.12); background:#102b4b; box-shadow:0 12px 25px rgba(0,0,0,.2); }
  .nav-links a { border-bottom-color:rgba(255,255,255,.1); color:#e5ecf3; }
  .nav-links a:hover,.nav-links a.active { color:#ffc21c; }
}


/* Shorter hero and more balanced actions / benefit tiles */
.hero .wrap { min-height:clamp(620px,68vh,760px); padding:42px 0 30px; }
.hero .eyebrow { margin-bottom:16px; }
.hero h1 { margin:14px 0 18px; font-size:clamp(48px,5.3vw,76px); }
.hero-copy { max-width:880px; margin-bottom:9px; font-size:17px; line-height:1.65; }
.hero-copy-secondary { max-width:840px; margin-top:3px; color:#d6e0e9; }
.hero-actions { gap:14px; margin:24px 0 0; }
.hero-actions .btn { min-height:54px; padding-inline:24px; font-size:15px; }
.hero-actions .btn-primary { color:#142c49; background:#ffc21c; box-shadow:0 8px 20px rgba(0,0,0,.2); }
.hero-actions .btn-primary:hover { background:#ffd04d; }
.hero-points { gap:12px; max-width:960px; margin-top:30px; }
.hero-points span { min-height:70px; align-items:center; padding:13px 15px; font-size:14px; }
.hero-points span::before { width:8px; height:8px; margin:0 10px 0 0; }
@media(max-width:900px) { .hero .wrap { min-height:clamp(620px,68vh,760px); } }
@media(max-width:650px) {
  .hero .wrap { min-height:0; padding:42px 0 26px; }
  .hero h1 { font-size:clamp(42px,10vw,56px); margin-block:12px 16px; }
  .hero-copy { font-size:15px; }
  .hero-actions { margin-top:20px; }
  .hero-actions .btn { min-height:50px; padding-inline:19px; font-size:14px; }
  .hero-points { margin-top:24px; }
}

/* Crisp bilingual brand mark, white navigation, and a heavier Chinese display face */
body:lang(zh-CN) { font-family:"Microsoft YaHei UI","Microsoft YaHei",sans-serif; }
body:lang(zh-CN) h1,body:lang(zh-CN) h2,body:lang(zh-CN) h3 { font-weight:900; letter-spacing:-.055em; }
.topline { color:#d6e1ed; background:#102b4b; border-bottom:0; }
.topline .wrap { padding-block:7px; }
.topline span:last-child { color:#fff; }
.header { background:rgba(255,255,255,.98); border-bottom-color:#e4e9ef; }
.brand { color:#172433; }
.brand-mark { display:block; width:36px; height:36px; filter:none; image-rendering:auto; }
.brand small { color:#718195; }
.nav-links { color:#33475d; }
.nav-links a:hover,.nav-links a.active { color:#245eaa; }
.language-switch { border-color:#d8e1eb; color:#24384f; }
.language-switch:hover { border-color:#245eaa; color:#245eaa; }
.nav > .btn { color:#fff; background:#245eaa; box-shadow:0 6px 18px rgba(36,94,170,.18); }
.nav > .btn:hover { color:#fff; background:#194b8b; }
.menu-toggle { border-color:#d8e1eb; color:#24384f; background:#fff; }
@media(max-width:650px) {
  .nav-links { background:#fff; box-shadow:0 12px 25px rgba(18,38,60,.12); }
  .nav-links a { border-bottom-color:#edf0f3; color:#33475d; }
  .nav-links a:hover,.nav-links a.active { color:#245eaa; }
}

/* Match the reference's generous scale, spacing, and consistent rounded components */
:root { --radius:18px; }
.wrap { width:min(1552px,calc(100% - 15vw)); }
.nav { gap:24px; }
.nav-links { gap:clamp(18px,2vw,32px); font-size:15px; }
.brand { font-size:21px; }
.brand-mark { width:40px; height:40px; }
.brand small { font-size:9px; }
.nav-actions { display:flex; align-items:center; justify-content:flex-end; gap:10px; flex:none; }
.nav-actions .language-switch { margin:0; min-height:44px; padding-inline:16px; border-radius:18px; font-size:14px; }
.nav-actions .btn { min-height:50px; padding-inline:22px; border-radius:18px; font-size:15px; white-space:nowrap; }
.btn,.language-switch,.menu-toggle { border-radius:18px; }
.hero .wrap { min-height:clamp(620px,68vh,760px); padding:44px 0 34px; }
.hero h1 { max-width:1200px; margin:16px 0 24px; font-size:clamp(58px,6.3vw,96px); line-height:1.06; }
.hero-copy { max-width:1050px; font-size:21px; line-height:1.7; }
.hero-copy-secondary { max-width:1000px; margin-top:8px; }
.hero-actions { gap:16px; margin-top:30px; }
.hero-actions .btn { min-height:60px; padding-inline:30px; font-size:17px; }
.hero-points { max-width:1160px; gap:16px; margin-top:34px; }
.hero-points span { min-height:84px; padding:18px 20px; border-radius:18px; font-size:16px; }
.hero-points span::before { width:9px; height:9px; margin-right:13px; }
.section { padding-block:100px; }
.section-head { max-width:920px; margin-bottom:44px; }
.section-head p { font-size:18px; line-height:1.75; }
.category-grid,.product-grid { gap:26px; }
.category-card,.product-card,.why-us-card,.scene-banner,.rfq-form,.info-box,.factory-card,.callout,.supplier-capability-card,.fabrication-card { border-radius:18px; }
.category-body { padding:28px; }
.category-body h3 { font-size:23px; }
.category-body p { min-height:0; font-size:16px; line-height:1.75; }
.tag { border-radius:999px; padding:6px 12px; font-size:12px; }
.why-us-card { min-height:170px; padding:28px; }
.why-us-card h3 { font-size:24px; }
.why-us-card p { font-size:17px; line-height:1.7; }
.eyebrow { font-size:14px; letter-spacing:.1em; }
.section-head h2 { font-size:clamp(44px,4.7vw,68px); line-height:1.08; }
@media(max-width:1100px) {
  .wrap { width:min(820px,calc(100% - 56px)); }
  .nav { gap:14px; }
  .nav-actions { margin-left:auto; gap:8px; }
  .nav-actions .btn { display:none; }
  .nav-actions .language-switch { margin-left:0; }
  .menu-toggle { padding:10px 14px; }
  .section { padding-block:78px; }
}
@media(max-width:650px) {
  .wrap { width:min(560px,calc(100% - 32px)); }
  .nav { gap:10px; }
  .brand { font-size:17px; }
  .brand-mark { width:34px; height:34px; }
  .brand small { font-size:7px; }
  .nav-actions .btn { display:inline-flex; min-height:40px; padding-inline:12px; border-radius:18px; font-size:12px; }
  .nav-actions .language-switch { min-height:40px; padding-inline:12px; font-size:13px; }
  .hero .wrap { min-height:0; padding:42px 0 28px; }
  .hero h1 { font-size:clamp(42px,10vw,58px); }
  .hero-copy { font-size:16px; }
  .hero-actions { gap:11px; margin-top:22px; }
  .hero-actions .btn { min-height:54px; padding-inline:19px; font-size:15px; }
  .hero-points { gap:10px; margin-top:26px; }
  .hero-points span { min-height:0; padding:14px 16px; font-size:15px; }
  .section { padding-block:62px; }
  .section-head p { font-size:16px; }
  .section-head h2 { font-size:clamp(38px,9vw,50px); }
  .category-grid,.product-grid { gap:18px; }
  .category-body { padding:21px; }
  .category-body h3 { font-size:20px; }
}
@media(max-width:420px) { .nav-actions .btn { display:none; } }

/* Give the three procurement benefits their own calm, connected visual band */
.hero-proof-heading { margin:44px 0 14px; color:#ffc21c; font-size:14px; font-weight:800; letter-spacing:.08em; }
.hero-points { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); max-width:1240px; margin:0; padding:14px 8px; gap:0; border:1px solid rgba(255,255,255,.22); border-radius:18px; background:rgba(255,255,255,.075); }
.hero-points > article { display:flex; align-items:flex-start; gap:15px; min-height:90px; padding:16px 22px; }
.hero-points > article + article { border-left:1px solid rgba(255,255,255,.24); }
.hero-points .hero-point-number { display:block; flex:none; min-height:0; padding:0; border:0; border-radius:0; color:#ffc21c; background:none; font-size:22px; font-weight:850; line-height:1.2; }
.hero-points .hero-point-copy { display:grid; gap:6px; min-height:0; padding:0; border:0; border-radius:0; background:none; line-height:1.45; }
.hero-point-copy strong { color:#fff; font-size:17px; font-weight:750; }
.hero-point-copy small { color:#d5e0e9; font-size:14px; line-height:1.55; }
.hero-points span::before { display:none; content:none; }
html[lang="zh-CN"] .hero h1 { letter-spacing:.04em; }
@media(max-width:650px) {
  .hero-proof-heading { margin:32px 0 12px; font-size:13px; }
  .hero-points { grid-template-columns:1fr; padding:5px 14px; }
  .hero-points > article { min-height:0; padding:14px 6px; gap:13px; }
  .hero-points > article + article { border-top:1px solid rgba(255,255,255,.2); border-left:0; }
  .hero-points .hero-point-number { font-size:19px; }
  .hero-point-copy strong { font-size:16px; }
  .hero-point-copy small { font-size:14px; }
}

/* White navigation with the original dark brand mark */
.header { background:rgba(255,255,255,.98); border-bottom-color:#e4e9ef; }
.brand { color:#172433; }
.brand-mark { filter:none; }
.brand small { color:#718195; }
.nav-links { color:#33475d; }
.nav-links a:hover,.nav-links a.active { color:#245eaa; }
.nav-actions .language-switch { border-color:#d8e1eb; color:#24384f; background:#fff; }
.nav-actions .language-switch:hover { border-color:#245eaa; color:#245eaa; }
.nav-actions .btn { color:#fff; background:#245eaa; box-shadow:0 6px 18px rgba(36,94,170,.18); }
.nav-actions .btn:hover { color:#fff; background:#194b8b; }
.menu-toggle { border-color:#d8e1eb; color:#24384f; background:#fff; }

/* Match all interactive button corners to the rounded corners of the brand hexagon. */
.btn,.language-switch,.menu-toggle,.nav-actions .btn,.nav-actions .language-switch { border-radius:6px; }
@media(max-width:1100px) {
  .nav-links { border-bottom-color:#e4e9ef; background:#fff; }
  .nav-links a { border-bottom-color:#edf0f3; color:#33475d; }
  .nav-links a:hover,.nav-links a.active { color:#245eaa; }
}

.rfq-direct-contact { display:grid; gap:10px; margin-top:26px; padding-top:18px; border-top:1px solid var(--line); }
.rfq-direct-contact p { display:flex; flex-wrap:wrap; gap:10px; margin:0; color:var(--muted); font-size:15px; line-height:1.55; }
.rfq-direct-contact strong { min-width:92px; color:var(--ink); }
.rfq-direct-contact a { color:var(--blue); font-weight:650; text-decoration:none; }
.rfq-direct-contact a:hover { text-decoration:underline; }

/* Shared type scale and breathing room for the content below the home hero. */
.product-hero h1 { max-width:1200px; font-size:clamp(58px,6.3vw,96px); line-height:1.06; }
.product-hero .hero-copy { max-width:1050px; font-size:21px; line-height:1.7; }
.section { padding-block:112px; }
.section-head { max-width:820px; margin-bottom:56px; }
.section-head h2,.rfq-home h2 { font-size:clamp(42px,4.5vw,68px); font-weight:900; line-height:1.08; letter-spacing:-.045em; }
.section-head p { max-width:760px; font-size:17px; line-height:1.75; }
.category-grid,.product-grid { gap:30px; }
.category-body { padding:30px; }
.category-body h3,.product-info h3,.why-us-card h3,.capability-card h3,.custom-step h3,.fabrication-card h3,.info-box h3 { font-size:21px; line-height:1.35; }
.category-body p,.product-info p,.why-us-card p,.capability-card p,.custom-step p,.fabrication-card p,.steps .step li,.info-box p,.info-box li { font-size:15px; line-height:1.7; }
.category-body p { min-height:0; }
.product-art { height:170px; }
.product-art .product-illustration { height:140px; }
.product-photo { height:145px; }
.product-info { padding:26px; }
.product-code { font-size:12px; }
.product-meta { font-size:13px; line-height:1.6; }
.custom-flow { column-gap:38px; row-gap:44px; }
.custom-step { min-height:148px; padding-bottom:22px; }
.why-us-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; }
.why-us-card { min-height:190px; padding:28px; }
.rfq-form { gap:16px; padding:28px; }
.rfq-form label { font-size:13px; }
.rfq-form input,.rfq-form select,.rfq-form textarea { font-size:15px; }
.factory-card figcaption,.supplier-capability-card figcaption span,.supplier-capability-note,.factory-note { font-size:14px; line-height:1.65; }
.product-grid .product-card,.category-grid .category-card { box-shadow:0 5px 22px rgba(16,43,75,.045); }
.product-hero h1 { font-weight:900; }
.category-body h3,.product-info h3,.why-us-card h3,.capability-card h3,.custom-step h3,.fabrication-card h3,.info-box h3 { font-weight:800; }
.custom-step-mark { gap:14px; margin-bottom:18px; }
.custom-step-mark span { width:48px; height:48px; border-radius:12px; background:#f5b820; color:#142c49; font-size:14px; }
.custom-step-mark svg { box-sizing:content-box; width:26px; height:26px; padding:11px; border-radius:12px; background:#edf2f7; color:#2459a6; stroke:currentColor; }
.custom-step:hover .custom-step-mark span { background:#142c49; color:#ffc21c; }
.custom-step:hover .custom-step-mark svg { background:#fff6dc; }
@media(max-width:1100px) {
  .section { padding-block:88px; }
  .why-us-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:650px) {
  .product-hero h1 { font-size:clamp(42px,10vw,58px); }
  .product-hero .hero-copy { font-size:16px; }
  .section { padding-block:64px; }
  .section-head { margin-bottom:34px; }
  .section-head h2,.rfq-home h2 { font-size:clamp(32px,8.5vw,42px); }
  .section-head p { font-size:16px; }
  .category-grid,.product-grid { gap:20px; }
  .category-body { padding:23px; }
  .category-body h3,.product-info h3,.why-us-card h3,.capability-card h3,.custom-step h3,.fabrication-card h3,.info-box h3 { font-size:19px; }
  .product-info { padding:22px; }
  .product-art { height:158px; }
  .product-art .product-illustration { height:132px; }
  .product-photo { height:132px; }
  .custom-flow { column-gap:24px; row-gap:28px; }
  .why-us-grid { grid-template-columns:1fr; gap:14px; }
  .why-us-card { min-height:0; padding:22px; }
  .rfq-form { padding:22px; }
}

/* Keep cutting-tool source photos intact so reflective carbide surfaces are not dulled. */
.cutting-tools-page .product-card .product-photo { mix-blend-mode: normal; }
.cutting-tools-page .product-card:nth-child(6) .product-photo { object-fit:contain; }


/* Language toggle is a tertiary text link beside the primary quote action. */
.nav-actions .language-switch { min-height:36px; padding:0 6px; border:0; border-radius:0; background:transparent; color:#718195; font-size:12px; font-weight:650; gap:4px; }
.nav-actions .language-switch:hover { border:0; color:#245eaa; background:transparent; }
.language-switch-arrow { font-size:13px; line-height:1; }
@media(max-width:900px) { .nav-actions .language-switch { min-height:36px; padding-inline:6px; } }

/* Shared component language: square process markers, blue surfaces, and yellow emphasis. */
:root {
  --surface-blue:#eaf0f7;
  --surface-blue-hover:#dfe9f4;
  --accent-blue:#2459a6;
  --accent-yellow:#ffc21c;
  --marker-square:12px;
  --panel-radius:16px;
}

/* Replace connector lines with clear, reusable process panels on all page types. */
.steps { grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; margin-top:42px; }
.step { min-height:100%; padding:28px 24px 26px; border:0; border-radius:var(--panel-radius); background:var(--surface-blue); }
.step::before { width:48px; height:48px; margin:0 0 20px; border:0; border-radius:var(--marker-square); background:var(--accent-yellow); color:var(--navy); font-size:15px; }
.step::after { display:none; content:none; }
.step h3 { margin-bottom:12px; color:var(--navy); font-size:21px; font-weight:800; line-height:1.35; }
.steps .step ul { gap:9px; }
.steps .step li { padding-left:15px; color:#4b6179; font-size:15px; line-height:1.65; }
.steps .step li::before { width:7px; height:7px; background:var(--accent-blue); }

.custom-flow { grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.custom-step { min-height:210px; padding:26px; border:0; border-radius:var(--panel-radius); background:var(--surface-blue); }
.custom-step:hover { border:0; background:var(--surface-blue-hover); }
.custom-step-mark { gap:14px; margin-bottom:20px; }
.custom-step-mark span { flex:none; width:48px; height:48px; border-radius:var(--marker-square); background:var(--accent-yellow); color:var(--navy); font-size:15px; }
.custom-step-mark svg { flex:none; box-sizing:content-box; width:26px; height:26px; padding:11px; border-radius:var(--marker-square); background:var(--accent-blue); color:#fff; stroke:currentColor; }
.custom-step:hover .custom-step-mark span { background:var(--navy); color:var(--accent-yellow); }
.custom-step:hover .custom-step-mark svg { background:var(--navy); color:var(--accent-yellow); }
.custom-step h3 { margin-bottom:9px; color:var(--navy); font-size:21px; font-weight:800; line-height:1.35; }
.custom-step p { margin:0; color:#4b6179; font-size:15px; line-height:1.7; }

/* Use filled surfaces to group information instead of repeated outlines. */
.category-card,.product-card,.factory-card,.supplier-capability-card,.info-box { border:0; border-radius:var(--panel-radius); box-shadow:0 10px 28px rgba(16,43,75,.08); }
/* Keep product cards distinct from the pale section background even at rest. */
.product-card { box-shadow:0 12px 30px rgba(16,43,75,.12),0 2px 7px rgba(16,43,75,.045); }
.why-us-card { border:0; border-radius:var(--panel-radius); background:var(--surface-blue); }
.why-us-card:hover { border:0; background:var(--surface-blue-hover); box-shadow:0 12px 30px rgba(16,43,75,.12); }
.fabrication-card { border:0; border-radius:var(--panel-radius); box-shadow:0 8px 24px rgba(16,43,75,.07); }
.fabrication-callout { border:0; background:var(--surface-blue); }
.rfq-form { border:0; box-shadow:0 10px 28px rgba(16,43,75,.08); }

/* Keep source product photos unaltered and seamless on white. */
.gaskets-page .product-art,
.cutting-tools-page .product-art { background:#f3f4f5; }

@media(max-width:1100px) {
  .steps { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
  .custom-flow { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
}
@media(max-width:650px) {
  .steps,.custom-flow { grid-template-columns:1fr; gap:13px; }
  .step,.custom-step { min-height:0; padding:23px; }
}


/* Click to choose a language; keep the trigger visually tertiary. */
.nav-actions .language-menu { position:relative; display:inline-flex; align-items:center; }
.nav-actions .language-menu > summary.language-switch { display:inline-flex; min-height:36px; padding:0 6px; border:0; border-radius:0; background:transparent; color:#718195; font-size:12px; font-weight:650; cursor:pointer; list-style:none; user-select:none; }
.nav-actions .language-menu > summary.language-switch::-webkit-details-marker { display:none; }
.nav-actions .language-menu > summary.language-switch:hover { color:#245eaa; }
.nav-actions .language-menu > summary.language-switch:focus-visible { outline:2px solid #245eaa; outline-offset:3px; }
.language-menu-options { position:absolute; top:calc(100% + 7px); right:0; z-index:50; min-width:132px; padding:6px; border:1px solid #d8e1eb; border-radius:8px; background:#fff; box-shadow:0 10px 26px rgba(20,44,73,.16); }
.language-menu:not([open]) .language-menu-options { display:none; }
.language-menu-options a { display:block; padding:8px 10px; border-radius:5px; color:#24384f; font-size:13px; line-height:1.4; white-space:nowrap; }
.language-menu-options a:hover,.language-menu-options a:focus-visible { color:#245eaa; background:#f1f5f8; }

/* Keep the current language beside the brand, before the primary navigation. */
.nav > .language-menu { position:relative; display:inline-flex; align-items:center; flex:none; margin:0 auto 0 8px; }
.nav > .language-menu > summary.language-switch { display:inline-flex; align-items:center; gap:5px; min-height:40px; padding:0 8px; border:0; border-radius:6px; background:transparent; color:#344b65; font-size:14px; font-weight:750; cursor:pointer; list-style:none; user-select:none; }
.nav > .language-menu > summary.language-switch::-webkit-details-marker { display:none; }
.nav > .language-menu > summary.language-switch::after { content:"▾"; color:#718195; font-size:12px; }
.nav > .language-menu > summary.language-switch:hover { color:#245eaa; }
.nav > .language-menu > summary.language-switch:focus-visible { outline:2px solid #245eaa; outline-offset:3px; }
.nav > .language-menu .language-menu-options { left:0; right:auto; }
.hero-point-copy ul { display:grid; gap:5px; margin:0; padding:0; list-style:none; }
.hero-point-copy li { position:relative; padding-left:13px; color:#d5e0e9; font-size:14px; line-height:1.55; }
.hero-point-copy li::before { position:absolute; top:.05em; left:0; color:var(--accent-yellow); content:"•"; font-weight:900; }
@media(max-width:1100px) {
  .nav > .language-menu { margin-left:0; margin-right:auto; }
}


/* Improve footer readability to match the stronger reference hierarchy. */
.footer { color:#e7edf3; }
.footer .brand { color:#fff; }
.footer .brand small { color:#b9c8d5; font-size:11px; }
.footer p { max-width:330px; margin-top:16px; color:#c6d3de; font-size:16px; line-height:1.65; }
.footer h4 { margin:2px 0 18px; color:#ffc21c; font-size:17px; font-weight:800; letter-spacing:.04em; line-height:1.3; }
.footer li { margin:10px 0; color:#e7edf3; font-size:16px; font-weight:550; line-height:1.5; }
.footer li a { color:#e7edf3; }
.footer li a:hover { color:#ffc21c; }
.footer-bottom { padding-top:19px; color:#b4c2ce; font-size:13px; line-height:1.5; }


/* Keep English product-page headline weight aligned with the English homepage. */
body:lang(en) .product-hero h1 { font-weight:800; }

/* Keep the hovered process marker clearly distinct from the card surface. */
.step:hover::before { border-color:var(--accent-yellow); color:var(--navy); background:var(--accent-yellow); }

/* Use the homepage eyebrow pill consistently above major headings site-wide. */
.eyebrow { display:inline-flex; align-items:center; min-height:34px; padding:6px 13px; border:1px solid #ead69b; border-radius:999px; background:#fff9e9; }
.eyebrow::before { display:none; content:none; }
.hero .eyebrow { min-height:0; padding:8px 14px; }

/* Match the hero eyebrow everywhere: yellow text, transparent fill, thin yellow outline. */
.eyebrow { color:#ffc21c; border-color:rgba(240,184,45,.55); background:transparent; }

/* Make hover and active states easy to spot across navigation and content cards. */
.nav-links a { position:relative; transition:color .18s ease; }
.nav-links a::after { position:absolute; right:0; bottom:-8px; left:0; height:3px; border-radius:99px; background:#f2b91b; content:""; transform:scaleX(0); transform-origin:left; transition:transform .2s ease; }
.nav-links a:hover::after,.nav-links a.active::after { transform:scaleX(1); }
.nav-links a:hover,.nav-links a.active { color:#a86f00; }
.category-card,.product-card,.why-us-card,.capability-card,.custom-step,.fabrication-card,.info-box,.step { transition:transform .22s ease,box-shadow .22s ease,background-color .22s ease; }
.category-card:hover,.product-card:hover,.why-us-card:hover,.capability-card:hover,.custom-step:hover,.fabrication-card:hover,.info-box:hover,.step:hover { transform:translateY(-5px); box-shadow:0 16px 34px rgba(16,43,75,.16); }
.step:hover::before { transform:scale(1.1); }
.step::before { transition:transform .2s ease,background-color .2s ease,border-color .2s ease,color .2s ease; }
.eyebrow:not(.hero .eyebrow) { color:#a86f00; border-color:#f0c85f; background:transparent; font-weight:850; }
@media(max-width:650px) { .nav-links a::after { bottom:5px; right:auto; width:30px; } }
.eyebrow { color:#a86f00; border-color:#f0c85f; background:transparent; font-weight:850; }
.hero .eyebrow { color:#ffc21c; border-color:rgba(240,184,45,.55); }

/* Use the reference warm amber consistently for every heading pill. */
.eyebrow { color:#d58b00; border-color:#e7e1d6; background:#fffdf8; }
.hero .eyebrow { color:#d58b00; border-color:#e7e1d6; background:#fffdf8; }


/* Give the homepage category callout, quote details, and hero more breathing room. */
.fabrication-callout { margin-top:56px; }
.rfq-home { gap:76px; }
.rfq-requirements { gap:16px; margin-top:28px; }
.rfq-direct-contact { gap:16px; margin-top:34px; padding-top:24px; }
.hero:not(.product-hero) .eyebrow { margin-bottom:26px; }
.hero:not(.product-hero) h1 { margin-top:22px; margin-bottom:30px; }
.hero:not(.product-hero) .hero-copy { margin-bottom:18px; }
.hero:not(.product-hero) .hero-actions { margin-top:38px; }
.hero:not(.product-hero) .hero-proof-heading { margin-top:56px; margin-bottom:20px; }
.hero:not(.product-hero) .hero-points { padding-block:20px; }
.hero:not(.product-hero) .hero-points > article { min-height:104px; padding-block:20px; }
/* Reproduce the supplied pill treatment: clean white fill and warm amber label. */
.eyebrow,.hero .eyebrow { color:#d99000; border:1px solid #e7e1d6; background:#fff; }
@media(max-width:900px) { .rfq-home { gap:48px; } }
@media(max-width:650px) {
  .fabrication-callout { margin-top:36px; }
  .rfq-home { gap:34px; }
  .rfq-direct-contact { gap:13px; margin-top:26px; }
  .hero:not(.product-hero) .hero-proof-heading { margin-top:38px; }
  .hero:not(.product-hero) .hero-actions { margin-top:28px; }
  .hero:not(.product-hero) .hero-points > article { min-height:0; padding-block:16px; }
}

/* Copy the supplied dark-hero label treatment onto every heading eyebrow. */
.eyebrow,.hero .eyebrow { display:inline-flex; align-items:center; min-height:40px; margin-bottom:22px; padding:8px 15px; border:1px solid rgba(240,184,45,.55); border-radius:999px; color:#ffc21c; background:rgba(255,255,255,.07); font-size:14px; font-weight:800; letter-spacing:.08em; line-height:1.35; text-transform:uppercase; }
.eyebrow::before,.hero .eyebrow::before { display:none; content:none; }

/* Match the supplied compact eyebrow tab: short pill, soft neutral border, cream fill. */
.eyebrow,.hero .eyebrow { min-height:34px; margin-bottom:16px; padding:6px 14px; border:1px solid #e4e0d7; border-radius:999px; color:#d99000; background:#fffdf8; font-size:14px; font-weight:800; letter-spacing:.14em; line-height:1.35; }

/* Keep the two supplied eyebrow references distinct. */
.hero .eyebrow { min-height:40px; padding:8px 15px; border:1px solid rgba(240,184,45,.55); border-radius:999px; color:#ffc21c; background:rgba(255,255,255,.07); font-size:14px; font-weight:800; letter-spacing:.08em; line-height:1.35; }
.hero .eyebrow::before { display:none; content:none; }
body .eyebrow:not(.hero .eyebrow) { min-height:34px; padding:6px 14px; border:1px solid #e4e0d7; border-radius:999px; color:#d99000; background:#fffdf8; font-size:14px; font-weight:800; letter-spacing:.14em; line-height:1.35; }
body .eyebrow:not(.hero .eyebrow)::before { display:none; content:none; }
.eyebrow { min-height:34px; padding:6px 14px; border:1px solid #e4e0d7; border-radius:999px; color:#d99000; background:#fffdf8; font-size:14px; font-weight:800; letter-spacing:.14em; line-height:1.35; }
.eyebrow::before { display:none; content:none; }
.hero .eyebrow { min-height:40px; padding:8px 15px; border:1px solid rgba(240,184,45,.55); border-radius:999px; color:#ffc21c; background:rgba(255,255,255,.07); font-size:14px; font-weight:800; letter-spacing:.08em; line-height:1.35; }

/* Hovered process-step marker switches from yellow to the brand navy. */
.step:hover::before { border-color:#102b4b; color:#fff; background:#102b4b; }

/* Make the brand mark more prominent and tighten the wordmark lockup. */
.brand { gap:12px; }
.brand-mark { width:48px; height:48px; }
.brand > span { line-height:1.04; }
.brand small { margin-top:2px; line-height:1.15; }
@media(max-width:650px) { .brand-mark { width:40px; height:40px; } .brand small { margin-top:1px; } }

.insert-spec-note{margin:18px 0 28px;padding:16px 18px;border-left:4px solid #1c5eaa;border-radius:8px;background:#f1f6fb;color:#334b61;line-height:1.8}.insert-spec-note strong{color:#12345a}.image-pending{width:100%;height:145px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;border:1px dashed #aab7c4;border-radius:8px;background:#f5f7f9;color:#52687c;text-align:center;font-weight:700;line-height:1.5}.image-pending small{font-weight:500}
.rfq-upload-label { display:grid; gap:8px; }
.rfq-field-title,.rfq-upload-title { display:inline-flex; align-items:flex-start; gap:4px; grid-column:1; justify-self:start; width:fit-content; }
.rfq-field-title::after,.rfq-upload-title::after { content:"*"; color:#b42318; font-size:15px; font-weight:800; line-height:1; }
.rfq-upload-control { position:relative; display:flex; align-items:center; gap:12px; min-height:50px; padding:8px 12px; overflow:hidden; border:1px solid #d4deea; border-radius:8px; background:#f7f9fc; color:#52687c; font-size:14px; font-weight:500; }
.rfq-upload-control { grid-column:1/-1; }
.rfq-upload-button { flex:none; padding:8px 12px; border:1px solid #c6d3e0; border-radius:6px; background:#fff; color:#1c5eaa; font-weight:700; }
.rfq-upload-status { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rfq-upload-control input[type="file"] { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.rfq-upload-control:focus-within { outline:3px solid rgba(28,94,170,.35); outline-offset:2px; }
.rfq-upload-hint { margin-top:-4px; }
.rfq-submit-success,.rfq-submit-error { grid-column:2; margin-top:14px; padding:14px 16px; border-radius:10px; font-size:14px; line-height:1.5; }
.rfq-submit-success { color:#14532d; background:#eaf8ef; border:1px solid #a8dfb8; }
.rfq-submit-error:not(:empty) { color:#842029; background:#fff0f0; border:1px solid #f2b8bd; }
.rfq-form button[disabled] { opacity:.65; cursor:wait; }
.rfq-form-wrap { grid-column:2; }
.rfq-submit-success,.rfq-submit-error { grid-column:auto; }
@media(max-width:900px) { .rfq-form-wrap { grid-column:1; } }
.rfq-file-list { grid-column:1/-1; display:grid; gap:6px; margin:-4px 0 4px; padding:0; list-style:none; }
.rfq-file-list li { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 10px; border:1px solid #e0e6ee; border-radius:7px; color:#334b61; font-size:12px; }
.rfq-file-list li span { min-width:0; overflow-wrap:anywhere; }
.rfq-file-list button { flex:none; padding:4px 8px; border:0; border-radius:5px; background:#f1f4f8; color:#42566b; font-size:11px; }
.rfq-file-list button:hover { background:#e6edf5; }