/* ============================================================
   Erf. Gauteng property services.
   PALETTE: green, black, white, off-white. No pink.
   Layout language: inset rounded shells, alternating heading
   rows, white cards with circular arrows, asymmetric dark
   photo tiles, inline image chips, centred big-type blocks.
   ============================================================ */

:root{
  --black:#10140f;
  --black-2:#1a201a;
  --white:#ffffff;
  --off:#f1f0ec;
  --green:#1c5a3d;
  --green-d:#123c28;
  --green-deep:#0d2a1c;
  --green-br:#6fc79b;
  --green-lt:#e7f0e9;

  --muted:rgba(16,20,15,.60);
  --muted-2:rgba(16,20,15,.60);
  --on-dark:rgba(255,255,255,.78);
  --on-dark-2:rgba(255,255,255,.55);
  --line:rgba(16,20,15,.12);
  --line-d:rgba(255,255,255,.18);

  --maxw:1440px;
  --gut:clamp(16px,2.6vw,34px);
  --inset:clamp(10px,1.1vw,16px);
  --r:12px;
  --r-lg:18px;
  --r-xl:26px;
  --r-shell:clamp(20px,2.4vw,34px);
  --r-pill:999px;

  --sans:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --display:"Poppins","Manrope",system-ui,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html,body{margin:0;padding:0;overflow-x:clip;max-width:100vw}

body{
  font-family:var(--sans);color:var(--black);background:var(--off);
  font-size:15px;line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
ul{margin:0;padding:0;list-style:none}
p{margin:0}

h1,h2,h3,h4{
  margin:0;font-family:var(--display);font-weight:700;
  letter-spacing:-0.045em;line-height:.96;color:var(--black);text-wrap:balance;
}
h1{font-size:clamp(46px,8.4vw,132px);letter-spacing:-0.055em;line-height:.9}
h2{font-size:clamp(34px,5.6vw,84px);letter-spacing:-0.05em;line-height:.94}
h3{font-size:clamp(19px,1.7vw,27px);letter-spacing:-0.035em;line-height:1.1}
h4{font-size:15px;font-weight:700;letter-spacing:-0.02em;line-height:1.2}
.on-dark h1,.on-dark h2,.on-dark h3{color:var(--white)}
h1 em,h2 em,h3 em{font-style:normal;color:var(--green)}
/* every dark surface needs the bright green, or the accent word disappears
   into the overlay. Keep this list in step with any new dark component. */
.on-dark h1 em,.on-dark h2 em,.on-dark h3 em,
.hero h1 em,.hero h2 em,
.phead h1 em,.phead h2 em,
.ctafull h1 em,.ctafull h2 em,
.qband h2 em,
.tile h3 em,
.dcard h3 em,
.media-cap h3 em,
.statcard-box em,
.cside h2 em,
.bg-forest h1 em,.bg-forest h2 em,.bg-forest h3 em,
.bg-ink h1 em,.bg-ink h2 em,.bg-ink h3 em,
.cblock-copy.green h2 em,
.qcard.dark h3 em{color:var(--green-br)}

:focus-visible{outline:2.5px solid var(--green);outline-offset:3px;border-radius:3px}
::selection{background:rgba(28,90,61,.16)}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);width:100%}
.sec{padding-block:clamp(54px,6.4vw,104px)}
.sec-tight{padding-block:clamp(36px,4vw,60px)}
.bg-paper{background:var(--white)}
.bg-bone{background:var(--off)}
.bg-mint,.bg-sand{background:var(--green-lt)}
.bg-forest{background:var(--green-deep);color:var(--white)}
.bg-ink{background:var(--black);color:var(--white)}

/* rounded shell: a section that floats as a card on the page */
.shell{
  margin:var(--inset);border-radius:var(--r-shell);overflow:hidden;position:relative;
}

/* ---------- kicker / label ---------- */
.label{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--display);font-size:13px;font-weight:600;letter-spacing:-0.015em;
  color:var(--green-d);background:var(--green-lt);
  padding:10px 18px 10px 15px;border-radius:var(--r-pill);line-height:1;
  border:1.5px solid rgba(28,90,61,.18);
}
/* dot reads as a deliberate mark, not a bullet. Ring is a border, not a shadow. */
.label::before{
  content:'';width:15px;height:15px;border-radius:50%;flex:none;
  background:var(--green);background-clip:content-box;
  border:4px solid rgba(28,90,61,.16);box-sizing:border-box;
}
/* on a tinted section the pill flips to white so it still has definition */
.bg-mint .label,.bg-sand .label{background:var(--white);border-color:rgba(28,90,61,.14)}
.label.on-dark{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.22);color:var(--white)}
.label.on-dark::before{background:var(--green-br);border-color:rgba(111,199,155,.28)}
.label.solid{background:var(--black);border-color:var(--black);color:var(--white)}
.label.solid::before{background:var(--green-br);border-color:rgba(111,199,155,.26)}
.kick{font-size:14px;font-weight:600;color:var(--on-dark);letter-spacing:-0.01em}

/* ---------- heading rows: big heading one side, small copy the other ---------- */
.headrow{
  display:grid;grid-template-columns:1.3fr .7fr;gap:clamp(20px,3vw,60px);
  align-items:start;margin-bottom:clamp(26px,3vw,44px);
}
.headrow h2{max-width:14ch}
.headrow p{font-size:14px;line-height:1.6;color:var(--muted);max-width:42ch;padding-top:10px}
.headrow.rev{grid-template-columns:.7fr 1.3fr}
.headrow.rev p{order:1;text-align:left}
.headrow.rev h2{order:2;justify-self:end;text-align:right;max-width:15ch}
.on-dark .headrow p,.bg-forest .headrow p{color:var(--on-dark)}
.headrow .label{margin-bottom:18px}

.headmid{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:900px;margin:0 auto clamp(28px,3.2vw,48px)}
.headmid .label{margin-bottom:18px}
.headmid p{margin-top:18px;max-width:62ch;font-size:14.5px;color:var(--muted);line-height:1.62}
.on-dark .headmid p{color:var(--on-dark)}

