/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.2.5
*/

/* ==========================================================================
   Lyons Web Solutions — design system

   BUMP THE Version ABOVE ON EVERY CHANGE. Flatsome enqueues this as
   style.css?ver=<Version>; without a bump, browsers keep the cached copy and
   edits appear to do nothing.

   Direction: fully dark end to end, after explee.com, respira.press and
   hermes-agent.nousresearch.com. One flooded ground, two or three colours,
   monospace uppercase micro-labels, one oversized statement, heavy negative
   space. Page flow varies by PROOF DEVICE, not styling.

   3.1.0 — variation pass. Up to 3.0.9 every section on every page was the
   same shape: centred kicker, centred h2, centred lede, symmetric grid of
   equal cards. Fifteen pages, one rhythm. Re-reading the references showed
   they are also mostly centred grids; what separates their pages is not
   geometry but CONTENT FORM. respira/plugin has a comparison table,
   respira/cowork a split-screen screenshot and a command list, explee a
   scored data table and a rendered email, hermes alternating image sides and
   terminal blocks. So the fix is new forms plus one signature form per page,
   not a different grid.

   3.1.1 — two defects found once the new forms were on live pages. Links
   inside them fell through to Flatsome's global link colour (#483791), which
   is close to unreadable on these grounds; and position:sticky on .lws-brief
   had no travel because Flatsome's .col-inner is auto-height inside a
   stretched flex .col. Both fixed at the end of their sections.

   3.1.2 — #main was still Flatsome white. Invisible on most pages because a
   hero covers it, but any page carrying a post excerpt renders Flatsome's
   .page-header-excerpt block above the content and exposes a white strip
   under the top bar. Seen on /maryland-seo-company/ and /virginia-seo/.
   Ground darkened and the stray excerpt block suppressed.

   3.2.0 — QA pass. Six defects, all from the same root cause class: a
   Flatsome component was restyled without its own geometry being restated, or
   a surface was never brought into the dark system at all.
     - FAQ chevrons. Flatsome reserves the chevron gutter with padding on
       .accordion-title and absolutely positions .toggle into it. Restyling
       the title with pixel padding removed the gutter but not the toggle, so
       the arrow overlapped the first word by 7px and floated 7px above the
       text's centre. Now a flex row, so it cannot drift again.
     - Card grids. The markup carried row-collapse, which zeroes the column
       gutter: three cards butted edge to edge on desktop and bled past both
       screen edges on mobile. Fixed in the page markup, not here.
     - Footer. Still Flatsome's #4d4d4d, the last light surface on the site.
     - Hero buttons on mobile were two inline-blocks of unequal width, so they
       centred independently and sat 7px out of line. Stacked full width.
     - Hero eyebrow is a one-line chip; on a phone it wrapped and became a
       two-line pill pressed against both edges. Chrome dropped at that width.
     - Contrast. --lws-muted ran 3.9-4.3 against these grounds and --lws-accent
       4.2-4.5 as a text colour, both under the 4.5 AA floor for small text.
       Tokens lifted; --lws-accent keeps its old value for non-text use.

   3.2.1 — the template pages, which the 3.2.0 sweep had only half covered.
   Flatsome paints body text with var(--fs-color-base), still #242424 from the
   light era, and everything it renders itself inherits that: post meta, the
   entry footer, search-result excerpts, widget titles, the 404 copy. All of
   it was near-black on near-black, so invisible rather than merely low
   contrast — a 404 visitor saw a black page with a white search box and no
   words on it. Re-pointed the token instead of chasing selectors. Its
   hairlines (#ececec, #ddd) were bright white rules on black; also fixed.

   3.2.3 and 3.2.4 — QA pass 2. See the two blocks at the end of this file.

   Positioning: managed hosting + ecommerce operations + SEO at equal weight
   under a "completely managed" umbrella. Luxury resale is a named specialism,
   never the ceiling.

   All rules namespaced .lws-*, except the blog block at the end which must key
   off WordPress body classes. Pages need a full-width Flatsome template
   (page-transparent-header-light.php) set via _wp_page_template.
   ========================================================================== */

:root {
  --lws-ink:       #0b0d12;
  --lws-ink-alt:   #0e1018;
  --lws-surface:   #151824;
  --lws-ink-2:     #12142b;
  --lws-ink-3:     #2a1f57;
  --lws-accent:    #8b5cf6;
  --lws-accent-2:  #7c3aed;
  --lws-accent-3:  #a78bfa;
  --lws-brand:     #483791;
  --lws-head:      #f4f5f8;
  --lws-body:      #9aa0b4;
  /* 3.2.0: was #6f7590, which measured 3.89:1 on --lws-surface. Small mono
     uppercase type is the hardest thing on this site to read, so it is the
     last thing that should sit under the AA floor. Now 5.30:1 there. */
  --lws-muted:     #868ca3;
  /* Text-weight accent. --lws-accent is tuned for dots, rules and borders,
     where 3:1 is the bar; at 4.17:1 on --lws-surface it fails as small text.
     Micro-labels use this instead. */
  --lws-label:     #9b7cf8;
  --lws-line:      rgba(255,255,255,.09);
  --lws-line-2:    rgba(167,139,250,.34);
  --lws-ok:        #4ade80;
  --lws-warn:      #f0b429;
  --lws-mono:      ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, Consolas, monospace;
  --lws-header-h:  120px; /* 90px header + 30px top bar, measured */
}

/* --- Ground. Flatsome paints #main white. Every section below sets its own
       background, so this only ever shows through a gap, but when it does it
       is a full-width white strip on an otherwise black site. --------------- */

#main, #wrapper { background-color: var(--lws-ink); }

/* Flatsome prints the page excerpt as a block above the content. On the
   transparent-header templates there is no page-title bar to hold it, so it
   lands under the header as near-invisible text in its own strip. The excerpt
   still does its real job as the SEO meta description; it just must not paint
   here. Scoped to the templates that have no title bar. */
body.page-template-page-transparent-header-light .page-header-excerpt,
body.page-template-page-blank .page-header-excerpt { display: none; }

/* The Customizer still emits h1-h6 { color:#242424 } globally, from the era
   when this site was light. Every .lws-* section states its own heading
   colour, so nothing visible is broken today, but any heading outside them —
   a Flatsome default block, a plugin's output, a page added next month —
   renders near-black on near-black and simply disappears.

   Specificity is doing deliberate work here. `body h2` is (0,0,2): it beats
   the Customizer's (0,0,1) so the trap is disarmed, and it loses to every
   component rule, which are all (0,1,1) or higher, so .lws-quote h2 and
   .lws-prose h4 keep their accent colours. Do not raise this to a class. */
body h1, body h2, body h3, body h4, body h5, body h6 { color: var(--lws-head); }

/* Visible only on keyboard focus, and inherited the old brand link colour,
   which is 2.06:1 here. */
.skip-link, .skip-link:focus { background: var(--lws-surface) !important; color: var(--lws-head) !important; }

.lws-steps, .lws-services, .lws-included, .lws-blog, .lws-faqsec, .lws-proof,
.lws-stats, .lws-partner, .lws-objection, .lws-handoff, .lws-case,
.lws-split, .lws-brief, .lws-compare, .lws-flow { color: var(--lws-body); }

/* --- Hero. Transparent header overlays this, so top padding must clear
       --lws-header-h or the eyebrow tucks under the nav. -------------------- */

