/* Shared page-content container and typography scale.
   Single source of truth for both, replacing the per-page/per-row
   Duda-autogenerated u_XXXXXXX rules this migration is removing.
   Scoped to #dm_content so header/footer (which keep their own existing,
   already-shared styling from partials/*.html) are never affected. */

/* The site's color palette, referenced throughout header/footer/content
   as var(--color_N). Previously redefined identically in every page's own
   <style id="cssVariables"> block (confirmed byte-identical sitewide) -
   the global stylesheet only ever references these vars, never defines
   them, so this is the one place that now does. */
:root {
  --color_1: rgba(13,28,59,1);
  --color_2: rgba(210,164,18,1);
  --color_3: rgba(239,239,239,1);
  --color_4: rgba(239,239,239,1);
  --color_5: rgba(13,28,59,1);
  --color_6: rgba(13,28,59,1);
  --color_7: rgba(255, 255, 255, 1);
  --color_8: rgba(210,164,18,1);
  --color_9: rgba(26, 106, 164, 1);
}

/* ==========================================================================
   Base + grid — this site's own, replacing Duda's exported stylesheets.

   Everything Duda's CSS used to supply for page content (box-sizing reset,
   body defaults, the .dmRespRow/.dmRespCol grid, heading colors and
   uppercasing, link styling, the white content background) is defined here
   instead, so no page depends on the export any more. Values were taken
   from a computed-style capture of the live site before the swap, so the
   rendering is the same except where deliberately improved (noted inline).
   ========================================================================== */

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

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

body {
  margin: 0;
  padding: 0;
  /* Duda painted the page canvas #eee and then set every content row to
     white on top of it; with the row-level background gone, the page is
     simply white. */
  background: #fff;
  color: #000;
  font-family: Roboto, 'Roboto Fallback', Arial, sans-serif;
  font-size: 16px;
}

img,
iframe,
video {
  max-width: 100%;
}

img {
  height: auto;
}

/* --- 12-column grid ---------------------------------------------------
   CSS Grid rather than flex percentages: with flex, `gap` is added on top
   of widths that already sum to 100%, and flex-wrap judges fit using the
   UNSHRUNK size, so any gutter tips a two-column row onto separate lines
   (hit exactly this on the attorney bio pages). Grid tracks account for
   the gap natively, so columns and gutters can't fight. */
.tsl-cols {
  display: grid;
  /* minmax(0, 1fr), not plain 1fr: a bare `1fr` track has an automatic
     min-content floor, so one long unbreakable token (e.g. the 112-char
     WSP form URL printed as link text on /expungements) forces the track
     - and the whole page - wider than the viewport. Measured 530px of
     content in a 390px viewport before this. */
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 32px;
  align-items: start;
}

.tsl-col-2 { grid-column: span 2; }
.tsl-col-3 { grid-column: span 3; }
.tsl-col-4 { grid-column: span 4; }
.tsl-col-6 { grid-column: span 6; }
.tsl-col-8 { grid-column: span 8; }
.tsl-col-10 { grid-column: span 10; }
.tsl-col-12 { grid-column: span 12; }

/* A row is just a block; the grid lives on .tsl-cols inside it. Vertical
   rhythm between stacked rows comes from the elements' own margins plus
   .tsl-section, not from per-row padding the way Duda did it. */
.tsl-row + .tsl-row {
  margin-top: 28px;
}

