/* =========================================================
   Novatex — styles.css
   Cloned from the MED FAB Orthotics stylesheet (1116 lines). Everything is
   ported byte-for-byte except: the DESIGN.md §1.1 token table, the component
   renames in DESIGN.md §3.1, the deletions in §3.4 (the side-by-side tray and
   overlay, extended range, founder), and the four sanctioned deviations in §4:
     1  navy full-bleed hero        3  aspect-ratio: 3 / 2 card media
     2  navy §02 band               4  gold L-bracket ::before on images
   Two accessibility fixes that are not deviations (DESIGN.md §1.3):
     --line2-strong  for borders that are a control's only boundary
     --muted-on-dark for muted body copy inside a navy band
   Vanilla CSS, no frameworks, no external requests (Google Fonts only).
   ========================================================= */

:root {
  --bg:         #FFFFFF;
  --surface:    #F4F6FA;
  --ink:        #0E1B33;
  --muted:      #5A6B87;   /* light backgrounds only — 3.18:1 on --ink */
  --muted-on-dark: #B4C0D6;/* 9.36:1 on --ink */
  --line:       #E2E7F0;
  --line2:      #C7D0E0;   /* resting chip / input borders only */
  --line2-strong: #7F8EAC; /* borders that are a control's only boundary */
  --accent:     #1B3A72;
  --accent-deep: #12294F;
  --on-accent:  #FFFFFF;
  --nav-bg:     rgba(255, 255, 255, 0.92);
  --tray-bg:    #0E1B33;
  --tray-ink:   #FFFFFF;
  --gold:       #F5B800;   /* decoration only on light — 1.79:1 */
  --gold-on-dark: #F5B800; /* same hex, different intent: text over navy only */
  --success:    #1e7d4f;
  --error:      #b3261e;

  --radius: 14px;
  --disp-weight: 700;

  --font-display: 'Schibsted Grotesk', system-ui, sans-serif;
  --font-body: 'Schibsted Grotesk', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  --content-width: 1180px;
  --shadow-card: 0 10px 30px rgba(16, 20, 24, 0.06);
  --shadow-tray: 0 20px 60px rgba(0, 0, 0, 0.34);
}

@media (min-width: 1440px) { :root { --content-width: 1280px; } }
@media (min-width: 1800px) { :root { --content-width: 1360px; } }

/* -------------------- Reset -------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; }
h1, h2, h3, p, figure, blockquote { margin: 0; }
input, select, textarea, button { font: inherit; color: inherit; }

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

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: #fff;
  padding: 12px 20px;
  z-index: 200;
  border-radius: 0 0 8px 0;
}
.skip-link:focus {
  left: 0;
}

.container {
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: 24px;
}
@media (max-width: 480px) {
  .container { padding-inline: 16px; }
}

/* -------------------- Type -------------------- */
h1 { font-family: var(--font-display); font-weight: var(--disp-weight); }
h2, h3 { font-family: var(--font-display); font-weight: var(--disp-weight); letter-spacing: -0.02em; }

.section-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.section-lede {
  margin-top: 16px;
  max-width: 62ch;
  font-size: 1.03rem;
  line-height: 1.6;
  color: var(--muted);
}

/* -------------------- Buttons -------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 28px;
  border-radius: 100px;
  font-size: 0.94rem;
  font-weight: 500;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 160ms, color 160ms, border-color 160ms;
}
.btn-accent { background: var(--accent); color: var(--on-accent); }
.btn-accent:hover { background: var(--accent-deep); }
/* --line2-strong, not --line2: this border is the control's only boundary. */
.btn-outline { border-color: var(--line2-strong); color: var(--ink); background: transparent; }
.btn-outline:hover { border-color: var(--accent); color: var(--accent); }
.btn-dark { background: var(--ink); color: var(--bg); border-radius: 100px; white-space: nowrap; }
.btn-dark:hover { background: var(--accent-deep); }
.btn-block { width: 100%; border-radius: 2px; }

/* -------------------- Header / nav -------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--nav-bg);
  border-bottom: 1px solid var(--line);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
}
.nav-wrap {
  min-height: 68px;
  padding-block: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.brand {
  display: flex;
  align-items: baseline;
  gap: 9px;
}
.brand-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
/* No .brand-sub: the mono sub-label beside the wordmark is dropped brand-wide.
   Its one surviving use was admin.html's page identifier, which was never a
   brand sub-label — that is .admin-badge, down in the admin block. */
