/* ==========================================================================
   Porter Protects — Main Stylesheet
   Pixel-exact reproduction of porterprotects.com (Oxygen Builder)
   ========================================================================== */

/* ==========================================================================
   1. CUSTOM PROPERTIES (Design Tokens)
   ========================================================================== */
:root {
  /* --------------------------------------------------------------------------
     theme.json preset bridge (Batch 7, §4 of audit/2026-06-13-batch7-css-plan.md)
     ------------------------------------------------------------------------
     theme.json's settings.color.palette and settings.typography.fontSizes are
     the single source of truth for the brand colors + type scale. WordPress
     auto-generates a `--wp--preset--color--<slug>` / `--wp--preset--font-size--<slug>`
     custom property for each, which also makes them selectable in the block
     editor.

     The legacy `--color-*` / `--font-size-*` token names below are kept so the
     ~730 `var(--color-main)` call sites elsewhere in this file never change.
     Where a token has a matching preset (value-for-value identical), it is
     re-defined to ALIAS that preset:

         --color-main: var(--wp--preset--color--main, #893002);

     The literal is retained as the var() FALLBACK. That fallback is deliberate
     and load-bearing:
       1. It equals the previous literal exactly, so the computed value is
          byte-identical — zero visual change.
       2. WordPress emits the preset custom properties on `:root` only since
          WP 6.6 (PR gutenberg#42084); on WP 6.4/6.5 they live on `body`, which
          does not propagate up to this `:root` rule. The fallback guarantees the
          token still resolves to the correct literal on those older versions.
     Only tokens with a real 1:1 preset are aliased; shadows, overlays, the
     cta-orange family, borders, layout vars, and the h3/h5/h6 sizes (no preset)
     stay as plain literals.
     -------------------------------------------------------------------------- */

  /* ---- Brand Colors ---- */
  --color-main: var(--wp--preset--color--main, #893002);
  --color-darker: var(--wp--preset--color--darker, #51230d);
  --color-hero-overlay: rgba(100, 20, 15, 0.82);
  --color-article-header: rgb(117, 59, 42);
  --color-verdict-bar: rgba(137, 48, 2, 0.33);
  --color-location-bar: var(--wp--preset--color--red, rgb(134, 27, 30)); /* #861b1e */
  --color-cta-orange: #c66335;
  --color-cta-orange-alt: #c66235;          /* minor variant used on sidebar */
  --color-cta-orange-hover: #dd8b66;
  --color-secondary-nav: #c69175;
  --color-secondary-nav-hover: #c45f2d;
  /* Mobile nav overlay fill. Near-opaque (0.97) on purpose: it keeps a faint
     brand tint but stops the page hero/content behind it from reading through
     the open menu. 0.9 let the homepage bleed through legibly — too see-through. */
  --color-nav-overlay: rgba(137, 48, 2, 0.97);
  --color-gold: var(--wp--preset--color--gold, #d2b05e);
  --color-gold-inline: #e3c88a;
  --color-reviewer-bg: rgba(114, 12, 12, 0.06);
  --color-testimonial-bg: #f0e4d8;

  /* ---- Text Colors ---- */
  --color-text: var(--wp--preset--color--text, #404040);
  --color-heading: var(--wp--preset--color--heading, #000000);
  --color-dark-text: var(--wp--preset--color--dark-gray, #333333);
  --color-medium-text: #666666;
  --color-muted-text: #999999;
  --color-light-text: #e0e0e0;
  --color-white: var(--wp--preset--color--white, #ffffff);
  --color-black: #000000;

  /* ---- Link Colors ---- */
  --color-link: var(--wp--preset--color--link, #9b4242);
  --color-link-hover: var(--wp--preset--color--link-hover, #db541a);

  /* ---- Button Colors ---- */
  --color-button-blue: #1e73be;
  --color-case-result-dark: #6b2401;
  --color-case-result-border: #551f04;

  /* ---- Type scale ---- */
  --font-size-small: var(--wp--preset--font-size--small, 14px);

  /* ---- Border Colors ---- */
  --color-border: #d3d3d3;
  --color-border-light: #bababa;
  --color-border-lighter: #b7b7b7;
  --color-border-sidebar: #adadad;

  /* ---- Shadows ---- */
  --shadow-header: 0px 1px 5px #30180f;
  --shadow-card: 0px 0px 20px #d6d6d6;
  --shadow-card-inner: 0px 0px 10px rgba(214, 214, 214, 0.8);
  --shadow-practice-area: 0px 0px 10px #a8a8a8;
  --shadow-sidebar: 2px 0px 5px #c6c6c6;
  --shadow-case-result: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  --shadow-contact-form: 0px 0px 20px rgba(214, 214, 214, 0.5);

  /* ---- Typography ---- */
  /* --font-family is NOT aliased: theme.json's mulish preset value is
     "'Mulish', sans-serif" (with the fallback stack), identical to this literal,
     but --wp--preset--font-family--mulish is only emitted when a fontFamily
     preset is referenced; keeping the literal avoids any dependence on that. */
  --font-family: 'Mulish', sans-serif;
  --font-size-body: var(--wp--preset--font-size--normal, 18px);
  --font-weight-body: 400;
  --line-height-body: 1.6;
  --font-size-h1: var(--wp--preset--font-size--x-large, 36px);
  --font-size-h2: var(--wp--preset--font-size--large, 28px);
  --font-size-h3: 22px; /* no preset (would need an extra slug); kept literal */
  --font-size-h4: var(--wp--preset--font-size--medium, 20px);
  --font-size-h5: 20px; /* = medium by value, but slug isn't h5; kept literal */
  --font-size-h6: 18px; /* = normal by value, but slug isn't h6; kept literal */
  --font-weight-heading: 700;

  /* ---- Layout ---- */
  --max-width: 1300px;
  --section-padding: 20px;
  --header-logo-padding: 40px;

  /* ---- Backgrounds ---- */
  /* bg-light mismatch resolution (Batch 7, §4): the rendered token has always
     been rgb(248,248,248) = #f8f8f8 (the only value referenced by the 12
     var(--color-bg-light) call sites). theme.json's `light-gray` preset was
     #f5f5f5 and unused anywhere — so it was corrected to #f8f8f8 to match the
     rendered truth, then aliased here. No visual change. */
  --color-bg-light: var(--wp--preset--color--light-gray, rgb(248, 248, 248)); /* #f8f8f8 */
  --color-bg-search: #f3f3f3;
}

/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Visually hidden but available to assistive tech (standard WP pattern). */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link.screen-reader-text:focus {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 100000;
  width: auto;
  height: auto;
  clip: auto;
  clip-path: none;
  padding: 12px 20px;
  background-color: var(--color-white);
  color: var(--color-darker);
  font-weight: 700;
  text-decoration: underline;
  box-shadow: var(--shadow-card);
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

html,
body {
  /* `clip`, not `hidden`: both prevent horizontal scroll, but overflow:hidden
     turns the body into a scroll container, which silently disables
     `position: sticky` on the site header (QA #20 — nav wasn't staying put on
     scroll). overflow-x: clip clips the same way without creating that scroll
     container, so the sticky header works. Do not change back to hidden. */
  overflow-x: clip;
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-body);
  line-height: var(--line-height-body);
  color: var(--color-text);
  background-color: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

ul,
ol {
  list-style: none;
}

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
}

/* ==========================================================================
   3. TYPOGRAPHY
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family);
  font-weight: var(--font-weight-heading);
}

h1 { font-size: var(--font-size-h1); }

h2 { font-size: var(--font-size-h2); color: var(--color-heading); }

h3 { font-size: var(--font-size-h3); color: var(--color-heading); }

h4 { font-size: var(--font-size-h4); color: var(--color-heading); }

h5 { font-size: var(--font-size-h5); color: var(--color-heading); }

h6 { font-size: var(--font-size-h6); color: var(--color-heading); }

a {
  color: var(--color-link);
  font-weight: 800;
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--color-link-hover);
}

p {
  margin-bottom: 1em;
}

b, strong {
  font-weight: 700;
}

/* WordPress block content.
   Batch 6E: dropped the redundant Oxygen co-selectors .ct-inner-content and
   .oxy-stock-content-styles from every grouped rule below — .entry-content was
   already the first selector in each, so it now carries all this typography.
   Markup that previously relied on a builder token (results/testimonials content
   wrappers, the attorney bio, the news/professional bodies) was given .entry-content
   or already carried .content-body, so the rendered styling is identical. */
.entry-content h2 {
  font-size: var(--font-size-h2);
  color: var(--color-heading);
  font-weight: var(--font-weight-heading);
  margin-top: 1.5em;
  margin-bottom: 0.75em;
}

.entry-content h3 {
  font-size: var(--font-size-h3);
  color: var(--color-heading);
  margin-top: 1.25em;
  margin-bottom: 0.5em;
}

.entry-content h4 {
  font-size: var(--font-size-h4);
  color: var(--color-heading);
  margin-top: 1em;
  margin-bottom: 0.5em;
}

.entry-content ul,
.entry-content ol {
  margin-left: 1.5em;
  margin-bottom: 1em;
}

.entry-content ul {
  list-style: disc;
}

.entry-content ol {
  list-style: decimal;
}

.entry-content li {
  margin-bottom: 0.5em;
}

.entry-content img {
  margin-top: 1em;
  margin-bottom: 1em;
}

/* Batch 7: deleted dead OxyMade .saas-heading-two / .saas-subheading /
   .saas-body-text typography blocks (0 PHP/JS refs). */

/* Batch 6A: deleted dead OxyMade typography blocks here —
   .dentist-heading-one, .dentist-subheading, and .dentist-service-page-title.
   Zero markup referenced them (the live practice-area card title styling lives
   on .practice-areas__card-title). Their mobile @media duplicates were removed too. */

/* Footer link typography */
.footerlink {
  color: var(--color-darker);
  /* QA #18: footer legal links were 1.5rem/24px — far too large for footer
     utility links. Dropped to 1rem to read as secondary footer text. */
  font-size: 1rem;
  font-weight: 600;
}

/* Gold inline accent */
.gold-text {
  color: var(--color-gold-inline);
  font-weight: bold;
  font-size: 18px;
}

/* ==========================================================================
   4. LAYOUT UTILITIES
   ========================================================================== */

/* .section-inner: the page-width container (Batch 6C, was .section-inner).
   LOAD-BEARING — this is the site's max-width centering wrapper used on nearly
   every section across every template. Removing it collapses page width. Do not remove. */
.section-inner {
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
  padding: var(--section-padding);
}

/* Batch 6A: deleted dead .oxy-header-container (a leftover centered-container
   twin of the page-width container, now .section-inner). Zero markup referenced it. */

/* .columns-row: the flex column-row primitive (Batch 6D, was .ct-new-columns).
   LOAD-BEARING — its column cells carry .columns-row__col (was the Oxygen
   .ct-div-block child token); the child rule below pads each cell and the
   @media rule stacks them. Only children that originally had .ct-div-block get
   .columns-row__col, so a bare sibling (e.g. news <aside>) stays unpadded as before.
   Do not remove. */
.columns-row {
  display: flex;
  flex-wrap: wrap;
}

.columns-row > .columns-row__col {
  padding: 20px;
}

/* Spacing utilities — Oxygen/Tailwind-like */
.p-4 { padding: 16px; }
.p-6 { padding: 24px; }
.p-8 { padding: 32px; }
.p-10 { padding: 40px; }

.pl-2 { padding-left: 8px; }
.pr-2 { padding-right: 8px; }
.pl-6 { padding-left: 24px; }
.pr-6 { padding-right: 24px; }
.pt-2 { padding-top: 8px; }
.pb-4 { padding-bottom: 16px; }
.py-4 { padding-top: 16px; padding-bottom: 16px; }

.mt-2 { margin-top: 8px; }
.mt-4 { margin-top: 16px; }
.mt-6 { margin-top: 24px; }
.mt-10 { margin-top: 40px; }

.mb-2 { margin-bottom: 8px; }
.mb-4 { margin-bottom: 16px; }
.mb-6 { margin-bottom: 24px; }
.mb-10 { margin-bottom: 40px; }

/* ==========================================================================
   4b. GLOBAL PAGE LAYOUTS
   These classes are used by page.php, single.php, and all content templates.
   ========================================================================== */

/* Main content container */
.site-main {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--section-padding);
}

/* Full-width main (used by single.php where header is edge-to-edge) */
.site-main--single {
  max-width: 100%;
  padding: 0;
}

.site-main--utility {
  max-width: 100%;
  padding: 0;
}

/* Front page — hero and sections go full width */
.site-main.front-page {
  max-width: 100%;
  padding: 0;
}

/* --- Page / Single content layouts --- */
/* Batch 7: folded the former parity-pass overrides into these canonical rules.
   The parity pass re-declared padding (20px -> 50px), gap (30px -> 44px) and the
   content/sidebar split, so the computed layout is preserved exactly here.
   NOTE on --page > .content-area: width is 70% but flex-basis stays 65% — in a
   flex row the flex-basis wins for actual sizing, so BOTH must be kept verbatim
   to render identically (the parity `width:70%` never changed the rendered box). */
.content-wrapper--page,
.content-wrapper--single {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 50px var(--section-padding);
  display: flex;
  gap: 44px;
  align-items: flex-start;
}

.content-wrapper--page > .content-area {
  width: 70%;          /* merged override from the former parity-pass section */
  flex: 0 0 65%;       /* flex-basis still 65% — this wins over width in flex */
  min-width: 0;
}

.content-wrapper--page > .sidebar,
.content-wrapper--single > .sidebar {
  width: 30%;          /* merged override: page sidebar 35% -> 30% */
  flex: 0 0 30%;       /* merged override: page sidebar flex 35% -> 30% */
  position: relative;  /* merged override from the former parity-pass section */
}

.content-wrapper--single > .content-area {
  width: 70%;
  flex: 0 0 70%;
  min-width: 0;
}

/* --- 35/65 Sidebar-Left Layout (hospital/asbestos — PorterContentProfessional) --- */
.content-wrapper--professional {
  display: flex;
  gap: 30px;
  align-items: flex-start;
}

.content-wrapper--professional > .sidebar {
  width: 35%;
  flex: 0 0 35%;
  order: -1;
}

.content-wrapper--professional > .content-area {
  width: 65%;
  flex: 0 0 65%;
  min-width: 0;
}

/* --- Sidebar base styles --- */
/* Batch 7: .sidebar / .sidebar-widget / .sidebar-cta h3 / .sidebar-cta .cta-phone
   below carry merged overrides from the former parity-pass section. The third
   .sidebar-cta definition (parity bg/padding) was folded into the LATER
   .sidebar-cta block in section 8 (~line 2290) to preserve source-order cascade. */
.sidebar {
  position: sticky;
  top: 120px;
  /* merged override from the former parity-pass section */
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.sidebar-widget {
  margin-bottom: 24px;
  width: 100%;            /* merged override from the former parity-pass section */
}

.sidebar-cta {
  background-color: var(--color-main);
  color: var(--color-white);
  padding: 24px;
  border-radius: 3px;
}

.sidebar-cta h3 {
  /* merged override from the former parity-pass section
     (color white -> #000, font-size var(--font-size-h3)=22px -> 30px).
     margin-bottom: 8px is KEPT — the parity rule never re-declared it, so it
     stayed in the computed style. */
  color: #000;
  font-size: 30px;
  margin-bottom: 8px;
}

.sidebar-cta .cta-phone {
  /* merged override from the former parity-pass section
     (display block -> inline-block, color gold -> #000, 22px -> 28px,
     margin-bottom: 8px -> margin: 8px 0 18px). */
  display: inline-block;
  color: #000;
  font-size: 28px;
  font-weight: 800;
  margin: 8px 0 18px;
  text-decoration: none;
}

.sidebar-cta .cta-phone:hover {
  color: var(--color-white);
}

.sidebar-cta .cta-subtext {
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  margin-bottom: 16px;
}

/* Sidebar results */
.sidebar-results h3 {
  font-size: var(--font-size-h3);
  color: var(--color-darker);
  border-bottom: 2px solid var(--color-main);
  padding-bottom: 8px;
  margin-bottom: 16px;
}

.result-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border-sidebar);
}

.result-amount {
  font-size: 18px;
  font-weight: 800;
  color: var(--color-main);
}

.result-category {
  font-size: 14px;
  color: var(--color-medium-text);
}

/* Sidebar practice menu */
.sidebar-practice-menu h3 {
  font-size: var(--font-size-h3);
  color: var(--color-darker);
  border-bottom: 2px solid var(--color-main);
  padding-bottom: 8px;
  margin-bottom: 16px;
}

.sidebar-nav--vertical {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar-nav--vertical li a {
  display: block;
  padding: 10px 0;
  border-bottom: 0.5px solid var(--color-border-sidebar);
  font-size: 15px;
  font-weight: 600;
  color: var(--color-link);
  text-decoration: none;
}

.sidebar-nav--vertical li a:hover {
  color: var(--color-link-hover);
}

/* Sidebar testimonials */
.sidebar-testimonials h3 {
  font-size: var(--font-size-h3);
  color: var(--color-darker);
  border-bottom: 2px solid var(--color-main);
  padding-bottom: 8px;
  margin-bottom: 16px;
}

/* Batch 7: .testimonial-quote / p / cite below carry merged overrides from the
   former parity-pass section (margin 20px -> 18px; p line-height 1.5 -> 1.55 plus
   margin; cite color main -> darker, weight 700 -> 800). */
.testimonial-quote {
  margin: 0 0 18px;        /* merged override (was 0 0 20px) */
  padding: 0;
  border: none;
  border-left: 0;          /* merged override from the former parity-pass section */
  font-style: normal;
}

.testimonial-quote p {
  font-size: 15px;
  line-height: 1.55;       /* merged override (was 1.5) */
  color: var(--color-text);
  margin: 0 0 8px;         /* merged override from the former parity-pass section */
}

.testimonial-quote cite {
  display: block;
  font-style: normal;
  font-weight: 800;        /* merged override (was 700) */
  font-size: 14px;
  color: var(--color-darker);  /* merged override (was var(--color-main)) */
  margin-top: 4px;
}

/* --- Entry content styling (WordPress content) --- */
.entry-content {
  /* Batch 7: merged override from the former parity-pass section
     (added font-size: 20px; line-height 1.7 -> 1.75). */
  font-size: 20px;
  line-height: 1.75;
}

.entry-content h2 {
  margin-top: 1.5em;
  margin-bottom: 0.5em;
}

.entry-content h3 {
  margin-top: 1.3em;
  margin-bottom: 0.4em;
}

.entry-content p {
  margin-bottom: 1em;
}

.entry-content ul,
.entry-content ol {
  margin-bottom: 1em;
  padding-left: 1.5em;
}

.entry-content img {
  max-width: 100%;
  height: auto;
  border-radius: 3px;
}

/* Shared template primitives: blogs, pages, professional pages, news, and CPT singles. */
.template-title {
  color: var(--color-darker);
  font-size: 48px;
  line-height: 1.2;
  margin: 0 0 24px;
}

.content-body {
  color: var(--color-text);
  font-size: 20px;
  line-height: 1.6;
}

.content-body.entry-content {
  line-height: 1.6;
}

.content-body > :first-child {
  margin-top: 0;
}

.content-body h2,
.content-body h3,
.content-body h4 {
  color: var(--color-darker);
  line-height: 1.25;
}

.content-body h2 {
  font-size: 34px;
}

.content-body h3 {
  font-size: 28px;
}

.content-body a {
  color: var(--color-link);
  font-weight: 700;
}

.content-body a:hover {
  color: var(--color-link-hover);
}

.porter-data-warning {
  background: #fff8e8;
  border: 1px solid #d8ad61;
  border-left: 6px solid var(--color-main);
  color: var(--color-darker);
  font-size: 15px;
  line-height: 1.5;
  margin: 16px 0;
  padding: 14px 16px;
}

.porter-data-warning strong {
  display: block;
  font-weight: 800;
  margin-bottom: 3px;
}

.template-sidebar {
  min-width: 0;
}

/* Page title underline (matching live site) */
.entry-title {
  /* Batch 7: merged override from the former parity-pass section
     (added color/font-size/line-height; margin-bottom 20px -> 28px). */
  border-bottom: 0.75px solid var(--color-border-lighter);
  padding-bottom: 12px;
  color: var(--color-darker);
  font-size: 42px;
  line-height: 1.2;
  margin-bottom: 28px;
}

/* Last updated date */
.last-updated {
  margin-top: 30px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
  font-size: var(--font-size-small);
  color: var(--color-medium-text);
}

/* --- Article header (single.php brown section) --- */
.article-header {
  background-color: rgb(117, 59, 42);
  color: var(--color-white);
  padding: 35px var(--section-padding);
}

.article-reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: transparent;
  z-index: 900;
}

.article-reading-progress__bar {
  width: 0;
  height: 100%;
  background-color: var(--color-gold-inline);
}

.article-header__inner {
  max-width: var(--max-width);
  margin: 0 auto;
}

.article-header__columns {
  display: flex;
  align-items: stretch;
  gap: 30px;
}

.article-header__content {
  width: 70%;
  flex: 0 0 70%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
}

.article-header__label {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 12px;
  padding: 6px 10px;
  border: 1px solid rgba(255, 255, 255, 0.46);
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 0.12);
  color: var(--color-white);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.1;
  text-transform: uppercase;
}

.article-header__media {
  width: 30%;
  flex: 0 0 30%;
}

.article-header__date {
  font-size: 14px;
  opacity: 0.85;
  margin-bottom: 12px;
}

.article-header__date time {
  color: var(--color-white);
  font-weight: 400;
}

.article-header__title {
  color: var(--color-white);
  font-size: 48px;
  line-height: 1.2;
  margin-bottom: 16px;
}

.article-header__meta {
  display: flex;
  align-items: center;
  gap: 20px;
}

.article-header__written-by {
  color: var(--color-white);
  font-size: 20px;
  font-weight: 600;
}

.article-header__written-by a {
  color: var(--color-white);
}

.article-header__written-by div + div {
  font-size: 16px;
  font-weight: 400;
}

.article-header__divider {
  width: 1px;
  min-height: 64px;
  background-color: var(--color-white);
}

.article-header__review {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
  color: var(--color-white);
  background-color: #7a2f21;
  border: 1px solid var(--color-white);
  border-radius: 20px;
  padding: 10px 18px;
  text-decoration: none;
  transition: background-color 0.3s, color 0.3s;
}

.article-header__review:hover {
  color: var(--color-white);
  background-color: rgba(158, 53, 53, 0.69);
}

.article-header__review span {
  font-weight: 700;
}

.article-header__review small {
  font-size: 14px;
}

.article-header__image {
  width: 100%;
  height: 300px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid #efefef;
}

.article-header__categories {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.article-header__tag {
  /* Batch 7: merged override from the former parity-pass section. The parity
     block won every shared property: display inline-block -> inline-flex,
     padding 4px 12px -> 4px 10px, font-weight 600 -> 800, border-radius 3px ->
     999px, added margin-right: 10px, and background-color -> var(--color-main).
     The canonical `background: rgba(255,255,255,0.15)` shorthand is kept FIRST
     (it resets background-image/position to initial exactly as before) and then
     background-color is overridden after it, reproducing the original cascade. */
  display: inline-flex;
  padding: 4px 10px;
  margin-right: 10px;
  background: rgba(255, 255, 255, 0.15);
  background-color: var(--color-main);
  color: var(--color-white);
  font-size: 13px;
  font-weight: 800;
  border-radius: 999px;
}

.article-header__tag:hover {
  background: rgba(255, 255, 255, 0.3);
  color: var(--color-white);
}

/* Author info */
.article-header__author {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}

.article-header__avatar img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

.article-header__author-name {
  color: var(--color-white);
  font-weight: 700;
}

.article-header__author-name:hover {
  color: var(--color-gold);
}

.article-header__author-title {
  font-size: 13px;
  opacity: 0.8;
}

/* Credibility card */
.credibility-card {
  background: rgba(114, 12, 12, 0.06);
  border-radius: 6px;
  padding: 16px 20px;
  margin-bottom: 20px;
}

.credibility-card__reviewer {
  display: flex;
  align-items: center;
  gap: 14px;
}

.credibility-card__photo img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
}

/* Blog post excerpt mirrors the production excerpt treatment. */
.article-excerpt {
  color: var(--color-dark-text);
  font-size: 24px;
  line-height: 1.45;
  font-weight: 300;
  border-bottom: 2px solid var(--color-darker);
  padding-bottom: 24px;
  margin-bottom: 24px;
}

.article-excerpt p {
  margin: 0;
}

.article-jump-links {
  background-color: var(--color-bg-light);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  margin: 0 0 28px;
  padding: 20px;
}

.article-jump-links--mobile {
  display: none;
}

.article-jump-links__title,
.sidebar-article-toc h3 {
  color: var(--color-darker);
  font-size: 17px;
  font-weight: 900;
  line-height: 1.2;
  margin: 0 0 12px;
}

.article-jump-links ol,
.sidebar-article-toc ol {
  display: grid;
  gap: 9px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.article-jump-links a,
.sidebar-article-toc a {
  color: var(--color-link);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.35;
  text-decoration: none;
}

.article-jump-links a:hover,
.article-jump-links a:focus-visible,
.sidebar-article-toc a:hover,
.sidebar-article-toc a:focus-visible {
  color: var(--color-link-hover);
  text-decoration: underline;
}

.article-jump-links__item--level-3,
.sidebar-article-toc__item--level-3 {
  padding-left: 14px;
}

.sidebar-article-toc {
  position: sticky;
  top: 18px;
}

.article-soft-cta {
  align-items: center;
  background-color: #fff8ee;
  border: 2px solid var(--color-gold);
  border-radius: 8px;
  display: flex;
  gap: 24px;
  justify-content: space-between;
  margin: 34px 0 10px;
  padding: 24px;
}

.article-soft-cta strong {
  color: var(--color-darker);
  display: block;
  font-size: 21px;
  line-height: 1.25;
  margin-bottom: 6px;
}

.article-soft-cta p {
  margin: 0;
}

.article-soft-cta a {
  border: 2px solid var(--color-main);
  border-radius: 999px;
  color: var(--color-main);
  flex: 0 0 auto;
  font-weight: 900;
  padding: 12px 18px;
  text-decoration: none;
}

.article-soft-cta a:hover,
.article-soft-cta a:focus-visible {
  background-color: var(--color-main);
  color: var(--color-white);
}

.article-post-categories {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 28px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
}

.article-post-categories a {
  color: var(--color-link);
  font-weight: 700;
  text-decoration: none;
}

.article-post-categories a:hover {
  color: var(--color-link-hover);
}

.reviewer-section {
  background-color: var(--color-reviewer-bg);
  padding: 50px var(--section-padding);
}

.reviewer-section__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
}

.reviewer-card {
  background-color: var(--color-white);
  border-radius: 6px;
  padding: 32px;
  box-shadow: var(--shadow-card-inner);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.reviewer-card__head {
  display: flex;
  align-items: center;
  gap: 20px;
}

.reviewer-card__head img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 8px;
}

.reviewer-card__eyebrow {
  font-size: 14px;
}

.reviewer-card__name {
  color: #353535;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.15;
}

.reviewer-card__title {
  color: var(--color-medium-text);
}

.reviewer-card__reviewed {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: rgba(137, 48, 2, 0.1);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 14px;
}

.reviewer-card__reviewed span {
  color: #bc3232;
  font-weight: 800;
}

.reviewer-card p,
.reviewer-card__editorial {
  font-size: 16px;
  line-height: 1.65;
}

.reviewer-card__editorial {
  border-top: 1px solid var(--color-border);
  padding-top: 16px;
}

.reviewer-card__bio {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  color: var(--color-main);
  border: 0.5px solid #c6c6c6;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 18px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

.reviewer-card__bio:hover {
  color: var(--color-white);
  background-color: var(--color-main);
  border-color: var(--color-main);
}

/* Related articles */
.related-articles {
  background: var(--color-bg-light);
  padding: 40px var(--section-padding);
}

.related-articles__inner {
  max-width: var(--max-width);
  margin: 0 auto;
}

.related-articles__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

/* Batch 7: deleted the dead .consultation-cta* family (.consultation-cta,
   .consultation-cta__inner, .consultation-cta h2, and the parity-pass copies
   plus responsive overrides). consultation-cta.php was removed in an earlier
   batch; 0 PHP/JS refs remain. The live footer consult block uses
   .site-footer__consultation*. */

/* --- Blog archive cards --- */
.post-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.post-card {
  background: var(--color-white);
  border-radius: 3px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: box-shadow 0.2s;
}

.post-card__image img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.post-card__content {
  padding: 16px;
}

.post-card__title {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 8px;
  line-height: 1.3;
}

.post-card__title a {
  color: var(--color-heading);
  text-decoration: none;
}

.post-card__title a:hover {
  color: var(--color-main);
}

.post-card__excerpt {
  font-size: 14px;
  color: var(--color-medium-text);
  margin-bottom: 12px;
}

.post-card__date {
  font-size: 13px;
  color: var(--color-muted-text);
}

/* --- Responsive: layouts stack on mobile --- */
@media (max-width: 991px) {
  .content-wrapper--page,
  .content-wrapper--single,
  .content-wrapper--professional {
    flex-direction: column;
  }

  .content-wrapper--page > .content-area,
  .content-wrapper--page > .sidebar,
  .content-wrapper--single > .content-area,
  .content-wrapper--single > .sidebar,
  .content-wrapper--professional > .content-area,
  .content-wrapper--professional > .sidebar {
    width: 100%;
    flex: none;
  }

  .sidebar {
    position: static;
  }

  .article-header__content {
    width: 100%;
    flex: none;
    max-width: 100%;
  }

  .article-header__media {
    width: 100%;
    flex: none;
  }

  .article-header__columns,
  .article-header__meta {
    flex-direction: column;
    align-items: flex-start;
  }

  .article-header__divider {
    display: none;
  }

  .sidebar-article-toc {
    position: static;
  }

  .article-soft-cta {
    align-items: flex-start;
    flex-direction: column;
  }

  .reviewer-section__inner {
    grid-template-columns: 1fr;
  }

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

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

@media (max-width: 767px) {
  .article-jump-links--mobile {
    display: block;
  }

  .site-main--single .template-sidebar {
    display: none;
  }

  .related-articles__grid {
    grid-template-columns: 1fr;
  }

  .post-grid {
    grid-template-columns: 1fr;
  }

  .article-header__title {
    font-size: 1.6rem;
  }

  .article-excerpt {
    font-size: 19px;
  }

  .reviewer-card {
    padding: 24px;
  }

  .reviewer-card__head {
    align-items: flex-start;
  }
}

/* Card utility classes */
.card-box {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.card-title {
  min-height: 30px;
}

.card-desc {
  margin-top: auto;
}

/* ==========================================================================
   5. HEADER
   Semantic custom-theme header structure
   ========================================================================== */

/* ---- 5a. Desktop header wrapper ---- */
.site-header--desktop {
  z-index: 100;
  position: sticky;
  top: 0;
  display: block;
  box-shadow: var(--shadow-header);
  background-color: var(--color-white);
}

.porter-clone-banner {
  width: 100%;
  padding: 8px 24px;
  background-color: #2f1a10;
  color: var(--color-white);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}

.porter-clone-banner__text {
  display: inline-block;
  max-width: 1200px;
}

.site-header__inner {
  max-width: 100%;
  padding: 0;
  display: flex;
  flex-direction: column;
}

/* ---- 5b. Logo / contact bar ---- */
.site-header__topbar {
  width: 100%;
  flex-direction: row;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 40px;
  background-color: var(--color-white);
  gap: 32px;
}

.site-header__brand {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

/* Desktop logo */
.site-header__wordmark {
  width: min(500px, 44vw);
  height: auto;
  flex-shrink: 0;
}

/* Production P mark used beside the desktop wordmark */
.site-header__mark {
  width: 80px;
  height: auto;
  display: block;
  flex-shrink: 0;
}

.header-contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: left;
  color: var(--color-main);
  font-size: 17px;
  line-height: 1.4;
}

.header-contact__phone {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--color-link);
  font-weight: 800;
  text-decoration: none;
}

.header-contact__icon {
  color: var(--color-main);
  line-height: 1;
  display: inline-flex;
}

.header-contact__icon svg {
  width: 30px;
  height: 30px;
  fill: currentColor;
}

.header-contact__label {
  color: var(--color-darker);
  font-weight: 400;
  font-size: 16px;
}

/* Navigation center wrapper */
.header-nav-center {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 20px;
  background-color: var(--color-main);
  min-height: 57px;
  overflow: visible;
  position: relative; /* positioned ancestor for the .header-search-form overlay */
}

.header-search-link {
  width: 50px;
  min-height: 57px;
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.header-search-link span {
  width: 26px;
  height: 26px;
  border: 2px solid var(--color-white);
  border-radius: 50%;
  position: relative;
}

.header-search-link span::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 2px;
  background-color: var(--color-white);
  right: -8px;
  bottom: 1px;
  transform: rotate(45deg);
}

.header-search-link:hover span {
  border-color: #e8a07d;
}

.header-search-link:hover span::after {
  background-color: #e8a07d;
}

/* Primary nav container */
.site-header__primary-nav {
  flex: 0 1 auto;
  display: flex;
  justify-content: center;
  align-items: stretch;
}

/* Secondary nav container */
.site-header__contact-nav {
  display: flex;
  background-color: var(--color-secondary-nav);
}

/* ---- 5d. Nav menu styles ---- */
/* .nav-menu-list: the <ul> emitted by porter_render_*_menu() in inc/nav.php
   (Batch 6B, was .oxy-nav-menu-list). LOAD-BEARING flex reset. The redundant
   .oxy-nav-menu ancestor selector was dropped — the BEM-twin selectors below
   (and the .mobile-nav-panel one) already cover every render site. */
.site-header__primary-menu .nav-menu-list,
.site-header__contact-menu .nav-menu-list {
  display: flex;
  flex-direction: row;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-header__primary-nav .menu-item > a {
  padding: 0 17px;
  color: var(--color-white);
  font-weight: 500;
  transition: background-color 0.2s, color 0.2s;
  display: flex;
  align-items: center;
  text-decoration: none;
  font-size: 16px;
  min-height: 57px;
}

.site-header__primary-nav .menu-item:hover > a,
.site-header__primary-nav .menu-item:focus-within > a {
  background-color: var(--color-darker);
  color: var(--color-white);
}

/* Dropdown / Sub-menu */
.site-header__primary-nav .menu-item {
  position: relative;
}

.site-header__primary-nav .sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: var(--color-darker);
  min-width: 220px;
  z-index: 200;
  list-style: none;
  padding: 0;
  margin: 0;
  transition: opacity 0.2s;
}

.site-header__primary-nav .menu-item:hover > .sub-menu,
.site-header__primary-nav .menu-item:focus-within > .sub-menu {
  display: block;
}

/* QA (Porter QA 4 §6): the Practice Areas dropdown lists ~20 entries and ran
   off the bottom of the screen — items past "Motorcycle Accidents" were
   unreachable because the absolutely-positioned dropdown had no max-height and
   could not scroll. Cap first-level dropdowns to the space beneath the sticky
   header (~168px desktop; the buffer also covers the non-production env banner)
   and let them scroll. Scoped to first-level menus only so any side-flyout
   sub-sub-menu (positioned at left:100%) is left untouched. */
.site-header__primary-nav .nav-menu-list > .menu-item > .sub-menu {
  max-height: calc(100vh - 200px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.site-header__primary-nav .sub-menu .menu-item a {
  border: 0;
  padding: 10px 30px;
  white-space: nowrap;
  color: var(--color-white);
}

.site-header__primary-nav .sub-menu .menu-item a:hover {
  background-color: var(--color-main);
}

/* Sub-sub-menus */
.site-header__primary-nav .sub-menu .sub-menu {
  top: 0;
  left: 100%;
}

/* Dropdown arrow */
.site-header__primary-nav .menu-item-has-children > a::after,
.site-header__contact-nav .menu-item-has-children > a::after {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 6px;
  vertical-align: middle;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--color-white);
  transition: border-color 0.2s;
}

.site-header__primary-nav .menu-item-has-children:hover > a::after,
.site-header__contact-nav .menu-item-has-children:hover > a::after {
  border-top-color: var(--color-white);
}

.site-header__primary-nav .sub-menu .menu-item-has-children > a::after {
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 5px solid var(--color-white);
  margin-left: 8px;
}

/* ---- 5e. Secondary nav — inline with primary ---- */
.site-header__contact-nav {
  display: flex;
}

.site-header__contact-nav .nav-menu-list,
.site-header__contact-menu .nav-menu-list {
  display: flex;
  flex-direction: row;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-header__contact-nav .menu-item a {
  padding: 0 20px;
  color: var(--color-white);
  font-weight: 700;
  display: flex;
  align-items: center;
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s;
  font-size: 16px;
  min-height: 57px;
}

.site-header__contact-nav .menu-item:hover > a {
  background-color: var(--color-secondary-nav-hover);
  color: var(--color-white);
}

.site-header__contact-nav .sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: var(--color-darker);
  min-width: 200px;
  z-index: 200;
  list-style: none;
  padding: 0;
  margin: 0;
}

.site-header__contact-nav .sub-menu .menu-item a {
  color: var(--color-white);
  padding: 10px 20px;
  white-space: nowrap;
}

.site-header__contact-nav .sub-menu .menu-item a:hover {
  background-color: var(--color-main);
}

.site-header__contact-nav .menu-item {
  position: relative;
}

.site-header__contact-nav .menu-item:hover > .sub-menu {
  display: block;
}

/* ---- 5f. Mobile hamburger ---- */
/* Mobile menu toggle assembly (Batch 6B). LOAD-BEARING — JS binds the open/close
   handler via [data-mobile-nav-toggle]; these classes are the only style hooks.
   Renamed from Oxygen builder classes:
     .menu-toggle        (was .oxy-menu-toggle)            — the <button>
     .menu-toggle__box   (was .oxy-nav-menu-hamburger-wrap) — outer 28px square
     .menu-toggle__bars  (was .oxy-nav-menu-hamburger)      — the 3-bar column
     .menu-toggle__bar   (was .oxy-nav-menu-hamburger-line) — each of the 3 bars
   Do not remove. */
.menu-toggle {
  display: none;
  cursor: pointer;
  background: transparent;
  border: 0;
  padding: 0;
}

.menu-toggle__box {
  width: 28px;
  height: 28px;
  margin: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.menu-toggle__bars {
  width: 28px;
  height: 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.menu-toggle__bar {
  height: 4px;
  background-color: var(--color-white);
  width: 100%;
  border-radius: 2px;
}

/* Secondary nav hamburger — larger */
.site-header__contact-nav .menu-toggle__box {
  width: 40px;
  height: 40px;
}

.site-header__contact-nav .menu-toggle__bars {
  width: 40px;
  height: 32px;
}

.site-header__contact-nav .menu-toggle__bar {
  height: 6px;
}

/* Batch 6A: deleted dead .oxy-nav-menu-open overlay blocks (5 rules).
   The live mobile menu uses .mobile-nav-panel + .is-open set by main.js via
   [data-mobile-nav-toggle]; JS never adds .oxy-nav-menu-open, so these were orphans. */

/* ---- 5g. Mobile header container ---- */
.mobile-site-header {
  display: none;
  background-color: var(--color-white);
  box-shadow: var(--shadow-header);
  position: sticky;
  top: 0;
  z-index: 400;
}

.mobile-site-header__bar {
  display: flex;
  width: 100%;
  flex-direction: row;
  justify-content: space-between;
  background-color: var(--color-white);
  align-items: center;
  padding: 10px 20px;
  min-height: 76px;
  position: relative;
}

.mobile-site-header__logo {
  width: 50px;
  height: auto;
  display: block;
}

.mobile-site-header__actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
  margin-left: auto;
}

.mobile-site-header__phone {
  align-items: center;
  color: var(--color-main);
  display: inline-flex;
  height: 44px;
  justify-content: center;
  text-decoration: none;
  width: 44px;
}

.mobile-site-header__phone .header-contact__icon {
  color: inherit;
}

.mobile-site-header__phone:hover,
.mobile-site-header__phone:focus-visible {
  color: var(--color-link);
}

.mobile-site-header .menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  height: 44px;
  padding: 0;
  width: 44px;
}

.mobile-site-header .menu-toggle__bar {
  background-color: var(--color-main);
  height: 3px;
}

.mobile-site-header__search {
  width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.mobile-site-header__search span {
  width: 24px;
  height: 24px;
  border: 2px solid var(--color-main);
  border-radius: 50%;
  position: relative;
}

.mobile-site-header__search span::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 2px;
  right: -8px;
  bottom: 0;
  background-color: var(--color-main);
  transform: rotate(45deg);
}

.mobile-site-header__search:hover span,
.mobile-site-header__search:focus-visible span {
  border-color: var(--color-link);
}

.mobile-site-header__search:hover span::after,
.mobile-site-header__search:focus-visible span::after {
  background-color: var(--color-link);
}

.mobile-site-header__contact {
  display: none;
}

.mobile-site-header__contact:hover,
.mobile-site-header__contact:focus-visible {
  background-color: var(--color-secondary-nav-hover);
  color: var(--color-white);
}

@media (max-width: 360px) {
  .mobile-site-header__bar {
    padding-left: 14px;
    padding-right: 14px;
  }

  .mobile-site-header__actions {
    gap: 12px;
  }

}

/* Mobile nav panel */
.mobile-nav-panel {
  display: none;
  background-color: var(--color-nav-overlay);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  overflow-y: auto;
  /* Hide the scrollbar so it stops reserving a right-edge gutter. Without this,
     desktop-simulated-mobile (classic scrollbars) narrows the content box and
     the sticky close button — pushed right with margin-left:auto — lands a
     scrollbar-width short of the true right edge. Reclaiming the gutter lets the
     ✕ sit flush right. The panel still scrolls by touch/wheel; full-screen
     mobile overlays conventionally show no scrollbar anyway. */
  scrollbar-width: none; /* Firefox */
}

/* WebKit/Blink half of the scrollbar-gutter reclaim above. */
.mobile-nav-panel::-webkit-scrollbar {
  display: none;
}

.mobile-nav-panel.is-open {
  display: block;
}

.mobile-nav-panel__inner {
  position: relative;
  max-width: 100%;
  min-height: 100%;
  padding: 0 0 24px;
}

.mobile-nav-panel__close {
  position: sticky;
  top: 0;
  margin-left: auto;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background-color: var(--color-darker);
  color: var(--color-white);
  font-size: 36px;
  line-height: 1;
  cursor: pointer;
  z-index: 1;
}

.mobile-nav-panel__close:hover,
.mobile-nav-panel__close:focus-visible {
  background-color: var(--color-secondary-nav-hover);
  outline: 2px solid var(--color-white);
  outline-offset: -6px;
}

.mobile-nav-panel .nav-menu-list {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: 100% !important;
  list-style: none;
  padding: 0;
  margin: 0;
}

.mobile-nav-panel .menu-main-container,
.mobile-nav-panel__menu {
  display: block !important;
  width: 100% !important;
}

.mobile-nav-panel .menu-item {
  display: block !important;
  width: 100% !important;
  float: none !important;
}

.mobile-nav-panel .menu-item a {
  display: block;
  padding: 15px 20px;
  color: var(--color-white);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  font-weight: 500;
}

.mobile-nav-panel .sub-menu {
  position: static !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  transform: none !important;
  display: none;
  list-style: none;
  padding: 0;
  margin: 0;
  background: rgba(0, 0, 0, 0.15);
}

.mobile-nav-panel .sub-menu.open {
  display: block;
}

.mobile-nav-open {
  overflow: hidden;
}

/* Mobile CTA buttons */
.mobile-cta-buttons,
.mobile-nav-cta {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  background-color: transparent;
  border: 0;
  font-size: 16px;
}

.mobile-cta-buttons .button,
.mobile-nav-cta .button {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 14px 20px;
  color: var(--color-white);
  text-decoration: none;
  font-weight: 700;
  border-radius: 3px;
  background-color: var(--color-darker);
  border-color: var(--color-darker);
}

/* Mobile hamburger lines — brown on white bg for secondary */
.mobile-nav-panel .menu-toggle__bar {
  background-color: var(--color-white);
}

/* ---- 5h. Search overlay ---- */
.header-search-form {
  background: var(--color-bg-search);
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  opacity: 0;
  overflow: hidden;
  visibility: hidden;
  z-index: 99;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-search-form.visible {
  opacity: 1;
  visibility: visible;
}

.header-search-form input[type="search"] {
  font-size: 2.5rem;
  border: none;
  background: transparent;
  outline: none;
  width: 80%;
  font-family: var(--font-family);
}

.header-search-open {
  color: var(--color-white);
  font-size: 26px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

.header-search-close {
  margin-left: 12px;
}

@media (max-width: 767px) {
  .header-search-form input[type="search"] {
    font-size: 1.5rem;
    width: 70%;
  }
}

.header-search-open:hover {
  color: #e8a07d;
}

.header-search-close {
  cursor: pointer;
  background: none;
  border: none;
  font-size: 26px;
}

.header-search-close:hover {
  color: var(--color-main);
}

/* ==========================================================================
   6. BREADCRUMBS
   ========================================================================== */
.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 14px;
  color: var(--color-text);
}

.breadcrumbs a {
  color: var(--color-link);
  font-weight: 400;
}

.breadcrumbs a:hover {
  color: var(--color-link-hover);
}

.breadcrumbs .separator {
  margin: 0 4px;
  color: var(--color-text);
}

.porter-breadcrumbs ol {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.porter-breadcrumbs li {
  color: var(--color-link);
  display: inline-flex;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
}

.porter-breadcrumbs li + li::before {
  color: var(--color-medium-text);
  content: "\00a0\00bb\00a0";
  font-weight: 700;
}

.porter-breadcrumbs a {
  color: var(--color-link);
  text-decoration: underline;
}

.porter-breadcrumbs a:hover,
.porter-breadcrumbs a:focus-visible {
  color: var(--color-link-hover);
}

.article-header__breadcrumbs {
  margin-bottom: 24px;
}

.article-header__breadcrumbs .porter-breadcrumbs li,
.article-header__breadcrumbs .porter-breadcrumbs a,
.article-header__breadcrumbs .porter-breadcrumbs li + li::before {
  color: rgba(255, 255, 255, 0.92);
}

.location-breadcrumbs,
.cancer-breadcrumbs {
  background-color: var(--color-white);
  border-bottom: 1px solid rgba(137, 48, 2, 0.14);
}

.location-breadcrumbs .section-inner,
.cancer-breadcrumbs .section-inner {
  padding-bottom: 14px;
  padding-top: 14px;
}

.professional-breadcrumbs {
  margin-bottom: 20px;
  width: 100%;
}

/* ==========================================================================
   7. CONTENT LAYOUTS
   ========================================================================== */

/* ---- 7a. 65/35 — Content Left / Sidebar Right (PorterContent, page.php) ---- */
.layout-65-35 {
  display: flex;
  flex-wrap: wrap;
}

.layout-65-35 > .content-main {
  width: 65%;
  padding: 20px;
}

.layout-65-35 > .content-sidebar {
  width: 35%;
  padding-left: 0;
  padding-right: 0;
  box-shadow: var(--shadow-sidebar);
}

/* ---- 7b. 70/30 — Content Left / Sidebar Right (Blog, single.php) ---- */
.layout-70-30 {
  display: flex;
  flex-wrap: wrap;
}

.layout-70-30 > .content-main {
  width: 70%;
  padding: 20px;
}

.layout-70-30 > .content-sidebar {
  width: 30%;
  padding: 20px;
}

/* ---- 7c. 35/65 — Sidebar Left / Content Right (Hospital, Asbestos) ---- */
.layout-35-65 {
  display: flex;
  flex-wrap: wrap;
}

.layout-35-65 > .content-sidebar {
  width: 35%;
  padding-left: 0;
  padding-right: 0;
  box-shadow: var(--shadow-sidebar);
}

.layout-35-65 > .content-main {
  width: 65%;
  padding: 20px;
}

/* Content wrapper card (practice area pages) */
.content-card {
  width: 100%;
  background-color: var(--color-white);
  box-shadow: var(--shadow-practice-area);
}

/* Page background gradient (practice area) */
.page-bg-gradient {
  background-image: linear-gradient(rgba(137, 48, 2, 0.25), var(--color-white) 200px);
}

/* Page title with bottom border */
.page-title-bordered {
  border-bottom: 0.75px solid var(--color-border-lighter);
  color: var(--color-heading);
  padding-bottom: 10px;
  margin-bottom: 20px;
}

/* Featured image */
.featured-image-cover {
  max-height: 300px;
  width: 100%;
  object-fit: cover;
}

/* ---- 7d. 40/60 — Photo / Bio (Attorney profiles) ---- */
.layout-40-60 {
  display: flex;
  flex-wrap: wrap;
}

.layout-40-60 > .content-photo {
  width: 40%;
  padding: 20px;
}

.layout-40-60 > .content-bio {
  width: 60%;
  padding: 20px;
}

/* ---- 7e. 50/50 — Equal columns (Location pages) ---- */
.layout-50-50 {
  display: flex;
  flex-wrap: wrap;
}

/* Batch 6D: child token retargeted .ct-div-block -> .columns-row__col.
   NOTE: .layout-50-50 has no current markup (orphan rule kept for parity); the
   retarget only strips the builder token. */
.layout-50-50 > .columns-row__col {
  width: 50%;
  padding: 20px;
}

/* ---- 7f. Stats grid (practice area) ---- */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(200px, 1fr));
  grid-column-gap: 0;
  grid-row-gap: 20px;
  width: 100%;
}

.stats-grid .stat-number {
  font-size: 3rem;
  color: var(--color-text);
  text-align: center;
}

.stats-grid .stat-label {
  font-size: 2rem;
  color: var(--color-text);
  font-weight: 400;
  text-align: center;
}

/* ==========================================================================
   8. SIDEBAR COMPONENTS
   ========================================================================== */

/* Sidebar heading */
.sidebar-heading {
  font-size: 24px;
  color: var(--color-darker);
  font-weight: var(--font-weight-heading);
}

/* Sidebar section labels */
.sidebar-label {
  font-size: 20px;
  color: var(--color-darker);
  font-weight: 700;
}

/* Sidebar link items */
.sidebar-link,
.verticalmenustaticitem {
  display: block;
  padding-top: 10px;
  padding-bottom: 10px;
  color: var(--color-link);
  text-decoration: none;
  border-bottom: 0.5px solid var(--color-border-sidebar);
  transition: color 0.2s;
}

.sidebar-link:hover,
.verticalmenustaticitem:hover {
  color: var(--color-link-hover);
}

/* Sidebar CTA box */
/* Batch 7: this is the LATEST .sidebar-cta base definition (there is an earlier
   one in section 4b ~line 440). The former parity-pass .sidebar-cta override
   (background rgba(137,48,2,0.21), padding 26px) is merged in here so the
   source-order cascade — and thus the computed style — is preserved exactly.
   width:100% and color (white, from the ~line 440 rule) carry through. */
.sidebar-cta {
  width: 100%;
  background-color: rgba(137, 48, 2, 0.21);  /* merged: var(--color-main) -> rgba */
  padding: 26px;                             /* merged: 20px -> 26px */
}

.sidebar-cta-text {
  color: var(--color-white);
  font-size: 20px;
}

.sidebar-cta-phone {
  color: var(--color-white);
  font-size: 30px;
  border-radius: 5px;
  border: 1px solid var(--color-white);
  text-decoration: none;
  display: inline-block;
  padding: 8px 16px;
}

.sidebar-cta-phone:hover {
  color: var(--color-white);
  opacity: 0.9;
}

/* Sidebar CTA button (orange) */
.sidebar-cta-button {
  background-color: var(--color-cta-orange-alt);
  border: 1px solid var(--color-cta-orange-alt);
  color: var(--color-white);
  font-size: 24px;
  padding: 10px 16px;
  border-radius: 3px;
  display: inline-block;
  text-decoration: none;
  text-align: center;
  width: 100%;
  transition: background-color 0.4s, border-color 0.4s;
}

.sidebar-cta-button:hover {
  background-color: var(--color-cta-orange-hover);
  border-color: var(--color-cta-orange-hover);
  color: var(--color-white);
}

/* Sidebar phone/contact icons */
.sidebar-icon {
  color: var(--color-main);
}

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

/* Sidebar embedded content sizing */
.sidebar-embed-lg {
  font-size: 1.3rem;
}

.sidebar-embed-sm {
  font-size: 1rem;
}

/* Batch 6A: deleted dead .oxy-nav-menu-vertical blocks (3 rules).
   .oxy-nav-menu-vertical appears in zero PHP and zero JS — pure orphan. */

/* ==========================================================================
   9. BUTTONS
   ========================================================================== */

/* ---- 9a. Default button base ---- */
.btn {
  display: inline-block;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  font-family: var(--font-family);
  font-weight: 600;
  border: 1px solid transparent;
  border-radius: 3px;
  transition: all 0.4s;
}

.btn:hover {
  color: var(--color-white);
}

/* .button: the base link-button appearance (Batch 6F, was .ct-link-button).
   LOAD-BEARING base — co-classes like .porter-button / .cancer-button / .btn-m
   layer on top (and override where they define later in the cascade), but on
   call sites with only a sizing co-class this rule supplies the button look.
   Do not remove. */
.button {
  display: inline-block;
  background-color: var(--color-button-blue);
  border: 1px solid var(--color-button-blue);
  color: var(--color-white);
  padding: 10px 16px;
  border-radius: 3px;
  font-family: var(--font-family);
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: all 0.4s;
}

.button:hover {
  opacity: 0.9;
  color: var(--color-white);
}

/* ---- 9b. Button sizes ---- */
.btn-l {
  padding: 1.2rem 6.4rem;
  font-weight: 600;
  font-size: 1.8rem;
  border-radius: 0.8rem;
  transition: background-color 0.4s, border-color 0.4s, color 0.4s, box-shadow 0.4s;
}

.btn-m {
  padding: 1.2rem 3.2rem;
  font-weight: 600;
  font-size: 1.6rem;
  border-radius: 0.6rem;
  transition: background-color 0.4s, border-color 0.4s, color 0.4s, box-shadow 0.4s;
}

.btn-s {
  padding: 0.8rem 2.4rem;
  font-weight: 600;
  font-size: 1.4rem;
  border-radius: 0.4rem;
  transition: background-color 0.4s, border-color 0.4s, color 0.4s, box-shadow 0.4s;
}

/* ---- 9c. Button colors ---- */

/* CTA Orange */
.btn-cta,
.btn-orange {
  background-color: var(--color-cta-orange);
  border-color: var(--color-cta-orange);
  color: var(--color-white);
}

.btn-cta:hover,
.btn-orange:hover {
  background-color: var(--color-cta-orange-hover);
  border-color: var(--color-cta-orange-hover);
  color: var(--color-white);
}

/* Primary (dark brown) */
.btn-primary {
  background-color: var(--color-main);
  border-color: var(--color-main);
  color: var(--color-white);
  box-shadow: 0 4px 9px rgba(137, 48, 2, 0.2);
  transition: all 0.4s;
}

.btn-primary:hover {
  background-color: var(--color-darker);
  box-shadow: 0 8px 9px rgba(137, 48, 2, 0.25);
}

/* Secondary */
.btn-secondary {
  background-color: var(--color-darker);
  border-color: var(--color-darker);
  color: var(--color-white);
  box-shadow: 0 4px 9px rgba(81, 35, 13, 0.2);
  transition: all 0.4s;
}

.btn-secondary:hover {
  background-color: var(--color-main);
  box-shadow: 0 8px 9px rgba(81, 35, 13, 0.25);
}

a.btn-primary,
a.btn-primary:visited,
a.btn-primary:focus-visible,
a.btn-secondary,
a.btn-secondary:visited,
a.btn-secondary:focus-visible {
  color: var(--color-white);
}

/* White */
.btn-white {
  color: var(--color-dark-text);
  background-color: var(--color-white);
  border-color: var(--color-white);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  transition: all 0.4s;
}

.btn-white:hover {
  background-color: var(--color-bg-light);
}

/* Video (dark brown — hero "Watch Our Video") */
.btn-video {
  background-color: var(--color-darker);
  border-color: var(--color-darker);
  color: var(--color-white);
}

.btn-video:hover {
  background-color: var(--color-main);
  border-color: var(--color-main);
  color: var(--color-white);
}

/* Transparent */
.btn-trans {
  color: var(--color-white);
  background-color: rgba(255, 255, 255, 0.15);
  border-color: transparent;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  transition: all 0.4s;
}

.btn-trans:hover {
  background-color: var(--color-white);
  color: var(--color-main);
}

/* Batch 7: deleted dead OxyMade .saas-secondary-button + :hover (0 PHP/JS refs). */

/* ---- 9d. Specific CTA buttons ---- */

/* Homepage hero CTA (large orange) */
.hero-cta-primary {
  background-color: var(--color-cta-orange);
  border: 1px solid var(--color-cta-orange);
  font-size: 24px;
  color: var(--color-white);
}

.hero-cta-primary:hover {
  background-color: var(--color-cta-orange);
  border-color: var(--color-cta-orange);
  color: var(--color-white);
}

/* Watch Video button */
.hero-cta-video {
  background-color: var(--color-darker);
  border: 1px solid var(--color-darker);
  font-size: 2rem;
  color: var(--color-white);
}

/* Mobile nav CTA button */
.mobile-nav-cta {
  background-color: transparent;
  border: 0;
  font-size: 16px;
  color: var(--color-white);
  display: flex;
  text-align: center;
  margin: 0;
  border-radius: 0;
}

/* Full-width button variant */
.btn-full {
  display: block;
  width: 100%;
  text-align: center;
}

/* ==========================================================================
   10. CARDS
   ========================================================================== */

/* ---- 10a. Practice area cards (homepage grid) ---- */
.practice-area-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(30%, 1fr));
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  width: 100%;
  text-align: left;
}

/* Batch 6A: deleted dead OxyMade duplicate blocks here —
   .dentist-services-page-column, .practicediv, .practicediv:hover,
   the 60px .practiceareaicon, and a dead .practiceareasplashtext.
   These were superseded by the live .practice-areas__card / __card-inner /
   __icon / __card-title rules (section 10c area) — zero markup referenced them. */

/* ---- 10b. Case result cards ---- */
.case-results-block {
  font-family: Arial, sans-serif;
  background-color: var(--color-main);
  border-left: 5px solid var(--color-case-result-border);
  border-radius: 4px;
  padding: 20px;
  color: var(--color-white);
  box-shadow: var(--shadow-case-result);
  margin-bottom: 20px;
}

.case-results-block .block-title {
  text-align: center;
  font-size: 28px;
  margin-bottom: 20px;
  color: var(--color-white);
}

.case-results-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.case-result {
  flex: 1 1 calc(20% - 10px);
  margin: 5px;
  text-align: center;
  padding: 10px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

.case-amount {
  font-size: 20px;
  font-weight: bold;
  display: block;
  margin-bottom: 5px;
  color: var(--color-white);
}

.case-description {
  font-size: 14px;
  margin: 0;
  color: var(--color-white);
}

/* Top section header bar */
.top-section {
  background-color: var(--color-case-result-dark);
  padding: 20px;
  margin-bottom: 20px;
  border-radius: 4px 4px 0 0;
}

.top-section-content {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.top-section h2 {
  font-size: 24px;
  margin: 0;
  color: var(--color-white);
}

.top-section p {
  font-size: 16px;
  margin: 0;
  color: var(--color-white);
}

/* "See All Results" slim button */
.slim-button {
  display: block;
  width: 100%;
  padding: 8px 0;
  background-color: var(--color-white);
  color: var(--color-main);
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
  border-radius: 4px;
  margin-bottom: 15px;
  transition: background-color 0.3s, color 0.3s;
}

.slim-button:hover {
  background-color: rgba(255, 255, 255, 0.25);
  color: var(--color-white);
}

/* Contact button in case results */
.contact-button {
  background-color: var(--color-white);
  color: var(--color-case-result-dark);
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 4px;
  font-weight: bold;
  transition: background-color 0.3s, color 0.3s;
  display: inline-block;
}

.contact-button:hover {
  background-color: rgba(222, 222, 222, 0.15);
  color: var(--color-case-result-dark);
}

/* Homepage dynamic list case result cards */
.case-result-card-home {
  width: 100%;
  border: 2px solid var(--color-darker);
  border-radius: 20px;
  border-bottom-left-radius: 0;
  background-color: var(--color-main);
  transition: background-color 0.3s;
  text-align: left;
  padding: 20px;
}

.case-result-card-home:hover {
  background-color: rgba(137, 48, 2, 0.6);
  cursor: pointer;
}

.case-result-amount {
  font-size: 3rem;
  color: var(--color-white);
  font-weight: 800;
}

.case-result-amount-dark {
  font-size: 3rem;
  color: var(--color-darker);
  font-weight: 800;
}

/* Case result info rows */
.case-result-row {
  width: 100%;
  box-shadow: var(--shadow-card);
  padding: 16px;
  margin-bottom: 16px;
  background-color: var(--color-white);
}

.case-result-row-inner {
  width: 100%;
  gap: 10px;
  justify-content: space-between;
  display: flex;
  align-items: center;
}

.case-result-icon-group {
  text-align: left;
  flex-direction: row;
  display: flex;
  gap: 10px;
  align-items: center;
}

.case-result-row .amount-text {
  color: var(--color-main);
  font-weight: 700;
}

/* ---- 10c. Result card (verdict ticker) ---- */
.resultcard {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 20px;
  color: var(--color-white);
  text-decoration: none;
  transition: opacity 0.3s;
  text-align: center;
}

.resultcard:hover {
  opacity: 0.85;
  color: var(--color-white);
}

/* ---- 10d. Team member cards (carousel) ---- */
.team-card {
  padding: 16px;
  text-align: center;
}

.team-card img {
  width: 100%;
  max-width: 250px;
  border-radius: 4px;
  margin: 0 auto 10px;
}

.team-card .name {
  font-weight: 700;
  color: var(--color-heading);
}

.team-card .title {
  color: var(--color-text);
  font-size: 14px;
}

/* ---- 10e. Testimonial cards ---- */
.testimonial-card {
  padding: 20px;
  text-align: center;
}

.testimonial-card blockquote,
.testimonial-card .review-text {
  font-style: italic;
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--color-text);
  margin-bottom: 10px;
}

.testimonial-card .reviewer-name {
  font-weight: 700;
  color: var(--color-heading);
}

/* ---- 10f. Credential logos ---- */
.credlogo {
  width: 140px;
  height: auto;
  object-fit: contain;
}

/* ---- 10g. Credibility card (expert review) ---- */
.credibilitycard {
  background-color: var(--color-reviewer-bg);
  border-radius: 4px;
  padding: 24px;
}

.credibilitycard .reviewer-photo {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
}

.credibilitycard .reviewer-info {
  display: flex;
  gap: 16px;
  align-items: center;
}

/* ==========================================================================
   11. HOMEPAGE SECTIONS
   ========================================================================== */

/* Batch 7: deleted the entire legacy (pre-BEM) homepage section 11 — the
   14 non-BEM classes .hero-section, .hero-headline, .hero-subheadline,
   .hero-body-text, .verdict-ticker, .credentials-bar, .credentials-row,
   .section-heading-large/-xl, .section-subheading, .practice-heading-brown,
   .icon-gold, .testimonials-section, .section-light-bg. All had ZERO
   references across the theme PHP templates and theme JS (grep-verified).
   They were superseded by the BEM section 11-HP below (.hero__*, .credentials__*,
   .case-results__*, .practice-areas__*, .reviews__*), which front-page.php
   actually emits.
   FLAGGED, KEPT: the BEM .verdict-ticker / .verdict-ticker__inner / __row
   selectors in 11-HP are currently unreferenced too, but they are grouped with
   the LIVE .results-slider* marquee rules (right next to @keyframes
   porter-results-marquee). Removing them risks the protected marquee block and
   gains nothing visually, so they are deliberately left as dead co-selectors. */

/* ==========================================================================
   11-HP. HOMEPAGE SECTIONS — BEM selectors (front-page.php)
   These target the actual class names used in the PHP templates.
   ========================================================================== */

/* ---- Common inner-wrap pattern for homepage sections ---- */
.hero__inner,
.results-slider__inner,
.verdict-ticker__inner,
.credentials__inner,
.divider-image__inner,
.about-intro__inner,
.case-results__inner,
.team__inner,
.practice-areas__inner,
.reviews__inner {
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
  padding: var(--section-padding);
}

/* ---- 11-HP-a. Hero ---- */
.hero {
  background-image: linear-gradient(rgba(48, 19, 11, 0.8), rgba(48, 19, 11, 0.8)), url('../images/hero-office.jpg');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: #30130b;
  position: relative;
  text-align: left;
  overflow: hidden;
}

.hero__inner {
  padding-top: 108px;
  padding-bottom: 92px;
  max-width: 1260px;
}

.hero__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.78fr);
  align-items: center;
  gap: 44px;
  min-width: 0;
}

.hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
  min-width: 0;
  width: 100%;
}

.hero__headline {
  color: var(--color-light-text);
  font-size: 44px;
  font-weight: 700;
  line-height: 1.15;
  max-width: 100%;
  overflow-wrap: break-word;
}

.hero__subtitle {
  color: var(--color-light-text);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.25;
  max-width: 100%;
  overflow-wrap: break-word;
}

.hero__actions {
  display: flex;
  flex-direction: row;
  gap: 12px;
  margin-top: 4px;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.hero__actions .btn {
  color: var(--color-white);
  font-size: 23px;
  line-height: 1.2;
  min-width: 0;
  padding: 18px 42px;
}

.hero__actions .btn-primary {
  background-color: var(--color-cta-orange);
  border: 2px solid var(--color-cta-orange);
  color: var(--color-white);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.34);
  font-weight: 900;
}

.hero__actions .btn-primary:hover {
  background-color: var(--color-cta-orange-hover);
  border-color: var(--color-cta-orange-hover);
  color: var(--color-white);
}

.hero__actions .btn-outline {
  background-color: transparent;
  border: 2px solid rgba(255, 255, 255, 0.72);
  color: var(--color-white);
}

.hero__actions .btn-outline:hover {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: var(--color-white);
  color: var(--color-white);
}

.hero__actions .btn-cta:hover {
  background-color: var(--color-cta-orange-hover);
  border-color: var(--color-cta-orange-hover);
  color: var(--color-white);
}

.hero__text {
  color: var(--color-white);
  font-size: 20px;
  line-height: 1.6;
  max-width: 1120px;
  margin-top: 0;
}

.hero__text a {
  color: var(--color-white);
  text-decoration: underline;
}

.hero__media {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  min-width: 0;
  width: 100%;
  overflow: hidden;
}

.hero__photo {
  width: 100%;
  aspect-ratio: 2560 / 1656;
  background-color: rgba(58, 24, 12, 0.48);
  object-fit: contain;
  object-position: center;
  border: 4px solid rgba(255, 255, 255, 0.82);
  border-radius: 8px;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.35);
}

/* Tagline under the hero team photo (moved here from the left column —
   "Syracuse & New York State Personal Injury Lawyers"). Small, tracked,
   uppercase so it reads as a caption/label for the photo rather than body copy. */
.hero__media-caption {
  color: rgba(255, 255, 255, 0.92);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.4;
  text-align: center;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.porter-video-modal {
  align-items: center;
  background-color: rgba(0, 0, 0, 0.82);
  bottom: 0;
  display: flex;
  justify-content: center;
  left: 0;
  padding: 24px;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 9999;
}

.porter-video-modal[hidden] {
  display: none;
}

.porter-video-modal__panel {
  background-color: var(--color-darker);
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.44);
  color: var(--color-white);
  max-width: 980px;
  padding: 22px;
  position: relative;
  width: min(980px, calc(100vw - 48px));
}

.porter-video-modal__close {
  align-items: center;
  background-color: var(--color-cta-orange);
  border: 0;
  border-radius: 999px;
  color: var(--color-white);
  cursor: pointer;
  display: flex;
  font-size: 30px;
  font-weight: 900;
  height: 44px;
  justify-content: center;
  line-height: 1;
  position: absolute;
  right: -14px;
  top: -14px;
  width: 44px;
}

.porter-video-modal__close:hover,
.porter-video-modal__close:focus-visible {
  background-color: var(--color-cta-orange-hover);
  outline: 3px solid var(--color-white);
  outline-offset: 2px;
}

/* QA #8: the "Watch Our Video" modal header ("Porter Law Group Real Results")
   read as low-contrast / hard to parse on mobile — the title sat tight against
   the bright orange close button and wrapped into it on narrow panels. Pin the
   header contrast explicitly (white on the dark panel) and give it a clear
   bottom-border separator with guaranteed clearance from the close button so it
   stays legible as its own header band. */
.porter-video-modal__title {
  color: var(--color-white);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 54px 14px 0;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}

/* Batch 7 — BREAKPOINT CANONICALIZATION: was `max-width: 480px`; aligned to the
   canonical phone breakpoint `max-width: 479px`. 1px-boundary note: the
   .porter-video-modal__title override now stops applying at exactly 480px. */
@media (max-width: 479px) {
  /* On small phones the title wrapped into the close button. Smaller type plus
     extra right clearance keeps the full header on its own lines, away from the
     close control, while the white-on-dark contrast stays well above WCAG. */
  .porter-video-modal__title {
    font-size: 19px;
    margin-right: 48px;
  }
}

.porter-video-modal__player {
  aspect-ratio: 16 / 9;
  background-color: var(--color-black);
  display: block;
  height: auto;
  width: 100%;
}

.video-modal-open {
  overflow: hidden;
}

/* ---- 11-HP-b. Verdict Ticker ---- */
.results-slider,
.verdict-ticker {
  background-color: var(--color-verdict-bar);
}

.results-slider__inner,
.verdict-ticker__inner {
  padding-top: 0;
  padding-bottom: 0;
}

.results-slider__viewport {
  overflow: hidden;
  width: 100%;
}

.results-slider__track,
.verdict-ticker__row {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: nowrap;
}

.results-slider__track {
  width: max-content;
  animation: porter-results-marquee 34s linear infinite;
}

.results-slider__viewport:hover .results-slider__track,
.results-slider__viewport:focus-within .results-slider__track {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .results-slider__track {
    animation: none;
  }
}

.results-slider__item,
.resultcard {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 18px 30px;
  text-decoration: none;
  color: var(--color-white);
  transition: background-color 0.2s;
  min-width: 180px;
}

.results-slider__item {
  min-width: 220px;
  flex: 0 0 auto;
}

.results-slider__item:hover,
.resultcard:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--color-white);
}

.results-slider__amount,
.resultcard__amount {
  font-size: 28px;
  font-weight: 800;
  color: var(--color-text);
  line-height: 1.2;
}

.results-slider__type,
.resultcard__type {
  font-size: 17px;
  font-weight: 400;
  color: var(--color-text);
  text-transform: none;
  letter-spacing: 0;
}

@keyframes porter-results-marquee {
  from {
    transform: translateX(-50%);
  }

  to {
    transform: translateX(0);
  }
}

/* ---- 11-HP-c. Credentials / Awards Bar ---- */
.credentials {
  background-color: var(--color-white);
  border-bottom: 0.5px solid var(--color-border-light);
  padding: 20px 0;
}

.credentials__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  max-width: 920px;
}

.credentials__logos {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 80px;
  flex-wrap: wrap;
  flex: 1;
}

.credlogo {
  width: 140px;
  height: auto;
  object-fit: contain;
}

.credentials__badge {
  display: flex;
  align-items: center;
}

/* QA Part 3 §1: the Super Lawyers "Top 50 Upstate New York" badge now uses the
   official Super Lawyers embeddable badge widget (sl-badge v2) for exact parity
   with porterprotects.com — replacing the prior CSS-drawn text approximation.
   The widget renders the orange badge into the [data-slbadge] div via
   superlawyers.com's load.min.js; its size comes from the embed's inline style.
   Cap the width on small screens so the 180px badge never overflows. */
.credentials__badge [data-slbadge] {
  max-width: 100%;
}

/* ---- 11-HP-d. Divider Image ---- */
.divider-image {
  /* Decorative divider section */
}

.divider-image__inner {
  padding-top: 50px;
  padding-bottom: 0;
  display: flex;
  justify-content: center;
}

.divider-image__photo {
  width: min(1000px, 100%);
  height: auto;
  object-fit: cover;
}

/* ---- 11-HP-e. About / Intro ---- */
.about-intro {
  background-color: var(--color-white);
  padding: 20px 0 100px;
}

.about-intro__inner {
  text-align: left;
  max-width: 1120px;
}

.about-intro__tagline {
  font-size: 20px;
  font-weight: 400;
  color: var(--color-text);
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: 10px;
}

.about-intro__heading {
  font-size: 35px;
  color: var(--color-text);
  margin-bottom: 8px;
  max-width: 1100px;
}

.about-intro__subhead {
  font-size: 20px;
  margin-bottom: 30px;
  color: var(--color-text);
}

.about-intro__body {
  font-size: 18px;
  line-height: 1.75;
  max-width: 1100px;
}

.about-intro__body p + p {
  margin-top: 24px;
}

.about-intro__body a {
  color: var(--color-link);
  font-weight: 800;
}

.about-intro__actions {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 36px;
}

.about-intro__actions .btn {
  background-color: var(--color-darker);
  color: var(--color-white);
  min-width: 170px;
  justify-content: center;
}

/* ---- 11-HP-f. Case Results ---- */
.case-results {
  background-color: var(--color-white);
  padding: 0 0 70px;
}

.case-results__header {
  text-align: left;
  margin-bottom: 40px;
}

.case-results__heading {
  font-size: 28px;
  color: var(--color-heading);
  margin-bottom: 10px;
}

.case-results__description {
  font-size: 16px;
  color: var(--color-text);
  max-width: 1100px;
  margin: 0;
}

.case-results__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 48px;
}

