@font-face {
    font-family: 'Khand';
    src: url('../fonts/Khand-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;

}

@font-face {
    font-family: 'Khand';
    src: url('../fonts/Khand-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;

}

@font-face {
    font-family: 'Khand';
    src: url('../fonts/Khand-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;

}

@font-face {
    font-family: 'Khand';
    src: url('../fonts/Khand-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;

}

@font-face {
    font-family: 'Khand';
    src: url('../fonts/Khand-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;

}

:root {

    --space-0: 0;
    --space-1: 0.5rem;
    --space-2: 1rem;
    --space-3: 1.5rem;
    --space-4: 2rem;
    --space-5: 3rem;
    --space-6: 4rem;
    --space-7: 5rem; 
    --space-8: 6rem; 

    --font-family-base: 'Open Sans', Arial, sans-serif;
	--font-family-heading: 'Khand', Arial, sans-serif;
	--font-family-ui: 'Khand', Arial, sans-serif;

    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-md: 1rem;
    --font-size-lg: clamp(1.1rem, 2vw, 1.25rem);
    --font-size-xl: clamp(1.25rem, 4vw, 1.5rem);
    --font-size-2xl: clamp(1.5rem, 4vw, 2.25rem);
    --font-size-3xl: clamp(2rem, 5vw, 3.5rem);

    --line-height-tight: 1.1;
    --line-height-normal: 1.6;
    --line-height-relaxed: 1.75; 

    --font-weight-light: 300;
    --font-weight-regular: 400; 
    --font-weight-medium: 500;
    --font-weight-semibold: 600; 
    --font-weight-bold: 700;

    --letter-spacing-tight: -0.02em; 
    --letter-spacing-normal: 0; 
    --letter-spacing-wide: 0.08em;

    --underline-offset-base: 0.15em; 

    --radius-none: 0;
	--radius-sm: 0.5rem;
    --radius-md: 1rem;
    --radius-lg: 1.5rem; 
    --radius-xl: 2rem; 
    --radius-pill: 999px;
    --border-width-base: 1px;

    --duration-fast: 0.2s;
    --duration-base: 0.25s;
    --duration-slow: 0.4s;
    --duration-nav:  0.5s;
    --ease-standard: ease;
    --ease-emphasized: cubic-bezier(0.2, 0.8, 0.2, 1); 

    --z-base: 1;
    --z-dropdown: 20;
    --z-sticky: 30;
    --z-overlay: 40;
    --z-modal: 50; 

    --color-shadow-sm: rgba(0, 0, 0, 0.04);
    --color-shadow-md: rgba(0, 0, 0, 0.06);
    --color-shadow-lg: rgba(0, 0, 0, 0.10);

    --container-default: 75rem;
    --container-narrow:  48rem;
    --container-wide:    90rem;
    --reading-max:       65ch;

    --color-primary:        #0068AC;
    --color-primary-hover:  #00468C;
    --color-accent:         #FBC232;
    --color-text: #404040;
    --color-heading: #1F1A17;
    --color-heading-muted: #555555;
    --color-lead: #111111;
    --color-text-muted: #737070;
	--color-text-subtle: #BFBFBF; 
    --color-text-on-primary: #ffffff;
    --color-bg: rgba(0, 104, 172, 0.05);
    --color-border: rgba(0, 104, 172, 0.15);

    --color-extra-40ms:     #9EB5C4;
    --color-extra-hover-a:  #0068AC;   
    --color-extra-hover-b:  #8FA7B7;    

    --color-surface: #ffffff;
    --color-surface-alt: #fbfbf8;

    --color-success: #16794a; 
    --color-warning: #9a6700; 
    --color-danger: #b42318; 

    --color-focus-ring: rgba(17, 17, 17, 0.18);
    --color-selection-bg: rgba(17, 17, 17, 0.12);

    --header-height: 128px;
    --logo-height:   4rem;  
    --layout-padding-inline: var(--space-3);
    --section-gap:       var(--space-4);  
    --section-padding:   var(--space-3);  

	--header-brand-zone: 30vw;  

    --focus-ring: 0 0 0 3px var(--color-focus-ring);

    --grid-gap: var(--space-3);
    --grid-gap-inner: var(--space-2);

    --card-icon-height: 6rem;  
    --card-icon-size:   8rem;  

    --grid-cols-2: repeat(2, minmax(0, 1fr)); 
    --grid-cols-3: repeat(3, minmax(0, 1fr));
    --grid-cols-4: repeat(4, minmax(0, 1fr)); 
    --grid-cols-5: repeat(5, minmax(0, 1fr)); 
    --grid-cols-6: repeat(6, minmax(0, 1fr)); 
    --grid-cols-auto-sm: repeat(auto-fit, minmax(200px, 1fr)); 
    --grid-cols-auto-md: repeat(auto-fit, minmax(250px, 1fr)); 
    --grid-cols-auto-lg: repeat(auto-fit, minmax(300px, 1fr)); 
    --grid-cols-hero: 1.2fr 0.8fr; 
    --grid-cols-footer: 1.3fr 0.9fr 0.9fr 0.9fr 1.2fr; 

    --shadow-sm: 0 2px 8px var(--color-shadow-sm); 
    --shadow-md: 0 8px 24px var(--color-shadow-md);
    --shadow-lg: 0 20px 48px var(--color-shadow-lg);

    --color-header-bg: rgba(255, 255, 255, 0.85);
    --blur-header: 12px;

    --color-footer-bg: rgba(225, 235, 235, 0.75);
    --blur-footer: 12px;
    --footer-media-bg:
        linear-gradient(45deg, rgba(225, 235, 235, 0.75) 0%, rgb(225, 235, 235, 0.75) 100%);

    --button-padding-y: 0.875rem;
    --button-padding-x: 1.25rem;
    --button-padding-y-sm: 0.625rem;
    --button-padding-x-sm: 1rem;
    --button-padding-y-lg: 1rem;
    --button-padding-x-lg: 1.5rem;

    --heading-lead-gap: var(--space-2); 
    --card-ui-heading-font:   var(--font-family-base);
    --card-ui-heading-weight: var(--font-weight-bold);
    --card-ui-heading-color:  var(--color-heading);
    --card-ui-heading-size:   var(--font-size-md);

	--tile-polygon-h: 6rem;
	--tile-polygon-w: calc(var(--tile-polygon-h) * 1.5);

    --social-icon-link-size: 2.5rem;
    --social-icon-size: 1.5rem;
    --social-icon-link-size-lg: 2.75rem;
    --social-icon-size-lg: 1.5rem;
    --social-icon-hover-translate-y: -1px;

    --hero-height-full: calc(100vh - var(--header-height));
    --hero-height-compact: clamp(32rem, 72vh, 48rem);
    --hero-safe-padding-y: clamp(var(--space-4), 8vh, var(--space-6));
    --hero-offset-base: calc(var(--header-height) + var(--space-2));
    --hero-offset-sticky: calc(var(--header-height) + var(--space-3));
    --hero-content-max: 60rem;
    --hero-eyebrow-max: 32rem;
    --hero-title-max: 30ch;
    --hero-text-max: 60ch; 

    --hero-img-size-max: 40rem;  
    --hero-img-size-min: 12rem;  

    --breadcrumbs-height: 3.5rem;

    --page-header-height-full: calc(100vh - var(--header-height) - var(--breadcrumbs-height));

    --page-header-img-size-max: 32rem;  
    --page-header-img-size-min: 10rem;  

    --visual-height-desktop:   calc(30vh + 30vw);                        
    --visual-width-mobile:     calc(30vh + 30vw);                        

    --hero-overlay-gradient:
        linear-gradient(
            180deg,
            rgba(0, 104, 172, 0.15) 0%,
            rgba(0, 104, 172, 0.0) 40%,
            rgba(0, 104, 172, 0.05) 100%
        );
    --hero-accent-bg:
        radial-gradient(circle at 15% 20%, rgba(255, 255, 255, 0.08), transparent 0 35%),
        radial-gradient(circle at 85% 30%, rgba(255, 255, 255, 0.05), transparent 0 28%);
    --hero-accent-opacity: 0.6;

    --bg-layer-width:       clamp(10rem, 38vw, 20rem); 
    --bg-layer-calibration: 1; 
    --bg-layer-slope:     0.5;   
    --bg-layer-bottom-w:  4rem;  

    --hero-layer-base-bg: ; 
	--hero-layer-1-bg:   var(--color-accent);
    --hero-layer-1-clip: polygon(
        0 0,
        100% 0,
        max(0px, calc(100% - var(--hero-actual-h, 100vh) * var(--bg-layer-slope))) 100%,
        0 100%
    );

    --page-header-layer-base-bg: ;  
	--page-header-layer-1-bg:   var(--color-accent);
    --page-header-layer-1-clip: polygon(
        0 0,
        100% 0,
        calc(100% - var(--page-header-actual-h, 16rem) * var(--bg-layer-slope)) 100%,
        0 100%
    );

}

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

html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
li,
blockquote,
figure {
    margin: 0;
}

ul,
ol {
    padding: 0;
}

img,
picture,
svg {
    display: block;
    max-width: 100%;
    height: auto;
}

button,
input,
textarea,
select {
    font: inherit;
    color: inherit;
}

button,
[role="button"],
label[for],
select,
summary {
    cursor: pointer;
}

button {
    border: 0;
    background: none;
    padding: 0;
}

[hidden] {
    display: none !important;
}

html {
    color-scheme: light;
}

body {
    font-family: var(--font-family-base);
    font-size: var(--font-size-md);
    line-height: var(--line-height-normal);
    color: var(--color-text);
    background: var(--color-bg);
    transition: opacity var(--duration-slow) var(--ease-standard);
}

.js body {
    opacity: 0;
}

.js.js-loaded body {
    opacity: 1;
}

main {
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

::selection {
    background: var(--color-selection-bg);
}

:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

ul,
ol {
    padding-left: var(--space-4);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-family-heading);
    color: var(--color-heading);
    font-weight: 600;
    line-height: var(--line-height-tight);
}

h1 {
    font-size: var(--font-size-3xl);
    margin-bottom: var(--space-2);
    font-weight: 400;
}

h2 {
    font-size: var(--font-size-2xl);
    color: var(--color-heading-muted);
    margin-bottom: var(--space-2);
}

h3 {
    font-size: var(--font-size-xl);
    color: var(--color-heading-muted);
    margin-top: var(--space-2);
    margin-bottom: var(--space-1);
}

strong {
    font-weight: var(--font-weight-bold);
}

em {
    font-style: italic;
}

figcaption {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.eyebrow,
.text-eyebrow {
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    font-size: var(--font-size-sm);
}

.text-lead {
    font-size: var(--font-size-lg);
}

.text-meta,
.text-caption,
.text-small {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.flow > * + * {
    margin-top: var(--space-2);
}

.flow-sm > * + * {
    margin-top: var(--space-1);
}

.flow-lg > * + * {
    margin-top: var(--space-3);
}

.container {
    width: min(100%, var(--container-default));
    margin: 0 auto;
}

.container--wide {
    width: min(100%, var(--container-wide));
    margin: 0 auto;
}

.container--narrow {
    width: min(100%, var(--container-narrow));
    margin: 0 auto;
}

.container--full {
    width: 100%;
}

.grid {
    display: grid;
    gap: var(--grid-gap);
}

.grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid--auto-fit {
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.stack {
    display: flex;
    flex-direction: column;
    gap: var(--grid-gap);
}

.cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--grid-gap);
    align-items: center;
}

.split {
    display: grid;
    gap: var(--grid-gap);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.site-header {
    position: relative;
    z-index: var(--z-sticky);
    backdrop-filter: blur(var(--blur-header));
    overflow: visible;
}

.site-header::after {
    content: '';
    position: absolute;
    inset: 0;
    background: #ffffff;
    z-index: -1;
}

.site-header::before {
    content: '';
    position: absolute;
    inset: 0;
    right: auto;

    width: calc(var(--header-diagonal-x, 232px) + var(--header-height) * var(--bg-layer-slope));
    background: var(--color-accent);
    clip-path: polygon(
        0 0,
        100% 0,
        calc(100% - var(--header-height) * var(--bg-layer-slope)) 100%,
        0 100%
    );
    z-index: 0;
}

.site-header--sticky {
    position: sticky;
    top: 0;
}

.site-header__inner {
    min-height: var(--header-height);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding-inline: var(--layout-padding-inline);
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
}

.site-header__brand {
    font-weight: var(--font-weight-bold);
    flex: 1;
    position: relative;
    z-index: 1;
}

.site-header__ycf {
    position: absolute;

    left: calc(var(--header-diagonal-x, 180px) + var(--header-height) * var(--bg-layer-slope));
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    display: block;
    width: calc(var(--logo-height, 4rem) * 1.375 * 2); 
    height: calc(var(--logo-height, 4rem) * 1.375);
    background-image: url('../img/logo_YCF.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left center;
}

.site-header__logo {
    display: inline-block; 
    height: var(--logo-height, 4rem);
    width:  calc(var(--logo-height, 4rem) * 1.5); 
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left center;
    vertical-align: middle;
}

.site-header__nav {
    min-width: 0;
    font-family: var(--font-family-ui);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-light);
    position: relative;
    z-index: 1;
}

.site-nav__link.is-current {
    text-decoration: none;
    position: relative;
    color: var(--color-text-muted);
    display: inline-block;
    user-select: none;
}

.site-nav__link.is-current::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0.1em;
    width: 100%;
    height: 2px;
    background: var(--color-primary);
    border-radius: var(--radius-pill);
    animation: underline-reveal 0.4s var(--ease-standard) forwards;
}

@keyframes underline-reveal {
    from { clip-path: inset(0 50% 0 50%); }
    to   { clip-path: inset(0 0 0 0); }
}

.site-nav__toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 2.5rem;
    height: 2.5rem;
    cursor: pointer;
    background: none;
    border: none;
    padding: var(--space-1);
    flex-shrink: 0;
}

.site-nav__toggle span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--color-text);
    border-radius: var(--radius-pill);
    transition:
        transform var(--duration-base) var(--ease-standard),
        opacity var(--duration-base) var(--ease-standard);
}

.site-nav__toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.site-nav__toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}

.site-nav__toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

input[type="checkbox"] {
    cursor: pointer;
}

input[type="checkbox"]:checked {
    accent-color: var(--color-primary);
}

.site-nav {
    display: none;
    flex-direction: column;
    gap: var(--space-1);
}

@media (max-width: 1100px) {
    .site-nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--color-header-bg);
        backdrop-filter: blur(var(--blur-header));
        border-bottom: var(--border-width-base) solid var(--color-border);
        padding-inline: var(--layout-padding-inline);
        padding-top: var(--space-1);
        padding-bottom: var(--space-3);
        z-index: var(--z-dropdown);
        align-items: center;

        opacity: 0;
        transform: translateY(-0.5rem);
        pointer-events: none;
        transition:
            opacity var(--duration-slow) var(--ease-standard),
            transform var(--duration-slow) var(--ease-standard);
    }

    .site-nav.is-open {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }

    .site-nav__link {
        width: 14rem;            
        padding-inline: var(--space-3);
        text-align: center;
    }

    .site-nav__link.is-current::after {
        bottom: calc(var(--space-1) * 1.5);

        left: var(--space-3);
        width: calc(100% - var(--space-3) * 2);
    }

    .site-nav__link--button {
        padding-inline: var(--space-4);
        text-align: center;
        width: 14rem;
    }
}