.lead{font-size:clamp(14.5px,1.02vw,16.5px);line-height:1.62;color:var(--muted)}
.on-dark .lead,.bg-forest .lead,.bg-ink .lead{color:var(--on-dark)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:11px;padding:7px 7px 7px 21px;
  border-radius:var(--r-pill);font-size:13.5px;font-weight:700;line-height:1;
  background:var(--black);color:var(--white);border:1px solid var(--black);
  transition:background .22s var(--ease),border-color .22s var(--ease),color .22s var(--ease);
}
.btn .arw{
  display:grid;place-items:center;width:30px;height:30px;flex:none;border-radius:50%;
  background:var(--white);color:var(--black);transition:transform .3s var(--spring);
}
.btn .arw svg{width:13px;height:13px}
.btn:hover .arw{transform:rotate(45deg)}
/* base hover, so every button gives feedback. Variants below override it. */
.btn:hover{background:var(--green);border-color:var(--green)}
.btn.melon{background:var(--black);border-color:var(--black)}
.btn.melon:hover{background:var(--green);border-color:var(--green)}
.btn.green{background:var(--green);border-color:var(--green)}
.btn.green .arw{background:var(--white);color:var(--green)}
.btn.green:hover{background:var(--green-d);border-color:var(--green-d)}
.btn.light{background:var(--white);color:var(--black);border-color:var(--white)}
.btn.light .arw{background:var(--black);color:var(--white)}
.btn.light:hover{background:var(--green-br);color:var(--green-deep);border-color:var(--green-br)}
.btn.light:hover .arw{background:var(--green-deep);color:var(--green-br)}
.btn.line{background:transparent;color:var(--black);border-color:var(--line)}
.btn.line .arw{background:var(--black);color:var(--white)}
.btn.line:hover{border-color:var(--black)}
.btn.line-d{background:transparent;color:var(--white);border-color:var(--line-d)}
.btn.line-d .arw{background:rgba(255,255,255,.18);color:var(--white)}
.btn.line-d:hover{background:rgba(255,255,255,.12)}
.btn.flat{padding:13px 24px}
.btn.flat .arw{display:none}
.btn.wide{width:100%;justify-content:space-between;padding-left:24px}
.btn-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}

.circ{
  display:grid;place-items:center;width:44px;height:44px;border-radius:50%;flex:none;
  background:var(--black);color:var(--white);
  transition:transform .3s var(--spring),background .22s ease,color .22s ease;
}
.circ svg{width:15px;height:15px}
.circ.lime,.circ.light{background:var(--white);color:var(--black)}
.circ.outline{background:transparent;border:1.5px solid rgba(255,255,255,.55);color:var(--white)}
.circ.outline:hover{background:var(--white);color:var(--black)}
.circ.lg{width:64px;height:64px}
.circ.lg svg{width:20px;height:20px}

/* ---------- header (sits inside the hero shell) ---------- */
.site-head{position:absolute;top:0;left:0;right:0;z-index:60;padding:clamp(14px,1.6vw,22px) clamp(14px,1.8vw,26px)}
.site-head.fixed{position:fixed;padding:clamp(12px,1.4vw,18px) clamp(14px,1.8vw,26px)}
.site-head.stuck{background:rgba(13,42,28,.95);backdrop-filter:blur(12px);padding-top:10px;padding-bottom:10px}
.head-in{display:flex;align-items:center;gap:16px}

.brand{display:inline-flex;align-items:center;gap:10px;flex:none;color:var(--white)}
.brand-mark{width:38px;height:38px;border-radius:50%;background:var(--white);display:grid;place-items:center;flex:none;transition:transform .35s var(--spring)}
.brand-mark svg{width:19px;height:19px}
.brand:hover .brand-mark{transform:rotate(-10deg) scale(1.08)}
.brand-name{font-family:var(--display);font-size:22px;font-weight:700;letter-spacing:-0.06em;line-height:1}
.brand-name i{color:var(--green-br);font-style:normal}
.brand-reg{font-size:9px;font-weight:700;letter-spacing:.06em;color:var(--on-dark-2);align-self:flex-start;margin-top:3px}

.nav{
  display:flex;align-items:center;gap:3px;margin:0 auto;
  background:rgba(255,255,255,.12);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.2);padding:5px;border-radius:var(--r-pill);
}
.nav a{
  font-size:13.5px;font-weight:600;color:rgba(255,255,255,.88);
  padding:10px 19px;border-radius:var(--r-pill);transition:background .2s ease,color .2s ease;
}
.nav a:hover{background:rgba(255,255,255,.18);color:var(--white)}
.nav a[aria-current="page"]{background:var(--white);color:var(--black);font-weight:700}

.head-right{display:flex;align-items:center;gap:10px;flex:none}
.head-tel{font-size:13.5px;font-weight:700;color:var(--white);padding:10px 16px;border-radius:var(--r-pill);background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2)}
.head-tel:hover{background:var(--white);color:var(--black)}

.burger{
  display:none;width:46px;height:46px;border:1px solid rgba(255,255,255,.22);border-radius:50%;
  background:rgba(255,255,255,.14);backdrop-filter:blur(10px);padding:0;place-items:center;flex:none;
  transition:background .2s ease,border-color .2s ease;
}
.burger:hover{background:rgba(255,255,255,.24)}
.burger span{display:block;width:18px;height:2px;background:var(--white);margin:3px auto;border-radius:2px;transition:transform .25s var(--ease),opacity .2s ease}
.site-head.open .burger{background:var(--white)}
.site-head.open .burger span{background:var(--black)}
.site-head.open .burger span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.site-head.open .burger span:nth-child(2){opacity:0}
.site-head.open .burger span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

