/* Hoppin Hobbies brand styles, layered on Bootstrap 5 (plugins.min.css).
   Pages are sections (lib/sections.js) holding columns of elements (lib/blocks.js):
   <section class="section sec sec--left sec--normal"> .container > .row > .sec__col > .blk.blk--TYPE > element markup */

:root {
    --hh-purple: #7F1683;
    --hh-purple-dark: #5C0F60;
    --hh-ink: #2B1530;
    --hh-muted: #5E4E63;
    --hh-lime: #AAF644;
    --hh-orange: #F2A541;
    --hh-pink: #EF709D;
    --hh-coral: #FF544B;
    --hh-cream: #FFF8EE;
    --hh-line: #EADFEA;
    --hh-white: #FFFFFF;

    --hh-font-head: "Fredoka", "Nunito", system-ui, sans-serif;
    --hh-font-body: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
    --hh-radius: 18px;
    --hh-radius-sm: 10px;
    --hh-shadow: 0 10px 30px rgba(43, 21, 48, .08);
    --hh-shadow-lift: 0 16px 40px rgba(43, 21, 48, .14);
}

/* Color roles. Text, links, focus rings, buttons and the colored parts of elements read these, so a colored
   background (see "sections") only has to redefine them. White cards, boxes and panels reset them, so they look
   the same on any background. Every pairing meets WCAG AA (4.5:1 for text, 3:1 for big numbers and headings). */
:root,
.feature-card, .post-card, .event-card, .form-card, .value, .empty-state, .faq__item, .cta-band, .testimonial,
.blk-table, .blk-tabs__content, .hh-slide:not(.testimonial) > figcaption, .promo__text {
    --hh-text: var(--hh-ink);
    --hh-text-muted: var(--hh-muted);
    --hh-link: var(--hh-purple);
    --hh-link-hover: var(--hh-purple-dark);
    --hh-accent: var(--hh-purple);          /* eyebrows, small icons */
    --hh-hl: var(--hh-purple);              /* highlighted words in headings */
    --hh-focus: var(--hh-purple);           /* keyboard focus rings: 3:1 or more against the background */
    --hh-mark: var(--hh-lime);              /* checklist ticks, quote bars and marks */
    --hh-mark-ink: var(--hh-ink);
    --hh-btn-main: var(--hh-purple);        /* "Purple button" */
    --hh-btn-main-ink: #fff;
    --hh-btn-main-hover: var(--hh-purple-dark);
    --hh-ghost: var(--hh-purple);           /* outline buttons */
    --hh-ghost-line: var(--hh-purple);
    --hh-ghost-ink: #fff;
    --hh-btn-edge: transparent;             /* outlines lime/orange buttons on colored backgrounds */
    --hh-tab-on: var(--hh-purple);          /* the open tab */
    --hh-tab-on-ink: #fff;
    --hh-field-ring: rgba(127, 22, 131, .18);
    /* "Numbers" element in plain style: light colors become a highlighter stripe under ink numbers */
    --hh-stat-purple: var(--hh-purple);
    --hh-stat-ink: var(--hh-ink);
    --hh-stat-lime: var(--hh-ink);
    --hh-stat-orange: var(--hh-ink);
    --hh-stat-pink: var(--hh-ink);
    --hh-stat-coral: var(--hh-ink);
    --hh-stat-mark: initial;
    color: var(--hh-text);
}

/* ---------- base ---------- */
html { scroll-behavior: smooth; }
body {
    font-family: var(--hh-font-body);
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--hh-text);
    background: var(--hh-white);
    overflow-wrap: break-word; /* a long word or web address in editor text wraps instead of widening the page */
}
h1, h2, h3, h4, h5, h6 {
    font-family: var(--hh-font-head);
    font-weight: 600;
    color: var(--hh-text);
    line-height: 1.15;
    letter-spacing: -.01em;
}
h1 { font-size: clamp(2.25rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); }
h3 { font-size: 1.35rem; }
h4 { font-size: 1.15rem; }
p { margin-bottom: 1rem; }
a { color: var(--hh-link); text-underline-offset: .18em; }
a:hover { color: var(--hh-link-hover); }
img { max-width: 100%; height: auto; }
:focus-visible { outline: 3px solid var(--hh-focus); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--hh-lime); color: var(--hh-ink); }

/* Anchor links (e.g. /about#team) land below the sticky header. */
main, main [id] { scroll-margin-top: 6rem; }

.skip-link {
    position: absolute; left: 1rem; top: -100px; z-index: 2000;
    background: var(--hh-ink); color: #fff; padding: .6rem 1rem; border-radius: var(--hh-radius-sm);
}
.skip-link:focus { top: 1rem; color: #fff; }

.container-narrow { max-width: 780px; }
@media (min-width: 992px) { .container-wide { max-width: calc(100% - 3rem); } }
@media (min-width: 1400px) { .container-wide { max-width: 1440px; } }

/* ---------- buttons ---------- */
.btn {
    font-family: var(--hh-font-head);
    font-weight: 600;
    font-size: 1.05rem;
    border-radius: 999px;
    padding: .7rem 1.6rem;
    border: 2px solid transparent;
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--hh-shadow); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 3px solid var(--hh-focus); outline-offset: 3px; box-shadow: none; }

/* Each brand button sets --b-* colors. They feed Bootstrap's --bs-btn-* variables, so hover, keyboard focus,
   pressed and disabled states keep the brand colors instead of falling back to Bootstrap's. */
