/* ==========================================================================
Emori Products Company Limited 鈥?site design system
Brand colours taken from the company logo: #005cb9 (blue) #ff5100 (orange)
========================================================================== */
/* ---------- brand typefaces (self-hosted, offline-safe) ---------- */
@font-face{font-family:"Sora";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/sora-500.woff2") format("woff2")}
@font-face{font-family:"Sora";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/sora-600.woff2") format("woff2")}
@font-face{font-family:"Sora";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/sora-700.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/inter-400.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/inter-500.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/inter-600.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/inter-700.woff2") format("woff2")}
:root{
--blue:#005cb9; --blue-d:#00458c; --blue-l:#e8f2fc;
--orange:#ff5100; --orange-l:#fff1ea;
--ink:#1b2430; --gray:#4a5563; --muted:#6b7787;
--line:#e4eaf1; --bg:#f5f8fc; --bg-2:#eef3f9; --white:#fff;
--radius:14px; --radius-s:9px;
--shadow:0 4px 18px rgba(16,42,77,.08);
--shadow-lg:0 18px 48px rgba(16,42,77,.16);
--wrap:1240px;
--ff:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,
"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
--ff-d:"Sora","Inter",-apple-system,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
margin:0;font-family:var(--ff);color:var(--ink);background:var(--white);
font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--ff-d);margin:0;font-weight:700;line-height:1.14;letter-spacing:-.02em}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
button,input,select,textarea{font-family:inherit;font-size:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* keyboard focus for everyone */
:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:4px}
.skip-link{position:absolute;left:12px;top:-60px;z-index:200;background:var(--blue);color:#fff;
padding:10px 16px;border-radius:0 0 10px 10px;font-weight:600;transition:top .18s}
.skip-link:focus{top:0}
.ico{width:1em;height:1em;display:inline-block;vertical-align:-.12em;fill:currentColor;flex:0 0 auto}
/* ---------- buttons ---------- */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:8px;
padding:12px 24px;border-radius:999px;border:1.5px solid transparent;
font-weight:600;font-size:15px;cursor:pointer;transition:.2s;white-space:nowrap;
}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover{background:var(--blue-d);transform:translateY(-1px);box-shadow:var(--shadow)}
.btn-accent{background:var(--orange);color:#fff}
.btn-accent:hover{filter:brightness(.93);transform:translateY(-1px)}
.btn-ghost{background:transparent;border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--blue);color:var(--blue)}
.btn-white{background:#fff;color:var(--blue)}
.btn-sm{padding:8px 16px;font-size:13.5px}
.btn-block{width:100%}
/* green WhatsApp button 鈥?same shape as the blue primary, but the colour tells the
buyer "this opens a chat, not a form". Used wherever the goal is one-click contact. */
.btn-wa{background:#25D366;color:#fff;border-color:#25D366}
.btn-wa:hover{background:#1ebe57;border-color:#1ebe57;color:#fff;transform:translateY(-1px);box-shadow:var(--shadow)}
.btn-wa .ico{width:16px;height:16px;fill:#fff}
.btn-wa-light{background:rgba(37,211,102,.14);color:#1f7a4d;border:1.5px solid rgba(37,211,102,.5)}
.btn-wa-light:hover{background:#25D366;color:#fff;border-color:#25D366}
/* WeChat copy button 鈥?plain text button styled like a contact row */
.wx-copy{all:unset;cursor:pointer;display:inline-flex;flex-direction:column;align-items:center;
gap:7px;padding:15px 6px 13px;background:var(--bg);border-radius:14px;font-size:11px;font-weight:600;color:var(--ink);text-align:center;font-family:inherit}
.wx-copy:hover{background:var(--blue-l)}
.wx-copy .ico{width:24px;height:24px;fill:#07c160}
.wx-copy b{font-size:12.5px;font-weight:700;color:var(--ink)}
.wx-copy span{font-size:10.5px;color:var(--muted);line-height:1.3;word-break:break-all}
.footer-contact .wx-copy{background:none;border-radius:0;padding:0;text-align:left;font-size:14px;color:var(--gray);align-items:flex-start}
.footer-contact .wx-copy:hover{background:none;color:var(--ink)}
.footer-contact .wx-copy .ico{width:1em;height:1em;fill:#07c160}
.footer-contact .wx-copy b{font-size:14px}
.footer-contact .wx-copy span{font-size:14px;color:var(--gray);font-weight:400}
.footer-contact .wx-copy em{font-size:11px;color:var(--muted);font-style:normal}
.footer-wx{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap}
.footer-wx>.ic{margin-top:2px}
/* WeChat QR card — QR image is locked at 1:1 aspect-ratio inside a fixed-size
white box with object-fit:contain. The image is NEVER stretched, cropped or
distorted at any breakpoint — even when the surrounding column narrows. */
.footer-wx-card{display:flex;gap:14px;align-items:center;flex:1;min-width:0;
background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);
border-radius:12px;padding:12px;margin-top:2px}
.footer-qr-box{flex:0 0 96px;width:96px;height:96px;aspect-ratio:1/1;
background:#fff;border-radius:8px;padding:6px;display:flex;align-items:center;justify-content:center;
overflow:hidden}
.footer-qr-box .footer-qr{width:100%;height:100%;display:block;
object-fit:contain;object-position:center;image-rendering:pixelated;border-radius:4px}
.footer-wx-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;line-height:1.35}
.footer-wx-info b{color:#fff;font-size:14px;font-weight:700;font-family:var(--ff-d);letter-spacing:.01em}
.footer-wx-info .footer-wx-id{color:#cfe0f2;font-size:13px;font-weight:600;
background:rgba(0,92,185,.18);padding:3px 8px;border-radius:5px;align-self:flex-start;
font-family:var(--ff-d);letter-spacing:.01em}
.footer-wx-info small{color:#7b8da2;font-size:11.5px;font-style:normal;margin-top:2px}
.footer-wx-info a{color:var(--orange);font-size:12.5px;font-weight:600;margin-top:6px;
text-decoration:none;display:inline-flex;align-items:center;gap:4px}
.footer-wx-info a:hover{color:#ffb47a;text-decoration:underline}
@media (max-width:480px){
.footer-wx-card{flex-direction:column;align-items:flex-start;gap:12px;padding:14px}
.footer-qr-box{align-self:center}
}
/* ---------- header ---------- */
.topbar{background:var(--ink);color:#c8d3e0;font-size:13px}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;height:38px}
.topbar a:hover{color:#fff}
.topbar-info{display:flex;gap:22px;align-items:center}
.topbar-info span{display:inline-flex;align-items:center;gap:6px}
/* WhatsApp pill in the top bar 鈥?green makes the only one-click contact obvious */
.topbar-wa{display:inline-flex;align-items:center;gap:6px;background:#25D366;color:#fff;
padding:4px 11px;border-radius:999px;font-weight:700;font-size:12.5px;letter-spacing:.02em}
.topbar-wa:hover{background:#1ebe57;color:#fff}
.topbar-wa .ico{width:14px;height:14px;fill:#fff}
.topbar-lang{display:flex;gap:14px}
/* Point 7 (image-3): the e-mail is the loudest thing in the topbar now — a warm
orange pill with white text, mirroring the WhatsApp pill on the left. */
.topbar-mail{display:inline-flex;align-items:center;gap:7px;color:#fff;font-weight:700;
font-size:12.5px;letter-spacing:.02em;background:var(--orange);padding:4px 13px;
border-radius:999px;text-decoration:none;transition:.15s;line-height:1.2}
.topbar-mail:hover{background:#e64a00;color:#fff}
.topbar-mail .ic{display:inline-flex;align-items:center}
.topbar-mail .ico{width:13px;height:13px;fill:#fff}
.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.98);
border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex;align-items:center;justify-content:flex-start;gap:18px;height:74px}
/* Header layout (v6.1, per image-3 feedback): [Logo] [nav links] … [search box] [Menu].
The old centre search pill and the email pill were removed from the menu bar;
the search now sits right-aligned where the orange button used to be, and the
e-mail lives (highlighted) in the dark topbar above. */
.brand{display:flex;align-items:center;gap:12px;flex-shrink:0}
.brand img{height:62px;width:auto;max-width:min(540px,60vw)}
.hdr-search{margin-left:auto;flex:0 1 330px;min-width:190px;display:flex;align-items:center;background:#f3f5f9;border:1.5px solid #e1e5ed;border-radius:999px;padding:0 5px 0 14px;transition:.18s}
.hdr-search:focus-within{background:#fff;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-l)}
.hdr-search-ic{display:inline-flex;width:18px;height:18px;color:var(--muted);flex-shrink:0}
.hdr-search-ic svg{width:100%;height:100%}
.hdr-search input{flex:1 1 auto;border:0;background:transparent;outline:0;padding:9px 10px;font-size:14px;color:var(--ink);min-width:0}
.hdr-search input::placeholder{color:#8c97a6}
.hdr-search button{width:34px;height:34px;padding:0;display:inline-flex;align-items:center;justify-content:center;border:0;background:var(--blue);color:#fff;border-radius:50%;cursor:pointer;transition:.15s;flex-shrink:0}
.hdr-search button svg{width:16px;height:16px}
.hdr-search button:hover{background:#004ea0}
/* logo-full.svg carries the company name + slogan inline, so no separate text column is needed */
.brand-text{font-size:12px;color:var(--muted);line-height:1.3;border-left:1px solid var(--line);padding-left:12px}
.brand-text b{display:block;font-size:13px;color:var(--ink)}
.main-nav{display:flex;align-items:center;gap:4px;margin-left:26px}
.main-nav>li{position:relative}
.main-nav>li>a{display:block;padding:10px 15px;font-weight:600;font-size:15px;border-radius:8px;color:var(--gray)}
.main-nav>li>a:hover,.main-nav>li>a.on{color:var(--blue);background:var(--blue-l)}
.dropdown{position:absolute;top:100%;left:0;min-width:250px;background:#fff;border:1px solid var(--line);
border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:8px;opacity:0;visibility:hidden;
transform:translateY(6px);transition:.18s}
.main-nav>li:hover .dropdown,.main-nav>li:focus-within .dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown a{display:block;padding:9px 12px;border-radius:8px;font-size:14.5px;color:var(--gray)}
.dropdown a:hover{background:var(--blue-l);color:var(--blue)}
.header-cta{display:none;align-items:center;gap:10px}
.nav-toggle{display:none;height:46px;border:1.5px solid var(--line);background:#fff;
border-radius:12px;cursor:pointer;align-items:center;justify-content:center;gap:9px;padding:0 16px}
.nav-toggle b{font-size:14px;font-weight:700;color:var(--ink)}
.nav-toggle .hamb{display:block;width:20px;height:14px;position:relative}
.nav-toggle .hamb::before,.nav-toggle .hamb::after{content:"";position:absolute;left:0;width:20px;height:2px;background:var(--ink);transition:.25s}
.nav-toggle .hamb::before{top:0;box-shadow:0 6px 0 var(--ink)}
.nav-toggle .hamb::after{top:12px}
.nav-toggle[aria-expanded="true"] .hamb::before{top:6px;box-shadow:none;transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] .hamb::after{top:6px;transform:rotate(-45deg)}
.nav-toggle[aria-expanded="true"] b{display:none}
.nav-overlay{display:none;position:fixed;inset:0;background:rgba(8,16,28,.55);z-index:54;opacity:0;visibility:hidden;transition:.25s}
.nav-overlay.on{opacity:1;visibility:visible}
.nav-head,.nav-cta,.nav-contact,.nav-cats{display:none}
/* ---------- hero (clean editorial split, light background) ---------- */
/* ========== Home hero — two-column editorial on light surface. ==========
Design notes (synthesised from reliable.hk, picturausa, wipex, eckert,
polydono, kandinsky, evike, thebrandzone, gottarunracing):
• Light, near-white background lets the real product photography carry
the visual weight (picturausa, wipex, eckert, kandinsky pattern).
• Editorial 55/45 split — copy on the left, single hero product on the
right with a 4:3 carousel + restrained caption overlay card.
• "Made in our own factory" stays as the literal B2B promise (no fluff),
with the eyebrow chip + four-figure meta row as the trust band.
• Only two actions: one filled primary + one inline arrow link. No
second filled button competing for attention. */
.hero{position:relative;color:var(--ink);background:#fff;overflow:hidden;isolation:isolate;z-index:0;
border-bottom:1px solid var(--line)}
/* A single 2px warm-orange ribbon at the very top anchors the brand colour
without painting the whole section orange. */
.hero::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--orange);z-index:2}
/* Subtle wash on the right so the product column has a slightly warmer
base than the copy column — gives the layout depth without using a
heavy gradient. */
/* Point 8 (image-3): the old right-side tint panel made the hero read as two
different canvases. It is gone — left copy area and right poster area now
share one unified white background at every breakpoint. */
.hero::after{display:none}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:64px;
align-items:center;padding-top:88px;padding-bottom:88px;position:relative;z-index:1}
.hero-copy{max-width:580px}
/* Eyebrow: small-caps text with a short leading dash in the brand orange.
Replaces the old orange pill chip — same information density, half the
visual weight, works at every breakpoint without a coloured background. */
.hero-eyebrow{display:inline-flex;align-items:center;gap:14px;font-size:12.5px;font-weight:700;
letter-spacing:.14em;text-transform:uppercase;color:var(--blue);margin-bottom:28px;
font-family:var(--ff-d)}
.hero-eyebrow::before{content:"";width:28px;height:2px;background:var(--orange);flex-shrink:0}
.hero h1{font-size:clamp(34px,4.4vw,56px);line-height:1.06;margin-bottom:22px;
letter-spacing:-.025em;color:var(--ink);font-weight:700}
.hero h1 em{font-style:normal;color:var(--blue);font-weight:700}
.hero-lead{font-size:17.5px;line-height:1.62;color:var(--gray);max-width:540px;margin-bottom:32px}
.hero-actions{display:flex;gap:22px;flex-wrap:wrap;align-items:center;margin-bottom:36px}
.hero-actions .btn{padding:15px 28px;font-size:15px}
/* Inline arrow link (text-only secondary) — pairs with the filled primary
so the visual hierarchy is unambiguous: one button + one link. */
.hero-link{color:var(--ink);font-weight:600;font-size:15px;text-decoration:none;
padding:14px 0;display:inline-flex;align-items:center;gap:8px;position:relative;
transition:color .2s}
.hero-link::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:1.5px;
background:var(--blue);transform-origin:left;transition:transform .25s,background .2s}
.hero-link:hover{color:var(--blue)}
.hero-link:hover::after{background:var(--orange);transform:scaleX(1.04)}
.hero-link .hp-arrow{display:inline-block;transition:transform .2s}
.hero-link:hover .hp-arrow{transform:translateX(4px)}
/* Trust meta row — four facts spread across the full hero-copy width, separated by
hairline dividers. Numbers in brand orange, labels in muted gray, no boxed cards.
Desktop: 4 columns with `justify-content:space-between` so they don't all cluster
against the left edge. Mobile: 2 rows × 2 columns with comfortable spacing. */
.hero-meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px 0;
padding-top:24px;border-top:1px solid var(--line);list-style:none;max-width:560px}
.hero-meta li{display:flex;flex-direction:column;gap:6px;padding:0 12px;
border-right:1px solid var(--line);flex:1 1 auto;min-width:120px;text-align:left}
.hero-meta li:first-child{padding-left:0}
.hero-meta li:last-child{border-right:0;padding-right:0}
.hero-meta b{font-family:var(--ff-d);font-size:30px;color:var(--orange);font-weight:700;line-height:1;
letter-spacing:-.02em}
.hero-meta span{font-size:11.5px;color:var(--muted);letter-spacing:.08em;
text-transform:uppercase;font-weight:600}
/* Hero posters — large 4:3 product carousel on a soft light card.
The overlay caption card (category + product name + "View →") sits
in the bottom-left, on a frosted-white surface. Real product
photography occupies the dominant area (≥65% of the tile). */
.hero-posters{position:relative;width:100%;max-width:640px;justify-self:end;aspect-ratio:4/3;
border-radius:18px;overflow:hidden;background:#eef2f7;
box-shadow:0 24px 48px -18px rgba(16,42,77,.20),0 8px 16px -6px rgba(16,42,77,.10),
inset 0 0 0 1px rgba(16,42,77,.04)}
.hero-posters .hp{position:absolute;inset:0;display:block;opacity:0;transition:opacity .6s ease;
background:#eef2f7;pointer-events:none;text-decoration:none;color:inherit}
.hero-posters .hp.on{opacity:1;pointer-events:auto}
/* Per image-2 feedback: the frame is locked to the posters' native 4:3 at every
breakpoint and the bitmap is shown with `contain` — the full poster (baked-in
logo / category / headline / CTA) is always 100% visible, never cropped, and
no zoom transform that would push artwork past the frame edges. The old
caption overlay was removed from the markup, so its styles are gone too. */
.hero-posters .hp img{width:100%;height:100%;object-fit:contain;display:block}
.hp-dots{position:absolute;top:18px;right:18px;display:flex;gap:7px;z-index:4}
.hp-dot{width:9px;height:9px;border-radius:50%;border:0;background:rgba(255,255,255,.6);
cursor:pointer;padding:0;transition:.2s;box-shadow:0 2px 6px rgba(0,0,0,.18)}
.hp-dot.on{background:var(--orange);width:24px;border-radius:5px}
.hp-dot:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
@media (max-width:1080px){
.hero .wrap{gap:48px;padding-top:72px;padding-bottom:72px}
.hero-posters{max-width:560px}
}
@media (max-width:860px){
.hero .wrap{grid-template-columns:1fr;gap:32px;padding-top:40px;padding-bottom:40px}
.hero::after{display:none}
.hero-eyebrow{margin-bottom:16px;font-size:11.5px;gap:10px}
.hero-eyebrow::before{width:20px}
.hero h1{font-size:30px;line-height:1.1;margin-bottom:14px}
.hero h1 br{display:none}
.hero-lead{font-size:15.5px;line-height:1.6;margin-bottom:22px}
.hero-actions{gap:14px;margin-bottom:22px}
.hero-actions .btn{padding:12px 22px;font-size:14px}
.hero-link{padding:10px 0;font-size:14px}
/* 2x2 grid on mobile so the four facts never run off the screen or look like a
long single column. */
.hero-meta{padding-top:18px;display:grid;grid-template-columns:1fr 1fr;gap:14px 0;
max-width:none}
.hero-meta li{padding:0 12px;border-right:1px solid var(--line);min-width:0}
.hero-meta li:nth-child(2){border-right:0;padding-right:0}
.hero-meta li:nth-child(1),.hero-meta li:nth-child(2){border-bottom:1px solid var(--line);
padding-bottom:14px}
.hero-meta b{font-size:22px}
.hero-meta span{font-size:10.5px}
/* Mobile carousel: full image visible (object-fit:contain with neutral light
background). The previous 16:10 cover cropped ~25% of the 4:3 poster;
switching to `contain` plus a smaller aspect ratio (4/3) shows the whole
poster edge-to-edge, satisfying the "mobile must show full image" rule. */
.hero-posters{max-width:100%;aspect-ratio:4/3;border-radius:14px}
.hp-dots{top:12px;right:12px}
}
/* ---------- stat strip ---------- */
.stats{background:var(--white);border-bottom:1px solid var(--line)}
.stats .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding-top:38px;padding-bottom:38px}
.stat{text-align:center;border-right:1px solid var(--line)}
.stat:last-child{border-right:0}
.stat b{display:block;font-family:var(--ff-d);font-size:40px;color:var(--blue);line-height:1.1;letter-spacing:-.02em}
.stat span{font-size:13.5px;color:var(--muted);letter-spacing:.03em}
/* ---------- sections ---------- */
.section{padding:42px 0}
.section.alt{background:var(--bg)}
.sec-head{max-width:720px;margin:0 auto 30px;text-align:center}
.sec-head.left{margin-left:0;text-align:left}
.sec-kicker{color:var(--orange);font-weight:700;font-size:13.5px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:10px}
.sec-head h2{font-size:clamp(26px,2.8vw,38px);margin-bottom:14px}
.sec-head p{color:var(--gray);font-size:16.5px}
/* ---------- category cards ---------- */
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.cat-card{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);
background:#fff;transition:.25s;display:block}
.cat-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.cat-card-img{height:200px;background:#eef2f7;overflow:hidden}
.cat-card-img img{width:100%;height:100%;object-fit:cover;transition:.5s}
.cat-card:hover .cat-card-img img{transform:scale(1.07)}
.cat-card-body{padding:20px 22px 24px}
.cat-card-body h3{font-size:17.5px;margin-bottom:6px}
.cat-card-body span{font-size:13.5px;color:var(--muted)}
.cat-card-body i{font-style:normal;color:var(--orange);font-weight:600;font-size:13.5px;
display:inline-flex;gap:6px;margin-top:12px}
/* ---------- product cards ---------- */
.prod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.prod-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
transition:.22s;display:flex;flex-direction:column}
.prod-card:hover{border-color:#c9dcf2;box-shadow:var(--shadow-lg);transform:translateY(-4px)}
.prod-card-img{aspect-ratio:1/1;background:#f2f5f9;overflow:hidden;position:relative}
.prod-card-img img{width:100%;height:100%;object-fit:cover;transition:.45s}
.prod-card:hover .prod-card-img img{transform:scale(1.06)}
.prod-badge{position:absolute;top:12px;left:12px;background:var(--orange);color:#fff;font-size:11.5px;
font-weight:700;padding:4px 10px;border-radius:999px;letter-spacing:.04em}
.prod-card-body{padding:16px 18px 20px;display:flex;flex-direction:column;gap:6px;flex:1}
.prod-cat{font-size:12px;color:var(--muted);letter-spacing:.04em;text-transform:uppercase}
.prod-card-body h3{font-size:15.5px;line-height:1.35;min-height:42px}
.prod-meta{font-size:13px;color:var(--gray);display:flex;gap:14px;margin-top:auto;padding-top:10px;
border-top:1px solid var(--line)}
.prod-meta b{color:var(--blue)}
/* ---------- filter bar ---------- */
.filterbar{background:#fff;border-bottom:1px solid var(--line);padding:18px 0;position:sticky;top:74px;z-index:40}
.filterbar .wrap{display:flex;gap:14px;align-items:center;flex-wrap:wrap;justify-content:space-between}
.chips{display:flex;gap:9px;flex-wrap:wrap}
.chip{padding:9px 18px;border-radius:999px;border:1.5px solid var(--line);background:#fff;
font-size:14px;font-weight:600;color:var(--gray);cursor:pointer;transition:.18s}
.chip:hover{border-color:#bcd6f0;color:var(--blue)}
.chip.on{background:var(--blue);border-color:var(--blue);color:#fff}
.chip i{font-style:normal;opacity:.7;font-size:12.5px;margin-left:4px}
.searchbox{position:relative;flex:0 0 290px}
.searchbox input{width:100%;padding:11px 16px 11px 42px;border:1.5px solid var(--line);
border-radius:999px;outline:none;transition:.2s}
.searchbox input:focus{border-color:var(--blue);box-shadow:0 0 0 4px var(--blue-l)}
.searchbox::before{content:"";position:absolute;left:16px;top:50%;width:15px;height:15px;margin-top:-8px;
border:2px solid var(--muted);border-radius:50%}
.searchbox::after{content:"";position:absolute;left:27px;top:50%;margin-top:4px;width:7px;height:2px;
background:var(--muted);transform:rotate(45deg)}
.resultline{font-size:14px;color:var(--muted);margin:26px 0 18px}
.resultline b{color:var(--ink)}
/* ---------- breadcrumb ---------- */
.crumb{font-size:13.5px;color:var(--muted);padding:20px 0}
.crumb a:hover{color:var(--blue)}
.crumb span{margin:0 7px;opacity:.5}
/* ---------- product detail ---------- */
.pd{display:grid;grid-template-columns:1.05fr 1fr;gap:48px;padding-bottom:20px}
.pd-media{min-width:0}
.pd-video{border-radius:var(--radius);overflow:hidden;background:#0b1622;margin-bottom:16px;box-shadow:var(--shadow)}
.pd-video video{width:100%;display:block;max-height:460px;background:#0b1622}
.pd-main{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#f2f5f9;aspect-ratio:1/1}
.pd-main img{width:100%;height:100%;object-fit:cover;cursor:zoom-in}
.pd-thumbs{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-top:12px;max-height:230px;overflow-y:auto;padding-right:2px}
.pd-thumbs img{aspect-ratio:1/1;object-fit:cover;border-radius:8px;border:2px solid transparent;cursor:pointer;background:#f2f5f9}
.pd-thumbs img:hover{border-color:#bcd6f0}
.pd-thumbs img.on{border-color:var(--orange)}
.pd-info h1{font-size:clamp(24px,2.6vw,34px);margin-bottom:10px}
.pd-sub{color:var(--muted);font-size:14px;margin-bottom:20px}
.pd-desc{color:var(--gray);margin-bottom:22px}
.pd-desc li{position:relative;padding-left:24px;margin-bottom:9px}
.pd-desc li::before{content:"";position:absolute;left:4px;top:11px;width:7px;height:7px;border-radius:50%;background:var(--orange)}
.spec{width:100%;border-collapse:collapse;margin-bottom:24px;font-size:14.5px}
.spec th,.spec td{text-align:left;padding:11px 14px;border:1px solid var(--line)}
.spec th{background:var(--bg);width:34%;font-weight:600;color:var(--gray)}
.pd-actions{display:flex;gap:12px;flex-wrap:wrap}
/* variants */
.varlist{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.var{display:flex;gap:14px;border:1px solid var(--line);border-radius:var(--radius);padding:14px;
background:#fff;transition:.2s}
.var:hover{border-color:#c9dcf2;box-shadow:var(--shadow)}
.var-img{display:block;width:88px;height:88px;flex:0 0 88px;border-radius:8px;overflow:hidden;background:#f2f5f9}
.var-img img{width:100%;height:100%;object-fit:cover}
/* SKU card image is now a link to the product detail page (point 5) */
a.var-img{cursor:pointer;transition:.15s}
a.var-img:hover{box-shadow:0 0 0 2px var(--blue-l),0 4px 12px rgba(0,40,90,.12)}
.var-body{min-width:0;flex:1}
.var-body h4{font-size:14.5px;margin-bottom:6px}
.var-body dl{margin:0;font-size:12.8px;color:var(--gray);display:grid;grid-template-columns:auto 1fr;gap:2px 8px}
.var-body dt{color:var(--muted)}
.var-body dd{margin:0;color:var(--ink);overflow-wrap:anywhere}
.var-cta{margin-top:9px;display:flex;gap:8px}
/* ---------- about ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.split-media{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-lg)}
.split-media img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.about-copy h2{font-size:clamp(24px,2.6vw,34px);margin-bottom:18px}
.about-copy p{color:var(--gray);margin-bottom:16px}
.ticks{display:grid;gap:11px;margin-top:22px}
.ticks li{display:flex;gap:11px;align-items:flex-start;color:var(--gray)}
.ticks li::before{content:"";flex:0 0 20px;height:20px;margin-top:3px;border-radius:50%;
background:var(--blue) url("data:image/svg+xml;utf8,") center/12px no-repeat}
.gallery-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.gallery-strip figure{margin:0;border-radius:var(--radius);overflow:hidden;background:#eef2f7;position:relative}
.gallery-strip img{aspect-ratio:4/3;object-fit:cover;width:100%;transition:.45s}
.gallery-strip figure:hover img{transform:scale(1.06)}
.gallery-strip figcaption{position:absolute;left:0;right:0;bottom:0;padding:22px 14px 12px;color:#fff;font-size:13.5px;
background:linear-gradient(transparent,rgba(10,22,38,.85))}
/* Featured 5-photo block used by the "office / factory / showroom" sections (home + about).
Symmetric 1:1 columns: a tall hero image (4:5) on the left equals the visual area of the
four 1:1 tiles on the right. Avoids the trap where the wide hero dwarfs the side block. */
.gallery-featured{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:stretch}
.gallery-featured .gf-main{position:relative;border-radius:var(--radius);overflow:hidden;background:#eef2f7;aspect-ratio:4/5;height:100%}
.gallery-featured .gf-main img{aspect-ratio:4/5;width:100%;height:100%;object-fit:cover;transition:.45s}
.gallery-featured .gf-main:hover img{transform:scale(1.04)}
.gallery-featured .gf-side{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr);gap:18px;min-width:0}
.gallery-featured .gf-side figure{margin:0;position:relative;border-radius:var(--radius);overflow:hidden;background:#eef2f7;min-height:0}
.gallery-featured .gf-side img{aspect-ratio:1/1;object-fit:cover;width:100%;height:100%;transition:.45s}
.gallery-featured figure:hover img{transform:scale(1.05)}
.gallery-featured figcaption{position:absolute;left:0;right:0;bottom:0;padding:14px 12px 10px;color:#fff;font-size:13px;
font-weight:600;background:linear-gradient(transparent,rgba(10,22,38,.85));letter-spacing:.02em}
.gallery-featured .gf-main figcaption{padding:24px 18px 14px;font-size:15px}
@media (max-width:1080px){
.gallery-featured{grid-template-columns:1fr}
.gallery-featured .gf-main{aspect-ratio:16/10}
}
@media (max-width:860px){
.gallery-featured .gf-side{grid-template-columns:repeat(2,1fr)}
}
.tabs{display:flex;gap:10px;justify-content:center;margin-bottom:30px;flex-wrap:wrap}
/* timeline */
.timeline{position:relative;padding-left:30px}
.timeline::before{content:"";position:absolute;left:8px;top:6px;bottom:6px;width:2px;background:var(--line)}
.tl-item{position:relative;padding-bottom:30px}
.tl-item::before{content:"";position:absolute;left:-30px;top:5px;width:18px;height:18px;border-radius:50%;
background:#fff;border:3px solid var(--blue)}
.tl-year{display:inline-block;background:var(--blue-l);color:var(--blue);font-weight:700;font-size:13px;
padding:3px 12px;border-radius:999px;margin-bottom:8px}
.tl-item h4{font-size:16.5px;margin-bottom:5px}
.tl-item p{color:var(--gray);font-size:14.5px}
.tl-item img{margin-top:12px;border-radius:var(--radius);max-width:420px}
/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.info-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow)}
.info-card h3{font-size:19px;margin-bottom:6px;color:var(--blue)}
.info-card .flag{font-size:12.5px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;margin-bottom:16px}
.info-card dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:9px 12px;font-size:14.5px}
.info-card dt{color:var(--muted)}
.info-card dd{margin:0;color:var(--ink)}
.info-card dd a{color:var(--blue)}
.info-card dd a:hover{text-decoration:underline}
.info-map{padding:0;overflow:hidden;position:relative}
.info-map iframe{display:block;width:100%;height:100%;border:0;min-height:280px}
.info-map-link{position:absolute;bottom:8px;right:8px;background:rgba(255,255,255,.92);color:var(--blue);font-size:12.5px;font-weight:600;padding:6px 10px;border-radius:6px;text-decoration:none;box-shadow:0 2px 6px rgba(0,0,0,.15)}
.info-map-link:hover{background:#fff;text-decoration:underline}
.info-note{margin-top:16px;background:var(--blue-l);border-radius:var(--radius-s);padding:12px 14px;font-size:13.5px;color:var(--blue-d)}
/* ---------- forms ---------- */
.form-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px;box-shadow:var(--shadow)}
.field{margin-bottom:16px}
.field label{display:block;font-size:13.5px;font-weight:600;margin-bottom:7px;color:var(--gray)}
.field label i{color:var(--orange);font-style:normal}
.field input,.field select,.field textarea{
width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:10px;outline:none;transition:.2s;background:#fff}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--blue);box-shadow:0 0 0 4px var(--blue-l)}
.field textarea{min-height:120px;resize:vertical}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.check{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--gray)}
.check input{width:auto;margin-top:3px}
.form-note{font-size:12.5px;color:var(--muted);margin-top:14px}
.alert{display:none;background:#e7f8ee;border:1px solid #a9e2c1;color:#116b3a;padding:13px 16px;
border-radius:10px;font-size:14px;margin-bottom:18px}
.alert.on{display:block}
/* ---------- footer ---------- */
.site-footer{background:#0f1a28;color:#9fb0c4;padding:60px 0 0;font-size:14.5px}
.footer-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr 1.3fr;gap:36px;padding-bottom:44px}
.footer-brand img.footer-logo{height:48px;width:auto;margin-bottom:18px;background:transparent;border:1px solid rgba(255,255,255,.18);border-radius:6px;padding:6px 10px}
.footer-brand p{color:#8496ab;font-size:14px;line-height:1.75}
.site-footer h4{color:#fff;font-size:15px;margin-bottom:16px}
.footer-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:18px}
.footer-meta .chip{font-size:11.5px;font-weight:600;letter-spacing:.04em;
color:#9fb0c4;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
padding:5px 10px;border-radius:999px}
.site-footer li{margin-bottom:9px}
.site-footer a:hover{color:#fff}
/* Point 3 (image-2): footer contact block rebuilt as aligned label/value rows —
fixed icon column, uppercase micro-label above each value, one rhythm (14px)
between rows, and the WeChat QR card indented to sit on the text column. */
.footer-contact li{display:flex;gap:12px;align-items:flex-start;margin-bottom:14px}
.footer-contact .ic{display:inline-flex;flex-shrink:0;margin-top:3px;color:#9fb0c4}
.footer-contact b{color:#fff;font-weight:600}
.fc-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.fc-body b{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#7b8da2;line-height:1.4}
.fc-body span,.fc-body a{font-size:14px;line-height:1.55;color:#c8d3e0}
.fc-body a{text-decoration:none;border-bottom:1px solid rgba(255,255,255,.18)}
.fc-body a:hover{color:#fff;border-bottom-color:#fff}
.footer-wx{padding-left:26px}
@media (max-width:480px){.footer-wx{padding-left:0}}
.footer-bottom{border-top:1px solid rgba(255,255,255,.09);padding:20px 0;display:flex;
justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13.5px;color:#7b8da2}
/* ---------- mobile tab bar + fab ---------- */
.tabbar{display:none}
.fabs{position:fixed;right:22px;bottom:96px;z-index:70;display:flex;flex-direction:column;gap:12px}
.fab{width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;
box-shadow:var(--shadow-lg);border:none;cursor:pointer;transition:.2s}
.fab svg{width:22px;height:22px;fill:#fff}
.fab:hover{transform:translateY(-3px)}
.fab.wa{background:#25d366}
.fab.mail{background:var(--blue)}
.fab.top{background:var(--ink);opacity:0;pointer-events:none}
.fab.top.on{opacity:1;pointer-events:auto}
.empty{text-align:center;padding:70px 0;color:var(--muted)}
.empty b{display:block;font-size:18px;color:var(--ink);margin-bottom:8px}
.center{text-align:center;margin-top:40px}
/* ---------- product detail: main gallery labels + long-form detail images ---------- */
.pd-main-wrap{position:relative}
.pd-main-label{position:absolute;top:14px;left:14px;z-index:2;background:rgba(15,26,40,.78);color:#fff;
font-size:12px;font-weight:600;letter-spacing:.03em;padding:5px 12px;border-radius:999px;pointer-events:none}
.pd-gallery-note{font-size:13px;color:var(--muted);margin-top:10px}
.detail-sec{background:var(--bg);border-top:1px solid var(--line)}
.detail-sec .wrap{max-width:900px}
.detail-imgs{margin-top:6px}
.detail-imgs img{width:100%;display:block;border-radius:10px;margin-bottom:14px;background:#fff;
box-shadow:var(--shadow)}
.detail-imgs img:last-child{margin-bottom:0}
/* ---------- product page: 涓诲浘 gallery + info + connected detail images ---------- */
.pd-grid{display:grid;grid-template-columns:1fr .9fr;gap:42px;align-items:start}
.pd-gallery{position:sticky;top:84px}
.pd-hero{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.pd-hero img{width:100%;display:block;object-fit:contain;max-height:540px;cursor:zoom-in}
.pd-thumbs{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.pd-thumbs img{width:64px;height:64px;object-fit:cover;border:1px solid var(--line);border-radius:8px;cursor:pointer;background:#fff}
.pd-thumbs img.on{border-color:var(--blue);box-shadow:0 0 0 2px var(--blue-l)}
.sku-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.sku-chip{background:#fff;border:1px solid var(--line);color:var(--ink);border-radius:999px;padding:7px 16px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit}
.sku-chip.on{background:var(--blue);border-color:var(--blue);color:#fff}
.sku-chip:hover{border-color:var(--blue)}
.pd-video{margin-top:12px}
.pd-video video{width:100%;aspect-ratio:16/9;border-radius:12px;background:#000}
.pd-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.pd-shots{max-width:860px;margin:0 auto}
.pd-shot{margin:0;font-size:0}
.pd-shot img{width:100%;height:auto;display:block;border-radius:0;background:#fff;cursor:zoom-in}
/* ---------- product main image: contain on white, no cropping (legacy) ---------- */
.pd-main{background:#fff}
.pd-main img{object-fit:contain;padding:10px}
/* ---------- image lightbox ---------- */
.lb{position:fixed;inset:0;z-index:120;background:rgba(9,16,26,.9);display:none;
align-items:center;justify-content:center;padding:24px}
.lb.on{display:flex}
.lb figure{margin:0;max-width:min(92vw,900px);max-height:88vh;display:flex;flex-direction:column;gap:12px;align-items:center}
.lb img{max-width:100%;max-height:78vh;object-fit:contain;border-radius:12px;background:#fff}
.lb figcaption{color:#cfe0f0;font-size:14px}
.lb button{position:absolute;border:0;background:rgba(255,255,255,.12);color:#fff;width:48px;height:48px;
border-radius:50%;font-size:24px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s}
.lb button:hover{background:rgba(255,255,255,.26)}
.lb .lb-x{top:22px;right:22px}
.lb .lb-p{left:22px;top:50%;transform:translateY(-50%)}
.lb .lb-n{right:22px;top:50%;transform:translateY(-50%)}
/* ---------- OEM process band (dark, for rhythm) ---------- */
.band-dark{background:linear-gradient(160deg,#0c1826,#123252);color:#fff}
.band-dark .sec-kicker{color:#ff9a6b}
.band-dark .sec-head h2{color:#fff}
.band-dark .sec-head p{color:#a9bdd4}
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;counter-reset:s}
.step{position:relative;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
border-radius:var(--radius);padding:24px 18px 22px;text-align:center}
.step .n{width:44px;height:44px;margin:0 auto 14px;border-radius:50%;display:flex;align-items:center;justify-content:center;
font-family:var(--ff-d);font-weight:700;font-size:18px;background:var(--orange);color:#fff}
.step h4{font-size:16px;margin-bottom:7px;color:#fff}
.step p{font-size:13.5px;color:#a9bdd4;line-height:1.55}
.step::after{content:"";position:absolute;top:34px;right:-11px;width:22px;height:2px;background:rgba(255,255,255,.2)}
.step:last-child::after{display:none}
/* ---------- value props (light feature cards) ---------- */
.props{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.prop{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 22px;box-shadow:var(--shadow);transition:.22s;text-decoration:none;color:var(--ink)}
.prop:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:#cfe0f2;color:var(--ink)}
.prop:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.prop .ic{width:50px;height:50px;border-radius:13px;background:var(--blue-l);color:var(--blue);
display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.prop .ic svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.prop h3{font-size:17px;margin-bottom:8px}
.prop p{font-size:14.5px;color:var(--gray);line-height:1.6}
.prop.eco .ic{background:#e7f6ec;color:#2f855a}
.prop.hot .ic{background:var(--orange-l);color:var(--orange)}
/* ---------- responsive ---------- */
@media (max-width:1080px){
.cat-grid,.prod-grid,.gallery-strip{grid-template-columns:repeat(3,1fr)}
.hero .wrap{grid-template-columns:1fr;gap:32px;padding-top:48px;padding-bottom:48px}
/* On tablets the visual hierarchy flips: product image first (proves what we make),
copy and CTA below. Without this, the headline swallows the whole fold.
4/3 = poster's native ratio — full artwork visible, zero crop (image-2 fix). */
.hero-posters{justify-self:stretch;max-width:none;order:-1;aspect-ratio:4/3}
.hero-copy{order:1}
.hero-chip{left:14px;top:14px;right:auto;bottom:auto}
.pd-grid{grid-template-columns:1fr;gap:30px}
.siblings{grid-template-columns:1fr}
.footer-grid{grid-template-columns:1.4fr repeat(2,1fr);gap:32px}
}
/* Stable 3-column grid used by the about-page office/factory/team strips (6–8 photos).
3 cols desktop / 2 cols tablet / 1 col phone; uniform card height keeps the row balanced. */
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.gallery-grid figure{margin:0;border-radius:var(--radius);overflow:hidden;background:#eef2f7;position:relative}
.gallery-grid img{aspect-ratio:4/3;object-fit:cover;width:100%;transition:.45s;cursor:zoom-in}
.gallery-grid figure:hover img{transform:scale(1.04)}
.gallery-grid figcaption{position:absolute;left:0;right:0;bottom:0;padding:18px 14px 12px;color:#fff;font-size:13.5px;
font-weight:600;background:linear-gradient(transparent,rgba(10,22,38,.82));letter-spacing:.02em}
@media (max-width:860px){.gallery-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.gallery-grid{grid-template-columns:1fr}}
@media (max-width:860px){
.topbar{display:none}
/* Closed state is fully out of layout: visibility:hidden removes hit-testing and
makes documentElement.scrollWidth return clientWidth on phones. */
.main-nav{position:fixed;top:0;right:0;bottom:0;left:0;width:100vw;max-width:none;background:#fff;
flex-direction:column;align-items:stretch;gap:0;padding:0 20px calc(28px + env(safe-area-inset-bottom,0px));
overflow-y:auto;transform:translateX(100%);transition:transform .32s cubic-bezier(.4,0,.2,1);
visibility:hidden;z-index:90}
.main-nav.open{transform:none;visibility:visible}
.nav-overlay{display:block;z-index:85}
/* drawer header 鈥?brand + close */
.nav-head{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;
padding:14px 0;margin:0 -20px 6px;padding-left:20px;padding-right:20px;background:#fff;border-bottom:1px solid var(--line)}
.nav-brand{display:flex;align-items:center;gap:10px}
.nav-brand img{height:54px;width:auto;max-width:86vw}
.nav-brand b{display:none}
.nav-close{width:46px;height:46px;border:0;background:var(--bg);border-radius:14px;font-size:28px;
line-height:1;color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center}
/* primary links 鈥?big touch rows with icons */
.main-nav>li>a{display:flex;align-items:center;gap:15px;padding:16px 2px;font-size:17px;font-weight:600;
color:var(--ink);border-bottom:1px solid var(--line);border-radius:0}
.main-nav>li>a::before{content:"";width:24px;height:24px;flex:0 0 auto;background:center/contain no-repeat}
.main-nav>li>a::after{content:"\203A";margin-left:auto;font-size:24px;line-height:1;color:var(--muted);font-weight:400}
.main-nav>li>a[href="index.html"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23005cb9' d='M12 3 2 12h3v9h5v-6h4v6h5v-9h3L12 3Z'/%3E%3C/svg%3E")}
.main-nav>li>a[href="products.html"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23005cb9' d='M4 4h7v7H4V4Zm9 0h7v7h-7V4ZM4 13h7v7H4v-7Zm9 0h7v7h-7v-7Z'/%3E%3C/svg%3E")}
.main-nav>li>a[href="about.html"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23005cb9' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm1 15h-2v-6h2v6Zm0-8h-2V7h2v2Z'/%3E%3C/svg%3E")}
.main-nav>li>a[href="contact.html"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23005cb9' d='M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E")}
.main-nav>li>a.on{color:var(--blue)}
.main-nav>li>a.on::after{color:var(--blue)}
/* desktop dropdown is hidden on mobile 鈥?categories become cards below */
.dropdown{display:none}
/* category cards */
.nav-cats{display:block;padding-top:18px}
.nav-cap{display:block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
color:var(--muted);margin-bottom:12px}
.nav-cat-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.nav-cat{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
border-radius:14px;overflow:hidden;box-shadow:0 2px 10px rgba(16,42,77,.05)}
.nav-cat:active{transform:scale(.98)}
.nav-cat img{width:100%;height:86px;object-fit:cover;background:var(--bg)}
.nav-cat span{padding:10px 11px 12px;font-size:13px;font-weight:700;line-height:1.25;color:var(--ink)}
.nav-cat i{position:absolute;top:8px;right:8px;background:rgba(8,16,28,.58);color:#fff;font-size:11px;
font-weight:700;font-style:normal;padding:2px 9px;border-radius:999px;backdrop-filter:blur(3px)}
/* CTA + contact */
.nav-cta{display:block;margin-top:20px}
.nav-cta .btn{width:100%;justify-content:center;padding:16px;font-size:16px;border-radius:14px}
.nav-contact{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}
.nav-contact a{display:flex;flex-direction:column;align-items:center;gap:7px;padding:15px 6px 13px;
background:var(--bg);border-radius:14px;font-size:11px;font-weight:600;color:var(--ink);text-align:center}
.nav-contact .ico{width:24px;height:24px;fill:var(--blue);flex:0 0 auto}
.nav-contact b{font-size:12.5px;font-weight:700;color:var(--ink)}
.nav-contact span{font-size:10.5px;color:var(--muted);line-height:1.3;word-break:break-all}
.nav-toggle{display:flex}
.header-cta .btn{display:none}
.hero{min-height:440px}
.hero-inner{padding:64px 0}
.stats .wrap{grid-template-columns:1fr 1fr;gap:26px 12px}
.stat:nth-child(2){border-right:0}
.section{padding:52px 0}
.cat-grid,.prod-grid{grid-template-columns:repeat(2,1fr);gap:14px}
.gallery-strip{grid-template-columns:repeat(2,1fr)}
.pd{grid-template-columns:1fr;gap:28px}
.split{grid-template-columns:1fr;gap:28px}
.contact-grid,.varlist,.grid2{grid-template-columns:1fr}
.filterbar{top:74px}
.filterbar .wrap{flex-direction:column;align-items:stretch;gap:12px}
.searchbox{flex:1 1 auto;width:100%}
.chips{overflow-x:auto;padding-bottom:4px;flex-wrap:nowrap}
.chip{flex:0 0 auto}
.footer-grid{grid-template-columns:1fr;gap:26px}
.pd-thumbs{grid-template-columns:repeat(4,1fr);max-height:none;overflow:visible}
.fabs{bottom:88px;right:14px;gap:10px}
.fab{width:46px;height:46px}
.tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:80;
background:rgba(255,255,255,.98);backdrop-filter:blur(12px);border-top:1px solid var(--line);
padding:8px 0 calc(6px + env(safe-area-inset-bottom,0px))}
.tabbar a{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11px;color:var(--muted);font-weight:600;padding-top:3px}
.tabbar a.on{color:var(--blue)}
.tabbar svg{width:22px;height:22px;fill:currentColor}
.tabbar .quote{position:relative;top:-16px}
.tabbar .quote i{width:46px;height:46px;border-radius:50%;background:var(--orange);display:flex;
align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(255,81,0,.4)}
.tabbar .quote svg{fill:#fff;width:23px;height:23px}
body{padding-bottom:64px}
/* On phones the search input moves into its own full-width row below the
logo + menu trigger. */
.site-header .wrap{height:auto;flex-wrap:wrap;gap:10px;padding-top:8px;padding-bottom:8px}
.brand img{height:48px}
.hdr-search{order:3;flex:1 0 100%;max-width:none;margin-top:4px}
/* menu trigger stays pinned to the right of the logo row on phones */
.header-cta{display:flex;margin-left:auto}
.hero .wrap{grid-template-columns:1fr;gap:28px;padding-top:32px;padding-bottom:32px}
.hero-posters{justify-self:stretch;max-width:none;order:-1;aspect-ratio:4/3;border-radius:18px}
.hero-copy{order:1}
.hero-chip{left:12px;top:12px;right:auto;bottom:auto;font-size:12px;padding:6px 11px}
.steps{grid-template-columns:1fr 1fr}
.pd-grid{grid-template-columns:1fr;gap:26px}
.pd-gallery{position:static}
.step::after{display:none}
.props{grid-template-columns:1fr 1fr}
}
@media (max-width:520px){
.cat-grid{grid-template-columns:1fr}
.prod-grid{grid-template-columns:repeat(2,1fr);gap:11px}
.prod-card-body{padding:12px 12px 15px}
.prod-card-body h3{font-size:14px;min-height:38px}
.prod-meta{font-size:12px;gap:9px}
.wrap{padding:0 16px}
.topbar-info span:nth-child(2){display:none}
.brand-text{display:none}
.steps,.props{grid-template-columns:1fr}
.hero-trust{gap:12px 22px}
.hero-trust b{font-size:20px}
}
/* ==========================================================================
v2 additions 鈥?inquiry list, photo type labels, sticky quote bar,
eco accent, contrast fixes. Appended as a block so the original
design system above stays untouched and easy to diff.
========================================================================== */
:root{
--muted:#5b6775; /* was #6b7787 (4.27:1 on --bg) -> 5.41:1, passes AA */
--orange-d:#c93d00; /* readable brand orange for small text on white */
--eco:#1f7a4d; --eco-l:#e7f6ec;
}
.prop.eco .ic{background:var(--eco-l);color:var(--eco)}
.chip[data-cat="eco"].on{background:var(--eco);border-color:var(--eco)}
.cat-eco .cat-card-body i{color:var(--eco)}
.prod-card[data-cat="eco"] .prod-cat{color:var(--eco)}
.btn-accent{background:var(--orange);color:#fff} /* brand CTA 鈥?decorative, large/bold */
/* ---------- product card: link + collect button ---------- */
.prod-card{position:relative}
.prod-card-link{display:flex;flex-direction:column;flex:1;min-width:0}
.save-btn{position:absolute;top:10px;right:10px;z-index:3;display:inline-flex;align-items:center;gap:4px;
min-height:32px;padding:5px 11px;border-radius:999px;border:1px solid var(--line);
background:rgba(255,255,255,.95);box-shadow:var(--shadow);color:var(--ink);
font-size:12px;font-weight:700;letter-spacing:.01em;transition:.18s}
.save-btn .ico{width:13px;height:13px;fill:currentColor}
.save-btn:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-1px)}
.save-btn.on{background:var(--blue);border-color:var(--blue);color:#fff}
.save-btn.on .ico{display:none}
.save-btn.on::before{content:"\2713";font-weight:800;margin-right:3px}
@media (max-width:520px){.save-btn{top:8px;right:8px;min-height:34px;padding:6px 10px;font-size:11.5px}}
/* ---------- catalogue inquiry-list bar ---------- */
.listbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 20px;padding:12px 16px;
background:var(--blue-l);border:1px solid #cfe0f2;border-radius:12px;font-size:13.5px;color:var(--gray)}
.listbar-hint b{color:var(--ink)}
.listbar-count{margin-left:auto;font-weight:600;color:var(--gray);white-space:nowrap}
.listbar-count b{color:var(--blue);font-family:var(--ff-d);font-size:15px}
/* ---------- product photo type labels (measured, not asserted) ---------- */
.img-tag{display:block;font-style:normal;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.pd-hero{position:relative}
.img-tag-lg{position:absolute;left:14px;bottom:14px;background:rgba(255,255,255,.94);
border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-size:11px;color:var(--gray);
box-shadow:var(--shadow)}
.pd-ti{position:relative;display:block;width:64px}
.pd-ti img{width:64px;height:64px;object-fit:cover;border:1px solid var(--line);border-radius:8px;
cursor:pointer;background:#fff;transition:.16s}
.pd-ti:hover img{border-color:#bcd6f0}
.pd-ti.on img{border-color:var(--blue);box-shadow:0 0 0 2px var(--blue-l)}
.pd-ti .img-tag{position:absolute;left:0;right:0;bottom:0;border-radius:0 0 8px 8px;
background:rgba(12,22,36,.66);color:#fff;font-size:8px;letter-spacing:.03em;
text-align:center;padding:2px 2px 3px;line-height:1.25}
/* ---------- copy toast (WeChat ID / email, after a tap) ----------
Position is fixed-bottom-center so it stays readable above the floating tab bar
on phones and above the sticky quote bar on desktop. */
.copy-toast{position:fixed;left:50%;bottom:120px;transform:translate(-50%,10px);
background:var(--ink);color:#fff;padding:10px 18px;border-radius:999px;font-size:14px;font-weight:600;
box-shadow:var(--shadow-lg);opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;
z-index:200;max-width:90vw;white-space:nowrap}
.copy-toast.on{opacity:1;transform:translate(-50%,0)}
@media (max-width:860px){.copy-toast{bottom:160px;font-size:13px}}
/* ---------- sticky quote bar (detail pages) ---------- */
.sticky-quote{position:fixed;left:0;right:0;bottom:0;z-index:76;background:rgba(255,255,255,.97);
backdrop-filter:blur(12px);border-top:1px solid var(--line);box-shadow:0 -10px 30px rgba(16,42,77,.13);
padding:12px 0;transform:translateY(130%);transition:transform .3s cubic-bezier(.3,.7,.3,1)}
.sticky-quote.on{transform:none}
.sq-inner{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.sq-info{min-width:0}
.sq-info b{display:block;font-family:var(--ff-d);font-size:16px;line-height:1.3;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:52vw}
.sq-info span{font-size:12.5px;color:var(--muted)}
.sq-acts{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.sq-add.on{background:var(--blue-l);border-color:var(--blue);color:var(--blue)}
.sq-add.on .ico{display:none}
.pd-add.on{background:var(--blue-l);border-color:var(--blue);color:var(--blue)}
.pd-add.on .ico{display:none}
/* On phones the bottom tab bar is ~85px tall (measured), so the quote bar must clear
that exact height 鈥?sitting any lower puts it under the tab bar. */
@media (max-width:860px){
.sticky-quote{bottom:calc(85px + env(safe-area-inset-bottom,0px));padding:10px 0}
.sq-info b{font-size:14.5px;max-width:46vw}
.sq-info span{display:none}
.sq-acts{gap:8px}
body.sq-on .fabs{bottom:calc(190px + env(safe-area-inset-bottom,0px))}
}
/* Category chips never wrap on phones; as a flex item its default min-width:auto
refused to shrink below the 626px of content, so the whole page scrolled sideways
instead of the strip (documentElement.scrollWidth 642 at a 390px viewport).
Let it shrink and scroll internally 鈥?this predates v2 but is fixed here. */
/* Home CTA band 鈥?was inline-styled, so no media query could reach it and the two
nowrap buttons overflowed the 1fr column on phones (page scrolled 72px sideways). */
.home-cta{display:grid;grid-template-columns:1.1fr 1fr;gap:38px;align-items:center;
padding:44px;border:0;background:linear-gradient(100deg,#0f1a28,#12365c);color:#fff}
.home-cta h2{font-size:clamp(24px,2.6vw,32px);margin-bottom:12px;color:#fff}
.home-cta p{color:#b9c9dc}
.cta-actions{display:flex;gap:12px;flex-wrap:wrap}
@media (max-width:860px){
.home-cta{grid-template-columns:1fr;gap:24px;padding:30px 22px}
.cta-actions .btn{flex:1 1 100%;justify-content:center}
}
.chips{min-width:0;max-width:100%;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.filterbar .wrap{min-width:0}
/* ---------- inquiry list (page + FAB badge) ---------- */
.fab{position:relative}
.fab.list{background:var(--orange)}
.fab-badge{position:absolute;top:-3px;right:-3px;min-width:22px;height:22px;padding:0 5px;
border-radius:999px;background:#fff;color:var(--orange-d);border:2px solid var(--orange);
font-style:normal;font-size:11.5px;font-weight:800;line-height:1;display:flex;
align-items:center;justify-content:center;box-shadow:var(--shadow)}
.ql-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
box-shadow:var(--shadow);padding:24px 26px 22px}
.ql-head{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.ql-head h2{font-size:20px}
.ql-count{font-size:12.5px;font-weight:700;color:var(--blue);background:var(--blue-l);
border-radius:999px;padding:3px 11px}
.ql-note{font-size:13.5px;color:var(--muted);margin-bottom:16px}
.ql-empty{font-size:14px;color:var(--muted);border:1px dashed var(--line);border-radius:12px;
padding:20px 18px;text-align:center;background:var(--bg)}
.ql-empty a{color:var(--blue);font-weight:600}
.ql-items{display:flex;flex-direction:column;gap:10px;margin:2px 0 16px}
.ql-items:empty{display:none}
.ql-i{display:flex;align-items:center;gap:14px;border:1px solid var(--line);border-radius:12px;
padding:10px 12px;background:#fff}
.ql-i img{width:52px;height:52px;object-fit:contain;background:#f2f5f9;border-radius:8px;flex:0 0 52px}
.ql-i-b{flex:1;min-width:0}
.ql-i-b b{display:block;font-family:var(--ff-d);font-size:15px;line-height:1.35}
.ql-i-b span{font-size:12.5px;color:var(--muted)}
.ql-i a.ql-open{font-size:12.5px;font-weight:600;color:var(--blue);white-space:nowrap}
.ql-rm{border:0;background:none;color:var(--muted);font-size:12.5px;font-weight:600;
cursor:pointer;text-decoration:underline;padding:8px 6px}
.ql-rm:hover{color:var(--orange-d)}
.ql-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.btn-link{background:none;border:0;padding:8px 4px;font-size:13.5px;font-weight:600;
color:var(--muted);text-decoration:underline;cursor:pointer}
.btn-link:hover{color:var(--orange-d)}
.ql-card [hidden]{display:none !important}
@media (max-width:520px){.ql-card{padding:18px 16px}.ql-actions .btn{flex:1 1 100%;justify-content:center}}
/* ---------- small-text orange reads darker for contrast ---------- */
.cat-card-body i,.sec-kicker .hot{color:var(--orange-d)}
.prod-badge{background:var(--orange-d)}
.searchbox::before,.searchbox::after{opacity:.85}
/* ============================================================== contact icons
Every contact row wears its own brand colour. These tokens are the only place
a WeChat green, a WhatsApp green, or a phone blue is introduced 鈥?they must
always be paired with the matching icon library (IC dict in build_site.py). */
.ic{display:inline-flex;align-items:center;justify-content:center;width:1em;height:1em;flex-shrink:0}
/* SVG path inherits fill from currentColor; in dark footers / muted parents the cascade
overrode the brand colour below, so each specific icon class also pins the SVG fill
directly. The selectors match .ic.ic-wa as well as .topbar-mail .ic.ic-wa etc. */
.ic svg{width:100%;height:100%;fill:currentColor}
.ic.ic-wa, .ic.ic-wa svg{fill:#25D366;color:#25D366}
.ic.ic-wx, .ic.ic-wx svg{fill:#07C160;color:#07C160}
.ic.ic-mail, .ic.ic-mail svg{fill:var(--blue);color:var(--blue)}
.ic.ic-pin, .ic.ic-pin svg{fill:var(--orange);color:var(--orange)}
.ic.ic-tel, .ic.ic-tel svg{fill:var(--ink);color:var(--ink)}
.ic.ic-net, .ic.ic-net svg{fill:var(--muted);color:var(--muted)}
.ic.ic-plus, .ic.ic-plus svg{fill:var(--blue);color:var(--blue)}
.info-card dt{display:flex;align-items:center;gap:8px}
.info-card dt .ic{font-size:15px}
/* ============================================================== topbar mail icon */
/* v6.1: .topbar-mail is now the orange highlight pill itself (an , see the
header block) — the old muted-text rules are gone. Only keep the icon white
against the orange, with enough specificity to beat .ic.ic-mail{color:blue}. */
.topbar-mail .ic.ic-mail,.topbar-mail .ic.ic-mail svg{fill:#fff;color:#fff}
/* ============================================================== contact channels grid
Five full-width action tiles, each themed with its brand colour. */
.contact-channels{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:32px}
/* ============================================================== "Reach us directly" cards
Two side-by-side cards (Hong Kong / Shen Zhen), each with three icon+label+value rows.
Lines are vertically centred, label and value sit on the same baseline. */
.reach-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:48px}
.reach-card{background:#fff;border:1px solid var(--line);border-radius:18px;
padding:30px 30px 26px;box-shadow:var(--shadow-sm)}
.reach-flag{color:var(--orange);font-size:13px;font-weight:700;letter-spacing:.14em;
text-transform:uppercase;margin-bottom:6px}
.reach-office{font-size:22px;font-weight:800;color:var(--ink);margin-bottom:18px}
.reach-list{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none}
.reach-list li{display:grid;grid-template-columns:42px 1fr;align-items:center;
gap:14px;padding:10px 0;border-bottom:1px solid #f0f3f7}
.reach-list li:last-child{border-bottom:0}
.reach-list a{color:var(--blue);font-weight:600;font-size:15px}
.reach-list a:hover{text-decoration:underline}
.reach-list span{color:var(--ink);font-size:15px}
.reach-ic{width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;
background:var(--blue-l);border-radius:50%;font-size:18px;flex-shrink:0}
.reach-ic svg{width:18px;height:18px;fill:currentColor}
/* Each icon keeps its brand colour so the buyer recognises the action at a glance. */
.reach-ic.ic-wa, .reach-ic.ic-wa svg{fill:#25D366;color:#25D366;background:#ddf5e6}
.reach-ic.ic-wx, .reach-ic.ic-wx svg{fill:#07C160;color:#07C160;background:#dcf6e7}
.reach-ic.ic-mail, .reach-ic.ic-mail svg{fill:var(--blue);color:var(--blue);background:#e2ecff}
.reach-ic:not(.ic-wa):not(.ic-wx):not(.ic-mail){color:var(--blue);background:#e2ecff}
@media (max-width:860px){
.reach-grid{grid-template-columns:1fr;gap:14px;margin-bottom:32px}
.reach-card{padding:24px 22px}
}
@media (max-width:520px){
.reach-list li{grid-template-columns:36px 1fr;gap:12px;padding:8px 0}
.reach-ic{width:36px;height:36px;font-size:15px}
.reach-ic svg{width:15px;height:15px}
.reach-list a,.reach-list span{font-size:14px}
}
.chan{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;
padding:22px 14px 18px;border-radius:14px;background:#fff;border:1.5px solid var(--line);
text-align:center;color:var(--ink);font-family:inherit;cursor:pointer;transition:.18s}
.chan:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.chan-ic{width:46px;height:46px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:22px}
.chan-ic .ico{width:24px;height:24px;fill:#fff}
.chan-body b{display:block;font-size:14px;color:var(--ink);font-weight:700}
.chan-body i{display:block;font-size:12.5px;color:var(--muted);font-style:normal;margin-top:3px;line-height:1.4}
.chan-cta{font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;opacity:.75}
.chan.chan-wa .chan-ic{background:#25D366}
.chan.chan-wx .chan-ic{background:#07C160}
.chan.chan-mail .chan-ic{background:var(--blue)}
.chan.chan-tel .chan-ic{background:var(--orange)}
.chan.chan-wa:hover{border-color:#25D366;color:#25D366}
.chan.chan-wx:hover{border-color:#07C160;color:#07C160}
.chan.chan-mail:hover{border-color:var(--blue);color:var(--blue)}
.chan.chan-tel:hover{border-color:var(--orange);color:var(--orange)}
.wx-copy-inline{all:unset;cursor:pointer;color:var(--blue);font:inherit}
.wx-copy-inline:hover{text-decoration:underline;color:var(--blue-d)}
@media (max-width:1080px){.contact-channels{grid-template-columns:repeat(2,1fr)}}
@media (max-width:720px){.contact-channels{grid-template-columns:repeat(2,1fr)}}
/* ============================================================== per-category landing pages */
.cat-hero{aspect-ratio:2/1;max-height:540px;overflow:hidden;border-radius:var(--radius);box-shadow:var(--shadow)}
.cat-hero img{width:100%;height:100%;object-fit:cover}
.siblings{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.sib{display:flex;align-items:center;gap:14px;padding:14px;border:1px solid var(--line);border-radius:14px;background:#fff;transition:.18s;color:var(--ink)}
.sib:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--blue)}
.sib img{width:64px;height:64px;object-fit:cover;border-radius:10px;flex-shrink:0}
.sib b{display:block;font-size:14.5px;font-weight:700;color:var(--ink)}
.sib i{display:block;font-size:12px;color:var(--muted);font-style:normal;margin-top:2px}
@media (max-width:860px){.siblings{grid-template-columns:1fr}}
.faqs{max-width:880px}
.faq{border:1px solid var(--line);border-radius:12px;padding:16px 18px;background:#fff;margin-bottom:10px;transition:.15s}
.faq:hover{border-color:var(--blue)}
.faq summary{font-weight:700;color:var(--ink);cursor:pointer;list-style:none;font-size:15.5px;display:flex;align-items:center;justify-content:space-between}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:22px;color:var(--blue);font-weight:400;line-height:1;transition:.2s}
.faq[open] summary::after{transform:rotate(45deg)}
.faq[open]{box-shadow:var(--shadow)}
.faq p{margin:12px 0 0;font-size:14.5px;color:var(--gray);line-height:1.65}
.faq p a{color:var(--blue);text-decoration:underline}
/* ================================ subscribe form / page =================================
Same visual language as the rest of the site. Used inline on the home page and
dedicated subscribe.html landing. */
.sub-card{background:linear-gradient(135deg,#0b1a2c 0%,#12365c 100%);border-radius:24px;padding:44px;color:#fff;box-shadow:var(--shadow-lg)}
.sub-card h1,.sub-card h2{color:#fff;font-size:clamp(26px,3vw,34px);margin-bottom:10px;letter-spacing:-.01em}
.sub-card p{color:#c2d2e4;margin-bottom:22px;max-width:560px}
.sub-kicker{display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--orange);margin-bottom:12px}
.sub-row{display:flex;gap:10px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);border-radius:14px;padding:6px;max-width:540px}
.sub-row input{flex:1;border:0;background:transparent;color:#fff;padding:14px 16px;font-size:15.5px;outline:0;min-width:0}
.sub-row input::placeholder{color:#8fa6bf}
.sub-row button{padding:14px 24px;border:0;background:var(--orange);color:#fff;border-radius:10px;font-size:15px;font-weight:700;cursor:pointer;transition:.15s}
.sub-row button:hover{background:#d94400}
.sub-row button:disabled{opacity:.6;cursor:wait}
.sub-meta{margin-top:12px;font-size:13px;color:#9bb3cc;max-width:540px}
.sub-consent{display:flex;gap:8px;align-items:flex-start;cursor:pointer;line-height:1.45}
.sub-consent input{margin-top:3px;accent-color:var(--orange)}
.sub-hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.sub-msg{margin-top:12px;font-size:13.5px;min-height:1.5em;font-weight:600}
.sub-msg.ok{color:#7cf1a0}
.sub-msg.err{color:#ff8989}
.sub-trust{display:flex;gap:18px;flex-wrap:wrap;margin-top:26px;font-size:12.5px;color:#8fa6bf}
.sub-trust span{display:inline-flex;align-items:center;gap:6px}
.sub-trust span::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--orange)}
/* inline subscribe on home page: drops into a 2-column strip so it does not crowd the CTA */
.sub-inline{padding:0;background:transparent;box-shadow:none;color:var(--ink)}
.sub-inline .sub-card{padding:36px 40px;background:linear-gradient(135deg,#0b1a2c 0%,#12365c 100%);color:#fff}
.sub-inline .sub-row{background:rgba(255,255,255,.08)}
@media (max-width:860px){.sub-inline .sub-card{padding:28px 22px}.sub-trust{gap:10px}}
/* ============================================================== page-title (H1) on content pages
One per page; replaces sec-kicker + h2 hero for SEO. Bumped from the section
h2 size so it sits visually above the kicker but is still below the brand hero. */
.page-title{font-size:clamp(28px,3vw,38px);line-height:1.15;letter-spacing:-.02em;color:var(--ink);margin:6px 0 12px}
.page-lead{font-size:17px;line-height:1.55;color:var(--gray);max-width:760px;margin-bottom:28px}
@media (max-width:860px){.page-title{font-size:26px;line-height:1.2}.page-lead{font-size:15.5px;line-height:1.55;margin-bottom:18px}}