/* ==========================================================================
   BioGreen — home page layout.
   Builds on css/design-system.css: this file only adds page structure,
   the header/footer chrome, and the responsive rules the token package
   does not ship. Colors, radii, shadows and type all come from tokens.
   ========================================================================== */

/* ---------- shared helpers ---------- */

/* The UA rule for [hidden] is display:none at the lowest specificity, so any
   class here that sets `display` would silently un-hide the element. JS toggles
   visibility with `el.hidden`, so this has to win. */
[hidden] { display: none !important; }

.icon { flex: none; vertical-align: middle; }

/* The sprite is markup only. `hidden` alone does not hide an <svg> — browsers
   do not apply the UA [hidden] rule to SVG elements, so it would occupy the
   default 300x150 replaced-element box at the top of the page. */
#bg-icon-sprite { display: none; }

.section { padding-block: 88px; }
.section--tight { padding-block: 64px; }

.shell { max-width: var(--container-max); margin-inline: auto; padding-inline: 28px; }

.stack-sm { display: flex; flex-direction: column; gap: var(--space-3); }

.btn-row { display: flex; gap: 12px; flex-wrap: wrap; }

.section__head--center { text-align: center; max-width: 720px; margin-inline: auto; }
.section__sub {
  font-size: var(--fs-subtitle); color: var(--text-muted);
  line-height: var(--lh-snug); margin: 0; max-width: 640px;
}
.section__head--center .section__sub { margin-inline: auto; }

/* Skip link. Hidden by clipping, not by an off-screen offset: in RTL a
   negative inset-inline-start pushes the element thousands of px to the RIGHT,
   which widens the page's paint area. */
.skip-link {
  position: absolute; inset-inline-start: 12px; top: 12px; z-index: 200;
  background: #fff; color: var(--color-green-deep); padding: 10px 18px;
  border-radius: var(--radius-pill); box-shadow: var(--shadow-lift);
  clip-path: inset(50%); pointer-events: none;
}
.skip-link:focus { clip-path: none; pointer-events: auto; }

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(247, 248, 243, 0.9);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-card);
}
.site-header__bar {
  display: flex; align-items: center; gap: 24px; height: 76px;
}
.site-header__logo { display: flex; align-items: center; }
.site-header__logo img { height: 38px; width: auto; display: block; }

