:root{
	--default-font-size:16px;
	--max-width:1280px;
	--header-height:0px;
	
	--width-xxs: 280px;
	  --width-xs: 480px;
	  --width-s: 576px;
	  --width-m: 768px;
	  --width-l: 992px;
	  --width-xl: 1200px;
	  --width-xxl: 1600px;

	--font-color:#a0a0a0;
	--header-font-color:#FFFFFF;
	--brand-primary-color:var(--blue);

	--background-color:#24292E;
	--background-color-light:#2f363d;
	--background-color-dark:#1f2227;
	--background-color-fade:rgb(0 0 0 / 20%);

	--button-bg: var(--header-font-color);
	--button-bg-hover: var(--background-color-dark);
	--button-bg-active: var(--background-color-dark);
	--button-bg-focus:  var(--background-color-fade);
	--button-bg-disabled:  var(--background-color-fade);
	--button-text: var(--background-color);
	--button-text-hover: #F5F8FA;
	--button-text-active:#F5F8FA;
	--button-text-focus: var(--font-color);
	--button-text-disabled:  var(--font-color);

	--yellow:#F9A825; /* Onboarding */
	--pink:#F06292; /* Brand Development */
	--blue:#64B5F6; /* Online Presence */
	--orange:#FB8C00; /* Targeted Campaigns */
	--green:#388E3C; /* Sales Enablement */
	--purple:#8E24AA; /* Performance Optimization */
	--white:#FAFAFA; /* Base / Neutral UI */
	--red:#E57373; /* Alert / Error */
	--beige:#A1887F; /* Optional background */
	--black:#24292E;
	
	--line-color:rgba(0 0 0 / 40%);
	--shadow:0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px 0 rgba(0,0,0,0.06);

	--font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font:300 1em/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;

	--image-xxs: 64px;  /* Tiny Avatar */
	--image-xs:  90px;  /* Thumbnail */
	--image-s: 300px; /* Card / Portrait */
	--image-m: 600px; /* Standard Content Width */
	--image-l: 1024px;  /* Large */
	--image-xl:  1280px;  /* Max Content Width */
	--image-xxl: 100%;  /* Full Bleed */
	
	/* --- 1. BODY & UTILITY TEXT (Fixed) --- */
	--text-xxs: 0.5rem;  /* 8px */
	--text-xs:  0.75rem; /* 12px */
	--text-s: 0.875rem;  /* 14px */
	--text-m: 1rem;  /* 16px - Standard Body */
	
	/* --- 2. SUBHEADINGS (Gentle Scaling) --- */
	/* Narrowed the range to prevent subheads from outgrowing headings */
	--text-l: clamp(1.125rem, 1.2vw, 1.125rem);  /* 17.6px - 18px */
	--text-xl:  clamp(1.125rem, 1.5vw, 1.25rem); /* 18px - 20px  (h4) */
	--text-xxl: clamp(1.25rem, 2vw, 1.5rem);   /* 20px - 24px */
	
	/* --- 3. DISPLAY HEADINGS (Aggressive Scaling) --- */
	--text-3xl: clamp(1.5rem, 3vw, 1.6rem); /* 24px - 30px (h3) */
	--text-4xl: clamp(1.75rem, 4vw, 2.25rem); /* 28px - 36px (h2) */
	--text-5xl: clamp(2rem, 5vw, 3rem); /* 32px - 48px (h1) */
	--text-6xl: clamp(2.25rem, 6vw, 3.75rem); /* 36px - 60px */
	--text-7xl: clamp(2.5rem, 7vw, 4.5rem); /* 40px - 72px (Hero 2) */
	--text-8xl: clamp(3rem, 8vw, 6rem); /* 48px - 96px */
	--text-9xl: clamp(3.5rem, 10vw, 8rem); /* 56px - 128px (Hero 1) */
	
	  --text-light:200;
	  --text-regular:300;
	  --text-semibold:500;
	  --text-bold:700;
	  --text-extra-bold:900;

	--text-light:200;
	--text-regular:300;
	--text-medium:500;
	--text-strong:700;
	--text-extra-strong:900;

	--size-xxs:0.12rem; 
	--size-xs:0.25rem; 
	--size-s:0.5rem;
	--size-m: clamp(0.5rem, 2vw, 0.75rem);
	  --size-l: clamp(1.125rem, 3vw, 1.5rem);
	  --size-xl:  clamp(1.75rem, 4vw, 2rem);
	  --size-xxl: clamp(1.75rem, 6vw, 4rem);	
	  
	--border-thin:1px;
	--border-medium:2px;
	--border-thick:3px;
}
	


[data-theme="dark"]{
  --header-font-color:#ffffff;
}

[data-theme="light"]{
	
	--font-color: #24292E;
	--background-color:#F5F8FA;
	--background-color-light:#FFFFFF;
	--background-color-dark:#E9EDF1;
	--background-color-fade:rgba(0, 0, 0, 0.02);
	
	--button-bg: var(--background-color-light); 
	--button-bg-hover: var(--background-color-dark);
	--button-bg-active: var(--background-color-fade);
	--button-bg-focus:  var(--background-color-fade);
	--button-bg-disabled:  var(--background-color-fade);
	--button-text: var(--font-color);
	--button-text-hover: var(--font-color);
	--button-text-active:var(--font-color);
	--button-text-focus: var(--font-color);
	--button-text-disabled:  var(--font-color);
	
	--line-color:rgba(0 0 0 / 10%);
}

html { font-size: 100%; box-sizing: border-box; scroll-behavior: smooth;}
*, *::before,
*::after{box-sizing:inherit;}

body { 
	font-family: var(--font-stack);
	background-color: var(--background-color); 
	color: var(--font-color); 
	text-rendering: optimizeLegibility; 
	-webkit-font-smoothing: antialiased;
	min-height: 100vh; 
	margin: 0; 
	line-height: 1.6;
}

