/* OHOHO CSS Framework v 2.0 - Osmo scaling + rem + 2025 optimisation */
/* ========================================================================== */
/* 1. Scaling System (Osmo Adapted for REM) - Self-Contained Unit */
/* ========================================================================== */
/* --- Breakpoint Refinement Notes ---
   The breakpoints below (e.g., 991px, 767px, 479px) are STARTING POINTS.
   AFTER designing/building, resize the browser window.
   OBSERVE where the content/layout looks awkward or breaks.
   ADJUST these breakpoint values (max-width) and the corresponding --size-container-* variables
   to fix issues AT THE WIDTHS WHERE THEY OCCUR, regardless of standard device sizes.
   Focus on CONTENT needs, not fixed device presets. */
/* ------------------------- Scaling Variables & Calculation ------------------------- */
/* Define base parameters and calculations */
:root {
    /* --- Configuration --- */
    /* Base font-size used in your design (usually 16) */
    --size-unit: 16;

    /* Ideal viewport width for the primary/desktop design (no px) */
    --size-container-ideal: 1440;

    /* Viewport width below which scaling behaviour might change or stop (defined per breakpoint) */
    --size-container-min: 992px;

    /* Viewport width above which scaling behaviour might change or stop (defined per breakpoint) */
    --size-container-max: 1920px;

    /* --- Core Calculation (Do not usually edit directly) --- */
    /* 1. Clamp the current viewport width (100vw) between the min/max bounds for this range */
    --_size-container-clamped: clamp(var(--size-container-min), 100vw, var(--size-container-max));

    /* 2. Calculate the scaling factor based on the clamped width vs the ideal width */
    --_scaling-factor: calc(var(--_size-container-clamped) / var(--size-container-ideal));

    /* 3. Calculate the final font-size in px (scaling factor * base unit size) */
    /* Multiply by 1px to ensure CSS treats the result as a length value. */
    --size-font: calc(var(--_scaling-factor) * var(--size-unit));
}

/* ------------------------- Breakpoint Adjustments ------------------------- */
/* Override scaling parameters for different viewport ranges */
/* Tablet */
@media screen and (max-width: 991px) {
    :root {
        /* --- Configuration for Tablet --- */
        --size-container-ideal: 834;

        /* Ideal design width for tablet */
        --size-container-min: 768px;

        /* Min viewport width for this range */
        --size-container-max: 991px;

        /* Max viewport width for this range */
        /* Calculation variables (--_size-container-clamped, --_scaling-factor, --size-font) automatically update */
    }
}

/* Mobile Landscape */
@media screen and (max-width: 767px) {
    :root {
        /* --- Configuration for Mobile Landscape --- */
        /* Note: Adjust --size-container-ideal based on your design target for this range */
        --size-container-ideal: 767;

        /* Example: Ideal design width near the top of this range */
        --size-container-min: 480px;

        /* Min viewport width for this range */
        --size-container-max: 767px;

        /* Max viewport width for this range */
        /* Calculation variables automatically update */
    }
}

/* Mobile Portrait */
@media screen and (max-width: 479px) {
    :root {
        /* --- Configuration for Mobile Portrait --- */
        /* Note: Adjust --size-container-ideal based on your design target for this range */
        --size-container-ideal: 479;

        /* Example: Ideal design width near the top of this range */
        --size-container-min: 320px;

        /* Set a reasonable minimum viewport size (e.g., common small phone width) */
        --size-container-max: 479px;

        /* Max viewport width for this range */
        /* Calculation variables automatically update */
    }
}

/* ========================================================================== */
/* 2. Resets & Base HTML Styles */
/* ========================================================================== */
/* Reset */
*,
*::before,
*::after {
    box-sizing: border-box;
    font-family: inherit;
    line-height: inherit;
    color: inherit;
}

/* Disable page to go overboard when scrolling */
:root {
    overscroll-behavior: none;
}

html {
    /* --- Apply the calculated font size to the HTML element --- */
    font-size: var(--size-font);
    width: 100%;
    min-height: -webkit-fill-available;
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
    text-rendering: optimizeLegibility;

    /* overflow: hidden */
}

/* Enable scroll on devices */
@media all and (max-width: 991px) {
    html {
        overflow-y: scroll !important;
        overflow-x: hidden !important;
    }

    body {
        overflow: auto !important;
    }
}

