/* ==========================================================================
   Eco Foam Solutions
   Layout tokens follow the client site playbook. Brand tokens below are
   PLACEHOLDERS pending the Figma direction. Swap the values, not the names.
   ========================================================================== */

:root {
  /* --------------------------------------------------------------------
     Brand palette, supplied 20 August 2026. Every value below is from the
     supplied swatches except the two noted as derived.

     Contrast measured against white:
       #1E1E1E  18.9:1  text, any size
       #486567   6.2:1  body copy, passes AA
       #20862C   4.5:1  passes AA for text, and white on it also 4.5:1
       #A3B2B3   2.2:1  FAILS as text. Borders and decoration only.
     -------------------------------------------------------------------- */
  --brand:        #20862C;  /* green, primary action and accent */
  --brand-dark:   #196A22;  /* DERIVED hover state, not a brand color */
  --deep:         #486567;  /* slate, secondary dark surfaces */
  --ink:          #1E1E1E;  /* headings and primary text */
  --body-grey:    #486567;  /* body copy */
  --muted:        #A3B2B3;  /* decorative only, never text on white */
  --line:         #D1D9D9;  /* borders */
  --rule-strong:  #A3B2B3;  /* dashed outlines, arrow borders */
  --line-soft:    #E8ECEC;  /* subtle rules, alternating rows */
  --panel:        #F3F5F5;  /* light section background */
  --panel-alt:    #E8ECEC;  /* deeper panel */
  --on-dark:      #E8ECEC;  /* body text on dark bands, 5.2:1 on ink */
  --white:        #FFFFFF;
  --accent:       #8A3B12;  /* Rust. Secondary brand accent, client selected
                               24 Aug 2026. 7.7:1 on white, passes AA. */
  --staging:      #8A3B12;  /* Same value as --accent today, kept as a separate
                               token on purpose: staging chrome and brand accent
                               are different jobs, and changing one should not
                               silently restyle the other. */

  /* Type. Montserrat matches the house style and the widget markup. */
  --font-head: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Layout. These are fixed by the playbook. Do not override per section. */
  --container:   1400px;
  --gutter:      clamp(16px, 2%, 40px);  /* 2% of viewport, floored for mobile */
  --measure:     68ch;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.62;
  color: var(--body-grey);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 800;
  color: var(--ink);
  line-height: 1.12;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; }

a { color: var(--brand); text-underline-offset: 2px; }
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
}

img { max-width: 100%; height: auto; }

/* --------------------------------------------------------------------------
   Container. Every section uses this with no per-section max-width override.
   Readability comes from inner grids and ch caps on text, never from
   shrinking the container. Overriding it makes the page step in and out.
   -------------------------------------------------------------------------- */
.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: clamp(48px, 6vw, 88px); }
.section__title { font-size: clamp(26px, 3.4vw, 38px); letter-spacing: -0.02em; margin-bottom: 20px; }

/* Prose gets a measure cap, the container does not. */
.prose { max-width: var(--measure); }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: clamp(22px, 2.6vw, 30px); margin-top: 1.8em; }
.prose h3 { font-size: 19px; margin-top: 1.5em; }

/* Content images. Square sources at full column width otherwise render
   absurdly tall. Always set width and height attributes in the markup. */
.prose img,
.post__hero-img {
  max-height: 55vh;
  width: 100%;
  object-fit: cover;
  display: block;
}

.screen-reader-text {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--white);
  padding: 12px 18px;
  z-index: 999;
}
.skip-link:focus { left: 8px; top: 8px; }

.staging-flag {
  background: var(--staging);
  color: var(--white);
  font: 600 13px/1.4 var(--font-body);
  text-align: center;
  padding: 8px 16px;
  letter-spacing: 0.02em;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  padding: 15px 26px;
  border: 2px solid transparent;
  border-radius: 2px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.btn--primary { background: var(--brand); color: var(--white); }
.btn--primary:hover { background: var(--brand-dark); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--ink); }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-header { border-bottom: 1px solid var(--line); background: var(--white); }
.site-header__inner {
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 84px;
}
.site-header__brand { text-decoration: none; display: flex; align-items: center; }

/* WordPress emits the custom logo at its natural size, 2000x791 here, so it
   has to be constrained explicitly. Scoped to .site-header rather than to a
   wrapper: the logo link is a direct child of .site-header__inner, because
   the_custom_logo() brings its own anchor and cannot be nested inside one. */
.site-header .custom-logo-link {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  line-height: 0;
  text-decoration: none;
}
.site-header img.custom-logo {
  display: block;
  width: auto;
  height: auto;
  max-width: 220px;
  max-height: 44px;
  object-fit: contain;
}
.site-header__wordmark {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 20px;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.site-nav { margin-inline-start: auto; }
.site-nav__list {
  display: flex;
  gap: 26px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav__list a {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
  text-decoration: none;
}
.site-nav__list a:hover { color: var(--brand); }
.site-header__actions { display: flex; align-items: center; gap: 16px; }
.site-header__phone {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.site-header__toggle { display: none; }

/* --------------------------------------------------------------------------
   Trust strip
   -------------------------------------------------------------------------- */
.trust-strip { background: var(--panel); border-block: 1px solid var(--line); }
.trust-strip__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 24px;
  padding-block: 28px;
  justify-items: center;
}
/*
 * Centred inside each cell. The grid was already splitting into equal thirds,
 * but the items were left aligned within them, so every block hugged the left
 * edge of its third and the trailing space in the last cell read as a gap on
 * the right. Equal columns, centred content, symmetric strip.
 */
.trust-strip__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  text-align: center;
}
.trust-strip__stat {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 30px;
  color: var(--brand);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.trust-strip__label { font-size: 14.5px; }
/* Counting figures change width as they run, which makes the whole item shift.
   Tabular numerals hold the box steady. */
.trust-strip__stat[data-count-to] { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.faq__list { display: flex; flex-direction: column; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.faq__item { background: var(--white); }
.faq__q {
  cursor: pointer;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 16.5px;
  color: var(--ink);
  padding: 18px 22px;
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after { content: "+"; float: right; color: var(--brand); font-size: 20px; line-height: 1; }
.faq__item[open] .faq__q::after { content: "\2013"; }
.faq__a { padding: 0 22px 20px; max-width: var(--measure); }

/* --------------------------------------------------------------------------
   Spec table. Wide content scrolls in its own container so the page body
   never scrolls sideways.
   -------------------------------------------------------------------------- */
.spec__scroller { overflow-x: auto; border: 1px solid var(--line); }
.spec__table { border-collapse: collapse; width: 100%; min-width: 460px; font-variant-numeric: tabular-nums; }
.spec__caption {
  text-align: left;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--body-grey);
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}
.spec__table th, .spec__table td { text-align: left; padding: 12px 18px; border-bottom: 1px solid var(--line); font-size: 15px; }
.spec__table th { font-family: var(--font-head); color: var(--ink); font-weight: 700; width: 45%; }
.spec__table tr:last-child th, .spec__table tr:last-child td { border-bottom: none; }
.spec__unconfirmed {
  color: var(--body-grey);
  font-weight: 500;
  font-style: italic;
}

/* --------------------------------------------------------------------------
   Final CTA
   -------------------------------------------------------------------------- */
.final-cta { background: var(--ink); }
.final-cta__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}
.final-cta__title { color: var(--white); font-size: clamp(24px, 3vw, 34px); letter-spacing: -0.02em; }
.final-cta__body { color: var(--on-dark); max-width: 52ch; margin-top: 10px; }
.final-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.final-cta .btn--ghost { color: var(--white); border-color: rgba(255,255,255,.35); }
.final-cta .btn--ghost:hover { border-color: var(--white); }

/* --------------------------------------------------------------------------
   Contact form
   -------------------------------------------------------------------------- */
.contact-form__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.contact-form__text { max-width: 46ch; }

/* --------------------------------------------------------------------------
   Cards, page furniture
   -------------------------------------------------------------------------- */
.page__header, .post__header { padding-block: clamp(36px, 5vw, 64px) 0; }
.page__title, .post__title { font-size: clamp(30px, 4.6vw, 52px); letter-spacing: -0.03em; }
.page__body, .post__body { padding-block: 28px clamp(48px, 6vw, 80px); }
.post__meta { margin-top: 12px; font-size: 14.5px; }
.post__hero { padding-top: 28px; }

.archive { padding-block: clamp(36px, 5vw, 64px); }
.archive__title { font-size: clamp(28px, 4vw, 44px); letter-spacing: -0.03em; margin-bottom: 32px; }
.archive__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 32px; }
.card__link { text-decoration: none; display: block; }
.card__img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.card__title { font-size: 19px; margin-top: 14px; }
.card__excerpt { margin-top: 8px; font-size: 15px; }

.error-404 { padding-block: clamp(56px, 8vw, 110px); max-width: var(--measure); }
.error-404 h1 { font-size: clamp(30px, 4.4vw, 48px); letter-spacing: -0.03em; margin-bottom: 16px; }
.error-404 p { margin-bottom: 20px; }

/* --------------------------------------------------------------------------
   Breakpoints, per the playbook: 1140, 960, 768, 560, 480
   -------------------------------------------------------------------------- */
@media (max-width: 1140px) {
  .site-header__toggle {
    display: inline-flex;
    order: 3;
    margin-inline-start: auto;
    width: 44px; height: 44px;
    align-items: center; justify-content: center;
    background: transparent; border: 1px solid var(--line); border-radius: 2px;
  }
  .site-header__toggle-bar { display: block; width: 20px; height: 2px; background: var(--ink); box-shadow: 0 -6px 0 var(--ink), 0 6px 0 var(--ink); }
  .site-nav { display: none; order: 4; flex-basis: 100%; margin-inline-start: 0; }
  .site-nav.is-open { display: block; padding-bottom: 20px; }
  .site-nav__list { flex-direction: column; gap: 4px; }
  .site-nav__list a { display: block; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .site-header__inner { flex-wrap: wrap; }
  .site-header__actions { order: 2; }
}

@media (max-width: 960px) {
  .contact-form__inner { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 768px) {
  :root { --gutter: 20px; }
  body { font-size: 16px; }
  .final-cta__inner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 560px) {
  .site-header img.custom-logo { max-height: 34px; max-width: 170px; }
  .site-header__phone { display: none; }
  .trust-strip__inner { grid-template-columns: 1fr; gap: 18px; }
}

@media (max-width: 480px) {
  .btn { width: 100%; }
  .final-cta__actions { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ==========================================================================
   Foam grade selector, adapted from the BW Sauna models widget.
   Colors come from the tokens at the top of this file so the Figma brand
   direction flows through without editing the template.
   ========================================================================== */

.grades__intro { max-width: 60ch; margin-bottom: 28px; }

.grades__bar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}

.grade-card {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  text-align: center;
  padding: 20px;
  background: var(--white);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.grade-card:hover {
  border-color: var(--brand);
  box-shadow: 0 10px 26px rgba(0,0,0,.08);
  transform: translateY(-2px);
}
.grade-card:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }

.grade-card__tier {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 8px;
}
.grade-card__name {
  display: block;
  font-family: var(--font-head);
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.1;
  margin-bottom: 5px;
}
.grade-card__meta { display: block; font-size: 13.5px; color: var(--body-grey); margin-bottom: 14px; }

.grade-card__thumb {
  display: block;
  margin-bottom: 14px;
  background: var(--white);
  border: 1px solid var(--line-soft);
  padding: 10px;
  line-height: 0;
}
.grade-card__img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

.grade-card__foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}
.grade-card__psi {
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.grade-card__psi small {
  display: block;
  font-family: var(--font-body);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--body-grey);
  margin-bottom: 3px;
}
.grade-card__open { font-size: 12px; font-weight: 700; color: var(--brand); white-space: nowrap; }
.grade-card__open::after { content: " \2192"; }

/* ---- modal ---- */
.grade-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  background: rgba(30,30,30,.55);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .25s ease, visibility .25s ease;
}
.grade-modal.is-open { opacity: 1; visibility: visible; pointer-events: auto; }

.grade-modal__card {
  position: relative;
  width: 100%;
  max-width: 1120px;
  max-height: 88vh;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  background: var(--white);
  border-radius: 6px;
  box-shadow: 0 36px 80px rgba(0,0,0,.22);
  transform: translateY(10px) scale(.985);
  transition: transform .28s cubic-bezier(.2,.8,.25,1);
}

/* Media pane. The board art is a wide landscape shot on white, so it is
   contained rather than cropped, centered on a panel tint. */
.grade-modal__media {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  background: var(--white);
  border-right: 1px solid var(--line);
  min-height: 0;
}
.grade-modal__img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 60vh;
  object-fit: contain;
}
.grade-modal.is-open .grade-modal__card { transform: none; }

.grade-modal__close {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--white);
  cursor: pointer;
  color: var(--ink);
}
.grade-modal__close svg {
  width: 13px; height: 13px;
  stroke: currentColor; fill: none;
  stroke-width: 1.8; stroke-linecap: round;
  pointer-events: none;
}
.grade-modal__close:hover { border-color: var(--ink); }
.grade-modal__close:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }

.grade-modal__body { padding: 40px 40px 44px; overflow-y: auto; max-height: 88vh; min-height: 0; }
.grade-modal__eyebrow {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 9px;
}
.grade-modal__title {
  font-size: clamp(28px, 4vw, 38px);
  letter-spacing: -.025em;
  margin-bottom: 14px;
}
.grade-modal__lede { font-size: 15.5px; line-height: 1.6; margin-bottom: 26px; max-width: 58ch; }

.grades__sec-label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 14px;
}
.grades__sec-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--line), rgba(0,0,0,0));
}

.grade-modal__body .spec__scroller { margin-bottom: 26px; }

.grades__note {
  font-size: 12px;
  line-height: 1.55;
  color: var(--body-grey);
  margin: -14px 0 26px;
  max-width: 58ch;
}

.grades__list { margin: 0 0 28px; padding: 0; list-style: none; }
.grades__list li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 9px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--body-grey);
}
.grades__list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--brand);
}

.grades__cta { display: flex; gap: 11px; flex-wrap: wrap; }

@media (max-width: 960px) {
  .grades__bar { grid-template-columns: 1fr; gap: 11px; }
}
@media (max-width: 1024px) {
  .grade-modal__card { grid-template-columns: 1fr; grid-template-rows: auto 1fr; overflow-y: auto; }
  .grade-modal__media { border-right: 0; border-bottom: 1px solid var(--line); padding: 20px; }
  .grade-modal__img { max-height: 42vh; }
  .grade-modal__body { max-height: none; overflow: visible; }
}
@media (max-width: 768px) {
  .grade-modal { padding: 0; }
  .grade-modal__card { max-width: 100%; max-height: 100vh; height: 100%; border-radius: 0; }
  .grade-modal__body { padding: 30px 22px 40px; }
  .grades__cta .btn { width: 100%; text-align: center; }
}

/* ---- hero ---- */
.hero { padding-block: clamp(52px, 7vw, 96px); background: var(--panel); border-bottom: 1px solid var(--line); }
.hero__inner { max-width: 900px; }
.hero__eyebrow {
  font-family: var(--font-head);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 16px;
}
.hero__title { font-size: clamp(32px, 5.4vw, 58px); letter-spacing: -.032em; margin-bottom: 20px; }
.hero__lede { font-size: 18px; line-height: 1.6; max-width: 62ch; margin-bottom: 28px; }
.hero__actions { display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 480px) { .hero__actions .btn { width: 100%; text-align: center; } }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--ink); color: var(--on-dark); margin-top: 0; }

.site-footer__top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.15fr;
  gap: 48px;
  padding-block: clamp(44px, 5.5vw, 72px);
}

.site-footer__wordmark {
  display: block;
  font-family: var(--font-head);
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--white);
  margin-bottom: 14px;
}
.site-footer__blurb {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--on-dark);
  max-width: 40ch;
  margin-bottom: 20px;
}

.site-footer__badges { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.site-footer__badges li {
  font-family: var(--font-head);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--white);
  padding: 6px 11px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  white-space: nowrap;
}

.site-footer__heading {
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--brand);
  margin: 0 0 16px;
}

.site-footer__list { list-style: none; margin: 0; padding: 0; }
.site-footer__list li + li { margin-top: 9px; }
.site-footer__list a {
  font-size: 14.5px;
  color: var(--on-dark);
  text-decoration: none;
  transition: color .16s ease;
}
.site-footer__list a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }

.site-footer__contact { display: flex; flex-direction: column; align-items: flex-start; }
.site-footer__phone {
  font-family: var(--font-head);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--white);
  text-decoration: none;
  margin-bottom: 8px;
}
.site-footer__phone:hover { color: var(--brand); }
.site-footer__email { font-size: 14.5px; color: var(--on-dark); margin-bottom: 12px; }
.site-footer__addr { font-size: 14.5px; color: var(--on-dark); margin-bottom: 20px; }
.site-footer__addr a { color: var(--on-dark); }
.site-footer__addr--pending { color: var(--muted); }
.site-footer__cta { margin-top: auto; }

.site-footer__bar { border-top: 1px solid rgba(255,255,255,.13); }
.site-footer__bar-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  justify-content: space-between;
  align-items: center;
  padding-block: 20px;
}
.site-footer__bar p { font-size: 12.5px; color: var(--muted); margin: 0; }
.site-footer__made { text-align: right; }

@media (max-width: 1024px) {
  .site-footer__top { grid-template-columns: 1fr 1fr; gap: 40px 32px; }
  .site-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .site-footer__top { grid-template-columns: 1fr; gap: 34px; }
  .site-footer__bar-inner { flex-direction: column; align-items: flex-start; }
  .site-footer__made { text-align: left; }
  .site-footer__cta { width: 100%; text-align: center; }
}

/* ==========================================================================
   Public forms
   ========================================================================== */
.eco-form { max-width: 100%; }
.eco-form__row { display: block; margin-bottom: 18px; }
.eco-form__row--split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.eco-form label {
  display: block;
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 7px;
}
.eco-form input[type="text"],
.eco-form input[type="email"],
.eco-form input[type="tel"],
.eco-form select,
.eco-form textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 15.5px;
  color: var(--ink);
  background: var(--white);
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 3px;
}
.eco-form input:focus, .eco-form select:focus, .eco-form textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(32,134,44,.16);
}
.eco-form textarea { resize: vertical; }
.eco-form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.eco-form__actions { margin: 0; }

.form-notice {
  padding: 13px 16px;
  border-radius: 3px;
  font-size: 15px;
  margin-bottom: 20px;
  border-left: 3px solid var(--brand);
  background: var(--panel);
  color: var(--ink);
}
.form-notice--bad { border-left-color: var(--staging); }

@media (max-width: 560px) { .eco-form__row--split { grid-template-columns: 1fr; } }

/* ==========================================================================
   Business hub. Standalone app chrome, deliberately plainer than the site.
   ========================================================================== */
.hub-body { background: var(--panel); }

.hub-gate { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.hub-gate__card {
  width: 100%;
  max-width: 400px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 36px 32px;
  box-shadow: 0 18px 44px rgba(0,0,0,.07);
}
.hub-gate__brand {
  display: block;
  font-family: var(--font-head);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 12px;
}
.hub-gate__title { font-size: 27px; letter-spacing: -.02em; margin-bottom: 8px; }
.hub-gate__sub { font-size: 14.5px; color: var(--body-grey); margin-bottom: 24px; }

.hub-top { background: var(--ink); }
.hub-top__inner {
  max-width: 1280px;
  margin-inline: auto;
  padding: 0 24px;
  min-height: 62px;
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}
.hub-top__brand {
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 800;
  color: var(--white);
  letter-spacing: -.01em;
}
.hub-top__brand em { color: var(--brand); font-style: normal; }
.hub-nav { display: flex; gap: 4px; flex-wrap: wrap; margin-inline-end: auto; }
.hub-nav__item {
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 600;
  color: var(--on-dark);
  text-decoration: none;
  padding: 8px 13px;
  border-radius: 3px;
}
.hub-nav__item:hover { background: rgba(255,255,255,.08); color: var(--white); }
.hub-nav__item.is-active { background: var(--brand); color: var(--white); }
.hub-top__out { font-size: 13px; color: var(--muted); text-decoration: none; }
.hub-top__out:hover { color: var(--white); }

.hub-main { max-width: 1280px; margin-inline: auto; padding: 32px 24px 72px; }

.hub-panel {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 32px;
}
.hub-h1 { font-size: 27px; letter-spacing: -.02em; margin-bottom: 10px; }
.hub-h2 { font-size: 17px; margin: 34px 0 16px; }
.hub-lede { font-size: 15px; line-height: 1.6; color: var(--body-grey); max-width: 68ch; margin-bottom: 26px; }
.hub-empty { font-size: 15px; color: var(--body-grey); padding: 22px; background: var(--panel); border-radius: 4px; }

.hub-notice {
  padding: 13px 16px;
  border-radius: 4px;
  font-size: 14.5px;
  margin-bottom: 22px;
  border-left: 3px solid var(--brand);
  background: var(--white);
}
.hub-notice--ok { border-left-color: var(--brand); }
.hub-notice--bad { border-left-color: var(--staging); }

.hub-form { max-width: 620px; }
.hub-field { display: block; margin-bottom: 20px; }
.hub-field > span, .hub-field legend {
  display: block;
  font-family: var(--font-head);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 7px;
}
.hub-field small { display: block; font-size: 12.5px; color: var(--body-grey); margin-top: 6px; line-height: 1.5; }
.hub-field input[type="text"],
.hub-field input[type="password"],
.hub-field input[type="file"] {
  width: 100%;
  font-family: var(--font-body);
  font-size: 15px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--white);
  color: var(--ink);
}
.hub-field input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(32,134,44,.16); }
.hub-field--modes { border: 1px solid var(--line); border-radius: 4px; padding: 16px; }
.hub-radio { display: flex; gap: 11px; align-items: flex-start; padding: 9px 0; cursor: pointer; }
.hub-radio + .hub-radio { border-top: 1px solid var(--line-soft); }
.hub-radio input { margin-top: 3px; accent-color: var(--brand); }
.hub-radio strong { display: block; font-size: 14.5px; color: var(--ink); }
.hub-radio small { display: block; font-size: 12.5px; color: var(--body-grey); margin-top: 3px; line-height: 1.5; }

.hub-btn {
  -webkit-appearance: none;
  appearance: none;
  display: inline-block;
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 700;
  padding: 13px 26px;
  border-radius: 3px;
  border: 1px solid transparent;
  cursor: pointer;
}
.hub-btn--solid { background: var(--brand); color: var(--white); }
.hub-btn--solid:hover { background: var(--brand-dark); }
.hub-btn:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }

.hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 16px;
}
.hub-tile { margin: 0; background: var(--panel); border: 1px solid var(--line-soft); border-radius: 4px; overflow: hidden; }
.hub-tile img { display: block; width: 100%; height: 130px; object-fit: cover; }
.hub-tile figcaption { font-size: 12px; color: var(--body-grey); padding: 9px 11px; line-height: 1.45; }

.hub-scroller { overflow-x: auto; border: 1px solid var(--line); border-radius: 4px; }
.hub-table { width: 100%; border-collapse: collapse; min-width: 780px; font-size: 13.5px; }
.hub-table th {
  text-align: left;
  font-family: var(--font-head);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--body-grey);
  padding: 12px 14px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.hub-table td { padding: 12px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: top; color: var(--ink); }
.hub-table tr:last-child td { border-bottom: 0; }
.hub-nowrap { white-space: nowrap; }
.hub-detail { color: var(--body-grey); max-width: 340px; }

@media (max-width: 560px) {
  .hub-panel { padding: 22px 18px; }
  .hub-main { padding: 20px 14px 56px; }
  .hub-btn { width: 100%; }
}

/* Dual-unit spec tables: imperial is the primary column, metric secondary. */
.spec__table--dual { min-width: 520px; }
.spec__table--dual thead th {
  font-family: var(--font-head);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--body-grey);
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}
.spec__table--dual thead th:first-child { width: 44%; }
.spec__table--dual td { text-align: left; }
.spec__table--dual .spec__met { color: var(--body-grey); font-weight: 400; white-space: nowrap; }
.grades__note--flag {
  border-left: 3px solid var(--staging);
  background: var(--panel);
  padding: 11px 14px;
  margin: -14px 0 26px;
  font-size: 12.5px;
}

/* ==========================================================================
   Media rows. Image one side, text the other, alternating down the page.
   Order is set by grid-column so the markup stays image-first for screen
   readers regardless of which side it renders on.
   ========================================================================== */
.media-row { padding-block: clamp(44px, 6vw, 80px); }
.media-row--panel { background: var(--panel); }

.media-row__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}