/* --- DISPLAY & HERO --- */
.text-hero {
	font-size: clamp(var(--text-4xl), 10vw, var(--text-9xl));
	line-height: 1.05;
	font-weight: var(--text-extra-strong);
	letter-spacing: -0.02em;
}

.text-hero2 {
	font-size: var(--text-7xl);
	line-height: 1.1;
	font-weight: var(--text-extra-strong);
	letter-spacing: -0.01em;
}
.text-shadow{text-shadow: var(--shadow)}

/* --- HEADINGS --- */
h1, .ws-title{
	font-size: var(--text-5xl);
	line-height: 1.1;
	font-weight: var(--text-bold);
	margin: 0;
}

h2, .alternativeHeadline {
	font-size: var(--text-4xl);
	font-weight: var(--text-bold);
	line-height: 1.2;
	margin: 0;
}

h3, .ws-subhead{
	font-size: var(--text-3xl);
	font-weight: var(--text-semibold);
	line-height: 1.3;
	margin: 0;
}

h4, .ws-heading, .ws-headline {
	font-size: var(--text-xl);
	line-height: 1.3;
	margin: 0;
}

/* --- BODY & PROSE --- */
p, .ws-text{ 
	font-size: var(--text-m);
	margin: 0;
}

.ws-intro{
	font-size: var(--text-l);
	line-height: 1.5;
	color: var(--color-text-secondary);
}

/* --- UTILITY & SMALL TEXT --- */
.ws-kicker, .ws-label{
	display: block;
	font-size: var(--text-s);
	font-weight: var(--text-strong);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	opacity: 0.8;
	margin-bottom: var(--size-s);
}

figcaption, .ws-caption, .ws-meta, .datePublished, .author, .cite, .byline {
	display: block;
	font-size: var(--text-xs);
	padding: var(--size-s);
	line-height: 1.4;
}


.ws-legal, .copyrightNotice, .fine-print, .small, small {
	font-size: var(--text-xs);
	line-height: 1.4;
	opacity: 0.7;
}

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

/* --- QUOTES --- */
blockquote, .quote {
	display: block;
	font-size: clamp(var(--text-xl), 3vw, var(--text-xxl));
	font-weight: var(--text-medium);
	font-style: italic;
	margin: var(--size-l) auto;
	padding-left: var(--size-s);
	border-left: var(--border-thick) solid var(--black);
	max-width: 90%;
}

/* --- VERTICAL RHYTHM --- */
/* Flow spacing: ensures consistent gaps between text elements */

h1,h2,h3,h4,h5,h6{color: var(--header-font-color)}

h1 + *, h2 + *, h3 + *, h4 + *, p + * { margin-top: var(--size-m); } 
 h4 + p, p + p, p + ol, p + ul, ul+* {margin-top: var(--size-s); }
h1+h2{margin-top: var(--size-xs);font-weight: var(--text-semibold);}
h1,h2{letter-spacing: -0.01em;}

p + .button, p+button{margin-top: var(--size-xl)}

figure + h3, 
h3 + figure,
span + p{ margin-top: var(--size-m); } 


figure + h1, figure + h2,
h1 + figure, h2 + figure{ margin-top: var(--size-l); } 

/*
h1 + h2, h2+h2,h2 + h3, h3 + h3, h3 + h4, h1 + p,h2 + p, h3 + p { margin-top: var(--size-m); } 
h1 + a, h2 + a, h3 + a, h4 + a, p + a { margin-top: var(--size-l); }
p + h1, p + h2, p + h3, p + h4, p + div { margin-top: var(--size-l); }
p + form, a + div { margin-top: var(--size-l); }
ul + a, ol + a { margin-top: var(--size-m) !important; }
figure + h1, figure + h2, figure + h3 { margin-top: var(--size-l)}
*/




/* Tags */
.tags { display: flex; flex-wrap: wrap; gap: var(--size-xs); list-style: none; padding: 0; margin-top: var(--size-m); }
.tag {
	display: inline-block;
	padding: var(--size-xxs) var(--size-s);
	background-color: var(--beige);
	color: var(--white);
	font-size: var(--text-s);
	font-weight: var(--text-medium);
	border-radius: var(--size-xl);
	text-decoration: none;
	transition: background-color 0.2s;
}


a{color:var(--blue);text-decoration:none;cursor:pointer;transition:color 0.2s ease;display:inline-flex;gap: var(--size-s)}
a:hover{ filter: brightness(1.2);text-decoration:underline;}
a:focus{outline:2px solid var(--line-color); outline-offset:2px;}
 
ul,ol{
	margin: var(--size-m);
	padding:0 var(--size-m);
}
li{margin: var(--size-s) 0;}

ul.columns,
ol.columns,
ul.no-bullets,
ol.no-bullets{margin:0;padding:0;}
ul.no-bullets > li,
ol.no-bullets >li{list-style: none;line-height: 1.6;margin:0}

dl {display: grid;grid-template-columns: auto 1fr;margin: var(--size-m) 0;padding: 0;border-bottom: 1px solid var(--line-color);overflow: hidden;}
dt, dd {margin: 0;padding: var(--size-s);border-top: 1px solid var(--line-color);}

strong, .strong{font-weight:var(--text-medium);color:var(--header-font-color)}

.primary-color{color:var(--blue);}
.secondary-color{color:var(--purple);}

.yellow{background:var(--yellow);}
.pink{background:var(--pink);}
.blue{background:var(--blue);}
.orange{background:var(--orange);}
.green{background:var(--green);}
.purple{background:var(--purple);}
.white{background:var(--white);}
.red{background:var(--red);}
.beige{background:var(--beige);}
.black{background:var(--black);}
.yellow-text{color:var(--yellow);}
.pink-text{color:var(--pink);}
.blue-text{color:var(--blue);}
.orange-text{color:var(--orange);}
.green-text{color:var(--green);}
.purple-text{color:var(--purple);}
.white-text{color:var(--white);}
.red-text{color:var(--red);}
.beige-text{color:var(--beige);}
.black-text{color:var(--black);}