.primary-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.nav-link {
  padding: 8px 12px;
  font-size: 13.5px;
  border-radius: 6px;
}
.nav-link:hover { color: var(--accent); }
.nav-cta {
  margin-left: 8px;
  padding: 10px 18px;
  border-radius: 100px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 500;
}
.nav-cta:hover { background: var(--accent-deep); color: var(--on-accent); }

@media (max-width: 720px) {
  .primary-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    scrollbar-width: none;
    -ms-overflow-style: none;
    max-width: 100%;
  }
  .primary-nav::-webkit-scrollbar { display: none; }
  .primary-nav > a { white-space: nowrap; }
}

/* -------------------- Hero — DEVIATION 1: navy full-bleed -------------------- */
/* The flat 0.80 floor is written as a solid two-stop gradient rather than a bare
   rgba() layer: in the `background` shorthand only the FINAL layer may carry a
   colour, and a background-colour always paints *below* every image layer. The
   composite is identical to DESIGN.md §4.1 — 0.80 at the top rising to 0.944 at
   the base, so the scrim never drops below 0.80 anywhere. */
.hero-fullbleed {
  display: grid;
  align-content: center;
  min-height: clamp(560px, 78vh, 760px);
  background:
    linear-gradient(180deg,
      rgba(14, 27, 51, 0.00) 0%,
      rgba(14, 27, 51, 0.55) 55%,
      rgba(14, 27, 51, 0.72) 100%),
    linear-gradient(rgba(14, 27, 51, 0.80), rgba(14, 27, 51, 0.80)),
    url("../images/hero-knit-macro.jpg?v=1") center / cover no-repeat var(--ink);
}
/* width:100% is load-bearing: .container's `margin-inline: auto` would otherwise
   shrink-wrap this grid item to fit-content instead of letting it fill up to its
   max-width, and the hero would silently stop respecting the width ladder. */
.hero-fullbleed__intro {
  width: 100%;
  max-width: 900px;
  padding-top: 104px;
  padding-bottom: 64px;
  text-align: center;
}
@media (max-width: 640px) {
  .hero-fullbleed__intro { padding-top: 64px; padding-bottom: 44px; }
}
.hero-fullbleed__intro .section-lede { margin-inline: auto; }
.hero-eyebrow {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.hero-fullbleed h1 {
  margin-top: 26px;
  font-size: clamp(2.5rem, 5.6vw, 4.625rem);
  line-height: 1.03;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 34px;
}
/* Stats keep the cloned grid but drop margin-top:-52px and the card chrome —
   the overlap only reads against a light band below (DESIGN.md §2.7). */
.hero-stats {
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px;
}
.stat-card {
  padding-top: 16px;
  border-top: 1px solid rgba(245, 184, 0, 0.35);
}
.stat-value {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: var(--disp-weight);
  letter-spacing: -0.02em;
}
.stat-label {
  margin-top: 6px;
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.5;
}

/* -------------------- Section rhythm -------------------- */
.capability-section, .fabric-section, .applications-section, .industries-section, .faq-section {
  border-bottom: 1px solid var(--line);
  padding: 96px 0;
}
.enquiry-section { padding: 96px 0; background: var(--surface); }
@media (max-width: 640px) {
  .capability-section, .fabric-section, .applications-section, .industries-section, .enquiry-section, .faq-section {
    padding: 64px 0;
  }
}
.capability-section h2, .fabric-section h2, .applications-section h2, .industries-section h2, .enquiry-section h2 {
  margin-top: 16px;
  font-size: clamp(1.875rem, 3.6vw, 2.875rem);
  line-height: 1.06;
  letter-spacing: -0.025em;
  max-width: 28ch;
  text-wrap: balance;
}

/* -------------------- 01 Development & dyeing — step explorer -------------------- */
.step-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px;
  margin-top: 40px;
  background: var(--line);
  border: 1px solid var(--line);
}
.step-btn {
  cursor: pointer;
  text-align: left;
  border: 0;
  padding: 20px 18px;
  background: var(--surface);
  color: var(--ink);
  display: grid;
  gap: 10px;
  transition: background-color 180ms;
}
.step-btn.is-active {
  background: var(--ink);
  color: var(--bg);
}
.step-num {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  opacity: 0.6;
}
.step-label {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: var(--disp-weight);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.step-panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  border: 1px solid var(--line);
  border-top: 0;
  background: var(--surface);
}
/* All five panels ship in the HTML so every step is readable with JS off; the
   author rule above already defeats the UA's [hidden] { display: none }. Once
   main.js sets html.has-js the hidden attribute takes effect and one shows. */
