/* ============================================================
   Smith & Weidinger — page section styling.

   Elementor owns structure and content; this file owns the
   composition the builder's controls cannot express — layered
   backgrounds, multi-stop washes, absolutely-placed art.
   Each block is keyed to a class applied in the Elementor
   element's "CSS Classes" field.
   ============================================================ */

/* ------------------------------------------------------------
   HERO
   The supplied background art is built for this composition:
   flat forest green on the left for type, Colorado context
   (Front Range, Denver, courthouse colonnade) on the right,
   with the team cut-out over the right half. Type stays
   dominant at every width.
   ------------------------------------------------------------ */
.sw-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/* Forest wash: keeps the headline side solid and lets the art breathe on the
   right. Five stops — more than Elementor's two-stop gradient control can
   express, which is why it lives here rather than in the builder. */
.sw-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    var(--sw-forest-deep) 0%,
    var(--sw-forest-deep) 34%,
    rgba(10, 33, 28, 0.82) 50%,
    rgba(10, 33, 28, 0.35) 72%,
    rgba(10, 33, 28, 0.55) 100%
  );
}

/* Lift Elementor's own children above the wash. Covers both the boxed
   (.e-con-inner) and full-width container shapes.
   The team cut-out is excluded: it is absolutely positioned, and this rule's
   higher specificity (0,2,0) would otherwise drag it back into the flow. */
.sw-hero > .e-con-inner,
.sw-hero > .elementor-element:not(.sw-hero-team) { position: relative; z-index: 1; }

.sw-hero-copy { max-width: 42rem; }

/* The eyebrow's trailing copper hairline, from the mockup. */
.sw-hero-eyebrow .elementor-heading-title { display: inline-flex; align-items: center; gap: 0.75rem; }
.sw-hero-eyebrow .elementor-heading-title::after {
  content: "";
  display: inline-block;
  width: 2.25rem;
  height: 1px;
  background: var(--sw-copper-light);
}

/* The brand rule under the headline. Decorative and repeated across every
   section, so it is drawn rather than placed as an element. */
.sw-rule-after .elementor-heading-title::after {
  content: "";
  display: block;
  width: 3.5rem;
  height: 2px;
  background: var(--sw-copper-light);
  margin-top: 2rem;
}

/* The attorneys. Supplied photography, used as shot — anchored bottom-right so
   the group stands on the section floor. Desktop only: below 1025px the art
   would crowd the headline, and the mockup drops it there too.

   The box is sized explicitly (56% x 86%) rather than shrink-to-fit. Left to
   width:auto the wrapper sizes to the image's natural aspect at full height and
   overruns the headline, and a percentage max-width on it is overridden by
   Elementor's own max-width:100%. object-fit then scales the photo inside that
   box and object-position pins it to the floor.

   Elementor 4 emits optimized markup: the <img> is a DIRECT child of the widget
   div — there is no .elementor-widget-container or <figure> to target. */
.elementor .sw-hero-team {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 1;
  display: none;
  width: 56%;
  max-width: none;
  height: 86%;
  pointer-events: none;
}
.elementor .sw-hero-team img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  object-position: bottom right;
}

/* Specificity here must match the rule above, or `display:none` wins and the
   cut-out never appears. */
@media (min-width: 1025px) {
  .elementor .sw-hero-team { display: block; }
}

/* The copy always sits above the art, whatever the DOM order.
   Must out-rank `.sw-hero > .elementor-element:not(.sw-hero-team)` (0,3,0)
   above, so it qualifies with .elementor-element too and comes later. */
.sw-hero > .elementor-element.sw-shell { z-index: 2; }

/* The reassurance line under the actions. */
.sw-hero-assure .elementor-icon-list-text {
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sw-on-forest-muted);
}
.sw-hero-assure .elementor-icon-list-icon svg { fill: var(--sw-on-forest-muted); }

/* --- hero rhythm --------------------------------------------
   Vertical spacing lives here rather than in per-widget Elementor
   margins so the whole section's rhythm can be read and tuned in
   one place. */
.elementor .sw-hero-h1 .elementor-heading-title { font-size: clamp(2.35rem, 5vw, 4rem); }
.sw-hero-h1     { margin-top: 1.5rem; }
.sw-hero-lede   { margin-top: 1.75rem; }
/* The measure stops short of the cut-out.
   Elementor caps every widget with `.elementor.elementor .e-con > .elementor-widget
   { max-width: 100% }` — it doubles `.elementor` on purpose to make that hard to
   override, giving (0,4,0). Any width constraint on a widget has to match that
   shape and come later, or it silently loses. */
.elementor.elementor .e-con > .sw-hero-lede { max-width: 34rem; }
.sw-hero-actions { margin-top: 2.25rem; }
.sw-hero-assure { margin-top: 1.5rem; }

/* ------------------------------------------------------------
   SITE HEADER
   Light bone bar, logo left, nav centre, actions right. Kept
   understated on purpose: the header's job is orientation and one
   clear way to reach an attorney, not to compete with the hero.
   ------------------------------------------------------------ */
.sw-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: color-mix(in oklab, var(--sw-bone) 95%, transparent);
  border-bottom: 1px solid var(--sw-line);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.elementor .sw-header-bar { min-height: 6rem; }
@media (max-width: 1024px) { .elementor .sw-header-bar { min-height: 5rem; } }

.elementor .sw-logo img { height: 2.75rem; width: auto; }
@media (min-width: 1025px) { .elementor .sw-logo img { height: 3.25rem; } }

/* Primary nav — the PA mega-menu widget, brought back to the brand's
   understated link treatment. */
/* Specificity has to clear Elementor's kit, which colours these with its own
   global text value (#7A7A7A) from a rule the theme stylesheet loads before. */
.elementor .sw-header .sw-nav li a.premium-menu-link {
  font-family: var(--sw-font-sans);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--sw-ink);
  text-transform: none;
  letter-spacing: normal;
}
.elementor .sw-header .sw-nav li a.premium-menu-link:hover { color: var(--sw-forest); }

/* Current-page underline, from the mockup.
   Excluding hash links is deliberate: "/#practice-areas" and friends share the
   homepage URL, so WordPress marks all of them current-menu-item at once and
   five items would underline simultaneously. */
.elementor .sw-header .sw-nav li.current-menu-item > a.premium-menu-link:not([href*="#"]):not(.premium-sub-menu-link),
.elementor .sw-header .sw-nav li.current-menu-ancestor > a.premium-menu-link:not([href*="#"]) {
  color: var(--sw-forest);
  box-shadow: inset 0 -2px 0 0 var(--sw-copper);
}

/* --- Dropdowns -------------------------------------------------
   The nav went two-level when Criminal Defense and Personal Injury
   replaced the single "Practice Areas" link. Two things needed saying:
   the top row must stay one line, and the panel must stop being the
   widget's bare white box. */

/* "Criminal Defense" and "Personal Injury" wrap to two lines otherwise,
   and the bar loses its horizon. */
.elementor .sw-header .sw-nav .premium-main-nav-menu > li > a.premium-menu-link { white-space: nowrap; }

/* The caret is a hint, not a control — it reads at the weight of a comma. */
.elementor .sw-header .sw-nav .premium-dropdown-icon {
  margin-left: 0.375rem;
  font-size: 0.6875rem;
  opacity: 0.55;
}

/* A card under the bar: bone hairline, the same radius as the site's cards,
   and a shadow lifted from the forest rather than neutral black.
   Scoped away from the toggle menu, which stacks the same markup inline and
   has no bar to hang off — it gets the indented treatment further down. */
.elementor .sw-header .sw-nav:not(.premium-hamburger-menu) .premium-sub-menu {
  min-width: 15rem;
  padding: 0.5rem 0;
  /* The widget hangs the panel off the link, which ends 18px short of the bar;
     the card's top corners were being crossed by the header's hairline. Drop it
     to the bar's own edge. */
  margin-top: 1.125rem;
  background-color: var(--sw-card);
  border: 1px solid var(--sw-line);
  border-radius: var(--sw-r-md);
  box-shadow: 0 18px 40px -20px rgba(10, 33, 28, 0.35);
}

/* Sub-items sit a step quieter than the top row — muted until hovered. */
/* That 18px is now dead space the cursor has to cross, and the panel closes on
   leaving the item. The bridge belongs to the panel, so the pointer never
   actually leaves the item's subtree. */
.elementor .sw-header .sw-nav:not(.premium-hamburger-menu) .premium-sub-menu::before {
  content: "";
  position: absolute;
  inset: -1.125rem 0 auto 0;
  height: 1.125rem;
}

.elementor .sw-header .sw-nav li a.premium-sub-menu-link {
  padding: 0.5rem 1.125rem;
  font-size: 0.875rem;
  color: var(--sw-ink-muted);
  white-space: nowrap;
}
/* Current page: a quiet bone bar, so "you are here" never competes with hover. */
.elementor .sw-header .sw-nav li.current-menu-item > a.premium-sub-menu-link {
  color: var(--sw-forest);
  background-color: var(--sw-bone-2);
}
/* Hover/focus: solid forest bar, white text. The widget's own hover colour
   (#fff, from post-43.css at 0,6,0) used to land on our bone background and
   the label vanished — the doubled .sw-nav clears it at 0,8,1. */
.elementor .sw-header .sw-nav.sw-nav .premium-main-nav-menu .premium-sub-menu-item:hover > a.premium-sub-menu-link,
.elementor .sw-header .sw-nav.sw-nav .premium-main-nav-menu .premium-sub-menu-item > a.premium-sub-menu-link:focus-visible {
  color: #FFFFFF;
  background-color: var(--sw-forest);
}

/* In the toggle menu the same list is an accordion, not a panel: no card, no
   offset, just an indent and a rule marking the children as a branch. */
.elementor .sw-header .sw-nav.premium-hamburger-menu .premium-sub-menu {
  padding: 0.25rem 0 0.25rem 0.75rem;
  border-left: 1px solid var(--sw-line);
  margin: 0 0 0.25rem 1rem;
}

/* --- The band between the hamburger and the full bar ------------
   Seven top-level items, a search, and two CTAs need ~1520px of bar.
   Below 1280 the widget hands over to its toggle menu (custom breakpoint);
   between there and 1520px the row is tightened and the phone button
   drops to its icon — the number still reads to screen readers, and it is
   repeated in the contact strip and the footer. */
@media (min-width: 1280px) and (max-width: 1519px) {
  .elementor .sw-header-bar { padding-left: 1.5rem; padding-right: 1.5rem; }
  .elementor .sw-header .sw-nav li a.premium-menu-link { font-size: 0.875rem; }
  .elementor .sw-header .sw-nav .premium-main-nav-menu > li > a.premium-menu-link {
    padding-left: 0.375rem;
    padding-right: 0.375rem;
  }
  .elementor .sw-logo img { height: 2.75rem; }
  /* The number stays readable at this width: it is the one thing in the bar
     someone is looking for. The room comes out of the button's padding and
     the gap instead. */
  .elementor .sw-header-actions .sw-btn-phone .elementor-button { padding: 0.75rem 1rem; }
  .elementor .sw-header-actions .sw-btn-phone .elementor-button-icon { margin-inline-end: 0.5rem; }
  .elementor .sw-header-bar { --gap: 1rem; }
}

.elementor .sw-header-actions { flex-shrink: 0; }
/* The header's buttons sit tighter than the hero's — a bar, not a call to arms. */
.elementor .sw-header-actions .sw-btn .elementor-button { padding: 0.75rem 1.5rem; }

/* Elementor gives every child container `width: 100%` (`.e-con { width: var(--width) }`),
   so inside a flex row one container starves its siblings — here the actions
   block took the full bar and collapsed the logo and nav to 0px. Each child of
   the bar states its own flex behaviour instead. */
.elementor .sw-header-bar > .sw-logo,
.elementor .sw-header-bar > .sw-header-actions { flex: 0 0 auto; width: auto; }
.elementor .sw-header-bar > .sw-nav { flex: 1 1 auto; width: auto; min-width: 0; }

/* ------------------------------------------------------------
   SITE FOOTER
   Deep forest. A concise CTA strip, then five columns, then the
   legal bar. Column content is authored as rich text (one editable
   block per column) and styled here.
   ------------------------------------------------------------ */
.sw-footer { background-color: var(--sw-forest-deep); }

/* Elementor gives child containers width:100%, which starves flex siblings —
   same trap as the header bar. Every direct child states its own behaviour. */
.elementor .sw-footer-cta > .elementor-element { flex: 0 1 auto; width: auto; }
.elementor .sw-footer-cols > .elementor-element { flex: 1 1 200px; width: auto; min-width: 0; }
.elementor .sw-footer-cols > .sw-footer-brand { flex: 1 1 260px; }
.elementor .sw-footer-legal > .elementor-element { flex: 0 1 auto; width: auto; }