@media (max-width: 767.98px) {
  .tsl-cols {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
  .tsl-col-2,
  .tsl-col-3,
  .tsl-col-4,
  .tsl-col-6,
  .tsl-col-8,
  .tsl-col-10,
  .tsl-col-12 {
    grid-column: 1 / -1;
  }
}

/* Tablet: 2- and 3-across layouts stay multi-column, but the very narrow
   tracks (2/12, 3/12) get too cramped for real text, so they pair up. */
@media (min-width: 768px) and (max-width: 991.98px) {
  .tsl-col-2 { grid-column: span 4; }
  .tsl-col-3 { grid-column: span 6; }
}

.tsl-container {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 40px;
  padding-right: 40px;
  box-sizing: border-box;
}

.tsl-section {
  padding-top: 60px;
  padding-bottom: 60px;
}

/* Headings are navy on light backgrounds. The brand gold (#D2A412) only
   reaches 2.32:1 on white, below the WCAG AA minimum of 3:1 for large
   text and 4.5:1 for normal, so it is kept for dark surfaces - the logo,
   the header phone number, footer headings, the Practice Focus card -
   where it measures 7.3:1. Uppercasing was captured from the live site
   before the Duda stylesheets were removed. */
#dm_content h1 {
  font-family: 'Fjalla One', 'Fjalla One Fallback';
  font-size: 60px;
  font-weight: 400;
  line-height: 1.125;
  color: #0D1C3B;
  text-transform: uppercase;
  margin: 0 0 24px;
}

#dm_content h2 {
  font-family: 'Fjalla One', 'Fjalla One Fallback';
  font-size: 35px;
  font-weight: 400;
  line-height: 1.125;
  color: #0D1C3B;
  text-transform: uppercase;
  margin: 0 0 20px;
}

#dm_content h3 {
  font-family: 'Fjalla One', 'Fjalla One Fallback';
  font-size: 24px;
  font-weight: 400;
  line-height: 1.2;
  color: #0D1C3B;
  text-transform: uppercase;
  margin: 0 0 16px;
}

/* Duda's homepage-only stylesheet ships four competing, unscoped h4 color
   rules (#dm div.dmContent h4, ...), the last of which is white - meant for
   headings inside a dark footer widget, but since the selector also matches
   #dm div.dmContent h4 alone, EVERY h4 anywhere in the page content inherits
   white by default, including on plain white backgrounds (confirmed via
   the practice-areas icon grid rendering white-on-white, i.e. invisible).
   h1-h3 already get an explicit color here for the same reason; h4 needs
   the same treatment. */
#dm_content h4 {
  font-family: 'Fjalla One', 'Fjalla One Fallback';
  font-size: 18px;
  font-weight: 400;
  line-height: 1.3;
  color: #0D1C3B;
  margin: 16px 0 0;
}

/* Long URLs pasted as visible link text are common in this content;
   let them break rather than widen the column. */
#dm_content {
  overflow-wrap: break-word;
}

#dm_content p,
#dm_content li {
  font-family: Roboto, 'Roboto Fallback';
  font-size: 16px;
  line-height: 24px;
  color: #000;
  margin: 0 0 16px;
}

/* Duda's export strips the browser default UL/OL indentation and never
   re-adds it (confirmed absent from every shipped stylesheet) - every
   bulleted/numbered list on the site was rendering flush-left. */
#dm_content ul,
#dm_content ol {
  padding-left: 24px;
  margin: 16px 0;
}

/* Body links. Duda's export coloured these #463939 (a dark brown that
   reads as body text rather than a link); switched to the palette's own
   blue, which is unambiguously a link and still passes AA contrast on
   white. Headings that are themselves links keep the heading colour via
   the `color: inherit` rule further down. */
#dm_content a {
  color: var(--color_9);
  text-decoration: underline;
}

#dm_content a:hover {
  text-decoration: none;
}

/* The gold "5 stars" strip is a decorative accent above review quotes,
   but the asset is 597px wide and nothing ever constrained it, so it
   rendered as a full-width banner (this was true on the Duda site too).
   Cap it to an accent size; it appears ~31 times across the site. */
#dm_content img[src*="5_stars"]:not(.tsw-inline-stars) {
  width: 160px;
  height: auto;
}

/* Same asset used inline inside a line of text ("5 Star Review – ★★★★★"
   in the homepage hero slider). Sized to the surrounding text rather than
   capped like the standalone accent above. It replaced the ⭐ emoji, which
   renders as a hollow white outline rather than gold on some platforms. */
#dm_content .tsw-inline-stars {
  height: 1em;
  width: auto;
  vertical-align: -0.12em;
  margin-left: 4px;
}

/* Belt-and-braces against a stretched image if a page ever sets a width
   without a matching height (the base `img { height: auto }` above already
   covers the normal case). */
