@charset "UTF-8";
/*
Theme Name: Skelly Bootstrap
Theme URI: https://bfj.digital/
Author: BFJ Digital
Author URI: https://bfj.digital/
Version: 3.3.0
*/

:root {
  --color-n-black: #282829;
  --color-n-white: #ffffff;
  --color-p:       #ff6e33;
  --color-p-80:    #ff8f60;
  --accent-grey: #f1f1f3;
  --accent-green: #01b483;
  --accent-pink: #fcbbe0;
  --accent-peach: #f8a087;
  --accent-light-blue: #a4dbde;
  /* Site container horizontal padding.
       phone + small tablet (< 992px): 2.4rem
       tablet (992-1199px):            6.4rem
       desktop (1200px+):              9.6rem */
  --container-px: 2.4rem;
}
@media (min-width: 992px) {
  :root { --container-px: 6.4rem; }
}
@media (min-width: 1200px) {
  :root { --container-px: 9.6rem; }
}

/* ==========================================================================
   BREAKPOINTS  (mirrors qld.guidedogs.com.au — single source of truth)

   xs   |  480px   /  30em  — extra small phone
   sm   |  768px   /  48em  — tablet
   md   |  992px   /  62em  — desktop
   lg   | 1200px   /  75em  — large desktop

   Convention for adjacent ranges (Bootstrap-style, no overlap):
     min-width:  480px      →  xs+ and up
     max-width:  479.98px   →  below xs
     min-width:  768px      →  sm+ and up
     max-width:  767.98px   →  below sm   (mobile only)
     min-width:  992px      →  md+ and up
     max-width:  991.98px   →  below md   (mobile + tablet)
     min-width: 1200px      →  lg
     max-width: 1199.98px   →  below lg   (mobile + tablet + small desktop)
   ========================================================================== */

/* Clip overflow on all block sections — prevents decoration animations
   (e.g. the cards chevron sliding to 100vw) from extending past the block
   boundary and triggering a horizontal page scrollbar. */
section[class*="block-"] {
  overflow: hidden;
}

/* Block containers use the theme's --container-px (not Bootstrap's .75rem default) */
section[class*="block-"] > .container {
  padding-left: var(--container-px);
  padding-right: var(--container-px);
}

/* Mobile (< 768px): all blocks get 40px top + bottom padding regardless of the
   per-instance pt-X / pb-X spacing utility classes.
   PX, NOT REM: the mobile root-font shrink rendered 4rem as ~33px — live's
   u-p-tx5 mobile section padding is a true 40px (James, 2026-07-16). */
@media (max-width: 767.98px) {
  section[class*="block-"] {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
  }
  /* born-to-lead (James, 2026-07-16): NO decorative graphics of any kind on mobile —
     page-scoped override of the usual live-parity mobile graphics */
  .page-id-7510 .tcol-col-graphic,
  .page-id-7510 .image.has-graphic,
  .page-id-7510 .page-hero__decoration,
  .page-id-7510 .block-video .graphic,
  .page-id-7510 .accordion-graphic,
  .page-id-7510 .page-hero__image.is-svg {
    display: none !important;
  }
}

/*=================
  FONT PRIMARY IMPORT
=================*/

/* --- Brand font (Adobe Fonts / Typekit kit mxs6jcq) ---
   Serves the real brand face "proxima-nova" (400/500/600/700, roman + italic)
   and is whitelisted for localhost. The kit is enqueued in functions.php
   (skelly-typekit) for both the front end and the block editor — do not
   @import it here as well, that would load it twice.
   Mulish below remains only as an offline/no-network fallback. */

/* --- Offline fallback: Mulish (variable woff2, latin) --- */
@font-face {
  font-family: 'Mulish';
  src: url('fonts/mulish/Mulish-roman.woff2') format('woff2-variations'),
       url('fonts/mulish/Mulish-roman.woff2') format('woff2');
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: 'Mulish';
  src: url('fonts/mulish/Mulish-italic.woff2') format('woff2-variations'),
       url('fonts/mulish/Mulish-italic.woff2') format('woff2');
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
}


/*=================
  CSS RESET
=================*/

