/* R.C Tree's & Landscaping. Loaded after Kev's design.css and reference-grid.css: the layout
   underneath is Kev's, everything here is what makes it RC's own. The colours are sampled from
   the R.C Tree's logo badge: cream field, deep green ring, lime lettering and brown trunk. */
:root{
 --rc-cream:#f6f2ea;--rc-cream-2:#ece6da;--rc-deep:#2c4428;--rc-deep-2:#22371f;--rc-lime:#78a028;--rc-lime-hi:#9cc94f;
 --rc-brown:#5a3714;--rc-brown-deep:#3a2410;--rc-radius:14px;
 --ink:#22371f;--maroon:#78a028;--olive:#2c4428;--teal:#324628;--accent:#9cc94f;--gold:#9cc94f;--focus:#9cc94f;
 --paper:#f6f2ea;--pale:#ece6da;--line:#dcd3c1;--white:#fffdf8;--muted:#5f574b;--text:#2b2a24;--footer-text:#dbe4d2;
 --field-line:#b9ae98;--hero-scrim:22,36,20
}
body{background:var(--paper);color:var(--text)}
h1,h2,h3,.brand-lockup span,.process-number{font-family:Outfit,Montserrat,Arial,sans-serif}
h2{font-weight:600;letter-spacing:-.01em}
h3{font-weight:600}

