/* ==========================================================================
   RACEON, COMPLETE SITE DESIGN SYSTEM
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

@font-face {
  font-family: "Racing Mega Race";
  src: url("../assets/fonts/RacingMegaRace-Regular.otf") format("opentype"),
       url("../Coming Soon Page/assets/fonts/RacingMegaRace-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg-offwhite:       #FAFAFA;
  --bg-white:          #FFFFFF;
  --bg-panel:          #F3F3F1;
  --ink-dark:          #111111;
  --ink-soft:          #1A1A1A;
  --red-oxblood:       #B3121B;
  --red-oxblood-hover: #940D14;
  --gray-light:        #E8E8E8;
  --gray-muted:        #8A8A8A;
  --gray-dark:         #4A4A4A;
  --font-brand:        "Racing Mega Race", sans-serif;
  --font-body:         "Inter", system-ui, -apple-system, sans-serif;
  --container-max:     1280px;
  --ease:              cubic-bezier(0.16, 1, 0.3, 1);
  --transition:        all 0.3s var(--ease);
}

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
  background: var(--bg-offwhite);
}

body {
  font-family: var(--font-body);
  color: var(--ink-dark);
  background: var(--bg-offwhite);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 2.5rem;
}

/* ══════════════════════════════════════════════════════════
   PREMIUM CUSTOM CURSOR
   ══════════════════════════════════════════════════════════ */

/* Hides native cursor on desktop fine pointer devices, except interactive form inputs and modals */
@media (pointer: fine) {
  *:not(input):not(textarea):not(select):not(button):not(.cms-modal-overlay):not(.cms-modal):not(.admin-login-overlay),
  *:not(input):not(textarea):not(select):not(button):not(.cms-modal-overlay):not(.cms-modal):not(.admin-login-overlay)::before,
  *:not(input):not(textarea):not(select):not(button):not(.cms-modal-overlay):not(.cms-modal):not(.admin-login-overlay)::after {
    cursor: none !important;
  }
  
  input, textarea {
    cursor: text !important;
  }
  
  button, select, a {
    cursor: pointer !important;
  }

  .cms-modal-overlay,
  .cms-modal-overlay *
  .admin-login-overlay,
  .admin-login-overlay * {
    cursor: auto !important;
  }
}

/* Base cursor elements - high z-index, hardware accelerated */
.cursor__logo {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 999998;
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.04s linear;
  will-change: transform;
}

.cursor__dot {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 999999;
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.04s linear;
  will-change: transform;
}

/* Small filled red dot - snaps to mouse position */
.cursor__dot {
  width: 10px;
  height: 10px;
  margin-left: -5px;
  margin-top: -5px;
  background-color: var(--red-oxblood);
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(179, 18, 27, 0.7);
  transition: opacity 0.25s ease, transform 0.04s linear, width 0.25s var(--ease), height 0.25s var(--ease), margin 0.25s var(--ease), background-color 0.25s ease;
}

/* Mini RaceOn Logo trailing behind the dot */
.cursor__logo {
  width: 36px;
  height: auto;
  margin-left: -18px;
  margin-top: -18px;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.45));
  transition: opacity 0.25s ease, width 0.3s var(--ease), height 0.3s var(--ease), margin 0.3s var(--ease), filter 0.3s ease;
}

/* Hover state on interactive elements */
.cursor__logo--hover {
  width: 52px;
  margin-left: -26px;
  margin-top: -26px;
  filter: drop-shadow(0 0 14px rgba(179, 18, 27, 0.85)) drop-shadow(0 2px 10px rgba(0, 0, 0, 0.6));
}

.cursor__dot--hover {
  width: 14px;
  height: 14px;
  margin-left: -7px;
  margin-top: -7px;
  background-color: #E61C24;
  box-shadow: 0 0 16px rgba(230, 28, 36, 0.9);
}

/* ── Section Padding ── */
.section { padding: 7rem 0; }
.section--compact { padding: 5rem 0; }
.section--white  { background: var(--bg-white); }
.section--panel  { background: var(--bg-panel); }


/* ── Decorative Logo Watermarks ── */
.deco-art {
  position: absolute;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  opacity: 0.07;
  filter: brightness(0);
  object-fit: contain;
}

/* Watermark, bottom-right of brand/intro section */
.deco-art--bike {
  width: clamp(280px, 35vw, 480px);
  bottom: -1rem;
  right: -1rem;
  opacity: 0.07;
}

/* Capabilities section, top-left */
.deco-art--helmet {
  width: clamp(240px, 28vw, 400px);
  top: 2rem;
  left: -1rem;
  opacity: 0.06;
}

/* B2B section, right side */
.deco-art--suit {
  width: clamp(260px, 32vw, 440px);
  top: 50%;
  right: -2rem;
  transform: translateY(-50%);
  opacity: 0.06;
}

/* Contact section, bottom-left */
.deco-art--flag {
  width: clamp(240px, 26vw, 380px);
  bottom: 0rem;
  left: -1rem;
  opacity: 0.06;
}

/* Section content must sit above decorations */
.deco-art + .container
.deco-art ~ .container {
  position: relative;
  z-index: 1;
}

/* ── Label ── */
.label {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gray-muted);
}
.label::before {
  content: '';
  width: 20px;
  height: 1px;
  background: var(--red-oxblood);
}