html.has-js .step-panel[hidden] { display: none; }
.step-text {
  padding: 34px;
  display: grid;
  gap: 16px;
  align-content: start;
}
.step-text-eyebrow {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.step-points {
  margin-top: 6px;
  padding-left: 16px;
  display: grid;
  gap: 8px;
  list-style: disc;
}
.step-points li {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted);
}
.step-image {
  position: relative;
  min-height: 260px;
  border-left: 1px solid var(--line);
}
@media (max-width: 640px) {
  .step-image { border-left: 0; border-top: 1px solid var(--line); }
}
.step-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.capability-cta-banner {
  margin-top: 32px;
  padding: 30px 32px;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.capability-cta-text {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.4vw, 1.6875rem);
  font-weight: var(--disp-weight);
  letter-spacing: -0.02em;
  max-width: 30ch;
  text-wrap: balance;
}

/* -------------------- 02 Constructions — DEVIATION 2: navy band -------------------- */
.fabric-section {
  background: var(--tray-bg);
  border-bottom: 0;
}
/* The deck's own device: a short gold rule under the section heading. */
.fabric-section h2::after {
  content: "";
  display: block;
  width: 64px;
  margin-top: 18px;
  border-bottom: 3px solid var(--gold-on-dark);
}
.fabric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 44px;
  align-items: start;
}
.fabric-card {
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  border-radius: var(--radius);
  padding: 32px;
}
.fabric-icon-box {
  width: 72px;
  height: 72px;
  border-radius: 16px;
  background: transparent;
  border: 1.5px solid var(--gold-on-dark);
  display: grid;
  place-items: center;
}
.fabric-card h3 {
  margin-top: 24px;
  font-size: 22px;
  letter-spacing: -0.02em;
}
.fabric-list {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}
.fabric-list li {
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--muted);
}

/* -------------------- 03 Applications -------------------- */
.applications-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}
.applications-count {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.filter-spacer { flex: 1; }
.chip-btn {
  cursor: pointer;
  padding: 10px 18px;
  border-radius: 100px;
  border: 1px solid var(--line2);
  background: transparent;
  color: var(--muted);
  font-size: 13.5px;
  transition: background-color 150ms, color 150ms, border-color 150ms;
}
.chip-btn.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.chip-count {
  opacity: 0.65;
  font-family: var(--font-mono);
  font-size: 11px;
}
/* --line2-strong, not --line2: a dashed border is this control's only boundary. */
.industry-toggle-btn {
  cursor: pointer;
  padding: 10px 18px;
  border-radius: 100px;
  border: 1px dashed var(--line2-strong);
  background: transparent;
  color: var(--muted);
  font-size: 13.5px;
}
.industry-toggle-btn:hover { color: var(--accent); border-color: var(--accent); }
.industry-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}
.industry-chip {
  cursor: pointer;
  padding: 8px 14px;
  border-radius: 2px;
  border: 1px solid var(--line2);
  background: transparent;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.industry-chip.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.industry-chip[disabled] {
  cursor: not-allowed;
  opacity: 0.45;
}

.app-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 20px;
  margin-top: 32px;
}
.app-card {
  border: 1px solid var(--line);
  background: var(--bg);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 180ms;
}
.app-card[hidden] { display: none; }
.app-media {
  position: relative;
  overflow: visible;
}
/* DEVIATION 3 — 3 / 2 card media, replacing the clone's 4 / 5.
   height:auto is load-bearing: the width/height attributes on the <img> are
   presentational hints, so without it `height` is definite, aspect-ratio is
   ignored and every card renders its media at the source's natural pixel
   height — a ragged grid. The attributes stay: they still prevent CLS. */
