/* ============================================================
   Colyer Law Firm — Design Tokens
   Source of truth for colors, typography, spacing, motion.
   ============================================================ */

:root {
  /* ---------- Layout ---------- */
  --header-height:  96px;

  /* ---------- Core palette (client-confirmed) ---------- */
  --c-navy:         #1a2a43;
  --c-navy-deep:    #162f4c;
  --c-ink:          #0e0c19;
  --c-slate:        #3e3e50;
  --c-paper:        #fffdff;
  --c-teal:         #479bbe;
  --c-gold:         #b9a755;

  /* ---------- Derived neutrals ---------- */
  --c-line:         #e6e4dc;
  --c-stone:        #d9d4c6;
  --c-cream:        #f5f1e6;
  --c-cream-2:      #efe9d8;
  --c-ink-2:        #2a3a54;

  /* ---------- Accent variants ---------- */
  --c-gold-soft:    #d7c47a;
  --c-gold-deep:    #8a7a3c;
  --c-teal-soft:    #b3d6e3;
  --c-teal-deep:    #2c7395;

  /* ---------- Semantic aliases ---------- */
  --accent:         var(--c-gold);
  --accent-soft:    var(--c-gold-soft);
  --accent-deep:    var(--c-gold-deep);
  --accent-2:       var(--c-teal);
  --accent-2-soft:  var(--c-teal-soft);
  --accent-2-deep:  var(--c-teal-deep);

  /* ---------- Overlays / scrims ---------- */
  --scrim-navy-72:  rgba(26, 42, 67, 0.72);
  --scrim-navy-88:  rgba(22, 47, 76, 0.88);
  --scrim-ink-60:   rgba(14, 12, 25, 0.60);

  /* ---------- Typography ---------- */
  --f-display: "Big Shoulders Display", "Impact", "Arial Narrow Bold", sans-serif;
  --f-body:    "Open Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-mono:    "JetBrains Mono", ui-monospace, Menlo, monospace;

  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-md:   18px;
  --fs-lg:   22px;
  --fs-xl:   28px;
  --fs-2xl:  36px;
  --fs-3xl:  48px;
  --fs-4xl:  64px;
  --fs-5xl:  88px;
  --fs-6xl: 128px;

  --lh-tight: 0.92;
  --lh-snug:  1.12;
  --lh-body:  1.55;
  --lh-loose: 1.75;

  --ls-tight: -0.02em;
  --ls-wide:  0.14em;
  --ls-xwide: 0.24em;

  /* ---------- Spacing scale (4px base) ---------- */
  --s-1:   4px;
  --s-2:   8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10:128px;
  --s-11:160px;

  /* ---------- Radii ---------- */
  --r-sm:   2px;
  --r-md:   4px;
  --r-lg:   8px;
  --r-xl:  16px;
  --r-pill: 999px;

  /* ---------- Shadows ---------- */
  --sh-sm:   0 1px  2px rgba(14, 12, 25, 0.08);
  --sh-md:   0 6px 20px rgba(14, 12, 25, 0.10);
  --sh-lg:   0 24px 60px rgba(14, 12, 25, 0.18);
  --sh-gold: 0 12px 32px rgba(185, 167, 85, 0.28);
  --sh-teal: 0 12px 32px rgba(66, 169, 202, 0.28);

  /* ---------- Motion ---------- */
  --ease-out:    cubic-bezier(.2,.7,.2,1);
  --ease-in-out: cubic-bezier(.7,0,.3,1);
  --dur-fast: 180ms;
  --dur-med:  320ms;
  --dur-slow: 600ms;

  /* ---------- Section rhythm ---------- */
  --density: 1;
  --sec-pad-y: calc(var(--s-9) * var(--density));
  --sec-pad-x: calc(var(--s-7) * var(--density));

  /* ---------- Container widths ---------- */
  --w-narrow: 960px;
  --w-reg:   1200px;
  --w-wide:  1440px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur-med:  1ms;
    --dur-slow: 1ms;
  }
}

/* === utilities (minimal subset for nav/footer) === */

.container        { max-width: var(--w-reg);    margin-inline: auto; padding-inline: var(--s-6); }
.container-wide   { max-width: var(--w-wide);   margin-inline: auto; padding-inline: var(--s-6); }
.text-teal        { color: var(--c-teal); }
.text-navy        { color: var(--c-navy-deep); }
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* === buttons === */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 2px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  overflow: hidden;

  /* Sweep mechanic: bg-image is a single-color block painted from the
     left edge; bg-size animates 0% → 100% on hover so the color wipes
     left-to-right behind the text. */
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 0% 100%;
  transition:
    transform var(--dur-fast) var(--ease-out),
    background-size 360ms var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}
.btn:hover  { transform: translateY(-1px); background-size: 100% 100%; }
.btn:active { transform: translateY(0); }

