/* ===========================================================
   Metcut Toolings — design system
   =========================================================== */

:root {
  /* All-dark palette — no white/near-white sections anywhere.
     Three dark tiers create rhythm instead of a dark/white split:
     --ink (darkest, hero/feature bands) -> --paper (content sections)
     -> --paper-2 (cards/forms, one notch lighter still). */
  --ink: #0a0c0f;
  --ink-2: #14171c;
  --ink-3: #1c2027;
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.16);
  --paper: #12151a;
  --paper-2: #1a1e25;
  --paper-line: rgba(255, 255, 255, 0.10);
  --text-hi: #f5f6f8;
  --text-lo: #a4acb6;
  --text-ink: #f2f4f7;
  --text-ink-lo: #9aa3ad;
  --blue: #2f6bff;
  --blue-hi: #5487ff;
  --blue-dim: #17264d;
  --glow: 0 24px 54px -20px rgba(47, 107, 255, 0.35);
  --glow-sm: 0 16px 34px -16px rgba(47, 107, 255, 0.3);

  /* blueprint / technical-drawing layer */
  --bp-line: rgba(47, 107, 255, 0.22);
  --bp-line-hi: rgba(84, 135, 255, 0.85);
  --bp-grid: rgba(120, 160, 255, 0.055);
  --gold: #d9a441;                 /* references the TiN-coated flutes */
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --container: 1240px;
  --radius: 14px;
  --radius-sm: 9px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.5s;

  --font-head: "Sora", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;

  /* Measured from the actual rendered .preview-banner (its height varies with
     viewport width, since the text wraps) by the inline script right after
     the banner markup, and kept current on resize by main.js. Everything
     that has to clear the fixed header — the header's own position, and
     every hero's top padding — adds this on top of its existing header-only
     clearance, so the preview banner can be added without hand-tuning every
     hero variant's padding by trial and error. */
  --banner-h: 0px;
}

* { box-sizing: border-box; }
/* smooth scrolling for anchor nav + scrollIntoView; skipped when the user
   has asked for reduced motion (matches every other motion effect on the site) */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--text-ink);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 {
  font-family: var(--font-head);
  margin: 0;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
p { margin: 0; }
button { font: inherit; cursor: pointer; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 28px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue-hi);
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--blue);
  border-radius: 2px;
}
/* every section is dark now — eyebrow stays the bright blue everywhere */

h1 { font-size: clamp(2.4rem, 4.2vw, 3.8rem); font-weight: 700; }
h2 { font-size: clamp(1.9rem, 3vw, 2.6rem); font-weight: 700; }
h3 { font-size: 1.3rem; font-weight: 650; }