.media-row--right .media-row__media { grid-column: 2; grid-row: 1; }
.media-row--right .media-row__text  { grid-column: 1; grid-row: 1; }
.media-row--left  .media-row__media { grid-column: 1; grid-row: 1; }
.media-row--left  .media-row__text  { grid-column: 2; grid-row: 1; }

.media-row--textonly .media-row__inner { grid-template-columns: 1fr; }
.media-row--textonly .media-row__text { grid-column: 1; max-width: 68ch; }

.media-row__media { margin: 0; line-height: 0; }
.media-row__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
  border: 1px solid var(--line);
}

.media-row__text { display: flex; flex-direction: column; gap: 14px; }
.media-row__eyebrow {
  font-family: var(--font-head);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--brand);
  margin: 0;
}
.media-row__title {
  font-size: clamp(25px, 3.4vw, 37px);
  letter-spacing: -.028em;
  margin: 0;
  max-width: 24ch;
}
.media-row__body { font-size: 16.5px; line-height: 1.62; margin: 0; max-width: 56ch; }

.media-row__quote {
  margin: 4px 0;
  padding: 16px 20px;
  background: var(--white);
  border-left: 3px solid var(--brand);
  max-width: 54ch;
}
.media-row--panel .media-row__quote { background: var(--white); }
.media-row__quote p { font-size: 17px; line-height: 1.55; color: var(--ink); margin: 0; }
.media-row__quote cite {
  display: block;
  margin-top: 10px;
  font-family: var(--font-head);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--body-grey);
}

.media-row__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.media-row__list li {
  position: relative;
  padding-left: 20px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--body-grey);
  max-width: 54ch;
}
.media-row__list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--brand);
}
.media-row__list li strong { color: var(--ink); font-weight: 600; }
.media-row__cta { margin: 6px 0 0; }

@media (max-width: 860px) {
  .media-row__inner { grid-template-columns: 1fr; }
  /* Image always above the text once stacked, whichever side it was on. */
  .media-row--right .media-row__media,
  .media-row--left  .media-row__media { grid-column: 1; grid-row: 1; }
  .media-row--right .media-row__text,
  .media-row--left  .media-row__text  { grid-column: 1; grid-row: 2; }
  .media-row__title { max-width: none; }
}
@media (max-width: 480px) {
  .media-row__cta .btn { width: 100%; text-align: center; }
}

/* About hero sits tighter than the homepage hero, no buttons to make room for. */
.hero--about { background: var(--white); border-bottom: 1px solid var(--line); }
.hero--about .hero__lede { margin-bottom: 0; }

/* ==========================================================================
   Interior page hero
   ========================================================================== */
.page-hero { padding-block: clamp(44px, 6vw, 82px); background: var(--panel); border-bottom: 1px solid var(--line); }
.page-hero__inner { max-width: 860px; }
.page-hero__eyebrow {
  font-family: var(--font-head);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 14px;
}
.page-hero__title { font-size: clamp(30px, 5vw, 52px); letter-spacing: -.032em; margin-bottom: 18px; }
.page-hero__lede { font-size: 17.5px; line-height: 1.6; max-width: 60ch; }
.page-hero__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }

/* With a background photo, invert the type and lay a scrim for legibility. */
.page-hero--image {
  background-size: cover;
  background-position: center;
  position: relative;
  border-bottom: 0;
}
.page-hero--image::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(30,30,30,.86), rgba(30,30,30,.55));
}
.page-hero--image .page-hero__inner { position: relative; }
.page-hero--image .page-hero__title { color: var(--white); }
.page-hero--image .page-hero__lede { color: var(--on-dark); }
.page-hero--image .page-hero__eyebrow { color: var(--white); }
.page-hero--image .btn--ghost { color: var(--white); border-color: rgba(255,255,255,.4); }
.page-hero--image .btn--ghost:hover { background: var(--white); color: var(--ink); }

@media (max-width: 480px) { .page-hero__actions .btn { width: 100%; text-align: center; } }

/* ==========================================================================
   Feature grid
   ========================================================================== */
.feature-grid--panel { background: var(--panel); }
.feature-grid__intro { max-width: 62ch; margin-bottom: 30px; }
.feature-grid__items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.feature-card {
  background: var(--white);
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.feature-card__stat {
  font-family: var(--font-head);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.feature-card__title { font-family: var(--font-head); font-size: 17px; font-weight: 700; color: var(--ink); margin: 0; }
.feature-card__body { font-size: 14.5px; line-height: 1.55; color: var(--body-grey); margin: 0; }
.feature-card__link {
  margin-top: auto;
  padding-top: 6px;
  font-family: var(--font-head);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--brand);
  text-decoration: none;
}
.feature-card__link::after { content: " \2192"; }
.feature-card__link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Numbered process steps, used on the order page. */
.process { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.process li { background: var(--white); padding: 26px 22px; display: flex; gap: 16px; align-items: flex-start; }
.process__n {
  flex: 0 0 auto;
  font-family: var(--font-head);
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -.04em;
  color: var(--brand);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.process__title { font-family: var(--font-head); font-size: 16.5px; font-weight: 700; color: var(--ink); margin: 0 0 6px; }
.process li p { font-size: 14.5px; line-height: 1.55; color: var(--body-grey); margin: 0; }

/* Contact page two column layout. */
.contact-cols { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(28px, 5vw, 60px); align-items: start; }
.contact-line { display: flex; flex-direction: column; gap: 3px; margin-bottom: 22px; }
.contact-line__label {
  font-family: var(--font-head);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--body-grey);
}
.contact-line__big { font-family: var(--font-head); font-size: 24px; font-weight: 700; color: var(--ink); text-decoration: none; letter-spacing: -.015em; }
.contact-line__big:hover { color: var(--brand); }
@media (max-width: 860px) { .contact-cols { grid-template-columns: 1fr; } }

/* ==========================================================================
   Shared pill eyebrow, used by the reputation and applications sections
   ========================================================================== */
.pill {
  display: inline-block;
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--body-grey);
  padding: 7px 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  margin: 0 0 20px;
}

/* ==========================================================================
   Reputation: review carousel
   ========================================================================== */
.reputation { background: var(--panel); }
.reputation__title { font-size: clamp(28px, 4.4vw, 46px); letter-spacing: -.032em; margin: 0 0 12px; max-width: 22ch; }
.reputation__intro { font-size: 16.5px; color: var(--body-grey); max-width: 58ch; margin: 0 0 36px; }

.reputation__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 32px) / 3);
  column-gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.reputation__track::-webkit-scrollbar { height: 0; }
.reputation__track:focus-visible { outline: 3px solid var(--brand); outline-offset: 4px; }

.rev-card {
  scroll-snap-align: start;
  margin: 0;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 26px 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.rev-card__stars { color: var(--brand); font-size: 17px; letter-spacing: 3px; line-height: 1; }

.rev-card__text {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--body-grey);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rev-card.is-open .rev-card__text { -webkit-line-clamp: unset; overflow: visible; }
.rev-card__excerpt { color: var(--muted); font-size: 12.5px; }

.rev-card__more {
  -webkit-appearance: none;
  appearance: none;
  align-self: flex-start;
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.rev-card__more:hover { color: var(--brand); }
.rev-card__more:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

.rev-card__name {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-family: var(--font-head);
  font-size: 15.5px;
  font-weight: 700;
  color: var(--ink);
}

.reputation__foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 28px;
}
.reputation__arrows { display: flex; gap: 10px; }
.arrow {
  -webkit-appearance: none;
  appearance: none;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid var(--rule-strong);
  background: var(--white);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease;
}
.arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.arrow:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); }
.arrow:disabled { opacity: .35; cursor: default; }
.arrow:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.reputation__link { font-size: 14.5px; font-weight: 600; }

@media (max-width: 1024px) { .reputation__track { grid-auto-columns: calc((100% - 16px) / 2); } }
@media (max-width: 700px)  { .reputation__track { grid-auto-columns: 88%; } }

/* ==========================================================================
   Where it is used: icon tile cards
   ========================================================================== */
.where-used__title { font-size: clamp(28px, 4.4vw, 46px); letter-spacing: -.032em; margin: 0 0 12px; max-width: 22ch; }
.where-used__intro { font-size: 16.5px; color: var(--body-grey); max-width: 62ch; margin: 0 0 36px; }

.where-used__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  justify-content: center;
}

.use-card {
  border: 1px dashed var(--rule-strong);
  border-radius: 10px;
  padding: 28px 22px 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  background: var(--white);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.use-card:hover { border-color: var(--brand); border-style: solid; box-shadow: 0 10px 26px rgba(0,0,0,.06); }

.use-card__tile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 12px;
  background: var(--ink);
  flex: 0 0 auto;
}
.tile__svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: var(--white);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.use-card__title {
  font-family: var(--font-head);
  font-size: 17.5px;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  width: 100%;
}
.use-card__body { font-size: 14.5px; line-height: 1.6; color: var(--body-grey); margin: 0; }

@media (max-width: 1024px) { .where-used__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .where-used__grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Split hero: left aligned copy, compact request card.
   The card is deliberately sized to fit without internal scrolling. Adding a
   field means removing one, or the layout starts to push.
   ========================================================================== */
.hero-split {
  position: relative;
  min-height: 90vh;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  padding-block: clamp(32px, 4vw, 56px) 0;
}
/* min-height rather than height: on a short viewport the hero grows instead
   of clipping the request card. */
.hero-split__inner {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 1.15fr minmax(370px, 430px);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  padding-bottom: clamp(28px, 4vw, 52px);
}

/* With a photo, a left-weighted scrim keeps the copy legible over it. */
.hero-split--image { background-size: cover; background-position: center; position: relative; border-bottom: 0; }
.hero-split--image::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(30,30,30,.88) 0%, rgba(30,30,30,.72) 46%, rgba(30,30,30,.42) 100%);
}
.hero-split--image .hero-split__inner { position: relative; }
.hero-split--image .hero-split__title { color: var(--white); }
.hero-split--image .hero-split__lede { color: var(--on-dark); }
.hero-split--image .hero-split__points li { color: var(--on-dark); }
.hero-split--image .hero-split__points li::before { background: var(--white); }

/* No cap on the copy block: it is already constrained by its grid column,
   and a 40ch cap left dead space inside the 1400px container. The title and
   lede carry their own measures instead. */
.hero-split__copy { text-align: left; max-width: none; }
.hero-split__eyebrow {
  font-family: var(--font-head);
  /* Carries the h1 on the homepage, so the size is pinned here. */
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--brand);
  margin: 0 0 14px;
}
/* Brand green only reaches 3.67:1 on the dark scrim, short of AA for small
   uppercase text, so the eyebrow goes white over a photo. */
.hero-split--image .hero-split__eyebrow { color: var(--white); }
/* A <p>, not a heading, because the h1 is the line above it. Heading type has
   to be stated here rather than inherited from the h1..h6 rule. */
.hero-split__title {
  font-family: var(--font-head);
  font-size: clamp(29px, 4.2vw, 52px);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -.032em;
  margin: 0 0 16px;
  max-width: 22ch;
}
.hero-split__lede { font-size: 17px; line-height: 1.6; margin: 0 0 20px; max-width: 54ch; }

.hero-split__points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.hero-split__points li {
  position: relative;
  padding-left: 19px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--body-grey);
}
.hero-split__points li::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 8px;
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--brand);
}

/* ---------- the card ---------- */
/* Glass card over the hero photo. The fallback is near-opaque, because
   without backdrop-filter a half transparent panel leaves the form unreadable
   against a photograph. */
.hero-card {
  background: rgba(255, 255, 255, .93);
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: 10px;
  padding: 22px 22px 20px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .16);
  min-width: 0;
  position: relative;
}
@supports ( backdrop-filter: blur(1px) ) or ( -webkit-backdrop-filter: blur(1px) ) {
  .hero-card {
    background: rgba(255, 255, 255, .5);
    -webkit-backdrop-filter: blur(20px) saturate(125%);
    backdrop-filter: blur(20px) saturate(125%);
  }
}
.hero-card__title { font-family: var(--font-head); font-size: 20px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); margin: 0 0 14px; text-align: center; }
.hero-card__sub { font-size: 13.5px; line-height: 1.45; color: var(--body-grey); margin: 0 0 14px; }

.hero-card__notice {
  font-size: 13px;
  line-height: 1.45;
  padding: 9px 11px;
  border-radius: 3px;
  margin: 0 0 12px;
  border-left: 3px solid var(--brand);
  background: var(--panel);
  color: var(--ink);
}
.hero-card__notice--bad { border-left-color: var(--staging); }

