/*
Theme Name: Apex Brands
Theme URI: https://apexbrands.com
Author: Apex Brands Group
Description: Premium multi-brand WordPress theme for The Elementals Laundry, Stitch PRO USA, and Roam & Seam. Features dark/light mode, full mobile responsiveness, background video hero, and Customizer editing for all text and images.
Version: 2.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: apex-brands
Tags: custom-background, custom-logo, custom-menu, featured-images, full-width-template, theme-options, dark, light
*/

/* ================================================================
   DESIGN TOKENS — DARK MODE (default)
================================================================ */
:root,
[data-theme="dark"] {
  --bg-primary:    #0a0a0a;
  --bg-secondary:  #141414;
  --bg-card:       #1e1e1e;
  --bg-steel:      #2a2a2a;
  --text-primary:  #f5f0e8;
  --text-secondary:#a8a8a8;
  --text-muted:    #666666;
  --border:        rgba(255,255,255,0.07);
  --gold:          #c8a96e;
  --gold-light:    #d9bc88;
  --gold-dim:      rgba(200,169,110,0.12);
  --shadow:        0 4px 24px rgba(0,0,0,0.5);
  --nav-bg:        rgba(10,10,10,0.96);
  --hero-overlay:  rgba(0,0,0,0.55);
  --brand-el:      #4a7c6e;
  --brand-el-lt:   #5d9e8e;
  --brand-st:      #8b4a2e;
  --brand-st-lt:   #b05a38;
  --brand-ro:      #4a5a7c;
  --brand-ro-lt:   #5a6e9a;
}

/* ================================================================
   LIGHT MODE
================================================================ */
[data-theme="light"] {
  --bg-primary:    #f5f5f5;
  --bg-secondary:  #eeeeee;
  --bg-card:       #ffffff;
  --bg-steel:      #e6e6e6;
  --text-primary:  #1a1a1a;
  --text-secondary:#555555;
  --text-muted:    #999999;
  --border:        rgba(0,0,0,0.08);
  --gold:          #a07840;
  --gold-light:    #b8904a;
  --gold-dim:      rgba(160,120,60,0.1);
  --shadow:        0 4px 24px rgba(0,0,0,0.07);
  --nav-bg:        rgba(245,245,245,0.97);
  --hero-overlay:  rgba(0,0,0,0.48);
}

/* ================================================================
   RESET & BASE
================================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-family: 'DM Sans', 'Helvetica Neue', Arial, sans-serif;
  line-height: 1.7;
  overflow-x: hidden;
  transition: background-color 0.35s ease, color 0.35s ease;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--gold); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--gold-light); }
ul, ol { list-style: none; }
li { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }

/* ================================================================
   TYPOGRAPHY
================================================================ */
h1,h2,h3,h4,h5,h6 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  line-height: 1.15;
  color: var(--text-primary);
  transition: color 0.35s;
}
h1 { font-size: clamp(2.2rem, 5.5vw, 5rem); letter-spacing: -0.025em; }
h2 { font-size: clamp(1.8rem, 3.5vw, 3.2rem); letter-spacing: -0.015em; }
h3 { font-size: clamp(1.3rem, 2.5vw, 2rem); }
h4 { font-size: clamp(1.1rem, 1.8vw, 1.55rem); }
h5 { font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; font-family: 'DM Sans', sans-serif; font-weight: 600; color: var(--gold); }
p  { margin-bottom: 1.25rem; color: var(--text-secondary); transition: color 0.35s; }
p:last-child { margin-bottom: 0; }

/* ================================================================
   LAYOUT
================================================================ */
.container {
  width: 100%;
  max-width: 1340px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 3rem);
}
.section    { padding: clamp(4rem, 8vw, 8rem) 0; overflow: hidden; }
.section--sm { padding: clamp(2.5rem, 5vw, 5rem) 0; overflow: hidden; }

