/* =====================================================
   Brock & Scott PLLC — v3 (Sunny HQ build)
   Daniel's feedback applied: page-frame striping back,
   slider with slow fade autoplay + slim controls,
   Our Story dark stripes + boxed head, State Coverage
   dropdown to upper-left + stabilized panel depth,
   contact stripes spread, affiliations larger,
   overall vertical spacing trimmed 10-15%.
   ===================================================== */

:root {
  /* OFFICIAL BRAND PALETTE (per B&S guide 05.12.23) */
  --bs-navy:        #003462;
  --bs-burgundy:    #7a0026;
  --bs-black:       #231f20;
  --bs-body-grey:   #545456;
  --bs-light-grey:  #d1d3d4;
  --bs-paper:       #ffffff;

  /* DERIVED UI surface colors (documented as non-palette)
     --bs-navy-deep: darker navy for stripe pattern depth (8.5% darker than #003462)
     --bs-state-grey: cool dark grey sampled from live site State Coverage section
     --bs-footer-bg: cool dark grey sampled from live site footer
     --bs-burgundy-hover: darker burgundy for hover (UI accessibility)
     --bs-cream: warm canvas tint for Practice Areas */
  --bs-navy-deep:      #001f3d;
  --bs-state-grey:     #2a2d31;
  --bs-footer-bg:      #262729;
  --bs-burgundy-hover: #5c001d;
  --bs-cream:          #f5f4f1;
  --bs-pinstripe-grey: #e5e2e1;

  --serif: "Crimson Pro", Georgia, "Times New Roman", serif;
  --sans:  "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --t-h1:       2.875rem;
  --t-h2:       2rem;
  --t-h3:       1.375rem;
  --t-body:     1.0625rem;
  --t-small:    0.9375rem;
  --t-eyebrow:  0.8125rem;

  --max-w: 1280px;
  --gutter: 64px;

  --rule: rgba(0, 52, 98, 0.15);
  --focus-ring: #7a0026;

  /* Light pinstripe matching live site: 1px white + 7px grey = 8px period */
  --pinstripe-light: repeating-linear-gradient(
    to right,
    var(--bs-paper) 0,
    var(--bs-paper) 1px,
    var(--bs-pinstripe-grey) 1px,
    var(--bs-pinstripe-grey) 8px
  );
  /* Dark navy pinstripe for Our Story: 7px navy + 1px dark accent = 8px period */
  --pinstripe-navy: repeating-linear-gradient(
    to right,
    var(--bs-navy) 0,
    var(--bs-navy) 7px,
    var(--bs-navy-deep) 7px,
    var(--bs-navy-deep) 8px
  );
  /* Contact spread pattern: 1px white + 9px grey = 10px period (wider per Daniel) */
  --pinstripe-light-spread: repeating-linear-gradient(
    to right,
    var(--bs-paper) 0,
    var(--bs-paper) 1px,
    var(--bs-pinstripe-grey) 1px,
    var(--bs-pinstripe-grey) 10px
  );
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--bs-black);
  background: var(--bs-paper); /* v6: solid; top striping band removed per Daniel */
}

img, svg { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--bs-navy);
  line-height: 1.15;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }
h4 { font-size: 1.0625rem; font-family: var(--sans); font-weight: 700; }

p { margin: 0 0 1em; }

a { color: var(--bs-burgundy); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
a:hover { color: var(--bs-burgundy-hover); text-decoration-thickness: 2px; }
a:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; border-radius: 2px; }

.skip-link {
  position: absolute; left: 0; top: 0;
  background: var(--bs-navy); color: #fff;
  padding: 8px 16px; text-decoration: none; z-index: 1000;
  transform: translateY(-150%); /* fully hidden until focused, no top-edge bleed */
}
.skip-link:focus { transform: translateY(0); }

.section-stripe { height: 14px; background-image: var(--pinstripe-light); }

/* ===== Top navigation ===== */
.topnav { background: var(--bs-paper); position: relative; }
.topnav__row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 24px var(--gutter);
  max-width: var(--max-w); margin: 0 auto;
}
.topnav__brand img { height: 86px; width: auto; display: block; }
.topnav__brand:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 4px; }

.topnav__list { display: flex; align-items: center; gap: 0; list-style: none; margin: 0; padding: 0; }
.topnav__list > li > a,
.topnav__list > li > button {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 16px;
  color: var(--bs-navy);
  font-family: var(--sans);
  font-size: 1rem; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  text-decoration: none; background: none; border: none;
}
.topnav__list > li > a:hover, .topnav__list > li > button:hover { color: var(--bs-burgundy); }
.topnav__chev { font-size: 0.7rem; transition: transform 150ms ease; }
.topnav__list button[aria-expanded="true"] .topnav__chev { transform: rotate(180deg); }

.mega {
  display: none; position: absolute; top: 100%; left: 0; right: 0;
  background: var(--bs-paper);
  border-top: 1px solid var(--rule);
  border-bottom: 4px solid var(--bs-burgundy);
  z-index: 50; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}
.mega.is-open { display: block; }
.mega__inner {
  display: grid; grid-template-columns: 1fr 2fr; gap: 64px;
  padding: 44px var(--gutter);
  max-width: var(--max-w); margin: 0 auto;
}
.mega__intro h3 { font-size: 1.875rem; margin-bottom: 12px; }
.mega__intro p { color: var(--bs-body-grey); margin-bottom: 16px; font-size: 1.0625rem; }
.mega__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 32px;
}
.mega__list a {
  display: block; padding: 10px 0;
  color: var(--bs-navy); text-decoration: none;
  font-weight: 700; font-size: 1rem;
  border-bottom: 1px solid var(--rule);
}
.mega__list a:hover { color: var(--bs-burgundy); border-bottom-color: var(--bs-burgundy); }
.mega__close-hint {
  padding: 12px var(--gutter);
  background: var(--bs-cream);
  font-size: 0.8125rem; color: var(--bs-body-grey);
  text-align: right; font-family: var(--sans);
  letter-spacing: 0.08em; text-transform: uppercase;
}

/* ===== Header signature stripes ===== */
.header-stripes { background: var(--bs-paper); }
.header-stripes__burgundy { height: 8px; background: var(--bs-burgundy); }
.header-stripes__navy {
  height: 22px;
  background-image: repeating-linear-gradient(
    90deg,
    var(--bs-navy) 0,
    var(--bs-navy) 1px,
    var(--bs-navy-deep) 1px,
    var(--bs-navy-deep) 4px
  );
}

/* ===== Hero slider ===== */
.hero {
  background: var(--pinstripe-light);
  position: relative;
  overflow: hidden;
}
.hero__stage {
  /* Full browser width per v4: photo bleeds edge to edge, content column stays aligned */
  width: 100%;
  margin: 0 auto;
  position: relative;
  height: 432px; /* v6: reduced 20% more per Daniel (540 -> 432) */
}
.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1800ms ease-in-out;
  pointer-events: none;
}
.hero__slide.is-active {
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
}
.hero__photo {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.hero__panel-wrap {
  position: absolute;
  top: 50%;
  left: max(6%, calc((100% - var(--max-w)) / 2 + var(--gutter)));
  transform: translateY(-50%);
  width: 44%;
  max-width: 460px;
  z-index: 3;
  display: flex;
  flex-direction: column;
}
.hero__title--payoff {
  font-size: 3rem; /* v13: matched to single-word slides so the closing line reads as strong, like the live site, without eclipsing them */
  line-height: 1.04;
  padding-top: 20px; padding-bottom: 20px; /* box wraps the three stacked lines tightly */
}
.hero__slide--payoff .hero__panel-wrap { width: auto; }
.hero__title {
  background: rgba(0, 0, 0, 0.82);
  color: #fff;
  font-family: var(--serif);
  font-size: 3rem;
  font-weight: 600;
  font-style: normal; /* v4: italic removed per Daniel, match live site */
  text-transform: uppercase; /* v4: all-caps heads per Daniel */
  letter-spacing: 0.04em;
  margin: 0;
  padding: 18px 24px;
  line-height: 1;
}
.hero__panel {
  background: rgba(51, 51, 51, 0.78);
  color: #fff;
  padding: 22px 24px 24px;
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.55;
  font-weight: 600;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.hero__panel p { margin: 0; }
.hero__cta {
  align-self: flex-start;
  background: var(--bs-burgundy);
  border: 2px solid rgba(190, 186, 185, 0.8);
  color: #fff;
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 10px 22px;
  transition: background 150ms ease, border-color 150ms ease;
}
.hero__cta:hover {
  background: var(--bs-burgundy-hover);
  border-color: #fff;
  color: #fff;
  text-decoration: none;
}
.hero__cta:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

/* Slider controls — lighter weight per Dylan:
   Side arrows on left/right (vertical center), dots at bottom with simple
   play/pause symbol to their right. No box, no backdrop bar. */
.hero__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #fff;
  font-size: 1.75rem;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 10;
  padding: 0;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.65);
  transition: transform 150ms ease, color 150ms ease;
  line-height: 1;
}
.hero__nav:hover { transform: translateY(-50%) scale(1.18); }
.hero__nav:focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 50%; }
.hero__nav--prev { left: 18px; }
.hero__nav--next { right: 18px; }

.hero__controls {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 16px;
}
.hero__dots {
  display: flex;
  align-items: center;
  gap: 9px;
}
.hero__dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  border: none;
  padding: 0;
  cursor: pointer;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
  transition: background 150ms ease, transform 150ms ease;
}
.hero__dot.is-active { background: #fff; }
.hero__dot:hover { background: rgba(255, 255, 255, 0.85); transform: scale(1.2); }
.hero__dot:focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 50%; }

.hero__play {
  background: none;
  border: none;
  color: #fff;
  font-size: 0.8125rem;
  cursor: pointer;
  padding: 4px 6px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
  line-height: 1;
  letter-spacing: 0;
  transition: transform 150ms ease, opacity 150ms ease;
}
.hero__play:hover { transform: scale(1.18); }
.hero__play:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 2px; }

/* Seal — sits on right side of each slide, always in same place */
.hero__seal {
  position: absolute;
  top: 50%;
  right: max(5%, calc((100% - var(--max-w)) / 2 + var(--gutter)));
  transform: translateY(-50%) rotate(-11deg); /* v10: stamped angle, ~11deg CCW per Daniel */
  width: 520px; /* v11: reduced so most of 'SCOTT' reads, matching live site */
  height: auto;
  z-index: 3;
  opacity: 0.96;
  filter: drop-shadow(0 6px 22px rgba(20,22,26,0.95)); /* v10: stronger shadow, real separation off the photo */
}
.hero__seal img { width: 100%; height: auto; display: block; }

