/* ============================================================
   George Black Textile Group — industrial design system
   Palette: dark grey #2C3E4E / steel blue #4A7C8C / accent #E67E22
   Fonts: Montserrat (headings) / Inter (body)
   ============================================================ */

:root {
  --ink: #2C3E4E;
  --ink-deep: #1F2D3A;
  --steel: #4A7C8C;
  --steel-light: #6B9AAA;
  --accent: #E67E22;
  --accent-dark: #C8690F;
  --accent-warm: #E0492C;
  --paper: #F7F8F6;
  --white: #FFFFFF;
  --line: rgba(44, 62, 78, 0.16);
  --line-light: rgba(255, 255, 255, 0.14);
  --text: #33424F;
  --text-muted: #5C6B77;
  --danger: #C0392B;
  --ok: #1E8449;

  --font-head: 'Space Grotesk', 'Montserrat', 'Arial Black', sans-serif;
  --font-body: 'Inter', 'Helvetica Neue', sans-serif;
  /* Brand lockup: script name (self-hosted lookalike) + Times tagline */
  --font-brand-script: 'Brand Script', 'Segoe Script', cursive;
  --font-brand-serif: 'Times LT Std', 'Times New Roman', Times, serif;

  --radius: 2px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --shadow-card: 0 2px 4px rgba(31, 45, 58, 0.08), 0 12px 28px rgba(31, 45, 58, 0.10);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; background: var(--ink-deep); }

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--ink);
  line-height: 1.15;
  text-wrap: balance;
}

a { color: var(--steel); }
a:hover { color: var(--accent-dark); }

ul { list-style: none; }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 200;
  background: var(--accent);
  color: var(--white);
  padding: 0.6rem 1.2rem;
  font-family: var(--font-head);
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus { top: 0.5rem; color: var(--white); }

/* ============================================================
   LOADING SCREEN (Premium Enhancement)
   ============================================================ */
.loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--white) 0%, var(--paper) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
}

.loading-screen.hidden {
  opacity: 0;
  visibility: hidden;
}

.loader {
  width: 100px;
  height: 100px;
  margin-bottom: 1.5rem;
}

.thread-spinner {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 4px rgba(74, 124, 140, 0.25));
}

.animate-thread {
  animation: thread-flow 2s ease-in-out infinite;
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
}

@keyframes thread-flow {
  0% { stroke-dashoffset: 0; }
  50% { stroke-dashoffset: -50; }
  100% { stroke-dashoffset: -100; }
}

.loader-text {
  font-size: 16px;
  font-weight: 600;
  color: var(--steel);
  letter-spacing: 0.3px;
  animation: pulse-text 2s ease-in-out infinite;
}

@keyframes pulse-text {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; }
}

/* ============================================================
   HERO THREAD ANIMATION (Premium Enhancement)
   ============================================================ */
.hero-thread-animation {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

.thread-primary,
.thread-secondary,
.thread-tertiary {
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  filter: drop-shadow(0 0 6px rgba(74, 124, 140, 0.5));
}

.thread-primary {
  animation: thread-weave 5s ease-in-out infinite;
  opacity: 0.30;
}

.thread-secondary {
  animation: thread-weave 5.5s ease-in-out infinite 0.4s;
  opacity: 0.22;
}

.thread-tertiary {
  animation: thread-weave 6s ease-in-out infinite 0.8s;
  opacity: 0.16;
}

@keyframes thread-weave {
  0% { stroke-dashoffset: 2000; }
  50% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -2000; }
}

/* ---------- Hero noise texture (fabric/canvas feel) ---------- */
.hero-noise {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.08;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================
   SCROLL ANIMATIONS (Premium Enhancement - Subtle)
   ============================================================ */
.reveal-section {
  opacity: 0;
  animation: reveal-fade 0.8s ease-out 0.2s forwards;
}

@keyframes reveal-fade {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-up-item {
  opacity: 0;
  animation: reveal-fade 0.6s ease-out forwards;
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--ink-deep);
  border-bottom: 3px solid var(--accent);
}

.header-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0.85rem var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
}

.brand-name {
  display: block;
  font-family: var(--font-brand-script);
  font-weight: 400;
  font-size: 1.7rem;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--white);
}

.brand-sub {
  display: block;
  margin-top: 0.1rem;
  font-family: var(--font-brand-serif);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

/* Shrink the brand lockup on phones so the long tagline clears the
   search icon + hamburger (and can wrap gracefully if very narrow). */
@media (max-width: 600px) {
  .brand-name { font-size: 1.35rem; }
  .brand-sub { font-size: 0.5rem; letter-spacing: 0.06em; }
}

.primary-nav ul {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.primary-nav a {
  display: block;
  padding: 0.55rem 0.9rem;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.82);
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  white-space: nowrap;
}

.primary-nav a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--accent);
  transform: translateX(-50%);
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.primary-nav a:hover {
  color: var(--white);
}

