/* ── Google Fonts — loaded once here for the entire site ── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');  /* display=swap is in the URL — FOIT prevention handled by Google Fonts */

/* ============================================
   CSA Advisors — Design System & Styles
   Dark Mode | Apple-like | ADA Compliant
   VERSION: v55 (full audit + cleanup)
   ============================================ */

/* Fallback font metrics matched to Inter — prevents layout shift during font load */
@font-face {
  font-family: 'Inter-fallback';
  src: local('-apple-system'), local('BlinkMacSystemFont'), local('Segoe UI');
  font-display: swap;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
  size-adjust: 107%;
}

/* --- CSS Custom Properties (Design Tokens) --- */
:root {
  /* Brand Colors */
  --color-bg-primary: #0a0a0f;
  --color-bg-secondary: #111118;
  --color-bg-card: #16161f;
  --color-bg-glass: rgba(17, 17, 24, 0.75);
  --color-bg-glass-border: rgba(120, 160, 190, 0.12);

  /* Steel Blue / Teal Palette (from logo) */
  --color-accent: #6ea0b8;
  --color-accent-light: #8fbdd4;
  --color-accent-bright: #a3d5e8;
  --color-accent-dim: #5a94ad;
  --color-accent-glow: rgba(110, 160, 184, 0.15);

  /* Text */
  --color-text-primary: #f0f2f5;
  --color-text-secondary: #a0a8b4;
  --color-text-muted: #6b7280;
  --color-text-accent: #8fbdd4;

  /* Borders & Dividers */
  --color-border: rgba(255, 255, 255, 0.08);
  --color-border-hover: rgba(110, 160, 184, 0.3);

  /* Typography */
  --font-heading: 'Inter', 'Inter-fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Inter-fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 8rem;

  /* Layout */
  --max-width: 1200px;
  --header-height: 80px;

  /* Transitions */
  --transition-fast: 0.1s ease;
  --transition-base: 0.18s ease;
  --transition-slow: 0.5s cubic-bezier(0.16, 1, 0.3, 1);

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;
}

/* --- Reset & Base --- */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
  -webkit-text-size-adjust: 100%;
  font-size: 16px;
}

body {
  font-family: var(--font-body);
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a {
  color: var(--color-accent-light);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-accent-bright);
}

/* --- Focus styles for ADA --- */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Skip to content link — ADA */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-accent);
  color: var(--color-bg-primary);
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-full);
  font-weight: 600;
  z-index: 10000;
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: var(--space-sm);
}

/* --- Typography Scale --- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
}

h1 { font-size: clamp(2.5rem, 5vw, 4rem); }
h2 { font-size: clamp(2rem, 4vw, 3rem); }
h3 { font-size: clamp(1.5rem, 3vw, 2rem); }
h4 { font-size: clamp(1.25rem, 2vw, 1.5rem); }

p {
  color: var(--color-text-secondary);
  font-size: 1.0625rem;
  line-height: 1.7;
}

.text-gradient {
  background: linear-gradient(135deg, var(--color-accent-light), var(--color-accent-bright));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* --- Layout Utilities --- */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.section {
  padding: var(--space-3xl) 0;
  position: relative;
}

.section-sm {
  padding: var(--space-xl) 0;
}

.section-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-md);
}

.section-label::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--color-accent);
}

/* --- Grid System --- */
.grid {
  display: grid;
  gap: var(--space-md);
}

/* ============================================
   HERO SECTION
   ============================================ */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  padding: calc(var(--header-height) + var(--space-xl)) var(--space-md) var(--space-xl);
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, var(--color-accent-glow), transparent),
    radial-gradient(ellipse 80% 40% at 20% 80%, rgba(74, 122, 144, 0.06), transparent),
    linear-gradient(180deg, var(--color-bg-primary) 0%, var(--color-bg-secondary) 100%);
  z-index: 1;
}

.hero-bg-image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.08;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
}

.hero-logo {
  display: block;
  max-width: 480px;
  width: 100%;
  height: auto;
  margin: 0 auto var(--space-md);
}

@media (max-width: 640px) {
  .hero-logo {
    max-width: 320px;
  }
}

.hero h1 {
  margin-bottom: var(--space-md);
}

.hero p {
  font-size: 1.1875rem;
  max-width: 600px;
  margin: 0 auto var(--space-lg);
  color: var(--color-text-secondary);
}

.hero-actions {
  display: flex;
  gap: var(--space-sm);
  justify-content: center;
  flex-wrap: wrap;
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 2rem;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
  border: none;
  white-space: nowrap;
}

.btn-primary {
  background: var(--color-accent);
  color: var(--color-bg-primary);
}

.btn-primary:hover {
  background: var(--color-accent-light);
  color: var(--color-bg-primary);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(var(--accent-rgb,110,160,184),0.25);
}

.btn-secondary {
  background: transparent;
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
}

.btn-secondary:hover {
  border-color: var(--color-accent-dim);
  background: var(--color-accent-glow);
  color: var(--color-text-primary);
}

.btn-icon {
  width: 20px;
  height: 20px;
}

/* Site-wide DELETE control — one red, worded button for every delete action.
   Replaces the old icon-only (🗑 / ✕) delete buttons across all portals. */
.btn-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 5px 12px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.25;
  color: var(--danger-strong,#e05252);
  background: rgba(224, 82, 82, 0.10);
  border: 1px solid rgba(224, 82, 82, 0.40);
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.btn-delete:hover:not(:disabled) {
  background: rgba(224, 82, 82, 0.18);
  color: var(--sf08a8a,#f08a8a);
  border-color: rgba(224, 82, 82, 0.60);
}
.btn-delete:disabled { opacity: 0.4; cursor: not-allowed; }

/* ============================================
   VALUE PROPS / WHY CSA SECTION
   ============================================ */
.values-section {
  background: var(--color-bg-secondary);
}

.values-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: stretch;
}

.values-content {
  display: flex;
  flex-direction: column;
}

.values-intro {
  margin-bottom: var(--space-lg);
}

.values-intro h2 {
  margin-bottom: var(--space-sm);
}

.values-intro p {
  font-size: 1.0625rem;
}

.values-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  flex: 1;
}

.value-item {
  display: flex;
  gap: var(--space-sm);
  align-items: flex-start;
  padding: var(--space-md);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-base), background var(--transition-base);
}

.value-item:hover {
  border-color: var(--color-border-hover);
  background: rgba(22, 22, 31, 0.8);
}

.value-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-accent-glow);
  border-radius: var(--radius-sm);
  color: var(--color-accent);
}

.value-icon svg {
  width: 20px;
  height: 20px;
}

.value-item h3 {
  font-size: 1rem;
  margin-bottom: 0.25rem;
}

.value-item p {
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}

.values-image-wrapper {
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: stretch;
}

.values-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.values-image-wrapper::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  pointer-events: none;
}

/* Who We Serve */
.serve-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-xl);
}

.serve-card {
  text-align: center;
  padding: var(--space-lg) var(--space-md);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-base);
}

.serve-card:hover {
  border-color: var(--color-border-hover);
}

.serve-card-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto var(--space-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-accent-glow);
  border-radius: var(--radius-md);
  color: var(--color-accent);
}

.serve-card-icon svg {
  width: 24px;
  height: 24px;
}

.serve-card h4 {
  font-size: 0.9375rem;
  margin-bottom: 0.35rem;
}

.serve-card p {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}

@media (max-width: 900px) {
  .values-grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .values-image-wrapper {
    order: -1;
    min-height: 300px;
  }

  .serve-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .serve-grid {
    grid-template-columns: 1fr;
  }
}

.filter-btn {
  padding: 0.5rem 1.25rem;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.filter-btn:hover {
  color: var(--color-text-secondary);
  border-color: var(--color-border-hover);
  background: var(--color-accent-glow);
}

.filter-btn.active {
  color: var(--color-bg-primary);
  background: var(--color-accent);
  border-color: var(--color-accent);
}

/* Brand Grid */
/* Grid, not flex-wrap (Dan, 2026-08-12): descriptions were clamped to 3 lines and
   ended in "…". With the clamp gone the cards vary in height, and flex-wrap only
   equalises WITHIN a row — row 2 could be shorter than row 1. `grid-auto-rows: 1fr`
   makes every row the height of the tallest, so every box on the page matches the
   longest description and they all line up. */
.brands-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: var(--space-sm);
}

.brand-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* flex-start, not center: with every card the same height, centring would leave
     each logo at a different vertical position. Top-aligned keeps them in a row. */
  justify-content: flex-start;
  gap: 0.75rem;
  padding: var(--space-md) var(--space-sm);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base);
  min-width: 0;
  text-decoration: none;
}

.brand-card:hover {
  border-color: var(--color-border-hover);
  transform: translateY(-3px);
  box-shadow: 0 8px 32px rgba(var(--shadow-rgb,0,0,0),0.3);
}

.brand-card-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
  width: 100%;
}

.brand-card-logo img {
  max-height: 75px;
  max-width: 186px;
  width: auto;
  object-fit: contain;
  transition: transform var(--transition-base);
}

.brand-card:hover .brand-card-logo img {
  transform: scale(1.05);
}

.brand-card-name {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-text-primary);
  text-align: center;
  letter-spacing: 0.01em;
  transition: color var(--transition-fast);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