/* ── Headings ── */
.heading-xl {
  font-family: var(--font-body);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--ink-dark);
}

.heading-lg {
  font-family: var(--font-body);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--ink-dark);
}

.heading-md {
  font-family: var(--font-body);
  font-size: clamp(1.4rem, 2.5vw, 1.85rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink-dark);
}

/* Accent word */
.accent { color: var(--red-oxblood); }

/* ── Body Copy ── */
.body-copy {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--gray-dark);
  max-width: 600px;
}

.body-copy--sm {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--gray-muted);
}

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.88rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.95rem 2.15rem;
  border-radius: 2px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: var(--transition);
  white-space: nowrap;
}

.btn--red {
  background: var(--red-oxblood);
  color: #FAFAFA;
  border-color: var(--red-oxblood);
}
.btn--red:hover {
  background: var(--red-oxblood-hover);
  border-color: var(--red-oxblood-hover);
  transform: translateY(-2px);
}

.btn--outline-dark {
  background: transparent;
  color: var(--ink-dark);
  border-color: var(--ink-dark);
}
.btn--outline-dark:hover {
  background: var(--ink-dark);
  color: #FAFAFA;
  transform: translateY(-2px);
}

.btn--outline-light {
  background: rgba(255,255,255,0.05);
  color: #FAFAFA;
  border-color: rgba(255,255,255,0.35);
  backdrop-filter: blur(8px);
}
.btn--outline-light:hover {
  background: rgba(255,255,255,0.15);
  border-color: #FAFAFA;
  transform: translateY(-2px);
}

/* ── Ember Divider ── */
.ember-divider {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin: 0 0 3.5rem;
}
.ember-divider--center { justify-content: center; }
.ember-divider__line {
  flex: 1;
  height: 1.5px;
  background: var(--ink-dark);
}
.ember-divider__label {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--gray-muted);
  text-transform: uppercase;
}

/* ── Section Wave Transitions ── */
/* NOTE: these are comma-separated selector LISTS. They were previously written
   without commas, which made them descendant selectors ("a .wave-down--offwhite
   inside a .wave-up--dark inside a .wave-up...") that matched nothing at all, so
   the dividers rendered as unsized inline SVGs with a baseline gap. */
.wave-down,
.wave-up,
.wave-up--dark,
.wave-down--offwhite {
  position: relative;
  width: 100%;
  line-height: 0;
  font-size: 0;
  margin-top: -1px;
  margin-bottom: -1px;
  z-index: 3;
  overflow: hidden;
}
.wave-down svg,
.wave-up svg,
.wave-up--dark svg,
.wave-down--offwhite svg {
  display: block;
  width: 100%;
  height: 60px;
  /* Slightly wider than the container so the curve's end points sit just
     outside the visible area and can't leave a hairline at either edge. */
  margin-left: -1px;
  margin-right: -1px;
  width: calc(100% + 2px);
}
.wave-down--offwhite { background: var(--ink-dark); }
.wave-down--offwhite svg .fill { fill: var(--bg-offwhite); }
.wave-up--dark { background: var(--bg-white); margin-bottom: -3px; }
.wave-up--dark svg .fill { fill: var(--ink-dark); }

/* ══════════════════════════════════════════════════════════
   HEADER
   ══════════════════════════════════════════════════════════ */
.header {
  position: fixed;
  top: 0; left: 0; width: 100%;
  z-index: 1000;
  padding: 1.4rem 0;
  transition: var(--transition);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.header.scrolled {
  background: var(--bg-offwhite);
  border-bottom: 1px solid var(--gray-light);
  padding: 1rem 0;
  box-shadow: 0 4px 20px rgba(0,0,0,0.04);
}

.header__container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 1.25rem;
  padding-right: 1.5rem;
}

.header__brand {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex-shrink: 0;
  margin-left: -0.25rem;
}

.header__logo {
  height: 38px;
  width: auto;
  margin: 0;
  object-fit: contain;
  transition: transform 0.25s ease;
}
.header.scrolled .header__logo {
  height: 38px;
  margin: 0;
}
.header__brand:hover .header__logo {
  transform: scale(1.05);
}

.header__title {
  font-family: var(--font-brand);
  font-size: 1.85rem;
  letter-spacing: 0.02em;
  color: #FAFAFA;
  line-height: 1;
  white-space: nowrap;
  transition: color 0.3s ease;
  -webkit-text-stroke: 1.5px #000000;
  text-stroke: 1.5px #000000;
  paint-order: stroke fill;
  text-shadow:
    -1px -1px 0 #000000,
     1px -1px 0 #000000,
    -1px  1px 0 #000000,
     1px  1px 0 #000000;
}
.header.scrolled .header__title { color: var(--ink-dark); }
.header__title-accent {
  color: var(--red-oxblood);
}

.header__nav-list {
  display: flex;
  align-items: center;
  gap: 2.5rem;
}

.header__nav-link {
  font-family: var(--font-body);
  font-size: 0.87rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(250,250,250,0.85);
  transition: color 0.22s ease;
  position: relative;
}
.header.scrolled .header__nav-link { color: var(--gray-dark); }
.header__nav-link:hover { color: #FAFAFA; }
.header.scrolled .header__nav-link:hover { color: var(--red-oxblood); }

/* Active Nav Link Highlighter */
.header__nav-link.active {
  color: #FAFAFA !important;
  font-weight: 700;
}
.header.scrolled .header__nav-link.active {
  color: var(--red-oxblood) !important;
}
.header__nav-link.active::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: var(--red-oxblood);
  border-radius: 2px;
}