body {
    font-family: 'Museo Sans', 'Helvetica Neue', Arial, Helvetica, sans-serif;
    color: var(--dark);
    min-height: 100vh;
    min-height: 100svh;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Remove default margin in favour of better control in authored CSS */
body,
h1,
h2,
h3,
h4,
figure,
blockquote,
dl,
dd {
    margin: 0;
}

sub,
sup {
    font-size: 55%!important;
}

.superscript {
    vertical-align: super;
    font-size: 0.9rem;

    /* Optional: Make the text smaller */
    /* line-height: 0; */
    /* Sometimes needed to prevent affecting line spacing, but test carefully */
}

/* *******************************
Colors selection
******************************* */
/* Modern browsers */
::-moz-selection {
    color: var(--dark);
    background-color: var(--lightgreen);
}

::selection {
    color: var(--dark);
    background-color: var(--lightgreen);
}

/* Fallback for older browsers */
::-moz-selection {
    color: var(--dark);
    background-color: var(--lightgreen);
}

/* *******************************
Disable selection
******************************* */
.nosel {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* *******************************
Pointer events
******************************* */
/* Prevent all click and hover interaction with an element */
.pointer-events-off {
    pointer-events: none;
}

/* Enables all click and hover interaction with an element */
.pointer-events-on {
    pointer-events: auto;
}

/* ========================================================================== */
/* 3. Base Element Styles */
/* ========================================================================== */
/* *******************************
HTML Heading Tags
******************************* */
h1 {
    margin-top: 0;
    margin-bottom: 0;

    /* Base: 64px (4rem) */
    font-size: calc(var(--size-font) * 4);
    line-height: 1.1;
    font-family: 'Museo Sans';
    letter-spacing: -0.05em;
}

/* Add responsive overrides for h1 */
@media (max-width: 991px) {
    h1 {
        font-size: calc(var(--size-font) * 3.5);
        line-height: 1.1;
    }
}

@media (max-width: 767px) {
    h1 {
        font-size: calc(var(--size-font) * 3);
        line-height: 1.05;
    }
}

@media (max-width: 479px) {
    h1 {
        font-size: calc(var(--size-font) * 2.5);
        line-height: 1.05;
    }
}

h2 {
    margin-top: 0;
    margin-bottom: 0;

    /* Base: 48px (3rem) */
    font-size: calc(var(--size-font) * 3);
    line-height: 1.2;
    font-family: 'Museo Sans';
    letter-spacing: -0.03em;
}

/* Add responsive overrides for h2 */
@media (max-width: 991px) {
    h2 {
        font-size: calc(var(--size-font) * 2.5);
        line-height: 1.15;
    }
}

@media (max-width: 767px) {
    h2 {
        font-size: calc(var(--size-font) * 2);
        line-height: 1.15;
    }
}

@media (max-width: 479px) {
    h2 {
        font-size: calc(var(--size-font) * 1.75);
        line-height: 1.1;
    }
}

h3 {
    margin-top: 0;
    margin-bottom: 0;

    /* Base: 40px (2.5rem) */
    font-size: calc(var(--size-font) * 2.5);
    line-height: 1.2;
    font-family: 'Museo Sans';
    letter-spacing: -0.03em;
}

/* Add responsive overrides for h3 */
@media (max-width: 991px) {
    h3 {
        font-size: calc(var(--size-font) * 2);
        line-height: 1.2;
    }
}

@media (max-width: 767px) {
    h3 {
        font-size: calc(var(--size-font) * 1.75);
        line-height: 1.15;
    }
}

@media (max-width: 479px) {
    h3 {
        font-size: calc(var(--size-font) * 1.5);
        line-height: 1.15;
    }
}

h4 {
    margin-top: 0;
    margin-bottom: 0;

    /* Base: 32px (2rem) */
    font-size: calc(var(--size-font) * 2);
    line-height: 1.3;
    font-family: 'Museo Sans';
    letter-spacing: -0.018em;
}

/* Add responsive overrides for h4 */
@media (max-width: 991px) {
    h4 {
        font-size: calc(var(--size-font) * 1.75);
        line-height: 1.25;
    }
}

@media (max-width: 767px) {
    h4 {
        font-size: calc(var(--size-font) * 1.5);
        line-height: 1.2;
    }
}

@media (max-width: 479px) {
    h4 {
        font-size: calc(var(--size-font) * 1.25);
        line-height: 1.2;
    }
}

h5 {
    margin-top: 0;
    margin-bottom: 0;

    /* Base: 24px (1.5rem) */
    font-size: calc(var(--size-font) * 1.5);
    line-height: 1.4;
    font-family: 'Museo Sans';
    letter-spacing: -0.01em;
}

/* Add responsive overrides for h5 */
@media (max-width: 991px) {
    h5 {
        font-size: calc(var(--size-font) * 1.25);
        line-height: 1.35;
    }
}

@media (max-width: 767px) {
    h5 {
        font-size: calc(var(--size-font) * 1.125);
        line-height: 1.3;
    }
}

@media (max-width: 479px) {
    h5 {
        font-size: calc(var(--size-font) * 1);
        line-height: 1.3;
    }
}

h6 {
    margin-top: 0;
    margin-bottom: 0;

    /* Base: 20px (1.25rem) */
    font-size: calc(var(--size-font) * 1.25);
    line-height: 1.4;
    font-family: 'Museo Sans';
}

/* Add responsive overrides for h6 */
@media (max-width: 991px) {
    h6 {
        font-size: calc(var(--size-font) * 1.125);
        line-height: 1.4;
    }
}

@media (max-width: 767px) {
    h6 {
        font-size: calc(var(--size-font) * 1);
        line-height: 1.4;
    }
}

@media (max-width: 479px) {
    h6 {
        font-size: calc(var(--size-font) * 1);
        line-height: 1.4;
    }
}

/* Balance text wrapping on headings */
h1,
h2,
h3,
h4 {
    /* text-wrap: balance */
}

/* *******************************
Other HTML Tags
******************************* */
/* A elements that don't have a class get default styles */
/* a:not([class]) {
    text-decoration-skip-ink: auto;
    color: currentColor;
} */
a {
    text-decoration: none;
    color: currentColor;
    cursor: pointer!important;
}

p {
    margin-bottom: calc(var(--spacer-base) * 2);
    margin-top: 0;

    /* text-wrap: balance */
    text-wrap: pretty;
}

p:empty {
    display: none;
}

p+p:last-child {
    margin-bottom: 0;
}

p:last-child:only-child {
    margin-bottom: 0;
}

.margin-p p {
    margin-bottom: calc(var(--spacer-base) * 3);
}

/* ========================================================================== */
/* List Styling */
/* ========================================================================== */
/* Remove list styles on ul, ol elements explicitly marked for presentation */
ul[role='list'],
ol[role='list'] {
    list-style: none;
    padding-left: 0;
    margin-block-start: 0;

    /* Use logical properties for margins */
    margin-block-end: 0;
}

/* Default UL styling */
ul {
    /* Remove browser default margins */
    margin-block-start: 0;

    /* margin-block-end: calc(var(--spacer-base) * 3) */
    /* Add consistent space after lists */
    /* Remove default padding and bullets */
    padding-inline-start: 0;

    /* Use logical property for padding */
    list-style: none;

    /* No bullets by default */
    /* Note: If you WANT default bullets/padding, change to: */
    /* padding-inline-start: 1.5rem; */
    /* Or desired indent */
    /* list-style: disc outside; */
    /* Or desired bullet type */
}

/* Default OL styling (add if needed, often inherits from ul or needs specific counters) */
ol {
    margin-block-start: 0;
    margin-block-end: calc(var(--spacer-base) * 3);
    padding-inline-start: calc(var(--spacer-base) * 3);

    /* Typically keep padding for numbers */
    /* list-style: decimal outside; */
    /* Browser default is usually fine */
}

/* Default LI styling */
li {
    /* margin-bottom: 0.25rem; */
    /* Optional: Add space between list items */
    /* text-indent is usually not needed unless manipulating list markers heavily */
}

/* Utility class to remove list styling */
.no-bullets {
    /* Renamed from .nobullet for clarity */
    list-style: none;
    padding-inline-start: 0;
    margin-block-start: 0;
    margin-block-end: 0;
}

/* -- Bold/Strong Weight -- */
b,
strong {
    font-family: 'Museo Sans';
    font-weight: 700;
}

/* ========================================================================== */
/* Image & SVG Styling */
/* ========================================================================== */
img,
svg {
    /* Apply common styles to both */
    display: block;

    /* Prevents extra space below image */
    max-width: 100%;

    /* Essential for responsiveness */
    height: auto;

    /* Maintain aspect ratio */
}

img {
    /* If no image loaded, style alt text */
    font-style: italic;

    /* Optional: Improve broken image experience */
    /* background-color: #eee; */
}

/* Prevent dragging and selection (usually desired for decorative images) */
img,
svg {
    /* Apply to both if needed */
    -webkit-user-drag: none;
    user-drag: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;

    /* Prevent menu on long press iOS */
}

/* Remove selection background */
img::-moz-selection,
svg::-moz-selection {
    background: transparent;
}

img::selection,
svg::selection {
    background: transparent;
}

/* Utility for full container cover */
.fullimg {
    width: 100%;
    height: 100%;
    object-fit: cover;

    /* Scale while preserving aspect ratio to fill */
}

/* SVG transform origin */
svg * {
    /* display: block; */
}

/* *******************************
Blockquote styles
******************************* */
blockquote {
    margin-bottom: 0;

    /* Keep using mb-* utilities if preferred */
    /* padding: 0 1.25rem; */
    padding-left: calc(var(--spacer-base) * 2.5);

    /* 1.25rem */
    padding-right: calc(var(--spacer-base) * 2.5);

    /* 1.25rem */
    /* border-left: 0.25rem solid #e2e2e2; */
    border-left-width: calc(var(--spacer-base) * 0.5);

    /* 0.25rem / 4px */
    border-left-style: solid;
    border-left-color: var(--dark);

    /* font-size: 1.25rem; */
    font-size: calc(var(--size-font) * 1.25);

    /* Matches .text-size-medium base */
    line-height: 1.5;
}

/* *******************************
Blog Rich Styles
******************************* */
/* .rich-text h1 {
  font-size: 4.25rem;
  font-weight: 600;
  display: inline-block;
  margin-bottom: 1.5rem;
  text-transform: uppercase;
  max-width: 20ch;
  position: relative;
  left: -0.3rem;
  line-height: 1.1;
} */
/* .rich-text h2 {
  font-size: 1.625rem;
  font-weight: 500;
  margin-bottom: 1.5rem;
  margin-top: 1rem;
  line-height: 1.3;
}

.rich-text h3 {
  font-size: 1.375rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
}

.rich-text p {
  margin-bottom: 1.8rem;
  font-size: 1.125rem;
} */
/* Unordered Lists */
.rich-text ul {
    margin-bottom: 1.8rem;
    padding-left: 1.5rem;

    /* font-size: 1.125rem; */
}

.rich-text ul li {
    margin-bottom: 0.5rem;
    list-style-type: disc;
}

.rich-text ul ul {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    padding-left: 1.25rem;
}

.rich-text ul ul li {
    list-style-type: circle;
}

.rich-text ul ul ul li {
    list-style-type: square;
}

/* Ordered Lists */
.rich-text ol {
    margin-bottom: 1.8rem;
    padding-left: 1.5rem;

    /* font-size: 1.125rem; */
}

.rich-text ol li {
    margin-bottom: 0.5rem;
    list-style-type: decimal;
}

.rich-text ol ol {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    padding-left: 1.25rem;
}

.rich-text ol ol li {
    list-style-type: lower-alpha;
}

.rich-text ol ol ol li {
    list-style-type: lower-roman;
}

/* Mixed nested lists */
.rich-text ul ol li {
    list-style-type: decimal;
}

.rich-text ol ul li {
    list-style-type: disc;
}

/* @media (max-width: 479px) {
  .rich-text p {
    font-size: 1.25rem;
  }
  .rich-text h1 {
    font-size: 2.8rem;
  }
  .rich-text h2 {
    line-height: 1.5;
  }
  .rich-text > ul,
  .rich-text > ol {
    font-size: 1.25rem;
  }
} */
/* .rich-text h3:first-child {
  margin-top: 1.5rem;
}

.rich-text a {
  color: var(--red);
  text-decoration: underline;
} */
/* *******************************
Figure styles
******************************* */
/* figure {
    display: flex;
    align-items: flex-start;
    flex-direction: column;

    ||*| margin-top: 2rem; |*||
    /* margin-bottom: 2.4rem */
/* margin-left: 1rem */
.rich-text>p>img {
    margin-bottom: calc(var(--spacer-base) * 4);
    margin-left: calc(var(--spacer-base) * 2);
}

@media (max-width: 479px) {
    .rich-text>p>img {
        margin-bottom: calc(var(--spacer-base) * 6);
        margin-left: 0;
    }
}

.aligncenter {
    width: 100% !important;
}

figure img {
    width: 100%;
    height: 100%;

    /* object-fit: cover */
}

figcaption {
    /* margin-top: -0.625rem */
    text-align: left;
    color: var(--dark);

    /* text-transform: uppercase */
    position: relative;
    z-index: 2;

    /* max-width: 60%; */
}

/* ========================================================================== */
/* 4. Layout & Structure Classes */
/* ========================================================================== */
/* *******************************
Structure Classes
******************************* */
.container-small {
    width: 100%;
    max-width: 48rem;

    /* Scales with --size-font */
    margin-right: auto;
    margin-left: auto;
}

.container-medium {
    width: 100%;

    /* max-width: 80rem */
    /* Scales with --size-font */
    margin-right: auto;
    margin-left: auto;
}

.container-large {
    width: 100%;

    /* max-width: 80rem */
    /* Example: Increased from 64/70rem, scales with --size-font */
    margin-right: auto;
    margin-left: auto;
}

/* Global horizontal padding */
.padding-global {
    /* Base: 2rem (32px) */
    padding-right: calc(var(--spacer-base) * 1.5);
    padding-left: calc(var(--spacer-base) * 1.5);
}

/* Section vertical padding presets */
.padding-section-small {
    /* Base: 2rem (32px) top/bottom */
    padding-top: calc(var(--spacer-base) * 4);
    padding-bottom: calc(var(--spacer-base) * 4);
}

.padding-section-medium {
    /* Base: 2rem (32px) top, 5rem (80px) bottom */
    padding-top: calc(var(--spacer-base) * 4);
    padding-bottom: calc(var(--spacer-base) * 10);
}

.padding-section-large {
    /* Base: 4rem (64px) top/bottom */
    padding-top: calc(var(--spacer-base) * 8);
    padding-bottom: calc(var(--spacer-base) * 8);
}

/* --- Responsive Adjustments for Section Padding --- */
@media (max-width: 991px) {
    /* Tablet */
    .padding-global {
        /* Tablet: 1.5rem (24px) */
        padding-right: calc(var(--spacer-base) * 6);
        padding-left: calc(var(--spacer-base) * 6);
    }

    .padding-section-small {
        /* Tablet: 1.5rem (24px) */
        padding-top: calc(var(--spacer-base) * 3);
        padding-bottom: calc(var(--spacer-base) * 3);
    }

    .padding-section-medium {
        /* Tablet: 2rem (32px) top, 4rem (64px) bottom */
        padding-top: calc(var(--spacer-base) * 4);
        padding-bottom: calc(var(--spacer-base) * 8);
    }

    .padding-section-large {
        /* Tablet: 3rem (48px) */
        padding-top: calc(var(--spacer-base) * 6);
        padding-bottom: calc(var(--spacer-base) * 6);
    }
}

@media (max-width: 767px) {
    /* Mobile Landscape */
    /* .padding-global {
        Mobile: 1rem (16px);
        padding-right: calc(var(--spacer-base) * 4);
        padding-left: calc(var(--spacer-base) * 4);
    } */
    .padding-section-small {
        /* Mobile L: 1rem (16px) */
        padding-top: calc(var(--spacer-base) * 2);
        padding-bottom: calc(var(--spacer-base) * 2);
    }

    .padding-section-medium {
        /* Mobile L: 1.5rem (24px) top, 3rem (48px) bottom */
        padding-top: calc(var(--spacer-base) * 3);
        padding-bottom: calc(var(--spacer-base) * 6);
    }

    .padding-section-large {
        /* Mobile L: 2rem (32px) */
        padding-top: calc(var(--spacer-base) * 4);
        padding-bottom: calc(var(--spacer-base) * 4);
    }
}

/* Mobile Portrait (max-width: 479px) often uses the same as Mobile Landscape */
/* Add specific overrides below if needed */
/* @media (max-width: 479px) {
    .padding-global {
        padding-right: calc(var(--spacer-base) * 2);
        padding-left: calc(var(--spacer-base) * 2);
    }
    ...etc
} */
/* *******************************
12 Column grid
******************************* */
.grid-main {
    display: grid;
    width: 100%;
    position: relative;

    /* Keep if needed for child positioning */
    /* Define grid properties using variables */
    --grid-main-columns: 12;

    /* Default gap: 1.25rem (20px) */
    grid-template-columns: repeat(var(--grid-main-columns), 1fr);
    column-gap: calc(var(--spacer-base) * 6);
    row-gap: calc(var(--spacer-base) * 3);
}

/* Responsive adjustments */
/* Tablet */
@media (max-width: 991px) {
    .grid-main {
        --grid-main-columns: 6;
        column-gap: calc(var(--spacer-base) * 3);

        /* Switch to 8 columns */
        /* Tablet gap: 1.5rem (24px) */
        /* --grid-main-gap: calc(var(--spacer-base) * 2); */
    }
}

/* Mobile Landscape */
@media (max-width: 767px) {
    .grid-main {
        /* Keep 8 columns or switch to 6? Let's try 6 */
        /* --grid-main-columns: 6 */
        Mobile: 1rem (16px);
        --grid-main-gap: calc(var(--spacer-base) * 2);
    }
}

/* Mobile Portrait */
@media (max-width: 479px) {
    .grid-main {
        /* --grid-main-columns: 4 */
        /* Switch to 4 columns */
        /* Mobile Portrait gap: 1rem (16px) */
        /* --grid-main-gap: calc(var(--spacer-base) * 2) */
    }
}

/* Modifier for a truly gapless grid (removes row and column gap) */
.grid-main.is-gapless {
    --grid-main-gap: 0;

    /* Set gap variable to 0 */
    /* Or directly: gap: 0; if not using variables */
}

/* Optional modifier to only remove column gap */
.grid-main.is-column-gapless {
    column-gap: 0;

    /* Keep row-gap from the base 'gap' property */
    /* Note: This overrides the --grid-main-gap variable for column-gap only */
    row-gap: var(--grid-main-gap);

    /* Explicitly set row-gap using the variable */
}

/* --- How to use grid-area now? --- */
/* Apply placement styles separately, e.g.: */
/* .my-grid-item {
    grid-column: span 4; // Span 4 columns in the current grid
}

.my-specific-section .my-grid-item {
    grid-column: 4 / 12; // Place from column line 4 to 12 (on desktop)
}

@media (max-width: 991px) {
    .my-specific-section .my-grid-item {
       grid-column: 2 / 8; // Adjust placement for 8-column tablet grid
    }
}
@media (max-width: 479px) {
    .my-specific-section .my-grid-item {
       grid-column: 1 / 5; // Adjust placement for 4-column mobile grid (full width)
    }
} */
/* ========================================================================== */
/* Aspect Ratio Utilities + Fallback */
/* ========================================================================== */
/* --- Base Aspect Ratio Container Styles --- */
.aspect-vertical,
.aspect-horizontal,
.aspect-square {
    /* Renamed from .aspect-quad */
    position: relative;
    display: block;

    /* Ensure it behaves as a block */
    width: 100%;
    overflow: hidden;

    /* Clip contents */
}

/* --- Modern Aspect Ratio Definitions --- */
.aspect-vertical {
    aspect-ratio: 4 / 5;
}

.aspect-horizontal {
    aspect-ratio: 16 / 10;

    /* Or 1.6 or 8/5 */
}

.aspect-square {
    /* Renamed from .aspect-quad */
    aspect-ratio: 1 / 1;
}

/* --- Child Element Styling (Needed for Fallback) --- */
/* Apply this class to the direct child (e.g., <img>, <video>, <iframe>) */
.aspect-content {
    /* Renamed from .aspect-image for more general use */
    display: block;

    /* Ensure it's a block */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;

    /* Default fit behavior */
}

/* --- Fallback using Padding Hack --- */
/* Fallback for Vertical (4:5 -> 5/4 = 125%) */
@supports not (aspect-ratio: 4 / 5) {
    .aspect-vertical {
        height: 0;

        /* Collapse height before padding */
        padding-top: 125%;
        overflow: hidden;

        /* Ensure overflow hidden in fallback */
    }
}

/* Fallback for Horizontal (16:10 -> 10/16 = 62.5%) */
@supports not (aspect-ratio: 16 / 10) {
    .aspect-horizontal {
        height: 0;
        padding-top: 62.5%;
        overflow: hidden;
    }
}

/* Fallback for Square (1:1 -> 1/1 = 100%) */
@supports not (aspect-ratio: 1 / 1) {
    .aspect-square {
        /* Renamed from .aspect-quad */
        height: 0;
        padding-top: 100%;
        overflow: hidden;
    }
}

/* ========================================================================== */
/* 5. Form Styling (Consolidated) */
/* ========================================================================== */
/* -- General Form Control Enhancements -- */
/* Inherit fonts for better consistency */
button,
input,
textarea,
select {
    font: inherit;
    color: inherit;
    margin: 0;

    /* Consider adding vertical-align: middle; for inline-block elements */
}

/* Make labels block elements for better spacing */
label {
    display: block;

    /* margin-bottom: 0.5rem; */
    margin-bottom: calc(var(--spacer-base) * 1);

    /* 0.5rem - or use mb-1 utility */
    /* Optional: font-weight: 500; */
}

/* Style for other general form controls (like text inputs) */
/* Consider renaming if it's not just for checkboxes */
.form-control {
    /* Assuming this is intended for text inputs, etc., not the custom checkbox itself */
    font-family: 'Museo Sans', 'Helvetica Neue', Arial, Helvetica, sans-serif;

    /* Explicit font can override inherit if needed */
    font-size: 1rem;
    font-variation-settings: "wght" 500;
    line-height: 1.1;
}

/* -- Text Inputs & Textareas -- */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="number"],
textarea,
select {
    /* Apply common styles */
    display: block;

    /* Take full width */
    width: 100%;

    /* padding: 0.75rem 1rem */
    padding: calc(var(--spacer-base) * 2) calc(var(--spacer-base) * 2);

    /* 0.75rem 1rem */
    /* margin-bottom: 1rem */
    margin-bottom: calc(var(--spacer-base) * 2);

    /* 1rem - or use mb-2 utility */
    line-height: inherit;

    /* Use body line-height */
    background-color: transparent;

    /* Default transparent background */
    border: 0px solid currentColor;

    /* Simple border using inherited color - 1px OK */
    /* border-radius: 0.25rem; */
    /* border-radius: calc(var(--spacer-base) * 0.5) */
    /* 0.25rem / 4px */
    /* Optional: Define a specific color using var(--dark) or var(--grey) if preferred */
    /* border-color: var(--grey); */
    /* color: var(--dark); */
    /* Basic transition for focus */
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

/* Style for textareas */
textarea {
    /* min-height: 8rem; */
    min-height: calc(var(--spacer-base) * 16);

    /* 8rem / 128px */
    resize: vertical;

    /* Allow vertical resizing */
}




/* Placeholder text styling */
input::placeholder,
textarea::placeholder {
    color: currentColor;

    /* Use inherited color */
    opacity: 0.6;

    /* Make it less prominent */
}

/* Select dropdown arrow - basic attempt, browser styling varies wildly */
select {
    appearance: none;

    /* Remove default arrow */
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3E%3Cpath d='M8 11.5a.5.5 0 0 1-.354-.146l-4-4a.5.5 0 0 1 .708-.708L8 10.293l3.646-3.647a.5.5 0 0 1 .708.708l-4 4A.5.5 0 0 1 8 11.5z'/%3E%3C/svg%3E");

    /* Basic SVG arrow */
    background-repeat: no-repeat;

    /* background-position: right 0.75rem center; */
    background-position: right calc(var(--spacer-base) * 1.5) center;

    /* right 0.75rem center */
    background-size: 1em 1em;

    /* OK */
    /* padding-right: 2.5rem; */
    padding-right: calc(var(--spacer-base) * 5);

    /* 2.5rem / 40px */
}

/* -- Custom Radio Button Styling -- */
/* Wrapper for radio and label (similar to checkbox) */
.custom-radio {
    display: inline-flex;
    align-items: center;
    cursor: pointer;

    /* gap: 0.5rem; */
    gap: calc(var(--spacer-base) * 1);

    /* 0.5rem */
    /* margin-bottom: 0.5rem; */
    margin-bottom: calc(var(--spacer-base) * 1);

    /* 0.5rem - or use mb-1 utility */
    /* vertical-align: middle; */
}

/* The radio input itself */
input[type="radio"] {
    /* Reset default appearance */
    appearance: none;
    -webkit-appearance: none;
    background-color: transparent;
    margin: 0;

    /* Inherit text color */
    color: currentColor;

    /* Dimensions and shape */
    width: 1.5em;

    /* OK */
    height: 1.5em;

    /* OK */
    border: 1px solid currentColor;

    /* OK */
    border-radius: 50%;

    /* Make it round */
    /* Positioning & Dot Alignment */
    transform: translateY(-0.075em);

    /* OK */
    display: grid;
    place-content: center;
}

/* The pseudo-element used for the inner dot */
input[type="radio"]::before {
    content: "";
    width: 0.75em;

    /* Size of the inner dot - OK */
    height: 0.75em;

    /* OK */
    border-radius: 50%;

    /* OK */
    transform: scale(0);

    /* Hidden by default */
    transition: 120ms transform ease-in-out;
    box-shadow: inset 1em 1em var(--dark);

    /* Color of the dot - OK */
    /* Note: box-shadow is used here like checkbox, alternative is background-color */
    /* background-color: var(--dark); */
}

/* Style for the checked state */
input[type="radio"]:checked::before {
    transform: scale(1);

    /* Show the dot */
}

/* Focus style for radio buttons */
input[type="radio"]:focus-visible {
    outline: 2px solid dodgerblue;

    /* Use your standard focus style - px OK */
    outline-offset: 2px;

    /* px OK */
}

/* Validation state for radio buttons */
input[type="radio"].is-invalid {
    border-color: red;
}

/* -- Custom Checkbox Styling -- */
/* Wrapper for checkbox and label */
.custom-checkbox {
    display: inline-flex;

    /* Use inline-flex to flow with text */
    align-items: center;
    cursor: pointer;

    /* gap: 0.5rem; */
    gap: calc(var(--spacer-base) * 1);

    /* 0.5rem */
    /* margin-bottom: 0.5rem; */
    margin-bottom: calc(var(--spacer-base) * 1);

    /* 0.5rem - or use mb-1 utility */
    /* Adjust vertical alignment if needed, e.g., vertical-align: middle; */
}

/* The custom checkbox input itself */
input[type="checkbox"] {
    /* Reset default appearance */
    appearance: none;
    -webkit-appearance: none;

    /* Ensure Safari compatibility */
    background-color: transparent;
    margin: 0;

    /* Remove default margin */
    /* Inherit text color for border/check */
    color: currentColor;

    /* Dimensions (using relative units) */
    width: 1.5em;

    /* Use em for size relative to surrounding text */
    height: 1.5em;

    /* Border */
    border: 1px solid currentColor;

    /* Use a sensible default thickness */
    /* Optional: border-radius: 0.15em; */
    /* Positioning & Checkmark Alignment */
    transform: translateY(-0.075em);

    /* Fine-tune vertical alignment */
    display: grid;
    place-content: center;
}

/* The pseudo-element used for the checkmark */
input[type="checkbox"]::before {
    content: "";
    width: 1em;

    /* Slightly smaller than the box */
    height: 1em;
    transform: scale(0);

    /* Hidden by default */
    transition: 120ms transform ease-in-out;

    /* Use box-shadow to create the checkmark color block */
    box-shadow: inset 1em 1em var(--dark);

    /* Or use currentColor or a specific variable */
    /* Optional: Create a checkmark shape using clip-path */
    /* clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); */
}

/* Style for the checked state */
input[type="checkbox"]:checked::before {
    transform: scale(1);

    /* Show the checkmark */
}

/* Focus style for checkboxes */
input[type="checkbox"]:focus-visible {
    outline: 2px solid dodgerblue;

    /* Or your brand's focus color */
    outline-offset: 2px;
}

/* Validation state for checkboxes */
input[type="checkbox"].is-invalid {
    border-color: red;

    /* Change border color for error */
    /* Optionally change checkmark color too */
    /* color: red; */
}

/* If you prefer a box-shadow for errors (doesn't affect layout): */
/* input[type="checkbox"].is-invalid {
    box-shadow: 0 0 0 2px red;
} */
/* -- WebKit Autocomplete Style Override -- */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--dark);

    /* Or currentColor or specific form text color */
    -webkit-box-shadow: 0 0 0px 1000px transparent inset;

    /* Keep background transparent */
    transition: background-color 5000s ease-in-out 0s;
    font-size: inherit;

    /* Ensure autofill doesn't change font size */
}