.brand-card:hover .brand-card-name {
  color: var(--color-text-secondary);
}

.brand-card-desc {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  line-height: 1.5;
  text-align: center;
  padding: 0 0.25rem;
}

/* Filter hide/show */
.brand-card.hidden {
  display: none;
}

.brands-cta {
  text-align: center;
  margin-top: var(--space-lg);
}

@media (max-width: 1024px) {
  .brands-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  .brands-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  .brands-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================
   CONTACT / CTA SECTION
   ============================================ */
.contact-section {
  background: var(--color-bg-secondary);
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

.contact-card {
  text-align: center;
  padding: var(--space-lg);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: border-color var(--transition-base);
}

.contact-card:hover {
  border-color: var(--color-border-hover);
}

.contact-card-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto var(--space-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-accent-glow);
  border-radius: var(--radius-md);
  color: var(--color-accent);
}

.contact-card-icon svg {
  width: 24px;
  height: 24px;
}

.contact-card h4 {
  margin-bottom: 0.5rem;
}

.contact-card p {
  font-size: 0.9375rem;
  margin-bottom: var(--space-sm);
}

.contact-card a {
  font-weight: 600;
  font-size: 0.9375rem;
}

@media (max-width: 768px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
}

/* Social Icons */
.social-links {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  margin-top: var(--space-sm);
}

.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  transition: all var(--transition-fast);
}

.social-link:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  transform: translateY(-2px);
}

.social-link svg {
  width: 18px;
  height: 18px;
}

/* ============================================
   FOOTER
   ============================================ */
.site-footer {
  border-top: 1px solid var(--color-border);
  padding: var(--space-xl) 0 var(--space-lg);
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.footer-copy {
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.footer-links {
  display: flex;
  gap: var(--space-md);
  list-style: none;
}

.footer-links a {
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.footer-links a:hover {
  color: var(--color-text-primary);
}

@media (max-width: 640px) {
  .footer-inner {
    flex-direction: column;
    text-align: center;
  }
}

/* ============================================
   ABOUT PAGE
   ============================================ */

/* About Hero */
.about-hero {
  padding: calc(var(--header-height) + var(--space-sm)) 0 var(--space-xl);
  background: var(--color-bg-primary);
  text-align: center;
}

.about-hero-content {
  max-width: 700px;
  margin: 0 auto;
}

.about-hero h1 {
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  font-weight: 700;
  line-height: 1.1;
  margin: var(--space-sm) 0;
  letter-spacing: -0.03em;
}

.about-hero p {
  font-size: 1.125rem;
  color: var(--color-text-secondary);
  line-height: 1.6;
  max-width: 550px;
  margin: 0 auto;
}

/* Team Section */
.team-section {
  background: var(--color-bg-secondary);
}

/* Flex rather than grid so an incomplete LAST ROW centres under the rows above
   (Dan, 2026-08-04). A grid always left-aligns its trailing items; flex-wrap +
   justify-content:center distributes the leftover space instead. A FULL row is
   unaffected — the items exactly consume the width, so there is no slack to
   centre. Column count and gap are variables so each breakpoint only overrides
   those two, and the basis maths stays in one place. */
.team-grid {
  --team-cols: 3;
  --team-gap: var(--space-lg);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--team-gap);
}
.team-grid > * {
  flex: 0 1 calc((100% - (var(--team-cols) - 1) * var(--team-gap)) / var(--team-cols));
  max-width: calc((100% - (var(--team-cols) - 1) * var(--team-gap)) / var(--team-cols));
  min-width: 0;
}

.team-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--transition-base), transform var(--transition-base);
  /* Column flex (not block) so the info panel can stretch and pin the territory
     map to the bottom — that keeps the maps on one line across the row even if
     someone's title or territory wraps to two lines. */
  display: flex; flex-direction: column; width: 100%;
  height: 100%;
  text-decoration: none; color: inherit;
  touch-action: manipulation;
}
.team-card:focus-visible {
  outline: 2px solid var(--color-accent-light); outline-offset: 2px;
}

.team-card:hover {
  border-color: var(--color-border-hover);
  transform: translateY(-4px);
}
.team-card-cta {
  display: inline-flex; align-items: center;
  font-size: 0.8125rem; font-weight: 600;
  color: var(--color-accent-light);
  margin-top: 8px;
}
.team-card:hover .team-card-cta { color: var(--color-accent-bright); }

/* NOTE: a stray "}" used to sit here. At the top level CSS treats "}" as the
   start of a new rule and swallows everything up to the next "{" — so
   ".team-card-photo" became part of a bogus selector and its aspect-ratio was
   dropped entirely. Headshots then rendered at their natural height, which is
   why the portrait photos (Danny/Kimberly/Tim) ran longer than the square ones
   (Dan/Matt/Steve) and pushed every card's text and map out of alignment.
   Fixed 2026-08-03 — don't reintroduce a lone brace here. */

.team-card-photo {
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--color-bg-primary);
}

.team-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-slow);
}

.team-card:hover .team-card-photo img {
  transform: scale(1.04);
}

.team-card-info {
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.35rem;
  flex: 1 1 auto;   /* fill the card so the map can sit at the bottom */
}

.team-card-info h3 {
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.team-card-title {
  font-size: 0.8125rem;
  color: var(--color-text-accent);
  font-weight: 500;
}

.team-card-territory {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin-bottom: 0.25rem;
}

.team-card-territory svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.team-card .btn-sm {
  align-self: center;
  padding: 0.4rem 1rem;
  font-size: 0.75rem;
  gap: 0.35rem;
  margin-top: 0.25rem;
}

.team-card .btn-sm svg {
  width: 14px;
  height: 14px;
}

/* Territory map thumbnail inside team card */
.team-card-map {
  /* auto top margin pins the map to the bottom of the card, so every map in a
     row starts on the same line regardless of how tall the text above it is. */
  margin-top: auto;
  padding-top: var(--space-sm);
  border-radius: var(--radius-md);
  overflow: hidden;
  align-self: stretch;
  background: var(--color-bg-primary);
}

.team-card-map img {
  /* Fixed box + contain: the source maps have different natural shapes (a wide
     New England vs a tall NY/NJ), so height:auto made every card a different
     length. A fixed ratio equalises them without cropping any territory. */
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  object-fit: contain;
  display: block;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  transition: transform var(--transition-slow);
}

.team-card:hover .team-card-map img {
  transform: scale(1.03);
}

.team-card-map-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 0.3rem;
  display: block;
}

@media (max-width: 900px) {
  .team-grid {
    --team-cols: 2;
    --team-gap: var(--space-md);
  }
}

@media (max-width: 520px) {
  .team-grid {
    --team-cols: 1;
    max-width: 400px;
    margin: 0 auto;
  }
}

/* Territory Section */
.territory-layout {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--space-xl);
  align-items: center;
}

.territory-map {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
}

.territory-map img {
  width: 100%;
  height: auto;
  display: block;
}

.territory-details {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.territory-region {
  padding: var(--space-md);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-base);
}

.territory-region:hover {
  border-color: var(--color-border-hover);
}

.territory-region h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  margin-bottom: 0.25rem;
}

.territory-region h3 svg {
  width: 18px;
  height: 18px;
  color: var(--color-accent);
  flex-shrink: 0;
}

.territory-region p {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  line-height: 1.5;
  padding-left: 1.625rem;
}

@media (max-width: 900px) {
  .territory-layout {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
}

/* ============================================
   RESOURCES PAGE
   ============================================ */

/* Password Gate — Two-column lockscreen */
.password-gate-lockscreen {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: center;
  min-height: 420px;
}

.password-gate-left h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin: var(--space-sm) 0 var(--space-md);
}

.password-gate-left p {
  font-size: 1rem;
  color: var(--color-text-secondary);
  line-height: 1.6;
  max-width: 440px;
}

.password-gate-right {
  display: flex;
  justify-content: center;
}

.password-gate-card {
  width: 100%;
  max-width: 400px;
  padding: var(--space-lg);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.password-gate-icon {
  width: 48px;
  height: 48px;
  margin-bottom: var(--space-md);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-accent-glow);
  border-radius: var(--radius-md);
  color: var(--color-accent);
}

.password-gate-icon svg {
  width: 24px;
  height: 24px;
}

.password-gate-card h3 {
  font-size: 1.125rem;
  margin-bottom: var(--space-md);
}

.portal-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: var(--space-lg) 0;
}

.portal-features li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
}

.portal-features li svg {
  width: 20px;
  height: 20px;
  color: var(--color-accent);
  flex-shrink: 0;
}

.form-field {
  margin-bottom: 0.75rem;
}

.password-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  margin-bottom: 0.4rem;
}

.password-form {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.password-input {
  width: 100%;
  padding: 0.75rem 1rem;
  font-family: var(--font-body);
  font-size: 1rem;                /* 16px prevents iOS auto-zoom on focus */
  color: var(--color-text-primary) !important;
  background-color: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color var(--transition-fast);
  -webkit-appearance: none;
  appearance: none;
}

.password-input:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb,110,160,184),0.4);
}

.password-input::placeholder {
  color: var(--color-text-muted);
}

.password-submit {
  width: 100%;
  justify-content: center;
  margin-top: var(--space-sm);
}