.header__cta {
  font-family: var(--font-body);
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 0.65rem 1.35rem;
  background: var(--red-oxblood);
  color: #FAFAFA;
  border-radius: 2px;
  border: 1px solid var(--red-oxblood);
  transition: var(--transition);
}
.header__cta:hover { background: var(--red-oxblood-hover); border-color: var(--red-oxblood-hover); }

.header__mobile-toggle {
  display: none;
  background: transparent;
  border: none;
  cursor: pointer;
  color: #FAFAFA;
}
.header.scrolled .header__mobile-toggle { color: var(--ink-dark); }

/* ══════════════════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  min-height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #0B0C0E;
}

.hero__video-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}

.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  transform: scale(1.06);
  filter: brightness(0.8) contrast(1.2) saturate(0.7);
  pointer-events: none;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg,
      rgba(11,12,14,0.85) 0%,
      rgba(11,12,14,0.45) 50%,
      rgba(11,12,14,0.1)  100%),
    linear-gradient(180deg,
      rgba(11,12,14,0.35) 0%,
      transparent 45%,
      rgba(11,12,14,0.9)  100%);
}

.hero__inner {
  position: relative;
  z-index: 2;
  padding-top: 7rem;
  padding-bottom: 7rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

/* Pin hero content to the actual left edge of the viewport */
.hero .container {
  max-width: 100%;
  margin-left: 0;
  padding-left: 4rem;
  padding-right: 0;
}

.hero__panel {
  /* Wide enough that the brand wordmark fits on one line at its desktop size. */
  max-width: 640px;
  width: 100%;
}

.hero__title {
  font-family: var(--font-body);
  font-size: clamp(1.8rem, 6vw, 3.9rem);
  font-weight: 900;
  /* Cap the measure in `ch` so the headline wraps on a comfortable line length
     instead of stretching the full width of the panel. Character-based, so it
     holds regardless of font size or what the admin sets the title to. */
  max-width: 11ch;
  line-height: 1.0;
  color: #FFFFFF;
  margin-bottom: 1.2rem;
  letter-spacing: -0.02em;
  /* No drop-shadow: the 15px blur softened the glyph edges and made Inter
     Black read lighter than the same weight on the About hero. The hero
     overlay already provides the contrast against the photo. */
  text-shadow: 0 2px 12px rgba(0,0,0,0.45);
}

.hero__subline {
  font-family: var(--font-body);
  font-size: clamp(0.9rem, 1.2vw, 1.05rem);
  font-weight: 300;
  letter-spacing: 0.12em;
  color: rgba(250,250,250,0.65);
  text-transform: none;
  margin-bottom: 2.25rem;
  line-height: 1.6;
  max-width: 420px;
}

.hero__cta-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* ── Hero → Site transition ── */
.hero-transition {
  position: relative;
  line-height: 0;
  margin-top: -1px;
  z-index: 3;
}
.hero-transition svg { display: block; width: 100%; height: 70px; }
.hero-transition .shape-fill { fill: var(--bg-offwhite); }

/* ══════════════════════════════════════════════════════════
   STAT STRIP
   ══════════════════════════════════════════════════════════ */
.stat-strip {
  background: var(--bg-white);
  padding: 2.75rem 0;
  border-top: 1px solid rgba(0,0,0,0.05);
  border-bottom: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 4px 20px rgba(0,0,0,0.02);
}

.stat-strip__grid {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.stat-strip__item {
  flex: 1;
  min-width: 180px;
  text-align: center;
  padding: 0.5rem 2rem;
  position: relative;
  transition: transform 0.3s ease;
}
.stat-strip__item:hover {
  transform: translateY(-2px);
}
.stat-strip__item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 28px;
  background: var(--gray-light);
}

.stat-strip__value {
  font-family: var(--font-body);
  font-size: 2.1rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ink-dark);
  line-height: 1;
}
.stat-strip__value span { color: var(--red-oxblood); }

.stat-strip__label {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray-muted);
  margin-top: 0.5rem;
}

/* ══════════════════════════════════════════════════════════
   BRAND STATEMENT / INTRO
   ══════════════════════════════════════════════════════════ */
.intro__grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 5rem;
  align-items: center;
}

.intro__kicker {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red-oxblood);
  margin-bottom: 1.25rem;
}
.intro__visual {
  position: relative;
  width: 100%;
  max-width: 420px;
  justify-self: end;
  aspect-ratio: 3/4;
  background: #000000;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
  border: 1px solid rgba(0,0,0,0.08);
}

.intro__visual-inner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
}

.intro__visual-placeholder {
  text-align: center;
  color: rgba(250,250,250,0.2);
}

.intro__visual-placeholder svg {
  width: 64px;
  height: 64px;
  margin-bottom: 1rem;
  fill: rgba(250,250,250,0.15);
}

.intro__visual-placeholder p {
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 500;
  color: rgba(250,250,250,0.2);
}

.intro__cert-row {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-top: 2.25rem;
  flex-wrap: wrap;
}

