/* Your Voice Matters (EI-119): the microsite's own look. Since EI-125 it follows the client's bright "Your Voice
   Matters, Bedfordshire" branding, rebuilt in code (never her artwork): the wordmark is live text, the post-its,
   buttons and bands are CSS, and the brush strokes and watercolour swashes are inline SVG in the page (no images but
   the official Empowered Insights logo). Fonts are self-hosted: Fraunces (headings), Caveat (hand-written) and
   Dancing Script ("Matters") from Google Fonts under the SIL Open Font License (licences in assets/fonts/), Jost
   (the wordmark) and Mulish (text) as the main site uses them. Mobile first. The vhost's CSP allows no inline style
   or script, so everything lives here. Text colours meet WCAG AA on their backgrounds. */

@font-face{font-family:'Fraunces';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/fraunces-700-latin.woff2') format('woff2')}
@font-face{font-family:'Caveat';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/caveat-500-latin.woff2') format('woff2')}
@font-face{font-family:'Dancing Script';font-style:normal;font-weight:400 700;font-display:swap;src:url('/assets/fonts/dancing-script-700-latin.woff2') format('woff2')}
@font-face{font-family:'Jost';font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/fonts/jost-300-latin.woff2') format('woff2')}
@font-face{font-family:'Mulish';font-style:normal;font-weight:200 1000;font-display:swap;src:url('/assets/fonts/mulish-400-latin.woff2') format('woff2')}

:root{
  --ink:#2f1d4f;          /* deep purple: headings, the wordmark, buttons (14.9:1 on white) */
  --text:#3b3550;
  --muted:#5a536c;
  --teal:#1f7a7a;         /* "Matters" and teal buttons (4.8:1 on white) */
  --teal-btn:#1c6e70;
  --pink-btn:#b5306b;     /* white on it 5.8:1 */
  --gold:#d4a43c;         /* decoration only */
  --cream:#fdf9f4;
  --band:#efe6f7;         /* the light lilac bands */
  --line:#e2d8ec;
  --focus:#1d4ed8;
  --danger-bg:#fff1f2;
  --danger:#9f1239;
  /* the five note colours, brighter pastels */
  --note-yellow:#ffe98a;
  --note-pink:#ffc2d9;
  --note-blue:#a9e3f5;
  --note-green:#bdeec6;
  --note-purple:#dcc9f7;
  --hand:'Caveat','Segoe Print','Bradley Hand',cursive;
  --script:'Dancing Script','Segoe Script','Brush Script MT',cursive;
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Mulish',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body.vm{margin:0;overflow-x:hidden;overflow-wrap:break-word;background:var(--cream);color:var(--text);font-family:var(--sans);font-size:1.0625rem;line-height:1.6}
.vm img{max-width:100%;height:auto}
.vm a{color:var(--ink)}
.vm a:focus-visible,.vm button:focus-visible,.vm input:focus-visible,.vm textarea:focus-visible,.vm [tabindex="-1"]:focus{outline:3px solid var(--focus);outline-offset:3px}
.vm-wrap{position:relative;z-index:1;width:100%;max-width:1160px;margin:0 auto;padding:0 16px}
.vm-sec{padding:40px 16px}
.vm-narrow{max-width:720px;margin:0 auto}
.vm-defs{position:absolute;width:0;height:0;overflow:hidden}

/* skip link, quick exit and the 999 line (unchanged in prominence: fixed, red, always on top) */
.vm-skip{position:absolute;left:-10000px;top:0;background:#fff;padding:8px 12px;z-index:40}
.vm-skip:focus{left:8px;top:8px}
.vm-exit{position:fixed;right:12px;bottom:12px;z-index:30;background:#9f1239;color:#fff!important;font-weight:800;text-decoration:none;
  padding:12px 18px;border-radius:999px;box-shadow:0 4px 14px rgba(0,0,0,.25);font-size:1rem}
.vm-exit:hover{background:#7f0f2e}
.vm-safebar{margin:0;background:var(--ink);color:#fff;font-size:.9rem;text-align:center;padding:8px 16px}
.vm-safebar a{color:#fff}

/* header: the official Empowered Insights mark and wordmark */
.vm-top{position:relative;z-index:2;background:rgba(255,255,255,.92);border-bottom:1px solid var(--line)}
.vm-top-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 18px;padding-top:12px;padding-bottom:12px}
.vm-brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.vm-brand img{height:40px;width:auto}
.vm .wm{font-family:'Jost',sans-serif;font-weight:600;font-size:1.15rem;color:var(--ink);letter-spacing:.02em;white-space:nowrap}
.vm-nav{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;font-size:.95rem}
.vm-nav a{text-decoration:none;font-weight:700}
.vm-nav a:hover{text-decoration:underline}

/* buttons: purple, teal and pink pills, as on her posts */
.vm-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--ink);color:#fff!important;font-weight:800;text-decoration:none;border:0;border-radius:999px;
  padding:14px 26px;font-size:1.05rem;font-family:inherit;cursor:pointer;line-height:1.2;box-shadow:0 8px 18px -10px rgba(47,29,79,.7)}
.vm-btn:hover{background:#1f1236}
.vm-btn-teal{background:var(--teal-btn);box-shadow:0 8px 18px -10px rgba(28,110,112,.8)}
.vm-btn-teal:hover{background:#145457}
.vm-btn-pink{background:var(--pink-btn);box-shadow:0 8px 18px -10px rgba(181,48,107,.8)}
.vm-btn-pink:hover{background:#962457}
.vm-btn-small{padding:9px 18px;font-size:.95rem;box-shadow:none}
.vm-btn-icon{padding-left:20px;padding-right:18px}
.vm-i{flex:none;width:22px;height:22px}
.vm-i-chevron{width:18px;height:18px;margin-left:2px;opacity:.9}
.vm-ctas{display:flex;flex-wrap:wrap;gap:12px;margin:0}

/* the watercolour swashes: decorative SVG behind a section's content */
.vm-hero,.vm-band,.vm-board,.vm-how,.vm-thanks{position:relative;overflow:hidden}
.vm-swash{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}

/* hero */
.vm-hero{padding:30px 0 34px;background:radial-gradient(ellipse at 85% 10%,#fff 0%,rgba(255,255,255,0) 60%),linear-gradient(180deg,#fffdfb 0%,var(--cream) 100%)}
.vm-h1-small{font-family:var(--serif);color:var(--ink);font-size:2rem;line-height:1.15;margin:0 0 12px}
.vm-lede{max-width:34em;margin:18px 0 20px;font-size:1.08rem;color:var(--text)}

/* the wordmark: live text, "Your Voice" in the serif, "Matters" in the brush script, the pink stroke, BEDFORDSHIRE,
   the gold heart and the strapline */
.vm-wm{position:relative;display:inline-block;max-width:100%;text-align:center;padding:0 4px}
.vm-title{font-family:var(--serif);font-weight:700;color:var(--ink);margin:0;line-height:.9;letter-spacing:-.02em}
.vm-title span{display:block}
.vm-title-1{font-size:clamp(2.9rem,13vw,5.4rem)}
.vm-title-2{font-family:var(--script);font-weight:700;color:var(--teal);font-size:clamp(3.6rem,17vw,6.9rem);letter-spacing:0;line-height:1;
  margin:-.04em 0 0;transform:rotate(-4deg);position:relative;z-index:1}
.vm-wm-stroke{display:block;width:100%;height:clamp(20px,5.4vw,34px);margin:-.5em auto 0;position:relative;z-index:0}
.vm-wm-county{margin:6px 0 0;font-family:var(--sans);font-weight:700;color:var(--ink);text-transform:uppercase;letter-spacing:.38em;
  font-size:clamp(.95rem,4vw,1.45rem);padding-left:.38em;line-height:1.3}
.vm-wm-heart{display:block;width:min(240px,70%);height:auto;margin:4px auto 0}
.vm-wm-strap{margin:8px 0 0;font-family:var(--sans);font-weight:700;font-size:clamp(.66rem,2.6vw,.82rem);text-transform:uppercase;letter-spacing:.14em;color:var(--ink)}
.vm-wm-strap>span{white-space:nowrap}
.vm-dot{color:#9a6f14;padding:0 .35em}
.vm-hero-sparks path{fill:none;stroke-width:5;stroke-linecap:round}

.vm-h2{font-family:var(--serif);color:var(--ink);font-size:1.7rem;line-height:1.2;margin:0 0 10px}
.vm-hand{font-family:var(--hand);font-weight:500}

/* the five colours, used by the notes, the swatches and the step numbers */
.vm-note-yellow{background-color:var(--note-yellow)}
.vm-note-pink{background-color:var(--note-pink)}
.vm-note-blue{background-color:var(--note-blue)}
.vm-note-green{background-color:var(--note-green)}
.vm-note-purple{background-color:var(--note-purple)}

/* a post-it: square-ish, a soft lifted shadow, a gentle tilt, a hint of paper sheen, hand-written text */
.vm-postit{position:relative;font-family:var(--hand);font-weight:500;color:#2a2238;font-size:1.7rem;line-height:1.15;margin:0;padding:22px 18px;
  width:150px;min-height:140px;border-radius:2px 2px 4px 2px;
  background-image:linear-gradient(170deg,rgba(255,255,255,.45) 0%,rgba(255,255,255,0) 38%,rgba(0,0,0,0) 78%,rgba(47,29,79,.06) 100%);
  box-shadow:0 18px 22px -14px rgba(47,29,79,.42),0 3px 6px rgba(47,29,79,.10),inset 0 -2px 0 rgba(0,0,0,.03)}
.vm-tilt-l{transform:rotate(-5deg)}
.vm-tilt-r{transform:rotate(4deg)}
.vm-tilt-l2{transform:rotate(-2.5deg)}
.vm-heart,.vm-smile{display:block;text-align:right;font-size:1.5rem;line-height:1}

/* hero: the notes sit under the text on a phone, beside it on a wide screen */
.vm-hero-grid{display:grid;gap:26px}
.vm-hero-text{text-align:left}
.vm-hero-notes{position:relative;display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:6px;padding:14px 0 4px}
.vm-hero-grid>*,.vm-share-grid>*{min-width:0}
.vm-hero-notes .vm-postit{width:31%;max-width:150px;min-height:104px;font-size:1.22rem;padding:12px 10px;z-index:1}
.vm-hero-n2{margin-top:22px}
.vm-hero-ring{position:absolute;left:-4%;top:-6%;width:108%;height:112%;z-index:0;overflow:visible}
.vm-hero-sparks{position:absolute;right:2px;top:-6px;width:34px;height:34px;z-index:1;overflow:visible}
.vm-hero-tag{position:relative;z-index:1;flex-basis:100%;text-align:center;color:var(--ink);font-size:1.6rem;line-height:1.15;margin:12px 0 0;transform:rotate(-2deg)}
.vm-hero-tag .vm-heart{display:inline;font-size:1.4rem}

/* the four reassurance points, on a lilac band with brush ends */
.vm-band{background:var(--band);padding:24px 0}
.vm-points{list-style:none;margin:0 auto;display:grid;gap:16px}
.vm-points li{display:flex;align-items:flex-start;gap:14px;color:var(--ink)}
.vm-points svg{flex:none;color:var(--ink)}
.vm-points b{display:block;font-size:1.02rem}
.vm-points span{font-size:.95rem;color:var(--text)}

/* the form and the safety panel */
.vm-share{padding:36px 0;background:linear-gradient(180deg,#fff 0%,var(--cream) 100%)}
.vm-share-grid{display:grid;gap:24px;align-items:start}
.vm-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px 18px;box-shadow:0 14px 30px -18px rgba(47,29,79,.4)}
.vm-form-card{border-top:6px solid var(--note-pink)}
.vm-form{margin-top:8px}
.vm-guard{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.vm-field{margin:0 0 20px;padding:0;border:0;min-width:0}
.vm-field-bad{border-left:4px solid var(--danger);padding-left:12px}
.vm-label{display:block;font-weight:800;color:var(--ink);font-size:1.05rem;margin:0 0 4px;padding:0}
.vm-hint{margin:0 0 8px;color:var(--muted);font-size:.95rem}
.vm-field-error{margin:0 0 8px;color:var(--danger);font-weight:800}
.vm textarea{display:block;width:100%;min-height:150px;padding:14px;border:2px solid #9b8fb0;border-radius:12px;background:#fffdf5;
  font-family:var(--sans);font-size:1.05rem;line-height:1.5;color:var(--text);resize:vertical}
.vm textarea[aria-invalid="true"]{border-color:var(--danger)}
.vm-count{margin:6px 0 0;text-align:right;font-size:.9rem;color:var(--muted)}
.vm-count.vm-count-near{color:var(--danger);font-weight:800}
.vm-swatches{display:flex;flex-wrap:wrap;gap:10px}
.vm-swatch{position:relative;display:flex;align-items:center;gap:8px;padding:10px 14px 10px 10px;border-radius:999px;border:2px solid transparent;cursor:pointer;font-weight:700;color:#2a2238;
  box-shadow:0 4px 8px -5px rgba(47,29,79,.45)}
.vm-swatch input{width:22px;height:22px;margin:0;accent-color:var(--ink)}
.vm-swatch:has(input:checked){border-color:var(--ink)}
.vm-swatch:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:2px}
.vm-btn-wide{display:flex;width:100%;text-align:center}
.vm-small{font-size:.9rem;color:var(--muted);margin:12px 0 0}
.vm-errors{border:3px solid var(--danger);background:var(--danger-bg);border-radius:12px;padding:14px 16px;margin:12px 0 18px}
.vm-errors h3{margin:0 0 6px;color:var(--danger);font-size:1.1rem}
.vm-errors ul{margin:0;padding-left:20px}
.vm-errors a{color:var(--danger);font-weight:800}
.vm-errors p{margin:0}

/* the safety panel: as prominent as before (white, a strong purple border), never softened by the decoration */
.vm-safety{position:relative;z-index:1;background:#fff;border:2px solid var(--ink);border-radius:18px;padding:20px 18px}
.vm-safety h2{font-family:var(--serif);color:var(--ink);font-size:1.5rem;margin:0 0 8px}
.vm-safety h3{color:var(--ink);font-size:1.1rem;margin:18px 0 6px}
.vm-safety p{margin:0 0 10px}
.vm-not-watched{background:var(--band);border-radius:10px;padding:10px 12px}
.vm-lines,.vm-guidance{margin:0 0 6px;padding-left:20px}
.vm-lines li,.vm-guidance li{margin:0 0 6px}

/* the board of approved notes (EI-123): post-its in a grid, one column on a small phone, more as the screen widens */
.vm-board{background:#fffaf0;padding:38px 0 44px;border-top:1px solid var(--line)}
.vm-board-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 18px}
.vm-board-count{font-family:var(--hand);font-weight:500;font-size:1.6rem;color:var(--teal);margin:0 0 6px}
.vm-board-empty{margin:0}
.vm-notes{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr));gap:26px 22px}
.vm-board-note{width:auto;min-height:160px;font-size:1.65rem;display:flex;flex-direction:column;justify-content:space-between;gap:10px}
.vm-note-text{margin:0;white-space:pre-line;overflow-wrap:anywhere}
.vm-note-date{margin:0;font-family:var(--sans);font-size:.8rem;color:#463f5c;text-align:right}
.vm-board-note.vm-tilt-l{transform:rotate(-2.4deg)}
.vm-board-note.vm-tilt-r{transform:rotate(1.8deg)}
.vm-board-note.vm-tilt-l2{transform:rotate(-.9deg)}
.vm-board-note:nth-child(4n+2){transform:rotate(2.6deg) translateY(4px)}
.vm-board-note:nth-child(5n){transform:rotate(-1.6deg) translateY(-3px)}
.vm-paging{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 18px;margin:30px 0 0}
.vm-paging span{font-weight:700;color:var(--ink)}

/* how it works: a soft teal band, numbered circles in the note colours */
.vm-how{background:#e6f4f2;padding:34px 0 38px}
.vm-steps{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:18px}
.vm-steps li{display:flex;gap:14px;align-items:flex-start}
.vm-steps b{display:block;color:var(--ink);font-size:1.05rem}
.vm-step-n{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;font-family:var(--serif);font-weight:700;font-size:1.3rem;color:var(--ink);
  box-shadow:0 6px 12px -6px rgba(47,29,79,.45),inset 0 0 0 3px rgba(255,255,255,.6)}

/* footer */
.vm-foot{position:relative;z-index:1;background:#fff;border-top:1px solid var(--line);padding:28px 0 96px;font-size:.95rem;color:var(--muted)}
.vm-foot p{margin:0 0 8px}
.vm-foot-brand{display:flex;align-items:center;gap:10px}
.vm-foot-brand img{height:32px;width:auto}

/* the thank-you */
.vm-thanks{padding:36px 0}
.vm-thanks-note{margin:0 0 18px}

@media (min-width:640px){
  .vm-hero-notes .vm-postit{width:150px;min-height:136px;font-size:1.5rem;padding:16px 14px}
  .vm-points{grid-template-columns:1fr 1fr}
  .vm-steps{grid-template-columns:1fr 1fr}
  .vm-card,.vm-safety{padding:28px}
}
@media (min-width:960px){
  .vm-hero{padding:46px 0 54px}
  .vm-hero-grid{grid-template-columns:1.02fr 1fr;align-items:center;gap:36px}

  .vm-wm-strap{white-space:nowrap;font-size:.76rem;letter-spacing:.1em}
  /* the three notes overlap like the logo artwork, the hand-written line beside them */
  .vm-hero-notes{display:block;height:470px;padding:0}
  .vm-hero-notes .vm-postit{position:absolute;width:190px;max-width:none;min-height:180px;font-size:1.95rem;padding:24px 20px}
  .vm-hero-n1{left:2%;top:34px}
  .vm-hero-n2{left:36%;top:96px;margin-top:0}
  .vm-hero-n3{left:14%;top:250px}
  .vm-hero-ring{left:-6%;top:0;width:96%;height:100%}
  .vm-hero-sparks{left:72%;right:auto;top:14px;width:46px;height:46px}
  .vm-hero-tag{position:absolute;right:0;bottom:44px;width:210px;text-align:left;font-size:1.85rem;transform:rotate(-7deg)}
  .vm-points{grid-template-columns:repeat(4,1fr)}
  .vm-points li+li{border-left:1px solid #cdbde0;padding-left:16px}
  .vm-share-grid{grid-template-columns:1.25fr 1fr}
  .vm-steps{grid-template-columns:repeat(4,1fr)}
  .vm-steps li+li{border-left:1px solid #bcdcd7;padding-left:16px}
  .vm-h2{font-size:1.9rem}
}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* Text for screen readers only (the "Error: " before each field error, EI-121); kept by EI-125 review 1236. */
.vm-visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* The hand-written line sits on its own (green) post-it, like the other three (Marc, 16 Oct 2026). These come after the
   hero-note sizes so they win; the note keeps the tag's own place and tilt. */
.vm-hero-notes .vm-postit.vm-hero-tag{width:auto;max-width:300px;min-height:0;margin:16px auto 0;padding:14px 16px;font-size:1.35rem;text-align:left;transform:rotate(-2deg)}
@media (min-width:960px){
  .vm-hero-notes .vm-postit.vm-hero-tag{position:absolute;right:0;bottom:30px;left:auto;top:auto;width:230px;max-width:none;margin:0;padding:18px 18px;font-size:1.6rem;transform:rotate(-6deg)}
}

/* the privacy notice (EI-128): a readable card, headings in the serif, lists with room to breathe */
.vm-privacy h2{font-family:var(--serif);color:var(--ink);font-size:1.3rem;line-height:1.25;margin:26px 0 8px}
.vm-privacy ul{padding-left:1.2em;margin:0 0 12px}
.vm-privacy li{margin:0 0 6px}
.vm-privacy p{margin:0 0 12px}