/* Aircraft Mechanic Tool Solutions - the whole public stylesheet.
 *
 * One file, no build step, custom properties as tokens. Read DESIGN.md before
 * changing a colour: every text pairing here has been measured against WCAG AA
 * and the palette is deliberately none of the three defaults BRIEF 6.1 bans.
 *
 * Order: tokens, reset, typography, layout, components, page blocks, motion.
 * Motion lives at the end in one place, together with the reduced-motion
 * switch-off, so it is impossible to add an animation that forgets it.
 */

/* ------------------------------------------------------------------ tokens */

:root {
  --ink-950: #0A0E13;
  --ink-900: #0F151C;
  --ink-850: #131A22;
  --ink-800: #18212B;
  --ink-700: #212C38;
  --ink-600: #2C3A48;

  --signal: #FFB000;
  --signal-300: #FFCB5C;
  --signal-700: #C98700;

  --paper: #E9EFF5;
  --steel-300: #B4C2CF;
  --steel-400: #93A7BB;
  --steel-500: #7C90A5;

  --danger: #E4574B;
  --ok: #57A97F;

  --font-sans: "Segoe UI Variable Text", "Segoe UI", Inter, Roboto, -apple-system,
               "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Cascadia Mono", ui-monospace, "SF Mono", Consolas, "Roboto Mono", monospace;

  --wrap: 76rem;
  --wrap-narrow: 46rem;

  --r-sm: 2px;
  --r-md: 10px;
  --r-lg: 16px;

  --gap: clamp(1rem, 2.5vw, 2rem);
  --section: clamp(3.5rem, 7vw, 6.5rem);

  /* A spring-ish ease for the CTAs, and a plain one for everything else. */
  --ease-spring: cubic-bezier(0.22, 1.4, 0.36, 1);
  --ease-out: cubic-bezier(0.22, 0.7, 0.24, 1);

  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.03), 0 12px 32px rgba(0, 0, 0, 0.35);
}

/* ------------------------------------------------------------------- reset */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Anchored headings in the long guides must not hide under the sticky head. */
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background: var(--ink-900);
  color: var(--paper);
  font-family: var(--font-sans);
  font-size: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-underline-offset: 0.18em;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }

a { color: var(--signal-300); text-decoration-color: rgba(255, 203, 92, 0.45); }
a:hover { color: var(--signal); text-decoration-color: currentColor; }

/* One focus style everywhere, on the accent, which clears 10:1 on every
   surface in this palette. */
:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

::selection { background: var(--signal); color: var(--ink-950); }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--signal);
  color: var(--ink-950);
  padding: 0.75rem 1.25rem;
  font-weight: 600;
}
.skip:focus { left: 0; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* The honeypot. Off screen rather than display:none, because some form fillers
   skip hidden fields and we want them to find this one. */
.hp {
  position: absolute !important;
  left: -9999px;
  width: 1px; height: 1px; overflow: hidden;
}

/* -------------------------------------------------------------- typography */

h1, h2, h3, h4 {
  margin: 0 0 0.6em;
  line-height: 1.12;
  letter-spacing: -0.015em;
  font-weight: 650;
  text-wrap: balance;
}

h1 { font-size: clamp(2rem, 1.3rem + 3.1vw, 3.6rem); }
h2 { font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.25rem); }
h3 { font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem); }
h4 { font-size: 1.05rem; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

/* Small caps labels. At this size caps read as a technical label rather than
   as shouting, which is the whole reason they are only used small. */
.label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--signal);
  margin: 0 0 0.9rem;
}
.label--steel { color: var(--steel-400); }

.lede {
  font-size: clamp(1.06rem, 1rem + 0.4vw, 1.3rem);
  color: var(--steel-300);
  max-width: 44ch;
}

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.small { font-size: 0.875rem; color: var(--steel-400); }
.source { font-size: 0.78rem; color: var(--steel-500); margin-top: 0.5rem; }

/* ------------------------------------------------------------------ layout */

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gap); }
.wrap--narrow { max-width: var(--wrap-narrow); }

.section { padding-block: var(--section); }
.section--tight { padding-block: calc(var(--section) * 0.6); }
.section--alt { background: var(--ink-850); }