/* --- CTA strip ------------------------------------------------ */
.sw-footer-cta { border-bottom: 1px solid var(--sw-line-forest); }
.elementor .sw-footer-cta-head {
  font-family: var(--sw-font-serif);
  font-size: clamp(1.5rem, 2.4vw, 1.95rem);
  font-weight: 500;
  line-height: 1.2;
  color: var(--sw-on-forest);
  margin: 0;
}
.elementor .sw-footer-cta-sub { margin: 0.375rem 0 0; color: var(--sw-on-forest-muted); }

.elementor .sw-footer-phone-block { padding-left: 2rem; border-left: 1px solid var(--sw-line-forest); }
.elementor .sw-footer-phone { margin: 0.25rem 0 0; }
.elementor .sw-footer-phone a {
  font-family: var(--sw-font-serif);
  font-size: 1.9rem;
  font-weight: 500;
  line-height: 1;
  color: var(--sw-on-forest);
  text-decoration: none;
}
.elementor .sw-footer-phone a:hover { color: var(--sw-copper-light); }
@media (max-width: 767px) {
  .elementor .sw-footer-phone-block { padding-left: 0; border-left: 0; }
}

/* --- columns -------------------------------------------------- */
.elementor .sw-footer-colhead {
  margin: 0 0 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--sw-line-forest);
  color: var(--sw-copper-light);
}
.elementor .sw-footer-list,
.elementor .sw-footer-offices,
.elementor .sw-legal-links { list-style: none; margin: 0; padding: 0; }
.elementor .sw-footer-list li { margin-bottom: 0.75rem; }
.elementor .sw-footer-list a,
.elementor .sw-footer-offices a {
  font-size: 0.9375rem;
  color: var(--sw-on-forest-muted);
  text-decoration: none;
  transition: color .2s ease-out;
}
.elementor .sw-footer-list a:hover { color: var(--sw-on-forest); }

.elementor .sw-footer-offices li { display: flex; flex-direction: column; margin-bottom: 1.25rem; }
.elementor .sw-office-city   { font-weight: 600; color: var(--sw-on-forest); }
.elementor .sw-office-detail { margin-top: 0.125rem; font-size: 0.875rem; color: var(--sw-on-forest-muted); }

/* --- brand column --------------------------------------------- */
.elementor .sw-footer-wordmark {
  font-family: var(--sw-font-serif);
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--sw-on-forest);
  margin: 0;
}
.elementor .sw-footer-pllc {
  margin: 0.5rem 0 0;
  padding-top: 0.5rem;
  border-top: 1px solid var(--sw-copper-light);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--sw-copper-light);
}
.elementor .sw-footer-disciplines {
  margin: 1.25rem 0 0;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sw-on-forest-muted);
}
.elementor .sw-footer-blurb {
  margin: 1.25rem 0 0;
  max-width: 20rem;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--sw-on-forest-muted);
}

/* --- legal bar ------------------------------------------------ */
.sw-footer-legal { border-top: 1px solid var(--sw-line-forest); }
.elementor .sw-footer-copy p { margin: 0; font-size: 0.875rem; color: var(--sw-on-forest-muted); }
.elementor .sw-legal-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; justify-content: center; }
.elementor .sw-legal-links a {
  font-size: 0.875rem;
  color: var(--sw-on-forest-muted);
  text-decoration: none;
}
.elementor .sw-legal-links a:hover { color: var(--sw-on-forest); }
.elementor .sw-footer-badge {
  margin: 0;
  border: 1px solid var(--sw-copper-light);
  border-radius: var(--sw-r-sm);
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sw-copper-light);
}

/* Once the columns stack, the container's `align-items: flex-start` makes each
   column shrink-to-fit, which cuts the heading rules short. Stretch them back. */
@media (max-width: 767px) {
  .elementor .sw-footer-cols > .elementor-element,
  .elementor .sw-footer-cols > .sw-footer-brand { width: 100%; flex-basis: auto; }
}

/* ============================================================
   SHARED SECTION FURNITURE
   Most sections open with the same block: eyebrow, serif H2,
   copper rule, lede. Authored as one rich-text widget so the
   whole header is edited in one place, styled here.
   ============================================================ */
.elementor.elementor .e-con > .sw-secthead { max-width: 48rem; }
.elementor .sw-secthead-center { margin-inline: auto; text-align: center; }
.elementor .sw-secthead .sw-eyebrow { margin: 0; }
.elementor .sw-secthead h2 {
  margin: 1rem 0 0;
  font-family: var(--sw-font-serif);
  font-weight: 500;
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--sw-ink);
}
.elementor .sw-secthead .sw-rule { margin-top: 1.5rem; }
.elementor .sw-secthead-center .sw-rule { margin-inline: auto; }
.elementor .sw-secthead .sw-lede { margin: 1.5rem 0 0; }

/* Section grounds. The light/dark rhythm is deliberate and runs
   header light -> hero dark -> practice light -> results light ->
   consultation light -> insights light -> locations light -> footer dark. */
.sw-bg-bone   { background-color: var(--sw-bone); }
.sw-bg-bone-2 { background-color: var(--sw-bone-2); }

/* ------------------------------------------------------------
   HERO STATS BAND
   Sits directly under the hero on the same dark ground.
   ------------------------------------------------------------ */
.sw-herostats {
  border-top: 1px solid var(--sw-line-forest);
  background-color: #061613;
}
.elementor .sw-herostats-inner > .elementor-element { flex: 1 1 160px; width: auto; min-width: 0; }
.elementor .sw-herostats-inner > .sw-herostats-lead { flex: 1 1 300px; }

.elementor .sw-herostats-lead {
  border-left: 2px solid var(--sw-copper);
  padding-left: 1.5rem;
}
.elementor .sw-herostats-lead .sw-stat-kicker {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--sw-on-forest);
}
.elementor .sw-herostats-lead p + p {
  margin: 0.375rem 0 0;
  max-width: 20rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--sw-on-forest-muted);
}
.elementor .sw-stat {
  border-left: 1px solid var(--sw-line-forest);
  padding-left: 1.5rem;
}
.elementor .sw-stat .sw-stat-figure {
  margin: 0;
  font-family: var(--sw-font-serif);
  font-size: clamp(1.6rem, 2.1vw, 2rem);
  font-weight: 500;
  line-height: 1;
  color: var(--sw-on-forest);
}
.elementor .sw-stat .sw-stat-label {
  margin: 0.5rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--sw-on-forest-muted);
}

/* ------------------------------------------------------------
   PRACTICE AREAS
   Two pillars, two journeys, one brand. Criminal Defense reads dark
   forest with courthouse architecture; Personal Injury reads warm
   bone with a Colorado roadway. The colour split IS the information
   design — a visitor should be able to tell which side is theirs
   before reading a word.
   ------------------------------------------------------------ */
.elementor .sw-practice-grid {
  border: 1px solid var(--sw-line);
  border-radius: var(--sw-r-lg);
  overflow: hidden;
}
.elementor .sw-practice-grid > .elementor-element { flex: 1 1 320px; width: auto; min-width: 0; }

.elementor .sw-pillar { position: relative; isolation: isolate; overflow: hidden; }
.elementor .sw-pillar-dark { background-color: var(--sw-forest-deep); }
.elementor .sw-pillar-light { background-color: var(--sw-bone-2); }

/* Background art sits behind a wash so the type never fights it. */
.sw-pillar-dark::before,
.sw-pillar-light::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.sw-pillar-dark::before {
  background: linear-gradient(115deg, rgba(10,33,28,0.62) 0%, rgba(10,33,28,0.88) 55%, rgba(10,33,28,0.97) 100%);
}
.sw-pillar-light::before {
  background: linear-gradient(115deg, rgba(241,239,232,0.97) 0%, rgba(241,239,232,0.90) 58%, rgba(241,239,232,0.72) 100%);
}

.elementor .sw-pillar h3 {
  margin: 0;
  font-family: var(--sw-font-serif);
  font-size: clamp(1.8rem, 2.6vw, 2.35rem);
  font-weight: 500;
  line-height: 1.2;
  color: var(--sw-ink);
}
.elementor .sw-pillar-dark h3 { color: var(--sw-on-forest); }
.elementor .sw-pillar .sw-pillar-sub {
  margin: 1rem 0 0;
  max-width: 24rem;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--sw-ink-muted);
}
.elementor .sw-pillar-dark .sw-pillar-sub { color: var(--sw-on-forest-muted); }

.elementor .sw-pillar-list { list-style: none; margin: 2.25rem 0 0; padding: 0; border-top: 1px solid var(--sw-line); }
.elementor .sw-pillar-dark .sw-pillar-list { border-top-color: var(--sw-line-forest); }
.elementor .sw-pillar-list li {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--sw-line);
}
.elementor .sw-pillar-dark .sw-pillar-list li { border-bottom-color: var(--sw-line-forest); }
.elementor .sw-pillar-list .sw-ico {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-top: 0.125rem;
  border-radius: 999px;
  border: 1px solid var(--sw-line);
  background: #FFFFFF;
  color: var(--sw-forest);
}
.elementor .sw-pillar-dark .sw-pillar-list .sw-ico {
  border-color: var(--sw-line-forest);
  background: transparent;
  color: var(--sw-copper-light);
}
.elementor .sw-pillar-list .sw-ico svg { width: 18px; height: 18px; }
.elementor .sw-pillar-list strong { display: block; font-weight: 600; color: var(--sw-ink); }
.elementor .sw-pillar-dark .sw-pillar-list strong { color: var(--sw-on-forest); }
.elementor .sw-pillar-list span.sw-pillar-body {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--sw-ink-muted);
}
.elementor .sw-pillar-dark .sw-pillar-list span.sw-pillar-body { color: var(--sw-on-forest-muted); }
/* Push each pillar's action to the floor so the two line up. */
.elementor .sw-pillar > .elementor-element:last-child { margin-top: auto; padding-top: 2.5rem; }

/* --- the in-between visitor ---------------------------------- */
.elementor .sw-inbetween {
  border: 1px solid var(--sw-line);
  border-radius: var(--sw-r-md);
  background: #FFFFFF;
}
.elementor .sw-inbetween > .elementor-element { flex: 0 1 auto; width: auto; }
.elementor .sw-inbetween .sw-inbetween-head {
  margin: 0;
  font-family: var(--sw-font-serif);
  font-size: 1.375rem;
  font-weight: 500;
  color: var(--sw-ink);
}
.elementor .sw-inbetween .sw-inbetween-sub {
  margin: 0.375rem 0 0;
  font-size: 0.9375rem;
  color: var(--sw-ink-muted);
}

/* ------------------------------------------------------------
   RESULTS / TRUST
   Authority carried by four qualitative proof points. The brand
   document bars invented statistics and testimonials, so the
   case-results seam stays empty until the firm supplies verified
   outcomes.
   ------------------------------------------------------------ */
.elementor .sw-proof-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--sw-line);
  border-radius: var(--sw-r-md);
  overflow: hidden;
  background: var(--sw-line);
}
@media (max-width: 1024px) { .elementor .sw-proof-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px)  { .elementor .sw-proof-grid { grid-template-columns: 1fr; } }
.elementor .sw-proof { padding: 2rem; background: var(--sw-bone); }
.elementor .sw-proof .sw-ico-lg {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 999px;
  border: 1px solid var(--sw-sage);
  background: #FFFFFF;
  color: var(--sw-forest);
}
.elementor .sw-proof .sw-ico-lg svg { width: 22px; height: 22px; }
.elementor .sw-proof h3 {
  margin: 1.5rem 0 0;
  font-family: var(--sw-font-serif);
  font-size: 1.3125rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--sw-ink);
}
.elementor .sw-proof p {
  margin: 0.75rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--sw-ink-muted);
}

/* --- reviews -------------------------------------------------- */
.elementor .sw-reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (max-width: 900px) { .elementor .sw-reviews-grid { grid-template-columns: 1fr; } }
.elementor .sw-review {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 2rem;
  background: #FFFFFF;
  border: 1px solid var(--sw-line);
  border-radius: var(--sw-r-md);
}
.elementor .sw-review .sw-stars { display: flex; gap: 0.25rem; color: var(--sw-copper); }
.elementor .sw-review .sw-stars svg { width: 18px; height: 18px; fill: currentColor; }
.elementor .sw-review blockquote {
  margin: 1.5rem 0 2rem;
  font-family: var(--sw-font-serif);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--sw-ink);
}
.elementor .sw-review .sw-review-rule {
  margin-top: auto;
  width: 2.5rem;
  height: 2px;
  background: var(--sw-copper);
}
.elementor .sw-review .sw-review-name { margin: 1.25rem 0 0; font-weight: 600; color: var(--sw-ink); }
.elementor .sw-review .sw-review-role { margin: 0.125rem 0 0; font-size: 0.875rem; color: var(--sw-ink-muted); }