/* QA #21: "View More Results" CTA under the trimmed 6-card homepage grid. */
.case-results__more {
  margin-top: 40px;
  text-align: center;
}

.case-results__card {
  text-decoration: none;
  color: inherit;
  display: block;
}

.case-results__card-inner {
  background-color: var(--color-main);
  border: 2px solid var(--color-darker);
  border-radius: 20px;
  border-bottom-left-radius: 0;
  padding: 22px 26px;
  color: var(--color-white);
  box-shadow: var(--shadow-case-result);
  transition: box-shadow 0.2s;
  height: 100%;
  min-height: 155px;
}

.results-tag {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  border-radius: 999px;
  padding: 5px 10px;
  background-color: var(--color-gold-inline);
  color: var(--color-darker);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.1;
  text-transform: uppercase;
}

.results-tag--truck-accident,
.results-tag--car-accident {
  background-color: #f2c66d;
}

.results-tag--birth-injury,
.results-tag--medical-malpractice {
  background-color: #f6d5c4;
}

.results-tag--cancer-misdiagnosis {
  background-color: #d7ead2;
}

.results-tag--construction-injury,
.results-tag--slip-and-fall,
.results-tag--dog-bite {
  background-color: #d9e5f4;
}

.case-results__tag {
  margin-bottom: 16px;
}

