/* Factory website starter kit — site stylesheet. Colours are CSS variables in
   :root; swap the hex values for your brand, keep the variable names so the
   rest of the sheet does not need touching. */
:root{
  /* baiweipets.com brand: a deep glaze green-teal with a kraft accent — the materials
     the range is actually made of (corrugated board, kraft paper, sisal, ceramic).
     The variable NAMES are the kit's (--navy is the primary slot and holds the glaze
     green, --amber holds the kraft) so every rule below keeps working. Every
     text/background pair used on buttons, header, footer, tags, notices, links, the
     hero and BOTH stops of the CTA gradient was computed against WCAG 4.5:1 (3:1 for
     large text and UI components); the table is in docs/DESIGN-NOTES.md and
     `python scripts/design_checks.py` recomputes it. */
  --navy:#0f5348; --navy-dark:#093831; --navy-soft:#e3efeb;
  --ink:#1b241f; --muted:#57635c; --mist:#f2f5f3; --line:#dde5e0;
  --teal:#0f766e; --teal-soft:#e4f2ee; --paper:#faf7f1;
  --amber:#c07a2b; --amber-soft:#f8e8d5; --amber-text:#8a4c12; --wa:#12813e; --wa-dark:#0e6733;
  /* Brand-only additions. --glaze-deep/--glaze-mid bound the hero and CTA gradients,
     and every on-gradient pair in the contrast table is checked against BOTH stops;
     the --kraft-* and --on-dark* tints are the lightest values that still pass on
     those greens, so do not lighten the greens without re-running the table.
     --slate is the "stated" tag hue, kept blue so it cannot collapse into the green
     "document-sighted" tag. --field-line is the form-field border: 3.6:1 on white,
     because an input border is the only thing marking the control (WCAG 1.4.11) and
     the kit's #cfd7e4 was 1.5:1. --corrugate is the single brand texture — fine
     vertical flutes, the cut edge of a sheet of corrugated board — used at low alpha
     on the dark surfaces only, never behind body copy. */
  --glaze-deep:#052723; --glaze-mid:#14655a;
  --kraft-light:#f5cda6; --kraft-stat:#eec096; --kraft-bright:#e3a55c;
  --on-dark:#cfe2dd; --on-dark-soft:#a6c3bc; --hero-pill:#dbeae6;
  --slate:#33578c; --slate-soft:#e7edf7; --field-line:#7a8a83;
  --corrugate:repeating-linear-gradient(90deg,rgba(255,255,255,.13) 0 1px,transparent 1px 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:'Inter',-apple-system,'Segoe UI',Arial,sans-serif;color:var(--ink);background:#fff;line-height:1.6;font-size:16px}
/* THIS is what prevents image layout shift on this site: the aspect-ratio rules on
   .photos img / .card img / .product img reserve the box before the file loads. The
   width/height ATTRIBUTES on the img tags are correct and worth keeping, but measured
   2026-08-27 they carry none of the load: all 75 images across 8 pages were already
   reserved by CSS aspect-ratio, and stripping the attributes produced zero displacement.
   So do NOT remove an aspect-ratio rule believing the attributes cover it — they do not
   here, because object-fit:cover means the rendered ratio is the CSS one, not the file's. */
img{max-width:100%;height:auto;display:block}
button,input,select,textarea{font:inherit}
::selection{background:var(--amber-soft);color:var(--ink)}
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}
/* Board trim: a 4px glaze/kraft band across 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 has to keep lining up with the header's bottom edge. */
.site-header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line)}
.site-header:before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,var(--navy) 0 58%,var(--amber) 58% 74%,var(--navy-dark) 74% 100%);pointer-events:none}
.header-row{display:flex;align-items:center;justify-content:space-between;gap:16px;height:72px}
.brand{display:flex;flex-direction:column;line-height:1.15}
.brand-mark{font-weight:800;font-size:1.42rem;letter-spacing:-.015em;color:var(--navy-dark)}
/* The "flute mark": three short kraft bars after the wordmark — the cut edge of
   corrugated board, and 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. Decorative only; it carries no meaning. */