/* ------------------------------------------------------------
   CONSULTATION
   Reassurance on the left, the form on the right. The courthouse
   cut sits off-canvas at 13% as in the mockup.
   ------------------------------------------------------------ */
.sw-consult { position: relative; isolation: isolate; overflow: hidden; }
.sw-consult::before {
  content: "";
  position: absolute;
  left: -7rem;
  top: 50%;
  transform: translateY(-50%);
  width: 42%;
  height: 86%;
  z-index: -1;
  opacity: 0.13;
  background: url("https://smithwp.carlosarias.com/wp-content/uploads/2026/09/sw-courthouse-cut.webp") left center / contain no-repeat;
  pointer-events: none;
}
@media (max-width: 1024px) { .sw-consult::before { display: none; } }

.elementor .sw-consult-grid > .elementor-element { flex: 1 1 380px; width: auto; min-width: 0; }
.elementor .sw-consult-assurances { list-style: none; margin: 2.5rem 0 0; padding: 0; }
.elementor .sw-consult-assurances li {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  padding: 1.5rem 0;
}
.elementor .sw-consult-assurances li + li { border-top: 1px solid var(--sw-line); }
.elementor .sw-consult-assurances .sw-ico-round {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 999px;
  background: var(--sw-forest-deep);
  color: var(--sw-copper-light);
}
.elementor .sw-consult-assurances .sw-ico-round svg { width: 20px; height: 20px; }
.elementor .sw-consult-assurances strong { display: block; font-weight: 600; color: var(--sw-ink); }
.elementor .sw-consult-assurances span.sw-assure-body {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--sw-ink-muted);
}

/* --- the dark form panel -------------------------------------- */
.elementor .sw-consult-panel {
  background: var(--sw-forest-deep);
  border-radius: var(--sw-r-lg);
}
.elementor .sw-consult-panel h3 {
  margin: 0;
  font-family: var(--sw-font-serif);
  font-size: clamp(1.75rem, 2.6vw, 2.25rem);
  font-weight: 500;
  line-height: 1.2;
  color: var(--sw-on-forest);
}
.elementor .sw-consult-panel .sw-rule { margin-top: 1.25rem; }
.elementor .sw-consult-panel .sw-consult-intro {
  margin: 1.25rem 0 0;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--sw-on-forest-muted);
}

/* ------------------------------------------------------------
   CONTACT STRIP
   The fee tile is SCOPED to personal injury on purpose: contingency
   applies to injury matters, not to criminal defence, so it cannot
   be a firm-wide claim.
   ------------------------------------------------------------ */
.elementor .sw-contact-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--sw-line);
  border-radius: var(--sw-r-md);
  overflow: hidden;
  background: var(--sw-line);
}
@media (max-width: 1024px) { .elementor .sw-contact-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px)  { .elementor .sw-contact-strip { grid-template-columns: 1fr; } }
.elementor .sw-tile { display: flex; align-items: flex-start; gap: 0.875rem; padding: 1.5rem; background: var(--sw-bone); }
.elementor .sw-tile .sw-ico-copper {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999px;
  border: 1px solid var(--sw-copper);
  color: var(--sw-copper);
}
.elementor .sw-tile .sw-ico-copper svg { width: 18px; height: 18px; }
.elementor .sw-tile .sw-tile-title {
  margin: 0;
  font-family: var(--sw-font-serif);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--sw-ink);
}
.elementor .sw-tile a { display: block; margin-top: 0.375rem; font-size: 0.875rem; font-weight: 500; color: var(--sw-ink); text-decoration: none; word-break: break-word; }
.elementor .sw-tile a:hover { color: var(--sw-forest); }
.elementor .sw-tile .sw-tile-cities { margin: 0.375rem 0 0; font-size: 0.8125rem; line-height: 1.4; color: var(--sw-ink-muted); }
.elementor .sw-tile .sw-tile-scope { margin: 0.375rem 0 0; font-size: 0.8125rem; font-weight: 600; color: var(--sw-copper-ink); }
.elementor .sw-tile .sw-tile-note { margin: 0.25rem 0 0; font-size: 0.8125rem; line-height: 1.6; color: var(--sw-ink-muted); }

/* ------------------------------------------------------------
   LEGAL INSIGHTS
   One featured article, two secondary. Editorial and simple: no
   card-on-card, no decorative furniture.
   ------------------------------------------------------------ */
.elementor .sw-insights-grid > .sw-insights-featured { flex: 1 1 460px; width: auto; min-width: 0; }
.elementor .sw-insights-grid > .sw-insights-rest { flex: 1 1 380px; width: auto; min-width: 0; }

/* ------------------------------------------------------------
   LOCATIONS
   Three equal offices with the supplied Colorado map beside the
   heading. Cards are typographic rather than photographic: no real
   photography of these offices was supplied, and generic stock city
   imagery on a law firm's contact section reads as filler.
   ------------------------------------------------------------ */
.elementor .sw-locations-top > .elementor-element { flex: 1 1 360px; width: auto; min-width: 0; }
.elementor .sw-map-frame {
  border: 1px solid var(--sw-line);
  border-radius: var(--sw-r-md);
  overflow: hidden;
  background: #FFFFFF;
}
.elementor .sw-map-frame img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 62% center; }

.elementor .sw-office-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (max-width: 900px) { .elementor .sw-office-grid { grid-template-columns: 1fr; } }
.elementor .sw-office-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 2rem;
  background: #FFFFFF;
  border: 1px solid var(--sw-line);
  border-radius: var(--sw-r-md);
}
.elementor .sw-office-card .sw-ico-pin {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999px;
  background: var(--sw-forest-deep);
  color: var(--sw-copper-light);
}
.elementor .sw-office-card .sw-ico-pin svg { width: 20px; height: 20px; }
.elementor .sw-office-card .sw-eyebrow { margin: 1.5rem 0 0; }
.elementor .sw-office-card h3 {
  margin: 0.5rem 0 0;
  font-family: var(--sw-font-serif);
  font-size: 1.625rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--sw-ink);
}
.elementor .sw-office-card address {
  margin: 1rem 0 0;
  font-style: normal;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--sw-ink-muted);
}
.elementor .sw-office-card address span { display: block; }
.elementor .sw-office-card .sw-office-phone {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--sw-ink);
  text-decoration: none;
}
.elementor .sw-office-card .sw-office-phone svg { width: 16px; height: 16px; color: var(--sw-copper-ink); }
.elementor .sw-office-card .sw-office-phone:hover { color: var(--sw-forest); }
.elementor .sw-office-card .sw-office-foot {
  margin-top: auto;
  padding-top: 1.5rem;
  border-top: 1px solid var(--sw-line);
}
.elementor .sw-office-card .sw-link { text-decoration: none; }
.elementor .sw-office-card .sw-link svg { width: 16px; height: 16px; }

/* ------------------------------------------------------------
   CONSULTATION FORM (Contact Form 7 inside the dark panel)
   ------------------------------------------------------------ */
.elementor .sw-consult-form .sw-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  margin-top: 2rem;
}
@media (max-width: 600px) { .elementor .sw-consult-form .sw-form-grid { grid-template-columns: 1fr; } }
.elementor .sw-consult-form .sw-col2 { grid-column: 1 / -1; }
.elementor .sw-consult-form p { margin: 0; }

.elementor .sw-consult-form .sw-flabel {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sw-on-forest-muted);
}
.elementor .sw-consult-form .sw-field,
.elementor .sw-consult-form input.sw-field,
.elementor .sw-consult-form select.sw-field,
.elementor .sw-consult-form textarea.sw-field {
  width: 100%;
  border: 1px solid transparent;
  border-radius: var(--sw-r-sm);
  background: #FBFAF7;
  padding: 0.8125rem 0.9375rem;
  font-family: var(--sw-font-sans);
  font-size: 1rem;
  color: var(--sw-ink);
  transition: border-color .18s ease-out, box-shadow .18s ease-out;
}
.elementor .sw-consult-form textarea.sw-field { min-height: 9rem; resize: vertical; }
.elementor .sw-consult-form .sw-field:focus-visible {
  outline: none;
  border-color: var(--sw-copper-light);
  box-shadow: 0 0 0 3px rgba(208, 142, 75, 0.28);
}
.elementor .sw-consult-form .sw-form-note {
  font-size: 0.875rem;
  color: var(--sw-on-forest-muted);
}
.elementor .sw-consult-form input.sw-form-submit {
  width: 100%;
  border: 1px solid transparent;
  border-radius: var(--sw-r-sm);
  background: var(--sw-copper);
  color: #FFFFFF;
  padding: 0.9375rem 1.75rem;
  font-family: var(--sw-font-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .2s ease-out;
}
.elementor .sw-consult-form input.sw-form-submit:hover { background: var(--sw-copper-ink); }

/* CF7's own response and validation furniture, brought onto the dark panel. */
.elementor .sw-consult-form .wpcf7-not-valid-tip { margin-top: 0.375rem; font-size: 0.8125rem; color: #E2A08A; }
.elementor .sw-consult-form .wpcf7-response-output {
  grid-column: 1 / -1;
  margin: 1.25rem 0 0;
  border: 1px solid var(--sw-copper-light);
  border-radius: var(--sw-r-sm);
  padding: 0.75rem 1rem;
  font-size: 0.9375rem;
  color: var(--sw-on-forest);
}
.elementor .sw-consult-form form.invalid .wpcf7-response-output,
.elementor .sw-consult-form form.failed .wpcf7-response-output { border-color: #E2A08A; color: #F6D9CD; }

/* Locations heading runs slightly tighter than the shared H2 scale so the two
   lines sit beside the map without crowding it. */
.elementor .sw-secthead h2.sw-h2-locations { font-size: clamp(1.9rem, 3.4vw, 2.75rem); }
.elementor .sw-office-card .sw-office-foot { display: block; }

/* ------------------------------------------------------------
   BLOG WIDGET (Premium Addons) — brand skin
   The widget supplies the query and markup; the card treatment is
   the brand's. Selectors are prefixed with .elementor to clear the
   widget's own defaults, which load after the theme.
   ------------------------------------------------------------ */
.elementor .sw-blog .premium-blog-post-outer-container,
.elementor .sw-blog .premium-blog-thumb-effect-wrapper { border-radius: 0; }

.elementor .sw-blog .premium-blog-post-container {
  height: 100%;
  background: #FFFFFF;
  border: 1px solid var(--sw-line);
  border-radius: var(--sw-r-md);
  overflow: hidden;
}
.elementor .sw-blog .premium-blog-content-wrapper { padding: 2rem; }
.elementor .sw-blog .premium-blog-inner-container { height: 100%; }

/* Title */
.elementor .sw-blog .premium-blog-entry-title,
.elementor .sw-blog .premium-blog-entry-title a {
  font-family: var(--sw-font-serif);
  font-weight: 500;
  color: var(--sw-ink);
  text-decoration: none;
  line-height: 1.25;
}
.elementor .sw-blog-featured .premium-blog-entry-title,
.elementor .sw-blog-featured .premium-blog-entry-title a { font-size: 1.7rem; }
.elementor .sw-blog-rest .premium-blog-entry-title,
.elementor .sw-blog-rest .premium-blog-entry-title a { font-size: 1.3125rem; }
.elementor .sw-blog .premium-blog-entry-title a:hover { color: var(--sw-forest); }

/* Excerpt */
.elementor .sw-blog .premium-blog-post-content {
  margin-top: 0.75rem;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--sw-ink-muted);
}
.elementor .sw-blog-featured .premium-blog-post-content { font-size: 1.0625rem; }

/* Category chip -> the brand's copper eyebrow, not a grey pill. */
.elementor .sw-blog .premium-blog-meta-data,
.elementor .sw-blog .premium-blog-post-tags-container { margin: 0; }
.elementor .sw-blog .premium-blog-cats-container a,
.elementor .sw-blog .premium-blog-post-categories a {
  background: none;
  padding: 0;
  font-family: var(--sw-font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sw-copper-ink);
  text-decoration: none;
}
.elementor .sw-blog .premium-blog-meta-data span,
.elementor .sw-blog .premium-blog-meta-data a {
  font-size: 0.8125rem;
  color: var(--sw-ink-muted);
  text-decoration: none;
}

/* "Read article" -> the brand's uppercase link */
.elementor .sw-blog .premium-blog-excerpt-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--sw-line);
  width: 100%;
  font-family: var(--sw-font-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--sw-copper-ink);
  text-decoration: none;
}
.elementor .sw-blog .premium-blog-excerpt-link:hover { color: var(--sw-forest); }

/* Thumbnails */
.elementor .sw-blog-featured .premium-blog-thumbnail-container img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.elementor .sw-blog-rest .premium-blog-thumbnail-container img { height: 100%; object-fit: cover; }
.elementor .sw-blog-rest .premium-blog-post-container { display: flex; }

/* The secondary cards size to their own content. Forcing them to share the
   featured card's height clipped the excerpt and the read-more link against
   the container's overflow:hidden. */
