/* ==========================================================================
   Accessibility preferences
   Real user controls that change the page — text size, contrast, spacing,
   motion. Loaded after style.css so it can override the brand tokens.
   ========================================================================== */

/* ---------- Text size ----------
   100% resolves to the browser's own default, so a visitor who has already
   raised their browser font size keeps that as the baseline. */
html{font-size:calc(100% * var(--a11y-scale,1))}

/* Things that are fine at 100% but trap text once it grows. */
html[data-a11y-scaled="true"] .hero h1 em,
html[data-a11y-scaled="true"] .topbar a,
html[data-a11y-scaled="true"] .topbar span,
html[data-a11y-scaled="true"] .hero__badge b{white-space:normal}
html[data-a11y-scaled="true"] .chip-float{display:none}
html[data-a11y-scaled="true"] .nav a{padding-inline:.5rem}

/* ---------- Readable font ---------- */
html.a11y-font,
html.a11y-font body,
html.a11y-font h1,html.a11y-font h2,html.a11y-font h3,html.a11y-font h4,
html.a11y-font p,html.a11y-font a,html.a11y-font span,html.a11y-font li,
html.a11y-font label,html.a11y-font legend,html.a11y-font summary,
html.a11y-font input,html.a11y-font select,html.a11y-font textarea,
html.a11y-font button,html.a11y-font small,html.a11y-font strong,html.a11y-font b,
html.a11y-font th,html.a11y-font td,html.a11y-font blockquote{
  font-family:Verdana,Tahoma,"DejaVu Sans",Geneva,sans-serif!important;
  font-variation-settings:normal!important;
  font-style:normal!important;
}
html.a11y-font h1,html.a11y-font h2,html.a11y-font h3{letter-spacing:0!important}

/* ---------- Text spacing ----------
   The metrics from WCAG 2.1 success criterion 1.4.12. */
html.a11y-spacing body *:not(svg):not(path):not(rect):not(circle){
  line-height:1.6!important;
  letter-spacing:.12em!important;
  word-spacing:.16em!important;
}
html.a11y-spacing p{margin-bottom:2em!important}
html.a11y-spacing .btn,
html.a11y-spacing .nav a{letter-spacing:.06em!important}

/* ---------- Highlight links ---------- */
html.a11y-links a:not(.btn):not(.brand){
  text-decoration:underline!important;
  text-decoration-thickness:2px!important;
  text-underline-offset:3px!important;
  font-weight:700!important;
  outline:2px solid currentColor;
  outline-offset:2px;
  border-radius:2px;
}
html.a11y-links .btn{outline:3px solid currentColor;outline-offset:3px}

/* ---------- Pause animations ---------- */
html.a11y-motion *,
html.a11y-motion *::before,
html.a11y-motion *::after{
  animation:none!important;
  transition:none!important;
}
html.a11y-motion{scroll-behavior:auto!important}
/* Scroll reveals normally animate in; with motion off they must start visible. */
html.a11y-motion .reveal{opacity:1!important;transform:none!important}
html.a11y-motion .hero h1 em::after{transform:scaleX(1)!important}