.section-head { max-width: 60ch; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.section-head p { color: var(--steel-300); margin-bottom: 0; }

.grid { display: grid; gap: var(--gap); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
/* 15rem rather than 17rem: inside the catalogue the content column is about
   864px, and 17rem plus the gap fell four pixels short of fitting three cards,
   which dropped the whole product grid to two columns. */
.grid--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); }

.rule { border: 0; border-top: 1px solid var(--ink-600); margin-block: var(--section) 0; }

/* ------------------------------------------------------------------ header */

.site-head {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(15, 21, 28, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ink-600);
}

.strip {
  margin: 0;
  background: var(--ink-950);
  color: var(--steel-400);
  font-size: 0.78rem;
  text-align: center;
  padding: 0.4rem var(--gap);
  border-bottom: 1px solid var(--ink-800);
}
.strip-sep { color: var(--signal-700); margin-inline: 0.6rem; }

.head-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 4.5rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--paper);
  text-decoration: none;
  flex: 0 0 auto;
}
.brand-text { display: grid; line-height: 1.1; }
.brand-name {
  font-size: 0.94rem;
  font-weight: 650;
  letter-spacing: 0.01em;
}
.brand-name--accent { color: var(--signal); }

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 2vw, 1.75rem);
  margin-left: auto;
}

.nav-top {
  display: flex;
  align-items: center;
  gap: clamp(0.25rem, 1.2vw, 1.1rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-item > a {
  display: block;
  padding: 0.55rem 0.4rem;
  color: var(--steel-300);
  text-decoration: none;
  font-size: 0.94rem;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.nav-item > a:hover { color: var(--paper); }
.nav-item > a[aria-current] { color: var(--paper); border-bottom-color: var(--signal); }

/* The dropdown opens on hover and on focus-within, so it works by keyboard with
   no script. It is not a menubar widget and does not pretend to be one. */
.nav-item.has-sub { position: relative; }
.nav-sub {
  position: absolute;
  top: 100%;
  left: -1rem;
  min-width: 17rem;
  background: var(--ink-800);
  border: 1px solid var(--ink-600);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
  padding: 0.5rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.16s var(--ease-out), transform 0.16s var(--ease-out), visibility 0.16s;
}
.nav-item.has-sub:hover .nav-sub,
.nav-item.has-sub:focus-within .nav-sub {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-sub ul { list-style: none; margin: 0; padding: 0; }
.nav-sub a {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0.7rem;
  border-radius: var(--r-sm);
  color: var(--steel-300);
  text-decoration: none;
  font-size: 0.9rem;
}
.nav-sub a:hover { background: var(--ink-700); color: var(--paper); }
.nav-sub-meta { color: var(--steel-500); font-family: var(--font-mono); font-size: 0.75rem; }

.head-actions { display: flex; align-items: center; gap: 0.6rem; flex: 0 0 auto; }

.basket-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.7rem;
  color: var(--steel-300);
  text-decoration: none;
  font-size: 0.9rem;
  border: 1px solid var(--ink-600);
  border-radius: var(--r-sm);
  white-space: nowrap;
}
.basket-link:hover { color: var(--paper); border-color: var(--steel-500); }
.basket-link.is-active { border-color: var(--signal-700); color: var(--paper); }
.basket-count {
  background: var(--signal);
  color: var(--ink-950);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  min-width: 1.4rem;
  text-align: center;
  border-radius: var(--r-sm);
  padding: 0.05rem 0.3rem;
}

.nav-toggle { display: none; }

/* Mobile navigation. Collapsed only when JavaScript is available to reopen it,
   which is why .has-js gates the whole block. */
@media (max-width: 60rem) {
  .has-js .nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
    background: none;
    border: 1px solid var(--ink-600);
    border-radius: var(--r-sm);
    color: var(--paper);
    padding: 0.5rem 0.8rem;
    cursor: pointer;
  }
  .nav-toggle-bars,
  .nav-toggle-bars::before,
  .nav-toggle-bars::after {
    display: block; width: 18px; height: 2px; background: currentColor; content: '';
  }
  .nav-toggle-bars { position: relative; }
  .nav-toggle-bars::before { position: absolute; top: -6px; }
  .nav-toggle-bars::after { position: absolute; top: 6px; }

  .has-js .site-nav {
    position: absolute;
    left: 0; right: 0; top: 100%;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--ink-850);
    border-bottom: 1px solid var(--ink-600);
    padding: 0.5rem var(--gap) 1.25rem;
    max-height: calc(100vh - 8rem);
    overflow-y: auto;
  }
  .has-js .site-nav.is-open { display: flex; }
  .nav-top { flex-direction: column; align-items: stretch; }
  .nav-item > a { padding: 0.75rem 0; border-bottom: 1px solid var(--ink-700); }
  .nav-item > a[aria-current] { border-bottom-color: var(--signal); }
  /* Sub items are always visible on mobile: a hover dropdown has no meaning on
     a touch screen, and a disclosure button here would be a script dependency
     for something that is only a list of links. */
  .nav-sub {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0.25rem 0 0.5rem 0.75rem;
    min-width: 0;
  }
  .head-actions { padding-top: 1rem; }
  .head-actions .btn { flex: 1; }
}

/* ----------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.8rem 1.35rem;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  /* Transform and opacity only. Never a layout property. */
  transition: transform 0.25s var(--ease-spring), background-color 0.18s, border-color 0.18s, color 0.18s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--signal); color: var(--ink-950); }
