/* ═══════════════════════════════════════════════════════════
   STE KHALDOUN INDUSPRO — industrial portfolio
   Palette taken from the company logo: black, crimson, steel.
   ═══════════════════════════════════════════════════════════ */

:root {
  --red: #c1121c;
  --red-2: #e4232d;
  --red-dark: #8a0b12;
  --ink: #0a0a0b;
  --ink-2: #131417;
  --ink-3: #1c1e22;
  --steel: #5c6168;
  --muted: #6d727a;
  --line: rgba(10, 10, 11, 0.12);
  --line-dark: rgba(255, 255, 255, 0.1);
  --paper: #ffffff;
  --paper-2: #f4f5f6;
  --paper-3: #e9ebed;
  --radius: 4px;
  --radius-lg: 10px;
  --container: min(1240px, calc(100vw - 40px));
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Barlow Condensed", "Arial Narrow", var(--sans);
  --shadow: 0 24px 60px rgba(10, 10, 11, 0.14);
  --shadow-sm: 0 10px 28px rgba(10, 10, 11, 0.1);

  /* One warm accent for the premium layer — brass/gold, taken from the corten
     and brass cut signage in the owner's reference photos. The crimson stays
     the brand colour (logo, primary buttons); brass is for detail and motion. */
  --brass: #c9a227;
  --brass-2: #e2c066;
  --brass-soft: rgba(201, 162, 39, 0.38);
  --ease-out: cubic-bezier(0.16, 0.84, 0.34, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
body.nav-open { overflow: hidden; }

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
::selection { background: rgba(193, 18, 28, 0.2); }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  margin: 0;
}
h1 { font-size: clamp(2.6rem, 5.2vw, 4.3rem); }
h2 { font-size: clamp(2rem, 3.6vw, 3.1rem); }
h3 { font-size: clamp(1.15rem, 1.5vw, 1.4rem); }
p { margin: 0 0 1rem; }

.eyebrow {
  margin: 0 0 14px;
  color: var(--red);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.section-dark .eyebrow { color: var(--red-2); }

.skip-link {
  position: absolute;
  left: 16px;
  top: -80px;
  z-index: 200;
  padding: 12px 18px;
  background: var(--red);
  color: #fff;
  font-weight: 700;
  transition: top 0.2s;
}
.skip-link:focus { top: 12px; }

/* ── Buttons ───────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
  white-space: nowrap;
}
.btn-lg { min-height: 56px; padding: 0 30px; font-size: 14px; }
.btn-primary { background: var(--red); color: #fff; }
.btn-primary:hover { background: var(--red-2); transform: translateY(-2px); }
.btn-ghost { border-color: var(--line); background: transparent; color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink); transform: translateY(-2px); }
.section-dark .btn-ghost, .hero .btn-ghost { border-color: rgba(255, 255, 255, 0.28); color: #fff; }
.section-dark .btn-ghost:hover, .hero .btn-ghost:hover { border-color: #fff; background: rgba(255, 255, 255, 0.08); }

/* ── Top bar ───────────────────────────────────────────── */
.topbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding: 9px 20px;
  background: var(--ink);
  color: rgba(255, 255, 255, 0.78);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.topbar i { color: var(--red-2); font-style: normal; }

/* ── Header ────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px max(20px, calc((100vw - 1240px) / 2));
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand img { width: 46px; height: 46px; object-fit: contain; }
.brand-copy { display: grid; line-height: 1.05; }
.brand-copy strong { font-family: var(--display); font-size: 24px; letter-spacing: 0.02em; white-space: nowrap; }
.brand-copy small { color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: 0.24em; white-space: nowrap; }

.desktop-nav { display: flex; gap: 6px; }
.desktop-nav a {
  padding: 10px 13px;
  white-space: nowrap;
  color: var(--ink-3);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: 2px solid transparent;
  transition: color 0.16s, border-color 0.16s;
}
.desktop-nav a:hover { color: var(--red); border-color: var(--red); }

.header-actions { display: inline-flex; align-items: center; gap: 12px; }
.lang-switch { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.lang-switch a.lang-link,
.lang-switch button {
  padding: 8px 11px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  transition: background 0.16s, color 0.16s;
}
.lang-switch a.lang-link { display: grid; place-items: center; text-decoration: none; }
.lang-switch a.lang-link:hover, .lang-switch button:hover { color: var(--ink); }
.lang-switch a.lang-link.is-active, .lang-switch button.is-active { background: var(--ink); color: #fff; }

.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: transparent;
}
.menu-toggle span { width: 20px; height: 2px; background: var(--ink); transition: transform 0.2s, opacity 0.2s; }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 18px 20px 26px;
  background: var(--ink);
  border-bottom: 3px solid var(--red);
}
.mobile-nav.is-open { display: flex; }
.mobile-nav a {
  padding: 13px 4px;
  color: #fff;
  font-family: var(--display);
  font-size: 22px;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line-dark);
}
.mobile-nav .btn { margin-top: 14px; border: 0; }

/* ── Hero ──────────────────────────────────────────────── */
.hero {
  position: relative;
  padding: clamp(56px, 8vw, 104px) 0 clamp(48px, 6vw, 88px);
  background:
    radial-gradient(1000px 520px at 82% 12%, rgba(193, 18, 28, 0.22), transparent 70%),
    linear-gradient(180deg, #0a0a0b 0%, #121316 62%, #0d0e10 100%);
  color: #fff;
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  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: 64px 64px;
  mask-image: radial-gradient(70% 60% at 30% 40%, #000 30%, transparent 78%);
  pointer-events: none;
}
.hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(32px, 5vw, 70px);
  align-items: center;
  width: var(--container);
  margin: 0 auto;
}
.hero h1 { margin-bottom: 20px; }
.hero .lead { max-width: 58ch; color: rgba(255, 255, 255, 0.74); font-size: 1.05rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0 38px; }

.hero-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin: 0;
  padding-top: 26px;
  border-top: 1px solid var(--line-dark);
}
.hero-stats dt { font-family: var(--display); font-size: clamp(1.4rem, 2.2vw, 1.9rem); color: #fff; }
.hero-stats dd { margin: 4px 0 0; color: rgba(255, 255, 255, 0.55); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; }

.hero-media { position: relative; }
.hero-media > img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3.4;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.55);
}
.hero-badge {
  position: absolute;
  left: -14px;
  bottom: -18px;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 320px;
  padding: 14px 18px;
  background: #fff;
  color: var(--ink);
  border-left: 4px solid var(--red);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.hero-badge strong { display: block; font-size: 14px; }
.hero-badge small { color: var(--muted); font-size: 12px; }
.hero-badge .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 0 rgba(193, 18, 28, 0.6);
  animation: pulse 2.4s infinite;
}
@keyframes pulse {
  70% { box-shadow: 0 0 0 12px rgba(193, 18, 28, 0); }
  100% { box-shadow: 0 0 0 0 rgba(193, 18, 28, 0); }
}

/* ── Spec strip ────────────────────────────────────────── */
.specs { background: var(--ink-2); border-top: 3px solid var(--red); }
.specs-inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: var(--container);
  margin: 0 auto;
}
.specs-inner > div {
  padding: 24px 22px 24px 0;
  border-right: 1px solid var(--line-dark);
}
.specs-inner > div:last-child { border-right: 0; }
.specs-inner > div + div { padding-left: 22px; }
.specs strong { display: block; color: #fff; font-family: var(--display); font-size: 1.15rem; text-transform: uppercase; }
.specs span { color: rgba(255, 255, 255, 0.55); font-size: 13px; }

/* ── Sections ──────────────────────────────────────────── */
.section { padding: clamp(60px, 7vw, 108px) 0; }
.section > * { width: var(--container); margin-left: auto; margin-right: auto; }
.section-dark { background: var(--ink); color: #fff; }
.section-dark .section-intro { color: rgba(255, 255, 255, 0.62); }

.section-head { max-width: 860px; margin-bottom: clamp(34px, 4vw, 56px); }
.section-head h2 { margin-bottom: 16px; }
.section-intro { color: var(--muted); font-size: 1.05rem; margin: 0; }

/* ── Capabilities ──────────────────────────────────────── */
.cap-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.cap-card { padding: 34px 30px 36px; background: var(--paper); transition: background 0.2s, transform 0.2s; }
.cap-card:hover { background: var(--paper-2); }
.cap-num { display: block; margin-bottom: 14px; color: var(--red); font-family: var(--display); font-size: 1.3rem; letter-spacing: 0.1em; }
.cap-card h3 { margin-bottom: 10px; }
.cap-card p { margin: 0; color: var(--muted); font-size: 0.95rem; }

/* ── Products ──────────────────────────────────────────── */
.prod-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.prod-card { display: flex; flex-direction: column; background: var(--ink-2); border: 1px solid var(--line-dark); border-radius: var(--radius-lg); overflow: hidden; }
.prod-media { aspect-ratio: 4 / 3; overflow: hidden; background: #000; }
.prod-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.prod-card:hover .prod-media img { transform: scale(1.05); }
.prod-body { padding: 26px 24px 28px; }
.prod-body h3 { margin-bottom: 12px; }
.prod-body p { color: rgba(255, 255, 255, 0.62); font-size: 0.95rem; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.tags li {
  padding: 6px 11px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
}

/* ── Pattern catalogue ────────────────────────────────── */
.catalogue { background: var(--paper); }
.cat-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.cat-filters button {
  padding: 10px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background 0.16s, color 0.16s, border-color 0.16s;
}
.cat-filters button:hover { border-color: var(--ink); }
.cat-filters button.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }

.cat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.cat-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper);
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.cat-card:hover { border-color: var(--red); box-shadow: var(--shadow-sm); transform: translateY(-3px); }
.cat-card[hidden] { display: none; }
.cat-media {
  display: grid;
  place-items: center;
  height: 300px;
  padding: 0;
  overflow: hidden;
  background: #efe9e1;
  border-bottom: 1px solid var(--line);
}
.cat-media img { width: 100%; height: 100%; object-fit: contain; transition: transform 0.5s ease; }
.cat-card:hover .cat-media img { transform: scale(1.04); }
.cat-body { display: grid; gap: 4px; padding: 16px 18px 18px; }
.cat-code { color: var(--red); font-size: 11px; font-weight: 800; letter-spacing: 0.18em; }
.cat-body h3 { font-size: 1.05rem; }
.cat-dim { margin: 2px 0 0; color: var(--muted); font-size: 12px; }
.cat-desc { margin: 7px 0 0; color: var(--ink-3); font-size: 12.5px; line-height: 1.45; }
.cat-dl {
  justify-self: start;
  margin-top: 10px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  transition: background 0.16s, color 0.16s, border-color 0.16s;
}
.cat-dl::before { content: "↓ "; }
.cat-dl:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.cat-cta { margin: 26px 0 0; }
.cat-note { max-width: 78ch; margin: 30px 0 0; color: var(--muted); font-size: 0.95rem; }

/* ── design references (real photos, credited) ─────────── */
.references { background: var(--paper-2); }
.ref-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.ref-filters button {
  padding: 10px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.ref-filters button:hover { border-color: var(--ink); }
.ref-filters button.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
.ref-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.ref-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper);
}
.ref-media { position: relative; aspect-ratio: 4 / 5; background: #26282c; overflow: hidden; }
.ref-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.ref-card:hover .ref-media img { transform: scale(1.03); }
/* the card photo IS the card: big, clickable, opens the full-size lightbox */
.ref-shot {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 0;
  background: #26282c;
  cursor: zoom-in;
}
.ref-shot img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease, opacity 0.3s; }
.ref-shot:hover img { transform: scale(1.04); opacity: 0.9; }
.ref-shot .ref-tag {
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 2;
  background: rgba(255, 255, 255, 0.94);
  border-color: transparent;
  color: #111;
}
.ref-body { display: grid; gap: 5px; padding: 15px 17px 17px; }
.ref-tag {
  justify-self: start;
  padding: 3px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
/* The workshop's own work: solid brand red, so it reads as ours at a glance and
   never as a variant of the white external-reference chip. */
.ref-tag--own {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}
.ref-shot .ref-tag--own {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}
/* Generated design visualisation: a dark chip, distinct from both the red
   own-work chip and the white external-reference chip. */
.ref-tag--concept {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
.ref-shot .ref-tag--concept {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
.ref-concept-note { margin: 3px 0 0; font-size: 11.5px; line-height: 1.45; color: var(--muted); font-weight: 700; }
.ref-body h3 { margin: 3px 0 0; font-size: 1.02rem; }
.ref-credit { margin: 0; font-size: 11.5px; color: var(--muted); }
.ref-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.ref-note { margin: 3px 0 0; font-size: 11.5px; line-height: 1.45; color: var(--ink-3); }
.ref-small { margin: 3px 0 0; font-size: 11px; line-height: 1.4; color: var(--muted); }
.ref-cta {
  justify-self: start;
  margin-top: 9px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: inherit;
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}
.ref-cta:hover { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ── Gallery ───────────────────────────────────────────── */
.gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 250px; gap: 14px; }
.shot { padding: 0; border: 0; background: #000; border-radius: var(--radius); overflow: hidden; position: relative; }
.shot img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease, opacity 0.3s; }
.shot:hover img { transform: scale(1.06); opacity: 0.85; }
.shot::after {
  content: "＋";
  position: absolute;
  right: 10px;
  bottom: 8px;
  color: #fff;
  font-size: 20px;
  opacity: 0;
  transition: opacity 0.2s;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}
.shot:hover::after { opacity: 1; }
.shot-tall { grid-row: span 2; }
.shot-wide { grid-column: span 2; }

/* ── Process ───────────────────────────────────────────── */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; margin: 0; padding: 0; list-style: none; counter-reset: s; }
.steps li { padding-top: 26px; border-top: 2px solid var(--red); }
.step-num { display: block; margin-bottom: 14px; color: rgba(255, 255, 255, 0.25); font-family: var(--display); font-size: 3rem; line-height: 1; }
.steps h3 { margin-bottom: 10px; }
.steps p { margin: 0; color: rgba(255, 255, 255, 0.62); font-size: 0.95rem; }

/* ── Why ───────────────────────────────────────────────── */
.why-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(30px, 5vw, 64px); align-items: center; }
.why-copy h2 { margin-bottom: 16px; }
.why-copy > p { color: var(--muted); }
.why-points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 30px; }
.why-points > div { padding-left: 16px; border-left: 3px solid var(--red); }
.why-points strong { display: block; font-size: 0.98rem; }
.why-points span { color: var(--muted); font-size: 0.9rem; }
.why-media { margin: 0; }
.why-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow); }