/* ---------- hero: inset rounded photo shell ---------- */
.hero{
  position:relative;margin:var(--inset);border-radius:var(--r-shell);overflow:hidden;
  min-height:clamp(560px,90vh,900px);display:flex;align-items:flex-end;background:var(--green-deep);
}
.hero-bg{position:absolute;inset:0}
.hero-bg img{width:100%;height:100%;object-fit:cover}
.hero-bg::after{
  content:'';position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(13,42,28,.72) 0%,rgba(13,42,28,.20) 34%,rgba(13,42,28,.42) 66%,rgba(13,42,28,.94) 100%),
    linear-gradient(110deg,rgba(28,90,61,.38) 0%,rgba(13,42,28,.08) 58%,rgba(13,42,28,.18) 100%);
}
.hero-in{position:relative;z-index:2;width:100%;padding:clamp(120px,13vw,170px) clamp(20px,3vw,48px) clamp(24px,2.6vw,40px)}
.hero-kick{color:var(--on-dark);font-size:clamp(14px,1.2vw,18px);font-weight:600;letter-spacing:-0.01em;margin-bottom:clamp(8px,1vw,14px)}

/* live availability pill with a pulsing dot */
.livepill{
  display:inline-flex;align-items:center;gap:9px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.24);
  backdrop-filter:blur(10px);color:var(--white);
  padding:10px 18px;border-radius:var(--r-pill);
  font-size:13px;font-weight:700;letter-spacing:-0.01em;line-height:1;
  margin-bottom:clamp(12px,1.4vw,18px);
}
.livepill i{width:7px;height:7px;border-radius:50%;background:var(--green-br);flex:none;animation:blip 2.4s ease-in-out infinite}
@keyframes blip{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.42;transform:scale(.72)}}
.hero h1{color:var(--white);max-width:11ch}
.hero-copy{
  display:grid;grid-template-columns:1fr minmax(260px,420px);gap:clamp(20px,3vw,54px);
  align-items:end;margin-top:clamp(18px,2.2vw,30px);
}
.hero-sub{font-size:15px;line-height:1.62;color:var(--on-dark);max-width:44ch}
.hero-actions{display:flex;justify-content:flex-end;align-items:center;gap:10px}

/* stat card + small image chip sitting bottom left */
.hero-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-top:clamp(24px,3vw,44px);flex-wrap:wrap}
.statcard{
  display:flex;align-items:stretch;gap:10px;
}
.statcard-box{
  background:rgba(255,255,255,.14);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.2);
  border-radius:var(--r-lg);padding:18px 22px;max-width:270px;color:var(--white);
}
.statcard-box b{display:block;font-family:var(--display);font-size:clamp(20px,1.9vw,27px);font-weight:700;letter-spacing:-0.04em;line-height:1}
.statcard-box span{display:block;margin-top:8px;font-size:12.5px;line-height:1.45;color:var(--on-dark)}
.statcard-img{width:clamp(62px,6vw,86px);border-radius:var(--r-lg);overflow:hidden;flex:none;border:1px solid rgba(255,255,255,.22)}
.statcard-img img{width:100%;height:100%;object-fit:cover}

/* ---------- marquee ---------- */
.strip{background:var(--black);color:var(--white);padding:15px 0;overflow:hidden;margin:0 var(--inset);border-radius:var(--r-pill)}
.strip-track{display:flex;width:max-content;animation:mq 42s linear infinite}
.strip:hover .strip-track{animation-play-state:paused}
.strip-track span{
  display:inline-flex;align-items:center;gap:18px;padding:0 20px;
  font-family:var(--display);font-size:14.5px;font-weight:600;letter-spacing:-0.02em;
  white-space:nowrap;color:rgba(255,255,255,.9);
}
.strip-track span::after{content:'';width:6px;height:6px;border-radius:50%;background:var(--green-br);flex:none}
@keyframes mq{to{transform:translateX(-50%)}}

/* ---------- white cards with image + circular arrow ---------- */
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.pgrid.four{grid-template-columns:repeat(4,1fr)}
.pcard2{
  position:relative;background:var(--white);border-radius:var(--r-xl);padding:12px 12px 20px;
  display:flex;flex-direction:column;transition:transform .35s var(--ease);
}
.pcard2:hover{transform:translateY(-5px)}
/* a real anchor covers the whole card, so the click target cannot be broken
   by a transform on an inner element the way a stretched ::after can */
.pcard2{cursor:pointer}
.pcard2 .card-hit{position:absolute;inset:0;z-index:4;border-radius:var(--r-xl)}
.pcard2 .card-hit:focus-visible{outline:2.5px solid var(--green);outline-offset:3px}
.pcard2-img{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/3;background:var(--green-lt)}
.pcard2-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.pcard2:hover .pcard2-img img{transform:scale(1.05)}
.pcard2-tag{
  position:absolute;top:12px;left:12px;z-index:2;
  background:rgba(255,255,255,.92);backdrop-filter:blur(6px);color:var(--black);
  font-size:11.5px;font-weight:700;padding:7px 13px;border-radius:var(--r-pill);
}
.pcard2-body{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;padding:18px 10px 0}
.pcard2-body h3{margin-bottom:6px}
.pcard2-body p{font-size:13px;color:var(--muted);line-height:1.5}
.pcard2-body .circ{width:42px;height:42px}
/* rotate the icon, NOT the .circ itself. A transform on .circ would make it
   the containing block for its own ::after, collapsing the stretched link. */
.pcard2:hover .circ{background:var(--green);transform:none}
.pcard2:hover .circ svg{transform:rotate(45deg)}

/* ---------- dark photo tiles, asymmetric ---------- */
.tiles{display:grid;grid-template-columns:1.55fr 1fr;gap:12px}
.tiles.rev{grid-template-columns:1fr 1.55fr}
.tile{
  position:relative;border-radius:var(--r-xl);overflow:hidden;min-height:clamp(230px,24vw,320px);
  display:flex;align-items:flex-end;background:var(--green-deep);
}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.tile::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,42,28,.30) 0%,rgba(13,42,28,.14) 40%,rgba(13,42,28,.88) 100%)}
.tile:hover img{transform:scale(1.05)}
.tile-in{position:relative;z-index:2;padding:clamp(20px,2vw,30px);width:100%;color:var(--white)}
.tile-in h3{
  color:var(--white);font-size:clamp(24px,2.7vw,44px);letter-spacing:-0.05em;line-height:.98;
  font-weight:700;margin-bottom:8px;
}
.tile-in p{font-size:13.5px;line-height:1.55;color:var(--on-dark);max-width:40ch}
.tile-arw{position:absolute;top:clamp(14px,1.4vw,20px);right:clamp(14px,1.4vw,20px);z-index:3}
.tile:hover .tile-arw .circ{background:var(--white);color:var(--black);transform:rotate(45deg)}

