/* ==========================================================================
   kraflex  |  components.css
   Reusable blocks. Every page is assembled from these.
   ========================================================================== */

/* --------------------------------------------------------------------------
   BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  min-height: var(--tap-min);
  padding: 0.85em 1.7em;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  text-align: center;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-soft),
              border-color var(--dur-fast) var(--ease-soft),
              color var(--dur-fast) var(--ease-soft),
              transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: var(--shadow-orange);
}
.btn--primary:hover {
  background: var(--clr-orange-dark);
  border-color: var(--clr-orange-dark);
  color: #fff;
}

.btn--ghost { background: transparent; border-color: #fff; color: #fff; }
.btn--ghost:hover { background: #fff; color: var(--clr-charcoal); }

.btn--outline { background: transparent; border-color: var(--clr-charcoal); color: var(--clr-charcoal); }
.btn--outline:hover { background: var(--clr-charcoal); color: #fff; }

.btn--dark { background: var(--clr-charcoal); border-color: var(--clr-charcoal); color: #fff; }
.btn--dark:hover { background: #000; border-color: #000; color: #fff; }

.btn--lg { font-size: var(--fs-body); padding: 1em 2.2em; }
.btn--sm { font-size: var(--fs-micro); padding: 0.65em 1.2em; }
.btn--block { width: 100%; }

/* Two or more buttons side by side. Wraps to a stack when there is no room. */
.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* --------------------------------------------------------------------------
   CARDS
   -------------------------------------------------------------------------- */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--clr-white);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: var(--sp-4);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--clr-orange-light); }

.card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  margin-bottom: var(--sp-2);
  border-radius: var(--radius-sm);
  background: var(--clr-orange-soft);
  color: var(--accent);
  flex-shrink: 0;
}
/* An icon can be inline <svg> (recommended - it picks up the orange
   automatically) or your own <img> file. Both are sized to 26px here. */
.card__icon svg { width: 26px; height: 26px; }
.card__icon img { width: 26px; height: 26px; object-fit: contain; }

.card__title { font-size: var(--fs-h4); margin-bottom: var(--sp-1); color: var(--clr-charcoal); }
.card__text  { font-size: var(--fs-small); color: var(--text-muted); }
.card__foot  { margin-top: auto; padding-top: var(--sp-3); }

/* Top accent bar variant */
.card--accent { border-top: 4px solid var(--accent); }

/* Dark card for use on charcoal sections */
.card--dark {
  background: var(--clr-charcoal-soft);
  border-color: rgba(255, 255, 255, 0.10);
  color: var(--text-on-dark);
}
.card--dark .card__title { color: #fff; }
.card--dark .card__text  { color: var(--text-muted-dark); }
.card--dark .card__icon  { background: rgba(245, 130, 32, 0.14); }

/* Numbered card (process steps) */
.card--step::before {
  content: attr(data-step);
  font-family: var(--font-heading);
  font-size: 2.6rem;
  font-weight: var(--fw-black);
  line-height: 1;
  color: var(--clr-steel-200);
  margin-bottom: var(--sp-1);
}
.card--dark.card--step::before { color: rgba(255, 255, 255, 0.14); }

/* Add card-grid--center to the grid and a row that does not divide evenly
   centres its last few items instead of leaving them stranded on the left.

   Four cards in a three-column grid fill columns 1-3 and drop the fourth into
   column 1 of a new row, alone against the left edge. A centred row of
   flexible items has no columns to strand anything in: whatever is left over
   sits in the middle, and the spare space is split down both sides.

   Two class names means this outranks .grid--2 / .grid--3 / .grid--4, so you
   can leave whichever one is already on the tag alone. */
.grid.card-grid--center {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
/* How many fit on a row is decided by the screen, not by a fixed column count.
   The browser packs in as many cards as it can at 250px each, then stretches
   them to fill the row; whatever is left over wraps and sits centred.

   250px is the one number worth changing. Raise it and cards stay wide but
   break onto a second row sooner; lower it and more of them squeeze onto one
   line. Measured behaviour for four cards at the current 250px:

     1920 wide  ->  four across
     1536 wide  ->  four across
     1440 wide  ->  four across
     1280 wide  ->  four across
     1200 wide  ->  four across   (cuts over to three at about 1165)
     1152 wide  ->  three across, fourth centred underneath
     1024 wide  ->  three across, fourth centred underneath
      768 wide  ->  two across, then two across
      600 wide  ->  one per row                                              */
.grid.card-grid--center > * {
  flex: 1 1 250px;    /* share the row, wrap once they drop under 250px */
  max-width: 380px;   /* stops two cards stretching across a wide screen */
}

/* --------------------------------------------------------------------------
   PRODUCT CARD
   -------------------------------------------------------------------------- */
.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--clr-white);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.product-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }

.product-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--clr-steel-100);
  overflow: hidden;
}
.product-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.product-card:hover .product-card__media img { transform: scale(1.06); }

.product-card__badge {
  position: absolute;
  top: var(--sp-1); left: var(--sp-1);
  background: var(--accent);
  color: #fff;
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--radius-xs);
}

.product-card__body { display: flex; flex-direction: column; flex: 1; padding: var(--sp-3); }
.product-card__cat {
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}
.product-card__title { font-size: var(--fs-h4); color: var(--clr-charcoal); margin-bottom: var(--sp-1); }
.product-card__text  { font-size: var(--fs-small); color: var(--text-muted); margin-bottom: var(--sp-2); }
.product-card__meta {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: var(--sp-2);
  border-top: 1px solid var(--border-soft);
}
.tag {
  font-size: var(--fs-micro);
  font-weight: var(--fw-semi);
  color: var(--clr-steel-700);
  background: var(--clr-steel-100);
  border-radius: var(--radius-pill);
  padding: 3px 10px;
}

/* Hidden by the product filter */
.product-card.is-filtered { display: none; }

/* --------------------------------------------------------------------------
   FILTER BAR
   -------------------------------------------------------------------------- */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  margin-bottom: var(--sp-4);
}
.filter-btn {
  min-height: var(--tap-min);
  padding: 0.5em 1.2em;
  font-size: var(--fs-small);
  font-weight: var(--fw-semi);
  color: var(--clr-steel-700);
  background: var(--clr-white);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-soft);
}
.filter-btn:hover { border-color: var(--accent); color: var(--accent); }
.filter-btn[aria-pressed="true"] {
  background: var(--clr-charcoal);
  border-color: var(--clr-charcoal);
  color: #fff;
}
.filter-empty { padding: var(--sp-4); text-align: center; color: var(--text-muted); }

/* --------------------------------------------------------------------------
   STATISTICS / COUNTERS
   -------------------------------------------------------------------------- */
.stat { text-align: center; padding: var(--sp-2); }

/* Add stat-grid--center to the grid and the row centres itself no matter how
   many statistics are in it - three, four, five, however many.

   A plain grid has a fixed number of columns, so removing a statistic leaves
   an empty column behind and the row looks pushed to one side. A centred row
   of flexible items has no columns to leave empty: the statistics sit side by
   side, share out the space, and any leftover is split evenly down both edges.

   Two class names means this also outranks .grid--3 / .grid--4, so you can
   leave whichever one is on the tag alone. */
.grid.stat-grid--center {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.grid.stat-grid--center > .stat {
  flex: 1 1 150px;    /* share the row, wrap once they drop under 150px */
  max-width: 300px;   /* stops three items sprawling across a wide screen */
}
.stat__value {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 1.6rem + 3.2vw, 4.4rem);
  font-weight: var(--fw-black);
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.stat__label {
  display: block;
  margin-top: var(--sp-1);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-muted-dark);
}
.section--alt .stat__label { color: var(--text-muted); }

/* --------------------------------------------------------------------------
   FEATURE LIST (square orange bullets)
   -------------------------------------------------------------------------- */
