/* ════════════════════════════════════════════════════════════
MOBILE HERO — full-bleed photograph, ink sheet over it
THE CROP IS THE WHOLE PROBLEM. A landscape file (1920x1440) shown in a
390x844 hole has to be magnified ~2.4x to cover it, and every crop of a
2.4x magnification is a close-up of one palm frond. Two ways out:
shrink the photograph into its own band, or give the phone a photograph
that is actually the shape of a phone. The band works but the picture
ends up small, which is not what a premium hero looks like.
So the source is now a purpose-cut 9:16 frame — images/webp/
hero-mobile-portrait.webp, 1080x1920, cut from the dry-creek rock-bed
shot. A 390x844 phone magnifies it 1.22x. That is what lets the
photograph run the full screen and still be legible: the rock bed leads
from the bottom edge up to the house, the house sits in the top third,
and the middle is quiet enough to carry type.
The form sits over it on a TRANSLUCENT ink sheet rather than an opaque
one, so the photograph still runs behind the bottom third instead of
being cut off by it.
Everything below 768px. The desktop hero is untouched.
Revert: remove this one . The source in index.html can
stay — it only changes which file a phone downloads.
════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
/* ── THE FRAME ────────────────────────────────────────────────
Full screen, content pinned to the bottom, and pulled up under the
fixed nav so the page opens on the photograph rather than on a 70px
strip of bone. */
.hero {
position: relative;
min-height: 100svh;
display: flex;
align-items: flex-end;
padding-top: 0;
margin-top: -70px;
background: #101610;
overflow: hidden;
}
/* ── 1. CHROME OFF THE PHOTOGRAPH ─────────────────────────────
js/main.js already adds .scrolled past 20px, so the bone returns the
moment the visitor leaves the hero and the links need it back. */
.nav:not(.scrolled) {
background: transparent;
background-image: linear-gradient(180deg, rgba(16, 22, 14, 0.5) 0%, rgba(16, 22, 14, 0) 100%);
border-bottom: 0;
box-shadow: none;
}
/* brightness(0) crushes the mark to black, invert(1) lifts it to white —
one declaration, and it tracks any future change to the logo file. */
.nav:not(.scrolled) .nav__logo-mark { filter: brightness(0) invert(1); }
.nav:not(.scrolled) .nav__logo-name,
.nav:not(.scrolled) .nav__logo-tag { color: var(--bone, #F5F1EA); }
.nav:not(.scrolled) .nav__hamburger span { background: var(--bone, #F5F1EA); }
.nav:not(.scrolled) .nav__hamburger {
background: transparent;
border-color: transparent;
box-shadow: none;
}
/* ── 2. THE PHOTOGRAPH ────────────────────────────────────────
is an INLINE element: `width: 100%` on the resolves
against a shrink-wrapped inline box, not against the hero, which left
the image 315px wide in a 390px frame. */
.hero__bg { position: absolute; inset: 0; }
.hero__bg picture {
display: block;
width: 100%;
height: 100%;
}
.hero__bg-img {
width: 100%;
height: 100%;
object-fit: cover;
/* 42%, not centre. Most phones are taller than 9:16, so something has
to go; taking it off the bottom keeps the house and the head of the
rock bed, which are the two things that make the shot read. */
object-position: 50% 42%;
}
/* Clear through the top half so the house is untouched, then a fast
ramp so the type below has a seat. The old wash was a flat
0.30 → 0.94 across the entire image and greyed it out to buy contrast
it only needs at the bottom. */
.hero__overlay {
background: linear-gradient(
180deg,
rgba(16, 22, 14, 0.30) 0%,
rgba(16, 22, 14, 0.10) 26%,
rgba(16, 22, 14, 0.42) 50%,
rgba(16, 22, 14, 0.80) 72%,
rgba(16, 22, 14, 0.92) 100%
) !important;
}
/* Desktop flourish; on a phone it eats 40px exactly where the sheet
needs to reach the bottom edge. */
.hero__grass { display: none; }
/* ── 3. READING ORDER ─────────────────────────────────────────
The DOM order is desktop's: form, call button, quiz link, trust
signals. Read down a phone that puts the proof below the form, off
the bottom of the screen. `order` gives the phone claim → proof →
action without touching the markup. */
.hero .container { padding-left: 0; padding-right: 0; }
.hero__content {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
width: 100%;
padding: 0 0 env(safe-area-inset-bottom, 0px);
}
.hero__eyebrow { order: 1; }
.hero__h1-rotate { order: 2; }
.hero__trust { order: 3; }
.hero-form { order: 4; }
/* ── 4. TYPE ──────────────────────────────────────────────────
The eyebrow is the H1 and carries the keyword, so it stays — at a
size that reads as a label, and at a tracking that does not wrap
"…Port Charlotte, FL" onto a second line with FL alone on it. */
.hero__eyebrow {
margin: 0 20px 10px;
font-size: 0.56rem;
letter-spacing: 0.09em;
line-height: 1.45;
opacity: 0.8;
padding-left: 0;
}
.hero__eyebrow::before { display: none; }
.hero__h1-rotate {
margin: 0 20px;
font-size: clamp(1.95rem, 8.8vw, 2.4rem);
line-height: 1.1;
letter-spacing: -0.02em;
text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
}
/* THE GHOST. The rotating half cross-fades to opacity 0 and back while
the static half holds; at the same size and colour the half-faded
line reads as a printing error rather than as an effect. The site's
own rule for it is two classes deep, which is why a single-class tint
lost the cascade the first time. */
.hero .hero__h1-rotate .hero__h1-pain,
.hero .hero__h1-pain {
color: #C7E0A8;
-webkit-text-fill-color: #C7E0A8;
background: none;
font-style: normal;
display: inline-block;
opacity: 1;
transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
.hero .hero__h1-pain.fade-swap {
opacity: 0;
transform: translate3d(0, -8px, 0);
}
/* Desktop furniture — on a phone it is a grey line with nothing to
explain it. */
.hero__rotate-bar { display: none; }
.hero__sub,
.hero__areas,
.hero__quiz-link,
.hero__actions--call { display: none; }
/* ── 5. PROOF ─────────────────────────────────────────────────
Two claims on one line, directly under the headline. Four of them
wrap into a block, and the two dropped (same-week estimates, HOA
crew) are the weakest — these two answer "can I trust a stranger on
my property". The block it inherits from is a column, so the
direction has to be set, not just the wrapping. */
.hero__trust {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap;
align-items: center;
gap: 16px;
margin: 12px 20px 14px;
font-size: 0.75rem;
color: rgba(245, 241, 234, 0.92);
}
.hero__trust-item {
display: flex;
align-items: center;
gap: 6px;
white-space: nowrap;
}
.hero__trust-item svg { width: 14px; height: 14px; opacity: 0.85; flex-shrink: 0; }
.hero__trust-item:nth-child(n + 3) { display: none; }
/* ── 6. THE SHEET ─────────────────────────────────────────────
Translucent, not opaque. An opaque panel cuts the photograph off at
the waist; at 0.72 the rock bed still runs behind the fields, which
is what keeps the image reading as full-screen. Rounded at the top
only and flush to the bottom edge — the shape of a system action
sheet, the one piece of grammar every phone user already reads as
"this is the thing to do". */
.hero-form {
background: rgba(16, 22, 14, 0.72) !important;
border: 0;
border-top: 1px solid rgba(245, 241, 234, 0.13);
border-radius: 18px 18px 0 0 !important;
box-shadow: 0 -20px 50px rgba(0, 0, 0, 0.4) !important;
padding: 16px 20px 18px !important;
margin: 0;
}
.hero-form__title {
color: var(--bone, #F5F1EA);
font-size: 0.95rem;
margin-bottom: 9px;
}
.hero-form .form-group { margin-bottom: 9px; }
.hero-form .form-control {
background: rgba(255, 255, 255, 0.97);
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 10px;
font-size: 16px; /* below 16px and iOS zooms the page on focus */
padding-top: 13px;
padding-bottom: 13px;
}
.hero-form__submit {
width: 100%;
border-radius: 10px;
font-size: 1.02rem;
padding-top: 15px;
padding-bottom: 15px;
}
.hero-form__note {
color: rgba(245, 241, 234, 0.58);
font-size: 0.72rem;
margin-top: 8px;
text-align: center;
}
}
/* ── SHORT PHONES ─────────────────────────────────────────────
Below ~720px tall the sheet plus the headline plus the proof row will
not clear the sticky call bar. The headline gives up the most — it is
the one element that loses 30% of its size and still dominates. */
@media (max-width: 767px) and (max-height: 720px) {
.hero__h1-rotate { font-size: 1.58rem; }
.hero__eyebrow { margin-bottom: 7px; }
.hero__trust { margin: 9px 20px 11px; font-size: 0.71rem; }
.hero-form { padding: 12px 16px 14px !important; }
.hero-form .form-group { margin-bottom: 7px; }
.hero-form__title { margin-bottom: 7px; }
}
/* ════════════════════════════════════════════════════════════
MEASURED CORRECTIONS
════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
/* 1. The type sat directly on the house's stone wall, where the scrim
is only 0.10–0.42. A gradient on the image can only ever be a
guess about where the type will land; putting one on the content
block itself means it always travels with the type, whatever the
photograph does. */
.hero__content {
background: linear-gradient(
180deg,
rgba(16, 22, 14, 0) 0%,
rgba(16, 22, 14, 0.55) 26%,
rgba(16, 22, 14, 0.82) 52%,
rgba(16, 22, 14, 0.88) 100%
);
padding-top: 44px;
}
/* 2. The sticky call bar sits over the bottom of the sheet and was
covering the "no obligation" line. The sheet ends where the bar
starts instead of running underneath it. */
.hero__content { padding-bottom: 58px; }
}
/* 3. Short phones were still 14px (375x667) and 14px (360x640) over the
fold. The note is the one line whose promise is repeated verbatim
under the second form further down the page. */
@media (max-width: 767px) and (max-height: 720px) {
.hero__h1-rotate { font-size: 1.42rem; }
.hero-form__note { display: none; }
.hero__content { padding-top: 30px; }
}
/* ════════════════════════════════════════════════════════════
HERO BALANCE PASS — text up, sheet down, image faded around both
════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
/* 1. TEXT UP, SHEET DOWN. The block is anchored to the bottom edge, so
opening the gap under the proof row does both at once: everything
above it rises, and the sheet's top edge drops toward the bottom of
the screen — which also gives back the photograph the sheet was
covering. */
.hero__trust { margin-bottom: 36px; }
.hero-form { padding-top: 12px !important; }
/* 2. THE FADE AROUND THE TOP TEXT. The content block carries its own
gradient so the darkening always travels with the type rather than
landing wherever the photograph happens to put it. Starting the
ramp higher and reaching full sooner puts a soft pool of shade
behind the eyebrow and headline instead of letting them sit on
whatever is behind them. */
.hero__content {
padding-top: 96px;
background: linear-gradient(
180deg,
rgba(16, 22, 14, 0) 0%,
rgba(16, 22, 14, 0.42) 18%,
rgba(16, 22, 14, 0.72) 38%,
rgba(16, 22, 14, 0.86) 62%,
rgba(16, 22, 14, 0.94) 100%
);
}
/* 3. AND TOWARD THE BOTTOM. The image's own scrim now carries a deeper
floor, so the photograph dissolves into the sheet rather than being
cut off by its edge. */
.hero__overlay {
background: linear-gradient(
180deg,
rgba(16, 22, 14, 0.30) 0%,
rgba(16, 22, 14, 0.10) 24%,
rgba(16, 22, 14, 0.30) 44%,
rgba(16, 22, 14, 0.62) 66%,
rgba(16, 22, 14, 0.88) 84%,
rgba(16, 22, 14, 0.97) 100%
) !important;
}
}
@media (max-width: 767px) and (max-height: 720px) {
/* Short screens cannot spare 36px of air; they get about half. */
.hero__trust { margin-bottom: 18px; }
.hero__content { padding-top: 58px; }
}
/* ════════════════════════════════════════════════════════════
HERO, AS ASKED: text at the TOP, form at the BOTTOM, and the
photograph left CLEAR through the middle.
The previous pass moved both blocks but kept them as one bottom-anchored
stack with a single gradient behind the lot — so the middle of the
picture was darkened by the same wash that was there to make the type
legible. Splitting the stack is what actually frees the middle: the text
group is pinned to the top of the screen, the sheet to the bottom, and
the space between them carries no darkening at all.
════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
/* The content column now spans the whole hero so its two ends can be
pushed apart, instead of being a short block sitting at the bottom. */
.hero { align-items: stretch; }
.hero > .container {
display: flex;
flex-direction: column;
width: 100%;
}
.hero__content {
flex: 1 1 auto;
justify-content: flex-start;
/* Clear of the fixed nav at the top; clear of the sticky call bar at
the bottom. */
padding-top: 92px;
padding-bottom: 58px;
/* NO gradient here any more — this is what was greying out the middle
of the photograph. The darkening moves onto the image's own overlay
below, where it can be placed at the two ends only. */
background: none;
}
/* Everything above the form sits at the top; the sheet is pushed to the
floor by the free space between them. */
.hero-form { margin-top: auto; }
.hero__trust { margin-bottom: 0; }
/* THE SCRIM, IN THREE PARTS. Heavy behind the type at the top, nothing
at all across the middle third so the house and the rock bed are seen
as photographed, then heavy again under the sheet. */
.hero__overlay {
background: linear-gradient(
180deg,
rgba(16, 22, 14, 0.78) 0%,
rgba(16, 22, 14, 0.70) 20%,
rgba(16, 22, 14, 0.34) 33%,
rgba(16, 22, 14, 0.06) 44%,
rgba(16, 22, 14, 0.06) 58%,
rgba(16, 22, 14, 0.38) 70%,
rgba(16, 22, 14, 0.86) 85%,
rgba(16, 22, 14, 0.96) 100%
) !important;
}
}
@media (max-width: 767px) and (max-height: 720px) {
.hero__content { padding-top: 78px; }
}
@media (max-width: 767px) {
/* THE NAV OFFSET. .hero is pulled up 70px so the photograph starts at the
very top of the window, which means every padding inside it is measured
from 70px ABOVE the viewport. padding-top: 92px therefore put the
eyebrow at y=22 — underneath the fixed nav, running through the logo.
The nav's own height has to be added back before any gap is asked for. */
.hero__content { padding-top: calc(70px + 88px); }
/* THE GAP AFTER THE HERO. 98px of dead space sat under the form: 58px of
content padding (the sticky call bar's clearance, which is wanted) plus
40px of the hero's own bottom padding (which is not — it is desktop
spacing for the grass divider that is switched off here). Removing it
puts the sheet's bottom edge on the call bar. */
.hero { padding-bottom: 0; }
}
@media (max-width: 767px) and (max-height: 720px) {
.hero__content { padding-top: calc(70px + 44px); }
}
@media (max-width: 767px) {
/* THE SHEET REACHES THE BOTTOM OF THE SCREEN. Keeping the call bar's
clearance as padding on the CONTENT left 61px of bare page between the
sheet's edge and the bar — the cream band under the hero. Moving that
clearance inside the sheet instead means the ink runs all the way down
and the bar sits on top of it, with the note still clear of it. */
.hero__content { padding-bottom: 0; }
.hero-form {
padding-bottom: calc(18px + 58px + env(safe-area-inset-bottom, 0px)) !important;
}
}
@media (max-width: 767px) and (max-height: 720px) {
/* A 667px screen cannot carry a 92px top offset, three lines of headline,
the proof row and a five-row form: the column overflowed and the
eyebrow was pushed back up under the nav (measured top: 0). The
headline and the note give the room back. */
.hero__content { padding-top: calc(70px + 14px); }
.hero__h1-rotate { font-size: 1.34rem; }
.hero-form { padding-bottom: calc(12px + 58px + env(safe-area-inset-bottom, 0px)) !important; }
}
@media (max-width: 767px) {
/* THE WHITE WEDGE AFTER THE HERO. The hero carries a desktop slant —
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), 0 100%) — which
cuts a 40px diagonal out of its bottom-right corner. On desktop that
edge lands on the section below and reads as the site's angle. On a
phone it simply removes the corner of the ink sheet and shows the bone
page behind it: a cream triangle between the form and the call bar.
The sheet needs a straight bottom edge here. */
.hero { clip-path: none !important; }
}
@media (max-width: 767px) and (max-height: 720px) {
/* The eyebrow was still landing at y=0, behind the nav. There is 151px of
free space between the proof row and the bottom-anchored sheet on this
screen, so the offset can simply be taken from there. */
.hero__content { padding-top: calc(70px + 66px); }
}
@media (max-width: 767px) and (max-height: 720px) {
/* The eyebrow is the page's H1. An earlier short-screen rule in
css/mow.css hid it outright to buy vertical room, back when the hero
was one bottom-anchored stack with none to spare. The split layout has
98px of free space between the proof row and the sheet on this screen
(measured), so the H1 comes back — a display:none H1 is a real cost to
a page that ranks on "landscaping Port Charlotte". */
.hero__eyebrow { display: block !important; }
/* And the offset clears the nav with the eyebrow restored. */
.hero__content { padding-top: calc(70px + 76px); }
}
/* ════════════════════════════════════════════════════════════
THE SHEET GOES LOWER — third pass, and this time by removing
rows rather than by shaving padding.
Asked for three times now, and the previous two passes only tightened
spacing, which buys 20-30px and leaves the sheet's top edge at 48% of
the screen. The height is set by what is IN the form: a title, three
fields, a button and a note. Padding cannot move it much; a row can.
The service