.btn--primary {
  background-color: var(--c-gold);
  background-image: linear-gradient(var(--c-gold-deep), var(--c-gold-deep));
  color: var(--c-navy-deep);
  border-color: var(--c-gold);
  box-shadow: var(--sh-gold);
}
.btn--primary:hover { color: var(--c-paper); border-color: var(--c-gold-deep); }

.btn--secondary {
  background-color: var(--c-navy-deep);
  background-image: linear-gradient(var(--c-navy), var(--c-navy));
  color: var(--c-paper);
  border-color: var(--c-navy-deep);
}
.btn--secondary:hover { border-color: var(--c-navy); }

.btn--outline {
  background-color: transparent;
  background-image: linear-gradient(var(--c-paper), var(--c-paper));
  color: var(--c-paper);
  border-color: var(--c-paper);
}
.btn--outline:hover { color: var(--c-navy-deep); }

.btn--outline-navy {
  background-color: transparent;
  background-image: linear-gradient(var(--c-navy-deep), var(--c-navy-deep));
  color: var(--c-navy-deep);
  border-color: var(--c-navy-deep);
}
.btn--outline-navy:hover { color: var(--c-paper); }

/* Ghost is a link with a gold underline — sweep doesn't suit it; keep
   the existing underline-grow micro-interaction instead. */
.btn--ghost {
  padding: 10px 0;
  border: 0;
  background: none;
  color: var(--c-navy-deep);
  border-bottom: 2px solid var(--c-gold);
  border-radius: 0;
  overflow: visible;
}
.btn--ghost:hover { color: var(--c-gold-deep); transform: none; }

.btn--lg { padding: 18px 28px; font-size: 17px; }
.btn--sm { padding: 10px 16px; font-size: 13px; }

.btn__arrow { display: inline-block; transition: transform var(--dur-fast) var(--ease-out); }
.btn:hover .btn__arrow { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .btn { transition: color var(--dur-fast), border-color var(--dur-fast); }
  .btn:hover { transform: none; background-size: 100% 100%; }
}

/* === nav === */
/* ============================================================
   Site nav — centered logo, mega-menus, scroll-aware compress,
   transparent-over-hero, scroll progress micro-bar.
   ============================================================ */

/* Fee ribbon (above the nav) */
.fee-ribbon {
  background: var(--c-gold);
  color: var(--c-navy-deep);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  overflow: hidden;
  max-height: 44px;
  transition: max-height var(--dur-med) var(--ease-out);
  position: relative;
  z-index: 41;
}
.fee-ribbon__inner {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  padding-block: 10px;
  text-transform: uppercase;
}
.fee-ribbon__dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--c-navy-deep);
  animation: fee-pulse 2.6s var(--ease-in-out) infinite;
}
@keyframes fee-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.25); opacity: .55; }
}
@media (prefers-reduced-motion: reduce) { .fee-ribbon__dot { animation: none; } }
.fee-ribbon__link {
  display: inline-flex; align-items: center; gap: 6px;
  border-bottom: 1.5px solid var(--c-navy-deep);
  padding-block: 2px;
}
.fee-ribbon__link:hover { color: var(--c-navy); }
.fee-ribbon.is-hidden { max-height: 0; }
@media (max-width: 720px) {
  .fee-ribbon__link { display: none; }
  .fee-ribbon__inner { gap: 10px; font-size: 12px; }
}

/* ============================================================
   Main nav shell
   ============================================================ */
.site-nav {
  position: sticky; top: 0; z-index: 40;
  background: var(--c-paper);
  border-bottom: 1px solid var(--c-line);
  transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.site-nav.is-scrolled:not(.is-transparent) {
  box-shadow: 0 1px 16px rgba(14, 12, 25, .08);
}

.site-nav__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(400px, 28vw, 460px) minmax(0, 1fr);
  align-items: center;
  height: var(--header-height, 96px);
  padding: 0 32px;
  max-width: 1680px;
  margin: 0 auto;
}

/* Left group occupies column 1, right group occupies column 3.
   Column 2 is RESERVED for the logo — items can never enter it. */
.site-nav__leftgroup  { grid-column: 1; justify-self: end;   min-width: 0; }
.site-nav__rightgroup {
  grid-column: 3;
  justify-self: stretch;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* Logo — absolutely centered on the viewport at exact 50% (over column 2) */
.site-nav__brand {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  display: block;
}
.site-nav__logo {
  display: block;
  height: 38px;
  width: auto;
  transition: filter .25s ease;
}

/* Lists */
.site-nav__list {
  list-style: none; padding: 0; margin: 0;
  display: flex;
  gap: 2px;
  min-width: 0;
  flex-wrap: nowrap;
}
.site-nav__list--left  { justify-content: flex-end;   }
.site-nav__list--right { justify-content: flex-start; }

/* Hide everything but the logo until the user scrolls.
   Pure opacity + visibility transitions — no transform — to avoid
   any drift/pop when scrolling back to the top quickly. */
.site-nav__leftgroup,
.site-nav__rightgroup {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity .25s var(--ease-out),
    visibility 0s linear .25s;
}
.site-nav.is-scrolled .site-nav__leftgroup,
.site-nav.is-scrolled .site-nav__rightgroup {
  opacity: 1;
  visibility: visible;
  transition:
    opacity .25s var(--ease-out),
    visibility 0s linear 0s;
}

.site-nav__item { position: relative; }

.site-nav__link {
  position: relative;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 12px 14px;
  background: transparent; border: 0;
  font-family: var(--f-display);
  font-weight: 700; font-size: 14px;
  line-height: 1;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--c-ink);
  cursor: pointer;
  white-space: nowrap;
  transition: color .25s ease;
}

