:root {
  --ink: #14151a;
  --white: #ffffff;
  --paper: #f5f5f3;
  --paper-dark: #eeeee9;
  --muted: #6c6d76;
  --border: #e3e3de;
  --border-dark: rgba(255, 255, 255, 0.14);

  --navy: #333f83;
  --navy-deep: #232a5c;
  --navy-ink: #1a1f42;
  --blue-light: #8590bb;

  --black: #0c0d10;
  --panel: #16171c;

  /* ---- Premium editorial layer (added for the homepage redesign) ----
     Kept alongside the tokens above rather than replacing them: every
     other page still reads --paper/--navy/--ink for its light/CTA/text
     colors, so swapping those values would silently re-theme all 25
     pages. These new tokens are additive and, for now, consumed only
     by the new homepage sections (hero, zipper seam, Material Index)
     and the header. See the delivery report for the rollout plan. */
  --bone: #f6f1e7;
  --bone-deep: #efe7d8;
  --paper-white: #fdfcfa;
  --graphite: #0f0f10; /* sampled from the dark fabric area of assets/hero/zipper-reveal-hero.png so Material Index has no visible seam beneath it */
  --bronze: #a9895f;
  --bronze-soft: #c7ac82;
  --border-bone: #e4dac4;
  --muted-warm: #6f6a5e;
  --serif: "Cormorant Garamond", "Times New Roman", serif;

  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --max-width: 1240px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--bronze);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 12px;
  z-index: 10000;
  background: var(--navy);
  color: var(--white);
  padding: 12px 20px;
  border-radius: 4px;
  font-size: 0.85rem;
  font-weight: 600;
  transition: top 0.15s ease;
}
.skip-link:focus-visible {
  top: 12px;
}

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

/* ============ Header ============ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  transition: background 0.3s ease, border-color 0.3s ease, backdrop-filter 0.3s ease;
}

/* Homepage only (body.has-hero-header): header starts transparent over
   the bone hero, then picks up a frosted light background + hairline
   border once the page scrolls (initHeaderScroll() in script.js toggles
   .is-scrolled). Every other page keeps the plain solid header above. */
body.has-hero-header .site-header {
  background: transparent;
  border-bottom-color: transparent;
  position: fixed;
  width: 100%;
}
body.has-hero-header .site-header.is-scrolled {
  background: rgba(253, 252, 250, 0.88);
  border-bottom-color: var(--border-bone);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
body.has-hero-header main { padding-top: 84px; }

.lang-switcher {
  display: flex;
  align-items: center;
  gap: 2px;
}
.lang-switcher .lang-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 6px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1.6px;
  color: var(--muted);
}
.lang-switcher a.lang-link:hover,
.lang-switcher a.lang-link:focus-visible {
  color: var(--navy);
}
.lang-switcher .lang-link.is-active {
  color: var(--ink);
}
.lang-switcher .lang-sep {
  color: var(--border);
  font-size: 0.72rem;
}

.main-nav a.is-active-page { color: var(--ink); position: relative; }
.main-nav a.is-active-page::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -22px;
  height: 2px;
  background: var(--bronze);
}

.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 40px;
  gap: 24px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand img { width: 30px; height: 30px; }

.brand .brand-text {
  line-height: 1.15;
}

.brand .brand-main {
  display: block;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--ink);
}

.brand .brand-sub {
  display: block;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 1.6px;
  color: var(--navy);
  text-transform: uppercase;
}

.main-nav { flex: 1; display: flex; justify-content: center; }

.main-nav ul { display: flex; align-items: center; gap: 30px; }

.main-nav a {
  color: var(--ink);
  font-size: 0.84rem;
  font-weight: 500;
  letter-spacing: 0.15px;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: color 0.2s;
}

.main-nav a:hover { color: var(--navy); }