.primary-nav a:hover::after {
  width: 60%;
}

.primary-nav a[aria-current="page"] {
  color: var(--white);
  border-bottom-color: var(--steel);
}

.primary-nav a[aria-current="page"]::after {
  width: 60%;
  background: var(--steel);
}

.primary-nav .nav-cta {
  background: var(--accent);
  color: var(--white);
  margin-left: 0.5rem;
  border-bottom: none;
}
.primary-nav .nav-cta:hover { background: var(--accent-dark); }
.primary-nav .nav-cta[aria-current="page"] { background: var(--accent-dark); }

/* Mobile nav toggle */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: 1px solid var(--line-light);
  padding: 10px 9px;
  cursor: pointer;
}

.nav-toggle-bar {
  width: 22px;
  height: 2px;
  background: var(--white);
  transition: transform 0.25s, opacity 0.25s;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   HEADER SEARCH
   ============================================================ */
/* Search trigger — icon button in the header (desktop: in the nav just left of
   Contact; mobile: in the top bar). Opening it drops a full-width bar below. */
.header-search-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: none;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.72);
  transition: color 0.2s;
}
.header-search-toggle:hover { color: var(--white); }
.header-search-toggle .hs-icon { width: 18px; height: 18px; display: block; }
.header-search-toggle .hs-icon--close { display: none; }
.site-header.is-search-open .hs-icon--search { display: none; }
.site-header.is-search-open .hs-icon--close { display: block; }

/* Mobile-only trigger lives in the top bar (right cluster); hidden on desktop. */
.header-search-toggle--mobile { display: none; margin-left: auto; }

/* Full-width slide-down search bar — an absolute overlay under the sticky
   header, so opening it never reflows the page. */
.site-search-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 90;
  background: var(--ink-deep);
  border-bottom: 3px solid var(--accent);
  box-shadow: var(--shadow-card);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  /* Visibility flips instantly on open (0s delay) but waits for the fade on
     close (0.25s delay) so the bar animates both in and out. */
  transition: opacity 0.25s ease,
              transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0s linear 0.25s;
}
.site-header.is-search-open .site-search-panel {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.25s ease,
              transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0s linear 0s;
}

.site-search-inner {
  position: relative;
  max-width: 1240px;
  margin: 0 auto;
  padding: 1rem var(--gutter) 1.2rem;
}

.site-search-input {
  width: 100%;
  height: 2.9rem;
  padding: 0 2.9rem;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--white);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line-light);
  border-radius: var(--radius);
  transition: border-color 0.2s, background 0.2s;
}
.site-search-input::placeholder { color: rgba(255, 255, 255, 0.5); }
.site-search-input:focus {
  border-color: var(--steel-light);
  background: rgba(255, 255, 255, 0.1);
}
.site-search-input::-webkit-search-decoration,
.site-search-input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* Leading magnifier + trailing close, vertically centred on the 2.9rem input
   that starts at the panel's 1rem top padding. */
.site-search-lead {
  position: absolute;
  left: calc(var(--gutter) + 0.85rem);
  top: calc(1rem + 1.45rem);
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: rgba(255, 255, 255, 0.5);
  pointer-events: none;
}
.site-search-lead svg { width: 100%; height: 100%; display: block; }

.site-search-close {
  position: absolute;
  right: calc(var(--gutter) + 0.5rem);
  top: calc(1rem + 1.45rem);
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.6);
  transition: color 0.2s;
}
.site-search-close:hover { color: var(--white); }
.site-search-close svg { width: 18px; height: 18px; display: block; }

/* Results list — sits inline in the panel, below the input (white card). */
.search-results {
  width: 100%;
  margin-top: 0.85rem;
  max-height: 52vh;
  overflow-y: auto;
  padding: 0.3rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  box-shadow: var(--shadow-card);
}

.search-results__group {
  padding: 0.55rem 0.7rem 0.25rem;
  font-family: var(--font-head);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--steel);
}

.search-result {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-radius: var(--radius);
  padding: 0.55rem 0.7rem;
  cursor: pointer;
  transition: background 0.15s;
}
.search-result:hover,
.search-result.is-active { background: rgba(74, 124, 140, 0.10); }
.search-result:focus-visible { outline: 3px solid var(--accent); outline-offset: -2px; }