/* Animated teal underline that scales in on hover/active */
.site-nav__link::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: 6px;
  height: 1.5px;
  background: var(--c-teal);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform .28s var(--ease-out);
}
.site-nav__link:hover::after,
.site-nav__link:focus-visible::after,
.site-nav__link.is-current::after,
.site-nav__item.is-mega-open .site-nav__link::after { transform: scaleX(1); }

/* Caret for mega-menu triggers */
.site-nav__caret {
  width: 7px; height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transform-origin: center center;
  transition: transform .3s var(--ease-out);
  flex-shrink: 0;
}
.site-nav__item.is-mega-open .site-nav__caret {
  transform: translateY(0) rotate(225deg);
}

/* Right actions — sits at the far end of the rightgroup */
.site-nav__actions {
  display: flex; align-items: center; gap: 14px;
  flex-shrink: 0;
}

.site-nav__phone {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-display);
  font-weight: 700; font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--c-navy-deep);
  transition: color .25s ease;
}
.site-nav__phone:hover { color: var(--c-gold-deep); }

.site-nav__phone-dot {
  width: 9px; height: 9px;
  background: var(--c-teal);
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
}
.site-nav__phone-dot::after {
  content: ""; position: absolute; inset: 0;
  background: var(--c-teal);
  border-radius: 50%;
  animation: phone-pulse 2.4s var(--ease-out) infinite;
}
@keyframes phone-pulse {
  0%   { transform: scale(1);   opacity: .65; }
  70%  { transform: scale(2.6); opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .site-nav__phone-dot::after { animation: none; } }

.site-nav__cta { white-space: nowrap; }

.site-nav__toggle {
  display: none;
  flex-direction: column; gap: 4px; padding: 10px;
  background: transparent; border: 0;
}
.site-nav__toggle span {
  width: 24px; height: 2px; background: var(--c-navy-deep);
  transition: transform var(--dur-fast), opacity var(--dur-fast), background-color .25s ease;
}
.site-nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.site-nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.site-nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Scroll progress micro-bar at bottom of nav */
.site-nav__progress {
  position: absolute;
  left: 0; bottom: -1px;
  height: 2px;
  width: var(--scroll-progress, 0%);
  background: var(--c-teal);
  transition: width .15s linear;
  pointer-events: none;
  z-index: 4;
}

/* ============================================================
   Transparent state — over the hero on pages with [data-hero]
   ::before is ALWAYS present and opacity-animated to avoid the
   content-toggle "pop" when entering/leaving the transparent state.
   ============================================================ */
.site-nav::before {
  content: "";
  position: absolute; inset: 0 0 -120px 0;
  background: linear-gradient(180deg, rgba(14,12,25,.65) 0%, rgba(14,12,25,.30) 50%, rgba(14,12,25,0) 100%);
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  transition: opacity .25s ease;
}
.site-nav.is-transparent {
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
}
.site-nav.is-transparent::before { opacity: 1; }
.site-nav.is-transparent .site-nav__logo { filter: brightness(0) invert(1); }
.site-nav.is-transparent .site-nav__link { color: var(--c-paper); }
.site-nav.is-transparent .site-nav__phone { color: var(--c-paper); }
.site-nav.is-transparent .site-nav__phone:hover { color: var(--c-gold); }
.site-nav.is-transparent .site-nav__toggle span { background: var(--c-paper); }
.site-nav.is-transparent .site-nav__progress { opacity: .6; }

/* Transparent OVER LIGHT hero — paper-toned gradient, dark text */
.site-nav.is-over-light::before {
  background: linear-gradient(180deg, rgba(255,253,255,.55) 0%, rgba(255,253,255,.20) 60%, transparent 100%);
}
.site-nav.is-over-light.is-transparent .site-nav__logo { filter: none; }
.site-nav.is-over-light.is-transparent .site-nav__link { color: var(--c-navy-deep); }
.site-nav.is-over-light.is-transparent .site-nav__phone { color: var(--c-navy-deep); }
.site-nav.is-over-light.is-transparent .site-nav__phone:hover { color: var(--c-gold-deep, #8e803a); }
.site-nav.is-over-light.is-transparent .site-nav__toggle span { background: var(--c-navy-deep); }

/* ============================================================
   Mega menu
   ============================================================ */
.site-mega {
  position: absolute;
  top: 100%; left: 0; right: 0;
  background: var(--c-navy-deep);
  color: var(--c-paper);
  padding: 64px 0 72px;
  border-top: 1px solid rgba(255,255,253,.10);
  border-bottom: 4px solid var(--c-gold);
  opacity: 0;
  transform: translateY(-12px);
  pointer-events: none;
  transition: opacity .28s var(--ease-out), transform .28s var(--ease-out);
  z-index: 30;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 24px 32px rgba(14,12,25,.30);
}
.site-mega.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.site-mega[hidden] { display: none; }

/* Massive watermark text behind everything */
.site-mega__watermark {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -54%);
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(180px, 24vw, 380px);
  line-height: 0.85;
  text-transform: uppercase;
  letter-spacing: -0.04em;
  color: rgba(255,255,253,.045);
  white-space: nowrap;
  pointer-events: none;
  z-index: 0;
  user-select: none;
}

.site-mega__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.6fr);
  gap: 72px;
  align-items: start;
}
@media (max-width: 1180px) {
  .site-mega__inner { grid-template-columns: 1fr; gap: 32px; }
}