/* -- Form Messages -- */
.form-message {
    /* padding: 0.75rem 1rem; */
    padding: calc(var(--spacer-base) * 1.5) calc(var(--spacer-base) * 2);

    /* 0.75rem 1rem */
    /* margin-top: 1rem; */
    margin-top: calc(var(--spacer-base) * 2);

    /* 1rem - or use mt-2 utility */
    /* margin-bottom: 1rem; */
    margin-bottom: calc(var(--spacer-base) * 2);

    /* 1rem - or use mb-2 utility */
    /* border-radius: 0.25rem; */
    border-radius: calc(var(--spacer-base) * 0.5);

    /* 0.25rem / 4px */
    border: 1px solid transparent;

    /* Base border - 1px OK */
}

.form-message.is-success {
    color: #0f5132;

    /* Dark green text */
    background-color: #d1e7dd;

    /* Light green background */
    border-color: #badbcc;

    /* Slightly darker border */
    /* Or use your CSS Variables if defined */
    /* color: var(--color-success-dark); */
    /* background-color: var(--color-success-light); */
    /* border-color: var(--color-success-border); */
}

.form-message.is-error {
    color: #842029;

    /* Dark red text */
    background-color: #f8d7da;

    /* Light red background */
    border-color: #f5c2c7;

    /* Slightly darker border */
    /* Or use your CSS Variables if defined */
    /* color: var(--color-error-dark); */
    /* background-color: var(--color-error-light); */
    /* border-color: var(--color-error-border); */
}