/*
=================
  FORM RESET
=================
*/
form input,
form select,
form textarea,
form fieldset,
form optgroup,
form label,
.StripeElement {
  font-family: inherit;
  font-size: 100%;
  color: inherit;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
}
form input:focus,
form select:focus,
form textarea:focus,
form fieldset:focus,
form optgroup:focus,
form label:focus,
.StripeElement:focus {
  outline: none;
}
form [type="text"],
form [type="email"],
.StripeElement {
  width: 100%;
}
form [type="button"],
form [type="submit"],
form [type="reset"] {
  width: auto;
  cursor: pointer;
  -webkit-appearance: button;
  -moz-appearance: button;
  appearance: button;
}

form select {
  text-transform: none;
}

/*
=================
  GENERAL RESET
=================
*/

* {
  padding: 0;
  border: 0;
  border-radius: 0;
  margin: 0;
  outline: 0;
  box-sizing: border-box;
  vertical-align: baseline;
}

/*=================
  DECORATIVE GRAPHIC MAX-HEIGHTS (global)
  Any block that renders a `.graphic--{name}` element (page-hero, image-copy,
  steps, video, …) shares these caps. The inner SVG scales to fit, so aspect
  ratio is preserved.
=================*/
.graphic--triangle-right-double,
.graphic--triangle-double-v2 { max-height: 780px; }
.graphic--triple-circle-vertical { max-height: 870px; }
.graphic--fat-zig-zag,
.graphic--fat-zig-zag-vertical { max-height: 540px; }
.graphic--zig-zag-double { max-height: 535px; }
.graphic--zig-zag-single-wave { max-height: 220px; }
.graphic--half-circle { max-height: 270px; }
.graphic--circle-three-quarters { max-height: 450px; }
.graphic--icon-2-and-a-half-circles-dim { min-height: 200px; max-height: 295px; }

html {
  font-size: 62.5%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: clip; /* clip (not hidden) so it doesn't create a scroll
                       container that breaks position: sticky */
}
body {
  overflow-x: clip;
}

body.preventScroll {
  height: 100%;
  overflow: hidden;
}

a {
  display: inline;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

input,
textarea,
select,
button {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}

button {
  display: block;
  cursor: pointer;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: inherit;
  margin-bottom: var(--space-5);
}

p {
  margin-bottom: 30px;
}


strong,
em,
dfn,
small,
address,
q,
blockquote,
cite {
  font-weight: inherit;
  font-style: inherit;
  font-size: inherit;
}

abbr {
  border-bottom: none;
  text-decoration: none;
}

img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
}

img[src=""] {
  display: none;
}

/* Inline images pasted INSIDE copy keep their own (attribute/intrinsic) size — the global
   img{width:100%} above is meant for block media that sits in a fixed slot, but a thumbnail dropped
   into rich-text copy (mobile-phone-screen-savers "Five beautiful designs" download gallery, or the
   our-brand-achievements badge) must render at its natural size, not stretch to the column width
   (James, 2026-07-14: "back to its original problem"). Capped at the column so nothing overflows. */
.rich-text img {
  width: auto;
  height: auto;
  max-width: 100%;
  object-fit: contain;
}


/*=================
  APPLY DEFAULT STYLES
=================*/

#body {
  font-family: var(--font-copy-family);
  font-size: var(--font-copy-size);
  font-weight: var(--font-copy-weight);
  font-style: var(--font-copy-style);
  text-transform: var(--font-copy-transform);
  line-height: var(--font-copy-height);
  letter-spacing: var(--font-copy-letter);
  word-spacing: var(--font-copy-word);
  position: relative;
}

/*=================
  FONT CLASSES
=================*/

.font-small {
  font-family: var(--font-small-family) !important;
  font-size: var(--font-small-size) !important;
  font-weight: var(--font-small-weight) !important;
  font-style: var(--font-small-style) !important;
  text-transform: var(--font-small-transform) !important;
  line-height: var(--font-small-height) !important;
  letter-spacing: var(--font-small-letter) !important;
  word-spacing: var(--font-small-word) !important;
}

.font-copy {
  font-family: var(--font-copy-family) !important;
  font-size: var(--font-copy-size) !important;
  font-weight: var(--font-copy-weight) !important;
  font-style: var(--font-copy-style) !important;
  text-transform: var(--font-copy-transform) !important;
  line-height: var(--font-copy-height) !important;
  letter-spacing: var(--font-copy-letter) !important;
  word-spacing: var(--font-copy-word) !important;
}

.font-large {
  font-family: var(--font-large-family) !important;
  font-size: var(--font-large-size) !important;
  font-weight: var(--font-large-weight) !important;
  font-style: var(--font-large-style) !important;
  text-transform: var(--font-large-transform) !important;
  line-height: var(--font-large-height) !important;
  letter-spacing: var(--font-large-letter) !important;
  word-spacing: var(--font-large-word) !important;
}