/* ---------- colour block split (image beside a solid panel) ---------- */
.cblock{display:grid;grid-template-columns:1.1fr .9fr;min-height:clamp(380px,44vw,560px);margin:0 var(--inset);border-radius:var(--r-shell);overflow:hidden}
.cblock-media{position:relative;overflow:hidden}
.cblock-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cblock-copy{background:var(--white);padding:clamp(28px,3.4vw,58px);display:flex;flex-direction:column;justify-content:center}
.cblock-copy .label{margin-bottom:22px;align-self:flex-start}
.cblock-copy.green{background:var(--green-deep);color:var(--white)}
.cblock-copy.green .lead,.cblock-copy.green p{color:var(--on-dark)}
.cblock-copy .areas li{background:var(--white)}
.cblock-copy.green .stat{background:rgba(255,255,255,.09)}
.cblock-copy.green .stat b{color:var(--white)}
.cblock-copy.green .stat span{color:var(--on-dark)}
.stackwords{margin-top:4px}
.stackwords li{
  font-family:var(--display);font-size:clamp(28px,3.4vw,54px);font-weight:700;
  letter-spacing:-0.05em;line-height:1.04;color:var(--black);
}
.cblock-copy.green .stackwords li{color:var(--white)}
.stackwords li:first-child{color:var(--green)}
.cblock-copy.green .stackwords li:first-child{color:var(--green-br)}

/* ---------- inline image chip inside a big sentence ---------- */
.bigsay{
  font-family:var(--display);font-size:clamp(22px,2.9vw,44px);font-weight:600;
  letter-spacing:-0.04em;line-height:1.18;max-width:22ch;
}
.inchip{
  display:inline-block;vertical-align:middle;width:clamp(58px,6.4vw,104px);
  height:clamp(34px,3.6vw,58px);border-radius:var(--r-pill);object-fit:cover;
  margin:0 6px;transform:translateY(-3px);
}

/* media block with play-style circle */
.mediablock{position:relative;border-radius:var(--r-xl);overflow:hidden;background:var(--green-lt)}
.mediablock img{width:100%;height:100%;object-fit:cover;display:block}
.mediablock .circ{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(255,255,255,.94);color:var(--black)}
.mediablock:hover .circ{background:var(--white);transform:translate(-50%,-50%) scale(1.08)}
.mediablock.tallish{aspect-ratio:16/10}
.mediablock.wide{aspect-ratio:21/9}

/* caption laid over a media block so a wide photo carries information */
.media-tag{position:absolute;top:clamp(16px,1.8vw,26px);left:clamp(16px,1.8vw,26px);z-index:3}
.media-cap{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:clamp(24px,3.2vw,48px);
  background:linear-gradient(transparent,rgba(13,42,28,.35) 38%,rgba(13,42,28,.92));
  color:var(--white);display:flex;align-items:flex-end;justify-content:space-between;
  gap:clamp(18px,2.4vw,40px);flex-wrap:wrap;
}
.media-cap h3{
  color:var(--white);font-size:clamp(23px,3vw,48px);letter-spacing:-0.05em;
  line-height:.98;max-width:17ch;
}
.media-cap p{margin-top:12px;font-size:14px;line-height:1.55;color:var(--on-dark);max-width:44ch}
.media-cap .chips{justify-content:flex-end}
.media-cap .chip{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.24);color:var(--white)}
.media-cap .chip:hover{background:var(--white);border-color:var(--white);color:var(--black)}
@media (max-width:760px){
  .mediablock.wide{aspect-ratio:4/3}
  .media-cap{padding:20px}
  .media-cap .chips{display:none}
}

/* ---------- dark cards with badge ---------- */
.dcards{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:12px}
.dcard{
  position:relative;border-radius:var(--r-xl);overflow:hidden;background:var(--green-deep);
  color:var(--white);padding:clamp(24px,2.4vw,34px);display:flex;flex-direction:column;
  min-height:clamp(240px,24vw,320px);transition:transform .35s var(--ease);
}
.dcard:nth-child(2){background:var(--black)}
.dcard:nth-child(3){background:var(--green-d)}
.dcard:hover{transform:translateY(-5px)}
/* background wash: must be excluded from the positioning rule below,
   otherwise it drops into normal flow and renders as a floating box */
.dcard-bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.dcard-bg img{width:100%;height:100%;object-fit:cover;opacity:.30}
.dcard-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.28) 0%,rgba(0,0,0,.74) 100%)}
.dcard > *:not(.dcard-bg){position:relative;z-index:2}
.dcard h3{color:var(--white);font-size:clamp(23px,2.3vw,34px);letter-spacing:-0.045em;margin-bottom:12px}
.dcard p{font-size:13.5px;line-height:1.58;color:var(--on-dark);flex:1}
.badge{
  display:inline-flex;align-items:center;gap:8px;margin-top:22px;align-self:flex-start;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2);
  padding:8px 14px;border-radius:var(--r-pill);font-size:11.5px;font-weight:700;color:var(--white);
}
.badge svg{width:13px;height:13px}

/* ---------- coming soon ---------- */
.soon{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--black);color:var(--white);
  font-family:var(--display);font-size:11.5px;font-weight:600;letter-spacing:-0.01em;
  padding:8px 15px;border-radius:var(--r-pill);line-height:1;white-space:nowrap;
}
.soon::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--green-br);flex:none}
.tile .soon{position:absolute;top:clamp(14px,1.4vw,20px);left:clamp(14px,1.4vw,20px);z-index:3}
.pcard2-img .soon{position:absolute;top:12px;left:12px;z-index:3}
.soon.on-light{background:var(--white);color:var(--black);border:1.5px solid rgba(28,90,61,.18)}
.soon.on-light::before{background:var(--green)}

