/* ============================================================
   Erf. home, version two.
   Structure taken from the Mivon main demo. Palette is the Erf
   one: off white paper, near black type, green as the accent.

   The demo runs this layout on a black canvas. That read as too
   heavy here, so the canvas is paper and the dark is rationed:
   the photo panels, the closing block and the footer. Those are
   the only heavy areas on the page.

   Loaded after style.css so the header, footer, call bar, cookie
   bar and buttons stay the canonical ones. Everything new is
   prefixed .v2- so no existing page can be touched.

   House rules held to: no numbering, no hairline dividers, no
   shadows, no sparkle glyphs, no italic serif.
   ============================================================ */

:root{
  --v2-bg:#f1f0ec;          /* the canvas, brand off white */
  --v2-s1:#ffffff;          /* raised card */
  --v2-s2:#f8f7f4;          /* card on hover */
  --v2-line:rgba(16,20,15,.13);
  --v2-dim:rgba(16,20,15,.64);
  --v2-dim2:rgba(16,20,15,.46);
  --v2-ghost:rgba(16,20,15,.075);
  /* for the few blocks that sit on a photo and stay dark */
  --v2-on-dark:rgba(255,255,255,.74);
  --v2-on-dark2:rgba(255,255,255,.52);
}

.v2-body{
  background:var(--v2-bg);color:var(--black);
  /* the template's own pair: Funnel Display for headings, Mona Sans for copy.
     redefining the two brand tokens here means every rule inherited from
     style.css picks them up without being restated. */
  --display:"Funnel Display","Poppins",system-ui,sans-serif;
  --sans:"Mona Sans","Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-family:var(--sans)
}
.v2-wrap{max-width:1420px;margin:0 auto;padding:0 clamp(16px,2.6vw,34px)}
.v2-body h1,.v2-body h2,.v2-body h3,.v2-body h4{color:var(--black)}
.v2-sec{padding:clamp(66px,8vw,132px) 0}

/* ---- shared bits -------------------------------------------------- */

/* small all caps marker */
/* the section marker. a bordered chip rather than loose uppercase text, so
   it reads as a deliberate element and picks up the pill language used for
   the tags, the row list and the buttons. */
.v2-tag{
  display:inline-flex;align-items:center;gap:9px;margin:0;
  font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--green-d);white-space:nowrap;
  padding:8px 15px 8px 13px;border-radius:999px;
  background:var(--green-lt);border:1px solid rgba(28,90,61,.16)
}
.v2-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green);flex:none}

/* the two tone heading the demo uses everywhere: one word recedes */
.v2-h{font-size:clamp(30px,4.4vw,64px);line-height:1.0;letter-spacing:-0.045em}
/* the demo lets one word recede to grey. here it takes the brand green
   instead, so every section heading carries colour. */
.v2-h em{font-style:normal;color:var(--green)}

/* section header: marker left, heading middle, link right */
.v2-head{
  display:grid;grid-template-columns:150px 1fr auto;gap:clamp(18px,3vw,46px);
  align-items:start;margin-bottom:clamp(28px,3.8vw,56px)
}
.v2-head .v2-tag{margin-top:.35em}
.v2-more{display:inline-flex;align-items:center;gap:12px;white-space:nowrap}
.v2-more>span:not(.v2-circ){font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--v2-dim)}
.v2-more:hover>span:not(.v2-circ){color:var(--black)}

/* circular arrow button */
.v2-circ{
  width:44px;height:44px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--green);color:#fff;
  transition:transform .35s var(--spring),background .25s ease,color .25s ease
}
.v2-circ svg{width:16px;height:16px}
.v2-more:hover .v2-circ,.v2-card:hover .v2-circ{transform:rotate(45deg)}

