/* 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, 430px) 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 --- */
    --size-unit: 16;
    --spacer-base: 0.5rem;

    /* --- SPACING SCALE (Derivation: R10 and R5 Multiples) --- */
    --space-0-5: 0.25rem;

    /* 4px  - R10 Step */
    --space-1: 0.5rem;

    /* 8px  - R10 Step (Base) */
    --space-1-5: 0.75rem;

    /* 12px - R10 Intermediate */
    --space-2: 1rem;

    /* 16px - R10 Step */
    --space-2-5: 1.25rem;

    /* 20px - R10 Step */
    --space-3: 1.5rem;

    /* 24px - R10 Intermediate */
    --space-4: 2rem;

    /* 32px - R10 Step */
    --space-5: 2.5rem;

    /* 40px - R10 Step */
    --space-6: 3rem;

    /* 48px - R10 Intermediate */
    --space-8: 4rem;

    /* 64px - R10 Step */
    --space-10: 5rem;

    /* 80px - R5 Multiplier */
    --space-12: 6rem;

    /* 96px - R5 Multiplier */
    --space-16: 8rem;

    /* 128px - R5 Multiplier */
    --space-20: 10rem;

    /* 160px - R10 Step */
    /* --- OSMO SCALING --- */
    --size-container-ideal: 1440;
    --size-container-min: 992px;
    --size-container-max: 1440px;
    --size-container: clamp(var(--size-container-min), 100vw, var(--size-container-max));
    --size-font: calc(var(--size-container) / (var(--size-container-ideal) / var(--size-unit)));

    /* --- TYPOGRAPHY SCALE (Figma-Aligned, 16px Base) --- */
    --text-3xs: 0.75rem;

    /* 12px — micro, fine print */
    --text-2xs: 0.8125rem;

    /* 13px — captions, tags */
    --text-xs: 0.875rem;

    /* 14px — small UI, buttons */
    --text-sm: 0.9375rem;

    /* 15px — secondary meta */
    --text-base: 1rem;

    /* 16px — BODY BASE */
    --text-md: 1.125rem;

    /* 18px — lead paragraph */
    --text-lg: 1.25rem;

    /* 20px — large body, intro */
    --text-xl: 1.75rem;

    /* 28px — small heading */
    --text-2xl: 2.0625rem;

    /* 33px — heading 5 */
    --text-3xl: 2.5rem;

    /* 40px — heading 4 */
    --text-4xl: 3.5625rem;

    /* 57px — heading 3 */
    --text-5xl: 4rem;

    /* 64px — heading 2 */
    --text-6xl: 5rem;

    /* 80px — heading 1 */
    --text-7xl: 6.75rem;

    /* 108px — display / hero */
    /* Legacy alias — use --text-3xs for new work */
    --text-xxs: var(--text-3xs);

    /* --- TRACKING SCALE (Inter Letter Spacing) --- */
    --track-3xs: 0.01em;

    /* Micro */
    --track-2xs: 0.2em;

    /* Caption */
    --track-xs: 0em;

    /* Small UI */
    --track-sm: -0.005em;

    /* Secondary */
    --track-base: -0.01em;

    /* Body base */
    --track-md: -0.015em;

    /* Lead */
    --track-lg: -0.02em;

    /* Large body */
    --track-xl: -0.025em;

    /* Small heading (H6) */
    --track-2xl: -0.03em;

    /* H5 */
    --track-3xl: -0.035em;

    /* H4 */
    --track-4xl: -0.04em;

    /* H3 */
    --track-5xl: -0.05em;

    /* H2 */
    --track-6xl: -0.06em;

    /* H1 */
    --track-7xl: -0.07em;

    /* Display */
    /* ─── PRIMITIVE PALETTE: GREEN SCALE (brand hue 115.5) ─── */
    --green-50: oklch(97.5% 0.022 115.5);
    --green-100: oklch(93.5% 0.052 115.5);
    --green-200: oklch(87.5% 0.095 115.5);
    --green-300: oklch(82.5% 0.145 115.5);
    --green-400: oklch(78.4% 0.178 115.5);

    /* Primary Accent */
    --green-500: oklch(65.0% 0.165 115.5);
    --green-600: oklch(50.0% 0.135 115.5);
    --green-700: oklch(38.0% 0.105 115.5);
    --green-800: oklch(27.0% 0.068 115.5);
    --green-900: oklch(17.0% 0.038 115.5);

    /* ─── PRIMITIVE PALETTE: NEUTRAL SCALE (hue 115.5 hint) ─── */
    --neutral-0: oklch(100% 0 0);
    --neutral-50: oklch(98.5% 0.003 115.5);
    --neutral-100: oklch(96.5% 0.005 115.5);
    --neutral-200: oklch(92.0% 0.007 115.5);
    --neutral-300: oklch(85.0% 0.009 115.5);
    --neutral-400: oklch(70.0% 0.007 115.5);
    --neutral-500: oklch(58.0% 0.005 115.5);
    --neutral-600: oklch(45.0% 0.007 115.5);
    --neutral-700: oklch(32.0% 0.009 115.5);
    --neutral-800: oklch(22.0% 0.011 115.5);
    --neutral-900: oklch(12.0% 0.009 115.5);
    --neutral-950: oklch(7.0% 0.005 115.5);

    /* ─── SEMANTIC COLOR ALIASES ─── */
    --color-bg: var(--neutral-0);
    --color-bg-subtle: var(--neutral-50);
    --color-bg-muted: var(--neutral-100);
    --color-surface: var(--neutral-0);
    --color-surface-raised: var(--neutral-50);
    --color-text: var(--neutral-800);
    --color-text-muted: var(--neutral-600);
    --color-text-subtle: var(--neutral-500);
    --color-text-inverse: var(--neutral-0);
    --color-border: var(--neutral-200);
    --color-border-strong: var(--neutral-300);
    --color-border-focus: var(--green-400);
    --color-accent: var(--green-400);
    --color-accent-hover: var(--green-500);
    --color-accent-subtle: var(--green-100);
    --color-accent-text: var(--green-700);
    --color-accent-text-lg: var(--green-600);
    --color-error: oklch(55% 0.2 25);
    --color-error-bg: oklch(95% 0.03 25);
    --color-success: var(--green-600);

    /* ─── LEGACY BRIDGES ─── */
    /* @deprecated — component files keep working; migrate to --color-* over time */
    --accent: var(--green-400);
    --white: var(--neutral-0);
    --light: var(--neutral-50);
    --dark: var(--neutral-900);
    --grey: var(--neutral-100);

    /* card backgrounds, subtle fills */
    --lightgrey: var(--neutral-50);

    /* hover states, near-white surfaces */
    --txtgrey: var(--neutral-500);
    --lightgreen: var(--green-100);
    --linegrey: var(--color-border);
    --line: var(--color-border);

    /* ─── GEOMETRY (Radii) ─── */
    /* Fixed pixel values preferred for UI stability across viewports (No Osmo Scaling) */
    --radius-none: 0;
    --radius-xs: 2px;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-xl: 32px;
    --radius-full: 9999px;

    /* ─── MOTION TOKENS ─── */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --duration-fast: 150ms;
    --duration-normal: 250ms;
    --duration-slow: 400ms;
    --duration-depth: 300ms;

    /* For 3D transforms (perspective effects) */
    /* ─── SHADOW TOKENS (oklch) ─── */
    --shadow-xs: 0 1px 2px oklch(0% 0 0 / 0.05);
    --shadow-sm: 0 1px 3px oklch(0% 0 0 / 0.08), 0 1px 2px oklch(0% 0 0 / 0.04);
    --shadow-md: 0 4px 6px oklch(0% 0 0 / 0.07), 0 2px 4px oklch(0% 0 0 / 0.04);
    --shadow-lg: 0 10px 15px oklch(0% 0 0 / 0.08), 0 4px 6px oklch(0% 0 0 / 0.03);
    --shadow-xl: 0 20px 25px oklch(0% 0 0 / 0.10), 0 8px 10px oklch(0% 0 0 / 0.04);
    --shadow-2xl: 0 20px 50px oklch(0% 0 0 / 0.10);
    --shadow-hero-card: 0 10px 40px oklch(0% 0 0 / 0.08);
    --shadow-hero-card-hover: 0 20px 60px oklch(0% 0 0 / 0.13);
    --shadow-island: 0 48px 100px oklch(29.71% 0.0037 106.46 / 0.15);
    --shadow-island-sticky: 0 30px 60px oklch(29.71% 0.0037 106.46 / 0.08);
    --shadow-overlay-soft: 0 var(--space-6) 6.25rem oklch(24.24% 0.0708 289.42 / 0.15);

    /* ─── FOCUS RING ─── */
    --focus-ring: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--green-400);

    /* ─── LAYER TOKENS (Z-INDEX) ─── */
    --z-base: 1;
    --z-header: 90;
    --z-header-sticky: 1200;
    --z-overlay: 9000;
    --z-search: 9100;
    --z-cart: 9200;
    --z-lightbox: 9300;
    --z-modal: 9400;

    /* ─── TYPOGRAPHY ALIASES ─── */
    --font-sans: "InterVariable", "Inter", sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, monospace;
    --font-numbers: var(--font-mono);

    /* @deprecated → use --font-mono */
    /* ─── FONT WEIGHT ALIASES (variable font axis values for font-variation-settings: "wght") ─── */
    --weight-light: 300;
    --weight-normal: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --weight-semi: var(--weight-semibold);

    /* @deprecated → use --weight-semibold */
    /* ─── LAYOUT ─── */
    --main-top-margin: var(--space-16);

    /* ─── BORDER WIDTHS ─── */
    --border-width-hairline: 1px;
    --border-width-thin: 2px;
    --border-width-md: 3px;
}