/* aria-live announcer (visually hidden) */
.hero__announcer {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ===== Our Story — dark navy stripes, boxed head ===== */
.our-story {
  background-image: var(--pinstripe-navy);
  color: #fff;
}
.our-story__inner {
  max-width: 880px;
  margin: 0 auto;
  padding: 56px var(--gutter); /* v9: tightened per Daniel */
  text-align: center;
}
.our-story h2 {
  font-family: var(--serif);
  font-size: 2rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 32px;
  font-weight: 400;
  text-align: center;
}
/* v4: boxed head with decorative L/R lines returned + box widened so text fits,
   consistent with Contact Us and the other section heads. */
.our-story h2 span {
  display: inline-block;
  padding: 14px 48px 12px; /* widened from 32px so the head breathes */
  background: var(--bs-navy);
  color: #fff;
  position: relative;
}
.our-story h2 span::before, .our-story h2 span::after {
  content: ""; position: absolute; top: 50%;
  width: 64px; height: 1px; background: rgba(255,255,255,0.4);
}
.our-story h2 span::before { right: 100%; margin-right: 18px; }
.our-story h2 span::after { left: 100%; margin-left: 18px; }
.our-story p {
  font-size: 1.125rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.92);
  margin: 0 auto 1em;
  max-width: 64ch;
}

/* ===== State Coverage ===== */
.coverage {
  background: var(--bs-paper); /* v8: light section — far better contrast for the SVG map */
  color: var(--bs-black);
  padding: 52px 0 42px; /* v11: 10px off the bottom per Daniel */
}
.coverage__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.coverage h2 {
  font-family: var(--serif);
  color: var(--bs-navy);
  font-size: 2rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin: 0 0 10px; /* v9: tightened */
  text-align: center;
  font-weight: 400;
}
.coverage h2 span { display: inline-block; padding: 0 28px; position: relative; }
.coverage h2 span::before, .coverage h2 span::after {
  content: ""; position: absolute; top: 50%;
  width: 70px; height: 1px; background: var(--bs-burgundy); opacity: 0.5;
}
.coverage h2 span::before { right: 100%; }
.coverage h2 span::after { left: 100%; }

.coverage__intro {
  text-align: center;
  color: var(--bs-body-grey);
  font-size: 1.0625rem;
  margin: 0 auto 20px; /* v9: halved heading-to-menu gap per Daniel */
  max-width: 56ch;
}

/* v4: live-site pattern. Full-width map as backdrop; the Select-a-State control
   AND the results box stack together as one column laid over the top-left of the map. */
.coverage__layout {
  position: relative;
}
.coverage__map-wrap {
  position: relative;
  background: transparent;
  overflow: hidden;
}
/* v8: SVG US map on a light section. Served states fill navy (the firm's
   footprint, brand-correct and high-contrast); non-served states sit in light
   grey and recede; the selected state highlights in brand burgundy. */
.coverage__map-wrap .usmap {
  width: 100%;
  height: auto;
  display: block;
}
.coverage__map-wrap .usmap .st {
  fill: url(#stateField);  /* v9: subtle 45deg grey->white gradient for depth */
  stroke: none;            /* v9: no white lines around non-served states */
  transition: fill 500ms ease;
}
.coverage__map-wrap .usmap .st.served {
  fill: var(--bs-navy);    /* 22 served states in brand navy — footprint reads strongly */
  stroke: #ffffff;         /* served states keep thin separators so they read individually */
  stroke-width: 1;
}
.coverage__map-wrap .usmap .st.is-selected {
  fill: var(--bs-burgundy); /* selected state highlights in brand burgundy */
}
/* Control + results stacked together, floating over the upper-left of the map */
/* v5: stack moved inward over the working part of the map (per Daniel's annotation),
   off the far-left edge so it reads as the interactive layer, not a margin element. */
.coverage__panel-stack {
  position: absolute;
  top: 28px;
  left: 12%;
  width: min(360px, calc(100% - 56px));
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.coverage__select-overlay {
  width: 100%;
}

/* v7: per-state grow-on-select removed; map now highlights the selected state */

.coverage__select-label {
  display: block;
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bs-navy); /* v8: navy label on light map */
  margin-bottom: 8px;
  font-weight: 700;
}
.coverage__select {
  width: 100%;
  padding: 12px 16px;
  font-family: var(--sans);
  font-size: 1rem;
  background: #ffffff; /* v8: white to match the detail card */
  color: var(--bs-navy);
  font-weight: 600;
  border: 1px solid rgba(0,52,98,0.30);
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23003462' d='M6 8L0 0h12z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 16px center;
  cursor: pointer;
}
.coverage__select:focus-visible { outline: 3px solid var(--bs-navy); outline-offset: 2px; }
.coverage__select option { background: #fff; color: var(--bs-navy); }

/* Detail box floats over the map; solid-ish navy backing keeps text WCAG-readable
   over busy map art. Fixed min-height locks depth so it doesn't jump on state change. */
.coverage__detail {
  background: #ffffff; /* v8: white card reads crisply over the navy/grey SVG map */
  border: 1px solid rgba(0,52,98,0.16);
  padding: 24px 28px;
  min-height: 300px; /* locks panel depth */
  box-shadow: 0 10px 30px rgba(0,31,61,0.22);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.coverage__detail-inner {
  width: 100%;
  transition: opacity 600ms ease;
}
.coverage__detail-inner.is-fading { opacity: 0; }

.coverage__detail-empty { text-align: center; padding: 36px 0; }
.coverage__detail-empty .label {
  font-family: var(--sans);
  font-size: 0.8125rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bs-body-grey);
  margin-bottom: 14px;
  font-weight: 700;
}
.coverage__detail-empty .msg {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.125rem;
  color: var(--bs-navy);
  line-height: 1.5;
  margin: 0 auto;
  max-width: 36ch;
}
.coverage__detail-active .state-name {
  font-family: var(--serif);
  font-size: 1.75rem;
  color: var(--bs-navy);
  margin: 0 0 6px;
}
.coverage__detail-active .meta {
  font-family: var(--sans);
  font-size: 0.8125rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bs-body-grey); /* v5: dark on light panel */
  margin-bottom: 18px;
  font-weight: 700;
}
.coverage__detail-active .offices {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 0 0 20px;
}
.coverage__detail-active .offices.two-col { grid-template-columns: 1fr; gap: 14px; } /* v4: single col inside floating panel */
.coverage__detail-active .office h4 {
  color: var(--bs-navy);
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1rem;
  margin: 0 0 4px;
}
.coverage__detail-active .office p {
  color: #33363b; /* v5: dark on light panel */
  font-size: 0.9375rem;
  margin: 0;
  line-height: 1.5;
}
.coverage__detail-active .attorneys-link {
  display: inline-block;
  margin-top: auto;
  color: var(--bs-burgundy); /* v5: brand accent, strong on light grey panel */
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.coverage__detail-active .attorneys-link:hover { color: var(--bs-navy); }

/* ===== Practice Areas ===== */
.practice { background: var(--bs-cream); padding: 70px 0; } /* v9: slight tighten */
.practice__inner { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter); }
.practice h2 {
  font-family: var(--serif); color: var(--bs-navy);
  font-size: 2rem; letter-spacing: 0.2em;
  text-transform: uppercase; margin: 0 0 44px;
  text-align: center; font-weight: 400;
}
.practice h2 span { display: inline-block; padding: 0 28px; position: relative; }
.practice h2 span::before, .practice h2 span::after {
  content: ""; position: absolute; top: 50%;
  width: 70px; height: 1px; background: rgba(0, 52, 98, 0.3);
}
.practice h2 span::before { right: 100%; }
.practice h2 span::after { left: 100%; }

.practice__grid {
  display: grid; grid-template-columns: 1fr 1fr;
  column-gap: 56px; max-width: 1000px; margin: 0 auto;
}
.practice__item { border-bottom: 1px solid rgba(0, 52, 98, 0.18); }
.practice__item button {
  width: 100%; display: flex; align-items: center; gap: 18px;
  padding: 18px 8px;
  background: none; border: none; text-align: left;
  font-family: var(--sans); font-size: 1.0625rem;
  font-weight: 700; color: var(--bs-navy);
}
.practice__item button:hover { color: var(--bs-burgundy); }
.practice__item button:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: -3px; }
.practice__chev {
  flex-shrink: 0; width: 24px; height: 24px;
  border-radius: 50%; background: var(--bs-burgundy); color: #fff;
  display: grid; place-items: center;
  font-size: 0.75rem; transition: transform 200ms ease;
}
.practice__item button[aria-expanded="true"] .practice__chev { transform: rotate(90deg); }
.practice__panel {
  padding: 0 8px 18px 50px; display: none;
  color: var(--bs-body-grey);
  font-size: 1rem; line-height: 1.6;
}
.practice__item button[aria-expanded="true"] + .practice__panel { display: block; }
.practice__panel a {
  display: inline-block; margin-top: 8px;
  font-family: var(--sans); font-weight: 700;
  font-size: 0.9375rem;
  text-decoration: underline; text-underline-offset: 3px;
}

/* ===== Newsroom ===== */
.newsroom { background: var(--bs-paper); padding: 70px 0; } /* v9: slight tighten */
.newsroom__inner { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter); }
.newsroom h2 {
  font-family: var(--serif); color: var(--bs-burgundy);
  font-size: 2rem; letter-spacing: 0.2em;
  text-transform: uppercase; margin: 0 0 44px;
  text-align: center; font-weight: 400;
}
.newsroom h2 span { display: inline-block; padding: 0 28px; position: relative; }
.newsroom h2 span::before, .newsroom h2 span::after {
  content: ""; position: absolute; top: 50%;
  width: 70px; height: 1px; background: rgba(122, 0, 38, 0.35);
}
.newsroom h2 span::before { right: 100%; }
.newsroom h2 span::after { left: 100%; }

.newsroom__grid { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 48px; }
.newsroom__feature { display: flex; flex-direction: column; align-items: flex-start; }
.newsroom__feature img { width: 100%; }
.newsroom__feature h3 {
  color: var(--bs-burgundy);
  font-family: var(--sans); font-size: 1.0625rem;
  font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; line-height: 1.4; margin: 0;
}
.newsroom__feature h3 a { color: var(--bs-burgundy); text-decoration: none; }
.newsroom__feature h3 a:hover { text-decoration: underline; text-underline-offset: 3px; }

.newsroom__col-label {
  font-family: var(--sans); font-size: 0.9375rem;
  font-weight: 700; color: var(--bs-body-grey);
  letter-spacing: 0.12em; text-transform: uppercase;
  margin: 0 0 20px; padding-bottom: 12px;
  border-bottom: 1px solid var(--rule);
}
.newsroom__item { padding: 14px 0; border-bottom: 1px solid var(--rule); }
.newsroom__item:last-child { border-bottom: none; }
.newsroom__item h3 {
  font-family: var(--sans); font-size: 1.0625rem;
  font-weight: 700; line-height: 1.4;
  margin: 0 0 8px;
  text-transform: uppercase; letter-spacing: 0.02em;
}
.newsroom__item h3 a { color: var(--bs-burgundy); text-decoration: none; }
.newsroom__item h3 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.newsroom__item p {
  font-size: 0.9375rem; color: var(--bs-body-grey);
  line-height: 1.5; margin: 0;
}

