/* td-tweaks */
/* every page is built from full-width bands now: no theme padding above the first band or below the last */
body:not(.fusion-builder-live) #main { padding-top: 0 !important; padding-bottom: 0 !important; }
#main > .fusion-row { max-width: none; }
#content { margin-bottom: 0 !important; }
/* phone: headline sizes that keep the last word off a line of its own */
@media (max-width: 640px) { .td-hero-h1 { font-size: 48px !important; } }

/* ---- the three ways to reach us -----------------------------------------------------------------------------
   These were a full-bleed band: three columns with vertical rules between them, running the whole width of the
   screen. That is the contact bar every site had in 2012, and on this page it had a second problem - nothing else
   here runs full width, so it lay across the layout instead of sitting in it, and it was 162px tall to hold three
   short lines.

   They are three tiles now, inside the page's own column and the same width as everything else, and they are the
   same object as the cards and the form below them: navy, a gold rule across the top, a gold label and the thing
   itself in white. Shorter than the cards because there is less in them. The page stops having one component that
   belongs to a different site.

   The whole tile is already a link - each column carries one - so it gets a pointer, and it lifts on hover the way
   the ticket cards on the homepage do, which is the site's way of saying a block is clickable. */
/* The 24px of side padding is Avada's column gutter, put back by hand. Every column on this page sits 24px inside
   its row because Avada insets the wrapper inside the column; these tiles have that inset removed so the gap
   between them can be controlled, which left their outer edges 24px wider than everything else on the page. */
.td-contact-strip > .fusion-row { display: flex !important; flex-wrap: wrap; gap: 20px; padding-left: 24px !important; padding-right: 24px !important; }
.td-contact-strip .fusion-layout-column {
  flex: 1 1 240px; width: auto !important; margin: 0 !important;
}
.td-contact-strip .fusion-layout-column > .fusion-column-wrapper {
  background: #0a1226;
  border-top: 3px solid #b48630;
  padding: 20px 24px 22px !important;
  margin: 0 !important;
  height: 100%;
  transition: transform .2s ease, background .2s ease;
}
.td-contact-strip .fusion-layout-column:hover > .fusion-column-wrapper {
  background: #122040;
  transform: translateY(-3px);
}
.td-contact-strip a { cursor: pointer; }
/* the label is small and the thing itself is the size it deserves */
.td-contact-strip .fusion-title-heading { font-size: 15px !important; letter-spacing: .14em; }
.td-contact-strip .fusion-text p { margin: 0 !important; }

@media (max-width: 800px) {
  .td-contact-strip > .fusion-row { gap: 12px; }
  .td-contact-strip .fusion-layout-column { flex: 1 1 100%; }
  .td-contact-strip .fusion-layout-column > .fusion-column-wrapper { padding: 16px 20px 18px !important; }
}

/* ---- the contact form -------------------------------------------------------------------------------------
   Every field was outlined in gold. That is not a small thing: gold on this site means "this matters" - it is the
   button face, the rule above a card, the star in a review - and putting it around six fields at rest gives a form
   that looks permanently lit up, and a gold that has stopped meaning anything by the time you reach the gold button
   at the bottom of it.

   It was nobody's decision either. The colour came from the form's own border setting, which points at a palette
   slot that tools/brand-gold.php moved to the new gold; the border simply followed a colour that changed underneath
   it.

   At rest the fields now take a quiet blue-grey from the same family as the page, and gold is kept for focus, where
   it says something true: this is the field you are typing in. The quote form is untouched - it has its own
   settings and sits on a navy panel, where gold outlines read correctly. */