/* ========================================================================== */
/* RESPONSIVE BREAKPOINT OVERRIDES (Osmo Scaling Configuration) */
/* ========================================================================== */
/* Tablet */
@media screen and (max-width: 991px) {
    :root {
        /* --- Configuration for Tablet (Osmo Scaling) --- */
        --size-container-ideal: 834;
        --size-container-min: 768px;
        --size-container-max: 991px;

        /* Typography scales automatically via --size-font recalculation */
    }
}

/* Mobile Landscape */
@media screen and (max-width: 767px) {
    :root {
        /* --- Configuration for Mobile Landscape (Osmo Scaling) --- */
        --size-container-ideal: 550;
        --size-container-min: 431px;
        --size-container-max: 767px;

        /* Typography scales automatically via --size-font recalculation */
    }
}

/* Mobile Portrait */
@media screen and (max-width: 430px) {
    :root {
        /* --- Configuration for Mobile Portrait (Osmo Scaling) --- */
        --size-container-ideal: 414;
        --size-container-min: 320px;
        --size-container-max: 430px;

        /* Typography scales automatically via --size-font recalculation */
    }
}

/* ========================================================================== */
/* ========================================================================== */
/* UNIFIED TYPOGRAPHY UTILITIES (Figma-Aligned, 16px Base) */
/* ========================================================================== */
.text-3xs {
    font-family: "InterVariable", "Inter", sans-serif;
    font-size: var(--text-3xs);
    line-height: 1.4;
    letter-spacing: var(--track-3xs);
}

.text-2xs {
    font-family: "InterVariable", "Inter", sans-serif;
    font-size: var(--text-2xs);
    line-height: 1.4;
    letter-spacing: var(--track-2xs);
}

.text-xs {
    font-family: "InterVariable", "Inter", sans-serif;
    font-size: var(--text-xs);
    line-height: 1.4;
    letter-spacing: var(--track-xs);
}

.text-sm {
    font-family: "InterVariable", "Inter", sans-serif;
    font-size: var(--text-sm);
    line-height: 1.4;
    letter-spacing: var(--track-sm);
}

.text-base {
    font-family: "InterVariable", "Inter", sans-serif;
    font-size: var(--text-base);
    line-height: 1.5;

    /* letter-spacing: var(--track-base); */
}