.password-error {
  color: var(--danger-strong,#e05252);
  font-size: 0.8125rem;
  margin-top: 0.5rem;
  min-height: 1.2em;
}

/* ── Password strength meter ── */
.pw-strength {
  margin-top: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 1em;
}
.pw-strength-bars {
  display: flex;
  gap: 3px;
  flex: 1;
}
.pw-strength-bars span {
  flex: 1;
  height: 4px;
  background: var(--border,rgba(var(--overlay-rgb,255,255,255),0.08));
  border-radius: 2px;
  transition: background 0.2s ease;
}
.pw-strength-label {
  font-size: 0.75rem;
  color: var(--color-text-secondary, #a0a8b4);
  min-width: 5.5rem;
  text-align: right;
}
.pw-strength[data-score="1"] .pw-strength-bars span:nth-child(-n+1) { background: var(--danger-strong,#e05252); }
.pw-strength[data-score="2"] .pw-strength-bars span:nth-child(-n+2) { background: #e08a52; }
.pw-strength[data-score="3"] .pw-strength-bars span:nth-child(-n+3) { background: #e0c052; }
.pw-strength[data-score="4"] .pw-strength-bars span:nth-child(-n+4) { background: var(--success,#7fc492); }
.pw-strength[data-score="5"] .pw-strength-bars span:nth-child(-n+5) { background: var(--accent,#6ea0b8); }
.pw-strength[data-score="1"] .pw-strength-label { color: var(--danger-strong,#e05252); }
.pw-strength[data-score="2"] .pw-strength-label { color: var(--se08a52,#e08a52); }
.pw-strength[data-score="3"] .pw-strength-label { color: var(--se0c052,#e0c052); }
.pw-strength[data-score="4"] .pw-strength-label { color: var(--success,#7fc492); }
.pw-strength[data-score="5"] .pw-strength-label { color: var(--accent,#6ea0b8); }

/* Toast popup for invalid login */
.login-toast {
  position: fixed;
  top: calc(var(--header-height) + 1rem);
  left: 50%;
  transform: translateX(-50%) translateY(-20px);
  background: #1e1e2e;
  border: 1px solid var(--danger-strong,#e05252);
  border-left: 4px solid var(--danger-strong,#e05252);
  border-radius: 8px;
  padding: 0.875rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: min(280px, calc(100vw - 2rem));
  max-width: min(400px, calc(100vw - 2rem));
  box-shadow: 0 8px 32px rgba(var(--shadow-rgb,0,0,0),0.4);
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.login-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.login-toast-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--danger-strong,#e05252);
}

.login-toast-text {
  flex: 1;
}

.login-toast-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text,#f0f2f5);
  display: block;
}

.login-toast-sub {
  font-size: 0.78rem;
  color: #8899aa;
  display: block;
  margin-top: 0.1rem;
}

/* Shake animation on bad login */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  15%       { transform: translateX(-8px); }
  30%       { transform: translateX(8px); }
  45%       { transform: translateX(-6px); }
  60%       { transform: translateX(6px); }
  75%       { transform: translateX(-4px); }
  90%       { transform: translateX(4px); }
}

.shake {
  animation: shake 0.5s ease;
}

.password-help {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin-top: var(--space-lg);
}

.password-help a {
  color: var(--color-text-accent);
}

@media (max-width: 768px) {
  .password-gate-lockscreen {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    min-height: auto;
  }

  .password-gate-left {
    text-align: center;
  }

  .password-gate-left p {
    margin: 0 auto;
  }

  .password-gate-card {
    max-width: 100%;
  }
}

/* Protected Content */
.protected-content {
  display: none;
}

/* File Grid */
.file-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
}

@media (max-width: 768px) {
  .file-grid {
    grid-template-columns: 1fr;
  }
}

/* Tariff Grid */

.tariff-date {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}

.tariff-badge {
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--bg-0,#0a0a0f);
  background: var(--color-accent);
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-full);
}

@media (max-width: 768px) {
  
}

.tariff-detail {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  line-height: 1.4;
}

@media (max-width: 1024px) {
  
}

@media (max-width: 768px) {
  
}

@media (max-width: 480px) {
  
}

/* ============================================
   NEWS PAGE
   ============================================ */
.news-section {
  background: var(--color-bg-secondary);
}

.news-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
}

.news-card {
  display: flex;
  flex-direction: column;
  background: var(--color-bg-card);
  border: none;
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color var(--transition-base), transform var(--transition-base);
}

.news-card:hover {
  transform: translateY(-4px);
}

.news-card-image {
  overflow: hidden;
  background: none;
  text-align: center;
}

.news-card-image img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 240px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  transition: transform var(--transition-slow);
}

.news-card:hover .news-card-image img {
  transform: scale(1.04);
}

.news-card-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  background: linear-gradient(135deg, var(--color-bg-primary) 0%, var(--color-bg-card) 100%);
}

.news-card-placeholder img {
  width: 50%;
  max-width: 200px;
  height: auto;
  object-fit: contain;
  opacity: 0.5;
}

.news-card-body {
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}

.news-card-date {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-accent-dim);
}

.news-card-title {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.news-card-excerpt {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-accent);
  margin-top: auto;
  padding-top: 0.5rem;
}

.news-card-link svg {
  width: 16px;
  height: 16px;
  transition: transform var(--transition-fast);
}

.news-card:hover .news-card-link svg {
  transform: translateX(3px);
}

@media (max-width: 768px) {
  .news-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   EVENTS PAGE
   ============================================ */

/* Event List */
.events-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  max-width: 800px;
  margin: 0 auto;
}

/* ── Month calendar widget ── */
.events-calendar {
  max-width: 800px;
  margin: 0 auto var(--space-lg);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 20px 22px 22px;
}
.ec-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.ec-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text-primary);
  letter-spacing: 0.2px;
}
.ec-nav {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}
.ec-nav:hover {
  border-color: var(--color-border-hover);
  color: var(--color-text-primary);
  background: var(--overlay-weak,rgba(var(--overlay-rgb,255,255,255),0.03));
}
.ec-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 6px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--color-text-secondary);
  text-align: center;
}
.ec-weekdays span { padding: 6px 0; }
.ec-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.ec-cell {
  position: relative;
  aspect-ratio: 1 / 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--color-text-primary);
  font-size: 13px;
  font-weight: 500;
  cursor: default;
  padding: 0;
  font-family: inherit;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.ec-cell.ec-other-month { color: var(--color-text-muted, #4a5160); opacity: 0.45; }
.ec-cell.ec-past:not(.ec-has-event) { color: var(--color-text-secondary); opacity: 0.6; }
.ec-cell.ec-today {
  border-color: var(--color-accent);
  color: var(--color-accent-light);
  font-weight: 600;
}
.ec-cell.ec-has-event {
  background: rgba(var(--accent-rgb,110,160,184),0.10);
  border-color: rgba(var(--accent-rgb,110,160,184),0.35);
  cursor: pointer;
}
.ec-cell.ec-has-event:hover {
  background: rgba(var(--accent-rgb,110,160,184),0.18);
  border-color: var(--color-accent);
  transform: translateY(-1px);
}
.ec-cell.ec-has-event.ec-past { opacity: 0.55; }
.ec-day { line-height: 1; }
.ec-dot {
  position: absolute; bottom: 6px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--color-accent-bright, var(--color-accent-light));
}

@keyframes csaEventPulse {
  0%   { box-shadow: 0 0 0 0 rgba(var(--accent-rgb,110,160,184),0.55); }
  70%  { box-shadow: 0 0 0 14px rgba(var(--accent-rgb,110,160,184),0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb,110,160,184),0); }
}
.event-card-pulse {
  animation: csaEventPulse 1.2s ease-out;
  border-color: var(--color-accent) !important;
}

/* ── Calendar event popup (upcoming + past events) ── */
.ec-popup-overlay {
  position: fixed; inset: 0; z-index: 1000;
  display: none;
  align-items: center; justify-content: center;
  padding: var(--space-md);
  background: rgba(8, 10, 14, 0.72);
  backdrop-filter: blur(3px);
}
.ec-popup-overlay.open { display: flex; }
.ec-popup {
  position: relative;
  width: 100%; max-width: 460px;
  max-height: 86vh; overflow-y: auto;
  background: var(--color-bg-secondary, #14181f);
  border: 1px solid rgba(var(--accent-rgb,110,160,184),0.25);
  border-radius: var(--radius-lg, 16px);
  box-shadow: 0 24px 60px var(--scrim,rgba(var(--shadow-rgb,0,0,0),0.5));
}
.ec-popup-close {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border: none; border-radius: 50%;
  background: rgba(var(--shadow-rgb,0,0,0),0.45); color: #fff;
  cursor: pointer; transition: background 0.15s ease;
}
.ec-popup-close:hover { background: var(--scrim-heavy,rgba(var(--shadow-rgb,0,0,0),0.7)); }
.ec-popup-event + .ec-popup-event { border-top: 1px solid var(--border,rgba(var(--overlay-rgb,255,255,255),0.08)); }
.ec-popup-banner { width: 100%; aspect-ratio: 16/9; overflow: hidden; border-radius: var(--radius-lg, 16px) var(--radius-lg, 16px) 0 0; }
.ec-popup-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ec-popup-info { padding: var(--space-md); }
.ec-popup-info h3 { margin: 6px 0 4px; font-size: 1.25rem; }
.ec-popup-tag {
  display: inline-block;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px;
  background: rgba(var(--accent-rgb,110,160,184),0.18); color: var(--color-accent-light, #8ca0aa);
}
.ec-popup-tag--past { background: var(--border,rgba(var(--overlay-rgb,255,255,255),0.08)); color: var(--color-text-secondary); }
.ec-popup-date { color: var(--color-text-secondary); margin: 0 0 4px; font-size: 0.95rem; }
.ec-popup-venue { font-weight: 600; margin: 0 0 2px; }
.ec-popup-address {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--color-accent-light, #8ca0aa); font-size: 0.9rem;
  text-decoration: none; margin-bottom: var(--space-sm);
}
.ec-popup-address:hover { text-decoration: underline; }
.ec-popup-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--space-sm); }

/* ── Newsletter signup (replaces old mailto CTA) ── */
.newsletter-form { margin-top: var(--space-md); }
.newsletter-row {
  display: flex; flex-wrap: wrap; gap: 10px;
  justify-content: center;
  max-width: 640px;
  margin: 0 auto;
}
.newsletter-row input[type="text"],
.newsletter-row input[type="email"] {
  flex: 1 1 220px;
  min-width: 0;
  padding: 12px 14px;
  font-size: 14px;
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  outline: none;
  font-family: inherit;
}
.newsletter-row input:focus { border-color: var(--color-accent); }
.newsletter-row button { flex: 0 0 auto; }
.newsletter-msg {
  margin-top: 14px;
  font-size: 13px;
  min-height: 1.2em;
  color: var(--color-text-secondary);
}
.newsletter-msg.is-success { color: var(--success,#7fc492); }
.newsletter-msg.is-error   { color: var(--danger-strong,#e05252); }
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
}

/* ── Empty state shown when there are no scheduled events ── */
.event-empty {
  text-align: center;
  padding: 56px 32px;
  background: var(--color-bg-card);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
}
.event-empty-icon {
  width: 56px; height: 56px;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
  border-radius: 50%;
  background: rgba(var(--accent-rgb,110,160,184),0.08);
  color: var(--color-accent-light);
}
.event-empty-icon svg { width: 28px; height: 28px; }
.event-empty h3 {
  margin: 0 0 8px;
  font-size: 18px;
  color: var(--color-text-primary);
  font-weight: 600;
}
.event-empty p {
  margin: 0 auto;
  max-width: 460px;
  font-size: 14px;
  line-height: 1.6;
}

.event-card {
  display: grid;
  grid-template-columns: minmax(0, 340px) 1fr;
  gap: 0;
  padding: 0;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--transition-base), transform var(--transition-base);
}
.event-card:hover {
  border-color: var(--color-border-hover);
  transform: translateY(-2px);
}

.event-card-banner {
  aspect-ratio: 4 / 3;
  background: var(--color-bg-secondary);
  overflow: hidden;
  position: relative;
}
.event-card-banner img {
  /* `contain`, not `cover` (Dan, 2026-08-10): the banner box is 4/3 and event
     images arrive at whatever ratio the supplier sent. `cover` filled the box
     by cropping — which quietly ate the top and bottom of a wide banner, logo
     and all. The image now shrinks to fit inside the box whole, letterboxed
     against the card background. */
  width: 100%; height: 100%; object-fit: contain; display: block;
}

/* Date pill sits on top of the banner, bottom-left corner */
.event-card-date {
  position: absolute;
  left: 14px; bottom: 14px;
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 8px 14px;
  background: rgba(10, 10, 15, 0.78);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--overlay-medium,rgba(var(--overlay-rgb,255,255,255),0.1));
  border-radius: 999px;
  z-index: 1;
}
.event-month {
  font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--color-accent-light);
}
.event-day {
  font-size: 1rem; font-weight: 700; line-height: 1; color: var(--color-text-primary);
}
.event-year {
  font-size: 0.6875rem; color: var(--color-text-muted);
}

/* If there's no banner, fall back to a standalone date pill in the info column */
.event-card:not(.has-banner) .event-card-banner { display: none; }
.event-card:not(.has-banner) { grid-template-columns: 1fr; }
.event-card:not(.has-banner) .event-card-date {
  position: static;
  align-self: flex-start;
  margin-bottom: 10px;
}

.event-card-info {
  padding: var(--space-md);
  display: flex; flex-direction: column; gap: 8px;
  min-width: 0;
}

.event-card-info h3 {
  font-size: 1.125rem; line-height: 1.3; margin: 0;
  color: var(--color-text-primary);
}

/* Whole card is a link */
a.event-card { text-decoration: none; color: inherit; }

.event-venue {
  display: flex; flex-direction: column; gap: 4px;
  margin: 4px 0 4px;
}
.event-venue-title {
  font-size: 0.9rem; font-weight: 600; color: var(--color-text-primary);
}
.event-venue-address {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.8125rem; color: var(--color-accent-light);
  text-decoration: none; align-self: flex-start;
  padding: 4px 0; /* extra tap target on mobile */
  touch-action: manipulation;
}
.event-venue-address:hover { color: var(--color-accent-bright); text-decoration: underline; }
.event-venue-address svg { width: 14px; height: 14px; flex-shrink: 0; }

/* Remaining places on a capped event (Dan, 2026-08-19). Drawn only when the
   event actually limits registrations — an uncapped event renders nothing here,
   so every existing event card is untouched. Two tones: seats remaining is
   information, a full house is a warning, because it changes what the button
   next to it does (waiting list, not a place). */
.event-capacity {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.8125rem; line-height: 1.4;
  color: var(--color-text-secondary);
  margin: 6px 0 2px;
}
.event-capacity b { color: var(--color-text-primary); font-weight: 600; }
.event-capacity-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  background: var(--color-accent-light);
}
.event-capacity.is-full { color: #e0b072; font-weight: 600; }
.event-capacity.is-full .event-capacity-dot { background: #e0b072; }

.event-card-actions {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 10px;
}
.event-card-cta {
  font-size: 0.8125rem; font-weight: 600;
  color: var(--color-accent-light);
  display: inline-flex; align-items: center; gap: 6px;
}
a.event-card:hover .event-card-cta { color: var(--color-accent-bright); }
.rsvp-inline { align-self: flex-end; }

.event-card-actions {
  margin-top: auto; padding-top: 8px;
}

.event-card--empty {
  border-style: dashed;
  opacity: 0.7;
}

@media (max-width: 720px) {
  .event-card {
    grid-template-columns: 1fr;
  }
  .event-card-banner { aspect-ratio: 16 / 9; }
}

/* Advisor Preview */
.advisor-preview {
  margin-top: var(--space-lg);
}

.advisor-preview h4 {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin-bottom: 0.75rem;
}

.advisor-preview-card {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.advisor-preview-photo {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  object-fit: cover;
  flex-shrink: 0;
}

.advisor-preview-card strong {
  display: block;
  font-size: 0.9375rem;
}

.advisor-preview-card span {
  display: block;
  font-size: 0.8125rem;
  color: var(--color-text-accent);
}

.advisor-preview-link {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-top: 0.15rem;
}

.advisor-preview-link:hover {
  color: var(--color-text-accent);
}

/* ============================================
   SCROLL ANIMATIONS
   ============================================ */
.fade-in {
  opacity: 1; /* visible by default — JS enhances progressively */
  transform: translateY(0);
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

/* Only animate when JS has initialised the observer */
.js-fade-ready .fade-in {
  opacity: 0;
  transform: translateY(12px);
}

.js-fade-ready .fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

.fade-in-delay-1 { transition-delay: 0.04s; }
.fade-in-delay-2 { transition-delay: 0.08s; }
.fade-in-delay-3 { transition-delay: 0.12s; }
.fade-in-delay-4 { transition-delay: 0.16s; }

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .fade-in {
    opacity: 1;
    transform: none;
  }
}

/* ============================================
   TARIFF / RESOURCES BANNER
   ============================================ */
.banner-section {
  position: relative;
  overflow: hidden;
}

.banner-card {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  padding: var(--space-lg);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.banner-card-content {
  flex: 1;
}

.banner-card-content h3 {
  margin-bottom: 0.5rem;
}

.banner-card-images {
  display: flex;
  gap: var(--space-sm);
  flex-shrink: 0;
}

.banner-card-images img {
  width: 140px;
  height: 93px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
}

@media (max-width: 768px) {
  .banner-card {
    flex-direction: column;
    text-align: center;
  }

  .banner-card-images {
    justify-content: center;
  }
}

/* ============================================
   MOBILE OPTIMIZATIONS
   ============================================ */
@media (max-width: 768px) {
  /* Reduce section spacing */
  .section {
    padding: var(--space-xl) 0;
  }

  .section-sm {
    padding: var(--space-lg) 0;
  }

  /* Reduce hero top padding */
  .about-hero {
    padding-top: calc(var(--header-height) + var(--space-sm));
  }

  /* Use small viewport height for hero */
  .hero {
    min-height: 100svh;
  }

  /* Touch-friendly buttons */
  .btn-sm {
    min-height: 44px;
    padding: 0.625rem 1rem;
    font-size: 0.8125rem;
  }

  .filter-btn {
    min-height: 44px;
    padding: 0.625rem 1.25rem;
  }

  /* Touch-friendly file download links */
  

  /* Touch-friendly footer links */
  .footer-links {
    gap: var(--space-sm);
  }

  .footer-links a {
    display: inline-block;
    padding: 0.5rem 0;
    min-height: 44px;
    line-height: 2;
  }

  /* Touch-friendly nav dropdown links */
  .nav-dropdown-menu a {
    padding: 0.75rem 0;
  }

  /* Shrink banner images to prevent overflow */
  .banner-card-images img {
    width: 100px;
    height: 67px;
  }

  /* Center portal features list */
  .portal-features {
    max-width: fit-content;
    margin-left: auto;
    margin-right: auto;
  }

  /* Headings scale down */
  h2 {
    font-size: clamp(1.5rem, 5vw, 2rem);
  }

  /* Hero mobile fixes */
  .hero {
    min-height: 100svh;
    padding: calc(var(--header-height) + var(--space-lg)) var(--space-md) var(--space-lg);
  }

  .hero h1 {
    font-size: clamp(2rem, 8vw, 2.75rem);
    word-break: break-word;
  }

  .hero p {
    font-size: 1rem;
    max-width: 100%;
  }

  .hero-logo {
    max-width: 260px;
    margin-bottom: var(--space-sm);
  }

  

  .hero-actions {
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
  }

  .hero-actions .btn {
    width: 100%;
    max-width: 280px;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  /* Stack banner images */
  .banner-card-images {
    flex-wrap: wrap;
  }

  /* overflow-x hidden removed from body — breaks position:fixed header */

  .hero h1 {
    font-size: clamp(1.75rem, 9vw, 2.25rem);
  }

  .hero p {
    font-size: 0.9375rem;
  }

  .hero-logo {
    max-width: 220px;
  }

  /* Brand grid single column on small phones */
  .brands-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  
}

@media (max-width: 375px) {
  .hero h1 {
    font-size: clamp(1.5rem, 10vw, 2rem);
  }

  .hero-logo {
    max-width: 200px;
  }

  .brands-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================
   PROJECT INQUIRY FORM
   ============================================ */
.project-form-wrap {
  max-width: 860px;
  margin: 0 auto;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
}

.project-form-header {
  text-align: center;
  margin-bottom: var(--space-lg);
}

.project-form-header h3 {
  margin: var(--space-xs) 0 var(--space-xs);
}

.project-form-header p {
  color: var(--color-text-secondary);
  font-size: 0.9375rem;
  max-width: 500px;
  margin: 0 auto;
}

.project-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.pf-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

.pf-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.pf-full {
  grid-column: 1 / -1;
}

.pf-group label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-primary);
}

.pf-group label span {
  color: var(--color-accent);
  margin-left: 2px;
}

.pf-group input,
.pf-group select,
.pf-group textarea {
  background-color: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.7rem 1rem;
  font-size: 1rem;                /* 16px prevents iOS auto-zoom on focus */
  color: var(--color-text-primary) !important;
  font-family: inherit;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  width: 100%;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  line-height: 1.4;
}

/* Force dropdown option text color on all platforms (iOS Safari otherwise uses system colors) */
.pf-group select option,

.pf-group select {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMiAxMiIgZmlsbD0ibm9uZSI+PHBhdGggZD0iTTMgNC41TDYgNy41TDkgNC41IiBzdHJva2U9IiM2ZWEwYjgiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48L3N2Zz4=");
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
  background-size: 12px 12px;
  padding-right: 2.5rem;
  cursor: pointer;
}

.pf-group input::placeholder,
.pf-group textarea::placeholder {
  color: var(--color-text-muted);
}

.pf-group input:focus,
.pf-group select:focus,
.pf-group textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb,110,160,184),0.15);
}

.pf-group textarea {
  resize: vertical;
  min-height: 120px;
}

.pf-hint {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  margin-top: 0.15rem;
}

.pf-footer {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-top: var(--space-xs);
}

.pf-submit {
  min-width: 160px;
}

.pf-privacy {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  flex: 1;
  margin: 0;
}

.pf-success {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-lg);
  background: rgba(110, 184, 130, 0.08);
  border: 1px solid rgba(110, 184, 130, 0.3);
  border-radius: var(--radius-md);
}

.pf-success svg {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  color: var(--s6eb882,#6eb882);
  margin-top: 2px;
}

.pf-success strong {
  display: block;
  color: var(--color-text-primary);
  font-size: 1rem;
  margin-bottom: 0.25rem;
}

.pf-success p {
  color: var(--color-text-secondary);
  font-size: 0.9rem;
  margin: 0;
}

@media (max-width: 640px) {
  .pf-row {
    grid-template-columns: 1fr;
  }
  .project-form-wrap {
    padding: var(--space-lg) var(--space-md);
  }
  .pf-footer {
    flex-direction: column;
    align-items: flex-start;
  }
  .pf-submit {
    width: 100%;
    justify-content: center;
  }
}

/* ============================================
   ADA ACCESSIBILITY — WCAG 2.1 AA
   ============================================ */

/* Remove outline for mouse users, keep for keyboard */
:focus:not(:focus-visible) {
  outline: none;
}

/* Ensure sufficient color contrast on interactive elements */
.nav-link:focus-visible,
.btn:focus-visible,
.nav-cta:focus-visible {
  outline: 2px solid #6eb4dc;
  outline-offset: 3px;
}

/* Minimum touch target size — 44x44px (WCAG 2.5.5)
   Use padding to hit target size — do NOT override display on nav-link
   as it breaks the flex nav alignment */
.btn,
.nav-cta,
.filter-btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* Nav list items — flex centered */
.nav-list li {
  display: flex;
  align-items: center;
}

/* High contrast mode support */
@media (forced-colors: active) {
  .brand-card,
  .brand-resource-card,
  .news-card,
  .event-card,
  .team-card {
    border: 2px solid ButtonText;
  }
  .btn-primary {
    background: ButtonText;
    color: ButtonFace;
  }
  .nav-cta {
    border: 2px solid ButtonText;
  }
}

/* Reduced motion — respect user preference */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Ensure text never disappears — min contrast helpers */
.brc-name { color: var(--color-text-primary, #f0f0f5); }
.brc-tariff-detail { color: var(--color-text-secondary, #a0a0b0); }

/* Screen reader only utility */

/* ============================================
   NEWS ARTICLE DETAIL PAGE
   ============================================ */
.article-page {
  padding: calc(var(--header-height) + var(--space-xl)) 0 var(--space-xl);
}

.article-container {
  max-width: 780px;
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.article-back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-lg);
  padding: 8px 16px;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  text-decoration: none;
  touch-action: manipulation;
  transition: all var(--transition-fast);
}

.article-back:hover {
  color: var(--color-text-primary);
  border-color: var(--color-border-hover);
  background: var(--color-bg-secondary);
}

.article-back svg {
  width: 16px;
  height: 16px;
  transition: transform var(--transition-fast);
}

.article-back:hover svg {
  transform: translateX(-3px);
}

.article-header {
  margin-bottom: var(--space-lg);
  text-align: center;
}

.article-category {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
  background: var(--color-accent-glow);
  padding: 0.35rem 0.9rem;
  border-radius: var(--radius-full);
  margin-bottom: var(--space-sm);
}

.article-header h1 {
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-sm);
  color: var(--color-text-primary);
}

.article-date {
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.article-cover {
  margin-bottom: var(--space-lg);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: none;
  background: none;
  text-align: center;
}

.article-cover img {
  width: auto;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  max-height: 600px;
  object-fit: contain;
}

.article-body {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--color-text-secondary);
}

.article-body p {
  margin-bottom: var(--space-md);
}

.article-body h2,
.article-body h3 {
  color: var(--color-text-primary);
  margin: var(--space-lg) 0 var(--space-sm);
}

.article-body h2 {
  font-size: clamp(1.35rem, 3vw, 1.75rem);
}

.article-body h3 {
  font-size: clamp(1.15rem, 2.5vw, 1.375rem);
}

.article-body a {
  color: var(--color-accent-light);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.article-body a:hover {
  color: var(--color-accent-bright);
}

.article-body ul,
.article-body ol {
  margin: 0 0 var(--space-md) 1.5rem;
}

.article-body li {
  margin-bottom: 0.5rem;
}

.article-body .article-lead {
  font-size: 1.1875rem;
  color: var(--color-text-primary);
  line-height: 1.65;
  margin-bottom: var(--space-md);
}

.article-body blockquote {
  border-left: 3px solid var(--color-accent);
  padding: 0.5rem 0 0.5rem var(--space-md);
  margin: var(--space-md) 0;
  font-style: italic;
  color: var(--color-text-primary);
}

.article-body img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  margin: var(--space-md) 0;
}

.article-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
}

.article-share {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}

.article-share span {
  font-weight: 500;
}

.article-share a {
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  transition: all var(--transition-fast);
}

.article-share a:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.related-articles {
  background: var(--color-bg-secondary);
  margin-top: var(--space-2xl);
}

@media (max-width: 640px) {
  .article-footer {
    flex-direction: column;
    align-items: stretch;
  }
  .article-cta {
    text-align: center;
  }
  .article-share {
    justify-content: center;
    flex-wrap: wrap;
  }
}

/* ============================================
   MOBILE OPTIMIZATION — Responsive Overhaul
   Breakpoints: 900px, 768px, 520px, 375px
   ============================================ */

/* ── Brands Grid: 2 columns on mobile ─────── */
@media (max-width: 520px) {
  .brands-grid {
    gap: var(--space-xs);
  }
  .brand-card {
    /* NO width here. `.brands-grid` is `display: grid` and the media queries
       above already give it two `minmax(0, 1fr)` columns, so a grid item fills
       its track on its own.
       This used to say `width: calc((100% - var(--space-xs)) / 2)` — flexbox
       thinking. On a grid item a percentage width resolves against its GRID
       AREA, not the container, so it halved the card a second time INSIDE its
       own column: a 175px track held an 84px card. Everything then fell apart
       around it — the 110px logo overflowed its 66px box and spilled past the
       card edge, brand names ellipsed to "AV Desi…" / "Clockau…", and the
       descriptions wrapped one word per line. (Reported 2026-08-21; it also
       reproduces with mobile.css blocked, so it predates that file.) */
    min-width: 0;
    padding: var(--space-sm) var(--space-xs);
    gap: 0.5rem;
  }
  .brand-card-logo {
    height: 60px;
  }
  .brand-card-logo img {
    max-height: 55px;
    max-width: 130px;
  }
  .brand-card-name {
    font-size: 0.75rem;
  }
  .brand-card-desc {
    font-size: 0.7rem;
    /* clamp removed 2026-08-12: this small-screen override re-truncated to 2
       lines, which would have kept the "..." on phones. */
  }
}

/* ── Filter buttons wrap nicely on small screens ── */
@media (max-width: 520px) {
.filter-btn {
    font-size: 0.75rem;
    padding: 0.4rem 0.8rem;
    min-height: 36px;
  }
}

/* ── Hero section mobile ───────────────────── */
@media (max-width: 768px) {
  .hero {
    padding: calc(var(--header-height) + var(--space-lg)) var(--space-sm) var(--space-lg);
    min-height: auto;
  }
  .hero h1 { font-size: clamp(1.8rem, 7vw, 2.5rem); }
  .hero p { font-size: 1rem; }
  .hero-actions {
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
  }
  .hero-actions .btn { width: 100%; justify-content: center; max-width: 360px; }
}

/* ── Section spacing mobile ────────────────── */
@media (max-width: 768px) {
  .section { padding: var(--space-xl) var(--space-sm); }
  .section-sm { padding: var(--space-lg) var(--space-sm); }
  .container { padding: 0 var(--space-sm); }
}

/* ── Banner card: stack on mobile ──────────── */
@media (max-width: 768px) {
  .banner-card {
    flex-direction: column;
    gap: var(--space-md);
  }
  .banner-card-content { order: 1; }
  .banner-card-images {
    order: 2;
    flex-wrap: wrap;
    gap: var(--space-xs);
    justify-content: center;
  }
  .banner-card-images img {
    width: calc(50% - 0.25rem);
    height: auto;
  }
  /* Tariff signup form */
  .tariff-signup-row {
    flex-direction: column;
    align-items: stretch;
  }
  .tariff-signup-input {
  font-size: 1rem; min-width: 0; width: 100%; }
  .tariff-signup-btn { width: 100%; justify-content: center; }
}

/* ── News grid: 2-col tablet, 1-col mobile ── */
@media (max-width: 900px) {
  .news-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-md); }
}
@media (max-width: 580px) {
  .news-grid { grid-template-columns: 1fr; }
  .news-card-title { font-size: 1rem; }
}

/* ── Events list mobile ─────────────────────── */
@media (max-width: 640px) {
  .event-card {
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-md);
  }
  .event-card-date {
    flex-direction: row;
    align-items: baseline;
    gap: 0.5rem;
  }
  .event-month { font-size: 0.75rem; }
  .event-day   { font-size: 1.5rem; }
}

/* ── About hero mobile ──────────────────────── */
@media (max-width: 768px) {
  .about-hero { padding: calc(var(--header-height) + var(--space-sm)) var(--space-sm) var(--space-lg); }
  .about-hero h1 { font-size: clamp(1.7rem, 7vw, 2.4rem); }
}

/* ── Team grid: 2-col mobile ────────────────── */
@media (max-width: 900px) {
  .team-grid { --team-cols: 2; }
}
@media (max-width: 480px) {
  .team-grid { --team-cols: 1; max-width: 400px; margin: 0 auto; }
}

/* ── Contact grid: stack on mobile ─────────── */
@media (max-width: 768px) {
  .contact-grid {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }
}

/* ── Project inquiry form ────────────────────── */
@media (max-width: 640px) {
  .pf-row { grid-template-columns: 1fr; gap: var(--space-sm); }
  .project-form-wrap { padding: var(--space-md) var(--space-sm); }
  .pf-footer { flex-direction: column; align-items: stretch; }
  .pf-submit { width: 100%; justify-content: center; }
}

/* ── Partner portal login gate: stack mobile ── */
@media (max-width: 768px) {
  .password-gate-lockscreen {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    min-height: auto;
  }
  .password-gate-left { order: 2; }
  .password-gate-right { order: 1; }
  .password-gate-card { max-width: 100%; }
}

/* ── Portal brand resource cards grid ─────── */
@media (max-width: 900px) {
  #file-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 480px) {
  #file-grid { grid-template-columns: 1fr !important; }
  .brc-logo-wrap { height: 75px; }
}

/* ── Typography scaling ──────────────────────── */
@media (max-width: 768px) {
  h1 { font-size: clamp(1.75rem, 7vw, 2.5rem); }
  h2 { font-size: clamp(1.4rem, 5vw, 2rem); }
  h3 { font-size: clamp(1.1rem, 4vw, 1.5rem); }
}

/* ── Button touch targets ───────────────────── */
@media (max-width: 768px) {
  .btn, .btn-primary, .btn-secondary {
    min-height: 48px;
    padding: 0.75rem 1.25rem;
  }
  .btn-sm { min-height: 40px; }
}

/* ── Footer mobile ───────────────────────────── */
@media (max-width: 640px) {
  .footer-inner {
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    text-align: center;
  }
  .footer-links {
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-xs);
  }
}

/* ── Headings: prevent overflow on narrow screens */
h1, h2, h3, h4 {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* ── Horizontal scroll prevention — clip on wrapper only, never html/body (breaks position:fixed) ── */
.container { overflow-x: clip; }
main { overflow-x: clip; }

/* ── Safe area padding for notched devices ─── */
@supports (padding: env(safe-area-inset-bottom)) {
  .site-footer {
    padding-bottom: calc(var(--space-md) + env(safe-area-inset-bottom));
  }
}

/* ═══════════════════════════════════════════════════════════
   INQUIRY TYPE SELECTOR (inquire.html)
   ═══════════════════════════════════════════════════════════ */
.inquiry-type-selector {
  max-width: 860px;
  margin: 0 auto var(--space-xl);
  text-align: center;
}

.inquiry-type-heading {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: var(--space-xs);
  letter-spacing: -0.01em;
}

.inquiry-type-subhead {
  color: var(--color-text-secondary);
  font-size: 1rem;
  margin-bottom: var(--space-lg);
}

.inquiry-type-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

.inquiry-type-card {
  background: var(--color-bg-card);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg) var(--space-md);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: var(--color-text-secondary);
  transition: border-color var(--transition-base), background var(--transition-base), transform var(--transition-fast);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-height: 160px;
}

.inquiry-type-card:hover {
  border-color: rgba(var(--accent-rgb,110,160,184),0.4);
  background: #1a1a26;
  transform: translateY(-2px);
}

.inquiry-type-card:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.inquiry-type-card.is-active {
  border-color: var(--color-accent);
  background: rgba(var(--accent-rgb,110,160,184),0.08);
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb,110,160,184),0.1);
}

.inquiry-type-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
  margin-bottom: 0.25rem;
}

.inquiry-type-icon svg {
  width: 100%;
  height: 100%;
}

.inquiry-type-label {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.3;
}

.inquiry-type-card.is-active .inquiry-type-label {
  color: var(--color-accent);
}

.inquiry-type-desc {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  line-height: 1.45;
}

@media (max-width: 768px) {
  .inquiry-type-grid {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }
  .inquiry-type-card {
    min-height: auto;
    flex-direction: row;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
  }
  .inquiry-type-icon {
    flex-shrink: 0;
    margin-bottom: 0;
  }
  .inquiry-type-label {
    font-size: 1rem;
  }
  .inquiry-type-desc {
    font-size: 0.8125rem;
  }
}

/* ═══════════════════════════════════════════════════════════
   ABOUT PAGE INLINE CTA (replacement for old consultation form)
   ═══════════════════════════════════════════════════════════ */
.about-inquire-cta {
  background: linear-gradient(180deg, rgba(var(--accent-rgb,110,160,184),0.04) 0%, transparent 100%);
}

.about-cta-inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  padding: var(--space-lg) 0;
}

.about-cta-inner .section-label {
  justify-content: center;
}

.about-cta-inner h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  color: var(--color-text-primary);
  margin: var(--space-xs) 0 var(--space-sm);
  letter-spacing: -0.01em;
}

.about-cta-inner p {
  color: var(--color-text-secondary);
  font-size: 1.0625rem;
  line-height: 1.6;
  margin-bottom: var(--space-md);
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

/* ═══════════════════════════════════════════════════════════
   ADVISOR PREVIEW CARD (inquire form, territory-triggered)
   ═══════════════════════════════════════════════════════════ */
.advisor-preview-wrap {
  margin: 0 0 var(--space-md);
  animation: fade-slide-in 0.3s ease-out;
}

@keyframes fade-slide-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.advisor-preview-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 0.5rem;
}

.advisor-preview-card {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 12px rgba(var(--shadow-rgb,0,0,0),0.2);
}

.advisor-preview-photo {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--color-accent);
}

.advisor-preview-body {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  flex: 1;
  min-width: 0;
}

.advisor-preview-body strong {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.3;
}

.advisor-preview-body span {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}

.advisor-preview-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-accent);
  margin-top: 0.3rem;
  text-decoration: none;
  width: fit-content;
}