.site-mega__intro { padding-right: 32px; }
.site-mega__eyebrow { color: var(--c-gold); }
.site-mega__title {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--c-paper);
  margin-top: 14px;
}
.site-mega__lede {
  color: rgba(255,255,253,.70);
  margin-top: 18px;
  max-width: 42ch;
  font-size: 14px;
  line-height: 1.55;
}
.site-mega__intro .btn { margin-top: 28px; }

.site-mega__grid {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  gap: 8px;
}
.site-mega__item { display: flex; }
.site-mega__item .site-mega__link { width: 100%; }
.site-mega__grid--unions { grid-template-columns: repeat(2, 1fr); max-width: 560px; }
@media (max-width: 1180px) {
  .site-mega__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .site-mega__grid,
  .site-mega__grid--unions { grid-template-columns: 1fr; }
}

.site-mega__link {
  position: relative;
  display: grid;
  grid-template-columns: auto auto 1fr;
  grid-template-areas:
    "num icon name"
    "num .    tag";
  column-gap: 14px; row-gap: 4px;
  padding: 18px 20px;
  border: 1px solid rgba(255,255,253,.08);
  background: rgba(255,255,253,.025);
  color: var(--c-paper);
  transition: background-color .2s ease, border-color .2s ease, transform .25s var(--ease-out);
  overflow: hidden;
}
.site-mega__link::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--c-teal);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .3s var(--ease-out);
}
.site-mega__link:hover {
  background: rgba(255,255,253,.06);
  border-color: rgba(255,255,253,.18);
  transform: translateY(-2px);
}
.site-mega__link:hover::before { transform: scaleY(1); }

.site-mega__num {
  grid-area: num;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.20em;
  color: var(--c-teal);
  align-self: start;
  padding-top: 3px;
}

.site-mega__icon {
  grid-area: icon;
  width: 18px; height: 18px;
  color: rgba(255,255,253,.55);
  display: inline-grid; place-items: center;
  align-self: center;
  transition: color .25s ease;
}
.site-mega__link:hover .site-mega__icon { color: var(--c-teal); }

.site-mega__grid--unions .site-mega__icon { display: none; }
.site-mega__grid--unions .site-mega__link {
  grid-template-columns: auto 1fr;
  grid-template-areas: "num name" "num tag";
}

.site-mega__name {
  grid-area: name;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.2;
}
.site-mega__tag {
  grid-area: tag;
  font-family: var(--f-mono);
  font-size: 11px;
  font-style: italic;
  color: rgba(255,255,253,.62);
  line-height: 1.4;
}

/* ============================================================
   Breakpoints
   ============================================================ */
@media (max-width: 1440px) {
  .site-nav__phone-num { display: none; }
  .site-nav__cta { padding: 11px 16px; font-size: 13px; }
}
@media (max-width: 1280px) {
  .site-nav__link { padding: 10px 10px; font-size: 13px; letter-spacing: 0.06em; }
  .site-nav__link::after { left: 10px; right: 10px; }
  .site-nav__inner {
    padding: 0 24px;
    grid-template-columns: minmax(0, 1fr) clamp(360px, 28vw, 420px) minmax(0, 1fr);
  }
  .site-nav__logo { height: 32px; }
  .site-nav__cta .btn__arrow { display: none; }
  .site-nav__cta { padding: 10px 12px; font-size: 12px; }
  .site-nav__rightgroup { gap: 10px; }
  .site-nav__actions { gap: 10px; }
}
@media (max-width: 1100px) {
  .site-nav__list,
  .site-nav__phone,
  .site-nav__cta { display: none; }
  .site-nav__leftgroup { display: none; }
  .site-nav__rightgroup {
    /* on mobile, only the toggle remains — keep it visible at top */
    opacity: 1;
    visibility: visible;
    transform: none;
    justify-content: flex-end;
  }
  .site-nav__toggle { display: flex; }
  .site-nav__inner {
    grid-template-columns: 1fr auto;
    padding: 0 24px;
  }
  .site-nav__brand {
    /* still centered on viewport via absolute */
    z-index: 3;
  }
  .site-mega { display: none !important; }
}

