/* ============================================================
PALETTE — deliberately the same family as lammonbros.com.
Both domains are the same business and share the blue-shield logo, so the
two stylesheets now share tokens: identical brand orange (#CC470A), identical
type pairing (Archivo / Public Sans), identical 999px pill buttons, and the
same COOL neutral family. Roto used to run warm (cream #faf8f2, warm hairlines,
near-black bands), which fought its own blue logo and read as a different
company. Darks are now the royal-derived navy the shield came from.
============================================================ */
:root {
--yellow: #CC470A; /* = lammonbros --brand */
--yellow-deep: #BC430A; /* = lammonbros --brand-dark: same second orange on both sites */
--yellow-tint: #FBE9DF;
--black: #0B2552; /* = lammonbros --navy; white on it is 14.99:1 */
--ink: #17191f; /* = lammonbros --ink, cool near-black */
--muted: #5C6675; /* = lammonbros --muted slate, 5.81:1 on white */
--line: #d9e2ec; /* = lammonbros --line, cool hairline */
--logo-gray: #d0d0d0;
--bg: #ffffff;
--bg-warm: #eef3f8; /* = lammonbros --bg-warm, cool blue-gray alt band */
--accent: #0E56F0; /* = lammonbros --accent, the logo shield blue */
--accent-dark: #0B3DAE; /* = lammonbros --accent-dark, prose links (9.16:1) */
--ice: #CFEAF5; /* = lammonbros --ice, from the logo lettering */
--font-display: "Archivo", system-ui, sans-serif;
--font-body: "Public Sans", system-ui, sans-serif;
--max: 1280px;
--pad: clamp(1.25rem, 4vw, 2.5rem);
}
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
background: var(--bg);
color: var(--ink);
font-family: var(--font-body);
font-size: 17px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
}
img {
max-width: 100%;
display: block;
}
a {
color: inherit;
}
/* Prose links carry the shield blue, matching lammonbros.com, where `a` is
--accent-dark globally. Scoped to running text on purpose: roto's nav,
footer, breadcrumb and card links all rely on inherit plus their own colour,
so a global override would repaint chrome that is meant to stay neutral. */
section.block p > a:not([class]),
section.block li > a:not([class]),
.faq-a a:not([class]) {
color: var(--accent-dark);
text-decoration: underline;
text-underline-offset: 2px;
}
section.block p > a:not([class]):hover,
section.block li > a:not([class]):hover,
.faq-a a:not([class]):hover {
color: var(--yellow);
}
h1,
h2,
h3,
h4 {
font-family: var(--font-display);
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1.05;
margin: 0 0 0.5em;
color: var(--black);
}
h1 {
font-size: clamp(2.5rem, 6vw, 4.5rem);
font-weight: 900;
}
h2 {
font-size: clamp(1.8rem, 3.5vw, 2.5rem);
}
h3 {
font-size: clamp(1.2rem, 2vw, 1.4rem);
letter-spacing: -0.015em;
}
p {
margin: 0 0 1em;
}
.wrap {
max-width: var(--max);
margin: 0 auto;
padding-left: var(--pad);
padding-right: var(--pad);
}
.photo.ar-hero {
aspect-ratio: 5 / 4;
}
.photo.ar-square {
aspect-ratio: 1 / 1;
}
.photo.ar-wide {
aspect-ratio: 16 / 9;
}
.photo.ar-tall {
aspect-ratio: 4 / 5;
}
.photo.ar-card {
aspect-ratio: 3 / 2;
}/* ===== Nav ===== */
.topbar {
position: sticky;
top: 0;
z-index: 50;
background: rgba(255, 255, 255, 0.96);
backdrop-filter: blur(6px);
border-bottom: 1px solid var(--line);
}/* When users follow an #anchor link, scroll lands with breathing room
above the section heading rather than slamming the section to the
sticky topbar's edge. */
[id] {
scroll-margin-top: 110px;
}
.topbar-inner {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 92px;
padding-top: 0.75rem;
padding-bottom: 0.75rem;
gap: 1.5rem;
}
.brand {
font-family: var(--font-display);
font-weight: 900;
font-size: 1.4rem;
letter-spacing: -0.02em;
color: var(--black);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.6rem;
}
.brand-mark {
height: 56px;
width: auto;
display: block;
margin: 0.5rem 0;
flex-shrink: 0;
}
.brand {
flex-shrink: 0;
}
nav.primary {
display: none;
gap: 1.4rem;
font-weight: 500;
}
nav.primary a {
color: var(--ink);
text-decoration: none;
font-size: 0.97rem;
position: relative;
padding-bottom: 4px;
white-space: nowrap;
transition: color 180ms ease;
}
nav.primary a::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 2px;
background: var(--yellow);
transform: scaleX(0);
transform-origin: center;
transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
}
nav.primary a:hover {
color: var(--black);
}
nav.primary a:hover::after {
transform: scaleX(1);
}/* Current page. Reuses the hover underline rather than adding a new
affordance, and shifts colour only. A weight change here would
re-measure the nav and risk the topbar overflow we fixed at the
tablet breakpoint. */
nav.primary a[aria-current="page"] {
color: var(--black);
}
nav.primary a[aria-current="page"]::after {
transform: scaleX(1);
}
.tel-cta {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: var(--yellow);
color: var(--black);
text-decoration: none;
padding: 0.65rem 1rem;
border-radius: 8px;
font-weight: 700;
font-family: var(--font-display);
font-size: 0.95rem;
white-space: nowrap;
}
.tel-cta:hover {
background: var(--yellow-deep);
}
.tel-cta::before {
content: "";
width: 14px;
height: 14px;
background: var(--black);
-webkit-mask: url("data:image/svg+xml;utf8,")
center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,")
center/contain no-repeat;
}
@media (min-width: 1080px) {
nav.primary {
display: inline-flex;
}
.hours-pill {
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
}/* ===== Mobile hamburger menu ===== */
.nav-toggle-cb {
position: absolute;
opacity: 0;
pointer-events: none;
}
.nav-toggle {
display: none;
}
@media (max-width: 1079px) {/* Push brand to the left, group call + hamburger on the right */
.topbar-inner {
justify-content: flex-start;
gap: 0.5rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
min-height: 76px;
}
.brand {
margin-right: auto;
}
.brand-mark {
height: 44px;
}
.tel-cta {
padding: 0.5rem 0.55rem;
font-size: 0.85rem;
gap: 0.35rem;
}
.nav-toggle {
display: inline-flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
width: 44px;
height: 44px;
cursor: pointer;
background: transparent;
border: 2px solid var(--black);
border-radius: 8px;
flex-shrink: 0;
order: 10;
}
.nav-toggle span {
display: block;
width: 22px;
height: 2px;
background: var(--black);
border-radius: 2px;
transition:
transform 180ms ease,
opacity 180ms ease;
}
.topbar:has(.nav-toggle-cb:checked) .nav-toggle span:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.topbar:has(.nav-toggle-cb:checked) .nav-toggle span:nth-child(2) {
opacity: 0;
}
.topbar:has(.nav-toggle-cb:checked) .nav-toggle span:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
.topbar:has(.nav-toggle-cb:checked) nav.primary {
display: flex;
flex-direction: column;
position: absolute;
top: 100%;
left: 0;
right: 0;
background: #fff;
padding: 0.5rem 1.5rem;
border-top: 2px solid var(--black);
border-bottom: 2px solid var(--black);
box-shadow: 0 6px 0 var(--black);
z-index: 49;
gap: 0;
}
.topbar:has(.nav-toggle-cb:checked) nav.primary a {
padding: 0.95rem 0;
font-size: 1.05rem;
font-weight: 600;
border-bottom: 1px solid var(--line);
}
.topbar:has(.nav-toggle-cb:checked) nav.primary a:last-child {
border-bottom: none;
}
}/* ===== Scroll-morphing topbar (mobile only) — slide transition ===== */
.topbar-inner {
position: relative;
overflow: hidden;
}/* When hamburger nav is open, allow overflow so the drawer can drop below */
.topbar:has(.nav-toggle-cb:checked) .topbar-inner {
overflow: visible;
}
@media (min-width: 900px) {
.hero-grid {
grid-template-columns: 1.4fr 1fr;
gap: clamp(2rem, 5vw, 4rem);
}
}/* ===== Full-bleed hero (Grand Slam style) ===== */
.hero.hero-bg {
position: relative;
padding: clamp(4rem, 9vw, 7rem) 0 clamp(5rem, 10vw, 8rem);
border-bottom: 0;
overflow: hidden;
isolation: isolate;
min-height: 70vh;
display: flex;
align-items: center;
}
.hero.hero-bg .wrap.hero-grid {
width: 100%;
}
@media (min-width: 900px) {
.hero-bg-overlay {
background: linear-gradient(
100deg,
rgba(0, 0, 0, 0.85) 0%,
rgba(0, 0, 0, 0.7) 55%,
rgba(0, 0, 0, 0.55) 100%
);
}
}
.hero.hero-bg .hero-grid {
align-items: center;
}
.hero.hero-bg .hero-content {
color: #fff;
}
.hero.hero-bg h1 {
color: #fff;
font-size: clamp(2.1rem, 5vw, 3.8rem);
line-height: 1.05;
margin-bottom: 1rem;
}
.hero.hero-bg .hero-accent {
color: var(--yellow);
display: inline-block;
}
.hero.hero-bg .lead {
color: rgba(255, 255, 255, 0.85);
max-width: 36em;
margin-bottom: 2rem;
font-size: clamp(1rem, 1.4vw, 1.15rem);
}/* Hero CTAs row */
.hero-ctas {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-bottom: 1.75rem;
}
.btn.btn-on-dark,
.btn-secondary.btn-on-dark {
background: transparent;
color: #fff;
border-color: #fff;
box-shadow: 4px 4px 0 var(--yellow);
}
.btn.btn-on-dark:hover,
.btn-secondary.btn-on-dark:hover {
background: #fff;
color: var(--black);
}
.trust-bar-on-dark .trust-check {
background: var(--yellow);
color: var(--black);
border: 1px solid var(--black);
}/* ===== Hero centered variant (no right card) ===== */
.hero.hero-bg-centered {
text-align: center;
}
.hero.hero-bg-centered .hero-content-centered {
max-width: 56rem;
margin: 0 auto;
color: #fff;
}
.hero.hero-bg-centered h1 {
color: #fff;
font-size: clamp(2rem, 4.8vw, 3.6rem);
line-height: 1.05;
margin-bottom: 1rem;
}
.hero.hero-bg-centered .hero-accent {
color: var(--yellow);
}
.hero.hero-bg-centered .lead {
color: rgba(255, 255, 255, 0.88);
max-width: 44rem;
margin: 0 auto 2rem;
font-size: clamp(1rem, 1.4vw, 1.15rem);
}
.hero.hero-bg-centered .hero-ctas {
justify-content: center;
margin-bottom: 0;
}
.hero.hero-bg-centered .eyebrow {
margin-bottom: 1.25rem;
}
.section-intro-narrow .lead {
color: var(--ink);
font-size: clamp(1.05rem, 1.5vw, 1.18rem);
line-height: 1.6;
margin-bottom: 1.25rem;
}
@media (min-width: 800px) {
.benefit-row {
grid-template-columns: 1fr 1fr 1fr;
gap: 1.5rem;
}
}/* Knock back the hero bottom padding so the cards have room to float up */
.hero.hero-bg-centered {
padding-bottom: clamp(7rem, 11vw, 9rem);
}
@media (min-width: 800px) {
.allow-grid {
grid-template-columns: 1fr 1fr;
gap: 1.75rem;
}
}
.allow-yes .allow-head {
background: var(--yellow);
color: var(--black);
}
.allow-no .allow-head {
background: var(--black);
color: var(--yellow);
}
.allow-no .allow-badge {
background: rgba(255, 255, 255, 0.08);
}
@media (min-width: 480px) {
.allow-list {
grid-template-columns: 1fr 1fr;
column-gap: 1rem;
}
}
.allow-yes .allow-list li {
background: #fffaeb;
border-color: rgba(242, 188, 0, 0.45);
}
.allow-no .allow-list li {
background: #f7f7f5;
border-color: rgba(17, 17, 17, 0.15);
}
.allow-yes .allow-list li::before {
content: "✓";
background: var(--yellow);
color: var(--black);
}
.allow-no .allow-list li::before {
content: "✕";
background: var(--black);
color: var(--yellow);
}
.allow-no .allow-note {
border-left-color: var(--black);
}
.allow-no .allow-note a {
color: var(--black);
font-weight: 800;
text-decoration: none;
border-bottom: 2px solid var(--yellow);
}
.eyebrow {
display: inline-block;
font-family: var(--font-display);
font-weight: 700;
font-size: 0.78rem;
letter-spacing: 0.18em;
text-transform: uppercase;
/* White, not --black: near-black on the brand orange measures 4.02 and misses AA at
this size. White on the same orange is 4.69, so the chip keeps the exact brand
colour and only the text flips. */
color: #fff;
background: var(--yellow);
padding: 4px 10px;
margin-bottom: 1.5rem;
border-radius: 2px;
}
.hero p.lead {
font-size: clamp(1.1rem, 1.8vw, 1.3rem);
color: var(--muted);
max-width: 32em;
margin-bottom: 2rem;
line-height: 1.5;
}
.btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
text-decoration: none;
font-family: var(--font-display);
font-weight: 800;
font-size: 1rem;
padding: 0.85rem 1.5rem;
border-radius: 8px;
border: 2px solid var(--black);
white-space: nowrap;
box-shadow: 4px 4px 0 var(--black);
transition:
transform 120ms ease,
box-shadow 120ms ease,
background 120ms ease;
}
.btn:hover {
transform: translate(-2px, -2px);
box-shadow: 6px 6px 0 var(--black);
}
.btn:active {
transform: translate(2px, 2px);
box-shadow: 0 0 0 var(--black);
}
.btn-primary {
background: var(--yellow);
color: var(--black);
}
.btn-primary:hover {
background: var(--yellow-deep);
/* More rewarding hover than the generic .btn — bigger lift +
deeper shadow so the click feels weighty. */
transform: translate(-3px, -3px);
box-shadow: 8px 8px 0 var(--black);
}
.btn-primary:active {
transform: translate(2px, 2px);
box-shadow: 0 0 0 var(--black);
}
.btn-secondary {
background: transparent;
color: var(--black);
}
.btn-secondary:hover {
/* 17px/800 is below the 18.66px large-text threshold, so this needs 4.5:1, and
--yellow on black is 4.02. --yellow-on-dark exists for this exact case: 6.38:1. */
background: var(--black);
color: var(--yellow-on-dark);
}
.btn-big {
font-size: clamp(1.25rem, 2.3vw, 1.65rem);
font-weight: 800;
padding: 0.85rem 1.5rem;
}
@media (max-width: 500px) {
.text-big {
margin-left: 0;
margin-top: 0.5rem;
}
}/* ===== Section base ===== */
section.block {
padding: clamp(3.5rem, 8vw, 6rem) 0;
}
section.block.alt {
background: var(--bg-warm);
}
@media (min-width: 800px) {
.services-split {
grid-template-columns: 1fr 1fr;
gap: 2rem;
}
}
/* The dark photo-card .svc-card variant came from the donor and was deleted: its
markup (.svc-body, .photo, a.svc-link, h3) exists on zero pages here. It was not
inert -- the live light card at the bottom of this file overrides `background`
but not `color`, so `color:#fff` leaked through and rendered all six homepage job
cards as white text on white, inside a 380px min-height leaked from the same rule. */
@media (min-width: 700px) {
.sizes {
grid-template-columns: repeat(4, 1fr);
}
}
@media (min-width: 600px) {
.sizes-5 {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 900px) {
.sizes-5 {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 1200px) {
.sizes-5 {
grid-template-columns: repeat(5, 1fr);
gap: 0.85rem;
}
}
.size-card {
border: 3px solid var(--black);
padding: 2rem 1.5rem 1.75rem;
background: #fff;
border-radius: 8px;
text-decoration: none;
color: inherit;
display: flex;
flex-direction: column;
transition:
transform 180ms ease,
box-shadow 180ms ease;
box-shadow: 6px 6px 0 var(--black);
position: relative;
/* No overflow:hidden -- the availability badge is positioned to overlap the top edge
and a clip shears it. Nothing inside the card needs clipping; there is no photo. */
}
/* The 6px coloured top stripe that used to sit here is deleted, not restyled: a coloured
top/left strip on a card is the single most-cited generated-UI tell in the design
research. The card is separated by its border and the house offset shadow instead. */
.size-card:hover {
transform: translate(-3px, -3px);
box-shadow: 9px 9px 0 var(--yellow);
}
.size-card .yd {
font-family: var(--font-display);
font-weight: 900;
font-size: clamp(2.6rem, 4.8vw, 3.6rem);
color: var(--black);
line-height: 1;
display: block;
margin: 0.5rem 0 0.6rem;
letter-spacing: -0.02em;
}
.size-card .yd small {
font-size: 1rem;
font-weight: 800;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-left: 0.15rem;
}
.size-card p:not(.size-card-stat) {
margin: 0 0 1.25rem;
font-size: 0.95rem;
color: var(--ink);
line-height: 1.5;
flex: 1;
}
.sizes-cta .btn-big {
padding: 1rem 2rem;
}
@media (max-width: 700px) {
.alt-service-banner {
flex-direction: column;
align-items: flex-start;
text-align: left;
gap: 1rem;
}
.alt-service-banner-cta {
align-self: flex-start;
}
}
@media (min-width: 900px) {
.story-grid {
grid-template-columns: 0.9fr 1.1fr;
gap: clamp(2.5rem, 5vw, 4rem);
}
}
.story-grid .photo.ar-tall {
max-height: 540px;
}
.story-body p {
font-size: 1.05rem;
line-height: 1.65;
}
.story-body p.kicker {
font-family: var(--font-display);
font-size: 1.3rem;
font-weight: 600;
color: var(--black);
line-height: 1.35;
margin-bottom: 1.25rem;
}/* ===== Reviews ===== */
.reviews {
display: grid;
grid-template-columns: 1fr;
gap: 1.25rem;
}
@media (min-width: 800px) {
.reviews {
grid-template-columns: repeat(3, 1fr);
}
}
.review {
background: #fff;
border: 1px solid var(--line);
padding: 1.75rem 1.5rem;
border-radius: 8px;
}
.review .stars {
color: var(--yellow);
font-size: 1.05rem;
letter-spacing: 0.05em;
margin-bottom: 0.75rem;
font-family: var(--font-body);
}
.review blockquote {
margin: 0 0 1rem;
font-size: 1rem;
line-height: 1.55;
color: var(--ink);
}
.review .meta {
font-size: 0.85rem;
color: var(--muted);
display: flex;
gap: 0.5rem;
align-items: baseline;
}
.review .meta .name {
font-weight: 700;
color: var(--ink);
font-family: var(--font-display);
}
@media (min-width: 900px) {
.area-grid {
grid-template-columns: 0.85fr 1.15fr;
gap: clamp(2.5rem, 5vw, 4rem);
}
}
@media (min-width: 700px) {
.town-list {
columns: 3;
}
}
.town-list li.more {
font-family: var(--font-display);
font-weight: 700;
color: var(--black);
margin-top: 0.5rem;
}/* ===== Final CTA ===== */
.cta-final {
background: var(--black);
color: #fff;
text-align: left;
}
.cta-final h2 {
color: #fff;
max-width: 16em;
}
.cta-final h2 em {
color: var(--yellow);
font-style: normal;
}
.cta-final p {
color: rgba(255, 255, 255, 0.75);
max-width: 32em;
margin-bottom: 2rem;
font-size: 1.1rem;
}
.cta-final .tel-big,
.cta-final .text-big,
.cta-final .btn {
border-color: var(--yellow);
box-shadow: 4px 4px 0 var(--yellow);
}
.cta-final .tel-big:hover,
.cta-final .text-big:hover,
.cta-final .btn:hover {
box-shadow: 6px 6px 0 var(--yellow);
}
.cta-final .tel-big:active,
.cta-final .text-big:active,
.cta-final .btn:active {
box-shadow: 0 0 0 var(--yellow);
}
.cta-final .btn-primary {
background: var(--yellow);
color: var(--black);
}
.cta-final .btn-primary:hover {
/* The fill deepens on hover, so the text has to flip with it. Inheriting the base
black gave #111 on #A63A08 = 2.90:1, under the 3:1 large-text floor. The unscoped
.btn-primary:hover already goes white; this one is (0,3,0) and was overriding it
with only a background. Same bug family as Proudfoot's black-on-black hover. */
background: var(--yellow-deep);
color: #fff;
}
.cta-final .btn-secondary {
background: transparent;
color: var(--yellow);
}
.cta-final .btn-secondary:hover {
background: var(--yellow);
color: var(--black);
}/* ===== Footer ===== */
footer.site {
background: #0a0a0a;
color: rgba(255, 255, 255, 0.7);
padding: 4rem 0 2rem;
font-size: 0.92rem;
}
footer.site .foot-grid {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
margin-bottom: 3rem;
}
@media (min-width: 700px) {
footer.site .foot-grid {
grid-template-columns: 1.3fr 1fr 1fr;
}
}
/* Footer column headings are h2, not h4: an h4 picked for its size put an h2->h4 skip on
every page, and screen-reader users navigate by heading level. Visual output identical. */
footer.site h2 {
color: #fff;
font-size: 0.85rem;
letter-spacing: 0.12em;
text-transform: uppercase;
margin-bottom: 1rem;
font-family: var(--font-display);
}
footer.site a {
color: rgba(255, 255, 255, 0.8);
text-decoration: none;
}
footer.site a:hover {
color: var(--yellow);
}
footer.site ul {
list-style: none;
padding: 0;
margin: 0;
}
footer.site ul li {
margin-bottom: 0.5rem;
line-height: 1.5;
}
footer.site .foot-brand {
display: block;
height: 110px;
width: auto;
margin-bottom: 0.85rem;
}
footer.site .nap p {
margin-bottom: 0.5rem;
color: rgba(255, 255, 255, 0.75);
}
footer.site .nap strong {
color: #fff;
font-weight: 600;
}
footer.site .legal {
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding-top: 1.5rem;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 1rem;
font-size: 0.85rem;
color: rgba(255, 255, 255, 0.5);
}/* ===== Sticky mobile CTA (legacy bottom bar — superseded by scroll-morph topbar) ===== */
/* Floating call pill, every width (Ryan's ruling 2026-08-10: pill, never a
full-width bar). Transparent container, no background box. */
.mobile-cta {
position: fixed;
bottom: 1.1rem;
left: auto;
right: 1.1rem;
width: auto;
background: transparent;
padding: 0;
display: flex;
gap: 0.5rem;
z-index: 60;
border-top: 0;
}
.mobile-cta a {
flex: none;
text-align: center;
padding: 0.75rem 1.25rem;
font-family: var(--font-display);
font-weight: 800;
font-size: 0.95rem;
text-decoration: none;
border-radius: 999px;
border: 2px solid var(--black);
box-shadow: 0 3px 0 var(--black); /* vertical only: sideways offset reads as off-centre on a floating pill */
min-height: 48px;
white-space: nowrap;
display: inline-flex;
align-items: center;
justify-content: center;
}
.mobile-cta a.call,
.mobile-cta a.book {
background: var(--black);
/* --yellow (#CC470A) on --black measures 4.02:1 and fails AA on the site's most-tapped
mobile control. --yellow-on-dark (#E9762F) is 6.38:1 and still reads as the brand. */
color: var(--yellow-on-dark);
}/* Sticky pill is call-only (Ryan 2026-08-10): one floating element, one ask. The old
Text Us anchor is gone from the markup too, not just hidden: Lammon does take texts
(the intake says "call or text" and the contact and booking copy say so in prose), but
dead display:none markup on 42 pages served nobody. */
@media (min-width: 900px) {
}
/* Add bottom padding on mobile so sticky CTA doesn't cover content */
@media (max-width: 899px) {
footer.site {
padding-bottom: 5rem;
}
}/* ===== Utility classes (replaces inline styles site-wide) ===== */
.topbar-cluster {
display: flex;
align-items: center;
gap: 1rem;
}/* Prompt + button under a card grid, for the visitor who could not pick
one of the cards. See the section-cta rule: a grid that ends straight
into offers no exit. */
.grid-cta {
margin-top: 1.5rem;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem 1rem;
}
@media (max-width: 599px) {
.grid-cta {
flex-direction: column;
align-items: flex-start;
}
}
@media (min-width: 700px) {
.town-services-grid {
/* 8 cards: four sizes, junk removal, and three rotating service
links. Four columns gives two even rows. */
grid-template-columns: repeat(4, 1fr);
gap: 0.85rem;
}
}
.town-service-card .ts-label {
font-family: var(--font-display);
font-weight: 800;
font-size: 0.98rem;
color: var(--black);
}
.town-service-card .ts-detail {
font-size: 0.78rem;
color: var(--muted);
font-weight: 600;
}
.crumb .sep {
opacity: 0.4;
margin: 0 0.35rem;
}
.crumb .current {
color: var(--black);
}/* About page variant — bigger H1, more breathing, eyebrow above */
.page-hero-about {
padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(2.5rem, 6vw, 4rem);
}
.page-hero-about .eyebrow {
margin-bottom: 1rem;
}
@media (min-width: 600px) {
.about-do-list {
grid-template-columns: 1fr 1fr;
column-gap: 1.5rem;
}
}
.page-hero .lead {
font-size: clamp(1.05rem, 1.6vw, 1.2rem);
color: var(--muted);
max-width: 36em;
line-height: 1.55;
margin-top: 1rem;
}
@media (min-width: 900px) {
.page-grid {
grid-template-columns: 1.1fr 1fr;
gap: clamp(2rem, 5vw, 4rem);
}
}
@media (min-width: 900px) {
.page-grid .photo {
min-height: 320px;
}
}
@media (min-width: 700px) {
.spec-grid {
grid-template-columns: repeat(4, 1fr);
}
}
.spec .label {
font-family: var(--font-display);
font-size: 0.72rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--muted);
display: block;
margin-bottom: 0.35rem;
}
.spec .val {
font-family: var(--font-display);
font-weight: 800;
font-size: 1.4rem;
color: var(--black);
line-height: 1.05;
}
.prose p {
font-size: 1.05rem;
line-height: 1.65;
color: var(--ink);
}
.prose p + p {
margin-top: 1em;
}/* h3 had a margin-top and h2 had none, so a 42px heading sat 18px under the
paragraph above it and 21px above its own — closer to the text it followed
than the text it introduced. Town pages stack eight h2s in one .prose block,
so that inversion ran the length of every one of them. Space above a heading
should beat space below by roughly 2:1. :not(:first-child) so the section's
own padding isn't doubled at the top. */
.prose h2:not(:first-child) {
margin-top: 3.25rem;
}
.prose h3 {
margin-top: 2rem;
}
.prose ul {
padding-left: 1.25rem;
line-height: 1.7;
}
.prose ul li {
margin-bottom: 0.35rem;
}
.prose a {
color: var(--black);
border-bottom: 2px solid var(--yellow);
text-decoration: none;
}
.prose a:hover {
color: var(--yellow-deep);
}
@media (min-width: 700px) {
.related-sizes {
grid-template-columns: repeat(4, 1fr);
}
}
.related-sizes a.current {
border-color: var(--black);
background: #faf8f2;
}/* Town index */
/* ===== Hero trust bar ===== */
.trust-bar {
list-style: none;
padding: 0;
margin: 1.5rem 0 0;
display: flex;
flex-wrap: wrap;
gap: 0.5rem 1.25rem;
font-family: var(--font-display);
font-size: 0.9rem;
font-weight: 600;
color: var(--ink);
}
.trust-bar li {
display: inline-flex;
align-items: center;
gap: 0.4rem;
white-space: nowrap;
}
.trust-bar .trust-check {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--yellow);
color: #fff; /* same 4.02 -> 4.69 fix as .eyebrow */
font-size: 0.7rem;
font-weight: 900;
flex-shrink: 0;
}
@media (min-width: 800px) {
.process-steps {
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}
}
/* Dashed connector between steps — desktop only. Line sits behind
the next icon (z-index 0; icon is z-index 1) so overlap is hidden. */
@media (min-width: 800px) {
.process-step:not(:last-child)::after {
content: "";
position: absolute;
top: 48px;
left: calc(50% + 58px);
right: calc(-50% - 32px + 58px);
border-top: 3px dashed var(--black);
opacity: 0.28;
z-index: 0;
}
}
/* Skip the awkward 2+1 layout — go from 1-col straight to 3-col
as soon as 3 cards fit comfortably across. */
@media (min-width: 850px) {
.pillar-grid {
grid-template-columns: 1fr 1fr 1fr;
}
}
.booking-modal.is-open {
display: block;
opacity: 1;
}
@media (max-width: 600px) {
.booking-modal-content {
width: calc(100vw - 4.5rem);
height: calc(100vh - 11rem);
border-radius: 8px;
border: 2px solid var(--black);
box-shadow: 4px 4px 0 var(--yellow);
}
.booking-modal-close {
top: 10px;
right: 10px;
}/* On mobile, the iframe form is narrow enough that the desktop
overscan crop would lop off real form controls. Reset to a
plain 100% × 100% so SurvCart's layout fits its actual width. */
.booking-modal-iframe {
width: 100%;
height: 100%;
margin: 0;
}
}/* While the booking modal is open, hide the LeadConnector chat
widget so its bottom-right bubble doesn't overlap the booking
form's submit button (critical on mobile). LC injects a custom
element ; broader selectors are fallbacks in case
their loader changes. */
html.booking-modal-open chat-widget,
html.booking-modal-open #chat-widget,
html.booking-modal-open [id^="lc_chat"],
html.booking-modal-open [class*="chat-widget"],
html.booking-modal-open iframe[src*="chat-widget"],
html.booking-modal-open iframe[src*="leadconnectorhq.com"] {
display: none !important;
}
@media (min-width: 720px) {
.region-grid {
grid-template-columns: 1fr 1fr;
}
}
@media (min-width: 1100px) {
.region-grid {
grid-template-columns: 1fr 1fr 1fr;
}
}
.region-card-header .pin {
width: 22px;
height: 22px;
flex-shrink: 0;
color: inherit;
fill: currentColor;
}
.region-card-towns .pill {
display: inline-block;
background: var(--yellow);
color: var(--black);
font-family: var(--font-display);
font-size: 0.65rem;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.08em;
padding: 3px 8px;
border-radius: 999px;
margin-left: 0.45rem;
vertical-align: 1px;
border: 1.5px solid var(--black);
box-shadow: 1px 1px 0 var(--black);
}
@media (min-width: 800px) {
.items-grid {
grid-template-columns: 1fr 1fr;
}
}
.items-block.warn {
border-left-color: #c77;
}
.nap-card .label {
font-family: var(--font-display);
font-size: 0.78rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--muted);
display: block;
margin-bottom: 0.25rem;
}
.nap-card .val {
font-family: var(--font-display);
font-weight: 700;
font-size: 1.1rem;
color: var(--black);
margin-bottom: 1.25rem;
display: block;
}
.nap-card .val a {
color: var(--black);
text-decoration: none;
border-bottom: 2px solid var(--yellow);
}
.town-search .clear-btn {
position: absolute;
right: 0.65rem;
top: 50%;
transform: translateY(-50%);
width: 32px;
height: 32px;
background: var(--bg-warm);
border: 0;
padding: 0;
cursor: pointer;
color: var(--ink);
border-radius: 50%;
display: none;
align-items: center;
justify-content: center;
font-family: var(--font-display);
font-weight: 800;
font-size: 1rem;
line-height: 1;
transition:
background 0.15s,
color 0.15s;
}
.town-search .clear-btn:hover {
background: var(--yellow);
color: var(--black);
}
.town-search.has-query .clear-btn {
display: flex;
}
.town-suggestions.is-open {
display: block;
}
.town-suggestion:hover,
.town-suggestion.is-active {
background: var(--yellow-tint);
}
.town-suggestion.is-active {
outline: 2px solid var(--yellow);
outline-offset: -2px;
}
.no-match.is-active {
display: block;
}/* Hidden state for filtered items */
.region-towns li.is-hidden,
.region.is-hidden {
display: none;
}
@media (max-width: 600px) {
.post-banner {
padding: 1.5rem 1.25rem;
gap: 1rem;
}
.post-banner-mark {
width: 56px;
height: 56px;
font-size: 1.9rem;
}
}
/* Stop region container from being too tight on mobile when search opens */
@media (max-width: 600px) {
.town-suggestions {
max-height: 280px;
}
.town-suggestion-region {
display: none;
}
}
@media (min-width: 900px) {
.map-layout-grid {
grid-template-columns: 1.45fr 1fr;
gap: 2.5rem;
align-items: start;
}
}
#service-map {
height: 100%;
min-height: 560px;
width: 100%;
border: 2px solid var(--ink);
border-radius: 8px;
background: var(--bg-warm);
z-index: 1;
}
@media (max-width: 800px) {
#service-map {
min-height: 360px;
}
}
@media (min-width: 900px) {
.map-side-panel {
gap: 1.75rem;
padding-top: 0.25rem;
}
}
.reviews-head-text .eyebrow {
background: none;
padding: 0;
font-family: var(--font-display);
font-weight: 700;
font-size: 0.8rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink);
}/* Reviews layout — two states:
- ≤799px: stacked, summary as full-width horizontal banner so it
visually matches the carousel row below it
- ≥800px: 2-col, compact card on left + carousel on right */
.reviews-layout {
display: flex;
flex-direction: column;
gap: 1.5rem;
align-items: stretch;
}/* Default (≤799px stacked): thinned banner that matches the actual
width of the review card row below. The Reputationhub iframe has
~12px internal padding around its card row, so the banner sits
slightly inset to visually match the cards instead of the iframe's
invisible cream background. */
.reviews-summary {
width: calc(100% - 24px);
margin: 0 auto;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-around;
gap: 0.5rem 1.5rem;
padding: 1.1rem 1.75rem;
text-align: center;
}
/* ≥800px: 2-col grid with compact card on left, carousel right.
Reset the stacked banner overrides back to vertical card layout. */
@media (min-width: 800px) {
.reviews-layout {
display: grid;
grid-template-columns: 260px 1fr;
gap: 2rem;
align-items: center;
}
.reviews-summary {
max-width: 260px;
margin: 0;
display: block;
text-align: center;
padding: 1.5rem 1.25rem;
}
.reviews-summary-label,
.reviews-summary-count {
margin-bottom: 0.5rem;
}
.reviews-summary-stars {
font-size: 1.7rem;
margin-bottom: 0.5rem;
}
.reviews-summary-count {
margin-bottom: 1rem;
}
.reviews-summary-source {
padding-top: 0.75rem;
border-top: 1px solid var(--line);
margin-top: 0.25rem;
width: 100%;
}
}
@media (min-width: 900px) {
.find-us-grid {
grid-template-columns: 1.4fr 1fr;
gap: 2.5rem;
}
}
.find-us-info .eyebrow {
color: var(--ink);
background: none;
padding: 0;
font-family: var(--font-display);
font-weight: 700;
font-size: 0.8rem;
letter-spacing: 0.18em;
text-transform: uppercase;
}
@media (min-width: 900px) {
.map-legend {
gap: 0.55rem;
}
}
.map-legend .legend-item {
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.map-legend .dot {
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--yellow);
border: 2px solid var(--ink);
flex-shrink: 0;
}
.map-legend .dot.hq {
background: var(--ink);
border-color: var(--yellow);
position: relative;
}
.town-marker-icon .dot {
width: 16px;
height: 16px;
background: var(--yellow);
border: 2px solid var(--ink);
border-radius: 50%;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
transition: transform 0.12s;
}
/* Scale DOWN on press, never up on hover: scaling up on hover is a catalogued
generated-UI signature. The map dot gets a colour shift for hover instead. */
.town-marker-icon:hover .dot {
background: var(--yellow-on-dark);
}
.town-marker-icon:active .dot {
transform: scale(0.96);
}
.town-marker-icon.hq .dot {
width: 26px;
height: 26px;
background: var(--ink);
border-color: var(--yellow);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-display);
font-weight: 900;
color: var(--yellow);
font-size: 0.62rem;
letter-spacing: 0.05em;
}
.town-marker-icon.hq .dot::after {
content: "HQ";
}
.leaflet-popup-content .popup-name {
font-family: var(--font-display);
font-weight: 800;
font-size: 1.05rem;
color: var(--black);
display: block;
margin-bottom: 0.35rem;
}
.leaflet-popup-content .popup-name .hq-tag {
font-size: 0.7rem;
color: var(--muted);
font-weight: 600;
margin-left: 0.4rem;
}
.leaflet-popup-content .popup-link {
display: inline-block;
color: var(--black);
text-decoration: none;
border-bottom: 2px solid var(--yellow);
font-weight: 700;
font-size: 0.92rem;
padding-bottom: 1px;
}
.leaflet-popup-content .popup-link:hover {
color: var(--yellow-deep);
}
/* ROTO-ADDENDUM */
.skip-link{position:absolute;left:-9999px;top:0;background:var(--black);color:#fff;padding:.6rem 1rem;z-index:999}
.skip-link:focus{left:0}
.breadcrumb{padding:.85rem 0 0;font-size:.82rem}
.breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:.3rem .45rem;margin:0;padding:0}
.breadcrumb li{display:flex;align-items:center;gap:.3rem .45rem;color:var(--muted)}
.breadcrumb li+li::before{content:"\203A";color:var(--muted);opacity:.55}
.breadcrumb a{color:var(--muted);text-decoration:none}
.breadcrumb a:hover{color:var(--yellow)}
.breadcrumb [aria-current="page"]{color:var(--ink);font-weight:600}
.wrap.narrow{max-width:820px}
.faq-item{border:1px solid var(--line);border-radius:14px;background:#fff;margin:.6rem 0;padding:.2rem 1rem}
.faq-item summary{font-weight:700;cursor:pointer;padding:.7rem 0}
.faq-item p{margin:.2rem 0 .9rem}
.size-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1rem;margin-top:1.4rem}
.size-card{border:1px solid var(--line);border-radius:14px;background:#fff;padding:1.1rem 1.2rem;display:flex;flex-direction:column;gap:.3rem}
.size-card .sc-name{font-family:var(--font-display);font-weight:800;font-size:1.2rem}
.size-card .sc-price{color:var(--yellow);font-family:var(--font-display);font-weight:800;font-size:1.5rem}
.size-card .sc-meta{color:var(--muted);font-size:.92rem}
.size-card a.btn{margin-top:auto}
.size-switch{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:1.2rem 0 0;font-size:.9rem}
.size-switch .ss-label{color:var(--muted);font-weight:600}
.size-switch a,.size-switch .ss-cur{display:inline-block;padding:.35rem .85rem;border-radius:999px;border:1px solid var(--line);text-decoration:none;font-weight:700;font-family:var(--font-display)}
.size-switch a{color:var(--ink);background:#fff}
.size-switch a:hover{border-color:var(--yellow);color:var(--yellow)}
.size-switch .ss-cur{background:var(--yellow);color:#fff;border-color:var(--yellow)}
.price-table{width:100%;border-collapse:collapse;margin:1.1rem 0;font-size:1rem}
.price-table th,.price-table td{text-align:left;padding:.7rem .85rem;border-bottom:1px solid var(--line);vertical-align:top}
.price-table thead th{font-family:var(--font-display);font-weight:700;font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);border-bottom:2px solid var(--line)}
.price-table td strong{font-family:var(--font-display);font-size:1.12rem;color:var(--yellow)}
.price-table a{font-weight:700}
.tbl-cap{caption-side:top;text-align:left;font-size:.95rem;color:var(--muted);padding:0 0 .5rem}
/* Text heroes (town + inner pages) measured 833px at 375x812 -- 103% of the viewport, so
nothing below existed on first paint. The bar is hero <=80% with the next band peeking.
Scoped to the first .block section only: the homepage photo hero is .hero-split-wrap and
was measured to 0.80 separately. Lead stays at 16px+, the mobile readability floor. */
@media(max-width:520px){
main > section.block:first-of-type{padding-top:1.9rem;padding-bottom:1.9rem}
main > section.block:first-of-type h1{font-size:2rem}
main > section.block:first-of-type .lead{font-size:.95rem;line-height:1.5}
main > section.block:first-of-type .trust-bar{gap:.3rem .8rem}
main > section.block:first-of-type .btn-big{padding-top:.72rem;padding-bottom:.72rem}
}
/* Folded towns on the hub: unclickable pills, never comma lists (Ryan, fleet-wide). Muted,
no hover, cursor default -- they assert coverage, they don't navigate. */
.chip-row{display:flex;flex-wrap:wrap;gap:.5rem;margin:.4rem 0 1rem}
.chip-plain{color:var(--muted);background:var(--bg,#fafafa);cursor:default}
/* In-flow call+book pair at decision points (dead-zone pass); .hero-ctas does the layout */
.cta-inflow{margin-top:1.3rem}
/* Hub featured city cards: two real paragraphs each (service-areas-index). Borderless-first
per the design skill -- separated by the warm background shift, not by a dumpster. */
.area-feature{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;margin-top:1.4rem}
.af-card{background:var(--bg-warm);border-radius:14px;padding:1.3rem 1.4rem}
.af-card h3{margin:0 0 .5rem;font-size:1.15rem}
.af-card p{margin:0 0 .7rem}
.af-card p:last-child{margin-bottom:0}
@media(max-width:820px){.area-feature{grid-template-columns:1fr;gap:.9rem}}
/* The four cards carry two real paragraphs each, which service-areas-index requires and
the design skill forbids deleting to hit a height number. There's no duplication and
no photo to re-crop here, so the sanctioned lever is the third one: padding and leading.
Measured 3.45 -> 2.6 screens at 375px. */
@media(max-width:520px){
.af-card{padding:1rem 1.05rem}
.af-card p{font-size:.95rem;line-height:1.55;margin-bottom:.55rem}
.af-card h3{font-size:1.05rem;margin-bottom:.35rem}
}
/* Availability badge on the size cards. A STOCK claim -- this size is in the yard --
never a delivery promise, which is why it ships on a site that promises no turnaround
(Ryan's ruling, 2026-08-10). Skinned from the site's own tokens: the stock pattern is a
green pill, and green on an orange site reads as a third-party widget someone pasted in. */
.size-card{position:relative}
.avail-badge{position:absolute;top:-.7rem;right:.9rem;display:inline-flex;align-items:center;gap:.4rem;
background:var(--black);color:#fff;font-family:var(--font-display);font-weight:700;
font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;padding:.32rem .7rem;border-radius:999px}
.avail-badge::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--yellow-on-dark)}
.price-table .nw{white-space:nowrap}
@media(max-width:520px){.price-table th,.price-table td{padding:.55rem .38rem;font-size:.94rem}.price-table th:first-child,.price-table td:first-child{padding-left:0}}
.booking-box{border:1px solid var(--line);border-radius:14px;background:#fff;padding:1.2rem;margin:1.2rem 0;max-width:640px}
.reviews-layout{display:grid;grid-template-columns:260px 1fr;gap:1.5rem;align-items:start;margin-top:1.3rem}
@media(max-width:800px){.reviews-layout{grid-template-columns:1fr}}
.reviews-summary{border:1px solid var(--line);border-radius:14px;background:#fff;padding:1.2rem;display:flex;flex-direction:column;gap:.8rem}
.reviews-summary-stars{color:#F5A623;font-size:1.5rem;letter-spacing:2px;margin:0}
.reviews-summary-label{font-family:var(--font-display);font-weight:800;font-size:1.2rem;margin:.1rem 0 0}
.rs-source{display:flex;align-items:center;gap:.6rem}
.rs-source-text strong{font-family:var(--font-display);font-size:1.2rem;display:block}
.rs-source-text span{color:var(--muted);font-size:.9rem}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
@media(max-width:760px){.two-col{grid-template-columns:1fr}}
/* The floating call pill is position:fixed at every width, so a header phone button is a
second always-visible tel: link for one action. Resolve toward the pill (thumb zone).
Precondition checked: the hero call-card prints the number independently. */
@media (max-width:999px){.topbar .callbtn-rich{display:none}}
/* ---- Photo-backed hero. object-position 40% 65%: at desktop the band is WIDER than the
1400x787 photo so cover scales by width and crops vertically (the 65% keeps the truck and
can, which sit at y 34-99%); on a phone the dumpster is taller than wide so it crops
horizontally instead (the 40% keeps the cab and the can, at x 0-79%). Both axes measured,
not guessed. Scrim is directional: heaviest under the copy on the left. */
.hero-split-wrap.has-photo{position:relative;isolation:isolate;border-bottom:0;background:var(--black)}
.hero-split-wrap.has-photo .hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:40% 65%;z-index:-2}
.hero-split-wrap.has-photo .hero-scrim{position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,rgba(10,12,16,.93) 0%,rgba(10,12,16,.88) 46%,rgba(10,12,16,.72) 74%,rgba(10,12,16,.66) 100%)}
.has-photo .hero-copy,.has-photo .hero-copy h1{color:#fff}
.has-photo .hero-copy .lead{color:rgba(255,255,255,.92)}
.has-photo .hero-micro{color:rgba(255,255,255,.75)}
.has-photo .kicker{color:#fff;background:var(--yellow)}
/* The base .btn-outline is white-on-white-background; over the photo it needs a transparent
fill or the label disappears. Ghost is acceptable here only because it sits beside a
solid primary and the white-on-dark border is high contrast, not a faint grey outline. */
@media(max-width:900px){
/* Heaviest at the top where the H1 sits (and where the photo has bright sky), easing off
over the truck so the photo is actually visible. A flat heavy overlay kills the image. */
.hero-split-wrap.has-photo .hero-scrim{background:linear-gradient(180deg,rgba(10,12,16,.84) 0%,rgba(10,12,16,.78) 38%,rgba(10,12,16,.52) 62%,rgba(10,12,16,.58) 100%)}
/* Stacked on a phone the hero measured 1249px, 154% of a 812px viewport, so nothing below
it was visible. Cut duplication before anything else: the copy's CTA row and micro line
repeat the same tel:, the same /dumpster-rental/ target and the same size range that the
call-card shows ~20px underneath. Then trim scale and padding. */
.has-photo .hero-ctas,.has-photo .hero-micro{display:none}
.hero-split-wrap.has-photo .hero-split{padding-top:1.9rem;padding-bottom:1.9rem;gap:1.2rem}
.has-photo .hero-copy h1{font-size:1.95rem}
.has-photo .call-card{max-width:none;justify-self:stretch}
.has-photo .call-card .kicker-inverse{display:none}
/* the hero kicker restates the geography the H1 already carries, and "Delta, Ohio" is in
the stat band below */
.has-photo .hero-copy>.kicker{display:none}
/* keep flat-rate + the review line (the rating has to be visible without scrolling);
sizes and family-run are both restated in the stat band immediately below */
}
/* ---- Homepage story teaser: the owner photo, high on the page. */
.story-teaser{display:grid;grid-template-columns:minmax(0,260px) 1fr;gap:1.8rem;align-items:center;margin-top:2rem}
.story-teaser img{width:100%;height:100%;max-height:270px;object-fit:cover;object-position:50% 30%;border-radius:14px;display:block}
.story-teaser p{margin:0 0 .9rem}
@media(max-width:700px){.story-teaser{grid-template-columns:1fr;gap:1.1rem}.story-teaser img{max-height:230px}}
/* ---- Size-page scale photo. Wide subject (a 22ft can) in a wide box: never a 4:3 crop.
Capped so a card+photo stays under half a phone viewport. */
.size-photo{margin:1.2rem 0 1.6rem}
.size-photo img{width:100%;height:auto;max-height:340px;object-fit:cover;object-position:50% 50%;border-radius:14px;display:block}
.size-photo figcaption{margin-top:.6rem;font-size:.87rem;color:var(--muted)}
/* Nearby towns surfaced in the hero, not only in the block at the bottom of the page: the
nearby-towns link block is the one split-tested finding on this page type (+7% across
~8,000 regional pages), and at the bottom most phone visitors never reach it. */
.near-towns{margin:1.1rem 0 0;font-size:.92rem;color:var(--muted)}
.near-towns a{font-weight:600}
/* ---- Single-quote proof beside a money page's primary action. */
.quote-proof{max-width:640px;margin:1.6rem 0 0}
.quote-proof .review{box-shadow:0 4px 14px rgba(11,11,11,.06)}
.quote-proof-more{margin:.7rem 0 0;font-size:.9rem}
/* ---- Reviews page. The grid is a normal stacked set here, not the homepage swipe strip.
.is-capped hides past the cap; the cards stay in the source either way. */
.rev-page{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:1.1rem;align-items:start}
.rev-page.is-capped .review:nth-child(n+13){display:none}
@media(max-width:640px){.rev-page{grid-template-columns:1fr}.rev-page.is-capped .review:nth-child(n+4){display:none}}
.map-embed{border-radius:14px;overflow:hidden;border:1px solid var(--line);margin:1.2rem 0;line-height:0}
/* ---- Brand orange ON DARK. The palette had a deepened shade for white-on-orange but no
lightened one for orange-on-dark, so the floating call pill rendered #CC470A on #111111
at 4.02:1 and failed AA on the site's most-tapped mobile control. #E9762F measures
6.38:1 on the same background and still reads as the brand colour. */
:root{--yellow-on-dark:#E9762F}
/* ---- Town-page job photo. */
.town-photo{margin:1.3rem 0 0}
.town-photo img{width:100%;height:auto;max-height:330px;object-fit:cover;object-position:50% 55%;border-radius:14px;display:block}
/* Button that closes a prose section (local-service-section-cta). Spacing and wrapping
only -- everything else inherits from .btn, so it's the site's secondary button at
full size. Secondary means outlined, not smaller. */
.btn-inline{margin-top:1.5rem;white-space:normal}
.steps{list-style:none;counter-reset:step;margin:1.1rem 0 0;padding:0}
.steps li{counter-increment:step;position:relative;padding:0 0 1.05rem 3rem}
.steps li::before{content:counter(step);position:absolute;left:0;top:-.1rem;width:2.1rem;height:2.1rem;border-radius:50%;background:var(--yellow);color:#fff;font-family:var(--font-display);font-weight:800;display:flex;align-items:center;justify-content:center}
.steps li:last-child{padding-bottom:0}
.goodlist,.carelist{list-style:none;margin:.8rem 0 0;padding:0}
.goodlist li,.carelist li{padding:.35rem 0 .35rem 1.7rem;position:relative}
.goodlist li::before{content:"\2713";position:absolute;left:0;color:var(--yellow);font-weight:800}
.carelist li::before{content:"\2022";position:absolute;left:0;color:var(--muted);font-weight:800}
.area-cols{columns:3;column-gap:2rem;margin-top:1rem}
@media(max-width:760px){.area-cols{columns:2}}
.area-cols li{break-inside:avoid;padding:.25rem 0;list-style:none}
.area-cols a{text-decoration:none;font-weight:600}
.lead-form label{display:block;font-weight:700;margin:.8rem 0 .25rem}
.lead-form input,.lead-form select,.lead-form textarea{width:100%;padding:.7rem .8rem;border:1px solid var(--line);border-radius:8px;font:inherit}
.lf-consent{font-size:.8rem;color:var(--muted);margin-top:.8rem}
.lf-consent input{width:auto;margin-right:.4rem}
.foot-note{font-size:.85rem;color:var(--muted);margin-top:.8rem}
.hero-price-chip{display:inline-block;background:#fff;color:var(--ink);border-radius:999px;padding:.35rem 1rem;font-family:var(--font-display);font-weight:800;margin-top:.8rem}
.calc-opt{display:flex;align-items:center;gap:.6rem;padding:.55rem .2rem}
.calc-opt input{width:auto}
#calc-result{border:2px solid var(--yellow);border-radius:14px;padding:1.1rem 1.2rem;margin-top:1rem;display:none}
.about-photo{width:100%;height:auto;border-radius:14px;margin:0 0 1.4rem;display:block}
.bk-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.9rem;margin-top:1rem}
.bk-item{display:flex;flex-direction:column;gap:.35rem}
.bk-label{font-family:var(--font-display);font-weight:700;font-size:.9rem}
/* Locked 3-across (Ryan 2026-08-18): auto-fit wrapped to 2+1 and orphaned the third. */
.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:1.4rem}
@media(max-width:860px){.how-grid{grid-template-columns:1fr}}
.how-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:1.6rem 1.5rem;box-shadow:0 4px 14px rgba(11,11,11,.06)}
.how-card h3{margin:.9rem 0 .45rem;font-size:1.15rem}
.how-card p{margin:0;line-height:1.6}
.how-ico{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--yellow-tint);color:var(--yellow-deep)}
:root{--navy:#0B2552;--navy-deep:#071B3D} /* = lammonbros navy family */
.btn,.btn-big{box-shadow:none}
.btn{border-radius:999px}
.btn-outline{background:#fff;color:var(--ink);border:2px solid var(--line)}
.btn-outline:hover{border-color:var(--navy);color:var(--navy)}
.kicker{display:block;text-transform:uppercase;letter-spacing:.15em;font-weight:700;font-size:.76rem;color:var(--yellow-deep);margin-bottom:.55rem}
.kicker-inverse{color:#cfe0ee}
.hero-split-wrap{background:#fff;border-bottom:1px solid var(--line)}
.hero-split{display:grid;grid-template-columns:1.15fr .85fr;gap:3.2rem;align-items:center;padding-top:4.2rem;padding-bottom:4.2rem}
.hero-copy h1{font-size:clamp(2.2rem,4.4vw,3.3rem);line-height:1.06;margin:.35rem 0 1.6rem;letter-spacing:-.01em}
.hero-micro{color:var(--muted);font-size:.93rem;margin-top:1.1rem}
.call-card{background:none;padding:0;max-width:340px;justify-self:end;width:100%}
.cc-phone{display:block;text-align:center;font-family:var(--font-display);font-weight:800;font-size:clamp(1.3rem,1.8vw,1.5rem);color:#fff;text-decoration:none;margin:.35rem 0 0;padding:.45rem 0;min-height:44px}
.cc-or{font-weight:600;font-size:.78em;opacity:.85;margin-right:.1rem}
.cc-list{list-style:none;margin:0 0 1.5rem;padding:0;display:grid;gap:.72rem}
.cc-list li{display:flex;gap:.65rem;align-items:flex-start;line-height:1.45;font-size:.97rem}
.cc-check{flex-shrink:0;display:grid;place-items:center;width:21px;height:21px;border-radius:50%;border:2px solid rgba(255,255,255,.85);font-size:.72rem;margin-top:.1rem}
.cc-btn{display:block;text-align:center;background:var(--yellow);color:#fff;font-family:var(--font-display);font-weight:700;font-size:1.08rem;border-radius:999px;padding:1rem 1.2rem;text-decoration:none}
.cc-btn:hover{background:var(--yellow-deep)}
footer.site ul li a{display:inline-block;padding:.3rem 0;min-height:24px}
/* ---- Inner-page photo hero ---- */
.inner-hero{position:relative;isolation:isolate;background:var(--black);border-bottom:0;padding:2.6rem 0 2.9rem}
.inner-hero .hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 60%;z-index:-2}
.inner-hero .hero-scrim{position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,rgba(10,12,16,.93) 0%,rgba(10,12,16,.87) 45%,rgba(10,12,16,.68) 78%,rgba(10,12,16,.6) 100%)}
.inner-hero h1{color:#fff;margin-top:0;max-width:16ch}
.inner-hero p,.inner-hero .lead{max-width:62ch}
.inner-hero p,.inner-hero li,.inner-hero .lead{color:rgba(255,255,255,.92)}
.inner-hero strong{color:#fff}
.inner-hero .hero-price-chip{color:var(--ink)}
table td a{display:inline-block;padding:.3rem 0;min-height:24px}
.breadcrumb a{display:inline-block;padding:.25rem 0;min-height:24px}
.two-col p>a:last-child{display:inline-block;padding:.3rem 0;min-height:24px}
.area-cols a{display:inline-block;padding:.3rem 0;min-height:24px}
/* ---- blog ---- */
.post-date{color:var(--muted);font-size:.88rem;margin:-.4rem 0 0}
.post-body p{max-width:68ch;line-height:1.65;margin:0 0 1.15rem}
.post-list{list-style:none;margin:0;padding:0}
.post-list li{padding:1rem 0;border-bottom:1px solid var(--line)}
.post-list li:first-child{padding-top:0}
.post-list a{font-family:var(--font-display);font-weight:700;font-size:1.15rem;display:inline-block;padding:.2rem 0;min-height:24px}
.post-blurb{display:block;color:var(--muted);font-size:.92rem;margin-top:.25rem}
/* Any link that is not a button has to survive the dark ground, and the outline button
was drawn for a white background. */
.inner-hero a:not(.btn){color:#fff}
.inner-hero .btn-secondary{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.inner-hero .btn-secondary:hover{background:#fff;color:var(--navy);border-color:#fff}
.inner-hero .trust-check{color:#fff}
.inner-hero .rating-chip{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.35);color:#fff;box-shadow:none}
.inner-hero .rating-chip strong{color:#fff}
@media(max-width:760px){
.inner-hero{padding:1.9rem 0 2.1rem}
.inner-hero .hero-scrim{background:linear-gradient(180deg,rgba(10,12,16,.9) 0%,rgba(10,12,16,.82) 45%,rgba(10,12,16,.7) 100%)}
}
@media(max-width:900px){.hero-split{grid-template-columns:1fr;gap:2rem;padding-top:2.6rem;padding-bottom:2.6rem}}
/* Locked 4-across (Ryan 2026-08-18): auto-fit wrapped to 3+1 on wide screens. */
.value-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem}
@media(max-width:980px){.value-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.value-grid{grid-template-columns:1fr}}
.v-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:1.5rem 1.4rem}
.v-title{font-family:var(--font-display);font-weight:700;font-size:1.06rem;margin:0 0 .45rem}
.v-card p:last-child,.svc-card p{margin:0 0 .5rem;line-height:1.55}
/* Segmented stat bar under the hero (Family Trash / WOW element, in this site's navy) */
section.block.trust-band{padding-top:1.2rem;padding-bottom:1.2rem}
.sbar{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);background:var(--navy);border-radius:14px;overflow:hidden;box-shadow:var(--elev-1)}
.sbar-cell{padding:1.55rem 1.1rem;text-align:center;border-left:1px solid rgba(255,255,255,.12)}
.sbar-cell:first-child{border-left:0}
.sbar-num{display:block;font-family:var(--font-display);font-weight:800;font-size:clamp(1.35rem,2.6vw,1.85rem);color:#fff;line-height:1.05;letter-spacing:-.01em}
.sbar-cap{display:block;margin-top:.42rem;font-size:.85rem;color:rgba(255,255,255,.78);line-height:1.3}
.sbar-cap a{color:inherit;text-underline-offset:2px}
@media(max-width:760px){.sbar{grid-template-columns:repeat(2,1fr)}.sbar-cell{border-top:1px solid rgba(255,255,255,.12)}.sbar-cell:nth-child(odd){border-left:0}.sbar-cell:nth-child(1),.sbar-cell:nth-child(2){border-top:0}}
/* sbar--row: every cell on ONE row at every width, any cell count. Type scales down
on phones instead of the grid wrapping. */
.sbar--row{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:1fr}
@media(max-width:760px){
.sbar--row{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:1fr}
.sbar--row .sbar-cell{border-top:0;border-left:1px solid rgba(255,255,255,.12);padding:.9rem .35rem}
.sbar--row .sbar-cell:first-child{border-left:0}
.sbar--row .sbar-num{font-size:clamp(.78rem,3.2vw,1.2rem);letter-spacing:0;white-space:nowrap}
.sbar--row .sbar-cap{font-size:.6rem;margin-top:.3rem}
}
.stat-story{text-align:center;margin:1.8rem 0 0;color:var(--muted)}
.arrow-link{font-family:var(--font-display);font-weight:700;color:var(--yellow-deep);text-decoration:none}
.arrow-link:hover{text-decoration:underline}
.svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.25rem;margin-top:1.4rem}
.svc-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:1.5rem 1.4rem}
.size-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:1.25rem;margin-top:1.4rem}
.size-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:14px;padding:1.5rem 1.4rem}
.size-card .sc-name{font-family:var(--font-display);font-weight:800;font-size:1.3rem}
.size-card .sc-meta{color:var(--muted);font-size:.87rem;margin:.25rem 0 .7rem}
.sc-list{list-style:none;margin:0 0 .9rem;padding:0;display:grid;gap:.35rem;font-size:.93rem}
.sc-list li{padding-left:1.15rem;position:relative}
.sc-list li:before{content:"\2713";position:absolute;left:0;color:var(--yellow-deep);font-weight:700}
.size-card .sc-price{font-family:var(--font-display);font-weight:800;font-size:1.12rem;margin:auto 0 .55rem}
.sizes-foot{margin-top:1.4rem}
.area-split{display:grid;grid-template-columns:.9fr 1.1fr;gap:2.4rem;align-items:start;margin-top:1.2rem}
@media(max-width:820px){.area-split{grid-template-columns:1fr}}
.chip-grid{display:flex;flex-wrap:wrap;gap:.6rem;align-content:flex-start}
.chip{display:inline-block;border:1px solid var(--line);border-radius:999px;background:#fff;padding:.5rem 1rem;text-decoration:none;color:var(--ink);font-weight:600;font-size:.92rem}
.chip:hover{border-color:var(--navy);color:var(--navy)}
.quote-split{display:grid;grid-template-columns:.9fr 1.1fr;gap:2.4rem;align-items:start;margin-top:1.2rem}
@media(max-width:820px){.quote-split{grid-template-columns:1fr}}
.topbar-book{display:inline-block}
@media(max-width:1080px){.topbar-book{display:none}}
/* Google review cards (gold stars deliberate: real-Google cue) */
.reviews{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:84%;gap:1.25rem;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}
.reviews::-webkit-scrollbar{display:none}
.reviews .review{scroll-snap-align:start}
@media (min-width:800px){.reviews{grid-template-columns:none;grid-auto-columns:calc((100% - 2.5rem)/3)}}
.review{background:#fff;border:1px solid var(--line);padding:1.5rem 1.45rem;border-radius:14px;box-shadow:0 4px 14px rgba(11,11,11,.06);display:flex;flex-direction:column;transition:transform .15s,box-shadow .15s}
.review:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(11,11,11,.11)}
.rv-head{display:flex;align-items:center;gap:.7rem;margin-bottom:.7rem}
.rv-avatar{flex-shrink:0;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#fff;background:var(--yellow-deep);font-family:var(--font-display);font-weight:700;font-size:1.05rem;line-height:1}
.reviews .review:nth-child(3n+2) .rv-avatar{background:#33383d}
.reviews .review:nth-child(3n) .rv-avatar{background:#4a6572}
.rv-who{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.rv-name{font-family:var(--font-display);font-weight:700;color:var(--ink);font-size:.97rem}
.rv-date{font-size:.8rem;color:var(--muted)}
.rv-g{margin-left:auto;flex-shrink:0}
.rv-stars{margin:0 0 .6rem;color:#fbbc04;font-size:1.02rem;letter-spacing:.08em;line-height:1}
.review blockquote{margin:0;font-size:1rem;line-height:1.6;color:var(--ink)}
.reviews{align-items:stretch}
.reviews-badge{display:inline-block;background:#fff;border:1px solid var(--line);border-radius:14px;padding:.95rem 1.5rem;box-shadow:0 4px 14px rgba(11,11,11,.08)}
.reviews-badge .rs-source{display:flex;align-items:center;gap:.7rem}
.reviews-badge .rs-stars{color:#fbbc04;letter-spacing:.08em;font-size:1.05rem;display:block}
.reviews-badge .rb-text strong{font-family:var(--font-display);font-size:1.1rem;margin-right:.4rem}
.reviews-badge .rb-text span{color:var(--muted);font-size:.92rem}
/* Two-shade CTA rule: brand orange is too dark for black text (4.47:1). Filled primary
buttons take the deep shade with white text (6.5:1); hover goes deeper still. */
.btn-primary{background:var(--yellow-deep);color:#fff}
/* ============================================================
FAMILY PASS -- header + buttons matched to lammonbros.com.
Two domains, one business, one blue-shield logo: the palette went cool in the
0818a pass, this finishes the job on the two elements a visitor actually
touches. The donor's brutalist button system (2px black border, hard offset
shadow, diagonal translate) is retired for Lammon's soft pills: no border,
navy-tinted elevation, a 1px lift on hover. Elevation tokens are copied
verbatim from lammonbros so depth reads identically on both sites.
============================================================ */
:root{--elev-1:0 1px 3px rgba(11,37,82,.07);--elev-2:0 10px 28px rgba(11,37,82,.12);--elev-3:0 18px 44px rgba(11,37,82,.18)}
.topbar{background:rgba(255,255,255,.9);backdrop-filter:saturate(1.5) blur(10px);-webkit-backdrop-filter:saturate(1.5) blur(10px);border-bottom:0;box-shadow:0 1px 0 var(--line),var(--elev-1)}
nav.primary a::after{transform-origin:left}
.btn{border:0;box-shadow:var(--elev-1);transition:transform .15s ease,box-shadow .15s ease,background .15s ease,color .15s ease}
.btn:hover{transform:translateY(-1px);box-shadow:var(--elev-2)}
.btn:active{transform:translateY(0);box-shadow:var(--elev-1)}
/* White text on the brand orange (4.69:1), matching lammonbros' callbtn. */
.btn-primary{background:var(--yellow);color:#fff}
.btn-primary:hover{background:var(--yellow-deep);color:#fff}
.btn-secondary{background:#fff;color:var(--black);border:1px solid var(--line)}
.btn-secondary:hover{background:#fff;color:var(--navy);border-color:var(--navy)}
.btn-secondary.btn-on-dark{background:#fff;color:var(--black);border:0}
.btn-secondary.btn-on-dark:hover{background:#fff;color:var(--navy)}
/* Closing navy band: orange pill gets the lammonbros orange glow instead of the
old hard yellow offset; secondary is a clean white pill. */
.cta-final .btn{border:0}
.cta-final .btn-primary{background:var(--yellow);color:#fff;box-shadow:var(--elev-1),0 2px 10px rgba(204,71,10,.35)}
.cta-final .btn-primary:hover{background:var(--yellow-deep);color:#fff;box-shadow:var(--elev-2),0 7px 20px rgba(204,71,10,.45)}
.cta-final .btn-secondary{background:#fff;color:var(--black)}
.cta-final .btn-secondary:hover{color:var(--navy)}
.size-card{border:1px solid var(--line);box-shadow:var(--elev-1);transition:transform .18s ease,box-shadow .18s ease}
.size-card:hover{transform:translateY(-3px);box-shadow:var(--elev-2)}
.mobile-cta a{border:0;box-shadow:var(--elev-2),0 4px 14px rgba(204,71,10,.35)}
.mobile-cta a.call{background:var(--yellow);color:#fff}
.mobile-cta a.call:hover{background:var(--yellow-deep);color:#fff}
/* Booqable injects its own fixed cart button in the bottom-right corner, landing on top
of our floating call pill. Lift the pill above it, and only on the pages that actually
load the widget: :has() keys off OUR markup (.booqable-product-button), not Booqable's
internals, so a change on their side can't silently break the offset. Pages without
the widget keep the pill in the normal thumb position. */
/* Pill lives bottom-LEFT (Ryan 2026-08-18). Booqable's cart is fixed bottom-right and
the two collided; stacking them vertically pushed the pill into the content. Separate
corners is the cleaner fix, and it's consistent on every page rather than only the
seven that load the widget. */
.mobile-cta{left:1.1rem;right:auto}
.topbar:has(.nav-toggle-cb:checked) nav.primary{border-top:1px solid var(--line);border-bottom:1px solid var(--line);box-shadow:var(--elev-2)}
/* Header cluster, ported from lammonbros: blue book pill + rich orange call pill
(white disc, orange phone glyph, label over number). Same markup, same classes. */
/* Navy pill: still used by the hero call card and the service-area call button.
Rejoined to the soft system (no border, elevation) instead of being deleted --
removing the rule had left both buttons unstyled. */
.btn-contrast{background:var(--navy);color:#fff}
.btn-contrast:hover{background:var(--navy-deep);color:#fff}
.bookbtn{background:var(--accent);color:#fff;text-decoration:none;display:inline-flex;align-items:center;min-height:44px;padding:.55rem 1.05rem;border-radius:999px;font-family:var(--font-display);font-weight:700;font-size:.95rem;white-space:nowrap;box-shadow:var(--elev-1);transition:background .15s ease,transform .15s ease,box-shadow .15s ease}
.bookbtn:hover{background:var(--accent-dark);transform:translateY(-1px);box-shadow:var(--elev-2)}
.callbtn-rich{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;background:var(--yellow);color:#fff;border-radius:999px;padding:.35rem .9rem .35rem .4rem;white-space:nowrap;box-shadow:var(--elev-1);transition:background .15s ease,transform .15s ease,box-shadow .15s ease}
.callbtn-rich:hover{background:var(--yellow-deep);transform:translateY(-1px);box-shadow:var(--elev-2)}
.callbtn-rich .cr-disc{width:40px;height:40px;border-radius:50%;background:#fff;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.callbtn-rich .cr-disc svg{width:21px;height:21px;display:block}
.callbtn-rich .cr-text{display:flex;flex-direction:column;line-height:1.05;text-align:left}
.callbtn-rich .cr-text small{font-size:.72rem;font-weight:600;color:#fff}
.callbtn-rich .cr-text strong{font-family:var(--font-display);font-weight:800;font-size:1.12rem}
.v-card .how-ico{margin-bottom:.85rem}
.how-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem;margin-top:1.4rem}
@media(max-width:980px){.how-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.how-grid{grid-template-columns:1fr}}
/* Numbered process strip: deliberately NOT the icon-card treatment used by the
why-us grid, so the two sections don't read as the same thing twice. */
.step-flow{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:1.6rem}
@media(max-width:900px){.step-flow{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.step-flow{grid-template-columns:1fr;gap:1.1rem}}
.step{position:relative;display:block}
.step-n{position:relative;z-index:1;width:46px;height:46px;border-radius:50%;background:var(--navy);color:#fff;font-family:var(--font-display);font-weight:800;font-size:1.2rem;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 0 0 6px var(--bg)}
/* Connector rule behind the circles ties the four steps into one sequence; it stops
at the last step and disappears once the grid wraps. */
.step:not(:last-child)::after{content:"";position:absolute;top:23px;left:46px;right:-1.6rem;height:2px;background:var(--line)}
@media(max-width:900px){.step:nth-child(2n)::after,.step:last-child::after{display:none}}
@media(max-width:560px){.step::after{display:none!important}}
.step h3{margin:.9rem 0 .35rem;font-size:1.08rem}
.step p{margin:0;font-size:.93rem;color:var(--muted);line-height:1.55}
.book-split{display:grid;grid-template-columns:1fr 1.1fr;gap:1.6rem;align-items:start;margin-top:1.2rem}
@media(max-width:820px){.book-split{grid-template-columns:1fr}}
.book-scale{margin:0}
.book-scale img{width:100%;height:auto;border-radius:14px;box-shadow:var(--elev-1)}
.book-scale figcaption{margin-top:.5rem;font-size:.85rem;color:var(--muted)}
/* Per-size cost example: navy price slab beside the copy. */
.cost-ex{display:grid;grid-template-columns:auto 1fr;gap:1.5rem;align-items:start;background:#fff;border:1px solid var(--line);border-radius:14px;padding:1.4rem 1.5rem;box-shadow:var(--elev-1);margin-top:1.2rem}
@media(max-width:620px){.cost-ex{grid-template-columns:1fr;gap:.9rem}}
.cost-ex-price{display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--navy);color:#fff;border-radius:14px;padding:1.1rem 1.4rem;min-width:132px}
.cx-amt{font-family:var(--font-display);font-weight:800;font-size:2rem;line-height:1}
.cx-cap{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;margin-top:.35rem;color:rgba(255,255,255,.86)}
.cost-ex-body h3{margin:.1rem 0 .5rem}
.cost-ex-body p{margin:0 0 .6rem}
.cx-meta{font-size:.88rem;color:var(--muted)}
/* Long .btn-big labels ran past a 375px viewport because .btn sets white-space:nowrap;
'What Size Dumpster Do I Need?' measured 384px and scrolled the whole page sideways. */
@media(max-width:560px){
.btn{white-space:normal;text-align:center;max-width:100%}
.hero-ctas .btn{width:100%}
}
/* Town chips measured 43px, one under the 44px tap-target floor. */
.chip{min-height:44px}
/* Booqable's own cart button renders at 36px; lift it to the tap floor. */
.booqable-product-button{min-height:128px}
.booqable-datepicker{min-height:70px}
.booqable-product-button button,
.booqable-product-button [role="button"]{min-height:44px}
.glance{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--elev-1)}
@media(max-width:900px){.glance{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.glance{grid-template-columns:1fr}}
.glance li{background:#fff;padding:1.05rem 1.15rem;display:flex;flex-direction:column;gap:.35rem}
.g-k{font-family:var(--font-display);font-weight:700;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--yellow-deep)}
.g-v{font-size:.95rem;line-height:1.45;color:var(--ink)}
/* Size-calculator options as selectable tiles. They shipped as unstyled browser
radios, which is the one control on the site that looked like a default form. */
#calc{display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem;margin-top:1.3rem}
@media(max-width:700px){#calc{grid-template-columns:1fr}}
.calc-opt{display:flex;align-items:center;gap:.75rem;background:#fff;border:1px solid var(--line);border-radius:14px;padding:.95rem 1.1rem;cursor:pointer;box-shadow:var(--elev-1);transition:border-color .15s ease,box-shadow .15s ease,background .15s ease}
.calc-opt:hover{border-color:#c3d3e4;box-shadow:var(--elev-2)}
.calc-opt input{appearance:none;-webkit-appearance:none;flex:0 0 auto;width:20px;height:20px;margin:0;border:2px solid var(--line);border-radius:50%;transition:border-color .15s ease,box-shadow .15s ease}
.calc-opt input:checked{border-color:var(--yellow);box-shadow:inset 0 0 0 4px var(--yellow)}
.calc-opt input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.calc-opt span{font-size:.98rem;line-height:1.4}
.svc-card{display:flex;flex-direction:column}
.svc-card .how-ico{margin-bottom:.85rem}
.svc-card .arrow-link{margin-top:auto;padding-top:.6rem}
.calc-opt:has(input:checked){border-color:var(--yellow);background:var(--yellow-tint);box-shadow:var(--elev-2)}
#calc-result:not(:empty){margin-top:1.3rem;background:var(--navy);color:#fff;border-radius:14px;padding:1.3rem 1.5rem;box-shadow:var(--elev-2)}
#calc-result:not(:empty) a{color:#fff}
/* Booking strip: the row-per-size layout from lammonbros' dumpster page, verbatim
in structure, retokened for this stylesheet (font-display for font-head,
yellow-deep for brand-dark). One shared date pair on top; Booqable carries the
live price and cart per row, the 40 books by phone. */
.dp-shared{max-width:540px;margin:1rem 0 1.4rem}
.book-strip{display:flex;flex-direction:column;gap:.7rem;margin:1.25rem 0}
.bk-card{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--elev-1);transition:box-shadow .16s ease,border-color .16s ease}
.bk-card:hover{box-shadow:var(--elev-2);border-color:#c3d3e4}
.bk-card .bk-body{display:grid;gap:.35rem 1.25rem;align-items:center;grid-template-columns:1fr;padding:1rem 1.1rem}
@media(min-width:760px){.bk-card .bk-body{grid-template-columns:minmax(112px,.75fr) minmax(96px,.6fr) 1.7fr minmax(210px,auto);padding:.95rem 1.25rem}}
.bk-card .ps-size{font-family:var(--font-display);font-weight:800;font-size:1.5rem;color:var(--yellow-deep);line-height:1}
.bk-card .ps-size small{display:block;font-size:.62rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-top:.3rem}
.bk-card .bk-price{font-family:var(--font-display);font-weight:800;font-size:1.5rem;color:var(--ink);line-height:1;margin:0}
.bk-card .bk-price small{display:block;font-size:.62rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-top:.3rem}
.bk-card .bk-fits{margin:0;font-size:.9rem;color:var(--muted);line-height:1.45}
.bk-card .bk-act{display:flex;flex-direction:column;gap:.35rem;min-width:0}
.bk-card .booqable-product-button{width:100%;min-width:0}
.bk-card .bk-details{font-size:.82rem;color:var(--accent-dark);font-weight:700;text-decoration:none;text-align:center}
.bk-card .bk-details:hover{text-decoration:underline}
.bk-card .bk-call,.scale-card .bk-call{width:100%;font-size:.9rem;padding:.6rem 1rem;justify-content:center}
/* Price tables, dressed like the family cards: navy header band, hairline rows,
sizes and rates never wrapping mid-cell (Ryan 2026-08-18: "could look better"). */
.price-table{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--elev-1)}
.price-table thead th{background:var(--navy);color:#fff;font-family:var(--font-display);font-weight:700;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;padding:.8rem 1rem;text-align:left;white-space:nowrap}
.price-table tbody td{padding:.85rem 1rem;border-top:1px solid var(--line);vertical-align:top}
.price-table tbody tr:nth-child(even) td{background:var(--bg-warm)}
.price-table td.nw,.price-table td:first-child,.price-table td:nth-child(2){white-space:nowrap}
.price-table td a{font-weight:700}
.price-table .tbl-cap{caption-side:top;text-align:left;font-size:.85rem;color:var(--muted);padding:0 0 .5rem}
/* Service-area hub, family dress: featured cards carry the town photo like the
scale cards; town lists are link tiles, counties are cards. */
.area-feature{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem;margin-top:1.4rem}
@media(max-width:820px){.area-feature{grid-template-columns:1fr}}
.af-card{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--elev-1)}
.af-card .town-photo{margin:0}
.af-card .town-photo img{width:100%;height:190px;object-fit:cover;display:block;border-radius:0}
.af-card h3{padding:1rem 1.25rem 0;margin:0}
.af-card h3 a{color:var(--navy);text-decoration:none}
.af-card h3 a:hover{color:var(--yellow-deep)}
.af-card p{padding:0 1.25rem;margin:.7rem 0}
.af-card p:last-child{padding-bottom:1.15rem}
.area-cols{list-style:none;margin:1rem 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.7rem}
.town-tile{display:flex;flex-direction:column;gap:.2rem;background:#fff;border:1px solid var(--line);border-radius:14px;padding:.8rem .95rem;text-decoration:none;color:var(--ink);box-shadow:var(--elev-1);transition:box-shadow .16s ease,border-color .16s ease}
.town-tile:hover{box-shadow:var(--elev-2);border-color:#c3d3e4}
.town-tile .tt-name{font-family:var(--font-display);font-weight:700;font-size:.95rem;color:var(--accent-dark)}
.town-tile small{color:var(--muted);font-size:.78rem}
.county-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem;margin:1.2rem 0}
@media(max-width:760px){.county-grid{grid-template-columns:1fr}}
.county-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:1.1rem 1.25rem;box-shadow:var(--elev-1)}
.county-card h3{margin:0 0 .5rem;color:var(--navy)}
.county-card p{margin:.45rem 0}
.county-card .county-towns{font-size:.9rem;line-height:1.9}
.county-grid--3{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.county-grid--3{grid-template-columns:1fr}}
/* Homepage review carousel: 6 cards, 3 visible, auto-advance (script in the block).
Same thin brand scrollbar as the mobile strips. */
.reviews-carousel{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:1rem;padding-bottom:.9rem;scrollbar-width:thin;scrollbar-color:var(--yellow) var(--line)}
.reviews-carousel .review{flex:0 0 calc((100% - 2rem)/3);scroll-snap-align:start;min-width:0}
@media(max-width:760px){.reviews-carousel .review{flex-basis:80%}}
.reviews-carousel::-webkit-scrollbar{height:6px}
.reviews-carousel::-webkit-scrollbar-track{background:var(--line);border-radius:999px}
.reviews-carousel::-webkit-scrollbar-thumb{background:var(--yellow);border-radius:999px}
/* Compact hero rating chip (prices page; reusable) */
.rating-chip{display:inline-flex;align-items:center;gap:.45rem;background:#fff;border:1px solid var(--line);border-radius:999px;padding:.45rem .95rem;box-shadow:var(--elev-1);text-decoration:none;color:var(--ink);font-size:.92rem}
.rating-chip .rs-stars{color:#FBBC04;letter-spacing:.05em}
.rating-chip:hover{box-shadow:var(--elev-2)}
/* Worked pricing examples: three job cards with the size + rate as the visual anchor,
so the numbers read at a glance instead of hiding inside bold run-in paragraphs. */
.job-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin-top:1.4rem}
@media(max-width:860px){.job-grid{grid-template-columns:1fr}}
.job-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:1.25rem 1.3rem;box-shadow:var(--elev-1);display:flex;flex-direction:column;gap:.6rem}
.job-card .jc-head{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem;border-bottom:1px solid var(--line);padding-bottom:.6rem}
.job-card .jc-size{font-family:var(--font-display);font-weight:800;font-size:1.05rem;color:var(--navy)}
.job-card .jc-rate{font-family:var(--font-display);font-weight:800;font-size:1.5rem;color:var(--yellow-deep);line-height:1}
.job-card h3{margin:0;font-size:1rem}
.job-card p{margin:0;font-size:.93rem;color:var(--muted);line-height:1.55}
/* PRICE DISPLAY: Booqable's widget prints its own price above the cart button, which
rendered our advertised flat rate and the widget's number side by side in the same
card. The card states the flat rate; the widget keeps availability and the cart.
NOTE: this only fixes the DISPLAY. Booqable's product prices still differ from the
advertised rate and must be reconciled in the Booqable account. */
/* The Booqable price display is visible again (2026-08-19). It was hidden while the
advertised rate and the checkout total disagreed by $20; Jim's price rise closed that
gap, so the widget's number now matches the flat rate stated on the card. */
/* Grid children default to min-width:auto, so a long pill row refuses to shrink and
overflows its column (towns were clipping off the right edge of the hub). */
.area-split > *{min-width:0}
.chip-grid{min-width:0}
.chip-grid .chip{max-width:100%}
/* Google review badge: one horizontal lockup -- mark, then rating and count stacked
beside it -- instead of a floating G next to a centred column. */
.reviews-badge{display:inline-flex;align-items:center;background:#fff;border:1px solid var(--line);border-radius:14px;padding:.85rem 1.35rem;box-shadow:var(--elev-1)}
.reviews-badge .rs-source{display:flex;align-items:center;gap:.85rem}
.reviews-badge .rs-source > svg{flex-shrink:0}
.reviews-badge .rs-source-text{display:flex;flex-direction:column;align-items:flex-start;gap:.15rem;text-align:left}
.reviews-badge .rs-stars{color:#FBBC04;letter-spacing:.09em;font-size:1rem;line-height:1;order:-1}
.reviews-badge .rb-text{display:flex;align-items:baseline;gap:.4rem}
.reviews-badge .rb-text strong{font-family:var(--font-display);font-weight:800;font-size:1.35rem;color:var(--ink);line-height:1;margin:0}
.reviews-badge .rb-text span,.reviews-badge .rb-text a{color:var(--muted);font-size:.88rem;text-decoration:none}
.reviews-badge .rb-text a:hover{color:var(--accent-dark);text-decoration:underline}
.supply-split{display:grid;grid-template-columns:1.1fr 1fr;gap:2rem;align-items:center}
@media(max-width:820px){.supply-split{grid-template-columns:1fr}}
.supply-photo{margin:0}
.supply-photo img{width:100%;height:300px;object-fit:cover;border-radius:14px;box-shadow:var(--elev-2)}
.supply-copy h2{margin-top:.6rem}
.map-embed{border-radius:14px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--elev-1)}
.map-embed-sm{margin-top:1rem;max-width:520px}
/* Review rows: 3-up on desktop; on phones a horizontal swipe strip with a slim,
visible scrollbar in the brand colours (Ryan 2026-08-18). */
@media(max-width:760px){
.reviews{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:.9rem;padding-bottom:.9rem;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--yellow) var(--line)}
.reviews .review{min-width:80%;scroll-snap-align:start;flex-shrink:0}
.reviews::-webkit-scrollbar{height:6px}
.reviews::-webkit-scrollbar-track{background:var(--line);border-radius:999px}
.reviews::-webkit-scrollbar-thumb{background:var(--yellow);border-radius:999px}
}
/* Owner-for-scale gallery (lammonbros dumpster-page section, ported). New class
names on purpose: roto's retired .size-card rules still exist in the base file,
and reusing the name would marry this markup to a zombie ruleset. */
/* All five across on desktop (Ryan 2026-08-18) -- auto-fit wrapped to 4+1.
Two-up on tablets with the odd fifth card spanning, single column on phones. */
.scale-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1.1rem;margin:1.5rem 0}
@media(max-width:1100px){.scale-grid{grid-template-columns:repeat(3,1fr)}}
.scale-card{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;display:flex;flex-direction:column;box-shadow:var(--elev-1);transition:box-shadow .18s ease}
.scale-card:hover{box-shadow:var(--elev-2)}
.scale-card img{width:100%;height:auto;display:block}
@media(max-width:760px){
.scale-grid{grid-template-columns:1fr;gap:.7rem}
/* Card budget (house rule: <=0.5 screen per card on a phone): shorter photo,
tighter body, smaller display numbers. The Booqable embed's height is fixed
by their widget, so everything around it slims down instead. */
.scale-body{padding:.55rem .8rem .7rem;gap:.3rem}
.scale-num{font-size:1.2rem}
.scale-price{font-size:1rem}
.scale-meta{font-size:.8rem;line-height:1.35;margin:0}
.scale-card .bk-details{font-size:.78rem;padding:.35rem 0;min-height:26px}
}
.scale-body{padding:.85rem 1rem 1rem;display:flex;flex-direction:column;gap:.6rem;flex:1}
.scale-head{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem}
.scale-price{font-family:var(--font-display);font-weight:800;font-size:1.15rem;color:var(--ink);line-height:1;text-align:right}
.scale-price small{display:block;font-size:.6rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-top:.25rem}
.scale-card .booqable-product-button{width:100%;min-width:0}
.scale-card .bk-details{text-align:center;margin-top:auto}
.scale-num{font-family:var(--font-display);font-weight:800;font-size:1.6rem;color:var(--yellow-deep);line-height:1;margin:0}
.scale-num small{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
@media(max-width:759px){.bk-card .bk-body{grid-template-columns:auto 1fr;row-gap:.6rem}.bk-card .ps-size{grid-column:1}.bk-card .bk-price{grid-column:2;text-align:right}.bk-card .bk-fits{grid-column:1/-1}.bk-card .bk-act{grid-column:1/-1}}
/* Re-assert the mobile hides AFTER the pill definitions above: .bookbtn's own
display:inline-flex sits later in the cascade than the original 1080px hide,
which silently resurrected the button on phones. Mobile header stays
logo + hamburger; the floating pill owns the call action in the thumb zone. */
@media(max-width:1080px){.topbar .topbar-book{display:none}}
@media (max-width:999px){.topbar .callbtn-rich{display:none}}