.yellow-highlight {color:var(--yellow);background-color: color-mix(in srgb, var(--yellow) 15%, transparent);}
.pink-highlight {color:var(--pink);background-color: color-mix(in srgb, var(--pink) 15%, transparent);}
.blue-highlight {color:var(--blue);background-color: color-mix(in srgb, var(--blue) 15%, transparent);}
.orange-highlight {color:var(--orange);background-color: color-mix(in srgb, var(--orange) 15%, transparent);}
.green-highlight {color:var(--green);background-color: color-mix(in srgb, var(--green) 15%, transparent);}
.purple-highlight {color:var(--purple);background-color: color-mix(in srgb, var(--purple) 15%, transparent);}
.white-highlight {color:var(--white);background-color: color-mix(in srgb, var(--white) 15%, transparent);}
.red-highlight {color:var(--red);background-color: color-mix(in srgb, var(--red) 15%, transparent);}
.beige-highlight {color:var(--beige);background-color: color-mix(in srgb, var(--beige) 15%, transparent);}
.black-highlight {color:var(--black);background-color: color-mix(in srgb, var(--black) 15%, transparent);}

.text-xxs{font-size:var(--text-xxs);line-height: 1}
.text-xs{font-size:var(--text-xs);line-height: 1.3}
.text-s{font-size:var(--text-s);}
.text-m{font-size:var(--text-m)}
.text-l{font-size:var(--text-l)}
.text-xl{font-size:var(--text-xl)}
.text-xxl{font-size:var(--text-xxl);letter-spacing: -0.01em;}

.text-3xl, .text-h3{font-size:var(--text-3xl);letter-spacing: -0.02em;color: var(--header-font-color)}
.text-4xl, .text-h2{font-size:var(--text-4xl);letter-spacing: -0.02em;line-height: 1.3;color: var(--header-font-color)}
.text-5xl, .text-h1{font-size:var(--text-5xl);letter-spacing: -0.02em;line-height: 1.3;color: var(--header-font-color)}
.text-6xl{font-size:var(--text-6xl);letter-spacing: -0.02em;line-height: 1.3;color: var(--header-font-color)}
.text-7xl{font-size:var(--text-7xl);letter-spacing: -0.04em;line-height: 1.3;color: var(--header-font-color)}
.text-8xl{font-size:var(--text-8xl);letter-spacing: -0.04em;line-height: 1.3;color: var(--header-font-color)}
.text-9xl{font-size:var(--text-9xl);letter-spacing: -0.04em;line-height: 1.3;color: var(--header-font-color)}

hr {
	border-color: var(--line-color);
	margin-top: var(--size-m);
	margin-bottom: var(--size-m);
	padding: 0;
	display: block;
}

.block{display:block}
.grid{display:grid}
.flex{display:flex}
.space-between{justify-content: space-between;}
.flex-grow{flex: 1;}
.relative{position: relative}
.fade{opacity:0.7}
.blur{backdrop-filter: blur(7px)}
.fixed{position: fixed;}
svg{display:block;height: auto;}

/* --- Grid System --- */
.columns{display:grid;align-items:start;width:100%;grid-template-columns:repeat(auto-fill, minmax(213.3px, 1fr));}
.columns>*{width:100%;position:relative;min-width: 0;}
.count-1 { grid-template-columns: repeat(1, 1fr); }
.count-2 { grid-template-columns: repeat(2, 1fr); }
.count-3 { grid-template-columns: repeat(3, 1fr); }
.count-4 { grid-template-columns: repeat(4, 1fr); }
.count-5 { grid-template-columns: repeat(5, 1fr); }
.count-6 { grid-template-columns: repeat(6, 1fr); }
/* Responsive adjustments */
@media (max-width:1024px){
.count-4, .count-5, .count-6{grid-template-columns:repeat(3, 1fr);}
}
@media (max-width:768px){
.count-3, .count-4, .count-5, .count-6{grid-template-columns:repeat(2, 1fr);}
}
@media (max-width:590px){
.count-2, .count-3, .count-4, .count-5, .count-6{grid-template-columns:1fr;}
}
.span-2{grid-column:span 2;}
.span-3{grid-column:span 3;}
.span-4{grid-column:span 4;}
.span-5{grid-column:span 5;}
.span-6{grid-column:span 6;}

.fit-content{grid-auto-flow:column;grid-auto-columns:max-content;grid-template-columns:none;justify-content:start; width: fit-content;}

/* ---  Utilities --- */
.padded-0 > * {padding:0;}
.padded-xxs > * {padding:var(--size-xxs);}
.padded-xs > *  {padding:var(--size-xs);}
.padded-s > * {padding:var(--size-s);}
.padded > *, .padded-m > * {padding:var(--size-m);}
.padded-l > * {padding:var(--size-l);}
.padded-xl > *  {padding:var(--size-xl);}
.padded-xxl > * {padding:var(--size-xxl);}

.rounded-0 > * {padding:0;}
.rounded-xxs > *, .round-xxs {border-radius:2px;}
.rounded-xs > *, .round-xs {border-radius:4px;}
.rounded-s > *, .round-s {border-radius:8px;}
.rounded > *, .rounded-m > *, .round-m, .round {border-radius:12px;}
.rounded-l > *, .round-l {border-radius:16px;}
.rounded-xl > *, .round-xl {border-radius:24px;}
.rounded-xxl > *, .round-xl {border-radius:32px;}

.fill, .filled > * {background-color: var(--background-color)}
.fill-light, .filled-light > * {background-color: var(--background-color-light)}
.fill-dark, .filled-dark > * {background-color: var(--background-color-dark)}
.fill-fade, .filled-fade > * {background-color: var(--background-color-fade)}
.shadow, .columns.shadows > *{box-shadow:var(--shadow);}

