/* ============================================================
   Dubbo Irrigation & Maintenance · POV: "water in dry country"
   Artesian blue against warm bone paper, with the red ochre of Dubbo soil as the
   single warm accent. Blue is taken from the business's own door badge; the ochre
   is sampled from the soil in their own job photos. Green is deliberately absent —
   green would read as a mowing site, which this is not.
   Fonts: Switzer (grotesk body) + Playfair Display italic accent. LOCKED.
   Brand token NAMES kept as --lime/--forest for portability across the template.
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --lime:#12496E; --lime-2:#0D3752; --lime-ink:#FFFFFF; --accent-light:#86C9EC;
  --ochre:#A8461F; --ochre-2:#C4602F;
  --cream:#EEE9E1; --paper:#F7F4EE; --card:#FFFFFF;
  --forest:#0E2432; --forest-2:#16344A; --on-forest:#E7EEF3; --on-forest-2:rgba(231,238,243,.70);
  --ink:#17242C; --ink-2:#46565F; --ink-3:rgba(23,36,44,.70);
  --line:rgba(23,36,44,.12); --line-2:rgba(23,36,44,.07); --line-g:rgba(231,238,243,.18);
  --maxw:1400px; --gut:clamp(1.1rem, 4vw, 3rem); --r:24px; --r-sm:14px; --r-pill:100px;
  --t-1:clamp(.74rem, .7rem + .14vw, .82rem);
  --t0:clamp(1rem, .96rem + .2vw, 1.12rem);
  --t1:clamp(1.14rem, 1rem + .55vw, 1.45rem);
  --h3:clamp(1.25rem, 1.05rem + .7vw, 1.6rem);
  --h2:clamp(2.2rem, 1.3rem + 3.4vw, 4rem);
  --h1:clamp(2.8rem, 1.2rem + 5.6vw, 6rem);
  --shadow:0 24px 60px -28px rgba(8,20,34,.42);
}
html{ -webkit-text-size-adjust:100% }
html.js [data-reveal]{opacity:0}
body{background:var(--cream);color:var(--ink);font-family:"Switzer",system-ui,sans-serif;
  font-optical-sizing:auto;font-size:var(--t0);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}a{color:inherit;text-decoration:none}
::selection{background:var(--lime);color:#fff}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.section{padding-block:clamp(4.5rem, 9vw, 8rem)}
.pt0{padding-top:0}
.eyebrow{font-size:var(--t-1);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--lime-2);display:inline-flex;align-items:center;gap:.55rem}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--lime-2);flex:none}
.eyebrow--light{color:var(--accent-light)}.eyebrow--light::before{background:var(--accent-light)}
.h2{font-weight:600;font-size:var(--h2);line-height:1.04;letter-spacing:-.02em;margin-top:1.1rem}
.h2 em,.split__body em,.rcard em{font-family:"Playfair Display",Georgia,serif;font-style:italic;font-weight:500;letter-spacing:0}
.h2--light{color:var(--on-forest)}
.lead{font-size:var(--t1);line-height:1.5;color:var(--ink-2);margin-top:1.2rem;max-width:54ch}
.lead--light{color:var(--on-forest-2)}
.lead a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.center{text-align:center;max-width:40ch;margin-inline:auto}
.center .h2{margin-inline:auto}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;font-size:.98rem;line-height:1;
  padding:1rem 1.6rem;border-radius:14px;cursor:pointer;border:1px solid transparent;
  transition:transform .35s cubic-bezier(.2,.7,.2,1),background .35s,color .35s,border-color .35s;white-space:nowrap}
.btn svg{width:1.05em;height:1.05em;transition:transform .35s}.btn:hover svg{transform:translateX(4px)}
.btn svg.ph{width:1em;height:1em}.btn:hover svg.ph{transform:none}
.btn:hover{transform:translateY(-2px)}
.btn--lg{padding:1.15rem 1.9rem;font-size:1.04rem}
.btn--sm{padding:.7rem 1.1rem;font-size:.86rem}
.btn--lime{background:var(--lime);color:var(--lime-ink)}.btn--lime:hover{background:var(--lime-2)}
.btn--dark{background:var(--forest);color:var(--on-forest)}.btn--dark:hover{background:#08161F}
.btn--line{border-color:var(--line);color:var(--ink);background:transparent}.btn--line:hover{border-color:var(--ink);background:rgba(18,73,110,.05)}
.btn--ghost{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.4);backdrop-filter:blur(8px)}
.btn--ghost:hover{background:rgba(255,255,255,.24)}

/* NAV (floating bar, rounded corners) — logo left, links + CTA grouped right */
.nav{position:fixed;inset:.9rem 0 auto;z-index:60;padding-inline:var(--gut);transition:.4s}
.nav__pill{max-width:var(--maxw);margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  background:rgba(255,255,255,.92);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.6);
  border-radius:14px;padding:.7rem .6rem .7rem 1.35rem;box-shadow:0 14px 40px -22px rgba(8,20,34,.5)}
.nav.scrolled{inset:.5rem 0 auto}.nav.scrolled .nav__pill{box-shadow:0 16px 44px -20px rgba(8,20,34,.6)}
.nav__right{display:flex;align-items:center;gap:.6rem}
/* No usable logo raster exists for this business (their real badge survives only as a ~72px decal on a
   truck door), so the brand is a TEXT wordmark — never an invented emblem. Audit C0c / C6. */