/* ── About ─────────────────────────────────────────────── */
.about-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(30px, 5vw, 64px); align-items: center; }
.about-grid h2 { margin-bottom: 18px; }
.about-grid p { color: rgba(255, 255, 255, 0.66); }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 30px 0 0; padding-top: 26px; border-top: 1px solid var(--line-dark); }
.facts dt { color: rgba(255, 255, 255, 0.45); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.facts dd { margin: 5px 0 0; font-weight: 600; }
.about-media img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius-lg); }

/* ── Contact ───────────────────────────────────────────── */
.contact { background: var(--paper-2); }
.contact-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(30px, 5vw, 60px); align-items: start; }
.contact-copy h2 { margin-bottom: 16px; }
.contact-copy > p { color: var(--muted); }
.contact-list { margin: 30px 0 0; padding: 0; list-style: none; display: grid; gap: 18px; }
.contact-list li { display: flex; gap: 14px; align-items: flex-start; }
.ci {
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  background: var(--ink);
  color: #fff;
  border-radius: var(--radius);
  font-size: 16px;
}
.contact-list small { display: block; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.contact-list a, .contact-list span:not(.ci) { font-weight: 600; }
.contact-list a:hover { color: var(--red); }

/* Click to load. The placeholder holds the exact height the iframe will take, so
   swapping it in cannot shift the page, and nothing is requested from Google until
   the visitor presses the button. */
.map-embed { margin: 28px 0 0; }
.map-frame {
  --map-h: 300px;
  height: var(--map-h);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper);
  overflow: hidden;
}
.map-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.map-ask {
  height: 100%;
  padding: 24px;
  display: grid;
  gap: 12px;
  justify-items: start;
  align-content: center;
}
.map-ask p { margin: 0; color: var(--muted); font-size: 13px; }
@media (max-width: 720px) {
  .map-frame { --map-h: 240px; }
  .map-ask { padding: 18px; }
}