.elementor .sw-blog-rest .premium-blog-post-container { align-items: stretch; }
.elementor .sw-blog-rest .premium-blog-content-wrapper {
  display: flex;
  flex-direction: column;
  padding: 1.75rem;
}
.elementor .sw-blog-rest .premium-blog-excerpt-link { margin-top: auto; }
.elementor .sw-blog-rest .premium-blog-post-content { flex: 0 1 auto; }

/* ------------------------------------------------------------
   HEADER SEARCH — icon in the bar, full-screen modal on open

   Closed, the Premium Addons widget shows only its icon button,
   sitting on the header's centre line. Open, its container becomes
   a fixed overlay over the page with one large field.
   Behaviour: assets/js/search.js.
   ------------------------------------------------------------ */
.elementor .sw-header-bar > .sw-search { flex: 0 0 auto; width: auto; }
.elementor .sw-search .premium-search__container { width: auto; }

/* --- closed: icon only ---------------------------------------- */
.elementor .sw-search .premium-search__input-btn-wrap {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
}
.elementor .sw-search:not(.is-open) .premium-search__input-wrap {
  width: 0;
  overflow: hidden;
  opacity: 0;
}
.elementor .sw-search .premium-search__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: var(--sw-r-sm);
  background: transparent;
  color: var(--sw-ink);
  cursor: pointer;
}
.elementor .sw-search .premium-search__btn:hover { color: var(--sw-forest); }
.elementor .sw-search .premium-search__btn svg { width: 18px; height: 18px; fill: currentColor; }

/* The widget emits an empty "no results" wrapper on load and marks it
   .query-hidden without hiding it; styled, it gains height and knocks the icon
   off the header's centre line. */
.elementor .sw-search .premium-search__query-wrap.query-hidden { display: none; }

/* --- open: full-screen modal ---------------------------------
   Once open the container is moved to <body> (see search.js), so it is no
   longer inside .elementor or .sw-search — every rule below has to stand on
   its own rather than build on the closed-state styles above. */
.premium-search__container.is-open {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: auto;
  padding: clamp(4rem, 14vh, 9rem) 1.5rem 2rem;
  background: rgba(10, 33, 28, 0.8);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  animation: sw-search-in .18s ease-out;
}
@keyframes sw-search-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .premium-search__container.is-open { animation: none; }
}

.premium-search__container.is-open .premium-search__input-btn-wrap {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
  width: min(52rem, 100%);
  padding-bottom: 0.75rem;
  border-bottom: 1px solid color-mix(in oklab, #F7F6F2 40%, transparent);
}
.premium-search__container.is-open .premium-search__input-wrap {
  width: 100%;
  opacity: 1;
  overflow: visible;
}
.premium-search__container.is-open .premium-search__input {
  width: 100%;
  border: 0;
  outline: 0;
  box-shadow: none;
  background: transparent;
  padding: 0.5rem 0;
  font-family: var(--sw-font-serif);
  font-size: clamp(1.5rem, 4vw, 2.75rem);
  font-weight: 500;
  line-height: 1.2;
  color: var(--sw-on-forest);
}
.premium-search__container.is-open .premium-search__input:focus,
.premium-search__container.is-open .premium-search__input:focus-visible {
  border: 0;
  outline: 0;
  box-shadow: none;
}
.premium-search__container.is-open .premium-search__input::placeholder {
  color: color-mix(in oklab, #F7F6F2 45%, transparent);
}

.premium-search__container.is-open .premium-search__btn-wrap { flex: 0 0 auto; }
.premium-search__container.is-open .premium-search__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--sw-copper-light);
  cursor: default;
}
.premium-search__container.is-open .premium-search__btn svg {
  width: 26px;
  height: 26px;
  fill: currentColor;
}

/* Close control, added by the script. */
/* Built by search.js at load and parked inside the widget, so without this
   it sits in the header bar reading "CLOSE" with nothing open. */
.sw-search-close { display: none; }
.premium-search__container.is-open .sw-search-close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.875rem;
  border: 1px solid color-mix(in oklab, #F7F6F2 35%, transparent);
  border-radius: var(--sw-r-sm);
  background: transparent;
  font-family: var(--sw-font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sw-on-forest);
  cursor: pointer;
}
.premium-search__container.is-open .sw-search-close:hover { background: var(--sw-on-forest); color: var(--sw-forest-deep); }
.premium-search__container.is-open .sw-search-close svg { width: 14px; height: 14px; }

/* --- results inside the modal --------------------------------- */
.premium-search__container.is-open .premium-search__posts-wrap {
  width: min(52rem, 100%);
  margin-top: 1.5rem;
  max-height: calc(100vh - 18rem);
  overflow-y: auto;
}
.premium-search__container.is-open .premium-search__post-wrap + .premium-search__post-wrap {
  border-top: 1px solid color-mix(in oklab, #F7F6F2 18%, transparent);
}
.premium-search__container.is-open .premium-search__post-inner { display: block; padding: 1.125rem 0; }
.premium-search__container.is-open .premium-search__post-wrap a { text-decoration: none; }
.premium-search__container.is-open .premium-search__post-title,
.premium-search__container.is-open .premium-search__post-wrap a .premium-search__post-title {
  margin: 0;
  font-family: var(--sw-font-serif);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--sw-on-forest);
}
.premium-search__container.is-open .premium-search__post-wrap:hover .premium-search__post-title {
  color: var(--sw-copper-light);
}
.premium-search__container.is-open .premium-search__query-wrap {
  width: min(52rem, 100%);
  margin-top: 1.5rem;
  font-size: 1rem;
  color: color-mix(in oklab, #F7F6F2 70%, transparent);
}
.premium-search__container.is-open .premium-search__excerpt-wrap,
.premium-search__container.is-open .premium-search__post-content:empty { display: none; }

/* Page behind the modal must not scroll. */
body.sw-search-open { overflow: hidden; }

/* --- modal focus + link colour -------------------------------- */
/* The field autofocuses, so the site-wide focus ring sits around it the whole
   time and reads as a stray box. Focus indication moves to the underline,
   which is the field's only affordance here — the ring is suppressed, not the
   indication. */
.premium-search__container.is-open .premium-search__input:focus,
.premium-search__container.is-open .premium-search__input:focus-visible {
  outline: none !important;
}
.premium-search__container.is-open .premium-search__input-btn-wrap:focus-within {
  border-bottom-color: var(--sw-copper-light);
}

/* The widget nests a bare <a> inside the title, which picks up the theme's
   default link colour; colouring the title alone does not reach it. */
.premium-search__container.is-open .premium-search__post-title a,
.premium-search__container.is-open .premium-search__post-wrap a,
.premium-search__container.is-open .premium-search__link {
  color: var(--sw-on-forest);
  text-decoration: none;
}
.premium-search__container.is-open .premium-search__post-wrap:hover .premium-search__post-title a {
  color: var(--sw-copper-light);
}

/* Results persist in the DOM after the modal closes, and the container returns
   to the header still populated — without this they render inline in the bar.
   Scoped to the closed state: while open the container lives in <body>, so
   these selectors do not reach it. */
.elementor .sw-search .premium-search__posts-wrap,
.elementor .sw-search .premium-search__query-wrap { display: none; }

/* ============================================================
   SUB-PAGE FURNITURE
   Shared by About and the inner pages that follow.
   ============================================================ */
.elementor .sw-pagehead { background-color: var(--sw-bone-2); border-bottom: 1px solid var(--sw-line); }
.elementor .sw-crumbs-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1.5rem;
  font-size: 0.8125rem;
  color: var(--sw-ink-muted);
}
.elementor .sw-crumbs-inline a { color: var(--sw-ink-muted); text-decoration: none; }
.elementor .sw-crumbs-inline a:hover { color: var(--sw-forest); }
.elementor .sw-crumbs-inline span { color: var(--sw-line); }
.elementor .sw-pagehead h1 {
  margin: 1rem 0 0;
  font-family: var(--sw-font-serif);
  font-weight: 500;
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  line-height: 1.06;
  letter-spacing: -0.018em;
  color: var(--sw-ink);
}
.elementor .sw-pagehead .sw-rule { margin-top: 1.75rem; }
.elementor .sw-pagehead .sw-lede { margin-top: 1.5rem; }
.elementor.elementor .e-con > .sw-pagehead-copy { max-width: 46rem; }

/* --- two-column story block ----------------------------------- */
.elementor .sw-split > .elementor-element { flex: 1 1 340px; width: auto; min-width: 0; }
.elementor .sw-prose p {
  margin: 0 0 1.25rem;
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--sw-ink-muted);
}
.elementor .sw-prose p:last-child { margin-bottom: 0; }
.elementor .sw-prose .sw-prose-lead {
  font-family: var(--sw-font-serif);
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  line-height: 1.45;
  color: var(--sw-ink);
}
.elementor .sw-figure img {
  display: block;
  width: 100%;
  border-radius: var(--sw-r-md);
  border: 1px solid var(--sw-line);
  background: var(--sw-bone-2);
}

/* --- practice list -------------------------------------------- */
.elementor .sw-what-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem 3rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (max-width: 767px) { .elementor .sw-what-grid { grid-template-columns: 1fr; } }
.elementor .sw-what-grid li { border-top: 1px solid var(--sw-line); padding-top: 1.25rem; }
.elementor .sw-what-grid strong {
  display: block;
  font-family: var(--sw-font-serif);
  font-size: 1.1875rem;
  font-weight: 500;
  color: var(--sw-ink);
}
.elementor .sw-what-grid span {
  display: block;
  margin-top: 0.375rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--sw-ink-muted);
}

/* --- closing CTA band ----------------------------------------- */
.elementor .sw-cta-band { background-color: var(--sw-forest-deep); }
.elementor .sw-cta-band > .elementor-element { flex: 0 1 auto; width: auto; }
.elementor .sw-cta-band .sw-cta-head {
  margin: 0;
  font-family: var(--sw-font-serif);
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  font-weight: 500;
  line-height: 1.2;
  color: var(--sw-on-forest);
}
.elementor .sw-cta-band .sw-cta-sub {
  margin: 0.625rem 0 0;
  max-width: 34rem;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--sw-on-forest-muted);
}

/* --- team grid ------------------------------------------------
   Typographic rather than photographic: no individual headshots were
   supplied, and a placeholder avatar on a law firm's people page reads
   worse than an honest monogram. Swap the mark for a portrait when the
   firm provides them. */
.elementor .sw-team-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (max-width: 1024px) { .elementor .sw-team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px)  { .elementor .sw-team-grid { grid-template-columns: 1fr; } }

/* Grid, not flex: the widget emits mark + name + role as three siblings, so a
   flex row lays the name and role side by side instead of stacking them. */
.elementor .sw-person {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 1.125rem;
  padding: 1.5rem;
  background: #FFFFFF;
  border: 1px solid var(--sw-line);
  border-radius: var(--sw-r-md);
}
.elementor .sw-person-mark {
  grid-row: 1 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 999px;
  background: var(--sw-forest-deep);
  font-family: var(--sw-font-serif);
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--sw-copper-light);
}
.elementor .sw-person-name {
  margin: 0;
  font-family: var(--sw-font-serif);
  font-size: 1.1875rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--sw-ink);
}
.elementor .sw-person-role {
  margin: 0.25rem 0 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--sw-ink-muted);
}

/* ============================================================
   CRIMINAL DEFENSE PILLAR  (/criminal-defense/)

   The one interior page that opens on the dark ground. That is
   continuity, not decoration: tokens.css reserves --sw-forest-deep
   for "hero / footer / criminal pillar", and the homepage practice
   grid already renders Criminal Defense as the dark pillar against
   Personal Injury's bone. A visitor who clicked the dark card
   lands on a dark page.

   Ground rhythm, so the two heaviest passages — the charge list
   and the procedural spine — never sit on the same colour:
     forest · bone · bone-2 · forest · bone · bone-2 · forest

   Reuses the SUB-PAGE FURNITURE block above (.sw-pagehead,
   .sw-split, .sw-prose, .sw-person, .sw-cta-band) wherever it fits.
   ============================================================ */

/* --- dark page head ------------------------------------------
   .sw-pagehead paints bone-2 with an ink H1, and it also out-ranks
   the (0,1,0) .sw-on-forest background. Every selector here carries
   one class more than the rule it overrides, so the result does not
   depend on source order. */
.elementor .sw-pagehead.sw-pagehead-dark {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--sw-forest-deep);
  border-bottom: 1px solid var(--sw-line-forest);
}

/* Courthouse cutout, bottom right. The same asset the homepage pillar uses
   for Criminal Defense, so the card and the page it opens share an image.
   The wash keeps the headline side solid and lets the columns surface on the
   right, where the copy's 46rem measure ends — same device as .sw-hero. */
