/* Greencare Noosa — shared styles.
   Tokens lifted verbatim from the showcase Mick has already seen and approved
   (thecoalesce.co/greencare/). Nothing invented, nothing re-styled.
   System fonts only: no external requests, nothing to load, nothing to break. */

:root{
  --green:#72BC39; --green-deep:#5C9E2A; --green-ink:#3C6E18; --lime:#8FD84E;
  --green-soft:rgba(114,188,57,.14); --green-line:rgba(114,188,57,.34);
  --char:#14170E; --char-2:#20241A;
  --paper:#F4F6EE; --surface:#FFFFFF; --raise:#F8FAF4;
  --ink:#171C10; --muted:#57614A; --hair:#E2E7D8; --hair-2:#CCD4BE;
  --warn:#8A6A12; --warn-bg:#FDF6E3; --warn-line:#E8D89B;
  --sans:"Avenir Next","Avenir","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Charter,Georgia,serif;
  --ink-deep:#0B0E07;
  --sand:#EDEFE4;
  --rule:rgba(255,255,255,.16);
  --display:"Iowan Old Style","Superclarendon","Palatino Linotype",Palatino,Charter,Georgia,"Times New Roman",serif;
}

*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--green-deep)}
/* ---------- ONE PAGE GRID (2026-08-16) ----------------------------------
   The header's .bar is the canonical line: max-width 960, 22px padding, so
   page content begins at the same x as the Greencare logo on every page.
   Four different outer widths were in use — 960 (header, gallery), 1120
   (home hero), 924 (home body, Meet Mick) and 720 (service area, quote) —
   which is why content jumped left and right between pages.
   🔑 Narrow READING measures are preserved, but as a cap on the CONTENT
   INSIDE the container, never by shrinking the container itself. */
.wrap{max-width:960px;margin:0 auto;padding:0 22px}
.wrap.narrow{max-width:960px}
.wrap.narrow > *{max-width:720px}