.hero-form { display: flex; flex-direction: column; gap: 9px; }
.hero-form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.hf-input {
  width: 100%;
  min-width: 0;
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.3;
  color: var(--ink);
  background: var(--white);
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 3px;
  -webkit-appearance: none;
  appearance: none;
}
.hf-input::placeholder { color: var(--body-grey); opacity: .85; }
/* The card is half transparent, so the fields have to hold their own contrast.
   More opaque than the card, with a light blur of their own. */
@supports ( backdrop-filter: blur(1px) ) or ( -webkit-backdrop-filter: blur(1px) ) {
  .hf-input {
    background: rgba(255, 255, 255, .8);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
}
.hf-input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(32,134,44,.16); }

/* Native select needs the arrow back after appearance:none. */
select.hf-input {
  background-image: linear-gradient(45deg, transparent 50%, var(--body-grey) 50%),
                    linear-gradient(135deg, var(--body-grey) 50%, transparent 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 30px;
}

.hf-split { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; min-width: 0; }
.hf-split > span { min-width: 0; display: block; }

.hf-datelabel {
  font-family: var(--font-head);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--body-grey);
  margin-bottom: -4px;
}
.hf-textarea { resize: none; line-height: 1.45; }

.hf-submit {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 700;
  color: var(--white);
  background: var(--brand);
  border: 0;
  border-radius: 3px;
  padding: 13px 16px;
  margin-top: 2px;
  cursor: pointer;
  transition: background .16s ease;
}
.hf-submit:hover { background: var(--brand-dark); }
.hf-submit:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

/* Text and call, alongside the form rather than instead of it. White so they
   read as the quieter option next to the green submit. */
.hf-alt { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.hf-alt__btn {
  position: relative;
  display: block;
  text-align: center;
  font-family: var(--font-head);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
  background: rgba(255, 255, 255, .86);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 11px 10px;
  text-decoration: none;
  transition: border-color .18s ease, box-shadow .18s ease, color .18s ease;
}
.hf-alt__btn:hover {
  color: var(--brand);
  border-color: var(--brand);
  box-shadow: 0 0 0 1px rgba(32, 134, 44, .35), 0 0 18px rgba(32, 134, 44, .32);
}
/* The glow breathes on hover. Slow and small, so it reads as alive rather
   than as an alert. */
@media (prefers-reduced-motion: no-preference) {
  .hf-alt__btn:hover { animation: eco-glow 2.4s ease-in-out infinite; }
}
@keyframes eco-glow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(32, 134, 44, .30), 0 0 14px rgba(32, 134, 44, .24); }
  50%      { box-shadow: 0 0 0 1px rgba(32, 134, 44, .45), 0 0 26px rgba(32, 134, 44, .42); }
}
.hf-alt__btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

@media (max-width: 380px) {
  .hf-alt { grid-template-columns: 1fr; }
}

@media (max-width: 1024px) {
  .hero-split__inner { grid-template-columns: 1fr; }
  .hero-split__copy { max-width: 60ch; }
  .hero-card { max-width: 480px; }
  .hero-split--image::before { background: linear-gradient(to bottom, rgba(30,30,30,.86), rgba(30,30,30,.7)); }
}
@media (max-width: 420px) {
  .hf-split { grid-template-columns: 1fr; }
  .hero-card { padding: 18px 16px 16px; }
}

/* ==========================================================================
   Texture overlay
   --------------------------------------------------------------------------
   Opt in with .has-texture on any section. The pattern sits in a pseudo
   element behind the content and is masked so it fades out, so it reads as
   a hint of material rather than wallpaper.

   Direction modifiers: --tex-left (default, fades right), --tex-right,
   --tex-top, --tex-radial. Strength: --tex-soft or --tex-strong.
   ========================================================================== */
.has-texture { position: relative; isolation: isolate; }

.has-texture::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: var(--texture-src, none);
  background-repeat: repeat;
  background-size: 620px auto;
  opacity: .55;
  /* Fade left to right by default. */
  -webkit-mask-image: linear-gradient(to right, #000 0%, rgba(0,0,0,.55) 45%, transparent 88%);
  mask-image: linear-gradient(to right, #000 0%, rgba(0,0,0,.55) 45%, transparent 88%);
}

/* No texture set: keep the pseudo element inert rather than painting a block. */
.has-texture:not([style*="--texture-src"])::before { background-image: none; }

.has-texture--tex-right::before {
  -webkit-mask-image: linear-gradient(to left, #000 0%, rgba(0,0,0,.55) 45%, transparent 88%);
  mask-image: linear-gradient(to left, #000 0%, rgba(0,0,0,.55) 45%, transparent 88%);
}
.has-texture--tex-top::before {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.5) 40%, transparent 85%);
  mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.5) 40%, transparent 85%);
}
.has-texture--tex-radial::before {
  -webkit-mask-image: radial-gradient(120% 90% at 15% 30%, #000 0%, rgba(0,0,0,.4) 50%, transparent 82%);
  mask-image: radial-gradient(120% 90% at 15% 30%, #000 0%, rgba(0,0,0,.4) 50%, transparent 82%);
}

.has-texture--tex-soft::before { opacity: .32; }
.has-texture--tex-strong::before { opacity: .8; }

/* On a dark band the texture has to lighten rather than darken. */
.has-texture--tex-invert::before { filter: invert(1); opacity: .07; }

@media (prefers-reduced-motion: reduce) { .has-texture::before { transition: none; } }

/* ==========================================================================
   Frosted stats band, nested at the bottom of the hero.

   backdrop-filter blurs whatever sits behind the element, which here is the
   hero background photo. The band needs no image of its own.
   ========================================================================== */
.trust-strip--glass {
  margin-top: auto;               /* pin to the bottom of the flex column */
  position: relative;
  z-index: 1;
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 0;
  border-bottom: 0;

  /* Fallback for browsers without backdrop-filter: near-opaque white. */
  background: rgba(255,255,255,.92);

  /* The white glow. Outer bloom plus an inner top highlight. */
  box-shadow:
    0 -2px 60px rgba(255,255,255,.55),
    0 -1px 0 rgba(255,255,255,.85) inset,
    0 -22px 48px rgba(255,255,255,.28);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .trust-strip--glass {
    /* Was .62. The blur is doing the legibility work, so the panel can sit
       back further and let more of the photo through. */
    background: rgba(255,255,255,.5);
    -webkit-backdrop-filter: blur(40px) saturate(120%);
    backdrop-filter: blur(40px) saturate(120%);
  }
}

.trust-strip--glass .trust-strip__inner { padding-block: 26px; }
.trust-strip--glass .trust-strip__stat { color: var(--brand); }
.trust-strip--glass .trust-strip__label { color: var(--ink); }

/* Over a photo the hero has no bottom rule, the band closes it instead. */
.hero-split--image { border-bottom: 0; }

/* The scrim must sit behind the band, not over it. */
.hero-split--image::before { z-index: 0; }
.hero-split__inner { position: relative; z-index: 1; }

@media (max-width: 1024px) {
  /* This used to set min-height: 0, which collapsed the hero to its content
     height on every small laptop and tablet. The 90vh floor from the base rule
     now stands at every width. */
  .hero-split { padding-bottom: 0; }
  .trust-strip--glass { border-radius: 10px; border-bottom: 1px solid rgba(255,255,255,.55); margin-top: 0; }
}
@media (max-width: 560px) {
  .trust-strip--glass .trust-strip__inner { padding-block: 20px; }
}

/* ==========================================================================
   Blog index
   ========================================================================== */
.post-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
}
.post-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.post-card:hover { border-color: var(--brand); box-shadow: 0 14px 34px rgba(0,0,0,.09); transform: translateY(-2px); }

.post-card__media { display: block; line-height: 0; background: var(--panel); }
.post-card__img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.post-card__placeholder { display: block; width: 100%; aspect-ratio: 3 / 2; background: var(--panel-alt); }

.post-card__body { padding: 20px 20px 22px; display: flex; flex-direction: column; gap: 9px; flex: 1 1 auto; }
.post-card__cat {
  font-family: var(--font-head);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand);
  margin: 0;
}
.post-card__title { font-family: var(--font-head); font-size: 19px; font-weight: 700; line-height: 1.25; letter-spacing: -.018em; margin: 0; }
.post-card__title a { color: var(--ink); text-decoration: none; }
.post-card__title a:hover { color: var(--brand); }
.post-card__excerpt { font-size: 14.5px; line-height: 1.55; color: var(--body-grey); margin: 0; }
.post-card__meta {
  margin: auto 0 0;
  padding-top: 8px;
  font-size: 12px;
  color: var(--body-grey);
  display: flex;
  gap: 7px;
  align-items: center;
}

.post-pagination { margin-top: 36px; }
.post-pagination ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 7px; flex-wrap: wrap; justify-content: center; }
.post-pagination a, .post-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 3px;
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  background: var(--white);
}
.post-pagination a:hover { border-color: var(--brand); color: var(--brand); }
.post-pagination .current { background: var(--brand); border-color: var(--brand); color: var(--white); }

@media (max-width: 940px) { .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .post-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Single post
   ========================================================================== */
.post-single__head { background: var(--panel); border-bottom: 1px solid var(--line); padding-block: clamp(36px, 5vw, 60px); }
.post-single__head-inner { max-width: 780px; }
.post-single__eyebrow {
  font-family: var(--font-head);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand);
  margin: 0 0 14px;
}
.post-single__eyebrow a { color: var(--brand); text-decoration: none; }
.post-single__eyebrow a:hover { text-decoration: underline; text-underline-offset: 3px; }
.post-single__title { font-size: clamp(28px, 4.4vw, 46px); letter-spacing: -.032em; margin: 0 0 14px; }
.post-single__meta { font-size: 13.5px; color: var(--body-grey); display: flex; gap: 8px; align-items: center; margin: 0; }

.post-single__hero { padding-top: clamp(24px, 3vw, 40px); }
.post-single__hero-img { display: block; width: 100%; max-height: 58vh; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); }
.post-single__caption { font-size: 12.5px; color: var(--body-grey); margin: 10px 0 0; }

.post-single__body { max-width: 720px; padding-block: clamp(28px, 4vw, 44px); }
.post-single__body h2 { font-size: clamp(22px, 2.8vw, 29px); letter-spacing: -.022em; margin-top: 1.9em; }
.post-single__body h3 { font-size: 19px; margin-top: 1.6em; }
.post-single__body p { margin-top: 1.1em; }
.post-single__body ul, .post-single__body ol { margin-top: 1.1em; padding-left: 22px; }
.post-single__body li { margin-bottom: 8px; line-height: 1.62; }

/* Pull quotes carry the client's own words, so they get real weight. */
.post-single__body blockquote {
  margin: 1.8em 0;
  padding: 20px 24px;
  background: var(--panel);
  border-left: 3px solid var(--brand);
  border-radius: 0 4px 4px 0;
}
.post-single__body blockquote p { margin: 0; font-size: 18px; line-height: 1.55; color: var(--ink); }
.post-single__body blockquote p + p { margin-top: 12px; }
.post-single__body blockquote cite {
  display: block;
  margin-top: 12px;
  font-family: var(--font-head);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--body-grey);
}

.post-single__body figure { margin: 1.8em 0; }
.post-single__body figure img { width: 100%; height: auto; border-radius: 6px; border: 1px solid var(--line); max-height: none; }
.post-single__body figcaption { font-size: 12.5px; color: var(--body-grey); margin-top: 9px; }

.post-single__foot { padding-bottom: clamp(40px, 5vw, 64px); }

/* ==========================================================================
   Stat split: photo one side, headline figure and benefit cards the other
   ========================================================================== */
.stat-split { background: var(--panel); }
.stat-split__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(28px, 4.5vw, 68px);
  align-items: center;
}

.stat-split__media { position: relative; margin: 0; line-height: 0; border-radius: 14px; overflow: hidden; }
/* The photo sets the height of the section, so it is the tall one. */
.stat-split__img { display: block; width: 100%; aspect-ratio: 4 / 4.7; object-fit: cover; }

/* Caption sits on a scrim so it stays legible whatever the photo does. */
.stat-split__overlay {
  position: absolute;
  inset: auto 0 0 0;
  padding: 46px 26px 22px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: linear-gradient(to top, rgba(30,30,30,.82), rgba(30,30,30,0));
  line-height: 1.35;
}
.stat-split__overline { font-family: var(--font-head); font-size: 17px; font-weight: 700; color: var(--white); letter-spacing: -.01em; }
.stat-split__undertag { font-size: 13px; color: rgba(255,255,255,.78); }

