/* ==========================================================================
   COMPONENTS - navbar, buttons, cards, footer, forms, tables, badges
   Depends on tokens.css and base.css.
   ========================================================================== */

/* ==========================================================================
   NAVBAR
   Detached and floating: the logo sits in its own glass plate, the links sit
   in a separate pill. Both hover above the page rather than forming a bar
   across it, so uploaded background media stays visible behind them.
   ========================================================================== */

.navbar {
  position: fixed;
  top: var(--space-4);
  left: 0;
  right: 0;
  z-index: var(--z-navbar);
  pointer-events: none; /* re-enabled on the children, so gaps stay clickable */
  transition: top var(--dur-base) var(--ease-out);
}

.navbar__inner {
  width: 100%;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.navbar__inner > * { pointer-events: auto; }

/* ---- The shared glass surface ------------------------------------------ */

.glass-plate {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  border: 1px solid var(--glass-border);
  box-shadow:
    var(--shadow-float),
    var(--shadow-inset-metal);
  border-radius: var(--radius-pill);
  transition:
    background var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    padding var(--dur-base) var(--ease-out);
}

/* Browsers without backdrop-filter get a solid plate instead of unreadable
   transparent text. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass-plate { background: var(--glass-bg-strong); }
}

/* ---- Logo -------------------------------------------------------------- */

.navbar__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-5) var(--space-2) var(--space-2);
  text-decoration: none;
  color: var(--color-foreground);
  flex: none;
}

.navbar__logo {
  width: 52px;
  height: 52px;
  object-fit: contain;
  flex: none;
  transition: width var(--dur-base) var(--ease-out), height var(--dur-base) var(--ease-out);
}

/* Shown only while the real logo file is absent. */
.navbar__logo-fallback {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--grad-blue);
  color: #fff;
  font-weight: var(--weight-extrabold);
  font-size: var(--text-xl);
  letter-spacing: -0.04em;
  flex: none;
  box-shadow: var(--shadow-inset-metal);
}

.navbar__brand-text { display: flex; flex-direction: column; line-height: 1.1; }

.navbar__brand-name {
  font-size: var(--text-base);
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-primary);
  white-space: nowrap;
}

.navbar__brand-sub {
  font-size: 0.6875rem;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-muted-foreground);
  white-space: nowrap;
}

/* ---- Link pill --------------------------------------------------------- */

.navbar__nav { padding: var(--space-2); }

.navbar__list {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.navbar__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding-inline: var(--space-4);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.01em;
  color: var(--color-foreground);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}

/* The moving highlight behind the hovered or active link. */
.navbar__link::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--grad-blue-sheen);
  opacity: 0;
  transform: scale(0.88);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-metal);
  z-index: -1;
}

.navbar__link:hover { color: var(--color-on-primary); }
.navbar__link:hover::before { opacity: 1; transform: scale(1); }

.navbar__link[aria-current="page"] {
  color: var(--color-on-primary);
}

.navbar__link[aria-current="page"]::before { opacity: 1; transform: scale(1); }

/* The red underline marking the current page. */
.navbar__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: #fff;
  opacity: 0.85;
}

/* ---- Call to action ---------------------------------------------------- */

.navbar__cta { flex: none; }

/* ---- Scrolled state ---------------------------------------------------- */

.navbar.is-scrolled { top: var(--space-2); }

.navbar.is-scrolled .glass-plate {
  background: var(--glass-bg-strong);
  box-shadow: var(--shadow-lg), var(--shadow-inset-metal);
}

.navbar.is-scrolled .navbar__logo,
.navbar.is-scrolled .navbar__logo-fallback { width: 42px; height: 42px; }

.navbar.is-scrolled .navbar__link { height: 36px; }

/* Hide the navbar while scrolling down, bring it back on scroll up. */
.navbar.is-hidden { transform: translateY(calc(-100% - var(--space-6))); }

.navbar { transition: top var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }

/* ==========================================================================
   HAMBURGER AND MOBILE DRAWER
   ========================================================================== */

.navbar__toggle {
  display: none;
  width: var(--touch-target);
  height: var(--touch-target);
  border-radius: var(--radius-pill);
  place-items: center;
  flex: none;
}

.navbar__toggle-box {
  position: relative;
  width: 22px;
  height: 14px;
}

.navbar__toggle-bar {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: var(--color-primary);
  transition:
    transform var(--dur-base) var(--ease-metal),
    opacity var(--dur-fast) var(--ease-out),
    width var(--dur-base) var(--ease-out);
}

