/******************/
/** Theme - Template */
/******************/
/***** Hero *****/
/* Hero */
:root {
  --font-hero-title: var(--font-h1);
  --font-hero-subtitle: clamp(1.125rem, calc(1.019rem + 0.396vw), 1.375rem); /* min: 18px, max: 22px */
  --font-hero-text: var(--font-p);
}
/* Hero Area */
.hero-area {
  /* Units */
  --ha-100vh-w-header-offset__mxh: 980px;

  /* Old css */
  --ha-height: var(--ha--height);
  --ha-height__on-l: var(--ha--height__on-l);
  --ha-height__on-m: var(--ha--height__on-m);

  --ha-mn-height: var(--ha-mnh);
  --ha-mn-height__on-l: var(--ha-mnh__on-l);
  --ha-mn-height__on-m: var(--ha-mnh__on-m);

  /* updated Version */
  --ha--height: 810px;
  --ha--height__on-3xl: var(--ha--height);
  --ha--height__on-2xl: var(--ha--height__on-3xl);
  --ha--height__on-xl: var(--ha--height__on-2xl);
  --ha--height__on-l: var(--ha--height__on-xl);
  --ha--height__on-m: var(--ha--height__on-l);

  --ha-mxh: 820px;
  --ha-mxh__on-3xl: var(--ha-mxh);
  --ha-mxh__on-2xl: var(--ha-mxh__on-3xl);
  --ha-mxh__on-xl: var(--ha-mxh__on-2xl);
  --ha-mxh__on-l: var(--ha-mxh__on-xl);
  --ha-mxh__on-m: var(--ha-mxh__on-l);

  /* --ha-mnh: 920px; */
  /* --ha-mnh__on-l: var(--ha-mnh); */
  /* --ha-mnh__on-m: var(--ha-mnh__on-l); */

  --ha--mxw: 100%;
  --ha--w: 100%;
  --ha--mg: 0;

  /* .hero-area--main-wrap */
  --ha-mn-wrp--pd: var(--space-3xl) 0;
  /* --ha-mn-wrp--bg-att: scroll; */
  --ha-mn-wrp--bg-clr: none;
  --ha-mn-wrp--bg-blend-mode: normal;
  --ha-mn-wrp--d: flex;
  --ha-mn-wrp--h: 810px;
  /* --ha-mn-wrp--mxh: 100%;
  --ha-mn-wrp--mnh: 100%; */
  --ha-mn-wrp--ali-ite: center;
  --ha-mn-wrp--jus-con: center;
  --ha-mn-wrp--mxw: center;
  --ha-mn-wrp--w: 100%;
  --ha-mn-wrp--zi: 3;
  --ha-mn-wrp--flx-dir: column;
  --ha-mn-wrp--flx-wrp: wrap;

  /* Hero Section Classes | If Hero has padding */
  --ha--mw-pd-tb: var(--ha-mn-wrp--pd);
  --ha--mw-pd-tb__on-xl: var(--ha--mw-pd-tb);
  --ha--mw-pd-tb__on-l: var(--ha--mw-pd-tb__on-xl);
  /* --ha--mw-pd-tb__on-l: var(--space-2xl) 0 var(--space-2xl); */

  --ha-pd-top__on-l: var(--ha-pd-top);
  --ha-pd-bottom__on-l: var(--ha-pd-bottom);
  --ha-pd-base__on-l: var(--space-3xl);
}
.hero-area.ha--w-mxh {
  --ha-mxh: 920px;
}
.hero-area .ha--w-mnh {
  --ha-mnh: 920px;
}
.hero-area.ha--w-std-pd {
  --ha-mn-wrp--pd: var(--space-4xl) 0 var(--space-4xl);
}
/* Hero Area - Base Row */
.hero-area {
  /* .hero-area--main-inner-row */
  --ha-main-inner-row--align-items: left;
  --ha--mir-col-gap: unset;
  --ha--mir-col-gap__on-2xl: var(--space-m);
  --ha--mir-col-gap__on-l: var(--ha--mir-col-gap__on-2xl);
  --ha--mir-row-gap: var(--space-2xl);
  --ha--mir-row-gap__on-l: var(--ha--mir-row-gap);
  --ha--mir-row-gap__on-m: var(--ha--mir-row-gap__on-l);
}
/* Hero Area - Base Content */
.hero-area {
  /* Hero Content */
  --ha--content_mt: 0;
  --ha--content_mb: 0;
  --ha--content_text-wrap--mt: var(--space-s);
  --ha--content_text-wrap--mb: var(--space-l);

  /* Title / h1 */
  --ha--content_title--color: var(--text-title);
  --ha--content_title--font-size: clamp(2.813rem, calc(2.2rem + 2.277vw), 4.25rem); /* min: 45px, max: 68px */
  --ha--content_title--line-height: 1;
  --ha--content_title--font-weight: 700;
  --ha--content_title--tex-trans: uppercase;
  --ha--content_title--let-spcing: 0;
  --ha--content_title--let-spcing__on-m: var(--ha--content_title--let-spcing);
  --ha--content_title--mb: var(--space-xs);
  --ha--content_title--mb__on-m: var(--ha--content_title--mb);

  /* Subtitle / h3 */
  --ha--content_subtitle--color: var(--text-title);
  --ha--content_subtitle--font-size: var(--font-hero-subtitle);
  --ha--cnt_subttl--ff: var(--font-body);
  --ha--content_subtitle--font-weight: 500;
  --ha--content_subtitle--line-height: 1;
  --ha--content_subtitle--tex-trans: capitalize;
  --ha--content_subtitle--let-spcing: 0;
  --ha--content_subtitle--let-spcing__on-m: var(--ha--content_subtitle--let-spcing);
  --ha--content_subtitle--mb: var(--space-xs);
  --ha--content_subtitle--mb__on-m: var(--ha--content_subtitle--mb);

  /* Text / p */
  --ha--content_text--color: var(--text-body);
  --ha--content_text-font-size: var(--font-p);
  --ha--content_text--font-weight: 400;
  --ha--content_text--line-height: var(--default-text-line-height);
  --ha--content_text--tex-trans: none;
  --ha--content_text--let-spcing: 0;
  --ha--content_text--mb: var(--space-xs);

  /* btn wrap OLD - to be DELETED */
  --ha--content_btn-wrap--mt: var(--space-m);
  --ha--content_btn-wrap--mb: var(--space-m);
  --ha--content_btn-wrap--col-gap: var(--space-3xs);
  --ha--content_btn-wrap--row-gap: var(--space-3xs);
  /* hero-area--content-btn-wrap - Updated */
  --ha--content-btn-wrap--mg: 32px 0;
  --ha--content-btn-wrap--mg__on-l: var(--ha--content-btn-wrap--mg);
  --ha--content-btn-wrap--mg__on-m: var(--ha--content-btn-wrap--mg__on-l);
  --ha--content-btn-wrap--pd: 0;
  --ha--content-btn-wrap--mxw: 100%;
  --ha--content-btn-wrap--col-gap: 30px;
  --ha--content-btn-wrap--row-gap: var(--space-3xs);
  --ha--content-btn-wrap--ali-itm: start;
  --ha--content-btn-wrap--jus-cnt: start;
  --ha--content-btn-wrap--flx-dir: row;
}
/* Hero Block - Bottom Bar */
.ha--with-bottom-bar {
  /* Padding */
  --ha--bb-pd-t: var(--space-5xs);
  --ha--bb-pd-b: var(--space-5xs);
  --ha--bb-pd-t__on-m: var(--ha--bb-pd-t);
  --ha--bb-pd-b__on-m: var(--ha--bb-pd-b);
  /* BG Color | Font Size, Color | Separator Color */
  --ha--bb-bg-color: var(--accent);
  --ha--bb-font-size: var(--text-s);
  --ha--bb-font-color: var(--text-light);
  --ha--bb-separator-color: var(--text-light);
}
/* Hero Block - Card v1 */
.hero-area--card-v1 {
  /* Border Radius | Width w/ Mobile | BG |  */
  --ha--card-v1--border-radius: 0;
  --ha--card-v1--width: 500px;
  --ha--card-v1--width_on-l: 100%;
  --ha--card-v1--bg: var(--bg-light);

  /* Title Bar - Display | BG | Padding | Title */
  --ha--card-v1--top-bar-display: flex;
  --ha--card-v1--top-bar-bg: var(--accent);
  --ha--card-v1--top-bar-pd: var(--space-5xs) 0;
  --ha--card-v1--top-bar-title-color: var(--text-light);
  --ha--card-v1--top-bar-title-size: var(--text-s);
  --ha--card-v1--top-bar-title-weight: 400;
  --ha--card-v1--top-bar-title-case: uppercase;
  --ha--card-v1--top-bar-title-spacing: 0;
  --ha--card-v1--top-bar-title-mb: 0;

  --ha--card-v1--body-bg: var(--bg-light);
  --ha--card-v1--body-pd: var(--space-m) var(--space-4xs);

  --ha--card-v1--body-wrap-mxw: 380px;
  --ha--card-v1--body-wrap-mxw__on-m: 92%;

  --ha--card-v1--body-wrap-title-color: initial;
  --ha--card-v1--body-wrap-title-size: var(--text-xl);
  --ha--card-v1--body-wrap-title-weight: 700;
  --ha--card-v1--body-wrap-title-case: uppercase;
  --ha--card-v1--body-wrap-title-spacing: 0;
  --ha--card-v1--body-wrap-title-mb: var(--space-4xs);

  --ha--card-v1--body-wrap-subtitle-color: initial;
  --ha--card-v1--body-wrap-subtitle-size: initial;
  --ha--card-v1--body-wrap-subtitle-weight: 500;
  --ha--card-v1--body-wrap-subtitle-case: capitalize;
  --ha--card-v1--body-wrap-subtitle-spacing: 0;
  --ha--card-v1--body-wrap-subtitle-mb: var(--space-4xs);

  --ha--card-v1--body-wrap-text-color: initial;
  --ha--card-v1--body-wrap-text-size: initial;
  --ha--card-v1--body-wrap-text-weight: 400;
  --ha--card-v1--body-wrap-text-case: capitalize;
  --ha--card-v1--body-wrap-text-spacing: 0;
  --ha--card-v1--body-wrap-text-mb: var(--space-4xs);

  --ha--card-v1--bw-btn-wrap-mt: var(--space-4xs);
  --ha--card-v1--bw-btn-wrap-mb: 0;

  --ha--card-v1--bw-bw-multi-btn-col-gap: 0;
  --ha--card-v1--bw-bw-multi-btn-row-gap: 0;
}
/* Hero Block - Contact Form v1 */
.hero-area--main-wrap {
  /* Padding Top/Bottom */
  --ha--w-form-adj--main-wrap-pd: var(--space-m) 0 var(--space-m);
  --ha--w-form-adj--main-wrap-pd__on-l: var(--space-3xl) 0 var(--space-3xl);
  /* --ha--w-form-adj--mir-row-gap__on-l: var(--ha--mir-row-gap__on-l); */

  /* Column Row Gap */
  --ha--w-form-adj--mir-row-gap__on-l: var(--space-xl); /* uncomment to use, comment above to disable */
}