.search-result-name {
  display: block;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--ink);
}
.search-result-meta {
  display: block;
  margin-top: 0.1rem;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.search-results__empty {
  padding: 0.85rem 0.7rem;
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* Card that a search result jumped to — brief accent pulse */
.supplier-card.is-search-target {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  animation: search-target-pulse 2.4s ease;
}
@keyframes search-target-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(230, 126, 34, 0.55); }
  35%  { box-shadow: 0 0 0 10px rgba(230, 126, 34, 0); }
  100% { box-shadow: 0 0 0 0 rgba(230, 126, 34, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .supplier-card.is-search-target { animation: none; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  background:
    linear-gradient(135deg, #243747 0%, #2E4658 54%, #426B81 100%);
  color: var(--white);
  overflow: hidden;
}

/* Duotone factory photograph behind the hero (the tactile-material moment) */
.hero-photo {
  position: absolute;
  top: -9%;
  left: 0;
  width: 100%;
  height: 118%;
  z-index: 0;
  background: url("../images/hero-floor.jpg") center 8% / cover no-repeat;
  filter: grayscale(0.5) contrast(1.02) brightness(0.95) saturate(1.05);
  will-change: transform;
}

.hero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(150deg, var(--steel) 0%, var(--ink-deep) 95%);
  mix-blend-mode: multiply;
  opacity: 0.38;
}

/* Woven-thread texture laid over the photo for the fabric feel */
.hero-weave {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 7px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,0.06) 0 2px, transparent 2px 7px);
  background-size: 9px 9px;
}

.hero-grid-lines {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image:
    linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: 56px 56px;
  pointer-events: none;
}

.hero::after {
  content: "";
  position: absolute;
  right: -120px;
  top: -80px;
  width: 420px;
  height: 420px;
  background: var(--steel);
  opacity: 0.18;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  transform: rotate(12deg);
  pointer-events: none;
  z-index: 1;
}

/* Legibility scrim so the headline stays crisp over the photograph */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(840px 440px at 84% -10%, rgba(232,140,62,0.22) 0%, rgba(232,140,62,0) 62%),
    linear-gradient(90deg, rgba(20,30,38,0.80) 0%, rgba(20,30,38,0.48) 44%, rgba(20,30,38,0.14) 100%),
    linear-gradient(0deg, rgba(20,30,38,0.60) 0%, transparent 40%);
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 3;
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(3.5rem, 9vw, 6.5rem) var(--gutter) clamp(2.5rem, 6vw, 4rem);
}

.hero-kicker {
  font-family: var(--font-head);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.2rem;
  animation: rise-in 0.6s ease both;
}

.hero h1 {
  font-size: clamp(2.1rem, 5.4vw, 3.9rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--white);
  margin-bottom: 1.4rem;
  animation: rise-in 0.6s 0.1s ease both;
}

.accent-text { color: var(--accent); }

