/* =========================================================
   Template design system — rebuilt from mecofence.com layout
   analysis (original code, placeholder content).
   Tokens measured from the live site's computed styles.
   ========================================================= */

:root {
  --font: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
  --ink: #1b1b1b;            /* headings / primary text */
  --body: #4f4f4f;           /* paragraph text */
  --green: #669934;          /* brand accent */
  --green-dark: #557f2b;
  --green-light: #8dac6b;    /* active tab border / light accent */
  --tint: #f6f8f3;           /* tab pill background */
  --warm: #fffaf9;           /* warm off-white section bg */
  --gray-bg: #f5f5f5;        /* light gray section bg */
  --footer-bg: #f1f1f1;
  --line: #e3e3e3;
  --container: 1200px;
  --header-h: 80px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  color: var(--body);
  font-size: 16px;
  line-height: 1.7;
  background: #fff;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
h1, h2, h3, h4 { color: var(--ink); font-weight: 600; line-height: 1.35; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 32px; }

/* ---------- image placeholders (swap for real photos) ---------- */
.ph {
  background:
    repeating-linear-gradient(45deg, #dcdcdc 0 14px, #d3d3d3 14px 28px);
  color: #7a7a7a;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  overflow: hidden;
}
.ph--dark {
  background:
    repeating-linear-gradient(45deg, #6f6f6f 0 14px, #666 14px 28px);
  color: #cfcfcf;
}

/* ---------- buttons ---------- */
.btn { display: inline-block; cursor: pointer; transition: .2s; font-family: var(--font); }
.btn-pill {                       /* 2026-09-03 Tweak #1: 4px black-ring pill -> solid white with blue text, 6px radius */
  background: #fff;
  color: var(--green);
  border: 0;
  border-radius: 6px;
  padding: 17px 36px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .04em;
  box-shadow: 0 2px 10px rgba(0,0,0,.18);
}
.btn-pill:hover { background: #e8f1f8; color: var(--green-dark); }
.btn-green {                      /* square green button */
  background: var(--green);
  color: #fff;
  border: 0;
  padding: 12px 24px;
  font-size: 16px;
}
.btn-green:hover { background: var(--green-dark); }
.btn-green--sm { padding: 12px 24px; font-size: 14px; }
.btn-outline {                    /* secondary: outlined */
  background: transparent;
  color: var(--ink);
  border: 2px solid var(--ink);
  padding: 11px 24px;
  font-size: 15px;
}
.btn-outline:hover { background: var(--ink); color: #fff; }
.link-more {                      /* "VISIT US" style text link */
  color: var(--green);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .04em;
}
.link-more:hover { text-decoration: underline; }

/* ---------- header ---------- */
.site-header {
  height: var(--header-h);
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 0 rgba(0,0,0,.06);
}
.site-header .container {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 28px;
}
.logo { width: 120px; height: 48px; flex: none; font-size: 11px; }
.main-nav { display: flex; align-items: center; gap: 26px; }
.main-nav > li { position: relative; }
.main-nav a {
  font-size: 15px;
  color: #000;
  padding: 28px 0;
}
.main-nav a:hover { color: var(--green); }
.has-sub > a::after { content: " \25BE"; font-size: 10px; }
.sub-menu {
  position: absolute;
  top: calc(100% + 0px);
  left: -16px;
  min-width: 230px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  padding: 8px 0;
  display: none;
}
.has-sub:hover .sub-menu { display: block; }
.sub-menu a { display: block; padding: 10px 18px; font-size: 14px; }
.header-tools {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 14px;
}
/* ---------- language switcher ----------
   A <details> disclosure rather than a <select>: it opens without JavaScript, its options are
   real links a crawler can follow, and it survives the fourteenth language, which a row of
   labels would not. data/i18n/locales.json is the spec — endonym only, no flags, current
   marked. Below the mobile breakpoint it becomes a bottom sheet, because fourteen items in a
   dropdown anchored to a 375px header cannot be scrolled. */
.lang-inline { display: none; }
.lang { position: relative; }
.lang > summary {
  list-style: none;
  cursor: pointer;
  border: 1px solid var(--line);
  padding: 6px 12px;
  font-size: 13px;
  background: #fff;
  font-family: var(--font);
  white-space: nowrap;
  user-select: none;
}
.lang > summary::-webkit-details-marker { display: none; }
.lang > summary::after { content: "\25BE"; margin-left: 7px; font-size: 10px; opacity: .65; }
.lang[open] > summary::after { content: "\25B4"; }
.lang > summary:hover, .lang[open] > summary { border-color: var(--green); }
.lang > ul {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 60;
  min-width: 190px;
  max-height: 62vh;
  overflow-y: auto;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 10px 30px rgba(10, 34, 53, .13);
}
.lang > ul a {
  display: block;
  padding: 8px 16px;
  font-size: 14.5px;
  color: var(--ink);
  white-space: nowrap;
}
.lang > ul a:hover { background: var(--tint); }
.lang > ul a[aria-current] { font-weight: 700; color: var(--green); }
.lang > ul a[aria-current]::after { content: "\2713"; margin-left: 10px; font-size: 12px; }
@media (max-width: 900px) {
  .lang > ul {
    position: fixed;
    inset: auto 0 0 0;
    right: 0;
    min-width: 0;
    max-height: 70vh;
    border: 0;
    border-top: 1px solid var(--line);
    padding: 8px 0 max(8px, env(safe-area-inset-bottom));
    box-shadow: 0 -10px 30px rgba(10, 34, 53, .16);
  }
  .lang > ul a { padding: 13px 22px; font-size: 16px; }
}
.nav-toggle { display: none; background: none; border: 0; font-size: 26px; cursor: pointer; }

/* ---------- hero (home) ---------- */
.hero {
  height: 700px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.hero .hero-bg { position: absolute; inset: 0; }
.hero-inner { position: relative; max-width: 900px; padding: 0 24px; }
.hero h1 {
  font-size: 72px;
  line-height: 1.2;
  color: #fff;
  margin-bottom: 24px;
}
.hero .hero-sub {
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 36px;
}

/* ---------- generic sections ---------- */
.section { padding: 80px 0; }
.section--warm { background: var(--warm); }
.section--gray { background: var(--gray-bg); }
.sec-head { text-align: center; max-width: 980px; margin: 0 auto 48px; }
.sec-head h2 { font-size: 48px; line-height: 1.5; margin-bottom: 16px; }
.sec-head .sec-sub { font-size: 17px; }

/* ---------- tabs (home: strengths module) ---------- */
.tab-nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 40px;
}
.tab-btn {
  background: var(--tint);
  color: var(--ink);
  border: 0;
  border-bottom: 3px solid transparent;
  padding: 15px 35px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font);
}
.tab-btn.is-active { border-bottom-color: var(--green-light); background: #eef2e8; }
.tab-panel { display: none; gap: 20px; align-items: center; }
.tab-panel.is-active { display: flex; }
.tab-panel .tab-text { flex: 1 1 64%; }
.tab-panel .tab-text h3 { font-size: 24px; margin-bottom: 14px; }
.tab-panel .tab-text p { margin-bottom: 16px; }
.tab-panel .tab-text ul { margin: 0 0 22px; }
.tab-panel .tab-text li { padding-left: 22px; position: relative; margin-bottom: 8px; }
.tab-panel .tab-text li::before { content: "✓"; color: var(--green); position: absolute; left: 0; font-weight: 600; }
.tab-panel .tab-media { flex: 0 0 413px; height: 310px; }

/* ---------- 3-col category cards (home) ---------- */
.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.card { display: flex; flex-direction: column; }
.card .card-media { height: 290px; margin-bottom: 20px; }
.card h3 { font-size: 24px; margin-bottom: 10px; }
.card p { font-size: 15px; margin-bottom: 18px; flex: 1; }

/* ---------- gallery grid (home) ---------- */
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.gallery-grid .ph { height: 350px; }

/* ---------- capability cards 2x2 (home) ---------- */
.cap-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.cap-card { background: #fff; border: 1px solid var(--line); }
.cap-card .cap-media { height: 260px; }
.cap-card .cap-body { padding: 26px 28px 32px; }
.cap-card h3 { font-size: 22px; margin-bottom: 10px; }
.cap-card p { font-size: 15px; }

/* ---------- 50/50 split band (home) ---------- */
.split { display: flex; min-height: 500px; }
.split > * { flex: 1 1 50%; }
.split .split-media { min-height: 500px; }
.split .split-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 60px 70px;
}
.split .split-body h2 { font-size: 36px; margin-bottom: 18px; }
.split .split-body p { margin-bottom: 24px; }
.split--reverse { flex-direction: row-reverse; }
.split--gray { background: var(--gray-bg); }

/* ---------- news / blog cards ---------- */
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 24px; }
.post-card .post-media { height: 240px; margin-bottom: 16px; }
.post-card .post-date { font-size: 13px; color: #8a8a8a; margin-bottom: 6px; }
.post-card h3 { font-size: 19px; margin-bottom: 8px; }
.post-card h3 a:hover { color: var(--green); }
.post-card .post-excerpt { font-size: 14px; margin-bottom: 10px; }

/* ---------- page title band (inner pages) ---------- */
.page-title {
  min-height: 336px;
  position: relative;
  display: flex;
  align-items: center;
  text-align: center;
}
.page-title .hero-bg { position: absolute; inset: 0; }
.page-title .container { position: relative; width: 100%; }
.page-title h1 {
  color: #fff;
  font-size: 44px;
  text-transform: uppercase;
  letter-spacing: .02em;
  margin-bottom: 10px;
}
.page-title .pt-sub { color: #fff; font-size: 18px; font-weight: 600; }

/* ---------- stats row (products) ---------- */
.stats-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  text-align: center;
}
.stat b { display: block; font-size: 40px; color: var(--green); font-weight: 600; line-height: 1.2; }
.stat span { font-size: 14px; }

/* ---------- checklist ---------- */
.checklist li { padding-left: 28px; position: relative; margin-bottom: 10px; font-size: 16px; }
.checklist li::before { content: "✅"; position: absolute; left: 0; font-size: 14px; top: 2px; }

/* ---------- alternating feature blocks (products) ---------- */
.feature { display: flex; gap: 60px; align-items: center; padding: 60px 0; }
.feature--reverse { flex-direction: row-reverse; }
.feature .feature-media { flex: 0 0 560px; height: 420px; }
.feature .feature-body { flex: 1; }
.feature h3 { font-size: 30px; margin-bottom: 16px; }
.feature p { margin-bottom: 18px; }
.spec-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.spec-chips span {
  background: var(--tint);
  border: 1px solid var(--green-light);
  color: var(--ink);
  font-size: 13px;
  padding: 6px 14px;
}
.btn-row { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- icon cards (solutions by site condition) ---------- */
.icon-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.icon-card { background: #fff; border: 1px solid var(--line); padding: 34px 32px; }
.icon-card .icon { font-size: 34px; margin-bottom: 14px; }
.icon-card h3 { font-size: 21px; margin-bottom: 10px; }
.icon-card p { font-size: 15px; margin-bottom: 14px; }

/* ---------- color swatches ---------- */
.swatch-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center; }
.swatch .ph { height: 210px; margin-bottom: 12px; }
.swatch span { font-weight: 600; color: var(--ink); }

/* ---------- numbered steps (about: QC protocol) ---------- */
.steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.step { background: #fff; border: 1px solid var(--line); padding: 26px 22px; }
.step b { display: block; font-size: 34px; color: var(--green); line-height: 1; margin-bottom: 12px; }
.step h4 { font-size: 17px; margin-bottom: 6px; }
.step p { font-size: 14px; }

/* ---------- test / cert cards ---------- */
.cards-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.cards-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.info-card { background: #fff; border: 1px solid var(--line); padding: 30px 26px; }
.info-card h4 { font-size: 18px; margin-bottom: 10px; }
.info-card p { font-size: 14px; }
.info-card .ph { height: 120px; margin-bottom: 16px; }

/* ---------- founder quote (about) ---------- */
.quote-block { display: flex; gap: 50px; align-items: flex-start; }
.quote-block .quote-media { flex: 0 0 360px; height: 420px; }
.quote-block blockquote {
  font-size: 17px;
  font-style: italic;
  border-left: 4px solid var(--green-light);
  padding-left: 26px;
}
.quote-block blockquote footer { margin-top: 16px; font-style: normal; font-weight: 600; color: var(--ink); }

/* ---------- timeline (about) ---------- */
.timeline { border-left: 3px solid var(--green-light); padding-left: 34px; display: grid; gap: 34px; }
.timeline .tl-item h3 { font-size: 22px; margin-bottom: 8px; }
.timeline .tl-item h3 span { color: var(--green); margin-right: 10px; }

/* ---------- CTA band ---------- */
.cta-band { background: var(--green); text-align: center; padding: 80px 24px; }
.cta-band h2 { color: #fff; font-size: 40px; text-transform: uppercase; margin-bottom: 12px; }
.cta-band p { color: #eaf2df; font-size: 17px; margin-bottom: 30px; }
.cta-band .btn-pill { border-color: #fff; }

/* ---------- forms ---------- */
.form-grid { display: grid; gap: 16px; }
.form-grid .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-grid input,
.form-grid select,
.form-grid textarea {
  width: 100%;
  border: 1px solid #cfcfcf;
  padding: 13px 15px;
  font-size: 15px;
  font-family: var(--font);
  background: #fff;
}
.form-grid textarea { min-height: 140px; resize: vertical; }
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus {
  outline: 2px solid var(--green-light);
  border-color: var(--green-light);
}

/* ---------- contact layout ---------- */
.contact-cols { display: flex; gap: 60px; }
.contact-cols .contact-form { flex: 1 1 58%; }
.contact-cols .contact-info { flex: 1 1 36%; }
.contact-info h3 { font-size: 22px; margin-bottom: 16px; }
.contact-info p { margin-bottom: 14px; font-size: 15px; }
.contact-info b { color: var(--ink); }

/* ---------- breadcrumb ---------- */
.breadcrumb { font-size: 13px; color: #8a8a8a; padding: 18px 0; }
.breadcrumb a:hover { color: var(--green); }

/* ---------- pagination ---------- */
.pagination { display: flex; justify-content: center; gap: 10px; margin-top: 56px; }
.pagination a {
  border: 1px solid var(--line);
  min-width: 42px;
  text-align: center;
  padding: 9px 0;
  font-size: 15px;
}
.pagination a.is-current, .pagination a:hover { background: var(--green); color: #fff; border-color: var(--green); }

/* ---------- FAQ accordion ---------- */
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--ink);
  font-size: 17px;
  padding: 20px 0;
  list-style: none;
  position: relative;
  padding-right: 34px;
}
.faq summary::after { content: "+"; position: absolute; right: 4px; font-size: 22px; color: var(--green); }
.faq details[open] summary::after { content: "–"; }
.faq details p { padding: 0 0 20px; }

/* ---------- footer ---------- */
.site-footer { background: var(--footer-bg); padding: 70px 0 0; font-size: 14px; }
.footer-cols {
  display: grid;
  grid-template-columns: 1.1fr 1.5fr 1.1fr 1.3fr;
  gap: 40px;
  padding-bottom: 50px;
}
.footer-cols h4 { font-size: 16px; margin-bottom: 16px; }
.footer-cols li { margin-bottom: 9px; }
.footer-cols a:hover { color: var(--green); }
.newsletter { display: flex; gap: 8px; margin-top: 12px; }
.newsletter input { flex: 1; border: 1px solid #cfcfcf; padding: 11px 12px; font-family: var(--font); }
.social-row { display: flex; gap: 12px; margin-top: 18px; }
.social-row a {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--ink); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
}
.social-row a:hover { background: var(--green); }
.footer-bottom {
  border-top: 1px solid #ddd;
  padding: 20px 0;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 13px;
  color: #8a8a8a;
}

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .hero h1 { font-size: 52px; }
  .sec-head h2 { font-size: 38px; }
  .feature .feature-media { flex-basis: 46%; height: 340px; }
  .steps-grid, .cards-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .stats-row { grid-template-columns: repeat(3, 1fr); row-gap: 28px; }
}
@media (max-width: 860px) {
  .main-nav {
    display: none;
    position: absolute;
    top: var(--header-h);
    left: 0; right: 0;
    background: #fff;
    flex-direction: column;
    align-items: flex-start;
    padding: 16px 28px;
    gap: 0;
    box-shadow: 0 12px 24px rgba(0,0,0,.12);
  }
  .main-nav.is-open { display: flex; }
  .main-nav a { padding: 12px 0; display: block; }
  .sub-menu { position: static; display: block; box-shadow: none; padding-left: 16px; }
  .nav-toggle { display: block; margin-left: auto; }
  /* The switcher moves into the mobile menu rather than out of the page: .header-tools is the
     desktop home for it, and at 375 the header row is already logo + toggle + quote button. */
  .header-tools { display: none; }
  .lang-inline { display: block !important; width: 100%; margin-bottom: 6px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
  .lang-inline .lang-inline-label { display: block; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); margin-bottom: 4px; }
  .lang-inline ul { display: flex; flex-wrap: wrap; gap: 4px 18px; list-style: none; margin: 0; padding: 0; }
  .lang-inline a { padding: 8px 0 !important; }
  .lang-inline a[aria-current] { font-weight: 700; color: var(--green); }
  .hero { height: 540px; }
  .hero h1 { font-size: 38px; }
  .cards-3, .gallery-grid, .news-grid, .cap-grid, .icon-grid,
  .cards-grid-3, .swatch-row { grid-template-columns: 1fr 1fr; }
  .tab-panel { flex-direction: column; }
  .tab-panel .tab-media { flex-basis: auto; width: 100%; }
  .split, .split--reverse, .feature, .feature--reverse, .contact-cols, .quote-block { flex-direction: column; }
  .feature .feature-media { width: 100%; }
  .quote-block .quote-media { width: 100%; flex-basis: auto; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
}
/* ---------- blog post (article) ---------- */
.post-hero { text-align: center; max-width: 860px; margin: 56px auto 28px; padding: 0 24px; }
.post-hero h1 { font-size: 48px; line-height: 1.4; margin-bottom: 14px; }
.post-meta { font-size: 14px; color: #8a8a8a; letter-spacing: .04em; text-transform: uppercase; }
.post-featured { max-width: 980px; margin: 0 auto 50px; padding: 0 24px; }
.post-featured .ph { height: 480px; }
.article { max-width: 780px; margin: 0 auto; padding: 0 24px 40px; }
.article h2 { font-size: 30px; margin: 44px 0 16px; }
.article h3 { font-size: 22px; margin: 32px 0 12px; }
.article p { margin-bottom: 18px; }
.article ul, .article ol { margin: 0 0 18px 22px; }
.article ul { list-style: disc; }
.article ol { list-style: decimal; }
.article li { margin-bottom: 8px; }
.article .article-img { margin: 26px 0; }
.article .article-img .ph { height: 420px; }
.article .img-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 26px 0; }
.article .img-pair .ph { height: 245px; }
.article blockquote {
  border-left: 4px solid var(--green-light);
  background: var(--tint);
  padding: 20px 26px;
  margin: 26px 0;
  font-style: italic;
  color: var(--ink);
}
.toc-box {
  border: 1px solid var(--line);
  background: var(--gray-bg);
  padding: 22px 26px;
  margin: 30px 0;
}
.toc-box h4 { font-size: 16px; margin-bottom: 12px; text-transform: uppercase; letter-spacing: .06em; }
.toc-box ol { list-style: decimal; margin-left: 20px; }
.toc-box li { margin-bottom: 6px; font-size: 15px; }
.toc-box a:hover { color: var(--green); }

/* ---------- resource: option cards ---------- */
.option-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.option-card { background: #fff; border: 1px solid var(--line); padding: 40px 36px; }
.option-card .eyebrow {
  display: inline-block;
  background: var(--green);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  padding: 5px 14px;
  margin-bottom: 16px;
}
.option-card h3 { font-size: 26px; margin-bottom: 6px; }
.option-card .option-sub { font-size: 14px; color: #8a8a8a; margin-bottom: 16px; }
.option-card p { font-size: 15px; margin-bottom: 16px; }
.option-card ul { margin-bottom: 16px; }
.option-card li { padding-left: 22px; position: relative; margin-bottom: 8px; font-size: 14px; }
.option-card li::before { content: "✓"; color: var(--green); position: absolute; left: 0; font-weight: 600; }
.option-card .best-for { font-size: 14px; background: var(--tint); padding: 12px 16px; color: var(--ink); }

/* ---------- resource: comparison table ---------- */
.cmp-wrap { overflow-x: auto; }
.cmp-table { width: 100%; border-collapse: collapse; background: #fff; font-size: 14px; }
.cmp-table th, .cmp-table td { border: 1px solid var(--line); padding: 13px 16px; text-align: left; vertical-align: top; }
.cmp-table thead th { background: var(--ink); color: #fff; font-weight: 600; }
.cmp-table thead th.hl { background: var(--green); }
.cmp-table tbody th { background: var(--gray-bg); color: var(--ink); font-weight: 600; width: 24%; }
.cmp-table td.hl { background: #f4f8ee; }

/* ---------- resource: downloads ---------- */
.dl-list { border-top: 1px solid var(--line); }
.dl-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid var(--line);
  padding: 16px 4px;
}
.dl-row .dl-name { color: var(--ink); font-weight: 500; }
.dl-row .dl-type { font-size: 13px; color: #8a8a8a; }

/* ---------- distributor: numbered steps 3-col ---------- */
.steps-grid--3 { grid-template-columns: repeat(3, 1fr); }
.step .step-label { font-size: 12px; letter-spacing: .12em; color: var(--green); font-weight: 600; margin-bottom: 8px; }

/* ---------- toolkit grid (image + caption) ---------- */
.toolkit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; text-align: center; }
.toolkit-item .ph { height: 240px; margin-bottom: 12px; }
.toolkit-item span { font-size: 14px; font-weight: 600; color: var(--ink); letter-spacing: .06em; text-transform: uppercase; }

@media (max-width: 860px) {
  .option-grid { grid-template-columns: 1fr; }
  .toolkit-grid, .steps-grid--3 { grid-template-columns: 1fr 1fr; }
  .post-hero h1 { font-size: 32px; }
  .post-featured .ph { height: 300px; }
  .article .article-img .ph { height: 260px; }
}
@media (max-width: 560px) {
  .cards-3, .gallery-grid, .news-grid, .cap-grid, .icon-grid,
  .cards-grid-3, .swatch-row, .steps-grid, .cards-grid-4, .footer-cols,
  .form-grid .row-2 { grid-template-columns: 1fr; }
  .stats-row { grid-template-columns: 1fr 1fr; }
  .sec-head h2 { font-size: 30px; }
  .page-title h1 { font-size: 30px; }
  .section { padding: 56px 0; }
}

/* =========================================================
   SGSBOTTLE skin + homepage modules (2026-09-02)
   Brand token overrides: mecofence green -> SGS red #A8161D (site-wide)
   ========================================================= */
:root {
  /* SGSBOTTLE live-site palette (extracted 2026-09-02 from the sgsbottle.com Elementor kit) */
  --green: #004D90;          /* primary blue (keeps the accent token name) */
  --green-dark: #0A478C;
  --green-light: #3FC6FF;
  --tint: #F4F5F7;
  --warm: #FFF7F1;           /* warm background from the live site */
  --container: 1400px;       /* Kevin prefers a wide layout (was 1200px) */
  /* 2026-09-03 Kevin picked the products-page fallback rendering as the reference:
     SF-feel body + Georgia headings. Inter ~ San Francisco (cross-platform consistent);
     Georgia is a local font (preinstalled on Win/Mac, true bold). */
  --font: 'Nunito Sans', -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;  /* 2026-09-03 Kevin picked Nunito Sans */
  --font-head: Georgia, 'Times New Roman', serif;
  --text-2: #5f6b7a;         /* unified gray for secondary text (Tweak #7) */
}
h1, h2, h3, h4 { font-family: var(--font-head); }
.btn, .tab-btn, .mega-col h4, .eyebrow, .case-tag, .step-time, .post-date, .breadcrumb { font-family: var(--font); }
.tab-btn.is-active { background: #e8f1f8; }
.cta-band p { color: #cfe0f0; }
.cmp-table td.hl { background: #eef4fa; }
/* Live-site type scale: headings in the 21-31px range, one step smaller overall than the mecofence original */
.sec-head h2 { font-size: 32px; }
.split .split-body h2 { font-size: 28px; }
.cta-band h2 { font-size: 30px; }
.about-band h2 { font-size: 28px; }
.tab-panel .tab-text h3 { font-size: 22px; }
.sq-body h3 { font-size: 22px; }
.option-card h3 { font-size: 24px; }

/* ---------- real images (assets/img, downloaded from sgsbottle.com) ---------- */
.logo { width: auto; height: auto; }
.logo img { height: 36px; width: auto; display: block; }
.site-header .container { gap: 20px; }
.main-nav { gap: 20px; }
.main-nav > li > a { white-space: nowrap; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-bg::after { content: ""; position: absolute; inset: 0; background: rgba(15,15,15,.55); }
.cert-logo { height: 52px; width: auto; }
.card-media img { width: 100%; height: 100%; object-fit: contain; background: #fff; display: block; }
.tab-media img, .split-media img, .post-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.split-media { overflow: hidden; }
.post-media { display: block; overflow: hidden; }
.gallery-grid .gtile { height: 350px; position: relative; overflow: hidden; margin: 0; }
.gtile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gtile figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 30px 18px 14px;
  background: linear-gradient(transparent, rgba(0,0,0,.68));
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .03em;
}

/* ---------- Mega menu (modeled on the live site's ElementsKit full-width megamenu) ---------- */
.main-nav > li.has-mega { position: static; }  /* overrides the template's relative on .main-nav > li so the panel positions against the header */
.mega-panel {
  position: absolute;
  left: 0; right: 0; top: 100%;
  background: #fff;
  border-top: 1px solid var(--line);
  box-shadow: 0 18px 30px rgba(0,0,0,.10);
  display: none;
  padding: 34px 0 38px;
  z-index: 99;
}
/* :hover alone is the no-JS fallback; main.js adds .is-open so a scroll that moves the panel
   under the cursor cannot close it before a link is clicked. */
.has-mega:hover .mega-panel,
.has-mega.is-open .mega-panel { display: block; }
.mega-cols {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 36px;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
}
.mega-col h4 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--green);
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
  margin-bottom: 12px;
}
.mega-col a { display: block; font-size: 14px; padding: 5px 0; color: var(--body); }
.mega-col a:hover { color: var(--green); }
.mega-col .mega-all { color: var(--green); font-weight: 600; margin-top: 8px; }

/* ---------- M0 announcement bar ---------- */
.topbar {
  background: var(--green-dark);
  color: #fff;
  text-align: center;
  font-size: 13px;
  letter-spacing: .02em;
  padding: 9px 16px;
}
.topbar a { color: #fff; text-decoration: underline; }

/* ---------- M1 header quote CTA ---------- */
.btn-quote {
  background: var(--green);
  color: #fff;
  padding: 11px 22px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  flex: none;
  transition: .2s;
}
.btn-quote:hover { background: var(--green-dark); color: #fff; }

/* ---------- M2 hero: dual CTA + stats ---------- */
/* Live-site type scale: hero H1 44px desktop, 32px mobile */
@media (min-width: 861px) {
  .hero h1 { font-size: 44px; }
}
.hero-cta-row {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 56px;
}
.btn-pill--ghost {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255,255,255,.85);
  padding: 15px 34px;
  box-shadow: none;
}
.btn-pill--ghost:hover { background: #fff; color: var(--green); border-color: #fff; }
.hero-stats {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  border-top: 1px solid rgba(255,255,255,.35);
  padding-top: 26px;
}
.hero-stats .stat { padding: 0 34px; border-right: 1px solid rgba(255,255,255,.35); text-align: center; }
.hero-stats .stat:last-child { border-right: 0; }
.hero-stats b { display: block; font-size: 32px; font-weight: 600; color: #fff; line-height: 1.25; }
.hero-stats span { font-size: 13px; color: #e3e3e3; }

/* ---------- M3 trust strip ---------- */
.trust-strip { background: #fff; border-bottom: 1px solid var(--line); padding: 24px 0; }
.trust-inner { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
.cert-chip {
  border: 1px solid var(--line);
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: .05em;
}
.trust-note { width: 100%; text-align: center; font-size: 13px; color: #8a8a8a; margin-top: 4px; }

/* ---------- M4 category grid 4-col ---------- */
.cards-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.cards-4 .card-media { height: 210px; margin-bottom: 16px; }
.cards-4 h3 { font-size: 19px; margin-bottom: 8px; }
.cards-4 h3 a:hover { color: var(--green); }
.cards-4 p { font-size: 13.5px; margin-bottom: 14px; flex: 1; }

/* ---------- M7 why-us number cards ---------- */
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.why-card { background: #fff; border: 1px solid var(--line); padding: 30px 26px; }
.why-card b { display: block; font-size: 32px; color: var(--green); font-weight: 600; line-height: 1.2; margin-bottom: 10px; }
.why-card h3 { font-size: 16px; margin-bottom: 6px; }
.why-card p { font-size: 13.5px; }

/* ---------- M9 process timeline 6-col ---------- */
.process-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.process-grid .step { padding: 22px 18px; }
.process-grid .step b { font-size: 26px; margin-bottom: 8px; }
.process-grid .step h4 { font-size: 15px; }
.process-grid .step p { font-size: 13px; }
.step .step-time {
  display: block;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--green);
  font-weight: 600;
  margin-bottom: 8px;
}

/* ---------- M2 hero secondary link / M3 qual strip ---------- */
.hero .hero-cta-row { margin-bottom: 20px; }
.hero-link { display: inline-block; color: #fff; font-weight: 600; font-size: 15px; text-decoration: underline; margin-bottom: 46px; }
.hero-link:hover { color: #ddd; }
.section--tight { padding: 56px 0; }
.section--tight .sec-head { margin-bottom: 34px; }
.qual-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.qual-grid .why-card { padding: 24px 20px; }
.qual-grid .why-card b { font-size: 26px; }

/* ---------- M7 supplier qualification ---------- */
.sq-cols { display: flex; gap: 56px; align-items: flex-start; }
.sq-media { flex: 0 0 42%; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.sq-media img { width: 100%; display: block; }
.sq-body { flex: 1; min-width: 0; }
.sq-body h3 { font-size: 24px; margin-bottom: 10px; }
.sq-body p { margin-bottom: 24px; }
.sq-certs { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; margin-bottom: 22px; }
.sq-certs img { height: 46px; width: auto; }
.sq-analyst { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; background: #fff; border: 1px solid var(--line); padding: 16px 20px; margin-bottom: 24px; }
.sq-analyst img { height: 24px; width: auto; }
.sq-analyst p { font-size: 13.5px; margin: 0; flex: 1; min-width: 220px; }
.sq-analyst b { color: var(--ink); }
.sq-links { display: flex; gap: 30px; flex-wrap: wrap; }

/* ---------- M8 project case cards ---------- */
.case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.case-card { background: #fff; border: 1px solid var(--line); display: flex; flex-direction: column; }
.case-media { height: 200px; overflow: hidden; position: relative; }
.case-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.case-badge { position: absolute; top: 12px; right: 12px; background: var(--ink); color: #fff; font-size: 11px; letter-spacing: .12em; padding: 4px 10px; }
.case-body { padding: 22px 24px 26px; }
.case-tag { display: inline-block; background: var(--tint); border: 1px solid var(--green-light); color: var(--green); font-size: 11px; font-weight: 600; letter-spacing: .1em; padding: 4px 10px; margin-bottom: 12px; }
.case-body h3 { font-size: 18px; margin-bottom: 10px; }
.case-body dl { font-size: 13.5px; margin: 0; }
.case-body dt { font-weight: 600; color: var(--ink); margin-top: 10px; }
.case-body dd { margin: 2px 0 0; }

/* ---------- M11 cta band path selector ---------- */
.cta-row { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-bottom: 22px; }
.cta-band .btn-pill { font-size: 16px; padding: 16px 34px; }
.cta-link { color: #fff; text-decoration: underline; font-weight: 600; font-size: 15px; }
.cta-link:hover { color: #f3dcdd; }

/* ---------- (kept from previous iteration) M7b about + analyst recognition ---------- */
.about-band { display: flex; gap: 60px; align-items: flex-start; }
.about-band > div:first-child { flex: 1 1 58%; min-width: 0; }
.about-band h2 { font-size: 34px; margin-bottom: 16px; }
.about-band p { margin-bottom: 18px; }
.analyst-box { flex: 1 1 38%; background: #fff; border: 1px solid var(--line); padding: 32px 30px; }
.analyst-box h3 { font-size: 15px; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 20px; }
.analyst-logos { display: flex; gap: 30px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.analyst-logos img { height: 26px; width: auto; }
.analyst-box p { font-size: 14px; margin: 0; }
.analyst-box b { color: var(--ink); }

/* ---------- M10 resources entry bar ---------- */
.resources-bar { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 26px 0; }
.resources-bar .container { display: flex; align-items: center; justify-content: center; gap: 12px 36px; flex-wrap: wrap; font-size: 15px; }
.resources-bar b { color: var(--ink); }
.resources-bar a { color: var(--green); font-weight: 600; }
.resources-bar a:hover { text-decoration: underline; }

/* ---------- (legacy) M10 resources: FAQ + downloads ---------- */
.resource-cols { display: flex; gap: 60px; align-items: flex-start; }
.resource-cols > div { flex: 1 1 50%; min-width: 0; }
.resource-h3 { font-size: 22px; margin-bottom: 14px; }

/* ---------- M11 RFQ section ---------- */
.rfq { background: var(--gray-bg); }
.rfq .contact-form { background: #fff; border: 1px solid var(--line); padding: 36px 34px; }
.file-label { font-size: 14px; color: var(--ink); display: block; }
.file-label input { margin-top: 8px; font-size: 13px; display: block; }
.form-note { font-size: 13px; color: #8a8a8a; }

/* ---------- Tweak #7: unified secondary text layer + Win/Mac rendering consistency ----------
   Inter is a webfont so both platforms share the same source; antialiased evens out
   Mac's default heavier rendering weight; secondary text unified at 15px (section
   subtitles 16px) / --text-2 gray / line-height 1.65 — no more per-section variants */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 16px;
}
.sec-head .sec-sub { font-size: 17px; color: var(--text-2); max-width: 780px; margin: 0 auto; line-height: 1.65; }
.cards-4 p, .why-card p, .case-body dd,
.process-grid .step p, .post-card .post-excerpt,
.option-card li, .trust-note { color: var(--text-2); line-height: 1.65; }
.cards-4 p, .case-body dd, .post-card .post-excerpt, .option-card li { font-size: 16px; }
.why-card p { font-size: 16px; }
.process-grid .step p { font-size: 15.5px; }
.trust-note { font-size: 15px; }
.mega-col a { font-size: 15px; }
.tab-panel .tab-text p, .tab-panel .tab-text li { color: var(--text-2); }
.sq-body p { color: var(--text-2); }

/* ---------- Tweak #5: align homepage component type sizes to the template-native scale of products.html ----------
   Diagnosis: homepage components had been squeezed to 13-13.5px (eight coexisting sizes);
   the products page's 16px baseline plus two clear levels reads better */
.cards-4 h3 { font-size: 21px; }
.cards-4 p { font-size: 16px; }
.why-card h3 { font-size: 17px; }
.why-card p { font-size: 16px; }
.case-body h3 { font-size: 21px; }
.case-body dl { font-size: 16px; }
.process-grid .step h4 { font-size: 16.5px; }
.process-grid .step p { font-size: 15.5px; }
.option-card li { font-size: 16px; }
.option-card .best-for { font-size: 16px; }
.trust-note { font-size: 15px; }

/* ---------- Tweak #2: unified 6px radius (Direction C ceiling), sharp mechanical corners -> softer ---------- */
.card-media, .tab-media, .case-card, .case-media, .post-media,
.why-card, .option-card, .step, .sq-analyst, .analyst-box {
  border-radius: 6px;
  overflow: hidden;
}
.sq-media img, .split-media img { border-radius: 6px; }
.btn-green, .btn-quote, .cert-chip, .case-tag { border-radius: 6px; }
.form-grid input, .form-grid select, .form-grid textarea, .newsletter input { border-radius: 6px; }
.tab-btn { border-radius: 6px 6px 0 0; }

/* ---------- Tweak #3: subtle hover motion for page feedback ---------- */
.card-media img, .case-media img, .post-media img { transition: transform .35s ease; }
.card:hover .card-media img,
.case-card:hover .case-media img,
.post-card:hover .post-media img { transform: scale(1.04); }
.case-card { transition: transform .25s ease, box-shadow .25s ease; }
.case-card:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(10,34,53,.12); }
.option-card { transition: box-shadow .25s ease; }
.option-card:hover { box-shadow: 0 8px 20px rgba(10,34,53,.08); }
.tab-btn { transition: color .2s, background .2s, border-color .2s; }

/* ---------- Tweak #4: hero overlay flat fill -> elliptical vignette (dark over the text area, production-line light showing at the edges) ---------- */
.hero-bg::after {
  background: radial-gradient(ellipse 74% 66% at 50% 45%, rgba(6,18,32,.74), rgba(6,18,32,.42) 80%);
}

/* ---------- Tweak #6 (experiment): category cards use staged stock-style photos (cover crop, dropping the white-background contain/multiply) ---------- */
.cards-4 .card-media img {
  object-fit: cover;
  mix-blend-mode: normal;
  background: none;
}

/* ---------- homepage responsive ---------- */
@media (max-width: 1024px) {
  .cards-4 { grid-template-columns: repeat(2, 1fr); }
  .process-grid { grid-template-columns: repeat(3, 1fr); }
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .qual-grid { grid-template-columns: repeat(3, 1fr); }
  .case-grid { grid-template-columns: repeat(3, 1fr); }
  .sq-cols { gap: 36px; }
}
@media (max-width: 860px) {
  .site-header .btn-quote { margin-left: auto; margin-right: 10px; }
  .hero { height: auto; padding: 90px 0 56px; }
  .hero-stats .stat { padding: 0 20px; margin-bottom: 14px; }
  .resource-cols, .about-band, .sq-cols { flex-direction: column; }
  .analyst-box, .sq-media { width: 100%; flex-basis: auto; }
  .case-grid { grid-template-columns: 1fr; }
  .qual-grid { grid-template-columns: 1fr 1fr; }
  .hero h1 { font-size: 32px; }
  .mega-panel { position: static; display: block; box-shadow: none; border: 0; padding: 4px 0 10px; }
  .mega-cols { grid-template-columns: 1fr 1fr; gap: 16px; padding: 0 0 0 16px; }
}
@media (max-width: 560px) {
  .hero-stats .stat { border-right: 0; flex: 1 1 40%; }
  .site-header .container { gap: 12px; padding: 0 14px; }
  .btn-quote { padding: 10px 14px; font-size: 13px; }
}
@media (max-width: 560px) {
  .cards-4 { grid-template-columns: 1fr; }
  .process-grid { grid-template-columns: 1fr 1fr; }
  .why-grid, .qual-grid { grid-template-columns: 1fr; }
  .hero-cta-row .btn-pill { padding: 16px 34px; font-size: 16px; }
}

/* =========================================================
   Tweak #8: global font size +2 (Kevin's 2026-09-03 experiment; delete this whole block to roll back)
   ========================================================= */
body { font-size: 18px; }
.topbar { font-size: 15px; }
/* Kevin asked to enlarge the logo three times: 36->42->48->60; 48 was already the ceiling for the 80px header, so the nav bar is raised along with it */
:root { --header-h: 96px; }
.logo img { height: 60px; }
/* On mobile the logo width bursts the header (at 60px a 375 viewport overflows to 441), so step back down one level */
@media (max-width: 560px) {
  :root { --header-h: 76px; }
  .logo img { height: 40px; }
}
.main-nav a { font-size: 18px; font-weight: 600; }
/* Center the menu in the whitespace between the logo and the right-side tools (desktop) */
@media (min-width: 861px) {
  .main-nav { margin-left: auto; margin-right: auto; }
  .header-tools { margin-left: 0; }
}
.mega-col h4 { font-size: 15px; }
.mega-col a { font-size: 17px; }
.btn-quote { font-size: 14px; }
.btn-pill { font-size: 17px; }
.btn-green { font-size: 18px; }
.btn-green--sm { font-size: 16px; }
.link-more { font-size: 17px; }
.hero .hero-sub { font-size: 18px; }
.hero-link { font-size: 17px; }
.hero-stats b { font-size: 34px; }
.hero-stats span { font-size: 15px; }
.sec-head h2 { font-size: 34px; }
.sec-head .sec-sub { font-size: 19px; }
.why-card b { font-size: 34px; }
.qual-grid .why-card b { font-size: 28px; }
.why-card h3 { font-size: 19px; }
.why-card p { font-size: 18px; }
.cards-4 h3 { font-size: 23px; }
.cards-4 p { font-size: 18px; }
.option-card .eyebrow { font-size: 14px; }
.option-card h3 { font-size: 26px; }
.option-card .option-sub { font-size: 16px; }
.option-card li { font-size: 18px; }
.option-card .best-for { font-size: 18px; }
.tab-btn { font-size: 18px; }
.tab-panel .tab-text h3 { font-size: 24px; }
.sq-body h3 { font-size: 24px; }
.sq-analyst p { font-size: 15.5px; }
.case-tag { font-size: 13px; }
.case-body h3 { font-size: 23px; }
.case-body dl { font-size: 18px; }
.process-grid .step b { font-size: 28px; }
.process-grid .step h4 { font-size: 18px; }
.process-grid .step p { font-size: 17px; }
.step .step-time { font-size: 13px; }
.trust-note { font-size: 17px; }
.resources-bar .container { font-size: 17px; }
.resources-bar a { font-size: 17px; }
.cta-band h2 { font-size: 32px; }
.cta-band p { font-size: 19px; }
.cta-link { font-size: 17px; }
.post-card .post-date { font-size: 15px; }
.post-card h3 { font-size: 21px; }
.post-card .post-excerpt { font-size: 18px; }
.split .split-body h2 { font-size: 30px; }
.form-grid input, .form-grid select, .form-grid textarea { font-size: 17px; }
.site-footer { font-size: 16px; }
.footer-cols h4 { font-size: 18px; }
.footer-bottom { font-size: 15px; }
@media (min-width: 861px) {
  .hero h1 { font-size: 46px; }
}
@media (max-width: 860px) {
  .hero h1 { font-size: 34px; }
}
@media (max-width: 560px) {
  .sec-head h2 { font-size: 32px; }
  .page-title h1 { font-size: 32px; }
}

/* =========================================================
   Tweak #12: compress the Supplier left-column image pair to match the right-column text height (fluid alignment)
   ========================================================= */
.sq-cols { align-items: stretch; }
.sq-media { align-self: stretch; }
.sq-media img {
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  object-fit: cover;
  border-radius: 6px;
}
@media (max-width: 860px) {
  .sq-media img { flex: none; height: 240px; }
}

/* =========================================================
   Tweak #11: bottom-align the buttons of the Stock/Custom card pair (aligned even when line counts differ)
   ========================================================= */
.option-card { display: flex; flex-direction: column; }
.option-card .best-for { margin-top: auto; margin-bottom: 22px; }
.option-card .btn-green { align-self: flex-start; }

/* =========================================================
   Tweak #10: enlarge the Supplier certification area layout, remove the right column's bottom whitespace
   ========================================================= */
.sq-certs {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
  margin: 28px 0 24px;
}
.sq-certs img {
  width: 100%;
  height: 88px;
  object-fit: contain;
  background: #fff;
  border: 1px solid #e2e6e9;
  border-radius: 6px;
  padding: 14px 12px;
  box-sizing: border-box;
}
.sq-analyst { padding: 24px 28px; gap: 28px; margin-bottom: 26px; }
.sq-analyst img { height: 36px; }
.sq-analyst p { font-size: 16.5px; }
.sq-links { gap: 34px; }
@media (max-width: 1024px) {
  .sq-certs { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .sq-certs { grid-template-columns: repeat(2, 1fr); }
  .sq-certs img { height: 74px; }
}

/* =========================================================
   Tweak #9: qualification number bar, outlined boxes -> the hero's hairline treatment (Kevin prefers line-based design)
   ========================================================= */
.qual-grid { gap: 0; border-top: 1px solid #dfe4e9; padding-top: 30px; }
.qual-grid .why-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  border-left: 1px solid #dfe4e9;
  box-shadow: none;
  padding: 4px 32px;
}
.qual-grid .why-card:first-child { border-left: 0; padding-left: 0; }
.qual-grid .why-card b { font-size: 32px; }
@media (max-width: 1024px) {
  .qual-grid .why-card { padding: 4px 22px; margin-bottom: 22px; }
  .qual-grid .why-card:nth-child(4) { border-left: 0; padding-left: 0; }
}
@media (max-width: 860px) {
  .qual-grid .why-card:nth-child(odd) { border-left: 0; padding-left: 0; }
  .qual-grid .why-card:nth-child(4) { border-left: 1px solid #dfe4e9; padding-left: 22px; }
}
@media (max-width: 560px) {
  .qual-grid .why-card { border-left: 0; padding: 4px 0; margin-bottom: 18px; }
  .qual-grid .why-card:nth-child(4) { border-left: 0; padding-left: 0; }
}

/* =========================================================
   About page (2026-09-03): inner-page hero + hairline timeline + constrained-width certification wall
   ========================================================= */
.hero--sub { height: 620px; }
@media (max-width: 860px) {
  .hero--sub { height: auto; }
}
/* Center-axis alternating timeline v2 (redone 2026-09-03 after Kevin found the left-line list too plain):
   central hairline spine + alternating left/right + large Georgia years + blue dot nodes (white ring covers the spine) */
.tl2 { position: relative; max-width: 1120px; margin: 0 auto; }
.tl2::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: #dfe4e9;
}
.tl2-item { position: relative; width: 50%; padding: 0 52px 48px 0; text-align: right; }
.tl2-item:nth-child(even) { margin-left: 50%; padding: 0 0 48px 52px; text-align: left; }
.tl2-item:last-child { padding-bottom: 8px; }
.tl2-item::after {
  content: "";
  position: absolute;
  top: 14px;
  right: -5px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 4px #fff;
}
.tl2-item:nth-child(even)::after { right: auto; left: -4px; }
.tl2-year {
  display: block;
  font-family: var(--font-head);
  font-size: 40px;
  line-height: 1;
  color: var(--green);
  margin-bottom: 10px;
}
.tl2-item h3 { font-family: var(--font); font-size: 20px; font-weight: 700; margin-bottom: 6px; }
.tl2-item p { color: var(--text-2); font-size: 16.5px; line-height: 1.6; margin: 0; }
@media (max-width: 860px) {
  .tl2::before { left: 4px; }
  .tl2-item, .tl2-item:nth-child(even) { width: 100%; margin-left: 0; padding: 0 0 36px 32px; text-align: left; }
  .tl2-item::after, .tl2-item:nth-child(even)::after { left: 0; right: auto; top: 12px; }
  .tl2-year { font-size: 32px; }
}
.cert-wall { max-width: 1160px; margin: 0 auto; }
.cert-wall .sq-certs { margin: 0 0 28px; }
.cert-wall .sq-analyst { margin-bottom: 0; }

/* ---------- About: manufacturing-bases row (three-base data from the original site, hairline language) ---------- */
.fb-list { border-top: 1px solid #dfe4e9; }
.fb-row {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 26px 56px;
  padding: 40px 0;
  border-bottom: 1px solid #dfe4e9;
}
.fb-row:last-child { border-bottom: 0; padding-bottom: 8px; }
.fb-loc {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--green);
  margin-bottom: 6px;
}
.fb-head h3 { font-size: 26px; margin-bottom: 4px; }
.fb-tag { font-size: 15.5px; color: var(--text-2); margin-bottom: 16px; }
.fb-head img { width: 100%; height: 190px; object-fit: cover; border-radius: 6px; }
.fb-body > p { color: var(--text-2); line-height: 1.65; max-width: 900px; }
.fb-stats { display: flex; flex-wrap: wrap; margin-top: 22px; }
.fb-stats .stat { padding: 0 32px; border-left: 1px solid #dfe4e9; text-align: left; }
.fb-stats .stat:first-child { border-left: 0; padding-left: 0; }
.fb-stats .stat b { display: block; font-size: 30px; color: var(--green); font-weight: 600; line-height: 1.3; }
.fb-stats .stat span { font-size: 15px; color: var(--text-2); }

/* ---------- About: certification document evidence (certificate / report scans) ---------- */
.cert-docs { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; margin-bottom: 28px; }
.cert-docs figure { background: #fff; border: 1px solid #e2e6e9; border-radius: 6px; padding: 14px; width: 218px; text-align: center; }
.cert-docs img { width: 100%; border: 1px solid #eef1f4; }
.cert-docs figcaption { font-size: 14px; color: var(--text-2); margin-top: 10px; line-height: 1.45; }

/* ---------- About: certification wall, 9 badges (flex centered with wrapping, last row centered) ---------- */
.cert-wall .sq-certs { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.cert-wall .sq-certs img { width: calc((100% - 70px) / 6); }
@media (max-width: 1024px) {
  .cert-wall .sq-certs img { width: calc((100% - 28px) / 3); }
}
@media (max-width: 560px) {
  .cert-wall .sq-certs img { width: calc((100% - 14px) / 2); }
}

/* ---------- About: factory-visit invitation at the end of the bases block ---------- */
.fb-visit { text-align: center; margin-top: 30px; }

/* ---------- About: sustainability 4-cell hairline band ---------- */
.qual-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) { .qual-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .qual-grid--4 { grid-template-columns: 1fr; } }

/* Two production sites, so the homepage card row is a pair. Same card, half the columns. */
.qual-grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 560px) { .qual-grid--2 { grid-template-columns: 1fr; } }

@media (max-width: 1024px) {
  .fb-row { grid-template-columns: 300px 1fr; gap: 20px 36px; }
}
@media (max-width: 860px) {
  .fb-row { grid-template-columns: 1fr; }
  .fb-stats .stat { padding: 0 22px; margin-bottom: 10px; }
}
@media (max-width: 560px) {
  .fb-stats .stat { flex: 1 1 40%; border-left: 0; padding: 0 12px 0 0; }
  .fb-head img { height: 170px; }
}

/* =========================================================
   Contact page: branching inquiry form (2026-09-03)
   three-way path selector + grouped fields + 24h promise + address card
   ========================================================= */
/* Scoped to this page only: other inner pages keep the uppercase page-title */
.pt-contact .pt-sub { max-width: 760px; margin: 0 auto; line-height: 1.6; }
.pt-contact h1 { text-transform: none; }   /* Georgia display heading keeps normal case, consistent with the hero recipe */

.rfq .contact-form h2 { font-size: 28px; margin-bottom: 8px; }
.form-lead { font-size: 17px; color: var(--text-2); line-height: 1.6; margin-bottom: 26px; }

.path-selector { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 22px; }
.path-btn {
  background: #fff;
  border: 1px solid #dfe4e9;
  border-radius: 6px;
  padding: 15px 18px 13px;
  text-align: left;
  cursor: pointer;
  font-family: var(--font);
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.path-btn b { display: block; font-size: 16.5px; font-weight: 700; color: var(--ink); margin-bottom: 2px; }
.path-btn span { font-size: 14px; color: var(--text-2); line-height: 1.4; display: block; }
.path-btn:hover { border-color: var(--green); }
.path-btn.is-active {
  border-color: var(--green);
  background: #f0f6fc;
  box-shadow: inset 0 0 0 1px var(--green);
}
.path-btn.is-active b { color: var(--green); }

.path-fields { display: grid; gap: 16px; }
.path-fields[hidden] { display: none; }
.form-foot { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }

.form-success { background: #f0f6fc; border: 1px solid #cfe0f0; border-radius: 6px; padding: 28px 30px; }
.form-success h3 { font-size: 22px; margin-bottom: 14px; }
.form-success ol { list-style: decimal; margin: 0 0 18px 20px; }
.form-success li { margin-bottom: 10px; font-size: 17px; color: var(--text-2); line-height: 1.6; }
.form-success li b { color: var(--ink); }
.form-success a { color: var(--green); text-decoration: underline; }
.form-success .link-more { text-decoration: none; }

/* 24h promise: hairline + large number (same language as the hero number band) */
.promise-box {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  border-top: 1px solid #dfe4e9;
  border-bottom: 1px solid #dfe4e9;
  padding: 24px 0;
  margin-bottom: 30px;
}
.promise-box > b { font-size: 44px; font-weight: 600; color: var(--green); line-height: 1; flex: none; }
.promise-box h3 { font-size: 20px; margin-bottom: 6px; }
.promise-box p { font-size: 16px; color: var(--text-2); line-height: 1.6; margin: 0; }

.contact-info h3 { margin-top: 0; }
.contact-info .addr-head { margin-top: 30px; }
.contact-info p { font-size: 16.5px; }
.contact-info p a { color: var(--green); }
.contact-info p a:hover { text-decoration: underline; }
.addr-card { background: #fff; border: 1px solid #e2e6e9; border-radius: 6px; padding: 16px 20px; margin-bottom: 12px; }
.addr-card span { display: block; font-size: 12px; font-weight: 700; letter-spacing: .12em; color: var(--green); margin-bottom: 4px; }
.addr-card p { margin: 0; font-size: 16px; color: var(--text-2); line-height: 1.6; }

@media (max-width: 860px) {
  .path-selector { grid-template-columns: 1fr; }
}

/* =========================================================
   Custom Solutions page (2026-09-03): stage hairlines + decoration list + sign-off list
   ========================================================= */
/* Design sketch: white-background sketch image uncropped, framed card */
.sq-media--sketch img {
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 24px 20px;
  box-sizing: border-box;
}
.cs-intro { margin-bottom: 56px; }

/* 4-stage hairlines (same line language as the hero number area) */
.stage-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid #dfe4e9;
  padding-top: 32px;
}
.stage { border-left: 1px solid #dfe4e9; padding: 4px 32px; }
.stage:first-child { border-left: 0; padding-left: 0; }
.stage .step-label {
  font-family: var(--font);
  font-size: 13px;
  letter-spacing: .12em;
  color: var(--green);
  font-weight: 700;
  margin-bottom: 12px;
}
.stage .stage-cost {
  display: block;
  font-size: 30px;
  color: var(--green);
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 2px;
}
.stage .stage-time { font-size: 15px; color: var(--text-2); margin-bottom: 14px; }
.stage h3 { font-size: 20px; margin-bottom: 8px; }
.stage p { font-size: 16.5px; color: var(--text-2); line-height: 1.65; }
.stage p.step-label { color: var(--green); }

/* Decoration process list: hairline rows */
.deco-rows { border-top: 1px solid #dfe4e9; margin-bottom: 26px; }
.deco-row { display: flex; gap: 26px; padding: 17px 0; border-bottom: 1px solid #dfe4e9; align-items: baseline; }
.deco-row h4 { flex: 0 0 250px; font-size: 18.5px; margin: 0; }
.deco-row p { flex: 1; font-size: 16.5px; color: var(--text-2); margin: 0; line-height: 1.6; }

/* Sign-off checkpoint list: large numbers + hairlines */
.check-list { border-top: 1px solid #dfe4e9; margin-bottom: 26px; }
.check-item { display: flex; gap: 26px; padding: 22px 0; border-bottom: 1px solid #dfe4e9; }
.check-item > b {
  font-family: var(--font);
  font-size: 32px;
  font-weight: 600;
  color: var(--green);
  line-height: 1.1;
  flex: 0 0 52px;
}
.check-item h4 { font-size: 19px; margin-bottom: 6px; }
.check-item p { font-size: 16.5px; color: var(--text-2); line-height: 1.65; margin: 0; }

/* FAQ width constraint */
.faq-wrap { max-width: 940px; margin: 0 auto; }
.faq-wrap summary { font-size: 19px; }
.faq-wrap details p { font-size: 17px; color: var(--text-2); line-height: 1.65; max-width: 860px; }

/* Responsive */
@media (max-width: 1024px) {
  .stage-grid { grid-template-columns: 1fr 1fr; }
  .stage { padding: 4px 24px; margin-bottom: 24px; }
  .stage:nth-child(odd) { border-left: 0; padding-left: 0; }
}
@media (max-width: 860px) {
  .deco-row { flex-direction: column; gap: 4px; }
  .deco-row h4 { flex-basis: auto; }
}
@media (max-width: 560px) {
  .stage-grid { grid-template-columns: 1fr; }
  .stage { border-left: 0; padding: 4px 0; margin-bottom: 20px; }
  .check-item { gap: 18px; }
}

/* Site-wide fix: Tweak #8's unconditional .btn-quote { font-size:14px } came later in source order
   and overrode the 13px rule inside the 560 media query (appended-block override gotcha), causing a 4px site-wide overflow at 375 viewport */
@media (max-width: 560px) {
  .btn-quote { font-size: 13px; padding: 10px 12px; }
}

/* =========================================================
   Custom Solutions page expansion (2026-09-03, round 2): at-a-glance table + customization dimensions 3x2
   ========================================================= */
.spec-wrap { overflow-x: auto; margin-top: 44px; }
.spec-table { width: 100%; border-collapse: collapse; }
.spec-table th {
  font-family: var(--font);
  font-size: 14px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-2);
  font-weight: 700;
  text-align: left;
  padding: 12px 18px;
  border-bottom: 1px solid #c9d2da;
}
.spec-table td {
  padding: 16px 18px;
  border-bottom: 1px solid #dfe4e9;
  font-size: 17px;
  color: var(--text-2);
  line-height: 1.55;
  vertical-align: top;
}
.spec-table td:first-child { color: var(--ink); font-weight: 600; }
.spec-table td.num { color: var(--green); font-weight: 600; white-space: nowrap; }
.spec-table th:first-child, .spec-table td:first-child { padding-left: 0; }

/* Customization dimensions 3x2 hairline grid */
.dims-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid #dfe4e9;
  padding-top: 30px;
}
.dim { border-left: 1px solid #dfe4e9; padding: 4px 32px 28px; }
.dim:nth-child(3n+1) { border-left: 0; padding-left: 0; }
.dim:nth-child(n+4) { border-top: 1px solid #dfe4e9; padding-top: 26px; }
.dim h3 { font-size: 20px; margin-bottom: 8px; }
.dim p { font-size: 16.5px; color: var(--text-2); line-height: 1.65; margin: 0; }
.dim a { color: var(--green); font-weight: 600; }
.dim a:hover { text-decoration: underline; }
@media (max-width: 1024px) {
  .dims-grid { grid-template-columns: 1fr 1fr; }
  .dim { padding: 4px 22px 22px; }
  .dim:nth-child(3n+1) { border-left: 1px solid #dfe4e9; padding-left: 22px; }
  .dim:nth-child(odd) { border-left: 0; padding-left: 0; }
  .dim:nth-child(n+3) { border-top: 1px solid #dfe4e9; padding-top: 22px; }
}
@media (max-width: 560px) {
  .dims-grid { grid-template-columns: 1fr; }
  .dim, .dim:nth-child(3n+1), .dim:nth-child(odd) { border-left: 0; padding: 16px 0; }
  .dim:nth-child(n+2) { border-top: 1px solid #dfe4e9; }
  .dim:first-child { padding-top: 4px; }
}

/* Price-anchoring footnote under the Custom Solutions at-a-glance table */
.spec-note { margin-top: 18px; font-size: 16px; color: var(--text-2); line-height: 1.6; }

/* Custom Solutions conversion layer (2026-09-03, round 3, modeled on the eleflooring OEM/ODM page):
   "what you get" CTA checklist + path quick-reference table heading + repeat-order consistency note */
.cta-list {
  list-style: none;
  margin: 0 auto 30px;
  padding: 0;
  max-width: 760px;
  text-align: left;
  display: inline-block;
}
.cta-list li {
  color: #eaf2fb;
  font-size: 17px;
  line-height: 1.6;
  padding: 7px 0 7px 30px;
  position: relative;
  border-bottom: 1px solid rgba(255,255,255,.18);
}
.cta-list li:last-child { border-bottom: 0; }
.cta-list li::before { content: "✓"; position: absolute; left: 2px; color: #fff; font-weight: 700; }
.cta-band { text-align: center; }
.cta-contact { margin-top: 26px; font-size: 16px; color: #cfe0f0; }
.route-title { text-align: center; font-size: 24px; margin: 56px 0 6px; }
.reorder-note {
  border-top: 1px solid #dfe4e9;
  padding-top: 18px;
  margin-bottom: 26px;
  font-size: 16.5px;
  color: var(--text-2);
  line-height: 1.65;
}

/* Custom Solutions customization-dimension images (2026-09-03): 4:3 image added inside each hairline cell,
   reusing the site-wide 6px radius + hover scale 1.04 */
.dim-media {
  border-radius: 6px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  margin-bottom: 16px;
  background: var(--tint);
}
.dim-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}
.dim:hover .dim-media img { transform: scale(1.04); }
/* With images present, tighten the top padding and leave breathing room between image and hairline */
.dim { padding-top: 0; }
.dim:nth-child(n+4) { padding-top: 26px; }

/* ---- Contact form: honeypot and the failure message (see src/pages/api/rfq.ts) ---- */
/* Taken out of the page without display:none or hidden -- some automated submitters skip
   those, and a real visitor must never reach it: it is off-screen and out of the tab order. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form-error {
  margin: 0;
  padding: 12px 16px;
  border: 1px solid #e4c2c2;
  border-left: 3px solid #b3261e;
  border-radius: 6px;
  background: #fcf4f4;
  color: #7c2019;
  font-size: 15px;
  line-height: 1.55;
}
.form-foot button[disabled] { opacity: .6; cursor: progress; }

/* ---- Cookie consent bar (src/layouts/Base.astro). Hidden until the boot script decides:
       shown only when no choice is stored, and reopened from the footer button. ---- */
.cookie-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  background: #fff;
  border-top: 1px solid var(--line);
  box-shadow: 0 -6px 24px rgba(10, 34, 53, .10);
}
.cookie-bar-in {
  max-width: var(--container);
  margin: 0 auto;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.cookie-bar b { display: block; font-size: 16px; margin-bottom: 4px; color: var(--ink); }
.cookie-bar p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--text-2); max-width: 780px; }
.cookie-bar p a { color: var(--green); text-decoration: underline; }
/* Declining has to be as easy as accepting, so the two buttons match in size and weight. */
.cookie-bar-actions { display: flex; gap: 10px; margin-left: auto; flex-shrink: 0; }
.cookie-bar-actions .btn { white-space: nowrap; }
.footer-link-btn {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
}
@media (max-width: 760px) {
  .cookie-bar-in { padding: 16px; gap: 14px; }
  .cookie-bar-actions { margin-left: 0; width: 100%; }
  .cookie-bar-actions .btn { flex: 1 1 0; }
}

/* Test reports on file — the resources certificate wall. The table is wide, so it scrolls inside
   .spec-wrap on a desktop and stacks into labelled rows on a phone. */
.rep-block { margin-top: 44px; }
.rep-block h3 { font-size: 22px; margin: 0 0 8px; color: var(--ink); }
.rep-sub { max-width: 760px; margin: 0; color: var(--body); line-height: 1.6; }
.rep-block .spec-wrap { margin-top: 22px; }
.rep-table { min-width: 880px; }
.rep-table td { vertical-align: top; }
.rep-no { display: block; font-variant-numeric: tabular-nums; }
.rep-entity { display: block; font-weight: 400; font-size: 13px; color: var(--body); margin-top: 3px; }
.rep-note { max-width: 760px; margin: 18px 0 0; font-size: 14px; color: var(--body); line-height: 1.6; }
@media (max-width: 640px) {
  .rep-block .spec-wrap { overflow-x: visible; }
  .rep-table { min-width: 0; }
  .rep-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .rep-table tr { display: block; padding: 14px 0; border-bottom: 1px solid var(--line); }
  .rep-table td { display: block; padding: 2px 0; border: 0; }
  .rep-table td[data-label]::before {
    content: attr(data-label) ": ";
    font-weight: 600;
    color: var(--ink);
  }
}

/* ---------- Text expansion (multilingual) ----------
   Spanish and Portuguese run 20-25% longer than English, German longer still, and Russian sits
   between them — the same sentence, the same box. Three places broke first, and all three are
   fixed here rather than by shortening the translation, because the next ten languages will
   break them again and a shortened translation is a worse translation.

   Everything below is scoped to :not([lang="en"]) where it changes a measurement, so the English
   pages render byte-identically. <html lang> is set per locale in Base.astro, which is also what
   makes hyphens: auto pick the right dictionary. */

/* The nav has to stay on one row at 1280 (DESIGN-SYSTEM section 0). "Запросить расчёт" and
   "Sonderlösungen" are wider than "Get a quote" and "Custom Solutions", and the row overflowed by
   about 30px. Tightening the gaps in the narrow-desktop band buys ~60px, which covers German and
   Russian with room left for French and Portuguese. */
@media (min-width: 861px) and (max-width: 1340px) {
  html:not([lang="en"]) .main-nav { gap: 14px; }
  html:not([lang="en"]) .site-header .container { gap: 14px; }
  html:not([lang="en"]) .btn-quote { padding: 11px 16px; }
}

/* A German compound noun is one unbreakable word: Sonderglasflaschen at 38px hangs off a 375
   viewport in a heading, and Lebensmittelkontakt-Unterlagen does the same inside a list item in
   a narrow column. Headings were the first to break, body text the second, so the rule covers
   both rather than waiting for the third.

   overflow-wrap only acts when a word would otherwise overflow, so it changes nothing anywhere
   it is not needed — including English. hyphens: auto is scoped to non-English because it needs
   a dictionary and <html lang> to pick one; English copy here is short-worded and set ragged
   right, and hyphenating it would be a visible change for no gain. */
h1, h2, h3, h4, p, li, td, th, dd, dt, figcaption, .badge, .why-card b { overflow-wrap: break-word; }
html:not([lang="en"]) h1,
html:not([lang="en"]) h2,
html:not([lang="en"]) h3,
html:not([lang="en"]) p,
html:not([lang="en"]) li,
html:not([lang="en"]) td { hyphens: auto; }

/* On a phone the three consent buttons share one row and are set nowrap, so a long label
   ("Cookie-Einstellungen") cannot shrink and pushes the bar past the viewport. Let the labels
   wrap instead; the buttons stay equal width, which is the point of the row. */
@media (max-width: 560px) {
  .cookie-bar-actions .btn { white-space: normal; }
}