/* ==========================================================================
   DeliParva — Redesign Starter Stylesheet
   Edit freely in Dreamweaver. Colors/fonts are defined as variables below.

   Palette and fonts below were sampled directly from the live logo file and
   the live site's computed styles (deliparva.com), so this matches your
   actual brand — not a guess:
     - Red   #c5201a  — sampled from the logo artwork
     - Gold  #8f6730  — sampled from the logo artwork
     - Black #231f20  — the site's own dark-section background color
     - Headings font: LEMONMILK (now self-hosted locally in fonts/)
     - Body/nav font: Montserrat (Google Fonts)
   ========================================================================== */

@font-face {
  font-family: 'LEMONMILK';
  src: url('../fonts/LEMONMILK-Light.otf') format('opentype');
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: 'LEMONMILK';
  src: url('../fonts/LEMONMILK-Regular.otf') format('opentype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'LEMONMILK';
  src: url('../fonts/LEMONMILK-Medium.otf') format('opentype');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'LEMONMILK';
  src: url('../fonts/LEMONMILK-Bold.otf') format('opentype');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'SingleLife';
  src: url('../fonts/SingleLife.woff') format('woff');
  font-weight: 400;
  font-display: swap;
}

:root {
  --color-primary: #c5201a;      /* logo red */
  --color-primary-dark: #96170f; /* darker red for hover states */
  --color-gold: #8f6730;         /* logo gold/bronze */
  --color-gold-light: #b98f4f;   /* lighter gold for accents/hover */
  --color-cream: #fdf9f2;        /* warm off-white background */
  --color-gold-pale: #f7ecd6;    /* light gold section background tint */
  --color-black: #231f20;        /* brand black (matches site's dark sections) */
  --color-white: #ffffff;
  --font-heading: 'LEMONMILK', 'Montserrat', 'Segoe UI', Arial, sans-serif;
  --font-body: 'Montserrat', Helvetica, Arial, sans-serif;
  --max-width: 1200px;
}

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

html {
  /* On iPhone (Safari/Chrome share the same WebKit engine), the safe-area
     strip below the home-indicator gesture bar renders in the page's base
     background color. Matching it to the footer's dark color means that
     strip blends in instead of showing up as a white gap under the footer
     on every page. */
  background: var(--color-black);
}

body {
  font-family: var(--font-body);
  color: var(--color-black);
  /* IMPORTANT: this stays black (matching html), NOT white. iOS Chrome
     sometimes computes `100dvh` on body as taller than what's actually
     visible on load, and since body's flex min-height stretches to fill
     that (possibly inflated) value, a white body background would show
     through as blank space below the footer. Making body black by
     default and giving each light section its own explicit white/cream
     background (see .section, .contact-wrap, .press-body, .press-source
     below) means any extra body area below the footer renders black
     instead of as a visible white gap. */
  background: var(--color-black);
  line-height: 1.6;
  /* Sticky footer: on short pages (e.g. contact.html on mobile), this pins
     the footer to the bottom of the viewport instead of leaving a gap of
     blank white space below it. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;  /* fallback for older browsers */
  min-height: 100dvh; /* mobile-accurate viewport height */
}

img { max-width: 100%; display: block; }

a { text-decoration: none; color: inherit; }

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

/* ---------- Top bar ---------- */
.topbar {
  background: var(--color-black);
  color: var(--color-white);
  font-size: 13px;
  text-align: right;
  padding: 6px 24px;
  letter-spacing: 0.5px;
}
.topbar a { color: var(--color-white); font-weight: 600; }

/* ---------- Header / Nav ---------- */
header.site-header {
  background: var(--color-black); /* explicit now — it was previously relying
                on the body's background, which broke when body's default
                color changed; this also matches the mobile floating header */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 64px; /* guarantees breathing room between logo and nav links even
                if the header isn't stretched to its full max-width */
  padding: 16px 24px;
  max-width: var(--max-width);
  margin: 0 auto;
}
.logo img { height: 56px; }
nav.main-nav ul {
  list-style: none;
  display: flex;
  gap: 32px;
}
nav.main-nav a {
  font-family: var(--font-heading);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 0.5px;
  color: var(--color-gold-light);
  transition: color 0.2s;
}
nav.main-nav a.active { color: var(--color-primary); }
nav.main-nav a:hover { color: var(--color-white); }

/* ---------- Hero ---------- */
.hero {
  background: linear-gradient(135deg, var(--color-cream), #f0e2c8);
  padding: 80px 24px;
  text-align: center;
}
.hero h1 {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 5vw, 3.2rem);
  color: var(--color-primary-dark);
  margin-bottom: 16px;
}
.hero p {
  max-width: 640px;
  margin: 0 auto 28px;
  font-size: 1.1rem;
}

/* ---------- Hero image carousel (index.html) ---------- */
.hero-carousel {
  position: relative;
  height: 80vh;
  min-height: 480px;
  max-height: 720px;
  overflow: hidden;
}
.hero-slides { position: absolute; inset: 0; }
.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.1s ease;
}
.hero-slide.active { opacity: 1; }
.hero-slide.placeholder {
  background-color: var(--color-cream);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed var(--color-gold);
}
.hero-slide.placeholder span {
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-gold);
  font-size: 1rem;
  background: rgba(255,255,255,0.85);
  padding: 8px 18px;
  border-radius: 6px;
}
.hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(35,19,20,0.55) 0%, rgba(35,19,20,0.35) 45%, rgba(35,19,20,0.75) 100%);
  z-index: 1;
}