/* Premium gradient headline — only where background-clip:text is supported,
   so the text is never invisible (forced-colors / print / old browsers). */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero h1 {
    background: linear-gradient(180deg, #FFFFFF 0%, #C7D6DC 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .accent-text {
    background: linear-gradient(180deg, #F4A55F 0%, var(--accent) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  /* The rotating word must stay SOLID-coloured: gradient background-clip:text
     on an element whose text/opacity/width keep changing makes Chromium leave
     stale "ghost" copies of the word painted over the heading line above.
     -webkit-text-fill-color must be re-opaqued here because the transparent
     fill set on .hero h1 above is inherited. */
  .slot-word {
    background: none;
    -webkit-text-fill-color: var(--accent);
  }
}

/* Headline word rotation — a smooth downward slide with exactly one word
   in the window at any time. JS (initHeroSlot in main.js) spawns the next
   word parked above the window (.slot-word sits at translateY(-115%) by
   default) and tags it .is-active so it drops to 0; the outgoing word is
   removed from the DOM in that same step rather than animating out, so
   only one word is ever in motion.
   The window (.slot) resizes to each word with the SAME duration/easing
   so the width and slide travel in lockstep. The word stays
   SOLID-coloured (no gradient clip — see the @supports block above):
   Chromium's compositor leaves stale ghost copies of gradient-clipped
   (background-clip:text) text that changes under animation. */
.slot {
  --w-yarn: 2.56em;
  --w-fiber: 2.72em;
  --w-tech: 5.27em;
  position: relative;
  display: inline-block;
  width: var(--w-yarn);
  height: 1.15em;
  line-height: 1.15;
  overflow: hidden;
  vertical-align: top;
  transition: width 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.slot-word {
  position: absolute;
  left: 0;
  top: 0;
  display: inline-block;
  height: 1.15em;
  line-height: 1.15;
  white-space: nowrap;
  color: var(--accent);
  transform: translateY(-115%);
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}
.slot-word.is-active { transform: translateY(0); }

/* The headline rotation is a deliberate exception to the global
   reduced-motion reset at the top of this file, which collapses every
   transition to 0.01ms with !important. That reset made the words
   teleport (and leave overlapping stale paint) instead of sliding, so
   the real duration is restored for the slot window and its words only.
   Specificity (.slot beats *) is what lets these !important rules win. */
@media (prefers-reduced-motion: reduce) {
  .slot,
  .slot-word {
    transition-duration: 0.55s !important;
  }
}

/* Visually hidden, still read by screen readers */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.hero-lead {
  max-width: 38rem;
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 2.2rem;
  animation: rise-in 0.6s 0.2s ease both;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  animation: rise-in 0.6s 0.3s ease both;
}

@keyframes rise-in {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

.hero-stat-strip {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  border-top: 1px solid var(--line-light);
  background: rgba(0, 0, 0, 0.42);
}

.stat {
  padding: 1.4rem var(--gutter);
  border-right: 1px solid var(--line-light);
}
.stat:last-child { border-right: none; }

.stat-num {
  display: block;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.45rem;
  color: var(--accent);
  letter-spacing: 0.04em;
}

.stat-label {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-block;
  padding: 0.8rem 1.7rem;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.15s, box-shadow 0.2s;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(31, 45, 58, 0.15); }
.btn:active { transform: scale(0.98) translateY(1px); }

.btn-primary {
  background: var(--accent);
  color: var(--white);
}
.btn-primary:hover { background: var(--accent-dark); color: var(--white); }

.btn-outline {
  background: transparent;
  color: inherit;
  border-color: currentColor;
}
.btn-outline:hover { border-color: var(--accent); color: var(--accent); }

/* ============================================================
   SECTIONS & PAGE SCAFFOLD
   ============================================================ */
.page[hidden] { display: none; }

/* Soft fade/slide as each route becomes visible */
.page:not([hidden]) { animation: page-in 0.3s ease both; }

@keyframes page-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.section {
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 4.5rem) var(--gutter);
}

.section-title {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 2.2rem;
}

.title-index {
  font-size: 0.85em;
  color: var(--accent);
  font-weight: 700;
}

.section-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
  align-self: center;
}

.page-header {
  background: var(--ink);
  color: var(--white);
  padding: clamp(2.5rem, 6vw, 4rem) var(--gutter);
  border-bottom: 3px solid var(--accent);
}

.page-header h1 {
  max-width: 1240px;
  margin: 0 auto;
  font-size: clamp(1.8rem, 4.5vw, 3rem);
  font-weight: 800;
  text-transform: uppercase;
  color: var(--white);
}

.page-header-sub {
  max-width: 1240px;
  margin: 0.7rem auto 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 1.02rem;
}

.content-narrow { max-width: 880px; }

.content-narrow h2 {
  font-size: 1.45rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 2.4rem 0 1rem;
  padding-left: 0.9rem;
  border-left: 4px solid var(--accent);
}
.content-narrow h2:first-child { margin-top: 0; }

.content-narrow p { margin-bottom: 1.1rem; }

.feature-list { margin: 0.5rem 0 1.5rem; }
.feature-list li {
  position: relative;
  padding: 0.45rem 0 0.45rem 1.8rem;
  border-bottom: 1px dashed var(--line);
}
.feature-list li::before {
  content: "";
  position: absolute;
  left: 0.2rem;
  top: 0.95rem;
  width: 10px;
  height: 10px;
  background: var(--accent);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* ============================================================
   CAPABILITY CARDS (home)
   ============================================================ */
.capability-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.4rem;
}

.capability-card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 3px solid var(--steel);
  padding: 1.8rem 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  transition: transform 0.2s, box-shadow 0.2s, border-top-color 0.2s;
}

.capability-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
  border-top-color: var(--accent);
}

.cap-num {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  color: var(--accent);
}

.capability-card h3 {
  font-size: 1.12rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.capability-card p { font-size: 0.94rem; color: var(--text-muted); flex: 1; }

.card-link {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--steel);
}
.card-link::after { content: " \2192"; }
.card-link:hover { color: var(--accent-dark); }

/* ============================================================
   ABOUT SNIPPET (home)
   ============================================================ */
.about-snippet {
  border-top: 1px solid var(--line);
}

.about-snippet-inner { max-width: 780px; }
.about-snippet p { margin-bottom: 1.6rem; color: var(--text-muted); }

/* ============================================================
   PEOPLE / HIGHLIGHT CARDS
   ============================================================ */
.people-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.4rem;
  margin: 1rem 0 1.5rem;
}

.person-card,
.highlight-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 4px solid var(--steel);
  padding: 1.5rem;
}