.advisor-preview-link:hover {
  text-decoration: underline;
}

@media (max-width: 520px) {
  .advisor-preview-card {
    flex-direction: column;
    text-align: center;
    gap: 0.75rem;
  }
  .advisor-preview-body {
    align-items: center;
  }
  .advisor-preview-photo {
    width: 80px;
    height: 80px;
  }
}

/* ═══════════════════════════════════════════════════════════
   EMAIL VALIDATION HINT (inline below email input)
   ═══════════════════════════════════════════════════════════ */
.email-validation-hint {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.8125rem;
  line-height: 1.35;
  min-height: 1em;
}

.email-validation-hint:empty {
  display: none;
}

.email-validation-hint.is-checking {
  color: var(--color-text-muted);
}

.email-validation-hint.is-valid {
  color: var(--s4ecb71,#4ecb71);
}

.email-validation-hint.is-error {
  color: var(--danger-strong,#e05252);
}

.email-validation-hint.is-suggestion {
  color: var(--color-text-secondary);
}

.email-suggest-btn {
  background: rgba(var(--accent-rgb,110,160,184),0.15);
  border: 1px solid rgba(var(--accent-rgb,110,160,184),0.4);
  color: var(--color-accent);
  font: inherit;
  font-weight: 600;
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  margin: 0 0.15rem;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.email-suggest-btn:hover {
  background: rgba(var(--accent-rgb,110,160,184),0.25);
  border-color: var(--color-accent);
}

.email-suggest-btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════
   BRAND PICKER (inquire form, multi-select with chips)
   ═══════════════════════════════════════════════════════════ */
.brand-picker {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.brand-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  min-height: 0;
}

.brand-chips:empty { display: none; }

.brand-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.35rem 0.3rem 0.7rem;
  background: rgba(var(--accent-rgb,110,160,184),0.15);
  border: 1px solid rgba(var(--accent-rgb,110,160,184),0.4);
  border-radius: var(--radius-full);
  color: var(--color-accent);
  font-size: 0.8125rem;
  font-weight: 500;
  animation: chip-in 0.2s ease-out;
}

@keyframes chip-in {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}

.brand-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: var(--color-accent);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.brand-chip-remove:hover {
  background: rgba(var(--accent-rgb,110,160,184),0.3);
}

.brand-chip-remove:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}

.brand-picker-row {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
}

.brand-picker-select {
  flex: 1;
  min-width: 0;
}

.brand-picker-add {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0 1rem;
  background: var(--color-accent);
  color: var(--color-bg-primary);
  border: none;
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition-fast), transform var(--transition-fast);
}