/* -- Fieldset & Legend (Optional but good practice) -- */
fieldset {
    border: 1px solid currentColor;

    /* Simple border - 1px OK */
    /* padding: 1.5rem; */
    padding: calc(var(--spacer-base) * 3);

    /* 1.5rem */
    /* margin-bottom: 1rem; */
    margin-bottom: calc(var(--spacer-base) * 2);

    /* 1rem - or use mb-2 utility */
    /* border-radius: 0.25rem; */
    border-radius: calc(var(--spacer-base) * 0.5);

    /* 0.25rem / 4px */
}

legend {
    /* padding: 0 0.5rem; */
    padding-left: calc(var(--spacer-base) * 1);

    /* 0.5rem */
    padding-right: calc(var(--spacer-base) * 1);

    /* 0.5rem */
    font-family: 'Museo Sans';
    font-weight: 500;

    /* margin-left: 1rem; */
    /* Optional indent */
}

/* ========================================================================== */
/* 6. Components */
/* ========================================================================== */
/* *******************************
Buttons
******************************* */
.button-group {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: calc(var(--spacer-base) * 2);

    /* 1rem */
}

.button {
    background-color: var(--dark);
    color: var(--white);
    padding: 0.5ch 1.25ch;
    border: none;

    /* border-radius: 0.4rem; */
    border-radius: calc(var(--spacer-base) * 0.5);

    /* Align with 8px grid (or 0.25rem for 4px) */
    cursor: pointer;
    font-size: 0.875rem;

    /* OK */
    letter-spacing: 0.018em;
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.3s ease, color 0.3s ease;
    justify-self: start;
    align-self: start;
    cursor: pointer;
}

.button:hover {
    background-color: var(--white);
    color: var(--dark);
}

.button.is-pill {
    padding: 0.4ch 1.3ch 0.4ch;

    /* ch units fine */
    letter-spacing: 0.015em;
    color: var(--dark);
    text-align: center;
    height: 2rem;

    /* OK */
    font-size: 1rem;

    /* OK */
    cursor: pointer;
    text-transform: uppercase;
    border-radius: 9999px;

    /* Common practice for pills */
    border: 1px solid var(--dark);

    /* 1px OK */
    outline: 1px solid transparent;

    /* 1px OK */
    box-shadow: 0 0 1px rgba(255, 255, 255, 0);
}

.button.is-text {
    border: 2px solid transparent;

    /* px OK for borders */
    background-color: transparent;
    color: var(--dark);
}

.button.is-small {
    /* padding: 0.5rem 1.25rem; */
    padding: calc(var(--spacer-base) * 1) calc(var(--spacer-base) * 2.5);

    /* 0.5rem 1.25rem */
}

.button.is-large {
    /* padding: 1rem 2rem; */
    padding: calc(var(--spacer-base) * 2) calc(var(--spacer-base) * 4);

    /* 1rem 2rem */
}

.button.is-secondary {
    border-style: solid;

    /* border-width: 2px 2px 0.125rem */
    /* This looks odd, assuming 2px */
    border-width: 1px;

    /* px OK */
    border-color: var(--dark);
    background-color: transparent;
    color: var(--dark);
}

.button.is-icon {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    /* grid-column-gap: 1rem; */
    /* grid-row-gap: 1rem; */
    gap: calc(var(--spacer-base) * 2);

    /* 1rem */
    text-decoration: none;
}

/* ========================================================================== */
/* 7. Utility Classes */
/* ========================================================================== */
/* *******************************
Heading Styles (Utility Classes)
******************************* */
.heading-style-h0 {
    /* Desktop: 112px (7rem) */
    font-size: calc(var(--size-font) * 7);
    line-height: 0.95;
    letter-spacing: -0.06em;
}

@media (max-width: 991px) {
    .heading-style-h0 {
        /* Tablet: 96px (6rem) */
        font-size: calc(var(--size-font) * 6);
        line-height: 0.95;
    }
}

@media (max-width: 767px) {
    .heading-style-h0 {
        /* Mobile Landscape: 80px (5rem) */
        font-size: calc(var(--size-font) * 5);
        line-height: 1.0;
    }
}

@media (max-width: 479px) {
    .heading-style-h0 {
        /* Mobile Portrait: 64px (4rem) */
        font-size: calc(var(--size-font) * 4);
        line-height: 1.05;
    }
}

.heading-style-h1 {
    /* Desktop: 80px (5rem) */
    font-size: calc(var(--size-font) * 4.76);
    line-height: 0.95;
    letter-spacing: -0.04em;
}

@media (max-width: 991px) {
    .heading-style-h1 {
        /* Tablet: 80px (5rem) */
        font-size: calc(var(--size-font) * 5);
        line-height: 1.0;
    }
}

@media (max-width: 767px) {
    .heading-style-h1 {
        /* Mobile Landscape: 64px (4rem) */
        font-size: calc(var(--size-font) * 4);
        line-height: 1.05;
    }
}

@media (max-width: 479px) {
    .heading-style-h1 {
        /* Mobile Portrait: 48px (3rem) */
        font-size: calc(var(--size-font) * 3);
        line-height: 1.1;
    }
}

.heading-style-h2 {
    /* Base: 80px (5rem) */
    font-size: calc(var(--size-font) * 5);
    line-height: 1.05;
    letter-spacing: -0.03em;
}