.site-nav.is-open {
    display: flex;
}

.site-nav__link {
    color: var(--color-text-muted);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
    padding-block: var(--space-1);
    transition: color var(--duration-nav) var(--ease-standard);
}

@media (max-width: 1100px) {
    .site-nav__link {
        padding-block: calc(var(--space-1) * 1.5);
    }
}

.site-nav__link--button {
    font-family: var(--font-family-heading);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-lg);
    color: var(--color-text-on-primary);
    background: var(--color-primary);
    border: var(--border-width-base) solid currentColor;
    border-radius: var(--radius-pill);
    padding-inline: var(--button-padding-x-sm);
    padding-block: var(--button-padding-y-sm);
    transition:
        background var(--duration-nav) var(--ease-standard),
        color var(--duration-nav) var(--ease-standard);
}

.site-nav__link--button:hover {
    background: var(--color-primary-hover);
    color: var(--color-text-on-primary);
}

.site-nav__link--button.is-current {
	color: var(--color-primary);
    background: var(--color-surface);
    border: var(--border-width-base) solid var(--color-primary);
}

.site-nav__link--button.is-current::after {
    display: none;
}

.hero,
.page-header {
    position: relative;
    overflow: clip; 
}

.site-header--sticky + .hero {
    scroll-margin-top: var(--header-height);
}