.btn--primary:hover { background: var(--signal-300); color: var(--ink-950); }

.btn--ghost { border-color: var(--ink-600); color: var(--paper); background: transparent; }
.btn--ghost:hover { border-color: var(--steel-500); color: var(--paper); background: var(--ink-800); }

.btn--quiet { color: var(--steel-300); background: var(--ink-800); border-color: var(--ink-600); }
.btn--quiet:hover { color: var(--paper); background: var(--ink-700); }

.btn--small { padding: 0.55rem 0.9rem; font-size: 0.875rem; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0; }

/* ------------------------------------------------- breadcrumbs and flashes */

.crumbs {
  border-bottom: 1px solid var(--ink-800);
  font-size: 0.82rem;
  color: var(--steel-500);
  background: var(--ink-950);
}
.crumbs .wrap { padding-block: 0.7rem; display: flex; flex-wrap: wrap; align-items: center; }
.crumbs a { color: var(--steel-400); text-decoration: none; }
.crumbs a:hover { color: var(--paper); text-decoration: underline; }
.crumbs-sep { margin-inline: 0.5rem; color: var(--ink-600); }
.crumbs [aria-current] { color: var(--paper); }

.flash-wrap { padding-top: 1.25rem; display: grid; gap: 0.5rem; }
.flash {
  margin: 0;
  padding: 0.8rem 1rem;
  border-radius: var(--r-sm);
  border-left: 3px solid var(--ok);
  background: var(--ink-800);
  font-size: 0.94rem;
}
.flash--error { border-left-color: var(--danger); }

/* ------------------------------------------------------------------- cards */

.card {
  display: flex;
  flex-direction: column;
  background: var(--ink-800);
  border: 1px solid var(--ink-600);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: transform 0.28s var(--ease-out), border-color 0.28s;
}
.card:hover { border-color: var(--steel-500); transform: translateY(-3px); }

.card-media { position: relative; background: var(--ink-850); border-bottom: 1px solid var(--ink-600); }
.card-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.shot--empty { display: block; aspect-ratio: 4 / 3; background: var(--ink-850); }

.card-body { padding: 1.1rem; display: flex; flex-direction: column; gap: 0.55rem; flex: 1; }
.card-title { margin: 0; font-size: 1.02rem; line-height: 1.3; }
.card-title a { color: var(--paper); text-decoration: none; }
.card-title a:hover { color: var(--signal); }
.card-sku { font-family: var(--font-mono); font-size: 0.76rem; color: var(--steel-500); }
.card-excerpt { color: var(--steel-400); font-size: 0.88rem; margin: 0; }
.card-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }

.price { font-family: var(--font-mono); font-size: 1.08rem; font-weight: 700; color: var(--paper); }
.price--quote { font-size: 0.9rem; font-weight: 600; color: var(--signal); }
.price-note { display: block; font-size: 0.72rem; color: var(--steel-500); font-weight: 400; font-family: var(--font-sans); }

.pill {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.2rem 0.45rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--ink-600);
  color: var(--steel-400);
}
.pill--stock { border-color: rgba(87, 169, 127, 0.5); color: var(--ok); }
.pill--lead { border-color: var(--ink-600); color: var(--steel-400); }
.pill--custom { border-color: var(--signal-700); color: var(--signal); }

.badge-row { display: flex; flex-wrap: wrap; gap: 0.4rem; }