/* ---------- header ---------- */
header{background:var(--char);position:sticky;top:0;z-index:40}
.bar{display:flex;align-items:center;gap:18px;padding:12px 22px;max-width:960px;margin:0 auto}
.bar img{height:38px;width:auto}
nav{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
nav a{color:#C9D3BB;text-decoration:none;font-size:14.5px;font-weight:600;padding:8px 12px;border-radius:8px}
nav a:hover{color:#fff;background:rgba(255,255,255,.08)}
nav a[aria-current="page"]{color:#fff;background:rgba(114,188,57,.24)}
.callbtn{background:var(--green);color:#fff!important;padding:8px 16px;border-radius:100px;font-weight:800;
  display:inline-flex;align-items:center;gap:7px}
.callbtn svg{width:14px;height:14px;fill:currentColor;flex:none;display:block}
.callbtn:hover{background:var(--green-deep)!important}

/* ---------- hero ---------- */
.hero{background:linear-gradient(140deg,#7EC93F,#5C9E2A);color:#fff;text-align:center;padding:52px 0 46px}
.hero .frog{width:190px;height:auto;margin:0 auto 14px;filter:drop-shadow(0 14px 22px rgba(0,40,10,.34))}
.hero h1{font-family:var(--serif);font-size:clamp(28px,6vw,44px);font-weight:600;line-height:1.08;letter-spacing:-.015em}
.hero p{margin-top:12px;color:rgba(255,255,255,.94);font-size:16.5px;max-width:38ch;margin-left:auto;margin-right:auto}
.hero .cta{margin-top:24px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ---------- type ---------- */
section{padding:48px 0}
.k{font-size:12px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--green-deep)}
h2{font-family:var(--serif);font-size:clamp(23px,4.4vw,32px);font-weight:600;margin:8px 0 14px;letter-spacing:-.01em;line-height:1.16}
h3{font-family:var(--serif);font-size:19px;font-weight:600;margin-bottom:6px}
p.body{font-size:17px;margin:0 0 16px}
p.body.muted{color:var(--muted);font-size:16px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--green);color:#fff;
  text-decoration:none;font-weight:800;font-size:15.5px;padding:14px 24px;border-radius:100px;border:none;
  box-shadow:0 10px 26px rgba(114,188,57,.4);cursor:pointer;font-family:inherit;transition:background .15s}
.btn:hover{background:var(--green-deep)}
.btn.dark{background:var(--char);box-shadow:0 10px 26px rgba(0,0,0,.22)}
.btn.dark:hover{background:var(--char-2)}
.btn.ghost{background:#fff;color:var(--green-deep);box-shadow:none;border:1.5px solid var(--green-line)}
.btn:disabled{opacity:.5;cursor:not-allowed}
/* Decorative icons inside a button. Mirrors the header .callbtn sizing so the
   phone glyph reads identically in both places. Added 2026-08-18. */
.btn svg{width:17px;height:17px;fill:currentColor;flex:none;display:block}

/* ---------- cards ---------- */
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));margin-top:20px}
.card{background:var(--surface);border:1px solid var(--hair);border-radius:14px;padding:20px 22px}
.card p{font-size:14.5px;color:var(--muted);margin-top:4px}

/* ---------- forms ---------- */
.field{margin-bottom:18px}
.field label{display:block;font-weight:700;font-size:14.5px;margin-bottom:6px}
.field .hint{font-weight:400;color:var(--muted);font-size:13.5px}
input[type=text],input[type=tel],input[type=email],select,textarea{
  width:100%;font:inherit;font-size:16px;padding:12px 14px;border:1.5px solid var(--hair-2);
  border-radius:10px;background:var(--surface);color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px var(--green-soft)}
textarea{resize:vertical;min-height:80px}
fieldset{border:none}
legend{font-weight:700;font-size:14.5px;margin-bottom:8px}
.choices{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.choice{display:flex;align-items:flex-start;gap:10px;background:var(--surface);border:1.5px solid var(--hair);
  border-radius:12px;padding:13px 15px;cursor:pointer}
.choice:hover{border-color:var(--green-line)}
.choice input{margin-top:3px;accent-color:var(--green);width:17px;height:17px;flex:none}
.choice.on{border-color:var(--green);background:var(--green-soft)}
.choice b{font-size:15px}
.svc-detail{margin:10px 0 0 0;padding:14px 15px;background:var(--raise);border:1px solid var(--hair);border-radius:12px}
.svc-detail .field:last-child{margin-bottom:0}
.row{display:grid;gap:16px;grid-template-columns:1fr 1fr}
@media(max-width:640px){.row{grid-template-columns:1fr}}

/* ---------- the out-of-area notice — Mick's own wording, never a fee ---------- */
.notice{margin-top:10px;padding:15px 17px;border-radius:12px;font-size:15px;display:none}
.notice.show{display:block}
.notice.out{background:var(--warn-bg);border:1px solid var(--warn-line);color:var(--warn)}
.notice.in{background:var(--green-soft);border:1px solid var(--green-line);color:var(--green-ink)}

/* ---------- area lists ---------- */
.pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.pill{background:var(--surface);border:1px solid var(--hair);border-radius:100px;padding:7px 15px;font-size:14.5px;font-weight:600}
.pill.primary{border-color:var(--green-line);background:var(--green-soft);color:var(--green-ink)}

.quotebar{background:var(--char);color:#fff;border-radius:18px;padding:30px 28px;text-align:center;margin:28px 0}
.quotebar .big{font-family:var(--serif);font-size:clamp(20px,4vw,27px);font-weight:600;line-height:1.25}
.quotebar .big em{font-style:normal;color:var(--lime)}

footer{background:var(--char);color:#C9D3BB;padding:34px 0 42px;text-align:center;font-size:13.5px}
footer a{color:#fff;font-weight:700;text-decoration:none}
footer .sml{margin-top:10px;color:#8E9A80;font-size:12.5px}

/* Build-status banner. LOCAL ONLY — removed before anything is deployed. */
.buildnote{background:#20241A;color:#C9D3BB;font-size:12.5px;text-align:center;padding:7px 22px}
.buildnote b{color:var(--lime)}

/* ---------- added with the service pages ---------- */
.skip{position:absolute;left:-9999px;top:0;background:var(--char);color:#fff;padding:12px 18px;
  border-radius:0 0 10px 0;font-weight:700;z-index:100;text-decoration:none}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--green);outline-offset:2px}
.pagetitle{font-family:var(--serif);font-size:clamp(26px,5vw,38px);font-weight:600;
  margin:8px 0 16px;letter-spacing:-.015em;line-height:1.12}
a.card{display:block;text-decoration:none;color:inherit;transition:border-color .15s,transform .15s}
a.card:hover{border-color:var(--green-line);transform:translateY(-2px)}
a.card h3{color:var(--green-ink)}
.notfound{text-align:center;padding:70px 0}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* Mick's own bullet points, from his published material */
.points{margin:0 0 18px 0;padding:0;list-style:none;display:grid;gap:8px}
.points li{position:relative;padding-left:26px;font-size:16px}
.points li::before{content:"";position:absolute;left:4px;top:8px;width:8px;height:8px;
  border-radius:2px;background:var(--green)}

/* ── GALLERY ─────────────────────────────────────────────────────────────
   Added 2026-08-12 with the gallery page. Uses the tokens already defined
   above; nothing existing was restyled. */
.galsec{margin-top:34px}
.galsec:first-of-type{margin-top:22px}
.galsec h2{font-size:23px;margin:0}
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin-top:26px}
.galitem{display:block;border-radius:10px;overflow:hidden;background:#e9ede8;line-height:0;
         box-shadow:0 1px 2px rgba(0,0,0,.08);transition:transform .18s ease,box-shadow .18s ease}
/* SQUARE tiles. Measured 2026-08-18: every gallery photograph displays 465x620
   PORTRAIT (all 48 carry EXIF orientation 6), so the old fixed 200px height
   was discarding ~49% of each image on desktop and ~67% on mobile.
   1:1 keeps 75% and stays tight. 3:4 would crop nothing but is a wall of
   full-height portraits, which was expressly not wanted. */
.galitem img{width:100%;aspect-ratio:1/1;height:auto;object-fit:cover;display:block}
.galitem:hover,.galitem:focus-visible{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.16)}
.galitem:focus-visible{outline:3px solid var(--ink,#22301f);outline-offset:2px}

dialog#lb{border:0;padding:0;background:transparent;max-width:min(96vw,1200px);width:100%}
dialog#lb::backdrop{background:rgba(15,20,14,.86)}
#lbImg{width:100%;height:auto;max-height:80vh;object-fit:contain;border-radius:8px;display:block}
.lbclose{position:absolute;top:-6px;right:-6px;width:44px;height:44px;border:0;border-radius:50%;
         background:#fff;font-size:26px;line-height:1;cursor:pointer}
.lbnav{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:14px;color:#fff}
.lbnav button{min-width:56px;height:44px;border:0;border-radius:8px;background:rgba(255,255,255,.15);
              color:#fff;font-size:19px;cursor:pointer}
.lbnav button:hover{background:rgba(255,255,255,.28)}
@media (prefers-reduced-motion:reduce){.galitem{transition:none}}
@media (max-width:520px){.gal{grid-template-columns:repeat(2,1fr);gap:10px}}

/* Greeny placements. His own artwork, cropped from his concept sheet. */
.frog.mm{max-width:150px;height:auto;display:block;margin:0 auto 6px}
.frog.svc{max-width:130px;height:auto;display:block;margin:0 0 10px}
@media (max-width:520px){.frog.mm,.frog.svc{max-width:110px}}

/* Four services, not three or eight. auto-fill left the fourth card orphaned on
   a row of its own at desktop width, which read as unfinished. Two-by-two is
   balanced at every width Mick's customers actually use. */
#serviceGrid{grid-template-columns:repeat(2,1fr);max-width:760px}
#serviceGrid .card h3{min-height:2.6em}
@media (max-width:640px){#serviceGrid{grid-template-columns:1fr}#serviceGrid .card h3{min-height:0}}


/* ══════════════════════════════════════════════════════════════════════════
   VISUAL RESTORATION — 2026-08-14 v2, Kristy approved.
   The original Greencare concept is the visual benchmark; this restores its
   composition inside the current multi-page architecture.
   Additive only: nothing above this divider was changed or removed.
   Every colour is an existing token. No new palette, no external request.
   ══════════════════════════════════════════════════════════════════════════ */

/* TWO container widths, and only two.
     .wrap.wide  - 1120 outer (content 1076). THE HERO ONLY.
     .wrap.body  -  924 outer (content  880). EVERY body section from
                    "What I do" down to the CTA, sharing one left and
                    right edge, so the page never tapers or stretches.
   880 is not arbitrary: it is the width the service grid and area band had
   when those components were signed off, and it puts the cards back at
   431px each. Inner TEXT keeps a reading measure; the container does not. */
.wrap.wide{max-width:960px}
.wrap.body{max-width:960px}

/* ---------- HERO — the original composition ------------------------------
   1120px container, 1.12fr/.88fr, 36px gap, 52/54 padding. Greeny FILLS his
   column: that, not pixel size, is what made the original read as designed. */
/* 2026-08-15 — overflow:visible is LOAD-BEARING for the overlapping gecko card.
   The glow previously relied on the hero clipping it, so it is re-expressed as
   a contained inset:0 gradient rather than an oversized box. */
.hero{position:relative;overflow:visible;padding:0}
.hero::after{content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 12% 88%,rgba(255,255,255,.22),transparent 58%);
  pointer-events:none}
.hero .wrap.wide{position:relative;z-index:1;display:grid;grid-template-columns:1.25fr .75fr;
  gap:36px;align-items:center;padding:30px 22px 6px;text-align:left}
/* 2026-08-16 — 50px read oversized against the gecko and wrapped to three
   lines inside the 960 grid. Line-height eased slightly for the smaller size. */
.hero h1{font-size:clamp(30px,4.6vw,46px);line-height:1.08;letter-spacing:-.02em;
  text-shadow:0 2px 22px rgba(0,50,10,.25)}
/* B10 — the 44ch cap made this paragraph 45px narrower than the headline
   above it, an invisible edge that lined up with nothing. It now shares the
   headline's own container, so both wrap to the same column. */
.hero p{margin:18px 0 0;max-width:none;margin-left:0;margin-right:0;
  font-size:clamp(16px,2.2vw,19.5px);color:rgba(255,255,255,.95)}
.hero .cta{margin-top:26px;justify-content:flex-start}

/* The eyebrow — top-third density. Facts already established on the site. */
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:800;
  letter-spacing:.02em;color:var(--char);background:rgba(255,255,255,.85);
  padding:7px 15px;border-radius:100px;margin-bottom:20px}

/* Greeny's card — the original treatment, filling its column.
   ⚠️ The image is UPSCALED from 345px native. Kristy explicitly approved this:
   composition wins over sharpness. When Mick supplies high-res artwork, swap
   the file only — no rule here needs to change. */
.hero .frogwrap{position:relative;z-index:2}
/* The overlap: a negative bottom margin shortens the space the card OCCUPIES
   while it still DRAWS at full height — so the green panel gets shorter and
   the card crosses its lower edge. max-width caps what was a 640px card. */
.frogcard{background:#fff;border-radius:26px;padding:10px 10px 4px;
  box-shadow:0 26px 60px rgba(0,50,15,.32);transform:rotate(-1.5deg);
  max-width:295px;margin-left:auto;margin-bottom:-14px}
.frogcard img{width:100%;height:auto;border-radius:18px;display:block}
.frogcard .cap{text-align:center;font-weight:800;font-size:13px;color:var(--green-deep);
  padding:8px 4px 6px}

@media (max-width:860px){
  .hero .wrap.wide{grid-template-columns:1fr;gap:24px;padding:36px 22px 40px;text-align:center}
  .hero p{margin-left:auto;margin-right:auto}
  .hero .cta{justify-content:center}
  /* the desktop overlap is reversed once the hero stacks */
  .frogcard{max-width:290px;margin:0 auto;margin-bottom:0}
  .hero .frogwrap{z-index:auto}
  .hero .frogwrap{order:-1}
  .hero .wrap.wide{display:flex;flex-direction:column}
}
@media (max-width:520px){
  .frogcard{max-width:230px}
  .eyebrow{font-size:11.5px;padding:6px 13px}
  /* Pulls "to." up off a line of its own at phone width. */
  .hero h1{font-size:29px}
}

/* ---------- mobile header ------------------------------------------------
   At phone width the nav wrapped to three ragged rows with the logo squeezed
   into the middle of them. Logo gets its own centred row; the links sit
   beneath it, tightened so they settle into two tidy rows.
   ⛔ No link removed, no hamburger introduced — every destination stays one
   tap away, which matters more on a trades site than a tidier bar. */
@media (max-width:700px){
  .bar{flex-wrap:wrap;justify-content:center;gap:10px;padding:10px 16px}
  .bar img{height:34px}
  nav{margin-left:0;width:100%;justify-content:center;gap:4px}
  nav a{font-size:13.5px;padding:7px 10px}
  .callbtn{padding:7px 15px}
}
@media (prefers-reduced-motion:reduce){.frogcard{transform:none}}

/* ---------- TRUST STRIP — a strip, not a section -------------------------
   One compact line directly beneath the hero, anchoring it.
   📌 2026-08-15, Kristy's instruction: RETURNED TO DARK CHARCOAL. It was made
   cream earlier the same day (A2) because it shared the header's exact colour
   and read as a second row of navigation. That risk is noted and accepted —
   the gecko card now crosses into this strip, which separates it from the
   header. The extra TOP padding keeps the four statements clear of the card. */
.trust{background:var(--char);color:#D9E2CE}
.trust .inner{display:flex;flex-wrap:wrap;justify-content:center;gap:9px 26px;
  padding:24px 22px;font-size:13.5px;max-width:960px;margin:0 auto}
.trust span{white-space:nowrap}
.trust b{color:#fff;font-weight:700}
.trust .g{color:var(--lime);font-weight:800}
@media (max-width:520px){.trust .inner{font-size:12.5px;gap:7px 18px;padding:18px 22px}.trust span{white-space:normal}}

/* ---------- SERVICE CARDS — the original chrome, with the photograph -----
   White surface, hair border, radius 18, generous padding, serif heading,
   hover lift. The photograph is a band across the top; the green icon tile
   overlaps its lower edge and ties the two together. */
/* max-width:none overrides the earlier #serviceGrid{max-width:760px} further up
   this file. That older cap was what kept the cards narrower than every other
   section — the last step of the wide-to-narrow taper. */
#serviceGrid{grid-template-columns:repeat(2,1fr);max-width:none;margin:32px 0 0;gap:18px}
#serviceGrid .card{padding:0;overflow:hidden;border-radius:18px;background:var(--surface);
  border:1px solid var(--hair);transition:transform .14s,box-shadow .14s,border-color .14s}
#serviceGrid .card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(24,50,15,.1);
  border-color:var(--green-line)}
/* height:auto is LOAD-BEARING. The <img> carries width/height attributes, which
   are presentational hints — with both dimensions resolved, aspect-ratio is
   ignored and the image renders at its attribute height. Same trap as .mickshot. */
#serviceGrid .card .shot{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block;background:#e9ede8}
#serviceGrid .card .cardtext{display:block;padding:0 26px 26px}
#serviceGrid .card .ic{width:52px;height:52px;border-radius:15px;
  background:linear-gradient(135deg,var(--green),var(--green-deep));display:flex;
  align-items:center;justify-content:center;color:#fff;box-shadow:0 8px 18px rgba(114,188,57,.4);
  margin-top:-26px;position:relative;z-index:2;border:3px solid var(--surface)}
#serviceGrid .card .ic svg{width:26px;height:26px}
#serviceGrid .card h3{font-size:20px;margin:14px 0 6px;min-height:0}
#serviceGrid .card p{font-size:14.5px;color:var(--muted);margin:0}
@supports not (aspect-ratio:4/3){#serviceGrid .card .shot{height:300px}}
@media (max-width:640px){#serviceGrid{grid-template-columns:1fr;gap:16px}}

/* ---------- SERVICE-AREA BAND — the original's dark centred panel -------- */
/* No width cap. Every homepage section shares ONE container (.wrap.wide),
   so outer edges align down the whole page; inner TEXT is what gets a reading
   measure, not the component. */
.areaband{background:var(--char);color:#D9E2CE;border-radius:26px;padding:44px 34px;
  text-align:center;margin:8px 0 0}
.areaband .k{color:var(--lime)}
.areaband h2{color:#fff;margin-bottom:8px}
.areaband p{color:#A9B79C;font-size:15.5px;max-width:56ch;margin:0 auto}
.areaband a{color:#fff}
/* B9 — capped so nine pills break 5/4 instead of stranding two. */
.areaband .pills{justify-content:center;margin-top:22px;max-width:660px;margin-left:auto;margin-right:auto}
.areaband .pill{background:rgba(114,188,57,.2);border-color:var(--green-line);
  color:#EAF3E0;font-weight:700}
@media (max-width:520px){.areaband{padding:32px 20px}}

/* ---------- WHY GREENCARE — the original green-circle ticks, on paper ---- */
.why{display:grid;grid-template-columns:repeat(2,1fr);gap:18px 34px;margin:22px 0 32px;
  list-style:none;padding:0;align-items:start}
.why li{display:flex;gap:14px;align-items:flex-start}
.why li::before{content:"✓";flex:none;width:28px;height:28px;border-radius:50%;
  background:linear-gradient(135deg,var(--green),var(--green-deep));color:#fff;
  font-weight:900;font-size:14px;display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 14px rgba(114,188,57,.4);margin-top:1px}
.why li b{font-size:15.5px;font-weight:700;line-height:1.4}
@media (max-width:640px){.why{grid-template-columns:1fr}}

/* ---------- containers for the two remaining text blocks ----------------
   The original gave its blocks edges. These were bare paper, which is the
   "text-led and sparse" complaint. */
.panel{background:var(--surface);border:1px solid var(--hair);border-radius:18px;
  border-top:5px solid var(--green);padding:28px 30px;margin-top:26px}
.panel .k{margin-bottom:2px}
/* B7 — a panel heading is a detail inside a section, not a section heading. */
.panel h2,.plainblock h2{font-size:clamp(20px,3.2vw,24px);margin-top:4px}
.panel p.body:last-child{margin-bottom:0}
.panel p.body{max-width:68ch}
/* B5 — the de-boxed explanation block. Same rhythm, no container. */
.plainblock{margin-top:30px}
.plainblock p.body{max-width:68ch}
.plainblock p.body:last-child{margin-bottom:0}
@media (max-width:520px){.panel{padding:22px 20px}}

/* ---------- MEET MICK — a composed header, not a floating portrait -------
   Photograph and title side by side on desktop; stacked and centred on
   mobile. The body copy keeps a comfortable reading measure beneath. */
/* A4 — the header block overhung the body column by ~195px, so the page had
   two different right edges. Capped to the same measure as .mickbody. */
.mickhead{display:grid;grid-template-columns:240px 1fr;gap:32px;align-items:center;
  margin:4px 0 34px;max-width:68ch}
.mickshot{width:100%;height:auto;border-radius:20px;display:block;
  box-shadow:0 20px 46px rgba(24,50,15,.24)}
.mickhead-copy .pagetitle{margin-top:6px}
.mickbody{max-width:68ch}
/* Pacing: five paragraphs of near-identical length read as one flat block.
   The opening line becomes a lead, and the closing line tightens onto the
   quote it introduces. ⛔ Mick's wording is untouched — this is size and
   space only. */
.mickbody p.body{margin-bottom:20px}
.mickbody p.body:first-child{font-size:19.5px;line-height:1.5;color:var(--char)}
.mickbody p.body:last-child{margin-bottom:14px}
.mickcta{max-width:68ch;margin-left:0}
@media (max-width:760px){
  .mickhead{grid-template-columns:1fr;gap:20px;justify-items:center;text-align:center;
    margin-bottom:26px}
  .mickshot{max-width:260px}
  .mickbody,.mickcta{max-width:none}
}
@media (max-width:520px){.mickshot{max-width:210px}}

/* ---------- small Greeny beside a page title ----------------------------
   Quote page only. Nothing sits behind the form fields, deliberately. */
.titlerow{display:flex;align-items:center;gap:16px}
.titlerow .frog.sm{max-width:84px;height:auto;flex:none;margin:0}
@media (max-width:520px){.titlerow .frog.sm{max-width:62px}}

/* Button lift, from the original. */
.btn{transition:background .15s,transform .12s,box-shadow .15s}
.btn:hover{transform:translateY(-1px)}
@media (prefers-reduced-motion:reduce){.btn:hover{transform:none}}

/* ---------- A3 · Meet Mick had no button on the whole page ----------------
   The page whose job is to turn trust into an enquiry ended on a text link.
   Uses the existing .btn component — nothing new introduced. */
.mickcta{text-align:center;padding-bottom:30px}
.mickcta .big{margin-bottom:22px}

/* ── Selected-photo list ────────────────────────────────────────────────
   Added 2026-08-19 with the uploader rebuild. The customer must be able to
   SEE what they have picked and remove one without starting again. The
   filename is the reliable label; the thumbnail is a bonus that a HEIC will
   not always paint, so nothing depends on it. */
.photolist{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:8px;
  width:100%;min-width:0;max-width:100%}
/* min-width:0 + max-width:100% on BOTH the list and the row: without them a long
   phone filename sets a min-content width that propagates up the tree and
   stretches the whole form sideways on a narrow screen. Caught at 390px. */
.photoitem{display:flex;align-items:center;gap:10px;padding:6px 8px;border:1px solid rgba(0,0,0,.12);
  border-radius:10px;background:rgba(0,0,0,.02);min-width:0;max-width:100%;box-sizing:border-box}
.photothumb{width:44px;height:44px;object-fit:cover;border-radius:8px;flex:0 0 auto;background:rgba(0,0,0,.06)}
.photoname{flex:1 1 auto;min-width:0;width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px}
.photox{flex:0 0 auto;width:32px;height:32px;min-width:32px;border:0;border-radius:8px;cursor:pointer;
  font-size:22px;line-height:1;background:rgba(0,0,0,.06);color:inherit}
.photox:hover,.photox:focus{background:rgba(0,0,0,.14)}
@media (max-width:520px){
  .photoname{font-size:14px}
  .photox{width:40px;height:40px;min-width:40px}   /* a real thumb target on a phone */
}

/* ============================================================================
   VERSION B SHARED LAYER  --  added 2026-08-31
   Mick approved Version B on 25 August 2026 for desktop and mobile.
   These are the SHARED rules from the approved Version B homepage, moved here
   so every page of the site carries the same design. Homepage-only treatment
   (hero, tiles, steps, closing panel and so on) stays in the homepage itself.
   Placed last so it overrides the earlier rules for the same selectors.
   ============================================================================ */

html{-webkit-text-size-adjust:100%}

body{background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.62;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

img{max-width:100%;display:block}

a{color:var(--green-deep)}

.skip{position:absolute;left:-9999px;top:0;background:#fff;color:var(--ink);padding:12px 18px;z-index:99}

.skip:focus{left:8px;top:8px}

.wrap{max-width:1120px;margin:0 auto;padding:0 24px}

.bar{display:flex;align-items:center;gap:20px;padding:14px 24px;max-width:1120px;margin:0 auto}

.bar img{height:36px;width:auto}

nav{margin-left:auto;display:flex;gap:2px;align-items:center;flex-wrap:wrap}

nav a{color:#BFCBB2;text-decoration:none;font-size:14px;font-weight:600;letter-spacing:.01em;
  padding:9px 13px;border-radius:8px;transition:color .18s ease,background .18s ease}

nav a:hover{color:#fff;background:rgba(255,255,255,.07)}

nav a[aria-current="page"]{color:#fff}

.callbtn{background:var(--green);color:#fff!important;padding:9px 17px;border-radius:100px;font-weight:700;
  display:inline-flex;align-items:center;gap:8px;margin-left:8px}

.callbtn svg{width:14px;height:14px;fill:currentColor;flex:none}

.callbtn:hover{background:var(--green-deep)!important}

.btn{display:inline-flex;align-items:center;gap:9px;border-radius:100px;font-weight:700;font-size:15.5px;
  text-decoration:none;padding:15px 28px;transition:transform .18s ease,background .18s ease,box-shadow .18s ease}

.btn svg{width:16px;height:16px;fill:currentColor;flex:none}

.btn.primary{background:var(--green);color:#fff;box-shadow:0 10px 30px rgba(0,0,0,.30)}

.btn.primary:hover{background:var(--lime);color:var(--ink-deep);transform:translateY(-1px)}

.btn.line{background:rgba(255,255,255,.07);color:#fff;border:1px solid rgba(255,255,255,.34);backdrop-filter:blur(6px)}

.btn.line:hover{background:rgba(255,255,255,.15)}

.btn.dark{background:var(--ink-deep);color:#fff}

.btn.dark:hover{background:var(--green-deep)}

.k{font-size:11.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--green-deep)}

h2{font-family:var(--display);font-weight:600;font-size:clamp(28px,4.6vw,48px);line-height:1.08;
  letter-spacing:-.018em;margin:14px 0 0}

.pills{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px}

.pill{background:var(--surface);border:1px solid var(--hair);color:var(--ink);
  padding:9px 16px;border-radius:100px;font-size:14px;font-weight:600}


footer{background:var(--char);color:#B9C6A9;padding:44px 0}

footer a{color:#fff;font-weight:700;font-size:19px;text-decoration:none}

footer .sml{margin-top:10px;font-size:14px;color:#8E9C7E}
@media (max-width:640px){

  .bar{gap:12px;padding:12px 18px}

  nav a{display:none}

  nav .callbtn{display:inline-flex;margin-left:0}

  .btn{padding:14px 22px;font-size:15px}
}