.nav { display: flex; gap: 2px; margin-inline-start: 8px; }
.nav__link {
  font-family: var(--font-display); font-weight: var(--fw-medium); font-size: 15px;
  color: var(--text-muted); padding: 8px 11px; border-radius: 8px;
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.nav__link:hover { color: var(--color-green-deep); background: var(--color-green-tint); }
.nav__link[aria-current="page"] { color: var(--color-green-deep); font-weight: var(--fw-semibold); }

.site-header__actions { margin-inline-start: auto; display: flex; gap: 10px; align-items: center; }

.nav-toggle {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-inline-start: auto;
  background: #fff; border: 1px solid var(--border-card); border-radius: var(--radius-sm);
  color: var(--color-green-deep); cursor: pointer;
}

.mobile-nav {
  border-top: 1px solid var(--border-card); background: var(--surface-page);
  padding: 16px 28px 24px;
}
.mobile-nav__link {
  display: block; padding: 12px 0; font-family: var(--font-display);
  font-weight: var(--fw-medium); font-size: 17px; color: var(--color-green-deep);
  border-bottom: 1px solid var(--border-card);
}
.mobile-nav .btn-row { margin-top: 18px; }

/* ==========================================================================
   Block 1 — Hero
   ========================================================================== */

.hero {
  position: relative; overflow: hidden;
  padding-block: 72px 64px;
  background-color: var(--surface-page);
  background-image:
    radial-gradient(120% 90% at 88% -10%, rgba(127, 194, 65, 0.10), transparent 60%),
    radial-gradient(80% 70% at 8% 8%, rgba(43, 120, 163, 0.06), transparent 55%);
}
.hero__bg {
  position: absolute; inset-inline-start: 0; top: 0;
  width: 46%; height: 100%; object-fit: cover; opacity: 0.5;
  mask-image: linear-gradient(to right, transparent, #000 60%);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 60%);
  pointer-events: none;
}
.hero__grid {
  position: relative;
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center;
}
.hero h1 { margin-bottom: 18px; }
.hero__lead {
  font-size: var(--fs-lead); color: var(--color-green-deep);
  font-weight: var(--fw-medium); line-height: var(--lh-snug);
  max-width: 560px; margin-bottom: 14px;
}
.hero__sub {
  font-size: var(--fs-body); color: var(--text-muted);
  line-height: var(--lh-snug); max-width: 560px; margin-bottom: 28px;
}
.hero__trust { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }

.hero__media {
  border-radius: var(--radius-card); overflow: hidden;
  box-shadow: var(--shadow-lift); aspect-ratio: 4 / 3; background: var(--surface-soft);
}
.hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ==========================================================================
   Block 2 — Three doorways
   ========================================================================== */

.doorways {
  background: var(--surface-card);
  border-block: 1px solid var(--border-card);
  padding-block: 28px;
}
.doorways__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

/* ==========================================================================
   Block 3 — Services
   ========================================================================== */

.services__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px;
}

/* ==========================================================================
   Block 4 — Clients
   ========================================================================== */

.clients { background: var(--surface-card); border-block: 1px solid var(--border-card); }
.clients__grid {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 16px; margin-top: 40px;
}
.client {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 88px; padding: 16px 14px;
  border: 1px solid var(--border-card); border-radius: var(--radius-md);
  background: var(--surface-page);
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.client:hover { border-color: var(--color-sage); box-shadow: var(--shadow-air); }

/* Client names. Logos are deliberately not used until each company approves
   the use of its mark, so the row is set in the brand display face. */
.client__name {
  font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: 17px;
  color: var(--color-ink-soft); letter-spacing: -0.01em; opacity: 0.75;
  transition: opacity var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.client:hover .client__name { opacity: 1; color: var(--color-green-deep); }

/* ==========================================================================
   Block 5 — Import route
   ========================================================================== */

.route-section { background: var(--surface-soft); }
.route-wrap { margin-top: 48px; }
.bg-route__label { font-size: 13px; }

/* ==========================================================================
   Block 6 — Products
   ========================================================================== */

.products__head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 24px; margin-bottom: 40px;
}
.products__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }

.product { padding: 0; overflow: hidden; display: flex; flex-direction: column; position: relative; }

/* Stretched link: the title is the real link, and this pseudo-element makes
   the whole card its hit area. The CTA row sits above it so its own buttons
   still work. Only products that have a page get this. */
.product__link { color: inherit; text-decoration: none; }
.product__link::after { content: ""; position: absolute; inset: 0; z-index: 0; }
.product:has(.product__link) { cursor: pointer; }
.product__link:focus-visible { outline: none; }
.product:has(.product__link:focus-visible) { box-shadow: var(--shadow-focus); }
.product:has(.product__link:hover) h3 { color: var(--color-green); }
/* Every card's photo sits in the same box, below a strip kept for the tags.
   The tags used to be laid over the photo, and since each photo has its own
   amount of white space around the product, one would start under the tags
   and the next well below them. Now the strip is reserved whether or not a
   product has tags, the photo is contained in what is left, and it is
   anchored to the top of that area — so in a row of cards every product
   starts at the same height and none is cropped. */
.product__media {
  position: relative; aspect-ratio: 4 / 3; background: #fff; overflow: hidden;
  padding: 54px 16px 14px;
}
.product__media img {
  display: block; width: 100%; height: 100%;
  object-fit: contain; object-position: 50% 0;
}
.product__labels {
  position: absolute; inset-inline: 12px; top: 12px;
  display: flex; gap: 6px; flex-wrap: nowrap; overflow: hidden;
}
.product__labels .bg-label { white-space: nowrap; }
.product__body {
  padding: var(--space-5); display: flex; flex-direction: column;
  gap: var(--space-3); flex: 1;
}
.product__body h3 { font-size: var(--fs-h4); margin: 0; }
.product__benefits { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.product__benefits li {
  display: flex; gap: 8px; align-items: center;
  font-size: var(--fs-card); color: var(--text-muted);
}
.product__benefits .icon { color: var(--color-green); }
/* One or two buttons, depending on whether the product has its own page. */
.product__cta {
  margin-top: auto; padding-top: var(--space-3);
  display: grid; gap: 8px;
  position: relative; z-index: 1;   /* above the stretched link */
}

/* ==========================================================================
   Block 7 — Working approach
   ========================================================================== */

.approach__grid {
  display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: center;
}
.approach__title h2 { margin-bottom: 10px; }
.approach__title p { font-size: var(--fs-subtitle); color: var(--text-muted); margin: 0; }

.checklist { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.checklist__item {
  display: flex; align-items: center; gap: 14px;
  background: var(--surface-card); border: 1px solid var(--border-card);
  border-radius: var(--radius-md); padding: 16px 18px;
  font-family: var(--font-display); font-weight: var(--fw-medium); font-size: 17px;
  color: var(--color-green-deep);
}
.checklist__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--radius-sm); flex: none;
  background: var(--color-sky); color: #1B5E80;
}

/* ==========================================================================
   Block 8 — Why BioGreen (deep green)
   ========================================================================== */

.why {
  background: var(--color-green-deep); color: var(--text-on-dark);
  position: relative; overflow: hidden;
}
.why__bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0.10; mix-blend-mode: screen; pointer-events: none;
}
.why .shell { position: relative; }
.why h2 { color: var(--text-on-dark); }
.why__head { text-align: center; max-width: 760px; margin-inline: auto; margin-bottom: 48px; }
.why__eyebrow { color: var(--color-logo-light-green); }
.why__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 40px; }
.why__item {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.why__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: var(--radius-sm); flex: none;
  background: rgba(255, 255, 255, 0.10); color: var(--color-logo-light-green);
}
.why__item span:last-child {
  font-family: var(--font-display); font-weight: var(--fw-medium); font-size: 18px;
}

/* ==========================================================================
   Block 9 — FAQ
   ========================================================================== */

.faq__list { display: flex; flex-direction: column; gap: 12px; margin-top: 40px; }
.faq__foot { text-align: center; margin-top: 32px; }
.bg-faq__a p { margin: 0; }

/* ==========================================================================
   Block 10 — Final CTA
   ========================================================================== */

.final-cta { background: var(--surface-card); border-top: 1px solid var(--border-card); padding-block: 64px; }
.final-cta__row {
  display: flex; justify-content: space-between; align-items: center;
  gap: 32px; flex-wrap: wrap;
}
.final-cta h2 { margin-bottom: 8px; }
.final-cta p { font-size: 19px; color: var(--text-muted); margin: 0; }

/* ==========================================================================
   Inner pages — shared section patterns
   (import & regulation; reused by the pages that follow)
   ========================================================================== */

/* Page hero: single column, text at the start edge, botanical plate behind. */
.page-hero {
  position: relative; overflow: hidden;
  padding-block: 64px 56px;
  background-color: var(--surface-page);
  background-image:
    radial-gradient(120% 90% at 88% -10%, rgba(127, 194, 65, 0.10), transparent 60%),
    radial-gradient(80% 70% at 8% 8%, rgba(43, 120, 163, 0.06), transparent 55%);
}
.page-hero__bg {
  position: absolute; inset-inline-end: 0; top: 0;
  width: 42%; height: 100%; object-fit: cover; opacity: 0.42;
  mask-image: linear-gradient(to left, transparent, #000 70%);
  -webkit-mask-image: linear-gradient(to left, transparent, #000 70%);
  pointer-events: none;
}
.page-hero__inner { position: relative; }
.page-hero h1 { font-size: 48px; max-width: 760px; margin-bottom: 18px; }
.page-hero__sub {
  font-size: var(--fs-subtitle); color: var(--text-muted);
  max-width: 640px; line-height: 1.55; margin-bottom: 26px;
}

/* Three-up card row, same breakpoints as the services grid but no top margin. */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

/* Photo slot — a labelled placeholder where the client still owes us an image.
   Deliberately not a stock photo: it names what belongs here. */
.photo-slot {
  position: relative; overflow: hidden;
  aspect-ratio: 5 / 4; border-radius: var(--radius-card);
  background: var(--surface-reg); border: 1px solid var(--border-reg);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 24px; text-align: center; color: var(--color-blue);
}
.photo-slot__grid { position: absolute; inset: 0; opacity: 0.7; }
.photo-slot__caption { position: relative; font-size: 13px; color: var(--text-muted); }

.included__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
}
.included__grid .checklist { margin-top: 28px; }

.audiences { background: var(--surface-soft); }

/* Catalogue -------------------------------------------------------------- */

.page-hero--tight { padding-block: 56px 32px; }

.catalog { padding-block: 8px 80px; }

/* The filter bar parks under the sticky header while the grid scrolls. */
.catalog__filters {
  position: sticky; top: 76px; z-index: 10;
  background: var(--surface-page); padding-block: 16px;
}
.catalog__filters .bg-tabs { overflow-x: auto; scrollbar-width: none; }
.catalog__filters .bg-tabs::-webkit-scrollbar { display: none; }
.catalog__filters .bg-tab { white-space: nowrap; }

.catalog__grid { margin-top: 28px; }

.catalog__empty {
  margin: 48px 0 0; text-align: center;
  font-size: var(--fs-subtitle); color: var(--text-muted);
}

.catalog__note {
  margin: 48px auto 0; max-width: 620px; text-align: center;
  font-size: var(--fs-small); color: var(--text-muted);
}

/* Centred pull quote closing the page — no rule, no indent. */
.quote-block__inner { max-width: 760px; margin-inline: auto; text-align: center; }
.quote-block__quote {
  border-inline-start: none; padding-inline-start: 0;
  font-size: 30px; text-align: center;
}
.quote-block__cta { margin-top: 32px; }

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer { background: var(--color-green-deep); color: var(--text-on-dark); padding-block: 56px; }
.site-footer__top {
  display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr 1.1fr; gap: 36px;
  padding-bottom: 40px; border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.site-footer__brand { display: flex; flex-direction: column; gap: 16px; }
.site-footer__brand img { height: 40px; width: auto; align-self: flex-start; filter: brightness(0) invert(1); opacity: 0.95; }
.site-footer__brand p { font-size: 15px; color: rgba(247, 248, 243, 0.72); line-height: 1.6; max-width: 300px; margin: 0; }
.site-footer__contact { display: flex; flex-direction: column; gap: 8px; font-size: 15px; }
.site-footer__contact a {
  display: inline-flex; gap: 8px; align-items: center;
  color: rgba(247, 248, 243, 0.85);
}
/* Phone numbers and e-mail are LTR runs inside an RTL paragraph. */
.site-footer__contact a > span,
.site-footer__contact a { unicode-bidi: isolate; }
.site-footer__contact a:hover { color: #fff; }
.footer-col { display: flex; flex-direction: column; gap: 10px; }
.footer-col__title {
  font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: 15px;
  color: var(--color-logo-light-green); margin-bottom: 4px;
}
.footer-col a { font-size: 15px; color: rgba(247, 248, 243, 0.78); }
.footer-col a:hover { color: #fff; }
/* Medical disclaimer, centred above the legal row. */
.site-footer__disclaimer {
  margin: 28px auto 0; max-width: 760px; text-align: center;
  font-size: 13px; line-height: 1.7; color: rgba(247, 248, 243, 0.6);
}

.site-footer__bottom {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  margin-top: 20px; padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 13px; color: rgba(247, 248, 243, 0.55); flex-wrap: wrap;
}
.site-footer__legal { display: inline-flex; align-items: center; gap: 10px; }
.site-footer__legal a { color: rgba(247, 248, 243, 0.78); font-size: 13px; }
.site-footer__legal a:hover { color: #fff; }
.site-footer__sep { color: rgba(247, 248, 243, 0.3); }
.site-footer__copy { unicode-bidi: isolate; }

/* ==========================================================================
   Quote modal
   ========================================================================== */

.modal[hidden] { display: none !important; }
.modal {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(6, 79, 58, 0.4);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.modal__panel {
  background: var(--surface-card); border-radius: var(--radius-form);
  box-shadow: var(--shadow-lift); width: min(620px, 100%);
  max-height: 90vh; overflow: auto;
}
.modal__head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; padding: 26px 28px 0;
}
.modal__head h2 { font-size: var(--fs-h3); margin: 0 0 6px; }
.modal__head p { font-size: var(--fs-small); color: var(--text-muted); margin: 0; }
/* Pinned to the far end, so it stays in its corner after a send, when the
   intro beside it is hidden and nothing is left to space it against. */
.modal__close {
  background: none; border: none; cursor: pointer; color: var(--text-muted);
  padding: 4px; border-radius: var(--radius-sm); flex: none;
  margin-inline-start: auto;
}
.modal__close:hover { color: var(--color-green-deep); background: var(--color-green-tint); }

.modal__form { padding: 22px 28px 28px; display: grid; gap: 16px; }

.form-step { display: grid; gap: 12px; }
.form-step__title {
  font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: 15px;
  color: var(--color-green-deep);
  display: flex; align-items: center; gap: 8px;
}
.form-step__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 999px; flex: none;
  background: var(--color-green-tint); color: var(--color-green-deep); font-size: 13px;
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid--full { grid-template-columns: 1fr; }

.choice-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.choice {
  display: flex; align-items: center; gap: 9px;
  border: 1.5px solid var(--border-card); border-radius: var(--radius-form);
  padding: 13px 15px; cursor: pointer; background: #fff;
  font-family: var(--font-body); font-size: 15px; color: var(--text-body);
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.choice:hover { border-color: var(--color-sage); }
.choice input { accent-color: var(--color-green); margin: 0; flex: none; }
.choice:has(input:checked) { border-color: var(--color-green); background: var(--color-green-tint); }
.choice:has(input:focus-visible) { box-shadow: var(--shadow-focus); }

.modal__note { font-size: 13px; color: var(--text-placeholder); text-align: center; margin: 0; }

.modal__done {
  padding: 28px; display: flex; flex-direction: column;
  align-items: center; gap: 16px; text-align: center;
}
.modal__done-mark {
  width: 64px; height: 64px; border-radius: 999px; background: var(--color-green-tint);
  display: flex; align-items: center; justify-content: center; color: var(--color-green);
}
.modal__done p { font-size: 18px; color: var(--text-muted); margin: 0; }

/* ==========================================================================
   Floating WhatsApp + mobile action bar
   ========================================================================== */

.fab { position: fixed; inset-inline-start: 22px; bottom: 22px; z-index: 60; box-shadow: var(--shadow-lift); }

.mobile-bar {
  display: none; position: fixed; inset-inline: 0; bottom: 0; z-index: 60;
  background: rgba(247, 248, 243, 0.96);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--border-card);
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.mobile-bar .bg-btn { padding: 12px 8px; font-size: 15px; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1080px) {
  .nav__link { padding: 8px 8px; font-size: 14px; }
  .site-header__actions .bg-btn span { display: none; }
  .site-header__actions .bg-btn { padding: 9px 12px; }
  .clients__grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 900px) {
  .section { padding-block: 64px; }
  .shell { padding-inline: 20px; }

  .nav, .site-header__actions { display: none; }
  .nav-toggle { display: inline-flex; }

  .hero { padding-block: 48px 40px; }
  .hero__grid { grid-template-columns: 1fr; gap: 32px; }
  .hero__media { order: -1; aspect-ratio: 16 / 10; }
  .hero__bg { width: 100%; opacity: 0.28; mask-image: none; -webkit-mask-image: none; }

  .doorways__grid { grid-template-columns: 1fr; }
  .services__grid { grid-template-columns: repeat(2, 1fr); }
  .products__grid { grid-template-columns: repeat(2, 1fr); }
  .products__head { flex-direction: column; align-items: flex-start; gap: 12px; }

  .approach__grid { grid-template-columns: 1fr; gap: 32px; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .page-hero { padding-block: 44px 40px; }
  .page-hero h1 { font-size: var(--fs-h1); }
  .page-hero__bg { width: 100%; opacity: 0.22; mask-image: none; -webkit-mask-image: none; }
  .included__grid { grid-template-columns: 1fr; gap: 32px; }
  /* The header collapses to 76px too, so the offset stays correct. */
  .catalog__filters { top: 76px; }
  .catalog { padding-block: 4px 56px; }
  .included__grid .photo-slot { order: 2; }
  .quote-block__quote { font-size: var(--fs-quote); }
  .why__grid { grid-template-columns: 1fr; gap: 0; }

  .site-footer__top { grid-template-columns: 1fr 1fr; gap: 32px; }

  .form-grid, .choice-row { grid-template-columns: 1fr; }

  .fab { display: none; }
  .mobile-bar { display: grid; }
  body { padding-bottom: 76px; }

  /* Import route on phones: the node circle keeps its design-system look —
     green with a white check, and a white circle for the current step — with
     the label beside it and a chevron dropping to the next step. */
  .bg-route {
    display: flex; flex-direction: column; align-items: stretch;
    gap: 38px;
    /* Shrink to the widest row and centre the whole chain, so it does not sit
       hard against the right edge with the left half empty. The steps still
       stretch to a common width, keeping the nodes on one axis. */
    width: fit-content; max-width: 100%; margin-inline: auto;
  }
  .bg-route__step {
    flex: none;
    flex-direction: row; align-items: center; justify-content: flex-start;
    gap: 14px; padding: 0; text-align: start;
  }
  .bg-route__label {
    max-width: none;
    font-family: var(--font-display); font-weight: var(--fw-medium);
    font-size: 17px; line-height: 1.35; color: var(--color-green-deep);
  }

  /* Chevron under the node, continuing the chain: a square with two borders
     turned 45°. Its background must be cleared through the --done / --active
     selectors too, which the design system uses to paint the line and which
     outrank a plain .bg-route__line override — otherwise it fills as a diamond.
     inset-inline-start:22px puts the box edge on the node's centre line;
     translateX(50%) then centres the box itself on that line. */
  .bg-route__line,
  .bg-route__step--done .bg-route__line,
  .bg-route__step--active .bg-route__line {
    inset-inline-start: 22px; inset-inline-end: auto;
    top: auto; bottom: -24px; left: auto;
    width: 11px; height: 11px;
    background: none;
    border: 0;
    border-right: 2px solid var(--color-green);
    border-bottom: 2px solid var(--color-green);
    border-radius: 0 0 2px 0;
    transform: translateX(50%) rotate(45deg);
  }
  .bg-route__step:last-child .bg-route__line { display: none; }
}

@media (max-width: 620px) {
  .services__grid, .products__grid, .grid-3 { grid-template-columns: 1fr; }
  .clients__grid { grid-template-columns: repeat(2, 1fr); }
  .checklist { grid-template-columns: 1fr; }
  .site-footer__top { grid-template-columns: 1fr; }
  .hero .btn-row .bg-btn { flex: 1 1 100%; }
}

/* Visually hidden but available to screen readers — used where a field label
   would repeat the question already shown as the step title. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ==========================================================================
   Product page (pp-)
   Generated by tools/build-product-pages.py — a "product dossier": hero with
   the six product icons, then one tabbed panel per section.
   ========================================================================== */

.pp-hero {
  background: var(--surface-page);
  border-bottom: 1px solid var(--border-card);
  padding-block: 48px 40px;
}
.pp-hero__grid {
  display: grid; grid-template-columns: 1.15fr 0.85fr;
  gap: 48px; align-items: center;
}
.pp-hero h1 { margin-bottom: 4px; }
.pp-hero__subtitle {
  font-family: var(--font-display); font-size: var(--fs-h4);
  color: var(--text-muted); font-weight: var(--fw-medium); margin-bottom: 18px;
}
/* Heebo like every other heading on the page. This was the one place a third
   family appeared, and against the h1 right above it it read as a mistake
   rather than as emphasis. The serif is kept for pull quotes, where it has
   something to contrast with. */
.pp-hero__tagline {
  font-family: var(--font-display); font-weight: var(--fw-medium);
  font-size: 24px; line-height: var(--lh-snug);
  color: var(--color-green-deep); margin-bottom: 14px;
}
.pp-hero__lede {
  font-size: var(--fs-body); color: var(--text-muted);
  line-height: var(--lh-snug); max-width: 560px; margin-bottom: 28px;
}

/* Product shot: the brief wants it on clean light ground, nothing around it. */
.pp-hero__media {
  background: #fff; border: 1px solid var(--border-card);
  border-radius: var(--radius-container); padding: 28px;
  box-shadow: var(--shadow-card);
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1 / 1;
}
.pp-hero__media img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* The six icons. Each SVG already contains its own caption, so there is no
   text here — the label lives in alt=. Heights differ between files, so the
   row is normalised by a fixed box rather than by the intrinsic size. */
/* Sized by HEIGHT, not by an equal-width grid: the files run from 183x243 to
   307x257, so equal columns would shrink the wide ones optically. Equal height
   + natural width keeps all six reading at the same weight, and they wrap on
   their own when the column cannot hold a single row. */
.pp-icons {
  list-style: none; margin: 0 0 28px; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px;
}
.pp-icons li {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  padding: 10px;
  border: 1px solid var(--border-card); border-radius: var(--radius-md);
  background: #fff;
}
.pp-icons img { height: 80px; width: auto; display: block; }

/* ---- tab bar ---- */

.pp-tabbar {
  position: sticky; top: 76px; z-index: 10;
  background: var(--surface-page);
  border-bottom: 1px solid var(--border-card);
}
.pp-tabbar .bg-tabs { border-bottom: none; overflow-x: auto; scrollbar-width: none; }
.pp-tabbar .bg-tabs::-webkit-scrollbar { display: none; }
.pp-tabbar .bg-tab { white-space: nowrap; }

.pp-panels { padding-block: 48px 72px; }
.pp-panel { max-width: 820px; }
.pp-panel__title { font-size: var(--fs-h3); margin-bottom: 20px; }
.pp-panel p { color: var(--text-muted); line-height: var(--lh-body); }
.pp-panel h4 {
  font-size: var(--fs-h4); color: var(--color-green-deep); margin: 24px 0 8px;
}

.pp-list { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 10px; }
.pp-list li {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: var(--fs-card); color: var(--text-body);
}
.pp-list .icon { color: var(--color-green); margin-top: 4px; }

/* Absorption story: old powder -> liposomal -> micro-micelle. */
.pp-steps__title { margin-top: 32px; }
.pp-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.pp-step {
  display: flex; gap: 16px; align-items: flex-start;
  background: var(--surface-card); border: 1px solid var(--border-card);
  border-radius: var(--radius-md); padding: 18px 20px;
}
.pp-step__num {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 34px; height: 34px; border-radius: 999px;
  background: var(--color-green-tint); color: var(--color-green-deep);
  font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 15px;
}
.pp-step h4 { margin: 0 0 4px; font-size: 18px; }
.pp-step p { margin: 0; font-size: var(--fs-card); }

.pp-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pp-card {
  background: var(--surface-card); border: 1px solid var(--border-card);
  border-radius: var(--radius-md); padding: 20px;
}
.pp-card h4 { margin: 0 0 6px; font-size: 18px; }
.pp-card p { margin: 0; font-size: var(--fs-card); }

.pp-note {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--surface-reg); border: 1px solid var(--border-reg);
  border-radius: var(--radius-md); padding: 18px 20px; margin-top: 16px;
}
.pp-note__icon {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 40px; height: 40px; border-radius: var(--radius-sm);
  background: #fff; color: var(--color-blue);
}
.pp-note h4 { margin: 0 0 4px; font-size: 17px; }
.pp-note p { margin: 0; font-size: var(--fs-card); }
.pp-note--warn { background: var(--color-amber-tint); border-color: #EBC79B; }
.pp-note--warn h4 { color: var(--color-terracotta); }

/* Medical cautions. Calm, per the brand — never a red alert. */
.pp-notice {
  background: var(--surface-product); border: 1px solid #E0D2B3;
  border-radius: var(--radius-md); padding: 22px 24px; margin-top: 24px;
}
.pp-notice h4 { margin: 0 0 8px; font-size: 17px; }
.pp-notice p { margin: 0 0 10px; font-size: var(--fs-card); }
.pp-notice ul { margin: 0; padding-inline-start: 20px; }
.pp-notice li { font-size: var(--fs-card); color: var(--text-muted); margin-bottom: 4px; }
.pp-notice__footer { margin-top: 12px !important; font-weight: var(--fw-semibold); }

/* Content authored in the WordPress editor. The tags are whatever the editor
   produced, so the page's typography is applied by element rather than class. */
.pp-prose > :first-child { margin-top: 0; }
.pp-prose > :last-child { margin-bottom: 0; }
.pp-prose p { color: var(--text-muted); line-height: var(--lh-body); margin: 0 0 1em; }
.pp-prose h2, .pp-prose h3 {
  font-size: var(--fs-h4); color: var(--color-green-deep); margin: 28px 0 8px;
}
.pp-prose h4 { font-size: 18px; margin: 24px 0 6px; }
.pp-prose ol { margin: 0 0 1em; padding-inline-start: 22px; }
.pp-prose li { font-size: var(--fs-card); color: var(--text-muted); margin-bottom: 8px; }

/* A plain <ul> from the editor gets the same green tick as a hand-authored
   list, so prose written in WordPress still reads as part of the design.
   The tick is drawn from two borders rather than an icon, since the editor
   only ever produces a bare <li>. Physical sides on purpose — the glyph is
   the same shape in either text direction. */
.pp-prose ul { margin: 0 0 1em; padding-inline-start: 0; list-style: none; }
.pp-prose ul > li { position: relative; padding-inline-start: 26px; }
.pp-prose ul > li::before {
  content: ""; position: absolute; inset-inline-start: 2px; top: 0.42em;
  width: 13px; height: 7px;
  border-left: 2px solid var(--color-green);
  border-bottom: 2px solid var(--color-green);
  transform: rotate(-45deg);
}
.pp-prose strong { color: var(--color-green-deep); font-weight: var(--fw-semibold); }
.pp-prose a { text-decoration: underline; text-underline-offset: 3px; }
.pp-prose img { max-width: 100%; height: auto; border-radius: var(--radius-md); }
.pp-prose table { width: 100%; border-collapse: collapse; margin: 0 0 1em; }
.pp-prose th, .pp-prose td {
  border: 1px solid var(--border-card); padding: 10px 12px;
  font-size: var(--fs-card); text-align: start;
}
.pp-prose th { background: var(--surface-soft); color: var(--color-green-deep); font-weight: var(--fw-semibold); }

.pp-figure { margin: 0; }
.pp-figure img {
  width: 100%; border-radius: var(--radius-card);
  border: 1px solid var(--border-card); display: block;
}

/* ---- quote block ---- */

.pp-quote { background: var(--surface-soft); padding-block: 72px; }
.pp-quote__inner { max-width: 720px; margin-inline: auto; }
.pp-quote__head { text-align: center; margin-bottom: 32px; }
.pp-quote__head p { font-size: var(--fs-subtitle); color: var(--text-muted); margin: 0; }

.pp-form {
  background: var(--surface-card); border: 1px solid var(--border-card);
  border-radius: var(--radius-form); padding: 28px; display: grid; gap: 16px;
}
.pp-consent {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: var(--fs-small); color: var(--text-muted); cursor: pointer;
}
.pp-consent input { accent-color: var(--color-green); margin-top: 3px; flex: none; }
.pp-privacy { margin: 0; font-size: 13px; color: var(--text-placeholder); text-align: center; }

.pp-form__done {
  background: var(--surface-card); border: 1px solid var(--border-card);
  border-radius: var(--radius-form); padding: 36px 28px;
  display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center;
}
.pp-form__done h3 { margin: 0; }
.pp-form__done p { margin: 0; color: var(--text-muted); }

@media (max-width: 900px) {
  .pp-hero { padding-block: 32px; }
  .pp-hero__grid { grid-template-columns: 1fr; gap: 28px; }
  .pp-hero__media { order: -1; aspect-ratio: 4 / 3; padding: 18px; }
  /* 3x2 on phones. Equal-width cells are safe here because at this height
     even the widest file (24h, ratio 1.19) fits without being width-capped,
     so the icons still share one optical size. */
  .pp-icons { display: grid; grid-template-columns: repeat(3, 1fr); }
  .pp-icons img { height: 76px; max-width: 100%; }
  .pp-cards { grid-template-columns: 1fr; }
  .pp-panels { padding-block: 32px 56px; }
  .pp-quote { padding-block: 48px; }
  .pp-form { padding: 20px; }

  /* Eight tabs need 865px and a phone gives 335, so more than half of them sat
     off-screen behind a scroll nobody could see. Wrap them instead: every tab
     is visible at once, which is the only way to know the page has eight
     sections. The underline marker cannot survive wrapping — rows above the
     last one have no container edge to sit on — so each tab becomes its own
     outlined pill and the active one fills in. */
  .pp-tabbar { position: static; border-bottom: none; }
  .pp-tabbar .bg-tabs {
    flex-wrap: wrap; overflow-x: visible; gap: 8px;
    border-bottom: none; padding-block: 14px;
  }
  .pp-tabbar .bg-tab {
    white-space: normal;
    font-size: 13px; padding: 9px 13px;
    border: 1px solid var(--border-card); border-radius: 999px;
    margin-bottom: 0; background: #fff;
  }
  .pp-tabbar .bg-tab--active {
    color: #fff; background: var(--color-green);
    border-color: var(--color-green);
  }
}

@media (max-width: 420px) {
  .pp-icons img { height: 64px; }
}

/* Shown only when a submission fails to reach the webhook. The form stays on
   screen with the typed details intact, so nothing has to be retyped. */
.form-error {
  margin: 10px 0 0; padding: 10px 14px;
  border: 1px solid #D9534F; border-radius: var(--radius-md);
  background: #FDF3F3; color: #A33A36;
  font-size: var(--fs-card); line-height: var(--lh-snug);
}

/* ==========================================================================
   Quick contact — the short form above every page's footer
   ========================================================================== */
.quick-contact {
  background: var(--color-green-tint);
  border-top: 1px solid var(--border-card);
  padding-block: 40px;
}
.quick-contact__inner {
  display: grid; grid-template-columns: minmax(220px, 0.8fr) 2fr;
  gap: 32px; align-items: center;
}
.quick-contact__title { font-size: var(--fs-h3); color: var(--color-green-deep); margin: 0 0 6px; }
.quick-contact__head p { margin: 0; color: var(--text-muted); }
.quick-contact__form {
  display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 12px; align-items: start;
}
.quick-contact__form .bg-btn { white-space: nowrap; }
.quick-contact__form .form-error { grid-column: 1 / -1; }
.quick-contact__done {
  grid-column: 2; margin: 0; display: flex; gap: 10px; align-items: center;
  font-weight: var(--fw-semibold); color: var(--color-green-deep);
}
.quick-contact__done .icon { color: var(--color-green); flex: none; }


/* ==========================================================================
   Footer — social / contact strip and the contact column
   ========================================================================== */
.footer-social {
  display: flex; justify-content: center; gap: 12px; flex-wrap: wrap;
  padding-bottom: 32px; margin-bottom: 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.footer-social a {
  width: 44px; height: 44px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: rgba(247, 248, 243, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.22);
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.footer-social a:hover,
.footer-social a:focus-visible {
  background: #fff; color: var(--color-green-deep); border-color: #fff;
}

.footer-contact { font-style: normal; }
.footer-contact a,
.footer-contact > span {
  display: inline-flex; gap: 8px; align-items: center;
  font-size: 15px; color: rgba(247, 248, 243, 0.85);
}
.footer-contact .icon { flex: none; opacity: 0.85; }
.footer-contact a:hover { color: #fff; }
.footer-contact__phone { font-weight: var(--fw-semibold); }
/* Numbers and addresses are LTR runs inside RTL text. */
.footer-contact [dir="ltr"] { unicode-bidi: isolate; }
.footer-contact > .footer-contact__note {
  margin-top: -6px; padding-inline-start: 24px;
  font-size: 13px; color: rgba(247, 248, 243, 0.6);
}
.footer-contact__note a { font-size: 13px; text-decoration: underline; text-underline-offset: 2px; }
.footer-contact__more { margin-top: 4px; font-size: 14px; color: var(--color-logo-light-green) !important; }

/* ==========================================================================
   Contact page
   ========================================================================== */
.contact-hero {
  background: var(--surface-page);
  border-bottom: 1px solid var(--border-card);
  padding-block: 56px 40px;
}
.contact-hero h1 { margin: 10px 0 8px; }
.contact-hero__sub { font-size: var(--fs-subtitle); color: var(--text-muted); margin: 0; }

.contact-body { padding-block: 48px 72px; }
.contact-grid {
  display: grid; grid-template-columns: 1.55fr 1fr; gap: 32px; align-items: start;
}
.contact-card,
.contact-details {
  background: var(--surface-card); border: 1px solid var(--border-card);
  border-radius: var(--radius-form); padding: 28px;
}
.contact-form { display: grid; gap: 18px; }
.contact-intent { border: 0; padding: 0; margin: 0; }
.choice-row--4 { grid-template-columns: 1fr 1fr; }

.contact-done { display: grid; gap: 12px; justify-items: center; text-align: center; padding-block: 24px; }
.contact-done h2 { margin: 0; font-size: var(--fs-h3); }
.contact-done p { margin: 0; color: var(--text-muted); max-width: 420px; }

.contact-details h2 { font-size: var(--fs-h4); color: var(--color-green-deep); margin: 0 0 18px; }
.contact-details__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.contact-details__list li { display: flex; gap: 14px; align-items: flex-start; }
.contact-details__list div { display: grid; gap: 2px; }
.contact-details__list strong { font-family: var(--font-display); font-size: 15px; color: var(--text-body); }
.contact-details__list a,
.contact-details__list span:not(.contact-details__icon) { color: var(--text-muted); }
.contact-details__list a:hover { color: var(--color-green-deep); }
.contact-details__list [dir="ltr"] { unicode-bidi: isolate; }
.contact-details__wa { font-size: 14px; color: var(--color-green) !important; }
.contact-details__icon {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-green-tint); color: var(--color-green);
}

@media (max-width: 1080px) {
  .site-footer__top { grid-template-columns: 1fr 1fr 1fr; }
  .site-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .site-footer__top { grid-template-columns: 1fr 1fr; }
  .quick-contact__inner { grid-template-columns: 1fr; gap: 18px; }
  .quick-contact__form { grid-template-columns: 1fr 1fr; }
  .quick-contact__form .bg-btn { grid-column: 1 / -1; }
  .quick-contact__done { grid-column: 1; }
  .contact-grid { grid-template-columns: 1fr; }
  .contact-hero { padding-block: 36px 28px; }
  .contact-body { padding-block: 28px 56px; }
}

@media (max-width: 620px) {
  .quick-contact__form { grid-template-columns: 1fr; }
  .choice-row--4 { grid-template-columns: 1fr; }
  .contact-card, .contact-details { padding: 20px; }
  .site-footer__top { grid-template-columns: 1fr; }
}

/* Phone and e-mail fields run right to left like every other field.
   Browsers set a phone field left to right, which put its placeholder at the
   far left and, worse, flipped the placeholder's asterisk to the other end
   from the rest — "* טלפון" read as "טלפון *" there. A typed number or address
   still displays in its own order inside a right-to-left box: "050-1234567"
   and "name@company.co.il" are each one left-to-right run. */
.bg-input[type="tel"],
.bg-input[type="email"] { direction: rtl; text-align: right; }

/* ==========================================================================
   Information pop-up (native <dialog>) — e.g. "יבואן נאות"
   Same backdrop, corners and close button as the quote pop-up. The browser
   handles focus, Esc and the top layer; site.js adds backdrop-click to close.
   ========================================================================== */
.info-dialog {
  border: 0; padding: 0; width: min(640px, calc(100% - 32px));
  max-height: calc(100vh - 48px); overflow: auto;
  background: var(--surface-card); color: var(--text-body);
  border-radius: var(--radius-form); box-shadow: var(--shadow-lift);
}
.info-dialog::backdrop {
  background: rgba(6, 79, 58, 0.4);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.info-dialog__head {
  display: flex; align-items: center; gap: 16px; padding: 22px 28px 0;
}
.info-dialog__body { padding: 10px 28px 30px; display: grid; gap: 14px; }
.info-dialog__body h2 { font-size: var(--fs-h3); color: var(--color-green-deep); margin: 0; }
.info-dialog__body p { margin: 0; line-height: var(--lh-body); color: var(--text-muted); }
.info-dialog__body .info-dialog__lead {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: var(--fs-subtitle); color: var(--color-green-deep); line-height: var(--lh-snug);
}
.info-dialog__body .info-dialog__benefit {
  background: var(--color-green-tint); color: var(--text-body);
  border-inline-start: 3px solid var(--color-green);
  border-radius: var(--radius-sm); padding: 14px 16px;
}
.info-dialog__benefit strong { color: var(--color-green-deep); }

@media (max-width: 620px) {
  .info-dialog__head { padding: 18px 20px 0; }
  .info-dialog__body { padding: 8px 20px 24px; }
}

/* ==========================================================================
   Import & regulation page (2026-10 spec)
   ========================================================================== */
.section__cta { display: flex; justify-content: center; margin-top: 36px; }
.page-hero__sub strong { display: block; margin-top: 6px; color: var(--color-green-deep); }

/* 2 — who it's for */
.fit-grid {
  list-style: none; margin: 40px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.fit-card {
  display: flex; align-items: center; gap: 14px;
  background: var(--surface-card); border: 1px solid var(--border-card);
  border-radius: var(--radius-md); padding: 18px 20px;
  font-family: var(--font-display); font-weight: var(--fw-medium);
  font-size: 16px; line-height: 1.4; color: var(--text-body);
}
.fit-card__icon {
  width: 46px; height: 46px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-green-tint); color: var(--color-green);
}

/* 3 — services */
.import-services {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 40px;
}
.import-services .bg-service h3 { font-size: var(--fs-h4); margin: 0; }

/* 4 — importer-of-record band */
.importer-band { background: var(--color-green-deep); color: var(--text-on-dark); }
.importer-band__inner {
  display: grid; grid-template-columns: auto 1fr; gap: 36px; align-items: start;
  max-width: 920px;
}
.importer-band__seal {
  width: 104px; height: 104px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.22);
  color: var(--color-logo-light-green);
}
.importer-band__body { display: grid; gap: 14px; }
.importer-band .bg-eyebrow { color: var(--color-logo-light-green); margin: 0; }
.importer-band h2 { color: #fff; margin: 0; }
.importer-band__lead {
  font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: 26px; line-height: 1.3; color: var(--color-amber-tint, #F6E3C6); margin: 0;
}
.importer-band p { margin: 0; color: rgba(247, 248, 243, 0.82); line-height: var(--lh-body); }
.importer-band .btn-row { margin-top: 8px; }

/* 5 — what to check */
.checklist--wide { grid-template-columns: repeat(3, 1fr); margin-top: 36px; }
.callout {
  display: flex; gap: 12px; align-items: center; justify-content: center;
  max-width: 760px; margin: 28px auto 0; padding: 16px 20px;
  background: var(--color-green-tint); border-radius: var(--radius-md);
  border-inline-start: 3px solid var(--color-green);
  font-family: var(--font-display); font-weight: var(--fw-medium);
  color: var(--color-green-deep);
}
.callout .icon { color: var(--color-green); flex: none; }

/* 6 — the route, with a description under each stage */
ol.bg-route { list-style: none; padding: 0; margin: 48px 0 0; }
.bg-route__text { display: grid; gap: 4px; justify-items: center; }
.bg-route--described .bg-route__label {
  max-width: 170px; margin: 0;
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: 15px; line-height: 1.35; color: var(--color-green-deep);
}
.bg-route__desc {
  max-width: 170px; margin: 0;
  font-size: 13px; line-height: 1.5; color: var(--text-muted);
}

/* 7 — feasibility form */
.feasibility { background: var(--surface-soft); scroll-margin-top: 84px; }
.feasibility__grid {
  display: grid; grid-template-columns: 0.8fr 1.4fr; gap: 40px; align-items: start;
}
.feasibility__intro { position: sticky; top: 110px; display: grid; gap: 12px; }
.feasibility__intro h2 { margin: 0; }
.feasibility__intro p { margin: 0; color: var(--text-muted); line-height: var(--lh-body); }
.feasibility__hint {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  color: var(--color-green-deep) !important;
}
.feasibility__card {
  background: var(--surface-card); border: 1px solid var(--border-card);
  border-radius: var(--radius-form); padding: 28px; box-shadow: var(--shadow-card);
}
.feasibility__form { display: grid; gap: 18px; }
.contact-done h3 { margin: 0; font-size: var(--fs-h3); }

/* 8 — FAQ questions as H3s, styled exactly as the home page's */
.bg-faq__h { margin: 0; font: inherit; }
.faq__more { margin: 10px 0 0; }
.faq__more a { color: var(--color-green); font-weight: var(--fw-semibold); }

@media (max-width: 1080px) {
  .fit-grid, .checklist--wide { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .import-services { grid-template-columns: 1fr; }
  .importer-band__inner { grid-template-columns: 1fr; gap: 20px; }
  .importer-band__seal { width: 76px; height: 76px; }
  .importer-band__lead { font-size: 22px; }
  .feasibility__grid { grid-template-columns: 1fr; gap: 24px; }
  .feasibility__intro { position: static; }
  .feasibility__card { padding: 20px; }

  /* Phone route: title and description beside the node, as on the home
     page; the chevron still drops from the node to the next stage. */
  .bg-route__text { justify-items: start; }
  .bg-route--described .bg-route__label { max-width: none; font-size: 17px; }
  .bg-route__desc { max-width: 32ch; font-size: 14px; }
  .bg-route--described .bg-route__step { align-items: flex-start; }
  .bg-route--described .bg-route__node { flex: none; }
}

@media (max-width: 620px) {
  .fit-grid, .checklist--wide { grid-template-columns: 1fr; }
}