/* A link card, used for solutions, industries and resources. */
.tile {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.4rem;
  background: var(--ink-800);
  border: 1px solid var(--ink-600);
  border-radius: var(--r-md);
  text-decoration: none;
  color: var(--paper);
  transition: transform 0.28s var(--ease-out), border-color 0.28s, background-color 0.28s;
}
.tile:hover { transform: translateY(-3px); border-color: var(--signal-700); background: var(--ink-700); color: var(--paper); }
.tile h3 { margin: 0; font-size: 1.1rem; }
.tile p { margin: 0; color: var(--steel-400); font-size: 0.9rem; }
.tile-more { margin-top: auto; color: var(--signal); font-size: 0.85rem; font-weight: 600; }

/* ------------------------------------------------------------------- forms */

.field { display: grid; gap: 0.35rem; margin-bottom: 1rem; }
.field > label { font-size: 0.86rem; color: var(--steel-300); font-weight: 600; }
.field-hint { font-size: 0.78rem; color: var(--steel-500); }

input[type="text"], input[type="email"], input[type="tel"], input[type="search"],
input[type="number"], input[type="password"], select, textarea {
  width: 100%;
  background: var(--ink-850);
  border: 1px solid var(--ink-600);
  border-radius: var(--r-sm);
  padding: 0.65rem 0.75rem;
  color: var(--paper);
}
input:hover, select:hover, textarea:hover { border-color: var(--steel-500); }
input::placeholder, textarea::placeholder { color: var(--steel-500); }
textarea { min-height: 8rem; resize: vertical; }
select { appearance: none; padding-right: 2rem; background-image: none; }

.field-row { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }

/* Must be input.qty, not .qty. The width:100% rule above is an attribute
   selector, so a bare class loses the specificity contest and the quantity box
   stretches to fill the row. */
input.qty {
  width: 5.5rem;
  flex: 0 0 auto;
  font-family: var(--font-mono);
  text-align: center;
}

fieldset { border: 1px solid var(--ink-600); border-radius: var(--r-md); padding: 1.1rem; margin: 0 0 1.25rem; }
legend { padding-inline: 0.5rem; font-size: 0.86rem; color: var(--steel-300); font-weight: 600; }

.check { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.9rem; color: var(--steel-300); }
.check input { width: auto; }

/* --------------------------------------------------------------- catalogue */

.catalogue { display: grid; gap: var(--gap); align-items: start; }
@media (min-width: 62rem) {
  .catalogue { grid-template-columns: 16rem 1fr; }
}

.filters {
  background: var(--ink-850);
  border: 1px solid var(--ink-600);
  border-radius: var(--r-md);
  padding: 1.1rem;
}
.filters h2 { font-size: 0.95rem; margin-bottom: 0.9rem; }
.facet { border-top: 1px solid var(--ink-700); padding-block: 0.9rem; }
.facet:first-of-type { border-top: 0; padding-top: 0; }
.facet-name {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--steel-400);
  margin: 0 0 0.5rem;
}
.facet ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.facet label { display: flex; gap: 0.5rem; align-items: center; font-size: 0.86rem; color: var(--steel-300); cursor: pointer; }
.facet label:hover { color: var(--paper); }
.facet-count { margin-left: auto; font-family: var(--font-mono); font-size: 0.72rem; color: var(--steel-500); }
.facet input { width: auto; accent-color: var(--signal); }

.cat-tree { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: 0.3rem; }
.cat-tree a { display: flex; justify-content: space-between; gap: 0.75rem; color: var(--steel-300); text-decoration: none; font-size: 0.88rem; padding: 0.25rem 0; }
.cat-tree a:hover, .cat-tree a[aria-current] { color: var(--signal); }
.cat-tree-count { font-family: var(--font-mono); font-size: 0.74rem; color: var(--steel-500); }

.listing-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--gap);
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--ink-600);
}
.listing-count { margin: 0; font-size: 0.88rem; color: var(--steel-400); }
.listing-tools { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
.listing-tools label { font-size: 0.82rem; color: var(--steel-400); }
.listing-tools select, .listing-tools input { width: auto; }

.active-filters { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: var(--gap); }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  padding: 0.25rem 0.55rem;
  background: var(--ink-700);
  border: 1px solid var(--ink-600);
  border-radius: var(--r-sm);
  color: var(--steel-300);
  text-decoration: none;
}
.chip:hover { color: var(--paper); border-color: var(--danger); }
.chip-x { color: var(--steel-500); }