.site-header--sticky + .hero .hero__safe {
    padding-top: var(--hero-offset-sticky);
}

.hero {
    min-height: var(--hero-height-full);
    padding: 0;
    display: flex;
    align-items: stretch;
    isolation: isolate;
}

.hero--compact {
    min-height: var(--hero-height-compact);
}

.hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.hero__bg-layer {
    position: absolute;
    inset: 0;
}

.hero__bg-layer--base {
    background: var(--color-surface);
}

.hero__bg-layer--overlay {
    background: var(--hero-overlay-gradient);
}

.hero__bg-layer--accent {
    opacity: var(--hero-accent-opacity);
    background: var(--hero-accent-bg);
}

.hero__bg-layer--1 {
    right: auto;
    width: calc(var(--header-diagonal-x, 232px) + var(--polygon-scroll-offset, 0px));
    background: var(--hero-layer-1-bg, transparent);
    clip-path: polygon(
        0 0,
        100% 0,
        calc(100% - var(--hero-actual-h, 100vh) * var(--bg-layer-slope)) 100%,
        0 100%
    );
}

.hero__bg-layer--2 {
    background-image:    var(--hero-layer-2-img, none);
    background-repeat:   no-repeat;
    background-position: right bottom calc(var(--breadcrumbs-height) + var(--border-width-base));
    background-size:     var(--visual-width-mobile);
}

@media (min-width: 768px) {
    .hero__bg-layer--2 {
        background-size: var(--visual-height-desktop);
    }
}

.hero__inner {
    position: relative;
    z-index: var(--z-base);
    display: flex;
    align-items: stretch;
    padding-inline: var(--layout-padding-inline);
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
}

.hero__safe {
    width: 100%;
    display: flex;
    align-items: flex-start;
    min-height: 100%;

    margin-top:  calc(var(--font-size-sm) * var(--line-height-normal) + var(--space-2));
    padding-bottom: var(--hero-safe-padding-y);
}

