/* MB Sanitas — Design System · bundled global stylesheet
   Self-contained build for the website/ folder (tokens inlined). */

/* ===== FONTS ===== */
/* MB Sanitas — Webfonts
 * Hanken Grotesk — body & UI (humanist, friendly, highly legible)
 * Schibsted Grotesk — display headings (modern, confident, technical)
 * JetBrains Mono — technical specs, dimensions, measurements
 * NOTE: served from Google Fonts CDN. Ask the design owner if local/offline
 * embedding is required, and we'll swap these for self-hosted woff2 files.
 */
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800&family=Schibsted+Grotesk:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');


/* ===== COLORS ===== */
/* ============================================================
   MB Sanitas — Color tokens
   Palette derived from the logo: deep navy → bright aqua.
   Water/aqua family for a bathroom & heating showroom —
   clean, premium, technically trustworthy, calm.
   ============================================================ */

:root {
  /* ---- Brand: Navy (trust, depth, the "mb") ---- */
  --navy-950: #07182E;
  --navy-900: #0B2746;
  --navy-800: #11335E;   /* core brand navy (logo "mb") */
  --navy-700: #173F70;
  --navy-600: #1E4F86;
  --navy-500: #2A639E;

  /* ---- Brand: Blue → Aqua (water, the "sanitas") ---- */
  --blue-700: #166DA8;
  --blue-600: #1E84C6;   /* primary action blue */
  --blue-500: #2497D6;
  --cyan-500: #29ABE2;   /* logo bright aqua */
  --cyan-400: #4FBDEA;
  --cyan-300: #82D2F1;
  --cyan-200: #B6E5F8;
  --cyan-100: #DCF1FB;
  --cyan-50:  #EFF8FD;

  /* ---- Neutrals: cool porcelain greys (tile, ceramic, water) ---- */
  --white:    #FFFFFF;
  --grey-50:  #F6F9FB;
  --grey-100: #EDF2F6;
  --grey-150: #E2EAF0;
  --grey-200: #D5DFE7;
  --grey-300: #BECCD7;
  --grey-400: #98A9B7;
  --grey-500: #6F8290;
  --grey-600: #51626F;
  --grey-700: #3A4853;
  --grey-800: #25313A;
  --grey-900: #161F26;
  --black:    #0C1318;

  /* ---- Semantic accents ---- */
  --success-600: #1E8E63;
  --success-100: #DBF1E7;
  --warning-600: #C98415;
  --warning-100: #FBEFD6;
  --danger-600:  #C53D3D;
  --danger-100:  #F8E0E0;
  --info-600:    var(--blue-600);
  --info-100:    var(--cyan-100);

  /* ---- Brand gradients (logo signature) ---- */
  --grad-brand: linear-gradient(110deg, var(--navy-800) 0%, var(--blue-600) 48%, var(--cyan-500) 100%);
  --grad-aqua:  linear-gradient(135deg, var(--blue-600) 0%, var(--cyan-400) 100%);
  --grad-deep:  linear-gradient(160deg, var(--navy-900) 0%, var(--navy-700) 100%);
  --grad-wash:  linear-gradient(180deg, var(--cyan-50) 0%, var(--white) 100%);

  /* ============================================================
     Semantic aliases — reference these in components
     ============================================================ */

  /* Text */
  --text-strong:   var(--navy-900);
  --text-body:     var(--grey-700);
  --text-muted:    var(--grey-500);
  --text-faint:    var(--grey-400);
  --text-on-dark:  var(--white);
  --text-on-dark-muted: var(--cyan-100);
  --text-brand:    var(--blue-600);
  --text-link:     var(--blue-600);

  /* Surfaces */
  --surface-page:    var(--grey-50);
  --surface-card:    var(--white);
  --surface-raised:  var(--white);
  --surface-sunken:  var(--grey-100);
  --surface-tint:    var(--cyan-50);
  --surface-inverse: var(--navy-900);
  --surface-brand:   var(--navy-800);

  /* Borders & dividers */
  --border-subtle:  var(--grey-150);
  --border-default: var(--grey-200);
  --border-strong:  var(--grey-300);
  --border-brand:   var(--cyan-300);
  --border-focus:   var(--blue-600);

  /* Interactive — primary */
  --action-primary:        var(--blue-600);
  --action-primary-hover:  var(--blue-700);
  --action-primary-press:  var(--navy-700);
  --action-primary-text:   var(--white);

  /* Interactive — accent (aqua, for highlights/CTAs) */
  --action-accent:         var(--cyan-500);
  --action-accent-hover:   var(--blue-500);

  /* Interactive — secondary / outline */
  --action-secondary-bg:    var(--white);
  --action-secondary-text:  var(--navy-800);
  --action-secondary-border:var(--grey-200);
  --action-secondary-hover: var(--grey-50);

  /* Focus ring */
  --ring: 0 0 0 3px color-mix(in srgb, var(--blue-600) 35%, transparent);
}


