/* ==========================================================================
   imiy — building inclusion.
   One stylesheet for the whole site. No build step, no framework.

   Measured against the original site so the rebuild matches it:
     container  1200px, padding-inline 24px (mobile) / 40px (desktop)
     section    padding-top 48px, padding-bottom 60px
     panel      white, radius 26px, 2px translucent-blue border, NO shadow, 40px pad
     sub-card   white, radius 22px, 2px translucent-ink border, 24px pad
   ========================================================================== */

/* --- 1. Design tokens ---------------------------------------------------- */
:root {
  --cream:        #F7F3EA;
  --cream-2:      #EFE8DA;
  --card:         #FFFFFF;
  --ink:          #2A2521;
  --ink-soft:     rgba(42,37,33,.75);   /* the original's grey: ink at 75%, 6.34:1 on cream */
  --ink-faint:    #726960;              /* 4.86:1 on cream — WCAG AA */

  --blue:         #6795DF;              /* primary */
  --blue-deep:    #3F6AAE;              /* links, the connecting line */
  --blue-head:    #5C88D2;              /* all headings */
  --green-logo:   #7EC581;              /* logo mint — GRAPHICS ONLY, 1.86:1 on cream */
  --green:        #45994B;              /* 3.21:1 — large text and graphics */
  --green-deep:   #2C5233;
  --coral:        #F5B6A0;

  --panel-border: rgba(104,150,223,.30);  /* big white panels */
  --card-border:  rgba(42,37,33,.20);     /* sub-cards inside them */
  --field:        #F5EFE3;                /* form input fill */
  --line:         #E2D9C9;
  --focus:        #3F6AAE;

  --font-display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --font-body:    Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  /* Type scale — matched to the original */
  --t-hero:    clamp(2.4rem, 5.8vw, 4.75rem);   /* 76px at full size */
  --t-section: clamp(2rem, 4.2vw, 3.5rem);      /* 56px */
  --t-sub:     clamp(1.6rem, 2.6vw, 2.25rem);   /* 36px */
  --t-card:    1.25rem;                          /* 20px */
  --t-body:    1.0625rem;
  --t-panel:   1.18rem;                          /* the statement boxes */
  --t-small:   .95rem;
  --t-eyebrow: .82rem;

  --radius-panel: 26px;
  --radius-card:  22px;
  --radius-field: 14px;
  --radius-pill:  999px;

  --container: 1200px;
  --gutter:    24px;
  --sec-pt:    48px;
  --sec-pb:    60px;
}
@media (min-width: 64rem) { :root { --gutter: 40px; } }

/* --- 2. Reset ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 6.5rem; font-size: calc(100% * var(--a11y-scale, 1)); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  margin: 0; background: var(--cream); color: var(--ink);
  font-family: var(--font-body); font-size: var(--t-body); line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--blue-deep); }
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible {
  outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px;
}
.skip-link {
  position: absolute; left: .5rem; top: -4rem; z-index: 100;
  background: var(--ink); color: var(--cream); padding: .7rem 1.1rem;
  border-radius: var(--radius-field); font-weight: 600; transition: top .15s ease;
}
.skip-link:focus { top: .5rem; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* --- 3. Layout ----------------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section > .container { padding-top: var(--sec-pt); padding-bottom: var(--sec-pb); }
main { position: relative; }

/* The connecting line — one path threaded down the whole page, weaving
   between the panels. Desktop only, exactly as the original. */
.thread { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; display: none; z-index: 0; }
@media (min-width: 64rem) { .thread { display: block; } }
.thread path { fill: none; stroke: var(--blue-deep); stroke-width: 1.6; opacity: .6; }
html[data-a11y-calm] .thread { display: none; }
.section { position: relative; z-index: 1; }

/* --- 4. The white panel -------------------------------------------------- */
.panel {
  background: var(--card);
  border: 2px solid var(--panel-border);
  border-radius: var(--radius-panel);
  padding: clamp(1.5rem, 4vw, 40px);
}
.panel + .panel { margin-top: 40px; }