.person-card { transition: transform 0.25s ease, box-shadow 0.3s ease; }
.person-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.22);
}

/* Initial-avatar for team members (steel→ink gradient, faceted corner) */
.person-avatar {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 1rem;
  background: linear-gradient(135deg, var(--steel) 0%, var(--ink) 100%);
  color: var(--white);
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: 0.04em;
  clip-path: polygon(0 0, 100% 0, 100% 78%, 78% 100%, 0 100%);
}

.highlight-card {
  border-left-color: var(--accent);
  margin: 1rem 0 1.5rem;
}

.person-card h3,
.highlight-card h3 {
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 0.3rem;
}

.person-role {
  font-family: var(--font-head);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.8rem;
}

.person-contact { font-weight: 600; margin-top: 0.6rem; }

/* ============================================================
   PRODUCTS (dynamic, layout-safe)
   ============================================================ */
.products-status {
  padding: 1.2rem 1.4rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 4px solid var(--steel);
  margin-bottom: 2rem;
}
.products-status[hidden] { display: none; }
.products-status.is-error { border-left-color: var(--danger); color: var(--danger); }

/* Collapsible category (accordion) — keeps a long catalogue scannable */
.product-category {
  margin-bottom: 1rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 3px solid var(--steel);
  box-shadow: var(--shadow-card);
  transition: border-left-color 0.25s ease;
}
.product-category:last-child { margin-bottom: 0; }
.product-category.is-open { border-left-color: var(--accent); }

.category-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem clamp(1rem, 3vw, 1.6rem);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background 0.2s ease;
}
.category-toggle:hover { background: rgba(74, 124, 140, 0.06); }

.category-head {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  flex-wrap: wrap;
}

.category-title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(1.1rem, 2.4vw, 1.55rem);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ink);
}

.category-count {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--steel);
  padding: 0.2rem 0.65rem;
  white-space: nowrap;
}
.product-category.is-open .category-count { background: var(--accent); }

/* Chevron (pure CSS) — points down when closed, up when open */
.category-chevron {
  flex: none;
  width: 11px;
  height: 11px;
  margin-right: 3px;
  border-right: 2px solid var(--steel);
  border-bottom: 2px solid var(--steel);
  transform: rotate(45deg);
  transition: transform 0.3s ease, border-color 0.25s ease;
}
.product-category.is-open .category-chevron {
  transform: rotate(-135deg);
  border-color: var(--accent);
}

.category-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.category-panel-inner {
  padding: 0.2rem clamp(1rem, 3vw, 1.6rem) 1.6rem;
}

.category-desc {
  color: var(--text-muted);
  max-width: 46rem;
  margin-bottom: 1.4rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}

/* Layout safeguard: auto-fill grid never breaks regardless of count */
.supplier-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.4rem;
}

.supplier-card {
  min-height: 280px;
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 3px solid var(--steel);
  padding: 1.6rem 1.5rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  transition: transform 0.25s ease, box-shadow 0.3s ease, border-top-color 0.25s ease;
  transform-style: preserve-3d;
  will-change: transform;
}

/* Hover lift + glow border + layered depth shadow.
   JS adds a subtle mouse-driven 3D tilt via inline transform on top. */
.supplier-card:hover {
  transform: translateY(-8px);
  box-shadow:
    0 15px 35px -10px rgba(0, 0, 0, 0.20),
    0 4px 14px rgba(74, 124, 140, 0.20);
  border-top-color: var(--accent);
}

/* Supplier card top banner — duotone photo or woven steel mono band.
   Negative margins bleed it to the card edges (over the card padding). */
.supplier-banner {
  display: block;
  position: relative;
  height: 150px;
  margin: -1.6rem -1.5rem 1rem;
  overflow: hidden;
}

.supplier-banner.duotone img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.supplier-banner--mono {
  display: grid;
  place-items: center;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.06) 0 2px, transparent 2px 8px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,0.08) 0 2px, transparent 2px 8px),
    linear-gradient(150deg, var(--steel) 0%, var(--ink) 100%);
  background-size: 10px 10px, 10px 10px, auto;
}

/* Zoom the banner photo when the whole card is hovered */
.supplier-card:hover .supplier-banner.duotone img { transform: scale(1.05); }
.supplier-card:hover .supplier-banner.duotone::after { opacity: 0.16; }

.supplier-logo-fallback {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  background: var(--ink);
  color: var(--white);
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.9rem;
  clip-path: polygon(0 0, 100% 0, 100% 78%, 78% 100%, 0 100%);
}