/* ===== TYPOGRAPHY ===== */
/* ============================================================
   MB Sanitas — Typography tokens
   Display: Schibsted Grotesk · Body/UI: Hanken Grotesk · Mono: JetBrains Mono
   ============================================================ */

:root {
  /* Families */
  --font-display: "Schibsted Grotesk", "Hanken Grotesk", system-ui, sans-serif;
  --font-sans:    "Hanken Grotesk", system-ui, -apple-system, Segoe UI, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Weights */
  --fw-regular:  400; /* @kind other */
  --fw-medium:   500; /* @kind other */
  --fw-semibold: 600; /* @kind other */
  --fw-bold:     700; /* @kind other */
  --fw-extra:    800; /* @kind other */

  /* Type scale (1.250 major-third-ish, tuned) */
  --fs-display:  clamp(2.75rem, 1.6rem + 4.4vw, 4.5rem); /* @kind other */
  --fs-h1:       clamp(2.1rem, 1.4rem + 2.6vw, 3.25rem); /* @kind other */
  --fs-h2:       clamp(1.6rem, 1.2rem + 1.5vw, 2.25rem); /* @kind other */
  --fs-h3:       1.5rem;     /* @kind other */
  --fs-h4:       1.25rem;    /* @kind other */
  --fs-lead:     1.1875rem;  /* @kind other */
  --fs-body:     1rem;       /* @kind other */
  --fs-sm:       0.875rem;   /* @kind other */
  --fs-xs:       0.75rem;    /* @kind other */
  --fs-eyebrow:  0.8125rem;  /* @kind other */

  /* Line heights */
  --lh-tight:    1.05; /* @kind other */
  --lh-snug:     1.18; /* @kind other */
  --lh-heading:  1.25; /* @kind other */
  --lh-body:     1.6; /* @kind other */
  --lh-relaxed:  1.7; /* @kind other */

  /* Letter spacing */
  --ls-tight:    -0.02em; /* @kind other */
  --ls-snug:     -0.01em; /* @kind other */
  --ls-normal:   0; /* @kind other */
  --ls-wide:     0.04em; /* @kind other */
  --ls-eyebrow:  0.14em; /* @kind other */
}


/* ===== SPACING / RADIUS / SHADOW / MOTION ===== */
/* ============================================================
   MB Sanitas — Spacing, radius, shadow, motion, layout tokens
   ============================================================ */

:root {
  /* Spacing scale (4px base) */
  --space-0:   0;
  --space-1:   0.25rem;  /* 4 */
  --space-2:   0.5rem;   /* 8 */
  --space-3:   0.75rem;  /* 12 */
  --space-4:   1rem;     /* 16 */
  --space-5:   1.5rem;   /* 24 */
  --space-6:   2rem;     /* 32 */
  --space-7:   3rem;     /* 48 */
  --space-8:   4rem;     /* 64 */
  --space-9:   6rem;     /* 96 */
  --space-10:  8rem;     /* 128 */

  /* Radii — soft, ceramic, never sharp */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-pill: 999px;

  /* Borders */
  --bw-hair: 1px;
  --bw-thin: 1.5px;
  --bw-med:  2px;

  /* Shadows — soft, cool-tinted, diffuse (premium, not heavy) */
  --shadow-xs:  0 1px 2px rgba(13, 42, 75, 0.06);
  --shadow-sm:  0 2px 8px rgba(13, 42, 75, 0.07);
  --shadow-md:  0 8px 24px rgba(13, 42, 75, 0.09);
  --shadow-lg:  0 18px 48px rgba(13, 42, 75, 0.12);
  --shadow-xl:  0 32px 72px rgba(11, 39, 70, 0.18);
  --shadow-brand: 0 10px 24px rgba(30, 132, 198, 0.18);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6);

  /* Motion — calm, confident, no bounce */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast:   0.14s; /* @kind other */
  --dur-base:   0.24s; /* @kind other */
  --dur-slow:   0.42s; /* @kind other */

  /* Layout */
  --container:    1200px;
  --container-wide: 1360px;
  --container-narrow: 760px;
  --gutter:       clamp(1.25rem, 4vw, 4rem); /* @kind spacing */
  --header-h:     76px;
}