.text-md {
    font-family: "InterVariable", "Inter", sans-serif;
    font-size: var(--text-md);
    line-height: 1.5;
    /* letter-spacing: var(--track-md); */
}

.text-lg {
    font-family: "InterVariable", "Inter", sans-serif;
    font-size: var(--text-lg);
    line-height: 1.4;
    letter-spacing: var(--track-lg);
}

.text-xl {
    font-family: "InterVariable", "InterDisplay", sans-serif;
    font-size: var(--text-xl);
    line-height: 1.25;
    letter-spacing: var(--track-xl);
}

.text-2xl {
    font-family: "InterVariable", "InterDisplay", sans-serif;
    font-size: var(--text-2xl);
    line-height: 1.2;
    letter-spacing: var(--track-xl);
    left: -0.15rem;
    position: relative;
}

.text-3xl {
    font-family: "InterVariable", "InterDisplay", sans-serif;
    font-size: var(--text-3xl);
    line-height: 1.15;
    letter-spacing: var(--track-3xl);
}

.text-4xl {
    font-family: "InterVariable", "InterDisplay", sans-serif;
    font-size: var(--text-4xl);
    line-height: 1.05;
    letter-spacing: var(--track-4xl);
}

.text-5xl {
    font-family: "InterVariable", "InterDisplay", sans-serif;
    font-size: var(--text-5xl);
    line-height: 1.05;
    letter-spacing: var(--track-5xl);
}

.text-6xl {
    font-family: "InterVariable", "InterDisplay", sans-serif;
    font-size: var(--text-6xl);
    line-height: 1.0;
    letter-spacing: var(--track-6xl);
}

.text-7xl {
    font-family: "InterVariable", "InterDisplay", sans-serif;
    font-size: var(--text-7xl);
    line-height: 0.9;
    letter-spacing: var(--track-4xl); 
}

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

/* 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: "InterVariable", "Inter", '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,
h5,
h6,
figure,
blockquote,
dl,
dd,
ul,
ol,
li {
    margin: 0;
    padding: 0;
}

/* ─── Modern Normalization Essentials (2026) ─── */
sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}

main {
    display: block;
}

hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible;
}

pre {
    font-family: monospace, monospace;
    font-size: 1em;
}

abbr[title] {
    border-bottom: none;
    text-decoration: underline;
    text-decoration: underline dotted;
}

code,
kbd,
samp {
    font-family: monospace, monospace;
    font-size: 1em;
}

small {
    font-size: 80%;
}

legend {
    box-sizing: border-box;
    color: inherit;
    display: table;
    max-width: 100%;
    padding: 0;
    white-space: normal;
}

progress {
    vertical-align: baseline;
}

textarea {
    overflow: auto;
}

details {
    display: block;
}

summary {
    display: list-item;
}

template {
    display: none;
}

/* 1. Correct the inheritance of text transform in Edge, Firefox, and IE.
   2. Remove the inheritance of text transform in Firefox. */
button,
select {
    text-transform: none;
}

/* Correct the inability to style clickable types in iOS and Safari. */
button,
[type="button"],
[type="reset"],
[type="submit"] {
    -webkit-appearance: button;
}

/* Remove the inner border and padding in Firefox. */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0;
}

/* Correct the cursor style of increment and decrement buttons in Chrome. */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
    height: auto;
}

/* Correct the odd appearance in Chrome and Safari. */
[type="search"] {
    -webkit-appearance: textfield;
    outline-offset: -2px;
}

/* Remove inner padding in Chrome/Safari on macOS */
[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

/* Correct font properties to `inherit` in Safari. */
::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit;
}

[hidden] {
    display: none;
}

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

/* *******************************
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;
    font-size: var(--text-6xl);
    line-height: 1.0;
    font-family: "InterVariable", "InterDisplay", sans-serif;
    letter-spacing: var(--track-6xl);
}

h2 {
    margin-top: 0;
    margin-bottom: 0;
    font-size: var(--text-5xl);
    line-height: 1.05;
    font-family: "InterVariable", "InterDisplay", sans-serif;
    letter-spacing: var(--track-5xl);
}

h3 {
    margin-top: 0;
    margin-bottom: 0;
    font-size: var(--text-4xl);
    line-height: 1.05;
    font-family: "InterVariable", "InterDisplay", sans-serif;
    letter-spacing: var(--track-4xl);
}

h4 {
    margin-top: 0;
    margin-bottom: 0;
    font-size: var(--text-3xl);
    line-height: 1.15;
    font-family: "InterVariable", "InterDisplay", sans-serif;
    letter-spacing: var(--track-3xl);
}

h5 {
    margin-top: 0;
    margin-bottom: 0;
    font-size: var(--text-2xl);
    line-height: 1.2;
    font-family: "InterVariable", "InterDisplay", sans-serif;
    letter-spacing: var(--track-2xl);
}

h6 {
    margin-top: 0;
    margin-bottom: 0;
    font-size: var(--text-xl);
    line-height: 1.25;
    font-family: "InterVariable", "InterDisplay", sans-serif;
    letter-spacing: var(--track-xl);
}

/* 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;
}

p {
    margin-bottom: 0;
    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: var(--space-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: var(--space-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: var(--space-3);
    padding-inline-start: var(--space-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: "InterVariable", "InterDisplay", sans-serif;

    /* font-weight: 720!important; */
    font-variation-settings: "wght" 700;

    /* Stylistic choice - OK */
}

/* ========================================================================== */
/* SplitText Animation Styles */
/* ========================================================================== */
/* Parent lines for overflow hidden - creates the mask effect */
.lineParent {
    overflow: hidden;
}

/* Child lines for animation - these move within the parent */
.lineChild {
    display: block;
}

/* ========================================================================== */
/* 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: var(--space-2-5);

    /* 1.25rem */
    padding-right: var(--space-2-5);

    /* 1.25rem */
    /* border-left: 0.25rem solid #e2e2e2; */
    border-left-width: var(--space-0-5);

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

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

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

