/* Whitegreen Companions — website preview stylesheet.

   Rebuilt 4 September 2026 against the supplied homepage mockup and the real
   logo. Every colour below is either sampled from the logo, sampled from the
   mockup, or solved along the logo's own hue in tools/contrast-whitegreen.py.
   Nothing here is eyeballed. If you change a value, run that file — it will
   tell you which pair you just broke.

   Two rules the solver enforces that are easy to break by accident:

   1. --green is the real brand green and it is DECORATIVE ONLY. It scores
      3.01 on cream and 2.88 on the sage band. It may draw a leaf on cream,
      white or the page ground; it may not carry a word anywhere, and it may
      not appear on the sage band at all. Use --green-ink for green text.
   2. The hero and closing-band opacities are pinned. The white text over
      those photographs is proven against a pure-white pixel showing through
      at exactly these values. Raise the image opacity and the proof is void.
*/

:root{
  /* sampled from the logo */
  --ink:#063F2B;
  --green:#6E9A50;

  /* sampled from the mockup */
  --cream:#F7F5F0;
  --mint:#EDF2E8;
  --foot:#09352A;

  /* solved along the logo hue */
  --green-ink:#55773E;
  --green-lt:#7EAC5F;

  --ink-deep:#04301F;
  --body:#3B4A44;
  --mute:#5A6A62;
  --white:#FFFFFF;
  --paper:#FDFCFA;
  --card:#FFFFFF;
  --line:#E2E6DC;
  --edge:#6C8574;
  --lede-lt:#D7E4D6;
  --mute-lt:#A9BDAC;

  /* The worst-case ground under white text on a photograph: a pure-white
     pixel arriving through the pinned wash and scrim. Solved as HERO_SCRIM
     and CTA_SCRIM in tools/contrast-whitegreen.py. Painted as a real
     background colour rather than left implicit, for two reasons: it is what
     the reader sees if the photograph fails to load, and an automated checker
     walking the ancestors for a background has no way to sample a JPEG. */
  --hero-scrim:#205241;
  --cta-scrim:#1A4E3C;

  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,
    "Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",
    Arial,sans-serif;
  --script:"Snell Roundhand","Segoe Script","Brush Script MT",cursive;

  --maxw:1200px;
  --pad:32px;
  --r:14px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--body);
  font-family:var(--sans);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
/* Every photograph is now a <picture> wrapping the <img>. Left as an inline
   box it would generate a line box of its own, and since the images inside the
   fixed-ratio frames are absolutely positioned, that empty line would add
   about 28px to the bottom of every card and frame on the site. A block with
   no in-flow content is zero-height, which is what is wanted.

   Not display:contents, which is the tidier-looking answer and was tried
   first: it stops the image painting altogether in the rendering engine this
   site was checked in. */
picture{display:block}
a{color:var(--green-ink)}

/* The first thing in the tab order, visible only once focused. Seven nav
   links and a menu control sit before the content on every page. */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);
  color:var(--white);font-family:var(--sans);font-size:15px;font-weight:660;
  padding:14px 22px;border-radius:0 0 10px 0;text-decoration:none}
.skip:focus{left:0}

h1,h2,h3{font-family:var(--serif);color:var(--ink);font-weight:600;
  letter-spacing:-.012em;margin:0 0 14px}
h1{font-size:52px;line-height:1.1}
h2{font-size:38px;line-height:1.18}
h3{font-size:22px;line-height:1.3;letter-spacing:-.004em}
h4{font-family:var(--sans);font-size:17px;font-weight:680;color:var(--ink);
  margin:0 0 8px;letter-spacing:-.005em}
p{margin:0 0 16px}
.mb0{margin-bottom:0}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.narrow{max-width:760px}
.center{text-align:center}

.eyebrow{display:block;font-family:var(--sans);font-size:12.5px;
  font-weight:680;letter-spacing:.17em;text-transform:uppercase;
  color:var(--mute);margin:0 0 14px}
.lede{font-size:19px;line-height:1.6;color:var(--body)}
.small{font-size:14.5px;line-height:1.6;color:var(--mute)}

/* Values still to be settled before the site goes live — the phone number, the
   company number, the example testimonial names. The dotted rule that used to
   mark them was explained by a banner at the top of every page; with the banner
   gone the rule is unexplained decoration, so the class stays as the hook for
   finding them and renders as ordinary text. */
/* Declared rather than left empty: an empty ruleset reads as an undefined
   class to tools/class-collide.py, and a standing false warning trains
   people to ignore the gate. inherit is also the truth — these values look
   exactly like the text around them. */
.fill{color:inherit}

/* --------------------------------------------------------------- buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--sans);font-size:16px;font-weight:660;line-height:1;
  text-decoration:none;padding:15px 26px;min-height:50px;border-radius:999px;
  border:1.5px solid transparent;cursor:pointer}
.btn-primary{background:var(--ink);color:var(--white);border-color:var(--ink)}
.btn-primary:hover{background:var(--ink-deep);border-color:var(--ink-deep)}
/* .band-dark a and .hero a are (0,2,0) and beat .btn-primary (0,1,0). That
   specificity bug once rendered the primary call to action at 1.05 on the
   dark band. Both pairings below are proven in tools/contrast-whitegreen.py.
   Do not remove these lines. */