/* Screen-reader-only text. Live uses this class name too (u-visuallyhidden); the theme never
   defined it, so labels like the video play button's "Play video: …" were rendering on screen. */
.u-visuallyhidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.u-h5, h5, .font-heading5, h5.font-heading5 {
  font-family: var(--font-heading5-family) !important;
  font-size: var(--font-heading5-size) !important;
  font-weight: var(--font-heading5-weight) !important;
  font-style: var(--font-heading5-style) !important;
  text-transform: var(--font-heading5-transform) !important;
  line-height: var(--font-heading5-height) !important;
  letter-spacing: var(--font-heading5-letter) !important;
  word-spacing: var(--font-heading5-word) !important;
}
/* Global top-title styling — single source of truth, used by all blocks.
   Block CSS should not duplicate font-size/weight/display rules. */
.top-title {
  display: block;
  font-size: 20px !important;
  font-weight: 700 !important;
  margin-bottom: var(--space-3);
}
/* Accent bar below every top-title */
.top-title::after {
  background-color: #282829;
  content: "";
  display: block;
  height: .5rem;
  margin: 1em 0;
  width: 8.3rem;
}
.top-title--border-black::after,
.top-title--color-n-black::after {
  background-color: #282829;
}
[class*="bg-color-"] .top-title::after {
  background-color: #282829;
}
/* Double-class for specificity 0,2,1 — beats [class*="bg-color-"] .top-title::after by order */
.top-title.top-title--color-p::after           { background-color: var(--color-p); }
.top-title.top-title--accent-peach::after      { background-color: var(--accent-peach); }
.top-title.top-title--accent-green::after      { background-color: var(--accent-green); }
.top-title.top-title--accent-pink::after       { background-color: var(--accent-pink); }
.top-title.top-title--accent-light-blue::after { background-color: var(--accent-light-blue); }

.u-h4, h4, .font-heading4, h4.font-heading4 {
  font-family: var(--font-heading4-family) !important;
  font-size: var(--font-heading4-size) !important;
  font-weight: var(--font-heading4-weight) !important;
  font-style: var(--font-heading4-style) !important;
  text-transform: var(--font-heading4-transform) !important;
  line-height: var(--font-heading4-height) !important;
  letter-spacing: var(--font-heading4-letter) !important;
  word-spacing: var(--font-heading4-word) !important;
}

.u-h3, h3, .font-heading3, h3.font-heading3 {
  font-family: var(--font-heading3-family) !important;
  font-size: var(--font-heading3-size) !important;
  font-weight: var(--font-heading3-weight) !important;
  font-style: var(--font-heading3-style) !important;
  text-transform: var(--font-heading3-transform) !important;
  line-height: var(--font-heading3-height) !important;
  letter-spacing: var(--font-heading3-letter) !important;
  word-spacing: var(--font-heading3-word) !important;
}

.u-h2, h2, .font-heading2, h2.font-heading2 {
  font-family: var(--font-heading2-family) !important;
  font-size: var(--font-heading2-size) !important;
  font-weight: var(--font-heading2-weight) !important;
  font-style: var(--font-heading2-style) !important;
  text-transform: var(--font-heading2-transform) !important;
  line-height: var(--font-heading2-height) !important;
  letter-spacing: var(--font-heading2-letter) !important;
  word-spacing: var(--font-heading2-word) !important;
}

.u-h1, h1, .font-heading1, h1.font-heading1 {
  font-family: var(--font-heading1-family) !important;
  font-size: var(--font-heading1-size) !important;
  font-weight: var(--font-heading1-weight) !important;
  font-style: var(--font-heading1-style) !important;
  text-transform: var(--font-heading1-transform) !important;
  line-height: var(--font-heading1-height) !important;
  letter-spacing: var(--font-heading1-letter) !important;
  word-spacing: var(--font-heading1-word) !important;
}

/* Live u-h2 fluid scale below desktop (8038259, Arabic access statement on mobile):
   live (asset-headings.css, 10px root) = 26px under 480px, then
   calc(2.6rem + 4.16667vw − 20px) up to 56px at 1200px. Re-stated in px.
   Desktop keeps the local 60px --font-heading2-size. */