/* ================================================================
   NAVIGATION
================================================================ */
#site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 80px;
  z-index: 1000;
  transition: background 0.35s, box-shadow 0.35s;
}
#site-nav.scrolled {
  background: var(--nav-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 1px 0 var(--border), var(--shadow);
}
/* Mobile: always solid — no transparent nav over hero */
@media (max-width: 900px) {
  #site-nav {
    background: var(--nav-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 1px 0 var(--border);
  }
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
  padding: 0 clamp(1.25rem, 3vw, 2.5rem);
  max-width: 1600px;
  margin: 0 auto;
  gap: 1rem;
}

/* Logo */
.nav-logo {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--text-primary) !important;
  font-family: 'Playfair Display', serif;
  font-size: clamp(1rem, 2vw, 1.35rem);
  font-weight: 700;
  flex-shrink: 0;
  text-decoration: none;
  transition: color 0.35s;
}
.nav-logo img { height: 40px; width: auto; max-width: 160px; object-fit: contain; }
.nav-logo .logo-text span { color: var(--gold); }

/* Desktop menu */
.nav-menu {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2.25rem);
  flex: 1;
  justify-content: center;
}
.nav-menu li {
  list-style: none;
  display: contents;
}
.nav-menu a {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
  white-space: nowrap;
  position: relative;
  padding: 0.25rem 0;
  transition: color 0.2s;
}
.nav-menu a::after {
  content: '';
  position: absolute;
  bottom: -3px; left: 0;
  width: 0; height: 1px;
  background: var(--gold);
  transition: width 0.3s;
}
.nav-menu a:hover,
.nav-menu a.current-menu-item { color: var(--gold); }
.nav-menu a:hover::after,
.nav-menu a.current-menu-item::after { width: 100%; }

/* Right controls */
.nav-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

/* Theme toggle */
.theme-toggle {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gold-dim);
  border: 1px solid var(--border);
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
  color: var(--gold);
  flex-shrink: 0;
}
.theme-toggle:hover { transform: scale(1.08); }
[data-theme="dark"]  .icon-sun  { display: block; }
[data-theme="dark"]  .icon-moon { display: none; }
[data-theme="light"] .icon-sun  { display: none; }
[data-theme="light"] .icon-moon { display: block; }
:root .icon-sun  { display: block; }
:root .icon-moon { display: none; }

/* Contact Us button (desktop) */
.btn-nav-cta { padding: 0.65rem 1.4rem; font-size: 0.75rem; }

/* Hamburger */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px; height: 44px;
  border-radius: 4px;
  flex-shrink: 0;
  background: transparent;
}
.nav-toggle span {
  display: block;
  width: 22px; height: 2px;
  background: var(--text-primary);
  border-radius: 2px;
  transition: all 0.3s ease;
  transform-origin: center;
}
.nav-toggle.open span:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }
.nav-toggle.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle.open span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }

/* Mobile slide-down menu */
.nav-mobile {
  display: none;
  position: fixed;
  top: 80px; left: 0; right: 0;
  max-height: calc(100vh - 80px);
  background: var(--nav-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--border);
  z-index: 998;
  overflow-y: auto;
  flex-direction: column;
  padding: 1.5rem clamp(1.25rem,5vw,3rem) 2.5rem;
  gap: 0;
  transform: translateY(-8px);
  opacity: 0;
  transition: opacity 0.25s, transform 0.25s;
}
.nav-mobile.open {
  display: flex;
  opacity: 1;
  transform: translateY(0);
}
.nav-mobile a {
  display: block;
  padding: 1rem 0;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border);
  letter-spacing: 0.03em;
  transition: color 0.2s, padding-left 0.2s;
}
.nav-mobile a:last-child { border-bottom: none; }
.nav-mobile li { list-style: none; }
.nav-mobile li:last-child > a { border-bottom: none; }
.nav-mobile a:hover { color: var(--gold); padding-left: 0.5rem; }
.nav-mobile .mobile-cta {
  margin-top: 1.5rem;
  text-align: center;
  background: var(--gold);
  color: var(--bg-primary) !important;
  padding: 1rem 2rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.82rem;
  border-bottom: none;
  border-radius: 0;
}
.nav-mobile .mobile-cta:hover { padding-left: 2rem; background: var(--gold-light); }