.navbar__toggle-bar:nth-child(1) { top: 0; }
.navbar__toggle-bar:nth-child(2) { top: 6px; width: 70%; }
.navbar__toggle-bar:nth-child(3) { top: 12px; }

/* Three bars fold into a cross. */
.navbar__toggle[aria-expanded="true"] .navbar__toggle-bar:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.navbar__toggle[aria-expanded="true"] .navbar__toggle-bar:nth-child(2) {
  opacity: 0;
  transform: translateX(-8px);
}

.navbar__toggle[aria-expanded="true"] .navbar__toggle-bar:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

.drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  visibility: hidden;
  pointer-events: none;
}

.drawer.is-open { visibility: visible; pointer-events: auto; }

.drawer__scrim {
  position: absolute;
  inset: 0;
  background: var(--overlay-scrim);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}

.drawer.is-open .drawer__scrim { opacity: 1; }

.drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(86vw, 380px);
  display: flex;
  flex-direction: column;
  padding: var(--space-6) var(--space-5) var(--space-8);
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(180%);
  backdrop-filter: blur(var(--glass-blur-strong)) saturate(180%);
  border-left: 1px solid var(--glass-border);
  box-shadow: var(--shadow-xl);
  transform: translateX(100%);
  transition: transform var(--dur-base) var(--ease-out);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.drawer.is-open .drawer__panel { transform: none; }

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-5);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.drawer__close {
  width: var(--touch-target);
  height: var(--touch-target);
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
  background: var(--color-muted);
  color: var(--color-primary);
  flex: none;
}

.drawer__close:hover { background: var(--blue-100); }

.drawer__list { display: flex; flex-direction: column; gap: var(--space-1); }

.drawer__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--touch-target);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-foreground);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.drawer__link:hover { background: var(--blue-50); color: var(--color-primary); }

.drawer__link[aria-current="page"] {
  background: var(--grad-blue);
  color: var(--color-on-primary);
}

.drawer__foot {
  margin-top: auto;
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.drawer__contact {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-muted-foreground);
  text-decoration: none;
  min-height: var(--touch-target);
}

.drawer__contact:hover { color: var(--color-primary); }

/* The navbar breakpoint lives at the END of this file, not here.
   See "RESPONSIVE NAVBAR" at the bottom for why. */

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--touch-target);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid transparent;
  transition:
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--grad-blue);
  color: var(--color-on-primary);
  box-shadow: var(--shadow-md), var(--shadow-inset-metal);
}

.btn--primary:hover { box-shadow: var(--shadow-lg), var(--shadow-inset-metal); }

.btn--accent {
  background: var(--grad-accent);
  color: var(--color-on-accent);
  box-shadow: var(--shadow-md), var(--shadow-inset-metal);
}

.btn--accent:hover { box-shadow: var(--shadow-lg), var(--shadow-inset-metal); }

/* Used only for an action that destroys something, and only in the
   confirmation dialog that asks about it. Red is kept for exactly this kind
   of meaning rather than spent on ordinary buttons. */
.btn--danger {
  background: var(--red-600);
  color: #fff;
  box-shadow: var(--shadow-sm);
}

.btn--danger:hover { background: var(--red-700); }

.btn--outline {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-border-strong);
}

.btn--outline:hover {
  border-color: var(--color-primary);
  background: var(--blue-50);
}

/* For use on top of dark background media. */
.btn--ghost-light {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.38);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.btn--ghost-light:hover { background: rgba(255, 255, 255, 0.22); }

.btn--lg { min-height: 52px; padding: var(--space-4) var(--space-8); font-size: var(--text-base); }
.btn--sm { min-height: 38px; padding: var(--space-2) var(--space-4); font-size: var(--text-xs); }
.btn--block { width: 100%; }

.btn[disabled], .btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.btn__icon { width: 18px; height: 18px; flex: none; }

/* ==========================================================================
   CARDS
   ========================================================================== */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  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-lg);
  border-color: var(--color-border-strong);
}

/* The metallic top edge that appears on hover. */
.card::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--grad-steel-edge);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}

.card:hover::after { opacity: 1; }

.card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-muted); }

/* A box that sets its own shape with a .ratio inside takes that height;
   otherwise the 4:3 above left a grey band under a 16:9 picture. */
.card__media:has(> .ratio) { aspect-ratio: auto; }