.feature-list li {
  position: relative;
  padding-left: var(--sp-4);
  margin-bottom: var(--sp-3);
}
.feature-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 10px; height: 10px;
  background: var(--accent);
  transform: rotate(45deg);
}
.feature-list strong { display: block; font-size: var(--fs-h4); color: var(--clr-charcoal); margin-bottom: 2px; }
.section--dark .feature-list strong { color: #fff; }
.feature-list p, .feature-list span { color: var(--text-muted); font-size: var(--fs-small); }
.section--dark .feature-list p { color: var(--text-muted-dark); }

/* Compact tick list */
.check-list li {
  position: relative;
  padding-left: var(--sp-3);
  margin-bottom: var(--sp-1);
  font-size: var(--fs-small);
}
.check-list li::before {
  content: "\2713";
  position: absolute; left: 0;
  color: var(--accent);
  font-weight: var(--fw-bold);
}
/* Two-up when there is room. For a tick list that no longer sits in a narrow
   column beside a picture - four short items running down the left of a wide
   block look like an afterthought. Falls back to one column on a phone. */
.check-list--cols {
  display: grid;
  gap: 0 var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

/* --------------------------------------------------------------------------
   SPEC TABLE
   -------------------------------------------------------------------------- */
.table-wrap {
  overflow-x: auto;                       /* table scrolls, page never does */
  -webkit-overflow-scrolling: touch;
  background: var(--clr-white);           /* stays legible on dark sections */
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
}
.spec-table {
  min-width: 560px;
  font-size: var(--fs-small);
  color: var(--clr-ink);
}
.spec-table caption {
  caption-side: top;
  text-align: left;
  padding: var(--sp-2);
  font-weight: var(--fw-semi);
  color: var(--clr-steel-500);
}
.spec-table th, .spec-table td { padding: var(--sp-2); text-align: left; border-bottom: 1px solid var(--border-soft); }
.spec-table thead th {
  background: var(--clr-charcoal);
  color: #fff;
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  white-space: nowrap;
}
.spec-table tbody tr:nth-child(even) { background: var(--clr-steel-100); }
.spec-table tbody tr:last-child td { border-bottom: 0; }
.spec-table td:first-child { font-weight: var(--fw-semi); color: var(--clr-charcoal); }

/* Size-reference tables: one narrow column per size, illustrations centred and
   sitting on a common baseline so the relative sizes read correctly. */
.spec-table--sizes th:not(:first-child),
.spec-table--sizes td:not(:first-child) { text-align: center; }
.spec-table--sizes td[colspan] { font-weight: var(--fw-semi); color: var(--clr-charcoal); }
.spec-table--sizes tbody th {
  font-weight: var(--fw-semi);
  color: var(--clr-charcoal);
  white-space: nowrap;
}
.spec-table--sizes td { vertical-align: bottom; }
.th-sub { display: block; font-weight: var(--fw-regular); text-transform: none; letter-spacing: 0; }

.size-img {
  display: block;
  margin: 0 auto;
  max-height: 78px;
  width: auto;
}

/* --------------------------------------------------------------------------
   CATEGORY DEEP DIVE
   The extra detail a single product category carries - profile shapes, a
   before/after comparison, size charts. Revealed by data-filter-panel.
   -------------------------------------------------------------------------- */
.deep-dive__heading {
  font-size: var(--fs-h3);
  color: var(--clr-charcoal);
  margin-bottom: var(--sp-1);
}

.note {
  font-size: var(--fs-small);
  font-style: italic;
  color: var(--text-muted);
}

/* --- Profile shapes ------------------------------------------------------ */
.profile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
  gap: var(--sp-2);
  list-style: none;
  padding: 0;
  margin: 0;
}
.profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--sp-3) var(--sp-2);
  background: var(--clr-white);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
}
.profile__img {
  height: 104px;
  width: auto;
  margin-bottom: var(--sp-2);
}
.profile__name {
  font-size: var(--fs-h4);
  color: var(--clr-charcoal);
  margin-bottom: var(--sp-1);
}
.profile__text { font-size: var(--fs-micro); color: var(--text-muted); line-height: 1.5; }
.profile__badge {
  display: inline-block;
  vertical-align: middle;
  margin-left: 0.4em;
  padding: 0.15em 0.5em;
  border-radius: var(--radius-pill);
  background: var(--clr-orange-soft);
  color: var(--clr-orange-dark);
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}
.profile--custom { border-style: dashed; border-color: var(--accent); }

