@charset "UTF-8";
/*
 * css/components.css — Norml Studio design system (Layer 2)
 *
 * Site-wide reusable components. Enqueued globally on every page.
 * Every new block on this site styles its inner pieces via these classes.
 * Per-block CSS files are LAYOUT ONLY (grid/flex/positioning).
 *
 * Convention:
 *   .norml-*          → reusable site-wide visual primitives (this file)
 *   .{block-slug}__*  → block-specific layout (per-block files)
 *
 * Token source of truth:
 *   --header-color-dark | --header-color-accent | --header-color-white
 *   are defined in css/header.css :root and inherited globally.
 *
 * Extended tokens below are scoped to :root here so the visual system stays
 * coherent across blocks. Do NOT add per-page palettes ever.
 *
 * Audit / promotion policy:
 *   - Before adding a new --norml-* token: confirm no existing token covers it.
 *   - Before adding a new .norml-{component}: confirm no existing component matches.
 *   - If you find yourself writing color/font/spacing inside a block layout file,
 *     stop — promote it to this file or use existing tokens.
 */
/* ===========================================================================
 * Display font — Cyrillic fallback
 *
 * The brand display face "DIN Condensed" (Divi et-fonts) is Latin-only, so RU
 * headings fell back to Helvetica (not condensed). Oswald is a free condensed
 * grotesque with full Cyrillic — self-hosted, scoped to the Cyrillic ranges via
 * unicode-range so it ONLY downloads when Cyrillic glyphs are present (Latin
 * pages keep DIN, no extra request). It sits AFTER DIN in --norml-font-display,
 * so Latin → DIN, Cyrillic → Oswald (per-glyph fallback).
 * ========================================================================= */
@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/oswald-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/oswald-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* ===========================================================================
 * Tokens — extensions to the base site palette
 * ========================================================================= */
:root {
  /* Neutrals (extensions to dark/white) */
  --norml-light: #f7f8f9; /* alt section background */
  --norml-border: #e2e2e2; /* card borders, separators */
  --norml-muted: #4e4e4e; /* secondary text */
  --norml-gray: #868686; /* tertiary text, eyebrows over light */
  /* Accent shades */
  --norml-accent-dark: #b89f1f; /* darker gold for type contrast on light bg */
  --norml-teal: #1a516c; /* deep petrol/teal — service-hero panel, accents */
  /* Status */
  --norml-danger: #a32d2d;
  --norml-danger-bg: #fbe5e5;
  /* Type families */
  --norml-font-display: 'DIN Condensed', 'Oswald', Helvetica, Arial, sans-serif;
  --norml-font-body: 'Inter', Helvetica, Arial, sans-serif;
}

/* ===========================================================================
 * Body-level scoping utilities
 *
 * Any block that prints its own H1 / hero should add a body class via
 * its bootstrap PHP (see inc/blocks/_bootstrap.php). The `has-custom-hero`
 * class then suppresses Divi's auto-printed page title across the whole
 * site, with no hardcoded page IDs.
 * ========================================================================= */
body.has-custom-hero .entry-title.main_title,
body.has-custom-hero h1.entry-title {
  display: none !important;
}

/* Neutralize Divi's classic sidebar-column layout. Divi's global
 * `.container { width: 80% }` is what actually caps the content (max-width
 * alone didn't beat it) — override to full width so section backgrounds go
 * edge-to-edge (full-bleed heroes/bands, per Figma: 1440 canvas) and the inner
 * `.norml-container` (1376) sets the content column. */
body.has-custom-hero #main-content > .container {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

body.has-custom-hero #main-content #content-area,
body.has-custom-hero #main-content #left-area {
  width: 100%;
  max-width: none;
  padding: 0;
  margin: 0;
  float: none;
}

body.has-custom-hero #main-content #sidebar {
  display: none;
}

/* Kill Divi's content/sidebar divider (a 1px .container::before rule) — it
 * lingers as a full-height vertical line once the sidebar is hidden. */
body.has-custom-hero #main-content > .container::before {
  content: none;
}

/* Keep the native-Gutenberg footer (alignfull) inside the same 1440 column. */
body.has-custom-hero #main-content .alignfull {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

body.has-custom-hero #main-content .post,
body.has-custom-hero #main-content .page {
  padding: 0;
}

/* ===========================================================================
 * Utilities
 * ========================================================================= */
/* Container — site standard width wrapper. Use inside full-bleed sections. */
.norml-container {
  max-width: 1376px; /* design container: 1440 canvas − 32px gutters (Figma) */
  margin: 0 auto;
  padding: 0;
  position: relative;
}

.norml-container--narrow {
  max-width: 1080px;
}

/* Display font utility — apply DIN Condensed without uppercasing. */
.norml-display {
  font-family: var(--norml-font-display);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: normal;
  text-transform: none;
}

/* Eyebrow — small gold uppercase tag text used above section H2s. */
.norml-eyebrow {
  display: inline-block;
  color: var(--norml-accent-dark);
  font-family: var(--norml-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 12px;
}

/* Alignfull bleed — for any Gutenberg block that wants edge-to-edge inside
 * Divi's wrapper. Apply to the wrapping .wp-block-* element. */
.alignfull {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* ===========================================================================
 * .norml-button — canonical CTA primitive (replaces Divi's .et_pb_button)
 *
 * Default: gold fill + dark text (matches the audited site button look).
 * Variants:
 *   --dark    : dark fill + gold text (mirrors .norml-banner__cta)
 *   --outline : transparent + dark border
 * Hover inverts the default. Part of the Divi-exit decoupling (ADR 2026-06-28).
 * ========================================================================= */
.norml-button {
  display: inline-block;
  background: var(--header-color-accent);
  color: var(--header-color-dark);
  font-family: var(--norml-font-body);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  padding: 13px 24px;
  border: 1px solid var(--header-color-accent);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.norml-button:hover,
.norml-button:focus {
  color: var(--header-color-dark);
  border-color: var(--header-color-accent);
}

/* Dark fill + gold text. */
.norml-button--dark {
  background: var(--header-color-dark);
  color: var(--header-color-accent);
  border-color: var(--header-color-dark);
}

.norml-button--dark:hover,
.norml-button--dark:focus {
  background: var(--header-color-white);
  color: var(--header-color-dark);
  border-color: var(--header-color-dark);
}

/* Dark fill + WHITE text — the primary-action treatment (mirrors the Gravity
 * Forms submit button in service-form). In Figma the "Read more reviews" and
 * the form "Send a request" buttons are the same component (dark #0D1317 fill,
 * white Inter SemiBold label, square). Distinct from --dark (gold text). */
.norml-button--solid {
  background: var(--header-color-dark);
  color: var(--header-color-white);
  border-color: var(--header-color-dark);
}

.norml-button--solid:hover,
.norml-button--solid:focus {
  opacity: 0.85;
  color: var(--header-color-white);
  border-color: var(--header-color-dark);
}

/* Transparent + dark outline. */
.norml-button--outline {
  background: transparent;
  color: var(--header-color-dark);
  border-color: var(--header-color-dark);
}

.norml-button--outline:hover,
.norml-button--outline:focus {
  background: var(--header-color-dark);
  color: var(--header-color-white);
  border-color: var(--header-color-dark);
}

/* On a dark section (e.g. page hero) the dark outline is invisible at rest —
 * invert it to a white outline, filling white on hover. */
.norml-section--dark .norml-button--outline,
.norml-page-hero .norml-button--outline {
  color: var(--header-color-white);
  border-color: var(--header-color-white);
}

.norml-section--dark .norml-button--outline:hover,
.norml-section--dark .norml-button--outline:focus,
.norml-page-hero .norml-button--outline:hover,
.norml-page-hero .norml-button--outline:focus {
  background: var(--header-color-white);
  color: var(--header-color-dark);
  border-color: var(--header-color-white);
}

/* Reviews CTA wrapper — centres the "Read more reviews" button under the
 * review wall (Figma 2566:14840). Used only by the reviews templates
 * (home-reviews + service-reviews). */
.norml-section__cta {
  margin: 40px 0 0;
  text-align: center;
}

/* ===========================================================================
 * .norml-section — the standard content section
 *
 * Variants: --white | --alt | --dark
 * Sub-elements: __tag (use .norml-eyebrow), __h2, __h3, __body
 * ========================================================================= */
.norml-section {
  padding: 70px 24px;
  font-family: var(--norml-font-body);
  box-sizing: border-box;
}

.norml-section--white {
  background: var(--header-color-white);
  color: var(--header-color-dark);
}

.norml-section--alt {
  background: var(--norml-light);
  color: var(--header-color-dark);
}

.norml-section--dark {
  background: var(--header-color-dark);
  color: var(--header-color-white);
}

/* Override Divi's global h1-h6 color rule inside dark sections.
 * Divi's customizer CSS forces h1-h6 to --header-color-dark by element selector,
 * which beats our parent-class color inheritance. Re-assert white inside dark. */
.norml-section--dark h1,
.norml-section--dark h2,
.norml-section--dark h3,
.norml-section--dark h4,
.norml-section--dark h5,
.norml-section--dark h6 {
  color: var(--header-color-white);
}

/* Force legacy .solutions__feature-title (used on the parent service page's
 * "Why us" block) to render with its intended styles on local_service CPT
 * singular pages. Divi ships a separate `et-divi-customizer-cpt-global.min.css`
 * that overrides ALL of h5's element-level styles (font-size, font-weight,
 * line-height, font-family, color) with CPT-specific defaults that beat the
 * parent's inline class rule. Re-assert every property the parent set, scoped
 * to the same specificity as Divi's CPT customizer rule.
 *
 * Values discovered by computed-CSS diff of the reference page (page 289 PI
 * service page) vs the cloned local_service post: reference renders
 *   color=#fff / family=Inter Tight / size=20px / weight=600 / line=28px
 * Without this rule the CPT defaults take over (29px / 700 / 31.9px / DIN
 * Condensed / dark navy) and the block looks oversized + invisible. */
.et-db #et-boc .et-l h5.solutions__feature-title {
  color: #ffffff;
  font-family: "Inter Tight", sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4em;
}

/* Section heading of the same dark "Why us" block ("We provide personalized
 * legal solutions"). Same root cause as .solutions__feature-title above: Divi's
 * et-divi-customizer-cpt-global.min.css forces this h2 to the dark navy heading
 * color on local_service CPT pages, so it renders invisible on the dark
 * background. Re-assert white at the CPT-customizer's specificity. */
.et-db #et-boc .et-l h2.solutions__title {
  color: #ffffff;
  font-size: 80px;
  line-height: 1.05em;
}

@media (max-width: 980px) {
  .et-db #et-boc .et-l h2.solutions__title {
    font-size: 52px;
  }
}
.norml-section__h2 {
  font-family: var(--norml-font-display);
  font-size: clamp(40px, 5.6vw, 80px); /* Figma section title: 80px @1440 */
  font-weight: 500; /* DIN Condensed Medium — the web face's 700 renders heavier than Figma's "Bold"; matches .norml-display */
  margin: 0 0 18px;
  color: inherit;
  max-width: 920px;
  letter-spacing: -0.01em;
  line-height: 0.9; /* Figma 72/80 */
}

/* Mobile: the clamp floor (40px) is still oversized for long RU/CR section
 * titles that wrap several lines on a phone — step the heading down. */
@media (max-width: 767px) {
  .norml-section__h2 {
    font-size: 30px;
    line-height: 1;
  }
}
/* RU/CR: our DIN Condensed headings fall back to Oswald (wider) on Cyrillic,
 * and CR strings run longer — scale section titles ~18% down site-wide to
 * match the Latin visual weight. `body.lang-cyr` is set in _bootstrap.php by
 * Polylang slug; mirrors the per-block .home-nowin__heading--cyr modifier. */
body.lang-cyr .norml-section__h2 {
  font-size: clamp(34px, 4.6vw, 66px);
}

@media (max-width: 767px) {
  body.lang-cyr .norml-section__h2 {
    font-size: 26px;
  }
}
.norml-section__h3 {
  font-family: var(--norml-font-display);
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 700;
  color: inherit;
  margin: 32px 0 12px;
  line-height: 1.1;
}

.norml-section__body p {
  font-size: 16px;
  max-width: 880px;
  margin: 0 0 14px;
  line-height: 1.7;
}

.norml-section__body ul,
.norml-section__body ol {
  max-width: 880px;
  margin: 0 0 20px 22px;
  padding: 0;
}

.norml-section__body li {
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 8px;
  padding-left: 4px;
}

.norml-section__body li::marker {
  color: var(--norml-accent-dark);
}

.norml-section__body a {
  color: var(--header-color-dark);
  text-decoration: underline;
}

.norml-section__body a:hover {
  color: var(--norml-accent-dark);
}

/* ===========================================================================
 * .norml-card-grid — auto-fit card layout
 * ========================================================================= */
.norml-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 24px;
}