.band-dark a.btn-primary,.hero a.btn-primary,.cta-band a.btn-primary{
  color:var(--white);background:var(--ink);border-color:var(--white)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--edge)}
.btn-ghost:hover{background:var(--mint)}
.band-dark a.btn-ghost,.cta-band a.btn-ghost{color:var(--white);
  border-color:var(--lede-lt)}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;margin:26px 0 0}
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,label:focus-visible{
  outline:2px solid var(--green-ink);outline-offset:2px}

/* ---------------------------------------------------------------- header */
header.site{background:var(--white);border-bottom:1px solid var(--line);
  position:relative;z-index:40}
.hdr{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);
  display:flex;align-items:center;gap:22px;min-height:82px}
.brand{display:flex;align-items:center;text-decoration:none;flex:0 0 auto}
.brand img{height:52px;width:auto}
nav.main{display:flex;align-items:center;gap:2px;margin-left:auto}
nav.main a{font-family:var(--sans);font-size:15px;font-weight:560;
  color:var(--body);text-decoration:none;padding:12px 12px;border-radius:8px;
  white-space:nowrap}
nav.main a:hover{color:var(--ink);background:var(--mint)}
/* The active link gets a rule under it, as in the mockup. Colour is never
   the only signal. */
nav.main a[aria-current="page"]{color:var(--ink);font-weight:680;
  box-shadow:inset 0 -2px 0 0 var(--green-ink)}
.hdr-cta{flex:0 0 auto}
.hdr-cta .btn{padding:13px 24px;min-height:48px;font-size:15.5px}

/* Mobile menu, no JavaScript. A checkbox and its label collapse seven links
   behind one control below 1080px. The preview harness cannot run scroll- or
   rAF-driven UI, so a JS drawer would not be testable here at all. */
.navtoggle{position:absolute;opacity:0;width:1px;height:1px}
.navbtn{display:none;align-items:center;gap:9px;cursor:pointer;
  font-family:var(--sans);font-size:15px;font-weight:660;color:var(--ink);
  padding:12px 16px;min-height:48px;border:1.5px solid var(--edge);
  border-radius:999px;background:var(--white)}
.navbtn:hover{background:var(--mint)}
.navtoggle:focus-visible + .navbtn{outline:2px solid var(--green-ink);
  outline-offset:2px}

/* ------------------------------------------------------------------- hero */
.hero{background:var(--cream);position:relative;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
/* The grid runs edge to edge so the photograph bleeds off the right of the
   viewport, as in the mockup. The left column then has to reproduce the
   centred container's gutter by hand, or the headline would not line up with
   the section headings below it. */
.hero-copy{width:100%;
  padding:74px 46px 74px calc(max(0px,(100vw - var(--maxw))/2) + var(--pad))}
.hero h1{font-size:57px;line-height:1.06;margin-bottom:20px}
.hero h1 .hl{color:var(--green-ink)}
.hero .lede{max-width:470px}

.hero-media{position:relative;min-height:560px;background:var(--hero-scrim)}
.hero-media img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover}
/* Pinned: the white script and the play pill are proven against a pure-white
   pixel arriving through exactly these two layers. See the solver. */
.hero-media .wash{position:absolute;inset:0;background:var(--ink);
  opacity:.10}
.hero-media .scrim{position:absolute;inset:0;
  background:linear-gradient(105deg,var(--cream) 0%,
    rgba(247,245,240,.5) 10%,rgba(6,63,43,0) 40%,rgba(6,63,43,.36) 100%)}
.hero-script{position:absolute;right:34px;bottom:136px;z-index:2;
  font-family:var(--script);font-size:34px;line-height:1.25;
  color:var(--white);text-align:right;max-width:330px;
  text-shadow:0 2px 14px rgba(4,48,31,.85),0 1px 3px rgba(4,48,31,.9)}
.hero-script i{display:block;height:1.5px;background:var(--white);
  width:150px;margin:10px 0 0 auto;opacity:.85}
.play{position:absolute;right:34px;bottom:38px;z-index:2;
  display:inline-flex;align-items:center;gap:12px;background:var(--white);
  border-radius:999px;padding:10px 22px 10px 10px;text-decoration:none;
  box-shadow:0 8px 26px rgba(4,48,31,.28)}