.supplier-card h3 {
  font-size: 1.08rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.supplier-desc { font-size: 0.94rem; color: var(--text-muted); flex: 1; }

.supplier-meta {
  font-size: 0.86rem;
  border-top: 1px dashed var(--line);
  padding-top: 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.supplier-meta .meta-label {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--steel);
  margin-right: 0.4rem;
}

.supplier-link {
  align-self: flex-start;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--accent-dark);
  margin-top: 0.4rem;
}
.supplier-link::after { content: " \2197"; }

.empty-suppliers {
  padding: 2rem 1.5rem;
  background: var(--white);
  border: 1px dashed var(--line);
  color: var(--text-muted);
  text-align: center;
  font-size: 0.95rem;
}

/* ============================================================
   CONTACT
   ============================================================ */
.contact-layout {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(320px, 1.2fr);
  gap: clamp(2rem, 5vw, 4rem);
}

.contact-details h2,
.contact-form-wrap h2 {
  font-size: 1.35rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 1.2rem;
  padding-left: 0.9rem;
  border-left: 4px solid var(--accent);
}

.contact-details h3 {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 1.6rem 0 0.8rem;
}

.contact-details address { font-style: normal; }
.contact-details p { margin-bottom: 0.9rem; }

/* ---------- Location map panel (styled, links to Google Maps) ---------- */
.map-panel {
  position: relative;
  display: block;
  margin-top: 2rem;
  height: 240px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--steel);
  overflow: hidden;
  text-decoration: none;
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.3s ease, transform 0.25s ease;
}

.map-panel:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 35px -10px rgba(0, 0, 0, 0.22);
}

.map-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Pulsing location marker */
.map-marker {
  position: absolute;
  top: 45%;
  left: 57.5%;
  width: 20px;
  height: 20px;
  background: var(--accent);
  border: 3px solid var(--white);
  border-radius: 50% 50% 50% 0;
  transform: translate(-50%, -100%) rotate(-45deg);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  z-index: 2;
}

.map-marker::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  opacity: 0;
  animation: map-pulse 2.4s ease-out infinite;
}

@keyframes map-pulse {
  0%   { transform: scale(0.4); opacity: 0.7; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* Address card overlay + CTA */
.map-card {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.7rem 0.95rem;
  background: rgba(255, 255, 255, 0.94);
  border-left: 3px solid var(--accent);
  box-shadow: 0 6px 18px rgba(31, 45, 58, 0.18);
}

.map-card-title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--ink);
}

.map-card-sub {
  font-size: 0.82rem;
  color: var(--text-muted);
}

.map-card-cta {
  margin-top: 0.3rem;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--steel);
  transition: color 0.2s ease;
}

.map-panel:hover .map-card-cta { color: var(--accent-dark); }

/* ---------- Form ---------- */
.contact-form-wrap form {
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 3px solid var(--steel);
  padding: clamp(1.4rem, 3vw, 2.2rem);
}

.form-field { margin-bottom: 1.3rem; }

.form-field label {
  display: block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 0.45rem;
}

.req { color: var(--accent); }

.form-field input,
.form-field textarea {
  width: 100%;
  padding: 0.75rem 0.9rem;
  font-family: var(--font-body);
  font-size: 0.97rem;
  color: var(--text);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color 0.2s, background 0.2s, background-size 0.3s ease, box-shadow 0.2s;
  /* Animated focus underline that grows from the left */
  background-image: linear-gradient(var(--steel), var(--steel));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
}

.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--steel);
  background-color: var(--white);
  background-size: 100% 2px;
  box-shadow: 0 0 0 3px rgba(74, 124, 140, 0.18);
}

/* Floating-label feel: the field label lifts in colour on focus */
.form-field:focus-within label { color: var(--steel); }

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

.field-error {
  font-size: 0.82rem;
  color: var(--danger);
  margin-top: 0.35rem;
}

/* Honeypot: visually removed, still in DOM for bots */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-status {
  margin-top: 1rem;
  padding: 0.8rem 1rem;
  font-weight: 600;
  border-left: 4px solid var(--ok);
  background: rgba(30, 132, 69, 0.08);
  color: var(--ok);
}
.form-status.is-error {
  border-left-color: var(--danger);
  background: rgba(192, 57, 43, 0.08);
  color: var(--danger);
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--ink-deep);
  color: rgba(255, 255, 255, 0.78);
  border-top: 3px solid var(--accent);
  margin-top: 3rem;
}

.footer-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(2.5rem, 5vw, 3.5rem) var(--gutter);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
}

.footer-brand { display: flex; gap: 1rem; align-items: flex-start; }
.footer-brand strong { color: var(--white); }
.footer-brand-name {
  display: inline-block;
  font-family: var(--font-brand-script);
  font-weight: 400;
  font-size: 1.55rem;
  line-height: 1.1;
}
.footer-brand-tagline {
  font-family: var(--font-brand-serif);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.68rem;
  color: var(--accent);   /* matches .brand-sub in the header lockup */
}

