/* ============================================================
   JA CATFISH MASTERS — BRAND REDESIGN v4
   Clean Grey · Red Brand · Bold Typography · Big Logo
   ============================================================ */

/* ── ROOT OVERRIDES ── */
:root {
  --brand:       #c0392b;       /* Red — primary brand colour */
  --brand-dark:  #922b21;       /* Darker red for hover */
  --brand-light: #e74c3c;       /* Lighter red accent */
  --bg:          #efefef;       /* Clean flat grey */
  --bg-white:    #ffffff;
  --bg-dark:     #1a1a1a;       /* Near-black for sections that need contrast */
  --text-dark:   #111111;
  --text-mid:    #444444;
  --text-light:  #ffffff;
  --gold:        #e6b422;       /* Keep gold for accents */
  --border-grey: #d8d8d8;
  --green:       #1f5f3b;       /* Only used for WhatsApp float */
  --green-dark:  #163f28;
}

/* ── GLOBAL RESET TO GREY ── */
body {
  background: var(--bg) !important;
  color: var(--text-dark) !important;
}

/* ══════════════════════════════════════════════
   TOP CONTACT BAR
   ══════════════════════════════════════════════ */
.top-contact-bar {
  background: var(--bg-dark) !important;
  padding: 0 !important;
}
.top-bar-inner {
  padding: 10px 36px !important;
}
.top-bar-link {
  color: rgba(255,255,255,0.85) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  gap: 7px !important;
}
.top-bar-link:hover { color: #fff !important; }
.top-bar-social { color: rgba(255,255,255,0.6) !important; }
.top-bar-social:hover { color: #fff !important; }

/* ══════════════════════════════════════════════
   MAIN HEADER — white, clean, logo-first
   ══════════════════════════════════════════════ */
.site-header {
  background: #ffffff !important;
  border-bottom: 2px solid var(--brand) !important;
  box-shadow: 0 2px 16px rgba(0,0,0,0.08) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1900 !important;
}
.header-inner {
  height: 80px !important;
  padding: 0 36px !important;
  gap: 28px !important;
}

/* LOGO — large and dominant */
.header-logo {
  gap: 14px !important;
  flex-shrink: 0 !important;
}
.header-logo-img {
  width: 80px !important;
  height: 74px !important;
  background: transparent !important;
  filter: none !important;
  opacity: 1 !important;
}
.header-logo-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  filter: none !important;
  display: block !important;
}
.header-logo-text {
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em !important;
  color: var(--text-dark) !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
}
.header-logo-text span {
  display: block !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em !important;
  color: #888 !important;
  margin-top: 2px !important;
}

/* NAV LINKS */
.header-nav-link {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  color: var(--text-dark) !important;
  padding: 6px 10px !important;
  border-bottom: 2.5px solid transparent !important;
  transition: color 0.2s, border-color 0.2s !important;
}
.header-nav-link:hover {
  color: var(--brand) !important;
  border-bottom-color: var(--brand) !important;
}
.header-nav-link.active {
  color: var(--brand) !important;
  border-bottom-color: var(--brand) !important;
}

/* ORDER NOW BUTTON */
.header-order-btn {
  background: var(--brand) !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.15em !important;
  padding: 0 24px !important;
  height: 48px !important;
  border-radius: 4px !important;
  gap: 8px !important;
  transition: background 0.2s !important;
}
.header-order-btn:hover { background: var(--brand-dark) !important; }

/* MOBILE HAMBURGER */
.mobile-menu-btn span { background: var(--text-dark) !important; }
.mobile-nav { background: #fff !important; border-top: 2px solid var(--brand) !important; }
.mobile-nav a { color: var(--text-dark) !important; font-weight: 600 !important; }
.mobile-nav a:hover { color: var(--brand) !important; }
.mobile-order-btn {
  background: var(--brand) !important;
  color: #fff !important;
  border-color: var(--brand) !important;
}

/* ══════════════════════════════════════════════
   HERO SECTION — video with clean overlay
   ══════════════════════════════════════════════ */
.hero {
  background: var(--bg-dark) !important;
  min-height: 100vh !important;
}
.hero-video {
  opacity: 0.55 !important;
  object-fit: cover !important;
  width: 100% !important;
  height: 100% !important;
}
.hero-overlay {
  background: linear-gradient(
    160deg,
    rgba(0,0,0,0.55) 0%,
    rgba(0,0,0,0.25) 50%,
    rgba(0,0,0,0.60) 100%
  ) !important;
}
.hero-eyebrow {
  color: var(--gold) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3em !important;
}
.hero-headline {
  font-size: clamp(60px, 10vw, 110px) !important;
  font-weight: 300 !important;
  color: #fff !important;
  line-height: 0.95 !important;
  letter-spacing: -0.02em !important;
}
.hero-headline em {
  color: #fff !important;
  font-style: normal !important;
}
.hero-sub {
  font-size: 18px !important;
  color: rgba(255,255,255,0.88) !important;
  max-width: 520px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
}
/* Call to order button in hero */
.hero-actions .btn-gold {
  background: var(--brand) !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 17px 36px !important;
  letter-spacing: 0.12em !important;
}
.hero-actions .btn-gold:hover { background: var(--brand-dark) !important; }
.hero-actions .btn-ghost-white {
  border-color: rgba(255,255,255,0.6) !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 17px 36px !important;
}

/* ══════════════════════════════════════════════
   INNER PAGE HEROES (about, products, contact etc)
   ══════════════════════════════════════════════ */
.about-hero,
.products-hero,
.contact-hero,
.gallery-hero,
.process-hero,
.sustain-hero {
  background: var(--bg-dark) !important;
  position: relative !important;
  overflow: hidden !important;
  min-height: 52vh !important;
  display: flex !important;
  align-items: center !important;
}
/* Video in hero */
.about-hero .hero-video,
.products-hero .hero-video,
.contact-hero .hero-video,
.gallery-hero .hero-video,
.process-hero .hero-video,
.sustain-hero .hero-video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  opacity: 0.50 !important;
  z-index: 0 !important;
}
/* Overlay on inner heroes */
.about-hero .hero-overlay,
.products-hero .hero-overlay,
.contact-hero .hero-overlay,
.gallery-hero .hero-overlay,
.process-hero .hero-overlay,
.sustain-hero .hero-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0,0,0,0.42) !important;
  z-index: 1 !important;
}
/* Text always relative and above overlay */
.about-hero-inner,
.products-hero-content,
.contact-hero-inner,
.gallery-hero-inner,
.process-hero-content,
.sustain-hero-headline {
  position: relative !important;
  z-index: 2 !important;
  padding: 80px 60px 60px !important;
  max-width: 1200px !important;
  width: 100% !important;
  margin: 0 auto !important;
}
/* Hero headings always bold white */
.about-hero-headline,
.products-hero-headline,
.contact-hero-headline,
.gallery-hero h1,
.process-hero-headline,
.sustain-hero-headline {
  color: #fff !important;
  font-size: clamp(42px, 6vw, 72px) !important;
  font-weight: 300 !important;
  line-height: 1.05 !important;
}
.about-hero-headline strong,
.contact-hero-headline strong,
.sustain-hero-headline strong {
  color: var(--gold) !important;
  font-weight: 700 !important;
  display: block !important;
}
.section-label {
  color: var(--gold) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3em !important;
}
.about-hero .section-label,
.products-hero .section-label,
.contact-hero .section-label,
.gallery-hero .section-label,
.process-hero .section-label {
  color: var(--gold) !important;
}
/* Divider bar under hero headings */
.divider {
  background: var(--gold) !important;
  width: 48px !important;
  height: 3px !important;
  margin: 20px 0 24px !important;
}
/* Sub text in heroes */
.about-hero .section-body,
.products-hero .section-body,
.contact-hero .section-body,
.gallery-hero .section-body {
  color: rgba(255,255,255,0.80) !important;
  font-size: 17px !important;
  font-weight: 400 !important;
}