/* --- 5. Typography ------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display); font-weight: 800;
  line-height: 1.05; letter-spacing: -.025em; text-wrap: balance;
  margin: 0; color: var(--blue-head);
}
h1 { font-size: var(--t-hero); }
h2 { font-size: var(--t-section); }
h3 { font-size: var(--t-sub); }
p { margin: 0; }
.eyebrow {
  display: flex; align-items: center; gap: 12px;
  font-size: var(--t-eyebrow); font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--blue-deep); margin: 0;
}
.eyebrow::before { content: ""; width: 32px; height: 1px; background: var(--blue); flex: 0 0 auto; }
.lede { font-size: 1.18rem; color: var(--ink-soft); }
.mono { font-family: var(--font-mono); }

/* --- 6. Buttons ---------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--font-body); font-size: 1rem; font-weight: 700;
  padding: 1rem 1.9rem; border-radius: var(--radius-pill);
  border: 2px solid transparent; text-decoration: none; cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.btn-primary { background: var(--blue); color: var(--ink); }
.btn-primary:hover { background: var(--blue-deep); color: #fff; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--card-border); }
.btn-ghost:hover { border-color: var(--blue-deep); color: var(--blue-deep); }
.btn-block { width: 100%; }

/* --- 7. Header ----------------------------------------------------------- */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(247,243,234,.94); backdrop-filter: blur(10px); }
.header-inner { display: flex; align-items: center; gap: 1.5rem; padding-block: .8rem; }
.brand { display: flex; align-items: center; text-decoration: none; color: inherit; flex: 0 0 auto; }
.brand img { width: auto; height: 46px; }
.brand-name { font-family: var(--font-display); font-weight: 800; font-size: 1.9rem; color: var(--blue-head); line-height: 1; }
.brand-tag  { font-size: .78rem; font-weight: 700; color: var(--green); line-height: 1; margin-top: .25rem; }
.site-nav { margin-inline: auto; }
.site-nav ul { display: flex; gap: 2rem; list-style: none; margin: 0; padding: 0; }
.site-nav a { color: var(--ink-soft); text-decoration: none; font-weight: 400; font-size: 1rem; padding-block: .3rem; border-bottom: 2px solid transparent; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--blue-deep); border-bottom-color: var(--blue); }
.nav-toggle { display: none; background: none; border: 2px solid var(--card-border); border-radius: var(--radius-field); padding: .55rem .8rem; cursor: pointer; font: inherit; font-size: .9rem; color: var(--ink); margin-left: auto; }
@media (max-width: 64rem) {
  .nav-toggle { display: block; }
  .site-nav { display: none; margin: 0; flex-basis: 100%; }
  .site-nav.open { display: block; }
  .site-nav ul { flex-direction: column; gap: 0; padding-block: .5rem; }
  .site-nav a { display: block; padding: .8rem .25rem; border-bottom: 1px solid var(--line); }
  .header-inner { flex-wrap: wrap; }
  .header-cta { display: none; }
  .site-nav.open ~ .header-cta { display: block; flex-basis: 100%; margin-bottom: 1rem; }
  .site-nav.open ~ .header-cta .btn { width: 100%; }
}

/* --- 8. Hero ------------------------------------------------------------- */
.hero > .container { padding-top: 48px; padding-bottom: 60px; }
.hero h1 { margin-top: 2rem; }
.hero .hero-cta { margin-top: 2.5rem; }
.hero-meta { list-style: none; margin: 3rem 0 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; font-size: var(--t-small); color: var(--ink-soft); }

/* --- 9. Statement boxes (inside the first panel) ------------------------- */
.statements { margin-top: 2rem; display: grid; gap: 20px; }
@media (min-width: 48rem) { .statements { grid-template-columns: repeat(3, 1fr); } }
.statements p {
  height: 100%; background: var(--card);
  border: 2px solid var(--card-border); border-radius: var(--radius-card);
  padding: 24px; font-family: var(--font-display); font-weight: 500;
  font-size: var(--t-panel); line-height: 1.375; color: var(--ink);
}