.hero--compact .hero__safe {
    align-items: flex-end;
    padding-top: var(--hero-offset-base);
    padding-bottom: var(--space-4);
}

.hero__content {
    width: 100%;
    max-width: var(--hero-content-max);
}

.hero__eyebrow {
    margin-bottom: var(--space-2);
    max-width: var(--hero-eyebrow-max);
}

.hero__title {
    max-width: var(--container-narrow);
    margin-bottom: var(--heading-lead-gap);
    max-width: var(--hero-title-max);
    text-wrap: balance;
}

.hero__text {
    max-width: var(--container-narrow);
    color: var(--color-lead);
    margin-bottom: var(--space-1);
	font-size: var(--font-size-lg);
    text-wrap: pretty;
}

.hero__cta {
    max-width: var(--container-narrow);
    color: var(--color-text-muted);
    margin-top: var(--space-3);
    text-wrap: pretty;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.hero__scroll {
    position: absolute;
    bottom: calc(var(--space-4) + var(--breadcrumbs-height) + var(--border-width-base));
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--z-base);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-pill);
    border: none;
    background: var(--color-primary);
    cursor: pointer;
    box-shadow: var(--shadow-md);
    transition: opacity var(--duration-nav) var(--ease-standard);
    animation: hero-scroll-bounce 2s ease infinite;
}

.hero__scroll:hover {
    background: var(--color-primary-hover);
    opacity: 1;
}

@keyframes hero-scroll-bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%       { transform: translateX(-50%) translateY(6px); }
}

a {
    color: var(--color-primary);
    transition: color var(--duration-nav) var(--ease-standard);
}

a:hover {
    color: var(--color-primary-hover);
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    padding: var(--button-padding-y-sm) var(--button-padding-x-sm);
    border-radius: var(--radius-pill);
    background: var(--color-primary);
    color: var(--color-text-on-primary);
	font-family: var(--font-family-ui);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-lg);
    transition:
        background var(--duration-nav) var(--ease-standard),
        color var(--duration-nav) var(--ease-standard),
        border-color var(--duration-nav) var(--ease-standard),
        transform var(--duration-nav) var(--ease-standard);
}

.button:hover {
    background: var(--color-primary-hover);
    color: var(--color-text-on-primary);
}

.button--secondary {
    background: var(--color-extra-40ms);
    color: var(--color-text-on-primary);
    border: none;
}

.button--secondary:hover {
    background: var(--color-extra-hover-a);
    color: var(--color-text-on-primary);
}

.button--ghost {
    background: var(--color-extra-40ms);
    color: var(--color-text-on-primary);
    border: none;
}

.button--ghost:hover {
    background: var(--color-extra-hover-a);
    color: var(--color-text-on-primary);
}

.button--link {
    background: transparent;
    color: var(--color-text);
    border: 0;
    padding: 0;
    border-radius: 0;
}

.button--link:hover {
    background: transparent;
    color: var(--color-text);
    text-decoration: underline;
}

.button--sm {
    padding: var(--button-padding-y-sm) var(--button-padding-x-sm);
}

.button--lg {
    padding: var(--button-padding-y-lg) var(--button-padding-x-lg);
}

.site-footer {
    background: var(--color-footer-bg);
    backdrop-filter: blur(var(--blur-footer));
    border-top: var(--border-width-base) solid var(--color-border);
    border-bottom: none;
}

.site-footer__inner {
    color: var(--color-text-muted);
    padding-inline: var(--layout-padding-inline);
    padding-top: var(--space-5);
    padding-bottom: var(--space-5);
}

.site-footer__stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.site-footer__grid {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .site-footer__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .site-footer__grid > .site-footer__col:first-child {
        grid-column: span 2;
    }
}

@media (min-width: 1101px) {
    .site-footer__grid {
        grid-template-columns: repeat(var(--footer-cols, 4), minmax(0, 1fr));
    }

    .site-footer__grid > .site-footer__col:first-child {
        grid-column: span 1;
    }
}

.site-footer__col {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
}

.site-footer__col--brand {
    gap: var(--space-2);
}

.site-footer__logo {
    display: block;
    height: 3rem;
    width: auto;
}

.site-footer__text {
    color: var(--color-text);
    font-weight: var(--font-weight-bold);
}

.site-footer__company {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    font-size: var(--font-size-sm);
}

.site-footer__company p {
    margin: 0;
}

.site-footer__company-name {
    color: var(--color-text);
    font-weight: var(--font-weight-bold);
}

.site-footer__heading {
    margin: 0;
    color: var(--color-text);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
}

.site-footer__list {
    list-style: none;
    padding-left: 0;
    display: grid;
    gap: var(--space-1);
}

.site-footer__link {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    transition: color var(--duration-nav) var(--ease-standard);
}

.site-footer__link::before {
    content: '–';
    color: var(--color-extra-40ms);
    margin-right: var(--space-1);
}

.site-footer__link:hover {
    color: var(--color-text);
}

.site-footer__social-list {
    display: grid;
    grid-template-columns: repeat(3, auto);
    gap: var(--space-2);
    align-items: start;
    justify-content: start;
}

.site-footer__social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: var(--social-icon-link-size);
    min-width: var(--social-icon-link-size);
    height: var(--social-icon-link-size);
    border: none;
    border-radius: var(--radius-pill);
    background: var(--color-extra-40ms);
    color: var(--color-text-on-primary);
    transition:
        transform var(--duration-nav) var(--ease-standard),
        background var(--duration-nav) var(--ease-standard);
}

.site-footer__social-link:hover {
    transform: translateY(var(--social-icon-hover-translate-y));
    background: var(--color-extra-hover-a);
    color: var(--color-text-on-primary);
}

.site-footer__social-link svg {
    display: block;
    width: var(--social-icon-size);
    height: var(--social-icon-size);
    flex: 0 0 var(--social-icon-size);
    fill: currentColor;
}

.site-footer__media {
    display: flex;
    flex-direction: column;
}

.site-footer__media-bg {
    display: block;

    width:  calc(var(--logo-height, 4rem) * 1.375 * 2);
    height: calc(var(--logo-height, 4rem) * 1.375);
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: left top;
    background-size: contain;
    overflow: hidden;
}

