/*
 * Copyright 2020 Adobe. All rights reserved.
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */

 @import url('/styles/spacing.css');

:root {
  /* ================= Fonts ================= */
  --font-outfit: outfit, sans-serif;
  --font-syne: syne, sans-serif;

  /* ================= Font Weights ================= */

  --weight-300: 300;
  --weight-400: 400;
  --weight-500: 500;
  --weight-600: 600;
  --weight-700: 700;
  --weight-800: 800;
  --weight-900: 900;
  --weight-light: var(--weight-300);
  --weight-regular: var(--weight-400);
  --weight-medium: var(--weight-500);
  --weight-semibold: var(--weight-600);
  --weight-bold: var(--weight-700);
  --weight-extra-bold: var(--weight-900);

  /* ================= Font Sizes ================= */

  --fs-base: 1rem;           /* 16px */
  --fs-h1: 1.5rem;           /* 24px */
  --fs-h2: 1.375rem;         /* 22px */
  --fs-h3: 1.25rem;          /* 20px */
  --fs-h4: 1.125rem;         /* 18px */
  --fs-h5: 1rem;             /* 16px */
  --fs-small: 0.875rem;      /* 14px */
  --fs-xsmall: 0.75rem;      /* 12px */
  --fs-large: 2rem;          /* 32px */
  --fs-xlarge: 3rem;         /* 48px */
  --fs-10: 0.625rem;
  --fs-11: 0.6875rem;
  --fs-13: 0.8125rem;
  --fs-15: 0.9375rem;
  --fs-30: 1.875rem;
  --fs-31: 1.9375rem;
  --fs-36: 2.25rem;
  --fs-40: 2.5rem;
  --fs-56: 3.5rem;
  --fs-60: 3.75rem;
  --fs-64: 4rem;
  --fs-72: 4.5rem;
  --fs-subhead: 1rem;
  --fs-card-title: 1.125rem;
  --fs-card-center-title: 1.125rem;
  --fs-route-nav: 1.5rem;
  --fs-testimonial-title: 1.125rem;

  /* ================= Line Heights ================= */

  --lh-default: 1;
  --lh-default-mobile: 1.2;
  --lh-base: 1.5;
  --lh-large: 2.375;
  --lh-medium: 3;
  --lh-xlarge: 3.625;
  --lh-small: 1.3125;

  /* ================= Core Colors ================= */

  --color-black: #1C1C1C;
  --color-dark-black: #000;
  --color-white: #FFF;
  --color-foreground: #202020;
  --color-background: #ECECEC;
  --color-link: inherit;

  /* ================= Oceanic Green ================= */
  --bg-color: #01211d;
  --green-primary: #062824;
  --green-primary-light: #385350;
  --green-secondary: #6A7E7C;
  --green-secondary-light: #9BA9A7;
  --green-light: #CDD4D3;
  --green-extra-light: #E6E9E9;
  --green-secondary-lightest: #E8F6DD;
  --gray-clear: #666;

  /* ================= Ivory Mist ================= */

  --ivory-primary: #F8F5EC;
  --ivory-dark: #F9F7F0;
  --ivory-light: #FBF9F4;
  --ivory-extra-light: #FCFBF7;

  /* ================= Blue Shades ================= */

  --blue-primary: #023E8A;
  --blue-light: #2C96F8;
  --blue-medium: #1A559C;
  --blue-light-20: #009ADA;
  --blue-searchroute: #225C9F;

  /* ================= Midnight Shades ================= */

  --midnight-primary: #202020;
  --midnight-20: #2D2D2C;
  --midnight-dark: #4D4D4D;
  --midnight-medium: #797979;
  --midnight-light: #A6A6A6;

  /* ================= Spring Green ================= */

  --spring-green-primary: #03FFAB;
  --spring-green-dark: #35FFBC;
  --spring-green-light: #68FFCD;
  --spring-green-mist: #F2F9ED;
  --spring-green-light-mist: #E8F6DD;

  /* ================= Linen Sandstone ================= */

  --linen-primary: #CCC1A9;
  --linen-dark: #D6CDBA;
  --linen-light: #E0DACB;
  --linen-extra-light: #EBE6DD;
  --linen-light-20: #E2DBCB;

  /* ================= Utility Colors ================= */

  --dark-green: #011210;
  --dark-teal: #0B4F48;
  --highlight-green: #10635A;
  --highlight-mist-green: #92AD7D;

  /* ================= Neutral Gray ================= */

  --gray-100: #1F1F1F;
  --gray-90: #262626;
  --gray-80: #434343;
  --gray-70: #595959;
  --gray-60: #8C8C8C;
  --gray-50: #BFBFBF;
  --gray-40: #D9D9D9;
  --gray-30: #F0F0F0;
  --gray-20: #F5F5F5;
  --gray-10: #FAFAFA;
  --gray-0: #CCC;

  /* ================= State Colors ================= */

  --error-red: #D31F1F;
  --status-available: #36D9A0;
  --status-inuse: #FEEDA9;
  --status-inactive: #AFAFAF;

  /* ================= Coffee Theme ================= */

  --coffee-brown: #201501;
  --coffee-dark-chestnut: #6E4E45;
  --coffee-dark-chestnut-bright: #6E4E451A;
  --coffee-yellow-link: #FFDF8B;
  --coffee-yellow-border: #FFDF8B4D;
  --coffee-wine: #473853;

  /* ================= Blue Theme ================= */

  --blue-dark: #011221;
  --blue-dark-footer: #061A31;
  --blue-background-dark: #02081B;
  --blue-link-dark: #022E71;
  --electric-blue: #00FFE0;
  --electric-blue-30: #00F0FF4D;
  --electric-blue-light: #03E1FF;
  --sky-blue: #E4F7FF;
  --sky-blue-60: #EFFAFF;

  /* ================= Orange Theme ================= */
  --orange-primary: #D68100;
  --orange-30: #D681004D;
  --orange-brown: #D8870C4D;
  --orange-cta: #EAE0D4;
  --orange-brown-dark: #271D09;

  /* ================= Cards Component ================= */
  --card-border-color: #dadada;
  --card-cta-color: #d78202;
  --card-body-padding: var(--spacing-06);   /* 16px → 32px desktop */
  --card-grid-gap: var(--spacing-07);       /* 24px → 40px desktop */
  --card-transition: 0.4s ease;

/* nav height */
  --nav-height: 48px;
}