/* ---- Intro video slide (click-to-play, not an autoplay/muted loop) ---- */
.hero-slide--video { background: var(--color-black); }
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--color-black);
}
/* Hide native controls until the visitor presses play — before that,
   our own title + play button sit on top so it still matches the
   other slides visually instead of looking like a bare video player. */
.hero-slide--video:not(.is-playing) .hero-video::-webkit-media-controls {
  display: none !important;
}
.hero-overlay--video {
  gap: 24px;
}
.hero-play-btn {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.8);
  background: rgba(35,19,20,0.45);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.hero-play-btn svg { margin-left: 4px; } /* optical centering for the triangle */
.hero-play-btn:hover {
  background: var(--color-primary);
  transform: scale(1.06);
}
/* Once playing, fade our title/button out so native video controls
   (play/pause/volume/fullscreen) are fully usable underneath. */
.hero-slide--video.is-playing .hero-overlay--video {
  opacity: 0;
  pointer-events: none;
}
.hero-slide--video.is-playing .hero-scrim { opacity: 0; }
.hero-overlay--video,
.hero-scrim { transition: opacity 0.3s ease; }
.hero-overlay {
  position: absolute; /* now nested inside each .hero-slide, which is what
                          crossfades — this fills that slide exactly */
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px 48px;
  color: var(--color-white);
}
.hero-overlay h1 {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 5.5vw, 3.4rem);
  color: var(--color-white);
  text-shadow: 0 2px 12px rgba(0,0,0,0.4);
  margin-bottom: 16px;
  max-width: 900px;
}
.hero-overlay p {
  max-width: 640px;
  margin: 0 auto 28px;
  font-size: 1.15rem;
  text-shadow: 0 1px 8px rgba(0,0,0,0.4);
}

/* ---- Per-slide text placement modifiers ----
   Add one of these classes to a .hero-overlay to match where the empty
   "negative space" sits in that slide's photo. Default (no modifier) is
   dead center. On mobile all of these collapse back to centered text
   (see media query below) since a narrow cropped photo rarely preserves
   the same empty space the desktop crop shows. */
.hero-overlay--left {
  align-items: flex-start;
  text-align: left;
}
.hero-overlay--left h1,
.hero-overlay--left p { margin-left: 0; }
.hero-overlay--right {
  align-items: flex-end;
  text-align: right;
}
.hero-overlay--right h1,
.hero-overlay--right p { margin-right: 0; }
.hero-overlay--top { justify-content: flex-start; padding-top: 64px; }
.hero-overlay--bottom { justify-content: flex-end; padding-bottom: 64px; }
.hero-overlay--center { align-items: center; justify-content: center; text-align: center; }
.hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  background: rgba(35,31,32,0.45);
  color: var(--color-white);
  border: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.2s;
}
.hero-arrow:hover { background: var(--color-primary); }
.hero-arrow.prev { left: 20px; }
.hero-arrow.next { right: 20px; }
.hero-dots {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  gap: 10px;
}
.hero-dots .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--color-white);
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s;
}
.hero-dots .dot.active { background: var(--color-gold-light); border-color: var(--color-gold-light); }