.stat-split__stat {
  font-family: var(--font-head);
  font-size: clamp(52px, 8vw, 96px);
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: .95;
  color: var(--brand);
  margin: 0 0 10px;
  font-variant-numeric: tabular-nums;
}
/* When the lead is words rather than a figure it cannot run at 96px. */
.stat-split__stat--words {
  font-size: clamp(28px, 3.6vw, 48px);
  line-height: 1.06;
  letter-spacing: -.03em;
  color: var(--ink);
}
.stat-split__sub { font-size: 17px; line-height: 1.5; color: var(--ink); margin: 0 0 26px; max-width: 44ch; }
.stat-split__kicker {
  font-family: var(--font-head);
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--brand);
  margin: 22px 0 26px;
}

/* Four across where the column is wide enough, then two, then one. auto-fit
   with a floor rather than a hard repeat(4), because the left column is 60 per
   cent of the container and four hard columns crush at tablet width. */
.stat-points {
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
}
.stat-point {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  background: var(--white);
  border-top: 3px solid var(--brand);
  border-radius: 0 0 8px 8px;
  padding: 16px 16px 18px;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
}
.stat-point__tick { width: 20px; height: 20px; fill: none; stroke: var(--brand); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; margin-top: 1px; }
.stat-point__title { display: block; font-family: var(--font-head); font-size: 14.5px; font-weight: 700; line-height: 1.3; color: var(--ink); }
.stat-point__body { display: block; font-size: 14.5px; line-height: 1.5; color: var(--body-grey); margin-top: 3px; }

.stat-split__cta { margin: 0; }
.btn--pill { border-radius: 999px; padding: 16px 30px; }

@media (max-width: 900px) {
  .stat-split__inner { grid-template-columns: 1fr; }
  .stat-split__media { order: 2; }
  .stat-split__img { aspect-ratio: 16 / 10; }
}
@media (max-width: 480px) { .stat-split__cta .btn { width: 100%; text-align: center; } }

/* ==========================================================================
   Best sellers product grid
   ========================================================================== */
.sellers { background: var(--panel); }
.sellers__title { font-size: clamp(30px, 5vw, 52px); letter-spacing: -.035em; margin: 0 0 10px; }
.sellers__intro { font-size: 16.5px; color: var(--body-grey); max-width: 58ch; margin: 0 0 34px; }

.sellers__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.seller {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px 20px 22px;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.seller:hover { border-color: var(--brand); box-shadow: 0 14px 34px rgba(0,0,0,.08); transform: translateY(-2px); }

/* Product shots sit on white and are contained rather than cropped, so the
   board edge and the printed grade stay visible. */
.seller__media {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  border-radius: 6px;
  margin-bottom: 18px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.seller__img { display: block; width: 100%; height: 100%; object-fit: contain; }
.seller__placeholder { display: block; width: 100%; height: 100%; background: var(--panel-alt); border-radius: 6px; }

.seller__title {
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -.012em;
  margin: 0 0 16px;
  min-height: 2.7em; /* keeps prices level across cards with one or two line titles */
}
.seller__title a { color: var(--ink); text-decoration: none; }
.seller__title a:hover { color: var(--brand); }

.seller__price {
  font-family: var(--font-head);
  font-size: 23px;
  font-weight: 800;
  letter-spacing: -.025em;
  color: var(--ink);
  margin: 0 0 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}
.seller__price--quote { font-size: 15.5px; font-weight: 600; color: var(--body-grey); letter-spacing: 0; }

.seller__btn {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 700;
  color: var(--white);
  background: var(--brand);
  border-radius: 4px;
  padding: 11px 20px;
  text-decoration: none;
  transition: background .16s ease;
}
.seller__btn:hover { background: var(--brand-dark); color: var(--white); }
.seller__btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

.sellers__all { text-align: center; margin: 34px 0 0; }

@media (max-width: 1024px) { .sellers__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px)  { .sellers__grid { grid-template-columns: 1fr; } .seller__title { min-height: 0; } }

/* ==========================================================================
   Product showcase hero, foam landing page

   The green fade is the brand green at low alpha over white rather than a new
   palette entry, so it stays tied to the one brand colour.
   ========================================================================== */
.phero {
  background: linear-gradient(
    to bottom,
    rgba(32,134,44,.16) 0%,
    rgba(32,134,44,.09) 34%,
    rgba(32,134,44,.03) 62%,
    var(--white) 100%
  );
  padding-block: clamp(28px, 4vw, 56px) clamp(40px, 5vw, 76px);
  overflow: hidden;
}

/*
 * 1080px. The product shot is 985px wide native, so this is a 1.1x stretch and
 * imperceptible. Do not raise much further without a larger source asset.
 */
.phero__stage { max-width: 1080px; margin: 0 auto clamp(8px, 2vw, 24px); }

/* The lower third of the image is masked to transparent so it dissolves into
   the white end of the gradient. Masking beats a white overlay: it works on
   any background and does not need the two colours kept in sync. */
.phero__img {
  display: block;
  width: 100%;
  height: auto;
  /* Fade starts late: the image is only 422px tall, so an early fade would
     wash out the bottom two panels rather than just their base. */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 74%, rgba(0,0,0,.45) 90%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 74%, rgba(0,0,0,.45) 90%, transparent 100%);
}

.phero__copy { text-align: left; }
.phero__label {
  font-family: var(--font-head);
  font-size: clamp(17px, 2vw, 22px);
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 6px;
  letter-spacing: -.01em;
}
.phero__head {
  font-family: var(--font-head);
  font-size: clamp(38px, 6.4vw, 76px);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1.03;
  color: var(--ink);
  margin: 0 0 14px;
}
/* Second half in the rust accent rather than slate, per client direction. */
.phero__head-b { color: var(--accent); }

.phero__accent {
  font-family: var(--font-head);
  font-size: clamp(14px, 1.6vw, 17px);
  font-weight: 600;
  color: var(--brand);
  margin: 0 0 26px;
}

.phero__capsule {
  display: inline-flex;
  align-items: center;
  gap: clamp(16px, 3vw, 42px);
  background: var(--panel);
  border-radius: 999px;
  padding: 12px 12px 12px 26px;
  max-width: 100%;
  flex-wrap: wrap;
}
.phero__price { display: flex; flex-direction: column; gap: 2px; font-size: 14.5px; line-height: 1.45; color: var(--ink); }
.phero__buy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 78px;
  padding: 12px 26px;
  border-radius: 999px;
  background: var(--brand);
  color: var(--white);
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: background .16s ease;
}
.phero__buy:hover { background: var(--brand-dark); color: var(--white); }
.phero__buy:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

@media (max-width: 560px) {
  .phero__capsule { width: 100%; padding: 16px; flex-direction: column; align-items: flex-start; gap: 14px; }
  .phero__buy { width: 100%; }
}

/* ==========================================================================
   Benefits prose: badge, stat row, bold lead-in paragraphs. 1200px.
   ========================================================================== */
.bprose__wrap {
  max-width: var(--container);   /* 1400, same as every other section */
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: 60fr 40fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
/* Without a photo the text column takes the full width. */
.bprose__wrap--nomedia { grid-template-columns: 1fr; }

.bprose__main { min-width: 0; }

.bprose__media { margin: 0; min-width: 0; line-height: 0; }
.bprose__img {
  display: block;
  width: 100%;
  height: auto;
  /* Soft base fade so the product shot sits on the page rather than in a box. */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 78%, rgba(0,0,0,.5) 91%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 78%, rgba(0,0,0,.5) 91%, transparent 100%);
}

.bprose__stats { display: flex; align-items: flex-start; gap: clamp(20px, 4vw, 48px); margin-bottom: clamp(36px, 5vw, 64px); }

.bprose__badge {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  border: 2px solid var(--ink);
  border-radius: 17px;
  font-family: var(--font-head);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--ink);
}

.bprose__statrow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 40px);
  padding-left: clamp(20px, 4vw, 48px);
  border-left: 1px solid var(--line);
  align-self: stretch;
}
.bstat { display: flex; flex-direction: column; }
.bstat__label { font-size: 12.5px; color: var(--body-grey); margin-bottom: 2px; }
.bstat__value {
  font-family: var(--font-head);
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1.02;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  margin-bottom: 8px;
}
.bstat__note { font-size: 13px; line-height: 1.4; color: var(--body-grey); }

.bprose__heading { font-size: clamp(26px, 3.6vw, 38px); letter-spacing: -.028em; margin: 0 0 22px; }

.bprose__body { display: flex; flex-direction: column; gap: clamp(20px, 2.6vw, 30px); }
/* Bold lead-in running straight into grey body copy is what carries the
   rhythm in the reference, so the lead is inline rather than a heading. */
.bprose__p {
  font-family: var(--font-head);
  font-size: clamp(15.5px, 1.35vw, 18.5px);
  line-height: 1.55;
  font-weight: 500;
  color: var(--body-grey);
  margin: 0;
  max-width: 58ch;
}
.bprose__lead { font-weight: 700; color: var(--ink); }

.bprose__cta { margin: clamp(30px, 4vw, 48px) 0 0; }
.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 32px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  transition: background .16s ease, color .16s ease;
}
.btn-outline:hover { background: var(--ink); color: var(--white); }
.btn-outline:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }

@media (max-width: 1024px) {
  .bprose__wrap { grid-template-columns: 1fr; }
  .bprose__media { max-width: 560px; margin-inline: auto; }
}
@media (max-width: 760px) {
  .bprose__stats { flex-direction: column; }
  .bprose__statrow { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); padding-top: 22px; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 460px) { .bprose__statrow { grid-template-columns: 1fr; } .btn-outline { width: 100%; } }

/* ==========================================================================
   Full bleed image band. Breaks a run of text with one large photograph.
   ========================================================================== */
.image-band {
  position: relative;
  width: 100%;
  min-height: var(--band-h, 70vh);
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  align-items: flex-end;
}
.image-band__inner { width: 100%; padding-block: clamp(24px, 4vw, 48px); position: relative; z-index: 1; }

/* Scrim only where there is a caption to protect. */
.image-band:has(.image-band__caption)::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 55%;
  background: linear-gradient(to top, rgba(30,30,30,.78), rgba(30,30,30,0));
}
.image-band__caption { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 4px; max-width: 46ch; }
.image-band__title { font-family: var(--font-head); font-size: clamp(20px, 3vw, 30px); font-weight: 800; letter-spacing: -.025em; color: var(--white); }
.image-band__sub { font-size: 15px; line-height: 1.5; color: rgba(255,255,255,.82); }

@media (max-width: 700px) { .image-band { min-height: 46vh; } }


/* ==========================================================================
   Scroll reveal
   --------------------------------------------------------------------------
   The hidden state is scoped to .js-reveal on <html>, set by an inline head
   script. With JavaScript off the class is never added and nothing hides, so
   content is never dependent on this working.
   ========================================================================== */