.brand-mark:after{content:"";display:inline-block;width:.56em;height:.42em;margin-left:.3em;background:repeating-linear-gradient(90deg,var(--amber) 0 2px,transparent 2px 5px);vertical-align:.04em}
.brand-reg{font-size:.6em;vertical-align:super}
.brand-sub{font-size:.68rem;color:#5f6b64;letter-spacing:.02em}
.site-nav{display:flex;align-items:center;gap:22px}
.nav-item{font-size:.92rem;font-weight:600;color:#24322c;padding:6px 0}
.nav-item:hover{color:var(--navy)}
/* Kraft underline on the top-level links only. The dropdown container is a div, and a
   text-decoration on it would propagate into the static (always-open) 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(9,56,49,.14);min-width:230px;padding:8px 0}
/* KEYBOARD PARITY — DO NOT REDUCE THIS TO :hover ALONE.
   Without :focus-within the Products submenu never opens for a keyboard user, so all
   seven links inside it — including the Product Finder — are unreachable above 960px.
   That is a WCAG 2.1.1 keyboard failure on the site's primary navigation.
   This rule was added deliberately in be0a575, silently dropped by the 3b9575f redesign
   (comment and all), and restored here after the dropdown was found unreachable by
   keyboard on the live site. If a redesign touches this line, re-test with the keyboard. */
.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:#24322c;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)}
/* WhatsApp green keeps the #25D366 hue (142 deg) darkened to #12813e so white text
   reaches 4.96:1; the brand greens are much bluer (169 deg) and darker, so the CTA
   still reads as "the WhatsApp button" rather than as another brand button. */
.btn-wa{background:var(--wa);color:#fff;box-shadow:0 6px 16px rgba(18,129,62,.26)}
.btn-wa:hover{background:var(--wa-dark);box-shadow:0 8px 20px rgba(18,129,62,.32)}
.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(--glaze-deep) 0%,var(--navy) 55%,var(--glaze-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)}
/* Kraft marks that sit ON the glaze gradients use --kraft-bright, not --amber: the
   kraft accent is only 2.0:1 on the lightest gradient stop, --kraft-bright is 3.2:1,
   and small caps text on those stops uses --kraft-light (4.7:1). */
.kicker{display:inline-block;font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--kraft-light);margin-bottom:12px}
.kicker:before,.eyebrow:before{content:"";display:inline-block;width:22px;height:3px;margin-right:9px;border-radius:2px;background:var(--kraft-bright);vertical-align:.22em}
.eyebrow:before{background:var(--amber)}

/* 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(--kraft-stat);font-variant-numeric:tabular-nums}
.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;letter-spacing:-.02em;color:var(--navy-dark);margin-bottom:10px}
.sec-head p{color:#57635c}
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;box-shadow:0 10px 26px rgba(9,56,49,.06)}
.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:#45534c}
.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:#35433b}
.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:#59665e;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;color:var(--navy-dark);border-bottom:2px solid var(--navy-dark)}
.spec td:last-child{font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;font-size:.84rem;color:#1f2c26}
.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:#35433b;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:#59665e}

/* misc */
.notice{background:var(--navy-soft);border-left:4px solid var(--amber-text);border-radius:8px;padding:16px 20px;font-size:.92rem;color:#243830;margin:26px 0}
.pf-intro{margin:0 0 18px}
.pf-shortlist{border:1px solid #ccdcd6;border-radius:12px;background:#f4f8f6;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:#5f6b64;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:#45534c;margin:4px 0;line-height:1.45}
.pf-remove{border:0;background:none;color:#5f6b64;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:#59665e;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:#5f6b64;font-size:.72rem}
.breadcrumb{font-size:.82rem;color:#5f6b64;padding:18px 20px 0}
.breadcrumb a{color:#5f6b64}
.page-head{padding:36px 20px 8px}
.page-head h1{font-size:2rem;font-weight:800;letter-spacing:-.025em;color:var(--navy-dark);margin-bottom:10px}
.page-head p{max-width:760px;color:#45534c}
.cta-band{position:relative;overflow:hidden;background:linear-gradient(115deg,var(--glaze-deep) 0%,var(--navy) 58%,var(--glaze-mid) 100%);color:#fff;text-align:center;padding:52px 20px}
/* Flutes on the outer fifths only, for the contrast reason set out on .hero:before —
   the centred heading, paragraph and intent pills all sit inside 18-82% at every width
   above the 640px breakpoint, and below it the flutes are hidden. */
.cta-band:before{content:"";position:absolute;inset:0;background:var(--corrugate);-webkit-mask-image:linear-gradient(90deg,#000 0,transparent 18%,transparent 82%,#000 100%);mask-image:linear-gradient(90deg,#000 0,transparent 18%,transparent 82%,#000 100%);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:#c6d8d2;margin-top:64px;border-top:4px solid var(--amber)}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.2fr;gap:36px;padding:52px 20px 36px}
.foot-brand{font-weight:800;font-size:1.15rem;letter-spacing:-.015em;color:#fff;margin-bottom:10px}
.foot-brand:after{content:"";display:inline-block;width:.56em;height:.42em;margin-left:.3em;background:repeating-linear-gradient(90deg,var(--kraft-bright) 0 2px,transparent 2px 5px);vertical-align:.04em}
.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:#c6d8d2;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:var(--on-dark-soft);margin-bottom:12px}
.foot-note a{display:inline;color:#c6d8d2}
.foot-bottom{border-top:1px solid rgba(255,255,255,.12);padding:18px 20px;font-size:.78rem;color:#8fa79f}

/* 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(18,129,62,.42);transition:transform .15s}
.wa-float:hover{transform:scale(1.08);background:var(--wa-dark)}

/* 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:#45534c;margin-bottom:16px}
.rfq label{display:block;font-size:.82rem;font-weight:600;color:#24322c;margin:12px 0 4px}
.rfq input,.rfq select,.rfq textarea{width:100%;padding:10px 12px;border:1px solid var(--field-line);border-radius:8px;font:inherit;font-size:.92rem;background:#fff}
/* The kit gave the enquiry fields no :focus-visible rule at all, so they fell back to
   the UA ring, which several browsers draw as a 1px hairline on a light border. This
   matches the ring every other control on the site already gets. */
.rfq input:focus-visible,.rfq select:focus-visible,.rfq textarea:focus-visible{outline:3px solid var(--navy);outline-offset:2px}
.rfq textarea{min-height:70px;resize:vertical}
.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-soft);box-shadow:0 8px 22px rgba(9,56,49,.06)}
.faq-item summary:hover{background:var(--mist)}
.faq-item summary{padding:16px 20px;font-weight:600;cursor:pointer;color:var(--navy-dark);list-style:none}
.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:#35433b;font-size:.93rem}
.ship-group td{background:var(--navy-soft);color:var(--navy-dark);font-weight:700;font-family:'Inter',sans-serif;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:#5f6b64}
.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:#5f6b64}
.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:#59665e}
.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:#eef2ef}
.doc-card img{width:100%;height:auto;display:block}
.doc-card figcaption{padding:11px 13px;font-size:.78rem;line-height:1.5;color:#45534c}
.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:#eef2ef;color:#45534c}

/* 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(9,56,49,.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}
}

/* 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}
}

/* factory 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:#0b1a17}
.vid-card.portrait{max-width:300px}
.vid-cap{font-size:.83rem;color:#45534c;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(192,122,43,.30),transparent 28%),linear-gradient(115deg,var(--glaze-deep) 0%,var(--navy) 58%,var(--glaze-mid) 100%);padding:72px 0 64px}
/* Flute field on the right only. The mask matters for contrast, not just for looks:
   a flute line is 13% white, and over the lightest gradient stop that lifts the local
   background enough to drop --on-dark body copy to 3.79:1 and --kraft-light to 3.45:1
   (white headline text is still 5.12:1). So the texture is kept off every column that
   carries text — here the left 58%, which clears the hero's text column at every width
   down to the 640px breakpoint, where the layout goes single-column and the rule below
   hides the flutes entirely. .hero .wrap is lifted above both pseudo-elements. */
.hero:before{content:"";position:absolute;inset:0;background:var(--corrugate);-webkit-mask-image:linear-gradient(90deg,transparent 0 58%,#000 78%);mask-image:linear-gradient(90deg,transparent 0 58%,#000 78%);pointer-events:none}
.hero:after{content:"";position:absolute;width:360px;height:360px;border:2px solid rgba(255,255,255,.11);border-radius:34px;right:-130px;bottom:-200px;transform:rotate(12deg)}
.hero .wrap{position:relative;z-index:1}
/* The kit's homepage ships this button with an inline style tuned for the kit navy
   (style="border-color:#8ea4d6;color:var(--hero-pill)"). Content is out of scope for the design
   pass and an inline style beats the sheet, so this asserts white over it. Delete the
   rule when that inline style goes. */
.hero .btn-ghost{border-color:rgba(255,255,255,.55)!important;color:#fff!important}
.hero .btn-ghost:hover{background:rgba(255,255,255,.12)!important}
.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(5,39,35,.86);backdrop-filter:blur(8px);color:var(--hero-pill);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,.18);border-radius:999px;padding:6px 12px;color:var(--hero-pill);font-size:.78rem;background:rgba(255,255,255,.06)}
.hero-points li:before{content:"";display:inline-block;width:6px;height:6px;margin-right:8px;border-radius:2px;background:var(--kraft-bright);vertical-align:.08em}
.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(9,56,49,.06);transition:transform .18s,box-shadow .18s,border-color .18s}
.buyer-card:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(9,56,49,.12),inset 0 3px 0 var(--amber);border-color:#b9cdc6}
.buyer-card .buyer-no{font-size:1.25rem;font-weight:800;color:var(--amber-text);letter-spacing:0;font-variant-numeric:tabular-nums;line-height:1;margin-bottom:16px}
.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(--glaze-deep),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(192,122,43,.22);color:var(--kraft-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(192,122,43,.26),transparent 28%),linear-gradient(120deg,var(--glaze-deep) 0%,var(--navy) 64%,var(--glaze-mid) 100%);box-shadow:0 22px 48px rgba(5,39,35,.18)}
.quality-page-head .eyebrow{color:var(--kraft-light)}
.quality-page-head .eyebrow:before,.quality-cta-panel .eyebrow:before{background:var(--kraft-bright)}
.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(--glaze-deep)}
.btn-primary:hover{background:#d08d3a;color:var(--glaze-deep)}
.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(9,56,49,.09)}
.quality-product-media{position:relative;height:286px;background:linear-gradient(145deg,#f5f9f7,#e6eeea)}
.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(5,39,35,.72));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:#3d4a43;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:#f3f8f5}
.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:#4c5a52}
.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:#dde6e2;overflow:hidden}
.quality-rate-bar:after{content:"";position:absolute;inset:0 auto 0 0;min-width:8px;border-radius:inherit}
/* Add one modifier per bar you need, e.g. .quality-rate-bar--ours-a:after{width:N%} —
   two brand-specific modifiers lived here in the source site and were removed from the kit. */
.quality-rate-bar--peer:after{width:70%;background:repeating-linear-gradient(135deg,#8a7f74 0,#8a7f74 8px,#b6aca1 8px,#b6aca1 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 #b3c5bd;background:#f5f8f6;color:#5f6b64;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 #d6e2dd;border-radius:16px;background:#d6e2dd}
.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 #cbd9d3;border-radius:20px;background:#fff;box-shadow:0 16px 38px rgba(9,56,49,.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,#f3f8f5,#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:#d6e2dd;border-top:1px solid #d6e2dd;border-bottom:1px solid #d6e2dd}
.quality-visual-side{display:grid;grid-template-columns:minmax(165px,.82fr) minmax(0,1.18fr);min-width:0;background:#fff}
/* .quality-visual-side--ours was site-specific and was removed from the kit; add your
   own modifier class the same way if you use the side-by-side visual comparison block. */
.quality-visual-side--peer{background:linear-gradient(135deg,#fbfbf9,#fff 66%)}
.quality-visual-photo,.quality-peer-diagram{position:relative;display:grid;place-items:center;min-height:275px;padding:20px;background:#ecf4f1}
.quality-visual-photo img{display:block;width:100%;height:220px;object-fit:contain;filter:drop-shadow(0 13px 17px rgba(5,39,35,.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(5,39,35,.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:#3d4a43;font-size:.74rem;line-height:1.38}
.quality-component-grid--peer>div{border-color:#e2e0dc}
.quality-component-grid--peer b{background:#edecea;color:#6a6055}
.quality-peer-diagram{overflow:hidden;background:repeating-linear-gradient(135deg,#efeeec 0,#efeeec 12px,#f8f8f6 12px,#f8f8f6 24px)}
.quality-peer-device{position:relative;display:grid;place-items:center;border:2px dashed #94887c;background:rgba(255,255,255,.74);box-shadow:0 14px 28px rgba(70,64,56,.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 #94887c;border-radius:50%;background:#eceae7}
.quality-peer-diagram--switch .quality-peer-device i{position:absolute;width:24px;height:6px;border-radius:999px;background:#94887c}
.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:#b0a598;box-shadow:0 0 0 5px rgba(150,140,128,.16)}
.quality-peer-diagram--bar .quality-peer-device:after{content:"";position:absolute;right:13px;top:13px;width:16px;height:16px;border:2px solid #94887c;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(5,39,35,.25);color:#fff;font-size:.7rem;font-weight:900;letter-spacing:.06em}
.quality-visual-outcome{padding:17px 24px;background:#0b3b34;color:var(--on-dark);font-size:.84rem;line-height:1.55}
.quality-visual-outcome strong{color:var(--kraft-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(--glaze-deep),var(--navy));color:#fff}
.quality-cta-panel .eyebrow{color:var(--kraft-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:#5f6b64;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(9,56,49,.06)}
.proof-compare-card>img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:#ecf1ee}
.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,#f4f8f6 0%,#fff 62%);box-shadow:0 12px 32px rgba(9,56,49,.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 #d9e4df;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:#4a564e}
.benchmark-track{position:relative;display:block;height:16px;border-radius:999px;background:#e5edea;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,#8a7f74 0,#8a7f74 8px,#b6aca1 8px,#b6aca1 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 #d9e4df;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(9,56,49,.06)}
.peer-build-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding:20px 22px 16px;background:linear-gradient(145deg,#f4f8f6,#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:#f4f8f6}
.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:#ecf1ee}
.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}
/* Four hues, none shared. On the kit's navy palette "verified" (teal) and "stated"
   (navy) were already close; on a green-teal brand they would have collapsed into two
   greens, so "stated" moved to the slate blue and "verified" took the brand green. */
.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 #c9d8d2}
.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:var(--hero-pill);font-size:.82rem}
.intent-btn:hover{background:rgba(255,255,255,.09);color:#fff}
/* A --navy focus ring is invisible on the dark glaze surfaces, so links and buttons
   inside them get a white ring instead (7.4:1 on the lightest gradient stop, 12.9:1 on
   the footer). Nothing is suppressed here — these only replace the ring colour. */
.hero a:focus-visible,.hero .btn:focus-visible,.stats a:focus-visible,.cta-band a:focus-visible,.cta-band .btn:focus-visible,.site-footer a:focus-visible,.site-footer .btn:focus-visible,.authority-card.primary a:focus-visible{outline:3px solid #fff;outline-offset:2px;border-radius:4px}
.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:#2d3b34}
.choice input{width:auto;margin-top:4px}
.form-help{font-size:.78rem;color:#5f6b64;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){
  /* Single column: every horizontal mask that kept the flutes off the text on wider
     screens now has text running through it, and --on-dark over a flute line is only
     3.79:1. The gradient alone carries the brand at phone widths. */
  .hero:before,.cta-band:before{display:none}
  .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:#454f48;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 #c9d8d2;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}
}

/* Images-first product pages (operator ruling, sibling precedent): galleries of up to six photos,
   the image column first in every product block, a family photo strip under the page heading,
   and the ordering details folded into <details class="more">. Filled by scripts/place_images.py. */
.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}}

/* Images first (owner ruling 2026-09-05 evening): the photo column leads every product block,
   a photo strip sits under each family page's heading, and the ordering details fold away. */
.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}