.btn {
  display: inline-block;
  background: var(--color-primary);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 0.5px;
  padding: 14px 32px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  transition: background 0.2s;
}
.btn:hover { background: var(--color-primary-dark); }
.btn.btn-outline {
  background: transparent;
  border: 2px solid var(--color-white);
  color: var(--color-white);
}

/* ---------- Section titles ---------- */
.section { padding: 64px 24px; background: var(--color-white); }
.section-title {
  font-family: var(--font-heading);
  text-align: center;
  font-size: 2rem;
  color: var(--color-gold);
  text-transform: uppercase;
  margin-bottom: 40px;
}

/* ---------- Product grid ---------- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
  max-width: var(--max-width);
  margin: 0 auto;
}
.product-card {
  border-radius: 8px;
  overflow: hidden;
  background: var(--color-cream);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transition: transform 0.2s;
}
.product-card:hover { transform: translateY(-4px); }
.product-card img { aspect-ratio: 1/1; object-fit: cover; width: 100%; }
.product-card .label {
  padding: 10px 12px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 13px;
  text-align: center;
}

/* ---------- Filter tabs (Products page) ---------- */
.filters {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.filters button {
  background: none;
  border: 2px solid var(--color-gold);
  color: var(--color-gold);
  font-family: var(--font-heading);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 13px;
  padding: 8px 20px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s;
}
.filters button:hover,
.filters button.active {
  background: var(--color-gold);
  color: var(--color-white);
}

/* ---------- Premium Products marquee (JS-driven, auto-scrolls left-to-right) ---------- */
.marquee-section {
  position: relative;
  overflow: hidden;
  background: var(--color-black);
  padding: 80px 24px 64px;
}

/* Large circular logo watermark centered behind the heading */
.marquee-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 480px;
  height: 480px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 46px solid rgba(255,255,255,0.045);
  pointer-events: none;
}
.marquee-watermark::before {
  content: "";
  position: absolute;
  inset: -80px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.05);
}
.marquee-watermark::after {
  content: "D";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 15rem;
  color: rgba(255,255,255,0.035);
  line-height: 1;
}

.marquee-heading {
  position: relative;
  text-align: center;
  margin-bottom: 24px;
}
.marquee-eyebrow {
  font-family: 'SingleLife', cursive;
  font-size: 3.6rem;
  color: var(--color-gold-light);
  line-height: 1;
  margin-bottom: -6px;
}
.marquee-title {
  font-family: var(--font-heading);
  text-transform: uppercase;
  color: var(--color-white);
  font-size: 2rem;
  letter-spacing: 1px;
}
.marquee-subtext {
  max-width: 560px;
  margin: 16px auto 0;
  color: rgba(255,255,255,0.7);
  font-size: 1rem;
  line-height: 1.5;
}

.marquee {
  position: relative;
  overflow: hidden;
  width: 100%;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee-track {
  display: flex;
  gap: 40px;
  width: max-content;
  will-change: transform;
}
.marquee-item {
  flex: 0 0 auto;
  width: 242px;
  height: 209px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.marquee-item img {
  width: 100%;
  height: auto;
  max-height: 209px;
  object-fit: contain;
  filter: drop-shadow(0 14px 16px rgba(0,0,0,0.5));
}
@media (max-width: 800px) {
  .marquee-watermark { width: 340px; height: 340px; border-width: 32px; }
  .marquee-watermark::after { font-size: 10rem; }
  .marquee-eyebrow { font-size: 2.7rem; }
  .marquee-title { font-size: 1.5rem; }
}
@media (max-width: 480px) {
  .marquee-item { width: 176px; height: 154px; }
  .marquee-item img { max-height: 154px; }
  .marquee-watermark { width: 260px; height: 260px; border-width: 24px; }
  .marquee-watermark::after { font-size: 7.5rem; }
}

/* ---------- Feature columns (who we serve) ---------- */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 32px;
  max-width: var(--max-width);
  margin: 0 auto;
  text-align: center;
}
.feature-grid img { height: 120px; margin: 0 auto 16px; }
.feature-grid h3 {
  font-family: var(--font-heading);
  text-transform: uppercase;
  color: var(--color-primary-dark);
  font-size: 1rem;
}

/* ---------- Origins / flags ---------- */
.origin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 24px;
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}
.origin-grid img { height: 48px; margin: 0 auto 10px; }