#dm_content img {
  height: auto;
}

/* A heading's own color (set below) doesn't cascade to a nested <a> -
   anchors get their own color from Duda's global CSS, which wins over the
   inherited heading color without an explicit rule here. Affects any
   linked heading, including the auto-generated post-grid cards. */
#dm_content h1 a,
#dm_content h2 a,
#dm_content h3 a {
  color: inherit !important;
}

/* Duda ships a submit-button color rule but its background never resolves
   (same class of gap as the missing --color_N variables found earlier) -
   every contact form's SEND button was rendering as invisible white-on-white. */
#dm_content .dmformsubmit input[type="submit"] {
  background: var(--color_2) !important;
  color: #fff !important;
  border: none !important;
  cursor: pointer !important;
}

/* Shared "REACH OUT TODAY" sidebar treatment - previously a page-specific
   Duda background color that didn't survive porting to plain markup. One
   class instead of per-page inline styles, so it can be restyled sitewide
   from here. */
#dm_content .tsl-sidebar-box {
  background: var(--color_1) !important;
  padding: 32px 24px !important;
  border-radius: 6px !important;
}

/* Pages carrying a "Reach out today" box (.tsl-has-aside on the content
   container). The box is much taller than the intro text it sits beside,
   so as an ordinary grid cell it set the height of the whole first row and
   every following row began below it - a measured 464px of dead white space
   on dui-defense-attorney.html before the next section could start.

   Floating it lets the rest of the page flow up alongside and then past it,
   which is just a normal magazine sidebar. This is what an earlier attempt
   tried and failed at, because Duda's own `.dmRespRow::after { clear:both }`
   clearfix re-contained the float; that stylesheet is gone now, so nothing
   fights it. `display: flow-root` on the container keeps the float from
   escaping the section into the footer if it ever out-runs the content. */
/* 1100px, not 768px: the box holds a reCAPTCHA widget, which Google
   renders at a FIXED 304px. At a third of the content width the box is
   only ~139px wide at an 820px viewport, so the widget overflowed it by
   ~190px and the whole box looked squashed and skewed (reported on a
   Tesla browser, but it affects every tablet-ish width). Below 1100px the
   box simply stacks full-width, where the widget always fits. */
@media (min-width: 1100px) {
  #dm_content .tsl-has-aside {
    display: flow-root;
  }
  #dm_content .tsl-has-aside .tsl-cols:has(> .tsl-sidebar-box) {
    display: block;
  }
  #dm_content .tsl-has-aside .tsl-sidebar-box {
    float: right;
    width: max(352px, calc(33.333% - 22px));
    margin-left: 32px;
    margin-bottom: 32px;
  }
}

/* The box has to come FIRST in source order for the float above to work
   (a float only affects content that follows it). Stacked on mobile that
   would put the contact form ahead of the page's actual content, so the
   grid re-orders it back to last. */
@media (max-width: 1099.98px) {
  /* Below the float breakpoint the box and its main column stack, each
     spanning the full width - otherwise the box stays a 4-of-12 grid item
     (~140px at an 820px viewport) and the reCAPTCHA inside it overflows.
     Scoped to the row that actually holds the box so other multi-column
     rows on the same page keep their tablet layout. */
  #dm_content .tsl-has-aside .tsl-cols:has(> .tsl-sidebar-box) > * {
    grid-column: 1 / -1;
  }
  #dm_content .tsl-has-aside .tsl-sidebar-box {
    order: 1;
  }
}

#dm_content .tsl-sidebar-box h2,
#dm_content .tsl-sidebar-box h3,
#dm_content .tsl-sidebar-box p {
  color: var(--color_7) !important;
}

/* The box heading is an h2 for document structure - it precedes the main
   column in source order, so an h3 made every one of these pages skip
   straight from h1 to h3 - but it should still read as a card title
   rather than a full page section. */
#dm_content .tsl-box-title {
  font-size: 24px;
  line-height: 1.2;
  margin: 0 0 16px;
}

