/* --------------------------------------------------------------------------
Guardian Tree Care — vertical rhythm tuning.
The base theme sets 120px top AND bottom padding on every section, i.e. 240px
of empty space per section. Across the homepage that alone was ~2,900px of
scrolling before any content. These overrides tighten that to a normal
editorial rhythm without touching the layout or type.
Loaded after theme-style.min.css, so equal-specificity rules win on source
order — no !important needed.
-------------------------------------------------------------------------- */
.b-section,
.g-section,
.s-section,
.w-section {
padding-top: 64px;
padding-bottom: 64px;
}
@media (max-width: 1024px) {
.b-section,
.g-section,
.s-section,
.w-section {
padding-top: 52px;
padding-bottom: 52px;
}
}
@media (max-width: 768px) {
.b-section,
.g-section,
.s-section,
.w-section {
padding-top: 40px;
padding-bottom: 40px;
}
}
/* Images in two-column blocks stretched to the full height of their text
column, which made short sections unnecessarily tall. Cap them and keep the
crop centred. */
.image-col img {
max-height: 460px;
object-fit: cover;
}
@media (max-width: 768px) {
.image-col img {
max-height: 300px;
}
}
/* The service card grid carried the same oversized rhythm. */
.service-img {
margin-bottom: 28px;
}
/* --------------------------------------------------------------------------
Hero height.
The hero sat on 188px of top padding (it is pulled up 100px under the
transparent header, so it needs clearance — but not that much), plus 108px of
margin around the subtitle and another 48px above the trust row. That is
~344px of spacing before any content. Tightened below, keeping enough
clearance that the header never overlaps the headline.
-------------------------------------------------------------------------- */
.hero {
padding-top: 140px;
}
.hero p {
margin: 24px 0 34px;
}
.hero .hero-list {
margin-top: 28px;
}
@media (max-width: 1024px) {
.hero {
padding-top: 124px;
}
.hero p {
margin: 20px 0 28px;
}
.hero .hero-list {
margin-top: 22px;
}
}
@media (max-width: 768px) {
.hero {
padding-top: 108px;
}
.hero p {
margin: 16px 0 24px;
}
.hero .hero-list {
margin-top: 18px;
}
}
/* --------------------------------------------------------------------------
TYPE SCALE
The theme's scale runs roughly 30% larger than a normal editorial scale:
body 1.3rem/2.3rem, h1 5rem/6rem, h2 3rem + 48px padding-bottom, h3 1.8rem
with a 3rem line-height. That is the root cause of both the oversized
lettering and the page length — large type makes every block taller, which
is why trimming padding alone never felt like enough.
Brought back to a conventional scale below. Ratios and hierarchy are kept,
everything is just stepped down, so the design reads the same but fits.
-------------------------------------------------------------------------- */
body {
font-size: 1rem;
}
p,
li {
font-size: 1rem;
line-height: 1.65;
}
.g-section p,
.s-section p,
.w-section p,
.b-section p {
margin: 0 0 16px;
}
h1 {
font-size: 3.25rem;
line-height: 1.12;
}
h1 span,
.green-i-font {
font-size: 3.25rem;
}
h2 {
font-size: 2.125rem;
line-height: 1.22;
padding-bottom: 20px;
}
h3 {
font-size: 1.3rem;
line-height: 1.45;
}
/* --------------------------- tablet --------------------------- */
@media (max-width: 1024px) {
h1 { font-size: 2.6rem; }
h1 span,
.green-i-font { font-size: 2.6rem; }
h2 { font-size: 1.85rem; padding-bottom: 16px; }
h3 { font-size: 1.2rem; }
}
/* --------------------------- mobile --------------------------- */
@media (max-width: 768px) {
h1 { font-size: 2.05rem; line-height: 1.18; }
h1 span,
.green-i-font { font-size: 2.05rem; }
h2 { font-size: 1.6rem; padding-bottom: 14px; }
h3 { font-size: 1.12rem; }
p, li { font-size: 0.98rem; }
}
/* ==========================================================================
CARD SYSTEM — 3 per row
The service cards were full-width flex rows with 400x400 images, alternating
left/right. Six of them ran to roughly 2,400px of page on their own. Every
other grid used a different column count (2, 2, 4), so nothing lined up.
One consistent grid below: 3 across on desktop, 2 on tablet, 1 on mobile,
with a shared card treatment (equal heights, capped image ratio, hover lift).
========================================================================== */
/* ---------- shared grid ---------- */
.service-grid,
.gallery-grid,
.season-grid,
.fore-set,
.two-set {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
align-items: stretch;
}
/* ---------- service cards ---------- */
.service-grid .box,
.service-grid .box.reverse,
.service-grid .reverse {
display: flex;
flex-direction: column;
margin: 0;
padding: 0;
gap: 0;
overflow: hidden;
border-radius: 16px;
height: 100%;
transition: transform .18s ease, box-shadow .18s ease;
}
.service-grid .box > div:first-child {
flex: 0 0 auto;
}
.service-grid .box img,
.service-grid .box .desktop-img,
.service-grid .box .mobile-img {
width: 100%;
height: 200px;
object-fit: cover;
border-radius: 0;
display: block;
}
/* text block gets the padding the flex row used to carry */
.service-grid .box > div:last-child {
padding: 20px 22px 24px;
flex: 1 1 auto;
}
.service-grid .box h3 {
margin: 0 0 8px;
text-decoration: none;
}
.service-grid .box h3 a {
text-decoration: none;
}
.service-grid .box p {
margin: 0;
}
/* hover lift — makes the cards read as clickable */
.service-grid .box:hover,
.service-grid .box:focus-within {
transform: translateY(-4px);
box-shadow: 0 12px 28px rgba(2, 3, 18, .16);
}
/* ---------- gallery / seasonal ---------- */
.gallery-grid { gap: 20px; }
.gallery-grid img,
.season-grid img {
width: 100%;
height: 220px;
object-fit: cover;
border-radius: 14px;
display: block;
}
/* ---------- tablet: 2 across ---------- */
@media (max-width: 1024px) {
.service-grid,
.gallery-grid,
.season-grid,
.fore-set,
.two-set {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.service-grid .box img,
.service-grid .box .desktop-img,
.service-grid .box .mobile-img { height: 180px; }
.gallery-grid img,
.season-grid img { height: 190px; }
}
/* ---------- mobile: 1 across ---------- */
@media (max-width: 768px) {
.service-grid,
.gallery-grid,
.season-grid,
.fore-set,
.two-set {
grid-template-columns: 1fr;
gap: 16px;
}
/* the theme flipped cards to column-reverse on mobile, which put the
description above its own image — keep the natural order */
.service-grid .box,
.service-grid .box.reverse,
.service-grid .reverse { flex-direction: column; }
.service-grid .box img,
.service-grid .box .desktop-img,
.service-grid .box .mobile-img { height: 200px; }
.gallery-grid img,
.season-grid img { height: 200px; }
}
/* ==========================================================================
UI / UX POLISH
========================================================================== */
/* ---------- buttons: consistent sizing + feedback ---------- */
.btn,
.cta-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 13px 26px;
border-radius: 10px;
font-weight: 700;
line-height: 1.2;
text-decoration: none;
transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.hero-buttons .btn {
width: auto;
min-width: 210px;
}
.btn:hover,
.cta-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 18px rgba(2, 3, 18, .18);
}
.btn:active,
.cta-btn:active {
transform: translateY(0);
}
/* ---------- accessibility: visible keyboard focus ---------- */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible {
outline: 3px solid #648e94;
outline-offset: 3px;
border-radius: 4px;
}
/* ---------- card titles: drop the theme's underline ---------- */
.service-grid h3,
.box h3 {
text-decoration: none;
}
.service-grid h3 a {
color: inherit;
}
.service-grid h3 a:hover {
color: #648e94;
}
/* ---------- readable measure: stop long paragraphs running edge to edge ---------- */
.gtc-container > p,
.content-col p,
.subset p {
max-width: 72ch;
}
/* ---------- images: one consistent radius ---------- */
.image-col img,
.two-col img,
.season-grid img,
.gallery-grid img {
border-radius: 14px;
}
/* ---------- lists: tighter, easier to scan ---------- */
.check-mark li,
.trust-list li {
line-height: 1.5;
margin-bottom: 8px;
}
/* ---------- FAQ: comfortable hit area ---------- */
.faq-item,
.faq-question {
cursor: pointer;
}
.faq-question {
padding: 16px 0;
line-height: 1.4;
}
/* ---------- body links: obvious but not shouty ---------- */
.gtc-container p a {
text-decoration: underline;
text-underline-offset: 3px;
}
/* ---------- respect reduced-motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
.btn,
.cta-btn,
.service-grid .box {
transition: none;
}
.btn:hover,
.cta-btn:hover,
.service-grid .box:hover {
transform: none;
}
}
/* ==========================================================================
HERO — measure and rhythm
The hero content had no max-width, so the headline and subtitle ran the full
~1900px of the viewport on a large screen. A single line that wide is hard to
read and made the headline look stretched rather than confident. Constraining
the measure lets the H1 break naturally over two lines and gives the block a
clear left-hand column against the photograph.
========================================================================== */
.hero-content {
max-width: 960px;
}
.hero-content h1 {
max-width: 15ch;
margin: 0;
}
.hero-content p {
max-width: 60ch;
margin: 22px 0 30px;
}
/* Trust row: group it under the buttons instead of spanning the full width. */
.hero .hero-list {
margin-top: 34px;
max-width: 900px;
}
.hero-list .check-mark {
gap: 18px 40px;
}
/* A touch more breathing room above the fold than the first tightening pass —
that went too far and left the headline crowding the navigation. */
.hero {
padding-top: 156px;
padding-bottom: 88px;
}
@media (max-width: 1024px) {
.hero-content { max-width: 100%; }
.hero-content h1 { max-width: 18ch; }
.hero-content p { max-width: 100%; }
.hero {
padding-top: 132px;
padding-bottom: 64px;
}
}
@media (max-width: 768px) {
.hero-content h1 { max-width: 100%; }
.hero-content p { margin: 16px 0 24px; }
.hero {
padding-top: 112px;
padding-bottom: 52px;
}
.hero-buttons .btn {
min-width: 0;
width: 100%;
}
}
/* ==========================================================================
HERO — visual treatment
The hero sat under a flat linear-gradient(rgba(0,0,0,.8), rgba(0,0,0,.8)) —
an even 80% black wash across the whole photograph. That is why the image
read as murky grey rather than a photo of the crew working: at 80% opacity
there is almost no picture left to see.
Replaced with a directional gradient: heavy on the left where the text sits
(so contrast stays well above AA), falling away to the right so the crane and
crew are actually visible. Same legibility, far more depth.
========================================================================== */
.hero {
background-image:
linear-gradient(
100deg,
rgba(2, 3, 18, .93) 0%,
rgba(2, 3, 18, .86) 32%,
rgba(2, 3, 18, .62) 62%,
rgba(2, 3, 18, .34) 100%
),
url('../img/guardian-tree-care-bg.webp');
background-size: cover;
background-position: center right;
background-repeat: no-repeat;
/* fixed attachment janks badly on mobile and is ignored on iOS */
background-attachment: scroll;
position: relative;
}
/* Soft fade into the section beneath, so the hero does not end on a hard edge */
.hero::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 90px;
background: linear-gradient(to bottom, rgba(2, 3, 18, 0), rgba(2, 3, 18, .55));
pointer-events: none;
}
.hero > div {
position: relative;
z-index: 1;
}
/* Lift the type off the photograph */
.hero-content h1 {
text-shadow: 0 2px 18px rgba(0, 0, 0, .45);
}
.hero-content p {
text-shadow: 0 1px 10px rgba(0, 0, 0, .4);
color: rgba(255, 255, 255, .92);
}
/* ---------- button hierarchy ----------
Both buttons previously carried similar weight. For a tree service the phone
is the primary action, so it takes the solid accent; the estimate button
becomes a clear secondary rather than competing with it. */
.hero-buttons .call-now-btn {
background-color: #648e94;
color: #fff;
border: 2px solid #648e94;
box-shadow: 0 6px 18px rgba(100, 142, 148, .35);
}
.hero-buttons .call-now-btn:hover {
background-color: #5a828a;
border-color: #5a828a;
}
.hero-buttons .free-estimate-btn {
background-color: rgba(255, 255, 255, .96);
color: #020312;
border: 2px solid rgba(255, 255, 255, .96);
}
.hero-buttons .free-estimate-btn:hover {
background-color: #fff;
border-color: #fff;
}
/* ---------- trust row: a legible band, not text floating on a photo ---------- */
.hero-list .check-mark li {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 16px 9px 14px;
margin-bottom: 0;
background: rgba(255, 255, 255, .10);
border: 1px solid rgba(255, 255, 255, .18);
border-radius: 999px;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
font-size: .95rem;
line-height: 1.3;
white-space: nowrap;
}
/* the theme positioned the icon absolutely via padding-left — flex handles it now */
.hero-list .check-mark li img {
position: static;
width: 22px;
height: 22px;
flex: 0 0 auto;
}
.hero-list .check-mark {
grid-template-columns: repeat(4, max-content);
gap: 12px;
}
/* ---------------------------- responsive ---------------------------- */
@media (max-width: 1024px) {
.hero {
background-position: center;
background-image:
linear-gradient(
160deg,
rgba(2, 3, 18, .93) 0%,
rgba(2, 3, 18, .84) 45%,
rgba(2, 3, 18, .60) 100%
),
url('../img/guardian-tree-care-bg.webp');
}
.hero-list .check-mark {
grid-template-columns: repeat(2, max-content);
}
}
@media (max-width: 768px) {
.hero-list .check-mark {
grid-template-columns: 1fr;
gap: 8px;
}
.hero-list .check-mark li {
white-space: normal;
}
.hero::after {
height: 60px;
}
}
/* ==========================================================================
"WHY BUFFALO HOMEOWNERS TRUST US" — trust panel
Two problems were stacking up here:
1. .two-col is a flex row with `> * { flex: 1 }` and default align-items,
so both columns stretched to the taller one. The photo set the height and
the black panel stretched to match, leaving a large dead area under the
four items.
2. The panel is styled at font-size 1.5rem, but the global type reset targets
`li` directly, which beats the inherited size — so the items rendered at
16px inside a box proportioned for 24px text, hence the cramped look.
Fixed by letting the columns centre against each other, sizing the panel to
its content, and restoring a sensible item size.
========================================================================== */
.quick-trust .two-col {
align-items: center;
}
.quick-trust .content-col {
display: flex;
flex-direction: column;
justify-content: center;
}
/* panel hugs its content instead of stretching */
.quick-trust .trust-list {
margin-top: 28px;
padding: 34px 38px;
border-radius: 20px;
align-self: flex-start;
width: 100%;
}
.quick-trust .trust-list ul {
margin: 0;
padding: 0;
list-style: none;
}
.quick-trust .trust-list li {
font-size: 1.08rem;
line-height: 1.4;
margin-bottom: 0;
padding-left: 0;
gap: 16px;
}
.quick-trust .trust-list li:not(:last-child) {
margin-bottom: 20px;
}
/* the tick sits inline via flex, so the absolute ::before offset is not needed */
.quick-trust .trust-list li::before {
position: static;
flex: 0 0 auto;
width: 26px;
height: 26px;
}
/* heading sits closer to the panel it introduces */
.quick-trust .content-col h2 {
padding-bottom: 8px;
}
/* photo: cap it so it cannot drive the row height on wide screens */
.quick-trust .image-col img {
max-height: 420px;
width: 100%;
object-fit: cover;
border-radius: 18px;
}
@media (max-width: 1024px) {
.quick-trust .trust-list {
padding: 28px 30px;
}
.quick-trust .trust-list li {
font-size: 1rem;
}
.quick-trust .image-col img {
max-height: 340px;
}
}
@media (max-width: 768px) {
.quick-trust .two-col {
flex-direction: column;
gap: 24px;
}
.quick-trust .trust-list {
margin-top: 20px;
padding: 24px 22px;
}
.quick-trust .trust-list li:not(:last-child) {
margin-bottom: 16px;
}
.quick-trust .image-col img {
max-height: 260px;
}
}
/* ==========================================================================
SERVICE CARDS — polish
The images sat inset with dark gutters either side because the card carries
`align-items: center`. On a vertical flex that centres children horizontally,
so the image wrapper only took its intrinsic width instead of filling the
card. Stretching the children fixes it and lets the image sit flush.
========================================================================== */
.service-grid .box,
.service-grid .box.reverse,
.service-grid .reverse {
align-items: stretch;
border-radius: 18px;
border-width: 1px;
border-color: rgba(100, 142, 148, .45);
overflow: hidden;
}
/* every direct child spans the card */
.service-grid .box > div {
width: 100%;
}
/* image flush at the top, fixed ratio so all cards match */
.service-grid .box > div:first-child {
line-height: 0;
overflow: hidden;
}
.service-grid .box img,
.service-grid .box .desktop-img {
width: 100%;
height: 210px;
object-fit: cover;
border-radius: 0;
display: block;
transition: transform .35s ease;
}
.service-grid .box:hover img,
.service-grid .box:hover .desktop-img {
transform: scale(1.04);
}
/* text block: balanced padding; heading reserves two lines so the copy below
starts at the same height across the three cards in a row */
.service-grid .box > div:last-child {
padding: 22px 24px 26px;
display: flex;
flex-direction: column;
}
.service-grid .box h3 {
margin: 0 0 10px;
min-height: 2.6em;
display: flex;
align-items: flex-start;
font-size: 1.22rem;
line-height: 1.3;
}
.service-grid .box p {
margin: 0;
font-size: .97rem;
line-height: 1.6;
opacity: .88;
}
/* calmer, more deliberate hover */
.service-grid .box:hover,
.service-grid .box:focus-within {
transform: translateY(-5px);
border-color: rgba(100, 142, 148, .95);
box-shadow: 0 16px 34px rgba(0, 0, 0, .35);
}
@media (max-width: 1024px) {
.service-grid .box img,
.service-grid .box .desktop-img { height: 190px; }
.service-grid .box h3 { min-height: 0; font-size: 1.15rem; }
.service-grid .box > div:last-child { padding: 20px 20px 22px; }
}
@media (max-width: 768px) {
.service-grid .box img,
.service-grid .box .desktop-img { height: 200px; }
.service-grid .box h3 { min-height: 0; }
}
/* ==========================================================================
DESIGN LANGUAGE — informed by the travel-site reference
The reference gets its lift from three things Guardian did not have:
1. a warm accent playing against the cool teal (it was teal + navy only,
so everything read as one flat temperature)
2. curved transitions between sections instead of hard horizontal edges
3. cards that sit on the page with real elevation
Added below as a layer. Existing brand colours are kept as the primary.
========================================================================== */
:root {
--gtc-ink: #020312;
--gtc-teal: #648e94;
--gtc-teal-deep: #355357;
--gtc-mint: #f2faeb;
--gtc-amber: #efa63c; /* new warm accent */
--gtc-amber-dk: #d98f24;
--gtc-cream: #fdf7ec; /* new warm neutral */
--gtc-shadow: 0 14px 34px rgba(2, 3, 18, .10);
--gtc-shadow-lg: 0 22px 48px rgba(2, 3, 18, .16);
}
/* ---------------------------------------------------------------
1. WARM ACCENT — the secondary CTA carries it, so every section
has one clear warm focal point against the teal.
--------------------------------------------------------------- */
.free-estimate-btn,
.cta-btn:not(.call-btn),
.btn.accent {
background-color: var(--gtc-amber);
border-color: var(--gtc-amber);
color: var(--gtc-ink);
box-shadow: 0 8px 20px rgba(239, 166, 60, .32);
}
.free-estimate-btn:hover,
.cta-btn:not(.call-btn):hover,
.btn.accent:hover {
background-color: var(--gtc-amber-dk);
border-color: var(--gtc-amber-dk);
color: var(--gtc-ink);
}
/* eyebrow / kicker labels pick up the accent */
.g-section h3:first-child,
.w-section h3:first-child,
.quick-trust h3:first-child {
color: var(--gtc-amber-dk);
letter-spacing: .10em;
text-transform: uppercase;
font-size: .82rem;
font-weight: 800;
text-decoration: none;
}
/* ---------------------------------------------------------------
2. PILL BUTTONS — the reference uses fully rounded CTAs
--------------------------------------------------------------- */
.btn,
.cta-btn {
border-radius: 999px;
padding: 14px 30px;
letter-spacing: .01em;
}
/* ---------------------------------------------------------------
3. CURVED SECTION TRANSITIONS
Soft top curve on the pale sections so they meet the darker ones
with a shape rather than a hard rule.
--------------------------------------------------------------- */
.g-section,
.w-section {
position: relative;
}
.g-section::before,
.w-section::before {
content: "";
position: absolute;
top: -1px;
left: 0;
right: 0;
height: 46px;
background: inherit;
border-radius: 50% 50% 0 0 / 100% 100% 0 0;
transform: translateY(-44px);
pointer-events: none;
z-index: 0;
}
.g-section > *,
.w-section > * {
position: relative;
z-index: 1;
}
/* the hero already fades into what follows — no curve needed there */
.hero::before {
display: none;
}
/* ---------------------------------------------------------------
4. ELEVATED CARDS — white cards with real shadow, as per reference
--------------------------------------------------------------- */
.g-section .service-grid .box,
.w-section .service-grid .box {
background-color: #fff;
border-color: rgba(2, 3, 18, .07);
box-shadow: var(--gtc-shadow);
}
.g-section .service-grid .box:hover,
.w-section .service-grid .box:hover {
box-shadow: var(--gtc-shadow-lg);
border-color: rgba(100, 142, 148, .55);
}
.g-section .service-grid .box h3,
.g-section .service-grid .box h3 a,
.w-section .service-grid .box h3,
.w-section .service-grid .box h3 a {
color: var(--gtc-ink);
}
.g-section .service-grid .box p,
.w-section .service-grid .box p {
color: #4a4f57;
opacity: 1;
}
/* ---------------------------------------------------------------
5. NUMBERED STEPS — the reference badges each step 01 / 02 / 03
--------------------------------------------------------------- */
.tree-care-process .service-grid,
.our-safety-process .service-grid {
counter-reset: gtc-step;
}
.tree-care-process .box,
.our-safety-process .box {
counter-increment: gtc-step;
position: relative;
}
.tree-care-process .box::before,
.our-safety-process .box::before {
content: counter(gtc-step, decimal-leading-zero);
position: absolute;
top: 14px;
left: 14px;
z-index: 2;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--gtc-amber);
color: var(--gtc-ink);
font-weight: 800;
font-size: 1rem;
box-shadow: 0 6px 16px rgba(2, 3, 18, .22);
}
/* ---------------------------------------------------------------
6. WARMER NEUTRAL for the pale band, so it is not a single cool tint
--------------------------------------------------------------- */
.w-section {
background-color: var(--gtc-cream);
}
/* ---------------------------------------------------------------
7. SOFTER IMAGERY — consistent rounding + gentle shadow
--------------------------------------------------------------- */
.image-col img,
.gallery-grid img,
.season-grid img {
box-shadow: var(--gtc-shadow);
}
@media (max-width: 768px) {
.g-section::before,
.w-section::before {
height: 28px;
transform: translateY(-26px);
}
.tree-care-process .box::before,
.our-safety-process .box::before {
width: 36px;
height: 36px;
font-size: .88rem;
}
}
/* ==========================================================================
DESIGN LANGUAGE — pass 2
The reference's other signature is that content sits inside rounded panels
and pills rather than running edge-to-edge in flat bands. Applied below to
the FAQ, why-us list, CTA and service-area sections.
========================================================================== */
/* ---------------------------------------------------------------
FAQ — elevated cards with a chevron, instead of flat rows
--------------------------------------------------------------- */
.faq-section .faq-wrapper {
max-width: 900px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 12px;
}
.faq-section .faq-item {
background: #fff;
border: 1px solid rgba(2, 3, 18, .07);
border-radius: 14px;
box-shadow: 0 6px 18px rgba(2, 3, 18, .06);
padding: 4px 22px;
transition: box-shadow .2s ease, border-color .2s ease;
}
.faq-section .faq-item:hover,
.faq-section .faq-item.active {
border-color: rgba(100, 142, 148, .5);
box-shadow: 0 12px 26px rgba(2, 3, 18, .10);
}
.faq-section .faq-item h3 {
position: relative;
margin: 0;
padding: 18px 42px 18px 0;
font-size: 1.05rem;
line-height: 1.45;
text-decoration: none;
cursor: pointer;
display: block;
}
/* chevron indicator */
.faq-section .faq-item h3::after {
content: "";
position: absolute;
right: 6px;
top: 50%;
width: 10px;
height: 10px;
margin-top: -6px;
border-right: 2px solid var(--gtc-teal);
border-bottom: 2px solid var(--gtc-teal);
transform: rotate(45deg);
transition: transform .22s ease;
}
.faq-section .faq-item.active h3::after {
transform: rotate(-135deg);
margin-top: -2px;
}
.faq-section .faq-answer {
padding-bottom: 6px;
}
.faq-section .faq-answer p {
margin: 0 0 12px;
color: #4a4f57;
}
/* ---------------------------------------------------------------
WHY CHOOSE US — two-column checklist inside a panel
--------------------------------------------------------------- */
.why-choose-us .gtc-container > ul {
list-style: none;
margin: 8px 0 0;
padding: 30px 34px;
background: #fff;
border-radius: 20px;
box-shadow: var(--gtc-shadow);
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px 32px;
}
.why-choose-us .gtc-container > ul li {
position: relative;
padding-left: 30px;
line-height: 1.55;
margin: 0;
color: #3d434b;
}
.why-choose-us .gtc-container > ul li::before {
content: "";
position: absolute;
left: 0;
top: .45em;
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--gtc-amber);
box-shadow: inset 0 0 0 3px #fff;
}
/* ---------------------------------------------------------------
SERVICE AREA — locations as pills
--------------------------------------------------------------- */
.service-area .location-list ul {
list-style: none;
margin: 6px 0 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.service-area .location-list li {
margin: 0;
padding: 9px 18px;
background: #fff;
border: 1px solid rgba(2, 3, 18, .08);
border-radius: 999px;
font-size: .95rem;
line-height: 1.2;
box-shadow: 0 3px 10px rgba(2, 3, 18, .05);
transition: border-color .18s ease, transform .18s ease;
}
.service-area .location-list li:hover {
border-color: var(--gtc-teal);
transform: translateY(-2px);
}
/* ---------------------------------------------------------------
CTA — a defined panel rather than a full-bleed dark band
--------------------------------------------------------------- */
.call-to-action .gtc-container {
background: linear-gradient(135deg, var(--gtc-teal-deep) 0%, #24444a 100%);
border-radius: 26px;
padding: 46px 48px;
box-shadow: var(--gtc-shadow-lg);
}
.call-to-action .gtc-container h2,
.call-to-action .gtc-container h3 {
color: #fff;
}
.call-to-action .gtc-container p {
color: rgba(255, 255, 255, .86);
}
.call-to-action .cta-buttons {
margin-top: 22px;
}
/* ---------------------------------------------------------------
Section headings: a short accent rule under the h2, as per reference
--------------------------------------------------------------- */
.g-section .gtc-container > h2::after,
.w-section .gtc-container > h2::after {
content: "";
display: block;
width: 62px;
height: 4px;
border-radius: 999px;
background: var(--gtc-amber);
margin-top: 14px;
}
/* ---------------------------------------------------------------
Responsive
--------------------------------------------------------------- */
@media (max-width: 900px) {
.why-choose-us .gtc-container > ul {
grid-template-columns: 1fr;
padding: 24px 22px;
}
.call-to-action .gtc-container {
padding: 32px 24px;
border-radius: 20px;
}
.faq-section .faq-item {
padding: 2px 16px;
}
.faq-section .faq-item h3 {
font-size: 1rem;
padding: 15px 34px 15px 0;
}
}
/* ==========================================================================
FIX — eyebrow styling was too greedy
The accent "eyebrow" rule targeted any `h3:first-child` inside a section.
That is correct for a kicker like "PRIMARY SERVICES" (which sits directly
above the section h2), but it also caught genuine subheadings such as
"When Tree Removal Is the Right Call" inside .subset — rendering a real
heading as a tiny uppercase label.
Restored below: subheadings look like headings again; the eyebrow treatment
is kept only where an h3 immediately precedes the section h2.
========================================================================== */
/* --- 1. genuine subheadings back to heading styling --- */
.g-section .subset h3,
.w-section .subset h3,
.s-section .subset h3,
.b-section .subset h3,
.g-section .fore-set h3,
.w-section .fore-set h3,
.subset > h3:first-child,
.fore-set > h3:first-child {
color: inherit;
text-transform: none;
letter-spacing: normal;
font-size: 1.42rem;
line-height: 1.32;
font-weight: 800;
text-decoration: none;
margin: 0 0 14px;
}
/* a short accent rule keeps them tied to the design without shrinking them */
.subset > h3:first-child::after,
.fore-set > h3:first-child::after {
content: "";
display: block;
width: 44px;
height: 3px;
border-radius: 999px;
background: var(--gtc-amber);
margin-top: 10px;
}
/* --- 2. card headings must never pick up the eyebrow treatment --- */
.service-grid .box h3,
.service-grid .box h3 a,
.faq-section .faq-item h3 {
text-transform: none;
letter-spacing: normal;
font-weight: 700;
}
.faq-section .faq-item h3 {
color: var(--gtc-ink);
font-size: 1.05rem;
}
/* --- 3. give the .subset blocks room to breathe --- */
.subset {
margin-top: 34px;
}
.subset p {
max-width: 74ch;
}
@media (max-width: 768px) {
.g-section .subset h3,
.w-section .subset h3,
.subset > h3:first-child {
font-size: 1.2rem;
}
.subset { margin-top: 24px; }
}
/* ==========================================================================
FIX — process steps
Three things were wrong here:
1. Double numbering. The theme already numbers each step twice: a 300x300
number graphic and a `01. ` in the heading. My CSS counter
badge made it three. Badge removed.
2. Wrong container. The steps sit in `.tree-care-process`, not
`.service-grid`, so the 3-across grid never reached them — they stayed
full-width rows, each roughly 250px tall.
3. The 300px number graphic dominated each card and pushed the copy into a
narrow strip. Replaced with the heading's own number span, styled — no
image download, far less height.
========================================================================== */
/* 1. remove the counter badge added earlier */
.tree-care-process .box::before,
.our-safety-process .box::before {
content: none;
}
/* 2. three across, matching the service cards */
.tree-care-process {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
align-items: stretch;
}
.tree-care-process .box {
flex-direction: column;
align-items: stretch;
margin: 0;
padding: 26px 26px 28px;
gap: 0;
height: 100%;
border-radius: 18px;
border-width: 1px;
border-color: rgba(100, 142, 148, .45);
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.tree-care-process .box:hover {
transform: translateY(-4px);
border-color: rgba(100, 142, 148, .95);
box-shadow: 0 16px 32px rgba(0, 0, 0, .32);
}
/* 3. drop the heavy number graphic */
.tree-care-process .box img {
display: none !important;
}
/* ...and use the heading's own number span instead */
.tree-care-process .box h3 {
display: block;
margin: 0 0 10px;
font-size: 1.18rem;
line-height: 1.35;
text-decoration: none;
text-transform: none;
letter-spacing: normal;
min-height: 0;
}
.tree-care-process .box h3 span {
display: block !important;
color: var(--gtc-amber);
font-size: 2.1rem;
font-weight: 800;
line-height: 1;
margin-bottom: 12px;
letter-spacing: -.01em;
}
.tree-care-process .box p {
margin: 0;
font-size: .97rem;
line-height: 1.6;
opacity: .9;
}
/* the inner wrapper should not constrain the text */
.tree-care-process .box > div {
width: 100%;
}
@media (max-width: 1024px) {
.tree-care-process {
grid-template-columns: repeat(2, 1fr);
gap: 18px;
}
.tree-care-process .box { padding: 22px 22px 24px; }
.tree-care-process .box h3 span { font-size: 1.85rem; }
}
@media (max-width: 768px) {
.tree-care-process {
grid-template-columns: 1fr;
gap: 14px;
}
.tree-care-process .box { padding: 20px; }
.tree-care-process .box h3 span { font-size: 1.6rem; margin-bottom: 8px; }
}
/* ==========================================================================
FIX — grid columns must match their content
The earlier "3 across everywhere" rule was too blunt. Several containers
carry content in other natural counts, and forcing 3 columns broke them:
- .gallery-grid holds BEFORE/AFTER PAIRS (2 per block). Three columns
destroyed the side-by-side comparison.
- .two-set holds exactly 2 images.
- .fore-set holds 4 images; 3 columns left the fourth orphaned alone on
its own row (the floating-image bug on /tree-removal/).
- safety-process has 4 cards; 3 columns orphaned the fourth.
Each container now gets the column count its content actually comes in.
========================================================================== */
/* ---------- before/after: pairs, side by side, always ---------- */
.gallery-grid {
grid-template-columns: repeat(2, 1fr);
gap: 18px;
}
.gallery-grid .gallery-item {
position: relative;
line-height: 0;
}
.gallery-grid img {
height: 260px;
}
/* ---------- two-set: two images ---------- */
.two-set {
grid-template-columns: repeat(2, 1fr);
gap: 18px;
}
.two-set img {
width: 100%;
height: 240px;
object-fit: cover;
border-radius: 14px;
display: block;
}
/* ---------- fore-set: four images, one tidy strip ---------- */
.fore-set {
grid-template-columns: repeat(4, 1fr);
gap: 14px;
margin: 22px 0;
}
.fore-set img {
width: 100%;
height: 170px;
object-fit: cover;
border-radius: 12px;
display: block;
}
/* ---------- safety-process: 4 cards -> 2x2 ---------- */
.our-safety-process .service-grid,
.safety-process .service-grid {
grid-template-columns: repeat(2, 1fr);
}
/* ---------- loose wide images: cap and soften ---------- */
.l-image {
max-height: 420px;
object-fit: cover;
border-radius: 16px;
box-shadow: var(--gtc-shadow);
margin-top: 10px;
}
/* ---------- responsive ---------- */
@media (max-width: 1024px) {
.fore-set {
grid-template-columns: repeat(2, 1fr);
}
.fore-set img { height: 180px; }
.two-set img { height: 200px; }
.gallery-grid img { height: 210px; }
.l-image { max-height: 340px; }
}
@media (max-width: 768px) {
/* pairs stay side-by-side — they are comparisons */
.gallery-grid {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.gallery-grid img { height: 150px; }
.two-set {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.two-set img { height: 140px; }
.fore-set {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.fore-set img { height: 130px; }
.our-safety-process .service-grid,
.safety-process .service-grid {
grid-template-columns: 1fr;
}
.l-image { max-height: 240px; }
}
/* ==========================================================================
FIX — the container had no max-width
`.gtc-container` was `width: 100%` with nothing capping it, so on a wide
monitor every section ran the full ~1700px. Capping paragraphs at 72ch then
left-aligned the text inside that very wide box, which is what produced the
big empty right-hand column on sections like "Fully Licensed, Insured and
Accountable".
The proper fix is a centred content column, which is how the rest of the
layout expects to behave. This corrects every section at once and removes
the need for per-element width patches.
========================================================================== */
.gtc-container {
max-width: 1240px;
margin-left: auto;
margin-right: auto;
}
/* With a real column, paragraphs no longer need their own cap — they inherit a
sensible measure. Keep a gentle limit only where text sits beside an image. */
.gtc-container > p,
.subset p {
max-width: none;
}
.two-col .content-col p,
.two-col > div p {
max-width: 62ch;
}
/* Single-column text sections read better with a slightly narrower measure than
the full 1240px, so long paragraphs do not run edge to edge. */
.licensed-insured .gtc-container,
.why-choose-us .gtc-container,
.faq-section .gtc-container,
.service-area .gtc-container {
max-width: 1100px;
}
/* ---------- tighten the gap between sections ----------
64px bottom + 64px top + the curved divider was reading as a void. */
.g-section,
.s-section,
.w-section,
.b-section {
padding-top: 56px;
padding-bottom: 56px;
}
/* headings should not add another 20px on top of that */
.gtc-container > h2 {
margin-top: 0;
}
/* ---------- checklist: smaller ticks, tighter rows ---------- */
.licensed-insured .check-mark li,
.why-choose-us .check-mark li {
padding-left: 0;
gap: 12px;
align-items: flex-start;
line-height: 1.55;
margin-bottom: 10px;
}
.licensed-insured .check-mark li img,
.why-choose-us .check-mark li img {
width: 20px;
height: 20px;
margin-top: 3px;
flex: 0 0 auto;
}
.licensed-insured .check-mark li::before,
.why-choose-us .check-mark li::before {
position: static;
width: 20px;
height: 20px;
margin-top: 3px;
flex: 0 0 auto;
}
@media (max-width: 1280px) {
.gtc-container {
max-width: 100%;
}
}
@media (max-width: 768px) {
.g-section,
.s-section,
.w-section,
.b-section {
padding-top: 38px;
padding-bottom: 38px;
}
.two-col .content-col p,
.two-col > div p {
max-width: none;
}
}
/* ==========================================================================
FIX — sections the earlier passes missed
A structural audit of all 25 partials turned up two gaps:
1. .seasonal-set (seasonal-care) was never picked up. The base theme only
gives it `padding-top: 48px` — no grid at all — so its four seasonal
images stacked full-width, one under another, at whatever size they
happened to be. My earlier rules targeted `.season-grid`, a different
class used by tree-trimming.
2. Loose `.l-image` photos sat directly on the background with no framing,
so seasonal-care ran as four huge uncropped photos in a column.
========================================================================== */
/* ---------- seasonal-care: four images -> a proper grid ---------- */
.seasonal-set {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
padding-top: 26px;
align-items: stretch;
}
.seasonal-set img,
.seasonal-set .l-image {
width: 100%;
height: 190px;
max-height: 190px;
object-fit: cover;
border-radius: 14px;
display: block;
margin: 0;
box-shadow: var(--gtc-shadow);
}
/* ---------- section headings: consistent spacing everywhere ---------- */
.gtc-container > h2 {
margin-bottom: 6px;
}
.gtc-container > h2 + p {
margin-top: 0;
}
/* ---------- two-col: vertical centring and a sane gap ---------- */
.two-col {
gap: 40px;
align-items: center;
}
.two-col > div {
min-width: 0;
}
/* ---------- CTA band: stop it colliding with the section above ---------- */
.cta-section {
padding-top: 0;
padding-bottom: 0;
}
/* ---------- contact-info: tidy the detail rows ---------- */
.contact-info-section .contact-info-list li,
.contact-info .contact-info-list li {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
line-height: 1.5;
}
.contact-info-section .contact-info-list li img,
.contact-info .contact-info-list li img {
width: 22px;
height: 22px;
flex: 0 0 auto;
}
/* ---------- google map: give it a frame ---------- */
.google-map iframe,
#google-map iframe {
width: 100%;
min-height: 380px;
border: 0;
border-radius: 18px;
display: block;
box-shadow: var(--gtc-shadow);
}
/* ---------- responsive ---------- */
@media (max-width: 1024px) {
.seasonal-set {
grid-template-columns: repeat(2, 1fr);
}
.seasonal-set img,
.seasonal-set .l-image { height: 180px; max-height: 180px; }
.two-col { gap: 28px; }
.google-map iframe,
#google-map iframe { min-height: 320px; }
}
@media (max-width: 768px) {
.seasonal-set {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.seasonal-set img,
.seasonal-set .l-image { height: 130px; max-height: 130px; }
.two-col {
flex-direction: column;
gap: 22px;
align-items: stretch;
}
.google-map iframe,
#google-map iframe { min-height: 260px; }
}
/* ==========================================================================
FIX — two-column balance
In "Why Buffalo Homeowners Trust" and "Contact Guardian Tree Care" the dark
panel on the left is short while the photo on the right is tall, so the rows
read as lopsided with the panel floating against a much bigger image.
Rather than stretch the panel (which reintroduces the dead space fixed
earlier), the photo is capped to a height close to the panel's natural size.
The columns then read as a matched pair.
========================================================================== */
/* ---------- trust + contact rows: cap the photo, weight the columns ---------- */
.quick-trust .two-col,
.contact-info-section .two-col,
.contact-info .two-col {
align-items: stretch;
gap: 34px;
}
.quick-trust .image-col,
.contact-info-section .image-col,
.contact-info .image-col {
display: flex;
}
.quick-trust .image-col img,
.contact-info-section .image-col img,
.contact-info .image-col img {
width: 100%;
height: 100%;
max-height: 340px;
object-fit: cover;
border-radius: 18px;
}
/* the dark panel fills its side rather than floating in the middle */
.quick-trust .trust-list,
.contact-info-section .trust-list,
.contact-info .trust-list {
align-self: stretch;
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
}
/* content column no longer needs vertical centring once the panel stretches */
.quick-trust .content-col,
.contact-info-section .content-col,
.contact-info .content-col {
justify-content: flex-start;
}
/* ---------- contact rows: readable, evenly spaced ---------- */
.contact-info-list li {
font-size: 1.02rem;
}
/* ---------- map: full width of the column, framed ---------- */
#google-map iframe,
.google-map iframe {
height: 420px;
min-height: 0;
}
/* ---------- service-page hero: a little more presence ---------- */
.inner-hero {
padding-top: 150px;
padding-bottom: 74px;
}
.inner-hero .hero-content h1 {
max-width: 20ch;
}
/* ---------- the 4-image strips read better slightly taller ---------- */
.fore-set img {
height: 190px;
}
@media (max-width: 1024px) {
.quick-trust .image-col img,
.contact-info-section .image-col img,
.contact-info .image-col img {
max-height: 280px;
}
#google-map iframe,
.google-map iframe { height: 340px; }
.inner-hero { padding-top: 126px; padding-bottom: 56px; }
.fore-set img { height: 170px; }
}
@media (max-width: 768px) {
.quick-trust .two-col,
.contact-info-section .two-col,
.contact-info .two-col {
flex-direction: column;
gap: 20px;
}
.quick-trust .image-col img,
.contact-info-section .image-col img,
.contact-info .image-col img {
max-height: 220px;
}
#google-map iframe,
.google-map iframe { height: 280px; }
.inner-hero { padding-top: 108px; padding-bottom: 44px; }
.fore-set img { height: 130px; }
}
/* ==========================================================================
FIX — nested containers double-constrain their content
contact-info.php wraps its content in `.gtc-container` twice. With a
max-width and horizontal padding now on that class, the inner one applied
both a second time, so the contact row sat narrower and further inset than
every other section.
Neutralising any nested instance keeps the markup untouched and makes the
layout immune to the same mistake elsewhere.
========================================================================== */
.gtc-container .gtc-container {
max-width: none;
width: 100%;
padding-left: 0;
padding-right: 0;
margin-left: 0;
margin-right: 0;
}
/* ==========================================================================
UX — readability and scroll behaviour
1. Body copy in the .subset blocks currently runs the full 1240px column,
which is roughly 110 characters per line. Comfortable reading sits around
65-80; past that the eye loses its place returning to the next line.
Text is capped while the image strips keep the full width, which is the
normal editorial arrangement.
2. The header is `position: sticky`, so any in-page anchor scrolled the
target heading underneath it. scroll-margin-top fixes that everywhere.
========================================================================== */
/* ---------- comfortable measure for long-form copy ---------- */
.subset > p,
.subset > ul,
.licensed-insured .gtc-container > p,
.licensed-insured .gtc-container > ul {
max-width: 80ch;
}
/* image strips and galleries keep the full column */
.subset .fore-set,
.subset .two-set,
.subset .l-image,
.subset img {
max-width: none;
}
/* ---------- sticky-header offset for in-page links ---------- */
:target,
section[id],
h2[id],
h3[id] {
scroll-margin-top: 96px;
}
/* ---------- rhythm between the intro row and the blocks below ---------- */
.subset + .subset {
margin-top: 40px;
}
.subset > h3:first-child {
margin-top: 0;
}
/* ---------- image strips: make them feel deliberate ---------- */
.fore-set img,
.two-set img,
.season-grid img,
.seasonal-set img {
box-shadow: 0 8px 20px rgba(2, 3, 18, .10);
transition: transform .25s ease, box-shadow .25s ease;
}
.fore-set img:hover,
.two-set img:hover,
.season-grid img:hover,
.seasonal-set img:hover {
transform: translateY(-3px);
box-shadow: 0 16px 30px rgba(2, 3, 18, .18);
}
/* ---------- the lead image in a two-col row ---------- */
.two-col .image-col img,
.two-col .service-img img {
box-shadow: var(--gtc-shadow);
border-radius: 16px;
}
/* ---------- inline phone links should look tappable ---------- */
.subset a[href^="tel:"],
.gtc-container p a[href^="tel:"] {
font-weight: 700;
color: var(--gtc-teal-deep);
text-underline-offset: 3px;
}
@media (max-width: 1024px) {
.subset > p,
.subset > ul,
.licensed-insured .gtc-container > p,
.licensed-insured .gtc-container > ul {
max-width: none;
}
:target,
section[id],
h2[id],
h3[id] {
scroll-margin-top: 84px;
}
}
/* ==========================================================================
SECTION UI — why-choose-us / licensed-insured / call-to-action
Three real defects were behind how these read on screen:
1. .licensed-insured's checklist had no visible markers at all. The base
theme draws them with an absolutely positioned ::before carrying a
background-image; an earlier rule of mine reset that to position:static
without giving the pseudo-element a box, so an inline ::before with
content:"" collapsed to zero and the icons vanished. Those three items
are the trust proof of the whole section, so they are now cards.
2. .call-to-action's .two-col had only ONE child (the form div is commented
out in the markup), so the copy sat in the left half and the right half
of the panel was empty. It is now a genuine two-column split with an
at-a-glance action card, which also removes the "use the form below"
line that pointed at a form that does not exist.
3. A stray leading hyphen on the closing paragraph of why-choose-us.
========================================================================== */
/* ---------- shared: opening line of a section ---------- */
.section-lead {
font-size: 1.1rem;
font-weight: 600;
color: var(--gtc-teal-deep);
line-height: 1.6;
margin-bottom: 16px;
}
/* ==========================================================================
WHY CHOOSE US
========================================================================== */
.why-choose-us .gtc-container > ul {
padding: 34px 38px;
gap: 20px 40px;
margin-top: 10px;
}
.why-choose-us .gtc-container > ul li {
position: relative;
padding-left: 38px;
line-height: 1.6;
margin: 0;
color: #4a4f57;
display: block;
}
/* tick well */
.why-choose-us .gtc-container > ul li::before {
content: "";
position: absolute;
left: 0;
top: .15em;
width: 24px;
height: 24px;
border-radius: 50%;
background: rgba(100, 142, 148, .15);
box-shadow: none;
margin: 0;
flex: none;
}
/* the check itself, drawn rather than loaded */
.why-choose-us .gtc-container > ul li::after {
content: "";
position: absolute;
left: 8px;
top: .52em;
width: 8px;
height: 4px;
border-left: 2px solid var(--gtc-teal-deep);
border-bottom: 2px solid var(--gtc-teal-deep);
transform: rotate(-45deg);
}
.why-choose-us .gtc-container > ul li strong {
color: #12161b;
font-weight: 700;
}
/* closing line: the punchline of the section, not another paragraph */
.why-choose-us .wcu-close {
margin: 30px 0 0;
padding: 20px 26px;
background: #fff;
border-left: 4px solid var(--gtc-amber);
border-radius: 0 16px 16px 0;
box-shadow: var(--gtc-shadow);
font-size: 1.02rem;
line-height: 1.65;
color: #3d434b;
max-width: 88ch;
}
/* ==========================================================================
LICENSED & INSURED — the three coverages as cards
========================================================================== */
.licensed-insured .ins-heading {
font-weight: 700;
color: #12161b;
margin-bottom: 4px;
}
.insurance-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
list-style: none;
margin: 22px 0 28px;
padding: 0;
align-items: stretch;
}
.licensed-insured .insurance-grid li {
background: #fff;
border-radius: 18px;
border-top: 3px solid var(--gtc-teal-deep);
padding: 26px 24px 24px;
margin: 0;
box-shadow: var(--gtc-shadow);
transition: transform .25s ease, box-shadow .25s ease;
display: block;
padding-left: 24px;
}
.licensed-insured .insurance-grid li:hover {
transform: translateY(-3px);
box-shadow: 0 16px 30px rgba(2, 3, 18, .14);
}
/* kill the inherited base-theme marker on these */
.licensed-insured .insurance-grid li::before,
.licensed-insured .insurance-grid li::after {
content: none;
display: none;
}
.insurance-grid .ins-icon {
width: 42px;
height: 42px;
border-radius: 12px;
background: rgba(100, 142, 148, .15);
color: var(--gtc-teal-deep);
display: grid;
place-items: center;
font-size: 1.15rem;
font-weight: 800;
line-height: 1;
margin-bottom: 14px;
}
.insurance-grid h3 {
font-size: 1.06rem;
line-height: 1.35;
margin: 0 0 8px;
padding: 0;
display: block;
color: #12161b;
text-decoration: none;
font-weight: 700;
}
.insurance-grid h3::after,
.insurance-grid h3::before {
content: none;
height: 0;
display: none;
}
.insurance-grid p {
font-size: .97rem;
line-height: 1.6;
margin: 0;
color: #4a4f57;
max-width: none;
}
/* closing trust line */
.licensed-insured .ins-close {
padding: 20px 26px;
background: #fff;
border-left: 4px solid var(--gtc-amber);
border-radius: 0 16px 16px 0;
box-shadow: var(--gtc-shadow);
font-size: 1.02rem;
line-height: 1.65;
color: #3d434b;
margin: 0;
max-width: 88ch;
}
.licensed-insured .ins-close strong {
color: #12161b;
}
/* ==========================================================================
CALL TO ACTION — fill the empty half with an action card
========================================================================== */
/* eyebrow above the headline, not an underlined heading */
.call-to-action .gtc-container > h3 {
display: block;
text-decoration: none;
font-size: .78rem;
line-height: 1.4;
letter-spacing: .12em;
text-transform: uppercase;
font-weight: 700;
color: var(--gtc-amber);
margin: 0 0 10px;
padding: 0;
}
.call-to-action .gtc-container > h3::after {
content: none;
height: 0;
}
.call-to-action .gtc-container > h2 {
padding-bottom: 0;
margin-bottom: 26px;
}
.call-to-action .cta-split {
display: grid;
grid-template-columns: 1.12fr .88fr;
gap: 40px;
align-items: start;
}
.call-to-action .cta-copy p:last-of-type {
margin-bottom: 0;
}
.call-to-action .cta-buttons {
margin-top: 24px;
}
/* ---------- the action card ---------- */
.call-to-action .cta-action {
background: rgba(255, 255, 255, .07);
border: 1px solid rgba(255, 255, 255, .18);
border-radius: 20px;
padding: 26px 26px 22px;
}
.call-to-action .cta-action p.cta-action-label {
text-transform: uppercase;
letter-spacing: .1em;
font-size: .74rem;
line-height: 1.4;
font-weight: 700;
color: rgba(255, 255, 255, .62);
margin: 0 0 6px;
}
.call-to-action .cta-action a.cta-action-phone {
display: block;
font-size: 1.85rem;
line-height: 1.2;
font-weight: 800;
letter-spacing: -.01em;
color: #fff;
text-decoration: none;
margin-bottom: 20px;
transition: color .2s ease;
}
.call-to-action .cta-action a.cta-action-phone:hover {
color: var(--gtc-amber);
}
.call-to-action .cta-action-list {
list-style: none;
margin: 0 0 18px;
padding: 0;
border-top: 1px solid rgba(255, 255, 255, .16);
}
.call-to-action .cta-action-list li {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 16px;
padding: 11px 0;
margin: 0;
border-bottom: 1px solid rgba(255, 255, 255, .11);
font-size: .95rem;
line-height: 1.4;
}
.call-to-action .cta-action-list li::before {
content: none;
display: none;
}
.call-to-action .cta-action-list li span {
color: rgba(255, 255, 255, .6);
flex: 0 0 auto;
}
.call-to-action .cta-action-list li strong {
color: #fff;
font-weight: 600;
text-align: right;
}
.call-to-action .cta-action p.cta-action-note {
font-size: .84rem;
line-height: 1.55;
color: rgba(255, 255, 255, .55);
margin: 0;
}
/* ==========================================================================
Responsive
========================================================================== */
@media (max-width: 1024px) {
.insurance-grid {
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.licensed-insured .insurance-grid li {
padding: 22px 20px 20px;
}
.call-to-action .cta-split {
grid-template-columns: 1fr;
gap: 28px;
}
.call-to-action .gtc-container > h2 {
max-width: none;
}
}
@media (max-width: 900px) {
.why-choose-us .gtc-container > ul {
padding: 26px 24px;
gap: 16px;
}
}
@media (max-width: 768px) {
.insurance-grid {
grid-template-columns: 1fr;
gap: 14px;
margin: 18px 0 22px;
}
.why-choose-us .wcu-close,
.licensed-insured .ins-close {
padding: 18px 20px;
font-size: .98rem;
max-width: none;
}
.call-to-action .cta-action {
padding: 22px 20px 18px;
}
.call-to-action .cta-action a.cta-action-phone {
font-size: 1.6rem;
}
.section-lead {
font-size: 1.02rem;
}
}
/* ==========================================================================
SUBSET SPLIT — media column left, heading + copy right
The two "When Tree Removal Is the Right Call" / "What Tree Removal With Us
Looks Like" blocks previously ran full width with the photography dropped
into the middle of the prose, which broke the read and left a 110-character
measure. They are now two columns: images on the left (the four-up becomes
a 2x2), heading and copy on the right at a natural measure.
========================================================================== */
.subset-split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 44px;
align-items: stretch;
}
.subset-split .subset-body {
align-self: start;
min-width: 0;
}
.subset-split .subset-media {
display: flex;
min-width: 0;
}
.subset-split .subset-media > * {
width: 100%;
margin: 0;
}
/* ---------- heading in the right-hand column ---------- */
.subset-body > h3:first-child {
margin: 0 0 14px;
}
.subset-body > h3:first-child::after {
content: "";
display: block;
width: 44px;
height: 3px;
border-radius: 999px;
background: var(--gtc-amber);
margin-top: 10px;
}
/* the column is already a comfortable measure, so no extra cap */
.subset-body > p {
max-width: none;
}
.subset-body > p:last-child {
margin-bottom: 0;
}
/* ---------- four images as a 2x2 block ---------- */
.subset-media .fore-set-2x2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
align-content: start;
margin: 0;
padding: 0;
}
.subset-media .fore-set-2x2 img {
width: 100%;
height: 232px;
object-fit: cover;
border-radius: 16px;
display: block;
}
/* ---------- single lead image fills its column ---------- */
.subset-media > .l-image {
height: 100%;
min-height: 340px;
max-height: 520px;
object-fit: cover;
border-radius: 16px;
display: block;
}
/* ==========================================================================
Responsive
========================================================================== */
@media (max-width: 1024px) {
.subset-split {
gap: 30px;
}
.subset-media .fore-set-2x2 img {
height: 190px;
}
.subset-media > .l-image {
min-height: 300px;
}
}
@media (max-width: 900px) {
.subset-split {
grid-template-columns: 1fr;
gap: 24px;
}
/* heading and copy lead on a narrow screen, images follow */
.subset-split .subset-body {
order: 1;
}
.subset-split .subset-media {
order: 2;
}
.subset-media .fore-set-2x2 {
grid-template-columns: repeat(2, 1fr);
}
.subset-media .fore-set-2x2 img {
height: 200px;
}
.subset-media > .l-image {
height: auto;
min-height: 0;
max-height: 320px;
}
}
@media (max-width: 768px) {
.subset-media .fore-set-2x2 {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.subset-media .fore-set-2x2 img {
height: 138px;
border-radius: 12px;
}
.subset-media > .l-image {
max-height: 240px;
}
}
/* ==========================================================================
SERVICES SECTION — make the cards behave like the links they are
Three real problems, not just styling:
1. Only the card TITLE was clickable. Six cards, six tiny text targets, no
visible affordance that anything was a link at all. The whole card is
now the hit area via a stretched pseudo-element on the existing anchor,
so there is still exactly one link per card (no duplicate hrefs, which
matters for how the internal links are counted).
2. The Emergency card carried a second sentence and a nested tel: link that
none of its five siblings had. It made that one card taller, broke the
pattern, and put an interactive element inside what is now a clickable
card. Removed in the markup.
3. The closing line sat flush against the grid with no spacing and no next
step. It is now a proper closing bar with a call to action.
========================================================================== */
/* ---------- section intro ---------- */
.services-section .services-intro {
max-width: 780px;
}
.services-section .section-eyebrow {
display: block;
text-decoration: none;
font-size: .78rem;
line-height: 1.4;
letter-spacing: .14em;
text-transform: uppercase;
font-weight: 700;
color: var(--gtc-amber);
margin: 0 0 10px;
padding: 0;
}
.services-section .section-eyebrow::after,
.services-section .section-eyebrow::before {
content: none;
height: 0;
}
.services-section .services-intro h2 {
padding-bottom: 0;
margin-bottom: 16px;
}
.services-section .services-intro p {
color: rgba(255, 255, 255, .88);
font-size: 1.02rem;
line-height: 1.65;
margin-bottom: 0;
text-shadow: 0 1px 12px rgba(0, 0, 0, .55);
}
.services-section .service-grid {
margin-top: 34px;
}
/* ---------- whole card is the click target ---------- */
.services-section .service-grid .box {
position: relative;
background-color: rgba(2, 3, 18, .94);
}
.services-section .service-grid .box h3 a::after {
content: "";
position: absolute;
inset: 0;
z-index: 2;
}
.services-section .service-grid .box h3 a:focus-visible::after {
outline: 3px solid var(--gtc-amber);
outline-offset: -3px;
border-radius: 18px;
}
/* ---------- the affordance that was missing ---------- */
.services-section .service-grid .box .card-more {
margin-top: auto;
padding-top: 18px;
display: inline-flex;
align-items: center;
gap: 8px;
font-size: .9rem;
font-weight: 700;
letter-spacing: .01em;
color: var(--gtc-teal);
transition: color .2s ease;
}
.services-section .service-grid .box .card-more::after {
content: "\2192";
font-size: 1.05rem;
line-height: 1;
transition: transform .25s ease;
}
.services-section .service-grid .box:hover .card-more,
.services-section .service-grid .box:focus-within .card-more {
color: var(--gtc-amber);
}
.services-section .service-grid .box:hover .card-more::after,
.services-section .service-grid .box:focus-within .card-more::after {
transform: translateX(5px);
}
/* ---------- card text: a touch more contrast ---------- */
.services-section .service-grid .box h3 a {
color: #fff;
}
.services-section .service-grid .box p {
color: rgba(255, 255, 255, .78);
opacity: 1;
}
/* ---------- closing line: a real next step, not an orphan ---------- */
.services-section .services-footnote {
margin-top: 34px;
padding: 20px 26px;
background: rgba(255, 255, 255, .06);
border: 1px solid rgba(255, 255, 255, .16);
border-left: 4px solid var(--gtc-amber);
border-radius: 0 16px 16px 0;
}
.services-section .services-footnote p {
margin: 0;
font-size: 1.02rem;
line-height: 1.6;
color: rgba(255, 255, 255, .9);
}
.services-section .services-footnote a {
color: var(--gtc-amber);
font-weight: 700;
text-decoration: none;
white-space: nowrap;
border-bottom: 2px solid rgba(239, 166, 60, .45);
}
.services-section .services-footnote a:hover {
border-bottom-color: var(--gtc-amber);
}
/* ==========================================================================
Responsive
========================================================================== */
@media (max-width: 1024px) {
.services-section .services-intro {
max-width: none;
}
.services-section .service-grid {
margin-top: 26px;
}
}
@media (max-width: 900px) {
/* background-attachment: fixed is unreliable on touch devices and causes
the backdrop to jump or blow out its scale mid-scroll */
.s-section {
background-attachment: scroll;
}
}
@media (max-width: 768px) {
.services-section .services-footnote {
margin-top: 24px;
padding: 16px 18px;
}
.services-section .services-footnote p,
.services-section .services-intro p {
font-size: .98rem;
}
.services-section .service-grid .box .card-more {
padding-top: 14px;
}
}
@media (prefers-reduced-motion: reduce) {
.services-section .service-grid .box .card-more::after {
transition: none;
}
}
/* ==========================================================================
CONTACT BLOCK — service-area line under the detail list
========================================================================== */
.contact-info-section .contact-area {
margin: 14px 0 0;
padding-top: 14px;
border-top: 1px solid rgba(255, 255, 255, .16);
font-size: .95rem;
line-height: 1.5;
color: rgba(255, 255, 255, .72);
}
/* ==========================================================================
SERVICE AREA — towns as cards, not pills
The defect: I had styled the location list as rounded pills
(border-radius: 999px, flex-wrap, 9px/18px padding). Pills are for short
labels. Each actually holds a town name AND a full descriptive
sentence, so the "pills" rendered as lumpy rounded blobs of wildly
different widths wrapping raggedly across the row.
Worse, the base theme draws .check-mark li::before as a 28x28 absolutely
positioned icon at left:0, and the pill rule had overridden the 48px
left padding that made room for it. The location pin was being painted
ON TOP of the first word of every town name.
Nine towns, three per row, name as a heading with its description below.
========================================================================== */
/* ---------- eyebrow above the headline ---------- */
.service-area .section-eyebrow {
display: block;
text-decoration: none;
font-size: .78rem;
line-height: 1.4;
letter-spacing: .14em;
text-transform: uppercase;
font-weight: 700;
color: var(--gtc-amber);
margin: 0 0 10px;
padding: 0;
}
.service-area .section-eyebrow::after,
.service-area .section-eyebrow::before {
content: none;
height: 0;
}
.service-area .gtc-container > h2 {
padding-bottom: 0;
margin-bottom: 16px;
}
.service-area .area-p {
max-width: 92ch;
margin-bottom: 0;
}
/* ---------- the grid ---------- */
.service-area .location-list .location-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
list-style: none;
margin: 30px 0 0;
padding: 0;
align-items: stretch;
}
.service-area .location-list .location-grid li {
display: flex;
flex-direction: column;
position: relative;
margin: 0;
padding: 24px 24px 22px;
background: #fff;
border: 1px solid rgba(2, 3, 18, .07);
border-radius: 18px;
box-shadow: var(--gtc-shadow);
transform: none;
font-size: inherit;
line-height: inherit;
transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.service-area .location-list .location-grid li:hover {
transform: translateY(-4px);
border-color: rgba(100, 142, 148, .55);
box-shadow: 0 16px 32px rgba(2, 3, 18, .13);
}
/* the base theme's absolutely positioned icon must not come along */
.service-area .location-list .location-grid li::before,
.service-area .location-list .location-grid li::after {
content: none;
display: none;
}
/* ---------- pin badge ---------- */
.service-area .location-grid .loc-pin {
width: 40px;
height: 40px;
border-radius: 12px;
background: rgba(100, 142, 148, .14);
display: grid;
place-items: center;
margin-bottom: 14px;
flex: 0 0 auto;
}
.service-area .location-grid .loc-pin img {
width: 20px;
height: 20px;
object-fit: contain;
border-radius: 0;
display: block;
margin: 0;
box-shadow: none;
}
/* ---------- town name ---------- */
.service-area .location-grid h3 {
display: block;
margin: 0 0 8px;
padding: 0;
font-size: 1.08rem;
line-height: 1.3;
font-weight: 700;
letter-spacing: normal;
text-transform: none;
text-decoration: none;
color: var(--gtc-ink);
}
.service-area .location-grid h3::after,
.service-area .location-grid h3::before {
content: none;
height: 0;
display: none;
}
.service-area .location-grid p {
margin: 0;
font-size: .95rem;
line-height: 1.6;
color: #4a4f57;
max-width: none;
}
/* ---------- closing callout ---------- */
.service-area .area-footnote {
margin-top: 26px;
padding: 20px 26px;
background: #fff;
border: 1px solid rgba(2, 3, 18, .07);
border-left: 4px solid var(--gtc-amber);
border-radius: 0 16px 16px 0;
box-shadow: var(--gtc-shadow);
}
.service-area .area-footnote p {
margin: 0;
font-size: 1.02rem;
line-height: 1.6;
color: #3d434b;
max-width: none;
}
.service-area .area-footnote a {
color: var(--gtc-teal-deep);
font-weight: 700;
white-space: nowrap;
text-decoration: none;
border-bottom: 2px solid rgba(100, 142, 148, .45);
}
.service-area .area-footnote a:hover {
border-bottom-color: var(--gtc-teal-deep);
}
/* ==========================================================================
Responsive
========================================================================== */
@media (max-width: 1024px) {
.service-area .location-list .location-grid {
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.service-area .area-p {
max-width: none;
}
}
@media (max-width: 768px) {
.service-area .location-list .location-grid {
grid-template-columns: 1fr;
gap: 12px;
margin-top: 22px;
}
.service-area .location-list .location-grid li {
padding: 18px 18px 16px;
}
.service-area .location-grid .loc-pin {
width: 34px;
height: 34px;
margin-bottom: 10px;
}
.service-area .area-footnote {
margin-top: 20px;
padding: 16px 18px;
}
.service-area .area-footnote p {
font-size: .98rem;
}
}
@media (prefers-reduced-motion: reduce) {
.service-area .location-list .location-grid li {
transition: none;
}
.service-area .location-list .location-grid li:hover {
transform: none;
}
}
/* ==========================================================================
FAQ — two visible bugs and three accessibility ones
1. TWO open/close indicators. The theme ships a 38px teal "+" badge
(.faq-icon) and I had added a chevron on h3::after in an earlier pass
without noticing the badge. Every row was showing both. The badge is
the theme's own language, so the chevron goes.
2. INNER SCROLLBAR. The base rule is
.faq-item.active .faq-answer { max-height: 500px; overflow-y: auto }
Two of the eight answers are long enough to exceed 500px, so opening
them produced a scrollbar INSIDE the accordion row. Nested scroll areas
inside a page are a reliable way to lose people.
3. Collapsed answers stayed FOCUSABLE. max-height:0 + overflow:hidden hides
content visually but leaves it in the tab order, so keyboard users
tabbed into invisible tel: links. visibility:hidden fixes it without
touching the animation.
4. The heading was INSIDE the button (