/* *******************************
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: var(--space-4);
    margin-left: var(--space-2);
}

@media (max-width: 430px) {
    .rich-text>p>img {
        margin-bottom: var(--space-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: 90rem;

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

/* Global horizontal padding - Bern Mode (Outer Margin = 3× Gutter) */
.padding-global {
    /* Base: 4rem (R10) */
    padding-right: var(--space-8);
    padding-left: var(--space-8);
}

/* Section vertical padding - HYBRID PROTOCOL (Single Direction) */
.padding-section-small {
    padding-top: var(--space-6);
    padding-bottom: 0;
}

.padding-section-medium {
    padding-top: var(--space-10);
    padding-bottom: 0;
}

.padding-section-large {
    padding-top: var(--space-16);
    padding-bottom: 0;
}

.is-row-gapless {
    row-gap: 0!important;
}

/* Exceptions: Hero sections only.
   ⚠ section:first-of-type was REMOVED — it fired on every first <section>
   inside any container, overriding the ACF Section Spacing control.
   Apply .is-hero explicitly to blocks that need zero top-padding. */
.is-hero {
    padding-top: 0 !important;
}

/* Manual Bottom Padding Utilities (Opt-in) */
.padding-section-bottom-small {
    padding-bottom: var(--space-6);
}

.padding-section-bottom-medium {
    padding-bottom: var(--space-10);
}

.padding-section-bottom-large {
    padding-bottom: var(--space-16);
}

/* --- Responsive Adjustments for Section Padding --- */
@media (max-width: 991px) {
    /* Tablet */
    .padding-global {
        /* Tablet Outer Margin: 3.15rem (R10) approx */
        padding-right: 3.15rem;
        padding-left: 3.15rem;
    }

    .padding-section-medium {
        padding-top: var(--space-8);
    }

    .padding-section-large {
        padding-top: var(--space-12);
    }

    /* Tablet Bottom Padding Utilities */
    .padding-section-bottom-medium {
        padding-bottom: var(--space-8);

        /* 4rem */
    }

    .padding-section-bottom-large {
        padding-bottom: var(--space-12);

        /* 6rem */
    }
}

@media (max-width: 767px) {
    /* Mobile Landscape */
    .padding-global {
        padding-right: var(--space-4);

        /* 2rem - R10 */
        padding-left: var(--space-4);

        /* 2rem - R10 */
    }

    .padding-section-small {
        padding-top: var(--space-4);

        /* 2rem */
    }

    .padding-section-medium {
        padding-top: var(--space-6);

        /* 3rem */
    }

    .padding-section-large {
        padding-top: var(--space-8);

        /* 4rem */
    }

    /* Last section bottom padding (mobile) - REMOVED */
    /* section:last-of-type {
            padding-bottom: var(--space-6) !important;
        } */
    /* Mobile Bottom Padding Utilities */
    .padding-section-bottom-small {
        padding-bottom: var(--space-2);

        /* 1rem - R10 */
    }

    .padding-section-bottom-medium {
        padding-bottom: var(--space-6);

        /* 3rem - R10 */
    }

    .padding-section-bottom-large {
        padding-bottom: var(--space-8);

        /* 4rem - R10 */
    }
}

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

    /* BERN MODE: 12 Column Industrial Grid */
    --grid-main-columns: 12;

    /* Internal Gutter: 1.25rem (R10) */
    grid-template-columns: repeat(var(--grid-main-columns), 1fr);
    column-gap: var(--space-2-5);
    row-gap: var(--space-2-5);
}