.border, .borders > *{border:1px solid var(--line-color);}
.border-top, .borders-top > * {border-top:1px solid var(--line-color); border-right:0; border-bottom:0; border-left:0;}
.border-right, .borders-right > *{border-right:1px solid var(--line-color); border-top:0; border-bottom:0; border-left:0;}
.border-bottom, .borders-bottom > *{border-bottom:1px solid var(--line-color); border-top:0; border-right:0; border-left:0;}
.border-left, .borders-left > * {border-left:1px solid var(--line-color); border-top:0; border-right:0; border-bottom:0;}
.border-0{border:0px solid transparent}
.border-thin, .borders-thin > *  {border-width:var(--border-thin);}
.border-medium, .borders-medium > *{border-width:var(--border-medium);}
.border-thick, .borders-thick > *{border-width:var(--border-thick);}

.gap-0{gap:0;}.gap-xxs{gap:var(--size-xxs)}.gap-xs{gap:var(--size-xs)}.gap-s{gap:var(--size-s)}.gap, .gap-m{gap:var(--size-m)}.gap-l{gap:var(--size-l)}.gap-xl{gap:var(--size-xl)}.gap-xxl{gap:var(--size-xxl)}
.gap-row-0{gap:0;}.gap-row-xxs{gap:var(--size-xxs)}.gap-row-xs{gap:var(--size-xs)}.gap-row-s{gap:var(--size-s)}.gap-row, .gap-row-m{gap:var(--size-m)}.gap-row-l{gap:var(--size-l)}.gap-row-xl{gap:var(--size-xl)}.gap-row-xxl{gap:var(--size-xxl)}
.gap-column-0{gap:0;}.gap-column-xxs{gap:var(--size-xxs)}.gap-column-xs{gap:var(--size-xs)}.gap-column-s{gap:var(--size-s)}.gap-column, .gap-column-m{gap:var(--size-m)}.gap-column-l{gap:var(--size-l)}.gap-column-xl{gap:var(--size-xl)}.gap-column-xxl{gap:var(--size-xxl)}

.pad-0 {padding:0;}.pad-xxs{padding:var(--size-xxs);}.pad-xs {padding:var(--size-xs);}.pad-s  {padding:var(--size-s);}.pad, .pad-m{padding:var(--size-m);}.pad-l  {padding:var(--size-l);}.pad-xl {padding:var(--size-xl);}.pad-xxl{padding:var(--size-xxl);}
.pad-top-0 {padding-top:0;}.pad-top-xxs{padding-top:var(--size-xxs);}.pad-top-xs {padding-top:var(--size-xs);}.pad-top-s  {padding-top:var(--size-s);}.pad-top, .pad-top-m  {padding-top:var(--size-m);}.pad-top-l  {padding-top:var(--size-l);}.pad-top-xl {padding-top:var(--size-xl);}.pad-top-xxl{padding-top:var(--size-xxl);}.pad-top-3xl{padding-top:var(--size-3xl);}
.pad-right-0 {padding-right:0;}.pad-right-xxs{padding-right:var(--size-xxs);}.pad-right-xs {padding-right:var(--size-xs);}.pad-right-s{padding-right:var(--size-s);}.pad-right, .pad-right-m  {padding-right:var(--size-m);}.pad-right-l  {padding-right:var(--size-l);}.pad-right-xl {padding-right:var(--size-xl);}.pad-right-xxl{padding-right:var(--size-xxl);}
.pad-bottom-0 {padding-bottom:0;}.pad-bottom-xxs{padding-bottom:var(--size-xxs);}.pad-bottom-xs {padding-bottom:var(--size-xs);}.pad-bottom-s  {padding-bottom:var(--size-s);}.pad-bottom, .pad-bottom-m  {padding-bottom:var(--size-m);}.pad-bottom-l  {padding-bottom:var(--size-l);}.pad-bottom-xl {padding-bottom:var(--size-xl);}.pad-bottom-xxl{padding-bottom:var(--size-xxl);}.pad-bottom-3xl{padding-bottom:var(--size-3xl);}
.pad-left-0 {padding-left:0;}.pad-left-xxs{padding-left:var(--size-xxs);}.pad-left-xs {padding-left:var(--size-xs);}.pad-left-s  {padding-left:var(--size-s);}.pad-left, .pad-left-m  {padding-left:var(--size-m);}.pad-left-l  {padding-left:var(--size-l);}.pad-left-xl {padding-left:var(--size-xl);}.pad-left-xxl{padding-left:var(--size-xxl);}
.margin-0 {margin:0;}.margin-xxs{margin:var(--size-xxs);}.margin-xs {margin:var(--size-xs);}.margin-s  {margin:var(--size-s);}.margin, .margin-m  {margin:var(--size-m);}.margin-l  {margin:var(--size-l);}.margin-xl {margin:var(--size-xl);}.margin-xxl{margin:var(--size-xxl);}
.margin-top-0 {margin-top:0;}.margin-top-xxs{margin-top:var(--size-xxs);}.margin-top-xs {margin-top:var(--size-xs);}.margin-top-s  {margin-top:var(--size-s);}.margin-top, .margin-top-m  {margin-top:var(--size-m);}.margin-top-l  {margin-top:var(--size-l);}.margin-top-xl {margin-top:var(--size-xl);}.margin-top-xxl{margin-top:var(--size-xxl);}
.margin-right-0 {margin-right:0;}.margin-right-xxs{margin-right:var(--size-xxs);}.margin-right-xs {margin-right:var(--size-xs);}.margin-right-s  {margin-right:var(--size-s);}.margin-right, .margin-right-m  {margin-right:var(--size-m);}.margin-right-l  {margin-right:var(--size-l);}.margin-right-xl {margin-right:var(--size-xl);}.margin-right-xxl{margin-right:var(--size-xxl);}
.margin-bottom-0 {margin-bottom:0;}.margin-bottom-xxs{margin-bottom:var(--size-xxs);}.margin-bottom-xs {margin-bottom:var(--size-xs);}.margin-bottom-s  {margin-bottom:var(--size-s);}.margin-bottom, .margin-bottom-m  {margin-bottom:var(--size-m);}.margin-bottom-l  {margin-bottom:var(--size-l);}.margin-bottom-xl {margin-bottom:var(--size-xl);}.margin-bottom-xxl{margin-bottom:var(--size-xxl);}
.margin-left-0 {margin-left:0;}.margin-left-xxs{margin-left:var(--size-xxs);}.margin-left-xs {margin-left:var(--size-xs);}.margin-left-s  {margin-left:var(--size-s);}.margin-left, .margin-left-m  {margin-left:var(--size-m);}.margin-left-l  {margin-left:var(--size-l);}.margin-left-xl {margin-left:var(--size-xl);}.margin-left-xxl{margin-left:var(--size-xxl);}