.brand{display:inline-flex;align-items:center;gap:.5rem;font-family:"Switzer",system-ui,sans-serif;white-space:nowrap}
.brand__img{height:50px;width:auto;display:block;flex:none}
.brand--light .brand__img{background:#fff;padding:.4rem .6rem;border-radius:11px;box-sizing:content-box}
.brand__txt{display:flex;flex-direction:column;line-height:1.02}
.brand__txt b{font-weight:700;font-size:.94rem;letter-spacing:.055em;text-transform:uppercase;color:var(--lime)}
.brand--light .brand__txt b{color:var(--on-forest)}
/* LOCKED: wordmark second line letter-spacing = .1em. Never increase it to "stretch" the short
   word out to the width of the line above — that reads as too spaced apart. Fixed brand constant
   on every build, like the font. Enforced by audit C4. */
.brand__txt small{font-weight:600;font-size:.73rem;letter-spacing:.1em;text-transform:uppercase;color:var(--lime-2);margin-top:.2rem}
.brand--light{color:var(--on-forest)}
.brand--light .brand__txt small{color:var(--accent-light)}
.nav__links{display:flex;gap:1.4rem;align-items:center;margin-right:1.1rem}
.nav__links a{font-size:.88rem;font-weight:500;color:var(--ink-2);transition:.25s}
.nav__links a:hover,.nav__links a[aria-current=page]{color:var(--ink)}
/* drawer is the only nav on a phone, so it needs its own current-page affordance */
.menu__links a[aria-current=page]{color:var(--accent-light)}
.nav .btn{padding:.74rem 1.3rem;font-size:.94rem;border-radius:12px}
.navphone{font-weight:600;letter-spacing:-.01em}
.burger{display:none;width:2.8rem;height:2.8rem;border:1px solid var(--line);border-radius:50%;background:#fff;cursor:pointer;position:relative}
.burger span{position:absolute;left:50%;top:50%;width:15px;height:1.6px;background:var(--ink);transform:translate(-50%,-50%);transition:.3s}
.burger span:nth-child(1){margin-top:-5px}.burger span:nth-child(3){margin-top:5px}

.menu{position:fixed;inset:0;z-index:70;background:var(--forest);color:var(--on-forest);display:flex;flex-direction:column;padding:var(--gut);transform:translateY(-100%);transition:transform .6s cubic-bezier(.76,0,.24,1);visibility:hidden}
.menu.open{transform:none;visibility:visible}
.menu__top{display:flex;align-items:center;justify-content:space-between;padding-block:.4rem}
.menu__close{width:2.8rem;height:2.8rem;border:1px solid var(--line-g);border-radius:50%;background:none;color:var(--on-forest);font-size:1.1rem;cursor:pointer}
.menu__links{margin:auto 0;display:flex;flex-direction:column;gap:.1rem}
.menu__links a{font-weight:600;font-size:clamp(2.2rem, 11vw, 3.6rem);line-height:1.24;letter-spacing:-.03em;display:flex;align-items:baseline;gap:1rem}
.menu__links a .n{font-size:.8rem;color:var(--accent-light);font-weight:600}
.menu__foot{display:flex;gap:1.4rem;flex-wrap:wrap;color:var(--on-forest-2);font-size:.95rem}

/* HERO */
/* LOCKED top padding: keeps the whole hero (nav → headline → sub → actions → proof card) inside one
   viewport so the bottom-aligned CTAs are never pushed below the fold. Do NOT raise the top clamp to
   reposition the headline (that clips the CTAs) and never set a fixed height (overflow:hidden clips).
   If a build still cuts off, trim hero__sub / hero__actions margins, not this. Enforced by audit K3d. */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;color:#fff;padding:clamp(7.5rem, 10vh, 9.25rem) var(--gut) clamp(2rem, 4vw, 3.4rem)}
.hero__media{position:absolute;inset:-10% 0;z-index:0;will-change:transform}
.hero__media img{width:100%;height:100%;object-fit:cover;filter:brightness(.9)}
.hero__shade{position:absolute;inset:0;z-index:1;background:linear-gradient(95deg,rgba(8,20,28,.80) 0%,rgba(8,20,28,.58) 40%,rgba(8,20,28,.20) 72%,rgba(8,20,28,.34) 100%),linear-gradient(180deg,rgba(8,20,28,.42) 0%,rgba(8,20,28,.08) 32%,rgba(8,20,28,.72) 100%)}
.hero__in{position:relative;z-index:2;width:100%;max-width:var(--maxw);margin-inline:auto;display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.hero__copy{max-width:42rem}
.hero__h1{font-weight:600;font-size:var(--h1);line-height:.98;letter-spacing:-.025em}
.hero__h1 em{font-family:"Playfair Display",Georgia,serif;font-style:italic;font-weight:500;letter-spacing:-.01em;color:var(--accent-light)}
.hero__h1 .nb{white-space:nowrap}
.hero__sub{font-size:var(--t1);line-height:1.45;color:rgba(255,255,255,.92);margin-top:1.4rem;max-width:40ch}
.hero__actions{display:flex;flex-wrap:nowrap;gap:.8rem;margin-top:2rem}
.hero__card{display:flex;gap:.9rem;align-items:stretch;background:rgba(9,24,36,.52);backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.2);border-radius:var(--r);padding:.85rem;max-width:372px}
.hero__card-media{flex:none;width:5.4rem;border-radius:var(--r-sm);overflow:hidden}
.hero__card-media img{width:100%;height:100%;object-fit:cover}
.hero__card-body{display:flex;flex-direction:column;gap:.25rem}
.hero__card .stars{color:var(--accent-light);font-size:.82rem;letter-spacing:.08em}
.hero__card b{font-size:1.04rem;font-weight:600;line-height:1.1}
.hero__card small{color:rgba(255,255,255,.66);font-size:.74rem;line-height:1.3}
.hero__card .btn{margin-top:.5rem;align-self:flex-start}
/* the dark button disappears into the dark glass card over a dark hero — flip it to the pale water blue */
.hero__card .btn--dark{background:var(--accent-light);color:var(--forest)}
.hero__card .btn--dark:hover{background:#fff}

/* TRUST BAR */
.trust{background:var(--forest);color:var(--on-forest)}
.trust__row{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;padding-block:clamp(2rem, 3.6vw, 2.8rem)}
.trust__item{display:flex;flex-direction:column;gap:.25rem;text-align:center;padding:.4rem;border-left:1px solid var(--line-g)}
.trust__item:first-child{border-left:0}
.trust__item b{font-family:"Playfair Display",Georgia,serif;font-style:italic;font-weight:500;font-size:clamp(1.8rem, 1rem + 2.4vw, 3rem);line-height:1;color:var(--accent-light)}
.trust__item b .star{font-style:normal;font-size:.46em;vertical-align:.08em;margin-left:.05em}
.trust__item span{font-size:.88rem;color:var(--on-forest-2)}

/* SPLIT (about) */
.split{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(1.6rem, 4vw, 4.5rem);align-items:center}
.split__media{border-radius:var(--r);overflow:hidden;aspect-ratio:4/5}
.split__media img{width:100%;height:100%;object-fit:cover;will-change:transform}
.split__body .h2{font-size:clamp(1.7rem, 1.1rem + 2.2vw, 2.6rem)}
.ticks{list-style:none;display:grid;gap:.8rem;margin:1.8rem 0}
.ticks li{position:relative;padding-left:2.1rem;color:var(--ink-2)}
.ticks li::before{content:"";position:absolute;left:0;top:.1rem;width:1.45rem;height:1.45rem;background:var(--lime);border-radius:50%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l4 4 10-10'/%3E%3C/svg%3E");background-size:64%;background-position:center;background-repeat:no-repeat}

/* SERVICES */
.shead{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;margin-bottom:clamp(2rem, 4vw, 3.2rem)}
.scards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.8rem, 1.5vw, 1.2rem)}
.scards--4{grid-template-columns:repeat(4,1fr)}
.scard{background:var(--card);border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s,border-color .4s}
.scard:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:transparent}
.scard__img{aspect-ratio:4/3;overflow:hidden;background:var(--cream)}
.scard__img img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.scard:hover .scard__img img{transform:scale(1.05)}
.scard__body{padding:1.4rem 1.5rem 1.5rem;display:flex;flex-direction:column;flex:1}
.scard h3{font-size:var(--h3);font-weight:500;letter-spacing:-.02em;margin:0 0 .45rem}
.scard p{color:var(--ink-3);font-size:.95rem;margin-bottom:1.3rem}
.scard .go{margin-top:auto;width:2.6rem;height:2.6rem;border-radius:50%;background:var(--cream);display:grid;place-items:center;color:var(--lime);transition:.35s}
.scard .go svg{width:1.15rem;height:1.15rem}
.scard:hover .go{background:var(--forest);color:var(--accent-light);transform:translateX(3px)}

/* DARK FEATURE */
.feature{position:relative;overflow:hidden;color:#fff}
.feature__media{position:absolute;inset:-8% 0;z-index:0;will-change:transform}
.feature__media img{width:100%;height:100%;object-fit:cover}
.feature__shade{position:absolute;inset:0;z-index:1;background:linear-gradient(120deg,rgba(8,20,28,.88),rgba(8,20,28,.5))}
.feature__in{position:relative;z-index:2;padding-block:clamp(5.5rem, 11vw, 9rem);max-width:880px}
.feature__in .hero__actions{margin-top:2.2rem;flex-wrap:wrap}

/* REVIEWS / FEATURED TESTIMONIAL */
.tgrid{display:grid;align-items:start;grid-template-columns:1.4fr 1fr;gap:clamp(.8rem, 1.5vw, 1.2rem);margin:clamp(2.4rem, 4.5vw, 3.4rem) 0 clamp(.8rem, 1.5vw, 1.2rem)}
.tfeature{background:var(--card);border:1px solid var(--line-2);border-radius:var(--r);padding:clamp(2rem, 3vw, 3rem);display:flex;flex-direction:column;gap:1.4rem}
.tfeature .stars{color:var(--lime-2);font-size:1.05rem;letter-spacing:.06em}
/* the one long review this business has runs ~450 characters, so the display size is dialled back
   from the template default or the card towers over everything beside it */
.tfeature blockquote{font-family:"Playfair Display",Georgia,serif;font-style:italic;font-weight:400;font-size:clamp(1.18rem, .95rem + .8vw, 1.62rem);line-height:1.36;color:var(--ink)}
.tmeta{display:flex;align-items:center;gap:1rem;margin-top:auto}
.tavatars{display:flex;flex:none}
.tavatars i{width:2.5rem;height:2.5rem;border-radius:50%;background:var(--forest);color:var(--accent-light);display:grid;place-items:center;font-size:.72rem;font-weight:700;font-style:normal;border:2px solid var(--card);margin-left:-.65rem}
.tavatars i:first-child{margin-left:0}
.tmeta b{display:block;font-weight:600;font-size:.98rem}
.tmeta small{color:var(--ink-3);font-size:.84rem}
.tcta{background:var(--forest);color:var(--on-forest);border-radius:var(--r);padding:clamp(2rem, 3vw, 2.6rem);display:flex;flex-direction:column;gap:.9rem;justify-content:center}
.tcta h3{font-size:var(--h3);font-weight:600;letter-spacing:-.02em;line-height:1.15}
.tcta p{color:var(--on-forest-2);font-size:.96rem}
.tcta .btn{align-self:flex-start;margin-top:.3rem}
.tcta__ph{color:var(--on-forest-2);font-size:.9rem;font-weight:500}
.rgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.8rem, 1.5vw, 1.2rem)}
/* this business has three real reviews, so the home page pairs two beside the featured one */
.rgrid--2{grid-template-columns:repeat(2,1fr)}
.rcard{background:var(--card);border:1px solid var(--line-2);border-radius:var(--r);padding:clamp(1.7rem, 2.5vw, 2.1rem);display:flex;flex-direction:column;gap:1.2rem}
.rcard .stars{color:var(--lime-2);font-size:.95rem;letter-spacing:.05em}
.rcard blockquote{font-family:"Playfair Display",Georgia,serif;font-style:italic;font-weight:400;font-size:var(--t1);line-height:1.4;color:var(--ink)}
.rcard cite{margin-top:auto;font-style:normal;font-size:.85rem;color:var(--ink-3);font-weight:500}