/* --- Can't reach / can reach comparison ---------------------------------- */
.compare {
  display: flex;
  flex-direction: column;
  background: var(--clr-white);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.compare__head {
  padding: var(--sp-2) var(--sp-3);
  font-family: var(--font-heading);
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: #fff;
}
.compare--no  .compare__head { background: var(--clr-steel-500); }
.compare--yes .compare__head { background: var(--clr-charcoal); border-bottom: 3px solid var(--accent); }

.compare__img {
  display: block;
  width: 100%;
  max-width: 380px;
  height: auto;
  margin: var(--sp-3) auto;
}

/* The tick or cross is drawn from CSS, so there is no icon file to manage. */
.compare__verdict {
  position: relative;
  margin-top: auto;
  padding: var(--sp-3) var(--sp-3) var(--sp-3) calc(var(--sp-3) + 34px);
  font-size: var(--fs-small);
  color: var(--clr-steel-700);
  border-top: 1px solid var(--border-soft);
}
.compare__verdict::before {
  content: "";
  position: absolute;
  left: var(--sp-3);
  top: calc(var(--sp-3) - 1px);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
}
.compare--no .compare__verdict::before {
  background-color: var(--clr-flame-red);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1 1l10 10M11 1L1 11' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.compare--yes .compare__verdict::before {
  background-color: #1E9E52;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 6.5l3 3 6-6.5' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   GALLERY + LIGHTBOX
   -------------------------------------------------------------------------- */
.gallery { display: grid; gap: var(--sp-2); grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.gallery__item {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--clr-steel-100);
  cursor: zoom-in;
  border: 0; padding: 0;
}
.gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.gallery__item:hover img { transform: scale(1.07); }
.gallery__item::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(20,23,26,0.45), transparent 45%);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-soft);
}
.gallery__item:hover::after { opacity: 1; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-lightbox);
  display: grid;
  place-items: center;
  padding: var(--gutter);
  background: rgba(10, 12, 14, 0.94);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-soft), visibility 0s linear var(--dur-base);
}
.lightbox.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.lightbox__img { max-width: min(1400px, 92vw); max-height: 82vh; object-fit: contain; border-radius: var(--radius-sm); }
.lightbox__caption { margin-top: var(--sp-2); color: #C4CDD5; font-size: var(--fs-small); text-align: center; }
.lightbox__close,
.lightbox__nav {
  position: absolute;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  width: 48px; height: 48px;
  border-radius: 50%;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  display: grid; place-items: center;
  transition: background var(--dur-fast) var(--ease-soft);
}
.lightbox__close:hover, .lightbox__nav:hover { background: var(--accent); border-color: var(--accent); }
.lightbox__close { top: var(--sp-2); right: var(--sp-2); }
.lightbox__nav--prev { left: var(--sp-2); top: 50%; transform: translateY(-50%); }
.lightbox__nav--next { right: var(--sp-2); top: 50%; transform: translateY(-50%); }
/* main.js sets `hidden` on the arrows when the page has only one picture. The
   `display: grid` above beats the browser's own `[hidden]` rule, so it has to
   be undone explicitly or the attribute does nothing. */
.lightbox__nav[hidden] { display: none; }

/* --------------------------------------------------------------------------
   ACCORDION / FAQ
   -------------------------------------------------------------------------- */
.accordion { border-top: 1px solid var(--border-soft); }
.accordion__item { border-bottom: 1px solid var(--border-soft); }
.accordion__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  width: 100%;
  min-height: 60px;
  padding: var(--sp-2) 0;
  background: none;
  border: 0;
  text-align: left;
  font-family: var(--font-body);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semi);
  color: var(--clr-charcoal);
  cursor: pointer;
}
.accordion__btn:hover { color: var(--accent); }
.accordion__icon { position: relative; width: 16px; height: 16px; flex-shrink: 0; }
.accordion__icon::before,
.accordion__icon::after {
  content: "";
  position: absolute;
  background: var(--accent);
  transition: transform var(--dur-base) var(--ease-out);
}
.accordion__icon::before { top: 7px; left: 0; width: 16px; height: 2px; }
.accordion__icon::after  { left: 7px; top: 0; width: 2px; height: 16px; }
.accordion__btn[aria-expanded="true"] .accordion__icon::after { transform: scaleY(0); }

.accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-base) var(--ease-out);
}
.accordion__btn[aria-expanded="true"] + .accordion__panel { grid-template-rows: 1fr; }
.accordion__panel > div { overflow: hidden; }
.accordion__panel p { padding-bottom: var(--sp-3); color: var(--text-muted); max-width: 78ch; }

/* --------------------------------------------------------------------------
   DOWNLOAD CARD
   -------------------------------------------------------------------------- */
.download-card {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3);
  background: var(--clr-white);
  border: 1px solid var(--border-soft);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-sm);
  transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.download-card:hover { box-shadow: var(--shadow-md); transform: translateX(3px); }
.download-card__icon { flex-shrink: 0; width: 40px; height: 40px; color: var(--accent); }
.download-card__title { font-size: var(--fs-h4); color: var(--clr-charcoal); }
.download-card__meta { font-size: var(--fs-micro); color: var(--text-muted); text-transform: uppercase; letter-spacing: var(--ls-wide); }

/* --------------------------------------------------------------------------
   TESTIMONIAL
   -------------------------------------------------------------------------- */
.quote {
  position: relative;
  padding: var(--sp-4);
  background: var(--clr-charcoal-soft);
  border-radius: var(--radius-md);
  color: var(--text-on-dark);
}
.quote::before {
  content: "\201C";
  position: absolute; top: -6px; left: 14px;
  font-family: var(--font-heading);
  font-size: 5rem;
  line-height: 1;
  color: rgba(245, 130, 32, 0.28);
}
.quote p { position: relative; font-size: var(--fs-lead); line-height: 1.5; }
.quote footer { margin-top: var(--sp-3); font-size: var(--fs-small); color: var(--text-muted-dark); }
.quote cite { display: block; font-style: normal; font-weight: var(--fw-bold); color: #fff; }

/* --------------------------------------------------------------------------
   CTA BAND
   -------------------------------------------------------------------------- */
.cta-band {
  background: linear-gradient(115deg, var(--clr-charcoal) 0%, var(--clr-charcoal-soft) 55%, #3A2A1C 100%);
  color: #fff;
  text-align: center;
  padding-block: clamp(var(--sp-8), 6vw, var(--sp-12));
  border-top: 4px solid var(--accent);
}
.cta-band h2 { text-transform: uppercase; margin-bottom: var(--sp-2); }
.cta-band p { color: var(--text-muted-dark); max-width: 58ch; margin: 0 auto var(--sp-4); }
.cta-band .btn-row { justify-content: center; }

/* --------------------------------------------------------------------------
   BREADCRUMB
   -------------------------------------------------------------------------- */
.breadcrumb { padding-block: var(--sp-2); font-size: var(--fs-micro); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; list-style: none; }
.breadcrumb a { color: var(--text-muted); }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb li + li::before { content: "/"; margin-right: 6px; color: var(--clr-steel-300); }
.breadcrumb [aria-current="page"] { color: var(--clr-charcoal); font-weight: var(--fw-semi); }
.section--dark .breadcrumb a, .page-hero .breadcrumb a { color: var(--text-muted-dark); }
.page-hero .breadcrumb [aria-current="page"] { color: #fff; }

/* --------------------------------------------------------------------------
   BACK TO TOP
   -------------------------------------------------------------------------- */
.to-top {
  position: fixed;
  right: var(--sp-2);
  bottom: var(--sp-2);
  z-index: var(--z-sticky);
  width: 48px; height: 48px;
  display: grid; place-items: center;
  background: var(--clr-charcoal);
  color: #fff;
  border: 0;
  border-radius: 50%;
  box-shadow: var(--shadow-md);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              visibility 0s linear var(--dur-base),
              background var(--dur-fast) var(--ease-soft);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); transition-delay: 0s; }
.to-top:hover { background: var(--accent); }
.to-top svg { width: 20px; height: 20px; }

/* --------------------------------------------------------------------------
   FORMS
   -------------------------------------------------------------------------- */
.form-grid { display: grid; gap: var(--sp-3); grid-template-columns: 1fr; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: var(--fs-small); font-weight: var(--fw-semi); color: var(--clr-charcoal); }
.field .req { color: var(--clr-flame-red); }
.field input,
.field select,
.field textarea {
  min-height: var(--tap-min);
  padding: 0.7em 0.9em;
  font-size: 16px;                 /* 16px stops iOS zooming on focus */
  background: var(--clr-white);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  transition: border-color var(--dur-fast) var(--ease-soft), box-shadow var(--dur-fast) var(--ease-soft);
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(245, 130, 32, 0.18);
}
.field__hint { font-size: var(--fs-micro); color: var(--text-muted); }
.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: var(--clr-flame-red); }
.field__error { font-size: var(--fs-micro); color: var(--clr-flame-red); min-height: 1em; }

.form-note {
  padding: var(--sp-2);
  border-radius: var(--radius-sm);
  font-size: var(--fs-small);
}
.form-note--ok { background: #E8F6EC; color: #1C6B33; border: 1px solid #B6E0C2; }

/* --------------------------------------------------------------------------
   MEDIA FRAME  (technology / about imagery)
   -------------------------------------------------------------------------- */
.media-frame {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--clr-steel-100);
  aspect-ratio: 12 / 7;
  box-shadow: var(--shadow-md);
}
.media-frame img { width: 100%; height: 100%; object-fit: cover; }
/* Orange corner accent */
.media-frame::after {
  content: "";
  position: absolute;
  right: 0; bottom: 0;
  width: 72px; height: 72px;
  background: linear-gradient(135deg, transparent 50%, var(--accent) 50%);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   DIAGRAM FRAME
   For a wide technical infographic - the kind with small labels that has to be
   READ, not just looked at.
   Do not use media-frame for these. That one crops to a fixed 12/7 window and
   would slice the outer panels off a diagram like this. This one shows the
   whole picture at whatever shape it happens to be, and clicking it opens the
   lightbox - which is the only way the small type is legible on a phone.
   -------------------------------------------------------------------------- */
.diagram-frame {
  margin: 0;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-soft);
  background: #fff;
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
/* `min-width` is the whole trick, and it needs no breakpoint. While the column
   is 900px or wider the picture just fills it. Once the column is narrower -
   a phone - the picture refuses to shrink past 900px and this box pans
   sideways instead, because shrinking a diagram this dense to 350px makes the
   labels unreadable and the section pointless. */
.diagram-frame__scroll { overflow-x: auto; }
.diagram-frame__scroll img {
  display: block;
  width: 100%;
  min-width: 900px;
  height: auto;
}
.diagram-frame figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1) var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-top: 1px solid var(--border-soft);
  background: var(--clr-steel-100);
  color: var(--text-muted);
  font-size: var(--fs-small);
  text-align: center;
}
/* Kept out of the scrolling box on purpose: a button wrapped around a pannable
   picture fires on drag, so every swipe would throw the lightbox open. */