/* ---------- High contrast ---------- */
html.a11y-contrast{
  --white:#000;--shell:#000;--sand:#000;
  --ink:#fff;--ink-2:#fff;--ink-3:#f2f2f2;
  --line:#fff;
  --magenta:#ffd400;--magenta-deep:#ffd400;--magenta-ink:#ffd400;
  --magenta-soft:#000;--magenta-mist:#000;
  --teal:#ffd400;--teal-deep:#ffd400;--teal-ink:#000;
  --teal-soft:#000;--teal-mist:#000;
  --shadow-sm:none;--shadow-md:none;--shadow-lg:none;--shadow-pink:none;
}
html.a11y-contrast body,
html.a11y-contrast section,
html.a11y-contrast .header,
html.a11y-contrast .topbar,
html.a11y-contrast .hero,
html.a11y-contrast .marquee,
html.a11y-contrast .band,
html.a11y-contrast .portrait,
html.a11y-contrast .included,
html.a11y-contrast .aside-card,
html.a11y-contrast .pagehead,
html.a11y-contrast .footer,
html.a11y-contrast .card,
html.a11y-contrast .quote,
html.a11y-contrast .form,
html.a11y-contrast .contact-card,
html.a11y-contrast .areas li,
html.a11y-contrast .hero__trust li,
html.a11y-contrast .hero__badge,
html.a11y-contrast .chip-float,
html.a11y-contrast .actionbar,
html.a11y-contrast .nav,
html.a11y-contrast .calendar-embed,
html.a11y-contrast .summary-box,
html.a11y-contrast .form-status{
  background:#000!important;
  background-image:none!important;
  color:#fff!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
html.a11y-contrast h1,html.a11y-contrast h2,html.a11y-contrast h3,html.a11y-contrast h4,
html.a11y-contrast p,html.a11y-contrast span,html.a11y-contrast li,html.a11y-contrast small,
html.a11y-contrast strong,html.a11y-contrast b,html.a11y-contrast label,html.a11y-contrast legend,
html.a11y-contrast summary,html.a11y-contrast td,html.a11y-contrast th,html.a11y-contrast figcaption{
  color:#fff!important;
}
html.a11y-contrast a{color:#ffd400!important}
html.a11y-contrast .eyebrow,
html.a11y-contrast .card__tag,
html.a11y-contrast .footer__tagline,
html.a11y-contrast .quote__stars,
html.a11y-contrast .step__num,
html.a11y-contrast .portrait__role,
html.a11y-contrast .chip-float strong,
html.a11y-contrast .portrait__stats strong{color:#ffd400!important}
html.a11y-contrast .card,
html.a11y-contrast .quote,
html.a11y-contrast .form,
html.a11y-contrast .contact-card,
html.a11y-contrast .included,
html.a11y-contrast .aside-card,
html.a11y-contrast .areas li,
html.a11y-contrast .hero__trust li,
html.a11y-contrast .hero__badge,
html.a11y-contrast .chip-float,
html.a11y-contrast .portrait{border:2px solid #fff!important}
html.a11y-contrast .btn{
  background:#000!important;color:#ffd400!important;
  border:2px solid #ffd400!important;box-shadow:none!important;
}
html.a11y-contrast .btn:hover,
html.a11y-contrast .btn:focus-visible{background:#ffd400!important;color:#000!important}
html.a11y-contrast .card__icon,
html.a11y-contrast .contact-card__ico,
html.a11y-contrast .socials a{
  background:#000!important;color:#ffd400!important;border:2px solid #ffd400!important;
}
html.a11y-contrast input,
html.a11y-contrast select,
html.a11y-contrast textarea{
  background:#000!important;color:#fff!important;border:2px solid #fff!important;
}
html.a11y-contrast .choice span{background:#000!important;color:#fff!important;border:2px solid #fff!important}
html.a11y-contrast .choice input:checked + span{background:#ffd400!important;color:#000!important;border-color:#ffd400!important}
html.a11y-contrast .bubble,
html.a11y-contrast .sparkle,
html.a11y-contrast .wave,
html.a11y-contrast .portrait::before,
html.a11y-contrast .band::before,
html.a11y-contrast .logo-card::before{display:none!important}
/* The logo is dark artwork on white — keep its card white so it stays legible. */
html.a11y-contrast .logo-card,
html.a11y-contrast .footer__logo{background:#fff!important;border:2px solid #ffd400!important}
html.a11y-contrast .faq summary::after{border-color:#ffd400!important}
html.a11y-contrast .quote{border-left:6px solid #ffd400!important}

/* ==========================================================================
   The widget itself
   ========================================================================== */
.a11y-fab{
  position:fixed;left:18px;bottom:18px;z-index:300;
  width:56px;height:56px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;
  background:#0a6e78;color:#fff;border:3px solid #fff;
  box-shadow:0 6px 22px -6px rgba(0,0,0,.55);
  transition:transform .2s,background .2s;
}
.a11y-fab:hover{background:#064a52;transform:scale(1.06)}
.a11y-fab svg{width:30px;height:30px;display:block}
.a11y-fab:focus-visible{outline:4px solid #b3116a;outline-offset:3px}
@media (max-width:760px){.a11y-fab{bottom:88px}}
@media (prefers-reduced-motion:reduce){.a11y-fab{transition:none}}
html.a11y-motion .a11y-fab{transition:none}

.a11y-panel{
  position:fixed;left:18px;bottom:84px;z-index:301;
  width:min(374px,calc(100vw - 32px));
  background:#06363d;color:#fff;
  border:2px solid #ffd400;border-radius:18px;
  padding:20px;
  box-shadow:0 20px 50px -12px rgba(0,0,0,.7);
  font-family:"Karla","Trebuchet MS",sans-serif;
  font-size:15px;line-height:1.5;
  max-height:calc(100vh - 110px);overflow-y:auto;
}
@media (max-width:760px){.a11y-panel{bottom:154px}}
.a11y-panel[hidden]{display:none!important}

.a11y-panel h2{
  font-family:"Fraunces",Georgia,serif;
  font-size:1.3rem;margin:0;color:#fff;font-weight:600;letter-spacing:0;
}
.a11y-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.a11y-close{
  background:transparent;border:2px solid transparent;color:#fff;cursor:pointer;
  width:36px;height:36px;border-radius:9px;display:grid;place-items:center;flex:none;
}
.a11y-close:hover{background:rgba(255,255,255,.14)}
.a11y-close:focus-visible{outline:3px solid #ffd400;outline-offset:2px}
.a11y-close svg{width:18px;height:18px}

.a11y-size{display:flex;align-items:center;gap:8px;margin-bottom:14px}
.a11y-size .lbl{flex:1;font-weight:600}
.a11y-step{
  width:46px;height:42px;border-radius:10px;cursor:pointer;flex:none;
  background:rgba(255,255,255,.07);border:2px solid rgba(255,255,255,.45);
  color:#fff;font-family:inherit;font-size:1rem;font-weight:700;
}
.a11y-step:hover:not(:disabled){background:rgba(255,255,255,.2)}
.a11y-step:disabled{opacity:.4;cursor:not-allowed}
.a11y-step:focus-visible{outline:3px solid #ffd400;outline-offset:2px}
.a11y-pct{
  min-width:56px;text-align:center;font-weight:700;font-variant-numeric:tabular-nums;
}

.a11y-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.a11y-toggle{
  display:flex;align-items:center;gap:7px;
  padding:10px 11px;border-radius:11px;cursor:pointer;text-align:left;min-height:48px;
  background:rgba(255,255,255,.07);border:2px solid rgba(255,255,255,.45);
  color:#fff;font-family:inherit;font-size:.87rem;font-weight:600;line-height:1.25;
}
.a11y-toggle:hover{background:rgba(255,255,255,.2)}
.a11y-toggle:focus-visible{outline:3px solid #ffd400;outline-offset:2px}
.a11y-toggle[aria-pressed="true"]{background:#fff;color:#06363d;border-color:#fff}
.a11y-tick{flex:none;width:15px;height:15px;opacity:0}
/* Five toggles in two columns leaves the last one alone on its row —
   give it the full width so its label never wraps. */
.a11y-toggle:last-of-type{grid-column:1/-1}
.a11y-toggle[aria-pressed="true"] .a11y-tick{opacity:1}

.a11y-reset{
  width:100%;margin-top:12px;padding:12px;border-radius:11px;cursor:pointer;
  background:transparent;border:2px solid #ffd400;color:#ffd400;
  font-family:inherit;font-size:.95rem;font-weight:700;
}
.a11y-reset:hover{background:#ffd400;color:#06363d}
.a11y-reset:focus-visible{outline:3px solid #fff;outline-offset:2px}

.a11y-help{
  margin:16px 0 0;padding-top:14px;border-top:1px solid rgba(255,255,255,.28);
  font-size:.88rem;color:#d6ecef;
}
.a11y-help a{color:#ffd400;font-weight:700}

/* The widget sets its own colours, so high contrast must not repaint it. */
html.a11y-contrast .a11y-panel{background:#000!important;border-color:#ffd400!important}
html.a11y-contrast .a11y-panel h2,
html.a11y-contrast .a11y-help{color:#fff!important}
html.a11y-contrast .a11y-toggle{background:#000!important;color:#fff!important;border-color:#fff!important}
html.a11y-contrast .a11y-toggle[aria-pressed="true"]{background:#ffd400!important;color:#000!important;border-color:#ffd400!important}
html.a11y-contrast .a11y-fab{background:#000!important;color:#ffd400!important;border-color:#ffd400!important}
html.a11y-contrast .a11y-step{background:#000!important;color:#fff!important;border-color:#fff!important}

/* Text scaling must not shrink or blow up the panel's own chrome. */
html[data-a11y-scaled="true"] .a11y-panel{font-size:15px}