/* ================================================================
   DiaRAG Packaging Solutions — style.css
   Aesthetic: Swiss B2B editorial  |  Stack: Plain CSS3, no framework
   Fonts: Plus Jakarta Sans (display/headings, self-hosted), Inter (body, self-hosted)
================================================================ */

/* ── 0. SELF-HOSTED DISPLAY FONT (Plus Jakarta Sans) ────────── */
/* cyrillic-ext */
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/fonts/pjs-0.woff2') format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
/* vietnamese */
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/fonts/pjs-1.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
/* latin-ext */
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/fonts/pjs-2.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* latin */
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/fonts/pjs-3.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('assets/fonts/pjs-0.woff2') format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('assets/fonts/pjs-1.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('assets/fonts/pjs-2.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('assets/fonts/pjs-3.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('assets/fonts/pjs-0.woff2') format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('assets/fonts/pjs-1.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('assets/fonts/pjs-2.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('assets/fonts/pjs-3.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('assets/fonts/pjs-0.woff2') format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('assets/fonts/pjs-1.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('assets/fonts/pjs-2.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('assets/fonts/pjs-3.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 800; font-display: swap; src: url('assets/fonts/pjs-0.woff2') format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 800; font-display: swap; src: url('assets/fonts/pjs-1.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 800; font-display: swap; src: url('assets/fonts/pjs-2.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 800; font-display: swap; src: url('assets/fonts/pjs-3.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ── 0b. SELF-HOSTED BODY FONT (Inter) ──────────────────────── */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('assets/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── 1. DESIGN TOKENS ──────────────────────────────────────── */
:root {
  /* Colors */
  --color-ink:       #1A1A1A;
  --color-paper:     #FAFAF8;
  --color-gray-100:  #F2F0EC;
  --color-gray-300:  #D4D0C8;
  --color-gray-500:  #8A8880;
  --color-muted:     #6B6860;
  --color-border:    #E8E4DC;
  --color-red:       #CC1117;
  --color-red-dark:  #A50D12;
  --color-white:     #FFFFFF;

  /* Semantic state colors */
  --color-success:        #16A34A;
  --color-success-bg:     #F0FDF4;
  --color-success-border: #BBF7D0;
  --color-error:          #DC2626;
  --color-error-bg:       #FEF2F2;
  --color-warning:        #F59E0B;
  --color-navy:           #1C3A5E;
  --color-navy-bg:        #EFF6FF;

  /* Kraft / cardboard palette */
  --color-kraft:          #E8D5B7;
  --color-kraft-mid:      #C4A97A;
  --color-kraft-dark:     #8B6914;
  --color-kraft-bg:       #FEF9EE;
  --color-coal:           #1E1B16;
  --color-bone:           #F7F3EC;

  /* Typography */
  --font-display:   'Plus Jakarta Sans', system-ui, sans-serif;
  --font-heading:   'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body:      'Inter', system-ui, sans-serif;
  --font-editorial: 'Georgia', serif;

  /* Spacing (8px base unit) */
  --sp-1:  8px;
  --sp-2:  16px;
  --sp-3:  24px;
  --sp-4:  32px;
  --sp-5:  40px;
  --sp-6:  48px;
  --sp-7:  56px;
  --sp-8:  64px;
  --sp-10: 80px;
  --sp-12: 100px;
  --sp-15: 120px;

  /* Border radius */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:  12px;
  --r-xl:  16px;
  --r-full: 9999px;

  /* Section fold overlay — used for the diagonal clip-path shadow */
  --color-fold: rgba(0, 0, 0, 0.06);

  /* Easing curves */
  --ease-out-expo:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-card:         cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-spring:       cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Transitions — pair duration with the right curve */
  --t-fast:  150ms var(--ease-out-expo);
  --t-base:  200ms var(--ease-out-expo);
  --t-slow:  500ms var(--ease-out-expo);
  --t-modal: 250ms var(--ease-in-out-quart);

  /* Nav */
  --nav-height: 68px;

  /* Shadows */
  --shadow-nav:       0 2px 16px rgba(0, 0, 0, 0.06);
  --shadow-card:      0 1px 4px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.06);
  --shadow-modal:     0 8px 40px rgba(0, 0, 0, 0.12);
  --shadow-float:     0 4px 20px rgba(204, 17, 23, 0.35);
  --shadow-btn:       0 1px 2px rgba(0,0,0,0.12), 0 2px 8px rgba(204,17,23,0.18);
  --shadow-btn-hover: 0 2px 4px rgba(0,0,0,0.14), 0 4px 16px rgba(204,17,23,0.28);
}

/* ── 2. RESET & BASE ────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  color-scheme: light;
  accent-color: var(--color-red);
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1rem;
  background: var(--color-paper);
  color: var(--color-ink);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

/* ── 3. ACCESSIBILITY ───────────────────────────────────────── */

/* Reduced-motion: zero out all transitions and animations */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Anchor offset — var(--nav-height) 68px + var(--sp-2) 16px breathing room */
section[id],
div[id="contatto"],
div[id="come-funziona"] {
  scroll-margin-top: calc(var(--nav-height) + var(--sp-2));
}

/* Global focus-visible ring — sharp, brand-coloured, never layout-shifting */
:focus-visible {
  outline: 2px solid var(--color-red);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

.skip-link {
  position: absolute;
  top: var(--sp-2);
  left: var(--sp-3);
  background: var(--color-red);
  color: var(--color-white);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  font-weight: 600;
  font-size: 0.875rem;
  z-index: 9999;
  transform: translateY(-200%);
  transition: transform var(--t-base);
  text-decoration: none;
}
.skip-link:focus { transform: translateY(0); }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

[hidden] { display: none !important; }

/* ── 4. LAYOUT ──────────────────────────────────────────────── */
.container {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: clamp(var(--sp-3), 4vw, var(--sp-5));
}

.section { padding-block: clamp(var(--sp-8), 8vw, var(--sp-12)); }

.section--alt { background: var(--color-white); }

.section:not(.why) > .container::before {
  content: '';
  display: block;
  height: 1px;
  background: var(--color-border);
  margin-bottom: var(--sp-6);
}

.section__header {
  text-align: left;
  max-width: none;
  margin-inline: 0;
  margin-bottom: clamp(var(--sp-6), 5vw, var(--sp-10));
}

.section__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-muted);
  margin-bottom: var(--sp-2);
}
.section__eyebrow::before {
  content: '';
  display: block;
  width: 2px;
  height: 20px;
  background: var(--color-red);
  border-radius: 1px;
  flex-shrink: 0;
}

.section__title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  line-height: 1.15;
  margin-bottom: var(--sp-3);
}

.section__sub {
  font-size: 0.9375rem;
  color: var(--color-muted);
  line-height: 1.7;
  max-width: 56ch;
  margin-inline: 0;
}

.section__header--products {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-8);
  align-items: end;
  margin-bottom: var(--sp-8);
}
.section__header-right {
  border-left: 1px solid var(--color-border);
  padding-left: var(--sp-8);
  padding-bottom: 4px;
}
@media (max-width: 680px) {
  .section__header--products { grid-template-columns: 1fr; gap: var(--sp-4); }
  .section__header-right { border-left: none; padding-left: 0; border-top: 1px solid var(--color-border); padding-top: var(--sp-3); }
}

/* ── 5. BUTTONS ─────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9375rem;
  border-radius: var(--r-sm);
  padding: 12px var(--sp-3);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast),
              border-color var(--t-fast), opacity var(--t-fast),
              box-shadow var(--t-fast), transform var(--t-fast);
  line-height: 1;
}

.btn:focus-visible {
  outline: 2px solid var(--color-red);
  outline-offset: 3px;
}

.btn--primary {
  background: var(--color-red);
  color: var(--color-white);
  border-color: var(--color-red);
  box-shadow: var(--shadow-btn);
}
.btn--primary:hover {
  background: var(--color-red-dark);
  border-color: var(--color-red-dark);
  box-shadow: var(--shadow-btn-hover);
  transform: translateY(-1px);
}

.btn--secondary { background: transparent; color: var(--color-white); border-color: rgba(255,255,255,0.3); }
.btn--secondary:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.5); }

.btn--ghost { background: transparent; color: var(--color-ink); border-color: var(--color-border); }
.btn--ghost:hover { background: var(--color-gray-100); }

.btn--sm   { font-size: 0.8125rem; padding: 9px 18px; letter-spacing: 0.02em; }
.btn--lg   { padding: var(--sp-2) var(--sp-4); font-size: 1rem; }
.btn--full { width: 100%; }

/* ── 6. NAVIGATION ──────────────────────────────────────────── */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid var(--color-border);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  transition: box-shadow var(--t-base), background var(--t-base);
}
.nav.scrolled {
  box-shadow: var(--shadow-nav);
  background: rgba(255, 255, 255, 0.97);
}

.nav__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "logo links actions";
  align-items: center;
  height: var(--nav-height);
}

.nav__logo { grid-area: logo; text-decoration: none; line-height: 0; }
.nav__logo img { height: 44px; width: auto; display: block; }

.nav__links {
  grid-area: links;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  padding: 0;
}

.nav__link {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-muted);
  text-decoration: none;
  position: relative;
  padding-bottom: 2px;
  letter-spacing: 0.01em;
  transition: color var(--t-base);
}
.nav__link::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 100%; height: 1px;
  background: var(--color-red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-base);
}
.nav__link:hover        { color: var(--color-ink); }
.nav__link:hover::after { transform: scaleX(1); }
.nav__link.active       { color: var(--color-ink); }
.nav__link.active::after { transform: scaleX(1); }

.nav__actions {
  grid-area: actions;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.lang-switcher { display: flex; align-items: center; gap: 0; }
.lang-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--color-muted);
  padding: 3px 5px;
  border-radius: 0;
  transition: color var(--t-fast);
}
.lang-btn.active { color: var(--color-ink); font-weight: 700; }
.lang-btn:hover  { color: var(--color-ink); }

.lang-sep {
  color: var(--color-muted);
  font-size: 0.75rem;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

.nav__hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--sp-1);
  margin-left: auto;
  z-index: 1100;
}
.nav__hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-ink);
  border-radius: 1px;
  transition: transform var(--t-base), opacity var(--t-base), background var(--t-base);
}

@media (max-width: 900px) {
  .nav__inner {
    grid-template-columns: auto 1fr;
    grid-template-areas: "logo hamburger";
  }

  .nav__hamburger { display: flex; grid-area: hamburger; justify-self: end; }
  .nav__hamburger.open span             { background: var(--color-white); }
  .nav__hamburger.open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
  .nav__hamburger.open span:nth-child(2){ opacity: 0; }
  .nav__hamburger.open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

  .nav__links {
    position: fixed;
    inset: 0;
    background: var(--color-ink);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--sp-5);
    transform: translateX(100%);
    transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1050;
    margin: 0;
  }
  .nav__links.open { transform: translateX(0); }
  .nav__links .nav__link {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--color-white);
    letter-spacing: -0.01em;
  }
  .nav__links .nav__link::after { background: var(--color-red); }
  .nav__links .nav__link:hover  { color: var(--color-white); }
  .nav__actions { display: none; }
}

/* container padding is now handled by clamp() — no override needed at 480px */

/* ── 7. HERO ────────────────────────────────────────────────── */
.hero {
  background-color: var(--color-coal);
  background-image:
    linear-gradient(
      to right,
      rgba(30, 27, 22, 0.97) 0%,
      rgba(30, 27, 22, 0.93) 42%,
      rgba(30, 27, 22, 0.62) 66%,
      rgba(30, 27, 22, 0.28) 100%
    ),
    url('assets/images/hero-big.webp');
  background-size: cover;
  background-position: center 35%;
  background-repeat: no-repeat;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  position: relative;
  overflow: hidden;
}

/* Atmospheric grain texture — GPU composited */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  opacity: 0.032;
  pointer-events: none;
  z-index: 0;
}

.hero > .container {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 220px;
  align-items: end;
  padding-top: calc(var(--nav-height) + clamp(var(--sp-10), 8vw, var(--sp-15)));
  min-height: 90vh;
}

.hero__inner {
  max-width: 640px;
  padding-bottom: var(--sp-10);
}

.hero__badge-top {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.40);
  margin-bottom: var(--sp-5);
  animation: heroFadeUp 700ms var(--ease-out-expo) both;
}

.hero__headline {
  font-family: var(--font-display);
  font-style: normal;
  font-size: clamp(2.75rem, 4vw, 4rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.12;
  color: var(--color-white);
  margin-bottom: var(--sp-6);
  text-shadow: 0 2px 40px rgba(0, 0, 0, 0.45);
  animation: heroFadeUp 800ms var(--ease-out-expo) 120ms both;
}

.hero__headline .text-accent {
  display: inline;
  color: var(--color-red);
  font-style: normal;
}

.hero__sub {
  font-size: 1.0625rem;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.74;
  max-width: 52ch;
  margin-bottom: var(--sp-7);
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.55);
  animation: heroFadeUp 800ms var(--ease-out-expo) 220ms both;
}

.hero__ctas {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  animation: heroFadeUp 800ms var(--ease-out-expo) 320ms both;
}

/* Dark-background button overrides */
.hero .btn--ghost {
  color: var(--color-white);
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.05);
}
.hero .btn--ghost:hover {
  background: rgba(255, 255, 255, 0.11);
  border-color: rgba(255, 255, 255, 0.38);
}

.hero__design-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.68);
  text-decoration: none;
  margin-top: var(--sp-4);
  transition: color var(--t-base);
  animation: heroFadeUp 800ms var(--ease-out-expo) 420ms both;
}
.hero__design-link:hover { color: rgba(255, 255, 255, 0.95); }