.norml-card-grid--tight {
  gap: 14px;
}

/* ===========================================================================
 * .norml-card — generic card primitive
 *
 * Variants:
 *   --accent-left   left gold bar
 *   --on-dark       inverts colors for use inside dark sections
 * Sub-elements: __title, __amount (DIN, gold-dark), __desc
 * ========================================================================= */
.norml-card {
  background: var(--header-color-white);
  border: 1px solid var(--norml-border);
  border-radius: 10px;
  padding: 22px;
  box-sizing: border-box;
}

.norml-card--accent-left {
  border-left: 4px solid var(--header-color-accent);
  padding: 20px 22px;
}

.norml-card__title {
  font-family: var(--norml-font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--header-color-dark);
  margin: 0 0 8px;
  line-height: 1.15;
}

.norml-card__title--sm {
  font-size: 18px;
  margin-bottom: 6px;
}

.norml-card__amount {
  font-family: var(--norml-font-display);
  font-size: 28px;
  font-weight: 700;
  color: var(--norml-accent-dark);
  margin-bottom: 8px;
  line-height: 1;
}

.norml-card__amount--sm {
  font-size: 22px;
}

.norml-card__desc {
  font-size: 14px;
  color: var(--norml-muted);
  line-height: 1.6;
  margin: 0;
  max-width: none;
}

.norml-card__desc--sm {
  font-size: 13px;
  line-height: 1.5;
}

/* ===========================================================================
 * .norml-stats-bar — full-width row of big-number stats
 * Sub-elements: __grid, .norml-stat (__num + __lbl)
 * ========================================================================= */
.norml-stats-bar {
  background: var(--header-color-white);
  padding: 120px 20px 170px 20px;
  font-family: var(--norml-font-body);
  box-sizing: border-box;
}
@media (max-width: 960px) {
  .norml-stats-bar {
    padding: 80px 20px 100px 20px;
  }
}
.norml-stats-bar__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 40px 32px;
  max-width: 1376px;
  margin: 0 auto;
  align-items: flex-end;
}
@media (max-width: 960px) {
  .norml-stats-bar__grid {
    gap: 40px 16px;
  }
}

.norml-stat {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  flex: 0 1 auto;
}
@media (max-width: 960px) {
  .norml-stat {
    flex: 0 1 calc(50% - 8px);
    min-width: 0;
    gap: 8px;
  }
}
.norml-stat__num {
  font-family: var(--norml-font-display);
  font-size: clamp(80px, 14vw, 200px);
  font-weight: 500;
  color: var(--header-color-dark);
  line-height: 0.9;
  letter-spacing: -0.05em;
}
.norml-stat__lbl {
  font-family: var(--norml-font-body);
  font-size: 20px;
  font-weight: 600;
  color: var(--header-color-dark);
  line-height: 1.4;
  letter-spacing: -0.01em;
  padding-bottom: 18px;
  max-width: 150px;
}
@media (max-width: 960px) {
  .norml-stat__lbl {
    font-size: 16px;
    line-height: 1.5;
    padding-bottom: 8px;
    max-width: none;
  }
}

/* ===========================================================================
 * .norml-banner — full-width banner with icon + body + CTA
 * Used for urgency strips, announcement bars, deadlines.
 * Sub-elements: __content, __icon, __body, __cta
 * ========================================================================= */
.norml-banner {
  background: var(--header-color-accent);
  padding: 36px 24px;
  font-family: var(--norml-font-body);
  box-sizing: border-box;
}

.norml-banner__content {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 24px;
  align-items: center;
  max-width: 1180px;
  margin: 0 auto;
}

.norml-banner__icon {
  font-size: 44px;
  line-height: 1;
}

.norml-banner__body h3 {
  font-family: var(--norml-font-display);
  font-size: 28px;
  font-weight: 700;
  color: var(--header-color-dark);
  margin: 0 0 6px;
  line-height: 1.1;
}

.norml-banner__body p {
  font-size: 14px;
  color: rgba(13, 19, 23, 0.85);
  margin: 0;
  max-width: 640px;
  line-height: 1.5;
}

.norml-banner__cta {
  background: var(--header-color-dark);
  color: var(--header-color-accent);
  padding: 14px 24px;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}

.norml-banner__cta:hover {
  background: var(--header-color-white);
  color: var(--header-color-dark);
}

/* Two-button layout (primary + outline secondary, e.g. phone) */
.norml-banner__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.norml-banner__cta--outline {
  background: transparent;
  color: var(--header-color-dark);
  border: 1px solid var(--header-color-dark);
}

.norml-banner__cta--outline:hover {
  background: var(--header-color-dark);
  color: var(--header-color-accent);
}

/* ===========================================================================
 * .norml-accordion — FAQ Q/A unit (Figma 3514:3097)
 * Flat divider style: big DIN-condensed question, thin bottom rule, a down
 * arrow that flips 180° on open. NOT the compensation accordion (`svc-acc`
 * in service-compensation) — that one is intentionally left untouched.
 * Variants: --open (toggled by JS)
 * Sub-elements: __q (question / trigger), __a (answer)
 * ========================================================================= */
.norml-accordion {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--norml-border);
  border-radius: 0;
  margin-bottom: 0;
  overflow: hidden;
}

.norml-accordion--open {
  border-color: var(--norml-border);
}

.norml-accordion__q {
  padding: 22px 0;
  font-family: var(--norml-font-display);
  font-weight: 700;
  font-size: clamp(20px, 2.1vw, 28px);
  line-height: 1.15;
  letter-spacing: 0.01em;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--header-color-dark);
  gap: 24px;
  user-select: none;
}
@media (max-width: 600px) {
  .norml-accordion__q {
    font-size: 18px;
    padding: 18px 0;
    gap: 16px;
  }
}

.norml-accordion__q::after {
  content: "";
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  background: url("data:image/svg+xml,%3Csvg width='29' height='30' viewBox='0 0 29 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg opacity='0.9'%3E%3Cpath d='M14.1091 1.75L14.1091 25.0015' stroke='%230D1317' stroke-width='3.5' stroke-linecap='square' stroke-linejoin='round'/%3E%3Cpath d='M25.7263 15.0293L14.1006 26.655L2.47485 15.0293' stroke='%230D1317' stroke-width='3.5' stroke-linecap='square'/%3E%3C/g%3E%3C/svg%3E") no-repeat center/contain;
  transition: transform 0.3s ease;
}

.norml-accordion--open .norml-accordion__q::after {
  transform: rotate(180deg);
}

.norml-accordion__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s ease;
}

.norml-accordion--open .norml-accordion__a {
  grid-template-rows: 1fr;
}

.norml-accordion__a-inner {
  min-height: 0;
  overflow: hidden;
  opacity: 0;
  max-width: 70ch;
  font-size: 16px;
  color: var(--norml-muted);
  line-height: 1.7;
  transition: opacity 0.3s ease;
}

.norml-accordion--open .norml-accordion__a-inner {
  opacity: 1;
  padding-bottom: 24px;
}

.norml-accordion__a-inner > :last-child {
  margin-bottom: 0;
}

.norml-accordion__a-inner p {
  margin: 0;
  font-size: 16px;
  color: var(--norml-muted);
  line-height: 1.7;
}

.norml-accordion__a-inner p + p {
  margin-top: 12px;
}

/* ===========================================================================
 * .norml-review-card — testimonial card with stars + quote mark
 * Sub-elements: __stars, __text, __author (+ __author-source span)
 * ========================================================================= */
.norml-review-card {
  background: var(--header-color-white);
  border: 1px solid var(--norml-border);
  border-radius: 10px;
  padding: 24px;
  position: relative;
}

.norml-review-card::before {
  content: "“";
  position: absolute;
  top: 16px;
  right: 22px;
  font-family: var(--norml-font-display);
  font-size: 84px;
  font-weight: 700;
  color: var(--header-color-accent);
  line-height: 1;
  opacity: 0.3;
}

.norml-review-card__stars {
  color: var(--header-color-accent);
  font-size: 16px;
  margin-bottom: 12px;
  letter-spacing: 2px;
}

.norml-review-card__text {
  font-size: 14px;
  color: var(--header-color-dark);
  line-height: 1.7;
  margin: 0 0 16px;
  font-style: italic;
  position: relative;
  z-index: 1;
}

.norml-review-card__author {
  font-size: 13px;
  color: var(--norml-muted);
  font-weight: 600;
}

.norml-review-card__author-source {
  color: var(--norml-gray);
  font-weight: 400;
  font-style: italic;
}

/* ===========================================================================
 * .norml-quote-mark — gold opening quote glyph before an attorney/testimonial
 * quote. One treatment everywhere (homepage quote, service pages) so it always
 * matches. Figma: “ in DIN Condensed 96px, #EBD14A (--header-color-accent).
 * ========================================================================= */
.norml-quote-mark {
  display: block;
  font-family: var(--norml-font-display);
  font-weight: 700;
  font-size: 96px;
  line-height: 0.8;
  letter-spacing: -0.02em;
  color: var(--header-color-accent);
  user-select: none;
}

/* ===========================================================================
 * Responsive — applies to every Norml component above
 * ========================================================================= */