.brand-picker-add:hover {
  background: var(--color-accent-bright, #8fbdd4);
  transform: translateY(-1px);
}

.brand-picker-add:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.brand-picker.has-error {
  animation: shake 0.35s ease-out;
}

.brand-picker.has-error .brand-picker-select {
  border-color: var(--danger-strong,#e05252);
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

@media (max-width: 520px) {
  .brand-picker-row {
    flex-direction: column;
  }
  .brand-picker-add {
    justify-content: center;
    padding: 0.75rem;
    min-height: 48px;
  }
}

/* ═══════════════════════════════════════════════════════════
   YOUTUBE VIDEO REEL (news.html)
   ═══════════════════════════════════════════════════════════ */
.video-reel-section {
  background: var(--color-bg-secondary, #0d0d17);
  padding: var(--space-xl) 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.video-reel-header {
  text-align: center;
  margin-bottom: var(--space-lg);
}

.video-reel-header h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: var(--space-xs);
}

.video-reel-header p {
  color: var(--color-text-secondary);
  font-size: 1rem;
  max-width: 560px;
  margin: 0 auto;
}

.video-reel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-md);
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.video-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--transition-fast), border-color var(--transition-fast);
  display: flex;
  flex-direction: column;
}

.video-card:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--accent-rgb,110,160,184),0.4);
}