/* --- 10. Offer cards ----------------------------------------------------- */
.offer-grid { margin-top: 2rem; display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 40rem) { .offer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 56rem) { .offer-grid { grid-template-columns: repeat(3, 1fr); } }
.offer-card {
  background: var(--card); border: 2px solid var(--card-border);
  border-radius: var(--radius-card); padding: 24px;
  display: flex; flex-direction: column; align-items: center; gap: .75rem;
  text-align: center;                      /* matches the original */
  transition: border-color .15s ease;
}
.offer-card:hover { border-color: var(--blue); }
.offer-card h3 { font-size: 1.27rem; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.offer-card p { font-size: var(--t-small); color: var(--ink-soft); flex: 1; line-height: 1.5; }
.offer-card .card-link { font-weight: 600; font-size: var(--t-small); text-decoration: none; color: var(--blue-deep); }
.offer-card .card-link:hover { text-decoration: underline; }
.offer-card .ai { color: var(--green); }

/* --- 11. Process steps --------------------------------------------------- */
.steps { list-style: none; margin: 2.5rem 0 0; padding: 0; display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 48rem) { .steps { grid-template-columns: repeat(3, 1fr); } }
.steps li {
  background: var(--card); border: 2px solid var(--card-border);
  border-radius: var(--radius-card); padding: 28px 24px 26px;
  display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center;
}
.step-num {
  width: 3.5rem; height: 3.5rem; border-radius: 50%;
  background: var(--blue); color: var(--ink);
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 800; font-size: 1.35rem;
}
.steps h3 { font-size: var(--t-card); color: var(--ink); }
.steps p { font-size: var(--t-small); color: var(--ink-soft); line-height: 1.5; }
.steps .card-link { font-size: var(--t-small); font-weight: 600; color: var(--blue-deep); text-decoration: none; }
.steps .card-link:hover { text-decoration: underline; }

/* --- 12. Testimonials ---------------------------------------------------- */
.quote { display: none; text-align: center; margin: 0; }
.quote.active { display: block; }
.quote blockquote {
  margin: 0 auto; max-width: 46rem;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.35rem, 2.6vw, 2.1rem); line-height: 1.25;
  letter-spacing: -.02em; color: var(--ink);
}
.quote figcaption {
  margin-top: 1.75rem; font-family: var(--font-mono); font-size: .82rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--blue-deep);
}
.quote-nav { display: flex; align-items: center; justify-content: center; gap: .75rem; margin-top: 1.75rem; }
.quote-dot { width: .7rem; height: .7rem; border-radius: 50%; border: none; background: var(--card-border); cursor: pointer; padding: 0; }
.quote-dot[aria-selected="true"] { background: var(--blue-deep); }
.quote-arrow {
  background: var(--card); border: 2px solid var(--card-border); border-radius: 50%;
  width: 2.5rem; height: 2.5rem; cursor: pointer; font-size: 1.1rem; line-height: 1; color: var(--ink);
}
.quote-arrow:hover { border-color: var(--blue-deep); color: var(--blue-deep); }

/* --- 13. About ----------------------------------------------------------- */
.about-grid { display: grid; gap: clamp(2rem, 4vw, 3rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 56rem) { .about-grid { grid-template-columns: 1.15fr 1fr; } }
.about-copy { display: flex; flex-direction: column; gap: 1.15rem; }
.about-copy p { color: var(--ink-soft); max-width: 46ch; }
.about-sign { font-family: var(--font-display); font-weight: 800; font-size: 1.4rem; color: var(--blue-head); }
/* Photo frame. Measured off the original: ONE rounded box, overflow hidden,
   cream behind, photo cropped to fill with object-fit. No offset backing
   panel — that was my invention and it read as a stack of boxes. */
.about-photo {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--cream-2);
  aspect-ratio: 450 / 523;
}
.about-photo img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 22%;   /* keeps his face off the crop line */
  border-radius: 0;
}
.about-photo .ph {
  width: 100%; height: 100%;
  display: grid; place-items: center; text-align: center; padding: 2rem;
  color: var(--ink-faint); font-size: var(--t-small);
}