.main-nav .chevron {
  width: 10px;
  height: 10px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

.nav-cta-mobile { display: none; }
.main-nav a.btn-navy { color: var(--white); }

.has-dropdown { position: relative; }

.dropdown {
  position: absolute;
  top: calc(100% + 18px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  min-width: 250px;
  padding: 10px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s, visibility 0.18s;
  box-shadow: 0 20px 40px rgba(20, 21, 26, 0.12);
}

.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown { opacity: 1; visibility: visible; }

.dropdown a {
  display: block;
  padding: 9px 12px;
  border-radius: 5px;
  font-size: 0.86rem;
}

.dropdown a:hover, .dropdown a:focus-visible { background: var(--paper); color: var(--navy); }

.header-actions { display: flex; align-items: center; gap: 16px; }

.lang-switch { display: flex; align-items: center; gap: 2px; border: 1px solid var(--border); border-radius: 20px; padding: 3px; }
.lang-btn {
  border: none; background: none; padding: 4px 10px; border-radius: 16px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.3px; color: var(--muted); cursor: pointer;
}
.lang-btn.is-active { background: var(--navy); color: var(--white); }
.lang-btn:disabled { cursor: default; opacity: 0.45; }
.lang-btn:not(:disabled):not(.is-active):hover { color: var(--navy); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 3px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.4px;
  cursor: pointer;
  transition: transform 0.15s, background 0.15s, color 0.15s, border-color 0.15s;
  border: 1px solid transparent;
  white-space: nowrap;
}
.btn:disabled { opacity: 0.6; cursor: progress; }

.btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }

.btn-navy { background: var(--navy); color: var(--white); }
.btn-navy:hover { background: var(--navy-deep); }

.btn-outline-dark { border-color: rgba(20, 21, 26, 0.28); color: var(--ink); }
.btn-outline-dark:hover { border-color: var(--navy); color: var(--navy); }

.btn-outline-white { border-color: rgba(255, 255, 255, 0.4); color: var(--white); }
.btn-outline-white:hover { border-color: var(--white); }

.btn-block { width: 100%; justify-content: center; }

.btn-whatsapp { background: #25D366; color: #063d1e; }
.btn-whatsapp:hover { background: #1ebe5a; }
.btn-whatsapp svg { width: 16px; height: 16px; }

.menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  margin: -10px -10px -10px 0;
  background: none;
  border: none;
  color: var(--ink);
  font-size: 1.5rem;
}

/* ============ Breadcrumb ============ */
.breadcrumb {
  background: var(--paper);
  padding: 16px 0;
  font-size: 0.82rem;
  color: var(--muted);
}

.breadcrumb a:hover { color: var(--navy); }
.breadcrumb .sep { margin: 0 8px; color: var(--border); }
.breadcrumb .current { color: var(--ink); font-weight: 600; }

/* ============ Section shared ============ */
section { padding: 96px 0; }

.section-head { max-width: 680px; margin: 0 auto 48px; }
.section-head.center { text-align: center; }

.eyebrow {
  display: block;
  color: var(--navy);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.section-head h1,
.section-head h2 {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.3px;
  margin-bottom: 14px;
  color: var(--ink);
}

.section-head p { color: var(--muted); font-size: 1.02rem; }

.on-dark { background: var(--black); color: var(--white); }
.on-dark .section-head h1,
.on-dark .section-head h2 { color: var(--white); }
.on-dark .section-head p { color: #a9aab3; }
.on-dark .eyebrow { color: var(--blue-light); }

.on-navy { background: var(--navy-ink); color: var(--white); }
.on-navy .section-head h1,
.on-navy .section-head h2 { color: var(--white); }
.on-navy .section-head p { color: #c3c8de; }
.on-navy .eyebrow { color: var(--blue-light); }

/* ============ Hero v2 (homepage — editorial/premium system) ============
   Structure: the real hero photo (assets/hero/zipper-reveal-hero.*) sits
   in DOM between the text and specs blocks (so on mobile it naturally
   falls into that visual order — title/paragraph/CTAs, then the photo,
   then the tech specs). On desktop it's pulled out of flow and stretched
   full-bleed behind both columns instead; .hero-v2 (not .hero-v2-inner)
   is the positioned ancestor it's absolutely placed against, so it gets
   the full section's height even though it's nested inside the padded
   .container. */
.hero-v2 {
  position: relative;
  z-index: 0;
  background: var(--bone);
  min-height: 88vh;
  min-height: calc(100svh - 84px);
  padding: 100px 0 0;
}

.hero-v2-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
}

.hero-v2-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center top;
}

@media (min-width: 961px) {
  .hero-v2-media {
    position: absolute;
    inset: 0 0 0 0;
    z-index: 0;
  }
}

.hero-v2-text, .hero-v2-specs { position: relative; z-index: 1; }
.hero-v2-text { max-width: 400px; padding-top: 26px; }
.hero-v2-specs { max-width: 240px; padding-top: 40px; }

.hero-v2-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(2.3rem, 3.6vw, 3.1rem);
  line-height: 1.1;
  letter-spacing: -0.2px;
  color: var(--graphite);
  margin: 18px 0 22px;
}

.hero-v2-lede {
  font-size: 1.04rem;
  color: var(--muted-warm);
  max-width: 38ch;
  margin-bottom: 32px;
}

.btn-graphite { background: var(--graphite); color: var(--white); }
.btn-graphite:hover { background: #000; }

.hero-fact-line {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid var(--border-bone);
}
.hero-fact-line li {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--muted-warm);
  position: relative;
  padding-left: 16px;
}
.hero-fact-line li::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 6px; height: 1px;
  background: var(--bronze);
}

.hero-spec {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border-bone);
}
.hero-spec:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.hero-spec-num {
  font-family: var(--serif);
  font-size: 0.95rem;
  color: var(--bronze);
  flex-shrink: 0;
}
.hero-spec-line { width: 26px; height: 1px; background: var(--border-bone); flex-shrink: 0; }
.hero-spec-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--graphite);
  margin-bottom: 4px;
}
.hero-spec p { font-size: 0.84rem; color: var(--muted-warm); line-height: 1.5; }


/* ============ Material Index (homepage) — horizontal filmstrip ============ */
.material-index { background: var(--graphite); color: var(--white); padding-bottom: 0; margin-top: -1px; }
.material-index .eyebrow { color: var(--bronze-soft); }
.material-index .section-head h1,
.material-index .section-head h2 { color: var(--white); }
.material-index .section-head p { color: #a9ab9b; }
.serif-heading { font-family: var(--serif); font-weight: 600; letter-spacing: -0.2px; }

.material-index-list {
  display: flex;
  border-top: 1px solid var(--border-dark);
}
.material-index-tile {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-right: 1px solid var(--border-dark);
  background: #24262e;
  display: block;
}
.material-index-tile:last-child { border-right: none; }
.material-index-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(.2,.7,.3,1);
}
.material-index-tile:hover img { transform: scale(1.07); }