/* ---------- "We work hand-in-hand" section (centered text + cert logos) ---------- */
.hand-in-hand {
  background: var(--color-gold-pale);
  padding: 64px 24px;
}
.hand-in-hand-text {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}
@media (max-width: 900px) {
  .hand-in-hand { padding: 44px 24px; }
}

/* ---------- Award banner (homepage CTA to press.html) ---------- */
.award-banner {
  background: var(--color-gold-pale); /* same light gold tone as the "hand-in-hand" section */
  color: var(--color-black);
  padding: 56px 24px;
}
.award-banner-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 56px;
}
.award-banner-badge img {
  width: 250px;
  height: 250px;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 12px 24px rgba(0,0,0,0.3));
}
.award-banner-text { flex: 0 1 560px; }
.award-banner-eyebrow {
  font-family: var(--font-heading);
  text-transform: uppercase;
  color: var(--color-primary-dark);
  font-size: 13px;
  letter-spacing: 1.5px;
  margin-bottom: 8px;
}
.award-banner-text h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  text-transform: none;
  color: var(--color-black);
  line-height: 1.25;
  margin-bottom: 10px;
}
.award-banner-text p { font-size: 1.05rem; color: #4a3a1f; margin-bottom: 20px; }
.award-banner-logo { margin-bottom: 24px; }
.award-banner-logo img { height: 72px; opacity: 0.95; }
@media (max-width: 700px) {
  .award-banner { padding: 44px 20px; }
  .award-banner-inner { flex-direction: column; text-align: center; gap: 24px; }
  .award-banner-badge img { width: 190px; height: 190px; }
  .award-banner-logo { margin: 0 auto 20px; }
  .award-banner-logo img { height: 52px; margin: 0 auto; }
}

/* ---------- Press / award page ---------- */
.award-hero {
  background: var(--color-black);
  color: var(--color-white);
  text-align: center;
  padding: 64px 24px 56px;
}
.award-hero-badge img { width: 170px; height: 170px; object-fit: contain; margin: 0 auto 20px; }
.award-hero-eyebrow {
  font-family: var(--font-heading);
  text-transform: uppercase;
  color: var(--color-gold-light);
  letter-spacing: 1.5px;
  font-size: 13px;
  margin-bottom: 10px;
}
.award-hero h1 {
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 4.5vw, 2.8rem);
  margin-bottom: 14px;
}
.award-hero p { max-width: 640px; margin: 0 auto 24px; color: #d8cfc6; }
.award-hero-logo img { height: 40px; margin: 0 auto 28px; opacity: 0.95; }
.award-hero .btn.btn-outline:hover { background: var(--color-white); color: var(--color-black); }

.press-body { background: var(--color-white); max-width: 780px; margin: 0 auto; padding: 56px 24px; }
.press-body p { margin-bottom: 20px; }
.press-body h2 {
  font-family: var(--font-heading);
  color: var(--color-gold);
  text-transform: uppercase;
  font-size: 1.4rem;
  margin: 40px 0 18px;
}

.quote-block {
  border-left: 4px solid var(--color-primary);
  background: var(--color-cream);
  padding: 24px 28px;
  margin: 32px 0;
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-style: italic;
  color: var(--color-primary-dark);
}
.quote-block cite {
  display: block;
  margin-top: 12px;
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--color-black);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.press-source {
  background: var(--color-white);
  text-align: center;
  padding: 0 24px 56px;
}
.press-source a { color: var(--color-primary); font-weight: 600; text-decoration: underline; }

/* ---------- Dark band (delivery) ---------- */
.band-dark {
  background: var(--color-black);
  color: var(--color-white);
  text-align: center;
  padding: 60px 24px;
}
.band-delivery {
  background: var(--color-primary); /* brand red — the van photo is a transparent cutout, no backdrop to color-match */
  color: var(--color-white);
}
.delivery-photo {
  max-width: 900px;
  margin: 36px auto 0;
}
.delivery-photo img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 16px 30px rgba(0,0,0,0.35));
}
@media (max-width: 800px) {
  .delivery-photo { margin-top: 24px; }
}
.band-dark h2 {
  font-family: var(--font-heading);
  text-transform: uppercase;
  font-size: 1.6rem;
  line-height: 1.4;
}