.video-card-embed {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 */
  background: #000;
}

.video-card-embed iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-card-body {
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.video-card-category {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.video-card-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.35;
  margin: 0;
}

.video-card-desc {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin: 0;
}

.video-reel-footer {
  text-align: center;
  margin-top: var(--space-lg);
}

.video-reel-footer a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--color-accent);
  font-weight: 500;
  font-size: 0.9375rem;
}

.video-reel-footer a:hover {
  text-decoration: underline;
}

/* ════════════════════════════════════════════════════
   ═══ V44 MOBILE CONSOLIDATION ═══
   Final authoritative mobile rules — overrides any
   earlier conflicting rules. Applied last in cascade.
   ════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* All form fields: 16px min font-size prevents iOS zoom */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  input[type="url"],
  select,
  textarea {
    font-size: 16px !important;
  }

  /* Select dropdowns: ensure text is visible */
  select {
    color: var(--color-text-primary) !important;
    background-color: var(--color-bg-primary) !important;
  }

  /* All select options: explicit colors (iOS system override fix) */
  option {
    background-color: var(--bg-2,#16161f) !important;
    color: var(--text,#f0f2f5) !important;
  }

  /* Form rows always stack on mobile */
  

  /* Form padding: reduce for mobile */
  

  

  /* Container edge padding on mobile */
  .container {
    padding-left: var(--space-sm);
    padding-right: var(--space-sm);
  }

  /* Touch targets for all form buttons */
  button[type="submit"],
  .btn {
    min-height: 48px;
  }
}

/* mobile nav rules consolidated into single block below */

/* Very small screens */
@media (max-width: 375px) {
  .hero h1 {
    font-size: clamp(1.5rem, 8vw, 2rem);
  }

  .container {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
}

/* ============================================
   FIND YOUR ADVISOR (about page, below team grid)
   ============================================ */
.find-advisor-card {
  max-width: 720px;
  margin: var(--space-2xl) auto 0;
  padding: var(--space-lg) var(--space-md);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.find-advisor-header {
  text-align: center;
  margin-bottom: var(--space-md);
}

.find-advisor-header h3 {
  font-size: clamp(1.25rem, 3vw, 1.5rem);
  margin: var(--space-xs) 0 var(--space-xs);
  color: var(--color-text-primary);
}

.find-advisor-header p {
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
  max-width: 480px;
  margin: 0 auto;
}

.find-advisor-form .pf-row {
  margin-bottom: 0;
}

.find-advisor-result {
  margin-top: var(--space-md);
  animation: fade-slide-in 0.25s ease-out;
}

.find-advisor-match {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: var(--space-md);
  align-items: center;
  padding: var(--space-md);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.find-advisor-photo {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--color-accent);
}

.find-advisor-photo-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-card);
  color: var(--color-accent-light);
  font-weight: 700;
  font-size: 1.5rem;
  text-transform: uppercase;
}

.find-advisor-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.find-advisor-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 2px;
}