/* GALLERY */
.gal{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:200px;gap:clamp(.6rem, 1.2vw, .9rem)}
.gal figure{position:relative;overflow:hidden;border-radius:var(--r)}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.gal figure:hover img{transform:scale(1.05)}
.gal .tag{position:absolute;top:.9rem;left:.9rem;background:var(--ochre);color:#fff;font-size:.64rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:.34rem .7rem;border-radius:var(--r-pill)}
.g1{grid-column:span 5;grid-row:span 2}.g2{grid-column:span 7}.g3{grid-column:span 4}.g4{grid-column:span 3}

/* FAQ */
.faqwrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(1.6rem, 4vw, 4.5rem);align-items:start}
.faqhead{position:sticky;top:7rem}
.faqhead .lead{font-size:var(--t0)}
.faq details{border-bottom:1px solid var(--line);padding:1.4rem 0}.faq details:first-child{border-top:1px solid var(--line)}
.faq summary{display:flex;justify-content:space-between;gap:1.5rem;align-items:center;cursor:pointer;list-style:none;font-weight:600;font-size:var(--t1);letter-spacing:-.02em}
.faq summary::-webkit-details-marker{display:none}
.faq .pl{flex:none;width:2.1rem;height:2.1rem;border:1px solid var(--line);border-radius:50%;position:relative;transition:.3s}
.faq .pl::before,.faq .pl::after{content:"";position:absolute;left:50%;top:50%;width:.82rem;height:1.6px;background:var(--ink);transform:translate(-50%,-50%);transition:.3s}
.faq .pl::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq details[open] .pl{background:var(--lime);border-color:var(--lime)}
.faq details[open] .pl::before{background:#fff}
.faq details[open] .pl::after{opacity:0}
.faq p{color:var(--ink-3);max-width:60ch;margin-top:1rem}

/* BIG CTA */
.bigcta{position:relative;overflow:hidden;color:#fff;text-align:center}
.bigcta__media{position:absolute;inset:-8% 0;z-index:0;will-change:transform}
.bigcta__media img{width:100%;height:100%;object-fit:cover}
.bigcta__shade{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(8,20,28,.52),rgba(8,20,28,.74))}
.bigcta__in{position:relative;z-index:2;padding-block:clamp(5.5rem, 12vw, 9.5rem);display:flex;flex-direction:column;align-items:center;gap:2rem}
.bigcta__h{font-weight:600;font-size:var(--h1);line-height:1;letter-spacing:-.025em;max-width:16ch}
.bigcta__h em{font-family:"Playfair Display",Georgia,serif;font-style:italic;font-weight:500;color:var(--accent-light)}
.bigcta__sub{color:rgba(255,255,255,.84);font-size:var(--t1);line-height:1.5;max-width:44ch;margin-top:-.8rem}

/* FOOTER */
.foot{background:var(--forest);color:var(--on-forest);overflow:hidden}
.foot__cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:1.6rem;padding-block:clamp(3.5rem, 6vw, 5rem) 2rem}
.foot__brand .brand{display:inline-flex;max-width:100%;padding:0;font-size:clamp(.82rem,4.4vw,1.08rem);letter-spacing:.1em}
.foot__brand p{color:var(--on-forest-2);font-size:.94rem;margin-top:1rem;max-width:34ch}
.foot__cols h5{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--on-forest-2);margin-bottom:1rem}
.foot__cols>div>a,.foot__cols>div>p{display:block;color:rgba(231,238,243,.78);padding:.25rem 0;font-size:.95rem}
.foot__cols a:hover{color:var(--accent-light)}
.socials{display:flex;gap:.6rem;margin-top:1.5rem}
.socials a{width:2.6rem;height:2.6rem;border-radius:50%;border:1px solid var(--line-g);display:grid;place-items:center;color:var(--on-forest-2);transition:.3s}
.socials a:hover{background:var(--lime);border-color:var(--lime);color:#fff;transform:translateY(-2px)}
.socials svg{width:1.1rem;height:1.1rem}
.foot__word{font-weight:600;line-height:.82;text-align:center;letter-spacing:-.04em;color:var(--on-forest);opacity:.09;white-space:nowrap;
  font-size:clamp(2.2rem, 12.4vw, 12rem);padding-bottom:.04em;user-select:none}
.foot__base{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;text-align:center;padding-block:1.6rem 2.2rem;border-top:1px solid var(--line-g);font-size:.8rem;color:var(--on-forest-2)}
.callbar{position:fixed;inset:auto .8rem .8rem;z-index:55;display:none;justify-content:center;align-items:center;gap:.5rem;background:var(--lime);color:#fff;font-weight:600;padding:1rem;border-radius:14px;box-shadow:0 18px 36px -12px rgba(0,0,0,.45)}
.callbar svg{width:1.05em;height:1.05em;flex:none}

/* ABOUT PAGE — sub-hero, values grid, process steps */
.pagehero{min-height:70svh;align-items:flex-end}
.pagehero .hero__in{justify-content:flex-start}
.pagehero .hero__copy{max-width:44rem}
/* stronger left+bottom scrim so sub-page hero text stays readable over bright images */
.pagehero .hero__shade{background:linear-gradient(95deg,rgba(8,20,28,.88) 0%,rgba(8,20,28,.62) 40%,rgba(8,20,28,.22) 72%,rgba(8,20,28,.42) 100%),linear-gradient(0deg,rgba(8,20,28,.55) 0%,rgba(8,20,28,0) 50%)}
.pagehero .hero__h1{font-size:clamp(2.3rem,1.3rem + 3.7vw,4.4rem)}
.pagehero .hero__sub{font-size:clamp(1.04rem,.98rem + .34vw,1.22rem);color:rgba(255,255,255,.9);max-width:46ch}
.center--wide{max-width:52ch}

.vcards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.8rem,1.5vw,1.2rem);margin-top:clamp(2rem,4vw,3.2rem)}
.vcard{background:var(--card);border:1px solid var(--line-2);border-radius:var(--r);padding:clamp(1.7rem,2.5vw,2.2rem);display:flex;flex-direction:column;gap:.9rem;transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s,border-color .4s}
.vcard:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:transparent}
.vcard__ic{width:3rem;height:3rem;border-radius:14px;background:var(--cream);color:var(--lime);display:grid;place-items:center;flex:none}
.vcard__ic svg{width:1.5rem;height:1.5rem}
.vcard h3{font-size:var(--h3);font-weight:500;letter-spacing:-.02em}
.vcard p{color:var(--ink-3);font-size:.95rem}