.case-results__card:hover .case-results__card-inner {
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

.case-results__card-type {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--color-gold-inline);
  line-height: 1.45;
}

.case-results__card-amount {
  font-size: 30px;
  font-weight: 800;
  color: var(--color-white);
  line-height: 1.1;
  margin-bottom: 12px;
}

.case-results__card-summary {
  color: rgba(255, 255, 255, 0.88);
  font-size: 15px;
  line-height: 1.35;
  margin: 0;
}

/* ---- 11-HP-g. Team ---- */
.team {
  background-color: var(--color-white);
  padding: 40px 0 90px;
}

.team__heading {
  text-align: center;
  font-size: 30px;
  color: var(--color-darker);
  margin-bottom: 56px;
}

.team__inner {
  max-width: 1240px;
  box-shadow: var(--shadow-card-inner);
  padding: 42px 32px;
}

/* QA: match original "Meet Our Legal Team" treatment (porterprotects.com).
   The carousel is a 3-part flex row: prev arrow | scroll viewport | next arrow.
   The viewport (.team__viewport) is the native overflow-x scroll surface that
   main.js binds drag-to-scroll + arrow scrolling to; cards live in a nowrap
   flex .team__track so they form one horizontal strip and clip at the right
   edge to signal "more", exactly like the live Flickity carousel. We use
   native scroll (no transforms/animation) so the frontend-architecture
   verifier's motion ban stays satisfied. */