.soonbar{
  background:var(--green-lt);border:1.5px solid rgba(28,90,61,.18);
  border-radius:var(--r-lg);padding:20px 24px;font-size:14px;line-height:1.6;color:var(--black);
}
.soonbar strong{
  display:block;font-family:var(--display);font-size:17px;font-weight:600;
  letter-spacing:-0.03em;margin-bottom:6px;color:var(--black);
}
.bg-forest .soonbar,.phead .soonbar{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.22);color:var(--on-dark)}
.bg-forest .soonbar strong,.phead .soonbar strong{color:var(--white)}
.phead .soonbar{max-width:52ch;margin-top:clamp(20px,2.2vw,28px)}

/* ---------- filter chip row ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.chiprow{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:clamp(20px,2.4vw,32px)}
.chip{
  display:inline-flex;align-items:center;gap:6px;padding:10px 18px;font-size:13px;font-weight:600;
  background:var(--white);color:var(--black);border:1px solid var(--line);border-radius:var(--r-pill);
  transition:border-color .2s ease,background .2s ease,color .2s ease,transform .25s var(--spring);
}
.chip:hover{background:var(--black);border-color:var(--black);color:var(--white);transform:translateY(-2px)}
.chip.on{background:var(--black);border-color:var(--black);color:var(--white)}
.bg-forest .chip,.bg-ink .chip,.tile .chip{background:rgba(255,255,255,.14);border-color:var(--line-d);color:var(--white)}
.bg-forest .chip:hover,.bg-ink .chip:hover,.tile .chip:hover{background:var(--white);border-color:var(--white);color:var(--black)}
.phead .chip{background:rgba(255,255,255,.14);border-color:var(--line-d);color:var(--white)}
.phead .chip:hover{background:var(--white);border-color:var(--white);color:var(--black)}

/* ---------- split feature ---------- */
.feat{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,3.2vw,60px);align-items:center}
.feat-media{border-radius:var(--r-xl);overflow:hidden;position:relative;min-height:clamp(290px,32vw,480px);background:var(--green-lt)}
.feat-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.feat-media:hover img{transform:scale(1.04)}
.feat.rev .feat-media{order:2}
.feat-copy .label{margin-bottom:20px}
.feat-copy h2+p{margin-top:20px}
.feat-copy .ticks{margin-top:24px}
.feat-copy .btn-row{margin-top:28px}

/* tick lists */
.ticks li{display:flex;gap:12px;align-items:flex-start;padding:11px 0;font-size:14.5px;line-height:1.5}
.ticks li+li{border-top:1px solid var(--line)}
.on-dark .ticks li+li,.bg-forest .ticks li+li,.bg-ink .ticks li+li{border-top-color:var(--line-d)}
.ticks .ic{width:21px;height:21px;border-radius:50%;background:var(--green);color:var(--white);display:grid;place-items:center;flex:none;margin-top:3px}
.ticks .ic svg{width:10px;height:10px}
.ticks.no .ic{background:var(--black)}
.bg-forest .ticks .ic{background:var(--green-br);color:var(--green-deep)}

/* stats row */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:30px}
.stat{background:var(--green-lt);border-radius:var(--r-lg);padding:20px}
.bg-forest .stat,.bg-ink .stat{background:rgba(255,255,255,.09)}
.stat b{display:block;font-family:var(--display);font-size:clamp(22px,2.2vw,32px);font-weight:700;letter-spacing:-0.05em;line-height:1;color:var(--green)}
.bg-forest .stat b,.bg-ink .stat b{color:var(--white)}
.stat span{display:block;margin-top:9px;font-size:12.5px;line-height:1.42;color:var(--muted)}
.bg-forest .stat span,.bg-ink .stat span{color:var(--on-dark)}

/* ---------- areas ---------- */
.areas{display:flex;flex-wrap:wrap;gap:8px}
.areas li{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-pill);
  padding:11px 19px;font-size:13.5px;font-weight:600;
  transition:border-color .2s ease,background .2s ease,color .2s ease,transform .25s var(--spring);
}
.areas li:hover{border-color:var(--black);background:var(--black);color:var(--white);transform:translateY(-2px)}

/* ---------- quote cards ---------- */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.qcard{
  background:var(--white);border-radius:var(--r-xl);padding:28px 26px;
  display:flex;flex-direction:column;transition:transform .35s var(--ease);
}
.qcard:hover{transform:translateY(-4px)}
.qcard.dark{background:var(--green-deep);color:var(--white)}
.qmark{font-family:var(--display);font-size:42px;line-height:.6;color:var(--green);margin-bottom:18px;font-weight:700}
.qcard.dark .qmark{color:var(--green-br)}
.qcard p{font-size:14.5px;line-height:1.62;color:var(--muted);flex:1}
.qcard.dark p{color:var(--on-dark)}
.qcard footer{display:flex;align-items:center;gap:11px;margin-top:22px}
.qavatar{width:38px;height:38px;border-radius:50%;background:var(--green-lt);color:var(--green-d);display:grid;place-items:center;font-family:var(--display);font-size:14px;font-weight:700;flex:none}
.qcard.dark .qavatar{background:rgba(255,255,255,.16);color:var(--white)}
.qcard footer b{display:block;font-size:14px;font-weight:700}
.qcard footer span{font-size:12.5px;color:var(--muted-2)}
.qcard.dark footer span{color:var(--on-dark-2)}

/* ---------- info cards ---------- */
.cards{display:grid;gap:12px}
.c2{grid-template-columns:repeat(2,1fr)}
.c3{grid-template-columns:repeat(3,1fr)}
.c4{grid-template-columns:repeat(4,1fr)}
.icard{
  background:var(--white);border-radius:var(--r-xl);padding:28px 26px 30px;
  display:flex;flex-direction:column;transition:transform .35s var(--ease);
}
.icard:hover{transform:translateY(-4px)}
.bg-forest .icard,.bg-ink .icard{background:rgba(255,255,255,.07);color:var(--white)}
.icard h3{margin-bottom:11px}
.icard p{font-size:14.5px;color:var(--muted);line-height:1.62}
.bg-forest .icard p,.bg-ink .icard p{color:var(--on-dark)}
.ico{
  width:46px;height:46px;border-radius:50%;background:var(--green-lt);color:var(--green);
  display:grid;place-items:center;margin-bottom:22px;flex:none;
  transition:background .25s ease,color .25s ease,transform .35s var(--spring);
}
.ico svg{width:21px;height:21px}
.icard:hover .ico{background:var(--green);color:var(--white);transform:rotate(-8deg)}
.bg-forest .ico,.bg-ink .ico{background:rgba(255,255,255,.12);color:var(--white)}

