defaults to `display: block` with no rule to stop it,
so without this a desktop viewport would render the panel the moment
dg-header.js appends it. dg-header.js also guards its own
`panel.style.display = 'block'` behind a matchMedia(980px) check —
belt and suspenders, since an inline style would otherwise beat this
rule regardless of viewport. */
display: none;
}
@media (max-width: 980px) {
.dg-header .et_mobile_menu {
display: none !important;
}
/* The real header-bar INQUIRE button stays hidden on mobile — the
`.dg-mobile-nav__cta` link inside the custom panel below is built
from its href/label in dg-header.js, so leaving the original visible
too would show INQUIRE twice. */
.dg-header .et_pb_button_module_wrapper a.et_pb_button {
display: none !important;
}
/* Divi's own phone-breakpoint responsive column widths (its per-
instance `.et_flex_column_24_24_phone` etc., generated by the Theme
Builder's row/column width settings for the "Phone" breakpoint) stack
the header's 3 columns to 100% width each below ~767px — confirmed
directly: logo, nav/hamburger, and button columns each rendered full-
width and stacked vertically, which pushed the hamburger to x:535 on
a 485px-wide viewport, off-screen and untappable. The header row was
never meant to reflow like a normal content row; forcing it back to a
single non-wrapping row (content-sized columns) keeps the hamburger
in place at every width down to the narrowest phones, matching the
reference (which never stacks its header at any width). */
.dg-header .et_pb_row {
flex-wrap: nowrap !important;
justify-content: space-between !important;
}
.dg-header .et_pb_row > .et_pb_column {
width: auto !important;
flex: 0 0 auto !important;
}
/* Column 3 (the header-bar INQUIRE button) has nothing left to show —
its button is already hidden above — so drop the column too instead
of leaving an empty 0-width flex item in the row. */
.dg-header .et_pb_row > .et_pb_column:nth-child(3) {
display: none !important;
}
/* The hamburger's column still collapses to 0 width even with the
overrides above (Divi's per-instance phone rule wins on some inner
dimension we didn't chase further), but `justify-content: space-
between` above already lands that 0-width column's own box exactly
on the row's right edge — confirmed directly (column box x matched
the row's right edge to the pixel). Positioning the hamburger
absolutely within that correctly-placed column, rather than relying
on the column's collapsed width to contain it, keeps it pinned to
the true right edge instead of overflowing off-screen.
Both wrapper divs between `.mobile_nav` and the column are
`position: relative` themselves — left alone, `position: absolute`
below would bind to the nearer of those two (whichever still has an
intrinsic width, e.g. the menu module's own fixed-width phone rule)
instead of the correctly-positioned column, landing off-center again.
Neutralizing them here makes the column the actual containing block. */
.dg-header .et_pb_menu_inner_container,
.dg-header .et_pb_menu_0_tb_header {
position: static !important;
}
.dg-header .mobile_nav {
position: absolute !important;
right: var(--gutter);
top: 50%;
transform: translateY(-50%);
margin: 0 !important;
}
.dg-mobile-nav {
width: 100%;
background: var(--paper-98);
backdrop-filter: saturate(140%) blur(10px);
-webkit-backdrop-filter: saturate(140%) blur(10px);
box-shadow: var(--shadow-md);
border-top: 1px solid var(--border-hairline);
max-height: calc(100vh - 68px);
overflow-y: auto;
opacity: 0;
transform: translateY(-8px);
transition: opacity var(--dur-base) var(--ease-out),
transform var(--dur-base) var(--ease-out);
}
.dg-mobile-nav.dg-mobile-nav--open {
opacity: 1;
transform: translateY(0);
}
.dg-mobile-nav__inner {
display: grid;
gap: 8px;
padding: 24px var(--gutter) 32px;
}
.dg-mobile-nav__link,
.dg-mobile-nav__link:visited {
font-family: var(--font-sans);
font-size: 16px;
font-weight: var(--w-medium);
color: var(--ink-900);
text-decoration: none;
border-bottom: 1px solid var(--border-soft);
padding: 10px 0;
}
.dg-mobile-nav__link--sub {
font-size: 14px;
font-weight: var(--w-regular);
color: var(--taupe);
padding: 8px 0 8px 16px;
}
.dg-mobile-nav__cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
font-family: var(--font-sans);
font-size: 13px;
font-weight: var(--w-semibold);
letter-spacing: var(--ls-caps);
text-transform: uppercase;
text-decoration: none;
line-height: 1;
color: var(--paper);
background: var(--bronze-500);
border: 1px solid transparent;
border-radius: var(--radius-sm);
padding: 14px 28px;
margin-top: 16px;
transition: background-color var(--dur-fast) var(--ease-out),
color var(--dur-fast) var(--ease-out),
border-color var(--dur-fast) var(--ease-out);
/* `.dg-mobile-nav__inner` is a CSS grid, and grid items default to
`justify-items: stretch` — that silently overrode the button's own
`display: inline-flex` and stretched it to the full row width.
The reference's CTA is compact/content-width, not full-bleed. */
justify-self: start;
}
/* Reference accent-variant hover: bronze-600. */
.dg-mobile-nav__cta:hover,
.dg-mobile-nav__cta:focus-visible {
background: var(--bronze-600);
color: var(--paper);
}
}
/* END MOBILE NAV PARITY LOCK */
/* ============================================================
14. FOOTER (dg-footer)
Rendered by partials/footer/site-footer.php, appended via the
wp_footer action in functions.php (see the comment there — a
child-theme footer.php template override was tried first and had no
effect on this install, and a whole-page output-buffer regex swap
after that caused a fatal error in production; wp_footer is the
same core hook every enqueued script on this theme already relies
on, so it's the most-proven option available).
Every value below was read directly off the reference's rendered
computed styles, not estimated: colors map exactly onto existing
tokens (pine-900 bg, pine-100 links, pine-300 dim text, bronze-400
accent, the existing --border-on-dark divider), confirming this
token set was already correct — only the layout rules to actually
use them were missing. Font sizes (11/14/13/12px) are hardcoded
rather than reusing --t-eyebrow (12.5px) / --t-small (15px), because
those tokens measured a half-to-full pixel off the reference's real
values and this task calls for an exact match.
============================================================ */
/* Removing Divi's default footer shell.
functions.php's widget_block_content filter already strips the actual
widget CONTENT (the default Archives/Categories blocks) at the data
level — after that filter runs, `#footer-widgets` genuinely has
nothing left inside it, so hiding the now-empty wrapper here is
cleanup of dead space, not content removal. `#footer-bottom` (Divi's
hardcoded "Designed by Elegant Themes | Powered by WordPress" credit
line + default social icons) has no equivalent WordPress filter this
child theme's code has visibility into without server-side access to
the parent theme's source, so it's suppressed here instead — `display:
none` genuinely removes an element from the accessibility tree (unlike
visibility:hidden/opacity:0), so screen-reader users don't encounter
it either. Scoped to these two specific IDs only, not a general rule. */
#main-footer #footer-widgets,
#main-footer #footer-bottom {
display: none;
}
.dg-footer {
background: var(--pine-900) !important;
color: var(--pine-100);
}
.dg-footer .footer-inner {
max-width: var(--content-max);
margin: 0 auto;
padding: 60px var(--gutter) 40px;
}
/* Back-to-top row — the reference's only footer divider sits here, below
the button and above the columns. There is no second divider before
the copyright row (see .footer-copyright-row below) — confirmed
directly, not a guess, since it would be easy to assume symmetry. */
.footer-top-row {
display: flex;
justify-content: flex-end;
padding-bottom: 44px;
margin-bottom: 48px;
border-bottom: 1px solid var(--border-on-dark);
}
.footer-back-to-top {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--font-sans);
font-size: 11px;
font-weight: var(--w-semibold);
letter-spacing: var(--ls-caps);
text-transform: uppercase;
color: var(--paper) !important;
background: var(--bronze-400);
border-radius: var(--radius-pill);
padding: 11px 24px;
text-decoration: none !important;
line-height: 1;
cursor: pointer;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.30);
transition: background-color var(--dur-base) var(--ease-out),
box-shadow var(--dur-base) var(--ease-out);
}
.footer-back-to-top:hover,
.footer-back-to-top:focus-visible {
background: var(--bronze-500);
color: var(--paper) !important;
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
}
.footer-columns {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 48px;
}
@media (max-width: 767px) {
.footer-columns {
grid-template-columns: 1fr;
}
}
.footer-logo {
height: 44px;
width: auto;
}
.footer-desc {
font-family: var(--font-sans);
font-size: 14px;
line-height: 1.7;
color: var(--pine-100);
margin: 22px 0 0;
max-width: 30ch;
}
.footer-address {
font-family: var(--font-sans);
font-style: normal;
font-size: 13px;
line-height: 1.8;
color: var(--pine-300);
margin-top: 18px;
}
.footer-address a {
line-height: inherit;
}
.dg-footer .footer-col-eyebrow {
font-family: var(--font-sans);
font-size: 11px;
font-weight: 400;
letter-spacing: var(--ls-eyebrow);
text-transform: uppercase;
color: var(--bronze-400);
margin: 0 0 16px;
}
.dg-footer a {
font-family: var(--font-sans);
font-size: 14px;
color: var(--pine-100) !important;
text-decoration: none;
line-height: 2;
transition: color var(--dur-fast) var(--ease-out);
}
.dg-footer a:hover,
.dg-footer a:focus-visible {
color: var(--paper) !important;
}
.footer-copyright-row {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 12px;
padding-top: 28px;
}
.footer-copyright-row p {
font-family: var(--font-sans);
font-size: 12px;
color: var(--pine-300);
margin: 0;
}
/* ============================================================
15. FORMS — FLUENT FORMS SKIN
Overrides Fluent Forms' default styles to match the design system.
Replaces the theme's original Gravity Forms skin — that plugin was
never actually installed on this site (only an inert Gravity Forms
Zero Spam add-on was), so these rules never had anything to style.
Class names below (.ff-el-form-control, .ff-el-group, etc.) are read
directly off Fluent Forms' own rendered markup, not guessed from docs.
============================================================ */
.fluentform .ff-el-form-control {
font-family: var(--font-sans) !important;
font-size: var(--t-body) !important;
color: var(--text-heading) !important;
background: var(--paper) !important;
border: 1px solid var(--border-hairline) !important;
border-radius: var(--radius-sm) !important;
padding: 14px 16px !important;
width: 100% !important;
transition: border-color var(--dur-fast) var(--ease-out),
box-shadow var(--dur-fast) var(--ease-out) !important;
box-shadow: none !important;
}
.fluentform .ff-el-form-control:focus {
outline: none !important;
border-color: var(--accent) !important;
box-shadow: var(--focus-ring) !important;
}
.fluentform textarea.ff-el-form-control {
min-height: 120px !important;
resize: vertical !important;
}
.fluentform .ff-el-input--label label {
font-family: var(--font-sans) !important;
font-size: var(--t-small) !important;
font-weight: var(--w-medium) !important;
color: var(--text-body) !important;
letter-spacing: 0.02em !important;
margin-bottom: 8px !important;
display: inline-block;
}
/* Required asterisk — Fluent renders it as a label::after, not a separate
element, so recolor it in place rather than styling a nonexistent node. */
.fluentform .ff-el-is-required label::after {
color: var(--bronze-500) !important;
}
/* Submit button — mirrors the reference's form submit exactly: an accent
Button at size lg (18px 38px, 14px type, --ls-caps tracking, 12px icon
gap) with a trailing 16px arrow, and NOT full-width — the reference
submit hugs its label. Fluent Forms renders a bare