/* landing.css
 * Styles for practice-area landing pages and the practice-areas hub page.
 * Self-contained; only loaded by views in views/practice-areas/ and the hub.
 */

/* ===== Document-level horizontal-overflow guard =====
   Defensive: prevent any landing-page descendant (sticky nav fade pseudo-
   element, oversized box-shadow, sub-pixel rounding on the .landing-anchor-nav
   __scroll inner wrapper, etc.) from triggering a horizontal scrollbar that
   shifts the page right and visually clips the rightmost content of full-bleed
   bands like .landing-stats--dark.

   Use overflow-x: hidden on body (NOT html, NOT clip).
   - overflow-x: clip on an ancestor paint-clips sticky descendants on the
     cross-axis: when the .landing-anchor-nav becomes "stuck", the bottom
     box-shadow that extends below the nav's box gets clipped against the
     body's clip box, which reads as the nav's bottom border being cut off
     after scroll. overflow-x: hidden on body alone does not paint-clip
     sticky descendants the same way in current Chromium / WebKit / Gecko.
   - Scoping to body (not html) preserves sticky behavior in browsers where
     overflow on the root element disables sticky on descendants.
   Scoped naturally to landing pages because landing.css is only loaded there. */
body {
  overflow-x: hidden;
}

/* ===== Hero ===== */
.landing-hero {
  min-height: 60vh;
  padding: 5rem 0;
  color: #ffffff;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  position: relative;
}

.landing-hero__title {
  margin-bottom: 1.5rem;
}

.landing-hero__tagline {
  margin-bottom: 2rem;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.landing-hero__cta {
  padding: 0.75rem 2rem;
  font-size: 1.1rem;
  font-weight: 600;
}

@media (max-width: 768px) {
  .landing-hero {
    padding: 3rem 0;
    min-height: 50vh;
  }
}

/* ===== Social proof / stats ===== */
.landing-stats__value {
  font-size: 2.5rem;
  line-height: 1;
  color: #0a1e3c;
  font-weight: 700;
}

.landing-stats__label {
  font-size: 0.95rem;
  margin-top: 0.5rem;
  color: #444;
}

/* Dark variant: navy band used as the opening frame on landings that lead
   with stats instead of a full-bleed hero. The base .landing-stats rules
   above stay intact so any caller that omits the variant prop renders
   exactly as before. */
.landing-stats--dark {
  background-color: #0a1e3c;
  color: #ffffff;
}

.landing-stats--dark .landing-stats__value {
  color: #ffffff;
}

.landing-stats--dark .landing-stats__label {
  color: #cbd5e1;
}

/* ===== Title block (image-less landing header) ===== */
.landing-title-block__h1 {
  margin-bottom: 1rem;
  color: #0a1e3c;
}

.landing-title-block__tagline {
  margin-bottom: 0;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  color: #444;
}

.landing-title-block__ctas .btn {
  padding: 0.65rem 1.75rem;
  font-weight: 600;
}

/* ===== Anchor jump-nav ===== */
.landing-anchor-nav {
  position: sticky;
  top: 0;          /* or the main-nav height if main nav is sticky; see pre-flight */
  z-index: 1020;   /* sits above page content, below typical modal layers */
  /* Hard-edged 1px bottom border + subtle drop-shadow for separation. The
     border lives ON the nav's bottom box edge so it can never be paint-clipped
     by an ancestor's overflow box (unlike a pure box-shadow, which paints
     outside the box and can be cut by an overflow:hidden/clip ancestor). The
     soft shadow stays for depth where it survives. */
  border-bottom: 1px solid rgba(10, 30, 60, 0.25);
  box-shadow: 0 4px 8px rgba(10, 30, 60, 0.08);
  /* 1px padding-bottom defeats sub-pixel rounding that can clip the bottom
     edge of pills (each pill has a 1px border) when the nav's content height
     lands on a fractional device pixel. */
  padding-bottom: 1px;
}

.landing-anchor-nav__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
}
.landing-anchor-nav__scroll::-webkit-scrollbar {
  display: none; /* WebKit / Chromium */
}

.landing-anchor-nav__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 0.5rem;
  justify-content: center;
  width: 100%;
}

@media (max-width: 767px) {
  .landing-anchor-nav__list {
    justify-content: flex-start;
  }
}

.landing-anchor-nav__item {
  flex: 0 0 auto;
}

.landing-anchor-nav__pill {
  display: inline-block;
  padding: 0.4rem 1.1rem;
  border: 1px solid #0a1e3c;
  border-radius: 999px;
  color: #0a1e3c;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  background-color: #ffffff;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.landing-anchor-nav__pill:hover,
.landing-anchor-nav__pill:focus {
  background-color: #0a1e3c;
  color: #ffffff;
  text-decoration: none;
}

/* ===== Sub-section alternating photo + text bands ===== */
.landing-subsection {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.landing-subsection__media {
  position: relative; /* anchors the absolutely-positioned review-mark badge */
  width: 100%;
  height: 100%;
  min-height: 280px;
  background-color: #6c757d;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 4px;
}

/* Yellow review-mark badge anchored to the top-right of any media box.
   Applies to real images that are pending partner review (not just the
   placeholder striped fill, which has its own block below). */
.landing-subsection__media .iplg-review-mark {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  margin-left: 0;
  z-index: 2;
}

/* Copyright + Trade Secrets certificate media: a soft drop shadow lifts the
   certificate image off the flat section background. Scoped to these two
   sections per request; Patents and Trademarks use the same pattern, so say
   the word to extend it to all four for consistency. */
#copyright .landing-subsection__media,
#trade-secrets .landing-subsection__media {
  box-shadow: 0 12px 30px -10px rgba(11, 51, 110, 0.30);
}

/* Chalky-black discipline sections (IP landing: Trademarks, Trade Secrets):
   a dark band with light text, alternating against the white Patents/Copyright
   sections. */
.landing-subsection--chalk {
  background: #1c1c1c;
}
.landing-subsection--chalk .landing-subsection__heading {
  color: #ffffff;
}
.landing-subsection--chalk p,
.landing-subsection--chalk li {
  color: rgba(255, 255, 255, 0.82);
}
.landing-subsection--chalk .landing-subsection__industries {
  color: rgba(255, 255, 255, 0.6);
}
.landing-subsection--chalk strong {
  color: #ffffff;
}
.landing-subsection--chalk a:not(.landing-subsection__inline-cta) {
  color: #8fc1ff;
}
.landing-subsection--chalk .landing-subsection__inline-cta {
  color: #ffffff;
}
.landing-subsection--chalk .landing-subsection__inline-cta:hover,
.landing-subsection--chalk .landing-subsection__inline-cta:focus {
  color: rgba(255, 255, 255, 0.78);
}

/* More breathing room between each IP discipline's image and its text column. */
@media (min-width: 992px) {
  .landing-disciplines-region .col-lg-7 {
    padding-left: 2.75rem;
    padding-right: 2.75rem;
  }
}

@media (max-width: 991px) {
  .landing-subsection__media {
    margin-bottom: 1.75rem;
    min-height: 220px;
  }
}

/* Placeholder treatment for discipline media boxes pending real imagery.
   Pairs with views/partials/elements/review-mark.ejs in the EJS.
   NOTE: not currently active on any page (all four IP discipline boxes
   now use real imagery). Kept for future reuse if a future landing page
   needs the striped "no image yet" treatment. */
.landing-subsection__media--placeholder {
  position: relative;
  background: repeating-linear-gradient(
    45deg,
    #6c757d 0,
    #6c757d 14px,
    #5a6268 14px,
    #5a6268 28px
  );
  display: flex;
  align-items: center;
  justify-content: center;
}

.landing-subsection__media--placeholder .iplg-review-mark {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  margin-left: 0;
  z-index: 2;
}

.landing-subsection__media-tbd {
  font-family: 'Karla', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.85);
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  text-align: center;
  pointer-events: none;
}

.landing-subsection__heading {
  font-family: 'Cormorant Garamond', serif;
  font-size: 34px;
  line-height: 1.2;
  color: #0b336e;
  font-weight: 500;
  margin: 0 0 1rem;
  border-bottom: 1px solid rgba(11, 51, 110, 0.12);
  padding-bottom: 0.5rem;
}

@media (max-width: 768px) {
  .landing-subsection__heading { font-size: 28px; }
}

.landing-subsection__inline-cta {
  margin-top: 1rem;
  display: inline-block;
  font-weight: 600;
}

/* Industries tag line under each discipline paragraph. Muted color, slight
   letter-spacing, sits between paragraph and bullets. Background-agnostic
   so it reads cleanly on both white and bg-light bands. */
.landing-subsection__industries {
  margin-top: 0.75rem;
  margin-bottom: 1rem;
  font-size: 0.95rem;
  color: #555;
  font-style: italic;
}

.landing-subsection ul {
  list-style-type: disc;
  padding-left: 1.5rem;
  margin-bottom: 1.25rem;
}

.landing-subsection ul li {
  margin-bottom: 0.4rem;
}

/* Practice Areas hub: square bullet markers (the hub subsections carry the
   .practice-hub-subsection class on top of .landing-subsection, so this is scoped
   to that page and leaves the disc markers on the other landing pages alone). */
.practice-hub-subsection ul {
  list-style-type: square;
}

/* ===== Process explainer (How working with us looks) =====
   Numbered cards in a row of four on desktop, single column on mobile.
   Background-agnostic: the section sets only vertical rhythm, the parent
   page picks the band color by adding bg-light or leaving it white. */
.landing-process__heading {
  color: #0a1e3c;
  margin-bottom: 1rem;
}

.landing-process__card {
  padding: 1.5rem;
  background-color: #ffffff;
  border: 1px solid #e6e8ec;
  border-radius: 4px;
  height: 100%;
}

.landing-process__number {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  background-color: #0a1e3c;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 1rem;
}

.landing-process__title {
  color: #0a1e3c;
  font-size: 1.15rem;
  margin-bottom: 0.5rem;
}

.landing-process__description {
  color: #444;
  font-size: 0.95rem;
  margin-bottom: 0;
}

/* ===== Inline contact form section ===== */
.landing-inline-form__heading {
  color: #0a1e3c;
  margin-bottom: 0.75rem;
}

.landing-inline-form__phone {
  font-size: 1.15rem;
  font-weight: 600;
  margin-top: 1rem;
}

.landing-inline-form__offices {
  list-style: none;
  padding-left: 0;
  margin-top: 0.75rem;
  color: #444;
}

.landing-inline-form__offices li {
  padding: 0.15rem 0;
}

/* ===== Attorney spotlight ===== */
.landing-attorneys__card {
  color: #333;
  transition: opacity 0.2s ease;
  display: block;
  text-decoration: none;
}

.landing-attorneys__card:hover {
  opacity: 0.85;
  text-decoration: none;
  color: #333;
}

.landing-attorneys__photo {
  width: 200px;
  height: 200px;
  object-fit: cover;
  max-width: 100%;
  border-radius: 4px;
}

/* ===== FAQ ===== */
.landing-faq__item {
  padding: 1rem 0;
  background: transparent;
  margin-bottom: 0.25rem;
  /* Lets height:auto animate on the ::details-content box below. Inherits to
     the pseudo; scoped here so it has no global effect. */
  interpolate-size: allow-keywords;
}

/* Open item sits on a white box. The padding is offset by equal negative
   side margins so the question/answer text keeps its position (no sideways
   jump on open) while the white box extends slightly around it. */
.landing-faq__item[open] {
  background: #ffffff;
  border-radius: 4px;
  padding: 1rem 1.25rem;
  margin-left: -1.25rem;
  margin-right: -1.25rem;
}

/* Animate the answer open/close. Modern browsers animate the ::details-content
   box (height interpolates from 0 to auto via interpolate-size above); browsers
   without ::details-content support simply open/close instantly. */
.landing-faq__item::details-content {
  height: 0;
  overflow: hidden;
  opacity: 0;
  transition: height 0.28s ease, opacity 0.28s ease, content-visibility 0.28s;
  transition-behavior: allow-discrete;
}
.landing-faq__item[open]::details-content {
  height: auto;
  opacity: 1;
}

.landing-faq__question {
  cursor: pointer;
  font-weight: 600;
  color: #0a1e3c;
  outline: none;
  list-style: none;
  position: relative;
  /* Reserve a left gutter and pin the chevron in it (below), so the arrow sits
     to the LEFT of the question and the text never crowds or wraps under it. */
  padding-left: 1.5em;
}

.landing-faq__question::-webkit-details-marker {
  display: none;
}

/* Chevron toggle indicator (cross-browser). Closed = chevron down; flips to
   chevron up when open. Drawn from two borders so it inherits the question's
   color and animates with a simple rotation. Absolutely pinned to the top-right
   so it never wraps below a multi-line question. */
.landing-faq__question::after {
  content: "";
  position: absolute;
  top: 0.35em;
  left: 0.1em;
  width: 0.5em;
  height: 0.5em;
  border-right: 2px solid #0b336e;
  border-bottom: 2px solid #0b336e;
  /* Closed: point RIGHT. */
  transform: rotate(-45deg);
  transition: transform 0.2s ease;
}

.landing-faq__item[open] .landing-faq__question::after {
  /* Open: point DOWN. */
  transform: rotate(45deg);
  top: 0.25em;
}

.landing-faq__answer {
  color: #444;
  margin-top: 0.5rem;
  /* Justify the answer copy so each line stretches to the full width. */
  text-align: justify;
}
/* Desktop: indent the answer to line up under the question text (past the
   left-hand chevron gutter). */
@media (min-width: 768px) {
  .landing-faq__answer { padding-left: 1.5em; }
}

.landing-faq__disclaimer {
  font-size: 0.85rem;
  color: #666;
  margin-top: 1.5rem;
  font-style: italic;
}

/* ===== Secondary CTA ===== */
.landing-cta a.btn,
.landing-cta .btn {
  background: #ffffff;
  color: #0a1e3c;
  border-color: #ffffff;
}

.landing-cta a.btn:hover,
.landing-cta .btn:hover {
  background: #ffffff;
  color: #1a3a6c;
}

/* ===== Hub page card grid ===== */
.practice-hub__grid {
  margin-top: 1rem;
}

.practice-hub__card {
  position: relative;
  display: block;
  min-height: 220px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #ffffff;
  border-radius: 4px;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.practice-hub__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  text-decoration: none;
  color: #ffffff;
}

.practice-hub__card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 30, 60, 0.55) 0%, rgba(10, 30, 60, 0.85) 100%);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: background 0.2s ease;
}

.practice-hub__card:hover .practice-hub__card-overlay {
  background: linear-gradient(180deg, rgba(10, 30, 60, 0.65) 0%, rgba(10, 30, 60, 0.92) 100%);
}

.practice-hub__card-cta {
  display: inline-block;
  margin-top: 0.5rem;
  font-weight: 600;
  text-decoration: underline;
}

/* Draft banner shown on noindex pages so reviewers know the page is unfinished. */
.draft-banner {
  background-color: #fff3cd;
  border-bottom: 4px solid #f0ad4e;
  color: #5a3e00;
  padding: 0.85rem 1.25rem;
  text-align: center;
  font-size: 0.95rem;
  position: relative;
  /* No z-index: don't float above the nav. The banner sits in normal flow
     directly under the nav, so layering above is never needed. */
}
.draft-banner strong {
  color: #b06000;
  margin-right: 0.5rem;
  letter-spacing: 0.04em;
}