.card__media .media { position: absolute; inset: 0; }

.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }

.card:hover .card__media img { transform: scale(1.05); }

.card__body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }

.card__eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-accent);
}

.card__title { font-size: var(--text-lg); font-weight: var(--weight-bold); }

.card__title a { color: inherit; text-decoration: none; }

.card__text { font-size: var(--text-sm); color: var(--color-muted-foreground); line-height: var(--leading-snug); }

.card__foot {
  margin-top: auto;
  padding-top: var(--space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-primary);
  text-decoration: none;
}

.card__link:hover { gap: var(--space-3); color: var(--color-primary-hover); }

/* Makes the whole card clickable while the anchor keeps keyboard focus. */
.card--linked .card__title a::after { content: ""; position: absolute; inset: 0; z-index: 2; }

/* A glass card, for placing over background media. */
.card--glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(170%);
  backdrop-filter: blur(var(--glass-blur)) saturate(170%);
  border-color: var(--glass-border);
  box-shadow: var(--shadow-lg), var(--shadow-inset-metal);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .card--glass { background: var(--glass-bg-strong); }
}

/* A card that sits on a dark hero. */
.card--on-dark {
  background: rgba(8, 26, 56, 0.55);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  border-color: rgba(255, 255, 255, 0.18);
  color: var(--steel-100);
}

.card--on-dark .card__title { color: #fff; }
.card--on-dark .card__text { color: rgba(242, 244, 246, 0.82); }

/* ---- Stat card --------------------------------------------------------- */

.stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-xs);
}

.stat__value {
  font-size: var(--text-3xl);
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
}

.stat__label {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-muted-foreground);
}

/* ==========================================================================
   BADGES AND PILLS
   ========================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border: 1px solid transparent;
}

.badge--iso {
  background: var(--blue-50);
  color: var(--blue-800);
  border-color: var(--blue-200);
}

.badge--accent { background: var(--accent-50); color: var(--accent-700); border-color: var(--accent-200); }
.badge--steel  { background: var(--steel-100); color: var(--steel-800); border-color: var(--steel-300); }
.badge--on-dark {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.28);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.badge--success { background: #E7F5EE; color: #0B5C3B; border-color: #B7E0CC; }
.badge--warning { background: #FDF3E2; color: #7A4800; border-color: #F3DCB4; }
.badge--danger  { background: var(--red-50); color: var(--red-700); border-color: var(--red-200); }

/* ==========================================================================
   FORMS
   ========================================================================== */

.field { display: flex; flex-direction: column; gap: var(--space-2); }

.field__label {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-foreground);
}

.field__label .req { color: var(--color-accent); margin-left: 2px; }

.field__hint { font-size: var(--text-xs); color: var(--color-muted-foreground); }

.field__error { font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--color-danger); }

.input, .textarea, .select {
  width: 100%;
  min-height: var(--touch-target);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
  color: var(--color-foreground);
  font-size: var(--text-base);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.input:focus-visible, .textarea:focus-visible, .select:focus-visible {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--shadow-focus);
}

.input[aria-invalid="true"], .textarea[aria-invalid="true"] {
  border-color: var(--color-danger);
}

.textarea { min-height: 120px; resize: vertical; line-height: var(--leading-normal); }

.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235A6472' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  padding-right: var(--space-10);
}

.form-grid { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }

@media (min-width: 700px) {
  .form-grid--2 { grid-template-columns: 1fr 1fr; }
  .form-grid .field--full { grid-column: 1 / -1; }
}

/* Honeypot. Hidden from people, visible to naive bots. */
.field--trap {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* ==========================================================================
   TECHNICAL TABLES
   Specification tables can run to fifteen columns. They scroll sideways in
   their own container rather than being squeezed into unreadable text.
   ========================================================================== */

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-raised);
  /* Fades at the edge to signal that there is more to the right. */
  background-image:
    linear-gradient(to right, var(--color-surface-raised), transparent 12px),
    linear-gradient(to left, var(--color-surface-raised), transparent 12px);
  background-position: left center, right center;
  background-repeat: no-repeat;
  background-size: 24px 100%, 24px 100%;
  background-attachment: local, local;
}

.table-scroll:focus-visible { box-shadow: var(--shadow-focus); }

.spec-table { width: 100%; min-width: 520px; font-size: var(--text-sm); }

/* A table of three columns or fewer (property, value, unit) fits a phone
   when its text wraps, so it should not scroll sideways and hide half of
   every value. Only wide tables keep the minimum width and the scroll. */