@media (max-width: 960px) {
  .norml-section {
    padding: 50px 20px;
  }
}
@media (max-width: 760px) {
  .norml-banner__content {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .norml-banner__icon {
    margin: 0 auto;
  }
}
/* ──────────────────────────────────────────────────────────────────────────
 * (removed 2026-07-08) The old `body.home .et_pb_image_0` absolute-positioning
 * block styled the LEGACY Divi hero's lawyer photo. The homepage hero is now the
 * custom front-page.php hero (photo = .home-hero__photo), and front-page.php
 * strips the first et_pb_section — so `.et_pb_image_0` now matches the first
 * image in the *remaining* Divi content (the testimonial photo) and this rule
 * was floating it out of place, differently per language. Dead weight → gone.
 * ────────────────────────────────────────────────────────────────────────── */
/* ===========================================================================
 * .norml-prose — native Gutenberg core-block content (the SEO footer section)
 *
 * The service-page SEO footer is authored as core blocks (heading/paragraph/
 * list) so the SEO team edits it as normal content. Wrap it in a
 * `.norml-section .norml-section--white` group + a `.norml-container.norml-prose`
 * group; this styles the raw core-block output.
 * ========================================================================= */
/* Two-column layout: the first heading sits large in a left column, everything
 * else (paragraphs, sub-headings, lists) stacks in the right column — matches the
 * "Serving Fort Myers…" design. Works for short (listing) and long (practice) footers. */
.norml-prose {
  font-family: var(--norml-font-body);
  color: var(--header-color-dark);
  display: grid;
  grid-template-columns: 0.85fr 1.55fr;
  column-gap: 64px;
  align-items: start;
}

.norml-prose > * {
  grid-column: 2;
}

.norml-prose > *:first-child {
  grid-column: 1;
  grid-row: 1;
  margin-top: 0;
}

/* First heading (left column) — larger display treatment. */
.norml-prose > h2:first-child {
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1.02;
  margin: 0;
}

.norml-prose h2 {
  font-family: var(--norml-font-display);
  font-weight: 700;
  font-size: 34px;
  line-height: 1.1;
  margin: 1.4em 0 0.5em;
  color: var(--header-color-dark);
}

.norml-prose > h2:not(:first-child):first-of-type {
  margin-top: 0;
}

@media (max-width: 900px) {
  .norml-prose {
    display: block;
  }
  .norml-prose > h2:first-child {
    margin-bottom: 0.5em;
  }
}
.norml-prose h3 {
  font-family: var(--norml-font-display);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.15;
  margin: 1.3em 0 0.4em;
  color: var(--header-color-dark);
}

.norml-prose p {
  font-size: 16px;
  line-height: 1.7;
  margin: 0 0 1em;
  color: var(--norml-muted);
}

.norml-prose ul,
.norml-prose ol {
  margin: 0 0 1em;
  padding-left: 1.4em;
}

.norml-prose li {
  font-size: 16px;
  line-height: 1.7;
  margin: 0 0 0.4em;
  color: var(--norml-muted);
}

.norml-prose a {
  color: var(--norml-accent-dark);
  text-decoration: underline;
}

.norml-prose strong {
  color: var(--header-color-dark);
}

/* Local-page SEO footer (.norml-local-seo) is a multi-section legal longform
 * (geo intro + several H2 topics), not the simple "big title + body" service
 * footer — render it single-column at a readable measure instead of the 2-col grid. */
.norml-prose.norml-local-seo {
  display: block;
  max-width: 820px;
}

.norml-prose.norml-local-seo > h2:first-child {
  font-size: 34px;
  line-height: 1.1;
}

/* ===========================================================================
 * Reviews Wall (ported from CodeKit 3277)
 * The <style> half of block 3277's "HTML head" code. The block's per-language
 * title translation is JS (js/legacy-reviewswall.js). Class name is
 * load-bearing (review-wall plugin markup). Ported verbatim.
 * ========================================================================= */
.rw-google-widget__title {
  line-height: 1.1em;
}

/* ===========================================================================
 * Testimonial disclaimer (advertising compliance — FL Bar 4-7.13/4-7.14)
 * Rendered by inc/compliance.php below every testimonial surface, and baked
 * into the legacy Divi tm-masonry sliders as content. Body size on purpose —
 * the client requires it NOT to be fine print.
 * ========================================================================= */
.norml-testimonial-disclaimer {
  margin-top: 16px;
  font-family: var(--norml-font-body);
  font-size: inherit;
  color: inherit;
  opacity: 0.85;
}

/* ===========================================================================
 * tm-masonry — hand-built testimonial slider (home / about / contacts).
 * Ported into Layer 2 from the legacy per-page Divi `custom_css` (lost when a
 * page leaves the Divi builder). Same values as the Divi source, re-expressed
 * against the design tokens so the component survives the Divi exit. Markup
 * (`.tm-masonry-container > .tm-card > .tm-text + .tm-author`) is carried as
 * page content; this sheet gives it its two-column card look.
 * ========================================================================= */
.tm-masonry-container {
  column-count: 2;
  column-gap: 16px;
  width: 100%;
}
@media (max-width: 980px) {
  .tm-masonry-container {
    column-count: 1;
  }
}

.tm-card {
  background-color: var(--norml-light);
  padding: 40px;
  margin-bottom: 36px;
  break-inside: avoid;
}

.tm-text {
  font-family: var(--norml-font-display);
  font-size: 40px;
  line-height: 1;
  font-weight: bold;
  color: var(--header-color-dark);
  margin: 0 0 16px;
}
.tm-text::before {
  content: "“";
  display: block;
  height: 40px;
  overflow: visible;
  color: var(--header-color-accent);
  font-family: var(--norml-font-display);
  font-size: 96px;
  line-height: 0.8;
}
@media (max-width: 980px) {
  .tm-text {
    font-size: 24px;
  }
}

.tm-author {
  font-family: var(--norml-font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--norml-gray);
  font-weight: 500;
}

/* Homepage hero (Divi-free) — dark band, giant justified brand line, overlapping
 * attorney photo, small SEO line + CTA. Matched to Figma 2566:14402.
 * BEM SCSS: nested, full-class-name comment above each rule, media queries
 * nested INSIDE the class they modify (never grouped at the bottom). */
.home-hero {
  position: relative;
  background: var(--header-color-dark);
  color: var(--header-color-white);
  overflow: hidden;
  padding: 110px 24px 0px 24px;
  min-height: 88vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  box-sizing: border-box;
}
@media (max-width: 1080px) {
  .home-hero {
    min-height: 0;
    padding: 80px 20px 0;
  }
}
@media (max-width: 980px) {
  .home-hero {
    min-height: 0;
    padding: 80px 20px 0;
  }
}
.home-hero__inner {
  position: relative;
  width: 100%;
  max-width: 1376px;
  margin: 0 auto;
  padding: 0;
}
.home-hero__brand {
  position: relative;
  z-index: 1;
  margin: 0;
  line-height: 0;
}
.home-hero__brand img {
  display: block;
  width: 100%;
  height: auto;
}
.home-hero__photo {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-66%);
  z-index: 2;
  margin: 0;
  line-height: 0;
  pointer-events: none;
}
.home-hero__photo img {
  display: block;
  width: auto;
}
.home-hero__photo::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 30%;
  background: linear-gradient(to bottom, rgba(13, 19, 23, 0) 15%, rgba(13, 19, 23, 0.45) 70%);
}
@media (max-width: 980px) {
  .home-hero__photo {
    position: relative;
    transform: translateX(-5%);
    left: unset;
    margin: -120px auto 0;
    text-align: center;
    max-width: 380px;
  }
}
.home-hero__intro {
  position: relative;
  z-index: 3;
  margin-top: 28px;
  margin-bottom: 45px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
}
.home-hero__intro .norml-button {
  flex: none;
}
@media (max-width: 768px) {
  .home-hero__intro .norml-button {
    width: 100%;
    text-align: center;
  }
}
@media (max-width: 980px) {
  .home-hero__intro {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
}
.home-hero__h1 {
  font-family: var(--norml-font-body);
  font-size: 16px;
  line-height: 1.5;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--header-color-white);
  margin: 0;
  max-width: 422px;
  color: var(--White, #FFF);
}
@media (max-width: 980px) {
  .home-hero__h1 {
    max-width: none;
  }
}

/* Layer 3 — homepage "No Win — No Fee" (Figma 2566:14447).
 * Two 680px columns (gap 16) inside the 1376 container: LEFT editable copy
 * (heading + body top, CTA pinned bottom), RIGHT the dynamic practice-areas
 * list (big DIN links + ↗ arrow, thin dividers between). Tokens only. */
.home-nowin__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: stretch;
}
@media (max-width: 900px) {
  .home-nowin__grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}
.home-nowin__intro {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.home-nowin .home-nowin__heading {
  font-size: clamp(44px, 5.6vw, 80px);
  line-height: 0.9;
  letter-spacing: -1px;
  color: var(--header-color-dark);
  margin: 0 0 16px;
  max-width: 450px;
}
.home-nowin .home-nowin__heading--cyr {
  font-size: clamp(36px, 4.6vw, 66px);
  letter-spacing: -0.5px;
}
.home-nowin__caveat {
  font-family: var(--norml-font-body);
  font-size: 16px;
  line-height: 1.5;
  font-style: italic;
  color: var(--header-color-dark);
  margin: 0 0 16px;
  max-width: 460px;
}
.home-nowin__body {
  font-family: var(--norml-font-body);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--header-color-dark);
  margin: 0;
  max-width: 460px;
}
.home-nowin__cta {
  align-self: flex-start;
  margin-top: 40px;
}
@media (max-width: 900px) {
  .home-nowin__cta {
    margin-top: 24px;
    width: 100%;
    text-align: center;
  }
}
.home-nowin__areas {
  list-style: none;
  margin: 0;
  padding: 0;
}
.home-nowin__area {
  border-bottom: 2px solid var(--norml-border);
}
.home-nowin__area:last-child {
  border-bottom: 0;
}
.home-nowin__area a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 0;
  font-family: var(--norml-font-display);
  font-weight: 500;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1;
  color: var(--header-color-dark);
  text-decoration: none;
  transition: color 0.15s ease;
}
.home-nowin__area a:hover {
  color: var(--norml-accent-dark);
}
.home-nowin__arrow {
  flex-shrink: 0;
  transition: transform 0.15s ease;
}
.home-nowin__area a:hover .home-nowin__arrow {
  transform: translate(2px, -2px);
}

/* Layer 3 — homepage attorney quote (Figma 2566:14473).
 * A 1376-wide dark BOX (not full-bleed) centred on the page: LEFT gold quote
 * mark + big DIN quote + author + CTA; RIGHT Leo's photo bleeding to the box's
 * bottom-right. Tokens only; the quote mark is the shared .norml-quote-mark. */
.home-quote {
  padding: 40px 24px;
}
.home-quote__box {
  background: var(--header-color-dark);
  color: var(--header-color-white);
  overflow: hidden;
}
.home-quote__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}
@media (max-width: 900px) {
  .home-quote__grid {
    grid-template-columns: 1fr;
  }
}
.home-quote__body {
  align-self: center;
  padding: 64px 32px 64px 56px;
}
@media (max-width: 900px) {
  .home-quote__body {
    padding: 48px 24px;
  }
}
.home-quote__text {
  font-family: var(--norml-font-display);
  font-weight: 500;
  font-size: clamp(28px, 3.4vw, 48px);
  line-height: 1.04;
  color: var(--header-color-white);
  margin: -36px 0 0;
  padding: 0;
  border: 0;
  background: none;
  max-width: 620px;
  quotes: none;
}
.home-quote__text::before, .home-quote__text::after {
  content: none;
}
.home-quote__author {
  display: block;
  font-family: var(--norml-font-body);
  font-style: normal;
  font-size: 16px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 24px;
}
.home-quote__cta {
  margin-top: 40px;
}
.home-quote__photo {
  align-self: end;
}
.home-quote__photo img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}
@media (max-width: 900px) {
  .home-quote__photo {
    order: -1;
    align-self: stretch;
    position: relative;
  }
  .home-quote__photo img {
    width: 100%;
    margin: 0;
  }
  .home-quote__photo::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 96px;
    background: linear-gradient(to bottom, transparent, var(--header-color-dark));
    pointer-events: none;
  }
}

/* Layer 3 — homepage "Free case evaluation" form (Figma 2564:14228).
 * A 1376-wide contained GOLD box (not the full-bleed service-form band). The box
 * carries the .service-form + .norml-section--accent classes, so the gold bg,
 * two-column grid and underline-on-gold Gravity Form styling all come from
 * service-form.css — this file only adds the contained box + padding + pins the
 * contact note to the bottom of the copy column (per the mockup). */
.home-form {
  padding: 40px 24px;
}
.home-form .norml-section__body {
  max-width: 500px;
}
.home-form__box {
  max-width: 1376px;
  margin: 0 auto;
  padding: 64px 56px;
  box-sizing: border-box;
}
@media (max-width: 900px) {
  .home-form__box {
    padding: 40px 24px;
  }
}
.home-form .service-form__copy {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.home-form .service-form__note {
  margin-top: auto;
}

/* Layer 3 — service-hero (Figma 3514:3169). Full-bleed two-column band with the
 * content locked to the 1440 container: left teal panel (breadcrumb, H1, CTA,
 * lead, marquee of trust badges), right dark panel (shared attorney photo +
 * bottom gradient + overlapping testimonial card). Reused by Local Service single.
 * BEM: nested, per-class comment, media queries inside the class. */
.service-hero {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  display: flex;
  min-height: 780px;
}
@media (max-width: 1079.98px) {
  .service-hero {
    flex-direction: column;
    min-height: 0;
  }
}
.service-hero__left {
  flex: 1 1 50%;
  min-width: 0;
  display: flex;
  justify-content: flex-end;
  background: var(--norml-teal);
  color: var(--header-color-white);
}
.service-hero__right {
  flex: 1 1 50%;
  min-width: 0;
  display: flex;
  justify-content: flex-start;
  background: var(--header-color-dark);
}
.service-hero__inner {
  max-width: 720px;
  width: 100%;
  box-sizing: border-box;
}
.service-hero__inner--left {
  display: flex;
  flex-direction: column;
  padding: 120px 15px 40px 32px;
}
@media (max-width: 1079.98px) {
  .service-hero__inner--left {
    padding: 100px 20px 40px;
  }
}
.service-hero__inner--right {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
}
.service-hero__inner--right::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 45%;
  background: linear-gradient(to bottom, rgba(13, 19, 23, 0) 0%, rgba(13, 19, 23, 0.65) 40%, #0d1317 78%);
  pointer-events: none;
}
@media (max-width: 1079.98px) {
  .service-hero__inner--right {
    min-height: 0;
    overflow: visible;
    display: flex;
    flex-direction: column;
  }
  .service-hero__inner--right::after {
    display: none;
  }
}
.service-hero__crumb {
  font-family: var(--norml-font-body);
  font-size: 14px;
  line-height: 22px;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 40px;
}
.service-hero__crumb a {
  color: var(--header-color-white);
  text-decoration: none;
}
.service-hero__crumb a:hover {
  text-decoration: underline;
}
.service-hero__crumb-sep {
  margin: 0 8px;
  opacity: 0.5;
}
.service-hero__crumb-current {
  color: rgba(255, 255, 255, 0.45);
}
.service-hero__h1 {
  font-size: clamp(48px, 6.7vw, 80px);
  line-height: 100%;
  letter-spacing: -1.92px;
  color: var(--header-color-white);
  margin: 0 0 40px;
  font-weight: 400;
}
.service-hero__cta {
  align-self: flex-start;
}
.service-hero__pitch {
  margin-top: auto;
  padding-top: 48px;
}
.service-hero__lead {
  font-family: var(--norml-font-body);
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--header-color-white);
  max-width: 547px;
  margin: 0 0 10px;
}
@media (min-width: 1080px) {
  .service-hero__lead.is-clamped {
    max-height: 140px;
    overflow: hidden;
    position: relative;
  }
  .service-hero__lead.is-clamped::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 40px;
    background: linear-gradient(to bottom, rgba(26, 81, 108, 0), var(--norml-teal));
    pointer-events: none;
  }
  .service-hero__lead.is-expanded {
    max-height: 2000px;
  }
  .service-hero__lead.is-expanded::after {
    content: none;
  }
}
.service-hero__lead-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: -14px 0 20px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--header-color-accent);
  cursor: pointer;
}
.service-hero__lead-toggle svg {
  transition: transform 0.2s ease;
}
.service-hero__lead-toggle.is-open svg {
  transform: rotate(180deg);
}
.service-hero__badges {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 86%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 86%, transparent 100%);
  margin-right: 80px;
}
.service-hero__badges-track {
  display: flex;
  width: max-content;
  animation: service-hero-marquee 24s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .service-hero__badges-track {
    animation: none;
  }
}
.service-hero__badge {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 12px;
  padding: 12px 12px 12px 6px;
  background: rgba(255, 255, 255, 0.06);
  font-family: var(--norml-font-body);
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
  color: var(--header-color-white);
}
.service-hero__check {
  flex: none;
  color: var(--header-color-accent);
}
.service-hero__photo {
  inset: 0;
  width: 100%;
  object-fit: cover;
  object-position: center bottom;
  max-width: 700px;
}
@media (max-width: 1079.98px) {
  .service-hero__photo {
    position: relative;
    inset: auto;
    height: 420px;
    object-position: center top;
  }
}
.service-hero__quote {
  position: absolute;
  right: 36px;
  bottom: 40px;
  z-index: 1;
  width: 468px;
  max-width: calc(100% - 48px);
  margin: 0;
  box-sizing: border-box;
  padding: 24px;
  background: var(--norml-light);
  border-left: 20px solid var(--header-color-accent);
}
@media (max-width: 1079.98px) {
  .service-hero__quote {
    position: relative;
    right: auto;
    bottom: auto;
    width: auto;
    max-width: none;
    margin: -48px 20px 24px;
  }
}
.service-hero__quote-mark {
  font-size: 60px;
  line-height: 0.45;
  margin-bottom: 8px;
}
.service-hero__quote-text {
  font-family: var(--norml-font-body);
  font-size: 18px;
  line-height: 1.35;
  font-weight: 600;
  color: var(--header-color-dark);
  margin: 0 0 16px;
}
.service-hero__quote-author {
  font-family: var(--norml-font-body);
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.01em;
  color: var(--norml-gray);
}

