:root{
  --ink:#15181300; /* placeholder overwritten below */
}
:root{
  --ink:#0f1210;           /* deeper than #141711 — the "dark and moody" base */
  --ink-2:#171b17;
  --ink-3:#1f241f;         /* card surface on dark */
  --ink-soft:#3c433c;
  --muted:#59605a;
  --paper:#ffffff;
  --stone:#f2f0ea;         /* cooler, less yellow than #e9e6dc */
  --stone-2:#e6e3da;
  --line:#cfccc2;
  --line-soft:#e4e1d8;
  --green:#47671f;         /* brand — AA on stone */
  --green-bright:#8fd14f;  /* logo green, dark backgrounds only */
  --gold:#b08a1e;          /* accent on light */
  --gold-lt:#c8a24a;       /* accent on dark — 5.9:1 on --ink */
  --serif:'Faustina',Georgia,'Times New Roman',serif;
  --sans:'Source Sans 3','Source Sans Pro',Arial,Helvetica,sans-serif;
  --wide:1240px; --narrow:780px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--paper);font-size:18px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:var(--wide);margin:0 auto;padding:0 32px}
.narrow{max-width:var(--narrow);margin:0 auto}

/* ---------- type ----------
   ONE SCALE, set 2026-09-10 (Michael: "consistency of font and branding so
   headings are the same size"). Before this pass the same job was done at
   eleven different sizes across 23 pages — the page title alone rendered at
   4.6rem on /about, /careers and /team, 3.75rem on the homepage, 3.3rem on
   /privacy, /terms and /client-login, 2.6rem on every service page (where the
   visible title is an h2) and 2.15rem on /consultation.
   Five live steps now, each with one job (measured in Chromium at 1440):
     page title h1 ......... clamp(2rem,4vw,3.3rem)   = 52.8px
     section heading h2 .... clamp(1.72rem,2.95vw,2.6rem) = 41.6px
     sub-head .............. clamp(1.2rem,1.7vw,1.5rem)   = 24px   .cardh .steph .role h3 .prose h2
     card heading h3 ....... clamp(1.06rem,1.35vw,1.28rem)= 19.4px
     label ................. .78rem uppercase             = 12.5px .fcol, .counties .cty h3
   A sixth step, .herolead h1 (the video hero's headline), is consolidated to one
   declaration but is NOT LIVE: index.html no longer carries a .hero section and
   its h1 is class="vh". Kept, not deleted, because the hero may come back — but
   do not count it when checking the scale against a rendered page.
   EVERY later override of these sizes was deleted in the same pass. If a
   heading needs a different size, change it HERE — a dated block at the bottom
   of this file is how the scale got to eleven sizes in the first place.
   One deliberate exception is left in place and is marked as such at the rule:
   #consultation h1 (Michael, 2026-09-09 — "heading and form both too big"). */
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.16;margin:0 0 .5em;letter-spacing:-.018em}
h1{font-size:clamp(2rem,4vw,3.3rem);font-weight:600;letter-spacing:-.032em;line-height:1.1}
h2{font-size:clamp(1.72rem,2.95vw,2.6rem);font-weight:600;letter-spacing:-.026em}
h3{font-size:clamp(1.06rem,1.35vw,1.28rem);letter-spacing:-.01em}
.cardh,.steph,.role h3,.prose h2{font-size:clamp(1.2rem,1.7vw,1.5rem)}
.eyebrow{font-family:var(--sans);font-size:.74rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin:0 0 1.3rem}
.lede{font-size:clamp(1.12rem,1.6vw,1.34rem);color:var(--ink-soft);line-height:1.58}
.small{font-size:.92rem;color:var(--muted)}