/* Text-alignment utilities. These used to come from Duda's stylesheet
   (.text-align-center alone is used ~70 times across the site), so they
   have to be defined here now that the export's CSS is gone. */
#dm_content .text-align-left {
  text-align: left !important;
}

#dm_content .text-align-center {
  text-align: center !important;
}

#dm_content .text-align-right {
  text-align: right !important;
}

/* Full-bleed photo hero with a color-wash overlay, used on practice-area
   and location pages. The background image is page-specific (set inline);
   everything else - overlay tint, sizing, text treatment - is shared. */
#dm_content .tsl-hero {
  position: relative;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center !important;
  padding: 100px 40px !important;
  text-align: center !important;
}

#dm_content .tsl-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--color_5);
  opacity: 0.47;
}

#dm_content .tsl-hero > * {
  position: relative;
  z-index: 1;
}

#dm_content .tsl-hero h1 {
  color: var(--color_7) !important;
  font-weight: 800 !important;
  margin: 0 !important;
}

#dm_content .tsl-hero-subtitle {
  color: #fff !important;
  font-family: 'Fjalla One', 'Fjalla One Fallback' !important;
  font-size: 40px !important;
  line-height: 1.125 !important;
  margin: 8px 0 0 !important;
}

/* Auto-generated post grid (case-results, blog index) - driven by
   layouts/post-list.njk off an Eleventy tag collection, so a new post
   with the right `tags:` front matter appears here with no page edit. */
#dm_content .tsl-post-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

#dm_content .tsl-post-card {
  background: #fff !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 6px !important;
  padding: 20px !important;
}

/* Post-grid card titles are h2 (directly under the page h1 on /blog), but
   sized as cards rather than page sections. */
#dm_content .tsl-post-card-title {
  margin: 0 0 4px;
  font-size: 19px;
  line-height: 1.2;
}

#dm_content .tsl-post-date {
  font-family: Roboto, 'Roboto Fallback';
  font-size: 13px;
  color: #666;
  margin: 0 0 10px;
}

@media (max-width: 991.98px) {
  #dm_content .tsl-post-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767.98px) {
  .tsl-container {
    padding-left: 20px;
    padding-right: 20px;
  }

  .tsl-section {
    padding-top: 32px;
    padding-bottom: 32px;
  }

  #dm_content .tsl-hero {
    padding: 60px 20px !important;
  }

  #dm_content h1 {
    font-size: 32px;
  }

  #dm_content h2 {
    font-size: 24px;
  }

  #dm_content h3 {
    font-size: 20px;
  }

  #dm_content .tsl-hero-subtitle {
    font-size: 24px !important;
  }

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

/* ==========================================================================
   Header, nav, drawer, footer, contact form.

   Self-contained: every selector below is scoped to a .tsl-* class defined
   only here, so nothing in Duda's shipped stylesheets can ever match one of
   these selectors and win a specificity fight (the failure mode that hit
   the homepage's colors, the footer's padding, and the practice-areas h4
   labels earlier - see feedback_css_specificity_verification memory).
   Layout uses plain flexbox/grid, no !important needed anywhere in this
   section since there's no competing cascade to out-rank.
   ========================================================================== */

.tsl-shell-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
  box-sizing: border-box;
}

@media (max-width: 767.98px) {
  .tsl-shell-inner {
    padding: 0 20px;
  }
}

/* ---- Keyboard focus ----
   Nothing here suppresses the browser's default ring, but that ring is
   dark and much of this site's chrome is navy, where it barely shows.
   Navy is the default (reads clearly on white and on the gold nav bar);
   navy surfaces switch to white. */
:focus-visible {
  outline: 3px solid var(--color_1);
  outline-offset: 2px;
}

.tsl-header__bar :focus-visible,
.tsl-header--mobile :focus-visible,
.tsl-drawer :focus-visible,
.tsl-footer :focus-visible,
#dm_content .tsl-hero :focus-visible,
#dm_content .tsl-sidebar-box :focus-visible,
#tsw-sticky-call:focus-visible {
  outline-color: #fff;
}