.play .disc{width:38px;height:38px;border-radius:50%;background:var(--ink);
  display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.play b{display:block;font-family:var(--sans);font-size:15px;font-weight:680;
  color:var(--ink);line-height:1.25}
.play span{display:block;font-family:var(--sans);font-size:13px;
  color:var(--mute);line-height:1.25}

/* The three trust points beneath the hero buttons. */
.trust{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
  margin:38px 0 0;padding:0;list-style:none}
.trust li{font-family:var(--sans);font-size:14.5px;line-height:1.45;
  color:var(--body);font-weight:560}
.trust svg{display:block;margin:0 0 10px}

/* ------------------------------------------------------------------ bands */
.band{padding:82px 0}
.band-tight{padding:54px 0}
.band-white{background:var(--white)}
.band-paper{background:var(--paper)}
.band-cream{background:var(--cream)}
.band-mint{background:var(--mint)}
.band-dark{background:var(--ink);color:var(--lede-lt)}
.band-dark h2,.band-dark h3,.band-dark h4{color:var(--white)}
.band-dark .eyebrow{color:var(--mute-lt)}
.band-dark .lede,.band-dark p{color:var(--lede-lt)}
.band-dark .small{color:var(--mute-lt)}
.band-dark a{color:var(--green-lt)}
.band-dark .card{background:rgba(255,255,255,.06);
  border-color:rgba(215,228,214,.28)}
.band-dark .card p{color:var(--lede-lt)}
.rule-top{border-top:1px solid var(--line)}

.sec-head{max-width:720px;margin:0 auto 46px;text-align:center}
.sec-head.left{margin-left:0;text-align:left}
.sec-head .lede{color:var(--mute);font-size:18px}

/* ---------------------------------------------------------- service cards */
.svc{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.svc-card{background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;
  text-decoration:none}
.svc-card:hover{border-color:var(--edge)}
/* padding-bottom rather than aspect-ratio: aspect-ratio has rendered inert in
   this preview harness before, and a collapsed image box is a worse bug than
   a slightly verbose rule. */
.svc-shot{position:relative;width:100%;padding-bottom:64%;overflow:hidden}
.svc-shot img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover}
.svc-body{padding:0 22px 22px;display:flex;flex-direction:column;flex:1}
/* The icon badge overlaps the lower-left corner of the photograph. */
.svc-badge{width:54px;height:54px;border-radius:50%;background:var(--white);
  border:1px solid var(--line);display:flex;align-items:center;
  justify-content:center;margin:-27px 0 14px;position:relative;z-index:2}
.svc-card h3{font-size:20px;margin-bottom:8px}
.svc-card p{font-size:15px;line-height:1.55;color:var(--mute);margin:0 0 16px}
.svc-price{font-family:var(--sans);font-size:14.5px;font-weight:680;
  color:var(--ink);margin:auto 0 0;padding-top:14px;
  border-top:1px solid var(--line)}
.svc-price span{font-weight:500;color:var(--mute)}

/* ------------------------------------------------------------ about split */
.about-split{display:grid;grid-template-columns:1fr 1.05fr;gap:64px;
  align-items:center}
.about-media{position:relative}
.about-media .shot{position:relative;width:100%;padding-bottom:76%;
  border-radius:var(--r);overflow:hidden}
.about-media .shot img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover}
.quote-card{position:absolute;right:-28px;top:50%;transform:translateY(-50%);
  width:266px;background:var(--ink);color:var(--white);border-radius:var(--r);
  padding:26px 24px;box-shadow:0 16px 40px rgba(4,48,31,.28)}
.quote-card .qm{font-family:var(--serif);font-size:44px;line-height:.7;
  color:var(--green-lt);display:block;margin-bottom:12px}
.quote-card q{font-family:var(--serif);font-size:19px;line-height:1.34;
  quotes:none;display:block}
.quote-card .sig{font-family:var(--script);font-size:26px;line-height:1.2;
  color:var(--green-lt);margin-top:18px;display:block}
.quote-card .sig i{display:block;height:1.5px;background:var(--green-lt);
  width:120px;margin-top:8px;opacity:.7}

/* ------------------------------------------------------------- why choose */
.why{display:grid;grid-template-columns:repeat(4,1fr);gap:34px;
  text-align:center}
.why svg{margin:0 auto 16px;display:block}
.why h3{font-size:19px;margin-bottom:8px}
.why p{font-size:15px;line-height:1.55;color:var(--mute);margin:0}

/* ----------------------------------------------------------- testimonials */
.tst-rail{position:relative}
.tst{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.tst-card{background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);padding:28px 26px;display:flex;flex-direction:column}
.tst-card .qm{font-family:var(--serif);font-size:40px;line-height:.6;
  color:var(--green-ink);display:block;margin-bottom:16px}
.tst-card q{quotes:none;font-size:16px;line-height:1.6;color:var(--body);
  display:block;margin-bottom:22px}
.tst-who{display:flex;align-items:center;gap:13px;margin-top:auto}
/* Monogram, not a photograph. Attaching a real-looking face to a name that
   has not yet said anything is the one thing on this page that could not be
   defended after launch. The circle and the rhythm are the mockup's; only
   the fill differs. */
.tst-av{width:46px;height:46px;border-radius:50%;background:var(--mint);
  border:1px solid var(--line);display:flex;align-items:center;
  justify-content:center;font-family:var(--serif);font-size:18px;
  color:var(--ink);flex:0 0 auto;font-weight:600}
.tst-who b{display:block;font-size:15.5px;color:var(--ink);font-weight:680}
/* Scoped to the name block, not to every span in the row. The monogram is also
   a span, and an unscoped `.tst-who span` outranks `.tst-av` on specificity —
   which is how the letter ended up uncentred, 14px and in the muted grey. */
