/* ── Self-hosted Plus Jakarta Sans (GDPR-compliant) ── */
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 300; font-display: swap; src: url(brand_assets/fonts/PlusJakartaSans-300.ttf) format('truetype'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(brand_assets/fonts/PlusJakartaSans-400.ttf) format('truetype'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url(brand_assets/fonts/PlusJakartaSans-500.ttf) format('truetype'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url(brand_assets/fonts/PlusJakartaSans-600.ttf) format('truetype'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url(brand_assets/fonts/PlusJakartaSans-700.ttf) format('truetype'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 800; font-display: swap; src: url(brand_assets/fonts/PlusJakartaSans-800.ttf) format('truetype'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: italic; font-weight: 400; font-display: swap; src: url(brand_assets/fonts/PlusJakartaSans-Italic-400.ttf) format('truetype'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: italic; font-weight: 600; font-display: swap; src: url(brand_assets/fonts/PlusJakartaSans-Italic-600.ttf) format('truetype'); }

*, *::before, *::after {
  font-family: 'Plus Jakarta Sans', sans-serif;
  box-sizing: border-box;
}
html {
  overflow-x: hidden;
  width: 100%;
}
body {
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
  color: #4A4A4A;
  background: #fff;
  margin: 0;
}

/* ── Nav ── */
#navbar {
  transition: background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.nav-link {
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgba(255,255,255,0.88);
  text-decoration: none;
  position: relative;
  white-space: nowrap;
  transition: color 0.2s ease;
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 0; height: 1px;
  background: currentColor;
  transition: width 0.22s ease;
}
.nav-link:hover { color: #fff; }
.nav-link:hover::after { width: 100%; }
.nav-chevron {
  display: inline-block;
  margin-left: 3px;
  transition: transform 0.2s ease;
}
.nav-link:hover .nav-chevron { transform: rotate(180deg); }

/* Scrolled state — white bg */
#navbar.scrolled .nav-link       { color: #3D3D3D; }
#navbar.scrolled .nav-link:hover { color: #6B7228; }
.logo-white { display: block; }
.logo-color { display: none; }
#navbar.scrolled .logo-white { display: none; }
#navbar.scrolled .logo-color { display: block; }
.hamburger-line { background: rgba(255,255,255,0.88); }
#navbar.scrolled .hamburger-line { background: #3D3D3D; }
.lang-btn { color: rgba(255,255,255,0.88); border-color: rgba(255,255,255,0.35); transition: color 0.2s ease, border-color 0.2s ease; }
#navbar.scrolled .lang-btn { color: #3D3D3D; border-color: rgba(61,61,61,0.25); }

/* Mobile menu nav links — dark text on white background */
#mobile-menu .nav-link { color: #3D3D3D; }
#mobile-menu .nav-link:hover { color: #6B7228; }

/* ── Hero ── */
.hero-heading {
  font-size: clamp(2rem, 6vw, 5rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: #fff;
}
.hero-heading sup {
  font-size: 0.38em;
  font-weight: 400;
  vertical-align: super;
  letter-spacing: 0;
}

/* ── Buttons ── */
.btn-primary {
  display: inline-block;
  background: #3D3D3D;
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 10px 22px;
  border-radius: 4px;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.15s ease;
}
.btn-primary:hover  { background: #6B7228; transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }

.btn-outline {
  display: inline-block;
  background: transparent;
  color: #3D3D3D;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 9px 22px;
  border-radius: 4px;
  border: 1.5px solid #3D3D3D;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.btn-outline:hover  { background: #6B7228; color: #fff; border-color: #6B7228; transform: translateY(-1px); }
.btn-outline:active { transform: translateY(0); }

.btn-dark {
  display: inline-block;
  background: #3D3D3D;
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 10px 22px;
  border-radius: 4px;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.15s ease;
}
.btn-dark:hover  { background: #6B7228; transform: translateY(-1px); }
.btn-dark:active { transform: translateY(0); }

/* ── Customer Strip ── */
.cs-strip {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-left:  1px solid #e8e6e0;
  border-right: 1px solid #e8e6e0;
}
.cs-strip::before, .cs-strip::after {
  content: '';
  position: absolute;
  left: 50%; transform: translateX(-50%);
  width: 100%; height: 1px;
  background: #e8e6e0;
  pointer-events: none;
}
.cs-strip::before { top: -1px; }
.cs-strip::after  { bottom: -1px; }
.cs-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 32px;
  background: #F5F4F2;
  border-right:  1px solid #e8e6e0;
  border-bottom: 1px solid #e8e6e0;
}
/* Mobile 2-col: even cells are right column */
.cs-cell:nth-child(even) { border-right: none; }
/* Mobile: last cell spans full width, no bottom border */
.cs-last {
  grid-column: 1 / -1;
  border-right: none;
  border-bottom: none;
}
/* Hero: grow taller at wide viewports to reduce video vertical crop */
#heroSection {
  min-height: clamp(85vh, calc(100vw / 1.778), 95vh) !important;
}

/* Desktop: 5 equal columns, single row */
@media (min-width: 769px) {
  .cs-strip { grid-template-columns: repeat(5, 1fr); }
  .cs-cell  { border-bottom: none; border-right: 1px solid #e8e6e0; }
  .cs-cell:nth-child(even) { border-right: 1px solid #e8e6e0; }
  .cs-last  { grid-column: auto; border-right: none; }
}
.cs-logo {
  max-height: 64px;
  max-width: 220px;
  width: auto;
  height: auto;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

/* ── Focus Cards — Customer logos ── */
.cs-focus-cell img {
  filter: grayscale(100%);
  opacity: 0.6;
  transition: filter 0.3s ease-out, opacity 0.3s ease-out, transform 0.3s ease-out;
}
.cs-focus-cell.cs-faded img {
  filter: grayscale(100%) blur(4px);
  opacity: 0.25;
  transform: scale(0.94);
}
.cs-focus-cell.cs-active img {
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1);
}

/* ── Brand Cards ── */
.brand-scroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 8px 8px 16px;
  flex-wrap: nowrap;
}
.brand-scroll::-webkit-scrollbar { display: none; }

.brand-card {
  flex: 0 0 195px;
  height: 160px;
  background: #F5F4F2;
  border: 1px solid #e8e6e0;
  padding: 24px 20px;
  scroll-snap-align: start;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: box-shadow 0.22s ease, transform 0.22s ease;
}
.brand-card:hover {
  box-shadow: 0 6px 20px rgba(61, 61, 61, 0.10);
  transform: translateY(-3px);
}
.brand-logo-area img {
  filter: grayscale(100%);
  opacity: 0.45;
  transition: filter 0.25s ease, opacity 0.25s ease;
}
.brand-card:hover .brand-logo-area img {
  filter: grayscale(0%);
  opacity: 1;
}
.brand-logo-area {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.brand-links {
  display: flex;
  gap: 10px;
  font-size: 0.72rem;
  font-weight: 500;
  color: #888;
}
.brand-links a {
  color: #888;
  text-decoration: none;
  transition: color 0.18s ease;
  border-bottom: 1px solid transparent;
}
.brand-links a:hover { color: #6B7228; border-bottom-color: #6B7228; }
.brand-links span { color: #ccc; }

/* ── Stats ── */
.stat-number {
  font-size: clamp(2rem, 3.2vw, 3.4rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: #3D3D3D;
}
.stat-label {
  font-size: 0.7rem;
  color: #888;
  line-height: 1.45;
  margin-top: 7px;
}

/* ── Section Labels ── */
.section-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #3D3D3D;
}

/* ── Scroll arrow button ── */
.scroll-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px; height: 38px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #ddd;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(61,61,61,0.09);
  transition: background 0.18s, box-shadow 0.18s;
  z-index: 2;
}
.scroll-btn:hover { background: #f5f4f2; box-shadow: 0 4px 14px rgba(61,61,61,0.14); }

/* ── Fade-in on scroll ── */
.reveal {
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.reveal.hidden {
  opacity: 0;
  transform: translateY(20px);
}
.reveal.hidden.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Mobile nav ── */
#mobile-menu { display: none; }
#mobile-menu.open { display: block; }


/* ─────────────────────────────────────────
   Responsive
───────────────────────────────────────── */

/* ── 1024px: stats → 3 cols, distribution → 2 cols ── */
@media (max-width: 1024px) {
  #statsGrid { grid-template-columns: repeat(3, 1fr) !important; }
  #distributionSection .reveal { grid-template-columns: repeat(2, 1fr) !important; }
  #operatingModelGrid { grid-template-columns: repeat(2, 1fr) !important; }
  #produceGrid        { grid-template-columns: repeat(2, 1fr) !important; }
  #qualityHeaderGrid  { grid-template-columns: 1fr !important; gap: 40px !important; }
  #qualityFlowGrid    { grid-template-columns: 1fr 40px 1fr 40px 1fr !important; }
}

/* ── 768px: tablet / large phone ── */
@media (max-width: 768px) {
  /* Navbar padding */
  .navbar-inner { padding-left: 20px !important; padding-right: 20px !important; }

  /* Hero content padding */
  .hero-content { padding-left: 20px !important; padding-right: 20px !important; padding-bottom: 48px !important; }

  /* Hero green overlay: widen protected center on mobile so dog stays natural */
  .hero-green-overlay {
    -webkit-mask-image: linear-gradient(to right, black 0%, transparent 15%, transparent 85%, black 100%) !important;
    mask-image: linear-gradient(to right, black 0%, transparent 15%, transparent 85%, black 100%) !important;
    opacity: 0.5 !important;
  }
  /* Increase video opacity on mobile to reduce background color bleed on the dog */
  .hero-bg-video { opacity: 0.95 !important; }

  /* Purpose & Vision: stack vertically */
  #purposeGrid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .purpose-text { max-width: 100% !important; }

  /* Section vertical padding */
  #purposeSection          { padding-top: 56px !important; padding-bottom: 56px !important; }
  #brandsSection           { padding-top: 56px !important; padding-bottom: 56px !important; }
  #statsSection            { padding-top: 56px !important; padding-bottom: 56px !important; }
  #operatingModelSection   { padding-top: 56px !important; padding-bottom: 56px !important; }
  #geographicSection       { padding-top: 56px !important; padding-bottom: 56px !important; }
  #whatWeProduceSection    { padding-top: 56px !important; padding-bottom: 56px !important; }
  #qualitySection          { padding-top: 56px !important; padding-bottom: 56px !important; }
  /* New grids → 1 col */
  #operatingModelGrid      { grid-template-columns: 1fr !important; }
  #geographicGrid          { grid-template-columns: 1fr !important; gap: 40px !important; }
  #produceGrid             { grid-template-columns: 1fr !important; }
  #qualityHeaderGrid       { grid-template-columns: 1fr !important; gap: 32px !important; }
  #qualityFlowGrid         { grid-template-columns: 1fr !important; }
  #qualityFlowGrid > div:nth-child(even) { display: none !important; }

  /* Hide scroll buttons on touch devices — users swipe natively */
  .scroll-btn { display: none !important; }

  /* Quality seals → stack */
  #qualitySection .section-container > div:last-of-type { grid-template-columns: 1fr !important; gap: 32px !important; }

  /* Section horizontal padding */
  .section-container { padding-left: 20px !important; padding-right: 20px !important; }

  /* Stats → 2 cols */
  #statsGrid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Distribution → 1 col */
  #distributionSection .reveal { grid-template-columns: 1fr !important; }

  /* Focus logo grid → 2 cols */
  #focusLogoGrid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Brand cards → smaller on mobile */
  .brand-card { flex: 0 0 160px !important; height: 140px !important; }

  /* Contact form input grids → stack */
  #contact-form-customers > div:nth-child(3),
  #contact-form-ma > div:nth-child(3) { grid-template-columns: 1fr !important; }

  /* Footer grid → 2 cols, tighter gap */
  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 32px 24px !important; }

  /* Footer padding */
  footer { padding-top: 48px !important; }

  /* Image accordion → shorter on mobile */
  .img-accordion { height: 180px !important; }
  .img-accordion-panel img { height: 140px !important; }
}

/* ── Product image accordion ── */
.img-accordion {
  display: flex;
  height: 240px;
  gap: 3px;
  background: #F5F4F2;
}
.img-accordion-panel {
  flex: 1;
  overflow: hidden;
  transition: flex 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  position: relative;
  background: #F5F4F2;
  display: flex;
  align-items: center;
  justify-content: center;
}
.img-accordion-panel:hover { flex: 3.5; }
.img-accordion:hover .img-accordion-panel:not(:hover) { flex: 0.6; }
.img-accordion-panel img {
  height: 200px;
  width: auto;
  max-width: none;
  object-fit: contain;
  mix-blend-mode: multiply;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
  flex-shrink: 0;
}
.img-accordion-panel:hover img { transform: scale(1.04); }
.img-accordion:hover .img-accordion-panel:not(:hover) img { opacity: 0.55; }

/* ── Contact grid responsive ── */
@media (max-width: 768px) {
  .contact-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
  #contact { padding-top: 56px !important; padding-bottom: 56px !important; }
  #contact .reveal:last-child { padding-top: 0 !important; }
}

/* ── 480px: small phone ── */
@media (max-width: 480px) {
  /* Footer → single col */
  .footer-grid { grid-template-columns: 1fr !important; }

  /* Mobile menu padding */
  #mobile-menu { padding-left: 20px !important; padding-right: 20px !important; }
}

/* ── 360px: very small phone ── */
@media (max-width: 360px) {
  /* Stats → 1 col */
  #statsGrid { grid-template-columns: 1fr !important; }
}

/* Hero video: object-fit:cover + object-position handled via inline style for all viewports */

/* ── Legal pages ── */
.legal-content h2 {
  font-size: 1.125rem;
  font-weight: 700;
  color: #3D3D3D;
  margin: 40px 0 12px;
  letter-spacing: -0.01em;
}
.legal-content h2:first-child {
  margin-top: 0;
}
.legal-content p {
  font-size: 0.9375rem;
  line-height: 1.72;
  color: #4A4A4A;
  margin: 0 0 16px;
}
.legal-content ul {
  list-style: disc;
  padding-left: 24px;
  margin: 0 0 16px;
}
.legal-content li {
  font-size: 0.9375rem;
  line-height: 1.72;
  color: #4A4A4A;
  margin-bottom: 6px;
}