.spec-table:not(:has(tr > :nth-child(4))) { min-width: 0; }

/* ---- Phone: one block per row -------------------------------------------
   Even four columns do not fit a phone; scrolling sideways hid the value or
   the unit of every row. Below 600px each row becomes a block: the row
   heading on top, then each value with its column heading beside it (the
   data-label detail.js and seoPage.js put on every cell). The header row is
   kept for screen readers but not drawn. */
@media (max-width: 599.98px) {
  .table-scroll:has(> .spec-table[data-stack]) { overflow: visible; background-image: none; }

  .spec-table[data-stack] { min-width: 0; }

  .spec-table[data-stack] thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .spec-table[data-stack] tr {
    display: block;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
  }

  .spec-table[data-stack] tbody tr:last-child { border-bottom: none; }

  .spec-table[data-stack] tr > * {
    display: block;
    width: auto;
    padding: 0;
    border: none;
    background: none;
    white-space: normal;
  }

  .spec-table[data-stack] tr > :first-child {
    font-weight: var(--weight-semibold);
    color: var(--color-foreground);
    margin-bottom: var(--space-1);
  }

  .spec-table[data-stack] td[data-label] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-4);
    padding-block: 2px;
    text-align: right;
  }

  .spec-table[data-stack] td[data-label]::before {
    content: attr(data-label);
    flex: none;
    max-width: 45%;
    text-align: left;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-muted-foreground);
  }

  /* An empty cell in a stacked row is just noise. */
  .spec-table[data-stack] td[data-label]:empty { display: none; }
}

.spec-table caption {
  text-align: left;
  padding: var(--space-4) var(--space-5);
  font-weight: var(--weight-bold);
  color: var(--color-foreground);
  border-bottom: 1px solid var(--color-border);
}

.spec-table th, .spec-table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}

.spec-table thead th {
  background: var(--color-surface);
  font-weight: var(--weight-bold);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-muted-foreground);
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 1;
}

.spec-table tbody tr:last-child th,
.spec-table tbody tr:last-child td { border-bottom: none; }

.spec-table tbody tr:hover { background: var(--blue-50); }

.spec-table .num { font-variant-numeric: tabular-nums; white-space: nowrap; }

.spec-table .unit { color: var(--color-muted-foreground); font-size: var(--text-xs); }

/* Row-header layout for a two-column property/value table. */
.spec-table--pairs th[scope="row"] {
  width: 38%;
  font-weight: var(--weight-semibold);
  color: var(--color-muted-foreground);
  background: var(--color-surface);
}

/* ==========================================================================
   BREADCRUMBS
   ========================================================================== */

.breadcrumb { font-size: var(--text-sm); }

.breadcrumb__list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }

.breadcrumb__item { display: inline-flex; align-items: center; gap: var(--space-2); }

.breadcrumb__item + .breadcrumb__item::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--color-border-strong);
  flex: none;
}

.breadcrumb__link { color: var(--color-muted-foreground); text-decoration: none; }
.breadcrumb__link:hover { color: var(--color-primary); text-decoration: underline; }
.breadcrumb__item[aria-current="page"] { color: var(--color-foreground); font-weight: var(--weight-semibold); }

/* On a dark hero. */
.breadcrumb--on-dark .breadcrumb__link { color: rgba(255, 255, 255, 0.72); }
.breadcrumb--on-dark .breadcrumb__link:hover { color: #fff; }
.breadcrumb--on-dark .breadcrumb__item[aria-current="page"] { color: #fff; }
.breadcrumb--on-dark .breadcrumb__item + .breadcrumb__item::before { background: rgba(255, 255, 255, 0.4); }

/* ==========================================================================
   FOOTER
   ========================================================================== */

.footer {
  position: relative;
  background: var(--blue-950);
  color: var(--steel-300);
  padding-block: var(--space-16) var(--space-6);
  overflow: hidden;
}

.footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(122, 165, 243, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(122, 165, 243, 0.05) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}

/* The metallic hairline across the very top. */
.footer::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--grad-steel-edge);
  opacity: 0.6;
}

.footer > * { position: relative; }

.footer__grid {
  display: grid;
  gap: var(--space-10);
  grid-template-columns: 1fr;
}

@media (min-width: 720px) {
  .footer__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1040px) {
  .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; }
}

.footer__brand { display: flex; flex-direction: column; gap: var(--space-4); }

