:root { --green:#16491c; --deep:#0c3511; --action:#347a36; --pale:#f4f7ef; --cream:#fcfbf6; --ink:#17351a; --muted:#566657; --line:#d8e2d3; font-family:Arial,"Helvetica Neue",Helvetica,sans-serif; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; overflow-x:hidden; background:var(--cream); color:var(--ink); font-size:16px; line-height:1.42; -webkit-font-smoothing:antialiased; } img { display:block; max-width:100%; } a { color:inherit; } h1,h2,h3,p { margin-top:0; } h1,h2,h3 { font-family:"Arial Narrow","Roboto Condensed","Helvetica Neue",Arial,sans-serif; font-stretch:condensed; line-height:1.03; letter-spacing:-.045em; } a:focus-visible { outline:3px solid #f4cb57; outline-offset:3px; } .skip-link { position:fixed; z-index:50; top:-5rem; left:1rem; padding:.75rem 1rem; background:#fff; color:var(--deep); } .skip-link:focus { top:1rem; }

.site-header { height:64px; background:#fff; border-bottom:1px solid #edf0eb; } .header-inner { display:grid; grid-template-columns:196px minmax(0,1fr) auto; gap:18px; align-items:center; width:100%; height:100%; padding:0 31px; } .brand { display:inline-flex; align-items:center; width:168px; height:56px; overflow:hidden; text-decoration:none; } .brand-logo { width:200px; height:200px; max-width:none; mix-blend-mode:multiply; transform:translate(-16px,-34px); } .nav { display:flex; justify-content:center; gap:27px; } .nav a { display:inline-flex; align-items:center; min-height:44px; color:#253d27; font-size:10px; font-weight:700; text-decoration:none; } .nav a:first-child { color:var(--action); border-bottom:2px solid var(--action); } .header-call,.button { display:inline-flex; align-items:center; justify-content:center; min-height:36px; padding:0 14px; border:1px solid var(--action); border-radius:2px; font-size:10px; font-weight:800; letter-spacing:.03em; text-decoration:none; text-transform:uppercase; white-space:nowrap; } .header-call { background:var(--action); color:#fff; } .header-call span { margin-right:6px; font-size:13px; }

.eyebrow { margin:0 0 7px; color:var(--action); font-size:9px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; } .heading-rule { display:block; width:40px; height:2px; margin-top:15px; background:var(--action); } .centred-rule { margin:10px auto 0; }
.hero { display:grid; grid-template-columns:1fr 1fr; min-height:368px; } .hero-copy { padding:54px 32px 20px; background:var(--pale); } .hero h1 { margin:0; color:var(--green); font-size:39px; font-weight:800; } .hero-lede { max-width:285px; margin:15px 0 0; color:#405641; font-size:12px; } .hero-actions { display:flex; gap:10px; margin-top:18px; } .button-solid { background:var(--action); color:#fff; } .button-outline { border-color:var(--green); color:var(--green); background:transparent; } .proof-tokens { display:flex; align-items:center; gap:0; margin-top:22px; color:#3c543e; font-size:8px; font-weight:700; white-space:nowrap; } .proof-tokens span,.proof-tokens a { padding:0 9px; border-left:1px solid #bfcfba; text-decoration:none; } .proof-tokens span:first-child { padding-left:0; border-left:0; } .image-panel { background-image:url("assets/blackwood-leaf-filled-gutter-hero.jpg"); background-repeat:no-repeat; background-size:cover; } .hero-image { background-position:67% center; }

.services { height:207px; min-height:0; padding:19px 32px 9px; overflow:hidden; background:#fff; } .section-heading { text-align:center; } .section-heading h2 { margin:0; color:var(--green); font-size:21px; } .services-rail { display:grid; grid-template-columns:repeat(4,1fr); margin:14px auto 0; max-width:900px; } .service-cell { min-height:112px; padding:0 16px; border-left:1px solid var(--line); text-align:center; } .service-cell:first-child { border-left:0; } .service-icon { display:block; height:29px; color:var(--action); font-family:Georgia,serif; font-size:28px; line-height:25px; } .service-cell h3 { margin:5px 0 6px; color:var(--green); font-size:10px; letter-spacing:-.02em; text-transform:uppercase; } .service-cell p { max-width:150px; margin:0 auto; color:var(--muted); font-size:9px; line-height:1.42; }

.about { display:grid; grid-template-columns:406px 447px; height:261px; min-height:0; } .about-copy { padding:36px 42px; background:var(--pale); } .about h2 { max-width:330px; margin:0; color:var(--green); font-size:25px; } .about-copy > p:not(.eyebrow) { max-width:300px; margin:15px 0 16px; color:#405641; font-size:10px; } .about-copy .button { min-height:31px; font-size:9px; } .about-image { background-position:38% center; }

.proof { min-height:193px; padding:13px 32px 12px; background:#fff; } .proof .section-heading h2 { font-size:20px; } .proof .centred-rule { margin-top:8px; } .feedback-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; width:652px; max-width:652px; margin:11px auto 0; } .feedback-card { min-height:62px; margin:0; padding:9px 12px; border:1px solid #e4e9e1; text-align:center; } .feedback-card p { margin:0; color:#405641; font-size:9px; line-height:1.3; } .feedback-card cite { display:block; margin-top:5px; color:var(--action); font-size:7px; font-style:normal; font-weight:800; letter-spacing:.06em; text-transform:uppercase; } .google-action { display:table; margin:9px auto 0; padding:5px 19px; background:var(--action); color:#fff; font-size:8px; font-weight:800; letter-spacing:.04em; text-decoration:none; text-transform:uppercase; }

.closing-cta { display:grid; grid-template-columns:65% 35%; height:78px; min-height:0; background:var(--green); color:#fff; } .closing-copy { display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:auto auto; column-gap:12px; align-content:center; padding:13px 32px; } .closing-cta .eyebrow { grid-column:1; grid-row:1; margin-bottom:3px; color:#b6dba5; font-size:8px; } .closing-cta h2 { grid-column:1; grid-row:2; margin:0; color:#fff; font-size:20px; } .closing-actions { display:flex; grid-column:2; grid-row:1 / span 2; align-self:center; gap:8px; margin-top:0; flex-wrap:nowrap; } .button-light { border-color:#fff; background:#fff; color:var(--green); min-height:27px; padding:0 10px; font-size:8px; } .button-ghost { min-height:27px; padding:0 10px; border-color:#fff; color:#fff; font-size:8px; } .closing-image { background-position:71% 47%; opacity:.7; }

.site-footer { background:var(--deep); color:#c8ddbf; } .footer-inner { display:grid; grid-template-columns:1.65fr repeat(4,1fr); gap:19px; padding:11px 32px; } .footer-column { min-width:0; } .footer-brand { width:168px; height:40px; margin-top:-4px; } .footer-wordmark { display:block; width:168px; height:auto; max-width:none; filter:invert(1) contrast(1.3); } .footer-brand-wrap p { max-width:142px; margin:5px 0 0; font-size:8px; line-height:1.35; } .footer-column:not(.footer-brand-wrap) { display:flex; flex-direction:column; gap:3px; } .footer-column h3 { margin:2px 0 3px; color:#fff; font-size:8px; letter-spacing:.05em; text-transform:uppercase; } .footer-column a { color:#c8ddbf; font-size:8px; line-height:1.3; text-decoration:none; } .footer-bottom { display:flex; gap:12px; padding:7px 32px; border-top:1px solid rgba(220,239,208,.13); color:#abc4a1; font-size:7px; white-space:nowrap; }
.site-header.is-scrolled { box-shadow:0 2px 12px rgba(8,39,12,.11); }

@media (max-width:620px) { .site-header { height:60px; } .header-inner { grid-template-columns:88px minmax(0,1fr) auto; gap:5px; padding:0 11px; } .brand { width:82px; height:48px; } .brand-logo { width:105px; height:105px; max-width:none; transform:translate(-8px,-39px); } .nav { justify-content:flex-start; gap:10px; overflow:hidden; } .nav a { flex:0 0 auto; min-height:40px; font-size:9px; } .nav a:nth-child(n+4) { display:none; } .header-call { min-height:34px; padding:0 8px; font-size:0; } .header-call span { margin:0; font-size:14px; }
  .hero { grid-template-columns:1fr; } .hero-image { display:none; } .hero-copy { min-height:362px; padding:45px 22px 24px; background:linear-gradient(90deg,rgba(244,247,239,.96),rgba(244,247,239,.83)),url("assets/blackwood-leaf-filled-gutter-hero.jpg") 63% center/cover; } .hero h1 { font-size:40px; } .hero-lede { max-width:270px; font-size:12px; } .proof-tokens { flex-wrap:wrap; gap:7px 0; max-width:270px; white-space:normal; }
  .services { padding:27px 18px 20px; } .section-heading h2 { font-size:22px; } .services-rail { grid-template-columns:1fr 1fr; margin-top:22px; } .service-cell { min-height:126px; padding:0 10px 15px; } .service-cell:nth-child(odd) { border-left:0; } .service-cell:nth-child(-n+2) { border-bottom:1px solid var(--line); padding-bottom:15px; } .service-cell:nth-child(n+3) { padding-top:15px; } .service-cell p { font-size:9px; }
  .about { grid-template-columns:1fr; } .about-copy { min-height:260px; padding:38px 25px; } .about-image { min-height:230px; } .about h2 { font-size:29px; } .about-copy > p:not(.eyebrow) { font-size:12px; }
  .proof { padding:30px 18px; } .feedback-cards { grid-template-columns:1fr; gap:8px; margin-top:20px; } .feedback-card { min-height:0; padding:13px; } .feedback-card p { font-size:11px; } .google-action { margin-top:16px; }
  .closing-cta { grid-template-columns:1fr; } .closing-copy { padding:29px 22px; } .closing-cta h2 { font-size:27px; } .closing-image { min-height:150px; } .no-storage { margin:13px 0 0; font-size:10px; } .footer-inner { grid-template-columns:1fr 1fr; gap:20px 15px; padding:26px 20px; } .footer-brand-wrap { grid-column:1 / -1; } .footer-column h3,.footer-column a,.footer-brand-wrap p { font-size:10px; } .footer-bottom { padding:10px 20px; font-size:8px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } }