:root {

    --root-font-size: 16px;

    /* Text sizing presets */    

    --text-size-9xs: 0.375rem; /* 6px */
    --text-size-8xs: 0.4375rem; /* 7px */
    --text-size-7xs: 0.5rem;    /* 8px */
    --text-size-6xs: 0.5625rem; /* 9px */
    --text-size-5xs: 0.625rem;  /* 10px */
    --text-size-4xs: 0.6875rem; /* 11px */
    --text-size-3xs: 0.75rem;   /* 12px */
    --text-size-2xs: 0.8125rem; /* 13px */
    --text-size-xs: 0.875rem;  /* 14px */
    --text-size-sm: 0.9375rem;  /* 15px */
    --text-size-reg: 1rem;     /* 16px */
    --text-size-lg: 1.125rem;   /* 18px */
    --text-size-xl: 1.25rem;    /* 20px */
    --text-size-2xl: 1.375rem;   /* 22px */
    --text-size-3xl: 1.5rem;    /* 24px */
    --text-size-4xl: 1.75rem;   /* 28px */
    --text-size-5xl: 2rem;      /* 32px */
    --text-size-6xl: 2.25rem;   /* 36px */
    --text-size-7xl: 2.5rem;    /* 40px */
    --text-size-8xl: 2.75rem;   /* 44px */
    --text-size-9xl: 3rem;      /* 48px */
    --text-size-10xl: 3.375rem;  /* 54px */
    --text-size-11xl: 3.75rem;  /* 60px */
    --text-size-12xl: 4.125rem; /* 66px */
    --text-size-13xl: 4.5rem;   /* 72px */
    --text-size-14xl: 5rem;     /* 80px */
    --text-size-15xl: 5.5rem;   /* 88px */
    --text-size-16xl: 6rem;     /* 96px */
    --text-size-17xl: 7rem;     /* 112px */
    --text-size-18xl: 8rem;     /* 128px */


    /* Font weight presets */
    
    --font-weight-xlight: 200;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-xbold: 800;



    /* content sections */
    --base-content-section-max-width: 80rem;
    --base-content-section-padding-x: 5%;
    --base-content-section-margin: 0 auto;

}


/* ========== BROWSER-DEFAULT FIXES ========== */
/*
 * These are bug-fix overrides for browser defaults that no realistic site
 * would want to keep. Universal — no design opinion. Anything more
 * opinionated (typography defaults, link colours, paragraph spacing, etc.)
 * lives in site-styles-boilerplate.css and is per-site overridable.
 */

*, *::before, *::after {
    box-sizing: border-box;
}

body {
    margin: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

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

button {
    cursor: pointer;
}




/* ========== CONTENT SECTION SETTINGS ========== */

/* --- Vertical Section Paddings --- */

.section-padding-y-none {
    padding-top: 0;
    padding-bottom: 0;
}

.section-padding-y-7xs {
    padding-top: clamp(0.25rem, 0.5vw, 0.5rem);
    padding-bottom: clamp(0.25rem, 0.5vw, 0.5rem);
}

.section-padding-y-6xs {
    padding-top: clamp(0.5rem, 1vw, 1rem);
    padding-bottom: clamp(0.5rem, 1vw, 1rem);
}

.section-padding-y-5xs {
    padding-top: clamp(0.75rem, 1.5vw, 1.5rem);
    padding-bottom: clamp(0.75rem, 1.5vw, 1.5rem);
}

.section-padding-y-4xs {
    padding-top: clamp(1rem, 2vw, 2rem);
    padding-bottom: clamp(1rem, 2vw, 2rem);
}

.section-padding-y-3xs {
    padding-top: clamp(1.25rem, 2.5vw, 2.5rem);
    padding-bottom: clamp(1.25rem, 2.5vw, 2.5rem);
}

.section-padding-y-2xs {
    padding-top: clamp(1.5rem, 3vw, 3rem);
    padding-bottom: clamp(1.5rem, 3vw, 3rem);
}

.section-padding-y-xs {
    padding-top: clamp(2rem, 4vw, 4rem);
    padding-bottom: clamp(2rem, 4vw, 4rem);
}

.section-padding-y-sm {
    padding-top: clamp(2.5rem, 5vw, 5rem);
    padding-bottom: clamp(2.5rem, 5vw, 5rem);
}

.section-padding-y-md {
    padding-top: clamp(3rem, 6vw, 6rem);
    padding-bottom: clamp(3rem, 6vw, 6rem);
}

.section-padding-y-lg {
    padding-top: clamp(3.5rem, 7vw, 7rem);
    padding-bottom: clamp(3.5rem, 7vw, 7rem);
}

.section-padding-y-xl {
    padding-top: clamp(4rem, 8vw, 8rem);
    padding-bottom: clamp(4rem, 8vw, 8rem);
}

.section-padding-y-2xl {
    padding-top: clamp(5rem, 10vw, 10rem);
    padding-bottom: clamp(5rem, 10vw, 10rem);
}

.section-padding-y-3xl {
    padding-top: clamp(6rem, 12vw, 12rem);
    padding-bottom: clamp(6rem, 12vw, 12rem);
}

.section-padding-y-4xl {
    padding-top: clamp(7rem, 14vw, 14rem);
    padding-bottom: clamp(7rem, 14vw, 14rem);
}

.section-padding-y-5xl {
    padding-top: clamp(8rem, 16vw, 16rem);
    padding-bottom: clamp(8rem, 16vw, 16rem);
}

.section-padding-y-6xl {
    padding-top: clamp(9rem, 18vw, 18rem);
    padding-bottom: clamp(9rem, 18vw, 18rem);
}

.section-padding-y-7xl {
    padding-top: clamp(10rem, 20vw, 20rem);
    padding-bottom: clamp(10rem, 20vw, 20rem);
}


/* --- Horizontal Section Paddings --- */

.content-section.section-padding-x-none {
    padding-left: 0;
    padding-right: 0;
}

.content-section {
    padding-left: var(--base-content-section-padding-x);
    padding-right: var(--base-content-section-padding-x);
    margin: 0;
}

.content-section-inner {
    max-width: var(--base-content-section-max-width);
    margin: var(--base-content-section-margin);
}



/* ========== UTILITY CLASSES ========== */

/* What earns a spot here: a class that is STABLE (never needs changing),
   GENERIC (used across many sites/contexts), and COMMON enough to be worth
   humans + AI remembering it exists. These are the safest things in core —
   cached, never change (so no risk of a future edit breaking old sites), and
   inert until applied (no imposed look). Keep OUT of core: opinionated/design
   defaults → per-site boilerplate; one-off or site-specific styling → write it
   inline. The real cost of a utility is LEARNABILITY (one more name to know, or
   it gets reinvented), NOT risk. So: stable + generic + worth-learning → here;
   otherwise, don't. */

/* Visually hidden but kept in the accessibility tree — for labels on
   placeholder-only fields, icon-button text, skip links, live regions, etc. */
.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
}