/* pill, used for tags and small buttons */
.v2-pill{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12.5px;font-weight:600;color:var(--v2-dim);
  padding:10px 17px;border-radius:999px;border:1px solid var(--v2-line);
  background:#fff;
  transition:background .2s ease,color .2s ease,border-color .2s ease
}
a.v2-pill:hover{background:var(--black);color:#fff;border-color:var(--black)}
.v2-pill.solid{background:var(--black);color:#fff;border-color:var(--black);font-weight:700}
.v2-pill.solid:hover{background:var(--green);border-color:var(--green)}

/* ---- hero --------------------------------------------------------- */
.v2-hero{
  position:relative;overflow:hidden;isolation:isolate;
  padding:clamp(104px,10vw,150px) 0 clamp(34px,4vw,60px)
}
/* a soft mesh of the greens behind the hero. Bright green pools in the open
   space right of the headline, a mint wash runs low on the left, and a hint
   of the deep brand green sits behind the seal. It drifts very slowly and
   fades out at the bottom so it melts into the paper of the next band
   rather than ending on a hard edge. */
.v2-hero::before{
  content:"";position:absolute;inset:-14% -10% 0 -10%;z-index:0;pointer-events:none;
  background:
    radial-gradient(40% 54% at 84% 20%, rgba(111,199,155,.46), transparent 70%),
    radial-gradient(32% 42% at 62% 74%, rgba(28,90,61,.19), transparent 72%),
    radial-gradient(46% 56% at 6% 92%, rgba(150,210,176,.62), transparent 70%),
    radial-gradient(34% 40% at 34% 4%, rgba(226,240,230,.95), transparent 72%);
  filter:blur(6px);
  -webkit-mask-image:linear-gradient(to bottom,#000 68%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 68%,transparent 100%);
  animation:v2mesh 24s ease-in-out infinite alternate;
  will-change:transform
}
@keyframes v2mesh{
  0%  {transform:translate3d(0,0,0) scale(1)}
  50% {transform:translate3d(-3%,2.5%,0) scale(1.06)}
  100%{transform:translate3d(2.5%,-2%,0) scale(1.02)}
}
@media (prefers-reduced-motion:reduce){.v2-hero::before{animation:none}}
.v2-hero>*{position:relative;z-index:2}
.v2-hero h1{
  font-size:clamp(36px,6.2vw,92px);line-height:1.04;letter-spacing:-0.045em;
  max-width:20ch;margin:0 0 clamp(36px,5vw,76px)
}
.v2-hero h1 u{
  text-decoration:none;color:var(--green);
  border-bottom:.055em solid var(--green);padding-bottom:.03em
}

.v2-hero-bot{
  display:grid;grid-template-columns:1.05fr auto 1fr;gap:clamp(22px,3.4vw,54px);
  align-items:center
}
.v2-hero-chips{display:flex;flex-wrap:wrap;gap:8px;max-width:420px}
.v2-hero-note{max-width:40ch}
.v2-hero-note p{margin:0 0 20px;font-size:15px;line-height:1.6;color:var(--v2-dim)}

/* the round seal in the middle, text set on a circle */
.v2-seal{position:relative;width:clamp(116px,11vw,152px);aspect-ratio:1;display:grid;place-items:center}
.v2-seal>svg{position:absolute;inset:0;width:100%;height:100%;animation:v2spin 24s linear infinite}
.v2-seal text{
  font-family:var(--sans);font-size:9.4px;font-weight:700;letter-spacing:0;
  text-transform:uppercase;fill:var(--v2-dim2)
}
.v2-seal-core{
  width:46%;aspect-ratio:1;border-radius:50%;background:var(--green);
  display:grid;place-items:center;color:#fff
}
.v2-seal-core svg{width:44%;height:auto}
@keyframes v2spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.v2-seal>svg{animation:none}}

/* ---- horizontal work rail ----------------------------------------- */
/* these sit on photographs, so they keep the dark treatment */
.v2-rail{
  display:flex;gap:clamp(12px,1.4vw,20px);overflow-x:auto;scroll-snap-type:x mandatory;
  padding:0 clamp(16px,2.6vw,34px) 6px;scrollbar-width:none
}
.v2-rail::-webkit-scrollbar{display:none}
.v2-rail-item{
  position:relative;flex:0 0 clamp(260px,30vw,430px);aspect-ratio:4/3.2;
  border-radius:20px;overflow:hidden;scroll-snap-align:start;background:#ddd9d2
}
.v2-rail-item img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.v2-rail-item:hover img{transform:scale(1.045)}
.v2-rail-item::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(16,20,15,.72),rgba(16,20,15,0) 52%)
}
.v2-rail-lab{
  position:absolute;left:16px;bottom:16px;z-index:3;
  display:inline-flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.92);backdrop-filter:blur(10px);
  border-radius:999px;padding:7px 7px 7px 18px;
  font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--black)
}
.v2-rail-lab i{
  width:28px;height:28px;border-radius:50%;background:var(--green);color:#fff;
  display:grid;place-items:center;flex:none
}
.v2-rail-lab i svg{width:12px;height:12px}
.v2-rail-hint{
  display:flex;align-items:center;gap:10px;margin:18px auto 0;max-width:1420px;
  padding:0 clamp(16px,2.6vw,34px);
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--v2-dim2)
}

/* ---- service cards ------------------------------------------------- */
.v2-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.4vw,20px)}
.v2-card{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  background:var(--v2-s1);border:1px solid var(--v2-line);border-radius:22px;
  padding:clamp(24px,2.5vw,34px);min-height:clamp(330px,33vw,430px);
  transition:background .3s ease,border-color .3s ease
}
.v2-card:hover{background:var(--v2-s2);border-color:rgba(16,20,15,.26)}
.v2-card h3{font-size:clamp(20px,2.1vw,29px);line-height:1.08;max-width:13ch;position:relative;z-index:3}
.v2-card p{margin:16px 0 0;font-size:14.5px;line-height:1.58;color:var(--v2-dim);max-width:30ch;position:relative;z-index:3}
.v2-card-img{
  position:absolute;right:-4%;bottom:16%;width:45%;aspect-ratio:1;
  border-radius:50%;overflow:hidden;
  transition:transform .6s var(--ease)
}
.v2-card:hover .v2-card-img{transform:translateY(-6px)}
.v2-card-img img{width:100%;height:100%;object-fit:cover}
.v2-card-foot{margin-top:auto;padding-top:26px;position:relative;z-index:3}
.v2-card .v2-more>span:not(.v2-circ){color:var(--black)}
.v2-card-hit{position:absolute;inset:0;z-index:4;border-radius:22px}
.v2-card-hit:focus-visible{outline:2.5px solid var(--green);outline-offset:3px}