.footer__logo-row { display: flex; align-items: center; gap: var(--space-3); }

.footer__logo { width: 56px; height: 56px; object-fit: contain; flex: none; }

.footer__name { font-size: var(--text-lg); font-weight: var(--weight-extrabold); color: #fff; line-height: 1.2; }

.footer__iso {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--blue-300);
}

.footer__about { font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--steel-400); max-width: 42ch; }

.footer__heading {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: #fff;
  margin-bottom: var(--space-4);
}

.footer__list { display: flex; flex-direction: column; gap: var(--space-1); }

.footer__link {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  font-size: var(--text-sm);
  color: var(--steel-400);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out), padding-left var(--dur-fast) var(--ease-out);
}

.footer__link:hover { color: #fff; padding-left: var(--space-2); }

.footer__contact-item {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  font-size: var(--text-sm);
  color: var(--steel-400);
  padding-block: var(--space-2);
}

.footer__contact-item a { color: var(--steel-400); text-decoration: none; }
.footer__contact-item a:hover { color: #fff; text-decoration: underline; }

.footer__icon { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--blue-300); }

.footer__address { font-style: normal; line-height: var(--leading-snug); }

/* LinkedIn is the only social profile on this site. */
.footer__social {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--touch-target);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out);
}

.footer__social:hover { background: rgba(255, 255, 255, 0.14); }

.footer__bottom {
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
  justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--steel-500);
}

.footer__legal { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.footer__legal a { color: var(--steel-500); text-decoration: none; }
.footer__legal a:hover { color: var(--steel-300); }

/* ==========================================================================
   TOASTS
   ========================================================================== */

.toast-stack {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: min(92vw, 380px);
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary);
  box-shadow: var(--shadow-lg);
  font-size: var(--text-sm);
  pointer-events: auto;
  animation: toast-in var(--dur-base) var(--ease-out);
}

.toast--success { border-left-color: var(--color-success); }
.toast--error { border-left-color: var(--color-danger); }
.toast--warning { border-left-color: var(--color-warning); }

.toast.is-leaving { animation: toast-out var(--dur-fast) var(--ease-in-out) forwards; }

@keyframes toast-in {
  from { opacity: 0; transform: translateX(24px); }
  to { opacity: 1; transform: none; }
}

@keyframes toast-out {
  to { opacity: 0; transform: translateX(24px); }
}

@media (prefers-reduced-motion: reduce) {
  .toast, .toast.is-leaving { animation: none; }
}

/* ==========================================================================
   EMPTY AND LOADING STATES
   ========================================================================== */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-16) var(--space-6);
  text-align: center;
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.empty-state__title { font-size: var(--text-lg); font-weight: var(--weight-bold); }
.empty-state__text { font-size: var(--text-sm); color: var(--color-muted-foreground); max-width: 46ch; }

.spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--color-muted);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .spinner { animation-duration: 2s; }
}

.skeleton {
  background: linear-gradient(100deg, var(--color-muted) 30%, var(--steel-100) 50%, var(--color-muted) 70%);
  background-size: 220% 100%;
  animation: shimmer 1.4s linear infinite;
  border-radius: var(--radius-sm);
}

/* ==========================================================================
   TAGS - grade and material chips on product and category cards
   Text wraps rather than clipping, which is what keeps a long grade
   designation like "F316/316L" readable at 320px.
   ========================================================================== */

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-1);
}

.tag {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-muted-foreground);
  line-height: 1.6;
  overflow-wrap: break-word;
}

.tag--grade {
  font-family: var(--font-mono);
  background: var(--blue-50);
  border-color: var(--blue-200);
  color: var(--blue-800);
}

.card__meta {
  font-size: var(--text-xs);
  color: var(--color-muted-foreground);
  font-variant-numeric: tabular-nums;
}

/* Industry cards live in pages.css now, with their picture box. */

/* ==========================================================================
   ICON TILE

   Stands in for a photograph that has not been uploaded yet. Replaces the
   large blue gradient box, which read as an unfinished page when seven of
   them appeared down the homepage.

   Light surface, brand-blue line icon, faint technical grid. It looks like a
   deliberate design choice rather than a missing image, and it keeps looking
   right as real photography replaces the tiles one at a time.
   ========================================================================== */

.icon-tile {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-height: 150px;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 0%, #FFFFFF 0%, var(--steel-50) 55%, var(--steel-100) 100%);
  border-bottom: 1px solid var(--color-border);
}