.find-advisor-info strong {
  font-size: 1.0625rem;
  color: var(--color-text-primary);
  line-height: 1.25;
}

.find-advisor-info span {
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
}

.find-advisor-info .find-advisor-territory {
  color: var(--color-text-muted);
}

.find-advisor-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0.65rem 1.1rem;
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-light));
  color: var(--on-accent,#0a1720);
  font-weight: 600;
  font-size: 0.875rem;
  border-radius: var(--radius-full);
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.find-advisor-cta:hover {
  color: var(--on-accent,#0a1720);
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(var(--accent-rgb,110,160,184),0.3);
}

.find-advisor-error {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  text-align: center;
  margin: 0;
  padding: var(--space-sm);
}

.find-advisor-error a {
  color: var(--color-accent-light);
  font-weight: 600;
}

@media (max-width: 560px) {
  .find-advisor-match {
    grid-template-columns: 1fr;
    text-align: center;
    gap: var(--space-sm);
  }
  .find-advisor-photo { margin: 0 auto; }
  .find-advisor-info { align-items: center; }
  .find-advisor-cta { width: 100%; }
}

/* ============================================
   MEMBERSHIPS / AFFILIATIONS (homepage bottom)
   ============================================ */
.memberships-section {
  padding: var(--space-lg) 0 var(--space-xl);
  background: var(--color-bg-primary);
}

.memberships-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  text-align: center;
  margin: 0 0 var(--space-md);
}

.memberships-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-md);
}