/* ══════════════════════════════════════════════
   SECTION — clean grey + white alternating
   ══════════════════════════════════════════════ */
.section {
  background: var(--bg) !important;
}
.section-inner {
  max-width: 1200px !important;
  margin: 0 auto !important;
}
.section-headline {
  font-size: clamp(32px, 4vw, 52px) !important;
  font-weight: 300 !important;
  color: var(--text-dark) !important;
  line-height: 1.1 !important;
}
.section-headline strong {
  font-weight: 700 !important;
  color: var(--brand) !important;
}
.section-body {
  color: var(--text-mid) !important;
  font-size: 16px !important;
  line-height: 1.75 !important;
  font-weight: 400 !important;
}

/* ── Vision video/media box ── */
.vision-media {
  border-radius: 4px !important;
  overflow: hidden !important;
  background: #222 !important;
}
.vision-media video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 4px !important;
}

/* ══════════════════════════════════════════════
   PILLARS SECTION — keep dark, brand red accent
   ══════════════════════════════════════════════ */
.pillars-section {
  background: var(--bg-dark) !important;
}
.pillars-section .section-label { color: var(--gold) !important; }
.pillars-section .section-headline {
  color: #fff !important;
  font-size: clamp(30px, 4vw, 48px) !important;
}
.pillar {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 4px !important;
  transition: background 0.3s !important;
}
.pillar:hover { background: rgba(255,255,255,0.07) !important; }
.pillar-word {
  color: var(--gold) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3em !important;
  text-transform: uppercase !important;
}
.pillar-stat {
  color: #fff !important;
  font-size: 54px !important;
  font-weight: 300 !important;
}
.pillar-stat-label {
  color: var(--gold) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
}
.pillar-text { color: rgba(255,255,255,0.65) !important; font-size: 14px !important; }