.text-center, .text-center * {
    text-align: center;
}
.text-left, .text-left * {
    text-align: left;
}
.text-right, .text-right * {
    text-align: right;
}
.text-jusitfy, .text-justify * {
    text-align: justify;
}

.text-wrap { text-wrap: wrap; }
.text-nowrap { text-wrap: nowrap; }
.text-balanced { text-wrap: balanced; }
.text-pretty { text-wrap: pretty; }

.mx-auto {
    margin-left: 0;
    margin-right: 0;
}

.flex { display: flex;}
.inline-flex { display: inline-flex; }

.flex-nowrap { flex-wrap: nowrap; }
.flex-wrap { flex-wrap: wrap; }
.flex-wrap-reverse { flex-wrap: wrap-reverse; }


.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.items-end-safe { align-items: safe flex-end; }
.items-center { align-items: center; }
.items-center-safe { align-items: safe center; }
.items-baseline { align-items: baseline; }
.items-baseline-last { align-items: last baseline; }
.items-stretch { align-items: stretch; }


.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.justify-end-safe { justify-content: safe flex-end; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.justify-evenly { justify-content: space-evenly; }
.justify-stretch { justify-content: stretch; }
.justify-center { justify-content: center; }
.justify-center-safe { justify-content: safe center; }

.scaled-max-width {
    max-width: calc(var(--base-content-section-max-width)* var(--scale-factor, 0.6));
    margin-left: auto;
    margin-right: auto;
}
.scale-factor-95 { --scale-factor: 0.95; }
.scale-factor-90 { --scale-factor: 0.90; }
.scale-factor-85 { --scale-factor: 0.85; }
.scale-factor-80 { --scale-factor: 0.80; }
.scale-factor-75 { --scale-factor: 0.75; }
.scale-factor-70 { --scale-factor: 0.70; }
.scale-factor-65 { --scale-factor: 0.65; }
.scale-factor-60 { --scale-factor: 0.60; }
.scale-factor-55 { --scale-factor: 0.55; }
.scale-factor-50 { --scale-factor: 0.50; }
.scale-factor-45 { --scale-factor: 0.45; }
.scale-factor-40 { --scale-factor: 0.40; }
.scale-factor-35 { --scale-factor: 0.35; }
.scale-factor-30 { --scale-factor: 0.30; }



.link-button {
    text-decoration: none;
    display: inline-flex;
}


.grid { display: grid; }
.inline-grid { display: inline-grid; }


.grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}
.grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.button-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: .75rem;
    row-gap: 1rem;
}


.grid-section {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* 3 columns on medium and large screens */
    gap: 2rem;
}


.grid-section > * {
    /*text-align: center;*/
}

.grid-section > * > * + * {
    margin-top: 1rem;
}

@media (max-width: 768px) {

    .grid-section {
        grid-template-columns: repeat(1, minmax(0, 1fr)); /* Single column on small screens */
        
    }

}



/* ====================== CORE COMPONENT STYLES ====================== */



/* -------------------------------------------------------- */
/* CORE DESIGN ANCHORS — a tiny shared layer the components    */
/* below fall back to, so "set it once" re-themes them all.    */
/* Engine-owned (--core-*), guaranteed here. Override via the   */
/* theme editor (Accent / Corner radius) or custom_styles —     */
/* point the Accent token at a palette colour to brand-match    */
/* every component. Only roles consumed by 2+ components live    */
/* here — NOT a brand kit (that's the --color-* palette).       */
/* -------------------------------------------------------- */
:root {
    --core-accent:          #2b6cb0;   /* primary interactive / emphasis colour */
    --core-accent-contrast: #ffffff;   /* readable text/icon ON the accent (e.g. button label) */
    --core-border:          #cccccc;   /* neutral borders & dividers */
    --core-muted:           #8a8a8a;   /* secondary / placeholder / help text */
    --core-radius:          8px;       /* base corner radius for controls/cards */
}