.cert-pill {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray-dark);
  background: var(--bg-white);
  border: 1px solid rgba(0,0,0,0.12);
  padding: 0.45rem 1rem;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.02);
  transition: all 0.25s ease;
}
.cert-pill:hover {
  border-color: var(--ink-dark);
  color: var(--ink-dark);
  transform: translateY(-1px);
}

/* ══════════════════════════════════════════════════════════
   CAPABILITY SHOWCASE
   ══════════════════════════════════════════════════════════ */
.capability__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: visible;
  margin-top: 3.5rem;
}

.capability__item {
  background: var(--bg-white);
  padding: 2.75rem 2.25rem;
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,0.07);
  box-shadow: 0 4px 20px rgba(0,0,0,0.03);
  position: relative;
  overflow: hidden;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.capability__item::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 0%;
  height: 3px;
  background: var(--red-oxblood);
  transition: width 0.35s ease;
}
.capability__item:hover {
  background: var(--bg-white);
  transform: translateY(-5px);
  box-shadow: 0 18px 45px rgba(0,0,0,0.08);
  border-color: rgba(0,0,0,0.12);
}
.capability__item:hover::before {
  width: 100%;
}

.capability__num {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--red-oxblood);
  margin-bottom: 1.25rem;
}

.capability__title {
  font-family: var(--font-body);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--ink-dark);
  margin-bottom: 0.65rem;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.capability__desc {
  font-size: 0.92rem;
  color: var(--gray-muted);
  line-height: 1.65;
}

.capability__specs {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(0,0,0,0.06);
}

.capability__spec-item {
  font-size: 0.82rem;
  color: var(--gray-dark);
  font-weight: 500;
  margin-bottom: 0.35rem;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}
.capability__spec-item::before {
  content: '';
  color: var(--red-oxblood);
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════
   PRODUCTS SECTION & CATEGORY CARDS
   ══════════════════════════════════════════════════════════ */
.product-category-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
}

@media (max-width: 900px) {
  .product-category-grid { grid-template-columns: 1fr; }
}

.product-cat-card {
  position: relative;
  height: 480px;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 3rem 2.5rem;
  text-decoration: none;
  border: 1px solid rgba(0,0,0,0.1);
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s ease;
}

.product-cat-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 50px rgba(0,0,0,0.2);
  border-color: var(--red-oxblood);
}

.product-cat-card__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.6s var(--ease);
  z-index: 0;
}

.product-cat-card:hover .product-cat-card__bg {
  transform: scale(1.08);
}

.product-cat-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.55) 45%, rgba(0,0,0,0.92) 100%);
  z-index: 1;
}

.product-cat-card__content {
  position: relative;
  z-index: 2;
  color: #FAFAFA;
}

.product-cat-card__badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #FAFAFA;
  background: var(--red-oxblood);
  padding: 0.35rem 0.85rem;
  border-radius: 3px;
  margin-bottom: 1rem;
}

.product-cat-card__title {
  font-family: var(--font-body);
  font-size: 2.2rem;
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1.1;
  margin-bottom: 0.75rem;
}

.product-cat-card__desc {
  font-size: 0.95rem;
  color: rgba(255,255,255,0.85);
  line-height: 1.6;
  margin-bottom: 1.75rem;
  max-width: 480px;
}

.product-cat-card__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #FFFFFF;
  transition: gap 0.3s ease, color 0.3s ease;
}

.product-cat-card:hover .product-cat-card__btn {
  gap: 0.9rem;
  color: var(--red-oxblood);
}

/* ══════════════════════════════════════════════════════════
   DARK BAND, CUSTOMIZER CTA
   ══════════════════════════════════════════════════════════ */
.dark-band {
  background: radial-gradient(circle at 80% 20%, #1c1c1c 0%, #0d0d0d 60%, #050505 100%);
  padding: 7.5rem 0;
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.dark-band::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -10%;
  width: 650px;
  height: 650px;
  background: radial-gradient(circle, rgba(179,18,27,0.12) 0%, transparent 70%);
  pointer-events: none;
}

.dark-band__grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 5rem;
  align-items: center;
}

.dark-band__kicker {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red-oxblood);
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.dark-band__kicker::before {
  content: '';
  width: 20px;
  height: 1px;
  background: var(--red-oxblood);
}

.dark-band__title {
  font-family: var(--font-body);
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.08;
  color: #FAFAFA;
  margin-bottom: 1.25rem;
}

.dark-band__desc {
  font-size: 1.05rem;
  color: rgba(250,250,250,0.65);
  line-height: 1.7;
  margin-bottom: 2.25rem;
  max-width: 520px;
}