@media screen and (max-width: 1199.98px) {
  .u-h2, h2, .font-heading2, h2.font-heading2 {
    font-size: calc(6px + 4.16667vw) !important;
  }
}
@media screen and (max-width: 479.98px) {
  .u-h2, h2, .font-heading2, h2.font-heading2 {
    font-size: 26px !important;
  }
}
@media screen and (max-width: 767.98px) {
  /* Mobile eyebrow size (James, 2026-07-16, home "Supports and services");
     the mobile h3 cap lives in the MOBILE COPY OVERRIDES block further down. */
  .top-title {
    font-size: 18px !important;
  }
}
/* Tablet h1: fixed 60px */
@media screen and (max-width: 1199.98px) {
  .u-h1, h1, .font-heading1, h1.font-heading1 {
    font-size: 60px !important;
  }
}
/* Mobile h1 (James, 2026-07-16: "h1 font size is wrong on mobile") — the rem-based fluid calc
   above collapses to ~17px once the root font shrinks on mobile. Live (asset-headings.css,
   10px root): <30em = 3.8rem = 38px; ≥30em fluid calc(3.8rem + 6.11111vw − 29.33px).
   Re-stated in px so the shrunken root can't distort it. */
@media screen and (max-width: 767.98px) {
  .u-h1, h1, .font-heading1, h1.font-heading1 {
    font-size: calc(8.66667px + 6.11111vw) !important;
  }
}
@media screen and (max-width: 479.98px) {
  .u-h1, h1, .font-heading1, h1.font-heading1 {
    font-size: 38px !important;
  }
}

.font-emphasis {
  font-family: var(--font-emphasis-family) !important;
  font-size: var(--font-emphasis-size) !important;
  font-weight: var(--font-emphasis-weight) !important;
  font-style: var(--font-emphasis-style) !important;
  text-transform: var(--font-emphasis-transform) !important;
  line-height: var(--font-emphasis-height) !important;
  letter-spacing: var(--font-emphasis-letter) !important;
  word-spacing: var(--font-emphasis-word) !important;
}

/*=================
  CUSTOM CONTAINER DEFAULT FONTS
  Can't use !important to avoid conflict with the classes above
=================*/
.container-lg h5,
.container-md h5 {
  font-family: var(--font-heading5-family);
  font-size: var(--font-heading5-size);
  font-weight: var(--font-heading5-weight);
  font-style: var(--font-heading5-style);
  text-transform: var(--font-heading5-transform);
  line-height: var(--font-heading5-height);
  letter-spacing: var(--font-heading5-letter);
  word-spacing: var(--font-heading5-word);
}
.container-lg h4,
.container-md h4 {
  font-family: var(--font-heading4-family);
  font-size: var(--font-heading4-size);
  font-weight: var(--font-heading4-weight);
  font-style: var(--font-heading4-style);
  text-transform: var(--font-heading4-transform);
  line-height: var(--font-heading4-height);
  letter-spacing: var(--font-heading4-letter);
  word-spacing: var(--font-heading4-word);
}
.container-lg h3,
.container-md h3 {
  font-family: var(--font-heading3-family);
  font-size: var(--font-heading3-size);
  font-weight: var(--font-heading3-weight);
  font-style: var(--font-heading3-style);
  text-transform: var(--font-heading3-transform);
  line-height: var(--font-heading3-height);
  letter-spacing: var(--font-heading3-letter);
  word-spacing: var(--font-heading3-word);
}
.container-lg h2,
.container-md h2 {
  font-family: var(--font-heading2-family);
  font-size: var(--font-heading2-size);
  font-weight: var(--font-heading2-weight);
  font-style: var(--font-heading2-style);
  text-transform: var(--font-heading2-transform);
  line-height: var(--font-heading2-height);
  letter-spacing: var(--font-heading2-letter);
  word-spacing: var(--font-heading2-word);
}
.container-lg h1,
.container-md h1 {
  font-family: var(--font-heading1-family);
  font-size: var(--font-heading1-size);
  font-weight: var(--font-heading1-weight);
  font-style: var(--font-heading1-style);
  text-transform: var(--font-heading1-transform);
  line-height: var(--font-heading1-height);
  letter-spacing: var(--font-heading1-letter);
  word-spacing: var(--font-heading1-word);
}