.diagram-frame__zoom {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: var(--fw-semi);
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: zoom-in;
}
.diagram-frame__zoom:hover { color: var(--clr-orange-dark, var(--accent)); }
.diagram-frame__zoom:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

/* --------------------------------------------------------------------------
   PRODUCT SHOT
   For a cut-out photograph - the product itself on a transparent background,
   no scenery behind it.
   Do not use media-frame for these. That one crops the picture to a fixed
   12/7 window, which slices the edges off anything round. This one shows the
   whole picture, pads it, and stands it on a soft plinth so the cut-out does
   not look like it is floating in mid-air.
   -------------------------------------------------------------------------- */
.product-shot {
  display: grid;
  place-items: center;
  padding: var(--sp-4);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(ellipse at 50% 94%, rgba(20, 23, 26, 0.10), transparent 62%),
    linear-gradient(160deg, var(--clr-white), var(--clr-steel-100));
}
.product-shot img {
  width: 100%;
  height: auto;
  max-height: 430px;
  object-fit: contain;   /* never stretched, whatever shape the file is */
}

/* On a charcoal section the pale plinth would glare. This drops it. */
.on-dark .product-shot,
.product-shot--plain {
  background: none;
  border: 0;
  padding: 0;
}

/* --------------------------------------------------------------------------
   YOUTUBE VIDEO  (click to load)
   Until somebody presses play this is one still image and a button. Nothing
   is fetched from YouTube, no tracking cookie is set, and the page weighs the
   same as it did before you added the video. js/main.js swaps in the real
   player on the first click.
   The markup lives in products.html - search the file for "Product Video".
   -------------------------------------------------------------------------- */