.team__carousel {
  display: flex;
  align-items: center;
  gap: 14px;
}

.team__viewport {
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 12px 0 26px;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  cursor: grab;
  /* Drag-to-scroll feels broken if the browser hijacks the gesture for
     text selection; main.js toggles .is-dragging to suppress selection. */
}

/* Respect reduced-motion: kill the smooth-scroll easing for users who ask. */
@media (prefers-reduced-motion: reduce) {
  .team__viewport {
    scroll-behavior: auto;
  }
}

.team__viewport.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
  scroll-snap-type: none;
  user-select: none;
}

.team__track {
  display: flex;
  flex-wrap: nowrap;
  gap: 30px;
  justify-content: flex-start;
}

/* Prev/next arrow buttons mirror the original's circular icon controls. */
.team__arrow {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background-color: var(--color-white);
  color: var(--color-main);
  font-size: 20px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-card);
}

.team__arrow:hover,
.team__arrow:focus-visible {
  background-color: var(--color-main);
  color: var(--color-white);
  border-color: var(--color-main);
}

.team__arrow[disabled] {
  opacity: 0.35;
  cursor: default;
}

.team__arrow-icon {
  display: block;
  margin-top: -2px;
}

.team__card {
  text-align: center;
  width: 300px;
  flex: 0 0 300px;
  background-color: var(--color-white);
  box-shadow: var(--shadow-card);
  border-radius: 8px;
  overflow: hidden;
  scroll-snap-align: start;
}

.team__card-link {
  text-decoration: none;
  display: block;
  /* Belt-and-suspenders with the JS dragstart guard (main.js): stop WebKit's
     native link/image drag and text selection so a press on a card photo
     scrolls the carousel instead of starting a "save image" ghost drag. */
  -webkit-user-drag: none;
  user-select: none;
}

/* Photo-fill fix: original cards show a 300x300 square headshot that fills the
   full top of the card edge-to-edge with no letterboxing. The previous clone
   left a gap because the image kept its native (often portrait) ratio inside a
   fixed-height box. We force a square via aspect-ratio + object-fit:cover and a
   block display so the photo always covers the card width with no white gap.
   object-position keeps faces toward the top, matching the original. */
.team__card-photo {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: cover;
  object-position: center top;
  border-radius: 0;
  /* user-drag isn't inherited, so the photo needs its own guard (see
     .team__card-link) to stop WebKit's native image drag on the carousel. */
  -webkit-user-drag: none;
}

.team__card-photo-placeholder {
  width: 100%;
  aspect-ratio: 1 / 1;
  background-color: var(--color-bg-light);
  display: flex;
  align-items: center;
  justify-content: center;
}

.team__card-photo-placeholder span {
  font-size: 3rem;
  font-weight: 700;
  color: var(--color-main);
}

/* QA: match original Meet Our Legal Team treatment — the live site renders the
   attorney name larger (24px) and in the brand brown (#893002 = --color-main),
   not the small black the clone used. */
.team__card-name {
  margin-top: 0;
  padding: 18px 16px 0;
  font-size: 24px;
  font-weight: 700;
  color: var(--color-main);
  text-align: left;
}

/* Title bumped proportionally; stays the original's uppercase muted treatment. */
.team__card-title {
  font-size: 13px;
  color: var(--color-muted-text);
  margin-top: 6px;
  padding: 0 16px 22px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 800;
  text-align: left;
}

/* On phones a 300px card overflows a narrow viewport; shrink the cell so a
   card-and-a-bit shows, preserving the "more to the right" clip cue. */
@media (max-width: 767px) {
  .team__card {
    width: 240px;
    flex-basis: 240px;
  }

  .team__card-name {
    font-size: 21px;
  }

  .team__arrow {
    width: 38px;
    height: 38px;
    font-size: 18px;
  }
}

/* ---- 11-HP-g2. Shared content shell and Attorneys & Staff page ---- */
.porter-content-shell__inner,
.results-page__shell-inner {
  max-width: var(--max-width);
  /* Center the capped inner and add side gutters, matching .section-inner.
     Without the auto margins, above 1300px the inner left-aligned (margin 0) and
     dumped all the slack on the right while shifting content off the left edge;
     without the side padding the breadcrumb/H1/body jammed against x=0 so the
     first characters clipped. These four lines bring the shell in line with every
     other page-width container. */
  margin-left: auto;
  margin-right: auto;
  padding-top: 15px;
  padding-right: var(--section-padding);
  padding-bottom: 0;
  padding-left: var(--section-padding);
}

.porter-content-shell__breadcrumbs,
.results-page__breadcrumbs {
  padding-bottom: 0;
  border-bottom: 0;
  margin-bottom: 0;
  width: fit-content;
  max-width: 100%;
}

.porter-content-shell__columns,
.results-page__columns {
  display: flex;
  align-items: flex-start;
}

.porter-content-shell__main,
.results-page__content-column {
  width: 70%;
}

.porter-stories-page .porter-content-shell__main {
  width: 100%;
}

.porter-stories-page__grid {
  margin-top: 32px;
}

.porter-content-shell__sidebar,
.results-page__sidebar-column {
  width: 30%;
  position: relative;
  /* Gutter between the main column and the sidebar. The sidebar's visible fill
     lives on an inner .sidebar-* widget, so this left padding renders as
     transparent space between the two columns rather than padding the box. It
     stays inside the 30% (global box-sizing: border-box) so the row never
     overflows. The 991px block resets it to 0 once the columns stack. This
     desktop gutter was lost in a refactor — only the mobile `padding-left: 0`
     reset survived, which is what flagged the missing rule. */
  padding-left: 40px;
}

.porter-content-shell__title {
  color: var(--color-darker);
  margin-bottom: 0;
}

.results-page__title {
  color: var(--color-darker);
  margin-bottom: 24px;
}

.porter-content-shell__content,
.results-page__content {
  font-size: 20px;
}

.attorneys-staff-page__intro-inner {
  padding-right: 0;
  padding-left: 0;
}

.attorneys-staff-page__intro-image {
  width: 100%;
  height: auto;
  display: block;
}

.attorney-directory-section__heading {
  color: #000;
  width: 100%;
  text-align: center;
}

.attorney-directory-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(200px, 1fr));
  gap: 20px;
  align-items: stretch;
  justify-items: stretch;
}

.attorney-directory-card {
  display: flex;
  flex-direction: column;
}

.attorney-directory-card__image-link,
.attorney-directory-card__text {
  display: block;
  text-decoration: none;
}

/* QA Part 3: the photo is a fixed 300px block; the text plate fills the rest of
   the (grid-stretched) card so every name box shares the same top and bottom
   edge — uniform cards regardless of 1- vs 2-line titles. */
.attorney-directory-card__image-link {
  display: flex;
  flex: 0 0 auto;
}

/* Specificity note (QA Part 3): the directory renders inside the page shell's
   `.entry-content` wrapper, so `.entry-content img { height: auto }` (0,1,1)
   beat a bare `.attorney-directory-card__image` (0,1,0) and the photos sized by
   their natural aspect ratio (uneven heights). Scope to the grid (0,2,0) so the
   fixed 300px crop wins. (The --staff variant below was already 0,2,0, which is
   why only the Attorneys grid showed the bug.) */
.attorney-directory-grid .attorney-directory-card__image {
  width: 100%;
  height: 300px;
  margin: 0;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.attorney-directory-section--staff .attorney-directory-card__image {
  height: 300px;
}

.attorney-directory-card__image--placeholder {
  background-image: linear-gradient(rgba(81, 35, 13, 0.2), rgba(81, 35, 13, 0.2)), url('../images/hero-office.jpg');
  background-position: center;
  background-size: cover;
}

.attorney-directory-card__text {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 14px 16px;
  border: 1px solid #000;
  background-color: var(--color-white);
}

.attorney-directory-card__text:hover {
  background-color: #fbf7f5;
}

.attorney-directory-card__name {
  color: #000;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.15;
}

.attorney-directory-card__title {
  color: var(--color-main);
  font-size: 16px;
  width: 100%;
}

/* ---- 11-HP-g3. Attorney single ---- */
.attorney-profile-template__inner {
  max-width: var(--max-width);
  padding-top: 15px;
}

.attorney-profile-template__breadcrumbs {
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(188, 188, 188, 0.5);
}

.attorney-profile-template__columns {
  display: flex;
  align-items: flex-start;
}

/* QA Part 3: keep the photo + contact rail in view while the long bio scrolls
   (the rail was a short column that parked at the top). top clears the sticky
   desktop header (~168px). Disabled at ≤991 where the columns stack. */
.attorney-profile-template__media {
  width: 40%;
  position: sticky;
  top: 180px;
  align-self: flex-start;
}

.attorney-profile-template__main {
  width: 60%;
}

.attorney-profile-template__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.attorney-profile-template__title {
  font-size: 2rem;
}

.attorney-profile-template__photo {
  width: 100%;
  max-width: 420px;
  margin-left: 0;
  display: block;
  height: auto;
}

.attorney-profile-template__photo--placeholder {
  aspect-ratio: 4 / 5;
  background-image: linear-gradient(rgba(81, 35, 13, 0.2), rgba(81, 35, 13, 0.2)), url('../images/hero-office.jpg');
  background-position: center;
  background-size: cover;
}

.attorney-profile-template__education {
  display: flex;
  flex-direction: column;
  padding-top: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #cecece;
}

.attorney-profile-template__education-list {
  display: flex;
  flex-direction: column;
}

.attorney-profile-template__content {
  font-size: 20px;
  line-height: 1.7;
}

.attorney-profile-template__consult {
  background-color: #fff8ee;
  border: 1px solid rgba(137, 48, 2, 0.18);
  border-radius: 8px;
  margin-top: 20px;
  max-width: 420px;
  padding: 24px;
}

.attorney-profile-template__consult-eyebrow {
  color: var(--color-main);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0;
  margin: 0 0 8px;
  text-transform: uppercase;
}

.attorney-profile-template__consult h2 {
  color: var(--color-darker);
  font-size: 24px;
  line-height: 1.25;
  margin: 0 0 12px;
}

.attorney-profile-template__phone {
  color: var(--color-main);
  display: inline-block;
  font-size: 24px;
  font-weight: 900;
  margin-bottom: 18px;
  text-decoration: none;
}

.attorney-profile-template__form {
  width: 100%;
}

/* ---- 11-HP-h. Practice Areas Grid ---- */
.practice-areas {
  background-color: var(--color-white);
  padding: 30px 0 90px;
}

.practice-areas__heading {
  text-align: left;
  font-size: 28px;
  color: var(--color-heading);
  margin-bottom: 32px;
}

.practice-areas__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.practice-areas__card {
  text-decoration: none;
  display: flex;
}

.practice-areas__card-inner {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background-color: var(--color-white);
  box-shadow: var(--shadow-card);
  width: 100%;
  height: 100%;
  transition: box-shadow 0.2s;
}

.practice-areas__card:hover .practice-areas__card-inner {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
}

.practice-areas__card-body {
  flex: 1;
  padding: 18px 16px 22px;
}

/* .practice-areas__icon: the homepage practice-area card image.
   LOAD-BEARING — replaces OxyMade .practiceareaicon (Batch 6A). This is the
   live full-bleed 200px cover image; the old 60px .practiceareaicon block was
   a dead duplicate and was deleted. Do not remove. */
.practice-areas__icon {
  width: 100%;
  height: 200px;
  object-fit: cover;
  transition: opacity 0.25s;
}

.practice-areas__card:hover .practice-areas__icon {
  opacity: 0.75;
}

/* .practice-areas__card-title: card heading typography.
   Replaces OxyMade .practiceareasplashtext (Batch 6A) — the live styling lived
   on that token; the .dentist-service-page-title twin was a dead duplicate. */
.practice-areas__card-title {
  color: var(--color-text);
  font-size: 20px;
  line-height: 1.2;
  text-transform: uppercase;
  font-weight: 800;
  overflow-wrap: break-word;
}

.practice-areas__card-action {
  margin-top: auto;
  padding-top: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.practice-areas__read-more {
  font-size: 16px;
  color: var(--color-main);
  font-weight: 800;
}

.practice-areas__arrow {
  font-size: 28px;
  color: var(--color-gold);
  line-height: 1;
}

/* ---- 11-HP-i. Reviews / Testimonials ---- */
.reviews {
  background-image: linear-gradient(rgba(252, 248, 239, 0.9), rgba(252, 248, 239, 0.9)), url('../images/office-bg.jpg');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  padding: 68px 0;
}

.reviews__inner,
.verified-reviews-section .section-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--section-padding);
}

.reviews__header,
.verified-reviews-section__header {
  align-items: flex-start;
  display: flex;
  gap: 28px;
  justify-content: space-between;
  margin-bottom: 30px;
}

.reviews__heading {
  text-align: left;
  font-size: 30px;
  color: var(--color-heading);
  margin: 0 0 8px;
}

.reviews__header p,
.verified-reviews-section__header p {
  color: var(--color-text);
  font-size: 18px;
  line-height: 1.55;
  margin: 0;
  max-width: 720px;
}

.reviews__summary,
.verified-reviews-section__summary {
  align-items: center;
  background-color: var(--color-white);
  border: 1px solid rgba(137, 48, 2, 0.22);
  border-radius: 8px;
  color: var(--color-text);
  display: flex;
  flex: 0 0 260px;
  gap: 12px;
  padding: 14px 16px;
  text-decoration: none;
}