/* Responsive adjustments */
/* Tablet */
@media (max-width: 991px) {
    .grid-main {
        --grid-main-columns: 8;

        /* Switch to 8 columns */
        /* Tablet gap: 1.5rem (24px) */
        --grid-main-gap: var(--space-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 Landscape gap: 1rem (16px) */
        --grid-main-gap: var(--space-2);
    }
}

/* Mobile Portrait */
@media (max-width: 430px) {
    .grid-main {
        --grid-main-columns: 4;

        /* Switch to 4 columns */
        /* Mobile Portrait gap: 1rem (16px) */
        --grid-main-gap: var(--space-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 */
}

/* Optional modifier to only remove row gap */
/* --- 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: 430px) {
    .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) - DISABLED FOR DS2026 */
/* ========================================================================== */
/* (Legacy form styling commented out for DS2026 transition) ... */
/* button,
input,
textarea,
select {
    font: inherit;
    color: inherit;
    margin: 0;
    background-color: unset;
}

label {
    display: block;
    margin-bottom: var(--space-1);
}

.form-control {
    font-family: 'Neue Montreal', 'Helvetica Neue', Arial, Helvetica, sans-serif;
    font-size: 1rem;
    font-variation-settings: "wght" 500;
    line-height: 1.1;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="number"],
textarea,
select {
    display: block;
    width: 100%;
    padding: var(--space-2) var(--space-2);
    line-height: inherit;
    background-color: #EFEFEF;
    border-radius: var(--space-0-5);
    color: var(--dark);
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

textarea {
    min-height: var(--space-16);
    resize: vertical;
}

input::placeholder,
textarea::placeholder {
    color: currentColor;
    opacity: 0.6;
}

select {
    appearance: none;
    -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");
    background-repeat: no-repeat;
    background-position: right var(--space-1-5) center;
    background-size: 1em 1em;
    padding-right: var(--space-5);
}

.custom-radio {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    gap: var(--space-1);
    margin-bottom: var(--space-1);
}

input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    background-color: transparent;
    margin: 0;
    color: currentColor;
    width: 1.5em;
    height: 1.5em;
    border: 1px solid currentColor;
    border-radius: var(--radius-full);
    transform: translateY(-0.075em);
    display: grid;
    place-content: center;
}

input[type="radio"]::before {
    content: "";
    width: 0.75em;
    height: 0.75em;
    border-radius: var(--radius-full);
    transform: scale(0);
    transition: 120ms transform ease-in-out;
    box-shadow: inset 1em 1em var(--dark);
}

input[type="radio"]:checked::before {
    transform: scale(1);
}

input[type="radio"]:focus-visible {
    outline: 2px solid var(--dark);
    outline-offset: 2px;
}

input[type="radio"].is-invalid {
    border-color: red;
}

.custom-checkbox {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    gap: var(--space-1);
    margin-bottom: var(--space-1);
}

input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    background-color: transparent;
    margin: 0;
    color: currentColor;
    width: 1.5em;
    height: 1.5em;
    transform: translateY(-0.075em);
    display: grid;
    place-content: center;
}

input[type="checkbox"]::before {
    content: "";
    width: 1em;
    height: 1em;
    transform: scale(0);
    transition: 120ms transform ease-in-out;
    box-shadow: inset 1em 1em var(--dark);
}

input[type="checkbox"]:checked::before {
    transform: scale(1);
}

input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--dark);
    outline-offset: 2px;
}

input[type="checkbox"].is-invalid {
    border-color: red;
}

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);
    -webkit-box-shadow: 0 0 0px 1000px transparent inset;
    transition: background-color 5000s ease-in-out 0s;
    font-size: inherit;
}

.form-message {
    padding: var(--space-1-5) var(--space-2);
    margin-top: var(--space-2);
    margin-bottom: var(--space-2);
    border-radius: var(--space-0-5);
    border: 1px solid transparent;
}

.form-message.is-success {
    color: #0f5132;
    background-color: #d1e7dd;
    border-color: #badbcc;
}

.form-message.is-error {
    color: #842029;
    background-color: #f8d7da;
    border-color: #f5c2c7;
}

fieldset {
    border: 1px solid currentColor;
    padding: var(--space-3);
    margin-bottom: var(--space-2);
    border-radius: var(--space-0-5);
}

legend {
    padding-left: var(--space-1);
    padding-right: var(--space-1);
    font-family: "InterVariable", "Inter", sans-serif;
    font-weight: 500;
} */
/* ========================================================================== */
/* 6. Components */
/* ========================================================================== */
/* *******************************
Buttons
******************************* */
.button-group {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: var(--space-2);

    /* 1rem */
}

/* .button {
    background-color: var(--dark);
    color: var(--white);
    padding: 0.5ch 1.25ch;
    border: none;
    border-radius: var(--space-0-5);
    cursor: pointer;
    font-size: 0.875rem;
    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;
} */
/* REDUNDANT LEGACY BUTTONS - DISABLED IN FAVOR OF ANIMATED-BUTTON.CSS (.btn)
.button:hover {
    background-color: var(--white);
    color: var(--dark);
}

.button.is-pill {
    padding: 0.4ch 1.3ch 0.4ch;
    letter-spacing: 0.015em;
    color: var(--dark);
    text-align: center;
    height: 2rem;
    font-size: 1rem;
    cursor: pointer;
    text-transform: uppercase;
    border-radius: var(--radius-full);
    border: 1px solid var(--dark);
    outline: 1px solid transparent;
    box-shadow: 0 0 1px rgba(255, 255, 255, 0);
}

.button.is-text {
    border: 2px solid transparent;
    background-color: transparent;
    color: var(--dark);
}

.button.is-small {
    padding: var(--space-1) var(--space-2-5);
}

.button.is-large {
    padding: var(--space-2) var(--space-4);
}

.button.is-secondary {
    border-style: solid;
    border-width: 1px;
    border-color: var(--dark);
    background-color: transparent;
    color: var(--dark);
}

.button.is-icon {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: var(--space-2);
    text-decoration: none;
} */
/* *******************************
Text Styles
******************************* */
.text-style-italic {
    /* font-family: 'Editorial New' */
    font-style: italic;
}

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

.text-style-mono {
    font-family: var(--font-numbers, 'JetBrains Mono', monospace);
    font-variant-numeric: tabular-nums;
}

.text-style-compact {
    font-feature-settings: "cv01" 1, "cv12" 1, "cv13" 1, "ss07" 1;
}

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

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

.text-style-muted {
    color: var(--color-text-muted);
}

.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: "InterVariable", "Inter", sans-serif;
    font-variation-settings: "wght" 300;
}

.text-weight-normal {
    font-family: "InterVariable", "Inter", sans-serif;
    font-variation-settings: "wght" 400;
}

.text-weight-medium {
    font-family: "InterVariable", "Inter", sans-serif;
    font-variation-settings: "wght" 500;
}

.text-weight-semibold {
    font-family: "InterVariable", "Inter", sans-serif;
    font-variation-settings: "wght" 600;
}

.text-weight-bold {
    font-family: "InterVariable", "Inter", sans-serif;
    font-variation-settings: "wght" 700;
}

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

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

.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: var(--white);
    color: var(--dark);

    /* height: 100% */
}

.background-color-newsletter {
    background-color: #BFC0B9;
}

.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);
}

/* *******************************
Border Radius Styles
******************************* */
/* Swiss Default: Sections, main architectural blocks, and hard containers. */
.rounded-none {
    border-radius: var(--radius-none) !important;
}

/* Micro-UI: Image thumbnails in cards, labels, tags, badges, and checkboxes. */
.rounded-sm {
    border-radius: var(--radius-sm) !important;
}

/* Component Default: Standard cards (News, Product), form inputs, and modal headers. */
.rounded-md {
    border-radius: var(--radius-md) !important;
}

/* Featured Containers: Soft highlight cards, large promo boxes, and popups/modals. */
.rounded-lg {
    border-radius: var(--radius-lg) !important;
}

/* Specialized Features: Oversized hero backgrounds or rounded layout sections. */
.rounded-xl {
    border-radius: var(--radius-xl) !important;
}

/* Interaction Pill: Circular buttons, search bars, status indicators, and avatars. */
.rounded-full {
    border-radius: var(--radius-full) !important;
}

/* *******************************
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, 0-5, 1, 1-5, 2, 2-5, 3, 4, 5, 6, 8, 10, 12, 16, 20) corresponds to
       multiples of the base spacer (0.5rem or 8px at ideal width).
     - Example: `mt-4` means `margin-top: var(--space-4)` which is `2rem` (32px).
     - Example: `p-1` means `padding: var(--space-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: var(--space-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 --- */