.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,2vw,1.8rem);margin-top:clamp(2rem,4vw,3.2rem)}
.step{position:relative;padding-top:1.7rem;border-top:2px solid var(--line)}
.step::after{content:"";position:absolute;top:-2px;left:0;width:38%;height:2px;background:var(--ochre)}
.step__n{font-family:"Playfair Display",Georgia,serif;font-style:italic;font-weight:500;font-size:1.15rem;color:var(--lime-2)}
.step h3{font-size:var(--t1);font-weight:600;letter-spacing:-.02em;margin:.7rem 0 .55rem}
.step p{color:var(--ink-3);font-size:.92rem;line-height:1.55}
@media(max-width:980px){ .vcards{grid-template-columns:1fr}.steps{grid-template-columns:repeat(2,1fr)} }
@media(max-width:560px){ .steps{grid-template-columns:1fr} }

/* SERVICE ROWS — full-width, alternating image + detail */
.srows{display:flex;flex-direction:column;gap:clamp(3rem,6.5vw,6.5rem);margin-top:clamp(2.6rem,5vw,4.5rem)}
.srow{display:grid;grid-template-columns:1.02fr 1fr;gap:clamp(1.8rem,4.5vw,5rem);align-items:center}
.srow__media{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:5/4;box-shadow:var(--shadow)}
.srow__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.srow:hover .srow__media img{transform:scale(1.04)}
.srow__tag{position:absolute;top:1rem;left:1rem;background:rgba(168,70,31,.86);backdrop-filter:blur(6px);color:var(--on-forest);font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:.4rem .8rem;border-radius:var(--r-pill)}
.srow__n{display:inline-block;font-family:"Playfair Display",Georgia,serif;font-style:italic;font-weight:500;font-size:1.05rem;color:var(--lime-2);margin-bottom:.5rem}
.srow__body h2{font-size:clamp(1.7rem,1.1rem + 2.1vw,2.5rem);font-weight:600;letter-spacing:-.02em;line-height:1.06}
.srow__body .lead{margin-top:.9rem}
.srow__body .ticks{margin:1.5rem 0 1.9rem}
.srow:nth-child(even) .srow__media{order:2}
@media(max-width:980px){
  .srow{grid-template-columns:1fr;gap:1.5rem}
  .srow__media,.srow:nth-child(even) .srow__media{order:-1;aspect-ratio:16/11}
}