/* Trust bar — vertical right column on desktop */
.hero__trust-bar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-5);
  border-left: 1px solid rgba(255, 255, 255, 0.10);
  padding-left: var(--sp-5);
  padding-bottom: var(--sp-10);
  align-self: end;
  animation: heroFadeUp 900ms var(--ease-out-expo) 160ms both;
}

.hero__trust-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-inline: 0;
}
.hero__trust-item:first-child { padding-left: 0; }

.hero__trust-item strong {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-white);
  line-height: 1;
}

.hero__trust-item span {
  font-size: 0.625rem;
  color: rgba(255, 255, 255, 0.36);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1.4;
}

.hero__trust-sep { display: none; }

/* Staggered hero reveal animation */
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__badge-top,
  .hero__headline,
  .hero__sub,
  .hero__ctas,
  .hero__design-link,
  .hero__trust-bar {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 860px) {
  .hero {
    background-image: none;
    background-color: var(--color-coal);
  }
  .hero > .container {
    grid-template-columns: 1fr;
    min-height: auto;
    padding-bottom: var(--sp-6);
  }
  .hero__inner { max-width: none; padding-bottom: var(--sp-5); }
  .hero__trust-bar {
    flex-direction: row;
    flex-wrap: wrap;
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
    padding-left: 0;
    padding-top: var(--sp-5);
    padding-bottom: var(--sp-6);
    gap: var(--sp-4) var(--sp-5);
    align-self: auto;
  }
  .hero__trust-item strong { font-size: 1.125rem; }
}

@media (max-width: 640px) {
  .hero .btn--ghost,
  .hero .btn--primary { flex: 1; justify-content: center; }
  .hero__headline { font-size: clamp(2.75rem, 9vw, 3.5rem); }
}

.swiss-cross-sm {
  display: inline-block;
  width: 14px; height: 14px;
  background: var(--color-red);
  border-radius: 2px;
  position: relative;
  flex-shrink: 0;
}
.swiss-cross-sm::before, .swiss-cross-sm::after {
  content: '';
  position: absolute;
  background: var(--color-white);
  border-radius: 1px;
}
.swiss-cross-sm::before { width: 38%; height: 76%; left: 31%; top: 12%; }
.swiss-cross-sm::after  { width: 76%; height: 38%; left: 12%; top: 31%; }

.swiss-cross-md {
  width: 32px; height: 32px;
  background: var(--color-red);
  border-radius: 4px;
  position: relative;
  flex-shrink: 0;
}
.swiss-cross-md::before, .swiss-cross-md::after {
  content: '';
  position: absolute;
  background: var(--color-white);
  border-radius: 2px;
}
.swiss-cross-md::before { width: 38%; height: 76%; left: 31%; top: 12%; }
.swiss-cross-md::after  { width: 76%; height: 38%; left: 12%; top: 31%; }

/* ── 8. CATALOGUE ───────────────────────────────────────────── */
.products { background: var(--color-white); }

.products__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  overflow: hidden;
}

@media (max-width: 960px) {
  .products__grid { grid-template-columns: repeat(2, 1fr); }
}

.product-card {
  background: var(--color-white);
  display: flex;
  flex-direction: column;
  transition: background var(--t-base), box-shadow var(--t-base), transform var(--t-base);
  position: relative;
  z-index: 0;
}
.product-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-red) 0%, #E8353C 100%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 220ms var(--ease-out-expo);
  z-index: 1;
}
.product-card:hover {
  background: var(--color-gray-100);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  z-index: 2;
  transform: translateY(-2px);
}
.product-card:hover::before { transform: scaleX(1); }
.product-card:focus-visible { outline: 2px solid var(--color-red); outline-offset: -2px; }

.product-card__link {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  height: 100%;
}

.product-card__img {
  aspect-ratio: 3/2;
  background: linear-gradient(135deg, var(--color-gray-100) 0%, #E6E2D9 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: background var(--t-base);
  position: relative;
}
.product-card:hover .product-card__img {
  background: linear-gradient(135deg, #E8E4DC 0%, var(--color-gray-300) 100%);
}
.product-card__img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--color-red);
  opacity: 0;
  transition: opacity var(--t-base);
  pointer-events: none;
  z-index: 1;
}
.product-card:hover .product-card__img::after { opacity: 0.05; }
.product-card__img svg { width: 56px; height: 56px; flex-shrink: 0; }

.product-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 500ms var(--ease-out-expo);
}
.product-card:hover .product-card__img img { transform: scale(1.06); }

.product-card__body {
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.product-card__cat {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}
.product-card__cat::before {
  content: '';
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-red);
  flex-shrink: 0;
}

.product-card__name {
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  line-height: 1.3;
  transition: color var(--t-base);
}

.product-card__desc {
  font-size: 0.8125rem;
  color: var(--color-muted);
  line-height: 1.4;
  margin-top: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-card__arrow {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-gray-500);
  margin-top: var(--sp-2);
  transition: color var(--t-base), gap var(--t-base);
}
.product-card:hover .product-card__arrow { color: var(--color-red); gap: 8px; }
.product-card:hover .product-card__name  { color: var(--color-red); }

/* ── 9. MODAL ───────────────────────────────────────────────── */
.modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-3);
}
.modal[hidden] { display: none !important; }

.modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
}

.modal__box {
  position: relative;
  background: var(--color-white);
  border-radius: var(--r-md);
  max-width: 560px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  padding: var(--sp-5);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-modal);
  animation: modal-enter var(--t-modal) both;
}

@keyframes modal-enter {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.modal__close {
  position: absolute;
  top: var(--sp-3); right: var(--sp-3);
  background: var(--color-gray-100);
  border: none;
  border-radius: 50%;
  width: 36px; height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-gray-500);
  transition: background var(--t-fast), color var(--t-fast);
}
.modal__close:hover { background: var(--color-gray-300); color: var(--color-ink); }

.modal-header {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
  padding-right: var(--sp-5);
}
.modal-icon {
  flex-shrink: 0;
  width: 64px; height: 64px;
  background: var(--color-gray-100);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-title {
  font-family: var(--font-heading);
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  margin-bottom: 4px;
}
.modal-tagline { font-size: 0.9375rem; color: var(--color-gray-500); }

.modal-body { display: flex; flex-direction: column; gap: var(--sp-3); }
.modal-desc { font-size: 0.9375rem; color: var(--color-gray-500); line-height: 1.7; }

.modal-detail-group { display: flex; flex-direction: column; gap: var(--sp-1); }
.modal-detail-group h4 {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-gray-500);
}
.modal-detail-list { display: flex; flex-direction: column; gap: 4px; }
.modal-detail-list li {
  font-size: 0.9375rem;
  color: var(--color-ink);
  padding-left: var(--sp-2);
  position: relative;
}
.modal-detail-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.55em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--color-muted);
}

.modal-moq {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: 0.9375rem;
  color: var(--color-ink);
  background: var(--color-gray-100);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
}

.modal-footer {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--color-gray-100);
  flex-wrap: wrap;
}

/* ── 10. WHY DIARAG (dark section) ─────────────────────────── */
.why { background: var(--color-ink); }
.why .section__eyebrow { color: rgba(255, 255, 255, 0.4); }
.why .section__title   { color: var(--color-white); }
.why .section__sub     { color: var(--color-gray-500); }

.why__grid { display: grid; grid-template-columns: repeat(3, 1fr); }

.why__card {
  padding: var(--sp-6) var(--sp-5);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.why__card:last-child { border-right: none; }

.why__icon {
  width: 52px;
  height: 52px;
  background: transparent;
  border: none;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--sp-3);
  flex-shrink: 0;
}
.why__icon svg > rect:first-child { fill: transparent; }

.why__title {
  font-family: var(--font-heading);
  font-size: clamp(1.125rem, 1.5vw, 1.375rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-white);
}
.why__text {
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.7;
  max-width: 36ch;
}

.stats-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: var(--sp-10);
  padding-top: var(--sp-8);
}

.stat-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-inline: var(--sp-5);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}
.stat-item:first-child { padding-left: 0; }
.stat-item:last-child  { border-right: none; }

.stat-numeral { display: flex; align-items: baseline; line-height: 1; }
.stat-number  { font-family: var(--font-display); font-size: 3rem; font-weight: 800; color: var(--color-white); line-height: 1; }
.stat-suffix  { font-family: var(--font-display); font-size: 3rem; font-weight: 800; color: var(--color-white); line-height: 1; }
.stat-label   { font-size: 0.8125rem; color: var(--color-gray-500); margin-top: 4px; }
.stat-divider { display: none; }

.certs-bar {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--r-md);
  margin-top: var(--sp-8);
  overflow: hidden;
}
.cert-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  flex: 1;
}
.cert-item__icon { display: flex; align-items: center; flex-shrink: 0; }
.cert-item__icon--success { color: var(--color-success); }
.cert-item__icon--warning { color: var(--color-warning); }
.cert-item__icon--navy    { color: var(--color-navy); }
.cert-item__icon--red     { color: var(--color-red); }
.cert-item > div { display: flex; flex-direction: column; gap: 2px; }
.cert-item strong { font-size: 0.875rem; font-weight: 600; color: var(--color-white); display: block; }
.cert-item span   { font-size: 0.75rem; color: var(--color-gray-500); display: block; }
.cert-sep { width: 1px; height: 40px; background: rgba(255,255,255,0.08); flex-shrink: 0; }

@media (max-width: 900px) {
  .why__grid { grid-template-columns: 1fr; }
  .why__card { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.08); }
  .why__card:last-child { border-bottom: none; }
  .stats-bar { grid-template-columns: repeat(2, 1fr); }
  .stat-item { padding: var(--sp-3) var(--sp-2); }
  .stat-item:nth-child(1) { border-right: 1px solid rgba(255,255,255,0.08); }
  .stat-item:nth-child(3) { border-right: 1px solid rgba(255,255,255,0.08); border-top: 1px solid rgba(255,255,255,0.08); }
  .stat-item:nth-child(4) { border-top: 1px solid rgba(255,255,255,0.08); }
  .certs-bar { flex-direction: column; }
  .cert-sep  { width: 100%; height: 1px; }
}

/* ── 11. HOW IT WORKS ───────────────────────────────────────── */
.how-it-works { background: var(--color-paper); }

.hiw-steps {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  align-items: start;
  margin-bottom: var(--sp-8);
}

.hiw-step {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-1);
  padding: var(--sp-3);
}

.hiw-step__num {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--color-gray-300);
  line-height: 1;
  letter-spacing: -0.04em;
  margin-bottom: var(--sp-1);
}

.hiw-step__icon {
  width: 48px; height: 48px;
  background: var(--color-gray-100);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--sp-2);
}

.hiw-step__title {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}
.hiw-step__text {
  font-size: 0.9375rem;
  color: var(--color-muted);
  line-height: 1.65;
  max-width: 26ch;
}

.hiw-connector {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 52px;
}
.hiw-connector::after {
  content: '';
  display: block;
  width: 40px;
  height: 1px;
  background: var(--color-gray-300);
}

.hiw-cta {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
}
.hiw-cta__note { font-size: 0.9375rem; color: var(--color-muted); }

@media (max-width: 900px) {
  .hiw-steps {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin-inline: auto;
  }
  .hiw-connector { display: none; }
  .hiw-step { padding: var(--sp-3) 0; border-bottom: 1px solid var(--color-border); }
  .hiw-step:last-child { border-bottom: none; }
  .hiw-step__text { max-width: 100%; }
}

/* ── 12. MOCKUP TOOL ────────────────────────────────────────── */
.mockup-section { background: var(--color-kraft-bg); }

.mockup__layout {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--sp-6);
  align-items: start;
}

.mockup__controls { display: flex; flex-direction: column; gap: var(--sp-4); }

.control-group { display: flex; flex-direction: column; gap: var(--sp-1); }

.control-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-muted);
}

.product-tabs { display: flex; gap: 6px; flex-wrap: wrap; }

.product-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--r-sm);
  padding: 8px 12px;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-muted);
  cursor: pointer;
  transition: all var(--t-fast);
}
.product-tab:hover  { border-color: var(--color-ink); color: var(--color-ink); }
.product-tab.active { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-white); }

.color-row { display: flex; align-items: center; gap: var(--sp-2); }

.color-swatch-input {
  width: 36px; height: 36px;
  border: 1px solid var(--color-border);
  border-radius: var(--r-sm);
  padding: 2px;
  cursor: pointer;
  background: none;
}

.color-presets { display: flex; gap: 8px; flex-wrap: wrap; }
.color-preset {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color var(--t-fast), transform var(--t-fast);
}
.color-preset:hover  { transform: scale(1.1); }
.color-preset.active { border-color: var(--color-ink); }

.text-input {
  width: 100%;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--r-sm);
  padding: 10px var(--sp-2);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--color-ink);
  transition: border-color var(--t-fast);
  outline: none;
}
.text-input:focus { border-color: var(--color-ink); }

.upload-zone {
  border: 1.5px dashed var(--color-border);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
  position: relative;
}
.upload-zone:hover,
.upload-zone.drag-over { border-color: var(--color-red); background: rgba(204,17,23,0.02); }
.upload-zone__content { pointer-events: none; }
.upload-zone__text  { font-size: 0.9375rem; font-weight: 500; color: var(--color-ink); margin-top: var(--sp-1); }
.upload-zone__hint  { font-size: 0.8125rem; color: var(--color-muted); margin-top: 4px; }
.upload-input       { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.upload-filename    { font-size: 0.8125rem; color: var(--color-muted); margin-top: 6px; display: flex; align-items: center; gap: 6px; }
.link-style         { color: var(--color-ink); text-decoration: underline; cursor: pointer; }

.mockup__cta-btns { display: flex; gap: var(--sp-2); }
.mockup__cta-btns .btn { flex: 1; }

.mockup__preview { display: flex; flex-direction: column; gap: var(--sp-2); }

.canvas-frame {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: none;
}
.canvas-frame canvas { width: 100%; height: auto; display: block; }

.preview-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  color: var(--color-muted);
}