.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-0-5 {
    margin: var(--space-0-5) !important;
}

.mt-0-5 {
    margin-top: var(--space-0-5) !important;
}

.mr-0-5 {
    margin-right: var(--space-0-5) !important;
}

.mb-0-5 {
    margin-bottom: var(--space-0-5) !important;
}

.ml-0-5 {
    margin-left: var(--space-0-5) !important;
}

.mx-0-5 {
    margin-left: var(--space-0-5) !important;
    margin-right: var(--space-0-5) !important;
}

.my-0-5 {
    margin-top: var(--space-0-5) !important;
    margin-bottom: var(--space-0-5) !important;
}

.m-1 {
    margin: var(--space-1) !important;
}

.mt-1 {
    margin-top: var(--space-1) !important;
}

.mr-1 {
    margin-right: var(--space-1) !important;
}

.mb-1 {
    margin-bottom: var(--space-1) !important;
}

.ml-1 {
    margin-left: var(--space-1) !important;
}

.mx-1 {
    margin-left: var(--space-1) !important;
    margin-right: var(--space-1) !important;
}

.my-1 {
    margin-top: var(--space-1) !important;
    margin-bottom: var(--space-1) !important;
}

.m-1-5 {
    margin: var(--space-1-5) !important;
}

.mt-1-5 {
    margin-top: var(--space-1-5) !important;
}

.mr-1-5 {
    margin-right: var(--space-1-5) !important;
}

.mb-1-5 {
    margin-bottom: var(--space-1-5) !important;
}

.ml-1-5 {
    margin-left: var(--space-1-5) !important;
}

.mx-1-5 {
    margin-left: var(--space-1-5) !important;
    margin-right: var(--space-1-5) !important;
}

.my-1-5 {
    margin-top: var(--space-1-5) !important;
    margin-bottom: var(--space-1-5) !important;
}

.m-2 {
    margin: var(--space-2) !important;
}

.mt-2 {
    margin-top: var(--space-2) !important;
}

.mr-2 {
    margin-right: var(--space-2) !important;
}

.mb-2 {
    margin-bottom: var(--space-2) !important;
}

.ml-2 {
    margin-left: var(--space-2) !important;
}

.mx-2 {
    margin-left: var(--space-2) !important;
    margin-right: var(--space-2) !important;
}

.my-2 {
    margin-top: var(--space-2) !important;
    margin-bottom: var(--space-2) !important;
}

.m-2-5 {
    margin: var(--space-2-5) !important;
}

.mt-2-5 {
    margin-top: var(--space-2-5) !important;
}

.mr-2-5 {
    margin-right: var(--space-2-5) !important;
}

.mb-2-5 {
    margin-bottom: var(--space-2-5) !important;
}

.ml-2-5 {
    margin-left: var(--space-2-5) !important;
}

.mx-2-5 {
    margin-left: var(--space-2-5) !important;
    margin-right: var(--space-2-5) !important;
}

.my-2-5 {
    margin-top: var(--space-2-5) !important;
    margin-bottom: var(--space-2-5) !important;
}

.m-3 {
    margin: var(--space-3) !important;
}

.mt-3 {
    margin-top: var(--space-3) !important;
}

.mr-3 {
    margin-right: var(--space-3) !important;
}

.ml-3 {
    margin-left: var(--space-3) !important;
}

.mb-3 {
    margin-bottom: var(--space-3) !important;
}

.mx-3 {
    margin-left: var(--space-3) !important;
    margin-right: var(--space-3) !important;
}

.my-3 {
    margin-top: var(--space-3) !important;
    margin-bottom: var(--space-3) !important;
}

.m-4 {
    margin: var(--space-4) !important;
}

.mt-4 {
    margin-top: var(--space-4) !important;
}

.mr-4 {
    margin-right: var(--space-4) !important;
}

.mb-4 {
    margin-bottom: var(--space-4) !important;
}

.ml-4 {
    margin-left: var(--space-4) !important;
}

.mx-4 {
    margin-left: var(--space-4) !important;
    margin-right: var(--space-4) !important;
}

.my-4 {
    margin-top: var(--space-4) !important;
    margin-bottom: var(--space-4) !important;
}

.m-5 {
    margin: var(--space-5) !important;
}

.mt-5 {
    margin-top: var(--space-5) !important;
}

.mr-5 {
    margin-right: var(--space-5) !important;
}

.mb-5 {
    margin-bottom: var(--space-5) !important;
}

.ml-5 {
    margin-left: var(--space-5) !important;
}

.mx-5 {
    margin-left: var(--space-5) !important;
    margin-right: var(--space-5) !important;
}

.my-5 {
    margin-top: var(--space-5) !important;
    margin-bottom: var(--space-5) !important;
}

.m-6 {
    margin: var(--space-6) !important;
}

.mt-6 {
    margin-top: var(--space-6) !important;
}

.mr-6 {
    margin-right: var(--space-6) !important;
}

.mb-6 {
    margin-bottom: var(--space-6) !important;
}

.ml-6 {
    margin-left: var(--space-6) !important;
}

.mx-6 {
    margin-left: var(--space-6) !important;
    margin-right: var(--space-6) !important;
}

.my-6 {
    margin-top: var(--space-6) !important;
    margin-bottom: var(--space-6) !important;
}

.m-8 {
    margin: var(--space-8) !important;
}

.mt-8 {
    margin-top: var(--space-8) !important;
}

.mr-8 {
    margin-right: var(--space-8) !important;
}

.mb-8 {
    margin-bottom: var(--space-8) !important;
}

.ml-8 {
    margin-left: var(--space-8) !important;
}

.mx-8 {
    margin-left: var(--space-8) !important;
    margin-right: var(--space-8) !important;
}

.my-8 {
    margin-top: var(--space-8) !important;
    margin-bottom: var(--space-8) !important;
}

.m-10 {
    margin: var(--space-10) !important;
}

.mt-10 {
    margin-top: var(--space-10) !important;
}

.mr-10 {
    margin-right: var(--space-10) !important;
}