.tst-who>div span{display:block;font-size:14px;color:var(--mute)}
.tst-arrow{position:absolute;top:50%;margin-top:-21px;
  width:42px;height:42px;border-radius:50%;background:var(--white);
  border:1px solid var(--edge);display:flex;align-items:center;
  justify-content:center;color:var(--ink);text-decoration:none}
.tst-arrow.prev{left:-56px}
.tst-arrow.next{right:-56px}
.tst-dots{display:flex;gap:9px;justify-content:center;margin-top:30px}
.tst-dots i{width:8px;height:8px;border-radius:50%;background:var(--edge);
  opacity:.4;display:block}
.tst-dots i.on{opacity:1;background:var(--ink)}

/* ------------------------------------------------------- closing CTA band */
.cta-band{position:relative;overflow:hidden;background:var(--cta-scrim)}
.cta-band img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover}
/* Pinned alongside the solver, as with the hero. */
.cta-band .wash{position:absolute;inset:0;background:var(--ink);opacity:.30}
.cta-band .scrim{position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(6,63,43,.92) 0%,
    rgba(6,63,43,.74) 42%,rgba(6,63,43,.18) 100%)}
.cta-in{position:relative;z-index:2;padding:78px 0;max-width:560px}
.cta-band h2{color:var(--white);font-size:40px}
.cta-band p{color:var(--white);font-size:19px}

/* ----------------------------------------------------------------- footer */
footer.site{background:var(--foot);color:var(--lede-lt);
  padding:64px 0 0;font-size:15.5px}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1.4fr 1fr;gap:40px}
.foot-brand img{height:58px;width:auto;margin-bottom:18px}
.foot-brand p{color:var(--mute-lt);max-width:280px;font-size:15px}
footer.site h4{color:var(--white);font-size:15.5px;letter-spacing:.02em;
  margin-bottom:16px}
footer.site a{color:var(--lede-lt);text-decoration:none;display:block;
  padding:5px 0}
footer.site a:hover{color:var(--white);text-decoration:underline}
/* Written as `footer.site` rather than `.foot-contact` alone: the plain link
   rule above is (0,1,2) and would otherwise win, collapsing these rows back to
   display:block and dropping the gap between the icon and its text. */
footer.site .foot-contact a,.foot-contact p{display:flex;
  align-items:flex-start;gap:11px;color:var(--lede-lt);margin:0;padding:5px 0}
.foot-contact svg{flex:0 0 auto;margin-top:4px}
.foot-social{display:flex;gap:12px;margin-top:2px}
.foot-social a{display:flex;width:38px;height:38px;border-radius:50%;
  border:1px solid var(--edge);align-items:center;justify-content:center;
  padding:0}
.foot-social a:hover{background:var(--ink-deep)}
.foot-script{font-family:var(--script);font-size:29px;color:var(--green-lt);
  text-align:right;margin:34px 0 0;line-height:1.25}
.foot-script i{display:block;height:1.5px;background:var(--green-lt);
  width:170px;margin:8px 0 0 auto;opacity:.7}
.foot-rule{border:0;border-top:1px solid rgba(215,228,214,.22);margin:34px 0 0}
.foot-bar{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;
  align-items:center;padding:20px 0 24px;font-size:14px;color:var(--mute-lt)}
.foot-bar nav{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.foot-bar a{display:inline-block;padding:0;color:var(--mute-lt)}
.foot-bar .sep{color:var(--mute-lt);opacity:.5}

/* The legal block. Small, but it is the part that has to be right. */
.legal{background:var(--ink-deep);color:var(--mute-lt);font-size:13.5px;
  line-height:1.62;padding:26px 0 30px}
.legal b{color:var(--lede-lt)}
.legal p{margin:0 0 9px}
.legal p:last-child{margin-bottom:0}

/* ------------------------------------------------- interior page furniture */
.grid{display:grid;gap:26px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.split{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;
  align-items:start}
.split-wide{display:grid;grid-template-columns:1fr 1fr;gap:56px;
  align-items:start}

.card{background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);padding:28px 26px}
.card h3{font-size:20px}
.card p:last-child{margin-bottom:0}

/* A real photograph, in the shape the old empty placeholder used to occupy.
   The 1px edge is gone with it. It existed to tell you an empty panel was
   there; the photograph now does that, and the gate was right to score a
   decorative hairline at 1.16 as a non-text failure while it still claimed to
   carry meaning. */
.frame{position:relative;width:100%;padding-bottom:66%;border-radius:var(--r);
  overflow:hidden;margin:0;background:var(--mint)}
.frame.tall{padding-bottom:112%}
.frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.frame figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;
  font-family:var(--sans);font-size:13.5px;color:var(--white);
  padding:30px 18px 14px;
  background:linear-gradient(180deg,rgba(6,63,43,0),rgba(4,48,31,.9))}

.callcard{background:var(--white);border:1px solid var(--line);
  border-radius:var(--r);padding:28px 26px}
.callcard .k{font-family:var(--sans);font-size:12.5px;font-weight:680;
  letter-spacing:.15em;text-transform:uppercase;color:var(--mute);
  margin:0 0 6px}