.site-footer__image,
.site-footer__map-placeholder {
    width: 100%;
    aspect-ratio: 4 / 3;
    border: var(--border-width-base) solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--footer-media-bg);
    overflow: hidden;
}

.site-footer__image {
    object-fit: cover;
}

.site-footer__bottom {
    margin-top: var(--space-4);
    padding-top: var(--space-3);
    border-top: var(--border-width-base) solid var(--color-border);
}

.site-footer__copyright {
    font-size: var(--font-size-xs);
}

.page-header {
    min-height:        var(--page-header-height-full);
    display:           flex;
    align-items:       stretch;
    border-bottom:     var(--border-width-base) solid var(--color-border);
    scroll-margin-top: var(--header-height);
}

.page-header__bg {
    position:       absolute;
    inset:          0;
    z-index:        0;
    pointer-events: none;
}

.page-header__bg-layer {
    position: absolute;
    inset:    0;
}

.page-header__bg-layer--base {
    background: var(--page-header-layer-base-bg, none);
}

.page-header__bg-layer--1 {
    right:      auto;
    width:      calc(var(--header-diagonal-x, 232px) + var(--polygon-scroll-offset, 0px));
    background: var(--page-header-layer-1-bg, transparent);
    clip-path: polygon(
        0 0,
        100% 0,
        calc(100% - var(--page-header-actual-h, 16rem) * var(--bg-layer-slope)) 100%,
        0 100%
    );
}

@media (max-width: 1100px) {
    .hero__bg-layer--1,
    .page-header__bg-layer--1 {
        bottom: auto;
        height: var(--header-height);
        clip-path: polygon(
            0 0,
            100% 0,
            calc(100% - var(--header-height) * var(--bg-layer-slope)) 100%,
            0 100%
        );
    }
}

.page-header__bg-layer--2 {
    background-image:    var(--page-header-layer-2-img, none);
    background-repeat:   no-repeat;
    background-position: right bottom 0;
    background-size:     var(--visual-width-mobile);
}

@media (min-width: 768px) {
    .page-header__bg-layer--2 {
        background-size: var(--visual-height-desktop);
    }
}

.page-header__inner {
    position:        relative;
    z-index:         1;
    display:         flex;
    flex-direction:  column;
    justify-content: flex-start;
    padding-inline:  var(--layout-padding-inline);
    padding-top:     0;
    padding-bottom:  var(--space-5);
    margin-top:      calc(var(--space-3) * 2); 
}

.page-header__eyebrow {
    margin-bottom: var(--space-2);
}

.page-header__title {
    max-width: var(--container-narrow);
    margin-bottom: var(--heading-lead-gap);
    text-wrap: pretty;
}

.page-header--post .page-header__title {
    max-width: var(--reading-max);
}

.page-header__text {
    max-width: var(--container-narrow);
    color: var(--color-lead);
	font-size: var(--font-size-lg);
    margin-bottom: var(--space-1);
    text-wrap: pretty;
}

.page-header__cta {
    margin-top: var(--space-3);
}

.page-header--compact {
    min-height: 0;
}

.page-header--compact .page-header__scroll {
    display: none;
}

.page-header__scroll {
    position:        absolute;
    bottom:          var(--space-4);
    left:            50%;
    transform:       translateX(-50%);
    z-index:         2;
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           3rem;
    height:          3rem;
    border-radius:   var(--radius-pill);
    border:          none;
    background:      var(--color-primary);
    cursor:          pointer;
    box-shadow:      var(--shadow-md);
    transition:      opacity var(--duration-nav) var(--ease-standard);
    animation:       hero-scroll-bounce 2s ease infinite;
}

.page-header__scroll:hover {
    background: var(--color-primary-hover);
    opacity: 1;
}

.breadcrumbs {
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
    border-bottom: var(--border-width-base) solid var(--color-border);
}

.breadcrumbs__inner {
    padding-inline: var(--layout-padding-inline);
}

.breadcrumbs__list {
    list-style: none;
    padding-left: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1);
}

.breadcrumbs__link {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    transition: color var(--duration-nav) var(--ease-standard);
}

.breadcrumbs__link:hover {
    color: var(--color-extra-hover-a);
}

.breadcrumbs__current,
.breadcrumbs__text {
    color: var(--color-text);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.breadcrumbs__separator {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.back-to-top {
    position: fixed;
    bottom: var(--space-4);
    right: var(--space-4);
    z-index: var(--z-sticky);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-pill);
    background: var(--color-primary);
    cursor: pointer;
    border: none;
    box-shadow: var(--shadow-md);
    opacity: 0;
    transform: translateY(0.5rem);
    pointer-events: none;
    transition:
        opacity var(--duration-nav) var(--ease-standard),
        transform var(--duration-nav) var(--ease-standard);
}

.back-to-top.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.back-to-top:hover {
    background: var(--color-primary-hover);
    transform: translateY(-2px);
}

.back-to-top[hidden] {
    display: none;
}

.cookie-consent {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: var(--z-overlay);
    background: var(--color-surface);
    border-top: var(--border-width-base) solid var(--color-border);
    box-shadow: var(--shadow-lg);
}

.cookie-consent__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding-inline: var(--layout-padding-inline);
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
}

.cookie-consent__text {
    flex: 1;
    min-width: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    max-width: none;
}

.cookie-consent__actions {
    display: flex;
    gap: var(--space-2);
    flex-shrink: 0;
}

.cookie-consent[hidden] {
    display: none;
}

.section {
    padding:       0;
    margin-bottom: var(--section-gap);
}

.hero + .section,
.hero + .breadcrumbs + .section,
.page-header + .section,
.page-header + .breadcrumbs + .section {
    margin-top: var(--section-gap);
}

.section__inner {
    background:      var(--color-surface);
    border:          var(--border-width-base) solid var(--color-border);
    border-radius:   var(--radius-none) var(--radius-md) var(--radius-md) var(--radius-md);
    padding-inline:  var(--layout-padding-inline);
    padding-top:     var(--section-padding);
    padding-bottom:  var(--section-padding);
}

.section__header {
    margin-bottom: var(--space-3);
}

.section__content {
    display: block;
}

.section__content p, .section__body p, .post__body p,
.section__content ul, .section__body ul, .post__body ul,
.section__content ol, .section__body ol, .post__body ol {
    margin-top: var(--space-1);
    margin-bottom: var(--space-0);
}