.max-width {width: 100%;max-width: var(--max-width);}
.width-xxs { max-width: var(--width-xxs);}
.width-xs { max-width: var(--width-xs);}
.width-s { max-width: var(--width-s);}
.width-m { max-width: var(--width-m);}
.width-l { max-width: var(--width-l);}
.width-xl { max-width: var(--width-xl);}
.width-xxl { max-width: var(--width-xxl);}

.width-10{width: 10%}
.width-20{width: 20%}
.width-25{width: 25%}
.width-30{width: 30%}
.width-33{width: 33.3%}
.width-40{width: 40%}
.width-50{width: 50%}
.width-60{width: 60%}
.width-66{width: 66.6%}
.width-70{width: 70%}
.width-75{width: 75%}
.width-80{width: 80%}
.width-100{width: 100%}

.match-height > *{height:100%}

.align-top .align-top > img  {align-self:start;align-items: flex-start;}
.align-right, .align-right > img {justify-self:end;}
.align-bottom, .align-bottom > img {align-self:end;align-items: flex-end;}
.align-left, .align-left > img {justify-self:start;}
.align-middle, .align-middle > img  {align-self:center;align-items: center;}
.align-center, .align-center > img {margin-left:auto!important;margin-right:auto!important;justify-content:center;left:0;right:0}


.center {text-align:center}
.right {text-align:right}
.left {text-align:left}

.text-light{font-weight: var(--text-light)}
.text-normal{font-weight: var(--text-normal)}
.text-medium{font-weight: var(--text-semibold)}
.text-bold{font-weight: var(--text-bold)}
.text-extra-bold{font-weight: var(--text-extra-bold)}

.text-light{font-weight: var(--text-light)}
.text-normal{font-weight: var(--text-normal)}
.text-medium{font-weight: var(--text-medium)}
bold, .text-strong{font-weight: var(--text-strong)}
.text-extra-strong{font-weight: var(--text-extra-strong)}
.nowrap{white-space: nowrap}
.uppercase{text-transform: uppercase}

.layer-1 {z-index:1;position: relative}
.layer-2 {z-index:2;position: relative}
.layer-3 {z-index:3;position: relative}
.layer-top {z-index:999;}

.height-25 {display:grid;min-height:25vh}
.height-50 {display:grid;min-height:50vh}
.height-65 {display:grid;min-height:65vh}
.height-75 {display:grid;min-height:75vh}
.height-100 {display:grid;min-height:calc(100vh - var(--header-height))}

.opacity-1{opacity:0.1}
.opacity-2{opacity:0.2}
.opacity-3{opacity:0.3}
.opacity-4{opacity:0.4}
.opacity-5{opacity:0.5}
.opacity-6{opacity:0.6}
.opacity-7{opacity:0.7}
.opacity-8{opacity:0.8}
.opacity-9{opacity:0.9}
.opacity-10{opacity:1}

.shadow,
.shadows > * {box-shadow:var(--shadow);}


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

.button, button{overflow-wrap: break-word;white-space: normal;max-width: 100%;border:1px solid var(--line-color);background-color:var(--button-bg);color:var(--button-text);font-weight:var(--text-normal);padding: var(--size-m)  var(--size-l);cursor:pointer;transition:all 0.2s ease-in-out;line-height:1;text-decoration:none;display:flex;height: auto;width:fit-content;justify-content: space-between;column-gap: 8px;align-items: center;justify-content: center;font-size: var(--text-m)}
.button.size-xxs, button.size-xxs {font-size:var(--text-xxs);  padding:var(--size-s) var(--size-s);}
.button.size-xs, button.size-xs {font-size:var(--text-xs);  padding:var(--size-s) var(--size-m);}
.button.size-s, button.size-s {font-size:var(--text-s);padding:var(--size-s) var(--size-m);}
.button.size-l, button.size-l {font-size:var(--text-l);padding:var(--size-m) var(--size-l);}
.button.size-xl, button.size-xl {font-size:var(--text-xl);padding:var(--size-m) var(--size-l);}
.button.size-xxl, button.size-xxl {font-size:var(--text-xxl);  padding:var(--size-m) var(--size-l);}
.center .button, .center button{	margin-left: auto;margin-right: auto;}
.icon-button {display: flex;width:44px;height:44px;padding:0;line-height:1;justify-content: center;align-items: center;}
.icon-button.size-s{width:36px;height:36px;padding:var(--size-s)}
.icon-button.size-l{width:60px;height:60px;padding:var(--size-s)}
.button.outline, button.outline{background-color: transparent;border: 1px solid var(--line-color);color: var(--header-font-color)}
.button.text, button.text{background: transparent;border:1px solid transparent;padding:0}

.button.icon-right,button.icon-right{flex-direction: row-reverse;}


.button.width-100, button.width-100{width:100%}
.button.outline:hover, button.outline:hover{border:1px solid var(--header-font-color)}

.button:hover, button:hover {background-color:var(--button-bg-hover);color:var(--button-text-hover);text-decoration: none;}

.button:active, button:active {background-color:var(--button-bg-active);color:var(--button-text-active);}
.button:focus, button:focus {outline:2px solid var(--line-color);}
button.disabled, .button.disabled, .button:disabled, button:disabled {background-color:var(--button-bg-disabled);color:var(--button-text-disabled);cursor:not-allowed;opacity:0.6;}

/* WCKD UX */