.section-head {
  max-width: 640px;
  margin-bottom: 44px;
}
.section-head p {
  margin-top: 14px;
  color: var(--text-ink-lo);
  font-size: 1.05rem;
}
[data-theme="dark"] .section-head p { color: var(--text-lo); }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 999px;
  font-weight: 650;
  font-size: 0.95rem;
  border: 1px solid transparent;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  white-space: nowrap;
}
.btn svg { width: 16px; height: 16px; transition: transform 0.3s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn:hover { transform: translateY(-2px); }
.btn-primary {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 8px 24px -8px rgba(47, 107, 255, 0.55);
}
.btn-primary:hover { background: var(--blue-hi); box-shadow: 0 12px 28px -8px rgba(47, 107, 255, 0.65); }
.btn-ghost-dark {
  border-color: var(--line-strong);
  color: var(--text-hi);
}
.btn-ghost-dark:hover { border-color: var(--blue-hi); background: rgba(47, 107, 255, 0.1); }
.btn-ghost-light {
  border-color: var(--paper-line);
  color: var(--text-ink);
}
.btn-ghost-light:hover { border-color: var(--blue); background: rgba(47, 107, 255, 0.06); }

/* ===========================================================
   Preview banner
   Deliberately NOT position:fixed — sits in normal flow above the fixed
   .site-header, so it's the first thing anyone sees (page load, screenshot,
   search-engine crawl) without requiring every hero's top-padding and the
   sticky-header math site-wide to account for a second fixed bar.
   =========================================================== */
.preview-banner {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 110; /* above .site-header (100) so it always stays the top-most
                   bar; below .mobile-nav (150) so the full-screen menu still
                   covers it when open */
  background: #1a1408;
  border-bottom: 1px solid rgba(217, 164, 65, 0.35);
  color: #f0d9a8;
  font-size: 0.82rem;
}
.preview-banner .container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  flex-wrap: wrap;
  text-align: center;
}
.preview-banner b {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--gold);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.preview-banner b::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 3px rgba(217, 164, 65, 0.25);
  flex: none;
}
.preview-banner span { color: #d8c298; }
.preview-banner a {
  color: var(--gold);
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}
.preview-banner a:hover { color: #f0d9a8; }

@media (max-width: 620px) {
  .preview-banner { font-size: 0.74rem; }
  .preview-banner .container { padding-top: 8px; padding-bottom: 8px; gap: 6px; }
}

/* ===========================================================
   Header / nav
   =========================================================== */
.site-header {
  position: fixed;
  top: var(--banner-h); left: 0; right: 0;
  z-index: 100;
  padding: 22px 0;
  transition: padding var(--dur) var(--ease), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease), top var(--dur) var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.condensed {
  padding: 12px 0;
  background: rgba(11, 13, 16, 0.86);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--line);
  box-shadow: 0 10px 30px -18px rgba(0,0,0,0.6);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand img { height: 54px; width: auto; transition: height var(--dur) var(--ease); }
.site-header.condensed .brand img { height: 42px; }

.nav-primary {
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav-primary > li { position: relative; }
.nav-primary > li > a {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 10px 16px;
  font-size: 0.92rem;
  font-weight: 560;
  color: rgba(245, 246, 248, 0.82);
  border-radius: 999px;
  transition: color 0.25s var(--ease), background 0.25s var(--ease);
}
.nav-primary > li > a:hover,
.nav-primary > li.active > a { color: #fff; background: rgba(255, 255, 255, 0.08); }
.nav-primary > li > a svg { width: 12px; height: 12px; transition: transform 0.25s var(--ease); }
.nav-primary > li:hover > a svg { transform: rotate(180deg); }

.dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 320px;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), visibility 0.22s;
  box-shadow: 0 24px 48px -16px rgba(0,0,0,0.55);
}
.nav-primary > li:hover .dropdown {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.dropdown a {
  display: block;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  color: var(--text-lo);
  transition: background 0.2s, color 0.2s;
}
.dropdown a:hover { background: rgba(255,255,255,0.06); color: #fff; }

.header-cta { display: flex; align-items: center; gap: 14px; }
.header-cta .btn { padding: 11px 22px; font-size: 0.88rem; }

.menu-toggle {
  display: none;
  background: none; border: 1px solid var(--line-strong); border-radius: 10px;
  width: 42px; height: 42px; align-items: center; justify-content: center;
  color: #fff;
}
.menu-toggle svg { width: 18px; height: 18px; }

/* ===========================================================
   Hero
   =========================================================== */
.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: flex-end;
  color: var(--text-hi);
  overflow: hidden;
  background: var(--ink);
}
.hero-media { position: absolute; inset: 0; }
.hero-media img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 30%;
  transform: scale(1.06);
  animation: heroZoom 16s var(--ease) forwards;
}
@keyframes heroZoom { to { transform: scale(1); } }
.hero-media::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(8,9,11,0.55) 0%, rgba(8,9,11,0.35) 32%, rgba(8,9,11,0.94) 92%),
    linear-gradient(90deg, rgba(8,9,11,0.85) 0%, rgba(8,9,11,0.15) 55%);
}
.hero-content {
  position: relative;
  z-index: 2;
  padding: calc(140px + var(--banner-h)) 0 96px;
}
.hero-kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--blue-hi); margin-bottom: 22px;
}
.hero-kicker::before { content:""; width: 34px; height: 2px; background: var(--blue-hi); }
.hero h1 { max-width: 780px; margin-bottom: 22px; }
.hero h1 em { font-style: normal; color: var(--blue-hi); }
.hero p.lead { max-width: 560px; font-size: 1.15rem; color: var(--text-lo); margin-bottom: 36px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 64px; }

.hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  padding-top: 32px;
}
.hero-stats div { padding-right: 20px; border-left: 1px solid var(--line); padding-left: 20px; }
.hero-stats div:first-child { border-left: none; padding-left: 0; }
.hero-stats strong { display: block; font-family: var(--font-head); font-size: clamp(1.6rem, 2.4vw, 2.1rem); color: #fff; }
.hero-stats span { font-size: 0.84rem; color: var(--text-lo); }

/* ---------- client logo marquee ---------- */
.logo-marquee {
  background: var(--ink);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 34px 0;
  overflow: hidden;
}
.logo-marquee .lm-label {
  text-align: center;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-lo);
  margin-bottom: 26px;
}
.lm-track-wrap {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.lm-track {
  display: flex;
  align-items: center;
  gap: 72px;
  width: max-content;
  animation: lmScroll 28s linear infinite;
}
.logo-marquee:hover .lm-track { animation-play-state: paused; }
@keyframes lmScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.lm-item {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: 0.01em;
  color: rgba(245, 246, 248, 0.4);
  white-space: nowrap;
  transition: color 0.3s var(--ease);
}
.lm-item:hover { color: rgba(245, 246, 248, 0.85); }

/* page hero (secondary pages) */
.page-hero {
  position: relative;
  min-height: 56vh;
  display: flex; align-items: flex-end;
  color: var(--text-hi);
  overflow: hidden;
  background: var(--ink);
}
.page-hero-content { position: relative; z-index: 2; padding: calc(150px + var(--banner-h)) 0 64px; }
.page-hero .breadcrumb { display: flex; gap: 8px; align-items: center; font-size: 0.85rem; color: var(--text-lo); margin-bottom: 18px; }
.page-hero .breadcrumb a:hover { color: #fff; }
.page-hero h1 { max-width: 760px; }
.page-hero p.lead { margin-top: 16px; max-width: 560px; color: var(--text-lo); font-size: 1.05rem; }

/* ===========================================================
   Sections / theming
   =========================================================== */
section { position: relative; }
section[data-theme="dark"] { background: var(--ink); color: var(--text-hi); }
section[data-theme="light"] { background: var(--paper); color: var(--text-ink); }
section[data-theme="paper2"] { background: var(--paper-2); color: var(--text-ink); }
.pad { padding: 100px 0; }
.pad-sm { padding: 64px 0; }

/* reveal-on-scroll */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal-stagger > * { opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal-stagger.in > * { opacity: 1; transform: translateY(0); }
.reveal-stagger.in > *:nth-child(1) { transition-delay: 0.02s; }
.reveal-stagger.in > *:nth-child(2) { transition-delay: 0.08s; }
.reveal-stagger.in > *:nth-child(3) { transition-delay: 0.14s; }
.reveal-stagger.in > *:nth-child(4) { transition-delay: 0.2s; }
.reveal-stagger.in > *:nth-child(5) { transition-delay: 0.26s; }
.reveal-stagger.in > *:nth-child(6) { transition-delay: 0.32s; }
.reveal-stagger.in > *:nth-child(7) { transition-delay: 0.38s; }
.reveal-stagger.in > *:nth-child(8) { transition-delay: 0.44s; }
.reveal-stagger.in > *:nth-child(9) { transition-delay: 0.5s; }
.reveal-stagger.in > *:nth-child(10) { transition-delay: 0.56s; }
.reveal-stagger.in > *:nth-child(11) { transition-delay: 0.62s; }
.reveal-stagger.in > *:nth-child(12) { transition-delay: 0.68s; }

/* ---------- feature grid (home) ---------- */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.feature-card {
  background: var(--ink-2);
  padding: 34px 28px;
  transition: background 0.3s var(--ease);
}
.feature-card:hover { background: var(--ink-3); }
.feature-card .icon {
  width: 46px; height: 46px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--blue-dim); color: var(--blue-hi);
  margin-bottom: 20px;
}
.feature-card .icon svg { width: 22px; height: 22px; }
.feature-card h3 { font-size: 1.05rem; margin-bottom: 10px; color: #fff; }
.feature-card p { font-size: 0.92rem; color: var(--text-lo); }

/* ---------- about / split ---------- */
.split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 72px;
  align-items: center;
}
.split.reverse { grid-template-columns: 0.95fr 1.05fr; }
.split.reverse .split-media { order: 2; }
.split-copy p { color: var(--text-ink-lo); font-size: 1.02rem; margin-bottom: 16px; }
[data-theme="dark"] .split-copy p { color: var(--text-lo); }
.split-media { position: relative; }
.split-media img { border-radius: var(--radius); width: 100%; aspect-ratio: 4/3.1; object-fit: cover; }
.stat-chip {
  position: absolute;
  bottom: -22px; left: -22px;
  background: var(--paper-2);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-sm);
  padding: 18px 22px;
  box-shadow: var(--glow-sm);
}
[data-theme="dark"] .stat-chip { background: var(--ink-2); border-color: var(--line); }
.stat-chip strong { display: block; font-family: var(--font-head); font-size: 1.7rem; color: var(--blue); }
.stat-chip span { font-size: 0.8rem; color: var(--text-ink-lo); }

.mini-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 28px; }
.mini-grid .mg-item { display: flex; gap: 12px; align-items: flex-start; }
.mini-grid .mg-item .dot {
  flex: none; width: 34px; height: 34px; border-radius: 10px;
  background: var(--blue-dim); color: var(--blue-hi);
  display: flex; align-items: center; justify-content: center;
}
.mini-grid .mg-item .dot svg { width: 16px; height: 16px; }
.mini-grid h4 { font-size: 0.95rem; margin-bottom: 4px; }
.mini-grid p { font-size: 0.86rem; color: var(--text-ink-lo); }
[data-theme="dark"] .mini-grid p { color: var(--text-lo); }

/* ---------- product category cards (products landing) ---------- */
.cat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.cat-card {
  position: relative;
  background: var(--paper-2);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius);
  padding: 34px;
  overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.cat-card:hover { transform: translateY(-6px); box-shadow: var(--glow); border-color: rgba(47,107,255,0.4); }