.events__item { padding: 14px 0; border-bottom: 1px solid var(--rule); }
.events__item:last-child { border-bottom: none; }
.events__date {
  font-family: var(--sans); font-size: 0.9375rem;
  font-weight: 700; color: var(--bs-navy);
  margin-bottom: 4px;
}
.events__name {
  font-family: var(--sans); font-size: 1rem;
  font-weight: 700; color: var(--bs-burgundy);
  margin: 0 0 4px;
  text-transform: uppercase; letter-spacing: 0.02em;
}
.events__attending {
  font-size: 0.9375rem; color: var(--bs-body-grey); margin: 0;
}

/* ===== Contact — wider stripe spacing per Daniel ===== */
.contact {
  background-image: var(--pinstripe-light-spread);
  padding: 56px 0; /* v9: slight tighten */
}
.contact__inner { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter); }
.contact h2 {
  font-family: var(--serif); color: var(--bs-burgundy);
  font-size: 2rem; letter-spacing: 0.2em;
  text-transform: uppercase; margin: 0 0 36px;
  text-align: center; font-weight: 400;
}
/* v4: boxed head with decorative L/R lines + widened box, consistent with Our Story */
.contact h2 span {
  display: inline-block; padding: 8px 48px;
  position: relative; background: var(--bs-paper);
}
.contact h2 span::before, .contact h2 span::after {
  content: ""; position: absolute; top: 50%;
  width: 64px; height: 1px; background: var(--bs-burgundy); opacity: 0.5;
}
.contact h2 span::before { right: 100%; margin-right: 18px; }
.contact h2 span::after { left: 100%; margin-left: 18px; }

.contact__tiles {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.contact__tile {
  background: var(--bs-paper);
  padding: 32px 20px;
  text-align: center;
  text-decoration: none;
  color: var(--bs-navy);
  border: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 170px;
  transition: border-color 150ms ease, transform 150ms ease;
}
.contact__tile:hover {
  border-color: var(--bs-burgundy);
  transform: translateY(-2px);
  color: var(--bs-navy);
  text-decoration: none;
}
.contact__tile:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.contact__tile h3 {
  font-family: var(--sans); color: var(--bs-navy);
  font-size: 0.9375rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  line-height: 1.3; margin: 0 0 20px;
}
.contact__tile-plus {
  width: 44px; height: 44px; border-radius: 50%;
  border: 2px solid var(--bs-burgundy);
  color: var(--bs-burgundy);
  display: grid; place-items: center;
  font-size: 1.5rem; font-weight: 400; line-height: 1;
  transition: background 150ms ease, color 150ms ease;
}
.contact__tile:hover .contact__tile-plus { background: var(--bs-burgundy); color: #fff; }

/* ===== Affiliations — individual logos at proper size per Daniel ===== */
.affiliations { background: var(--bs-paper); padding: 14px 0; } /* v10: jammed tight per Daniel — strict top/bottom reduction */
.affiliations__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.affiliations__row {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 48px;
  flex-wrap: wrap;
  max-width: 1100px;
  margin: 0 auto;
}
.affiliations__row a {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.affiliations__row a:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 6px;
  border-radius: 2px;
}
.affiliations__logo {
  width: 180px;
  height: auto;
  display: block;
  transition: opacity 150ms ease;
}
.affiliations__row a:hover .affiliations__logo { opacity: 0.85; }

@media (max-width: 768px) {
  .affiliations__row { gap: 28px; }
  .affiliations__logo { width: 140px; }
}

/* ===== Footer ===== */
.footer {
  background: var(--bs-footer-bg);
  color: rgba(255,255,255,0.75);
  padding: 52px 0 30px;
}
.footer__inner {
  max-width: var(--max-w); margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1fr 1fr 2fr auto;
  gap: 44px; align-items: start;
}
.footer h4, .footer .footer__h {
  font-family: var(--sans); color: #fff;
  font-size: 0.8125rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  margin: 0 0 16px;
}
.footer address {
  font-style: normal; font-size: 0.9375rem;
  line-height: 1.7; color: rgba(255,255,255,0.78);
}
.footer address a {
  color: rgba(255,255,255,0.9);
  font-size: 0.8125rem;
  text-transform: uppercase; letter-spacing: 0.08em;
  font-weight: 700; text-decoration: none;
}
.footer address a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.footer__links { list-style: none; margin: 0; padding: 0; line-height: 2; }

/* v6: Firm Profile card — building image with dark overlay, white seal,
   white title + rule, burgundy CTA. Compact depth per Daniel ("too deep"). */
.firm-profile {
  position: relative;
  display: block; /* v12: building is a full-height layer, text anchors top-left */
  margin-top: 18px;
  height: 118px;
  border-radius: 2px;
  overflow: hidden;
  text-decoration: none;
  background: var(--bs-navy); /* solid blue field per PDF */
}
.firm-profile__building {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 50%; height: 100%; /* v12: full-bleed top-to-bottom on the right, matches his graphic */
  object-fit: cover;
  object-position: center;
}
.firm-profile__content {
  position: relative;
  z-index: 2;
  display: flex; flex-direction: column; align-items: flex-start;
  justify-content: flex-start; /* v12: stacked tight in the UPPER-LEFT, not centered (kills the "swim") */
  gap: 7px;
  padding: 16px 0 0 18px;
  width: 52%;
}
.firm-profile__title {
  font-family: var(--serif); /* white serif per PDF */
  font-weight: 700;
  font-size: 1.05rem; letter-spacing: 0.04em; color: #fff; line-height: 1;
  text-transform: uppercase;
}
.firm-profile__rule {
  display: block; width: 100px; height: 2px; background: #fff; /* short rule under the title */
}
.firm-profile__cta {
  font-family: var(--sans); font-weight: 700;
  font-size: 0.64rem; letter-spacing: 0.07em; color: #fff;
  background: var(--bs-burgundy); padding: 6px 12px; border-radius: 1px;
}
.firm-profile:hover .firm-profile__cta { background: var(--bs-burgundy-hover); }
.firm-profile:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
.footer__links a {
  color: rgba(255,255,255,0.78);
  text-decoration: none;
  text-transform: uppercase; letter-spacing: 0.08em;
  font-size: 0.8125rem; font-weight: 700;
}
.footer__links a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.footer__disclaimer p {
  font-size: 0.875rem; color: rgba(255,255,255,0.65);
  line-height: 1.65; margin: 0 0 12px;
}
.footer__social a {
  display: inline-grid; place-items: center;
  width: 44px; height: 44px;
  background: #fff; color: var(--bs-navy);
  border-radius: 50%;
  text-decoration: none;
  font-weight: 900; font-family: var(--sans);
  font-size: 1rem;
}
.footer__social a:hover { background: var(--bs-burgundy); color: #fff; }

.footer__bottom {
  max-width: var(--max-w); margin: 30px auto 0;
  padding: 16px var(--gutter) 0;
  border-top: 1px solid rgba(255,255,255,0.12);
  display: flex; justify-content: space-between;
  font-size: 0.8125rem; color: rgba(255,255,255,0.55);
}

/* ===== Responsive ===== */
@media (max-width: 1024px) {
  :root { --gutter: 32px; }
  .hero__stage { height: 540px; }
  .hero__panel-wrap { width: 70%; max-width: none; left: 5%; }
  .hero__controls { width: 70%; max-width: none; left: 5%; }
  .hero__seal { width: 240px; right: 4%; opacity: 0.6; }
  /* v4: tablet — panel stack stays over the map but a touch narrower */
  .coverage__panel-stack { width: min(320px, calc(100% - 40px)); top: 20px; left: 20px; }
  .coverage__detail { min-height: 260px; }
  .newsroom__grid { grid-template-columns: 1fr; gap: 32px; }
  .contact__tiles { grid-template-columns: 1fr 1fr; }
  .footer__inner { grid-template-columns: 1fr 1fr; gap: 28px; }
  .practice__grid { grid-template-columns: 1fr; max-width: 600px; }
  .mega__inner { grid-template-columns: 1fr; gap: 24px; padding: 24px var(--gutter); }
  .mega__list { grid-template-columns: 1fr 1fr; }
  .topnav__list { display: none; }
}

@media (max-width: 640px) {
  :root { --gutter: 20px; }
  .hero__stage { height: 460px; }
  .hero__title { font-size: 2rem; padding: 14px 18px; }
  .hero__title--payoff { font-size: 1.6rem; padding-top: 14px; padding-bottom: 14px; } /* v13: scaled for mobile */
  .hero__panel { padding: 16px 18px; font-size: 1rem; min-height: 160px; }
  .hero__seal { display: none; }
  .topnav__brand img { height: 64px; }
  /* v4: mobile — stop floating the panel over the map; stack it below for usability */
  .coverage__map-wrap { display: flex; flex-direction: column; }
  .coverage__panel-stack { position: static; width: 100%; top: auto; left: auto; margin-top: 16px; }
  .coverage__detail { min-height: 0; }
  .contact__tiles { grid-template-columns: 1fr; }
  .footer__inner { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  /* Slider auto-pauses for reduced-motion users via JS */
}
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ============ Mobile navigation v2 (hamburger + slide-over practice panel) ============ */
.topnav__burger { display: none; background: none; border: 0; padding: 10px; cursor: pointer; margin-left: auto; }
.topnav__burger:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.topnav__burger svg { display: block; width: 30px; height: 30px; }
.topnav__burger .bar { fill: var(--bs-navy); }
.topnav.nav-open .topnav__burger .bar--mid { opacity: 0; }
.mnav-practice { display: none; }
@media (max-width: 1024px) {
  .topnav__burger { display: block; }
  .topnav.nav-open .topnav__list {
    display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--bs-paper);
    border-top: 1px solid rgba(0,52,98,0.2);
    border-bottom: 4px solid var(--bs-burgundy);
    box-shadow: 0 14px 28px rgba(0,31,61,0.18);
    z-index: 70;
  }
  .topnav.nav-open .topnav__list > li { width: 100%; border-bottom: 1px solid rgba(0,52,98,0.12); }
  .topnav.nav-open .topnav__list > li > a,
  .topnav.nav-open .topnav__list > li > button {
    width: 100%; padding: 16px var(--gutter);
    justify-content: space-between; box-sizing: border-box;
  }
  .topnav.nav-open .topnav__list a[aria-current="page"] {
    border-left: 4px solid var(--bs-burgundy); background: var(--bs-cream);
  }
  /* Careers + Contact: quieter side-by-side bottom row */
  .topnav.nav-open .topnav__list > li.nav-secondary { width: 50%; background: var(--bs-cream); border-bottom: 0; }
  .topnav.nav-open .topnav__list > li.nav-secondary > a {
    justify-content: center; font-size: 0.875rem; letter-spacing: 0.06em; padding: 15px 10px;
  }
  .topnav.nav-open .topnav__list > li.nav-secondary + li.nav-secondary { border-left: 1px solid rgba(0,52,98,0.16); }
  /* Practice Areas slide-over panel */
  .topnav.nav-open.practice-open .topnav__list { visibility: hidden; }
  .topnav.nav-open.practice-open .mnav-practice:not([hidden]) {
    display: block; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--bs-paper); z-index: 75;
    border-top: 1px solid rgba(0,52,98,0.2);
    border-bottom: 4px solid var(--bs-burgundy);
    box-shadow: 0 14px 28px rgba(0,31,61,0.18);
    animation: mnavSlide 200ms ease;
  }
  .mnav-back {
    display: block; width: 100%; text-align: left;
    background: var(--bs-cream); border: 0; border-bottom: 1px solid rgba(0,52,98,0.16);
    font-family: var(--sans); font-size: 1rem; font-weight: 700; color: var(--bs-navy);
    padding: 14px var(--gutter); cursor: pointer;
  }
  .mnav-back:hover { color: var(--bs-burgundy); }
  .mnav-back:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: -3px; }
  .mnav-title {
    font-family: var(--serif); font-size: 1.0625rem; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--bs-navy); margin: 0; padding: 14px var(--gutter) 10px;
    border-bottom: 2px solid var(--bs-burgundy);
  }
  .mnav-list { list-style: none; margin: 0; padding: 0; }
  .mnav-list li { border-bottom: 1px solid rgba(0,52,98,0.12); }
  .mnav-list li:last-child { border-bottom: 0; }
  .mnav-list a {
    display: block; padding: 14px var(--gutter);
    font-family: var(--sans); font-size: 0.9375rem; font-weight: 700;
    color: var(--bs-navy); text-decoration: none;
  }
  .mnav-list a:hover { color: var(--bs-burgundy); background: var(--bs-cream); }
  .mnav-list a:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: -3px; }
}
@keyframes mnavSlide { from { transform: translateX(36px); opacity: 0; } to { transform: none; opacity: 1; } }
/* ============================================================
   ABOUT THE FIRM — interior page (v1)
   Carries the approved v13 design language into the interior
   sidebar-page shell. This shell is the template for all
   sidebar-variant interior pages.
   ============================================================ */