/* Skip link: the nav is ~7 top-level items plus submenus, which a keyboard
   or screen-reader user would otherwise traverse on every single page. */
.tsl-skip-link {
  /* Clipped rather than pushed off-canvas with a large negative offset -
     an off-canvas box can still participate in layout/overflow in some
     engines, and this pattern cannot. */
  position: absolute;
  top: 0;
  left: 0;
  z-index: 200;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  background: var(--color_1);
  color: #fff;
  padding: 12px 20px;
  font-family: Roboto, 'Roboto Fallback', Arial, sans-serif;
  text-decoration: none;
}

.tsl-skip-link:focus {
  width: auto;
  height: auto;
  overflow: visible;
  clip-path: none;
}

/* ---- Header (desktop) ---- */
.tsl-header--desktop {
  display: none;
}

@media (min-width: 1025px) {
  .tsl-header--desktop {
    display: block;
    background: var(--color_1);
  }
  .tsl-header--desktop .tsl-header__bar {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
  }
  .tsl-header--desktop .tsl-header__logo img {
    display: block;
    width: auto;
    height: 72px;
  }
  .tsl-header--desktop .tsl-header__cta {
    text-align: right;
  }
  .tsl-header--desktop .tsl-header__cta-label {
    margin: 0;
    color: var(--color_7);
    font-family: 'Fjalla One', 'Fjalla One Fallback';
    font-size: 20px;
    letter-spacing: 0.3px;
  }
  .tsl-header--desktop .tsl-header__cta-phone {
    display: block;
    color: var(--color_2);
    font-family: 'Fjalla One', 'Fjalla One Fallback';
    font-size: 32px;
    text-decoration: none;
    line-height: 1.2;
  }
  .tsl-header--desktop .tsl-header__cta-phone:hover {
    text-decoration: underline;
  }
}

/* ---- Header (mobile/tablet bar) ---- */
.tsl-header--mobile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  background: var(--color_1);
}

@media (min-width: 1025px) {
  .tsl-header--mobile {
    display: none;
  }
}

.tsl-header--mobile .tsl-header__logo img {
  display: block;
  width: auto;
  height: 48px;
}

.tsl-hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  flex: 0 0 auto;
}

.tsl-hamburger span {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--color_7);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.tsl-hamburger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.tsl-hamburger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.tsl-hamburger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ---- Nav: shared list/item/link styles ---- */
.tsl-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tsl-nav__item {
  position: relative;
}