.cat-card .num { font-family: var(--font-head); font-size: 0.8rem; color: var(--blue); font-weight: 700; letter-spacing: .06em; }
.cat-card h3 { margin: 14px 0 10px; font-size: 1.35rem; }
.cat-card p { color: var(--text-ink-lo); font-size: 0.94rem; margin-bottom: 20px; }
.cat-card .tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }
.cat-card .tags span {
  font-size: 0.76rem; font-weight: 650; padding: 6px 12px; border-radius: 999px;
  background: var(--blue-dim); color: var(--blue);
}
.cat-card .go {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 650; font-size: 0.9rem; color: var(--text-ink);
}
.cat-card .go svg { width: 15px; height: 15px; transition: transform 0.3s var(--ease); }
.cat-card:hover .go svg { transform: translateX(4px); }
.cat-card.full { grid-column: 1 / -1; display: grid; grid-template-columns: 1.3fr 1fr; gap: 32px; align-items: center; }
.cat-card .thumb-row { display: flex; gap: 10px; }
.cat-card .thumb-row img { width: 84px; height: 116px; object-fit: contain; background: #000; border-radius: 10px; padding: 8px; }

/* ---------- product subtype grid (category pages) ---------- */
.tool-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.tool-card {
  background: var(--paper-2);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  cursor: zoom-in;
}
.tool-card:hover { transform: translateY(-5px); box-shadow: var(--glow); }
.tool-card figure { margin: 0; background: #000; aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.tool-card img { height: 88%; width: auto; object-fit: contain; transition: transform 0.5s var(--ease); }
.tool-card:hover img { transform: scale(1.07); }
.tool-card figcaption { padding: 16px 18px; font-weight: 650; font-size: 0.95rem; display: flex; justify-content: space-between; align-items: center; }
.tool-card figcaption svg { width: 15px; height: 15px; color: var(--blue); }

/* lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8,9,11,0.9);
  opacity: 0; visibility: hidden; transition: opacity 0.3s var(--ease), visibility 0.3s;
  padding: 40px;
}
.lightbox.open { opacity: 1; visibility: visible; }
.lightbox img { max-width: min(560px, 90vw); max-height: 80vh; object-fit: contain; border-radius: 12px; background: #000; }
.lightbox .lb-caption { position: absolute; bottom: 36px; left: 0; right: 0; text-align: center; color: #fff; font-weight: 600; }
.lightbox .lb-close {
  position: absolute; top: 28px; right: 32px;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line-strong); background: rgba(255,255,255,0.06); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.lightbox .lb-close svg { width: 18px; height: 18px; }

/* ---------- values / mission list ---------- */
.value-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.value-list li {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px;
  background: var(--ink-2);
}
.value-list .k { font-family: var(--font-head); font-size: 1.6rem; color: var(--blue-hi); margin-bottom: 14px; display: block; }
.value-list h4 { font-size: 1.02rem; color: #fff; margin-bottom: 8px; }
.value-list p { font-size: 0.88rem; color: var(--text-lo); }

/* ---------- CTA band ---------- */
.cta-band {
  background: linear-gradient(120deg, #12213f, #0b0d10 60%);
  border-radius: 24px;
  padding: 64px;
  display: flex; align-items: center; justify-content: space-between; gap: 40px;
  flex-wrap: wrap;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(560px 260px at 85% 20%, rgba(47,107,255,0.35), transparent 70%);
}
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { max-width: 480px; margin-bottom: 10px; }
.cta-band p { color: var(--text-lo); max-width: 420px; }
.cta-band .actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- contact / form ---------- */
.contact-wrap { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 60px; }
.contact-info h2 { margin-bottom: 16px; }
.contact-info > p { color: var(--text-ink-lo); margin-bottom: 32px; }
.info-row { display: flex; gap: 16px; padding: 18px 0; border-top: 1px solid var(--paper-line); }
.info-row:last-child { border-bottom: 1px solid var(--paper-line); }
.info-row .ic { flex: none; width: 40px; height: 40px; border-radius: 10px; background: var(--blue-dim); color: var(--blue); display: flex; align-items: center; justify-content: center; }
.info-row .ic svg { width: 18px; height: 18px; }
.info-row h4 { font-size: 0.92rem; margin-bottom: 4px; }
.info-row p, .info-row a { font-size: 0.9rem; color: var(--text-ink-lo); }
.info-row a:hover { color: var(--blue); }

.card-form {
  background: var(--paper-2);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius);
  padding: 40px;
  box-shadow: var(--glow);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { margin-bottom: 18px; }
.field label { display: block; font-size: 0.82rem; font-weight: 650; margin-bottom: 8px; color: var(--text-ink-lo); }
.field input, .field textarea, .field select {
  width: 100%;
  font: inherit;
  padding: 13px 15px;
  border-radius: 10px;
  border: 1px solid var(--paper-line);
  background: var(--paper);
  color: var(--text-ink);
  transition: border-color 0.25s, box-shadow 0.25s;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(47,107,255,0.14);
}
.field textarea { min-height: 110px; resize: vertical; }
.check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; }
.check-item { display: flex; align-items: center; gap: 10px; font-size: 0.88rem; }
.check-item input { width: 16px; height: 16px; accent-color: var(--blue); }
.form-note { font-size: 0.8rem; color: var(--text-ink-lo); margin-top: 14px; }
.form-status { margin-top: 16px; font-size: 0.88rem; font-weight: 600; display: none; padding: 12px 16px; border-radius: 10px; }
.form-status.show { display: block; }
.form-status.pending { background: rgba(47,107,255,0.1); color: var(--blue); }

/* ---------- footer ---------- */
.site-footer { background: var(--ink); color: var(--text-lo); padding: 76px 0 28px; }
.footer-top { display: grid; grid-template-columns: 1.3fr 0.8fr 0.8fr 1fr; gap: 40px; padding-bottom: 52px; border-bottom: 1px solid var(--line); }
.footer-brand img { height: 32px; margin-bottom: 18px; }
.footer-brand p { font-size: 0.9rem; max-width: 300px; }
.footer-social { display: flex; gap: 10px; margin-top: 22px; }
.footer-social a {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line-strong);
  display: flex; align-items: center; justify-content: center; transition: background 0.25s, border-color 0.25s;
}
.footer-social a:hover { background: var(--blue); border-color: var(--blue); }
.footer-social svg { width: 16px; height: 16px; }
.footer-col h4 { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.08em; color: #fff; margin-bottom: 18px; }
.footer-col li { margin-bottom: 12px; font-size: 0.9rem; }
.footer-col a:hover { color: #fff; }
.footer-col address { font-style: normal; font-size: 0.9rem; line-height: 1.7; }
.footer-bottom { padding-top: 26px; display: flex; justify-content: space-between; align-items: center; font-size: 0.82rem; flex-wrap: wrap; gap: 10px; }

/* ---------- back-to-top ---------- */
.to-top {
  position: fixed; right: 26px; bottom: 26px; z-index: 90;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--ink-2); border: 1px solid var(--line-strong); color: #fff;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s, background 0.3s;
}
.to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--blue); }
.to-top svg { width: 18px; height: 18px; }

/* ---------- generic supplier form page ---------- */
.page-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 60px; align-items: start; }
.supplier-perks li { display: flex; gap: 14px; padding: 16px 0; border-top: 1px solid var(--paper-line); }
.supplier-perks li:last-child { border-bottom: 1px solid var(--paper-line); }
.supplier-perks .dot { flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--blue-dim); color: var(--blue); display: flex; align-items: center; justify-content: center; }
.supplier-perks .dot svg { width: 17px; height: 17px; }
.supplier-perks h4 { font-size: 0.96rem; margin-bottom: 4px; }
.supplier-perks p { font-size: 0.86rem; color: var(--text-ink-lo); }