.mb-10 {
    margin-bottom: var(--space-10) !important;
}

.ml-10 {
    margin-left: var(--space-10) !important;
}

.mx-10 {
    margin-left: var(--space-10) !important;
    margin-right: var(--space-10) !important;
}

.my-10 {
    margin-top: var(--space-10) !important;
    margin-bottom: var(--space-10) !important;
}

.m-12 {
    margin: var(--space-12) !important;
}

.mt-12 {
    margin-top: var(--space-12) !important;
}

.mr-12 {
    margin-right: var(--space-12) !important;
}

.mb-12 {
    margin-bottom: var(--space-12) !important;
}

.ml-12 {
    margin-left: var(--space-12) !important;
}

.mx-12 {
    margin-left: var(--space-12) !important;
    margin-right: var(--space-12) !important;
}

.my-12 {
    margin-top: var(--space-12) !important;
    margin-bottom: var(--space-12) !important;
}

.m-16 {
    margin: var(--space-16) !important;
}

.mt-16 {
    margin-top: var(--space-16) !important;
}

.mr-16 {
    margin-right: var(--space-16) !important;
}

.mb-16 {
    margin-bottom: var(--space-16) !important;
}

.ml-16 {
    margin-left: var(--space-16) !important;
}

.mx-16 {
    margin-left: var(--space-16) !important;
    margin-right: var(--space-16) !important;
}

.my-16 {
    margin-top: var(--space-16) !important;
    margin-bottom: var(--space-16) !important;
}

.m-20 {
    margin: var(--space-20) !important;
}

.mt-20 {
    margin-top: var(--space-20) !important;
}

.mr-20 {
    margin-right: var(--space-20) !important;
}

.mb-20 {
    margin-bottom: var(--space-20) !important;
}

.ml-20 {
    margin-left: var(--space-20) !important;
}

.mx-20 {
    margin-left: var(--space-20) !important;
    margin-right: var(--space-20) !important;
}

.my-20 {
    margin-top: var(--space-20) !important;
    margin-bottom: var(--space-20) !important;
}

.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-0-5 {
    padding: var(--space-0-5) !important;
}

.pt-0-5 {
    padding-top: var(--space-0-5) !important;
}

.pr-0-5 {
    padding-right: var(--space-0-5) !important;
}

.pb-0-5 {
    padding-bottom: var(--space-0-5) !important;
}

.pl-0-5 {
    padding-left: var(--space-0-5) !important;
}

.px-0-5 {
    padding-left: var(--space-0-5) !important;
    padding-right: var(--space-0-5) !important;
}

.py-0-5 {
    padding-top: var(--space-0-5) !important;
    padding-bottom: var(--space-0-5) !important;
}

.p-1 {
    padding: var(--space-1) !important;
}

.pt-1 {
    padding-top: var(--space-1) !important;
}

.pr-1 {
    padding-right: var(--space-1) !important;
}

.pb-1 {
    padding-bottom: var(--space-1) !important;
}

.pl-1 {
    padding-left: var(--space-1) !important;
}

.px-1 {
    padding-left: var(--space-1) !important;
    padding-right: var(--space-1) !important;
}

.py-1 {
    padding-top: var(--space-1) !important;
    padding-bottom: var(--space-1) !important;
}

.p-1-5 {
    padding: var(--space-1-5) !important;
}

.pt-1-5 {
    padding-top: var(--space-1-5) !important;
}

.pr-1-5 {
    padding-right: var(--space-1-5) !important;
}

.pb-1-5 {
    padding-bottom: var(--space-1-5) !important;
}

.pl-1-5 {
    padding-left: var(--space-1-5) !important;
}

.px-1-5 {
    padding-left: var(--space-1-5) !important;
    padding-right: var(--space-1-5) !important;
}

.py-1-5 {
    padding-top: var(--space-1-5) !important;
    padding-bottom: var(--space-1-5) !important;
}

.p-2 {
    padding: var(--space-2) !important;
}

.pt-2 {
    padding-top: var(--space-2) !important;
}

.pr-2 {
    padding-right: var(--space-2) !important;
}

.pb-2 {
    padding-bottom: var(--space-2) !important;
}

.pl-2 {
    padding-left: var(--space-2) !important;
}

.px-2 {
    padding-left: var(--space-2) !important;
    padding-right: var(--space-2) !important;
}

.py-2 {
    padding-top: var(--space-2) !important;
    padding-bottom: var(--space-2) !important;
}

.p-2-5 {
    padding: var(--space-2-5) !important;
}

.pt-2-5 {
    padding-top: var(--space-2-5) !important;
}

.pr-2-5 {
    padding-right: var(--space-2-5) !important;
}

.pb-2-5 {
    padding-bottom: var(--space-2-5) !important;
}

.pl-2-5 {
    padding-left: var(--space-2-5) !important;
}

.px-2-5 {
    padding-left: var(--space-2-5) !important;
    padding-right: var(--space-2-5) !important;
}

.py-2-5 {
    padding-top: var(--space-2-5) !important;
    padding-bottom: var(--space-2-5) !important;
}

.p-3 {
    padding: var(--space-3) !important;
}

.pt-3 {
    padding-top: var(--space-3) !important;
}

.pr-3 {
    padding-right: var(--space-3) !important;
}

.pb-3 {
    padding-bottom: var(--space-3) !important;
}

.pl-3 {
    padding-left: var(--space-3) !important;
}

.px-3 {
    padding-left: var(--space-3) !important;
    padding-right: var(--space-3) !important;
}

.py-3 {
    padding-top: var(--space-3) !important;
    padding-bottom: var(--space-3) !important;
}

.p-4 {
    padding: var(--space-4) !important;
}

.pt-4 {
    padding-top: var(--space-4) !important;
}

.pr-4 {
    padding-right: var(--space-4) !important;
}

.pb-4 {
    padding-bottom: var(--space-4) !important;
}

.pl-4 {
    padding-left: var(--space-4) !important;
}

.px-4 {
    padding-left: var(--space-4) !important;
    padding-right: var(--space-4) !important;
}