.material-index-tile-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.material-index-tile-fallback svg { width: 34px; height: 34px; stroke: var(--bronze-soft); fill: none; stroke-width: 1.3; }

.material-index-tile-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,10,12,0.65) 0%, rgba(10,10,12,0.05) 32%, rgba(10,10,12,0.1) 60%, rgba(10,10,12,0.72) 100%);
}

.material-index-tile-head {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 18px 16px;
}
.material-index-tile-name { font-family: var(--serif); font-size: 1.05rem; font-weight: 600; color: var(--white); line-height: 1.2; }
.material-index-tile-num { font-family: var(--serif); font-size: 0.82rem; color: var(--bronze-soft); flex-shrink: 0; padding-left: 8px; }

.material-index-viewall { text-align: center; border-top: 1px solid var(--border-dark); padding: 26px 0; }
.material-index-viewall a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--bronze-soft);
}
.material-index-viewall svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; transition: transform 0.2s ease; }
.material-index-viewall a:hover svg { transform: translateX(4px); }

/* ============ Product grid ============ */
.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.product-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }

.product-tile {
  display: block;
  position: relative;
  aspect-ratio: 4/5;
  border-radius: 6px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(12,13,16,0) 35%, rgba(12,13,16,0.9) 100%),
    repeating-linear-gradient(115deg, #232538 0px, #232538 2px, #1a1c2c 2px, #1a1c2c 16px);
  transition: transform 0.25s;
}

.product-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 28% 22%, rgba(133,144,187,0.35), transparent 55%);
}

.product-tile:hover { transform: translateY(-4px); }
.product-tile.has-photo::before { display: none; }

.tile-icon {
  position: absolute;
  top: 22px;
  left: 22px;
  width: 32px;
  height: 32px;
  fill: none;
  stroke: var(--blue-light);
  stroke-width: 1.4;
}

.tile-label {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--white);
}

.tile-label span { font-size: 0.86rem; font-weight: 600; }

.tile-label svg {
  width: 16px; height: 16px; fill: none; stroke: var(--blue-light); stroke-width: 2;
  transition: transform 0.2s;
}

.product-tile:hover .tile-label svg { transform: translateX(4px); }

.category-card { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.category-card .product-tile { aspect-ratio: 4/3; border-radius: 0; }
.category-card-body { padding: 20px 22px 24px; }
.category-card-body h3 { font-size: 1.05rem; margin-bottom: 8px; }
.category-card-body p { font-size: 0.88rem; color: var(--muted); margin-bottom: 14px; }
.category-card-body a { font-size: 0.85rem; font-weight: 600; color: var(--navy); display: inline-flex; align-items: center; gap: 6px; }
.category-card-body a svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }

.products-note { text-align: center; margin-top: 40px; }
.products-note p { color: var(--muted); font-size: 0.88rem; margin-top: 14px; }

/* ============ Why cards ============ */
.why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.why-card {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--border-dark);
  border-radius: 8px;
  padding: 28px 24px;
}

.on-dark .why-card, .on-navy .why-card {
  background: rgba(255, 255, 255, 0.045);
}

.why-card svg { width: 28px; height: 28px; fill: none; stroke: var(--blue-light); stroke-width: 1.5; margin-bottom: 16px; }
.why-card h3 { font-size: 1rem; margin-bottom: 8px; font-weight: 600; }
.why-card p { font-size: 0.87rem; color: #b7b8c2; }

.why-grid.on-light .why-card { background: var(--paper); border-color: var(--border); }
.why-grid.on-light .why-card svg { stroke: var(--navy); }
.why-grid.on-light .why-card p { color: var(--muted); }

/* ============ CTA banner ============ */
.cta-banner {
  background: var(--navy);
  color: var(--white);
  padding: 64px 0;
  text-align: center;
}

.cta-banner h2 { font-size: 1.7rem; margin-bottom: 12px; }
.cta-banner p { color: #cfd3e6; margin-bottom: 28px; max-width: 520px; margin-left: auto; margin-right: auto; }
.cta-banner .hero-cta { justify-content: center; }
.cta-banner-graphite { background: var(--graphite); }
.cta-banner-graphite p { color: #b9bab0; }

/* ============ Homepage bone sections + Custom Specification ============ */
.bone-section { background: var(--bone); }
.bone-section .eyebrow { color: var(--bronze); }

.custom-spec-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 64px;
  align-items: center;
}
.section-lede { color: var(--muted-warm); font-size: 1rem; max-width: 46ch; margin: -8px 0 28px; }

.custom-spec-fields { border-top: 1px solid var(--border-bone); }
.custom-spec-fields li {
  padding: 16px 0;
  border-bottom: 1px solid var(--border-bone);
  font-size: 0.92rem;
  color: var(--graphite);
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.custom-spec-fields li span {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--bronze);
  flex-shrink: 0;
  padding-top: 2px;
}

/* ============ Category hero / spec block ============ */
.category-hero {
  background: var(--paper);
  padding: 56px 0;
}

.category-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

.category-hero h1 { font-size: 2.3rem; font-weight: 700; margin-bottom: 16px; }
.category-hero p { color: var(--muted); font-size: 1.02rem; margin-bottom: 26px; }

.category-visual {
  aspect-ratio: 4/3;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(12,13,16,0.05) 0%, rgba(12,13,16,0.55) 100%),
    repeating-linear-gradient(115deg, #232538 0px, #232538 2px, #1a1c2c 2px, #1a1c2c 16px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.category-visual svg { width: 70px; height: 70px; fill: none; stroke: var(--blue-light); stroke-width: 1.2; }

.category-visual.has-photo { background: none; padding: 0; }
.category-visual.has-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }

/* ============ Finish gallery (real product photography) ============ */
.finish-gallery {
  margin-top: 36px;
}

.finish-gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.finish-group + .finish-group {
  margin-top: 36px;
}

.finish-group-title {
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--navy);
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

.finish-card {
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--white);
}

.finish-card img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
}