/* ---------- placeholder marker ---------- */
/* Used ONLY for content that needs real facts supplied later (names, dates, figures).
   Deliberately loud so it can never be mistaken for shipped copy. */
.ph {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px dashed rgba(47, 107, 255, 0.55);
  background: rgba(47, 107, 255, 0.07);
  color: var(--blue);
  border-radius: 7px;
  padding: 1px 9px;
  font-size: 0.86em;
  font-style: italic;
}
.ph::before { content: "◆"; font-size: 0.7em; }

/* ---------- industries grid ---------- */
.industry-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.industry-card {
  background: var(--paper-2);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius);
  padding: 30px;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.industry-card:hover { transform: translateY(-5px); box-shadow: var(--glow); }
.industry-card .icon { width: 46px; height: 46px; border-radius: 12px; background: var(--blue-dim); color: var(--blue); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.industry-card .icon svg { width: 22px; height: 22px; }
.industry-card h3 { font-size: 1.1rem; margin-bottom: 8px; }
.industry-card p { font-size: 0.9rem; color: var(--text-ink-lo); }
.industry-card ul { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.industry-card li { font-size: 0.82rem; color: var(--text-ink-lo); padding-left: 16px; position: relative; }
.industry-card li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }

/* ---------- capabilities strip ---------- */
.capability-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--paper-line); border: 1px solid var(--paper-line); border-radius: var(--radius); overflow: hidden; }
.capability-cell { background: var(--paper-2); padding: 26px 24px; }
.capability-cell .label { font-size: 0.76rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--blue); margin-bottom: 10px; }
.capability-cell .val { font-size: 0.95rem; color: var(--text-ink); line-height: 1.5; }

