@font-face {
  font-family: 'Alef';
  font-weight: 400;
  font-style: normal;
  src: url('https://media.upgradeshop.ai/ab15b38b-4fa8-431c-b4cc-408a2c752574/brand-fonts/Alef-Regular.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Alef';
  font-weight: 700;
  font-style: normal;
  src: url('https://media.upgradeshop.ai/ab15b38b-4fa8-431c-b4cc-408a2c752574/brand-fonts/Alef-Bold.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Dana Yad';
  font-weight: 400;
  font-style: normal;
  src: url('https://media.upgradeshop.ai/ab15b38b-4fa8-431c-b4cc-408a2c752574/brand-fonts/DanaYadAlefAlefAlef-Normal.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Ploni';
  font-weight: 700;
  font-style: normal;
  src: url('https://media.upgradeshop.ai/ab15b38b-4fa8-431c-b4cc-408a2c752574/brand-fonts/PloniMLv2AAA-Bold.woff2') format('woff2');
  font-display: swap;
}

:root {
  --brand-type-heading-display-font: 'Ploni';
  --brand-type-heading-display-size: 3.5rem;
  --brand-type-heading-display-size-mobile: 2.5rem;
  --brand-type-heading-display-weight: 700;
  --brand-type-heading-display-line-height: 1;
  --brand-type-heading-display-letter-spacing: 0em;
  --brand-type-heading-display-text-transform: none;
  --brand-type-heading-display-font-style: normal;
  --brand-type-heading-section-font: 'Ploni';
  --brand-type-heading-section-size: 2.75rem;
  --brand-type-heading-section-size-mobile: 2.2rem;
  --brand-type-heading-section-weight: 700;
  --brand-type-heading-section-line-height: 1.1;
  --brand-type-heading-section-letter-spacing: 0em;
  --brand-type-heading-section-text-transform: none;
  --brand-type-heading-section-font-style: normal;
  --brand-type-heading-card-font: 'Ploni';
  --brand-type-heading-card-size: 1.6rem;
  --brand-type-heading-card-size-mobile: 1.45rem;
  --brand-type-heading-card-weight: 600;
  --brand-type-heading-card-line-height: 1.2;
  --brand-type-heading-card-letter-spacing: 0em;
  --brand-type-heading-card-text-transform: none;
  --brand-type-heading-card-font-style: normal;
  --brand-type-body-font: 'Alef';
  --brand-type-body-size: 1.125rem;
  --brand-type-body-size-mobile: 1rem;
  --brand-type-body-weight: 400;
  --brand-type-body-line-height: 1.6;
  --brand-type-body-letter-spacing: 0em;
  --brand-type-body-text-transform: none;
  --brand-type-body-font-style: normal;
  --brand-type-body-large-font: 'Alef';
  --brand-type-body-large-size: 1.4rem;
  --brand-type-body-large-size-mobile: 1.3rem;
  --brand-type-body-large-weight: 400;
  --brand-type-body-large-line-height: 1.6;
  --brand-type-body-large-letter-spacing: 0em;
  --brand-type-body-large-text-transform: none;
  --brand-type-body-large-font-style: normal;
  --brand-type-quote-decorative-lg-font: 'Dana Yad';
  --brand-type-quote-decorative-lg-size: 2.5rem;
  --brand-type-quote-decorative-lg-size-mobile: 2rem;
  --brand-type-quote-decorative-lg-weight: 700;
  --brand-type-quote-decorative-lg-line-height: 1.4;
  --brand-type-quote-decorative-lg-letter-spacing: 0em;
  --brand-type-quote-decorative-lg-text-transform: none;
  --brand-type-quote-decorative-lg-font-style: normal;
  --brand-type-quote-decorative-font: 'Dana Yad';
  --brand-type-quote-decorative-size: 1.8rem;
  --brand-type-quote-decorative-size-mobile: 1.6rem;
  --brand-type-quote-decorative-weight: 700;
  --brand-type-quote-decorative-line-height: 1.4;
  --brand-type-quote-decorative-letter-spacing: 0em;
  --brand-type-quote-decorative-text-transform: none;
  --brand-type-quote-decorative-font-style: normal;
}
@media (max-width: 768px) {
  :root {
    --brand-type-heading-display-size: 2.5rem;
    --brand-type-heading-section-size: 2.2rem;
    --brand-type-heading-card-size: 1.45rem;
    --brand-type-body-size: 1rem;
    --brand-type-body-large-size: 1.3rem;
    --brand-type-quote-decorative-lg-size: 2rem;
    --brand-type-quote-decorative-size: 1.6rem;
  }
}

:root {
  --btn-size-small-px: 1.25rem;  --btn-size-small-py: 0.5rem;   --btn-size-small-fs: calc(var(--brand-shape-button-fontSize, 1.125rem) - 0.125rem);
  --btn-size-medium-px: 2rem;    --btn-size-medium-py: 1rem;    --btn-size-medium-fs: var(--brand-shape-button-fontSize, 1.125rem);
  --btn-size-large-px: 2.5rem;   --btn-size-large-py: 1.25rem;  --btn-size-large-fs: calc(var(--brand-shape-button-fontSize, 1.125rem) + 0.125rem);
}
/* button: primary (Primary action) */
.btn-primary { background: #405A63; color: #ffffff; border: 1px solid #405A63; border-radius: var(--brand-shape-button-radius, 8px); padding: var(--btn-size-medium-py) var(--btn-size-medium-px); font-size: var(--btn-size-medium-fs); font-family: var(--brand-type-heading-display-font, system-ui, sans-serif); font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; cursor: pointer; }
.btn-primary { position: relative; overflow: hidden; isolation: isolate; transition: color .8s cubic-bezier(.4,0,.2,1), border-color .8s cubic-bezier(.4,0,.2,1); }
.btn-primary::before { content: ""; position: absolute; top: 50%; left: 50%; width: 0; height: 0; border-radius: 50%; background-color: #F7F0DE; transform: translate(-50%, -50%); transition: width .8s cubic-bezier(.4,0,.2,1), height .8s cubic-bezier(.4,0,.2,1); z-index: -1; }
.btn-primary:hover::before { width: 300%; height: 300%; }
.btn-primary:hover { color: #405A63 }
/* button: cream (Cream (on dark)) */
.btn-cream { background: #F7F0DE; color: #405A63; border: 1px solid #F7F0DE; border-radius: var(--brand-shape-button-radius, 8px); padding: var(--btn-size-medium-py) var(--btn-size-medium-px); font-size: var(--btn-size-medium-fs); font-family: var(--brand-type-heading-display-font, system-ui, sans-serif); font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; cursor: pointer; }
.btn-cream { position: relative; overflow: hidden; isolation: isolate; transition: color .8s cubic-bezier(.4,0,.2,1), border-color .8s cubic-bezier(.4,0,.2,1); }
.btn-cream::before { content: ""; position: absolute; top: 50%; left: 50%; width: 0; height: 0; border-radius: 50%; background-color: #405A63; transform: translate(-50%, -50%); transition: width .8s cubic-bezier(.4,0,.2,1), height .8s cubic-bezier(.4,0,.2,1); z-index: -1; }
.btn-cream:hover::before { width: 300%; height: 300%; }
.btn-cream:hover { color: #ffffff }
/* button: outlined (Outlined (on dark)) */
.btn-outlined { background: transparent; color: #405A63; border: 1px solid #405A63; border-radius: var(--brand-shape-button-radius, 8px); padding: var(--btn-size-medium-py) var(--btn-size-medium-px); font-size: var(--btn-size-medium-fs); font-family: var(--brand-type-heading-display-font, system-ui, sans-serif); font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; cursor: pointer; }
.btn-outlined { position: relative; overflow: hidden; isolation: isolate; transition: color .8s cubic-bezier(.4,0,.2,1), border-color .8s cubic-bezier(.4,0,.2,1); }
.btn-outlined::before { content: ""; position: absolute; top: 50%; left: 50%; width: 0; height: 0; border-radius: 50%; background-color: #405A63; transform: translate(-50%, -50%); transition: width .8s cubic-bezier(.4,0,.2,1), height .8s cubic-bezier(.4,0,.2,1); z-index: -1; }
.btn-outlined:hover::before { width: 300%; height: 300%; }
.btn-outlined:hover { color: #ffffff }
/* button: link (Text link) */
.btn-link { background: transparent; color: #405A63; border: 1px solid transparent; border-radius: var(--brand-shape-button-radius, 8px); padding: var(--btn-size-medium-py) var(--btn-size-medium-px); font-size: var(--btn-size-medium-fs); font-family: var(--brand-type-heading-display-font, system-ui, sans-serif); font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; cursor: pointer; }
.btn-link { position: relative; display: inline-block; padding-bottom: 4px; transition: color .3s ease; }
.btn-link::after { content: ""; position: absolute; bottom: 0; left: 0; right: auto; height: 1px; width: 0; background: #405A63; transition: width .5s ease, right .5s ease, left .5s ease; }
.btn-link:hover { color: #405A63 }
.btn-link:hover::after { left: auto; right: 0; width: 100%; }

:root {
  --brand-color-brand-primary: #405A63;
  --brand-color-brand-primary-hsl: 195 21% 32%;
  --brand-color-brand-secondary: #F7F0DE;
  --brand-color-brand-secondary-hsl: 43 61% 92%;
  --brand-color-brand-accent: #405A63;
  --brand-color-brand-accent-hsl: 195 21% 32%;
  --brand-color-semantic-success: #16a34a;
  --brand-color-semantic-success-hsl: 142 76% 36%;
  --brand-color-semantic-warning: #d97706;
  --brand-color-semantic-warning-hsl: 32 95% 44%;
  --brand-color-semantic-error: #dc2626;
  --brand-color-semantic-error-hsl: 0 72% 51%;
  --brand-color-semantic-info: #0284c7;
  --brand-color-semantic-info-hsl: 200 98% 39%;
  --brand-color-surface-pageBg: #ffffff;
  --brand-color-surface-pageBg-hsl: 0 0% 100%;
  --brand-color-surface-cardBg: #ffffff;
  --brand-color-surface-cardBg-hsl: 0 0% 100%;
  --brand-color-surface-sectionAlt: #F7F0DE;
  --brand-color-surface-sectionAlt-hsl: 43 61% 92%;
  --brand-color-surface-border: #342D2F;
  --brand-color-surface-border-hsl: 343 7% 19%;
  --brand-color-surface-darkBg: #342D2F;
  --brand-color-surface-darkBg-hsl: 343 7% 19%;
  --brand-color-surface-warmGrey: #bcbaad;
  --brand-color-surface-warmGrey-hsl: 52 10% 71%;
  --brand-color-surface-sandDeep: #ede6cf;
  --brand-color-surface-sandDeep-hsl: 46 45% 87%;
  --brand-color-text-body: #090909;
  --brand-color-text-body-hsl: 0 0% 4%;
  --brand-color-text-muted: #666666;
  --brand-color-text-muted-hsl: 0 0% 40%;
  --brand-color-text-heading: #342D2F;
  --brand-color-text-heading-hsl: 343 7% 19%;
  --brand-color-text-headingAccent: #405A63;
  --brand-color-text-headingAccent-hsl: 195 21% 32%;
  --brand-color-text-bodyOnDark: #FFFFFF;
  --brand-color-text-bodyOnDark-hsl: 0 0% 100%;
  --brand-color-text-headingOnDark: #F7F0DE;
  --brand-color-text-headingOnDark-hsl: 43 61% 92%;
  --brand-font-heading: 'Ploni';
  --brand-font-body: 'Alef';
  --brand-shape-button-radius: 15px;
  --brand-shape-button-fontSize: 1.125rem;
  --brand-shape-card-radius: 15px;
  --brand-spacing-density: 4rem;
  --brand-shadow-elevation: 0 1px 2px rgba(26,26,26,0.06), 0 1px 4px rgba(26,26,26,0.04);
  --brand-website-header-logoSize: Medium;
  --brand-website-header-mobileMenu: Drawer;
  --brand-website-hero-overlayEnabled: false;
  --brand-website-hero-overlayColor: #1A1A1A;
  --brand-website-hero-overlayColor-hsl: 0 0% 10%;
  --brand-website-hero-overlayOpacity: 40;
  --brand-website-hero-textColor: Dark;
  --brand-website-hero-gradient: None;
  --brand-website-section-darkBg: #2C2A26;
  --brand-website-section-darkBg-hsl: 40 7% 16%;
  --brand-website-footer-bgTone: Dark;
  --brand-website-footer-showSocial: true;
  --brand-website-footer-socialStyle: Outline;
  --brand-website-footer-columns: 3;
  --brand-website-blog-bodySize: Default;
  --brand-website-blog-codeStyle: Light;
  --brand-website-blog-blockquoteStyle: Left border;
  --brand-website-images-radius: 15px;
  --brand-website-images-border-width: 1px;
  --brand-website-images-shadow: none;
  --brand-website-images-hoverEffect: None;
}