.section__content p:first-child, .section__body p:first-child, .post__body p:first-child,
.section__content ul:first-child, .section__body ul:first-child, .post__body ul:first-child,
.section__content ol:first-child, .section__body ol:first-child, .post__body ol:first-child {
    margin-top: var(--space-0);
}

.section__content p + ul, .section__body p + ul, .post__body p + ul,
.section__content p + ol, .section__body p + ol, .post__body p + ol {
    margin-top: var(--space-0);
}

.section__actions,
.section__cta, 
.section__content .section__cta,
.section__body .section__cta,
.post__back-link, 
.post__body .post__back-link {
	margin-top: var(--space-2);
}

.section--alt .section__inner {
    background: var(--color-surface-alt);
}

.section--with-image {
    overflow: hidden;
}

.section--with-image .section__inner {
    padding: 0;
}

.section__bg-header {
    position:            relative;
    width:               100%;
    aspect-ratio:        3 / 1;
    background-repeat:   no-repeat;
    background-position: 0 0;
    background-size:     cover;
    border-radius:       var(--radius-none) var(--radius-md) var(--radius-none) var(--radius-none);
}

.section--with-image .section__content-col {
    position:        relative;
    z-index:         1;
    padding-inline:  var(--layout-padding-inline);
    padding-top:     var(--section-padding);
    padding-bottom:  var(--section-padding);
    margin-top:      calc(-100% / 6); 
}

.section--with-image .section__image-col {
    display: none;
}

@media (max-width: 767px) {

    .page-header__inner {
        margin-top: var(--space-3); 
    }

}

.content-block--image,
.image-block {
    display: block;
}

.image-block__caption {
    margin-top: var(--space-1);
}

.card {
    border:               var(--border-width-base) solid var(--color-border);
    border-radius:        var(--radius-none) var(--radius-md) var(--radius-md) var(--radius-md);
    padding:              var(--space-3);
    background:           var(--color-bg);
    display:              grid;
    grid-template-rows:   subgrid;
    grid-row:             span 3; 
    align-content:        start;
    position:             relative;
    overflow:             hidden;
}

.card::before {
    content:     '';
    position:    absolute;
    top:         0;
    left:        0;
    width:       var(--tile-polygon-w);
    height:      var(--tile-polygon-h);
    background:  var(--color-border);
    clip-path: polygon(
    0 0,
    100% 0,
    calc(100% - var(--tile-polygon-h) * var(--bg-layer-slope)) 100%,
    0 100%
	);
    z-index:     0;
}

.card__title {
    margin-top:    0;
    margin-bottom: var(--grid-gap-inner);
    font-family:   var(--card-ui-heading-font);
    font-weight:   var(--card-ui-heading-weight);
    color:         var(--card-ui-heading-color);
    font-size:     var(--card-ui-heading-size);
}

.card__text {
    color:         var(--color-text-muted);
    margin-bottom: 0;
}

.cards {
    display:               grid;
    grid-template-columns: 1fr;
    grid-auto-rows:        auto;
    column-gap:            var(--grid-gap);
    row-gap:               var(--grid-gap);
    margin-top:            var(--space-3);
}

@media (max-width: 1023px) {
    .card {
        grid-template-rows: auto;
        grid-row:           auto;
    }
}