.icon-tile__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(11, 62, 151, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11, 62, 151, 0.055) 1px, transparent 1px);
  background-size: 26px 26px;
  /* Fades toward the middle so the icon is not fighting the grid. */
  mask-image: radial-gradient(70% 70% at 50% 50%, transparent 20%, #000 100%);
  -webkit-mask-image: radial-gradient(70% 70% at 50% 50%, transparent 20%, #000 100%);
}

.icon-tile__mark {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--blue-100);
  color: var(--color-primary);
  box-shadow: 0 6px 18px -8px rgba(11, 62, 151, 0.28);
  transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}

.icon-tile__mark svg { width: 38px; height: 38px; }

/* The accent appears only on hover, so the resting state stays calm. */
.card:hover .icon-tile__mark,
.industry-card:hover .icon-tile__mark {
  transform: scale(1.06);
  border-color: var(--accent-200);
}

.icon-tile__label {
  position: absolute;
  bottom: var(--space-3);
  left: 0;
  right: 0;
  z-index: 1;
  text-align: center;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--steel-500);
  padding-inline: var(--space-3);
}

/* Smaller variant, for an inline list rather than a card header. */
.icon-tile--sm { min-height: 0; aspect-ratio: 1; border-bottom: none; background: none; }
.icon-tile--sm .icon-tile__grid { display: none; }
.icon-tile--sm .icon-tile__mark { width: 48px; height: 48px; }
.icon-tile--sm .icon-tile__mark svg { width: 24px; height: 24px; }

/* ==========================================================================
   INLINE ICON BADGE - an icon beside a heading, not a full tile
   ========================================================================== */

.icon-badge {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: var(--radius-md);
  background: var(--blue-50);
  border: 1px solid var(--blue-100);
  color: var(--color-primary);
}

.icon-badge svg { width: 22px; height: 22px; }

.icon-badge--accent { background: var(--accent-50); border-color: var(--accent-200); color: var(--color-accent); }
.icon-badge--steel  { background: var(--steel-100); border-color: var(--steel-300); color: var(--steel-700); }


/* ==========================================================================
   RESPONSIVE NAVBAR
   ==========================================================================

   THIS BLOCK MUST STAY LAST IN THIS FILE.

   It was originally placed up with the navbar rules, which broke it. The
   reason is pure cascade: `.navbar__cta` and `.btn` are both single-class
   selectors, so they have identical specificity and the one written later
   wins. The button definitions come after the navbar section, so
   `.btn { display: inline-flex }` was overriding `display: none` and the
   "Get a Quote" button stayed visible on phones, pushing the hamburger
   clean off the right edge of the screen.

   A media query carries no extra specificity. Source order is the only
   thing deciding this, which is why these overrides belong at the end.
   ========================================================================== */

@media (max-width: 1080px) {
  /* Below this width the pill cannot hold seven links without crowding, so
     the whole lot moves into the drawer. The top bar keeps the logo and the
     hamburger and nothing else. */
  .navbar__nav,
  .navbar__cta {
    display: none !important;
  }

  .navbar__toggle { display: grid; }

  /* Logo and hamburger sit at opposite ends. */
  .navbar__inner { justify-content: space-between; }
}

@media (max-width: 420px) {
  /* At the narrowest sizes the wordmark beside the logo is what runs out of
     room first, so the mark stands alone. */
  .navbar__brand { padding-right: var(--space-2); }
  .navbar__brand-text { display: none; }
  .navbar__logo,
  .navbar__logo-fallback { width: 44px; height: 44px; }
}


/* ==========================================================================
   NARROW SCREEN BUTTON WRAPPING

   `.btn` is `white-space: nowrap` so a label never breaks awkwardly mid
   phrase. At 320px that backfires: a long label such as "Open the export
   enquiry form" cannot fit on one line and pushes past the right edge of the
   screen instead.

   Below 400px the label is allowed to wrap onto a second line. A two-line
   button is fine; a button running off the screen is not.
   ========================================================================== */

@media (max-width: 400px) {
  .btn {
    white-space: normal;
    text-align: center;
    /* Never wider than its column. */
    max-width: 100%;
  }

  .btn--lg {
    padding-inline: var(--space-5);
    font-size: var(--text-sm);
  }

  /* A wrapped label needs the icon to stay on the baseline of the first line
     rather than stretching the button. */
  .btn__icon { flex: none; }
}