/* --- 14. Resource cards -------------------------------------------------- */
.resource-grid { margin-top: 2rem; display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 48rem) { .resource-grid { grid-template-columns: repeat(3, 1fr); } }
.resource-card { background: var(--card); border: 2px solid var(--card-border); border-radius: var(--radius-card); overflow: hidden; display: flex; flex-direction: column; }
.resource-thumb {
  aspect-ratio: 3 / 2;
  border-bottom: 2px solid var(--card-border);
  background: #D6E2F6;                 /* matches the artwork, so it never flashes cream */
  overflow: hidden;
}
.resource-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Kept for any card that has no cover image yet. */
.stamp {
  font-family: var(--font-display); font-weight: 800; font-size: 1.15rem;
  letter-spacing: .04em; text-transform: uppercase; color: var(--ink-faint);
  border: 2px solid var(--ink-faint); border-radius: 14px;
  padding: .55rem 1.1rem; transform: rotate(-6deg); opacity: .75;
}
.resource-body { padding: 22px; display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.resource-body h3 { font-size: 1.15rem; color: var(--ink); }
.resource-body > p { font-size: var(--t-small); color: var(--ink-soft); line-height: 1.5; }

/* --- 15. Forms ----------------------------------------------------------- */
.form-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 48rem) { .form-grid { grid-template-columns: 1fr 1fr; } }
.field { display: flex; flex-direction: column; gap: .5rem; }
.field.full { grid-column: 1 / -1; }
.field label, .field .flabel { font-weight: 700; font-size: 1rem; color: var(--ink); }
.field .optional { font-weight: 400; color: var(--ink-faint); }
.field input, .field textarea, .field select {
  font: inherit; font-size: 1rem; padding: 1rem 1.15rem;
  border: 1px solid var(--line); border-radius: var(--radius-field);
  background: var(--field); color: var(--ink); width: 100%;
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-faint); }
.field textarea { min-height: 10rem; resize: vertical; line-height: 1.55; }
.field-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.check { display: flex; gap: .9rem; align-items: flex-start; font-size: var(--t-small); color: var(--ink); line-height: 1.5; }
.check input {
  margin: .1rem 0 0; width: 1.35rem; height: 1.35rem; flex: 0 0 auto;
  accent-color: var(--blue-deep); border-radius: 5px;
}
.form-note { font-size: var(--t-small); color: var(--ink-faint); }
.hp { position: absolute; left: -9999px; }