@keyframes service-hero-marquee {
  to {
    transform: translateX(-50%);
  }
}
/* Layer 3 — service-form. Full gold "free case evaluation" band + a Gravity
 * Form restyled to underline inputs (matches the design). */
/* Gold band (accent bg variant of the section). */
.service-form.norml-section--accent {
  background: var(--header-color-accent);
  color: var(--header-color-dark);
}

.service-form.norml-section--accent .norml-section__h2,
.service-form.norml-section--accent .service-form__note,
.service-form.norml-section--accent .norml-section__body {
  color: var(--header-color-dark);
}

.service-form__note a {
  color: var(--header-color-dark);
  font-weight: 700;
  text-decoration: underline;
}

.service-form__grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 56px;
  align-items: start;
}

.service-form__note {
  margin-top: 28px;
  font-family: var(--norml-font-body);
  line-height: 1.6;
}

/* --- Gravity Form: underline inputs on the gold band ---
 * Force a single-column stack of full-width rows (overrides GF 2.5's 12-col grid
 * + span classes, which otherwise fight our layout). Each field is one full-width
 * row; the Name field then splits First/Last 50/50 inside its own grid. */
.service-form .gform_wrapper .gform_fields {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 28px 24px;
}

.service-form .gform_wrapper .gfield {
  margin: 0;
  grid-column: 1/-1 !important;
}

.service-form .gform_wrapper .ginput_container--name {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px 24px;
  width: 100%;
}

.service-form .gform_wrapper .ginput_container--name > span {
  width: 100%;
}

.service-form .gform_wrapper .ginput_container--name > span input {
  width: 100%;
}

.service-form .gform_wrapper .gfield_label {
  font-family: var(--norml-font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--header-color-dark);
  opacity: 0.7;
}

.service-form .gform_wrapper input[type=text],
.service-form .gform_wrapper input[type=email],
.service-form .gform_wrapper input[type=tel],
.service-form .gform_wrapper input[type=number],
.service-form .gform_wrapper textarea,
.service-form .gform_wrapper select {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(13, 19, 23, 0.35);
  border-radius: 0;
  padding: 8px 0;
  font-family: var(--norml-font-body);
  color: var(--header-color-dark);
  width: 100%;
}

.service-form .gform_wrapper input:focus,
.service-form .gform_wrapper textarea:focus {
  outline: none;
  border-bottom-color: var(--header-color-dark);
}

.service-form .gform_wrapper .gform_footer {
  grid-column: 1/-1;
  margin-top: 8px;
}

.service-form .gform_wrapper .gform_button {
  background: var(--header-color-dark);
  color: var(--header-color-white);
  border: none;
  border-radius: 0;
  padding: 14px 28px;
  font-family: var(--norml-font-body);
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}

.service-form .gform_wrapper .gform_button:hover {
  opacity: 0.85;
}

@media (max-width: 992px) {
  .service-form__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}
@media (max-width: 560px) {
  .service-form .gform_wrapper .gform_fields {
    grid-template-columns: 1fr;
  }
}
/* Layer 3 — service-compensation accordion.
 * Ported from the legacy CodeKit `.accordion__*` styles, re-prefixed `.svc-acc`
 * and re-tokenized (no more CodeKit dependency). Layout + the bits the design
 * system doesn't cover; colors via Layer-1 tokens. */
.svc-acc {
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-family: var(--norml-font-body);
}

.svc-acc__item {
  background: var(--norml-light);
  padding: 32px;
  transition: background 0.2s;
}

.svc-acc__header {
  display: flex;
  column-gap: 20px;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.svc-acc__item--active .svc-acc__header {
  border-bottom: 2px solid var(--norml-border);
  padding-bottom: 32px;
}

.svc-acc__left {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 0 1 50%;
}

.svc-acc__center {
  flex: 1 1 auto;
}

.svc-acc__number {
  color: #1A516C; /* legacy teal accent — not in token set */
  font-size: 90px;
  line-height: 1;
}

.svc-acc__info {
  display: flex;
  flex-direction: column;
}

.svc-acc__level {
  color: #1A516C;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
}

.svc-acc__title {
  color: var(--header-color-dark);
  font-size: 40px;
  line-height: 1.12;
  margin: 0;
  padding: 0;
}

.svc-acc__small-txt {
  color: var(--norml-gray);
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
  display: block;
  margin-bottom: 10px;
}

.svc-acc__range {
  color: var(--header-color-dark);
  font-size: 40px;
}

.svc-acc__toggle {
  border: none;
  background: none;
  cursor: pointer;
  color: var(--header-color-dark);
  transition: transform 0.2s;
}

.svc-acc__icon {
  display: inline-block;
  transition: transform 0.3s;
}

.svc-acc__item--active .svc-acc__icon {
  transform: rotate(180deg);
}

.svc-acc__body {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.5s ease, opacity 0.4s ease;
}

.svc-acc__item--active .svc-acc__body {
  opacity: 1;
}

.svc-acc__content-text {
  padding-top: 30px;
  display: flex;
  gap: 50px;
  flex-wrap: nowrap;
}

.svc-acc__content-text p {
  color: var(--header-color-dark);
  font-size: 16px;
  line-height: 1.62;
  font-weight: 600;
  flex: 0 1 49%;
  padding: 0;
}

.svc-acc__btn {
  margin-top: 30px;
}

@media (max-width: 1440px) {
  .svc-acc__title,
  .svc-acc__range {
    font-size: 32px;
  }
}
@media (max-width: 992px) {
  .svc-acc__item {
    padding: 30px 20px;
  }
  .svc-acc__header {
    flex-wrap: wrap;
  }
  .svc-acc__left {
    margin-bottom: 20px;
  }
  .svc-acc__center {
    flex: 1 1 50%;
  }
  .svc-acc__number {
    font-size: 50px;
  }
}
@media (max-width: 767px) {
  .svc-acc__left {
    flex: 1 1 100%;
  }
  .svc-acc__title {
    font-size: 20px;
  } /* long RU/CR item titles wrapped too big at 24px on phones */
  .svc-acc__range {
    font-size: 24px;
  } /* keep the compensation amount prominent */
  .svc-acc__content-text {
    flex-wrap: wrap;
    gap: 5px;
  }
  .svc-acc__content-text p {
    flex: 1 1 100%;
  }
  .svc-acc__btn {
    width: 100%;
    text-align: center;
  }
}
/* RU/CR: the item title is an <h3>, and a legacy Divi Custom-CSS override
 * (`html[lang="ru"] body h3`, specificity 0,1,3) forces ALL RU h3 to 42px —
 * beating our adaptive .svc-acc__title (0,1,0) and even the mobile step-down.
 * body.lang-cyr .svc-acc__title (0,2,1) beats it; hold the title at 28px on
 * RU/CR (down from the Latin 40/32) since Oswald is wider than DIN.
 * Remove once the legacy html[lang] h2/h3 override is cleaned out at teardown. */
body.lang-cyr .svc-acc__title {
  font-size: 28px;
}

@media (max-width: 767px) {
  body.lang-cyr .svc-acc__title {
    font-size: 22px;
  }
}
/* Layer 3 — service-approach. Photo cards with a number top-left and a title
 * label over a dark gradient at the bottom. Tokens via Layer 1/2. */
.service-approach__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 32px;
}

.service-approach__top .norml-section__h2 {
  margin: 0;
}

.service-approach__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.service-approach__card {
  position: relative;
  min-height: 380px;
  background-color: var(--header-color-dark);
  background-size: cover;
  background-position: center;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: var(--header-color-white);
}

.service-approach__card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13, 19, 23, 0.15) 0%, rgba(13, 19, 23, 0.05) 45%, rgba(13, 19, 23, 0.85) 100%);
}

.service-approach__num {
  position: relative;
  z-index: 1;
  font-size: 48px;
  line-height: 1;
  padding: 24px 0 0 24px;
}

.service-approach__label {
  position: relative;
  z-index: 1;
  padding: 24px;
}

.service-approach__title {
  font-size: 28px;
  margin: 0;
  color: var(--header-color-white);
}

.service-approach__desc {
  font-family: var(--norml-font-body);
  font-size: 14px;
  line-height: 1.5;
  margin: 8px 0 0;
  opacity: 0.9;
}

@media (max-width: 900px) {
  .service-approach__grid {
    grid-template-columns: 1fr;
  }
  .service-approach__card {
    min-height: 300px;
  }
  .service-approach__top {
    flex-direction: column;
    align-items: flex-start;
  }
}
/* Layer 3 — service-cases ("We handle a variety of … cases").
 * Matched to Figma 2566:14680. BEM SCSS: nested with a full-name comment above
 * each rule so the class is greppable. */
.service-cases__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 24px;
}
.service-cases .norml-section__h2 {
  margin: 0;
}
.service-cases__cta {
  flex: none;
}
.service-cases__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.service-cases__card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 180px;
  padding: 24px;
  background: var(--norml-light);
  box-sizing: border-box;
}
.service-cases__title {
  font-family: var(--norml-font-display);
  font-size: 40px;
  line-height: 1;
  font-weight: 700;
  color: var(--header-color-dark);
  margin: 0;
}
.service-cases__desc {
  font-family: var(--norml-font-body);
  font-size: 16px;
  line-height: 1.5;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--norml-gray);
  margin: 0;
}
@media (max-width: 992px) {
  .service-cases__grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 600px) {
  .service-cases__grid {
    grid-template-columns: 1fr;
  }
  .service-cases__head {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Layer 3 — service-solutions layout only (tokens via Layer 2 / header.css). */
.service-solutions__grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 48px;
  align-items: center;
}

.service-solutions__features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px 40px;
  margin-top: 24px;
}

.service-solutions__feature-title {
  font-family: var(--norml-font-display);
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--header-color-dark);
}

.service-solutions__feature-text {
  font-family: var(--norml-font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--norml-muted);
  margin: 0;
}

.service-solutions__image img {
  width: 100%;
  height: auto;
  display: block;
}

/* Dark variant (matches the design). */
.service-solutions.norml-section--dark .service-solutions__feature-title {
  color: var(--header-color-white);
}

.service-solutions.norml-section--dark .service-solutions__feature-text {
  color: var(--header-color-white);
  opacity: 0.85;
}

.service-solutions.norml-section--dark .service-solutions__grid {
  align-items: end;
}

.service-solutions.norml-section--dark .service-solutions__image {
  align-self: stretch;
  display: flex;
  align-items: flex-end;
}