@media (width >= 992px) {
  :root {
    /* nav height desktop */
    --nav-height: 90px;
    --fs-subhead: 1.25rem;
    --fs-card-title: 1.25rem;
    --fs-card-center-title: 1.5rem;
    --fs-testimonial-title: 1.5rem;

  }
}

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

html{
  overflow-x: hidden;
}

html > body {
  display: none;
  max-width: 1920px;
  margin: 0 auto;
  overflow-x: hidden;
  background: var(--color-white);
  font-family: var(--font-outfit);
  font-size: var(--fs-base);
  position: relative;
}

html > body.appear {
  display: block;
}

header {
  height: var(--nav-height);
}

@media screen and (width <= 992px){
  header{
  height: auto;
  margin-bottom: 60px;
  }
}


header .header,
footer .footer {
  visibility: hidden;
}

header .header[data-block-status="loaded"],
footer .footer[data-block-status="loaded"] {
  visibility: visible;
}

.hideheaderfooter .header-wrapper, .hideheaderfooter .footer-wrapper, .hideheaderfooter #container-cookies-popup{
  display: none; 
}

p,
dl,
ol,
ul,
pre,
blockquote {
  font-size: var(--fs-base);
  font-family: var(--font-outfit);
  margin-bottom: 1rem;
}

code,
pre {
  font-size: var(--fs-10);
}

pre {
  padding: 16px;
  border-radius: 8px;
  overflow-x: auto;
  white-space: pre;
}

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

/* links */
a:any-link {
  color: inherit;
  text-decoration: none;
  overflow-wrap: break-word;
}

a:hover {
  text-decoration: underline;
}

/* ================= Text Colors ================= */

.dark-teal {
  color: var(--dark-teal) !important;
}

.dark-green-blue {
  color: var(--highlight-green) !important;
}

