/* Wangyudian site stylesheet. */
:root{
  /* wangyudian.com brand: deep pitch green + print-ink orange. The variable names
     map the primary slot to pitch green and the accent slot to orange. Every text/background pair used
     on buttons, header, footer, tags and links was computed against WCAG 4.5:1
     (3:1 for large text and UI) — the table is in docs/DESIGN-NOTES.md. */
  --navy:#0a5a35; --navy-dark:#063d22; --navy-soft:#e3f2e8;
  --ink:#14201a; --muted:#55635b; --mist:#f2f5f2; --line:#dbe4dd;
  --teal:#0f766e; --teal-soft:#e6f5f1; --paper:#faf9f4;
  --amber:#e8630f; --amber-soft:#ffe9d6; --amber-text:#9a3d06; --wa:#11833f; --wa-dark:#0d6a32;
  /* Brand-only additions. --pitch-black/--pitch-mid bound the hero and CTA gradients
     (contrast is checked against BOTH stops); the --orange-* and --on-dark* tints are
     the lightest values that pass 4.5:1 on those greens — do not lighten the greens
     without re-running the contrast table. --slate is the "supplier-stated" tag hue,
     kept blue so it cannot be confused with the green "document-sighted" tag. */
  --pitch-black:#041f12; --pitch-mid:#0b6239; --orange-light:#ffc298; --orange-stat:#ffb980; --orange-bright:#ff8c3a;
  --on-dark:#cfe3d6; --on-dark-soft:#a9c7b4; --hero-pill:#dbe9df; --slate:#2f4f8f; --slate-soft:#e8edf8;
  --halftone:radial-gradient(circle,rgba(255,255,255,.14) 1.2px,transparent 1.9px);
  --radius:14px; --maxw:1140px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
/* Respect a reduced-motion preference: kill the smooth scroll the skip link
   triggers, and the float/card transforms. Vestibular disorders make animated
   movement genuinely painful, and this costs nothing to honour. */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .wa-float,.buyer-card,.btn{transition:none}
  .wa-float:hover,.buyer-card:hover,.btn:hover{transform:none}
}
body{font-family:system-ui,-apple-system,'Segoe UI',Arial,sans-serif;color:var(--ink);background:#fff;line-height:1.6;font-size:16px}
/* Keep responsive images within their available width. */
img{max-width:100%;height:auto;display:block}
button,input,select,textarea{font:inherit}
a{color:var(--navy);text-decoration:none}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 20px}

/* header */
/* Skip link: the first focusable element on every page. Off-screen until focused,
   then pinned top-left. Keyboard users would otherwise tab the whole nav on every
   page before reaching content. */
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--navy);color:#fff;padding:10px 16px;border-radius:0 0 8px 0;font-weight:600;font-size:.95rem}
.skip-link:focus,.skip-link:focus-visible{left:0}
main:focus{outline:none}
.site-header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line)}
/* A 4px green/orange band spans the top of the header. It is absolutely
   positioned inside the sticky header so it adds no height — the mobile nav panel is
   pinned at top:64px below and must keep lining up with the header's bottom edge. */
