disclosures
============================================================================
REBUILT 2026-08-10. It was eight +
pairs stacked in a 700px centred
column with every answer open at once, which read as one undifferentiated
wall. It is now an anchor column on the left and the questions on the right,
and each Q&A is a native /.
NATIVE DISCLOSURE, NOT A SCRIPTED ONE. Everything a homemade accordion has to
earn back by hand is free here and already correct: Tab reaches every
question, Enter and Space toggle it, a screen reader announces a button with
an expanded or collapsed state, and it all still works with JavaScript
switched off. There is NO JavaScript behind this section — site.js does not
know it exists, and nothing here depends on it running.
THE FAQPage SCHEMA STILL DESCRIBES THE PAGE. Google asks that the answer be
present for a visitor, and text inside a closed is in the DOM and
in the served HTML — it is not injected, not fetched and not display:none'd
by a class. The first item ships open so the section never reads as empty.
MEASURE. .faq-layout caps itself at 1280px inside the 1680px .container, the
same way .ba-set carries its own cap. At that width the answer column sets
body copy at roughly 73 characters, inside the 70-75 band the rest of the
site holds to (see .container-narrow). Widening the cap makes the answers
harder to read, not easier.
NO STICKY, AS OF 2026-08-10. The left column used to stick below the header
from 901px up. The testimonial block moving into the bottom of that column
is what ended it: the rail roughly doubled in height, and a sticky box
taller than the viewport hides its own bottom permanently. The full sum is
under the media query at the foot of this section — read it before putting
sticky back.
.reveal is still on the PIECES INSIDE .faq-aside and never on .faq-aside
itself. That started as a sticky requirement: .reveal settles at
transform:translateY(0), which is still a transform, and a transformed
ancestor becomes the containing block and silently kills sticky on
everything inside it. Sticky is gone so the constraint is lifted, but four
small fades down the rail read better than one big one, so it stays.
CONTRAST — computed for this pass, sRGB, WCAG 2.x, AA needs 4.5 for body
text and 3.0 for a control's own boundary:
green-deep #14331F on white #FDFBF6 question text 13.33
ink-mid #3F4A40 on white #FDFBF6 answer text 8.97
green-deep on beige #E8DFC9 question, row hovered 10.39
green-mid #266741 badge ring on white 6.55
green-mid badge ring on beige (hovered row) 5.11
green-deep chevron on the beige badge 10.39
green-deep chevron on the white badge (hovered) 13.33
cream chevron on the green-deep badge (open) 12.35
========================================================================== */
/* STACKED (up to 900px) the whole block holds 700px — the same measure as
.container-narrow, which is what this section used to sit in. Without this
cap the single column runs the full container and sets the answers at 89
characters on a 900px tablet, which is wider than the wall of text this pass
was meant to fix. The 1280px two-column cap is set in the media query below.
.faq-foot carries the same numbers so the two buttons line up with the
columns above them rather than with the 1680px container. */
.faq-layout{
display:grid;grid-template-columns:1fr;gap:34px;
max-width:700px;margin-inline:auto;
}
.faq-foot{max-width:700px;margin-inline:auto;}
/* ---- LEFT COLUMN — the anchor ---------------------------------------------
Heading, one line of lead-in, and one quiet card. It supports the questions;
it is not a second call to action competing with them, which is why the card
carries the GHOST button and the red one stays where it already was, at the
foot of the section. One red primary per section. */
.faq-aside .section-head{margin-bottom:0;max-width:none;}
.faq-lead{margin-top:20px;}
.faq-cta{
margin-top:26px;
background:var(--white);border:1px solid var(--beige-deep);
border-radius:var(--radius);padding:24px 24px 26px;
}
.faq-cta h3{font-size:1.08rem;margin-bottom:8px;}
.faq-cta p{font-size:1rem;margin:0;}
.faq-cta .btn{margin-top:18px;}
/* (0,2,0) — beats .faq-cta p above on class count, so the margin lands. */
.faq-cta .faq-cta-call{margin-top:14px;font-size:.95rem;}
/* The number renders as TEXT here, not a tel: link. Traffel house rule: tel:
exists in exactly three places on this site (header, hero, footer). */
.faq-cta-num{white-space:nowrap;}
/* ---- RIGHT COLUMN — the questions ---------------------------------------- */
.faq-list{display:grid;gap:12px;}
.faq-item{
background:var(--white);
border:1px solid var(--beige-deep);
border-left:4px solid var(--green-bright);
border-radius:0 var(--radius) var(--radius) 0;
transition:border-color .25s var(--t),box-shadow .25s var(--t);
}
.faq-item[open]{border-left-color:var(--green-deep);box-shadow:var(--shadow-sm);}
/* THE ROW. The whole thing is the click target — 60px tall minimum, well over
the 44px touch floor, and the padding is part of the target rather than dead
space beside it.
Three marker resets, and all three are needed: display:flex drops the
list-item box in Chrome and Firefox, list-style covers Firefox if the display
value is ever changed back, and ::-webkit-details-marker is the only thing
Safari listens to. */
.faq-summary{
display:flex;align-items:center;justify-content:space-between;gap:16px;
cursor:pointer;list-style:none;
padding:16px clamp(16px,2vw,22px);min-height:60px;
border-radius:0 var(--radius) var(--radius) 0;
transition:background .2s var(--t);
}
.faq-summary::-webkit-details-marker{display:none;}
.faq-summary::marker{content:"";}
.faq-item[open] .faq-summary{border-radius:0 var(--radius) 0 0;}
/* min-width:0 is load-bearing on a flex item: without it the automatic minimum
size is the longest word, and a long question would push the badge off the
panel instead of wrapping. */
.faq-q{flex:1 1 auto;min-width:0;font-size:1.06rem;line-height:1.35;margin:0;}
.faq-summary:hover,
.faq-summary:focus-visible{background:var(--beige);}
/* (0,2,0) beats the global *:focus-visible (0,1,0). The offset is NEGATIVE so
the ring is drawn inside the panel — at the global +3px it would be painted
outside the card and clipped by the neighbour above. Same reasoning as
.step:focus-visible. */
.faq-summary:focus-visible{outline:3px solid var(--red);outline-offset:-3px;border-radius:0 var(--radius) var(--radius) 0;}
/* THE INDICATOR. A chevron drawn from two borders on a rotated box — no glyph,
so it cannot be resized or shifted by whichever system font is resolved.
The ring is what carries the 3:1 the badge itself cannot: a --beige fill on a
--white panel is 1.28:1, and this is the affordance that says the row opens. */
.faq-mark{
flex:0 0 auto;width:30px;height:30px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
background:var(--beige);border:2px solid var(--green-mid);color:var(--green-deep);
transition:transform .3s var(--t),background .2s var(--t),border-color .2s var(--t),color .2s var(--t);
}
.faq-mark::before{
content:"";display:block;width:7px;height:7px;margin-top:-3px;
border-right:2.5px solid currentColor;border-bottom:2.5px solid currentColor;
transform:rotate(45deg);
}
.faq-summary:hover .faq-mark,
.faq-summary:focus-visible .faq-mark{background:var(--white);}
.faq-item[open] .faq-mark{
transform:rotate(180deg);
background:var(--green-deep);border-color:var(--green-deep);color:var(--cream);
}
.faq-a{
padding:16px clamp(16px,2vw,22px) 20px;
border-top:1px solid var(--beige-deep);
}
.faq-a p{font-size:1.02rem;margin:0;}
.faq-a p+p{margin-top:12px;}
/* Native cannot transition its own height without script, and this
site is not adding any. So the ANSWER fades and settles instead — one
animation, opacity and transform only, nothing that can reflow the page. */
.faq-item[open] .faq-a{animation:faq-reveal .26s var(--t) both;}
@keyframes faq-reveal{
from{opacity:0;transform:translateY(-6px);}
to {opacity:1;transform:translateY(0);}
}
/* The blanket block in section 2 already flattens both of these to nothing.
They are stated again here so the intent is readable at the component. */
@media (prefers-reduced-motion: reduce){
.faq-item[open] .faq-a{animation:none;}
.faq-mark{transition:none;}
}
/* Two columns from 901px up — the same breakpoint the hero uses, so the page
changes shape once rather than twice. */
@media (min-width:901px){
.faq-layout,.faq-foot{max-width:1280px;}
.faq-layout{
grid-template-columns:minmax(280px,1fr) minmax(0,1.42fr);
gap:clamp(30px,3.2vw,56px);
/* start, not stretch. This began life as a sticky requirement — a stretched
grid item fills the whole row and has nowhere to stick to. Sticky is gone
and it earns its place anyway: with the default stretch the shorter
column is dragged to the height of the taller one, and any background or
border added to it later would draw a box round a lot of empty space. */
align-items:start;
}
}
/* ---- WHY THERE IS NO position:sticky ON .faq-aside ANY MORE ----------------
REMOVED 2026-08-10, together with its @media (max-height:740px) guard, when
the testimonial block moved into the bottom of this column.
The rule was .faq-aside{position:sticky;top:calc(clamp(54px,7.4vw,76px) + 42px)}
and the guard turned it off under 740px of viewport height. Both are gone.
THE PROBLEM. A sticky element with only a `top` offset pins its TOP edge and
lets everything past the bottom of the viewport fall off the screen and stay
there. If the aside is taller than (viewport height - top offset), the bottom
of it is unreachable no matter how far the visitor scrolls. Here that bottom
is the estimate button and Trevor's phone number.
THE SUM, computed from this stylesheet at the 1280px cap (left rail 506px,
17px root, widest h2 clamp):
heading block eyebrow 34.6 + h2 two lines 96.8 + rule 24 155.4
lead-in 20 margin + three lines at 32.4 117.3
contact card 26 margin + 2 border + 50 padding + h3 27.4
+ p two lines 58.5 + button 78.1 + call line 41.8 283.8
---------------------------------------------------------------------
as it shipped this morning 556.5 (the old note said "roughly 554")
quotes heading 38 margin + h2 29.5 + 16 margin 83.5
three quote cards at 252.2, plus two 12px gaps 780.6
---------------------------------------------------------------------
the rail now 1420.6
Top offset is clamp(54px,7.4vw,76px) + 42 = 118px on any screen over
1027px wide. So sticky would need 1539px of VIEWPORT HEIGHT to be safe, or
1275px if only two quotes are ever published.
Nothing normal is that tall. A 1080p monitor gives about 950px of usable
viewport after browser chrome, and a 1440p monitor about 1290px — so even
the two-quote case fails on a 1440p screen. Keeping sticky would have meant
raising the guard from 740px to ~1540px, i.e. shipping a rule that is
switched off on essentially every landscape desktop in use. A rule that
never fires is not a feature, it is a trap for whoever reads it next.
So the column scrolls with the page, like every other column on this site.
IF THE QUOTES ARE EVER CUT BACK OUT of this rail and you want sticky again:
restore both the rule and a max-height guard, and recompute the guard from
whatever the rail actually measures. Do not restore the old 740px — it was
derived from a 554px rail that no longer exists.
-------------------------------------------------------------------------- */
/* ============================================================================
14b. TESTIMONIALS — BUILT AND STYLED, NOT IN USE ANYWHERE
============================================================================
Nothing on this site carries these classes today. The markup they belong to
sits COMMENTED OUT on the home page, in the LEFT COLUMN of the FAQ section
directly under the "Still have a question?" card, with the full explanation
of why. Short version: there are no reviews yet, and we are not writing any
— a fabricated testimonial is a violation of the FTC's Rule on the Use of
Consumer Reviews and Testimonials (16 CFR Part 465) and the liability lands
on Trevor. No Review or AggregateRating JSON-LD goes anywhere near this site
until real, permissioned quotes are actually rendering on the page.
The styling is finished so that uncommenting the block and pasting in real,
permissioned quotes is the whole job.
REBUILT 2026-08-10 FOR THE RAIL. It used to be a three-across grid on a
full-width deep-green band of its own. Trevor asked for the reviews to sit
next to the questions, so it is a vertical stack in a narrow column on cream
now, and almost none of the old rules survived the move:
DELETED .tq-grid — repeat(auto-fit,minmax(290px,1fr)) with a 1180px cap.
In a rail that measures 342px at a 901px viewport and 511px at
its widest there is only ever one column, so auto-fit had nothing
to fit and the cap was three times wider than the box. Replaced
by .tq-stack: one column in the rail, and a single deliberate
two-up rule for the STACKED layout below 901px, where the column
is up to 700px wide and one-up would run very long.
CHANGED every colour. The card was --beige at 7% over --green-deep with
cream and beige text on it, which is close to invisible on a
cream section. It is a --white card with dark text now.
CHANGED the skeleton, from .card-dark's 4px top border to .faq-item's 4px
LEFT border and matching radius, so the quotes down the left rail
and the questions down the right read as one component rather
than two.
CHANGED every size down. Padding 26/24 -> 18/20, quote mark 2.4rem ->
1.8rem, gaps 24px -> 12px. The old numbers were drawn for a
~375px card in a wide band with air all round it; this one is
load-bearing content in a column with a page beside it.
.faq-quotes and .faq-quotes-title are named for the FAQ but live here rather
than in section 14, because they exist only to carry this block. If the
quotes are ever cut from the page, everything below this comment goes with
them and section 14 needs no edit at all.
CONTRAST — computed for this pass, sRGB, WCAG 2.x. AA needs 4.5 for body
text and 3.0 for a meaningful non-text boundary. Card is --white #FDFBF6:
ink-mid #3F4A40 quote text 8.97
green-deep #14331F customer name 13.33
green-mid #266741 town / job type 6.55
green-bright #2E7D4F 4px card edge, on the --cream section 4.52
green-bright #2E7D4F quote glyph, on the --white card 4.88
The last two are decoration and are aria-hidden or a border, so neither has
to pass anything; both clear the 4.5 body-text bar anyway. The 1px
--beige-deep hairlines are 1.45 on --white, which is exactly what .faq-cta
and .faq-item already draw beside them — a seam, not a boundary anything is
conveyed by.
========================================================================== */
/* The block as a whole. 38px is enough of a gap under the contact card that the
rail reads as two separate things rather than one long stack of cards. */
.faq-quotes{margin-top:38px;}
/* The heading is an — right level, h3 size. .h-sub sets the
size in section 3; this only has to space it. */
.faq-quotes-title{margin-bottom:16px;}
/* A STACK, NOT A GRID. One column, always, at every width this rail exists at.
The two-up rule further down applies only in the STACKED layout below 901px,
where the column is up to 700px wide and one-up would run very long. */
.tq-stack{display:grid;gap:12px;}
/* Same skeleton as .faq-item across the gap: one green edge, one hairline, the
same radius, so the left rail and the right rail read as one component. */
.tq-card{
background:var(--white);
border:1px solid var(--beige-deep);
border-left:4px solid var(--green-bright);
border-radius:0 var(--radius) var(--radius) 0;
padding:18px clamp(16px,1.6vw,20px);
display:flex;flex-direction:column;
}
/* Decorative, aria-hidden in the markup. Sized to mark the card without taking
a whole line of the column: at 1.8rem on a .62 line-height it costs 19px. */
.tq-open{
display:block;font-family:var(--font-cond);font-stretch:condensed;
font-size:1.8rem;line-height:.62;color:var(--green-bright);margin-bottom:10px;
}
/* flex:1 does nothing in the one-column rail, where cards are their own height.
It earns its place in the two-up stacked layout below 901px, where the grid
makes both cards in a row the same height and this is what keeps the two
attribution lines level with each other instead of floating mid-card. */
.tq-quote{margin:0;flex:1;}
.tq-quote p{font-size:.99rem;line-height:1.62;margin:0;}
.tq-quote p+p{margin-top:10px;}
.tq-attrib{margin-top:14px;padding-top:12px;border-top:1px solid var(--beige-deep);}
.tq-name{display:block;font-weight:800;font-size:.96rem;color:var(--green-deep);}
.tq-meta{
display:block;margin-top:2px;
font-size:.72rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
color:var(--green-mid);
}
/* STACKED LAYOUT ONLY (up to 900px). The two columns become one 700px column,
the aside is no longer a rail, and three quote cards one under another put
roughly 800px between the "Still have a question?" card and the first
question. Two across halves that wherever there is room for it: 700px gives
two 344px cards, and a 375px phone falls back to one. This is the only place
auto-fit belongs in this component. */
@media (max-width:900px){
.faq-quotes{margin-top:32px;}
.tq-stack{grid-template-columns:repeat(auto-fit,minmax(268px,1fr));}
/* THE ODD LAST CARD. Two columns and three quotes leaves the third one alone
against the left edge of its row, which is the same "looks like one failed
to load" problem .grid-2>.card:nth-child(5):last-child solves in section 9,
and this is the same fix: normal column width, centred on the row, never
stretched across it. calc(50% - 6px) is one column when the gap is 12px.
The selector reads: the LAST card, at an ODD position, from the third card
on. So it catches 3 quotes and 5, and deliberately does not catch 1 — a
single quote has a collapsed empty track beside it and is already full
width, and halving it would be a bug rather than a fix. */
.tq-stack>.tq-card:last-child:nth-child(odd):nth-child(n+3){
grid-column:1/-1;justify-self:center;width:calc(50% - 6px);
}
/* Below ~592px of viewport the column is narrower than 2x268+12, so auto-fit
is already down to one track and the rule above must hand the width back. */
}
@media (max-width:591px){
.tq-stack>.tq-card:last-child:nth-child(odd):nth-child(n+3){width:100%;}
}
/* ============================================================================
15. FORM
========================================================================== */
.form-card{
background:var(--cream);border:1px solid var(--beige-deep);border-radius:var(--radius);
padding:34px 32px;box-shadow:var(--shadow-sm);
}
.form-card.on-green{background:var(--cream);}
@media(max-width:560px){.form-card{padding:24px 20px;}}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
@media(max-width:620px){.form-row{grid-template-columns:1fr;}}
.field{display:flex;flex-direction:column;margin-bottom:18px;}
.field label{
font-size:.83rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
color:var(--green-deep);margin-bottom:7px;
}
.field .opt{font-weight:600;text-transform:none;letter-spacing:0;color:var(--ink-mid);font-size:.8rem;}
.field input,.field select,.field textarea{
/* 1.0625rem = 17px. iOS Safari zooms the viewport on focus for any field
under 16px; 1rem sat exactly on that line, this clears it and matches the
body copy size. Do not drop this below 1rem. */
font-family:var(--font-body);font-size:1.0625rem;color:var(--charcoal);
background:var(--white);border:2px solid var(--field-border);border-radius:var(--radius);
padding:13px 14px;transition:border-color .2s var(--t),box-shadow .2s var(--t);
width:100%;
}
.field textarea{min-height:130px;resize:vertical;}
.field select{cursor:pointer;appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--green-deep) 50%),linear-gradient(135deg,var(--green-deep) 50%,transparent 50%);background-position:calc(100% - 20px) 55%,calc(100% - 14px) 55%;background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:42px;}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(30,86,49,.14);}
/* Placeholder text is text, so it needs the full 4.5:1. #8A9188 was 3.13:1 on
the --white field. #6B7069 is the same green-grey hue at 4.90:1, still
clearly lighter than the --charcoal a visitor types. */
.field input::placeholder,.field textarea::placeholder{color:#6B7069;}
.form-msg{
margin-top:16px;padding:14px 16px;border-radius:var(--radius);
font-size:.98rem;font-weight:600;display:none;
}
.form-msg.show{display:block;}
.form-msg.ok{background:rgba(46,125,79,.13);color:var(--green-deep);border:1px solid var(--green-bright);}
.form-msg.err{background:rgba(179,58,43,.10);color:var(--red-dark);border:1px solid var(--red);}
.form-fine{font-size:.86rem;color:var(--ink-mid);margin-top:16px;}
/* ============================================================================
16. CONTACT / INFO BLOCKS
========================================================================== */
.info-block{
background:var(--white);border:1px solid var(--beige-deep);border-radius:var(--radius);
padding:24px 26px;border-left:4px solid var(--green-bright);
}
.info-block h3{font-size:1.08rem;margin-bottom:8px;}
.info-block p{font-size:1rem;margin:0;}
.info-big{font-size:1.5rem;font-weight:800;color:var(--green-deep);letter-spacing:.01em;}
/* ============================================================================
17. FOOTER
========================================================================== */
.site-footer{background:var(--green-deep);padding:64px 0 0;}
.footer-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:38px;}
@media(max-width:980px){.footer-top{grid-template-columns:1fr 1fr;gap:34px;}}
@media(max-width:560px){.footer-top{grid-template-columns:1fr;}}
.footer-blurb{color:var(--beige);font-size:.98rem;margin-top:18px;max-width:38ch;}
.footer-est{
display:inline-block;margin-top:16px;padding:5px 12px;border:1px solid rgba(232,223,201,.32);border-radius:100px;
font-size:.7rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--green-pale);
}
.footer-col h4{
font-size:.76rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
color:var(--green-pale);margin-bottom:16px;
}
/* Footer links were ~26px tall with a 10px gap — a 36px pitch, under the 44px
touch minimum. The padding moved off the
and onto the so the whole
target is tappable rather than being dead space between links.
CORRECTED 2026-08-10: 9px of padding only reached 43.6px
(.97rem x 16px root = 15.52px, x 1.65 line-height = 25.6px, + 18px), which
is a fraction under the minimum. 10px clears it at 45.6px. */
.footer-col ul li{margin-bottom:0;}
.footer-col a{color:var(--beige);font-size:.97rem;display:inline-block;padding:10px 0;}
.footer-col a:hover{color:var(--white);}
.footer-call{display:block;margin-bottom:6px;}
.footer-call .lbl{font-size:.7rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--green-pale);display:block;}
.footer-call .num{font-size:1.32rem;font-weight:800;color:var(--cream);}
.footer-call:hover .num{color:var(--green-pale);}
.footer-bottom{
margin-top:52px;border-top:1px solid rgba(232,223,201,.2);
padding:22px 0 28px;
display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;justify-content:space-between;
}
.footer-bottom p,.footer-bottom a{color:var(--green-pale);font-size:.86rem;margin:0;}
/* Same touch-target reasoning as .footer-col a. CORRECTED 2026-08-10: at
.86rem these were 42.7px with 10px of padding; 11px reaches 44.7px. */
.footer-bottom a{display:inline-block;padding:11px 0;}
.footer-bottom a:hover{color:var(--beige);}
.footer-legal{display:flex;gap:4px 20px;flex-wrap:wrap;align-items:center;}
/* ============================================================================
18. REVEAL ON SCROLL
========================================================================== */
/* NO-JS GUARD — load-bearing since the site became real pages on 2026-08-10.
.reveal starts at opacity:0 and only becomes visible when site.js adds .in.
While the whole site was one JavaScript-routed document that was harmless,
because nothing rendered without JavaScript anyway. Every page is meant to
render on its own now, and without this rule a visitor with JavaScript off
would get the header, the footer, and thirty-odd invisible blocks in
between. ships with class="no-js" and a one-line inline script in
every removes it before first paint, so this rule only ever applies
when that script did not run. */
.no-js .reveal{opacity:1;transform:none;transition:none;}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s var(--t),transform .6s var(--t);}
.reveal.in{opacity:1;transform:translateY(0);}
.reveal-d1{transition-delay:.09s;}
.reveal-d2{transition-delay:.18s;}
.reveal-d3{transition-delay:.27s;}
/* ---- THE RULE DRAWS ITSELF IN -----------------------------------------------
Added 2026-08-10. The 64px brick-red bar under a section heading used to
simply appear with the block. It now grows out from the heading's edge a
beat after the words arrive, so the heading lands and then gets underlined.
transform only — the bar's box never changes size, so nothing below it moves.
Only .rule elements INSIDE a .reveal are touched; a .rule anywhere else is
left exactly as it was, so there is no way for one to end up stuck at zero
width. The .no-js line is the same guard the block above relies on.
-------------------------------------------------------------------------- */
.no-js .reveal .rule{transform:none;transition:none;}
.reveal .rule{transform:scaleX(0);transform-origin:left center;transition:transform .5s var(--t) .16s;}
.reveal .rule.centered{transform-origin:center center;}
.reveal.in .rule{transform:scaleX(1);}
/* ---- STAGGERED GROUPS -------------------------------------------------------
Added 2026-08-10. A container marked .reveal-stagger reveals its OWN
CHILDREN one after another instead of the whole block arriving at once.
Deliberately used ONLY on groups of tiles and cards that a visitor scans —
the service cards, the six promises, the five town cards. It is never put on
a block of body copy: text a visitor is trying to read must not be held back
waiting for its turn. The whole cascade is capped at .42s so the last item is
never far behind the first.
.reveal-stagger is NOT itself a .reveal — the container stays visible and
only the children move, which avoids the double fade you get from nesting
the two. site.js observes both class names.
-------------------------------------------------------------------------- */
.no-js .reveal-stagger>*{opacity:1;transform:none;transition:none;}
.reveal-stagger>*{opacity:0;transform:translateY(14px);transition:opacity .55s var(--t),transform .55s var(--t);}
.reveal-stagger.in>*{opacity:1;transform:translateY(0);}
.reveal-stagger.in>*:nth-child(2){transition-delay:.07s;}
.reveal-stagger.in>*:nth-child(3){transition-delay:.14s;}
.reveal-stagger.in>*:nth-child(4){transition-delay:.21s;}
.reveal-stagger.in>*:nth-child(5){transition-delay:.28s;}
.reveal-stagger.in>*:nth-child(6){transition-delay:.35s;}
.reveal-stagger.in>*:nth-child(n+7){transition-delay:.42s;}
/* ---- PHOTOGRAPHY, ON HOVER --------------------------------------------------
A slow 3% push into the picture. The frames all carry overflow:hidden and the
images are absolutely inset at 100%/100% with object-fit:cover, so this
crops very slightly inward and cannot move a single pixel of layout.
.logo is excluded: that frame is object-fit:contain around artwork with the
business name set in it, and zooming a wordmark looks like a mistake.
Behind (hover:hover) so it never sticks after a tap. */
@media (hover:hover){
.photo-frame:not(.logo) img,.ba-frame .ba-img{transition:transform .75s var(--t);}
.photo-frame:not(.logo):hover img,.ba-item:hover .ba-img{transform:scale(1.03);}
.photo-frame:not(.logo),.ba-frame{transition:border-color .3s var(--t);}
.photo-frame:not(.logo):hover{border-color:var(--green-bright);}
}
/* ============================================================================
19. LEGAL PROSE
========================================================================== */
.legal-prose h3,.legal-prose h2{margin-top:32px;margin-bottom:8px;font-size:1.15rem;}
.legal-prose p{margin-top:12px;}
.legal-prose ul{margin-top:12px;}
/* ============================================================================
20. LOCATION PAGE BLOCKS
Three small pieces used ONLY by the five service-area pages
(#page-christiansburg, -blacksburg, -roanoke, -floyd, -new-river-valley).
Why they need their own rules: a location page is a SINGLE narrow reading
column — .container-narrow.prose carrying an inline style="padding:0" — so it
can't borrow the two-column photo slot the service pages use. These are the
column-width equivalents. Everything below is built from existing variables
and existing components; .photo-frame, .photo-note and .textlink are reused
exactly as they are, with no new colors and no new JavaScript.
========================================================================== */
/* ---- QUICK FACTS -----------------------------------------------------------
A scannable strip under the intro paragraph. Every line on every page is
drawn from copy already written on that page — no response times, no job
counts, no years, no distances that the page doesn't already state.
SPECIFICITY: the .prose prefix is load-bearing, not decoration. .prose ul
(0,1,1) and .prose ul li (0,1,2) already set a green bullet dot, a 28px
indent, a larger size and a bottom margin. .prose .quick-facts (0,2,0) and
.prose .quick-facts li (0,2,1) beat them. Drop the prefix and the bullets
and the indent come straight back.
-------------------------------------------------------------------------- */
.prose .quick-facts{
display:grid;
/* auto-fit: four across on a full-width column, two mid, one on a phone,
with no media query. It also never strands a lone item on its own row the
way a fixed four-column grid would when a page only has three facts. */
grid-template-columns:repeat(auto-fit,minmax(168px,1fr));
/* A 1px gap over a --beige-deep background draws the hairlines BETWEEN cells
without every cell carrying its own border and doubling up. */
gap:1px;background:var(--beige-deep);
border:1px solid var(--beige-deep);border-radius:var(--radius);
overflow:hidden;margin:26px 0 0;
}
.prose .quick-facts li{
background:var(--white);
margin:0;padding:15px 17px;
font-size:.95rem;line-height:1.5;color:var(--ink-mid);
}
.prose .quick-facts li::before{display:none;}
.quick-facts strong{
display:block;margin-bottom:4px;
font-size:.68rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
color:var(--green-mid);
}
/* ---- LOCATION PHOTO --------------------------------------------------------
One photo per location page, sitting in the reading column beside the section
it illustrates. .photo-frame does all the real work (ratio box, inline SVG
placeholder underneath, onerror swap); this only decides how wide it gets.
NEVER let one of these render wider than its source file:
column max width = 700px (.container-narrow, padding zeroed inline)
landscape files used here = 1100px and 721px wide -> safe at full column
portrait files used here = 825x1100 -> capped at 400px below
400px also stops a 3/4 frame from running ~930px tall in the middle of a
page. If a wider column is ever introduced, re-check the 721px file first.
-------------------------------------------------------------------------- */
.loc-photo{margin:30px 0 4px;}
.loc-photo.portrait{max-width:400px;margin-inline:auto;}
/* ---- NEARBY AREAS ----------------------------------------------------------
A quiet row of links to the other service-area pages at the foot of each one.
This is navigation, not a feature: a hairline and some text, no card, no box.
The vertical padding on the links is what gets each one to a ~44px touch
target without adding any visible chrome.
-------------------------------------------------------------------------- */
.nearby{
display:flex;flex-wrap:wrap;align-items:center;gap:2px 20px;
margin-top:26px;padding-top:16px;
border-top:1px solid var(--beige-deep);
}
.nearby-label{
font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
color:var(--green-mid);
}
.nearby a{
color:var(--green);font-weight:700;font-size:.95rem;
padding:12px 0;display:inline-block;
border-bottom:2px solid transparent;
}
.nearby a:hover{color:var(--red-dark);border-bottom-color:var(--red);}
/* ============================================================================
21. UTILITY
========================================================================== */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.mt-0{margin-top:0;}
.mt-32{margin-top:32px;}
.mt-44{margin-top:44px;}
.divider{height:1px;background:var(--beige-deep);border:none;margin:44px 0;}
/* ============================================================================
22. THE MOWING TRACK — "Four steps, no runaround" on the home page
============================================================================
A stripe running through the centres of the four numbered circles, and a
push mower that is pushed along it. Behind the mower the stripe reads CUT;
ahead of it, UNCUT. Hovering or focusing a step sends the mower to that
step's circle and the stripe follows it exactly.
HOW THE TWO HALVES SPLIT
CSS owns the look and the resting geometry.
site.js owns the measurements and the movement.
The left/top/width/height below are DEFAULTS, and they are what a visitor
with JavaScript switched off sees: a plain, correctly placed connecting line
through the four circles, and no mower. site.js overwrites all four inline
with real measured pixels the moment it runs, and re-measures on resize, so
the line is exact whatever the type or the container does.
WHY 48px AND 48px
left 48 = .step's 26px left padding + half of the 44px circle.
75% = three of the four equal columns, i.e. circle 1's centre across
to circle 4's.
top 48 = .step's 30px top padding + 22px (half the circle) - 4px (half of
this 8px box). Measured against a real render at several widths:
the circle centres land at y=52, so the box starts at 48.
Only a visitor with JavaScript off ever sees these three; site.js replaces
all of them with measured pixels.
TWO WIDTH BANDS, ON PURPOSE
above 900px four steps across -> horizontal stripe, mower runs on it
900px down steps stack (2x2,
then one column) -> NO stripe and no mower. The section
keeps exactly the hairline separators
it already had, and site.js fills the
four numbered circles in order instead
when the section comes into view.
A VERTICAL STRIPE WAS BUILT AND THEN TAKEN OUT. In the stacked layout the
circles sit at x=48 and the paragraph under each one starts at x=26, so a
line drawn through the circle centres ran straight down through every line
of body copy. The only way to keep it would have been to indent all four
steps to open a lane for it, which is a redesign of the section rather than
a piece of motion. The circles filling in sequence says the same thing and
collides with nothing. Do not re-add a vertical track without first solving
the text collision.
EVERYTHING THAT MOVES IS transform OR opacity. No width, left or top is ever
animated, there is no requestAnimationFrame loop anywhere in this feature,
and under prefers-reduced-motion the global block at the top of this file
flattens every transition and animation named here to nothing.
========================================================================== */
.mow{
position:absolute;
left:48px;right:calc(25% - 48px);top:48px;height:8px;
pointer-events:none; /* never steals a hover from the step it sits on */
z-index:0;
}
/* Only the four-across layout gets it. See the note above. */
@media(max-width:900px){.mow{display:none;}}
/* UNCUT — thinner, dimmer, and visibly tufted. The repeating gradient is the
texture that makes "not mown yet" read at a glance; it is 1.5px of a faint
--green-pale against near-nothing, repeated every 9px. */
.mow-uncut{
position:absolute;left:0;right:0;top:2px;height:4px;border-radius:2px;
background:
repeating-linear-gradient(90deg,rgba(143,184,154,.34) 0 2px,rgba(143,184,154,0) 2px 9px),
rgba(232,223,201,.10);
}
/* CUT — taller, solid, definite, with a lighter top edge so the stripe catches
the light the way a mown pass does. transform-origin is the START of the run,
so scaleX is literally "how far along the mower has got".
No border-radius: a rounded end scaled to 0.02 looks broken. */
.mow-cut{
position:absolute;left:0;top:0;width:100%;height:8px;
background:linear-gradient(to bottom,rgba(232,223,201,.85) 0 2px,var(--green-pale) 2px);
transform:scaleX(0);transform-origin:left center;
transition:transform 0ms linear;
}
/* THE MOWER.
Positioned so its BOTTOM EDGE sits on the centre line of the stripe, because
that is where the wheels are drawn — the machine stands on the ground rather
than floating over it. Horizontal travel is set inline by site.js as a single
translate3d; the bob and the wheels are separate animations on the elements
inside, so the two never fight over one transform. */
/* The SVG's viewBox is 51x41. 56x45 is that shape at a single uniform 1.098
scale — check both numbers together if you ever change one, a non-uniform
pair would stretch the machine. site.js works the rear wheel out as a
FRACTION of this width, so it follows the size automatically. */
.mow-mower{
position:absolute;left:0;
/* The wheels are drawn flush with the bottom of the box, so this is what
puts them on the ground. The extra 2px sits them slightly INTO the stripe
rather than balanced on its centre line — at bottom:50% exactly the machine
read as hovering just above the grass. */
bottom:calc(50% - 2px);
width:56px;height:45px;
transform:translate3d(0,0,0);
transition:transform 0ms linear;
z-index:1; /* under .step-num, which is z-index:2 */
}
.mow-mower svg{width:100%;height:100%;display:block;overflow:visible;}
/* .is-driving is on for exactly as long as a run lasts and is taken off the
moment the mower stops, so neither of these animations is ever left ticking
on a parked mower, an off-screen section or a hidden tab. */
.mow.is-driving .mow-mower svg{animation:mow-bob .42s ease-in-out infinite;}
.mow.is-driving .mow-wheel{animation:mow-wheel .5s linear infinite;}
/* view-box, not fill-box: the origins below are stated in the SVG's own user
units, which is what view-box resolves against. Swapping to fill-box would
silently reinterpret them against each wheel's own bounding box and the
wheels would orbit instead of spin. */
.mow-wheel{transform-box:view-box;}
.mow-wheel-r{transform-origin:24px 37.2px;}
.mow-wheel-f{transform-origin:46px 37.7px;}
@keyframes mow-bob{
0%,100%{transform:translate3d(0,0,0) rotate(0deg);}
50% {transform:translate3d(0,-1px,0) rotate(-.7deg);}
}
@keyframes mow-wheel{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
/* GRASS CLIPPINGS. A handful of flecks thrown out behind the deck, which
settle and fade. They are dropped into the track (which does not move), not
into the mower (which does), so each one stays where it landed instead of
being carried along. site.js positions each with an inline translate3d on the
outer span and then restarts the animation on the inside it.
Three variants, so they do not all fly the same arc. */
.mow-clip{position:absolute;left:0;top:50%;width:5px;height:3px;margin-top:-1px;}
.mow-clip>i{
display:block;width:100%;height:100%;border-radius:1px;
background:var(--green-pale);opacity:0;
--fx:-22px;--fy:11px;
}
.mow-clip.v2>i{--fx:-31px;--fy:6px;}
.mow-clip.v3>i{--fx:-15px;--fy:14px;}
.mow-clip.go>i{animation:mow-fleck .62s var(--t) forwards;}
.mow-clip.v2.go>i{animation-duration:.8s;}
.mow-clip.v3.go>i{animation-duration:.52s;}
@keyframes mow-fleck{
0% {opacity:.85;transform:translate3d(0,0,0) rotate(0deg);}
70% {opacity:.5;}
100%{opacity:0;transform:translate3d(var(--fx),var(--fy),0) rotate(160deg);}
}