.app-media img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
/* Flat tile for the four cards with no usable source image — the three rejected
   in IMAGE-MANIFEST.md §7.1 plus `swimwear`, withdrawn over identifiable minors.
   Never an upscaled photograph. Deliberately EMPTY: .app-media precedes
   .app-body, so a label here was announced before the card's own name and read
   as "Swimwear, Swimwear, Circular Knitted". The gold bracket carries the
   intent and the <h3> names the card 20px below. No centring machinery is left
   behind — aspect-ratio still resolves the 291 x 194 box on an empty block, so
   the grid rhythm is identical to the sixteen photo cards. */
.app-media[data-noimage] {
  aspect-ratio: 3 / 2;
  background: var(--surface);
}
/* The clone's corner badge over the card image is deliberately absent. DESIGN.md
   §3.1's rename map pointed both of the clone's badges (body region, materials —
   two independent facts) at Novatex's single renderable one, so the construction
   printed twice on every card; ruled deleted outright, nothing substituted, and
   .fabric-tag below is the survivor. The gold bracket keeps the top-left corner,
   now the media box's only overlay. */
.app-body {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.app-name {
  font-size: 18.5px;
  line-height: 1.22;
  letter-spacing: -0.012em;
}
.fabric-tag {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.6;
}
.card-actions {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding-top: 6px;
  margin-top: auto;
}
.details-accordion { flex: 1; min-width: 0; }
.details-summary {
  cursor: pointer;
  list-style: none;
  padding: 11px 14px;
  border-radius: 2px;
  border: 1px solid var(--line2);
  background: transparent;
  font-size: 13.5px;
}
.details-summary::-webkit-details-marker { display: none; }
.details-accordion[open] .details-summary {
  border-color: var(--accent);
  color: var(--accent);
}
.details-panel {
  border-top: 1px solid var(--line);
  margin-top: 12px;
  padding-top: 16px;
  display: grid;
  gap: 18px;
}
.detail-block-title {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.detail-block ul {
  margin-top: 10px;
  padding-left: 16px;
  display: grid;
  gap: 7px;
  list-style: disc;
}
.detail-block li {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted);
  text-wrap: pretty;
}
.btn-enquire {
  cursor: pointer;
  padding: 11px 16px;
  border-radius: 2px;
  border: 0;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
  align-self: flex-start;
}
.btn-enquire:hover { background: var(--accent-deep); color: var(--on-accent); }

.empty-state {
  margin-top: 32px;
  padding: 48px 24px;
  text-align: center;
  border: 1px dashed var(--line2-strong);
  border-radius: var(--radius);
}
.empty-state[hidden] { display: none; }
.empty-state p { font-size: 16.5px; }
.empty-state .btn { margin-top: 16px; }

/* -------------------- 04 Industries we serve -------------------- */
.industries-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 56px;
  align-items: center;
}
.sector-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
}
.chip-static {
  padding: 9px 15px;
  border: 1px solid var(--line2);
  border-radius: 100px;
  font-size: 13.5px;
  color: var(--muted);
}
.positioning-quote {
  display: block;
  margin-top: 28px;
  padding: 22px 26px;
  border-left: 3px solid var(--accent);
  background: var(--surface);
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 2.1vw, 1.4375rem);
  line-height: 1.36;
  letter-spacing: -0.015em;
  text-wrap: pretty;
  color: var(--ink);
}
/* industries-knit-navy.jpg is the deck's own Circular Knitted banner macro. It
   sits behind the sector grid rather than being left orphaned in public/
   (CLAUDE.md standing rule 7, DESIGN.md §4.5). */
.industries-media {
  padding: 20px;
  border-radius: var(--radius);
  background: url("../images/industries-knit-navy.jpg?v=1") center / cover no-repeat;
}
/* max-width caps the cell at ~180px at every viewport: the marks are 360x360
   2x assets sized against that cell (sector-automotive is 348x348 — its 500x348
   source has no 360 square in it). A wider cell puts all nine back under 2x. */
/* minmax(0, 1fr), not 1fr: a bare 1fr is minmax(auto, 1fr), so at 720w the
   longest captions ("Automotive Accessories", "Lifestyle Chairs", "Furnishing &
   Home Decor") pushed their tracks past an equal share and the three columns
   computed 96.23 / 82.38 / 89.31px — a visibly ragged 3x3. */