.callcard .tel{font-family:var(--serif);font-size:31px;color:var(--ink);
  text-decoration:none;display:block;margin:0 0 10px;font-weight:600}
.callcard p{font-size:15px;color:var(--mute);margin:0 0 4px}
.callcard hr{border:0;border-top:1px solid var(--line);margin:20px 0}

.scope{background:var(--mint);border-radius:var(--r);padding:30px 28px;
  border-left:4px solid var(--ink)}
.scope .q{font-family:var(--serif);font-size:19px;line-height:1.55;
  color:var(--ink);margin:0}

table{width:100%;border-collapse:collapse;font-size:15.5px;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden}
th,td{text-align:left;padding:15px 18px;border-bottom:1px solid var(--line);
  vertical-align:top}
th{background:var(--mint);font-family:var(--sans);font-size:13px;
  font-weight:680;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink)}
tr:last-child td{border-bottom:0}
td b{color:var(--ink)}

.steps{counter-reset:s;list-style:none;padding:0;margin:0;display:grid;
  gap:22px}
.steps li{counter-increment:s;position:relative;padding-left:60px}
.steps li::before{content:counter(s);position:absolute;left:0;top:-2px;
  width:42px;height:42px;border-radius:50%;background:var(--ink);
  color:var(--white);font-family:var(--serif);font-size:19px;
  display:flex;align-items:center;justify-content:center}

.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;padding:20px 44px 20px 0;position:relative;
  font-family:var(--sans);font-size:17.5px;font-weight:660;color:var(--ink);
  list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:8px;top:16px;
  font-size:25px;color:var(--green-ink);line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq .a{padding:0 44px 22px 0;color:var(--body)}
.faq .a p:last-child{margin-bottom:0}
/* The next group's heading sits directly under the last question's rule, which
   reads as though the eyebrow belongs to that question rather than to the set
   below it. */
.faq+.sec-head{margin-top:62px}

.pill-row{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;
  list-style:none}
.pill-row li{font-family:var(--sans);font-size:14.5px;color:var(--ink);
  background:var(--mint);border-radius:999px;padding:8px 16px}

form .field{margin:0 0 18px}
form label{display:block;font-family:var(--sans);font-size:14.5px;
  font-weight:660;color:var(--ink);margin:0 0 7px}
form input,form select,form textarea{width:100%;font-family:var(--sans);
  font-size:16px;color:var(--body);background:var(--white);
  border:1.5px solid var(--edge);border-radius:10px;padding:13px 15px;
  min-height:50px}
form textarea{min-height:130px;resize:vertical}
form .hint{font-size:13.5px;color:var(--mute);margin:6px 0 0}
fieldset{border:0;padding:0;margin:0 0 18px}
legend{font-family:var(--sans);font-size:14.5px;font-weight:660;
  color:var(--ink);padding:0;margin:0 0 7px}

/* A single figure, framed. The number carries the argument, so it is set in
   the serif at display size and everything under it is explanation. */
.stat{background:var(--mint);border-radius:var(--r);padding:24px 24px 22px;
  border-left:4px solid var(--ink)}
.stat .fig{font-family:var(--serif);font-size:40px;line-height:1.05;
  color:var(--ink);margin:0 0 10px;font-weight:600}
.stat .fig em{font-style:normal;font-size:24px;color:var(--mute);
  padding:0 6px}
.stat p{font-size:15px;color:var(--body);margin:0 0 8px}
.stat p:last-child{margin-bottom:0}
.band-dark .stat{background:rgba(255,255,255,.07);
  border-left-color:var(--green-lt)}
.band-dark .stat .fig{color:var(--white)}

/* ---------------------------------------------- carried over from v1 pages
   The interior pages were written against the first stylesheet. Rather than
   rewrite eleven pages of prose to chase a class name, the older furniture is
   re-cut here in the sampled palette. Everything below is a v1 class name
   wearing v2 colours. */
.band-2{background:var(--cream)}
.tiny{font-size:13px;line-height:1.55;color:var(--mute)}
.src{font-size:13px;line-height:1.5;color:var(--mute);margin:10px 0 0}
.hero-note{display:flex;flex-wrap:wrap;gap:8px 22px;margin:30px 0 0;
  font-size:14.5px;color:var(--body)}
.hero-note span{display:inline-flex;align-items:center;gap:8px;font-weight:560}
.hero-note span::before{content:"";width:7px;height:7px;border-radius:50%;
  background:var(--green-ink);flex:0 0 auto}