/*=================
  SPACING
=================*/
.pt-1 {
  padding-top: var(--space-1);
}
.pt-2 {
  padding-top: var(--space-2);
}
.pt-3 {
  padding-top: var(--space-3);
}
.pt-4 {
  padding-top: var(--space-4);
}
.pt-5 {
  padding-top: var(--space-5);
}
.pt-6 {
  padding-top: var(--space-6);
}
.pt-7 {
  padding-top: var(--space-7);
}
.pt-8 {
  padding-top: var(--space-8);
}
.pt-9 {
  padding-top: var(--space-9);
}
.pt-10 {
  padding-top: var(--space-10);
}

.pb-1 {
  padding-bottom: var(--space-1);
}
.pb-2 {
  padding-bottom: var(--space-2);
}
.pb-3 {
  padding-bottom: var(--space-3);
}
.pb-4 {
  padding-bottom: var(--space-4);
}
.pb-5 {
  padding-bottom: var(--space-5);
}
.pb-6 {
  padding-bottom: var(--space-6);
}
.pb-7 {
  padding-bottom: var(--space-7);
}
.pb-8 {
  padding-bottom: var(--space-8);
}
.pb-9 {
  padding-bottom: var(--space-9);
}
.pb-10 {
  padding-bottom: var(--space-10);
}

/* BOOTSTRAP COLLISION (2026-07-14). Bootstrap ships its own .pt-0….pt-5 / .pb-0….pb-5 utilities
   with !important (pt-4 = 1.5rem = 15px), and it loads AFTER the theme — so any block whose spacing
   was set to 1–5 silently rendered Bootstrap's value instead of the theme's scale (James set the
   Technology & Visual Aids article list to 30px and got 15px). Re-assert the theme scale for the
   colliding steps; 6–10 don't exist in Bootstrap and need no override. */
.pt-0 { padding-top: 0 !important; }
.pt-1 { padding-top: var(--space-1) !important; }
.pt-2 { padding-top: var(--space-2) !important; }
.pt-3 { padding-top: var(--space-3) !important; }
.pt-4 { padding-top: var(--space-4) !important; }
.pt-5 { padding-top: var(--space-5) !important; }
.pb-0 { padding-bottom: 0 !important; }
.pb-1 { padding-bottom: var(--space-1) !important; }
.pb-2 { padding-bottom: var(--space-2) !important; }
.pb-3 { padding-bottom: var(--space-3) !important; }
.pb-4 { padding-bottom: var(--space-4) !important; }
.pb-5 { padding-bottom: var(--space-5) !important; }

/*=================
  BACKGROUND COLOR CLASSES
=================*/
.bg-color-n-white {
  background-color: var(--color-n-white);
}
.bg-color-n-black {
  background-color: var(--color-n-black);
}
.bg-color-p {
  background-color: var(--color-p);
}
.bg-color-s {
  background-color: var(--color-s);
}
.bg-color-t {
  background-color: var(--color-t);
}
.bg-color-a {
  background-color: var(--color-a);
}
.bg-color-light-blue {
  background-color: #a4dbde;
}
.bg-color-grey {
  background-color: #e2dedd;
}
.bg-color-light-grey {
  background-color: #f1f1f3;
}
.bg-color-peach {
  background-color: #f8a087;
}
.bg-color-pink {
  background-color: #fcbbe0;
}

/*=================
  FONT COLOR CLASSES
=================*/
.font-color-n-white {
  color: var(--color-n-white);
}
.font-color-n-black {
  color: var(--color-n-black);
}
.font-color-p {
  color: var(--color-p);
}
.font-color-s {
  color: var(--color-s);
}
.font-color-t {
  color: var(--color-t);
}
.font-color-a {
  color: var(--color-a);
}

/*=====================
  BUTTONS
=====================*/

[class*="btn-lg"], [class*="btn-sm"] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: fit-content;
  font-family: 'Circular', Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-weight: 700;
  font-style: normal;
  font-stretch: condensed;
  text-align: center;
  text-decoration: none !important;
  text-transform: uppercase;
  text-wrap: wrap;
  line-height: 125%;
  letter-spacing: 0px;
  word-spacing: 0px;
  color: var(--color-font);
  border-radius: 50px;
  transition: .15s;
}
[class*="btn-lg"] {
  padding: 12px 16px;
}
[class*="btn-sm"] {
  padding: 8px 12px;
}