/* GALLERY — masonry + lightbox */
.masonry{columns:4 250px;column-gap:clamp(.6rem,1.2vw,1rem);margin-top:clamp(2rem,4vw,3.2rem)}
.masonry figure{break-inside:avoid;margin:0 0 clamp(.6rem,1.2vw,1rem);position:relative;border-radius:var(--r-sm);overflow:hidden;cursor:zoom-in;background:var(--cream)}
.masonry img{width:100%;height:auto;display:block;transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.masonry figure:hover img{transform:scale(1.05)}
.masonry figure::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(8,20,28,.42));opacity:0;transition:.4s;pointer-events:none}
.masonry figure:hover::after{opacity:1}
.masonry .tag{position:absolute;top:.7rem;left:.7rem;z-index:2;background:var(--ochre);color:#fff;font-size:.6rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:.32rem .65rem;border-radius:var(--r-pill);opacity:0;transform:translateY(-4px);transition:.4s}
.masonry figure:hover .tag{opacity:1;transform:none}
@media(max-width:680px){ .masonry{columns:2 140px} }

.lb{position:fixed;inset:0;z-index:90;background:rgba(6,16,24,.94);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;padding:clamp(1rem,4vw,3rem)}
.lb.open{display:flex}
.lb img{max-width:92vw;max-height:86vh;border-radius:var(--r-sm);box-shadow:0 30px 80px -20px rgba(0,0,0,.7)}
.lb__btn{position:absolute;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);color:#fff;width:3rem;height:3rem;border-radius:50%;display:grid;place-items:center;cursor:pointer;transition:.3s}
.lb__btn:hover{background:rgba(255,255,255,.26)}
.lb__btn svg{width:1.3rem;height:1.3rem}
.lb__close{top:1.2rem;right:1.2rem}
.lb__prev{left:1.2rem;top:50%;transform:translateY(-50%)}
.lb__next{right:1.2rem;top:50%;transform:translateY(-50%)}
.lb__count{position:absolute;bottom:1.3rem;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.72);font-size:.85rem;letter-spacing:.05em}
@media(max-width:560px){ .lb__prev{left:.4rem}.lb__next{right:.4rem} }