.pager { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: var(--section); justify-content: center; }
.pager a, .pager span {
  min-width: 2.5rem;
  text-align: center;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--ink-600);
  border-radius: var(--r-sm);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--steel-300);
}
.pager a:hover { border-color: var(--steel-500); color: var(--paper); }
.pager [aria-current] { background: var(--signal); border-color: var(--signal); color: var(--ink-950); font-weight: 700; }

.empty {
  padding: clamp(2rem, 5vw, 4rem);
  text-align: center;
  border: 1px dashed var(--ink-600);
  border-radius: var(--r-md);
  color: var(--steel-400);
}

/* ---------------------------------------------------------- product detail */

.product-top { display: grid; gap: var(--gap); align-items: start; }
@media (min-width: 60rem) {
  .product-top { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
}

.gallery { display: grid; gap: 0.75rem; }
.gallery-main {
  background: var(--ink-850);
  border: 1px solid var(--ink-600);
  border-radius: var(--r-md);
  overflow: hidden;
}
.gallery-main img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.gallery-thumbs { display: flex; gap: 0.5rem; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.gallery-thumbs button {
  padding: 0;
  width: 4.5rem;
  background: var(--ink-850);
  border: 1px solid var(--ink-600);
  border-radius: var(--r-sm);
  overflow: hidden;
  cursor: pointer;
}
.gallery-thumbs button[aria-current="true"] { border-color: var(--signal); }
.gallery-thumbs img { aspect-ratio: 1; object-fit: cover; }

/* The sticky panel that follows the gallery. Sticky rather than fixed, so it
   cannot escape its column or overlap the footer. */
.buy-panel {
  position: sticky;
  top: 6.5rem;
  background: var(--ink-800);
  border: 1px solid var(--ink-600);
  border-radius: var(--r-md);
  padding: clamp(1.1rem, 2.5vw, 1.6rem);
}
@media (max-width: 60rem) { .buy-panel { position: static; } }

.buy-price { font-family: var(--font-mono); font-size: 2rem; font-weight: 700; margin: 0; line-height: 1.1; }
.buy-price--quote { font-size: 1.4rem; color: var(--signal); }
.buy-vat { font-size: 0.8rem; color: var(--steel-500); margin: 0.3rem 0 1.1rem; }
.buy-meta { list-style: none; margin: 1.1rem 0; padding: 0; display: grid; gap: 0.5rem; font-size: 0.88rem; }
.buy-meta li { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px dashed var(--ink-600); padding-bottom: 0.5rem; }
.buy-meta dt, .buy-meta-key { color: var(--steel-400); }
.buy-meta-val { color: var(--paper); font-family: var(--font-mono); text-align: right; }
.buy-form { display: grid; gap: 0.75rem; }
.buy-qty-row { display: flex; gap: 0.6rem; align-items: end; }
.buy-qty-row .field { flex: 0 0 auto; }

.spec-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.spec-table caption { text-align: left; color: var(--steel-400); font-size: 0.82rem; padding-bottom: 0.5rem; }
.spec-table th, .spec-table td { text-align: left; padding: 0.6rem 0.5rem; border-bottom: 1px solid var(--ink-600); vertical-align: top; }
.spec-table th { color: var(--steel-400); font-weight: 600; width: 45%; }
.spec-table td { font-family: var(--font-mono); color: var(--paper); }

/* ---------------------------------------------------------------- enquiry */

.basket-table { width: 100%; border-collapse: collapse; }
.basket-table th, .basket-table td { padding: 0.85rem 0.6rem; border-bottom: 1px solid var(--ink-600); text-align: left; vertical-align: top; }
.basket-table th { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--steel-400); font-family: var(--font-mono); font-weight: 600; }
.basket-table td.num, .basket-table th.num { text-align: right; }
.basket-line-title { font-weight: 600; }
.basket-line-title a { color: var(--paper); text-decoration: none; }
.basket-line-title a:hover { color: var(--signal); }
.basket-foot { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; margin-top: var(--gap); }

.summary {
  background: var(--ink-800);
  border: 1px solid var(--ink-600);
  border-radius: var(--r-md);
  padding: 1.25rem;
}
.summary-total { display: flex; justify-content: space-between; gap: 1rem; font-family: var(--font-mono); font-size: 1.2rem; font-weight: 700; }
.summary-note { font-size: 0.8rem; color: var(--steel-500); margin: 0.5rem 0 0; }

@media (max-width: 48rem) {
  /* The basket becomes a stack of labelled rows rather than a table that
     scrolls sideways, because a buyer editing quantities on a phone should not
     have to pan. */
  .basket-table thead { display: none; }
  .basket-table tr { display: grid; gap: 0.4rem; padding-block: 0.9rem; border-bottom: 1px solid var(--ink-600); }
  .basket-table td { border: 0; padding: 0; }
  .basket-table td.num { text-align: left; }
  .basket-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--steel-500);
  }
}