/* -------------------------------------------------------- */
/* FORMS — two opt-in layers, usable together or apart:       */
/*   .core-form-style  field MECHANICS (look, focus, a11y)    */
/*   .core-form-grid   field LAYOUT (stacking, columns)       */
/* Colours/sizes are var(--core-form-*, fallback): undefined  */
/* -> a sensible default; set the var (custom_styles/theme)   */
/* to override. The submit gets a low-specificity accent button */
/* default; any site button class overrides it without a fight. */
/* Full usage: prompts/patterns/form-styling.md                 */
/* -------------------------------------------------------- */

/* --- Field mechanics: wrap the form in .core-form-style --- */
/* Field styling skips the button-type inputs (they get the button rule below).
   :where(:not(...)) excludes them WITHOUT raising this rule's specificity. */
.core-form-style input:where(:not([type="submit"], [type="button"], [type="reset"])),
.core-form-style select,
.core-form-style textarea {
    box-sizing: border-box;
    font: inherit;
    width: 100%;
    color:            var(--core-form-field-text-color, inherit);
    background:        var(--core-form-field-bg, #fff);
    border: 1px solid var(--core-form-field-border, var(--core-border, #ccc));
    border-radius:     var(--core-form-radius, var(--core-radius, 8px));
    padding: 0.75rem 1rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.core-form-style input:focus,
.core-form-style select:focus,
.core-form-style textarea:focus {
    border-color: var(--core-form-field-border-focus, var(--core-accent, #2b6cb0));
    box-shadow: 0 0 0 3px color-mix(in srgb,
        var(--core-form-field-border-focus, var(--core-accent, #2b6cb0)) 25%, transparent);
    outline: 2px solid transparent;   /* keeps a visible focus ring under forced-colors */
    outline-offset: 2px;
}

.core-form-style input:disabled,
.core-form-style select:disabled,
.core-form-style textarea:disabled {
    background: var(--core-form-field-bg-disabled, #f5f5f5);
    color:      var(--core-form-field-text-disabled, var(--core-muted, #999));
    cursor: not-allowed;
}

.core-form-style ::placeholder { color: var(--core-form-placeholder, var(--core-muted, #8a8a8a)); opacity: 1; }

/* Checkbox / radio: small + brand-accented (overrides width:100% above) */
.core-form-style input[type="checkbox"],
.core-form-style input[type="radio"] {
    width: 1.15rem;
    height: 1.15rem;
    accent-color: var(--core-form-checkbox-accent, var(--core-accent, #2b6cb0));
}

.core-form-style textarea { min-height: 120px; resize: vertical; }

/* Submit / button — a low-specificity (:where) accent default so a zero-effort
   form isn't raw browser chrome. The :where() keeps this at .core-form-style's
   specificity (0,1,0), so any site button class (loaded after core) wins by
   source order — and a non-styling utility / JS / state class won't blow it away
   the way :not([class]) would. */
.core-form-style :where(button, input[type="submit"], input[type="button"]) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    background-color: var(--core-form-button-bg, var(--core-accent));
    color: var(--core-form-button-text-color, var(--core-accent-contrast, #fff));
    border: 0;
    border-radius: var(--core-radius, 8px);
    padding: 0.75rem 1.5rem;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
/* Hover darkens whatever the button colour actually is (token, accent, or even a
   site override) — color-mix reads the live value. Zero specificity (:where), so a
   site's own :hover still wins. */
.core-form-style :where(button:hover, input[type="submit"]:hover, input[type="button"]:hover) {
    background-color: color-mix(in srgb, var(--core-form-button-bg, var(--core-accent)) 88%, black);
}
.core-form-style :where(button, input[type="submit"], input[type="button"]):disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Invalid state — hooks the correct a11y attribute */
.core-form-style [aria-invalid="true"] {
    border-color: var(--core-form-field-border-invalid, #c0392b);
}

/* Fieldset reset (+ the min-width:0 that stops fieldsets blowing out flex/grid) */
.core-form-style fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.core-form-style legend   { padding: 0; font-weight: 600; }

/* A field stacks its label text above its control. The wrapping <label> stays
   BLOCK so its inline content — the label text PLUS a required asterisk / <abbr>
   etc. — flows on one line; the control drops below. (A flex column would put every
   inline child, the asterisk included, on its own row — that was the bug.)
   Checkbox/radio aren't full-width, so they stay inline before their text with no
   special rule. :where() keeps specificity low so a site can restyle with one class. */
.core-form-style :where(label) { display: block; }
.core-form-style :where(label) > :where(input:not([type="checkbox"], [type="radio"]), select, textarea) {
    display: block;
    margin-top: 0.4rem;
}
/* The explicit .core-form-group wrapper holds separate label / control / help
   elements, so a flex column with a uniform gap is clean here (the <label> is one
   item, so its own inline asterisk stays inline within it). */
.core-form-style :where(.core-form-group) {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

/* Vertical rhythm between a form's direct children (fields, button, …). Restores the
   between-field spacing the OLD .core-form-style gave via label margins, so a PLAIN
   form (no .core-form-grid) isn't cramped. A grid is a single child here, so its own
   gap isn't doubled. Low specificity — override with --core-form-gap or your own rule. */
.core-form-style > * + * {
    margin-top: var(--core-form-gap, 1rem);
}

/* Help text / required marker / error message (namespaced; usable anywhere) */
.core-form-help     { font-size: 0.875rem; color: var(--core-muted, #8a8a8a); }
.core-form-required { color: var(--core-form-field-border-invalid, #c0392b); }
.core-form-error    { color: var(--core-form-field-border-invalid, #c0392b); font-size: 0.875rem; }

/* --- Field layout: wrap the fields in .core-form-grid --- */
/* Smart default: no child classes -> every field full-width & stacked, spaced.
   6-col basis lets a field opt into a half/third to share a row. */
.core-form-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--core-form-gap, 1rem);
}
.core-form-grid > * { grid-column: 1 / -1; min-width: 0; }   /* full width by default */
.core-form-grid > .core-form-grid-half  { grid-column: span 3; }
.core-form-grid > .core-form-grid-third { grid-column: span 2; }
@media (max-width: 600px) {
    .core-form-grid > * { grid-column: 1 / -1; }             /* collapse to one column */
}

/* Inline field + button (newsletter, search) — wraps on narrow screens */
.core-form-inline { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: start; }
.core-form-inline > input,
.core-form-inline > .core-form-group { flex: 1 1 12rem; }   /* input grows */
.core-form-inline > button { flex: 0 0 auto; }              /* button hugs, wraps below */

/* The form's action row — separated from the fields; full-width submit on mobile */
.core-form-actions {
    display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center;
    margin-top: 1rem;
}
@media (max-width: 600px) {
    .core-form-actions > button { width: 100%; }
}

/* Floating label (OPT-IN, a design choice). Label rests as the placeholder when
   empty, floats up small on focus/fill. Needs <input placeholder=" "> with the
   label AFTER it. The one design-opinionated piece here — restyle per-site. */
.core-form-float { position: relative; }
.core-form-float > input { padding-top: 1.4rem; }
.core-form-float > label {
    position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
    pointer-events: none; color: var(--core-form-placeholder, #8a8a8a);
    transition: transform 0.15s ease, top 0.15s ease, font-size 0.15s ease;
}
.core-form-float > input:focus + label,
.core-form-float > input:not(:placeholder-shown) + label {
    top: 0.55rem; transform: translateY(-50%) scale(0.8);
}

/* -------------------------------------------------------- */
/* ACCORDION (FAQs, etc) */
/* -------------------------------------------------------- */

.core-accordion-01 {
    width: 100%;
}

.core-accordion-01 > * + * {
    margin-top: 1.8rem;
}

.core-accordion-01 details {
    padding: 1.4rem;
    position: relative;
}

/* Optional - Apply border-radius if data-rounded is missing or not "false" */
.core-accordion-01:not([data-rounded="false"]) details {
    border-radius: 1rem;
}

/* Optional Shadow */
.core-accordion-01[data-shadow="true"] details {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

.core-accordion-01 details summary {
    font-weight: 500;
    font-size: 1.2rem;
    cursor: pointer;
}
.core-accordion-01 details[open] summary {
    margin-bottom: 0.75rem;
}
/* If not using default browser triangles */
.core-accordion-01:not([data-icon="left-triangles"]) details summary {
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 26px;
    position: relative;
}
.core-accordion-01:not([data-icon="left-triangles"]) details summary::-webkit-details-marker {
    display: none;
}

/* Default Icon: Plus/Cross */
.core-accordion-01:not([data-icon]) details summary::after, 
.core-accordion-01[data-icon="plus-cross"] details summary::after {
    content: "+";
    font-family: Arial, sans-serif;
    font-size: 2.2rem;
    font-weight: 400;
    color: #333;
    transition: transform 0.3s ease-in-out;
    position: absolute;
    right: 0;
}

/* Rotate 45 degrees to look like X when open */
.core-accordion-01:not([data-icon]) details[open] summary::after,
.core-accordion-01[data-icon="plus-cross"] details[open] summary::after {
    transform: rotate(45deg);
}

/* Up/Down Arrows (SVG) */
.core-accordion-01[data-icon="up-down"] details summary::after {
    content: "";
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    /*background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;*/
    background-color: black;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat center / contain;
    transition: transform 0.3s ease-in-out;
    position: absolute;
    right: 0;
}

/* Rotate 180 degress when open */
.core-accordion-01[data-icon="up-down"] details[open] summary::after {
    transform: rotate(180deg);
}

/* Left Triangles (Browser Default) */
.core-accordion-01[data-icon="left-triangles"] details summary::after {
    content: none;
}



/* -------------------------------------------------------- */
/* TRAY MODAL */
/* -------------------------------------------------------- */

.core-tray-modal {
    position: fixed;
    inset: 0;
    overflow: hidden;
    z-index: 3000;
    visibility: hidden;
    pointer-events: none;
    transition: visibility 0.3s ease-in-out;
  }
.core-tray-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}
.core-tray-panel {
    position: absolute;
    right: 0;
    top: 0;
    background-color: white;
    width: 100%;
    max-width: 40rem;
    height: 100vh;
    padding: 5rem 4rem;
    overflow: auto;
    transform: translate3d(100%, 0, 0);
    transition: transform 0.3s ease-in-out;
  }
  .core-tray-modal.core-tray-modal-open {
    visibility: visible;
    pointer-events: auto;
  }
  .core-tray-modal.core-tray-modal-open .core-tray-panel {
    transform: translate3d(0, 0, 0);
  }
  .core-tray-modal.core-tray-modal-open .core-tray-overlay {
    opacity: 1;
  }
  .core-tray-content {
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  .core-tray-header, .core-tray-body {
    padding: 0;
  }
  .core-tray-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ddd;
    margin-bottom: 1rem;
  }
  .core-tray-close {
    background: none;
    border: none;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    color: var(--body-text-color);
    position: absolute;
    top: 15px;
    right: 15px;
  }

  @media (max-width: 600px) {
    .core-tray-panel {
      max-width: 100%;
      padding: 3rem 2rem;
    }
  }

  

/* -------------------------------------------------------- */
/* CONTENT SLIDER (e.g. for testimonials  */
/* -------------------------------------------------------- */

  
.core-content-slider {
    width: 100%;
    overflow: hidden;
}
.slider-track {
    display: flex;
    scroll-behavior: smooth;
    overflow-x: auto;
    scrollbar-width: none;
    gap: 20px;
}
.slider-track::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: reduce) {
    .slider-track { scroll-behavior: auto; }
}
.slider-item {
    flex: 0 0 auto;
}

.slider-prev, .slider-next {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: #eee;
    border: none;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    opacity: 1;
    transition: opacity 0.2s;
    width: fit-content;
    height: fit-content;
}
.slider-arrow-disabled {
    opacity: 0.4;
    pointer-events: none;
}

.slider-dots {
    display: flex;
    gap: 8px;
    margin-top: 16px;
}
.slider-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #bbb;
    border-radius: 50%;
    cursor: pointer;
    outline: none;
    border: none;
    transition: background 0.2s;
}
.slider-dot.active {
    background: #333;
}

/* ========================================================================
   CORE MENU  (cms-menu component, "standard" template — see
   templates/partials/components/menu-standard.twig)
   ------------------------------------------------------------------------
   This was previously emitted inline in the partial because the mobile
   breakpoint had to be substituted into @media conditions (CSS vars can't
   live in media queries). It is now STATIC and cacheable: the desktop ⇄
   collapsed switch is driven by a class, not a width media query.

   core-scripts.js (the `coreMenu` plugin) reads each menu's chosen breakpoint
   (data-mobile-breakpoint), matchMedia's it, and toggles `.is-collapsed` on
   the <nav>. A tiny inline setter in the partial sets the initial class
   before first paint (no flash). Because the breakpoint lives in JS, two
   menus can collapse at different widths without their CSS colliding.

   Gating map (was → now):
     @media (min-width: bp+1)          → [data-skin="x"]:not(.is-collapsed)
     @media (max-width: bp)            → .is-collapsed (+ [data-mobile-presentation])
     (hover: hover) and (pointer:fine) → KEPT (a real capability query, not a breakpoint)

   Skins: the `drawer` skin is "always collapsed, drawer presentation" — the
   partial gives it `.is-collapsed` + data-mobile-presentation="drawer" in the
   markup, so it reuses the shared collapse rules with no separate block. The
   `flat` skin is static (no chrome/JS) and only uses the shared structure.

   CSS class namespace: `.core-menu-*`. Per-instance look (colours, spacing,
   shadow preset) arrives as --core-menu-* custom properties set inline on the
   root, so every value here is token-overridable.
   ===================================================================== */

/* ============================== shared structure ====================== */
.core-menu { position: relative; }
.core-menu-list { list-style: none; margin: 0; padding: 0; }
.core-menu-sublist { padding-left: 1rem; }
.core-menu-link {
    text-decoration: none;
    color: var(--core-menu-link-color, currentColor);
    font: inherit;
    /* Desktop top-level size, and the root of the menu's font-size cascade:
       dropdown / mobile / mobile-dropdown all fall back to this, so setting just
       --core-menu-font-size scales the whole menu. Each context still has its own
       token for ultimate control (see the dropdown rule + mobile scope). */
    font-size: var(--core-menu-font-size, 1.1rem);
}
a.core-menu-link { cursor: pointer; }
/* Hover / current fall back to the shared --core-accent anchor (brand-matched by
   default, still overridable per placement via --core-menu-link-*-color), then to
   currentColor so an unthemed menu degrades to "no colour change". */
.core-menu-link:hover { color: var(--core-menu-link-hover-color, var(--core-accent, currentColor)); }
.core-menu-link[aria-current="page"] { color: var(--core-menu-link-current-color, var(--core-menu-link-hover-color, var(--core-accent, currentColor))); }

/* Panel — generic open/close region. Base form is an inline accordion
   (static flow); desktop skins reposition it as a dropdown/flyout. */
.core-menu-panel { display: none; }
.core-menu-item.is-open > .core-menu-panel { display: block; }
.core-menu-extras { display: none; }
/* Top extras (e.g. logo) sit above the list — drop the bottom-extras top margin. */
.core-menu .core-menu-extras.core-menu-extras-top { margin-top: 0; margin-bottom: 24px; }

/* ---- interactive chrome (toggles + hamburger) ----
   Emitted unconditionally; the static `flat` skin has no burger/toggle markup,
   so these simply never match there. */
/* The group-parent label is a <button> — strip native button chrome. */
button.core-menu-link {
    display: inline-flex;
    align-items: center;
    gap: .4em;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    color: var(--core-menu-link-color, currentColor);
}
/* Chevron toggle button on navigable parents — carries the link colour so the
   currentColor border-triangle matches the links. */
.core-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    padding: .5em .6em;
    cursor: pointer;
    color: var(--core-menu-link-color, currentColor);
}
.core-menu-chevron {
    display: inline-block;
    width: var(--core-menu-chevron-size, .5em);
    height: var(--core-menu-chevron-size, .5em);
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform .2s ease;
}
.core-menu-item.is-open > .core-menu-toggle .core-menu-chevron,
.core-menu-item.is-open > .core-menu-grouptoggle .core-menu-chevron {
    transform: rotate(-135deg);
}
/* Hamburger — hidden by default; collapsed menus reveal it (see .is-collapsed).
   A small column: an icon (the three bars) above an optional "Menu" label. */
.core-menu-burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    min-width: var(--core-menu-burger-size, 40px);
    min-height: var(--core-menu-burger-size, 40px);
    background: var(--core-menu-burger-bg, transparent);
    border: var(--core-menu-burger-border, 0);
    border-radius: var(--core-menu-burger-radius, 0);
    padding: 4px;
    cursor: pointer;
    color: var(--core-menu-burger-color, var(--core-menu-link-color, currentColor));
    line-height: 1;
}
.core-menu-burger-bars {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 24px;
}
.core-menu-burger-bar {
    display: block;
    width: 24px;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
    transition: transform .3s, opacity .3s;
}
.core-menu-burger-label {
    display: none;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
}
/* Toggle modes. icon (default): bars only. icon-label: bars + label. label: word only. */
.core-menu-burger[data-mobile-toggle="icon-label"] .core-menu-burger-label,
.core-menu-burger[data-mobile-toggle="label"] .core-menu-burger-label { display: block; }
.core-menu-burger[data-mobile-toggle="label"] .core-menu-burger-bars { display: none; }
.core-menu-burger[data-mobile-toggle="label"] { min-width: 0; padding: 6px 10px; }
/* When open, the X sits over the overlay surface, not the header — so colour/bg/
   border default to the *mobile* link colour and the closed badge chrome. */
.core-menu-burger.active {
    color: var(--core-menu-burger-active-color, var(--core-menu-mobile-link-color, var(--core-menu-link-color, currentColor)));
    background: var(--core-menu-burger-active-bg, var(--core-menu-burger-bg, transparent));
    border: var(--core-menu-burger-active-border, var(--core-menu-burger-border, 0));
}
/* Morph to an X: outer bars slide to the centre line and rotate ±45°. */
.core-menu-burger.active .core-menu-burger-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.core-menu-burger.active .core-menu-burger-bar:nth-child(2) { opacity: 0; }
.core-menu-burger.active .core-menu-burger-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================== skin: horizontal ====================== */
/* Desktop (expanded) form — applies whenever NOT collapsed. */
.core-menu[data-skin="horizontal"]:not(.is-collapsed) .core-menu-body { display: flex; align-items: center; }
.core-menu[data-skin="horizontal"]:not(.is-collapsed) .core-menu-list[data-depth="1"] {
    display: flex;
    align-items: center;
    gap: var(--core-menu-gap, clamp(.5rem, 2vw, 2.5rem));
}
.core-menu[data-skin="horizontal"]:not(.is-collapsed) .core-menu-item {
    position: relative;
    display: flex;
    align-items: center;
}
.core-menu[data-skin="horizontal"]:not(.is-collapsed) .core-menu-panel {
    position: absolute;
    background: var(--core-menu-submenu-bg, #fff);
    box-shadow: var(--core-menu-submenu-shadow, var(--core-menu-panel-shadow, 0 8px 24px rgba(0,0,0,.12)));
    border-radius: var(--core-menu-submenu-radius, 0);
    padding: .5rem 0;
    min-width: 190px;
    width: max-content;
    max-width: 320px;
    z-index: 1000;
}
/* Desktop submenu links take their own colour/size over the dropdown background. */
.core-menu[data-skin="horizontal"]:not(.is-collapsed) .core-menu-panel .core-menu-link {
    color: var(--core-menu-submenu-link-color, var(--core-menu-link-color, currentColor));
    font-size: var(--core-menu-submenu-font-size, var(--core-menu-font-size, 1.1rem));
}
.core-menu[data-skin="horizontal"]:not(.is-collapsed) .core-menu-panel .core-menu-link:hover {
    color: var(--core-menu-submenu-link-hover-color, var(--core-menu-link-hover-color, var(--core-accent, currentColor)));
}
.core-menu[data-skin="horizontal"]:not(.is-collapsed) .core-menu-panel .core-menu-toggle {
    color: var(--core-menu-submenu-link-color, var(--core-menu-link-color, currentColor));
}
/* L2 panel drops below its parent; L3+ flies out to the side. */
.core-menu[data-skin="horizontal"]:not(.is-collapsed) .core-menu-item[data-depth="1"] > .core-menu-panel { top: 100%; left: 0; }
/* Optional up-caret from each L1 dropdown to its parent (panel_arrow=yes). */
.core-menu[data-skin="horizontal"]:not(.is-collapsed)[data-panel-arrow="yes"] .core-menu-item[data-depth="1"] > .core-menu-panel {
    margin-top: 11px;
}
.core-menu[data-skin="horizontal"]:not(.is-collapsed)[data-panel-arrow="yes"] .core-menu-item[data-depth="1"].has-submenu > .core-menu-link::before {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 14px;
}
.core-menu[data-skin="horizontal"]:not(.is-collapsed)[data-panel-arrow="yes"] .core-menu-item[data-depth="1"] > .core-menu-panel::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 22px;
    width: 14px;
    height: 7px;
    background: var(--core-menu-submenu-bg, #fff);
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
.core-menu[data-skin="horizontal"]:not(.is-collapsed) .core-menu-item:not([data-depth="1"]) > .core-menu-panel { top: 0; left: 100%; }
.core-menu[data-skin="horizontal"]:not(.is-collapsed) .core-menu-sublist { padding-left: 0; }
.core-menu[data-skin="horizontal"]:not(.is-collapsed) .core-menu-sublist .core-menu-item {
    padding: .35rem 1rem;
    justify-content: space-between;
}
/* Desktop hover-to-open — pure CSS, only on hover-capable pointers.
   :focus-within gives keyboard users the same open-on-focus behaviour. */
@media (hover: hover) and (pointer: fine) {
    .core-menu[data-skin="horizontal"]:not(.is-collapsed)[data-desktop-submenu^="hover"] .core-menu-item:hover > .core-menu-panel,
    .core-menu[data-skin="horizontal"]:not(.is-collapsed)[data-desktop-submenu^="hover"] .core-menu-item:focus-within > .core-menu-panel {
        display: block;
    }
    /* hover-no-chevron — drop the chevron where hover works (touch keeps it). */
    .core-menu[data-skin="horizontal"]:not(.is-collapsed)[data-desktop-submenu="hover-no-chevron"] .core-menu-toggle { display: none; }
    .core-menu[data-skin="horizontal"]:not(.is-collapsed)[data-desktop-submenu="hover-no-chevron"] .core-menu-grouptoggle .core-menu-chevron { display: none; }
}

/* ================================ skin: mega ========================== */
/* Inside a mega panel depth flattens: level-2 items are column headings and
   their level-3 lists are always shown (no nested toggling). */
.core-menu[data-skin="mega"] .core-menu-item[data-depth="2"] > .core-menu-toggle { display: none; }
.core-menu[data-skin="mega"] .core-menu-item[data-depth="2"] > .core-menu-grouptoggle .core-menu-chevron { display: none; }
.core-menu[data-skin="mega"] .core-menu-item[data-depth="2"] > .core-menu-panel { display: block; }

.core-menu[data-skin="mega"]:not(.is-collapsed) .core-menu-body { display: flex; align-items: center; }
.core-menu[data-skin="mega"]:not(.is-collapsed) .core-menu-list[data-depth="1"] {
    display: flex;
    align-items: center;
    gap: var(--core-menu-gap, clamp(.5rem, 2vw, 2.5rem));
}
/* L1 item static so its panel can stretch the full nav width. */
.core-menu[data-skin="mega"]:not(.is-collapsed) .core-menu-item[data-depth="1"] {
    position: static;
    display: flex;
    align-items: center;
}
.core-menu[data-skin="mega"]:not(.is-collapsed) .core-menu-item[data-depth="1"] > .core-menu-panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--core-menu-submenu-bg, #fff);
    box-shadow: var(--core-menu-submenu-shadow, var(--core-menu-panel-shadow, 0 8px 24px rgba(0,0,0,.12)));
    border-radius: var(--core-menu-submenu-radius, 0);
    padding: 1.5rem 2rem;
    z-index: 1000;
}
.core-menu[data-skin="mega"]:not(.is-collapsed) .core-menu-item[data-depth="1"] > .core-menu-panel .core-menu-link {
    color: var(--core-menu-submenu-link-color, var(--core-menu-link-color, currentColor));
    font-size: var(--core-menu-submenu-font-size, var(--core-menu-font-size, 1.1rem));
}
.core-menu[data-skin="mega"]:not(.is-collapsed) .core-menu-item[data-depth="1"] > .core-menu-panel .core-menu-link:hover {
    color: var(--core-menu-submenu-link-hover-color, var(--core-menu-link-hover-color, var(--core-accent, currentColor)));
}
/* L1 panel's list lays out as responsive columns. */
.core-menu[data-skin="mega"]:not(.is-collapsed) .core-menu-item[data-depth="1"] > .core-menu-panel > .core-menu-sublist {
    padding-left: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 1rem 2rem;
}
.core-menu[data-skin="mega"]:not(.is-collapsed) .core-menu-item[data-depth="2"] > .core-menu-link { font-weight: 600; }
@media (hover: hover) and (pointer: fine) {
    .core-menu[data-skin="mega"]:not(.is-collapsed)[data-desktop-submenu^="hover"] .core-menu-item[data-depth="1"]:hover > .core-menu-panel,
    .core-menu[data-skin="mega"]:not(.is-collapsed)[data-desktop-submenu^="hover"] .core-menu-item[data-depth="1"]:focus-within > .core-menu-panel {
        display: block;
    }
    .core-menu[data-skin="mega"]:not(.is-collapsed)[data-desktop-submenu="hover-no-chevron"] .core-menu-toggle { display: none; }
    .core-menu[data-skin="mega"]:not(.is-collapsed)[data-desktop-submenu="hover-no-chevron"] .core-menu-grouptoggle .core-menu-chevron { display: none; }
}

/* =============================== skin: sidebar ======================== */
/* The base form IS the sidebar: a vertical accordion column, always visible,
   no hamburger. Only the collapsed form (below the breakpoint) needs extra
   rules — those come from the shared .is-collapsed block below. */
/* Submenus expanded by default — sidebar is vertical when not collapsed. */
.core-menu[data-skin="sidebar"][data-submenus-open="yes"] .core-menu-panel { display: block; }
.core-menu[data-skin="sidebar"][data-submenus-open="yes"] .core-menu-toggle { display: none; }
.core-menu[data-skin="sidebar"][data-submenus-open="yes"] .core-menu-grouptoggle .core-menu-chevron { display: none; }

/* ================================ skin: flat ========================== */
/* Static skin — no chrome, no transformation, no JS. Submenus always open;
   layout owned by the site's custom_styles. Safe for footers and sitemaps. */
.core-menu[data-skin="flat"] .core-menu-panel { display: block; position: static; }
.core-menu[data-skin="flat"] .core-menu-extras { display: block; }

/* ===================== collapsed / mobile form ======================= */
/* Shared by the transforming skins (horizontal, mega, sidebar) once JS adds
   .is-collapsed at the breakpoint, AND by the drawer skin (always collapsed,
   data-mobile-presentation="drawer"). Two presentations: a fullscreen overlay
   or a side drawer — selected by [data-mobile-presentation]. */
.core-menu.is-collapsed .core-menu-burger { display: flex; position: relative; z-index: 1001; }
.core-menu.is-collapsed .core-menu-extras { display: block; margin-top: 30px; }
.core-menu.is-collapsed .core-menu-body {
    background: var(--core-menu-overlay-bg, #fff);
    padding: 84px 24px 15vh;
    box-sizing: border-box;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    z-index: 1000;
}
.core-menu.is-collapsed[data-mobile-presentation="overlay"] .core-menu-body {
    position: fixed;
    inset: 0;
    transition: opacity .3s ease, visibility .3s ease;
}
.core-menu.is-collapsed[data-mobile-presentation="drawer"] .core-menu-body {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(85vw, 360px);
    transform: translateX(100%);
    transition: transform .3s ease, opacity .3s ease, visibility .3s ease;
    box-shadow: -8px 0 24px rgba(0,0,0,.15);
}
.core-menu.is-collapsed.active .core-menu-body { opacity: 1; visibility: visible; }
.core-menu.is-collapsed.active[data-mobile-presentation="drawer"] .core-menu-body { transform: translateX(0); }
/* Submenus expanded by default (collapsed): show every panel, hide the expand
   controls (the group-parent label stays — only its chevron is hidden). */
.core-menu.is-collapsed[data-submenus-open="yes"] .core-menu-panel { display: block; }
.core-menu.is-collapsed[data-submenus-open="yes"] .core-menu-toggle { display: none; }
.core-menu.is-collapsed[data-submenus-open="yes"] .core-menu-grouptoggle .core-menu-chevron { display: none; }

/* Neat default presentation for the vertical collapsed body — comfortable tap
   targets, one row per item with the chevron pushed right, hairline dividers,
   indented accordion submenus. Every value is a --core-menu-* token with a
   sensible fallback, so a menu's own tokens (or custom_styles) still win. */
.core-menu.is-collapsed .core-menu-body .core-menu-list { display: block; }
.core-menu.is-collapsed .core-menu-body .core-menu-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    border-bottom: 1px solid var(--core-menu-mobile-divider, rgba(0,0,0,.08));
}
.core-menu.is-collapsed .core-menu-body .core-menu-link {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .4em;
    padding: var(--core-menu-mobile-link-pad, .85rem 0);
    /* Mobile sits in the overlay (--core-menu-overlay-bg); links take their own
       colour/size, each falling back to the desktop value when unset. */
    color: var(--core-menu-mobile-link-color, var(--core-menu-link-color, currentColor));
    font-size: var(--core-menu-mobile-font-size, var(--core-menu-font-size, 1.05rem));
}
.core-menu.is-collapsed .core-menu-body .core-menu-link:hover {
    color: var(--core-menu-mobile-link-hover-color, var(--core-menu-link-hover-color, var(--core-accent, currentColor)));
}
.core-menu.is-collapsed .core-menu-body .core-menu-toggle {
    flex: 0 0 auto;
    margin-left: auto;
    color: var(--core-menu-mobile-link-color, var(--core-menu-link-color, currentColor));
    /* Right padding 0 so the chevron sits flush to the row's right edge. */
    padding: .85rem 0 .85rem 1rem;
}
/* Pin an absolute chevron size in the mobile scope (still token-overridable) so
   both chevron kinds (group label button vs separate toggle) match. */
.core-menu.is-collapsed .core-menu-body .core-menu-chevron {
    width: var(--core-menu-chevron-size, .6rem);
    height: var(--core-menu-chevron-size, .6rem);
}
.core-menu.is-collapsed .core-menu-body .core-menu-panel {
    flex: 0 0 100%;
    width: 100%;
}
.core-menu.is-collapsed .core-menu-body .core-menu-sublist {
    /* Indent lives on the sub-links below, not here — so each sub-item's divider
       runs all the way to the left rule. */
    padding-left: 0;
    margin: 0 0 .4rem .15rem;
    border-left: 2px solid var(--core-menu-mobile-divider, rgba(0,0,0,.08));
}
.core-menu.is-collapsed .core-menu-body .core-menu-sublist .core-menu-link {
    color: var(--core-menu-mobile-submenu-link-color, var(--core-menu-mobile-link-color, var(--core-menu-link-color, currentColor)));
    font-size: var(--core-menu-mobile-submenu-font-size, var(--core-menu-mobile-font-size, var(--core-menu-font-size, .95rem)));
    padding: .55rem 0 .55rem 1rem;
    opacity: .78;
}
.core-menu.is-collapsed .core-menu-body .core-menu-sublist .core-menu-link:hover {
    color: var(--core-menu-mobile-submenu-link-hover-color, var(--core-menu-mobile-link-hover-color, var(--core-menu-link-hover-color, var(--core-accent, currentColor))));
}
.core-menu.is-collapsed .core-menu-body .core-menu-sublist .core-menu-toggle {
    padding-top: .55rem;
    padding-bottom: .55rem;
    color: var(--core-menu-mobile-submenu-link-color, var(--core-menu-mobile-link-color, var(--core-menu-link-color, currentColor)));
}
.core-menu.is-collapsed .core-menu-body .core-menu-sublist .core-menu-item:last-child { border-bottom: 0; }
.core-menu.is-collapsed .core-menu-body .core-menu-list[data-depth="1"] > .core-menu-item:last-child { border-bottom: 0; }