: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:#F5F8FA; --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(--background-color-light); --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(--font-color); --button-text-hover: #F5F8FA; --button-text-active:#F5F8FA; --button-text-focus: var(--font-color); --button-text-disabled: var(--font-color); --yellow:#FBB040; /* Onboarding */ --pink:#F06292; /* Brand Development */ --blue:#2599CD; /* Online Presence */ --orange:#F15928; /* Targeted Campaigns */ --green:#13B1AA; /* 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; --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"]{ --font-color:#F5F8FA; --header-font-color:#ffffff; } [data-theme="light"]{ --font-color: #24292E; --header-font-color:#111111; --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-dark); --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(--white); --button-text-hover: var(--white); --button-text-active:var(--white); --button-text-focus: var(--white); --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-light); color: var(--font-color); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; min-height: 100vh; margin: 0; line-height: 1.6; } .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)} 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;} 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);} .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;opacity: 0.7;} .ws-legal, .copyrightNotice, .fine-print, .small, small {font-size: var(--text-xs);line-height: 1.4;opacity: 0.7;} .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(--font-color);color: var(--white);font-size: var(--text-xs);font-weight: var(--text-medium);border-radius: var(--size-xl);text-decoration: none;transition: background-color 0.2s;} 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%; } 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); } 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);} .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;} .text-4xl, .text-h2{font-size:var(--text-4xl);letter-spacing: -0.02em;} .text-5xl, .text-h1{font-size:var(--text-5xl);letter-spacing: -0.02em;} .text-6xl{font-size:var(--text-6xl);letter-spacing: -0.02em;} .text-7xl{font-size:var(--text-7xl);letter-spacing: -0.04em;} .text-8xl{font-size:var(--text-8xl);letter-spacing: -0.04em;} .text-9xl{font-size:var(--text-9xl);letter-spacing: -0.04em;} .block{display:block} .grid{display:grid} .flex{display:flex} .cover{width: 100%;height: 100%;object-fit: cover;display: block; aspect-ratio: 16 / 9;} .overlay{position: absolute;display: flex;top:0;left:0;width: 100%;height: 100%;z-index:2} .overlay::before { content: ''; pointer-events: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.2); inset: 0; mix-blend-mode: soft-light; } .space-between{justify-content: space-between;} .flex-grow{flex: 1;} .relative{position: relative} .fade{opacity:0.7} .blur{backdrop-filter: blur(7px);-webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);} .fixed{position: fixed;} hr {border-color: var(--line-color);margin-top: var(--size-m);margin-bottom: var(--size-m);padding: 0;display: block;} svg{display:block;height: auto;} picture{overflow: hidden;display: block} .columns {display: grid;align-items: start;width: 100%;grid-template-columns: repeat(var(--count, auto-fill), minmax(0, 1fr));} .columns > * {width: 100%;position: relative;min-width: 0;} .columns.count-1 { --count: 1; } .columns.count-2 { --count: 2; } .columns.count-3 { --count: 3; } .columns.count-4 { --count: 4; } .columns.count-5 { --count: 5; } .columns.count-6 { --count: 6; } @media (max-width: 1024px) { .columns.count-4, .columns.count-5, .columns.count-6 { --count: 3; } } @media (max-width: 768px) { .columns.count-3, .columns.count-4, .columns.count-5, .columns.count-6 { --count: 2; } .cover{object-fit: initial;height: auto} } @media (max-width: 590px) { .columns.count-2, .columns.count-3, .columns.count-4, .columns.count-5, .columns.count-6 { --count: 1; } } .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;} .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-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-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;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)} .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-90 {display:grid;min-height:90vh} .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: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; transition: color 0.2s ease;} .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(--font-color)} .button.text, button.text{background: transparent;border:1px solid transparent;padding:0;margin:0;color: var(--font-color);} .button.icon-right,button.icon-right{flex-direction: row-reverse;} .button.width-100, button.width-100{width:auto} .button:hover, button:hover {background-color:var(--button-bg-hover);color:var(--button-text-hover);text-decoration: none;filter: brightness(1.2);} .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;} /* .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;position: relative} 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.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%; height: 100%;position: relative;} .image-right { flex-direction: row; } .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;} .flex-group {display: flex;flex-wrap: wrap;} .flex-group > * {width: fit-content;} @media (max-width: 480px) { .flex-group { flex-direction: column; align-items: stretch; } .flex-group > *, .flex-group > *.button { width: 100% !important; justify-content: center; } } /* ========================================= 1. BASE STYLES (Global) ========================================= */ .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);} .ribbon{font-size: var(--text-s);padding: var(--size-m);} .wckd-menu { display: flex; margin: 0; padding: 0; list-style: none; width: 100%; } .wckd-menu li { display: flex; list-style: none; margin: 0; position: relative; align-items: center; } .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; transition: background 0.2s ease; } .wckd-menu li:hover > a, .wckd-menu li.active > a { background-color: var(--background-color-light); } .wckd-menu.horizontal { display: flex; width: max-content; justify-content: flex-end; } .wckd-menu.horizontal li { flex: 0 0 auto; } .wckd-menu.horizontal > li > ul { display: none; 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); } .wckd-menu.horizontal > li > ul li{display: block} .wckd-menu.horizontal li:hover > ul { display: block; margin: 0; } .wckd-menu.horizontal ul ul { top: 0; left: 100%; margin: 0} /* Scroll wrapper */ .wckd-menu-scroll { width: 100%; overflow-x: auto; padding-bottom: 100vh; margin-bottom: -100vh; scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE/Edge */ } .wckd-menu-scroll::-webkit-scrollbar { display: none; /* Chrome/Safari */ } /* 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; } @media (max-width: 768px) { .hamburger-btn { display: flex; } .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; } nav.open .wckd-menu.hamburger-collection { display: flex; } .wckd-menu li { display: flex; flex-wrap: wrap; align-items: center; width: 100%; border-bottom: 1px solid var(--line-color); } .wckd-menu li > a { flex: 1; } button.mobile-only { background: transparent; border: none; border-left: 1px solid var(--line-color); color: var(--font-color); cursor: pointer; } .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; } .wckd-menu li.expanded > ul { display: block;margin:0;padding: 0} .wckd-menu li.expanded button.mobile-only svg { transform: rotate(180deg); transition: transform 0.3s ease; } 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: 18px;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%; } .images-xs .image, .image-xs { max-width: var(--image-xs); width: 100%; } .images-s .image, .image-s { max-width: var(--image-s); width: 100%; } .images-m .image, .image-m { max-width: var(--image-m); width: 100%; } .images-l .image, .image-l { max-width: var(--image-l); width: 100%; } .images-xl .image, .image-xl { max-width: var(--image-xl); width: 100%; } .images-full .image, .image-full { max-width: var(--image-xxl); width: 100%; } .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} } /* WS-YOUTUBE */ ws-youtube {background-color: #000;position: relative;display: block;contain: content;background-position: center center;background-size: cover;cursor: pointer;aspect-ratio: 16 / 9;width: 100%;} ws-youtube::before {content: attr(data-title);display: block;position: absolute;top: 0;background-image: linear-gradient(180deg, rgb(0 0 0 / 67%) 0%, rgb(0 0 0 / 54%) 14%, rgb(0 0 0 / 15%) 54%, rgb(0 0 0 / 5%) 72%, rgb(0 0 0 / 0%) 94%);height: 99px;width: 100%;font-family: "YouTube Noto", Roboto, Arial, Helvetica, sans-serif;color: hsl(0deg 0% 93.33%);text-shadow: 0 0 2px rgba(0,0,0,.5);font-size: 18px;padding: 25px 20px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;box-sizing: border-box;transition: opacity 0.2s cubic-bezier(0, 0, 0.2, 1);z-index: 2;} ws-youtube:hover::before {color: white;} ws-youtube > iframe, ws-youtube > div {width: 100% !important;height: 100% !important;position: absolute;top: 0;left: 0;border: 0;} ws-youtube[params*="controls=0"] iframe {pointer-events: none;} ws-youtube > .lyt-playbtn {display: block;width: 100%;height: 100%;background: no-repeat center/68px 48px;background-image: url('data:image/svg+xml;utf8,');position: absolute;cursor: pointer;z-index: 3;filter: grayscale(100%);transition: filter .1s cubic-bezier(0, 0, 0.2, 1), opacity 0.2s;border: 0;background-color: transparent;} ws-youtube:hover > .lyt-playbtn, ws-youtube .lyt-playbtn:focus {filter: none;} ws-youtube.lyt-activated {cursor: unset;} ws-youtube.lyt-activated::before, ws-youtube.lyt-activated > .lyt-playbtn {opacity: 0;pointer-events: none;} .lyt-visually-hidden {clip: rect(0 0 0 0);clip-path: inset(50%);height: 1px;overflow: hidden;position: absolute;white-space: nowrap;width: 1px;}