/* Inline placeholder highlight applied by mark() helper to any [bracketed] string. */
.placeholder-mark {
  background-color: #fff3cd;
  color: #5a3e00;
  padding: 0.05em 0.35em;
  border-radius: 2px;
  border: 1px dashed #f0ad4e;
  font-style: italic;
  font-weight: 500;
}
.placeholder-mark::before {
  content: "\26A0\FE0F  ";  /* warning sign emoji as visual anchor */
}

/* ===== IP landing page two-column layout ===== */
/* Mirrors the location-detail.ejs sidebar pattern: full-bleed sections at the
   top of the page, then a container with main content (col-lg-9) flanked by a
   form sidebar (col-lg-3). The full-bleed banner sections (title block, intro,
   brand bar, stats band, anchor nav, mid-page CTA, recognitions, process
   explainer) sit above this main; the disciplines and FAQ render inside
   .ip-landing-main-col, and the form panel lives in .ip-landing-sidebar. */
.ip-landing-main {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.ip-landing-main-col > section {
  padding-left: 0;
  padding-right: 0;
}

.ip-landing-sidebar {
  margin-top: 2rem;
}

@media (min-width: 992px) {
  .ip-landing-sidebar {
    margin-top: 0;
    position: sticky;
    top: 1rem;
    align-self: flex-start;
  }
}

.ip-landing-sidebar__panel {
  background-color: #f8f9fa;
  border: 1px solid #e2e6ea;
  border-radius: 0.25rem;
  padding: 1.5rem;
}

.ip-landing-sidebar__heading {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: #0a1e3c;
}

.ip-landing-sidebar__lead {
  font-size: 0.9375rem;
  color: #444;
  margin-bottom: 1rem;
}

/* ===== Asymmetric title block (Phase 2.6a demo) ===== */
/* .landing-title-block-asym section uses Bootstrap py-5 for vertical rhythm */

.landing-title-block-asym__left {
  padding-right: 1rem;
}

/* Single-column hero (rightVariant omitted): the 1rem right padding above is a
   gutter toward the right-side visual. With no right column it would nudge the
   copy off-center, so drop it and let the column span its full width. */
.landing-title-block-asym__left--full {
  padding-right: 0;
}

.landing-title-block-asym__h1 {
  color: #0a1e3c;
  margin-bottom: 1rem;
  line-height: 1.15;
}

.landing-title-block-asym__tagline {
  color: #444;
  max-width: 100%;
  margin-bottom: 1rem;
}

.landing-title-block-asym__stats {
  font-size: 0.9rem;
  color: #6b7280;
  margin-bottom: 0;
}

.landing-title-block-asym__right {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  padding: 0.5rem 0.5rem 0.5rem 1rem;
}

/* Seal */
.landing-title-block-asym__right--seal svg {
  width: 220px;
  height: 220px;
  color: #0a1e3c;
}

/* Badges */
.landing-title-block-asym__right--badges {
  flex-wrap: wrap;
  gap: 1.25rem;
}

.landing-title-block-asym__badge-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  align-items: flex-start;
  justify-content: center;
}

.landing-title-block-asym__badge {
  margin: 0;
  text-align: center;
  max-width: 130px;
}

.landing-title-block-asym__badge img {
  max-width: 110px;
  height: auto;
  display: block;
  margin: 0 auto 0.4rem;
}

.landing-title-block-asym__badge figcaption {
  font-size: 0.75rem;
  color: #6b7280;
  letter-spacing: 0.04em;
}

/* Signatures */
.landing-title-block-asym__right--signatures {
  text-align: center;
  font-family: 'EB Garamond', 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  color: #0a1e3c;
  line-height: 1.5;
}

.landing-title-block-asym__signatures {
  width: 100%;
}

.landing-title-block-asym__signatures-line {
  font-size: 1.25rem;
  margin-bottom: 0;
}

/* Logos */
.landing-title-block-asym__right--logos {
  width: 100%;
}

.landing-title-block-asym__logo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 0.75rem;
  width: 100%;
}

.landing-title-block-asym__logo-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
}

.landing-title-block-asym__logo-grid img {
  max-width: 100%;
  max-height: 48px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.75;
  transition: opacity 0.2s ease, filter 0.2s ease;
}

.landing-title-block-asym__logo-grid img:hover {
  filter: grayscale(0);
  opacity: 1;
}

/* Glyphs */
.landing-title-block-asym__glyph-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 1rem;
  width: 100%;
  text-align: center;
}

.landing-title-block-asym__glyph-grid .glyph-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
}

.landing-title-block-asym__glyph-grid .glyph-cell i,
.landing-title-block-asym__glyph-grid .glyph-cell svg {
  font-size: 1.75rem;
  width: 32px;
  height: 32px;
  color: #0a1e3c;
}

.landing-title-block-asym__glyph-grid .glyph-cell-label {
  font-size: 0.8rem;
  color: #444;
  margin-top: 0.4rem;
  display: block;
}

/* Photo */
.landing-title-block-asym__right--photo {
  padding: 0;
}

.landing-title-block-asym__right--photo img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  object-fit: cover;
  aspect-ratio: 4 / 5;
}

@media (max-width: 991px) {
  .landing-title-block-asym__left {
    padding-right: 0;
  }
  .landing-title-block-asym__right {
    margin-top: 2rem;
    padding-left: 0;
  }
}

/* On mobile portrait the right column (logo grid) needs the same horizontal
   gutter as the text column above it so logos don't sit flush against the
   viewport edge. */
@media (max-width: 767px) {
  .landing-title-block-asym__right {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* ===== Asymmetric title block, image-background variant ===== */

.landing-title-block-asym--with-bg {
  position: relative;
  background-color: #0a1e3c; /* navy fallback if image fails to load */
  /* background-image / size / position are inlined per-page */
  color: #ffffff;
  overflow: hidden;
}

/* Dark overlay for text legibility over busy imagery. Adjust opacity if the
   chosen image is already dark enough on its own. */
.landing-title-block-asym--with-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 30, 60, 0.55), rgba(10, 30, 60, 0.7));
  z-index: 0;
  pointer-events: none;
}

.landing-title-block-asym--with-bg > .container {
  position: relative;
  z-index: 1;
}

.landing-title-block-asym--with-bg .landing-title-block-asym__h1 {
  color: #ffffff;
}

.landing-title-block-asym--with-bg .landing-title-block-asym__tagline {
  color: rgba(255, 255, 255, 0.92);
}

.landing-title-block-asym--with-bg .landing-title-block-asym__stats {
  color: rgba(255, 255, 255, 0.85);
}

/* Logo grid: invert grayscale logos so they read on dark backgrounds. */
.landing-title-block-asym--with-bg .landing-title-block-asym__logo-grid img {
  filter: grayscale(1) invert(1) brightness(1.1);
  opacity: 0.9;
}

.landing-title-block-asym--with-bg .landing-title-block-asym__logo-grid img:hover {
  filter: grayscale(0) invert(0);
  opacity: 1;
}

/* ===== Asymmetric title block, contained-panel background variant ===== */
/* contained:true + bgImage puts the photo on the inner col-lg-8 panel
   (rounded, side margins, real height) instead of bleeding full width. */
.landing-title-block-asym__panel--with-bg {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  background-color: #0a1e3c;
  color: #ffffff;
  min-height: 360px;
  display: flex;
  align-items: center;
  padding: 3rem 2.5rem;
}
.landing-title-block-asym__panel--with-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 30, 60, 0.55), rgba(10, 30, 60, 0.7));
  z-index: 0;
  pointer-events: none;
}
.landing-title-block-asym__panel--with-bg > .row {
  position: relative;
  z-index: 1;
  width: 100%;
  margin: 0;
}
.landing-title-block-asym__panel--with-bg .landing-title-block-asym__h1 {
  color: #ffffff;
}
.landing-title-block-asym__panel--with-bg .landing-title-block-asym__tagline {
  color: rgba(255, 255, 255, 0.92);
}
.landing-title-block-asym__panel--with-bg .landing-title-block-asym__stats {
  color: rgba(255, 255, 255, 0.85);
}
@media (max-width: 575.98px) {
  .landing-title-block-asym__panel--with-bg {
    padding: 2rem 1.25rem;
    min-height: 300px;
  }
}

/* ===== Asymmetric title block, centered (no-image) contained band ===== */
/* centered:true renders a contained, centered hero band: subtle light panel,
   navy heading, centered copy, and a primary CTA plus click-to-call. */