.finish-card figcaption {
  padding: 10px 12px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink);
  text-align: center;
}

.spec-block {
  background: var(--white);
}

.spec-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.spec-table tr { border-bottom: 1px solid var(--border); }
.spec-table tr:last-child { border-bottom: none; }

.spec-table th, .spec-table td {
  text-align: left;
  padding: 16px 22px;
  font-size: 0.92rem;
}

.spec-table th {
  width: 220px;
  color: var(--ink);
  font-weight: 600;
  background: var(--paper);
}

.spec-table td { color: var(--muted); }

.spec-note {
  margin-top: 18px;
  font-size: 0.86rem;
  color: var(--muted);
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.spec-note svg { width: 16px; height: 16px; stroke: var(--navy); fill: none; stroke-width: 2; flex-shrink: 0; margin-top: 2px; }

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 36px;
}

.gallery-tile {
  aspect-ratio: 1/1;
  border-radius: 6px;
  background:
    linear-gradient(160deg, rgba(133,144,187,0.18), rgba(12,13,16,0.04)),
    repeating-linear-gradient(115deg, #ececea 0px, #ececea 2px, #e4e4e0 2px, #e4e4e0 16px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.gallery-tile svg { width: 34px; height: 34px; stroke: var(--navy); fill: none; stroke-width: 1.3; opacity: 0.55; }

/* ============ Two-column content blocks ============ */
.split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}

.split-grid.reverse .split-visual { order: -1; }

/* Zipper Production video section (production.html) — text left, vertical
   video right on desktop; text stays first, video second on mobile
   (no reorder rule, unlike .split-grid/.split-visual elsewhere). */
.production-video-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: center;
}
.production-caps-head { font-size: 1rem; font-weight: 700; margin: 26px 0 14px; color: var(--ink); }

.production-video-frame {
  max-width: 340px;
  margin: 0 auto;
}
.production-video-frame video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid var(--border);
  box-shadow: 0 20px 40px -22px rgba(20, 20, 25, 0.4);
  background: #101119;
}
.production-video-caption {
  text-align: center;
  font-size: 0.76rem;
  color: var(--muted);
  margin-top: 12px;
}

.split-text .eyebrow { color: var(--navy); }
.split-text h1,
.split-text h2 { font-size: 2rem; font-weight: 700; margin-bottom: 18px; }
.split-text p { color: var(--muted); margin-bottom: 16px; }

.split-visual {
  aspect-ratio: 4/3.2;
  border-radius: 10px;
  background: var(--navy-ink);
  display: flex;
  align-items: center;
  justify-content: center;
}

.split-visual svg { width: 45%; stroke: var(--blue-light); fill: none; stroke-width: 1.1; }

/* Homepage "About Dicle Fermuar" teaser — real supply-network map image,
   scoped separately from .split-visual (shared by every other category/
   solutions page's icon box) so this swap doesn't touch those pages. */
.home-about-media {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 10px;
  background: var(--navy-ink);
}
.home-about-media picture,
.home-about-media img {
  width: 100%;
  height: 100%;
  display: block;
}
.home-about-media img {
  object-fit: cover;
  object-position: center;
}

/* About page — the two "About Dicle Fermuar" / "Our Background" split-visual
   icon boxes, swapped for real photography. Scoped separately from
   .split-visual (shared by every other page's icon boxes) so this doesn't
   touch them. */
.about-heritage-media {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 10px;
  background: var(--bone-deep);
}
.about-heritage-media picture,
.about-heritage-media img {
  width: 100%;
  height: 100%;
  display: block;
}
.about-heritage-media img {
  object-fit: cover;
  object-position: center;
}

.check-list li {
  display: flex;
  gap: 12px;
  padding: 11px 0;
  font-size: 0.95rem;
  border-top: 1px solid var(--border);
}

.check-list li:first-child { border-top: none; }

.loc-chip-row { display: flex; gap: 14px; margin-top: 26px; flex-wrap: wrap; }