/* ================================================================
   BUTTONS
================================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.875rem 2rem;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 0;
  transition: all 0.25s ease;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}
.btn--primary  { background: var(--gold); color: #0a0a0a !important; border: 2px solid var(--gold); }
.btn--primary:hover { background: var(--gold-light); border-color: var(--gold-light); transform: translateY(-2px); color: #0a0a0a !important; }
.btn--outline  { border: 2px solid var(--gold); color: var(--gold); background: transparent; }
.btn--outline:hover { background: var(--gold); color: #0a0a0a !important; }
.btn--ghost    { border: 2px solid rgba(255,255,255,0.3); color: #fff; background: transparent; }
.btn--ghost:hover  { border-color: var(--gold); color: var(--gold); }
.btn--sm { padding: 0.6rem 1.35rem; font-size: 0.72rem; }

/* ================================================================
   HERO — Westminster-style: video BG + brand columns
================================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding-top: 80px;
}

/* Video background */
.hero__video-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__video-wrap video {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}
/* Overlay on video */
.hero__video-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--hero-overlay);
}

/* Fallback static image */
.hero__bg-image {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  background-color: #0d1a0f;
}
.hero__bg-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--hero-overlay);
}

/* Gradient fade at the bottom */
.hero__fade {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 55%;
  background: linear-gradient(to top, var(--bg-primary) 0%, rgba(0,0,0,0) 100%);
  z-index: 1;
  pointer-events: none;
}

/* Content wrapper sits above video */
.hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
}

/* Mobile: dark overlay over entire hero section (not just content area) */
@media (max-width: 900px) {
  .hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 1;
    pointer-events: none;
  }
  /* Content and fade sit above the overlay */
  .hero__fade    { z-index: 2; }
  .hero__content { z-index: 3; }

  /* Force white text regardless of mode */
  .hero__preheader { color: rgba(255,255,255,0.75) !important; }
  .hero__col-name  { color: #fff !important; }
  .hero__col-subtitle,
  .hero__col-desc  { color: rgba(255,255,255,0.75) !important; }

  /* Hide left/right slider arrows on mobile */
  .hero-slider-prev,
  .hero-slider-next { display: none !important; }
}

/* "What brings you here?" label */
.hero__preheader {
  font-size: 0.82rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  display: block;
  text-align: center;
  margin-bottom: 2.5rem;
}

/* Three brand columns */
.hero__cols {
  display: flex;
  align-items: stretch;
  border-top: 1px solid rgba(255,255,255,0.1);
  overflow: hidden; /* clip slider on mobile */
}

.hero__col {
  flex: 1;
  padding: clamp(2rem,4vw,3.5rem) clamp(1.5rem,3vw,2.5rem) clamp(3rem,6vw,5rem);
  cursor: pointer;
  border-right: 1px solid rgba(255,255,255,0.08);
  transition: background 0.3s;
  position: relative;
}
.hero__col:last-child { border-right: none; }
.hero__col:hover { background: rgba(255,255,255,0.04); }

.hero__col-name {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.6rem, 3.5vw, 3.8rem);
  font-weight: 700;
  color: rgba(255,255,255,0.7);
  line-height: 1;
  margin-bottom: 1rem;
  transition: color 0.3s;
}
.hero__col.is-active .hero__col-name,
.hero__col:hover .hero__col-name { color: #fff; }

.hero__col-bar {
  width: 0;
  height: 2px;
  background: var(--gold);
  margin-bottom: 1.25rem;
  transition: width 0.4s ease;
}
.hero__col.is-active .hero__col-bar { width: 55px; }

.hero__col-detail {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.45s ease, opacity 0.45s ease;
}
.hero__col.is-active .hero__col-detail {
  max-height: 200px;
  opacity: 1;
}

.hero__col-subtitle {
  font-size: 0.95rem;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  margin-bottom: 0.5rem;
}
.hero__col-desc {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.6);
  line-height: 1.65;
  max-width: 320px;
}

/* Mobile: handled by hero slider block above */

/* ================================================================
   SECTION EYEBROW
================================================================ */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  margin-bottom: 1.25rem;
}
.eyebrow::before { content:''; display:block; width:32px; height:1px; background:var(--gold); flex-shrink:0; }
.eyebrow--center { justify-content: center; }
.eyebrow--center::after { content:''; display:block; width:32px; height:1px; background:var(--gold); flex-shrink:0; }

/* ================================================================
   BRAND CARDS
================================================================ */
.brands-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 1.5px;
  background: var(--border);
  overflow: hidden; /* clip scale transforms */
  width: 100%;
  max-width: 100vw;
}
@media (max-width: 900px) {
  .brands-grid { grid-template-columns: 1fr; }
}

.brand-card {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  max-width: 100%;
}
@media (max-width: 900px) {
  .brand-card { aspect-ratio: 3/4; min-height: 400px; }
}
@media (max-width: 520px) {
  .brand-card { aspect-ratio: 3/4; min-height: 320px; }
}

.brand-card__bg { position:absolute; inset:0; }
.brand-card--elementals .brand-card__bg { background: linear-gradient(135deg,#0d2a24,#1a4038,#0d2a24); }
.brand-card--stitch .brand-card__bg     { background: linear-gradient(135deg,#2a150c,#4a2010,#2a150c); }
.brand-card--roam .brand-card__bg       { background: linear-gradient(135deg,#0d1a2a,#1a2a4a,#0d1a2a); }
.brand-card__overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,0.92) 0%,rgba(0,0,0,0.1) 60%,transparent 100%); }
.brand-card__img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center top; opacity:0.6; transition: opacity 0.4s; }
.brand-card:hover .brand-card__img { opacity:0.75; }
.brand-card__content {
  position:relative; z-index:1;
  height:100%; display:flex; flex-direction:column; justify-content:flex-end;
  padding: clamp(1.5rem,3vw,2.5rem);
}
.brand-card__icon { font-size:2.25rem; margin-bottom:0.875rem; display:block; }
.brand-card__tag  { font-size:0.65rem; letter-spacing:0.25em; text-transform:uppercase; font-weight:600; margin-bottom:0.45rem; }
.brand-card--elementals .brand-card__tag { color: var(--brand-el-lt); }
.brand-card--stitch .brand-card__tag     { color: var(--brand-st-lt); }
.brand-card--roam .brand-card__tag       { color: var(--brand-ro-lt); }
.brand-card__name { font-family:'Playfair Display',serif; font-size:clamp(1.25rem,2.5vw,1.7rem); color:#fff; margin-bottom:0.55rem; }
.brand-card__desc { font-size:0.83rem; color:rgba(255,255,255,0.58); line-height:1.6; margin-bottom:1.2rem; }
.brand-card__cta  { display:inline-flex; align-items:center; gap:0.5rem; font-size:0.72rem; letter-spacing:0.15em; text-transform:uppercase; font-weight:700; color:var(--gold); transition:gap 0.2s; }
.brand-card:hover .brand-card__cta { gap:0.9rem; }

/* ================================================================
   FEATURE BLOCKS
================================================================ */
.feature-block { display:grid; grid-template-columns:1fr 1fr; align-items:stretch; }
.feature-block--rev { direction:rtl; }
.feature-block--rev > * { direction:ltr; }
@media (max-width:900px) {
  .feature-block,
  .feature-block--rev { grid-template-columns:1fr; direction:ltr; }
}
.feature-block__visual {
  position:relative; min-height:clamp(280px,40vw,540px); overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.feature-block__visual img {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.feature-block__body {
  padding: clamp(3rem,6vw,6rem) clamp(2rem,5vw,5rem);
  display:flex; flex-direction:column; justify-content:center;
  background: var(--bg-secondary);
  transition: background 0.35s;
}
.feature-list { margin-top:2rem; }
.feature-list__item {
  display:flex; align-items:flex-start; gap:1rem;
  padding:0.9rem 0; border-bottom:1px solid var(--border);
}
.feature-list__item:last-child { border-bottom:none; }
.feature-list__icon {
  width:34px; height:34px; flex-shrink:0;
  border:1px solid var(--gold-dim);
  display:flex; align-items:center; justify-content:center;
  color:var(--gold); font-size:0.85rem;
}
.feature-list__text strong { color:var(--text-primary); font-size:0.88rem; display:block; }
.feature-list__text span   { color:var(--text-muted); font-size:0.8rem; }

/* ================================================================
   STATS
================================================================ */
.stats-row {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--border);
  border-left:1px solid var(--border);
}
@media (max-width:700px) { .stats-row { grid-template-columns:repeat(2,1fr); } }
.stat-item {
  padding: clamp(2rem,4vw,3rem) clamp(1rem,2vw,2rem);
  border-right:1px solid var(--border);
  border-bottom:1px solid var(--border);
  text-align:center;
  background:var(--bg-secondary);
  transition:background 0.35s;
}
.stat-item__number { display:block; font-family:'Playfair Display',serif; font-size:clamp(2rem,4vw,3.5rem); font-weight:700; color:var(--gold); line-height:1; margin-bottom:0.4rem; }
.stat-item__label  { font-size:0.7rem; letter-spacing:0.15em; text-transform:uppercase; color:var(--text-muted); }

/* ================================================================
   QUOTE
================================================================ */
.quote-block {
  padding: clamp(4rem,8vw,8rem) 0;
  background:var(--bg-secondary);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  text-align:center;
  transition:background 0.35s;
}
.quote-block__mark   { font-family:serif; font-size:5rem; line-height:0; color:var(--gold); opacity:0.2; display:block; margin-bottom:2.5rem; }
.quote-block__text   { font-family:'Playfair Display',serif; font-size:clamp(1.1rem,2.5vw,1.85rem); font-style:italic; color:var(--text-primary); max-width:820px; margin:0 auto 2rem; line-height:1.55; }
.quote-block__author { font-size:0.72rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--gold); }

/* ================================================================
   PAGE BANNER
================================================================ */
.page-banner {
  padding: calc(80px + clamp(3rem,6vw,6rem)) 0 clamp(3rem,5vw,5rem);
  background: var(--bg-secondary);
  position:relative; overflow:hidden;
  transition:background 0.35s;
}
.page-banner::after {
  content:''; position:absolute;
  bottom:0; left:0; right:0; height:1px;
  background:linear-gradient(to right,transparent,var(--gold),transparent);
}

/* ================================================================
   FORM
================================================================ */
.contact-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap: clamp(2rem,6vw,6rem);
  align-items:start;
}
@media (max-width:800px) { .contact-grid { grid-template-columns:1fr; } }
.form-row2 { display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; }
@media (max-width:520px) { .form-row2 { grid-template-columns:1fr; } }
.form-group { margin-bottom:1.4rem; }
.form-label { display:block; font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--text-secondary); margin-bottom:0.55rem; font-weight:600; }
.form-input,
.form-select,
.form-textarea {
  width:100%; padding:0.9rem 1.2rem;
  background:var(--bg-steel); border:1px solid var(--border);
  color:var(--text-primary);
  font-family:'DM Sans',sans-serif; font-size:0.95rem;
  outline:none; border-radius:0; appearance:none;
  transition:border-color 0.2s, background 0.35s;
}
.form-input:focus, .form-textarea:focus, .form-select:focus { border-color:var(--gold); }
.form-textarea { resize:vertical; min-height:140px; }
.form-select {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M0 0l6 8 6-8z' fill='%23c8a96e'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1rem center; cursor:pointer;
}

/* ================================================================
   VALUES GRID
================================================================ */
.values-grid { display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--border); }
@media (max-width:900px) { .values-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px) { .values-grid { grid-template-columns:1fr; } }
.value-item {
  padding: clamp(2rem,4vw,3rem);
  border-right:1px solid var(--border); border-bottom:1px solid var(--border);
  transition:background 0.25s;
}
.value-item:hover { background:var(--bg-card); }
.value-item:nth-child(3n) { border-right:none; }
@media (max-width:900px) {
  .value-item:nth-child(3n) { border-right:1px solid var(--border); }
  .value-item:nth-child(2n) { border-right:none; }
}
.value-item__icon  { font-size:1.85rem; margin-bottom:1.2rem; display:block; }
.value-item__title { font-size:1rem; color:var(--text-primary); margin-bottom:0.6rem; }