.mockup__footer-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5);
  margin-top: var(--sp-6);
  flex-wrap: wrap;
}
.mockup__footer-cta-text { display: flex; flex-direction: column; gap: 4px; }
.mockup__footer-cta-text strong { font-size: 1rem; color: var(--color-ink); }
.mockup__footer-cta-text span   { font-size: 0.9375rem; color: var(--color-muted); }

@media (max-width: 860px) {
  .mockup__layout { grid-template-columns: 1fr; }
  .mockup__footer-cta { flex-direction: column; align-items: flex-start; }
}

/* Step number indicators */
.control-group[data-step] {
  position: relative;
  padding-left: var(--sp-5);
}
.control-group[data-step]::before {
  content: attr(data-step);
  position: absolute;
  left: 0;
  top: 1px;
  font-size: 0.5625rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--color-red);
  line-height: 1.8;
  font-family: var(--font-head);
}

/* Canvas preview stage */
.mockup__preview {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  position: relative;
}

.mockup__glow {
  position: absolute;
  bottom: 36px; /* sits just below the preview-hint */
  left: 15%;
  right: 15%;
  height: 80px;
  background: radial-gradient(ellipse at center, rgba(204, 17, 23, 0.35) 0%, transparent 70%);
  filter: blur(28px);
  pointer-events: none;
  z-index: 0;
  transition: background 0.4s ease;
  border-radius: 50%;
}

.canvas-frame {
  position: relative;
  z-index: 1;
}

/* Canvas frame topbar chrome */
.canvas-frame__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: var(--color-gray-100);
  border-bottom: 1px solid var(--color-border);
}

.canvas-live-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.5625rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  color: var(--color-red);
  font-family: var(--font-head);
}

.canvas-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-red);
  flex-shrink: 0;
  animation: live-pulse 2s ease-in-out infinite;
}

@keyframes live-pulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(0.7); }
}

@media (prefers-reduced-motion: reduce) {
  .canvas-live-dot { animation: none; }
}

.canvas-product-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-muted);
  flex: 1;
  text-align: center;
}

.canvas-frame__dots {
  display: flex;
  gap: 5px;
  align-items: center;
}
.canvas-frame__dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-border);
  display: block;
}

/* Footer CTA right side */
.mockup__footer-right {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
  flex-shrink: 0;
}

.mockup__trust-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.mockup__trust-list li {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-muted);
  display: flex;
  align-items: center;
  gap: 7px;
}
.mockup__trust-list li::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-red);
  flex-shrink: 0;
}

@media (max-width: 600px) {
  .mockup__footer-right { flex-direction: column; align-items: flex-start; }
  .mockup__trust-list { flex-direction: row; flex-wrap: wrap; gap: var(--sp-2); }
  .control-group[data-step] { padding-left: var(--sp-4); }
}

/* ── 13. TESTIMONIALS ───────────────────────────────────────── */
.testimonials { background: var(--color-white); }

.testimonials__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
}

.testi-card {
  background: var(--color-paper);
  border: 1px solid var(--color-border);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  transition: box-shadow var(--t-base), transform var(--t-base), border-color var(--t-base);
}
.testi-card:hover {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.10);
  transform: translateY(-3px);
  border-color: var(--color-gray-300);
}

.testi-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}
.testi-stars { display: flex; gap: 3px; }
.testi-verified {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-success);
}

.testi-quote {
  font-size: 0.9375rem;
  color: var(--color-ink);
  line-height: 1.7;
  font-style: italic;
  flex: 1;
  position: relative;
  padding-top: 2rem;
}
.testi-quote::before {
  content: '\201C';
  position: absolute;
  top: -0.25rem;
  left: -0.25rem;
  font-family: var(--font-display);
  font-size: 4.5rem;
  font-weight: 800;
  font-style: normal;
  line-height: 1;
  color: var(--color-gray-300);
  pointer-events: none;
  user-select: none;
}

.testi-author {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--color-border);
}
.testi-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8125rem;
  font-weight: 700;
  flex-shrink: 0;
}
.testi-avatar--red   { background: var(--color-error-bg);   color: var(--color-red); }
.testi-avatar--green { background: var(--color-success-bg); color: var(--color-success); }
.testi-avatar--navy  { background: var(--color-navy-bg);    color: var(--color-navy); }
.testi-info { display: flex; flex-direction: column; gap: 2px; }
.testi-info strong { font-size: 0.9375rem; font-weight: 600; color: var(--color-ink); }
.testi-info span   { font-size: 0.8125rem; color: var(--color-muted); }

@media (max-width: 860px) {
  .testimonials__grid { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; }
}

/* ── 14. FAQ ────────────────────────────────────────────────── */
.faq-section { background: var(--color-paper); }

.faq__list {
  max-width: 720px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
}

.faq__item { border-bottom: 1px solid var(--color-border); }
.faq__item:first-child { border-top: 1px solid var(--color-border); }

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-ink);
  cursor: pointer;
  user-select: none;
  list-style: none;
  transition: color var(--t-fast);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: '';
  flex-shrink: 0;
  width: 16px; height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238A8880' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  transition: transform var(--t-base);
}
.faq__item[open] .faq__q::after { transform: rotate(180deg); }
.faq__item[open] .faq__q { color: var(--color-ink); }

.faq__a {
  font-size: 0.9375rem;
  color: var(--color-muted);
  line-height: 1.7;
  padding-bottom: var(--sp-3);
  max-width: 62ch;
}

.faq__footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  margin-top: var(--sp-6);
  font-size: 0.9375rem;
  color: var(--color-muted);
}

/* ── 15. CONTACT ────────────────────────────────────────────── */
.contact { background: var(--color-paper); }

.contact__layout {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: var(--sp-10);
  align-items: start;
}

.contact-form { display: flex; flex-direction: column; gap: var(--sp-3); }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }

.form-group { display: flex; flex-direction: column; gap: 8px; }
.form-group--full { grid-column: 1 / -1; }

.form-group label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-muted);
  transition: color var(--t-base);
}
.form-group:focus-within label { color: var(--color-ink); }

.required { color: var(--color-red); margin-left: 2px; }
.optional  { font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 0.75rem; }

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  padding: var(--sp-1) 0;
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-ink);
  transition: border-color var(--t-base), background var(--t-base);
  outline: none;
  -webkit-appearance: none;
}
.contact-form textarea { resize: vertical; min-height: 120px; padding-top: 8px; }
.contact-form input:focus,
.contact-form textarea:focus {
  border-bottom: 2px solid var(--color-red);
  background: rgba(204, 17, 23, 0.02);
  padding-bottom: 5px;
}
.contact-form input.error,
.contact-form select.error { border-bottom-color: var(--color-error); }
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: var(--color-gray-300); }

.select-wrapper { position: relative; }
.select-wrapper select {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  padding: var(--sp-1) 24px var(--sp-1) 0;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-ink);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  outline: none;
  transition: border-color var(--t-base);
}
.select-wrapper select:focus { border-bottom: 2px solid var(--color-red); }
.select-arrow {
  position: absolute;
  right: 0; top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--color-muted);
}

.hp-field { display: none; }

.file-label {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-muted);
  cursor: pointer;
  transition: color var(--t-fast);
}
.file-label:hover { color: var(--color-ink); }
.file-input-native { font-family: var(--font-body); font-size: 0.9375rem; color: var(--color-muted); margin-top: 6px; }
.form-hint { font-size: 0.8125rem; color: var(--color-muted); }

.consent-row { display: flex; align-items: flex-start; gap: var(--sp-2); }
.consent-row input[type="checkbox"] {
  flex-shrink: 0;
  width: 18px; height: 18px;
  border: 1.5px solid var(--color-border);
  border-radius: 3px;
  appearance: none;
  -webkit-appearance: none;
  background: var(--color-white);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
  position: relative;
  margin-top: 2px;
}
.consent-row input[type="checkbox"]:checked {
  background: var(--color-red);
  border-color: var(--color-red);
}
.consent-row input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
.consent-row label { font-size: 0.8125rem; color: var(--color-muted); line-height: 1.5; }
.consent-row label a { color: var(--color-red); text-decoration: underline; }

.field-error { font-size: 0.8125rem; color: var(--color-error); }

#submit-btn {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  height: 56px;
  border-radius: 4px;
}

.form-feedback {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border-radius: var(--r-md);
  font-size: 0.9375rem;
}
.form-feedback > div  { display: flex; flex-direction: column; gap: 4px; }
.form-feedback strong { font-weight: 600; }
.form-feedback--success { background: var(--color-success-bg); color: var(--color-success); }
.form-feedback--error   { background: var(--color-error-bg);   color: var(--color-error); }

.spin { animation: spin-loop 0.8s linear infinite; }
@keyframes spin-loop { to { transform: rotate(360deg); } }

.contact-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  position: sticky;
  top: 84px;
}

.sidebar-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  box-shadow: none;
}

.sidebar-title {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  margin-bottom: var(--sp-3);
}

.contact-info-list  { display: flex; flex-direction: column; gap: var(--sp-2); }
.contact-info-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  text-decoration: none;
  color: inherit;
  padding: var(--sp-2);
  border-radius: var(--r-md);
  transition: background var(--t-fast);
}
.contact-info-item:hover { background: var(--color-gray-100); }

.contact-info-icon {
  width: 36px; height: 36px;
  background: var(--color-gray-100);
  border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.contact-info-label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-muted); display: block; }
.contact-info-value { font-size: 0.9375rem; font-weight: 500; color: var(--color-ink); display: block; }

.sidebar-card--highlight {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  background: var(--color-success-bg);
  border-color: var(--color-success-border);
}
.sidebar-card--highlight p { font-size: 0.9375rem; color: var(--color-success); line-height: 1.6; }
.sidebar-card--highlight strong { font-weight: 600; }

.sidebar-swiss {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  background: var(--color-gray-100);
  border-radius: var(--r-md);
}
.sidebar-swiss > div { display: flex; flex-direction: column; gap: 2px; }
.sidebar-swiss strong { font-size: 0.9375rem; font-weight: 600; color: var(--color-ink); }
.sidebar-swiss span   { font-size: 0.8125rem; color: var(--color-muted); }

@media (max-width: 860px) {
  .contact__layout { grid-template-columns: 1fr; }
  .contact-sidebar { position: static; }
  .form-row        { grid-template-columns: 1fr; }
}

/* ── 16. FOOTER ─────────────────────────────────────────────── */
.footer { background: var(--color-ink); }

.footer__top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--sp-8);
  padding-block: var(--sp-10);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.footer__brand p {
  font-size: 0.9375rem;
  color: var(--color-gray-500);
  line-height: 1.6;
  margin-top: var(--sp-3);
  max-width: 28ch;
}
.footer__logo { opacity: 0.92; }

.footer__nav h4 {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-white);
  margin-bottom: var(--sp-3);
}
.footer__nav ul { display: flex; flex-direction: column; gap: var(--sp-1); }
.footer__nav a {
  font-size: 0.9375rem;
  color: var(--color-gray-500);
  text-decoration: none;
  transition: color var(--t-fast);
  position: relative;
  display: inline-block;
}
.footer__nav a::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0;
  width: 100%; height: 1px;
  background: var(--color-white);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 120ms var(--ease-out-expo);
}
.footer__nav a:hover { color: var(--color-white); }
.footer__nav a:hover::after { transform: scaleX(1); }

.footer__social-lang h4 {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-white);
  margin-bottom: var(--sp-3);
}
.footer-lang .lang-btn       { color: var(--color-gray-500); }
.footer-lang .lang-btn.active,
.footer-lang .lang-btn:hover { color: var(--color-white); }
.footer-lang .lang-btn.active { background: none; }

.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-block: var(--sp-3);
  font-size: 0.75rem;
  color: var(--color-gray-500);
  border-top: 1px solid rgba(255,255,255,0.06);
  background: rgba(0,0,0,0.25);
  margin: 0 calc(-1 * var(--sp-5));
  padding-inline: var(--sp-5);
}
.footer > .container { padding-bottom: 0; }

.footer__legal { display: flex; align-items: center; gap: var(--sp-2); }
.footer__legal a { color: var(--color-gray-500); text-decoration: none; transition: color var(--t-fast); }
.footer__legal a:hover { color: var(--color-white); }

@media (max-width: 860px) {
  .footer__top { grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 540px) {
  .footer__top { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; gap: var(--sp-1); text-align: center; }
}

/* ── 17. FLOATING CTA WIDGET ────────────────────────────────── */
.float-cta {
  position: fixed;
  bottom: calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
  right: calc(var(--sp-3) + env(safe-area-inset-right, 0px));
  z-index: 1500;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  align-items: flex-end;
}

.float-cta__toggle {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--color-red);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  box-shadow: var(--shadow-float);
  transition: background var(--t-fast), transform var(--t-fast);
  flex-shrink: 0;
}
.float-cta__toggle:hover { background: var(--color-red-dark); transform: scale(1.05); }

.float-cta__icon-close { display: none; }
.float-cta__toggle[aria-expanded="true"] .float-cta__icon-chat  { display: none; }
.float-cta__toggle[aria-expanded="true"] .float-cta__icon-close { display: block; }

.float-cta__menu {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  align-items: flex-end;
  animation: float-menu-in 200ms var(--ease-card) both;
}
.float-cta__menu[hidden] { display: none; }

@keyframes float-menu-in {
  from { opacity: 0; transform: scale(0.85) translateY(8px); }
  to   { opacity: 1; transform: scale(1)   translateY(0); }
}