.dark-band__features {
  margin-bottom: 2.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.dark-band__feat {
  font-size: 0.92rem;
  color: rgba(250,250,250,0.8);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.dark-band__feat::before {
  content: '';
  width: 16px;
  height: 1px;
  background: var(--red-oxblood);
  flex-shrink: 0;
}

.dark-band__cta-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.dark-band__panel {
  background: rgba(255,255,255,0.03);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  padding: 3rem 2.25rem;
  text-align: center;
  box-shadow: 0 24px 60px rgba(0,0,0,0.4);
  transition: transform 0.35s ease, border-color 0.35s ease;
}
.dark-band__panel:hover {
  transform: translateY(-3px);
  border-color: rgba(255,255,255,0.22);
}

.dark-band__panel-label {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-bottom: 0.75rem;
}

.dark-band__panel-text {
  font-family: var(--font-body);
  font-size: 1.3rem;
  font-weight: 700;
  color: #FAFAFA;
  margin-bottom: 1.5rem;
  line-height: 1.3;
}

/* ══════════════════════════════════════════════════════════
   B2B / WHOLESALE SECTION
   ══════════════════════════════════════════════════════════ */
.b2b__grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 6rem;
  align-items: start;
}

.b2b__sticky {
  position: sticky;
  top: 7rem;
}

.b2b__items {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.b2b__item {
  background: var(--bg-white);
  border: 1px solid rgba(0,0,0,0.07);
  border-radius: 6px;
  padding: 1.75rem 2rem;
  box-shadow: 0 4px 16px rgba(0,0,0,0.02);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.b2b__item:last-child { border-bottom: 1px solid rgba(0,0,0,0.07); }
.b2b__item:hover {
  transform: translateX(6px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.06);
  border-color: var(--ink-dark);
}

.b2b__item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.b2b__item-num {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--red-oxblood);
}

.b2b__item-title {
  font-family: var(--font-body);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--ink-dark);
  letter-spacing: -0.01em;
  flex: 1;
  margin: 0 1rem;
}

.b2b__item-arrow {
  font-size: 1.1rem;
  color: var(--gray-muted);
  transition: transform 0.25s ease, color 0.25s ease;
}
.b2b__item:hover .b2b__item-arrow {
  transform: translate(2px, -2px);
  color: var(--ink-dark);
}

.b2b__item-desc {
  font-size: 0.95rem;
  color: var(--gray-muted);
  line-height: 1.65;
}

/* ══════════════════════════════════════════════════════════
   CRAFTSMANSHIP / PROCESS
   ══════════════════════════════════════════════════════════ */
.craft__header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: end;
  margin-bottom: 4.5rem;
}

.craft__steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: visible;
}

.craft__step {
  background: var(--bg-white);
  padding: 2.75rem 2rem;
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,0.07);
  box-shadow: 0 4px 20px rgba(0,0,0,0.03);
  position: relative;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.craft__step:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 45px rgba(0,0,0,0.08);
  border-color: rgba(0,0,0,0.12);
}

.craft__step-num {
  font-family: var(--font-body);
  font-size: 2.75rem;
  font-weight: 800;
  color: rgba(17,17,17,0.12);
  line-height: 1;
  margin-bottom: 1.25rem;
  letter-spacing: -0.04em;
  transition: color 0.3s ease;
}
.craft__step:hover .craft__step-num {
  color: var(--red-oxblood);
}

.craft__step-title {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink-dark);
  margin-bottom: 0.6rem;
}

.craft__step-desc {
  font-size: 0.88rem;
  color: var(--gray-muted);
  line-height: 1.6;
}

/* ══════════════════════════════════════════════════════════
   CONTACT / QUOTE FORM SECTION
   ══════════════════════════════════════════════════════════ */
.contact__grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 6rem;
  align-items: start;
}

.contact__info-label {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray-muted);
  margin-bottom: 0.3rem;
}

.contact__info-value {
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink-dark);
  margin-bottom: 1.5rem;
}

.contact__form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.form-field { display: flex; flex-direction: column; gap: 0.35rem; }

.form-field label {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray-dark);
}

.form-field input,
.form-field select,
.form-field textarea {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--ink-dark);
  background: var(--bg-white);
  border: 1px solid #D8D8D8;
  border-radius: 4px;
  padding: 0.95rem 1.1rem;
  transition: all 0.25s ease;
  outline: none;
  width: 100%;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--ink-dark);
  box-shadow: 0 0 0 3px rgba(17,17,17,0.08);
}
.form-field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238A8A8A' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem; }
.form-field textarea { resize: vertical; min-height: 110px; }

/* ══════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════ */
.footer {
  background: #0D0D0D;
  color: #FAFAFA;
  padding: 5rem 0 2.5rem;
}

.footer__top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.25fr;
  gap: 4rem;
  padding-bottom: 4rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.footer__brand-title {
  font-family: var(--font-brand);
  font-size: 2rem;
  color: #FAFAFA;
  letter-spacing: 0.03em;
  margin-bottom: 0.85rem;
}

.footer__brand-desc {
  font-size: 0.9rem;
  color: rgba(250,250,250,0.45);
  line-height: 1.7;
  max-width: 300px;
}

.footer__col-title {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(250,250,250,0.35);
  margin-bottom: 1.25rem;
}

.footer__links {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.footer__link {
  font-size: 0.9rem;
  color: rgba(250,250,250,0.65);
  transition: color 0.2s ease;
}
.footer__link:hover { color: #FAFAFA; }

.footer__contact-val {
  font-size: 0.95rem;
  font-weight: 600;
  color: rgba(250,250,250,0.85);
  /* flex (block-level) + fit-content: the icon sits on the same row as the
     label, while each link still stacks on its own line the way `block` did.
     inline-flex would let them run together side by side. */
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.4rem;
}

.footer__contact-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.75;
}

.footer__contact-val:hover .footer__contact-icon { opacity: 1; }

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 2rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.footer__copy {
  font-size: 0.82rem;
  color: rgba(250,250,250,0.3);
}

/* ══════════════════════════════════════════════════════════
   BANNER QUOTE SECTION
   ══════════════════════════════════════════════════════════ */
.banner-quote {
  position: relative;
  min-height: 540px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #000000;
  margin: 4rem 0;
}

.banner-quote__bg {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  z-index: 1;
}

.banner-quote__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.banner-quote__overlay {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.45) 55%, rgba(0, 0, 0, 0.15) 100%);
}