@media (max-width: 992px) {
  .service-solutions__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .service-solutions__image {
    order: -1;
    max-width: 420px;
  }
}
@media (max-width: 560px) {
  .service-solutions__features {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}
/* Layer 3 — service-related. Two columns: intro left, arrow-link list right. */
.service-related__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}

.service-related__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.service-related__list li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.service-related__list li::before,
.service-related__list li::marker {
  content: none;
  display: none;
}

.service-related__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 4px;
  border-bottom: 1px solid var(--norml-border);
  font-family: var(--norml-font-display);
  font-size: 28px;
  font-weight: 700;
  color: var(--header-color-dark);
  text-decoration: none;
  transition: color 0.15s, padding 0.15s;
}

.service-related__list li:first-child .service-related__link {
  border-top: 1px solid var(--norml-border);
}

.service-related__link:hover {
  color: var(--norml-accent-dark);
  padding-left: 10px;
}

.service-related__arrow {
  flex: none;
}

@media (max-width: 900px) {
  .service-related__grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .service-related__link {
    font-size: 22px;
    padding: 18px 4px;
  }
}
/*
 * css/blocks/pi-hero.css — Layer 3, block-specific layout for acf/pi-hero
 *
 * LAYOUT ONLY. Colors, fonts, and component visuals come from components.css
 * and the site's existing :root tokens. Do NOT add hex literals, font-family
 * overrides, or button styles to this file.
 *
 * The hero embeds the calculator widget; its styles are in pi-calc-widget.css.
 */
.pi-hero {
  background: var(--header-color-dark);
  color: var(--header-color-white);
  padding: 60px 24px 80px;
  position: relative;
  overflow: hidden;
  font-family: var(--norml-font-body);
  box-sizing: border-box;
  /* Full-bleed: break out of the constrained .entry-content so the dark
     background spans the full viewport width, like the home-page hero.
     Negative side margins only (no width:100vw) → full width with no extra
     horizontal scrollbar. Inner .norml-container keeps content centered. */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.pi-hero *,
.pi-hero *::before,
.pi-hero *::after {
  box-sizing: border-box;
}

/* Decorative radial glow — pure layout/decoration, no new tokens. */
.pi-hero::before {
  content: "";
  position: absolute;
  right: -200px;
  top: -100px;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(235, 209, 74, 0.08), transparent 70%);
  pointer-events: none;
}

/* Breadcrumb — block-specific because the hero is the only block with one
 * over a dark bg. If a second dark-hero block ever needs it, promote to
 * components.css then. */
.pi-breadcrumb {
  font-family: var(--norml-font-body);
  font-size: 15px;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 28px;
  letter-spacing: 0;
  text-transform: none;
}

.pi-breadcrumb a {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
}

.pi-breadcrumb a:hover {
  color: var(--header-color-accent);
}

.pi-breadcrumb__sep {
  margin: 0 8px;
  opacity: 0.5;
}

/* current item greyed (matches the site-standard breadcrumb in #10) */
.pi-breadcrumb__current {
  color: rgba(255, 255, 255, 0.5);
}

/* 2-col grid: lead text on left, calculator widget on right. */
.pi-hero__grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 60px;
  align-items: start;
}

.pi-hero__grid--no-calc {
  grid-template-columns: 1fr;
}

.pi-hero__title {
  font-size: clamp(40px, 5.5vw, 64px);
  margin: 0 0 24px;
  color: var(--header-color-white);
  line-height: 1;
}

.pi-hero__accent {
  color: var(--header-color-accent);
  display: block;
}

.pi-hero__lead-body p {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.82);
  margin: 0 0 14px;
  line-height: 1.65;
}

.pi-hero__lead-body p:nth-of-type(n+2) {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.72);
}

/* Trust strip — small icon+label pills below the lead. */
.pi-hero__trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 24px;
  padding-top: 24px;
  margin-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.pi-hero__trust-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.85);
}

.pi-hero__trust-item-icon {
  color: var(--header-color-accent);
}

/* Trust item that links out (e.g. Google rating → reviews) */
.pi-hero__trust-item--link {
  text-decoration: none;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  transition: color 0.15s;
}

.pi-hero__trust-item--link:hover {
  color: var(--header-color-accent);
}

@media (max-width: 960px) {
  .pi-hero {
    padding: 40px 20px 60px;
  }
  .pi-hero__grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .pi-hero__title {
    font-size: 38px;
  }
}
/*
 * css/blocks/pi-disclaimer.css — Layer 3, block-specific layout for
 * acf/pi-disclaimer. Small dark footer band.
 *
 * LAYOUT ONLY. No hex literals, no font-family overrides.
 */
.pi-disclaimer-footer {
  background: var(--header-color-dark);
  color: rgba(255, 255, 255, 0.55);
  padding: 30px 28px;
  font-size: 11px;
  line-height: 1.6;
  font-family: var(--norml-font-body);
  box-sizing: border-box;
  /* Inset rounded card + bottom gap so this dark band reads as its own
     element and does not merge into the (also dark) site footer. */
  max-width: 1200px;
  margin: 0 auto 64px;
  border-radius: 14px;
}

/* =============================================================================
   Legacy accordion (FAQ / compensation ranges)
   Ported verbatim from CodeKit block 1529 ("SCSS output"). Drives the
   .accordion__* markup that appears on ~42 posts, local_service bodies, and
   some pages. Toggle behavior lives in js/legacy-accordion.js (block 1652).
   Class names are load-bearing (live Divi markup depends on them) — do NOT
   rename. Kept byte-faithful; only the trailing sourceMappingURL comment was
   stripped.
   ============================================================================= */
#page-container {
  overflow: hidden;
}

.accordion {
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-family: "Inter", sans-serif;
}