/* ================================================================
   BRAND SHOWCASE (brands page)
================================================================ */
.brand-showcase { padding: clamp(4rem,8vw,7rem) 0; transition:background 0.35s; }
.brand-showcase:nth-child(even) { background:var(--bg-secondary); }
.brand-showcase__inner {
  display:grid; grid-template-columns:1fr 1fr;
  gap: clamp(2rem,5vw,5rem); align-items:center;
}
@media (max-width:900px) { .brand-showcase__inner { grid-template-columns:1fr; } }
.brand-showcase--rev .brand-showcase__inner { direction:rtl; }
.brand-showcase--rev .brand-showcase__inner > * { direction:ltr; }
@media (max-width:900px) { .brand-showcase--rev .brand-showcase__inner { direction:ltr; } }
.brand-showcase__visual { position:relative; aspect-ratio:4/3; overflow:hidden; }
.brand-showcase__visual img { width:100%; height:100%; object-fit:cover; transition:transform 0.5s; }
.brand-showcase:hover .brand-showcase__visual img { transform:scale(1.03); }

/* ================================================================
   LEGAL
================================================================ */
.legal-layout { display:grid; grid-template-columns:220px 1fr; gap: clamp(2rem,5vw,5rem); align-items:start; }
@media (max-width:800px) { .legal-layout { grid-template-columns:1fr; } }
.legal-toc { position:sticky; top:calc(80px + 1.5rem); }
.legal-toc-heading { font-size:0.68rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--gold); margin-bottom:1rem; font-weight:600; }
.legal-toc a { display:block; padding:0.4rem 0; font-size:0.875rem; color:var(--text-muted); border-bottom:1px solid var(--border); transition:color 0.2s, padding-left 0.2s; }
.legal-toc a:hover { color:var(--gold); padding-left:0.35rem; }
.legal-content h2 { font-size:1.55rem; margin-top:2.5rem; padding-top:2rem; border-top:1px solid var(--border); margin-bottom:1rem; }
.legal-content h2:first-child { border-top:none; margin-top:0; padding-top:0; }
.legal-content p { font-size:0.95rem; line-height:1.8; }
.legal-content ul { margin:1rem 0 1.25rem 1.5rem; list-style:disc; }
.legal-content ul li { color:var(--text-secondary); font-size:0.95rem; margin-bottom:0.4rem; }

