/* ==========================================================================
   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; }
.form-note--err { background: #FDECEC; color: #96201C; border: 1px solid #F3C2C0; }

/* Spam honeypot wrapper on the contact form - see the comment in contact.html.
   `display: none` on purpose rather than the .sr-only treatment: this field
   must be invisible to a screen reader too, or a blind visitor fills it in and
   their genuine enquiry gets thrown away as spam. */
.form-hp { display: none; }

/* The submit button while the request is in flight. */
.btn.is-busy { opacity: 0.65; cursor: progress; }

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

/* A row of videos. Two class names so it outranks .grid--2 / .grid--3, the
   same trick .card-grid--center uses above.
   The 360px minimum is the point of it. The generic grid modifiers go down to
   220-320px columns, which is right for cards and wrong here - a 280px video
   is too small to make out what the tool is doing, which is the only reason
   the clip is on the page. At 360px the row breaks to fewer columns instead
   of shrinking past the point of being worth watching. */
.grid.video-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
}

/* A video with a label under it. Only needed when a page shows more than one
   clip and the visitor has to be told which is which - a lone video does not
   need this wrapper, just the .video-embed. */
.video-figure { margin: 0; }
.video-figure figcaption {
  margin-top: var(--sp-2);
  color: var(--text-muted);
  font-size: var(--fs-small);
  font-weight: var(--fw-semi);
  text-align: center;
}

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