/* ---------- process strip ---------- */
.process-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; position: relative; }
.process-step { position: relative; padding: 0 18px; text-align: left; }
.process-step .n {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--blue); color: #fff; font-family: var(--font-head); font-weight: 700; font-size: 0.9rem;
  display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
}
.process-step h4 { font-size: 0.95rem; margin-bottom: 6px; }
.process-step p { font-size: 0.82rem; color: var(--text-lo); }
[data-theme="light"] .process-step p, [data-theme="paper2"] .process-step p { color: var(--text-ink-lo); }
.process-step:not(:first-child)::before {
  content: ""; position: absolute; top: 18px; left: -50%; width: 100%; height: 1px;
  background: var(--line-strong);
}
[data-theme="light"] .process-step:not(:first-child)::before,
[data-theme="paper2"] .process-step:not(:first-child)::before { background: var(--paper-line); }
.process-leadtime { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line); font-size: 0.94rem; }
[data-theme="light"] .process-leadtime, [data-theme="paper2"] .process-leadtime { border-top-color: var(--paper-line); }

/* ---------- heritage timeline ---------- */
.timeline { position: relative; padding-left: 32px; }
.timeline::before { content: ""; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 2px; background: var(--line); }
.timeline-item { position: relative; padding-bottom: 34px; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before {
  content: ""; position: absolute; left: -32px; top: 4px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--ink); border: 3px solid var(--blue-hi);
}
.timeline-item .yr { font-family: var(--font-head); font-weight: 700; color: var(--blue-hi); font-size: 1.05rem; display: block; margin-bottom: 4px; }
.timeline-item p { color: var(--text-lo); font-size: 0.92rem; }

/* ---------- photo placeholder tiles ---------- */
.photo-tile-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.photo-tile {
  aspect-ratio: 4/3;
  border-radius: var(--radius-sm);
  border: 1px dashed var(--line-strong);
  background: repeating-linear-gradient(135deg, rgba(255,255,255,0.02) 0 10px, rgba(255,255,255,0.045) 10px 20px);
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 16px;
  color: var(--text-lo); font-size: 0.8rem;
}
.photo-tile svg { width: 22px; height: 22px; display: block; margin: 0 auto 10px; opacity: 0.6; }

/* ---------- proof-point slot ---------- */
.proof-slot {
  border: 1px dashed var(--paper-line);
  border-radius: var(--radius-sm);
  padding: 20px 22px;
  background: rgba(47, 107, 255, 0.04);
}
.proof-slot + .proof-slot { margin-top: 12px; }

/* ---------- resources grid ---------- */
.resource-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.resource-card {
  background: var(--paper-2);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius);
  padding: 28px;
  opacity: 0.7;
}
.resource-card .tag { display: inline-block; font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--blue); background: var(--blue-dim); padding: 4px 10px; border-radius: 999px; margin-bottom: 14px; }
.resource-card h3 { font-size: 1.05rem; margin-bottom: 8px; }
.resource-card p { font-size: 0.88rem; color: var(--text-ink-lo); }

/* ===========================================================
   TECHNICAL LAYER
   The blueprint/engineering-drawing design language. Shared by every page;
   the Special Tools flagship layers its scroll choreography on top of this
   in css/special-tools.css.
   =========================================================== */

/* blueprint grid wash — drop inside any position:relative section */
.bp-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--bp-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--bp-grid) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, #000 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, #000 30%, transparent 100%);
  pointer-events: none;
}

/* monospace technical label */
.mono {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue-hi);
}

/* dimension-line divider */
.tech-rule { height: 1px; background: linear-gradient(90deg, var(--bp-line-hi), transparent); }

/* corner HUD readouts */
.hud {
  position: absolute;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  color: rgba(140, 165, 210, 0.45);
  text-transform: uppercase;
  pointer-events: none;
  z-index: 3;
}
.hud.tl { top: 120px; left: 34px; }
.hud.tr { top: 120px; right: 34px; text-align: right; }
.hud.bl { bottom: 34px; left: 34px; }
.hud.br { bottom: 34px; right: 34px; text-align: right; }
.hud span { display: block; color: rgba(200, 215, 240, 0.75); }

/* blueprint SVG: every stroke carries pathLength="100", so one --draw
   variable (0..1) drives the whole drawing on */
.bp path,
.bp line,
.bp circle,
.bp rect,
.bp polyline {
  stroke-dasharray: 100;
  stroke-dashoffset: calc(100 - (var(--draw, 1) * 100));
  vector-effect: non-scaling-stroke;
}
.bp text {
  opacity: calc(var(--draw, 1) * var(--draw, 1));
  transition: opacity 0.25s linear;
}

/* technical section header */
.tech-head { max-width: 640px; margin-bottom: 56px; position: relative; z-index: 2; }
.tech-head h2 { font-size: clamp(2rem, 3.4vw, 3rem); letter-spacing: -0.025em; margin-bottom: 16px; }
.tech-head p { color: var(--text-lo); font-size: 1.05rem; }