/* ============================================================
   Drawer (mobile)
   ============================================================ */
.site-drawer[hidden] { display: none; }
.site-drawer {
  position: fixed; inset: 0; z-index: 60;
  background: var(--scrim-ink-60);
  display: flex; justify-content: flex-end;
}
.site-drawer__panel {
  width: min(420px, 92vw);
  background: var(--c-navy-deep);
  color: var(--c-paper);
  padding: 64px 32px 32px;
  overflow-y: auto;
  transform: translateX(8%); opacity: 0;
  transition: transform var(--dur-med) var(--ease-out), opacity var(--dur-med);
}
.site-drawer.is-open .site-drawer__panel { transform: translateX(0); opacity: 1; }

.site-drawer__close {
  position: absolute; top: 16px; right: 16px;
  font-size: 22px; color: var(--c-paper); padding: 10px;
  background: transparent; border: 0;
}
.site-drawer__list { list-style: none; margin: 0; padding: 0; }
.site-drawer__list > li + li { margin-top: 8px; }
.site-drawer__link {
  display: block; padding: 12px 0;
  font-family: var(--f-display); font-weight: 800; font-size: 22px;
  text-transform: uppercase; letter-spacing: 0.04em;
  border-bottom: 1px solid rgba(255,255,253,.14);
  color: var(--c-paper);
}
.site-drawer__link:hover { color: var(--c-gold); }
.site-drawer__sublist { list-style: none; margin: 4px 0 10px; padding-left: 16px; }
.site-drawer__sublink {
  display: block; padding: 6px 0;
  font-size: 14px; color: rgba(255,255,253,.78);
}
.site-drawer__sublink:hover { color: var(--c-gold); }
.site-drawer__cta {
  display: flex; flex-direction: column; gap: 12px;
  margin-top: 24px; padding-top: 24px;
  border-top: 1px solid rgba(255,255,253,.14);
}

/* === footer === */
.site-footer {
  background: #06121f;
  color: var(--c-paper);
  padding-block: var(--s-9) var(--s-7);
  border-top: 4px solid var(--c-gold);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.site-footer::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 18% 12%, rgba(185,167,85,.06), transparent 55%),
    radial-gradient(circle at 80% 95%, rgba(71,155,190,.05), transparent 55%);
  pointer-events: none; z-index: -1;
}

/* Subtle "Colyer" watermark, centered behind everything — same pattern
   as the "We Fight" callout-fight watermark. */
.site-footer__watermark {
  position: absolute;
  top: 50%; left: 0; right: 0;
  transform: translateY(-50%);
  width: 100%;
  text-align: center;
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(180px, 26vw, 460px);
  line-height: 0.85;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: rgba(71, 155, 190, .075);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.site-footer__inner {
  position: relative;
  z-index: 1;
  display: grid; gap: var(--s-9);
}

/* Brand logo top-left, rendered white via inversion filter */
.site-footer__logo {
  display: block;
  height: 48px;
  width: auto;
  margin-left: -8px;
  margin-bottom: 28px;
  filter: brightness(0) invert(1);
  opacity: .92;
}

/* ─ Top: contact ↔ CTA ─────────────────────────────────────────── */
.site-footer__top {
  display: grid; gap: 48px; grid-template-columns: 1fr 1fr;
  align-items: start;
}
@media (max-width: 960px) { .site-footer__top { grid-template-columns: 1fr; } }

.site-footer__eyebrow {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,253,.55);
  margin: 0 0 14px;
}
.site-footer__eyebrow--gold { color: var(--c-gold); }

.site-footer__addr {
  font-style: normal;
  line-height: 1.7;
  font-size: 15px;
  color: rgba(255,255,253,.86);
}
.site-footer__addr a { color: var(--c-paper); border-bottom: 1px solid rgba(255,255,253,.24); }
.site-footer__addr a:hover { color: var(--c-gold); border-bottom-color: var(--c-gold); }

.site-footer__hours {
  list-style: none; padding: 0; margin: 18px 0 0;
  display: grid; gap: 4px;
  font-size: 13px; color: rgba(255,255,253,.66);
  max-width: 280px;
}
.site-footer__hours li { display: flex; justify-content: space-between; gap: 12px; }