.tsl-nav__link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.tsl-nav__caret {
  border: none;
  background: transparent;
  cursor: pointer;
  color: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.tsl-nav__chevron {
  transition: transform 0.15s ease;
}

/* ---- Nav: desktop (horizontal bar, hover/focus/click dropdowns) ---- */
@media (min-width: 1025px) {
  .tsl-nav--desktop {
    background: var(--color_2);
  }
  .tsl-nav--desktop > .tsl-nav__list {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    justify-content: space-between;
  }
  .tsl-nav--desktop > .tsl-nav__list > .tsl-nav__item {
    display: flex;
    align-items: center;
  }
  .tsl-nav--desktop .tsl-nav__list[data-depth="0"] > .tsl-nav__item > .tsl-nav__link {
    padding: 16px 14px;
    color: var(--color_1);
    font-family: 'Fjalla One', 'Fjalla One Fallback';
    font-size: 15px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .tsl-nav--desktop .tsl-nav__list[data-depth="0"] > .tsl-nav__item > .tsl-nav__link:hover,
  .tsl-nav--desktop .tsl-nav__list[data-depth="0"] > .tsl-nav__item > .tsl-nav__link.is-current {
    text-decoration: underline;
  }
  .tsl-nav--desktop .tsl-nav__list[data-depth="0"] > .tsl-nav__item--parent > .tsl-nav__caret {
    padding: 16px 14px 16px 0;
    margin-left: -10px;
    color: var(--color_1);
  }
  .tsl-nav--desktop .tsl-nav__item--parent > .tsl-nav__caret[aria-expanded="true"] .tsl-nav__chevron {
    transform: rotate(180deg);
  }

  /* Submenus: hidden by default, shown on hover/focus-within/.is-open. */
  .tsl-nav--desktop .tsl-nav__item .tsl-nav__list[data-depth="1"],
  .tsl-nav--desktop .tsl-nav__item .tsl-nav__list[data-depth="2"] {
    display: none;
    position: absolute;
    background: var(--color_7);
    box-shadow: 0 8px 24px rgba(13, 28, 59, 0.2);
    border-radius: 4px;
    min-width: 240px;
    padding: 8px 0;
    z-index: 40;
  }
  .tsl-nav--desktop .tsl-nav__list[data-depth="0"] > .tsl-nav__item > .tsl-nav__list[data-depth="1"] {
    top: 100%;
    left: 0;
  }
  .tsl-nav--desktop .tsl-nav__list[data-depth="1"] > .tsl-nav__item > .tsl-nav__list[data-depth="2"] {
    top: 0;
    left: 100%;
  }
  .tsl-nav--desktop .tsl-nav__item--parent:hover > .tsl-nav__list,
  .tsl-nav--desktop .tsl-nav__item--parent:focus-within > .tsl-nav__list,
  .tsl-nav--desktop .tsl-nav__item--parent.is-open > .tsl-nav__list {
    display: block;
  }
  .tsl-nav--desktop .tsl-nav__list[data-depth="1"] .tsl-nav__link,
  .tsl-nav--desktop .tsl-nav__list[data-depth="2"] .tsl-nav__link {
    padding: 10px 20px;
    color: var(--color_1);
    font-family: Roboto, 'Roboto Fallback';
    font-size: 14px;
    white-space: nowrap;
  }
  .tsl-nav--desktop .tsl-nav__list[data-depth="1"] .tsl-nav__link:hover,
  .tsl-nav--desktop .tsl-nav__list[data-depth="2"] .tsl-nav__link:hover {
    background: var(--color_3);
  }
  .tsl-nav--desktop .tsl-nav__list[data-depth="1"] .tsl-nav__item--parent > .tsl-nav__caret {
    position: absolute;
    right: 6px;
    top: 6px;
    color: var(--color_1);
  }
  .tsl-nav--desktop .tsl-nav__list[data-depth="1"] .tsl-nav__item--parent > .tsl-nav__caret .tsl-nav__chevron {
    transform: rotate(-90deg);
  }
}

/* ---- Drawer (mobile nav panel) ---- */
.tsl-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(13, 28, 59, 0.6);
  z-index: 90;
}

.tsl-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 85vw;
  max-width: 360px;
  background: var(--color_1);
  z-index: 91;
  overflow-y: auto;
  /* Don't let a scroll gesture inside the drawer chain to the page. */
  overscroll-behavior: contain;
  transform: translateX(100%);
  /* visibility, not transform alone. A full-height position:fixed element
     with overflow-y:auto stays a live, scrollable compositing layer even
     when a transform has moved it off-screen, and Safari can still route
     touch-drags to it - which reads as "the page won't scroll" when you
     swipe on the side the drawer is parked on. visibility:hidden takes it
     out of hit-testing entirely; the 0.25s delay lets the slide-out
     animation finish before it disappears. */
  visibility: hidden;
  transition: transform 0.25s ease, visibility 0s linear 0.25s;
  display: flex;
  flex-direction: column;
}

.tsl-drawer.is-open {
  transform: translateX(0);
  visibility: visible;
  transition: transform 0.25s ease, visibility 0s linear 0s;
}

@media (min-width: 1025px) {
  .tsl-drawer,
  .tsl-drawer-overlay {
    display: none;
  }
}

.tsl-drawer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
}

.tsl-drawer__top .tsl-header__logo img {
  display: block;
  width: auto;
  height: 44px;
}

.tsl-drawer__close {
  border: none;
  background: transparent;
  color: var(--color_7);
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
}

.tsl-nav--drawer {
  padding: 8px 0 24px;
}