/* ===== ADDITIONAL STYLES FOR UPDATED NAVBAR & SEARCH MODAL ===== */

.lang-selector {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--navy-800);
}
nav:not(.scrolled) .lang-selector {
  color: rgba(255, 255, 255, 0.85);
}
.lang-selector a {
  color: inherit;
  text-decoration: none;
  opacity: 0.6;
  transition: opacity var(--dur-fast);
}
.lang-selector a:hover {
  opacity: 1;
}
.lang-selector .sep {
  opacity: 0.3;
}
.lang-selector .active {
  color: var(--cyan-500);
}
nav:not(.scrolled) .lang-selector .active {
  color: var(--cyan-300);
}

.nav-socials {
  display: flex;
  align-items: center;
  gap: 12px;
}
.nav-socials a {
  display: inline-flex;
  color: var(--navy-800);
  opacity: 0.7;
  transition: color var(--dur-fast), opacity var(--dur-fast), transform var(--dur-fast);
}
nav:not(.scrolled) .nav-socials a {
  color: rgba(255, 255, 255, 0.85);
}
.nav-socials a:hover {
  color: var(--blue-600);
  opacity: 1;
  transform: translateY(-1px);
}
nav:not(.scrolled) .nav-socials a:hover {
  color: var(--cyan-300);
}
.nav-socials svg {
  width: 18px;
  height: 18px;
}

.nav-search-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
  color: var(--navy-800);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color var(--dur-fast), background var(--dur-fast);
}
nav:not(.scrolled) .nav-search-btn {
  color: rgba(255, 255, 255, 0.85);
}
.nav-search-btn:hover {
  background: var(--grey-100);
  color: var(--blue-600);
}
nav:not(.scrolled) .nav-search-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--cyan-300);
}
.nav-search-btn svg {
  width: 18px;
  height: 18px;
}

/* Modal Search Dialog */
dialog#search-dialog {
  border: none;
  border-radius: 20px;
  padding: 0;
  max-width: 600px;
  width: calc(100% - 32px);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.2);
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
}
dialog#search-dialog::backdrop {
  background: rgba(7, 24, 46, 0.6);
  backdrop-filter: blur(8px);
}
dialog#search-dialog .dialog-content {
  padding: 32px;
}
dialog#search-dialog .dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
dialog#search-dialog h2 {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--navy-900);
  margin: 0;
}
dialog#search-dialog .dialog-close-btn {
  background: none;
  border: none;
  font-size: 28px;
  color: var(--grey-500);
  cursor: pointer;
  transition: color var(--dur-fast);
  line-height: 1;
}
dialog#search-dialog .dialog-close-btn:hover {
  color: var(--navy-900);
}
dialog#search-dialog .search-input-wrapper {
  display: flex;
  gap: 12px;
}
dialog#search-dialog input[type="search"] {
  flex: 1;
  height: 48px;
  border-radius: 12px;
  border: 1px solid var(--border-default);
  padding: 0 16px;
  font-family: var(--font-sans);
  font-size: 15px;
  outline: none;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
dialog#search-dialog input[type="search"]:focus {
  border-color: var(--blue-600);
  box-shadow: 0 0 0 3px rgba(30, 132, 198, 0.15);
}
dialog#search-dialog button {
  height: 48px;
  padding: 0 24px;
}

/* Search results panel */
.search-results-panel {
  margin-top: 20px;
  max-height: 250px;
  overflow-y: auto;
  display: none;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid var(--border-subtle);
  padding-top: 16px;
}
.search-result-item {
  display: block;
  padding: 12px;
  border-radius: 8px;
  background: var(--grey-50);
  text-decoration: none;
  color: var(--navy-800);
  transition: background var(--dur-fast), transform var(--dur-fast);
}
.search-result-item:hover {
  background: var(--cyan-50);
  transform: translateX(4px);
}
.search-result-item h4 {
  font-family: var(--font-sans);
  font-size: 14.5px;
  font-weight: 700;
  margin-bottom: 2px;
  margin-top: 0;
}
.search-result-item p {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
}
.search-no-results {
  text-align: center;
  padding: 20px;
  color: var(--text-muted);
  font-size: 14.5px;
}

@media (max-width: 768px) {
  .nav-socials {
    display: none;
  }
}