.btn-lg-p, .btn-sm-p {
  background: var(--color-p);
}
.btn-lg-p:hover, .btn-sm-p:hover {
  color: var(--color-font) !important;
  background: var(--color-p-80);
}
.btn-lg-n, .btn-sm-n {
  background: var(--color-n-white);
}
.btn-lg-n:hover, .btn-sm-n:hover {
  color: var(--color-font) !important;
  background: var(--color-t);
}
.btn-lg-s, .btn-sm-s {
  color: var(--color-n-white) !important;
  background: var(--color-s);
}
.btn-lg-s:hover, .btn-sm-s:hover {
  color: var(--color-n-white) !important;
  background: var(--color-s-80);
}
.btn-lg-a, .btn-sm-a {
  background: var(--color-a-80);
}
.btn-lg-a:hover, .btn-sm-a:hover {
  color: var(--color-font) !important;
  background: var(--color-a-60);
}

@media only screen and (max-width: 767.98px) {
  [class*="btn-lg"], [class*="btn-sm"] {
    font-size: 14px;
  }
  .btn-lg {
    padding: 10px;
  }
}


/*=================
  BUTTON COLOR
=================*/
.button-color-n-white {
  background: var(--color-n-white);
  color: var(--color-p);
  border: 1px solid var(--color-n-white);
}
.button-color-n-white:hover {
  background: var(--color-p);
  color: var(--color-n-white) !important;
}

.button-color-n-black {
  background: var(--color-n-black);
  color: var(--color-n-white);
  border: 1px solid var(--color-n-black);
}
.button-color-n-black:hover {
  background: transparent;
  color: var(--color-n-black);
}

.button-color-p {
  background: var(--color-p);
  color: var(--color-n-white);
  border: 1px solid var(--color-n-white);
}
.button-color-p:hover {
  background: var(--color-n-white);
  color: var(--color-p) !important;
}

.button-color-p-invert {
  background: transparent;
  color: var(--color-p);
  border: 1px solid var(--color-p);
}

.button-color-p-invert:hover {
  background: var(--color-p);
  color: var(--color-n-white) !important;
}

.button-color-p-invert:hover svg path {
  stroke: var(--color-n-white) !important;;
}

.button-color-s {
  background: var(--color-s);
  color: var(--color-n-white);
  border: 1px solid var(--color-n-white);
}
.button-color-s:hover {
  background: var(--color-n-white);
  color: var(--color-p) !important;
  border: 1px solid var(--color-p);
}

.button-color-t {
  background: var(--color-t);
  color: var(--color-n-white);
  border: 1px solid var(--color-n-white);;
}
.button-color-t:hover {
  background: var(--color-n-white);
  color: var(--color-p) !important;
}

.button-color-a {
  background: var(--color-a);
  color: var(--color-n-white);
  border: 1px solid var(--color-n-white);
}
.button-color-a:hover {
  background: var(--color-n-white);
  color: var(--color-a) !important;
}


/*=================
  CONTAINER
=================*/
.container, .container-lg {
  max-width: var(--container-width);
  width: 100%;
  padding-right: var(--side-padding);
  padding-left: var(--side-padding);
  margin-right: auto;
  margin-left: auto;
  position: relative;
}
.container-md {
  max-width: 800px;
  width: 100%;
  padding-right: var(--side-padding);
  padding-left: var(--side-padding);
  margin-right: auto;
  margin-left: auto;
  position: relative;
}
.container.full {
  max-width: unset;
  padding: 0;
}
.mw-fit {
  max-width: fit-content;
}
.background-image {
  object-fit: cover;
  position: absolute;
  inset: 0;
}
.hide {
  display: none !important;
}
.block-anchor {
  display: block;
  height: 0;
  visibility: hidden;
  pointer-events: none;
  scroll-margin-top: 100px; /* 111px fixed header + buffer */
}
body.admin-bar .block-anchor {
  scroll-margin-top: 162px; /* + 32px WP admin bar */
}
@media (max-width: 767.98px) {
  .block-anchor { scroll-margin-top: 80px; } /* 64px mobile header + buffer */
  body.admin-bar .block-anchor { scroll-margin-top: 110px; }
}
a:hover {
  color: inherit;
}


/*=================
  WYSIWYG STYLES
=================*/
.rich-text {
  margin-bottom: var(--space-5);
}
/* "Small text" — applied via the WYSIWYG Formats dropdown (see inc/editor-formats.php).
   Used for fine print / legal disclaimers. Wins over block .copy p font-size rules. */