.accordion__item {
  background: var(--Grey, #F7F8F9);
  padding: 32px;
  transition: background 0.2s;
}

@media (max-width: 992px) {
  .accordion__item {
    padding: 30px 20px;
  }
}
.accordion__item--active .accordion__body {
  max-height: 1000px;
  opacity: 1;
}

.accordion__item--active .accordion__icon {
  transform: rotate(180deg);
}

.accordion__item--active .accordion__header {
  border-bottom: 2px solid #D1D1D1;
  padding-bottom: 32px;
}

.accordion__header {
  display: flex;
  column-gap: 20px;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s ease 0s;
}

@media (max-width: 992px) {
  .accordion__header {
    flex-wrap: wrap;
  }
}
.accordion__left {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 0 1 50%;
}

@media (max-width: 992px) {
  .accordion__left {
    margin-bottom: 20px;
  }
}
@media (max-width: 767px) {
  .accordion__left {
    flex: 1 1 100%;
  }
}
.accordion__center {
  flex: 1 1 auto;
}

@media (max-width: 992px) {
  .accordion__center {
    flex: 1 1 50%;
  }
}
.accordion__number {
  color: #1A516C;
  font-family: "DIN Condensed", "Oswald";
  font-size: 90px;
  font-weight: 700;
}

@media (max-width: 992px) {
  .accordion__number {
    font-size: 50px;
  }
}
.accordion__info {
  display: flex;
  flex-direction: column;
}

.accordion__level {
  color: #1A516C;
  font-family: Inter;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
}

.accordion__title {
  color: var(--Black, #0D1317);
  font-family: "DIN Condensed", "Oswald", Helvetica, Arial, Lucida, sans-serif;
  font-size: 40px !important;
  font-weight: 700;
  line-height: 112.5% !important;
  padding-bottom: 0;
}

@media (max-width: 1440px) {
  .accordion__title {
    font-size: 32px !important;
  }
}
@media (max-width: 767px) {
  .accordion__title {
    font-size: 24px !important;
  }
}
.accordion__right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.accordion__small-txt {
  color: var(--Dark-Grey, #868686);
  font-family: Inter;
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
  display: block;
  margin-bottom: 10px;
}

.accordion__range {
  color: var(--Black, #0D1317);
  font-family: "DIN Condensed", "Oswald";
  font-size: 40px;
  font-weight: 700;
}

@media (max-width: 1440px) {
  .accordion__range {
    font-size: 32px;
  }
}
@media (max-width: 767px) {
  .accordion__range {
    font-size: 24px;
  }
}
.accordion__toggle {
  border: none;
  background: none;
  font-size: 20px;
  cursor: pointer;
  transition: transform 0.2s;
}

.accordion__icon {
  display: inline-block;
  transition: transform 0.3s;
}

.accordion__body {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.5s ease, opacity 0.4s ease, padding 0.3s ease;
}

.accordion__content {
  transition: padding-top 0.3s ease 0s;
}

.accordion__content-text {
  padding-top: 30px;
  display: flex;
  gap: 50px;
  flex-wrap: nowrap;
}

@media (max-width: 767px) {
  .accordion__content-text {
    flex-wrap: wrap;
    gap: 5px;
  }
}
.accordion__content-text p {
  color: var(--Black, #0D1317);
  font-family: Inter;
  font-size: 16px;
  line-height: 162.5%;
  font-weight: 600;
  flex: 0 1 49%;
  padding: 0;
}

@media (max-width: 767px) {
  .accordion__content-text p {
    flex: 1 1 100%;
  }
}
.accordion__btn {
  background: #EBD14A;
  display: flex;
  padding: 15px 24px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  color: #0D1317;
  font-family: "Inter Tight", sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.5em;
  transition: background 0.3s;
  max-width: 245px;
  white-space: nowrap;
  margin-top: 30px;
}

@media (max-width: 767px) {
  .accordion__btn {
    max-width: 100%;
    width: 100%;
    gap: 0;
  }
}
/* ===========================================================================
 * common/reviews.scss — Review Wall (Google reviews) shared overrides
 *
 * The Review Wall plugin renders `.rw-google-widget__title` as the section
 * heading. A legacy rule in the theme's top-level style.css forces it to
 * 56px / 700 / bare "DIN Condensed" — too big + heavy on desktop, and the
 * bare family has NO Cyrillic fallback so RU/CR headings drop to a serif.
 *
 * This file (a "common" component sheet, enqueued after components.css so it
 * wins the cascade at equal specificity) redefines the heading:
 *   - smaller + lighter on desktop, fluid down to mobile
 *   - font token `--norml-font-display` (DIN Latin, Oswald Cyrillic) → RU/CR
 *     render in Oswald instead of a serif fallback
 *   - weight 500 to match .norml-display / .norml-section__h2
 * ========================================================================= */
.rw-google-widget__title {
  font-family: var(--norml-font-display);
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 500;
  line-height: 1.05;
  color: var(--header-color-dark);
}

body.lang-cyr .rw-google-widget__title {
  font-size: clamp(24px, 2.7vw, 34px);
}

.home-comp .norml-section__h2 {
  max-width: 760px;
}

/* =============================================================================
   CUSTOM HEADER
   — replaces Divi's native #main-header
============================================================================= */
:root {
  --header-height: 80px;
  --header-color-dark: #0d1317;
  --header-color-accent: #ebd14a;
  --header-color-white: #ffffff;
}

/* Body padding — push content below the fixed header.
   Extra selectors override Divi's body.et_fixed_nav inline styles. */
body,
body.et_fixed_nav,
body.et-fixed-header {
  padding-top: var(--header-height) !important;
}

/* Dark / transparent variants: header overlays the hero, no push needed.
   `header-overlay` is added by functions.php for every overlay page (home,
   about-us, service pages, local_service single) so we don't list page IDs. */
body.header-overlay,
body.header-overlay.et_fixed_nav,
body.home,
body.home.et_fixed_nav,
body.page-id-185,
body.page-id-185.et_fixed_nav,
body.page-id-505,
body.page-id-505.et_fixed_nav,
body.page-id-590,
body.page-id-590.et_fixed_nav,
body.page-id-628,
body.page-id-628.et_fixed_nav {
  padding-top: 0 !important;
}

/* ---- Header wrapper ---- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  height: var(--header-height);
  transition: transform 0.35s ease, background 0.35s ease, box-shadow 0.35s ease;
  will-change: transform;
}

.site-header__container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 32px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ---- Variants ---- */
.site-header--dark {
  background-color: var(--header-color-dark);
}

.site-header--transparent {
  background-color: transparent;
}

.site-header--white {
  background-color: var(--header-color-white);
  box-shadow: 0 1px 0 rgba(13, 19, 23, 0.08);
}

/* ---- Scroll states (toggled by JS) ---- */
.site-header--hidden {
  transform: translateY(-100%);
}

.site-header--sticky {
  background-color: var(--header-color-white) !important;
  box-shadow: 0 2px 24px rgba(13, 19, 23, 0.1) !important;
}

/* ---- Logo ---- */
.site-header__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}

.site-header__logo-img {
  height: 52px;
  width: auto;
  display: block;
}

/* Show white logo on dark/transparent; dark logo on white */
.site-header--dark .site-header__logo-img--dark,
.site-header--transparent .site-header__logo-img--dark {
  display: none;
}

.site-header--white .site-header__logo-img--white {
  display: none;
}

/* When sticky, always dark logo regardless of original variant */
.site-header--sticky .site-header__logo-img--white {
  display: none !important;
}

.site-header--sticky .site-header__logo-img--dark {
  display: block !important;
}

/* ---- Desktop nav wrapper ---- */
.site-header__nav {
  display: flex;
  align-items: center;
}

/* ---- Nav menu list ---- */
.site-header__menu {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ---- Nav links ---- */
.site-header__menu .menu-item > a {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease;
  padding: 20px 0;
}

/* Text colour per variant */
.site-header--dark .site-header__menu .menu-item > a,
.site-header--transparent .site-header__menu .menu-item > a {
  color: #fff;
}

.site-header--white .site-header__menu .menu-item > a,
.site-header--sticky .site-header__menu .menu-item > a {
  color: var(--header-color-dark);
}

.site-header__menu .menu-item > a:hover {
  color: var(--header-color-accent) !important;
}

/* ---- Dropdown arrow on parent items ---- */
.site-header__menu .menu-item-has-children > a::after {
  content: "";
  display: inline-block;
  width: 10px;
  height: 6px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.site-header--dark .site-header__menu .menu-item-has-children > a::after,
.site-header--transparent .site-header__menu .menu-item-has-children > a::after {
  filter: brightness(0) invert(1);
}

/* Sticky (scroll up) → dark arrow */
.site-header--sticky .site-header__menu .menu-item-has-children > a::after {
  filter: none;
}

.site-header__menu .menu-item-has-children:hover > a::after {
  transform: rotate(180deg);
}

/* ---- Dropdown submenu (level 2) ---- */
.site-header__menu .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: #fff;
  /* border-radius: 8px; */
  box-shadow: 0 8px 32px rgba(13, 19, 23, 0.12);
  list-style: none;
  margin: 0;
  padding: 15px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  z-index: 100;
}

.site-header__menu .menu-item-has-children {
  position: relative;
}

.site-header__menu .menu-item-has-children:hover > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.site-header__menu .sub-menu .menu-item > a {
  padding: 13px 22px;
  color: var(--header-color-dark) !important;
  font-size: 16px;
}

.site-header__menu .sub-menu .menu-item > a:hover {
  color: var(--header-color-accent) !important;
  background: rgba(13, 19, 23, 0.04);
}

/* ---- Level-2 items that have children: arrow → indicator ---- */
.site-header__menu .sub-menu .menu-item-has-children > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.site-header__menu .sub-menu .menu-item-has-children > a::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='10' fill='none'%3E%3Cpath d='M1 1l4 4-4 4' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  flex-shrink: 0;
  margin-left: 12px;
  transition: transform 0.2s ease;
  filter: none;
}

/* Active/hovered level-2 parent: yellow text + yellow arrow */
.site-header__menu .sub-menu .menu-item-has-children:hover > a {
  color: var(--header-color-accent) !important;
}

.site-header__menu .sub-menu .menu-item-has-children:hover > a::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='10' fill='none'%3E%3Cpath d='M1 1l4 4-4 4' stroke='%23ebd14a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ---- Flyout submenu (level 3) ---- */
.site-header__menu .sub-menu .sub-menu {
  top: -15px;
  left: 99%;
  min-width: 240px;
  /* border-radius: 0 8px 8px 0; */
  box-shadow: 8px 0 32px rgba(13, 19, 23, 0.08);
  transform: translateX(-6px);
  border-left: 1px solid rgba(13, 19, 23, 0.06);
}

.site-header__menu .sub-menu .menu-item-has-children:hover > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.site-header__menu > .menu-item-has-children > .sub-menu {
  /* border-radius: 8px; */
}

.site-header__menu > .menu-item-has-children > .sub-menu > .menu-item-has-children:first-child:hover ~ .menu-item,
.site-header__menu > .menu-item-has-children > .sub-menu > .menu-item-has-children:hover {
  background: transparent;
}

/* ---- Phone button ---- */
.site-header__menu .phone-btn-menu > a {
  padding: 15px 20px !important;
  border: 1px solid currentColor !important;
  /* border-radius: 4px; */
  font-weight: 500;
  transition: background 0.2s ease, color 0.2s ease !important;
}

.site-header--dark .site-header__menu .phone-btn-menu > a,
.site-header--transparent .site-header__menu .phone-btn-menu > a {
  color: #fff;
}

.site-header--white .site-header__menu .phone-btn-menu > a,
.site-header--sticky .site-header__menu .phone-btn-menu > a {
  color: var(--header-color-dark);
}

.site-header--dark .site-header__menu .phone-btn-menu > a:hover,
.site-header--transparent .site-header__menu .phone-btn-menu > a:hover {
  background: #fff;
  color: var(--header-color-dark) !important;
}

.site-header--white .site-header__menu .phone-btn-menu > a:hover,
.site-header--sticky .site-header__menu .phone-btn-menu > a:hover {
  background: var(--header-color-dark);
  color: #fff !important;
}

/* ---- Language switcher ---- */
.menu-item-lang-switcher {
  position: relative;
  list-style: none;
  padding: 20px 0;
}

.lang-switcher-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  line-height: 1;
  transition: color 0.2s ease;
}

.site-header--dark .lang-switcher-btn,
.site-header--transparent .lang-switcher-btn {
  color: #fff;
}

.site-header--white .lang-switcher-btn,
.site-header--sticky .lang-switcher-btn {
  color: var(--header-color-dark);
}

.lang-switcher-btn:hover {
  color: var(--header-color-accent);
}

.lang-switcher-btn__arrow {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.lang-switcher-btn[aria-expanded=true] .lang-switcher-btn__arrow {
  transform: rotate(180deg);
}

.lang-switcher-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 100px;
  background: #fff;
  /* border-radius: 8px; */
  box-shadow: 0 8px 32px rgba(13, 19, 23, 0.12);
  list-style: none;
  margin: 0;
  padding: 15px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  z-index: 100;
}

.lang-switcher-btn[aria-expanded=true] ~ .lang-switcher-dropdown,
.menu-item-lang-switcher:hover .lang-switcher-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.lang-switcher-dropdown li {
  list-style: none;
}

.lang-switcher-dropdown a {
  display: block;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--header-color-dark);
  text-decoration: none;
  transition: color 0.2s ease, background 0.2s ease;
}

.lang-switcher-dropdown a:hover {
  color: var(--header-color-accent);
  background: rgba(13, 19, 23, 0.04);
}

/* ---- Mobile lang switcher (hidden on desktop) ---- */
.header-lang-mobile {
  display: none;
}

/* ---- Burger button ---- */
.site-header__burger {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  color: inherit;
  flex-shrink: 0;
}

.site-header__burger-line {
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
  transform-origin: center;
}

.site-header--dark .site-header__burger,
.site-header--transparent .site-header__burger {
  color: #fff;
}

.site-header--white .site-header__burger {
  color: var(--header-color-dark);
}

/* Burger → X */
.site-header__burger.is-active .site-header__burger-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.site-header__burger.is-active .site-header__burger-line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.site-header__burger.is-active .site-header__burger-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* =============================================================================
   MOBILE NAVIGATION DRAWER
============================================================================= */
/* Mobile nav panel — opens below the fixed header */
.mobile-nav {
  position: fixed;
  top: var(--header-height);
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  z-index: 9998;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px 24px 48px;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-nav.is-open {
  transform: translateX(0);
}

.mobile-nav-overlay {
  position: fixed;
  top: var(--header-height);
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(13, 19, 23, 0.3);
  z-index: 9997;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

body.mobile-nav-open .mobile-nav-overlay {
  opacity: 1;
  pointer-events: auto;
}

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

/* Nav list */
.mobile-nav__menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mobile-nav .menu-item-has-children {
  position: relative;
}

.mobile-nav__menu > .menu-item > a {
  display: flex;
  align-items: center;
  padding: 14px 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--header-color-dark);
  text-decoration: none;
  border-bottom: 1px solid rgba(13, 19, 23, 0.08);
  transition: color 0.2s ease;
}

.mobile-nav__menu > .menu-item > a:hover {
  color: var(--header-color-accent);
}

.mobile-nav__menu .menu-item-has-children.is-open > a {
  color: var(--header-color-accent);
}

/* Mobile submenu toggle */
.mob-toggle {
  position: absolute;
  right: 0;
  top: 0;
  width: 48px;
  height: 48px;
  cursor: pointer;
  z-index: 5;
  -webkit-tap-highlight-color: transparent;
}

.mob-toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--header-color-dark);
  border-bottom: 2px solid var(--header-color-dark);
  transform: translate(-50%, -70%) rotate(45deg);
  transition: transform 0.25s ease, border-color 0.25s ease;
}

.menu-item-has-children.is-open > .mob-toggle::after {
  transform: translate(-50%, -30%) rotate(-135deg);
  border-color: var(--header-color-accent);
}

.mobile-nav .menu-item-has-children > a {
  padding-right: 48px !important;
}

/* Sub-menu — works for any nesting depth */
.mobile-nav__menu .sub-menu {
  list-style: none;
  margin: 0;
  padding: 0 0 0 16px;
  display: none;
}

.mobile-nav__menu .menu-item-has-children.is-open > .sub-menu {
  display: block;
}

.mobile-nav__menu .sub-menu .menu-item > a {
  display: flex;
  align-items: center;
  padding: 12px 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--header-color-dark);
  text-decoration: none;
  border-bottom: 1px solid rgba(13, 19, 23, 0.06);
}

.mobile-nav__menu .sub-menu .menu-item > a:hover {
  color: var(--header-color-accent);
}

.mobile-nav__menu .sub-menu .menu-item-has-children.is-open > a {
  color: var(--header-color-accent);
}

/* Level 3 */
.mobile-nav__menu .sub-menu .sub-menu {
  padding-left: 16px;
}

.mobile-nav__menu .sub-menu .sub-menu .menu-item > a {
  font-size: 14px;
  font-weight: 400;
  padding: 10px 0;
  border-bottom: 1px solid rgba(13, 19, 23, 0.04);
}

/* Hide lang switcher from mobile nav menu list — it's in the header bar now */
.mobile-nav .menu-item-lang-switcher {
  display: none;
}

/* Mobile phone button */
.mobile-nav .phone-btn-menu > a {
  display: flex;
  justify-content: center;
  padding: 12px 24px !important;
  border: 1px solid var(--header-color-dark) !important;
  font-size: 14px;
  font-weight: 500;
  color: var(--header-color-dark) !important;
  margin-top: 24px;
  text-align: center;
}

/* ---- Header lang switcher (mobile only) ---- */
.header-lang-mobile__btn {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--header-color-dark);
  padding: 4px 0;
  white-space: nowrap;
}

.header-lang-mobile__btn svg {
  transition: transform 0.2s ease;
}

.header-lang-mobile__btn.is-open svg {
  transform: rotate(180deg);
}

.header-lang-mobile__dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 80px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(13, 19, 23, 0.12);
  list-style: none;
  margin: 0;
  padding: 4px 0;
  display: none;
  z-index: 10;
}

.header-lang-mobile__btn.is-open + .header-lang-mobile__dropdown {
  display: block;
}

.header-lang-mobile__dropdown li {
  list-style: none;
}

.header-lang-mobile__dropdown a {
  display: block;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--header-color-dark);
  text-decoration: none;
}

.header-lang-mobile__dropdown a:hover {
  color: var(--header-color-accent);
}

/* =============================================================================
   RESPONSIVE — show burger, hide desktop nav
============================================================================= */
@media (max-width: 1080px) {
  .site-header__nav {
    display: none;
  }
  .site-header__burger {
    display: flex;
    margin-left: auto;
  }
  .header-lang-mobile {
    display: block;
    position: relative;
    margin-left: 16px;
  }
  .site-header {
    background-color: var(--header-color-white) !important;
    box-shadow: 0 1px 0 rgba(13, 19, 23, 0.08) !important;
    transform: none !important;
  }
  .site-header .site-header__logo-img--white {
    display: none !important;
  }
  .site-header .site-header__logo-img--dark {
    display: block !important;
  }
  .site-header__burger {
    color: var(--header-color-dark) !important;
  }
  body,
  body.et_fixed_nav,
  body.home,
  body.home.et_fixed_nav,
  body.page-id-185,
  body.page-id-185.et_fixed_nav,
  body.page-id-505,
  body.page-id-505.et_fixed_nav,
  body.page-id-590,
  body.page-id-590.et_fixed_nav,
  body.page-id-628,
  body.page-id-628.et_fixed_nav {
    padding-top: var(--header-height) !important;
  }
  .site-header__container {
    padding: 0 24px;
  }
}
/* ── Local_service FAQ toggles — reliable styling (Divi per-module CSS on imported posts
      regenerates incompletely; force the intended look on every toggle). ── */