.glow {background-image: radial-gradient(50% 100% at 50% 100%, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 100%);border: 1px solid rgba(255, 255, 255, 0.1);}

/*
.round-thumbnail{width: var(--image-thumbnail);height:var(--image-thumbnail);border-radius: 90px;overflow: hidden}
.round-thumbnail.medium{width: var(--image-medium);height:var(--image-medium);border-radius: 90px;overflow: hidden}
.round-thumbnail.large{width: var(--image-large);height:var(--image-large);border-radius: 90px;overflow: hidden}
*/

/* Reset standard HTML5 layout containers */
section, figure {margin: 0;padding: 0;display: block;}
figure {width: 100%;position: relative;}
img, video, iframe {max-width: 100%;height: auto;vertical-align: middle;font-style: italic;}


img{width:100%;max-width:100%;height:auto;display: block;}
img.avatar{max-width:var(--image-avatar)}
img.thumbnail{max-width:var(--image-thumbnail)}
img.medium{max-width:var(--image-medium);}
img.large{max-width:var(--image-large);}

.background-video{position: relative; padding-bottom: 56.25%; height: auto; overflow: hidden; max-width: 100%;}
.background-video iframe, .background-video object, .background-video embed { position: absolute; top: 0; left: 0; width: 100%; height:auto;}
	
.video-background {position: relative;overflow: hidden;background-color: transparent;}
.video-background .ws-video,.video-background video{position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;z-index: -1;}

.ws-embed, 
.ws-video {width: 100%;height: auto;aspect-ratio: 16 / 9;border: 0;display: block;object-fit: cover;}
.ws-embed-google-maps {aspect-ratio: 21 / 9;min-height: 350px;}