/* Header: the badge sits on the same deep green as its own ring. */
.site-header{background:var(--rc-deep);color:#f3f0e6}
.brand-lockup{color:#f3f0e6}
.brand-lockup span{font-weight:700;font-size:20px;letter-spacing:0;line-height:1.15}
@media(max-width:1200px){.brand-lockup span{white-space:normal;max-width:9.5em}}
@media(max-width:767px){.brand-lockup span{font-size:17px}}
.menu-toggle span{background:#f3f0e6}
@media(max-width:767px){.header-inner nav{background:var(--rc-deep)}}

/* Buttons: lime with deep green lettering, the logo's own pairing. */
.btn,.header-btn,.dark .btn,.hero-split .hero-buttons .btn{background:var(--rc-lime);color:#13230f}
.btn.secondary,.dark .btn.secondary{background:var(--rc-cream);color:var(--rc-deep)}
.hero-split .hero-buttons .btn.secondary{background:#ffffff1f;color:#fff;border:1px solid #ffffff66}
.carousel-arrow{color:#13230f}
.dark{background:var(--rc-deep)}

/* Rounder corners throughout, except the hero, which runs square to the edges (Will, 6 November 2026). */
.hero.hero-split{border-radius:0}
.service-grid-8 img,.project-card [data-gallery],.project-card img,.comparison-grid .comparison,.garden-story>img,.tree-band img,.lightbox{border-radius:var(--rc-radius)}
.btn{border-radius:10px}
.compare-label{border-radius:999px}

/* Brown details. */
.facebook-rating{color:var(--rc-brown);margin-bottom:-6px}
.facebook-mark{color:var(--rc-deep)}
.intro .review-slide footer{color:var(--rc-brown)}
.process-number{color:var(--rc-brown);font-size:30px;font-weight:700}
.service-grid-8 h3{color:var(--rc-deep)}

/* Short recommendations: a slow ribbon under the carousel, as on The Edge Home and Garden.
   It pauses on hover, on click and while dragged, and stands still for reduced motion. */
.quote-band{background:var(--rc-deep);color:#f3f0e6;padding-block:clamp(26px,3vw,40px)}
.quote-band :focus-visible{outline:2px solid var(--rc-lime-hi);outline-offset:-3px}
.quote-ticker-viewport{overflow-x:auto;padding-block:6px;scrollbar-color:var(--rc-lime) var(--rc-deep)}
.quote-ticker-track{display:flex;width:max-content}
.quote-ticker-group{display:flex;align-items:stretch;gap:28px;padding-right:28px}
.quote-ticker-item{flex:0 0 min(var(--quote-width,340px),82vw);width:min(var(--quote-width,340px),82vw);margin:0;padding:4px 28px 4px 0;border-right:1px solid #ffffff2b;display:flex;flex-direction:column;justify-content:space-between}
.quote-ticker-text{font-size:clamp(17px,1rem + .3vw,20px);line-height:1.55;color:#fbf8f1;margin:0 0 14px}
.quote-ticker-item figcaption{color:var(--rc-lime-hi);font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.quote-band.is-ready .quote-ticker-viewport{overflow-x:hidden;cursor:grab;touch-action:pan-y;user-select:none}
.quote-band.is-dragging .quote-ticker-viewport{cursor:grabbing}

/* Tree work: a full-width band in the brown of the logo's trunk. */
.tree-band{background:var(--rc-brown-deep);color:#f3ece2;padding:76px max(6vw,calc((100vw - 1180px)/2))}
.tree-band-inner{display:grid;grid-template-columns:1fr;gap:34px;align-items:center;max-width:1180px;margin:auto}
.tree-band img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 35%}
.tree-band h2{color:#fff;font-size:clamp(30px,3.4vw,46px);line-height:1.1;text-wrap:balance}
.tree-band-copy>p{margin-top:18px;font-size:16.5px;line-height:1.65;color:#eadfce}
.tree-points{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:14px}
.tree-points li{position:relative;padding-left:36px;font-size:16px;line-height:1.5;color:#fff}
.tree-points li::before{content:"";position:absolute;left:0;top:1px;width:24px;height:24px;border-radius:50%;background:var(--rc-lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%2313230f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
.tree-band .band-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.tree-band .btn.secondary{background:transparent;color:#fff;border:1px solid #ffffff66}
@media(min-width:900px){.tree-band-inner{grid-template-columns:.9fr 1.1fr;gap:64px}}

/* How to get a quote: Ryan's own three steps, with the WhatsApp route under them. */
.process-grid article{border-top:3px solid var(--rc-lime)}
.process-section>.btn{gap:10px}

/* Areas we cover. */
.areas{padding:64px 6vw;text-align:center;background:var(--pale);border-bottom:1px solid var(--line)}
.areas h2{font-size:clamp(28px,3vw,40px);line-height:1.15}
.areas>p{margin-top:12px;font-size:15.5px;color:var(--muted)}
.area-list{list-style:none;padding:0;margin:28px auto 0;max-width:900px;display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.area-list li{padding:10px 18px;border-radius:999px;background:var(--white);border:1px solid var(--line);font-size:15px;font-weight:600;color:var(--rc-deep)}

/* Gallery filters as buttons rather than Kev's drop-down. */
.gallery-toolbar{flex-direction:column;align-items:center;gap:14px}
.gallery-filters{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;min-width:0}
.gallery-toolbar .gallery-status{text-align:center}
.filter-chip{border:1px solid var(--line);background:var(--white);color:var(--rc-deep);border-radius:999px;padding:9px 16px;min-height:40px;font:600 13.5px/1.2 Montserrat,Arial,sans-serif;cursor:pointer;transition:background .15s,color .15s}
.filter-chip:hover{border-color:var(--rc-deep)}
.filter-chip[aria-pressed=true]{background:var(--rc-deep);border-color:var(--rc-deep);color:#fff}
@media(max-width:767px){
 .gallery-filters{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;width:100%;padding-bottom:2px}
 .gallery-toolbar .gallery-status{width:auto}
 .gallery-filters::-webkit-scrollbar{display:none}
 .filter-chip{flex:0 0 auto}
}

/* Footer: the badge, larger. */
.footer-badge{width:112px;height:112px;margin-bottom:18px}
@media(max-width:767px){.footer-badge{width:92px;height:92px}}

/* The photo pop-up: no description, and the close cross sits top right on the photograph. */
.lightbox{width:fit-content;height:fit-content;max-width:94vw;max-height:none;margin:auto;padding:0;background:transparent;overflow:visible}
.lightbox>img{display:block;width:auto;height:auto;max-width:94vw;max-height:88dvh;object-fit:contain;border-radius:var(--rc-radius);background:var(--rc-deep-2)}
.lightbox-close{position:absolute;top:12px;right:12px;z-index:2;display:grid;place-items:center;width:46px;height:46px;padding:0;border:0;border-radius:50%;background:#000000a6;color:#fff;font-size:30px;line-height:1;cursor:pointer}
.lightbox-close:hover{background:#000000d9}

/* Tablet widths: the full name and six links do not fit beside the quote button, so the name
   tightens and the before and after link waits for the footer menu. */
@media(min-width:768px) and (max-width:1000px){.brand-lockup span{font-size:15px;max-width:8.5em}.header-inner nav a[href="#stories"]{display:none}}

/* The live site has no concept disclaimer under the footer, so the footer keeps its own bottom
   padding, as on Kev's live site: 80px on desktop, and on a phone enough to clear the fixed
   WhatsApp button. */
.compact-footer{padding-bottom:80px}
@media(max-width:767px){.compact-footer{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}}