.site-footer__cta { text-align: right; }
@media (max-width: 960px) { .site-footer__cta { text-align: left; } }
.site-footer__cta-line {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.1;
  color: var(--c-paper);
  margin: 0 0 22px;
}
.site-footer__actions {
  display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end;
}
@media (max-width: 960px) { .site-footer__actions { justify-content: flex-start; } }

/* ─ Nav columns ───────────────────────────────────────────────── */
.site-footer__nav {
  display: grid; gap: 40px;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 760px) { .site-footer__nav { grid-template-columns: 1fr; gap: 32px; } }

.site-footer__heading {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-gold);
  margin: 0 0 16px;
  font-weight: 700;
}

.site-footer__links { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.site-footer__links a {
  font-size: 14px;
  color: rgba(255,255,253,.78);
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
}
.site-footer__links a:hover { color: var(--c-paper); border-bottom-color: var(--c-teal); }

/* ─ Connect: social + newsletter ──────────────────────────────── */
.site-footer__connect {
  display: grid; gap: 48px;
  grid-template-columns: auto 1fr;
  align-items: start;
  padding-top: var(--s-7);
  border-top: 1px solid rgba(255,255,253,.10);
}
@media (max-width: 760px) {
  .site-footer__connect { grid-template-columns: 1fr; gap: 32px; }
}

.site-footer__social { list-style: none; padding: 0; margin: 0; display: flex; gap: 10px; }
.site-footer__social a {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  font-family: var(--f-display); font-weight: 800; font-size: 14px; letter-spacing: 0.06em;
  color: rgba(255,255,253,.78);
  background: rgba(255,255,253,.04);
  border: 1px solid rgba(255,255,253,.16);
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast);
}
.site-footer__social a:hover {
  background: var(--c-gold); color: var(--c-navy-deep); border-color: var(--c-gold);
  transform: translateY(-2px);
}