.banner-quote__container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  padding-left: clamp(2.5rem, 6vw, 6rem);
  padding-right: 2rem;
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.banner-quote__content {
  max-width: 620px;
  color: #FAFAFA;
  text-align: left;
}

.banner-quote__kicker {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 1.5rem;
}

.banner-quote__title {
  font-family: var(--font-body);
  font-size: clamp(2.2rem, 4.5vw, 3.6rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  margin-bottom: 1rem;
}

.banner-quote__cursor {
  color: var(--red-oxblood);
  animation: blink-cursor 1.1s infinite;
}

@keyframes blink-cursor {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.banner-quote__sub {
  font-family: var(--font-body);
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.25em;
  margin-top: 0.5rem;
}

/* ══════════════════════════════════════════════════════════
   REVIEWS, SCROLLING STAGGERED MARQUEE
   ══════════════════════════════════════════════════════════ */
.reviews {
  padding: 8rem 0 0;
  background: var(--bg-offwhite);
  overflow: hidden;
}

.reviews__header {
  text-align: center;
  margin-bottom: 4rem;
}

.reviews__viewport {
  position: relative;
  overflow: hidden;
  padding: 1rem 0 18rem;
}

/* Soft fade edges left & right */
.reviews__viewport::before,
.reviews__viewport::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 140px;
  z-index: 2;
  pointer-events: none;
}
.reviews__viewport::before {
  left: 0;
  background: linear-gradient(90deg, var(--bg-offwhite) 0%, transparent 100%);
}
.reviews__viewport::after {
  right: 0;
  background: linear-gradient(270deg, var(--bg-offwhite) 0%, transparent 100%);
}

/* Scrolling row */
.reviews__track {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  width: max-content;
  animation: reviews-scroll 55s linear infinite;
}



@keyframes reviews-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Wave vertical offsets, top / mid / bottom */
.wave-top    { transform: translateY(0); }
.wave-mid    { transform: translateY(130px); }
.wave-bottom { transform: translateY(260px); }

/* Review Card */
.review-card {
  flex-shrink: 0;
  width: 320px;
  background: var(--bg-white);
  border: 1px solid var(--gray-light);
  border-radius: 4px;
  padding: 1.75rem 1.75rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.review-card:hover {
  border-color: var(--ink-dark);
  box-shadow: 0 8px 28px rgba(0,0,0,0.07);
}

.review-card__stars {
  font-size: 1rem;
  letter-spacing: 0.1em;
  color: #C9A227;
  line-height: 1;
}

.review-card__text {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--gray-dark);
  line-height: 1.7;
  flex: 1;
}

.review-card__author {
  border-top: 1px solid var(--gray-light);
  padding-top: 0.85rem;
}

.review-card__name {
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--ink-dark);
  margin-bottom: 0.2rem;
}

.review-card__role {
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: var(--gray-muted);
  line-height: 1.4;
}

.review-card__label {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red-oxblood);
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .intro__grid,
  .dark-band__grid,
  .b2b__grid,
  .contact__grid,
  .craft__header { grid-template-columns: 1fr; gap: 3rem; }
  .capability__list { grid-template-columns: repeat(2, 1fr); }
  .craft__steps { grid-template-columns: repeat(2, 1fr); }
  .footer__top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .hero__panel { padding: 2rem 1.75rem; }
  .container { padding: 0 1.5rem; }
  .section { padding: 4.5rem 0; }
  .capability__list,
  .craft__steps { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr; gap: 2.5rem; }
  .form-row { grid-template-columns: 1fr; }
  .stat-strip__grid { flex-direction: column; }
  .stat-strip__item::after { display: none; }
  .b2b__sticky { position: relative; top: auto; }

  .header__nav-list {
    position: fixed;
    top: 70px;
    left: 0;
    width: 100%;
    background: #111111;
    flex-direction: column;
    padding: 2.5rem 2rem;
    gap: 1.5rem;
    display: none;
    box-shadow: 0 12px 36px rgba(0,0,0,0.6);
    border-bottom: 3px solid var(--red-oxblood);
    z-index: 999;
  }
  .header__nav-list.active {
    display: flex !important;
  }
  .header__nav-link {
    color: #FAFAFA !important;
    font-size: 1.05rem;
  }
  .header__cta { display: none; }
  .header__mobile-toggle { display: block; }
}

/* ══════════════════════════════════════════════════════════
   FLOATING WHATSAPP BUTTON
   ══════════════════════════════════════════════════════════ */
.whatsapp-fab {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: #25D366;
  color: #FFFFFF;
  border-radius: 50px;
  padding: 0.85rem 1.35rem 0.85rem 1rem;
  box-shadow: 0 6px 24px rgba(37, 211, 102, 0.45);
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.2s ease;
  animation: whatsapp-pulse 2.8s ease-in-out infinite;
}