/* the one card that is picked out. the single green block on the page */
.v2-card.pick{background:var(--green);border-color:var(--green)}
.v2-card.pick:hover{background:#1f6544;border-color:#1f6544}
.v2-body .v2-card.pick h3{color:#fff}
.v2-card.pick p{color:rgba(255,255,255,.84)}
.v2-card.pick .v2-more>span:not(.v2-circ){color:#fff}
.v2-card.pick .v2-circ{background:#fff;color:var(--green)}

/* ---- pill row list -------------------------------------------------- */
.v2-rows{display:flex;flex-direction:column;gap:10px;margin-top:clamp(12px,1.4vw,20px)}
.v2-row{
  position:relative;display:grid;grid-template-columns:1fr auto auto;gap:clamp(14px,2.4vw,34px);
  align-items:center;background:var(--v2-s1);border:1px solid var(--v2-line);
  border-radius:999px;
  padding:clamp(13px,1.4vw,18px) clamp(14px,1.6vw,20px) clamp(13px,1.4vw,18px) clamp(22px,2.4vw,34px);
  transition:background .25s ease,border-color .25s ease
}
.v2-row:hover{background:var(--v2-s2);border-color:rgba(16,20,15,.3)}
.v2-row h3{font-size:clamp(16px,1.6vw,22px);line-height:1.2;letter-spacing:-0.03em}
.v2-row-meta{font-size:12.5px;font-weight:600;color:var(--v2-dim2);white-space:nowrap}
.v2-row .v2-circ{width:38px;height:38px;background:transparent;color:var(--black);border:1px solid var(--v2-line)}
.v2-row:hover .v2-circ{background:var(--green);color:#fff;border-color:var(--green);transform:rotate(45deg)}
.v2-row-hit{position:absolute;inset:0;z-index:4;border-radius:999px}
.v2-row-hit:focus-visible{outline:2.5px solid var(--green);outline-offset:3px}
.v2-soon{
  display:inline-block;font-size:10px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  padding:5px 10px;border-radius:999px;background:var(--green-lt);color:var(--green-d);
  margin-left:12px;vertical-align:middle
}

/* ---- ghost word band ------------------------------------------------ */
.v2-ghostband{padding:clamp(26px,4vw,64px) 0;overflow:hidden}
.v2-ghostband .strip-track{display:flex;align-items:center;gap:52px;width:max-content;animation:v2slide 42s linear infinite}
.v2-ghostband span{
  font-family:var(--display);font-weight:700;letter-spacing:-0.05em;white-space:nowrap;
  font-size:clamp(46px,9vw,136px);line-height:1;color:var(--v2-ghost)
}
.v2-ghostband i{width:12px;height:12px;border-radius:50%;background:var(--v2-ghost);flex:none;display:block}
@keyframes v2slide{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.v2-ghostband .strip-track{animation:none}}

/* ---- crew ----------------------------------------------------------- */
.v2-duo{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(12px,1.4vw,20px)}
.v2-duo>*{border-radius:22px;overflow:hidden;min-height:clamp(290px,30vw,400px)}
.v2-flat{
  background:var(--v2-s1);border:1px solid var(--v2-line);
  padding:clamp(24px,2.6vw,36px);display:flex;flex-direction:column;justify-content:space-between;gap:20px
}
.v2-flat h3{font-size:clamp(20px,2.2vw,31px);line-height:1.14}
.v2-photo{position:relative;background:#ddd9d2}
.v2-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.v2-photo .v2-pill{position:absolute;left:20px;bottom:20px;z-index:3}

.v2-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.4vw,20px);margin-top:clamp(12px,1.4vw,20px)}
.v2-stat{
  background:var(--v2-s1);border:1px solid var(--v2-line);border-radius:22px;
  padding:clamp(20px,2.2vw,30px)
}
.v2-stat b{
  display:block;margin-top:14px;font-family:var(--display);font-weight:700;
  font-size:clamp(26px,3.2vw,46px);line-height:1;letter-spacing:-0.045em;color:var(--black)
}
.v2-stat b small{font-size:.5em;font-weight:600;color:var(--v2-dim);letter-spacing:0}

/* ---- areas ----------------------------------------------------------- */
/* photo cards, so the copy inside them stays light */
.v2-mid{text-align:center;margin-bottom:clamp(28px,3.8vw,56px)}
.v2-mid .v2-tag{margin-bottom:18px}
.v2-mid h2{margin:0 auto;max-width:18ch}
.v2-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.4vw,20px)}
.v2-area{
  position:relative;display:block;border-radius:22px;overflow:hidden;
  height:clamp(300px,30vw,400px);background:#ddd9d2
}
.v2-area img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.v2-area:hover img{transform:scale(1.05)}
.v2-area::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(16,20,15,.9),rgba(16,20,15,.05) 64%)}
.v2-area-in{
  position:absolute;inset:auto 0 0 0;z-index:3;padding:clamp(20px,2.2vw,28px);
  display:flex;align-items:flex-end;justify-content:space-between;gap:16px
}
.v2-body .v2-area h3{font-size:clamp(22px,2.4vw,32px);line-height:1;color:#fff}
.v2-area p{margin:8px 0 0;font-size:13.5px;line-height:1.5;color:var(--v2-on-dark)}
.v2-area .v2-circ{width:40px;height:40px;background:transparent;color:#fff;border:1px solid rgba(255,255,255,.35)}
.v2-area:hover .v2-circ{background:#fff;color:var(--black);border-color:#fff;transform:rotate(45deg)}

/* ---- reviews --------------------------------------------------------- */
.v2-quote{
  background:var(--v2-s1);border:1px solid var(--v2-line);border-radius:22px;
  padding:clamp(24px,2.6vw,34px);display:flex;flex-direction:column;gap:22px
}
.v2-quote p{margin:0;font-size:clamp(15px,1.35vw,18px);line-height:1.5;color:var(--black);font-weight:500}
.v2-who{display:flex;align-items:center;gap:13px;margin-top:auto}
.v2-who .av{
  width:46px;height:46px;border-radius:50%;background:var(--green);color:#fff;flex:none;
  display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:17px
}
.v2-who b{display:block;font-size:14px;color:var(--black)}
.v2-who em{display:block;font-style:normal;font-size:12.5px;color:var(--v2-dim2);margin-top:2px}

/* ---- closing --------------------------------------------------------- */
/* the one deliberately heavy block, so the page has somewhere to land */
.v2-close{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(12px,1.4vw,20px)}
.v2-close-main{
  position:relative;overflow:hidden;border-radius:22px;
  padding:clamp(28px,3.6vw,56px);min-height:clamp(300px,30vw,400px);
  display:flex;flex-direction:column;justify-content:space-between;gap:28px
}
.v2-close-main>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.v2-close-main::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(13,42,28,.94),rgba(13,42,28,.62))}
.v2-close-main>*:not(img){position:relative;z-index:3}
.v2-body .v2-close-main h2{
  font-size:clamp(30px,4.4vw,64px);line-height:1;letter-spacing:-0.045em;max-width:12ch;color:#fff
}
.v2-close-main h2 em{font-style:normal;color:var(--green-br);display:block}
.v2-close-main p{color:var(--v2-on-dark)}
.v2-close-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.v2-close-main .v2-pill{background:transparent;color:var(--v2-on-dark);border-color:rgba(255,255,255,.3)}
.v2-close-main .v2-pill:hover{background:rgba(255,255,255,.14);color:#fff}
.v2-close-main .v2-pill.solid{background:#fff;color:var(--black);border-color:#fff}
.v2-close-main .v2-pill.solid:hover{background:var(--green-br);border-color:var(--green-br);color:var(--green-deep)}

.v2-close-side{
  background:var(--v2-s1);border:1px solid var(--v2-line);border-radius:22px;
  padding:clamp(24px,2.8vw,40px);display:flex;flex-direction:column;gap:20px;justify-content:center
}
.v2-close-side h3{font-size:clamp(19px,1.9vw,25px)}
.v2-close-side ul{display:flex;flex-direction:column;gap:14px}
.v2-close-side a,.v2-close-side span.row{display:flex;align-items:center;gap:11px;font-size:15px;font-weight:600;color:var(--black)}
.v2-close-side span.row{font-weight:500;color:var(--v2-dim);font-size:14px}
.v2-close-side a:hover{color:var(--green)}
.v2-close-side svg{width:17px;height:17px;flex:none;color:var(--green)}

/* ---- the canonical header, re-dressed for a light page ---------------- */
/* style.css styles the header for a dark hero. On paper it has to invert,
   so every white-on-transparent rule gets a dark counterpart here. */
/* the logo in the greens: brand green mark and word on paper, with the
   bright green dot. In the footer the two greens swap so it still reads
   on the dark ground. */
.v2-body .site-head .brand{color:var(--green)}
.v2-body .site-head .brand-mark{background:var(--green)}
.v2-body .site-head .brand-mark svg{stroke:#fff}
.v2-body .site-head .brand-name i{color:var(--green-br)}
.v2-body .site-head .brand-reg{color:rgba(28,90,61,.62)}
.v2-body .foot-brand .brand{color:var(--green-br)}
.v2-body .foot-brand .brand-mark{background:var(--green-br)}
.v2-body .foot-brand .brand-mark svg{stroke:var(--green-deep)}
.v2-body .foot-brand .brand-name i{color:#fff}
.v2-body .foot-mark{color:rgba(111,199,155,.16)}
.v2-body .foot-mark i{color:rgba(111,199,155,.55)}
.v2-body .site-head .nav{background:rgba(16,20,15,.05);border-color:var(--v2-line)}
.v2-body .site-head .nav a{color:var(--v2-dim)}
.v2-body .site-head .nav a:hover{background:rgba(16,20,15,.07);color:var(--black)}
.v2-body .site-head .nav a[aria-current="page"]{background:var(--black);color:#fff}
.v2-body .site-head .head-tel{color:var(--black);background:rgba(16,20,15,.05);border-color:var(--v2-line)}
.v2-body .site-head .head-tel:hover{background:var(--black);color:#fff}
.v2-body .burger{background:rgba(16,20,15,.05);border-color:var(--v2-line)}
.v2-body .burger span{background:var(--black)}
.v2-body .burger:hover{background:rgba(16,20,15,.1)}
.v2-body .site-head.open .burger{background:var(--black)}
.v2-body .site-head.open .burger span{background:#fff}
.v2-body .site-head.stuck{background:rgba(241,240,236,.92);backdrop-filter:blur(12px)}
/* the mobile drop down panel goes light to match */
.v2-body .site-head.open .nav{background:#fff;border:1px solid var(--v2-line)}
.v2-body .site-head.open .nav a{color:var(--v2-dim)}
.v2-body .site-head.open .nav a[aria-current="page"]{background:var(--black);color:#fff}

/* ---- sections that flip to a dark or a green ground -------------------
   The page alternates: paper, paper, ink, paper, forest, paper. Anything
   inside a flipped band needs its light treatment undone, so both bands
   share one set of overrides. */
.v2-ink{background:var(--black);color:#fff}
.v2-forest{background:var(--green-deep);color:#fff}

.v2-ink .v2-tag,.v2-forest .v2-tag{
  color:var(--green-br);background:rgba(111,199,155,.12);border-color:rgba(111,199,155,.26)
}
.v2-ink .v2-tag::before,.v2-forest .v2-tag::before{background:var(--green-br)}
.v2-body .v2-ink h2,.v2-body .v2-ink h3,
.v2-body .v2-forest h2,.v2-body .v2-forest h3{color:#fff}
.v2-ink .v2-h em,.v2-forest .v2-h em{color:var(--green-br)}
.v2-ink .v2-more>span:not(.v2-circ),
.v2-forest .v2-more>span:not(.v2-circ){color:var(--v2-on-dark)}
.v2-ink .v2-more:hover>span:not(.v2-circ),
.v2-forest .v2-more:hover>span:not(.v2-circ){color:#fff}
.v2-ink .v2-circ,.v2-forest .v2-circ{background:var(--green-br);color:var(--black)}

/* cards sitting on the ink band */
.v2-ink .v2-flat,.v2-ink .v2-stat{background:#191e18;border-color:rgba(255,255,255,.14)}
.v2-ink .v2-stat b{color:#fff}
.v2-ink .v2-stat b small{color:var(--v2-on-dark)}
.v2-ink .v2-ghostband span,.v2-ink .v2-ghostband i{color:rgba(255,255,255,.08)}
.v2-ink .v2-ghostband i{background:rgba(255,255,255,.08)}

/* cards sitting on the forest band */
.v2-forest .v2-quote{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.17)}
.v2-forest .v2-quote p{color:#fff}
.v2-forest .v2-who b{color:#fff}
.v2-forest .v2-who em{color:var(--v2-on-dark2)}
.v2-forest .v2-who .av{background:var(--green-br);color:var(--green-deep)}

/* ---- approach ---------------------------------------------------------
   Rebuilt from the reference's own measurements at 1440 wide, not by eye.

   The word is PINNED in the middle of the viewport (pinSpacing off) from
   the moment its centre reaches the centre of the screen until the bottom
   of the whole block reaches the bottom of the screen. The cards are not
   parallaxed: they scroll at normal speed, so they ride up over the word.

   Grid is the reference's twelve columns with a 24px gutter, so each card
   is exactly three columns, 327px at 1380 content width:
     row one   cols 1-3 and 10-12
     row two   cols 6-8
     row three cols 3-5 and 9-11
   Every card carries 60px above and below, and the grid starts 60px up
   so the first pair sits flush on the word's baseline.                  */
.v2-appr{padding:clamp(80px,9vw,130px) 0}
.v2-appr-in{position:relative;max-width:1440px;margin:0 auto;padding:0 30px}

.v2-appr-head{position:relative;z-index:1;text-align:center}
.v2-body .v2-appr-word{
  margin:0;color:#fff;text-align:center;
  font-family:var(--display);font-weight:500;text-transform:uppercase;letter-spacing:normal;
  font-size:clamp(52px,14vw,202px);line-height:1.1
}
.v2-appr-word span{display:inline-block}

.v2-appr-grid{
  position:relative;z-index:2;margin-top:-60px;
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px
}
.v2-appr-cell{margin:60px 0}
.v2-appr-cell:nth-child(1){grid-column:1 / span 3;grid-row:1}
.v2-appr-cell:nth-child(2){grid-column:10 / span 3;grid-row:1}
.v2-appr-cell:nth-child(3){grid-column:6 / span 3;grid-row:2}
.v2-appr-cell:nth-child(4){grid-column:3 / span 3;grid-row:3}
.v2-appr-cell:nth-child(5){grid-column:9 / span 3;grid-row:3}

.v2-step{
  display:block;padding:40px 30px;border-radius:30px;
  background:#1a1f19;border:1px solid rgba(255,255,255,.05)
}
.v2-step-ico{display:block;width:60px;height:56px;margin:0 0 30px;color:var(--green-br)}
.v2-step-ico svg{width:46px;height:46px}
.v2-body .v2-step h3{
  margin:0 0 80px;color:#fff;
  font-family:var(--display);font-size:22px;font-weight:500;line-height:1.2;letter-spacing:normal
}
.v2-step p{
  margin:0;color:rgba(255,255,255,.80);
  font-family:var(--display);font-size:17px;font-weight:400;line-height:1.6
}
/* one card white, one in the bright accent with dark type, as the
   reference does with its white and lime cards */
.v2-step.pale{background:#fff}
.v2-body .v2-step.pale h3{color:#161616}
.v2-step.pale p{color:#4e4b4b}
.v2-step.pale .v2-step-ico{color:var(--green)}
.v2-step.pick{background:var(--green-br)}
.v2-body .v2-step.pick h3{color:#161616}
.v2-step.pick p{color:#2b3a31}
.v2-step.pick .v2-step-ico{color:var(--green-deep)}

/* ---- the bright green band ---------------------------------------------
   The bright green from the accent words, used as a whole ground. Type on it
   goes to the deep green rather than black so it stays in the family, the
   accent word takes the brand green (4:1, fine at heading size), and the
   white cards inside keep their own light treatment. */
.v2-bright{background:var(--green-br);color:var(--green-deep)}
.v2-body .v2-bright .v2-h,.v2-body .v2-bright .v2-flat h3{color:var(--green-deep)}
.v2-bright .v2-h em{color:var(--green)}
.v2-bright .v2-tag{color:var(--green-deep);background:rgba(13,42,28,.09);border-color:rgba(13,42,28,.2)}
.v2-bright .v2-tag::before{background:var(--green-deep)}
.v2-bright .v2-more>span:not(.v2-circ){color:var(--green-deep)}
.v2-bright .v2-more:hover>span:not(.v2-circ){color:#0a1f15}
.v2-bright .v2-circ{background:var(--green-deep);color:var(--green-br)}
/* cards on the band: white, with no border needed against the colour */
.v2-bright .v2-flat,.v2-bright .v2-stat,.v2-bright .v2-close-side{border-color:transparent}
/* the chips inside a white card keep the pale chip, not the band version */
.v2-bright .v2-flat .v2-tag,.v2-bright .v2-stat .v2-tag{color:var(--green-d);background:var(--green-lt);border-color:rgba(28,90,61,.16)}
.v2-bright .v2-flat .v2-tag::before,.v2-bright .v2-stat .v2-tag::before{background:var(--green)}

/* the footer stays dark, it anchors the bottom of the page */
.v2-body .site-foot{background:var(--green-deep)}
/* the page wide "headings are dark on paper" rule was reaching the footer
   and painting its column titles dark on dark */
.v2-body .site-foot h4{color:var(--green-br)}

/* ---- responsive -------------------------------------------------------- */
@media (max-width:991px){
  .v2-appr-grid{margin-top:-30px}
  .v2-appr-cell,.v2-appr-cell:nth-child(n){grid-column:span 6;grid-row:auto;margin:30px 0}
}
@media (max-width:767px){
  .v2-appr-in{padding:0 16px}
  .v2-appr-grid{margin-top:-10px}
  .v2-appr-cell,.v2-appr-cell:nth-child(n){grid-column:1 / -1;margin:10px 0}
  .v2-body .v2-step h3{margin-bottom:44px}
}
@media (max-width:1040px){
  .v2-body .v2-appr-word{font-size:clamp(50px,15vw,170px);margin-top:calc(clamp(50px,15vw,170px) * -0.5)}
  .v2-hero-bot{grid-template-columns:1fr auto;row-gap:30px}
  .v2-hero-note{grid-column:1 / -1;max-width:46ch}
  .v2-cards{grid-template-columns:1fr 1fr}
  .v2-cards>*:last-child{grid-column:span 2;min-height:clamp(220px,26vw,280px)}
  .v2-cards>*:last-child .v2-card-img{width:26%;bottom:auto;top:50%;transform:translateY(-50%)}
  .v2-close{grid-template-columns:1fr}
  .v2-grid3{grid-template-columns:1fr 1fr}
  .v2-grid3>*:last-child{grid-column:span 2;height:clamp(240px,34vw,320px)}
  .v2-head{grid-template-columns:1fr auto;row-gap:14px}
  .v2-head .v2-tag{grid-column:1 / -1;margin-top:0;justify-self:start}
}
@media (max-width:760px){
  .v2-body .v2-appr-word{position:relative;top:auto;text-align:left;margin:0 0 24px;font-size:clamp(46px,13vw,92px)}
  .v2-body .v2-appr-word{position:relative;top:auto;text-align:left;margin:0 0 22px;font-size:clamp(46px,13vw,90px)}
  .v2-hero-bot{grid-template-columns:1fr;justify-items:start}
  .v2-seal{display:none}
  .v2-duo{grid-template-columns:1fr}
  .v2-stats{grid-template-columns:1fr}
  .v2-cards{grid-template-columns:1fr}
  .v2-cards>*:last-child{grid-column:auto;min-height:clamp(300px,60vw,360px)}
  .v2-cards>*:last-child .v2-card-img{width:45%;top:auto;bottom:16%;transform:none}
  .v2-grid3{grid-template-columns:1fr}
  .v2-grid3>*:last-child{grid-column:auto;height:clamp(300px,60vw,400px)}
  .v2-row{grid-template-columns:1fr auto;padding-right:12px}
  .v2-row-meta{display:none}
  .v2-head{grid-template-columns:1fr}
  .v2-more{justify-self:start}
}

/* ---- motion ------------------------------------------------------------
   Lenis drives the scroll position itself, so the native smooth behaviour
   from style.css has to be off while it is running. */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
.v2-rail{cursor:grab}
.v2-rail:active{cursor:grabbing}

/* =======================================================================
   INNER PAGES
   The same vocabulary as the home page, extended for service, area, hub,
   contact and legal pages. Built by v2kit.py.
   ======================================================================= */

/* ---- inner page hero --------------------------------------------------- */
.v2-phero{padding-bottom:clamp(40px,5vw,72px)}
.v2-crumb{
  display:inline-flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 clamp(24px,3vw,40px);
  font-size:12.5px;font-weight:500;color:var(--v2-dim);
  padding:8px 16px;border-radius:999px;background:rgba(255,255,255,.62);border:1px solid var(--v2-line)
}
.v2-crumb a{color:var(--v2-dim);transition:color .2s ease}
.v2-crumb a:hover{color:var(--green)}
.v2-crumb i{font-style:normal;opacity:.45}
.v2-crumb b{color:var(--black);font-weight:600}
.v2-ptitle .v2-tag{margin-bottom:clamp(16px,2vw,24px)}
.v2-body .v2-phero h1{
  font-size:clamp(48px,9.4vw,146px);line-height:.95;letter-spacing:-0.05em;
  max-width:none;margin:0;color:var(--black)
}
.v2-phero h1 em{font-style:normal;color:var(--green)}
.v2-phero-row{
  display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(24px,4vw,70px);
  align-items:end;margin-top:clamp(28px,3.6vw,52px)
}
.v2-phero-intro p{margin:0;font-size:clamp(16px,1.3vw,18px);line-height:1.62;color:var(--v2-dim);max-width:54ch}
.v2-phero-act{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.v2-phero-act .v2-pills{max-width:520px}
.v2-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.v2-phero-media{
  position:relative;margin-top:clamp(36px,4.6vw,64px);border-radius:22px;overflow:hidden;
  height:clamp(240px,36vw,520px);background:#ddd9d2
}
.v2-phero-media img{width:100%;height:100%;object-fit:cover}
.v2-phero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(16,20,15,.5),rgba(16,20,15,0) 50%)}
.v2-phero-cap{
  position:absolute;left:clamp(16px,2vw,26px);bottom:clamp(16px,2vw,26px);z-index:2;
  display:inline-flex;align-items:center;gap:10px;
  font-size:12.5px;font-weight:600;color:var(--black);
  background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-radius:999px;padding:9px 16px
}
.v2-phero-cap i{width:7px;height:7px;border-radius:50%;background:var(--green);flex:none}

/* coming soon notice inside the hero */
.v2-soonbar{
  margin-top:20px;padding:16px 20px;border-radius:18px;max-width:54ch;
  background:var(--green-lt);border:1px solid rgba(28,90,61,.18);
  font-size:14.5px;line-height:1.55;color:var(--green-d)
}
.v2-soonbar strong{display:block;font-family:var(--display);font-size:16px;margin-bottom:4px;color:var(--green-deep)}

/* ---- pill lists ---------------------------------------------------------- */
.v2-pills{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.v2-ink .v2-pill,.v2-forest .v2-pill{
  background:rgba(255,255,255,.06);color:var(--v2-on-dark);border-color:rgba(255,255,255,.2)
}
.v2-ink a.v2-pill:hover,.v2-forest a.v2-pill:hover{background:#fff;color:var(--black);border-color:#fff}
.v2-bright .v2-pill{background:rgba(255,255,255,.55);color:var(--green-deep);border-color:rgba(13,42,28,.18)}
.v2-bright a.v2-pill:hover{background:var(--green-deep);color:#fff;border-color:var(--green-deep)}

/* ---- what is included ---------------------------------------------------- */
.v2-ticks{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0;padding:0;list-style:none}
.v2-tick{
  display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--v2-line);
  border-radius:20px;padding:15px 22px 15px 15px;font-size:15px;line-height:1.45;color:var(--black)
}
.v2-tick-ic{
  width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--green-lt);color:var(--green)
}
.v2-tick-ic svg{width:15px;height:15px}

/* ---- image and text split ------------------------------------------------ */
.v2-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4.4vw,76px);align-items:center}
.v2-split-media{position:relative;border-radius:22px;overflow:hidden;aspect-ratio:4/3.3;background:#1c211b}
.v2-split-media img{width:100%;height:100%;object-fit:cover}
.v2-split-copy h2{font-size:clamp(28px,3.8vw,54px);line-height:1.02;letter-spacing:-0.045em;margin:18px 0 0}
.v2-split-copy > p:not(.v2-tag){margin:20px 0 0;font-size:16px;line-height:1.7}
.v2-ink .v2-split-copy > p:not(.v2-tag),.v2-forest .v2-split-copy > p:not(.v2-tag){color:var(--v2-on-dark)}
.v2-split-copy .v2-pills{margin-top:26px}
.v2-note{margin:24px 0 0;font-size:13.5px;line-height:1.6;opacity:.75}
.v2-split.rev .v2-split-media{order:2}

/* ---- faq ------------------------------------------------------------------ */
.v2-faq-in{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(28px,5vw,90px);align-items:start}
.v2-faq-side{position:sticky;top:110px}
.v2-faq-side .v2-h{margin:18px 0 0}
.v2-faq-side > p:not(.v2-tag){margin:18px 0 26px;font-size:15.5px;line-height:1.62;color:var(--v2-dim);max-width:38ch}
.v2-faq{display:flex;flex-direction:column;gap:10px}
.v2-faq details{background:#fff;border:1px solid var(--v2-line);border-radius:22px;transition:border-color .25s ease}
.v2-faq details[open]{border-color:rgba(28,90,61,.35)}
.v2-faq summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:clamp(18px,1.9vw,24px) clamp(20px,2.2vw,28px);
  font-family:var(--display);font-weight:600;font-size:clamp(16px,1.45vw,19px);line-height:1.3;color:var(--black)
}
.v2-faq summary::-webkit-details-marker{display:none}
.v2-faq summary i{
  position:relative;width:34px;height:34px;border-radius:50%;flex:none;
  background:var(--green-lt);transition:background .25s ease,transform .35s var(--spring)
}
.v2-faq summary i::before,.v2-faq summary i::after{
  content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;border-radius:2px;
  background:var(--green);transform:translate(-50%,-50%)
}
.v2-faq summary i::after{transform:translate(-50%,-50%) rotate(90deg);transition:opacity .2s ease}
.v2-faq details[open] summary i{background:var(--green);transform:rotate(180deg)}
.v2-faq details[open] summary i::before{background:#fff}
.v2-faq details[open] summary i::after{opacity:0}
.v2-faq summary:focus-visible{outline:2.5px solid var(--green);outline-offset:3px;border-radius:22px}
.v2-faq-a{padding:0 clamp(20px,2.2vw,28px) clamp(20px,2.2vw,26px)}
.v2-faq-a p{margin:0;font-size:15.5px;line-height:1.68;color:var(--v2-dim);max-width:64ch}

/* ---- quote form, on the forest band --------------------------------------- */
.v2-qform{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,5vw,80px);align-items:start}
.v2-qform-side .v2-h{margin:18px 0 0}
.v2-qform-side > p:not(.v2-tag){margin:18px 0 0;color:var(--v2-on-dark);font-size:16px;line-height:1.62;max-width:40ch}
.v2-qform-facts{margin:28px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.v2-qform-facts li{display:flex;align-items:center;gap:12px;font-size:15px;font-weight:500;color:#fff}
.v2-qform-facts svg{width:15px;height:15px;color:var(--green-br);flex:none}
.v2-form{
  display:grid;grid-template-columns:1fr 1fr;gap:16px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);
  border-radius:24px;padding:clamp(22px,2.8vw,36px)
}
.v2-span{grid-column:1 / -1}
.v2-field label{display:block;margin:0 0 8px;font-size:12.5px;font-weight:600;letter-spacing:.02em;color:var(--v2-on-dark)}
.v2-field input,.v2-field select,.v2-field textarea{
  width:100%;display:block;font:inherit;font-size:15px;color:#fff;
  background-color:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);border-radius:14px;
  padding:14px 16px;transition:border-color .2s ease,background-color .2s ease;appearance:none
}
.v2-field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236fc79b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:16px;padding-right:42px
}
.v2-field select option{color:#10140f;background:#fff}
.v2-field textarea{resize:vertical;min-height:110px}
.v2-field input::placeholder,.v2-field textarea::placeholder{color:rgba(255,255,255,.42)}
.v2-field input:focus,.v2-field select:focus,.v2-field textarea:focus{outline:none;border-color:var(--green-br);background-color:rgba(255,255,255,.12)}
.v2-form .btn.wide{margin-top:6px}
.v2-form-note{margin:14px 0 0;font-size:12.5px;line-height:1.55;color:var(--v2-on-dark2)}

/* ---- photo cards used as links -------------------------------------------- */
.v2-grid2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.4vw,20px)}
.v2-badge{
  position:absolute;left:18px;top:18px;z-index:3;
  font-size:10.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  padding:7px 12px;border-radius:999px;background:#fff;color:var(--green-d)
}

/* ---- plain boxes ---------------------------------------------------------- */
.v2-box{
  background:#fff;border:1px solid var(--v2-line);border-radius:22px;
  padding:clamp(24px,2.6vw,34px);display:flex;flex-direction:column;gap:14px
}
.v2-box h3{font-size:clamp(19px,1.8vw,24px);line-height:1.15}
.v2-box p:not(.v2-tag){margin:0;font-size:15px;line-height:1.62;color:var(--v2-dim)}
.v2-box-ic{
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  background:var(--green-lt);color:var(--green);margin-bottom:8px
}
.v2-box-ic svg{width:22px;height:22px}
.v2-box.pick{background:var(--green);border-color:var(--green)}
.v2-body .v2-box.pick h3{color:#fff}
.v2-box.pick p:not(.v2-tag){color:rgba(255,255,255,.84)}
.v2-box.pick .v2-box-ic{background:rgba(255,255,255,.16);color:#fff}
.v2-ink .v2-box,.v2-forest .v2-box{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)}
.v2-body .v2-ink .v2-box h3,.v2-body .v2-forest .v2-box h3{color:#fff}
.v2-ink .v2-box p:not(.v2-tag),.v2-forest .v2-box p:not(.v2-tag){color:var(--v2-on-dark)}
.v2-ink .v2-box-ic,.v2-forest .v2-box-ic{background:rgba(111,199,155,.14);color:var(--green-br)}
.v2-bright .v2-box{border-color:transparent}

/* a suburb list inside a box */
.v2-subs{margin:6px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.v2-subs li{font-size:12.5px;font-weight:600;padding:6px 12px;border-radius:999px;background:var(--green-lt);color:var(--green-d)}
.v2-ink .v2-subs li,.v2-forest .v2-subs li{background:rgba(255,255,255,.08);color:var(--v2-on-dark)}

/* ---- prose, for the legal pages -------------------------------------------- */
.v2-prose{
  max-width:1100px;margin:0 auto;background:#fff;border:1px solid var(--v2-line);border-radius:26px;
  padding:clamp(28px,5vw,72px)
}
.v2-prose h2{font-size:clamp(22px,2.2vw,30px);line-height:1.15;letter-spacing:-0.03em;margin:clamp(32px,3.6vw,48px) 0 14px}
.v2-prose h2:first-child{margin-top:0}
.v2-prose h3{font-size:18px;margin:26px 0 10px}
.v2-prose p,.v2-prose li{font-size:16px;line-height:1.75;color:#2b302a}
.v2-prose p{margin:0 0 14px}
.v2-prose ul{margin:0 0 16px;padding-left:20px;list-style:disc}
.v2-prose li{margin:0 0 6px}
.v2-prose a{color:var(--green);text-decoration:underline;text-underline-offset:3px}
.v2-prose-meta{font-size:13.5px;color:var(--v2-dim);margin:0 0 28px}

/* ---- contact rows ---------------------------------------------------------- */
.v2-info{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.v2-info li{
  display:flex;align-items:center;gap:16px;background:#fff;border:1px solid var(--v2-line);
  border-radius:20px;padding:16px 20px
}
.v2-info-ic{width:44px;height:44px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--green-lt);color:var(--green)}
.v2-info-ic svg{width:19px;height:19px}
.v2-info b{display:block;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--v2-dim2)}
.v2-info .v{display:block;font-family:var(--display);font-size:18px;font-weight:600;color:var(--black);margin-top:2px;transition:color .2s ease}
.v2-info a.v:hover{color:var(--green)}
.v2-info .n{display:block;font-size:13.5px;color:var(--v2-dim);margin-top:2px}

/* ticks and body copy on the dark bands, and copy colour on paper */
.v2-ink .v2-tick,.v2-forest .v2-tick{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:#fff}
.v2-ink .v2-tick-ic,.v2-forest .v2-tick-ic{background:rgba(111,199,155,.16);color:var(--green-br)}
.v2-split-copy > p:not(.v2-tag){color:var(--v2-dim)}

/* a marker inside a flex column card would otherwise stretch to full width */
.v2-box > .v2-tag,.v2-flat > .v2-tag,.v2-tri-flat > .v2-tag,.v2-close-main > .v2-tag{align-self:flex-start}

/* a lead paragraph under a section heading */
.v2-lead{margin:0 0 clamp(24px,3vw,40px);max-width:66ch;font-size:clamp(15.5px,1.2vw,17px);line-height:1.66;color:var(--v2-dim)}
.v2-ink .v2-lead,.v2-forest .v2-lead{color:var(--v2-on-dark)}
.v2-bright .v2-lead{color:rgba(13,42,28,.82)}
.v2-bright .v2-box p:not(.v2-tag){color:var(--v2-dim)}

/* ---- inner page responsive ------------------------------------------------- */
@media (max-width:1040px){
  .v2-phero-row,.v2-split,.v2-faq-in,.v2-qform{grid-template-columns:1fr}
  .v2-split.rev .v2-split-media{order:0}
  .v2-faq-side{position:static}
  .v2-ticks{grid-template-columns:1fr}
}
@media (max-width:760px){
  .v2-grid2{grid-template-columns:1fr}
  .v2-form{grid-template-columns:1fr}
}

/* the marker chip keeps its own type whatever column it sits in. Colour is
   left to the band rules, only the size and spacing are pinned here. */
.v2-body p.v2-tag{font-size:10.5px;line-height:1.25;font-weight:700;letter-spacing:.14em;max-width:none}