.bright-sea-green,
.neon-spring-green {
  color: var(--spring-green-primary) !important;
}

.solar-orange {
  color: var(--orange-primary) !important;
}

.royal-blue {
  color: var(--blue-medium) !important;
}

.electric-blue {
  color: var(--electric-blue) !important;
}

.dark-chestnut {
  color: var(--coffee-dark-chestnut) !important;
}

.yellow-link {
  color: var(--coffee-yellow-link) !important;
}

.white-text {
  color: var(--color-white) !important;
}

.black-text {
  color: var(--color-dark-black) !important;
}

/* ================= Typography ================= */

h1 {
  font-size: var(--fs-large);
  line-height: var(--lh-default);
  font-family: var(--font-syne);
  font-weight: var(--weight-semibold);
}

@media (width >= 991px) {
  h1 {
    font-size: var(--fs-xlarge) !important;
  }
}

h2 {
  font-size: var(--fs-large);
  line-height: var(--lh-default);
  font-family: var(--font-syne);
  font-weight: var(--weight-semibold);
}

h3 {
  font-size: var(--fs-h1);
  line-height: var(--lh-default);
  font-family: var(--font-syne);
  font-weight: var(--weight-semibold);
}

h4 {
  font-size: var(--fs-h3);
  line-height: var(--lh-default);
  font-family: var(--font-syne);
  font-weight: var(--weight-semibold);
}

h5 {
  font-size: var(--fs-h4);
  line-height: var(--lh-default);
  font-family: var(--font-syne);
  font-weight: var(--weight-semibold);
}

.tp-font-display {
  font-size: var(--fs-large)!important;
  line-height: var( --lh-default-mobile)!important;
  font-family: var(--font-syne)!important;
  font-weight: var(--weight-bold)!important;
}

.tp-font-h1 {
  font-size: var(--fs-large) !important;
  line-height: var(--lh-default) !important;
  font-family: var(--font-syne) !important;
  font-weight: var(--weight-semibold) !important;
}

@media (width >= 991px) {
  .tp-font-display{
    font-size: clamp(2rem,-2.4286rem + 7.1429vw,4rem)!important;
    line-height: var( --lh-base)!important;
  }

  .tp-font-h1 {
    font-size: var(--fs-xlarge) !important;
  }
}

.tp-font-h2 {
  font-size: var(--fs-large) !important;
  line-height: var(--lh-default) !important;
  font-family: var(--font-syne) !important;
  font-weight: var(--weight-semibold) !important;
}

.tp-font-h3 {
  font-size: var(--fs-h1) !important;
  line-height: var(--lh-default) !important;
  font-family: var(--font-syne) !important;
  font-weight: var(--weight-semibold) !important;
}

.tp-font-h4 {
  font-size: var(--fs-h3) !important;
  line-height: var(--lh-default) !important;
  font-family: var(--font-syne) !important;
  font-weight: var(--weight-semibold) !important;
}

.tp-font-h5 {
  font-size: var(--fs-h4) !important;
  line-height: var(--lh-default) !important;
  font-family: var(--font-syne) !important;
  font-weight: var(--weight-semibold) !important;
}

.tp-font-p-small {
  font-size: var(--fs-small) !important;
  line-height: var(--lh-small) !important;
  font-family: var(--font-outfit) !important;
}

/* ================= Buttons ================= */