/* --- 16. Footer ---------------------------------------------------------- */
.site-footer { background: var(--ink); color: var(--cream); padding-block: clamp(3rem, 6vw, 4rem) 2rem; }
.site-footer a { color: var(--cream); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.footer-grid { display: grid; gap: 2.25rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.footer-brand .brand-name { color: var(--cream); }
.footer-brand .brand-tag { color: var(--blue); }
.footer-blurb { color: rgba(247,243,234,.78); font-size: var(--t-small); margin-top: .9rem; }
.footer-col h2 { font-family: var(--font-body); font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(247,243,234,.72); margin-bottom: .9rem; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; font-size: var(--t-small); }
.newsletter { display: flex; gap: .5rem; margin-top: .75rem; flex-wrap: wrap; }
.newsletter input { flex: 1 1 11rem; font: inherit; font-size: var(--t-small); padding: .8rem 1rem; border-radius: var(--radius-field); border: 1px solid rgba(247,243,234,.25); background: rgba(247,243,234,.08); color: var(--cream); }
.newsletter input::placeholder { color: rgba(247,243,234,.55); }
.newsletter button { font: inherit; font-size: var(--t-small); font-weight: 700; padding: .8rem 1.3rem; border-radius: var(--radius-field); border: none; background: var(--blue); color: var(--ink); cursor: pointer; }
.footer-base { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(247,243,234,.15); font-size: var(--t-small); color: rgba(247,243,234,.75); }

/* --- 17. Prose, legal and article pages ---------------------------------- */
.prose { max-width: 44rem; }
.prose > * + * { margin-top: 1.15rem; }
.prose h2 { font-size: var(--t-sub); margin-top: 2.75rem; }
.prose h3 { font-size: 1.3rem; margin-top: 2rem; color: var(--ink); }
.prose ul, .prose ol { padding-left: 1.3rem; display: flex; flex-direction: column; gap: .5rem; }
.prose li::marker { color: var(--blue-deep); }
.meta, .breadcrumb { font-size: var(--t-small); color: var(--ink-faint); }
.breadcrumb a { color: var(--ink-soft); }
.toc { background: var(--cream-2); border-radius: var(--radius-card); padding: 1.5rem; }
.toc h2 { font-family: var(--font-body); font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 .8rem; }
.toc ol { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: .45rem; font-size: var(--t-small); }
.callout { background: var(--cream-2); border-radius: var(--radius-card); padding: clamp(1.4rem, 3vw, 2rem); }

/* --- 18. Services page ---------------------------------------------------
   The original is a reading page, not a stack of panels: a narrower 944px
   column of plain sections on cream, with one white card to close. Kept.
   Changed deliberately: the bullet lists. In the original a lead-in line like
   "Areas of focus include:" is itself a bullet, and all five focus areas are
   crammed into ONE bullet separated by pipes, wrapping over three lines.
   Sean flagged the first half of that; the second half is just as bad.
   ------------------------------------------------------------------------ */
.services-column { max-width: 944px; }

.service { scroll-margin-top: 7rem; }
.service + .service { margin-top: clamp(2.5rem, 5vw, 3.75rem); }
.service > * + * { margin-top: 1.15rem; }
.service h2 { font-size: clamp(1.75rem, 3.2vw, 2.25rem); }
.service > p { font-size: 1.12rem; color: var(--ink-soft); max-width: 62ch; }

/* The lead-in line: its own line, not a bullet (Sean's VN5). */
.service .lead-in { font-weight: 700; color: var(--ink); font-size: 1.05rem; }

.service ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .85rem; }
.service ul li {
  position: relative; padding-left: 1.4rem;
  font-size: 1rem; line-height: 1.55; color: rgba(42,37,33,.8); max-width: 66ch;
}
.service ul li::before {
  content: ""; position: absolute; left: .15rem; top: .6em;
  width: .4rem; height: .4rem; border-radius: 50%; background: var(--blue);
}
.service ul li .opt-meta {
  display: block; margin-top: .3rem;
  font-weight: 700; font-size: .95em; color: var(--blue-deep);
  font-variant-numeric: tabular-nums;
}
.service .service-meta {
  display: inline-flex; flex-wrap: wrap; gap: .5rem 1rem;
  font-size: var(--t-small); font-weight: 700; color: var(--blue-deep);
  background: var(--cream-2); border-radius: var(--radius-field); padding: .8rem 1.15rem;
}

.jump-nav { display: flex; flex-wrap: wrap; gap: .6rem; margin: 2rem 0 clamp(2.5rem, 5vw, 3.5rem); }
.jump-nav a { font-size: var(--t-small); font-weight: 500; text-decoration: none; color: var(--ink); background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius-pill); padding: .6rem 1.15rem; }
.jump-nav a:hover { border-color: var(--blue-deep); color: var(--blue-deep); }

/* --- 18b. Booking page --------------------------------------------------- */
.book-grid { display: grid; gap: clamp(2rem, 4vw, 2.5rem); grid-template-columns: 1fr; align-items: start; margin-top: 2.5rem; }
@media (min-width: 62rem) { .book-grid { grid-template-columns: 1.65fr 1fr; } }
.calendly-shell { border-radius: var(--radius-card); overflow: hidden; border: 2px solid var(--card-border); background: var(--card); min-height: 44rem; display: grid; }
.calendly-shell > * { grid-area: 1 / 1; }
.calendly-inline-widget { position: relative; z-index: 1; min-width: 320px; }
.calendly-fallback { z-index: 0; place-self: center; text-align: center; padding: 3rem 2rem; max-width: 28rem; }
.calendly-fallback p { margin: 0 auto 1.25rem; color: var(--ink-soft); }

/* --- 18c. Cookie notice -------------------------------------------------- */
.cookie-notice {
  position: fixed; bottom: 1rem; right: 1rem; left: 1rem; z-index: 80;
  max-width: 27rem; margin-left: auto;
  background: var(--card); border: 2px solid var(--card-border); border-radius: var(--radius-card);
  padding: 1.3rem 1.4rem; box-shadow: 0 12px 40px -12px rgba(42,37,33,.3);
  font-size: var(--t-small); display: none;
}
.cookie-notice.show { display: block; }
.cookie-notice .btn { margin-top: 1rem; padding: .65rem 1.4rem; font-size: .95rem; }
/* ==========================================================================
   19. ACCESSIBILITY ASSISTANT
   Panel markup is injected by assets/site.js, so it appears on every page
   without you having to add anything to the HTML. Edit the options in that
   file; edit how they look here.
   ========================================================================== */

