/* ==========================================================================
One Source Landscaping — one stylesheet, no build step.
THE DESIGN: every surface is built as a nursery grower's tag — the printed
stake tag that ships with every plant in Florida. Punch hole, photo band,
category rule, name, botanical line in italic, spec rows. It was chosen
because a tag is printed by the grower who actually grew the plant, which is
the in-house-crews argument as an object. Spec rows carry only facts a board
member can read; USDA zone was tried and retired. Full rules in DESIGN.md.
CONTENTS
1. Tokens
2. Reset + base
3. Typography
4. Buttons
5. Layout + sections
6. Header
7. Footer
8. Photo placeholder
9. Spec block
10. Service tag (the rack unit)
11. CTA band
12. Home page
13. Service pages
14. Contact page
15. Privacy + 404
16. Motion
========================================================================== */
/* The Google Fonts request lives in each page's , not in an @import here.
An @import cannot start until this file has downloaded and parsed, which
chains three round trips before the first glyph paints and drags LCP with it.
A in the head races alongside this stylesheet instead. */
/* ==========================================================================
1. Tokens
========================================================================== */
:root {
/* Ground */
--stock: #ffffff;
--stock-sunk: #f2f4f3;
--chipboard: #dfd7c6;
/* Ink — navy from the One Source compass. All body and structural text. */
--ink: #0d2a4a;
--ink-mid: #41576e;
--ink-soft: #5a6b7d; /* 5.48:1 on white — AA at 11px */
--rule: #c9d2da;
--rule-soft: #e3e9ed;
/* Hardware + action */
--grommet: #f4b223; /* gold: punch holes, grommets. Never text. */
--action: #d2232a; /* red: the Request Service control ONLY */
--action-press: #b01e26;
/* Category inks — one per service, spanning hue like a nursery's racks */
--ink-maintenance: #17513a;
--ink-sod: #4e8c2f;
--ink-mowing: #c25a1b;
--ink-irrigation: #1c6fa8;
--ink-fertilization: #8a5a22;
--ink-plants: #b4256b;
--ink-pruning: #0f6b66;
--ink-mulch: #8c3b22;
/* Set per-scope by [data-ink] */
--cat: var(--ink);
--cat-tint: var(--stock-sunk);
--face-tag: 'Archivo', ui-sans-serif, system-ui, sans-serif;
--face-latin: 'Faustina', Georgia, serif;
--container: 1240px;
--gutter: clamp(20px, 4vw, 44px);
--section: clamp(64px, 9vw, 116px);
/* The die-cut edge is the boundary, not the elevation. Tags sit close to
the rack board, so the shadow stays short rather than a soft cloud. */
--shadow-tag: 0 1px 2px rgba(13, 42, 74, 0.10);
--shadow-lift: 0 2px 3px rgba(13, 42, 74, 0.12), 0 5px 10px rgba(13, 42, 74, 0.13);
--ease: cubic-bezier(0.16, 1, 0.3, 1);
/* How far below the viewport top an anchored section comes to rest, clearing
the sticky header. js/main.js reads this so the scroll spy's activation
line and the anchor landing point can never drift apart. */
--anchor-offset: 100px;
}
[data-ink='maintenance'] { --cat: var(--ink-maintenance); --cat-tint: #eef4f1; }
[data-ink='sod'] { --cat: var(--ink-sod); --cat-tint: #f0f6ec; }
[data-ink='mowing'] { --cat: var(--ink-mowing); --cat-tint: #fbf0e9; }
[data-ink='irrigation'] { --cat: var(--ink-irrigation); --cat-tint: #eaf3f9; }
[data-ink='fertilization'] { --cat: var(--ink-fertilization); --cat-tint: #f6f1e9; }
[data-ink='plants'] { --cat: var(--ink-plants); --cat-tint: #fbecf3; }
[data-ink='pruning'] { --cat: var(--ink-pruning); --cat-tint: #e9f4f3; }
[data-ink='mulch'] { --cat: var(--ink-mulch); --cat-tint: #f9efeb; }
/* ==========================================================================
2. Reset + base
========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* Anchor targets stop below the sticky header instead of under it. */
[id]:target { scroll-margin-top: var(--anchor-offset); }
/* The mobile header is taller — logo row plus nav row. */
@media (max-width: 860px) {
:root { --anchor-offset: 120px; }
}
body {
margin: 0;
background: var(--stock);
color: var(--ink);
font-family: var(--face-tag);
font-variation-settings: 'wdth' 100;
font-size: 17px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--ink); text-underline-offset: 3px; text-decoration-thickness: 1px; }
:focus-visible { outline: 3px solid var(--grommet); outline-offset: 2px; border-radius: 2px; }
.sr {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
position: absolute; left: -9999px; top: 0; z-index: 100;
background: var(--ink); color: #fff; padding: 12px 20px; font-weight: 700;
}
.skip:focus { left: 8px; top: 8px; }
/* ==========================================================================
3. Typography
========================================================================== */
/* Expanded, uppercase — the printed tag header. */
.t-head {
font-family: var(--face-tag);
font-variation-settings: 'wdth' 115;
font-weight: 800;
text-transform: uppercase;
letter-spacing: -0.02em;
line-height: 0.98;
margin: 0;
text-wrap: balance;
}
/* Capped at both ends by the longest real headline word at wdth 115 — expanded
caps eat far more width than the nominal size suggests. */
.t-display { font-size: clamp(2.25rem, 5.4vw, 4.75rem); overflow-wrap: break-word; }
.t-h1 { font-size: clamp(2.25rem, 5.2vw, 4rem); }
.t-h2 { font-size: clamp(1.75rem, 3.4vw, 2.75rem); }
.t-h3 { font-size: clamp(1.125rem, 1.7vw, 1.375rem); }
/* Compressed, tracked — spec-row labels. Inside tags and data blocks ONLY.
Never a section eyebrow. */
.t-spec {
font-variation-settings: 'wdth' 75;
font-weight: 600;
font-size: 0.7rem;
letter-spacing: 0.09em;
text-transform: uppercase;
font-variant-numeric: tabular-nums;
line-height: 1.3;
}
/* The one italic-serif device: the botanical line. Never a heading or quote. */
.t-latin {
font-family: var(--face-latin);
font-style: italic;
font-weight: 500;
font-size: 1rem;
letter-spacing: 0.01em;
color: var(--ink-soft);
margin: 0;
}
.t-body { font-size: 1.0625rem; line-height: 1.65; color: var(--ink-mid); max-width: 68ch; }
.t-lead {
font-size: clamp(1.125rem, 1.7vw, 1.3125rem);
line-height: 1.5; color: var(--ink-mid); max-width: 40ch;
}
/* Keeps hyphenated display words from breaking at the hyphen. */
.nb { white-space: nowrap; }
/* ==========================================================================
4. Buttons
========================================================================== */
.btn {
--btn-bg: var(--ink);
--btn-fg: #fff;
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
min-height: 52px; padding: 0 26px;
background: var(--btn-bg); color: var(--btn-fg);
border: 2px solid var(--btn-bg); border-radius: 2px;
font-family: var(--face-tag);
font-variation-settings: 'wdth' 105;
font-weight: 800; font-size: 0.9375rem; letter-spacing: 0.04em;
text-transform: uppercase; text-decoration: none; white-space: nowrap;
cursor: pointer;
transition: background 140ms var(--ease), border-color 140ms var(--ease),
color 140ms var(--ease), transform 140ms var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--action { --btn-bg: var(--action); --btn-fg: #fff; }
.btn--action:hover { --btn-bg: var(--action-press); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); border-color: var(--rule); }
.btn--ghost:hover { border-color: var(--ink); }
.btn--onink { --btn-bg: transparent; --btn-fg: #fff; border-color: rgba(255,255,255,.45); }
.btn--onink:hover { --btn-bg: rgba(255,255,255,.1); border-color: #fff; }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }
/* ==========================================================================
5. Layout + sections
========================================================================== */
.wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); }
.section--sunk { background: var(--stock-sunk); }
/* The measure belongs to the paragraph. Constraining the whole block wraps
short display headings that would otherwise sit on one line. */
.section-head { margin-bottom: clamp(36px, 5vw, 56px); }
.section-head > * + * { margin-top: 16px; }
.section-head h2 { max-width: 20ch; }
.section-head p { color: var(--ink-mid); font-size: 1.0625rem; line-height: 1.6; margin: 0; max-width: 52ch; }
/* The rack — where tags hang. */
.rack { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: clamp(18px, 2.2vw, 26px); }
.crumb {
display: flex; align-items: center; gap: 9px;
font-size: .875rem; color: var(--ink-soft);
margin-bottom: clamp(22px, 3vw, 38px);
}
.crumb a { color: var(--ink-mid); text-decoration: none; }
.crumb a:hover { color: var(--cat); text-decoration: underline; }
/* ==========================================================================
6. Header
========================================================================== */
.hdr { position: sticky; top: 0; z-index: 40; background: var(--stock); border-bottom: 1px solid var(--rule); }
.hdr__in { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 78px; }
.hdr__logo { display: flex; align-items: center; gap: 13px; text-decoration: none; }
/* The full lockup already reads "ONE SOURCE" — the compass is its O. Held at
52px; the 520px-wide source file clears 5x density there. */
.hdr__logo-img { width: auto; height: 52px; }
/* Division, set beside the parent brand and separated by a hairline. */
.hdr__div {
position: relative;
padding-left: 14px;
color: var(--ink-soft);
line-height: 1.35;
}
.hdr__div::before {
content: '';
position: absolute; left: 0; top: 50%; translate: 0 -50%;
width: 1px; height: 30px; background: var(--rule);
}
.hdr__nav { display: flex; align-items: center; gap: 4px; }
.hdr__link {
display: inline-flex; align-items: center; gap: 6px;
padding: 9px 13px; border-radius: 2px;
font-variation-settings: 'wdth' 100; font-weight: 600; font-size: .9375rem;
text-decoration: none; color: var(--ink); cursor: pointer;
list-style: none; white-space: nowrap;
}
.hdr__link::-webkit-details-marker { display: none; }
.hdr__link:hover { background: var(--stock-sunk); }
/* The underline marks where you are: the current page on inner pages, and the
section you're scrolled to on the home page. */
.hdr__link[aria-current='page'],
.hdr__link[data-open],
.hdr__link[data-active] { box-shadow: inset 0 -2px 0 var(--grommet); }
/* Once the scroll spy is running it owns the underline, so the page-level
aria-current must stop drawing one or Home would stay lit alongside it.
aria-current itself is kept — it is still true, and screen readers use it. */
.hdr__nav[data-spy-active] .hdr__link[aria-current='page']:not([data-active]) {
box-shadow: none;
}
.hdr__menu { position: relative; }
/* An absolutely-positioned body still lays out when closed, leaving
the service links stacked over the page content. Hide it explicitly. */
.hdr__menu:not([open]) .hdr__drop { display: none; }
.hdr__menu[open] > .hdr__link { background: var(--stock-sunk); }
.hdr__menu[open] > .hdr__link svg { transform: rotate(180deg); }
.hdr__link svg { transition: transform 160ms var(--ease); }
.hdr__drop {
position: absolute; top: calc(100% + 8px); left: 0; min-width: 270px;
background: var(--stock); border: 1px solid var(--rule); border-radius: 3px;
box-shadow: var(--shadow-lift); padding: 6px; display: flex; flex-direction: column;
}
.hdr__drop-link {
display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 2px;
font-size: .9375rem; font-weight: 500; text-decoration: none; color: var(--ink);
}
.hdr__drop-link:hover { background: var(--cat-tint); color: var(--cat); }
.hdr__drop-link[aria-current='page'] { background: var(--cat-tint); color: var(--cat); font-weight: 700; }
.hdr__swatch { width: 9px; height: 9px; border-radius: 1px; background: var(--cat); flex: none; }
.hdr__act { display: flex; align-items: center; gap: 16px; }
.hdr__phone {
font-variation-settings: 'wdth' 100; font-weight: 800; font-size: 1.0625rem;
text-decoration: none; letter-spacing: -0.01em; white-space: nowrap;
}
.hdr__phone:hover { color: var(--action); }
.hdr__cta { min-height: 46px; padding-inline: 20px; font-size: .875rem; }
/* Small-screen icon controls: hidden on desktop, where the phone number and the
full CTA are already spelled out. */
.hdr__icon { display: none; }
/* Hamburger: three bars that fold into an X when the menu is open. */
.hdr__burger-box { position: relative; display: block; width: 19px; height: 13px; }
.hdr__burger-box span {
position: absolute; left: 0; width: 100%; height: 2px; border-radius: 1px;
background: currentColor;
transition: transform 220ms var(--ease), opacity 140ms linear, top 220ms var(--ease);
}
.hdr__burger-box span:nth-child(1) { top: 0; }
.hdr__burger-box span:nth-child(2) { top: 5.5px; }
.hdr__burger-box span:nth-child(3) { top: 11px; }
.hdr__burger[aria-expanded='true'] .hdr__burger-box span:nth-child(1) { top: 5.5px; transform: rotate(45deg); }
.hdr__burger[aria-expanded='true'] .hdr__burger-box span:nth-child(2) { opacity: 0; }
.hdr__burger[aria-expanded='true'] .hdr__burger-box span:nth-child(3) { top: 5.5px; transform: rotate(-45deg); }
@media (max-width: 1080px) { .hdr__phone { display: none; } }
@media (max-width: 860px) {
/* One row: lockup left, phone + hamburger right. The nav collapses behind the
burger, so nothing is fighting for horizontal space. */
/* The row is as tall as the lockup, not the buttons. Trading header padding
for logo height keeps the bar at the same 65px while letting the mark
outweigh the two 44px controls beside it. */
.hdr__in {
display: grid; grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
row-gap: 0; min-height: 0; padding-block: 6px;
}
.hdr__logo { grid-row: 1; grid-column: 1; }
.hdr__act { grid-row: 1; grid-column: 2; justify-self: end; gap: 8px; }
.hdr__logo-img { height: 52px; }
.hdr__div { display: none; }
/* The desktop actions give way to the two icon buttons. */
.hdr__cta { display: none; }
.hdr__icon {
display: inline-flex; align-items: center; justify-content: center;
width: 44px; height: 44px; flex: none;
border: 1px solid var(--rule); border-radius: 2px;
background: var(--stock); color: var(--ink);
text-decoration: none; cursor: pointer; padding: 0;
}
.hdr__icon:hover { border-color: var(--ink); }
.hdr__icon:active { background: var(--stock-sunk); }
/* The nav becomes a panel on its own row. It is visible by default so the
site still navigates with JavaScript off; main.js adds [data-js] to the
header, which is what switches the collapsing behaviour on. */
.hdr__nav {
grid-row: 2; grid-column: 1 / -1;
flex-direction: column; align-items: stretch;
gap: 0; margin-top: 8px;
border-top: 1px solid var(--rule-soft);
}
.hdr[data-js] .hdr__nav { display: none; }
.hdr[data-js][data-nav-open] .hdr__nav { display: flex; }
/* Full-width rows: as a flex child the would size to its text,
leaving its background and chevron stranded mid-panel. */
.hdr__link {
display: flex; width: 100%;
padding: 13px 4px; border-radius: 0;
border-bottom: 1px solid var(--rule-soft);
font-size: 1rem;
}
.hdr__nav > .hdr__link:last-child { border-bottom: 0; }
.hdr__link[aria-current='page'], .hdr__link[data-open], .hdr__link[data-active] {
box-shadow: inset 3px 0 0 var(--grommet);
padding-left: 12px;
}
/* Services opens in place inside the panel rather than floating. */
.hdr__menu { border-bottom: 1px solid var(--rule-soft); }
.hdr__menu > .hdr__link { border-bottom: 0; justify-content: space-between; }
.hdr__drop {
position: static; box-shadow: none; border: 0;
padding: 0 0 8px 12px; background: transparent;
}
.hdr__drop-link { padding: 10px 8px; }
}
/* ==========================================================================
7. Footer
========================================================================== */
.ftr { background: var(--ink); color: #fff; padding-top: clamp(56px, 7vw, 84px); }
.ftr__in {
display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.1fr;
gap: clamp(28px, 4vw, 56px); padding-bottom: 48px;
}
.ftr__mark { opacity: .85; }
.ftr__name { font-size: 1.5rem; margin-top: 16px; color: #fff; }
.ftr__latin { color: rgba(255,255,255,.55); margin-top: 8px; font-size: .9375rem; }
.ftr__addr {
display: flex; flex-direction: column; gap: 10px; margin-top: 24px;
font-style: normal; font-size: .9375rem; line-height: 1.55; color: rgba(255,255,255,.78);
}
.ftr__phone {
font-variation-settings: 'wdth' 108; font-weight: 800; font-size: 1.375rem;
color: #fff; text-decoration: none; letter-spacing: -0.015em;
}
.ftr__phone:hover { color: var(--grommet); }
.ftr__hours { color: rgba(255,255,255,.55); }
.ftr__ttl { color: var(--grommet); }
.ftr__col ul { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.ftr__col li { display: flex; align-items: center; gap: 9px; font-size: .9375rem; color: rgba(255,255,255,.78); }
.ftr__col a { color: rgba(255,255,255,.82); text-decoration: none; }
.ftr__col a:hover { color: #fff; text-decoration: underline; }
.ftr__swatch { width: 8px; height: 8px; border-radius: 1px; background: var(--cat); flex: none; }
.ftr__note { color: rgba(255,255,255,.45); font-size: .875rem; line-height: 1.4; }
.ftr__sister { margin-top: 30px; }
.ftr__sister-link {
display: block; margin-top: 10px; padding: 12px 14px;
border: 1px solid rgba(255,255,255,.22); border-radius: 2px;
font-size: .875rem; line-height: 1.4; color: rgba(255,255,255,.85); text-decoration: none;
}
.ftr__sister-link:hover { border-color: var(--grommet); color: #fff; }
.ftr__base {
display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between;
padding-block: 20px; border-top: 1px solid rgba(255,255,255,.16);
/* Sentence case: legal copy, not a tag's data label. */
font-size: .8125rem; color: rgba(255,255,255,.62);
}
.ftr__zone { color: rgba(255,255,255,.5); }
.ftr__by { color: rgba(255,255,255,.5); }
.ftr__by a {
color: rgba(255,255,255,.75);
text-decoration: none;
border-bottom: 1px solid rgba(255,255,255,.25);
padding-bottom: 1px;
}
.ftr__by a:hover { color: var(--grommet); border-bottom-color: var(--grommet); }
@media (max-width: 900px) {
.ftr__in { grid-template-columns: 1fr 1fr; }
.ftr__brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) { .ftr__in { grid-template-columns: 1fr; } }
/* ==========================================================================
8. Photo band
Every slot currently holds temporary stock, graded to read as ink on card
stock rather than a screen photograph. Each renders at the exact dimensions
of the real photo, so client photography drops in with no layout change.
See SHOTLIST.md.
The drawn placeholder that used to live here (.pb--empty, die-line corners,
printed shot description) was removed once stock filled every slot — it had
no markup left referencing it.
========================================================================== */
/* height:auto is load-bearing — the width/height attributes on ![]()
act as
presentational hints, and an explicit height would beat the inline
aspect-ratio and render the photo at full source height. */
.pb { width: 100%; height: auto; margin: 0; object-fit: cover; background: var(--cat-tint); }
/* ==========================================================================
9. Spec block
========================================================================== */
.specs { margin: 0; }
.specs__row {
display: flex; align-items: baseline; justify-content: space-between; gap: 18px;
padding-block: 9px; border-top: 1px solid var(--rule-soft);
}
.specs__row:first-child { border-top: 0; }
.specs__label { color: var(--ink-soft); flex: none; }
.specs__value {
margin: 0; text-align: right; font-size: .875rem; font-weight: 600;
font-variation-settings: 'wdth' 92; font-variant-numeric: tabular-nums;
color: var(--ink); line-height: 1.35;
}
.specs--inverse .specs__row { border-color: rgba(255,255,255,.16); }
.specs--inverse .specs__label { color: rgba(255,255,255,.6); }
.specs--inverse .specs__value { color: #fff; }
/* ==========================================================================
10. Service tag
A tag is not a card. A card holds an icon, a heading and a sentence; a tag is
a spec sheet for a living thing and always carries real differentiated data.
========================================================================== */
.tag {
position: relative; display: flex; flex-direction: column;
background: var(--stock); border: 1px solid var(--rule); border-radius: 3px;
padding-top: 26px; /* room for the punched hole */
box-shadow: var(--shadow-tag);
transform-origin: 50% 13px; /* the swing pivots at the hole */
transition: transform 260ms var(--ease), box-shadow 260ms var(--ease), border-color 260ms var(--ease);
}
.tag:hover, .tag:focus-within {
transform: translateY(-2px) rotate(.4deg);
box-shadow: var(--shadow-lift);
border-color: var(--cat);
}
/* The punched hole — a real ring through the tag stock. The signature. */
.tag__hole {
position: absolute; top: 9px; left: 50%; translate: -50% 0;
width: 12px; height: 12px; border-radius: 50%;
background: var(--stock-sunk);
box-shadow: inset 0 1px 2px rgba(13,42,74,.28), 0 0 0 2px var(--grommet);
}
.tag .pb { border-radius: 0; }
.tag__rule { display: block; height: 6px; background: var(--cat); }
.tag__body { display: flex; flex-direction: column; flex: 1; padding: 15px 18px 14px; }
.tag__name { font-size: 1.125rem; }
.tag__link { text-decoration: none; color: var(--ink); }
.tag__link::after { content: ''; position: absolute; inset: 0; }
.tag:hover .tag__link { color: var(--cat); }
.tag .t-latin { margin-top: 4px; font-size: .875rem; }
.tag__blurb { margin: 9px 0 0; font-size: .9375rem; line-height: 1.45; color: var(--ink-mid); }
/* Specs sit on one line and close the tag. The grower's mark is dropped at rack
scale — eight repetitions of the same company name is noise, and it was
costing ~55px of height on every tag. It stays on the hero's hanging tag. */
.tag__specs {
display: flex; gap: 22px;
margin-top: auto; padding-top: 12px;
border-top: 1px solid var(--rule-soft);
}
.tag__spec { display: flex; flex-direction: column; gap: 1px; }
.tag__spec-label { color: var(--ink-soft); }
.tag__spec-value {
font-size: .875rem; font-weight: 700; font-variation-settings: 'wdth' 92;
font-variant-numeric: tabular-nums; color: var(--cat);
}
.tag__mark { display: none; }
/* ==========================================================================
11. CTA band
========================================================================== */
.cta { position: relative; background: var(--ink); color: #fff; padding-block: clamp(52px, 7vw, 88px); }
/* A real perforation — punched holes across the top edge, the way a tag's
detachable stub separates. Not a border accent.
.section--perf puts the same tear line on a light section. */
.section--perf { position: relative; }
.cta::before,
.section--perf::before {
content: ''; position: absolute; inset: 0 0 auto; height: 9px;
background-image: radial-gradient(circle at 4.5px 4.5px, var(--grommet) 2px, transparent 2.2px);
background-size: 16px 9px; background-repeat: repeat-x; opacity: .85;
}
.cta__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 32px; }
.cta__ttl { color: #fff; max-width: 22ch; }
.cta__lead { margin: 14px 0 0; font-size: 1.0625rem; line-height: 1.55; color: rgba(255,255,255,.75); max-width: 44ch; }
.cta__act { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.cta__phone { display: flex; flex-direction: column; gap: 3px; text-decoration: none; color: #fff; }
.cta__phone .t-spec { color: rgba(255,255,255,.55); }
.cta__phone strong { font-variation-settings: 'wdth' 108; font-weight: 800; font-size: 1.375rem; letter-spacing: -0.015em; }
.cta__phone:hover strong { color: var(--grommet); }
/* ==========================================================================
12. Home page
========================================================================== */
.hero {
position: relative;
background: var(--ink);
color: #fff;
padding-block: clamp(52px, 7vw, 104px);
overflow: hidden;
}
/* Background footage. Decorative — it carries no information, so it is hidden
from assistive tech and never focusable. */
.hero__video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
}
/* The navy veil. Densest on the left where the headline and spec rows sit, so
white type keeps well above AA there; thinner on the right, where the only
thing over the video is the white tag and the footage can actually be seen. */
.hero__veil {
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(
100deg,
rgba(13, 42, 74, 0.94) 0%,
rgba(13, 42, 74, 0.9) 42%,
rgba(13, 42, 74, 0.72) 100%
);
}
.hero__in {
position: relative; /* lifts the content above the veil */
display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr);
gap: clamp(32px, 5vw, 72px); align-items: center;
}
/* No motion: drop the video and hold its poster frame instead. */
@media (prefers-reduced-motion: reduce) {
.hero__video { display: none; }
.hero {
background-image: url('../images/filler/hero-mowing.jpg');
background-size: cover;
background-position: center;
}
}
.hero__latin { color: rgba(255,255,255,.5); }
.hero__h1 { margin-top: 14px; color: #fff; }
.hero__em { color: var(--grommet); }
.hero__lead { margin: 22px 0 0; color: rgba(255,255,255,.8); max-width: 52ch; }
.hero__specs { margin-top: 30px; max-width: 480px; }
.hero__act { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
/* The hanging tag */
.hero__tag { position: relative; display: flex; justify-content: center; }
.hero__string {
position: absolute; top: -104px; left: 50%; width: 1px; height: 104px;
background: linear-gradient(180deg, transparent, rgba(244,178,35,.55));
}
.hero__card {
position: relative; width: min(320px, 100%);
background: var(--stock); border-radius: 3px; padding-top: 36px;
box-shadow: 0 22px 60px rgba(0,0,0,.4);
rotate: -1.2deg; transform-origin: 50% 18px;
}
.hero__hole {
position: absolute; top: 13px; left: 50%; translate: -50% 0;
width: 14px; height: 14px; border-radius: 50%; background: var(--ink);
box-shadow: inset 0 1px 3px rgba(0,0,0,.5), 0 0 0 2px var(--grommet);
}
.hero__rule { display: block; height: 6px; background: var(--cat); }
.hero__card-body { padding: 22px 24px 20px; color: var(--ink); }
.hero__compass { opacity: .9; }
.hero__card-ttl { font-size: 1.75rem; margin-top: 14px; }
.hero__card-body .t-latin { margin-top: 5px; }
.hero__rows { margin: 18px 0 0; }
.hero__rows > div {
display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
padding-block: 8px; border-top: 1px solid var(--rule-soft);
}
.hero__rows dt { color: var(--ink-soft); }
.hero__rows dd { margin: 0; font-size: .8125rem; font-weight: 600; font-variation-settings: 'wdth' 92; text-align: right; }
/* Sentence case at 12px: a printed caption on the tag, not a data label. */
.hero__card-foot {
margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--rule-soft);
color: var(--ink-soft); font-size: .75rem; line-height: 1.4;
}
@media (max-width: 940px) {
/* minmax(0,…) — a bare 1fr can't shrink below its content's min-content
width, which lets a long display word push the column past the gutter. */
.hero__in { grid-template-columns: minmax(0, 1fr); }
/* The layout stacks here, so the veil runs top-to-bottom instead of
left-to-right — otherwise its dense end covers the whole narrow viewport
and the footage disappears. */
.hero__veil {
background: linear-gradient(
180deg,
rgba(13, 42, 74, 0.9) 0%,
rgba(13, 42, 74, 0.82) 45%,
rgba(13, 42, 74, 0.93) 100%
);
}
/* The tag stays centred here and keeps its string. The margin buys the
hanging room the two-column layout got from the grid gap — without it the
string would run up through the buttons above. */
.hero__tag { margin-top: 48px; }
.hero__string { top: -48px; height: 48px; }
.hero__card { rotate: -1deg; }
}
@media (max-width: 560px) { .hero__act { display: grid; grid-template-columns: 1fr; } }
.rack-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: clamp(30px, 4vw, 46px); }
.rack-head__lead { margin: 14px 0 0; color: var(--ink-mid); font-size: 1.0625rem; line-height: 1.6; max-width: 52ch; }
.rack-head__count { color: var(--ink-soft); white-space: nowrap; padding-bottom: 4px; }
@media (max-width: 700px) { .rack-head__count { display: none; } }
.switch { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 68px); align-items: center; }
.switch__copy h2 { max-width: 18ch; }
.switch__body { margin: 20px 0 0; }
.switch__btn { margin-top: 28px; }
.switch__photo .pb { border: 1px solid var(--rule); border-radius: 3px; }
@media (max-width: 860px) { .switch { grid-template-columns: 1fr; } }
.quotes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(275px, 1fr)); gap: clamp(18px, 2.4vw, 26px); }
.quote {
position: relative; display: flex; flex-direction: column;
background: var(--stock); border: 1px solid var(--rule); border-radius: 3px;
padding: 38px 24px 22px; box-shadow: var(--shadow-tag);
transform-origin: 50% 17px;
transition: transform 260ms var(--ease), box-shadow 260ms var(--ease);
}
.quote:hover { transform: translateY(-2px) rotate(.4deg); box-shadow: var(--shadow-lift); }
.quote__hole {
position: absolute; top: 12px; left: 50%; translate: -50% 0;
width: 13px; height: 13px; border-radius: 50%; background: var(--stock-sunk);
box-shadow: inset 0 1px 2px rgba(13,42,74,.28), 0 0 0 2px var(--grommet);
}
.quote__stars { color: var(--grommet); letter-spacing: .14em; font-size: .875rem; }
.quote__q { margin: 14px 0 0; font-family: var(--face-latin); font-style: italic; font-size: 1.0625rem; line-height: 1.55; color: var(--ink); }
.quote__by { display: flex; flex-direction: column; gap: 3px; margin-top: auto; padding-top: 18px; }
.quote__by strong { font-variation-settings: 'wdth' 104; font-size: .9375rem; }
.quote__by .t-spec { color: var(--ink-soft); }
.area { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(32px, 5vw, 68px); align-items: start; }
.area h2 { max-width: 12ch; }
.area__body { margin: 20px 0 0; }
.area__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0 26px; }
.area__item {
display: flex; align-items: center; gap: 11px; padding-block: 13px;
border-top: 1px solid var(--rule-soft);
font-variation-settings: 'wdth' 106; font-weight: 700; font-size: 1.0625rem;
}
.area__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--grommet); flex: none; }
.area__item--more { grid-column: 1 / -1; font-weight: 400; font-variation-settings: 'wdth' 100; font-size: .9375rem; color: var(--ink-soft); }
@media (max-width: 860px) { .area { grid-template-columns: 1fr; } }
/* ==========================================================================
13. Service pages
========================================================================== */
.shd { position: relative; background: var(--cat-tint); padding-block: clamp(30px, 4vw, 46px) clamp(44px, 6vw, 72px); border-bottom: 1px solid var(--rule); }
.shd__rule { display: block; height: 8px; background: var(--cat); position: absolute; inset: 0 0 auto; }
.shd__grid { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(0,.72fr); gap: clamp(30px, 4.5vw, 64px); align-items: start; }
.shd__h1 { color: var(--ink); max-width: 20ch; }
.shd__latin { margin-top: 12px; font-size: 1.0625rem; }
.shd__lead { margin: 20px 0 0; max-width: 46ch; }
.shd__act { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
/* Same anatomy as every tag: full-bleed category rule, then the spec block. */
.shd__specs { background: var(--stock); border: 1px solid var(--rule); border-radius: 3px; box-shadow: var(--shadow-tag); overflow: hidden; }
.shd__specs-rule { display: block; height: 6px; background: var(--cat); }
.shd__specs-list { display: block; padding: 8px 20px 14px; }
@media (max-width: 900px) { .shd__grid { grid-template-columns: 1fr; } }
.sbody { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(0,.75fr); gap: clamp(34px, 5vw, 72px); align-items: start; }
.sbody__block + .sbody__block { margin-top: clamp(32px, 4vw, 46px); }
.sbody__h { margin-bottom: 14px; }
.sbody__main p + p { margin-top: 14px; }
.sbody__side { display: flex; flex-direction: column; gap: 22px; position: sticky; top: 102px; }
.sbody__photo { border: 1px solid var(--rule); border-radius: 3px; }
.sq { position: relative; margin: 0; background: var(--stock); border: 1px solid var(--rule); border-radius: 3px; padding: 36px 22px 20px; box-shadow: var(--shadow-tag); }
.sq__hole {
position: absolute; top: 12px; left: 50%; translate: -50% 0;
width: 13px; height: 13px; border-radius: 50%; background: var(--stock-sunk);
box-shadow: inset 0 1px 2px rgba(13,42,74,.28), 0 0 0 2px var(--grommet);
}
.sq__q { margin: 0; font-family: var(--face-latin); font-style: italic; font-size: 1rem; line-height: 1.55; color: var(--ink); }
.sq__by { display: flex; flex-direction: column; gap: 3px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--rule-soft); }
.sq__by strong { font-variation-settings: 'wdth' 104; font-size: .9375rem; }
.sq__by .t-spec { color: var(--ink-soft); }
@media (max-width: 900px) {
.sbody { grid-template-columns: 1fr; }
.sbody__side { position: static; }
}
.incl { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); border-top: 1px solid var(--rule); }
.incl__item { padding: 26px clamp(18px, 2.5vw, 30px) 30px; border-bottom: 1px solid var(--rule); border-right: 1px solid var(--rule); background: var(--stock); }
/* The punched hole again, at list scale — the tag's mark, not a numbered step. */
.incl__mark {
display: block; width: 11px; height: 11px; border-radius: 50%; margin-bottom: 16px;
background: var(--cat-tint);
box-shadow: inset 0 1px 2px rgba(13,42,74,.22), 0 0 0 2px var(--cat);
}
.incl__t { font-size: 1.0625rem; }
.incl__d { margin: 9px 0 0; font-size: .9375rem; line-height: 1.55; color: var(--ink-mid); }
/* ==========================================================================
14. Contact page
========================================================================== */
.ch { position: relative; background: var(--cat-tint); padding-block: clamp(30px, 4vw, 46px) clamp(40px, 5vw, 62px); border-bottom: 1px solid var(--rule); }
.ch__rule { display: block; height: 8px; background: var(--cat); position: absolute; inset: 0 0 auto; }
.ch__h1 { max-width: 16ch; }
.ch .t-latin { margin-top: 12px; font-size: 1.0625rem; }
.ch__lead { margin: 18px 0 0; max-width: 44ch; }
.contact__in { display: grid; grid-template-columns: minmax(0,.82fr) minmax(0,1.18fr); gap: clamp(30px, 4.5vw, 64px); align-items: start; }
.info { display: flex; flex-direction: column; gap: 22px; }
.info__card { position: relative; background: var(--stock); border: 1px solid var(--rule); border-radius: 3px; padding-top: 34px; box-shadow: var(--shadow-tag); }
.info__hole, .form__hole, .done__hole {
position: absolute; top: 12px; left: 50%; translate: -50% 0;
width: 13px; height: 13px; border-radius: 50%; background: var(--stock-sunk);
box-shadow: inset 0 1px 2px rgba(13,42,74,.28), 0 0 0 2px var(--grommet);
}
.info__body { padding: 20px 24px 22px; }
.info__mark { opacity: .85; }
.info__phone {
display: block; margin-top: 16px;
font-variation-settings: 'wdth' 112; font-weight: 800;
font-size: clamp(1.75rem, 3.4vw, 2.25rem); letter-spacing: -0.025em;
text-decoration: none; color: var(--ink);
}
.info__phone:hover { color: var(--action); }
.info__phonelab { display: block; margin-top: 5px; color: var(--ink-soft); }
.info__rows { margin: 22px 0 0; }
.info__rows > div { padding-block: 11px; border-top: 1px solid var(--rule-soft); }
.info__rows dt { color: var(--ink-soft); margin-bottom: 4px; }
.info__rows dd { margin: 0; font-size: .9375rem; line-height: 1.5; color: var(--ink); }
.info__photo { border: 1px solid var(--rule); border-radius: 3px; }
/* scroll-margin so the #member deep link doesn't park the card under the
sticky header. */
.form, .done { position: relative; background: var(--stock); border: 1px solid var(--rule); border-radius: 3px; padding-top: 34px; box-shadow: var(--shadow-tag); scroll-margin-top: var(--anchor-offset); }
.form__rule, .done__rule { display: block; height: 6px; background: var(--cat); }
.form__body, .done__body { padding: clamp(22px, 3vw, 32px); }
.form__ttl { font-size: 1.375rem; }
.form__sub { margin: 8px 0 0; font-size: .875rem; color: var(--ink-soft); }
/* Honeypot wrapper. display:none, not off-screen positioning: an off-screen
input is still laid out, so Chrome's autofill and password managers fill it
like any other field — which is how real visitors were tripping the trap.
Nothing legitimate reaches it (aria-hidden, tabindex="-1"), so there is no
screen-reader cost to removing it from the box tree entirely. */
.hp { display: none; }
/* --------------------------------------------------------------------------
Docket type — one card, two jobs.
An estimate for a property we don't work yet, or a note from someone who
lives on one we do. A pair of radios rather than tabs: the choice survives
with JavaScript off, posts with the form, and reads to a screen reader as
the single question it is.
-------------------------------------------------------------------------- */
.mode { border: 0; margin: 26px 0 0; padding: 0; min-width: 0; }
.mode__set { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mode__opt {
display: block; padding: 13px 15px; cursor: pointer;
background: var(--stock); border: 1px solid var(--rule); border-radius: 2px;
transition: border-color 140ms var(--ease), background 140ms var(--ease);
}
.mode__opt:hover { border-color: var(--ink-soft); }
.mode__lab {
display: flex; align-items: center; gap: 9px;
font-variation-settings: 'wdth' 78; font-weight: 700; font-size: .8125rem;
letter-spacing: .09em; text-transform: uppercase; color: var(--ink-mid);
}
/* The same filled square the services menu uses to mark where you are. */
.mode__mark {
width: 9px; height: 9px; flex: none; border-radius: 1px;
background: var(--stock); border: 1px solid var(--rule);
}
.mode__note { display: block; margin-top: 5px; font-size: .8125rem; line-height: 1.45; color: var(--ink-soft); }
.mode__in:checked + .mode__opt { background: var(--cat-tint); border-color: var(--cat); }
.mode__in:checked + .mode__opt .mode__lab { color: var(--cat); }
.mode__in:checked + .mode__opt .mode__mark { background: var(--cat); border-color: var(--cat); }
.mode__in:focus-visible + .mode__opt { outline: 3px solid var(--grommet); outline-offset: 2px; }
/* Copy and fields that belong to one mode. `display: contents` lets a group
of fields sit in the form grid as if the wrapper weren't there; the
inactive half is display:none, so it is out of the tab order entirely.
Two rules say the same thing on purpose. :has() carries the swap with
JavaScript off; [data-mode], set by main.js, carries it in a browser too
old for :has(). They stay in separate blocks because one invalid selector
voids a whole comma-joined list — sharing a block would mean losing the
fallback in exactly the browsers that need it. */
.only { display: contents; }
.only--member { display: none; }
.formwrap:has(#mode-member:checked) .only--service { display: none; }
.formwrap:has(#mode-member:checked) .only--member { display: contents; }
.formwrap[data-mode='member'] .only--service { display: none; }
.formwrap[data-mode='member'] .only--member { display: contents; }
.form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 26px; }
.field { margin: 0; display: flex; flex-direction: column; gap: 7px; }
.field--wide { grid-column: 1 / -1; }
.field label {
font-variation-settings: 'wdth' 78; font-weight: 600; font-size: .75rem;
letter-spacing: .09em; text-transform: uppercase; color: var(--ink-mid);
}
.req { color: var(--action); }
.field input, .field select, .field textarea {
width: 100%; min-height: 48px; padding: 11px 13px;
font-family: var(--face-tag); font-size: 1rem; color: var(--ink);
background: var(--stock); border: 1px solid var(--rule); border-radius: 2px;
transition: border-color 140ms var(--ease), box-shadow 140ms var(--ease);
}
.field textarea { min-height: auto; resize: vertical; line-height: 1.55; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-soft); }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink-soft); }
.field input:focus, .field select:focus, .field textarea:focus {
outline: none; border-color: var(--cat);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--cat) 22%, transparent);
}
.field [aria-invalid='true'] { border-color: var(--action); }
.field [aria-invalid='true']:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--action) 24%, transparent); }
.err { font-size: .8125rem; color: var(--action); font-weight: 600; }
.err:empty { display: none; }
.form__err {
margin: 20px 0 0; padding: 12px 14px;
background: color-mix(in srgb, var(--action) 8%, var(--stock));
border: 1px solid color-mix(in srgb, var(--action) 34%, transparent);
border-radius: 2px; font-size: .9375rem; color: var(--action-press); font-weight: 600;
}
.form__err[hidden] { display: none; }
.form__btn { width: 100%; margin-top: 24px; min-height: 56px; }
.form__btn[data-busy] { pointer-events: none; opacity: .72; }
/* Red is the Request Service control and nothing else. A member's note to
their account manager is not that, so the button falls back to ink. */
.formwrap:has(#mode-member:checked) .form__btn,
.formwrap:has(#mode-member:checked) .form__btn:hover { --btn-bg: var(--ink); }
.formwrap[data-mode='member'] .form__btn,
.formwrap[data-mode='member'] .form__btn:hover { --btn-bg: var(--ink); }
/* Swapping the label out of the DOM would drop the spans the mode switch
needs, so the busy state hides it and shows a sibling instead. */
.form__btn-busy { display: none; }
.form__btn[data-busy] .form__btn-label { display: none; }
.form__btn[data-busy] .form__btn-busy { display: inline; }
.form__fine { margin: 16px 0 0; font-size: .8125rem; line-height: 1.5; color: var(--ink-soft); max-width: 58ch; }
.done[hidden] { display: none; }
.done__body { text-align: center; padding-block: clamp(40px, 6vw, 64px); }
.done__ttl { font-size: clamp(1.75rem, 3.4vw, 2.25rem); color: var(--cat); }
.done__p { margin: 18px auto 0; max-width: 38ch; color: var(--ink-mid); line-height: 1.6; }
.done__phone {
display: inline-block; margin-top: 14px;
font-variation-settings: 'wdth' 112; font-weight: 800; font-size: 1.75rem;
letter-spacing: -0.02em; color: var(--ink); text-decoration: none;
}
.done__phone:hover { color: var(--action); }
.done__again { margin-top: 30px; }
@media (max-width: 940px) { .contact__in { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
.form__grid { grid-template-columns: 1fr; }
.mode__set { grid-template-columns: 1fr; }
}
/* ==========================================================================
15. Privacy + 404
========================================================================== */
.ph { position: relative; background: var(--cat-tint); padding-block: clamp(30px, 4vw, 46px) clamp(36px, 5vw, 56px); border-bottom: 1px solid var(--rule); }
.ph__rule { display: block; height: 8px; background: var(--cat); position: absolute; inset: 0 0 auto; }
.prose { max-width: 68ch; }
.prose h2 { margin: 36px 0 12px; }
.prose h2:first-of-type { margin-top: 0; }
.notice {
padding: 14px 16px; margin: 0 0 36px;
background: color-mix(in srgb, var(--grommet) 14%, var(--stock));
border: 1px solid color-mix(in srgb, var(--grommet) 55%, transparent);
border-radius: 2px; font-size: .9375rem; line-height: 1.55;
}
.nf { padding-block: clamp(56px, 9vw, 120px); }
.nf__in { max-width: 720px; }
.nf__h1 { margin-top: 12px; }
.nf__lead { margin: 18px 0 0; max-width: 46ch; }
.nf__list { list-style: none; margin: 34px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0 26px; }
.nf__list li { display: flex; align-items: center; gap: 11px; padding-block: 12px; border-top: 1px solid var(--rule-soft); }
.nf__list a { font-weight: 600; text-decoration: none; }
.nf__list a:hover { color: var(--cat); text-decoration: underline; }
.nf__swatch { width: 9px; height: 9px; border-radius: 1px; background: var(--cat); flex: none; }
.nf__btn { margin-top: 34px; }
/* ==========================================================================
16. Motion — one authored moment, not scattered effects
========================================================================== */
@media (prefers-reduced-motion: no-preference) {
/* Tags settle the way real tags settle on a peg. Nothing fades in from
opacity 0 — all content is visible without JavaScript. */
.settle { animation: settle 620ms var(--ease) both; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes settle {
from { transform: translateY(-10px) rotate(-.6deg); }
to { transform: translateY(0) rotate(0deg); }
}
.hero__card { animation: swing 5.5s ease-in-out 700ms infinite; }
@keyframes swing {
0%, 100% { rotate: -1.2deg; }
50% { rotate: .9deg; }
}
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .001ms !important;
transition-duration: .001ms !important;
scroll-behavior: auto !important;
}
}