.sw-pagehead-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* Opaque until past the photo's own left edge (it sits at 60% of the band,
     and its sky is not quite forest-deep, so an untreated boundary shows as a
     vertical seam), then ramps off to let the columns surface. */
  background: linear-gradient(97deg,
    rgb(10, 33, 28) 0%,
    rgb(10, 33, 28) 62%,
    rgba(10, 33, 28, 0.55) 74%,
    rgba(10, 33, 28, 0.38) 88%,
    rgba(10, 33, 28, 0.52) 100%);
}

/* The art is decorative and carries no information, so it goes when the copy
   needs the full width — below this it only sits behind the text.

   NOTE, same family as the .elementor.elementor trap: Elementor emits the
   background as
     .elementor-181 .elementor-element.elementor-element-738cd0f:not(.elementor-motion-effects-element-type-background)
   and that :not() counts as a class, making it (0,4,0). A three-class
   override loses silently — the image simply stays up on phones. Hence the
   doubled .elementor and all three of the element's own classes: (0,5,0). */
@media (max-width: 1024px) {
  .elementor.elementor .sw-pagehead.sw-pagehead-dark.sw-on-forest {
    background-image: none;
  }
}
/* Lift the real children above the wash. */
.sw-pagehead-dark > .e-con-inner,
.sw-pagehead-dark > .elementor-element { position: relative; z-index: 1; }
.elementor .sw-pagehead.sw-pagehead-dark h1          { color: var(--sw-on-forest); }
.elementor .sw-pagehead.sw-pagehead-dark .sw-eyebrow { color: var(--sw-copper-light); }
.elementor .sw-pagehead.sw-pagehead-dark .sw-lede    { color: var(--sw-on-forest-muted); }
.elementor .sw-pagehead.sw-pagehead-dark .sw-rule    { background: var(--sw-copper-light); }

.elementor .sw-pagehead.sw-pagehead-dark .sw-crumbs-inline        { color: var(--sw-on-forest-muted); }
.elementor .sw-pagehead.sw-pagehead-dark .sw-crumbs-inline a      { color: var(--sw-on-forest-muted); }
.elementor .sw-pagehead.sw-pagehead-dark .sw-crumbs-inline a:hover{ color: var(--sw-copper-light); }
.elementor .sw-pagehead.sw-pagehead-dark .sw-crumbs-inline span   { color: var(--sw-line-forest); }

/* The second paragraph carries the scope of the practice; it sits a
   step below the lede rather than repeating its weight. */
.elementor .sw-pagehead-copy .sw-pagehead-sub {
  margin: 1.25rem 0 0;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--sw-on-forest-muted);
}

.elementor .sw-pagehead-actions { margin-top: 2.25rem; }

/* The access promise, reading as a checked assurance rather than a
   fourth paragraph — same role the hero's icon list plays on /. */
.elementor .sw-pagehead-assure { margin-top: 1.5rem; }
.elementor .sw-pagehead-assure p {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  margin: 0;
  max-width: 34rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--sw-on-forest-muted);
}
.elementor .sw-pagehead-assure svg {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.1875rem;
  color: var(--sw-copper-light);
}

/* --- section heads on the dark ground -------------------------
   .sw-secthead hard-codes ink/copper-ink for the bone sections. The
   heading and eyebrow live inside a rich-text widget, so the
   .elementor-heading-title inversions in components.css do not
   reach them. .sw-rule and .sw-lede are already handled there. */
.elementor .sw-on-forest .sw-secthead h2          { color: var(--sw-on-forest); }
.elementor .sw-on-forest .sw-secthead .sw-eyebrow { color: var(--sw-copper-light); }

/* --- air between a section head and the block it introduces ----
   Scoped to this page's own blocks rather than `.sw-secthead + *`,
   which would reach the homepage and About. */
.elementor .sw-offenses-block,
.elementor .sw-steps-block,
.elementor .sw-results-block { margin-top: 3rem; }
.elementor .sw-prosecutors-split,
.elementor .sw-faq-block     { margin-top: 2.5rem; }

/* --- former prosecutors --------------------------------------- */
/* The argument gets the wider column; the three bios sit beside it as
   the evidence for it. Collapses to one column at the .sw-split basis. */
.elementor .sw-split.sw-prosecutors-split > .sw-prose           { flex: 1 1 26rem; }
.elementor .sw-split.sw-prosecutors-split > .sw-team-stack-block{ flex: 1 1 20rem; }

/* .sw-person as a single column with room for a bio line. The base card
   is a 2-column grid whose monogram spans rows 1-2; the bio has to be
   placed in column 2 explicitly or auto-placement drops it under the
   monogram in the free column-1 cell. */
.elementor .sw-team-stack {
  display: grid;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.elementor .sw-team-stack .sw-person { align-items: start; }
.elementor .sw-team-stack .sw-person-bio {
  grid-column: 2;
  margin: 0.625rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--sw-ink-muted);
}

/* --- what we defend ------------------------------------------
   Nine charge families. Deliberately NOT a card grid: these are
   reference entries of unequal length, and boxing them would both
   flatten that and repeat the proof-card family from the homepage.
   A hairline-ruled two-column list reads like the statute index it
   effectively is — name and spokes left, the substance right. */
.elementor .sw-offenses {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--sw-line);
}
.elementor .sw-offense {
  display: grid;
  grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  gap: 1.25rem 3.5rem;
  padding: 2.25rem 0;
  border-bottom: 1px solid var(--sw-line);
}
@media (max-width: 900px) {
  .elementor .sw-offense { grid-template-columns: 1fr; gap: 1rem; padding: 1.75rem 0; }
}
.elementor .sw-offense-head h3 {
  margin: 0;
  font-family: var(--sw-font-serif);
  font-weight: 500;
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  line-height: 1.22;
  color: var(--sw-ink);
}
.elementor .sw-offense-body p {
  margin: 0 0 1rem;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--sw-ink-muted);
}
.elementor .sw-offense-body p:last-child { margin-bottom: 0; }

/* --- spoke labels ---------------------------------------------
   Every spoke page is still unbuilt, so these render as quiet labels,
   NOT as links — a bordered chip that looks clickable and 404s is
   worse than plain text. Both states are styled: when a spoke ships,
   swapping its <span> for an <a class="sw-spoke" href="..."> is the
   whole change, and it gains copper and a hover on the way. */
.elementor .sw-spokes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1rem 0 0;
}
.elementor .sw-spoke {
  display: inline-flex;
  align-items: center;
  padding: 0.3125rem 0.625rem;
  border: 1px solid var(--sw-line);
  border-radius: var(--sw-r-sm);
  background: var(--sw-bone);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--sw-ink-muted);
  text-decoration: none;
}
.elementor a.sw-spoke {
  color: var(--sw-copper-ink);
  border-color: color-mix(in oklab, var(--sw-copper) 40%, var(--sw-line));
}
.elementor a.sw-spoke:hover {
  background: var(--sw-copper);
  border-color: var(--sw-copper);
  color: #FFFFFF;
}

/* --- what happens after an arrest ----------------------------
   A real sequence, so a real <ol>. Marked with a copper node on a
   hairline spine rather than a numbered badge: the order is the
   information, the numeral would only be ornament. */
.elementor .sw-steps {
  list-style: none;
  margin: 0;
  padding: 0 0 0 2.25rem;
  border-left: 1px solid var(--sw-line-forest);
}
.elementor .sw-steps li {
  position: relative;
  padding-bottom: 2.5rem;
}
.elementor .sw-steps li:last-child { padding-bottom: 0; }
.elementor .sw-steps li::before {
  content: "";
  position: absolute;
  left: -2.25rem;
  top: 0.5rem;
  transform: translateX(-50%);
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--sw-copper);
  /* Punches the spine out behind the node so the rule appears to pass
     under it rather than through it. */
  box-shadow: 0 0 0 4px var(--sw-forest-deep);
}
.elementor .sw-steps h3 {
  margin: 0;
  font-family: var(--sw-font-serif);
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.25;
  color: var(--sw-on-forest);
}
.elementor .sw-steps p {
  margin: 0.625rem 0 0;
  max-width: 54rem;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--sw-on-forest-muted);
}

/* --- results --------------------------------------------------
   Outcome, charge, county on one ruled line. Reads as a docket, and
   keeps each claim discrete so an attorney can strike or amend one
   without rewriting a paragraph. */
.elementor .sw-results-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--sw-line);
}
.elementor .sw-result {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 15rem);
  align-items: baseline;
  gap: 0.5rem 2rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--sw-line);
}
@media (max-width: 767px) {
  .elementor .sw-result { grid-template-columns: 1fr; gap: 0.25rem; }
}
.elementor .sw-result-outcome {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--sw-copper-ink);
}
.elementor .sw-result-charge {
  margin: 0;
  font-family: var(--sw-font-serif);
  font-size: 1.125rem;
  line-height: 1.3;
  color: var(--sw-ink);
}
.elementor .sw-result-where {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--sw-ink-muted);
}
@media (min-width: 768px) {
  .elementor .sw-result-where { text-align: right; }
}

.elementor #results .elementor-widget-button { margin-top: 2rem; }

/* Required on EVERY instance of the results feed, not only on /results/.
   Quiet, but deliberately not fine print — it is a compliance line. */
.elementor .sw-results-note { margin-top: 1.5rem; }
.elementor .sw-results-note p {
  margin: 0;
  max-width: 48rem;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--sw-ink-muted);
}

/* --- FAQ ------------------------------------------------------
   Native <details>/<summary>: open/close with no JavaScript, keyboard
   and screen-reader behaviour for free, and the answers stay in the
   DOM for search and for FAQPage schema. */
.elementor.elementor .e-con > .sw-faq-block { max-width: 54rem; }
.elementor .sw-faq { border-top: 1px solid var(--sw-line); }
.elementor .sw-faq-item { border-bottom: 1px solid var(--sw-line); }
.elementor .sw-faq-item > summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.375rem 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--sw-font-serif);
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 1.35;
  color: var(--sw-ink);
}
.elementor .sw-faq-item > summary::-webkit-details-marker { display: none; }
/* Chevron drawn from two borders — no icon font request, and it turns on
   the element's own [open] state without script. */
.elementor .sw-faq-item > summary::after {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  margin-top: 0.4375rem;
  border-right: 2px solid var(--sw-copper);
  border-bottom: 2px solid var(--sw-copper);
  transform: rotate(45deg);
  transition: transform .2s ease-out;
}
.elementor .sw-faq-item[open] > summary::after { transform: rotate(-135deg); }
.elementor .sw-faq-item > summary:hover { color: var(--sw-forest); }
.elementor .sw-faq-answer { padding: 0 0 1.5rem; }
.elementor .sw-faq-answer p {
  margin: 0;
  max-width: 48rem;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--sw-ink-muted);
}
@media (prefers-reduced-motion: reduce) {
  .elementor .sw-faq-item > summary::after { transition: none; }
}

/* --- closing CTA ---------------------------------------------
   Reuses .sw-cta-band for the row and its type. The dark ground comes
   from .sw-on-forest on the section so it runs full-bleed, while
   .sw-cta-band sits on the shell where its `> *` flex rule belongs.
   Tighter than a content section: this is a bar, not a passage. */
.elementor .sw-cta-ground {
  padding-block: clamp(3rem, 5vw, 4.5rem);
  border-bottom: 1px solid var(--sw-line-forest);
}
.elementor.elementor .e-con > .sw-cta-copy { max-width: 42rem; }
.elementor .sw-cta-band .sw-cta-offices {
  margin: 1rem 0 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--sw-on-forest-muted);
}

/* ============================================================
   CLOSING CTA — mountain ground + attorney + card
   (DUI page, #talk-to-a-lawyer)

   The mountain is the container's BACKGROUND and the attorney a
   real image widget on purpose. Elementor paints a container's
   background *overlay* above its background *image*, so composing
   the two as background layers puts the mountains through his face
   — which is exactly what the first pass did. Layer order here:
   background image (0) < scrim ::before (0) < figure (1) <
   copy + card (2) < the shape divider Elementor draws (3).

   The PNG carries a white brush along its own bottom edge. It is
   cropped out by `cover` — the section is always shorter than the
   scaled image — and the bone edge comes from Elementor's
   wave-brush divider instead, so it spans the full width rather
   than only the part the photo covers.
   ============================================================ */
.elementor .sw-cta-hero-ground {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3rem, 6vw, 4.5rem) clamp(4rem, 7vw, 6rem);
  background-color: var(--sw-forest-deep);
}
/* Fades the photographed right side into flat forest so the copy
   never sits on mountain detail. Stops are angled, not vertical:
   the skyline reads better under a diagonal edge. */
.elementor .sw-cta-hero-ground::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: linear-gradient(
    98deg,
    var(--sw-forest-deep) 0 34%,
    rgba(10, 33, 28, 0.95) 46%,
    rgba(10, 33, 28, 0.72) 55%,
    rgba(10, 33, 28, 0.42) 72%,
    rgba(10, 33, 28, 0.28) 100%
  );
}