.py-4 {
    padding-top: var(--space-4) !important;
    padding-bottom: var(--space-4) !important;
}

.p-5 {
    padding: var(--space-5) !important;
}

.pt-5 {
    padding-top: var(--space-5) !important;
}

.pr-5 {
    padding-right: var(--space-5) !important;
}

.pb-5 {
    padding-bottom: var(--space-5) !important;
}

.pl-5 {
    padding-left: var(--space-5) !important;
}

.px-5 {
    padding-left: var(--space-5) !important;
    padding-right: var(--space-5) !important;
}

.py-5 {
    padding-top: var(--space-5) !important;
    padding-bottom: var(--space-5) !important;
}

.p-6 {
    padding: var(--space-6) !important;
}

.pt-6 {
    padding-top: var(--space-6) !important;
}

.pr-6 {
    padding-right: var(--space-6) !important;
}

.pb-6 {
    padding-bottom: var(--space-6) !important;
}

.pl-6 {
    padding-left: var(--space-6) !important;
}

.px-6 {
    padding-left: var(--space-6) !important;
    padding-right: var(--space-6) !important;
}

.py-6 {
    padding-top: var(--space-6) !important;
    padding-bottom: var(--space-6) !important;
}

.p-8 {
    padding: var(--space-8) !important;
}

.pt-8 {
    padding-top: var(--space-8) !important;
}

.pr-8 {
    padding-right: var(--space-8) !important;
}

.pb-8 {
    padding-bottom: var(--space-8) !important;
}

.pl-8 {
    padding-left: var(--space-8) !important;
}

.px-8 {
    padding-left: var(--space-8) !important;
    padding-right: var(--space-8) !important;
}

.py-8 {
    padding-top: var(--space-8) !important;
    padding-bottom: var(--space-8) !important;
}

.p-10 {
    padding: var(--space-10) !important;
}

.pt-10 {
    padding-top: var(--space-10) !important;
}

.pr-10 {
    padding-right: var(--space-10) !important;
}

.pb-10 {
    padding-bottom: var(--space-10) !important;
}

.pl-10 {
    padding-left: var(--space-10) !important;
}

.px-10 {
    padding-left: var(--space-10) !important;
    padding-right: var(--space-10) !important;
}

.py-10 {
    padding-top: var(--space-10) !important;
    padding-bottom: var(--space-10) !important;
}

.p-12 {
    padding: var(--space-12) !important;
}

.pt-12 {
    padding-top: var(--space-12) !important;
}

.pr-12 {
    padding-right: var(--space-12) !important;
}

.pb-12 {
    padding-bottom: var(--space-12) !important;
}

.pl-12 {
    padding-left: var(--space-12) !important;
}

.px-12 {
    padding-left: var(--space-12) !important;
    padding-right: var(--space-12) !important;
}

.py-12 {
    padding-top: var(--space-12) !important;
    padding-bottom: var(--space-12) !important;
}

.p-16 {
    padding: var(--space-16) !important;
}

.pt-16 {
    padding-top: var(--space-16) !important;
}

.pr-16 {
    padding-right: var(--space-16) !important;
}

.pb-16 {
    padding-bottom: var(--space-16) !important;
}

.pl-16 {
    padding-left: var(--space-16) !important;
}

.px-16 {
    padding-left: var(--space-16) !important;
    padding-right: var(--space-16) !important;
}

.py-16 {
    padding-top: var(--space-16) !important;
    padding-bottom: var(--space-16) !important;
}

.p-20 {
    padding: var(--space-20) !important;
}

.pt-20 {
    padding-top: var(--space-20) !important;
}

.pr-20 {
    padding-right: var(--space-20) !important;
}

.pb-20 {
    padding-bottom: var(--space-20) !important;
}

.pl-20 {
    padding-left: var(--space-20) !important;
}

.px-20 {
    padding-left: var(--space-20) !important;
    padding-right: var(--space-20) !important;
}

.py-20 {
    padding-top: var(--space-20) !important;
    padding-bottom: var(--space-20) !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: 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 {
    /* GPU promotion handled by GSAP */
    /* backface-visibility: hidden */
}

.sticky {
    position: sticky;

    /* top: 6rem; */
    top: var(--space-12);

    /* 6rem */
}

@media (max-width: 430px) {
    .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 var(--dark); */
/* 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: 100svh;
    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: 100svh;
    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;
    }
}

/* * ========================================
 * SECTION: Utilities (March 2026)
 * ======================================== */
/* DARKEN BACKGROUND OVERLAYS - ported from components/darken-background.css */
.darken-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.26), rgba(0, 0, 0, 0.16));
    filter: brightness(0.2) contrast(0.5);
    mix-blend-mode: multiply;
    z-index: 3;
    pointer-events: none;
}

.darken-light::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.08);
    filter: brightness(0.2) contrast(0.5);
    mix-blend-mode: multiply;
    z-index: 3;
    pointer-events: none;
}

/* ──────────────────────────────────────────────────────────────────────────
   BORDER RADIUS UTILITIES (Fixed Pixel Logic)
   Guidance for consistent corner softness:
   - none: Swiss default. Structural blocks/sections.
   - xs (2px): Micro-UI. Tickboxes, badges, small tags.
   - sm (4px): Thumbnails, secondary buttons, labels.
   - md (8px): Primary Cards (News/Products), form inputs.
   - lg (16px): Large modals, soft highlights.
   - xl (32px): Intentional organic softness / Banner features.
   - full: Circular/Pill shapes (Search bars, pills).
   ────────────────────────────────────────────────────────────────────────── */
.rounded-none {
    border-radius: var(--radius-none) !important;
}

.rounded-xs {
    border-radius: var(--radius-xs) !important;
}

.rounded-sm {
    border-radius: var(--radius-sm) !important;
}

.rounded-md {
    border-radius: var(--radius-md) !important;
}

.rounded-lg {
    border-radius: var(--radius-lg) !important;
}

.rounded-xl {
    border-radius: var(--radius-xl) !important;
}

.rounded-full {
    border-radius: var(--radius-full) !important;
}