.ha--content--cf-layout {
  /* Hero Card Form -ha--content--cf-layout */
  --ha--cf-layout-bg: #ffffff;
  --ha--cf-layout-border-color: var(--theme-dark-gray);
  --ha--cf-layout-border-width: 1px;
  --ha--cf-layout-border-radius: 5px;
  --ha--cf-layout-pd-tb: var(--space-m);
  --ha--cf-layout-pd-lr: var(--space-s);
  --ha--cf-layout-mxw: 500px;

  --ha--cf-layout-head-mb: var(--space-s);
  --ha--cf-layout-head-font-family: var(--font-heading);

  --ha--cf-layout-head-label-font-size: var(--font-p);
  --ha--cf-layout-head-label-mb: var(--space-5xs);

  --ha--cf-layout-head-title-font-size: var(--text-2xl);
  --ha--cf-layout-head-title-mb: var(--space-6xs);

  --ha--cf-layout-head-subtitle-font-size: var(--text-l);
  --ha--cf-layout-head-subtitle-mb: var(--space-2xs);
  --ha--cf-layout-head-text-font-size: var(--font-p);
  --ha--cf-layout-head-text-mb: var(--space-3xs);
}
/* Page Title */
:root {
  --page-title-size: clamp(1.5rem, calc(0.649rem + 3.168vw), 3.5rem); /* min: 24px, max: 56px */
}
.page-heading {
  --ph--offset-height: 0;
  --ph--main-height: auto; /* calc(var(--space-7xl) + 30px) */
  --ph--main-height__on-l: var(--ph--main-height);
  --ph--main-height__on-m: var(--ph--main-height);
  --ph--main-bg-color: #23282d;
  --ph--main-bg-blend-mode: overlay;
  --ph--main-padding: var(--space-xl) 0; /* var(--space-4xl) 0 */

  --ph--main-content-mxw: 100%;

  --ph--main-title--color: var(--text-title);
  --ph--main-title--font-size: var(--page-title-size);
  --ph--main-title--font-weight: 600;
  --ph--main-title--tex-trans: capitalize;
  --ph--main-title--line-height: 1;
  --ph--main-title--mb: var(--space-xs);

  --ph--main-subtitle--color: var(--text-title);
  --ph--main-subtitle--font-size: var(--text-l);
  --ph--main-subtitle--font-weight: 500;
  --ph--main-subtitle--tex-trans: normal;
  --ph--main-subtitle--line-height: 1;
  --ph--main-subtitle--mb: var(--space-xs);

  --ph--main-text-wrap--mxw: 100%;
  --ph--main-p-text-wrap--mg: 0;

  --ph--main-p--color: var(--text-body);
  --ph--main-p--font-size: var(--text-p);
  --ph--main-p--font-weight: 400;
  --ph--main-p--tex-trans: normal;
  --ph--main-p--line-height: var(--default-text-line-height);
  --ph--main-p--mg: 0 auto;

  --ph--main-btn-wrap--mg: var(--space-xs) 0 0;
  --ph--main-btn-wrap--mxw: 100%;

  --ph--main-bc-padding: var(--space-3xs);
  --ph--main-bc-border-color: #fff;
  --ph--main-bc-border-width: 1px;
  --ph--main-bc-margin-bottom: var(--space-xs);
}
/* Accordion */
.accordion-faq {
  --faq-accordion--item-mb: 8px;
  --faq-accordion--item-border-bottom: none;

  --faq-accordion--title-bg: #f6f7f8;
  --faq-accordion--title-pd: var(--space-2xs) var(--space-xs) var(--space-2xs) var(--space-s);
  --faq-accordion--title-border: none;

  --faq-accordion--title-color: var(--text-title);
  --faq-accordion--title-font-size: var(--text-l);
  --faq-accordion--title-font-weight: 500;
  --faq-acc--ttl--ff: var(--font-body);
  --faq-acc--ttl--mg: 0;
  --faq-acc--ttl--lh: 1.1;
  --faq-acc--ttl--w: 100%;

  --faq-accordion--title-icon-color: var(--text-title);
  --faq-accordion--title-icon-font-size: var(--text-xl);
  --faq-accordion--title-icon-width: 24px;

  --faq-accordion--title-exp-bg: var(--primary);
  --faq-accordion--title-exp-pd: var(--faq-accordion--title-pd);
  --faq-accordion--title-exp-color: var(--text-title);
  --faq-accordion--title-exp-font-size: var(--text-l);
  --faq-accordion--title-exp-font-weight: 500;
  --faq-accordion--title-exp-icon-color: var(--text-title);

  --faq-accordion--content-bg: transparent;
  --faq-accordion--content-pd: var(--space-2xs) var(--space-xs) var(--space-2xs) var(--space-s);
  --faq-accordion--content-mb: 0;

  --faq-accordion--content-text-font-size: var(--font-size-main);
  --faq-accordion--content-text-color: var(--text-body);
  --faq-accordion--content-text-mb: var(--space-2xs);
}
.accordion-faq-open--title-light-color {
  --faq-accordion--title-exp-color: var(--text-light);
  --faq-accordion--title-exp-icon-color: var(--text-light);
}
/* UI - Maps */
.ui-map {
  --map-embed--h: 540px;
  --map-embed--h__on-l: var(--map-embed--h);
  --map-embed--h__on-m: var(--map-embed--h__on-l);
  --map-embed--asp: 16 / 11;

  --map-card-ctr--w: auto;
  --map-card-ctr--h: auto;
  --map-card-ctr--pos-top: 50%;
  --map-card-ctr--pos-lft: calc(50% + -500px);
  /* --map-card-ctr--pos-rgt: 0; */
  /* --map-card-ctr--pos-bot: 0; */
  --map-card-ctr--tfm-trn-x: -50%; /* -50% to center */
  --map-card-ctr--tfm-trn-y: -50%; /* -50% to center */
}
/* Inherited */
.ui-map.ui-map--card-wrap .card-item {
  --card-item--mxw: 300px;
  --card-item-bg: rgba(255, 255, 255, 0.9);
  --card-item-pd: var(--space-l);
  --card-item--content-pd: 0;
  /* --card-item--content-title-size: ; */
}
/* Cookie Notice */
#cookie-notice {
  --cookie-notice--bg-color: var(--primary);
  --cookie-notice--bg-opacity: 1;
  --cookie-notice--pd-tb: var(--space-2xs);

  --cookie-notice--content-color: var(--text-light);
  --cookie-notice--content-font-family: var(--font-body);
  --cookie-notice--content-font-size: var(--text-xs);
  --cookie-notice--content-font-weight: 400;

  --cookie-notice--btn-color: var(--text-light);
  --cookie-notice--btn-bg: var(--secondary);
  --cookie-notice--btn-font-family: var(--cookie-notice--content-font-family);
  --cookie-notice--btn-font-size: var(--cookie-notice--content-font-size);
  --cookie-notice--btn-font-weight: var(--cookie-notice--content-font-weight);
  --cookie-notice--btn-pd-tb: var(--space-6xs);
  --cookie-notice--btn-pd-lr: var(--space-4xs);

  --cookie-notice--icon-close-color: var(--bg-light-gray);
  --cookie-notice--icon-close-size: var(--space-2xs);
}

/* Additional */
.hero--home {

  .hero-area--content {
    overflow: visible;
    position: relative;

&::after {
    content: "";
    display: block;
    background: radial-gradient(
      ellipse at center,
      #000000 0%,
      rgba(0, 0, 0, 0.6) 0%,
      rgba(0, 0, 0, 0) 70%
    );
    border-radius: 50%;
    position: absolute;
    width: 800px;
    height: 900px;
    top: -360px;
    left: 50%;
    z-index: -1;
    transform: translateX(-50%);
  }
  }
}