/* ==========================================================================
   ICON TILE HEIGHT

   A photograph earns a 4:3 box. An icon does not: at 4:3 the tile is mostly
   empty space and the card reads as padded out. Where the header holds an
   icon tile instead of a picture, the box is shortened.

   :has() is supported in every current browser. Older ones simply keep the
   4:3 box, which still looks correct, just taller.
   ========================================================================== */

.card__media:has(.icon-tile) { aspect-ratio: 16 / 7; }

.card__media:has(.icon-tile) .icon-tile { min-height: 0; }

.card__media:has(.icon-tile) .icon-tile__mark { width: 62px; height: 62px; }
.card__media:has(.icon-tile) .icon-tile__mark svg { width: 30px; height: 30px; }

/* With the tile shortened, a bottom label would crowd the icon. */
.card__media:has(.icon-tile) .icon-tile__label { bottom: var(--space-2); font-size: 0.6875rem; }
.card__media:has(.icon-tile) .icon-tile__mark:has(+ .icon-tile__label) { transform: translateY(-7px); }

@media (max-width: 480px) {
  .card__media:has(.icon-tile) { aspect-ratio: 16 / 6; }
}

/* ==========================================================================
   CAROUSEL

   A real scroll container with CSS snapping. carousel.js drives it by setting
   scrollLeft, so a trackpad swipe and a phone flick keep the platform's own
   momentum instead of an emulated one.
   ========================================================================== */

.carousel { position: relative; }

.carousel__viewport {
  display: block;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  /* Room for the cards' hover lift and shadow, which would otherwise be
     clipped by the scroll container. */
  padding: var(--space-2) var(--space-1) var(--space-6);
  margin-inline: calc(var(--space-1) * -1);
  scrollbar-width: none;
}

.carousel__viewport::-webkit-scrollbar { display: none; }

.carousel__viewport:focus-visible {
  outline: 3px solid var(--color-ring);
  outline-offset: 4px;
  border-radius: var(--radius-lg);
}

@media (prefers-reduced-motion: reduce) {
  .carousel__viewport { scroll-behavior: auto; }
}

.carousel__track {
  display: flex;
  gap: var(--space-6);
  list-style: none;
  padding: 0;
  margin: 0;
}

.carousel__item {
  /* One card per screen on a phone, then as many as fit. flex-basis rather
     than a fixed width so the cards share the row evenly. */
  flex: 0 0 clamp(260px, 78vw, 320px);
  scroll-snap-align: start;
  display: flex;
  /* Entrance state. carousel.js adds is-in as each card scrolls into the row. */
  opacity: 0;
  transform: translateX(28px) scale(0.97);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
  transition-delay: calc(var(--carousel-i, 0) * 60ms);
}

.carousel__item > * { width: 100%; }

.carousel__item.is-in { opacity: 1; transform: none; }

/* On a phone a card narrower than the row left an empty strip on its right,
   so the card sat visibly off-centre. One full-width card per screen, snapped
   to the middle; the arrows and the rail show there are more. */
@media (max-width: 639.98px) {
  .carousel__track { gap: var(--space-4); }
  .carousel__item { flex-basis: 100%; scroll-snap-align: center; }
  .carousel::after { opacity: 0; }
}

@media (min-width: 640px) {
  .carousel__item { flex-basis: clamp(280px, 44vw, 340px); }
}

@media (min-width: 1024px) {
  .carousel__item { flex-basis: clamp(300px, 30vw, 360px); }
}

@media (prefers-reduced-motion: reduce) {
  .carousel__item { opacity: 1; transform: none; transition: none; }
}

/* While dragging, suppress the snap so the row follows the pointer exactly,
   and stop the cards' own hover transforms fighting the drag. */
.carousel.is-dragging .carousel__viewport {
  scroll-snap-type: none;
  scroll-behavior: auto;
  cursor: grabbing;
}

.carousel.is-dragging .carousel__item > * { pointer-events: none; }

/* ---- Controls ---------------------------------------------------------- */

.carousel__controls {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-2);
}

/* Nothing to scroll: the arrows and rail would be decoration. */
.carousel--static .carousel__controls { display: none; }

.carousel__arrow {
  flex: none;
  width: var(--touch-target);
  height: var(--touch-target);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-strong);
  color: var(--color-primary);
  box-shadow: var(--shadow-xs);
  transition:
    background var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out),
    opacity var(--dur-fast) var(--ease-out);
}

.carousel__arrow svg { width: 20px; height: 20px; }