/* --- Page title band. Pinstripe navy (Our Story language).
       Built photo-ready: drop a bg image + navy overlay here when
       Daniel confirms the About header image. --- */
.page-hero {
  background-image: var(--pinstripe-navy);
  padding: 44px var(--gutter) 40px;
  text-align: center;
}
.page-hero h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--t-h1);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  margin: 0;
}

/* --- Interior two-column grid: content + sidebar --- */
.interior { background: var(--bs-paper); }
.interior__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 56px var(--gutter) 64px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 56px;
  align-items: start;
}
@media (max-width: 1024px) {
  .interior__inner { grid-template-columns: 1fr; gap: 48px; }
}

/* --- Seal icon, converted from PDF art to HTML. Decorative. --- */
.about-seal {
  width: 150px; height: 150px;
  margin: 0 auto 30px;
  border-radius: 50%;
  background: var(--bs-navy);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 31, 61, 0.25);
}
.about-seal img { width: 104px; height: auto; display: block; }

/* --- Intro --- */
.about-intro {
  font-family: var(--serif);
  font-size: 1.3125rem;
  line-height: 1.6;
  color: var(--bs-black);
  text-align: center;
  max-width: 62ch;
  margin: 0 auto 52px;
}

/* --- Three-panel piece (replaces Slider Revolution; in-page, responsive) --- */
.about-panel { margin: 0 0 46px; }
.about-panel:last-of-type { margin-bottom: 54px; }
.about-panel__photo {
  width: 100%; height: 300px;
  object-fit: cover; display: block;
}
.about-panel h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bs-navy);
  margin: 22px 0 0;
}
.about-panel__rule {
  width: 56px; height: 3px;
  background: var(--bs-burgundy);
  margin: 12px 0 14px;
}
.about-panel p {
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.7;
  color: var(--bs-black);
  margin: 0;
  max-width: 70ch;
}
@media (max-width: 640px) {
  .about-panel__photo { height: 220px; }
  .about-panel h2 { font-size: 1.5rem; }
}

/* --- Regional Footprint: reuses the approved coverage map component,
       forced into stacked mode inside the content column. --- */
.about-footprint h2 {
  font-family: var(--serif);
  color: var(--bs-navy);
  font-size: 1.875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 8px;
  text-align: center;
  font-weight: 400;
}
.about-footprint .coverage__intro-line {
  font-family: var(--sans);
  font-size: var(--t-small);
  color: var(--bs-body-grey);
  text-align: center;
  margin: 0 0 26px;
}
.about-footprint .coverage__panel-stack {
  position: static;
  width: 100%;
  margin: 20px 0 0;
}
.about-footprint .coverage__detail { min-height: 0; }
.about-footprint .coverage__detail-active .offices.two-col {
  grid-template-columns: 1fr 1fr; gap: 16px;
}
@media (max-width: 640px) {
  .about-footprint .coverage__detail-active .offices.two-col { grid-template-columns: 1fr; }
}

/* --- Sidebar --- */
.sidebar { display: flex; flex-direction: column; gap: 36px; }
.sidebar__block h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.25rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bs-navy);
  border-bottom: 2px solid var(--bs-navy);
  padding: 0 0 10px;
  margin: 0 0 20px;
}
.principal { margin: 0 0 26px; }
.principal__photo {
  width: 100%;
  aspect-ratio: 3 / 4;
  background: linear-gradient(160deg, #eceded 0%, #dfe1e3 100%);
  border: 1px solid var(--rule);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 10px;
  margin-bottom: 12px;
}
.principal__photo svg { width: 84px; height: 84px; opacity: 0.55; }
.principal__photo .pending {
  font-family: var(--sans);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bs-body-grey);
}
.principal__name {
  font-family: var(--serif);
  font-size: 1.25rem;
  color: var(--bs-navy);
  text-decoration: none;
  font-weight: 600;
  display: inline-block;
}
.principal__name:hover { color: var(--bs-burgundy); text-decoration: underline; text-underline-offset: 3px; }
.principal__title {
  font-family: var(--sans);
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bs-body-grey);
  margin: 4px 0 2px;
}
.principal__phone {
  font-family: var(--sans);
  font-size: var(--t-small);
  color: var(--bs-black);
  text-decoration: none;
}
.principal__phone:hover { color: var(--bs-burgundy); }
.sidebar__cta {
  display: block;
  background: var(--bs-burgundy);
  color: #fff;
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  padding: 13px 20px;
  transition: background 150ms ease;
}
.sidebar__cta:hover { background: var(--bs-burgundy-hover); }
.event { margin: 0 0 18px; }
.event__date {
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bs-burgundy);
  margin: 0 0 2px;
}
.event__name {
  font-family: var(--sans);
  font-size: var(--t-small);
  color: var(--bs-black);
  margin: 0;
  line-height: 1.45;
}
.sidebar__more {
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--bs-burgundy);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.sidebar__more:hover { color: var(--bs-navy); }
.sidenews { margin: 0 0 20px; }
.sidenews__title {
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.4;
  color: var(--bs-navy);
  text-decoration: none;
  font-weight: 600;
  display: inline-block;
}
.sidenews__title:hover { color: var(--bs-burgundy); text-decoration: underline; text-underline-offset: 3px; }
.sidenews__date {
  font-family: var(--sans);
  font-size: 0.8125rem;
  color: var(--bs-body-grey);
  margin: 4px 0 0;
}

/* Focus visibility on new interactive elements (AA) */
.principal__name:focus-visible, .principal__phone:focus-visible,
.sidebar__cta:focus-visible, .sidebar__more:focus-visible,
.sidenews__title:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}


/* Sidebar full-width (tablet/mobile): principals flow as a grid, not a long stack */
@media (max-width: 1024px) {
  .sidebar__block--people {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 26px;
    align-items: start;
  }
  .sidebar__block--people h3,
  .sidebar__block--people .sidebar__cta { grid-column: 1 / -1; }
  .sidebar__block--people h3 { margin-bottom: 0; }
  .principal { margin-bottom: 0; }
}

/* ============================================================
   SITE SET — shared interior components (v1)
   ============================================================ */

/* Long page titles must wrap cleanly on small screens */
@media (max-width: 640px) {
  .page-hero h1 { font-size: 1.625rem; letter-spacing: 0.1em; overflow-wrap: break-word; }
}
@media (min-width: 641px) and (max-width: 900px) {
  .page-hero h1 { font-size: 2.125rem; }
}

/* Image placeholder blocks (assets pending from client) */
.ph-image {
  background: repeating-linear-gradient(45deg, #eceded 0 14px, #e2e4e6 14px 28px);
  border: 1px dashed #b7bbbf;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
}
.ph-image .ph-label {
  font-family: var(--sans); font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--bs-body-grey); background: rgba(255,255,255,0.85);
  padding: 8px 16px;
}
.pa-header-image { height: 260px; }
img.pa-header-image { object-fit: cover; width: 100%; display: block; border: 0; }
@media (max-width: 640px) { .pa-header-image { height: 160px; } }

/* Generic interior copy */
.copy p { font-family: var(--sans); font-size: var(--t-body); line-height: 1.7;
  color: var(--bs-black); margin: 0 0 18px; max-width: 72ch; }
.copy h2 { font-family: var(--serif); font-weight: 400; font-size: 1.75rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--bs-navy); margin: 34px 0 6px; }
.copy .h-rule { width: 56px; height: 3px; background: var(--bs-burgundy); margin: 10px 0 18px; }

/* Service checklist */
.svc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 32px;
  margin: 0 0 30px; padding: 0; list-style: none; }
@media (max-width: 640px) { .svc-grid { grid-template-columns: 1fr; } }
.svc-grid li { font-family: var(--sans); font-size: var(--t-body); color: var(--bs-black);
  padding: 8px 0 8px 26px; position: relative; border-bottom: 1px solid var(--rule); }
.svc-grid li::before { content: ""; position: absolute; left: 0; top: 15px;
  width: 10px; height: 10px; background: var(--bs-burgundy); }

/* Callout cards */
.callout { border: 1px solid var(--rule); border-left: 5px solid var(--bs-burgundy);
  padding: 26px 30px; margin: 0 0 26px; background: var(--bs-cream); }