.whatsapp-fab svg {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}

.whatsapp-fab__label {
  white-space: nowrap;
}

.whatsapp-fab:hover {
  background: #1ebe5d;
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 10px 32px rgba(37, 211, 102, 0.55);
  animation: none;
}

@keyframes whatsapp-pulse {
  0%, 100% { box-shadow: 0 6px 24px rgba(37, 211, 102, 0.45); }
  50%       { box-shadow: 0 6px 36px rgba(37, 211, 102, 0.75); }
}

@media (max-width: 480px) {
  .whatsapp-fab__label { display: none; }
  .whatsapp-fab { padding: 0.9rem; border-radius: 50%; }
}

/* ══════════════════════════════════════════════════════════
   MOBILE RESPONSIVE LAYER
   Appended last so these rules win over the base styles above
   without needing !important.

   Breakpoints:
     1100px, nav collapses to the hamburger. Deliberately higher
              than the old 768px: between 769–1100px the nav list
              ran into the logo and pushed the CTA off-screen.
      900px, two-column layouts fold to one
      768px, tablet / large phone
      560px, phone
      380px, small phone
   ══════════════════════════════════════════════════════════ */

/* Nothing may cause a horizontal scrollbar on a phone. */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

img, video, svg, canvas, iframe {
  max-width: 100%;
}

/* Long product names / URLs must wrap instead of widening the page. */
h1, h2, h3, h4, p, a, span, li, td, th {
  overflow-wrap: break-word;
}

/* ── Nav collapse ─────────────────────────────────────────── */
@media (max-width: 1100px) {
  .header__nav-list {
    position: fixed;
    top: 70px;
    left: 0;
    width: 100%;
    background: #111111;
    flex-direction: column;
    padding: 2rem 1.5rem;
    gap: 1.25rem;
    display: none;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.6);
    border-bottom: 3px solid var(--red-oxblood);
    z-index: 999;
    max-height: calc(100vh - 70px);
    overflow-y: auto;
  }
  .header__nav-list.active { display: flex !important; }
  .header__nav-link { color: #FAFAFA !important; font-size: 1.05rem; }
  .header__cta { display: none; }
  .header__mobile-toggle { display: block; }
}

/* ── Tablet ───────────────────────────────────────────────── */
@media (max-width: 900px) {
  .intro__grid,
  .dark-band__grid,
  .b2b__grid,
  .contact__grid,
  .craft__header,
  .product-category-grid { grid-template-columns: 1fr; gap: 2.5rem; }

  .capability__list,
  .craft__steps { grid-template-columns: repeat(2, 1fr); }

  .footer__top { grid-template-columns: 1fr 1fr; gap: 2.5rem; }

  .b2b__sticky { position: relative; top: auto; }

  /* Decorative watermarks eat layout space and legibility on small screens. */
  .deco-art { display: none; }
}