/* SERVICE AREAS — pills */
.arealist{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:.7rem;margin-top:clamp(2rem,4vw,3rem);max-width:62rem;margin-inline:auto}
.arealist li{display:inline-flex;align-items:center;gap:.55rem;background:var(--card);border:1px solid var(--line-2);border-radius:var(--r-pill);padding:.7rem 1.3rem;font-weight:500;color:var(--ink-2);font-size:.95rem}
.arealist li::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:var(--lime);flex:none}

/* FOOTER contact links with leading icon */
.foot__cols a.fcontact{display:flex;align-items:center;gap:.6rem}
.foot__cols a.fcontact svg{width:1.05em;height:1.05em;color:var(--lime);flex:none}

/* REVIEWS — masonry of real reviews */
.rmason{columns:3 320px;column-gap:clamp(.8rem,1.5vw,1.2rem);margin-top:clamp(2.2rem,4vw,3.4rem)}
.rmason .rcard{break-inside:avoid;margin:0 0 clamp(.8rem,1.5vw,1.2rem)}
.rmason .rcard blockquote{font-family:"Switzer",system-ui,sans-serif;font-style:normal;font-size:1rem;line-height:1.62;color:var(--ink-2)}
.rcard cite{display:flex;flex-direction:column;gap:.12rem;font-style:normal}
.rcard cite b{font-weight:600;color:var(--ink);font-size:.95rem}
.rcard cite span{font-size:.8rem;color:var(--ink-3)}
@media(max-width:680px){ .rmason{columns:1} }
/* this business has three real reviews, and a column masonry left them lopsided with a dead third
   column — a top-aligned grid reads as deliberate at that count */
.rmason{columns:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.8rem,1.5vw,1.2rem)}
.rmason .rcard{margin:0}
@media(max-width:980px){ .rmason{grid-template-columns:1fr} }