/* ================================================================
   FOOTER
================================================================ */
#site-footer { background:var(--bg-secondary); border-top:1px solid var(--border); transition:background 0.35s; }
.footer-top { padding: clamp(3.5rem,7vw,6rem) 0 clamp(2rem,4vw,4rem); }
.footer-grid {
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr 1fr;
  gap: clamp(1.5rem,3vw,3rem);
}
@media (max-width:1000px) { .footer-grid { grid-template-columns:1fr 1fr 1fr; } }
@media (max-width:640px)  { .footer-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:380px)  { .footer-grid { grid-template-columns:1fr; } }
.footer-brand-col { grid-column:1; }
@media (max-width:1000px) { .footer-brand-col { grid-column:1/-1; } }

.footer-heading { font-size:0.68rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--gold); margin-bottom:1.25rem; font-weight:600; display:block; }
.footer-links { display:flex; flex-direction:column; gap:0.55rem; }
.footer-links a { font-size:0.875rem; color:var(--text-muted); transition:color 0.2s; }
.footer-links a:hover { color:var(--gold); }
.footer-tagline { font-size:0.875rem; color:var(--text-muted); max-width:300px; line-height:1.7; margin-top:1rem; }
.social-links { display:flex; gap:0.75rem; margin-top:1.5rem; }
.social-links a {
  width:36px; height:36px; border-radius:50%;
  border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  color:var(--text-muted); transition:border-color 0.2s, color 0.2s;
}
.social-links a:hover { border-color:var(--gold); color:var(--gold); }
.footer-bottom {
  border-top:1px solid var(--border); padding:1.5rem 0;
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:1rem;
}
.footer-copy { font-size:0.8rem; color:var(--text-muted); }
.footer-legal { display:flex; gap:1.5rem; flex-wrap:wrap; }
.footer-legal a { font-size:0.8rem; color:var(--text-muted); }
.footer-legal a:hover { color:var(--gold); }

