/* ============================================================================
   chrome — site chrome (nav, mobile menu, footer, wizard, sticky mobile CTA)
   + legacy-content prose. Loads on EVERY page, so every rule is scoped.

   Hard-won scoping rules carried over from build-chrome.py (do not "clean up"):
   - :where() keeps container resets at ZERO specificity so they lose to the
     design's own .btn/.wz-* class rules exactly like the original `*` reset
     did; a plain `#lo-chrome *` reset (ID specificity) crushes .btn padding.
   - Bare `nav` selectors are pinned to nav#nav so legacy-page <nav>s are
     untouched; the footer element is classed .lo-foot for the same reason.
   - Divi wrapper resets target .et-l--header/.et-l--footer ONLY, never page
     content. Header-layout heights collapse WITHOUT line-height:0 (it
     inherits into the nav and crushes the CTA button / dropdown items).
   - The responsive block (CHROME_MQ) stays LAST and specificity-bumped:
     same-specificity media rules lose source-order ties even inside a media
     query (the "weird header on posts" bug).
   ========================================================================== */

/* ---------- chrome containers: base type + zero-specificity resets ---------- */
#lo-chrome, #wizard, .mcta, footer.lo-foot { font-family: var(--sans); line-height: 1.65; -webkit-font-smoothing: antialiased; }
:where(#lo-chrome, #wizard, .mcta, footer.lo-foot) * { margin: 0; padding: 0; box-sizing: border-box; }
:where(#lo-chrome, #wizard, .mcta, footer.lo-foot) a { color: inherit; text-decoration: none; }
:where(#lo-chrome, footer.lo-foot) img { display: block; max-width: 100%; }
#wizard .wz-panel { color: var(--ink); }
#lo-chrome .wrap, footer.lo-foot .wrap { max-width: 1220px; margin: 0 auto; padding: 0 40px; }
@media (max-width: 640px) { #lo-chrome .wrap, footer.lo-foot .wrap { padding: 0 22px; } }

/* ---------- Divi wrapper resets — TB areas only, never page content ---------- */
.et-l--header .et_pb_section, .et-l--footer .et_pb_section { padding: 0 !important; margin: 0 !important; background: transparent; }
.et-l--header .et_pb_row, .et-l--footer .et_pb_row { padding: 0 !important; margin: 0 auto !important; width: 100% !important; max-width: 100% !important; }
.et-l--header .et_pb_column, .et-l--footer .et_pb_column { padding: 0 !important; margin: 0 !important; width: 100% !important; float: none !important; }
.et-l--header .et_pb_module, .et-l--footer .et_pb_module { margin: 0 !important; }
.et-l--header .et_pb_code, .et-l--header .et_pb_code_inner, .et-l--footer .et_pb_code, .et-l--footer .et_pb_code_inner { margin: 0 !important; padding: 0 !important; }
.et-l--header, .et-l--header .et_pb_section, .et-l--header .et_pb_row, .et-l--header .et_pb_column { overflow: visible !important; position: static !important; }
/* everything in the header layout is position:fixed, but the section/row stack
   still renders 1px tall — collapse heights ONLY (no line-height:0). */
.et-l--header, .et-l--header .et_pb_section, .et-l--header .et_pb_row, .et-l--header .et_pb_column { height: 0 !important; min-height: 0 !important; }
/* Divi core gives every column min-height:1px — style-only sections on legacy
   pages never fully collapse, leaving 1px slivers above heroes. */
#page-container .et_pb_column { min-height: 0; }
/* Port the design's global `a{color:inherit}` to the TB header/footer wrappers:
   the nav logo link (.brand) and any other un-colored chrome link would otherwise
   fall through to Divi's customizer `a{color:#4a561f}` (olive). EXCLUDE buttons —
   this rule is (0,0,1,1) and would otherwise beat `.btn-copper`/`.btn-solid`/
   `.blz-btn--*` (0,0,1,0), making the nav "Request a Consultation" CTA inherit ink
   instead of its cream button text. Intentionally-colored non-button links
   (.nav-phone, .foot-base a) carry higher specificity and keep their colors. */
.et-l--header a:where(:not(.btn):not(.blz-btn)),
.et-l--footer a:where(:not(.btn):not(.blz-btn)) { color: inherit; text-decoration: none; }
/* Divi/parent heading overrides inside the chrome */
#page-container .wz-panel h3 { font-size: clamp(24px, 3vw, 32px) !important; color: var(--ink) !important; }
#page-container footer.lo-foot h4 { color: var(--cream-2) !important; }
/* scope-bumped: must beat the .lo-foot a{color:inherit} customizer guard
   in the footer block below (same 0,1,1 specificity, earlier in file) */
footer.lo-foot .foot-base a { color: rgba(237, 231, 218, .75); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(237, 231, 218, .3); }
footer.lo-foot .foot-base a:hover { color: var(--gold); }

/* ---------- buttons (chrome + legacy pages share these class names) ---------- */
.btn { font-family: var(--sans); font-size: 14px; font-weight: 600; padding: 16px 30px; border-radius: 100px; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; border: 1px solid transparent; transition: transform .35s cubic-bezier(.22, 1, .36, 1), background .3s, color .3s, box-shadow .3s, border-color .3s; position: relative; overflow: hidden; }
.btn-solid { background: var(--ever); color: var(--cream); box-shadow: 0 12px 32px rgba(66, 80, 47, .3); }
.btn-solid:hover { background: var(--ever-dark); transform: translateY(-2px) scale(1.02); box-shadow: 0 18px 44px rgba(66, 80, 47, .4); }
.btn-copper { background: var(--copper-dark); color: var(--cream-3); box-shadow: 0 12px 32px rgba(118, 126, 72, .32); } /* AA: cream-on-copper was 4.0:1; copper-dark 5.6:1 */
.btn-copper:hover { background: var(--copper-dark); transform: translateY(-2px) scale(1.02); box-shadow: 0 18px 44px rgba(118, 126, 72, .42); }
.btn-ghost { border-color: var(--line); color: var(--ink); background: transparent; }
.btn-ghost:hover { border-color: var(--ink); background: rgba(34, 38, 28, .04); transform: translateY(-2px); }
.btn .arr { transition: transform .3s; }
.btn:hover .arr { transform: translateX(4px); }

/* ---------- NAV ---------- */
nav#nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; transition: background .45s, border-color .45s, box-shadow .45s; border-bottom: 1px solid transparent; }
/* pages without a hero (legacy/interior): nav is solid from the start and content clears it */
body.lo-nohero { padding-top: 78px; }
nav#nav.solid { background: rgba(248, 245, 240, .9); backdrop-filter: blur(14px); border-bottom-color: var(--line); box-shadow: 0 8px 30px rgba(34, 38, 28, .05); }
.nav-in { display: flex; align-items: center; justify-content: space-between; height: 78px; gap: 20px; }
/* aspect-ratio (logo is 449x99) lets the browser reserve the logo's width from
   the fixed height BEFORE the PNG loads — no width/height attrs on the DB markup
   needed, no layout shift. */
.brand img { height: 38px; width: auto; aspect-ratio: 449 / 99; transition: filter .45s; }
nav#nav:not(.solid) .brand img { filter: brightness(0) invert(1); }
.nav-links { display: flex; align-items: center; gap: 30px; }
.nav-links a:not(.btn) { font-size: 13.5px; font-weight: 500; color: var(--ink-soft); position: relative; transition: color .3s; }
nav#nav:not(.solid) .nav-links a:not(.btn) { color: rgba(248, 245, 240, .85); }
.nav-links a:not(.btn)::after { content: ""; position: absolute; left: 0; bottom: -6px; width: 0; height: 2px; border-radius: 2px; background: var(--copper); transition: width .3s; }
.nav-links a:not(.btn):hover::after { width: 100%; }
.nav-phone { font-weight: 700; color: var(--copper-dark) !important; } /* AA: copper text 4.0:1 → copper-dark 5.5:1 */
nav#nav:not(.solid) .nav-phone { color: var(--gold) !important; }
.nav-dd { position: relative; }
.nav-dd > a .caret { font-size: 10px; opacity: .6; }
.dd-menu { position: absolute; top: 100%; left: -16px; padding-top: 16px; min-width: 256px; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .3s, transform .3s, visibility .3s; }
.dd-in, .dd-menu { z-index: 110; }
.dd-menu::before { content: ""; position: absolute; inset: 16px 0 0; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 24px 60px rgba(34, 38, 28, .18); }
.nav-dd:hover .dd-menu, .nav-dd:focus-within .dd-menu { opacity: 1; visibility: visible; transform: none; }
.dd-menu a { position: relative; display: block; padding: 11px 16px; margin: 0 6px; border-radius: 9px; font-size: 13.5px; color: var(--ink-soft) !important; letter-spacing: 0 !important; text-transform: none !important; }
.dd-menu a:first-of-type { margin-top: 22px; }
.dd-menu a:last-of-type { margin-bottom: 6px; }
.dd-menu a::after { display: none !important; }
.dd-menu a:hover { background: var(--copper-soft); color: var(--ink) !important; }
.dd-menu a.dd-sub { padding-left: 34px; font-size: 12.5px; color: var(--mute) !important; }
.dd-menu a.dd-sub::before { content: "\21B3"; position: absolute; left: 18px; color: var(--copper); font-size: 11px; }
.dd-menu a.dd-sub:hover { color: var(--ink) !important; }
@media (max-width: 900px) { .nav-dd { display: none; } }
.nav-links .btn { padding: 11px 22px; font-size: 13px; }
.nav-search { display: flex; align-items: center; }
.ns-btn { background: none; border: none; cursor: pointer; padding: 6px; display: flex; color: var(--ink-soft); transition: color .3s; }
nav#nav:not(.solid) .ns-btn { color: rgba(248, 245, 240, .85); }
.ns-btn:hover { color: var(--copper); }
.ns-btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ns-form { width: 0; overflow: hidden; transition: width .35s cubic-bezier(.22, 1, .36, 1); }
.nav-search.open .ns-form { width: 190px; margin-left: 6px; }
/* theme forces content-box on inputs — pin border-box or the pill clips */
.ns-form input { width: 100%; box-sizing: border-box; font-family: var(--sans); font-size: 13.5px; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 100px; padding: 9px 16px; outline: none; transition: border-color .3s; }
.ns-form input:focus { border-color: var(--ever); }
nav#nav:not(.solid) .ns-form input { background: rgba(248, 245, 240, .14); border-color: rgba(248, 245, 240, .35); color: var(--cream); }
nav#nav:not(.solid) .ns-form input::placeholder { color: rgba(244, 240, 232, .6); }
.ns-btn-m { display: none; }
.ns-bar { display: flex; position: absolute; top: 100%; left: 0; right: 0; background: var(--paper); border-bottom: 1px solid var(--line); padding: 12px 22px; box-shadow: 0 14px 30px rgba(34, 38, 28, .12); gap: 10px; align-items: center; }
.ns-bar[hidden] { display: none; }
.ns-bar input { flex: 1; min-width: 0; box-sizing: border-box; font-family: var(--sans); font-size: 16px; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 100px; padding: 12px 18px; outline: none; }
.ns-bar input:focus { border-color: var(--ever); }
/* WCAG 2.4.7: these inputs set outline:none; restore a visible keyboard ring
   (dark on the light nav; the dark mobile-menu input gets a light ring below). */
.ns-form input:focus-visible, .ns-bar input:focus-visible { outline: 2px solid var(--blz-focus); outline-offset: 2px; }
.ns-bar .ns-go { width: 44px; height: 44px; border-radius: 50%; border: none; background: var(--copper); color: var(--cream-3); font-size: 18px; cursor: pointer; flex: none; }
@media (max-width: 900px) { .ns-btn-m { display: flex; margin-left: auto; margin-right: 10px; } }
.burger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px; }
.burger span { width: 24px; height: 2px; border-radius: 2px; background: var(--ink); transition: .3s; }
nav#nav:not(.solid) .burger span { background: var(--cream); }

/* ---------- GET STARTED WIZARD ---------- */
#wizard { position: fixed; inset: 0; z-index: 200; display: none; }
#wizard.open { display: block; }
.wz-backdrop { position: absolute; inset: 0; background: rgba(24, 27, 19, .62); backdrop-filter: blur(4px); opacity: 0; transition: opacity .35s; }
#wizard.open .wz-backdrop { opacity: 1; }
.wz-panel { position: relative; max-width: 620px; margin: 8vh auto 0; background: var(--paper); border-radius: 24px; padding: 44px 44px 40px; box-shadow: 0 40px 100px rgba(0, 0, 0, .45); transform: translateY(24px); opacity: 0; transition: transform .45s cubic-bezier(.22, 1, .36, 1), opacity .45s; max-height: 84vh; overflow: auto; }
#wizard.open .wz-panel { transform: none; opacity: 1; }
.wz-close { position: absolute; top: 16px; right: 18px; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: #fff; font-size: 19px; line-height: 1; cursor: pointer; color: var(--ink-soft); transition: .3s; font-family: var(--sans); }
.wz-close:hover { background: var(--ink); color: #fff; }
.wz-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--copper-dark); }
.wz-panel h3 { font-family: var(--serif); font-weight: 420; font-size: clamp(24px, 3vw, 32px); margin: 12px 0 22px; letter-spacing: -.015em; }
.wz-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.wz-opts button { font-family: var(--sans); text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; cursor: pointer; font-size: 15px; font-weight: 600; color: var(--ink); transition: border-color .25s, background .25s, transform .3s; }
.wz-opts button span { display: block; font-size: 12.5px; font-weight: 400; color: var(--mute); margin-top: 4px; line-height: 1.45; }
.wz-opts button:hover { border-color: var(--copper); background: var(--copper-soft); transform: translateY(-2px); }
.wz-price { font-family: var(--sans); font-size: 14px; color: var(--ink-soft); background: var(--copper-soft); border: 1px solid rgba(118, 126, 72, .32); border-radius: 10px; padding: 10px 14px; margin-bottom: 18px; }
.wz-price:empty { display: none; }
.wz-paths { display: grid; gap: 12px; }
.wz-path { font-family: var(--sans); display: block; text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; cursor: pointer; transition: border-color .25s, background .25s, transform .3s; width: 100%; }
.wz-path b { font-size: 16px; color: var(--ink); }
.wz-path span { display: block; font-size: 13px; color: var(--mute); margin-top: 5px; line-height: 1.5; }
.wz-path:hover { border-color: var(--copper); background: var(--copper-soft); transform: translateY(-2px); }
#wzBook { border-color: rgba(118, 126, 72, .5); background: linear-gradient(120deg, rgba(118, 126, 72, .13), rgba(118, 126, 72, .04)); }
.wz-back { margin-top: 18px; background: none; border: none; font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--mute); cursor: pointer; }
.wz-back:hover { color: var(--ink); }
body.wizard-open { overflow: hidden; }
/* While the wizard modal is open, hide the fixed nav + sticky mobile CTA. On the
   module build the wizard markup lives in a Divi TB code module (et_pb_code_inner),
   which traps its stacking context — so the fixed nav (z 100) painted OVER the
   panel's close button on mobile despite #wizard being z 200. Hiding them is the
   robust, nesting-proof fix; the modal owns the screen and carries its own ×. */
body.wizard-open nav#nav,
body.wizard-open .mcta { display: none; }
/* Same trap, same fix, for the AI chat widget (z 999999): raising #wizard's
   z-index cannot beat it, because #wizard is stuck inside the Divi code module's
   stacking context. visibility rather than display so the chat stays mounted -
   the conversation and session are untouched and come straight back when the
   wizard closes. */
body.wizard-open #legal-chat-widget-container { visibility: hidden; }
@media (max-width: 560px) { .wz-opts { grid-template-columns: 1fr; } .wz-panel { margin: 4vh 14px 0; padding: 34px 24px; } }

/* ---------- BOOKING ROUTER hint (chrome-shared: wizard + final CTA) ---------- */
.sel-hint { font-size: 12.5px; color: var(--mute); margin-top: 8px; line-height: 1.55; }
.sel-hint a { color: var(--copper-dark); font-weight: 600; }

/* ---------- FOOTER ---------- */
footer.lo-foot { background: var(--ink); color: rgba(237, 231, 218, .75); padding: 64px 0 42px; border-top: 1px solid var(--line-inv); }
/* Divi's customizer paints a{color:#4a561f} (olive) from its per-page unified
   CSS, which loads AFTER this file. The old body-embedded chrome <style> won
   that tie by source order; as a head-loaded file we must win on specificity
   instead — (0,1,1) beats the element rule while still losing to every
   intentionally-colored footer link below (.foot-pay !important, .foot-base a
   later in this file, .foot-grid a:hover). */
.lo-foot a { color: inherit; }
@media (max-width: 900px) {
	/* the sticky mobile CTA covers the last lines otherwise */
	footer.lo-foot { padding-bottom: 120px; }
}
.foot-grid { display: grid; grid-template-columns: 1.3fr 1fr .8fr 1fr; gap: 44px; }
@media (max-width: 900px) {
	.foot-grid { grid-template-columns: 1fr 1fr; }
}
.foot-logo { height: 34px; width: auto; aspect-ratio: 449 / 99; filter: brightness(0) invert(1); }
.foot-grid p, .foot-grid li { font-size: 13.5px; line-height: 1.9; }
/* Divi parent ul padding beats the :where() zero-specificity reset — pin it */
.foot-grid ul { list-style: none; margin: 14px 0 0; padding: 0; }
.foot-grid ul li { padding: 0; margin: 0 0 4px; }
.foot-grid h4 { font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--cream-2); }
.foot-grid a:hover { color: var(--gold); }
.foot-pay { color: var(--gold) !important; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; border-bottom: 1px solid rgba(178, 167, 104, .45); padding-bottom: 2px; transition: border-color .3s; }
.foot-pay:hover { border-color: var(--gold); }
.foot-pay svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.foot-base { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; border-top: 1px solid var(--line-inv); margin-top: 50px; padding-top: 26px; font-size: 12px; color: rgba(237, 231, 218, .55); }

/* ---------- STICKY MOBILE CTA ---------- */
.mcta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: none; gap: 1px; background: var(--line); box-shadow: 0 -10px 30px rgba(34, 38, 28, .18); transform: translateY(110%); transition: transform .45s cubic-bezier(.22, 1, .36, 1); }
.mcta.show { transform: none; }
.mcta a { flex: 1; text-align: center; padding: 16px 10px; font-size: 14px; font-weight: 700; background: var(--ever); color: var(--cream); }
.mcta a.call { background: #fff; color: var(--ink); }

/* ---------- STICKY CTA vs. AI CHAT WIDGET ---------- */
/* The Legal Chat AI trigger is position:fixed at z-index 999999, so it paints over
   .mcta (z 90) and covers the Call / Schedule buttons. The bar is not always up —
   chrome.js only adds .show past 500px of scroll — so a permanent gap under the
   trigger would leave it floating in dead space at the top of the page. Instead we
   drive the plugin's own --legal-chat-offset-bottom reactively, and the trigger
   (and its panel) ride up and down in sympathy with the bar. */
@media (max-width: 900px) {
	/* Always an icon-only bubble on mobile - the full "Chat with our AI Assistant"
	   pill is ~225px wide and competes with the Call / Consultation CTAs. The live
	   offset is published by syncChatOffset() in chrome.js; the value here is only a
	   floor for first paint and for engines that never run the script. */
	:root { --legal-chat-offset-bottom: 15px; }

	.legal-chat-trigger-text { display: none !important; }

	.legal-chat-trigger {
		min-width: 52px;
		width: 52px;
		height: 52px;
		padding: 0;
		border-radius: 50%;
	}

	/* With the panel open the bar is unreachable behind it and only adds noise -
	   retract it, the same way the wizard hides it. aria-expanded is the plugin's
	   own state hook, so this does not depend on its inline styles. */
	body:has(.legal-chat-trigger[aria-expanded="true"]) .mcta { transform: translateY(110%); }
}

/* ---------- MOBILE MENU ---------- */
#mobile-menu { position: fixed; inset: 0; z-index: 99; background: var(--ink); display: none; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 22px; opacity: 0; transition: opacity .4s; padding: 106px 32px 40px; overflow-y: auto; }
#mobile-menu.open { display: flex; opacity: 1; align-items: flex-start; justify-content: flex-start; padding: 106px 32px 40px; }
#mobile-menu a:not(.btn) { font-family: var(--serif); font-size: 22px; color: var(--cream-2); }
#mobile-menu .mm-panel a:not(.btn) { font-size: 22px; }
#mobile-menu .mm-panel { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; width: 100%; animation: mmIn .28s cubic-bezier(.22, 1, .36, 1); }
#mobile-menu .mm-panel[hidden] { display: none; }
@keyframes mmIn { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
.mm-drill { background: none; border: none; cursor: pointer; padding: 0; margin: 0; font-family: var(--serif); font-size: 22px; font-weight: 400; line-height: inherit; letter-spacing: normal; color: var(--cream-2); display: inline-flex; align-items: center; gap: 10px; }
.mm-drill .mm-ch { color: var(--gold); font-size: 20px; line-height: 1; }
.mm-back { background: none; border: none; cursor: pointer; font-family: var(--sans); font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-bottom: 4px; }
#mobile-menu .mm-panel a.mm-sub { font-size: 16px; color: rgba(237, 231, 218, .75); padding-left: 26px; position: relative; }
#mobile-menu .mm-panel a.mm-sub::before { content: "\21B3"; position: absolute; left: 4px; color: var(--gold); font-size: 13px; }
.mm-search { width: min(320px, 80vw); }
.mm-search input { width: 100%; box-sizing: border-box; font-family: var(--sans); font-size: 15px; color: var(--cream-2); background: rgba(248, 245, 240, .1); border: 1px solid rgba(248, 245, 240, .3); border-radius: 100px; padding: 13px 22px; outline: none; }
.mm-search input::placeholder { color: rgba(237, 231, 218, .55); }
.mm-search input:focus { border-color: var(--gold); }
.mm-search input:focus-visible { outline: 2px solid var(--cream-2); outline-offset: 2px; } /* light ring on the dark mobile menu */
body.menu-open nav#nav { background: var(--ink); border-bottom-color: transparent; box-shadow: none; }
body.menu-open .brand img { filter: brightness(0) invert(1) !important; }
body.menu-open .burger span { background: var(--cream-2) !important; }
.burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- legacy CONTENT (posts, archives, sidebar pages) ----------
   Redesigned pages never render entry-title/main_title; this only touches
   Divi-default headers + prose. Restores what the old Anthem sheet used to
   override in the customizer css (purple button text, olive links). */
#left-area h1.entry-title, #main-content h1.main_title { font-family: var(--serif); font-weight: 380; font-size: clamp(30px, 4vw, 46px); line-height: 1.12; letter-spacing: -.02em; color: var(--ink); }
#left-area h1.entry-title .wtr-time-wrap.after-title { display: block; font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--copper); margin-top: 12px; }
#left-area p.post-meta { font-family: var(--sans); font-size: 13px; color: var(--mute); }
#left-area p.post-meta a { color: var(--copper-dark); font-weight: 600; } /* AA contrast */
#left-area .entry-content, #left-area .et_pb_text { font-family: var(--sans); font-size: 15.5px; line-height: 1.8; color: var(--ink-soft); }
#left-area .entry-content h2 { font-family: var(--serif); font-weight: 420; font-size: clamp(24px, 2.8vw, 32px); line-height: 1.2; letter-spacing: -.01em; color: var(--ink); padding-bottom: 10px; }
#left-area .entry-content h3 { font-family: var(--sans); font-weight: 700; font-size: 19px; color: var(--ink); padding-bottom: 8px; }
#left-area .entry-content h4 { font-family: var(--sans); font-weight: 700; font-size: 16px; color: var(--ink); padding-bottom: 6px; }
#left-area .entry-content a { color: var(--copper-dark); font-weight: 600; }
#left-area .entry-content a:hover { color: var(--ever); }
/* some posts carry module-generated `ul li{line-height:0.75em}` — lines overlap */
#left-area .entry-content li { line-height: 1.65; }
/* Divi "dark" background modules (e.g. the blue Quick Links box): white text + links */
#left-area .et_pb_bg_layout_dark, #left-area .et_pb_bg_layout_dark h1, #left-area .et_pb_bg_layout_dark h2, #left-area .et_pb_bg_layout_dark h3, #left-area .et_pb_bg_layout_dark h4 { color: #fff; }
#left-area .et_pb_bg_layout_dark a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
/* customizer paints button TEXT purple on the olive button background */
#left-area .et_pb_button, #left-area .comment-reply-link, #left-area .form-submit .et_pb_button { color: #fff; }

/* ---------- CHROME_MQ: keep LAST + specificity-bumped (source-order rule) ---------- */
@media (max-width: 900px) {
	#lo-chrome .nav-links { display: none; }
	#lo-chrome .burger { display: flex; }
	#page-container .mcta { display: flex; }
}
@media (max-width: 640px) {
	footer.lo-foot .foot-grid { grid-template-columns: 1fr; gap: 34px; }
}

/* ============================================================================
   Accessibility (WCAG 2.1 AA) — skip link + reduced motion for the chrome.
   Behaviors (skip target, dialog focus, menu aria) live in chrome.js.
   ========================================================================== */
.lo-skip { position: fixed; left: 12px; top: -80px; z-index: 100001; background: var(--paper); color: var(--ink); padding: 10px 18px; border-radius: 10px; font: 600 14px/1 var(--sans); box-shadow: 0 10px 30px rgba(34, 38, 28, .22); transition: top .2s ease; }
.lo-skip:focus { top: 12px; outline: 2px solid var(--ever); outline-offset: 2px; }
#main-content:focus { outline: none; } /* programmatic focus target — no ring */

@media (prefers-reduced-motion: reduce) {
	.lo-skip { transition: none; }
	#lo-chrome *, #wizard *, .mcta, footer.lo-foot * {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
}

/* Accessibility statement (plain page 205124) — constrain to a readable measure */
body.page-id-205124 #left-area { max-width: 760px; margin-left: auto; margin-right: auto; float: none; }

/* ---------- iOS: STOP AUTO-ZOOM ON FORM FOCUS ---------- */
/* Safari on iOS zooms the whole page when a focused form control has a
   font-size below 16px, and does NOT zoom back out on blur — the page is left
   wider than the viewport with horizontal scrolling until the user manually
   pinches back. 16px is the exact threshold that prevents it.
   The viewport meta is not a fix: Safari has ignored `maximum-scale` and
   `user-scalable=no` since iOS 10 for accessibility reasons, so those neither
   prevent the zoom nor restore the scale.
   This is deliberately broad — it has to cover Gravity Forms fields, which are
   the visible ones on most pages and sit outside the theme's own namespace. */
@media (max-width: 900px) {
	input[type="text"],
	input[type="email"],
	input[type="tel"],
	input[type="url"],
	input[type="search"],
	input[type="password"],
	input[type="number"],
	input[type="date"],
	textarea,
	select {
		font-size: 16px;
	}
}

/* Gravity Forms fields need an explicit override: both formsmain.min.css and the
   theme's own `.blz-form-card .gform_wrapper input[...]` rules in style.css set
   14–14.5px at higher specificity than the element selectors above, so those lose.
   !important is deliberate here and tightly scoped — mobile widths only, form
   controls only. Below 16px iOS zooms the page on focus and never zooms back. */
@media (max-width: 900px) {
	.gform_wrapper input[type="text"],
	.gform_wrapper input[type="email"],
	.gform_wrapper input[type="tel"],
	.gform_wrapper input[type="url"],
	.gform_wrapper input[type="search"],
	.gform_wrapper input[type="password"],
	.gform_wrapper input[type="number"],
	.gform_wrapper input[type="date"],
	.gform_wrapper textarea,
	.gform_wrapper select {
		font-size: 16px !important;
	}
}

/* ---------- MOBILE: reclaim the bottom-right corner ---------- */
/* On a phone the sticky CTA bar, the chat bubble and Divi's scroll-to-top all
   pile into the same corner. The arrow is the least valuable of the three -
   the page is already short enough to flick back up - so it goes on mobile
   only; desktop keeps it. Scoped under #page-container to beat Divi's own
   rule without !important on the element itself. */
@media (max-width: 900px) {
	#page-container .et_pb_scroll_top,
	.et_pb_scroll_top { display: none !important; }

	/* With the arrow gone the bubble can sit tighter into the corner.
	   html:root (0,1,1) deliberately outranks the plugin's :root (0,1,0)
	   default, so this wins without depending on stylesheet order. */
	html:root { --legal-chat-offset-right: 10px; }
}

/* The mobile menu already offers Book Online, Contact and the phone number, so
   the "Request a Consultation" CTA is redundant there. It was also broken: it
   carries data-wizard, and #wizard is trapped inside the Divi code module's
   stacking context, so the modal opened BEHIND the menu (z 99) and the button
   read as dead. This is the only data-wizard trigger inside the menu, so hiding
   it removes the problem rather than masking it. display:none also drops it from
   the tab order and the accessibility tree. Nav and hero CTAs are unaffected. */
#mobile-menu a.btn[data-wizard] { display: none; }