/* ---------- draft bar ---------- */
.draftbar{background:var(--ink);color:#b9c3ac;font-size:.78rem;text-align:center;padding:8px 16px;letter-spacing:.05em;border-bottom:1px solid rgba(255,255,255,.10)}

/* ---------- header: transparent over hero, solid after ---------- */
.topbar{background:#080a08;color:#aab3a4;font-size:.78rem;letter-spacing:.06em}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-top:10px;padding-bottom:10px;flex-wrap:wrap}
.topbar a{text-decoration:none;opacity:.92}
.topbar a:hover{opacity:1}
.portal{border:1px solid rgba(255,255,255,.4);padding:5px 14px;border-radius:2px;white-space:nowrap;font-weight:600}

header.site{position:sticky;top:0;z-index:60;background:var(--ink);color:#f1f3ee;border-bottom:1px solid rgba(255,255,255,.10);transition:background .25s,border-color .25s}
header.site .wrap{display:flex;align-items:center;gap:34px;padding-top:18px;padding-bottom:18px}
.logo{flex:0 0 auto}
.logo img{height:118px;width:auto;transition:filter .25s}
nav.main{margin-left:auto}
nav.main ul{list-style:none;display:flex;gap:32px;margin:0;padding:0;align-items:center}
nav.main a{text-decoration:none;font-size:.92rem;font-weight:600;letter-spacing:.03em;padding:8px 0;border-bottom:2px solid transparent;white-space:nowrap}
nav.main a{color:#e7ebe4;font-weight:500;letter-spacing:.09em;text-transform:uppercase;font-size:.8rem}
nav.main a:hover,nav.main a.on{border-bottom-color:var(--gold-lt);color:#fff}
nav.main .has-sub{position:relative}
nav.main .sub{display:none;position:absolute;left:-18px;top:100%;background:var(--ink-2);border:1px solid rgba(255,255,255,.12);padding:8px 0;min-width:240px;box-shadow:0 22px 50px rgba(0,0,0,.5)}
nav.main .has-sub:hover .sub{display:block}
nav.main .sub li{display:block}
nav.main .sub a{display:block;padding:10px 22px;font-weight:500;border:0;color:#dfe4da;text-transform:none;letter-spacing:.02em;font-size:.9rem}
nav.main .sub a:hover{background:rgba(255,255,255,.07);color:#fff}
.cta-phone{font-family:var(--serif);font-size:1.18rem;font-weight:600;text-decoration:none;white-space:nowrap;color:#fff;text-transform:none;letter-spacing:0}
/* Header CTA. Lives OUTSIDE nav.main on purpose: below 1000px the nav collapses
   into the hamburger, and a consultation ask hidden behind a hamburger is the
   gap this was added to close. Sits beside the hamburger on mobile instead. */
.cta-head{margin-left:auto;flex:0 0 auto;background:transparent;color:var(--gold-lt);border:1px solid var(--gold-lt);font-family:var(--sans);font-size:.78rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;white-space:nowrap;padding:13px 24px;border-radius:0;transition:.2s}
.cta-head:hover{background:var(--gold-lt);color:var(--ink)}

/* solid header; the hero sits beneath it. Shadow appears once scrolled. */
header.site.stuck{box-shadow:0 8px 30px rgba(0,0,0,.35);border-bottom-color:rgba(255,255,255,.10)}
header.site.stuck .logo img{transform:none}
header.site .logo img{transform-origin:left center;transition:transform .2s ease}

/* ---------- buttons ---------- */
.btn{display:inline-block;text-decoration:none;font-weight:700;font-size:.92rem;letter-spacing:.06em;text-transform:uppercase;padding:17px 34px;border:1.5px solid var(--ink);background:var(--ink);color:#fff;transition:.18s}
.btn:hover{background:transparent;color:var(--ink)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:#fff}
.btn.light{background:#fff;color:var(--ink);border-color:#fff}
.btn.light:hover{background:transparent;color:#fff}
/* full-strength border + halo: at the matched hero scrim a 60% white edge disappears
   against the light frames of the video. */
.btn.outline-light{background:transparent;color:#fff;border-color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.8),0 0 6px rgba(0,0,0,.85)}
.btn.outline-light:hover{background:#fff;color:var(--ink);border-color:#fff}

/* ---------- HERO — full viewport, real impact ---------- */
/* min-height, NOT height: with a fixed height the flex column had to squeeze its own
   children, and below ~1000px the trust strip wraps to three lines and the gap above it
   collapsed to 1.6px. With min-height the hero grows instead of compressing. */
.hero{position:relative;min-height:max(600px, calc(100svh - 200px));display:flex;flex-direction:column;color:#fff;overflow:hidden}
.hero video,.hero .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Hero scrim: matched to greenvkb.com, on request. Their row stacks two black layers
   at 6% opacity each, which composites to 11.6% — measured off the live page's computed
   ::before, not eyeballed. This is a flat 11.6% so the video reads at exactly the
   brightness it does on their own site.
   The trade that buys: at 11.6% the video blows out to near-white behind the copy on
   the bright kitchen frames, so contrast ratios on the hero type fail WCAG AA (h1 1.4:1
   at worst). Legibility is carried by the type halos below instead — the same device
   greenvkb.com uses (their 42px headline runs a 0 0 5px black glow over this same
   scrim). Halos help the eye but do NOT count toward a contrast ratio.
   The measured alternative that passed AA is in git: see the scrim in commit af2b08e. */
/* 2026-09-07 — scrim raised 11.6%% -> a 34/58%% top-to-bottom gradient. The 11.6%% flat
   value was matched to greenvkb.com ON REQUEST and the note above records that it fails
   WCAG AA (h1 1.4:1 at worst). Ben on 2026-09-07: "significantly more upscale... dark and
   moody is popular in kitchens and bathrooms, so not scared here." That supersedes the
   match-their-site request, and it buys back the contrast in the same move. */
/* 2026-09-10 — scrim REMOVED. James, via Ben: "this video looks washed out... this looks like
   it has some kind of a filter on it." It did: the 34/58%% gradient below, which we raised on
   09-07 when Ben asked for "dark and moody". It was carrying the contrast for the hero headline;
   Ben has now asked for the video clean with no words over it, so the scrim has no job left and
   the footage reads at the brightness it does on greenvkb.com. Interior heroes still carry text,
   so .hero-page::after (below) keeps its own gradient. */
/* DIRECT child only: '.hero .wrap' also matches the trust strip's own inner .wrap,
   which inherited this flex + padding and ballooned the strip from 53px to 149px. */
.hero > .wrap{position:relative;z-index:2;width:100%;flex:1 0 auto;display:flex;align-items:center;padding-top:48px;padding-bottom:36px}
.hero .inner{max-width:730px}
/* The trust strip is IN FLOW, not absolutely positioned. It was pinned 34px from the
   hero's bottom edge, and at narrow widths its four items wrap to two or three lines,
   so it grew UPWARDS into the buttons — they were touching in Michael's 1099px capture
   on 2026-09-07. In flow it can never collide, at any width or viewport height. */

/* Type halos do the legibility work the scrim no longer does. Layered tight-to-wide:
   the 1-2px layers cut the glyph edge against a light backdrop, the wide layer lifts
   the whole word off busy footage. */
.hero h1{margin-bottom:1.5rem;text-shadow:0 2px 18px rgba(0,0,0,.45)}
.hero .lede{color:#fff;max-width:560px;margin-bottom:2.4rem;font-size:clamp(1.12rem,1.5vw,1.35rem);text-shadow:0 2px 14px rgba(0,0,0,.5)}
.hero .actions{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.hero .trust{position:relative;z-index:2;flex:0 0 auto;padding-bottom:30px}
.hero .trust .wrap{display:flex;gap:34px;flex-wrap:wrap;align-items:center;font-size:.86rem;letter-spacing:.1em;text-transform:uppercase;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.55)}
.hero .trust b{color:#fff;font-weight:700}
.scrollcue{position:absolute;left:50%;bottom:96px;transform:translateX(-50%);z-index:2;width:1px;height:52px;background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.75))}

/* ---------- sections + contrast rhythm ---------- */
/* Section rhythm, single declaration. clamp(34px,4vw,58px) = 115px between two
   sections at 1440 (Michael, 2026-09-10: "tighter"). */
section{padding:clamp(28px,3vw,44px) 0;position:relative}
section.stone{background:var(--stone)}
section.stone-2{background:var(--stone-2)}
section.dark{background:var(--ink);color:#e4e9dd}
section.dark h2,section.dark h3,section.dark h4{color:#fff}
section.dark .lede,section.dark p{color:#c2cab8}
section.dark .eyebrow{color:var(--green-bright)}
section + section:not(.dark):not(.stone):not(.stone-2){border-top:1px solid var(--line-soft)}
.head{max-width:760px;margin-bottom:clamp(18px,2.2vw,30px)}
.head.wide{max-width:900px}
.head.mid{margin-left:auto;margin-right:auto;text-align:center;max-width:720px}

/* ---------- full-bleed image band (section separator with impact) ---------- */
.band{position:relative;height:clamp(230px,32vw,400px);overflow:hidden;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff}
.band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.band::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,12,8,.42),rgba(10,12,8,.66))}
.band .wrap{position:relative;z-index:2}
.band p{font-family:var(--serif);font-size:clamp(1.5rem,3vw,2.4rem);line-height:1.3;margin:0 auto;max-width:800px;text-shadow:0 2px 30px rgba(0,0,0,.4)}
/* '.band p' (0,1,1) out-specifies '.byline' (0,1,0), so the attribution was rendering
   at full quote size in the display serif and read as part of the sentence. */
.band .byline{margin-top:1.7rem;color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.7);
  font-family:var(--sans);font-size:.88rem;font-weight:600;letter-spacing:.08em;line-height:1.4}
.band .byline .gcite{font-size:.88rem;letter-spacing:.08em}

/* ---------- proof strip ---------- */
.proof{display:grid;grid-template-columns:repeat(3,1fr);background:var(--ink);color:#e4e9dd}
.proof div{padding:44px 34px;border-right:1px solid rgba(255,255,255,.13)}
.proof div:last-child{border-right:0}
.proof .n{font-family:var(--serif);font-size:clamp(2.2rem,3.4vw,3rem);font-weight:700;line-height:1;margin-bottom:.35rem;color:#fff}
.proof .l{font-size:.84rem;color:#a8b19c;letter-spacing:.09em;text-transform:uppercase}

/* ---------- cards ---------- */
.grid{display:grid;gap:clamp(20px,2.4vw,30px)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.card{background:var(--paper);border:1px solid var(--line-soft);padding:38px 34px}
section.stone .card,section.stone-2 .card{background:#fff;border-color:transparent;box-shadow:0 2px 20px rgba(20,23,17,.05)}
section.dark .card{background:var(--ink-2);border-color:rgba(255,255,255,.12)}
.card h3{margin-bottom:.55rem}
.card p{margin:0;color:var(--ink-soft)}
.src{margin-top:1.5rem;padding:0;border-top:0;background:none;box-shadow:none;
  font-family:var(--serif);font-size:1.08rem;font-weight:700;line-height:1.45;color:var(--ink);font-style:normal}
.src::before{content:"\2605\2605\2605\2605\2605";display:block;color:var(--gold);letter-spacing:.14em;font-size:.8rem;font-family:var(--sans);margin-bottom:.45rem}
.src cite,.src .who{display:block;margin-top:.7rem;font-family:var(--sans);font-size:.84rem;font-weight:600;
  font-style:normal;letter-spacing:.06em;color:var(--muted);font-weight:600}
section.dark section.dark .src{background:none;color:#fff}

/* ---------- quotes ---------- */
.quote{font-family:var(--serif);font-size:clamp(1.45rem,2.6vw,2.1rem);line-height:1.4;margin:0 0 1.3rem}
.byline{font-size:.86rem;letter-spacing:.05em;text-transform:none;color:var(--muted);font-weight:600}
.qgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.qgrid figure{margin:0;padding:44px 38px;border-right:1px solid var(--line);background:transparent}
.qgrid figure:last-child{border-right:0}
.qgrid blockquote{margin:0 0 1.4rem;font-family:var(--serif);font-size:1.16rem;line-height:1.48}
.stars{color:var(--gold);letter-spacing:.16em;font-size:.85rem;margin-bottom:1rem}

/* ---------- media rows ---------- */
.row{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(34px,5.5vw,80px);align-items:center}
.row.flip>div:first-child{order:2}
.row img{width:100%;height:100%;object-fit:cover;min-height:380px}

/* ---------- team ---------- */
.people{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:transparent;border:0}
/* Lines come from a 1px ring on each card, not from a container background showing
   through the gaps. With ten people in a three-column grid the old technique painted
   the two empty cells of the last row as a solid block of line colour. */
.person{box-shadow:0 0 0 1px var(--line)}
.person{background:#fff;padding:0;display:flex;flex-direction:column}
.person .nm{font-family:var(--serif);font-size:1.7rem;font-weight:700;line-height:1.08}
.person .rl{font-size:.74rem;letter-spacing:.11em;text-transform:uppercase;color:var(--green);font-weight:700;margin:.5rem 0 1.1rem;line-height:1.5}
.person p{margin:0;color:var(--ink-soft);font-size:.99rem}
.person .said{margin-top:1.2rem;padding-top:1rem;border-top:1px solid var(--line-soft);font-size:.92rem;font-style:italic;color:var(--muted)}

/* ---------- steps ---------- */
.steps{counter-reset:s;display:grid;gap:0}
/* 30px, matching .revgrid .rev — the site's other stacked list. At 46px the gap
   between two process steps was 92px, most of the way to the 115px that separates
   two whole SECTIONS, so a list of five steps read as five sections. */
.step{counter-increment:s;display:grid;grid-template-columns:120px 1fr;gap:34px;padding:30px 0;border-bottom:1px solid var(--line-soft);align-items:start}
.step:first-child{border-top:1px solid var(--line-soft)}
.step::before{content:"0" counter(s);font-family:var(--serif);font-size:3rem;font-weight:700;color:var(--green);line-height:.9;opacity:.4}
.step h3{margin-bottom:.85rem}
.step p{margin:0 0 .9rem;color:var(--ink-soft)}
.step .said{font-size:.94rem;font-style:italic;color:var(--muted);border-left:2px solid var(--green-bright);padding-left:18px}

/* ---------- gallery ---------- */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover}
.gallery .tall{grid-row:span 2;aspect-ratio:4/6.2}

/* ---------- form ---------- */
.form{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.form .full{grid-column:1/-1}
label{display:block;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;margin-bottom:8px;color:var(--ink-soft)}
input,select,textarea{width:100%;font-family:var(--sans);font-size:1rem;padding:15px 16px;border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:0}
input:focus,select:focus,textarea:focus{outline:2px solid var(--green);outline-offset:-2px}
textarea{min-height:130px;resize:vertical}
.consent{font-size:.86rem;color:var(--muted)}

/* ---------- footer ---------- */
/* Top padding is the SAME EXPRESSION as `section{padding}`, not a copied pixel
   value — the last two tightening passes changed the section rhythm and left the
   footer behind at the old number, which read as an extra gap above the footer. */
footer.site{background:var(--ink);color:#b4bda8;padding:clamp(28px,3vw,44px) 0 34px;font-size:.94rem}
footer.site a{color:#e4e9dd;text-decoration:none}
footer.site a:hover{color:#fff;text-decoration:underline}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:44px}
.fgrid ul{list-style:none;margin:0;padding:0}
.fgrid li{margin-bottom:.6rem}
.legal{margin-top:36px;padding-top:24px;border-top:1px solid rgba(255,255,255,.13);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:.84rem;color:#838c78}

@media(max-width:1000px){
  nav.main{display:none}
  .qgrid{grid-template-columns:1fr}
  .qgrid figure{border-right:0;border-bottom:1px solid var(--line)}
  .people{grid-template-columns:repeat(2,1fr)}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .gallery .tall{grid-row:auto;aspect-ratio:4/3}
}
@media(max-width:720px){
  body{font-size:17px}
  .wrap{padding:0 22px}
  .g2,.g3,.people,.form,.fgrid{grid-template-columns:1fr}
  .proof{grid-template-columns:1fr}
  .proof div{border-right:0;border-bottom:1px solid rgba(255,255,255,.13);padding:30px 24px}
  .row,.row.flip>div:first-child{grid-template-columns:1fr;order:0}
  .row img{min-height:260px}
  .step{grid-template-columns:1fr;gap:12px;padding:24px 0}
  .step::before{font-size:2.1rem}
  .gallery{grid-template-columns:1fr}
  .hero .trust .wrap{gap:14px;font-size:.76rem}
  .scrollcue{display:none}
}

/* ---------- mobile navigation ---------- */
.navtoggle{display:none}
.hamburger{display:none;margin-left:auto;width:44px;height:44px;cursor:pointer;flex-direction:column;justify-content:center;gap:6px;padding:0 8px}
.hamburger span{display:block;height:2px;background:#e7ebe4;transition:.2s}
@media(max-width:1200px){
  header.site .wrap{flex-wrap:wrap;gap:0}
  .hamburger{display:flex}
  nav.main{display:block;order:3;width:100%;max-height:0;overflow:hidden}
  .navtoggle:checked ~ nav.main{max-height:820px}
  nav.main ul{flex-direction:column;align-items:stretch;gap:0;padding:8px 0 18px}
  nav.main li{border-top:1px solid rgba(255,255,255,.10)}
  nav.main a{display:block;padding:15px 2px;border-bottom:0;font-size:1.02rem}
  nav.main .sub{display:block;position:static;border:0;box-shadow:none;padding:0 0 8px 18px;min-width:0;background:transparent}
  nav.main .sub a{padding:10px 2px;font-size:.95rem;color:#aab3a4}
  nav.main .cta-phone{font-size:1.3rem;padding-top:16px}
  .cta-head{margin-left:auto;order:1;font-size:.88rem;padding:10px 14px}
  .hamburger{margin-left:12px;order:2}
  .navtoggle:checked ~ .hamburger span:nth-child(1){transform:translateY(8px) rotate(45deg)}
  .navtoggle:checked ~ .hamburger span:nth-child(2){opacity:0}
  .navtoggle:checked ~ .hamburger span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
}

/* Non-header rules formerly in the block above. They keep their original 1000px
   breakpoint; only the header collapse moved to 1200px, to make room for the
   header CTA without shrinking the logo. */
@media(max-width:1000px){
  .topbar .addr{display:none}
  .topbar .wrap{justify-content:flex-end;padding-top:7px;padding-bottom:7px}
  .draftbar{font-size:.7rem;padding:6px 14px;line-height:1.4}
  .hero{height:calc(100svh - 226px);min-height:520px}
}

@media(max-width:720px){
  /* hero: let content set the height, trust strip flows underneath instead of overlapping */
  .hero{height:auto;min-height:0;flex-direction:column;align-items:stretch;padding:64px 0 0}
  .hero .wrap{padding-bottom:44px}
  .hero .trust{position:static;background:var(--ink);padding:16px 0;margin-top:0}
  .hero .trust .wrap{flex-direction:column;align-items:flex-start;gap:9px;padding-bottom:0}
  .hero::after{background:rgba(0,0,0,.116)}
  .hero video,.hero .poster{height:100%}
}

/* footer column labels: were <h4>, promoted to <h3> to close a two-level heading skip.
   The promotion pinned the SIZE but dropped two properties the old footer.site h4
   rule carried — font-family:var(--sans) and color:#fff — so on all 23 pages these
   labels have been rendering in Faustina serif at the footer's body grey instead of
   white sans. Restored 2026-09-10. */
.fcol{font-family:var(--sans);color:#fff;font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin:0 0 .9rem}

/* process steps: were <h3> under the page <h1> (a skipped level). Promoted to <h2>,
   sizing pinned so nothing moves visually. */
.steph{line-height:1.2;margin:0 0 .85rem}

/* ---------- pages added 2026-09-05 (careers, services, gallery, reviews, blog) ---------- */
.placeholder-note{background:#fff6d8;border:1px solid #e4cd7a;border-radius:4px;padding:14px 18px;margin:26px auto 0;font-size:.94rem;color:#4a3d12;max-width:72ch}
.ticks{list-style:none;padding:0;margin:1.4rem 0}
.ticks li{position:relative;padding:0 0 0 1.6rem;margin:0 0 .7rem}
.ticks li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;background:var(--green);border-radius:50%}
.ticks.cols2{columns:2;column-gap:48px}
.roles{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:0;border:1px solid var(--line);background:var(--paper)}
.role{padding:32px 30px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.role h3{margin:0 0 .3rem}
.role .meta{font-size:.86rem;letter-spacing:.09em;text-transform:uppercase;color:var(--green);margin:0 0 1rem;font-weight:700}
.role .ticks li{font-size:.98rem}
.grid-gal{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:20px}
.grid-gal figure{margin:0}
.grid-gal img{width:100%;height:300px;object-fit:cover}
.grid-gal figcaption{font-size:.94rem;color:var(--ink-soft);padding:.7rem 0 0}
blockquote cite{display:block;margin-top:.7rem;font-style:normal;font-size:.94rem;color:var(--ink-soft)}
@media(max-width:720px){.ticks.cols2{columns:1}.grid-gal img{height:230px}}

.posth{margin:0 0 .4rem;font-size:1.5rem;line-height:1.15}
.ticks li{max-width:72ch}

/* Google Business Profile link — the reviews are checkable, so make them checkable. */
.glink{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.glink:hover{color:var(--green)}
.verify{display:inline-flex;align-items:center;gap:.5rem;font-size:.95rem}

/* the verify note under the reviews CTA ran ~95 chars/line */
.wrap.narrow p{max-width:68ch;margin-left:auto;margin-right:auto}

/* ---------- Google review badge ----------
   The whole premise is that the words are the customers' own, so the source has to be
   one click away and unmistakably Google. Logo is the official four-colour mark. */
.gbadge{display:inline-flex;align-items:center;gap:14px;padding:14px 22px;border:1px solid var(--line);
  background:var(--paper);border-radius:6px;text-decoration:none;color:var(--ink);
  box-shadow:0 1px 2px rgba(20,23,17,.06);transition:box-shadow .15s ease,transform .15s ease}
.gbadge:hover{box-shadow:0 6px 18px rgba(20,23,17,.12);transform:translateY(-1px)}
.gmark{flex:0 0 auto;display:block}
.gtxt{display:flex;flex-direction:column;align-items:flex-start;line-height:1.25}
.grow{display:flex;align-items:center;gap:8px}
.gnum{font-family:var(--serif);font-size:1.34rem;font-weight:700}
.gstars{color:#f4b400;letter-spacing:1px;font-size:1rem}
.gsub{font-size:.9rem;color:var(--ink-soft)}
section.dark .gbadge,.hero .gbadge{background:rgba(255,255,255,.96);border-color:rgba(255,255,255,.3)}
@media(max-width:560px){.gbadge{padding:12px 16px;gap:10px}.gsub{font-size:.82rem}}

/* ---------- captioned gallery ----------
   Captions say what the work was. They deliberately do NOT say where: we do not hold
   the project addresses, and inventing them would be the one thing this whole site
   cannot afford to do. */
.gallery.captioned{grid-template-columns:repeat(4,1fr);gap:26px 22px;align-items:start}
.gallery.captioned figure{margin:0}
.gallery.captioned img{aspect-ratio:4/3;width:100%;object-fit:cover;transition:opacity .18s}
.gallery.captioned a:hover img{opacity:.88}
.gallery.captioned figcaption{padding-top:.85rem;line-height:1.45}
.gallery.captioned figcaption b{display:block;font-family:var(--serif);font-size:1.08rem;font-weight:700;margin-bottom:.2rem}
.gallery.captioned figcaption span{display:block;font-size:.92rem;color:var(--ink-soft);max-width:44ch}
.galnote{margin-top:clamp(28px,3.4vw,44px);font-size:.92rem;color:var(--muted);max-width:76ch}
@media(max-width:1000px){.gallery.captioned{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.gallery.captioned{grid-template-columns:1fr}}

@media(max-width:720px){.logo img{height:62px}}

/* Post-submit expectation. DM's audit calls out a form that never says what happens
   next; this is that line. Deliberately promises a sequence, not a response time --
   no review evidences an enquiry SLA, so we do not assert one. */
.next-step{margin-top:1.4rem;padding:18px 22px;border-left:3px solid var(--green-bright);background:rgba(0,0,0,.03);font-size:.96rem;line-height:1.65;color:var(--ink-soft)}

/* Long-form legal / policy pages: one readable measure, generous leading. Only
   privacy.html and terms.html use it. */
.prose{max-width:760px}
.prose h2{margin:2.6rem 0 .8rem}
.prose h2:first-child{margin-top:0}
.prose p{margin:0 0 1.1rem;line-height:1.75}

/* ---------- interior page hero ----------
   .hero is 100svh, which is right for the homepage and wrong everywhere else: an
   interior page that fills the fold with a headline buries the content it exists for.
   Fixed band instead, so the first section is visible without scrolling. */
/* MIN-height, not height. Same trap the homepage hero hit last pass: with a fixed
   height the flex column squeezes its own children, so the wrap's bottom padding
   collapses and the CTA lands on the boundary with the section below. On the longest
   interior headline (team) at 1271x800 that gap measured 17.8px; on a 390px phone the
   buttons fell 129px BELOW the hero and were clipped by overflow:hidden entirely.
   Auto height means the band grows for a long headline instead of eating the gap. */
.hero-page{min-height:clamp(420px,54vh,560px);height:auto}
/* Interior heroes carry no trust strip, so the wrap's own bottom padding is the only
   thing between the CTA and the next section's colour change. 84px is the same floor
   the homepage hero holds. */
.hero-page > .wrap{padding-bottom:84px}
/* interior photography puts the subject slightly above centre; a straight centre crop
   cuts the counter line and reads as misaligned. */
.hero-page .poster{object-position:center 42%}
.hero-page h1{margin-bottom:1.1rem}
.hero-page .lede{margin-bottom:1.8rem;max-width:600px}
/* Interior heroes DO carry a headline, so they keep a scrim. These four properties used to be
   inherited from .hero::after; that rule is gone (see above), so they are declared here. */
.hero-page::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,12,8,.58) 0%,rgba(10,12,8,.34) 45%,rgba(10,12,8,.62) 100%)}
@media(max-width:720px){
  .hero-page{min-height:clamp(320px,52vh,420px);height:auto}
  .hero-page > .wrap{padding-bottom:64px}
}

a.card{text-decoration:none;color:inherit;display:block}
a.card:hover{border-color:var(--green);box-shadow:0 6px 22px rgba(20,23,17,.09)}
a.card h3{text-decoration:none}

/* ---------- per-review attribution ----------
   Every named reviewer carries the Google mark and links to the profile, so any single
   quote can be checked on its own rather than the page asking to be trusted as a whole. */
.gcite{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:inherit;
  font-style:normal;font-weight:600;letter-spacing:.04em;white-space:nowrap}
.gcite span{border-bottom:1px solid transparent;transition:border-color .15s}
.gcite:hover span{border-bottom-color:currentColor}
.gmini{flex:0 0 auto;display:block}
.band .gcite,section.dark .gcite{color:#fff}
.src cite .gcite{font-size:.84rem}

/* the quote is the proof: give it room in the staggered rows, and put the name on its
   own line rather than trailing the sentence. */
.row .src{margin-top:1.7rem;font-size:1.12rem}
.src cite{display:block;margin-top:.75rem}
.src cite .gcite{font-size:.86rem;letter-spacing:.05em}

/* service cards carry their own photograph, so the work appears mid-page where someone
   is choosing, not only in a gallery at the bottom they may never scroll to. */
.card.svc-img{padding:0;overflow:hidden;display:flex;flex-direction:column;text-decoration:none;color:inherit}
.card.svc-img img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.card.svc-img h3{margin:26px 30px .55rem}
.card.svc-img p{margin:0 30px 1.2rem;color:var(--ink-soft)}
.card.svc-img:hover img{opacity:.92}

/* card headings promoted from h3 to h2 where no h2 sits above them; size pinned. */
.cardh{line-height:1.15;margin:0 0 .55rem}
.card.svc-img .cardh{margin:26px 30px .55rem}

/* headshots — real ones, pulled from the company's own team page */
.person img{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:center 20%;display:block;margin:0}
.person > :not(img){padding-left:34px;padding-right:34px}
.person > :not(img):first-of-type{padding-top:30px}
.person > :last-child{padding-bottom:34px;margin-bottom:0}
/* equalise the cards so the outer border is a clean rectangle rather than a ragged one */
.people{align-items:stretch}
@media(min-width:1001px){
  /* Ten people in a three-column grid leaves a single orphan on the last row (3+3+3+1).
     Centre it instead of stranding it against the left edge with two cells of dead space.
     Scoped to the 3-col breakpoint: at <=1000px the grid is 2 cols and at <=720px it is 1,
     and ten divides evenly into both, so there is no orphan to centre. */
  .people > .person:last-child:nth-child(3n+1){grid-column:2}
}

.person .src{margin-top:auto;padding-top:1.2rem}


/* service-area town chips — a grouped set reads faster than a single long column */
/* The header is sticky (121px desktop / 99px mobile), so any in-page anchor landed
   UNDERNEATH it — including #consultation, which every CTA on the site points at.
   scroll-margin-top offsets the scroll position for every anchor target. */
[id]{scroll-margin-top:135px}
@media(max-width:720px){[id]{scroll-margin-top:112px}}
/* A town arrived at from an old /home-remodeling-<town>-sc URL highlights itself,
   so a redirected visitor can see why they landed here. */
.towns li:target{background:var(--ink);color:#fff;border-color:var(--ink)}
.towns{list-style:none;padding:0;margin:1.6rem 0 0;display:flex;flex-wrap:wrap;gap:9px}
.towns li{border:1px solid var(--line);padding:7px 15px;font-size:.94rem;background:var(--paper)}
section.stone .towns li{background:#fff;border-color:transparent}
.towns.svc{justify-content:center;margin-top:2rem}
.towns.svc li{padding:0}
.towns.svc a{display:block;padding:9px 18px;text-decoration:none;color:inherit;font-weight:600}
.towns.svc a:hover{background:var(--ink);color:#fff}

/* the company email, published on their own site — inherit topbar colour, underline on hover */
.topbar .addr a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.28)}
.topbar .addr a:hover{border-bottom-color:currentColor}
footer.site a[href^="mailto:"]{color:inherit}

/* ================================================================
   2026-09-07 — Ben's feedback pass.
   "It's a LOT of words… letting the work speak for itself is what we
   pride ourselves on." Reference he named: demardi.com.au.
   ================================================================ */

/* ---------- quiet gallery: no captions, the photograph carries it ----------
   Captions are gone, alt text is not — the alt attribute is where the search
   value was, and it survives untouched on all 24 tiles. Rooms are still named
   (in the filter and in alt), locations still are NOT: we do not hold the
   project addresses and will not invent them. */
.galfilter{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:clamp(26px,3vw,40px)}
.galfilter button{font-family:var(--sans);font-size:.75rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;padding:11px 22px;border:1px solid var(--line);background:transparent;
  color:var(--muted);cursor:pointer;transition:.18s}
.galfilter button:hover{color:var(--ink);border-color:var(--ink)}
.galfilter button.on{background:var(--ink);border-color:var(--ink);color:#fff}
.gallery.quiet{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.gallery.quiet figure{margin:0;overflow:hidden;background:var(--stone)}
.gallery.quiet img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
  transition:transform .5s cubic-bezier(.2,.6,.2,1)}
.gallery.quiet a:hover img{transform:scale(1.035)}
@media(max-width:1000px){.gallery.quiet{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.gallery.quiet{grid-template-columns:1fr}}

/* ---------- service card "explore" affordance (demardi pattern) ---------- */
.card .more{display:inline-block;margin-top:1.1rem;font-family:var(--sans);font-size:.76rem;
  font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.card .more::after{content:" \2192";transition:transform .2s}
.card:hover .more::after{padding-left:5px}

/* ---------- service areas: a map, not a tab strip ---------- */
.areamap{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(34px,5vw,68px);align-items:center}
.areamap svg{width:100%;height:auto;display:block}
.areamap .dot{fill:var(--green-bright)}
.areamap .dot.hq{fill:var(--gold-lt)}
.areamap .tn{font-family:var(--sans);font-size:11.5px;font-weight:600;fill:#dfe4da;letter-spacing:.04em}
.areamap .tn.home{fill:#fff;font-size:13.5px;font-weight:700}
.areamap .tn.hq{fill:#fff;font-size:12px;font-weight:700}
.townlist{columns:2;column-gap:38px;margin:0;padding:0;list-style:none}
.townlist li{break-inside:avoid;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.10);
  font-size:.95rem;letter-spacing:.01em}
@media(max-width:900px){.areamap{grid-template-columns:1fr}.townlist{columns:2}}
@media(max-width:560px){.townlist{columns:1}}
.hero .hero-eyebrow{color:#e8ecdf;letter-spacing:.2em;margin-bottom:1.1rem;text-shadow:0 2px 10px rgba(0,0,0,.6)}
.areamap .ring{fill:none;stroke:rgba(200,162,74,.45);stroke-width:1.2;stroke-dasharray:5 5}
.areamap .rl{font-family:var(--sans);font-size:9px;letter-spacing:.14em;fill:rgba(255,255,255,.34);text-transform:uppercase}

/* 2026-09-07 — spacing pass. Michael: "some of the spacing is too close...looks bad."
   .more is a flex item now, so margin-top:auto drops it to a common baseline across the
   row regardless of how many lines the body runs, and it finally gets the 30px inset the
   heading and body already had. */
.card.svc-img .more{margin:auto 30px 30px;}

/* 2026-09-08 — the client login page. Michael: "there is redundancy here with two
   logins..keep the main one and compress page so they see the video next to the login."
   One band, one button, video beside it. h1 is sized to the .hero-page scale because
   the default h1 (up to 4.6rem) is a hero size and this page has no hero. */
/* Stone, not .dark: the footer is var(--ink) and a dark band above it abutted at 0px,
   so band and footer rendered as one continuous black slab with no boundary. Measured,
   not guessed — both computed to rgb(15,18,16). */
/* The sticky header CTA is the only "Request a consultation" on the site now — the hero
   copy of it was removed 2026-09-08 (Michael: "remove request consultation as its double
   up from the sticky menu on all pages"). On the consultation page itself that button
   points at the page you are already on and repeats the submit button's label, so it is
   hidden there and nowhere else. Display only — the markup stays byte-identical across
   pages, which is what nav-drift and header-drift check. */
.on-consultation .cta-head{visibility:hidden}
/* visibility, NOT display. .cta-head carries margin-left:auto — it is the element that
   pushes nav.main away from the logo. display:none removed the box and the nav jumped
   402px to the right on this page alone (measured: 431-906 elsewhere, 833-1308 here),
   so the menu slid across whenever you navigated to the form. Keeping the box keeps
   the header identical on all 23 pages. */

.login-band .eyebrow{color:var(--green)}
.login-band h1{margin-bottom:1.1rem}
.login-band .go{margin:1.9rem 0 2.1rem}
.login-band .eyebrow{margin-bottom:1rem}
.vid{position:relative;width:100%;aspect-ratio:16/9;margin:0 auto;overflow:hidden;
  border-radius:2px;background:#0a0c08;box-shadow:0 2px 24px rgba(20,23,17,.16)}
.vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0}


/* ============================================================================
   DARK MODE — 2026-09-09, Ben's third pass.
   "I prefer to keep this in dark mode... invert this and get like this black
   here and then go to white font." Asked for on the homepage, about, team,
   careers, service areas and gallery — applied sitewide, because a half-dark
   site reads as a bug rather than a choice.

   Done as a surface override, NOT by flipping --ink/--paper. --ink is
   overloaded: it is both the body text colour AND the header/footer
   background, so inverting the variable turns the header white.
   ========================================================================= */
body{background:#0f1210;color:#e7eae3}
section.stone{background:#161a16}
section.stone-2{background:#12150f}

h1,h2,h3,h4,h5{color:#f4f6f0}
p,li{color:#c2c8bd}
.lede{color:#d3d8cd}
.eyebrow,.kicker{color:var(--gold-lt)}
a{color:inherit}

/* surfaces that were white cards on a light ground */
.card,section.stone .card,section.stone-2 .card{background:#191d19;border:1px solid rgba(255,255,255,.09);box-shadow:none}
.person{background:#191d19;box-shadow:0 0 0 1px rgba(255,255,255,.09)}
.roles{background:#161a16;border:1px solid rgba(255,255,255,.10)}
.towns li,section.stone .towns li{background:#191d19;border:1px solid rgba(255,255,255,.10);color:#c2c8bd}
.gallery.quiet figure{background:#161a16}
input,select,textarea{background:#161a16;border:1px solid rgba(255,255,255,.16);color:#e7eae3}
input::placeholder,textarea::placeholder{color:#7f877c}

/* borders and rules */
.line,hr,.head{border-color:rgba(255,255,255,.10)}
cite{color:#98a094}
.src{color:#d3d8cd}

/* the one light button becomes the light-on-dark primary */
.btn.light{background:var(--gold-lt);color:#12150f;border-color:var(--gold-lt)}
.btn.light:hover{background:#d8b463;border-color:#d8b463}

/* operator-only note keeps its warning colour but stops glaring */
.placeholder-note{background:#2a2413;border-color:#5e5124;color:#e0d3a2}

/* the gallery: Ben asked for a black backdrop so the photos pop */
.gallery figure,.gallery img{background:#0b0d0b}

/* visually-hidden: the homepage h1 still exists for screen readers and search,
   but Ben asked for no words over the hero video. */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* --ink-soft and --muted are TEXT-ONLY (verified: never used as a background),
   so unlike --ink they are safe to flip for dark mode. At their light values
   they rendered at 1.67:1 on the dark ground — unreadable. */
:root{--ink-soft:#b6bdb1;--muted:#9aa294;--line:rgba(255,255,255,.14);--line-soft:rgba(255,255,255,.09)}

/* --- Header, two rows (2026-09-09) ---
   Ben asked for the address line moved above the nav; Michael asked for it
   centred ON THE PAGE. Centring it inside the right-hand column left it
   visually right-shifted, so the meta line is now its own full-width row
   above the logo+nav row and centres against the page, not the column. */
header.site>.wrap{padding-top:0;padding-bottom:0}
.headtop{display:block;padding-top:9px;padding-bottom:9px;
         border-bottom:1px solid rgba(255,255,255,.07)}
.headmeta{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;
          font-size:.8rem;letter-spacing:.09em;text-transform:uppercase;color:#aab3a4;text-align:center;width:100%}
.headmeta a{color:inherit;text-decoration:none;opacity:.92}
.headmeta a:hover{opacity:1;color:var(--gold-lt)}
.headmeta a.portal{color:var(--gold-lt)}
.headmain{display:flex;align-items:center;gap:34px;padding-top:14px;padding-bottom:14px}
.headrow{margin-left:auto;display:flex;align-items:center;gap:34px}
.headrow nav.main{margin-left:0}
.headrow .cta-head{margin-left:0}
@media(max-width:1100px){.headmeta{font-size:.74rem;gap:9px;letter-spacing:.06em}}
@media(max-width:860px){
  .logo img{height:74px}
  .headtop{display:none}
  .headmain{padding-top:10px;padding-bottom:10px}
}


/* The hero's one clean line — Ben: "just nice clean what we do".
   NOT position:absolute — `.hero > .wrap` (0,2,0) already sets position:relative
   and wins. The hero is a column flexbox and .wrap is flex:1 0 auto, so the line
   is placed by aligning it to the bottom of that existing box instead. */
.hero > .wrap.herolead{align-items:flex-end;padding-bottom:clamp(34px,5.5vw,68px)}
.herolead h1{color:#fff;font-family:var(--serif);font-weight:600;
             font-size:clamp(2.3rem,4.55vw,3.75rem);line-height:1.08;margin:0;max-width:24ch;
             letter-spacing:-.032em;text-shadow:0 2px 26px rgba(0,0,0,.6)}
@media(max-width:700px){.herolead h1{font-size:1.9rem;max-width:none}}

/* ---- Contrast fixes, 2026-09-09 (Michael: "the numbers on what happens next
   are very dark ... get the contrast right throughout").
   Found by auditing PSEUDO-ELEMENTS as well as elements — the earlier sweep
   queried only elements and reported clean while these three were failing. ---- */

/* the 01/02/03 step numbers: --green (#47671f) at opacity .4 on near-black = 1.76:1 */
.step::before{color:var(--green-bright);opacity:.85}

/* the Google badge keeps a WHITE background, so the global --ink-soft flip made
   its subtitle light-on-light. Scope those back to dark ink. */
.gbadge,.gbadge *{color:#1f2320}
.gbadge .gsub{color:#4a524a}
.gbadge .gstars{color:#e8a100}

/* dark-green dots on a dark ground were invisible too */
.ticks li::before{background:var(--green-bright)}

/* ---- Contrast, pass 2 (site-wide audit across all 23 pages, 2026-09-09) ----
   Root cause: --green (#47671f) is a dark olive built for a light ground and is
   used as TEXT in several places. It cannot be flipped globally the way
   --ink-soft was, because it is also used as a background and a border colour.
   So the text uses are remapped individually. */

/* .btn.ghost was color:var(--ink) — the SAME value as the dark page background.
   Ratio 1.00: a completely invisible button on services and blog. */
.btn.ghost{color:#e7eae3;border-color:rgba(255,255,255,.34)}
.btn.ghost:hover{background:#e7eae3;color:#12150f;border-color:#e7eae3}

/* dark-olive text on the dark ground */
.person .rl{color:var(--green-bright)}     /* team — role under each name (2.62) */
.role .meta{color:var(--green-bright)}     /* careers — job meta line (2.70)     */
.login-band .eyebrow{color:var(--gold-lt)} /* client-login (2.83)                */

/* Google stars sit on the badge's white ground. Google's own #f4b400 is 1.85:1
   there. These are rating glyphs, not text — the 4.9 and "53 Google reviews"
   beside them carry the same fact as real text — so they are treated as a UI
   component at the 3:1 threshold rather than pushed to 4.5:1, which would stop
   them reading as Google stars at all. */
.gbadge .gstars{color:#9c6b00}

/* ---- Spacing + hero heading scale, 2026-09-09 (Michael) — section padding cut
   from clamp(72px,9vw,132px), and the hero h1 lifted above the section h2 it was
   rendering smaller than. Both values now live at their single declaration:
   `section{padding}` and `.herolead h1`. ---- */

/* ---- Section rhythm, 2026-09-09 (Michael: "white text for the headline and then
   again for the next section ... there needs to be a different colour").
   Ben asked to stay in dark mode ("we don't need all the light stuff here"), so
   this is NOT a return to light sections. Instead the alternating ground gets a
   real step — #0f1210 vs #1b211a with a warm green cast, up from #161a16 which
   was only 7 levels off the body and read as one flat field — and the section
   label above each heading carries the brand gold so the eye has colour to land
   on before it hits another white headline. */
section.stone{background:#1b211a}
section.stone-2{background:#12160f}
section.stone + section:not(.stone),
section:not(.stone) + section.stone{border-top:1px solid rgba(255,255,255,.06)}

/* the kicker/eyebrow above a heading is the colour break */
.kicker,.eyebrow{color:var(--gold-lt);font-weight:600;letter-spacing:.2em}
section.stone .kicker,section.stone .eyebrow{color:var(--green-bright)}

/* alternate the heading tone very slightly so two stacked sections never read
   as the same block of white */
section.stone h2{color:#fbfcf8}
section:not(.stone) h2{color:#eef1e9}

/* ---- Top bar layout, 2026-09-09 (Michael: address centred in the bar,
   Client Login back to the right).
   Three-column grid so the address centres against the PAGE, not against the
   remaining space after Client Login — a plain flex row would push it left by
   half the width of the login link. The empty first column is what keeps it
   honest. */
.headtop{padding-top:13px;padding-bottom:13px}
.headmeta{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;width:100%}
.headmeta .metainfo{grid-column:2;display:flex;align-items:center;justify-content:center;
                    gap:12px;flex-wrap:wrap;text-align:center}
.headmeta .portal{grid-column:3;justify-self:end;white-space:nowrap}
@media(max-width:900px){
  .headmeta{grid-template-columns:1fr auto}
  .headmeta .metainfo{grid-column:1;justify-content:flex-start;text-align:left}
  .headmeta .portal{grid-column:2}
}

/* Two-quote layout — the card count and the column count must agree.
   Trimming the section to fewer cards without changing .qgrid left one card in a
   three-column grid with two empty columns, which reads as broken rather than
   restrained. */
.qgrid-2{grid-template-columns:repeat(2,1fr);max-width:960px;margin-left:auto;margin-right:auto}
@media(max-width:820px){.qgrid-2{grid-template-columns:1fr}}

/* ---- Hero headline colour, 2026-09-09 (Michael: "headline text needs to be a
   different colour to contrast with the next section").
   The hero h1 and the section h2 beneath it were both white, so the two read as
   one continuous voice. The h1 now carries the brand gold — the same accent as
   the header CTA — which separates it from every white heading below.
   The hero scrim is lifted from .116 to .34 because gold over an uncontrolled
   video frame needs more ground under it than white does. ---- */
.hero::after{background:rgba(8,10,7,.34)}
.herolead h1{color:var(--gold-lt);text-shadow:0 2px 30px rgba(0,0,0,.8),0 1px 3px rgba(0,0,0,.55)}

/* ---- Dropdown robustness, 2026-09-09 ----
   The hover mechanism itself tests fine in Chromium at 1338 and 1885 wide: the
   submenu opens, the cursor path stays inside .has-sub, and the child links are
   the topmost element at their own centres. So these are fixes for the failure
   modes a headless hover test CANNOT reproduce, not a fix for a reproduced bug.

   1. z-index — .sub was z-index:auto. It happens to paint above the CTA today
      only because it is positioned and the CTA is static. That is luck, not a
      rule; one `position:relative` added to the CTA later would bury the menu.
   2. The parent <a> is 5.8px TALLER than its own <li> (padding + 2px border on a
      centre-aligned flex row), so the dropdown's top edge opens underneath the
      parent link. A pointer leaving the link downwards crosses that seam.
   3. focus-within — a hover-only menu is unusable by keyboard, and on a touch
      screen or a trackpad tap the parent link NAVIGATES to services.html before
      the child is reachable, which is exactly "cannot pick sub menus".
   4. The Resources menu is the last one and already overlaps the CTA by 24px at
      1885 wide; on a narrower window it would run off the edge. Anchor it right. */
nav.main .has-sub > .sub{z-index:80}
nav.main .has-sub > a{position:relative;z-index:81}
nav.main .has-sub:hover > .sub,
nav.main .has-sub:focus-within > .sub{display:block}
/* a bridge across the link/menu seam so a downward pointer never drops out */
nav.main .has-sub > .sub::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}
/* the last menu opens leftwards so it cannot collide with the CTA or the edge */
nav.main > ul > li.has-sub:last-of-type > .sub{left:auto;right:-18px}

/* ---- Address moved into the logo bar, 2026-09-09 (Michael: "drop down to be in
   line with the logo so its within that bar and be lighter").
   One bar now: logo | address (centred, vertically in line with the logo) | nav.
   A three-column grid, not flex, because the middle column has to centre against
   the bar rather than against whatever space the logo and nav leave over.
   Below 1300px there is no honest room for it beside a 118px logo and six nav
   items, so it drops out — the same address is in the footer of all 23 pages. */
header.site > .wrap.headmain{display:grid;grid-template-columns:auto 1fr auto;
  align-items:center;gap:28px;padding-top:14px;padding-bottom:14px}
.headmeta{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;
  font-size:.79rem;letter-spacing:.05em;color:#d3d8cd;text-align:center;grid-column:2}
.headmeta .metainfo{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
.headmeta a{color:#e2e6dc;text-decoration:none}
.headmeta a:hover{color:var(--gold-lt)}
.headmeta a.portal{color:var(--gold-lt);font-weight:600}
.headrow{margin-left:0;display:flex;align-items:center;gap:30px}
@media(max-width:1300px){
  header.site > .wrap.headmain{grid-template-columns:auto auto;justify-content:space-between}
  .headmeta{display:none}
}

/* ---- Hero headline -> black, 2026-09-09 (Michael).
   This REVERSES the scrim I added an hour ago. Gold needed a darker ground
   (.116 -> .34); black needs the opposite or it disappears into the video's
   shadows. The overlay is now a light wash, weighted to the bottom-left where
   the line actually sits, so the rest of the footage stays as shot. ---- */
.hero::after{background:linear-gradient(105deg,rgba(255,255,255,.60) 0%,rgba(255,255,255,.34) 42%,rgba(255,255,255,.06) 72%,rgba(255,255,255,0) 100%)}
.herolead h1{color:#0d0f0c;text-shadow:0 1px 0 rgba(255,255,255,.5)}

/* ---- Header bar, corrected layout 2026-09-09 ----
   Putting logo | address | nav in ONE row squeezed the address into a middle
   column with no room: at the 1240px wrap it wrapped onto four lines beside a
   118px logo and six nav items. So the bar keeps the address (Michael: "within
   that bar", "in line with the logo") but gives it its own line INSIDE the bar,
   with the logo spanning both rows beside it. Client Login stays right. */
header.site > .wrap.headmain{
  display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;
  align-items:center;column-gap:34px;row-gap:6px;padding-top:12px;padding-bottom:12px}
.headmain > .logo{grid-column:1;grid-row:1 / span 2;align-self:center}
.headmeta{grid-column:2;grid-row:1;display:grid;grid-template-columns:1fr auto 1fr;
  align-items:center;gap:12px;white-space:nowrap}
.headmeta .metainfo{grid-column:2;display:flex;align-items:center;justify-content:center;gap:12px}
.headmeta .portal{grid-column:3;justify-self:end}
.headrow{grid-column:2;grid-row:2;display:flex;align-items:center;justify-content:flex-end;gap:30px}
@media(max-width:1200px){
  header.site > .wrap.headmain{grid-template-columns:auto 1fr;row-gap:0}
  .headmeta{display:none}
  .headmain > .logo{grid-row:1 / span 2}
}

/* ---- Nav breakpoint, 2026-09-09 — THE dropdown bug ----
   The desktop nav collapsed into the hamburger at max-width:1200px. Measured on
   the live site: at 1200 and below, nav.main is max-height:0/overflow:hidden and
   .sub becomes position:static — i.e. no dropdown at all, just an accordion
   behind a hamburger. Most laptop browser windows sit between 1200 and 1440, so
   that is what "the menu does not drop down" was: not a hover bug, a breakpoint.

   The nav now stays a real dropdown down to 1024px, with the chrome tightening
   progressively so it still fits. Hamburger only below 1024. */
@media(min-width:1024px){
  .hamburger{display:none}
  nav.main{display:block;max-height:none;overflow:visible;width:auto;order:0}
  nav.main ul{flex-direction:row;align-items:center;gap:26px;padding:0}
  nav.main li{border-top:0}
  nav.main a{display:inline-block;padding:8px 0;font-size:.9rem}
  nav.main .has-sub > .sub{display:none;position:absolute;min-width:240px;
    background:var(--ink-2);border:1px solid rgba(255,255,255,.12);
    box-shadow:0 22px 50px rgba(0,0,0,.5);padding:8px 0;z-index:80}
  nav.main .has-sub:hover > .sub,
  nav.main .has-sub:focus-within > .sub{display:block}
  nav.main .sub a{display:block;padding:10px 22px;font-size:.9rem;color:#dfe4da}
}
/* 1024–1320: tighten so six items, the CTA and a 118px logo all fit */
@media(min-width:1024px) and (max-width:1320px){
  .headmain > .logo img{height:88px}
  nav.main ul{gap:18px}
  nav.main a{font-size:.84rem}
  .cta-head{font-size:.72rem;padding:10px 15px;letter-spacing:.1em}
  .headmeta{font-size:.72rem;gap:8px}
  header.site > .wrap.headmain{column-gap:20px}
}
@media(min-width:1024px) and (max-width:1150px){ .headmeta{display:none} }

/* click/tap-opened dropdown (see the script in the header partial) */
@media(min-width:1024px){
  nav.main .has-sub.is-open > .sub{display:block}
}

/* Video slightly darker (Michael). The light wash behind the headline stays —
   the h1 is black and needs it — but a low overall tint now sits under it so
   the footage reads calmer without losing the headline. */
.hero::after{background:
  linear-gradient(105deg,rgba(255,255,255,.56) 0%,rgba(255,255,255,.30) 40%,rgba(255,255,255,.04) 70%,rgba(255,255,255,0) 100%),
  rgba(10,12,8,.20)}

/* .scrollcue removed 2026-09-09. It was a 1px white gradient bar at left:50%,
   bottom:96px over the hero — a deliberate scroll hint that both Ben and Michael
   independently read as a flaw in the video ("a white line that runs down the
   middle"). It sat at a FIXED screen position, which is why it appeared over
   different video frames and looked like an encoding artifact. It is not in
   their footage; it was ours. */
.scrollcue{display:none !important}

/* ---- Heading scale, 2026-09-09 (Michael: "a slight heading size change from
   the main hero heading and subsequent section headings"). The step it opened
   between the hero h1 and the section h2 is preserved; both values now live in
   the ONE SCALE at the top of this file. ---- */

/* ---- Buttons and the consultation form (re-applied 2026-09-09) ----
   These were lost once already: restoring assets/ from git to repair the logo
   also reverted assets/site.css, which lives in the same directory. Caught by
   checking the DEPLOYED stylesheet rather than the local one.

   THE INVISIBLE BUTTON: .btn is background:var(--ink) with a border of the same
   value — and in dark mode --ink IS the page background (#0f1210). A dark box
   with a dark border on a dark page: white text floating with no button around
   it. That is why 'Go to your portal' could not be seen on client-login. The
   contrast sweep passed it because the text is readable against its OWN fill;
   the failure is the button against the PAGE, a different measurement. */
.btn{background:var(--gold-lt);border-color:var(--gold-lt);color:#12150f}
.btn:hover{background:#d8b463;border-color:#d8b463;color:#12150f}
.btn.ghost{background:transparent;color:#e7eae3;border-color:rgba(255,255,255,.38)}
.btn.ghost:hover{background:#e7eae3;color:#12150f;border-color:#e7eae3}

/* The consultation form sits ON a lighter surface than the page (Michael), so
   the thing you are asked to fill in is the brightest object on screen. */
#consultation.stone-2, section#consultation{background:#1e241d}
#consultation .form{background:#2a312a;border:1px solid rgba(255,255,255,.12);
  padding:clamp(22px,3vw,34px);border-radius:2px}
#consultation .form input,#consultation .form select,#consultation .form textarea{
  background:#f4f6f1;border:1px solid rgba(0,0,0,.18);color:#14180f}
#consultation .form input::placeholder,#consultation .form textarea::placeholder{color:#6a7266}
#consultation .form label{color:#e9ede4}

/* ---- Centred blocks, restored 2026-09-09 ----
   Removing .head.mid was wrong: those sections ("What our customers are saying",
   "Where to go next", "The rest of what we do") are centred CARD BLOCKS, and
   left-aligning only the heading left it hard left while the badge and the grid
   beneath still read as centred. Centring is right where the block is centred;
   the fix was never to make everything left. The badge now centres with it. */
.head.mid + .gbadge,
.head.mid ~ .gbadge{margin-left:auto;margin-right:auto}
section:has(> .wrap > .head.mid) .gbadge{margin-left:auto;margin-right:auto}


/* ---- Consultation page proportions, 2026-09-09 (Michael: heading and form both
   too big). The h1 was inheriting the hero-scale rule and ran two full-width
   lines; the form stretched the whole 1240px wrap, giving ~530px input fields.
   A form is easier to fill when it is narrower than the page, not wider. ---- */
/* THE ONE EXCEPTION to the scale at the top of this file. Kept deliberately. */
#consultation h1{font-size:clamp(1.6rem,2.5vw,2.15rem);line-height:1.22;
  max-width:22ch;margin-bottom:1.6rem;letter-spacing:-.02em}
#consultation .wrap{max-width:860px}
#consultation .form{gap:16px;padding:clamp(20px,2.4vw,28px)}
#consultation .form input,#consultation .form select,#consultation .form textarea{
  font-size:.94rem;padding:11px 13px}
#consultation .form label{font-size:.7rem;letter-spacing:.13em;margin-bottom:6px}
#consultation .form textarea{min-height:110px}
#consultation .btn{font-size:.82rem;padding:13px 26px}
#consultation .form .small,#consultation .form p{font-size:.86rem}

/* ---------- Why choose us: the clickable panel Ben asked to have back ----------
   greenvkb.com's original homepage carried a six-tab "Why Choose Us?" component over photo
   backdrops. Ben, 2026-09-09: "I actually love the way the original page functioned here and
   was kind of clickable... I actually like the way the picture backdrops in it too."
   The interaction is restored; the copy is not. Theirs was stock contractor boilerplate
   ("a leader in home improvement services... results that are beyond expectations") and none
   of it traced to a review. Their six TITLES are kept — they are the client's own and he likes
   them — and every body carries a named review underneath it.
   Radio inputs rather than JS: the header nav already uses a checkbox for the same reason, and
   a tab that needs a script is a tab that is blank if the script fails. */
.why .tabs{position:relative}
.why .tabs > input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.why .tablist{display:flex;flex-wrap:wrap;justify-content:center;gap:0;
  border-bottom:1px solid var(--line-soft)}
.why .tablist label{cursor:pointer;padding:14px 20px;margin-bottom:-1px;
  font-size:.76rem;letter-spacing:.11em;text-transform:uppercase;font-weight:600;
  color:var(--muted);border-bottom:2px solid transparent;transition:color .18s,border-color .18s}
.why .tablist label:hover{color:#fff}
.why .panels{margin-top:0}
.why .panel{display:none;position:relative;min-height:clamp(340px,42vw,460px);
  align-items:flex-end;overflow:hidden;color:#fff}
.why .panel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.why .panel::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,12,8,.20) 0%,rgba(10,12,8,.62) 55%,rgba(10,12,8,.86) 100%)}
.why .pcopy{position:relative;z-index:2;padding:clamp(26px,4vw,54px);max-width:820px}
.why .pcopy h3{color:#fff;margin-bottom:.7rem}
.why .pcopy p{color:#e4e9dd;max-width:640px}
.why .pcopy blockquote{margin:1.4rem 0 0;padding-left:18px;border-left:2px solid var(--green-bright);
  font-style:italic;color:#fff;max-width:640px}
.why .pcopy blockquote cite{display:block;margin-top:.6rem;font-style:normal}
/* one :checked rule per tab — six tabs, six pairs. Keyboard users get focus for free
   because the control really is a radio group. */
.why #why1:checked ~ .tablist label[for=why1],
.why #why2:checked ~ .tablist label[for=why2],
.why #why3:checked ~ .tablist label[for=why3],
.why #why4:checked ~ .tablist label[for=why4],
.why #why5:checked ~ .tablist label[for=why5],
.why #why6:checked ~ .tablist label[for=why6]{color:#fff;border-bottom-color:var(--gold-lt)}
.why #why1:checked ~ .panels .panel:nth-child(1),
.why #why2:checked ~ .panels .panel:nth-child(2),
.why #why3:checked ~ .panels .panel:nth-child(3),
.why #why4:checked ~ .panels .panel:nth-child(4),
.why #why5:checked ~ .panels .panel:nth-child(5),
.why #why6:checked ~ .panels .panel:nth-child(6){display:flex}
.why .tabs > input:focus-visible + .tablist label,
.why .tabs > input:focus-visible ~ .tablist label{outline:none}
@media(max-width:720px){
  .why .tablist{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .why .tablist label{padding:12px 14px;font-size:.7rem;white-space:nowrap}
}

/* ---------- typical project timeline (process page) ----------
   Their own /our-process publishes real durations per stage and our rebuild carried none of
   them. Ben, 2026-09-09: "I don't like quite how simple it is because I think we do put a lot
   more in the process... down here is kind of where the project phase is." */
table.timeline{width:100%;border-collapse:collapse;margin-top:4px}
table.timeline th,table.timeline td{text-align:left;vertical-align:top;padding:20px 18px 20px 0;
  border-top:1px solid var(--line-soft)}
table.timeline tr:first-child th,table.timeline tr:first-child td{border-top:0}
table.timeline th{font-family:var(--serif);font-weight:600;font-size:1.06rem;width:27%;color:#fff}
table.timeline td.dur{width:15%;font-size:.8rem;letter-spacing:.09em;text-transform:uppercase;
  font-weight:600;color:var(--green-bright);white-space:nowrap}
table.timeline td:last-child{color:var(--muted)}
@media(max-width:720px){
  table.timeline th,table.timeline td{display:block;width:auto;padding:0;border-top:0}
  table.timeline tr{display:block;padding:20px 0;border-top:1px solid var(--line-soft)}
  table.timeline tr:first-child{border-top:0}
  table.timeline td.dur{margin:.35rem 0 .6rem}
}

/* Form labels in caps, one step smaller — Ben, 2026-09-09: "I don't love the way the fonts are.
   I would like these in caps, maybe a little smaller." Same treatment as the nav and the header
   meta line, which is the caps look he pointed at ("I love the way it presents itself up here"). */
.form label{font-size:.74rem;letter-spacing:.11em;text-transform:uppercase;font-weight:600}
/* The referral field only exists once a referral is chosen; [hidden] must beat the grid's
   display:block or it renders anyway. */
.form [hidden]{display:none}

/* ---------- live Google reviews (reviews.html) ---------- */
.revgrid{display:grid;grid-template-columns:1fr;gap:0}
.revgrid .rev{margin:0;padding:30px 0;border-top:1px solid var(--line-soft)}
.revgrid .rev:first-child{border-top:0}
.revgrid .stars{color:var(--gold-lt);letter-spacing:.14em;font-size:.92rem;margin-bottom:.7rem}
.revgrid .rev blockquote{margin:0;font-size:1.02rem;line-height:1.6;color:var(--ink-soft)}
.revgrid .rev figcaption{margin-top:.9rem;font-size:.8rem;letter-spacing:.09em;
  text-transform:uppercase;font-weight:600;color:#fff}
.revgrid .rev .ago{color:var(--muted);font-weight:400;text-transform:none;letter-spacing:.03em}
#revsum b{color:#fff}

/* ---------- service-area map, rebuilt 2026-09-10 ----------
   Ben: "Can we get this to be a map?... I like how they split it up by county."
   The old graphic was dots on distance rings with no landmass, which is why it did not read as
   a map. This is the real state outline with the towns projected onto it (equirectangular,
   cos(33.6 deg) correction) so the dots sit where the towns actually are. */
.areamap .state{fill:rgba(255,255,255,.05);stroke:rgba(255,255,255,.28);stroke-width:1.2;
  stroke-linejoin:round}
.areamap .dot.home{fill:var(--gold-lt)}
.areamap .stname{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.22em;
  fill:rgba(255,255,255,.20)}
.areamap .stlabel{font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.2em;
  fill:rgba(255,255,255,.26)}
.areamap .rl{font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.14em;
  fill:var(--gold-lt)}
.counties{display:grid;grid-template-columns:1fr 1fr;gap:24px 38px}
.counties .cty h3{font-size:.76rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--green-bright);margin:0 0 .6rem}
.counties .cty ul{margin:0;padding:0;list-style:none}
.counties .cty li{padding:6px 0;border-bottom:1px solid rgba(255,255,255,.10);font-size:.95rem}
.counties .cty li:last-child{border-bottom:0}
@media(max-width:560px){.counties{grid-template-columns:1fr}}


/* ---------- caps pass, 2026-09-10 ----------
   Ben: "There's a lot of lowercase letters in here. I just love the way all capital letters
   presents themselves everywhere... I love the way it presents itself up here." "Up here" is the
   header, which is uppercase. Applied to the SMALL LABEL tier only — eyebrows, buttons, card
   links, form labels, footer column headings, team role lines — all of which were already caps or
   are now. NOT applied to h1/h2/h3: all-caps costs reading speed over a full line, and the serif
   headings are the thing that makes this look like a builder rather than a template. That is a
   judgement, not a rule; if he wants headings in caps too it is one line here. */

/* Bios restored from their live site are 4-6 paragraphs each; without this they render as one
   unbroken wall. Their own page breaks a sentence wherever the company name is a separate text
   node, so the paragraphs are re-joined on extraction rather than styled around. */
.person p{margin:0 0 1rem}
.person p:last-child{margin-bottom:0}


/* ---- Live Google reviews, 2026-09-10 — mirrors their own widget ----
   No section heading: their site runs these as a bare strip and Michael asked
   for the same. Avatar carries the real Google profile photo from the feed with
   the Google glyph pinned to it, which is what signals the source now that the
   "Straight from Google" header is gone. One line of text, then Read More.
   The gcite link stays in the DOM but visually hidden — site-integrity's
   unattributed-quote rule counts it, and the card stays as clean as theirs. */
.qgrid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,2.6vw,40px)}
/* a class rule with display:grid outranks the UA [hidden] rule — without this the
   static fallback stayed on screen underneath the live one, as two identical rows */
#whatpeoplesay [hidden]{display:none !important}
/* The strip is not a content section and should not breathe like one: it carries
   three one-line quotes and a link. Its own padding runs ~15% under the section
   rhythm so it reads as a band between the hero and "What we do". */
#whatpeoplesay{padding:clamp(24px,2.5vw,37px) 0}
#whatpeoplesay .rev{margin:0;padding:0;border:0;background:none}
#whatpeoplesay .revhead{display:flex;align-items:center;gap:12px;margin-bottom:.5rem}
#whatpeoplesay .av{position:relative;flex:0 0 auto;width:44px;height:44px;display:block}
#whatpeoplesay .avphoto{width:44px;height:44px;border-radius:50%;object-fit:cover;display:block}
#whatpeoplesay .avinit{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;background:var(--gold-lt);color:#12150f;font-family:var(--sans);
  font-weight:700;font-size:1.05rem}
#whatpeoplesay .gbadge-mini{position:absolute;right:-3px;bottom:-3px;width:19px;height:19px;
  background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;
  box-shadow:0 1px 3px rgba(0,0,0,.4)}
#whatpeoplesay .gbadge-mini svg{width:12px;height:12px}
#whatpeoplesay .who{display:flex;flex-direction:column;line-height:1.25}
#whatpeoplesay .who b{font-family:var(--serif);font-size:1.12rem;font-weight:700;color:#f4f6f0}
#whatpeoplesay .who .ago{font-size:.86rem;color:#9aa294}
#whatpeoplesay .stars{color:var(--gold-lt);letter-spacing:2px;font-size:1.05rem;line-height:1.2;margin-bottom:.4rem}
#whatpeoplesay blockquote{margin:0;font-family:var(--serif);font-size:1.06rem;line-height:1.5;
  color:#dfe4d8}
#whatpeoplesay blockquote.clamp1{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden}
#whatpeoplesay .readmore{background:none;border:0;padding:0;margin-top:.3rem;cursor:pointer;
  font-family:var(--serif);font-size:1.02rem;color:var(--gold-lt)}
#whatpeoplesay .readmore:hover{text-decoration:underline}
/* margin-bottom:0 is load-bearing — .revlink is a <p>, so the UA's 1rem bottom
   margin was adding ~18px INSIDE the section padding and reading as a deeper
   floor than ceiling (76px against 58px). */
.revlink{text-align:center;margin:clamp(16px,1.6vw,22px) 0 0}
.revlink .glink{color:var(--gold-lt);text-decoration:none;font-weight:600}
.revlink .glink:hover{text-decoration:underline}
@media(max-width:900px){.qgrid-3{grid-template-columns:1fr}}

/* ---- Section rhythm, second pass, 2026-09-10 (Michael: "tighter") — 115px
   between sections at 1440, down from 167px. The value lives at `section{padding}`.
   The 2026-09-10 sweep found one section still outside it: .login-band carried its
   own clamp(56px,6.5vw,92px), so /client-login ran 60% looser than every other
   page. That override is gone; there is one rhythm now. ---- */

/* ---- Section rhythm, THIRD pass, 2026-09-10 (Michael: "too much space between
   sections") — 86px between sections at 1440, down from 115px. Three things moved
   together, because on the second pass only the first one did and the other two
   kept their old hard-coded numbers:
     1. `section{padding}` clamp(34px,4vw,58px) -> clamp(28px,3vw,44px)
     2. footer.site top padding, now the same EXPRESSION rather than a copied 58px
     3. the review strip, which gets its own value ~15% under the rhythm
   Two stray margins inside the strip were also removed: the .revlink <p> carried
   the UA 1rem bottom margin, and .stars inherited a 1.65 body line-height on a
   glyph row that needs none. ---- */

/* ---- Address matched to the nav's size, 2026-09-10 (Michael: "make address the
   same size as the menu text"). The bar ran the address at .79rem under a .9rem
   nav — 12.64px against 14.4px, close enough to read as a slip rather than a
   hierarchy. Both desktop steps move together so it holds from 1024px up; below
   that .headmeta is hidden anyway. Client Login is untouched. ---- */
.headmeta .metainfo{font-size:.9rem}
@media(min-width:1024px) and (max-width:1320px){ .headmeta .metainfo{font-size:.84rem} }

/* ---- Brand colour system, made consistent 2026-09-10 (Michael: "ensure that
   the branding colours are consistent and alternate").

   SURFACES — two that alternate, instead of four that read as one.
   Base #0f1210 and stone #1b211a now alternate band by band down every page.
   section.dark was background:var(--ink) — the exact base colour — so a "dark"
   band placed after a base one changed nothing at all (blog, process and
   services all closed that way). .stone-2 (#12150f) and the consultation page
   (#1e241d) were two more near-base tones nobody could tell apart. All three
   resolve to the stone band, so there are two surfaces and they alternate.

   ACCENTS — one job each, everywhere.
   Green #8fd14f (the logo green) = labels and identity: eyebrows, kickers,
   role lines, tick bullets, step numbers, map pins.
   Gold #c8a24a = action and emphasis: buttons, the header CTA, links, the
   card's "Explore →", nav hover, review stars.
   Before this an eyebrow was gold on one band and green on the next; .more was
   still on the LIGHT theme's --gold (#b08a1e, muddy on this ground) and
   .glink:hover on the light theme's --green (#47671f, near-invisible). ---- */
section.dark{background:#1b211a}
section.stone-2,section#consultation,#consultation.stone-2{background:#1b211a}

.eyebrow,.kicker,
section.stone .eyebrow,section.stone .kicker,
section.dark .eyebrow,section.dark .kicker,
.login-band .eyebrow{color:var(--green-bright)}
.rl{color:var(--green-bright)}

.card .more{color:var(--gold-lt)}
.glink:hover{color:var(--gold-lt)}

/* ---- blog post pages (added 2026-09-10) ------------------------------------
   The index shipped nine "Read the full article" buttons pointing at
   greenvkb.com/blog — the site this one replaces. The posts are now standalone
   pages at the company's own existing slugs, so no URL changes and no redirect
   is needed. These rules are the article body: a reading measure, a heading
   scale that sits UNDER the page h1 instead of competing with it, and a
   prev/next foot. .postmeta was already used by blog.html and had no rule at
   all — it rendered as a plain paragraph. ---- */
.postmeta{font-size:.86rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin:0 0 .9rem;font-weight:700}
.postmeta a{color:var(--green);text-decoration:none}
.postmeta a:hover{color:var(--gold)}
/* The lead image sits on the copy measure, not the page measure. Full-bleed against a
   68ch column read as two different pages stacked. */
.postlead{width:100%;max-width:68ch;max-height:clamp(240px,28vw,380px);object-fit:cover;margin:clamp(34px,4.5vw,54px) 0 0}
.postbody{margin-top:clamp(34px,4.5vw,54px)}
.postbody h2{font-size:clamp(1.5rem,2.1vw,1.95rem);margin:2.4em 0 .55em;letter-spacing:-.012em}
.postbody h3{font-size:clamp(1.2rem,1.6vw,1.35rem);margin:2em 0 .5em}
.postbody h2:first-child,.postbody h3:first-child{margin-top:0}
.postbody p{max-width:68ch;margin:0 0 1.25em}
/* .wrap.narrow p centres its measure, which reads as an indent under a left-aligned
   heading. Inside an article the copy column starts where the headings start. */
.postpage .wrap.narrow p,.postpage .wrap.narrow ul{margin-left:0;margin-right:0}
.postpage .wrap.narrow p{max-width:68ch}
.postbody .ticks{margin:1.3rem 0 1.8rem}
.postbody a{color:var(--gold);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.postbody a:hover{color:var(--ink)}
.postnav{border-top:1px solid var(--line-soft)}
.postnav .wrap{display:grid;grid-template-columns:1fr 1fr;gap:32px;padding-top:34px;padding-bottom:34px}
.postnav .r{text-align:right}
.postnav .pn{display:block;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:.35rem;font-weight:700}
.postnav a{font-family:var(--serif);font-size:1.12rem;line-height:1.25;text-decoration:none}
.postnav a:hover{color:var(--gold)}
.posts .post h3 a{text-decoration:none}
.posts .post h3 a:hover{color:var(--gold)}
.row h2 a{text-decoration:none}
.row h2 a:hover{color:var(--gold)}
@media(max-width:720px){
  .postnav .wrap{grid-template-columns:1fr}
  .postnav .r{text-align:left}
}
.posts .post{padding:30px 0}
.posts .post p{margin-left:0;margin-right:0;max-width:68ch}
.posts .post .postmeta{margin-left:0;margin-right:0}
.posts .post .more{display:inline-block;margin-top:1rem;font-family:var(--sans);font-size:.76rem;
  font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);text-decoration:none}
.posts .post .more::after{content:" \2192";transition:padding-left .2s}
.posts .post:hover .more::after{padding-left:5px}

.hp{position:absolute!important;left:-9999px!important;opacity:0;height:0;overflow:hidden}