/* Self-hosted Google Fonts — no visitor data sent to Google. Files in media/fonts/. */
@font-face{font-family:'Fira Sans';font-style:normal;font-weight:500;font-display:swap;src:url('/media/fonts/fira-sans-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Fira Sans';font-style:normal;font-weight:500;font-display:swap;src:url('/media/fonts/fira-sans-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Fira Sans';font-style:normal;font-weight:600;font-display:swap;src:url('/media/fonts/fira-sans-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Fira Sans';font-style:normal;font-weight:600;font-display:swap;src:url('/media/fonts/fira-sans-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Fira Sans';font-style:normal;font-weight:700;font-display:swap;src:url('/media/fonts/fira-sans-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Fira Sans';font-style:normal;font-weight:700;font-display:swap;src:url('/media/fonts/fira-sans-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:500;font-display:swap;src:url('/media/fonts/montserrat-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:500;font-display:swap;src:url('/media/fonts/montserrat-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:600;font-display:swap;src:url('/media/fonts/montserrat-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:600;font-display:swap;src:url('/media/fonts/montserrat-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;src:url('/media/fonts/montserrat-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;src:url('/media/fonts/montserrat-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:300;font-display:swap;src:url('/media/fonts/open-sans-300-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:300;font-display:swap;src:url('/media/fonts/open-sans-300-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/media/fonts/open-sans-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/media/fonts/open-sans-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:600;font-display:swap;src:url('/media/fonts/open-sans-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:600;font-display:swap;src:url('/media/fonts/open-sans-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/*font-family: 'Fira Sans', sans-serif;*/
/*font-family: 'Open Sans', sans-serif;*/

:root {

    --font-color-white: white;
    --font-color-black: #333333;
    --main-font: 'Fira Sans', sans-serif;
    
    /* tag - Header */
    --tag-font-size-calc: calc(16px + (28 - 16) * ((100vw - 500px) / (1500 - 100)));
    --tag-font-size-clamp: clamp(16px, calc(16px + (28 - 16) * ((100vw - 100px) / (2500 - 100))), 28px); 
    --tag-font-weight: 600;
    --tag-font-family:  var(--main-font);
    
    /* h60 - Header */
    --h60-font-size-calc: calc(16px + (60 - 16) * ((100vw - 500px) / (1500 - 100)));
    --h60-font-size-clamp: clamp(16px, calc(16px + (60 - 16) * ((100vw - 100px) / (2500 - 100))), 60px); 
    --h60-color: var(--font-color-white);
    --h60-font-weight: 600;
    --h60-font-family:  var(--main-font);
    
    /* h46 - Header */
    --h46-font-size-calc: calc(16px + (46 - 16) * ((100vw - 500px) / (1500 - 100)));
    --h46-font-size-clamp: clamp(16px, calc(16px + (46 - 16) * ((100vw - 100px) / (2500 - 100))), 46px);
    --h46-line-height-calc: calc(20px + (55 - 20) * ((100vw - 500px) / (1500 - 100)));
    --h46-line-height-clamp: clamp(20px, calc(20px + (55 - 20) * ((100vw - 100px) / (2500 - 100))), 55px);
    --h46-color: var(--font-color-black);
    --h46-font-weight: 600;
    --h46-font-family:  var(--main-font);

    /* h28 - Header */
    --h28-font-size-calc: calc(16px + (28 - 16) * ((100vw - 500px) / (1500 - 100)));
    --h28-font-size-clamp: clamp(16px, calc(16px + (28 - 16) * ((100vw - 100px) / (2500 - 100))), 28px);
    --h28-letter-spacing: 1px;
    --h28-line-height-calc: calc(22px + (39 - 22) * ((100vw - 500px) / (1500 - 100)));
    --h28-line-height-clamp: clamp(22px, calc(22px + (39 - 22) * ((100vw - 100px) / (2500 - 100))), 39px);
    --h28-text-transform: uppercase;
    --h28-color: var(--font-color-black);
    --h28-font-weight: 700;
    --h28-font-family:  var(--main-font);
    
    /* h20 - Header */
    --h20-font-size-calc: calc(16px + (20 - 16) * ((100vw - 500px) / (1500 - 100)));
    --h20-font-size-clamp: clamp(16px, calc(16px + (20 - 16) * ((100vw - 100px) / (2500 - 100))), 20px);
    --h20-letter-spacing: 1px;
    --h20-line-height-calc: calc(29px + (36 - 29) * ((100vw - 500px) / (1500 - 100)));
    --h20-line-height-clamp: clamp(29px, calc(29px + (36 - 29) * ((100vw - 100px) / (2500 - 100))), 36px);
    --h20-text-transform: uppercase;
    --h20-color: var(--font-color-white);
    --h20-font-weight: 700;
    --h20-font-family:  var(--main-font);
    
    /* h36 - Header */
    --h36-font-size-calc: calc(16px + (36 - 16) * ((100vw - 500px) / (1500 - 100)));
    --h36-font-size-clamp: clamp(16px, calc(16px + (36 - 16) * ((100vw - 100px) / (2500 - 100))), 36px);
    --h36-letter-spacing: 4px;
    --h36-line-height-calc: calc(24px + (53 - 24) * ((100vw - 500px) / (1500 - 100)));
    --h36-line-height-clamp: clamp(24px, calc(24px + (53 - 24) * ((100vw - 100px) / (2500 - 100))), 53px);
    --h36-text-transform: uppercase;
    --h36-color: var(--font-color-white);
    --h36-font-weight: 600;
    --h36-font-family:  var(--main-font);
    
    /* h30 - Header */
    --h30-font-size-calc: calc(16px + (30 - 16) * ((100vw - 500px) / (2500 - 100)));
    --h30-font-size-clamp: clamp(16px, calc(16px + (30 - 16) * ((100vw - 100px) / (2500 - 100))), 30px);
    --h30-letter-spacing: 4px;
    --h30-line-height-calc: calc(29px + (53 - 29) * ((100vw - 500px) / (2500 - 100)));
    --h30-line-height-clamp: clamp(29px, calc(29px + (53 - 29) * ((100vw - 500px) / (2500 - 100))), 53px);
    --h30-text-transform: uppercase;
    --h30-color: var(--font-color-black);
    --h30-font-weight: 600;
    --h30-font-family:  var(--main-font);

    /* p38 - Paragraph */
    --p38-font-size-calc: calc(12px + (38 - 12) * ((100vw - 500px) / (1500 - 100)));
    --p38-font-size-clamp: clamp(12px, calc(12px + (38 - 12) * ((100vw - 100px) / (2500 - 100))), 38px);
    --p38-line-height-calc: calc(18px + (55 - 18) * ((100vw - 500px) / (1500 - 100)));
    --p38-line-height-clamp: clamp(18px, calc(18px + (55 - 18) * ((100vw - 100px) / (2500 - 100))), 55px);
    --p38-color: var(--font-color-white);
    --p38-font-weight: 500;
    --p38-font-family:  var(--main-font);
    
    /* p28 - paragraph */
    --p28-font-size-calc: calc(16px + (28 - 16) * ((100vw - 500px) / (1500 - 100)));
    --p28-font-size-clamp: clamp(16px, calc(16px + (28 - 16) * ((100vw - 100px) / (2500 - 100))), 28px);
    --p28-line-height-calc: calc(22px + (38 - 22) * ((100vw - 500px) / (1500 - 100)));
    --p28-line-height-clamp: clamp(22px, calc(22px + (38 - 22) * ((100vw - 100px) / (2500 - 100))), 38px);
    --p28-color: var(--font-color-white);
    --p28-font-weight: 500;
    --p28-font-family: var(--main-font);
    
    /* p20 - paragraph */
    --p20-font-size-calc: calc(16px + (20 - 16) * ((100vw - 500px) / (1500 - 100)));
    --p20-font-size-clamp: clamp(16px, calc(16px + (20 - 16) * ((100vw - 100px) / (2500 - 100))), 20px);
    --p20-line-height-calc: calc(28px + (35 - 28) * ((100vw - 500px) / (1500 - 100)));
    --p20-line-height-clamp: clamp(28px, calc(28px + (35 - 28) * ((100vw - 100px) / (2500 - 100))), 35px);
    --p20-color: var(--font-color-white);
    --p20-font-weight: 600;
    --p20-font-family: 'Open Sans', sans-serif;
    
    /* p31 - paragraph */
    --p31-font-size-calc: calc(16px + (31 - 16) * ((100vw - 500px) / (1500 - 100)));
    --p31-font-size-clamp: clamp(16px, calc(16px + (31 - 16) * ((100vw - 100px) / (2500 - 100))), 31px);
    --p31-line-height-calc: calc(29px + (56 - 29) * ((100vw - 500px) / (1500 - 100)));
    --p31-line-height-clamp: clamp(29px, calc(29px + (56 - 29) * ((100vw - 100px) / (2500 - 100))), 56px);
    --p31-color: var(--font-color-black);
    --p31-font-weight: 600;
    --p31-font-family: var(--main-font);
    
        /* p30 - paragraph */
    --p30-font-size-calc: calc(16px + (30 - 16) * ((100vw - 500px) / (2500 - 100)));
    --p30-font-size-clamp: clamp(16px, calc(16px + (30 - 16) * ((100vw - 100px) / (2500 - 100))), 30px);
    --p30-line-height-calc: calc(25px + (46 - 25) * ((100vw - 500px) / (1500 - 100)));
    --p30-line-height-clamp: clamp(25px, calc(25px + (46 - 25) * ((100vw - 100px) / (2500 - 100))), 46px);
    --p30-color: var(--font-color-black);
    --p30-font-weight: 500;
    --p30-font-family: 'Open Sans', sans-serif;
    
    
    
    /* p18 - paragraph */
    --p18-font-size-calc: calc(12px + (18 - 12) * ((100vw - 500px) / (1500 - 100)));
    --p18-font-size-clamp: clamp(12px, calc(12px + (18 - 12) * ((100vw - 100px) / (2500 - 100))), 18px);
    --p18-line-height-calc: calc(20px + (30 - 20) * ((100vw - 500px) / (1500 - 100)));
    --p18-line-height-clamp: clamp(20px, calc(20px + (30 - 20) * ((100vw - 100px) / (2500 - 100))), 30px);
    --p18-color: var(--font-color-white);
    --p18-font-weight: 400;
    --p18-font-family: 'Open Sans', sans-serif;


    /* UTIL */
    --wc-h1-font-size-calc: calc(16px + (60 - 16) * ((100vw - 500px) / (1500 - 100)));
    --wc-h1-font-size-clamp: clamp(16px, calc(16px + (60 - 16) * ((100vw - 100px) / (2500 - 100))), 60px); 

    /* Banner Css */
    --banner-font-size-calc: calc(37px + (47 - 37) * ((100vw - 500px) / (1000 - 500)));
    --banner-font-size-clamp: clamp(37px, calc(37px + (47 - 37) * ((100vw - 500px) / (1000 - 500))), 47px); 

    /* Nav */
    --navbar-border: 1px solid #80808075;

    --logo-width-calc: calc(200px + (300 - 200) * ((100vw - 500px) / (1000 - 500)));
    --logo-width-clamp: clamp(200px, calc(200px + (300 - 200) * ((100vw - 500px) / (1000 - 500))), 300px);

    --nav-top-bottom-space-calc: 5px;
    --nav-top-bottom-space-clamp: 5px;

    --nav-item-side-space-calc: calc(5px + (12 - 5) * ((100vw - 500px) / (1000 - 500)));
    --nav-item-side-space-clamp: clamp(5px, calc(5px + (12 - 5) * ((100vw - 500px) / (1000 - 500))), 12px);
   
    --nav-item-font-size-calc: calc(10px + (16 - 10) * ((100vw - 500px) / (1500 - 400)));
    --nav-item-font-size-clamp: clamp(10px, calc(10px + (16 - 10) * ((100vw - 500px) / (1500 - 400))), 16px);

    /* spacing */
    --section-side-spaceing-calc: calc(15px + (20 - 15) * ((100vw - 500px) / (1000 - 500)));
    --section-side-spaceing-clamp: clamp(15px, calc(15px + (20 - 15) * ((100vw - 500px) / (1000 - 500))), 20px);

    /* --- Semantic color & focus tokens (accessibility). CSS custom properties inherit
       into Shadow DOM, so components reference these instead of hard-coded colors.
       Values are AA-verified against the WCAG contrast formula (ratios noted). --- */
    --surface-dark: #2e3136;          /* dark nav / footer surface */
    --brand-red: #d31145;             /* brand red — AA on white (5.3:1) */
    --brand-red-on-dark: #ff6f88;     /* AA-safe red on the dark nav (4.9:1) */
    --nav-accent-on-dark: #ffffff;    /* nav tagline + active item on the dark bar — WHITE (recommended; avoids clashing with the red logo). For a compliant brand-red instead, set this to #ff6f88. */
    --brand-blue: #0077c0;            /* brand blue — for light surfaces */
    --brand-blue-on-dark: #4aa3df;    /* AA-safe blue on dark (4.7:1) */
    --btn-danger-bg: #c9302c;         /* submit button bg, white text (5.3:1) */
    --btn-danger-bg-hover: #a4001c;   /* darker hover */
    --error-text: #c9302c;            /* form error text on white (5.3:1) */
    --border-input: #767676;          /* form field borders on white (4.5:1, non-text) */
    --text-muted-on-dark: #aeb1b4;    /* muted footer text on dark (6:1) */
    --focus-ring: #0a5c92;            /* focus outline on light surfaces (7:1) */
    --focus-ring-on-dark: #5fb0e6;    /* focus outline on dark surfaces (5.5:1) */
    --focus-ring-color: var(--focus-ring); /* contextual default; dark surfaces override locally */
}

/* Global keyboard focus indicator for light-DOM controls (WCAG 2.4.7 / 2.4.11).
   Shadow-DOM components (nav, footer, contact form) carry their own surface-aware rings. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ===== High-contrast mode =====
   Enabled by the footer "High contrast" toggle (sets html[data-contrast="high"])
   and auto-enabled when the operating system's "increase contrast" setting is on.
   These overrides only push existing colors toward MAXIMUM contrast — never lower it —
   and cascade into every component (incl. shadow DOM) through the inherited tokens. */
html[data-contrast="high"] {
    --font-color-black: #000000;      /* text on light surfaces -> 21:1 */
    --font-color-white: #ffffff;      /* text on dark surfaces  -> 21:1 */
    --text-muted-on-dark: #ffffff;    /* footer muted text -> full contrast */
    --border-input: #000000;          /* form field borders */
    --brand-blue: #00497a;            /* links on white -> ~7:1 */
    --brand-blue-on-dark: #bfe1ff;    /* blue on dark -> high contrast */
    --error-text: #a4001c;            /* error text -> darker red */
    --focus-ring: #00375c;            /* focus outline on light */
    --nav-accent-on-dark: #ffffff;    /* nav text stays pure white */
}
html[data-contrast="high"] a { text-decoration: underline; }

html {
    margin: 0;
    padding: 0;
    height: 100vh;
    width: 100vw;
    max-width: 100%;
    overflow-x: hidden;
    /* keep keyboard-focused elements + anchor/skip-link targets clear of the sticky nav (WCAG 2.4.11) */
    scroll-padding-top: 100px;
}

body {
    margin: 0;
    padding: 0;
    height: 100vh;
    width: 100vw;
    max-width: 100%;
}

main, wc-outlet {
    width: 100vw;
    overflow-x: hidden;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}


/* tag - Header */
.tag {
    font-size: var(--tag-font-size-calc);
    font-size: var(--tag-font-size-clamp);
    color: var(--tag-color);
    font-weight: tag(--h60-font-weight);
    font-family: tag(--h60-font-family);
}
/* h60 - Header */
.h60 {
    font-size: var(--h60-font-size-calc);
    font-size: var(--h60-font-size-clamp);
    color: var(--h60-color);
    font-weight: var(--h60-font-weight);
    font-family: var(--h60-font-family);
}
/* h46 - Header */
.h46 {
    font-size: var(--h46-font-size-calc);
    font-size: var(--h46-font-size-clamp);
    line-height: var(--h46-line-height-calc);
    line-height: var(--h46-line-height-clamp);
    color: var(--h46-color);
    font-weight: var(--h46-font-weight);
    font-family: var(--h46-font-family);
}
/* h20 - Header */
.h20 {
    font-size: var(--h20-font-size-calc);
    font-size: var(--h20-font-size-clamp);
    letter-spacing: var(--h20-letter-spacing);
    line-height: var(--h20-line-height-calc);
    line-height: var(--h20-line-height-clamp);
    text-transform: var(--h20-text-transform);
    color: var(--h20-color);
    font-weight: var(--h20-font-weight);
    font-family: var(--h20-font-family);
}
.h28 {
    font-size: var(--h28-font-size-calc);
    font-size: var(--h28-font-size-clamp);
    letter-spacing: var(--h28-letter-spacing);
    line-height: var(--h28-line-height-calc);
    line-height: var(--h28-line-height-clamp);
    text-transform: var(--h28-text-transform);
    color: var(--h28-color);
    font-weight: var(--h28-font-weight);
    font-family: var(--h28-font-family);
}
/* h30 - Header */
.h30 {
    font-size: var(--h30-font-size-calc);
    font-size: var(--h30-font-size-clamp);
    letter-spacing: var(--h30-letter-spacing);
    line-height: var(--h30-line-height-calc);
    line-height: var(--h30-line-height-clamp);
    text-transform: var(--h30-text-transform);
    color: var(--h30-color);
    font-weight: var(--h30-font-weight);
    font-family: var(--h30-font-family);
}
/* h36 - Header */
.h36 {
    font-size: var(--h36-font-size-calc);
    font-size: var(--h36-font-size-clamp);
    letter-spacing: var(--h36-letter-spacing);
    line-height: var(--h36-line-height-calc);
    line-height: var(--h36-line-height-clamp);
    text-transform: var(--h36-text-transform);
    color: var(--h36-color);
    font-weight: var(--h36-font-weight);
    font-family: var(--h36-font-family);
}
 /* p38 - Paragraph */
.p38 {
    font-size: var(--p38-font-size-calc);
    font-size: var(--p38-font-size-clamp);
    line-height: var(--p38-line-height-calc);
    line-height: var(--p38-line-height-clamp);
    color: var(--p38-color);
    font-weight: var(--p38-font-weight);
    font-family: var(--p38-font-family);
}
/* p31 - paragraph */
 .p31 {
     font-size: var(--p31-font-size-calc);
     font-size: var(--p31-font-size-clamp);
     line-height: var(--p31-line-height-calc);
     line-height: var(--p31-line-height-clamp);
     color: var(--p31-color);
     font-weight: var(--p31-font-weight);
     font-family: var(--p31-font-family);
 }
/* p30 - paragraph */
 .p30 {
     font-size: var(--p30-font-size-calc);
     font-size: var(--p30-font-size-clamp);
     line-height: var(--p30-line-height-calc);
     line-height: var(--p30-line-height-clamp);
     color: var(--p30-color);
     font-weight: var(--p30-font-weight);
     font-family: var(--p30-font-family);
 }
/* p28 - paragraph */
 .p28 {
     font-size: var(--p28-font-size-calc);
     font-size: var(--p28-font-size-clamp);
     line-height: var(--p28-line-height-calc);
     line-height: var(--p28-line-height-clamp);
     color: var(--p28-color);
     font-weight: var(--p28-font-weight);
     font-family: var(--p28-font-family);
 }
 /* p20 - paragraph */
 .p20 {
     font-size: var(--p20-font-size-calc);
     font-size: var(--p20-font-size-clamp);
     line-height: var(--p20-line-height-calc);
     line-height: var(--p20-line-height-clamp);
     color: var(--p20-color);
     font-weight: var(--p20-font-weight);
     font-family: var(--p20-font-family);
 }
/* p18 - paragraph */
.p18 {
    font-size: var(--p18-font-size-calc);
    font-size: var(--p18-font-size-clamp);
    line-height: var(--p18-line-height-calc);
    line-height: var(--p18-line-height-clamp);
    color: var(--p18-color);
    font-weight: var(--p18-font-weight);
    font-family: var(--p18-font-family);
}

/* Skip to main content link styling */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #000;
  color: #fff;
  padding: 8px 16px;
  z-index: 100;
  font-size: 0.875rem;
  text-decoration: none;
  transition: top 0.3s ease;
}
.skip-link:focus {
  top: 0;
}