.loc-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border);
  background: var(--white);
  padding: 10px 16px;
  border-radius: 30px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink);
}

.loc-chip svg { width: 16px; height: 16px; stroke: var(--navy); fill: none; stroke-width: 2; }

.check-list svg { width: 18px; height: 18px; stroke: var(--navy); fill: none; stroke-width: 2; flex-shrink: 0; margin-top: 2px; }

/* ============ Process steps (quality) ============ */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  counter-reset: step;
}

.step-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 28px 22px;
  position: relative;
}

.step-card .step-num {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: 1px;
  margin-bottom: 14px;
  display: block;
}

.step-card h3 { font-size: 1rem; margin-bottom: 8px; }
.step-card p { font-size: 0.88rem; color: var(--muted); }

/* ============ Info / callout box ============ */
.callout-box {
  border: 1px solid var(--border);
  background: var(--paper);
  border-radius: 8px;
  padding: 24px 26px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.callout-box svg { width: 22px; height: 22px; stroke: var(--navy); fill: none; stroke-width: 1.6; flex-shrink: 0; margin-top: 2px; }
.callout-box p { font-size: 0.92rem; color: var(--ink); }
.callout-box strong { color: var(--navy); }

/* ============ Contact / Quote forms ============ */
.contact-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 56px;
}

.contact-info .info-block { margin-bottom: 28px; }

.contact-info h3 {
  font-size: 1.02rem;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 9px;
}

.contact-info h3 svg { width: 18px; height: 18px; stroke: var(--navy); fill: none; stroke-width: 2; }
.contact-info h3 svg.icon-fill { fill: var(--navy); stroke: none; }
.contact-info p, .contact-info a { color: var(--muted); font-size: 0.95rem; display: block; }
.contact-info a:hover { color: var(--navy); }
.contact-info a + a { margin-top: 4px; }
.contact-info p + p { margin-top: 4px; }

.contact-info .directions-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  font-weight: 600;
  color: var(--navy);
}
.directions-link svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.2; }

.form-panel {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 34px;
}

.form-row { margin-bottom: 18px; }
.form-row.two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-row.three { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }

.form-row label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 7px;
}

.form-row input, .form-row select, .form-row textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 5px;
  font-family: inherit;
  font-size: 0.94rem;
  background: var(--white);
}

.form-row input:focus, .form-row select:focus, .form-row textarea:focus {
  outline: 2px solid var(--navy);
  outline-offset: 1px;
}

.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.checkbox-grid label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--border);
  padding: 10px 12px;
  border-radius: 5px;
}

.checkbox-grid input { width: auto; }

.form-note { font-size: 0.8rem; color: var(--muted); margin-top: 12px; }

.form-success {
  display: none;
  margin-top: 16px;
  padding: 12px 14px;
  background: #eaf0e9;
  color: #2c5a34;
  border-radius: 6px;
  font-size: 0.88rem;
}
.form-success.show { display: block; }

/* ============ Quote page hero ============ */
.quote-hero {
  background: var(--navy-ink);
  color: var(--white);
  padding: 64px 0 48px;
  text-align: center;
}