.site-header:before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,var(--navy) 0 68%,var(--amber) 68% 84%,var(--navy-dark) 84% 100%);pointer-events:none}
.header-row{display:flex;align-items:center;justify-content:space-between;gap:16px;height:72px}
.brand{display:grid;grid-template-columns:38px auto;column-gap:9px;align-items:center;line-height:1.15}
.brand-icon{grid-row:1/3;width:38px;height:38px}.brand-icon rect{fill:var(--navy)}.brand-icon path{fill:#fff}.brand-icon rect:last-child{fill:var(--amber)}
.brand-mark{font-weight:800;font-size:1.45rem;letter-spacing:-.02em;color:var(--navy-dark)}
/* The "print dot": a small tilted orange square after the wordmark, the one brand
   device reused on the footer brand and the OG cover. Inline-block, not flex, so
   .brand-reg's vertical-align keeps working if a registered mark is ever added. */
.brand-reg{font-size:.6em;vertical-align:super}
.brand-sub{font-size:.68rem;color:#5d6b63;letter-spacing:.02em}
.site-nav{display:flex;align-items:center;gap:22px}
.nav-item{font-size:.92rem;font-weight:600;color:#22332a;padding:6px 0}
.nav-item:hover{color:var(--navy)}
/* Orange underline on the top-level links only (the dropdown container is a div whose
   decoration would propagate into the static mobile submenu). */
.site-nav>a.nav-item:hover,.has-drop>a:hover{text-decoration:underline;text-decoration-color:var(--amber);text-decoration-thickness:2px;text-underline-offset:6px}
.has-drop{position:relative}
.drop{display:none;position:absolute;top:100%;left:-12px;background:#fff;border:1px solid var(--line);border-top:3px solid var(--amber);border-radius:10px;box-shadow:0 10px 30px rgba(6,61,34,.14);min-width:230px;padding:8px 0}
/* Show the dropdown while its container is hovered or focused. */
.has-drop:hover .drop,.has-drop:focus-within .drop{display:block}
.drop a{display:block;padding:9px 18px;font-size:.9rem}
.drop a:hover{background:var(--mist)}
.drop a:focus-visible,.nav-item:focus-visible,.site-nav a:focus-visible,.btn:focus-visible,.nav-toggle:focus-visible,summary:focus-visible{outline:3px solid var(--navy);outline-offset:2px;border-radius:4px}
/* Wide tables scroll inside their own box. tabindex=0 in the markup makes that box
   keyboard-scrollable (WCAG 2.1.1) - which makes it focusable, so it MUST keep a
   visible ring. Do not drop this rule when tidying focus styles. */
.scroll-x{overflow-x:auto}
/* The acceptance checkboxes are a group, so they need a fieldset+legend (WCAG 1.3.1).
   Reset the UA border/padding so it looks exactly like the plain label it replaced. */
.choice-set{border:0;padding:0;margin:0;min-width:0}
.choice-set>legend{display:block;padding:0;font-size:.82rem;font-weight:600;color:#22332a;margin:12px 0 4px}
.scroll-x:focus-visible{outline:3px solid var(--navy);outline-offset:2px;border-radius:4px}
.nav-toggle{display:none;width:44px;height:44px;flex:0 0 44px;align-items:center;justify-content:center;font-size:1.6rem;line-height:1;background:none;border:none;border-radius:8px;cursor:pointer;color:var(--navy)}
.nav-toggle:hover,.nav-toggle:focus-visible{background:var(--navy-soft)}

/* buttons */
.btn{display:inline-block;padding:12px 22px;border-radius:999px;font-weight:700;font-size:.95rem;transition:background .15s,transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-1px);text-decoration:none}
/* WhatsApp green stays the #25D366 hue (142°) but darkened to #11833f so white text
   reaches 4.84:1; the brand's own greens are bluer (150°) and darker, so the CTA
   still reads as "the WhatsApp button" next to them. */
.btn-wa{background:var(--wa);color:#fff;box-shadow:0 6px 16px rgba(17,131,63,.28)}
.btn-wa:hover{background:var(--wa-dark);box-shadow:0 8px 20px rgba(17,131,63,.34)}
.btn-navy{background:var(--navy-dark);color:#fff}
.btn-navy:hover{background:var(--navy)}
.btn-ghost{border:2px solid var(--navy);color:var(--navy)}
.btn-ghost:hover{background:var(--navy-soft)}

/* hero */
.hero{background:linear-gradient(115deg,var(--navy-dark) 0%,var(--navy) 55%,var(--pitch-mid) 100%);color:#fff;padding:64px 0 56px}
.hero-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:44px;align-items:center}
.hero h1{font-size:2.35rem;line-height:1.2;font-weight:800;margin-bottom:16px}
.hero p{color:var(--on-dark);font-size:1.05rem;margin-bottom:24px}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap}
.hero-img{border-radius:var(--radius);overflow:hidden;box-shadow:0 18px 44px rgba(0,0,0,.35)}
.kicker{display:inline-block;font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--orange-light);margin-bottom:12px}
/* Orange marks that sit ON the green gradients use --orange-bright: the print orange
   itself is only 2.2:1 against the lightest hero stop, the brighter tint is 3.2:1. */
.kicker:before{content:"";display:inline-block;width:22px;height:3px;margin-right:10px;border-radius:2px;background:var(--orange-bright);vertical-align:.2em}

/* stat bar */
.stats{background:var(--navy-dark);color:#fff;padding:18px 0;border-top:4px solid var(--amber)}
.stats .wrap{display:flex;flex-wrap:wrap;gap:10px 40px;justify-content:center}
.stat{text-align:center}
.stat b{display:block;font-size:1.25rem;font-weight:800;color:var(--orange-stat);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.stat span{font-size:.75rem;color:var(--on-dark-soft);letter-spacing:.04em;text-transform:uppercase}

/* sections */
.section{padding:64px 0}
.section.alt{background:var(--mist)}
.sec-head{max-width:720px;margin:0 auto 40px;text-align:center}
.sec-head h2{font-size:1.8rem;font-weight:800;color:var(--navy-dark);margin-bottom:10px;letter-spacing:-.02em}
.sec-head h2:before{content:"";display:block;width:36px;height:4px;margin:0 auto 14px;border-radius:2px;background:var(--amber)}
.sec-head p{color:var(--muted)}
h3{color:var(--navy-dark)}

/* cards */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}
.card-img{aspect-ratio:4/3;object-fit:cover;width:100%;background:#fff}
.card-img.contain{object-fit:contain;padding:12px}
.card-body{padding:20px 22px 24px;display:flex;flex-direction:column;gap:10px;flex:1}
.card-body h3{font-size:1.08rem;font-weight:700}
.card-body p{font-size:.9rem;color:#44534a}
.card .model{font-size:.72rem;font-weight:700;letter-spacing:.1em;color:var(--amber-text);text-transform:uppercase}
.card .btn{margin-top:auto;align-self:flex-start;padding:9px 16px;font-size:.85rem}

/* product detail blocks */
.product{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:start;padding:40px 0;border-top:1px solid var(--line)}
.product:first-of-type{border-top:none}
.product-img{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff}
.product h3{font-size:1.35rem;margin-bottom:4px}
.product .model{font-size:.78rem;font-weight:700;letter-spacing:.1em;color:var(--amber-text);text-transform:uppercase}
.product p{margin:10px 0;color:#34433a}
.spec{width:100%;border-collapse:collapse;font-size:.88rem;margin:14px 0 18px}
/* th must carry the same cell styling as td: real <th> were introduced for screen
   readers, and without this the header row and row-header column lose their padding
   and borders entirely. */
.spec td,.spec th{padding:7px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.spec td:first-child,.spec th[scope=row]{color:#55635b;width:42%;font-weight:500;text-align:left}
/* <th> defaults to text-align:center; these were <td><strong> before and were
   left-aligned. Without this the comparison table's header row re-centres. */
.spec th[scope=col]{text-align:left;border-bottom:2px solid var(--navy-dark);color:var(--navy-dark)}
.spec td:last-child{font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;font-size:.84rem;color:#1f2a24}
.spec.prose-table th[scope=row]{width:22%}
.spec.prose-table td:last-child{font-family:inherit;font-size:inherit;color:inherit}
.feat{margin:10px 0 16px;padding-left:20px;color:#34433a;font-size:.93rem}
.feat li{margin-bottom:6px}

/* photo grid */
.photos{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.photos.four{grid-template-columns:repeat(2,1fr)}
.photos figure{border-radius:12px;overflow:hidden;border:1px solid var(--line);background:#fff}
.photos img{aspect-ratio:4/3;object-fit:cover;width:100%}
.photos figcaption{padding:10px 14px;font-size:.82rem;color:#55635b}

/* misc */
.notice{background:var(--navy-soft);border-left:4px solid var(--amber);border-radius:8px;padding:16px 20px;font-size:.92rem;color:#1f2e25;margin:26px 0}
.pf-intro{margin:0 0 18px}
.pf-shortlist{border:1px solid #c9d8ce;border-radius:12px;background:#f6f9f6;padding:20px;margin:18px 0 14px}
.pf-shortlist__head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px}
.pf-shortlist__head h2{font-size:1.2rem;color:var(--navy-dark);margin:0 0 3px}
.pf-shortlist__head p{font-size:.82rem;color:#5d6b63;margin:0}
.pf-shortlist__items{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.pf-shortlist__item{background:#fff;border:1px solid var(--line);border-radius:9px;padding:14px}
.pf-shortlist__item-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:7px}
.pf-shortlist__item-head strong{color:var(--navy-dark);font-size:.95rem}
.pf-shortlist__item p{font-size:.82rem;color:#44534a;margin:4px 0;line-height:1.45}
.pf-remove{border:0;background:none;color:#5d6b63;text-decoration:underline;font:inherit;font-size:.78rem;padding:2px;cursor:pointer}
.pf-remove:hover,.pf-remove:focus-visible{color:var(--navy-dark)}
.pf-pick{padding:6px 10px;font-size:.78rem;white-space:nowrap}
.pf-pick:disabled{opacity:.45;cursor:not-allowed}
.pf-shortlist__note{font-size:.82rem;color:#55635b;margin:14px 0}
.pf-shortlist .btn-wa{border:0;cursor:pointer}
.pf-shortlist .btn-wa:disabled{opacity:.5;cursor:not-allowed}
.badges{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:18px 0}
.badge{border:1px solid var(--line);border-radius:10px;padding:12px 22px;font-weight:700;color:var(--navy-dark);background:#fff}
.badge small{display:block;font-weight:500;color:#5d6b63;font-size:.72rem}
.breadcrumb{font-size:.82rem;color:#5d6b63;padding:18px 20px 0}
.breadcrumb a{color:#5d6b63}
.page-head{padding:36px 20px 8px}
.page-head h1{font-size:2rem;font-weight:800;color:var(--navy-dark);margin-bottom:10px;letter-spacing:-.025em}
.page-head h1:before{content:"";display:block;width:36px;height:4px;margin:0 0 14px;border-radius:2px;background:var(--amber)}
.page-head p{max-width:760px;color:#44534a}
.cta-band{position:relative;overflow:hidden;background:linear-gradient(115deg,var(--pitch-black),var(--navy) 60%,var(--pitch-mid));color:#fff;text-align:center;padding:52px 20px}
.cta-band:before{content:"";position:absolute;inset:0;z-index:0;background:var(--halftone);background-size:14px 14px;-webkit-mask-image:linear-gradient(90deg,#000,transparent 32%,transparent 68%,#000);mask-image:linear-gradient(90deg,#000,transparent 32%,transparent 68%,#000);pointer-events:none}
.cta-band>*{position:relative;z-index:1}
.cta-band h2{font-size:1.6rem;margin-bottom:10px}
.cta-band p{color:var(--on-dark);margin-bottom:22px;max-width:640px;margin-left:auto;margin-right:auto}

/* footer */
.site-footer{background:var(--navy-dark);color:#c5d8cb;margin-top:64px;border-top:4px solid var(--amber)}
.foot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;padding:52px 20px 36px}
.foot-brand{font-weight:800;font-size:1.15rem;color:#fff;margin-bottom:10px;letter-spacing:-.02em}
.foot-brand:after{content:"";display:inline-block;width:.4em;height:.4em;margin-left:.32em;border-radius:2px;background:var(--amber);transform:rotate(14deg);vertical-align:.08em}
.foot-head{font-weight:700;color:#fff;margin-bottom:12px;font-size:.9rem;text-transform:uppercase;letter-spacing:.06em}
.site-footer a{display:block;color:#c5d8cb;font-size:.9rem;margin-bottom:8px}
.site-footer a:hover{color:#fff}
.site-footer .btn-wa{display:inline-block;color:#fff;margin-top:6px}
.foot-note{font-size:.82rem;color:#a9c7b4;margin-bottom:12px}
.foot-note a{display:inline;color:#c5d8cb}
.foot-bottom{border-top:1px solid rgba(255,255,255,.12);padding:18px 20px;font-size:.78rem;color:#8fa79a}

/* floating WhatsApp */
.wa-float{position:fixed;right:22px;bottom:22px;z-index:60;width:56px;height:56px;border-radius:50%;background:var(--wa);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(17,131,63,.45);transition:transform .15s}
.wa-float:hover{transform:scale(1.08);background:var(--wa-dark)}

/* The team guide has inline enquiry links; keep its roster and worked example clear. */
body:has(#worked-order) .wa-float{display:none}

/* RFQ builder */
.rfq{background:var(--mist);border:1px solid var(--line);border-radius:var(--radius);padding:26px 28px;margin:30px 0}
.rfq h3{margin-bottom:6px}
.rfq p{font-size:.9rem;color:#44534a;margin-bottom:16px}
.rfq label{display:block;font-size:.82rem;font-weight:600;color:#22332a;margin:12px 0 4px}
.rfq input,.rfq select,.rfq textarea{width:100%;padding:10px 12px;border:1px solid #c4d2c8;border-radius:8px;font:inherit;font-size:.92rem;background:#fff}
.rfq textarea{min-height:70px;resize:vertical}
.rfq input:focus-visible,.rfq select:focus-visible,.rfq textarea:focus-visible{outline:3px solid var(--navy);outline-offset:1px;border-color:var(--navy)}
.rfq .btn{margin-top:16px}
.rfq-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.rfq-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.rfq-actions .btn{margin-top:0;border:0;cursor:pointer}
.rfq-actions .btn-ghost{border:2px solid var(--navy);background:#fff}
.rfq-status{min-height:1.5em;margin:10px 0 0;color:var(--navy);font-weight:600}
@media (max-width:640px){
  .pf-shortlist__head{display:block}
  .pf-shortlist__head .btn{margin-top:10px}
  .pf-shortlist__items{grid-template-columns:1fr}
  .rfq-grid{grid-template-columns:1fr}
}

/* FAQ */
.faq-item{border:1px solid var(--line);border-radius:12px;margin-bottom:12px;background:#fff}
.faq-item[open]{border-color:var(--navy)}
.faq-item summary{padding:16px 20px;font-weight:600;cursor:pointer;color:var(--navy-dark);list-style:none;border-radius:inherit}
.faq-item summary:hover{background:var(--mist)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";float:right;color:var(--amber-text);font-weight:700}
.faq-item[open] summary::after{content:"–"}
.faq-item .faq-a{padding:0 20px 16px;color:#34433a;font-size:.93rem}
.ship-group td{background:var(--navy-soft);color:var(--navy-dark);font-weight:700;font-family:inherit;font-size:.85rem;letter-spacing:.03em}
.price-note{font-size:.83rem;color:var(--navy-dark);background:var(--navy-soft);border-radius:8px;padding:7px 12px;display:inline-block;margin:6px 0 10px;font-family:ui-monospace,Consolas,monospace}
.related{border-top:1px solid var(--line);margin-top:34px;padding-top:18px;font-size:.86rem;color:#5d6b63}
.related a{margin-right:14px}

/* Editorial insight pages: visible authorship/date, answer-first summaries and
   representative images support readers while the same facts are mirrored in
   Article JSON-LD. Keep the body measure narrow enough for long-form reading. */
.article-meta{margin-top:12px;font-size:.82rem;color:#5d6b63}
.article-body{max-width:900px}
.article-body h2{font-size:1.5rem;line-height:1.25;color:var(--navy-dark);margin:38px 0 12px}
.article-body h2[id]{scroll-margin-top:88px}
.article-body>h2:first-of-type{margin-top:32px}
.article-jump{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:baseline;margin:26px 0 4px;padding:16px 20px;border:1px solid var(--line);border-radius:10px;background:#fff;font-size:.86rem}
.article-jump strong{flex-basis:100%;color:var(--navy-dark)}
.article-jump a{white-space:nowrap}
.article-figure{margin:0 0 28px;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff}
.article-figure img{width:100%;aspect-ratio:16/7;object-fit:cover}
.article-figure--square{max-width:620px;margin-left:auto;margin-right:auto}
.article-figure--square img{aspect-ratio:16/9;object-fit:contain;padding:16px;background:var(--mist)}
.article-figure figcaption{padding:10px 14px;font-size:.8rem;color:#55635b}
.answer-box{font-size:1rem;margin-top:0}
.article-process{margin-bottom:30px}

/* document gallery (certifications) */
.doc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:16px 0 8px}
.doc-card{margin:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
.doc-card a{display:block;line-height:0;background:#eef3ef}
.doc-card img{width:100%;height:auto;display:block}
.doc-card figcaption{padding:11px 13px;font-size:.78rem;line-height:1.5;color:#44534a}
.doc-card figcaption strong{display:block;color:var(--navy-dark);font-size:.83rem;margin-bottom:4px}
.doc-kind{display:inline-block;font-size:.66rem;letter-spacing:.04em;text-transform:uppercase;font-weight:700;padding:2px 7px;border-radius:20px;margin-bottom:7px}
.doc-kind.granted{background:#e6f4ec;color:#1a6b3c}
.doc-kind.attested{background:#eef3ef;color:#44534a}

/* responsive */

/* Keep the full desktop nav for genuinely wide screens. Phone landscape viewports
   now reach 932px, and wrapping the labels into two lines makes the header cramped
   even when it technically fits without overflow. */
@media (max-width:960px){
  .header-row{height:64px}
  .site-nav{display:none;position:absolute;top:64px;left:0;right:0;max-height:calc(100vh - 64px);max-height:calc(100dvh - 64px);overflow-y:auto;overscroll-behavior:contain;background:#fff;flex-direction:column;align-items:stretch;gap:0;border-bottom:1px solid var(--line);box-shadow:0 12px 28px rgba(6,61,34,.14);padding:8px 0 max(16px,env(safe-area-inset-bottom))}
  body.nav-open .site-nav{display:flex}
  .site-nav .nav-item,.site-nav .drop a{padding:11px 24px}
  .drop{display:block;position:static;border:none;box-shadow:none;padding:0 0 0 12px}
  .nav-cta{margin:10px 24px 0}
  .nav-toggle{display:flex}
  body.nav-open{overflow:hidden}
  body.nav-open .wa-float{opacity:0;pointer-events:none}
}

@media (max-width:900px){
  .hero-grid,.grid-3,.grid-4,.product,.foot-grid{grid-template-columns:1fr 1fr}
  .photos{grid-template-columns:1fr 1fr}
  .doc-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:700px){
  .product{grid-template-columns:1fr}
  .doc-grid{grid-template-columns:1fr 1fr;gap:12px}
}
@media (max-width:640px){
  .hero-grid,.grid-2,.grid-3,.grid-4,.product,.foot-grid,.photos{grid-template-columns:1fr}
  .photos.four{grid-template-columns:1fr}
  .hero h1{font-size:1.7rem}
}

/* Phone portrait: keep readable breathing room without making every section feel
   desktop-sized, and leave the floating WhatsApp control clear of safe areas. */
@media (max-width:480px){
  .wrap{padding-left:16px;padding-right:16px}
  .brand{min-width:0;max-width:calc(100% - 56px)}
  .brand-sub{max-width:none;white-space:normal;overflow:visible;text-overflow:clip;line-height:1.15}
  .hero{padding:44px 0 40px}
  .hero-grid{gap:28px}
  .hero p{font-size:.98rem}
  .hero-ctas{gap:10px}
  .hero-ctas .btn{width:100%;text-align:center}
  .section{padding:48px 0}
  .sec-head{margin-bottom:28px}
  .sec-head h2{font-size:1.55rem}
  .page-head{padding-top:28px}
  .page-head h1{font-size:1.72rem;line-height:1.25}
  .card-body{padding:18px 18px 21px}
  .product{gap:24px;padding:32px 0}
  .rfq{padding:22px 16px}
  .foot-grid{gap:28px;padding-top:44px}
  .wa-float{right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));width:52px;height:52px}
}

/* Phone landscape: the short viewport needs denser vertical rhythm, while the
   content can still use the available width. */
@media (max-width:960px) and (orientation:landscape){
  .hero{padding:34px 0 32px}
  .hero-grid{gap:26px}
  .hero h1{font-size:1.75rem}
  .hero p{font-size:.95rem;margin-bottom:18px}
  .hero .btn{padding:10px 16px}
  .section{padding:44px 0}
  .page-head{padding-top:28px}
  .site-nav .nav-item,.site-nav .drop a{padding-top:9px;padding-bottom:9px}
}

/* A fixed round control can cover the notice copy on a short landscape phone.
   The WhatsApp routes remain in the header, footer and page CTAs. */
@media (max-height:500px) and (orientation:landscape){
  .wa-float{display:none}
}

/* Grid and flex children default to min-width:auto, so one unbreakable token
   (e.g. sales@example.com) can force a track wider than its container
   and scroll the whole page sideways. Seen on /contact/ at 320px. */
.grid-2>*,.grid-3>*,.grid-4>*,.hero-grid>*,.product>*,.foot-grid>*,.rfq-grid>*{min-width:0}
.spec td,.spec th,.spec td:last-child{overflow-wrap:anywhere}

/* iOS Safari zooms the page in when a focused field is under 16px and never
   zooms back out. The RFQ fields were 14.72px, so every tap on the enquiry form
   left the buyer zoomed in. 16px on touch widths only; desktop keeps its size. */
/* 960px, NOT 820px — must match the nav breakpoint above. When the nav moved from
   820 to 960 this block stayed behind, so 821-960px (iPad Pro 11" portrait is 834)
   got the mobile layout with desktop-sized inputs, and the iOS zoom bug came back on
   exactly the widths the hamburger had just started serving. Touch-layout rules must
   share one breakpoint. */
@media (max-width:960px){
  /* Applies to EVERY text-entry control, not just .rfq: the /reliability/ battery
     calculator shipped at 13.76px and re-introduced the zoom bug that the .rfq-only
     rule had fixed. Keep this selector generic so new forms inherit the fix. */
  /* !important is deliberate: the calculator inputs carry an inline style="font:inherit"
     which beats any stylesheet rule and drops them to 13.76px. Inline styles are the
     norm in this project's content files, so the guard has to outrank them. */
  input:not([type=hidden]):not([type=checkbox]):not([type=radio]),select,textarea{font-size:16px !important}
  .site-footer a{display:inline-block;padding:5px 0}
}

/* supplier video blocks — portrait clips are phone-shot, cap their width so a
   vertical 720x1280 does not become a two-screen-tall column on desktop */
.vid-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;margin:18px 0}
.vid-card{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
.vid-card video{display:block;width:100%;height:auto;background:var(--pitch-black)}
.vid-card.portrait{max-width:300px}
.vid-cap{font-size:.83rem;color:#44534a;padding:10px 12px;margin:0}
.vid-cap strong{color:var(--navy-dark)}


/* Evidence-led homepage and conversion components */
.hero{position:relative;overflow:hidden;background:radial-gradient(circle at 85% 18%,rgba(232,99,15,.16),transparent 28%),linear-gradient(115deg,var(--pitch-black) 0%,var(--navy) 58%,var(--pitch-mid) 100%);padding:72px 0 64px}
/* Halftone print motif, pure CSS: a dot field on the right two-thirds, masked to
   nothing on the left where the headline sits so it never touches legibility. The
   circle at bottom right is the pitch centre circle. Both are decoration only. */
.hero:before{content:"";position:absolute;inset:0;background:var(--halftone);background-size:14px 14px;-webkit-mask-image:linear-gradient(90deg,transparent 38%,#000 72%);mask-image:linear-gradient(90deg,transparent 38%,#000 72%);pointer-events:none}
.hero:after{content:"";position:absolute;width:360px;height:360px;border:2px solid rgba(255,255,255,.14);border-radius:50%;right:-150px;bottom:-220px;pointer-events:none}
.hero .wrap{position:relative;z-index:1}
/* Keep the hero ghost button legible over its dark background. */
.hero .btn-ghost{border-color:rgba(255,255,255,.6) !important;color:#fff !important}
.hero .btn-ghost:hover{background:rgba(255,255,255,.12)}
.hero h1{font-size:clamp(2.2rem,4vw,3.35rem);line-height:1.06;letter-spacing:-.035em}
.hero-img{position:relative;border-radius:20px;border:1px solid rgba(255,255,255,.18);box-shadow:0 24px 60px rgba(0,0,0,.38)}
.hero-img img{aspect-ratio:4/3;object-fit:cover;width:100%}
.hero-caption{position:absolute;left:14px;right:14px;bottom:14px;padding:10px 12px;border-radius:10px;background:rgba(4,31,18,.86);backdrop-filter:blur(8px);color:#e6f0ea;font-size:.78rem}
.hero-points{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0;list-style:none}
.hero-points li{border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:6px 12px 6px 10px;color:var(--hero-pill);font-size:.78rem;background:rgba(255,255,255,.07)}
.hero-points li:before{content:"";display:inline-block;width:6px;height:6px;margin-right:7px;border-radius:50%;background:var(--orange-bright);vertical-align:.1em}
.section.paper{background:var(--paper)}
.eyebrow{display:block;font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--amber-text);margin-bottom:8px}
.buyer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.buyer-card{display:flex;flex-direction:column;min-height:184px;padding:22px;border:1px solid var(--line);border-radius:14px;background:#fff;color:var(--ink);box-shadow:0 10px 30px rgba(6,61,34,.06);transition:transform .18s,box-shadow .18s,border-color .18s}
.buyer-card:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(6,61,34,.12),inset 0 3px 0 var(--amber);border-color:#9fc3ad}
.buyer-card .buyer-no{font-size:1.3rem;font-weight:800;color:var(--amber-text);letter-spacing:-.02em;line-height:1;margin-bottom:16px;font-variant-numeric:tabular-nums}
.buyer-card strong{font-size:1rem;line-height:1.3;color:var(--navy-dark);margin-bottom:8px}
.buyer-card span{font-size:.82rem;line-height:1.5;color:var(--muted)}
.buyer-card em{margin-top:auto;padding-top:16px;font-style:normal;font-size:.8rem;font-weight:700;color:var(--navy)}
.authority-grid{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:18px}
.authority-card{border-radius:14px;padding:24px;background:#fff;border:1px solid var(--line)}
.authority-card.primary{background:linear-gradient(145deg,var(--navy-dark),var(--navy));border-color:transparent;color:#fff}
.authority-card h3{font-size:1.16rem;margin-bottom:8px}
.authority-card.primary h3{color:#fff}
.authority-card p{font-size:.88rem;color:var(--muted)}
.authority-card.primary p{color:var(--on-dark)}
.authority-label{display:inline-block;margin-bottom:14px;padding:4px 8px;border-radius:999px;background:var(--amber-soft);color:var(--amber-text);font-size:.66rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.authority-card.primary .authority-label{background:rgba(232,99,15,.22);color:var(--orange-light)}
.evidence-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:24px 0}
.evidence-card{padding:20px;border:1px solid var(--line);border-radius:12px;background:#fff}
.evidence-card h3{font-size:.95rem;margin:8px 0 6px}
.evidence-card p{font-size:.82rem;color:var(--muted)}
.quality-page-head{margin-top:18px;padding:52px 54px 48px;border-radius:22px;background:radial-gradient(circle at 86% 18%,rgba(232,99,15,.2),transparent 28%),linear-gradient(120deg,var(--pitch-black) 0%,var(--navy) 64%,var(--pitch-mid) 100%);box-shadow:0 22px 48px rgba(4,31,18,.18)}
.quality-page-head .eyebrow{color:var(--orange-light)}
.quality-page-head h1{max-width:820px;color:#fff;font-size:clamp(2.15rem,4.6vw,3.5rem);line-height:1.06;letter-spacing:-.035em}
.quality-page-head p{max-width:830px;color:var(--on-dark);font-size:1.05rem;line-height:1.65}
.quality-head-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.btn-primary{background:var(--amber);color:var(--pitch-black)}
.btn-primary:hover{background:#f5712a;color:var(--pitch-black)}
.btn-secondary{border:1px solid rgba(255,255,255,.45);color:#fff;background:rgba(255,255,255,.06)}
.btn-secondary:hover{background:rgba(255,255,255,.14);color:#fff}
.quality-sec-head{max-width:820px;margin-bottom:24px}
.quality-sec-head h2{font-size:clamp(1.65rem,3vw,2.25rem);letter-spacing:-.025em}
.quality-sec-head p,.quality-section-intro{color:var(--muted);line-height:1.65}
.quality-product-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin:26px 0 16px}
.quality-product-card{overflow:hidden;border:1px solid var(--line);border-radius:20px;background:#fff;box-shadow:0 16px 38px rgba(6,61,34,.09)}
.quality-product-media{position:relative;height:286px;background:linear-gradient(145deg,#f4f8f5,#e6efe9)}
.quality-product-media img{display:block;width:100%;height:100%;object-fit:contain}
.quality-product-media--lifestyle img{object-fit:cover}
.quality-product-media:after{content:"";position:absolute;inset:auto 0 0;height:38%;background:linear-gradient(transparent,rgba(4,31,18,.7));pointer-events:none}
.quality-product-media>span{position:absolute;z-index:1;left:20px;bottom:16px;color:#fff;font-size:.74rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.quality-product-body{padding:25px 26px 26px}
.quality-product-body h3{margin:11px 0 9px;font-size:1.25rem;line-height:1.32;color:var(--navy-dark)}
.quality-product-body>p{color:var(--muted);font-size:.9rem;line-height:1.58}
.quality-benefits{display:grid;gap:10px;margin:18px 0;padding:0;list-style:none}
.quality-benefits li{position:relative;padding-left:22px;color:#3a4840;font-size:.87rem;line-height:1.5}
.quality-benefits li:before{content:"✓";position:absolute;left:0;color:var(--teal);font-weight:900}
.quality-rate-visual{display:grid;gap:10px;margin:21px 0 14px;padding:16px;border-radius:12px;background:#f3f7f4}
.quality-rate-visual>div{display:grid;grid-template-columns:1fr auto;gap:6px 12px;align-items:center}
.quality-rate-visual span{font-size:.75rem;color:#4a5950}
.quality-rate-visual strong{font-size:.84rem;color:var(--navy)}
.quality-rate-bar{position:relative;display:block;grid-column:1/-1;height:8px;border-radius:999px;background:#dde7e0;overflow:hidden}
.quality-rate-bar:after{content:"";position:absolute;inset:0 auto 0 0;min-width:8px;border-radius:inherit}
/* Add a modifier to set each bar's width and fill. */
.quality-rate-bar--peer:after{width:70%;background:repeating-linear-gradient(135deg,#c56d32 0,#c56d32 8px,#e29b68 8px,#e29b68 16px)}
.quality-product-link{display:inline-flex;align-items:center;font-size:.86rem;font-weight:800;color:var(--navy)}
.quality-product-link:hover{text-decoration:underline}
.quality-source-note{margin:0;padding:13px 16px;border-left:3px solid #b5c9bb;background:#f5f8f6;color:#5d6b63;font-size:.76rem;line-height:1.5}
.quality-value-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin:34px 0 8px;overflow:hidden;border:1px solid #d6e2da;border-radius:16px;background:#d6e2da}
.quality-value-strip article{padding:23px;background:#fff}
.quality-value-strip span{display:inline-block;margin-bottom:12px;color:var(--amber-text);font-size:.72rem;font-weight:900;letter-spacing:.1em}
.quality-value-strip h3{font-size:1rem;margin-bottom:7px;color:var(--navy-dark)}
.quality-value-strip p{color:var(--muted);font-size:.82rem;line-height:1.55}
.quality-visual-head{margin-top:46px}
.quality-visual-stack{display:grid;gap:24px;margin:22px 0 32px}
.quality-visual-card{overflow:hidden;border:1px solid #c9d8ce;border-radius:20px;background:#fff;box-shadow:0 16px 38px rgba(6,61,34,.08)}
.quality-visual-title{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);gap:28px;align-items:end;padding:24px 26px 20px;background:linear-gradient(145deg,#f3f7f4,#fff)}
.quality-visual-title h3{margin:10px 0 0;color:var(--navy-dark);font-size:1.28rem;line-height:1.32}
.quality-visual-title>p{margin:0;color:var(--muted);font-size:.86rem;line-height:1.58}
.quality-visual-sides{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:#d6e2da;border-top:1px solid #d6e2da;border-bottom:1px solid #d6e2da}
.quality-visual-side{display:grid;grid-template-columns:minmax(165px,.82fr) minmax(0,1.18fr);min-width:0;background:#fff}
/* Use modifier classes to style the sides of this comparison block. */
.quality-visual-side--peer{background:linear-gradient(135deg,#fff9f4,#fff 66%)}
.quality-visual-photo,.quality-peer-diagram{position:relative;display:grid;place-items:center;min-height:275px;padding:20px;background:#edf3ef}
.quality-visual-photo img{display:block;width:100%;height:220px;object-fit:contain;filter:drop-shadow(0 13px 17px rgba(4,31,18,.16))}
.quality-visual-photo--bar img{height:205px}
.quality-visual-photo>span,.quality-peer-diagram>span{position:absolute;left:14px;right:14px;bottom:13px;padding:6px 9px;border-radius:8px;background:rgba(4,31,18,.86);color:#fff;font-size:.62rem;font-weight:800;letter-spacing:.065em;text-align:center;text-transform:uppercase}
.quality-visual-copy{padding:23px 20px 20px}
.quality-visual-copy h4{margin:0 0 16px;color:var(--navy-dark);font-size:.94rem;line-height:1.35}
.quality-component-grid{display:grid;gap:10px}
.quality-component-grid>div{display:grid;grid-template-columns:40px 1fr;gap:10px;align-items:center;padding:9px 10px;border:1px solid #d9e7e4;border-radius:10px;background:rgba(255,255,255,.84)}
.quality-component-grid b{display:grid;place-items:center;width:38px;height:38px;border-radius:9px;background:#dff3ee;color:#0b7168;font-size:.65rem;letter-spacing:.02em}
.quality-component-grid span{color:#3a4840;font-size:.74rem;line-height:1.38}
.quality-component-grid--peer>div{border-color:#eadbcf}
.quality-component-grid--peer b{background:#f7e6d9;color:#9a4f25}
.quality-peer-diagram{overflow:hidden;background:repeating-linear-gradient(135deg,#f6ede5 0,#f6ede5 12px,#fbf6f1 12px,#fbf6f1 24px)}
.quality-peer-device{position:relative;display:grid;place-items:center;border:2px dashed #c47b4c;background:rgba(255,255,255,.74);box-shadow:0 14px 28px rgba(111,58,25,.12)}
.quality-peer-diagram--switch .quality-peer-device{width:145px;height:145px;border-radius:28px}
.quality-peer-diagram--switch .quality-peer-device:before{content:"";width:78px;height:78px;border:2px solid #c47b4c;border-radius:50%;background:#f5e4d8}
.quality-peer-diagram--switch .quality-peer-device i{position:absolute;width:24px;height:6px;border-radius:999px;background:#c47b4c}
.quality-peer-diagram--switch .quality-peer-device i:nth-child(1){top:25px;left:22px}.quality-peer-diagram--switch .quality-peer-device i:nth-child(2){top:25px;right:22px}.quality-peer-diagram--switch .quality-peer-device i:nth-child(3){bottom:25px;left:22px}.quality-peer-diagram--switch .quality-peer-device i:nth-child(4){right:22px;bottom:25px}
.quality-peer-diagram--bar .quality-peer-device{width:min(190px,90%);height:58px;border-radius:14px}
.quality-peer-diagram--bar .quality-peer-device i{width:13px;height:13px;border-radius:50%;background:#d49b72;box-shadow:0 0 0 5px rgba(212,155,114,.16)}
.quality-peer-diagram--bar .quality-peer-device:after{content:"";position:absolute;right:13px;top:13px;width:16px;height:16px;border:2px solid #c47b4c;border-radius:50%}
.quality-visual-vs{position:absolute;z-index:3;top:50%;left:50%;display:grid;place-items:center;width:46px;height:46px;border:4px solid #fff;border-radius:50%;transform:translate(-50%,-50%);background:var(--navy);box-shadow:0 8px 22px rgba(4,31,18,.25);color:#fff;font-size:.7rem;font-weight:900;letter-spacing:.06em}
.quality-visual-outcome{padding:17px 24px;background:var(--navy-dark);color:var(--on-dark);font-size:.84rem;line-height:1.55}
.quality-visual-outcome strong{color:var(--orange-light)}
.quality-cta-panel{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center;margin:30px 0;padding:30px 32px;border-radius:18px;background:linear-gradient(125deg,var(--pitch-black),var(--navy));color:#fff}
.quality-cta-panel .eyebrow{color:var(--orange-light)}
.quality-cta-panel h2{color:#fff;font-size:1.45rem;margin-bottom:7px}
.quality-cta-panel p{max-width:690px;color:var(--on-dark);font-size:.88rem;line-height:1.58}
.quality-methodology-body{padding:4px 20px 20px}
.quality-methodology-body>p{margin:14px 0;color:var(--muted);font-size:.86rem;line-height:1.62}
.quality-proof-head{margin-top:42px}
.quality-photo-note{margin:6px 0 24px;color:#5d6b63;font-size:.76rem;line-height:1.5}
.quality-research-grid{gap:20px;margin-top:20px}
.quality-research-grid h3{margin:0 0 10px;font-size:.95rem}
.proof-compare-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:20px 0}
.proof-compare-card{margin:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 8px 24px rgba(6,61,34,.06)}
.proof-compare-card>img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:#edf2ee}
.proof-compare-card figcaption{padding:18px 20px 20px}
.proof-compare-card h3{font-size:1rem;margin:9px 0 8px}
.proof-compare-card p{font-size:.84rem;color:var(--muted);margin:7px 0}
.benchmark-figure{margin:22px 0 26px;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:linear-gradient(145deg,#f4f8f5 0%,#fff 62%);box-shadow:0 12px 32px rgba(6,61,34,.07)}
#peer-comparison{scroll-margin-top:88px}
.benchmark-figure>figcaption{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:20px 22px 14px}
.benchmark-figure>figcaption strong{font-size:1.05rem;color:var(--navy)}
.benchmark-figure>figcaption>span:last-child{flex-basis:100%;font-size:.8rem;color:var(--muted)}
.benchmark-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;padding:6px 22px 18px}
.benchmark-card{padding:18px;border:1px solid #d6e2da;border-radius:12px;background:#fff}
.benchmark-card h3{font-size:.96rem;margin:0 0 15px}
.benchmark-row{display:grid;grid-template-columns:minmax(112px,.9fr) minmax(110px,1.3fr) auto;align-items:center;gap:10px;margin:12px 0}
.benchmark-label{font-size:.76rem;color:#44534a}
.benchmark-track{position:relative;display:block;height:16px;border-radius:999px;background:#e6efe9;overflow:hidden}
.benchmark-fill,.benchmark-range{position:absolute;top:0;bottom:0;border-radius:999px}
.benchmark-fill{left:0;min-width:10px;background:linear-gradient(90deg,#0f776e,#16a394)}
.benchmark-fill--04{width:8%}
.benchmark-fill--03{width:6%}
.benchmark-range{left:40%;width:60%;background:repeating-linear-gradient(135deg,#c56d32 0,#c56d32 8px,#e29b68 8px,#e29b68 16px)}
.benchmark-row strong{font-size:.88rem;color:var(--navy);white-space:nowrap}
.benchmark-caveat{margin:0;padding:17px 22px 20px;border-top:1px solid #d6e2da;background:#fff;font-size:.82rem;color:var(--muted)}
.peer-build-stack{display:grid;gap:20px;margin:20px 0 24px}
.peer-build-card{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 10px 28px rgba(6,61,34,.06)}
.peer-build-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding:20px 22px 16px;background:linear-gradient(145deg,#f4f8f5,#fff)}
.peer-build-head h3{font-size:1.08rem;margin:9px 0 0}
.peer-build-head>p{max-width:390px;margin:2px 0 0;font-size:.8rem;color:var(--muted);text-align:right}
.peer-build-table{min-width:920px;margin:0;border-left:0;border-right:0;border-bottom:0;border-radius:0}
.peer-build-table th:first-child{width:14%}
.peer-build-table th:nth-child(2),.peer-build-table th:nth-child(3){width:27%}
.evidence-gallery{margin:24px 0;border:1px solid var(--line);border-radius:14px;background:#fff;overflow:hidden}
.evidence-gallery>summary{cursor:pointer;padding:17px 20px;font-weight:800;color:var(--navy);background:#f4f8f5}
.evidence-gallery>p,.evidence-gallery>h3{margin-left:20px;margin-right:20px}
.evidence-gallery>p{font-size:.86rem;color:var(--muted)}
.evidence-gallery>h3{font-size:.98rem;margin-top:22px;margin-bottom:10px}
.evidence-photo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding:8px 20px 22px}
.evidence-photo-grid figure{margin:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
.evidence-photo-grid img{display:block;width:100%;height:240px;object-fit:contain;background:#edf2ee}
.evidence-photo-grid figcaption{padding:9px 11px;font-size:.76rem;color:var(--muted)}
.evidence-photo-grid--portrait{grid-template-columns:repeat(4,minmax(0,1fr))}
.evidence-photo-grid--portrait img{height:260px}
.evidence-tag{display:inline-block;padding:4px 8px;border-radius:999px;font-size:.66rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.evidence-tag.verified{background:var(--navy-soft);color:var(--navy-dark)}
.evidence-tag.stated{background:var(--slate-soft);color:var(--slate)}
.evidence-tag.verify{background:var(--amber-soft);color:var(--amber-text)}
.evidence-tag.limited{background:#f0f1f4;color:#596174}
.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:30px}
.process-step{position:relative;padding:22px 22px 20px;border-top:2px solid #c9d8ce}
.process-step:before{content:attr(data-step);position:absolute;top:-17px;left:22px;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--navy-dark);color:#fff;font-size:.75rem;font-weight:800;border:4px solid #fff}
.process-step h3{font-size:.98rem;margin:10px 0 6px}
.process-step p{font-size:.82rem;color:var(--muted)}
.intent-bar{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:22px}
.intent-btn{display:inline-flex;align-items:center;gap:6px;padding:10px 14px;border:1px solid rgba(255,255,255,.22);border-radius:999px;color:#e6f0ea;font-size:.82rem}
.intent-btn:hover{background:rgba(255,255,255,.09);color:#fff}
.choice-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 18px;margin:10px 0}
.choice{display:flex;gap:9px;align-items:flex-start;padding:11px 12px;border:1px solid var(--line);border-radius:9px;background:#fff;font-size:.86rem;color:#2b3a31}
.choice input{width:auto;margin-top:4px}
.form-help{font-size:.78rem;color:#5d6b63;margin-top:5px}
.route-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:24px 0}
.route-card{border:1px solid var(--line);border-radius:12px;background:#fff;padding:20px}
.route-card h3{font-size:1rem;margin-bottom:6px}
.route-card p{font-size:.84rem;color:var(--muted)}
@media (max-width:900px){
  .buyer-grid{grid-template-columns:repeat(3,1fr)}
  .authority-grid{grid-template-columns:1fr 1fr}
  .authority-card.primary{grid-column:1/-1}
  .evidence-grid,.process-grid{grid-template-columns:1fr 1fr}
  .quality-page-head{padding:44px 38px 40px}
  .quality-value-strip{grid-template-columns:1fr}
  .quality-cta-panel{grid-template-columns:1fr}
  .quality-cta-panel .btn{justify-self:start}
  .quality-visual-title{grid-template-columns:1fr;gap:10px}
  .quality-visual-sides{grid-template-columns:1fr}
  .quality-visual-vs{top:50%;left:50%}
}
@media (max-width:640px){
  .buyer-grid,.authority-grid,.evidence-grid,.process-grid,.choice-grid,.route-summary,.proof-compare-grid,.benchmark-grid,.quality-product-grid{grid-template-columns:1fr}
  .quality-page-head{margin-top:12px;padding:34px 22px 30px;border-radius:16px}
  .quality-page-head h1{font-size:2.05rem}
  .quality-page-head p{font-size:.95rem}
  .quality-head-actions{display:grid}
  .quality-head-actions .btn{text-align:center}
  .quality-product-media{height:240px}
  .quality-product-body{padding:22px 20px}
  .quality-visual-title{padding:21px 19px 18px}
  .quality-visual-title h3{font-size:1.12rem}
  .quality-visual-side{grid-template-columns:1fr}
  .quality-visual-photo,.quality-peer-diagram{min-height:210px}
  .quality-visual-photo img,.quality-visual-photo--bar img{height:165px}
  .quality-visual-copy{padding:20px 18px}
  .quality-visual-vs{top:50%;width:42px;height:42px}
  .quality-visual-outcome{padding:16px 18px}
  .quality-cta-panel{padding:25px 22px}
  .peer-build-card .scroll-x{overflow-x:visible}
  .peer-build-table{display:block;min-width:0;border:0}
  .peer-build-table tbody{display:grid}
  .peer-build-table tr{display:block}
  .peer-build-table tr:first-child{display:none}
  .peer-build-table tr:not(:first-child){padding:17px 18px 19px;border-top:1px solid var(--line)}
  .peer-build-table th[scope="row"]{display:block;width:100%!important;padding:0 0 12px;border:0;background:transparent;color:var(--navy-dark);font-size:.98rem}
  .peer-build-table td{display:block;width:100%!important;padding:9px 0 0;border:0;color:#3f4d44;font-size:.84rem;line-height:1.55}
  .peer-build-table td:before{display:block;margin-bottom:3px;color:var(--amber-text);font-size:.65rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
  .peer-build-table td:nth-child(2):before{content:"Our build"}
  .peer-build-table td:nth-child(3):before{content:"Lower-cost samples"}
  .peer-build-table td:nth-child(4):before{content:"Why buyers care"}
  .evidence-photo-grid,.evidence-photo-grid--portrait{grid-template-columns:repeat(2,minmax(0,1fr))}
  .peer-build-head{display:block}
  .peer-build-head>p{max-width:none;margin-top:10px;text-align:left}
  .benchmark-figure>figcaption,.benchmark-grid,.benchmark-caveat{padding-left:16px;padding-right:16px}
  .benchmark-row{grid-template-columns:minmax(100px,.9fr) minmax(92px,1.2fr) auto;gap:8px}
  .authority-card.primary{grid-column:auto}
  .process-grid{gap:18px}
  .process-step{border-top:none;border-left:2px solid #c9d8ce;padding:5px 16px 16px 30px}
  .process-step:before{top:0;left:-17px;border-color:var(--paper)}
  .article-body h2{font-size:1.3rem}
  .article-figure img{aspect-ratio:4/3}
}

/* Wangyudian brand additions. */
::selection{background:var(--amber-soft);color:var(--ink)}
h1,h2,h3{letter-spacing:-.015em}
/* Underline body links on hover only where they sit in running text; nav, cards and
   buttons have their own hover states. */
.notice a:hover,.authority-card p a:hover,.related a:hover,.feat a:hover,.faq-a a:hover,.article-body a:hover,.foot-note a:hover,.spec a:hover{text-decoration:underline;text-underline-offset:3px}
/* Focus rings on the dark surfaces: the green ring above is invisible on green, so
   links and buttons inside the hero, stats, CTA band, footer and the primary authority
   card get a white ring (7.4:1 on the lightest gradient stop, 12.4:1 on the footer).
   The floating WhatsApp button sits over page content, so it keeps the green ring. */
.hero a:focus-visible,.stats a:focus-visible,.cta-band a:focus-visible,.site-footer a:focus-visible,.authority-card.primary a:focus-visible{outline:3px solid #fff;outline-offset:3px;border-radius:999px}
.wa-float:focus-visible{outline:3px solid var(--navy);outline-offset:3px}
.nav-toggle{color:var(--navy-dark)}
.breadcrumb a:hover{color:var(--navy);text-decoration:underline}
.card-body h3,.authority-card h3,.evidence-card h3,.process-step h3,.route-card h3{color:var(--navy-dark)}

/* Reference galleries: up to four approved photos per catalogue reference (place_images.py).
   The first image spans the full width; the rest sit in a two-column grid. */
.product-img.gallery{display:grid;grid-template-columns:1fr 1fr;gap:8px;background:transparent;padding:0;min-height:0}
.product-img.gallery picture{display:block;margin:0}
.product-img.gallery picture:first-child{grid-column:1 / -1}
.product-img.gallery img{display:block;width:100%;height:auto;border-radius:10px;object-fit:cover;aspect-ratio:4 / 3}
.product-img.gallery picture:first-child img{aspect-ratio:auto}
@media (max-width:600px){.product-img.gallery{grid-template-columns:1fr 1fr}}

/* Lead product blocks with imagery and keep family strips beneath their headings. */
.product>.product-img,.product>picture.product-img{order:-1}
.family-strip{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin:0 0 26px}
.family-strip picture{display:block;margin:0}
.family-strip img{display:block;width:100%;height:auto;aspect-ratio:4 / 3;object-fit:cover;border-radius:10px;border:1px solid var(--line);background:#fff}
@media (max-width:700px){.family-strip{grid-template-columns:repeat(3,1fr);gap:6px}}
details.more{border:1px solid var(--line);border-radius:var(--radius);padding:14px 18px;margin:22px 0;background:#fff}
details.more summary{cursor:pointer;font-weight:700;font-size:1.05rem}
details.more[open] summary{margin-bottom:12px}
details.more .notice{margin-top:12px}

/* Product-led green styling retains the existing navigation and input breakpoints. */
.cta-band p a,.authority-card.primary p a{color:#fff;text-decoration:underline;text-underline-offset:3px}
#rfq-builder,.rfq-anchor,#personal-gifts,main section[id]{scroll-margin-top:88px}
.rfq-anchor{display:block}
.gift-order-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.home-hero{padding:52px 0;background:var(--navy-dark)}
.home-hero:before{opacity:.3}
.home-hero:after{display:none}
.home-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);grid-template-rows:auto auto;column-gap:52px;align-items:center}
.home-hero-copy{align-self:end}
.home-hero h1{font-size:clamp(2.35rem,4.1vw,3.65rem);line-height:1.04;letter-spacing:-.045em;max-width:10.5em;margin-bottom:20px}
.home-hero h1 span{display:block;color:var(--orange-light)}
.home-hero-copy>p{max-width:33em;line-height:1.65;font-size:1rem;margin-bottom:0}
.home-hero-visual{grid-column:2;grid-row:1 / 3;min-width:0;align-self:center;background:#fff;border-radius:12px;overflow:hidden}
.home-hero .hero-img{display:block;border:0;border-radius:0;box-shadow:none}
.home-hero .hero-img img{aspect-ratio:4/3;object-fit:cover}
.home-hero-visual figcaption{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;padding:15px 18px;font-size:.77rem;color:var(--muted)}
.home-hero-visual figcaption a{font-weight:700;color:var(--navy-dark);text-decoration:underline;text-underline-offset:3px}
.home-hero-visual a:focus-visible{outline-color:var(--navy)}
.home-hero-actions{align-self:start;padding-top:25px}
.home-hero .hero-ctas{align-items:center;gap:16px 24px}
.home-hero .hero-ctas .btn{flex:1;text-align:center}
.home-hero .btn-wa{background:#fff;color:var(--navy-dark);box-shadow:none;border-radius:6px;padding:13px 19px;font-size:.88rem}
.home-hero .btn-wa:hover{background:var(--navy-soft)}
.home-hero-link{color:#fff;font-size:.87rem;text-decoration:underline;text-underline-offset:5px}
.home-hero .home-hero-note{font-size:.76rem;color:var(--on-dark);margin:16px 0 0;max-width:30em}
.home-section-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:28px}
.home-section-head h2,.home-about h2{font-size:clamp(1.6rem,2.6vw,2.25rem);line-height:1.15;letter-spacing:-.035em;color:var(--navy-dark);margin:6px 0 0}
.text-link{font-size:.88rem;font-weight:650;text-decoration:underline;text-underline-offset:4px}
.text-link:hover,.range-help a:hover,.home-order-note a:hover{color:var(--ink)}
.home-range{background:var(--paper);padding:54px 0 32px}
.home-range-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.range-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff;transition:border-color .15s}
.range-card:hover{border-color:var(--navy)}
.range-card picture{display:block;background:var(--mist);overflow:hidden}
.range-card img{width:100%;aspect-ratio:4/3;object-fit:cover}
.range-card-body{padding:22px;display:flex;flex:1;flex-direction:column;gap:10px}
.range-card .model{font-size:.66rem;color:var(--amber-text);font-weight:750;letter-spacing:.12em;text-transform:uppercase}
.range-card h3{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:1.18rem;line-height:1.25}
.range-card h3 span{font-weight:400}
.range-card p{font-size:.88rem;line-height:1.55;color:var(--muted)}
.range-link{font-size:.82rem;font-weight:700;margin-top:auto;padding-top:8px;text-decoration:underline;text-underline-offset:4px}
.range-card:focus-visible,.buyer-card:focus-visible,.text-link:focus-visible,.range-help a:focus-visible,.home-order-note a:focus-visible{outline:3px solid var(--navy);outline-offset:4px}
.range-help{display:flex;align-items:center;flex-wrap:wrap;justify-content:center;gap:8px 16px;font-size:.84rem;padding:25px 0 0;color:var(--muted)}
.range-help a,.home-order-note a{text-decoration:underline;text-underline-offset:3px;font-weight:600}
.home-orders{background:var(--paper);padding:36px 0 56px}
.home-order-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.home-order-grid .buyer-card{min-height:0;border:0;border-top:2px solid var(--line);border-radius:0;box-shadow:none;background:transparent;padding:23px 0 8px;transition:border-color .15s}
.home-order-grid .buyer-card:hover{transform:none;box-shadow:none;border-color:var(--navy)}
.home-order-grid .buyer-no{font-size:.85rem;letter-spacing:.06em;margin-bottom:15px}
.home-order-grid .buyer-card strong{font-size:1.1rem}
.home-order-grid .buyer-card>span:not(.buyer-no){font-size:.88rem;max-width:29em}
.home-order-grid .buyer-card em{font-size:.86rem}
.home-order-note{font-size:.79rem;color:var(--muted);margin-top:28px}
.home-process{padding:62px 0 46px}
.home-process .process-grid{margin-top:45px}
.home-process .process-step p{font-size:.87rem}
.home-process .process-step:first-child{padding-left:0}
.home-process .process-step:first-child:before{left:0}
.home-process-note{font-size:.79rem;color:var(--muted);border-top:1px solid var(--line);padding-top:19px;margin-top:16px}
.home-about{padding:48px 0;background:var(--mist)}
.home-about-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:70px}
.home-about h2{margin-bottom:20px}
.home-about p{font-size:.91rem;color:var(--muted)}
.home-about .more{background:transparent;border:0;border-top:1px solid var(--line);border-radius:0;padding:18px 0 0;margin:20px 0 0}
.home-about .more summary{font-size:.9rem;color:var(--navy-dark)}
.home-about .more p{margin:12px 0}
.home-cta{padding:48px 0;background:var(--navy-dark)}
.home-cta:before{opacity:.2}
.home-cta-inner{display:flex;align-items:center;justify-content:space-between;gap:36px;text-align:left}
.home-cta h2{font-size:clamp(1.7rem,2.8vw,2.35rem);line-height:1.2;letter-spacing:-.035em}
.home-cta p{margin:0;font-size:.9rem}
.home-cta-actions{display:flex;flex-direction:column;align-items:start;gap:13px;flex-shrink:0}
.home-cta-actions .btn{border-radius:6px;font-size:.88rem;background:#fff;color:var(--navy-dark);box-shadow:none}
.home-cta-actions .btn:hover{background:var(--navy-soft)}
.home-email{color:#fff;font-size:.85rem;text-decoration:underline;text-underline-offset:4px}
.home-cta-actions p{font-size:.78rem}
body:has(.home-hero) .site-footer{margin-top:0;border-top:1px solid rgba(255,255,255,.2)}
@media(min-width:1100px){.foot-grid{grid-template-columns:1.5fr 1fr 1fr 1fr .8fr 1.2fr;gap:24px}}
@media(max-width:960px){
  .home-hero-grid{gap:26px;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .home-hero h1{font-size:2.35rem}
  .home-hero-visual figcaption{font-size:.74rem;padding:12px}
  .home-hero .hero-ctas{gap:15px}
  .range-card-body{padding:18px}
  .range-card h3{font-size:1.03rem}
  .home-about-grid{gap:35px}
  .home-cta-inner{flex-direction:column;align-items:start}
}
@media(max-width:640px){
  .home-hero{padding:30px 0 32px}
  .home-hero-grid{grid-template-columns:1fr;gap:22px}
  .home-hero-copy{grid-row:1}
  .home-hero h1{font-size:clamp(2.15rem,8.3vw,3rem);max-width:13em;margin-bottom:15px}
  .home-hero .kicker{font-size:.62rem;letter-spacing:.1em;margin-bottom:13px}
  .home-hero-copy>p{font-size:.93rem;line-height:1.55}
  .home-hero-visual{grid-column:1;grid-row:2}
  .home-hero .hero-img img{aspect-ratio:3/2}
  .home-hero-visual figcaption{padding:10px 13px}
  .home-hero-actions{grid-row:3;padding-top:0}
  .home-hero .hero-ctas{display:flex;flex-direction:column;align-items:stretch;gap:14px;text-align:center}
  .home-hero .hero-ctas .btn{width:auto}
  .home-hero .home-hero-note{max-width:none;text-align:center}
  .home-range{padding:38px 0 22px}
  .home-section-head{display:block;margin-bottom:22px}
  .home-section-head>.text-link{display:inline-block;margin-top:15px}
  .home-range-grid{grid-template-columns:1fr;gap:20px}
  .range-card img{aspect-ratio:3/2}
  .range-card-body{padding:20px}
  .range-card h3{font-size:1.25rem}
  .range-help{justify-content:start;font-size:.82rem;gap:10px 16px}
  .range-help>span:first-child{flex-basis:100%}
  .range-help>span[aria-hidden]{display:none}
  .home-orders{padding:25px 0 38px}
  .home-order-grid{grid-template-columns:1fr;gap:20px}
  .home-order-grid .buyer-card{padding:20px 0 0}
  .home-order-grid .buyer-card em{padding-top:12px}
  .home-process{padding:40px 0 35px}
  .home-process .process-grid{margin-top:30px;padding-left:15px}
  .home-process .process-step:first-child{padding-left:30px}
  .home-process .process-step:first-child:before{left:-17px}
  .home-process .process-step:before{border-color:#fff}
  .home-about{padding:36px 0}
  .home-about-grid{grid-template-columns:1fr;gap:25px}
  .home-about h2 br{display:none}
  .home-cta{padding:36px 0}
  .home-cta-inner{gap:25px}
  .home-cta-actions{width:100%;padding-right:45px}
  .home-cta-actions .btn{width:100%;text-align:center}
}

/* OEM/ODM photo gallery: approved product images before ordering detail. */
.oem-gallery{padding:30px 0 46px;background:var(--paper)}
.oem-photo-card{margin:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
.oem-photo-card a{display:block;height:100%;color:var(--navy-dark)}
.oem-photo-card picture{display:block;background:#fff}
.oem-photo-card img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain}
.oem-photo-card figcaption{padding:15px 17px;font-size:.9rem;font-weight:650;border-top:1px solid var(--line)}
.oem-photo-card a:hover figcaption{text-decoration:underline;text-underline-offset:3px}
.oem-photo-card a:focus-visible{outline:3px solid var(--navy);outline-offset:-4px;border-radius:10px}
.oem-gallery-note{font-size:.85rem;color:var(--muted);margin-top:22px}
.oem-team-photo{margin:0;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.oem-team-photo picture,.oem-team-photo img{display:block;width:100%;height:auto}
.oem-team-photo figcaption{padding:13px 16px;font-size:.85rem;color:var(--muted)}
@media(max-width:640px){.oem-gallery{padding:25px 0 35px}.oem-gallery .grid-3{gap:20px}.oem-photo-card img{aspect-ratio:4/3}.oem-photo-card figcaption{font-size:.95rem}}
/* buyer-guide figures (deploy 16): bare <figure> in page copy sits flush with the text column */
main figure{margin:24px 0}
main figure img{max-width:100%;height:auto;border-radius:12px}
/* Broken-image fallback: assets/js/img-fallback.js inserts .img-fallback after an <img> that failed to load. */
.img-fallback-source{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important}
.img-fallback{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:100%;min-height:4rem;padding:.75rem 1rem;background:#eef1ee;color:#3f4a44;font-size:.85rem;line-height:1.4;text-align:center;border-radius:8px}

/* Destination notice remains readable inside the dark home hero. */
.guard-market-notice{color:#163c2f}
.guard-market-notice p,.home-hero .guard-market-notice p{color:#163c2f;max-width:none;margin:0}
.guard-market-notice p+p{margin-top:6px}


/* Keep price inclusions readable on both the dark hero and light product pages. */
.guard-pricing { margin: 18px 0; padding: 16px 20px; }
.guard-pricing p, .home-hero .guard-pricing p { color: #143c2c; font-size: 15px; line-height: 1.55; margin: 0 0 8px; }
.guard-pricing p:last-child, .home-hero .guard-pricing p:last-child { margin-bottom: 0; }
.guard-pricing p:first-child, .home-hero .guard-pricing p:first-child { font-size: 18px; }
.guard-pricing a { color: #075b35; text-decoration: underline; }

/* Readability pass: retain the established heading scale while raising buyer-facing
   prose, product-card descriptions, and essential specification text. */
.article-body p,.article-body li{font-size:1.0625rem}
.product p,.card-body p,.range-card p,.home-order-grid .buyer-card>span:not(.buyer-no),.home-process .process-step p,.home-about p,.home-cta p{font-size:1rem}
.spec,.spec td:last-child{font-size:.9375rem}
.guard-pricing p,.home-hero .guard-pricing p{font-size:1rem}
.btn,.nav-item,.text-link,.range-link,.home-hero-link,.home-email,.contact-main .rfq-actions .btn,.contact-direct .btn{font-size:.875rem}
@media(max-width:640px){.home-hero-copy>p,.range-card p,.home-order-grid .buyer-card>span:not(.buyer-no),.home-process .process-step p,.home-about p,.home-cta p{font-size:1rem}.home-hero .btn-wa{font-size:.875rem}}

/* Buyer instructions have accumulated inline type sizes in content files. Keep
   explanatory copy at the reading floor without changing display or eyebrow text. */
.article-body p,.article-body li,.process-step p,.authority-card p,.evidence-card p,.route-card p,.oem-gallery-note{font-size:1rem!important}
.article-meta,.form-help,main figcaption,.rfq label,.choice{font-size:.875rem!important}

/* Desktop entry fields must match the mobile input floor. */
input:not([type=hidden]):not([type=checkbox]):not([type=radio]),select,textarea{font-size:16px!important}

/* The home routing notes and photo teaser are supplemental instructions, not
   decorative labels, so they keep the same 14px floor as other helper copy. */
.home-hero .home-hero-note,.home-order-note,.home-process-note,.home-hero-visual figcaption{font-size:.875rem!important}
/* Typography QA: buyer guidance and finder status must not fall below the readable floor. */
main p:not(.article-meta){font-size:1rem!important;line-height:1.72}
#pf-count{font-size:.875rem!important;line-height:1.6}

/* Home: printed hero photo, proof strip, lead models, brand band, buyer questions and notes. */
.home-hero-visual picture{display:block;border:0;border-radius:0}
.home-hero-visual img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:50% 40%}
.home-hero-actions .guard-pricing{margin:22px 0 0}
.home-hero .home-hero-link{font-weight:700}
.home-hero-link:focus-visible,.lead-ask:focus-visible,.lead-photo:focus-visible,.lead-body h3 a:focus-visible,.proof-list a:focus-visible,.home-notes summary:focus-visible{outline:3px solid var(--orange-bright);outline-offset:3px;border-radius:4px}
.home-proof{background:var(--navy-soft);border-bottom:1px solid var(--line);padding:24px 0}
.proof-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px}
.proof-list a{display:flex;flex-direction:column;gap:4px;height:100%;padding:4px 0 4px 14px;border-left:3px solid var(--amber);color:var(--ink)}
.proof-list a:hover strong{text-decoration:underline;text-underline-offset:3px}
.proof-list strong{font-size:1rem;line-height:1.3;color:var(--navy-dark)}
.proof-list span{font-size:.875rem;line-height:1.5;color:var(--muted)}
.home-range .range-help{display:block;text-align:center}
.range-card .range-price{margin-top:auto;padding-top:6px;font-weight:700;color:var(--navy-dark)}
.home-leads{padding:50px 0 56px;background:#fff}
.lead-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.lead-model{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
.lead-photo{display:block;background:var(--mist)}
.lead-photo img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.lead-body{display:flex;flex:1;flex-direction:column;gap:8px;padding:20px}
.lead-body h3{font-size:1.12rem;line-height:1.3;margin:0}
.lead-body h3 a{color:var(--navy-dark)}
.lead-body h3 a:hover{text-decoration:underline;text-underline-offset:3px}
.lead-body .lead-ref{margin:0;font-size:.875rem!important;font-weight:700;letter-spacing:.04em;color:var(--amber-text)}
.lead-body .lead-price{margin:0;font-weight:700;color:var(--navy-dark)}
.lead-chips{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 10px;padding:0}
.lead-chips li{font-size:.875rem;line-height:1.4;padding:3px 10px;border:1px solid var(--line);border-radius:999px;background:var(--mist);color:var(--ink)}
.lead-ask{margin-top:auto;align-self:flex-start;display:inline-block;padding:10px 16px;border-radius:6px;background:var(--wa);color:#fff;font-weight:700;font-size:.875rem}
.lead-ask:hover{background:var(--wa-dark)}
.home-order-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.home-brand{padding:50px 0;background:#fff}
.home-brand-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:48px;align-items:center}
.home-brand-photo{margin:0}
.home-brand-photo img{display:block;width:100%;height:auto;border-radius:10px;border:1px solid var(--line)}
.home-brand h2{font-size:clamp(1.6rem,2.6vw,2.25rem);line-height:1.15;letter-spacing:-.035em;color:var(--navy-dark);margin:0 0 14px}
.home-brand p{color:var(--muted);margin-bottom:12px}
.home-brand p strong{color:var(--ink)}
.home-brand-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:18px}
.home-brand-actions .btn{border-radius:6px}
.home-about p strong{color:var(--ink)}
.home-about p+p{margin-top:12px}
.home-faq{padding:50px 0;background:var(--paper)}
.home-qa-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 44px}
.home-qa h3{font-size:1.05rem;line-height:1.35;margin:0 0 6px}
.home-qa p{color:var(--muted)}
.home-notes{margin:28px 0 36px;padding-top:14px;border-top:1px solid var(--line)}
.home-notes summary{cursor:pointer;font-weight:700;color:var(--navy-dark)}
.home-notes p{color:var(--muted);margin-top:10px}
@media(max-width:960px){
  .proof-list{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lead-body{padding:16px}
  .home-order-grid{grid-template-columns:1fr}
  .home-brand-grid{gap:30px}
}
@media(max-width:640px){
  .home-hero-visual img{aspect-ratio:4/3}
  .home-hero-actions .guard-pricing{margin-top:18px}
  .home-proof{padding:20px 0}
  .proof-list{grid-template-columns:1fr 1fr;gap:16px}
  .proof-list li:last-child{grid-column:1 / -1}
  .home-leads{padding:36px 0 40px}
  .lead-grid{grid-template-columns:1fr;gap:20px}
  .home-brand{padding:36px 0}
  .home-brand-grid{grid-template-columns:1fr;gap:22px}
  .home-faq{padding:36px 0}
  .home-qa-grid{grid-template-columns:1fr;gap:20px}
}
.home-hero h1{font-size:clamp(2.2rem,3.5vw,3.15rem);max-width:12.5em}
@media(max-width:640px){
  .home-hero h1{font-size:clamp(1.85rem,7.6vw,2.6rem);margin-bottom:12px}
  .home-hero-visual figcaption>span{display:none}
}
@media(max-width:640px){.lead-photo img{aspect-ratio:3/2}}
/* Family pages: reference photo grid, key-fact chips, table notes and the collapsed Notes block. */
.page-head .page-facts{margin:16px 0 4px}
.page-head .page-actions{margin-top:16px}
.page-head .price-line{margin:16px 0 0;padding:14px 18px;border-radius:var(--radius);background:var(--navy-soft);color:#143c2c}
.ref-overview h2,.ref-blocks>.wrap>h2{margin-bottom:20px}
.ref-overview .lead-grid{margin-bottom:18px}
.ref-overview .lead-body>p:not(.lead-ref){margin:0;color:var(--muted)}
.ref-overview #sleeve-sizes{margin-top:34px}
.table-note{margin-top:8px;color:var(--muted)}
.page-notes{margin:30px 0 8px;padding-top:14px;border-top:1px solid var(--line)}
.page-notes summary{cursor:pointer;font-weight:700;color:var(--navy-dark)}
.page-notes summary:focus-visible{outline:3px solid var(--orange-bright);outline-offset:3px;border-radius:4px}
.page-notes p{color:var(--muted);margin-top:10px}
.lead-figure{margin:0 0 26px;max-width:560px}
.lead-figure img{display:block;width:100%;height:auto;border-radius:10px;border:1px solid var(--line)}
@media(max-width:960px){.ref-overview .lead-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.ref-overview .lead-grid{grid-template-columns:1fr}}
.ref-overview .lead-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.ref-legacy .product>picture img{display:block;width:auto;max-width:100%;max-height:380px;margin:0 auto}
@media(max-width:1100px){.ref-overview .lead-grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.ref-overview .lead-grid-4{grid-template-columns:1fr}}
@media(max-width:640px){
  .ref-overview .lead-model{display:grid;grid-template-columns:112px minmax(0,1fr);align-items:start}
  .ref-overview .lead-photo{height:100%}
  .ref-overview .lead-photo img{aspect-ratio:1/1;height:100%;min-height:112px}
  .ref-overview .lead-body{padding:12px 14px;gap:6px}
  .ref-overview .lead-body h3{font-size:1rem}
  .ref-overview .lead-chips{margin:0 0 6px}
  .ref-overview .lead-ask{padding:8px 12px}
}
/* Contact page: direct routes in the page head. */
.page-head .contact-direct{max-width:480px;margin:16px 0 0}
.page-head .contact-direct td a{font-weight:700}
.section .grid-2>div>p+p,.section .grid-2>div>ul+p,.section .grid-2>div>p+ul{margin-top:10px}
.page-head .contact-direct th{white-space:nowrap;width:1%}

.cta-band a[href="https://t.me/ryanfulfil"]{color:#fff;text-decoration:underline;text-underline-offset:3px}