/* ===== PARTNERS SECTION ===== */
.partners {
  padding: var(--space-9) var(--pad);
  background: var(--white);
  border-bottom: 1px solid var(--hairline);
}
.partners-inner {
  max-width: var(--maxw);
  margin: 0 auto;
}
.partners-header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 52px;
}
.partners-header h2 {
  font-size: clamp(24px, 2.2vw, 32px);
  color: var(--ink);
  margin: 12px 0 16px;
  font-family: var(--font-display);
}
.partners-header p {
  color: var(--text-body);
  font-size: 15.5px;
  line-height: 1.5;
  margin: 0;
}
.partners-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.partner-card {
  background: var(--grey-50);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  padding: 32px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base), box-shadow var(--dur-base);
}
.partner-card:hover {
  transform: translateY(-4px);
  border-color: var(--cyan-200);
  box-shadow: var(--shadow-md);
  background: var(--white);
}
.partner-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--grad-aqua);
  color: #fff;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
}
.partner-card h3 {
  font-family: var(--font-display);
  font-size: 16.5px;
  color: var(--navy-900);
  margin: 0 0 6px 0;
  font-weight: 700;
}
.partner-role {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--blue-600);
  letter-spacing: 0.08em;
  margin-bottom: 14px;
}
.partner-desc {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-body);
  margin: 0;
}

@media (max-width: 1024px) {
  .partners-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .partners-grid {
    grid-template-columns: 1fr;
  }
  .partner-card {
    padding: 24px 16px;
  }
}

/* ===== 3D FLAGSHIP SHOWCASE GALLERY ===== */
.flagship-gallery {
  max-width: var(--maxw);
  margin: 52px auto 0;
  padding: 0 var(--pad);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 52px;
}
.flagship-gallery-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 28px;
  text-align: center;
  letter-spacing: -0.01em;
}
.showcase-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.showcase-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base), box-shadow var(--dur-base);
}
.showcase-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
}
.showcase-img {
  height: 200px;
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: 16px;
}
.showcase-tag {
  background: rgba(7, 24, 46, 0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}
.showcase-info {
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.showcase-info h3 {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  margin: 0;
  line-height: 1.3;
}
.showcase-info p {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.65);
  margin: 0;
  line-height: 1.4;
}

@media (max-width: 900px) {
  .showcase-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .showcase-grid {
    grid-template-columns: 1fr;
  }
  .flagship-gallery {
    margin-top: 36px;
    padding-top: 36px;
  }
}

/* ===== DEVELOPER PROJECTS GRID ===== */
.project-card-dev:hover {
  transform: translateY(-4px);
  border-color: var(--cyan-200) !important;
  box-shadow: var(--shadow-md);
}
@media (max-width: 1024px) {
  .projects-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 600px) {
  .projects-grid {
    grid-template-columns: 1fr !important;
  }
  .project-card-dev {
    padding: 20px 16px !important;
  }
}

/* ===== GLOBAL NAVIGATION BAR STYLE ===== */
nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: 100px;
  background: var(--navy-950);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  transition: height var(--dur-base) var(--ease-out), border-color var(--dur-base), background var(--dur-base) var(--ease-out), box-shadow var(--dur-base);
}
nav.scrolled {
  height: 84px;
  background: #fff;
  border-bottom-color: var(--hairline);
  box-shadow: var(--shadow-sm);
}
.nav-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--pad);
  gap: 24px;
}
.nav-logo img {
  height: 80px;
  transition: height var(--dur-base) var(--ease-out), filter var(--dur-base);
}
nav:not(.scrolled) .nav-logo img {
  filter: brightness(0) invert(1);
}
nav.scrolled .nav-logo img {
  height: 68px;
}
.nav-links {
  display: flex;
  gap: 4px;
  list-style: none;
  align-items: center;
}
.nav-links a {
  font-size: 14.5px;
  font-weight: 500;
  text-decoration: none;
  padding: 9px 14px;
  border-radius: 10px;
  white-space: nowrap;
  transition: color var(--dur-fast), background var(--dur-fast);
}
nav:not(.scrolled) .nav-links a {
  color: rgba(255,255,255,0.85);
}
nav:not(.scrolled) .nav-links a:hover, nav:not(.scrolled) .nav-links a.active {
  color: var(--cyan-300);
  background: rgba(255,255,255,0.08);
}
nav.scrolled .nav-links a {
  color: var(--navy-800);
}
nav.scrolled .nav-links a:hover, nav.scrolled .nav-links a.active {
  color: var(--accent);
  background: var(--cyan-50);
}
.nav-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}
.nav-phone {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-fast);
}
nav:not(.scrolled) .nav-phone {
  color: rgba(255,255,255,0.9);
}
nav.scrolled .nav-phone {
  color: var(--navy-800);
}
.nav-phone svg {
  width: 16px;
  height: 16px;
  color: var(--cyan-400);
  transition: color var(--dur-fast);
}
nav.scrolled .nav-phone svg {
  color: var(--accent);
}
.nav-cta {
  height: 44px;
  padding: 0 20px;
  font-size: 14.5px;
}
.menu-toggle {
  display: none;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border-default);
  background: #fff;
  color: var(--navy-800);
  border-radius: 12px;
  padding: 10px 15px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
}
nav:not(.scrolled) .menu-toggle {
  color: #fff;
  border-color: rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.06);
}
nav.scrolled .menu-toggle {
  color: var(--navy-800);
  border-color: var(--border-default);
  background: #fff;
}
.menu-toggle svg {
  width: 16px;
  height: 16px;
}