.tsl-nav--drawer .tsl-nav__item {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* Every level, not just the top one. Scoping this to data-depth="0" meant
   a nested parent ("Attorneys" under "About") laid its label and its
   expand caret out as two stacked blocks, so the caret sat a full row
   below the label with the submenu between them. */
.tsl-nav--drawer .tsl-nav__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.tsl-nav--drawer .tsl-nav__link {
  flex: 1 1 auto;
  padding: 14px 20px;
  color: var(--color_7);
  font-family: 'Fjalla One', 'Fjalla One Fallback';
  font-size: 16px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.tsl-nav--drawer .tsl-nav__link.is-current {
  color: var(--color_2);
}

.tsl-nav--drawer .tsl-nav__caret {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  color: var(--color_7);
}

.tsl-nav--drawer .tsl-nav__item--parent > .tsl-nav__caret .tsl-nav__chevron {
  transition: transform 0.15s ease;
}

.tsl-nav--drawer .tsl-nav__item--parent > .tsl-nav__caret[aria-expanded="true"] .tsl-nav__chevron {
  transform: rotate(180deg);
}

.tsl-nav--drawer .tsl-nav__item .tsl-nav__list[data-depth="1"],
.tsl-nav--drawer .tsl-nav__item .tsl-nav__list[data-depth="2"] {
  flex-basis: 100%;
  display: none;
  background: rgba(0, 0, 0, 0.15);
}

.tsl-nav--drawer .tsl-nav__item--parent.is-open > .tsl-nav__list {
  display: block;
}

.tsl-nav--drawer .tsl-nav__list[data-depth="1"] .tsl-nav__link,
.tsl-nav--drawer .tsl-nav__list[data-depth="2"] .tsl-nav__link {
  padding-left: 36px;
  font-family: Roboto, 'Roboto Fallback';
  text-transform: none;
  font-size: 15px;
}

.tsl-nav--drawer .tsl-nav__list[data-depth="2"] .tsl-nav__link {
  padding-left: 52px;
}

.tsl-drawer__phone {
  margin-top: auto;
  display: block;
  padding: 18px 20px;
  background: var(--color_2);
  color: var(--color_1);
  text-align: center;
  font-family: 'Fjalla One', 'Fjalla One Fallback';
  font-size: 16px;
  text-decoration: none;
}

body.tsl-no-scroll {
  overflow: hidden;
}

/* ---- Footer ---- */
.tsl-footer {
  background: var(--color_1);
}

.tsl-footer__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
  box-sizing: border-box;
}

.tsl-footer__about {
  padding: 56px 0 32px;
}

.tsl-footer__about-title {
  margin: 0 0 16px;
}

.tsl-footer__about-title a {
  color: var(--color_2);
  text-transform: uppercase;
  text-decoration: none;
  font-family: 'Fjalla One', 'Fjalla One Fallback';
  font-size: 24px;
}

.tsl-footer__about p {
  color: var(--color_7);
  font-family: Roboto, 'Roboto Fallback';
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 16px;
}

.tsl-footer__main {
  padding: 24px 0 40px;
}

.tsl-footer__logo {
  display: block;
  text-align: center;
  margin-bottom: 32px;
}

.tsl-footer__logo img {
  display: inline-block;
  width: auto;
  height: 80px;
}

.tsl-footer__cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  /* Left-aligned to match the "More About" block above, which shares the
     same 1200px inner. Centring these made the footer look like it used a
     different (narrower) measure than the rest of the page. */
  text-align: left;
}

@media (min-width: 768px) {
  .tsl-footer__cols {
    grid-template-columns: repeat(3, 1fr);
  }
}