/* ---------- annotated product shot: image + callout pins ---------- */
.shot-media {
  position: relative;
  aspect-ratio: 3 / 4;
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.shot-media .halo {
  position: absolute;
  inset: 12% 18%;
  background: radial-gradient(circle, rgba(47, 107, 255, 0.18), transparent 70%);
  filter: blur(30px);
}
.shot-media img {
  position: relative;
  z-index: 2;
  max-height: 100%;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 34px 60px rgba(0, 0, 0, 0.7));
}

.pin {
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: center;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
  transition-delay: calc(var(--d, 0) * 140ms + 200ms);
}
.in .pin { opacity: 1; transform: none; }
.pin b {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--blue-hi);
  box-shadow: 0 0 0 5px rgba(47, 107, 255, 0.18);
  flex: none; position: relative;
}
.pin b::after {
  content: "";
  position: absolute; inset: -5px;
  border-radius: 50%;
  border: 1px solid var(--blue-hi);
  animation: pinPulse 2.6s var(--ease) infinite;
}
@keyframes pinPulse {
  0% { transform: scale(0.8); opacity: 0.9; }
  70%, 100% { transform: scale(2.1); opacity: 0; }
}
.pin s {
  height: 1px; width: 54px;
  background: linear-gradient(90deg, var(--bp-line-hi), rgba(84, 135, 255, 0.25));
  text-decoration: none;
}
.pin em {
  font-family: var(--mono);
  font-style: normal;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(214, 228, 250, 0.92);
  white-space: nowrap;
}
/* left-hand pins read label -> leader -> dot, anchored from the right edge
   so the dot still lands on the tool */
.pin.left { flex-direction: row; text-align: right; }
.pin.left s { background: linear-gradient(270deg, var(--bp-line-hi), rgba(84, 135, 255, 0.25)); }

/* ---------- spec pairs ---------- */
.specs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 8px; overflow: hidden;
}
.specs div { background: #10131a; padding: 16px 18px; }
.specs dt {
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: rgba(140, 165, 210, 0.6); margin-bottom: 6px;
}
.specs dd { margin: 0; font-size: 0.92rem; }

/* ---------- technical stat readout ---------- */
.stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(255, 255, 255, 0.07);
  border-block: 1px solid rgba(255, 255, 255, 0.07);
  position: relative;
  z-index: 2;
}
.stat { background: var(--ink); padding: 44px 30px; }
.stat .v {
  font-family: var(--font-head);
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  letter-spacing: -0.03em; line-height: 1; margin-bottom: 12px;
  display: flex; align-items: baseline; gap: 2px;
}
.stat .v small { font-size: 0.44em; color: var(--blue-hi); }
.stat .k {
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--text-lo);
}

/* ---------- process rail ---------- */
.rail { position: relative; z-index: 2; }
.rail-line { position: relative; height: 1px; background: rgba(255,255,255,0.1); margin-bottom: 42px; }
.rail-line i {
  position: absolute; inset: 0 auto 0 0; width: 100%;
  background: linear-gradient(90deg, var(--blue), var(--blue-hi));
  transform: scaleX(var(--f, 0)); transform-origin: left;
}
.rail-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px; }
.rail-step .ico { width: 46px; height: 46px; color: var(--blue-hi); margin-bottom: 18px; }
.rail-step .ico svg { width: 100%; height: 100%; overflow: visible; }
.rail-step .n {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.2em;
  color: rgba(140, 165, 210, 0.55); display: block; margin-bottom: 8px;
}
.rail-step h4 { font-size: 1rem; margin-bottom: 8px; }
.rail-step p { font-size: 0.86rem; color: var(--text-lo); }

/* ---------- pointer-tilt card ---------- */
.tilt-card {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(26, 30, 37, 0.85), rgba(14, 17, 22, 0.85));
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style: preserve-3d;
  transition: border-color 0.4s var(--ease), transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
  overflow: hidden;
}
.tilt-card::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(320px circle at var(--cx, 50%) var(--cy, 50%), rgba(47, 107, 255, 0.14), transparent 70%);
  opacity: 0; transition: opacity 0.4s var(--ease); pointer-events: none;
}
.tilt-card:hover { border-color: rgba(47, 107, 255, 0.45); box-shadow: var(--glow); }
.tilt-card:hover::after { opacity: 1; }

/* the Special Tools entry on the products grid reads as the flagship */
.cat-card-flagship {
  position: relative;
  overflow: hidden;
  border-color: rgba(47, 107, 255, 0.35);
  background:
    radial-gradient(ellipse 60% 80% at 88% 50%, rgba(47, 107, 255, 0.12), transparent 70%),
    var(--paper-2);
}
.cat-card-flagship .thumb-row { position: relative; z-index: 2; }

/* ---------- home: Special Tools feature ---------- */
.home-special {
  position: relative;
  padding: 120px 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 60% at 78% 40%, rgba(47, 107, 255, 0.13), transparent 68%),
    var(--ink);
  color: var(--text-hi);
}
.home-special-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 64px;
  align-items: center;
}
.home-special-copy h2 {
  font-size: clamp(2.1rem, 3.8vw, 3.2rem);
  letter-spacing: -0.03em;
  line-height: 1.04;
  margin-bottom: 22px;
}
.home-special-copy h2 em { font-style: normal; color: var(--blue-hi); }
.home-special-copy p { color: var(--text-lo); font-size: 1.04rem; margin-bottom: 16px; max-width: 46ch; }