/* ---------- forms ---------- */
label.fl{display:block;font-size:12px;font-weight:700;margin-bottom:8px;color:var(--muted)}
.on-dark label.fl,.bg-forest label.fl,.bg-ink label.fl,.qband label.fl,.cside label.fl{color:rgba(255,255,255,.84)}
input,select,textarea{
  width:100%;font-size:14.5px;color:var(--black);background:var(--white);
  border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;line-height:1.3;
  transition:border-color .18s ease;
}
textarea{min-height:130px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--green)}
input::placeholder,textarea::placeholder{color:var(--muted-2)}
select{
  appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2012%208%27%3E%3Cpath%20d%3D%27M1%201.5L6%206.5L11%201.5%27%20fill%3D%27none%27%20stroke%3D%27%2310140f%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%2F%3E%3C%2Fsvg%3E");
  background-repeat:no-repeat;background-position:right 16px center;background-size:10px;padding-right:38px;
}
.qband input,.qband select,.cside input,.cside select,.cside textarea{border-color:transparent}

.qband{
  background:var(--green-deep);color:var(--white);border-radius:var(--r-xl);padding:clamp(28px,3.2vw,52px);
  display:grid;grid-template-columns:minmax(220px,360px) 1fr;gap:clamp(24px,3vw,52px);align-items:center;
}
.qband h2{color:var(--white);font-size:clamp(30px,3.6vw,56px)}
.qband p{margin-top:14px;font-size:14.5px;color:var(--on-dark)}
.qform{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;align-items:end}

/* ---------- faq ---------- */
.faq{display:grid;grid-template-columns:1fr 1.3fr;gap:clamp(24px,3.5vw,70px);align-items:start}
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list details:first-child{border-top:1px solid var(--line)}
.on-dark .faq-list details,.bg-forest .faq-list details{border-color:var(--line-d)}
.faq-list summary{
  list-style:none;cursor:pointer;padding:21px 48px 21px 0;position:relative;
  font-family:var(--display);font-size:clamp(16px,1.3vw,20px);font-weight:600;letter-spacing:-0.03em;line-height:1.3;
}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after,.faq-list summary::before{content:'';position:absolute;background:var(--green);border-radius:2px;transition:transform .3s var(--spring),opacity .2s ease}
.faq-list summary::after{right:8px;top:50%;width:13px;height:2px;margin-top:-1px}
.faq-list summary::before{right:13.5px;top:50%;width:2px;height:13px;margin-top:-6.5px}
.faq-list details[open] summary::before{opacity:0}
.faq-list .fb{padding:0 48px 22px 0;font-size:14.5px;color:var(--muted);line-height:1.7}
.on-dark .faq-list .fb,.bg-forest .faq-list .fb{color:var(--on-dark)}

/* ---------- full bleed CTA ---------- */
.ctafull{
  position:relative;margin:var(--inset);border-radius:var(--r-shell);overflow:hidden;
  min-height:clamp(340px,40vw,500px);display:flex;align-items:center;
}
.ctafull img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ctafull::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(13,42,28,.94) 0%,rgba(13,42,28,.62) 58%,rgba(13,42,28,.34) 100%)}
.ctafull-in{position:relative;z-index:2;width:100%;padding:clamp(34px,4vw,64px) clamp(20px,3vw,48px)}
.ctafull h2{color:var(--white);max-width:12ch}
.ctafull p{margin-top:20px;max-width:44ch;color:var(--on-dark);font-size:15px}
.ctafull .btn-row{margin-top:28px}

/* ---------- page head ---------- */
.phead{
  position:relative;margin:var(--inset);border-radius:var(--r-shell);overflow:hidden;
  min-height:clamp(420px,52vh,580px);display:flex;align-items:center;background:var(--green-deep);
}
.phead img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.phead::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,42,28,.84) 0%,rgba(13,42,28,.32) 46%,rgba(13,42,28,.92) 100%)}
/* top padding only clears the overlaid header; the block is centred, not
   bottom-anchored, so it does not pool at the base of a tall shell */
.phead-in{position:relative;z-index:2;width:100%;padding:clamp(92px,9.5vw,116px) clamp(20px,3vw,48px) clamp(58px,6.5vw,96px)}
.phead h1{color:var(--white);max-width:12ch}
.phead .livepill{margin-bottom:clamp(16px,1.8vw,24px)}
.phead h1 + p{margin-top:clamp(20px,2.2vw,30px)}
.phead p{max-width:52ch;color:var(--on-dark);font-size:15px}

.crumbs{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:12.5px;font-weight:600;letter-spacing:.01em;
  color:var(--on-dark-2);margin-bottom:clamp(18px,2vw,26px);
}
.crumbs a{color:var(--white);opacity:.82;transition:opacity .2s ease,color .2s ease}
.crumbs a:hover{opacity:1;color:var(--green-br)}

/* ---------- service rows ---------- */
.srow{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,3.2vw,60px);align-items:center;padding:clamp(28px,3.4vw,54px) 0}
.srow+.srow{border-top:1px solid var(--line)}
.bg-forest .srow+.srow{border-top-color:var(--line-d)}
.srow-media{border-radius:var(--r-xl);overflow:hidden;position:relative;min-height:clamp(270px,29vw,420px);background:var(--green-lt)}
.srow-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.srow-media:hover img{transform:scale(1.04)}
.srow.rev .srow-media{order:2}
.srow h3{font-size:clamp(26px,2.9vw,46px);letter-spacing:-0.05em;font-weight:700;margin-bottom:16px}
.srow p{color:var(--muted);font-size:14.5px}
.bg-forest .srow p{color:var(--on-dark)}
.srow .chips{margin-top:22px}