@media (max-width: 991px) {
    .heading-style-h2 {
        /* Tablet: 64px (4rem) */
        font-size: calc(var(--size-font) * 4);
        line-height: 1.1;
    }
}

@media (max-width: 767px) {
    .heading-style-h2 {
        /* Mobile Landscape: 48px (3rem) */
        font-size: calc(var(--size-font) * 3);
        line-height: 1.15;
    }
}

@media (max-width: 479px) {
    .heading-style-h2 {
        /* Mobile Portrait: 40px (2.5rem) */
        font-size: calc(var(--size-font) * 2.5);
        line-height: 1.15;
    }
}

.heading-style-h3 {
    /* Base: 64px (4rem) */
    font-size: calc(var(--size-font) * 4);
    line-height: 1.2;
    letter-spacing: -0.03em;
}

@media (max-width: 991px) {
    .heading-style-h3 {
        /* Tablet: 48px (3rem) */
        font-size: calc(var(--size-font) * 3);
        line-height: 1.15;
    }
}

@media (max-width: 767px) {
    .heading-style-h3 {
        /* Mobile Landscape: 40px (2.5rem) */
        font-size: calc(var(--size-font) * 2.5);
        line-height: 1.2;
    }
}

@media (max-width: 479px) {
    .heading-style-h3 {
        /* Mobile Portrait: 32px (2rem) */
        font-size: calc(var(--size-font) * 2);
        line-height: 1.2;
    }
}

.heading-style-h4 {
    /* Base: 32px (2rem) */
    font-size: calc(var(--size-font) * 2);
    line-height: 1.25;
    letter-spacing: -0.018em;
}

@media (max-width: 991px) {
    .heading-style-h4 {
        /* Tablet: 32px (2rem) */
        font-size: calc(var(--size-font) * 2);
        line-height: 1.25;
    }
}

@media (max-width: 767px) {
    /* .heading-style-h4 {
        ||*| Mobile Landscape: 24px (1.5rem) |*||
        font-size: calc(var(--size-font) * 1.5);
        line-height: 1.3;
    } */
}

@media (max-width: 479px) {
    .heading-style-h4 {
        /* Mobile Portrait: 24px (1.5rem) */
        font-size: calc(var(--size-font) * 1.5);
        line-height: 1.3;
    }
}

.heading-style-h5 {
    /* Base: 24px (1.5rem) */
    font-size: calc(var(--size-font) * 1.5);
    line-height: 1.4;
    font-variation-settings: "wght" 500;
    letter-spacing: -0.01em;
}

@media (max-width: 991px) {
    .heading-style-h5 {
        /* Tablet: 24px (1.5rem) */
        font-size: calc(var(--size-font) * 1.5);
        line-height: 1.4;
    }
}

@media (max-width: 767px) {
    .heading-style-h5 {
        /* Mobile Landscape: 20px (1.25rem) */
        font-size: calc(var(--size-font) * 1.25);
        line-height: 1.35;
    }
}

@media (max-width: 479px) {
    .heading-style-h5 {
        /* Mobile Portrait: 20px (1.25rem) */
        font-size: calc(var(--size-font) * 1.25);
        line-height: 1.35;
    }
}

.heading-style-h6 {
    /* Base: 20px (1.25rem) */
    font-size: calc(var(--size-font) * 1.25);
    line-height: 1.2;
}

@media (max-width: 991px) {
    .heading-style-h6 {
        /* Tablet: 20px (1.25rem) */
        font-size: calc(var(--size-font) * 1.25);
        line-height: 1.2;
    }
}

@media (max-width: 767px) {
    .heading-style-h6 {
        /* Mobile Landscape: 18px (1.125rem) */
        font-size: calc(var(--size-font) * 1.125);
        line-height: 1.3;
    }
}

@media (max-width: 479px) {
    .heading-style-h6 {
        /* Mobile Portrait: 16px (1rem) */
        font-size: calc(var(--size-font) * 1);
        line-height: 1.4;
    }
}

/* *******************************
Text Sizes (Revised Scale)
******************************* */
/* Micro Size */
.text-size-micro {
    /* Base: 12px (0.75rem) */
    font-size: calc(var(--size-font) * 0.75);
    line-height: 1.5;

    /* Unitless */
}

/* No breakpoint changes needed for micro */
/* Tiny Size */
.text-size-tiny {
    /* Base: 14px (0.875rem) */
    font-size: calc(var(--size-font) * 0.875);
    line-height: 1.5;

    /* Unitless */
}

@media (max-width: 991px) {
    .text-size-tiny {
        /* Tablet: 14px (0.875rem) */
        font-size: calc(var(--size-font) * 0.875);
        line-height: 1.45;
    }
}

@media (max-width: 767px) {
    .text-size-tiny {
        /* Mobile Landscape: 12px (0.75rem) */
        font-size: calc(var(--size-font) * 0.75);
        line-height: 1.4;
    }
}

@media (max-width: 479px) {
    .text-size-tiny {
        /* Mobile Portrait: 12px (0.75rem) */
        font-size: calc(var(--size-font) * 0.75);
        line-height: 1.4;
    }
}

/* Small Size */
@media (max-width: 991px) {
    .text-size-small {
        /* Tablet: 14px (0.875rem) */
        font-size: calc(var(--size-font) * 0.875);
        line-height: 1.5;
    }
}

@media (max-width: 767px) {
    .text-size-small {
        /* Mobile Landscape: 14px (0.875rem) */
        font-size: calc(var(--size-font) * 0.875);
        line-height: 1.45;
    }
}

@media (max-width: 479px) {
    .text-size-small {
        /* Mobile Portrait: 14px (0.875rem) */
        font-size: calc(var(--size-font) * 0.875);
        line-height: 1.45;
    }
}

/* Regular Size */
.text-size-regular {
    /* Base: 16px (1rem) */
    font-size: calc(var(--size-font) * 1);
    line-height: 1.4;
}

@media (max-width: 991px) {
    .text-size-regular {
        /* Tablet: 16px (1rem) */
        font-size: calc(var(--size-font) * 1);
        line-height: 1.4;
    }
}

@media (max-width: 767px) {
    .text-size-regular {
        /* Mobile Landscape: 16px (1rem) */
        font-size: calc(var(--size-font) * 1);
        line-height: 1.45;
    }
}

@media (max-width: 479px) {
    .text-size-regular {
        /* Mobile Portrait: 16px (1rem) */
        font-size: calc(var(--size-font) * 1);
        line-height: 1.45;
    }
}

/* Medium Size */
@media (max-width: 991px) {
    .text-size-medium {
        /* Tablet: 18px (1.125rem) */
        /* font-size: calc(var(--size-font) * 1.125) */
        line-height: 1.4;
    }
}

@media (max-width: 767px) {
    /* .text-size-medium {
        ||*| Mobile Landscape: 16px (1rem) |*||
        font-size: calc(var(--size-font) * 1);
        line-height: 1.4;
    } */
}

@media (max-width: 479px) {
    .text-size-medium {
        /* Mobile Portrait: 16px (1rem) */
        /* font-size: calc(var(--size-font) * 1) */
        line-height: 1.4;
    }
}

/* Large Size */
.text-size-large {
    /* Base: 24px (1.5rem) */
    font-size: calc(var(--size-font) * 1.5);
    line-height: 1.45;
    letter-spacing: -0.018em;
}

@media (max-width: 991px) {
    .text-size-large {
        /* Tablet: 20px (1.25rem) */
        /* font-size: calc(var(--size-font) * 1.125) */
        /* line-height: 1.35 */
    }
}

@media (max-width: 767px) {
    .text-size-large {
        /* Mobile Landscape: 18px (1.125rem) */
        font-size: calc(var(--size-font) * 1.25);
        line-height: 1.35;
    }
}

@media (max-width: 479px) {
    .text-size-large {
        /* Mobile Portrait: 16px (1rem) */
        font-size: calc(var(--size-font) * 1);
        line-height: 1.4;
    }
}

/* *******************************
Text Styles
******************************* */
.text-style-italic {
    /* font-family: 'Editorial New' */
    font-style: italic;
}

.text-style-strikethrough {
    text-decoration: line-through;
}

.text-style-link {
    color: var(--grey);
    text-decoration: underline;
}

.text-style-nowrap {
    white-space: nowrap;
}

.text-style-muted {
    opacity: 0.6;
}

.text-style-allcaps {
    text-transform: uppercase;
}

.text-style-smallcaps {
    text-transform: lowercase;
}

.text-style-underline {
    text-decoration: underline;
}

/* *******************************
Font Weight Classes
******************************* */
.text-weight-light {
    font-family: 'Museo Sans';
    font-weight: 300;
}

.text-weight-normal {
    font-family: 'Museo Sans';
    font-weight: 500;
}

.text-weight-semibold {
    font-family: 'Museo Sans';
    font-weight: 700;
}

.text-weight-bold {
    font-family: 'Museo Sans';
    font-weight: 900;
}

/* *******************************
Text Align
******************************* */
.text-align-left {
    text-align: left;
}

.text-align-right {
    text-align: right;
}

.align-self {
    align-self: flex-start;
}

/* *******************************
Colors
******************************* */
.text-color-white {
    color: var(--light);
}

.text-color-black {
    color: var(--dark);
}

.text-color-grey {
    color: var(--txtgrey);
}

.text-color-accent {
    color: var(--accent);
}

.text-color-lightgreen {
    color: var(--lightgreen);
}

.background-color-white {
    background-color: #fff;
    color: var(--dark);

    /* height: 100% */
}

.background-color-grey {
    background-color: var(--grey);
}

.background-color-black {
    background-color: var(--dark);
    color: var(--light);
}

.background-color-lightgreen {
    background-color: var(--lightgreen);
    color: var(--dark);
}

.background-color-green {
    background-color: var(--green);
}

.background-color-blue {
    background-color: var(--blue);
}

.background-color-lila {
    background-color: var(--lila);
}

.background-color-beige {
    background-color: var(--beige);
}

.background-color-404 {
    background-color: #C4BCC2;
}

.background-color-darkbeige {
    background-color: var(--darkbeige);
}

.background-color-red {
    background-color: var(--red);
}

.background-color-darkred {
    background-color: var(--darkred);
}

.background-color-darkgreen {
    background-color: var(--darkgreen);
}