.video-embed {
  position: relative;
  aspect-ratio: 16 / 9;        /* the shape of every normal YouTube video */
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--clr-charcoal);
  box-shadow: var(--shadow-md);
}

/* The still image, the missing-image placeholder and the player that replaces
   them all fill the frame edge to edge. */
.video-embed__poster,
.video-embed iframe,
.video-embed .img-placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.video-embed__poster { object-fit: cover; display: block; }

/* The play control covers the whole frame, so a click anywhere starts it.
   It is a link, not a button: with JavaScript switched off it still works,
   it just opens the video on youtube.com instead of playing it here. */
.video-embed__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(20, 23, 26, 0.30);
  cursor: pointer;
  border: 0;
  padding: 0;
  transition: background var(--dur-base) var(--ease-soft);
  -webkit-tap-highlight-color: transparent;
}
.video-embed__play:hover,
.video-embed__play:focus-visible { background: rgba(20, 23, 26, 0.12); }

/* Orange lozenge with a white triangle in it. The triangle is drawn inline
   here rather than kept as a file, so there is nothing extra to download. */
.video-embed__play::before {
  content: "";
  width: 78px;
  height: 54px;
  border-radius: 14px;
  background: var(--accent)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M9.2 7.1v9.8l8.3-4.9z'/%3E%3C/svg%3E")
    no-repeat center / 26px 26px;
  box-shadow: 0 6px 20px rgba(20, 23, 26, 0.38);
  transition: transform var(--dur-base) var(--ease-out);
}
.video-embed__play:hover::before,
.video-embed__play:focus-visible::before { transform: scale(1.08); }

/* Branded placeholder injected by main.js when an image file is missing */
.img-placeholder {
  display: grid;
  place-items: center;
  width: 100%; height: 100%;
  min-height: 140px;
  background:
    repeating-linear-gradient(135deg, #E4E9ED 0 12px, #EEF1F4 12px 24px);
  color: var(--clr-steel-500);
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  text-align: center;
  padding: var(--sp-2);
  border: 1px dashed var(--clr-steel-300);
}
.img-placeholder span { display: block; max-width: 32ch; }
.img-placeholder small { display: block; margin-top: 4px; font-weight: var(--fw-regular); letter-spacing: 0; text-transform: none; opacity: 0.8; }

/* --------------------------------------------------------------------------
   LOGO / CERT STRIP
   -------------------------------------------------------------------------- */
.logo-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4) var(--sp-8);
}
.logo-strip img { height: 40px; width: auto; filter: grayscale(1); opacity: 0.55; transition: all var(--dur-base) var(--ease-soft); }
.logo-strip img:hover { filter: none; opacity: 1; }

/* --------------------------------------------------------------------------
   CALLOUT
   -------------------------------------------------------------------------- */
.callout {
  border-left: 4px solid var(--accent);
  background: var(--clr-orange-soft);
  padding: var(--sp-3);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.callout p { color: var(--clr-steel-700); }