/* ---------- Contact form ---------- */
.contact-wrap {
  background: var(--color-white);
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 48px;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 64px 24px;
}
@media (max-width: 800px) {
  .contact-wrap { grid-template-columns: 1fr; }
}
.contact-form label {
  display: block;
  font-weight: 600;
  margin: 16px 0 6px;
  font-size: 14px;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-family: var(--font-body);
  font-size: 14px;
}
.contact-form textarea { min-height: 120px; resize: vertical; }
.contact-form button { margin-top: 24px; }

/* Hidden honeypot field — off-screen for humans, still reachable by bots */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Contact form submission error banner (shown via JS when ?error=1) */
.form-error {
  grid-column: 1 / -1;
  background: #fdecea;
  border: 1px solid #f5c2c0;
  color: var(--color-primary-dark);
  padding: 14px 18px;
  border-radius: 6px;
  margin-bottom: 24px;
  font-size: 14px;
}
.form-error a { color: var(--color-primary-dark); text-decoration: underline; }

.contact-info {
  background: var(--color-cream);
  padding: 32px;
  border-radius: 8px;
}
.contact-info h3 {
  font-family: var(--font-heading);
  color: var(--color-primary-dark);
  margin-bottom: 16px;
}
.contact-info p { margin-bottom: 10px; }

/* ---------- Reusable pill/badge (wholesale + language trust signals) ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 2px solid var(--color-gold);
  color: var(--color-gold);
  font-family: var(--font-heading);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.5px;
  padding: 5px 14px;
  border-radius: 20px;
  white-space: nowrap;
}
/* Use on dark backgrounds (topbar, footer, band-dark sections) */
.pill--on-dark {
  border-color: var(--color-gold-light);
  color: var(--color-gold-light);
}

/* ---------- B2B / Wholesale-only banner (Home + Products) ---------- */
.b2b-banner {
  background: var(--color-black);
  padding: 32px 24px;
  text-align: center;
}
.b2b-banner-inner { max-width: 760px; margin: 0 auto; }
.b2b-banner .pill { margin-bottom: 14px; }
.b2b-banner p {
  color: var(--color-white);
  font-size: 1rem;
  line-height: 1.6;
}
.b2b-banner .pill.lang-pill { margin: 16px 0 0; }
@media (max-width: 600px) {
  .b2b-banner { padding: 24px 20px; }
}

/* ---------- Topbar language/phone row ---------- */
.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
}

/* ---------- Product Development process steps (Home) ---------- */
.process-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 32px;
  max-width: var(--max-width);
  margin: 0 auto;
}
.process-step { text-align: center; }
.process-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  border-radius: 50%;
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.3rem;
}
.process-step h3 {
  font-family: var(--font-heading);
  text-transform: uppercase;
  color: var(--color-primary-dark);
  font-size: 1rem;
  margin-bottom: 8px;
}
.process-step p { font-size: 0.92rem; color: #555; }
@media (max-width: 800px) {
  .process-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 16px; }
}

/* Dark variant (Custom Product Development, Home) */
.process-section--dark {
  background: var(--color-black);
}
.process-section--dark .section-title { color: var(--color-gold-light); }
.process-section--dark > p { color: rgba(255,255,255,0.85); }
.process-section--dark .process-number {
  border-color: var(--color-gold-light);
  color: var(--color-gold-light);
}
.process-section--dark .process-step h3 { color: var(--color-gold-light); }
.process-section--dark .process-step p { color: rgba(255,255,255,0.7); }