.background-color-darkblue {
    background-color: var(--darkblue);
}

/* *******************************
Max Width Styles
******************************* */
.max-width-xxsmall {
    width: 100%;
    max-width: 12rem;
}

.max-width-xsmall {
    width: 100%;
    max-width: 16rem;
}

.max-width-small {
    width: 100%;
    max-width: 20rem;
}

.max-width-medium {
    width: 100%;
    max-width: 32rem;
}

.max-width-large {
    width: 100%;
    max-width: 48rem;
}

.max-width-xlarge {
    width: 100%;
    max-width: 64rem;
}

.max-width-xxlarge {
    width: 100%;
    max-width: 80rem;
}

.max-width-full {
    width: 100%;
    max-width: none;
}

/* OHOHO Margin/Padding Utility Usage:

  1. Naming Convention:
     - 'm' = margin, 'p' = padding
     - 't' = top, 'r' = right, 'b' = bottom, 'l' = left
     - 'x' = horizontal (left and right)
     - 'y' = vertical (top and bottom)
     - No direction letter = all four sides

  2. Scale:
     - The number (0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16) corresponds to
       multiples of the base spacer (0.5rem or 8px at ideal width).
     - Example: `mt-4` means `margin-top: calc(0.5rem * 4)` which is `2rem` (32px).
     - Example: `p-1` means `padding: calc(0.5rem * 1)` which is `0.5rem` (8px).

  3. Application:
     - Use Grid/Flex `gap` property first for spacing *between direct children*
       within a container (e.g., items in a list, columns in a row).
       `gap: calc(var(--spacer-base) * 4);` // 2rem gap

       - Use these `m-*` utilities for spacing *between* separate components/sections
       or to push elements away from others.
       `<section class="mb-8">...</section>` // Adds 4rem margin below section

     - Use these `p-*` utilities for adding space *inside* an element, around
       its content.
       `<div class="card p-4">...</div>` // Adds 2rem padding inside the card

  4. Specificity:
     - These classes use `!important`, meaning they will generally override
       margin/padding set by other, less specific CSS rules. This is intentional
       for utility classes.

  Examples:
  <div class="mt-4 mb-8"> Margin top 2rem, margin bottom 4rem </div>
  <button class="py-2 px-4"> Padding top/bottom 1rem, padding left/right 2rem </button>
  <div class="p-6"> Padding 3rem on all sides </div> */
/* *******************************
Margin and Padding Utilities (Revised 8px Scale)
******************************* */
/* --- Configuration --- */
:root {
    --spacer-base: 0.5rem;

    /* 8px at 16px root */
}

/* --- Margin --- */
.m-0 {
    margin: 0 !important;
}

.mt-0 {
    margin-top: 0 !important;
}

.mr-0 {
    margin-right: 0 !important;
}

.mb-0 {
    margin-bottom: 0 !important;
}

.ml-0 {
    margin-left: 0 !important;
}

