/*
Theme Name: Lawson Hatch
Theme URI: https://lawsonhatch.com
Description: Custom WordPress block theme for Lawson Hatch, PLLC. Built without page builder dependencies. Full Site Editing (FSE) architecture with native WordPress blocks.
Version: 0.2.5
Requires at least: 6.5
Tested up to: 6.9
Requires PHP: 8.0
Author: Songbird
License: Proprietary
License URI: https://lawsonhatch.com
Text Domain: hatch-law
*/
/* ==========================================================================
DESIGN TOKEN COMPATIBILITY ALIASES
WordPress converts slug "4xl" → CSS variable "--wp--preset--font-size--4-xl"
(hyphen at digit-letter boundary). Block inline styles and theme.json element
rules reference the non-hyphenated form ("--wp--preset--font-size--4xl"),
which WordPress never defines. These aliases bridge the gap so both naming
styles resolve to the same fluid value everywhere in the theme.
========================================================================== */
:root {
--wp--preset--font-size--2xl: var(--wp--preset--font-size--2-xl);
--wp--preset--font-size--3xl: var(--wp--preset--font-size--3-xl);
--wp--preset--font-size--4xl: var(--wp--preset--font-size--4-xl);
--wp--preset--font-size--5xl: var(--wp--preset--font-size--5-xl);
}
/* ==========================================================================
SITE HEADER
========================================================================== */
.site-header {
position: sticky;
top: 0;
z-index: 100;
background-color: #ffffff;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
/* Logged-in: WP admin bar is fixed at the top. Offset the sticky header
so it doesn't slide behind the admin bar on scroll. */
.admin-bar .site-header {
top: var(--wp-admin--admin-bar--height, 32px);
}
.site-header-inner {
width: 100%;
max-width: var(--wp--style--global--wide-size, 1200px);
margin-inline: auto;
padding-inline: var(--wp--preset--spacing--5, 1.5rem);
padding-block: 14px;
}
/* Header CTA button — override theme.json accent for header-specific styling */
.header-cta .wp-block-button__link {
background-color: var(--wp--preset--color--secondary) !important;
color: #ffffff !important;
font-size: var(--wp--preset--font-size--sm);
letter-spacing: 0.03em;
white-space: nowrap;
}
.header-cta .wp-block-button__link:hover {
opacity: 1;
}
/* Primary navigation links */
.primary-navigation .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
font-family: var(--wp--preset--font-family--body);
font-size: 1.125rem;
font-weight: 600;
color: var(--wp--preset--color--primary);
padding-block: 0.25rem;
padding-inline: 0.5rem;
text-decoration: none;
transition: color 0.15s ease;
}
.primary-navigation .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover {
color: var(--wp--preset--color--secondary);
}
/* Navigation dropdown */
.wp-block-navigation .wp-block-navigation__submenu-container {
background-color: #ffffff;
border-top: 2px solid var(--wp--preset--color--secondary);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
min-width: 220px;
}
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
color: var(--wp--preset--color--primary);
font-size: var(--wp--preset--font-size--sm);
padding: 0.6rem 1rem;
}
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
background-color: var(--wp--preset--color--light-bg);
color: var(--wp--preset--color--secondary);
}
/* ==========================================================================
SITE FOOTER
========================================================================== */
.site-footer {
background-color: var(--wp--preset--color--primary);
/* Thin rule separates footer from any same-colour section above (e.g. CTA) */
border-top: 1px solid rgba(255, 255, 255, 0.15);
/* WP flow layout injects 32px margin-top between template blocks — kill it */
margin-top: 0 !important;
}
/* Homepage: kill 32px block-gap between the hero cover and the first content section */
.home-page .home-hero-cover + .wp-block-group {
margin-top: 0 !important;
}
.site-footer-inner {
width: 100%;
max-width: var(--wp--style--global--wide-size, 1200px);
margin-inline: auto;
/* Block-grammar padding attrs don't render in file-based template parts — set here */
padding: 3rem 1.5rem 2rem;
}
/* Footer navigation links */
.footer-nav-list {
list-style: none;
margin: 0;
padding: 0;
}
.footer-nav-list li + li {
margin-top: 0.5rem;
}
.footer-nav-list a {
color: rgba(255, 255, 255, 0.75);
font-size: var(--wp--preset--font-size--sm);
text-decoration: none;
transition: color 0.15s ease;
}
.footer-nav-list a:hover {
color: var(--wp--preset--color--accent);
}
/* Footer column headings */
.site-footer-inner h4 {
color: #ffffff;
font-family: var(--wp--preset--font-family--body);
font-size: var(--wp--preset--font-size--sm);
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
margin-block: 0 var(--wp--preset--spacing--3);
}
/* Footer tagline and contact details */
.footer-tagline,
.footer-contact-details {
color: rgba(255, 255, 255, 0.65);
font-size: var(--wp--preset--font-size--sm);
line-height: 1.7;
}
.footer-contact-details a {
color: rgba(255, 255, 255, 0.75);
text-decoration: none;
}
.footer-contact-details a:hover {
color: var(--wp--preset--color--accent);
}
/* Footer bottom bar — copyright + legal links row */
.footer-bottom-bar {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: var(--wp--preset--spacing--3);
}
.footer-legal-links {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 1.25rem;
}
.footer-legal-links a {
color: rgba(255, 255, 255, 0.5);
font-size: var(--wp--preset--font-size--xs);
text-decoration: none;
}
.footer-legal-links a:hover {
color: rgba(255, 255, 255, 0.8);
}
/* ==========================================================================
PAGE HEADER BAND (interior pages)
========================================================================== */
.page-header {
background-color: var(--wp--preset--color--primary);
}
.page-header .wp-block-post-title {
color: #ffffff;
font-family: var(--wp--preset--font-family--heading);
margin: 0;
}
/* ==========================================================================
TEAM / ATTORNEY PROFILE PAGES
========================================================================== */
.team-member-header {
display: flex;
align-items: flex-start;
gap: var(--wp--preset--spacing--6);
}
.team-member-photo img {
border-radius: 4px;
display: block;
}
.team-member-title {
color: var(--wp--preset--color--secondary);
font-family: var(--wp--preset--font-family--body);
font-size: var(--wp--preset--font-size--lg);
font-weight: 600;
margin-block: 0.25rem 1rem;
}
.team-contact-info {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
.team-contact-info li a {
color: var(--wp--preset--color--primary);
font-size: var(--wp--preset--font-size--sm);
font-weight: 600;
text-decoration: none;
}
.team-contact-info li a:hover {
color: var(--wp--preset--color--secondary);
}
/* ==========================================================================
SERVICES PAGE
========================================================================== */
.service-section {
border-bottom: 1px solid var(--wp--preset--color--light-gray);
padding-block: var(--wp--preset--spacing--7);
}
.service-section:last-child {
border-bottom: none;
}
.service-section h3 {
color: var(--wp--preset--color--primary);
margin-block-end: var(--wp--preset--spacing--4);
}
.service-section h6 {
color: var(--wp--preset--color--secondary);
font-family: var(--wp--preset--font-family--body);
font-size: var(--wp--preset--font-size--sm);
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
margin-block: var(--wp--preset--spacing--5) var(--wp--preset--spacing--3);
}
/* ==========================================================================
HERO / COVER SYSTEM
Shared rules for .home-hero-cover (homepage) and .page-hero (interior pages).
Both use wp:cover with a primary-color overlay over a landscape photograph.
dimRatio is set in block attributes; fine-tuned here per-class.
========================================================================== */
/* ── Homepage photo hero ─────────────────────────────────────────────────── */
.home-hero-cover .wp-block-cover__background.has-background-dim {
opacity: 0.85;
}
.home-hero-cover .wp-block-cover__inner-container {
padding-top: var(--wp--preset--spacing--9);
padding-bottom: var(--wp--preset--spacing--9);
width: 100%;
}
/* Hero H1 — font-family, colour, max-width, and tight leading.
Font-size is set mobile-only in the responsive section below. */
.home-hero-cover h1.wp-block-heading {
font-family: var(--wp--preset--font-family--heading) !important;
color: #ffffff !important;
max-width: 820px;
line-height: 1.05 !important;
letter-spacing: -0.015em;
text-shadow: 0 2px 20px rgba(0, 0, 0, 0.15);
margin-bottom: var(--wp--preset--spacing--5) !important;
}
/* Hero button hovers */
.home-hero-cover .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
background-color: var(--wp--preset--color--accent) !important;
color: var(--wp--preset--color--primary) !important;
transition: background-color 0.2s ease, color 0.2s ease;
}
.home-hero-cover .wp-block-button.is-style-outline .wp-block-button__link:hover {
background-color: rgba(255, 255, 255, 0.15) !important;
color: #ffffff !important;
transition: background-color 0.2s ease;
}
/* ── Interior page photo hero ────────────────────────────────────────────── */
.page-hero .wp-block-cover__background.has-background-dim {
opacity: 0.52;
}
/* ── About hero — 55% overlay, photo reads clearly through tint ───────────── */
.about-hero .wp-block-cover__background.has-background-dim {
opacity: 0.55;
}
.page-hero .wp-block-cover__inner-container {
padding-top: var(--wp--preset--spacing--8);
padding-bottom: var(--wp--preset--spacing--8);
width: 100%;
}
.page-hero h1.wp-block-heading {
font-family: var(--wp--preset--font-family--heading) !important;
color: #ffffff !important;
font-size: clamp(2.25rem, 1.5rem + 3vw, 3.5rem) !important;
line-height: 1.1 !important;
letter-spacing: -0.01em;
text-shadow: 0 1px 16px rgba(0, 0, 0, 0.18);
max-width: 680px;
margin-bottom: 0.5rem !important;
}
/* Eyebrow label — editorial sentence-case label, matches reference */
.page-hero-eyebrow {
font-family: 'DM Sans', sans-serif !important;
font-size: 1.0625rem !important;
font-weight: 400 !important;
letter-spacing: 0.01em !important;
text-transform: none !important;
color: rgba(255, 255, 255, 0.78) !important;
line-height: 1.5 !important;
margin-bottom: var(--wp--preset--spacing--3) !important;
}
/* ── Solid-color fallback (retains .hero-section for any non-photo uses) ─── */
.hero-section {
background-color: var(--wp--preset--color--primary);
background-image: linear-gradient(135deg, #214845 0%, #1a3a38 100%);
}
.hero-section h1 {
font-family: var(--wp--preset--font-family--heading);
color: #ffffff;
max-width: 760px;
}
/* ==========================================================================
HOME PAGE SECTIONS
========================================================================== */
.section-services h2 {
color: var(--wp--preset--color--secondary);
}
.section-services h3 {
color: var(--wp--preset--color--primary);
}
.section-services .wp-block-column h4 {
color: var(--wp--preset--color--primary);
font-family: var(--wp--preset--font-family--heading);
margin-block-end: 0.75rem;
}
/* Service preview card grid — equal-height rows */
.section-services .wp-block-columns {
align-items: stretch;
}
.section-services .wp-block-column {
display: flex;
flex-direction: column;
}
.section-services .wp-block-column > .service-preview-card {
flex: 1;
}
/* Card container */
.service-preview-card {
border: 1px solid rgba(33, 72, 69, 0.08);
border-top: 3px solid var(--wp--preset--color--secondary);
box-shadow: 0 2px 16px rgba(33, 72, 69, 0.07);
display: flex;
flex-direction: column;
box-sizing: border-box;
transition: box-shadow 0.2s ease;
}
.service-preview-card:hover {
box-shadow: 0 4px 24px rgba(33, 72, 69, 0.12);
}
/* SVG icon — replaces numbered 01–04 markers */
.service-card-icon {
display: block;
color: var(--wp--preset--color--secondary);
margin-top: 0;
margin-bottom: var(--wp--preset--spacing--4);
line-height: 0;
}
.service-card-icon svg {
display: block;
width: 44px;
height: 44px;
}
/* Card heading — override Elementor Kit h4 */
.section-services .service-preview-card h4.wp-block-heading {
font-family: 'Frank Ruhl Libre', serif !important;
font-size: 1.25rem !important;
font-weight: 700 !important;
color: var(--wp--preset--color--primary) !important;
line-height: 1.3 !important;
}
/* Card excerpt */
.section-services .service-preview-card p:not(.service-card-link) {
font-size: 0.9375rem;
line-height: 1.72;
color: var(--wp--preset--color--text);
flex-grow: 1;
}
/* Learn More link — pinned to card bottom */
.service-card-link {
margin-top: auto !important;
}
.service-card-link a {
font-family: 'Montserrat', sans-serif !important;
font-size: 0.875rem !important;
font-weight: 700 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
color: var(--wp--preset--color--primary) !important;
text-decoration: none !important;
}
.service-card-link a:hover {
color: var(--wp--preset--color--secondary) !important;
}
/* Why us section */
.section-why-us {
background-color: var(--wp--preset--color--light-bg);
}
.section-why-us h2 {
color: var(--wp--preset--color--secondary);
}
.section-why-us h3 {
color: var(--wp--preset--color--primary);
}
/* CTA section */
.section-contact-cta {
background-color: var(--wp--preset--color--primary);
}
/* ==========================================================================
CONSULTATION / FORM PAGES
========================================================================== */
.consultation-intro {
max-width: 680px;
}
.form-placeholder {
background-color: var(--wp--preset--color--light-bg);
border: 2px dashed var(--wp--preset--color--light-gray);
border-radius: 4px;
padding: var(--wp--preset--spacing--7);
text-align: center;
color: var(--wp--preset--color--text);
}
/* ==========================================================================
CONTACT PAGE
========================================================================== */
.contact-info-item h4 {
color: var(--wp--preset--color--primary);
font-family: var(--wp--preset--font-family--body);
font-size: var(--wp--preset--font-size--sm);
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
margin-block: 0 0.25rem;
}
.contact-info-item p {
margin: 0;
}
.contact-info-item a {
color: var(--wp--preset--color--primary);
font-weight: 600;
}
/* ==========================================================================
SERVICES PAGE — PARITY RECONSTRUCTION
========================================================================== */
/* Cover hero on Services page */
.services-hero-cover .wp-block-cover__inner-container {
text-align: center;
}
/* Two-column service layout: bullets sidebar card */
.service-bullets-card {
background-color: var(--wp--preset--color--light-bg);
border-left: 3px solid var(--wp--preset--color--secondary);
padding: var(--wp--preset--spacing--5) var(--wp--preset--spacing--5);
border-radius: 2px;
}
.service-bullets-card h4 {
color: var(--wp--preset--color--secondary);
font-family: var(--wp--preset--font-family--body);
font-size: var(--wp--preset--font-size--sm);
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
margin-block: 0 var(--wp--preset--spacing--3);
}
.service-bullets-card .wp-block-list {
margin: 0;
padding-inline-start: 1.25rem;
}
.service-bullets-card .wp-block-list li {
font-size: var(--wp--preset--font-size--sm);
line-height: 1.6;
margin-block-end: 0.4rem;
}
/* Services bottom intro section — dark green, centered */
.services-intro-bottom h2 {
color: #ffffff;
}
.services-intro-bottom .services-icon-label {
border-right: 1px solid rgba(255, 255, 255, 0.15);
padding-inline: var(--wp--preset--spacing--4);
}
.services-intro-bottom .services-icon-label:last-child {
border-right: none;
}
.services-team-photo {
max-width: 680px;
margin-inline: auto;
}
.services-team-photo img {
border-radius: 4px;
display: block;
margin-inline: auto;
}
/* Tagline band */
.services-tagline-band p {
margin: 0;
}
/* ==========================================================================
BIO PAGES — PARITY RECONSTRUCTION
========================================================================== */
.bio-page-header {
border-bottom: 3px solid var(--wp--preset--color--secondary);
}
.bio-headshot img {
border-radius: 4px;
display: block;
width: 100%;
max-width: 340px;
}
.bio-title {
color: var(--wp--preset--color--secondary) !important;
font-family: var(--wp--preset--font-family--body);
font-size: var(--wp--preset--font-size--lg);
font-weight: 600;
margin-block: 0.25rem 1rem;
}
.bio-page-header .wp-block-column h2 {
margin-block-end: 0.25rem;
color: var(--wp--preset--color--primary);
}
.bio-page-header .wp-block-column p a {
color: var(--wp--preset--color--primary);
font-weight: 600;
text-decoration: none;
}
.bio-page-header .wp-block-column p a:hover {
color: var(--wp--preset--color--secondary);
}
/* ==========================================================================
ABOUT US — PARITY RECONSTRUCTION
========================================================================== */
.about-group-photo img {
border-radius: 4px;
display: block;
width: 100%;
}
.about-values-section h2 {
color: var(--wp--preset--color--primary);
}
.about-values-section h3 {
color: var(--wp--preset--color--secondary);
}
/* ==========================================================================
CONTACT PAGE — PARITY RECONSTRUCTION
========================================================================== */
.contact-info-card {
background-color: #ffffff;
border: 1px solid var(--wp--preset--color--light-gray);
border-top: 3px solid var(--wp--preset--color--secondary);
border-radius: 2px;
padding: var(--wp--preset--spacing--6);
}
.contact-info-card h4 {
color: var(--wp--preset--color--primary);
font-family: var(--wp--preset--font-family--body);
font-size: var(--wp--preset--font-size--sm);
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
margin-block: 0 0.5rem;
}
.contact-info-card p {
margin: 0;
font-size: var(--wp--preset--font-size--base);
line-height: 1.6;
}
.contact-info-card a {
color: var(--wp--preset--color--primary);
font-weight: 600;
text-decoration: none;
}
.contact-info-card a:hover {
color: var(--wp--preset--color--secondary);
}
.map-placeholder {
background-color: var(--wp--preset--color--light-bg);
border: 2px dashed var(--wp--preset--color--light-gray);
border-radius: 4px;
padding: var(--wp--preset--spacing--8) var(--wp--preset--spacing--5);
text-align: center;
min-height: 240px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
/* ==========================================================================
404 PAGE
========================================================================== */
.error-404 {
text-align: center;
}
/* ==========================================================================
MOBILE RESPONSIVE
========================================================================== */
@media (max-width: 782px) {
/* Header — compact on mobile */
.site-header-inner {
padding-inline: var(--wp--preset--spacing--4, 1rem);
padding-block: 8px;
}
.site-header .wp-block-site-logo img,
.site-header .custom-logo {
max-height: 52px !important;
}
/* Hero — photo cover + solid fallback */
.hero-section h1,
.page-hero h1.wp-block-heading {
font-size: var(--wp--preset--font-size--3xl) !important;
}
/* Home hero gets its own fluid scale — stays impactful on mobile */
.home-hero-cover h1.wp-block-heading {
font-size: clamp(2rem, 5vw + 0.5rem, 2.75rem) !important;
line-height: 1.1 !important;
}
/* Footer — reduce top/bottom padding on mobile */
.site-footer-inner {
padding: 2rem 1.25rem 1.5rem;
}
/* Footer columns stack */
.site-footer-inner .wp-block-columns {
flex-direction: column;
}
.site-footer-inner .wp-block-column {
flex-basis: 100% !important;
}
/* Footer bottom bar — stack copyright above legal links on mobile */
.footer-bottom-bar {
flex-direction: column;
align-items: flex-start;
gap: var(--wp--preset--spacing--3);
}
/* Team photo */
.team-member-header {
flex-direction: column;
}
.team-member-photo img {
max-width: 280px;
}
/* Bio page header — stack on mobile */
.bio-page-header .wp-block-columns {
flex-direction: column;
}
.bio-page-header .wp-block-column {
flex-basis: 100% !important;
}
.bio-headshot img {
max-width: 220px;
}
/* Service two-column — stack on mobile */
.service-two-col.wp-block-columns {
flex-direction: column;
}
.service-two-col .wp-block-column {
flex-basis: 100% !important;
}
.service-bullets-card {
border-left: none;
border-top: 3px solid var(--wp--preset--color--secondary);
}
/* Services icon labels — wrap */
.services-intro-bottom .services-icon-label {
border-right: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
padding-block: var(--wp--preset--spacing--3);
}
/* Contact cards stack */
.contact-cards-section .wp-block-columns {
flex-direction: column;
}
.contact-cards-section .wp-block-column {
flex-basis: 100% !important;
}
/* About Us intro stack */
.about-intro-section .wp-block-columns {
flex-direction: column;
}
.about-intro-section .wp-block-column {
flex-basis: 100% !important;
}
}
@media (max-width: 480px) {
/* Interior page heroes shrink further — home hero holds its size via the 782px clamp */
.hero-section h1,
.page-hero h1.wp-block-heading {
font-size: var(--wp--preset--font-size--2xl) !important;
}
}
/* ==========================================================================
POLISH PASS — 2026-04-03
Header, Services nav, Bio/About/Contact improvements, typography rhythm
========================================================================== */
/* ─── HEADER REFINEMENTS ─────────────────────────────────────────────────── */
/* Logo: constrain height so header stays compact */
.site-header .wp-block-site-logo img,
.site-header .custom-logo {
max-height: 76px !important;
width: auto !important;
}
/* Header right-side grouping (phone + CTA) */
.header-right {
display: flex;
align-items: center;
gap: var(--wp--preset--spacing--4);
margin-left: auto !important;
white-space: nowrap;
}
/* Header phone number */
.header-phone a {
color: var(--wp--preset--color--primary) !important;
font-family: var(--wp--preset--font-family--body);
font-size: var(--wp--preset--font-size--base);
font-weight: 700;
text-decoration: none;
letter-spacing: 0.01em;
transition: color 0.15s ease;
}
.header-phone a:hover {
color: var(--wp--preset--color--secondary) !important;
text-decoration: underline;
}
/* Ensure header CTA doesn't wrap */
.header-cta .wp-block-button__link {
white-space: nowrap;
padding-block: 0.55rem;
padding-inline: 1.1rem;
font-size: var(--wp--preset--font-size--base) !important;
font-weight: 600 !important;
}
/* Nav separator style between links (matches original) */
.primary-navigation .wp-block-navigation__container > .wp-block-navigation-item {
position: relative;
}
.primary-navigation .wp-block-navigation__container > .wp-block-navigation-item + .wp-block-navigation-item::before {
content: "";
position: absolute;
left: 0;
top: 20%;
height: 60%;
width: 1px;
background: rgba(33, 72, 69, 0.18);
}
/* ─── PAGE HEADER BAND (INTERIOR) ────────────────────────────────────────── */
.page-header {
padding-block: var(--wp--preset--spacing--6) !important;
}
.page-header .wp-block-post-title {
font-family: var(--wp--preset--font-family--heading);
font-size: var(--wp--preset--font-size--3xl);
font-weight: 400;
color: #ffffff !important;
margin: 0;
text-align: center;
letter-spacing: -0.01em;
}
/* Interior page content wrapper: add breathing room */
.site-main.interior-page > .wp-block-group:last-of-type {
padding-top: var(--wp--preset--spacing--7) !important;
padding-bottom: var(--wp--preset--spacing--8) !important;
}
/* ─── SERVICES PAGE POLISH ───────────────────────────────────────────────── */
/*
* Services hero — rendered hierarchy fix (2026-04-04)
*
* Root cause: the 5xl token resolves to clamp(2rem,…,3.5rem) = 56px max.
* That ceiling is fine for interior headings but insufficient for a flat-color
* hero that has no photo background to supply visual weight. The homepage H1
* uses the same token but a cover block with a dark image overlay compensates.
* Here there is no compensation, so 56px reads as a page heading, not a hero.
*
* Inline styles (specificity 1-0-0-0) cannot be overridden without !important.
* !important is the only valid option for font-size and line-height on this element.
*/
/* H1: push beyond the 56px token ceiling.
clamp(2.75rem,2rem+3.5vw,4.5rem):
320px → 2.75rem = 44px (min clamp)
768px → ~3.7rem = 59px
1024px → ~4.1rem = 66px
1200px → 4.5rem = 72px (max, capped)
!important required: inline style font-size:var(--wp--preset--font-size--5xl) wins
at specificity 1-0-0-0 and cannot be beaten by any class/element selector. */
.services-page-header h1 {
font-family: 'Frank Ruhl Libre', serif;
font-size: clamp(2.75rem, 2rem + 3.5vw, 4.5rem) !important;
line-height: 1.05 !important;
letter-spacing: -0.025em;
font-weight: 700;
margin-bottom: 1.125rem;
}
/* Tagline: two issues fixed here.
(a) .has-text-color applies color:#5D5D5D !important globally — beats the inline
rgba white. Re-assert white at higher specificity with !important.
(b) Inline margin-top:var(--spacing--3)=0.75rem is too tight against a 72px heading.
Push to 0 (the h1's own margin-bottom handles the gap cleanly). */
.services-page-header p.has-text-color {
color: rgba(255, 255, 255, 0.86) !important;
margin-top: 0 !important;
}
/* Kill WP layout block-gap between hero and selector nav.
The selector's own margin-block-start:0 handles it in lhl-component-selectors.css,
but this belts-and-suspenders rule covers edge cases where the WP wrapper
adds the gap from outside the section element. */
.services-page-header,
.about-page-hero {
margin-bottom: 0;
}
/* The WP layout system adds margin-block-start via :where(.is-layout-constrained) > *
This override ensures the selector/anchor nav visually merges with the dark hero. */
.entry-content .services-page-header + *,
.about-page-hero + * {
margin-block-start: 0;
}
/* Tagline band: FORCE primary green regardless of has-secondary class */
.services-tagline-band,
.services-tagline-band.has-secondary-background-color {
background-color: var(--wp--preset--color--primary) !important;
border-top: 3px solid rgba(196, 234, 158, 0.35);
border-bottom: 3px solid rgba(196, 234, 158, 0.35);
}
.services-tagline-band p {
color: rgba(255, 255, 255, 0.92) !important;
letter-spacing: 0.22em !important;
font-size: var(--wp--preset--font-size--base) !important;
font-family: var(--wp--preset--font-family--body) !important;
font-weight: 500 !important;
margin: 0;
}
/* Service section anchor navigation row */
.services-section-nav {
background-color: var(--wp--preset--color--primary);
border-bottom: 2px solid rgba(196, 234, 158, 0.2);
position: sticky;
top: 0;
z-index: 90;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.services-section-nav::-webkit-scrollbar {
display: none;
}
.services-section-nav .services-nav-inner {
display: flex;
align-items: stretch;
justify-content: center;
max-width: 1200px;
margin-inline: auto;
padding-inline: var(--wp--preset--spacing--5);
flex-wrap: nowrap;
min-height: 52px;
}
.services-section-nav .services-nav-item {
display: inline-flex;
align-items: center;
padding: 0.75rem 1.1rem;
color: rgba(255, 255, 255, 0.72) !important;
font-family: var(--wp--preset--font-family--body);
font-size: 0.875rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
border-bottom: 3px solid transparent;
transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
/* Match lhl-service-tab:hover exactly — secondary green, no underline */
.services-section-nav .services-nav-item:hover {
color: var(--wp--preset--color--secondary) !important;
border-bottom-color: transparent;
background-color: rgba(255, 255, 255, 0.05);
}
/* Mobile: short labels visible, full labels hidden; items wrap */
.about-section-nav .nav-label-short { display: none; }
@media (max-width: 600px) {
.about-section-nav .services-nav-inner {
flex-wrap: wrap;
justify-content: center;
}
.about-section-nav .nav-label-full { display: none; }
.about-section-nav .nav-label-short { display: inline; }
}
.services-section-nav .services-nav-item + .services-nav-item {
border-left: 1px solid rgba(255, 255, 255, 0.1);
}
/* Service section separators: stronger visual */
.services-content-area > .wp-block-separator {
border-color: var(--wp--preset--color--light-gray) !important;
margin-block: 0 !important;
opacity: 1;
}
/* Service section H3 headings: stronger */
.services-content-area .service-two-col h3.wp-block-heading {
font-family: var(--wp--preset--font-family--heading);
font-size: var(--wp--preset--font-size--2xl);
font-weight: 600;
color: var(--wp--preset--color--primary);
margin-block-end: var(--wp--preset--spacing--4);
padding-bottom: var(--wp--preset--spacing--3);
border-bottom: 2px solid var(--wp--preset--color--accent);
display: inline-block;
}
/* Bullet card: more refined treatment */
.service-bullets-card {
border-left: 3px solid var(--wp--preset--color--secondary) !important;
background-color: #f7f9f8 !important;
border-radius: 3px !important;
padding: var(--wp--preset--spacing--5) !important;
box-shadow: 0 1px 6px rgba(33, 72, 69, 0.06);
}
.service-bullets-card h4.wp-block-heading {
font-family: var(--wp--preset--font-family--body);
font-size: 0.875rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--wp--preset--color--secondary);
margin-block: 0 var(--wp--preset--spacing--3);
}
.service-bullets-card .wp-block-list li {
font-size: var(--wp--preset--font-size--sm);
line-height: 1.65;
color: var(--wp--preset--color--text);
margin-block-end: 0.35rem;
}
/* Services CTA band */
.services-consult-cta h2.wp-block-heading {
font-family: var(--wp--preset--font-family--heading);
font-size: var(--wp--preset--font-size--3xl) !important;
font-weight: 500;
letter-spacing: -0.01em;
}
/* Services bottom intro section: team photo cap */
.services-intro-bottom {
padding-block: var(--wp--preset--spacing--8) !important;
}
.services-intro-bottom h2.wp-block-heading {
font-family: var(--wp--preset--font-family--heading);
font-size: var(--wp--preset--font-size--3xl) !important;
font-weight: 500;
letter-spacing: -0.01em;
}
.services-intro-bottom > .wp-block-group > p {
color: rgba(255, 255, 255, 0.8) !important;
max-width: 620px;
margin-inline: auto;
}
/* ─── BIO PAGE POLISH ────────────────────────────────────────────────────── */
.bio-page-header {
background-color: #f7f9f8;
border-bottom: 3px solid var(--wp--preset--color--secondary);
padding: var(--wp--preset--spacing--7) var(--wp--preset--spacing--5) !important;
}
.bio-page-header .wp-block-columns {
align-items: flex-start;
gap: var(--wp--preset--spacing--7) !important;
}
/* Dark primary-green backdrop for cut-out headshots —
creates deliberate contrast regardless of clothing colour */
.bio-headshot {
background-color: var(--wp--preset--color--primary);
border-radius: 4px;
}
.bio-headshot img {
border-radius: 4px;
display: block;
width: 100%;
max-width: 320px;
box-shadow: 0 4px 20px rgba(33, 72, 69, 0.12);
}
/* Bio name heading */
.bio-page-header .wp-block-column h2 {
font-family: var(--wp--preset--font-family--heading);
font-size: var(--wp--preset--font-size--3xl);
font-weight: 600;
color: var(--wp--preset--color--primary);
margin-block: 0 0.2rem;
letter-spacing: -0.01em;
}
/* Bio title (role) — secondary green */
.bio-title,
.bio-page-header p.bio-title,
.bio-page-header .bio-title {
color: var(--wp--preset--color--secondary) !important;
font-family: var(--wp--preset--font-family--body);
font-size: var(--wp--preset--font-size--lg);
font-weight: 600;
margin-block: 0.1rem 1rem !important;
letter-spacing: 0.01em;
}
/* Bio contact links */
.bio-page-header .wp-block-column p a {
font-size: var(--wp--preset--font-size--sm);
font-weight: 600;
color: var(--wp--preset--color--primary);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.3rem;
}
.bio-page-header .wp-block-column p a:hover {
color: var(--wp--preset--color--secondary);
}
/* Bio body content: headings and spacing */
.site-main .wp-block-post-content h2 {
font-family: var(--wp--preset--font-family--heading);
color: var(--wp--preset--color--primary);
font-size: var(--wp--preset--font-size--2xl);
font-weight: 600;
margin-block: var(--wp--preset--spacing--6) var(--wp--preset--spacing--3);
padding-bottom: var(--wp--preset--spacing--2);
border-bottom: 1px solid var(--wp--preset--color--light-gray);
}
.site-main .wp-block-post-content h3 {
font-family: var(--wp--preset--font-family--body);
color: var(--wp--preset--color--primary);
font-size: var(--wp--preset--font-size--base);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
margin-block: var(--wp--preset--spacing--5) var(--wp--preset--spacing--2);
}
/* ─── BIO PAGE HERO v2 (floating-photo design) ──────────────────────────── */
/*
* The hero is a full-width dark-green group containing a columns block.
* The left column holds the cut-out headshot; the right holds name/role/contact.
* The image uses margin-bottom: -110px to bleed below the green section.
* The content section immediately below gets matching padding-top to compensate.
*/
.bio-hero {
overflow: visible !important;
position: relative;
z-index: 1;
}
/* Columns: flex-end so the photo column anchors to the bottom */
.bio-hero .wp-block-columns {
align-items: flex-end !important;
min-height: 400px;
gap: 0 !important;
margin-block: 0 !important;
}
/* Photo column — flush, no padding */
.bio-hero-photo-col {
padding: 0 !important;
overflow: visible !important;
align-self: flex-end !important;
}
.bio-hero-photo-col .wp-block-image {
margin: 0 !important;
line-height: 0;
}
/* The bleed: image hangs 110px below the green section */
.bio-hero-photo-col .wp-block-image img {
display: block;
width: 100%;
max-width: 100%;
margin-bottom: -110px;
position: relative;
z-index: 5;
box-shadow: none !important;
border-radius: 0 !important;
}
/* Info column — vertically centred in the hero, generous padding */
.bio-hero-info-col {
align-self: center !important;
padding-top: var(--wp--preset--spacing--8) !important;
padding-bottom: var(--wp--preset--spacing--8) !important;
padding-right: var(--wp--preset--spacing--7) !important;
padding-left: var(--wp--preset--spacing--5) !important;
}
/* Name — large white serif; suppress legacy h2 border-bottom */
.bio-hero-name.wp-block-heading {
color: #ffffff !important;
margin-block: 0 0.3rem !important;
line-height: 1.1 !important;
border-bottom: none !important;
padding-bottom: 0 !important;
}
/* Role — secondary green on dark background */
.bio-hero-role-text {
color: var(--wp--preset--color--secondary) !important;
margin-block: 0 1.75rem !important;
}
/* Contact link row */
.bio-hero-contact-row {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 2.5rem;
align-items: center;
}
.bio-hero-contact-row a {
color: rgba(255, 255, 255, 0.85) !important;
text-decoration: none !important;
font-size: var(--wp--preset--font-size--sm) !important;
font-weight: 500 !important;
display: inline-flex;
align-items: center;
gap: 0.45rem;
transition: color 0.15s;
}
.bio-hero-contact-row a:hover {
color: #ffffff !important;
}
.bio-hero-contact-row svg {
flex-shrink: 0;
opacity: 0.75;
}
/* Content area below hero: top padding clears the 110px photo bleed */
.bio-content-area {
padding-top: calc(var(--wp--preset--spacing--8) + 110px) !important;
}
/* ── Mobile: stack columns, remove bleed ── */
@media (max-width: 599px) {
.bio-hero .wp-block-columns {
flex-direction: column !important;
min-height: auto !important;
}
.bio-hero-photo-col {
width: 100% !important;
max-width: 280px;
margin-inline: auto;
}
.bio-hero-photo-col .wp-block-image img {
margin-bottom: 0 !important;
max-height: 280px;
object-fit: contain;
object-position: bottom center;
}
.bio-hero-info-col {
padding: var(--wp--preset--spacing--6) !important;
align-self: auto !important;
}
.bio-content-area {
padding-top: var(--wp--preset--spacing--7) !important;
}
}
/* ─── BIO PAGE SECTIONS (rebuilt blocks) ────────────────────────────────── */
/* Eyebrow h2 inside bio sections — suppress the legacy border-bottom rule */
.bio-section h2.wp-block-heading {
border-bottom: none !important;
padding-bottom: 0 !important;
margin-block-start: 0 !important;
}
/* Eyebrow h3 inside bio credential section — suppress legacy h3 override */
.bio-credentials h3.wp-block-heading {
margin-block-start: 0 !important;
}
/* Credential lists — tighter, no left padding on mobile */
.bio-credential-list,
.bio-publications-list,
.bio-affiliations-list {
margin-block: 0;
padding-inline-start: 1.25rem;
}
.bio-credential-list li,
.bio-publications-list li,
.bio-affiliations-list li {
margin-block-end: 0.5rem;
font-size: var(--wp--preset--font-size--sm);
line-height: 1.6;
}
/* Bio CTA footer: subtle border-top */
.bio-cta-footer {
border-top: 1px solid var(--wp--preset--color--light-gray);
}
/* ─── ABOUT US POLISH ────────────────────────────────────────────────────── */
/* ── about-page-hero overlay ───────────────────────────────────────────────
The rebuilt About hero uses class "about-page-hero"; the dimRatio:55 block
attribute controls opacity automatically via has-background-dim-55.
Explicit rule kept here so future edits are easy to find.
──────────────────────────────────────────────────────────────────────── */
.about-page-hero .wp-block-cover__background.has-background-dim {
opacity: 0.55;
}
/* About hero: crop lower-centre to keep Adirondack chairs in frame */
.about-page-hero .wp-block-cover__image-background {
object-position: center 62%;
}
/* ── section-about-intro (WHO WE ARE — 2-col) ─────────────────────────────── */
.section-about-intro .wp-block-columns {
align-items: center;
}
/* Pull quote between paragraphs */
.about-pull-quote {
margin: var(--wp--preset--spacing--5) 0;
padding: var(--wp--preset--spacing--4) var(--wp--preset--spacing--5);
border-left: 3px solid var(--wp--preset--color--secondary);
background-color: rgba(33, 72, 69, 0.04);
border-radius: 0 4px 4px 0;
font-family: var(--wp--preset--font-family--heading);
font-size: var(--wp--preset--font-size--lg);
font-style: italic;
line-height: 1.6;
color: var(--wp--preset--color--primary);
}
/* ── section-about-team (OUR TEAM — light-bg 3-col card grid) ──────────────── */
/* Cards stretch to equal height within their column */
.section-about-team .wp-block-column {
display: flex;
flex-direction: column;
}
.section-about-team .team-card.service-preview-card {
flex: 1;
display: flex;
flex-direction: column;
}
/* Team photo: constrained, object-fit cover for portrait shots */
.section-about-team .team-card-photo {
margin-bottom: 0;
}
.section-about-team .team-card-photo img {
width: 100%;
height: 220px;
object-fit: cover;
object-position: center 30% !important; /* 40% slightly above mid — reveals hair tops without showing excessive dark headroom */
display: block;
border-radius: 3px 3px 0 0;
}
/* Push the "View Full Bio" link to the bottom of each card */
.section-about-team .service-card-link {
margin-top: auto !important;
}
/* Team card columns — tighter gap + smaller name heading on desktop.
Gap: 4rem → 1.5rem recovers space across the 3-col grid.
h3: 2rem → 1.125rem prevents long names like BISCHOFFBERGER from wrapping.
Mobile stacks full-width so neither rule applies there. */
@media (min-width: 783px) {
.section-about-team .wp-block-columns {
gap: var(--wp--preset--spacing--5) !important;
}
.section-about-team .wp-block-column h3.wp-block-heading {
font-size: 1rem !important;
line-height: 1.25;
}
}
/* Team card title label (role) */
.section-about-team .team-card-title {
text-transform: uppercase;
}
/* ── section-about-values (OUR VALUES — white 2-col) ──────────────────────── */
/* New class aliases — same rules as legacy .about-values-section */
.section-about-values ul {
padding-inline-start: 1.4rem;
margin-block: var(--wp--preset--spacing--3) var(--wp--preset--spacing--5);
}
.section-about-values ul li {
font-size: var(--wp--preset--font-size--base);
line-height: 1.7;
color: var(--wp--preset--color--text);
margin-block-end: 0.5rem;
padding-inline-start: 0.25rem;
}
.section-about-values ul li strong {
color: var(--wp--preset--color--primary);
}
.section-about-values p {
font-size: var(--wp--preset--font-size--base);
line-height: 1.75;
color: var(--wp--preset--color--text);
}
/* Vertical alignment: values list column starts at top */
.section-about-values .wp-block-columns {
align-items: flex-start;
}
/* About intro: better column balance (legacy class kept) */
.about-intro-section .wp-block-columns {
align-items: flex-start !important;
}
.about-intro-section .wp-block-column p {
font-size: var(--wp--preset--font-size--lg);
line-height: 1.75;
color: var(--wp--preset--color--text);
}
/* Group photo: shadow and polish — About page and home page Why Us section */
.about-group-photo img,
.team-group-photo img {
border-radius: 6px;
box-shadow: 0 8px 32px rgba(33, 72, 69, 0.14);
display: block;
width: 100%;
}
/* ── About page: heading typography fix ───────────────────────────────────────
Root cause: WP converts slug "4xl" → CSS custom property "--wp--preset--font-size--4-xl"
(hyphenated). Block inline styles and theme.json element rules reference the
non-hyphenated form ("--wp--preset--font-size--4xl") which is undefined → UA defaults.
These page-scoped rules reference the DEFINED hyphenated form directly.
──────────────────────────────────────────────────────────────────────────── */
.about-page-header h2 {
font-family: 'Frank Ruhl Libre', serif;
font-size: var(--wp--preset--font-size--4-xl);
line-height: 1.2;
color: #ffffff !important;
}
/* Values section: style the raw HTML headings */
.about-values-section h2 {
font-family: var(--wp--preset--font-family--heading);
font-size: var(--wp--preset--font-size--4-xl);
line-height: 1.2;
color: var(--wp--preset--color--primary);
margin-block: 0 var(--wp--preset--spacing--4);
padding-bottom: var(--wp--preset--spacing--3);
border-bottom: 2px solid var(--wp--preset--color--secondary);
}
.about-team-section h2,
.section-about-cta h2 {
font-size: var(--wp--preset--font-size--4-xl);
line-height: 1.2;
}
.about-values-section h3 {
font-family: var(--wp--preset--font-family--heading);
font-size: var(--wp--preset--font-size--lg);
font-weight: 500;
color: var(--wp--preset--color--text-dark);
font-style: italic;
margin-block: var(--wp--preset--spacing--5) var(--wp--preset--spacing--4);
}
.about-values-section h4 {
font-family: var(--wp--preset--font-family--heading);
font-size: var(--wp--preset--font-size--lg);
font-weight: 400;
color: var(--wp--preset--color--primary);
font-style: italic;
margin-block: var(--wp--preset--spacing--5) var(--wp--preset--spacing--4);
padding: var(--wp--preset--spacing--4) var(--wp--preset--spacing--5);
border-left: 3px solid var(--wp--preset--color--secondary);
background-color: rgba(82, 187, 49, 0.05);
border-radius: 0 4px 4px 0;
}
.about-values-section ul {
padding-inline-start: 1.4rem;
margin-block: var(--wp--preset--spacing--3) var(--wp--preset--spacing--5);
}
.about-values-section ul li {
font-size: var(--wp--preset--font-size--base);
line-height: 1.7;
color: var(--wp--preset--color--text);
margin-block-end: 0.5rem;
padding-inline-start: 0.25rem;
}
.about-values-section ul li strong {
color: var(--wp--preset--color--primary);
}
.about-values-section p {
font-size: var(--wp--preset--font-size--base);
line-height: 1.75;
color: var(--wp--preset--color--text);
}
/* ─── CONTACT PAGE POLISH ────────────────────────────────────────────────── */
.contact-cards-section {
padding-block: var(--wp--preset--spacing--8) !important;
}
/* Contact card: refined */
.contact-info-card {
background-color: #ffffff !important;
border: 1px solid var(--wp--preset--color--light-gray) !important;
border-top: 3px solid var(--wp--preset--color--secondary) !important;
border-radius: 4px !important;
padding: var(--wp--preset--spacing--6) !important;
box-shadow: 0 2px 12px rgba(33, 72, 69, 0.07);
transition: box-shadow 0.2s ease;
}
.contact-info-card:hover {
box-shadow: 0 4px 20px rgba(33, 72, 69, 0.12);
}
.contact-info-card h4.wp-block-heading {
font-family: var(--wp--preset--font-family--body);
font-size: 0.875rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--wp--preset--color--secondary);
margin-block: 0 0.75rem;
}
.contact-info-card p {
font-size: var(--wp--preset--font-size--base);
line-height: 1.65;
color: var(--wp--preset--color--text-dark);
margin: 0;
}
.contact-info-card a {
color: var(--wp--preset--color--primary);
font-weight: 600;
text-decoration: none;
}
.contact-info-card a:hover {
color: var(--wp--preset--color--secondary);
}
/* Contact map embed wrapper */
.contact-map-wrapper {
border-radius: 6px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(33, 72, 69, 0.1);
line-height: 0;
}
.contact-map-wrapper iframe {
display: block;
border: 0;
width: 100%;
height: 400px;
}
/* ─── CTA SECTION (global) ───────────────────────────────────────────────── */
.section-contact-cta h2.wp-block-heading {
font-family: var(--wp--preset--font-family--heading);
font-size: var(--wp--preset--font-size--3xl) !important;
font-weight: 500;
letter-spacing: -0.01em;
color: #ffffff;
}
.section-contact-cta p {
color: rgba(255, 255, 255, 0.82) !important;
font-size: var(--wp--preset--font-size--lg) !important;
max-width: 560px;
margin-inline: auto;
}
/* ─── CONSULTATION / FORM PAGE ───────────────────────────────────────────── */
.fluent-form-wrapper {
background-color: #f7f9f8;
border-radius: 6px;
padding: var(--wp--preset--spacing--7);
border: 1px solid var(--wp--preset--color--light-gray);
}
.fluent-form-wrapper .ff-el-group label {
font-family: var(--wp--preset--font-family--body);
font-size: var(--wp--preset--font-size--sm);
font-weight: 600;
color: var(--wp--preset--color--primary);
}
.fluent-form-wrapper .ff-el-form-control {
border-color: var(--wp--preset--color--light-gray) !important;
border-radius: 3px !important;
}
.fluent-form-wrapper .ff-el-form-control:focus {
border-color: var(--wp--preset--color--secondary) !important;
/* outline: none removed — see accessibility remediation block */
box-shadow: 0 0 0 3px rgba(82, 187, 49, 0.25);
}
/* ─── INTERIOR POST CONTENT TYPOGRAPHY ───────────────────────────────────── */
.wp-block-post-content p {
line-height: 1.75;
color: var(--wp--preset--color--text);
font-size: var(--wp--preset--font-size--base);
}
.wp-block-post-content ul,
.wp-block-post-content ol {
padding-inline-start: 1.5rem;
margin-block: var(--wp--preset--spacing--3) var(--wp--preset--spacing--4);
}
.wp-block-post-content li {
line-height: 1.7;
margin-block-end: 0.4rem;
}
/* ─── FOOTER POLISH ──────────────────────────────────────────────────────── */
/* Footer logo: larger, original brand colours (no inversion filter) */
.site-footer .wp-block-site-logo img {
max-height: 110px !important;
width: auto !important;
}
/* Footer column headings */
.footer-col-heading {
color: #ffffff !important;
font-family: var(--wp--preset--font-family--body) !important;
font-size: var(--wp--preset--font-size--sm) !important;
font-weight: 700 !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
margin-top: 0 !important;
margin-bottom: var(--wp--preset--spacing--3) !important;
}
/* Footer nav links: brighter and with accent hover */
.footer-nav-list a {
color: rgba(255, 255, 255, 0.8) !important;
}
.footer-nav-list a:hover {
color: var(--wp--preset--color--accent) !important;
}
/* Footer nav list items: cleaner spacing */
.footer-nav-list li {
line-height: 1.5;
}
/* ── Social icons ────────────────────────────────────────────── */
.footer-social-row {
display: flex;
gap: 0.625rem;
margin-top: var(--wp--preset--spacing--4);
}
.footer-social-link {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.12);
color: #ffffff;
text-decoration: none;
transition: background-color 0.18s ease, color 0.18s ease;
}
.footer-social-link:hover {
background-color: var(--wp--preset--color--accent);
color: var(--wp--preset--color--primary);
}
/* ── Contact icon-box items ──────────────────────────────────── */
.footer-contact-items {
display: flex;
flex-direction: column;
gap: var(--wp--preset--spacing--4);
}
.footer-contact-item {
display: flex;
gap: 0.875rem;
align-items: flex-start;
}
.footer-contact-icon-box {
flex-shrink: 0;
width: 38px;
height: 38px;
background-color: var(--wp--preset--color--accent);
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
color: var(--wp--preset--color--primary);
}
.footer-contact-detail {
display: flex;
flex-direction: column;
gap: 0.2rem;
}
.footer-contact-label {
font-size: var(--wp--preset--font-size--xs);
color: rgba(255, 255, 255, 0.55);
text-transform: uppercase;
letter-spacing: 0.07em;
font-weight: 600;
line-height: 1.3;
}
.footer-contact-detail a,
.footer-contact-detail address {
color: rgba(255, 255, 255, 0.85) !important;
font-style: normal;
font-size: var(--wp--preset--font-size--sm);
text-decoration: none;
line-height: 1.5;
}
.footer-contact-detail a:hover {
color: var(--wp--preset--color--accent) !important;
}
/* Footer legal links: horizontal flex with gaps + accent hover */
.footer-legal-links {
gap: 1.5rem;
}
.footer-legal-links a:hover {
color: var(--wp--preset--color--accent) !important;
}
/* ============================================================
CONTACT PAGE
============================================================ */
/* Hero */
.contact-hero .wp-block-cover__inner-container {
padding-left: var(--wp--preset--spacing--7);
padding-right: var(--wp--preset--spacing--7);
}
.contact-hero h1.wp-block-heading {
font-size: var(--wp--preset--font-size--5xl);
color: #fff;
line-height: 1.1;
letter-spacing: -0.02em;
margin-bottom: var(--wp--preset--spacing--3);
}
.contact-hero .contact-hero-sub {
font-size: var(--wp--preset--font-size--lg);
color: rgba(255, 255, 255, 0.85);
max-width: 480px;
margin: 0;
}
/* Main two-column section */
.contact-main-section {
margin-top: 0 !important;
}
.contact-main-section > .wp-block-columns {
align-items: flex-start;
}
/* Left info column */
.contact-info-col .contact-eyebrow {
font-size: var(--wp--preset--font-size--xs);
font-weight: 700;
letter-spacing: 0.12em;
color: var(--wp--preset--color--secondary);
text-transform: uppercase;
margin: 0 0 var(--wp--preset--spacing--3) 0;
}
.contact-info-col h2.wp-block-heading {
font-size: var(--wp--preset--font-size--3xl);
color: var(--wp--preset--color--primary);
margin-top: 0;
margin-bottom: var(--wp--preset--spacing--4);
}
.contact-info-col .contact-intro-text {
font-size: var(--wp--preset--font-size--base);
color: #444;
line-height: 1.7;
margin: 0 0 var(--wp--preset--spacing--6) 0;
}
/* Contact icon items */
.lhl-contact-items {
display: flex;
flex-direction: column;
gap: var(--wp--preset--spacing--4);
margin-bottom: var(--wp--preset--spacing--6);
}
.lhl-contact-item {
display: flex;
align-items: flex-start;
gap: 1rem;
}
.lhl-contact-icon-box {
width: 42px;
height: 42px;
min-width: 42px;
background: var(--wp--preset--color--primary);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
}
.lhl-contact-detail {
display: flex;
flex-direction: column;
gap: 0.15rem;
}
.lhl-contact-label {
font-size: var(--wp--preset--font-size--xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--wp--preset--color--secondary);
}
.lhl-contact-value {
font-size: var(--wp--preset--font-size--base);
color: var(--wp--preset--color--primary);
font-weight: 500;
text-decoration: none;
font-style: normal;
line-height: 1.5;
}
.lhl-contact-value a {
color: var(--wp--preset--color--primary);
text-decoration: none;
font-weight: 500;
}
.lhl-contact-value a:hover {
color: var(--wp--preset--color--secondary);
}
/* Hours block */
.contact-hours-block {
background: var(--wp--preset--color--light-bg);
border-left: 3px solid var(--wp--preset--color--secondary);
border-radius: 0 8px 8px 0;
padding: 1.1rem 1.25rem;
}
.contact-hours-label {
font-size: var(--wp--preset--font-size--xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--wp--preset--color--secondary);
margin-bottom: 0.3rem;
}
.contact-hours-value {
font-size: var(--wp--preset--font-size--base);
font-weight: 600;
color: var(--wp--preset--color--primary);
margin-bottom: 0.15rem;
}
.contact-hours-note {
font-size: var(--wp--preset--font-size--xs);
color: #666;
}
/* Indent the Mon–Thu time line to align with the time in "Friday: 9:00 am…" */
.contact-hours-indented {
padding-left: 1rem;
}
/* Right form column */
.contact-form-col {
background: #fff;
border-radius: 12px;
padding: var(--wp--preset--spacing--7);
box-shadow: 0 4px 24px rgba(33, 72, 69, 0.08);
}
.contact-form-col .form-eyebrow {
font-size: var(--wp--preset--font-size--xs);
font-weight: 700;
letter-spacing: 0.12em;
color: var(--wp--preset--color--secondary);
text-transform: uppercase;
margin: 0 0 var(--wp--preset--spacing--3) 0;
}
.contact-form-col h2.wp-block-heading {
font-size: var(--wp--preset--font-size--2xl);
color: var(--wp--preset--color--primary);
margin-top: 0;
margin-bottom: var(--wp--preset--spacing--5);
}
/* Fluent Forms overrides inside contact form col */
.contact-form-col .ff-el-group {
margin-bottom: 1.1rem !important;
}
.contact-form-col .ff-el-form-control {
border: 1.5px solid #d6dce8 !important;
border-radius: 6px !important;
padding: 0.7rem 0.9rem !important;
font-size: var(--wp--preset--font-size--base) !important;
color: #222 !important;
background: #fafbfc !important;
transition: border-color 0.18s ease, box-shadow 0.18s ease !important;
}
.contact-form-col .ff-el-form-control:focus {
border-color: var(--wp--preset--color--secondary) !important;
box-shadow: 0 0 0 3px rgba(82, 187, 49, 0.25) !important;
/* outline: none removed — see accessibility remediation block */
background: #fff !important;
}
.contact-form-col .ff-el-form-control::placeholder {
color: #999 !important;
}
.contact-form-col .ff-el-input--label label {
font-weight: 600 !important;
font-size: var(--wp--preset--font-size--sm) !important;
color: var(--wp--preset--color--primary) !important;
margin-bottom: 0.35rem !important;
}
.contact-form-col .ff_submit_btn_wrapper .ff-btn {
background: var(--wp--preset--color--secondary) !important;
color: var(--wp--preset--color--primary) !important;
font-weight: 700 !important;
font-size: var(--wp--preset--font-size--base) !important;
letter-spacing: 0.03em !important;
border: none !important;
border-radius: 6px !important;
padding: 0.8rem 2rem !important;
cursor: pointer !important;
transition: background 0.2s ease, transform 0.15s ease !important;
width: 100% !important;
}
.contact-form-col .ff_submit_btn_wrapper .ff-btn:hover {
background: var(--wp--preset--color--accent) !important;
transform: translateY(-1px) !important;
}
/* What Happens Next card */
.contact-what-to-expect {
margin-top: var(--wp--preset--spacing--6);
background: var(--wp--preset--color--primary);
border-radius: 10px;
padding: 1.4rem 1.5rem 1.5rem;
color: #fff;
}
.contact-wte-heading {
font-family: var(--wp--preset--font-family--montserrat);
font-size: var(--wp--preset--font-size--base);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--wp--preset--color--accent) !important;
margin: 0 0 0.85rem 0;
}
.contact-wte-list {
margin: 0;
padding-left: 1.3rem;
display: flex;
flex-direction: column;
gap: 0.65rem;
}
.contact-wte-list li {
font-size: var(--wp--preset--font-size--sm);
color: rgba(255, 255, 255, 0.88);
line-height: 1.6;
}
/* Legal disclaimer */
.contact-legal-disclaimer {
font-size: var(--wp--preset--font-size--xs);
color: #888;
line-height: 1.6;
margin-top: var(--wp--preset--spacing--4);
margin-bottom: 0;
border-top: 1px solid #eaecf0;
padding-top: var(--wp--preset--spacing--4);
}
/* Map section */
.contact-map-section {
margin-top: 0 !important;
}
.contact-map-section .map-eyebrow {
font-size: var(--wp--preset--font-size--xs);
font-weight: 700;
letter-spacing: 0.12em;
color: var(--wp--preset--color--secondary);
text-transform: uppercase;
margin: 0 0 var(--wp--preset--spacing--3) 0;
}
.contact-map-section h2.wp-block-heading {
font-size: var(--wp--preset--font-size--2xl);
color: var(--wp--preset--color--primary);
margin-top: 0;
margin-bottom: var(--wp--preset--spacing--5);
}
.contact-map-wrapper {
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(33, 72, 69, 0.1);
margin-bottom: var(--wp--preset--spacing--5);
}
.contact-map-wrapper iframe {
display: block;
width: 100%;
border: 0;
}
.contact-map-address {
font-size: var(--wp--preset--font-size--base);
color: var(--wp--preset--color--primary);
font-style: normal;
line-height: 1.7;
margin: 0;
}
.contact-map-address a {
color: var(--wp--preset--color--secondary);
font-weight: 600;
text-decoration: none;
}
.contact-map-address a:hover {
text-decoration: underline;
}
/* ============================================================
EYEBROW LABELS — site-wide font normalization
Forces Montserrat on all letter-spaced label elements
regardless of whether they're or
blocks.
============================================================ */
[style*="letter-spacing:0.12em"],
[style*="letter-spacing:0.14em"],
[style*="letter-spacing:0.1em"] {
font-family: var(--wp--preset--font-family--heading-display) !important;
}
/* ─── MOBILE BREAKPOINT ADDITIONS ────────────────────────────────────────── */
@media (max-width: 782px) {
/* Services anchor nav: horizontal scroll */
.services-section-nav .services-nav-inner {
justify-content: flex-start;
padding-inline: var(--wp--preset--spacing--4);
}
/* About nav: only 3 tabs — centre them on mobile */
.about-section-nav .services-nav-inner {
justify-content: center;
}
.services-section-nav .services-nav-item {
font-size: 0.8rem;
padding-inline: 0.85rem;
}
/* Header right: hide consultation button, show phone only */
.header-right .wp-block-buttons {
display: none;
}
.header-phone {
display: block !important;
}
/* Bio page header: stack columns */
.bio-page-header {
padding: var(--wp--preset--spacing--5) var(--wp--preset--spacing--4) !important;
}
/* Bio credentials: stack 3 columns to 1 on mobile */
.bio-credentials .wp-block-columns {
flex-direction: column;
}
.bio-credentials .wp-block-column {
flex-basis: 100% !important;
width: 100% !important;
}
/* About values (legacy + new class) */
.about-values-section,
.section-about-values {
padding-inline: var(--wp--preset--spacing--4) !important;
}
/* About intro — stack columns on mobile */
.section-about-intro .wp-block-columns {
flex-direction: column;
}
.section-about-intro .wp-block-column {
flex-basis: 100% !important;
width: 100% !important;
}
/* Team cards — stack to single column on mobile */
.section-about-team .wp-block-columns {
flex-direction: column;
}
.section-about-team .wp-block-column {
width: 100% !important;
flex: unset !important;
}
/* Team card photo height on mobile.
40% Y-position: slightly above the image midpoint, which keeps full
heads in frame for studio shots with tight headroom, without returning
to "top center" that shows excessive dark background above subjects. */
.section-about-team .team-card-photo img {
height: 240px;
object-position: center 30% !important;
}
/* Contact map height on mobile */
.contact-map-wrapper iframe {
height: 260px;
}
/* CTA section heading */
.section-contact-cta h2.wp-block-heading {
font-size: var(--wp--preset--font-size--2xl) !important;
}
/* Service preview cards — stack to single column on mobile */
.section-services .wp-block-columns {
flex-direction: column;
}
.section-services .wp-block-column {
width: 100% !important;
flex: unset !important;
}
/* Contact page — stack columns */
.contact-main-section .wp-block-columns {
flex-direction: column;
}
.contact-main-section .wp-block-column {
flex-basis: 100% !important;
width: 100% !important;
}
.contact-form-col {
padding: var(--wp--preset--spacing--5) var(--wp--preset--spacing--4);
}
.contact-hero h1.wp-block-heading {
font-size: var(--wp--preset--font-size--3xl);
}
.contact-hero .wp-block-cover__inner-container {
padding-left: var(--wp--preset--spacing--4);
padding-right: var(--wp--preset--spacing--4);
}
}
/* ==========================================================================
ACCESSIBILITY REMEDIATION — 2026-04-04
Fixes for A-001, A-003, A-005, A-006, A-007, A-011, A-012
========================================================================== */
/* ─── SKIP NAVIGATION LINK (A-007) ─────────────────────────────────────── */
/* Screen-reader-only utility — hides visually but keeps in a11y tree */
.screen-reader-text {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.skip-to-main {
position: absolute;
top: -100px;
left: var(--wp--preset--spacing--4, 1rem);
z-index: 9999;
padding: 0.75rem 1.25rem;
background: var(--wp--preset--color--primary);
color: #ffffff;
font-family: var(--wp--preset--font-family--body);
font-size: var(--wp--preset--font-size--sm);
font-weight: 700;
text-decoration: none;
border-radius: 0 0 4px 4px;
border: 2px solid var(--wp--preset--color--accent);
transition: top 0.15s ease;
}
.skip-to-main:focus,
.skip-to-main:focus-visible {
top: 0;
outline: 3px solid var(--wp--preset--color--accent);
outline-offset: 2px;
}
/* ─── KEYBOARD FOCUS INDICATORS (A-001) ─────────────────────────────────── */
/*
* Zero `:focus-visible` rules existed before this remediation pass.
* All interactive elements now receive a visible 3px outline on keyboard focus.
* `:focus-visible` targets keyboard-initiated focus only — mouse users are
* unaffected. Two variants: dark outline (light backgrounds), mint outline
* (dark/colored backgrounds). High-contrast mode: `forced-colors` block below.
*/
/* Default: dark green outline — visible on white and light-gray backgrounds */
:focus-visible {
outline: 3px solid var(--wp--preset--color--primary);
outline-offset: 3px;
border-radius: 2px;
}
/* Dark-background focus ring: mint (#C4EA9E) visible on dark green/hero overlays */
.site-header a:focus-visible,
.site-header button:focus-visible,
.site-footer a:focus-visible,
.site-footer button:focus-visible,
.section-contact-cta a:focus-visible,
.section-contact-cta button:focus-visible,
.home-hero-cover a:focus-visible,
.home-hero-cover button:focus-visible,
.page-hero a:focus-visible,
.page-hero button:focus-visible,
.bio-hero a:focus-visible,
.bio-hero button:focus-visible,
.services-page-header a:focus-visible,
.services-page-header button:focus-visible {
outline: 3px solid var(--wp--preset--color--accent);
outline-offset: 3px;
border-radius: 2px;
}
/* Skip link already handled above */
/* High-contrast mode support */
@media (forced-colors: active) {
:focus-visible {
outline: 3px solid ButtonText;
outline-offset: 3px;
}
}
/* ─── FORM FOCUS — replace outline:none with accessible version ─────────── */
/*
* Previously: outline:none on .ff-el-form-control:focus
* Now: keep the green box-shadow (which IS visible) but add an outline as
* fallback for high-contrast mode, and increase shadow opacity for normal mode.
*/
.fluent-form-wrapper .ff-el-form-control:focus,
.contact-form-col .ff-el-form-control:focus {
/* Remove the suppressed outline override — :focus-visible rule above applies */
outline: 2px solid var(--wp--preset--color--secondary) !important;
outline-offset: 0 !important;
box-shadow: 0 0 0 3px rgba(82, 187, 49, 0.25) !important;
}
/* ─── CONTRAST FIXES ────────────────────────────────────────────────────── */
/* A-004: Eyebrow labels on light backgrounds — bright green (#52BB31) fails
contrast on #E5E8EF (~2.8:1). Change to dark green (#214845) = ~11.8:1.
Targets the "HOW WE HELP" / "WHY CLIENTS CHOOSE US" uppercase eyebrow h2
blocks that sit inside light-background section wrappers. */
.section-services h2,
.section-why-us h2 {
color: var(--wp--preset--color--primary) !important;
}
/* A-005 / header design: CTA button default and hover states.
Default: dark green bg (#214845) + white text = ~12:1 ✓
Hover: mint bg (#C4EA9E) + dark green text = ~8.4:1 ✓
Both states pass WCAG 2.1 AA. Transition keeps the change feeling smooth. */
.site-header-inner .header-cta .wp-block-button__link,
.header-cta .wp-block-button__link {
background-color: var(--wp--preset--color--primary) !important;
color: #ffffff !important;
transition: background-color 0.18s ease, color 0.18s ease;
}
.site-header-inner .header-cta .wp-block-button__link:hover,
.header-cta .wp-block-button__link:hover {
background-color: var(--wp--preset--color--accent) !important;
color: var(--wp--preset--color--primary) !important;
}
/* A-012: Footer bottom bar copyright — rgba(255,255,255,0.5) on dark green
fails at ~3.2:1 for 12px text (xs). Raise to 0.75 = ~5.8:1 (passes AA). */
.footer-bottom-bar > p,
.footer-bottom-bar .wp-block-paragraph {
color: rgba(255, 255, 255, 0.75) !important;
}
/* Also raise legal link opacity to match — was 0.5 */
.footer-legal-links a {
color: rgba(255, 255, 255, 0.75);
}
/* ─── BIO PAGE HEADER H1 SIZING (A-002 support) ────────────────────────── */
/*
* Bio name headings were h2 — now corrected to h1 in post content.
* These CSS rules carry over from the h2 targeting and now apply to h1.
* Explicit re-declaration ensures visual treatment is unchanged.
*/
.bio-page-header .wp-block-column h1,
.bio-hero-info-col h1.bio-hero-name {
margin-block-end: 0.25rem;
color: var(--wp--preset--color--primary);
font-size: var(--wp--preset--font-size--5xl);
line-height: 1.1;
letter-spacing: -0.01em;
}
/* ==========================================================================
MOBILE UI SWEEP — 2026-04-05
Fixes: header balance · edge-to-edge text · hero layout · footer order ·
section spacing · Why Us stacking · CTA buttons · service card padding.
========================================================================== */
/* ─── 1. HEADER: clean Logo | [space] | Hamburger layout ──────────────────
Hiding header-right on mobile removes phone + contact button.
Phone is in the footer, hero CTA, and Contact page — always reachable.
Nav block gets margin-left:auto so the hamburger lands at the far right. */
@media (max-width: 782px) {
.header-right {
display: none !important;
}
.site-header-inner .primary-navigation {
margin-left: auto !important;
flex-shrink: 0;
}
}
/* ─── 2. EDGE-TO-EDGE TEXT: add horizontal padding to content areas ────────
Root cause: FSE constrained layout has no side padding set in theme.json.
Fix 1 — full-bleed constrained sections (homepage sections, about sections,
bio sections, etc.): add padding-inline directly.
Fix 2 — cover block inner containers (hero sections on all pages).
Fix 3 — post content flow on interior pages. */
@media (max-width: 782px) {
/* Full-bleed constrained group blocks — covers every alignfull section */
.wp-block-group.alignfull.is-layout-constrained {
padding-inline: var(--wp--preset--spacing--5) !important;
}
/* Cover block inner containers (hero sections) */
.wp-block-cover__inner-container {
padding-inline: var(--wp--preset--spacing--5) !important;
}
/* Interior page post content */
.wp-block-post-content {
padding-inline: var(--wp--preset--spacing--5);
}
/* Alignfull blocks inside post content must break back out of post padding */
.wp-block-post-content > .alignfull {
margin-inline: calc(-1 * var(--wp--preset--spacing--5));
width: calc(100% + 2 * var(--wp--preset--spacing--5));
}
}
/* ─── 3. HERO SECTION: mobile layout ───────────────────────────────────────
Increase min-height for more visual presence, reduce inner vertical padding
so the headline has room to breathe. Buttons stack to equal width. */
@media (max-width: 782px) {
.home-hero-cover {
min-height: 440px !important;
}
.home-hero-cover .wp-block-cover__inner-container {
padding-top: var(--wp--preset--spacing--7) !important;
padding-bottom: var(--wp--preset--spacing--7) !important;
}
.home-hero-cover .wp-block-buttons {
flex-direction: column !important;
align-items: stretch !important;
}
.home-hero-cover .wp-block-button {
width: 100%;
}
.home-hero-cover .wp-block-button__link {
width: 100% !important;
text-align: center !important;
box-sizing: border-box;
}
}
/* ─── 4. WHY US SECTION: stack columns properly ────────────────────────────
Columns have explicit flex-basis (55%/45%) that prevents WP's auto-stack. */
@media (max-width: 782px) {
.section-why-us .wp-block-columns {
flex-direction: column;
}
.section-why-us .wp-block-column {
flex-basis: 100% !important;
width: 100% !important;
}
.section-why-us .team-group-photo img {
width: 100%;
max-height: 280px;
object-fit: cover;
object-position: center 40%; /* was top center — showed too much dark background above heads */
}
}
/* ─── 5. CONTACT CTA SECTION: stack and centre buttons ───────────────────── */
@media (max-width: 600px) {
.section-contact-cta .wp-block-buttons {
flex-direction: column !important;
align-items: center !important;
}
.section-contact-cta .wp-block-button {
width: 100%;
max-width: 300px;
}
.section-contact-cta .wp-block-button__link {
width: 100% !important;
text-align: center !important;
}
}
/* ─── 6. SECTION VERTICAL SPACING: reduce on mobile ───────────────────────
Sections have inline padding-top/bottom of spacing|7–8 (3–4rem).
Reduce to spacing|6 (2rem) to stop sections from feeling cavernous. */
@media (max-width: 782px) {
.section-services,
.section-why-us,
.section-contact-cta {
padding-block: var(--wp--preset--spacing--6) !important;
}
}
/* ─── 7. SERVICE PREVIEW CARDS: tighter inner padding on mobile ─────────── */
@media (max-width: 600px) {
.section-services .service-preview-card {
padding: var(--wp--preset--spacing--5) !important;
}
}
/* ─── SOCIAL LINKS — hidden until firm accounts are ready ───────────────────
To re-enable: delete this one line. */
.footer-social-link { display: none !important; }
/* ─── CLIENT LOGIN — hidden until Clio integration is ready ─────────────────
Do not remove this block — the nav link is preserved in header.html.
To re-enable: delete these three lines. */
.wp-block-navigation a[href*="clients.clio.com"] { display: none !important; }
.wp-block-navigation a[href*="clients.clio.com"] + .wp-block-navigation-item__content { display: none !important; }
.wp-block-navigation-item:has(a[href*="clients.clio.com"]) { display: none !important; }
/* ─── 8. FOOTER COLUMN ORDER: Contact second on mobile ─────────────────────
Default DOM order: Brand → Services → Firm → Contact.
Mobile order: Brand → Contact → Services → Firm.
(Contact has the phone/email/address — most actionable info on mobile.) */
@media (max-width: 782px) {
.site-footer-inner .footer-brand-col { order: 1; }
.site-footer-inner .footer-contact-col { order: 2; }
.site-footer-inner .wp-block-columns > .wp-block-column:nth-child(2) { order: 3; }
.site-footer-inner .wp-block-columns > .wp-block-column:nth-child(3) { order: 4; }
}