.carousel__arrow:hover:not([disabled]) {
  background: var(--grad-blue);
  border-color: transparent;
  color: var(--color-on-primary);
  transform: scale(1.06);
  box-shadow: var(--shadow-md);
}

.carousel__arrow[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
  color: var(--color-muted-foreground);
}

/* ---- Progress rail ----------------------------------------------------- */

.carousel__rail {
  position: relative;
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: var(--color-muted);
  overflow: hidden;
}

/* Width is the visible share of the row, so four of six visible shows a
   two-thirds bar rather than a dot. Position comes from a transform. */
.carousel__rail-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 40%;
  border-radius: 2px;
  background: var(--grad-blue);
  transition: transform var(--dur-base) var(--ease-out), width var(--dur-base) var(--ease-out);
}

/* ---- Edge fade ---------------------------------------------------------
   Signals there is more to the right without adding furniture. Sits above
   the row and lets clicks through.
   ------------------------------------------------------------------- */

.carousel::after {
  content: "";
  position: absolute;
  top: 0;
  right: calc(var(--space-1) * -1);
  bottom: var(--space-10);
  width: clamp(24px, 5vw, 64px);
  pointer-events: none;
  background: linear-gradient(to right, transparent, var(--color-background));
  opacity: 1;
  transition: opacity var(--dur-base) var(--ease-out);
}

/* On a surface-coloured section the fade has to match that surface. */
.section--surface .carousel::after,
.industries .carousel::after {
  background: linear-gradient(to right, transparent, var(--color-surface));
}

.carousel--static::after { opacity: 0; }

/* ==========================================================================
   FOOTER ENQUIRY STRIP
   The last direct route to a quotation, above the footer columns.
   ========================================================================== */

.footer__strip {
  position: relative;
  z-index: 1;
  background:
    radial-gradient(50rem 24rem at 88% 0%, rgba(217, 26, 32, 0.20), transparent 70%),
    var(--grad-blue);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.footer__strip-inner {
  display: grid;
  gap: var(--space-6);
  align-items: center;
  grid-template-columns: 1fr;
  padding-block: clamp(var(--space-8), 4vw, var(--space-12));
}

@media (min-width: 900px) {
  .footer__strip-inner { grid-template-columns: 1fr auto; }
}

.footer__strip-eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent-200);
  margin-bottom: var(--space-2);
}

.footer__strip-title {
  font-size: clamp(var(--text-xl), 1.1rem + 1.1vw, var(--text-3xl));
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-tight);
  color: #fff;
  line-height: var(--leading-tight);
}

.footer__strip-text {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: rgba(255, 255, 255, 0.82);
  max-width: 54ch;
}

.footer__strip-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* ==========================================================================
   STANDARDS MARQUEE

   A slow-moving strip of the standards bodies whose designations appear on
   the products in this catalogue.

   The track holds two copies of the list and translates by exactly half its
   width, so the loop has no visible seam and needs no JavaScript. The second
   copy is aria-hidden, or a screen reader would read all twelve twice.
   ========================================================================== */

.footer__marquee {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-block: var(--space-6);
  background: var(--blue-950);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.footer__marquee-label {
  padding-inline: var(--gutter);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--blue-300);
}

.footer__marquee-viewport {
  position: relative;
  overflow: hidden;
  /* Fades at both edges so the codes appear and vanish rather than being cut
     off against the edge of the screen. */
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}

.footer__marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 34s linear infinite;
}

.footer__marquee:hover .footer__marquee-track { animation-play-state: paused; }

.footer__marquee-list {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding-inline: var(--space-4);
  margin: 0;
  list-style: none;
}

.footer__standard {
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.34);
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out);
}

.footer__standard:hover { color: #fff; }

@keyframes marquee {
  from { transform: translateX(0); }
  /* Exactly half the track, which is one full copy of the list. */
  to { transform: translateX(-50%); }
}

/* A moving strip is the sort of thing this setting exists to stop, so it
   becomes a static, wrapped row instead. */
@media (prefers-reduced-motion: reduce) {
  .footer__marquee-track { animation: none; width: 100%; }
  .footer__marquee-list:last-child { display: none; }
  .footer__marquee-list { flex-wrap: wrap; gap: var(--space-4) var(--space-6); }
  .footer__marquee-viewport { mask-image: none; -webkit-mask-image: none; }
}

/* Keeps the strip copy from being squeezed by the buttons beside it. */
.footer__strip-copy { min-width: 0; }