.tsl-footer__col h3 {
  margin: 0 0 6px;
  color: var(--color_2);
  font-family: 'Fjalla One', 'Fjalla One Fallback';
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.tsl-footer__col p {
  margin: 0 0 16px;
  color: var(--color_7);
  font-family: Roboto, 'Roboto Fallback';
  font-size: 15px;
  line-height: 1.5;
}

.tsl-footer__col a {
  color: var(--color_7);
  text-decoration: none;
}

.tsl-footer__col a:hover {
  text-decoration: underline;
}

.tsl-footer__map {
  height: 200px;
  border-radius: 4px;
  overflow: hidden;
}

@media (max-width: 767.98px) {
  /* OpenStreetMap's attribution bar wraps to 2-3 lines at phone widths and
     was covering most of a 160px-tall map. The bar is rendered inside
     their cross-origin iframe so it can't be restyled, and ODbL requires
     the credit stay, so give the map more height instead. */
  .tsl-footer__map {
    height: 300px;
  }
}

.tsl-footer__copyright {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding: 18px 40px;
  text-align: center;
}

.tsl-footer__copyright p {
  margin: 0;
  color: rgba(255, 255, 255, 0.7);
  font-family: Roboto, 'Roboto Fallback';
  font-size: 13px;
}

#dm_content .tsl-bio-photo {
  width: 100% !important;
  display: block;
  border-radius: 6px;
}

/* ---- Contact form ---- */
.tsl-cform__honeypot {
  position: absolute;
  left: -9999px;
  top: -9999px;
}

.tsl-cform__field {
  margin-bottom: 16px;
}

.tsl-cform__field label {
  display: block;
  margin-bottom: 6px;
  color: #1a1a1a;
  font-family: Roboto, 'Roboto Fallback';
  font-size: 14px;
  font-weight: 700;
}

.tsl-cform__field input,
.tsl-cform__field textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border: 1px solid rgba(0, 0, 0, 0.25);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.95);
  color: #1a1a1a;
  font-family: Roboto, 'Roboto Fallback';
  font-size: 15px;
}

.tsl-cform__field textarea {
  min-height: 140px;
  resize: vertical;
}

.tsl-cform__captcha {
  margin-bottom: 16px;
}

/* reCAPTCHA is a fixed 304x78 iframe that cannot be made responsive, and
   304px does not fit inside the form's padding on a small phone. Scale it
   down rather than let it push the page sideways; the height is set to
   match so it doesn't leave a gap underneath. */
@media (max-width: 430px) {
  .tsl-cform__captcha {
    transform: scale(0.85);
    transform-origin: left top;
    height: 66px;
  }
}

.tsl-cform__submit input[type="submit"] {
  display: inline-block;
  padding: 13px 32px;
  background: var(--color_2);
  color: var(--color_1);
  border: none;
  border-radius: 4px;
  font-family: 'Fjalla One', 'Fjalla One Fallback';
  font-size: 16px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  cursor: pointer;
}

.tsl-cform__submit input[type="submit"]:hover {
  opacity: 0.9;
}

.tsl-cform__submit input[type="submit"]:disabled {
  opacity: 0.6;
  cursor: default;
}

/* The form's label color defaults to dark (readable on contact-us.html's
   plain white section) - confirmed as a genuine, live placement, not a
   hypothetical, so it can't be assumed away. Wherever the form is dropped
   into a dark container instead (.tsl-hero, .tsl-sidebar-box), flip labels
   to white explicitly; unscoped/inherited color was the original bug this
   replaced (labels defaulting to black with nothing overriding them on a
   dark box), so this stays an explicit per-container rule, not a default. */
#dm_content .tsl-hero .tsl-cform__field label,
#dm_content .tsl-sidebar-box .tsl-cform__field label {
  color: var(--color_7) !important;
}

/* ---- Persistent click-to-call bar (mobile/tablet) ----
   Hidden by default; shown below the 1025px breakpoint where the desktop
   header (and its always-visible phone number) gives way to the hamburger
   layout, so there's always a way to call on screen. */
#tsw-sticky-call {
  display: none;
}

@media (max-width: 1024.98px) {
  body {
    padding-bottom: calc(52px + env(safe-area-inset-bottom));
  }
  #tsw-sticky-call {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--color_1);
    color: #fff;
    text-decoration: none;
    font-family: 'Fjalla One', 'Fjalla One Fallback', Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-size: 14px;
    line-height: 1.2;
    padding: 15px 12px calc(15px + env(safe-area-inset-bottom));
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.25);
  }
  #tsw-sticky-call svg {
    flex: 0 0 auto;
    color: var(--color_2);
  }
}