.callout h3 { font-family: var(--serif); font-weight: 600; font-size: 1.3125rem;
  color: var(--bs-navy); margin: 0 0 8px; }
.callout p { font-family: var(--sans); font-size: var(--t-small); line-height: 1.6;
  color: var(--bs-black); margin: 0 0 16px; }
.btn-burgundy { display: inline-block; background: var(--bs-burgundy); color: #fff;
  font-family: var(--sans); font-size: 0.875rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; text-decoration: none; padding: 12px 24px;
  transition: background 150ms ease; }
.btn-burgundy:hover { background: var(--bs-burgundy-hover); }
.btn-burgundy:focus-visible, .btn-navy:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.btn-navy { display: inline-block; background: var(--bs-navy); color: #fff;
  font-family: var(--sans); font-size: 0.875rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; text-decoration: none; padding: 12px 24px;
  transition: background 150ms ease; }
.btn-navy:hover { background: var(--bs-navy-deep); }

/* Sidebar practice-areas nav */
.pa-nav { list-style: none; margin: 0; padding: 0; }
.pa-nav li { border-bottom: 1px solid var(--rule); }
.pa-nav a { display: block; padding: 11px 4px; font-family: var(--sans);
  font-size: var(--t-small); color: var(--bs-navy); text-decoration: none; }
.pa-nav a:hover { color: var(--bs-burgundy); background: var(--bs-cream); }
.pa-nav a[aria-current="page"] { font-weight: 700; border-left: 4px solid var(--bs-burgundy); padding-left: 10px; }
.pa-nav a:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: -3px; }

/* Sectional bands */
.band { padding: 60px var(--gutter); }
.band__inner { max-width: var(--max-w); margin: 0 auto; }
.band--narrow .band__inner { max-width: 880px; text-align: center; }
.band--cream { background: var(--bs-cream); }
.band--pinstripe { background-image: var(--pinstripe-navy); color: #fff; }
.band h2 { font-family: var(--serif); font-weight: 400; font-size: 1.875rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--bs-navy);
  text-align: center; margin: 0 0 8px; }
.band--pinstripe h2 { color: #fff; }
.band .band-rule { width: 56px; height: 3px; background: var(--bs-burgundy); margin: 0 auto 26px; }
.band--pinstripe .band-rule { background: #fff; }
.band p.lede { font-family: var(--sans); font-size: var(--t-body); line-height: 1.75;
  color: var(--bs-black); margin: 0 auto 14px; max-width: 76ch; }
.band--pinstripe p.lede { color: #fff; }
.claims { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px; margin: 26px 0 0; padding: 0; list-style: none; }
.claims li { background: var(--bs-paper); border: 1px solid var(--rule);
  border-top: 4px solid var(--bs-navy); padding: 18px 20px; font-family: var(--sans);
  font-size: var(--t-small); font-weight: 700; color: var(--bs-navy); text-align: center; }
.divinfo { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 26px; margin-top: 30px; text-align: center; }
.divinfo h3 { font-family: var(--sans); font-size: 0.8125rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.75); margin: 0 0 6px; }
.divinfo p { font-family: var(--sans); font-size: var(--t-small); color: #fff; margin: 0; line-height: 1.6; }
.divinfo a { color: #fff; }
.divinfo a:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* Leadership horizontal row (sectional variant) */
.leads { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 30px; margin-top: 30px; }
.leads .principal { margin: 0; text-align: center; }
.leads .principal__photo { max-width: 220px; margin: 0 auto 12px; }

/* People filter + grid */
.people-bar { display: flex; flex-wrap: wrap; gap: 18px; align-items: end;
  justify-content: space-between; margin: 0 0 30px; padding-bottom: 20px;
  border-bottom: 2px solid var(--bs-navy); }
.people-bar label { display: block; font-family: var(--sans); font-size: 0.8125rem;
  font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--bs-navy); margin-bottom: 8px; }
.people-bar select { font-family: var(--sans); font-size: 1rem; padding: 10px 14px;
  border: 1px solid var(--bs-navy); background: #fff; color: var(--bs-black); min-width: 260px; }
.people-bar select:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.people-count { font-family: var(--sans); font-size: var(--t-small); font-weight: 700;
  color: var(--bs-body-grey); letter-spacing: 0.06em; text-transform: uppercase; }
.people-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 26px; }
.person-card { border: 1px solid var(--rule); border-top: 4px solid var(--bs-navy);
  padding: 26px 22px; text-align: center; background: var(--bs-paper); }
.person-card .initials { width: 84px; height: 84px; border-radius: 50%;
  background: var(--bs-navy); color: #fff; font-family: var(--serif); font-size: 1.75rem;
  display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; }
.person-card h3 { margin: 0 0 2px; font-size: 1.1875rem; }
.person-card h3 a { font-family: var(--serif); color: var(--bs-navy); text-decoration: none; font-weight: 600; }
.person-card h3 a:hover { color: var(--bs-burgundy); text-decoration: underline; text-underline-offset: 3px; }
.person-card h3 a:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.person-card .role { font-family: var(--sans); font-size: 0.75rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--bs-body-grey); margin: 0 0 10px; }
.person-card .meta { font-family: var(--sans); font-size: 0.875rem; color: var(--bs-black);
  margin: 0 0 4px; }
.person-card .vc { font-family: var(--sans); font-size: 0.8125rem; font-weight: 700;
  color: var(--bs-burgundy); text-decoration: underline; text-underline-offset: 3px; }
.person-card .vc:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.person-card[hidden] { display: none; }

/* Newsroom cards */
.news-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; }
@media (max-width: 1024px) { .news-grid { grid-template-columns: 1fr; } }
.news-card { border: 1px solid var(--rule); background: var(--bs-paper);
  display: flex; flex-direction: column; }
.news-card .ph-image { aspect-ratio: 1280 / 520; border: 0; border-bottom: 1px solid var(--rule); }
.news-card__body { padding: 22px 26px 26px; }
.news-card .cat { font-family: var(--sans); font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--bs-burgundy); margin: 0 0 8px; }
.news-card h3 { margin: 0 0 6px; font-size: 1.3125rem; line-height: 1.35; }
.news-card h3 a { font-family: var(--serif); color: var(--bs-navy); text-decoration: none; font-weight: 600; }
.news-card h3 a:hover { color: var(--bs-burgundy); text-decoration: underline; text-underline-offset: 3px; }
.news-card h3 a:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.news-card .date { font-family: var(--sans); font-size: 0.8125rem; color: var(--bs-body-grey); margin: 0 0 12px; }
.news-card .excerpt { font-family: var(--sans); font-size: var(--t-small); line-height: 1.6;
  color: var(--bs-black); margin: 0; }

/* Forms (static preview of Ninja Forms builds) */
.bs-form { max-width: 760px; }
.bs-form fieldset { border: 1px solid var(--rule); padding: 24px 28px; margin: 0 0 26px; }
.bs-form legend { font-family: var(--serif); font-size: 1.1875rem; color: var(--bs-navy);
  font-weight: 600; padding: 0 10px; }
.bs-form label { display: block; font-family: var(--sans); font-size: 0.875rem;
  font-weight: 700; color: var(--bs-black); margin: 0 0 6px; }