body.single-local_service .et_pb_toggle {
  border: 0 !important;
  border-bottom: 2px solid #D1D1D1 !important;
  background-color: transparent !important;
  padding: 25px 20px 25px 0 !important;
  box-shadow: none !important;
}

body.single-local_service .et_pb_toggle .et_pb_toggle_title,
body.single-local_service .et_pb_toggle_close .et_pb_toggle_title,
body.single-local_service .et_pb_toggle_open .et_pb_toggle_title {
  font-family: "DIN Condensed", "Oswald", Helvetica, Arial, sans-serif !important;
  font-weight: 700 !important;
  font-size: 40px !important;
  color: #0D1317 !important;
  line-height: 1.1em !important;
}

@media (max-width: 980px) {
  body.single-local_service .et_pb_toggle .et_pb_toggle_title {
    font-size: 28px !important;
  }
}
/* ── Hero title (.service-title-h1, an <h2>): the section H2s render large (80px, like the
      parent practice pages), but the hero is a long multi-word string ("Personal Injury
      Attorney in {City}") that looks oversized at the raw Divi ~96px. Cap ONLY the hero so
      it reads in fewer lines; section H2s are NOT inside .service-title-h1 and stay 80px. ── */
body.single-local_service .service-title-h1 h1,
body.single-local_service .service-title-h1 h2 {
  font-size: 64px !important;
  line-height: 0.98em !important;
}

@media (max-width: 980px) {
  body.single-local_service .service-title-h1 h1,
  body.single-local_service .service-title-h1 h2 {
    font-size: 48px !important;
  }
}
@media (max-width: 767px) {
  body.single-local_service .service-title-h1 h1,
  body.single-local_service .service-title-h1 h2 {
    font-size: 34px !important;
  }
}
/* ── Long-form left H1 ("Personal Injury Attorney in {City}", et_pb_text_32) renders
      in a light weight; make it bold (700) to match the section H2s. ── */
body.single-local_service .et_pb_text_32 h1,
body.single-local_service .et_pb_text_32 h1 strong {
  font-weight: 700 !important;
}

/* ── Hero subhead (.service-semibold-p, an <h5>): the imported local_service module
      ships no font rule, so match the other service pages' subhead exactly —
      Inter 700, 20px (cf. /car-accidents/ .et_pb_text_2 h5). ── */
body.single-local_service .service-semibold-p h5,
body.single-local_service .service-semibold-p {
  font-family: "Inter", Helvetica, Arial, Lucida, sans-serif !important;
  font-weight: 700 !important;
}

/* ── Internal links inside the local_service SEO long-form (.ds-longform) read as
      plain text otherwise; make them visibly links in the brand gold. ── */
body.single-local_service .ds-longform a,
body.single-local_service .ds-longform a:link,
body.single-local_service .ds-longform a:visited {
  color: #b89f1f !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
  font-weight: 700 !important;
}

body.single-local_service .ds-longform a:hover {
  color: #0D1317 !important;
}

/* ── Same brand-gold treatment for the SEO long-form internal links on the
      service / practice pages (post_type=page, all languages EN/RU/ES/CR). The
      long-form section's text modules carry module_class="ds-longform". ── */
.ds-longform a,
.ds-longform a:link,
.ds-longform a:visited,
.et_pb_text.ds-longform .et_pb_text_inner a,
#page-container .et_pb_text.ds-longform .et_pb_text_inner a,
#page-container .et_pb_text.ds-longform .et_pb_text_inner a:link,
#page-container .et_pb_text.ds-longform .et_pb_text_inner a:visited {
  color: #b89f1f !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
  font-weight: 700 !important;
}

.ds-longform a:hover,
#page-container .et_pb_text.ds-longform .et_pb_text_inner a:hover {
  color: #0D1317 !important;
}

/* ── Long-form SEO body weight: normalize the whole block to the site body
      weight (Divi global Inter 600). Some long-forms had modules set to Inter
      500 AND text wrapped in inline font-weight:400 spans, so they rendered
      thinner than other pages. Override the inline spans too so every long-form
      reads at a consistent 600. Links stay 700 (rule below wins by specificity). ── */
#page-container .et_pb_text.ds-longform .et_pb_text_inner,
#page-container .et_pb_text.ds-longform .et_pb_text_inner p,
#page-container .et_pb_text.ds-longform .et_pb_text_inner li,
#page-container .et_pb_text.ds-longform .et_pb_text_inner span {
  font-weight: 600 !important;
}

#page-container .et_pb_text.ds-longform .et_pb_text_inner a,
#page-container .et_pb_text.ds-longform .et_pb_text_inner a span {
  font-weight: 700 !important;
}

/* ── "Approach" card titles (Individual strategy / Continuous support / Maximum
      compensation) render in dark text modules; their markup is inconsistent
      (<b> on only the first), so force the card titles bold wherever the section
      appears. Only the approach cards use dark-layout <h3>. ── */
.et_pb_bg_layout_dark .et_pb_text_inner h3,
.et_pb_text_inner h3 b,
.et_pb_text_inner h3 strong {
  font-weight: 700 !important;
}

/* ── RU local pages: long-form section H2/H3 render at near-H1 size (Cyrillic
      makes it look oversized) — shrink them. Scoped to RU so the live EN pages
      are untouched. ── */
html[lang=ru] body.single-local_service .ds-longform h2,
html[lang=ru] body.single-local_service .ds-longform h2 strong,
html[lang=ru] body.single-local_service .ds-longform h3,
html[lang=ru] body.single-local_service .ds-longform h3 strong {
  font-size: 32px !important;
  line-height: 1.2 !important;
}

@media (max-width: 767px) {
  html[lang=ru] body.single-local_service .ds-longform h2,
  html[lang=ru] body.single-local_service .ds-longform h2 strong {
    font-size: 26px !important;
  }
}
/* ── RU local pages: "How we handle" card titles (modules 18/20/22; the 01/02/03
      numbers are 17/19/21 and stay) — long Cyrillic words ("Профессиональные
      переговоры") overflow, so shrink the titles to fit. ── */
html[lang=ru] body.single-local_service .et_pb_text_18 .et_pb_text_inner h3,
html[lang=ru] body.single-local_service .et_pb_text_20 .et_pb_text_inner h3,
html[lang=ru] body.single-local_service .et_pb_text_22 .et_pb_text_inner h3 {
  font-size: 42px !important;
  line-height: 1.1 !important;
}

/* ── RU local headings must never break a word mid-character (Divi sets
      overflow-wrap:break-word, which orphaned the last letter — e.g. the CTA
      "Не откладывайт/е" because that heading's text module is narrower on the
      local pages than on the practice pages). Keep whole words; they fit the
      wider column. ── */
html[lang=ru] body.single-local_service h1,
html[lang=ru] body.single-local_service h2,
html[lang=ru] body.single-local_service h3 {
  overflow-wrap: normal !important;
  word-break: normal !important;
}

/* ── Local-service "case cards" row carries the (otherwise undefined) .ds-flex-grid
      class. Programmatically-created RU posts don't get Divi's per-post column-width
      CSS, so the columns collapse. Define .ds-flex-grid as an explicit grid so the
      cards render correctly regardless of Divi's per-post CSS generation. ── */
body.single-local_service .ds-flex-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

body.single-local_service .ds-flex-grid > .et_pb_column {
  width: auto !important;
  margin: 0 !important;
  float: none !important;
}

@media (max-width: 980px) {
  body.single-local_service .ds-flex-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  body.single-local_service .ds-flex-grid {
    grid-template-columns: 1fr;
  }
}
/* ── RU local pages: match the RU practice pages (e.g. /ru/practice/car-accidents/).
      Section H2s stay at the natural 60px and case cards at 42px (same as the
      practice page); ONLY the two elements that rendered LARGER than the practice
      page are brought down to the practice size: the hero (.service-title-h1, was
      64px) and the "personalized solutions" title (.solutions__title, was 80px) →
      60px. RU-scoped, so the live EN pages are untouched. ── */
html[lang=ru] body.single-local_service .service-title-h1 h1,
html[lang=ru] body.single-local_service .service-title-h1 h2 {
  font-size: 60px !important;
  line-height: 1.05em !important;
}

@media (max-width: 980px) {
  html[lang=ru] body.single-local_service .service-title-h1 h1,
  html[lang=ru] body.single-local_service .service-title-h1 h2 {
    font-size: 44px !important;
  }
}
@media (max-width: 767px) {
  html[lang=ru] body.single-local_service .service-title-h1 h1,
  html[lang=ru] body.single-local_service .service-title-h1 h2 {
    font-size: 34px !important;
  }
}
/* "Мы предлагаем … юридические решения" (.solutions__title) — components.css sets
   80px via a high-specificity rule; bring it to the practice page's 60px. */
html[lang=ru] body.single-local_service .solutions__title,
html[lang=ru] .et-db #et-boc .et-l h2.solutions__title {
  font-size: 60px !important;
  line-height: 1.05em !important;
}

/* ── RU local pages: FORCE the full heading type-scale to MATCH the RU service /
      practice template (e.g. /ru/practice/car-accidents/). The programmatically-
      created local_service posts get inconsistent Divi per-module CSS — section
      H2s render 80px on prod vs 60px on the service pages — so set them explicitly
      instead of relying on Divi's generation. RU-scoped; EN pages untouched. ── */
/* section headings: we-handle / how-we-handle / free-eval / compensation / FAQ /
   time-limited / practice-areas  →  60px (service-page size) */
html[lang=ru] body.single-local_service .et_pb_text_inner h2 {
  font-size: 60px !important;
  line-height: 1.05em !important;
}

@media (max-width: 980px) {
  html[lang=ru] body.single-local_service .et_pb_text_inner h2 {
    font-size: 44px !important;
  }
}
@media (max-width: 767px) {
  html[lang=ru] body.single-local_service .et_pb_text_inner h2 {
    font-size: 32px !important;
  }
}
/* case-card titles  →  42px (service-page size) */
html[lang=ru] body.single-local_service .ds-flex-grid h3 {
  font-size: 42px !important;
  line-height: 1.05em !important;
}

/* in-article long-form subheads stay small (doubled class wins over the H2 rule above) */
html[lang=ru] body.single-local_service .ds-longform.ds-longform h2,
html[lang=ru] body.single-local_service .ds-longform.ds-longform h2 strong,
html[lang=ru] body.single-local_service .ds-longform.ds-longform h3,
html[lang=ru] body.single-local_service .ds-longform.ds-longform h3 strong {
  font-size: 30px !important;
  line-height: 1.25 !important;
}

/* ── EN heading-size flattening REMOVED 2026-06-16: EN local service pages must render
      at the SAME larger heading scale as their parent practice pages (section H2 80px,
      case-card H3 / longform subheads at Divi defaults), not the previous 60px/42px/30px.
      Divi's per-module CSS supplies the larger sizes (verified to match /practice/*).
      RU local pages keep their own RU-scoped flatten above. ── */
/* never break a word mid-character on any local page heading */
body.single-local_service h1,
body.single-local_service h2,
body.single-local_service h3 {
  overflow-wrap: normal !important;
  word-break: normal !important;
}

/* solutions title 60px override REMOVED 2026-06-16 (EN) — let it render at the parent
   practice-page size (80px). RU keeps its own scoped rule above. */
/* ── CTA "Don't delay / Не откладывайте" heading module is hard-capped at
      max_width:400px in the Divi module — in RU the long heading wraps into 4
      cramped lines. Let it fill its column (≈610px) so it reads in 2 lines. ── */
body.single-local_service .et_pb_text_28 {
  max-width: none !important;
}

/* ── Combined Ukrainian/Russian switcher entry (client decision, Jul 2026):
      two flags side by side, Ukrainian FIRST, one link → /ru/ pages. ── */
.lang-flags {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 4px;
  margin-right: 8px;
  vertical-align: -1px;
}
.lang-flags .lang-flag {
  flex: 0 0 auto;
  width: 16px;
  min-width: 16px;
  height: 11px;
  display: block;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(13, 19, 23, 0.18);
}

/* Combined UA/RU entry is long — keep switcher dropdown items on one line. */
.lang-switcher-dropdown li a {
  white-space: nowrap;
  display: flex;
  align-items: center;
}

.lang-switcher-dropdown {
  width: max-content;
}

.header-lang-mobile__dropdown {
  width: max-content;
}
.header-lang-mobile__dropdown li a {
  white-space: nowrap;
  display: flex;
  align-items: center;
}