.mx-0 {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.my-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.m-1 {
    margin: calc(var(--spacer-base) * 1) !important;
}

/* 0.5rem / 8px */
.mt-1 {
    margin-top: calc(var(--spacer-base) * 1) !important;
}

.mr-1 {
    margin-right: calc(var(--spacer-base) * 1) !important;
}

.mb-1 {
    margin-bottom: calc(var(--spacer-base) * 1) !important;
}

.ml-1 {
    margin-left: calc(var(--spacer-base) * 1) !important;
}

.mx-1 {
    margin-left: calc(var(--spacer-base) * 1) !important;
    margin-right: calc(var(--spacer-base) * 1) !important;
}

.my-1 {
    margin-top: calc(var(--spacer-base) * 1) !important;
    margin-bottom: calc(var(--spacer-base) * 1) !important;
}

.m-2 {
    margin: calc(var(--spacer-base) * 2) !important;
}

/* 1rem / 16px */
.mt-2 {
    margin-top: calc(var(--spacer-base) * 2) !important;
}

.mr-2 {
    margin-right: calc(var(--spacer-base) * 2) !important;
}

.mb-2 {
    margin-bottom: calc(var(--spacer-base) * 2) !important;
}

.ml-2 {
    margin-left: calc(var(--spacer-base) * 2) !important;
}

.mx-2 {
    margin-left: calc(var(--spacer-base) * 2) !important;
    margin-right: calc(var(--spacer-base) * 2) !important;
}

.my-2 {
    margin-top: calc(var(--spacer-base) * 2) !important;
    margin-bottom: calc(var(--spacer-base) * 2) !important;
}

.m-3 {
    margin: calc(var(--spacer-base) * 3) !important;
}

/* 1.5rem / 24px */
.mt-3 {
    margin-top: calc(var(--spacer-base) * 3) !important;
}

.mr-3 {
    margin-right: calc(var(--spacer-base) * 3) !important;
}

.mb-3 {
    margin-bottom: calc(var(--spacer-base) * 3) !important;
}

.ml-3 {
    margin-left: calc(var(--spacer-base) * 3) !important;
}

.mx-3 {
    margin-left: calc(var(--spacer-base) * 3) !important;
    margin-right: calc(var(--spacer-base) * 3) !important;
}

.my-3 {
    margin-top: calc(var(--spacer-base) * 3) !important;
    margin-bottom: calc(var(--spacer-base) * 3) !important;
}

.m-4 {
    margin: calc(var(--spacer-base) * 4) !important;
}

/* 2rem / 32px */
.mt-4 {
    margin-top: calc(var(--spacer-base) * 4) !important;
}

.mr-4 {
    margin-right: calc(var(--spacer-base) * 4) !important;
}

.mb-4 {
    margin-bottom: calc(var(--spacer-base) * 4) !important;
}

.ml-4 {
    margin-left: calc(var(--spacer-base) * 4) !important;
}

.mx-4 {
    margin-left: calc(var(--spacer-base) * 4) !important;
    margin-right: calc(var(--spacer-base) * 4) !important;
}

.my-4 {
    margin-top: calc(var(--spacer-base) * 4) !important;
    margin-bottom: calc(var(--spacer-base) * 4) !important;
}

.m-5 {
    margin: calc(var(--spacer-base) * 5) !important;
}

/* 2.5rem / 40px */
.mt-5 {
    margin-top: calc(var(--spacer-base) * 5) !important;
}

.mr-5 {
    margin-right: calc(var(--spacer-base) * 5) !important;
}

.mb-5 {
    margin-bottom: calc(var(--spacer-base) * 5) !important;
}

.ml-5 {
    margin-left: calc(var(--spacer-base) * 5) !important;
}

.mx-5 {
    margin-left: calc(var(--spacer-base) * 5) !important;
    margin-right: calc(var(--spacer-base) * 5) !important;
}

.my-5 {
    margin-top: calc(var(--spacer-base) * 5) !important;
    margin-bottom: calc(var(--spacer-base) * 5) !important;
}

.m-6 {
    margin: calc(var(--spacer-base) * 6) !important;
}

/* 3rem / 48px */
.mt-6 {
    margin-top: calc(var(--spacer-base) * 6) !important;
}

.mr-6 {
    margin-right: calc(var(--spacer-base) * 6) !important;
}

.mb-6 {
    margin-bottom: calc(var(--spacer-base) * 6) !important;
}

.ml-6 {
    margin-left: calc(var(--spacer-base) * 6) !important;
}

.mx-6 {
    margin-left: calc(var(--spacer-base) * 6) !important;
    margin-right: calc(var(--spacer-base) * 6) !important;
}

.my-6 {
    margin-top: calc(var(--spacer-base) * 6) !important;
    margin-bottom: calc(var(--spacer-base) * 6) !important;
}

.m-8 {
    margin: calc(var(--spacer-base) * 8) !important;
}

/* 4rem / 64px */
.mt-8 {
    margin-top: calc(var(--spacer-base) * 8) !important;
}

.mr-8 {
    margin-right: calc(var(--spacer-base) * 8) !important;
}

.mb-8 {
    margin-bottom: calc(var(--spacer-base) * 8) !important;
}

.ml-8 {
    margin-left: calc(var(--spacer-base) * 8) !important;
}

.mx-8 {
    margin-left: calc(var(--spacer-base) * 8) !important;
    margin-right: calc(var(--spacer-base) * 8) !important;
}

.my-8 {
    margin-top: calc(var(--spacer-base) * 8) !important;
    margin-bottom: calc(var(--spacer-base) * 8) !important;
}

.m-10 {
    margin: calc(var(--spacer-base) * 10) !important;
}

/* 5rem / 80px */
.mt-10 {
    margin-top: calc(var(--spacer-base) * 10) !important;
}

.mr-10 {
    margin-right: calc(var(--spacer-base) * 10) !important;
}

.mb-10 {
    margin-bottom: calc(var(--spacer-base) * 10) !important;
}

.ml-10 {
    margin-left: calc(var(--spacer-base) * 10) !important;
}

.mx-10 {
    margin-left: calc(var(--spacer-base) * 10) !important;
    margin-right: calc(var(--spacer-base) * 10) !important;
}

.my-10 {
    margin-top: calc(var(--spacer-base) * 10) !important;
    margin-bottom: calc(var(--spacer-base) * 10) !important;
}

.m-12 {
    margin: calc(var(--spacer-base) * 12) !important;
}

/* 6rem / 96px */
.mt-12 {
    margin-top: calc(var(--spacer-base) * 12) !important;
}

.mr-12 {
    margin-right: calc(var(--spacer-base) * 12) !important;
}

.mb-12 {
    margin-bottom: calc(var(--spacer-base) * 12) !important;
}

.ml-12 {
    margin-left: calc(var(--spacer-base) * 12) !important;
}

.mx-12 {
    margin-left: calc(var(--spacer-base) * 12) !important;
    margin-right: calc(var(--spacer-base) * 12) !important;
}

.my-12 {
    margin-top: calc(var(--spacer-base) * 12) !important;
    margin-bottom: calc(var(--spacer-base) * 12) !important;
}

.m-16 {
    margin: calc(var(--spacer-base) * 16) !important;
}

/* 8rem / 128px */
.mt-16 {
    margin-top: calc(var(--spacer-base) * 16) !important;
}

.mr-16 {
    margin-right: calc(var(--spacer-base) * 16) !important;
}

.mb-16 {
    margin-bottom: calc(var(--spacer-base) * 16) !important;
}

.ml-16 {
    margin-left: calc(var(--spacer-base) * 16) !important;
}

.mx-16 {
    margin-left: calc(var(--spacer-base) * 16) !important;
    margin-right: calc(var(--spacer-base) * 16) !important;
}

.my-16 {
    margin-top: calc(var(--spacer-base) * 16) !important;
    margin-bottom: calc(var(--spacer-base) * 16) !important;
}

/* Add negative margins if needed */
/* .m-n1 { margin: calc(var(--spacer-base) * -1) !important; } */
/* .mt-n1 { margin-top: calc(var(--spacer-base) * -1) !important; } */
/* ...etc... */
/* --- Padding --- */
.p-0 {
    padding: 0 !important;
}

.pt-0 {
    padding-top: 0 !important;
}

.pr-0 {
    padding-right: 0 !important;
}

.pb-0 {
    padding-bottom: 0 !important;
}

.pl-0 {
    padding-left: 0 !important;
}

.px-0 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.py-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.p-1 {
    padding: calc(var(--spacer-base) * 1) !important;
}

/* 0.5rem / 8px */
.pt-1 {
    padding-top: calc(var(--spacer-base) * 1) !important;
}

.pr-1 {
    padding-right: calc(var(--spacer-base) * 1) !important;
}

.pb-1 {
    padding-bottom: calc(var(--spacer-base) * 1) !important;
}

.pl-1 {
    padding-left: calc(var(--spacer-base) * 1) !important;
}

.px-1 {
    padding-left: calc(var(--spacer-base) * 1) !important;
    padding-right: calc(var(--spacer-base) * 1) !important;
}

.py-1 {
    padding-top: calc(var(--spacer-base) * 1) !important;
    padding-bottom: calc(var(--spacer-base) * 1) !important;
}

.p-2 {
    padding: calc(var(--spacer-base) * 2) !important;
}

/* 1rem / 16px */
.pt-2 {
    padding-top: calc(var(--spacer-base) * 2) !important;
}

.pr-2 {
    padding-right: calc(var(--spacer-base) * 2) !important;
}

.pb-2 {
    padding-bottom: calc(var(--spacer-base) * 2) !important;
}

.pl-2 {
    padding-left: calc(var(--spacer-base) * 2) !important;
}

.px-2 {
    padding-left: calc(var(--spacer-base) * 2) !important;
    padding-right: calc(var(--spacer-base) * 2) !important;
}

.py-2 {
    padding-top: calc(var(--spacer-base) * 2) !important;
    padding-bottom: calc(var(--spacer-base) * 2) !important;
}

.p-3 {
    padding: calc(var(--spacer-base) * 3) !important;
}

/* 1.5rem / 24px */
.pt-3 {
    padding-top: calc(var(--spacer-base) * 3) !important;
}

.pr-3 {
    padding-right: calc(var(--spacer-base) * 3) !important;
}

.pb-3 {
    padding-bottom: calc(var(--spacer-base) * 3) !important;
}

.pl-3 {
    padding-left: calc(var(--spacer-base) * 3) !important;
}

.px-3 {
    padding-left: calc(var(--spacer-base) * 3) !important;
    padding-right: calc(var(--spacer-base) * 3) !important;
}

.py-3 {
    padding-top: calc(var(--spacer-base) * 3) !important;
    padding-bottom: calc(var(--spacer-base) * 3) !important;
}

.p-4 {
    padding: calc(var(--spacer-base) * 4) !important;
}

/* 2rem / 32px */
.pt-4 {
    padding-top: calc(var(--spacer-base) * 4) !important;
}

.pr-4 {
    padding-right: calc(var(--spacer-base) * 4) !important;
}

.pb-4 {
    padding-bottom: calc(var(--spacer-base) * 4) !important;
}

.pl-4 {
    padding-left: calc(var(--spacer-base) * 4) !important;
}

.px-4 {
    padding-left: calc(var(--spacer-base) * 4) !important;
    padding-right: calc(var(--spacer-base) * 4) !important;
}

.py-4 {
    padding-top: calc(var(--spacer-base) * 4) !important;
    padding-bottom: calc(var(--spacer-base) * 4) !important;
}

.p-5 {
    padding: calc(var(--spacer-base) * 5) !important;
}

/* 2.5rem / 40px */
.pt-5 {
    padding-top: calc(var(--spacer-base) * 5) !important;
}

.pr-5 {
    padding-right: calc(var(--spacer-base) * 5) !important;
}

.pb-5 {
    padding-bottom: calc(var(--spacer-base) * 5) !important;
}

.pl-5 {
    padding-left: calc(var(--spacer-base) * 5) !important;
}

.px-5 {
    padding-left: calc(var(--spacer-base) * 5) !important;
    padding-right: calc(var(--spacer-base) * 5) !important;
}

.py-5 {
    padding-top: calc(var(--spacer-base) * 5) !important;
    padding-bottom: calc(var(--spacer-base) * 5) !important;
}

.p-6 {
    padding: calc(var(--spacer-base) * 6) !important;
}

/* 3rem / 48px */
.pt-6 {
    padding-top: calc(var(--spacer-base) * 6) !important;
}

.pr-6 {
    padding-right: calc(var(--spacer-base) * 6) !important;
}

.pb-6 {
    padding-bottom: calc(var(--spacer-base) * 6) !important;
}

.pl-6 {
    padding-left: calc(var(--spacer-base) * 6) !important;
}

.px-6 {
    padding-left: calc(var(--spacer-base) * 6) !important;
    padding-right: calc(var(--spacer-base) * 6) !important;
}

.py-6 {
    padding-top: calc(var(--spacer-base) * 6) !important;
    padding-bottom: calc(var(--spacer-base) * 6) !important;
}

.p-8 {
    padding: calc(var(--spacer-base) * 8) !important;
}

/* 4rem / 64px */
.pt-8 {
    padding-top: calc(var(--spacer-base) * 8) !important;
}

.pr-8 {
    padding-right: calc(var(--spacer-base) * 8) !important;
}

.pb-8 {
    padding-bottom: calc(var(--spacer-base) * 8) !important;
}

.pl-8 {
    padding-left: calc(var(--spacer-base) * 8) !important;
}

.px-8 {
    padding-left: calc(var(--spacer-base) * 8) !important;
    padding-right: calc(var(--spacer-base) * 8) !important;
}

.py-8 {
    padding-top: calc(var(--spacer-base) * 8) !important;
    padding-bottom: calc(var(--spacer-base) * 8) !important;
}

.p-10 {
    padding: calc(var(--spacer-base) * 10) !important;
}

/* 5rem / 80px */
.pt-10 {
    padding-top: calc(var(--spacer-base) * 10) !important;
}

.pr-10 {
    padding-right: calc(var(--spacer-base) * 10) !important;
}

.pb-10 {
    padding-bottom: calc(var(--spacer-base) * 10) !important;
}

.pl-10 {
    padding-left: calc(var(--spacer-base) * 10) !important;
}

.px-10 {
    padding-left: calc(var(--spacer-base) * 10) !important;
    padding-right: calc(var(--spacer-base) * 10) !important;
}

.py-10 {
    padding-top: calc(var(--spacer-base) * 10) !important;
    padding-bottom: calc(var(--spacer-base) * 10) !important;
}

.p-12 {
    padding: calc(var(--spacer-base) * 12) !important;
}

/* 6rem / 96px */
.pt-12 {
    padding-top: calc(var(--spacer-base) * 12) !important;
}

.pr-12 {
    padding-right: calc(var(--spacer-base) * 12) !important;
}

.pb-12 {
    padding-bottom: calc(var(--spacer-base) * 12) !important;
}

.pl-12 {
    padding-left: calc(var(--spacer-base) * 12) !important;
}

.px-12 {
    padding-left: calc(var(--spacer-base) * 12) !important;
    padding-right: calc(var(--spacer-base) * 12) !important;
}

.py-12 {
    padding-top: calc(var(--spacer-base) * 12) !important;
    padding-bottom: calc(var(--spacer-base) * 12) !important;
}

.p-16 {
    padding: calc(var(--spacer-base) * 16) !important;
}

/* 8rem / 128px */
.pt-16 {
    padding-top: calc(var(--spacer-base) * 16) !important;
}

@media (max-width: 992px) {
    .pt-16 {
        padding-top: calc(var(--spacer-base) * 8) !important;
    }
}

.pr-16 {
    padding-right: calc(var(--spacer-base) * 16) !important;
}

.pb-16 {
    padding-bottom: calc(var(--spacer-base) * 16) !important;
}

@media (max-width: 992px) {
    .pb-16 {
        padding-bottom: calc(var(--spacer-base) * 8) !important;
    }
}

.pl-16 {
    padding-left: calc(var(--spacer-base) * 16) !important;
}

.px-16 {
    padding-left: calc(var(--spacer-base) * 16) !important;
    padding-right: calc(var(--spacer-base) * 16) !important;
}

.py-16 {
    padding-top: calc(var(--spacer-base) * 16) !important;
    padding-bottom: calc(var(--spacer-base) * 16) !important;
}

/* *******************************
Icon Styles
******************************* */
.icon-height-small {
    height: 1rem;
}

.icon-height-medium {
    height: 2rem;
}

.icon-height-large {
    height: 3rem;
}

.icon-1x1-small {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
}

.icon-1x1-medium {
    width: 2rem;
    height: 2rem;
}

.icon-1x1-large {
    width: 2.5rem;
    height: 2.5rem;
}

/* *******************************
Z-Index Styles
******************************* */
.z-index-1 {
    position: relative;
    z-index: 1;
}

.z-index-2 {
    position: relative;
    z-index: 2;
}

.z-index-3 {
    position: relative;
    z-index: 3;
}

.z-index-5 {
    position: relative;
    z-index: 5;
}

.z-index-6 {
    position: relative;
    z-index: 6;
}

.z-index-7 {
    position: relative;
    z-index: 7;
}

.z-index-8 {
    position: relative;
    z-index: 8;
}

.z-index-9 {
    position: relative;
    z-index: 9;
}

.z-index-10 {
    position: relative;
    z-index: 6;

    /* Note: This was 6 in original, kept as is */
}

/* *******************************
Useful system classes
******************************* */
.w100 {
    width: 100%;
}

.align-center {
    margin-right: auto;
    margin-left: auto;
}

.layer {
    position: absolute;
    left: 0%;
    top: 0%;
    right: 0%;
    bottom: 0%;
    justify-content: center;
    align-items: center;
}

.vh100 {
    height: 100vh;

    /* height: 100svh */
}

.grid-item1 {
    justify-self: start;
}

.display-flex {
    display: flex;
}

.inline {
    display: inline;
}

.inlineblock {
    display: inline-block;
}

.h-center {
    display: flex;
    justify-content: center;
}

.v-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.h100 {
    height: 100%;
}

.w100 {
    width: 100;
}

.relative {
    position: relative;
}

.absolute-full {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

@media (max-width:991px) {
    .absolute-full {
        position: static;
    }
}

.overflow-auto {
    overflow: auto;
}

.overflow-scroll {
    overflow: scroll;
}

.overflow-visible {
    overflow: visible;
}

.overflow-hidden {
    overflow: hidden;
}

.pointer {
    cursor: none;
}

.willchange {
    will-change: transform;

    /* backface-visibility: hidden */
}

.sticky {
    position: sticky;

    /* top: 6rem; */
    top: calc(var(--spacer-base) * 12);

    /* 6rem */
}

@media (max-width: 479px) {
    .sticky {
        position: static;
    }
}

/* Make sure containers never lose their center alignment */
.container-medium,
.container-small,
.container-large {
    margin-right: auto !important;
    margin-left: auto !important;
}

/* *******************************
These are never overwritten
******************************* */
.hide {
    display: none !important;
}

/* ========================================================================== */
/* 8. Overrides & Misc */
/* ========================================================================== */
/* ========================================================================== */
/* Focus & Interaction Styling */
/* ========================================================================== */
/* -- Accessibility: Visible Focus States -- */
/* Define a clear focus style for keyboard users on interactive elements */
/* Apply this to links, buttons, inputs, selects, textareas, etc. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:not([tabindex*="-"]):focus-visible {
    outline: 2px solid dodgerblue;

    /* Example: Use your brand's focus color */
    outline-offset: 2px;
    box-shadow: none;

    /* Ensure no conflicting shadows */
    /* Optional: Add transition for smoothness */
    /* transition: outline-offset 0.1s ease; */
}

/* -- Remove focus style ONLY when NOT focused via keyboard -- */
/* This hides the outline for mouse/touch focus, relying on :focus-visible */
*:focus:not(:focus-visible) {
    outline: none;

    /* Remove outline for non-keyboard focus */
    /* Avoid using !important if possible */
    /* box-shadow: none !important; <-- Only if absolutely necessary */
}

/* -- iOS Tap Highlight Color -- */
/* Remove the default grey highlight on tap in iOS */
* {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

    /* -webkit-tap-highlight-color: transparent; <-- Also works */
}

/* Add this to your existing styles */
html.is-transitioning {
    height: 100vh;
    overflow: hidden;
    pointer-events: none;
}

.pr-story-img__img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ========================================================================== */
/* 9. Styleguide Styles (Keep at end or move to separate file) */
/* ========================================================================== */
.fs-styleguide_spacer-box {
    width: 100%;
    background-color: rgba(45, 64, 234, .1);
    border: 1px d hed #2d40ea;

    /* Assuming this was dashed */
    position: relative;
}

.fs-styleguide_background {
    display: flex;
    width: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    border-style: solid;
    border-width: 1px;
    border-color: rgba(0, 0, 0, 0.1);
}

.fs-styleguide_spacing {
    position: relative;
    display: grid;
    justify-content: start;
    justify-items: stretch;
    align-items: start;
    align-content: start;
    grid-auto-columns: 1fr;
    grid-column-gap: 0.5rem;
    grid-row-gap: 0.5rem;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 115, 230, 0.1)), to(hsla(0, 0%, 100%, 0)));
    background-image: linear-gradient(0deg, rgba(0, 115, 230, 0.1), hsla(0, 0%, 100%, 0));
}

