/* ITZ Consultants — section rhythm + brand accents (2026-10-26)
   Opt-in per section:  class="content band-tint"  (soft gray-blue band)
                        class="content band-dark"  (brand navy band)
   Sections without a band class stay white. Logo colors are used as small accents only. */
:root {
  --itz-orange: #E85D2F;
  --itz-purple: #3D2A6E;
  --itz-green:  #2E8B47;
  --itz-navy:   #0f2f52;
  --itz-tint:   #F2F5F9;
}

/* Breathing room so each section reads as its own chapter */
section.content { padding-top: 72px; padding-bottom: 72px; }

/* Full-width bands behind the 1200px content column */
section.band-tint, section.band-dark {
  background: var(--band);
  box-shadow: 0 0 0 100vmax var(--band);
  clip-path: inset(0 -100vmax);
}
section.band-tint { --band: var(--itz-tint); }
section.band-dark { --band: var(--itz-navy); }

/* Text on the navy band */
section.band-dark .section-title { color: #fff !important; -webkit-text-fill-color: #fff; }
section.band-dark .section-subtitle { color: #c3d2e4 !important; }

/* Side tabs on the navy band: white panel stays, tab list turns light-on-dark */
.band-dark .itz-st-tab { color: #e3ebf5; background: transparent; }
.band-dark .itz-st-tab:hover { background: rgba(255, 255, 255, .08); }
.band-dark .itz-st-tab .itz-st-badge { background: rgba(255, 255, 255, .14); color: #fff; }
.band-dark .itz-st-tab.is-active,
.band-dark .itz-st-tab[aria-selected="true"] { background: #fff; color: var(--itz-navy); }
.band-dark .itz-st-tab.is-active .itz-st-badge,
.band-dark .itz-st-tab[aria-selected="true"] .itz-st-badge { background: #e8eef6; color: var(--itz-navy); }
.band-dark .itz-st-tab:focus-visible { outline: 3px solid #5fb3e8; outline-offset: 2px; }
.band-dark .itz-st-panel { box-shadow: 0 10px 30px rgba(0, 0, 0, .18); }

/* Cards sitting on a tinted band get a crisper edge */
.band-tint .card { border-color: #dde4ee; box-shadow: 0 1px 3px rgba(15, 23, 42, .06); }

/* Accent 1: three-color rule under section titles, echoing the logo cube */
.section-title::after {
  content: "";
  display: block;
  width: 60px;
  height: 4px;
  margin: 14px auto 0;
  border-radius: 2px;
  background: linear-gradient(90deg,
    var(--itz-orange) 0 33.33%, var(--itz-purple) 33.33% 66.66%, var(--itz-green) 66.66% 100%);
}
.band-dark .section-title::after {
  background: linear-gradient(90deg,
    var(--itz-orange) 0 33.33%, #8b74c9 33.33% 66.66%, #4cc27a 66.66% 100%);
}

/* Accent 2: each practice card on "What We Do" carries its icon's color along the top edge */
.grid > .card.accent-blue   { border-top: 4px solid #1e6fb8 !important; }
.grid > .card.accent-green  { border-top: 4px solid var(--itz-green) !important; }
.grid > .card.accent-orange { border-top: 4px solid var(--itz-orange) !important; }

@media (max-width: 900px) {
  section.content { padding-top: 52px; padding-bottom: 52px; }
}