.text-small,
.rich-text .text-small,
.rich-text p.text-small,
.rich-text li.text-small {
  font-size: 16px !important;
  line-height: 1.5;
}
/* CONTENT LINKS ARE ALWAYS UNDERLINED (James, 2026-07-13).
   .rich-text is the wysiwyg wrapper on every block (copy / content / col-content /
   accordion answers / hero copy / card copy...), so this one rule covers them all.
   Previously these were text-decoration:none and only underlined on hover, which made
   inline links in body copy invisible as links. Buttons and whole-card link wrappers are
   excluded — they carry their own styling. */
.rich-text a:not([class*="btn"]):not([class*="c-link"]):not(.u-link-reset):not([class*="card"]):not([class*="downloads-item"]),
.container-md a:not([class*="btn"]):not([class*="c-link"]):not(.u-link-reset):not([class*="card"]):not([class*="downloads-item"]),
.container-lg a:not([class*="btn"]):not([class*="c-link"]):not(.u-link-reset):not([class*="card"]):not([class*="downloads-item"]) {
  display: inline;
  color: var(--color-n-black);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1px;
}
.rich-text a:not([class*="btn"]):not([class*="c-link"]):not(.u-link-reset):not([class*="card"]):not([class*="downloads-item"]):hover,
.container-md a:not([class*="btn"]):not([class*="c-link"]):not(.u-link-reset):not([class*="card"]):not([class*="downloads-item"]):hover,
.container-lg a:not([class*="btn"]):not([class*="c-link"]):not(.u-link-reset):not([class*="card"]):not([class*="downloads-item"]):hover,
.rich-text a:not([class*="btn"]):not([class*="c-link"]):not(.u-link-reset):not([class*="card"]):not([class*="downloads-item"]):focus,
.container-md a:not([class*="btn"]):not([class*="c-link"]):not(.u-link-reset):not([class*="card"]):not([class*="downloads-item"]):focus,
.container-lg a:not([class*="btn"]):not([class*="c-link"]):not(.u-link-reset):not([class*="card"]):not([class*="downloads-item"]):focus {
  /* Live hover = orange highlight block (8037505 / 8038253):
     bg + 3px halo in rgba(255,110,51,.25), underline drops out. */
  color: var(--color-n-black);
  background: rgba(255, 110, 51, 0.25);
  box-shadow: 0 0 0 3px rgba(255, 110, 51, 0.25);
  text-decoration: none;
}
.block-two-col-content-image .rich-text a {
  color: #282829;
  font-weight: 700;
  text-decoration: underline;
}
/* Override Bootstrap's `b, strong { font-weight: bolder }` */
b, strong {
  font-weight: 600;
}
.rich-text strong,
.container-md strong,
.container-lg strong {
  font-weight: 600;
}
.rich-text em,
.container-md em,
.container-lg em {
  font-style: oblique;
}
.rich-text ul, .rich-text ol,
.container-md ul, .container-md ol,
.container-lg ul, .container-lg ol {
  margin-left: 0;
  padding-left: 0;
}
.rich-text ul li, .rich-text ol li,
.container-md ul li, .container-md ol li,
.container-lg ul li, .container-lg ol li {
  margin-bottom: 20px;
}
ol li {
  margin-left: 20px;
}
ol li::marker {
  font-weight: 700;
}
.rich-text ul > li,
.container-md ul > li,
.container-lg ul > li {
  list-style: none;
  padding-left: 25px;
  position: relative;
}
.rich-text ul > li::before,
.container-md ul > li::before,
.container-lg ul > li::before {
  background: currentColor;
  border-radius: 50%;
  content: "";
  height: 8px;
  left: 0;
  position: absolute;
  top: 0.65em;
  width: 8px;
}
.rich-text ul ul,
.container-md ul ul,
.container-lg ul ul {
  margin-left: 0;
  margin-top: 20px;
  padding-left: 0;
}
.rich-text ul ul > li,
.container-md ul ul > li,
.container-lg ul ul > li {
  list-style: none;
  padding-left: 25px;
  position: relative;
}
.rich-text ul ul > li::before,
.container-md ul ul > li::before,
.container-lg ul ul > li::before {
  background: transparent;
  border: 2px solid currentColor;
  border-radius: 50%;
  content: "";
  height: 7px;
  left: 0;
  position: absolute;
  top: 0.65em;
  width: 7px;
}


/*=================
  BREAKPOINTS
=================*/

@media only screen and (max-width: 1199.98px) {
  html {
    font-size: 60%;
  }
}

@media only screen and (max-width: 991.98px) {
  html {
    font-size: 58%;
  }
}