/* ================================================================
   UTILITIES
================================================================ */
.gold-line  { width:50px; height:2px; background:var(--gold); margin:1.5rem 0; }
.divider    { border:none; border-top:1px solid var(--border); margin:0; }
.text-gold  { color:var(--gold); }
.text-muted { color:var(--text-muted); }
.text-center{ text-align:center; }
.bg-sec     { background:var(--bg-secondary); transition:background 0.35s; }
.bg-card    { background:var(--bg-card); transition:background 0.35s; }

/* ================================================================
   SCROLL ANIMATIONS
================================================================ */
.fade-up { opacity:0; transform:translateY(28px); transition:opacity 0.65s ease, transform 0.65s ease; }
.fade-up.in { opacity:1; transform:none; }
.fade-in  { opacity:0; transition:opacity 0.65s ease; }
.fade-in.in { opacity:1; }
.stagger > *:nth-child(1) { transition-delay:0s; }
.stagger > *:nth-child(2) { transition-delay:0.1s; }
.stagger > *:nth-child(3) { transition-delay:0.2s; }
.stagger > *:nth-child(4) { transition-delay:0.3s; }

/* Uploaded via Customizer → Logo Settings */
.site-logo {
  height: 40px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  display: block;
}

/* Dark mode: show dark logo, hide light logo */
[data-theme="dark"]  .site-logo--dark  { display: block; }
[data-theme="dark"]  .site-logo--light { display: none;  }

/* Light mode: show light logo, hide dark logo */
[data-theme="light"] .site-logo--light { display: block; }
[data-theme="light"] .site-logo--dark  { display: none;  }

/* Fallback: if only one dual-logo exists, always show it */
.site-logo--dark:only-child,
.site-logo--light:only-child { display: block !important; }

/* Fallback: WordPress default custom logo — invert based on theme */
[data-theme="dark"]  .custom-logo-link img,
[data-theme="dark"]  .nav-logo > img:not(.site-logo) {
  filter: brightness(0) invert(1);
}
[data-theme="light"] .custom-logo-link img,
[data-theme="light"] .nav-logo > img:not(.site-logo) {
  filter: brightness(0);
}