.elementor .sw-cta-hero {
  /* Static on purpose: Elementor gives every .e-con `position:
     relative`, which would make this the figure's containing block.
     The figure has to anchor to the section so it can stand on its
     bottom edge. */
  position: static;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 23.5rem);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
}
.elementor .sw-cta-hero > .sw-cta-hero-copy,
.elementor .sw-cta-hero > .sw-cta-card-wrap {
  position: relative;
  z-index: 2;
}

/* --- copy column --------------------------------------------- */
.elementor .sw-cta-hero-copy { max-width: none; }
.elementor .sw-cta-hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin: 0;
  color: var(--sw-copper-light);
}
.elementor .sw-cta-hero-eyebrow::before {
  content: "";
  flex: none;
  width: 2.75rem;
  height: 2px;
  background: var(--sw-copper-light);
}
.elementor .sw-cta-hero-head {
  margin: 1.125rem 0 0;
  font-family: var(--sw-font-serif);
  font-weight: 500;
  max-width: 20ch;
  font-size: clamp(2.1rem, 3.7vw, 3.15rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--sw-on-forest);
}
.elementor .sw-cta-hero-head .sw-cta-hero-head-accent { color: var(--sw-copper-light); }
.elementor .sw-cta-hero-lede {
  margin: 1.25rem 0 0;
  max-width: 30rem;
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  line-height: 1.6;
  color: var(--sw-on-forest-muted);
}
.elementor .sw-cta-hero-actions {
  flex-wrap: wrap;
  gap: 0.875rem;
  margin-top: 2rem;
}
.elementor .sw-cta-hero-actions > .elementor-element { flex: 0 1 auto; width: auto; }

/* --- trust row ------------------------------------------------ */
.elementor .sw-cta-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 1.25rem;
  list-style: none;
  margin: 2.25rem 0 0;
  padding: 0;
  max-width: 42rem;
}
.elementor .sw-cta-trust li {
  display: flex;
  flex: 0 1 auto;
  min-width: 0;
  align-items: flex-start;
  gap: 0.75rem;
  margin: 0;
}
.elementor .sw-cta-trust svg {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.125rem;
  color: var(--sw-copper-light);
}
.elementor .sw-cta-trust strong {
  display: block;
  font-family: var(--sw-font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--sw-on-forest);
}
.elementor .sw-cta-trust span span {
  display: block;
  margin-top: 0.1875rem;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--sw-on-forest-muted);
}

/* --- the attorney -------------------------------------------- */
/* Anchored to the section, not the shell, so he stands on the
   section's bottom edge and the divider crops him — as in the comp.
   The shell is static on purpose; do not give it a z-index. */
/* Elementor prints the shape divider with `z-index: auto` and places it before
   the content in the DOM, so any positioned sibling after it paints on top —
   which left the attorney standing in front of the brush instead of behind it.
   Lifting the divider is what crops him. */
.elementor .sw-cta-hero-ground .elementor-shape-bottom { z-index: 3; }

.elementor .sw-cta-hero-ground .sw-cta-figure {
  position: absolute;
  z-index: 1;
  right: clamp(14rem, 18vw, 23rem);
  bottom: 0;
  width: clamp(18rem, 31vw, 29rem);
  margin: 0;
  pointer-events: none;
}
.elementor .sw-cta-hero-ground .sw-cta-figure img {
  display: block;
  width: 100%;
  height: auto;
}

/* --- the card ------------------------------------------------- */
/* Forest-mid, a step up from the band rather than a light panel: the original
   fill sat at 1.26:1 against the ground and read as a smudge; this is 1.68:1,
   and the copper hairline does the rest of the separating. Measured on
   #1D4A3B: on-forest 9.27:1, on-forest-muted 6.68:1, copper-light 3.65:1 —
   so copper stays on the icons (3:1 graphics threshold) and off any text. */
.elementor .sw-cta-card {
  padding: 1.75rem;
  border: 1px solid rgba(208, 142, 75, 0.38);
  border-radius: var(--sw-r-md);
  background-color: var(--sw-forest-mid);
  box-shadow: 0 20px 44px rgba(6, 20, 16, 0.42);
}
.elementor .sw-cta-card .sw-cta-card-eyebrow {
  margin: 0;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  color: var(--sw-on-forest-muted);
}
.elementor .sw-cta-card .sw-cta-card-name {
  margin: 0.5rem 0 0;
  font-family: var(--sw-font-serif);
  font-weight: 500;
  font-size: 1.75rem;
  line-height: 1.15;
  color: var(--sw-on-forest);
}
.elementor .sw-cta-card .sw-cta-card-role {
  margin: 0.5rem 0 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.6;
  text-transform: uppercase;
  color: var(--sw-on-forest-muted);
}
.elementor .sw-cta-card-areas {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.125rem;
}
.elementor .sw-cta-card-areas li {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  margin: 0;
}
.elementor .sw-cta-card-areas svg {
  flex: none;
  width: 1.375rem;
  height: 1.375rem;
  margin-top: 0.125rem;
  color: var(--sw-copper-light);
}
.elementor .sw-cta-card-areas strong {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sw-on-forest);
}
.elementor .sw-cta-card-areas span span {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--sw-on-forest-muted);
}
.elementor .sw-cta-card .sw-cta-card-bio {
  margin: 1.5rem 0 0;
  padding-top: 1.25rem;
  /* --sw-line-forest is tuned for the deep ground and disappears on
     forest-mid; this is bone at low alpha so the rule still reads. */
  border-top: 1px solid rgba(247, 246, 242, 0.16);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--sw-on-forest-muted);
}

/* --- responsive ------------------------------------------------ */
@media (max-width: 1200px) {
  .elementor .sw-cta-hero-ground .sw-cta-figure { right: clamp(12rem, 18vw, 20rem); }
  .elementor .sw-cta-trust { max-width: 30rem; }
}
@media (max-width: 1024px) {
  /* He is decorative: below the card's own breakpoint there is no
     room for him without squeezing the copy, so he goes. */
  .elementor .sw-cta-hero-ground .sw-cta-figure { display: none; }
  .elementor .sw-cta-hero { grid-template-columns: minmax(0, 1fr); }
  .elementor .sw-cta-hero-copy { max-width: none; }
  /* With the figure gone the badges have the whole column again. */
  .elementor .sw-cta-trust { max-width: none; }
  .elementor .sw-cta-hero-ground::before {
    /* Stacked, the copy sits directly on the photograph, so the scrim
       has to carry the contrast the diagonal one does on desktop. */
    background-image: linear-gradient(
      178deg,
      rgba(10, 33, 28, 0.82) 0%,
      rgba(10, 33, 28, 0.93) 45%,
      var(--sw-forest-deep) 100%
    );
  }
}
@media (max-width: 767px) {
  .elementor .sw-cta-trust { gap: 1rem 1.5rem; }
  .elementor .sw-cta-hero-actions > .elementor-element { flex: 1 1 100%; }
  .elementor .sw-cta-hero-actions .elementor-button { width: 100%; }
}

/* --- FAQ, two-up: copy left, toggles right --------------------
   The list is Elementor's Accordion widget (nested-accordion), not
   hand-written <details> markup, so the questions stay editable in
   the panel. It renders <details>/<summary> itself, which is why the
   open/closed chevron below can key off [open] with no script — the
   same trick the hand-written .sw-faq blocks use on the other pages.
   Elementor's own icon is switched off in the widget settings so the
   chevron here matches those blocks. */
.elementor .sw-faq-split {
  display: grid;
  grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.elementor .sw-faq-split .sw-faq-intro .sw-lede { margin-top: 1.25rem; }

/* Elementor frames the summary AND the open panel with
   --n-accordion-border-*; zeroing the width at the widget kills both, and
   the hairlines below are the brand's own. */
.elementor .sw-faq-toggle {
  --n-accordion-border-width: 0;
  --n-accordion-padding: 0;
}
.elementor .sw-faq-toggle .e-n-accordion { gap: 0; }
.elementor .sw-faq-toggle .e-n-accordion-item {
  border: 0;
  border-bottom: 1px solid var(--sw-line);
  border-radius: 0;
  background: transparent;
}
.elementor .sw-faq-toggle .e-n-accordion-item:first-of-type { border-top: 1px solid var(--sw-line); }
.elementor .sw-faq-toggle .e-n-accordion-item-title {
  /* Elementor draws its own 1px #d5d8dc frame around the summary and leaves
     justify-content unset, which parks the chevron against the question
     instead of the right edge. Both are cleared here. */
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.375rem 0;
  border: 0;
  background: transparent;
}
.elementor .sw-faq-toggle .e-n-accordion-item-title-header { flex-grow: 1; }
.elementor .sw-faq-toggle .e-n-accordion-item-title-text {
  font-family: var(--sw-font-serif);
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 1.35;
  color: var(--sw-ink);
}
.elementor .sw-faq-toggle .e-n-accordion-item-title:hover .e-n-accordion-item-title-text { color: var(--sw-forest); }
/* Chevron drawn from two borders, as in .sw-faq-item — no icon request. */
.elementor .sw-faq-toggle .e-n-accordion-item-title::after {
  content: "";
  flex: none;
  align-self: flex-start;
  width: 0.5rem;
  height: 0.5rem;
  margin-top: 0.4375rem;
  border-right: 2px solid var(--sw-copper);
  border-bottom: 2px solid var(--sw-copper);
  transform: rotate(45deg);
  transition: transform .2s ease-out;
}
.elementor .sw-faq-toggle .e-n-accordion-item[open] .e-n-accordion-item-title::after { transform: rotate(-135deg); }
/* The answer is a real container, so zero Elementor's default padding
   and let the copy carry the rhythm. */
.elementor .sw-faq-toggle .e-n-accordion-item > .e-con {
  --padding-top: 0;
  --padding-right: 0;
  --padding-bottom: 1.5rem;
  --padding-left: 0;
}
.elementor .sw-faq-toggle .e-n-accordion-item p {
  margin: 0;
  max-width: 44rem;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--sw-ink-muted);
}
.elementor .sw-faq-toggle .e-n-accordion-item p + p { margin-top: 0.875rem; }

@media (prefers-reduced-motion: reduce) {
  .elementor .sw-faq-toggle .e-n-accordion-item-title::after { transition: none; }
}
@media (max-width: 1024px) {
  .elementor .sw-faq-split { grid-template-columns: minmax(0, 1fr); }
}

/* --- client reviews -------------------------------------------
   Elementor's Testimonial widget, three up, so the quotes stay
   editable in the panel rather than living in markup. Nothing here
   renders a star rating or a review count: the source export
   carries neither, and inventing them is exactly the kind of claim
   the brand doc and Colo. RPC 7.1 bar. Add the badge when the real
   figures are confirmed. */
.elementor .sw-reviews-head { max-width: 44rem; }
/* The other section heads carry an <hr class="sw-rule"> inside their text
   widget. This head is a Heading widget, so the same copper rule is drawn
   on the widget instead of written into the content. */
.elementor .sw-reviews-head .elementor-widget-heading::after,
.elementor .sw-steps-head .elementor-widget-heading::after,
.elementor .sw-results-head .elementor-widget-heading::after,
.elementor .sw-defend-intro .elementor-widget-heading::after {
  content: "";
  display: block;
  width: 3.5rem;
  height: 2px;
  margin-top: 1.5rem;
  background: var(--sw-copper);
}
.elementor .sw-reviews-head .sw-lede { margin-top: 1rem; }
.elementor .sw-reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
}
.elementor .sw-review {
  position: relative;
  padding: 1.75rem;
  border: 1px solid var(--sw-line);
  border-radius: var(--sw-r-md);
  background-color: var(--sw-card);
}
/* The quote mark is decorative and sits behind the text, so it is
   drawn on the card rather than inserted into the content. */
.elementor .sw-review::before {
  content: "\201C";
  position: absolute;
  top: 0.35rem;
  right: 1.25rem;
  font-family: var(--sw-font-serif);
  font-size: 4.5rem;
  line-height: 1;
  color: var(--sw-copper);
  opacity: 0.16;
  pointer-events: none;
}
.elementor .sw-review .elementor-testimonial-wrapper { text-align: left; }
.elementor .sw-review .elementor-testimonial-content {
  position: relative;
  font-family: var(--sw-font-serif);
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--sw-ink);
}
.elementor .sw-review .elementor-testimonial-meta { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--sw-line); }
.elementor .sw-review .elementor-testimonial-meta-inner { justify-content: flex-start; }
.elementor .sw-review .elementor-testimonial-name {
  font-family: var(--sw-font-sans);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--sw-ink);
}
.elementor .sw-review .elementor-testimonial-job {
  margin-top: 0.1875rem;
  font-family: var(--sw-font-sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sw-copper-ink);
}
.elementor .sw-reviews-note {
  margin-top: 1.75rem;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--sw-ink-muted);
}
.elementor .sw-reviews-link { margin-top: 1.25rem; }