/* ===== BRANDS DIALOG MODAL ===== */
dialog#brands-dialog {
  border: none;
  border-radius: 24px;
  padding: 0;
  max-width: 960px;
  width: calc(100% - 32px);
  box-shadow: var(--shadow-xl);
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  max-height: 85vh;
}
dialog#brands-dialog::backdrop {
  background: rgba(7, 24, 46, 0.65);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
dialog#brands-dialog .dialog-content {
  display: flex;
  flex-direction: column;
  max-height: 85vh;
}
dialog#brands-dialog .brands-modal-body {
  padding: 0 32px 32px;
  overflow-y: auto;
}
dialog#brands-dialog .brands-modal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
dialog#brands-dialog .brands-modal-col h3 {
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--blue-600);
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 10px;
  margin: 0 0 16px 0;
}
dialog#brands-dialog .brands-modal-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 16px;
}
dialog#brands-dialog .brands-modal-col ul li {
  font-size: 13.5px;
  color: var(--navy-900);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}
dialog#brands-dialog .brands-modal-col ul li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cyan-400);
  flex-shrink: 0;
}
dialog#brands-dialog .brands-modal-col-group {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
dialog#brands-dialog .brands-modal-col-group .brands-modal-col ul {
  grid-template-columns: 1fr;
}

@media (max-width: 900px) {
  dialog#brands-dialog .brands-modal-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}
@media (max-width: 600px) {
  dialog#brands-dialog .brands-modal-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  dialog#brands-dialog .dialog-content {
    max-height: 90vh;
  }
  dialog#brands-dialog .brands-modal-body {
    padding: 0 20px 24px;
  }
  dialog#brands-dialog .brands-modal-col ul {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ===== BRAND STATIC GRID ===== */
.brands-static {
  background: var(--white);
  padding: var(--space-7) var(--pad);
  border-bottom: 1px solid var(--hairline);
}
.brands-static-inner {
  max-width: var(--maxw);
  margin: 0 auto;
}
.brands-static-header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 36px;
}
.brands-static-header .eyebrow {
  color: var(--blue-600);
}
.brands-static-header h2 {
  font-size: clamp(24px, 2.2vw, 32px);
  color: var(--ink);
  margin: 8px 0 12px;
  font-family: var(--font-display);
}
.brands-static-header p {
  color: var(--text-body);
  font-size: 15.5px;
  line-height: 1.5;
  margin: 0;
}

.brands-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}
.brand-group {
  background: var(--grey-50);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 270px;
  transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base), box-shadow var(--dur-base);
}
.brand-group:hover {
  background: var(--white);
  border-color: var(--cyan-200);
  box-shadow: var(--shadow-md);
}
.brand-group h3 {
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--navy-800);
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 12px;
  margin: 0;
  text-align: center;
}
.brand-group-desc {
  font-size: 14.5px;
  color: var(--text-body);
  line-height: 1.5;
  text-align: center;
  margin: 8px 0 20px;
}
.brand-single-logo-container {
  overflow: hidden;
  width: 100%;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: auto;
  padding: 6px 0;
}
.brand-fade-logo {
  max-height: 44px;
  max-width: 140px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.6;
  transition: opacity 0.4s ease, filter var(--dur-base), opacity var(--dur-base);
}
.brand-fade-logo.fade-out {
  opacity: 0;
}
.brand-fade-logo:hover {
  filter: none;
  opacity: 1;
}

@media (max-width: 1024px) {
  .brands-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 768px) {
  .brands-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .brand-group {
    padding: 16px;
  }
}
@media (max-width: 480px) {
  .brands-grid {
    grid-template-columns: 1fr;
  }
}