/* loganthompson — client-specific overrides.
* Hand-authored. NOT generated by wp-build-page.py and NOT overwritten by it.
* Linked AFTER static-overrides.css so it wins the cascade. Survives every
* mass-convert rebuild. Home for bespoke per-site CSS that must not be shared
* across all Elementor conversions.
*/
/* Operator request (2026-06-25, home-page gate):
* The sticky header's nav-menu strip is transparent. On scroll, page content
* (e.g. "COMPREHENSIVE LEGAL REPRESENTATION", "Our Practice Areas") bled
* through behind the menu links and made them unreadable. Give the pinned
* header a solid black background once the page is scrolled. At the very top
* it stays transparent over the dark hero (unchanged). The `ym-header-stuck`
* class is toggled by elementor-static-overrides.js at scrollY > 60px.
*/
header.elementor-location-header {
transition: background-color 0.25s ease;
}
header.elementor-location-header.ym-header-stuck {
background-color: #000 !important;
}
/* Operator request (2026-06-26): "Firm & Attorney Awards" badges must match
* the live site. The shared L66 image-carousel rule forces every slide image
* to a 240x240 square with object-fit:cover — correct for chattanoogaexteriors'
* uniform color-swatch palette, but it crops/distorts award badges of varying
* shapes (ribbons, shields, hexagons). Scope an override to just this carousel
* (elementor-element-26b575e) so the 6 badges render un-cropped at their natural
* aspect ratio, in a single centered row, with thin chevron arrows like live. */
/* 2026-07-14: operator wants the live-site slider only (secondary captioned grid
* removed). First-party infinite-loop carousel driven by awards-carousel.js:
* single row, 6 badges per view (3 tablet / 2 mobile), clickable chevrons + 5s
* autoplay, seamless loop — matches the live Elementor image-carousel behaviour. */
.elementor-element-26b575e .elementor-image-carousel-wrapper.swiper,
.elementor-element-26b575e .swiper {
position: relative;
overflow: hidden !important; /* beats Elementor swiper base + static scroll-snap companion */
overflow-x: hidden !important;
padding: 0 36px; /* room for the edge chevrons */
}
.elementor-element-26b575e .swiper-wrapper {
--pv: 6;
--awgap: 26px;
display: flex !important;
flex-wrap: nowrap !important;
align-items: center;
justify-content: flex-start !important;
gap: var(--awgap);
overflow: visible !important;
transform: translateX(0);
transition: transform 500ms ease;
will-change: transform;
}
.elementor-element-26b575e .swiper-slide {
flex: 0 0 calc((100% - (var(--pv) - 1) * var(--awgap)) / var(--pv)) !important;
width: auto !important;
display: flex;
align-items: center;
justify-content: center;
}
.elementor-element-26b575e .swiper-slide .swiper-slide-inner,
.elementor-element-26b575e .swiper-slide figure { margin: 0; width: 100%; }
.elementor-element-26b575e .swiper-slide img {
width: 100% !important;
height: 150px !important;
max-width: 100% !important;
object-fit: contain !important;
}
@media (max-width: 1024px) { .elementor-element-26b575e .swiper-wrapper { --pv: 3; } }
@media (max-width: 640px) { .elementor-element-26b575e .swiper-wrapper { --pv: 2; } }
/* thin light chevrons at the row edges, no dark circle — match live */
.elementor-element-26b575e .elementor-swiper-button,
.elementor-element-26b575e .swiper-button-prev,
.elementor-element-26b575e .swiper-button-next {
position: absolute; top: 50%; transform: translateY(-50%);
z-index: 5; cursor: pointer;
display: flex; align-items: center; justify-content: center;
width: 30px; height: 56px; margin: 0;
background: transparent !important; border: 0; border-radius: 0 !important;
color: rgba(255, 255, 255, 0.78);
}
.elementor-element-26b575e .elementor-swiper-button:hover,
.elementor-element-26b575e .swiper-button-prev:hover,
.elementor-element-26b575e .swiper-button-next:hover { color: #fff; }
.elementor-element-26b575e .elementor-swiper-button svg { width: 26px; height: 26px; fill: currentColor; }
.elementor-element-26b575e .elementor-swiper-button-prev,
.elementor-element-26b575e .swiper-button-prev { left: 0; right: auto; }
.elementor-element-26b575e .elementor-swiper-button-next,
.elementor-element-26b575e .swiper-button-next { right: 0; left: auto; }
/* NOTE (2026-07-31): the awards widget was replaced with the copied chattanoogaexteriors
.ym-slider (assets/ym-widgets.{css,js}); the old .elementor-element-26b575e image-carousel
rules above are now dead (element removed) but left in place harmlessly. Dots + lightbox
styles now live in assets/ym-widgets.css. */
/* === ym live-sync 2026-06-30: legal team + attorney links === */
/* Match the live design: BLACK section panel, white portrait cards, white serif
heading, serif names, maroon UPPERCASE roles, 4-up row (wraps responsively).
Per-element Elementor CSS for this section isn't shipped, so set it explicitly
with !important so it can't be overridden by the global color kit. */
.ym-legal-team.e-con{display:flex !important;flex-direction:column;align-items:center;
justify-content:center;gap:34px;padding:56px 4%;text-align:center;
background:#000 !important;}
.ym-legal-team > .e-con{display:flex !important;flex-direction:row;flex-wrap:wrap;
justify-content:center;align-items:flex-start;gap:24px;width:100%;max-width:1240px;
background:transparent !important;}
.ym-legal-team > .e-con > .e-con{display:flex !important;flex-direction:column;align-items:center;
flex:0 0 190px;max-width:200px;background:#fff !important;
padding:12px 12px 18px !important;}
.ym-legal-team > .e-con > .e-con .elementor-widget-image,
.ym-legal-team > .e-con > .e-con .elementor-widget-container{background:transparent !important;}
.ym-legal-team img{width:100%;height:auto;display:block;}
/* section title (white on black) */
.ym-legal-team > .elementor-widget-heading .elementor-heading-title{
color:#fff !important;font-size:2.3rem;margin-bottom:4px;}
/* card name (serif, near-black) */
.ym-legal-team > .e-con > .e-con .elementor-heading-title{
color:#1a1a1a !important;font-size:1.15rem;line-height:1.15;margin-top:12px;
font-weight:400;text-transform:none !important;}
/* role (maroon, bold, uppercase) */
.ym-legal-team > .e-con > .e-con .elementor-widget-heading + .elementor-widget-heading .elementor-heading-title{
color:#810A17 !important;font-weight:700 !important;font-size:.72rem;
font-family:Montserrat,sans-serif;text-transform:uppercase !important;
letter-spacing:.3px;margin-top:8px;line-height:1.3;}
/* attorney-link block (sits in maroon hero left column -> white text) */
.ym-attorney-links{margin:18px 0 0;text-align:left;background:transparent !important;}
.ym-attorney-links .elementor-heading-title{color:#fff !important;font-size:.95rem;
font-weight:700;text-transform:uppercase;letter-spacing:.4px;margin-bottom:8px;
font-family:Montserrat,sans-serif;}
.ym-attorney-links p{margin:.2rem 0;color:#fff;}
.ym-attorney-links a{color:#fff !important;text-decoration:none;}
.ym-attorney-links a:hover{text-decoration:underline;}
@media(max-width:680px){.ym-legal-team > .e-con > .e-con{flex:0 0 150px;max-width:160px;}}
/* 2026-07-14: Videos hero — swap the cutout banner (group26, contain) for the new
* team porch photo, fill-and-crop. Scoped to the Videos hero panel (6450e3b only;
* absent on every other page) so it stays Videos-only. */
.elementor-element-6450e3b {
background-image: url("/assets/images/group49.webp") !important;
/* 2026-07-16 (operator): "show whole photo" — contain the full team porch shot
* so no back-row head is ever clipped at any viewport width. The image column
* is the wider one (~59%), so at desktop it fits nearly edge-to-edge; any spare
* space fills black and blends with the photo's dark surround. */
background-size: contain !important;
background-position: center !important;
background-color: #000 !important;
background-repeat: no-repeat !important;
}
/* 2026-07-15: videos migrated to Vimeo (operator hosts strictly on Vimeo). */
/* Home hero background: Vimeo background embed (background=1 covers the iframe). */
.elementor-element-49c62fe .elementor-background-video-container {
position: absolute; inset: 0; overflow: hidden;
}
.elementor-element-49c62fe .ym-bg-vimeo {
/* True cover: the hero band is far wider than 16:9, so a container-sized iframe
* pillarboxes. Size the iframe so its centered 16:9 player always covers the band
* in both axes (CSS-Tricks background-video technique; hero is full-bleed width). */
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
width: 100%;
height: 56.25vw; /* 16:9 of the full-bleed hero width */
min-height: 100%; /* never shorter than the hero band */
min-width: 177.78vh; /* never narrower than a 16:9 player needs at this height */
border: 0; pointer-events: none;
}
/* Inline watchable videos (Attorneys / Practice Areas / Family Law) — 16:9.
* Live-style "facade": a muted, controls-less Vimeo BACKGROUND preview fills the
* section (replaces the old GIF loop — the source GIFs were 23–39 MB); a circular
* play button overlays it; clicking swaps in the full player (sound + controls only
* on hover). No player controls are visible until the user clicks. Driven by
* video-facades.js. */
.ym-vimeo { position: relative; width: 100%; }
.ym-vimeo iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ym-vimeo-16x9 { width: 100%; max-width: 860px; margin: 0 auto; aspect-ratio: 16 / 9; }
@supports not (aspect-ratio: 1) { .ym-vimeo-16x9 { height: 0; padding-top: 56.25%; } }
.ym-vfacade { position: relative; overflow: hidden; cursor: pointer; background: #000; aspect-ratio: 16 / 9; }
@supports not (aspect-ratio: 1) { .ym-vfacade { height: 0; padding-top: 56.25%; } }
/* 2-column hero videos fill their whole column (drop the 860px cap) */
.ym-vfacade--fill { width: 100%; max-width: none; margin: 0; }
.ym-vfacade__preview,
.ym-vfacade__player { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ym-vfacade__preview { pointer-events: none; }
/* circular play button (matches live) */
.ym-vfacade__play {
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
width: 46px; height: 46px; border-radius: 50%; pointer-events: none;
display: flex; align-items: center; justify-content: center;
background: rgba(0, 0, 0, .34); border: 2px solid rgba(255, 255, 255, .92);
transition: background .2s ease, transform .2s ease;
}
.ym-vfacade:hover .ym-vfacade__play,
.ym-vfacade:focus-visible .ym-vfacade__play {
background: rgba(129, 10, 23, .9); transform: translate(-50%, -50%) scale(1.06);
}
.ym-vfacade__play svg { width: 20px; height: 20px; fill: #fff; margin-left: 2px; }
.ym-vfacade:focus-visible { outline: 3px solid #810A17; outline-offset: 2px; }
/* playing state: drop the play button; the full player takes over */
.ym-vfacade--playing { cursor: default; }
.ym-vfacade--playing .ym-vfacade__play { display: none; }
/* ============================================================================
* 2026-07-16 — HERO OVERHAUL (operator round-2 picks; see hero-options mockup)
* 1. Practice-area heroes -> full-bleed banner on BLACK, whole banner always
* shown (aspect-ratio box, no vertical crop) with text over a black fade.
* 2. Attorney bio heroes -> framed portrait on brand-red (#810B17) band.
* 3. Videos hero -> show whole photo (edited inline above).
* ==========================================================================*/
/* ---- 1. PRACTICE-AREA HERO: full-bleed on black (6 pages) ---------------- */
.elementor-element-c8e121b,
.elementor-element-a020e80,
.elementor-element-06bfb25,
.elementor-element-88600e9,
.elementor-element-9c00914 {
position: relative !important;
background-color: #000 !important;
display: block !important; /* image defines height; text is overlaid */
}
/* image = in-flow aspect-ratio box (banner is 1248x528 = 42.31%); cover on a
matching-aspect box shows the WHOLE banner at every width -> heads AND the
baked-in names are always in frame, no vertical crop. */
.elementor-element-59f1a4b,
.elementor-element-0a9e54f,
.elementor-element-1092fca,
.elementor-element-d238aa9,
.elementor-element-29ab6ec {
position: relative !important;
/* 2026-07-16 (operator, 3rd pass): the FACES + NAMES are the focal point, not the
* logo. Show the whole banner at full width (contain) so faces stay large, and make
* the box a touch taller than the banner's 42.31% aspect so there's clear breathing
* room ABOVE the heads and below the names — nothing cropped at any width. Any spare
* space is the banner's own blurry black vignette + a thin black margin. */
width: 100% !important; height: 0 !important; padding-top: 48% !important;
min-height: 0 !important; margin: 0 !important;
background-size: contain !important;
background-position: center !important;
background-color: #000 !important;
background-repeat: no-repeat !important;
}
.elementor-element-59f1a4b::before,
.elementor-element-0a9e54f::before,
.elementor-element-1092fca::before,
.elementor-element-d238aa9::before,
.elementor-element-29ab6ec::before { display: none !important; }
/* text panel overlaid on the left over a black fade */
.elementor-element-842e4ab,
.elementor-element-b821e73,
.elementor-element-6a3bcbc,
.elementor-element-1602c8f,
.elementor-element-a90f873 {
position: absolute !important; top: 0 !important; left: 0 !important;
height: 100% !important; width: 58% !important; z-index: 2 !important;
display: flex !important; flex-direction: column !important; justify-content: center !important;
background: linear-gradient(90deg,#000 40%,rgba(0,0,0,.80) 66%,rgba(0,0,0,0) 100%) !important;
}
/* below 900px: stack text (solid black) above the full-width banner */
@media (max-width: 900px) {
.elementor-element-842e4ab,
.elementor-element-b821e73,
.elementor-element-6a3bcbc,
.elementor-element-1602c8f,
.elementor-element-a90f873 {
position: static !important; width: 100% !important; max-width: 100% !important;
height: auto !important;
background: #000 !important; padding: 30px 22px !important;
box-sizing: border-box !important; overflow: hidden !important;
}
/* keep every inner container/widget within the viewport (no side clipping) */
.elementor-element-842e4ab > .e-con-inner, .elementor-element-b821e73 > .e-con-inner,
.elementor-element-6a3bcbc > .e-con-inner, .elementor-element-1602c8f > .e-con-inner,
.elementor-element-a90f873 > .e-con-inner,
.elementor-element-842e4ab .elementor-element, .elementor-element-b821e73 .elementor-element,
.elementor-element-6a3bcbc .elementor-element, .elementor-element-1602c8f .elementor-element,
.elementor-element-a90f873 .elementor-element {
width: 100% !important; max-width: 100% !important; box-sizing: border-box !important;
}
}
/* ---- 2. ATTORNEY BIO HERO: framed portrait on #810B17 band (10 pages) ---- */
.elementor-element-e2fa212,
.elementor-element-adf96b2,
.elementor-element-a52b00b,
.elementor-element-40b4ea1,
.elementor-element-4377ff2,
.elementor-element-15296f4,
.elementor-element-2998d51,
.elementor-element-4426d73,
.elementor-element-659b8c2 {
background-color: #241611 !important; /* 2026-07-17: brown, matches all heroes */
align-self: stretch !important;
display: flex !important; flex-direction: column !important;
align-items: center !important; justify-content: flex-end !important;
overflow: hidden !important;
padding: clamp(78px,8.5vw,116px) 0 0 0 !important;
box-sizing: border-box !important;
}
.elementor-element-e2fa212 .elementor-widget-image,
.elementor-element-adf96b2 .elementor-widget-image,
.elementor-element-a52b00b .elementor-widget-image,
.elementor-element-40b4ea1 .elementor-widget-image,
.elementor-element-4377ff2 .elementor-widget-image,
.elementor-element-15296f4 .elementor-widget-image,
.elementor-element-2998d51 .elementor-widget-image,
.elementor-element-4426d73 .elementor-widget-image,
.elementor-element-659b8c2 .elementor-widget-image,
.elementor-element-e2fa212 .elementor-widget-container,
.elementor-element-adf96b2 .elementor-widget-container,
.elementor-element-a52b00b .elementor-widget-container,
.elementor-element-40b4ea1 .elementor-widget-container,
.elementor-element-4377ff2 .elementor-widget-container,
.elementor-element-15296f4 .elementor-widget-container,
.elementor-element-2998d51 .elementor-widget-container,
.elementor-element-4426d73 .elementor-widget-container,
.elementor-element-659b8c2 .elementor-widget-container,
.elementor-element-e2fa212 figure,
.elementor-element-adf96b2 figure,
.elementor-element-a52b00b figure,
.elementor-element-40b4ea1 figure,
.elementor-element-4377ff2 figure,
.elementor-element-15296f4 figure,
.elementor-element-2998d51 figure,
.elementor-element-4426d73 figure,
.elementor-element-659b8c2 figure,
.elementor-element-e2fa212 a,
.elementor-element-adf96b2 a,
.elementor-element-a52b00b a,
.elementor-element-40b4ea1 a,
.elementor-element-4377ff2 a,
.elementor-element-15296f4 a,
.elementor-element-2998d51 a,
.elementor-element-4426d73 a,
.elementor-element-659b8c2 a,
.elementor-element-e2fa212 picture,
.elementor-element-adf96b2 picture,
.elementor-element-a52b00b picture,
.elementor-element-40b4ea1 picture,
.elementor-element-4377ff2 picture,
.elementor-element-15296f4 picture,
.elementor-element-2998d51 picture,
.elementor-element-4426d73 picture,
.elementor-element-659b8c2 picture {
height: 100% !important; width: 100% !important; margin: 0 !important;
display: flex !important; align-items: flex-end !important; justify-content: center !important;
}
.elementor-element-e2fa212 img,
.elementor-element-adf96b2 img,
.elementor-element-a52b00b img,
.elementor-element-40b4ea1 img,
.elementor-element-4377ff2 img,
.elementor-element-15296f4 img,
.elementor-element-2998d51 img,
.elementor-element-4426d73 img,
.elementor-element-659b8c2 img {
height: 100% !important; width: auto !important; max-width: 100% !important;
object-fit: contain !important; object-position: center bottom !important;
margin: 0 !important; display: block !important;
}
@media (max-width: 767px) {
.elementor-element-e2fa212,
.elementor-element-adf96b2,
.elementor-element-a52b00b,
.elementor-element-40b4ea1,
.elementor-element-4377ff2,
.elementor-element-15296f4,
.elementor-element-2998d51,
.elementor-element-4426d73,
.elementor-element-659b8c2 { padding-top: 24px !important; min-height: 360px !important; }
}
/* ============================================================================
* 2026-07-17 — PRACTICE-AREA LINE-UP HERO (operator-approved, replaces the
* banner hero on the 6 practice-area pages). First-party block .ympa-hero
* injected by shared/scripts/build-pa-hero.py — NOT Elementor markup.
* Framed-window crop, espresso band (#241611), black grounding (no red),
* Montserrat name pills. Attorneys per area come from the page's own
* "Visit Our Attorney Pages" list. Per-figure --fz normalises face size so
* different source crops read at a matching scale (see build script map).
* ==========================================================================*/
.ympa-hero{
position:relative;display:grid;grid-template-columns:minmax(0,41%) minmax(0,59%);
background:var(--band,#241611);min-height:588px;overflow:hidden;
}
.ympa-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;background:#E5BE9D;z-index:8;}
/* the site header (logo row) overlaps the top ~140px of the band; clear it */
.ympa-hero__text{
padding:clamp(120px,11vw,144px) clamp(26px,3vw,50px) clamp(40px,4vw,56px);
display:flex;flex-direction:column;justify-content:center;z-index:3;
}
.ympa-hero__eyebrow{
font-family:"Montserrat",sans-serif;font-size:12px;letter-spacing:.22em;text-transform:uppercase;
color:#E5BE9D;font-weight:600;margin:0 0 16px;
}
.ympa-hero__title{
font-family:"Libre Baskerville",Georgia,serif;font-weight:700;color:#fff;
font-size:clamp(30px,4vw,46px);line-height:1.08;margin:0 0 12px;
}
.ympa-hero__sub{
font-family:"Libre Baskerville",Georgia,serif;font-weight:700;color:#E5BE9D;
font-size:clamp(17px,1.9vw,22px);line-height:1.18;margin:0 0 18px;
}
.ympa-hero__desc{
font-family:"Montserrat",sans-serif;color:rgba(255,255,255,.82);
font-size:clamp(15px,1.35vw,16.5px);line-height:1.55;margin:0 0 26px;max-width:46ch;
}
/* match the site's standard hero button (Videos): white, black text, square.
!important beats the theme's `.elementor a` link color. */
.ympa-hero__btn{
align-self:flex-start;font-family:"Montserrat",sans-serif;font-weight:500;font-size:16px;
letter-spacing:.5px;text-transform:uppercase;background:#fff !important;color:#000 !important;
padding:12px 25px;border-radius:0;text-decoration:none;transition:background .16s,color .16s;
}
.ympa-hero__btn:hover{background:#E5BE9D !important;color:#000 !important;}
.ympa-hero__stage{
position:relative;display:flex;align-items:flex-end;justify-content:center;
gap:clamp(8px,1.4vw,32px);
/* symmetric side padding so the figure group sits centered in the stage;
top pad pushes figures below the ~140px sticky header so heads never clip */
padding:clamp(78px,7.5vw,108px) clamp(6px,1vw,18px) 0;overflow:hidden;
}
/* dark radial flair behind the photos: a soft gold spotlight lifts the figures
off the band, ringed by a darkening vignette toward the stage edges. */
.ympa-hero__stage::before{
content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
background:
radial-gradient(56% 68% at 50% 46%, rgba(229,190,157,.13) 0%, rgba(229,190,157,0) 48%),
radial-gradient(96% 108% at 50% 44%, rgba(0,0,0,0) 38%, rgba(0,0,0,.52) 100%);
}
/* Figures fill the stage height and auto-shrink (flex-shrink) only when the row
would overflow — so they're as large as possible and spaced by `gap`, and
still fit at narrower desktop widths without overlapping. */
.ympa-fig{
position:relative;flex:0 1 auto;height:100%;aspect-ratio:.72;min-width:0;align-self:flex-end;
text-decoration:none;transition:transform .22s ease;z-index:1;
}
/* clean cut-out on the band — no translucent card (its overlap looked odd).
posY pushes the image down so the top of every head keeps clear headroom. */
.ympa-fig__photo{
position:absolute;inset:0;background-image:var(--img);background-repeat:no-repeat;
background-size:calc(1.45 * var(--fz,1) * 100%) auto;background-position:center var(--posY,28px);
filter:drop-shadow(0 14px 20px rgba(0,0,0,.45));
}
.ympa-fig:hover{transform:translateY(-8px);z-index:6;}
.ympa-fig__plate{
position:absolute;left:50%;bottom:40px;transform:translateX(-50%);
display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;
pointer-events:none;width:max-content;max-width:250px;
background:rgba(15,8,5,.62);backdrop-filter:blur(3px);padding:7px 16px;border-radius:3px;
z-index:7;transition:background .2s;
}
.ympa-fig:hover .ympa-fig__plate{background:rgba(15,8,5,.85);}
/* name in Libre Baskerville to tie the plate to the hero title */
.ympa-fig__name{font-family:"Libre Baskerville",Georgia,serif;font-weight:700;color:#fff;font-size:15px;line-height:1.2;letter-spacing:.3px;}
.ympa-fig__cta{
font-family:"Montserrat",sans-serif;font-size:10px;letter-spacing:.13em;text-transform:uppercase;
color:#E5BE9D;font-weight:600;max-height:0;opacity:0;overflow:hidden;transition:max-height .2s,opacity .2s;
}
.ympa-fig:hover .ympa-fig__cta,.ympa-fig:focus-visible .ympa-fig__cta{max-height:16px;opacity:1;}
.ympa-fig:focus-visible{outline:3px solid #E5BE9D;outline-offset:3px;}
/* single-attorney pages: lone portrait fills the height, centered (right-aligning
one figure to the gutter leaves an awkward void beside the text). */
.ympa-hero--n1 .ympa-fig{height:100%;}
.ympa-hero--n1 .ympa-hero__stage{justify-content:center;padding-right:clamp(6px,1vw,18px);}
@media (max-width:900px){
.ympa-hero{grid-template-columns:minmax(0,1fr);min-height:0;min-width:0;max-width:100%;}
.ympa-hero__text{padding:clamp(92px,22vw,110px) 22px 30px;}
.ympa-hero__stage{min-height:0;padding:18px 12px 0;gap:8px;justify-content:center;}
/* size by fixed height per count (percentage width + aspect-ratio is
unreliable inside flex); width derives from the .72 aspect. */
.ympa-fig{flex:0 0 auto;width:auto;height:auto;margin-left:0;aspect-ratio:.72;}
.ympa-hero--n1 .ympa-fig{height:clamp(220px,64vw,264px);}
.ympa-hero--n2 .ympa-fig{height:clamp(178px,46vw,212px);}
.ympa-hero--n3 .ympa-fig{height:clamp(104px,29vw,160px);}
/* pull the zoom back on mobile so head + shoulders show in the small boxes
(desktop's tight 1.45 face-crop shows only the face at this size), with a
little top headroom. */
.ympa-fig__photo{background-size:calc(1.12 * var(--fz,1) * 100%) auto;background-position:center 6px;}
/* keep name pills inside each (small) figure so they never clip at the edges */
.ympa-fig__plate{max-width:98%;padding:5px 8px;bottom:10px;}
.ympa-fig__name{font-size:11px;}
.ympa-hero--n3 .ympa-fig__name{font-size:9.5px;letter-spacing:0;}
}
@media (prefers-reduced-motion:reduce){.ympa-fig{transition:none;}}
/* ============================================================================
* 2026-07-17 — ALL HERO BANDS BROWN (operator: "make all hero sections brown
* instead of red"). Every page's top hero band was maroon #450209 (and the
* attorney portrait band was #810B17). Repaint them the espresso #241611 used
* by the practice-area line-up heroes so the whole site's heroes match.
* IDs gathered by scanning every page for hero-sized #450209 bands.
* ==========================================================================*/
.elementor-element-a43f935, /* videos */
.elementor-element-5a634a5, /* 404 / privacy-policy / terms */
.elementor-element-58c779e4, /* contact */
.elementor-element-f171809, /* practice-areas hub */
.elementor-element-94df96f, /* practice-areas hub inner */
.elementor-element-4358952, /* attorneys roster */
.elementor-element-397fa15, /* attorneys roster inner */
.elementor-element-2637b4f, /* ira-v-lee-iii */
.elementor-element-5687bc3, /* james-f-logan-jr */
.elementor-element-2297459, /* laurie-mcnulty */
.elementor-element-662aabb, /* kenneth-miller */
.elementor-element-3426a43, /* matthew-coleman */
.elementor-element-ca854f4, /* philip-jacobs */
.elementor-element-d0c88a1, /* robert-norred */
.elementor-element-5272013, /* robert-thompson */
.elementor-element-edac2dc { /* tim-hewitt */
background-color: #241611 !important;
}
/* 2026-07-17 (operator): secondary header (top contact bar) → maroon #450209 to
* match the footer socket (element 6b80994). Contact bar = 1990905 (desktop) +
* 92331c2 (mobile/hidden variant); both were #2C1707 brown. */
.elementor-element-1990905,
.elementor-element-92331c2 {
background-color: #450209 !important;
}
/* === Attorney roster grid — cap at 5 columns (client 2026-07-31) ===
Wide screens were spilling the grid to 6-per-row, leaving a sparse trailing row
(e.g. 6 + a centered 3). Cards are a fixed ~375px; 5 fit at ~1955px, 6 need ~2350px.
Cap the grid max-width so it never exceeds 5 columns; the existing justify-content:center
keeps the last (4-card) row centered. Reflows 5→4→3→2→1 as the viewport narrows. */
.elementor-element-3b9e53d {
max-width: 2000px !important;
margin-inline: auto !important;
}
/* SEO §8 (2026-08-11) — the header contact-bar + footer phone shipped as plain
* text (`(423) 476-2251`), so it was
* neither tap-to-call on mobile nor able to fire phone_tap. Wrapped the number in
* a `.ym-tel` tel: anchor. This rule keeps it rendering pixel-identical to the
* plain text — inherit the span's color, no underline — while making it a real,
* trackable CTA. Scoped to `.ym-tel` so no other icon-list link is affected. */
.ym-tel, .ym-tel:hover, .ym-tel:focus { color: inherit; text-decoration: none; }
/* Contrast fix (2026-08-11, operator) — the contact-bar phone shipped red
* #ee1128 on the maroon bar #450209 = 3.75:1, failing WCAG AA and the least
* legible thing in the header despite being a primary CTA. Make it WHITE to
* match the address beside it (clearly passes AA). Scoped to the two contact-bar
* containers (desktop 1990905 + mobile 92331c2) so the FOOTER phone — red on
* black #000, 4.75:1, already passes — keeps its brand-red accent. */
/* NOTE: the contact-bar phone item is ALREADY an `` (icon+number),
* so we target its icon-list-text span, not `.ym-tel` (which is only used where
* the phone shipped as plain text — i.e. the footer). The address span is white
* already, so recolouring both is a no-op for it. */
.elementor-element-1990905 .elementor-icon-list-text,
.elementor-element-92331c2 .elementor-icon-list-text { color: #fff !important; }
/* A11y remediation (2026-08-11, pre-launch pass) — Lighthouse a11y 84→≥90. */
/* Skip link ("Skip to content") was visually-hidden via .screen-reader-text but
* never revealed on keyboard focus, so Lighthouse flagged it non-focusable.
* Reveal it as a standard on-focus banner (invisible until Tab). */
.skip-link.screen-reader-text:focus {
position: fixed; left: 8px; top: 8px; z-index: 100000;
width: auto; height: auto; margin: 0; padding: 10px 18px;
clip: auto; clip-path: none; overflow: visible;
background: #fff; color: #000; font-weight: 700; border-radius: 4px;
outline: 2px solid #450209;
}
/* In-body practice-area links were tan text distinguished ONLY by colour (axe
* "links rely on color"). These are the class-less inline-styled links (the nav
* uses .elementor-item, excluded here). Underline them so they're identifiable
* without relying on colour. */
a[style*="e5be9d"]:not([class]) { text-decoration: underline; }
/* ============================================================================
* 2026-08-12 — operator cleanup pass (3 fixes)
* ==========================================================================*/
/* (1) HEADER LOGO — REVERTED 2026-08-12 (operator: "keep logo with black diagonal
* shape"). The original brand logo (logo-black-diagonal…webp — wordmark on a black
* parallelogram) is intentional and stays. The source CSS's black-diagonal
* background + background-size:contain is restored as-is (round-1 override removed).
*
* (7) TRANSPARENT PADDING LEFT OF THE LOGO (operator round-4: "needs padding on
* left of logo — what the black block previously accomplished").
* On tablet/mobile the header is an opaque grey bar and the brand logo's black
* shape sits FLUSH to the viewport's left edge, so the black touches the edge and
* reads as a hard "black block" with no breathing room. Inset the whole logo with
* transform (visual only — nav/hamburger flex layout untouched) so there's clean
* transparent space (the grey header shows through) to the LEFT of the black
* diagonal shape: the logo floats with padding instead of being jammed to the edge,
* and its diagonal shape is fully preserved. Scoped ≤1024 (on desktop the logo is
* already inset ~48px from the edge). translateX (not margin) avoids a detached
* background strip that padding+content-box produced. */
@media (max-width: 1024px) {
.elementor-element-7fcef7b { transform: translateX(36px); }
}
/* (8) DESKTOP "BLACK BOX" beside the logo — the header logo container
* (.elementor-element-76394d4, the e-con-child that wraps the brand-logo ) ships
* a 3em BLACK LEFT BORDER (border-left-width:3em + border-color:var(--e-global-
* color-820da7d), which resolves to black). That border is the "black block" — a
* fixed 3em black rectangle at the far-left of the header that survives moving the
* logo, the video, and every other layer, because it's a border on the header
* container itself (not the hero, not a pseudo). Operator: "there should be no black
* or grey color, simply padding." Make the border transparent so the exact 3em of
* inset space is preserved as clean padding with no color. The hero video overlay is
* intentional and stays untouched (round-5 mistake reverted). */
.elementor-element-76394d4 { border-left-color: transparent !important; }
/* (9) LOGO ASSET UPDATED (operator swapped in a version with the black square
* extended slightly on the left of the LT monogram). The file
* assets/images/logo-black-diagonal-1-e1712264917926.webp was overwritten in place
* (same filename, 938x300 -> 958x300, transparency preserved). Re-point the two logo
* elements (desktop 1307994 + mobile/tablet 7fcef7b) at a versioned URL so the CDN /
* browser cache can't serve the stale logo. Bump ?v= with the CSS cache-bust on any
* future logo re-export. */
.elementor-element.elementor-element-1307994:not(.elementor-motion-effects-element-type-background),
.elementor-element.elementor-element-7fcef7b:not(.elementor-motion-effects-element-type-background) {
background-image: url("../../assets/images/logo-black-diagonal-1-e1712264917926.webp?v=20260812h") !important;
}
/* (10) NAV DROPDOWN readability (operator 2026-08-12: "hard to read active/hover page
* name on dropdown menu"). The dropdown/submenu shipped its CURRENT-PAGE ('active')
* color bound to --e-global-color-accent, which we retinted tan (#E5BE9D) in round 2
* for body links — tan on the white dropdown panel (#FFFFFF) is unreadable, and the
* hover 'highlighted' background was also white so hover gave no feedback. Decouple
* the header dropdown from the accent var: maroon (#810A17, the brand primary) text
* on the white panel by default, and a clear white-on-maroon highlight for hover,
* focus, and the current page. Covers both the desktop flyout panels and the mobile
* menu (both carry .elementor-nav-menu--dropdown); the desktop top bar (--main) is
* untouched. */
.elementor-element-add4725 .elementor-nav-menu--dropdown a {
color: #810A17 !important;
}
.elementor-element-add4725 .elementor-nav-menu--dropdown a:hover,
.elementor-element-add4725 .elementor-nav-menu--dropdown a:focus,
.elementor-element-add4725 .elementor-nav-menu--dropdown a.elementor-item-active,
.elementor-element-add4725 .elementor-nav-menu--dropdown a.highlighted {
color: #ffffff !important;
background-color: #810A17 !important;
}
/* (11) MOBILE/TABLET HEADER — remove grey (operator: "no reference to the grey header
* … only black or transparent"). The responsive header wrapper (55b834c, shown ≤1024)
* shipped a #383838 grey background behind the logo/burger row. Make it solid black on
* every page. Desktop is already correct: transparent over the hero on home /
* practice-areas / attorneys, solid black on all other pages (header-black variant).
* The maroon top contact bar (92331c2) is kept as a brand color. */
.elementor-element-55b834c { background-color: #000 !important; }
/* (12) PRACTICE-AREA COVERAGE BULLETS → two centered columns (operator: "fix bullets
* to be two centered columns", applied to all 6 practice-area pages). Each page's
* "areas including but not limited to" list is a flex ROW holding two column
* containers of icon-box bullets. The row shipped with justify-content normal
* (flex-start), so the two columns packed to the LEFT with a large empty gutter on
* the right (looked left-shifted + ragged). Center the two columns as a group and
* top-align them so the first items line up even when a longer label wraps. Row IDs:
* e90fb2e (personal-injury + wills-and-estates), c5be035 (family-law),
* 7cb1316 (criminal-defense), 35f6e55 (social-security), f6dce96 (business-litigation). */
.elementor-element-e90fb2e,
.elementor-element-c5be035,
.elementor-element-7cb1316,
.elementor-element-35f6e55,
.elementor-element-f6dce96 {
justify-content: center !important;
align-items: flex-start !important;
}
/* (13) VIDEOS PAGE — three videos displayed evenly (operator: "remove these videos
* below and display all three videos evenly"). Removed 2 of the 5 embeds in HTML
* (kept the 2 Vimeo + the last YouTube) and consolidated the 3 kept videos into one
* row (255c178). Force an even 3-across on desktop/tablet; stack full-width on phones. */
.elementor-element-255c178 {
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
align-items: flex-start !important;
}
.elementor-element-255c178 > .elementor-widget-video {
flex: 0 1 32% !important;
max-width: 32% !important;
}
@media (max-width: 767px) {
.elementor-element-255c178 > .elementor-widget-video {
flex-basis: 100% !important;
max-width: 100% !important;
}
}
/* (14) ATTORNEY BIO PORTRAIT — fill the column, no black edges (operator item 7) +
* INFO/PIC columns centered (item 6); all 9 bios. Every portrait is the same 0.75
* portrait crop inside a taller dark (#241611) PIC column, so object-fit:contain left
* thin dark bands above/below the photo. On desktop + tablet (>=768px, where the two
* columns sit side-by-side) stretch each PIC column to the full band height and
* absolutely cover-fill the photo so it fills edge-to-edge (head kept via object-
* position:center top). Below 768px the columns stack and the photo flows full-width
* naturally, so the fill is scoped out. The INFO column stays vertically centered via
* the row's existing align-items:center. Per-bio PIC-column + image-widget ids. */
@media (min-width: 768px) {
.elementor-element-e2fa212,
.elementor-element-adf96b2,
.elementor-element-40b4ea1,
.elementor-element-a52b00b,
.elementor-element-4377ff2,
.elementor-element-15296f4,
.elementor-element-2998d51,
.elementor-element-4426d73,
.elementor-element-659b8c2 {
align-self: stretch !important;
position: relative !important;
}
.elementor-element-5afa0f2,
.elementor-element-5f6256e,
.elementor-element-2cadd03,
.elementor-element-b0989b1,
.elementor-element-875f73d,
.elementor-element-e7d986b,
.elementor-element-9d942e9,
.elementor-element-47a8bb6,
.elementor-element-24016b6 {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
}
.elementor-element-5afa0f2 .elementor-widget-container,
.elementor-element-5f6256e .elementor-widget-container,
.elementor-element-2cadd03 .elementor-widget-container,
.elementor-element-b0989b1 .elementor-widget-container,
.elementor-element-875f73d .elementor-widget-container,
.elementor-element-e7d986b .elementor-widget-container,
.elementor-element-9d942e9 .elementor-widget-container,
.elementor-element-47a8bb6 .elementor-widget-container,
.elementor-element-24016b6 .elementor-widget-container,
.elementor-element-5afa0f2 figure,
.elementor-element-5f6256e figure,
.elementor-element-2cadd03 figure,
.elementor-element-b0989b1 figure,
.elementor-element-875f73d figure,
.elementor-element-e7d986b figure,
.elementor-element-9d942e9 figure,
.elementor-element-47a8bb6 figure,
.elementor-element-24016b6 figure,
.elementor-element-5afa0f2 figure > a,
.elementor-element-5f6256e figure > a,
.elementor-element-2cadd03 figure > a,
.elementor-element-b0989b1 figure > a,
.elementor-element-875f73d figure > a,
.elementor-element-e7d986b figure > a,
.elementor-element-9d942e9 figure > a,
.elementor-element-47a8bb6 figure > a,
.elementor-element-24016b6 figure > a,
.elementor-element-5afa0f2 picture,
.elementor-element-5f6256e picture,
.elementor-element-2cadd03 picture,
.elementor-element-b0989b1 picture,
.elementor-element-875f73d picture,
.elementor-element-e7d986b picture,
.elementor-element-9d942e9 picture,
.elementor-element-47a8bb6 picture,
.elementor-element-24016b6 picture {
height: 100% !important;
width: 100% !important;
margin: 0 !important;
}
.elementor-element-5afa0f2 img,
.elementor-element-5f6256e img,
.elementor-element-2cadd03 img,
.elementor-element-b0989b1 img,
.elementor-element-875f73d img,
.elementor-element-e7d986b img,
.elementor-element-9d942e9 img,
.elementor-element-47a8bb6 img,
.elementor-element-24016b6 img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center top !important;
display: block !important;
}
}
/* (2) HOME STATS COUNTERS — "keep text centered and lines even on all screen sizes".
* Titles shipped left-aligned (text-align:start) while the numbers are centered,
* and a single-line title ("Five Star Google Reviews") reserved less height than
* the two-line ones, so the numbers landed at uneven heights when titles wrapped.
* Center the titles and reserve a consistent two-line title box (bottom-aligned so
* a short title hugs its number) — all three number rows now align at every width. */
.elementor-element-f851cc5 .elementor-counter-title {
text-align: center !important;
min-height: 2.6em;
display: flex;
align-items: flex-end;
justify-content: center;
}
.elementor-element-f851cc5 .elementor-counter-number-wrapper { text-align: center; }
/* (3) TABLET GREY BOX — the AV / "Fierce Protection" section (49d02a24) is two
* black columns on desktop; its white→grey gradient background is fully covered
* there and never seen. At tablet the left column hides and the remaining black
* content doesn't fill the parent's min-height, leaking that gradient as a stray
* grey band below the AV badge. Drop the vestigial gradient (render-neutral on
* desktop) and let the section hug its content at tablet. */
.elementor-element-49d02a24 {
background-image: none !important;
background-color: #000 !important;
}
@media (max-width: 1024px) {
.elementor-element-49d02a24 { min-height: 0 !important; }
}
/* ============================================================================
* 2026-08-12 (round 2) — operator cleanup pass B (4 fixes)
* ==========================================================================*/
/* (4) BODY FONT ON SMALL SCREENS — the kit drops the "Text" typography preset
* from 18px (desktop) to 14px at ≤1024 (and stays 14px at ≤767), which reads
* cramped on phones/tablets. Bump the preset to 16px on small screens so all
* body prose scales up (line-height is 1.5em, relative, so it follows). */
@media (max-width: 1024px) {
.elementor-kit-1746 { --e-global-typography-text-font-size: 16px !important; }
}
/* (5) ATTORNEY BIO HERO — "whole hero should show on all screen sizes".
* On desktop (≥1025) the brown bio band slides UNDER the sticky ~140px header
* (by design, so the portrait fills behind it). The TEXT column is vertically
* centered in the band, so on shorter bands (many desktop widths) the top of the
* content — the eyebrow + the attorney's name — rises under the header and clips.
* Top-align just the text column (always the first child; portrait is second and
* stays put) and pad it down to clear the header. Desktop-only: at ≤1024 the band
* already sits below the header, so this must not apply. */
@media (min-width: 1025px) {
.elementor-element-5687bc3 > .elementor-element:first-child, /* james-f-logan-jr */
.elementor-element-2637b4f > .elementor-element:first-child, /* ira-v-lee-iii */
.elementor-element-2297459 > .elementor-element:first-child, /* laurie-mcnulty */
.elementor-element-662aabb > .elementor-element:first-child, /* kenneth-miller */
.elementor-element-3426a43 > .elementor-element:first-child, /* matthew-coleman */
.elementor-element-ca854f4 > .elementor-element:first-child, /* philip-jacobs */
.elementor-element-d0c88a1 > .elementor-element:first-child, /* robert-norred */
.elementor-element-5272013 > .elementor-element:first-child, /* robert-thompson */
.elementor-element-edac2dc > .elementor-element:first-child { /* tim-hewitt */
align-self: flex-start !important;
padding-top: 150px !important;
}
}
/* (6) RED HYPERLINKS / ICONS "look weird in places" — everything red on the site
* traces to ONE kit variable, --e-global-color-accent = #EE1128 (a harsh neon
* red). It drives BOTH the default link color (a{color:accent}) AND per-widget
* icon-list icon fills — so the phone/pin/clock icons and default links across the
* contact blocks, bio Office/Fax rows, and Terms all render neon-red, clashing
* with the site's warm tan/maroon palette (the footer, by contrast, uses tan).
* Repoint the accent to the brand tan #E5BE9D so ALL of it becomes one on-brand
* colour at once. Safe because: no button uses the raw accent bg (they're
* white/maroon/tan-brown, overridden per-element); the header contact-bar icons
* have an explicit white fill (unaffected); and the only other consumer is the
* nav active/underline state, which reads better in tan anyway. */
.elementor-kit-1746 { --e-global-color-accent: #E5BE9D; }
/* Belt-and-suspenders for the two phone links that shipped as plain text and were
* wrapped in .ym-tel (footer + "Get In Touch") — pin them to tan explicitly so
* they always match the adjacent tan icons regardless of the .ym-tel inherit rule
* above. (Header phone is a different anchor, already forced white — untouched.) */
a.ym-tel, a.ym-tel:hover, a.ym-tel:focus { color: #E5BE9D !important; }
/* Exception: inline body hyperlinks live mostly on the LIGHT content pages
* (Terms/Privacy cream), where tan would be near-invisible. Keep those on the
* brand maroon (readable on cream, on-brand). Excludes the tan inline-styled
* practice links (they carry style=) and tel: links. */
.elementor-widget-text-editor a:not([style]):not([href^="tel:"]),
.elementor-widget-theme-post-content a:not([style]):not([href^="tel:"]) { color: #810A17; }
.elementor-widget-text-editor a:not([style]):not([href^="tel:"]):hover,
.elementor-widget-theme-post-content a:not([style]):not([href^="tel:"]):hover { color: #450209; }