.button.primary,
.button.secondary{
  display: inline-flex;
  font-family: var(--font-outfit);
  font-size: var(--fs-h4);
  font-weight: var(--weight-medium);
  padding: 16px 64px 16px 32px;
  letter-spacing: 1px;
  align-items: center;
  cursor: pointer;
  position: relative;
  text-transform: uppercase;
  text-decoration: none;
  background: linear-gradient(90deg, #f2f9ed 50%, transparent 0);
  background-position: 100% 100%;
  background-size: 200% 100%;
  transition: all .5s ease-out;
  min-height: 56px;
}

.button.primary{
  border: 1.5px solid var(--midnight-primary);
  color: var(--midnight-primary);
}

.button.secondary{
  border: 1.5px solid var(--ivory-primary);
  color: var(--ivory-primary);
}



@media screen and (width <= 992px) {
  .button.primary,
  .button.secondary {
    padding: 12px 60px 12px 35px;
    font-size: var(--fs-small);
    justify-content: center;
    line-height: 15.4px;
    min-height: 40px;
  }
}

/* ================= Arrow ================= */

.button.primary:hover,.button.secondary:hover {
  background-position: 0 100%;
  border-color: var(--color-foreground);
  color: var(--green-primary);
}

.button.primary::before,.button.secondary::before {
  content: "";
  position: absolute;
  height: 2px;
  width: 16px;
  top: 50%;
  transform: translateY(-50%);
  transition: width 0.4s ease;
  left: calc(100% - 56px);
}

.button.primary::before {
  background: var(--highlight-green);

}

.button.secondary::before {
  background: var(--spring-green-primary);
}

.button.primary::after,.button.secondary::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  border-top: 2px solid;
  border-right: 2px solid;
  transform: translateY(-50%) rotate(45deg);
  right: 40px;
  top: 50%;
  transition: right 0.4s ease;
  box-sizing: content-box;
}

.button.primary::after{
  border-color: var(--highlight-green);
}

.button.secondary::after{
  border-color: var(--spring-green-primary);
}

.button.primary:hover::before,
.button.primary:active::before,
.button.secondary:hover::before,
.button.secondary:active::before {
  width: 25px;
  background-color: var(--green-primary);
}

.button.primary:hover::after,
.button.primary:active::after,
.button.secondary:hover::after,
.button.secondary:active::after {
  right: 32px;
  border-color: var(--green-primary);
}

.content-orange-theme .button.primary,
.content-solar-theme .button.primary {
  background:linear-gradient(90deg, var(--card-cta-color), 50%, var(--midnight-primary) 0);
}

.content-orange-theme .button.secondary,
.content-solar-theme .button.secondary {
  background:linear-gradient(90deg, var(--card-cta-color), 50%, transparent 0);
}

.content-orange-theme .button.secondary::after,.content-orange-theme .button.primary::after,
.content-solar-theme .button.secondary::after,.content-solar-theme .button.primary::after
{
  border-color: var(--card-cta-color);
}

.content-orange-theme .button.secondary::before,.content-orange-theme .button.primary::before, 
.content-solar-theme .button.secondary::before,.content-solar-theme .button.primary::before 
{
  background:var(--card-cta-color);
}

.content-orange-theme .button.primary, .content-orange-theme .button.secondary,
.content-solar-theme .button.primary, .content-solar-theme .button.secondary {
  background-position: 100% 100%;
  background-size: 200% 100%;
  color: var(--ivory-primary);
}

.content-orange-theme .button.primary:hover, .content-orange-theme .button.secondary:hover,
.content-solar-theme .button.primary:hover, .content-solar-theme .button.secondary:hover {
  background-position: 0 100%;
   color: var(--ivory-primary) !important;
}

.content-orange-theme .button.primary:hover::before,
.content-orange-theme .button.primary:active::before,
.content-orange-theme .button.secondary:hover::before,
.content-orange-theme .button.secondary:active::before,
.content-solar-theme .button.primary:hover::before,
.content-solar-theme .button.primary:active::before,
.content-solar-theme .button.secondary:hover::before,
.content-solar-theme .button.secondary:active::before {
  background-color: var(--ivory-primary) !important;
}

.content-orange-theme .button.primary:hover::after,
.content-orange-theme .button.primary:active::after,
.content-orange-theme .button.secondary:hover::after,
.content-orange-theme .button.secondary:active::after,
.content-solar-theme .button.primary:hover::after,
.content-solar-theme .button.primary:active::after,
.content-solar-theme .button.secondary:hover::after,
.content-solar-theme .button.secondary:active::after {
  border-color: var(--ivory-primary) !important;
}


/* ================= Background Utilities ================= */

.bg-light-beige {
  background-color: var(--linen-extra-light) !important;
}

.bg-oceanic-green-secondary-lightest {
  background-color: var(--green-secondary-lightest) !important;
}