/* ══════════════════════════════════════════════
   COMMITMENT SECTION — white background
   ══════════════════════════════════════════════ */
.section[data-chapter="our-impact"] {
  background: #ffffff !important;
}

/* Stats grid boxes */
.section[data-chapter="our-impact"] [style*="padding:36px"] {
  background: #f5f5f5 !important;
}
.section[data-chapter="our-impact"] [style*="background:var(--green)"] {
  background: var(--brand) !important;
}

/* ══════════════════════════════════════════════
   DISCOVER / JA DIFFERENCE SECTION
   ══════════════════════════════════════════════ */
.discover-section {
  background: #ffffff !important;
}
.discover-quote {
  font-size: clamp(18px, 2.5vw, 26px) !important;
  color: var(--text-dark) !important;
  font-weight: 300 !important;
  line-height: 1.6 !important;
  font-style: italic !important;
  max-width: 780px !important;
  margin: 0 auto 40px !important;
}
.discover-quote em { color: var(--brand) !important; font-style: normal !important; font-weight: 600 !important; }

/* ══════════════════════════════════════════════
   PRODUCTS PAGE
   ══════════════════════════════════════════════ */
.products-section { background: var(--bg) !important; }
.products-category-label {
  color: var(--brand) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.25em !important;
}
.product-card {
  background: #ffffff !important;
  border: 1px solid var(--border-grey) !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
  transition: box-shadow 0.25s, transform 0.25s !important;
}
.product-card:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,0.12) !important;
  transform: translateY(-3px) !important;
}
/* Product image — proper fit */
.product-img {
  width: 100% !important;
  aspect-ratio: 4/3 !important;
  overflow: hidden !important;
  background: #e8e8e8 !important;
}
.product-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.4s !important;
}
.product-card:hover .product-img img { transform: scale(1.04) !important; }
.product-tag {
  color: var(--brand) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.25em !important;
}
.product-name {
  font-size: 20px !important;
  font-weight: 600 !important;
  color: var(--text-dark) !important;
}
.product-desc { color: var(--text-mid) !important; font-size: 14px !important; }
.product-link { color: var(--brand) !important; font-weight: 700 !important; font-size: 11px !important; letter-spacing: 0.15em !important; }

/* ══════════════════════════════════════════════
   ABOUT PAGE
   ══════════════════════════════════════════════ */
.about-story { background: var(--bg) !important; }
.about-sticky .section-label { color: var(--gold) !important; }
.about-sticky .section-headline { color: var(--text-dark) !important; }
.about-body { color: var(--text-mid) !important; font-size: 16px !important; line-height: 1.8 !important; }
.about-body strong { color: var(--text-dark) !important; font-weight: 700 !important; }

.value-item {
  background: #ffffff !important;
  border: 1px solid var(--border-grey) !important;
  border-radius: 6px !important;
  padding: 36px !important;
  transition: border-color 0.2s !important;
}
.value-item:hover { border-color: var(--brand) !important; }
.value-num { color: var(--brand) !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.2em !important; }
.value-title { color: var(--text-dark) !important; font-size: 18px !important; font-weight: 700 !important; }
.value-text { color: var(--text-mid) !important; font-size: 14px !important; }