.tickset{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.tickset li{position:relative;padding-left:30px;font-size:15.5px}
.tickset li::before{content:"";position:absolute;left:0;top:8px;width:15px;
  height:8px;border-left:2.5px solid var(--green-ink);
  border-bottom:2.5px solid var(--green-ink);transform:rotate(-45deg)}
.band-dark .tickset li::before{border-color:var(--green-lt)}
.pill-grid{display:flex;flex-wrap:wrap;gap:10px}
.pill{font-family:var(--sans);font-size:14.5px;color:var(--ink);
  background:var(--mint);border-radius:999px;padding:8px 16px}
.band-dark .pill{background:rgba(255,255,255,.1);color:var(--lede-lt)}
/* v1 wrote its numbered steps as nested divs, so the counter on .steps li
   never fires for them. The circle is drawn on .n instead. */
.steps .step{display:flex;gap:18px;align-items:flex-start;padding-left:0}
.steps .step .n{flex:0 0 auto;width:42px;height:42px;border-radius:50%;
  background:var(--ink);color:var(--white);font-family:var(--serif);
  font-size:19px;display:flex;align-items:center;justify-content:center}
.steps .step p{font-size:15.5px;color:var(--mute);margin:0}
.len{display:inline-block;font-family:var(--sans);font-size:12.5px;
  font-weight:680;letter-spacing:.11em;text-transform:uppercase;
  color:var(--green-ink);margin:0 0 10px}
.update{background:var(--white);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden}
.update .top{background:var(--mint);padding:13px 22px;font-size:13.5px;
  color:var(--mute);border-bottom:1px solid var(--line)}
.update .top b{color:var(--ink)}
.update .body{padding:22px}
.update .body p{font-size:15.5px}
.update .body p:last-child{margin-bottom:0}
table.data th{vertical-align:top}
table.data tbody th{background:var(--white);text-transform:none;
  letter-spacing:0;font-size:15.5px;font-weight:600;color:var(--ink)}
table.data .num{text-align:right;font-family:var(--serif);font-size:19px;
  color:var(--ink);white-space:nowrap;font-weight:600}
table.data tr.hi th,table.data tr.hi td{background:var(--mint)}
.btn-outline{background:transparent;color:var(--ink);border-color:var(--edge)}
.btn-outline:hover{background:var(--mint)}
/* The "we do not do this" list. A tick turned through 45 degrees is still a
   tick to someone skimming, so the cross is drawn as two strokes. */
.tickset.cross li::before{content:"";width:13px;height:13px;border:0;
  transform:none;top:7px;
  background:
    linear-gradient(45deg,transparent 44%,var(--edge) 44%,var(--edge) 56%,
      transparent 56%),
    linear-gradient(-45deg,transparent 44%,var(--edge) 44%,var(--edge) 56%,
      transparent 56%)}
/* contact.html and thank-you.html were written against a full-bleed hero
   photograph with white text on it. The mockup's hero is a split, so those two
   keep the cream ground and drop the photograph rather than the site growing a
   second hero design nobody would maintain. */
.hero-img,.hero-scrim{display:none}
.hero-in{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;
  align-items:start;padding:62px 0 70px}
.enq{background:var(--white);border:1px solid var(--line);
  border-radius:var(--r);padding:30px 28px}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}

/* --------------------------------------------------------- borough index
   The towns used to be inert pills. They are now the way into ten pages, so
   they need to look like somewhere to go and carry enough detail — the towns
   and the postcode districts — to be worth the click. */
.area-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
  margin-top:26px}
.area-card{display:block;background:var(--white);border:1px solid var(--line);
  border-radius:var(--r);padding:20px 22px;text-decoration:none}
.area-card:hover{border-color:var(--green);background:var(--paper)}
.area-card b{display:block;font-family:var(--serif);font-size:20px;
  font-weight:600;color:var(--ink);margin-bottom:6px}
.area-card span{display:block;font-size:14.5px;line-height:1.5;
  color:var(--body)}
.area-card .pc{font-size:13px;color:var(--mute);margin-top:8px}
a.pill{text-decoration:none}
a.pill:hover{background:var(--ink);color:var(--white)}

/* ------------------------------------------------------- the enquiry form
   Four steps under script, one long form without it. Every rule that hides
   something is scoped to `.js`, so a browser that never runs the script shows
   the whole form and can still submit it. */
.wiz h3{margin-bottom:6px}
.wiz-count,.wiz-bar{display:none}
.js .wiz-count{display:block;font-family:var(--sans);font-size:13px;
  color:var(--mute);margin:0 0 10px}
.js .wiz-count b{color:var(--ink)}
.js .wiz-count span{color:var(--body)}
.js .wiz-bar{display:block;height:4px;border-radius:4px;background:var(--mint);
  overflow:hidden;margin:0 0 24px}
.wiz-bar i{display:block;height:100%;background:var(--green-ink);border-radius:4px}
.js .wiz-step{display:none}
.js .wiz-step.on{display:block}
.wiz-step+.wiz-step{margin-top:26px;padding-top:26px;
  border-top:1px solid var(--line)}
.js .wiz-step+.wiz-step{margin-top:0;padding-top:0;border-top:0}
.wiz legend{font-family:var(--serif);font-size:21px;line-height:1.3;
  color:var(--ink);margin:0 0 16px;padding:0}
.wiz legend:focus-visible{outline:2px solid var(--green-ink);outline-offset:4px}

/* One tap target per answer, and the whole row is the target. A radio dot on
   its own is 13px of hittable area on a phone, which is not enough for the
   hands this site is aimed at. */