/* ------------------------------------------------------------------- prose */

.prose { max-width: 68ch; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 {
  margin-top: 2.2em;
  padding-top: 0.6em;
  border-top: 1px solid var(--ink-600);
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.85rem);
}
.prose h3 { margin-top: 1.8em; color: var(--paper); }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: 0.4em; }
.prose li::marker { color: var(--signal-700); }
.prose blockquote {
  margin: 1.6em 0;
  padding: 0.2em 0 0.2em 1.2em;
  border-left: 3px solid var(--signal);
  color: var(--steel-300);
}
.prose table { width: 100%; border-collapse: collapse; font-size: 0.92rem; display: block; overflow-x: auto; }
.prose th, .prose td { padding: 0.6rem 0.7rem; border-bottom: 1px solid var(--ink-600); text-align: left; }
.prose th { color: var(--steel-400); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.05em; }
.prose code { font-family: var(--font-mono); font-size: 0.9em; background: var(--ink-800); padding: 0.1em 0.35em; border-radius: var(--r-sm); }
.prose small { color: var(--steel-500); }

.guide-layout { display: grid; gap: var(--gap); align-items: start; }
@media (min-width: 64rem) {
  .guide-layout { grid-template-columns: minmax(0, 1fr) 15rem; }
  .guide-layout .toc { order: 2; }
}
.toc {
  position: sticky;
  top: 6.5rem;
  background: var(--ink-850);
  border: 1px solid var(--ink-600);
  border-radius: var(--r-md);
  padding: 1.1rem;
  font-size: 0.86rem;
}
.toc h2 { font-size: 0.8rem; font-family: var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--steel-400); margin-bottom: 0.7rem; }
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; counter-reset: toc; }
/* :not(.btn) matters. A descendant selector like ".toc a" outranks ".btn--primary",
   so without it the call to action inside this panel rendered steel text on the
   amber fill, which is a genuine contrast failure rather than a cosmetic one. */
.toc a:not(.btn) { color: var(--steel-300); text-decoration: none; display: block; }
.toc a:not(.btn):hover { color: var(--signal); }

.meta-line { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; color: var(--steel-500); font-size: 0.82rem; margin-bottom: 1.5rem; }

/* --------------------------------------------------------------------- faq */

.faq { display: grid; gap: 0.6rem; }
.faq details {
  background: var(--ink-800);
  border: 1px solid var(--ink-600);
  border-radius: var(--r-md);
  padding: 0 1.1rem;
}
.faq details[open] { border-color: var(--steel-500); }
.faq summary {
  cursor: pointer;
  padding: 1rem 0;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--signal); font-family: var(--font-mono); font-size: 1.2rem; }
.faq details[open] summary::after { content: '-'; }
.faq-body { padding-bottom: 1rem; color: var(--steel-300); }
.faq-body > :last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- hero */

.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--ink-600); }
.hero-inner {
  display: grid;
  gap: var(--gap);
  align-items: center;
  padding-block: clamp(3rem, 7vw, 6rem);
}
@media (min-width: 62rem) {
  .hero-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
}
.hero h1 { margin-bottom: 1rem; }
.hero h1 em { font-style: normal; color: var(--signal); }
.hero-lede { color: var(--steel-300); font-size: clamp(1.05rem, 1rem + 0.45vw, 1.3rem); max-width: 46ch; }
.hero-actions { margin-top: 1.75rem; }
.hero-assurance { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 0.45rem; font-size: 0.88rem; color: var(--steel-400); }
.hero-assurance li { display: flex; gap: 0.6rem; }
.hero-assurance li::before { content: '/'; color: var(--signal-700); font-family: var(--font-mono); }

/* The foam tray. A real element, in the HTML, fully drawn with no JavaScript
   and with every tool already in its cutout. The animation only takes the
   tools out and drops them back in, so a reader with no script or with reduced
   motion sees the finished tray, which is the message anyway. */