/* Dark "Two Worlds" section on about */
.section[style*="background:var(--ink)"],
.section[style*="background:#1a1a1a"],
.section[style*="background:#111"] {
  background: var(--bg-dark) !important;
}

/* ══════════════════════════════════════════════
   CONTACT PAGE
   ══════════════════════════════════════════════ */
.contact-body { background: var(--bg) !important; }
.contact-info-label {
  color: var(--brand) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.25em !important;
  text-transform: uppercase !important;
}
.contact-info-value {
  font-size: 17px !important;
  color: var(--text-dark) !important;
  font-weight: 500 !important;
}
/* Phone number on contact page — BIG */
.contact-info-item a[href^="tel"] {
  font-size: 28px !important;
  font-weight: 800 !important;
  color: var(--brand) !important;
  letter-spacing: 0.04em !important;
}
.contact-info-item a[href^="tel"]:hover { color: var(--brand-dark) !important; }

/* MoMo box */
.momo-box {
  background: #fffbe6 !important;
  border: 2px solid var(--gold) !important;
}
.momo-number { color: var(--text-dark) !important; font-weight: 800 !important; font-size: 28px !important; }

/* Form */
.form-label { color: var(--text-dark) !important; font-weight: 600 !important; font-size: 11px !important; letter-spacing: 0.15em !important; }
.form-input, .form-select, .form-textarea {
  background: #fff !important;
  border: 1.5px solid var(--border-grey) !important;
  color: var(--text-dark) !important;
  font-size: 15px !important;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--brand) !important;
  outline: none !important;
}
.form-submit {
  background: var(--brand) !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: 0.18em !important;
}
.form-submit:hover { background: var(--brand-dark) !important; }

/* ══════════════════════════════════════════════
   SUSTAINABILITY PAGE
   ══════════════════════════════════════════════ */
.sustain-pledge { background: var(--bg-dark) !important; }
.pledge-text { color: rgba(255,255,255,0.88) !important; font-size: 15px !important; }
.pledge-icon { color: var(--gold) !important; font-size: 28px !important; }

/* ══════════════════════════════════════════════
   BUTTONS — brand red
   ══════════════════════════════════════════════ */