.callout{background:var(--green-lt);border-radius:var(--r-lg);padding:22px 24px;font-size:14px;line-height:1.6;color:var(--black)}
.bg-forest .callout,.bg-ink .callout,.cside .callout{background:rgba(255,255,255,.1);color:var(--on-dark)}
.callout strong{color:var(--black)}
.bg-forest .callout strong,.cside .callout strong{color:var(--white)}

/* ---------- contact ---------- */
.cgrid{display:grid;grid-template-columns:1.3fr 1fr;gap:12px}
.cform{background:var(--white);border-radius:var(--r-xl);padding:clamp(26px,3vw,44px)}
.cside{background:var(--green-deep);color:var(--white);border-radius:var(--r-xl);padding:clamp(26px,3vw,44px)}
.cside h2{color:var(--white)}
.cside .lead{color:var(--on-dark)}
.field{margin-bottom:18px}
.field-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
/* contact rows: icon, label, value, note. Cards rather than divider rules. */
.cinfo{display:grid;gap:10px;margin-bottom:26px}
.cinfo li{
  display:flex;gap:14px;align-items:flex-start;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.10);
  border-radius:var(--r-lg);padding:16px 18px;
  transition:background .22s ease,border-color .22s ease;
}
.cinfo li:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.22)}
.cinfo-ico{
  width:40px;height:40px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:rgba(111,199,155,.18);color:var(--green-br);
  transition:background .22s ease,color .22s ease;
}
.cinfo-ico svg{width:18px;height:18px}
.cinfo li:hover .cinfo-ico{background:var(--green-br);color:var(--green-deep)}
.cinfo-txt{display:flex;flex-direction:column;min-width:0}
.cinfo-label{font-size:11.5px;font-weight:700;letter-spacing:.02em;color:var(--green-br);margin-bottom:5px}
.cinfo-val{
  font-family:var(--display);font-size:19px;font-weight:600;letter-spacing:-0.035em;
  color:var(--white);line-height:1.15;overflow-wrap:anywhere;
}
a.cinfo-val{transition:color .2s ease}
a.cinfo-val:hover{color:var(--green-br)}
.cinfo-note{font-size:12.5px;line-height:1.45;color:var(--on-dark);margin-top:6px}
.cinfo-note a{color:var(--green-br);text-decoration:underline;text-underline-offset:2px}
.formnote{font-size:12.5px;color:var(--muted);margin-top:16px;line-height:1.55}

/* ---------- footer ---------- */
.site-foot{
  background:var(--green-deep);color:var(--on-dark);margin:var(--inset);
  border-radius:var(--r-shell);overflow:hidden;padding:clamp(44px,5vw,76px) clamp(20px,3vw,48px) 0;
}
/* five columns: brand, Services, Areas, Company, Get hold of us */
.foot-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr 1.15fr;gap:clamp(22px,2.4vw,40px);padding-bottom:clamp(30px,3.4vw,52px)}
.site-foot h4{color:var(--white);margin-bottom:16px;font-size:13px}
.site-foot li{padding:5px 0;font-size:13.8px}
.site-foot a:hover{color:var(--green-br)}
.foot-brand .brand{color:var(--white);margin-bottom:16px}
.foot-brand p{line-height:1.62;max-width:34ch;font-size:13.8px}
.foot-wa{
  display:inline-flex;align-items:center;gap:9px;margin-top:20px;padding:11px 20px;
  background:var(--white);color:var(--black);border-radius:var(--r-pill);
  font-size:13.5px;font-weight:700;
  transition:background .2s ease,color .2s ease,transform .25s var(--spring);
}
.foot-wa svg{width:16px;height:16px}
/* matches .btn.light:hover so the whole site behaves the same way.
   Scoped under .site-foot on purpose: the general ".site-foot a:hover" rule
   above outranks a bare ".foot-wa:hover" and was turning the text the same
   bright green as the pill, so the label vanished on hover. */
.site-foot .foot-wa:hover{background:var(--green-br);color:var(--green-deep);transform:translateY(-2px)}
.foot-bottom{border-top:1px solid var(--line-d);padding:20px 0;font-size:12.5px;display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap}

.foot-credit{color:var(--on-dark-2)}
.foot-credit a{color:var(--on-dark);text-decoration:underline;text-underline-offset:3px;transition:color .2s ease}
.foot-credit a:hover{color:var(--green-br)}
/* legal links and the wordmark share a row above the footer rule */
.foot-pre{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-bottom:18px}
.foot-legal{display:flex;flex-wrap:wrap;gap:22px}
.foot-legal a{text-decoration:underline;text-underline-offset:3px;color:var(--on-dark)}
.foot-legal a:hover{color:var(--green-br)}
/* now sits inline on the right of the legal row, so it is sized to fit
   rather than bleeding off the bottom of the footer */
.foot-mark{
  font-family:var(--display);font-size:clamp(76px,14.5vw,248px);font-weight:700;
  letter-spacing:-0.06em;line-height:.82;color:rgba(255,255,255,.10);
  white-space:nowrap;user-select:none;margin:0;
}
@media (max-width:640px){.foot-pre{gap:14px}.foot-mark{font-size:clamp(64px,22vw,120px)}}
.foot-mark i{color:rgba(74,154,112,.4);font-style:normal}

/* ---------- prose (legal and long form) ---------- */
.prose{max-width:1060px}
.prose h2{font-size:clamp(24px,2.4vw,36px);margin:clamp(36px,4vw,56px) 0 16px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:clamp(17px,1.5vw,21px);margin:28px 0 10px}
.prose p{font-size:15.5px;line-height:1.75;color:var(--muted);margin-bottom:16px;max-width:82ch}
.prose ul{margin:0 0 18px;max-width:82ch}
.prose ul li{position:relative;padding:7px 0 7px 22px;font-size:15.5px;line-height:1.65;color:var(--muted)}
.prose ul li::before{content:'';position:absolute;left:0;top:16px;width:7px;height:7px;border-radius:50%;background:var(--green)}
.prose strong{color:var(--black);font-weight:700}
.prose a{color:var(--green-d);text-decoration:underline;text-underline-offset:3px}
.prose a:hover{color:var(--black)}
.prose .callout{margin:clamp(24px,3vw,36px) 0}

.legal-meta{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  margin-bottom:clamp(28px,3vw,40px);
}