.float-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 11px var(--sp-3);
  border-radius: 28px;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 2px 12px rgba(0,0,0,0.18);
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.float-cta__btn:hover { transform: translateX(-3px); box-shadow: 0 4px 18px rgba(0,0,0,0.25); }
.float-cta__btn--wa    { background: #25D366; color: var(--color-white); }
.float-cta__btn--email { background: var(--color-ink); color: var(--color-white); }

@media (max-width: 480px) {
  .float-cta {
    bottom: calc(var(--sp-2) + env(safe-area-inset-bottom, 0px));
    right: calc(var(--sp-2) + env(safe-area-inset-right, 0px));
  }
  .float-cta__toggle { width: 50px; height: 50px; }
}

/* ── 18. SCROLL REVEAL ──────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--t-slow), transform var(--t-slow);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

.why__grid .reveal:nth-child(1)          { transition-delay: 0ms; }
.why__grid .reveal:nth-child(2)          { transition-delay: 80ms; }
.why__grid .reveal:nth-child(3)          { transition-delay: 160ms; }
.testimonials__grid .reveal:nth-child(1) { transition-delay: 0ms; }
.testimonials__grid .reveal:nth-child(2) { transition-delay: 80ms; }
.testimonials__grid .reveal:nth-child(3) { transition-delay: 160ms; }
.hiw-steps .hiw-step:nth-child(1)        { transition-delay: 0ms; }
.hiw-steps .hiw-step:nth-child(3)        { transition-delay: 80ms; }
.hiw-steps .hiw-step:nth-child(5)        { transition-delay: 160ms; }
.hiw-steps .hiw-step:nth-child(7)        { transition-delay: 240ms; }

/* Section 19 removed — stale light-background variant of .hero__design-link
   was cascading over the dark-hero rule (line ~566) and made the link
   invisible against the hero photo (var(--color-muted) is tuned for
   var(--color-paper), not a dark image background). */

/* ── 20. OUR STORY SECTION ──────────────────────────────────── */
.story-section {
  background-color: var(--color-kraft-bg);
  background-image: url("data:image/svg+xml,%3Csvg width='120' height='40' viewBox='0 0 120 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 10 C15 2 30 2 45 10 C60 18 75 18 90 10 C105 2 120 2 135 10' stroke='%23C4A97A' stroke-width='0.7' fill='none' opacity='0.5'/%3E%3Cpath d='M0 25 C15 17 30 17 45 25 C60 33 75 33 90 25 C105 17 120 17 135 25' stroke='%23C4A97A' stroke-width='0.7' fill='none' opacity='0.5'/%3E%3C/svg%3E");
  background-size: 120px 40px;
}

.story__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--sp-8), 7vw, var(--sp-12));
  align-items: center;
}

.story__text {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.story__p {
  font-size: 1rem;
  color: var(--color-muted);
  line-height: 1.75;
  max-width: 50ch;
}

.story__quote {
  border-left: 3px solid var(--color-kraft-mid);
  padding: var(--sp-2) var(--sp-3);
  font-style: italic;
  font-size: 1rem;
  color: var(--color-ink);
  line-height: 1.6;
  background: rgba(196, 169, 122, 0.10);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}

.story__photos {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2fr 1fr;
  gap: var(--sp-2);
  height: 460px;
}

.story__photo {
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--color-kraft);
  border: 1px solid var(--color-kraft-mid);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.10);
  transition: transform 400ms var(--ease-out-expo), box-shadow 400ms var(--ease-out-expo);
}

.story__photo:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.15);
}

.story__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .story__photo { transition: none; }
  .story__photo:hover { transform: none; }
}

.story__photo-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  color: var(--color-kraft-mid);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

@media (max-width: 860px) {
  .story__layout { grid-template-columns: 1fr; }
  .story__photos { height: 240px; grid-template-rows: 1fr 1fr; }
}

.prod-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: 0.9375rem;
  color: var(--color-muted);
  margin-bottom: var(--sp-6);
  flex-wrap: wrap;
}
.prod-breadcrumb a { color: var(--color-ink); text-decoration: none; }
.prod-breadcrumb a:hover { text-decoration: underline; }
.prod-breadcrumb span[aria-hidden] { opacity: .4; }

.prod-layout { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-10); align-items: start; }

.prod-price-tag {
  display: inline-block;
  background: var(--color-ink);
  color: var(--color-white);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: var(--r-sm);
  margin-bottom: var(--sp-3);
}

.prod-title {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 700;
  color: var(--color-ink);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: var(--sp-3);
}

.prod-desc {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-muted);
  margin-bottom: var(--sp-5);
  max-width: 62ch;
}

.prod-moq {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: 0.9375rem;
  color: var(--color-ink);
  background: var(--color-gray-100);
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-6);
}

.prod-ctas { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

.prod-specs { display: flex; flex-direction: column; gap: var(--sp-3); }

.prod-spec-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5);
  box-shadow: none;
}

.prod-spec-card__title {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-muted);
  margin-bottom: var(--sp-2);
}

.prod-spec-list { list-style: none; display: flex; flex-direction: column; gap: var(--sp-1); }
.prod-spec-list li { font-size: 0.9375rem; color: var(--color-ink); padding-left: var(--sp-2); position: relative; }
.prod-spec-list li::before { content: ''; position: absolute; left: 0; top: 0.55em; width: 5px; height: 5px; border-radius: 50%; background: var(--color-muted); }

.prod-trust-strip { background: var(--color-white); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); padding-block: var(--sp-8); }
.prod-trust-grid  { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
.prod-trust-item  { display: flex; align-items: flex-start; gap: var(--sp-2); }
.prod-trust-item div { display: flex; flex-direction: column; gap: 2px; }
.prod-trust-item strong { font-size: 0.9375rem; font-weight: 600; color: var(--color-ink); display: block; }
.prod-trust-item span   { font-size: 0.8125rem; color: var(--color-muted); display: block; }

.prod-cta-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  background: var(--color-ink);
  border-radius: var(--r-md);
  padding: var(--sp-8) var(--sp-10);
  flex-wrap: wrap;
}
.prod-cta-box h2 { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; color: var(--color-white); margin-bottom: var(--sp-1); }
.prod-cta-box p  { color: rgba(255,255,255,.65); max-width: 480px; font-size: 0.9375rem; }

.prod-support-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  background: var(--color-kraft-bg);
  border: 1px solid var(--color-kraft);
  border-radius: var(--r-md);
  padding: var(--sp-6) var(--sp-8);
  flex-wrap: wrap;
}
.prod-support-box h2 { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; color: var(--color-ink); margin-bottom: var(--sp-1); }
.prod-support-box p  { color: var(--color-muted); font-size: 0.9375rem; max-width: 420px; }
.prod-support__actions { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; flex-shrink: 0; }
.prod-support__tel { display: flex; align-items: center; gap: var(--sp-2); white-space: nowrap; }
.prod-support__tel span { font-size: 0.875rem; color: var(--color-muted); }
.prod-support__tel a { font-size: 0.9375rem; font-weight: 600; color: var(--color-ink); text-decoration: none; }
.prod-support__tel a:hover { color: var(--color-red); }

@media (max-width: 860px) {
  .prod-layout      { grid-template-columns: 1fr; }
  .prod-trust-grid  { grid-template-columns: 1fr 1fr; }
  .prod-cta-box     { flex-direction: column; align-items: flex-start; padding: var(--sp-6); }
  .prod-support-box { flex-direction: column; align-items: flex-start; padding: var(--sp-5); }
  .prod-support__actions { width: 100%; }
}

/* ── 20. GLOBAL RESPONSIVE OVERRIDES ───────────────────────── */
@media (max-width: 768px) {
  .section { padding-block: var(--sp-8); }
  .section__header { margin-bottom: var(--sp-5); }
  .hiw-cta .btn--lg { width: 100%; justify-content: center; }
  .faq__footer { flex-direction: column; text-align: center; }
}

@media (max-width: 480px) {
  .hero__ctas { flex-direction: column; }
  .hero__ctas .btn { width: 100%; justify-content: center; }
  .products__grid { grid-template-columns: 1fr; }
}

/* ── 21. QUOTATION CART BUTTON (NAV) ───────────────────────── */
.nav__cart-btn {
  position: relative;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-ink);
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
  flex-shrink: 0;
}
.nav__cart-btn:hover {
  background: var(--color-gray-100);
  border-color: var(--color-gray-300);
}
.nav__cart-btn:focus-visible {
  outline: 2px solid var(--color-red);
  outline-offset: 2px;
}
.nav__cart-btn.has-items {
  border-color: var(--color-red);
  color: var(--color-red);
}

.cart-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background: var(--color-red);
  color: var(--color-white);
  font-size: 0.6rem;
  font-weight: 700;
  font-family: var(--font-body);
  min-width: 18px;
  height: 18px;
  border-radius: var(--r-full);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  line-height: 1;
  border: 2px solid var(--color-white);
  pointer-events: none;
}

/* ── 22. CART DRAWER ───────────────────────────────────────── */
.cart-drawer {
  position: fixed;
  inset: 0;
  z-index: 1500;
}
.cart-drawer[hidden] { display: none !important; }

.cart-drawer__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(3px);
  cursor: pointer;
}

.cart-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 420px;
  max-width: 100vw;
  background: var(--color-white);
  border-left: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  box-shadow: -8px 0 40px rgba(0, 0, 0, 0.12);
  animation: drawer-enter 250ms var(--ease-out-expo) both;
}

@keyframes drawer-enter {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .cart-drawer__panel { animation: none; }
}

.cart-drawer__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.cart-drawer__title {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  margin-bottom: 2px;
}

.cart-drawer__subtitle {
  font-size: 0.8125rem;
  color: var(--color-muted);
}

.cart-drawer__close {
  background: var(--color-gray-100);
  border: none;
  border-radius: 50%;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-gray-500);
  flex-shrink: 0;
  margin-left: var(--sp-3);
  transition: background var(--t-fast), color var(--t-fast);
}
.cart-drawer__close:hover { background: var(--color-gray-300); color: var(--color-ink); }

.cart-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-3) 0;
  overscroll-behavior: contain;
}

/* Empty state */
.cart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  height: 100%;
  min-height: 200px;
  padding: var(--sp-8) var(--sp-5);
  text-align: center;
  color: var(--color-muted);
}
.cart-empty svg { opacity: 0.25; }
.cart-empty p   { font-size: 0.9375rem; margin: 0; }
.cart-empty__hint { font-size: 0.875rem; line-height: 1.5; }

/* Cart items */
.cart-item {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  gap: var(--sp-2);
  align-items: start;
  padding: var(--sp-3) var(--sp-5);
  border-bottom: 1px solid var(--color-gray-100);
}
.cart-item:last-child { border-bottom: none; }

.cart-item__thumb {
  width: 52px;
  height: 52px;
  background: var(--color-gray-100);
  border-radius: var(--r-sm);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cart-item__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cart-item__thumb svg { width: 28px; height: 28px; }

.cart-item__body { min-width: 0; }

.cart-item__name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-ink);
  line-height: 1.3;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cart-item__cat {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-muted);
  margin-bottom: var(--sp-2);
}

.cart-item__qty-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: 6px;
}

.cart-item__qty-label {
  font-size: 0.75rem;
  color: var(--color-muted);
  white-space: nowrap;
}

.cart-item__qty-input {
  width: 72px;
  border: 1px solid var(--color-border);
  border-radius: var(--r-sm);
  padding: 5px var(--sp-1);
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--color-ink);
  background: var(--color-paper);
  text-align: center;
  transition: border-color var(--t-fast);
}
.cart-item__qty-input:focus {
  outline: none;
  border-color: var(--color-red);
}

.cart-item__notes {
  width: 100%;
  margin-top: 6px;
  border: 1px solid var(--color-border);
  border-radius: var(--r-sm);
  padding: 6px var(--sp-2);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: var(--color-ink);
  background: var(--color-paper);
  resize: none;
  min-height: 48px;
  transition: border-color var(--t-fast);
}
.cart-item__notes::placeholder { color: var(--color-muted); }
.cart-item__notes:focus { outline: none; border-color: var(--color-red); }

.cart-item__remove {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-gray-500);
  padding: 4px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--t-fast), background var(--t-fast);
  flex-shrink: 0;
}
.cart-item__remove:hover { color: var(--color-red); background: var(--color-error-bg); }

/* Cart footer */
.cart-drawer__footer {
  padding: var(--sp-4) var(--sp-5);
  border-top: 1px solid var(--color-border);
  flex-shrink: 0;
  background: var(--color-white);
}

.cart-drawer__note {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: 0.75rem;
  color: var(--color-muted);
  margin-bottom: var(--sp-3);
  line-height: 1.4;
}

.cart-drawer__actions {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
}
.cart-drawer__actions .btn--primary { flex: 1; justify-content: center; }

/* ── 23. CART TOAST NOTIFICATION ───────────────────────────── */
.cart-toast {
  position: fixed;
  bottom: var(--sp-5);
  left: 50%;
  transform: translateX(-50%) translateY(0);
  background: var(--color-ink);
  color: var(--color-white);
  padding: 10px var(--sp-4);
  border-radius: var(--r-full);
  font-size: 0.875rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  z-index: 3000;
  box-shadow: 0 4px 24px rgba(0,0,0,0.18);
  animation: toast-enter 300ms var(--ease-out-expo) both;
  white-space: nowrap;
}
.cart-toast[hidden] { display: none !important; }

@keyframes toast-enter {
  from { opacity: 0; transform: translateX(-50%) translateY(12px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ── 24. PRODUCT CARD — ADD TO QUOTE BUTTON ─────────────────── */
.product-card__actions {
  display: flex;
  gap: var(--sp-1);
  padding: 0 var(--sp-4) var(--sp-3);
  margin-top: auto;
}

.product-card__btn-quote {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--color-red);
  color: var(--color-white);
  border: 1px solid var(--color-red);
  border-radius: var(--r-sm);
  padding: 8px var(--sp-2);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
  letter-spacing: 0.01em;
}
.product-card__btn-quote:hover {
  background: var(--color-red-dark);
  border-color: var(--color-red-dark);
  box-shadow: var(--shadow-btn-hover);
}
.product-card__btn-quote:focus-visible {
  outline: 2px solid var(--color-red);
  outline-offset: 2px;
}
.product-card__btn-quote.in-cart {
  background: var(--color-success);
  border-color: var(--color-success);
}
.product-card__btn-quote.in-cart:hover {
  background: #15803d;
  border-color: #15803d;
}

/* ── 25. TWO PATHS SECTION ──────────────────────────────────── */
.paths-section { background: var(--color-gray-100); }

.paths-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
}

.path-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--r-lg);
  padding: var(--sp-6) var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  transition: box-shadow var(--t-base);
}
.path-card:hover { box-shadow: var(--shadow-card); }