.footer-heading {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--steel-light);
  margin-bottom: 0.9rem;
}

.footer-col li { margin-bottom: 0.45rem; font-size: 0.92rem; }

.footer-col a {
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
}
.footer-col a:hover { color: var(--accent); }

.footer-base {
  border-top: 1px solid var(--line-light);
  padding: 1.1rem var(--gutter);
  text-align: center;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.5);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .contact-layout { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .nav-toggle { display: flex; }

  /* Search trigger moves to the top bar; the desktop one (in the nav) hides. */
  .header-search-toggle--mobile { display: flex; }
  .nav-search { display: none; }

  .primary-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--ink-deep);
    border-bottom: 3px solid var(--accent);
    display: none;
  }

  .primary-nav.is-open { display: block; }

  .primary-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem 0 1rem;
  }

  .primary-nav a {
    padding: 0.9rem var(--gutter);
    border-bottom: 1px solid var(--line-light);
  }

  .primary-nav .nav-cta { margin: 0.6rem var(--gutter) 0; text-align: center; }

  .supplier-grid { grid-template-columns: 1fr; }
  .stat { border-right: none; border-bottom: 1px solid var(--line-light); }
}

/* ============================================================
   TACTILE / MATERIAL THEME — duotone photography + woven texture
   ============================================================ */

/* Reusable duotone image treatment (steel/ink), warms toward colour on hover */
.duotone {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--ink-deep);
}
.duotone img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.4) contrast(1.03) saturate(1.06);
  transition: filter 0.5s ease, transform 0.6s ease;
}
.duotone::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(150deg, var(--steel) 0%, var(--ink-deep) 95%);
  mix-blend-mode: multiply;
  opacity: 0.32;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
.duotone:hover img { filter: grayscale(0) contrast(1.03) saturate(1.1); transform: scale(1.03); }
.duotone:hover::after { opacity: 0.16; }

/* Full-bleed atmosphere band (home) */
.atmosphere-band {
  position: relative;
  width: 100%;
  height: clamp(260px, 38vw, 440px);
  margin: 0;
  overflow: hidden;
}
.atmosphere-media { position: absolute; inset: 0; z-index: 0; }
/* The four faces sit ~13-26% down the source photo. Anchoring the cover
   crop at 17% lifts the image so the heads land near the top of this short,
   wide band with clearance above them, instead of drifting to the middle. */
.atmosphere-media img { object-position: center 17%; }
.atmosphere-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(20,30,38,0.86) 0%, rgba(20,30,38,0.35) 58%, transparent 100%);
  pointer-events: none;
}
.atmosphere-caption {
  position: relative;
  z-index: 2;
  max-width: 1240px;
  height: 100%;
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.8rem;
}
.atmosphere-kicker {
  font-family: var(--font-head);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
}
.atmosphere-line {
  max-width: 30rem;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(1.4rem, 3.2vw, 2.3rem);
  line-height: 1.15;
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

/* Team band (about) — contained within the article */
.team-band { margin: 2.2rem 0; }
.team-media { aspect-ratio: 16 / 7; }
.team-band figcaption {
  margin-top: 0.7rem;
  font-family: var(--font-head);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ============================================================
   ON THE FLOOR — photo slideshow (About)
   ============================================================ */
.gallery-head { margin-bottom: 1.1rem; }
.gallery-kicker {
  font-family: var(--font-head);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.3rem;
}
.gallery-section h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }

.slideshow { position: relative; }
.slides {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-top: 3px solid var(--steel);
  background: var(--ink-deep);
  box-shadow: var(--shadow-card);
}
.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.9s ease;
}
.slide.is-active { opacity: 1; }
.slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.slide figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 2.6rem 1.5rem 1.1rem;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(0.95rem, 2vw, 1.2rem);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #fff;
  background: linear-gradient(0deg, rgba(20, 30, 38, 0.84) 0%, rgba(20, 30, 38, 0) 100%);
}
.slide-dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.9rem;
}
.slide-dot {
  width: 30px;
  height: 4px;
  padding: 0;
  border: 0;
  cursor: pointer;
  background: var(--line);
  transition: background 0.25s ease;
}
.slide-dot:hover { background: var(--steel); }
.slide-dot.is-active { background: var(--accent); }
.slide-dot:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
/* The crossfade is a gentle opacity change — keep it even under reduced motion */
@media (prefers-reduced-motion: reduce) {
  .slide { transition: opacity 0.9s ease !important; }
}