/* ---------- centred message pages (thank you, 404) ---------- */
.msgwrap{
  min-height:70vh;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;padding-block:clamp(56px,7vw,110px);
}
.msgwrap h1{max-width:16ch;margin-top:20px}
.msgwrap p{margin-top:22px;max-width:56ch;font-size:16px;line-height:1.65;color:var(--muted)}
.msgwrap .btn-row{margin-top:34px;justify-content:center}
.msg-ico{
  width:82px;height:82px;border-radius:50%;background:var(--green-lt);color:var(--green);
  display:grid;place-items:center;border:1.5px solid rgba(28,90,61,.18);
}
.msg-ico svg{width:36px;height:36px}
.msg-code{
  font-family:var(--display);font-size:clamp(90px,16vw,190px);font-weight:700;
  letter-spacing:-0.06em;line-height:.85;color:var(--green-lt);
}
.msg-links{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:clamp(30px,3.4vw,46px)}

/* ---------- cookie banner ---------- */
.cookie{
  position:fixed;left:12px;right:12px;bottom:12px;z-index:120;
  background:var(--green-deep);color:var(--on-dark);border-radius:var(--r-xl);
  padding:22px 24px;display:none;gap:20px;align-items:center;
  max-width:var(--maxw);margin:0 auto;border:1px solid rgba(255,255,255,.14);
}
.cookie.show{display:flex}
.cookie-txt{flex:1;min-width:0}
.cookie-txt b{display:block;font-family:var(--display);font-size:16px;font-weight:600;letter-spacing:-0.025em;color:var(--white);margin-bottom:5px}
.cookie-txt p{font-size:13.5px;line-height:1.55}
.cookie-txt a{color:var(--green-br);text-decoration:underline;text-underline-offset:2px}
.cookie-btns{display:flex;gap:9px;flex:none;flex-wrap:wrap}
@media (max-width:760px){
  .cookie{flex-direction:column;align-items:flex-start;padding:20px}
  .cookie-btns{width:100%}
  .cookie-btns .btn{flex:1;justify-content:center}
}
@media (max-width:900px){.cookie{bottom:78px}}

/* dark band that carries the header on pages with no hero image */
.minihead{
  position:relative;background:var(--green-deep);
  margin:var(--inset);border-radius:var(--r-shell);
  min-height:clamp(94px,9.5vw,118px);
}

/* ---------- mobile call bar ---------- */
.callbar{display:none;position:fixed;left:10px;right:10px;bottom:10px;z-index:90;background:var(--black);border-radius:var(--r-pill);overflow:hidden}
.callbar a{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:15px 8px;font-size:13.5px;font-weight:700;color:var(--white)}
.callbar a.wa{background:var(--green)}
.callbar svg{width:16px;height:16px}

/* ---------- reveal ---------- */
[data-reveal]{opacity:0;transform:translateY(20px)}
[data-reveal].in{opacity:1;transform:none;transition:opacity .8s var(--ease),transform .8s var(--ease)}
[data-reveal][data-d="1"].in{transition-delay:.07s}
[data-reveal][data-d="2"].in{transition-delay:.14s}
[data-reveal][data-d="3"].in{transition-delay:.21s}
[data-reveal][data-d="4"].in{transition-delay:.28s}
[data-reveal][data-d="5"].in{transition-delay:.35s}

/* ---------- utils ---------- */
.mt-20{margin-top:20px}
.mt-32{margin-top:32px}
.mt-44{margin-top:clamp(28px,3.4vw,44px)}
.skip{position:absolute;left:-9999px;top:0;background:var(--black);color:var(--white);padding:12px 18px;z-index:200;border-radius:var(--r)}
.skip:focus{left:14px;top:14px}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .c4,.pgrid.four{grid-template-columns:repeat(2,1fr)}
  .nav a{padding:9px 14px;font-size:13px}
  .dcards{grid-template-columns:1fr 1fr}
  .dcard:nth-child(3){grid-column:span 2}
}
@media (max-width:1040px){
  .headrow,.headrow.rev{grid-template-columns:1fr}
  .headrow.rev h2{justify-self:start;text-align:left;order:1}
  .headrow.rev p{order:2}
  .hero-copy{grid-template-columns:1fr}
  .hero-actions{justify-content:flex-start}
  .pgrid{grid-template-columns:repeat(2,1fr)}
  .tiles,.tiles.rev{grid-template-columns:1fr}
  .feat{grid-template-columns:1fr}
  .feat.rev .feat-media{order:0}
  .srow{grid-template-columns:1fr}
  .srow.rev .srow-media{order:0}
  .quotes{grid-template-columns:1fr}
  .c3{grid-template-columns:1fr}
  .qband{grid-template-columns:1fr}
  .qform{grid-template-columns:repeat(2,1fr)}
  .faq{grid-template-columns:1fr}
  .cgrid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:900px){
  .nav{display:none;margin:0}
  .burger{display:grid}
  .head-tel{display:none}
  .head-right{gap:14px;margin-left:auto}
  .site-head.open .nav{
    display:flex;position:absolute;top:calc(100% + 6px);left:clamp(14px,1.8vw,26px);right:clamp(14px,1.8vw,26px);
    flex-direction:column;align-items:stretch;gap:3px;padding:12px;
    background:var(--green-deep);border-radius:var(--r-xl);border-color:transparent;
  }
  .site-head.open .nav a{padding:14px 16px;color:rgba(255,255,255,.88)}
  .site-head.open .nav a[aria-current="page"]{background:var(--white);color:var(--black)}
  .callbar{display:flex}
  body{padding-bottom:72px}
  .dcards{grid-template-columns:1fr}
  .dcard:nth-child(3){grid-column:auto}
}
@media (max-width:640px){
  .head-right .btn{display:none}
  .head-in{gap:12px}
  .c2,.c3,.c4,.pgrid,.pgrid.four{grid-template-columns:1fr}
  .qform{grid-template-columns:1fr}
  .field-2{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr}
  .statcard{width:100%}
  .inchip{display:none}
  .faq-list summary{font-size:15.5px}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;scroll-behavior:auto !important}
  [data-reveal]{opacity:1;transform:none}
}