.js-reveal [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  filter: blur(6px);
  will-change: opacity, transform, filter;
  transition:
    opacity .62s cubic-bezier(.16,.84,.44,1),
    transform .62s cubic-bezier(.16,.84,.44,1),
    filter .62s cubic-bezier(.16,.84,.44,1);
}
.js-reveal [data-reveal].is-in {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

/* Media blocks lift a touch further and take slightly longer, which reads as
   weight rather than as a different effect. */
.js-reveal [data-reveal].media-row__media,
.js-reveal [data-reveal].stat-split__media,
.js-reveal [data-reveal].bprose__media,
.js-reveal [data-reveal].phero__stage,
.js-reveal [data-reveal].post-single__hero {
  transform: translate3d(0, 20px, 0) scale(.988);
  filter: blur(8px);
  transition-duration: .78s;
}
.js-reveal [data-reveal].media-row__media.is-in,
.js-reveal [data-reveal].stat-split__media.is-in,
.js-reveal [data-reveal].bprose__media.is-in,
.js-reveal [data-reveal].phero__stage.is-in,
.js-reveal [data-reveal].post-single__hero.is-in {
  transform: none;
  filter: blur(0);
}

/* Big figures count in a fraction quicker so the eye lands on them first. */
.js-reveal [data-reveal].bstat,
.js-reveal [data-reveal].stat-point,
.js-reveal [data-reveal].trust-strip__item { transition-duration: .5s; }

/* Interactive polish, unrelated to the observer but part of the same feel. */
a, button { -webkit-tap-highlight-color: transparent; }
.btn, .btn-outline, .seller__btn, .phero__buy, .hf-submit, .hub-btn {
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.btn:active, .btn-outline:active, .seller__btn:active, .phero__buy:active { transform: translateY(1px); }

.site-nav__list a { transition: color .16s ease; }
.faq__q { transition: background-color .16s ease; }
.faq__q:hover { background: var(--panel); }

/* Nothing above moves for a reader who asked for less motion. The script bails
   before hiding anything, and this is the belt and braces. */
@media (prefers-reduced-motion: reduce) {
  .js-reveal [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
  .btn, .btn-outline, .seller__btn, .phero__buy, .hf-submit, .hub-btn { transition: none; }
}

/* ==========================================================================
   Editorial SVG figures
   ========================================================================== */
.eco-fig { margin: 2em 0; }
.eco-fig__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  font-family: var(--font-head);
}
.eco-fig figcaption {
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--body-grey);
  margin-top: 14px;
  max-width: 62ch;
}

/* Text inside the SVGs. Set here rather than inline so the figures follow the
   palette and can be restyled without touching the PHP. */
.eco-fig__svg .fig-label { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; fill: var(--body-grey); }
.eco-fig__svg .fig-row   { font-size: 13px;   font-weight: 600; fill: var(--ink); }
.eco-fig__svg .fig-val   { font-size: 13px;   font-weight: 800; }
.eco-fig__svg .fig-note  { font-size: 11.5px; font-weight: 500; fill: var(--body-grey); font-family: var(--font-body); }
.eco-fig__svg .fig-stat  { font-size: 12.5px; font-weight: 800; }
.eco-fig__svg .fig-stat--good { fill: var(--brand); }
.eco-fig__svg .fig-stat--warn { fill: var(--accent); }

/* The cell-structure figure is two panels side by side and gets unreadable
   below about 620px, so it scrolls in its own container instead of shrinking. */
@media (max-width: 620px) {
  .eco-fig { overflow-x: auto; }
  .eco-fig__svg { min-width: 560px; }
}

/* A grade that is announced but not yet in production. Muted so it does not
   compete with what we can deliver today. */
.grades__bar { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grade-card--coming { position: relative; border-style: dashed; background: var(--panel); }
.grade-card--coming .grade-card__thumb { opacity: .5; }
.grade-card--coming .grade-card__psi,
.grade-card--coming .grade-card__name { color: var(--body-grey); }
.grade-card__flag {
  position: absolute;
  top: 12px;
  right: 12px;
  font-family: var(--font-head);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--white);
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: 4px 9px;
}
@media (max-width: 1100px) { .grades__bar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .grades__bar { grid-template-columns: 1fr; } }

/* ==========================================================================
   Handling and storage. Compliance copy, so it is set plainer than the
   marketing sections: no card, no hover, nothing that invites a click.
   ========================================================================== */
.handling { background: var(--panel); }
.handling__inner {
  display: grid;
  grid-template-columns: 1fr 0.85fr;
  gap: clamp(28px, 4vw, 60px);
  align-items: center;
}
.handling--textonly .handling__inner { grid-template-columns: 1fr; }
.handling--textonly .handling__text { max-width: 68ch; }

.handling__eyebrow {
  font-family: var(--font-head);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--body-grey);
  margin: 0 0 12px;
}
.handling__title { font-size: clamp(25px, 3.2vw, 36px); letter-spacing: -.028em; margin: 0 0 14px; }
.handling__lede { font-size: 16.5px; line-height: 1.6; color: var(--ink); margin: 0 0 18px; max-width: 52ch; }

.handling__list { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.handling__list li {
  position: relative;
  padding-left: 26px;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--body-grey);
  max-width: 54ch;
}
/* Square markers rather than the brand dot: this is a compliance list, not a
   benefits list, and it should not read as a sales point. */
.handling__list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 8px;
  width: 7px;
  height: 7px;
  border: 1.5px solid var(--body-grey);
}
.handling__note { font-size: 13.5px; line-height: 1.55; color: var(--body-grey); margin: 0; max-width: 52ch; }

.handling__media { margin: 0; line-height: 0; }
.handling__img { display: block; width: 100%; height: auto; border-radius: 6px; border: 1px solid var(--line); }

@media (max-width: 860px) {
  .handling__inner { grid-template-columns: 1fr; }
  .handling__media { max-width: 520px; }
}

/* ==========================================================================
   Application carousel

   The bleed off the right edge is a three column grid on the section:
   gutter | container | gutter. Headings sit in column 2 so they line up with
   every other section, and the track spans columns 2 to 4 so it starts on the
   container's left edge and runs off the right.

   Deliberately no 100vw anywhere. On browsers that count the scrollbar inside
   the viewport, vw arithmetic here produces a horizontal scrollbar on the
   whole page.
   ========================================================================== */
/*
 * The section is a plain block and the three column grid lives on .appc__grid
 * inside it. That is what lets the background video be the background of the
 * whole section.
 *
 * It was a grid itself, with the video as an absolutely positioned grid child.
 * Two things went wrong with that. `.appc > *` placed every child in column 2,
 * and an abspos grid child with a definite placement takes that grid AREA as
 * its containing block, so inset: 0 resolved against the 1400px column. Then
 * the override to span 1 / -1 lost anyway, because `.appc > *` sits later in
 * this file at equal specificity. Taking the video out of the grid entirely
 * removes both traps rather than patching around them.
 */
.appc { position: relative; }
.appc__grid {
  display: grid;
  grid-template-columns:
    minmax(var(--gutter), 1fr)
    minmax(0, calc(var(--container) - (2 * var(--gutter))))
    minmax(var(--gutter), 1fr);
  row-gap: 0;
}

/* Background loop -------------------------------------------------------- */
.appc--video { isolation: isolate; background: var(--white); }
/*
 * Spans every grid column, which is what makes the video full width.
 *
 * The reason this needs saying: `.appc > *` puts every child in column 2, the
 * container column. An absolutely positioned grid child with a definite
 * placement takes that grid AREA as its containing block, not the grid
 * container, so inset: 0 was resolving against the 1400px column and the video
 * stopped at the gutters. Spanning 1 / -1 hands it the whole grid instead.
 *
 * The copy and the card track still sit in column 2, so nothing moves left.
 */
.appc__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.appc__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Solid white at the bottom, gone by the time it reaches the copy. This is
   what hides the bottom edge of the video frame. */
.appc__fade {
  position: absolute;
  inset: auto 0 0 0;
  height: 45%;
  background: linear-gradient(to top, var(--white) 0%, rgba(255, 255, 255, .85) 35%, rgba(255, 255, 255, 0) 100%);
}
/* A loop that plays on its own is motion the visitor did not ask for, so it
   holds on the poster frame instead. */
@media (prefers-reduced-motion: reduce) {
  .appc__video { display: none; }
  .appc__bg { background: var(--panel); }
}
.appc__grid > * { grid-column: 2; min-width: 0; }

.appc__head { margin-bottom: 32px; }
.appc__title { font-size: clamp(28px, 4.4vw, 46px); letter-spacing: -.032em; margin: 0 0 12px; max-width: 24ch; }
.appc__intro { font-size: 16.5px; color: var(--body-grey); max-width: 60ch; margin: 0; }

/* Column 2 to 4: aligns left with the container, bleeds right. */
.appc__track {
  grid-column: 2 / 4;
  list-style: none;
  margin: 0;
  padding: 0 var(--gutter) 6px 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(52%, 620px);
  column-gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.appc__track::-webkit-scrollbar { height: 0; }
.appc__track:focus-visible { outline: 3px solid var(--brand); outline-offset: 5px; border-radius: 4px; }

.appc-card { scroll-snap-align: start; min-width: 0; }
.appc-card__link { display: block; text-decoration: none; color: inherit; }

.appc-card__media {
  position: relative;
  display: block;
  border-radius: 16px;
  overflow: hidden;
  background: var(--panel);
  line-height: 0;
}
.appc-card__img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.16,.84,.44,1);
}
.appc-card__link:hover .appc-card__img { transform: scale(1.025); }

/* Dark pill on the photo, as in the reference. */
.appc-card__label {
  position: absolute;
  left: 18px;
  bottom: 18px;
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 600;
  color: var(--white);
  background: rgba(30,30,30,.72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  padding: 6px 12px;
  border-radius: 6px;
  line-height: 1.3;
}

/* Caption sits below the photo, outside any card chrome. */
.appc-card__caption {
  display: block;
  margin-top: 18px;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--body-grey);
  max-width: 46ch;
}
.appc-card__link:hover .appc-card__caption { color: var(--ink); }

.appc__nav { display: flex; justify-content: center; gap: 12px; margin-top: 30px; }

@media (max-width: 1024px) { .appc__track { grid-auto-columns: min(66%, 520px); } }
@media (max-width: 700px) {
  .appc__track { grid-auto-columns: min(86%, 440px); column-gap: 14px; }
  .appc-card__label { left: 12px; bottom: 12px; font-size: 12px; padding: 5px 10px; }
  .appc-card__caption { margin-top: 14px; font-size: 15px; }
}

/* ==========================================================================
   Grade showcase: single card slider left, shared message right
   ========================================================================== */
.gsw__inner {
  display: grid;
  grid-template-columns: 30fr 70fr;
  gap: clamp(28px, 4vw, 60px);
  align-items: center;
}
.gsw__slider { min-width: 0; }

/* One card per view. Scroll-snap rather than transforms, so swipe works and
   there is no offset to keep in sync on resize. */
.gsw__track {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  border-radius: 10px;
}
.gsw__track::-webkit-scrollbar { height: 0; }
.gsw__track:focus-visible { outline: 3px solid var(--brand); outline-offset: 4px; }

.gsw-card {
  scroll-snap-align: center;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 20px 20px 22px;
  position: relative;
}
.gsw-card--coming { border-style: dashed; background: var(--panel); }
.gsw-card--coming .gsw-card__img { opacity: .5; }

.gsw-card__flag {
  position: absolute;
  top: 12px; right: 12px;
  font-family: var(--font-head);
  font-size: 9.5px; font-weight: 700;
  letter-spacing: .11em; text-transform: uppercase;
  color: var(--accent);
  background: var(--white);
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: 4px 9px;
}

/* Board art is contained on white so the printed grade stays legible. */
.gsw-card__media {
  display: flex; align-items: center; justify-content: center;
  background: var(--white);
  aspect-ratio: 4 / 3;
  margin-bottom: 10px;
  overflow: hidden;
}
.gsw-card__img { display: block; width: 100%; height: 100%; object-fit: contain; }

.gsw-card__tier {
  font-family: var(--font-head);
  font-size: 9.5px; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--brand);
}
.gsw-card__name {
  font-family: var(--font-head);
  font-size: 25px; font-weight: 800;
  letter-spacing: -.025em; color: var(--ink); line-height: 1.1;
}
.gsw-card__psi { font-size: 13.5px; color: var(--body-grey); }

.gsw-card__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--line);
}
.gsw-card__price {
  font-family: var(--font-head);
  font-size: 19px; font-weight: 800;
  letter-spacing: -.02em; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.gsw-card__price em { font-size: 13.5px; font-weight: 600; font-style: normal; color: var(--body-grey); letter-spacing: 0; }
.gsw-card__btn {
  font-family: var(--font-head);
  font-size: 13px; font-weight: 700;
  color: var(--white); background: var(--brand);
  border-radius: 4px; padding: 9px 16px; text-decoration: none;
  white-space: nowrap;
}
.gsw-card__btn:hover { background: var(--brand-dark); color: var(--white); }

/* Grade tabs. Text buttons, current one filled. */
.gsw__tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.gsw__tab {
  -webkit-appearance: none; appearance: none;
  font-family: var(--font-head);
  font-size: 14px; font-weight: 700;
  color: var(--body-grey);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 16px;
  cursor: pointer;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease;
  font-variant-numeric: tabular-nums;
}
.gsw__tab:hover { border-color: var(--brand); color: var(--brand); }
.gsw__tab.is-on { background: var(--brand); border-color: var(--brand); color: var(--white); }
.gsw__tab:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

/* Right column reuses the badge and stat styling from the prose section. */
.gsw__body { min-width: 0; display: flex; flex-direction: column; gap: clamp(22px, 3vw, 32px); }
.gsw__stats { display: flex; align-items: flex-start; gap: clamp(18px, 3vw, 40px); }
.gsw__badge {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  width: 76px; height: 76px;
  border: 2px solid var(--ink);
  border-radius: 17px;
  font-family: var(--font-head);
  font-size: 22px; font-weight: 800;
  letter-spacing: -.02em; color: var(--ink);
}
.gsw__statrow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.5vw, 34px);
  padding-left: clamp(18px, 3vw, 40px);
  border-left: 1px solid var(--line);
  align-self: stretch;
}
.gsw__prose { display: flex; flex-direction: column; gap: clamp(16px, 2vw, 24px); }
.gsw__cta { margin: 0; }