.image-right, .image-left {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.image-right .media-image, 
.image-left .media-image {
	width: 50%; /* or flex-basis */
	height: 100%;
	position: relative; /* Unset absolute if it was background */
}
/* On 'image-right', media is 2nd child */
.image-right { flex-direction: row; }

/* On 'image-left', content flows reverse so image (2nd child) appears first */
.image-left { flex-direction: row-reverse; }


.bg-fadeout, .bg-fadeout-default {position: absolute;width: 100%;height: 200px;background: linear-gradient(to top, var(--background-color), transparent);pointer-events: none;z-index: -1;bottom: 0;}
.bg-fadeout-dark {position: absolute;width: 100%;height: 200px;background: linear-gradient(to top, var(--background-color-dark), transparent);pointer-events: none;z-index: -1;bottom: 0;}
.bg-fadeout-light {position: absolute;width: 100%;height: 200px;background: linear-gradient(to top, var(--background-color-light), transparent);pointer-events: none;z-index: -1;bottom: 0;}
.bg-fadeout-fade {position: absolute;width: 100%;height: 200px;background: linear-gradient(to top, var(--background-color-fade), transparent);pointer-events: none;z-index: -1;bottom: 0;}

/* Core Components */

.flex-group {display: flex;flex-wrap: wrap;}
.flex-group li {width: fit-content;}
@media (max-width: 480px) {
  .flex-group {
	flex-direction: column; /* Stacks items vertically */
	align-items: stretch;  /* Stretches items to touch edges */
  }
  .flex-group li,
  .flex-group li .button {
	width: 100% !important; /* Force full width */
	justify-content: center; /* Centers the text/icon inside */
  }
}

/* =========================================
 1. BASE STYLES (Global)
 ========================================= */
.wckd-menu {
  display: flex;
  flex-direction: column;
  margin: 0; 
  padding: 0;
  list-style: none;
  width: 100%;
}

.wckd-menu li {
  list-style: none;
  margin: 0; padding: 0;
  position: relative;
}

/* Link Styling */
.wckd-menu a {
  display: flex;
  align-items: center;
  column-gap: var(--size-m);
  padding: var(--size-s) var(--size-m);
  color: var(--font-color);
  font-weight: var(--text-medium);
  text-decoration: none;
  white-space: nowrap; /* Corrected syntax */
  transition: background 0.2s ease;
}

.wckd-menu li:hover > a,
.wckd-menu li.active > a {
  background-color: var(--background-color-light);
}

/* Hamburger Button (Default: Hidden) */
.hamburger-btn {
  display: none; 
  background-color: transparent !important; border: none !important;
  padding: 0 !important; width: 44px !important; height: 44px !important;
  border-radius: 0; flex-direction: column; 
  justify-content: center; align-items: center; gap: 6px;
  cursor: pointer; z-index: 100; position: relative;
}
.hamburger-btn .bar {
  display: block; width: 24px; height: 2px;
  background-color: var(--font-color); border-radius: 2px;
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

/* Toggle Button (Mobile Dropdown Trigger - Default: Hidden) */
.mobile-only { display: none; }


/* =========================================
 2. DESKTOP STYLES (Horizontal Mode)
 ========================================= */
@media (min-width: 769px) {
  
  /* Horizontal Layout */
  .wckd-menu.horizontal {
	flex-direction: row;
	align-items: center;
	display: inline-flex;
	width: auto;
  }

  /* Desktop Dropdowns (Float) */
  .wckd-menu.horizontal > li > ul {
	display: none; /* Hidden */
	overflow: hidden;
	position: absolute;
	top: 100%; left: 0;
	min-width: 240px;
	background-color: var(--background-color);
	box-shadow: var(--shadow);
	border: 1px solid var(--line-color);
	z-index: 100;
	padding:0;
	border-radius: var(--size-s);
  }

  /* Hover to Show */
  .wckd-menu.horizontal li:hover > ul { display: block; margin: 0}

  /* Nested Dropdowns (Fly right) */
  .wckd-menu.horizontal ul ul { top: 0; left: 100%; }
}





/* =========================================
 3. MOBILE STYLES (Max-width 768px)
 ========================================= */
@media (max-width: 768px) {
  
  /* Show Hamburger */
  .hamburger-btn { display: flex; }
  
  /* Main Menu Container (Hidden by default) */
  .wckd-menu.hamburger-collection {
	display: none;
	position: absolute;
	 left: 0;
	 width: 100%;
	flex-direction: column;
	background-color: var(--background-color);
	border-top: 1px solid var(--line-color);
	box-shadow: 0 10px 20px rgba(0,0,0,0.1);
	z-index: 99;
  }

  /* Show Menu when Nav is Open */
  nav.open .wckd-menu.hamburger-collection { display: flex; }

  /* --- List Item Layout (Link + Button) --- */
  .wckd-menu li {
	display: flex;
	flex-wrap: wrap; /* Allows submenu to break to next line */
	align-items: center;
	width: 100%;
	border-bottom: 1px solid var(--line-color);
  }

  /* Link takes up available space */
  .wckd-menu li > a { flex: 1; }

  /* Mobile Toggle Button (Visible) */
  button.mobile-only {
	background: transparent;
	border: none;
	border-left: 1px solid var(--line-color);
	color: var(--font-color);
	cursor: pointer;
  }

  /* --- Accordion Logic (Submenus) --- */
  
  /* Force Submenu to break to new line */
  .wckd-menu li > ul {
	width: 100%;
	flex-basis: 100%;
	display: none;
	position: static;
	padding-left: var(--size-m);
	background: rgba(0,0,0,0.03); /* Slight dim */
	box-shadow: none; border: none;
  }

  /* Show Submenu when Expanded */
  .wckd-menu li.expanded > ul { display: block;margin:0;padding: 0}
  
  /* Rotate Chevron when Expanded */
  .wckd-menu li.expanded button.mobile-only svg {
	transform: rotate(180deg);
	transition: transform 0.3s ease;
  }

  /* --- Hamburger Animation --- */
  nav.open .hamburger-btn .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  nav.open .hamburger-btn .bar:nth-child(2) { opacity: 0; transform: translateX(-10px); }
  nav.open .hamburger-btn .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
}


.ws-icon {width: 1em;height: 1em;display: inline-flex;fill: currentColor;}
.ws-icon use {width: 100%;height: 100%;}



.wckd-icon{display:inline-flex;height: auto;width: auto;}
.wckd-icon svg{width: 24px;height: 24px;stroke-width:1.8px;stroke:var(--font-color);fill:none;background-repeat: no-repeat;background-position: center;transition: fill 0.2s ease, stroke 0.2s ease; }
a .wckd-icon svg,
button .wckd-icon svg{height:1em;width: 1em;margin-left: auto;margin-right: auto;stroke: var(--button-text);}

.wckd-icon.size-xs svg{width:16px;height:16px}
.wckd-icon.size-s svg{width: 24px;height:24px}
.wckd-icon.size-m svg{width:32px;height:32px}
.wckd-icon.size-l svg{width:48px;height:48px}
.wckd-icon.size-xl svg{width:64px;height:64px}

.rotate-north svg{transform: rotate(-90deg);-webkit-transform: rotate(-90deg)}
.rotate-north-east svg{transform: rotate(-45deg)}
.rotate-east svg{transform: rotate(0deg)}
.rotate-south svg{transform: rotate(90deg)}
.rotate-south-east svg{transform: rotate(45deg)}
.rotate-west svg{transform: rotate(-180deg)}
.rotate-south-west svg{transform: rotate(135deg)}
.rotate-north-west svg{transform: rotate(225deg)}
.text > .wckd-icon svg,
.outline > .wckd-icon svg,
.outline:hover > .wckd-icon svg{stroke:var(--font-color)}
.text:hover > .wckd-icon svg{stroke:var(--font-color)}
.wckd-icon.solid svg{fill:var(--font-color)}

a.icon-label, button.icon-label{font-size: var(--text-xs)!important;display: grid!important;align-items: stretch!important;line-height: 1!important;justify-content: center !important;padding-bottom: 14px !important;background: none;border: 1px solid transparent;color: var(--font-color);stroke: var(--font-color);}
a.icon-label > .wckd-icon, button.icon-label > .wckd-icon{font-size: var(--size-m)!important;margin-bottom: var(--size-xs);display: grid!important;}
a.icon-label > .wckd-icon svg, button.icon-label > .wckd-icon svg{padding:4px}


input, textarea, select {border: 1px solid var(--line-color);box-sizing: border-box;font-size: 90%;padding: var(--size-m);width: 100%;outline: none;border-radius: var(--size-s);background: var(--background-color-fade);color: var(--font-color);}
label {display: inline-block;font-size: 90%;margin: var(--size-s) 6px var(--size-xs);color: var(--font-color);}
input[type="checkbox"], 
input[type="radio"] {width: auto;margin: 0;appearance: auto;-webkit-appearance: checkbox;cursor: pointer;}

.wckd-form > div{position: relative;margin-bottom: 12px;}
.wckd-form label {position: absolute;pointer-events: none;left: 0;top: 14px;padding: 0 var(--size-m);transition: all 0.3s ease-in-out;z-index: 10;margin: 0;line-height: 1;}
.wckd-form label:has(+ :focus),
.wckd-form label:has(+ :not(:placeholder-shown)),
.wckd-form label:has(+ select:not([value=""])) {top: -10px;left: 8px;font-size: 75%;padding: 2px 6px;background: var(--button-bg-active);color: var(--button-text-active);border-radius: var(--size-s);}
.wckd-form label:has(+ .ws-checkbox),
.wckd-form label:has(+ input[type="checkbox"]),
.wckd-form label:has(+ input[type="radio"]) {pointer-events: auto !important;font-size: var(--text-s);display: inline-block;width: auto;margin: 12px;background: transparent;}

.card{display:block}

.images-xxs .image, .image-xxs  { max-width: var(--image-xxs); width: 100%; height: auto}
.images-xs  .image, .image-xs  { max-width: var(--image-xs);  width: 100%; height: auto}
.images-s .image, .image-s { max-width: var(--image-s); width: 100%; height: auto}
.images-m .image, .image-m { max-width: var(--image-m); width: 100%; height: auto}
.images-l .image, .image-l { max-width: var(--image-l); width: 100%; height: auto}
.images-xl  .image, .image-xl  { max-width: var(--image-xl);  width: 100%; height: auto}
.images-full .image, .image-full { max-width: var(--image-xxl); width: 100%; height: auto}

/* Alignment Utilities */
.image-left { text-align: left; margin-right: auto; }
.image-center { text-align: center; margin-inline: auto; }
.image-right  { text-align: right;  margin-left: auto; }

.sticky{top:0;position:sticky;z-index:100}

.mobile-only{display: none}
.hide-overflow{overflow: hidden;}


@media (max-width: 768px) {
	.mobile-width-full{width:100%!important;}
	.mobile-only{display: block}
	.hide-on-mobile{display: none}
	
}

.wckd-carousel {display: flex;--gap-value:0;overflow-x: auto;overflow-y: hidden;scroll-snap-type: x mandatory; scroll-snap-stop: always;scroll-behavior: smooth;-webkit-overflow-scrolling: touch;padding-bottom: var(--size-m);align-items: stretch;overscroll-behavior-x: contain;gap: var(--gap-value, 0);}
.wckd-carousel > .column {flex: 0 0 var(--column-width);scroll-snap-align: start;min-height: 100px;height: auto;}
.wckd-carousel.show-next-slide > .column {flex-basis: calc(var(--column-width) - 60px);}
.wckd-carousel.gap-xs { --gap-value: var(--size-xs); }
.wckd-carousel.gap-s  { --gap-value: var(--size-s); }
.wckd-carousel.gap    { --gap-value: var(--size-m); }
.wckd-carousel.gap-l  { --gap-value: var(--size-l); }
.wckd-carousel.gap-xl { --gap-value: var(--size-xl); }
.wckd-carousel.gap-xxl{ --gap-value: var(--size-xxl); }
.wckd-carousel.count-1 { --column-width: calc((100% - 0 * var(--gap-value)) / 1); }
.wckd-carousel.count-2 { --column-width: calc((100% - 1 * var(--gap-value)) / 2); }
.wckd-carousel.count-3 { --column-width: calc((100% - 2 * var(--gap-value)) / 3); }
.wckd-carousel.count-4 { --column-width: calc((100% - 3 * var(--gap-value)) / 4); }
.wckd-carousel.count-5 { --column-width: calc((100% - 4 * var(--gap-value)) / 5); }
.wckd-carousel.count-6 { --column-width: calc((100% - 5 * var(--gap-value)) / 6); }
.wckd-carousel-nav {display: grid;grid-template-columns: var(--size-xl) 1fr var(--size-xl);align-items: center;position: absolute;inset: 0;pointer-events: none;z-index: 2;}
.prev-btn,
.next-btn {pointer-events: auto;cursor: pointer;border: none;}
.prev-btn { grid-column: 1; justify-self: start;margin-left: var(--size-s);}
.next-btn { grid-column: 3; justify-self: end; margin-right: var(--size-s);}
.prev-btn:disabled,
.next-btn:disabled {pointer-events: none;opacity: 0.2;}
/* WebKit Browsers: Chrome, Safari, Edge, Opera  */
.wckd-carousel::-webkit-scrollbar {height: 4px;}
.wckd-carousel::-webkit-scrollbar-track {background-color: var(--line-color, #eee); }
.wckd-carousel::-webkit-scrollbar-thumb {background-color: var(--background-color-light, #333);border-radius: 2px;}
.wckd-carousel::-webkit-scrollbar-thumb:hover {background-color: #555;}
/* Firefox Only */
@-moz-document url-prefix() {
  .wckd-carousel {scrollbar-width: thin;scrollbar-color: var(--background-color-light, #333) var(--line-color, #eee);}
}
@media (prefers-reduced-motion: reduce) {
	.wckd-carousel {scroll-behavior: auto;}
}
@media (max-width: 767px) {
	.wckd-carousel.count-2,
	.wckd-carousel.count-3 { --column-width: 80%; }
	.wckd-carousel.count-4,
	.wckd-carousel.count-5,
	.wckd-carousel.count-6 { --column-width: 60%; }
}


.wckd-accordion{grid-template-columns: initial;}
.accordion-toggle {
	display: flex;
	align-items: center;
	gap: var(--size-s);
	width: 100%;
	text-align: left;
	padding: var(--size-m) var(--size-s);
	background: none;
	color: var(--font-color);
	border: none;
	border-top: 1px solid var(--line-color);
	cursor: pointer;
	justify-content: left;
}

.accordion-toggle::before {
	content: '';
	display: inline-block;
	width: 6px;
	height: 6px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform-origin: center;
	transform: translateY(-1px) rotate(-45deg); 
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	flex-shrink: 0;
	margin-right: 12px;
}
.accordion-toggle.is-open::before {
	transform: translateY(-1px) rotate(45deg); 
}
.accordion-toggle:hover::before {
	border-color: var(--accent-color, currentColor);
}
.accordion-toggle:focus{outline: none}
.accordion-toggle .wckd-icon > svg{stroke:var(--font-color)}
.accordion-toggle:hover{background:none;color: var(--font-color);fill: var(--font-color);column-gap:2px;}
.accordion-content {display: none;margin: 0 var(--size-m) var(--size-m) var(--size-s);padding-left: var(--size-m);left: 6px;border-left: 1px solid var(--line-color);}
.accordion-toolbar{display: grid;position: relative}
.accordion-toggle.is-open + .accordion-content {display: block;}
.accordion-toggle:hover .wckd-icon svg {padding-left: 6px;stroke: var(--font-color)}
.accordion-toggle.is-open .wckd-icon svg {transform: rotate(90deg);stroke: var(--font-color)}
.accordion-filter + .open-all{position: absolute;top:0;right:0;}
.accordion-toggle.is-open .wckd-icon svg{padding-left:0}
.accordion-toggle.is-open:hover{column-gap: 8px}