.bs-form .req { color: var(--bs-burgundy); }
.bs-form input[type="text"], .bs-form input[type="email"], .bs-form input[type="tel"],
.bs-form textarea, .bs-form select { width: 100%; box-sizing: border-box;
  font-family: var(--sans); font-size: 1rem; padding: 10px 12px; margin: 0 0 18px;
  border: 1px solid #9aa0a6; background: #fff; color: var(--bs-black); }
.bs-form input:focus-visible, .bs-form textarea:focus-visible, .bs-form select:focus-visible,
.bs-form input[type="radio"]:focus-visible, .bs-form input[type="checkbox"]:focus-visible {
  outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.bs-form .choice { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
.bs-form .choice label { margin: 0; font-weight: 400; }
.form-note { font-family: var(--sans); font-size: 0.8125rem; color: var(--bs-body-grey);
  font-style: italic; margin: 0 0 22px; }

/* Data table (foreclosure sales) */
.bs-table { width: 100%; border-collapse: collapse; margin: 0 0 14px; }
.bs-table caption { text-align: left; font-family: var(--sans); font-size: 0.8125rem;
  color: var(--bs-body-grey); padding: 0 0 10px; }
.bs-table th { background: var(--bs-navy); color: #fff; font-family: var(--sans);
  font-size: 0.8125rem; letter-spacing: 0.1em; text-transform: uppercase;
  text-align: left; padding: 12px 14px; }
.bs-table td { font-family: var(--sans); font-size: var(--t-small); color: var(--bs-black);
  padding: 12px 14px; border-bottom: 1px solid var(--rule); }
.bs-table tbody tr:nth-child(even) { background: var(--bs-cream); }

/* Bio */
.bio-head { border-bottom: 2px solid var(--bs-navy); padding-bottom: 18px; margin-bottom: 26px; }
.bio-head .role-line { font-family: var(--sans); font-size: 0.875rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--bs-burgundy); font-weight: 700; margin: 0 0 6px; }
.bio-head .contact-line { font-family: var(--sans); font-size: var(--t-small);
  color: var(--bs-body-grey); margin: 0; }
.bio-head .contact-line a { color: var(--bs-navy); }
.sidebar .initials-lg { width: 140px; height: 140px; border-radius: 50%;
  background: var(--bs-navy); color: #fff; font-family: var(--serif); font-size: 2.75rem;
  display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
.sidebar .contact-card { border: 1px solid var(--rule); border-top: 4px solid var(--bs-burgundy);
  padding: 20px 22px; font-family: var(--sans); font-size: var(--t-small);
  color: var(--bs-black); line-height: 1.7; }
.sidebar .contact-card a { color: var(--bs-navy); }

/* ============================================================
   V2 REVISIONS — client review round 1 (Daniel mockup + Steve comments)
   ============================================================ */

/* FIX: button text was inheriting navy from .sidebar .contact-card a (Steve) */
.sidebar .contact-card a.btn-navy, .sidebar .contact-card a.btn-burgundy { color: #fff; }

/* Compact page title band per mockup */
.page-hero { padding: 26px var(--gutter) 24px; }

/* Vertical Firm Profile card, floated left of the About intro (replaces seal) */
.fp-card {
  float: left; width: 150px; margin: 6px 28px 12px 0;
  background: var(--bs-navy); text-decoration: none; display: block;
  box-shadow: 0 3px 10px rgba(0,31,61,0.25);
}
.fp-card img { width: 100%; height: 96px; object-fit: cover; display: block; }
.fp-card .fp-card__label {
  font-family: var(--serif); color: #fff; font-size: 1.125rem; letter-spacing: 0.06em;
  text-align: center; padding: 12px 10px 8px; display: block; line-height: 1.25;
}
.fp-card .fp-card__rule { width: 34px; height: 2px; background: #fff; margin: 0 auto 10px; }
.fp-card .fp-card__btn {
  display: block; background: var(--bs-burgundy); color: #fff; text-align: center;
  font-family: var(--sans); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.1em;
  padding: 9px 6px; margin: 0 12px 14px; text-transform: uppercase;
}
.fp-card:hover .fp-card__btn { background: var(--bs-burgundy-hover); }
.fp-card:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
@media (max-width: 640px) { .fp-card { float: none; margin: 0 auto 22px; } }

/* About intro: left-aligned with wrap around the card, per mockup */
.about-intro--wrap {
  font-family: var(--serif); font-size: 1.1875rem; line-height: 1.65;
  color: var(--bs-black); text-align: left; max-width: none; margin: 0 0 44px;
}
.about-intro-clear { clear: both; }

/* Three-panel piece: three columns per mockup (portrait crops, heading+rule+text below) */
.about-panels-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 34px; margin: 0 0 54px; }
@media (max-width: 800px) { .about-panels-3 { grid-template-columns: 1fr; } }
.about-panels-3 .about-panel { margin: 0; }
.about-panels-3 .about-panel__photo { height: auto; aspect-ratio: 3 / 4; }
.about-panels-3 .about-panel h2 { font-size: 1.375rem; margin-top: 18px; }
.about-panels-3 .about-panel p { font-size: var(--t-small); line-height: 1.65; }

/* Real headshot images in sidebar/leads cards */
.principal__img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block;
  margin-bottom: 12px; border: 1px solid var(--rule); }

/* People filter bar v2: Name, Practice Area, State (Steve) */
.people-bar { align-items: end; }
.people-bar .pfield { min-width: 200px; flex: 1; }
.people-bar input[type="search"] {
  font-family: var(--sans); font-size: 1rem; padding: 10px 14px; width: 100%;
  box-sizing: border-box; border: 1px solid var(--bs-navy); background: #fff; color: var(--bs-black);
}
.people-bar input[type="search"]:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.people-bar select { width: 100%; box-sizing: border-box; min-width: 0; }

/* Newsroom pagination (Steve) */
.pagination { display: flex; gap: 8px; justify-content: center; margin: 44px 0 0; flex-wrap: wrap; }
.pagination a, .pagination span {
  font-family: var(--sans); font-size: 0.9375rem; font-weight: 700; text-decoration: none;
  padding: 10px 16px; border: 1px solid var(--bs-navy); color: var(--bs-navy); min-width: 20px; text-align: center;
}
.pagination a:hover { background: var(--bs-cream); color: var(--bs-burgundy); }
.pagination [aria-current="page"] { background: var(--bs-navy); color: #fff; }
.pagination a:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

/* ============================================================
   V3 REVISIONS — Daniel's July 16 written instructions
   ============================================================ */

/* G1: sidebar 36px narrower, main area wider (desktop only; stacks below 1024px) */
@media (min-width: 1025px) {
  .interior__inner { grid-template-columns: minmax(0, 1fr) 264px; }
}

/* G2: sidebar people photos 180w x 240h */
.sidebar .principal__img, .leads .principal__img {
  width: 180px; height: 240px; aspect-ratio: auto; object-fit: cover;
}
.leads .principal { text-align: left; }
.leads .principal__photo { margin: 0 0 12px; }

/* G3: sidebar heading lines dark red #7a0026 */
.sidebar__block h3 { border-bottom-color: var(--bs-burgundy); }

/* G4 + B1: outline boxes get clearly visible navy-grey borders;
   fill-in (form input) boxes stay grey so the two read differently */
.person-card, .news-card, .callout, .sidebar .contact-card,
.coverage__detail, .bs-form fieldset, .principal__img, .bs-table td {
  border-color: rgba(0, 52, 98, 0.45);
}
.svc-grid li, .pa-nav li, .sidenews, .event { border-color: rgba(0, 52, 98, 0.3); }
.bs-form input[type="text"], .bs-form input[type="email"], .bs-form input[type="tel"],
.bs-form textarea, .bs-form select, .people-bar input[type="search"], .people-bar select {
  border-color: #a9adb2;
}

/* G6: Get In Touch rethink — one filled navy surface, no stacked rules */
.cta-card { background: var(--bs-navy); padding: 24px 24px 26px; }
.cta-card h3 {
  font-family: var(--serif); font-weight: 400; font-size: 1.25rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: #fff;
  border: 0; padding: 0; margin: 0 0 12px;
}
.cta-card p { font-family: var(--sans); font-size: var(--t-small); color: #fff;
  line-height: 1.6; margin: 0 0 16px; }

/* A1: About intro semi-bold and larger */
.about-intro--wrap { font-size: 1.375rem; font-weight: 600; line-height: 1.6; }

/* A2: Firm Profile icon at 115x150 per comp */
/* Session 20 (A): restore the July 21 final Firm Profile card treatment —
   115×150 fixed-height card, larger title with tightened leading, and the
   View/Download button pinned to the card's bottom (flex column + margin-top:auto). */
.fp-card { width: 115px; height: 150px; margin: 4px 24px 10px 0; display: flex; flex-direction: column; }
.fp-card img { height: 62px; flex: 0 0 auto; }
.fp-card .fp-card__label { font-size: 1.0625rem; line-height: 1.05; letter-spacing: 0.05em; padding: 8px 6px 4px; flex: 0 0 auto; }
.fp-card .fp-card__rule { width: 26px; margin: 0 auto 6px; flex: 0 0 auto; }
/* Session 26 (Dylan review): "VIEW/DOWNLOAD" overflowed the 115px card — the
   button's font/tracking weren't scaled when the July-21 treatment was restored.
   Tighten tracking (0.08 → 0.03em) so the label sits fully inside the burgundy
   pill with even ~3px side padding; font-size is set in 11-deviations.css. Pill
   stays 99px (margin 8px, matches preview proportions); still pinned to the card
   bottom via the auto top-margin. */
.fp-card .fp-card__btn { letter-spacing: 0.03em; padding: 6px 4px; margin: auto 8px 9px; }

/* P2 + P4: personnel boxes — burgundy top line, tan background */
.person-card { border-top-color: var(--bs-burgundy); background: var(--bs-cream); }

/* N1 + N3: article image ratio 1280x580; newsroom cards on tan */
.news-card { background: var(--bs-cream); }
.news-card .ph-image { aspect-ratio: 1280 / 580; }

/* CP2: light grey/tan striped band variant (Collections contact section) */
.band--pinstripe-light { background-image: var(--pinstripe-light); }
.band--pinstripe-light h2, .band--pinstripe-light p.lede { color: var(--bs-navy); }
.band--pinstripe-light .band-rule { background: var(--bs-burgundy); }
.band--pinstripe-light .divinfo h3 { color: var(--bs-body-grey); }
.band--pinstripe-light .divinfo p, .band--pinstripe-light .divinfo a { color: var(--bs-black); }
.band--pinstripe-light .divinfo a:focus-visible { outline-color: var(--focus-ring); }

/* Fix (pre-existing): contact heading flanking lines force min-width on small screens */
@media (max-width: 640px) {
  .contact h2 span::before, .contact h2 span::after { display: none; }
}

/* Accessible horizontal scroll for data tables on narrow screens */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

/* F1: footer Firm Profile card — less depth, stub rule, reframed photo */
.firm-profile { height: 96px; }
.firm-profile__rule { width: 40px; }

/* Session 20 (A, regression 1) + Session 21 audit: keep anchor-button text WHITE
   on hover sitewide. base.css `a:hover { color: burgundy }` (0,1,1) was overriding
   the buttons' own `color:#fff` (0,1,0), turning label text dark-on-dark on hover.
   Session 21 added .sidebar__cta ("View All People") — same regression, missed in S20. */
.btn-navy:hover, .btn-navy:focus,
.btn-burgundy:hover, .btn-burgundy:focus,
.sidebar__cta:hover, .sidebar__cta:focus { color: #fff; }

/* Session 20 (A, regression 2): the footer Firm Profile photo overshoots the
   card edge by 1px so sub-pixel rounding never leaves a white sliver at the
   right/top/bottom of the card. */
.firm-profile__building { top: -1px; right: -1px; bottom: -1px; height: calc(100% + 2px); }

/* Session 20 (B5): Practice-area content sections (Borrowers, Foreclosure Sales,
   Resources) render as main-heading blocks in the content column — same level as
   the Services heading, not subordinate cards. */
.interior__content .pa-block { margin: 30px 0 0; }
.interior__content .pa-block > h2:first-child { margin-top: 0; }
.pa-block__cta { margin: 14px 0 0; }
.pa-resources { list-style: disc; margin: 6px 0 4px 22px; }
.pa-resources li { font-family: var(--sans); font-size: var(--t-body); color: var(--bs-black); margin: 0 0 8px; }
.pa-resources a { color: var(--bs-navy); }
.pa-resources a:hover { color: var(--bs-burgundy); }
.pa-note { margin: 24px 0 0; font-size: var(--t-small); color: var(--bs-body-grey); }
.pa-note p { margin: 0 0 8px; }

/* Session 22: Claim Types + Division Contact rendered in the light content column
   (Creditors' Rights). The base .divinfo assumes a dark band (white text) — the
   --light modifier restores readable dark text on the content column's light bg. */
.interior__content .claims { margin: 8px 0 4px; }
.interior__content .divinfo { margin: 10px 0 4px; }
.divinfo--light h3 { color: var(--bs-body-grey); }
.divinfo--light p, .divinfo--light a { color: var(--bs-black); }
.divinfo--light a:focus-visible { outline-color: var(--focus-ring); }

/* Session 25: slim the practice-area / newsroom sidebar so a tall leadership-photo
   column doesn't leave a large void beside shorter content (Daniel: sidebar too
   long). The 180×240 leadership photos are kept (client spec); all a11y is kept —
   nav links stay ~33px tall (> WCAG 2.5.8 24px), focus rings and hover states
   unchanged. Reductions: inter-block gap 36→20, nav item padding 11→4, leadership
   card margin 26→12, block headings and the Get In Touch / View All People blocks
   tightened. */
.sidebar { gap: 16px; }
.sidebar__block h3 { padding-bottom: 5px; margin-bottom: 8px; }
.pa-nav a { padding: 3px 4px; line-height: 1.3; }
.sidebar .principal { margin-bottom: 8px; }
.sidebar .principal__title { margin: 2px 0 0; }
.sidebar__cta { padding: 9px 20px; }
.cta-card { padding: 12px 16px 12px; }
.cta-card h3 { margin-bottom: 5px; }
.cta-card p { margin: 0 0 8px; line-height: 1.45; }

/* Mobile pass: comfortable tap targets */
@media (max-width: 640px) {
  .pagination a, .pagination span { padding: 13px 18px; }
  .sidebar__more { display: inline-block; padding: 10px 0; }
  .person-card .vc { display: inline-block; padding: 8px 6px; }
}

/* --- Session 15/16: Foreclosure sales restored to the approved preview ---
   No sidebar: filters run as a single tight horizontal band across the top
   with the results table full-width beneath. */
.interior__inner--full { grid-template-columns: minmax(0, 1fr); }

/* Session 16: one slim band, no fieldset box, no legend heading. Every control
   shares one height/border/font/padding so the native date inputs stop looking
   foreign next to the selects. */
.fc-filter {
  max-width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 12px;
}
.fc-filter .fc-field { margin: 0; flex: 1 1 140px; min-width: 132px; display: flex; flex-direction: column; }
.fc-filter .fc-field label {
  display: block;
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--bs-navy);
  margin: 0 0 4px;
}
/* Unified control styling — selects, text inputs, and date inputs alike */
.fc-filter .fc-field input,
.fc-filter .fc-field select {
  width: 100%;
  box-sizing: border-box;
  height: 44px;
  margin: 0;
  padding: 0 12px;
  font-family: var(--sans);
  font-size: 0.9375rem;
  line-height: 1.2;
  color: var(--bs-black);
  background-color: #fff;
  border: 1px solid var(--rule);
  border-radius: 3px;
  -webkit-appearance: none;
  appearance: none;
}
/* Custom chevron so <select> matches the flat text inputs */
.fc-filter .fc-field select {
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23003462' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
/* Normalize native date inputs to sit flush with the rest of the band */
.fc-filter .fc-field input[type="date"] { padding-right: 10px; }
.fc-filter .fc-field input[type="date"]::-webkit-datetime-edit {
  font-family: var(--sans);
  font-size: 0.9375rem;
  color: var(--bs-black);
}
.fc-filter .fc-field input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0.6; cursor: pointer; }
.fc-filter .fc-field input:focus-visible,
.fc-filter .fc-field select:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 1px;
  border-color: var(--bs-navy);
}

/* Apply + Reset: compact, field-height, side by side at every width. Visible
   box is ~44px so it matches the controls AND meets the 44px tap-target min. */
.fc-filter .fc-actions { display: flex; gap: 8px; flex: 0 0 auto; align-items: flex-end; }
.fc-filter .fc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  box-sizing: border-box;
  min-height: 44px;
  min-width: 44px;
  padding: 0 16px;
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1;
  border: 1px solid transparent;
  border-radius: 3px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.fc-filter .fc-btn__icon { display: block; flex: 0 0 auto; }
.fc-filter .fc-btn--apply { background: var(--bs-navy); color: #fff; }
.fc-filter .fc-btn--apply:hover { background: var(--bs-navy-deep); }
.fc-filter .fc-btn--reset { background: var(--bs-burgundy); color: #fff; padding: 0; width: 44px; }
.fc-filter .fc-btn--reset:hover { background: var(--bs-burgundy-hover); }
.fc-filter .fc-btn:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

/* Wrap gracefully: 768 → two lines; 390 → each field full width, buttons stay
   side by side. */
@media (max-width: 560px) {
  .fc-filter .fc-field { flex: 1 1 100%; }
  .fc-filter .fc-actions { width: 100%; }
  .fc-filter .fc-btn--apply { flex: 1 1 auto; }
}

/* Condensed full-width results table (scoped to the foreclosure archive) */
.interior__inner--full .bs-table th,
.interior__inner--full .bs-table td { padding: 8px 12px; }
/* Keep column widths on narrow screens so the .table-scroll region scrolls
   horizontally instead of compressing the Address into a tall stack. */
.interior__inner--full .bs-table { min-width: 860px; }
.interior__inner--full .bs-table .col-date { white-space: nowrap; }
.interior__inner--full .bs-table .col-date .sale-time { color: var(--bs-slate, #55606b); }
.interior__inner--full .bs-table .col-address { max-width: 340px; }
.interior__inner--full .bs-table .col-bid { text-align: right; white-space: nowrap; }

/* Draft-content flag (internal review aid; remove before client push if desired) */
.draft-flag { font-family: var(--sans); font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: #8a6d00;
  background: #fff7dd; border: 1px dashed #d1b856; padding: 6px 12px;
  display: inline-block; margin: 0 0 18px; }



/* ────────────────────────────────────────────────────────────────────
   Session 27 — Daniel's practice-area corrections (2026-08-04)
   ──────────────────────────────────────────────────────────────────── */

/* PA section headings, unified at the source. The nine migrated practice
   areas carry <h2><strong> inside their intro copy, so their section heads
   render bold; the template-emitted .pa-block headings (CRC, RED) sat at
   the .copy h2 weight of 400 and read lighter. Bold the pa-block h2s so
   every practice-area section head matches. The other nine pages contain
   no .pa-block sections, so this cannot shift them. */
.pa-block h2 { font-weight: 700; }

/* RED: half space between "Request Payoff / Reinstatement" (h3 closing the
   Borrowers callout body) and the Contact Us button. Base h3 margin is 0,
   so the gap was only the CTA's 14px; add half a line. */
.pa-block h3 + .pa-block__cta { margin-top: 26px; }

/* ---- Session 31: Contact hero carries Hours / Toll-Free / TTY / Mailing
   (Steve's round-2 mockup). The mid-page Contact Information band is deleted;
   its Session-29 stacked-tollfree treatment moves here. Four content-sized
   columns centered under the title; flex-wrap keeps them readable down to
   single-column on narrow screens. */
.page-hero--contact { padding-bottom: 36px; }
.page-hero--contact h1 { margin-bottom: 28px; }
.hero-contact { max-width: var(--max-w); margin: 0 auto; display: flex; flex-wrap: wrap;
  justify-content: center; align-items: flex-start; gap: 24px 56px; text-align: center; }
.hero-contact > div { flex: 0 1 auto; min-width: 170px; max-width: 300px; }
.hero-contact h3 { font-family: var(--sans); font-size: 0.8125rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.78);
  margin: 0 0 6px; }
.hero-contact p { font-family: var(--sans); font-size: var(--t-small); color: #fff;
  margin: 0; line-height: 1.6; }
.hero-contact a { color: #fff; }
.hero-contact a:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.hero-contact .tollfree { margin-bottom: 10px; }
.hero-contact .tollfree:last-child { margin-bottom: 0; }
.hero-contact .tollfree a { white-space: nowrap; font-weight: 700; }
.hero-contact .tollfree span { display: block; }
.hero-contact__note { font-weight: 700; margin-top: 6px !important; }
@media (max-width: 900px) { .hero-contact { gap: 20px 36px; } }

/* ---- Session 35: article body images render at their true aspect ratio.
   The base img rule (02-base, preview slice — not editable) sets
   max-width:100% without height:auto, so any content image carrying HTML
   width/height attributes (added by WP core and by our own markup) kept its
   attribute-pixel height while the width shrank to the column — visible
   distortion on every dimensioned body image. Width-constrained, height auto;
   deliberate crops (news-card bands, PA headers, fp-card, principal photos)
   set their own height/aspect-ratio rules and are out of this selector's
   scope. */
.copy img { height: auto; }

/* ---- Session 37: coverage detail panel must never clip its office list.
   .coverage__map-wrap{overflow:hidden} clips the absolutely-positioned panel
   stack at the map's bounds — NC's 7th office (Wilkesboro) fell off the card
   with no way to reach it. General fix for any office count: the stack caps
   at the map's height, and the detail card (a shrinkable flex child) scrolls
   internally past that. The depth-lock moves from the card (min-height) to
   its inner (content height), so short states (VT/KY) render exactly as
   before and scrolling only appears when content genuinely exceeds the map.
   Scroll region is keyboard-accessible (tabindex/role/aria in the templates)
   with the same focus treatment as the foreclosure .table-scroll. */
.coverage__panel-stack { max-height: calc(100% - 56px); } /* top offset 28 + 28 breathing */
.coverage__detail { overflow-y: auto; min-height: 0; }
.coverage__detail:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.coverage__detail-inner { min-height: 252px; } /* 300px card minus 2x24 padding — depth unchanged */
@media (max-width: 1024px) {
  .coverage__panel-stack { max-height: calc(100% - 40px); } /* tablet top offset 20 */
  .coverage__detail-inner { min-height: 212px; } /* 260px tablet card minus padding */
}
@media (max-width: 640px) {
  /* Stack is static below the map here — the page scrolls, the card never should. */
  .coverage__panel-stack { max-height: none; }
  .coverage__detail { overflow-y: visible; }
  .coverage__detail-inner { min-height: 0; }
}

/* ---- Session 48: article sidebar heading is an h2 (heading-order fix — the
   flagged h1→h3 skip appeared on all 53 articles whose bodies carry no h2).
   .sidebar__h renders identically to 08-interior's .sidebar__block h3
   (preview slice, not editable). PA sidebars keep h3 (their pages have h2s). */
.sidebar__block .sidebar__h {
  font-family: var(--serif); font-weight: 400; font-size: 1.25rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--bs-navy);
  border-bottom: 2px solid var(--bs-burgundy); padding: 0 0 5px; margin: 0 0 8px;
}

/* V3: H1 — remove hero seal on tablet view and below */
@media (max-width: 1180px) { .hero__seal { display: none !important; } }
/* V3: H2 — tighter hero content box for a better view of the photo (desktop only) */
@media (min-width: 1181px) { .hero__panel-wrap { width: 40%; max-width: 400px; } }
/* V3: F1 — footer card: less depth, stub rule */
.firm-profile { height: 96px; }
.firm-profile__rule { width: 40px; }
/* Fix (pre-existing in v13): controls transform not reset by the tablet media query */
@media (max-width: 1024px) { .hero__controls { transform: none; } }
/* Fix (pre-existing in v13): heading flanking lines force min-width on small screens */
@media (max-width: 640px) {
  .contact h2 span::before, .contact h2 span::after,
  .our-story h2 span::before, .our-story h2 span::after,
  .coverage h2 span::before, .coverage h2 span::after,
  .practice h2 span::before, .practice h2 span::after,
  .newsroom h2 span::before, .newsroom h2 span::after { display: none; }
}

/* ============================================================
   APPROVED DEVIATIONS from the preview baseline.
   Each block cites its DEVIATIONS.md entry. Nothing here may
   change desktop (≥1025px) rendering.
   ============================================================ */

/* Deviation #1 — mobile hero control cluster (approved by Dylan, 2026-07-30).
   ≤1024px: prev/next arrows sit in the bottom control row (reparented by
   hero-mobile.js) instead of overlapping the slide area. 44px tap targets;
   the existing .hero__nav:focus-visible ring still applies. */
@media (max-width: 1024px) {
  .hero__controls .hero__nav {
    position: static;
    transform: none;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .hero__controls .hero__nav:hover { transform: scale(1.18); }
}

@media (max-width: 640px) {
  /* Fit the six controls on one row: full-width cluster, arrows at the ends. */
  .hero__controls {
    width: calc(100% - 40px);
    left: 20px;
    justify-content: space-between;
    gap: 8px;
  }
}

/* Deviation #2 — FP card button text size (accessibility, 2026-08-04;
   revised Session 26, 2026-08-04 after Dylan's review).
   The approved preview set .fp-card__btn at 0.5rem (8px) — flagged by
   Accessibility Checker (text_small) and a genuine readability issue, so it was
   raised. But at 0.6875rem (11px) "VIEW/DOWNLOAD" overflowed the 115px July-21
   card and clipped at the card's right edge. 10px only fits by widening the pill
   past the preview proportions, and 10px still tripped text_small — so there is
   no size that both fits this narrow card AND clears the checker. Set to
   0.5625rem (9px): the largest that fits the preview's 99px pill with even ~3px
   side padding. Still 1px above the preview's 8px. The residual text_small
   advisory is unavoidable at this card width — accepted, pending Dylan/Daniel
   sign-off (would only clear if the card widened or the label shortened). */
.fp-card .fp-card__btn { font-size: 0.5625rem; }

/* Accessibility fixes (session 9, WCAG root-cause 5): footer headings are h2
   elements (landmark sections) styled exactly as the preview's footer h4s;
   homepage gains a screen-reader-only h1. No visual change. */
.footer h2.footer__h { font-family: var(--sans); font-size: 0.8125rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: #fff; margin: 0 0 14px; }

/* Deviation #3 — hero control legibility (accessibility, 2026-08-02).
   The prev/next arrows and pause sit directly over slide photos with no
   scrim. Added a subtle text-shadow so they stay legible over lighter photo
   regions (WCAG 1.4.3/1.4.11). No layout/color change; preview look preserved. */
.hero__nav, .hero__play { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 0 2px rgba(0, 0, 0, 0.7); }

/* Deviation #4 — newsroom card 4:3 top-weighted cover (approved 2026-08-02).
   The approved preview assumed uniform canned art; real legacy images (39/43
   portrait/logo/square) needed a fit strategy + curation. Card image band is a
   fixed 4:3 box; images cover it, weighted toward the top so faces survive.
   Per-post ACF fit_mode can force contain, or exclude to the canned fallback. */
.news-card__band { position: relative; width: 100%; aspect-ratio: 1280 / 580; overflow: hidden;
  border-bottom: 1px solid var(--rule); background: #e9e6e3; }
/* Session 46 (Deviation #4 resolved — Daniel's option C): uniform 1280x580 band.
   Wide images cover (top-weighted); off-ratio images contain, centered, on a
   background sampled from their own edges (inline per-band, attachment meta). */
.news-card__band .news-card__image { position: absolute; inset: 0; width: 100%; height: 100%; }
.news-card__band.is-cover .news-card__image { object-fit: cover; object-position: 50% 25%; }
.news-card__band.is-contain .news-card__image { object-fit: contain; object-position: 50% 50%; }
/* placeholder tints rotate so repetition reads intentionally until canned art lands */
.news-card__band.ph-image { display: flex; align-items: center; justify-content: center; border: 0; border-bottom: 1px solid var(--rule); }
.news-card__band.ph-image--v1 { background: repeating-linear-gradient(45deg,#eceded 0 14px,#e2e4e6 14px 28px); }
.news-card__band.ph-image--v2 { background: repeating-linear-gradient(45deg,#e8eb2f 0 14px,#e2e6ea 14px 28px); background: repeating-linear-gradient(45deg,#e7eaee 0 14px,#dde1e6 14px 28px); }
.news-card__band.ph-image--v3 { background: repeating-linear-gradient(135deg,#edeae7 0 14px,#e4e0dc 14px 28px); }

/* Homepage teaser feature image: same 4:3 top-cover band. */
.newsroom__feature .news-card__band { aspect-ratio: 1280 / 580; margin-bottom: 18px; }
/* Deviation #4 cont. — homepage teaser feature image link must be block so the band fills width. */
.newsroom__feature > a { display: block; width: 100%; }

/* ---- Session 28: sortable foreclosure results columns (Steve) ---- */
.bs-table th[aria-sort] { padding: 0; }
.bs-table th .th-sort { display: block; padding: 12px 14px; color: #fff;
  text-decoration: none; white-space: nowrap; }
.interior__inner--full .bs-table th .th-sort { padding: 8px 12px; }
.bs-table th .th-sort:hover, .bs-table th .th-sort:focus-visible { text-decoration: underline;
  text-underline-offset: 3px; }
.bs-table th .th-sort:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }
.bs-table th .sort-ind { font-size: 0.625rem; }
/* 8th column (County) added; widen the scroll floor so rows stay on one line */
.interior__inner--full .bs-table { min-width: 960px; }

/* Session 29's .divinfo--contact block was superseded in Session 31: the
   Contact Information band moved into the page hero (.hero-contact in
   09-revisions.css, same stacked-tollfree treatment) per Steve's mockup. */

/* Session 50: the People directory reuses the foreclosure pagination component
   but builds it client-side. The nav ships empty so a no-JS visitor gets the
   full unpaginated grid with no stray 44px gap where the control would be —
   .pagination is display:flex, which out-specifies the UA's [hidden] rule. */
.pagination:empty { display: none; }

/* ============================================================
   Ninja Forms → preview .bs-form mapping.
   The wrapper div.bs-form--nf inherits the ported .bs-form input,
   label, textarea and select rules; this file covers what Ninja
   Forms renders differently from the preview's hand-written forms.
   Port integration, not a design deviation.
   ============================================================ */

.bs-form--nf { max-width: 760px; margin: 0 auto; }

/* NF spacing plays inside the ported field rhythm. */
.bs-form--nf .nf-field-container { margin-bottom: 18px; }
.bs-form--nf .nf-form-content { padding: 0; max-width: none; }

/* Labels match .bs-form label. */
.bs-form--nf .nf-field-label label { display: block; font-family: var(--sans);
  font-size: 0.875rem; font-weight: 700; color: var(--bs-black); margin: 0 0 6px; }
.bs-form--nf .ninja-forms-req-symbol { color: var(--bs-burgundy); }

/* Checkbox / radio rows match .bs-form .choice. */
.bs-form--nf .checkbox-wrap .nf-field-label label,
.bs-form--nf .listradio-wrap li label { font-weight: 400; }
.bs-form--nf .listradio-wrap ul { list-style: none; margin: 0; padding: 0; }
.bs-form--nf .listradio-wrap li { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }

/* Submit renders as the preview's burgundy button. */
.bs-form--nf input[type="submit"] {
  display: inline-block; background: var(--bs-burgundy); color: #fff;
  font-family: var(--sans); font-size: 0.875rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; text-decoration: none; padding: 12px 24px;
  border: none; cursor: pointer; transition: background 150ms ease;
}
.bs-form--nf input[type="submit"]:hover { background: var(--bs-burgundy-hover); }
.bs-form--nf input[type="submit"]:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

/* Success / error messaging in brand colors with visible contrast. */
.bs-form--nf .nf-response-msg { font-family: var(--sans); color: var(--bs-navy); }
.bs-form--nf .nf-error-msg { color: var(--bs-burgundy); font-family: var(--sans); font-size: 0.875rem; }

/* Genuine fieldsets injected by payoff-fieldsets.js, styled like .bs-form fieldsets. */
.bs-nf-fieldset { border: 1px solid rgba(0, 52, 98, 0.45); padding: 24px 28px; margin: 0 0 26px; }
.bs-nf-fieldset legend { font-family: var(--serif); font-size: 1.1875rem; color: var(--bs-navy);
  font-weight: 600; padding: 0 10px; }

/* Utility: remove from visual flow, absent from AT via aria-hidden (the legend carries the name). */
.bs-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* Density pass (Dylan, Session 7): match the approved preview's form rhythm. */
.bs-form--nf .nf-field-container { margin-bottom: 16px; }
.bs-form--nf .nf-field-label { margin-bottom: 6px; }
.bs-form--nf .nf-field-label label, .bs-form--nf .nf-field-label .nf-label-span { margin: 0 0 6px; }
.bs-form--nf .nf-field-element input, .bs-form--nf .nf-field-element select,
.bs-form--nf .nf-field-element textarea { margin: 0; }
.bs-nf-fieldset { padding: 20px 24px; margin: 0 0 24px; }
.bs-nf-fieldset .nf-field-container:last-child { margin-bottom: 0; }
.bs-form--nf .listradio-wrap li, .bs-form--nf .checkbox-container .nf-field-label { margin: 0 0 10px; }
.bs-form--nf .listradio-wrap li:last-child { margin-bottom: 0; }

/* ---- Session 29: radio labels sit adjacent to their controls ----
   NF's stock stylesheet gives list-radio labels margin-left:21px (meant for
   its own float layout); on our flex rows that stacked with the 10px gap into
   a ~36px gulf. !important because NF's sheet can enqueue after the theme's. */
.bs-form--nf .listradio-wrap li label { margin: 0 !important; }
.bs-form--nf .listradio-wrap li input { margin: 0; }

/* ---- Session 31: persistent field help (WCAG 1.4.13-safe replacement for
   live's hover-only tooltips). NF renders desc_text (.nf-field-description)
   after the input; the field-wrap becomes a flex column so help text sits
   beneath the label, above the control. nf-help.js adds aria-describedby
   (NF already stamps each description with id nf-description-<field>). */
.bs-form--nf .field-wrap { display: flex; flex-direction: column; }
.bs-form--nf .field-wrap .nf-field-label { order: 1; }
.bs-form--nf .field-wrap .nf-field-description { order: 2; font-family: var(--sans);
  font-size: 0.8125rem; line-height: 1.55; color: var(--bs-body-grey); margin: 0 0 8px; }
.bs-form--nf .field-wrap .nf-field-element { order: 3; }

/* In-form notice blocks (live's h4 sections render as bolded lead lines —
   a real heading would skip levels under the page h1). */
.bs-form--nf .nf-note-h { font-family: var(--sans); font-size: 1rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--bs-navy); margin: 0 0 8px; }
.bs-form--nf .nf-field-element ul { margin: 0 0 14px; padding-left: 22px; }
.bs-form--nf .nf-field-element ul li { font-family: var(--sans); font-size: var(--t-small);
  line-height: 1.6; margin-bottom: 6px; }

/* ---- Session 32: page copy that flanks a centered form aligns to the same
   column (payoff intro + debt-collector disclaimer). The .copy p selector
   needs outranking: its 72ch max-width and side margins otherwise win. */
.form-col, .copy p.form-col { max-width: 760px; margin-left: auto; margin-right: auto; }