.sector-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
  max-width: 546px;
  margin-inline: auto;
  background: var(--line);
  border: 1px solid var(--line);
}
@media (max-width: 480px) {
  .sector-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.sector-cell { background: var(--bg); }
/* One uniform filter, required: the deck duotoned some marks (blue, ochre,
   yellow) and left others natural, so as a nine-up they read as a mismatched
   set; and it settles sector-automotive, the one snapshot among eight studio
   shots. No hover state removes it — that would re-expose both problems. */
.sector-cell img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  filter: grayscale(1);
}
.sector-cell figcaption {
  padding: 8px 10px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* -------------------- 05 Trade enquiry -------------------- */
.enquiry-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 56px;
  align-items: start;
}
.enquiry-intro .section-lede { max-width: 44ch; }
.contact-rows {
  margin-top: 28px;
  display: grid;
  gap: 2px;
  background: var(--line);
  border: 1px solid var(--line);
}
.contact-row {
  background: var(--bg);
  padding: 18px 20px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}
a.contact-row:hover { background: var(--surface); }
.contact-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.contact-value { font-size: 16px; }

.form-card {
  border: 1px solid var(--line);
  background: var(--bg);
  padding: 30px;
  border-radius: var(--radius);
}
.form-row-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
}
.field { display: grid; gap: 7px; margin-top: 16px; }
.form-row-2 .field { margin-top: 0; }
.field label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.field .req { color: var(--error); }
.field input,
.field select,
.field textarea {
  border: 1px solid var(--line2);
  background: transparent;
  border-radius: 2px;
  padding: 12px 14px;
  font-size: 15px;
  outline: none;
  width: 100%;
  min-width: 0;
}
.field textarea { min-height: 110px; resize: vertical; }
/* The `outline: none` above is (0,1,1) and silently outranks the global
   :focus-visible at (0,1,0), which left all six controls on the site's only
   conversion path with no focus indicator — WCAG 2.4.7 AA. Inherited verbatim
   from the clone. This restores the same ring the other 70 focusables get. */
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.field.has-error input,
.field.has-error select,
.field.has-error textarea {
  border-color: var(--error);
}
.field-error {
  color: var(--error);
  font-size: 0.85rem;
  display: none;
}
.field.has-error .field-error { display: block; }

/* Honeypot: visually hidden but still fillable — never display:none, a bot has
   to be able to fill it. Field name stays `website`. */