.btn-gold {
  background: var(--brand) !important;
  color: #fff !important;
  font-weight: 700 !important;
  padding: 16px 36px !important;
  border-radius: 4px !important;
  font-size: 12px !important;
  letter-spacing: 0.15em !important;
}
.btn-gold:hover { background: var(--brand-dark) !important; transform: translateY(-2px) !important; }
.btn-green {
  background: var(--brand) !important;
  color: #fff !important;
}
.btn-green:hover { background: var(--brand-dark) !important; }
.btn-ghost-dark {
  border: 1.5px solid var(--text-dark) !important;
  color: var(--text-dark) !important;
}
.btn-ghost-dark:hover { background: var(--brand) !important; color: #fff !important; border-color: var(--brand) !important; }

/* ══════════════════════════════════════════════
   FOOTER — dark background, clear text
   ══════════════════════════════════════════════ */
footer {
  background: var(--bg-dark) !important;
}
.footer-tagline {
  color: rgba(255,255,255,0.6) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}
.footer-contact-link {
  color: rgba(255,255,255,0.85) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
}
.footer-contact-link:hover { color: var(--gold) !important; }
footer a[href^="mailto"] {
  color: rgba(255,255,255,0.6) !important;
  font-size: 14px !important;
}
.footer-col-title {
  color: var(--gold) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.25em !important;
  text-transform: uppercase !important;
  margin-bottom: 18px !important;
}
.footer-col ul li a {
  color: rgba(255,255,255,0.65) !important;
  font-size: 14px !important;
  line-height: 2 !important;
  transition: color 0.2s !important;
}
.footer-col ul li a:hover { color: #fff !important; }
.footer-social-link {
  color: rgba(255,255,255,0.65) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}
.footer-social-link:hover { color: var(--gold) !important; }
.footer-brand-name {
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
}
.footer-brand-name span { color: rgba(255,255,255,0.45) !important; font-size: 10px !important; }
.footer-brand-logo-img {
  width: 60px !important;
  height: 56px !important;
  background: rgba(255,255,255,0.08) !important;
  border-radius: 6px !important;
  padding: 4px !important;
}
.footer-copy, .footer-built {
  color: rgba(255,255,255,0.35) !important;
  font-size: 12px !important;
}
.footer-built a { color: var(--gold) !important; }

/* ── Pay by MoMo in footer ── */
footer [style*="font-size:20px;font-weight:700"] {
  font-size: 22px !important;
  color: var(--gold) !important;
}

/* ══════════════════════════════════════════════
   CHAPTER NAV
   ══════════════════════════════════════════════ */
.chapter-nav {
  background: #fff !important;
  border-bottom: 1px solid var(--border-grey) !important;
  border-top: 1px solid var(--border-grey) !important;
}
.chapter-item { color: #888 !important; font-size: 11px !important; font-weight: 600 !important; }
.chapter-item.active, .chapter-item:hover { color: var(--brand) !important; }
.chapter-num { color: var(--brand) !important; }

/* ══════════════════════════════════════════════
   GALLERY
   ══════════════════════════════════════════════ */
.gallery-grid-item, .gallery-item {
  overflow: hidden !important;
  border-radius: 4px !important;
  background: #ddd !important;
}
.gallery-grid-item img, .gallery-item img,
.gallery-grid-item video, .gallery-item video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.4s !important;
}
.gallery-grid-item:hover img, .gallery-item:hover img { transform: scale(1.04) !important; }

/* ══════════════════════════════════════════════
   PROCESS PAGE
   ══════════════════════════════════════════════ */
.step-num { color: var(--brand) !important; font-weight: 800 !important; }
.step-title { color: var(--text-dark) !important; font-weight: 700 !important; font-size: 22px !important; }
.step-text { color: var(--text-mid) !important; font-size: 15px !important; line-height: 1.75 !important; }

/* ══════════════════════════════════════════════
   MODAL
   ══════════════════════════════════════════════ */
.modal-box {
  background: #fff !important;
  border-radius: 8px !important;
  box-shadow: 0 24px 80px rgba(0,0,0,0.25) !important;
}
.modal-title { color: var(--text-dark) !important; font-weight: 700 !important; font-size: 26px !important; }
.modal-label { color: var(--brand) !important; font-size: 9px !important; font-weight: 700 !important; letter-spacing: 0.3em !important; }
.modal-body { color: var(--text-mid) !important; }
.modal-close {
  color: var(--text-dark) !important;
  border: 1px solid var(--border-grey) !important;
}
.modal-close:hover { background: var(--brand) !important; color: #fff !important; border-color: var(--brand) !important; }

/* ══════════════════════════════════════════════
   WHATSAPP FLOAT — keep green
   ══════════════════════════════════════════════ */
.whatsapp-float {
  background: #25d366 !important;
  box-shadow: 0 4px 20px rgba(37,211,102,0.35) !important;
}
.whatsapp-float svg { fill: #fff !important; }

/* Back to top */
.back-to-top {
  background: var(--brand) !important;
  color: #fff !important;
}
.back-to-top:hover { background: var(--brand-dark) !important; }

/* ══════════════════════════════════════════════
   RESPONSIVE — MOBILE
   ══════════════════════════════════════════════ */
@media (max-width: 960px) {
  .header-inner { height: 68px !important; padding: 0 18px !important; }
  .header-logo-img { width: 58px !important; height: 54px !important; }
  .header-logo-text { font-size: 12px !important; }
  .about-hero-inner,
  .products-hero-content,
  .contact-hero-inner,
  .gallery-hero-inner,
  .process-hero-content,
  .sustain-hero-headline { padding: 60px 24px 40px !important; }
}
@media (max-width: 640px) {
  .hero-headline { font-size: clamp(44px, 14vw, 72px) !important; }
  .hero-sub { font-size: 15px !important; }
  .contact-info-item a[href^="tel"] { font-size: 22px !important; }
  .top-bar-inner { padding: 8px 16px !important; }
}

/* ══════════════════════════════════════════════
   HIDE OLD CONFLICTING ELEMENTS
   ══════════════════════════════════════════════ */
.sticky-contact-bar { display: none !important; }
.nav-logo-fixed { display: none !important; }
.nav-hamburger { display: none !important; }
.nav-overlay { display: none !important; }