.fs-styleguide_heading-tags {
    background-color: var(--light);
}

.fs-styleguide_other-tags {
    background-color: var(--light);
}

.fs-styleguide_background-space {
    width: 1px;
    height: 1px;
    margin: 5rem;
}

.fs-styleguide_item {
    position: relative;
    display: grid;
    padding-bottom: 3rem;
    justify-content: start;
    justify-items: start;
    align-items: start;
    align-content: start;
    grid-auto-columns: 1fr;
    grid-column-gap: 1.125rem;
    grid-row-gap: 1.125rem;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.fs-styleguide_item.is-stretch {
    justify-items: stretch;
}

.fs-styleguide_item-header {
    width: 100%;
    padding-bottom: 2rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.fs-styleguide_heading-large {
    font-size: 6rem;
}

.fs-styleguide_2-col {
    display: grid;
    width: 100%;
    grid-auto-columns: 1fr;
    grid-column-gap: 4rem;
    grid-row-gap: 4rem;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
}

.fs-styleguide_2-col.is-align-start {
    align-items: start;
}

.fs-styleguide_row {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    grid-auto-flow: column;
    grid-auto-columns: auto;
    grid-column-gap: 0.75rem;
    grid-row-gap: 0.75rem;
    grid-template-columns: auto;
    grid-template-rows: auto;
}

.fs-styleguide_heading-styles {
    background-color: var(--light);
}

.fs-styleguide_webflow-elements {
    background-color: var(--light);
}

.fs-styleguide_section-header {
    display: grid;
    width: 100%;
    padding-bottom: 3rem;
    grid-auto-columns: 1fr;
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    border-bottom: 1px solid var(--grey);
    line-height: 1.4;
}

.fs-styleguide_1-col {
    display: grid;
    width: 100%;
    grid-auto-columns: 1fr;
    grid-column-gap: 3rem;
    grid-row-gap: 3rem;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
}

.fs-styleguide_empty-box {
    position: relative;
    z-index: -1;
    height: 3rem;
    min-width: 3rem;
    border-style: dashed;
    border-width: 1px;
    border-color: #0073e6;
    background-color: rgba(0, 115, 230, 0.1);
}

.fs-styleguide_heading-medium {
    font-size: 4rem;
}

.fs-styleguide_4-col {
    display: grid;
    width: 100%;
    grid-auto-columns: 1fr;
    grid-column-gap: 4rem;
    grid-row-gap: 4rem;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: auto;
}

.fs-styleguide_item-wrapper {
    display: flex;
    width: 100%;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    grid-column-gap: 3rem;
    grid-row-gap: 3rem;
}

.fs-styleguide_text-classes {
    background-color: var(--light);
}

.fs-styleguide_header-block {
    display: grid;
    justify-items: start;
    align-items: center;
    grid-auto-columns: 1fr;
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
}

.fs-styleguide_3-col {
    display: grid;
    width: 100%;
    align-items: stretch;
    grid-auto-columns: 1fr;
    grid-column-gap: 4rem;
    grid-row-gap: 4rem;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto;
}

.fs-styleguide_3-col.is-align-start {
    align-items: start;
}

.fs-styleguide_header {
    background-color: rgba(0, 0, 0, 0.05);
}

.fs-styleguide_label {
    display: flex;
    padding: 0.25rem 0.75rem;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    background-color: #0073e6;
    color: var(--light);
    line-height: 1.4;
    font-variation-settings: "wght" 500;
}

.fs-styleguide_label.is-tag {
    background-color: #be4aa5;
}

.fs-styleguide_version {
    z-index: 5;
    color: var(--grey);
    font-variation-settings: "wght" 500;
    text-decoration: none;
}

.fs-styleguide_icons {
    background-color: var(--light);
}

.fs-styleguide_colors {
    background-color: var(--light);
}

.fs-styleguide_buttons {
    background-color: var(--light);
}

.fs-styleguide_classes {
    display: grid;
    grid-auto-columns: 1fr;
    grid-column-gap: 1px;
    grid-row-gap: 1px;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
}

.fs-styleguide_section {
    display: grid;
    justify-items: start;
    align-items: start;
    grid-auto-columns: 1fr;
    grid-column-gap: 6rem;
    grid-row-gap: 6rem;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
}

.fs-styleguide_section.is-vertical {
    grid-column-gap: 4rem;
    grid-row-gap: 4rem;
    grid-template-columns: 1fr;
}

.fs-styleguide_spacing-all {
    display: none;
}

.home-message_content-grid {
    display: grid;
    justify-content: center;
    justify-items: start;
    align-items: center;
    align-content: center;
    grid-auto-columns: 1fr;
    grid-column-gap: 4rem;
    grid-row-gap: 4rem;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
}

.home-message_component {
    display: flex;
    min-height: 100vh;
    padding: 3rem;
    color: var(--light);
}

.home-message_list {
    display: grid;
    justify-items: start;
    grid-auto-columns: 1fr;
    grid-column-gap: 1.5rem;
    grid-row-gap: 1.5rem;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
}

.home-message_content {
    display: flex;
    width: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    align-self: stretch;
    background-color: rgba(0, 0, 0, 0.05);
    color: var(--dark);
}

.home-message_heading-block {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
}

.home-message_item {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
}

.home-message_item-icon {
    width: 1.75rem;
    height: 1.75rem;
    flex: 0 0 auto;
    background-color: var(--light);
    color: var(--dark);
}

.home-message_logo {
    width: 4rem;
}

/* *******************************
Media Queries (for Styleguide)
******************************* */
@media screen and (max-width: 991px) {
    .fs-styleguide_2-col {
        grid-column-gap: 2rem;
        grid-row-gap: 2rem;
        grid-template-columns: 1fr;
    }

    .fs-styleguide_1-col {
        grid-column-gap: 2rem;
        grid-row-gap: 2rem;
    }

    .fs-styleguide_heading-medium {
        font-size: 3rem;
    }

    .fs-styleguide_4-col {
        grid-template-columns: 1fr;
    }

    .fs-styleguide_3-col {
        grid-template-columns: 1fr;
    }

    .fs-styleguide_section {
        grid-column-gap: 2.5rem;
        grid-template-columns: 1fr;
    }
}