.reviews__summary strong,
.verified-reviews-section__summary strong {
  color: var(--color-main);
  font-size: 32px;
  line-height: 1;
}

.reviews__summary span,
.verified-reviews-section__summary span {
  font-size: 14px;
  font-weight: 800;
  line-height: 1.25;
}

.verified-reviews {
  align-items: start;
  display: grid;
  gap: 20px;
}

.verified-reviews--home,
.verified-reviews--page {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.verified-review-card {
  background-color: var(--color-white);
  border: 1px solid rgba(137, 48, 2, 0.18);
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(81, 35, 13, 0.08);
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 22px;
}

.verified-review-card__header {
  align-items: center;
  display: flex;
  gap: 12px;
}

.verified-review-card__photo {
  border-radius: 50%;
  flex: 0 0 48px;
  height: 48px;
  object-fit: cover;
  width: 48px;
}

.verified-review-card__photo--placeholder {
  align-items: center;
  background-color: var(--color-main);
  color: var(--color-white);
  display: inline-flex;
  font-weight: 900;
  justify-content: center;
}

.verified-review-card__name {
  color: var(--color-heading);
  font-size: 18px;
  line-height: 1.2;
  margin: 0 0 4px;
}

.verified-review-card__meta {
  color: var(--color-medium-text);
  display: flex;
  flex-wrap: wrap;
  font-size: 13px;
  gap: 6px;
  line-height: 1.3;
}

.verified-review-card__meta a {
  color: var(--color-link);
  font-weight: 800;
  text-decoration: none;
}

.verified-review-card__stars {
  color: var(--color-gold);
  font-size: 18px;
  letter-spacing: 0;
  line-height: 1;
}

.verified-review-card__text {
  color: var(--color-text);
  font-size: 16px;
  line-height: 1.6;
  max-height: 26rem;
  overflow: auto;
  padding-right: 4px;
}

.verified-review-card__text p:last-child {
  margin-bottom: 0;
}

.reviews__carousel {
  display: flex;
  flex-wrap: nowrap;
  gap: 30px;
  justify-content: flex-start;
  overflow-x: auto;
  padding-bottom: 28px;
  scroll-snap-type: x mandatory;
}

.reviews__card {
  flex: 0 0 min(900px, 88vw);
  max-width: 900px;
  background-color: transparent;
  padding: 0;
  border-radius: 0;
  border-left: 0;
  scroll-snap-align: start;
}

.reviews__card-text {
  font-size: 24px;
  color: #2b2b2b;
  margin-bottom: 22px;
  font-style: normal;
  line-height: 1.6;
}

.reviews__card-text blockquote {
  margin: 0;
  padding: 0;
  border: none;
}

.reviews__card-author {
  color: var(--color-text);
  font-size: 20px;
}

.verified-reviews-section {
  margin-bottom: 38px;
}

.verified-reviews-section__heading,
.testimonials-page__subheading {
  color: var(--color-heading);
  font-size: 28px;
  line-height: 1.25;
  margin: 0 0 8px;
}

.site-footer__consultation {
  background-color: var(--color-white);
  text-align: center;
  padding: 30px 0;
}

.site-footer__inner {
  max-width: var(--max-width);
  margin: 0 auto;
}

.site-footer__consultation-card {
  width: 70vw;
  margin: 0 auto;
  background-color: var(--color-white);
  box-shadow: var(--shadow-contact-form);
  border-radius: 4px;
  text-align: center;
}

.site-footer__consultation-card img {
  display: block;
  width: min(600px, 100%);
  height: auto;
  margin: 0 auto 24px;
}

.site-footer__consultation-heading {
  font-size: 3rem;
  color: var(--color-heading);
  margin-bottom: 16px;
}

.site-footer__consultation-description {
  font-size: 20px;
  margin-bottom: 20px;
}

/* QA Part 3: the 3rem heading wrapped into ragged, stretched-looking lines on
   phones (the card narrows to 80vw at ≤767). Step the size down so
   "Get a Free Consultation" reads as one tight block. */
@media (max-width: 767px) {
  .site-footer__consultation-heading {
    font-size: 2rem;
    line-height: 1.2;
  }
}

@media (max-width: 479px) {
  .site-footer__consultation-heading {
    font-size: 1.6rem;
  }
}

/* Footer testimonials band — relocated from the sidebar so client reviews show
   site-wide, between the consultation CTA and the mission statement. */
.site-footer__testimonials {
  background: var(--color-testimonial-bg, #f0e4d8);
  padding: 56px 0;
}

.site-footer__testimonials-heading {
  margin: 0 0 32px;
  text-align: center;
  color: var(--color-darker, #51230d);
  font-size: 34px;
  line-height: 1.2;
}

.site-footer__testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
  align-items: start;
}

.footer-testimonial {
  margin: 0;
  padding: 26px 24px;
  background: var(--color-white, #fff);
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(81, 35, 13, 0.08);
}

.footer-testimonial__icon {
  display: block;
  font-family: Georgia, serif;
  font-size: 40px;
  line-height: 0.5;
  color: rgba(137, 48, 2, 0.3);
}

.footer-testimonial__title {
  display: block;
  margin: 12px 0 8px;
  color: var(--color-darker, #51230d);
  font-size: 18px;
}

.footer-testimonial__text {
  margin: 0 0 14px;
  color: var(--color-dark-text, #333);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 7;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.footer-testimonial__name {
  font-style: normal;
  font-weight: 800;
  color: var(--color-main, #893002);
}

.site-footer__testimonials-all {
  display: inline-block;
  margin-top: 28px;
  font-weight: 800;
  color: var(--color-main, #893002);
  text-decoration: none;
}

.site-footer__testimonials-all:hover {
  text-decoration: underline;
}

@media (max-width: 600px) {
  .site-footer__testimonials-grid {
    grid-template-columns: 1fr;
  }
}

.site-footer__mission {
  border-top: 0.5px solid #898989;
  padding: 40px 0;
}

.site-footer__mission .site-footer__inner {
  text-align: center;
}

.site-footer__mission-wrap {
  width: 80%;
  margin: 0 auto;
}

.site-footer__mission-text {
  font-size: 1.05rem;
  line-height: 1.7;
}

.site-footer__brand-row {
  border-bottom: 1px solid var(--color-border);
  border-top: 0.5px solid var(--color-border);
  padding: 20px 0;
}

.site-footer__brand-inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.site-footer__brand-logo {
  display: block;
  width: clamp(110px, 10vw, 130px);
  height: auto;
}

.site-footer__legal-links {
  display: flex;
  flex-direction: row;
  gap: 30px;
  align-items: center;
  flex-wrap: wrap;
}

.site-footer__offices {
  padding: 30px 0;
}

.site-footer__office-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 0;
}

.site-footer__office-column {
  padding: 20px;
  font-size: 14px;
  line-height: 1.5;
}

/* QA #19: the intro row was 44.45/44.45/11.1%, so the "We meet with clients"
   summary started at 44% — between the 20%-grid office columns below it, looking
   misaligned. 40/40/20 lines the summary's left edge up with the 3rd office
   column and the View-All link with the last column. */
.site-footer__office-row--intro .site-footer__office-column--primary,
.site-footer__office-row--intro .site-footer__office-column--summary {
  flex: 0 0 40%;
}

.site-footer__office-row--intro .site-footer__office-column--action {
  flex: 0 0 20%;
}

.site-footer__office-row--secondary .site-footer__office-column {
  flex: 0 0 20%;
}

.site-footer__locations-link {
  color: var(--color-main);
  font-weight: 700;
  text-decoration: underline;
}

.site-footer__legal {
  text-align: left;
  font-size: 14px;
  color: var(--color-text);
  padding: 25px 0 35px;
}

.site-footer__legal-inner {
  align-items: flex-start;
  display: flex;
  gap: 32px;
  justify-content: space-between;
}

.site-footer__legal-copy {
  flex: 1 1 auto;
}

.site-footer__social-wrap {
  flex: 0 0 auto;
}

.site-footer__legal p {
  margin: 0 0 18px;
  line-height: 1.6;
}

.site-footer__service-area-summary {
  margin-top: 18px !important;
  padding-top: 18px;
  border-top: 1px solid rgba(137, 48, 2, 0.24);
}

.site-footer__legal a {
  color: var(--color-main);
  text-decoration: underline;
}

.site-footer__service-area-summary a {
  color: var(--color-darker);
}

.footer-social-icons {
  display: flex;
  flex-direction: row;
  gap: 18px;
  justify-content: flex-end;
}

.footer-social-icons__link {
  align-items: center;
  border-radius: 50%;
  color: var(--color-white) !important;
  display: inline-flex;
  height: 38px;
  justify-content: center;
  line-height: 1;
  text-decoration: none !important;
  transition: background-color 0.2s ease;
  width: 38px;
}

.footer-social-icons__link svg {
  fill: currentColor;
  height: 19px;
  width: 19px;
}

.footer-social-icons__link--facebook {
  background-color: #3b5998;
}

.footer-social-icons__link--facebook:hover {
  background-color: #5b79b8;
}

.footer-social-icons__link--linkedin {
  background-color: #007bb6;
}

.footer-social-icons__link--linkedin:hover {
  background-color: #209bd6;
}

.footer-social-icons__link--youtube {
  background-color: #ff0000;
}

.footer-social-icons__link--youtube:hover {
  background-color: #ff4444;
}

.footer-social-icons__link:hover {
  color: var(--color-white) !important;
}

/* ---- 11-HP Responsive ---- */
@media (max-width: 991px) {
  .hero__layout {
    grid-template-columns: minmax(0, 1fr) minmax(240px, 0.7fr);
    gap: 28px;
  }

  .hero__headline {
    font-size: 3rem;
  }

  .hero__subtitle {
    font-size: 2rem;
  }

  .about-intro__columns {
    flex-direction: column;
    gap: 20px;
  }

  .about-intro__heading {
    font-size: 2.5rem;
  }

  .case-results__grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }

  .practice-areas__grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }

  .credentials__inner {
    flex-direction: column;
    text-align: center;
  }

  .credentials__logos {
    justify-content: center;
  }

  .site-footer__office-row {
    flex-direction: column;
  }

  .site-footer__office-column {
    flex-basis: auto !important;
    width: 100%;
  }

  .site-footer__legal-inner {
    flex-direction: column;
  }

  .reviews__header,
  .verified-reviews-section__header {
    flex-direction: column;
  }

  .reviews__summary,
  .verified-reviews-section__summary {
    flex: 0 1 auto;
    width: 100%;
  }

  .verified-reviews--home,
  .verified-reviews--page {
    grid-template-columns: 1fr;
  }

  .testimonials-page__masonry {
    column-count: 2;
  }

  .footer-social-icons {
    justify-content: flex-start;
  }
}

/* Batch 7 — BREAKPOINT CANONICALIZATION: was `max-width: 768px`; aligned to the
   canonical mobile breakpoint `max-width: 767px`. This homepage block already
   duplicated .credlogo { width: 30% } and .site-footer__legal-links { display:
   none } from the section-18 767 block, confirming a single intended mobile
   breakpoint. 1px-boundary note: at exactly 768px these rules no longer apply. */
@media (max-width: 767px) {
  .mobile-site-header,
  .mobile-site-header__bar,
  .hero,
  .hero__inner,
  .hero__layout,
  .hero__content,
  .hero__media {
    max-width: 100vw;
  }

  .mobile-site-header__bar,
  .hero__inner,
  .hero__layout {
    width: 100%;
  }

  .hero__layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .hero__content {
    gap: 18px;
  }

  .hero__headline {
    font-size: 2.05rem;
    line-height: 1.22;
  }

  .hero__subtitle {
    font-size: 1.22rem;
    line-height: 1.35;
  }

  .hero__inner {
    padding-top: 36px;
    padding-bottom: 54px;
  }

  .hero__actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 12px;
    margin-top: 10px;
  }

  .hero__actions .btn {
    width: 100%;
    min-width: 0;
    padding: 16px 28px;
    font-size: 21px;
  }

  .hero__media {
    order: -1;
  }

  .hero__photo {
    max-width: calc(100vw - 40px);
    max-height: 340px;
    aspect-ratio: 2560 / 1656;
  }

  .hero__media-caption {
    font-size: 14px;
  }

  .about-intro__heading {
    font-size: 2rem;
  }

  .reviews__card {
    flex: 1 1 100%;
    max-width: 100%;
  }

  .site-footer__consultation-card {
    width: 80vw;
  }

  .site-footer__brand-inner {
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }

  .site-footer__legal-links {
    display: none;
  }

  .site-footer__mission-wrap {
    width: 100%;
  }

  .credlogo {
    width: 30%;
  }
}

@media (max-width: 479px) {
  .hero__headline {
    font-size: 2.45rem;
  }

  .hero__subtitle {
    font-size: 1.32rem;
  }

  .practice-areas__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .case-results__grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   12. BLOG POST HEADER
   ========================================================================== */
.article-header {
  background-color: var(--color-article-header);
  color: var(--color-white);
}

.article-header .section-inner {
  padding-top: 30px;
  padding-bottom: 30px;
}

.article-header h1 {
  color: var(--color-white);
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-heading);
}

.article-header a {
  color: var(--color-white);
  font-weight: 600;
}

.article-header a:hover {
  color: var(--color-light-text);
}

.article-header .meta-date {
  font-style: italic;
  color: rgba(255, 255, 255, 0.85);
}

.article-header .category-tag {
  font-style: italic;
  font-weight: 700;
}

/* Expert review section */
.reviewer-section {
  background-color: var(--color-reviewer-bg);
}

.reviewer-section .section-inner {
  padding-top: 20px;
  padding-bottom: 20px;
}

/* ==========================================================================
   13. FOOTER
   ========================================================================== */

/* Batch 7: deleted the entire dead legacy footer section 13 — .footer-cta-section
   (+ .contact-wrapper / h2 / .cta-description), .footer-mission (+ .section-inner /
   .mission-text), .footer-links-bar (+ .section-inner), .footer-links-row,
   .footer-offices > .section-inner, .footer-office-col (+ .office-name /
   .office-address), .footer-copyright (+ .section-inner), .social-icons
   (+ a / a svg), and .social-icon-facebook/-linkedin/-youtube (+ :hover).
   All had ZERO references in the theme PHP templates and theme JS. The live
   footer is styled by .site-footer__* (40 rules, ~line 4268) and the brand-color
   social buttons by .footer-social-icons__link--facebook/-linkedin/-youtube
   (~line 4456). Responsive overrides of these dead classes were removed too. */

/* ==========================================================================
   14. FORMS (WS Form styling)
   ========================================================================== */

/* WS Form base grid */
.wsf-form {
  width: 100%;
  text-align: left;
}

.wsf-grid {
  display: flex;
  flex-wrap: wrap;
  margin-left: -8px;
  margin-right: -8px;
}

.wsf-tile {
  padding-left: 8px;
  padding-right: 8px;
}

/* WS Form column widths */
.wsf-extra-small-12 {
  width: 100%;
}

.wsf-medium-6 {
  width: 100%;
}

.wsf-field-wrapper {
  margin-bottom: 12px;
}

/* Input styling to match Oxygen theme */
.wsf-form input[type="text"],
.wsf-form input[type="email"],
.wsf-form input[type="tel"],
.wsf-form input[type="url"],
.wsf-form input[type="search"],
.wsf-form textarea,
.wsf-form select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ccc;
  border-radius: 3px;
  font-family: var(--font-family);
  font-size: 16px;
  color: var(--color-text);
  background-color: var(--color-white);
  transition: border-color 0.2s;
}

.wsf-form input:focus,
.wsf-form textarea:focus,
.wsf-form select:focus {
  outline: none;
  border-color: var(--color-main);
  box-shadow: 0 0 0 2px rgba(137, 48, 2, 0.15);
}

.wsf-form textarea {
  min-height: 120px;
  resize: vertical;
}

/* Submit button */
.wsf-form button[type="submit"],
.wsf-form input[type="submit"] {
  background-color: var(--color-cta-orange);
  border: 1px solid var(--color-cta-orange);
  color: var(--color-white);
  padding: 12px 30px;
  border-radius: 3px;
  font-family: var(--font-family);
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.4s;
  width: 100%;
}

.wsf-form button[type="submit"]:hover,
.wsf-form input[type="submit"]:hover {
  background-color: var(--color-cta-orange-hover);
  border-color: var(--color-cta-orange-hover);
}

/* Radio / checkbox styling */
.wsf-form label {
  font-size: 16px;
  color: var(--color-text);
  font-weight: 400;
  display: block;
  margin-bottom: 6px;
  text-align: left;
}

/* Batch 7: dropped dead .consultation-cta .wsf-form from this group. */
.site-footer__consultation-card .wsf-form,
.professional-sidebar-form .wsf-form,
.attorney-profile-template__form .wsf-form {
  text-align: left;
}

.wsf-form [role="radiogroup"],
.wsf-form .wsf-field-wrapper[data-type="radio"],
.wsf-form .wsf-field-wrapper[data-type="checkbox"] {
  text-align: left;
}

.wsf-form .wsf-invalid-feedback {
  color: #dc3545;
  font-size: 14px;
  margin-top: 4px;
}

.porter-ws-form-fallback fieldset {
  border: 0;
  margin: 0 0 12px;
  padding-top: 0;
  padding-bottom: 0;
}

.porter-ws-form-fallback legend {
  color: var(--color-black);
  font-size: 18px;
  font-weight: 400;
  margin-bottom: 6px;
}

.porter-ws-form-fallback__radio {
  display: flex !important;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px !important;
  color: var(--color-black) !important;
}

.porter-ws-form-fallback__radio input {
  appearance: none;
  width: 24px;
  height: 24px;
  margin: 0;
  border: 1px solid var(--color-black);
  border-radius: 50%;
  background-color: var(--color-white);
  flex: 0 0 auto;
}

.porter-ws-form-fallback__radio input:checked {
  box-shadow: inset 0 0 0 6px var(--color-white);
  background-color: var(--color-main);
}

.porter-ws-form-fallback__disclaimer {
  color: var(--color-text);
  font-size: 11px;
  line-height: 1.35;
  margin: 8px 8px 0;
}

/* Batch 7 — BREAKPOINT CANONICALIZATION: was `min-width: 641px`; aligned to the
   canonical WS-Form medium breakpoint `min-width: 40em` (=640px), matching the
   live-form rule in section 18f. 1px-boundary note: at exactly 640px the fallback
   form's .wsf-medium-6 now goes 50% (it didn't under the old 641px query). */
@media (min-width: 40em) {
  .porter-ws-form-fallback--full .wsf-medium-6 {
    width: 50%;
  }
}

/* Sections */
.wsf-sections {
  width: 100%;
}

.wsf-section {
  border: none;
  padding: 0;
  margin: 0;
}

.wsf-fields {
  width: 100%;
}

/* ---- Sidebar form adjustments ---- */
.sidebar-cta .wsf-form input[type="text"],
.sidebar-cta .wsf-form input[type="email"],
.sidebar-cta .wsf-form input[type="tel"],
.sidebar-cta .wsf-form textarea {
  border-color: #000;  /* merged override from the former parity-pass section (was rgba(255,255,255,0.3)) */
  background-color: rgba(255, 255, 255, 0.95);
}

/* ==========================================================================
   15. CAROUSEL / LIGHTBOX / FLICKITY
   ========================================================================== */

/* Batch 6A: deleted dead .oxy-carousel-builder* blocks (4 rules:
   base, _inner, _icon, _icon:hover). Zero markup referenced them. */

/* Batch 7: deleted the dead Flickity override block (.flickity-enabled,
   .flickity-viewport, .flickity-slider, .flickity-page-dots,
   .flickity-page-dots .dot, .dot.is-selected). Flickity is never enqueued and
   no markup uses these classes (0 PHP/JS refs). The live carousel is
   .results-slider__* / .carousel-* driven by main.js. */

/* Batch 6F: deleted dead .oxy-lightbox_inner / .oxy-lightbox_inner.active blocks.
   The results modal overlay is fully styled by .results-page__modal[hidden] +
   .results-page__modal-panel (~7193+) and toggled by JS via the `hidden` attribute
   and .is-open — JS never adds .active, so these Oxygen lightbox rules were orphans. */

/* ==========================================================================
   16. LOCATION PAGE
   ========================================================================== */
.location-info-bar {
  background-color: var(--color-location-bar);
  color: var(--color-white);
}

.location-info-bar .section-inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.location-info-bar a {
  color: var(--color-white);
}

/* Batch 6F: deleted dead .location-info-bar .ct-fancy-icon rule.
   .location-info-bar has no markup; the live location icon is .location-call-strip__icon
   (which carries its own styling), so this combinator matched nothing. */

/* The location template runs full-bleed: the main drops the .site-main 1300px
   max-width and padding so the hero / call strip / results band span edge to
   edge. Each section keeps its copy contained via its own .section-inner. This
   also tightens the breadcrumb gap (no 20px top padding above it). */
.porter-location-page {
  max-width: none;
  padding: 0;
}

.porter-location-page--office {
  background-color: var(--color-white);
}

.porter-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  color: var(--color-white);
  font-weight: 800;
  line-height: 1.2;
  padding: 16px 26px;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.porter-button:hover {
  color: var(--color-white);
  text-decoration: none;
}

.porter-button--primary {
  background-color: #c36d3f;
}

.porter-button--primary:hover {
  background-color: var(--color-main);
}

.porter-button--dark {
  background-color: var(--color-darker);
}

.porter-button--dark:hover {
  background-color: #2f1609;
}

.porter-button--outline {
  background-color: transparent;
  border: 2px solid var(--color-main);
  color: var(--color-main);
}

.porter-button--outline:hover,
.porter-button--outline:focus-visible {
  background-color: var(--color-main);
  color: var(--color-white);
}

.location-hero {
  background-position: center;
  background-size: cover;
  color: var(--color-white);
  min-height: 70vh;
}

.location-hero .section-inner,
.location-call-strip .section-inner,
.location-office .section-inner,
.location-content-practices .section-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding-left: var(--section-padding);
  padding-right: var(--section-padding);
  width: 100%;
}

.location-hero__wrap {
  display: flex;
  min-height: 70vh;
  width: 100%;
}

.location-hero__columns {
  display: flex;
  align-items: center;
  gap: 48px;
  width: 100%;
}

.location-hero__copy {
  display: flex;
  flex: 0 0 45%;
  flex-direction: column;
  justify-content: center;
  gap: 22px;
}

.location-hero__title {
  color: var(--color-white);
  font-size: 58px;
  line-height: 1.12;
  margin: 0;
}

.location-hero__text {
  color: var(--color-white);
  font-size: 26px;
  line-height: 1.45;
  max-width: 560px;
}

.location-hero__image {
  flex: 1;
}

.location-hero__image img {
  border: 2px solid var(--color-white);
  border-radius: 8px;
  height: auto;
  width: 100%;
}

.location-call-strip {
  background-color: #fff8ee;
  color: var(--color-darker);
}

.location-call-strip__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 24px 0;
}