.membership-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 22px;
  background: #ffffff;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  text-decoration: none;
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
  filter: grayscale(0.15);
  opacity: 0.92;
}

.membership-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(var(--shadow-rgb,0,0,0),0.25);
  border-color: var(--color-border-hover);
  filter: none;
  opacity: 1;
}

.membership-badge {
  /* Fixed container — both badges are the same outer size */
  width: 200px;
  height: 88px;
}

.membership-badge img {
  /* Fill the box without stretching — whitespace comes from the white background */
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

@media (max-width: 480px) {
  .membership-badge { padding: 10px 16px; width: 150px; height: 68px; }
}

/* ── Tariff newsletter signup (index.html) ── */
.tariff-signup-form { margin-top: var(--space-md); }
.tariff-signup-row {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  align-items: center;
}
.tariff-signup-input {
  flex: 1;
  min-width: 220px;
  padding: 0.6rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--overlay-soft,rgba(var(--overlay-rgb,255,255,255),0.06));
  color: var(--text-primary);
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.2s;
}
.tariff-signup-input:focus { border-color: var(--accent); }
.tariff-signup-input::placeholder { color: var(--text-secondary); }
.tariff-signup-success {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  color: var(--s6eb882,#6eb882);
  margin-top: var(--space-sm);
}
.tariff-signup-privacy {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-top: var(--space-xs, 0.4rem);
  opacity: 0.7;
}

/* ── Inquiry form — prefilled/locked field states (inquire.html) ── */
/* ── Prefilled / locked fields (logged-in user) ─────────── */
.pf-prefilled {
  background: rgba(var(--accent-rgb,110,160,184),0.06) !important;
  border-color: rgba(var(--accent-rgb,110,160,184),0.25) !important;
  color: var(--color-text-secondary, #a0a8b4) !important;
  cursor: default !important;
}
.pf-prefilled:focus { outline: none; box-shadow: none; }
.pf-lock-badge {
  display: none;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 400;
  color: var(--color-accent-light, #6ea0b8);
  margin-left: 6px;
  opacity: 0.8;
  vertical-align: middle;
}
.pf-lock-badge svg { width: 10px; height: 10px; }
.pf-lock-badge.visible { display: inline-flex; }
/* Phone: soft-fill — prefilled but editable */
.pf-soft-fill {
  border-color: rgba(var(--accent-rgb,110,160,184),0.25) !important;
}
.pf-soft-fill:focus {
  border-color: var(--color-accent, #6ea0b8) !important;
}
/* Region select when disabled/auto-filled */
select.pf-prefilled:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

/* ── Memberships section — mobile (missing from original) ── */
@media (max-width: 640px) {
  .memberships-row {
    flex-wrap: wrap;
    gap: var(--space-md);
    justify-content: center;
  }
  .membership-badge img {
    max-height: 48px;
    width: auto;
  }
}

/* ── Global mobile touch improvements ── */
@media (max-width: 768px) {
  /* Larger tap targets */
  .btn, .btn-primary, .btn-secondary, .btn-ghost {
    min-height: 44px;
  }
  /* Prevent horizontal overflow */
  body { overflow-x: hidden; }
  /* Table responsiveness on public pages */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* Reduce hero padding on tablets */
  .hero-content { padding: var(--space-lg) var(--space-md); }
}

@media (max-width: 480px) {
  /* Headline sizing */
  .hero h1 { font-size: clamp(1.6rem, 7vw, 2.4rem); }
  h2        { font-size: clamp(1.4rem, 6vw, 2rem); }
  /* Section vertical rhythm */
  .section  { padding: var(--space-2xl) 0; }
  .section-sm { padding: var(--space-xl) 0; }
  /* Footer links: wrap gracefully */
  .footer-links { flex-wrap: wrap; gap: 8px 16px; justify-content: center; }
  .footer-inner { flex-direction: column; align-items: center; gap: 12px; text-align: center; }
}

/* ============================================
   NEWS PAGE — category tabs, compact tiles, read modal
   (scoped to #news-grid so the home-page preview keeps its large cards)
   ============================================ */
.news-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: var(--space-lg);
  justify-content: center;
}
.news-tab {
  appearance: none;
  border: 1px solid var(--color-border);
  background: var(--color-bg-card);
  color: var(--color-text-secondary);
  padding: 0.45rem 1rem;
  border-radius: var(--radius-full);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--transition-base), color var(--transition-base), background var(--transition-base);
}
.news-tab:hover { color: var(--color-text-primary); border-color: var(--color-border-hover); }
.news-tab.active {
  color: #fff;
  background: var(--color-accent-dim, #274D55);
  border-color: var(--color-accent-dim, #274D55);
}

/* Compact horizontal tile grid (page view) */
#news-grid.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-md);
}
.news-tile {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  text-align: left;
  width: 100%;
  padding: 0.6rem;
  background: var(--color-bg-card);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base);
  color: inherit;
  font: inherit;
}
.news-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(var(--shadow-rgb,0,0,0),0.25);
}
.news-tile-thumb {
  flex: 0 0 auto;
  width: 84px;
  height: 84px;
  border-radius: var(--radius-sm, 8px);
  overflow: hidden;
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.news-tile-thumb img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.news-tile-placeholder img { object-fit: contain; padding: 12px; opacity: 0.7; }
.news-tile-body { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.news-tile-date {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}
.news-tile-title {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--color-text-muted);
  padding: var(--space-lg);
}

/* Read modal */
.news-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(var(--shadow-rgb,0,0,0),0.65);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
}
.news-modal-backdrop[hidden] { display: none; }
.news-modal {
  position: relative;
  width: min(900px, 94vw);
  max-height: 90vh;
  background: var(--color-bg-secondary, #12181c);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 24px 80px var(--scrim,rgba(var(--shadow-rgb,0,0,0),0.5));
  overflow: hidden;
}
@media (min-width: 1400px) { .news-modal { width: min(1040px, 90vw); } }
.news-modal-close {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 2;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: rgba(var(--shadow-rgb,0,0,0),0.45);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.news-modal-close:hover { background: var(--scrim-heavy,rgba(var(--shadow-rgb,0,0,0),0.7)); }
.news-modal-scroll {
  max-height: 90vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 0 var(--space-lg);
}
.news-modal-cover { background: none; text-align: center; }
.news-modal-cover img { width: auto; max-width: 100%; max-height: 360px; height: auto; object-fit: contain; display: block; margin: 0 auto; }
.news-modal-category {
  display: inline-block;
  margin: var(--space-md) var(--space-lg) 0;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-accent-dim, #8CA0AA);
}
.news-modal-date {
  display: block;
  margin: 0.3rem var(--space-lg) 0;
  font-size: 0.78rem;
  color: var(--color-text-muted);
}
.news-modal h2 {
  margin: 0.4rem var(--space-lg) 0.6rem;
  font-size: 1.6rem;
  line-height: 1.25;
  color: var(--color-text-primary);
  overflow-wrap: anywhere;
  word-break: break-word;
}
.news-modal-body {
  margin: 0 var(--space-lg);
  color: var(--color-text-secondary);
  line-height: 1.7;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.news-modal-body img { max-width: 100%; height: auto; border-radius: var(--radius-sm, 8px); margin: 1rem 0; }
.news-modal-body p { margin: 0 0 1rem; overflow-wrap: anywhere; word-break: break-word; }
.news-modal-body pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.news-modal-body h2, .news-modal-body h3 { color: var(--color-text-primary); margin: 1.4rem 0 0.6rem; overflow-wrap: anywhere; }
.news-modal-body a { color: var(--color-accent, #6ea0b8); overflow-wrap: anywhere; }
.news-modal-footer { margin: var(--space-md) var(--space-lg) 0; }

@media (max-width: 600px) {
  .news-tile-thumb { width: 64px; height: 64px; }
  .news-modal { width: 96vw; max-height: 92vh; }
  .news-modal h2 { font-size: 1.3rem; }
}

/* Site-wide CRM record-name links (employee side). A record name/company that
   maps to a CRM account/contact, rendered as a link that opens that record in a
   new window. STANDARD: always the same steel-blue (var(--accent,#6ea0b8)) and underlined,
   everywhere on the site, so record links are instantly recognizable. */
.rec-link,
a.rec-link:link,
a.rec-link:visited {
  color: var(--accent,#6ea0b8) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
  cursor: pointer;
}
.rec-link:hover {
  color: var(--accent-light,#8fbdd4) !important;
}

/* Injected close button for popups that ship without one (modal-guard.js). */
.csa-modal-x {
  position: absolute; top: 10px; right: 12px; z-index: 5;
  width: 30px; height: 30px; padding: 0; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px; font-family: inherit; cursor: pointer;
  background: transparent; color: var(--color-text-secondary, #a0a8b4);
  border: 1px solid transparent; border-radius: 8px;
  transition: background .15s, color .15s, border-color .15s;
}
.csa-modal-x:hover {
  background: rgba(var(--overlay-rgb,255,255,255),.07);
  color: var(--color-text-primary, #f0f2f5);
  border-color: var(--color-border, #333);
}
.csa-modal-x:focus-visible { outline: 2px solid var(--accent,#6ea0b8); outline-offset: 2px; }