@media (max-width: 1024px) {
  .gsw__inner { grid-template-columns: 1fr; }
  .gsw__slider { max-width: 420px; }
}
@media (max-width: 760px) {
  .gsw__stats { flex-direction: column; }
  .gsw__statrow { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); padding-top: 20px; grid-template-columns: 1fr 1fr; }
  .gsw__slider { max-width: none; }
}
@media (max-width: 440px) {
  .gsw__statrow { grid-template-columns: 1fr; }
  .gsw-card__foot { flex-direction: column; align-items: flex-start; }
  .gsw-card__btn { width: 100%; text-align: center; }
}

/* ==========================================================================
   Built to be better: headline over a parallaxing product photo
   ========================================================================== */
/* One tall section: headline pinned top, paragraph pinned bottom, photograph
   taking every pixel in between. Not a .section, because it sets its own
   vertical rhythm. */
.btb {
  background: var(--white);
  overflow: hidden;
  min-height: 95vh;
  display: flex;
  flex-direction: column;
  padding-block: clamp(48px, 6vw, 90px);
  /* Keeps the stacking below to this section. */
  isolation: isolate;
}
/*
 * The photograph frame overspills its row, and as it travels it would paint
 * over the headline, which sits earlier in the DOM and so paints first. The
 * copy is lifted above it explicitly rather than relying on source order.
 */
.btb__head { text-align: center; flex: 0 0 auto; position: relative; z-index: 2; }
.btb__foot { flex: 0 0 auto; position: relative; z-index: 2; }
.btb__stage { z-index: 1; }
.btb__eyebrow {
  font-family: var(--font-head);
  font-size: clamp(15px, 1.5vw, 19px);
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 6px;
}
.btb__title {
  font-family: var(--font-head);
  font-size: clamp(38px, 7vw, 88px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.03em;
  color: var(--brand);
  margin: 0;
}
/* Diagonal green sheen, lightening toward the right. The pale stop stays at
   #4FA65C rather than going to white: on a white ground white text is not
   there, and #4FA65C still clears 3:1 at display size. */
@supports ( background-clip: text ) or ( -webkit-background-clip: text ) {
  .btb__title {
    background: linear-gradient(120deg, var(--brand-dark) 0%, var(--brand) 42%, #4FA65C 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}

/* Takes the leftover height. min-height keeps it honest on a short viewport
   where 95vh is less than the copy needs. */
.btb__stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 260px;
  margin-block: clamp(20px, 3vw, 40px);
  /* Not clipped here. The frame below deliberately overspills the stage, and
     the section itself is what clips. The photograph is shot on white and the
     section is white, so the overspill is invisible. */
}
/* Larger than the stage on every side, which is what makes the board bigger
   while the headline and the copy stay exactly where they were. */
.btb__shot {
  position: absolute;
  inset: -9% -8%;
  will-change: transform;
}
.btb__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.btb__fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  /* 25vh, but never more than half the frame. On a tall viewport the
     unclamped version washed most of the photo instead of its bottom edge. */
  height: min(25vh, 46%);
  pointer-events: none;
  background: linear-gradient(to top, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0));
}

@media (max-width: 640px) {
  .btb { min-height: 0; }
  .btb__stage { flex: 0 0 auto; height: clamp(200px, 52vw, 300px); }
  /* Less headroom on a phone, so the frame overspills less. */
  .btb__shot { inset: -4% -2%; }
}
@media (prefers-reduced-motion: reduce) {
  .btb__shot { transform: none !important; }
}

/* ==========================================================================
   Topic grid: icon plus prose, two columns
   ========================================================================== */
.topics { background: var(--white); }
.topics__head { max-width: 720px; margin-bottom: clamp(36px, 5vw, 64px); }
.topics__title {
  font-family: var(--font-head);
  font-size: clamp(28px, 3.4vw, 46px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.025em;
  color: var(--ink);
  margin: 0;
}
.topics__intro {
  font-size: clamp(16px, 1.3vw, 18.5px);
  line-height: 1.6;
  color: var(--body-grey);
  margin: 14px 0 0;
}

.topics__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(40px, 6vw, 96px);
  row-gap: clamp(32px, 4vw, 52px);
}

.topic {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  gap: clamp(16px, 1.8vw, 26px);
  align-items: start;
}

/* The PNG carries its own tile and its own rounded corners. The wrapper only
   exists to hang a shadow on, so its radius has to match the artwork or the
   shadow shows through the transparent corners. Measured at 5px for 60px. */
.topic__icon,
.eco-icon {
  display: block;
  width: 60px;
  height: 60px;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(30, 30, 30, .07), 0 4px 12px rgba(30, 30, 30, .08);
}
.eco-icon__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.topic__p {
  font-size: clamp(15.5px, 1.2vw, 17.5px);
  line-height: 1.58;
  color: var(--body-grey);
  margin: 0;
}
.topic__lead {
  font-weight: 700;
  color: var(--brand);
}
.topic__more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
}
.topic__more:hover { color: var(--brand); }
.topic__more:hover .topic__arrow { transform: translateX(3px); }
.topic__arrow { transition: transform .16s ease; }

.topics__foot { margin: clamp(36px, 5vw, 60px) 0 0; }

@media (max-width: 860px) {
  .topics__grid { grid-template-columns: 1fr; row-gap: 30px; }
}
@media (max-width: 420px) {
  .topic { grid-template-columns: 48px minmax(0, 1fr); }
  .topic__icon, .eco-icon { width: 48px; height: 48px; border-radius: 4px; }
}

/* Copy block under the Built to be better photo. */
.btb__body {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.62;
  color: var(--body-grey);
}

/* ==========================================================================
   Industry switcher: segmented control over one large photograph
   ========================================================================== */
.iswitch { background: var(--white); }
/* Centred header, per the reference. */
.iswitch__head { max-width: 860px; margin: 0 auto; text-align: center; }
.iswitch__title {
  font-family: var(--font-head);
  font-size: clamp(28px, 3.4vw, 46px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.025em;
  color: var(--ink);
  margin: 0;
}
.iswitch__intro {
  font-size: clamp(16px, 1.3vw, 18.5px);
  line-height: 1.6;
  color: var(--body-grey);
  margin: 14px 0 0;
}

/* Segmented control, below the photograph. Scrolls rather than wraps on narrow
   screens, so it stays one row and keeps reading as a control. Centring a
   scrollable flex row needs the inline-flex child plus text-align, not
   justify-content, or the left end gets clipped once it overflows. */
.iswitch__segwrap {
  margin: clamp(22px, 3vw, 32px) 0 clamp(20px, 2.5vw, 28px);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  text-align: center;
}
.iswitch__segwrap::-webkit-scrollbar { height: 0; }
.iswitch__seg {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.iswitch__tab {
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  background: transparent;
  font-family: var(--font-head);
  font-size: clamp(13px, 1.05vw, 15px);
  font-weight: 700;
  color: var(--body-grey);
  padding: 10px 20px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.iswitch__tab:hover { color: var(--ink); }
.iswitch__tab.is-on {
  background: var(--white);
  color: var(--brand);
  box-shadow: 0 1px 2px rgba(30, 30, 30, .08), 0 3px 10px rgba(30, 30, 30, .07);
}
.iswitch__tab:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

.iswitch__panel[hidden],
.iswitch__media[hidden] { display: none; }

.iswitch__stage { margin-top: clamp(28px, 4vw, 48px); }

/* Fixed ratio so switching swaps the picture without moving the page. */
.iswitch__media {
  margin: 0;
  line-height: 0;
  border-radius: 14px;
  overflow: hidden;
  background: var(--panel);
}
.iswitch__img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 7;
  object-fit: cover;
}

.iswitch__cap { max-width: 720px; margin: 0 auto; text-align: center; }
.iswitch__grade {
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand);
  margin: 0 0 8px;
}
.iswitch__h {
  font-family: var(--font-head);
  font-size: clamp(19px, 1.8vw, 25px);
  font-weight: 800;
  line-height: 1.13;
  letter-spacing: -.024em;
  color: var(--ink);
  margin: 0;
}
.iswitch__p {
  font-size: clamp(15.5px, 1.2vw, 17.5px);
  line-height: 1.6;
  color: var(--body-grey);
  margin: 10px 0 0;
}
.iswitch__more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
}
.iswitch__more:hover { color: var(--brand); }

/* The incoming panel fades up. Held off when the visitor asked for less. */
@media (prefers-reduced-motion: no-preference) {
  .iswitch__panel.is-fresh,
  .iswitch__media.is-fresh { animation: iswitch-in .34s ease both; }
}
@keyframes iswitch-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 860px) {
  .iswitch__img { aspect-ratio: 4 / 3; }
}
/* Left aligned on a phone, where centred blocks of text read badly. */
@media (max-width: 560px) {
  .iswitch__head, .iswitch__cap { text-align: left; }
  .iswitch__segwrap { text-align: left; }
}

/* ==========================================================================
   Hub panels ported from Contour: stats, chart, projects, video, SEO
   --------------------------------------------------------------------------
   Contour's hub is dark with inline styles on nearly every element. This keeps
   the light chrome the Eco Foam hub already had and classes everything, so the
   panels are themeable and the markup is readable.
   ========================================================================== */

/* Shared bits ------------------------------------------------------------- */
.hub-btn--danger { color: var(--accent); border-color: var(--accent); }
.hub-btn.is-active { background: var(--brand); border-color: var(--brand); color: var(--white); }

.hub-form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.hub-field em { font-style: normal; font-weight: 400; color: var(--body-grey); }
.hub-field select,
.hub-field textarea,
.hub-field input[type="url"],
.hub-field input[type="file"] {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 10px 12px;
}
.hub-field textarea { resize: vertical; }

.hub-inline { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-block: 10px; }
.hub-inline input[type="url"] { flex: 1 1 240px; min-width: 0; }

.hub-drawer {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 6px;
  margin-block: 18px;
}
.hub-drawer__head {
  cursor: pointer;
  padding: 14px 18px;
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}
.hub-drawer[open] .hub-drawer__head { border-bottom: 1px solid var(--line); }
.hub-drawer .hub-form { padding: 18px; }

.hub-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.hub-thumbs img { width: 64px; height: 64px; object-fit: cover; border-radius: 4px; border: 1px solid var(--line); }

.hub-x {
  font: inherit;
  line-height: 1;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--body-grey);
  padding: 3px 8px;
  cursor: pointer;
}
.hub-x:hover { border-color: var(--accent); color: var(--accent); }
.is-more { display: none; }
.hub-showall { margin-top: 14px; }

.hub-chip {
  display: inline-block;
  font-family: var(--font-head);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 3px 9px;
  background: var(--panel-alt);
  color: var(--body-grey);
}
.hub-chip--dedicated,
.hub-chip--complete { background: var(--brand); color: var(--white); }
.hub-chip--evergreen,
.hub-chip--editing { background: var(--deep); color: var(--white); }
.hub-chip--shooting { background: var(--accent); color: var(--white); }

/* Enquiry stats and chart ------------------------------------------------- */
.hub-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 1px; background: var(--line); border-radius: 6px; overflow: hidden; margin-bottom: 18px; }
.hub-stat { background: var(--white); padding: 18px 16px; text-align: center; }
.hub-stat b { display: block; font-family: var(--font-head); font-size: 30px; font-weight: 800; letter-spacing: -.03em; color: var(--ink); line-height: 1; }
.hub-stat span { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--body-grey); margin-top: 6px; }
.hub-stat--now b { color: var(--brand); }