/* --- The launcher button ------------------------------------------------- */
.a11y-launch {
  position: fixed; left: 1rem; bottom: 1rem; z-index: 90;
  display: inline-flex; align-items: center; gap: .55rem;
  background: var(--green-deep); color: #fff;
  border: 2px solid transparent; border-radius: var(--radius-pill);
  padding: .8rem 1.25rem .8rem 1rem;
  font: inherit; font-size: .95rem; font-weight: 600;
  cursor: pointer;
  box-shadow: 0 6px 20px -6px rgba(42,37,33,.4);
}
.a11y-launch:hover { background: var(--green); }
.a11y-launch svg { width: 1.35rem; height: 1.35rem; flex: 0 0 auto; }

/* --- The panel ----------------------------------------------------------- */
.a11y-panel {
  position: fixed; left: 1rem; bottom: 1rem; z-index: 95;
  width: min(24rem, calc(100vw - 2rem));
  max-height: min(40rem, calc(100vh - 2rem));
  overflow-y: auto;
  background: var(--card); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: 0 18px 50px -12px rgba(42,37,33,.45);
}
.a11y-panel[hidden] { display: none; }
.a11y-head { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.25rem; }
.a11y-head h2 { font-family: var(--font-display); font-size: 1.3rem; font-weight: 800; margin: 0; color: var(--ink); letter-spacing: -.02em; }
.a11y-head p { font-size: var(--t-small); color: var(--ink-soft); margin: .25rem 0 0; }
.a11y-close { margin-left: auto; background: none; border: none; cursor: pointer; font-size: 1.5rem; line-height: 1; color: var(--ink-soft); padding: .1rem .35rem; border-radius: 6px; }
.a11y-close:hover { color: var(--ink); background: var(--cream-2); }

.a11y-list { display: flex; flex-direction: column; gap: .6rem; }

.a11y-row {
  display: flex; align-items: center; gap: 1rem;
  background: var(--cream); border: 1px solid var(--line);
  border-radius: var(--radius); padding: .85rem 1rem;
}
.a11y-row .label { flex: 1; min-width: 0; }
.a11y-row .label b { display: block; font-weight: 600; font-size: .98rem; }
.a11y-row .label span { display: block; font-size: .82rem; color: var(--ink-soft); margin-top: .1rem; }

/* Text-size stepper */
.a11y-size { display: block; }
.a11y-size .top { display: flex; align-items: baseline; justify-content: space-between; }
.a11y-size .pct { font-variant-numeric: tabular-nums; font-weight: 600; font-size: .9rem; color: var(--ink-soft); }
.a11y-size .controls { display: flex; align-items: center; gap: .75rem; margin-top: .6rem; }
.a11y-step {
  font: inherit; font-weight: 700; font-size: 1rem;
  min-width: 2.6rem; padding: .35rem .6rem;
  background: var(--card); color: var(--ink);
  border: 1px solid var(--line-strong, var(--line)); border-radius: var(--radius);
  cursor: pointer;
}
.a11y-step:hover:not(:disabled) { border-color: var(--blue-deep); color: var(--blue-deep); }
.a11y-step:disabled { opacity: .4; cursor: not-allowed; }
.a11y-bar { flex: 1; height: .45rem; border-radius: var(--radius-pill); background: var(--cream-2); overflow: hidden; }
.a11y-bar i { display: block; height: 100%; background: var(--blue); }