/* ── Large phone ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .container { padding: 0 1.25rem; }
  .section { padding: 4rem 0; }
  .section--compact { padding: 2.5rem 0; }

  .heading-xl { font-size: clamp(1.9rem, 7vw, 2.6rem); line-height: 1.15; }
  .heading-lg { font-size: clamp(1.6rem, 6vw, 2.2rem); }
  .heading-md { font-size: clamp(1.25rem, 5vw, 1.6rem); }
  .body-copy  { font-size: 0.98rem; }

  /* Hero */
  .hero { min-height: 88vh; }
  .hero__panel { padding: 1.75rem 1.4rem; }
  /* 7.6vw keeps the wordmark on one line right across this range. */
  .hero__title { font-size: 7.6vw; max-width: 13ch; }

  /* The wave svg uses preserveAspectRatio="none", so a fixed 60px height gets
     squashed into a much steeper curve as the screen narrows. Scaling the
     height down keeps the divider as a gentle sweep on phones. */
  .wave-down svg,
  .wave-up svg,
  .wave-up--dark svg,
  .wave-down--offwhite svg { height: 34px; }

  /* The desktop hero pins content 4rem from the left edge with no right
     padding. On a phone that ate a quarter of the screen and squeezed the
     wordmark; even margins give the text room instead. */
  .hero .container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  /* The base overlay is a LEFT-to-right gradient, which only backs the text on
     desktop where it is pinned left. On mobile the text spans the full width,
     so the right half sat on an undarkened photo and washed out. Swap to a
     vertical scrim that covers the whole column. */
  .hero__overlay {
    background: linear-gradient(180deg,
      rgba(11,12,14,0.55) 0%,
      rgba(11,12,14,0.78) 55%,
      rgba(11,12,14,0.92) 100%);
  }
  .hero__subline {
    color: rgba(250,250,250,0.9);
    letter-spacing: 0.06em;
    max-width: 100%;
  }
  .hero__subline { font-size: 0.98rem; }
  .hero__cta-row { flex-direction: column; align-items: stretch; gap: 0.75rem; }
  .hero__cta-row .btn { width: 100%; text-align: center; }

  .capability__list,
  .craft__steps { grid-template-columns: 1fr; }

  .footer__top { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; gap: 0.75rem; text-align: center; }

  .form-row { grid-template-columns: 1fr; }

  .stat-strip__grid { flex-direction: column; gap: 1.5rem; }
  .stat-strip__item::after { display: none; }

  .intro__cert-row { gap: 0.5rem; }
  .cert-pill { font-size: 0.7rem; padding: 0.3rem 0.6rem; }

  /* Product category cards */
  .product-cat-card { height: 400px; padding: 2rem 1.5rem; }
  .product-cat-card__title { font-size: 1.7rem; }
  .product-cat-card__desc { font-size: 0.9rem; margin-bottom: 1.25rem; }

  /* Full-bleed quote banner */
  .banner-quote { min-height: 420px; margin: 2.5rem 0; }
  .banner-quote__container { padding: 3rem 1.25rem; }
  .banner-quote__title { font-size: clamp(1.5rem, 6.5vw, 2.2rem); }
  .banner-quote__kicker { font-size: 0.68rem; letter-spacing: 0.1em; }
  .banner-quote__sub { font-size: 0.95rem; }

  /* Reviews carousel, let it scroll with a finger */
  .reviews__viewport { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .review-card { min-width: 82vw; }

  /* Touch targets: 44px is the accessibility minimum. */
  .btn,
  .header__nav-link,
  .footer__link { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
}

/* ── Phone ────────────────────────────────────────────────── */
@media (max-width: 560px) {
  .container { padding: 0 1rem; }
  .section { padding: 3rem 0; }

  .hero__panel { padding: 1.5rem 1.15rem; }
  .hero__title { font-size: 8.6vw; max-width: 12ch; }

  .product-cat-card { height: 340px; padding: 1.75rem 1.25rem; }
  .product-cat-card__title { font-size: 1.45rem; }

  .banner-quote { min-height: 360px; }
  .banner-quote__container { padding: 2.5rem 1rem; }

  .footer__links { gap: 0.5rem; }
  .ember-divider__label { font-size: 0.65rem; letter-spacing: 0.1em; }

  .whatsapp-fab { bottom: 1.25rem; right: 1.25rem; }
}

/* ── Small phone ──────────────────────────────────────────── */
@media (max-width: 380px) {
  .heading-xl { font-size: 1.65rem; }
  .product-cat-card { height: 300px; }
  .btn { font-size: 0.78rem; padding: 0.75rem 1rem; }
}

/* Landscape phones: the hero shouldn't eat the whole viewport. */
@media (max-height: 500px) and (orientation: landscape) {
  .hero { min-height: 520px; }
  .header__nav-list { max-height: calc(100vh - 70px); overflow-y: auto; }
}

/* The custom cursor is pointer-only; make sure it can never intercept taps. */
@media (hover: none), (pointer: coarse) {
  .cursor__dot,
  .cursor__logo { display: none !important; }
}

@media (max-width: 480px) {
  .wave-down svg,
  .wave-up svg,
  .wave-up--dark svg,
  .wave-down--offwhite svg { height: 24px; }
}

/* ══════════════════════════════════════════════════════════
   FAQ SECTION
   ══════════════════════════════════════════════════════════ */
.faq__grid {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.faq__item {
  background: var(--bg-white);
  border: 1px solid var(--gray-light);
  border-radius: 6px;
  overflow: hidden;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.faq__item[open] {
  border-color: var(--red-oxblood);
  box-shadow: 0 4px 20px rgba(179, 18, 27, 0.08);
}

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.75rem;
  font-family: var(--font-body);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ink-dark);
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.faq__question::-webkit-details-marker {
  display: none;
}

.faq__question:hover {
  color: var(--red-oxblood);
  background-color: rgba(0, 0, 0, 0.015);
}

.faq__icon {
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;
  color: var(--red-oxblood);
  transition: transform 0.3s ease;
  flex-shrink: 0;
  margin-left: 1rem;
}

.faq__item[open] .faq__icon {
  transform: rotate(45deg);
}

.faq__answer {
  padding: 0 1.75rem 1.5rem 1.75rem;
  color: var(--gray-dark);
  font-size: 0.98rem;
  line-height: 1.75;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  margin-top: 0.25rem;
  padding-top: 1.25rem;
}

@media (max-width: 768px) {
  .faq__question {
    padding: 1rem 1.25rem;
    font-size: 1rem;
  }
  .faq__answer {
    padding: 0 1.25rem 1.25rem 1.25rem;
    font-size: 0.92rem;
  }
}

/* ══════════════════════════════════════════════════════════
   SITE CREDIT
   Static (not admin-editable) on every page. Pages that have a real
   <footer> (index/about/products/contact) get .footer__credit as the
   last row inside it; the two body-measurement pages have no footer
   at all, so they fall back to .site-credit, a standalone bar at the
   end of <body>.
   ══════════════════════════════════════════════════════════ */
.footer__credit {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255,255,255,0.08);
  text-align: center;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.45);
}
.footer__credit a {
  color: rgba(255,255,255,0.8);
  font-weight: 700;
  text-decoration: none;
  transition: color 0.2s ease;
}
.footer__credit a:hover { color: var(--red-oxblood); }

.site-credit {
  background: #0a0a0a;
  color: rgba(255,255,255,0.5);
  text-align: center;
  padding: 0.7rem 1rem;
  font-family: var(--font-body);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
}
.site-credit a {
  color: rgba(255,255,255,0.85);
  font-weight: 700;
  text-decoration: none;
  transition: color 0.2s ease;
}
.site-credit a:hover { color: var(--red-oxblood); }