.location-call-strip__text {
  display: flex;
  align-items: center;
  gap: 10px;
}

.location-call-strip__message {
  color: var(--color-darker);
  font-size: 34px;
  font-weight: 800;
  line-height: 1.25;
}

.location-call-strip__icon {
  color: var(--color-white);
  font-size: 30px;
}

.location-office {
  background-color: var(--color-white);
  padding: 64px 0;
}

.location-office__columns {
  display: grid;
  grid-template-columns: minmax(0, 0.45fr) minmax(0, 0.55fr);
  gap: 36px;
  align-items: stretch;
}

.location-office__heading {
  color: var(--color-darker);
  font-size: 42px;
  line-height: 1.2;
  margin: 0 0 24px;
}

.location-office__details {
  display: grid;
  gap: 16px;
  margin: 0 0 26px;
}

.location-office__details div {
  border-top: 1px solid var(--color-border);
  padding-top: 14px;
}

.location-office__details dt {
  color: var(--color-main);
  font-weight: 800;
}

.location-office__details dd {
  margin: 4px 0 0;
}

.location-office__map iframe {
  border: 0;
  min-height: 430px;
  width: 100%;
}

.location-content-practices {
  background-color: #f7f3f1;
  padding: 64px 0;
}

.location-content-practices__columns {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(280px, 0.3fr);
  gap: 42px;
}

.location-content-practices__body {
  color: var(--color-text);
  font-size: 21px;
  line-height: 1.7;
}

.location-video-placeholder {
  margin-bottom: 28px;
}

.location-content-practices__heading {
  color: var(--color-darker);
  font-size: 34px;
  line-height: 1.2;
  margin: 0 0 20px;
}

.location-practice-menu {
  border: 0.5px solid #7c7c7c;
  display: flex;
  flex-direction: column;
}

.location-practice-menu a {
  border-bottom: 0.5px solid #7c7c7c;
  color: var(--color-text);
  font-weight: 700;
  padding: 18px 20px;
  text-decoration: none;
}

.location-practice-menu a:last-child {
  border-bottom: 0;
}

.location-practice-menu a:hover {
  background-color: #eeeeee;
  color: var(--color-main);
}

.news-hero {
  background-color: #753b2a;
  color: var(--color-white);
}

.news-hero .section-inner,
.news-body-section .section-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding-left: var(--section-padding);
  padding-right: var(--section-padding);
  width: 100%;
}

.news-hero__columns,
.news-body-columns {
  display: flex;
  gap: 0;
  align-items: stretch;
}

.news-hero__content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 56px 0;
  width: 70%;
}

.news-hero__media {
  background-size: cover;
  width: 30%;
}

.news-hero__media img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.news-hero__date {
  color: var(--color-white);
  font-size: 16px;
}

.news-hero__title {
  color: var(--color-white);
  font-size: 58px;
  line-height: 1.08;
  margin: 20px 0;
}

.news-hero__byline,
.news-hero__byline-inner {
  display: flex;
  align-items: center;
  gap: 20px;
}

.news-hero__author {
  color: var(--color-white);
  font-size: 24px;
  font-weight: 600;
}

.news-hero__author-title {
  color: var(--color-white);
  font-size: 20px;
}

.news-hero__author-link {
  color: var(--color-white);
  font-weight: 800;
}

.news-hero__divider {
  background-color: var(--color-white);
  min-height: 70%;
  min-width: 1px;
}

.news-body-section {
  background-color: var(--color-white);
  padding: 56px 0;
}

.news-main {
  padding: 0 36px 0 0;
  width: 70%;
}

.news-categories {
  display: flex;
  gap: 10px;
  margin-top: 28px;
}

.news-categories a {
  background-color: rgba(137, 48, 2, 0.08);
  color: var(--color-main);
  font-weight: 800;
  padding: 8px 12px;
  text-decoration: none;
}

.news-sources {
  border-radius: 10px;
  margin-top: 28px;
}

.news-sources__accordion summary {
  background-color: rgba(137, 48, 2, 0.03);
  border-radius: 10px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 800;
  padding: 14px 18px;
}

.news-sources__note {
  color: var(--color-heading);
  font-size: 14px;
  font-weight: 500;
}

.news-sidebar {
  position: relative;
  width: 30%;
}

.news-sidebar__card {
  border-radius: 5px;
  margin-bottom: 24px;
  padding: 24px;
  width: 100%;
}

.news-sidebar__cta {
  background-color: #c69175;
  color: var(--color-white);
}

.news-sidebar__cta-title,
.news-sidebar__cta-phone {
  color: var(--color-white);
  font-size: 30px;
  line-height: 1.2;
}

.news-sidebar__form,
.news-sidebar__toc {
  width: 100%;
}

.news-sidebar__heading {
  color: var(--color-darker);
  font-size: 28px;
  font-weight: 600;
  margin: 0 0 16px;
}

.news-sidebar__results-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.news-sidebar__result-link,
.news-sidebar__view-all {
  color: var(--color-text);
  font-weight: 700;
  text-decoration: none;
}

.news-sidebar__result-link:hover,
.news-sidebar__view-all:hover {
  color: var(--color-main);
}

.news-sidebar__result-amount,
.news-sidebar__result-title {
  display: block;
  font-size: 14px;
}

.news-sidebar__practice-menu {
  display: flex;
  flex-direction: column;
}

.news-sidebar__practice-menu a {
  color: var(--color-text);
  padding: 8px 0;
  text-decoration: none;
}

.news-sidebar__practice-menu a:hover {
  background-color: #eeeeee;
  color: var(--color-main);
}

.news-testimonial {
  margin-top: 18px;
}

/* Batch 6F: deleted dead .news-testimonial .ct-fancy-icon rule.
   No .ct-fancy-icon element renders inside .news-testimonial, so this combinator
   matched nothing. The live icons (.testimonials-page__quote-icon /
   .testimonials-page__author-icon) carry their own styling. */

/* Batch 6A: deleted dead .oxy-icon-box* blocks (4 rules: base, :hover,
   -icon .ct-fancy-icon, -heading). Zero markup referenced .oxy-icon-box. */

/* ==========================================================================
   17. CONTENT IMAGES
   ========================================================================== */
.content-image-inline {
  aspect-ratio: 1.5;
  object-fit: cover;
  width: 640px;
  max-width: 100%;
  height: auto;
}

/* ==========================================================================
   18. RESPONSIVE BREAKPOINTS
   ========================================================================== */

/* ---- 18a. 1300px — Nav collapse, layout adjustments ---- */
@media (max-width: 1300px) {
  /* Keep the production-style desktop nav visible until true mobile widths. */
  .site-header__primary-nav {
    display: flex;
  }

  .menu-toggle {
    display: none;
  }

  .site-header__primary-menu .nav-menu-list {
    display: flex;
  }

  /* Batch 7: deleted dead responsive .hero-section > .section-inner override
     (legacy section-11 class; 0 PHP/JS refs). */

  /* Button adjustments */
  .btn-l {
    padding: 1rem 4rem;
    font-size: 1.6rem;
  }

  .btn-m {
    padding: 1rem 2.5rem;
    font-size: 1.4rem;
  }
  /* Batch 7: deleted dead responsive .saas-heading-two override (0 PHP/JS refs). */
}

/* ---- 18b. 991px — Columns stack ---- */
@media (max-width: 991px) {
  /* All multi-column layouts stack */
  .layout-65-35 > .content-main,
  .layout-65-35 > .content-sidebar,
  .layout-70-30 > .content-main,
  .layout-70-30 > .content-sidebar,
  .layout-35-65 > .content-main,
  .layout-35-65 > .content-sidebar,
  .layout-40-60 > .content-photo,
  .layout-40-60 > .content-bio,
  .layout-50-50 > .columns-row__col {
    width: 100% !important;
  }

  /* Practice area sidebar-left: reverse so content comes first */
  .layout-35-65 {
    flex-direction: column-reverse;
  }

  /* Page title */
  .page-title-bordered {
    font-size: 2.5rem;
  }

  /* Batch 7: deleted dead responsive .hero-section > .section-inner and
     .hero-subheadline overrides (legacy section-11 classes; 0 PHP/JS refs). */

  /* Practice area grid */
  .practice-area-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }

  /* Credential logos */
  .credlogo {
    width: 20%;
  }

  /* Batch 7: deleted dead responsive .footer-offices / .footer-office-col
     overrides (legacy section-13 classes; 0 PHP/JS refs). */

  /* Batch 6A: removed dead .dentist-heading-one mobile override (no markup). */

  /* .columns-row stack (Batch 6D, was .ct-new-columns / its .ct-div-block child) */
  .columns-row {
    flex-direction: column;
  }

  .columns-row > .columns-row__col {
    width: 100% !important;
  }

  /* Stack the shared content shell (desktop: flex row, main 70% / sidebar 30%)
     into a single column at tablet/mobile. This was MISSING — only the sidebar's
     padding-left was being reset here — so the flex row never collapsed. Because
     flex items won't shrink below their content's min-width (the large H1 words,
     the contact form), the row overflowed the viewport and the page clipped on
     both edges. Mirrors how .layout-70-30 / .content-wrapper--* / .professional-
     columns stack in this same 991px breakpoint. DOM order is main-then-sidebar,
     so content naturally stacks first (no `order` reset needed). */
  .porter-content-shell__columns,
  .results-page__columns {
    flex-direction: column;
  }

  .porter-content-shell__main,
  .porter-content-shell__sidebar,
  .results-page__content-column,
  .results-page__sidebar-column {
    width: 100%;
  }

  .porter-content-shell__sidebar,
  .results-page__sidebar-column {
    padding-left: 0;
  }

  .attorney-directory-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* ---- Batch 7: relocated here from the former parity-pass @media 991 block
     (was at the bottom of the file). These rules have NO selector overlap with
     the section-18b rules above, and they keep their winning cascade over the
     earlier layout-991 block (~line 1232) because this block still comes later
     in source order. .content-wrapper--* / .post-grid are the only selectors
     that also appear in the layout-991 block; the parity values below win, exactly
     as before. ---- */
  .content-wrapper--page,
  .content-wrapper--single,
  .professional-columns,
  .cancer-hero__columns,
  .cancer-content__columns,
  .location-contact-block {
    flex-direction: column;
    grid-template-columns: 1fr;
  }

  .content-wrapper--page > .content-area,
  .content-wrapper--page > .sidebar,
  .content-wrapper--single > .content-area,
  .content-wrapper--single > .sidebar,
  .attorney-profile-template__media,
  .attorney-profile-template__main,
  .professional-sidebar,
  .professional-main-content {
    width: 100%;
    flex: none;
  }

  /* QA #10: on desktop the sidebar is forced visually left via `order: 1`
     (article precedes aside in DOM for heading order). Once the columns stack
     on mobile that `order` left the sidebar — testimonials/widgets — dumped
     ABOVE the real content, so visitors had to scroll past it to reach the
     page body. Reset the order on mobile so MAIN CONTENT stacks first and the
     sidebar follows. The DOM article-first order makes content `order: 0` the
     natural value; sidebar is pushed after with `order: 1`. Desktop is
     untouched (these rules only live inside the 991px breakpoint). */
  .professional-main-content {
    order: 0;
  }

  .professional-sidebar {
    order: 1;
  }

  .attorney-profile-template__columns {
    flex-direction: column;
  }

  /* Stacked layout: the photo sits above the bio, so drop the desktop sticky. */
  .attorney-profile-template__media {
    position: static;
    top: auto;
  }

  .attorney-profile-template__consult,
  .attorney-profile-template__photo {
    max-width: calc(100vw - 80px);
  }

  .location-hero__columns,
  .location-call-strip__inner {
    flex-direction: column;
    text-align: center;
  }

  .location-hero__copy,
  .location-hero__image {
    flex: none;
    width: 100%;
  }

  .location-office__columns,
  .location-content-practices__columns {
    grid-template-columns: 1fr;
  }

  .news-hero__columns,
  .news-body-columns,
  .news-hero__byline,
  .news-hero__byline-inner {
    flex-direction: column;
  }

  .news-hero__content,
  .news-hero__media,
  .news-main,
  .news-sidebar {
    width: 100%;
  }

  .news-main {
    padding-right: 0;
  }

  .cancer-call-strip__inner {
    align-items: flex-start;
    flex-direction: column;
  }

  .cancer-info__grid,
  .cancer-results__grid,
  .cancer-why__grid {
    grid-template-columns: 1fr;
  }

  .location-hero__title {
    font-size: 46px;
  }

  .post-grid,
  .archive-card-grid,
  .blog-category-strip__inner,
  .glossary-listing__grid,
  .results-page__grid,
  .porter-search-results__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---- 18c. 767px — Mobile layout (canonical mobile breakpoint) ---- */
/* Batch 7 — BREAKPOINT CANONICALIZATION: the former 18c block used
   `max-width: 768px`; it was merged into this canonical `max-width: 767px`
   block (the dominant mobile breakpoint). 1px-boundary note: at a viewport of
   exactly 768px CSS-px the .top-section and .case-result rules below no longer
   apply (they did under the old 768px query). This is the intended de-duplication
   per the canonical set {1300, 991, 767, 479, 360, 40em}. */