.landing-title-block-asym__panel--centered {
  background-color: #f5f7fb;
  border: 1px solid rgba(11, 51, 110, 0.08);
  border-radius: 8px;
  padding: 3rem 2.5rem;
  text-align: center;
}
.landing-title-block-asym__panel--centered .landing-title-block-asym__tagline {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.landing-title-block-asym__cta-group {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem 1.5rem;
}
.landing-title-block-asym__panel--centered .landing-title-block-asym__cta-group {
  justify-content: center;
}
.landing-title-block-asym__cta-primary {
  display: inline-block;
  background-color: #0b336e;
  color: #ffffff;
  border: 2px solid #0b336e;
  border-radius: 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 0.85rem 2.25rem;
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.landing-title-block-asym__cta-primary:hover,
.landing-title-block-asym__cta-primary:focus {
  background-color: #082247;
  border-color: #082247;
  color: #ffffff;
  text-decoration: none;
}
.landing-title-block-asym__cta-phone {
  display: inline-block;
  color: #0b336e;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
}
.landing-title-block-asym__cta-phone:hover,
.landing-title-block-asym__cta-phone:focus {
  text-decoration: underline;
  color: #0b336e;
}
@media (max-width: 575.98px) {
  .landing-title-block-asym__panel--centered {
    padding: 2rem 1.25rem;
  }
}

/* ===== Section header (eyebrow + h2, reusable across landing pages) ===== */
.landing-section-header__heading {
  color: #0a1e3c;
  font-size: 2rem;
  margin-bottom: 0;
  line-height: 1.2;
}

/* ===== Landing-narrow wrapper (page-wide narrowing for IP landing) ===== */
.landing-narrow > * .container,
.landing-narrow > .container {
  max-width: 1170px;
}

/* ===== Page-level review flag =====
   Page-level review flag, floats at the right edge below a hero/title block.
   Used for cross-cutting claims that span multiple components. */
.landing-page-review-flag {
  display: flex;
  justify-content: flex-end;
  padding: 0.5rem 1rem;
  background-color: rgba(245, 197, 24, 0.08);
}

.landing-page-review-flag .iplg-review-mark {
  margin-left: 0;
}

/* ===== Sticky-scope container for the four-discipline region =====
   Wraps the anchor-nav include AND all four discipline subsections on the IP
   landing page. The anchor-nav inside uses position: sticky; top: 0; which is
   constrained by its containing block. This wrapper makes the nav stick ONLY
   while a discipline subsection is in view; once the user scrolls past the
   final discipline (trade-secrets), the region scrolls off screen and the
   sticky nav goes with it.

   IMPORTANT: do NOT add overflow: hidden / auto / scroll to this container.
   Any non-visible overflow on a containing block disables position: sticky for
   descendants. The rule below is intentionally near-empty; it exists to
   document the no-overflow constraint and to give the wrapper a stable
   stacking context anchor (position: relative) so the sticky nav's z-index
   sits in a predictable layer relative to siblings. */
.landing-disciplines-region {
  position: relative;
  /* Do not add overflow here. */
  /* White fill so the gray page tint no longer shows as a divider strip
     between the white discipline subsections and the closing CTA. */
  background: #ffffff;
  /* Breathing room at the bottom of the IP services page before the closing CTA. */
  padding-bottom: 4rem;
}
@media (max-width: 767px) {
  .landing-disciplines-region {
    padding-bottom: 2.5rem;
  }
}
/* IP services page: the "What we cover" section header otherwise shows the gray
   page background; paint it white to match the white discipline subsections. */
.landing-section-header--intellectual-property {
  background: #ffffff;
}
/* IP services page: match the main landing page (homepage) header font, which
   swaps the global Karla sans for Cormorant Garamond serif at weight 500. */
.landing-section-header--intellectual-property .landing-section-header__heading,
.landing-disciplines-region .landing-subsection__heading {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
}
/* IP services page: extra top/bottom breathing room around the clients marquee.
   Desktop trimmed from 7rem; mobile pulled in further so the marquee does not
   open a disproportionate void above the discipline stack on phones. */
.ip-services-marquee .iplg-brand-bar-marquee {
  padding-top: 5.5rem;
  padding-bottom: 5.5rem;
}
@media (max-width: 767px) {
  .ip-services-marquee .iplg-brand-bar-marquee {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}

/* ===== Sticky anchor-nav: full-bleed and clip fixes =====
   Two issues this rule addresses:

   1) Pre-stick "cut off" pills. The .landing-anchor-nav__scroll inner wrapper
      uses overflow-x: auto, which per CSS spec implicitly makes overflow-y
      auto as well. That clips the pills' top/bottom edges (border, focus
      outlines, the 1px nav border-bottom paint) during the moment the
      browser is transitioning the nav between its in-flow position and its
      stuck position, which reads visually as the pills being cut off. We
      explicitly restore overflow-y: visible so vertical paint is never
      clipped while horizontal paint can still scroll on narrow viewports.

   2) Defensive: ensure the nav element itself fills the viewport width when
      stuck, so the bg-light strip reaches edge-to-edge. The <nav> is a block
      element so this is normally automatic, but width: 100% is cheap
      insurance against ancestor sizing rules added later. */
.landing-anchor-nav {
  width: 100%;
}

.landing-anchor-nav__scroll {
  overflow-y: visible;
}

/* ===== Mobile responsive fixes (Phase 2.6c) =====
   Keep desktop layout untouched. All rules below are scoped to mobile
   breakpoints (<= 767px or <= 575px). Targets the IP overview landing page
   but the selectors are reusable across landing pages that share these
   partials. */

/* Anchor-nav: on mobile, let the scrollable strip break out of the .container
   side padding so pills scroll edge-to-edge instead of clipping at the gutter.
   The 1rem padding inside the scroll wrapper preserves a comfortable starting
   inset for the first pill while still allowing horizontal scroll. */
@media (max-width: 767px) {
  .landing-anchor-nav .container {
    padding-left: 0;
    padding-right: 0;
  }
  .landing-anchor-nav__scroll {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  /* Right-edge fade affordance so users see the strip is scrollable when
     pills overflow. Pseudo-element sits over the rightmost ~24px and fades
     to the bg-light navy-tint behind the nav. */
  .landing-anchor-nav {
    position: sticky;
  }
  .landing-anchor-nav::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 24px;
    pointer-events: none;
    background: linear-gradient(
      to right,
      rgba(248, 249, 250, 0),
      rgba(248, 249, 250, 0.95)
    );
  }
}

/* Body content sections: bump container side-padding from Bootstrap's default
   15px to 1.25rem (20px) on small phones so text doesn't hug the screen
   edges. Excludes full-bleed bands (brand-bar, stats, anchor-nav,
   consultation-cta, awards-strip) which manage their own internal padding. */
@media (max-width: 575px) {
  .landing-intro .container,
  .landing-subsection .container,
  .landing-section-header .container,
  .landing-process .container,
  .landing-faq .container,
  .landing-title-block-asym > .container {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}

/* Stats band (social-proof partial): reduce top/bottom padding on mobile so
   the stats don't take up a full screen height. The partial uses py-5
   (3rem top + 3rem bottom). Cut to ~1.5rem on small viewports; the user
   specifically called out excess padding under this band. */
@media (max-width: 767px) {
  .landing-stats {
    padding-top: 2rem !important;
    padding-bottom: 1.5rem !important;
  }
  .landing-stats .col-6:nth-last-child(-n + 2) {
    margin-bottom: 0 !important;
  }
}

/* Stat values: 2.5rem feels heavy when the column is col-6 on mobile. Trim
   slightly so two side-by-side values fit comfortably without wrapping the
   label below them. */
@media (max-width: 575px) {
  .landing-stats__value {
    font-size: 2rem;
  }
  .landing-stats__label {
    font-size: 0.85rem;
  }
}

/* Hero / asymmetric title block: display-4 h1 can feel oversized on small
   phones. Trim font-size and add comfortable line-height. The right-column
   logo grid keeps its existing rules. */
@media (max-width: 575px) {
  .landing-title-block-asym__h1 {
    font-size: 1.875rem;
    line-height: 1.25;
  }
  .landing-title-block-asym__tagline {
    font-size: 1rem;
    line-height: 1.5;
  }
  /* Right column min-height of 220px is desktop-tuned; on mobile the logo
     grid sits below the headline so 220px wastes vertical space. Let it
     size to content. */
  .landing-title-block-asym__right {
    min-height: 0;
    margin-top: 1.5rem;
  }
  .landing-title-block-asym__logo-grid {
    gap: 0.5rem;
  }
}

/* Hero section vertical padding: Bootstrap py-5 (3rem top + 3rem bottom) is
   too tall on mobile/tablet portrait now that typography is tightened. Bump
   to 3.5rem so the hero has clear breathing room above and below the title
   block. Applied at the wider 767px breakpoint so both phone and tablet
   portrait pick it up. */
@media (max-width: 767px) {
  .landing-title-block-asym {
    padding-top: 3.5rem !important;
    padding-bottom: 3.5rem !important;
  }
}

/* Hero background image (with-bg variant): on desktop the image uses
   background-size: cover with center positioning, which crops the right-side
   globe out of frame on narrow portrait viewports. The globe sits roughly
   75% from the left, vertically centered. Switch to "auto 100%" so the image
   keeps full height and shift the focal point right so the globe stays in
   view. Fallback navy background-color shows through any uncovered side. */
@media (max-width: 767px) {
  .landing-title-block-asym--with-bg {
    background-size: auto 100% !important;
    background-position: 75% center !important;
  }
}

/* Discipline subsections: media placeholder min-height of 220px on mobile is
   reasonable for spec preview, but trim subsection vertical padding so the
   four-discipline stack reads as a cohesive scroll rather than four full
   screens. */
@media (max-width: 767px) {
  .landing-subsection {
    padding-top: 2.25rem;
    padding-bottom: 2.25rem;
  }
}

/* Section-header (the "What we cover" band): py-4 already, but the heading
   font-size of 2rem can feel tight on 360px screens. Slight reduction. */
@media (max-width: 575px) {
  .landing-section-header__heading {
    font-size: 1.6rem;
  }
}

/* Anchor-nav pills: shrink padding, font-size, and inter-pill gap on small
   phones so all four labels (Patents, Trademarks, Copyright, Trade Secrets)
   fit on a single row at typical phone widths (~360-414px) without needing
   horizontal scroll. Desktop sizing is preserved (>=576px keeps the base
   0.4rem/1.1rem padding and 0.95rem font-size). */
@media (max-width: 575px) {
  .landing-anchor-nav__list {
    gap: 0.35rem;
  }
  .landing-anchor-nav__pill {
    padding: 0.3rem 0.65rem;
    font-size: 0.78rem;
  }
}

/* === IP landing Phase 2.7 ===
   Styles introduced for the Phase 2.7 ad-funnel restructure of
   /practice-areas/intellectual-property:
     - Compact in-column FAQ (faq-inline.ejs) inside each discipline subsection
   Reuses the existing site color tokens (#0a1e3c navy, #0a1e3c primary,
   bootstrap btn-primary), font sizes, and spacing scale. No new tokens. */

/* (moved to _quarantine-dead.css 2026-06-05: .iplg-inline-form-* dead inline-form block) */

/* Compact in-column FAQ rendered AT THE END of each discipline subsection
   (faq-inline.ejs). Distinct from the page-level .landing-faq partial which
   has its own section heading + container; this variant just stacks
   <details> items inside the existing right-hand col-lg-6. Smaller heading
   weight, tighter spacing, "Read more" link styled as muted secondary so it
   does not compete with the primary "Talk to a [discipline] attorney" CTA
   that sits immediately above it. */
.landing-faq-inline {
  margin-top: 1.5rem;
}

.landing-faq-inline__item {
  border: 1px solid #e2e6ea;
  border-radius: 4px;
  padding: 0.75rem 1rem;
  background: #ffffff;
  margin-bottom: 0.5rem;
}

.landing-faq-inline__question {
  cursor: pointer;
  font-weight: 600;
  color: #0a1e3c;
  outline: none;
  list-style: none;
  font-size: 0.95rem;
}

.landing-faq-inline__question::-webkit-details-marker {
  display: none;
}

/* Chevron toggle: down when closed, flips up when open (see .landing-faq). */
.landing-faq-inline__question::after {
  content: "";
  float: right;
  width: 0.5em;
  height: 0.5em;
  margin: 0.1em 0.2em 0 0.5em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

.landing-faq-inline__item[open] .landing-faq-inline__question::after {
  transform: rotate(-135deg);
  margin-top: 0.3em;
}

.landing-faq-inline__answer {
  color: #444;
  margin-top: 0.5rem;
  font-size: 0.9rem;
  line-height: 1.5;
}

/* "Read more" link: small, muted, secondary cadence so it does not pull
   focus from the discipline inline-cta link sitting just above the FAQ.
   Inline-block keeps it on its own line at the end of the answer when the
   answer text fills its line, but inline-flow when the answer is short. */
.landing-faq-inline__readmore {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: #6c757d;
}

.landing-faq-inline__readmore a {
  color: #6c757d;
  text-decoration: underline;
}

.landing-faq-inline__readmore a:hover,
.landing-faq-inline__readmore a:focus {
  color: #0a1e3c;
}

/* === IP landing intro rebuild (2026-05-07) ===
   Replaces the prior two-col `.landing-intro` band (col-lg-9 paragraph +
   col-lg-3 sidebar-rail form) with a co-equal two-col layout:
     - Left col-lg-7: short paragraph + firm photo + figcaption.
     - Right col-lg-5: contact form panel with landing-native chrome
       (.iplg-form-panel) instead of the transplanted sidebar chrome.
   Bootstrap's default `col-lg-*` behavior stacks the columns below 992px,
   so no special media query is needed for mobile.
   The prior `.landing-intro` and `.landing-intro-form-photo` rules are
   removed; they are no longer referenced after the rebuild. */

/* The section element itself relies on Bootstrap's bg-light + py-5 utility
   classes applied inline in the EJS, so no rule is needed for the bare
   .landing-intro-rebuild selector. The class is kept on the section as a
   stable anchor for any future scoped tweaks (and so the BEM-style
   modifiers below read naturally with their parent class). */

/* Subtle heading above the lead paragraph. Smaller than a default h2,
   mid-weight, brand navy (matches the rgba(11, 51, 110, ...) reference
   used by the photo's box-shadow) so it reads as a poignant lead-in
   rather than a hero header. */
.landing-intro-rebuild__heading {
  font-size: 1.5rem;
  font-weight: 500;
  color: #0b336e;
  margin-bottom: 1rem;
  letter-spacing: 0.005em;
}

/* Lead paragraph: slightly larger leading line so it sits with visual
   weight equal to the form panel on the right. The `.lead` Bootstrap
   class already nudges font-size up; this adds a bottom margin so the
   figure below it has clear separation. */
.landing-intro-rebuild__lead {
  margin-bottom: 1.5rem;
  color: #0a1e3c;
  line-height: 1.55;
}

/* Figure wraps the firm photo and its caption. No border or chrome on
   the figure itself: the photo is one half of a credibility unit with
   the paragraph above it, not a card.
   2026-05-08 update: photo now sits BELOW the heading and lead in the
   col-lg-8 left column, centered horizontally. Cap raised from 420px to
   560px so the wider column gets a wider accent without the photo
   filling the entire column awkwardly. Margin flipped from bottom-only
   to top + auto-horizontal so the comfortable gap sits ABOVE the figure
   (between the lead paragraph and the photo) and the figure centers
   inside its now-centered column. */
.landing-intro-rebuild__photo {
  margin: 1.5rem auto 0 auto;
  padding: 0;
  max-width: 560px;
}

/* .landing-intro-rebuild width: no local max-width rule on the section itself. The band's outer width is controlled by the .landing-narrow wrapper around it in the EJS (~1080px), matching the disciplines, mid-CTA, awards, and FAQ bands on the same page. The earlier 960px local cap was removed because it read too narrow next to the surrounding bands; reintroducing it would re-break the visual rhythm. */

/* Photo image: fills the column width, preserves aspect ratio, picks up
   the same 4px corner rounding as the rest of the site's media tokens
   (matches `.landing-subsection__media`). Subtle shadow consistent with
   `.location-sidebar-form-panel`'s shadow so the photo and the form
   panel feel like they belong to the same band. */
.landing-intro-rebuild__photo-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(11, 51, 110, 0.06);
  /* 2026-05-08: tone the photo slightly so it sits behind the lead copy
     without competing for attention. */
  filter: brightness(0.92);
}

/* Figcaption: small, muted-navy, sentence-case. Sits tight under the
   photo (~0.5rem top margin) and carries no bottom margin so the row
   gutter handles spacing into the next band. */
.landing-intro-rebuild__photo-caption {
  margin: 0.5rem 0 0 0;
  font-size: 0.85rem;
  color: #5a6878;
  line-height: 1.4;
}

@media (min-width: 992px) {
  /* Slight right-padding on the left column on lg+ so the paragraph and
     photo do not crowd the form panel's left border. Mirrors the gutter
     the prior layout used between col-lg-9 and col-lg-3. */
  .landing-intro-rebuild .col-lg-7 {
    padding-right: 1.5rem;
  }
}

/* Landing-native form panel chrome. Same visual tokens as
   `.location-sidebar-form-panel` (border, radius, shadow) so the visual is
   consistent across both pages, but with slightly more generous internal
   padding tuned to the wider col-lg-5 column on the IP landing rather than
   the narrow col-lg-3 sidebar rail on the locations page. The reCAPTCHA
   scaling JS at the bottom of the consumer pages selects on
   `.iplg-form-panel, .location-sidebar-form-panel` so both variants get
   the responsive widget sizing. */
.iplg-form-panel {
  background-color: #ffffff;
  padding: 1.75rem 1.75rem 1.75rem;
  border: 1px solid #d7e1ee;
  border-radius: 4px;
  box-shadow: 0 4px 20px rgba(11, 51, 110, 0.10);
}

/* Heading inside the landing-native panel. Title-case heading at the
   discipline-subsection scale, NOT the uppercase Karla mini-heading the
   sidebar variant uses. Reads as a co-equal section heading on the page
   instead of a small sidebar label. */
.iplg-form-panel__heading {
  color: #0a1e3c;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 0.5rem;
  padding-bottom: 0;
  border-bottom: none;
  letter-spacing: 0;
  text-transform: none;
}

/* Helper line under the heading. Muted navy, sentence-case. Slightly
   larger than the sidebar variant's helper because the panel itself is
   wider and the surrounding type scale supports it. */
.iplg-form-panel__lead {
  color: #5a6878;
  font-size: 0.95rem;
  line-height: 1.5;
  margin-bottom: 1rem;
}

/* Optional figure inside the panel (only renders when the consumer passes
   photoSrc / photoAlt / photoCaption to contact-form-panel.ejs). Not used
   by the IP landing intro band, which puts the photo in the LEFT column.
   Provided so future landing pages can stack a photo with the form. */
.iplg-form-panel__figure {
  margin: 0 0 1.25rem 0;
}

.iplg-form-panel__figure-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
}

.iplg-form-panel__figure-caption {
  margin: 0.5rem 0 0 0;
  font-size: 0.85rem;
  color: #5a6878;
  line-height: 1.4;
}

/* Mobile: tighter panel padding so the form does not eat horizontal space
   on small phones. Mirrors the .location-sidebar-form-panel mobile rule
   in style.css. */
@media (max-width: 575px) {
  .iplg-form-panel {
    padding: 1.25rem 1.25rem 1.5rem;
  }
}

/* === Form chrome variants demo (2026-05-07) ===
   Modifier classes layered on top of .iplg-form-panel for the
   /demo/in-page-form-variants preview page. Each modifier overrides the
   base panel chrome (border, background, shadow, typography color) so
   the partner can compare six chrome treatments in context against the
   same intro-band layout. Whichever modifier wins on review will be
   promoted to the live IP landing page; the rest can stay in this CSS
   block as opt-in alternatives, or be removed in a follow-up cleanup
   pass once the decision is final. */

/* Variant 2: Borderless flat. No border, no panel background, no shadow.
   Form fields and labels sit directly on the page background. Maximum
   minimalism; works when the page section already provides visual
   separation (e.g. bg-light) and another panel chrome would feel
   redundant. */
.iplg-form-panel--borderless {
  background-color: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

/* Variant 3: Dark background. Inverted from the page: navy panel with
   light text. Pulls strong focus to the conversion ask. Works when the
   surrounding page is light and a dark panel reads as a deliberate
   "act now" anchor; can feel heavy on already-dark pages. */
.iplg-form-panel--dark {
  background-color: #0a1e3c;
  border: 1px solid #0a1e3c;
  color: #ffffff;
  box-shadow: 0 4px 20px rgba(11, 51, 110, 0.18);
}

.iplg-form-panel--dark .iplg-form-panel__heading {
  color: #ffffff;
}

.iplg-form-panel--dark .iplg-form-panel__lead {
  color: rgba(255, 255, 255, 0.85);
}

.iplg-form-panel--dark .iplg-form-label {
  color: rgba(255, 255, 255, 0.92);
}

.iplg-form-panel--dark .iplg-form-disclaimer,
.iplg-form-panel--dark .iplg-form-disclaimer a {
  color: rgba(255, 255, 255, 0.78);
}

.iplg-form-panel--dark .iplg-form-disclaimer a {
  text-decoration: underline;
}

/* Variant 4: Soft card with prominent shadow. White panel, no border,
   large diffuse shadow giving a "floating card" feel. Modern SaaS
   aesthetic; works when the surrounding page has plenty of whitespace
   and the card needs to read as an interactive surface. */
.iplg-form-panel--soft-card {
  background-color: #ffffff;
  border: none;
  border-radius: 8px;
  box-shadow: 0 18px 40px -12px rgba(11, 51, 110, 0.22),
              0 6px 14px -6px rgba(11, 51, 110, 0.12);
}

/* Variant 5: Gradient. Subtle vertical gradient (light navy tint to
   white) as panel background. Mild visual interest without the loudness
   of a full dark panel. Works when the surrounding page is otherwise
   visually flat and needs a small lift; can clash with hero gradients
   above it. */
.iplg-form-panel--gradient {
  background: linear-gradient(180deg, #eef2f8 0%, #ffffff 65%);
  border: 1px solid #d7e1ee;
  box-shadow: 0 4px 20px rgba(11, 51, 110, 0.08);
}

/* Variant 6: Minimal / typographic-only. No panel chrome at all; inputs
   are styled as bottom-border-only (Material-style) with the heading
   and helper carrying the visual weight. Editorial feel. Works when
   the page voice is editorial / longform; can feel fragile on pages
   with heavy visual surroundings. */
.iplg-form-panel--minimal {
  background-color: transparent;
  border: none;
  box-shadow: none;
  padding: 0.5rem 0 0;
}

.iplg-form-panel--minimal .iplg-form-panel__heading {
  font-size: 1.85rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.iplg-form-panel--minimal .iplg-form-panel__lead {
  font-size: 1rem;
  margin-bottom: 1.5rem;
}

.iplg-form-panel--minimal .form-control {
  border: none;
  border-bottom: 1px solid #c7d0db;
  border-radius: 0;
  padding-left: 0;
  padding-right: 0;
  background-color: transparent;
  box-shadow: none;
}

.iplg-form-panel--minimal .form-control:focus {
  border-bottom-color: #0a1e3c;
  outline: none;
  box-shadow: none;
}

.iplg-form-panel--minimal .custom-select {
  border: none;
  border-bottom: 1px solid #c7d0db;
  border-radius: 0;
  padding-left: 0;
  background-color: transparent;
  box-shadow: none;
}

.iplg-form-panel--minimal .iplg-form-label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
  color: #6b7280;
  font-weight: 600;
}

/* === IP landing intro photo + caption-card overhang (2026-05-11) === */
.landing-intro-rebuild__photo-stack {
  position: relative;
  width: 100%;
}

.landing-intro-rebuild__photo-stack .landing-intro-rebuild__photo-img {
  display: block;
  width: 100%;
  max-height: 520px;
  object-fit: cover;
  border-radius: 4px 4px 0 0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.landing-intro-rebuild__caption-card {
  background-color: #0a0a0a;
  color: #ffffff;
  padding: 2rem 2.25rem;
  text-align: left;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
  margin-top: 0;
}

.landing-intro-rebuild__caption-card .landing-intro-rebuild__caption-heading,
.landing-intro-rebuild__caption-card .landing-intro-rebuild__caption-lead {
  color: #ffffff;
}

.landing-intro-rebuild__caption-card .landing-intro-rebuild__caption-lead {
  margin-bottom: 0;
}

@media (min-width: 1200px) {
  .landing-intro-rebuild__photo-stack {
    width: 100%;
    margin-left: 0;
    padding-bottom: 8rem;
  }
  .landing-intro-rebuild__photo-stack .landing-intro-rebuild__photo-img {
    width: 72%;
    display: block;
    max-height: 520px;
    object-fit: cover;
    border-radius: 4px;
  }
  .landing-intro-rebuild__caption-card {
    position: absolute;
    bottom: 0;
    right: 6rem;
    left: auto;
    transform: none;
    width: 46%;
    max-width: 360px;
    border-radius: 4px;
    margin-top: 0;
    padding: 2.25rem 2.5rem;
    z-index: 2;
  }
  .landing-intro-rebuild .location-sidebar-form-panel {
    max-width: 360px;
    margin-left: auto;
  }
}

@media (min-width: 1200px) and (max-width: 1599.98px) {
  .landing-intro-rebuild__caption-card {
    bottom: -3rem;
  }
}

/* Closing split-panel CTA on /practice-areas/intellectual-property (image left, black panel right). */
.landing-ip-closing {
  background-color: #4a4d53;
}

.landing-ip-closing__bounded {
  max-width: 1170px;
  margin-left: auto;
  margin-right: auto;
}

.landing-ip-closing__media {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 400px;
}

.landing-ip-closing__panel {
  background-color: #4a4d53;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 3rem 2.5rem;
}

.landing-ip-closing__inner {
  max-width: 480px;
}

.landing-ip-closing__heading {
  color: #ffffff;
  font-weight: 600;
  font-size: 1.875rem;
  line-height: 1.25;
  margin-bottom: 1rem;
  letter-spacing: 0.005em;
}

.landing-ip-closing__lead {
  color: #e6e8ed;
  font-size: 1.0625rem;
  line-height: 1.6;
  margin-bottom: 1.75rem;
}

.landing-ip-closing__btn {
  font-weight: 500;
}

@media (max-width: 991.98px) {
  .landing-ip-closing {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }
  .landing-ip-closing__media {
    min-height: 240px;
  }
  .landing-ip-closing__panel {
    padding: 2.25rem 1.5rem;
  }
  .landing-ip-closing__heading {
    font-size: 1.5rem;
  }
}

/* The global .g-0 (Bootstrap-4 no-gutters) shim zeroes column padding, but this
   copy panel IS a column and relies on its own padding for the gap between the
   heading and the photo. Restore it with higher specificity than the shim so
   the text keeps its breathing room (image stays full-bleed to the seam). */
.landing-ip-closing .row.g-0 > .landing-ip-closing__panel {
  padding: 3rem 4rem;
}
@media (max-width: 991.98px) {
  .landing-ip-closing .row.g-0 > .landing-ip-closing__panel {
    padding: 3rem 1.5rem;
  }
}

/* ============================================================
   Practice Areas Hub (2026-05-12 redesign)
   See .claude/workspace/specs/2026-05-12-cco-practice-areas-hub-spec.md
   ============================================================ */

/* Understated in-page jump-nav. Single-line on lg+, wraps on md and below.
   Hairline bottom border, no background fill, no pills. */
.practice-hub-section-nav {
  padding-top: 0.9rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid #e3e6ec;
  background-color: #ffffff;
}

/* Narrow variant: when narrow: true is passed to section-nav, the bar's
   white background and hairline border align to a col-lg-9 column instead
   of spanning the full container. Used by the /frequently-asked-questions
   page so the bar sits flush with the FAQ accordion items below it. */
.practice-hub-section-nav--narrow {
  border-bottom: 0;
  background-color: transparent;
  padding-top: 0;
  padding-bottom: 0;
}
.practice-hub-section-nav--narrow .practice-hub-section-nav__inner {
  background-color: #ffffff;
  border-bottom: 1px solid #e3e6ec;
  padding: 0.9rem 1rem;
}

/* === FAQ page headers (matches the .ourfirm-hero-title + .ourfirm-section h2
   pattern on /ourfirm: Cormorant Garamond, common site navy #0b336e,
   hairline rule underline on H2s. H1 gets the navy color + serif only,
   no underline.) === */
.iplg-faq-page-h1 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 56px;
  line-height: 1.1;
  color: #0b336e;
  font-weight: 500;
  margin: 0 0 1rem;
}
.iplg-faq-page-heading {
  font-family: 'Cormorant Garamond', serif;
  font-size: 34px;
  line-height: 1.2;
  color: #0b336e;
  font-weight: 500;
  border-bottom: 1px solid rgba(11, 51, 110, 0.12);
  padding-bottom: 0.5rem;
  margin: 0 0 1.5rem;
  text-align: left;
}

/* === FAQ v2 demo only: tighter gap between each section H2 and the first
   question below. Halves the H2 margin-bottom AND the FAQ partial's top
   padding. Scoped to .faq-v2-page so it does not affect the live FAQ
   page or other consumers of .landing-faq. === */
.faq-v2-page .iplg-faq-page-heading {
  margin-bottom: 0.75rem;
}
.faq-v2-page .landing-faq {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.practice-hub-section-nav__row {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 0.75rem;
  font-size: 0.95rem;
  line-height: 1.6;
}

.practice-hub-section-nav__label {
  font-family: 'Karla', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6c757d;
  margin-right: 0.25rem;
}

.practice-hub-section-nav__link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(10, 30, 60, 0.25);
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.practice-hub-section-nav__link:hover,
.practice-hub-section-nav__link:focus {
  color: #0a1e3c;
  text-decoration-color: #0a1e3c;
}

.practice-hub-section-nav__sep {
  color: #adb5bd;
  user-select: none;
}

@media (max-width: 575.98px) {
  .practice-hub-section-nav__row {
    justify-content: flex-start;
  }
}

/* Hub subsection wrapper. Inherits .landing-subsection typography (heading,
   inline-cta, bullets) and adds a hairline top border between subsections
   to mark the transition without a heavy band-color flip. The bg alternation
   (white / bg-light) layered on by the caller still works because the border
   is a 1px hairline that reads as a divider on both grounds. */
.practice-hub-subsection {
  border-top: 1px solid #e8ebf0;
}

/* First subsection on the page (intellectual-property): suppress the top
   border so it does not double up against the section-nav's bottom border. */
.practice-hub-subsection--intellectual-property {
  border-top: 0;
}

/* The "01 - " portion of the eyebrow is rendered inline by the locale string,
   so an optional muted-number prefix class is documented but not required.
   Left here as a hook for Creative Lead follow-up if the number should recede. */
.practice-hub-subsection__eyebrow-number {
  color: #8a93a4;
  font-weight: 400;
  margin-right: 0.3rem;
}

/* Hub subsection media: lock to a natural aspect ratio so the image does not
   stretch to match the (long) content column. Overrides the shared
   .landing-subsection__media height: 100% rule only within hub scope. */
.practice-hub-subsection .landing-subsection__media {
  height: auto;
  aspect-ratio: 4 / 3;
  min-height: 0;
}

@media (max-width: 991px) {
  .practice-hub-subsection .landing-subsection__media {
    aspect-ratio: 4 / 3;
  }
}

/* IP breakout discipline subsection media: lock to a natural 4/3 and apply
   a subtle diagonal-stripe placeholder background while real photography is
   pending. The repeating-linear-gradient uses two close light-gray tones
   (#e8eaed and #f0f2f5) at 45deg with 10px stripe width so the pattern is
   gentle, not bold. background-size: cover is kept so a future inline
   background-image will still fill the box correctly when photography lands.
   Scoped to .landing-disciplines-region so other consumers of
   .landing-subsection__media (demo views, hub pages) are not affected. */
.landing-disciplines-region .landing-subsection__media {
  height: auto;
  aspect-ratio: 3 / 2;
  background-image: repeating-linear-gradient(
    45deg,
    #e8eaed 0px,
    #e8eaed 10px,
    #f0f2f5 10px,
    #f0f2f5 20px
  );
  background-size: cover;
  min-height: 0;
}

/* Discipline cert images: subtle hover zoom + soft drop shadow.
   The whole box scales on hover (background image, shadow, and all)
   for a uniform pop, rather than only the inner image scaling. The drop
   shadow leans inward by column side (left images cast right, right
   images cast left) for a gentle, symmetric depth cue. */
.landing-disciplines-region .landing-subsection__media {
  position: relative;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(11, 51, 110, 0.22);
  transition: box-shadow 0.35s ease, transform 0.5s ease;
}
.landing-disciplines-region .landing-subsection__media:hover {
  transform: scale(1.05);
}
.landing-disciplines-region .landing-subsection__media--left {
  box-shadow: 6px 8px 20px rgba(11, 51, 110, 0.26);
}
.landing-disciplines-region .landing-subsection__media--right {
  box-shadow: -6px 8px 20px rgba(11, 51, 110, 0.26);
}
.landing-disciplines-region .landing-subsection__media--left:hover {
  box-shadow: 8px 12px 26px rgba(11, 51, 110, 0.32);
}
.landing-disciplines-region .landing-subsection__media--right:hover {
  box-shadow: -8px 12px 26px rgba(11, 51, 110, 0.32);
}

@media (max-width: 991px) {
  .landing-disciplines-region .landing-subsection__media {
    aspect-ratio: 3 / 2;
  }
}

/* IP-only deep-dive button rendered between the bullets and the inline CTA.
   Only the IP subsection passes deepDiveText/deepDiveHref so this block is
   scoped naturally to that subsection. The button matches the site's primary
   CTA vocabulary: filled navy, square corners, uppercase Montserrat. */
.practice-hub-subsection__deep-dive-line {
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

.practice-hub-subsection__deep-dive-btn {
  display: inline-block;
  background-color: transparent;
  color: #0b336e;
  border: 1px solid #0b336e;
  border-radius: 0;
  font-family: 'Karla', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: none;
  padding: 0.7rem 2rem;
  text-decoration: none;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.practice-hub-subsection__deep-dive-btn:hover,
.practice-hub-subsection__deep-dive-btn:focus {
  background-color: #0b336e;
  color: #ffffff;
  text-decoration: none;
}

/* Hub-only inline CTA: rendered as a proper outline button matching the
   "Learn More" deep-dive button (transparent, 1px black outline, sentence
   case, fills black on hover) rather than a bare arrow link. Scoped to
   .practice-hub-subsection so the IP landing page's inline CTAs are unchanged. */
.practice-hub-subsection .landing-subsection__inline-cta {
  display: inline-block;
  background-color: transparent;
  color: #0b336e;
  border: 1px solid #0b336e;
  border-radius: 0;
  font-family: 'Karla', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: none;
  padding: 0.7rem 2rem;
  text-decoration: none;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.practice-hub-subsection .landing-subsection__inline-cta:hover,
.practice-hub-subsection .landing-subsection__inline-cta:focus {
  background-color: #0b336e;
  color: #ffffff;
  text-decoration: none;
}

/* ---- Hub services index (2026-05-21: replaces the image hero) ----
   The band carries the page's only <h1>, a demoted intro line, and the five
   practice areas linking to their #slug subsections.

   2026-05-21 revision (per user direction): the H1 was brought down from 64px
   to 56px to match the firm's standard page-title treatment (.iplg-faq-page-h1,
   .ourfirm-hero-title, .clients-hero-title - all 56px Cormorant Garamond weight 500),
   with responsive steps re-scaled to that pattern (44px tablet, 38px mobile).
   The service list was restyled from a two-column numbered editorial grid into
   a simple single-column list: the 01-05 numerals and the grid/column hairlines
   were dropped, and each entry now carries a bold navy left accent bar in place
   of the numeral. Practice-name type came down from 30px to 21px. The decorative
   #c3ccd9 numeral color is no longer used.
   See .claude/workspace/specs/2026-05-21-cco-hub-services-list-spec.md */

/* Practice Areas hub: sticky left nav + content on the right. Reuses the
   practice-index button look (navy accent bar, serif name, gray desc) on the
   light page - no background image. */
/* Full-width white page so the body tint (var(--iplg-bg-gray)) never shows around the
   layout/nav. */
.pa-page {
  background: #ffffff;
}
.pa-layout {
  display: flex;
  align-items: flex-start;
  gap: clamp(1.5rem, 3vw, 3.5rem);
  max-width: 1500px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 4rem;
}
/* More generous vertical rhythm between practice sections, closer to the
   locations page's spacious feel. */
.pa-layout__content .landing-subsection {
  padding-top: 4.5rem !important;
  padding-bottom: 4.5rem !important;
  padding-left: 2rem !important;
  padding-right: 2rem !important;
}
/* First area sits directly under the page title / index, so drop its top
   padding; add generous breathing room below the last area before the CTA. */
.pa-layout__content .practice-hub-subsection--intellectual-property {
  padding-top: 0 !important;
}
.pa-layout__content .practice-hub-subsection--international {
  padding-bottom: 7.5rem !important;
}
/* The rail's LOOK now lives in the shared component
   (/stylesheets/section-nav.css + .section-nav* classes); only these
   LAYOUT/sticky concerns stay here, re-scoped to the component within this
   layout so its placement is byte-for-byte identical to before. */
.pa-layout .section-nav {
  position: sticky;
  /* Pins ~1/5 down the screen (matching the Locations rail) once the page
     heading scrolls off, staying visible through every area and releasing at
     the end of .pa-layout. */
  top: 20vh;
  /* Rail width + horizontal padding matched to the locations page
     (rail clamp(230px,24vw,340px), side padding clamp(1rem,2vw,2rem)) so the
     nav buttons render at the exact same width. Vertical padding stays
     PA-specific to preserve this page's sticky placement. */
  flex: 0 0 clamp(230px, 24vw, 340px);
  align-self: flex-start;
  background: #ffffff;
  padding: 1.25rem clamp(1rem, 2vw, 2rem) 3rem;
  border-radius: 4px;
}
.pa-layout__content { flex: 1 1 auto; min-width: 0; }
/* The subsections drop their full-bleed bg bands inside the content column. */
.pa-layout__content .landing-subsection { background: transparent; }
/* The hub is split into two rows so the sticky rail (in the head row) releases
   at the Customs section bottom instead of staying stuck through International.
   Zero the seam between the rows so the Customs -> International gap matches the
   4.5rem rhythm between the other sections, and give the tail a phantom
   rail-width spacer so International stays aligned under the content column. */
.pa-layout--head { padding-bottom: 0; }
.pa-layout--tail { padding-top: 0; }
.pa-rail-spacer { flex: 0 0 clamp(230px, 24vw, 340px); align-self: stretch; }

@media (max-width: 991px) {
  .pa-layout { flex-direction: column; gap: 1.5rem; }
  /* Mobile rail container: release the desktop sticky so it stacks above the
     content. The button LOOK is owned by the shared component's mobile block
     (section-nav.css); only these container LAYOUT concerns stay page-specific,
     re-scoped to the component. */
  .pa-layout .section-nav { position: static; flex: none; width: 100%; padding: 0 15px; background: transparent; }
  /* Keep the PA side-nav a simple vertical list on mobile instead of the shared
     component's horizontal wrap bar: with 5 items, `flex-wrap` + space-between
     left a large gap between the last two (Customs / International). Restore the
     desktop left-accent-bar list look here. Scoped to .pa-layout so the
     Locations hub keeps its horizontal mobile bar. */
  .pa-layout .section-nav__list {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0.4rem;
    justify-content: flex-start;
  }
  .pa-layout .section-nav__link {
    flex: none;
    text-align: left;
    white-space: normal;
    padding: 0.7rem 0 0.7rem 1.25rem;
    border-left: 4px solid rgba(10, 30, 60, 0.4);
    border-bottom: 0;
  }
  .pa-layout .section-nav__link:hover,
  .pa-layout .section-nav__link:focus,
  .pa-layout .section-nav__link.is-active {
    border-left-width: 7px;
    padding-left: calc(1.25rem - 3px);
    border-bottom: 0;
  }
  /* No two-column offset on mobile: drop the phantom spacer so International
     stacks flush like the rest. */
  .pa-rail-spacer { display: none; }
  /* Reclaim horizontal space on mobile. The desktop subsection side padding
     (2rem each side) plus the layout gutter left the content column too narrow
     on phones. Drop the subsection's own side padding (the inner .container
     keeps a ~15px gutter) and tighten the layout gutter. */
  .pa-layout { padding-left: 0; padding-right: 0; }
  .pa-layout__content .landing-subsection {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* Flatten the alternating bg-light bands on mobile. Bootstrap's .bg-light is
     `!important`, so it beats the page's `background: transparent` rule and the
     gray band rendered inside the centered content column, leaving a white gap
     on each side at the screen edge. Force it back to the page's white so the
     sections read as one continuous surface on mobile. */
  .pa-layout__content .landing-subsection.bg-light {
    background-color: transparent !important;
  }
}

.practice-hub-index {
  padding: 0.5rem 0 1rem;
}

.practice-hub-index__head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 3rem;
}

.practice-hub-index__h1 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 56px;
  line-height: 1.1;
  color: #0b336e;
  font-weight: 500;
  margin: 0 0 0.9rem;
  display: inline-block;
  border-bottom: 1px solid rgba(11, 51, 110, 0.12);
  padding-bottom: 0.55rem;
}

.practice-hub-index__intro {
  font-family: 'Karla', sans-serif;
  font-size: 19px;
  line-height: 1.6;
  color: #3a3a3a;
  margin: 0;
}

/* Two-column grid list. Each entry carries a bold navy left accent bar.
   No numerals, no horizontal rules, no fills or cards - the left bar and
   the type are the only treatment. Five entries flow 2+2+1 across three rows;
   the lone fifth entry sitting in the last row's left cell is intentional.
   column-gap separates the two columns; row-gap replaces the old per-item
   margin-bottom so vertical rhythm is consistent. */
.practice-hub-index__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 3rem;
  row-gap: 0.85rem;
}

.practice-hub-index__item {
  margin-bottom: 0;
}

.practice-hub-index__item:last-child {
  margin-bottom: 0;
}

.practice-hub-index__link {
  display: block;
  padding: 0.7rem 0 0.7rem 1.5rem;
  /* The bold left vertical line. 4px navy bar flanking each entry; the 1.5rem
     left padding above sits between the bar and the text. */
  border-left: 4px solid #0b336e;
  text-decoration: none;
  color: inherit;
  transition: border-left-width 0.15s ease, padding-left 0.15s ease;
}

/* Hover: the left bar thickens (the padding shrinks by the same amount so the
   text does not shift) and the name underlines - a restrained interactive cue. */
.practice-hub-index__link:hover,
.practice-hub-index__link:focus {
  border-left-width: 7px;
  padding-left: calc(1.5rem - 3px);
}

.practice-hub-index__link:focus-visible {
  outline: 2px solid #0b336e;
  outline-offset: -3px;
}

.practice-hub-index__name {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-size: 21px;
  line-height: 1.25;
  color: #0b336e;
  font-weight: 500;
}

.practice-hub-index__link:hover .practice-hub-index__name,
.practice-hub-index__link:focus .practice-hub-index__name {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.practice-hub-index__desc {
  display: block;
  margin: 0.3rem 0 0;
  font-family: 'Karla', sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: #6a6a6a;
}

/* Tablet: H1 steps to 44px (the proportional mid-step toward the 56px
   standard). The two-column grid is wide enough to stay at this breakpoint. */
@media (max-width: 991px) {
  .practice-hub-index__h1 {
    font-size: 44px;
  }
  .practice-hub-index__intro {
    font-size: 18px;
  }
}

/* Mobile: H1 steps to 38px (matching the .ourfirm-hero-title mobile size).
   The two-column grid collapses to a single column so each left bar and
   its text read comfortably at narrow widths. */
@media (max-width: 767px) {
  .practice-hub-index { padding: 0.5rem 0 1rem; }
  .practice-hub-index__head {
    margin-bottom: 2rem;
  }
  .practice-hub-index__h1 {
    font-size: 38px;
  }
  .practice-hub-index__intro {
    font-size: 17px;
  }
  .practice-hub-index__list {
    grid-template-columns: 1fr;
  }
  .practice-hub-index__link {
    padding: 0.65rem 0 0.65rem 1.25rem;
  }
  .practice-hub-index__link:hover,
  .practice-hub-index__link:focus {
    padding-left: calc(1.25rem - 3px);
  }
}

/* === FAQ v2 demo only: dark-overlay hero with a bg image. Mirrors the
   .landing-title-block-asym--with-bg treatment used by the practice-areas
   hub and IP overview: full-bleed dark navy bg, image cover, gradient
   overlay so the left-column text stays readable against the right-anchored
   question-mark sculpture in the source image. === */
.faq-v2-hero {
  position: relative;
  color: #ffffff;
  background-color: #0a1e3c;
  background-size: cover;
  background-position: right bottom;
  overflow: hidden;
}
.faq-v2-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(10, 30, 60, 0.92) 0%, rgba(10, 30, 60, 0.65) 50%, rgba(10, 30, 60, 0.25) 100%);
  z-index: 1;
}
.faq-v2-hero__content {
  position: relative;
  z-index: 2;
}
.faq-v2-hero__h1 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 56px;
  line-height: 1.1;
  color: #ffffff;
  font-weight: 500;
  margin: 0.5rem 0 1rem;
}
.faq-v2-hero__tagline {
  color: #d7e1ee;
  font-size: 1.15rem;
  line-height: 1.6;
  max-width: 640px;
  margin: 0;
}
@media (max-width: 768px) {
  .faq-v2-hero {
    /* Scale the image up on mobile so the books read at a meaningful size
       instead of being shrunk to fit the narrow viewport. 200% width keeps
       the books anchored bottom-right per background-position. */
    background-size: 200% auto;
    background-position: right bottom;
  }
  .faq-v2-hero__h1 {
    font-size: 40px;
  }
  .faq-v2-hero__overlay {
    /* Dim the top-left where the text sits, keep the bottom-right relatively
       clear so the now-larger books stay visible behind the text. */
    background: linear-gradient(to bottom right, rgba(10, 30, 60, 0.95) 0%, rgba(10, 30, 60, 0.45) 100%);
  }
}

/* === FAQ v2 demo only: TOC at top + flat always-visible Q&As below (no
   accordion). Scoped to .faq-v2-page. === */
/* Tighter top padding on the FAQ v2 main so the TOC area sits closer to
   the hero's bottom edge (the default landing-body py-5 leaves too much
   light-blue dead space below a dark hero). */
.faq-v2-page.landing-body {
  padding-top: 2rem !important;
  padding-bottom: 0 !important;
}
.faq-v2-page .faq-v2-toc {
  padding-top: 0;
  padding-bottom: 2rem;
}
.faq-v2-page .faq-v2-toc__lead {
  font-family: 'Karla', sans-serif;
  font-size: 1rem;
  color: #5a6878;
  line-height: 1.6;
  margin: 0 0 1.5rem 0;
}
/* TOC "At A Glance" heading keeps the navy serif typography but drops the
   hairline rule (the heading + lead pair reads as one intro block, not as
   a body section). */
.faq-v2-page .faq-v2-toc .iplg-faq-page-heading {
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 0.5rem;
}
.faq-v2-page .faq-v2-toc__section + .faq-v2-toc__section {
  margin-top: 1.5rem;
}
.faq-v2-page .faq-v2-toc__section .iplg-eyebrow {
  display: block;
  text-align: left;
  color: #0b336e;
  border-bottom: 1px solid rgba(11, 51, 110, 0.15);
  padding-bottom: 0.75rem;
  margin-bottom: 0.75rem;
}
.faq-v2-page .faq-v2-toc__list {
  list-style: none;
  padding-left: 0;
  margin: 0.5rem 0 0 0;
  font-size: 0.875rem;
  line-height: 1.5;
}
.faq-v2-page .faq-v2-toc__list li {
  padding-left: 1rem;
  margin-bottom: 0.35rem;
  position: relative;
}
.faq-v2-page .faq-v2-toc__list li::before {
  content: '-';
  position: absolute;
  left: 0;
  color: #6c757d;
}
.faq-v2-page .faq-v2-toc__list a {
  color: #0056b3;
  text-decoration: none;
}
.faq-v2-page .faq-v2-toc__list a:hover,
.faq-v2-page .faq-v2-toc__list a:focus {
  text-decoration: underline;
}

/* 2-column TOC on lg+ to keep the 93-question list compact. */
@media (min-width: 992px) {
  .faq-v2-page .faq-v2-toc__list--cols {
    column-count: 2;
    column-gap: 2rem;
  }
  .faq-v2-page .faq-v2-toc__list--cols li {
    break-inside: avoid;
  }
}

/* === FAQ page: small question quick-links list at top (2026-05-28) === */
/* Full-bleed tinted band: the gray spans the full viewport width; the content
   (tabs + question links) stays centered in the container. */
.faq-quicklinks {
  padding: 2.5rem 0;
  background: var(--iplg-bg-gray);
}
.faq-quicklinks__panel {
  margin: 0 auto;
  padding: 0;
  border-radius: 0;
}
/* Category tabs use the shared .iplg-tabs strip (style.css); space it from the
   question list below. */
.faq-quicklinks .iplg-tabs {
  margin-bottom: 2.5rem;
}
/* Each category's question links; only the active panel shows, in a width-
   constrained (not full-width) centered block. */
.faq-quicklinks__list {
  list-style: none;
  padding-left: 0;
  margin: 0 auto;
  max-width: 760px;
  font-family: 'Karla', sans-serif;
  font-size: 0.95rem;
  line-height: 1.6;
}
.faq-quicklinks__list[hidden] { display: none; }
.faq-quicklinks__list li {
  position: relative;
  padding-left: 1rem;
  margin-bottom: 0.25rem;
}
.faq-quicklinks__list li::before {
  content: '\2022';
  position: absolute;
  left: 0;
  color: rgba(11, 51, 110, 0.5);
}
.faq-quicklinks__list a {
  color: #466089;
  text-decoration: none;
}
.faq-quicklinks__list a:hover,
.faq-quicklinks__list a:focus {
  color: #0b336e;
  text-decoration: underline;
}
@media (min-width: 768px) {
  /* The active category's questions in two columns within the capped width. */
  .faq-quicklinks__list--cols { column-count: 2; column-gap: 2.5rem; }
  .faq-quicklinks__list li { break-inside: avoid; }
}

/* FAQ page: white page so the question sections read on white; the quicklinks
   strip carries the tint instead (colors flipped from the old white-strip-on-
   tinted-page treatment). */
.iplg-faq-page {
  background: #ffffff;
}
/* Remove the page-title band's bottom margin so the quicklinks band butts
   directly against it. */
.iplg-faq-page .iplg-page-title-band {
  margin-bottom: 0;
}

/* Page-title hairline removed per request - no rule under the header/subheader. */
.pa-page .iplg-page-title-band::after {
  content: none;
}

/* FAQ page: tighten the per-category accordion spacing (2026-05-28) */
/* !important is required to beat Bootstrap's .py-5 utility (padding 3rem
   !important) on the same element, which otherwise leaves a big gap between
   each section's sub-heading and its first question. */
.iplg-faq-page .landing-faq {
  padding-top: 0.5rem !important;
  padding-bottom: 1rem !important;
}

/* FAQ page: pull each section heading close to its subheader, and move the
   hairline rule off the heading and onto the subheader (below) so the subheader
   sits ABOVE the line. Scoped so the shared .iplg-faq-page-heading rule (used on
   other pages) keeps its own underline. */
.iplg-faq-page .iplg-faq-page-heading {
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 0.5rem;
}
.iplg-faq-page .faq-section-sub {
  margin-bottom: 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(11, 51, 110, 0.12);
}
.faq-section-sub {
  font-family: 'Karla', sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: #5a6878;
  text-align: left;
  margin: 0 0 0.5rem;
}

/* Flat Q&A body styling: replaces the accordion. */
.faq-v2-page .faq-v2-qa {
  margin: 0 0 1.5rem 0;
  scroll-margin-top: 1rem;
}
/* Section header row: H2 in flow + per-section "Collapse all / Expand all"
   toggle button absolutely positioned at the right edge. */
.faq-v2-page .faq-v2-section-header {
  position: relative;
}
.faq-v2-page .faq-v2-section-toggle {
  position: absolute;
  right: 0;
  bottom: 0.7rem;
  background: transparent;
  border: 0;
  color: #0b336e;
  font-family: 'Karla', sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(11, 51, 110, 0.35);
  transition: text-decoration-color 0.15s ease;
}
.faq-v2-page .faq-v2-section-toggle:hover,
.faq-v2-page .faq-v2-section-toggle:focus {
  text-decoration-color: #0b336e;
  outline: none;
}

/* Q&A item is now a <details> with <summary>. Hide the native disclosure
   marker and render a thick navy +/- pseudo-element anchored at the right
   edge of the summary. */
.faq-v2-page .faq-v2-qa {
  cursor: default;
}
.faq-v2-page .faq-v2-qa__q {
  cursor: pointer;
  list-style: none;
  padding-right: 2.5rem;
  position: relative;
  font-family: 'Karla', sans-serif;
  font-size: 1.125rem;
  font-weight: 600;
  color: #0b336e;
  margin: 0 0 0.4rem 0;
  line-height: 1.35;
}
.faq-v2-page .faq-v2-qa__q::-webkit-details-marker {
  display: none;
}
.faq-v2-page .faq-v2-qa__q::after {
  content: '\2212';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  color: #0b336e;
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1;
}
.faq-v2-page .faq-v2-qa:not([open]) .faq-v2-qa__q::after {
  content: '+';
}
.faq-v2-page .faq-v2-qa__a {
  color: #3a3a3a;
  font-size: 1rem;
  line-height: 1.65;
}
.faq-v2-page .faq-v2-qa__a p {
  margin: 0 0 0.75rem 0;
}
.faq-v2-page .faq-v2-qa__a p:last-child {
  margin-bottom: 0;
}
/* (moved to _quarantine-demo.css 2026-06-05: .faq-v2-page .faq-v2-qa__a list-style block, demo-only /demo/faq-v2) */

/* The existing .faq-v2-page .landing-faq overrides become unused once the
   accordion is removed - leave them for now in case the demo is reverted. */

/* === Online Payments page (2026-05-13): two-panel slide flow ===
   Panel 1 (chooser): two big buttons - Domestic / International.
   Panel 2 (pay):     selected payment form + shared PayPal QR code.
   The chooser slides left to reveal the pay panel on selection. */
/* Page header: top spacing (the removed page-title band used to provide it) and
   a 15px horizontal inset matching the sliding panels' padding, so the header
   lines up with the chooser below instead of reading slightly wider. */
.payments-intro {
  margin-top: 3rem;
  padding: 0 15px;
}
.payments-flow {
  position: relative;
  overflow: hidden;
  width: 100%;
  /* Breathing room below the payment content before the footer. */
  padding-bottom: 3rem;
}
.payments-flow__track {
  display: flex;
  width: 100%;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
.payments-flow[data-state="pay"] .payments-flow__track {
  transform: translateX(-100%);
}
.payments-flow__panel {
  flex: 0 0 100%;
  min-width: 100%;
  /* 15px horizontal padding absorbs the inner .row's -15px negative
     margins so the panel content does not get clipped by the parent's
     overflow:hidden during the slide. */
  padding: 1rem 15px;
}
.payments-flow__form {
  display: none;
}
.payments-flow__form.is-active {
  display: block;
}
.payments-flow__form input[type="image"] {
  margin: 0.5rem 0;
}
.payments-flow__panel[aria-hidden="true"] {
  /* Hide from the tab order while it sits off-screen, but keep the form
     fields in the DOM so the slide animation can run. */
  visibility: hidden;
  pointer-events: none;
}
.payments-flow__panel[aria-hidden="false"] {
  visibility: visible;
  pointer-events: auto;
}
.payments-flow__heading {
  text-align: left;
}
.payments-flow__heading-sub {
  margin-top: -0.75rem;
  margin-bottom: 1.5rem;
}
/* The processing-fee line (under the intro copy) matches the intro's size
   rather than the smaller <small> default. */
.payments-flow__heading-sub [data-pay-sub] {
  font-size: 0.95rem;
}

/* Chooser panel - two large pill-style buttons. */
.payments-flow__choices {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-top: 1.5rem;
}
.payments-flow__choice-btn {
  flex: 1 1 240px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  padding: 1.75rem 1.75rem;
  border: 1px solid rgba(11, 51, 110, 0.2);
  border-radius: 4px;
  background: #ffffff;
  color: #0b336e;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.payments-flow__choice-btn:hover,
.payments-flow__choice-btn:focus {
  border-color: #0b336e;
  background: var(--iplg-bg-gray);
  outline: none;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(11, 51, 110, 0.08);
}
.payments-flow__choice-label {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.75rem;
  line-height: 1.1;
  font-weight: 500;
}
.payments-flow__choice-sub {
  font-family: 'Karla', sans-serif;
  font-size: 0.9rem;
  color: #5a6878;
  letter-spacing: 0.02em;
}

/* Pay panel - back link + heading + form + QR. */
.payments-flow__back {
  display: inline-block;
  margin-bottom: 1rem;
  background: transparent;
  border: 0;
  color: #0b336e;
  font-family: 'Karla', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 0.25rem 0;
}
.payments-flow__back:hover,
.payments-flow__back:focus {
  color: #071f45;
  outline: none;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.payments-flow__qr-heading {
  font-family: 'Karla', sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #0b336e;
  margin: 0;
}

/* Pay panel: QR left + form right at md+ with a 1px navy-tinted divider.
   QR column flex-centers vertically so its content lines up with the
   middle of the form column. Below md the columns stack (QR on top, form
   below) and the divider becomes a top border on the form column. */
/* Pay panel: render the form + QR as a content-width group instead of a
   full-width Bootstrap grid. PayPal draws its hosted-button form (amount,
   invoice box, pay buttons) at a fixed ~390px inside its own iframe and caps
   the width itself, so a wide grid column left the form stranded with empty
   space beside it. Sizing the columns to the actual content and capping the
   group width keeps the form and QR balanced and aligned under the heading. */
.payments-flow__pay-row {
  display: flex;
  align-items: flex-start;
  gap: 2.5rem;
  margin-top: 1rem;
}
.payments-flow__form-col {
  flex: 0 1 420px;
  min-width: 0;
}
.payments-flow__form-intro {
  font-family: 'Karla', sans-serif;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #5a6878;
  margin: 0 0 1.5rem;
}
/* QR column grows to fill the space right of the form and horizontally centers
   the box within it (the box itself hugs its content). */
.payments-flow__qr-col {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* QR sits in its own bordered card, replacing the divider line that used to
   separate it from the form. The card hugs its content (heading + 150px code)
   and drops a little below the form's top edge. */
.payments-flow__qr-inner {
  width: auto;
  max-width: 100%;
  margin-top: 4rem;
  padding: 1.25rem 1.5rem 1.5rem;
  background: #ffffff;
  border: 1px solid rgba(11, 51, 110, 0.15);
  border-radius: 6px;
}
/* The hosted-button form is iframe-rendered; fill its container so it uses the
   form column's width up to PayPal's own internal cap. */
.payments-flow__form [id^="paypal-container-"] {
  width: 100%;
}
.payments-flow__form [id^="paypal-container-"] iframe {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
}
/* The mobile "Pay in the PayPal app" link is desktop-hidden; the scannable QR
   is shown there instead (you can't scan your own phone screen). */
.payments-flow__qr-tap { display: none; }
@media (max-width: 767.98px) {
  .payments-flow__pay-row { flex-direction: column; gap: 1.5rem; }
  .payments-flow__form-col { flex: 1 1 auto; width: 100%; }
  /* Mobile: the QR is useless (can't scan your own screen), so show the tap
     link instead, hide the scan block, and place it ABOVE the form. The box
     chrome is dropped so the link reads as a plain full-width button. */
  .payments-flow__qr-col { order: -1; align-self: stretch; }
  .payments-flow__qr-scan { display: none; }
  .payments-flow__qr-inner {
    margin-top: 0;
    padding: 0;
    border: 0;
    background: transparent;
  }
  .payments-flow__qr-tap {
    display: block;
    width: 100%;
    padding: 0.85rem 1rem;
    background: #0b336e;
    color: #ffffff;
    border-radius: 6px;
    font-family: 'Karla', sans-serif;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
  }
  .payments-flow__qr-tap:hover,
  .payments-flow__qr-tap:focus {
    background: #071f45;
    color: #ffffff;
    text-decoration: none;
  }
}

/* On small viewports, stack the choice buttons full-width and keep them short
   (the label + sub-label otherwise make a tall block with generous padding). */
@media (max-width: 575.98px) {
  .payments-flow__choices {
    flex-direction: column;
    gap: 0.75rem;
  }
  .payments-flow__choice-btn {
    /* In a column flex container, flex-basis (240px) sets HEIGHT, which made
       each card ~240px tall. Reset to content height. */
    flex: 0 0 auto;
    padding: 0.9rem 1.25rem;
  }
  .payments-flow__choice-label {
    font-size: 1.4rem;
  }
}

/* Vertically center a page's content in the visible area below the tall nav,
   i.e. halfway between the nav's bottom edge and the bottom of the viewport.
   --nav-h (defined in style.css :root) is the nav height; the nav is in normal
   flow, so the visible space below it is 100vh - var(--nav-h). min-height (not
   height) plus column centering means content taller than the space grows the
   block and scrolls normally instead of being clipped. Used on /contact and
   /online-payments. */
.iplg-vcenter-below-nav {
  min-height: calc(100vh - var(--nav-h));
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* === Contact page (2026-05-13): contact info dl + form chrome === */
.contact-page-lead {
  font-family: 'Karla', sans-serif;
  font-size: 1.1rem;
  line-height: 1.55;
  margin: 0.25rem 0 1rem;
}
.contact-page-info {
  margin: 0;
  padding: 0;
}
.contact-page-info dt {
  font-family: 'Karla', sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #0b336e;
  margin: 0.9rem 0 0.2rem;
}
.contact-page-info dt:first-child {
  margin-top: 0;
}
.contact-page-info dd {
  font-family: 'Karla', sans-serif;
  font-size: 1.1rem;
  line-height: 1.45;
  color: #3a3a3a;
  margin: 0;
}
/* Postal address block: reset the browser's default italic on <address> so it
   reads like a clean letterhead. The firm name leads the block in the same
   weight/color as the rest of the address. */
.contact-page-address {
  font-style: normal;
  margin: 0;
  line-height: 1.5;
}

/* Icon-led contact methods (replaces the old dt/dd labels + call-pill button).
   Each method is a two-column row: a round icon badge in its own column, then
   the label + value stacked beside it. The phone is a plain tel: link (no
   button) but still clickable/tappable. */
.contact-methods {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}
.contact-method {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}
/* Business-like icon treatment: no circle, no tint. A small navy glyph that
   sits directly beside the line item. Nudge it down so it reads against the
   value text rather than the label. */
.contact-method__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #0b336e;
  margin-top: 0.15rem;
}
.contact-method__icon svg {
  width: 1.05rem;
  height: 1.05rem;
  display: block;
}
.contact-method__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.contact-method__label {
  font-family: 'Karla', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #0b336e;
  margin-bottom: 0.2rem;
}
.contact-method__value {
  font-family: 'Karla', sans-serif;
  font-size: 1.05rem;
  line-height: 1.45;
  color: #3a3a3a;
}
a.contact-method__value {
  align-self: flex-start;   /* underline spans only the link text */
  color: #0b336e;
  text-decoration: none;
  border-bottom: 1px solid rgba(11, 51, 110, 0.25);
  transition: border-color 0.15s ease;
}
a.contact-method__value:hover,
a.contact-method__value:focus {
  border-bottom-color: #0b336e;
}
address.contact-method__value {
  font-style: normal;
}
/* The street/city lines link out to Google Maps. Keep the navy link treatment
   but only underline the address text, not the whole address block. */
.contact-method__map {
  color: #0b336e;
  text-decoration: none;
  border-bottom: 1px solid rgba(11, 51, 110, 0.25);
  transition: border-color 0.15s ease;
}
.contact-method__map:hover,
.contact-method__map:focus {
  border-bottom-color: #0b336e;
}
.contact-page-info dd a {
  color: #0b336e;
  text-decoration: none;
  border-bottom: 1px solid rgba(11, 51, 110, 0.25);
  transition: border-color 0.15s ease;
}
.contact-page-info dd a:hover,
.contact-page-info dd a:focus {
  border-bottom-color: #0b336e;
}

.contact-page-form .form-group {
  margin-bottom: 0.75rem;
}
.contact-page-form label {
  font-family: 'Karla', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: #0b336e;
  margin-bottom: 0.25rem;
}
.contact-page-form .form-control,
.contact-page-form textarea {
  border: 1px solid rgba(11, 51, 110, 0.2);
  border-radius: 4px;
  padding: 0.45rem 0.7rem;
  font-family: 'Karla', sans-serif;
  font-size: 0.95rem;
}
.contact-page-form .form-control:focus,
.contact-page-form textarea:focus {
  border-color: #0b336e;
  box-shadow: 0 0 0 3px rgba(11, 51, 110, 0.12);
  outline: none;
}
.contact-page-submit-row {
  display: flex;
  /* Captcha on the left, submit on the right, with clear room between; wraps to
     stacked rows on narrow widths so the reCAPTCHA widget is never crowded. */
  justify-content: space-between;
  align-items: center;
  gap: 1.25rem 1.5rem;
  flex-wrap: wrap;
  margin-top: 1.25rem;
}
.contact-page-submit {
  background-color: #0b336e;
  border-color: #0b336e;
  padding: 0.75rem 2.5rem;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.contact-page-submit:hover,
.contact-page-submit:focus {
  background-color: #071f45;
  border-color: #071f45;
}

/* Inline-actions footer (contact page, via the partial's inlineActions flag):
   the privacy/disclaimer line wraps full-width on top, and the Send Message
   button sits on the RIGHT in the band below it. (reCAPTCHA v3 is invisible, so
   there is no longer a visible widget sharing the band.) */
.iplg-form-footer--inline {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;   /* top-anchor the row contents */
  gap: 1rem;
}
.iplg-form-footer--inline .iplg-form-recaptcha {
  order: 1;
  flex: 0 0 auto;
  /* Push the captcha (and the button right after it) over to the right edge, so
     the captcha sits immediately to the LEFT of the Send Message button. */
  margin: 0 0 0 auto;
}
.iplg-form-footer--inline .iplg-form-submit {
  order: 2;
  flex: 0 0 auto;
  align-self: flex-start; /* anchored to the top, level with the captcha top */
  /* reCAPTCHA v3 is invisible, so .iplg-form-recaptcha (which used to carry the
     right-anchoring auto margin) no longer renders. Anchor the button itself to
     the right so it sits at the right edge under the disclaimer line. */
  margin-left: auto;
}
.iplg-form-footer--inline .iplg-form-disclaimer {
  order: 0;                /* above the captcha + Send Message row */
  flex: 0 0 100%;
  margin: 0 0 0.85rem;
}
/* On mobile the right-anchoring auto margin leaves the captcha shoved to the
   right edge (or gapped). Anchor it to the left, flush with the form. */
@media (max-width: 767.98px) {
  .iplg-form-footer--inline .iplg-form-recaptcha {
    margin-left: 0;
  }
}

/* === Contact form result states ===
   - The error alert is revealed inline above the form on a failed AJAX submit.
   - .iplg-form-success is the centered result block used by the no-JS contact-error
     page (via --page / --error). The success confirmation lives at /message-sent
     (views/contact-sent.ejs); it uses the standard page-title treatment and reuses
     only the icon + button classes below. */
.iplg-form-success {
  text-align: center;
  padding: 1.5rem 1rem;
}
.iplg-form-success__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: #0b336e;
  color: #ffffff;
  margin-bottom: 1.1rem;
}
.iplg-form-success__icon svg { width: 1.8rem; height: 1.8rem; display: block; }
.iplg-form-success__heading {
  font-family: 'Karla', sans-serif;
  color: #0b336e;
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
}
.iplg-form-success__body {
  font-family: 'Karla', sans-serif;
  color: #3a3a3a;
  font-size: 1.05rem;
  line-height: 1.55;
  margin: 0 auto 1.4rem;
  max-width: 32rem;
}
.iplg-form-success__body a {
  color: #0b336e;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.iplg-form-success__body a:hover,
.iplg-form-success__body a:focus {
  color: #071f45;
}
/* Return home / Back-to-the-form button: modeled after the site's standard
   .iplg-btn - a navy outline that fills navy on hover, uppercase Montserrat - the
   same treatment as the Send Message button. No trailing arrow: these are
   "back"/"home" actions, not a forward CTA. */
.iplg-form-success__again {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 0.85rem 1.75rem;
  color: #0b336e;
  background: transparent;
  border: 2px solid #0b336e;
  border-radius: 2px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.iplg-form-success__again:hover,
.iplg-form-success__again:focus {
  background: #0b336e;
  color: #ffffff;
  border-color: #0b336e;
  transform: translateY(-2px);
  text-decoration: none;
}
/* Full-page variant for the no-JS contact-sent / contact-error fallback pages:
   a little more vertical breathing room and a larger icon. */
.iplg-form-success--page {
  padding: 3rem 1.75rem;
}
.iplg-form-success--page .iplg-form-success__icon {
  width: 4.25rem;
  height: 4.25rem;
}
.iplg-form-success--page .iplg-form-success__icon svg { width: 2.2rem; height: 2.2rem; }
/* Error variant (contact-error page): red icon instead of navy. */
.iplg-form-success--error .iplg-form-success__icon {
  background: #b02a37;
}
.iplg-form-success--error .iplg-form-success__heading {
  color: #b02a37;
}

.iplg-form-error-alert {
  font-family: 'Karla', sans-serif;
  color: #842029;
  background: #f8d7da;
  border: 1px solid #f5c2c7;
  border-radius: 4px;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  font-size: 0.97rem;
  line-height: 1.5;
}

/* === /message-sent confirmation page === */
/* The FAQ link sits inside the standard page lead (gray); give it the navy link
   treatment so it reads as a link. */
.iplg-page-title-lead a {
  color: #0b336e;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.iplg-page-title-lead a:hover,
.iplg-page-title-lead a:focus {
  color: #071f45;
}
.iplg-message-sent__actions {
  margin-top: 1.75rem;
}

/* === Contact page "Our offices" grid (ported from contact-page-variants V1) === */
.contact-offices {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
}
.contact-offices__heading {
  text-align: center;
  /* No rule under or above this header (the default .iplg-faq-page-heading
     underline is dropped and no ::before rule is drawn). */
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0.5rem;
}
.contact-offices__intro {
  text-align: center;
  color: #5a6878;
  max-width: 720px;
  margin: 0.5rem auto 1.75rem;
  font-size: 1rem;
  line-height: 1.55;
}
/* Centered 2x2 block of office cards. Bootstrap 4 ignores the `g-3` gutter class
   (a v5 name), so the gutters are set here with a real flex gap; the negative
   .row margins and the col padding are overridden so the gap is even all round. */
.contact-offices__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  max-width: 900px;
  margin: 0 auto;
}
.contact-offices__grid > [class*="col-"] {
  flex: 0 0 100%;
  max-width: 100%;
  padding: 0;
}
@media (min-width: 768px) {
  .contact-offices__grid > [class*="col-"] {
    flex: 0 0 calc(50% - 0.75rem);
    max-width: calc(50% - 0.75rem);
  }
}
.contact-office-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid rgba(11, 51, 110, 0.10);
  border-radius: 10px;
  overflow: hidden;          /* clip the photo to the rounded top corners */
  width: 100%;
  box-shadow: 0 6px 18px -12px rgba(11, 51, 110, 0.25);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.contact-office-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 34px -18px rgba(11, 51, 110, 0.4);
}
/* Photo header, mirroring the homepage locations cards: cover image, slight navy
   screen, gentle zoom on card hover. The whole photo links to the office page. */
.contact-office-card__media {
  display: block;
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #0c1628;
}
.contact-office-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.contact-office-card:hover .contact-office-card__media img {
  transform: scale(1.05);
}
.contact-office-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(12, 28, 51, 0.22);
  pointer-events: none;
}
.contact-office-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;            /* lets the "View more" link sit at the card bottom */
  padding: 1.4rem;
}
.contact-office-card__name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  color: #0b336e;
  font-size: 1.4rem;
  font-weight: 600;
  margin: 0 0 0.25rem;
}
.contact-office-card__subtitle {
  color: #5a6878;
  font-size: 0.9rem;
  margin: 0 0 0.75rem;
}
.contact-office-card__address {
  color: #444;
  font-style: normal;
  font-size: 0.92rem;
  line-height: 1.5;
  margin-bottom: 0.75rem;
}
.contact-office-card__contact {
  margin: 0 0 0.75rem;
  font-size: 0.9rem;
}
.contact-office-card__contact dt {
  font-weight: 600;
  color: #0a1e3c;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.72rem;
  margin-top: 0.4rem;
}
.contact-office-card__contact dd {
  margin: 0.1rem 0 0;
  color: #444;
}
.contact-office-card__contact a { color: #0b336e; }
.contact-office-card__map {
  display: inline-block;
  /* Push to the bottom of the (equal-height) card so the map links line up
     across cards; align-self keeps the underline hugging the text, not full width. */
  margin-top: auto;
  align-self: flex-start;
  padding-top: 0.5rem;
  color: #0b336e;
  font-weight: 600;
  font-size: 0.88rem;
  text-decoration: none;
  border-bottom: 1px solid rgba(11, 51, 110, 0.25);
}
.contact-office-card__map:hover { border-bottom-color: #0b336e; }

/* === Contact page "Speak with an attorney" call pill (Variant 5 style) === */
.contact-call-pill-wrap {
  text-align: center;
  margin: 2rem auto 1.5rem;
}
/* Filled "call now" button (demo Variant 1): solid navy with white text,
   darkening on hover. */
.contact-call-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  /* Sit cleanly in the dd line box and leave generous room around it so the
     2.5px border (incl. the drop shadow) is never clipped/overlapped by the
     next field (Email). */
  vertical-align: middle;
  line-height: 1.1;
  margin: 0.35rem 0 0.75rem;
  font-family: 'Karla', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: #ffffff;
  background: #0b336e;
  border: 1.5px solid #0b336e;
  padding: 0.8rem 1.5rem;
  /* Slightly-rounded square corners, matching the squared tabs and the Send
     Message button (was a softer 6px). */
  border-radius: 4px;
  box-shadow: 0 3px 10px rgba(11, 51, 110, 0.18);
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.contact-call-pill:hover,
.contact-call-pill:focus {
  text-decoration: none;
  background: #071f45;
  border-color: #071f45;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(11, 51, 110, 0.22);
}
.contact-call-pill:active {
  background: #071f45;
  border-color: #071f45;
  color: #ffffff;
  box-shadow: 0 1px 4px rgba(11, 51, 110, 0.25);
}
/* The generic ".contact-page-info dd a" rule (used to color/underline the
   email + links navy) is MORE specific than .contact-call-pill, so it was
   overriding the button's bottom border AND, now that the button is filled
   navy, painting the label navy-on-navy (invisible until hover). Force the
   filled button's white text and full outline here where specificity wins. */
.contact-page-info dd a.contact-call-pill,
.contact-page-info dd a.contact-call-pill:hover,
.contact-page-info dd a.contact-call-pill:focus {
  color: #ffffff;
  border-bottom: 1.5px solid #0b336e;
}
/* Graceful collapse in the narrow details column (notably the lg two-column band,
   where the col is only ~220px): never overflow the column. If the pill cannot fit
   on one line, the icon + number wrap to two centered lines, and the number itself
   stays intact rather than breaking mid-digits. */
.contact-call-pill {
  max-width: 100%;
}
.contact-call-pill__link {
  flex-wrap: wrap;
  justify-content: center;
}
.contact-call-pill__link > span:last-child {
  white-space: nowrap;
}
.contact-call-pill__prompt {
  color: rgba(255, 255, 255, 0.75);
  font-weight: 400;
}
.contact-call-pill__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: inherit;   /* white from the filled button */
  font-weight: 400;
  transition: color 0.15s ease;
}
.contact-call-pill:hover .contact-call-pill__link,
.contact-call-pill:focus .contact-call-pill__link {
  color: #ffffff;
}
.contact-call-pill__icon { display: inline-flex; }
.contact-call-pill__icon svg {
  /* flip horizontally, then tilt counter-clockwise a little */
  transform: rotate(-15deg) scaleX(-1);
}
.contact-call-pill__icon svg { width: 1rem; height: 1rem; display: block; }

/* === Careers page (2026-05-13): modernized chrome === */

/* Role tabs use the shared .iplg-tabs strip (style.css); space it from the page
   title band above. */
.careers-tabs-row {
  margin-top: 3.25rem;
}
.careers-tabs__panel[hidden] {
  display: none;
}
/* All role sections are now shown at once and the pills scroll to them, so give
   each section a little top clearance when scrolled/anchored to. */
.careers-tabs__panel {
  scroll-margin-top: 2rem;
}
/* Content sits on a tinted box at the CONTENT-COLUMN width (col-lg-9), not the
   full container width, so the gray panel hugs the copy column instead of
   running edge to edge across the container. Inner padding keeps the copy off
   the box edges. */
.careers-tabs__panel > .container > .row > .col-lg-9 {
  background: var(--iplg-bg-gray);
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
  padding-left: 1.75rem;
  padding-right: 1.75rem;
}

/* Restore bullet markers inside the careers panels. The site-wide rule
   `ul { list-style-type: none }` in style.css strips them globally. */
.careers-tabs__panel ul {
  list-style-type: disc;
  padding-left: 1.5rem;
  margin: 0 0 1rem;
}
.careers-tabs__panel ul li {
  margin-bottom: 0.35rem;
}
.careers-tabs__panel ol {
  list-style-type: decimal;
  padding-left: 1.5rem;
  margin: 0 0 1rem;
}
.careers-tabs__panel ol li {
  margin-bottom: 0.35rem;
}

.careers-page__subheading {
  font-family: 'Karla', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: #0b336e;
  margin: 1.75rem 0 0.6rem;
  letter-spacing: 0.02em;
}
.careers-page__status {
  background: var(--iplg-bg-gray);
  border-left: 3px solid #0b336e;
  color: #0b336e;
  padding: 0.65rem 0.95rem;
  margin: 0.5rem 0 1.25rem;
  font-size: 0.95rem;
}
.careers-page__quote {
  background: var(--iplg-bg-gray);
  padding: 1.1rem 1.4rem;
  margin: 1.25rem 0;
  border-radius: 4px;
}
.careers-page__quote p {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.1rem;
  line-height: 1.5;
  color: #0b336e;
  margin: 0 0 0.5rem;
  font-style: italic;
}
.careers-page__quote footer {
  font-family: 'Karla', sans-serif;
  font-size: 0.85rem;
  color: #5a6878;
}
.careers-page__quote footer cite {
  font-style: normal;
  color: #6c757d;
}
/* Sub-section H2s in the careers page use the navy serif treatment but
   inherit text-align: left from the shared .iplg-faq-page-heading rule. */

/* === Articles demo (2026-05-13): index grid, article view, reference list === */

/* Topic filter strip - styled as understated pills. */
.articles-index__filter {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.articles-index__filter-label {
  font-family: 'Karla', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #5a6878;
  margin-right: 0.5rem;
}
.articles-index__filter-pill {
  display: inline-block;
  padding: 0.4rem 0.95rem;
  font-family: 'Karla', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #0b336e;
  background: #ffffff;
  border: 1px solid rgba(11, 51, 110, 0.2);
  border-radius: 999px;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.articles-index__filter-pill:hover,
.articles-index__filter-pill:focus {
  background: var(--iplg-bg-gray);
  border-color: #0b336e;
  text-decoration: none;
}
.articles-index__filter-pill--active {
  background: #0b336e;
  color: #ffffff;
  border-color: #0b336e;
}
.articles-index__filter-pill--active:hover,
.articles-index__filter-pill--active:focus {
  background: #071f45;
  color: #ffffff;
  border-color: #071f45;
}

/* Section eyebrow above the article list. Navy override (the shared
   .iplg-eyebrow rule is gold by default; here we want navy to match the
   site's header color). */
.articles-index__section-eyebrow {
  margin: 0 0 0.5rem;
  color: #0b336e;
}
.articles-index__divider {
  border: 0;
  border-top: 1px solid rgba(11, 51, 110, 0.15);
  margin: 0 0 1.5rem;
}

/* Search + filter controls row. */
.articles-index__controls {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
}
.articles-index__search-wrap {
  flex: 1 1 280px;
  margin: 0;
}
.articles-index__search-form {
  flex: 1 1 320px;
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
  margin: 0;
}
.articles-index__search {
  flex: 1 1 auto;
  width: 100%;
  padding: 0.65rem 1rem;
  font-family: 'Karla', sans-serif;
  font-size: 0.95rem;
  color: #3a3a3a;
  background: #ffffff;
  border: 1px solid rgba(11, 51, 110, 0.2);
  border-radius: 4px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.articles-index__search:focus {
  outline: none;
  border-color: #0b336e;
  box-shadow: 0 0 0 3px rgba(11, 51, 110, 0.12);
}
.articles-index__search-btn {
  flex: 0 0 auto;
  padding: 0.65rem 1.5rem;
  background: #0b336e;
  color: #ffffff;
  border: 1px solid #0b336e;
  border-radius: 4px;
  font-family: 'Karla', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.articles-index__search-btn:hover,
.articles-index__search-btn:focus {
  background: #071f45;
  border-color: #071f45;
  outline: none;
}
.articles-index__back-link {
  font-family: 'Karla', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: #0b336e;
  text-decoration: none;
  letter-spacing: 0.06em;
}
.articles-index__back-link:hover,
.articles-index__back-link:focus {
  text-decoration: underline;
}

/* News-style pagination component. */
.articles-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  margin: 2.5rem 0 1rem;
  font-family: 'Karla', sans-serif;
}
.articles-pagination__btn,
.articles-pagination__page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 0.85rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: #0b336e;
  background: #ffffff;
  border: 1px solid rgba(11, 51, 110, 0.18);
  border-radius: 4px;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.articles-pagination__btn:hover,
.articles-pagination__btn:focus,
.articles-pagination__page:hover,
.articles-pagination__page:focus {
  background: var(--iplg-bg-gray);
  border-color: #0b336e;
  text-decoration: none;
  outline: none;
}
.articles-pagination__page--current,
.articles-pagination__page--current:hover {
  background: #0b336e;
  color: #ffffff;
  border-color: #0b336e;
  cursor: default;
}
.articles-pagination__btn.is-disabled,
.articles-pagination__btn.is-disabled:hover {
  color: rgba(11, 51, 110, 0.35);
  background: #ffffff;
  border-color: rgba(11, 51, 110, 0.1);
  cursor: not-allowed;
  pointer-events: none;
}
.articles-pagination__ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  height: 2.5rem;
  color: #6c757d;
  font-size: 1rem;
  padding: 0 0.25rem;
}

/* Slide-animation wrapper for ajax page swaps. */
.articles-page-frag {
  position: relative;
}
.articles-page-frag.is-loading {
  pointer-events: none;
}
.articles-page-frag__viewport {
  overflow: hidden;
  margin: 0 -15px; /* absorb Bootstrap col gutters so the slide stays edge-clean */
  padding: 0 15px;
}
.articles-page-frag__slide {
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.32s ease;
  will-change: transform, opacity;
}
.articles-page-frag__slide.slide-out-left {
  transform: translateX(-30%);
  opacity: 0;
}
.articles-page-frag__slide.slide-out-right {
  transform: translateX(30%);
  opacity: 0;
}
.articles-page-frag__slide.slide-in-left {
  transform: translateX(-30%);
  opacity: 0;
}
.articles-page-frag__slide.slide-in-right {
  transform: translateX(30%);
  opacity: 0;
}
.articles-page-frag__slide.slide-in-left.is-resting,
.articles-page-frag__slide.slide-in-right.is-resting {
  transform: translateX(0);
  opacity: 1;
}
.articles-index__empty {
  font-family: 'Karla', sans-serif;
  font-size: 1rem;
  color: #6c757d;
  text-align: center;
  padding: 3rem 0;
  font-style: italic;
}

/* Asymmetric sequential row: image on one side, copy on the other,
   alternating per row via the --media-left / --media-right modifier. */
.articles-row {
  margin-bottom: 3rem;
}
.articles-row__link {
  display: flex;
  gap: 2.5rem;
  align-items: center;
  text-decoration: none;
  color: inherit;
  transition: opacity 0.2s ease;
}
.articles-row__link:hover,
.articles-row__link:focus {
  text-decoration: none;
  color: inherit;
}
.articles-row__link:hover .articles-row__title,
.articles-row__link:focus .articles-row__title {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: rgba(11, 51, 110, 0.4);
}
.articles-row--media-right .articles-row__link {
  flex-direction: row-reverse;
}
.articles-row__media {
  flex: 0 0 44%;
  align-self: stretch;
  min-height: 280px;
  background-color: #d7e1ee;
  background-size: cover;
  background-position: center;
  border-radius: 4px;
  transition: transform 0.25s ease;
}
.articles-row__link:hover .articles-row__media,
.articles-row__link:focus .articles-row__media {
  transform: scale(1.015);
}
.articles-row__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.articles-row__category {
  font-family: 'Karla', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #0b336e;
  margin: 0;
}
.articles-row__title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.85rem;
  line-height: 1.2;
  color: #0b336e;
  font-weight: 500;
  margin: 0;
}
.articles-row__excerpt {
  font-family: 'Karla', sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: #3a3a3a;
  margin: 0;
}
.articles-row__meta {
  font-family: 'Karla', sans-serif;
  font-size: 0.85rem;
  color: #6c757d;
  margin: 0;
  display: flex;
  gap: 0.4rem;
  align-items: center;
  flex-wrap: wrap;
}
.articles-row__readmore {
  font-family: 'Karla', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #0b336e;
  margin-top: 0.5rem;
}

/* Stack rows vertically below lg so the image always sits above the copy. */
@media (max-width: 991.98px) {
  .articles-row__link,
  .articles-row--media-right .articles-row__link {
    flex-direction: column;
    gap: 1.25rem;
  }
  .articles-row__media {
    flex: 0 0 220px;
    min-height: 220px;
    width: 100%;
  }
}

/* Featured article: full-width card with image left, copy right at lg+.
   Stacks vertically at md and below. */
.articles-featured {
  display: flex;
  gap: 0;
  background: #ffffff;
  border: 1px solid rgba(11, 51, 110, 0.12);
  border-radius: 4px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.articles-featured:hover,
.articles-featured:focus {
  border-color: rgba(11, 51, 110, 0.35);
  box-shadow: 0 10px 28px rgba(11, 51, 110, 0.1);
  transform: translateY(-2px);
  text-decoration: none;
  color: inherit;
}
.articles-featured__media {
  flex: 0 0 40%;
  min-height: 320px;
  background-color: #d7e1ee;
  background-size: cover;
  background-position: center;
  position: relative;
}
.articles-featured__pill {
  position: absolute;
  top: 1rem;
  left: 1rem;
  background: #0b336e;
  color: #ffffff;
  padding: 0.35rem 0.85rem;
  font-family: 'Karla', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: 999px;
}
.articles-featured__placeholder-mark {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  margin-left: 0;
}
.articles-featured__body {
  flex: 1 1 auto;
  padding: 2.25rem 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.articles-featured__category {
  font-family: 'Karla', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #0b336e;
  margin: 0 0 0.5rem;
}
.articles-featured__title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2.1rem;
  line-height: 1.15;
  color: #0b336e;
  font-weight: 500;
  margin: 0 0 0.85rem;
}
.articles-featured__excerpt {
  font-family: 'Karla', sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: #3a3a3a;
  margin: 0 0 1.25rem;
}
.articles-featured__meta {
  font-family: 'Karla', sans-serif;
  font-size: 0.85rem;
  color: #6c757d;
  margin: 0 0 1rem;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}
.articles-featured__readmore {
  font-family: 'Karla', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #0b336e;
}
@media (max-width: 991.98px) {
  .articles-featured {
    flex-direction: column;
  }
  .articles-featured__media {
    flex: 0 0 240px;
    min-height: 240px;
    width: 100%;
  }
  .articles-featured__body {
    padding: 1.5rem 1.5rem 2rem;
  }
}

/* Grid cards: thumbnail strip on top, body below. */
.articles-card-v2 {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid rgba(11, 51, 110, 0.12);
  border-radius: 4px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  height: 100%;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.articles-card-v2:hover,
.articles-card-v2:focus {
  border-color: rgba(11, 51, 110, 0.35);
  box-shadow: 0 8px 22px rgba(11, 51, 110, 0.08);
  transform: translateY(-2px);
  text-decoration: none;
  color: inherit;
}
.articles-card-v2__media {
  height: 160px;
  background-color: #d7e1ee;
  background-size: cover;
  background-position: center;
}
.articles-card-v2__body {
  padding: 1.25rem 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 0.5rem;
}
.articles-card-v2__category {
  font-family: 'Karla', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #0b336e;
  margin: 0;
}
.articles-card-v2__title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.4rem;
  line-height: 1.2;
  color: #0b336e;
  font-weight: 500;
  margin: 0;
}
.articles-card-v2__excerpt {
  font-family: 'Karla', sans-serif;
  font-size: 0.92rem;
  line-height: 1.5;
  color: #3a3a3a;
  margin: 0;
  flex-grow: 1;
}
.articles-card-v2__meta {
  font-family: 'Karla', sans-serif;
  font-size: 0.8rem;
  color: #6c757d;
  margin: 0;
  display: flex;
  gap: 0.4rem;
  align-items: center;
  flex-wrap: wrap;
}

/* (moved to _quarantine-dead.css 2026-06-05: .articles-card / .articles-card__* legacy v1 cards, zero consumers; index + demos use .articles-card-v2) */

/* Article view hero. */
.articles-hero {
  position: relative;
  padding: 4rem 0 3.5rem;
  color: #ffffff;
  background-color: #0a1e3c;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.articles-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(10, 30, 60, 0.92) 0%, rgba(10, 30, 60, 0.78) 100%);
  z-index: 1;
}
.articles-hero__content {
  position: relative;
  z-index: 2;
}
.articles-hero__back {
  margin: 0 0 1.25rem;
  font-family: 'Karla', sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.articles-hero__back a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
}
.articles-hero__back a:hover,
.articles-hero__back a:focus {
  color: #ffffff;
}
.articles-hero__title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 48px;
  line-height: 1.1;
  color: #ffffff;
  font-weight: 500;
  margin: 0.4rem 0 0.75rem;
}
.articles-hero__byline {
  margin: 0;
  font-family: 'Karla', sans-serif;
  font-size: 0.95rem;
  color: #d7e1ee;
  display: flex;
  gap: 0.6rem;
  align-items: center;
  flex-wrap: wrap;
}

/* Article body - data-driven block renderer styles. */
.articles-page__text {
  font-family: 'Karla', sans-serif;
  font-size: 1.05rem;
  line-height: 1.7;
  color: #3a3a3a;
  margin: 1.5rem 0;
}
.articles-page__text .lead {
  font-size: 1.2rem;
  color: #0b336e;
  margin-bottom: 1.25rem;
}
.articles-page__text h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 30px;
  line-height: 1.2;
  color: #0b336e;
  font-weight: 500;
  margin: 2rem 0 1rem;
}
.articles-page__text h3 {
  font-family: 'Karla', sans-serif;
  font-size: 1.2rem;
  color: #0b336e;
  font-weight: 700;
  margin: 1.5rem 0 0.75rem;
}
.articles-page__text p {
  margin: 0 0 1rem;
}
.articles-page__text ul,
.articles-page__text ol {
  margin: 0 0 1rem 1.5rem;
}
.articles-page__text li {
  margin-bottom: 0.35rem;
}
.articles-page__figure {
  margin: 2rem 0;
}
.articles-page__figure img {
  width: 100%;
  height: auto;
  border-radius: 4px;
}
.articles-page__caption {
  margin-top: 0.5rem;
  font-family: 'Karla', sans-serif;
  font-size: 0.85rem;
  color: #6c757d;
  font-style: italic;
}
.articles-page__cta-block {
  background: var(--iplg-bg-gray);
  border-left: 4px solid #0b336e;
  padding: 1.5rem 1.75rem;
  margin: 2.25rem 0;
  border-radius: 0 4px 4px 0;
}
.articles-page__cta-headline {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.45rem;
  color: #0b336e;
  font-weight: 500;
  margin: 0 0 0.5rem;
}
.articles-page__cta-body {
  font-family: 'Karla', sans-serif;
  color: #3a3a3a;
  margin: 0 0 1rem;
}
.articles-page__cta-btn {
  display: inline-block;
  background: #0b336e;
  color: #ffffff;
  padding: 0.65rem 1.5rem;
  font-family: 'Karla', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 4px;
  transition: background-color 0.15s ease;
}
.articles-page__cta-btn:hover,
.articles-page__cta-btn:focus {
  background: #071f45;
  color: #ffffff;
  text-decoration: none;
}
.articles-page__rule {
  border: 0;
  border-top: 1px solid rgba(11, 51, 110, 0.15);
  margin: 2.5rem 0 1.5rem;
}
.articles-page__disclaimer {
  font-family: 'Karla', sans-serif;
  line-height: 1.5;
}

/* Reference-list view (every /articles/:slug stub, partner-facing). */
.articles-ref-section {
  margin-bottom: 2rem;
}
.articles-ref-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.articles-ref-list__item {
  border-bottom: 1px solid rgba(11, 51, 110, 0.1);
}
.articles-ref-list__item:first-child {
  border-top: 1px solid rgba(11, 51, 110, 0.1);
}
.articles-ref-list__link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 0;
  text-decoration: none;
  color: #0b336e;
  flex-wrap: wrap;
}
.articles-ref-list__link:hover,
.articles-ref-list__link:focus {
  text-decoration: none;
  background: var(--iplg-bg-gray);
}
.articles-ref-list__title {
  font-family: 'Karla', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: #0b336e;
}
.articles-ref-list__slug {
  font-family: 'Courier New', monospace;
  font-size: 0.85rem;
  color: #6c757d;
  background: transparent;
}

/* ===== IP landing pseudo-hero: full-bleed black band. Team photo on the
   left (full height of the section) and a short positioning paragraph plus
   a white-outlined phone CTA on the right. The black background extends
   edge to edge; the inner content area is centered at 1170px so the image
   stays in roughly the same horizontal position as the rest of the page.
   The CTA matches the site's .btn-ghost on-dark convention. ===== */
.ip-pseudo-hero {
  background-color: #ffffff;
  /* Breathing room under the closing CTA before the footer; padding (not margin)
     so the band's white fill extends through the space instead of the gray
     page tint showing. */
  padding: 0 0 4rem;
}
.ip-pseudo-hero__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  min-height: 380px;
}
.ip-pseudo-hero__image-col {
  position: relative;
  min-height: 380px;
  overflow: hidden;
  /* Center the image and give it breathing room top/bottom so it no longer
     fills the column edge to edge. */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem;
}
.ip-pseudo-hero__image {
  display: block;
  width: 100%;
  max-width: 540px;       /* smaller overall, not the full column width */
  height: auto;
  max-height: 340px;      /* clamp the height; cover-crops to this box */
  object-fit: cover;
  /* Symmetric drop shadow matching the four discipline service images
     (centered image, so cast evenly rather than to one side). */
  box-shadow: 0 8px 20px rgba(11, 51, 110, 0.26);
  transition: transform 0.5s ease, box-shadow 0.35s ease;
}
.ip-pseudo-hero__image-col:hover .ip-pseudo-hero__image {
  transform: scale(1.05);
}
/* Text panel: translucent-black fill (rgba(0,0,0,0.8)) to match the homepage
   firm CTA (.landing-ip-closing__panel override in home.css) and the
   .iplg-consultation-cta--black / .practice-cta-card--black treatments.
   --iplg-cta-black-alpha is the translucency knob; keep it at 0.8 so all the
   on-dark firm CTAs read identically. The image column is intentionally NOT
   painted so the consultation photo still shows. Copy/heading/button below are
   on-dark (white / near-white). */
.ip-pseudo-hero__text-col {
  background-color: #ffffff;
  color: #444b57;
  padding: 2.5rem 2.25rem;
  display: flex;
  align-items: center;
}
.ip-pseudo-hero__text-inner {
  width: 100%;
}
.ip-pseudo-hero__heading {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 500;
  font-size: 2rem;
  line-height: 1.2;
  color: #0a1e3c;          /* brand navy heading on white */
  margin: 0 0 1rem;
  font-variant-numeric: lining-nums;
}
.ip-pseudo-hero__body {
  font-size: 1rem;
  line-height: 1.6;
  color: #444b57;          /* dark body copy on white */
  margin: 0 0 2.25rem;
}
/* White-outline (on-dark) button to match the homepage firm CTA's
   .btn-outline-light treatment: white outline + white label, inverting to a
   white fill (label flips dark) on hover/focus. */
.ip-pseudo-hero__cta-phone {
  display: inline-block;
  background: transparent;
  border: 1px solid #0a1e3c;
  border-radius: 0;
  color: #0a1e3c;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 0.85rem 1.75rem;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.ip-pseudo-hero__cta-phone:hover,
.ip-pseudo-hero__cta-phone:focus {
  background-color: #0a1e3c;
  color: #ffffff;
  text-decoration: none;
}
@media (max-width: 767.98px) {
  .ip-pseudo-hero__inner {
    grid-template-columns: 1fr;
  }
  .ip-pseudo-hero__image-col {
    min-height: 320px;
  }
  .ip-pseudo-hero__text-col {
    padding: 2rem 1.5rem;
  }
}