@media (min-width: 640px) {
    .cards { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
    .cards[data-count="2"] { grid-template-columns: repeat(2, 1fr); }
    .cards[data-count="3"] { grid-template-columns: repeat(3, 1fr); }
    .cards[data-count="4"] { grid-template-columns: repeat(4, 1fr); }
    .cards[data-count="5"],
    .cards[data-count="6"],
    .cards[data-count="9"] { grid-template-columns: repeat(3, 1fr); }
    .cards[data-count="7"],
    .cards[data-count="8"],
    .cards[data-count="10"] { grid-template-columns: repeat(4, 1fr); }

    .cards:not([data-count]) { grid-template-columns: repeat(4, 1fr); }
}

.cta-block__actions {
    margin-top: var(--space-2);
}

.section__body {
    display: block;
}

.section__body--split > * + * {
    margin-top: var(--grid-gap);
}

@media (min-width: 768px) {
    .section__body--split > * + * {
        margin-top: 0;
    }

    .section__body--split {
        display:               grid;
        grid-template-columns: 1fr 1fr;
        gap:                   var(--space-5);
        align-items:           start;
    }

}

.section__gallery {
    display:               grid;
    gap:                   var(--grid-gap);
    grid-template-columns: 1fr;
}

.section__gallery--cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.section__gallery--multi {
    grid-template-columns: repeat(2, 1fr);
}

.post__cta {
    margin-top: var(--space-3);
}

.section__gallery-item {
    cursor:        zoom-in;
    border-radius: var(--radius-none);
    overflow:      hidden;
    border:        var(--border-width-base) solid var(--color-border);
    margin:        0;
    transition:    opacity var(--duration-slow) var(--ease-standard),
                   transform var(--duration-slow) var(--ease-standard);
}

.section__gallery-item img {
    width:      100%;
    height:     auto;
    display:    block;
    object-fit: cover;
    transition: transform var(--duration-slow) var(--ease-standard);
}

.section__gallery-item:hover img {
    transform: scale(1.03);
}

.section__gallery-caption {
    padding:     var(--space-1) var(--space-2);
    font-size:   var(--font-size-sm);
    color:       var(--color-text-muted);
    line-height: var(--line-height-normal);
}

.lightbox {
    position:        fixed;
    inset:           0;
    z-index:         var(--z-overlay);
    background:      rgba(0, 0, 0, 0.88);
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         var(--space-4);
    opacity:         0;
    transition:      opacity var(--duration-slow) var(--ease-standard);
    pointer-events:  none;
}

.lightbox.is-open {
    opacity:        1;
    pointer-events: auto;
}

.lightbox[hidden] { display: none; }

.lightbox__img {
    max-width:    90vw;
    max-height:   90vh;
    object-fit:   contain;
    border-radius: var(--radius-none);
    box-shadow:   var(--shadow-lg);
    display:      block;
}

.lightbox__caption {
    position:    absolute;
    bottom:      var(--space-4);
    left:        50%;
    transform:   translateX(-50%);
    color:       rgba(255, 255, 255, 0.85);
    font-size:   var(--font-size-sm);
    white-space: nowrap;
}

.lightbox__close {
    position:    absolute;
    top:         var(--space-3);
    right:       var(--space-3);
    background:  transparent;
    border:      none;
    color:       rgba(255, 255, 255, 0.9);
    font-size:   2rem;
    line-height: 1;
    cursor:      pointer;
    padding:     var(--space-1);
    transition:  color var(--duration-nav) var(--ease-standard);
}

.lightbox__close:hover {
    color: #fff;
}

.lightbox__nav {
    position:        absolute;
    top:             50%;
    transform:       translateY(-50%);
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           3rem;
    height:          3rem;
    border-radius:   var(--radius-pill);
    border:          none;
    background:      var(--color-primary);
    cursor:          pointer;
    box-shadow:      var(--shadow-md);
    transition:      background var(--duration-nav) var(--ease-standard);
    padding:         0;
}

.lightbox__nav:hover    { background: var(--color-primary-hover); }
.lightbox__nav--prev    { left:  var(--space-3); }
.lightbox__nav--next    { right: var(--space-3); }
.lightbox__nav[hidden]  { display: none; }

.card__cover {
    width:               100%;
    background-repeat:   no-repeat;
    background-position: center;
    border-radius:       var(--radius-none);
    margin-top:          0;
    margin-bottom:       var(--grid-gap-inner);
}

.card__cover--image {
    aspect-ratio:    16 / 9;
    background-size: cover;
}

.card__cover--icon {
    height:          var(--card-icon-height);
    background-size: auto var(--card-icon-size);
}

.post__body {
    display: block;
}

.post__body--split > * + * {
    margin-top: var(--grid-gap);
}

@media (min-width: 768px) {
    .post__body--split > * + * {
        margin-top: 0;
    }

    .post__body--split {
        display:               grid;
        grid-template-columns: 65ch 1fr;
        gap:                   var(--space-5);
        align-items:           start;
    }
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.contact-form__field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

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

.contact-form__input,
.contact-form__textarea,
.contact-form__select {
    width: 100%;
    padding: var(--space-2);
    border: var(--border-width-base) solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: var(--font-size-md);
    transition: border-color var(--duration-nav) var(--ease-standard);
}

.contact-form__input::placeholder,
.contact-form__textarea::placeholder {
    color: var(--color-text-muted);
}

.contact-form__select:required:invalid,
.contact-form__select option[disabled] {
    color: var(--color-text-muted);
}

.contact-form__select option:not([disabled]) {
    color: var(--color-text);
}

.contact-form__input:focus,
.contact-form__textarea:focus,
.contact-form__select:focus {
    outline: none;
    border-color: var(--color-text);
    box-shadow: var(--focus-ring);
}

.contact-form__textarea {
    resize: vertical;
    min-height: 10rem;
}

.contact-form__actions {
    display: flex;
    gap: var(--space-2);
}

.accordion {
    display: flex;
    flex-direction: column;
}

.accordion__item {
    border-bottom: var(--border-width-base) solid var(--color-border);
}

.accordion__item:first-child {
    border-top: var(--border-width-base) solid var(--color-border);
}

.accordion__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--space-3) 0;
    text-align: left;
    font-family: var(--card-ui-heading-font);
    font-weight: var(--card-ui-heading-weight);
    font-size: var(--card-ui-heading-size);
    color: var(--card-ui-heading-color);
    cursor: pointer;
    gap: var(--space-2);
}

.accordion__icon {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    position: relative;
}

.accordion__icon::before,
.accordion__icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    background: currentColor;
    border-radius: var(--radius-pill);
    transition:
        transform var(--duration-base) var(--ease-standard),
        opacity var(--duration-base) var(--ease-standard);
}

.accordion__icon::before {
    width: 100%;
    height: 2px;
    transform: translate(-50%, -50%);
}

.accordion__icon::after {
    width: 2px;
    height: 100%;
    transform: translate(-50%, -50%);
}

.accordion__item.is-open .accordion__icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
    opacity: 0;
}

.accordion__panel {
    overflow: hidden;
    max-height: 0;
    transition: max-height var(--duration-slow) var(--ease-standard);
}

.accordion__item.is-open .accordion__panel {
    max-height: 600px;
}

.accordion__content {
    padding-bottom: var(--space-3);
    color: var(--color-text-muted);
}

.post-single > .container {
    padding-inline: var(--layout-padding-inline);
    padding-top:    var(--section-padding);
    padding-bottom: var(--space-6);
}

.post-content {
    padding: var(--space-4);
    background: var(--color-surface);
    border: var(--border-width-base) solid var(--color-border);
    border-radius: var(--radius-md);
}

.posts__grid {
    display:              grid;
    grid-template-columns: 1fr;
    grid-auto-rows:       auto;
    column-gap:           var(--grid-gap);
    row-gap:              var(--grid-gap);
    margin-bottom:        var(--space-3);
}

@media (min-width: 640px) {
    .posts__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .posts__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.post-card {
    border:               var(--border-width-base) solid var(--color-border);
    border-radius:        var(--radius-none) var(--radius-md) var(--radius-md) var(--radius-md);
    padding:              var(--space-3);
    background:           var(--color-bg);
    display:              grid;
    grid-template-rows:   subgrid;
    grid-row:             span 6; 
    align-content:        start;
    cursor:               pointer;
    transition:           border-color var(--duration-nav) var(--ease-standard);
    position:             relative;
    overflow:             hidden;
}

@media (max-width: 1023px) {
    .post-card {
        grid-template-rows: auto;
        grid-row:           auto;
    }
}

.post-card::before {
    content:     '';
    position:    absolute;
    top:         0;
    left:        0;
    width:       var(--tile-polygon-w);
    height:      var(--tile-polygon-h: 4rem);
    background:  var(--color-border);
    clip-path: polygon(
    0 0,
    100% 0,
    calc(100% - var(--tile-polygon-h) * var(--bg-layer-slope)) 100%,
    0 100%
	);
    z-index:     0;
}

.post-card:hover {
    border-color: var(--color-primary);
}

.post-card:hover .post-card__title,
.post-card:hover .post-card__title a {
    color: var(--color-primary);
}

.post-card:hover .post-read-more {
    background: var(--color-primary-hover);
}

.post-card__meta {
    margin-bottom: calc(var(--grid-gap-inner) / 2);
}
.post-card__category {
    margin-bottom: calc(var(--grid-gap-inner) / 2);
}

.post-card__thumb {
    width:               100%;
    aspect-ratio:        16 / 9;
    background-repeat:   no-repeat;
    background-position: center;
    background-size:     cover;
    border-radius:       var(--radius-none);
    margin-bottom:       var(--grid-gap-inner);
}

.post-read-more {
    justify-self:  start;
    padding:       var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    font-size:     var(--font-size-sm);
    background:    var(--color-extra-40ms);
    color:         var(--color-text-on-primary);
    border:        none;
    cursor:        pointer;
    transition:    background var(--duration-nav) var(--ease-standard);
}

.post-read-more:hover {
    background: var(--color-extra-hover-a);
    color: var(--color-text-on-primary);
}

.section__table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    margin-bottom: var(--space-3);
}