.path-card--primary {
  border-color: var(--color-red);
  border-width: 2px;
}

.path-card__icon {
  width: 64px;
  height: 64px;
  background: var(--color-gray-100);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-red);
}
.path-card--primary .path-card__icon {
  background: var(--color-error-bg);
}

.path-card__title {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-ink);
  letter-spacing: -0.01em;
}

.path-card__text {
  font-size: 0.9375rem;
  color: var(--color-muted);
  line-height: 1.65;
  flex: 1;
}

.path-card__btns {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.path-card__tel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

@media (max-width: 680px) {
  .paths-grid { grid-template-columns: 1fr; }
}

/* ── 26. INDUSTRY CHIPS ─────────────────────────────────────── */
.industries-section { background: var(--color-white); }

.industries-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-2);
}

.industry-chip {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--color-paper);
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-3);
  text-decoration: none;
  color: var(--color-ink);
  font-size: 0.875rem;
  font-weight: 500;
  transition: background var(--t-fast), border-color var(--t-fast),
              box-shadow var(--t-fast), transform var(--t-fast);
  cursor: pointer;
}
.industry-chip:hover {
  background: var(--color-white);
  border-color: var(--color-gray-300);
  box-shadow: var(--shadow-card);
  transform: translateY(-1px);
}
.industry-chip:focus-visible {
  outline: 2px solid var(--color-red);
  outline-offset: 2px;
}

.industry-chip__icon {
  font-size: 1.5rem;
  line-height: 1;
  flex-shrink: 0;
  filter: grayscale(0.3);
}

@media (max-width: 860px) {
  .industries-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .industries-grid { grid-template-columns: 1fr; }
}

/* ── 27. HOW-IT-WORKS NOTE BAR ──────────────────────────────── */
.hiw-note-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--color-success-bg);
  border: 1px solid var(--color-success-border);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  margin-top: var(--sp-6);
  font-size: 0.9375rem;
  color: var(--color-success);
  flex-wrap: wrap;
}
.hiw-note-bar svg { flex-shrink: 0; }
.hiw-note-bar strong { color: var(--color-success); }

/* ── 28. FORM EXTRAS ────────────────────────────────────────── */
.form-hint-row {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-1);
  margin-top: var(--sp-2);
}
.form-hint-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 2px;
  accent-color: var(--color-red);
}
.checkbox-label {
  font-size: 0.8125rem;
  color: var(--color-muted);
  line-height: 1.5;
  cursor: pointer;
}

/* ── 29. MOBILE STICKY QUOTE BAR ────────────────────────────── */
@media (max-width: 640px) {
  .mobile-quote-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 900;
    background: var(--color-white);
    border-top: 1px solid var(--color-border);
    padding: var(--sp-2) var(--sp-3);
    display: flex;
    gap: var(--sp-2);
    box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
  }
  .mobile-quote-bar .btn { flex: 1; justify-content: center; font-size: 0.875rem; }
  body { padding-bottom: 72px; }
}

/* ── 30. PRODUCT PLACEHOLDER ─────────────────────────────────── */
.prod-placeholder {
  width: 100%;
  aspect-ratio: 3/2;
  background: var(--color-kraft-bg);
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  overflow: hidden;
}
.prod-placeholder svg { width: 52px; height: 52px; flex-shrink: 0; }
.prod-placeholder__label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-gray-500);
}

/* ── 31. CATALOG GRID (category pages) ──────────────────────── */
.catalog-section { background: var(--color-paper); }

.catalog-intro__eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-red);
  margin-bottom: var(--sp-1);
}

.catalog-section .section-title {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  line-height: 1.2;
}
.catalog-section .section-sub {
  font-size: 0.9375rem;
  color: var(--color-muted);
  line-height: 1.7;
  max-width: 56ch;
  margin-top: var(--sp-1);
}

.catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}

.catalog-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--t-base), transform var(--t-base);
}
.catalog-card:hover {
  box-shadow: var(--shadow-card);
  transform: translateY(-2px);
}

.catalog-card__thumb {
  display: block;
  aspect-ratio: 3/2;
  overflow: hidden;
  background: var(--color-kraft-bg);
  text-decoration: none;
}
.catalog-card__thumb > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms var(--ease-out-expo);
}
.catalog-card:hover .catalog-card__thumb > img { transform: scale(1.04); }
.catalog-card__thumb .prod-placeholder {
  border: none;
  height: 100%;
  transition: transform 500ms var(--ease-out-expo);
}
.catalog-card:hover .catalog-card__thumb .prod-placeholder { transform: scale(1.04); }
.catalog-card__thumb:focus-visible { outline: 2px solid var(--color-red); outline-offset: -2px; }

.catalog-card__body {
  padding: var(--sp-2) var(--sp-3) var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.catalog-card__cat {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-red);
}
.catalog-card__name {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-ink);
  line-height: 1.3;
}
.catalog-card__desc {
  font-size: 0.875rem;
  color: var(--color-muted);
  line-height: 1.5;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.catalog-card__actions {
  display: flex;
  gap: var(--sp-1);
  padding: var(--sp-2) var(--sp-3) var(--sp-3);
  border-top: 1px solid var(--color-border);
  margin-top: var(--sp-1);
}

.catalog-card__btn-view {
  flex: 1;
  padding: 8px 12px;
  font-size: 0.8125rem;
  font-weight: 600;
  background: none;
  border: 1.5px solid var(--color-border);
  border-radius: var(--r-md);
  color: var(--color-ink);
  cursor: pointer;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.catalog-card__btn-view:hover {
  border-color: var(--color-ink);
  background: var(--color-gray-100);
}
.catalog-card__btn-view:focus-visible { outline: 2px solid var(--color-red); outline-offset: 2px; }

.catalog-card__btn-add {
  flex: 1;
  padding: 8px 12px;
  font-size: 0.8125rem;
  font-weight: 600;
  background: var(--color-red);
  border: 1.5px solid var(--color-red);
  border-radius: var(--r-md);
  color: var(--color-white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.catalog-card__btn-add:hover { background: var(--color-red-dark); border-color: var(--color-red-dark); }
.catalog-card__btn-add.in-cart {
  background: var(--color-success);
  border-color: var(--color-success);
}
.catalog-card__btn-add:focus-visible {
  outline: 2px solid var(--color-red);
  outline-offset: 2px;
}

.catalog-empty {
  grid-column: 1 / -1;
  padding: var(--sp-8) var(--sp-4);
  text-align: center;
  color: var(--color-muted);
}
.catalog-empty a { color: var(--color-red); font-weight: 600; }

/* ── 32. CATALOG PAGE CTA BAR ────────────────────────────────── */
.catalog-cta-bar {
  background: var(--color-ink);
  color: var(--color-white);
}
.catalog-cta-bar .container { padding-block: var(--sp-5); }
.catalog-cta-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}
.catalog-cta-bar__text h2 { font-family: var(--font-heading); font-size: 1.25rem; color: var(--color-white); margin-bottom: 4px; }
.catalog-cta-bar__text p  { font-size: 0.9rem; color: var(--color-gray-300); }
.catalog-cta-bar__tel     { font-size: 0.875rem; color: var(--color-gray-300); margin-top: 4px; }
.catalog-cta-bar__tel a   { color: var(--color-white); font-weight: 600; text-decoration: none; }
@media (max-width: 640px) {
  .catalog-cta-bar__inner { flex-direction: column; text-align: center; }
}

/* ── 33. PRODUCT DETAIL PAGE ─────────────────────────────────── */
.product-detail {
  padding-top: calc(56px + var(--sp-5));
  padding-bottom: var(--sp-10);
}
.product-detail__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
  margin-top: var(--sp-5);
  align-items: start;
}
@media (max-width: 768px) {
  .product-detail__layout { grid-template-columns: 1fr; }
}

.product-detail__visual {
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--color-kraft-bg);
  border: 1px solid var(--color-border);
}
.product-detail__visual > img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.product-detail__visual .prod-placeholder {
  aspect-ratio: 4/3;
  border: none;
}

.product-detail__info { display: flex; flex-direction: column; gap: var(--sp-3); }

.product-detail__cat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--color-gray-100);
  padding: 4px 10px;
  border-radius: var(--r-full);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  width: fit-content;
}
.product-detail__title {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  color: var(--color-ink);
  line-height: 1.2;
}
.product-detail__short {
  font-size: 1.0625rem;
  color: var(--color-muted);
  line-height: 1.6;
}
.product-detail__full {
  font-size: 0.9375rem;
  color: var(--color-ink);
  line-height: 1.7;
}
.product-detail__section-title {
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-muted);
  margin-bottom: var(--sp-1);
}
.product-detail__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.product-detail__tag {
  background: var(--color-gray-100);
  border: 1px solid var(--color-border);
  border-radius: var(--r-full);
  padding: 3px 10px;
  font-size: 0.8125rem;
  color: var(--color-ink);
}
.product-detail__technical-note {
  background: var(--color-navy-bg);
  border: 1px solid #BFDBFE;
  border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-3);
  font-size: 0.875rem;
  color: var(--color-navy);
  line-height: 1.5;
}
.product-detail__actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--color-border);
}
.product-detail__tel { font-size: 0.875rem; color: var(--color-muted); text-align: center; margin-top: var(--sp-1); }
.product-detail__tel a { color: var(--color-red); font-weight: 600; text-decoration: none; }

.related-section {
  padding: var(--sp-8) 0;
  border-top: 1px solid var(--color-border);
  margin-top: var(--sp-8);
}
.related-section .section-title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-ink);
  letter-spacing: -0.02em;
  margin-bottom: var(--sp-4);
}
.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--sp-2);
}

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

@media (prefers-reduced-motion: reduce) {
  .catalog-card { transition: none; }
  .catalog-card__thumb .prod-placeholder { transition: none; }
}

/* ── 34. WHY SECTION — EDITORIAL GHOST NUMBERS ──────────────── */
.why__grid { counter-reset: why-counter; }

.why__card {
  position: relative;
  counter-increment: why-counter;
  overflow: hidden;
}

.why__card::after {
  content: counter(why-counter);
  position: absolute;
  bottom: -0.18em;
  right: var(--sp-2);
  font-family: var(--font-display);
  font-size: 9rem;
  font-weight: 800;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.06);
  stroke: rgba(255, 255, 255, 0.06);
  line-height: 1;
  pointer-events: none;
  z-index: 0;
  letter-spacing: -0.04em;
  user-select: none;
  animation: none;
}

.why__icon,
.why__title,
.why__text { position: relative; z-index: 1; }

/* ── 35. NAV CART BUTTON — DARK HERO OVERRIDE ───────────────── */
.hero .nav { background: transparent; }

/* ── 36. PRODUCTS SECTION — EYEBROW ALIGNMENT ───────────────── */
.products .section__eyebrow::before { background: var(--color-red); }

/* ── 37. HOW-IT-WORKS STEPS — EDITORIAL NUMERALS ────────────── */
.hiw-step__num {
  font-family: var(--font-editorial);
  font-style: italic;
}

/* ── 38. SECTION TRANSITIONS — HERO TO PRODUCTS ─────────────── */
.hero + * { border-top: none; }
.products {
  background: var(--color-white);
  position: relative;
}
.products::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--color-red) 0%, #E84050 50%, transparent 100%);
}

/* ── 39. STAT NUMERALS — DISPLAY TYPE FIX ───────────────────── */
.stat-numeral span {
  font-family: var(--font-display);
  font-size: 2.75rem;
  font-weight: 800;
  color: var(--color-white);
  line-height: 1;
  letter-spacing: -0.03em;
}
.stat-label { font-size: 0.75rem; color: rgba(255,255,255,0.45); letter-spacing: 0.06em; text-transform: uppercase; }

/* ══════════════════════════════════════════════════════════════
   REDESIGN — NEW SECTION STYLES
   Sections 40+: hero die-cut, editorial products grid, kraft why
   section, compact process strip, elevated mockup, contact split.
══════════════════════════════════════════════════════════════ */

/* ── 40. LANG BUTTON HIDING — i18n: Italian launch only ─────── */
.lang-btn[data-lang="de"],
.lang-btn[data-lang="fr"],
.lang-sep--de,
.lang-sep--fr {
  display: none;
}

/* ── 41. HONEYPOT — CSS-hidden, never visible ────────────────── */
.hp-field {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
}

/* ── 42. HERO REDESIGN — full-bleed background with coal overlay ── */