/* ================================================================
   MOBILE HERO SLIDER
================================================================ */
@media (max-width: 768px) {
  .hero__cols {
    position: relative;
    overflow: hidden;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
  }
  .hero__col {
    flex: 0 0 100% !important;
    min-width: 100% !important;
    border-right: none !important;
    border-bottom: none !important;
    transform: translateX(var(--slide-offset, 0px));
    transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .hero__col-detail {
    max-height: 200px !important;
    opacity: 1 !important;
  }
  .hero__col-name { color: #fff !important; font-size: clamp(2rem, 9vw, 3.5rem) !important; }
  .hero__col-bar  { width: 40px !important; }

  /* Slider nav buttons */
  .hero-slider-prev,
  .hero-slider-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    backdrop-filter: blur(6px);
    transition: background 0.2s;
  }
  .hero-slider-prev:hover,
  .hero-slider-next:hover { background: rgba(255,255,255,0.22); }
  .hero-slider-prev { left: 12px; }
  .hero-slider-next { right: 12px; }

  /* Slider dots */
  .hero-slider-dots {
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 7px;
    z-index: 10;
  }
  .hero-slider-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255,255,255,0.35);
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
  }
  .hero-slider-dot.active {
    background: var(--gold);
    transform: scale(1.3);
  }
}

/* ================================================================
   THIRD-PARTY DEPARTURE MODAL
================================================================ */
.apex-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(4px);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.apex-modal-overlay.open {
  opacity: 1;
  pointer-events: all;
}
.apex-modal {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 2.5rem 2rem 2rem;
  max-width: 420px;
  width: 100%;
  text-align: center;
  transform: translateY(16px) scale(0.97);
  transition: transform 0.25s ease;
  box-shadow: 0 24px 64px rgba(0,0,0,0.45);
}
.apex-modal-overlay.open .apex-modal {
  transform: translateY(0) scale(1);
}
.apex-modal__icon {
  font-size: 2rem;
  margin-bottom: 1rem;
}
.apex-modal__title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.6rem;
}
.apex-modal__site {
  color: var(--gold);
  font-weight: 600;
}
.apex-modal__body {
  font-size: 0.88rem;
  color: var(--text-secondary);
  margin-bottom: 1.8rem;
  line-height: 1.6;
}
.apex-modal__actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}
.apex-modal__cancel {
  padding: 0.7rem 1.5rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.85rem;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.apex-modal__cancel:hover { border-color: var(--gold); color: var(--gold); }
.apex-modal__continue {
  padding: 0.7rem 1.5rem;
  border-radius: 6px;
  background: var(--gold);
  color: #0a0a0a;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: background 0.2s;
}
.apex-modal__continue:hover { background: var(--gold-light); }

/* ================================================================
   WORDPRESS CORE
================================================================ */
.entry-content a { color:var(--gold); }
.screen-reader-text { clip:rect(1px,1px,1px,1px); height:1px; overflow:hidden; position:absolute; width:1px; }
.wp-block-image { margin:2rem 0; }

/* ================================================================
   RESPONSIVE — last-mile fixes
================================================================ */
@media (max-width:1100px) {
  .nav-menu { gap:1.25rem; }
}
@media (max-width:900px) {
  .nav-menu    { display:none; }
  .nav-toggle  { display:flex; }
  .btn-nav-cta { display:none; }
  .feature-block__body { padding: clamp(2.5rem,5vw,3.5rem) clamp(1.5rem,4vw,2.5rem); }

  /* ── Mobile header: [toggle | logo | hamburger] ── */
  .nav-inner {
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    align-items: center;
    gap: 0;
    padding: 0 clamp(1rem, 3vw, 1.5rem);
  }

  /* Logo: middle column, centred */
  .nav-logo {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    position: static;    /* cancel any leftover absolute positioning */
    transform: none;
  }

  /* Unwrap nav-controls so its children become grid items */
  .nav-controls {
    display: contents;
  }

  /* Theme toggle → left column */
  .theme-toggle {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
  }

  /* Hamburger → right column */
  .nav-toggle {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }

  /* Desktop nav-menu is hidden — keep it out of grid flow */
  .nav-menu {
    display: none !important;
  }
}
@media (max-width:680px) {
  .footer-bottom { flex-direction:column; text-align:center; }
  .footer-legal  { justify-content:center; }
}
@media (max-width:480px) {
  .btn { padding:0.8rem 1.5rem; font-size:0.75rem; }
  .stats-row { grid-template-columns:1fr 1fr; }
}