/* ============================================
Stealth Environmental - Theme CSS
============================================
Proposal C: "Bold & Dark"
Plus Jakarta Sans font, black + burgundy palette,
transparent header over dark hero, industrial.
============================================ */
/* ------------------------------------------------------------------
* Design tokens
* ----------------------------------------------------------------*/
:root {
/* Brand palette */
--burgundy: #8d1826;
--burg-dk: #6b1220;
--black: #0e0e0e;
--charcoal: #1a1a1a;
--dark: #242424;
--g700: #3d3d3d;
--g500: #777;
--g300: #aaa;
--g200: #d0d0d0;
--g100: #e8e8e8;
--g50: #f4f4f4;
--wh: #fff;
--gold: #c9a84c;
/* Typography */
--ff: 'Plus Jakarta Sans', -apple-system, sans-serif;
/* Layout */
--max: 1180px;
/* Section vertical rhythm. Was clamp(60,8vw,104) -- mockup-faithful but
visually too generous in real composition. Reducing the floor and
ceiling by ~30% keeps the airy aesthetic without 200+ px of empty
space at every section boundary. */
--pad: clamp(48px, 5.5vw, 76px);
--r: 12px;
--r-lg: 18px;
/* Motion */
--ease: cubic-bezier(.25, .46, .45, .94);
}
/* ------------------------------------------------------------------
* Reset + base
* ----------------------------------------------------------------*/
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
font-family: var(--ff);
font-size: 16px;
line-height: 1.7;
color: var(--g700);
background: var(--wh);
-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
.container { max-width: var(--max); margin: 0 auto; padding: 0 24px; }
/* Typography -- Proposal C uses 800 weight, tight letter-spacing */
h1, h2, h3 { font-family: var(--ff); font-weight: 800; line-height: 1.1; color: var(--charcoal); }
h1 { font-size: clamp(2.5rem, 6vw, 4rem); letter-spacing: -.03em; }
h2 { font-size: clamp(1.875rem, 4vw, 2.75rem); letter-spacing: -.02em; }
h3 { font-size: clamp(1.1rem, 2vw, 1.25rem); font-weight: 700; }
/* Tag/label pattern -- Proposal C uses dot + text (not line-before) */
.tag {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: .73rem;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--burgundy);
}
.tag-dot {
width: 8px;
height: 8px;
background: var(--burgundy);
border-radius: 50%;
}
/* ------------------------------------------------------------------
* Buttons -- Proposal C uses 12px radius (not pills)
* ----------------------------------------------------------------*/
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 15px 30px;
border-radius: var(--r);
font-family: var(--ff);
font-size: .9rem;
font-weight: 700;
cursor: pointer;
transition: all .3s var(--ease);
border: none;
}
.btn-burg { background: var(--burgundy); color: var(--wh); }
.btn-burg:hover { background: var(--burg-dk); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(141,24,38,.3); }
.btn-white { background: var(--wh); color: var(--charcoal); }
.btn-white:hover { background: var(--g50); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.15); }
.btn-dark { background: var(--charcoal); color: var(--wh); }
.btn-dark:hover { background: var(--black); transform: translateY(-2px); }
.btn-ghost { background: transparent; color: var(--charcoal); border: 2px solid var(--g200); }
.btn-ghost:hover { border-color: var(--burgundy); color: var(--burgundy); }
.btn-ghost-w { background: transparent; color: var(--wh); border: 2px solid rgba(255,255,255,.3); }
.btn-ghost-w:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.6); }
/* ------------------------------------------------------------------
* Top bar (visible on subpages, hidden on homepage behind hero)
* On the homepage the transparent header floats over the hero,
* so the top bar is visually behind/above the hero. On subpages
* with no full-viewport hero, it shows normally.
* ----------------------------------------------------------------*/
.topbar {
background: var(--charcoal);
padding: 8px 0;
font-size: .8rem;
color: rgba(255,255,255,.88);
position: sticky;
top: 0;
z-index: 101;
}
.topbar-inner {
display: flex;
justify-content: space-between;
align-items: center;
}
.topbar-left { display: flex; gap: 24px; }
.topbar-item { display: flex; align-items: center; gap: 6px; }
.topbar-item svg { width: 14px; height: 14px; color: var(--burgundy); opacity: .8; }
.topbar a, .topbar-phone { color: rgba(255,255,255,.9); }
/* ------------------------------------------------------------------
* Announcement bar
* ----------------------------------------------------------------*/
.announce-bar {
background: var(--burgundy);
color: var(--wh);
text-align: center;
padding: 8px 0;
font-size: .82rem;
font-weight: 600;
}
/* ------------------------------------------------------------------
* Header -- Proposal C: transparent over hero, dark when stuck
*
* On the homepage (.home body class), the header is absolute-
* positioned over the dark hero. Nav text is white.
* On subpages, it sits below the top bar with a white background.
* When scrolled past 100px, .stuck class adds dark frosted glass.
* ----------------------------------------------------------------*/
.header {
position: sticky;
top: var(--topbar-h, 36px);
z-index: 100;
padding: 16px 0;
background: rgba(14,14,14,.97);
backdrop-filter: blur(10px);
transition: padding .35s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease);
}
.header.stuck {
padding: 10px 0;
box-shadow: 0 1px 0 rgba(255,255,255,.06);
}
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
}
/* Logo -- large on load, shrinks when stuck */
.logo-img {
height: clamp(60px, 7vw, 92px);
width: auto;
transition: height .35s var(--ease),
filter .35s var(--ease),
opacity .25s var(--ease),
visibility .25s var(--ease);
filter: drop-shadow(0 4px 18px rgba(0,0,0,.35));
}
.header.stuck .logo-img {
height: 42px;
filter: none;
}
/* When the page has the hero slider's locked colour logo on screen,
hide the header's white logo while the header is NOT stuck. Avoids
double-logo overlap. Once the user scrolls past the threshold and
.stuck is added by main.js, the header logo fades back in inside
the dark sticky bar. body.has-hero-logo is set by the body_class
filter on pages whose first section uses theme_hero_slider. */
body.has-hero-logo .header:not(.stuck) .logo-img {
opacity: 0;
visibility: hidden;
}
/* Light logo by default (for dark/transparent header).
On subpages, JS adds .header-light class to swap. */
.logo-dark { display: none; }
.logo-light { display: block; }
.header-light .logo-dark { display: block; }
.header-light .logo-light { display: none; }
/* When stuck (scrolled), always show light logo on dark bar */
.header.stuck .logo-dark { display: none; }
.header.stuck .logo-light { display: block; }
/* ---- Pages with a hero slider: transparent header OVERLAYING the hero ----
*
* Triggered by `body.has-hero-logo` (added by the body_class filter on
* any page whose Elementor data contains theme_hero_slider). Applies to
* the live home, home-preview, and any future page using the slider --
* not coupled to WordPress's automatic `home` class.
*
* The hero is a 100vh slider with its own dark gradient overlay, and
* the visual we want is: slider extends edge-to-edge from the very top
* of the viewport, with the topbar + header floating over it as a
* transparent layer at scroll=0. As soon as the user scrolls past the
* hero (.stuck), the header bar fades to opaque dark and the header
* logo becomes visible -- so the visual transition is "logo in slider
* → logo in sticky bar" without any layout shift.
*
* To achieve this, both the topbar and the header are pulled out of
* normal flow (`position: fixed`). The hero section then starts at y=0
* (no flow gap above it) and the fixed bars overlay it. On scroll the
* bars stay pinned to the viewport top -- same physical position, just
* with bg toggled via the `.stuck` class for visual emphasis.
*
* Subpages without the hero slider keep the original sticky-in-flow
* pattern so their content doesn't disappear behind a floating header.
*/
body.has-hero-logo .topbar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 101; /* above header (100) so its content reads cleanly */
}
body.has-hero-logo .header {
position: fixed;
top: var(--topbar-h, 0px);
left: 0;
right: 0;
z-index: 100;
transition: background .35s var(--ease), backdrop-filter .35s var(--ease), box-shadow .35s var(--ease);
}
body.has-hero-logo .header:not(.stuck) {
background: transparent;
backdrop-filter: none;
-webkit-backdrop-filter: none;
box-shadow: none;
}
body.has-hero-logo .header .logo { transition: opacity .35s var(--ease); }
body.has-hero-logo .header:not(.stuck) .logo {
opacity: 0;
pointer-events: none;
}
body.has-hero-logo .header.stuck .logo { opacity: 1; }
/* Navigation -- white text for transparent header */
.nav { display: flex; gap: 28px; align-items: center; }
.nav a,
.nav .menu-item > a {
font-size: .85rem;
font-weight: 500;
color: rgba(255,255,255,.65);
transition: color .2s;
padding: 8px 0;
white-space: nowrap;
}
.nav a:hover,
.nav .menu-item > a:hover { color: var(--wh); }
.nav .current-menu-item > a { color: var(--wh); }
/* WordPress wp_nav_menu() */
.nav ul,
.nav .menu {
display: flex;
gap: 24px;
list-style: none !important;
margin: 0;
padding: 0;
align-items: center;
}
.nav li,
.nav .menu-item {
position: relative;
list-style: none !important;
}
.nav .menu-item > a { display: block; }
/* Subpage header-light overrides: dark text on white bg */
.header-light .nav a,
.header-light .nav .menu-item > a {
color: var(--g700);
}
.header-light .nav a:hover,
.header-light .nav .menu-item > a:hover,
.header-light .nav .current-menu-item > a {
color: var(--burgundy);
}
/* When stuck, revert to white text */
.header-light.stuck .nav a,
.header-light.stuck .nav .menu-item > a {
color: rgba(255,255,255,.65);
}
.header-light.stuck .nav a:hover,
.header-light.stuck .nav .menu-item > a:hover {
color: var(--wh);
}
/* Dropdown menus -- black background, grey text. Matches the dark
sticky-header surface so the dropdown reads as part of the header
rather than a contrasting light card. The invisible 14px hover
bridge keeps the submenu open while the cursor moves between the
nav item and the dropdown.
NOTE: Mobile menu has its own !important overrides further down
in the @media (max-width: 768px) block. */
.nav .sub-menu {
display: none;
position: absolute;
top: 100%;
left: -16px;
background: var(--black);
border: 1px solid rgba(255, 255, 255, .06);
border-radius: var(--r);
box-shadow: 0 16px 48px rgba(0, 0, 0, .55);
min-width: 250px;
padding: 8px;
z-index: 200;
list-style: none;
}
/* Invisible hover bridge so the cursor doesn't lose hover when moving
from the nav item down into the dropdown. */
.nav .sub-menu::before {
content: '';
position: absolute;
top: -14px; left: 0; right: 0;
height: 14px;
}
.nav .menu-item:hover > .sub-menu,
.nav .menu-item:focus-within > .sub-menu { display: block; }
.nav .sub-menu .menu-item > a {
display: block;
padding: 10px 14px;
font-size: .85rem;
font-weight: 500;
color: rgba(255, 255, 255, .6) !important;
border-radius: 6px;
transition: background .2s, color .2s;
}
.nav .sub-menu .menu-item > a:hover {
background: rgba(255, 255, 255, .05);
color: var(--wh) !important;
}
.nav .sub-menu .current-menu-item > a {
color: var(--wh) !important;
background: rgba(141, 24, 38, .25);
}
/* Subpage header-light variant: SAME dark dropdown -- the dropdown
is its own surface and doesn't need to flip with the header bar. */
.header-light .nav .sub-menu .menu-item > a {
color: rgba(255, 255, 255, .6) !important;
}
.header-light .nav .sub-menu .menu-item > a:hover {
color: var(--wh) !important;
}
/* Header right side */
.header-right { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.header-right .btn { white-space: nowrap; padding: 12px 24px; font-size: .85rem; }
.header-phone {
color: var(--wh);
font-weight: 700;
font-size: .9rem;
display: flex;
align-items: center;
gap: 6px;
}
.header-phone svg { width: 16px; height: 16px; opacity: .6; }
.header-light .header-phone { color: var(--charcoal); }
.header-light .header-phone svg { opacity: 1; color: var(--burgundy); }
.header-light.stuck .header-phone { color: var(--wh); }
.header-light.stuck .header-phone svg { opacity: .6; color: inherit; }
/* Mobile hamburger */
.menu-toggle {
display: none;
background: none;
border: none;
cursor: pointer;
padding: 8px;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
.menu-toggle span {
display: block;
width: 24px;
height: 2px;
background: var(--wh);
margin: 5px 0;
transition: all .3s var(--ease);
}
.header-light .menu-toggle span { background: var(--charcoal); }
.header-light.stuck .menu-toggle span { background: var(--wh); }
/* ------------------------------------------------------------------
* Hero -- Proposal C: full-bleed photo bg + dark gradient + noise
* Applied via .hero class on the homepage only. Subpages use
* .page-header instead.
* ----------------------------------------------------------------*/
.hero {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
padding: 160px 0 100px;
overflow: hidden;
background-color: var(--black);
background-size: cover;
background-position: center 30%;
background-repeat: no-repeat;
}
/* Homepage hero photo (driven from theme rather than inline style so it
survives Elementor HTML widget sanitization). To change the photo,
either edit this rule or move it to a Customizer image control. */
.hero-home {
background-image: url('../images/bills-septic-service-truck.jpg');
}
/* Layer 1: dark angled gradient */
.hero::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(105deg, rgba(8,8,10,.94) 0%, rgba(14,14,14,.82) 38%, rgba(14,14,14,.55) 70%, rgba(141,24,38,.35) 100%);
z-index: 1;
}
/* Layer 2: SVG noise/grain texture */
.hero::after {
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml;utf8,");
background-size: 220px 220px;
opacity: .35;
mix-blend-mode: overlay;
pointer-events: none;
z-index: 2;
}
/* Bottom fade into white */
.hero-fade {
position: absolute;
left: 0;
right: 0;
bottom: -2px;
height: 120px;
background: linear-gradient(to top, var(--wh) 5%, transparent);
z-index: 3;
pointer-events: none;
}
.hero-inner {
position: relative;
z-index: 4;
max-width: 760px;
}
.hero-content { color: var(--wh); }
/* Hero pill badge (frosted glass) */
.hero-pill {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.18);
padding: 8px 16px;
border-radius: 50px;
font-size: .78rem;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
color: rgba(255,255,255,.92);
margin-bottom: 28px;
backdrop-filter: blur(6px);
}
.hero-pill svg { width: 14px; height: 14px; color: var(--burgundy); }
.hero h1 {
color: var(--wh);
margin-bottom: 18px;
text-shadow: 0 2px 30px rgba(0,0,0,.5);
}
.hero h1 .acc { color: var(--burgundy); }
.hero-desc {
font-size: 1.15rem;
color: rgba(255,255,255,.78);
max-width: 560px;
margin-bottom: 36px;
text-shadow: 0 2px 18px rgba(0,0,0,.4);
}
.hero-btns {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 48px;
}
.hero-trust {
display: flex;
gap: 32px;
padding-top: 32px;
border-top: 1px solid rgba(255,255,255,.18);
flex-wrap: wrap;
}
.hero-trust-item { display: flex; align-items: center; gap: 12px; }
.hero-trust-icon {
width: 42px;
height: 42px;
background: rgba(141,24,38,.18);
border: 1px solid rgba(141,24,38,.35);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.hero-trust-icon svg { width: 20px; height: 20px; color: #e85060; }
.hero-trust-text { font-size: .78rem; color: rgba(255,255,255,.82); line-height: 1.35; }
.hero-trust-text strong { display: block; color: #fff; font-size: .88rem; font-weight: 700; }
/* ------------------------------------------------------------------
* Page header (subpages without full hero)
* The header is position:absolute over the page, so subpages need
* top padding to push their first section down clear of it.
* ----------------------------------------------------------------*/
.page-header-section {
background: var(--g50);
padding: 140px 0 60px;
text-align: center;
}
/* With sticky header, no extra padding is needed on first section. */
/* ------------------------------------------------------------------
* Footer
* ----------------------------------------------------------------*/
.site-footer {
background: var(--black);
color: rgba(255,255,255,.5);
padding: 60px 0 22px; /* matches mockup: 60 top / 22 bottom */
}
.footer-grid {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1fr;
gap: 36px;
padding-bottom: 40px;
border-bottom: 1px solid rgba(255,255,255,.05);
}
/* Mockup line 754-756: height: 40px (not auto), mb 14, monochrome via filter. */
.footer-brand .footer-logo { width: auto; height: 40px; margin-bottom: 14px; }
.footer-brand p { font-size: .82rem; line-height: 1.6; }
.footer-col h4 {
color: var(--wh);
font-size: .75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .07em;
margin-bottom: 14px;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: 8px; }
.footer-col a,
.footer-col .menu-item a {
/* Mockup line 766: .82rem (slightly larger than the .8 we had). */
font-size: .82rem;
color: rgba(255,255,255,.5);
transition: color .2s;
}
.footer-col a:hover,
.footer-col .menu-item a:hover { color: rgba(255,255,255,.9); }
.footer-col .menu { list-style: none; padding: 0; margin: 0; }
.footer-bottom {
padding-top: 18px;
display: flex;
justify-content: space-between;
font-size: .73rem;
}
.footer-social { display: flex; gap: 8px; }
.footer-social a {
width: 34px; /* matches mockup */
height: 34px;
background: rgba(255,255,255,.05);
border-radius: var(--r);
display: flex;
align-items: center;
justify-content: center;
transition: background .2s;
}
.footer-social a:hover { background: var(--burgundy); }
.footer-social svg { width: 14px; height: 14px; color: var(--wh); }
/* ------------------------------------------------------------------
* Mobile CTA bar
* ----------------------------------------------------------------*/
.mob-cta {
display: none;
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 99;
}
.mob-cta-bar { display: grid; grid-template-columns: 1fr 1fr; }
.mob-cta-bar a {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 14px;
font-weight: 700;
font-size: .88rem;
color: var(--wh);
}
.mob-cta-bar a:first-child { background: var(--charcoal); }
.mob-cta-bar a:last-child { background: var(--burgundy); }
/* ------------------------------------------------------------------
* Responsive
* ----------------------------------------------------------------*/
@media (max-width: 1024px) {
.topbar-left { display: none; }
.footer-grid { grid-template-columns: 1fr 1fr; }
.hero { padding: 140px 0 90px; background-position: center 25%; }
.hero::before { background: linear-gradient(180deg, rgba(8,8,10,.92) 0%, rgba(14,14,14,.78) 50%, rgba(141,24,38,.4) 100%); }
}
@media (max-width: 768px) {
.nav, .header-phone, .header-right .btn { display: none; }
.menu-toggle { display: block; }
.header { padding: 14px 0; }
.logo-img { height: 54px; }
.header.stuck .logo-img { height: 38px; }
/* ---- Mobile nav panel ----
Fills the full viewport between the header (82px) and the bottom
mobile CTA bar (52px). Long menus scroll within the panel rather
than spilling under the CTA bar or leaving page content visible
beneath the menu.
NOTE: explicit height via calc() instead of relying on top+bottom
to stretch the box. With `display: flex` set, the implicit-height
stretch from setting both `top` and `bottom` doesn't reliably
fire across browsers -- the element collapses to its padding
height. calc() removes the ambiguity. */
.nav.is-open {
display: block; /* not flex on the wrapper -- let the .menu inside flow naturally and own its layout */
position: fixed;
top: var(--mob-header-h, 82px);
left: 0;
right: 0;
height: calc(100vh - var(--mob-header-h, 82px) - var(--mob-cta-h, 56px));
/* Modern viewport-aware unit for browsers that support it -- avoids
the iOS Safari address-bar viewport jitter. Falls back to vh above. */
height: calc(100dvh - var(--mob-header-h, 82px) - var(--mob-cta-h, 56px));
background: #0e0e0e;
padding: 8px 0 16px;
box-shadow: 0 8px 32px rgba(0, 0, 0, .5);
z-index: 150; /* below the .mob-cta bar (z:99 + own stacking) but above page */
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
box-sizing: border-box;
}
.nav.is-open .menu {
display: flex;
flex-direction: column;
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
/* !important is required here to defeat .nav .sub-menu .menu-item > a
which uses !important for the desktop dropdown's dark-on-white color.
Without it, sub-menu items render at #3d3d3d on the dark mobile panel
and become unreadable. */
.nav.is-open .menu-item > a {
display: block;
padding: 14px 28px;
color: rgba(255, 255, 255, .96) !important;
font-size: 1rem;
font-weight: 600;
border-bottom: 1px solid rgba(255, 255, 255, .06);
text-decoration: none;
transition: background .2s ease, color .2s ease;
}
.nav.is-open .menu-item:last-child > a { border-bottom: none; }
.nav.is-open .menu-item > a:hover,
.nav.is-open .menu-item > a:focus-visible {
background: rgba(141, 24, 38, .35);
color: #fff;
}
/* Current page indicator -- solid burgundy bar so it's unambiguous
which page the visitor is on. Higher specificity than the hover
rule above so it wins on the active item. !important on color
defeats the .nav .sub-menu .menu-item > a desktop rule when the
active item is in a sub-menu (e.g. Tuxedo Event Trailer under
Portable Toilet Services). */
.nav.is-open .current-menu-item > a,
.nav.is-open .current_page_item > a {
background: var(--burgundy) !important;
color: #fff !important;
}
.nav.is-open .sub-menu {
display: block;
position: static;
background: transparent;
box-shadow: none;
padding: 0;
}
.nav.is-open .sub-menu a,
.nav.is-open .sub-menu .menu-item > a {
padding-left: 48px;
font-size: .92rem;
font-weight: 500;
/* Bumped from .7 -> .88 so sub-items are clearly readable on the
dark background. !important defeats the desktop-dropdown rule
(line ~266 in theme.css) which forces var(--g700) for white-bg
hover dropdowns. */
color: rgba(255, 255, 255, .88) !important;
}
.nav.is-open .sub-menu .menu-item > a:hover {
color: #fff !important;
background: rgba(141, 24, 38, .35) !important;
}
/* Lock body scroll while the menu is open so the page underneath
doesn't drift when the user scrolls within the menu. */
body.menu-open {
overflow: hidden;
/* iOS safari needs position:fixed in addition to overflow:hidden,
but that loses scroll position. overscroll-behavior:contain on
the panel handles the common case without the position trick. */
}
/* Hamburger → X animation */
.menu-toggle[aria-expanded="true"] span:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px);
}
.menu-toggle[aria-expanded="true"] span:nth-child(2) {
opacity: 0;
}
.menu-toggle[aria-expanded="true"] span:nth-child(3) {
transform: rotate(-45deg) translate(5px, -5px);
}
.hero { min-height: auto; padding: 130px 0 80px; }
.hero h1 { font-size: 2.25rem; }
.hero-desc { font-size: 1rem; }
.hero-btns { flex-direction: column; width: 100%; }
.hero-btns .btn { justify-content: center; width: 100%; }
.hero-trust { gap: 18px; }
.hero-trust-item { flex: 1 1 calc(50% - 9px); min-width: 0; }
.footer-grid { grid-template-columns: 1fr; }
.footer-bottom { flex-direction: column; gap: 10px; text-align: center; }
.topbar { display: none; }
.mob-cta { display: block; }
.site-footer { padding-bottom: 72px; }
}
/* ------------------------------------------------------------------
* Scroll reveal
* ----------------------------------------------------------------*/
.rv {
opacity: 0;
transform: translateY(20px);
transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.rv.vis {
opacity: 1;
transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
.rv { opacity: 1; transform: none; transition: none; }
.btn, .header, .logo-img, .menu-toggle span { transition: none; }
}
/* ------------------------------------------------------------------
* Fluent Forms theming
*
* Plugin's Lite tier ships only a minimal `fluent-forms-elementor-widget.css`
* (which styles the Elementor editor preview, not the front-end fields), so
* front-end inputs render with browser defaults unless we style them. We
* layer a brand-tokenised look on top of the raw markup so the contact form
* matches site typography (Plus Jakarta Sans, 12px radius, burgundy accents)
* without depending on Fluent's `public-default.css` (which Lite doesn't
* always enqueue when the form is rendered through Elementor's widget).
*
* Class targets:
* .fluentform -- plugin wrapper
* .frm-fluent-form -- the actual