.hero {
  background-color: var(--color-coal);
  background-image: url('assets/images/hero-big.webp');
  background-size: cover;
  background-position: center 30%;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

/* Cinematic vignette — image bleeds through everywhere, darkened where
   text lives. Two stacked gradients: left-to-right for text legibility,
   top-to-bottom to frame the top edge and sectors strip. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right,
      rgba(18, 15, 11, 0.88)  0%,
      rgba(18, 15, 11, 0.80) 25%,
      rgba(18, 15, 11, 0.52) 50%,
      rgba(18, 15, 11, 0.18) 75%,
      rgba(18, 15, 11, 0.04) 100%
    ),
    linear-gradient(to bottom,
      rgba(18, 15, 11, 0.45)  0%,
      rgba(18, 15, 11, 0.00) 22%,
      rgba(18, 15, 11, 0.00) 68%,
      rgba(18, 15, 11, 0.55) 100%
    );
  z-index: 0;
}

/* Full-width layout anchored to the LEFT viewport edge.
   padding-right: 42% reserves the right side for the image to bleed through.
   No centered max-width container — text is never floating. */
.hero__layout {
  flex: 1;
  display: flex;
  align-items: center;
  width: 100%;
  padding-left: clamp(var(--sp-5), 8vw, 120px);
  padding-right: 42%;
  padding-top: calc(var(--nav-height) + clamp(var(--sp-7), 8vh, var(--sp-10)));
  padding-bottom: var(--sp-10);
  position: relative;
  z-index: 1;
}

.hero__left {
  display: flex;
  flex-direction: column;
  max-width: 720px;
}

/* Keep existing hero__badge-top, hero__headline, hero__sub, hero__ctas,
   hero__design-link styles — they apply inside .hero__left */

/* Inline trust strip below CTAs (replaces the right-column vertical stats).
   Each item gets its own contained pill so it stays legible regardless of
   what part of the photo sits behind it — bare text over an image is not
   reliably readable at any opacity. */
.hero__trust-inline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
}

.hero__trust-inline span:not(.htrust-dot) {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.88);
}

.htrust-dot {
  display: none;
}

/* hero__right and hero__die-cut removed — image is now full-bleed background */

/* Sectors strip at bottom of hero — given its own opaque scrim (matching the
   hero::before vignette colour) so it reads consistently regardless of what
   part of the photo sits behind it, and centered as a single cohesive bar
   rather than left-aligned text bleeding into the image. */
.hero__sectors {
  background: rgba(18, 15, 11, 0.92);
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  padding: var(--sp-3) clamp(var(--sp-4), 5vw, var(--sp-10));
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 20px;
  align-items: center;
  position: relative;
  z-index: 1;
}

.hero__sectors-label {
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.55);
  white-space: nowrap;
}

.hero__sector-chip {
  font-size: 0.75rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  transition: color var(--t-fast);
  border-radius: var(--r-full);
  padding: 2px 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
}

.hero__sector-chip:hover {
  color: rgba(255, 255, 255, 0.95);
  border-color: rgba(255, 255, 255, 0.32);
  background: rgba(255, 255, 255, 0.10);
}

.hero__sector-chip:focus-visible {
  outline: 2px solid var(--color-red);
  outline-offset: 2px;
}

/* Mobile: solid overlay — image adds depth, text is fully readable */
@media (max-width: 860px) {
  .hero::before {
    background: rgba(30, 27, 22, 0.90);
  }
  .hero__layout {
    padding-left: var(--sp-5);
    padding-right: var(--sp-5);
    padding-top: calc(var(--nav-height) + var(--sp-8));
    padding-bottom: var(--sp-6);
  }
}

@media (max-width: 640px) {
  .hero__sectors {
    gap: 6px 12px;
    padding: var(--sp-2) var(--sp-3);
  }
  .hero__sector-chip { font-size: 0.6875rem; }
}

/* ── 43. PRODUCTS SECTION — coal editorial grid ──────────────── */

/* Override section 8 and 38 */
.products {
  background: var(--color-coal);
  padding-top: var(--sp-10);
  padding-bottom: var(--sp-10);
  position: relative;
}

.products::before { display: none; } /* remove old red top border */

.products .container {
  position: relative;
  z-index: 1;
}

/* Light overrides for headings on coal */
.section__eyebrow--light {
  color: rgba(255, 255, 255, 0.60);
}
.section__eyebrow--light::before {
  background: var(--color-red);
}
.section__title--light {
  color: var(--color-white);
}
.section__sub--light {
  color: rgba(255, 255, 255, 0.72);
}

.products__header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-5);
  align-items: end;
  margin-bottom: var(--sp-7);
}

@media (max-width: 700px) {
  .products__header { grid-template-columns: 1fr; gap: var(--sp-3); }
}

.products__grid-wrap {
  padding: 0 clamp(var(--sp-3), 4vw, var(--sp-6));
  max-width: 1320px;
  margin: 0 auto;
}

/* Uniform 4-column grid — even card heights, no asymmetry overflow */
.products__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-2);
  background: transparent;
  border: none;
  border-radius: 0;
}

@media (max-width: 960px) {
  .products__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .products__grid {
    grid-template-columns: 1fr;
  }
}

/* Cards on coal background */
.products .product-card {
  background: var(--color-bone);
  border-radius: var(--r-md);
  overflow: hidden;
}
.products .product-card:hover {
  background: var(--color-white);
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28);
}
.products .product-card__name { color: var(--color-ink); }
.products .product-card:hover .product-card__name { color: var(--color-red); }


/* ── 44. PROCESS SECTION — bone background ────────────────────── */
.process-section {
  background: var(--color-bone);
  padding-top: var(--sp-10);
  padding-bottom: var(--sp-10);
  position: relative;
}

/* Section header: left-anchored, editorial spacing */
.svc-header {
  margin-bottom: var(--sp-8);
}

.svc-headline {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.08;
  color: var(--color-ink);
  margin-top: var(--sp-2);
  max-width: 22ch;
}

/* ── SVC GRID — 5-col asymmetric bento layout ────────────────── */
/* Thin 1px kraft lines as separators via gap + grid background  */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: auto auto;
  gap: 1px;
  background: rgba(196, 169, 122, 0.45);
  border: 1px solid rgba(196, 169, 122, 0.45);
  border-radius: var(--r-md);
  overflow: hidden;
  margin-bottom: var(--sp-10);
}

/* ── Individual card positions (Z-pattern: wide-left / narrow-right ↕) */
.svc-card--a { grid-column: 1 / 4; grid-row: 1; }   /* 3 of 5 = 60% */
.svc-card--b { grid-column: 4 / 6; grid-row: 1; }   /* 2 of 5 = 40% */
.svc-card--c { grid-column: 1 / 3; grid-row: 2; }   /* 2 of 5 = 40% */
.svc-card--d { grid-column: 3 / 6; grid-row: 2; }   /* 3 of 5 = 60% */

/* ── Base card ───────────────────────────────────────────────── */
.svc-card {
  background: var(--color-white);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 260px;
}

.svc-card__body {
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

/* Card header: number + label side by side */
.svc-card__head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}

.svc-card__num {
  font-family: var(--font-body);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-kraft-mid);
  flex-shrink: 0;
  line-height: 1;
}

.svc-card__label {
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1.8vw, 1.5rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--color-ink);
  margin: 0;
}

/* Animated red accent rule: extends on card hover */
.svc-card__rule {
  height: 2px;
  width: 28px;
  background: var(--color-red);
  margin-bottom: var(--sp-3);
  border-radius: 1px;
  transition: width 300ms var(--ease-out-expo);
  transform-origin: left;
}

.svc-card:hover .svc-card__rule { width: 52px; }

.svc-card__text {
  font-size: 0.9rem;
  color: var(--color-muted);
  line-height: 1.65;
  max-width: 36ch;
  margin: 0;
}

/* ── Card A: Progetto — consultation photo fills right column ── */
.svc-card--a {
  display: grid;
  grid-template-columns: 1fr 260px;
  min-height: 300px;
}

.svc-card--a .svc-card__body { padding-right: var(--sp-4); }

.svc-card__visual {
  overflow: hidden;
  margin: 0;
  flex-shrink: 0;
}

.svc-card__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 500ms var(--ease-out-expo);
}

.svc-card--a:hover .svc-card__visual img { transform: scale(1.04); }

/* ── Card B: Preventivo — ghost 24h typographic accent ─────── */
.svc-card--b {
  background: var(--color-kraft-bg);
}

.svc-card__ghost-num {
  display: block;
  position: absolute;
  bottom: -0.24em;
  right: -0.02em;
  font-family: var(--font-display);
  font-size: clamp(5.5rem, 14vw, 9.5rem);
  font-weight: 800;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(204, 17, 23, 0.18);
  stroke: rgba(204, 17, 23, 0.18);
  line-height: 1;
  letter-spacing: -0.04em;
  pointer-events: none;
  user-select: none;
  transition: -webkit-text-stroke-color 300ms;
}

.svc-card--b:hover .svc-card__ghost-num {
  -webkit-text-stroke-color: rgba(204, 17, 23, 0.30);
}

/* ── Card C: Campioni — dieline sits bottom-right ──────────── */
.svc-card--c {
  background: var(--color-white);
}

.svc-card__dieline {
  position: absolute;
  bottom: 0;
  right: 0;
  width: clamp(120px, 55%, 180px);
  height: auto;
  color: var(--color-ink);
  opacity: 0.12;
  transition: opacity 350ms var(--ease-out-expo);
}

.svc-card--c:hover .svc-card__dieline { opacity: 0.22; }

/* ── Card D: File grafico — registration marks, top-right ──── */
.svc-card--d {
  background: var(--color-white);
}

.svc-card__regmarks {
  position: absolute;
  bottom: var(--sp-3);
  right: var(--sp-3);
  width: clamp(120px, 40%, 200px);
  height: auto;
  color: var(--color-ink);
  opacity: 0.13;
  transition: opacity 350ms var(--ease-out-expo);
}

.svc-card--d:hover .svc-card__regmarks { opacity: 0.24; }

/* ── Staggered reveal delays for cards ───────────────────────── */
.svc-grid .svc-card--a { transition-delay:   0ms; }
.svc-grid .svc-card--b { transition-delay: 100ms; }
.svc-grid .svc-card--c { transition-delay: 180ms; }
.svc-grid .svc-card--d { transition-delay: 260ms; }

/* ── SVC QUOTE — editorial typographic moment ────────────────── */
.svc-quote {
  position: relative;
  margin: 0 0 var(--sp-10);
  padding: var(--sp-5) 0 var(--sp-5) var(--sp-7);
  border-left: 3px solid var(--color-red);
  max-width: 720px;
  border-top: none;
  border-bottom: none;
}

.svc-quote__mark {
  position: absolute;
  top: -0.05em;
  left: var(--sp-3);
  font-family: var(--font-display);
  font-size: 7rem;
  font-weight: 800;
  line-height: 1;
  color: var(--color-red);
  opacity: 0.07;
  pointer-events: none;
  user-select: none;
  letter-spacing: -0.05em;
}

.svc-quote__text {
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: clamp(1.25rem, 2.5vw, 1.875rem);
  line-height: 1.5;
  color: var(--color-ink);
  margin: 0;
  position: relative;
}

/* ── Responsive: tablet ───────────────────────────────────────── */
@media (max-width: 1024px) {
  .svc-card--a {
    grid-template-columns: 1fr 200px;
  }
}

/* ── Responsive: 780px — collapse grid to 2 columns ──────────── */
@media (max-width: 780px) {
  .svc-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto auto;
  }
  .svc-card--a { grid-column: 1 / 2; grid-row: 1; }
  .svc-card--b { grid-column: 2 / 3; grid-row: 1; }
  .svc-card--c { grid-column: 1 / 2; grid-row: 2; }
  .svc-card--d { grid-column: 2 / 3; grid-row: 2; }

  /* Card A: hide the photo column on tablet, text full width */
  .svc-card--a {
    display: flex;
    flex-direction: column;
  }
  .svc-card--a .svc-card__visual { display: none; }
  .svc-card__ghost-num { font-size: clamp(4rem, 16vw, 7rem); }
}

/* ── Responsive: 560px — single column ───────────────────────── */
@media (max-width: 560px) {
  .svc-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    border-radius: var(--r-sm);
  }
  .svc-card--a,
  .svc-card--b,
  .svc-card--c,
  .svc-card--d {
    grid-column: 1;
    grid-row: auto;
  }
  /* Restore A as flex column without photo */
  .svc-card--a { display: flex; flex-direction: column; }
  .svc-card--a .svc-card__visual { display: none; }
  .svc-card { min-height: 180px; }
  .svc-quote { padding-left: var(--sp-5); }
  .svc-quote__mark { font-size: 5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .svc-card__rule { transition: none; }
  .svc-card__visual img { transition: none; }
  .svc-card--a:hover .svc-card__visual img { transform: none; }
  .svc-card__dieline,
  .svc-card__regmarks { transition: none; }
}

/* Stats bar inside why section — override white-on-dark colors for kraft bg */
.process-section .stats-bar {
  margin-bottom: var(--sp-8);
  border-top-color: var(--color-kraft);
}
.process-section .stat-item {
  border-right-color: var(--color-kraft);
}
.process-section .stat-numeral span {
  color: var(--color-ink);
}
.process-section .stat-label {
  color: var(--color-muted);
}
.process-section .certs-bar {
  background: rgba(0, 0, 0, 0.04);
  border-color: var(--color-kraft);
}
.process-section .cert-item strong { color: var(--color-ink); }
.process-section .cert-item span { color: var(--color-muted); }

/* ── 45. COMPACT PROCESS (HOW IT WORKS) ─────────────────────── */
.process-compact {
  background: var(--color-ink);
  border-radius: var(--r-xl);
  padding: var(--sp-8) var(--sp-7);
  margin-bottom: var(--sp-8);
}

@media (max-width: 700px) {
  .process-compact {
    padding: var(--sp-6) var(--sp-4);
    border-radius: var(--r-lg);
  }
}

.process-compact__header {
  text-align: center;
  margin-bottom: var(--sp-7);
}

.process-compact .section__eyebrow {
  color: var(--color-muted);
}
.process-compact .section__eyebrow::before {
  background: var(--color-red);
}

.process-compact__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--color-ink);
  margin-top: var(--sp-2);
}

.process-compact__sub {
  font-size: 0.9375rem;
  color: var(--color-muted);
  margin-top: var(--sp-2);
  line-height: 1.6;
}

.process-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
  list-style: none;
  margin-bottom: var(--sp-7);
}