/* Switch */
.a11y-switch { position: relative; flex: 0 0 auto; width: 3rem; height: 1.6rem; }
.a11y-switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; width: 100%; height: 100%; }
.a11y-switch i {
  position: absolute; inset: 0; border-radius: var(--radius-pill);
  background: #D9D2C6; transition: background-color .15s ease; pointer-events: none;
}
.a11y-switch i::after {
  content: ""; position: absolute; top: .2rem; left: .2rem;
  width: 1.2rem; height: 1.2rem; border-radius: 50%; background: #fff;
  transition: transform .15s ease; box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.a11y-switch input:checked + i { background: var(--green); }
.a11y-switch input:checked + i::after { transform: translateX(1.4rem); }
.a11y-switch input:focus-visible + i { outline: 3px solid var(--focus); outline-offset: 3px; }

.a11y-reset {
  width: 100%; margin-top: .9rem;
  font: inherit; font-weight: 600; font-size: .95rem;
  padding: .8rem 1rem;
  background: var(--card); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer;
}
.a11y-reset:hover { border-color: var(--blue-deep); color: var(--blue-deep); }
.a11y-note { font-size: .8rem; color: var(--ink-soft); margin: 1rem 0 0; }

/* --- What the toggles actually do ---------------------------------------- */

/* Text size: every size on the site is in rem, so scaling the root scales all. */
html { font-size: calc(100% * var(--a11y-scale, 1)); }

/* High contrast */
html[data-a11y-contrast] {
  --cream: #FFFFFF; --cream-2: #F0F0F0; --card: #FFFFFF;
  --ink: #000000; --ink-soft: #262626; --ink-faint: #3D3D3D;
  --blue: #1F4E96; --blue-deep: #14356B; --blue-head: #14356B;
  --green: #1B5E20; --green-deep: #10380F;
  --line: #767676; --line-strong: #444444;
}
html[data-a11y-contrast] .site-header { background: #FFFFFF; }
html[data-a11y-contrast] .btn-primary { background: #14356B; color: #FFFFFF; }
html[data-a11y-contrast] .site-footer { background: #000000; }
html[data-a11y-contrast] .panel { border-color: #14356B; }
html[data-a11y-contrast] .statements p,
html[data-a11y-contrast] .offer-card,
html[data-a11y-contrast] .resource-card,
html[data-a11y-contrast] .steps li { border-color: #444444; }
html[data-a11y-contrast] .thread path { stroke: #14356B; opacity: .9; }

/* Dyslexia-friendly */
html[data-a11y-dyslexia] {
  --font-body: "Atkinson Hyperlegible", Verdana, Tahoma, sans-serif;
  --font-display: "Atkinson Hyperlegible", Verdana, Tahoma, sans-serif;
}
html[data-a11y-dyslexia] body { letter-spacing: .045em; word-spacing: .16em; line-height: 1.85; }
html[data-a11y-dyslexia] h1,
html[data-a11y-dyslexia] h2,
html[data-a11y-dyslexia] h3,
html[data-a11y-dyslexia] h4 { letter-spacing: 0; line-height: 1.3; }
html[data-a11y-dyslexia] p { max-width: 58ch; }

/* Reduce motion */
html[data-a11y-motion] *,
html[data-a11y-motion] *::before,
html[data-a11y-motion] *::after {
  animation-duration: .001ms !important; animation-iteration-count: 1 !important;
  transition-duration: .001ms !important; scroll-behavior: auto !important;
}

/* Reduce distractions */
html[data-a11y-calm] .quote-nav,
html[data-a11y-calm] .stamp,
html[data-a11y-calm] [data-decorative] { display: none; }
html[data-a11y-calm] img { filter: saturate(.55); }
html[data-a11y-calm] .offer-card:hover,
html[data-a11y-calm] .btn:hover { transform: none; }
html[data-a11y-calm] .quote { display: block !important; margin-bottom: 2rem; }

/* Highlight links */
html[data-a11y-links] a:not(.btn):not(.brand):not(.skip-link) {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  background: #FFF3B0;
  color: #14356B;
  padding: 0 .15em;
  border-radius: 3px;
}
html[data-a11y-links] .site-footer a:not(.btn):not(.brand) { background: #4A3F00; color: #FFF3B0; }

/* Bigger cursor */
html[data-a11y-cursor], html[data-a11y-cursor] * {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><path d='M6 2 L6 32 L13.5 25 L18.5 36 L24 33.5 L19 23 L30 23 Z' fill='%23000' stroke='%23fff' stroke-width='2.5' stroke-linejoin='round'/></svg>") 4 2, auto;
}
html[data-a11y-cursor] a, html[data-a11y-cursor] button,
html[data-a11y-cursor] input, html[data-a11y-cursor] textarea, html[data-a11y-cursor] label {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><path d='M15 3 a3 3 0 0 1 6 0 v13 h1 v-4 a3 3 0 0 1 6 0 v4 h1 v-3 a3 3 0 0 1 6 0 v3 h1 a3 3 0 0 1 3 3 v6 a12 12 0 0 1 -12 12 h-4 a10 10 0 0 1 -9 -6 l-6 -11 a3 3 0 0 1 5 -3 l3 4 z' fill='%23000' stroke='%23fff' stroke-width='2.5' stroke-linejoin='round'/></svg>") 12 2, pointer;
}

/* Reading guide */
.a11y-guide {
  position: fixed; left: 0; right: 0; height: 2.75rem; z-index: 88;
  pointer-events: none;
  border-top: 2px solid rgba(63,106,174,.85);
  border-bottom: 2px solid rgba(63,106,174,.85);
  background: rgba(104,150,223,.10);
  display: none;
}
html[data-a11y-guide] .a11y-guide { display: block; }

@media (max-width: 30rem) {
  .a11y-launch { padding: .7rem 1rem; font-size: .9rem; }
  .a11y-panel { padding: 1.15rem; }
}


/* --- 20. RESOURCE GATE MODAL --------------------------------------------
   Asked once, then all three guides stay unlocked in that visitor's browser.
   ------------------------------------------------------------------------ */
.modal { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 1.25rem; }
.modal[hidden] { display: none; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(42,37,33,.55); backdrop-filter: blur(3px); }
.modal-panel {
  position: relative; width: min(30rem, 100%);
  max-height: calc(100vh - 2.5rem); overflow-y: auto;
  background: var(--card); border: 2px solid var(--panel-border);
  border-radius: var(--radius-panel); padding: clamp(1.5rem, 4vw, 2.25rem);
}
.modal-panel h2 { font-size: clamp(1.5rem, 4vw, 2rem); }
.gate-intro { margin-top: .75rem; color: var(--ink-soft); font-size: var(--t-small); }
.modal-panel form { display: flex; flex-direction: column; gap: 1.15rem; margin-top: 1.75rem; }
.modal-close {
  position: absolute; top: .85rem; right: 1rem;
  background: none; border: none; cursor: pointer;
  font-size: 1.75rem; line-height: 1; color: var(--ink-soft); padding: .1rem .4rem; border-radius: 6px;
}
.modal-close:hover { color: var(--ink); background: var(--cream-2); }
.gate-error { margin: 0; color: #99453A; font-size: var(--t-small); font-weight: 600; }
.gate-error[hidden] { display: none; }
body.modal-open { overflow: hidden; }

/* A guide that has been unlocked */
.resource-card.is-unlocked .stamp { border-color: var(--green); color: var(--green); }
.js-get[data-state="ready"]::after { content: " \2197"; }
.gate-note {
  margin-top: 1.25rem; font-size: var(--t-small); color: var(--green-deep);
  font-weight: 600; display: none;
}
.gate-note.show { display: block; }


/* --- 21. UNFILLED TEMPLATE COPY (About page) -----------------------------
   Marks bracketed placeholder text as obviously provisional, so it can never
   be mistaken for finished copy. Delete the wrapper once real words go in.
   ------------------------------------------------------------------------ */
.tofill { border-left: 3px dashed var(--strong, #B9C3CF); padding-left: 1rem; margin-top: 1rem; }
.tofill p, .tofill li, .tofill-inline { color: var(--ink-faint); font-style: italic; }
.tofill p + p { margin-top: .9rem; }
.tofill-inline { color: var(--ink-faint); font-style: italic; }


/* --- 22. LOGO ------------------------------------------------------------
   The lockup carries the name and the strapline, so the header and footer no
   longer set them as HTML text. One file, used at both sizes.
   ------------------------------------------------------------------------ */
.brand img { width: auto; height: 58px; display: block; }
@media (max-width: 30rem) { .brand img { height: 44px; } }
.footer-logo { width: auto; height: 64px; display: block; margin-bottom: .25rem; }