/* ---------- Footer ---------- */
footer.site-footer {
  background: var(--color-black);
  color: #cfc7bd;
  padding: 48px 24px 24px;
  margin-top: auto; /* sticky footer — see body rule above */
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 32px;
  max-width: var(--max-width);
  margin: 0 auto;
}
@media (max-width: 700px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
footer.site-footer img { height: 44px; margin-bottom: 12px; }
footer.site-footer h4 {
  font-family: var(--font-heading);
  color: var(--color-gold-light);
  text-transform: uppercase;
  font-size: 13px;
  margin-bottom: 14px;
}
footer.site-footer ul { list-style: none; }
footer.site-footer li { margin-bottom: 8px; font-size: 14px; }
footer.site-footer a:hover { color: var(--color-gold-light); }
.footer-bottom {
  text-align: center;
  font-size: 12px;
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid #3a3536;
}

/* ---------- Mobile menu toggle (hamburger) ---------- */
.mobile-menu-toggle {
  display: none;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

/* ---------- Floating mobile nav (top bar) ---------- */
@media (max-width: 800px) {
  .topbar { display: none; } /* the floating header below replaces it */

  /* Header becomes a floating pill fixed to the top of the screen, with the
     logo on the left and the hamburger toggle on the right. */
  header.site-header {
    position: fixed;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 32px);
    max-width: 420px;
    margin: 0;
    background: var(--color-black);
    border-radius: 40px;
    box-shadow: 0 10px 28px rgba(0,0,0,0.35);
    padding: 10px 18px;
    z-index: 1001;
  }

  body { padding-top: 76px; } /* clear the fixed header */

  .mobile-menu-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 30px;
    height: 30px;
  }
  .mobile-menu-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--color-white);
    border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.25s ease;
  }
  .mobile-menu-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .mobile-menu-toggle.open span:nth-child(2) { opacity: 0; }
  .mobile-menu-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Retractable dropdown menu, triggered by the hamburger */
  header.site-header nav.main-nav {
    position: fixed;
    top: 72px;
    left: 50%;
    width: calc(100% - 32px);
    max-width: 420px;
    background: var(--color-black);
    border-radius: 20px;
    box-shadow: 0 10px 28px rgba(0,0,0,0.35);
    padding: 10px;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(-10px);
    transition: opacity 0.2s ease, transform 0.2s ease;
  }
  header.site-header nav.main-nav.open {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }
  nav.main-nav ul { flex-direction: column; gap: 2px; }
  nav.main-nav a {
    display: block;
    padding: 12px 16px;
    border-radius: 12px;
    color: var(--color-gold-light);
  }
  nav.main-nav a:hover,
  nav.main-nav a.active {
    color: var(--color-white);
    background: var(--color-primary);
  }
}

/* ---------- General responsive refinements ---------- */
@media (max-width: 800px) {
  .logo img { height: 32px; } /* fits the compact floating header pill */
  .section { padding: 44px 20px; }
  .section-title { font-size: 1.5rem; margin-bottom: 28px; }
  .hero-carousel { height: 60vh; min-height: 380px; }
  .hero-arrow { width: 36px; height: 36px; font-size: 13px; }
  .hero-arrow.prev { left: 10px; }
  .hero-arrow.next { right: 10px; }
  /* On mobile the crop rarely preserves the same empty space the desktop
     photo was designed around, so text placement always collapses back
     to centered here regardless of which modifier is set on desktop. */
  .hero-overlay,
  .hero-overlay--left,
  .hero-overlay--right,
  .hero-overlay--top,
  .hero-overlay--bottom {
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;
  }
  .band-dark h2 { font-size: 1.2rem; }
  .footer-grid { grid-template-columns: 1fr 1fr; text-align: left; }

  /* "Who we serve" icons: 2x2 grid on mobile (2 on top, 2 underneath) */
  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px 16px;
  }
  .feature-grid img { height: 100px; }

  /* Compact the page-top .hero banner (products.html / contact.html) —
     the inline padding:56px 24px on the section needs !important to override. */
  .hero { padding: 28px 20px !important; }
  .hero h1 { font-size: clamp(1.5rem, 6vw, 2rem); line-height: 1.2; margin-bottom: 10px; }
  .hero p { margin-bottom: 18px; line-height: 1.4; font-size: 1rem; }
  .hero .btn { padding: 11px 24px; }
}
@media (max-width: 480px) {
  /* Footer stays two columns even at the smallest widths (see .footer-grid
     media queries above for the base 2-column rule). */
  .product-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
  .hero-carousel { height: 52vh; min-height: 340px; }
}

/* ---------- Floating WhatsApp button (all pages) ---------- */
.whatsapp-float {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 60px;
  height: 60px;
  background: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
  z-index: 1002;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.whatsapp-float:hover {
  transform: scale(1.08);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.whatsapp-float svg {
  width: 32px;
  height: 32px;
  fill: var(--color-white);
}
@media (max-width: 800px) {
  .whatsapp-float {
    right: 16px;
    bottom: 16px;
    width: 52px;
    height: 52px;
  }
  .whatsapp-float svg {
    width: 28px;
    height: 28px;
  }
}