.section__table-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.section__table-img {
    display: block;
    width:   100%;
}

.section__table th,
.section__table td {
    padding: var(--space-2) var(--space-2);
    text-align: left;
    vertical-align: top;
    border-bottom: var(--border-width-base) solid var(--color-border);
    hyphens: auto;
    overflow-wrap: break-word;
    word-break: break-word;
}

.section__table thead th {
    font-family: var(--card-ui-heading-font);
    font-weight: var(--card-ui-heading-weight);
    color: var(--card-ui-heading-color);
    font-size: var(--card-ui-heading-size);
    text-align: left;
    border-top: var(--border-width-base) solid var(--color-border);
    background: var(--color-border);
}

.section__table tbody tr:nth-child(odd) td {
    background: var(--color-bg);
}

.section__table tbody tr:nth-child(even) td {
    background: var(--color-surface);
}

.post-card[hidden] {
    display: none;
}

.posts-hub__separator {
    grid-column: 1 / -1;
    margin-top: var(--space-2);
    margin-bottom: 0;
}

.posts-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1);
    margin-bottom: var(--space-3);
}

.posts-filters__label {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin-right: var(--space-1);
}

.posts-filter__btn {
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    cursor: pointer;
}

.posts-filter__btn.is-active {
    background: var(--color-extra-40ms);
    color: var(--color-text-on-primary);
    border-color: var(--color-secondary, #000);
}

.posts-archive {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

.posts-archive__btn {
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    border: var(--border-width-base) solid var(--color-border);
    cursor: pointer;
}

.post-card__category {
    font-size:     var(--font-size-sm);
    color:         var(--color-text-muted);
    margin-bottom: calc(var(--grid-gap-inner) / 2);
}

.post-card__title {
    margin-top:  0;
    margin-bottom: var(--grid-gap-inner);
    color: var(--color-heading-muted);
    transition: color var(--duration-nav) var(--ease-standard);
}

.post-card__title a {
    color: inherit;
    text-decoration: none;
}

.post-card:hover .post-card__title,
.post-card__title a:hover {
    color: var(--color-extra-hover-a);
}

.post-card__meta {
    font-size:     var(--font-size-sm);
    color:         var(--color-text-muted);
    margin-bottom: calc(var(--grid-gap-inner) / 2);
}

.post-card__excerpt {
    color:         var(--color-text-muted);
    margin-bottom: var(--grid-gap-inner);
}

.post__meta {
    color: var(--color-text-muted);
    margin-bottom: var(--space-2);
}

.post__back-link {
}

@media (min-width: 1024px) {
    .post-card__category,
    .post-card__title,
    .post-card__thumb,
    .post-card__meta,
    .post-card__excerpt,
    .card__title,
    .card__cover {
        margin-bottom: 0;
    }
}

.u-hidden {
    display: none !important;
}

.u-visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

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

.u-full-width {
    width: 100%;
}

.u-mx-auto {
    margin-inline: auto;
}

.is-active {}

.is-open {}

.is-current {}

.is-sticky {}

.has-layout-image {}

@media (min-width: 768px) {
    :root {
        --layout-padding-inline: var(--space-4);
        --section-gap:           var(--space-5);  
        --section-padding:       var(--space-4);  
    }
}

@media (max-width: 500px) {
    :root {
        --logo-height:   clamp(2.5rem, 7vw, 4rem);
        --header-height: clamp(88px, 20vw, 128px);
    }
}

@media (min-width: 1101px) {
    .site-header__inner {
        align-items: center;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        padding-top: 0;
        padding-bottom: 0;
    }

    .site-header__brand {
        flex: none;
    }

    .site-nav__toggle {
        display: none;
    }

    .site-nav {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--space-2);
        width: auto;
        padding-bottom: 0;
    }

    .hero__inner {
        padding-top: var(--space-5);
        padding-bottom: var(--space-5);
    }

    .section__inner {
        padding-top:    var(--section-padding);
        padding-bottom: var(--section-padding);
    }

    .site-footer__social-link {
        width: var(--social-icon-link-size-lg);
        min-width: var(--social-icon-link-size-lg);
        height: var(--social-icon-link-size-lg);
    }

    .site-footer__social-link svg {
        width: var(--social-icon-size-lg);
        height: var(--social-icon-size-lg);
        flex: 0 0 var(--social-icon-size-lg);
    }

    .posts__grid {
        grid-template-columns: var(--grid-cols-3);
    }

    .site-footer__grid {
        align-items: start;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .site-footer__social-link:hover,
    .button:hover {
        transform: none;
    }

    .hero__scroll {
        animation: none;
    }
}

.contact-form__hp {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.form-message {
    padding: var(--space-2) var(--space-3);
    border: var(--border-width-base) solid transparent;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-md);
    margin-bottom: var(--space-3);
}

.form-message--success {
    color: var(--color-success);
    border-color: var(--color-success);
    background: rgba(22, 121, 74, 0.08);
}

.form-message--error {
    color: var(--color-danger);
    border-color: var(--color-danger);
    background: rgba(180, 35, 24, 0.07);
}

.contact-form__error {
    color: var(--color-danger);
    font-size: var(--font-size-sm);
}

.contact-form__field--invalid .contact-form__input,
.contact-form__field--invalid .contact-form__textarea,
.contact-form__field--invalid .contact-form__select {
    border-color: var(--color-danger);
}