@media only screen and (max-width: 767.98px) {
  html {
    font-size: 55%;
  }
  .rich-text {
    margin-bottom: 0;
  }
}

@media only screen and (max-width: 479.98px) {
  html {
    font-size: 51%;
  }
}


/*=================
  HEADER
=================*/


/*=================
  MOBILE MENU
=================*/


/*=================
  FOOTER
=================*/


/*=================
  BLOG POSTS
=================*/


/*=================
  MOBILE COPY OVERRIDES — body / p / .font-copy at 18px / 1.4 line height
=================*/
@media (max-width: 767.98px) {
  #body,
  p,
  .font-copy {
    font-size: 17px !important;
    line-height: 1.4 !important;
  }
  .c-btn {
    font-size: 17px !important;
  }
  /* h3 / heading3 caps at 25px on mobile (James, 2026-07-16 — was 22px). */
  .u-h3, h3, .font-heading3, h3.font-heading3 {
    font-size: 25px !important;
  }
}



/*=========================================================================
  RIGHT-TO-LEFT COPY (translated pages)
  Live wraps the Arabic access statement in <div dir="rtl" lang="ar">, so its
  copy reads right-to-left and aligns to the right. Our list bullets are drawn
  with an absolutely positioned ::before at left:0 plus padding-left, which
  stays on the wrong side under dir="rtl" — flip both.
=========================================================================*/
[dir="rtl"] {
  text-align: right;
}
.rich-text [dir="rtl"] ul > li,
.rich-text [dir="rtl"] ul ul > li,
[dir="rtl"].rich-text ul > li,
[dir="rtl"].rich-text ul ul > li {
  padding-left: 0;
  padding-right: 25px;
}
.rich-text [dir="rtl"] ul > li::before,
.rich-text [dir="rtl"] ul ul > li::before,
[dir="rtl"].rich-text ul > li::before,
[dir="rtl"].rich-text ul ul > li::before {
  left: auto;
  right: 0;
}
[dir="rtl"] ol li {
  margin-left: 0;
  margin-right: 20px;
}


/*=========================================================================
  GET INVOLVED PAGE — ORANGE OUTLINE BUTTONS
  The default secondary (outline) button rings BLACK at rest with an orange
  hover sweep (see template/header/header.css). On Get Involved (page-id-6948)
  the outline buttons should ring ORANGE at rest instead. Only re-point the
  ring + hover text/bg; --c-btn-color stays orange, so the ::before sweep and
  black hover text are unchanged. Scoped to buttons with no colour chosen.
=========================================================================*/
.page-id-6948 .c-btn--secondary:not([style*="--c-btn-color"]) {
  --c-btn-ring:       var(--color-p, #ff6e33);
  --c-btn-text-hover: var(--color-n-black, #282829);
  --c-btn-bg-hover:   transparent;
}


/*=========================================================================
  C-LINK HOVER — UNDERLINE SWEEP (live .border-bot-sweep 1:1)
  Live wraps c-link text in .border-bot-sweep__elem and sweeps a 2px
  currentColor underline in from the left on hover/focus. Local markup uses
  .c-link__text, so the same effect is applied to that span.
=========================================================================*/
.c-link .c-link__text {
	background-image: linear-gradient(transparent calc(100% - 2px), currentColor 2px);
	background-position: 100% 0;
	background-repeat: no-repeat;
	background-size: 0% 100%;
	transition: background-size .5s cubic-bezier(.19, 1, .22, 1);
}
.c-link:hover .c-link__text,
.c-link:focus .c-link__text {
	background-position: 0 0;
	background-size: 100% 100%;
}

/*=========================================================================
  CANONICAL c-link.border-bot-sweep UNDERLINE (8037987)
  Blocks that use the live markup (<a class="c-link border-bot-sweep">
  <span class="border-bot-sweep__elem">) get the sliding underline without
  needing per-block rules — article-list rows were missing theirs.
=========================================================================*/
a.c-link.border-bot-sweep .border-bot-sweep__elem {
	display: inline;
	background-image: linear-gradient(currentColor, currentColor);
	background-position: 0 100%;
	background-repeat: no-repeat;
	background-size: 0% 2px;
	padding-bottom: 2px;
	transition: background-size .35s cubic-bezier(.4, 0, 0, 1);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}
a.c-link.border-bot-sweep:hover .border-bot-sweep__elem,
a.c-link.border-bot-sweep:focus-visible .border-bot-sweep__elem {
	background-size: 100% 2px;
}