/* =============================================================================
   CUSTOM FOOTER
   Two-part layout: logo (left ~35%) | columns (right ~65%)
============================================================================= */
footer.et-l.et-l--footer {
  display: none;
}

.site-footer {
  background-color: var(--header-color-dark, #0d1317);
  color: #fff;
  font-size: 16px;
  line-height: 1.5;
}

/* ---- Main section ---- */
.site-footer__main {
  padding: 48px 0 0;
}

.site-footer__container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 80px;
}

/* Two-part layout: logo left, columns right */
.site-footer__main > .site-footer__container {
  display: flex;
  align-items: flex-start;
}

/* ---- Logo area (left ~35%) ---- */
.site-footer__logo {
  flex: 0 1 50%;
  padding-top: 8px;
}

.site-footer__logo img {
  height: 56px;
  width: auto;
  display: block;
}

/* ---- Columns area (right ~65%) — 3-column grid ---- */
.site-footer__columns {
  flex: 0 1 50%;
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 40px;
  padding-top: 8px;
}

/* ---- Column headings — Inter Semi Bold, 14px, #868686, uppercase ---- */
.site-footer__heading {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #868686;
  margin: 0 0 10px;
  line-height: 24px;
}

.site-footer__heading--mt {
  margin-top: 32px;
}

/* ---- Link lists — Inter Tight Medium, 16px, white ---- */
.site-footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer__list li {
  font-family: "Inter Tight", "Inter", sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: #fff;
  margin-bottom: 6px;
}

.site-footer__list a {
  color: #fff;
  text-decoration: none;
  transition: color 0.2s ease;
}

.site-footer__list a:hover {
  color: var(--header-color-accent, #ebd14a);
}

/* ---- Bottom bar ---- */
.site-footer__bottom {
  margin-top: 48px;
  padding: 24px 0;
}

.site-footer__bottom > .site-footer__container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.site-footer__bottom-left {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.site-footer__bottom-left span,
.site-footer__bottom-left a,
.site-footer__bottom-right span,
.site-footer__bottom-right a {
  font-family: "Inter Tight", "Inter", sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 22px;
  color: #868686;
  text-decoration: none;
  transition: color 0.2s ease;
}

.site-footer__bottom-left a:hover,
.site-footer__bottom-right a:hover {
  color: #fff;
}

/* ---- Footer responsive ---- */
@media (max-width: 980px) {
  .site-footer__container {
    padding: 0 24px;
  }
  .site-footer__main > .site-footer__container {
    flex-direction: column;
    gap: 40px;
  }
  .site-footer__logo {
    flex: none;
  }
  .site-footer__columns {
    flex: none;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
}
@media (max-width: 600px) {
  .site-footer__columns {
    grid-template-columns: 1fr;
  }
  .site-footer__bottom > .site-footer__container {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }
}
/* =============================================================================
   CUSTOM POPUPS — replaces "Popups for Divi" plugin
============================================================================= */
.site-popup {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(13, 19, 23, 0.4);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s;
}

.site-popup.is-open {
  opacity: 1;
  visibility: visible;
}

/* ---- Panel ---- */
.site-popup__panel {
  position: relative;
  background: #ebd14a;
  max-width: 1300px;
  width: calc(100% - 48px);
  max-height: 85vh;
  overflow-y: auto;
  transform: translateY(20px);
  transition: transform 0.3s ease;
  z-index: 1;
  cursor: default;
}

.site-popup.is-open .site-popup__panel {
  transform: translateY(0);
}

/* ---- Split layout: left text + right form ---- */
.site-popup__panel--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 0;
}

/* Left side */
.site-popup__left {
  padding: 60px 55px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.site-popup__title {
  font-family: "DIN Condensed", "Oswald", "Inter", sans-serif;
  font-size: 56px;
  font-weight: 700;
  line-height: 1.05;
  color: #0d1317;
  margin: 0 0 20px;
  text-transform: none;
}

.site-popup__desc {
  font-size: 16px;
  line-height: 1.5;
  color: #0d1317;
  margin: 0 0 32px;
}

.site-popup__contact-title {
  font-size: 20px;
  font-weight: 700;
  color: #0d1317;
  margin: 0 0 16px;
}

.site-popup__contact-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  color: #0d1317;
}

.site-popup__contact-row svg {
  flex-shrink: 0;
}

.site-popup__contact-row a {
  color: #0d1317;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-size: 16px;
  font-weight: 500;
}

.site-popup__contact-row a:hover {
  text-decoration: none;
}

/* Right side — form */
.site-popup__right {
  padding: 60px 55px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ---- Close button (X) ---- */
.site-popup__close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 40px;
  height: 40px;
  border: none;
  background: none;
  color: #0d1317;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  z-index: 2;
  transition: opacity 0.2s ease;
}

.site-popup__close:hover {
  opacity: 0.6;
}

/* ---- Gravity Forms inside popup ---- */
.site-popup .gform_wrapper {
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
}

.site-popup .gform_title,
.site-popup .gform_description {
  display: none !important;
}

.site-popup .gform_body {
  padding: 0 !important;
}

/* Reset Gravity Forms field wrappers */
.site-popup .gform_fields {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0 16px !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

.site-popup .gfield {
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Half-width fields (First Name + Last Name row) */
.site-popup .gfield--width-half,
.site-popup .gfield.gf_left_half,
.site-popup .gfield.gf_right_half {
  width: calc(50% - 8px) !important;
  flex: 0 0 calc(50% - 8px) !important;
}

/* Hide labels — use placeholders */
.site-popup .gfield label.gfield_label,
.site-popup .gfield .ginput_complex label {
  display: none !important;
}

/* Inputs */
/* Triple-class specificity to override Divi's et-core-unified height: 38px !important */
.site-popup .gform_wrapper .gfield input:not([type=submit]),
.site-popup .gform_wrapper .gfield textarea,
.site-popup .gform_wrapper .gfield select,
.site-popup .gform_wrapper input[type=text],
.site-popup .gform_wrapper input[type=email],
.site-popup .gform_wrapper input[type=tel],
.site-popup .gform_wrapper input[type=number],
.site-popup .gform_wrapper select {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  border: none !important;
  border-bottom: 1.5px solid #0d1317 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  padding: 14px 0 !important;
  margin: 0 !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  color: #0d1317 !important;
  outline: none !important;
  box-shadow: none !important;
  line-height: normal !important;
  display: block !important;
}

/* Select — keep native arrow */
.site-popup .gform_wrapper .gfield select,
.site-popup .gform_wrapper select {
  -webkit-appearance: menulist !important;
  appearance: menulist !important;
}

/* Non-select inputs — no appearance */
.site-popup .gform_wrapper .gfield input:not([type=submit]),
.site-popup .gform_wrapper .gfield textarea {
  -webkit-appearance: none !important;
  appearance: none !important;
}

.site-popup .gfield textarea {
  min-height: 100px !important;
  resize: vertical;
}

.site-popup .gfield input::placeholder,
.site-popup .gfield textarea::placeholder {
  color: #0d1317 !important;
  opacity: 1 !important;
}

.site-popup .gfield select {
  color: #0d1317 !important;
}

/* Validation resets */
.site-popup .gfield_error input,
.site-popup .gfield_error textarea {
  border-color: #c00 !important;
}

.site-popup .validation_message {
  padding: 4px 0 !important;
  font-size: 12px !important;
}

/* Submit button */
.site-popup .gform_footer,
.site-popup .gform_page_footer {
  padding: 0 !important;
  margin: 16px 0 0 !important;
}

.site-popup .gform_button,
.site-popup .gform_wrapper input[type=submit] {
  background: #0d1317 !important;
  color: #fff !important;
  border: none !important;
  padding: 16px 40px !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  border-radius: 0 !important;
  transition: opacity 0.2s ease !important;
}

.site-popup .gform_button:hover,
.site-popup .gform_wrapper input[type=submit]:hover {
  opacity: 0.85 !important;
}

/* ---- Popup responsive ---- */
@media (max-width: 768px) {
  .site-popup__panel--split {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .site-popup__panel {
    max-height: 100vh;
    overflow-y: auto;
  }
  .site-popup__left {
    padding: 48px 24px 24px;
  }
  .site-popup__right {
    padding: 24px 24px 48px;
  }
  .site-popup__title {
    font-size: 36px;
  }
  .site-popup__close {
    top: 16px;
    right: 16px;
  }
}
/* =============================================================================
   Divi legacy-content overrides (child theme)
   Small, targeted fixes for Divi-built page sections that can't be solved in
   the builder cleanly. Loaded site-wide after header/footer CSS.
   ============================================================================= */
/* Legacy Divi custom-header remnants — old `.white-header` / `.header-black` /
   `.header-top` markup still renders on some Divi templates (e.g. blog posts).
   The custom header (#site-header) replaces it, so keep these hidden. Ported
   from CodeKit block 4624 "Fixes new header" so that block can be retired.
   (4624's `single-post`/`category` top-padding was redundant — `body.et_fixed_nav`
   already gets it from header.css.) */
.header-top,
.white-header,
.header-black {
  display: none !important;
}

/* -----------------------------------------------------------------------------
   Homepage stats block — "23 years of experience / 16 qualified professionals /
   5 areas of practice / 5 service languages" (Divi Number Counter row,
   .custom-2x2-grid).

   Target = the approved mockup: big number on the LEFT, title to its RIGHT,
   top-aligned, title wrapping to (up to) two lines.

   Mobile problem before this fix: the title (a flex child) refused to shrink
   below its longest word, so "qualified professionals" / "service languages"
   ran off the screen edge; the section's 80/60px vertical padding also left
   big empty bands.

   Mobile fix (<=767px): keep the number-beside-title layout, top-align it, and
   give the title `min-width:0` + word wrapping so it stays inside its column
   instead of overflowing the viewport. Tighten the surrounding padding.
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {
  /* trim the empty top/bottom bands around the stats section */
  .et_pb_section:has(.custom-2x2-grid) {
    padding-top: 36px !important;
    padding-bottom: 28px !important;
  }
  /* widen the usable column width a touch on phones */
  .custom-2x2-grid.et_pb_row {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  /* number beside title, top-aligned (matches the mockup) */
  .custom-2x2-grid .et_pb_number_counter {
    display: flex !important;
    flex-direction: row !important;
    /* align-items: flex-start !important; */
    gap: 10px !important;
    padding: 6px 0 !important; /* was 20px 0 */
  }
  /* margin-left:38px is set by Divi with high specificity — out-specify it
     with #page-container so the counters sit flush-left */
  #page-container .custom-2x2-grid .et_pb_number_counter {
    margin-left: 0 !important;
  }
  /* big number, like the mockup; don't let it shrink */
  .custom-2x2-grid .et_pb_number_counter .percent {
    flex: 0 0 auto !important;
    margin: 0 !important;
  }
  .custom-2x2-grid .et_pb_number_counter .percent,
  .custom-2x2-grid .et_pb_number_counter .percent-value {
    font-size: 80px !important;
    line-height: 0.9 !important;
  }
  /* title beside the number: min-width:0 lets this flex item wrap its long
     words and stay inside the column instead of overflowing the screen */
  .custom-2x2-grid .et_pb_number_counter .title {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 20px !important;
    line-height: 1.15 !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
  }
  /* tighten the gap between grid rows */
  .custom-2x2-grid .et_pb_column {
    margin-bottom: 18px !important;
  }
}
/* -----------------------------------------------------------------------------
   3-column flex grid for Divi rows (.ds-flex-grid.et_pb_row)
   Ported verbatim from CodeKit block 3428 ("SCSS output"). Turns a Divi row
   tagged .ds-flex-grid into a responsive 3-up CSS grid whose cards can
   bottom-align a CTA (.ds-bottom-align). Divi-legacy (leans on .et_pb_*), so it
   lives here in divi-overrides rather than the Divi-free component layer. Only
   the trailing sourceMappingURL comment was stripped.
   --------------------------------------------------------------------------- */
body .et_pb_section .ds-flex-grid.et_pb_row {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 16px !important;
  max-width: 1440px !important;
  width: 100% !important;
  padding: 10px 32px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
  float: none !important;
}

body .ds-flex-grid.et_pb_row::before, body .ds-flex-grid.et_pb_row::after {
  display: none !important;
  content: none !important;
}

body .ds-flex-grid > .et_pb_column.card-elem {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  float: none !important;
  display: flex !important;
  flex-direction: column !important;
}

body .ds-flex-grid .card-elem .ds-bottom-align {
  margin-top: auto !important;
}

@media (max-width: 1079px) {
  body .et_pb_section .ds-flex-grid.et_pb_row {
    grid-template-columns: 1fr !important;
  }
}