@media (max-width: 780px) {
  .process-steps { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .process-steps { grid-template-columns: 1fr; }
}

.process-step {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-3);
  background: rgba(255, 255, 255, 0.72);
  border-radius: var(--r-md);
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.process-step__num {
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: 2.25rem;
  font-weight: 400;
  line-height: 1;
  color: rgba(0, 0, 0, 0.12);
}

.process-step__icon svg { stroke: rgba(204, 17, 23, 0.85); }

.process-step__body { display: flex; flex-direction: column; gap: 6px; }

.process-step__title {
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-ink);
  letter-spacing: -0.01em;
}

.process-step__text {
  font-size: 0.8125rem;
  color: var(--color-muted);
  line-height: 1.55;
}

/* ══════════════════════════════════════════════════════════════
   58. HERO + NAV REDESIGN — cinematic full-bleed composition
   Overrides sections 6 (nav) and 7 (hero) above.
   Swiss editorial aesthetic: asymmetric grid, grain texture,
   three-layer overlay, marquee ticker, hero reveal animation.
══════════════════════════════════════════════════════════════ */

/* ── 58a. NAV: transparent → opaque on scroll ──────────────── */

/* Base nav: full transparent over the hero */
.nav {
  background: transparent;
  border-bottom: 1px solid transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition:
    background    300ms var(--ease-out-expo),
    border-color  300ms var(--ease-out-expo),
    box-shadow    300ms var(--ease-out-expo),
    backdrop-filter 300ms var(--ease-out-expo);
}

/* .nav--transparent: explicit state while over the hero */
.nav--transparent .nav__link              { color: rgba(255, 255, 255, 0.72); }
.nav--transparent .nav__link:hover        { color: var(--color-white); }
.nav--transparent .nav__link::after       { background: var(--color-white); }
.nav--transparent .nav__link.active       { color: var(--color-white); }
.nav--transparent .lang-btn              { color: rgba(255, 255, 255, 0.55); }
.nav--transparent .lang-btn.active       { color: var(--color-white); }
.nav--transparent .lang-btn:hover        { color: var(--color-white); }
.nav--transparent .lang-sep             { color: rgba(255, 255, 255, 0.30); }
.nav--transparent .nav__cart-btn        { color: rgba(255, 255, 255, 0.72); }
.nav--transparent .nav__cart-btn:hover  { color: var(--color-white); }

/* Nav CTA: ghost outline on transparent, filled on scroll */
.nav__cta {
  background: transparent;
  color: var(--color-red);
  border: 1.5px solid var(--color-red);
  transition:
    background 250ms var(--ease-out-expo),
    color      250ms var(--ease-out-expo),
    border-color 250ms var(--ease-out-expo),
    box-shadow 250ms var(--ease-out-expo);
}
.nav--transparent .nav__cta {
  color: rgba(255, 255, 255, 0.90);
  border-color: rgba(255, 255, 255, 0.42);
  background: rgba(255, 255, 255, 0.06);
}
.nav--transparent .nav__cta:hover {
  color: var(--color-white);
  border-color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.12);
}
.nav__cta:hover {
  background: var(--color-red);
  color: var(--color-white);
  box-shadow: var(--shadow-btn-hover);
}
.nav__cta:focus-visible {
  outline: 2px solid var(--color-red);
  outline-offset: 3px;
}

/* Scrolled state: frosted glass panel */
.nav--scrolled {
  background: rgba(255, 255, 255, 0.97);
  border-color: var(--color-border);
  box-shadow: var(--shadow-nav);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
}
/* Remove the old .scrolled class from section 6 — it still works
   but the new .nav--scrolled is the canonical state */
.nav.scrolled {
  background: rgba(255, 255, 255, 0.97);
  border-color: var(--color-border);
  box-shadow: var(--shadow-nav);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
}

/* Logo: crisp at 52px height */
.nav__logo img {
  height: 44px;
  width: auto;
  display: block;
}

/* Transparent nav: dark gradient at the top makes the full-colour logo legible
   without a visible box or halo around it */
.nav--transparent {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.50) 0%, rgba(0, 0, 0, 0.00) 100%);
}

/* Hamburger lines: use .nav__hamburger-line for scoped targeting */
.nav__hamburger-line {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-ink);
  border-radius: 1px;
  transition: transform 280ms var(--ease-out-expo),
              opacity   280ms var(--ease-out-expo),
              background 280ms var(--ease-out-expo);
}

/* Hamburger X morph — pure CSS, no JS needed for the visual */
.nav__hamburger.open .nav__hamburger-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav__hamburger.open .nav__hamburger-line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.nav__hamburger.open .nav__hamburger-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* On transparent nav: hamburger lines are white */
.nav--transparent .nav__hamburger-line { background: rgba(255, 255, 255, 0.88); }
.nav--transparent .nav__hamburger.open .nav__hamburger-line { background: var(--color-white); }

@media (max-width: 900px) {
  /* Override the old span selector from section 6 */
  .nav__hamburger span { display: none; }
  .nav__hamburger-line { display: block; }
  .nav__hamburger.open .nav__hamburger-line { background: var(--color-white); }
}


/* ── 58b. HERO: three-layer overlay + full-bleed composition ─── */

/* Full viewport hero, flexbox column so ticker pins to bottom */
.hero {
  background-color: var(--color-coal);
  background-image: url('assets/images/hero-big.webp');
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  border-bottom: none;
}

/* Layer 1 + 2: directional text-legibility gradient.
   Left side strong (text zone), right side transparent (product box visible).
   Bottom vignette frames the ticker. Top is handled by nav gradient. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to right,
      rgba(10,  8,  6, 0.96)  0%,
      rgba(10,  8,  6, 0.88) 30%,
      rgba(10,  8,  6, 0.55) 52%,
      rgba(10,  8,  6, 0.08) 100%
    ),
    linear-gradient(
      to bottom,
      rgba(10,  8,  6, 0.00)  0%,
      rgba(10,  8,  6, 0.00) 60%,
      rgba(10,  8,  6, 0.80) 100%
    );
  z-index: 0;
  pointer-events: none;
}

/* Layer 3: atmospheric grain texture (GPU composited via opacity only) */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  opacity: 0.028;
  z-index: 0;
  pointer-events: none;
}

/* Cinematic photo settle: very subtle scale in on load.
   Applied to a pseudo-element so transform doesn't affect layout. */
@keyframes heroPhotoSettle {
  from { transform: scale(1.04); }
  to   { transform: scale(1.00); }
}

.hero {
  animation: heroPhotoSettle 1800ms var(--ease-out-expo) both;
}

/* Two-zone asymmetric layout: text on left, image bleeds right.
   padding-right: 42% leaves the right 40% clear for the warehouse box. */
.hero__layout {
  flex: 1;
  display: flex;
  align-items: center;
  width: 100%;
  padding-left: clamp(var(--sp-5), 8vw, 120px);
  padding-right: 42%;
  padding-top: calc(var(--nav-height) + clamp(var(--sp-7), 8vh, var(--sp-10)));
  padding-bottom: var(--sp-10);
  position: relative;
  z-index: 1;
}

.hero__left {
  display: flex;
  flex-direction: column;
  max-width: 640px;
}

/* ── 58c. HERO EYEBROW: red rule + small-caps label ─────────── */
.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: var(--sp-4);
  margin-top: 0;
}

.hero__eyebrow-rule {
  display: inline-block;
  flex-shrink: 0;
  width: 24px;
  height: 2px;
  background: var(--color-red);
  border-radius: 1px;
}

/* ── 58d. HERO HEADLINE ─────────────────────────────────────── */
.hero__headline {
  font-family: var(--font-display);
  font-size: clamp(2.875rem, 5.2vw, 4.75rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.06;
  color: var(--color-white);
  margin-bottom: var(--sp-5);
  text-shadow: 0 2px 48px rgba(0, 0, 0, 0.50);
  /* Reset the old heroFadeUp animation — replaced by data-hero-reveal system */
  animation: none;
}

/* Desktop manual line break — hidden on mobile */
.hero__br--desktop { display: none; }
@media (min-width: 640px) {
  .hero__br--desktop { display: block; }
}

/* ── 58e. HERO SUBHEADING ───────────────────────────────────── */
.hero__sub {
  font-size: clamp(0.9375rem, 1vw, 1.0625rem);
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.72;
  max-width: 44ch;
  margin-bottom: var(--sp-6);
  text-shadow: none;
  animation: none;
}

/* ── 58f. CTA GROUP ─────────────────────────────────────────── */
.hero__ctas {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
  animation: none;
}

/* Hero primary CTA — refined pill with 28px radius (not fully round) */
.btn--hero-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--color-red);
  color: var(--color-white);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  padding: 15px 26px;
  border-radius: 28px;
  text-decoration: none;
  box-shadow: 0 4px 20px rgba(204, 17, 23, 0.32);
  transition:
    transform   220ms var(--ease-out-expo),
    box-shadow  220ms var(--ease-out-expo),
    background  150ms;
  white-space: nowrap;
}
.btn--hero-primary:hover {
  background: var(--color-red-dark);
  transform: translateY(-2px);
  box-shadow: 0 10px 32px rgba(204, 17, 23, 0.46);
}
.btn--hero-primary:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.85);
  outline-offset: 3px;
}

/* Arrow nudges right on hover — communicates forward direction */
.hero__cta-arrow {
  transition: transform 200ms var(--ease-out-expo);
}
.btn--hero-primary:hover .hero__cta-arrow {
  transform: translateX(3px);
}

/* Secondary hero CTA — outlined, clearly visible over dark hero */
.btn--hero-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: transparent;
  color: var(--color-white);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  padding: 14px 24px;
  border-radius: 28px;
  border: 2px solid rgba(255, 255, 255, 0.60);
  text-decoration: none;
  transition:
    border-color 200ms var(--ease-out-expo),
    background   200ms var(--ease-out-expo),
    color        200ms var(--ease-out-expo);
  white-space: nowrap;
}
.btn--hero-secondary:hover {
  border-color: var(--color-white);
  background: rgba(255, 255, 255, 0.10);
}
.btn--hero-secondary:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.85);
  outline-offset: 3px;
}

/* ── 58g. PROOF BAR: flat dot-separated trust signals ───────── */
.hero__proof {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-bottom: var(--sp-5);
}

.hero__proof-item {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: rgba(255, 255, 255, 0.72);
}

.hero__proof-item--strong {
  font-weight: 700;
  color: rgba(255, 255, 255, 0.92);
}

.hero__proof-dot {
  color: rgba(255, 255, 255, 0.22);
  font-size: 0.6875rem;
  line-height: 1;
  user-select: none;
}

/* ── 58h. SCROLL INDICATOR: pulsing chevron ─────────────────── */
@keyframes scrollPulse {
  0%, 100% { opacity: 0.3; }
  50%       { opacity: 0.8; }
}

.hero__scroll-indicator {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  color: rgba(255, 255, 255, 0.55);
  animation: scrollPulse 2s ease-in-out infinite;
  transition: opacity 300ms var(--ease-out-expo);
  margin-top: var(--sp-1);
}

/* JS adds this class after 80px scroll */
.hero__scroll-indicator.is-hidden {
  opacity: 0;
  pointer-events: none;
}

/* ── 58i. HERO REVEAL ANIMATION SYSTEM ─────────────────────── */
/* Controlled by JS: body.is-loaded triggers animations.
   Each [data-hero-reveal] element defines its delay via
   [data-reveal-delay] (read in JS, applied as --reveal-delay). */
@keyframes heroReveal {
  from {
    opacity: 0;
    transform: translateY(var(--reveal-dy, 20px));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

[data-hero-reveal] {
  opacity: 0;
}

body.is-loaded [data-hero-reveal] {
  animation: heroReveal var(--reveal-dur, 650ms) var(--ease-out-expo)
             var(--reveal-delay, 0ms) both;
}

/* ── 58j. MARQUEE TICKER ───────────────────────────────────── */
.hero__ticker {
  position: relative;
  z-index: 1;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(12, 10, 8, 0.82);
  overflow: hidden;
  /* Reserve height so there's no layout shift */
  height: 42px;
}

/* Accessible fallback: visually hidden sector links
   so keyboard users can still reach them without the ticker */
.hero__ticker-a11y {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}

/* The scrolling track: doubles the content for seamless loop */
.hero__ticker-track {
  display: flex;
  align-items: center;
  white-space: nowrap;
  height: 100%;
  /* At 40s the scroll feels purposeful but not rushed */
  animation: ticker 40s linear infinite;
  will-change: transform;
}

@keyframes ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Pause on hover — gives users time to read before clicking */
.hero__ticker:hover .hero__ticker-track {
  animation-play-state: paused;
}

.hero__ticker-item {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--sp-3);
}

.hero__ticker-item a {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  transition: color 150ms;
}

.hero__ticker-item a:hover      { color: rgba(255, 255, 255, 0.92); }
.hero__ticker-item a:focus-visible {
  outline: 2px solid var(--color-red);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

.hero__ticker-sep {
  color: rgba(255, 255, 255, 0.18);
  font-size: 0.625rem;
  margin-left: var(--sp-3);
  user-select: none;
}

/* Reduced motion: stop animation, wrap items instead */
@media (prefers-reduced-motion: reduce) {
  .hero__ticker-track {
    animation: none;
    flex-wrap: wrap;
    white-space: normal;
    height: auto;
    padding: var(--sp-2) 0;
  }
  .hero__ticker {
    height: auto;
  }
  /* Also kill the hero photo settle and all reveal animations */
  .hero { animation: none; }
  [data-hero-reveal] { opacity: 1; }
  body.is-loaded [data-hero-reveal] { animation: none; }
  .hero__scroll-indicator { animation: none; opacity: 0.55; }
}

/* ── 58k. MOBILE OVERRIDES ──────────────────────────────────── */
@media (max-width: 860px) {
  /* Darker overlay on mobile so the text zone is fully readable */
  .hero::before {
    background:
      linear-gradient(
        to bottom,
        rgba(10, 8, 6, 0.75)  0%,
        rgba(10, 8, 6, 0.65) 55%,
        rgba(10, 8, 6, 0.85) 100%
      );
  }

  .hero {
    background-position: 70% center;
  }

  .hero__layout {
    padding-left: var(--sp-5);
    padding-right: var(--sp-5);
    padding-top: calc(var(--nav-height) + var(--sp-8));
    padding-bottom: var(--sp-6);
  }

  .hero__left { max-width: none; }

  .nav--transparent .nav__hamburger-line { background: rgba(255, 255, 255, 0.88); }
}

@media (max-width: 640px) {
  .hero__headline { font-size: clamp(2.25rem, 8.5vw, 3rem); }

  .hero__ctas {
    flex-direction: column;
    width: 100%;
    gap: var(--sp-2);
  }
  .btn--hero-primary,
  .btn--hero-secondary {
    width: 100%;
    justify-content: center;
  }

  .hero__proof { gap: 4px 8px; }
}

/* ── 58l. SCROLL INDICATOR auto-hide ───────────────────────── */
/* JS applies .is-hidden after 80px scroll — handled in main.js */

.process-compact__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  text-align: center;
}

.process-compact__note {
  font-size: 0.8125rem;
  color: var(--color-muted);
}

.process-compact__note strong { color: var(--color-ink); }

@media (max-width: 560px) {
  .process-section {
    padding-top: var(--sp-10);
    padding-bottom: var(--sp-10);
  }
}

/* ── 46. MOCKUP SECTION — elevated dark stage ────────────────── */
.mockup-section {
  background: var(--color-coal);
  position: relative;
}

.mockup-section .section__eyebrow { color: rgba(255, 255, 255, 0.38); }
.mockup-section .section__eyebrow::before { background: var(--color-red); }
.mockup-section .section__title { color: var(--color-white); }
.mockup-section .section__sub { color: rgba(255, 255, 255, 0.55); }

.mockup-section .mockup__layout {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--r-xl);
  background: rgba(255, 255, 255, 0.03);
  padding: var(--sp-5);
}