.quote-hero h1 { font-size: 2.2rem; margin-bottom: 12px; }
.quote-hero p { color: #c3c8de; max-width: 560px; margin: 0 auto; }

/* ============ Footer ============ */
.site-footer { background: var(--black); color: #96969f; padding: 54px 0 26px; }

.footer-grid { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 30px; margin-bottom: 32px; }

.footer-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.footer-brand img { width: 26px; height: 26px; }
.footer-brand span { font-weight: 700; color: var(--white); font-size: 1.05rem; }

.footer-grid > div:first-child { max-width: 320px; }
.footer-grid p { font-size: 0.85rem; line-height: 1.7; }

.footer-cols { display: flex; gap: 56px; flex-wrap: wrap; }

.footer-col h4 {
  color: var(--white);
  font-size: 0.78rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.footer-col li { margin-bottom: 9px; font-size: 0.86rem; }
.footer-col a:hover { color: var(--blue-light); }

.footer-bottom {
  border-top: 1px solid var(--border-dark);
  padding-top: 20px;
  font-size: 0.78rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

/* ============ CTA tile (Design Your Own Zipper) ============ */
.cta-tile {
  background: linear-gradient(155deg, var(--navy-ink), var(--navy) 65%, var(--blue-light));
}
.cta-tile::before { content: none; }
.cta-tile .tile-icon { stroke: var(--white); }

.cta-tile-badge {
  position: absolute;
  top: 20px;
  right: 20px;
  background: var(--white);
  color: var(--navy);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 20px;
  z-index: 2;
}

.cta-tile-body {
  position: absolute;
  left: 22px;
  right: 22px;
  top: 68px;
}
.cta-tile-body h3 { color: var(--white); font-size: 1.08rem; margin-bottom: 8px; }
.cta-tile-body p { color: #c3c8de; font-size: 0.85rem; line-height: 1.5; }

/* ============ Zipper configurator ============ */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Configurator choice controls: input is an invisible full-cover overlay on
   its label, so the whole card/swatch/pill is one large click target. */
.option-card, .color-swatch, .choice-pill { position: relative; }

.option-card input,
.color-swatch input,
.choice-pill input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.configurator-layout {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 48px;
  align-items: start;
}

.config-step { padding: 28px 0; border-bottom: 1px solid var(--border); }
.config-step:first-child { padding-top: 0; }
.config-step:last-child { border-bottom: none; }

.config-step-head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }

.step-num-badge {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  font-size: 0.76rem;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.config-step h3 { font-size: 1.05rem; font-weight: 700; color: var(--ink); }
.config-step > p.step-desc { color: var(--muted); font-size: 0.88rem; margin: 4px 0 18px 38px; }

.option-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

.option-card {
  position: relative;
  display: block;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 16px 16px 14px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
  background: var(--white);
}

.option-card:hover { border-color: var(--blue-light); transform: translateY(-2px); }

.option-card:has(input:checked) {
  border-color: var(--navy);
  background: #f3f4fa;
  box-shadow: 0 0 0 1px var(--navy);
}

.option-card:has(input:focus-visible) { outline: 2px solid var(--navy); outline-offset: 2px; }

.option-card .oc-icon { width: 26px; height: 26px; stroke: var(--navy); fill: none; stroke-width: 1.5; margin-bottom: 10px; }
.option-card .oc-title { display: block; font-size: 0.92rem; font-weight: 700; color: var(--ink); margin-bottom: 3px; }
.option-card .oc-desc { display: block; font-size: 0.78rem; color: var(--muted); line-height: 1.4; }

.swatch-grid { display: flex; flex-wrap: wrap; gap: 16px; }

.color-swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  width: 68px;
  text-align: center;
}

.swatch-circle {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(20,21,26,0.15);
  box-shadow: 0 0 0 2px var(--white), 0 0 0 2px var(--white);
  transition: box-shadow 0.15s;
}

.color-swatch:has(input:checked) .swatch-circle {
  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--navy);
}

.color-swatch:has(input:focus-visible) .swatch-circle { outline: 2px solid var(--navy); outline-offset: 2px; }

.color-swatch span.sw-label { font-size: 0.72rem; color: var(--muted); font-weight: 500; }

.color-swatch.custom-swatch .swatch-circle {
  background: conic-gradient(from 180deg, #f4a3a3, #f4d9a3, #a3f4b8, #a3d9f4, #c3a3f4, #f4a3d9, #f4a3a3);
  display: flex; align-items: center; justify-content: center;
}

.custom-color-row {
  margin-top: 14px;
  max-width: 320px;
  display: none;
}
.custom-color-row.show { display: block; }
.custom-color-row input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 5px;
  font-family: inherit;
  font-size: 0.88rem;
}

.choice-pill-row { display: flex; flex-wrap: wrap; gap: 10px; }

.choice-pill {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  border: 1.5px solid var(--border);
  border-radius: 30px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
  background: var(--white);
}

.choice-pill:hover { border-color: var(--blue-light); }

.choice-pill:has(input:checked) {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}

.choice-pill:has(input:focus-visible) { outline: 2px solid var(--navy); outline-offset: 2px; }

.length-row { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }

.length-custom-field {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1.5px solid var(--border);
  border-radius: 30px;
  padding: 4px 6px 4px 16px;
}

.length-custom-field input {
  width: 64px;
  border: none;
  font-size: 0.86rem;
  font-weight: 600;
  font-family: inherit;
  padding: 6px 0;
}
.length-custom-field input:focus { outline: none; }
.length-custom-field span { font-size: 0.8rem; color: var(--muted); font-weight: 600; padding-right: 6px; }

.puller-note {
  margin-top: 14px;
  display: none;
}
.puller-note.show { display: block; }

.puller-note textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 5px;
  font-family: inherit;
  font-size: 0.88rem;
  margin-top: 10px;
}

.logo-upload-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }

.logo-upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1.5px dashed var(--blue-light);
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.logo-upload-btn:hover { border-color: var(--navy); background: #f3f4fa; }
.logo-upload-btn svg { width: 15px; height: 15px; stroke: var(--navy); fill: none; stroke-width: 1.8; }

input.visually-hidden-input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.logo-upload-name { font-size: 0.78rem; color: var(--muted); font-weight: 500; }

.file-upload-field { margin-top: 14px; }

.file-upload-hint { font-size: 0.76rem; color: var(--muted); margin: 8px 0 0; line-height: 1.5; }

.file-preview-card {
  display: none;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--paper);
}
.file-preview-card.show { display: flex; }

.file-preview-thumb {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  object-fit: cover;
  background: #e8e9f0;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.file-preview-thumb svg { width: 18px; height: 18px; stroke: var(--navy); fill: none; stroke-width: 1.6; }

.file-preview-info { flex: 1; min-width: 0; }
.file-preview-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-preview-remove {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--navy);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
  flex-shrink: 0;
}

/* Live preview */
.preview-panel {
  position: sticky;
  top: 96px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 26px;
}

.preview-panel .preview-eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 16px;
  display: block;
}