.btn-purple, .btn-lime, .btn-orange, .btn-ghost, .btn-ghost-light, .btn-donate {
    --b-bg: transparent; --b-ink: var(--hh-text); --b-line: transparent;
    --b-hover-bg: var(--b-bg); --b-hover-ink: var(--b-ink); --b-hover-line: var(--b-line);
    --bs-btn-color: var(--b-ink);
    --bs-btn-bg: var(--b-bg);
    --bs-btn-border-color: var(--b-line);
    --bs-btn-hover-color: var(--b-hover-ink);
    --bs-btn-hover-bg: var(--b-hover-bg);
    --bs-btn-hover-border-color: var(--b-hover-line);
    --bs-btn-active-color: var(--b-hover-ink);
    --bs-btn-active-bg: var(--b-hover-bg);
    --bs-btn-active-border-color: var(--b-hover-line);
    --bs-btn-disabled-color: var(--b-ink);
    --bs-btn-disabled-bg: var(--b-bg);
    --bs-btn-disabled-border-color: var(--b-line);
    --bs-btn-focus-box-shadow: none;
    color: var(--b-ink);
    background-color: var(--b-bg);
    border-color: var(--b-line);
}
.btn-purple { --b-bg: var(--hh-btn-main); --b-ink: var(--hh-btn-main-ink); --b-hover-bg: var(--hh-btn-main-hover); }
.btn-lime { --b-bg: var(--hh-lime); --b-ink: var(--hh-ink); --b-hover-bg: #9BEA33; --b-line: var(--hh-btn-edge); }
.btn-orange { --b-bg: var(--hh-orange); --b-ink: var(--hh-ink); --b-hover-bg: #EA9724; --b-line: var(--hh-btn-edge); }
/* Outline buttons follow the background: purple on light ones, white on purple. */
.btn-ghost, .btn-ghost-light {
    --b-ink: var(--hh-ghost); --b-line: var(--hh-ghost-line);
    --b-hover-bg: var(--hh-ghost); --b-hover-ink: var(--hh-ghost-ink); --b-hover-line: var(--hh-ghost);
}
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }
/* Stacked full-width buttons, e.g. in the highlight box. */
.btn-row--stack { flex-direction: column; align-items: stretch; }
.btn-row--stack .btn { width: 100%; }
.btn-row--stack .link-arrow { align-self: center; }
.btn[disabled] { opacity: .65; transform: none; box-shadow: none; }

.link-arrow { font-family: var(--hh-font-head); font-weight: 600; text-decoration: none; }
.link-arrow span { display: inline-block; transition: transform .15s ease; }
.link-arrow:hover span { transform: translateX(4px); }

/* ---------- header ---------- */
.site-header {
    position: sticky; top: 0; z-index: 1030;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: saturate(1.4) blur(8px);
    border-bottom: 1px solid transparent;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.site-header.is-scrolled { border-bottom-color: var(--hh-line); box-shadow: 0 4px 20px rgba(43, 21, 48, .06); }
.site-header .navbar { padding: .85rem 0; }
.navbar-brand img { width: 200px; height: auto; display: block; }
.site-header .nav-link {
    font-family: var(--hh-font-head);
    font-weight: 500;
    font-size: 1.05rem;
    color: var(--hh-ink);
    padding: .5rem .8rem !important;
    position: relative;
}
.site-header .nav-link:hover, .site-header .nav-link:focus { color: var(--hh-purple); }
.site-header .nav-link.active { color: var(--hh-purple); font-weight: 600; }
.site-header .nav-link.active::after {
    content: ""; position: absolute; left: .8rem; right: .8rem; bottom: .15rem;
    height: 4px; border-radius: 4px; background: var(--hh-lime);
}
.btn-donate {
    --b-bg: var(--hh-orange); --b-ink: var(--hh-ink); --b-hover-bg: #EA9724;
    padding: .55rem 1.3rem; margin-left: .75rem;
}
.btn-donate i { color: var(--hh-purple); margin-right: .25rem; }
/* On the donate page itself */
.site-header .btn-donate.active { --b-bg: var(--hh-purple); --b-ink: #fff; --b-hover-bg: var(--hh-purple); }
.site-header .btn-donate.active i { color: var(--hh-lime); }

/* At least 44x44 so it is easy to hit with a thumb. */
.navbar-toggler {
    border: 0; padding: .5rem; min-width: 44px; min-height: 44px;
    display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
    box-shadow: none !important;
}
.navbar-toggler-bar { display: block; width: 26px; height: 3px; border-radius: 3px; background: var(--hh-purple); transition: transform .2s ease, opacity .2s ease; }
.navbar-toggler[aria-expanded="true"] .navbar-toggler-bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.navbar-toggler[aria-expanded="true"] .navbar-toggler-bar:nth-child(2) { opacity: 0; }
.navbar-toggler[aria-expanded="true"] .navbar-toggler-bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 991.98px) {
    .navbar-brand img { width: 170px; }
    /* The header is sticky, so the open menu scrolls inside it: on a short (landscape) phone screen the last
       links and Donate can still be reached. 5rem is the closed header. The side padding (with a matching
       negative margin) leaves room for focus outlines, which the scroll box would otherwise cut off. */
    .navbar-collapse {
        padding: 1rem .5rem .5rem; margin-inline: -.5rem;
        max-height: calc(100vh - 5rem); max-height: calc(100dvh - 5rem);
    }
    .navbar-collapse.show { overflow-y: auto; overscroll-behavior: contain; } /* Bootstrap's .collapsing clips while it animates */
    .site-header .nav-link { padding: .65rem 0 !important; font-size: 1.15rem; border-bottom: 1px solid var(--hh-line); }
    .site-header .nav-link.active::after { left: 0; right: auto; width: 2.5rem; bottom: .3rem; }
    .btn-donate { margin: 1rem 0 0; width: 100%; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
    .navbar-brand img { width: 170px; }
    .site-header .nav-link { padding: .55rem .55rem !important; font-size: 1rem; } /* 44px tall for tablets */
    .site-header .nav-link.active::after { left: .55rem; right: .55rem; }
}

/* ---------- sections ---------- */
.section { padding: clamp(3.5rem, 8vw, 6rem) 0; }
.section--cream { background: var(--hh-cream); }
.section--lime { background: var(--hh-lime); }
.section--orange { background: var(--hh-orange); }
.section--pink { background: var(--hh-pink); }
.section--purple { background: var(--hh-purple); }
.section--tight, .section.sec--compact { padding: clamp(2.25rem, 5vw, 3.5rem) 0; }
.section.sec--roomy { padding: clamp(4.5rem, 11vw, 8.5rem) 0; }

/* Color roles per background (sections, page banners, call-to-action panels and highlight boxes share them).
   Lime: purple accents already pass; ticks turn purple and lime/orange buttons get an outline. */
.section--lime, .page-banner--lime, .cta-band--lime, .highlight-box--lime {
    --hh-focus: var(--hh-purple);
    --hh-mark: var(--hh-purple);
    --hh-mark-ink: #fff;
    --hh-btn-edge: var(--hh-ink);
}
/* Orange: purple text is too faint here, so accents and links use the dark purple. */
.section--orange, .page-banner--orange, .cta-band--orange, .highlight-box--orange {
    --hh-text-muted: var(--hh-ink);
    --hh-link: var(--hh-purple-dark);
    --hh-link-hover: var(--hh-ink);
    --hh-accent: var(--hh-purple-dark);
    --hh-hl: var(--hh-purple-dark);
    --hh-focus: var(--hh-purple-dark);
    --hh-ghost: var(--hh-purple-dark);
    --hh-ghost-line: var(--hh-purple-dark);
    --hh-btn-edge: var(--hh-ink);
    --hh-stat-purple: var(--hh-purple-dark);
}
/* Pink: only the ink color passes for small text, so text and accents use it. */
.section--pink, .page-banner--pink, .cta-band--pink, .highlight-box--pink {
    --hh-text-muted: var(--hh-ink);
    --hh-link: var(--hh-ink);
    --hh-link-hover: var(--hh-ink);
    --hh-accent: var(--hh-ink);
    --hh-hl: var(--hh-purple-dark);
    --hh-focus: var(--hh-ink);
    --hh-ghost: var(--hh-ink);
    --hh-ghost-line: var(--hh-ink);
    --hh-btn-edge: var(--hh-ink);
    --hh-mark: var(--hh-ink);
    --hh-mark-ink: #fff;
    --hh-stat-purple: var(--hh-purple-dark);
}
/* Purple (dark): white text, lime accents and links, light buttons. */
.hero, .section--purple, .page-banner--purple, .cta-band--purple, .highlight-box--purple {
    --hh-text: #fff;
    --hh-text-muted: rgba(255, 255, 255, .86);
    --hh-link: var(--hh-lime);
    --hh-link-hover: #fff;
    --hh-accent: var(--hh-lime);
    --hh-hl: var(--hh-lime);
    --hh-focus: var(--hh-lime);
    --hh-btn-main: #fff;
    --hh-btn-main-ink: var(--hh-purple);
    --hh-btn-main-hover: var(--hh-lime);
    --hh-ghost: #fff;
    --hh-ghost-line: rgba(255, 255, 255, .7);
    --hh-ghost-ink: var(--hh-purple);
    --hh-tab-on: var(--hh-lime);
    --hh-tab-on-ink: var(--hh-ink);
    --hh-field-ring: rgba(170, 246, 68, .75);
    --hh-stat-purple: #fff;
    --hh-stat-ink: #fff;
    --hh-stat-lime: var(--hh-lime);
    --hh-stat-orange: var(--hh-orange);
    --hh-stat-pink: var(--hh-pink);
    --hh-stat-coral: #FF8A80;
    --hh-stat-mark: transparent;
    color: var(--hh-text);
}

/* Spacing between the sections' columns when they stack on phones: a column of only buttons stays close to the
   text above it (the "Heading + button strip"). */
.row:has(> .sec__col:last-child > .blk--buttons:only-child) { --bs-gutter-y: 2.5rem; --bs-gutter-x: 1.5rem; }
.sec__col { min-width: 0; }

/* Old fixed-section markup (kept for any page still using it) */
.section-heading { max-width: 680px; margin: 0 auto 3rem; text-align: center; }
.section-heading--left { margin-left: 0; text-align: left; }
.section-heading p { color: var(--hh-text-muted); font-size: 1.125rem; }

/* ---------- element spacing ----------
   Each element keeps its own margins (a paragraph's 1rem, a heading's .5rem, the eyebrow's .75rem); they collapse
   with the margin set here, so the gap is whichever is bigger. Small heading -> heading is tight, heading -> text
   small, text -> buttons medium, and grids and lists get room above them. */
.sec__col > .blk + .blk { margin-top: 1rem; }
.sec__col > .blk--eyebrow + .blk,
.sec__col > .blk--heading + .blk { margin-top: 0; }
.sec__col > .blk + .blk--heading { margin-top: 2rem; }
.sec__col > :is(.blk--eyebrow, .blk--heading) + .blk--heading { margin-top: 0; }
.sec__col > .blk + :is(.blk--buttons, .blk--image, .blk--video, .blk--audio, .blk--map, .blk--quote, .blk--table,
    .blk--highlight_box, .blk--countdown, .blk--newsletter, .blk--contact_form, .blk--social, .blk--icon_list),
.sec__col > :is(.blk--image, .blk--video, .blk--audio, .blk--map, .blk--quote, .blk--table, .blk--highlight_box,
    .blk--countdown, .blk--newsletter, .blk--contact_form) + .blk { margin-top: 1.5rem; }
.sec__col > .blk + :is(.blk--cards, .blk--gallery, .blk--image_banners, .blk--slideshow, .blk--testimonials, .blk--faq,
    .blk--tabs, .blk--stats, .blk--logos, .blk--events, .blk--posts) { margin-top: 3rem; }
.sec__col > :is(.blk--cards, .blk--gallery, .blk--image_banners, .blk--slideshow, .blk--testimonials, .blk--faq,
    .blk--tabs, .blk--stats, .blk--logos, .blk--events, .blk--posts) + .blk { margin-top: 2.5rem; }
.sec__col > .blk + .blk--divider, .sec__col > .blk--divider + .blk { margin-top: 1.5rem; }
.sec__col > .blk + .blk--spacer, .sec__col > .blk--spacer + .blk { margin-top: 0; }
.cta-band .sec__col > .blk--text + .blk--buttons { margin-top: 1rem; }
/* The first and last element of a column don't push the column's edges out. */
.sec__col > .blk:first-of-type > :first-child { margin-top: 0; }
.sec__col > .blk:last-of-type > :last-child { margin-bottom: 0; }

/* ---------- alignment ---------- */
/* Centered sections center their text elements; paragraphs and headings keep a readable width. Cards, lists,
   forms and tables keep their own (left) alignment inside. */
.sec--center :is(.blk--eyebrow, .blk--heading, .blk--text, .blk--quote, .blk--divider, .blk--countdown, .blk--social, .blk--stats) { text-align: center; }
.sec--center :is(.blk-heading, .blk-text) { max-width: 42.5rem; margin-inline: auto; }
.sec--center .btn-row, .sec--center .social-links, .sec--center .logo-strip, .sec--center .crumbs { justify-content: center; }
.sec--center .check-list, .sec--center .info-list:not(.info-list--grid) { width: fit-content; max-width: 100%; margin-inline: auto; text-align: left; }
.sec--center .list-header { flex-direction: column; align-items: center; text-align: center; }
.sec--center .newsletter-form { margin-inline: auto; }
.sec--center .blk-image figcaption, .sec--center .blk-embed figcaption { text-align: center; }

/* An element's own alignment wins over the section's. */
.blk-align--left, .sec .blk-align--left { text-align: left; margin-left: 0; margin-right: auto; }
.blk-align--center, .sec .blk-align--center { text-align: center; margin-left: auto; margin-right: auto; }
.blk-align--right, .sec .blk-align--right { text-align: right; margin-left: auto; margin-right: 0; }
.btn-row.blk-align--left, .social-links.blk-align--left { justify-content: flex-start; }
.btn-row.blk-align--center, .social-links.blk-align--center { justify-content: center; }
.btn-row.blk-align--right, .social-links.blk-align--right { justify-content: flex-end; }
/* Right-aligned buttons beside text (two-column layouts) line up with the text once the columns stack. */
@media (max-width: 991.98px) {
    .sec__col[class^="col-lg-"] :is(.btn-row, .social-links).blk-align--right { justify-content: flex-start; }
}

/* ---------- small heading (eyebrow) ---------- */
.eyebrow {
    display: inline-block;
    font-family: var(--hh-font-head);
    font-weight: 600;
    font-size: .85rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--hh-accent);
    margin-bottom: .75rem;
}
/* A chosen color is a little label, so it can be read on any background. */
.eyebrow--purple, .eyebrow--lime, .eyebrow--coral, .eyebrow--ink {
    padding: .2em .85em .15em; border-radius: 999px; line-height: 1.5;
}
.eyebrow--purple { background: var(--hh-purple); color: #fff; }
.eyebrow--lime { background: var(--hh-lime); color: var(--hh-ink); }
.eyebrow--coral { background: var(--hh-coral); color: var(--hh-ink); }
.eyebrow--ink { background: var(--hh-ink); color: #fff; }
/* the same color as the background */
:is(.section--lime, .page-banner--lime, .cta-band--lime, .highlight-box--lime) .eyebrow--lime { background: var(--hh-ink); color: var(--hh-lime); }
:is(.hero, .section--purple, .page-banner--purple, .cta-band--purple, .highlight-box--purple) .eyebrow--purple { background: #fff; color: var(--hh-purple); }
.lead { font-size: 1.2rem; color: var(--hh-text-muted); }

/* ---------- headings and text ---------- */
.blk-heading .hl { color: var(--hh-hl); }
.blk-heading--xl { font-size: clamp(2.5rem, 6.5vw, 4.25rem); }
.blk-heading--lg { font-size: clamp(2rem, 4.5vw, 3rem); }
.blk-heading--md { font-size: clamp(1.5rem, 3vw, 2rem); }
.blk-heading--sm { font-size: 1.3rem; }
.blk-text--intro { font-size: 1.125rem; color: var(--hh-text-muted); }
.blk-text--small { font-size: .9375rem; line-height: 1.6; color: var(--hh-text-muted); }
.text-muted-hh { color: var(--hh-text-muted); }

/* Heading on the left, "All events"-style link on the right. */
.list-header {
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end;
    gap: .75rem 2rem;
    margin-bottom: 1.5rem;
}
.list-header .eyebrow { margin-bottom: .5rem; }
.list-header .link-arrow { white-space: nowrap; }

/* ---------- quote ---------- */
.blk-quote { margin: 0; }
.blk-quote p { margin: 0; }
.blk-quote cite { display: block; margin-top: .75rem; font-style: normal; font-weight: 700; font-size: .95rem; color: var(--hh-text-muted); }
.blk-quote cite::before { content: "\2014\00a0"; }
.blk-quote--simple {
    border-left: 5px solid var(--hh-mark);
    padding: .3rem 0 .3rem 1.25rem;
    font-size: 1.25rem; font-style: italic; line-height: 1.55; color: var(--hh-text);
}
.blk-quote--large {
    position: relative;
    max-width: 46rem; margin-inline: auto; padding-top: 3.25rem;
    text-align: center;
    font-family: var(--hh-font-head); font-weight: 500;
    font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1.3; color: var(--hh-text);
}
.blk-quote--large::before {
    content: "\201C";
    position: absolute; top: -.1rem; left: 50%; transform: translateX(-50%);
    width: 3.25rem; height: 3.25rem; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--hh-mark); color: var(--hh-mark-ink);
    font: 700 2.75rem/1 var(--hh-font-head); padding-top: .9rem;
}
.blk-quote--large cite { font-family: var(--hh-font-body); font-size: 1rem; margin-top: 1rem; }

/* ---------- lists ---------- */
.check-list { list-style: none; padding: 0; margin: 1.25rem 0 0; }
.check-list li { position: relative; padding-left: 2rem; margin-bottom: .6rem; }
.check-list li::before {
    content: "\f00c"; font-family: "Font Awesome 5 Free"; font-weight: 900;
    position: absolute; left: 0; top: .1rem;
    width: 1.35rem; height: 1.35rem; border-radius: 50%;
    display: grid; place-items: center; font-size: .7rem;
    background: var(--hh-mark); color: var(--hh-mark-ink);
}

.info-list { list-style: none; padding: 0; margin: 0; }
.info-list li { display: flex; gap: 1rem; margin-bottom: 1.5rem; }
.info-list .icon-blob { flex: 0 0 52px; width: 52px; height: 52px; font-size: 1.25rem; }
.info-list h3 { font-size: 1.15rem; margin-bottom: .2rem; }
.info-list p { margin: 0; color: var(--hh-text-muted); }
.info-list--grid { display: grid; gap: 1.75rem 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.info-list--grid li { margin: 0; }

/* ---------- divider and space ---------- */
.blk-divider { margin: 0; opacity: 1; }
hr.blk-divider--line { border: 0; height: 3px; border-radius: 3px; background: var(--hh-line); }
.section--cream hr.blk-divider--line { background: #EBDCCB; }
:is(.section--lime, .section--orange, .section--pink, .cta-band--lime, .cta-band--orange, .cta-band--pink) hr.blk-divider--line { background: rgba(43, 21, 48, .18); }
:is(.hero, .section--purple, .cta-band--purple, .page-banner--purple) hr.blk-divider--line { background: rgba(255, 255, 255, .3); }
hr.blk-divider--dots {
    --d1: var(--hh-purple); --d2: var(--hh-lime); --d3: var(--hh-orange);
    border: 0; height: 12px; width: 60px;
    background:
        radial-gradient(circle, var(--d1) 5px, transparent 5.5px) 0 50% / 12px 12px no-repeat,
        radial-gradient(circle, var(--d2) 5px, transparent 5.5px) 50% 50% / 12px 12px no-repeat,
        radial-gradient(circle, var(--d3) 5px, transparent 5.5px) 100% 50% / 12px 12px no-repeat;
}
:is(.hero, .section--purple, .cta-band--purple, .page-banner--purple) hr.blk-divider--dots { --d1: #fff; }
:is(.section--lime, .cta-band--lime, .page-banner--lime) hr.blk-divider--dots { --d2: var(--hh-ink); }
:is(.section--orange, .cta-band--orange, .page-banner--orange) hr.blk-divider--dots { --d3: var(--hh-ink); }
:is(.section--pink, .cta-band--pink, .page-banner--pink) hr.blk-divider--dots { --d3: var(--hh-ink); }
hr.blk-divider--line.blk-divider--short { width: 80px; }
hr.blk-divider--full { width: 100%; }
.blk-divider--bunny { display: flex; align-items: center; gap: 1rem; }
.blk-divider--bunny::before, .blk-divider--bunny::after {
    content: ""; width: 3.5rem; height: 3px; border-radius: 3px; background: var(--hh-line);
}
.blk-divider--bunny img { display: block; width: 22px; height: auto; }
.sec--center .blk-divider--bunny { justify-content: center; }
.sec--center hr.blk-divider { margin-inline: auto; }
:is(.hero, .section--purple, .cta-band--purple, .page-banner--purple) .blk-divider--bunny img { filter: brightness(0) invert(1); }
:is(.hero, .section--purple, .cta-band--purple, .page-banner--purple) .blk-divider--bunny::before,
:is(.hero, .section--purple, .cta-band--purple, .page-banner--purple) .blk-divider--bunny::after { background: rgba(255, 255, 255, .3); }
:is(.section--lime, .section--orange, .section--pink, .cta-band--lime, .cta-band--orange, .cta-band--pink) .blk-divider--bunny::before,
:is(.section--lime, .section--orange, .section--pink, .cta-band--lime, .cta-band--orange, .cta-band--pink) .blk-divider--bunny::after { background: rgba(43, 21, 48, .18); }

.blk-spacer--sm { height: 1rem; }
.blk-spacer--md { height: 2rem; }
.blk-spacer--lg { height: 3.5rem; }
.blk-spacer--xl { height: 5.5rem; }

/* ---------- home hero ---------- */
.hero {
    position: relative;
    overflow: hidden;
    background: var(--hh-purple);
    color: #fff;
    padding: clamp(3.5rem, 8vw, 6.5rem) 0 clamp(5rem, 10vw, 8rem);
}
.hero.sec--compact { padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(4rem, 8vw, 6rem); }
.hero.sec--roomy { padding: clamp(4.5rem, 11vw, 9rem) 0 clamp(6rem, 13vw, 10.5rem); }
.hero::before, .hero::after {
    content: ""; position: absolute; border-radius: 50%; pointer-events: none;
}
.hero::before { width: 420px; height: 420px; background: var(--hh-pink); opacity: .22; top: -140px; right: -120px; }
.hero::after { width: 240px; height: 240px; border: 22px solid var(--hh-lime); opacity: .18; bottom: -120px; left: 6%; }
.hero .container { position: relative; z-index: 1; }
.hero h1 { color: #fff; margin-bottom: 1.25rem; }
.hero .lead { color: rgba(255, 255, 255, .88); max-width: 34rem; margin-bottom: 2rem; }
/* The hero's artwork: drop shadow, and no wider than 460px */
.hero__art { max-width: 460px; margin: 0 auto; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .18)); }
.hero__art img { animation: hh-hop 4s ease-in-out infinite; }
.hero .blk-image { filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .18)); }
.hero .blk-image--full { max-width: 460px; }
.hero__wave { position: absolute; left: 0; right: 0; bottom: -1px; line-height: 0; z-index: 1; }
.hero__wave svg { width: 100%; height: clamp(40px, 6vw, 80px); display: block; }
@keyframes hh-hop {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* ---------- inner page banner ---------- */
.page-banner {
    position: relative;
    overflow: hidden;
    padding: clamp(3rem, 7vw, 5rem) 0;
    background: var(--hh-orange);
}
.page-banner.sec--compact, .page-banner--compact { padding: clamp(2.5rem, 5vw, 3.5rem) 0; }
.page-banner.sec--roomy { padding: clamp(4rem, 9vw, 7rem) 0; }
.page-banner::after {
    content: ""; position: absolute; width: 320px; height: 320px; border-radius: 50%;
    right: -80px; bottom: -160px; background: rgba(255, 255, 255, .22);
}
.page-banner .container { position: relative; z-index: 1; }
.page-banner h1 { margin-bottom: .5rem; }
.page-banner > .container > h1:last-child { margin-bottom: 0; } /* post pages */
.page-banner .blk-text, .page-banner > .container > p { font-size: 1.2rem; max-width: 40rem; margin: 0; }
.page-banner--orange { background: var(--hh-orange); }
.page-banner--lime { background: var(--hh-lime); }
.page-banner--pink { background: var(--hh-pink); }
.page-banner--purple { background: var(--hh-purple); }
.page-banner__meta { font-size: 1rem !important; opacity: .85; }

.crumbs { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: 0 0 .75rem; font-weight: 700; font-size: .95rem; }
.crumbs li + li::before { content: "/"; margin-right: .4rem; opacity: .6; }
.crumbs a { color: inherit; text-decoration: none; position: relative; }
/* A 44px tall tap area around the link that doesn't move anything (it stays inside the gap above the heading). */
.crumbs a::after { content: ""; position: absolute; inset: -.8rem -.4rem; }
.crumbs a:hover { text-decoration: underline; }

/* ---------- call to action panel ---------- */
.cta-band {
    position: relative;
    overflow: hidden;
    background: var(--hh-orange);
    border-radius: calc(var(--hh-radius) * 1.5);
    padding: clamp(2rem, 5vw, 3.5rem);
}
.cta-band--orange { background: var(--hh-orange); }
.cta-band--lime { background: var(--hh-lime); }
.cta-band--pink { background: var(--hh-pink); }
.cta-band--purple { background: var(--hh-purple); }
.cta-band--cream { background: var(--hh-cream); }
.cta-band--white { background: #fff; border: 1px solid var(--hh-line); box-shadow: var(--hh-shadow); }
.section--cream .cta-band--cream { border: 2px solid #EBDCCB; }
.cta-band h2 { margin-bottom: .75rem; }
.cta-band .blk-text, .cta-band .col-md-8 > p { font-size: 1.15rem; max-width: 36rem; }
.cta-band__art { max-width: 300px; margin: 0 auto; }
/* A panel's text and picture stay side by side on tablets. */
@media (min-width: 768px) and (max-width: 991.98px) {
    .cta-band > .row > .col-lg-8 { flex: 0 0 auto; width: 66.666667%; }
    .cta-band > .row > .col-lg-4 { flex: 0 0 auto; width: 33.333333%; }
}

/* ---------- grids & cards ---------- */
/* card-grid--auto keeps the base auto-fill; numbered grids are exact on desktop and reflow below it. */
.card-grid { display: grid; gap: 1.75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); }
.card-grid--2, .card-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.card-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 1.25rem; }
@media (min-width: 992px) {
    .card-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .card-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .card-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    /* in a narrow column, four or three across would be too tight */
    .sec__col:not(.col-12) > .blk > .card-grid--4, .sec__col:not(.col-12) > .blk > .card-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
}

.feature-card {
    --card-py: 2rem; --card-px: 1.75rem;
    display: flex; flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid var(--hh-line);
    border-radius: var(--hh-radius);
    padding: var(--card-py) var(--card-px);
    transition: transform .2s ease, box-shadow .2s ease;
}
.card-grid--4 .feature-card { --card-py: 1.75rem; --card-px: 1.5rem; }
.feature-card:hover { transform: translateY(-4px); box-shadow: var(--hh-shadow-lift); }
.feature-card h3 { margin: 1.1rem 0 .6rem; }
.feature-card > :first-child { margin-top: 0; }
.feature-card p { color: var(--hh-muted); margin-bottom: 0; }
.feature-card ul { color: var(--hh-muted); padding-left: 1.1rem; margin: .75rem 0 0; }
.feature-card__action { margin-top: auto; padding-top: 1rem; }
.feature-card .link-arrow { display: inline-block; }
.feature-card:target { border-color: var(--hh-purple); box-shadow: 0 0 0 4px rgba(127, 22, 131, .15); }
/* A picture instead of an icon fills the top of the card. */
.feature-card > .feature-card__image {
    margin: calc(var(--card-py) * -1) calc(var(--card-px) * -1) 0;
    aspect-ratio: 16 / 10; overflow: hidden;
    border-radius: calc(var(--hh-radius) - 1px) calc(var(--hh-radius) - 1px) 0 0;
    background: var(--hh-cream);
}
.feature-card__image img, .feature-card__image .hh-image-empty { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.feature-card:hover .feature-card__image img { transform: scale(1.06); }
.feature-card__image + h3 { margin-top: 1.4rem; }
.icon-blob {
    width: 64px; height: 64px;
    display: grid; place-items: center;
    border-radius: 42% 58% 55% 45% / 50% 45% 55% 50%;
    font-size: 1.6rem;
    color: var(--hh-ink);
}
.bg-lime { background: var(--hh-lime) !important; }
.bg-orange { background: var(--hh-orange) !important; }
.bg-pink { background: var(--hh-pink) !important; }
.bg-coral { background: var(--hh-coral) !important; }
.bg-purple { background: var(--hh-purple) !important; color: #fff; }

.post-card {
    display: flex; flex-direction: column;
    background: #fff;
    border: 1px solid var(--hh-line);
    border-radius: var(--hh-radius);
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease;
}
.post-card:hover { transform: translateY(-4px); box-shadow: var(--hh-shadow-lift); }
.post-card__image { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--hh-cream); }
.post-card__image img { width: 100%; height: 100%; object-fit: cover; }
.post-card__body { padding: 1.5rem 1.6rem 1.75rem; display: flex; flex-direction: column; flex: 1; }
.post-card__body p { color: var(--hh-muted); }
.post-card__body .link-arrow { margin-top: auto; }
.post-card__meta { font-size: .9rem; font-weight: 700; color: var(--hh-purple) !important; margin-bottom: .4rem; }
.post-card__title { font-size: 1.3rem; margin-bottom: .6rem; }
.post-card__title a { color: var(--hh-ink); text-decoration: none; }
.post-card__title a:hover { color: var(--hh-purple); }

.event-list { display: grid; gap: 1.25rem; }
.event-card {
    display: flex; gap: 1.5rem; align-items: flex-start;
    background: #fff;
    border: 1px solid var(--hh-line);
    border-radius: var(--hh-radius);
    padding: 1.5rem;
}
.event-card__date {
    flex: 0 0 76px;
    text-align: center;
    background: var(--hh-purple);
    color: #fff;
    border-radius: var(--hh-radius-sm);
    padding: .6rem 0 .5rem;
    font-family: var(--hh-font-head);
    line-height: 1.1;
}
.event-card__date span { display: block; text-transform: uppercase; font-size: .85rem; letter-spacing: .08em; color: var(--hh-lime); }
.event-card__date strong { display: block; font-size: 2rem; font-weight: 600; }
.event-card h3 { margin-bottom: .4rem; }
.event-card__meta { display: flex; flex-wrap: wrap; gap: .3rem 1.25rem; font-weight: 600; color: var(--hh-muted); font-size: .95rem; }
.event-card__meta i { color: var(--hh-purple); margin-right: .2rem; }
.event-card p:last-of-type { margin-bottom: .5rem; }
@media (max-width: 575.98px) {
    .event-card { flex-direction: column; gap: 1rem; }
    .event-card__date { display: flex; gap: .5rem; align-items: baseline; padding: .4rem .9rem; flex-basis: auto; }
    .event-card__date strong { font-size: 1.3rem; }
}

.empty-state {
    display: flex; align-items: center; gap: 1.5rem;
    background: var(--hh-cream);
    border: 2px dashed var(--hh-orange);
    border-radius: var(--hh-radius);
    padding: 1.75rem 2rem;
    text-align: left;
}
.section--cream .empty-state { background: #fff; }
.empty-state p, .empty-state ul, .empty-state ol { margin: 0; }
.empty-state img { flex: 0 0 auto; }
.empty-state__title { font-weight: 700; font-size: 1.1rem; margin: 0; }
/* The optional rich text under the title */
.empty-state > div > * + * { margin-top: .35rem; }
.empty-state :is(p, ul, ol) + :is(p, ul, ol) { margin-top: .6rem; }
.empty-state ul, .empty-state ol { padding-left: 1.2rem; }
.empty-state > div > :not(.empty-state__title) { color: var(--hh-muted); }
@media (max-width: 575.98px) {
    .empty-state { padding: 1.5rem 1.25rem; gap: 1rem; }
    .empty-state img { width: 40px; }
}

/* ---------- highlight box ---------- */
/* (.form-card.highlight-box: the box is also a .form-card, which is white) */
.form-card.highlight-box--white { background: #fff; }
.form-card.highlight-box--cream { background: var(--hh-cream); border-color: #F1E4D2; }
.section--cream .form-card.highlight-box--cream { background: #fff; }
.form-card.highlight-box--lime { background: var(--hh-lime); border-color: transparent; }
.form-card.highlight-box--orange { background: var(--hh-orange); border-color: transparent; }
.form-card.highlight-box--pink { background: var(--hh-pink); border-color: transparent; }
.form-card.highlight-box--purple { background: var(--hh-purple); border-color: transparent; }
.section--lime .form-card.highlight-box--lime, .section--orange .form-card.highlight-box--orange,
.section--pink .form-card.highlight-box--pink { box-shadow: inset 0 0 0 2px rgba(43, 21, 48, .14), var(--hh-shadow); }
:is(.hero, .section--purple) .form-card.highlight-box--purple { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35); }
.highlight-box > :last-child { margin-bottom: 0; }
/* Small image above the heading in the highlight box */
.callout-image { display: block; width: auto; max-width: 100%; max-height: 110px; margin: 0 auto 1.25rem; }
.highlight-box:not(.text-center) .callout-image { margin-left: 0; }
/* the purple bunny artwork turns white on a purple box */
.highlight-box--purple .callout-image[src^="/image/brand/bunny-face.png"] { filter: brightness(0) invert(1); }

/* ---------- images ---------- */
.blk-image { margin: 0; position: relative; }
.blk-image img { display: block; border-radius: var(--hh-radius); }
.blk-image > a { display: block; border-radius: var(--hh-radius); }
.blk-image--full { max-width: none; }
.blk-image--large { max-width: min(100%, 560px); }
.blk-image--medium { max-width: min(100%, 300px); }
.blk-image--small { max-width: min(100%, 180px); }
.blk-image--center { margin-inline: auto; }
.blk-image--left { margin-left: 0; margin-right: auto; }
.blk-image--right { margin-left: auto; margin-right: 0; }
/* Pictures without a frame keep their own size (up to the column); framed ones fill it. */
.blk-image.media-frame--none img { margin-inline: auto; }
.blk-image--left.media-frame--none img { margin-left: 0; }
.blk-image--right.media-frame--none img { margin-right: 0; }
.blk-image figcaption { font-size: .9rem; line-height: 1.5; color: var(--hh-text-muted); margin-top: .75rem; }
.blk-image--shadow img { width: 100%; box-shadow: var(--hh-shadow-lift); }
.blk-image--hop img { animation: hh-hop 4s ease-in-out infinite; }

/* Colored frame: a block peeking out behind the photo. isolation keeps it above section backgrounds. */
.media-frame { position: relative; isolation: isolate; --frame-offset: 18px; }
.media-frame img { border-radius: var(--hh-radius); box-shadow: var(--hh-shadow-lift); width: 100%; }
.media-frame::before {
    content: ""; position: absolute;
    inset: var(--frame-offset) calc(var(--frame-offset) * -1) calc(var(--frame-offset) * -1) var(--frame-offset);
    border-radius: var(--hh-radius); background: var(--hh-lime); z-index: -1;
}
/* On phones the image is as wide as the page and the side margin is only 12px, so the frame peeks out less
   (18px would push the page wider than the screen and let it slide sideways). */
@media (max-width: 575.98px) {
    .media-frame { --frame-offset: 8px; }
}
.media-frame--pink::before { background: var(--hh-pink); }
.media-frame--orange::before { background: var(--hh-orange); }
.media-frame--none::before { display: none; }
.media-frame--none img { box-shadow: none; } /* artwork with a transparent background shouldn't sit on a card */
.media-frame figcaption { font-size: .9rem; color: var(--hh-text-muted); margin-top: 1.75rem; }
.media-frame--none figcaption { margin-top: .75rem; }
/* on a background of the same color the frame gets a darker shade */
:is(.section--lime, .cta-band--lime) .media-frame--lime::before { background: #8FD62E; }
:is(.section--orange, .cta-band--orange, .page-banner--orange) .media-frame--orange::before { background: #D98A22; }
:is(.section--pink, .cta-band--pink, .page-banner--pink) .media-frame--pink::before { background: #D9527F; }
/* Room for the frame below, and beside it toward the other column. Full-size pictures in a section's columns
   get the same room, so a picture beside text lines up the same with or without a frame. */
.blk-image.media-frame, .sec__col > .blk > .blk-image.media-frame,
.section .row > .sec__col:not(.col-12) > .blk > .blk-image--full { margin-bottom: 1rem; }
@media (min-width: 992px) {
    .row > .sec__col[class^="col-lg-"]:first-child > .blk > .blk-image.media-frame,
    .section .row > .sec__col[class^="col-lg-"]:first-child > .blk > .blk-image--full { margin-right: 1.5rem; }
    .row > .sec__col[class^="col-lg-"]:last-child > .blk > .blk-image.media-frame,
    .section .row > .sec__col[class^="col-lg-"]:last-child > .blk > .blk-image--full { margin-left: 1.5rem; }
}

/* Zoom on hover: the picture grows inside its own outline (clip-path keeps the corners). */
.blk-image--zoom img {
    clip-path: inset(0 round var(--hh-radius));
    transition: transform .45s ease, clip-path .45s ease;
}
.blk-image--zoom:hover img, .blk-image--zoom > a:focus-visible img {
    transform: scale(1.07);
    clip-path: inset(3.27% round calc(var(--hh-radius) / 1.07));
}
.blk-image--zoom.media-frame img { box-shadow: none; }
.blk-image--zoom.blk-image--shadow { filter: drop-shadow(0 14px 22px rgba(43, 21, 48, .16)); }
.blk-image--zoom.blk-image--shadow img { box-shadow: none; }

/* ---------- promo pictures (big rounded pictures with a title) ---------- */
.promo-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
@media (min-width: 768px) {
    .promo-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .promo-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sec__col:not(.col-12) .promo-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
}
.promo {
    position: relative; isolation: isolate;
    display: block; overflow: hidden;
    aspect-ratio: 4 / 3;
    border-radius: calc(var(--hh-radius) * 1.35);
    background: var(--hh-cream);
    color: var(--hh-ink);
    text-decoration: none;
    box-shadow: var(--hh-shadow);
}
@media (min-width: 768px) { .promo-grid--3 .promo { aspect-ratio: 4 / 5; } }
.promo img, .promo .hh-image-empty { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
a.promo:hover img, a.promo:focus-visible img { transform: scale(1.08); }
a.promo:focus-visible { outline: 3px solid var(--hh-focus); outline-offset: 4px; }
.promo__text {
    position: absolute; left: 1rem; bottom: 1rem; z-index: 1;
    max-width: calc(100% - 2rem);
    padding: .75rem 1.15rem .8rem;
    background: #fff; border-radius: 14px;
    box-shadow: 0 8px 24px rgba(43, 21, 48, .16);
    line-height: 1.35;
    transition: background-color .2s ease;
}
.promo__text strong { display: block; font-family: var(--hh-font-head); font-weight: 600; font-size: 1.3rem; color: var(--hh-ink); }
.promo__text span { display: block; margin-top: .2rem; font-size: .95rem; color: var(--hh-muted); }
a.promo .promo__text strong::after { content: "\00a0\2192"; display: inline-block; transition: transform .2s ease; }
a.promo:hover .promo__text, a.promo:focus-visible .promo__text { background: var(--hh-lime); }
a.promo:hover .promo__text span, a.promo:focus-visible .promo__text span { color: var(--hh-ink); }
a.promo:hover .promo__text strong::after { transform: translateX(4px); }

/* ---------- photo gallery ---------- */
.gallery { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 479.98px) {
    .gallery--2 { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 768px) {
    .gallery { gap: 1.5rem; }
    .gallery--3, .gallery--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
    .gallery--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.gallery__item { margin: 0; }
.gallery__item img {
    display: block; width: 100%;
    aspect-ratio: 4 / 3; object-fit: cover;
    border-radius: var(--hh-radius);
    background: var(--hh-cream);
}
.gallery__item figcaption { margin-top: .6rem; font-size: .9rem; line-height: 1.45; color: var(--hh-text-muted); }

/* ---------- slideshow and testimonial slider (site.js moves it) ---------- */
.hh-slider { position: relative; }
.hh-slider__track {
    position: relative; /* slides measure their offsetLeft from here */
    display: flex;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
    border-radius: calc(var(--hh-radius) * 1.25);
    scrollbar-width: none;
}
.hh-slider__track::-webkit-scrollbar { display: none; }
.hh-slider__track:focus-visible { outline-offset: 4px; border-radius: calc(var(--hh-radius) * 1.25); }
.hh-slide {
    position: relative;
    flex: 0 0 100%; min-width: 0;
    margin: 0;
    scroll-snap-align: start; scroll-snap-stop: always;
}
.hh-slide > img, .hh-slide > .hh-image-empty { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--hh-cream); }
.hh-slide--4x3 > img, .hh-slide--4x3 > .hh-image-empty { aspect-ratio: 4 / 3; }
.hh-slide--1x1 > img, .hh-slide--1x1 > .hh-image-empty { aspect-ratio: 1 / 1; }
.hh-slide--21x9 > img, .hh-slide--21x9 > .hh-image-empty { aspect-ratio: 21 / 9; }
.hh-slide:not(.testimonial) > figcaption {
    position: absolute; left: 1rem; bottom: 1rem;
    max-width: min(32rem, calc(100% - 2rem));
    padding: .7rem 1.1rem .75rem;
    background: rgba(255, 255, 255, .96); border-radius: 14px;
    box-shadow: 0 8px 24px rgba(43, 21, 48, .16);
    line-height: 1.4; text-align: left;
}
.hh-slide:not(.testimonial) > figcaption strong { display: block; font-family: var(--hh-font-head); font-weight: 600; font-size: 1.2rem; color: var(--hh-ink); }
.hh-slide:not(.testimonial) > figcaption span { display: block; font-size: .95rem; color: var(--hh-muted); }
.hh-slide:not(.testimonial) > figcaption strong + span { margin-top: .15rem; }
.hh-slider__btn {
    position: absolute; top: 50%; z-index: 2;
    display: grid; place-items: center;
    width: 3rem; height: 3rem; margin-top: -1.5rem; padding: 0;
    border: 0; border-radius: 50%;
    background: #fff; color: var(--hh-purple);
    font-size: 1rem;
    box-shadow: 0 6px 18px rgba(43, 21, 48, .22);
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, transform .15s ease;
}
.hh-slider__btn--prev { left: .85rem; }
.hh-slider__btn--next { right: .85rem; }
.hh-slider__btn:hover { background: var(--hh-lime); color: var(--hh-ink); transform: scale(1.06); }
.hh-slider__btn:focus-visible { outline: 3px solid var(--hh-focus); outline-offset: 2px; }
.hh-slider.is-single .hh-slider__btn, .hh-slider.is-single .hh-slider__dots { display: none; }
/* The dots sit under the slides; the pause button (added by site.js when the slides move on their own) at their end. */
.hh-slider__dots { display: flex; justify-content: center; align-items: center; gap: .15rem; min-height: 2.75rem; margin-top: .5rem; }
.hh-slider__dots:empty { display: none; }
.hh-slider__dot {
    width: 1.75rem; height: 1.75rem; padding: 0; border: 0; background: none; cursor: pointer;
    display: grid; place-items: center;
}
.hh-slider__dot::before {
    content: ""; width: .7rem; height: .7rem; border-radius: 999px;
    background: var(--hh-text); opacity: .4;
    transition: width .2s ease, opacity .2s ease, background-color .2s ease;
}
.hh-slider__dot:hover::before { opacity: .55; }
.hh-slider__dot.is-active::before { width: 1.6rem; opacity: 1; background: var(--hh-accent); }
.hh-slider__pause {
    position: absolute; right: 0; bottom: 0; z-index: 2;
    display: grid; place-items: center;
    width: 2.75rem; height: 2.75rem; padding: 0;
    border: 2px solid var(--hh-ghost-line); border-radius: 50%;
    background: transparent; color: var(--hh-ghost);
    font-size: .85rem; cursor: pointer;
}
.hh-slider__pause:hover { background: var(--hh-ghost); color: var(--hh-ghost-ink); }
/* with dots under the slides, the arrows stay in the middle of the picture */
@media (min-width: 576px) { .hh-slider.has-dots .hh-slider__btn { top: calc(50% - 1.625rem); } }
@media (max-width: 575.98px) {
    /* the caption sits under the photo instead of over it */
    .hh-slider:not(.hh-slider--testimonials) .hh-slide > figcaption {
        position: static; max-width: none; margin: 0; border-radius: 0; box-shadow: none;
        background: var(--hh-cream); padding: .75rem 1rem;
    }
    .hh-slider:not(.hh-slider--testimonials) .hh-slider__track { background: var(--hh-cream); }
}

/* Testimonials: one big centered card per slide, arrows beside it (below it on phones). */
.hh-slider--testimonials .hh-slider__track { border-radius: calc(var(--hh-radius) * 1.35); }
.hh-slider--testimonials .testimonial {
    align-items: center; text-align: center;
    padding: clamp(2rem, 4vw, 3rem) clamp(1.25rem, 8vw, 5.5rem);
    box-shadow: none;
    border-radius: calc(var(--hh-radius) * 1.35);
}
.hh-slider--testimonials .testimonial blockquote { font-size: clamp(1.15rem, 2.1vw, 1.4rem); line-height: 1.6; max-width: 42rem; }
.hh-slider--testimonials .testimonial figcaption { flex-direction: column; text-align: center; gap: .6rem; margin-top: .25rem; }
.hh-slider--testimonials .testimonial figcaption > span { align-items: center; }
.hh-slider--testimonials .hh-slider__btn { background: var(--hh-purple); color: #fff; box-shadow: 0 6px 18px rgba(43, 21, 48, .18); }
.hh-slider--testimonials .hh-slider__btn:hover { background: var(--hh-lime); color: var(--hh-ink); }
/* On phones (tablets too for testimonials) the arrows move under the slides, either side of the dots, so they
   never cover a caption or the words. */
@media (max-width: 575.98px) {
    .hh-slider .hh-slider__btn { top: auto; bottom: 0; margin-top: 0; width: 2.75rem; height: 2.75rem; }
    .hh-slider .hh-slider__btn--prev { left: 0; }
    .hh-slider .hh-slider__btn--next { right: 0; }
    .hh-slider .hh-slider__dots { padding-inline: 3.25rem; min-height: 2.75rem; }
    .hh-slider .hh-slider__pause { right: 3.25rem; }
    .hh-slider:not(.hh-slider--testimonials) .hh-slider__btn { background: var(--hh-purple); color: #fff; }
}
@media (max-width: 767.98px) {
    .hh-slider.hh-slider--testimonials .hh-slider__btn { top: auto; bottom: 0; margin-top: 0; width: 2.75rem; height: 2.75rem; }
    .hh-slider--testimonials .hh-slider__btn--prev { left: 0; }
    .hh-slider--testimonials .hh-slider__btn--next { right: 0; }
    .hh-slider--testimonials .hh-slider__dots { padding-inline: 3.25rem; }
    .hh-slider--testimonials .hh-slider__pause { right: 3.25rem; }
}

/* ---------- testimonials ---------- */
.testimonial {
    position: relative;
    display: flex; flex-direction: column; gap: 1.1rem;
    height: 100%; margin: 0;
    padding: 2rem 1.9rem 1.75rem;
    background: #fff;
    border: 1px solid var(--hh-line);
    border-radius: calc(var(--hh-radius) * 1.15);
    box-shadow: var(--hh-shadow);
}
.testimonial__mark {
    display: grid; place-items: center;
    width: 3rem; height: 3rem; border-radius: 50%;
    background: var(--hh-purple); color: var(--hh-lime);
    font-size: 1.15rem;
}
.testimonial blockquote { margin: 0; font-size: 1.1rem; line-height: 1.65; color: var(--hh-ink); }
.testimonial figcaption { display: flex; align-items: center; gap: .9rem; margin-top: auto; line-height: 1.35; }
.testimonial figcaption > span { display: flex; flex-direction: column; }
.testimonial figcaption strong { font-family: var(--hh-font-head); font-weight: 600; font-size: 1.1rem; color: var(--hh-ink); }
.testimonial figcaption span span { font-size: .95rem; color: var(--hh-muted); }
.testimonial__photo { flex: none; }
.testimonial__photo img, .testimonial__photo .hh-image-empty {
    display: block; width: 3.75rem; height: 3.75rem; border-radius: 50%; object-fit: cover;
    border: 3px solid var(--hh-lime);
}
.testimonial-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); text-align: left; }

/* ---------- video, audio and map ---------- */
.blk-embed { margin: 0; }
.blk-embed__frame {
    position: relative; overflow: hidden;
    aspect-ratio: 16 / 9;
    border-radius: var(--hh-radius);
    background: var(--hh-ink);
    box-shadow: var(--hh-shadow-lift);
}
.blk-embed__frame--4x3 { aspect-ratio: 4 / 3; }
.blk-embed__frame--1x1 { aspect-ratio: 1 / 1; max-width: 560px; margin-inline: auto; }
.blk-embed__frame--9x16 { aspect-ratio: 9 / 16; max-width: 340px; margin-inline: auto; }
.blk-embed__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.blk-embed figcaption { font-size: .9rem; line-height: 1.5; color: var(--hh-text-muted); margin-top: .75rem; }
.blk-audio { position: relative; }
.blk-audio iframe { display: block; width: 100%; border: 0; border-radius: 12px; background: var(--hh-cream); }
.blk-map {
    position: relative; overflow: hidden;
    height: 380px;
    border-radius: var(--hh-radius);
    border: 1px solid var(--hh-line);
    background: var(--hh-cream);
    box-shadow: var(--hh-shadow);
}
.blk-map--sm { height: 260px; }
.blk-map--lg { height: min(520px, 75vh); }
.blk-map iframe { display: block; width: 100%; height: 100%; border: 0; }

/* ---------- logos ---------- */
.logo-strip {
    --logo-h: 64px; --logo-w: 200px;
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 1.5rem 2.75rem;
    list-style: none; margin: 0; padding: 0;
}
.logo-strip--sm { --logo-h: 40px; --logo-w: 140px; gap: 1.25rem 2rem; }
.logo-strip--lg { --logo-h: 96px; --logo-w: 280px; }
.logo-strip li { margin: 0; }
.logo-strip img, .logo-strip .hh-image-empty { display: block; width: auto; height: auto; max-height: var(--logo-h); max-width: var(--logo-w); object-fit: contain; border-radius: 0; }
.logo-strip .hh-image-empty { width: var(--logo-w); height: var(--logo-h); }
.logo-strip a { display: block; border-radius: 6px; }
.logo-strip--gray img { filter: grayscale(1); opacity: .72; transition: filter .2s ease, opacity .2s ease; }
.logo-strip--gray li:hover img, .logo-strip--gray a:focus-visible img { filter: none; opacity: 1; }
:is(.hero, .section--purple, .cta-band--purple) .logo-strip--gray img { opacity: .85; }

/* ---------- numbers ---------- */
.stats {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: 1.75rem 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
}
@media (max-width: 575.98px) {
    .stats { gap: 1.5rem 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 6.25rem), 1fr)); }
    .stats--boxed { grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr)); }
    .stats--boxed li { padding: 1.25rem 1rem 1.1rem; }
}
.stats li { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.sec--center .stats li, .blk-align--center .stats li { align-items: center; text-align: center; }
.stats__icon { font-size: 1.5rem; margin-bottom: .75rem; color: var(--hh-accent); }
.stats__number {
    font-family: var(--hh-font-head); font-weight: 700;
    font-size: clamp(2.5rem, 5vw, 3.5rem); line-height: 1.05;
    letter-spacing: -.02em; font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}
.stats__label { margin-top: .45rem; font-weight: 700; line-height: 1.4; color: var(--hh-text-muted); }
.stats--purple { --hh-stat-c: var(--hh-stat-purple); --hh-stat-m: transparent; --hh-stat-box: var(--hh-purple); --hh-stat-box-ink: #fff; }
.stats--ink { --hh-stat-c: var(--hh-stat-ink); --hh-stat-m: transparent; --hh-stat-box: var(--hh-ink); --hh-stat-box-ink: #fff; }
.stats--lime { --hh-stat-c: var(--hh-stat-lime); --hh-stat-m: var(--hh-stat-mark, var(--hh-lime)); --hh-stat-box: var(--hh-lime); --hh-stat-box-ink: var(--hh-ink); }
.stats--orange { --hh-stat-c: var(--hh-stat-orange); --hh-stat-m: var(--hh-stat-mark, var(--hh-orange)); --hh-stat-box: var(--hh-orange); --hh-stat-box-ink: var(--hh-ink); }
.stats--pink { --hh-stat-c: var(--hh-stat-pink); --hh-stat-m: var(--hh-stat-mark, var(--hh-pink)); --hh-stat-box: var(--hh-pink); --hh-stat-box-ink: var(--hh-ink); }
.stats--coral { --hh-stat-c: var(--hh-stat-coral); --hh-stat-m: var(--hh-stat-mark, var(--hh-coral)); --hh-stat-box: var(--hh-coral); --hh-stat-box-ink: var(--hh-ink); }
.stats--plain .stats__number {
    color: var(--hh-stat-c, var(--hh-purple));
    background: linear-gradient(transparent 62%, var(--hh-stat-m, transparent) 62%, var(--hh-stat-m, transparent) 90%, transparent 90%);
    padding-inline: .06em;
}
.stats--boxed li {
    padding: 1.75rem 1.25rem 1.5rem;
    border-radius: calc(var(--hh-radius) * 1.15);
    background: var(--hh-stat-box, var(--hh-purple));
    color: var(--hh-stat-box-ink, #fff);
    box-shadow: inset 0 0 0 2px rgba(43, 21, 48, .08), var(--hh-shadow);
}
.stats--boxed .stats__label, .stats--boxed .stats__icon { color: inherit; }
:is(.hero, .section--purple, .cta-band--purple, .page-banner--purple, .highlight-box--purple) .stats--boxed:is(.stats--purple, .stats--ink) li { background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .4); }
:is(.section--lime, .cta-band--lime, .page-banner--lime, .highlight-box--lime) .stats--boxed.stats--lime li,
:is(.section--orange, .cta-band--orange, .page-banner--orange, .highlight-box--orange) .stats--boxed.stats--orange li,
:is(.section--pink, .cta-band--pink, .page-banner--pink, .highlight-box--pink) .stats--boxed.stats--pink li { box-shadow: inset 0 0 0 2px rgba(43, 21, 48, .25); }

/* ---------- countdown ---------- */
.countdown { --cd-bg: var(--hh-purple); --cd-ink: #fff; }
.countdown--lime { --cd-bg: var(--hh-lime); --cd-ink: var(--hh-ink); }
.countdown--orange { --cd-bg: var(--hh-orange); --cd-ink: var(--hh-ink); }
.countdown--pink { --cd-bg: var(--hh-pink); --cd-ink: var(--hh-ink); }
.countdown--coral { --cd-bg: var(--hh-coral); --cd-ink: var(--hh-ink); }
.countdown__label { font-family: var(--hh-font-head); font-weight: 600; font-size: clamp(1.2rem, 2.5vw, 1.5rem); line-height: 1.3; margin: 0 0 1rem; color: var(--hh-text); }
.countdown__clock { display: grid; grid-template-columns: repeat(4, minmax(0, 6rem)); gap: clamp(.4rem, 2vw, .9rem); }
.sec--center .countdown__clock { justify-content: center; }
.countdown__clock[hidden] { display: none; }
.countdown__unit {
    display: flex; flex-direction: column; align-items: center;
    padding: .9rem .25rem .75rem;
    border-radius: 16px;
    background: var(--cd-bg); color: var(--cd-ink);
    box-shadow: inset 0 0 0 2px rgba(43, 21, 48, .08), var(--hh-shadow);
    text-align: center;
}
.countdown__unit strong { font-family: var(--hh-font-head); font-weight: 700; font-size: clamp(1.6rem, 6vw, 2.75rem); line-height: 1; font-variant-numeric: tabular-nums; }
.countdown__unit span { margin-top: .4rem; font-size: clamp(.68rem, 2.2vw, .8rem); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
:is(.hero, .section--purple, .cta-band--purple, .page-banner--purple, .highlight-box--purple) .countdown--purple { --cd-bg: rgba(255, 255, 255, .12); }
:is(.hero, .section--purple, .cta-band--purple, .page-banner--purple, .highlight-box--purple) .countdown--purple .countdown__unit { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .45); }
:is(.section--lime, .cta-band--lime, .highlight-box--lime) .countdown--lime .countdown__unit,
:is(.section--orange, .cta-band--orange, .highlight-box--orange) .countdown--orange .countdown__unit,
:is(.section--pink, .cta-band--pink, .highlight-box--pink) .countdown--pink .countdown__unit { box-shadow: inset 0 0 0 2px rgba(43, 21, 48, .28); }
.countdown__done { margin: 0; font-family: var(--hh-font-head); font-weight: 600; font-size: clamp(1.3rem, 3vw, 1.75rem); line-height: 1.3; color: var(--hh-text); }
.countdown__done[hidden] { display: none; }

/* ---------- table ---------- */
.blk-table {
    overflow-x: auto;
    background: #fff;
    border: 1px solid var(--hh-line);
    border-radius: var(--hh-radius);
    box-shadow: var(--hh-shadow);
    color: var(--hh-ink);
}
.blk-table__table { width: 100%; margin: 0; border-collapse: collapse; font-size: 1rem; line-height: 1.5; }
.blk-table__table caption { caption-side: top; padding: 1rem 1.15rem .25rem; font-family: var(--hh-font-head); font-weight: 600; font-size: 1.1rem; color: var(--hh-ink); text-align: left; }
.blk-table__table th, .blk-table__table td { padding: .85rem 1.15rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--hh-line); }
.blk-table__table thead th { background: var(--hh-purple); color: #fff; font-family: var(--hh-font-head); font-weight: 600; font-size: 1.02rem; border-bottom: 0; white-space: nowrap; }
.blk-table__table caption + thead th { border-top: 0; }
.blk-table__table tbody tr:last-child td { border-bottom: 0; }
.blk-table__table--striped tbody tr:nth-child(even) td { background: var(--hh-cream); }
.blk-table__table td:first-child { font-weight: 700; }

/* ---------- tabs (Bootstrap's tab script switches them) ---------- */
.blk-tabs__nav { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.25rem; padding: 0; border: 0; list-style: none; }
.sec--center .blk-tabs__nav { justify-content: center; }
.blk-tabs__nav .nav-link {
    display: inline-flex; align-items: center; gap: .45rem;
    min-height: 2.75rem; margin: 0; padding: .5rem 1.25rem;
    background: #fff; color: var(--hh-ink);
    border: 2px solid var(--hh-line); border-radius: 999px;
    font-family: var(--hh-font-head); font-weight: 600; font-size: 1.02rem; line-height: 1.2;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.blk-tabs__nav .nav-link:hover, .blk-tabs__nav .nav-link:focus { border-color: var(--hh-purple); color: var(--hh-purple); isolation: auto; }
.blk-tabs__nav .nav-link.active, .blk-tabs__nav .nav-link.active:hover {
    background: var(--hh-tab-on); border-color: var(--hh-tab-on); color: var(--hh-tab-on-ink);
}
.blk-tabs__nav .nav-link:focus-visible { outline: 3px solid var(--hh-focus); outline-offset: 2px; }
.blk-tabs__content {
    background: #fff;
    border: 1px solid var(--hh-line);
    border-radius: var(--hh-radius);
    padding: clamp(1.25rem, 3vw, 2rem);
    box-shadow: var(--hh-shadow);
    text-align: left;
}
.blk-tabs__content > .tab-pane:focus-visible { outline-offset: 6px; }
.blk-tabs__content .prose > :last-child { margin-bottom: 0; }

/* ---------- questions & answers ---------- */
.faq { display: grid; gap: .85rem; text-align: left; }
.faq__item {
    background: #fff;
    border: 2px solid var(--hh-line);
    border-radius: var(--hh-radius);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.faq__item:hover { border-color: #D9C3DB; }
.faq__item[open] { border-color: rgba(127, 22, 131, .35); box-shadow: var(--hh-shadow); }
.faq__item > summary {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    list-style: none;
    cursor: pointer;
    padding: 1.1rem 1.25rem 1.1rem 1.4rem;
    font-family: var(--hh-font-head);
    font-weight: 600;
    font-size: 1.15rem;
    line-height: 1.3;
    color: var(--hh-ink);
    border-radius: calc(var(--hh-radius) - 2px);
}
.faq__item > summary::-webkit-details-marker { display: none; }
.faq__item > summary:hover { color: var(--hh-purple); }
.faq__item > summary:focus-visible { outline-offset: -3px; }
/* A "+" drawn with two bars; the upright bar shrinks away to leave "−" when open. */
.faq__item > summary::after {
    content: "";
    flex: 0 0 2rem; width: 2rem; height: 2rem;
    border-radius: 50%;
    background:
        linear-gradient(var(--hh-ink), var(--hh-ink)) center / 12px 2px no-repeat,
        linear-gradient(var(--hh-ink), var(--hh-ink)) center / 2px 12px no-repeat,
        var(--hh-lime);
    transition: background-size .2s ease, transform .2s ease;
}
.faq__item[open] > summary::after { background-size: 12px 2px, 2px 0; transform: rotate(180deg); }
.faq__answer { padding: 0 1.4rem 1.25rem; color: var(--hh-muted); }
.faq__answer > :last-child { margin-bottom: 0; }
@media (forced-colors: active) {
    .faq__item > summary::after { content: "+"; display: grid; place-items: center; background: none; border: 2px solid CanvasText; }
    .faq__item[open] > summary::after { content: "\2212"; }
}

/* ---------- formatted text and blog posts ---------- */
.post__image { width: 100%; border-radius: var(--hh-radius); margin-bottom: 2.5rem; box-shadow: var(--hh-shadow); }
.prose { font-size: 1.125rem; }
.prose h2 { font-size: 1.75rem; margin: 2.5rem 0 1rem; }
.prose h3 { margin: 2rem 0 .75rem; }
.prose > :first-child { margin-top: 0; }
.blk .prose > :last-child { margin-bottom: 0; }
.prose img { border-radius: var(--hh-radius-sm); margin: 1rem 0; }
.prose blockquote { border-left: 5px solid var(--hh-mark); padding: .25rem 0 .25rem 1.25rem; font-size: 1.25rem; font-style: italic; color: var(--hh-text-muted); }
.prose ul, .prose ol { padding-left: 1.4rem; margin-bottom: 1rem; }
.post__back { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--hh-line); }

/* ---------- forms ---------- */
.form-card {
    background: #fff;
    border: 1px solid var(--hh-line);
    border-radius: var(--hh-radius);
    padding: clamp(1.5rem, 4vw, 2.5rem);
    box-shadow: var(--hh-shadow);
}
.form-field { margin-bottom: 1.25rem; }
.form-field label { display: block; font-weight: 700; margin-bottom: .35rem; }
.form-field .optional { font-weight: 400; color: var(--hh-muted); }
.form-field input, .form-field select, .form-field textarea {
    width: 100%;
    font: inherit;
    color: var(--hh-ink);
    background: #fff;
    border: 2px solid var(--hh-line);
    border-radius: var(--hh-radius-sm);
    padding: .7rem .9rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.form-field input::placeholder { color: #75657A; opacity: 1; }
.form-field textarea { min-height: 160px; resize: vertical; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
    outline: none; border-color: var(--hh-purple); box-shadow: 0 0 0 4px var(--hh-field-ring);
}
.form-field input[aria-invalid="true"], .form-field textarea[aria-invalid="true"] { border-color: var(--hh-coral); }
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
/* The status box has its own light background, so its text stays dark on any section color. */
.form-status { display: none; margin-top: 1.25rem; padding: 1rem 1.25rem; border-radius: var(--hh-radius-sm); font-weight: 600; color: var(--hh-ink); text-align: left; }
.form-status.is-success { display: block; background: #EEFBDC; border: 2px solid var(--hh-lime); }
.form-status.is-error { display: block; background: #FFEDEC; border: 2px solid var(--hh-coral); }
.form-status:focus { outline: none; }
.form-status:focus-visible { outline: 3px solid var(--hh-focus); outline-offset: 2px; }
.cf-turnstile { margin-bottom: 1.25rem; min-height: 65px; }
.cf-turnstile[data-size="compact"] { min-height: 140px; } /* narrow phones, see site.js */

/* ---------- newsletter signup ---------- */
.newsletter-form { position: relative; max-width: 40rem; }
.newsletter-form__fields { display: flex; flex-wrap: wrap; gap: .75rem; align-items: stretch; }
.newsletter-form .form-field { flex: 1 1 13rem; min-width: 0; margin: 0; }
.newsletter-form .form-field input { height: 100%; min-height: 3.25rem; }
.newsletter-form__fields > .btn { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-height: 3.25rem; }
.newsletter-form--stacked .newsletter-form__fields { flex-direction: column; }
.newsletter-form--stacked .form-field { flex: 0 0 auto; }
.newsletter-form--stacked .newsletter-form__fields > .btn { align-self: flex-start; }
.sec--center .newsletter-form--stacked .newsletter-form__fields > .btn { align-self: center; }
@media (max-width: 479.98px) {
    .newsletter-form__fields > .btn { flex: 1 1 100%; }
    .newsletter-form--stacked .newsletter-form__fields > .btn { align-self: stretch; }
}
.newsletter-form .cf-turnstile { margin: .9rem 0 0; }
.newsletter-form__note { margin: .75rem 0 0; font-size: .9rem; line-height: 1.5; color: var(--hh-text-muted); }
.sec--center .newsletter-form__note { text-align: center; }
.newsletter-form .form-status { margin-top: 1rem; }
/* on a white card, the fields need no extra edge; on colors they get a darker one */
:is(.section--lime, .section--orange, .section--pink, .cta-band--lime, .cta-band--orange, .cta-band--pink) .newsletter-form .form-field input { border-color: rgba(43, 21, 48, .28); }
:is(.hero, .section--purple, .cta-band--purple) .newsletter-form .form-field input { border-color: transparent; }

/* ---------- social links ---------- */
.social-links { display: flex; flex-wrap: wrap; gap: .6rem; }
.social-links a {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    min-width: 2.75rem; min-height: 2.75rem;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease, transform .15s ease, border-color .15s ease;
}
.social-links--icons a { width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--hh-btn-main); color: var(--hh-btn-main-ink); font-size: 1.15rem; }
.social-links--icons a:hover { background: var(--hh-btn-main-hover); color: var(--hh-btn-main-ink); transform: translateY(-2px); }
:is(.hero, .section--purple, .cta-band--purple, .page-banner--purple) .social-links--icons a:hover { color: var(--hh-ink); }
.social-links--buttons a {
    padding: .45rem 1.15rem .45rem 1rem; border-radius: 999px;
    border: 2px solid var(--hh-ghost-line); color: var(--hh-ghost);
    font-family: var(--hh-font-head); font-weight: 600;
}
.social-links--buttons a:hover { background: var(--hh-ghost); border-color: var(--hh-ghost); color: var(--hh-ghost-ink); }

/* ---------- footer ---------- */
.site-footer { --hh-focus: var(--hh-lime); background: var(--hh-purple-dark); color: rgba(255, 255, 255, .82); padding: 4.5rem 0 2rem; }
.footer-brand { display: inline-block; } /* so the link is the size of the logo */
.footer-brand img { width: 240px; height: auto; margin-bottom: 1.25rem; }
.footer-about { max-width: 26rem; }
.footer-contact { margin: 0 0 1.25rem; font-weight: 600; }
.footer-contact i { color: var(--hh-lime); margin-right: .35rem; }
/* Footer links are at least 44px tall (2.75rem, like the social buttons) so they are easy to tap. */
.footer-contact a {
    display: inline-flex; align-items: center; min-height: 2.75rem;
    color: #fff; overflow-wrap: anywhere; text-decoration-color: rgba(255, 255, 255, .45);
}
.footer-contact a:hover { color: var(--hh-lime); text-decoration-color: currentColor; }
.footer-social { display: flex; flex-wrap: wrap; gap: .6rem; }
.footer-social__link {
    display: inline-grid; place-items: center;
    width: 2.75rem; height: 2.75rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 1.15rem;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease, transform .15s ease;
}
.footer-social__link:hover, .footer-social__link:focus-visible { background: var(--hh-lime); color: var(--hh-ink); transform: translateY(-2px); }
.footer-heading { font-size: 1.1rem; color: var(--hh-lime); margin-bottom: .5rem; } /* the links below add their own space */
.footer-links { list-style: none; padding: 0; margin: 0; }
/* 44px tall links take the place of the old gap between list items. */
.footer-links a { display: inline-flex; align-items: center; min-height: 2.75rem; color: #fff; text-decoration: none; }
.footer-links a:hover { color: var(--hh-lime); text-decoration: underline; }
.footer-bottom {
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    margin-top: 3.5rem; padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, .15);
    font-size: .95rem;
}
.footer-bottom p { margin: 0; }
.footer-mark { opacity: .9; }

/* ---------- editor shortcut (added by site.js for signed-in editors) ---------- */
/* Below the header (z-index 1030), so the open phone menu covers it instead of the other way round.
   The safe-area insets keep it clear of the iPhone home bar and notch. */
.hh-edit-fab {
    position: fixed; z-index: 1025;
    right: calc(1rem + env(safe-area-inset-right, 0px));
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    min-height: 2.75rem; /* 44px, easy to tap */
    padding: .6rem 1.15rem .6rem 1rem;
    background: var(--hh-purple);
    color: #fff;
    font-family: var(--hh-font-head);
    font-weight: 600;
    font-size: .95rem;
    line-height: 1.2;
    border-radius: 999px;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(43, 21, 48, .28);
    opacity: .94;
    transition: background-color .15s ease, transform .15s ease, opacity .15s ease;
}
.hh-edit-fab i { color: var(--hh-lime); }
/* Room under the footer, so at the end of the page the button covers nothing. */
body:has(> .hh-edit-fab) .site-footer { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px)); }
.hh-edit-fab:hover, .hh-edit-fab:focus-visible { background: var(--hh-purple-dark); color: #fff; opacity: 1; transform: translateY(-2px); }
/* Phones: a small round pencil button in the corner, so it doesn't sit over the form's send button or the
   footer links while scrolling. The label is still read out by screen readers. */
@media (max-width: 575.98px) {
    .hh-edit-fab { width: 3rem; height: 3rem; padding: 0; font-size: 1.1rem; }
    .hh-edit-fab__label {
        position: absolute; width: 1px; height: 1px; overflow: hidden;
        clip-path: inset(50%); white-space: nowrap;
    }
}
@media print {
    .hh-edit-fab, .hh-slider__btn, .hh-slider__dots, .hh-slider__pause { display: none !important; }
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce) {
    html, .hh-slider__track { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .feature-card:hover, .post-card:hover, .btn:hover,
    .feature-card:hover .feature-card__image img, a.promo:hover img, a.promo:focus-visible img,
    .blk-image--zoom:hover img, .blk-image--zoom > a:focus-visible img { transform: none; }
    .blk-image--zoom:hover img, .blk-image--zoom > a:focus-visible img { clip-path: inset(0 round var(--hh-radius)); }
}