@media (max-width: 767px) {
  /* --- formerly the 18c 768px block (case-result cards 3-per-row) --- */
  .top-section-content {
    flex-direction: column;
    text-align: center;
  }

  .top-section h2,
  .top-section p,
  .contact-button {
    margin-bottom: 10px;
  }

  .case-result {
    flex: 1 1 calc(33.33% - 10px);
  }

  /* --- formerly the 18d 767px block --- */
  .attorney-directory-grid {
    grid-template-columns: 1fr;
  }

  /* The desktop<->mobile header toggle was moved OUT of this 767px block into a
     dedicated max-width:1080 block at the end of the file — the primary nav
     overflows below ~1020px, so the hamburger must take over well before the
     phone breakpoint. */

  .site-footer__legal-links {
    display: none;
  }

  /* Batch 7: deleted dead responsive .footer-links-bar / .footer-links-row /
     .footer-mission .mission-text / .footer-cta-section .contact-wrapper
     overrides (legacy section-13 classes; 0 PHP/JS refs). */

  /* Credential logos */
  .credlogo {
    width: 30%;
  }

  /* Practice area page padding */
  .page-bg-gradient > .section-inner {
    padding-top: 0;
  }

  /* Sidebar remove box shadow on mobile */
  .layout-65-35 > .content-sidebar,
  .layout-35-65 > .content-sidebar {
    box-shadow: none;
  }

  /* Batch 6A: removed dead .dentist-heading-one mobile override (no markup). */

  /* WS Form medium columns go full width */
  .wsf-medium-6 {
    width: 100%;
  }

  /* Batch 7: deleted dead responsive .footer-office-col override
     (legacy section-13 class; 0 PHP/JS refs). */

  /* ---- Batch 7: relocated here from the former parity-pass @media 767 block
     (was at the bottom of the file). No selector overlap with the section-18c
     rules above. Only .post-grid also appears in the earlier layout-767 block
     (~line 1296) at the same value (grid-template-columns: 1fr), so the result
     is unchanged. These rules keep their source-order position after all earlier
     767 blocks, preserving the cascade exactly. ---- */
  .section-inner {
    max-width: 100%;
    padding-left: 20px;
    padding-right: 20px;
    width: 100%;
  }

  .porter-breadcrumbs ol,
  .porter-breadcrumbs ul {
    flex-wrap: wrap;
  }

  .porter-breadcrumbs li {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .testimonials-page__shell .section-inner,
  .testimonials-page__main,
  .testimonials-page__inner-content,
  .testimonials-page__google-section,
  .verified-reviews-section .section-inner,
  .verified-reviews,
  .verified-review-card {
    max-width: 100%;
    min-width: 0;
  }

  .testimonials-page,
  .testimonials-page__shell,
  .testimonials-page__columns,
  .testimonials-page__main,
  .testimonials-page__inner-content {
    width: 100%;
    max-width: 100vw;
  }

  .testimonials-page__shell .section-inner,
  .verified-reviews-section .section-inner {
    padding-left: 10px;
    padding-right: 10px;
  }

  .testimonials-page__columns > .columns-row__col,
  .testimonials-page__google-section .section-inner,
  .testimonials-page__cards-section .section-inner {
    padding-left: 0;
    padding-right: 0;
  }

  .testimonials-page__masonry {
    column-count: 1;
  }

  .verified-reviews-section__summary,
  .reviews__summary {
    max-width: 100%;
  }

  .testimonials-page__google-section,
  .verified-reviews-section .section-inner,
  .verified-reviews {
    max-width: calc(100vw - 80px);
    width: calc(100vw - 80px);
  }

  .verified-reviews-section__header,
  .verified-reviews-section__header p {
    max-width: calc(100vw - 80px);
  }

  .verified-review-card,
  .verified-reviews-section__summary,
  .reviews__summary {
    width: 100%;
  }

  .verified-review-card {
    padding: 18px;
  }

  .verified-review-card__header {
    align-items: flex-start;
  }

  .location-hero__title {
    font-size: 32px;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .news-hero__title {
    font-size: 38px;
  }

  .cancer-hero__wrap {
    padding-bottom: 42px;
    padding-top: 42px;
  }

  .cancer-hero__title {
    font-size: 38px;
  }

  .cancer-hero__intro {
    font-size: 21px;
  }

  .cancer-hero__phone-number {
    font-size: 30px;
  }

  .cancer-button {
    width: 100%;
  }

  .video-cta-card {
    min-height: 220px;
  }

  .cancer-section-heading,
  .cancer-content__body h2 {
    font-size: 30px;
  }

  .news-sidebar__cta-title,
  .news-sidebar__cta-phone {
    font-size: 24px;
  }

  .location-hero__text,
  .location-call-strip__message {
    font-size: 20px;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .location-hero,
  .location-hero__wrap {
    min-height: auto;
  }

  .location-hero .section-inner {
    padding-bottom: 42px;
    padding-top: 42px;
  }

  .location-office,
  .location-content-practices {
    padding: 42px 0;
  }

  .archive-hero__title,
  .glossary-hero__title,
  .porter-search-hero__title,
  .porter-archive-shell__title {
    font-size: 38px;
  }

  .post-grid,
  .archive-card-grid,
  .blog-category-strip__inner,
  .glossary-listing__grid,
  .results-page__grid,
  .porter-search-results__grid {
    grid-template-columns: 1fr;
  }

  .result-single__summary {
    grid-template-columns: 1fr;
  }

  .result-single__amount {
    font-size: 30px;
  }

  .results-page__modal {
    align-items: flex-start;
    padding: 18px;
  }

  .results-page__modal-panel {
    padding: 30px 22px;
  }

  .results-page__detail-title {
    font-size: 28px;
  }

  .testimonials-page__card {
    flex-direction: column;
  }

  .porter-proof-section {
    max-width: calc(100vw - 80px);
    margin: 24px 0;
    padding: 20px;
    width: 100%;
  }

  .porter-proof-section__grid,
  .porter-proof-section--compact .porter-proof-section__grid {
    grid-template-columns: 1fr;
  }

  .porter-proof-card {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .attorney-profile-template__consult {
    width: 100%;
  }

  .professional-intent-panel__actions,
  .attorney-profile-template__actions {
    flex-direction: column;
  }

  .professional-intent-panel__actions .porter-button,
  .attorney-profile-template__actions .porter-button {
    width: 100%;
  }

  /* Batch 7: deleted dead responsive .consultation-cta__inner override and
     dropped dead .consultation-cta__heading from the font-size group below. */

  .professional-title,
  .entry-title {
    font-size: 32px;
  }

  .wsf-field-wrapper {
    margin-bottom: 16px;
  }

  .wsf-grid {
    margin-left: 0;
    margin-right: 0;
  }

  .wsf-tile {
    padding-left: 0;
    padding-right: 0;
  }

  .wsf-form input[type="text"],
  .wsf-form input[type="email"],
  .wsf-form input[type="tel"],
  .wsf-form input[type="url"],
  .wsf-form input[type="search"],
  .wsf-form textarea,
  .wsf-form select {
    min-height: 48px;
    padding: 13px 14px;
  }

  .wsf-form button[type="submit"],
  .wsf-form input[type="submit"] {
    min-height: 54px;
    padding: 14px 18px;
  }

  .apexchat-invitation,
  .apexchat_invitation,
  #apexchat_invitation_container,
  #apexchat_prechat_invitation,
  iframe[src*="invitation.ashx"],
  [id^="apexchat" i],
  [class^="apexchat" i] {
    display: none !important;
  }
}

/* ---- 18e. 479px — Phone portrait (canonical phone breakpoint) ---- */
/* Batch 7 — BREAKPOINT CANONICALIZATION: the former `max-width: 480px` block
   was merged into this canonical `max-width: 479px` block. 1px-boundary note: at
   a viewport of exactly 480px CSS-px, .case-result no longer stacks to
   flex:1 1 100% (it did under the old 480px query) — it keeps the 767-block
   calc(33.33%) value. Intended de-duplication per the canonical set. */
@media (max-width: 479px) {
  /* Case result cards stack (formerly the 480px block) */
  .case-result {
    flex: 1 1 100%;
  }

  /* Practice area grid: 2 columns */
  .practice-area-grid {
    grid-template-columns: repeat(2, minmax(0%, 1fr));
  }

  /* Buttons go full-width */
  .btn-l,
  .btn-m,
  .btn-s {
    display: block;
    width: 100%;
    text-align: center;
  }

  /* Batch 7: deleted dead .hero-section .columns-row__col orphan override —
     the legacy .hero-section family it scoped to was removed (0 PHP/JS refs). */
}

/* ---- 18f. WS Form responsive (medium breakpoint: 40em / 640px) ---- */
@media (min-width: 40em) {
  .wsf-medium-6 {
    width: 50%;
  }
}

/* ==========================================================================
   19. WORDPRESS BLOCK STYLES
   ========================================================================== */

/* Block headings */
.wp-block-heading {
  margin-top: 1.5em;
  margin-bottom: 0.75em;
}

/* Block lists */
.wp-block-list {
  margin-left: 1.5em;
  margin-bottom: 1em;
}

.wp-block-list li {
  margin-bottom: 0.5em;
}

ul.wp-block-list {
  list-style: disc;
}

ol.wp-block-list {
  list-style: decimal;
}

/* Block images */
.wp-block-image {
  margin-bottom: 1em;
}

.wp-block-image img {
  max-width: 100%;
  height: auto;
}

/* QA (Porter QA 4 §4): the "Meet the Attorney" block on practice-area pages
   (e.g. /practice-areas/birth-injuries/) is a two-column block — a fixed-width
   centered headshot beside a long bio. Core columns stretch to equal height but
   top-align their contents, so the short photo column left a large empty gap
   beneath the headshot. Vertically center any content column row that contains
   an image so the photo balances against the text. Scoped with :has() to
   image+text rows only; text-only column rows keep their default top alignment. */
.content-body .wp-block-columns:has(.wp-block-image),
.entry-content .wp-block-columns:has(.wp-block-image) {
  align-items: center;
}

/* Block separator */
.wp-block-separator {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 2em 0;
}

/* Block quote */
.wp-block-quote {
  border-left: 4px solid var(--color-main);
  padding-left: 20px;
  margin: 1.5em 0;
  font-style: italic;
}

/* Block table — the figure is the horizontal scroll surface so tables stay
   readable on phones instead of squishing columns to one-word-per-line. The
   inner table keeps a sensible min-width and scrolls (mobile min-width is
   asserted in the QA6 block at the end of this file). */
.wp-block-table {
  width: 100%;
  margin-bottom: 1em;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.wp-block-table > table,
.wp-block-table table {
  width: 100%;
  border-collapse: collapse;
}

.wp-block-table th,
.wp-block-table td {
  border: 1px solid var(--color-border);
  padding: 10px 12px;
  text-align: left;
}

.wp-block-table th {
  background-color: var(--color-bg-light);
  font-weight: 700;
}

/* ==========================================================================
   20. PRINT STYLES
   ========================================================================== */
@media print {
  /* Batch 7: dropped dead legacy section-13 selectors (.footer-cta-section,
     .footer-offices, .footer-copyright) from this print-hide group. */
  .site-header,
  .header-main,
  .mobile-header,
  .nav-bar-primary,
  .nav-bar-secondary,
  .sidebar-cta,
  .menu-toggle {
    display: none !important;
  }

  body {
    font-size: 12pt;
    color: #000;
  }

  a {
    color: #000;
    text-decoration: underline;
  }

  .layout-65-35 > .content-main,
  .layout-70-30 > .content-main,
  .layout-35-65 > .content-main {
    width: 100% !important;
  }

  .layout-65-35 > .content-sidebar,
  .layout-70-30 > .content-sidebar,
  .layout-35-65 > .content-sidebar {
    display: none !important;
  }
}

/* ==========================================================================
   21. SHARED TEMPLATE COMPONENTS
   (Formerly "OXYGEN PARITY PASS". Batch 7 folded every base-rule override that
   this append-only section used to re-declare via cascade order back into its
   canonical definition higher in the file — see the "merged override from the
   former parity-pass section" notes throughout. What remains here are genuinely
   NEW selectors with no earlier definition: the archive/search/error heroes,
   glossary, professional-content, location-contact, results-page-modal,
   cancer-splash and post/archive card families, plus a handful of parity-only
   companions (.sidebar-widget h3, bare .cta-phone, .entry-content p + p, the
   .sidebar-cta submit-button rules). The post/archive card family is flagged in
   place as deliberately-not-folded. The 991px/767px sub-blocks lower down were
   canonicalized into the section-18 breakpoint blocks in Batch 7.)
   ========================================================================== */

.porter-content-breadcrumb-row {
  border-bottom: 1px solid rgba(188, 188, 188, 0.5);
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 18px var(--section-padding);
}

/* Batch 7: folded up into their canonical rules in sections 4b/typography —
   .content-wrapper--page/--single (~line 375), .entry-title (~line 662),
   .entry-content (~line 561). The .entry-content p + p rule below has no earlier
   definition, so it stays here. */

.entry-content p + p {
  margin-top: 1.2em;
}

.last-updated--author {
  display: flex;
  align-items: center;
  gap: 14px;
  border-top: 1px solid var(--color-border);
  margin-top: 32px;
  padding-top: 18px;
  font-size: 15px;
}

.last-updated--author img {
  border-radius: 50%;
}

.last-updated--page {
  align-items: center;
  display: flex;
  gap: 12px;
  margin: 0 0 26px;
  padding: 0 0 18px;
  border-top: 0;
  border-bottom: 1px solid var(--color-border);
}

.last-updated--page img {
  border-radius: 50%;
  height: 44px;
  object-fit: cover;
  width: 44px;
}

.last-updated__meta {
  color: var(--color-medium-text);
  font-size: 15px;
}

.last-updated__meta a {
  color: var(--color-main);
  font-weight: 700;
}

/* Batch 7: .sidebar, .sidebar-widget, .sidebar-cta, .sidebar-cta h3, and the
   .sidebar-cta .wsf-form input/textarea border-color override were folded up
   into their canonical rules (sections 4b ~line 431 and 8 ~line 2306, and the
   WS Form section ~line 5044). The rules kept below have NO earlier definition:
   .sidebar-widget h3, the bare .cta-phone, and the .sidebar-cta submit-button
   rules — they stay in this shared-template section. The former grouped
   ".sidebar-cta .cta-phone, .cta-phone" lost its first selector: that scoped
   case is now handled identically by the canonical .sidebar-cta .cta-phone rule. */

.sidebar-widget h3 {
  color: var(--color-darker);
  font-size: 26px;
  line-height: 1.2;
  margin-bottom: 16px;
}

.cta-phone {
  display: inline-block;
  color: #000;
  font-size: 28px;
  font-weight: 800;
  margin: 8px 0 18px;
  text-decoration: none;
}

.sidebar-cta .wsf-form button[type="submit"],
.sidebar-cta .wsf-form input[type="submit"] {
  background-color: var(--color-main);
  border-color: var(--color-main);
}

.sidebar-cta .wsf-form button[type="submit"]:hover,
.sidebar-cta .wsf-form input[type="submit"]:hover {
  background-color: var(--color-darker);
  border-color: var(--color-darker);
}

.information-menu,
.sidebar-nav {
  display: flex;
  flex-direction: column;
}

.information-menu a,
.sidebar-nav a,
.sidebar-link-item {
  display: block;
  color: var(--color-main);
  padding: 10px 12px;
  text-decoration: none;
  border-bottom: 1px solid rgba(188, 188, 188, 0.5);
}

.information-menu a:hover,
.sidebar-nav a:hover,
.sidebar-link-item:hover {
  background-color: #e3dddc;
  color: var(--color-darker);
}

.sidebar-results .result-item,
.professional-result-list a {
  display: block;
  color: var(--color-text);
  text-decoration: none;
  padding: 12px 0;
  border-bottom: 1px solid rgba(188, 188, 188, 0.5);
}

.result-item .result-amount,
.professional-result-list strong {
  display: block;
  color: var(--color-main);
  font-size: 24px;
  font-weight: 800;
  line-height: 1.15;
}

.result-item .result-category,
.professional-result-list span {
  display: block;
  color: var(--color-text);
  font-size: 15px;
  line-height: 1.4;
  margin-top: 4px;
}

.sidebar-view-all {
  display: inline-flex;
  margin-top: 14px;
  color: var(--color-main);
  font-weight: 800;
}

/* Batch 7: .testimonial-quote / p / cite folded up into their canonical rules
   (~line 554). .testimonial-quote__icon below has no earlier definition, so it
   stays in this shared-template section. */

.testimonial-quote__icon {
  color: var(--color-gold);
  font-size: 34px;
  line-height: 1;
}

/* Batch 7: deleted the dead parity-pass .consultation-cta* copies
   (.consultation-cta, __inner, __logo, __heading, __description). 0 PHP/JS refs. */

.archive-hero {
  background-image: linear-gradient(rgba(48, 19, 11, 0.8), rgba(48, 19, 11, 0.8)), url('../images/hero-office.jpg');
  background-position: center;
  background-size: cover;
  color: var(--color-white);
}

.archive-hero__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 90px var(--section-padding);
}

.archive-hero__title {
  color: var(--color-light-text);
  font-size: 54px;
  line-height: 1.12;
  margin: 0;
}

.archive-hero__subtitle {
  color: var(--color-white);
  font-size: 22px;
  max-width: 760px;
  margin: 18px 0 0;
}

.archive-wrapper {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 60px var(--section-padding);
}

.porter-search-hero,
.porter-archive-shell__hero,
.porter-error-hero {
  background-image: linear-gradient(rgba(81, 35, 13, 0.63), rgba(81, 35, 13, 0.63)), url('../images/hero-office.jpg');
  background-position: center;
  background-size: cover;
  color: var(--color-white);
  text-align: left;
}

.porter-search-hero__inner,
.porter-archive-shell__hero > .section-inner,
.porter-error-hero__inner {
  display: flex;
  max-width: var(--max-width);
  padding-top: 100px;
  padding-bottom: 100px;
}

.porter-search-hero__title,
.porter-archive-shell__title,
.porter-error-hero__title {
  color: var(--color-white);
  font-size: 54px;
  line-height: 1.1;
  margin: 0;
}

.porter-search-count,
.porter-archive-shell__description,
.porter-error-hero__description {
  color: var(--color-white);
  font-size: 22px;
  margin: 16px 0 0;
}

/* 404 hero "404" code label above the heading. */
.porter-error-hero__code {
  color: var(--color-white);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.15em;
  margin: 0 0 8px;
  text-transform: uppercase;
}

.porter-search-results__inner,
.porter-archive-shell__results > .section-inner,
.porter-error-results__inner {
  max-width: var(--max-width);
  padding-top: 75px;
}

/* 404 body: search box, popular-section links, and the CTA button. */
.porter-error-results__inner {
  padding-bottom: 75px;
}

.porter-error-search__title,
.porter-error-links__title {
  font-size: 26px;
  margin: 0 0 16px;
}

.porter-error-links {
  margin-top: 40px;
}

.porter-error-links__list {
  display: grid;
  gap: 12px 30px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.porter-error-links__list a {
  color: var(--color-button-blue);
  font-weight: 600;
  text-decoration: none;
}

.porter-error-links__list a:hover {
  text-decoration: underline;
}

.porter-error-cta {
  margin-top: 40px;
}

.porter-search-results__grid,
.archive-card-grid {
  align-items: stretch;
  display: grid;
  grid-template-columns: repeat(3, minmax(200px, 1fr));
  gap: 20px;
}

.porter-search-card__link {
  align-items: flex-start;
  background-color: var(--color-white);
  box-shadow: 0 0 10px rgba(33, 33, 33, 0.1);
  color: var(--color-text);
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-between;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.2s, box-shadow 0.2s;
  width: 100%;
}

.porter-search-card__link:hover {
  background-color: #fbf7f5;
  box-shadow: 0 8px 24px rgba(33, 33, 33, 0.14);
  color: var(--color-text);
}

.porter-search-card__image {
  background-color: var(--color-bg-light);
  display: block;
  height: 200px;
  object-fit: cover;
  width: 100%;
}

.porter-search-card__image--placeholder {
  background-image: linear-gradient(rgba(81, 35, 13, 0.2), rgba(81, 35, 13, 0.2)), url('../images/hero-office.jpg');
  background-position: center;
  background-size: cover;
}

.porter-search-card__title {
  color: var(--color-heading);
  font-size: 22px;
  line-height: 1.25;
  margin: 0;
  text-align: left;
}

.porter-search-card__divider {
  background-color: #c9c9c9;
  min-height: 2px;
  width: 100%;
}

.porter-search-card__date {
  color: var(--color-text);
  font-size: 15px;
  font-weight: 400;
  text-align: left;
}

.porter-search-empty {
  background-color: var(--color-white);
  box-shadow: var(--shadow-card-inner);
  padding: 32px;
}

/* Batch 7 — DELIBERATELY NOT FOLDED (flagged, left as-is):
   The .post-card / .archive-card card family is styled across BOTH the earlier
   canonical .post-* block (~line 1180) AND this parity block, which groups the
   live .post-* selectors with the live .archive-card* selectors (template-parts/
   card.php emits the two variants on separate elements). The post-card variant
   relies on the parity-only .post-card__image / __content / __title / __divider /
   __meta / __image-placeholder rules below for most of its look, so the families
   are genuinely entangled. Folding would mean splitting every grouped selector
   and risking a cascade regression on live blog/archive/hospital templates for
   no functional gain — the current source order already resolves correctly.
   Kept verbatim per the "when unsure, keep both" rule. */
.post-grid,
.archive-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}

/* QA (Porter QA 4 §5): this unconditional parity grid above is the LAST
   `.post-grid`/`.archive-card-grid` declaration in the file, so by source order
   it overrode the responsive @media rules near the top (media queries add no
   specificity). The blog/archive grids were therefore stuck at 3 columns on
   every viewport — on phones the cards became razor-thin and titles wrapped one
   word per line. Re-assert the responsive column counts here, after the parity
   base, so they win. */
@media (max-width: 991px) {
  .post-grid,
  .archive-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .post-grid,
  .archive-card-grid {
    grid-template-columns: 1fr;
  }
}

.post-card,
.archive-card {
  background-color: var(--color-white);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: box-shadow 0.2s;
}

.post-card:hover,
.archive-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
}

.archive-card__link {
  color: var(--color-text);
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
}

.archive-card__media {
  display: flex;
  flex-direction: column;
}

.post-card__image,
.archive-card__image {
  display: block;
  height: 200px;
  overflow: hidden;
  background-color: var(--color-bg-light);
}

.post-card__image img,
.archive-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.archive-card__image-el {
  background-color: var(--color-bg-light);
  display: block;
  height: 200px;
  object-fit: cover;
  width: 100%;
}

.archive-card__image-el--placeholder {
  background-image: linear-gradient(135deg, #f6f1ef, #dec9bd);
}

.post-card__image-placeholder {
  display: block;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(135deg, #f6f1ef, #dec9bd);
}

.post-card__content,
.archive-card__body {
  padding: 20px;
}

.post-card__title,
.archive-card__title {
  font-size: 22px;
  line-height: 1.25;
  margin-bottom: 16px;
}

.post-card__title a,
.archive-card__title a {
  color: var(--color-heading);
  text-decoration: none;
}

.post-card__divider,
.archive-card__divider {
  width: 100%;
  height: 1px;
  background-color: rgba(188, 188, 188, 0.7);
  margin-bottom: 14px;
}

.post-card__meta,
.archive-card__date {
  color: var(--color-text);
  font-size: 14px;
}

.post-card__meta a {
  color: var(--color-link);
  font-weight: 800;
}

.blog-category-strip {
  background-color: var(--color-white);
  border-bottom: 1px solid rgba(188, 188, 188, 0.5);
}

.blog-category-strip__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 24px var(--section-padding);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.blog-category-card {
  align-items: center;
  background-color: var(--color-main);
  border-radius: 4px;
  color: var(--color-white);
  display: flex;
  flex-direction: column;
  font-size: 19px;
  font-weight: 800;
  gap: 14px;
  justify-content: center;
  line-height: 1.25;
  min-height: 130px;
  padding: 26px 18px;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.blog-category-card:hover,
.blog-category-card:focus-visible {
  background-color: var(--color-darker);
  color: var(--color-white);
}

.blog-category-card__icon {
  align-items: center;
  display: inline-flex;
  justify-content: center;
}

.blog-category-card__icon svg {
  height: 34px;
  width: 34px;
}

.blog-category-card__label {
  display: block;
}

.glossary-hero {
  background-image: linear-gradient(rgba(81, 35, 13, 0.63), rgba(81, 35, 13, 0.63)), url('../images/hero-office.jpg');
  background-position: center;
  background-size: cover;
  color: var(--color-white);
}

.glossary-hero__inner,
.glossary-listing__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding-left: var(--section-padding);
  padding-right: var(--section-padding);
}

.glossary-hero__inner {
  align-items: center;
  display: flex;
  min-height: 310px;
  padding-bottom: 84px;
  padding-top: 84px;
}

.glossary-hero__title {
  color: var(--color-white);
  font-size: 54px;
  line-height: 1.1;
  margin: 0;
}

.glossary-hero__subtitle {
  color: var(--color-white);
  font-size: 24px;
  line-height: 1.4;
  margin-top: 16px;
}

.glossary-listing {
  background-color: var(--color-white);
}

.glossary-listing__inner {
  padding-bottom: 75px;
  padding-top: 75px;
}

.glossary-listing__grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.glossary-listing__link {
  color: var(--color-text);
  display: block;
  height: 100%;
  text-decoration: none;
}

.glossary-listing__card {
  align-items: center;
  background-color: var(--color-white);
  box-shadow: 0 0 10px rgba(33, 33, 33, 0.1);
  display: flex;
  height: 100%;
  justify-content: center;
  min-height: 118px;
  padding: 24px;
  text-align: center;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.glossary-listing__link:hover .glossary-listing__card {
  background-color: #fbf7f5;
  box-shadow: 0 8px 24px rgba(33, 33, 33, 0.14);
}

.glossary-listing__title {
  color: var(--color-heading);
  font-size: 24px;
  line-height: 1.24;
  margin: 0;
  text-align: center;
}

.glossary-listing__empty {
  background-color: var(--color-white);
  box-shadow: var(--shadow-card-inner);
  padding: 32px;
}

.professional-content {
  background: linear-gradient(180deg, rgba(137, 48, 2, 0.25) 0, rgba(137, 48, 2, 0.25) 200px, #fff 200px, #fff 100%);
}

.professional-content-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  /* Top padding was 60px, which stacked under the gradient strip + section
     gutter to leave ~80px of dead space above the breadcrumb trail. Pulled the
     top in to 26px so the trail sits just inside the card; bottom stays roomy. */
  padding: 26px var(--section-padding) 56px;
}

.professional-content-card {
  background-color: var(--color-white);
  box-shadow: 0 0 10px #a8a8a8;
}

.professional-columns {
  display: flex;
  gap: 0;
  align-items: flex-start;
}

/* The article precedes the aside in DOM (heading order: the H1 must come
   before the sidebar H2s); `order` restores the visual sidebar-left layout
   on desktop and sidebar-above-content stacking on mobile. */
.professional-sidebar {
  width: 35%;
  flex: 0 0 35%;
  order: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
  box-shadow: 2px 0 5px #c6c6c6;
}

.professional-main-content {
  width: 65%;
  flex: 1;
  order: 1; /* content on the LEFT (decluttered layout) */
  padding: 36px;
}

.professional-sidebar-why,
.professional-sidebar-cta,
.professional-sidebar-links,
.professional-sidebar-results,
.professional-sidebar-form,
.professional-sidebar-ny,
.professional-sidebar-testimonials {
  background-color: var(--color-white);
  padding: 24px;
  border-bottom: 1px solid var(--color-border);
}

.professional-sidebar-cta {
  background-color: var(--color-main);
  color: var(--color-white);
}

.professional-sidebar-cta h2,
.professional-sidebar-cta a {
  color: var(--color-white);
}

.professional-static-menu,
.sidebar-link-list {
  display: flex;
  flex-direction: column;
}

.professional-static-menu a,
.sidebar-link-list a {
  color: var(--color-text);
  padding: 12px 0;
  border-bottom: 0.5px solid var(--color-border-sidebar);
  text-decoration: none;
}

.professional-static-menu a:hover,
.sidebar-link-list a:hover {
  color: var(--color-main);
  background-color: #eeeeee;
}

.professional-about-label {
  color: var(--color-main);
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.professional-title {
  color: var(--color-darker);
  font-size: 46px;
  line-height: 1.12;
  margin-bottom: 28px;
}

.last-updated--professional {
  margin: 30px 0 0;
}

.professional-sidebar-testimonials blockquote {
  border-left: 3px solid var(--color-main);
  margin: 18px 0 0;
  padding-left: 14px;
}

.professional-featured-image {
  margin: 32px 0;
}

.professional-featured-image img {
  width: 100%;
  height: auto;
}

.professional-featured-image figcaption {
  color: var(--color-muted-text);
  font-size: 14px;
  margin-top: 8px;
}

.location-contact-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 42px;
  padding: 28px;
  background-color: var(--color-bg-light);
}

.location-contact-block__eyebrow {
  color: var(--color-main);
  font-weight: 800;
  text-transform: uppercase;
}

.location-contact-block__details {
  display: grid;
  gap: 14px;
  margin-top: 24px;
}

.location-contact-block__details div {
  border-top: 1px solid var(--color-border);
  padding-top: 12px;
}

.location-contact-block__details dt {
  color: var(--color-darker);
  font-weight: 800;
}

.location-contact-block__map iframe {
  width: 100%;
  height: 100%;
  min-height: 330px;
  border: 0;
}

.porter-proof-section {
  background-color: #fff8ee;
  border: 1px solid rgba(137, 48, 2, 0.16);
  border-radius: 8px;
  margin: 34px 0;
  padding: 30px;
}

.porter-proof-section__header {
  max-width: 820px;
  margin-bottom: 24px;
}

.porter-proof-section__eyebrow,
.professional-intent-panel__eyebrow,
.professional-results-section__eyebrow {
  color: var(--color-medium-text, #7a6a60);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin: 0 0 10px;
  text-transform: uppercase;
}

.porter-proof-section__header h2,
.professional-results-section__header h2 {
  color: var(--color-darker);
  font-size: 30px;
  line-height: 1.2;
  margin: 0 0 10px;
}

.porter-proof-section__header p,
.professional-results-section__header p {
  color: var(--color-text);
  font-size: 17px;
  line-height: 1.55;
  margin: 0;
}

.porter-proof-section__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.porter-proof-card {
  background-color: var(--color-white);
  border: 1px solid rgba(137, 48, 2, 0.16);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 22px;
}

.porter-proof-card__value {
  color: var(--color-main);
  display: block;
  font-size: 24px;
  font-weight: 900;
  line-height: 1.15;
  margin-bottom: 10px;
}

.porter-proof-card h3 {
  color: var(--color-darker);
  font-size: 20px;
  line-height: 1.25;
  margin: 0 0 8px;
}

.porter-proof-card p {
  color: var(--color-text);
  font-size: 15px;
  line-height: 1.5;
  margin: 0 0 16px;
}

.porter-proof-card a {
  color: var(--color-main);
  font-weight: 900;
  margin-top: auto;
  text-decoration: none;
}

.porter-proof-card a:hover,
.porter-proof-card a:focus-visible {
  color: var(--color-darker);
  text-decoration: underline;
}

.porter-proof-section--compact {
  padding: 24px;
}

.porter-proof-section--compact .porter-proof-section__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.location-proof-strip {
  background-color: var(--color-white);
  padding: 0;
}

.professional-intent-panel {
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 28px;
  padding-bottom: 24px;
}

.professional-intent-panel__actions,
.attorney-profile-template__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}

.professional-results-section {
  border-top: 1px solid var(--color-border);
  margin-top: 38px;
  padding-top: 30px;
}

.professional-results-section .results-slider {
  margin-top: 20px;
}

.article-header--glossary {
  background-color: var(--color-article-header);
}

/* Batch 7: .article-header__tag override folded up into the canonical rule
   (~line 853). */

.article-header__byline {
  color: var(--color-white);
  font-size: 17px;
  margin-top: 16px;
}

.article-header__byline a {
  color: var(--color-white);
}

.reviewer-block {
  background-color: var(--color-bg-light);
  padding: 40px var(--section-padding);
}

.reviewer-block__inner {
  max-width: var(--max-width);
  margin: 0 auto;
}

.results-page__listing-inner {
  padding-left: 0;
}

.results-page__intro {
  color: var(--color-text);
  font-size: 20px;
  line-height: 1.7;
  margin-bottom: 28px;
}

.results-page__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 28px;
}

.results-page__filter {
  border: 2px solid var(--color-main);
  border-radius: 999px;
  background-color: var(--color-white);
  color: var(--color-main);
  cursor: pointer;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.1;
  padding: 10px 16px;
}

.results-page__filter:hover,
.results-page__filter:focus-visible,
.results-page__filter.is-active {
  background-color: var(--color-main);
  color: var(--color-white);
}

.results-page__grid {
  align-items: stretch;
  display: grid;
  grid-template-columns: repeat(3, minmax(200px, 1fr));
  column-gap: 10px;
  row-gap: 20px;
}

.results-page__item {
  align-items: stretch;
  display: flex;
  flex-direction: row;
  padding: 5px;
  text-align: justify;
}

/* The filter JS toggles [hidden] on non-matching cards, but the explicit
   display:flex above beats the UA [hidden]{display:none} rule, so cards never
   hid. Mirror the .results-page__modal[hidden] override so filtering works. */
.results-page__item[hidden] {
  display: none;
}

.results-page__detail {
  width: 100%;
}

.results-page__card {
  align-items: flex-start;
  background-color: rgba(137, 48, 2, 0.8);
  border: 2px solid #51230d;
  border-radius: 20px;
  border-bottom-left-radius: 0;
  display: flex;
  flex-direction: column;
  font-family: inherit;
  min-height: 150px;
  padding: 24px;
  text-align: left;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  width: 100%;
}

.results-page__case-type {
  margin-bottom: 16px;
}

.results-page__card:hover {
  background-color: rgba(137, 48, 2, 0.6);
  border-color: #51230d;
  cursor: pointer;
}

.results-page__amount {
  color: var(--color-white);
  font-size: 30px;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 14px;
}

.results-page__result-type {
  color: var(--color-white);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1.2;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.results-page__category {
  color: #e3c88a;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.4;
}

.results-page__modal[hidden] {
  display: none;
}

.results-page__modal {
  align-items: center;
  background-color: rgba(28, 15, 10, 0.78);
  bottom: 0;
  display: flex;
  justify-content: center;
  left: 0;
  overflow-y: auto;
  padding: 32px var(--section-padding);
  position: fixed;
  right: 0;
  top: 0;
  z-index: 9999;
}

.results-page__modal-panel {
  background-color: var(--color-white);
  border: 2px solid #51230d;
  border-radius: 8px;
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.35);
  color: var(--color-text);
  display: block;
  max-width: 840px;
  padding: 42px;
  position: relative;
  width: min(840px, 100%);
}

.results-page__modal-close {
  align-items: center;
  background-color: var(--color-main);
  border: 0;
  border-radius: 50%;
  color: var(--color-white);
  cursor: pointer;
  display: inline-flex;
  font-family: inherit;
  font-size: 28px;
  font-weight: 800;
  height: 42px;
  justify-content: center;
  line-height: 1;
  position: absolute;
  right: 18px;
  top: 18px;
  transition: background-color 0.2s ease;
  width: 42px;
}

.results-page__modal-close:hover,
.results-page__modal-close:focus {
  background-color: var(--color-cta-orange);
}

.results-page__detail-title {
  color: var(--color-heading);
  font-size: 34px;
  font-weight: 800;
  line-height: 1.18;
  margin-bottom: 22px;
  padding-right: 52px;
}

.results-page__detail-content {
  color: var(--color-text);
}

.results-modal-open {
  overflow: hidden;
}

/* Result single pages */
.result-single-page__content {
  font-size: 18px;
}

.result-single {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.result-single__summary {
  background-color: #f8f1e8;
  border-left: 5px solid var(--color-cta-orange);
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 24px;
}

.result-single__summary-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.result-single__summary-label {
  color: var(--color-text);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.2;
  text-transform: uppercase;
}

.result-single__summary-item strong {
  color: var(--color-heading);
  font-size: 18px;
  line-height: 1.25;
}

.result-single__amount {
  font-size: 34px;
}

.result-single__body {
  color: var(--color-text);
}

.result-single__body > *:first-child {
  margin-top: 0;
}

.result-single__body > *:last-child {
  margin-bottom: 0;
}

.result-single__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* Testimonials page */
.testimonials-page__masonry {
  column-count: 3;
  column-gap: 24px;
}

.testimonials-page__card {
  background-color: var(--color-white);
  border: 1px solid rgba(137, 48, 2, 0.18);
  border-radius: 8px;
  break-inside: avoid;
  box-shadow: 0 12px 28px rgba(81, 35, 13, 0.08);
  display: inline-block;
  margin: 0 0 24px;
  padding: 24px;
  text-align: left;
  width: 100%;
}

.testimonial-wall-card__source {
  background-color: #f8f1e8;
  border: 1px solid rgba(137, 48, 2, 0.16);
  border-radius: 999px;
  color: var(--color-main);
  display: inline-flex;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.2;
  padding: 6px 10px;
  text-decoration: none;
}

.testimonial-wall-card__source:hover {
  color: var(--color-cta-orange-hover);
}

.testimonial-wall-card__date {
  color: var(--color-medium-text);
  font-size: 13px;
  font-weight: 700;
}

.testimonial-wall-card__stars {
  color: var(--color-gold);
  font-size: 18px;
  letter-spacing: 0;
  line-height: 1;
  margin-bottom: 16px;
}

.testimonial-wall-card__title {
  color: var(--color-heading);
  font-size: 24px;
  line-height: 1.25;
  margin: 0 0 16px;
  overflow-wrap: anywhere;
}

.testimonial-wall-card > :first-child {
  margin-top: 0;
}

.testimonial-wall-card__text {
  color: var(--color-text);
  font-size: 17px;
  line-height: 1.62;
}

.testimonial-wall-card__text p:last-child {
  margin-bottom: 0;
}

.testimonial-wall-card__author-row {
  align-items: center;
  display: flex;
  gap: 12px;
  margin-top: 22px;
}

.testimonial-wall-card__meta {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.testimonial-wall-card__avatar {
  align-items: center;
  background-color: var(--color-main);
  border-radius: 50%;
  color: var(--color-white);
  flex: 0 0 44px;
  height: 44px;
  object-fit: cover;
  width: 44px;
}

.testimonial-wall-card__avatar--placeholder {
  display: inline-flex;
  font-size: 18px;
  font-weight: 900;
  justify-content: center;
}

.testimonial-wall-card__author {
  color: var(--color-heading);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.25;
}

/* Cancer splash pages: Oxygen PorterCancerSplash 3551 */
.cancer-splash-page {
  background-color: var(--color-white);
  max-width: 100%;
  padding: 0;
}

.cancer-hero {
  background-image: linear-gradient(rgba(35, 18, 12, 0.72), rgba(35, 18, 12, 0.72)), url('../images/practice-cancer.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: var(--color-white);
}

.cancer-hero__wrap,
.cancer-call-strip__inner,
.cancer-content__wrap,
.cancer-info__wrap,
.cancer-results__wrap,
.cancer-why__wrap,
.cancer-story__wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding-left: var(--section-padding);
  padding-right: var(--section-padding);
}

.cancer-hero__wrap {
  padding-top: 58px;
  padding-bottom: 58px;
}

.cancer-hero__frame {
  width: 100%;
}

.cancer-hero__columns {
  align-items: center;
  display: grid;
  gap: 48px;
  grid-template-columns: minmax(0, 1.08fr) minmax(300px, 0.92fr);
}

.cancer-hero__copy {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.cancer-hero__title {
  color: var(--color-white);
  font-size: 50px;
  line-height: 1.12;
  margin: 0;
}

.cancer-hero__intro {
  color: var(--color-white);
  font-size: 24px;
  line-height: 1.45;
  max-width: 760px;
}

.cancer-hero__intro p:last-child {
  margin-bottom: 0;
}

.cancer-hero__phone {
  border-left: 4px solid var(--color-cta-orange);
  display: grid;
  gap: 2px;
  padding-left: 18px;
}

.cancer-hero__phone-label {
  color: rgba(255, 255, 255, 0.84);
  font-size: 18px;
  font-weight: 700;
}

.cancer-hero__phone-number {
  color: var(--color-white);
  font-size: 36px;
  font-weight: 800;
  line-height: 1.1;
  text-decoration: none;
}

.cancer-hero__phone-number:hover {
  color: var(--color-cta-orange-hover);
}

.cancer-button {
  align-items: center;
  border-radius: 6px;
  display: inline-flex;
  font-size: 20px;
  font-weight: 800;
  justify-content: center;
  line-height: 1.2;
  min-height: 58px;
  padding: 16px 34px;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.cancer-button--light {
  background-color: var(--color-cta-orange);
  border: 2px solid var(--color-cta-orange);
  color: var(--color-white);
}

.cancer-button--light:hover {
  background-color: var(--color-cta-orange-hover);
  border-color: var(--color-cta-orange-hover);
  color: var(--color-white);
}

.cancer-button--dark {
  background-color: var(--color-darker);
  border: 2px solid var(--color-darker);
  color: var(--color-white);
}

.cancer-button--dark:hover {
  background-color: var(--color-main);
  border-color: var(--color-main);
  color: var(--color-white);
}

.cancer-hero__media {
  display: flex;
  justify-content: center;
}

.video-cta-card {
  align-items: center;
  aspect-ratio: 16 / 9;
  background-color: var(--color-darker);
  background-image: linear-gradient(rgba(28, 16, 10, 0.34), rgba(28, 16, 10, 0.62)), url('../images/office-bg.jpg');
  background-position: center;
  background-size: cover;
  border-radius: 14px;
  box-shadow: 0 14px 34px rgba(56, 36, 29, 0.26);
  color: var(--color-white);
  display: flex;
  justify-content: center;
  min-height: 240px;
  overflow: hidden;
  position: relative;
  text-align: center;
  text-decoration: none;
  transition: box-shadow 0.2s ease;
  width: 100%;
}

/* The hero poster is capped so it doesn't dominate the split hero column; the
   standalone poster (e.g. location pages) fills its content column. */
.cancer-hero__media .video-cta-card {
  max-width: 500px;
}

.video-cta-card:hover {
  box-shadow: 0 18px 42px rgba(56, 36, 29, 0.34);
  color: var(--color-white);
}

/* Circular play button (white disc + brand-brown triangle). */
.video-cta-card__thumb {
  align-items: center;
  background-color: rgba(255, 255, 255, 0.95);
  border-radius: 50%;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
  display: inline-flex;
  height: 74px;
  justify-content: center;
  transition: transform 0.2s ease, background-color 0.2s ease;
  width: 74px;
}

.video-cta-card:hover .video-cta-card__thumb {
  background-color: var(--color-white);
  transform: scale(1.07);
}

.video-cta-card__thumb::before {
  border-bottom: 11px solid transparent;
  border-left: 18px solid var(--color-main);
  border-top: 11px solid transparent;
  content: "";
  display: block;
  margin-left: 4px;
}

.video-cta-card__label {
  bottom: 20px;
  color: var(--color-white);
  font-size: 21px;
  font-weight: 800;
  left: 0;
  position: absolute;
  right: 0;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
}

.cancer-call-strip {
  background-color: var(--color-location-bar);
  color: var(--color-white);
}

.cancer-call-strip__inner {
  align-items: center;
  display: flex;
  gap: 28px;
  justify-content: space-between;
  padding-bottom: 26px;
  padding-top: 26px;
}

.cancer-call-strip__heading {
  color: var(--color-white);
  font-size: 30px;
  line-height: 1.22;
  margin: 0;
}

.cancer-content,
.cancer-info,
.cancer-results,
.cancer-why,
.cancer-story {
  padding: 56px 0;
}

.cancer-content__columns {
  align-items: start;
  display: grid;
  gap: 46px;
  grid-template-columns: minmax(0, 1fr) minmax(290px, 380px);
}

.cancer-content__body {
  color: var(--color-text);
  font-size: 20px;
  line-height: 1.72;
}

.cancer-content__body h2 {
  color: var(--color-darker);
  font-size: 34px;
  line-height: 1.18;
}

/* Type-specific case video poster in the cancer page body. */
.cancer-content__video {
  margin-top: 28px;
  max-width: 560px;
}

.cancer-content__side {
  display: grid;
  gap: 22px;
}

.cancer-content__image {
  box-shadow: var(--shadow-card-inner);
  height: auto;
  width: 100%;
}

.cancer-content__menu {
  background-color: var(--color-bg-light);
  box-shadow: var(--shadow-card-inner);
  display: grid;
}

.cancer-content__menu span {
  background-color: var(--color-main);
  color: var(--color-white);
  font-weight: 800;
  padding: 14px 18px;
}

.cancer-content__menu a {
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
  font-weight: 700;
  padding: 13px 18px;
}

.cancer-content__menu a:hover {
  background-color: #eeeeee;
  color: var(--color-main);
}

.cancer-info {
  background-color: var(--color-bg-light);
}

.cancer-info__grid,
.cancer-results__grid,
.cancer-why__grid {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cancer-info__item,
.cancer-why__grid > div {
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card-inner);
  padding: 26px;
}

.cancer-info__item strong,
.cancer-why__grid strong {
  color: var(--color-darker);
  display: block;
  font-size: 22px;
  line-height: 1.25;
  margin-bottom: 10px;
}

.cancer-info__item p,
.cancer-why__grid p {
  margin-bottom: 0;
}

.cancer-results {
  background-color: rgba(137, 48, 2, 0.1);
}

.cancer-section-heading {
  color: var(--color-darker);
  font-size: 38px;
  line-height: 1.18;
  margin-bottom: 28px;
  text-align: center;
}

.cancer-results__grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cancer-results__card {
  background-color: rgba(137, 48, 2, 0.86);
  border: 2px solid var(--color-case-result-border);
  color: var(--color-white);
  display: grid;
  gap: 12px;
  min-height: 156px;
  padding: 24px;
  text-decoration: none;
}

.cancer-results__card:hover {
  background-color: rgba(137, 48, 2, 0.72);
  color: var(--color-white);
}

.cancer-results__card span {
  color: var(--color-white);
  font-size: 30px;
  font-weight: 800;
  line-height: 1.1;
}

.cancer-results__card strong {
  color: var(--color-white);
  font-size: 18px;
  line-height: 1.35;
}

.cancer-story {
  background-color: var(--color-darker);
  color: var(--color-white);
}

.cancer-story__content {
  align-items: center;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  max-width: 900px;
  text-align: center;
}

.cancer-story .cancer-section-heading,
.cancer-story p {
  color: var(--color-white);
}

.cancer-story p {
  font-size: 22px;
  line-height: 1.58;
  margin-bottom: 24px;
}

/* FAQ pages: production page family /faqs/ */
.faq-content {
  color: var(--color-text);
  font-size: 20px;
  line-height: 1.7;
}

.faq-content h2 {
  color: var(--color-darker);
  font-size: 32px;
  line-height: 1.2;
  margin: 34px 0 16px;
}

.faq-content ul {
  display: grid;
  gap: 12px;
  list-style-position: outside;
  margin: 18px 0 30px 22px;
}

.faq-content li::marker {
  color: var(--color-main);
}

.faq-content a {
  color: var(--color-main);
  font-weight: 700;
}

.faq-content details {
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 5px;
  box-shadow: var(--shadow-card-inner);
  margin: 14px 0;
  padding: 18px 22px;
}

.faq-content summary {
  color: var(--color-darker);
  cursor: pointer;
  font-size: 20px;
  line-height: 1.35;
}

.faq-content details[open] summary {
  margin-bottom: 12px;
}

.faq-content summary::marker {
  color: var(--color-main);
}

/* Batch 7: the former parity-pass @media (max-width: 991px) block was
   relocated into the canonical section-18b 991px block (~line 5561). */

/* Batch 7: the former parity-pass @media (max-width: 767px) block was
   relocated into the canonical section-18c 767px block (~line 5691). */

/* ==========================================================================
   22. MOTION POLICY
   Hover states may change color, opacity, or shadow, but should not move.
   ========================================================================== */
.btn-l:hover,
.btn-m:hover,
.btn-s:hover,
.btn-primary:hover,
.btn-secondary:hover,
.btn-white:hover,
.btn-video:hover,
.btn-trans:hover,
.hero-cta-primary:hover,
.hero-cta-video:hover,
.cancer-button:hover,
.video-cta-card:hover,
.cancer-results__card:hover,
.post-card:hover,
.archive-card:hover,
.case-results__card:hover .case-results__card-inner,
.practice-areas__card:hover .practice-areas__card-inner,
.wsf-form button[type="submit"]:hover,
.wsf-form input[type="submit"]:hover {
  transform: none !important;
}

.post-card:hover .post-card__image img,
.archive-card:hover .archive-card__image img {
  transform: none !important;
}

/* ==========================================================================
   QA 5 — MOBILE GRID STACKING (source-order override fix)
   Same root cause as Porter QA 4 §5 (see ~line 6811): these grids declare an
   unconditional multi-column "parity base" LATER in the file than the
   responsive @media rules in sections 18b/18c, so the base won on every
   viewport — cards became razor-thin on phones (text wrapping one word per
   line) and clipped/overlapped. Media queries add no specificity, so we
   re-assert the responsive column counts here, after all the parity bases.
   ========================================================================== */
@media (max-width: 991px) {
  .porter-search-results__grid,   /* base ~6723: repeat(3, ...) */
  .results-page__grid {           /* base ~7401: repeat(3, ...) */
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cancer-info__grid,             /* base ~7997: repeat(3, ...) */
  .cancer-results__grid,          /* base ~7997 / ~8039: repeat(3/4, ...) */
  .cancer-why__grid,
  .cancer-content__columns {      /* base ~7938: 1fr + 290-380px side column */
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .porter-search-results__grid,
  .results-page__grid,
  .porter-proof-section__grid,                                  /* base ~7248 */
  .porter-proof-section--compact .porter-proof-section__grid {  /* base ~7304 */
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   QA 6 — MOBILE FIXES (source-order override fix, continued from QA 5)
   Same root cause as QA 4 §5 / QA 5: these components declare their desktop
   "parity base" LATER in the file than the responsive @media rules in §18b/18c,
   so the base won on every viewport (media queries add no specificity). The
   QA5 sweep missed these three components, plus the interior-page H1 primitive.
   Re-assert the responsive values here, after all the parity bases.
     1. .testimonials-page__masonry  base ~7680: column-count 3 (3 razor-thin cols)
     2. .cancer-hero__columns        base ~7828: 2-col grid (video overlaps copy)
     3. .blog-category-strip__inner  base ~6999: repeat(4) (labels clipped)
     5. .template-title / .professional-title  bases ~657 / ~7200: 46-48px H1
   ========================================================================== */
@media (max-width: 991px) {
  .blog-category-strip__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .testimonials-page__masonry {
    column-count: 2;
  }

  .cancer-hero__columns {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .blog-category-strip__inner {
    grid-template-columns: 1fr;
  }

  .testimonials-page__masonry {
    column-count: 1;
  }

  /* Interior page H1s render at the desktop 46–48px on phones because
     .template-title (base ~657) / .professional-title (base ~7200) sit AFTER
     their §18c mobile overrides. Re-assert a proportionate mobile size. */
  .template-title,
  .professional-title,
  .entry-title {
    font-size: 32px;
  }

  /* Cancer hero typography has the same source-order bug: the §18c mobile
     sizes (~6090) are clobbered by the desktop base (~7840+), so the H1
     rendered at 50px and OVERFLOWED/clipped once the hero columns stacked.
     Re-assert the mobile scale. */
  .cancer-hero__title {
    font-size: 36px;
  }

  .cancer-hero__intro {
    font-size: 21px;
  }

  .cancer-hero__phone-number {
    font-size: 30px;
  }

  /* The video card's aspect-ratio (16/10) + min-height (280px) imposes a
     ~448px min-content width, which blew out the stacked 1fr grid track and
     pushed the hero wider than the phone (clipping the H1). Let the media
     column shrink and trim the mobile min-height so it fits. */
  .cancer-hero__media {
    min-width: 0;
  }

  .video-cta-card {
    min-height: 200px;
    min-width: 0;
  }

  /* §4: keep content tables readable — the figure scrolls horizontally and the
     table holds a min-width so columns don't collapse to one-word-per-line. */
  .wp-block-table > table,
  .wp-block-table table {
    min-width: 540px;
  }

  /* Raw (non-block) tables in content become their own scroll surface. */
  .content-body > table,
  .entry-content > table,
  .cancer-content__text > table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 479px) {
  .template-title,
  .professional-title,
  .entry-title {
    font-size: 28px;
  }
}

/* ==========================================================================
   RESPONSIVE HEADER — collapse to the mobile hamburger before the nav overflows.
   The desktop primary + contact menus need ~1020px; below that they cut off. So
   the hamburger takes over at <=1080px (with margin) instead of the phone-only
   767px breakpoint. Lives at end-of-file so it wins over the base header display.
   ========================================================================== */
@media (max-width: 1080px) {
  .site-header--desktop,
  .site-header__topbar {
    display: none;
  }

  .mobile-site-header {
    display: block;
  }
}

/* Divider between the breadcrumb and the content/sidebar columns on professional
   pages. Keep the bottom margin small — the columns already carry top padding,
   so a large bottom margin here just opened a dead gap above the H1. */
.professional-divider {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: 4px 0 4px;
}