/* Paul's real portrait + matching faceted tiles for the people grid */
.person-photo,
.person-avatar {
  width: 92px;
  height: 92px;
  margin-bottom: 1rem;
  clip-path: polygon(0 0, 100% 0, 100% 78%, 78% 100%, 0 100%);
}
.person-photo { padding: 0; }
.person-photo img { width: 100%; height: 100%; object-fit: cover; }
.person-photo.duotone::after { opacity: 0.4; }
.person-card:hover .person-photo.duotone::after { opacity: 0.18; }
.person-card:hover .person-photo.duotone img { transform: scale(1.05); }
.person-avatar { font-size: 1.7rem; }

/* Woven fabric texture on the capabilities band (the material nod) */
.capabilities {
  background-image:
    repeating-linear-gradient(45deg, rgba(74,124,140,0.045) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(-45deg, rgba(74,124,140,0.045) 0 1px, transparent 1px 6px);
  background-size: 7px 7px;
}

@media (max-width: 640px) {
  .atmosphere-band { height: 300px; }
  .person-photo, .person-avatar { width: 80px; height: 80px; }
}

/* ============================================================
   DISTINCTIVE UPGRADES — header photo, scroll-thread, marquee
   ============================================================ */

/* About header — duotone machinery photo behind the title */
.page-header--photo { position: relative; overflow: hidden; }
.page-header--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--ph-img, url("../images/machinery-hall.jpg"));
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  filter: grayscale(0.55) contrast(1.02) brightness(0.74);
}

/* Per-page header imagery */
.page-header--products { --ph-img: url("../images/products-hero.webp"); }
.page-header--spare    { --ph-img: url("../images/machinery-detail.jpg"); }
.page-header--contact  { --ph-img: url("../images/team.jpg"); }
.page-header--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(20,30,38,0.92) 0%, rgba(20,30,38,0.6) 55%, rgba(31,45,58,0.55) 100%),
    linear-gradient(150deg, rgba(74,124,140,0.45), transparent 70%);
  pointer-events: none;
}
.page-header--photo h1,
.page-header--photo .page-header-sub { position: relative; z-index: 2; }

/* Scroll-progress thread — a steel filament that draws across the top */
.scroll-thread {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  z-index: 300;
  background: rgba(74, 124, 140, 0.12);
  pointer-events: none;
}
.scroll-thread span {
  position: relative;
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--steel), var(--accent));
  box-shadow: 0 0 8px rgba(74, 124, 140, 0.6);
  transition: width 0.1s linear;
}
.scroll-thread span::after {
  content: "";
  position: absolute;
  top: -2.5px;
  right: -1px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px rgba(230, 126, 34, 0.8);
}

/* Represented-brands marquee */
.brand-marquee {
  background: var(--ink-deep);
  color: var(--white);
  padding: 1.4rem 0;
  overflow: hidden;
  border-bottom: 1px solid var(--line-light);
}
.brand-marquee-label {
  text-align: center;
  font-family: var(--font-head);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--steel-light);
  margin-bottom: 1rem;
}
.brand-marquee-track {
  position: relative;
  cursor: grab;
  touch-action: pan-y;            /* let vertical page-scroll through; we handle horizontal */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.brand-marquee-track.is-grabbing { cursor: grabbing; }
.brand-marquee-list {
  display: flex;
  align-items: center;
  gap: 3.5rem;
  width: max-content;
  will-change: transform;
  /* motion is JS-driven (so it can pause/scrub on drag) — see initBrandMarquee() */
}
.brand-marquee-list li {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(1.3rem, 3vw, 2rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  white-space: nowrap;
  position: relative;
  transition: color 0.3s ease;
}
.brand-marquee-list li::after {
  content: "";
  position: absolute;
  right: -1.9rem;
  top: 50%;
  width: 6px;
  height: 6px;
  background: var(--accent);
  transform: translateY(-50%) rotate(45deg);
  opacity: 0.7;
}
.brand-marquee-list li:hover { color: var(--white); }

/* Home "What We Do" — primary activities as a tidy two-column list */
.activities-summary { margin-top: 1.2rem; }
@media (min-width: 700px) {
  .activities-summary { display: grid; grid-template-columns: 1fr 1fr; column-gap: 2.2rem; }
}

/* Capability-card stagger (moved off inline styles for strict CSP) */
.capability-grid .capability-card:nth-child(1) { animation-delay: 0ms; }
.capability-grid .capability-card:nth-child(2) { animation-delay: 100ms; }
.capability-grid .capability-card:nth-child(3) { animation-delay: 200ms; }
.capability-grid .capability-card:nth-child(4) { animation-delay: 300ms; }