.zc-stage {
  background: #fafaf8;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

/* Photorealistic live preview: real product photography stacked as
   crossfading layers (see initZipperPhotoPreview() in script.js and
   the asset manifest in configurator-assets.js). No SVG, no drawing.
   object-fit: contain — the 3 master photos are portrait, the older
   finish macros are landscape; contain never crops or stretches
   either, it just letterboxes into the frame's own off-white. */
.zc-photo-frame {
  position: relative;
  width: 100%;
  max-width: 480px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  border-radius: 8px;
  overflow: hidden;
  background: #fbfbfa;
  box-shadow: 0 18px 30px -14px rgba(20, 20, 25, 0.22);
}

.zc-photo-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  opacity: 0;
  transition: opacity 180ms ease;
}
.zc-photo-layer.is-visible { opacity: 1; }

/* Tier-2 tape-color fallback (see resolvePreviewAssets): hue-preserving
   tint over a real photo, only applied when it will look right. */
.zc-tint-overlay {
  position: absolute;
  inset: 0;
  mix-blend-mode: color;
  opacity: 0.55;
  pointer-events: none;
}

/* Slider overlay: each of the 4 real slider+puller photos (see
   configurator-assets.js -> ZIPPER_SLIDER_OVERLAYS) is a complete,
   pre-aligned hardware shot dropped at this ONE fixed anchor point.
   Swapping the selection only changes which photo sits here — the
   base zipper photo underneath never reloads or moves. */
.zc-slider-overlay {
  position: absolute;
  top: 6%;
  left: 50%;
  transform: translateX(-50%);
  width: 34%;
  aspect-ratio: 1 / 1;
  pointer-events: none;
}

.zc-slider-overlay-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: top center;
  opacity: 0;
  transition: opacity 180ms ease;
  filter: drop-shadow(0 6px 10px rgba(20, 20, 25, 0.28));
}
.zc-slider-overlay-layer.is-visible { opacity: 1; }

.zc-length-label {
  margin-top: 18px;
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-align: center;
}

.zc-disclaimer {
  font-size: 0.72rem;
  color: var(--muted);
  line-height: 1.5;
  text-align: center;
  margin-top: 10px;
}

.zc-custom-note {
  font-size: 0.78rem;
  color: var(--navy);
  font-weight: 600;
  text-align: center;
  margin-top: 10px;
}

.preview-summary { margin-top: 22px; border-top: 1px solid var(--border); padding-top: 16px; }

.ps-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.85rem;
  padding: 7px 0;
}
.ps-row span:first-child { color: var(--muted); flex-shrink: 0; }
.ps-row span:last-child { font-weight: 600; color: var(--ink); text-align: right; }

.preview-cta { margin-top: 18px; }
.preview-note { font-size: 0.76rem; color: var(--muted); margin-top: 10px; text-align: center; }

.zq-input {
  width: 100%;
  max-width: 320px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 5px;
  font-family: inherit;
  font-size: 0.88rem;
}

/* ============ Industry / solutions cards ============ */
.industry-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}

.industry-card {
  display: block;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 26px 22px;
  background: var(--white);
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.industry-card:hover { border-color: var(--navy); transform: translateY(-3px); box-shadow: 0 10px 24px rgba(20,21,26,0.08); }
.industry-card .tile-icon { position: static; width: 26px; height: 26px; stroke: var(--navy); margin-bottom: 16px; }
.industry-card h3 { font-size: 1rem; font-weight: 700; margin-bottom: 8px; color: var(--ink); }
.industry-card p { font-size: 0.86rem; color: var(--muted); margin-bottom: 16px; line-height: 1.5; }
.industry-card-link { font-size: 0.82rem; font-weight: 600; color: var(--navy); display: inline-flex; align-items: center; gap: 6px; }
.industry-card-link svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; transition: transform 0.2s; }
.industry-card:hover .industry-card-link svg { transform: translateX(3px); }