/* platform review button — Google is the only profile this business has */
.btn--google{background:#fff;color:#17242C;border-color:#fff}
.btn--google:hover{background:#E9EFF5}
.btn svg.gic{width:1.2em;height:1.2em}
.btn:hover svg.gic{transform:none}

/* plain (image-free) dark CTA band — avoids clashing with an image section below */
.feature--plain{background:var(--forest)}
.feature--plain .feature__media,.feature--plain .feature__shade{display:none}

/* CONTACT — info card + form */
.contact{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(1rem,2.5vw,1.6rem);align-items:start;margin-top:clamp(2rem,4vw,3rem)}
.cinfo{background:var(--forest);color:var(--on-forest);border-radius:var(--r);padding:clamp(1.8rem,3vw,2.6rem);display:flex;flex-direction:column;gap:1.3rem}
.cinfo h2{font-size:var(--h3);font-weight:600;letter-spacing:-.02em;line-height:1.1}
.cinfo>p{color:var(--on-forest-2);font-size:.96rem;margin-top:-.4rem}
.cline{display:flex;gap:.85rem;align-items:center}
.cline .ic{width:2.7rem;height:2.7rem;border-radius:12px;background:rgba(134,201,236,.12);border:1px solid var(--line-g);display:grid;place-items:center;flex:none;color:var(--accent-light)}
.cline .ic svg{width:1.2rem;height:1.2rem}
.cline small{display:block;color:var(--on-forest-2);font-size:.74rem;text-transform:uppercase;letter-spacing:.12em;margin-bottom:.1rem}
.cline b{font-weight:600;font-size:1.02rem}
.cline a{color:inherit}.cline a:hover b{color:var(--accent-light)}
.cinfo__chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.2rem}
.cinfo__chips span{border:1px solid var(--line-g);color:var(--on-forest-2);border-radius:var(--r-pill);padding:.4rem .85rem;font-size:.82rem}
.cinfo__lic{margin-top:auto;color:var(--on-forest-2);font-size:.82rem;border-top:1px solid var(--line-g);padding-top:1.2rem}

.cform{background:var(--card);border:1px solid var(--line-2);border-radius:var(--r);padding:clamp(1.8rem,3vw,2.6rem);box-shadow:var(--shadow)}
.cform h2{font-size:var(--h3);font-weight:600;letter-spacing:-.02em;margin-bottom:.4rem}
.cform__intro{color:var(--ink-3);font-size:.95rem;margin-bottom:1.6rem}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.field{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1.1rem}
.field label{font-size:.82rem;font-weight:600;color:var(--ink-2)}
.field input,.field select,.field textarea{width:100%;font:inherit;font-size:1rem;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:.85rem 1rem;transition:border-color .25s,box-shadow .25s,background .25s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--lime);box-shadow:0 0 0 3px rgba(18,73,110,.18);background:#fff}
.field textarea{resize:vertical;min-height:120px}
.field--hp{position:absolute;left:-9999px;opacity:0;height:0;margin:0}
.cform form .btn{width:100%;justify-content:center;margin-top:.3rem}
.cform__note{text-align:center;font-size:.82rem;color:var(--ink-3);margin-top:.9rem}
.cform__ok{display:none;text-align:center;padding:2.4rem 1rem}
.cform__ok .ok-ic{width:3.6rem;height:3.6rem;border-radius:50%;background:var(--lime);color:#fff;display:grid;place-items:center;margin:0 auto 1.1rem}
.cform__ok .ok-ic svg{width:1.7rem;height:1.7rem}
.cform__ok h3{font-size:var(--h3);font-weight:600;letter-spacing:-.02em;margin-bottom:.5rem}
.cform__ok p{color:var(--ink-3)}
.cform.sent form{display:none}
.cform.sent .cform__ok{display:block}
@media(max-width:880px){ .contact{grid-template-columns:1fr} .frow{grid-template-columns:1fr} }

/* ============================================================
   SIGNATURE — THROW-RADIUS ARCS
   An irrigation plan is drawn in arcs: a nozzle, and the radius it throws. This is that drawing,
   lifted from the business's own door badge (a sprinker head firing three jets). The arcs are
   stroked on ONCE when the band first scrolls into view via stroke-dashoffset. It is a one-shot
   GSAP tween, deliberately NOT an animation loop — a running canvas/rAF loop starves Lenis and
   costs the whole site its smooth scroll.
   ============================================================ */
.radius{position:relative;overflow:hidden;background:var(--paper)}
.radius__art{position:absolute;left:50%;bottom:-2px;transform:translateX(-50%);width:min(1500px,150%);z-index:0;pointer-events:none}
.radius__art svg{width:100%;height:auto;display:block}
.radius__art .arc{fill:none;stroke:var(--lime);stroke-width:1.3;stroke-linecap:round;opacity:.42}
.radius__art .arc--2{opacity:.32}.radius__art .arc--3{opacity:.24}
.radius__art .arc--4{opacity:.17}.radius__art .arc--5{opacity:.11}
.radius__art .jet{fill:none;stroke:var(--ochre);stroke-width:2.2;stroke-linecap:round;opacity:.6}
.radius__art .nozzle{fill:var(--ochre)}
.radius__in{position:relative;z-index:1}
.radius .h2{max-width:20ch}
.rsteps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,2.4vw,2.2rem);margin-top:clamp(2.4rem,5vw,3.6rem)}
.rstep{background:rgba(255,255,255,.72);backdrop-filter:blur(6px);border:1px solid var(--line-2);border-radius:var(--r-sm);padding:1.5rem 1.4rem}
.rstep b{display:block;font-family:"Playfair Display",Georgia,serif;font-style:italic;font-weight:500;font-size:1.5rem;color:var(--ochre);line-height:1}
.rstep h3{font-size:var(--t1);font-weight:600;letter-spacing:-.02em;margin:.7rem 0 .5rem}
.rstep p{color:var(--ink-3);font-size:.94rem;line-height:1.55}
@media(max-width:980px){ .rsteps{grid-template-columns:repeat(2,1fr)} .radius__art{width:220%} }
@media(max-width:560px){ .rsteps{grid-template-columns:1fr} }

/* quiet quarter-arc watermark behind the footer wordmark */
.foot{position:relative}
.foot__arc{position:absolute;right:-6%;top:8%;width:min(560px,60%);z-index:0;pointer-events:none;opacity:.16}
.foot__arc svg{width:100%;height:auto;display:block}
.foot__arc .arc{fill:none;stroke:var(--accent-light);stroke-width:1.4;stroke-linecap:round}
.foot>.wrap,.foot__word{position:relative;z-index:1}

/* featured testimonial — attributed with a real cite so the integrity tools can trace it */
.tfeature cite{font-style:normal;display:flex;flex-direction:column;gap:.15rem;margin-top:auto}
.tfeature cite b{font-weight:600;font-size:1.02rem;color:var(--ink)}
.tfeature cite span{font-size:.85rem;color:var(--ink-3)}