.lws-hero {
  background: radial-gradient(1100px 620px at 50% -12%,
              var(--lws-ink-3) 0%, var(--lws-ink-2) 42%, var(--lws-ink) 78%) !important;
  padding: calc(var(--lws-header-h) + 92px) 0 118px !important;
  overflow: hidden;
}
.lws-hero .lws-eyebrow {
  font-family: var(--lws-mono); font-size: 11.5px; letter-spacing: .19em;
  text-transform: uppercase; color: var(--lws-accent-3); margin-bottom: 26px;
}
.lws-hero .lws-eyebrow span {
  display: inline-block; border: 1px solid var(--lws-line-2);
  background: rgba(139,92,246,.09); border-radius: 999px; padding: 7px 17px;
}
.lws-hero .lws-eyebrow .lws-chip {
  border-color: rgba(240,180,41,.4); background: rgba(240,180,41,.08);
  color: #f0b429; margin-left: 8px;
}
.lws-h1 h1 {
  font-size: clamp(2.35rem, 5.1vw, 4.05rem); line-height: 1.07; font-weight: 800;
  letter-spacing: -.022em; color: var(--lws-head); margin: 0 0 22px;
}
.lws-h1 .lws-accent {
  background: linear-gradient(96deg, var(--lws-accent-3) 0%, var(--lws-accent-2) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lws-sub p { font-size: 1.14rem; line-height: 1.66; color: var(--lws-body); max-width: 700px; margin: 0 auto 34px; }
.lws-trust p {
  font-family: var(--lws-mono); font-size: 11px; letter-spacing: .15em;
  text-transform: uppercase; color: var(--lws-muted); margin: 26px 0 0;
}

/* Stats embedded in the hero, replacing a standalone stat band. */
.lws-herostats { display: flex; justify-content: center; flex-wrap: wrap; margin: 44px auto 0; max-width: 760px; }
.lws-herostats .lws-hs { padding: 0 34px; border-left: 1px solid var(--lws-line); text-align: center; }
.lws-herostats .lws-hs:first-child { border-left: 0; }
.lws-herostats .lws-hs-n {
  font-size: clamp(1.6rem, 2.6vw, 2.1rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.1;
  background: linear-gradient(96deg, var(--lws-accent-3), var(--lws-accent-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lws-herostats .lws-hs-l {
  font-family: var(--lws-mono); font-size: 10px; letter-spacing: .15em;
  text-transform: uppercase; color: var(--lws-muted); margin-top: 7px;
}

/* --- Hero variants -------------------------------------------------------- */
/* The centred hero belongs to the homepage. Every other page takes one of
   these so the fifteen pages stop opening with the same shape. Text alignment
   comes from Flatsome's own align="left" on the column; these rules only undo
   the auto-centring that .lws-sub and .lws-trust bake in. */

/* Split: statement left, working artifact right. */
.lws-hero--split { padding: calc(var(--lws-header-h) + 66px) 0 82px !important; }
.lws-hero--split .row { align-items: center; }
.lws-hero--split .lws-h1 h1 { font-size: clamp(2.05rem, 3.5vw, 3.05rem); }
.lws-hero--split .lws-sub p { margin: 0 0 32px; max-width: 540px; }
.lws-hero--split .lws-trust p { margin-top: 22px; }
.lws-hero--split .button:first-of-type { margin-left: 0 !important; }

/* Brief: short, left-aligned, flat gradient. For pages whose job is to get
   out of the way — legal, local landers, secondary services. */
.lws-hero--brief {
  background: linear-gradient(178deg, var(--lws-ink-2) 0%, var(--lws-ink) 88%) !important;
  padding: calc(var(--lws-header-h) + 52px) 0 56px !important;
  border-bottom: 1px solid var(--lws-line);
}
.lws-hero--brief .lws-eyebrow { margin-bottom: 20px; }
.lws-hero--brief .lws-h1 h1 { font-size: clamp(1.85rem, 3.1vw, 2.7rem); margin-bottom: 16px; }
.lws-hero--brief .lws-sub p { margin: 0; max-width: 640px; }
.lws-hero--brief .lws-trust p { margin-top: 20px; }
.lws-hero--brief .button { margin-top: 28px !important; }
.lws-hero--brief .button:first-of-type { margin-left: 0 !important; }

/* Metric: statement left, the headline numbers themselves as the artifact. */
.lws-hero--metric { padding: calc(var(--lws-header-h) + 70px) 0 86px !important; }
.lws-hero--metric .row { align-items: center; }
.lws-hero--metric .lws-h1 h1 { font-size: clamp(2.05rem, 3.5vw, 3.05rem); }
.lws-hero--metric .lws-sub p { margin: 0; max-width: 540px; }
.lws-hero--metric .lws-metrics { margin: 0; display: block; }
.lws-hero--metric .lws-metrics .lws-metric {
  border-right: 0; border-left: 2px solid var(--lws-line-2);
  padding: 0 0 0 22px; margin: 0 0 28px;
}
.lws-hero--metric .lws-metrics .lws-metric:last-child { margin-bottom: 0; }
.lws-hero--metric .lws-metric-n { font-size: clamp(2rem, 3.4vw, 2.7rem); }

/* --- Buttons -------------------------------------------------------------- */

.lws-hero .button, .lws-cta .button, .lws-objection .button {
  border-radius: 9px !important; font-weight: 700 !important; margin: 0 7px 12px !important;
  text-transform: none !important; letter-spacing: 0;
}
.lws-btn-1.button, .lws-cta .button, .lws-objection .button {
  background: linear-gradient(96deg, var(--lws-accent-2), var(--lws-accent)) !important;
  border: 0 !important; color: #fff !important; box-shadow: 0 12px 32px -12px rgba(124,58,237,.8);
}
.lws-btn-2.button { border: 1px solid rgba(255,255,255,.23) !important; color: #e8e9ee !important; background: transparent !important; }
.lws-btn-2.button:hover { border-color: var(--lws-line-2) !important; background: rgba(139,92,246,.08) !important; }

/* --- Section headings ----------------------------------------------------- */

.lws-kicker p {
  font-family: var(--lws-mono); font-size: 11.5px; letter-spacing: .19em; text-transform: uppercase;
  color: var(--lws-accent-3); margin: 0 0 13px; text-align: center;
}
.lws-h2 h2 {
  font-size: clamp(1.85rem, 3.1vw, 2.5rem); font-weight: 800; letter-spacing: -.018em;
  color: var(--lws-head); text-align: center; margin: 0 0 14px; line-height: 1.2;
}
.lws-lede p { text-align: center; color: var(--lws-body); font-size: 1.04rem; line-height: 1.62; max-width: 660px; margin: 0 auto 6px; }
.lws-lede a { color: var(--lws-accent-3); text-decoration: underline; text-underline-offset: 3px; }
.lws-pull p {
  text-align: center; font-size: clamp(1.1rem, 1.7vw, 1.35rem); font-weight: 600;
  color: var(--lws-head); line-height: 1.5; max-width: 720px; margin: 40px auto 0;
}
.lws-pull .lws-hl { color: var(--lws-accent-3); }

/* Left-aligned heading pair, for sections that should not be another
   centred column. Pair with align="left" on the Flatsome column. */
.lws-headleft .lws-kicker p, .lws-headleft.lws-kicker p { text-align: left; }
.lws-headleft .lws-h2 h2, .lws-headleft.lws-h2 h2 { text-align: left; }
.lws-headleft .lws-lede p, .lws-headleft.lws-lede p { text-align: left; margin-left: 0; }

/* An honest, stated limit. Volunteering a constraint makes the rest credible. */
.lws-note p {
  font-family: var(--lws-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  text-align: center; color: var(--lws-muted); border-top: 1px solid var(--lws-line);
  padding-top: 22px; margin: 46px auto 0; max-width: 600px; line-height: 1.8;
}
.lws-note a { color: var(--lws-accent-3); text-decoration: underline; text-underline-offset: 3px; }
.lws-note a:hover { color: var(--lws-accent); }

/* --- Objection headline: the customer's own words as the section title ----- */

.lws-quote h2 {
  font-size: clamp(2rem, 3.6vw, 2.9rem); color: var(--lws-accent-3); font-weight: 800;
  letter-spacing: -.02em; text-align: center; line-height: 1.15; margin: 0 0 10px;
}
.lws-answer p {
  text-align: center; font-size: clamp(1.2rem, 2vw, 1.6rem); font-weight: 700;
  color: var(--lws-head); margin: 0 auto 8px; line-height: 1.3;
}
.lws-pairs .lws-pair-t { color: var(--lws-head); font-weight: 700; font-size: 1rem; margin-bottom: 6px; }
.lws-pairs .lws-pair-d { color: var(--lws-body); font-size: .94rem; line-height: 1.55; }
.lws-pairs .lws-pair-d a { color: var(--lws-accent-3); font-weight: 600; }
.lws-pairs .lws-pair-d a:hover { color: var(--lws-accent); }
.lws-pairs .col { border-left: 2px solid var(--lws-line-2); padding-left: 20px; }

/* --- Hand-off list. :has() scopes the flex stretch to columns holding a task
       so the heading row is untouched; without it cards go ragged when a
       label wraps to two lines. ------------------------------------------- */

.lws-handoff .col:has(.lws-task) { display: flex; }
.lws-handoff .col:has(.lws-task) .col-inner { display: flex; flex: 1; }
.lws-handoff .col:has(.lws-task) .col-inner > .text { display: flex; flex: 1; }
.lws-task {
  border: 1px solid var(--lws-line); border-radius: 11px; background: var(--lws-surface);
  padding: 20px 22px; flex: 1 1 auto; transition: border-color .2s ease, transform .2s ease;
}
.lws-task:hover { border-color: var(--lws-line-2); transform: translateY(-2px); }
.lws-task-t { font-family: var(--lws-mono); font-size: .88rem; color: var(--lws-accent-3); margin-bottom: 8px; letter-spacing: .02em; }
.lws-task-d { color: var(--lws-body); font-size: .92rem; line-height: 1.5; }
.lws-handoff .col { margin-bottom: 14px; }

/* --- Placeholder flag: deliberately loud, must never ship unnoticed -------- */

.lws-ph-flag p {
  font-family: var(--lws-mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  text-align: center; color: #f0b429; border: 1px dashed rgba(240,180,41,.45);
  background: rgba(240,180,41,.07); border-radius: 6px; padding: 7px 14px;
  display: inline-block; margin: 0 0 26px;
}
.lws-ph-wrap { text-align: center; }
.lws-logo-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.lws-logo-row span {
  font-family: var(--lws-mono); font-size: 10.5px; letter-spacing: .14em; color: var(--lws-muted);
  border: 1px dashed var(--lws-line); border-radius: 8px; padding: 20px 26px; min-width: 150px; text-align: center;
}

/* --- Real client logos, knocked back so mismatched brand colours do not
       fight the page; full colour on hover. -------------------------------- */

.lws-clients { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 18px; }
.lws-clients .lws-client {
  background: rgba(255,255,255,.04); border: 1px solid var(--lws-line); border-radius: 10px;
  padding: 18px 24px; min-width: 170px; text-align: center;
  transition: border-color .2s ease, background .2s ease;
}
.lws-clients .lws-client:hover { border-color: var(--lws-line-2); background: rgba(139,92,246,.06); }
.lws-clients .lws-client img {
  max-height: 44px; width: auto; filter: grayscale(1) brightness(1.7); opacity: .8;
  transition: filter .2s ease, opacity .2s ease;
}
.lws-clients .lws-client:hover img { filter: none; opacity: 1; }
.lws-clients .lws-client-name {
  font-family: var(--lws-mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--lws-muted); line-height: 1.5;
}

/* --- Cards. [featured_box] renders .icon-box.featured-box > .icon-box-text.
       Flex + order puts the mono label above the h5 Flatsome prints first.
       .col-inner has no height, so height:100% collapses; make the column and
       its inner wrapper flex containers so the box actually stretches. ----- */

.lws-card > .col { display: flex; }
.lws-card > .col > .col-inner { display: flex; flex-direction: column; flex: 1; }
.lws-card .featured-box {
  background: var(--lws-surface); border: 1px solid var(--lws-line); border-radius: 15px;
  padding: 28px 26px; flex: 1 1 auto;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.lws-card .featured-box:hover {
  border-color: var(--lws-line-2); box-shadow: 0 20px 44px -26px rgba(139,92,246,.55); transform: translateY(-3px);
}
.lws-card .icon-box-text { display: flex; flex-direction: column; color: var(--lws-body); line-height: 1.62; font-size: .96rem; }
.lws-card .icon-box-text h5 {
  order: 1; font-size: 1.06rem !important; text-transform: none !important; font-weight: 700;
  color: var(--lws-head); margin: 0 0 9px; letter-spacing: -.005em;
}
.lws-card .lws-num {
  order: 0; font-family: var(--lws-mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--lws-label); margin-bottom: 13px; font-weight: 600;
}
.lws-card .lws-body { order: 2; }
.lws-card .lws-body a { color: var(--lws-accent-3); text-decoration: underline; text-underline-offset: 3px; }
.lws-card .button.is-link {
  margin-top: 14px !important; padding-left: 26px !important; font-weight: 700 !important;
  text-transform: none !important; color: var(--lws-accent-3) !important; align-self: flex-start;
}
.lws-card .lws-body ul { list-style: none; margin: 14px 0 0; padding: 0; }
.lws-card .lws-body li { position: relative; padding-left: 19px; margin-bottom: 9px; font-size: .92rem; line-height: 1.5; color: var(--lws-body); }
.lws-card .lws-body li:before {
  content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 6px;
  border-radius: 50%; background: var(--lws-accent);
}
.lws-partner .featured-box { padding: 32px 30px; }

/* ==========================================================================
   Content forms added in 3.1.0.

   Before this the card was the only form on the site and it carried roughly
   four fifths of every page. These are the alternatives. Each page below gets
   assigned one as its spine so no two pages argue the same way:

     home        lws-track + lws-band    hosting   lws-term + lws-cmp
     store       lws-ledger + lws-split  seo       lws-dial + lws-term + lws-cmp
     case study  lws-ledger              domains   lws-track
     about       lws-brief               contact   lws-track
     md seo      lws-brief (sticky TOC)  baltimore lws-band
     virginia    lws-split x4            md design lws-cmp
     catonsville lws-dial + lws-inc      legal     lws-brief (sticky TOC)
   ========================================================================== */

/* --- Readout panel. A real terminal or report window. Monospace, left
       aligned, tabular. Reads as evidence rather than marketing because
       nothing else on the site looks like it. ------------------------------ */

.lws-term {
  background: #07080c; border: 1px solid var(--lws-line); border-radius: 12px;
  overflow: hidden; font-family: var(--lws-mono); text-align: left;
  box-shadow: 0 34px 64px -34px rgba(0,0,0,.92);
}
.lws-term-bar {
  display: flex; align-items: center; gap: 7px; padding: 11px 15px;
  border-bottom: 1px solid var(--lws-line); background: rgba(255,255,255,.026);
}
.lws-term-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--lws-line); display: block; }
.lws-term-bar b {
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--lws-muted); font-weight: 500; margin-left: 9px;
}
.lws-term-body { padding: 17px 16px 19px; font-size: 12.5px; line-height: 1.95; }
.lws-term-body .r { display: flex; gap: 13px; align-items: baseline; }
.lws-term-body .t { color: var(--lws-muted); flex: 0 0 auto; }
.lws-term-body .m { color: var(--lws-body); }
.lws-term-body .ok { color: var(--lws-ok); }
.lws-term-body .wr { color: var(--lws-warn); }
.lws-term-body .ac { color: var(--lws-accent-3); }
.lws-term-body .hd {
  color: var(--lws-muted); border-bottom: 1px solid var(--lws-line);
  padding-bottom: 9px; margin-bottom: 11px; letter-spacing: .12em;
  text-transform: uppercase; font-size: 10.5px;
}
.lws-term-foot {
  border-top: 1px solid var(--lws-line); padding: 11px 16px;
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--lws-muted);
}

/* --- Comparison table. The single most useful form the references have that
       this site did not: it lets a claim be checked instead of believed. --- */

.lws-cmp-wrap {
  overflow-x: auto; border: 1px solid var(--lws-line); border-radius: 14px;
  background: var(--lws-surface); -webkit-overflow-scrolling: touch;
}
/* The table is deliberately wider than a phone and scrolls inside this
   wrapper. Overlay scrollbars are invisible on a dark ground until the moment
   you drag, so without an affordance the table just looks cut off. Give it a
   real scrollbar and fade the edge it can still travel toward. */
@media only screen and (max-width: 48em) {
  .lws-cmp-wrap { scrollbar-width: thin; scrollbar-color: var(--lws-accent-2) rgba(255,255,255,.05); }
  .lws-cmp-wrap::-webkit-scrollbar { height: 6px; }
  .lws-cmp-wrap::-webkit-scrollbar-track { background: rgba(255,255,255,.05); }
  .lws-cmp-wrap::-webkit-scrollbar-thumb { background: var(--lws-accent-2); border-radius: 99px; }
  .lws-cmp-wrap {
    -webkit-mask-image: linear-gradient(to right, #000 86%, rgba(0,0,0,.25) 100%);
            mask-image: linear-gradient(to right, #000 86%, rgba(0,0,0,.25) 100%);
  }
}
.lws-cmp { width: 100%; min-width: 620px; border-collapse: separate; border-spacing: 0; text-align: left; margin: 0; }
.lws-cmp th, .lws-cmp td { padding: 15px 18px; border-bottom: 1px solid var(--lws-line); vertical-align: top; }
.lws-cmp thead th {
  font-family: var(--lws-mono); font-size: 10.5px; letter-spacing: .15em; text-transform: uppercase;
  color: var(--lws-muted); font-weight: 600; border-bottom-color: var(--lws-line-2); background: rgba(255,255,255,.02);
}
.lws-cmp thead th.is-us { color: var(--lws-accent-3); background: rgba(139,92,246,.09); }
.lws-cmp tbody th { color: var(--lws-head); font-weight: 600; width: 28%; font-size: .95rem; }
.lws-cmp tbody td { color: var(--lws-body); font-size: .93rem; line-height: 1.55; }
.lws-cmp tbody td.is-us { color: var(--lws-head); background: rgba(139,92,246,.055); }
.lws-cmp tbody tr:last-child th, .lws-cmp tbody tr:last-child td { border-bottom: 0; }
.lws-cmp .no { color: var(--lws-muted); }
.lws-cmp a { color: var(--lws-accent-3); text-decoration: underline; text-underline-offset: 3px; }

/* --- Timeline with a spine. Vertical, left aligned, asymmetric. Replaces the
       numbered card grid wherever the content is genuinely sequential, which
       a row of equal boxes never communicates. ---------------------------- */

.lws-track { text-align: left; max-width: 760px; margin: 0 auto; }
.lws-track-i { position: relative; padding: 0 0 32px 38px; border-left: 1px solid var(--lws-line); }
.lws-track-i:last-child { border-left-color: transparent; padding-bottom: 0; }
.lws-track-i:before {
  content: ""; position: absolute; left: -6px; top: 4px; width: 11px; height: 11px;
  border-radius: 50%; background: var(--lws-ink); border: 2px solid var(--lws-accent);
}
.lws-track-i:last-child:before { background: var(--lws-accent); }
.lws-track-n {
  font-family: var(--lws-mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--lws-label); margin-bottom: 7px;
}
.lws-track-t { color: var(--lws-head); font-weight: 700; font-size: 1.07rem; margin-bottom: 7px; line-height: 1.35; }
.lws-track-d { color: var(--lws-body); line-height: 1.65; font-size: .96rem; }
.lws-track-d a { color: var(--lws-accent-3); text-decoration: underline; text-underline-offset: 3px; }
.lws-track-d a:hover { color: var(--lws-accent); }


/* --- Full-bleed stat band. Edge to edge, its own ground, breaks the run of
       identical padded sections. ------------------------------------------ */

.lws-band {
  background: var(--lws-ink-alt) !important;
  border-top: 1px solid var(--lws-line); border-bottom: 1px solid var(--lws-line);
  padding: 52px 0 !important;
}
.lws-bandrow { display: flex; flex-wrap: wrap; justify-content: space-around; align-items: flex-start; }
.lws-bandrow .lws-b { text-align: center; padding: 0 20px; flex: 1 1 165px; }
.lws-bandrow .lws-b-n {
  font-size: clamp(1.85rem, 3.3vw, 2.6rem); font-weight: 800; letter-spacing: -.035em;
  color: var(--lws-head); line-height: 1;
}
.lws-bandrow .lws-b-n em { font-style: normal; color: var(--lws-accent-3); }
/* 3.2.2: this caption was 10px uppercase mono tracked at .15em, which is a
   label treatment: fine to five words, unreadable past that. The captions run
   to fourteen, and the longest wrapped to three lines of all-caps in a 350px
   column. Because the line above it is a verdict rather than a magnitude, the
   caption is what actually carries the meaning, so it has to be read and not
   merely seen. Sentence case at .875rem on --lws-body measures 7.29:1. */
.lws-bandrow .lws-b-l {
  font-size: .875rem; color: var(--lws-body); line-height: 1.55;
  margin: 11px auto 0; max-width: 33ch;
}
/* The band sits directly on the CTA-free run of a page, so its own note needs
   less top gap than the standalone .lws-note default. */
.lws-band .lws-note p { margin-top: 34px; }

/* --- Asymmetric split. Copy one side, artifact the other, sides alternating
       down the page — the hermes pattern. Flatsome emits columns in source
       order, so --flip reverses them at desktop only and the mobile stack
       keeps copy first. --------------------------------------------------- */

.lws-split .row { align-items: center; }
.lws-split .lws-sp-n {
  font-family: var(--lws-mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--lws-label); margin-bottom: 12px;
}
.lws-split .lws-sp-t {
  color: var(--lws-head); font-weight: 800; font-size: clamp(1.35rem, 2.2vw, 1.8rem);
  letter-spacing: -.015em; line-height: 1.22; margin-bottom: 14px;
}
.lws-split .lws-sp-d { color: var(--lws-body); line-height: 1.7; font-size: 1rem; }
.lws-split .lws-sp-d a { color: var(--lws-accent-3); text-decoration: underline; text-underline-offset: 3px; }
.lws-split .lws-sp-d a:hover { color: var(--lws-accent); }
.lws-split .lws-sp-d strong { color: var(--lws-head); font-weight: 700; }
.lws-split .lws-sp-d ul { list-style: none; margin: 16px 0 0; padding: 0; }
.lws-split .lws-sp-d li { position: relative; padding-left: 19px; margin-bottom: 9px; font-size: .95rem; line-height: 1.55; }
.lws-split .lws-sp-d li:before {
  content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 6px;
  border-radius: 50%; background: var(--lws-accent);
}
@media only screen and (min-width: 850px) {
  .lws-split--flip .row { flex-direction: row-reverse; }
}

/* --- Generic artifact panel, for the non-copy side of a split. ------------ */

.lws-panel {
  border: 1px solid var(--lws-line); border-radius: 14px; background: var(--lws-surface);
  padding: 22px 24px; text-align: left;
}
.lws-panel-k {
  font-family: var(--lws-mono); font-size: 10.5px; letter-spacing: .15em; text-transform: uppercase;
  color: var(--lws-muted); margin-bottom: 13px; padding-bottom: 12px; border-bottom: 1px solid var(--lws-line);
}
.lws-panel-r {
  display: flex; justify-content: space-between; gap: 18px; padding: 10px 0;
  color: var(--lws-body); font-size: .93rem; line-height: 1.45;
  border-bottom: 1px dashed rgba(255,255,255,.065);
}
.lws-panel-r:last-child { border-bottom: 0; padding-bottom: 0; }
.lws-panel-r b { color: var(--lws-head); font-weight: 600; }
.lws-panel-r span { font-family: var(--lws-mono); font-size: .8rem; color: var(--lws-accent-3); white-space: nowrap; flex: 0 0 auto; }
.lws-panel-r span.no { color: var(--lws-muted); }
/* A link in the right-hand slot is a navigation affordance, not body copy;
   inherit the slot's accent rather than Flatsome's global link colour. */
.lws-panel-r span a { color: inherit; text-decoration: none; font-weight: 600; }
.lws-panel-r span a:hover { color: var(--lws-head); }
.lws-panel-r > div a { color: var(--lws-accent-3); text-decoration: underline; text-underline-offset: 3px; }

/* --- Ledger: what you hand over on the left, what comes back on the right.
       Two hard columns, no cards. ----------------------------------------- */

.lws-ledger { border: 1px solid var(--lws-line); border-radius: 14px; overflow: hidden; text-align: left; }
.lws-ledger .lws-lg-h { display: grid; grid-template-columns: 1fr 1fr; background: rgba(255,255,255,.03); border-bottom: 1px solid var(--lws-line-2); }
.lws-ledger .lws-lg-h > div {
  padding: 13px 20px; font-family: var(--lws-mono); font-size: 10.5px;
  letter-spacing: .15em; text-transform: uppercase; color: var(--lws-muted);
}
.lws-ledger .lws-lg-h > div + div { color: var(--lws-accent-3); border-left: 1px solid var(--lws-line); }
.lws-ledger .lws-lg-r { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--lws-line); }
.lws-ledger .lws-lg-r:last-child { border-bottom: 0; }
.lws-ledger .lws-lg-r > div { padding: 15px 20px; color: var(--lws-body); font-size: .94rem; line-height: 1.55; }
.lws-ledger .lws-lg-r > div + div { color: var(--lws-head); border-left: 1px solid var(--lws-line); background: rgba(139,92,246,.05); }

/* --- Brief: sticky heading column left, body right. The only two-column
       reading layout on the site.

       Flatsome's .row is a flex container so .col stretches, but .col-inner
       is auto-height, and a sticky child can only travel inside its nearest
       block container. Without height:100% here the sticky column has zero
       travel and behaves as static. --------------------------------------- */

.lws-brief { text-align: left; }
.lws-brief .col-inner { height: 100%; }
.lws-brief .lws-br-side { position: sticky; top: calc(var(--lws-header-h) + 24px); }
.lws-brief .lws-br-k {
  font-family: var(--lws-mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--lws-accent-3); margin-bottom: 12px;
}
.lws-brief .lws-br-side h2 {
  color: var(--lws-head); font-weight: 800; font-size: clamp(1.45rem, 2.4vw, 1.95rem);
  letter-spacing: -.018em; line-height: 1.2; text-align: left; margin: 0 0 12px;
}
.lws-brief .lws-br-side p { color: var(--lws-muted); font-size: .94rem; line-height: 1.65; }
.lws-brief .lws-br-side ul { list-style: none; margin: 16px 0 0; padding: 0; }
.lws-brief .lws-br-side li { margin-bottom: 9px; }
.lws-brief .lws-br-side li a {
  color: var(--lws-body); font-size: .92rem; text-decoration: none;
  border-left: 2px solid var(--lws-line); padding-left: 12px; display: block;
  transition: color .15s ease, border-color .15s ease;
}
.lws-brief .lws-br-side li a:hover { color: var(--lws-accent-3); border-left-color: var(--lws-accent); }
/* Anchor targets must clear the fixed header when a TOC link is followed. */
.lws-brief .lws-prose h2[id] { scroll-margin-top: calc(var(--lws-header-h) + 20px); }

/* --- Dial: one oversized statement, alone on its ground. Every reference
       site does this at least once; this site never did. ------------------ */

.lws-dial { padding: 92px 0 !important; background: var(--lws-ink-alt) !important; }
.lws-dial .lws-dial-t p {
  text-align: center; font-size: clamp(1.55rem, 4vw, 3rem); font-weight: 800;
  letter-spacing: -.028em; line-height: 1.16; color: var(--lws-head);
  max-width: 980px; margin: 0 auto;
}
.lws-dial .lws-hl {
  background: linear-gradient(96deg, var(--lws-accent-3), var(--lws-accent-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lws-dial .lws-dial-s p {
  text-align: center; font-size: 1rem; font-weight: 400; color: var(--lws-muted);
  margin: 28px auto 0; letter-spacing: 0; max-width: 620px; line-height: 1.7;
}

/* --- Included checklist --------------------------------------------------- */

.lws-inc h4 {
  font-family: var(--lws-mono); font-size: .82rem; text-transform: uppercase; letter-spacing: .13em;
  color: var(--lws-accent-3); font-weight: 700; margin: 0 0 15px;
}
.lws-inc ul { list-style: none; margin: 0; padding: 0; }
.lws-inc li { position: relative; padding-left: 26px; margin-bottom: 11px; color: var(--lws-body); line-height: 1.5; font-size: .95rem; }
.lws-inc li:before {
  content: ""; position: absolute; left: 0; top: .44em; width: 13px; height: 7px;
  border-left: 2px solid var(--lws-accent); border-bottom: 2px solid var(--lws-accent);
  transform: rotate(-45deg);
}

/* --- FAQ ------------------------------------------------------------------ */

.lws-faq .accordion-item {
  border: 1px solid var(--lws-line); border-radius: 12px; margin-bottom: 11px;
  background: var(--lws-surface); overflow: hidden;
}
/* Flatsome builds this row out of two coupled pieces: .accordion-title gets
   padding:.6em 2.3em to open a gutter, and .toggle is absolutely positioned
   into that gutter at left:0 / width:2.3em / top:.3em. The two only agree
   because both are stated in em against the title's own font-size. Restyling
   the title with pixel padding kept the toggle's em geometry and removed the
   space it was aiming at, so the chevron overlapped the first word by 7px,
   sat 7px above the text's centre, and was clipped by the card's radius.

   Rather than re-derive matching pixel values, which would drift again the
   next time the type scale moves, lay the row out with flex and let the
   chevron be an ordinary in-flow item. Alignment then holds at any title
   length, font size or wrap count. Chevron moves to the right, which is also
   where the rest of the site puts its affordances. */
.lws-faq .accordion-title {
  display: flex; align-items: center; gap: 14px;
  border: 0 !important; padding: 17px 20px !important; font-weight: 700;
  color: var(--lws-head) !important; font-size: 1rem; line-height: 1.4;
}
.lws-faq .accordion-title > span { order: 1; flex: 1 1 auto; }
.lws-faq .accordion-title .toggle {
  order: 2; flex: 0 0 auto; position: static;
  width: 22px; height: 22px; margin: 0; padding: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--lws-accent-3); opacity: 1;
}
.lws-faq .accordion-title .toggle i { font-size: 20px; line-height: 1; display: block; }
.lws-faq .accordion-title:hover { background: rgba(139,92,246,.08); }
/* Flatsome's own .accordion-title.active recolours to --fs-color-primary
   (#483791), which is unreadable here; the !important above already wins the
   colour, this just gives the open row a visible state of its own. */
.lws-faq .accordion-title.active { background: rgba(139,92,246,.07); }
.lws-faq .accordion-inner { padding: 0 20px 19px; color: var(--lws-body); line-height: 1.65; font-size: .96rem; }
.lws-faq .accordion-inner a { color: var(--lws-accent-3); text-decoration: underline; text-underline-offset: 3px; }

/* --- Contact card --------------------------------------------------------- */

.lws-contact h4 {
  font-family: var(--lws-mono); font-size: .82rem; text-transform: uppercase;
  letter-spacing: .13em; color: var(--lws-accent-3); margin: 0 0 14px;
}
.lws-contact p { color: var(--lws-body); line-height: 1.62; font-size: .95rem; }
.lws-contact .lws-contact-strong { color: var(--lws-head); font-weight: 700; margin-top: 14px; }
.lws-contact .lws-contact-strong span { font-weight: 400; color: var(--lws-body); }

/* --- Long-form prose: legal pages, case-study bodies, and the local landing
       pages whose copy is preserved verbatim for SEO. --------------------- */

.lws-prose { color: var(--lws-body); font-size: 1rem; line-height: 1.75; }
.lws-prose h2 {
  color: var(--lws-head); font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 800;
  letter-spacing: -.015em; margin: 46px 0 14px; line-height: 1.25;
}
.lws-prose h3 { color: var(--lws-head); font-size: 1.25rem; font-weight: 700; margin: 34px 0 12px; }
.lws-prose h4 {
  color: var(--lws-accent-3); font-family: var(--lws-mono); font-size: .8rem;
  letter-spacing: .14em; text-transform: uppercase; margin: 30px 0 10px;
}
.lws-prose h2:first-child, .lws-prose h3:first-child, .lws-prose h4:first-child { margin-top: 0; }
.lws-prose p { margin: 0 0 16px; }
.lws-prose a { color: var(--lws-accent-3); text-decoration: underline; text-underline-offset: 3px; }
.lws-prose a:hover { color: var(--lws-accent); }
.lws-prose strong { color: var(--lws-head); font-weight: 700; }
.lws-prose ul, .lws-prose ol { margin: 0 0 18px; padding-left: 20px; }
.lws-prose li { margin-bottom: 9px; }
.lws-prose ul li::marker { color: var(--lws-accent); }
.lws-prose img { border-radius: 12px; border: 1px solid var(--lws-line); margin: 10px 0 20px; }
.lws-prose hr { border: 0; border-top: 1px solid var(--lws-line); margin: 40px 0; }
.lws-prose-narrow { max-width: 780px; margin: 0 auto; }

/* --- Case study block ----------------------------------------------------- */

.lws-case .lws-case-logo {
  background: #fff; border-radius: 12px; padding: 18px 22px;
  display: inline-block; margin-bottom: 22px; max-width: 190px;
}
.lws-case .lws-case-logo img { display: block; width: 100%; height: auto; }
.lws-case-meta {
  font-family: var(--lws-mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--lws-muted); margin-bottom: 12px;
}
.lws-case-meta p { margin: 0; line-height: 1.9; }
.lws-metrics { display: flex; flex-wrap: wrap; margin: 30px 0 6px; }
.lws-metrics .lws-metric { padding: 0 30px 0 0; margin-right: 30px; border-right: 1px solid var(--lws-line); }
.lws-metrics .lws-metric:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.lws-metric-n {
  font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.1;
  background: linear-gradient(96deg, var(--lws-accent-3), var(--lws-accent-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lws-metric-l {
  font-family: var(--lws-mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--lws-muted); margin-top: 6px;
}
/* The case-study ledger follows a prose column, so it needs its own top gap. */
.lws-case .lws-ledger { margin-top: 40px; }

/* --- Testimonials on dark -------------------------------------------------- */

.lws-quotes > .col { display: flex; }
.lws-quotes > .col > .col-inner { display: flex; flex: 1; }
.lws-quotes .testimonial-box {
  background: var(--lws-surface); border: 1px solid var(--lws-line);
  border-radius: 15px; padding: 28px 26px; flex: 1 1 auto;
}
.lws-quotes .testimonial-text { color: var(--lws-head) !important; font-style: normal !important; font-size: 1rem; line-height: 1.6; }
.lws-quotes .testimonial-name { color: var(--lws-head); font-size: .92rem; }
.lws-quotes .testimonial-company { color: var(--lws-muted); font-size: .88rem; }
.lws-quotes .testimonial-name-divider { color: var(--lws-line); }
.lws-quotes .star-rating span:before { color: var(--lws-accent-3) !important; }
.lws-quotes .testimonial-box .icon-box-img img { border-radius: 50%; }

/* --- Contact page. Forminator ships opinionated CSS, hence !important. ----- */

.lws-contactdetails a { color: var(--lws-head); text-decoration: none; font-weight: 600; }
.lws-contactdetails a:hover { color: var(--lws-accent-3); }
.lws-contactdetails .lws-cd-label {
  font-family: var(--lws-mono); font-size: 10.5px; letter-spacing: .15em;
  text-transform: uppercase; color: var(--lws-muted); margin-bottom: 6px;
}
.lws-contactdetails .lws-cd-row { margin-bottom: 24px; }

.lws-form .forminator-ui.forminator-custom-form { background: transparent !important; }
.lws-form .forminator-ui input[type="text"],
.lws-form .forminator-ui input[type="email"],
.lws-form .forminator-ui input[type="tel"],
.lws-form .forminator-ui input[type="url"],
.lws-form .forminator-ui input[type="number"],
.lws-form .forminator-ui textarea,
.lws-form .forminator-ui select {
  background: var(--lws-surface) !important; border: 1px solid var(--lws-line) !important;
  color: var(--lws-head) !important; border-radius: 9px !important;
}
.lws-form .forminator-ui input::placeholder, .lws-form .forminator-ui textarea::placeholder { color: var(--lws-muted) !important; }
.lws-form .forminator-ui input:focus,
.lws-form .forminator-ui textarea:focus,
.lws-form .forminator-ui select:focus {
  border-color: var(--lws-line-2) !important; box-shadow: 0 0 0 3px rgba(139,92,246,.14) !important;
}
.lws-form .forminator-ui label, .lws-form .forminator-ui .forminator-label { color: var(--lws-body) !important; font-weight: 600 !important; }
.lws-form .forminator-ui button[type="submit"],
.lws-form .forminator-ui .forminator-button-submit {
  background: linear-gradient(96deg, var(--lws-accent-2), var(--lws-accent)) !important;
  border: 0 !important; color: #fff !important; border-radius: 9px !important;
  font-weight: 700 !important; box-shadow: 0 12px 32px -12px rgba(124,58,237,.8) !important;
}

/* --- Closing CTA ---------------------------------------------------------- */

.lws-cta {
  background: linear-gradient(120deg, var(--lws-ink-3) 0%, var(--lws-ink-2) 55%, var(--lws-ink) 100%) !important;
  padding: 92px 0 !important;
}

/* --- Mobile. Header measured at 90px on staging at 375px, not 70. --------- */

@media only screen and (max-width: 48em) {
  :root { --lws-header-h: 90px; }

  .lws-hero { padding: calc(var(--lws-header-h) + 56px) 0 76px !important; }
  .lws-hero--split { padding: calc(var(--lws-header-h) + 44px) 0 58px !important; }
  .lws-hero--metric { padding: calc(var(--lws-header-h) + 44px) 0 60px !important; }
  .lws-hero--brief { padding: calc(var(--lws-header-h) + 34px) 0 38px !important; }
  .lws-hero--metric .lws-metrics { margin-top: 34px; }
  .lws-hero--metric .lws-metrics .lws-metric { margin-bottom: 20px; }

  .lws-card .featured-box { padding: 24px 20px; }
  .lws-partner .featured-box { padding: 26px 22px; }
  .lws-cta { padding: 66px 0 !important; }
  .lws-logo-row span { min-width: 120px; padding: 16px 18px; }
  .lws-pull p { margin-top: 30px; }
  .lws-card > .col { display: block; }

  .lws-herostats { margin-top: 34px; }
  .lws-herostats .lws-hs { padding: 14px 0; border-left: 0; border-top: 1px solid var(--lws-line); width: 100%; }
  .lws-herostats .lws-hs:first-child { border-top: 0; }

  .lws-pairs .col { margin-bottom: 20px; }
  .lws-metrics .lws-metric { border-right: 0; margin-right: 0; padding-right: 0; margin-bottom: 18px; }
  .lws-quotes > .col { display: block; }
  .lws-clients .lws-client { min-width: 132px; padding: 14px 16px; }
  .lws-prose h2 { margin-top: 34px; }

  /* 3.1.0 forms */
  .lws-term-body { font-size: 11.5px; padding: 14px 13px 16px; line-height: 1.85; }
  .lws-term-body .r { flex-wrap: wrap; gap: 3px 10px; }
  .lws-cmp th, .lws-cmp td { padding: 12px 14px; }
  .lws-track-i { padding: 0 0 26px 26px; }
  .lws-band { padding: 38px 0 !important; }
  .lws-bandrow .lws-b { flex: 1 1 100%; padding: 15px 0; border-top: 1px solid var(--lws-line); }
  .lws-bandrow .lws-b:first-child { border-top: 0; padding-top: 0; }
  .lws-ledger .lws-lg-h, .lws-ledger .lws-lg-r { grid-template-columns: 1fr; }
  .lws-ledger .lws-lg-h > div + div,
  .lws-ledger .lws-lg-r > div + div { border-left: 0; border-top: 1px solid var(--lws-line); }
  .lws-ledger .lws-lg-h > div { padding-bottom: 6px; }
  .lws-ledger .lws-lg-h > div + div { padding-top: 6px; }
  .lws-brief .col-inner { height: auto; }
  .lws-brief .lws-br-side { position: static; margin-bottom: 30px; }
  .lws-dial { padding: 60px 0 !important; }
  .lws-panel { padding: 20px 20px; }
  .lws-panel-r { flex-wrap: wrap; gap: 4px 14px; }
  .lws-split .lws-sp-art { margin-top: 26px; }
  .lws-case .lws-ledger { margin-top: 28px; }

  /* 3.2.0 — mobile defects found in QA */

  /* The two hero buttons are inline-blocks of unequal width inside a centred
     column, so each centred on its own line and they landed 7px out of line
     with a ragged right edge. Full-width stacking is both the fix and the
     better phone target. */
  .lws-hero .lws-btn-1, .lws-hero .lws-btn-2 {
    display: block; width: 100%; margin: 0 0 12px !important;
  }
  .lws-hero .lws-btn-2 { margin-bottom: 0 !important; }
  .lws-hero--brief .lws-btn-1 { margin-top: 26px !important; }

  /* The eyebrow is a single-line chip by design. At phone widths the text
     wraps and the pill becomes a 53px two-line box pressed against both
     screen edges, which reads as a broken component rather than a label.
     Drop the chrome and let it be what it is: a line of micro-type. The
     amber .lws-chip keeps its pill, since it never wraps and it is the one
     piece here that has to stay loud. */
  .lws-hero .lws-eyebrow span {
    display: inline; border: 0; background: none; padding: 0;
  }
  .lws-hero .lws-eyebrow {
    font-size: 10.5px; letter-spacing: .16em; line-height: 1.85; margin-bottom: 20px;
  }
  .lws-hero .lws-eyebrow .lws-chip {
    display: inline-block; border: 1px solid rgba(240,180,41,.4);
    background: rgba(240,180,41,.08); border-radius: 999px;
    padding: 4px 12px; margin: 9px 0 0;
  }

  /* Touch targets. 44px is the floor; these were 24-33px. */
  .lws-card .button.is-link { min-height: 44px; display: inline-flex; align-items: center; }
  .mobile-nav .nav-icon > a { min-width: 44px; text-align: center; }
  body.blog .more-link, body.archive .more-link { min-height: 44px; display: inline-flex; align-items: center; }
}

/* ==========================================================================
   Footer.

   The last surface that was never migrated. Flatsome paints .absolute-footer
   from a Customizer colour (#4d4d4d), so a site that is #0b0d12 from the
   header down ended on a mid-grey slab. Same defect class as the white #main
   fixed in 3.1.2, just further down the page where it was easy to miss.

   Note for later: both Flatsome footer widget areas are empty, so this is a
   single 63px bar carrying an address and a copyright line. There is no
   footer navigation anywhere on the site.
   ========================================================================== */

#footer, .footer-wrapper { background-color: var(--lws-ink); }
.absolute-footer {
  background-color: var(--lws-ink) !important;
  border-top: 1px solid var(--lws-line);
  color: var(--lws-muted) !important;
  padding: 26px 0 !important;
  font-size: .86rem; line-height: 1.7;
}
.absolute-footer a { color: var(--lws-body); text-decoration: none; }
.absolute-footer a:hover { color: var(--lws-accent-3); }
.absolute-footer .copyright-footer strong { color: var(--lws-head); font-weight: 600; }
#top-link {
  background: rgba(21,24,36,.92) !important;
  border-color: var(--lws-line) !important;
  color: var(--lws-body) !important;
}
#top-link:hover { border-color: var(--lws-line-2) !important; color: var(--lws-accent-3) !important; }

/* ==========================================================================
   Blog archive and single posts.

   Template-driven, so they cannot carry .lws-* section classes; scope by
   WordPress body classes instead. The posts page ignores _wp_page_template,
   so its header is solid rather than transparent. Darken it here or the blog
   shows a white bar above a dark body.
   ========================================================================== */

body.blog, body.archive, body.single-post, body.search, body.error404 { background: var(--lws-ink); }

body.blog #content, body.archive #content,
body.single-post #content, body.search #content, body.error404 #content { background: var(--lws-ink); }

body.blog #header .header-main,
body.archive #header .header-main,
body.single-post #header .header-main,
body.search #header .header-main,
body.error404 #header .header-main { background-color: var(--lws-ink-2) !important; }

body.blog #header .header-bottom,
body.archive #header .header-bottom,
body.single-post #header .header-bottom { background-color: var(--lws-ink-2) !important; }

body.blog #header .nav > li > a,
body.archive #header .nav > li > a,
body.single-post #header .nav > li > a { color: var(--lws-head); }
body.blog #header .nav > li > a:hover,
body.archive #header .nav > li > a:hover,
body.single-post #header .nav > li > a:hover { color: var(--lws-accent-3); }

body.blog .post-item .box, body.archive .post-item .box {
  background: var(--lws-surface); border: 1px solid var(--lws-line);
  border-radius: 14px; overflow: hidden;
}
body.blog .post-item .box-text, body.archive .post-item .box-text { padding: 18px 20px 22px; }
body.blog .post-title a, body.archive .post-title a { color: var(--lws-head) !important; font-weight: 700; }
body.blog .post-title a:hover, body.archive .post-title a:hover { color: var(--lws-accent-3) !important; }
body.blog .from_the_blog_excerpt, body.archive .from_the_blog_excerpt { color: var(--lws-body); }
body.blog .is-divider, body.archive .is-divider, body.single-post .is-divider { background-color: var(--lws-line); }
body.blog .post-meta, body.archive .post-meta, body.single-post .post-meta { color: var(--lws-muted); }
body.blog .badge-outline .badge-inner, body.archive .badge-outline .badge-inner {
  border-color: var(--lws-line) !important; color: var(--lws-accent-3); background: rgba(11,13,18,.82);
}


body.blog .entry-title, body.archive .entry-title,
body.single-post .entry-title, body.archive .page-title { color: var(--lws-head); }
body.archive .archive-page-header, body.blog .blog-featured-title { background: transparent; }

body.single-post .entry-content { color: var(--lws-body); font-size: 1.02rem; line-height: 1.78; }
body.single-post .entry-content h2 { color: var(--lws-head); font-weight: 800; letter-spacing: -.015em; margin: 46px 0 14px; }
body.single-post .entry-content h3 { color: var(--lws-head); font-weight: 700; margin: 34px 0 12px; }
body.single-post .entry-content h4 { color: var(--lws-accent-3); margin: 30px 0 10px; }
body.single-post .entry-content a { color: var(--lws-accent-3); text-decoration: underline; text-underline-offset: 3px; }
body.single-post .entry-content a:hover { color: var(--lws-accent); }
body.single-post .entry-content strong { color: var(--lws-head); }
body.single-post .entry-content li { margin-bottom: 9px; }
body.single-post .entry-content ul li::marker { color: var(--lws-accent); }
body.single-post .entry-content img { border-radius: 12px; border: 1px solid var(--lws-line); }
body.single-post .entry-content blockquote {
  border-left: 3px solid var(--lws-accent); background: var(--lws-surface);
  padding: 18px 22px; border-radius: 0 10px 10px 0; color: var(--lws-head);
}
body.single-post .entry-content pre, body.single-post .entry-content code {
  background: var(--lws-surface); border: 1px solid var(--lws-line);
  border-radius: 8px; color: var(--lws-accent-3);
}

body.blog .widget, body.archive .widget, body.single-post .widget { color: var(--lws-body); }
body.blog .widget .widget-title, body.archive .widget .widget-title, body.single-post .widget .widget-title {
  color: var(--lws-head); font-family: var(--lws-mono); font-size: .8rem;
  letter-spacing: .14em; text-transform: uppercase;
}
body.blog .widget a, body.archive .widget a, body.single-post .widget a { color: var(--lws-body); }
body.blog .widget a:hover, body.archive .widget a:hover, body.single-post .widget a:hover { color: var(--lws-accent-3); }
body.blog .widget li, body.archive .widget li, body.single-post .widget li { border-color: var(--lws-line); }

body.blog input[type="search"], body.archive input[type="search"],
body.single-post input[type="search"], body.search input[type="search"] {
  background: var(--lws-surface) !important; border: 1px solid var(--lws-line) !important;
  color: var(--lws-head) !important; border-radius: 9px !important;
}
body.blog .page-numbers a, body.archive .page-numbers a { color: var(--lws-body); border-color: var(--lws-line); }
body.blog .page-numbers .current, body.archive .page-numbers .current {
  background: var(--lws-accent-2); color: #fff; border-color: var(--lws-accent-2);
}
body.single-post .comment-respond, body.single-post .comment-list { color: var(--lws-body); }
body.single-post .comment-list .comment-body { border-color: var(--lws-line); }
body.single-post textarea, body.single-post .comment-form input[type="text"],
body.single-post .comment-form input[type="email"], body.single-post .comment-form input[type="url"] {
  background: var(--lws-surface) !important; border: 1px solid var(--lws-line) !important;
  color: var(--lws-head) !important; border-radius: 9px !important;
}
body.single-post .comment-form .button, body.single-post #commentform .submit {
  background: linear-gradient(96deg, var(--lws-accent-2), var(--lws-accent)) !important;
  border: 0 !important; color: #fff !important; border-radius: 9px !important;
}

/* ==========================================================================
   Flatsome's own template chrome: blog, single, search, 404.

   The blog block above styles what carries .post-item. This is everything
   else Flatsome renders on those templates, and it was all still light.

   Root cause is one token, not a list of selectors. Flatsome sets
   body { color: var(--fs-color-base) } and the Customizer still defines
   --fs-color-base as #242424, so post meta, entry footers, search excerpts,
   widget titles and the 404 copy all inherited near-black onto near-black.
   Not low contrast — invisible. Verified in the browser that re-pointing the
   token alone recolours the whole subtree, so do that rather than override
   each component: anything Flatsome adds in a future release is covered too.

   Safe site-wide because every surface on this site is dark and every .lws-*
   section states its own colour. The one light surface, .lws-case-logo,
   contains an image and no text.
   ========================================================================== */

body { --fs-color-base: var(--lws-body); }

/* Hairlines. Flatsome draws these at #ececec / #ddd, which on this ground
   read as bright white rules rather than dividers. */
.entry-meta, .next-prev-nav, .next-prev-nav > .flex-col, .recent-blog-posts-li,
body.blog .widget li, body.archive .widget li, body.single-post .widget li,
body.search .widget li, body.error404 .widget li { border-color: var(--lws-line) !important; }

/* Meta lines are supporting type, not body copy. */
.entry-meta, .posted-on, .byline, .cat-links, .comments-link, .tags-links { color: var(--lws-muted); }
.entry-meta a, .posted-on a, .byline a, .cat-links a { color: var(--lws-body); }
.entry-meta a:hover, .cat-links a:hover { color: var(--lws-accent-3); }

/* Flatsome's default search field ships white. The .lws-form rules only cover
   the contact page, and body.search only covered input[type=search]; the 404
   and the widget use .search-field. */
.search-field, body.search .search-field, body.error404 .search-field {
  background: var(--lws-surface) !important; border: 1px solid var(--lws-line) !important;
  color: var(--lws-head) !important; border-radius: 9px !important;
}
.search-field::placeholder { color: var(--lws-muted) !important; }

body.search .badge-inner, body.error404 .badge-inner {
  background: var(--lws-surface) !important;
  border-color: var(--lws-line) !important;
  color: var(--lws-accent-3) !important;
}

/* The 404 sets its "404" in a .header-font span, which is not a heading and so
   was missed by the body h1-h6 net in 3.2.0. */
body.error404 .header-font { color: var(--lws-head); }

body.search .page-number, body.error404 .page-number,
body.search .page-numbers a { color: var(--lws-body); border-color: var(--lws-line); }

/* Comment form labels inherit #222 from Flatsome's form defaults. */
body.single-post label, body.single-post .required, body.single-post .comment-form label { color: var(--lws-body); }

/* ==========================================================================
   3.2.2 — comparison table and testimonial avatars.
   ========================================================================== */

/* --- Comparison table linearises on phones -------------------------------

   .lws-cmp carries min-width:620px inside a scrolling wrapper. At 375px that
   left 275px off-screen, and the hidden part was the .is-us column: a phone
   visitor saw the row label and the competitor, then had to discover a
   horizontal scroll to reach ours. The affordance was there (thin scrollbar,
   faded right edge) and plainly was not reading as one. Three pages carry this
   table: hosting, seo-services, maryland-web-design.

   Each row becomes a block instead. The row label is the heading, then one
   line per column tagged from data-label on the cell. Nothing is hidden and
   nothing scrolls sideways.

   Trade-off worth knowing: changing display on table elements drops the table
   out of the accessibility tree, so below 48em a screen reader reads this as a
   sequence of labelled blocks rather than a navigable grid. The order still
   reads correctly, but table-navigation shortcuts do not apply at that width.
   ---------------------------------------------------------------------- */

@media only screen and (max-width: 48em) {
  /* No horizontal travel left, so drop the scroll affordances. */
  .lws-cmp-wrap {
    -webkit-mask-image: none; mask-image: none;
  }

  .lws-cmp { min-width: 0; width: 100%; display: block; }
  .lws-cmp thead { display: none; }
  .lws-cmp tbody,
  .lws-cmp tbody tr,
  .lws-cmp tbody th,
  .lws-cmp tbody td { display: block; }

  .lws-cmp tbody tr {
    border-bottom: 1px solid var(--lws-line-2);
    padding: 4px 0 14px;
  }
  .lws-cmp tbody tr:last-child { border-bottom: 0; }

  .lws-cmp tbody th {
    width: auto; border-bottom: 0;
    padding: 16px 16px 2px;
    font-size: 1.02rem; line-height: 1.3; color: var(--lws-head);
  }

  .lws-cmp tbody td {
    border-bottom: 0;
    padding: 9px 16px 0;
    font-size: .92rem; line-height: 1.5;
  }
  .lws-cmp tbody td::before {
    content: attr(data-label);
    display: block;
    font-family: var(--lws-mono); font-size: 9.5px; letter-spacing: .14em;
    text-transform: uppercase; color: var(--lws-muted);
    margin-bottom: 3px;
  }

  /* Ours keeps the tint it has on desktop, now as a left-edge marker so it is
     the one block that reads as the answer rather than another entry. */
  .lws-cmp tbody td.is-us {
    color: var(--lws-head);
    background: rgba(139,92,246,.055);
    border-left: 2px solid var(--lws-line-2);
    margin: 5px 16px 0; padding: 9px 13px 11px;
    border-radius: 0 7px 7px 0;
  }
  .lws-cmp tbody td.is-us::before { color: var(--lws-accent-3); }
}

/* --- Testimonial avatars are client logos, not headshots ------------------
   Flatsome feeds this slot a hard-cropped 150px square and the stylesheet
   rounds it to a circle, which suits a face and not a wordmark. The two wide
   marks now have square-canvas sources so the crop is lossless; the white
   plate keeps a transparent or dark logo legible on the card, matching how
   .lws-case-logo already presents client marks on the case study page.
   ---------------------------------------------------------------------- */
.lws-quotes .testimonial-box .icon-box-img img {
  background: #fff;
  padding: 7px;
}

/* ==========================================================================
   3.2.3 — QA pass 2 (2026-08-05).

   Companion Customizer changes made in the same pass, recorded here because
   they are invisible in this file: color_links #483791 -> #a78bfa,
   color_links_hover #5a45b6 -> #8b5cf6, color_primary #483791 -> #7c3aed,
   color_secondary #5a45b6 -> #8b5cf6, topbar_left cleared. Those removed
   roughly ninety links at 2.06:1 across the blog, category, search and
   single-post templates. As with topbar_bg, header_bg and footer_bottom_color
   before them: when a surface is stubbornly wrong, look for the unset or stale
   theme mod before writing CSS.
   ========================================================================== */

/* --- Post-template link buttons -------------------------------------------
   color_primary is now #7c3aed, which is right for a button FILL but measures
   3.41:1 as 12px text on --lws-ink. Flatsome paints .primary.is-outline and
   .is-link from that token, so every "Continue reading" on the blog, category
   and search templates inherited it. --lws-accent-3 is the text-weight member
   of the accent family and measures 7.14:1 here. Same distinction as
   --lws-accent vs --lws-label in 3.2.0.
   -------------------------------------------------------------------------- */

body.blog .more-link, body.archive .more-link, body.search .more-link,
body.blog .primary.is-outline, body.archive .primary.is-outline,
body.search .primary.is-outline {
  color: var(--lws-accent-3) !important;
  border-color: var(--lws-line-2) !important;
}
body.blog .more-link:hover, body.archive .more-link:hover,
body.search .more-link:hover {
  color: var(--lws-head) !important;
  border-color: var(--lws-accent-3) !important;
}

/* --- Contact form ---------------------------------------------------------

   Forminator's "material" design causes three separate problems.

   1. One form, two field styles. Forminator declares

        [data-design=material] .forminator-input { background-color:rgba(0,0,0,0)!important }

      at (0,4,0). The .lws-form block earlier in this file is (0,3,1), so the
      three text inputs stayed transparent while the textarea — whose material
      rule carries no !important — picked up the fill.

   2. Filling the control hides the label. THE TRAP: material's floating-label
      class .forminator-floating--input is added BY JAVASCRIPT at runtime, so
      it does not appear in the server HTML and grepping the markup for
      "forminator-floating" finds nothing. The label precedes the input in the
      DOM and material floats it over the field with translateY(30px), so an
      opaque field paints straight over it.

   3. The labels belong above the field in the site's mono face.

   All three resolve together: fill the WRAPPER, leave the control transparent
   as material intends, and neutralise the float so the label is an ordinary
   block above the field. Typography matches .lws-trust p, the hero line
   "Scheduled consultations · Same-day response · Highland, Maryland".
   -------------------------------------------------------------------------- */

.lws-form .forminator-ui.forminator-custom-form[data-design="material"] .forminator-input--wrap,
.lws-form .forminator-ui.forminator-custom-form[data-design="material"] .forminator-textarea--wrap {
  background-color: var(--lws-surface) !important;
  border: 1px solid var(--lws-line) !important;
  border-radius: 9px !important;
}
.lws-form .forminator-ui.forminator-custom-form[data-design="material"] .forminator-input,
.lws-form .forminator-ui.forminator-custom-form[data-design="material"] .forminator-textarea {
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 9px !important;
  color: var(--lws-head) !important;
  padding: 12px 14px !important;
}
.lws-form .forminator-ui.forminator-custom-form[data-design="material"] .forminator-input { min-height: 46px !important; }
.lws-form .forminator-ui.forminator-custom-form[data-design="material"] .forminator-textarea { min-height: 140px !important; }

/* The animated underline is redundant once the wrapper carries a full border. */
.lws-form .forminator-ui.forminator-custom-form[data-design="material"] .forminator-input--wrap:after,
.lws-form .forminator-ui.forminator-custom-form[data-design="material"] .forminator-textarea--wrap:after {
  display: none !important;
}

/* Stop the float. Every state is listed because material returns the label to
   translateY(0) on .forminator-is_active / .forminator-is_filled, and the
   textarea variant is position:absolute rather than transformed. */
.lws-form .forminator-ui.forminator-custom-form[data-design="material"] .forminator-floating--input,
.lws-form .forminator-ui.forminator-custom-form[data-design="material"] .forminator-floating--textarea,
.lws-form .forminator-ui.forminator-custom-form[data-design="material"] .forminator-is_active .forminator-floating--input,
.lws-form .forminator-ui.forminator-custom-form[data-design="material"] .forminator-is_filled .forminator-floating--input,
.lws-form .forminator-ui.forminator-custom-form[data-design="material"] .forminator-is_active .forminator-floating--textarea,
.lws-form .forminator-ui.forminator-custom-form[data-design="material"] .forminator-is_filled .forminator-floating--textarea {
  position: static !important;
  transform: none !important;
  padding: 0 !important;
  width: auto !important;
  max-height: none !important;
  overflow: visible !important;
  pointer-events: auto !important;
  z-index: auto !important;
  transition: none !important;
}

.lws-form .forminator-ui.forminator-custom-form[data-design="material"] .forminator-label {
  display: block !important;
  font-family: var(--lws-mono) !important;
  font-size: 11px !important;
  letter-spacing: .15em !important;
  text-transform: uppercase !important;
  color: var(--lws-muted) !important;
  font-weight: 500 !important;
  margin: 0 0 9px !important;
}
.lws-form .forminator-ui .forminator-required { color: var(--lws-warn) !important; }

/* Material hides the placeholder to make room for the floating label. With the
   label lifted out, the placeholder is the only in-field hint left. */
.lws-form .forminator-ui.forminator-custom-form[data-design="material"] .forminator-input::placeholder,
.lws-form .forminator-ui.forminator-custom-form[data-design="material"] .forminator-textarea::placeholder {
  opacity: 1 !important;
  color: var(--lws-muted) !important;
}
.lws-form .forminator-ui.forminator-custom-form[data-design="material"] .forminator-floating--textarea ~ .forminator-textarea--wrap .forminator-textarea {
  padding-top: 12px !important;
}

/* The "0 / 180" character counter measured 4.21:1 on --lws-ink-alt. */
.lws-form .forminator-ui .forminator-description { color: var(--lws-muted) !important; }

.lws-form .forminator-ui button[type="submit"],
.lws-form .forminator-ui .forminator-button-submit { min-height: 46px !important; }

@media only screen and (max-width: 48em) {

  /* Micro-labels. 10.5px uppercase mono reads correctly on desktop but sits at
     the edge of comfortable reading on a phone. Desktop is deliberately
     unchanged, so the design intent survives where there is room for it. */
  .lws-card .lws-num, .lws-track-n, .lws-split .lws-sp-n,
  .lws-panel-k, .lws-brief .lws-br-k { font-size: 11.5px; }

  /* Remaining sub-44px touch targets. 3.2.0 covered the card CTAs, the mobile
     nav and the blog more-link; these are the stragglers found in pass 2:
     docs side-nav (24px), panel arrow links (15px), contact email and
     telephone (19px) and the footer legal links (16px, on every page). */
  .lws-br-side ul li a,
  .lws-panel-r span a,
  #main a[href^="tel:"], #main a[href^="mailto:"],
  .absolute-footer a {
    min-height: 44px; display: inline-flex; align-items: center;
    vertical-align: middle;
  }
}

/* ==========================================================================
   3.2.4 — low-tier findings (2026-08-05).

   Also done in this pass with no CSS footprint: 14 sub-headings on
   case-study, domain-names, hosting and catonsville converted from <h4> to
   <h3 class="lws-lbl">, which cleared every remaining h2->h4 jump. The only
   heading jumps left are five h2->h5 from [featured_box], which hardcodes
   <h5> and needs the do_shortcode_tag filter in functions.php.

   Removed here rather than left as dead weight: the .lws-blog block (that
   class is never emitted; body.blog / body.archive rules do the work) and
   .lws-bandrow .lws-b-k (the homepage band it was written for is gone and the
   surviving instance on /baltimore-seo/ carries no kicker).
   ========================================================================== */

/* The converted headings sit inside .lws-inc / .lws-contact, whose h4 rules
   gave them 13.12px mono uppercase in --lws-accent-3. As h3 they were picking
   up Flatsome's 16px Montserrat instead, so this restores the original
   appearance and keeps the change purely semantic.

   Specificity note: Flatsome ships `.dark h1..h6 { color:#fff }` at (0,1,1).
   A bare `.lws-lbl` is (0,1,0) and loses to it, so the colour is restated on
   `h3.lws-lbl` (0,1,1), which ties and wins on source order because this file
   loads after flatsome.css. The original `.lws-inc h4` won the same contest
   the same way. */
.lws-lbl {
  font-family: var(--lws-mono); font-size: .82rem; text-transform: uppercase;
  letter-spacing: .13em; font-weight: 700; margin: 0 0 15px;
}
h3.lws-lbl { color: var(--lws-accent-3); }

@media only screen and (max-width: 48em) {
  /* Flatsome hangs the post date badge off the image corner with
     margin-left:-6.4px, which puts it 6px outside the 15px content gutter that
     everything else on the page respects. */
  body.blog .entry-image-float > .badge,
  body.archive .entry-image-float > .badge { margin-left: 0 !important; }

  /* The hero trust line broke as 356px + 165px, leaving "· Highland, Maryland"
     alone on line two behind a leading separator. Balancing moves the break to
     a natural point (measured 256px + 273px). Progressive: browsers without
     text-wrap support keep the current behaviour. */
  .lws-trust p { text-wrap: balance; }
}

/* --- Card title: accept either heading level -----------------------------
   [featured_box] hardcodes <h5> with no title_tag attribute, which puts an
   h2 -> h5 jump on five pages. The do_shortcode_tag filter in functions.php
   rewrites it to <h3>. Matching BOTH tags here means the two changes are no
   longer a paired edit that has to land in the same moment: the cards stay
   styled whether or not that filter is active, so functions.php can be applied
   or removed at any time without a broken window.

   The h5 selector above still carries the shared properties; this only needs
   to restate what an h3 would otherwise take from Flatsome and from the
   `.dark h1..h6 { color:#fff }` rule at (0,1,1) — hence the tag-qualified
   selector, same reasoning as h3.lws-lbl. -------------------------------- */

.lws-card .icon-box-text h3 {
  order: 1; font-size: 1.06rem !important; text-transform: none !important;
  font-weight: 700; margin: 0 0 9px; letter-spacing: -.005em;
}
.lws-card .icon-box-text h3 { color: var(--lws-head); }

/* --- Hero button alignment on left-aligned hero variants ------------------
   Regression introduced in the 2026-08-05 QA pass. Reformatting the phone
   number to "(443) 772-6592" widened the secondary hero button by 13px, which
   tipped the pair past the 510px column on the --split heroes (store-management
   and managed-wordpress-hosting) and made them wrap. Wrapping was not itself
   the visible defect: once wrapped, the second button kept the 7px side margin
   from the shared .lws-hero .button rule while the first was zeroed by
   .lws-hero--split .button:first-of-type, so the stacked pair sat 7px out of
   alignment at every width from 768px up.

   The lesson repeats one already in this file: a pair whose fit depends on
   arithmetic will drift the next time a label, font or scale changes. Rather
   than re-tune the gap to squeeze them back onto one line — which measured as
   a 4px margin and would break again — give every left-aligned hero variant a
   one-directional margin so a wrapped row stays flush by construction.

   The centred homepage hero is deliberately excluded: it needs symmetric
   margins to centre, and its buttons do not wrap.
   ---------------------------------------------------------------------- */

.lws-hero--split .button,
.lws-hero--brief .button,
.lws-hero--metric .button {
  margin-left: 0 !important;
  margin-right: 14px !important;
}

/* --- 3.2.5: correct the 3.2.3 mobile tap-target rule ----------------------
   That rule set display:inline-flex + min-height:44px on #main tel:/mailto:
   links and footer links. Two faults, both from underestimating its reach:

   1. The hero "Call ..." buttons ARE tel: links, and the ID selector (1,1,0)
      beats every component rule, so on phones the call button lost its
      block/full-width geometry and rendered 4px shorter than its partner.
   2. inline-flex boxes with a 44px floor inside the footer's copyright LINE
      blew the line apart: Terms and Privacy each became their own 44px row.

   Correction, ordered later in the file so it wins at equal specificity:
   buttons get their geometry back untouched (they already exceed 44px), and
   plain text links grow their hit area with padding cancelled by negative
   margins, so the line box stays exactly as designed while the touch target
   reaches 45px. The docs side-nav and panel-arrow selectors from 3.2.3 are
   unaffected; they were correct.
   ---------------------------------------------------------------------- */

@media only screen and (max-width: 48em) {
  #main a.button[href^="tel:"],
  #main a.button[href^="mailto:"] {
    display: block;
    min-height: 0;
  }

  #main a[href^="tel:"]:not(.button),
  #main a[href^="mailto:"]:not(.button),
  .absolute-footer a {
    display: inline-block;
    min-height: 0;
    align-items: normal;
    vertical-align: baseline;
    padding-top: 13px;
    padding-bottom: 13px;
    margin-top: -13px;
    margin-bottom: -13px;
  }
}


/* --- Split-hero button pair: restore the single line -----------------------
   The pair on store-management and managed-wordpress-hosting was inline until
   the phone number was reformatted to "(443) 772-6592", which added 13px to
   the second button and pushed the row past the 510px column. John chose to
   keep the wording and buy the space back from the gap instead.

   10px is the widest gap that still fits, measured rather than calculated:
   229 + 10 + 256 = 495 against a 510px column leaves 10px of real clearance
   at the right edge. Note that the arithmetic ALONE says 14px fits too
   (229+14+256 = 499 <= 510) and it does not — the whitespace between the two
   inline-block tags is part of the line box and eats the difference. That gap
   between arithmetic and reality is what caused the original regression, so
   any future change here must be re-measured in the browser, not recomputed.

   Scoped to --split only. The --brief and --metric heroes carry shorter
   secondary labels, fit comfortably at 14px, and are left alone.
   ---------------------------------------------------------------------- */

.lws-hero--split .button {
  margin-right: 10px !important;
}


/* --- Hero button top margin on --brief and --metric ------------------------
   Longstanding cascade bug, present since 3.1.0 and only spotted now.

     .lws-hero--brief .button  { margin-top: 28px !important }   <- intended
     .lws-hero .button, ...    { margin: 0 7px 12px !important } <- wins

   Both are (0,2,0) and both !important, so the SHORTHAND — which appears
   later in the file — resets margin-top to 0. The 28px never applied once.

   It stayed invisible because the other two hero variants never depended on
   it: the centred hero and --split get their gap from the lede's own
   margin-bottom (34px and 32px). --brief and --metric set the lede to
   margin:0 and leaned entirely on the button rule, so on those the buttons sat
   flush against the last line of the paragraph. Seven pages: the six --brief
   landers plus case-study on --metric.

   Restated here at the end of the file, where source order makes it win
   without escalating specificity further. Values follow each variant's
   existing intent rather than one blanket number: --brief is the compact hero
   and keeps its 28px, --metric matches --split at 32px.

   Desktop is scoped explicitly because the mobile block stacks these buttons
   full width with `margin: 0 0 12px !important`; an unscoped rule here would
   win against that and push the SECOND stacked button down as well.
   ---------------------------------------------------------------------- */

@media only screen and (min-width: 48.0625em) {
  .lws-hero--brief .button  { margin-top: 28px !important; }
  .lws-hero--metric .button { margin-top: 32px !important; }
}

/* --metric was also flush on mobile: the mobile stack zeroes margin-top and,
   unlike --brief, there was no first-button exception to restore it. */
@media only screen and (max-width: 48em) {
  .lws-hero--metric .lws-btn-1 { margin-top: 26px !important; }
}


/* ==========================================================================
   3.2.6 — phone QA pass, plus one desktop alignment fix.

   Seven defects. Five are code that is correct on a desktop and only fails
   once Flatsome's columns stack; the pattern is worth naming, because each
   is either a rule that removed a horizontal separator without supplying
   the vertical one that had to replace it, or a colour set on a container
   that never reached the element that needed it. The other two are a
   near-opaque header (6) and a lone column that never centred (7).
   ========================================================================== */


/* --- 1. Metric pairs printed as one word ----------------------------------

   .lws-metrics is a flex row and each .lws-metric carried margin-right:30px
   plus a 30px-padded divider. The 48em block dropped the divider and both
   spacings, on the assumption the group would stack, but never changed
   display. The items stayed side by side with literally zero separation:
   on the case study page the first metric ended at x=97 and the second began
   at x=97, so the labels ran together as "TO PAGE ONEPRODUCTS RANKING" and
   "NEW CLIENTSFROM LAUNCH".

   Restoring the space as gap rather than margin keeps :last-child clean and
   survives a wrapped third item, which margin-right did not. The hero
   variant is display:block and keeps its own margin-bottom rule, so gap is
   inert there and nothing about that layout changes.
   ---------------------------------------------------------------------- */

@media only screen and (max-width: 48em) {
  .lws-metrics { column-gap: 26px; row-gap: 18px; }
  .lws-metrics .lws-metric { margin-bottom: 0; }
}


/* --- 2. Body copy in dark sections ignored the palette --------------------

   flatsome.css carries `.dark, .dark p, .dark td { color: #f1f1f1 }`. Every
   block here sets its colour on the container and lets it inherit, but a
   declaration applied directly to an element always beats an inherited one
   no matter what the specificity is, so `.dark p` won every time. 97
   paragraphs across 11 pages rendered #f1f1f1 instead of --lws-body.

   The cost is hierarchy, not legibility. Headings are #f4f5f8 and body was
   #f1f1f1, 1.5% apart, so on /about/ an h3 and the paragraph under it read
   as the same weight of voice while the lede above them sits at
   --lws-muted: three greys in one continuous argument. In a service card,
   the <li> items were --lws-body and the <p> above them was not.

   Fixed per container rather than with a blanket `.section.dark p`, which
   would have carried specificity (0,2,1) and quietly beaten .lws-sub p,
   .lws-lede p, .lws-trust p, .lws-contact p and four others that currently
   win on source order alone.

   `inherit` rather than a literal token, so each block keeps whatever its
   container defines and this rule never needs revisiting.

   Not included: .lws-cd-row on the contact page. It has no container colour
   of its own, so it inherits #f1f1f1 either way, and bright is right for a
   phone number.
   ---------------------------------------------------------------------- */

.lws-prose p,
.lws-panel-r p,
.lws-case-meta p,
.lws-card .lws-body p,
.lws-split .lws-sp-d p { color: inherit; }


/* --- 3. Secondary button had no readable edge -----------------------------

   rgba(255,255,255,.23) over --lws-ink measures 2.03:1. WCAG 1.4.11 asks 3:1
   of the visual boundary of a control, so the button shape failed while its
   label passed comfortably at 16:1. The practical result on a phone is a
   line of text with a hint of a box around it sitting under a filled purple
   primary, which reads as a caption rather than the second of two choices.

   .38 measures 3.55:1. The 6% fill is what makes it read as an object; the
   border alone clears the standard but stays recessive.
   ---------------------------------------------------------------------- */

.lws-btn-2.button {
  border: 1px solid rgba(255,255,255,.38) !important;
  background: rgba(255,255,255,.06) !important;
}
.lws-btn-2.button:hover {
  border-color: var(--lws-line-2) !important;
  background: rgba(139,92,246,.14) !important;
}


/* --- 4. Comparison ledger lost its columns on a phone ---------------------

   .lws-lg-h and .lws-lg-r collapse to a single column below 48em. The two
   headings therefore print once, at the top, and then twelve items follow
   in one interleaved list with nothing but text colour to say which side
   each belongs to. Reading it means holding "odd = yours, even = ours" in
   your head for the length of the block.

   Same treatment .lws-cmp already gets on the hosting and SEO pages: each
   row becomes a pair of labelled blocks and the header row stands down.

   :has() guards the header so this is safe to apply before or after the
   data-label attributes are added to the page content — with no labels
   present the ledger keeps its current headings and simply gains the tint.

   Two ledgers use this: store-management (You keep / We take on) and the
   case study (Before / After). The labels come from the markup rather than
   from content: here precisely because those two differ.
   ---------------------------------------------------------------------- */

@media only screen and (max-width: 48em) {
  .lws-ledger:has(.lws-lg-r > div[data-label]) .lws-lg-h { display: none; }

  .lws-ledger .lws-lg-r { padding: 4px 0 12px; }
  .lws-ledger .lws-lg-r > div { padding: 12px 16px 0; }

  .lws-ledger .lws-lg-r > div[data-label]::before {
    content: attr(data-label);
    display: block;
    font-family: var(--lws-mono); font-size: 9.5px; letter-spacing: .14em;
    text-transform: uppercase; color: var(--lws-muted);
    margin-bottom: 3px;
  }

  /* Ours keeps the tint it has on desktop, now as a left-edge marker so it
     is the one block that reads as the answer rather than another entry. */
  .lws-ledger .lws-lg-r > div + div {
    border-top: 0; border-left: 2px solid var(--lws-line-2);
    color: var(--lws-head); background: rgba(139,92,246,.055);
    margin: 8px 16px 0; padding: 10px 13px 12px;
    border-radius: 0 7px 7px 0;
  }
  .lws-ledger .lws-lg-r > div + div[data-label]::before { color: var(--lws-accent-3); }
}


/* --- 5. A 60px hole opened mid-argument -----------------------------------

   .lws-brief is a 4/8 split: kicker, h2 and lede on the left, the body of
   the argument on the right. Stacked, the two become consecutive paragraphs
   of one continuous piece of writing, separated by exactly 60px: the 30px
   margin-bottom the 48em block adds to .lws-br-side, plus Flatsome's own
   30px .col padding-bottom underneath it. Measured on /about/, paragraph
   bottom 881 to next paragraph top 941.

   Dropping the added margin alone only gets to 50px, because .lws-br-side
   has no bottom padding or border and so collapses with its own last
   child's 19.55px margin. Zeroing that last child too leaves Flatsome's
   30px column padding on its own, which is close enough to the 34px an h3
   gets in the same column that the break reads as a paragraph rather than
   a section change.

   :last-child rather than p, because on the pages where .lws-br-side is a
   sticky table of contents the last element is a ul.
   ---------------------------------------------------------------------- */

@media only screen and (max-width: 48em) {
  .lws-brief .lws-br-side { margin-bottom: 0; }
  .lws-brief .lws-br-side > :last-child { margin-bottom: 0; }
}


/* --- 6. Page content ghosted through the stuck header ---------------------

   The header_bg theme mod is set and working: flatsome.js strips
   .transparent the moment the header sticks, which re-enables the emitted
   `.header-bg-color { background-color: rgba(18,20,43,0.95) }`. The problem
   is the 0.95. Five per cent of whatever is scrolling underneath prints
   straight through the bar, so headings and body copy pass visibly behind
   the wordmark all the way up the page.

   Faint enough to look like a rendering artifact rather than a setting,
   which is why it survived three QA passes. It is most obvious where large
   type scrolls under it: the case study h1, the store management trust
   line, the homepage service cards.

   #12142b is the same colour at full opacity, and matches topbar_bg so the
   two bars still read as one band.

   The cleaner fix is the theme mod itself — header_bg to #12142b, no CSS at
   all, per the rule that a Flatsome surface with a Customizer setting
   should be fixed at the mod rather than overridden. That needs the whole
   theme-mods object resent, so this rule is the equivalent that can be
   appended on its own. Drop it if the mod is ever changed.
   ---------------------------------------------------------------------- */

.header:not(.transparent) .header-bg-color { background-color: #12142b; }


/* --- 7. A lone partial column sat flush left instead of centred -----------

   Flatsome's .row is flex with default `justify-content: normal`, so a
   column narrower than its row lands hard left and every leftover pixel
   piles up on the right. Four sections do this: the "What we do" panel on
   /about/ (medium-10 in a 1080px row, 180px of dead space on the right)
   and the FAQ accordion on baltimore-seo, maryland-seo-company and
   maryland-web-design, which share the same medium-10 shape.

   About is the one that reads as broken rather than merely uneven, because
   the section heading above it is medium-12 and therefore centred, and the
   panel's own contents are `text-center` — so a centred heading sits over a
   centred panel that is itself 90px off centre.

   `margin: auto` on the flex item rather than `justify-content` on the row,
   because the same rows also carry the full-width heading column and a
   row-level rule would have to be undone for it.

   No media query: below Flatsome's 850px `medium` breakpoint these columns
   are `small-12` and full width, where auto margins resolve to 0. Verified
   as a no-op at 393px.
   ---------------------------------------------------------------------- */

.lws-partner > .section-content > .row > .col.medium-10,
.lws-faqsec  > .section-content > .row > .col.medium-10 {
  margin-left: auto;
  margin-right: auto;
}