.tray {
  position: relative;
  /* Matches the SVG viewBox, so the box is reserved before the SVG paints and
     the hero contributes nothing to cumulative layout shift. */
  aspect-ratio: 3 / 2;
  background: var(--ink-850);
  border: 1px solid var(--ink-600);
  border-radius: var(--r-lg);
  padding: 1.1rem;
  box-shadow: var(--shadow-card);
}
.tray svg { width: 100%; height: 100%; }
.tray-caption {
  position: absolute;
  left: 1.4rem; bottom: 1rem;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--steel-500);
}
.tray-cutout { fill: var(--ink-950); }
.tray-shadow { fill: var(--signal); opacity: 0.9; }
.tray-tool { fill: var(--steel-300); }

/* --------------------------------------------------------------- stat band */

.stats { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gap); }
@media (min-width: 48rem) { .stats { grid-template-columns: repeat(3, 1fr); } }
.stat {
  background: var(--ink-800);
  border: 1px solid var(--ink-600);
  border-left: 3px solid var(--signal);
  border-radius: var(--r-md);
  padding: 1.4rem;
}
.stat-figure {
  font-family: var(--font-mono);
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
  font-weight: 700;
  line-height: 1;
  color: var(--paper);
  font-variant-numeric: tabular-nums;
}
.stat-what { margin: 0.6rem 0 0; color: var(--steel-300); font-size: 0.94rem; }
/* Every figure carries its source. An unattributed number destroys B2B trust,
   so this is a required part of the component, not an optional extra. */
.stat-source { margin: 0.6rem 0 0; font-size: 0.75rem; color: var(--steel-500); }

/* ------------------------------------------------------- before and after */

.wipe {
  position: relative;
  border: 1px solid var(--ink-600);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--ink-850);
}
.wipe-layer { position: relative; }
.wipe-layer svg { width: 100%; height: auto; display: block; }
.wipe-after {
  position: absolute;
  inset: 0;
  /* Driven by --wipe, set either by the scroll animation or by the range input
     fallback. Starts part way across so the effect is legible when static. */
  clip-path: inset(0 calc(100% - var(--wipe, 55%)) 0 0);
}
.wipe-handle {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--wipe, 55%);
  width: 2px;
  background: var(--signal);
  pointer-events: none;
}
.wipe-labels { display: flex; justify-content: space-between; padding: 0.7rem 1rem; font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--steel-500); border-top: 1px solid var(--ink-600); }
.wipe-range { width: 100%; margin: 0; accent-color: var(--signal); }

/* ------------------------------------------------------------- cta and foot */

.cta-band { background: var(--ink-850); border-top: 1px solid var(--ink-600); }
.cta-band-inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  align-items: center;
  justify-content: space-between;
  padding-block: clamp(2.5rem, 5vw, 4rem);
}
.cta-band h2 { margin-bottom: 0.5rem; }
.cta-band p { color: var(--steel-300); margin: 0; max-width: 52ch; }
.cta-band-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }

.site-foot { background: var(--ink-950); border-top: 1px solid var(--ink-600); font-size: 0.9rem; }
.foot-grid {
  display: grid;
  gap: var(--gap);
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
}
.foot-col--brand { grid-column: 1 / -1; }
@media (min-width: 62rem) { .foot-col--brand { grid-column: span 2; } }
.foot-col--brand img { width: min(15rem, 100%); height: auto; }
.foot-tag { color: var(--steel-300); margin: 0.9rem 0 0.5rem; }
.foot-note { color: var(--steel-500); font-size: 0.8rem; margin: 0; max-width: 34ch; }
.foot-h { font-size: 0.76rem; font-family: var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--signal); margin: 0 0 0.8rem; }
.site-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.site-foot a:not(.btn) { color: var(--steel-300); text-decoration: none; }
.site-foot a:not(.btn):hover { color: var(--paper); text-decoration: underline; }

/* A link inside a paragraph of text has to be distinguishable by something other
   than colour, so it stays underlined. Dropping the underline is only acceptable
   in the footer's navigation lists, where every item is a link and there is no
   surrounding prose to tell it apart from. Lighthouse flagged exactly this on the
   privacy and terms links in the base row. */
.site-foot p a:not(.btn) { text-decoration: underline; }