.quote-form { padding: clamp(26px, 3vw, 38px); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.quote-form h3 { margin-bottom: 22px; }
.quote-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.quote-form label { display: grid; gap: 7px; margin-bottom: 16px; }
.quote-form label span { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.quote-form input, .quote-form select, .quote-form textarea {
  width: 100%;
  padding: 13px 14px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color 0.16s, background 0.16s;
}
.quote-form input:focus, .quote-form select:focus, .quote-form textarea:focus {
  outline: none;
  border-color: var(--red);
  background: #fff;
}
.quote-form textarea { resize: vertical; }
.form-note { color: var(--muted); font-size: 13px; }
.form-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.form-status { min-height: 22px; margin: 12px 0 0; font-size: 14px; font-weight: 600; color: var(--red); }

/* ── Footer ────────────────────────────────────────────── */
.site-footer { background: var(--ink); color: rgba(255, 255, 255, 0.7); border-top: 3px solid var(--red); }
.footer-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 28px;
  width: var(--container);
  margin: 0 auto;
  padding: 44px 0 34px;
}
.footer-brand { display: flex; gap: 14px; align-items: center; }
.footer-brand strong { display: block; color: #fff; font-size: 14px; letter-spacing: 0.04em; }
.footer-brand span { font-size: 13px; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 18px; align-self: center; justify-content: flex-end; }
.footer-nav a { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.footer-nav a:hover { color: var(--red-2); }
.footer-legal {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  margin-top: 10px;
  padding-top: 26px;
  border-top: 1px solid var(--line-dark);
}
.footer-legal > div { display: grid; gap: 6px; align-content: start; }
.footer-legal strong {
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.footer-legal span { color: rgba(255, 255, 255, 0.55); font-size: 12.5px; line-height: 1.55; }
@media (max-width: 720px) { .footer-legal { grid-template-columns: 1fr; gap: 20px; } }

.copyright { grid-column: 1 / -1; margin: 6px 0 0; padding-top: 20px; border-top: 1px solid var(--line-dark); font-size: 12px; }

/* ── Lightbox ──────────────────────────────────────────── */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6, 6, 7, 0.94);
  padding: 4vh 6vw;
}
.lightbox[hidden] { display: none; }
.lightbox figure { margin: 0; max-width: 100%; max-height: 92vh; text-align: center; }
.lightbox img { max-width: 100%; max-height: 82vh; object-fit: contain; border-radius: var(--radius); }
.lightbox figcaption { margin-top: 14px; color: rgba(255, 255, 255, 0.7); font-size: 14px; }
.lb-close, .lb-nav {
  position: absolute;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-size: 26px;
  line-height: 1;
}
.lb-close:hover, .lb-nav:hover { background: var(--red); border-color: var(--red); }
.lb-close { top: 22px; right: 22px; font-size: 18px; }
.lb-prev { left: 18px; }
.lb-next { right: 18px; }

/* ── WhatsApp float ────────────────────────────────────── */
.wa-float {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 95;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  background: #25d366;
  border-radius: 50%;
  box-shadow: 0 12px 30px rgba(37, 211, 102, 0.34);
  transition: transform 0.2s;
}
.wa-float:hover { transform: translateY(-3px) scale(1.04); }
.wa-float svg { width: 28px; height: 28px; fill: #fff; }

/* ── Reveal animation ──────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.is-in { opacity: 1; transform: none; }
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }

/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 1460px) {
  .site-header { gap: 14px; }
  .desktop-nav a { padding: 10px 9px; font-size: 12px; letter-spacing: 0.03em; }
  .header-cta { padding: 0 16px; font-size: 12px; }
  .lang-switch a.lang-link,
.lang-switch button { padding: 8px 9px; }
}

@media (max-width: 1080px) {
  .desktop-nav { display: none; }
  .menu-toggle { display: flex; }
  .header-cta { display: none; }
  .hero-inner { grid-template-columns: 1fr; }
  .hero-media { order: -1; }
  .hero-badge { left: 10px; bottom: -14px; }
  .cap-grid, .prod-grid, .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ref-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .specs-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .specs-inner > div { border-bottom: 1px solid var(--line-dark); padding-left: 0; }
  .specs-inner > div:nth-child(2n) { border-right: 0; padding-left: 22px; }
  .specs-inner > div:nth-child(2n + 1) { padding-right: 22px; }
  .why-grid, .about-grid, .contact-grid { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 190px; }
  .footer-inner { grid-template-columns: 1fr; }
  .footer-nav { justify-content: flex-start; }
}

@media (max-width: 720px) {
  html { scroll-padding-top: 80px; }
  /* long French/German button labels must wrap instead of widening the page */
  .btn { white-space: normal; text-align: center; line-height: 1.25; padding: 12px 18px; height: auto; }
  .btn-lg { padding: 14px 22px; }
  .hero-actions .btn, .form-actions .btn { flex: 1 1 100%; }
  .topbar { font-size: 10px; gap: 6px; padding: 7px 12px; letter-spacing: 0.12em; }
  .topbar i { display: none; }
  .site-header { gap: 10px; padding-inline: 14px; }
  .brand img { width: 38px; height: 38px; }
  .brand-copy strong { font-size: 17px; }
  .brand-copy small { display: none; }
  .lang-switch a.lang-link,
.lang-switch button { padding: 7px 7px; font-size: 11px; letter-spacing: 0; }
  .menu-toggle { width: 40px; height: 40px; }
  .hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .cap-grid, .prod-grid, .steps, .why-points, .quote-form .row, .facts { grid-template-columns: 1fr; }
  .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .ref-grid { grid-template-columns: 1fr; gap: 12px; }
  .cat-media { height: 200px; }
  .cat-filters button { padding: 9px 13px; font-size: 11px; }
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 160px; }
  .shot-wide { grid-column: span 2; }
  .shot-tall { grid-row: span 1; }
  .lb-prev { left: 8px; }
  .lb-next { right: 8px; }
  .lb-nav { width: 44px; height: 44px; }
  .brand-copy strong { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* ── DXF band — compact dark strip: intro + in-browser geometry check ───
   Deliberately short: the checker is the useful part, so the section is one
   band instead of a full-height feature with a second card stacked under it. */
.dxf {
  padding: clamp(46px, 5vw, 76px) 0;
  background:
    radial-gradient(760px 320px at 88% 10%, rgba(201, 162, 39, 0.1), transparent 70%),
    linear-gradient(180deg, #101114 0%, #17191d 55%, #101114 100%);
  color: #fff;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.dxf-band { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: clamp(24px, 3.4vw, 52px); align-items: center; }
.dxf-intro h2 { font-size: clamp(1.65rem, 2.5vw, 2.3rem); margin-bottom: 10px; padding-bottom: 12px; position: relative; }
.dxf-intro h2::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 64px; height: 2px;
  background: linear-gradient(90deg, var(--brass), transparent);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 0.9s cubic-bezier(0.16, 0.84, 0.34, 1) 0.2s;
}
.dxf-band.is-in .dxf-intro h2::after { transform: scaleX(1); }
.dxf-intro .eyebrow { color: var(--brass-2); }
.dxf-lede { max-width: 46ch; margin: 0 0 20px; color: rgba(255, 255, 255, 0.62); font-size: 0.95rem; }
.dxf-cta { min-height: 46px; }

.dxf-check {
  display: grid;
  gap: 14px;
  padding: clamp(16px, 1.8vw, 22px);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  transition: border-color 0.3s ease, background 0.3s ease;
}
.dxf-check:hover { border-color: rgba(201, 162, 39, 0.34); }

.dxf-drop {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px dashed rgba(255, 255, 255, 0.24);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s;
}
.dxf-drop:hover, .dxf-drop:focus-visible, .dxf-drop.is-over {
  border-color: var(--brass); background: rgba(201, 162, 39, 0.08); outline: none;
}
.dxf-drop.has-file { border-style: solid; border-color: var(--brass); background: rgba(201, 162, 39, 0.1); }
.dxf-drop svg { flex: 0 0 24px; width: 24px; height: 24px; stroke: var(--brass-2); stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.dxf-drop-copy { display: grid; gap: 2px; min-width: 0; }
.dxf-drop strong { font-size: 0.93rem; }
.dxf-drop small { color: rgba(255, 255, 255, 0.5); font-size: 11.5px; overflow-wrap: anywhere; }

/* parameters sit inline on one row so they cost a single line of height */
.dxf-params { display: grid; grid-template-columns: 1.25fr 0.9fr 0.72fr; gap: 12px; }
.dxf-params label { display: grid; gap: 5px; min-width: 0; }
.dxf-params span { color: rgba(255, 255, 255, 0.5); font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.dxf-params input, .dxf-params select {
  width: 100%;
  padding: 9px 11px;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius);
  font-size: 0.9rem;
  transition: border-color 0.16s, background 0.16s;
}
.dxf-params option { color: #111; }
.dxf-params input:focus, .dxf-params select:focus { outline: none; border-color: var(--brass); background: rgba(255, 255, 255, 0.1); }

.dxf-result { margin-top: 4px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.dxf-table { width: 100%; border-collapse: collapse; }
.dxf-table th, .dxf-table td { padding: 7px 0; text-align: left; border-bottom: 1px solid rgba(255, 255, 255, 0.09); }
.dxf-table th { color: rgba(255, 255, 255, 0.5); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.dxf-table td { color: #fff; font-family: var(--display); font-size: 1.12rem; text-align: right; }
.dxf-notes { margin: 12px 0 0; padding-left: 18px; color: rgba(255, 255, 255, 0.62); font-size: 12.5px; }
.dxf-notes li { margin-bottom: 4px; }
.dxf-disc { margin: 12px 0 0; color: rgba(255, 255, 255, 0.45); font-size: 12px; }
.dxf-err { margin: 0; color: var(--red-2); font-weight: 600; }
.dxf-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }

@media (max-width: 1080px) { .dxf-band { grid-template-columns: 1fr; } }
@media (max-width: 720px) {
  .dxf-params { grid-template-columns: 1fr 1fr; }
  .dxf-params label:first-child { grid-column: 1 / -1; }
  .dxf-table td { font-size: 1rem; }
}

/* -- Export / trade band -------------------------------- */
.export { background: var(--ink); color: #fff; }
.export-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(30px, 5vw, 64px); align-items: start; }
.export-copy h2 { margin-bottom: 18px; }
.export-copy p { color: rgba(255, 255, 255, 0.66); }
.export-facts { display: grid; gap: 0; margin: 0; border-top: 1px solid var(--line-dark); }
.export-facts > div { display: grid; gap: 4px; padding: 16px 0; border-bottom: 1px solid var(--line-dark); }
.export-facts dt { color: var(--red-2); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.export-facts dd { margin: 0; font-size: 0.97rem; }
.export-note { max-width: 86ch; margin: 30px 0 0; color: rgba(255, 255, 255, 0.45); font-size: 0.86rem; }
@media (max-width: 1080px) { .export-grid { grid-template-columns: 1fr; } }

/* -- Print: the page doubles as a leave-behind brochure -- */
@media print {
  .topbar, .site-header, .mobile-nav, .wa-float, .lightbox,
  .cat-filters, .dxf-check, .quote-form, .hero-actions, .skip-link, .map-embed { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .hero, .section-dark, .export { background: #fff !important; color: #000 !important; }
  .hero::after { display: none; }
  .hero .lead, .section-dark p, .export-copy p, .section-intro,
  .prod-body p, .steps p, .about-grid p { color: #333 !important; }
  .hero-stats dt, .specs strong, .facts dd, .export-facts dd { color: #000 !important; }
  .specs { background: #fff; border-top: 2px solid #000; }
  .specs span, .facts dt, .export-facts dt { color: #555 !important; }
  .section { padding: 18pt 0; break-inside: avoid; }
  .cat-grid { grid-template-columns: repeat(4, 1fr); }
  .gallery { grid-auto-rows: 120px; }
  .reveal { opacity: 1 !important; transform: none !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; color: #666; }
  .cat-card, .prod-card, .cap-card, figure, .export-facts > div { break-inside: avoid; }
  .site-footer { background: #fff; color: #000; border-top: 2px solid #000; }
  .footer-legal span, .copyright { color: #444 !important; }
}

/* -- Job work / services -------------------------------- */
.job-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line-dark); border: 1px solid var(--line-dark); }
.job-card { padding: 30px 26px 32px; background: var(--ink-2); transition: background 0.2s; }
.job-card:hover { background: var(--ink-3); }
.job-num { display: block; margin-bottom: 12px; color: var(--red-2); font-family: var(--display); font-size: 1.25rem; letter-spacing: 0.1em; }
.job-card h3 { margin-bottom: 9px; }
.job-card p { margin: 0; color: rgba(255, 255, 255, 0.62); font-size: 0.94rem; }
.job-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px; margin-top: 30px; padding: 24px 26px; background: rgba(255,255,255,.05); border-left: 4px solid var(--red); }
.job-cta p { margin: 0; max-width: 70ch; color: rgba(255, 255, 255, 0.78); }
@media (max-width: 1080px) { .job-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .job-grid { grid-template-columns: 1fr; } }

/* ── technical catalogue (generated designs annex) ─────── */
.tech-head { display: flex; align-items: center; justify-content: space-between; gap: 20px;
             padding: 18px clamp(18px, 4vw, 54px); border-bottom: 1px solid var(--line); }
.tech-head .brand { text-decoration: none; color: inherit; }
.tech-main { max-width: 1240px; margin: 0 auto; padding: clamp(28px, 5vw, 64px) clamp(18px, 4vw, 54px) 40px; }
.tech-main h1 { font-family: var(--display); font-size: clamp(2rem, 4vw, 3rem); text-transform: uppercase;
                margin: 6px 0 14px; line-height: 1; }
.tech-lead { max-width: 82ch; font-size: 1.02rem; color: var(--ink-3); }
.tech-note { max-width: 82ch; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line);
             font-size: 0.92rem; color: var(--muted); }
.tech-grid { margin-top: 34px; }
.tech-foot { border-top: 3px solid var(--red); padding: 16px clamp(18px, 4vw, 54px);
             display: flex; justify-content: space-between; gap: 18px; font-size: 12.5px; color: var(--muted); }
.tech-foot a { color: var(--red); text-decoration: none; font-weight: 700; }

/* ── external design references (third-party documents) ── */
.ref-pdfs { margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--line); }
.ref-pdfs h3 { margin: 0 0 8px; font-size: 1.05rem; }
.ref-pdfs > .ref-pdf-note { max-width: 82ch; margin: 0 0 12px; color: var(--muted); font-size: 12.5px; }
.ref-pdfs ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.ref-pdfs li { padding-left: 0; }
.ref-pdfs a { color: var(--ink); font-weight: 700; font-size: 0.95rem; text-underline-offset: 3px; }
.ref-pdfs .ref-pdf-note { display: block; margin-top: 3px; color: var(--muted); font-size: 11.5px; }

/* motif-family chip on a reference photo + the subtle inspiration list */
.ref-shot .ref-cat {
  position: absolute; left: 10px; bottom: 10px; z-index: 2;
  padding: 3px 9px; border-radius: 999px; background: rgba(17,17,17,.72); color: #fff;
  font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
}
.ref-links { margin-top: 26px; }
.ref-links h3 { margin: 0 0 6px; font-size: 1rem; }
.ref-links > .ref-pdf-note { max-width: 82ch; margin: 0 0 10px; color: var(--muted); font-size: 12px; }
.ref-links ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.ref-links a { color: var(--ink); font-weight: 600; font-size: 0.92rem; text-underline-offset: 3px; }

/* ═══════════════════════════════════════════════════════════
   PREMIUM MOTION LAYER
   Hand-written, no library, no CDN. Everything animates transform
   and opacity only, so nothing here can reflow the page.
   All of it is switched off in the prefers-reduced-motion block
   at the very bottom of this file — keep that block last.
   ═══════════════════════════════════════════════════════════ */

@keyframes kh-rise      { from { opacity: 0; transform: translate3d(0, 20px, 0); } to { opacity: 1; transform: none; } }
@keyframes kh-line-in   { from { opacity: 0; transform: translate3d(0, 105%, 0); } to { opacity: 1; transform: none; } }
@keyframes kh-settle    { from { opacity: 0; transform: scale(1.07); } to { opacity: 1; transform: none; } }
@keyframes kh-badge-in  { from { opacity: 0; transform: translate3d(0, 14px, 0) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes kh-draw      { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes kh-motif-in  { from { opacity: 0; } to { opacity: 0.4; } }

/* ── Header: condenses on scroll, brass scroll-progress hairline ── */
.site-header { transition: background 0.35s ease, box-shadow 0.35s ease; }
.site-header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, var(--brass), var(--brass-2));
  transform: scaleX(var(--kh-progress, 0));
  transform-origin: 0 50%;
  pointer-events: none;
}
.site-header.is-condensed { background: rgba(255, 255, 255, 0.97); box-shadow: 0 16px 38px rgba(10, 10, 11, 0.09); }
/* the header keeps its height — only the mark scales, so nothing below shifts */
.brand img { transition: transform 0.4s var(--ease-out); }
.site-header.is-condensed .brand img { transform: scale(0.86); }
.desktop-nav a { position: relative; }
.desktop-nav a::after {
  content: "";
  position: absolute;
  left: 13px; right: 13px; bottom: 0;
  height: 2px;
  background: var(--brass);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.32s var(--ease-out);
}
.desktop-nav a:hover::after, .desktop-nav a:focus-visible::after { transform: scaleX(1); }

/* ── Hero entrance ───────────────────────────────────────── */
.hero-copy .eyebrow,
.hero .lead,
.hero-actions,
.hero-stats {
  opacity: 0;
  animation: kh-rise 0.9s var(--ease-out) forwards;
}
.hero-copy .eyebrow { animation-delay: 0.08s; }
.hero .lead        { animation-delay: 0.48s; }
.hero-actions      { animation-delay: 0.60s; }
.hero-stats        { animation-delay: 0.70s; }

/* headline: split into its real rendered lines by app.js, each line masked and lifted in */
.hero h1 .kh-line { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.hero h1 .kh-line-i {
  display: block;
  opacity: 0;
  animation: kh-line-in 0.95s var(--ease-out) forwards;
}

.hero-media > img { opacity: 0; animation: kh-settle 1.25s var(--ease-out) 0.1s forwards; will-change: transform; }
.hero-badge { opacity: 0; animation: kh-badge-in 0.8s var(--ease-out) 0.95s forwards; }

/* signature motif — one of our own cut patterns, drawn stroke by stroke */
.hero-motif {
  position: absolute;
  right: clamp(-90px, -2vw, 0px);
  bottom: -70px;
  z-index: 0;
  width: clamp(260px, 30vw, 460px);
  height: auto;
  fill: none;
  stroke: var(--brass);
  stroke-width: 0.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  pointer-events: none;
  animation: kh-motif-in 0.6s ease 0.7s forwards;
}
.hero-motif path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: kh-draw 2.6s cubic-bezier(0.4, 0, 0.15, 1) forwards;
}
.hero-motif path:nth-child(1) { animation-delay: 0.75s; }
.hero-motif path:nth-child(2) { animation-delay: 0.95s; }
.hero-motif path:nth-child(3) { animation-delay: 1.15s; }
.hero-motif path:nth-child(4) { animation-delay: 1.35s; opacity: 0.55; }
.hero-motif path:nth-child(5) { animation-delay: 1.55s; opacity: 0.7; }
.hero-motif path:nth-child(6) { animation-delay: 1.75s; }
.hero-motif path:nth-child(7) { animation-delay: 1.95s; opacity: 0.5; }
@media (max-width: 1080px) { .hero-motif { display: none; } }

/* ── Scroll reveals ──────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition: opacity 0.85s var(--ease-out), transform 0.85s var(--ease-out);
}
.reveal.is-in { opacity: 1; transform: none; }

/* animated heading underline, drawn as the heading arrives */
.section-head h2 { position: relative; padding-bottom: 14px; margin-bottom: 8px; }
.section-head h2::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 76px; height: 2px;
  background: linear-gradient(90deg, var(--brass), transparent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.95s var(--ease-out) 0.2s;
}
.section-head.is-in h2::after { transform: scaleX(1); }

/* ── Parallax on the large photographs ───────────────────── */
.why-media, .about-media { overflow: hidden; border-radius: var(--radius-lg); }
[data-parallax] { will-change: transform; }

/* ── Refined hover states ────────────────────────────────── */
.cap-card { position: relative; transition: background 0.25s ease, transform 0.4s var(--ease-out), box-shadow 0.4s ease; }
.cap-card::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--brass), var(--brass-2));
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.4s var(--ease-out);
}
.cap-card:hover { transform: translate3d(0, -4px, 0); box-shadow: 0 24px 48px rgba(10, 10, 11, 0.1); }
.cap-card:hover::before { transform: scaleX(1); }
.cap-num { transition: color 0.25s ease; }
.cap-card:hover .cap-num { color: var(--brass); }

.prod-card { transition: transform 0.45s var(--ease-out), border-color 0.35s ease, box-shadow 0.45s ease; }
.prod-card:hover { transform: translate3d(0, -6px, 0); border-color: var(--brass-soft); box-shadow: 0 34px 64px rgba(0, 0, 0, 0.45); }
.prod-media img { transition: transform 0.75s var(--ease-out); }
.prod-card:hover .prod-media img { transform: scale(1.07); }

.job-card { position: relative; transition: background 0.25s ease, transform 0.4s var(--ease-out); }
.job-card:hover { transform: translate3d(0, -3px, 0); }
.job-num { transition: color 0.25s ease; }
.job-card:hover .job-num { color: var(--brass-2); }

.shot { transition: transform 0.4s var(--ease-out), box-shadow 0.4s ease; }
.shot:hover { transform: translate3d(0, -3px, 0); box-shadow: 0 22px 44px rgba(10, 10, 11, 0.3); }
.shot img { transition: transform 0.75s var(--ease-out), opacity 0.35s ease; }
.shot:hover img { transform: scale(1.07); }
.shot::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border: 1px solid transparent;
  border-radius: inherit;
  pointer-events: none;
  transition: border-color 0.3s ease;
}
.shot:hover::before { border-color: var(--brass-soft); }

.steps li { transition: border-color 0.3s ease; }
.steps li:hover { border-color: var(--brass); }
.why-points > div { transition: border-color 0.3s ease; }
.why-points > div:hover { border-color: var(--brass); }
.why-media img, .about-media img { transition: transform 0.9s var(--ease-out); }

/* ── Motion off: the page must read exactly the same, instantly ──
   The universal rule below kills every animation, so each element that
   starts out hidden has to be handed back its finished state here.
   This block must stay last in the file. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .hero-copy .eyebrow,
  .hero .lead,
  .hero-actions,
  .hero-stats,
  .hero-media > img,
  .hero-badge,
  .hero h1 .kh-line-i { opacity: 1 !important; transform: none !important; }
  .hero-motif { opacity: 0.4; }
  .hero-motif path { stroke-dashoffset: 0; }
  .section-head h2::after,
  .dxf-band .dxf-intro h2::after { transform: scaleX(1); }
  [data-parallax] { transform: none !important; }
  .site-header::after { transform: scaleX(0); }
}