.opts{display:grid;gap:9px;margin:0 0 20px}
.opts-2{grid-template-columns:1fr 1fr}
.opt{display:flex;align-items:flex-start;gap:11px;cursor:pointer;
  padding:13px 15px;border:1px solid var(--line);border-radius:12px;
  background:var(--white);font-size:15.5px;line-height:1.4;color:var(--body);
  min-height:48px}
.opt:hover{border-color:var(--green);background:var(--paper)}
.opt input{width:19px;height:19px;flex:0 0 auto;margin:1px 0 0;accent-color:var(--green)}
.opt:has(input:checked){border-color:var(--green);background:var(--mint);
  color:var(--ink)}
.opt input:focus-visible{outline:2px solid var(--green-ink);outline-offset:3px}
.opts.bad,.field.bad input,.field.bad select,.field.bad textarea{
  border-color:var(--warn,#9A3412)}
.opts.bad{border-radius:12px;outline:1px solid #9A3412;outline-offset:5px}

.pc-out{font-size:14px;line-height:1.5;color:var(--mute);margin:8px 0 0}
.pc-out.yes{color:var(--ink)}
.note-warn{background:var(--mint);border-left:3px solid var(--green);
  border-radius:0 12px 12px 0;padding:18px 20px;margin:4px 0 0}
.note-warn p{font-size:15px;line-height:1.55;margin:0 0 10px}
.consent{display:flex;align-items:flex-start;gap:11px;cursor:pointer;
  font-size:14.5px;line-height:1.5;color:var(--body);margin:4px 0 0}
.consent input{width:19px;height:19px;flex:0 0 auto;margin:1px 0 0;
  accent-color:var(--green)}
.wiz-err{background:#FDF2EC;border:1px solid #E7C4AE;border-radius:10px;
  color:#7A2E0E;font-size:14.5px;padding:11px 14px;margin:0 0 16px}
.wiz-nav{display:flex;gap:12px;margin-top:24px}
.wiz-nav .btn{flex:1}
.wiz-back,.wiz-next{display:none}
.js .wiz-back,.js .wiz-next{display:inline-flex}
.js .wiz-nav .off{display:none}

/* ------------------------------------------------- policy document pages
   Privacy, terms and cookies. Set narrow, with a sticky contents list: these
   are the pages somebody opens looking for one paragraph — how long we keep
   their data, what the notice period is — and the measure is set for reading
   a clause, not for reading the whole thing. */
.doc-head{max-width:720px;padding:64px 0 54px}
.doc-head h1{margin-bottom:16px}
.doc{display:grid;grid-template-columns:230px 1fr;gap:60px;
  align-items:start;padding-bottom:20px}
.doc-toc{position:sticky;top:26px}
.doc-toc .k{font-family:var(--sans);font-size:12.5px;font-weight:680;
  letter-spacing:.15em;text-transform:uppercase;color:var(--mute);
  margin:0 0 12px}
.doc-toc ol{margin:0;padding:0;list-style:none;counter-reset:t;
  border-left:1px solid var(--line)}
.doc-toc li{counter-increment:t}
.doc-toc a{display:block;padding:7px 0 7px 16px;margin-left:-1px;
  border-left:2px solid transparent;font-size:14.5px;line-height:1.45;
  color:var(--body);text-decoration:none}
.doc-toc a::before{content:counter(t) ". ";color:var(--mute)}
.doc-toc a:hover{color:var(--ink);border-left-color:var(--green)}
.doc-body{max-width:680px}
.doc-s{scroll-margin-top:24px;padding-bottom:34px;margin-bottom:34px;
  border-bottom:1px solid var(--line)}
.doc-s:last-of-type{border-bottom:0}
.doc-s h2{font-size:25px;margin:0 0 16px;display:flex;gap:12px}
/* --green-ink, not --green: these numerals are text and owe 4.5, which the
   decorative brand green does not make on paper. See the note at the top. */
.doc-s h2 span{color:var(--green-ink);font-family:var(--sans);font-size:17px;
  font-weight:680;padding-top:6px}
.doc-s p{margin-bottom:14px}
.doc-s .tickset{margin:16px 0 18px}
.doc-s .q{font-family:var(--serif);font-size:19px;line-height:1.55;
  color:var(--ink);border-left:3px solid var(--green);padding-left:20px}
.doc-end{border-top:1px solid var(--line);padding-top:24px}

/* ------------------------------------------------------------ responsive */
@media (max-width:1080px){
  .hdr{flex-wrap:wrap;min-height:0;padding-top:14px;padding-bottom:14px;
    gap:14px}
  .navbtn{display:inline-flex;order:2;margin-left:auto}
  .hdr-cta{order:3}
  nav.main{order:4;width:100%;display:none;flex-direction:column;
    align-items:stretch;margin-left:0;border-top:1px solid var(--line);
    padding:8px 0 4px}
  .navtoggle:checked ~ nav.main{display:flex}
  nav.main a{padding:14px 12px;font-size:16px}
  nav.main a[aria-current="page"]{box-shadow:inset 3px 0 0 0 var(--green-ink)}
  .svc{grid-template-columns:repeat(2,1fr)}
  .why{grid-template-columns:repeat(2,1fr);gap:32px}
  .g4{grid-template-columns:repeat(2,1fr)}
  .tst-arrow{display:none}
  .hero-copy{padding-right:32px}
}

@media (max-width:900px){
  h1{font-size:40px}
  h2{font-size:31px}
  .hero h1{font-size:41px}
  .hero-grid{grid-template-columns:1fr}
  .hero-copy{padding:52px var(--pad) 46px}
  .hero-media{min-height:400px}
  .hero .lede{max-width:none}
  .about-split{grid-template-columns:1fr;gap:34px}
  .quote-card{position:static;transform:none;width:auto;margin:-46px 24px 0}
  .split,.split-wide,.hero-in{grid-template-columns:1fr;gap:34px}
  /* The contents list stops being a sidebar and becomes a lead-in above the
     text, so it is still there but no longer sticky against a short screen. */
  .doc{grid-template-columns:1fr;gap:34px}
  .doc-toc{position:static}
  .doc-head{padding:48px 0 38px}
  .area-grid{grid-template-columns:repeat(2,1fr)}
  .opts-2{grid-template-columns:1fr}
  .tst{grid-template-columns:1fr}
  .g2,.g3{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr;gap:32px}
  .foot-script{text-align:left;margin-top:26px}
  .foot-script i{margin-left:0}
  .band{padding:60px 0}
  .cta-in{max-width:none;padding:58px 0}
  .cta-band .scrim{background:linear-gradient(90deg,rgba(6,63,43,.93) 0%,
    rgba(6,63,43,.80) 100%)}
}

@media (max-width:640px){
  :root{--pad:20px}
  body{font-size:16.5px}
  h1{font-size:34px}
  h2{font-size:27px}
  .hero h1{font-size:35px}
  .hero-script{font-size:25px;right:20px;bottom:116px;max-width:230px}
  .play{right:20px;bottom:22px}
  /* Brand and Menu share the top row; the call to action takes the whole of
     the one below. Three controls will not fit across 350px, and of the three
     this is the one worth a full row. */
  .hdr-cta{width:100%}
  .hdr-cta .btn{width:100%}
  .brand img{height:44px}
  .svc{grid-template-columns:1fr}
  .why{grid-template-columns:1fr;gap:28px;text-align:left}
  .why svg{margin-left:0}
  .g4{grid-template-columns:1fr}
  .trust{grid-template-columns:1fr;gap:14px}
  .foot-grid{grid-template-columns:1fr}
  .quote-card{margin-left:14px;margin-right:14px}
  table{font-size:14.5px}
  th,td{padding:12px 13px}
}

/* The enquiry form's honeypot. Off-canvas rather than display:none, because
   the crude bots that fill every field do not run CSS at all and the cleverer
   ones skip anything display:none. A person never sees it; a screen reader is
   told to ignore it. */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;
  overflow:hidden;opacity:0}

/* ------------------------------------------------------------- guides */
.guide-summary{font-family:var(--serif);font-size:21px;line-height:1.5;
  color:var(--ink);background:var(--mint);border-radius:var(--r);
  padding:22px 26px;margin:0 0 30px}
.guide-body h2{font-size:25px;margin:38px 0 14px}
.guide-body h3{font-size:20px;margin:28px 0 10px}
.guide-body p,.guide-body li{margin-bottom:14px;line-height:1.65}
.guide-body ul,.guide-body ol{padding-left:22px;margin:0 0 18px}
.guide-body li{margin-bottom:8px}
.guide-body .tbl{overflow-x:auto;margin:18px 0 26px}
.guide-body table.data{width:100%;border-collapse:collapse;font-size:15.5px}
.guide-body table.data th,.guide-body table.data td{padding:10px 12px;
  border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.guide-body blockquote.q{font-family:var(--serif);font-size:19px;line-height:1.55;
  color:var(--ink);border-left:3px solid var(--green);padding-left:20px;
  margin:22px 0}
.guide-body .faq{margin-top:6px}
.guide-sources ol{padding-left:20px;font-size:15px}
.guide-sources li{margin-bottom:8px;word-break:break-word}
.guide-about{margin:38px 0 26px}
.guide-about .k{font-family:var(--sans);font-size:12.5px;font-weight:680;
  letter-spacing:.06em;text-transform:uppercase;color:var(--green-ink);margin:0 0 10px}
.guide-related{margin-top:8px}
.guide-meta a{color:var(--green-ink)}
.guide-card{display:flex;flex-direction:column;padding:0;overflow:hidden;
  text-decoration:none;color:inherit}
.guide-card img{width:100%;height:180px;object-fit:cover;display:block}
.guide-card-body{padding:20px 22px 24px}
.guide-card-body .k{font-family:var(--sans);font-size:12.5px;font-weight:600;
  color:var(--mute);margin:0 0 8px}
.guide-card h3{font-size:19px;margin:0 0 8px;line-height:1.3}
.guide-card p:last-child{margin:0;font-size:15px;color:var(--body)}
.guide-card:hover h3{color:var(--green-ink)}
@media (max-width:900px){.guide-summary{font-size:18px;padding:18px 20px}}