.foot-marks { display: flex; flex-wrap: wrap; gap: 0.5rem; padding-bottom: 1.5rem; }
.mark-chip { font-size: 0.78rem; border: 1px solid var(--ink-600); border-radius: var(--r-sm); padding: 0.3rem 0.6rem; color: var(--steel-300); }
.mark-chip-label { color: var(--steel-500); font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; }

.foot-base {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
  padding-block: 1.25rem;
  border-top: 1px solid var(--ink-800);
  color: var(--steel-500);
  font-size: 0.8rem;
}
.foot-base p { margin: 0; }
.foot-made { max-width: 46ch; }

/* ------------------------------------------------------------------ motion
 *
 * Everything below is decoration. The site is complete and correct without a
 * single line of it, which is the guardrail in BRIEF 6.3: content is in the
 * HTML, nothing above the fold waits on a script, and no animation touches a
 * layout property.
 *
 * Scroll-driven animations are used natively where the browser has them. There
 * is no GSAP and no scroll library: at this scale a CDN dependency would cost
 * more in transfer and in Lighthouse than the effect is worth, and the small
 * IntersectionObserver fallback in site.js covers the rest.
 */

/* The reveal state is only armed when JavaScript is present, so a no-script
   reader never sees a permanently invisible section. */
.has-js .reveal { opacity: 0; transform: translateY(18px); }
.has-js .reveal.is-in { opacity: 1; transform: none; transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
.has-js .reveal-stagger > * { opacity: 0; transform: translateY(14px); }
.has-js .reveal-stagger.is-in > * { opacity: 1; transform: none; transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); }
.has-js .reveal-stagger.is-in > *:nth-child(2) { transition-delay: 0.07s; }
.has-js .reveal-stagger.is-in > *:nth-child(3) { transition-delay: 0.14s; }
.has-js .reveal-stagger.is-in > *:nth-child(4) { transition-delay: 0.21s; }
.has-js .reveal-stagger.is-in > *:nth-child(5) { transition-delay: 0.28s; }
.has-js .reveal-stagger.is-in > *:nth-child(6) { transition-delay: 0.35s; }

/* A clip-path wipe rather than a fade, per BRIEF 6.2. */
.has-js .reveal-wipe { clip-path: inset(0 100% 0 0); }
.has-js .reveal-wipe.is-in { clip-path: inset(0 0 0 0); transition: clip-path 0.9s var(--ease-out); }

/* The signature moment: tools dropping into their cutouts as the hero scrolls.
   Native scroll-driven animation where available. Each tool is offset by its
   own --i so they land one at a time rather than as a block. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .has-js .tray-tool {
      animation: drop-in 1s linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 45%;
      animation-delay: calc(var(--i, 0) * -0.06s);
    }
    .has-js .tray-shadow {
      animation: shadow-fade 1s linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 45%;
    }
    .has-js .parallax {
      animation: drift 1s linear both;
      animation-timeline: view();
      animation-range: cover;
    }
  }
}

@keyframes drop-in {
  /* Transform only, and the travel is small, so nothing reflows and nothing
     lands outside the tray on a short viewport. */
  from { transform: translateY(-26px) rotate(-4deg); opacity: 0; }
  60%  { opacity: 1; }
  to   { transform: none; opacity: 1; }
}
@keyframes shadow-fade {
  from { opacity: 0.95; }
  to   { opacity: 0.35; }
}
@keyframes drift {
  /* No more than 15% travel, per BRIEF 6.2. */
  from { transform: translateY(-3%); }
  to   { transform: translateY(3%); }
}

/* The JavaScript fallback for browsers without animation-timeline. */
.has-js .tray.is-in .tray-tool--js {
  animation: drop-in 0.7s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 0.09s);
}

@media (prefers-reduced-motion: reduce) {
  /* One switch, and it has to be total: no transitions, no keyframes, no smooth
     scroll. The site stays fully usable and looks finished, because every
     animated element is styled in its resting state to begin with. */
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .has-js .reveal,
  .has-js .reveal-stagger > *,
  .has-js .reveal-wipe {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
  .btn:hover, .card:hover, .tile:hover { transform: none; }
}

/* ------------------------------------------------------------------- print */

@media print {
  .site-head, .cta-band, .site-foot, .filters, .nav-toggle { display: none; }
  body { background: #fff; color: #000; }
  a { color: #000; }
}