.on-navy .industry-card, .on-dark .industry-card { background: rgba(255,255,255,0.04); border-color: var(--border-dark); }
.on-navy .industry-card h3, .on-dark .industry-card h3 { color: var(--white); }
.on-navy .industry-card p, .on-dark .industry-card p { color: #b7bcd6; }
.on-navy .industry-card .tile-icon, .on-dark .industry-card .tile-icon { stroke: var(--blue-light); }

/* ============ Process timeline ============ */
.process-timeline {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  position: relative;
}
.process-timeline::before {
  content: "";
  position: absolute;
  top: 17px;
  left: 8.3%;
  right: 8.3%;
  height: 1px;
  background: var(--border);
  z-index: 0;
}
.process-step { position: relative; padding-top: 50px; }
.process-num {
  position: absolute;
  top: 0; left: 0;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.78rem; font-weight: 700;
  z-index: 1;
}
.process-step h3 { font-size: 0.92rem; font-weight: 700; margin-bottom: 6px; color: var(--ink); }
.process-step p { font-size: 0.8rem; color: var(--muted); line-height: 1.5; }

.on-navy .process-timeline::before, .on-dark .process-timeline::before { background: var(--border-dark); }
.on-navy .process-step h3, .on-dark .process-step h3 { color: var(--white); }
.on-navy .process-step p, .on-dark .process-step p { color: #b7bcd6; }
.on-navy .process-num, .on-dark .process-num { background: var(--blue-light); color: var(--navy-ink); }

/* ============ Netlify form status + spam guard ============ */
.form-status {
  display: none;
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 6px;
  font-size: 0.85rem;
  line-height: 1.5;
}
.form-status.is-success { display: block; background: #eaf7ee; border: 1px solid #b7ddc2; color: #205c34; }
.form-status.is-error { display: block; background: #fbeceb; border: 1px solid #e5b7b3; color: #7a2a1f; }

.form-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-file-error { display: none; font-size: 0.8rem; color: #a02f24; margin-top: 6px; }
.form-file-error.is-visible { display: block; }

/* ============ Footer legal row ============ */
.footer-legal { display: flex; gap: 18px; flex-wrap: wrap; }
.footer-legal a:hover { color: var(--blue-light); }

/* ============ Legal pages ============ */
.legal-content { max-width: 720px; margin: 0 auto; }
.legal-content h1 { font-size: 1.7rem; margin: 0 0 14px; }
.legal-content h2 { font-size: 1.7rem; margin: 40px 0 14px; }
.legal-content h2:first-child { margin-top: 0; }
.legal-content p { color: var(--muted); margin-bottom: 14px; line-height: 1.7; }
.legal-content .legal-updated { color: var(--muted); font-size: 0.85rem; margin-bottom: 32px; }

/* ============ Responsive ============ */
/* The header WhatsApp slot only ever renders content once
   COMPANY_CONFIG.showWhatsapp is true (see renderWhatsAppButton() in
   script.js) — hide it a bit before the full nav + both header buttons
   stop fitting on one line, so it doesn't force horizontal overflow. */
@media (max-width: 1150px) {
  [data-whatsapp-slot] { display: none; }
  .main-nav ul { gap: 20px; }
}

@media (max-width: 1080px) {
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .steps-grid { grid-template-columns: repeat(2, 1fr); }
  .industry-grid { grid-template-columns: repeat(3, 1fr); }
  .process-timeline { grid-template-columns: repeat(3, 1fr); gap: 24px 6px; }
  .process-timeline::before { display: none; }
}

@media (max-width: 960px) {
  .product-grid, .product-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
  .split-grid, .contact-grid, .category-hero-grid, .configurator-layout { grid-template-columns: 1fr; }
  .split-visual { order: -1; }
  .production-video-grid { grid-template-columns: 1fr; gap: 32px; }
  .custom-spec-grid { grid-template-columns: 1fr; gap: 36px; }
  .production-video-frame { max-width: 280px; }
  .preview-panel { position: static; }
  .hero-v2 { min-height: 0; }
  .hero-v2-inner { flex-direction: column; gap: 40px; }
  .hero-v2-text, .hero-v2-specs { max-width: none; padding-top: 0; }
  .hero-v2-specs { display: flex; flex-direction: row; flex-wrap: wrap; gap: 20px 32px; }
  .hero-spec { flex: 1 1 220px; border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
  .hero-v2-media {
    width: 100%;
    height: 46vh;
    min-height: 300px;
    border-radius: 4px;
    overflow: hidden;
  }
  .hero-v2-media img { object-position: center 15%; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .finish-gallery-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 800px) {
  .main-nav {
    position: fixed;
    top: 66px;
    left: 0;
    right: 0;
    background: var(--white);
    border-bottom: 1px solid var(--border);
    flex-direction: column;
    padding: 10px 24px 26px;
    transform: translateY(-150%);
    transition: transform 0.25s ease;
    z-index: 150;
  }
  .main-nav.open { transform: translateY(0); }
  .main-nav ul { flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; }
  .main-nav a { padding: 12px 0; width: 100%; }
  .dropdown {
    position: static; transform: none; opacity: 1; visibility: visible;
    display: none; box-shadow: none; border: none; background: var(--paper); margin-top: 4px;
  }
  .has-dropdown.open .dropdown { display: block; }
  .menu-toggle { display: flex; }
  .header-actions .btn { display: none; }
  .nav-cta-mobile { display: block !important; margin-top: 14px; }
  .container { padding: 0 22px; }
  .nav-wrap { padding: 14px 22px; }
  body.has-hero-header main { padding-top: 68px; }
  .hero-v2 { padding-top: 52px; }
  .hero-v2-title { max-width: none; }
  .hero-v2-lede { max-width: none; }
  .hero-v2-media { height: 40vh; min-height: 260px; }
  .material-index-list { flex-direction: column; }
  .material-index-tile { aspect-ratio: auto; min-height: 170px; border-right: none; border-bottom: 1px solid var(--border-dark); }
  .material-index-tile:last-child { border-bottom: none; }
  .material-index-tile-name { font-size: 1.3rem; }
  .product-grid, .product-grid.cols-4 { grid-template-columns: 1fr; }
  .why-grid { grid-template-columns: 1fr; }
  .steps-grid { grid-template-columns: 1fr; }
  .form-row.two, .form-row.three { grid-template-columns: 1fr; }
  .checkbox-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .gallery-grid { grid-template-columns: 1fr; }
  .industry-grid { grid-template-columns: 1fr; }
  .process-timeline { grid-template-columns: 1fr; gap: 20px; }
  .finish-gallery-grid { grid-template-columns: repeat(2, 1fr); }
  section { padding: 60px 0; }
}