.td-contact-form .fusion-form-input,
.td-contact-form textarea.fusion-form-input,
.td-contact-form select.fusion-form-input {
  border: 1px solid #d3d9e6 !important;
  background-color: #ffffff !important;
  transition: border-color .14s ease, box-shadow .14s ease;
}
.td-contact-form .fusion-form-input:hover { border-color: #b9c2d4 !important; }
.td-contact-form .fusion-form-input:focus {
  border-color: #b48630 !important;
  box-shadow: 0 0 0 3px rgba(180,134,48,.16) !important;
  outline: none !important;
}

/* A link in that panel was rendering in the body colour, so "the free quote form" did not read as a link at all.
   On the navy panel it takes the lighter gold, which is what every link on a dark ground uses on this site, with
   an underline so it is a link rather than just a coloured word. */
.td-contact-form .fusion-text a {
  color: #d9a441 !important;
  text-decoration: underline;
  text-decoration-color: rgba(217,164,65,.5);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.td-contact-form .fusion-text a:hover { color: #ffffff !important; text-decoration-color: rgba(255,255,255,.6); }

/* The field labels sit on navy now, so they take the light text colour rather than the near-black they had on
   white. The fields themselves stay white - that is what the quote form does, and a white field on navy is the
   clearest thing to type into. */
.td-contact-form .fusion-form-field label { color: #c3c9d6 !important; }
.td-contact-form .fusion-form-field label .fusion-form-element-required { color: #d9a441 !important; }

/* ---- the title band at the top of every page that is not the homepage ----------------------------------------
   One hook does all of this: .td-page-h1, which every built page puts on its own title. Court pages, the statute
   pages, the programme pages and the blog all carry it, and the homepage does not - its headline is .td-hero-h1 -
   so none of this can reach the homepage by accident.

   Worth knowing why it is here and not in tools/avada-inner-pages.php, which is where the title was styled before.
   That script kept its rules in Avada's custom CSS box and its writer cut everything after its own marker, so
   whichever of these scripts ran last deleted the blocks below it. The inner-page block is simply gone from the
   database, and has been for a while: on 2026-09-29 no stylesheet the browser loaded contained a .td-page-h1 rule
   at all, and the titles were being sized by the size attribute on the shortcode instead. Both writers are fixed
   and both now write files, but the lost block is not being switched back on wholesale - it would change a lot of
   pages at once that nobody has looked at. These rules are written here, where they are certain to be served. */

/* THE GAP UNDER THE TITLE.
   The band's own bottom padding and the top padding of the section under it are two separate paddings, and they
   stack: 72px and 72px, so 144 pixels of empty ground between a headline and the first line of text, before that
   section's first element adds its own margin. On the Broome County page that put the first sentence 123px below
   the band.

   Two paddings in a row only make sense when there is nothing else marking the join. Here the band is navy and the
   page under it is paper, so the colour change already does that work and the space is only there to be
   comfortable. Both sides come down, and the top of the band comes down too - the header above it is the same navy
   as the band, so they read as one block, and 84px between the menu and the eyebrow was simply a hole. */
.fusion-fullwidth:has(.td-page-h1) { padding-top: 60px !important; padding-bottom: 44px !important; }
.fusion-fullwidth:has(.td-page-h1) + .fusion-fullwidth { padding-top: 48px !important; }

/* And the first heading in that section drops its top margin. A heading carries space above it to separate it from
   the text before it, which is right everywhere except at the very top, where there is no text before it - so the
   51px was landing on top of the section's own padding and pushing the first line down for no reason. Only the
   first element of the first column, so every other heading down the page keeps its spacing. */
.fusion-fullwidth:has(.td-page-h1) + .fusion-fullwidth
  .fusion-layout-column:first-child .fusion-column-wrapper > .fusion-text:first-child > :first-child {
  margin-top: 0 !important;
}

/* THE TITLE ITSELF.
   It was a flat 60px, which is right for the median page title on this site (37 characters) and too big for the
   long ones: a quarter of the pages are over 48 characters, and the longest is 90 - "Traffic Ticket Attorney
   Suffolk County Traffic and Parking Violations Agency Hauppauge, NY" - which ran to three lines.

   Two changes rather than one, because making it small enough that nothing ever wraps would leave the short titles
   looking timid, and most titles are short:

     It scales with the window instead of jumping at breakpoints, topping out at 54px. At a normal laptop width that
     is about 52px, which fits a 55-character title on one line - nine pages in ten.

     The ones that still wrap now wrap evenly. text-wrap:balance makes the browser split a heading into lines of
     similar length rather than filling the first line and leaving one orphaned word on the second, which is what
     made the two-line titles look like a mistake rather than a choice. The line-height is opened from 0.98 to 1.04
     so two lines of capitals have room between them. */
.td-page-h1, .td-page-h1 h1, .td-page-h1 .fusion-title-heading {
  font-size: clamp(34px, 3.6vw, 54px) !important;
  line-height: 1.04 !important;
  text-wrap: balance;
}

@media (max-width: 800px) {
  .fusion-fullwidth:has(.td-page-h1) { padding-top: 40px !important; padding-bottom: 30px !important; }
  .fusion-fullwidth:has(.td-page-h1) + .fusion-fullwidth { padding-top: 34px !important; }
}
/* ---- the court page: one rail of reference beside the article --------------------------------------------------
   The facts card used to sit at the top of the article column, squeezed into two thirds of the width beside the quote
   box, with 2,571 pixels of empty column underneath it. The quote box, the facts and the photograph are now one rail
   down the right - everything a reader looks up, in one place - and the article starts at the top and runs clean.
   The rail sticks, so the court's number and the button stay beside the reader all the way down. On a phone the rail
   comes first: stacked the other way the address landed 2,256 pixels down, below the whole article. */

/* The page is contained rather than edge to edge. The site is set to 100% wide, which gave this article a
   109-character line; 45 to 75 is the comfortable range, so the container is capped and the text capped again.

   1280 rather than a rounder 1200, and the reason is the header: td-wrap is on the shared header and footer as well
   as the page body, so this width governs the whole site. The menu needs 1240px to keep Home ... More on one line,
   and at 1200 it wrapped onto two. The reading measure does not depend on this number anyway - the 660px cap below
   is what holds the text at 82 characters, whatever the container does. */
.td-wrap > .fusion-row { max-width: 1280px !important; margin-left: auto !important; margin-right: auto !important; }
.td-article p, .td-article li { max-width: 660px; }

/* The menu sits 22 pixels short of a single line once the header is contained: the six items measure 426px and the
   margins another 143, against 547px of room. It only ever fitted because the header ran the full width of the
   screen, which means it was already one narrow laptop away from wrapping. Trimming the gap between items from 13px
   to 8px gives it 41px of headroom instead, and the header no longer depends on how wide the window is.
   Desktop only - below 1025px the menu is the button and none of this applies. */
@media (min-width: 1025px) {
  .awb-menu_row .awb-menu__main-ul > li.menu-item { margin-left: 8px !important; margin-right: 8px !important; }
  .awb-menu_row .awb-menu__main-ul > li.menu-item:first-child { margin-left: 0 !important; }
  .awb-menu_row .awb-menu__main-ul > li.menu-item:last-child { margin-right: 0 !important; }
}
/* Between the button breakpoint and 1280 the row is narrower still, and the menu wrapped here even before the page
   was contained. A slightly smaller type size in that band is what makes it fit. */
@media (min-width: 1025px) and (max-width: 1279px) {
  .awb-menu_row .awb-menu__main-ul > li.menu-item { margin-left: 4px !important; margin-right: 4px !important; }
  .awb-menu_row .awb-menu__main-ul > li.menu-item > a { font-size: 15px !important; }
}

/* The rail is 1,363px tall and a laptop screen is about 1,000, so the rail as a whole cannot stick to the top - it
   would pin with its own foot below the fold, out of reach. What sticks instead is the quote block, which is 344px
   and fits any screen. For that it has to be the LAST thing in the rail: a sticky element pins in place while its
   siblings keep scrolling, so anything after it would slide underneath. The column is stretched to the article's
   height to give the block room to travel. On a phone none of this applies and the quote goes back to the top. */
.td-rail { align-self: stretch; }
.td-rail .fusion-column-wrapper { padding: 0 !important; height: 100%; display: flex; flex-direction: column; }
.td-rail__quote, .td-rail__facts, .td-rail__photo { margin-bottom: 0 !important; }
.td-rail__facts { order: 1; }
.td-rail__photo { order: 2; margin-top: 22px; }
.td-rail__quote { order: 3; margin-top: 22px; position: sticky; top: 120px; }

/* the quote block: the navy used to be painted on the whole column, which made the facts navy too */
.td-quote { background: #0a1226; border-top: 4px solid #b48630; padding: 26px 26px 28px; }
.td-quote__h { font-family: 'Barlow Condensed', Impact, sans-serif; font-weight: 700; text-transform: uppercase;
  font-size: 28px; line-height: 1; color: #fff; margin: 0 0 9px; }
.td-quote__p { font-size: 15.5px; line-height: 1.5; color: #c9d0de; margin: 0 0 18px; }
.td-quote__go { display: block; text-align: center; background: #b48630; color: #ffffff; text-decoration: none;
  font-family: 'Barlow Condensed', Impact, sans-serif; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; font-size: 16px; padding: 14px 12px; }
.td-quote__go:hover { background: #9a7228; color: #ffffff; }
.td-quote__tel { font-size: 15px; line-height: 1.6; color: #c9d0de; margin: 16px 0 0; }
.td-quote__tel a { color: #d9a441; font-weight: 600; text-decoration: none; }

/* The facts card, a single column in the rail. Scoped to section.td-card on purpose: the homepage's "What we
   contest" columns carry the same td-card class from the homepage build script, and an unscoped rule restyled them
   - a white background, a grey border and a second gold rule, none of them aligned with the navy box inside. */
section.td-card { display: block !important; border: 1px solid #e2e5ec; border-top: 3px solid #b48630;
  background: #fff; padding: 24px 24px 26px; margin: 0; }
.td-card__shot { margin: 0 0 18px; position: relative; background: #dfe3ea; line-height: 0; }
.td-card__shot img { width: 100%; height: auto; display: block; }
.td-card__shot figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 14px 9px; font-size: 12px;
  line-height: 1.4; color: #e8ecf4; background: linear-gradient(transparent, rgba(10,18,38,.88)); }
.td-card__facts { padding: 0; }
.td-card__facts h2 { font-family: 'Barlow Condensed', Impact, sans-serif; font-weight: 700; text-transform: uppercase;
  font-size: 25px; line-height: 1.02; margin: 0 0 4px; color: #0a1226; }
.td-card__place { color: #5f6878; font-size: 14px; margin: 0 0 17px; }
section.td-card dl { margin: 0; display: block; }
section.td-card dt { font-family: 'Barlow Condensed', Impact, sans-serif; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; font-size: 12.5px; color: #5f6878; margin-top: 13px; }
sectionsection.td-card dt:first-of-type { margin-top: 0; }
section.td-card dd { margin: 2px 0 0; font-size: 15.5px; line-height: 1.42; }
sectionsection.td-card dd a { color: #0a1226; text-decoration: none; border-bottom: 2px solid #b48630; }
/* the other courts in the same place - quieter than the facts above it, because it is a caution rather than a fact
   about this court, but not so quiet that someone drives to the wrong building */
.td-card__nearby { margin-top: 18px; border-top: 1px solid #e2e5ec; padding-top: 16px; }
.td-card__nearby-label { font-family: 'Barlow Condensed', Impact, sans-serif; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; font-size: 12.5px; color: #5f6878; margin: 0 0 9px; }
.td-card__nearby ul { margin: 0; padding: 0; list-style: none; }
.td-card__nearby li { margin-bottom: 10px; font-size: 14.5px; line-height: 1.45; font-weight: 400; }
.td-card__nearby-name { display: block; color: #0a1226; font-weight: 600; }
.td-card__nearby-at { color: #5f6878 !important; font-weight: 400 !important; }
.td-card__nearby-note { display: block; color: #8a93a3; font-size: 13px; }
.td-card__nearby-which { margin: 11px 0 0; font-size: 13px; line-height: 1.45; color: #5f6878;
  border-left: 2px solid #b48630; padding-left: 10px; }

.td-card__expect { margin-top: 19px; border-top: 1px solid #e2e5ec; padding-top: 17px; }
.td-card__expect-label { font-family: 'Barlow Condensed', Impact, sans-serif; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; font-size: 12.5px; color: #5f6878; margin: 0 0 10px; }
.td-card__expect ul { margin: 0; padding: 0; list-style: none; }
.td-card__expect li { position: relative; padding-left: 19px; margin-bottom: 9px; font-size: 14.5px; line-height: 1.5; }
.td-card__expect li::before { content: ''; position: absolute; left: 0; top: 9px; width: 8px; height: 2px; background: #b48630; }
.td-card__cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 19px; }
.td-card__go, .td-card__line { font-family: 'Barlow Condensed', Impact, sans-serif; font-weight: 700; flex: 1 1 auto;
  text-transform: uppercase; letter-spacing: .07em; font-size: 14.5px; padding: 12px 16px; text-decoration: none;
  display: inline-block; text-align: center; }
.td-card__go { background: #b48630; color: #ffffff; }
.td-card__go:hover { background: #9a7228; color: #ffffff; }
.td-card__line { border: 2px solid #0a1226; color: #0a1226; }
.td-card__line:hover { background: #0a1226; color: #fff; }
.td-card__source { margin: 15px 0 0; font-size: 12.5px; color: #8a93a3; line-height: 1.45; }
.td-card__source a { color: #5f6878; }
/* the map sits flush at the foot of the card, bled past the card's padding so it reads as the base of the panel
   rather than a picture dropped inside it - the same treatment the photograph gets in the quote block */
.td-card__map { margin: 18px -24px; line-height: 0; }
.td-card__map iframe { display: block; width: 100%; border: 0; }

/* the photograph at the foot of the rail */
.td-aside__shot { position: relative; margin: 0; line-height: 0; }
.td-aside__shot img { display: block; width: 100%; height: auto; }
.td-aside__shot figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 15px 11px;
  font-size: 12.5px; line-height: 1.4; color: #dbe1ec; background: linear-gradient(transparent, rgba(10,18,38,.92)); }

/* ---- headings: one scale, largest at the top ------------------------------------------------------------------
   The page said one thing and its type said another. The H1 was 60px while the closing band's H2 was 72 and the
   quote panel's was 48, so the biggest words on a court page were never the page's own title; the article's real
   section headings were the smallest H2s on the page at 30. The FAQ questions were H5 sitting directly under an H2,
   with nothing at levels 3 or 4 between them, which reads as a broken outline to a search engine and announces
   "heading level five" to a screen reader with no level three above it. Those are now H3 in the page text itself
   (tools/faq-heading-levels.php); this is the scale they sit in.

   H1 60  >  band 44  >  article H2 34  >  related 32  >  quote 28  >  card 25  >  article H3 21 */
.td-h2 { font-size: 44px !important; line-height: 1.02 !important; }
.td-article h2, .td-court h2 { font-size: 34px !important; line-height: 1.1; margin: 1.5em 0 .45em; }
.td-article h3, .td-court h3 { font-size: 21px !important; line-height: 1.25; margin: 1.5em 0 .4em;
  text-transform: none; letter-spacing: 0; }
.td-article h4, .td-court h4, .td-article h5, .td-court h5 { font-size: 18px !important; text-transform: none; letter-spacing: 0; }
.td-quote__h { font-size: 28px !important; line-height: 1.02 !important; }
@media (max-width: 640px) {
  .td-h2 { font-size: 32px !important; }
  .td-article h2, .td-court h2 { font-size: 28px !important; }
  .td-article h3, .td-court h3 { font-size: 19px !important; }
}

/* ---- "More traffic courts": one kind of link, and no rules running off into nothing -----------------------------
   It read as two unrelated blocks - six underlined text links in a grid, then five gold pills - and every rule ran
   the full width of its column whatever the label was, so "Ghent, NY" trailed a hairline off into empty space.
   Now there is one treatment: the underline belongs to the words and only appears on hover, and the statute and
   programme links sit under their own label rather than in a different shape. */
.td-related h2 { font-size: 32px !important; margin: 0 0 6px; }
.td-related > p { margin: 0 0 20px; max-width: 70ch; }
/* The links flow rather than sitting in a three-column grid. Six place names of about 120px each were being spread
   across three 386px columns - 796px of text over 2,462px of space, two thirds of it empty. The grid only ever
   looked deliberate because each cell had a rule running its full width; once the rules went, the labels were
   adrift in it. Flowing left with one gap is what the "Also on this site" row below already does. */
.td-related ul { list-style: none; margin: 0 0 22px; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0 32px; }
.td-related li { border: 0 !important; padding: 0 !important; }
.td-related li a { display: inline-block; padding: 8px 0; color: #122040; font-weight: 500; text-decoration: none;
  border-bottom: 2px solid transparent; }
.td-related li a:hover { color: #0a1226; border-bottom-color: #b48630; }
.td-related .td-related-more { display: flex; flex-wrap: wrap; gap: 0 28px; margin-top: 0;
  border-top: 1px solid #e2e5ec; padding-top: 14px; }
.td-related .td-related-more::before { content: 'Also on this site'; flex: 0 0 100%;
  font-family: 'Barlow Condensed', Impact, sans-serif; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; font-size: 12.5px; color: #8a93a3; margin-bottom: 4px; }
.td-related .td-related-more a { border: 0; border-radius: 0; padding: 8px 0; font-size: 15px; font-weight: 500;
  color: #122040; text-decoration: none; border-bottom: 2px solid transparent; }
.td-related .td-related-more a:hover { color: #0a1226; border-bottom-color: #b48630; }
@media (max-width: 640px)  { .td-related ul, .td-related .td-related-more { gap: 0 20px; } }

/* phone: the rail comes before the article, and nothing sticks */
@media (max-width: 900px) {
  .td-wrap > .fusion-row > .fusion-builder-row { display: flex; flex-direction: column; }
  .td-rail { position: static; order: -1; margin-bottom: 34px; align-self: auto; }
  .td-article { order: 0; }
  .td-article p, .td-article li { max-width: none; }
  .td-rail .fusion-column-wrapper { height: auto; }
  .td-rail__quote { order: 1; position: static; margin-top: 0; }
  .td-rail__facts { order: 2; margin-top: 22px; }
  .td-rail__photo { order: 3; }
}

/* ---- the free-quote form, built to the agreed design ----------------------------------------------------------
   Two fields to a row where the content allows, the questions grouped under two headings, yes/no as buttons rather
   than dots, and the upload reduced to a single line. The panel is navy; the fields stay white, because a white box
   is the only thing that says "type here" without anyone having to think about it. */

/* layout: Avada wraps the fields in a builder container, so the grid goes on that wrapper, not on the form itself */
.td-quote-form form .fusion-column-wrapper { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 18px; align-items: start; }
.td-quote-form .fusion-form-field { grid-column: span 2; margin-bottom: 0 !important; }
.td-quote-form .fusion-form-field.td-half { grid-column: span 1; }

/* the two group headings, drawn off the first field in each group */
.td-quote-form .td-sec-you::before, .td-quote-form .td-sec-ticket::before {
  content: '1 · About you'; display: block; font-family: 'Barlow Condensed', Impact, sans-serif; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em; font-size: 15px; color: #b48630;
  border-bottom: 1px solid rgba(255,255,255,.16); padding-bottom: 9px; margin: 2px 0 16px; }
.td-quote-form .td-sec-ticket::before { content: '2 · About the ticket'; margin-top: 14px; }

/* text on the panel */
.td-quote-form .fusion-form, .td-quote-form .fusion-form-form-wrapper { color: #ffffff !important; }
.td-quote-form .fusion-form-field, .td-quote-form .fusion-form-label-wrapper,
.td-quote-form .fusion-form-field label, .td-quote-form label, .td-quote-form .label { color: #ffffff !important; }
.td-quote-form .fusion-form-field label, .td-quote-form .label { font-weight: 600; font-size: 13.5px; }
.td-quote-form .fusion-form-element-required, .td-quote-form abbr { color: #b48630; border: 0; text-decoration: none; }

/* the fields themselves */
.td-quote-form input, .td-quote-form textarea, .td-quote-form select { color: #0a1226 !important; }
.td-quote-form .fusion-form-input, .td-quote-form input[type='text'], .td-quote-form input[type='email'],
.td-quote-form input[type='tel'], .td-quote-form input[type='number'], .td-quote-form textarea, .td-quote-form select {
  background: #ffffff; border: 1px solid rgba(255,255,255,.2); border-radius: 2px; height: 46px; padding: 0 14px; font-size: 15.5px; }
.td-quote-form textarea { height: 92px; padding: 12px 14px; }
.td-quote-form .fusion-form-input:focus, .td-quote-form input:focus, .td-quote-form textarea:focus {
  border-color: #b48630; box-shadow: 0 0 0 3px rgba(180,134,48,.34); outline: none; }
.td-quote-form ::placeholder { color: #8a93a3; opacity: 1; }

/* yes / no as a pair of buttons. Each option is its own div, so the pair is joined with a flex row and the
   borders are collapsed by dropping the right edge on all but the last. */
.td-quote-form .td-pills fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; }
.td-quote-form .td-pills legend, .td-quote-form .td-pills .fusion-form-label-wrapper { width: 100%; float: none; }
.td-quote-form .td-pills .fusion-form-radio { margin: 0 !important; }
/* the circle is drawn on the label, not by the input, so it is the label's marker that has to go */
.td-quote-form .td-pills .fusion-form-radio label::before,
.td-quote-form .td-pills .fusion-form-radio label::after { display: none !important; content: none !important; }
.td-quote-form .td-pills .fusion-form-radio input { position: absolute; opacity: 0; width: 0; height: 0; }
.td-quote-form .td-pills .fusion-form-radio label {
  display: block; margin: 0 !important; padding: 12px 26px; cursor: pointer;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.3); border-right: 0;
  font-family: 'Barlow Condensed', Impact, sans-serif; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; font-size: 14.5px; color: #c3c9d6 !important; transition: background .15s, color .15s; }
.td-quote-form .td-pills .fusion-form-radio:last-of-type label { border-right: 1px solid rgba(255,255,255,.3); }
.td-quote-form .td-pills .fusion-form-radio label:hover { background: rgba(255,255,255,.13); }
.td-quote-form .td-pills .fusion-form-radio input:checked + label { background: #b48630; color: #ffffff !important; border-color: #b48630; }
.td-quote-form .td-pills .fusion-form-radio input:focus-visible + label { box-shadow: inset 0 0 0 2px #ffffff; }

/* the ticket photo: a shallow dashed strip rather than an empty rectangle. Avada stacks an icon, a container, the
   file input and a preview area here, so the rules stay light - heights and padding only, nothing taken out of flow. */
.td-quote-form .td-drop .fusion-form-upload-field-container {
  border: 1px dashed rgba(255,255,255,.34); background: rgba(255,255,255,.05); }
.td-quote-form .td-drop .fusion-form-upload-field { min-height: 0; padding: 18px 16px; }
.td-quote-form .td-drop .awb-upload-placeholder { color: #dfe3ec; font-size: 14.5px; }
.td-quote-form .td-drop i.fa-upload { color: #b48630; }

/* the reCAPTCHA field carries height even when its badge draws nothing */
.td-quote-form .fusion-form-recaptcha-field { min-height: 0; margin: 0 !important; }

/* the promise under the button is a sentence, not a heading */
.td-quote-form .fusion-form-submit-field::after {
  content: 'No obligation. We reply the same business day.'; display: block; text-align: center;
  font-family: 'Barlow', Arial, sans-serif !important; font-weight: 400 !important; text-transform: none !important;
  letter-spacing: 0 !important; font-size: 13px; color: #9aa3b5 !important; margin-top: 12px; }

@media (max-width: 760px) {
  /* the grid lives on the column wrapper inside the form, not on the form - the desktop rule above was corrected
     for that and this one was not, so on a phone the two columns never collapsed and the fields ran off the panel */
  .td-quote-form form .fusion-column-wrapper { grid-template-columns: 1fr !important; }
  .td-quote-form .fusion-form-field, .td-quote-form .fusion-form-field.td-half { grid-column: span 1 !important; }
}
/* a grid item will not shrink below its content unless told to, which is the other half of the overflow */
.td-quote-form .fusion-form-field { min-width: 0; }
.td-quote-form input, .td-quote-form textarea, .td-quote-form select { max-width: 100%; box-sizing: border-box; }

/* Inner pages open with a navy band directly under a navy header, so the two read as one tall block with the page
   title floating in it. A hairline plus a soft shadow marks where the header ends - the hairline is the same device
   the footer's legal strip uses. On the homepage the header floats over the hero photograph, so it keeps none of it. */
.td-header { border-bottom: 1px solid rgba(255,255,255,.14); box-shadow: 0 12px 28px rgba(0,0,0,.22); }
body.home .td-header:not(.fusion-sticky-transition) { border-bottom-color: transparent; box-shadow: none; }

/* the call/text bar on phones (markup comes from the td-mjalaw plugin) */
.td-callbar { display: none; }
@media (max-width: 800px) {
  .td-callbar { display: grid; grid-template-columns: 1fr 1fr; position: fixed; left: 0; right: 0; bottom: 0;
    z-index: 9999; padding-bottom: env(safe-area-inset-bottom, 0px); box-shadow: 0 -2px 20px rgba(10,18,38,.22); }
  .td-callbar .td-callbar__a { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 58px;
    font-family: 'Barlow Condensed', Impact, sans-serif; font-weight: 700; font-size: 18px; line-height: 1;
    letter-spacing: .06em; text-transform: uppercase; text-decoration: none; }
  .td-callbar .td-callbar__call { background: #b48630; color: #ffffff; }
  .td-callbar .td-callbar__text { background: #0a1226; color: #ffffff; }
  .td-callbar .td-callbar__a:active { filter: brightness(.94); }
  .td-callbar svg { width: 21px; height: 21px; fill: currentColor; }
  /* room at the foot of the page so the bar never sits on top of the last line */
  body { padding-bottom: 58px; }
  /* the accessibility button is pinned bottom-left, where the Call half now is: lift it clear of the bar */
  .uwy .userway_buttons_wrapper { bottom: 74px !important; }
  /* and the theme's back-to-top arrow, pinned bottom-right where Text now is */
  #toTop, .fusion-top-frame { bottom: 74px !important; }
}

/* 'The firm': the photograph runs off the right edge of the screen, the way the hero photograph does, with a gold
   edge where it meets the navy. Below 1025px the column stacks, so the bleed is switched off. */
.td-firm .td-photo img { display: block; width: 100%; }
@media (min-width: 1025px) {
  /* the frame is an inline element by default, so a negative margin only slides it; as a block it grows instead */
  .td-firm .td-photo { display: block; width: auto; max-width: none; margin-right: calc(50% - 50vw); }
  .td-firm .td-photo img { border-left: 3px solid #b48630; }
}

/* 'Three steps': the numerals are strung on a gold line, so the row reads as a sequence rather than three boxes.
   The line is drawn on each column and the numeral sits on top of it with a white gap either side. */
.td-steps .td-step .td-step__n { display: flex; align-items: center; gap: 18px; }
.td-steps .td-step .td-step__n .title-heading-left { margin: 0; }
/* the line is part of the numeral's row, so it always starts where the number ends */
.td-steps .td-step .td-step__n::after { content: ''; flex: 1 1 auto; height: 2px; background: #b48630; opacity: .4; }
/* the last one stops short rather than running off the end of the sequence */
.td-steps .td-step:last-child .td-step__n::after { max-width: 34%; }
@media (max-width: 800px) {
  .td-steps .td-step { padding-right: 0 !important; margin-bottom: 34px; }
  .td-steps .td-step:last-child { margin-bottom: 0; }
}
}

/* The Google reviews block. The plugin ships deliberately plain; everything below is this site's own language -
   the gold rule that tops every card at the top of the page, Barlow Condensed for names, the navy panel for the
   rating. Written as 'body .tdr' because the plugin's own stylesheet loads late. */
body .tdr { --tdr-ink: #151a26; --tdr-muted: #5f6878; --tdr-faint: #8a93a3; --tdr-accent: #0a1226;
  --tdr-line: #e6e6e9; --tdr-star: #b48630; --tdr-panel: #0a1226; --tdr-panel-link: #d9a441;
  --tdr-card-bg: #ffffff; --tdr-card-width: 400px; --tdr-radius: 0px;
  --tdr-font-display: 'Barlow Condensed', Impact, sans-serif; --tdr-font-body: Barlow, Arial, sans-serif; }

/* the rating, as a navy panel with the number carrying the weight - the same move as the gold 1 2 3 further up */
.td-reviews .tdr-badge { padding: 26px 30px; gap: 22px; align-items: center; }
.td-reviews .tdr-badge__rating { font-size: 68px; color: #b48630; letter-spacing: 0; }
.td-reviews .tdr-badge__meta { gap: 7px; }
.td-reviews .tdr-badge__count { font-size: 15px; letter-spacing: .01em; }
.td-reviews .tdr-badge__link { font-size: 14px; letter-spacing: .04em; text-transform: uppercase;
  font-family: 'Barlow Condensed', Impact, sans-serif; font-weight: 700; }
.td-reviews .tdr-badge__link:hover { color: #ffffff; }

/* the cards: white, hairline, gold rule on top - matching the ticket cards in the first half of the page */
/* the plugin draws the row's cards without a border, and its stylesheet loads after this one,
   so the rule that puts the gold cap back on has to be the more specific of the two */
body .td-reviews .tdr-track .tdr-card { border: 1px solid #e6e6e9; border-top: 3px solid #b48630; padding: 30px 28px; }
.td-reviews .tdr-card__text { font-size: 17px; line-height: 1.55; }
.td-reviews .tdr-card__who { padding-top: 16px; }
.td-reviews .tdr-card__who b { font-family: 'Barlow Condensed', Impact, sans-serif; font-weight: 700;
  text-transform: uppercase; letter-spacing: .02em; font-size: 17px; color: #0a1226; }
.td-reviews .tdr-card__who small { font-size: 12.5px; letter-spacing: .02em; }
.td-reviews .tdr-card__more { font-family: 'Barlow Condensed', Impact, sans-serif; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; font-size: 14px; border-bottom: 2px solid #b48630; padding-bottom: 1px; }
.td-reviews .tdr-stars { letter-spacing: .12em; }

/* the arrows, drawn like the buttons elsewhere on the page */
.td-reviews .tdr-nav__btn { border: 1px solid #0a1226; color: #0a1226; background: #ffffff; transition: background .18s, color .18s; }
.td-reviews .tdr-nav__btn:hover { background: #0a1226; color: #ffffff; }
.td-reviews .tdr-rows__foot { margin-top: 26px; }

/* phone: one card at a readable width, and the rating panel full width above it */
@media (max-width: 640px) {
  body .tdr { --tdr-card-width: 80vw; }
  .td-reviews .tdr-badge { width: 100%; padding: 20px 22px; gap: 16px; }
  .td-reviews .tdr-badge__rating { font-size: 52px; }
  .td-reviews .tdr-card { padding: 24px 22px; }
}

/* The county card. Same panel as a courthouse card, but its list is of links rather than plain names, so each name
   reads as clickable and its address sits under it in the quieter grey the nearby list already uses. The map has no
   address above it here - the heading and the county line are what it is a map of - so it keeps a little air. */
.td-card--county .td-card__map { margin-top: 16px; }
.td-card--county .td-card__nearby li { margin-bottom: 12px; }
.td-card--county .td-card__nearby a { display: block; color: #0a1226; font-weight: 600; text-decoration: none;
  border-bottom: 2px solid #b48630; }
.td-card--county .td-card__nearby a:hover { color: #122040; border-bottom-color: #122040; }
.td-card--county .td-card__nearby-at { display: block; margin-top: 2px; }

/* ---- the menu and its dropdowns -------------------------------------------------------------------------------
   The dropdown was the last thing on the page still wearing Avada's defaults: a hard-edged navy box with no
   shadow, sitting flush against the bar, and a full-width rule under every item. Rules between menu items are the
   thing that dates a dropdown - they were how you separated rows before anyone had hover states, and they make six
   links read as a table rather than a list.
   The rules go. Rows get room to breathe and a hover fill instead, the panel gets a soft shadow and a gold hairline
   along the top to tie it to the rest of the site, and it drops a few pixels clear of the bar so it reads as
   something that opened rather than part of the header. */
.awb-menu__sub-ul {
  background: #122040 !important;
  border-top: 2px solid #b48630 !important;
  box-shadow: 0 24px 48px -12px rgba(0,0,0,.65), 0 2px 6px rgba(0,0,0,.3) !important;
  padding: 6px 0 !important;
  min-width: 250px !important;
}

/* No overflow:hidden here, which is what broke the nested menu under "Common traffic tickets". It was added to
   clip the rounded corners and it did that, but Avada flies a third-level menu out sideways - left:-250px, because
   this one sits near the right edge of the screen - and a clipped parent swallows it whole. The corners are
   rounded without clipping instead.
   The gap above and the rounded bottom belong to the panel that drops from the bar, not to one that flies out of
   its side: a nested menu with a 6px top margin hangs below the row that opened it. */
.awb-menu__sub-ul_main { margin-top: 6px !important; border-radius: 0 0 4px 4px !important; }
.awb-menu__sub-ul_grand { margin-top: 0 !important; border-radius: 4px !important; }
/* The rules live on the list items, not the links - putting border:0 on the anchors left them exactly where they
   were, which is worth writing down because the anchor is the obvious place to look. */
.awb-menu__sub-ul > li,
.awb-menu__sub-ul .menu-item { border: 0 !important; }

.awb-menu__sub-ul .menu-item > a,
.awb-menu__sub-ul .awb-menu__sub-a {
  border: 0 !important;
  padding: 11px 20px !important;
  font-size: 15px !important;
  line-height: 1.35 !important;
  color: #dfe3ec !important;
  transition: background .16s ease, color .16s ease, padding-left .16s ease;
}
.awb-menu__sub-ul .menu-item > a:hover,
.awb-menu__sub-ul .menu-item.current-menu-item > a {
  background: rgba(180,134,48,.16) !important;
  color: #ffffff !important;
  padding-left: 24px !important;
}

/* The top-level items get the same hover language rather than only a colour change - a gold rule that grows under
   the word, which is what the active item already does. */
@media (min-width: 1025px) {
  .awb-menu__main-li > .awb-menu__main-a { position: relative; }
  .awb-menu__main-li > .awb-menu__main-a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 2px; background: #b48630;
    transform: scaleX(0); transform-origin: left; transition: transform .2s ease;
  }
  .awb-menu__main-li:hover > .awb-menu__main-a::after { transform: scaleX(1); }
}

/* ---- the two floating buttons, and the bar they were sitting on ----------------------------------------------
   The call/text bar is fixed to the bottom of the screen on phones. The accessibility widget and Avada's
   scroll-to-top button are fixed there too, and neither knows the bar exists. On a phone with a home indicator the
   bar grows by the safe-area inset and closes the gap entirely, which is why they end up on top of it.
   Both are lifted to clear the bar's real height - 58px plus whatever the device adds underneath - so the
   arithmetic holds on a phone with a notch and on one without. */
@media (max-width: 900px) {
  .userway_buttons_wrapper { bottom: calc(58px + env(safe-area-inset-bottom, 0px) + 14px) !important; }

  /* The scroll-to-top goes altogether on phones. Lifting it off the bar only moved the problem: it then floated
     directly above the Text button, which reads as a third action competing with the two that matter. A phone has
     a scroll gesture and the page is not long enough to need a shortcut; the bar is the action surface down there
     and it should be the only thing in that corner. It stays on desktop, where there is room for it. */
  #toTop.fusion-top-top-link { display: none !important; }
}

/* The accessibility widget's red is dealt with in the td-mjalaw plugin, not here, and the reason is worth knowing:
   UserWay writes it as an INLINE style carrying !important, which outranks an !important rule in a stylesheet. CSS
   cannot reach it at all. A rule was tried here first and lost. The proper fix is the colour setting in UserWay's
   own dashboard; the plugin's script is what holds the line until then. */

/* Avada's scroll-to-top is a grey square with a 4px corner - the one piece of default theme styling still visible
   on the page. Navy circle, gold on hover, to match everything else. */
#toTop.fusion-top-top-link { background: #122040 !important; border-radius: 50% !important;
  color: #ffffff !important; border: 1px solid rgba(255,255,255,.18) !important; }
#toTop.fusion-top-top-link:hover { background: #b48630 !important; border-color: #b48630 !important; }

/* THE HERO VIDEO falls back to the still picture on some loads and not others, which is a race rather than a bug in
   the video. Avada builds the hero as two layers - .fullwidth-video-image, the still, and .fullwidth-video - and
   hides the still with JavaScript once the video reports that it is playing. Win the race and you get the video;
   lose it, and the still stays up. Reloading gives you a different answer each time, which is exactly what it
   looked like.
   Both layers are simply left displayed instead. The still sits underneath as the backdrop and the video sits on
   top of it, so the still is what you see until the video paints its first frame and then the video covers it.
   Nothing has to be timed, and the hero is never blank even if the video never plays at all. */
.fusion-fullwidth .fullwidth-video-image { display: block !important; z-index: 0 !important; }
.fusion-fullwidth .fullwidth-video { display: block !important; z-index: 1 !important; }

/* A short band of shade across the top of the hero, and nothing below it.
   Once the scrim came off the frame the menu lost its ground: it sits directly on the footage, and the footage up
   there is a lit bridge with cars moving through it. The answer is not to put the haze back over the whole hero to
   protect one strip of it - it is to darken that strip. 190px, fading out completely, so the headline below is
   still on clear footage.
   It is under the header, which Avada floats at z-index 100, and under the hero's own content. */
.td-hero { position: relative; }
.td-hero::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 190px;
  z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, rgba(4,7,14,.66) 0%, rgba(4,7,14,.30) 48%, rgba(4,7,14,0) 100%);
}
.td-hero > .fusion-row { position: relative; z-index: 3; }
/* A phone needs more of it than a desktop does, and the reason is the crop rather than the screen. The hero is
   880px tall on a desktop and 640 on a phone, and the text fills far more of that shorter frame - so the headline
   and the eyebrow, which on a desktop sit over the dark road on the left, land on the busiest part of the picture
   on a phone. The gold eyebrow was the first thing to lose. So the band runs most of the way down instead of
   stopping under the header. */
@media (max-width: 640px) {
  .td-hero::before {
    height: 62%;
    background: linear-gradient(180deg, rgba(4,7,14,.74) 0%, rgba(4,7,14,.52) 55%, rgba(4,7,14,0) 100%);
  }
}

/* And the footage is graded, lightly, which is the other half of "sharp".
   Night footage shot for stock is deliberately flat so that whoever buys it can push it where they want, and this
   clip is no exception - its darks sit well above black, which is exactly what makes a frame look soft. Lifting
   contrast a little puts real black back in the shadows, and taking a little saturation out drops the teal in the
   bridge lights that was fighting the gold.
   Small numbers on purpose: this is a grade, not an effect, and it should be invisible as a thing done. */
.home .fullwidth-video video,
.home .fullwidth-video iframe,
.home .fullwidth-video-image { filter: contrast(1.12) saturate(0.86) brightness(0.98); }

/* ---- the homepage, second pass --------------------------------------------------------------------------------

   THE PROOF. 467 reviews at 5.0 is the most persuasive fact on the site and it was the most boxed-in thing on the
   page: a solid navy rectangle bolted beside the heading with a gap between them, reading as a plugin widget
   rather than as something the firm is confident about. The box goes. The number becomes the design - set large in
   gold, on the white ground, with the stars and the count quiet underneath it. */
.td-reviews .tdr-badge { background: none !important; border: 0 !important; padding: 0 !important;
  display: flex; align-items: baseline; gap: 20px; justify-content: flex-end; }
.td-reviews .tdr-badge__rating { font-family: 'Barlow Condensed', Impact, sans-serif; font-weight: 700;
  font-size: 92px !important; line-height: .82; color: #b48630 !important; letter-spacing: -0.02em; }
.td-reviews .tdr-badge__meta { display: block; text-align: left; }
.td-reviews .tdr-stars { display: block; color: #b48630; font-size: 19px; letter-spacing: .1em; line-height: 1; }
.td-reviews .tdr-badge__count { display: block; margin-top: 8px; font-size: 15px; color: #5f6878; }
.td-reviews .tdr-badge__link { display: inline-block; margin-top: 6px; font-family: 'Barlow Condensed', Impact, sans-serif;
  font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 13.5px; color: #0a1226 !important;
  text-decoration: none; border-bottom: 2px solid #b48630; padding-bottom: 1px; }
.td-reviews .tdr-badge__link:hover { color: #b48630 !important; }
@media (max-width: 780px) { .td-reviews .tdr-badge { justify-content: flex-start; margin-top: 18px; }
  .td-reviews .tdr-badge__rating { font-size: 68px !important; } }

/* THE THREE FACTS. They used to sit on a slab of saturated gold, which shouted before the page had earned any
   attention, and the navy text on it was the flat pairing that started this whole exercise. Same three facts, on
   the navy the hero already ends in, divided by gold hairlines. The band now reads as the hero finishing rather
   than as a second thing competing with it. */
.td-facts .td-fact + .td-fact { border-left: 1px solid rgba(217,164,65,.28); }
@media (max-width: 860px) { .td-facts .td-fact + .td-fact { border-left: 0; border-top: 1px solid rgba(217,164,65,.28); } }

/* ---- the hero form, and the proof under it --------------------------------------------------------------------
   An earlier attempt stripped the boxes off the inputs and left underlines. That broke the row, because the boxes
   were the only thing holding four fields and an upload control in line. The form is now two fields and a button,
   which is a shape simple enough to style without anything to hold together - so the panel can lose its slab and
   the fields can keep their boxes.

   The panel is a hairline rule and a wash rather than a filled card: the form should read as part of the hero, not
   as a widget resting on it.

   No side padding, which is the whole point of the rule above it. The eyebrow, the headline, the paragraph and the
   panel all begin on the same vertical line; 24px of padding inside the panel then started the fields, the button
   and the reviews 26px to the right of it, so the gold rule overhung everything it was drawn to introduce. With the
   padding gone the rule is exactly as wide as the form and the hero has one left edge from the eyebrow down. */
/* The ">" matters. .fusion-column-wrapper is on the hero's own column AND on every column inside the form, so an
   unscoped rule painted the gold rule and the padding onto each field as well - three gold hairlines stacked above
   the inputs. This is the second time that class has caught me on this panel; it is not a panel-level class. */
.td-hero-form > .fusion-column-wrapper {
  background: rgba(10,18,38,.42) !important;
  border: 0 !important;
  border-top: 2px solid #b48630 !important;
  border-radius: 0 !important;
  padding: 22px 0 20px !important;
  max-width: 620px;
}
.td-hero-form .fusion-form-field { margin-bottom: 0 !important; }
/* No fixed heights. Forcing 54px on the button clipped "Get my free review" onto two lines inside a box that could
   not grow. Padding sets the height and the label decides the width. */
.td-hero-form input[type=tel], .td-hero-form .fusion-form-input { padding: 15px 16px !important; font-size: 16.5px !important; }
.td-hero-form .fusion-form-submit-field .fusion-button,
.td-hero-form button.fusion-button { padding: 15px 26px !important; font-size: 16px !important; white-space: nowrap; }

/* The photo control is the differentiating ask, so it is drawn as an invitation rather than as a form field: a
   dashed gold outline on the hero itself rather than another white box. Two white boxes side by side would have
   put the page back where it started, with the form outshouting the headline. */
/* Avada nests this control as:
 *   .fusion-form-field.fusion-form-upload-field        <- the outer field
 *     .fusion-form-upload-field-container              <- the box, and the only element that is the box
 *       input.fusion-form-input[type=file]
 *       .fusion-form-upload-field                      <- the SAME class again, inside
 *       a.fusion-button                                  <- the click target, laid over the whole box
 *
 * Three things in here can draw a box, and each one of them did at some point. The repeated class drew two dashed
 * rectangles one inside the other; the button underneath carries a solid gold face of its own. So the outline is
 * put on the container, which is the one element that IS the control, and the two inside it are flattened - no
 * border, no background, nothing to see. They stay clickable; they just stop being visible.
 *
 * The height is 50px rather than 54 so that this box and the phone field beside it are the same height. They begin
 * at the same line whatever happens, being in the same row, so a difference only ever showed along the bottom -
 * four pixels, enough to read as sloppy without being obvious enough to explain. */
.td-hero-form .td-form-upload-col .fusion-form-upload-field-container {
  background: rgba(180,134,48,.10) !important;
  border: 1px dashed rgba(217,164,65,.65) !important;
  align-items: center;
  padding: 0 16px !important;
  min-height: 50px;
  height: 50px;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease;
}
/* And the label is centred by hand. The container lays its children out in a column, and the column carries a
   second child - an empty "Choose File" element with no height - which pushed the one line of text that is visible
   down to the floor of the box. Centring the column rather than relying on the children puts the line on the same
   middle as the phone placeholder beside it. */
.td-hero-form .td-form-upload-col .fusion-form-upload-field-container {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
}
.td-hero-form .td-form-upload-col .fusion-form-upload-field-container > * { margin: 0 !important; }
.td-hero-form .td-form-upload-col .fusion-form-upload-field-container .fusion-form-upload-field,
.td-hero-form .td-form-upload-col .fusion-form-upload-field-container .fusion-button {
  background: none !important; background-color: transparent !important;
  border: 0 !important; box-shadow: none !important;
  min-height: 0 !important; height: auto !important; padding: 0 !important; margin: 0 !important;
  width: 100% !important; justify-content: flex-start !important;
}
.td-hero-form .td-form-upload-col .fusion-form-upload-field-container:hover {
  background: rgba(180,134,48,.20) !important; border-color: #d9a441 !important;
}
.td-hero-form .td-form-upload-col .fusion-form-upload-field-container,
.td-hero-form .td-form-upload-col .fusion-form-upload-field-container * {
  color: #e7d7b4 !important; font-size: 15.5px !important; text-transform: none !important; letter-spacing: 0 !important;
}
.td-hero-form .td-form-upload-col input[type=file] { cursor: pointer; }
.td-hero-form .td-form-submit-col { margin-top: 2px; }

/* THE PROOF, directly under the action. 467 reviews at 5.0 is the strongest fact the firm owns and it used to sit
   five sections down the page, which is too late to do the job it is good at - making somebody believe the
   headline they have just read. This is the same live badge the reviews section uses, so the numbers cannot drift.

   It was set as loose text at first, on the reasoning that in the hero it is corroboration and not the subject.
   Loose text over a moving video is not quiet, though - it is weak, which is a different thing: the score had no
   edge of its own and the night footage kept moving underneath it. It is an object now.

   Three things do the work, and only three:

     The Google mark, in Google's own four colours. It is the one element on the page that is not ours, and that is
     the point - the claim is checkable, made by 467 people, and the mark says so faster than any sentence. It is
     drawn in the stylesheet rather than loaded, so it costs no request and cannot go missing.

     Dark glass. The panel behind it is the same navy as the form's, a shade deeper and blurred, so the chip holds
     its own shape over whatever the video is doing behind it. Blur is the modern part, and it is the part that
     actually solves the problem - a flat tint would still show the road moving through it.

     A gold hairline, the same gold as the rule above the form, so the chip reads as belonging to it rather than as
     a badge somebody dropped on the hero.

   Square corners, 4px, like the buttons. A pill would have been the obvious "modern" move and the wrong one: every
   edge on this site is square, and one rounded object would look borrowed from somewhere else. */
/* The chip is anchored to the right edge of the panel, opposite the button, so the row begins and ends where every
   other row in the panel does. Below 800px the two columns stack and it goes back to the left, under the button. */
/* justify-content carries !important because Avada puts its own alignment class on this wrapper - it centres a
   column whose alignment was not set - and centring left the chip 11px short of the right edge at both ends, which
   is the whole thing this row exists to fix. */
.td-hero-form .td-form-trust-col > .fusion-column-wrapper {
  display: flex !important; align-items: center; justify-content: flex-end !important; height: 100%;
}
/* The panel is a two by two grid, and every cell fills its column.
   Anchoring the ends was not enough on its own. The row above breaks between its columns at 342px and the row below
   was breaking at 330 - so the two rows had an implied vertical seam in two different places, and four boxes of
   four different widths. Filling the columns puts one seam down the middle of the panel:
       phone   |  a photo of your ticket
       button  |  the Google rating
   Same four edges, same two heights, nothing ending where the eye has no reason to expect it. */
.td-hero-form .td-form-trust-col .td-hero-trust {
  width: 100% !important; max-width: none !important;
  display: flex !important; justify-content: flex-start !important;
}
.td-hero-trust .tdr, .td-hero-trust .tdr--badge { width: 100%; }
.td-hero-form .td-hero-trust .tdr-badge {
  display: flex !important; width: 100%; box-sizing: border-box;
  height: 50px; padding: 0 18px 0 14px !important;
}
/* the button fills its column and centres its label. Height and flex rather than padding: a fixed height with the
   default line-height broke the label onto two lines the last time this was tried. */
.td-hero-form .td-form-submit-col .fusion-button {
  width: 100% !important; height: 50px !important;
  display: inline-flex !important; align-items: center; justify-content: center;
  padding: 0 18px !important; white-space: nowrap;
}
@media (max-width: 800px) {
  .td-hero-form .td-form-trust-col > .fusion-column-wrapper { justify-content: flex-start !important; margin-top: 14px; }
}
.td-hero-trust { max-width: 620px; }
.td-hero-trust .tdr, .td-hero-trust .tdr--badge { margin: 0 !important; }

.td-hero-trust .tdr-badge {
  display: inline-flex !important;
  align-items: center;
  justify-content: flex-start !important;
  gap: 12px;
  padding: 11px 20px 11px 15px !important;
  border-radius: 4px !important;
  background: rgba(10,18,38,.62) !important;
  border: 1px solid rgba(217,164,65,.38) !important;
  box-shadow: 0 10px 30px -12px rgba(0,0,0,.7) !important;
  -webkit-backdrop-filter: blur(10px) saturate(130%);
  backdrop-filter: blur(10px) saturate(130%);
}

/* the Google mark */
.td-hero-trust .tdr-badge::before {
  content: "";
  flex: none;
  width: 21px; height: 21px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23FFC107' d='M43.611,20.083H42V20H24v8h11.303c-1.649,4.657-6.08,8-11.303,8c-6.627,0-12-5.373-12-12c0-6.627,5.373-12,12-12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C12.955,4,4,12.955,4,24c0,11.045,8.955,20,20,20c11.045,0,20-8.955,20-20C44,22.659,43.862,21.35,43.611,20.083z'/%3E%3Cpath fill='%23FF3D00' d='M6.306,14.691l6.571,4.819C14.655,15.108,18.961,12,24,12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C16.318,4,9.656,8.337,6.306,14.691z'/%3E%3Cpath fill='%234CAF50' d='M24,44c5.166,0,9.86-1.977,13.409-5.192l-6.19-5.238C29.211,35.091,26.715,36,24,36c-5.202,0-9.619-3.317-11.283-7.946l-6.522,5.025C9.505,39.556,16.227,44,24,44z'/%3E%3Cpath fill='%231976D2' d='M43.611,20.083H42V20H24v8h11.303c-0.792,2.237-2.231,4.166-4.087,5.571c0.001-0.001,0.002-0.001,0.003-0.002l6.19,5.238C36.971,39.205,44,34,44,24C44,22.659,43.862,21.35,43.611,20.083z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.td-hero-trust .tdr-badge__rating {
  font-family: 'Barlow Condensed', Impact, sans-serif; font-weight: 700;
  font-size: 27px !important; line-height: 1; color: #ffffff !important;
}
/* the score is the headline of the chip and the rest is its detail, so a hairline separates them rather than a gap */
/* flex-direction carries !important because the reviews plugin's own stylesheet loads AFTER this one and stacks
   these two, which is right in the reviews section and wrong here - in a chip this wide it left the stars sitting
   on top of the count with the whole thing twice as tall as it needed to be. */
.td-hero-trust .tdr-badge__meta {
  display: flex !important; flex-direction: row !important; align-items: center;
  gap: 10px; margin: 0 !important;
  padding-left: 12px; border-left: 1px solid rgba(255,255,255,.18);
}
.td-hero-trust .tdr-stars { color: #d9a441 !important; font-size: 15px; letter-spacing: .08em; line-height: 1; }
.td-hero-trust .tdr-badge__count { font-size: 14.5px !important; color: #ccd3e0 !important; margin: 0 !important; white-space: nowrap; }
/* the "read them on Google" link belongs in the reviews section, not competing with the button above it */
.td-hero-trust .tdr-badge__link { display: none !important; }

@media (max-width: 420px) {
  /* the one width where the whole line will not fit: the count drops under the stars rather than the chip wrapping
     into two ragged halves */
  .td-hero-trust .tdr-badge { gap: 10px; padding: 10px 16px 10px 13px !important; }
  .td-hero-trust .tdr-badge__rating { font-size: 24px !important; }
  .td-hero-trust .tdr-badge__meta { flex-direction: column !important; align-items: flex-start; gap: 4px; padding-left: 10px; }
  .td-hero-trust .tdr-badge__count { font-size: 13.5px !important; }
}

/* THE FIRM PHOTOGRAPH. It was in the markup all along and never appeared: Avada's lazy loader left a transparent
   SVG placeholder in the img and never swapped the real file in, so the right half of the section was empty navy
   with the image's own gold left border standing in it like a stray rule. Fixed in the markup, which now skips
   lazy loading for that one image.
   Nothing is clamped here on purpose: the photograph is MEANT to be wider than its column and run off the right
   edge of the screen - that is the rule a hundred lines above, and a max-width here would quietly undo it. */
.td-firm .td-photo img { height: auto; display: block; }

/* ---- the courts index -----------------------------------------------------------------------------------------
   The county cards were Avada columns, one typed out per county, which is why there were only ever nine of them.
   They are now drawn by [td_court_counties] from the court pages themselves, so the grid is here rather than in
   the page. Same navy panel and gold rule as before - the look was not the problem. */
/* Columns rather than a grid. The counties hold anywhere between one court and twelve, and a grid lays them out in
   rows: every card in a row is as tall as the tallest one in it, so Westchester's twelve courts left the two cards
   beside it as tall empty panels. Telling the cards not to stretch only moved the hole below them - the row itself
   is still as tall as Westchester. Columns have no rows to keep, so each card is its own height and the next one
   starts directly underneath. Reading runs down a column, the same way the A-Z below it does. */
.td-court-counties { columns: 3; column-gap: 20px; }
.td-court-county { background: #122040; border-top: 5px solid #b48630; padding: 26px 26px 24px;
  break-inside: avoid; margin-bottom: 20px; }
.td-court-county h3 { font-family: "Barlow Condensed", sans-serif; font-weight: 700; text-transform: uppercase;
  color: #ffffff; font-size: 24px; line-height: 1; margin: 0 0 6px; }
.td-court-county ul { list-style: none; margin: 0; padding: 0; }
.td-court-county li { padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.12); }
.td-court-county li:last-child { border-bottom: 0; padding-bottom: 0; }
.td-court-county a { color: #dfe3ec; text-decoration: none; font-size: 16px; line-height: 1.45; }
.td-court-county a:hover { color: #d9a441; }

/* The A-Z runs down each column in turn, so a correct sort now reads correctly; it was the sort that was wrong,
   not the columns. Fewer columns as the screen narrows, or the names wrap mid-word. */
@media (max-width: 1024px) { .td-court-counties, .td-courtlist-cols { columns: 2; } }
@media (max-width: 640px)  { .td-court-counties, .td-courtlist-cols { columns: 1; } }

/* ---- blog posts: the article lines up with its own headline ---------------------------------------------------
   The title band sets the headline at the left edge of the content slot. The post's own content sat 48px further in,
   because Avada gives every container that much side padding, so the article read as nudged to the right of the
   headline above it and out of line with the "Got this ticket?" box beside it. The banner that used to open five of
   the posts ran the full width of the slot and hid the step; with the banner gone the text is the first thing you
   see, and the step shows.

   Taking that padding off puts the article's left edge on the headline's. It also lets the line run the full 804px
   of the slot, near a hundred characters, so the text is capped at the same 660px the court pages use - 45 to 75
   characters is the comfortable range, and the cap is what holds it there rather than the indent.

   Single posts only. Checked against all eleven: no post container carries a background or a border, so there is no
   box whose edge the text could end up touching. */
body.single-post .fusion-content-tb > .fusion-fullwidth { padding-left: 0 !important; padding-right: 0 !important; }
body.single-post .fusion-content-tb p,
body.single-post .fusion-content-tb li { max-width: 660px; }