/* Canvas topbar — dark chrome */
.mockup-section .canvas-frame__topbar {
  background: rgba(255, 255, 255, 0.04);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
.mockup-section .canvas-product-label { color: rgba(255, 255, 255, 0.35); }
.mockup-section .canvas-frame__dots span { background: rgba(255, 255, 255, 0.12); }

/* Canvas frame in dark context */
.mockup-section .canvas-frame {
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.05);
}

.mockup-section .mockup__footer-cta {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--r-lg);
  margin-top: var(--sp-6);
  padding: var(--sp-4) var(--sp-5);
}

.mockup-section .mockup__footer-cta-text strong { color: var(--color-white); }
.mockup-section .mockup__footer-cta-text span { color: rgba(255, 255, 255, 0.55); }
.mockup-section .mockup__trust-list li { color: rgba(255, 255, 255, 0.38); }

/* Controls — dark theme */
.mockup-section .control-label { color: rgba(255, 255, 255, 0.65); }
.mockup-section .control-group[data-step]::before { color: var(--color-red); }

.mockup-section .product-tab {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.55);
  border-color: rgba(255, 255, 255, 0.10);
}
.mockup-section .product-tab.active,
.mockup-section .product-tab:hover {
  background: var(--color-red);
  color: var(--color-white);
  border-color: var(--color-red);
}
.mockup-section .text-input {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--color-white);
}
.mockup-section .text-input::placeholder { color: rgba(255, 255, 255, 0.3); }
.mockup-section .text-input:focus { border-color: rgba(255, 255, 255, 0.4); }
.mockup-section .preview-hint,
.mockup-section .upload-zone__text { color: rgba(255, 255, 255, 0.65); }
.mockup-section .upload-zone {
  border-color: rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.03);
}
.mockup-section .upload-zone:hover { border-color: var(--color-red); }
.mockup-section .upload-zone.drag-over {
  border-color: var(--color-red);
  background: rgba(204, 17, 23, 0.08);
}
.mockup-section .upload-zone__hint { color: rgba(255, 255, 255, 0.38); }
.mockup-section .link-style { color: rgba(255, 255, 255, 0.75); }
.mockup-section .upload-filename { color: rgba(255, 255, 255, 0.45); }
.mockup-section .optional { color: rgba(255, 255, 255, 0.3); }
.mockup-section .color-preset.active { border-color: var(--color-white); }

/* Ghost button in dark context */
.mockup-section .btn--ghost {
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.65);
}
.mockup-section .btn--ghost:hover {
  border-color: rgba(255, 255, 255, 0.5);
  color: var(--color-white);
}

/* ── 47. FAQ SECTION — editorial treatment ───────────────────── */
.faq-section {
  background: var(--color-kraft-bg);
}

.faq-section .section__title { color: var(--color-ink); }

/* ── 48. CONTACT SECTION — coal split layout ─────────────────── */
.contact-section {
  background: var(--color-coal);
  position: relative;
}

.contact-section .section__eyebrow { display: none; } /* replaced by contact__eyebrow below */

.contact-section__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--sp-6), 7vw, var(--sp-12));
  align-items: start;
  padding-top: var(--sp-10);
  padding-bottom: var(--sp-10);
}

@media (max-width: 860px) {
  .contact-section__layout {
    grid-template-columns: 1fr;
    padding-top: var(--sp-8);
    padding-bottom: var(--sp-8);
  }
}

.contact-section__left {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  position: sticky;
  top: calc(var(--nav-height) + var(--sp-4));
}

@media (max-width: 860px) {
  .contact-section__left { position: static; }
}

.contact__eyebrow {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.55);
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}

.contact__eyebrow::before {
  content: '';
  display: block;
  width: 20px;
  height: 2px;
  background: var(--color-red);
  flex-shrink: 0;
}

.contact__headline {
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.08;
  color: var(--color-white);
  margin: 0;
}

.contact__sub {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.68);
  line-height: 1.7;
  max-width: 42ch;
}

.contact__direct {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.contact__direct-item {
  font-size: 0.9375rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.70);
  text-decoration: none;
  transition: color var(--t-fast);
  display: flex;
  align-items: center;
  gap: 8px;
}
.contact__direct-item:hover { color: var(--color-white); }

.contact__direct-item::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-red);
  flex-shrink: 0;
}

.contact__direct .sidebar-swiss {
  margin-top: var(--sp-2);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.contact__direct .sidebar-swiss strong {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-ink);
}

.contact__direct .sidebar-swiss span {
  display: block;
  font-size: 0.75rem;
  color: var(--color-muted);
}

.contact__reassurance {
  display: flex;
  gap: var(--sp-2);
  align-items: flex-start;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.60);
  line-height: 1.55;
}
.contact__reassurance svg { flex-shrink: 0; stroke: rgba(255, 255, 255, 0.50); margin-top: 2px; }
.contact__reassurance strong { color: rgba(255, 255, 255, 0.80); }

/* Form card on coal */
.contact-section__right .contact-form {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--r-xl);
  padding: var(--sp-6);
}

@media (max-width: 480px) {
  .contact-section__right .contact-form { padding: var(--sp-4) var(--sp-3); }
}

/* Form labels on dark */
.contact-section__right label,
.contact-section__right .form-hint {
  color: rgba(255, 255, 255, 0.65);
}

.contact-section__right input,
.contact-section__right select,
.contact-section__right textarea {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--color-white);
}
.contact-section__right input::placeholder,
.contact-section__right textarea::placeholder { color: rgba(255, 255, 255, 0.28); }

.contact-section__right input:focus,
.contact-section__right select:focus,
.contact-section__right textarea:focus {
  border-color: var(--color-red);
  background: rgba(255, 255, 255, 0.09);
  box-shadow: 0 0 0 3px rgba(204, 17, 23, 0.18);
}

.contact-section__right select {
  color: rgba(255, 255, 255, 0.80);
}

.contact-section__right .checkbox-label {
  color: rgba(255, 255, 255, 0.52);
  font-size: 0.8125rem;
}

.contact-section__right .required { color: var(--color-red); }

.contact-section__right .form-feedback--success {
  background: rgba(22, 163, 74, 0.12);
  border: 1px solid rgba(22, 163, 74, 0.25);
  color: #86efac;
}

.contact-section__right .form-feedback--error {
  background: rgba(204, 17, 23, 0.12);
  border: 1px solid rgba(204, 17, 23, 0.25);
  color: rgba(255, 255, 255, 0.75);
}

/* ── 49. FOOTER: updated link styles ─────────────────────────── */
.footer__legal a { transition: color var(--t-fast); }
.footer__legal a:hover { color: var(--color-red); }

/* ── 50. IMPRESSUM PAGE ──────────────────────────────────────── */
/* Critical nav/body declarations moved from impressum.html <style>  */
.impr-nav    { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: var(--color-white); border-bottom: 1px solid var(--color-border); }
.impr-inner  { display: grid; grid-template-columns: auto 1fr auto; align-items: center; height: var(--nav-height); }

/* Inline data-entry placeholder marker */
.placeholder-required {
  color: var(--color-error);
  font-size: 0.8125rem;
  font-weight: 600;
}

/* Impressum structural helpers (dl layout used inline — keeping in CSS) */
.impr-dl   { display: flex; flex-direction: column; gap: 8px; }
.impr-row  { display: flex; gap: 16px; flex-wrap: wrap; }
.impr-dt   { font-weight: 600; min-width: 200px; color: var(--color-muted); }
.impr-section {
  margin-bottom: var(--sp-5);
}
.impr-section h2 {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 700;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-border);
}
.impr-h1 {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--color-ink);
  margin-bottom: var(--sp-5);
}
.impr-main {
  padding-top: calc(var(--nav-height) + var(--sp-6));
  padding-bottom: var(--sp-10);
}
.impr-content { max-width: 720px; }
.impr-footer-note {
  margin-top: var(--sp-6);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--color-border);
  color: var(--color-gray-500);
  font-size: 0.8125rem;
}
.impr-muted-text {
  color: var(--color-muted);
  font-size: 0.9375rem;
  line-height: 1.7;
}
.impr-link { color: var(--color-red); }

/* ── 51. CART CONFIRM-CLEAR INLINE PANEL ────────────────────── */
.cart-confirm-clear {
  margin-top: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: var(--color-error-bg);
  border: 1px solid rgba(220, 38, 38, 0.25);
  border-radius: var(--r-md);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.cart-confirm-clear__msg {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-ink);
  margin: 0;
}
.cart-confirm-clear__actions {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
}

/* ── 52. PROD CTA BOX — PHONE LINE ──────────────────────────── */
.prod-cta-box__tel {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 4px;
}
.prod-cta-box__tel a {
  color: var(--color-white);
  font-weight: 600;
  text-decoration: none;
}
.prod-cta-box__tel a:hover { text-decoration: underline; }

/* ══════════════════════════════════════════════════════════════
   59. STORY SECTION — editorial photo grid (coal background)
   Overrides the legacy .story-section kraft styles from section 20.
══════════════════════════════════════════════════════════════ */

.story-section {
  background: var(--color-coal);
  background-image: none;
  padding: var(--sp-12) 0;
}

.story-section__header {
  margin-bottom: var(--sp-6);
}

.section__eyebrow--light {
  color: rgba(255, 255, 255, 0.45);
}

.story-section__headline {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 4vw, 3.5rem);
  font-weight: 800;
  color: var(--color-white);
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin: var(--sp-2) 0 0;
  max-width: 20ch;
}

/* Two-column photo grid: tall card left, two stacked right */
.story-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}

.story-photo {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--color-gray-100);
}

.story-photo img {
  display: block;
  transition: transform 700ms var(--ease-out-expo);
}

.story-photo:hover img {
  transform: scale(1.04);
}

.story-photo--tall {
  min-height: 560px;
}

.story-photo__stack {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.story-photo--sm {
  flex: 1;
  min-height: 268px;
}

/* Frosted glass label overlay */
.story-photo__label {
  position: absolute;
  bottom: var(--sp-3);
  left: var(--sp-3);
  background: rgba(18, 15, 11, 0.65);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--r-md);
  padding: 10px var(--sp-3);
}

.story-photo__num {
  display: block;
  font-size: 0.5625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--color-red);
  margin-bottom: 2px;
}

.story-photo__label p {
  font-size: 0.8125rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
  margin: 0;
  line-height: 1.3;
}

/* Full-width delivery photo row */
.story-delivery {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-md);
  min-height: 300px;
}

.story-delivery__img {
  display: block;
  object-position: center 55%;
  transition: transform 700ms var(--ease-out-expo);
}

.story-delivery:hover .story-delivery__img {
  transform: scale(1.03);
}

.story-delivery__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding-left: clamp(var(--sp-5), 6vw, 80px);
  background: linear-gradient(
    to right,
    rgba(18, 15, 11, 0.80) 0%,
    rgba(18, 15, 11, 0.40) 55%,
    rgba(18, 15, 11, 0.04) 100%
  );
}

.story-delivery__text {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 2.8vw, 2.25rem);
  font-weight: 800;
  color: var(--color-white);
  line-height: 1.2;
  letter-spacing: -0.02em;
  max-width: 22ch;
  margin: 0;
}

/* Mobile: single column */
@media (max-width: 640px) {
  .story-grid { grid-template-columns: 1fr; }
  .story-photo--tall { min-height: 360px; }
  .story-photo__stack { flex-direction: row; }
  .story-photo--sm { min-height: 180px; }
  .story-delivery { min-height: 200px; }
}

@media (prefers-reduced-motion: reduce) {
  .story-photo img,
  .story-delivery__img { transition: none; }
  .story-photo:hover img,
  .story-delivery:hover .story-delivery__img { transform: none; }
}