.site-footer__newsletter { max-width: 520px; justify-self: end; width: 100%; }
@media (max-width: 760px) { .site-footer__newsletter { justify-self: start; } }
.site-footer__newsletter-lede {
  margin: 0 0 12px;
  font-size: 13px;
  color: rgba(255,255,253,.62);
  line-height: 1.5;
}
.site-footer__newsletter-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
}
.site-footer__newsletter input[type="email"] {
  height: 48px;
  padding: 0 14px;
  font-family: var(--f-sans);
  font-size: 14px;
  color: var(--c-paper);
  background: rgba(255,255,253,.04);
  border: 1px solid rgba(255,255,253,.18);
  border-radius: 2px;
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.site-footer__newsletter input[type="email"]::placeholder { color: rgba(255,255,253,.4); }
.site-footer__newsletter input[type="email"]:focus {
  outline: none;
  border-color: var(--c-gold);
  background: rgba(255,255,253,.07);
}
.site-footer__newsletter-status {
  margin: 10px 0 0;
  min-height: 18px;
  font-size: 12px;
  color: var(--c-gold);
}

/* ─ Legal ─────────────────────────────────────────────────────── */
.site-footer__legal {
  padding-top: var(--s-7);
  border-top: 1px solid rgba(255,255,253,.10);
  display: grid; gap: 14px;
  font-size: 12px;
  color: rgba(255,255,253,.5);
}
.site-footer__legal-row {
  display: flex; gap: 24px; flex-wrap: wrap;
  justify-content: space-between; align-items: baseline;
}
.site-footer__legal ul { list-style: none; padding: 0; margin: 0; display: flex; gap: 20px; flex-wrap: wrap; }
.site-footer__legal a { color: rgba(255,255,253,.7); border-bottom: 1px solid rgba(255,255,253,.18); }
.site-footer__legal a:hover { color: var(--c-paper); border-bottom-color: var(--c-gold); }
.site-footer__disclaimer { max-width: 90ch; line-height: 1.65; color: rgba(255,255,253,.45); }

/* === Hide Divi Theme Builder header/footer on every page that gets the
       injected chrome (we render the Eleventy nav + footer instead).
       The cl-page-643-chrome.php plugin injects on the full 15-page set;
       this selector list mirrors that allow-list so no page renders both. === */
body.page-id-643 > #page-container > #et-boc > .et-l--header,
body.page-id-643 > #page-container > #et-boc > .et-l--footer,
body.page-id-643 .et-l.et-l--header,
body.page-id-643 .et-l.et-l--footer,
body.page-id-15  > #page-container > #et-boc > .et-l--header,
body.page-id-15  > #page-container > #et-boc > .et-l--footer,
body.page-id-15  .et-l.et-l--header,
body.page-id-15  .et-l.et-l--footer,
body.page-id-16  > #page-container > #et-boc > .et-l--header,
body.page-id-16  > #page-container > #et-boc > .et-l--footer,
body.page-id-16  .et-l.et-l--header,
body.page-id-16  .et-l.et-l--footer,
body.page-id-23  > #page-container > #et-boc > .et-l--header,
body.page-id-23  > #page-container > #et-boc > .et-l--footer,
body.page-id-23  .et-l.et-l--header,
body.page-id-23  .et-l.et-l--footer,
body.page-id-138 > #page-container > #et-boc > .et-l--header,
body.page-id-138 > #page-container > #et-boc > .et-l--footer,
body.page-id-138 .et-l.et-l--header,
body.page-id-138 .et-l.et-l--footer,
body.page-id-713 > #page-container > #et-boc > .et-l--header,
body.page-id-713 > #page-container > #et-boc > .et-l--footer,
body.page-id-713 .et-l.et-l--header,
body.page-id-713 .et-l.et-l--footer,
body.page-id-714 > #page-container > #et-boc > .et-l--header,
body.page-id-714 > #page-container > #et-boc > .et-l--footer,
body.page-id-714 .et-l.et-l--header,
body.page-id-714 .et-l.et-l--footer,
body.page-id-716 > #page-container > #et-boc > .et-l--header,
body.page-id-716 > #page-container > #et-boc > .et-l--footer,
body.page-id-716 .et-l.et-l--header,
body.page-id-716 .et-l.et-l--footer,
body.page-id-717 > #page-container > #et-boc > .et-l--header,
body.page-id-717 > #page-container > #et-boc > .et-l--footer,
body.page-id-717 .et-l.et-l--header,
body.page-id-717 .et-l.et-l--footer,
body.page-id-718 > #page-container > #et-boc > .et-l--header,
body.page-id-718 > #page-container > #et-boc > .et-l--footer,
body.page-id-718 .et-l.et-l--header,
body.page-id-718 .et-l.et-l--footer,
body.page-id-720 > #page-container > #et-boc > .et-l--header,
body.page-id-720 > #page-container > #et-boc > .et-l--footer,
body.page-id-720 .et-l.et-l--header,
body.page-id-720 .et-l.et-l--footer,
body.page-id-721 > #page-container > #et-boc > .et-l--header,
body.page-id-721 > #page-container > #et-boc > .et-l--footer,
body.page-id-721 .et-l.et-l--header,
body.page-id-721 .et-l.et-l--footer,
body.page-id-722 > #page-container > #et-boc > .et-l--header,
body.page-id-722 > #page-container > #et-boc > .et-l--footer,
body.page-id-722 .et-l.et-l--header,
body.page-id-722 .et-l.et-l--footer,
body.page-id-723 > #page-container > #et-boc > .et-l--header,
body.page-id-723 > #page-container > #et-boc > .et-l--footer,
body.page-id-723 .et-l.et-l--header,
body.page-id-723 .et-l.et-l--footer,
body.page-id-724 > #page-container > #et-boc > .et-l--header,
body.page-id-724 > #page-container > #et-boc > .et-l--footer,
body.page-id-724 .et-l.et-l--header,
body.page-id-724 .et-l.et-l--footer {
  display: none !important;
  height: 0 !important;
  visibility: hidden !important;
}

/* The Divi #et-boc wrapper sometimes adds top padding equal to the TB
   header's reserved height. Reset it across the same page set. */
body.page-id-643 #et-boc,
body.page-id-15  #et-boc,
body.page-id-16  #et-boc,
body.page-id-23  #et-boc,
body.page-id-138 #et-boc,
body.page-id-713 #et-boc,
body.page-id-714 #et-boc,
body.page-id-716 #et-boc,
body.page-id-717 #et-boc,
body.page-id-718 #et-boc,
body.page-id-720 #et-boc,
body.page-id-721 #et-boc,
body.page-id-722 #et-boc,
body.page-id-723 #et-boc,
body.page-id-724 #et-boc { padding-top: 0 !important; }


/* --- Union detail pages (738-742): hide empty Divi TB header/footer
   + reset #et-boc. /unions/{uaw,ibew,ironworkers,fop,teamsters-783}/. --- */
body.page-id-738 > #page-container > #et-boc > .et-l--header,
body.page-id-738 > #page-container > #et-boc > .et-l--footer,
body.page-id-738 .et-l.et-l--header,
body.page-id-738 .et-l.et-l--footer,
body.page-id-739 > #page-container > #et-boc > .et-l--header,
body.page-id-739 > #page-container > #et-boc > .et-l--footer,
body.page-id-739 .et-l.et-l--header,
body.page-id-739 .et-l.et-l--footer,
body.page-id-740 > #page-container > #et-boc > .et-l--header,
body.page-id-740 > #page-container > #et-boc > .et-l--footer,
body.page-id-740 .et-l.et-l--header,
body.page-id-740 .et-l.et-l--footer,
body.page-id-741 > #page-container > #et-boc > .et-l--header,
body.page-id-741 > #page-container > #et-boc > .et-l--footer,
body.page-id-741 .et-l.et-l--header,
body.page-id-741 .et-l.et-l--footer,
body.page-id-742 > #page-container > #et-boc > .et-l--header,
body.page-id-742 > #page-container > #et-boc > .et-l--footer,
body.page-id-742 .et-l.et-l--header,
body.page-id-742 .et-l.et-l--footer {
  display: none !important;
  height: 0 !important;
  visibility: hidden !important;
}
body.page-id-738 #et-boc,
body.page-id-739 #et-boc,
body.page-id-740 #et-boc,
body.page-id-741 #et-boc,
body.page-id-742 #et-boc { padding-top: 0 !important; }


/* --- Phase-7 pages (727-730): hide empty Divi TB header/footer + reset
   #et-boc. faq/results/reviews/unions-hub — consistency with other pages. --- */
body.page-id-727 > #page-container > #et-boc > .et-l--header,
body.page-id-727 > #page-container > #et-boc > .et-l--footer,
body.page-id-727 .et-l.et-l--header,
body.page-id-727 .et-l.et-l--footer,
body.page-id-728 > #page-container > #et-boc > .et-l--header,
body.page-id-728 > #page-container > #et-boc > .et-l--footer,
body.page-id-728 .et-l.et-l--header,
body.page-id-728 .et-l.et-l--footer,
body.page-id-729 > #page-container > #et-boc > .et-l--header,
body.page-id-729 > #page-container > #et-boc > .et-l--footer,
body.page-id-729 .et-l.et-l--header,
body.page-id-729 .et-l.et-l--footer,
body.page-id-730 > #page-container > #et-boc > .et-l--header,
body.page-id-730 > #page-container > #et-boc > .et-l--footer,
body.page-id-730 .et-l.et-l--header,
body.page-id-730 .et-l.et-l--footer {
  display: none !important;
  height: 0 !important;
  visibility: hidden !important;
}
body.page-id-727 #et-boc,
body.page-id-728 #et-boc,
body.page-id-729 #et-boc,
body.page-id-730 #et-boc { padding-top: 0 !important; }


/* --- Privacy page (743): hide empty Divi TB header/footer + reset #et-boc. --- */
body.page-id-743 > #page-container > #et-boc > .et-l--header,
body.page-id-743 > #page-container > #et-boc > .et-l--footer,
body.page-id-743 .et-l.et-l--header,
body.page-id-743 .et-l.et-l--footer {
  display: none !important;
  height: 0 !important;
  visibility: hidden !important;
}
body.page-id-743 #et-boc { padding-top: 0 !important; }


/* --- Journal pages (744-748): index + 4 posts. Hide empty Divi TB
   header/footer + reset #et-boc. --- */
body.page-id-744 > #page-container > #et-boc > .et-l--header,
body.page-id-744 > #page-container > #et-boc > .et-l--footer,
body.page-id-744 .et-l.et-l--header,
body.page-id-744 .et-l.et-l--footer,
body.page-id-745 > #page-container > #et-boc > .et-l--header,
body.page-id-745 > #page-container > #et-boc > .et-l--footer,
body.page-id-745 .et-l.et-l--header,
body.page-id-745 .et-l.et-l--footer,
body.page-id-746 > #page-container > #et-boc > .et-l--header,
body.page-id-746 > #page-container > #et-boc > .et-l--footer,
body.page-id-746 .et-l.et-l--header,
body.page-id-746 .et-l.et-l--footer,
body.page-id-747 > #page-container > #et-boc > .et-l--header,
body.page-id-747 > #page-container > #et-boc > .et-l--footer,
body.page-id-747 .et-l.et-l--header,
body.page-id-747 .et-l.et-l--footer,
body.page-id-748 > #page-container > #et-boc > .et-l--header,
body.page-id-748 > #page-container > #et-boc > .et-l--footer,
body.page-id-748 .et-l.et-l--header,
body.page-id-748 .et-l.et-l--footer,
body.page-id-752 > #page-container > #et-boc > .et-l--header,
body.page-id-752 > #page-container > #et-boc > .et-l--footer,
body.page-id-752 .et-l.et-l--header,
body.page-id-752 .et-l.et-l--footer {
  display: none !important;
  height: 0 !important;
  visibility: hidden !important;
}
body.page-id-744 #et-boc,
body.page-id-745 #et-boc,
body.page-id-746 #et-boc,
body.page-id-747 #et-boc,
body.page-id-748 #et-boc { padding-top: 0 !important; }

/* ── "Call YOUR Law Firm" brand tagline ─────────────────────────── */
.site-footer__tagline {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 1.15rem + 1.1vw, 2rem);
  line-height: 1.0;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--c-paper);
  margin: 16px 0 20px;
}
.site-footer__tagline-hl { color: var(--c-gold); }

.site-drawer__tagline {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 1.35rem;
  line-height: 1.05;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--c-paper);
  margin: 0 0 24px;
}
.site-drawer__tagline-hl { color: var(--c-gold); }