.bg-spring-green {
  background-color: var(--spring-green-primary) !important;
}

.bg-white-mist-light {
  background-color: var(--ivory-light) !important;
}

.bg-oceanic-green-primary {
  background-color: var(--green-primary) !important;
}

/* ================= default ================= */

main img {
  max-width: 100%;
  width: auto;
  height: auto;
}

.d-block{
  display: block;
}

.icon {
  display: inline-block;
  height: 24px;
  width: 24px;
}

.icon img {
  height: 100%;
  width: 100%;
}

/* ================= Containers ================= */
.container{
  max-width: 100%;
  margin: 0 auto;
  padding: 0 16px;
}

.container-padding {
  max-width: 100%;
  margin: 0 auto;
  padding: 16px;
}

@media (width >= 992px) {
  .container {
    max-width: 1440px;
    padding: 0 80px;
  }

  .container-padding {
    max-width: 1440px;
    padding: 40px 80px;
  }
}

/* nav-item block wrapper — inlined to avoid a critical-path CSS request */
.nav-item-wrapper {
  display: block;
}

/* Error section */
  .error-section{
    padding : 40px 1pc;
  }

  .error-section h2 {
      font-size: var(--fs-large);;
      line-height: 2.4pc;
      margin: 0 0 1pc;
  }

  .error-section p{
    font-size: var(--fs-h5);
    line-height: 1.3pc;
    margin: 0 0 24px;
  }

  .error-section img{
    height: 63.333vw;
  }

@media (width >= 992px) {
  .error-section{
    padding : 0;
  }

  .error-section h2 {
      font-family: var(--font-syne);;
      font-size: var(--fs-64);
      font-weight: 600;
      line-height: 4pc;
      margin: 50px 0 2pc;
      text-align: left;
      -ms-flex-pack: center;
      display: -webkit-box;
      display: flex;
      justify-content: center;
  }

  .error-section p {
      font-family: var(--font-outfit);;
      font-size: var(--fs-h1);
      font-weight: 400;
      line-height: 24px;
      margin: 0 0 105px;
      text-align: left;
      -ms-flex-pack: center;
      display: -webkit-box;
      display: flex;
      justify-content: center;
  }

  .error-section img {
    margin: auto;
    width: auto;
    height: 31.319vw;
    -ms-flex-pack: center;
    display: flex;
    justify-content: center;
  }

}

.blue-medium {
  color: var(--blue-medium);
}

.section.terms-section{
    background-color: #ebe6dd;
    padding-top: 5pc;
    padding-bottom: 5pc;
    box-sizing: border-box;
}

.section.terms-section::before{
  background-color: #ebe6dd;
  content: "";
  position: absolute;
  height: 100%;
  top: 0;
  width: 1920px;
  transform: translateX(-50%);
  left: 50%;
  z-index: -1;
}

.section.terms-section .richtext-content {
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
}

.section.terms-section p{
    color: #202020;
    font-family: Outfit, sans-serif;
    font-size: 1.125rem;
    font-weight: 300;
    line-height: 27px;
    margin-bottom: 1.5rem;
    padding: 0;
    text-align: justify !important;
}

.section.terms-section .richtext-content p{
    margin-bottom: 0;
}

/* ── Section spacing utilities ────────────────────────────── */

/* Padding 80px top+bottom on desktop, 40px on mobile */
.section.padding-80-40 {
  padding-top: 40px;
  padding-bottom: 40px;
}

@media (width >= 992px) {
  .section.padding-80-40 {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}

/* Bottom Margin 0px — always wins, even when combined with padding-80-40 */
.section.no-bottom-margin {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

@media (width <= 768px) {
    .section.terms-section{
        padding: 24px 16px;
    }

    .section.terms-section .richtext-content {
        padding: 0;
    }

  .section.terms-section p{
    width: 91.6667%;
  }
}

/* ================= Tab Panel sections ================= */

/* Inactive tab-panel sections are hidden via [hidden] attribute by tab-list.js */

.section[role="tabpanel"][hidden] {
  display: none;
}

.section[role="tabpanel"][aria-hidden="true"] {
  display: none;
}