@media (max-width: 1024px) {
  .elementor .sw-reviews-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .elementor .sw-reviews-grid { grid-template-columns: minmax(0, 1fr); }
}


/* --- how we defend: the five places a DUI case can fail --------
   Elementor Icon Box widgets with no icon: the step number is drawn
   from a CSS counter instead, in the mono face that ships in
   tokens.css and had no job until now. Numbers, not icons, because
   these are the pieces of one case in order, not five features. */
.elementor .sw-defend-split {
  display: grid;
  /* 24rem, not the FAQ's 22: "How we defend DUI cases" breaks to three
     lines in the narrower column. */
  grid-template-columns: minmax(0, 24rem) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.elementor .sw-defend-intro .sw-defend-copy { margin-top: 1.5rem; }
.elementor .sw-defend-intro p {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--sw-ink-muted);
}
.elementor .sw-defend-lead p {
  margin: 0 0 0.5rem;
  font-family: var(--sw-font-serif);
  font-size: 1.25rem;
  line-height: 1.4;
  color: var(--sw-ink);
}
.elementor .sw-defend-list { counter-reset: sw-defend; }
.elementor .sw-defend-item {
  position: relative;
  counter-increment: sw-defend;
  padding: 1.5rem 0 1.5rem 3.5rem;
  border-bottom: 1px solid var(--sw-line);
}
.elementor .sw-defend-item:first-of-type { border-top: 1px solid var(--sw-line); }
.elementor .sw-defend-item::before {
  content: counter(sw-defend, decimal-leading-zero);
  position: absolute;
  top: 1.6rem;
  left: 0;
  font-family: var(--sw-font-mono);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--sw-copper-ink);
}
.elementor .sw-defend-item .elementor-icon-box-title {
  margin: 0;
  font-family: var(--sw-font-serif);
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 1.3;
  color: var(--sw-ink);
}
.elementor .sw-defend-item .elementor-icon-box-title a { color: inherit; }
.elementor .sw-defend-item .elementor-icon-box-description {
  margin: 0.5rem 0 0;
  max-width: 46rem;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--sw-ink-muted);
}
.elementor .sw-defend-item .elementor-icon-box-wrapper { text-align: left; }
.elementor .sw-defend-close p {
  margin: 1.75rem 0 0;
  max-width: 40rem;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--sw-ink);
}

@media (max-width: 1024px) {
  .elementor .sw-defend-split { grid-template-columns: minmax(0, 1fr); }
}


/* --- results grid ---------------------------------------------
   The old ledger put the verdict in 12px copper caps and the charge
   in 20px serif, so the charge won the eye and the win whispered.
   Here the outcome is the headline, the charge is the label above
   it, and the county and year sit at the foot of the card — year in
   the mono face, same as the step numbers in #how-we-defend.
   `margin-top: auto` on the meta keeps those feet aligned across a
   row no matter how long the detail runs. */
.elementor .sw-results-head { max-width: 44rem; }
.elementor .sw-results-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  margin-top: 2.5rem;
}
.elementor .sw-result-card {
  height: 100%;
  padding: 1.5rem 1.5rem 1.375rem;
  border-top: 2px solid var(--sw-line);
  border-radius: 0;
  transition: background-color 0.2s ease-out;
}
/* Sage on hover. Deliberately lighter than the featured card's resting
   wash, and the copper top rule is left alone, so hovering a card never
   makes it look like the featured one. */
.elementor .sw-result-card:hover {
  background-color: color-mix(in oklab, var(--sw-sage) 26%, transparent);
}
/* The strongest result leads: copper edge, a sage wash, and a size
   up on the verdict. */
.elementor .sw-result-feature {
  border-top-color: var(--sw-copper);
  background-color: color-mix(in oklab, var(--sw-sage) 58%, transparent);
}
.elementor .sw-result-feature:hover {
  background-color: color-mix(in oklab, var(--sw-sage) 74%, transparent);
}
@media (prefers-reduced-motion: reduce) {
  .elementor .sw-result-card { transition: none; }
}
.elementor .sw-result-label .elementor-heading-title {
  font-family: var(--sw-font-sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sw-copper-ink);
}
.elementor .sw-result-body .elementor-icon-box-title {
  margin: 0.625rem 0 0;
  font-family: var(--sw-font-serif);
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.15;
  color: var(--sw-ink);
}
.elementor .sw-result-feature .sw-result-body .elementor-icon-box-title { font-size: 1.875rem; }
.elementor .sw-result-body .elementor-icon-box-description {
  margin: 0.625rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--sw-ink-muted);
}
.elementor .sw-result-body .elementor-icon-box-wrapper { text-align: left; }
.elementor .sw-result-meta {
  margin-top: auto;
  padding-top: 1.25rem;
}
.elementor .sw-result-meta .elementor-heading-title {
  font-family: var(--sw-font-mono);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--sw-ink-muted);
}
.elementor .sw-results-note {
  margin-top: 1.75rem;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--sw-ink-muted);
}
.elementor .sw-results-cta { margin-top: 1.5rem; }

@media (max-width: 1024px) {
  .elementor .sw-results-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .elementor .sw-results-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------
   CONTACT PAGE
   The CF7 skin above (.sw-consult-form) is built for the dark
   panel — its labels are on-forest-muted, which would sit at about
   1.3:1 on bone. So the form keeps its forest card here instead of
   being restyled for light, and the rail beside it carries the
   phone and email on the bone ground.
   ------------------------------------------------------------ */
.elementor .sw-contact-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
.elementor .sw-contact-panel {
  padding: clamp(1.75rem, 3vw, 2.5rem);
  border-radius: var(--sw-r-lg);
}
.elementor .sw-contact-panel .sw-lede { margin-top: 0.75rem; }

.elementor .sw-contact-rail { gap: 0; }
.elementor .sw-contact-rail .sw-eyebrow .elementor-heading-title {
  font-family: var(--sw-font-sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sw-copper-ink);
}
.elementor .sw-contact-line { margin-bottom: 1.75rem; }
.elementor .sw-contact-line .sw-contact-value .elementor-heading-title {
  margin-top: 0.375rem;
  font-family: var(--sw-font-serif);
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--sw-ink);
}
.elementor .sw-contact-line .sw-contact-value a { color: inherit; text-decoration: none; }
.elementor .sw-contact-line .sw-contact-value a:hover { color: var(--sw-copper-ink); }
.elementor .sw-contact-line .sw-contact-note p {
  margin: 0.375rem 0 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--sw-ink-muted);
}

/* --- offices --------------------------------------------------- */
.elementor .sw-contact-offices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  margin-top: 2.5rem;
}
.elementor .sw-contact-office {
  height: 100%;
  padding: 1.75rem;
  border: 1px solid var(--sw-line);
  border-radius: var(--sw-r-md);
  background-color: var(--sw-card);
}
.elementor .sw-contact-office .sw-office-name .elementor-heading-title {
  margin: 0;
  font-family: var(--sw-font-serif);
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--sw-ink);
}
.elementor .sw-contact-office .sw-office-address p {
  margin: 0.625rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--sw-ink-muted);
}
.elementor .sw-contact-office .sw-office-directions { margin-top: auto; padding-top: 1.25rem; }
.elementor .sw-contact-office .sw-office-directions .elementor-button {
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--sw-copper-ink);
}
.elementor .sw-contact-office .sw-office-directions .elementor-button:hover { color: var(--sw-forest); background: transparent; }

@media (max-width: 1024px) {
  .elementor .sw-contact-split { grid-template-columns: minmax(0, 1fr); }
  .elementor .sw-contact-offices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .elementor .sw-contact-offices { grid-template-columns: minmax(0, 1fr); }
}

/* --- results grid: four-card variant ---------------------------
   Four results in the three-up grid leave one orphan on its own row.
   Pages with four go two-by-two instead. Three and six fit as is. */
.elementor .sw-results-grid.sw-results-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 767px) {
  .elementor .sw-results-grid.sw-results-pair { grid-template-columns: minmax(0, 1fr); }
}

/* --- process band built from widgets ----------------------------
   Same look as the hand-written .sw-steps list in #after-an-arrest,
   rebuilt on Icon Box widgets for the pages that need their own steps
   (post-conviction). Spine on the container, a copper node per step. */
.elementor .sw-steps-head .sw-lede { margin-top: 1rem; }
.elementor .sw-steps-w {
  margin-top: 2.5rem;
  padding-left: 2.25rem;
  border-left: 1px solid var(--sw-line-forest);
  gap: 0;
}
.elementor .sw-step {
  position: relative;
  padding-bottom: 2.5rem;
}
.elementor .sw-step:last-child { padding-bottom: 0; }
.elementor .sw-step::before {
  content: "";
  position: absolute;
  left: -2.25rem;
  top: 0.5rem;
  transform: translateX(-50%);
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--sw-copper);
  box-shadow: 0 0 0 4px var(--sw-forest-deep);
}
.elementor .sw-step .elementor-icon-box-wrapper { text-align: left; }
.elementor .sw-step .elementor-icon-box-title {
  margin: 0;
  font-family: var(--sw-font-serif);
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.25;
  color: var(--sw-on-forest);
}
.elementor .sw-step .elementor-icon-box-description {
  margin: 0.625rem 0 0;
  max-width: 54rem;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--sw-on-forest-muted);
}

/* ------------------------------------------------------------
   TEAM — /attorney/ grid and /attorney/{name}/ profiles
   All Elementor widgets: Image, Heading, Text Editor (plain text,
   one paragraph per widget), Button. Photos are pre-cropped to 4:5
   so faces sit at the same height across a row.
   ------------------------------------------------------------ */
.elementor .sw-team-head { max-width: 44rem; }
.elementor .sw-team-head .elementor-widget-heading::after {
  content: ""; display: block; width: 3.5rem; height: 2px; margin-top: 1.5rem; background: var(--sw-copper);
}
.elementor .sw-team-head .sw-lede { margin-top: 1rem; }
.elementor .sw-team-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.5rem 1.5rem;
  margin-top: 2.5rem;
}
.elementor .sw-team-card { gap: 0; }
.elementor .sw-team-card .sw-team-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: top;
  border-radius: var(--sw-r-md);
  transition: transform .35s ease-out;
}
.elementor .sw-team-card .sw-team-photo a { display: block; overflow: hidden; border-radius: var(--sw-r-md); }
.elementor .sw-team-card:hover .sw-team-photo img { transform: scale(1.025); }
.elementor .sw-team-card .sw-team-name .elementor-heading-title {
  margin-top: 1.125rem;
  font-family: var(--sw-font-serif);
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--sw-ink);
}
.elementor .sw-team-card .sw-team-name a { color: inherit; text-decoration: none; }
.elementor .sw-team-card .sw-team-name a:hover { color: var(--sw-copper-ink); }
.elementor .sw-team-role .elementor-heading-title {
  margin-top: 0.375rem;
  font-family: var(--sw-font-sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sw-copper-ink);
}
/* No photo yet: a quiet forest panel with the name's initials, sized
   exactly like a photo so the row still lines up. Replace, don't keep. */
.elementor .sw-team-nophoto {
  aspect-ratio: 4 / 5;
  border-radius: var(--sw-r-md);
  background: var(--sw-forest-deep);
  justify-content: center;
  align-items: center;
}
.elementor .sw-team-nophoto .elementor-heading-title {
  font-family: var(--sw-font-serif);
  font-size: 3.5rem;
  color: var(--sw-copper-light);
  letter-spacing: 0.04em;
}

/* --- profile ---------------------------------------------------- */
.elementor .sw-profile {
  display: grid;
  grid-template-columns: minmax(0, 24rem) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.elementor .sw-profile .sw-team-photo img {
  display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: top;
  border-radius: var(--sw-r-lg);
}
.elementor .sw-profile-photo-col { position: sticky; top: 7rem; }
.elementor .sw-profile-body .sw-team-role .elementor-heading-title { margin-top: 0; }
.elementor .sw-profile-body h1.elementor-heading-title {
  margin: 0.75rem 0 0;
  font-family: var(--sw-font-serif);
  font-weight: 500;
  font-size: clamp(2.25rem, 4.5vw, 3.5rem);
  line-height: 1.06;
  letter-spacing: -0.018em;
  color: var(--sw-ink);
}
.elementor .sw-profile-name::after { content: ""; display: block; width: 3.5rem; height: 2px; margin: 1.5rem 0 0.5rem; background: var(--sw-copper); }
.elementor .sw-bio-para {
  margin-top: 1.25rem;
  max-width: 44rem;
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--sw-ink-muted);
}
.elementor .sw-profile-actions { flex-wrap: wrap; gap: 0.875rem; margin-top: 2rem; }
.elementor .sw-profile-actions > .elementor-element { flex: 0 1 auto; width: auto; }
.elementor .sw-profile-back { margin-bottom: 1.5rem; }
.elementor .sw-profile-back .elementor-button {
  padding: 0; border: 0; background: transparent;
  font-size: 0.75rem; letter-spacing: 0.1em; color: var(--sw-ink-muted);
}
.elementor .sw-profile-back .elementor-button:hover { color: var(--sw-copper-ink); background: transparent; }

