/* =========================================================
Cybertron Landscaping Demo — Cybertron Softech
Static demo stylesheet (no build process, no frameworks)
Typography scale matches the roofing demo baseline.
========================================================= */
html { font-size: 16px; scroll-behavior: smooth; }
:root{
--forest:#1F3A2E;
--forest-deep:#12261D;
--moss:#4C7A54;
--earth:#8A6642;
--cream:#F3EEE1;
--charcoal:#23262B;
--accent:#E8A33D;
--accent-dark:#C98620;
--white:#FFFFFF;
--text-muted:#5B6660;
--border:#E3E0D2;
--radius:12px;
--radius-lg:20px;
--shadow-sm:0 2px 12px rgba(18,38,29,.08);
--shadow-md:0 14px 34px rgba(18,38,29,.16);
--shadow-lg:0 30px 70px rgba(18,38,29,.26);
--maxw:1200px;
--font-display:'Poppins','Segoe UI',Arial,sans-serif;
--font-body:'Inter','Segoe UI',Arial,sans-serif;
}
*{box-sizing:border-box;}
body{
margin:0;
font-size:16px;
line-height:1.65;
-webkit-text-size-adjust:100%;
text-size-adjust:100%;
font-family:var(--font-body);
color:var(--charcoal);
background:var(--white);
-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.18;margin:0 0 .5em;font-weight:700;color:var(--forest);}
p{margin:0 0 1em;}
ul{margin:0;padding:0;list-style:none;}
button{font-family:inherit;}
.container{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
.section{padding:96px 0;}
.section-tight{padding:64px 0;}
.bg-cream{background:var(--cream);}
.bg-forest{background:var(--forest);color:#fff;}
.bg-forest h2, .bg-forest h3{color:#fff;}
.eyebrow{
display:inline-block;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;
font-weight:700;color:var(--accent-dark);background:rgba(232,163,61,.14);
padding:6px 16px;border-radius:999px;margin-bottom:16px;
}
.section-head{max-width:720px;margin:0 auto 52px;text-align:center;}
.section-head h2{font-size:clamp(1.9rem,3vw,2.7rem);}
.section-head p{color:var(--text-muted);font-size:1.05rem;}
.demo-note{font-size:.8rem;color:var(--text-muted);font-style:italic;margin-top:6px;}
/* Buttons */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:8px;
padding:15px 28px;border-radius:8px;font-weight:700;font-size:.98rem;
border:2px solid transparent;cursor:pointer;transition:transform .15s ease, box-shadow .15s ease, background .2s ease;
white-space:nowrap;
}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--accent);color:#2b1c02;box-shadow:var(--shadow-sm);}
.btn-primary:hover{background:var(--accent-dark);box-shadow:var(--shadow-md);transform:translateY(-2px);color:#fff;}
.btn-outline{background:transparent;border-color:rgba(255,255,255,.5);color:#fff;}
.btn-outline:hover{background:rgba(255,255,255,.12);border-color:#fff;}
.btn-outline-dark{background:transparent;border-color:var(--forest);color:var(--forest);}
.btn-outline-dark:hover{background:var(--forest);color:#fff;}
.btn-block{width:100%;}
.btn-sm{padding:11px 18px;font-size:.98rem;}
/* Announcement bar */
.announce-bar{background:var(--forest-deep);color:#e8ede9;padding:9px 0;text-align:center;font-size:.9rem;font-weight:600;letter-spacing:.01em;}
.announce-bar .container{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;}
/* Header */
.site-header{position:sticky;top:0;z-index:90;background:var(--white);border-bottom:1px solid var(--border);}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;max-width:var(--maxw);margin:0 auto;gap:20px;}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:700;font-size:1.2rem;color:var(--forest);}
.brand .mark{
width:40px;height:40px;border-radius:9px;background:var(--forest);
display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:1.1rem;flex-shrink:0;
}
.main-nav{display:flex;align-items:center;gap:30px;}
.main-nav a{font-weight:600;font-size:.96rem;color:var(--charcoal);opacity:.82;transition:opacity .2s;}
.main-nav a:hover{opacity:1;}
.header-actions{display:flex;align-items:center;gap:14px;}
.call-btn{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--forest);font-size:.96rem;}
.call-btn svg{width:18px;height:18px;flex-shrink:0;color:var(--accent-dark);}
.menu-toggle{display:none;background:none;border:none;cursor:pointer;padding:6px;color:var(--forest);}
.menu-toggle svg{width:28px;height:28px;}
@media (max-width:980px){
.main-nav{
position:fixed;inset:0 0 0 auto;width:80%;max-width:320px;background:var(--white);
flex-direction:column;align-items:flex-start;padding:100px 30px 30px;gap:24px;
box-shadow:var(--shadow-lg);transform:translateX(100%);transition:transform .3s ease;z-index:95;
}
.main-nav.open{transform:translateX(0);}
.menu-toggle{display:block;position:relative;z-index:96;}
.call-btn span{display:none;}
.header-actions .btn-primary{padding:10px 16px;font-size:.9rem;}
}
.nav-backdrop{position:fixed;inset:0;background:rgba(18,38,29,.55);opacity:0;pointer-events:none;transition:opacity .3s;z-index:65;}
.nav-backdrop.open{opacity:1;pointer-events:auto;}
/* Hero */
.hero{background:linear-gradient(155deg,var(--cream) 0%,#fff 60%);position:relative;overflow:hidden;padding:64px 0 80px;}
.hero-blob{position:absolute;border-radius:50%;filter:blur(80px);z-index:1;}
.hero-blob.b1{width:460px;height:460px;background:var(--moss);opacity:.18;top:-160px;right:-100px;}
.hero-blob.b2{width:340px;height:340px;background:var(--accent);opacity:.14;bottom:-160px;left:-80px;}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:start;max-width:var(--maxw);margin:0 auto;padding:0 24px;position:relative;z-index:2;}
.hero .eyebrow{background:rgba(76,122,84,.14);color:var(--moss);}
.hero h1{font-size:clamp(2.2rem,4.6vw,3.5rem);margin-bottom:20px;}
.hero .lede{color:var(--text-muted);max-width:540px;margin-bottom:28px;font-size:1.06rem;}
.hero-ctas{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:28px;}
.hero-trust{display:flex;flex-wrap:wrap;gap:16px 22px;}
.hero-trust span{display:flex;align-items:center;gap:8px;font-weight:600;font-size:.92rem;color:var(--charcoal);}
.hero-trust svg{width:18px;height:18px;color:var(--accent-dark);flex-shrink:0;}
.hero-visual{position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);margin-bottom:24px;}
.hero-visual img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;}
@media (max-width:960px){.hero-grid{grid-template-columns:1fr;} .hero{padding:48px 0 52px;}}
/* Estimate form card */
.estimate-card{background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:32px;border:1px solid var(--border);}
.estimate-card h3{font-size:1.35rem;margin-bottom:6px;}
.estimate-card .sub{color:var(--text-muted);font-size:.96rem;margin-bottom:22px;}
.field{margin-bottom:16px;}
.field label{display:block;font-weight:600;font-size:.92rem;margin-bottom:6px;color:var(--charcoal);}
.field input, .field select, .field textarea{
width:100%;padding:13px 14px;border-radius:8px;border:1.5px solid var(--border);
font-family:inherit;font-size:.96rem;background:#fff;color:var(--charcoal);
}
.field input:focus, .field select:focus, .field textarea:focus{outline:none;border-color:var(--accent);}
.form-note{font-size:.88rem;color:var(--text-muted);margin-top:14px;text-align:center;}
/* Ticker */
.ticker-wrap{background:var(--forest);padding:18px 0;overflow:hidden;position:relative;}
.ticker-track{display:flex;gap:14px;white-space:nowrap;animation:ticker-scroll 32s linear infinite;width:max-content;}
.ticker-track span{
display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.08);color:#fff;
padding:9px 20px;border-radius:999px;font-weight:600;font-size:.94rem;flex-shrink:0;
}
.ticker-track span::before{content:'\2022';color:var(--accent);}
@keyframes ticker-scroll{
from{transform:translateX(0);}
to{transform:translateX(-50%);}
}
@media (prefers-reduced-motion: reduce){
.ticker-track{animation:none;flex-wrap:wrap;white-space:normal;}
}
/* Grids */
.grid{display:grid;gap:26px;}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
@media (max-width:960px){.grid-4{grid-template-columns:repeat(2,1fr);} .grid-3{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}}
/* Services */
.svc-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:30px 26px;box-shadow:var(--shadow-sm);transition:transform .2s,box-shadow .2s;display:flex;flex-direction:column;}
.svc-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);}
.svc-icon{width:52px;height:52px;border-radius:14px;background:rgba(76,122,84,.12);display:flex;align-items:center;justify-content:center;margin-bottom:16px;color:var(--moss);}
.svc-icon svg{width:26px;height:26px;}
.svc-card h3{font-size:1.12rem;}
.svc-card p{color:var(--text-muted);font-size:.96rem;flex-grow:1;}
.svc-card .learn-more{color:var(--accent-dark);font-weight:700;font-size:.94rem;margin-top:10px;}
/* Featured 2-col section */
.featured-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;}
.featured-visual{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md);}
.featured-visual img{aspect-ratio:4/4.6;object-fit:cover;}
.featured-card{
display:flex;align-items:center;gap:16px;background:#fff;border:1px solid var(--border);
border-radius:var(--radius);padding:20px 22px;box-shadow:var(--shadow-sm);margin-bottom:16px;
}
.featured-card:last-child{margin-bottom:0;}
.featured-card .num{
width:44px;height:44px;border-radius:50%;background:var(--forest);color:#fff;display:flex;
align-items:center;justify-content:center;font-weight:800;flex-shrink:0;font-size:1rem;
}
.featured-card h3{font-size:1.04rem;margin-bottom:2px;}
.featured-card p{margin-bottom:0;color:var(--text-muted);font-size:.94rem;}
@media (max-width:900px){.featured-grid{grid-template-columns:1fr;}}
/* Story */
.story-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:start;}
.story-grid p{color:var(--text-muted);font-size:1rem;}
.quote-box{
background:var(--cream);border-left:4px solid var(--accent);border-radius:var(--radius);
padding:24px 26px;margin:26px 0;
}
.quote-box p{font-style:italic;color:var(--forest);font-size:1.02rem;margin-bottom:8px;}
.quote-box .who{font-weight:700;font-size:.92rem;color:var(--text-muted);font-style:normal;}
.value-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px;box-shadow:var(--shadow-sm);margin-bottom:16px;}
.value-card:last-child{margin-bottom:0;}
.value-card .idx{font-family:var(--font-display);font-weight:800;color:var(--moss);font-size:.9rem;letter-spacing:.05em;margin-bottom:6px;}
.value-card h3{font-size:1.05rem;}
.value-card p{color:var(--text-muted);font-size:.94rem;margin-bottom:0;}
@media (max-width:900px){.story-grid{grid-template-columns:1fr;}}
/* Stats */
.stat-card{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:var(--radius-lg);padding:30px;text-align:center;}
.stat-card .num{font-family:var(--font-display);font-size:2.1rem;font-weight:800;color:var(--accent);}
.stat-card .lbl{font-size:.94rem;opacity:.85;margin-top:6px;}
/* Gallery */
.gallery-item{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);cursor:pointer;position:relative;background:#fff;border:1px solid var(--border);}
.gallery-item img{aspect-ratio:1/.8;object-fit:cover;transition:transform .35s;}
.gallery-item:hover img{transform:scale(1.06);}
.gallery-body{padding:16px 18px;}
.gallery-body h3{font-size:1rem;margin-bottom:4px;}
.gallery-body p{font-size:.94rem;color:var(--text-muted);margin-bottom:0;}
/* Lightbox */
.lightbox{position:fixed;inset:0;background:rgba(18,26,20,.94);display:none;align-items:center;justify-content:center;z-index:200;padding:30px;}
.lightbox.open{display:flex;}
.lightbox img{max-width:min(900px,92vw);max-height:86vh;border-radius:12px;}
.lightbox-close{position:absolute;top:24px;right:28px;color:#fff;font-size:2rem;background:none;border:none;cursor:pointer;line-height:1;}
/* Process */
.process-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;}
.process-step{text-align:center;background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:30px 22px;box-shadow:var(--shadow-sm);}
.process-step .step-badge{
width:60px;height:60px;border-radius:50%;border:2px solid var(--accent);color:var(--accent-dark);
display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.2rem;margin:0 auto 16px;background:#fff;
}
.process-step h3{font-size:1.04rem;}
.process-step p{color:var(--text-muted);font-size:.94rem;}
@media (max-width:900px){.process-steps{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.process-steps{grid-template-columns:1fr;}}
/* FAQ */
.faq-list{max-width:820px;margin:0 auto;}
.faq-item{border:1px solid var(--border);border-radius:var(--radius);margin-bottom:14px;overflow:hidden;background:#fff;}
.faq-question{
width:100%;text-align:left;background:none;border:none;padding:20px 24px;display:flex;align-items:center;
justify-content:space-between;gap:14px;font-weight:700;font-size:1.02rem;color:var(--forest);cursor:pointer;
}
.faq-question .plus{width:22px;height:22px;flex-shrink:0;position:relative;}
.faq-question .plus::before,.faq-question .plus::after{content:'';position:absolute;background:var(--accent-dark);border-radius:2px;transition:transform .25s;}
.faq-question .plus::before{width:100%;height:3px;top:50%;left:0;transform:translateY(-50%);}
.faq-question .plus::after{height:100%;width:3px;left:50%;top:0;transform:translateX(-50%);}
.faq-item.open .plus::after{transform:translateX(-50%) rotate(90deg);opacity:0;}
.faq-answer{max-height:0;overflow:hidden;transition:max-height .3s ease;}
.faq-answer-inner{padding:0 24px 20px;color:var(--text-muted);font-size:.96rem;}
.faq-item.open .faq-answer{max-height:320px;}
/* Final CTA */
.final-cta{background:linear-gradient(155deg,var(--forest) 0%,var(--forest-deep) 100%);color:#fff;text-align:center;}
.final-cta h2{color:#fff;}
.final-cta p{opacity:.86;max-width:600px;margin:0 auto 32px;font-size:1.02rem;}
.final-cta .hero-ctas{justify-content:center;}
/* Contact */
.contact-wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:50px;align-items:start;}
.contact-card{background:var(--forest);color:#fff;border-radius:var(--radius-lg);padding:34px;}
.contact-card h3{color:#fff;font-size:1.2rem;}
.available-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.12);padding:8px 16px;border-radius:999px;font-weight:700;font-size:.9rem;margin-bottom:22px;}
.available-badge .dot{width:8px;height:8px;border-radius:50%;background:#5ee08a;}
.contact-row{display:flex;gap:14px;align-items:flex-start;margin-bottom:20px;}
.contact-row svg{width:22px;height:22px;color:var(--accent);flex-shrink:0;margin-top:2px;}
.contact-row .lbl{font-size:.82rem;text-transform:uppercase;letter-spacing:.08em;opacity:.7;font-weight:700;}
.contact-row .val{font-weight:600;font-size:.98rem;}
.form-card{background:#fff;border-radius:var(--radius-lg);padding:32px;box-shadow:var(--shadow-sm);border:1px solid var(--border);}
@media (max-width:900px){.contact-wrap{grid-template-columns:1fr;}}
/* Footer */
.site-footer{background:var(--forest-deep);color:#c4cbc6;padding:64px 0 26px;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:36px;margin-bottom:34px;}
.footer-grid h4{color:#fff;font-size:.98rem;margin-bottom:16px;}
.footer-grid p{font-size:.94rem;color:#9aa39d;}
.footer-grid ul li{margin-bottom:11px;font-size:.94rem;}
.footer-grid ul li a:hover{color:#fff;}
.footer-brand .brand{color:#fff;margin-bottom:14px;}
.footer-brand .brand .mark{background:var(--accent);color:#2b1c02;}
.footer-badges{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:26px;}
.footer-badge{background:rgba(255,255,255,.08);padding:8px 16px;border-radius:999px;font-size:.86rem;font-weight:700;color:#fff;}
.footer-bottom{
border-top:1px solid rgba(255,255,255,.12);padding-top:22px;
display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:.9rem;color:#8b948e;
}
.footer-bottom a{font-weight:700;color:#fff;}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr;}}
/* Reveal animation */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease;}
.reveal.in{opacity:1;transform:translateY(0);}
.text-center{text-align:center;}
/* =========================================================
Cybertron demo — common pass additions
Appended block. No existing rule above was modified.
Everything here is prefixed `cs-` (except the shared
.social-links helper) so it cannot collide with this
site's own theme classes, and it is colour-neutral: it
inherits currentColor and this site's own CSS variables,
so it picks up each site's palette automatically.
========================================================= */
/* --- Social icons (Facebook / Instagram) -----------------
Colour-neutral on purpose: the chip borrows currentColor
for both icon and border, so the same markup works on a
light card and on a dark footer with no variant class.
44px on phones keeps it above the minimum tap target. */
.social-links{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.social-links a{
width:42px;height:42px;border-radius:12px;
display:inline-flex;align-items:center;justify-content:center;
color:inherit;border:1.5px solid currentColor;background:transparent;
opacity:.72;flex-shrink:0;
transition:opacity .2s ease,transform .2s ease;
}
.social-links a:hover,.social-links a:focus-visible{opacity:1;transform:translateY(-2px);}
.social-links svg{width:20px;height:20px;display:block;}
.cs-social-label{
font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
font-weight:700;opacity:.6;margin-bottom:10px;
}
@media (max-width:640px){
.social-links a{width:44px;height:44px;}
}
/* --- Contact layout --------------------------------------
Info card and form sit in one row and stretch to the same
height, so the shorter column can never leave a blank gap
beneath it. minmax(0,..) lets both columns shrink below
their content width, which is what prevents a long email
or select box from forcing horizontal overflow. */
.cs-contact-grid{
/* Some sites already wrap their contact area in a grid; span every column
so this row is never squeezed into one cell of the parent grid.
Harmless when the parent is not a grid. */
grid-column:1 / -1;
display:grid;
grid-template-columns:minmax(0,0.82fr) minmax(0,1.18fr);
gap:24px;align-items:stretch;
}
.cs-contact-grid > *{min-width:0;height:100%;}
/* Pin the two columns explicitly. One site's own stylesheet forces a
full-width grid-column on form elements, which pushed the form onto its
own row and unbalanced the pair; explicit placement overrides that. */
.cs-contact-grid > .cs-info-card,
.cs-contact-grid > .contact-card,
.cs-contact-grid > .feat-card:not(form){grid-column:1;grid-row:1;}
.cs-contact-grid > form{grid-column:2;grid-row:1;margin:0;height:100%;}
.cs-info-card{
background:var(--white,#fff);
border:1px solid var(--border);
border-radius:var(--radius-lg);
box-shadow:var(--shadow-sm);
padding:30px 26px;
display:flex;flex-direction:column;
min-width:0;
}
.cs-info-card h3{margin-bottom:20px;}
/* The rows grow to absorb the height the form column sets and
spread evenly, instead of bunching at the top and leaving a
hollow band above the button. */
.cs-info-list{
list-style:none;margin:0;padding:0;
flex:1 1 auto;display:flex;flex-direction:column;justify-content:space-between;
gap:14px;
}
.cs-info-list li{display:flex;align-items:flex-start;gap:12px;min-width:0;}
.cs-info-list svg{
width:19px;height:19px;flex-shrink:0;margin-top:3px;opacity:.75;
}
.cs-info-list .cs-lbl{
font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
font-weight:700;opacity:.6;margin-bottom:2px;
}
.cs-info-list .cs-val{
font-size:.95rem;line-height:1.5;color:var(--text-muted);
min-width:0;overflow-wrap:anywhere;
}
.cs-info-foot{margin-top:auto;padding-top:22px;}
.cs-info-foot .btn{margin-top:16px;}
/* Social row under the form, separated by a hairline. */
.cs-form-social{
border-top:1px solid var(--border);
margin-top:18px;padding-top:18px;text-align:center;
}
.cs-form-social .social-links{justify-content:center;}
.cs-form-social .cs-social-label{margin-bottom:10px;}
@media (max-width:900px){
.cs-contact-grid{grid-template-columns:1fr;gap:20px;}
.cs-contact-grid > .cs-info-card,
.cs-contact-grid > .contact-card,
.cs-contact-grid > .feat-card:not(form){grid-column:1;grid-row:auto;}
.cs-contact-grid > form{grid-column:1;grid-row:auto;}
/* Stacked: the card is sized by its own content again, so the
rows should sit together rather than stretch apart. */
.cs-info-list{flex:0 0 auto;justify-content:flex-start;}
.cs-contact-grid > form{height:auto;}
}
/* --- Footer social --------------------------------------- */
.cs-footer-social{margin-top:18px;}
.cs-footer-social .social-links a{width:38px;height:38px;border-radius:10px;}
@media (max-width:640px){
.cs-footer-social .social-links a{width:44px;height:44px;}
}
/* --- Image slot safety -----------------------------------
Keeps every existing image slot from stretching once real
photos replace the SVG placeholders later. Only sets
object-fit, which has no effect on how the SVGs render now. */
img{max-width:100%;}
.cs-media-fit{display:block;width:100%;height:100%;object-fit:cover;}
/* --- Mobile header fit ------------------------------------
PRE-EXISTING BUG (present before this pass): below ~560px the
brand + call link + CTA + hamburger were wider than the
viewport. That pushed the hamburger past the right edge, so
the page scrolled sideways and the mobile menu button could
end up unreachable. Nothing here changes the header's design
or markup — it only lets the row shrink to fit. */
@media (max-width:600px){
.header-inner{gap:10px;padding-left:16px;padding-right:16px;min-width:0;}
.brand{font-size:1rem;min-width:0;gap:8px;}
.brand .mark{flex-shrink:0;}
.header-actions{gap:8px;min-width:0;}
.header-actions .btn{padding:9px 12px;font-size:.82rem;white-space:nowrap;}
.menu-toggle{flex-shrink:0;}
.trust-bar .container{padding-left:16px;padding-right:16px;}
}
@media (max-width:400px){
.brand{font-size:.94rem;}
.header-actions .btn{padding:9px 10px;font-size:.78rem;}
}
/* --- Long CTA buttons on small screens --------------------
PRE-EXISTING BUG: a few inline CTAs carry long labels
("Need help choosing? Request ...") and the .btn rule keeps
them on one line, so at phone widths the button rendered
~470px wide inside a 390px viewport and dragged the whole
page sideways. Letting the label wrap fixes the scroll
without changing the button's styling anywhere else. */
@media (max-width:600px){
.btn{max-width:100%;white-space:normal;}
.header-actions .btn{white-space:nowrap;}
}
@media (max-width:600px){
/* Brand may ellipsis rather than push the row wide. */
.brand{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.call-btn{flex-shrink:0;}
/* The header CTA duplicates CTAs that already appear in the hero and in
every section below, and its label cannot shrink (nowrap), so on phones
it was the single element forcing the hamburger off-screen. Hidden here
only; unchanged from 601px up. */
.header-actions .btn-primary{display:none;}
}
@media (max-width:420px){
.header-inner{padding-left:12px;padding-right:12px;gap:8px;}
}
/* --- Mid-width nav crowding -------------------------------
PRE-EXISTING BUG: between the mobile breakpoint (~980px) and
roughly 1340px the full desktop nav, brand, call link and CTA
together were wider than the viewport on the longer-nav demos,
so laptops and small desktops scrolled sideways. Tightening
spacing and type slightly in that band makes the row fit; the
layout is untouched above and below it. */
@media (min-width:981px) and (max-width:1340px){
.main-nav{gap:16px;min-width:0;}
.main-nav a{font-size:.88rem;}
.header-inner{gap:12px;}
.header-actions{gap:10px;}
.header-actions .btn{padding:9px 13px;font-size:.85rem;}
.call-btn span{display:none;}
}
/* =========================================================
Multi-page conversion — shared layout cleanup
Appended block. No existing rule above was modified.
Everything here is theme-neutral: it uses this site's own
CSS variables and currentColor, so each demo keeps its palette.
========================================================= */
/* --- Container width / side gutters ------------------------
Content was capped at 1200px, leaving wide blank gutters on
large screens. Widened to 1320px with a fluid gutter. Every
section, header and footer reads the same --maxw token, so
they widen together and stay aligned with each other. */
:root{ --maxw:1320px; }
.container{ padding-left:clamp(16px,2.2vw,32px); padding-right:clamp(16px,2.2vw,32px); }
/* --- Header ------------------------------------------------
Brand and CTA cluster never shrink, so the brand text can
never overflow its box and collide with the nav. Nav labels
never wrap, so "Panel Upgrades" / "Water Heaters" / "EV
Chargers" stay on one line. Below 1180px the nav hands off
to the existing hamburger rather than cramming. */
.header-inner{ align-items:center; }
.brand{ flex-shrink:0; white-space:nowrap; }
.brand .mark{ flex-shrink:0; }
.header-actions{ flex-shrink:0; display:flex; align-items:center; gap:12px; }
.main-nav{ flex-wrap:nowrap; }
.main-nav a{ white-space:nowrap; line-height:1.2; }
@media (min-width:1181px){
.header-inner{ max-width:1400px; gap:clamp(14px,1.3vw,30px); }
.main-nav{ gap:clamp(11px,1.1vw,20px); margin-left:clamp(10px,1vw,26px); }
}
@media (min-width:1181px) and (max-width:1460px){
.main-nav a{ font-size:.88rem; }
.header-actions .btn{ padding:9px 13px; font-size:.82rem; }
}
@media (max-width:1180px){
.main-nav{
position:fixed; inset:0 0 0 auto; width:80%; max-width:320px;
background:var(--white,#fff); flex-direction:column; align-items:flex-start;
padding:100px 30px 30px; gap:22px; transform:translateX(100%);
transition:transform .3s ease; z-index:95; box-shadow:var(--shadow-lg);
overflow-y:auto;
}
.main-nav.open{ transform:translateX(0); }
.menu-toggle{ display:block; position:relative; z-index:96; }
}
@media (max-width:600px){
.header-inner{ gap:10px; padding-left:16px; padding-right:16px; }
.brand{ font-size:1rem; overflow:hidden; text-overflow:ellipsis; }
.header-actions .btn{ padding:9px 12px; font-size:.8rem; white-space:nowrap; }
}
/* Current-page indicator. */
.main-nav a.active{ color:var(--accent,currentColor); position:relative; font-weight:700; }
@media (min-width:1181px){
.main-nav a.active::after{
content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px;
background:currentColor; border-radius:2px;
}
}
/* --- Headings ---------------------------------------------- */
h1,h2{ text-wrap:balance; }
h1{ line-height:1.08; }
/* --- Cards -------------------------------------------------
Equal height per row, and heading-only cards centre their
text instead of inheriting the left/top layout meant for
cards that also carry an icon and a paragraph. */
.grid > *{ min-width:0; }
.svc-card, .feat-card, .why-card, .type-card, .material-card{ height:100%; }
.svc-card-title{
display:flex; align-items:center; justify-content:center;
text-align:center; min-height:104px; padding:24px;
}
.svc-card-title h3{ margin:0; line-height:1.25; text-align:center; }
@media (max-width:640px){ .svc-card-title{ min-height:84px; padding:20px; } }
/* --- Contact ----------------------------------------------
Info column and form sit in one row and stretch to the same
height, so the shorter column can never leave a blank gap
beneath it. Explicit placement stops a full-width form rule
from pushing the form onto its own row. */
.cs-contact-grid{
grid-column:1 / -1;
display:grid; grid-template-columns:minmax(0,0.82fr) minmax(0,1.18fr);
gap:24px; align-items:stretch;
}
.cs-contact-grid > *{ min-width:0; height:100%; }
.cs-contact-grid > .cs-info-card,
.cs-contact-grid > .contact-card,
.cs-contact-grid > .feat-card:not(form){ grid-column:1; grid-row:1; }
.cs-contact-grid > form{ grid-column:2; grid-row:1; margin:0; height:100%; }
@media (max-width:900px){
.cs-contact-grid{ grid-template-columns:1fr; gap:20px; }
.cs-contact-grid > .cs-info-card,
.cs-contact-grid > .contact-card,
.cs-contact-grid > .feat-card:not(form){ grid-column:1; grid-row:auto; }
.cs-contact-grid > form{ grid-column:1; grid-row:auto; height:auto; }
.cs-info-list{ flex:0 0 auto; justify-content:flex-start; }
}
/* --- Footer ------------------------------------------------
Columns flush at the top; the bottom row keeps copyright and
the Cybertron Softech credit on one baseline and stacks
centred on small screens instead of half-wrapping. */
.footer-grid{ align-items:start; }
.footer-brand .brand{ display:flex; align-items:center; gap:10px; }
@media (min-width:721px){
.footer-bottom{ display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; }
.footer-legal{ justify-content:center; }
}
@media (max-width:720px){
.footer-bottom{ display:flex; flex-direction:column; align-items:center; text-align:center; row-gap:12px; }
.footer-legal{ justify-content:center; flex-wrap:wrap; }
}
/* --- Images ------------------------------------------------
Keeps placeholders (and the real photos that replace them
later) filling their slots without stretching. */
img{ max-width:100%; }
/* =========================================================
QA fix pass — social icons, contact balance, hero
Appended block. No existing rule above was modified.
========================================================= */
/* --- Social icons: non-clickable, real brand colours --------
The icons were public href="#" dead links drawn in currentColor,
so they read as theme-tinted placeholders. No real profile URLs
exist, so they are now role="img" elements that still carry
their accessible labels, in recognisable brand colours. */
.social-links .social-icon{
width:42px; height:42px; border-radius:12px;
display:inline-flex; align-items:center; justify-content:center;
flex-shrink:0; cursor:default; color:#fff; border:none;
box-shadow:0 2px 8px rgba(20,32,24,.18);
transition:transform .2s ease, box-shadow .2s ease;
}
.social-links .social-icon svg{ width:20px; height:20px; display:block; color:#fff; }
.social-links .social-icon[aria-label="Facebook"]{ background:#1877F2; }
.social-links .social-icon[aria-label="Instagram"]{
background:radial-gradient(circle at 30% 107%,
#fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}
.social-links .social-icon[aria-label="Facebook"] svg *{ fill:#fff; }
.social-links .social-icon[aria-label="Instagram"] svg *{ stroke:#fff; }
.social-links .social-icon:hover{ transform:translateY(-2px); box-shadow:0 5px 14px rgba(20,32,24,.26); }
@media (max-width:640px){ .social-links .social-icon{ width:44px; height:44px; } }
/* --- Contact: compact info card + process card --------------
The duplicate social block is gone from the Contact Information
card. Instead of stretching the contact rows to match a long
form, the column gains a short "What Happens Next" sequence.
The form spans both rows so the left stack sizes the grid,
rather than being pushed below the form's full height. */
.cs-contact-grid{ align-items:start; }
.cs-contact-grid > .contact-card,
.cs-contact-grid > .cs-info-card{ height:auto; align-self:start; grid-column:1; grid-row:1; }
.cs-contact-grid > .cs-next-card{ grid-column:1; grid-row:2; align-self:start; }
.cs-contact-grid > form,
.cs-contact-grid > .form-card{ grid-column:2; grid-row:1 / span 2; align-self:start; }
.cs-next-card{
margin-top:20px; background:var(--cream,#f5f7f2);
border:1px solid var(--border); border-left:3px solid var(--green,#4b7f3f);
border-radius:var(--radius-lg); padding:clamp(22px,2.4vw,30px);
box-shadow:0 6px 18px rgba(20,32,24,.07);
}
.cs-next-card h3{ margin-bottom:16px; }
.cs-next-list{ list-style:none; margin:0; padding:0; display:grid; gap:16px; }
.cs-next-list li{ display:flex; gap:14px; align-items:flex-start; min-width:0; }
.cs-next-num{
flex-shrink:0; width:30px; height:30px; border-radius:50%;
background:var(--green,#4b7f3f); color:#fff;
display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.9rem;
}
.cs-next-list li > span:last-child{ min-width:0; font-size:1rem; color:var(--text-muted); line-height:1.55; }
.cs-next-list strong{ display:block; color:var(--ink,#1d2a22); font-size:.99rem; margin-bottom:3px; }
/* Below 900px the columns cannot share a row without squeezing. Resetting
grid-column AND grid-row is required — leaving the form pinned to
column 2 makes Grid keep an implicit second column and starve column 1. */
@media (max-width:900px){
.cs-contact-grid{ grid-template-columns:1fr !important; gap:22px; }
.cs-contact-grid > *{ grid-column:1 !important; grid-row:auto !important; min-width:0; }
.cs-next-card{ margin-top:0; }
}
/* --- Home hero: image only in the right column --------------
The estimate form is gone from the hero; the contact page
carries the full form. The photo is centred against the left
copy so both sides finish close together. */
.hero-grid{ align-items:center; }
.hero-grid > *{ min-width:0; }
.hero-grid .hero-visual{ margin:0; overflow:hidden; }
.hero-grid .hero-visual img{ width:100%; height:100%; object-fit:cover; object-position:center center; display:block; }
@media (max-width:960px){
.hero-grid{ align-items:start; }
.hero-grid .hero-visual{ margin-top:26px; }
}
/* =========================================================
Beautify pass — typography, timeline, card variety, motion
Appended block. No existing rule above was modified.
========================================================= */
/* --- 8) Typography floor ------------------------------------
Body copy measured 15.04-15.36px in card and list contexts,
below the 16px readability floor. Raised without touching
headings or labels. */
p, li{ font-size:1rem; }
.svc-card p, .value-card p, .featured-card p, .process-step p,
.faq-answer p, .faq-answer li, .contact-card .val, .cs-next-list li > span:last-child{
font-size:1rem; line-height:1.6;
}
.lede{ font-size:clamp(1.02rem, 1.1vw, 1.14rem); line-height:1.65; }
/* --- 4) Process section as a milestone path -----------------
The four steps were plain boxes with a number on top and no
visual connection. They now sit on a continuous rail with the
numbered milestone beside each card, so the sequence reads as
a journey. Stacks to a clean vertical list on phones, where a
rail would crowd the text. */
.process-steps{ position:relative; display:block; }
@media (min-width:721px){
.process-steps{ padding-left:78px; }
.process-steps::before{
content:""; position:absolute; left:28px; top:18px; bottom:18px; width:2px;
background:linear-gradient(180deg,
color-mix(in srgb, var(--green,#4b7f3f) 78%, transparent) 0%,
var(--border) 100%);
border-radius:2px;
}
.process-steps .process-step{
position:relative; text-align:left; margin-bottom:18px;
padding:24px 28px; border-radius:var(--radius-lg);
transition:transform .22s ease, box-shadow .22s ease;
}
.process-steps .process-step:last-child{ margin-bottom:0; }
.process-steps .process-step::after{
content:""; position:absolute; left:-22px; top:46px; width:22px; height:2px;
background:var(--border);
}
.process-steps .step-badge{
position:absolute; left:-78px; top:22px; margin:0;
width:58px; height:58px; display:flex; align-items:center; justify-content:center;
border-radius:50%; background:var(--green,#4b7f3f); color:#fff;
font-weight:700; font-size:1.02rem; border:3px solid #fff;
box-shadow:0 6px 16px rgba(20,32,24,.18); z-index:1;
}
.process-steps .process-step:hover{
transform:translateX(3px); box-shadow:0 14px 30px rgba(20,32,24,.12);
}
}
@media (max-width:720px){
.process-steps .process-step{ margin-bottom:16px; }
.process-steps .step-badge{
display:inline-flex; align-items:center; justify-content:center;
width:40px; height:40px; border-radius:50%;
background:var(--green,#4b7f3f); color:#fff; font-weight:700; margin-bottom:12px;
}
}
/* --- 3) Card variety ----------------------------------------
Every family keeps dark-on-light text, so nothing loses
contrast; each just gains its own identity. */
.svc-card, .value-card, .featured-card, .stat-card{
height:100%;
transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.svc-card:hover, .value-card:hover, .featured-card:hover{
transform:translateY(-4px);
box-shadow:0 16px 34px rgba(20,32,24,.13);
border-color:color-mix(in srgb, var(--green,#4b7f3f) 40%, var(--border));
}
/* Service cards: accent rail that fills on hover */
.svc-card{ position:relative; overflow:hidden; }
.svc-card::before{
content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
background:var(--green,#4b7f3f); transform:scaleY(.22); transform-origin:top;
opacity:.45; transition:transform .3s ease, opacity .3s ease;
}
.svc-card:hover::before{ transform:scaleY(1); opacity:1; }
/* Value cards: soft tint so the About band is not another white row */
.value-card{
background:linear-gradient(180deg, var(--cream,#f5f7f2) 0%, #fff 72%);
border-top:3px solid var(--green,#4b7f3f);
}
/* Featured cards: accent top edge */
.featured-card{ border-top:3px solid var(--green,#4b7f3f); }
/* Stat cards read as figures, not cards to click */
.stat-card:hover{ transform:translateY(-2px); }
/* --- FAQ: make the accordion feel intentional ---------------- */
.faq-item{
transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.faq-item:hover{
border-color:color-mix(in srgb, var(--green,#4b7f3f) 38%, var(--border));
}
.faq-item.open, .faq-item.active{
border-left:3px solid var(--green,#4b7f3f);
box-shadow:0 8px 22px rgba(20,32,24,.08);
}
.faq-question{ transition:color .18s ease; }
/* --- 9) Motion: light, and never leaves content invisible ---- */
.btn{ transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease; }
.btn:hover{ transform:translateY(-2px); }
.gallery-item{ transition:transform .25s ease, box-shadow .25s ease; }
.gallery-item:hover{ transform:translateY(-3px); box-shadow:0 16px 34px rgba(20,32,24,.16); }
h2{ text-wrap:balance; }
.grid > *{ min-width:0; }
@media (prefers-reduced-motion:reduce){
*, *::before, *::after{
animation-duration:.001ms !important;
transition-duration:.001ms !important;
scroll-behavior:auto !important;
}
.reveal{ opacity:1 !important; transform:none !important; }
}
/* Remaining sub-16px body copy found by measurement: gallery card text and
the footer blurb/contact list sat at 15.04px, and the form helper note at
14.08px. All are read as running copy, so they meet the 16px floor. */
.gallery-body, .footer-brand, .site-footer li, .footer-col li{ font-size:1rem; line-height:1.6; }
.form-note{ font-size:1rem; line-height:1.55; }
/* The small copy lives in /
children rather than on the classed
wrapper, so target the children directly. */
.gallery-body p, .gallery-body li{ font-size:1rem; line-height:1.6; }
footer p, footer li, .site-footer p, .site-footer li{ font-size:1rem; line-height:1.6; }
/* A .footer-grid-scoped rule outranked the plain `footer li` selector. */
.footer-grid li, .footer-grid ul li, .footer-grid p{ font-size:1rem; line-height:1.6; }
/* =========================================================
Responsive QA pass — mobile timeline
Appended block. No existing rule above was modified.
========================================================= */
/* Below 720px the process section dropped its rail and the step number
centred itself (measured badge at x=340 while the card started at x=16),
so the sequence read as four separate numbered boxes rather than a
journey. It now keeps a slim vertical rail with the number sitting on
it — the mobile timeline the layout is meant to be — with the rail well
clear of the text so nothing is crossed. */
@media (max-width:720px){
.process-steps{ position:relative; padding-left:52px; }
.process-steps::before{
content:""; position:absolute; left:19px; top:14px; bottom:14px; width:2px;
background:linear-gradient(180deg,
color-mix(in srgb, var(--green,#4b7f3f) 72%, transparent) 0%,
var(--border) 100%);
border-radius:2px;
}
.process-steps .process-step{
position:relative; text-align:left; padding:20px 20px 20px 22px;
}
.process-steps .step-badge{
position:absolute; left:-52px; top:20px; margin:0;
width:40px; height:40px; display:flex; align-items:center; justify-content:center;
border-radius:50%; background:var(--green,#4b7f3f); color:#fff;
font-weight:700; font-size:.92rem; border:3px solid #fff;
box-shadow:0 4px 12px rgba(20,32,24,.18); z-index:1;
}
}
@media (max-width:380px){
.process-steps{ padding-left:46px; }
.process-steps::before{ left:17px; }
.process-steps .step-badge{ left:-46px; width:36px; height:36px; font-size:.86rem; }
}
/* =========================================================
Image-rich upgrade — 18 additional photos.
All new images carry intrinsic width/height plus a CSS frame
(aspect-ratio or fixed height) so nothing shifts while loading.
========================================================= */
figure{margin:0;}
/* ---------- Inner-page banners: edge to edge, no gutters ---------- */
.page-banner{position:relative;width:100%;overflow:hidden;background:var(--cream);
height:clamp(240px,28vw,480px);}
.page-banner img{width:100%;height:100%;object-fit:cover;}
.page-banner::after{content:"";position:absolute;left:0;right:0;bottom:0;height:34%;pointer-events:none;
background:linear-gradient(180deg,rgba(18,38,29,0) 0%,rgba(18,38,29,.16) 100%);}
.page-banner + .section{padding-top:72px;}
/* subject-aware crops */
.page-banner img[src$="services-page-banner.webp"]{object-position:center 60%;}
.page-banner img[src$="gallery-page-banner.webp"]{object-position:center 58%;}
.page-banner img[src$="faq-page-banner.webp"]{object-position:center 55%;}
.page-banner img[src$="about-page-banner.webp"]{object-position:center 45%;}
.page-banner img[src$="contact-page-banner.webp"]{object-position:center 55%;}
@media (max-width:720px){
.page-banner{height:auto;aspect-ratio:16/9;}
.page-banner + .section{padding-top:52px;}
.page-banner img[src$="about-page-banner.webp"]{object-position:40% 45%;}
}
/* ---------- Home: image + copy split blocks ---------- */
.media-split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px;align-items:center;}
.media-split--reverse .media-visual{order:2;}
.media-visual{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md);}
.media-visual img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;}
.media-copy h2{font-size:clamp(1.8rem,2.8vw,2.5rem);}
.media-copy > p{color:var(--text-muted);font-size:1.04rem;}
.media-points{margin:4px 0 28px;}
.media-points li{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-bottom:1px dashed var(--border);font-weight:600;color:var(--forest);}
.media-points li:last-child{border-bottom:0;}
.media-points svg{width:20px;height:20px;flex-shrink:0;margin-top:3px;color:var(--moss);}
.media-visual img[src$="home-seasonal-care.webp"]{object-position:center 45%;}
.living-band{background:linear-gradient(180deg,#fff 0%,var(--cream) 100%);}
.living-tags{display:flex;flex-wrap:wrap;gap:10px;margin:4px 0 28px;}
.living-tags span{background:#fff;border:1px solid var(--border);border-radius:999px;padding:8px 16px;
font-weight:600;font-size:.94rem;color:var(--forest);box-shadow:var(--shadow-sm);}
@media (max-width:900px){
.media-split{grid-template-columns:1fr;gap:32px;}
.media-split--reverse .media-visual{order:0;}
}
/* ---------- Services: photo-led cards ----------
4 columns on wide desktops, 2 on laptops/tablets, 1 on phones. */
.svc-grid--photo{grid-template-columns:repeat(4,minmax(0,1fr));}
@media (max-width:1180px){.svc-grid--photo{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:640px){.svc-grid--photo{grid-template-columns:1fr;}}
.svc-card--photo{padding:0;}
.svc-photo{overflow:hidden;}
.svc-photo img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;transition:transform .45s ease;}
.svc-card--photo:hover .svc-photo img{transform:scale(1.04);}
.svc-body{display:flex;flex-direction:column;flex-grow:1;padding:0 24px 24px;}
.svc-card--photo .svc-icon{margin-top:-26px;position:relative;z-index:1;background:#fff;border:1px solid var(--border);
box-shadow:var(--shadow-sm);}
.svc-card--photo p{flex-grow:1;}
.svc-card--photo::before{z-index:2;}
.svc-photo img[src$="service-lawn-care.webp"]{object-position:center 55%;}
.svc-photo img[src$="service-lighting.webp"]{object-position:center 60%;}
.svc-photo img[src$="service-retaining-walls.webp"]{object-position:center 60%;}
@media (min-width:641px) and (max-width:1180px){.svc-photo img{aspect-ratio:16/9;}}
/* ---------- Services: process + Step 02 photo ---------- */
.process-split{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:48px;align-items:center;}
.process-photo{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md);background:#fff;border:1px solid var(--border);}
.process-photo img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;}
.process-photo figcaption{padding:14px 18px;font-size:.95rem;color:var(--text-muted);line-height:1.5;}
.process-photo-step{display:inline-block;margin-right:6px;padding:2px 10px;border-radius:999px;font-size:.78rem;font-weight:700;
letter-spacing:.06em;text-transform:uppercase;background:rgba(76,122,84,.14);color:var(--forest);}
@media (max-width:980px){
.process-split{grid-template-columns:1fr;gap:32px;}
.process-photo{max-width:640px;margin:0 auto;width:100%;}
}
/* ---------- About: story photos ---------- */
.story-photo{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md);background:#fff;border:1px solid var(--border);margin-top:36px;}
.story-photo--top{margin:0 0 20px;}
.story-photo img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;}
.story-photo--top img{aspect-ratio:16/10;}
.story-photo figcaption{padding:12px 16px;font-size:.94rem;color:var(--text-muted);line-height:1.5;}
@media (prefers-reduced-motion:reduce){
.svc-photo img{transition:none;}
.svc-card--photo:hover .svc-photo img{transform:none;}
}
/* --- Small-phone header (pre-existing defect found in QA) ---
At 320px the brand could not shrink (global flex-shrink:0), which
pushed the call icon and menu toggle 28px off-screen. */
@media (max-width:374px){
.header-inner{gap:8px;}
.header-inner .brand{flex-shrink:1;min-width:0;min-height:40px;font-size:.86rem;gap:7px;}
.header-inner .brand .mark{width:32px;height:32px;font-size:.95rem;}
}
/* Comfortable tap targets for the icon-only call link and card links */
@media (max-width:980px){
.call-btn{min-width:40px;min-height:40px;justify-content:center;}
}
.svc-card--photo .learn-more{display:inline-block;padding:10px 0 2px;min-height:40px;}
@media (max-width:340px){
.header-inner .brand{font-size:.76rem;gap:6px;letter-spacing:-.01em;}
.header-inner{gap:6px;}
.header-inner .brand .mark{width:30px;height:30px;}
.header-actions{gap:4px;}
}
/* Living-Garden animation theme (decorative; aria-hidden; pointer-events:none; paused off-screen; loops disabled under reduced motion) */
:root{--grass-1:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 60'%3E%3Cpath d='M-4 60Q-2 36 -3 16Q-1 38 2 60ZM2 60Q3 46 -2 34Q4 47 9 60ZM7 60Q13 42 17 28Q13 44 12 60ZM15 60Q18 37 19 19Q19 39 19 60ZM18 60Q22 30 22 5Q22 32 25 60ZM24 60Q28 46 31 34Q29 47 30 60ZM28 60Q33 46 36 35Q34 47 33 60ZM34 60Q39 29 41 4Q40 32 41 60ZM38 60Q41 31 40 7Q42 34 45 60ZM46 60Q46 45 43 32Q47 46 51 60ZM52 60Q55 38 56 20Q56 40 56 60ZM55 60Q56 39 55 22Q57 41 60 60ZM59 60Q64 29 66 3Q65 32 66 60ZM67 60Q70 27 72 0Q71 30 71 60ZM72 60Q77 28 81 1Q78 31 77 60ZM76 60Q81 43 84 28Q82 44 82 60ZM79 60Q85 46 88 34Q86 47 86 60ZM85 60Q86 31 86 7Q87 34 89 60ZM91 60Q95 32 99 8Q96 34 95 60ZM97 60Q101 46 103 34Q102 47 102 60ZM102 60Q106 27 106 1Q107 30 109 60ZM107 60Q109 45 110 33Q110 47 111 60ZM111 60Q114 39 115 21Q115 41 116 60ZM115 60Q117 30 115 5Q118 32 122 60ZM124 60Q127 39 126 22Q127 41 130 60ZM128 60Q131 35 132 15Q132 37 134 60ZM134 60Q137 37 136 18Q138 39 141 60ZM137 60Q143 41 147 25Q144 43 143 60ZM143 60Q146 47 145 36Q147 48 149 60ZM147 60Q150 35 151 14Q151 37 151 60ZM155 60Q158 38 160 19Q159 40 159 60ZM161 60Q160 32 155 9Q160 35 164 60ZM165 60Q166 28 164 1Q167 31 170 60ZM170 60Q172 40 170 24Q172 42 175 60ZM174 60Q176 35 174 15Q176 37 179 60ZM181 60Q184 46 185 35Q185 48 187 60ZM185 60Q189 42 192 28Q190 44 189 60ZM190 60Q193 38 195 20Q194 40 194 60ZM195 60Q200 40 203 24Q200 42 200 60ZM202 60Q204 43 202 30Q205 45 208 60ZM208 60Q208 38 206 20Q209 40 212 60ZM211 60Q216 43 219 29Q217 45 217 60ZM215 60Q220 41 223 26Q221 43 221 60ZM223 60Q223 40 220 24Q224 42 228 60ZM228 60Q230 41 228 26Q231 43 233 60ZM232 60Q237 39 241 21Q238 41 237 60Z'/%3E%3C/svg%3E");--grass-2:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 60'%3E%3Cpath d='M-2 60Q3 31 7 7Q4 33 2 60ZM4 60Q7 33 9 11Q8 35 8 60ZM6 60Q10 39 12 22Q11 41 11 60ZM12 60Q18 41 21 25Q19 42 19 60ZM17 60Q18 27 13 0Q19 30 24 60ZM25 60Q29 44 31 31Q30 45 30 60ZM30 60Q33 43 34 28Q34 44 37 60ZM34 60Q34 41 30 25Q35 42 41 60ZM38 60Q39 27 36 0Q40 30 45 60ZM46 60Q45 29 40 3Q46 31 51 60ZM47 60Q49 32 48 9Q51 34 54 60ZM55 60Q59 31 63 8Q60 34 59 60ZM60 60Q63 28 63 2Q64 31 65 60ZM64 60Q65 31 62 8Q66 34 70 60ZM70 60Q71 36 67 16Q72 38 76 60ZM76 60Q79 40 77 25Q80 42 83 60ZM81 60Q81 41 76 26Q82 43 87 60ZM85 60Q87 38 84 19Q88 40 91 60ZM91 60Q92 41 88 25Q93 42 98 60ZM98 60Q101 46 102 35Q102 48 104 60ZM101 60Q107 32 111 10Q108 35 107 60ZM107 60Q108 43 105 29Q108 44 111 60ZM110 60Q115 43 119 28Q116 44 116 60ZM119 60Q123 29 126 3Q124 31 123 60ZM124 60Q129 45 131 33Q130 46 130 60ZM129 60Q128 39 124 21Q129 41 133 60ZM134 60Q136 42 137 27Q137 44 138 60ZM137 60Q141 41 143 25Q142 43 142 60ZM143 60Q146 37 147 18Q147 39 148 60ZM149 60Q153 28 155 1Q153 31 153 60ZM154 60Q155 43 154 29Q155 45 158 60ZM159 60Q162 36 161 16Q163 38 166 60ZM163 60Q169 35 173 15Q170 38 169 60ZM169 60Q176 40 181 23Q177 41 176 60ZM174 60Q177 40 178 23Q178 42 179 60ZM180 60Q183 43 184 29Q184 45 186 60ZM186 60Q189 38 188 20Q189 40 192 60ZM191 60Q190 37 185 19Q191 39 195 60ZM197 60Q200 30 200 6Q201 33 203 60ZM199 60Q202 42 203 26Q203 43 205 60ZM204 60Q209 37 213 19Q210 40 210 60ZM213 60Q219 45 222 32Q219 46 219 60ZM215 60Q219 36 221 17Q220 38 219 60ZM222 60Q227 30 230 5Q228 33 228 60ZM225 60Q226 36 223 17Q227 38 231 60ZM231 60Q234 40 235 23Q235 42 237 60Z'/%3E%3C/svg%3E");--grass-3:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 60'%3E%3Cpath d='M-2 60Q2 40 6 24Q3 42 3 60ZM2 60Q5 40 4 24Q6 42 9 60ZM6 60Q7 38 4 20Q8 40 11 60ZM15 60Q18 40 19 24Q19 42 20 60ZM19 60Q20 38 17 20Q20 40 24 60ZM24 60Q26 31 27 7Q27 34 28 60ZM30 60Q32 41 32 25Q33 43 34 60ZM33 60Q36 31 36 8Q37 34 39 60ZM40 60Q44 35 45 15Q44 37 45 60ZM44 60Q45 31 41 8Q46 34 51 60ZM49 60Q49 44 46 31Q50 45 54 60ZM53 60Q55 39 54 22Q56 41 59 60ZM60 60Q63 28 65 2Q64 31 65 60ZM66 60Q72 33 77 11Q73 35 72 60ZM71 60Q73 43 71 29Q75 44 78 60ZM74 60Q79 29 83 3Q80 31 78 60ZM79 60Q85 29 89 3Q86 32 85 60ZM88 60Q88 32 87 9Q89 34 91 60ZM92 60Q97 29 102 4Q98 32 97 60ZM95 60Q97 43 96 30Q98 45 99 60ZM100 60Q102 43 102 29Q103 45 104 60ZM105 60Q105 44 101 30Q106 45 111 60ZM113 60Q117 43 118 29Q118 44 120 60ZM116 60Q121 40 125 24Q122 42 122 60ZM123 60Q126 31 127 7Q127 34 128 60ZM129 60Q128 31 124 8Q129 34 134 60ZM132 60Q133 29 131 4Q134 32 138 60ZM137 60Q141 39 141 22Q142 41 144 60ZM144 60Q144 39 141 22Q145 41 149 60ZM149 60Q154 34 159 13Q155 36 154 60ZM156 60Q158 29 157 3Q159 32 160 60ZM158 60Q159 29 155 3Q159 31 164 60ZM165 60Q165 43 160 30Q165 45 171 60ZM168 60Q173 36 178 16Q174 38 173 60ZM174 60Q175 45 173 32Q176 46 179 60ZM178 60Q182 33 183 11Q183 35 184 60ZM184 60Q189 42 193 27Q190 43 188 60ZM190 60Q191 31 188 7Q191 33 195 60ZM196 60Q198 42 196 27Q199 43 201 60ZM200 60Q204 34 206 12Q205 36 206 60ZM207 60Q209 45 207 33Q210 47 214 60ZM213 60Q213 32 211 9Q214 34 217 60ZM216 60Q220 29 222 4Q221 32 221 60ZM223 60Q224 32 222 10Q224 35 227 60ZM228 60Q233 33 236 11Q234 35 234 60ZM231 60Q233 34 232 12Q234 36 238 60Z'/%3E%3C/svg%3E")}
.anim-paused,.anim-paused *{animation-play-state:paused!important}
.grass{position:absolute;left:0;right:0;bottom:0;height:clamp(34px,3.6vw,54px);z-index:2;pointer-events:none;overflow:hidden}
.grass i{position:absolute;left:-12px;right:-12px;bottom:0;height:100%;transform-origin:50% 100%;-webkit-mask-repeat:repeat-x;mask-repeat:repeat-x;-webkit-mask-position:0 100%;mask-position:0 100%;-webkit-mask-size:240px 100%;mask-size:240px 100%;animation:grass-grow 1.1s cubic-bezier(.2,.8,.2,1) both,grass-sway var(--sw,4s) ease-in-out 1.1s infinite alternate}
.grass .g1{-webkit-mask-image:var(--grass-1);mask-image:var(--grass-1);background:#2A4D38;--sw:4.2s;height:78%}
.grass .g2{-webkit-mask-image:var(--grass-2);mask-image:var(--grass-2);-webkit-mask-position:-90px 100%;mask-position:-90px 100%;background:#1F3A2E;--sw:3.4s;animation-delay:.12s,1.2s}
.grass .g3{-webkit-mask-image:var(--grass-3);mask-image:var(--grass-3);-webkit-mask-position:-170px 100%;mask-position:-170px 100%;background:#355E40;--sw:5s;height:62%;animation-delay:.22s,1.3s}
@keyframes grass-grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes grass-sway{from{transform:skewX(-3deg)}to{transform:skewX(3deg)}}
.page-banner .grass{z-index:2}
.garden-host{position:relative;overflow:hidden;padding-bottom:clamp(96px,9vw,130px)}
.garden-host>.container{position:relative;z-index:3}
.grass-cta{height:clamp(46px,4.4vw,64px)}
.grass-cta .g1{background:#4C7A54}.grass-cta .g2{background:#3F6C48}.grass-cta .g3{background:#6FA06A}
.grass-cta i{animation-play-state:paused}
.garden-host.grown .grass-cta i{animation-play-state:running}
.flowers{position:absolute;inset:0;z-index:3}
.flower{position:absolute;bottom:0;width:22px;height:100%;margin-left:-11px}
.flower svg{width:100%;height:100%;overflow:visible}
.flower .stem{stroke:#3F6C48;stroke-width:2.4;fill:none;transform-origin:50% 100%;transform:scaleY(0)}
.flower .bloom{fill:var(--pc);transform:scale(0)}
.flower .eye{fill:#8A6642}
.garden-host.grown .flower .stem{transform:none;transition:transform .5s ease var(--fd)}
.garden-host.grown .flower .bloom{transform:none;transition:transform .55s cubic-bezier(.2,1.6,.4,1) calc(var(--fd) + .4s)}
.garden-host.grown .flower svg{animation:flower-nod 3.6s ease-in-out calc(var(--fd) + 1s) infinite alternate;transform-origin:50% 100%}
@keyframes flower-nod{from{transform:rotate(-4deg)}to{transform:rotate(4deg)}}
.bf-layer{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.bf-fly{position:absolute;inset:0;animation:bf-path-1 24s linear infinite}
.bf-fly.f2{animation:bf-path-2 30s linear -11s infinite}
.bf-bob{position:absolute;left:0;top:0;width:34px;height:28px;margin:-14px 0 0 -17px;animation:bf-bob 1.6s ease-in-out infinite alternate}
.butterfly{width:100%;height:100%;overflow:visible}
.butterfly .wing{fill:var(--accent);opacity:.85;transform-box:view-box;animation:bf-flap .22s ease-in-out infinite alternate}
.butterfly.alt .wing{fill:#F2B6C1}
.butterfly .wl{transform-origin:20px 16px}.butterfly .wr{transform-origin:20px 16px}
@keyframes bf-flap{from{transform:scaleX(1)}to{transform:scaleX(.28)}}
@keyframes bf-bob{from{transform:translateY(-6px) rotate(-8deg)}to{transform:translateY(6px) rotate(6deg)}}
@keyframes bf-path-1{0%{transform:translate(-5%,72%);opacity:0}6%{opacity:1}25%{transform:translate(22%,40%)}50%{transform:translate(48%,64%)}75%{transform:translate(74%,28%)}94%{opacity:1}100%{transform:translate(104%,52%);opacity:0}}
@keyframes bf-path-2{0%{transform:translate(104%,30%);opacity:0}6%{opacity:1}30%{transform:translate(70%,58%)}55%{transform:translate(44%,22%)}80%{transform:translate(18%,50%)}94%{opacity:1}100%{transform:translate(-6%,34%);opacity:0}}
.sprout{display:block;width:48px;height:30px;margin:12px auto 10px;pointer-events:none}
.sprout svg{width:100%;height:100%;overflow:visible}
.sprout .soil{stroke:var(--earth);stroke-width:2.2;stroke-linecap:round;fill:none}
.sprout .stem{stroke:var(--moss);stroke-width:2.4;stroke-linecap:round;fill:none;stroke-dasharray:1;stroke-dashoffset:0}
.sprout .lf{fill:var(--moss)}
.sprout .lf-l{transform-origin:24px 18px}.sprout .lf-r{transform-origin:24px 13px}
.sprout.reveal{opacity:0;transform:none}
.sprout.reveal .stem{stroke-dashoffset:1}
.sprout.reveal .lf{transform:scale(0)}
.sprout.reveal.in{opacity:1;transition:opacity .2s ease}
.sprout.reveal.in .stem{stroke-dashoffset:0;transition:stroke-dashoffset .6s ease .1s}
.sprout.reveal.in .lf{transform:none;transition:transform .5s cubic-bezier(.2,1.6,.4,1) .6s}
.sprout.reveal.in .lf-r{transition-delay:.78s}
.has-season{position:relative}
.season-wheel{position:absolute;top:14px;left:14px;z-index:2;width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.92);box-shadow:var(--shadow-md);pointer-events:none}
.si{position:absolute;inset:12px;width:32px;height:32px;fill:none;stroke:var(--forest);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:0;animation:season 8s ease-in-out infinite;animation-delay:calc(var(--si) * 2s)}
.si-sun{stroke:var(--accent-dark)}.si-leaf{stroke:var(--earth)}.si-snow{stroke:#4a7fa8}.si-flower{stroke:#c0567a}
@keyframes season{0%{opacity:0;transform:scale(.5) rotate(-40deg)}5%,21%{opacity:1;transform:none}26%,100%{opacity:0;transform:scale(.5) rotate(40deg)}}
.vine-fill{display:none}
@media (min-width:721px){.vine-fill{display:block;position:absolute;left:27px;top:18px;bottom:18px;width:4px;border-radius:3px;z-index:0;background:linear-gradient(180deg,var(--moss),#7FB173);box-shadow:0 0 8px rgba(76,122,84,.35);transform-origin:top center;transform:scaleY(0)}
.process-steps .process-step.reached .step-badge{box-shadow:0 0 0 7px rgba(127,177,115,.28),0 6px 16px rgba(20,32,24,.18);animation:badge-pop .45s cubic-bezier(.2,1.6,.4,1)}}
.process-steps .step-badge{transition:box-shadow .35s ease}
@keyframes badge-pop{0%{transform:scale(1.18)}100%{transform:scale(1)}}
.ripple{position:absolute;top:0;left:0;right:0;aspect-ratio:1/.8;z-index:2;pointer-events:none;overflow:hidden}
.ripple::before{content:"";position:absolute;left:50%;top:50%;width:40%;aspect-ratio:1;margin:-20% 0 0 -20%;border-radius:50%;border:2px solid rgba(255,255,255,.85);box-shadow:0 0 0 6px rgba(255,255,255,.18);transform:scale(0);opacity:0}
.gallery-item.in.img-ready .ripple::before{animation:ripple 1.3s ease-out .15s both}
@keyframes ripple{0%{transform:scale(0);opacity:1}100%{transform:scale(3.2);opacity:0}}
.gallery-item.reveal>img{transition:transform .35s,filter 1.3s ease .25s}
.gallery-item.reveal:not(.img-ready)>img,.gallery-item.reveal:not(.in)>img{filter:saturate(.12) sepia(.35) brightness(1.04)}
html:not(.js) .gallery-item>img{filter:none!important}
.grow-progress{display:flex;align-items:center;gap:12px;margin:0 0 16px}
.grow-progress svg{width:38px;height:44px;flex:0 0 38px;overflow:visible}
.gp-pot{fill:var(--earth)}.gp-stem{stroke:var(--moss);stroke-width:2.4;stroke-linecap:round;fill:none;transform-origin:19px 34px;transform:scaleY(.15);transition:transform .45s ease}
.gp-leaf{fill:var(--moss);transform:scale(0);transition:transform .45s cubic-bezier(.2,1.6,.4,1)}
.gp-leaf.on{transform:none}
.gp-bloom{fill:var(--accent);transform-origin:19px 9px;transform:scale(0);transition:transform .5s cubic-bezier(.2,1.6,.4,1)}
.grow-progress.done .gp-bloom{transform:none}
.gp-label{font-size:.88rem;font-weight:600;color:var(--text-muted)}
@media (max-width:960px){.bf-fly.f2{display:none}}
@media (max-width:640px){.flower:nth-child(even){display:none}.season-wheel{width:46px;height:46px;top:10px;left:10px}.si{inset:9px;width:28px;height:28px}}
@media (prefers-reduced-motion:reduce){.grass i,.flower svg,.bf-fly,.bf-bob,.butterfly .wing,.si,.ripple::before{animation:none!important}.bf-layer{display:none}.si{opacity:0}.si-sun{opacity:1}.flower .stem,.flower .bloom{transform:none}.sprout.reveal,.sprout.reveal .lf{opacity:1;transform:none}.sprout.reveal .stem{stroke-dashoffset:0}.gallery-item.reveal>img{filter:none!important}}
.bf-bob{width:46px;height:38px;margin:-19px 0 0 -23px}
.butterfly .wing{opacity:.95}
/* Responsive pass — readable small labels */
.cs-social-label,.cs-info-list .cs-lbl{font-size:.8rem;}
/* Responsive pass — off-canvas menu (≤1180px):
closed panel is hidden (no edge shadow, links not tabbable while off-screen);
menu links are full-width 44px tap targets */
@media (max-width:1180px){
.main-nav{ visibility:hidden; transition:transform .3s ease, visibility 0s linear .3s; gap:4px; }
.main-nav.open{ visibility:visible; transition:transform .3s ease; }
.main-nav a{ display:flex; align-items:center; width:100%; min-height:46px; font-size:1.02rem; opacity:1; border-bottom:1px solid rgba(0,0,0,.06); }
}
/* Responsive/a11y pass — gold text on light backgrounds uses a deeper shade (same hue) */
.eyebrow,.learn-more,.main-nav a.active,.main-nav a[aria-current="page"]{ color:#855510; }
.cs-footer-social .cs-social-label,.site-footer .cs-social-label{ color:#B5C1BA; opacity:1; }
.main-nav a.active,.main-nav a[aria-current="page"]{ opacity:1; }
.learn-more{ color:#855510 !important; }
.cs-form-social .cs-social-label{ color:#5d636b; opacity:1; }
/* Responsive pass — stacked featured photo on tablets/phones: landscape crop instead of a ~900px-tall portrait block */
@media (max-width:900px){
.featured-visual{ min-height:0 !important; height:auto !important; }
.featured-visual img{ width:100%; height:auto !important; aspect-ratio:4/3; object-fit:cover; min-height:0 !important; }
}
@media (max-width:900px){ .featured-visual img{ object-position:50% 18%; } }