.hp-field {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

#enquiryForm .btn-block { margin-top: 20px; }
.form-hint {
  margin-top: 12px;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.5;
}

.form-banner {
  border-radius: 2px;
  padding: 14px 16px;
  margin-bottom: 20px;
  font-weight: 600;
  font-size: 0.95rem;
  display: none;
}
.form-banner.is-visible { display: block; }
.form-banner--success {
  background: #e7f6ee;
  color: var(--success);
  border: 1px solid #bfe6d2;
}
.form-banner--error {
  background: #fbeceb;
  color: var(--error);
  border: 1px solid #f2c6c2;
}

/* -------------------- Footer -------------------- */
.site-footer {
  border-top: 1px solid var(--line);
  background: var(--bg);
  padding: 56px 0 40px;
}
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 40px;
}
.footer-wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.footer-tagline {
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.footer-col-title {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.footer-col {
  display: grid;
  gap: 9px;
}
.footer-col a,
.footer-col span {
  font-size: 14.5px;
  margin-top: 5px;
}
.footer-col a:hover { color: var(--accent); }
.footer-bottom {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--muted);
}

/* -------------------- DEVIATION 4: gold L-bracket -------------------- */
/* The deck's signature device — a gold rule along the top and left edges of a
   photo. position:absolute with no layout impact, so no §2 value is disturbed.
   Legal on white because it is decoration: not text, not a control boundary. */
.gold-bracket { position: relative; }
.gold-bracket::before {
  content: "";
  position: absolute;
  top: -12px;
  left: -12px;
  width: 68px;
  height: 68px;
  border-top: 3px solid var(--gold);
  border-left: 3px solid var(--gold);
  pointer-events: none;
  z-index: 1;
}
/* .app-card keeps overflow:hidden for its radius, which would clip a bracket
   offset outside the frame — on a card the bracket sits inside it instead. */
.app-media.gold-bracket::before {
  top: 12px;
  left: 12px;
}
@media (max-width: 480px) {
  .gold-bracket::before { top: -8px; left: -8px; width: 44px; height: 44px; }
  .app-media.gold-bracket::before { top: 8px; left: 8px; }
}

/* -------------------- Navy-band scoping -------------------- */
/* One place for the dark-band overrides instead of duplicating them per
   selector. --muted is 3.18:1 on --ink and fails AA, so it is re-pointed;
   --accent is NOT re-pointed, because .btn-accent must keep its navy fill
   (11.08:1 with white) — gold fill under white text would be 1.79:1. */
.on-dark {
  color: var(--tray-ink);
  --muted: var(--muted-on-dark);
}
/* The clone's `align-items: start` (kept above) was invisible on its light
   section, but deviation 2 turns .fabric-card into a lit rgba(255,255,255,0.06)
   rectangle on navy, so the Air Mesh card's 6-item list left a 33px step against
   its 7-item neighbours. Stretch only where the deviation created the problem. */
.on-dark .fabric-grid { align-items: stretch; }
.on-dark .section-eyebrow,
.on-dark .hero-eyebrow { color: var(--gold-on-dark); }
.on-dark :focus-visible { outline-color: var(--gold-on-dark); }
.on-dark .btn-outline {
  border-color: var(--gold-on-dark);
  color: var(--on-accent);
}
.on-dark .btn-outline:hover {
  border-color: var(--gold-on-dark);
  color: var(--gold-on-dark);
}

/* -------------------- Progressive enhancement -------------------- */
/* The industry filter toggle does nothing without JS, so it stays out of the
   visible flow until main.js marks <html class="has-js">. The industry row is
   shown/hidden by JS throughout its life, so it uses the `hidden` attribute. */
.js-only { display: none; }
html.has-js .industry-toggle-btn.js-only { display: inline-flex; }
.industry-row[hidden] { display: none; }

/* -------------------- Admin (/admin) -------------------- */
/* The sister ships admin.html referencing .admin-wrap, .admin-toolbar,
   .admin-table and .table-scroll with no matching CSS anywhere, so its admin
   page renders unstyled. These are those rules. */
/* The "Enquiries admin" page identifier in the admin header. It reuses the
   dropped .brand-sub's treatment but is a different thing — a page label, not a
   brand sub-label — so it gets its own name rather than keeping that class
   alive for one non-brand use. */
.admin-badge {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.admin-wrap {
  max-width: var(--content-width);
  margin-inline: auto;
  padding: 48px 24px 72px;
}
.admin-wrap h1 {
  font-size: 1.8rem;
  letter-spacing: -0.02em;
}
.admin-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px;
  margin-top: 28px;
  padding: 20px;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--radius);
}
.admin-toolbar .field { margin-top: 0; min-width: 240px; }
.admin-status {
  margin-top: 18px;
  font-size: 14px;
  color: var(--muted);
}
.table-scroll {
  margin-top: 24px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.admin-table[hidden] { display: none; }
.admin-table caption {
  caption-side: top;
  padding: 14px 16px;
  text-align: left;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}
.admin-table th,
.admin-table td {
  padding: 12px 16px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}
.admin-table th {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  background: var(--surface);
}
.admin-table td { color: var(--ink); }
.admin-table tr:last-child td { border-bottom: 0; }
.admin-del-btn {
  cursor: pointer;
  padding: 7px 12px;
  border-radius: 2px;
  border: 1px solid var(--line2-strong);
  background: transparent;
  color: var(--error);
  font-size: 12.5px;
  white-space: nowrap;
}
.admin-del-btn:hover { border-color: var(--error); }

/* -------------------- Motion -------------------- */
@media (prefers-reduced-motion: no-preference) {
  .step-panel { animation: mfIn 220ms ease both; }
}
@keyframes mfIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* -------------------- 06 FAQ (deviation 5) -------------------- */
.faq-section { background: var(--bg); border-top: 1px solid var(--line); }
.faq-list { max-width: 780px; margin-top: 32px; display: grid; gap: 12px; }
.faq-item .details-summary { font-size: 15.5px; padding: 16px 18px; }
.faq-item .details-panel p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--muted); }
.faq-item .details-panel { padding: 0 18px 16px; border-top: 0; margin-top: 0; }