@media (max-width: 1024px) {
  .elementor .sw-team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .elementor .sw-profile { grid-template-columns: minmax(0, 1fr); }
  .elementor .sw-profile-photo-col { position: static; max-width: 22rem; }
}
@media (max-width: 600px) {
  .elementor .sw-team-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .elementor .sw-team-card .sw-team-photo img { transition: none; }
}

/* --- CTA attorney card, widget build ------------------------------
   Same card as the hand-written .sw-cta-card, assembled from Heading,
   Icon Box and Text Editor widgets so it edits in the panel. First
   used for Matthew on the personal injury pages. */
.elementor .sw-cta-card.sw-cta-card-w { gap: 0; }
.elementor .sw-cta-w-eyebrow .elementor-heading-title {
  font-family: var(--sw-font-sans); font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--sw-on-forest-muted);
}
.elementor .sw-cta-w-name .elementor-heading-title {
  margin-top: 0.5rem; font-family: var(--sw-font-serif); font-weight: 500;
  font-size: 1.75rem; line-height: 1.15; color: var(--sw-on-forest);
}
.elementor .sw-cta-w-role .elementor-heading-title {
  margin-top: 0.375rem; font-family: var(--sw-font-sans); font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.1em; line-height: 1.6; text-transform: uppercase; color: var(--sw-on-forest-muted);
}
.elementor .sw-cta-w-areas { margin-top: 1.5rem; gap: 1.125rem; }
.elementor .sw-cta-w-area .elementor-icon-box-wrapper { display: flex; align-items: flex-start; gap: 0.875rem; text-align: left; }
.elementor .sw-cta-w-area .elementor-icon-box-icon { margin: 0.125rem 0 0; flex: none; }
.elementor .sw-cta-w-area .elementor-icon { font-size: 1.25rem; color: var(--sw-copper-light); fill: var(--sw-copper-light); }
.elementor .sw-cta-w-area .elementor-icon svg { width: 1.25rem; height: 1.25rem; }
.elementor .sw-cta-w-area .elementor-icon-box-title {
  margin: 0; font-family: var(--sw-font-sans); font-size: 0.8125rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--sw-on-forest);
}
.elementor .sw-cta-w-area .elementor-icon-box-description {
  margin: 0.25rem 0 0; font-size: 0.875rem; line-height: 1.5; color: var(--sw-on-forest-muted);
}
.elementor .sw-cta-w-bio {
  margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(247, 246, 242, 0.16);
  font-size: 0.875rem; line-height: 1.6; color: var(--sw-on-forest-muted);
}
/* The kit adds --kit-widget-spacing (20px) under every widget; the card
   sets its own rhythm, so it is zeroed for the widgets inside it. */
.elementor .sw-cta-card-w .elementor-widget { --kit-widget-spacing: 0px; margin-block-end: 0; }
/* Elementor writes a per-element icon colour at five classes
   (.elementor-N .elementor-element.elementor-element-ID.elementor-view-default
   .elementor-icon), which out-ranked the rule above and painted the icons
   #222. Six classes here. */
.elementor .sw-cta-card-w .sw-cta-w-area.elementor-widget .elementor-icon-box-icon .elementor-icon { color: var(--sw-copper-light); fill: var(--sw-copper-light); }
.elementor .sw-cta-card-w .sw-cta-w-area.elementor-widget .elementor-icon-box-icon .elementor-icon svg { fill: var(--sw-copper-light); }

/* ------------------------------------------------------------
   OFFICE CARDS (2026-09-25) — template "SW Office Cards", used on
   Home #locations, About and /locations/. Mockup "A · Light grid".
   Every part is a widget: Heading, Star Rating, Image, Icon List,
   Button. Five cards sit 3 + 2 with the second row centred (six-track
   grid, each card spans two).
   ------------------------------------------------------------ */
.elementor .sw-oc-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1.5rem;
  padding: 0;
}
.elementor .sw-oc-grid > .sw-oc { grid-column: span 2; }
.elementor .sw-oc-grid > .sw-oc:nth-child(4) { grid-column: 2 / span 2; }
@media (max-width: 1024px) {
  .elementor .sw-oc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .elementor .sw-oc-grid > .sw-oc,
  .elementor .sw-oc-grid > .sw-oc:nth-child(4) { grid-column: auto; }
  .elementor .sw-oc-grid > .sw-oc:nth-child(5) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 0.75rem); }
}
@media (max-width: 700px) {
  .elementor .sw-oc-grid { grid-template-columns: minmax(0, 1fr); }
  .elementor .sw-oc-grid > .sw-oc:nth-child(5) { width: 100%; }
}

.elementor .sw-oc {
  --kit-widget-spacing: 0px;
  display: flex;
  flex-direction: column;
  gap: 0;
  height: 100%;
  padding: 1.75rem;
  background-color: var(--sw-card);
  border: 1px solid var(--sw-line);
  border-radius: 1rem;
  box-shadow: 0 22px 44px -30px rgba(10, 33, 28, 0.45);
  scroll-margin-top: 8rem;
}
.elementor .sw-oc .e-con { padding: 0; gap: 0; }

/* top row: identity left, Google rating right */
.elementor .sw-oc .sw-oc-top { flex-direction: row; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.elementor .sw-oc .sw-oc-top > .sw-oc-id { flex: 1 1 auto; width: auto; min-width: 0; }
.elementor .sw-oc .sw-oc-top > .sw-oc-rating { flex: 0 0 auto; width: auto; text-align: right; align-items: flex-end; }
.elementor .sw-oc .sw-oc-rating.is-pending { display: none; }

.elementor .sw-oc .sw-oc-eyebrow .elementor-heading-title { font-size: 0.6875rem; }
.elementor .sw-oc .sw-oc-city .elementor-heading-title {
  margin: 0.5rem 0 0;
  font-family: var(--sw-font-serif);
  font-weight: 500;
  font-size: 1.875rem;
  line-height: 1.1;
  color: var(--sw-ink);
}
.elementor .sw-oc .sw-oc-coords .elementor-heading-title {
  margin: 0.625rem 0 0;
  font-family: var(--sw-font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  color: var(--sw-ink-muted);
}
.elementor .sw-oc .sw-oc-source .elementor-heading-title {
  font-family: var(--sw-font-sans);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sw-ink-muted);
}
.elementor .sw-oc .sw-oc-score .elementor-heading-title {
  margin-top: 0.125rem;
  font-family: var(--sw-font-serif);
  font-weight: 600;
  font-size: 2.875rem;
  line-height: 1;
  color: var(--sw-ink);
}
.elementor .sw-oc .sw-oc-stars .elementor-star-rating { font-size: 0.875rem; color: var(--sw-copper); }
.elementor .sw-oc .sw-oc-stars .elementor-star-rating i:before { color: var(--sw-copper); }
.elementor .sw-oc .sw-oc-count .elementor-heading-title {
  margin-top: 0.375rem;
  font-family: var(--sw-font-sans);
  font-size: 0.75rem;
  color: var(--sw-ink-muted);
}

/* photo: one tone across five unrelated city shots, forest fade, city tag */
.elementor .sw-oc .sw-oc-photo {
  position: relative;
  margin: 1.5rem 0;
  border-radius: 0.625rem;
  overflow: hidden;
  background: var(--sw-sage);
}
.elementor .sw-oc .sw-oc-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 33, 28, 0) 52%, rgba(10, 33, 28, 0.62) 100%);
  pointer-events: none;
}
.elementor .sw-oc .sw-oc-img img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  filter: saturate(0.82) contrast(1.03);
}
.elementor .sw-oc .sw-oc-photo > .sw-oc-tag {
  position: absolute;
  left: 0.875rem;
  bottom: 0.75rem;
  z-index: 2;
  width: auto;
}
.elementor .sw-oc .sw-oc-tag .elementor-heading-title {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-family: var(--sw-font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sw-on-forest);
}
.elementor .sw-oc .sw-oc-tag .elementor-heading-title::before {
  content: "";
  width: 13px;
  height: 13px;
  background: var(--sw-copper-light);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* address + phone */
.elementor .sw-oc .sw-oc-details .elementor-icon-list-items { display: flex; flex-direction: column; gap: 0.75rem; }
.elementor .sw-oc .sw-oc-details .elementor-icon-list-item { align-items: flex-start; padding: 0; margin: 0; }
.elementor .sw-oc .sw-oc-details .elementor-icon-list-item > a { align-items: flex-start; }
.elementor .sw-oc .sw-oc-details .elementor-icon-list-icon { width: 1.125rem; margin-top: 0.2rem; }
.elementor .sw-oc .sw-oc-details .elementor-icon-list-icon svg { width: 0.9375rem; height: 0.9375rem; fill: var(--sw-copper-ink); }
.elementor .sw-oc .sw-oc-details .elementor-icon-list-icon i { font-size: 0.9375rem; color: var(--sw-copper-ink); }
.elementor .sw-oc .sw-oc-details .elementor-icon-list-text {
  padding-inline-start: 0.625rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--sw-ink);
}
.elementor .sw-oc .sw-oc-details a .elementor-icon-list-text { font-weight: 600; }
.elementor .sw-oc .sw-oc-details a:hover .elementor-icon-list-text { color: var(--sw-forest); }

/* actions: directions left, reviews right, under a hairline */
.elementor .sw-oc .sw-oc-actions {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: auto;
  padding-top: 1.125rem;
  border-top: 1px solid var(--sw-line);
}
.elementor .sw-oc .sw-oc-details { margin-bottom: 1.5rem; }
.elementor .sw-oc .sw-oc-actions > .elementor-widget { width: auto; }
.elementor .sw-oc .sw-oc-actions .elementor-button {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.elementor .sw-oc .sw-oc-dir .elementor-button {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sw-copper-ink);
}
.elementor .sw-oc .sw-oc-rev .elementor-button {
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  color: var(--sw-forest);
}
.elementor .sw-oc .sw-oc-actions .elementor-button:hover { background: transparent; color: var(--sw-forest); }
.elementor .sw-oc .sw-oc-dir .elementor-button:hover { color: var(--sw-forest); }
.elementor .sw-oc .sw-oc-rev .elementor-button:hover { color: var(--sw-copper-ink); }
.elementor .sw-oc .sw-oc-actions .elementor-button-icon svg { width: 0.8125rem; height: 0.8125rem; fill: currentColor; }
.elementor .sw-oc .sw-oc-actions .elementor-button-content-wrapper { gap: 0.5rem; }

/* Home: "every office, one line" box where the map used to be */
.elementor .sw-locations-top > .sw-oc-line { flex: 0 0 auto; width: auto; }
.elementor .sw-oc-line {
  --kit-widget-spacing: 0px;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
  padding: 1.125rem 1.375rem;
  background-color: var(--sw-card);
  border: 1px solid var(--sw-line);
  border-radius: 0.75rem;
}
.elementor .sw-oc-line > .sw-oc-line-text { width: auto; padding: 0; gap: 0.25rem; }
.elementor .sw-oc-line .sw-oc-line-icon .elementor-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--sw-forest);
  font-size: 1rem;
  color: var(--sw-copper-light);
}
.elementor .sw-oc-line .sw-oc-line-icon .elementor-icon svg { width: 1rem; height: 1rem; fill: var(--sw-copper-light); }
.elementor .sw-oc-line .sw-oc-line-label .elementor-heading-title {
  font-family: var(--sw-font-sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sw-ink-muted);
}
.elementor .sw-oc-line .sw-oc-line-num .elementor-heading-title,
.elementor .sw-oc-line .sw-oc-line-num .elementor-heading-title a {
  font-family: var(--sw-font-serif);
  font-size: 1.625rem;
  font-weight: 500;
  color: var(--sw-ink);
}
.elementor .sw-oc-line .sw-oc-line-num .elementor-heading-title a:hover { color: var(--sw-forest); }
/* Elementor only loads its icon-list stylesheet on pages with an icon list of
   their own; inside the template on /locations/ the bare <ul> kept its bullets. */
.elementor .sw-oc .sw-oc-details .elementor-icon-list-items { list-style: none; margin: 0; padding: 0; }
.elementor .sw-oc .sw-oc-details .elementor-icon-list-item { display: flex; }
.elementor .sw-oc .sw-oc-details .elementor-icon-list-item > a { display: flex; }
.elementor .sw-oc .sw-oc-details .elementor-icon-list-icon { display: flex; flex-shrink: 0; }
.elementor .sw-oc .sw-oc-actions { flex-wrap: wrap; row-gap: 0; }
.elementor .sw-locations-top > .sw-oc-line { margin-inline-start: auto; align-self: flex-end; }