/* proof strip — what the work actually is, in plain terms (no invented numbers) */
.pstrip{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.8rem,1.5vw,1.2rem);margin-top:clamp(2rem,4vw,3rem)}
.pcard{background:var(--card);border:1px solid var(--line-2);border-radius:var(--r);padding:clamp(1.6rem,2.4vw,2.1rem);display:flex;flex-direction:column;gap:.8rem}
.pcard .ic{width:2.9rem;height:2.9rem;border-radius:12px;background:var(--cream);color:var(--lime);display:grid;place-items:center;flex:none}
.pcard .ic svg{width:1.4rem;height:1.4rem}
.pcard h3{font-size:var(--t1);font-weight:600;letter-spacing:-.02em}
.pcard p{color:var(--ink-3);font-size:.95rem}
@media(max-width:980px){ .pstrip{grid-template-columns:1fr} }

/* reviews-page platform buttons */
.rbtns{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}

/* reveals */
html.js [data-reveal]{transform:translateY(28px)}
html.js [data-reveal].in{opacity:1;transform:none}

/* switch to burger before the full nav gets cramped */
@media(max-width:1080px){ .nav__links,.navphone{display:none} .burger{display:block} }
@media(max-width:980px){
  .split{grid-template-columns:1fr}.split__media{aspect-ratio:16/11;order:-1}
  .scards{grid-template-columns:repeat(2,1fr)}
  .tgrid{grid-template-columns:1fr}.rgrid{grid-template-columns:1fr}
  .faqwrap{grid-template-columns:1fr}.faqhead{position:relative;top:0}
  .trust__row{grid-template-columns:repeat(2,1fr);gap:1.6rem 1rem}
  .trust__item:nth-child(3){border-left:0}
  .gal{grid-template-columns:repeat(2,1fr)}.g1,.g2,.g3,.g4{grid-column:span 1;grid-row:span 1}
  .foot__cols{grid-template-columns:1fr 1fr}.foot__brand{grid-column:1/-1}
  .hero__in{align-items:flex-start;flex-direction:column}
}
@media(max-width:560px){
  :root{--r:18px}
  .nav .btn--lime{display:none}
  .scards{grid-template-columns:1fr}
  .hero__actions{flex-wrap:wrap}.hero__actions .btn{flex:1;justify-content:center}
  /* M3: .btn is white-space:nowrap, so long labels overflow a 320px column and get sliced by
     body{overflow-x:hidden}. Dropping nowrap alone is NOT enough: it collapses min-content width,
     so flex:1 then packs both CTAs onto ONE row at half width and the labels wrap to 3 lines
     ("Get a free / quote" at iPhone width). Stack them instead, full width. Applies to every
     button row that can hold a long label, not just the hero. */
  .hero__actions{flex-direction:column;align-items:stretch}
  .hero__actions .btn{flex:none;width:100%;white-space:normal;text-align:center}
  .rbtns{width:100%}
  .rbtns .btn{flex:none;width:100%;white-space:normal;text-align:center;max-width:100%;padding-inline:1.1rem}
  .hero__h1 em{white-space:normal}
  .hero__card{display:none}
  .hero__shade{background:linear-gradient(180deg,rgba(8,20,28,.58) 0%,rgba(8,20,28,.34) 28%,rgba(8,20,28,.84) 100%)}
  .foot__cols{grid-template-columns:1fr}
  .gal{grid-template-columns:1fr;grid-auto-rows:230px}
  .callbar{display:flex}body{padding-bottom:4.6rem}
  /* M2 — the sticky call-bar is fixed to the bottom, so any hero CTA must be lifted clear of it.
     Applies to EVERY hero (home .hero AND the .pagehero sub-heroes), not just the home page:
     scoping this to the home hero alone left /services and /about burying their Call CTA on short
     phones — one of them 107% covered, i.e. entirely behind the bar. */
  .hero{padding-bottom:6rem}
}
/* M2 (short phones) — padding alone cannot solve it. Below ~720px of viewport height the hero
   content column is taller than 100svh, so the hero grows past the viewport, bottom-alignment stops
   applying and the extra padding moves the buttons not at all. Compress the hero itself and drop the
   duplicate ghost Call CTA (the sticky call-bar already carries the identical tel: action). */
@media(max-width:560px) and (max-height:720px){
  .hero{padding-top:7.25rem;padding-bottom:5.5rem}
  .hero__h1{font-size:clamp(2rem,8.4vw,2.4rem)}
  .hero__sub{font-size:1rem;margin-top:.7rem}
  .hero__actions{margin-top:1rem}
  /* Drop the duplicate ghost Call ONLY where the hero has another CTA — the call-bar already carries
     the identical tel: action. `:not(:only-child)` is deliberate: /contact's hero has the ghost Call
     as its ONLY CTA, so hiding it unconditionally leaves that hero with no call to action at all. */
  .hero .hero__actions .btn--ghost:not(:only-child){display:none}
  /* Sub-hero pages stack two full-width platform buttons, so at 320x568 the .pagehero can
     overflow 100svh and push the second CTA under the call-bar. Tighten the sub-hero only.
     Do NOT shrink .btn padding instead: that collapses the single-CTA sub-heroes to ~38px,
     under the tap-target floor (tested and rejected by the mobile lens). */
  .pagehero .hero__sub{font-size:.95rem;margin-top:.55rem}
  .pagehero .hero__actions{gap:.55rem;margin-top:.8rem}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  html.js [data-reveal]{opacity:1;transform:none}
}