.hub-chart { background: var(--white); border: 1px solid var(--line); border-radius: 6px; padding: 18px 18px 12px; margin-bottom: 22px; }
.hub-chart__cap { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--body-grey); margin: 0 0 16px; }
.hub-chart__bars { display: flex; align-items: flex-end; gap: 4px; height: 110px; }
.hub-chart__col { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; }
.hub-chart__col b { font-size: 10px; font-weight: 700; color: var(--body-grey); min-height: 13px; }
.hub-chart__col i { display: block; width: 100%; background: var(--rule-strong); border-radius: 3px 3px 0 0; min-height: 2px; }
.hub-chart__col i.is-now { background: var(--brand); }
.hub-chart__col span { font-size: 8.5px; color: var(--body-grey); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* Project cards ----------------------------------------------------------- */
.hub-projgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.hub-projcard { background: var(--white); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; }
.hub-projcard img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.hub-projcard__blank { aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; background: var(--panel); color: var(--muted); font-size: 12px; }
.hub-projcard__body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.hub-projcard__body h3 { font-family: var(--font-head); font-size: 15px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); margin: 0; line-height: 1.3; }
.hub-projcard__meta { font-size: 12.5px; color: var(--body-grey); margin: 0; }
.hub-projcard__acts { display: flex; gap: 14px; margin: auto 0 0; padding-top: 10px; font-size: 12.5px; font-weight: 700; }
.hub-projcard__del { color: var(--accent); }

/* Video tracker ----------------------------------------------------------- */
.hub-vp-list { display: flex; flex-direction: column; gap: 10px; }
.hub-vp { background: var(--white); border: 1px solid var(--line); border-radius: 6px; }
.hub-vp__head { cursor: pointer; padding: 14px 18px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hub-vp__name { flex: 1 1 200px; font-family: var(--font-head); font-size: 14.5px; font-weight: 700; color: var(--ink); }
.hub-vp__count { font-size: 12px; color: var(--body-grey); font-variant-numeric: tabular-nums; }
.hub-vp__bar { width: 52px; height: 4px; background: var(--line); border-radius: 2px; overflow: hidden; }
.hub-vp__bar i { display: block; height: 100%; background: var(--brand); }
.hub-vp__body { border-top: 1px solid var(--line); padding: 18px; }
.hub-vp__player { position: relative; padding-bottom: 56.25%; height: 0; border-radius: 6px; overflow: hidden; margin-top: 14px; }
.hub-vp__player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.hub-shot { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 14px 16px; margin-bottom: 8px; }
.hub-shot.is-done { opacity: .6; }
.hub-shot__check { display: flex; align-items: center; gap: 10px; font-family: var(--font-head); font-size: 14px; font-weight: 700; color: var(--ink); cursor: pointer; }
.hub-shot.is-done .hub-shot__check span { text-decoration: line-through; }
.hub-shot__desc { font-size: 13.5px; line-height: 1.55; color: var(--body-grey); margin: 8px 0 0; }
.hub-shot__ref { font-size: 12.5px; font-weight: 700; margin: 8px 0 0; }

/* SEO field editor -------------------------------------------------------- */
.hsa-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.hsa-group { margin-bottom: 32px; }
.hsa-n { font-family: var(--font-body); font-size: 12px; font-weight: 600; color: var(--body-grey); margin-left: 6px; }
.hsa-warnpill { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); background: var(--panel-alt); border-radius: 999px; padding: 3px 9px; margin-left: 8px; }
.hsa-table { table-layout: fixed; }
.hsa-table th em { font-style: normal; font-weight: 400; color: var(--muted); }
.hsa-table th:first-child, .hsa-table td:first-child { width: 26%; }
.hsa-row.has-issue td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.hsa-name { display: block; font-family: var(--font-head); font-size: 13px; font-weight: 700; color: var(--ink); text-decoration: none; }
.hsa-name:hover { color: var(--brand); }
.hsa-slug { display: block; font-size: 11px; color: var(--body-grey); word-break: break-all; margin-top: 2px; }
.hsa-flags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.hsa-flag { font-style: normal; font-size: 9.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; border-radius: 3px; padding: 2px 6px; background: var(--panel-alt); color: var(--accent); }

.hsa-val { font-size: 13px; line-height: 1.5; color: var(--ink); cursor: pointer; padding: 5px 7px; border-radius: 4px; min-height: 28px; word-break: break-word; }
.hsa-val:hover { background: var(--panel); }
.hsa-val.is-empty { color: var(--muted); font-style: italic; }
.hsa-field textarea { width: 100%; font: inherit; font-size: 13px; line-height: 1.5; border: 1.5px solid var(--brand); border-radius: 4px; padding: 5px 7px; resize: vertical; }
.hsa-foot { display: flex; align-items: center; gap: 8px; margin-top: 5px; }
.hsa-cc { font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.hsa-cc.is-ok { color: var(--brand); }
.hsa-cc.is-warn { color: var(--accent); }
.hsa-cc.is-over { color: var(--accent); font-weight: 800; }
.hsa-cc.is-empty { color: var(--muted); }
.hsa-save { display: none; font: inherit; font-family: var(--font-head); font-size: 11px; font-weight: 700; background: var(--brand); color: var(--white); border: 0; border-radius: 4px; padding: 4px 12px; cursor: pointer; }
.hsa-save.is-on { display: inline-block; }
.hsa-save.is-saved { background: var(--deep); }

/* ==========================================================================
   WooCommerce
   --------------------------------------------------------------------------
   Woo ships its own stylesheet and it stays loaded. This layers the brand
   palette and type onto it rather than replacing it, so a Woo update cannot
   leave the shop unstyled. Selectors are scoped under .woocommerce to keep
   them off the rest of the site.
   ========================================================================== */
.woo { background: var(--white); }

/* Product grid ------------------------------------------------------------ */
.woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: clamp(18px, 2.4vw, 32px);
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Woo's own float layout fights the grid, so it is turned off. */
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none; display: none; }
.woocommerce ul.products li.product {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  clear: none !important;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.woocommerce ul.products li.product:hover {
  border-color: var(--rule-strong);
  box-shadow: 0 6px 20px rgba(30, 30, 30, .07);
}
.woocommerce ul.products li.product a img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: var(--panel);
  margin: 0;
  padding: 14px;
  box-shadow: none;
}
.woocommerce ul.products li.product .woocommerce-loop-product__link { padding: 0; }
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--font-head);
  font-size: 16px !important;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.015em;
  color: var(--ink);
  padding: 16px 18px 0 !important;
  margin: 0;
}
.woocommerce ul.products li.product .price {
  display: block;
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: 800;
  color: var(--ink);
  padding: 8px 18px 0;
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.woocommerce ul.products li.product .price del { color: var(--muted); font-weight: 600; }
.woocommerce ul.products li.product .price ins { text-decoration: none; color: var(--accent); }
.woocommerce ul.products li.product .button {
  margin: 14px 18px 18px;
  margin-top: auto;
}
.woocommerce span.onsale {
  top: 12px;
  right: 12px;
  left: auto;
  min-height: 0;
  min-width: 0;
  line-height: 1;
  border-radius: 999px;
  padding: 6px 12px;
  background: var(--accent);
  color: var(--white);
  font-family: var(--font-head);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* Buttons ----------------------------------------------------------------- */
.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.005em;
  line-height: 1.2;
  color: var(--white);
  background: var(--brand);
  border: 0;
  border-radius: 4px;
  padding: 12px 20px;
  text-decoration: none;
  text-align: center;
}
.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover { background: var(--brand-dark); color: var(--white); }
.woocommerce a.added_to_cart {
  display: block;
  margin: 0 18px 16px;
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 700;
  color: var(--brand);
}
.woocommerce .button:focus-visible,
.woocommerce a.button:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

/* Single product ---------------------------------------------------------- */
.woocommerce div.product {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(28px, 4vw, 64px);
  row-gap: 0;
}
.woocommerce div.product .woocommerce-product-gallery {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
  grid-column: 1;
}
.woocommerce div.product .woocommerce-product-gallery__wrapper {
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--panel);
}
.woocommerce div.product div.summary {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  grid-column: 2;
}
.woocommerce div.product .product_title {
  font-family: var(--font-head);
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.028em;
  color: var(--ink);
  margin: 0 0 14px;
  padding: 0;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-family: var(--font-head);
  font-size: 26px;
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 18px;
  font-variant-numeric: tabular-nums;
}
.woocommerce div.product .woocommerce-product-details__short-description {
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--body-grey);
  margin-bottom: 22px;
}
.woocommerce div.product form.cart { margin-bottom: 22px; display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
.woocommerce div.product form.cart .quantity { margin: 0; }
.woocommerce .quantity input.qty {
  width: 76px;
  height: 100%;
  min-height: 44px;
  font: inherit;
  font-weight: 700;
  text-align: center;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 4px;
}
.woocommerce div.product .product_meta {
  font-size: 13.5px;
  color: var(--body-grey);
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.woocommerce div.product .product_meta > span { display: block; margin-bottom: 4px; }

/* Tabs, upsells and related run full width under the two columns. */
.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .upsells,
.woocommerce div.product .related {
  grid-column: 1 / -1;
  margin-top: clamp(36px, 5vw, 64px);
}
.woocommerce div.product .woocommerce-tabs ul.tabs {
  padding: 0;
  margin: 0 0 24px;
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before { border: 0; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: transparent;
  border: 0;
  border-radius: 0;
  margin: 0;
  padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  display: block;
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 700;
  color: var(--body-grey);
  padding: 12px 18px;
  border-bottom: 2px solid transparent;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--brand); border-bottom-color: var(--brand); }
.woocommerce div.product .woocommerce-tabs .panel > h2 {
  font-family: var(--font-head);
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 0 0 14px;
}
.woocommerce div.product .upsells > h2,
.woocommerce div.product .related > h2 {
  font-family: var(--font-head);
  font-size: clamp(21px, 2.4vw, 30px);
  font-weight: 800;
  letter-spacing: -.024em;
  color: var(--ink);
  margin: 0 0 22px;
}

/* Tables: cart, checkout review, order details ---------------------------- */
.woocommerce table.shop_table {
  border: 1px solid var(--line);
  border-radius: 8px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 15px;
}
.woocommerce table.shop_table th {
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--body-grey);
  background: var(--panel);
  padding: 14px 16px;
}
.woocommerce table.shop_table td { padding: 16px; border-top: 1px solid var(--line); color: var(--ink); }
.woocommerce table.shop_table img { width: 60px; border-radius: 4px; }
.woocommerce-cart table.cart td.actions .coupon .input-text {
  width: 180px;
  font: inherit;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 4px;
}
.woocommerce .cart-collaterals .cart_totals > h2,
.woocommerce-checkout h3 {
  font-family: var(--font-head);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--ink);
  margin-bottom: 14px;
}

/* Forms ------------------------------------------------------------------- */
.woocommerce form .form-row label { font-size: 13.5px; font-weight: 600; color: var(--ink); margin-bottom: 5px; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text {
  font: inherit;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 11px 13px;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus { outline: 2px solid var(--brand); outline-offset: 0; border-color: var(--brand); }

/* Notices ----------------------------------------------------------------- */
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error {
  font-size: 15px;
  border-top: 0;
  border-left: 3px solid var(--brand);
  border-radius: 0 6px 6px 0;
  background: var(--panel);
  color: var(--ink);
  padding: 16px 18px;
}
.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-info::before { color: var(--brand); }
.woocommerce .woocommerce-error { border-left-color: var(--accent); }
.woocommerce .woocommerce-error::before { color: var(--accent); }

/* Breadcrumb and pagination ----------------------------------------------- */
.woocommerce .woocommerce-breadcrumb {
  font-size: 13px;
  color: var(--body-grey);
  margin-bottom: 22px;
}
.woocommerce .woocommerce-breadcrumb a { color: var(--body-grey); }
.woocommerce .woocommerce-breadcrumb a:hover { color: var(--brand); }
.woocommerce nav.woocommerce-pagination ul { border: 0; gap: 6px; display: flex; }
.woocommerce nav.woocommerce-pagination ul li { border: 0; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  font-family: var(--font-head);
  font-weight: 700;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 9px 14px;
  color: var(--ink);
}
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--white);
}

/* Result count and sort select sit on one line above the grid. */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering { font-size: 13.5px; color: var(--body-grey); margin-bottom: 22px; }
.woocommerce .woocommerce-ordering select {
  font: inherit;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 8px 11px;
  color: var(--ink);
  background: var(--white);
}

@media (max-width: 900px) {
  .woocommerce div.product { grid-template-columns: 1fr; row-gap: 26px; }
  .woocommerce div.product .woocommerce-product-gallery,
  .woocommerce div.product div.summary { grid-column: 1; }
}
@media (max-width: 480px) {
  .woocommerce div.product form.cart { flex-direction: column; }
  .woocommerce div.product form.cart .button { width: 100%; }
}