.home-special-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 32px; }
.home-special-chips span {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 7px 13px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: rgba(214, 228, 250, 0.82);
}
.home-special-acts { display: flex; gap: 14px; flex-wrap: wrap; }

.home-special-media { max-height: 66vh; }
.home-special-bp {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0.5;
}

/* ===========================================================
   Responsive
   =========================================================== */
@media (max-width: 1080px) {
  .stat-row { grid-template-columns: repeat(2, 1fr); }
  .rail-steps { grid-template-columns: repeat(2, 1fr); gap: 30px; }
  .hud { display: none; }
  .home-special-grid { grid-template-columns: 1fr; gap: 44px; }
  .home-special-media { order: -1; max-height: 46vh; }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .cat-grid { grid-template-columns: 1fr; }
  .cat-card.full { grid-template-columns: 1fr; }
  .tool-grid { grid-template-columns: repeat(2, 1fr); }
  .value-list { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; gap: 44px; }
  .split.reverse .split-media { order: 0; }
  .contact-wrap { grid-template-columns: 1fr; }
  .page-grid { grid-template-columns: 1fr; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); row-gap: 24px; }
  .industry-grid { grid-template-columns: 1fr; }
  .capability-grid { grid-template-columns: repeat(2, 1fr); }
  .process-strip { grid-template-columns: repeat(2, 1fr); row-gap: 32px; }
  .process-step:not(:first-child)::before { display: none; }
  .photo-tile-grid { grid-template-columns: repeat(2, 1fr); }
  .resource-grid { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .nav-primary, .header-cta .btn-ghost-dark { display: none; }
  .menu-toggle { display: flex; }
  .footer-top { grid-template-columns: 1fr 1fr; row-gap: 36px; }
}

@media (max-width: 620px) {
  .container { padding: 0 20px; }
  .tool-grid { grid-template-columns: 1fr 1fr; }
  .form-row, .check-grid { grid-template-columns: 1fr; }
  .cta-band { padding: 40px 28px; flex-direction: column; align-items: flex-start; }
  .footer-top { grid-template-columns: 1fr; }
  .card-form { padding: 26px; }
  .hero-stats { grid-template-columns: 1fr 1fr; }
  .feature-grid { grid-template-columns: 1fr; }
  .capability-grid { grid-template-columns: 1fr; }
  .process-strip { grid-template-columns: 1fr; }
  .photo-tile-grid { grid-template-columns: 1fr 1fr; }
  .lm-track { gap: 40px; }
  .lm-item { font-size: 1.1rem; }
  .stat-row { grid-template-columns: 1fr; }
  .rail-steps { grid-template-columns: 1fr; }
  .specs { grid-template-columns: 1fr; }
  /* leader-line callouts need room; captions/specs carry the same information */
  .pin { display: none; }
}

/* technical layer honours reduced motion too */
@media (prefers-reduced-motion: reduce) {
  .pin { opacity: 1 !important; transform: none !important; transition: none !important; }
  .pin b::after { animation: none; }
  .bp path, .bp line, .bp circle, .bp rect, .bp polyline { stroke-dashoffset: 0 !important; }
  .bp text { opacity: 1 !important; }
  .rail-line i { transform: scaleX(1); }
  .tilt-card { transform: none !important; }
}

/* ===========================================================
   Mobile nav drawer
   =========================================================== */
.mobile-nav {
  position: fixed; inset: 0; z-index: 150;
  background: var(--ink);
  display: flex; flex-direction: column;
  padding: 28px 24px;
  transform: translateX(100%);
  transition: transform 0.4s var(--ease);
}
.mobile-nav.open { transform: translateX(0); }
.mobile-nav .mn-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px; }
.mobile-nav .mn-top img { height: 30px; }
.mn-close {
  background: none; border: 1px solid var(--line-strong); border-radius: 10px;
  width: 42px; height: 42px; display: flex; align-items: center; justify-content: center;
  color: #fff;
}
.mn-close svg { width: 18px; height: 18px; }
.mobile-nav ul { display: flex; flex-direction: column; gap: 6px; }
.mobile-nav a { display: block; padding: 14px 4px; font-size: 1.2rem; font-family: var(--font-head); color: #fff; border-bottom: 1px solid var(--line); }
.mobile-nav .sub { padding-left: 16px; }
.mobile-nav .sub a { font-size: 0.95rem; font-family: var(--font-body); color: var(--text-lo); border-bottom: none; padding: 10px 4px; }
.mobile-nav .mn-cta { margin-top: auto; padding-top: 20px; }