@font-face {
  font-family: 'galano-grotesque-regular';
  src: url('/fonts/GalanoGrotesque.woff2') format('woff2');
  font-weight: normal;
  font-display: swap;
}

@font-face {
  font-family: 'galano-grotesque-medium';
  src: url('/fonts/GalanoGrotesqueMedium.woff2') format('woff2');
  font-weight: normal;
  font-display: swap;
}

@font-face {
  font-family: 'galano-grotesque-alt';
  src: url('/fonts/GalanoGrotesqueAlt.woff2') format('woff2');
  font-weight: normal;
  font-display: swap;
}

@font-face {
  font-family: 'galano-grotesque-alt-medium';
  src: url('/fonts/GalanoGrotesqueAltMedium.woff2') format('woff2');
  font-weight: normal;
  font-display: swap;
}

@font-face {
  font-family: 'agrandir-normal';
  src: url('/fonts/PPAgrandir-Medium.woff2') format('woff2');
  font-weight: 480;
  font-display: swap;
}

@font-face {
  font-family: 'agrandir-regular';
  src: url(/fonts/PPAgrandir-Regular.woff2) format('woff2');
  font-weight: normal;
  font-display: swap;
}

@font-face {
  font-family: 'galano-grotesque-italic';
  src: url('/fonts/GalanoGrotesqueItalic.woff2') format('woff2');
  font-weight: normal;
  font-display: swap;
}

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

html {
  color: var(--color-ink-700-rgb);
  color: var(--color-ink-700-oklch);
  font-size: 62.5%;
  line-height: 1.5;
}

:root {
  --color-primary-500-rgb: rgb(211 222 50);
  --color-primary-500-oklch: oklch(86.42% 0.1803 113.41);
  --color-primary-300-rgb: rgb(223 242 156);
  --color-primary-300-oklch: oklch(92.75% 0.1111 118.77);
  --color-accent-500-rgb: rgb(172 28 79);
  --color-accent-500-oklch: oklch(49% 0.1788 6.88);
  --color-accent-300-rgb: rgb(255 143 156);
  --color-accent-300-oklch: oklch(77.34% 0.1354 13.34);
  --color-ink-900-rgb: rgb(1 37 41);
  --color-ink-900-oklch: oklch(24.19% 0.0404 205.76);
  --color-ink-700-rgb: rgb(0 54 61);
  --color-ink-700-oklch: oklch(30.47% 0.0524 208.75);
  --color-ink-500-rgb: rgb(15 84 93);
  --color-ink-500-oklch: oklch(41.01% 0.0653 208.32);
  --color-light-700-rgb: rgb(178 178 159);
  --color-light-700-oklch: oklch(75.83% 0.0264 107.01);
  --color-light-500-rgb: rgb(221 221 187);
  --color-light-500-oklch: oklch(88.87% 0.0451 107.28);
  --color-light-300-rgb: rgb(242 242 222);
  --color-light-300-oklch: oklch(95.58% 0.0263 106.89);
  --color-light-100-rgb: rgb(255 255 241);
  --color-light-100-oklch: oklch(99.62% 0.0182 106.73);
  --color-white-rgb: rgb(255 255 255);
  --color-white-oklch: oklch(100% 0 0);
  --spacing-xxs: 0.4rem;
  --spacing-xs: 0.8rem;
  --spacing-s: 1.2rem;
  --spacing-m: 1.6rem;
  --spacing-l: 2rem;
  --spacing-xl: 2.8rem;
  --spacing-xxl: 3.2rem;
  --spacing-xxl-2: 4rem;
  --spacing-xxl-3: 4.8rem;
  --spacing-xxl-4: 6rem;
  --spacing-xxl-5: 8rem;
  --spacing-xxl-6: 12rem;
  --spacing-xxl-7: 16rem;
  --spacing-xxl-8: 20rem;
  --font-family-agrandir-normal: 'agrandir-normal', Verdana, sans-serif;
  --font-family-agrandir-regular: 'agrandir-regular', Verdana, sans-serif;
  --font-family-galano-regular: 'galano-grotesque-regular', Verdana, sans-serif;
  --font-family-galano-medium: 'galano-grotesque-medium', Verdana, sans-serif;
  --font-family-galano-alt: 'galano-grotesque-alt', Verdana, sans-serif;
  --font-family-galano-alt-medium: 'galano-grotesque-alt-medium', Verdana, sans-serif;
  --font-family-galano-italic: 'galano-grotesque-italic', Verdana, sans-serif;
  --transition-ease-io: ease-in-out;
  --transition-ease-o: ease-out;
}

body {
  font-family: var(--font-family-galano-regular);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  background-color: var(--color-light-100-rgb);
  background-color: var(--color-light-100-oklch);
}

body.menu-open {
  overflow: hidden;
}

:focus:not(:focus-visible) {   
  outline: none; 
}

::-moz-selection {
  color: var(--color-ink-900-rgb);
  color: var(--color-ink-900-oklch);
  background: var(--color-primary-300-rgb);
  background: var(--color-primary-300-oklch);
  text-shadow: none;
}

::selection {
  color: var(--color-ink-900-rgb);
  color: var(--color-ink-900-oklch);
  background: var(--color-primary-300-rgb);
  background: var(--color-primary-300-oklch);
  text-shadow: none;
}

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid;
  border-top-color: var(--color-ink-900-rgb);
  border-top-color: var(--color-ink-900-oklch);
  margin: 1rem 0;
  padding: 0;
}

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

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

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

input {
  padding: 0;
  margin: 0;
}

textarea {
  padding: 0;
  margin: 0;
  resize: vertical;
}

button {
  border: 0;
  background: none;
  cursor: pointer;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
figure,
blockquote {
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

a {
  text-decoration: none;
  color: inherit;
  background-color: transparent;
}

/* ==========================================================================
   Skip Link
   ========================================================================== */
.skip-link {
  position: absolute;
  top: -9999px;
  font-size: clamp(1.1rem, 0.7vw, 1.3rem);
  padding: var(--spacing-xs) var(--spacing-l);
  background-color: var(--color-ink-900-rgb);
  background-color: var(--color-ink-900-oklch);
  color: var(--color-light-100-rgb);
  color: var(--color-light-100-oklch);
  outline: 1px solid;
  outline-offset: -1px;
  outline-color: var(--color-ink-900-rgb);
  outline-color: var(--color-ink-900-oklch);
  border-radius: 10rem;
  transition: background-color 0.3s var(--transition-ease-io), color 0.3s var(--transition-ease-io);
  z-index: 9999;
}

.skip-link:focus-visible {
  top: 0;
}

.skip-link:focus-visible:hover {
  color: var(--color-ink-900-rgb);
  color: var(--color-ink-900-oklch);
  background-color: var(--color-primary-300-rgb);
  background-color: var(--color-primary-300-oklch);
}

@media only screen and (max-width: 767px) {
  .skip-link:focus-visible {
    width: 100%;
    display: block;
    border-radius: 0;
    text-align: center;
  }
}

/* ==========================================================================
   Page Transitions
   ========================================================================== */
html.is-changing .transition-main {
  transition: opacity 0.3s ease-in-out;
}

html.is-animating .transition-main {
  opacity: 0;
}

/* ==========================================================================
   Layout
   ========================================================================== */
.layout {
  position: relative;
  width: 100%;
  margin: 0 auto;
  max-width: 160rem;
  padding: 0 2vw;
}

.layout-item {
  position: relative;
  padding: 0 1vw;
}

@media only screen and (max-width: 767px) {
  .layout,
  .layout-item {
    padding: 0 1rem;
  }
}

/* ==========================================================================
   Typography
   ========================================================================== */
.heading-xl {
  font-family: var(--font-family-agrandir-normal);
  font-size: clamp(3.4rem, 5.2vw, 5.6rem);
  line-height: 1.04;
  color: var(--color-ink-900-rgb);
  color: var(--color-ink-900-oklch);
}

.heading-l {
  font-family: var(--font-family-agrandir-normal);
  font-size: clamp(3.4rem, 4.2vw, 4.2rem);
  line-height: 1;
  color: var(--color-ink-900-rgb);
  color: var(--color-ink-900-oklch);
}

.heading-m {
  font-family: var(--font-family-agrandir-normal);
  font-size: clamp(2.6rem, 2.8vw ,3.4rem);
  line-height: 1.2;
  color: var(--color-ink-900-rgb);
  color: var(--color-ink-900-oklch);
}

.heading-s {
  font-family: var(--font-family-agrandir-normal);
  font-size: clamp(2rem, 1.6vw ,2.6rem);
  line-height: 1.2;
  color: var(--color-ink-700-rgb);
  color: var(--color-ink-700-oklch);
}

.text-l {
  font-family: var(--font-family-galano-regular);
  font-size: clamp(1.6rem, 1.2vw, 2rem);
  line-height: 1.5;
  color: var(--color-ink-700-rgb);
  color: var(--color-ink-700-oklch);
}

.text-m {
  font-family: var(--font-family-galano-regular);
  font-size: clamp(1.45rem, 1.6vw, 1.6rem);
  line-height: 1.5;
  color: var(--color-ink-700-rgb);
  color: var(--color-ink-700-oklch);
}

.text-s {
  font-family: var(--font-family-galano-regular);
  font-size: 1.2rem;
  line-height: 1.5;
  color: var(--color-ink-700-rgb);
  color: var(--color-ink-700-oklch);
}

.text-bold {
  font-family: var(--font-family-galano-medium);
}

.text-italic {
  font-family: var(--font-family-galano-italic);
}

.text-price {
  font-family: var(--font-family-galano-alt);
  font-size: clamp(3.2rem, 2.4vw, 4rem);
  line-height: 1;
  letter-spacing: -0.09rem;
  color: var(--color-ink-900-rgb);
  color: var(--color-ink-900-oklch);
}

.text-old-price {
  font-family: var(--font-family-galano-alt);
  font-size: 2rem;
  line-height: 1.4;
  color: var(--color-ink-900-rgb);
  color: var(--color-ink-900-oklch);
  text-decoration: line-through;
  opacity: 0.65;
}

.text-label {
  font-family: var(--font-family-galano-medium);
  font-size: 1.4rem;
  line-height: 1;
  letter-spacing: 0.03rem;
  text-transform: uppercase;
  color: var(--color-ink-900-rgb);
  color: var(--color-ink-900-oklch);
}

.text-caps {
  font-family: var(--font-family-galano-medium);
  letter-spacing: 0.15rem;
  text-transform: uppercase;
}

.text-highlight {
  position: relative;
  color: var(--color-ink-900-rgb);
  color: var(--color-ink-900-oklch);
}

.text-highlight:before {
  content: '';
  position: absolute;
  display: block;
  top: 0;
  left: -0.2rem;
  right: -0.2rem;
  bottom: 0;
  background-color: var(--color-primary-300-rgb);
  background-color: var(--color-primary-300-oklch);
  border-radius: 0.2rem;
  transform: rotate(-3deg);
  z-index: -1;
}

@media only screen and (max-width: 767px) {
  .heading-xl {
    line-height: 1.08;
  }
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.button {
  display: inline-block;
  text-align: center;
  font-family: var(--font-family-galano-alt-medium);
  font-size: clamp(1.4rem, 0.95vw, 1.6rem);
  line-height: 1;
  color: var(--color-ink-900-rgb);
  color: var(--color-ink-900-oklch);
  background-color: var(--color-primary-500-rgb);
  background-color: var(--color-primary-500-oklch);
  padding: var(--spacing-m) var(--spacing-xl);
  outline: 1px solid transparent;
  outline-offset: 3px;
  border: 0;
  border-radius: 10rem;
  transition: all 0.3s var(--transition-ease-io);
  cursor: pointer;
}

.button.ink {
  color: var(--color-light-100-rgb);
  color: var(--color-light-100-oklch);
  background-color: var(--color-ink-700-rgb);
  background-color: var(--color-ink-700-oklch);
}

.button:hover {
  background-color: var(--color-primary-300-rgb);
  background-color: var(--color-primary-300-oklch);
}

.button.ink:hover {
  background-color: var(--color-ink-500-rgb);
  background-color: var(--color-ink-500-oklch);
}

.button:focus-visible {
  background-color: var(--color-primary-300-rgb);
  background-color: var(--color-primary-300-oklch);
  outline-color: var(--color-primary-300-rgb);
  outline-color: var(--color-primary-300-oklch);
}

.button.ink:focus-visible {
  background-color: var(--color-ink-500-rgb);
  background-color: var(--color-ink-500-oklch);
  outline-color: var(--color-ink-500-rgb);
  outline-color: var(--color-ink-500-oklch);
}

@media only screen and (max-width: 767px) {
  .button {
    line-height: 1.4;
    padding: var(--spacing-s) var(--spacing-l);
  }
}

/* ==========================================================================
   Links
   ========================================================================== */
.inline-link {
  position: relative;
  display: inline-block;
  font-family: var(--font-family-galano-alt-medium);
  text-decoration: underline;
  transition: color 0.3s var(--transition-ease-io);
  z-index: 9;
}

.inline-link::before {
  content: '';
  position: absolute;
  display: block;
  left: -0.2rem;
  right: -0.2rem;
  top: 0;
  bottom: 0;
  background-color: transparent;
  border-radius: 0.4rem;
  transition: background-color 0.3s var(--transition-ease-io);
  z-index: -2;
}

.inline-link:hover {
  color: var(--color-ink-500-rgb);
  color: var(--color-ink-500-oklch);
}

.inline-link:focus-visible {
  outline: none;
}

.inline-link:focus-visible::before {
  background-color: var(--color-primary-300-rgb);
  background-color: var(--color-primary-300-oklch);
}

.inline-link:focus-visible {
  color: var(--color-ink-700-rgb);
  color: var(--color-ink-700-oklch);
}

/* ==========================================================================
   Labels
   ========================================================================== */
.label {
  display: inline-block;
  font-family: var(--font-family-galano-medium);
  font-size: clamp(1.2rem, 0.8vw, 1.4rem);
  line-height: 1;
  letter-spacing: 0.03rem;
  text-transform: uppercase;
  color: var(--color-ink-900-rgb);
  color: var(--color-ink-900-oklch);
  background-color: var(--color-primary-300-rgb);
  background-color: var(--color-primary-300-oklch);
  padding: 1rem;
  border-radius: 0.8rem;
}

.label.highlight {
  text-transform: none;
  letter-spacing: 0;
  background-color: var(--color-accent-300-rgb);
  background-color: var(--color-accent-300-oklch);
}

/* ==========================================================================
   Social Icons
   ========================================================================== */
.social-icons {
  display: flex;
}

.social-icons li:not(:last-child) {
  margin-right: var(--spacing-s);
}

.social-icons a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  outline: 1px solid;
  outline-color: var(--color-light-700-rgb);
  outline-color: var(--color-light-700-oklch);
  border-radius: 100%;
  transition: background-color 0.3s var(--transition-ease-io), outline-color 0.3s var(--transition-ease-io);
}

.social-icons.negative a,
.negative-header .social-icons a {
  background-color: var(--color-ink-900-rgb);
  background-color: var(--color-ink-900-oklch);
  outline-color: rgb(240 240 217 / 0.2);
  outline-color: oklch(94.9% 0.0303 106.96 / 20%);
}

.social-icons a:hover {
  outline-color: var(--color-ink-500-rgb);
  outline-color: var(--color-ink-500-oklch);
}

.social-icons.negative a:hover,
.negative-header .social-icons a:hover {
  outline-color: var(--color-primary-300-rgb);
  outline-color: var(--color-primary-300-oklch);
}

.social-icons a:focus-visible {
  background-color: var(--color-primary-300-rgb);
  background-color: var(--color-primary-300-oklch);
  outline-color: var(--color-ink-700-rgb);
  outline-color: var(--color-ink-700-oklch);
}

.social-icons.negative a:focus-visible,
.negative-header .social-icons a:focus-visible {
  background-color: var(--color-primary-300-rgb);
  background-color: var(--color-primary-300-oklch);
  outline-color: var(--color-ink-900-rgb);
  outline-color: var(--color-ink-900-oklch);
}

.social-icons svg {
  height: 2.4rem;
  width: auto;
  z-index: 99;
}

.social-icons path {
  fill: var(--color-ink-900-rgb);
  fill: var(--color-ink-900-oklch);
  transition: fill 0.3s var(--transition-ease-io);
}

.social-icons.negative path,
.negative-header .social-icons path {
  fill: var(--color-light-100-rgb);
  fill: var(--color-light-100-oklch);
}

.social-icons a:hover path {
  fill: var(--color-ink-500-rgb);
  fill: var(--color-ink-500-oklch);
}

.social-icons.negative a:hover path,
.negative-header .social-icons a:hover path {
  fill: var(--color-primary-300-rgb);
  fill: var(--color-primary-300-oklch);
}

.social-icons.negative a:focus-visible path,
.negative-header .social-icons a:focus-visible path {
  fill: var(--color-ink-900-rgb);
  fill: var(--color-ink-900-oklch);
}

/* ==========================================================================
   Announcement Bar
   ========================================================================== */
.announcement-bar {
  position: relative;
  display: flex;
  justify-content: center;
  text-align: center;
  width: 100%;
  font-size: clamp(1.1rem, 0.7vw, 1.3rem);
  background-color: var(--color-primary-300-rgb);
  background-color: var(--color-primary-300-oklch);
  padding: var(--spacing-xs) var(--spacing-l);
  z-index: 999;
}

.announcement-bar:focus-visible {
  outline: 1px solid;
  outline-color: var(--color-ink-900-rgb);
  outline-color: var(--color-ink-900-oklch);
  outline-offset: -1px;
}

.announcement-bar span span {
  font-family: var(--font-family-galano-alt-medium);
  text-decoration: underline;
}

@media only screen and (max-width: 767px) {
  .announcement-bar {
    padding: var(--spacing-xs);
  }
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-m) var(--spacing-xxl);
  background-color: var(--color-light-100-rgb);
  background-color: var(--color-light-100-oklch);
  transition: background-color 0.3s var(--transition-ease-io);
  z-index: 999;
}

.negative-header .site-header {
  background-color: var(--color-ink-700-rgb);
  background-color: var(--color-ink-700-oklch);
}

.site-header .header-logo {
  position: relative;
  flex: 0 0 25%;
  z-index: 999;
}

.site-header .header-logo a {
  display: block;
  width: 16rem;
  outline: 1px solid transparent;
  outline-offset: 3px;
}

.site-header .header-logo a:focus-visible {
  border-radius: 0.8rem;
  outline-color: var(--color-ink-900-rgb);
  outline-color: var(--color-ink-900-oklch);
}

.negative-header .site-header .header-logo a:focus-visible {
  border-radius: 0.8rem;
  outline-color: var(--color-primary-300-rgb);
  outline-color: var(--color-primary-300-oklch);
}

.site-header .header-logo svg {
  width: 100%;
  height: auto;
}

.site-header .header-logo svg path {
  fill: var(--color-ink-900-rgb);
  fill: var(--color-ink-900-oklch);
  transition: fill 0.3s var(--transition-ease-io);
}

.negative-header .site-header .header-logo svg path {
  fill: var(--color-light-100-rgb);
  fill: var(--color-light-100-oklch);
}

.site-header nav {
  flex: 0 0 75%;
  display: flex;
  align-items: center;
}

.site-header .main-nav {
  flex: 0 0 66.666%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.site-header .main-nav li {
  margin: 0 var(--spacing-xxs);
}

.site-header .main-nav a {
  font-family: var(--font-family-galano-alt);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--color-ink-900-rgb);
  color: var(--color-ink-900-oklch);
  padding: var(--spacing-s) var(--spacing-xs);
  border-radius: 10rem;
  outline: 1px solid transparent;
  outline-offset: 3px;
  transition: all 0.3s var(--transition-ease-io);
}

.site-header .main-nav a:hover {
  background-color: var(--color-light-300-rgb);
  background-color: var(--color-light-300-oklch);
}

.site-header .main-nav a:focus-visible {
  background-color: var(--color-primary-300-rgb);
  background-color: var(--color-primary-300-oklch);
  outline-color: var(--color-ink-700-rgb);
  outline-color: var(--color-ink-700-oklch);
}

.negative-header .site-header .main-nav a {
  color: var(--color-light-100-rgb);
  color: var(--color-light-100-oklch);
}

.negative-header .site-header .main-nav a:hover {
  background-color: var(--color-ink-500-rgb);
  background-color: var(--color-ink-500-oklch);
}

.negative-header .site-header .main-nav a:focus-visible {
  color: var(--color-ink-900-rgb);
  color: var(--color-ink-900-oklch);
  background-color: var(--color-primary-300-rgb);
  background-color: var(--color-primary-300-oklch);
  outline-color: var(--color-primary-300-rgb);
  outline-color: var(--color-primary-300-oklch);
}

.site-header .header-buttons {
  flex: 0 0 33.333%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.site-header .header-buttons a {
  display: block;
  font-family: var(--font-family-galano-alt);
  font-size: 1.5rem;
  line-height: 1;
  padding: var(--spacing-s) var(--spacing-l);
  border: 1px solid transparent;
  outline: 1px solid transparent;
  outline-offset: 3px;
  border-radius: 10rem;
  transition: all 0.3s var(--transition-ease-io);
}

.site-header .header-buttons a:first-child {
  color: var(--color-ink-900-rgb);
  color: var(--color-ink-900-oklch);
  border-color: var(--color-ink-900-rgb);
  border-color: var(--color-ink-900-oklch);
  margin-right: var(--spacing-s);
}

.site-header .header-buttons a:first-child:hover {
  color: var(--color-ink-500-rgb);
  color: var(--color-ink-500-oklch);
  background-color: var(--color-light-300-rgb);
  background-color: var(--color-light-300-oklch);
  border-color: var(--color-ink-500-rgb);
  border-color: var(--color-ink-500-oklch);
}

.site-header .header-buttons a:first-child:focus-visible {
  background-color: var(--color-primary-300-rgb);
  background-color: var(--color-primary-300-oklch);
  border-color: transparent;
  outline-color: var(--color-ink-700-rgb);
  outline-color: var(--color-ink-700-oklch);
}

.negative-header .site-header .header-buttons a:first-child {
  color: var(--color-light-100-rgb);
  color: var(--color-light-100-oklch);
  border-color: var(--color-light-100-rgb);
  border-color: var(--color-light-100-oklch);
}

.negative-header .site-header .header-buttons a:first-child:hover {
  background-color: var(--color-ink-500-rgb);
  background-color: var(--color-ink-500-oklch);
}

.negative-header .site-header .header-buttons a:first-child:focus-visible {
  color: var(--color-ink-900-rgb);
  color: var(--color-ink-900-oklch);
  background-color: var(--color-primary-300-rgb);
  background-color: var(--color-primary-300-oklch);
  border-color: transparent;
  outline-color: var(--color-primary-300-rgb);
  outline-color: var(--color-primary-300-oklch);
}

.site-header .header-buttons a:last-child {
  color: var(--color-light-100-rgb);
  color: var(--color-light-100-oklch);
  background-color: var(--color-ink-900-rgb);
  background-color: var(--color-ink-900-oklch);
}

.site-header .header-buttons a:last-child:hover {
  background-color: var(--color-ink-500-rgb);
  background-color: var(--color-ink-500-oklch);
}

.site-header .header-buttons a:last-child:focus-visible {
  background-color: var(--color-ink-500-rgb);
  background-color: var(--color-ink-500-oklch);
  outline-color: var(--color-ink-700-rgb);
  outline-color: var(--color-ink-700-oklch);
}

.negative-header .site-header .header-buttons a:last-child {
  color: var(--color-ink-900-rgb);
  color: var(--color-ink-900-oklch);
  background-color: var(--color-light-100-rgb);
  background-color: var(--color-light-100-oklch);
}

.negative-header .site-header .header-buttons a:last-child:hover {
  background-color: var(--color-primary-300-rgb);
  background-color: var(--color-primary-300-oklch);
}

.negative-header .site-header .header-buttons a:last-child:focus-visible {
  background-color: var(--color-primary-300-rgb);
  background-color: var(--color-primary-300-oklch);
  outline-color: var(--color-primary-300-rgb);
  outline-color: var(--color-primary-300-oklch);
}

.site-header .mobile-nav-button {
  position: relative;
  display: none;
  width: 4rem;
  height: 4rem;
  align-items: center;
  justify-content: center;
  outline: 1px solid transparent;
  outline-offset: 3px;
  border-radius: 100%;
  transition: outline-color 0.3s var(--transition-ease-io);
  z-index: 999;
}

.site-header .mobile-nav-button:focus-visible {
  outline-color: var(--color-ink-700-rgb);
  outline-color: var(--color-ink-700-oklch);
}

.negative-header .mobile-nav-button:focus-visible {
  outline-color: var(--color-primary-300-rgb);
  outline-color: var(--color-primary-300-oklch);
}

.site-header .mobile-nav-button span {
  position: relative;
  display: block;
  height: 2px;
  width: 3.6rem;
}

.site-header .mobile-nav-button span::before,
.site-header .mobile-nav-button span::after {
  content: '';
  position: absolute;
  display: block;
  height: 2px;
  width: 100%;
  background-color: var(--color-ink-900-rgb);
  background-color: var(--color-ink-900-oklch);
  transition: transform 0.3s var(--transition-ease-io), background-color 0.3s var(--transition-ease-io);
}

.negative-header .site-header .mobile-nav-button span::before,
.negative-header .site-header .mobile-nav-button span::after {
  background-color: var(--color-light-300-rgb);
  background-color: var(--color-light-300-oklch);
}

.site-header .mobile-nav-button:hover span::before,
.site-header .mobile-nav-button:hover span::after,
.site-header .mobile-nav-button:focus-visible span::before,
.site-header .mobile-nav-button:focus-visible span::after {
  background-color: var(--color-ink-700-rgb);
  background-color: var(--color-ink-700-oklch);
}

.negative-header .site-header .mobile-nav-button:hover span::before,
.negative-header .site-header .mobile-nav-button:hover span::after,
.negative-header .site-header .mobile-nav-button:focus-visible span::before,
.negative-header .site-header .mobile-nav-button:focus-visible span::after {
  background-color: var(--color-primary-300-rgb);
  background-color: var(--color-primary-300-oklch);
}

.site-header .mobile-nav-button span::before {
  top: -0.4rem;
}

.site-header .mobile-nav-button span::after {
  top: 0.4rem;
}

.site-header .mobile-nav-button.active span::before {
  transform: rotate(45deg);
  top: 0;
}

.site-header .mobile-nav-button.active span::after {
  transform: rotate(-45deg);
  top: 0;
}

.site-header .menu-label {
  position: relative;
  display: none;
  width: 100%;
  color: var(--color-ink-900-rgb);
  color: var(--color-ink-900-oklch);
  padding-top: var(--spacing-l);
  margin-bottom: var(--spacing-xl);
}

.negative-header .site-header .menu-label {
  color: var(--color-light-300-rgb);
  color: var(--color-light-300-oklch);
}

.site-header .menu-label::before,
.site-header .bottom::before {
  content: '';
  position: absolute;
  display: block;
  width: 100%;
  height: 1px;
  top: 0;
  left: 0;
  background-color: var(--color-ink-700-rgb);
  background-color: var(--color-ink-700-oklch);
  opacity: 0.2;
}

.negative-header .site-header .menu-label::before,
.negative-header .site-header .bottom::before {
  background-color: var(--color-light-300-rgb);
  background-color: var(--color-light-300-oklch);
}

.site-header .bottom {
  position: relative;
  display: none;
  flex-flow: column nowrap;
  width: 100%;
  padding-top: var(--spacing-l);
}

.site-header .bottom .social-icons {
  margin-bottom: var(--spacing-xxl-2);
}

.site-header .bottom .logos {
  display: flex;
  flex-flow: row nowrap;
}

.site-header .bottom .logos .header-iaap-logo {
  width: 10rem;
  margin-right: var(--spacing-xl);
}

.site-header .bottom .logos .header-certificate {
  width: 12.4rem;
}

.site-header .bottom .logos svg {
  width: 100%;
  height: auto;
}

.site-header .bottom .logos path {
  fill: var(--color-ink-900-rgb);
  fill: var(--color-ink-900-oklch);
}

.negative-header .bottom .logos path {
  fill: var(--color-light-100-rgb);
  fill: var(--color-light-100-oklch);
}

@media only screen and (max-width:1239px) and (min-width:1060px) {
  .site-header .header-logo a {
    width: 100%;
  }

  .site-header .header-logo {
    flex: 0 0 18%;
    padding-right: 2rem;
  }

  .site-header nav {
    flex: 0 0 82%;
  }

  .site-header .main-nav {
    flex: 0 0 64%;
    justify-content: flex-start;
  }
  
  .site-header .header-buttons {
    flex: 0 0 36%;
  }
}

@media only screen and (max-width:1059px) {
  .site-header {
    padding: var(--spacing-m) var(--spacing-l);
  }

  .site-header .mobile-nav-button {
    display: flex;
    flex: 0 0 auto;
  }

  .site-header .header-logo {
    flex: 0 0 auto;
  }

  .site-header .header-logo a {
    width: 14.8rem;
  }

  .site-header nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: absolute;
    width: 100%;
    min-height: 100vh;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: var(--spacing-xxl-6) var(--spacing-l) var(--spacing-xxl-4);
    background-color: var(--color-light-300-rgb);
    background-color: var(--color-light-300-oklch);
    z-index: 99;
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.3s var(--transition-ease-o) 0.3s;
  }

  .negative-header .site-header nav {
    background-color: var(--color-ink-900-rgb);
    background-color: var(--color-ink-900-oklch);
  }

  .site-header .menu-label,
  .site-header .bottom {
    display: flex;
  }

  .site-header .menu-label,
  .site-header .main-nav,
  .site-header .header-buttons,
  .site-header .bottom {
    opacity: 0;
    transition: opacity 0.3s var(--transition-ease-o);
  }

  .site-header nav.active {
    transform: scaleY(1);
    transition: transform 0.3s var(--transition-ease-io);
  }

  .site-header nav.active .menu-label,
  .site-header nav.active .main-nav,
  .site-header nav.active .header-buttons,
  .site-header nav.active .bottom {
    opacity: 1;
    transition: opacity 0.3s var(--transition-ease-io) 0.3s;
  }

  .site-header .main-nav,
  .site-header .header-buttons {
    flex: 0 0 auto;
    flex-direction: column;
    align-items: flex-start;
  }

  .site-header .main-nav li {
    margin: 0 0 0.2rem;
  }

  .site-header .header-buttons {
    margin-bottom: var(--spacing-xxl-2);
  }

  .site-header .main-nav a,
  .site-header .header-buttons a {
    font-family: var(--font-family-agrandir-regular);
    font-size: 3.2rem;
    line-height: 1.2;
    padding: 0;
  }

  .site-header .main-nav a,
  .site-header .header-buttons a:first-child,
  .site-header .header-buttons a:last-child {
    position: relative;
    color: var(--color-light-900-rgb);
    color: var(--color-light-900-oklch);
    border: none;
    outline: none;
    background-color: transparent;
  }

  .site-header .main-nav a::before,
  .site-header .header-buttons a:first-child::before,
  .site-header .header-buttons a:last-child::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: -0.8rem;
    right: -0.8rem;
    bottom: 0;
    border-radius: 10rem;
    outline: 1px solid transparent;
    outline-color: transparent;
    transition: outline 0.3s var(--transition-ease-io);
  }

  .negative-header .site-header .main-nav a,
  .negative-header .site-header .header-buttons a:first-child,
  .negative-header .site-header .header-buttons a:last-child {
    background-color: transparent;
    color: var(--color-light-100-rgb);
    color: var(--color-light-100-oklch);
  }

  .site-header .main-nav a:hover,
  .site-header .header-buttons a:first-child:hover,
  .site-header .header-buttons a:last-child:hover,
  .site-header .main-nav a:focus-visible,
  .site-header .header-buttons a:first-child:focus-visible,
  .site-header .header-buttons a:last-child:focus-visible {
    background-color: transparent;
    color: var(--color-ink-500-rgb);
    color: var(--color-ink-500-oklch);
  }

  .negative-header .site-header .main-nav a:hover,
  .negative-header .site-header .header-buttons a:first-child:hover,
  .negative-header .site-header .header-buttons a:last-child:hover,
  .negative-header .site-header .main-nav a:focus-visible,
  .negative-header .site-header .header-buttons a:first-child:focus-visible,
  .negative-header .site-header .header-buttons a:last-child:focus-visible {
    background-color: transparent;
    color: var(--color-primary-300-rgb);
    color: var(--color-primary-300-oklch);
  }

  .site-header .main-nav a:focus-visible::before,
  .site-header .header-buttons a:first-child:focus-visible::before,
  .site-header .header-buttons a:last-child:focus-visible::before {
    background-color: transparent;
    outline-color: var(--color-ink-500-rgb);
    outline-color: var(--color-ink-500-oklch);
  }

  .negative-header .site-header .main-nav a:focus-visible::before,
  .negative-header .site-header .header-buttons a:first-child:focus-visible::before,
  .negative-header .site-header .header-buttons a:last-child:focus-visible::before {
    background-color: transparent;
    outline-color: var(--color-primary-300-rgb);
    outline-color: var(--color-primary-300-oklch);
  }

}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  background-color: var(--color-ink-900-rgb);
  background-color: var(--color-ink-900-oklch);
  padding: var(--spacing-xxl-7) 0 var(--spacing-xxl-5);
}

.site-footer .layout {
  display: grid;
  grid-template-columns: repeat(3, 33.333%);
}

.site-footer .layout-item:first-child {
  grid-column: 1;
  grid-row: 1 / span 3;
}

.site-footer .layout-item:nth-child(2) {
  grid-column: 2;
  grid-row: 1;
}

.site-footer.layout-item:nth-child(3) {
  grid-column: 3;
  grid-row: 1;
}

.site-footer.layout-item:nth-child(4) {
  grid-column: 2 / span 2;
  grid-row: 2;
}

.site-footer .layout-item:last-child {
  grid-column: 2 / span 2;
  grid-row: 3;
}

.site-footer .footer-logo {
  display: inline-block;
  width: 20rem;
  outline: 1px solid transparent;
  outline-offset: 6px;
}

.site-footer .footer-logo:focus-visible {
  border-radius: 0.8rem;
  outline-color: var(--color-primary-300-rgb);
  outline-color: var(--color-primary-300-oklch);
}

.site-footer .footer-logo svg {
  width: 100%;
  height: auto;
}

.site-footer .footer-logo svg path {
  fill: var(--color-light-100-rgb);
  fill: var(--color-light-100-oklch);
}

.site-footer .footer-company,
.site-footer .footer-connect,
.site-footer .footer-legal {
  position: relative;
}

.site-footer .footer-company,
.site-footer .footer-connect {
  padding: var(--spacing-l) 0 var(--spacing-xxl-5);
}

.site-footer .footer-legal {
  flex: 1 1 auto;
  margin: var(--spacing-xxl) 2vw 0 0;
  padding-top: var(--spacing-l);
}

.site-footer .footer-company::before,
.site-footer .footer-connect::before,
.site-footer .footer-legal::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 1px;
  background-color: var(--color-light-300-rgb);
  background-color: var(--color-light-300-oklch);
  opacity: 0.2;
}

.site-footer .footer-legal::before {
  width: calc(100% - 18rem);
}

.site-footer .footer-heading {
  color: var(--color-light-100-rgb);
  color: var(--color-light-100-oklch);
  margin-bottom: var(--spacing-xxl-2);
}

.site-footer .footer-menu {
  margin-bottom: var(--spacing-xxl-2);
}

.site-footer .footer-menu,
.site-footer .footer-contact {
  font-family: var(--font-family-agrandir-regular);
  font-size: clamp(2rem, 1.6vw, 2.6rem);
  line-height: 1.2;
  color: var(--color-light-100-rgb);
  color: var(--color-light-100-oklch);
}

.site-footer .footer-menu a,
.site-footer .footer-contact a {
  position: relative;
  transition: color 0.3s var(--transition-ease-io);
}

.site-footer .footer-menu a:hover,
.site-footer .footer-contact a:hover {
  color: var(--color-primary-300-rgb);
  color: var(--color-primary-300-oklch);
}

.site-footer .footer-menu a:focus-visible,
.site-footer .footer-contact a:focus-visible {
  color: var(--color-primary-300-rgb);
  color: var(--color-primary-300-oklch);
  outline: none;
}

.site-footer .footer-menu a::before,
.site-footer .footer-contact a::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: -0.8rem;
  right: -0.8rem;
  bottom: 0;
  border-radius: 10rem;
  outline: 1px solid transparent;
  transition: outline 0.3s var(--transition-ease-io);
}

.site-footer .footer-menu a:focus-visible::before,
.site-footer .footer-contact a:focus-visible::before {
  outline-color: var(--color-primary-300-rgb);
  outline-color: var(--color-primary-300-oklch);
}

.site-footer .footer-iaap-logo {
  width: 16.6rem;
}

.site-footer .footer-iaap-logo svg {
  width: 100%;
  height: auto;
}

.site-footer .footer-iaap-logo path {
  fill: var(--color-light-100-rgb);
  fill: var(--color-light-100-oklch);
}

.site-footer .footer-contact {
  margin-bottom: var(--spacing-xl);
}

.site-footer .footer-contact li:first-child a {
  display: inline-block;
  margin-bottom: var(--spacing-xxl-2);
}

.site-footer .footer-contact li:last-child span {
  display: block;
}

.site-footer .footer-contact li:last-child a {
  text-decoration: underline;
}

.site-footer .footer-legal span,
.site-footer .footer-legal a {
  color: var(--color-light-100-rgb);
  color: var(--color-light-100-oklch);
}

.site-footer .footer-legal span {
  display: block;
}

.site-footer .footer-legal ul {
  display: flex;
  flex-flow: row wrap;
  margin-top: var(--spacing-s);
}

.site-footer .footer-legal li {
  padding: var(--spacing-xxs) 0;
}

.site-footer .footer-legal li:not(:last-child) {
  margin-right: var(--spacing-s);
}

.site-footer .footer-legal a {
  outline: 1px solid transparent;
  outline-offset: 2px;
  border-radius: 10rem;
  transition: all 0.3s var(--transition-ease-io);
  white-space: nowrap;
}

.site-footer .footer-legal a:hover {
  text-decoration: underline;
}

.site-footer .footer-legal a:focus-visible {
  color: var(--color-primary-300-rgb);
  color: var(--color-primary-300-oklch);
  outline-color: var(--color-primary-300-rgb);
  outline-color: var(--color-primary-300-oklch);
}

.site-footer .footer-certificate {
  position: absolute;
  width: 18rem;
  top: 0;
  right: 1vw;
}

.site-footer .footer-certificate svg {
  width: 100%;
  height: auto;
}

.site-footer .footer-certificate path {
  fill: var(--color-light-100-rgb);
  fill: var(--color-light-100-oklch);
}

@media only screen and (max-width:1059px) and (min-width:768px) {
  .site-footer {
    padding: var(--spacing-xxl-5) 0 var(--spacing-xxl-4);
  }

  .site-footer .layout {
    grid-template-columns: repeat(2, 50%);
  }

  .site-footer .layout-item:first-child {
    grid-column: 1 / span 3;
    grid-row: 1;
    margin-bottom: var(--spacing-xxl-3);
  }

  .site-footer .layout-item:nth-child(2) {
    grid-column: 1;
    grid-row: 2;
  }

  .site-footer .layout-item:nth-child(3) {
    grid-column: 2;
    grid-row: 2;
  }
  
  .site-footer .layout-item:last-child {
    grid-column: 1 / span 2;
    grid-row: 3;
  }

}

@media only screen and (max-width:767px) {
  .site-footer {
    padding: var(--spacing-xxl-5) 0 var(--spacing-xxl-4);
  }

  .site-footer .layout {
    display: flex;
    flex-flow: row wrap;
  }

  .site-footer .layout-item {
    width: 100%;
  }

  .site-footer .footer-logo {
    margin-bottom: var(--spacing-xl);
  }

  .site-footer .footer-company .footer-heading,
  .site-footer .footer-menu {
    display: none;
  }

  .site-footer .footer-heading,
  .site-footer .footer-contact,
  .site-footer .footer-contact li:first-child a {
    margin-bottom: var(--spacing-l);
  }

  .site-footer .footer-company,
  .site-footer .footer-connect {
    padding-bottom: var(--spacing-xxl-4);
  }

  .site-footer .footer-contact {
    font-size: 2rem;
  }

  .site-footer .footer-legal {
    flex: 0 0 100%;
    margin: var(--spacing-xxl) 0 0 0;
    padding-top: var(--spacing-xxl-4);
  }

  .site-footer .footer-legal::before {
    width: calc(100% - 18rem);
  }

  .site-footer .footer-certificate {
    width: 16rem;
    top: 0.8rem;
    right: 1rem;
  }

}

/* ==========================================================================
   Title Paragraphs
   ========================================================================== */
.title-paragraphs {
  position: relative;
  padding: var(--spacing-l) 0 var(--spacing-xxl-5);
}

.title-paragraphs::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 1px;
  background-color: var(--color-ink-700-rgb);
  background-color: var(--color-ink-700-oklch);
  opacity: 0.6;
}

.title-paragraphs .title {
  margin-bottom: var(--spacing-xxl-2);
}

.title-paragraphs p + p,
.title-paragraphs p + ul,
.title-paragraphs ul + p {
  margin-top: var(--spacing-l);
}

.title-paragraphs ul {
  list-style-position: outside;
  padding-left: 1.5rem;
}

.title-paragraphs ul li {
  list-style-type: disc;

}

/* ==========================================================================
   Title Center Logos
   ========================================================================== */
.title-center-logos {
  padding: var(--spacing-xxl-8) 0;
}

.title-center-logos .layout {
  display: flex;
  flex-flow: row wrap;
}

.title-center-logos .layout-item:first-child {
  flex: 0 0 66.666%;
  margin-left: 16.666%;
}

.title-center-logos .layout-item:last-child {
  flex: 0 0 100%;
}

.title-center-logos .title {
  text-align: center;
  margin-bottom: var(--spacing-xxl-5);
}

.title-center-logos ul {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: center;
}

.title-center-logos li {
  padding: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.title-center-logos li a {
  display: block;
}

.title-center-logos li a:focus-visible {
  outline: 1px solid;
  outline-offset: 3px;
  outline-color: var(--color-ink-900-rgb);
  outline-color: var(--color-ink-900-oklch);
}

.title-center-logos li a img {
  height: 8rem;
  max-height: 8rem;
  width: auto;
}

@media only screen and (max-width: 1059px) {
  .title-center-logos {
    padding: var(--spacing-xxl-6) 0;
  }
}

@media only screen and (max-width: 767px) {
  .title-center-logos {
    padding: var(--spacing-xxl-5) 0;
  }

  .title-center-logos .layout-item:first-child {
    flex: 0 0 100%;
    margin-left: 0;
  }

  .title-center-logos .title {
    margin-bottom: var(--spacing-xxl-3);
  }

  .title-center-logos li {
    flex: 0 0 50%;
    padding: 1.8rem 2.8rem;
  }

  .title-center-logos li a img {
    height: auto;
    width: auto;
  }
}


/* ==========================================================================
   Title Button Center
   ========================================================================== */
.title-button-center {
  padding: var(--spacing-xxl-8) 0 var(--spacing-xxl-6);
}

.title-button-center .layout {
  display: flex;
}

.title-button-center .layout-item {
  flex: 0 0 66.666%;
  margin-left: 16.666%;
}

.title-button-center .content {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
}

.title-button-center .content .title {
  text-align: center;
  margin-bottom: var(--spacing-xxl-2);
  z-index: 9;
}

.title-button-center.negative {
  background-color: var(--color-ink-700-rgb);
  background-color: var(--color-ink-700-oklch);
}

.title-button-center.negative .title {
  color: var(--color-light-100-rgb);
  color: var(--color-light-100-oklch);
}

@media only screen and (max-width: 1059px) {
  .title-button-center {
    padding: var(--spacing-xxl-6) 0 var(--spacing-xxl-3);
  }

  .title-button-center .layout-item {
    flex: 0 0 83.333%;
    margin-left: 8.333%;
  }
}

@media only screen and (max-width: 767px) {
  .title-button-center {
     padding: var(--spacing-xxl-5) 0 var(--spacing-xxl-2);
  }

  .title-button-center .layout-item {
    flex: 0 0 100%;
    margin-left: 0;
  }
}

/* ==========================================================================
   Title Text Button
   ========================================================================== */
.title-text-button {
  padding: var(--spacing-xxl-8) 0;
}

.title-text-button .layout {
  display: flex;
}

.title-text-button .layout-item {
  flex: 0 0 41.666%;
}

.title-text-button .title,
.title-text-button .text {
  margin-bottom: var(--spacing-xxl-2);
}

@media only screen and (max-width: 767px) {
  .title-text-button {
    padding: var(--spacing-xxl-5) 0;
  }

  .title-text-button .layout-item {
    flex: 0 0 100%;
  }
}

/* ==========================================================================
   Title Text Image
   ========================================================================== */
.title-text-image {
  padding: var(--spacing-xxl-8) 0;
}

.title-text-image .layout {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
}

.title-text-image.text-left-image-right .layout-item:first-child {
  flex: 0 0 41.666%;
}

.title-text-image.text-left-image-right .layout-item:last-child {
  flex: 0 0 50%;
  margin-left: 8.333%;
}

.title-text-image.image-left-text-right .layout-item:first-child {
  flex: 0 0 50%;
}

.title-text-image.image-left-text-right .layout-item:last-child {
  flex: 0 0 41.666%;
  margin-left: 8.333%;
}

.title-text-image .title + .text,
.title-text-image .text + .button {
  margin-top: var(--spacing-xxl-2);
}

@media only screen and (max-width: 767px) {
  .title-text-image {
    padding: var(--spacing-xxl-5) 0;
  }

  .title-text-image.text-left-image-right .layout-item:first-child,
  .title-text-image.image-left-text-right .layout-item:first-child {
    flex: 0 0 100%;
  }

  .title-text-image.text-left-image-right .layout-item:last-child,
  .title-text-image.image-left-text-right .layout-item:last-child {
    flex: 0 0 100%;
    margin-left: 0;
  }

  .title-text-image.image-left-text-right .layout-item:first-child {
    order: 2;
  }

  .title-text-image.image-left-text-right .layout-item:last-child {
    order: 1;
  }

  .title-text-image .title + .text,
  .title-text-image .text + .button {
    margin-top: var(--spacing-xl);
  }

  .title-text-image .content {
    margin-bottom: var(--spacing-xxl-4);
  }
}


/* ==========================================================================
   Title Text BG Image
   ========================================================================== */
.title-text-bg-image {
  position: relative;
  padding: var(--spacing-xxl-7) 0 var(--spacing-xxl-8);
}

.title-text-bg-image.negative {
  background-color: var(--color-ink-700-rgb);
  background-color: var(--color-ink-700-oklch);
}

.title-text-bg-image .layout {
  display: flex;
  flex-flow: row wrap;
}

.title-text-bg-image .layout-item {
  flex: 0 0 41.666%;
}

.title-text-bg-image .content {
  position: relative;
  z-index: 9;
}

.title-text-bg-image.negative .title,
.title-text-bg-image.negative .text,
.title-text-bg-image.negative .text p {
  color: var(--color-light-100-rgb);
  color: var(--color-light-100-oklch);
}

.title-text-bg-image .title + .text {
  margin-top: var(--spacing-xxl-2);
}

.title-text-bg-image .text p + p {
  margin-top: var(--spacing-l);
}

.title-text-bg-image p + .button {
  margin-top: var(--spacing-xxl-2);
}

.title-text-bg-image .bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: auto 100%;
  z-index: 0;
}

@media only screen and (max-width: 1059px) {
  .title-text-bg-image .layout-item {
    flex: 0 0 50%;
  }
}

@media only screen and (max-width: 767px) {
  .title-text-bg-image {
    display: flex;
    flex-flow: row wrap;
    padding: var(--spacing-xxl-5) 0 0;
  }

  .title-text-bg-image .layout-item {
    flex: 0 0 100%;
  }

  .title-text-bg-image .title + .text {
    margin-top: var(--spacing-xl);
  }

  .title-text-bg-image p + .button {
    margin-top: var(--spacing-xl);
  }

  .title-text-bg-image .bg-image {
    position: relative;
    height: 110vw;
  }
}

/* ==========================================================================
   Card Rows
   ========================================================================== */
.card-rows .layout {
  display: grid;
  grid-template-columns: repeat(3, 33.333%);
  grid-row-gap: var(--spacing-xxl);
}

.card-rows .card {
  position: relative;
  display: flex;
  flex-flow: column nowrap;
  height: 100%;
  padding: var(--spacing-xxl-3) var(--spacing-xxl);
  border-radius: 2.8rem;
}

.card-rows .card.primary {
  background-color: var(--color-primary-500-rgb);
  background-color: var(--color-primary-500-oklch);
}

.card-rows .card.ghost {
  background-color: var(--color-light-100-rgb);
  background-color: var(--color-light-100-oklch);
  border: 1px solid;
  border-color: var(--color-light-700-rgb);
  border-color: var(--color-light-700-oklch);
}

.card-rows .label {
  position: absolute;
  top: 0;
  left: var(--spacing-xxl);
  transform: translateY(-50%);
  z-index: 9;
}

.card-rows .card .number {
  font-family: var(--font-family-agrandir-normal);
  font-size: clamp(8.4rem, 6.8vw, 10rem);
  letter-spacing: -.25rem;
  line-height: 1;
  margin-bottom: var(--spacing-xxs);
}

.card-rows .card .title {
  min-height: 12.4rem;
  margin-bottom: var(--spacing-xxs);
}

.card-rows .card-details {
  display: flex;
  flex-flow: column nowrap;
  align-items: flex-start;
}

.card-rows .card-details a:not(.button),
.card-rows .card-details .text {
  margin-bottom: var(--spacing-l);
}

.card-rows .card-details a {
  display: block;
}

@media only screen and (max-width: 1059px) {
  .card-rows .layout {
    grid-template-columns: repeat(2, 50%);
  }

  .card-rows .card .title {
    min-height: 0;
    margin-bottom: var(--spacing-xxl-2);
  }
}

@media only screen and (max-width: 767px) {
  .card-rows .layout {
    display: flex;
    flex-flow: row wrap;
    grid-row-gap: var(--spacing-m);
  }

  .card-rows .layout {
    flex: 0 0 100%;
  }

  .card-rows .card {
    padding: 3.6rem var(--spacing-l);;
  }

  .card-rows .label {
    left: var(--spacing-l);
  }

  .card-rows .card .number {
    font-size: 8.8rem;
  }

  .card-rows .card-details a {
    width: 100%;
  }
}

/* ==========================================================================
   Dual Card Row
   ========================================================================== */
.dual-card-row {
  padding-bottom: var(--spacing-xxl-8);
}

.dual-card-row .layout {
  display: flex;
  flex-flow: row wrap;
}

.dual-card-row .layout-item.small {
  flex: 0 0 33.333%;
}

.dual-card-row .layout-item.large {
  flex: 0 0 66.666%;
}

.dual-card-row .card {
  position: relative;
  display: flex;
  flex-flow: column nowrap;
  height: 100%;
  border-radius: 2.8rem;
}

.dual-card-row .card.primary {
  background-color: var(--color-primary-500-rgb);
  background-color: var(--color-primary-500-oklch);
}

.dual-card-row .card.light {
  background-color: var(--color-light-300-rgb);
  background-color: var(--color-light-300-oklch);
}

.dual-card-row .small .card {
  padding: var(--spacing-xxl-3) var(--spacing-xxl);
}

.dual-card-row .small .card .title {
  margin-bottom: var(--spacing-l);
}

.dual-card-row .small .card .text {
  margin-bottom: var(--spacing-xxl-2);
}

.dual-card-row .large .card {
  padding: var(--spacing-xxl-5);
}

.dual-card-row .large .card .title {
  margin-bottom: var(--spacing-l);
}

.dual-card-row .large .card .text {
  margin-bottom: var(--spacing-xxl-2);
}

.dual-card-row .large .card .title + .card-footer {
  margin-top: var(--spacing-xxl-5);
}

.dual-card-row .card-footer,
.dual-card-row .large .card .social-icons {
  margin-top: auto;
}

.dual-card-row .card-footer {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
}

.dual-card-row .large .card-footer .social-icons {
  margin-top: 0;
}

.dual-card-row .card-footer span {
  margin: var(--spacing-l);
}

.dual-card-row .social-icons.negative a {
  background-color: var(--color-ink-700-rgb);
  background-color: var(--color-ink-700-oklch);
}

.dual-card-row .social-icons.negative a:hover {
  background-color: var(--color-ink-500-rgb);
  background-color: var(--color-ink-500-oklch);
}

.dual-card-row .social-icons.negative a:focus-visible {
  background-color: var(--color-primary-500-rgb);
  background-color: var(--color-primary-500-oklch);
}

@media only screen and (max-width: 1059px) {
  .dual-card-row {
    padding-bottom: var(--spacing-xxl-6);
  }

  .dual-card-row .layout-item.small,
  .dual-card-row .layout-item.large {
    flex: 0 0 50%;
  }

  .dual-card-row .large .card {
    padding: var(--spacing-xxl-3) var(--spacing-xxl);
  }

  .dual-card-row .large .card .title + .card-footer {
    margin-top: var(--spacing-l);
  }

  .dual-card-row .card .button {
    width: 100%;
    margin-top: auto;
  }

  .dual-card-row .card .card-footer .button {
    flex: 0 0 100%;
    margin-top: var(--spacing-xs);
  }
}

@media only screen and (max-width: 767px) {
  .dual-card-row {
    padding-bottom: var(--spacing-xxl-5);
  }

  .dual-card-row .layout-item.small,
  .dual-card-row .layout-item.large {
    flex: 0 0 100%;
  }

  .dual-card-row .layout-item:first-child {
    margin-bottom: var(--spacing-m)
  }

  .dual-card-row .small .card,
  .dual-card-row .large .card {
    height: auto;
    padding: 3.6rem var(--spacing-l);
  }

  .dual-card-row .large .card .title + .card-footer {
    margin-top: var(--spacing-m);
  }
}

/* ==========================================================================
   Title Text BG Image Card Rows
   ========================================================================== */
.title-text-bg-image-card-rows {
  position: relative;
}

.title-text-bg-image-card-rows .card-rows {
  position: relative;
  margin-top: -26rem;
}

@media only screen and (max-width: 767px) {
  .title-text-bg-image-card-rows .card-rows {
    margin-top: 0;
  }
}

/* ==========================================================================
   Title Text Cards
   ========================================================================== */
.title-text-cards {
  padding: var(--spacing-xxl-8) 0;
  background-color: var(--color-light-500-rgb);
  background-color: var(--color-light-500-oklch);
  background-image: image-set(
        url('/img/planet-earth-seen-from-space.webp') type('image/webp'),
        url('/img/planet-earth-seen-from-space.jpg') type('image/jpeg')
  );
  background-repeat: no-repeat;
  background-position: bottom right;
  background-size: cover;
}

.title-text-cards .layout {
  display: flex;
  flex-flow: row wrap;
}

.title-text-cards .layout:first-child .layout-item {
  flex: 0 0 50%;
}

.title-text-cards .layout:first-child .layout-item .title {
  margin-bottom: var(--spacing-xxl-2);
}

.title-text-cards .layout:first-child .layout-item .text {
  margin-bottom: var(--spacing-xxl-5);
}

.title-text-cards .layout:last-child .layout-item {
  flex: 0 0 33.333%;
}

.title-text-cards .layout:last-child .card {
  height: 100%;
  padding: var(--spacing-xxl-2) var(--spacing-xxl);
  background-color: var(--color-light-100-rgb);
  background-color: var(--color-light-100-oklch);
  border: 1px solid;
  border-color: var(--color-light-700-rgb);
  border-color: var(--color-light-700-oklch);
  border-radius: 2.8rem;
}

.title-text-cards .layout:last-child .card .title {
  margin-bottom: var(--spacing-xxl-2);
}

@media only screen and (max-width:1059px) {
  .title-text-cards {
    background-position: bottom right -30rem;
    padding: var(--spacing-xxl-5) 0;
  }

  .title-text-cards .layout:first-child .layout-item {
    flex: 0 0 66.666%;
  }

  .title-text-cards .layout:first-child .layout-item .title {
    margin-bottom: var(--spacing-l);
  }

  .title-text-cards .layout:first-child .layout-item .text {
    margin-bottom: var(--spacing-xxl-2);
  }

  .title-text-cards .layout:last-child .layout-item {
    flex: 0 0 66.666%;
  }

  .title-text-cards .layout:last-child .layout-item:not(:last-child) {
    margin-bottom: var(--spacing-l);
  }
}

@media only screen and (max-width:767px) {
  .title-text-cards .layout:first-child .layout-item {
    flex: 0 0 100%;
  }

  .title-text-cards .layout:last-child .layout-item {
    flex: 0 0 100%;
  }
}

/* ==========================================================================
   Title Card Tiers
   ========================================================================== */
.title-card-tiers {
  padding: var(--spacing-xxl-8) 0;
  background-color: var(--color-light-300-rgb);
  background-color: var(--color-light-300-oklch);
}

.title-card-tiers .layout:first-child {
  display: flex;
}

.title-card-tiers .layout:first-child .layout-item {
  flex: 0 0 66.666%;
  margin-left: 16.666%;
}

.title-card-tiers .layout:first-child header {
  text-align: center;
}

.title-card-tiers .layout:last-child {
  display: grid;
  grid-template-columns: repeat(3, 33.333%);
  grid-template-rows: repeat(2, auto);
}

.title-card-tiers .layout:last-child .layout-item:first-child,
.title-card-tiers .layout:last-child .layout-item:nth-child(2),
.title-card-tiers .layout:last-child .layout-item:nth-child(3) {
  grid-column: span 1; 
}

.title-card-tiers .layout:last-child .layout-item:last-child {
  grid-column: span 3; 
}

.title-card-tiers header .title {
  margin-bottom: var(--spacing-m);
}

.title-card-tiers header .subtitle {
  margin-bottom: var(--spacing-l);
}

.title-card-tiers header .text {
  margin-bottom: var(--spacing-xxl-5);
}

.title-card-tiers .card {
  position: relative;
  border-radius: 2.8rem;
  background-color: var(--color-light-100-rgb);
  background-color: var(--color-light-100-oklch);
  overflow: hidden;
}

.title-card-tiers .layout:last-child .layout-item:first-child .card,
.title-card-tiers .layout:last-child .layout-item:nth-child(2) .card,
.title-card-tiers .layout:last-child .layout-item:nth-child(3) .card {
  margin-bottom: var(--spacing-xxl-5);
}

.title-card-tiers .card .top {
  padding: var(--spacing-xxl-3) var(--spacing-xxl) var(--spacing-xxl-2);
}

.title-card-tiers .card .bottom {
  position: relative;
  display: flex;
  flex-flow: column nowrap;
  padding: var(--spacing-xxl-2) var(--spacing-xxl);
}

.title-card-tiers .card .bottom::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 1px;
  background-color: var(--color-light-500-rgb);
  background-color: var(--color-light-500-oklch);
}

.title-card-tiers .card .title {
  display: flex;
  align-items: center;
  margin-bottom: var(--spacing-l);
}

.title-card-tiers .card .title .label {
  margin-left: var(--spacing-m);
}

.title-card-tiers .card .text {
  margin-bottom: var(--spacing-xxl-2);
}

.title-card-tiers-list li:not(:last-child) {
  margin-bottom: var(--spacing-m);
}

.title-card-tiers-list li p {
  display: flex;
  align-items: flex-start;
}

.title-card-tiers-list .icon {
  flex: 0 0 auto;
  display: inline-block;
  width: 2.4rem;
  height: 2.4rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 28 28'%3E%3Cpath fill-rule='evenodd' d='M10.2 21.1c-.2 0-.4-.1-.6-.2L4 15.3c-.3-.3-.3-.9 0-1.2s.9-.3 1.2 0l5 5L21.9 7.4c.3-.3.9-.3 1.2 0 .3.3.3.9 0 1.2L10.8 20.9c-.1.1-.4.2-.6.2' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  margin-right: var(--spacing-s);
}

.title-card-tiers .card .old-price {
  display: block;
  margin-bottom: var(--spacing-xxs);
}

.title-card-tiers .card .price {
  display: flex;
  align-items: center;
  margin-bottom: var(--spacing-xl);
}

.title-card-tiers .card .price .label {
  margin-left: var(--spacing-m);
}

.title-card-tiers .card:not(.full-width) .button {
  width: 100%;
}

.title-card-tiers .card.full-width {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: flex-end;
  padding: var(--spacing-xxl-6) var(--spacing-xxl-5) var(--spacing-xxl-7);
}

.title-card-tiers .card.full-width .card-content {
  position: relative;
  width: 30%;
  z-index: 9;
}

.title-card-tiers .card.full-width .bg-image {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: image-set(
        url('/img/office-meeting-room-with-leather-office-chairs-around-a-long-table.webp') type('image/webp'),
        url('/img/office-meeting-room-with-leather-office-chairs-around-a-long-table.jpg') type('image/jpeg')
  );
  background-repeat: no-repeat;
  background-position: center right;
  background-size: cover;
  z-index: 0;
}

@media only screen and (max-width: 1059px) {
  .title-card-tiers {
    padding: var(--spacing-xxl-6) 0;
  }

  .title-card-tiers .layout:first-child .layout-item {
    flex: 0 0 83.333%;
    margin-left: 8.333%;
  }

  .title-card-tiers .layout:last-child {
    grid-template-columns: repeat(2, 50%);
  }

  .title-card-tiers .layout:last-child .layout-item:last-child {
    grid-column: span 1;
  }

  .title-card-tiers .card.full-width {
    align-items: flex-start;
    justify-content: flex-start;
    padding: var(--spacing-xxl-3) var(--spacing-xxl) var(--spacing-xxl-2);
  }

  .title-card-tiers .card.full-width .bg-image {
    position: relative;
    height: 40vw;
    order: 1;
    background-position: center left;
  }

  .title-card-tiers .card.full-width {
    padding: 0;
  }

  .title-card-tiers .card.full-width .card-content {
    width: 100%;
    padding: var(--spacing-xxl-3) var(--spacing-xxl);
    order: 2;
  }

  .title-card-tiers .card.full-width .button {
    width: 100%;
  }
}

@media only screen and (max-width: 767px) {
  .title-card-tiers {
    padding: var(--spacing-xxl-5) 0;
  }

  .title-card-tiers .layout:first-child .layout-item {
    flex: 0 0 100%;
    margin-left: 0;
  }

  .title-card-tiers header .title {
    margin-bottom: var(--spacing-xxs);
  }

  .title-card-tiers header .subtitle {
    margin-bottom: var(--spacing-xl);
  }

  .title-card-tiers header .text {
    margin-bottom: var(--spacing-xxl-4);
  }

  .title-card-tiers .layout:last-child {
    display: flex;
    flex-flow: row wrap;
  }

  .title-card-tiers .layout:last-child .layout-item {
    flex: 0 0 100%;
  }

  .title-card-tiers .layout:last-child .layout-item:first-child .card,
  .title-card-tiers .layout:last-child .layout-item:nth-child(2) .card,
  .title-card-tiers .layout:last-child .layout-item:nth-child(3) .card {
    margin-bottom: var(--spacing-l);
  }

  .title-card-tiers .card .top {
    padding: var(--spacing-xxl-2) var(--spacing-l) var(--spacing-xl);
  }

  .title-card-tiers .card .bottom {
    padding: var(--spacing-xl) var(--spacing-l) var(--spacing-xxl-2);
  }

  .title-card-tiers .card .text {
    margin-bottom: var(--spacing-xl);
  }

  .title-card-tiers-list li:not(:last-child) {
     margin-bottom: .8rem;
  }

  .title-card-tiers-list .icon {
    width: 2rem;
    height: 2rem;
  }

  .title-card-tiers .card.full-width .card-content {
    padding: var(--spacing-xxl-2) var(--spacing-l);
  }

  .title-card-tiers .card.full-width .bg-image {
    height: 60vw;
  }
}

/* ==========================================================================
   Title Text benefits List
   ========================================================================== */
.title-text-benefits-list {
  padding-bottom: var(--spacing-xxl-6);
}

.title-text-benefits-list .layout {
  display: flex;
  flex-flow: row wrap;
}

.title-text-benefits-list .layout-item:first-child {
  flex: 0 0 41.666%;
}

.title-text-benefits-list .layout-item:last-child {
  flex: 0 0 33.333%;
  margin-left: 25%;
  display: flex;
  flex-flow: column nowrap;
}

.title-text-benefits-list header .title + .text {
  margin-top: var(--spacing-xxl-2);
}

.title-text-benefits-list .benefit-list-item {
  position: relative;
  padding: var(--spacing-l) 0 var(--spacing-xxl-5);
}

.title-text-benefits-list .benefit-list-item::before {
  content: '';
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  width: 100%;
  background-color: var(--color-ink-700-rgb);
  background-color: var(--color-ink-700-oklch);
  opacity: 0.6;
}

.title-text-benefits-list .benefit-list-item .title {
  margin-bottom: var(--spacing-l);
}

@media only screen and (max-width: 1059px) {
  .title-text-benefits-list {
    padding-bottom: 1rem;
  }

  .title-text-benefits-list header {
    margin-bottom: var(--spacing-xxl-4);
  }

  .title-text-benefits-list .layout-item:first-child {
    flex: 0 0 66.666%;
  }

  .title-text-benefits-list .layout-item:last-child {
    flex: 0 0 66.666%;
    margin-left: 0;
  }
}

@media only screen and (max-width: 767px) {
  .title-text-benefits-list {
    padding-bottom: 0;
  }

  .title-text-benefits-list header {
    margin-bottom: var(--spacing-xxl-3);
  }

  .title-text-benefits-list .layout-item:first-child {
    flex: 0 0 100%;
  }

  .title-text-benefits-list .layout-item:last-child {
    flex: 0 0 100%;
  }
}

/* ==========================================================================
   Title Half Text Button
   ========================================================================== */
.title-half-text-button {
  padding: var(--spacing-xxl-8) 0;
}

.title-half-text-button .layout {
  display: flex;
  flex-flow: row wrap;
}

.title-half-text-button .layout-item:first-child {
  flex: 0 0 41.666%;
}

.title-half-text-button .layout-item:last-child {
  flex: 0 50%;
  margin-left: 8.333%;
}

.title-half-text-button .layout-item:last-child .subtitle + .text {
  margin-top: var(--spacing-l);
}

.title-half-text-button .layout-item:last-child .text + .button {
  margin-top: var(--spacing-xxl-2);
}

@media only screen and (max-width: 1059px) {
  .title-half-text-button {
    padding: var(--spacing-xxl-5) 0 var(--spacing-xxl-6);
  }

  .title-half-text-button .layout-item:first-child {
    flex: 0 0 75%;
  }

  .title-half-text-button .layout-item:last-child {
    flex: 0 0 75%;
    margin-left: 0;
  }

  .title-half-text-button .layout-item:first-child .title {
    margin-bottom: var(--spacing-xl);
  }

  .title-half-text-button .layout-item:last-child .subtitle + .text,
  .title-half-text-button .layout-item:last-child .text + .button {
    margin-top: var(--spacing-xl);
  }
}

@media only screen and (max-width: 767px) {
   .title-half-text-button .layout-item:first-child {
    flex: 0 0 100%;
  }

  .title-half-text-button .layout-item:last-child {
    flex: 0 0 100%;
  }
}

/* ==========================================================================
   Title Accordion
   ========================================================================== */
.title-accordion {
  padding: var(--spacing-xxl-8) 0;
  background-color: var(--color-light-300-rgb);
  background-color: var(--color-light-300-oklch);
}

.title-accordion-item:not(:last-child) {
  margin-bottom: var(--spacing-xxl-7);
}

.title-accordion-item .layout {
  display: flex;
  flex-flow: row wrap;
}

.title-accordion-item .layout-item:first-child {
  flex: 0 0 41.666%;
}

.title-accordion-item .layout-item:last-child {
  flex: 0 0 50%;
  margin-left: 8.333%;
}

.title-accordion-item .layout-item:first-child .title {
  padding-top: var(--spacing-l);
  margin-bottom: var(--spacing-l);
}

.accordion,
.accordion-item {
  position: relative;
}

.accordion::before,
.accordion-item::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  height: 1px;
  background-color: var(--color-ink-700-rgb);
  background-color: var(--color-ink-700-oklch);
  opacity: 0.6;
  z-index: 9;
}

.accordion::before {
  top: 0;
}

.accordion-item::before {
  bottom: 0;
}

.accordion-item .accordion-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  text-align: left;
  padding: var(--spacing-l) 0 var(--spacing-xxl-2);
}

.accordion-item .accordion-button:focus-visible {
  outline: none;
  background-color: var(--color-primary-300-rgb);
  background-color: var(--color-primary-300-oklch);
  border-radius: 0 0 0.8rem 0.8rem;
}

.accordion-item .accordion-button-icon {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 1.6rem;
  width: 1.6rem;
  margin-left: auto;
}

.accordion-item .accordion-button-icon::before,
.accordion-item .accordion-button-icon::after {
  content: '';
  position: absolute;
  display: block;
  background-color: var(--color-ink-900-rgb);
  background-color: var(--color-ink-900-oklch);
}

.accordion-item .accordion-button-icon::before {
  width: 100%;
  height: 2px;
}

.accordion-item .accordion-button-icon::after {
  width: 2px;
  height: 100%;
  transition: transform 0.3s var(--transition-ease-io);
}

.accordion-button[aria-expanded="true"] .accordion-button-icon::after {
  transform: rotate(90deg);
}

.accordion-item .accordion-panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s var(--transition-ease-io);
}

.accordion-item .accordion-panel.expanded {
  max-height: 100rem;
}

.accordion-item .accordion-panel .text {
  margin-bottom: var(--spacing-l);
}

.accordion-item .accordion-panel a {
  display: inline-block;
  margin-bottom: var(--spacing-xxl-4);
}

@media only screen and (max-width: 1059px) {
  .title-accordion {
    padding: var(--spacing-xxl-5) 0;
  }

  .title-accordion-item:not(:last-child) {
    margin-bottom: var(--spacing-xxl-5);
  }

  .title-accordion-item .layout-item:first-child {
    flex: 0 0 66.666%;
  }

  .title-accordion-item .layout-item:first-child .title {
    padding-top: 0;
  }

  .title-accordion-item .layout-item:last-child {
    flex: 0 0 66.666%;
    margin-left: 0;
  }

  .title-accordion-item header {
    margin-bottom: var(--spacing-xxl-2);
  }

  .accordion-item .accordion-panel .text {
    margin-bottom: var(--spacing-s);
  }

  .accordion-item .accordion-panel a {
    margin-bottom: var(--spacing-xl);
  }

}

@media only screen and (max-width: 767px) {
  .title-accordion-item .layout-item:first-child {
    flex: 0 0 100%;
  }

  .title-accordion-item .layout-item:last-child {
    flex: 0 0 100%;
  }

}

/* ==========================================================================
   Title Text Grid
   ========================================================================== */
.title-text-grid .layout {
  display: grid;
  grid-template-columns: repeat(3, 33.333%);
  padding-bottom: var(--spacing-xxl-6);
}

.title-text-item {
  position: relative;
  padding: var(--spacing-l) var(--spacing-l) var(--spacing-xxl-5) 0;
}

.title-text-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 1px;
  background-color: var(--color-ink-700-rgb);
  background-color: var(--color-ink-700-oklch);
  opacity: 0.6;
}

.title-text-item .title,
.title-text-item .text,
.title-text-item a {
  margin-bottom: var(--spacing-xxl-2);
}

.title-text-item .title {
  min-height: 8.2rem;
}

.title-text-item-list li {
  position: relative;
}

.title-text-item-list li:not(:last-child) {
  margin-bottom: var(--spacing-m);
}

.title-text-item-list li p {
  display: flex;
  align-items: flex-start;
}

.title-text-item-list .icon {
  flex: 0 0 auto;
  display: inline-block;
  width: 2.4rem;
  height: 2.4rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 28 28'%3E%3Cpath fill='rgb(1 37 41)' fill-rule='evenodd' d='M10.2 21.1c-.2 0-.4-.1-.6-.2L4 15.3c-.3-.3-.3-.9 0-1.2s.9-.3 1.2 0l5 5L21.9 7.4c.3-.3.9-.3 1.2 0 .3.3.3.9 0 1.2L10.8 20.9c-.1.1-.4.2-.6.2' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  margin-right: var(--spacing-s);
}

@media only screen and (max-width: 1059px) {
  .title-text-grid .layout {
    grid-template-columns: repeat(2, 50%);
    padding-bottom: 1rem;
  }
}

@media only screen and (max-width: 767px) {
  .title-text-grid .layout {
    grid-template-columns: repeat(1, 100%);
  }

  .title-text-item {
    padding-bottom: var(--spacing-xxl-4);
  }

  .title-text-item .title,
  .title-text-item .text,
  .title-text-item a {
    margin-bottom: var(--spacing-xl);
  }

  .title-text-item .title {
    min-height: 0;
  }

  .title-text-item-list .icon {
    width: 2rem;
    height: 2rem;
  }
}

/* ==========================================================================
   Text Card BG Image
   ========================================================================== */
.text-card-bg-image {
  position: relative;
  padding: var(--spacing-xxl-7) 0 var(--spacing-xxl-7);
  background-color: var(--color-ink-700-rgb);
  background-color: var(--color-ink-700-oklch);
}

.text-card-bg-image .layout {
  display: flex;

}

.text-card-bg-image .layout-item {
  flex: 0 0 41.666%;
}

.text-card-bg-image .title,
.text-card-bg-image p {
  color: var(--color-light-100-rgb);
  color: var(--color-light-100-oklch);
}

.text-card-bg-image header {
  position: relative;
  margin-bottom: var(--spacing-xxl-3);
  z-index: 9;
}

.text-card-bg-image header .title {
  margin-bottom: var(--spacing-xxl-2);
}

.text-card-bg-image header .text p + p {
  margin-top: var(--spacing-l);
}

.text-card-bg-image .card {
  position: relative;
  display: flex;
  flex-flow: column nowrap;
  padding: var(--spacing-xxl-3) var(--spacing-xxl);
  background-color: var(--color-ink-900-rgb);
  background-color: var(--color-ink-900-oklch);
  border-radius: 2.8rem;
  z-index: 9;
}

.text-card-bg-image .card .title {
  margin-bottom: var(--spacing-l);
}

.text-card-bg-image-list {
  margin-bottom: var(--spacing-xxl-2);
}

.text-card-bg-image-list li:not(:last-child) {
  margin-bottom: var(--spacing-m);
}

.text-card-bg-image-list li p {
  display: flex;
  align-items: flex-start;
}

.text-card-bg-image-list .icon {
  flex: 0 0 auto;
  display: inline-block;
  width: 2.4rem;
  height: 2.4rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 28 28'%3E%3Cpath fill='rgb(211 222 50)' fill-rule='evenodd' d='M10.2 21.1c-.2 0-.4-.1-.6-.2L4 15.3c-.3-.3-.3-.9 0-1.2s.9-.3 1.2 0l5 5L21.9 7.4c.3-.3.9-.3 1.2 0 .3.3.3.9 0 1.2L10.8 20.9c-.1.1-.4.2-.6.2' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  margin-right: var(--spacing-s);
}

.text-card-bg-image .card .button {
  width: 100%;
}

.text-card-bg-image .bg-image {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: image-set(
        url('/img/macbook-pro-with-current-haus-design-and-development-agency-website-on-screen.webp') type('image/webp'),
        url('/img/macbook-pro-with-current-haus-design-and-development-agency-website-on-screen.png') type('image/png')
  );
  background-repeat: no-repeat;
  background-position: bottom right;
  background-size: 50%;
  z-index: 0;
}

@media only screen and (max-width: 1059px) {
  .text-card-bg-image {
    padding: var(--spacing-xxl-6) 0;
  }

  .text-card-bg-image .layout-item {
    flex: 0 0 50%;
  }

}

@media only screen and (max-width: 767px) {
  .text-card-bg-image {
    padding: var(--spacing-xxl-5) 0 0;
  }

  .text-card-bg-image .layout-item {
    flex: 0 0 100%;
  }

  .text-card-bg-image header {
    margin-bottom: var(--spacing-xxl-3);
  }

  .text-card-bg-image header .title {
    margin-bottom: var(--spacing-xl);
  }

  .text-card-bg-image .card {
    padding: 3.6rem var(--spacing-l);
  }

  .text-card-bg-image-list {
    margin-bottom: var(--spacing-xxl-2);
  }

  .text-card-bg-image-list .icon {
    width: 2rem;
    height: 2rem;
  }

  .text-card-bg-image .bg-image {
    position: relative;
    height: 110vw;
    background-size: 110%;
  }
}

/* ==========================================================================
   Text Card Image
   ========================================================================== */
.text-card-image {
  position: relative;
  padding: var(--spacing-xxl-8) 0 var(--spacing-xxl-7);
  background-color: var(--color-ink-700-rgb);
  background-color: var(--color-ink-700-oklch);
}

.text-card-image .layout {
  display: grid;
  grid-template-columns: repeat(12, 8.333%);
  grid-template-rows: repeat(2, auto);
}

.text-card-image.text-left-image-right .layout-item:first-child {
  grid-column: 1 / span 5;
  grid-row: 1;
}

.text-card-image.text-left-image-right .layout-item:nth-child(2) {
  grid-column: 1 / span 5;
  grid-row: 2;
}

.text-card-image.text-left-image-right .layout-item:last-child {
  grid-column: 7 / span 12;
  grid-row: 1 / span 2;
}

.text-card-image.image-left-text-right .layout-item:first-child {
  grid-column: 1 / span 6;
  grid-row: 1 / span 2;
}

.text-card-image.image-left-text-right .layout-item:nth-child(2) {
  grid-column: 8 / span 12;
  grid-row: 1;
}

.text-card-image.image-left-text-right .layout-item:last-child {
  grid-column: 8 / span 12;
  grid-row: 2;
}

.text-card-image .title,
.text-card-image p {
  color: var(--color-light-100-rgb);
  color: var(--color-light-100-oklch);
}

.text-card-image header {
  position: relative;
  margin-bottom: var(--spacing-xxl-3);
  z-index: 9;
}

.text-card-image header .title {
  margin-bottom: var(--spacing-xxl-2);
}

.text-card-image header .text p + p {
  margin-top: var(--spacing-l);
}

.text-card-image .card {
  position: relative;
  display: flex;
  flex-flow: column nowrap;
  padding: var(--spacing-xxl-3) var(--spacing-xxl);
  background-color: var(--color-ink-900-rgb);
  background-color: var(--color-ink-900-oklch);
  border-radius: 2.8rem;
  z-index: 9;
}

.text-card-image .card .title {
  margin-bottom: var(--spacing-l);
}

.text-card-image-list {
  margin-bottom: var(--spacing-xxl-2);
}

.text-card-image-list li:not(:last-child) {
  margin-bottom: var(--spacing-m);
}

.text-card-image-list li p {
  display: flex;
  align-items: flex-start;
}

.text-card-image-list .icon {
  flex: 0 0 auto;
  display: inline-block;
  width: 2.4rem;
  height: 2.4rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 28 28'%3E%3Cpath fill='rgb(211 222 50)' fill-rule='evenodd' d='M10.2 21.1c-.2 0-.4-.1-.6-.2L4 15.3c-.3-.3-.3-.9 0-1.2s.9-.3 1.2 0l5 5L21.9 7.4c.3-.3.9-.3 1.2 0 .3.3.3.9 0 1.2L10.8 20.9c-.1.1-.4.2-.6.2' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  margin-right: var(--spacing-s);
}

.text-card-image .card .button {
  width: 100%;
}

@media only screen and (max-width: 1059px) {
  .text-card-image {
    padding: var(--spacing-xxl-6) 0;
  }

  .text-card-image.text-left-image-right .layout-item:first-child,
  .text-card-image.image-left-text-right .layout-item:nth-child(2) {
    grid-column: 1 / span 6;
    grid-row: 1;
  }

  .text-card-image.text-left-image-right .layout-item:nth-child(2),
  .text-card-image.image-left-text-right .layout-item:last-child {
    grid-column: 7 / span 12;
    grid-row: 1;
  }

  .text-card-image.text-left-image-right .layout-item:last-child,
  .text-card-image.image-left-text-right .layout-item:first-child {
    grid-column: 1 / span 12;
    grid-row: 2;
  }

  .text-card-image .card {
    margin-bottom: var(--spacing-xxl-4);
  }
}

@media only screen and (max-width: 767px) {
  .text-card-image {
    padding: var(--spacing-xxl-5) 0;
  }

  .text-card-image.text-left-image-right .layout {
    grid-template-rows: repeat(3, auto);
  }

  .text-card-image.text-left-image-right .layout-item:first-child,
  .text-card-image.image-left-text-right .layout-item:nth-child(2) {
    grid-column: 1 / span 12;
    grid-row: 1;
  }

  .text-card-image.text-left-image-right .layout-item:nth-child(2),
  .text-card-image.image-left-text-right .layout-item:last-child {
    grid-column: 1 / span 12;
    grid-row: 2;
  }

  .text-card-image.text-left-image-right .layout-item:last-child,
  .text-card-image.image-left-text-right .layout-item:first-child {
    grid-column: 1 / span 12;
    grid-row: 3;
  }

  .text-card-image header {
    margin-bottom: var(--spacing-xxl-3);
  }

  .text-card-image header .title {
    margin-bottom: var(--spacing-xl);
  }

  .text-card-image .card {
    padding: 3.6rem var(--spacing-l);
    margin-bottom: var(--spacing-xxl-3);
  }

  .text-card-image-list {
    margin-bottom: var(--spacing-xxl-2);
  }

  .text-card-image-list .icon {
    width: 2rem;
    height: 2rem;
  }
}

/* ==========================================================================
   Key Points Grid
   ========================================================================== */
.key-points-grid {
  padding-bottom: var(--spacing-xxl-8);
}

.key-points-grid .layout {
  display: flex;
  flex-flow: row wrap;
}

.key-points-grid .layout:first-child .layout-item {
  flex: 0 0 50%;
}

.key-points-grid .layout:last-child .layout-item:first-child {
  flex: 0 0 41.666%;
}

.key-points-grid .layout:last-child .layout-item:nth-child(2) {
  margin-left: 8.333%;
}

.key-points-grid .layout:last-child .layout-item:not(:first-child) {
  flex: 0 0 25%;
}

.key-points-grid .title {
  margin-bottom: var(--spacing-xxl-2);
}

.key-points-item {
  position: relative;
  padding-top: var(--spacing-l);
}

.key-points-item::before {
  content: '';
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  width: 100%;
  background-color: var(--color-ink-700-rgb);
  background-color: var(--color-ink-700-oklch);
  opacity: 0.6;
}

@media only screen and (max-width: 1059px) {
  .key-points-grid {
    padding-bottom: var(--spacing-xxl-5);
  }

  .key-points-grid .layout:first-child .layout-item {
    flex: 0 0 66.666%;
  }

  .key-points-grid .layout:last-child .layout-item:first-child {
    flex: 0 0 66.666%;
  }

  .key-points-grid .layout:last-child .layout-item:nth-child(2) {
    margin-left: 0;
  }

  .key-points-grid .layout:last-child .layout-item:not(:first-child) {
    flex: 0 0 50%;
  }

  .key-points-grid .text {
    margin-bottom: var(--spacing-xxl-5);
  }
}
  

@media only screen and (max-width: 767px) {
  .key-points-grid {
    padding-bottom: 0;
  }

  .key-points-grid .layout:first-child .layout-item,
  .key-points-grid .layout:last-child .layout-item:first-child,
  .key-points-grid .layout:last-child .layout-item:not(:first-child) {
    flex: 0 0 100%;
  }

  .key-points-grid .layout:last-child .layout-item:nth-child(2) {
    margin-left: 0;
  }

  .key-points-grid .title {
    margin-bottom: var(--spacing-xl);
  }

  .key-points-grid .layout:last-child .layout-item:not(:last-child) .text {
    margin-bottom: var(--spacing-xxl-4);
  }
}

/* ==========================================================================
   Benefits Grid with Card
   ========================================================================== */
.benefits-grid-card {
  padding: var(--spacing-xxl-8) 0;
}

.benefits-grid-card .layout:first-child {
  display: flex;
}

.benefits-grid-card .layout:first-child .layout-item {
  flex: 0 0 50%;
}

.benefits-grid-card .layout:last-child {
  display: grid;
  grid-template-columns: repeat(12, 8.333%);
  grid-template-rows: repeat(3, auto);
}

.benefits-grid-card .layout:last-child .layout-item {
  grid-column: span 3;
}

.benefits-grid-card .layout:last-child .layout-item:nth-child(3),
.benefits-grid-card .layout:last-child .layout-item:nth-child(4) {
  grid-row: 2;
}

.benefits-grid-card .layout:last-child .layout-item:nth-child(5),
.benefits-grid-card .layout:last-child .layout-item:nth-child(6) {
  grid-row: 3;
}

.benefits-grid-card .layout:last-child .layout-item:last-child {
  grid-column: 9 / span 4;
  grid-row: span 3;
}

.benefits-grid-card-heading .title {
  margin-bottom: var(--spacing-xxl-2);
}

.benefits-grid-card-heading .text {
  margin-bottom: var(--spacing-xxl-5);
}

.benefits-grid-item {
  position: relative;
  padding: var(--spacing-l) 0 var(--spacing-xxl-5);
}

.benefits-grid-card .layout:last-child .layout-item:nth-last-child(3) .benefits-grid-item,
.benefits-grid-card .layout:last-child .layout-item:nth-last-child(2) .benefits-grid-item {
  padding-bottom: 0;
}

.benefits-grid-item::before {
  content: '';
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  width: 100%;
  background-color: var(--color-ink-700-rgb);
  background-color: var(--color-ink-700-oklch);
  opacity: 0.6;
}

.benefits-grid-item .title {
  margin-bottom: var(--spacing-xxl-2);
}

.benefits-offer-card {
  display: flex;
  flex-flow: column nowrap;
  padding: var(--spacing-xxl);
  background-color: var(--color-ink-700-rgb);
  background-color: var(--color-ink-700-oklch);
  border-radius: 2.8rem;
}

.benefits-offer-card .title {
  color: var(--color-light-100-rgb);
  color: var(--color-light-100-oklch);
  margin-bottom: var(--spacing-xl);
}

.benefits-offer-card .text {
  color: var(--color-light-300-rgb);
  color: var(--color-light-300-oklch);
  margin-bottom: var(--spacing-xxl-5);
}

.benefits-offer-card .button {
  width: 100%;
}

@media only screen and (max-width: 1059px) {
  .benefits-grid-card {
    padding: var(--spacing-xxl-6) 0;
  }

  .benefits-grid-card .layout:first-child .layout-item {
    flex: 0 0 66.666%;
  }

  .benefits-grid-card .layout:last-child {
    display: flex;
    flex-flow: row wrap;
  }

  .benefits-grid-card .layout .layout-item:not(:last-child) {
    flex: 0 0 50%;
  }

  .benefits-grid-card .layout:last-child .layout-item:last-child {
    flex: 0 0 50%;
  }

  .benefits-offer-card {
    margin-top: var(--spacing-xxl-4);
  }
}

@media only screen and (max-width: 767px) {
  .benefits-grid-card {
    padding: var(--spacing-xxl-5) 0;
  }

  .benefits-grid-card .layout:first-child .layout-item {
    flex: 0 0 100%;
  }

  .benefits-grid-card .layout .layout-item {
    flex: 0 0 100%;
  }

  .benefits-grid-card .layout .layout-item:not(:last-child) {
    flex: 0 0 100%;
  }

  .benefits-grid-card .layout:last-child .layout-item:last-child {
    flex: 0 0 100%;
  }

  .benefits-grid-card-heading .title {
    margin-bottom: var(--spacing-xl);
  }

  .benefits-grid-card-heading .text {
    margin-bottom: var(--spacing-xxl-4);
  }

  .benefits-grid-item,
  .benefits-grid-card .layout:last-child .layout-item:nth-last-child(3) .benefits-grid-item, 
  .benefits-grid-card .layout:last-child .layout-item:nth-last-child(2) .benefits-grid-item {
    padding-bottom: var(--spacing-xxl-4);
  }

  .benefits-grid-item .title {
    margin-bottom: var(--spacing-xl);
  }

  .benefits-offer-card {
    padding: 3.6rem var(--spacing-l);
    margin-top: 1rem;
  }

  .benefits-offer-card .title {
    margin-bottom: var(--spacing-l);
  }

  .benefits-offer-card .text {
    margin-bottom: var(--spacing-xxl-2);
  }
}

/* ==========================================================================
   Title Text Logo Marquee
   ========================================================================== */
.title-text-logo-marquee {
  padding: var(--spacing-xxl-8) 0;
}

.title-text-logo-marquee .layout {
  display: flex;
}

.title-text-logo-marquee .layout-item {
  flex: 0 0 66.666%;
  margin-left: 16.666%;
}

.title-text-logo-marquee .content {
  text-align: center;
  margin-bottom: var(--spacing-xxl-5);
}

.title-text-logo-marquee .content .title {
  margin-bottom: var(--spacing-l);
}

.logo-marquee {
  display: flex;
  flex-flow: row nowrap;
  width: 100%;
  overflow-x: hidden;
  user-select: none;
  pointer-events: none;
}

.logo-marquee ul {
  flex: 0 0 auto;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-around;
  min-width: 100%;
  animation: marquee-move 90s linear infinite;
}

@media (prefers-reduced-motion) {
  .logo-marquee ul {
    animation: marquee-move 180s linear infinite;
  }
}

.logo-marquee li {
  margin: 0 var(--spacing-xxl-2);
}

.logo-marquee img {
  width: auto;
  height: 6rem;
}

@keyframes marquee-move {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

@media only screen and (max-width: 1059px) {
  .title-text-logo-marquee {
    padding: var(--spacing-xxl-6) 0;
  }

  .title-text-logo-marquee .layout-item {
    flex: 0 0 83.333%;
    margin-left: 8.333%;
  }
}

@media only screen and (max-width: 767px) {
  .title-text-logo-marquee {
    padding: var(--spacing-xxl-5) 0;
  }

  .title-text-logo-marquee .layout-item {
    flex: 0 0 100%;
    margin-left: 0;
  }

  .logo-marquee li {
    margin: 0 var(--spacing-l);
  }

  .logo-marquee img {
    height: 4.8rem;
  }
}

/* ==========================================================================
   Title Grid Slider
   ========================================================================== */
.title-grid-slider {
  padding: var(--spacing-xxl-8) 0;
}

.title-grid-slider .layout {
  display: flex;
}

.title-grid-slider .layout-item {
  flex: 0 0 100%;
  display: flex;
  justify-content: center;
}

.title-grid-slider .title {
  text-align: center;
  margin-bottom: var(--spacing-xxl-6);
}

.title-grid-slider .content {
  display: flex;
  flex-flow: column nowrap;
}

.title-grid-slider blockquote {
  padding: var(--spacing-xxl) var(--spacing-xxl) var(--spacing-xxl-3);
  outline: 1px solid;
  outline-offset: -1px;
  outline-color: var(--color-light-700-rgb);
  outline-color: var(--color-light-700-oklch);
  border-radius: 2.8rem;
}

.title-grid-slider blockquote + blockquote {
  margin-top: var(--spacing-l);
}

.title-grid-slider blockquote .icon {
  width: auto;
  height: 2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 380 66'%3E%3Cdefs%3E%3CclipPath id='clippath'%3E%3Cpath d='M-574.29-5902.16h1660v12317h-1660z' class='st0'/%3E%3C/clipPath%3E%3CclipPath id='clippath-1'%3E%3Cpath d='m167.01 4100.84-2.79 8.55h-8.97l7.25 5.29-2.76 8.64 7.26-5.3 7.22 5.3-2.74-8.57 7.23-5.35h-8.97l-2.72-8.55Zm-26.38 0-2.79 8.55h-8.97l7.25 5.29-2.76 8.64 7.26-5.3 7.22 5.3-2.74-8.57 7.23-5.35h-8.97l-2.72-8.55Zm-25.4 0-2.79 8.55h-8.97l7.25 5.29-2.76 8.64 7.26-5.3 7.22 5.3-2.74-8.57 7.23-5.35h-8.97l-2.72-8.55Zm-26.38 0-2.79 8.55h-8.97l7.25 5.29-2.76 8.64 7.26-5.3 7.22 5.3-2.74-8.57 7.23-5.35h-8.97l-2.72-8.55Zm-26.39 0-2.79 8.55H50.7l7.25 5.29-2.76 8.64 7.26-5.3 7.22 5.3-2.74-8.57 7.23-5.35h-8.97l-2.72-8.55Z' class='st1'/%3E%3C/clipPath%3E%3CclipPath id='clippath-2'%3E%3Cpath d='M-574.29-5902.16h1660v12317h-1660z' class='st0'/%3E%3C/clipPath%3E%3CclipPath id='clippath-3'%3E%3Cpath d='m167.01 4100.84-2.79 8.55h-8.97l7.25 5.29-2.76 8.64 7.26-5.3 7.22 5.3-2.74-8.57 7.23-5.35h-8.97l-2.72-8.55Zm-26.38 0-2.79 8.55h-8.97l7.25 5.29-2.76 8.64 7.26-5.3 7.22 5.3-2.74-8.57 7.23-5.35h-8.97l-2.72-8.55Zm-25.4 0-2.79 8.55h-8.97l7.25 5.29-2.76 8.64 7.26-5.3 7.22 5.3-2.74-8.57 7.23-5.35h-8.97l-2.72-8.55Zm-26.38 0-2.79 8.55h-8.97l7.25 5.29-2.76 8.64 7.26-5.3 7.22 5.3-2.74-8.57 7.23-5.35h-8.97l-2.72-8.55Zm-26.39 0-2.79 8.55H50.7l7.25 5.29-2.76 8.64 7.26-5.3 7.22 5.3-2.74-8.57 7.23-5.35h-8.97l-2.72-8.55Z' class='st1'/%3E%3C/clipPath%3E%3CclipPath id='clippath-4'%3E%3Cpath d='M-574.29-5902.16h1660v12317h-1660z' class='st0'/%3E%3C/clipPath%3E%3CclipPath id='clippath-5'%3E%3Cpath d='m167.01 4100.84-2.79 8.55h-8.97l7.25 5.29-2.76 8.64 7.26-5.3 7.22 5.3-2.74-8.57 7.23-5.35h-8.97l-2.72-8.55Zm-26.38 0-2.79 8.55h-8.97l7.25 5.29-2.76 8.64 7.26-5.3 7.22 5.3-2.74-8.57 7.23-5.35h-8.97l-2.72-8.55Zm-25.4 0-2.79 8.55h-8.97l7.25 5.29-2.76 8.64 7.26-5.3 7.22 5.3-2.74-8.57 7.23-5.35h-8.97l-2.72-8.55Zm-26.38 0-2.79 8.55h-8.97l7.25 5.29-2.76 8.64 7.26-5.3 7.22 5.3-2.74-8.57 7.23-5.35h-8.97l-2.72-8.55Zm-26.39 0-2.79 8.55H50.7l7.25 5.29-2.76 8.64 7.26-5.3 7.22 5.3-2.74-8.57 7.23-5.35h-8.97l-2.72-8.55Z' class='st1'/%3E%3C/clipPath%3E%3CclipPath id='clippath-6'%3E%3Cpath d='M-574.29-5902.16h1660v12317h-1660z' class='st0'/%3E%3C/clipPath%3E%3CclipPath id='clippath-7'%3E%3Cpath d='m167.01 4100.84-2.79 8.55h-8.97l7.25 5.29-2.76 8.64 7.26-5.3 7.22 5.3-2.74-8.57 7.23-5.35h-8.97l-2.72-8.55Zm-26.38 0-2.79 8.55h-8.97l7.25 5.29-2.76 8.64 7.26-5.3 7.22 5.3-2.74-8.57 7.23-5.35h-8.97l-2.72-8.55Zm-25.4 0-2.79 8.55h-8.97l7.25 5.29-2.76 8.64 7.26-5.3 7.22 5.3-2.74-8.57 7.23-5.35h-8.97l-2.72-8.55Zm-26.38 0-2.79 8.55h-8.97l7.25 5.29-2.76 8.64 7.26-5.3 7.22 5.3-2.74-8.57 7.23-5.35h-8.97l-2.72-8.55Zm-26.39 0-2.79 8.55H50.7l7.25 5.29-2.76 8.64 7.26-5.3 7.22 5.3-2.74-8.57 7.23-5.35h-8.97l-2.72-8.55Z' class='st1'/%3E%3C/clipPath%3E%3CclipPath id='clippath-8'%3E%3Cpath d='M-574.29-5902.16h1660v12317h-1660z' class='st0'/%3E%3C/clipPath%3E%3CclipPath id='clippath-9'%3E%3Cpath d='m167.01 4100.84-2.79 8.55h-8.97l7.25 5.29-2.76 8.64 7.26-5.3 7.22 5.3-2.74-8.57 7.23-5.35h-8.97l-2.72-8.55Zm-26.38 0-2.79 8.55h-8.97l7.25 5.29-2.76 8.64 7.26-5.3 7.22 5.3-2.74-8.57 7.23-5.35h-8.97l-2.72-8.55Zm-25.4 0-2.79 8.55h-8.97l7.25 5.29-2.76 8.64 7.26-5.3 7.22 5.3-2.74-8.57 7.23-5.35h-8.97l-2.72-8.55Zm-26.38 0-2.79 8.55h-8.97l7.25 5.29-2.76 8.64 7.26-5.3 7.22 5.3-2.74-8.57 7.23-5.35h-8.97l-2.72-8.55Zm-26.39 0-2.79 8.55H50.7l7.25 5.29-2.76 8.64 7.26-5.3 7.22 5.3-2.74-8.57 7.23-5.35h-8.97l-2.72-8.55Z' class='st1'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg clip-path='url(%23clippath)'%3E%3Cg clip-path='url(%23clippath-1)'%3E%3Cpath d='M49.71 4099.84h130v24.47h-130z' class='st12'/%3E%3C/g%3E%3C/g%3E%3Cg clip-path='url(%23clippath-2)'%3E%3Cg clip-path='url(%23clippath-3)'%3E%3Cpath d='M49.71 4099.84h130v24.47h-130z' class='st12'/%3E%3C/g%3E%3C/g%3E%3Cg clip-path='url(%23clippath-4)'%3E%3Cg clip-path='url(%23clippath-5)'%3E%3Cpath d='M49.71 4099.84h130v24.47h-130z' class='st12'/%3E%3C/g%3E%3C/g%3E%3Cg clip-path='url(%23clippath-6)'%3E%3Cg clip-path='url(%23clippath-7)'%3E%3Cpath d='M49.71 4099.84h130v24.47h-130z' class='st12'/%3E%3C/g%3E%3C/g%3E%3Cg clip-path='url(%23clippath-8)'%3E%3Cg clip-path='url(%23clippath-9)'%3E%3Cpath d='M49.71 4099.84h26v24.47h-26z' class='st12'/%3E%3C/g%3E%3C/g%3E%3Cpath d='m43.12 24.95 25.45.35-20.35 15.2 7.45 23.78-20.51-14.41-20.56 14.4 7.51-24.07L2 25.3l25.46-.34L35.14 1l7.98 23.95zM120.48 24.95l25.45.35-20.35 15.2 7.45 23.78-20.52-14.41-20.56 14.4 7.51-24.07-20.1-14.9 25.46-.34L112.49 1l7.99 23.95zM197.84 24.95l25.44.35-20.34 15.2 7.45 23.78-20.52-14.41-20.56 14.4 7.51-24.07-20.1-14.9 25.45-.34L189.85 1l7.99 23.95zM275.2 24.95l25.44.35-20.34 15.2 7.45 23.78-20.52-14.41-20.56 14.4 7.51-24.07-20.11-14.9 25.46-.34L267.21 1l7.99 23.95zM352.55 24.95l25.45.35-20.35 15.2 7.45 23.78-20.51-14.41-20.56 14.4 7.51-24.07-20.11-14.9 25.46-.34L344.56 1l7.99 23.95z' fill='rgb(1 37 41)' class='st2'/%3E%3C/svg%3E%0A");
  background-size: contain;
  background-position: left center;
  background-repeat: no-repeat;
  margin-bottom: var(--spacing-xxl-4);
}

@media only screen and (max-width: 1059px) {
  .title-grid-slider {
    padding: var(--spacing-xxl-6) 0 var(--spacing-xxl-8);
  }

  .title-grid-slider .title {
    margin-bottom: var(--spacing-xxl-4);
  }
}

@media only screen and (max-width: 767px) {
  .title-grid-slider {
    padding: var(--spacing-xxl-5) 0 var(--spacing-xxl-6)
  }

  .title-grid-slider .title {
    margin-bottom: var(--spacing-xxl-2);
  }

  .title-grid-slider blockquote {
    padding: var(--spacing-xxl) var(--spacing-l) var(--spacing-xxl-2);
  }

  .title-grid-slider blockquote .icon {
    height: 1.6rem;
    margin-bottom: var(--spacing-xl);
  }
}

/* ==========================================================================
   Call to Action
   ========================================================================== */
.call-to-action {
  background-color: var(--color-ink-900-rgb);
  background-color: var(--color-ink-900-oklch);
  padding-top: var(--spacing-xxl-8);
}

.call-to-action .layout {
  display: flex;
}

.call-to-action .layout-item {
  flex: 0 0 100%;
}

.call-to-action .content {
  background-color: var(--color-primary-500-rgb);
  background-color: var(--color-primary-500-oklch);
  background-image: image-set(
        url('/img/background-pattern.webp') type('image/webp'),
        url('/img/background-pattern.png') type('image/png')
  );
  background-repeat: no-repeat;
  background-position: top right;
  background-size: contain;
  padding: var(--spacing-xxl-5);
  border-radius: 2.8rem;
}

.call-to-action .content .title {
  margin-bottom: var(--spacing-xxl-2);
}

@media only screen and (max-width: 1059px) {
  .call-to-action {
    padding-top: var(--spacing-xxl-5);
  }

  .call-to-action .content {
    padding: var(--spacing-xxl-2);
  }
}

@media only screen and (max-width: 767px) {
  .call-to-action .content {
    padding: 3.6rem var(--spacing-l);
    background-size: 200%;
    background-position: top left 2rem;
  }

  .call-to-action .content .title {
    margin-bottom: var(--spacing-xxl-7);
  }

  .call-to-action .content .button {
    width: 100%;
  }
}

/* ==========================================================================
   Homepage
   ========================================================================== */
.homepage .title-text-bg-image .bg-image {
  background-image: image-set(
        url('/img/smiling-young-businessman-with-laptop.webp') type('image/webp'),
        url('/img/smiling-young-businessman-with-laptop.png') type('image/png')
  );
  background-position: bottom right;
}

.homepage-hero.title-text-bg-image {
  padding: var(--spacing-xxl-6) 0 var(--spacing-xxl-7);
}

.homepage-hero.title-text-bg-image .bg-image {
  background-image: image-set(
        url('/img/smiling-young-businesswoman-with-tablet.webp') type('image/webp'),
        url('/img/smiling-young-businesswoman-with-tablet.png') type('image/png')
  );
  background-position: left 46vw bottom;
  background-size: auto 98%;
}

@media only screen and (max-width: 1399px) {
  .homepage .title-text-bg-image .bg-image {
    background-position: bottom right -14rem;
  }
}

@media only screen and (max-width: 1059px) {
  .homepage .title-text-bg-image .bg-image {
    background-position: bottom right -25rem;
  }

  .homepage-hero.title-text-bg-image .bg-image {
    background-position: bottom right -22rem;
  }
}

@media only screen and (max-width: 767px) {
  .homepage .title-text-bg-image .bg-image {
    background-size: auto 100%;
    background-position: bottom right;
  }

  .homepage-hero.title-text-bg-image {
    padding: var(--spacing-xxl-3) 0 0;
  }

  .homepage-hero.title-text-bg-image .bg-image {

    background-image: image-set(
        url('/img/smiling-young-businesswoman-with-tablet_S.webp') type('image/webp'),
        url('/img/smiling-young-businesswoman-with-tablet_S.png') type('image/png')
    );
    background-size: auto 100%;
    background-position: bottom left -6rem;
    margin-top: var(--spacing-xl);
  }
}

.homepage-hero.title-text-bg-image .title {
  font-family: var(--font-family-agrandir-regular);
  font-size: clamp(4.8rem, 5.2vw, 8.8rem);
  line-height: 0.95;
}

@media only screen and (max-width: 767px) {
  .homepage-hero.title-text-bg-image .title {
    line-height: 1;
  }
}

.homepage .title-text-image figure {
  position: relative;
}

.homepage .title-text-image .ae-badge {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  top: -10rem;
  left: -4rem;
  width: clamp(16rem, 14vw, 24.8rem);
  height: clamp(16rem, 14vw, 24.8rem);
  border-radius: 100%;
  background-color: var(--color-primary-500-rgb);
  background-color: var(--color-primary-500-oklch);
}

.homepage .title-text-image .ae-badge svg {
  width: 85%;
  height: auto;
}

.homepage .title-text-image .ae-badge svg path {
  fill: var(--color-ink-900-rgb);
  fill: var(--color-ink-900-oklch);
}

@media only screen and (max-width: 1059px) {
  .homepage .title-text-image .ae-badge {
    left: -2rem;
  }
}

@media only screen and (max-width: 767px) {
  .homepage .title-text-image .ae-badge {
    top: auto;
    left: -1rem;
    bottom: -5rem;
  }
}

.homepage .benefits-grid-card {
  background-color: var(--color-light-300-rgb);
  background-color: var(--color-light-300-oklch);
}

.homepage .title-text-bg-image-card-rows .title-text-bg-image {
  padding: var(--spacing-xxl-8) 0 40rem;
}

.homepage .title-text-bg-image-card-rows .title-text-bg-image .bg-image {
  background-image: image-set(
        url('/img/smiling-man-with-glasses-sitting-at-a-desk-showing-a-standing-female-coworker-something-on-his-computer-monitor.webp') type('image/webp'),
        url('/img/smiling-man-with-glasses-sitting-at-a-desk-showing-a-standing-female-coworker-something-on-his-computer-monitor.jpg') type('image/jpeg')
  );
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: cover;
}

.homepage .title-text-bg-image-card-rows .title-text-bg-image .layout-item {
  flex: 0 0 58.333%;
}

@media only screen and (max-width: 1059px) {
  .homepage .title-text-bg-image-card-rows .title-text-bg-image {
    padding: 0;
  }

  .homepage .title-text-bg-image-card-rows .title-text-bg-image {
    display: flex;
    flex-flow: row wrap;
  }

  .homepage .title-text-bg-image-card-rows .title-text-bg-image .layout {
    order: 2;
  }

  .homepage .title-text-bg-image-card-rows .title-text-bg-image .layout-item {
    flex: 0 0 75%;
  }

  .homepage .title-text-bg-image-card-rows .title-text-bg-image .bg-image {
    background-image: image-set(
        url('/img/smiling-man-with-glasses-sitting-at-a-desk-showing-a-standing-female-coworker-something-on-his-computer-monitor_S.webp') type('image/webp'),
        url('/img/smiling-man-with-glasses-sitting-at-a-desk-showing-a-standing-female-coworker-something-on-his-computer-monitor_S.jpg') type('image/jpeg')
    );
    position: relative;
    height: 60vw;
    order: 1;
    margin-bottom: var(--spacing-xxl-3);
    background-position: center center;
    background-size: cover;
  }

  .homepage .title-text-bg-image-card-rows .card-rows {
    margin-top: 0;
  }

  .homepage .title-text-bg-image-card-rows .card-rows .layout-item:last-child {
    grid-column: 1 / 3;
  }

  .homepage .title-text-bg-image-card-rows .title-text-bg-image .content {
    margin-bottom: var(--spacing-xxl-4);
  }
}

@media only screen and (max-width: 767px) {
  .homepage .title-text-bg-image-card-rows .title-text-bg-image .bg-image {
    height: 80vw;
    background-position: bottom right -8rem;
  }

  .homepage .title-text-bg-image-card-rows .title-text-bg-image .layout-item {
    flex: 0 0 100%;
  }

  .homepage .title-text-bg-image-card-rows .card-rows .layout {
    grid-row-gap: var(--spacing-xxl);
  }
}

/* ==========================================================================
   Tax Credit
   ========================================================================== */
.tax-credit .title-text-bg-image-card-rows .title-text-bg-image {
  padding: var(--spacing-xxl-8) 0 40rem;
}

.tax-credit .title-text-bg-image-card-rows .title-text-bg-image .bg-image {
  background-image: image-set(
        url('/img/smiling-young-businessman-with-laptop.webp') type('image/webp'),
        url('/img/smiling-young-businessman-with-laptop.png') type('image/png')
  );
  background-repeat: no-repeat;
  background-position: bottom left 40vw;
  background-size: contain;
}

@media only screen and (max-width: 1059px) {
  .tax-credit .title-text-bg-image-card-rows .card-rows .layout-item:nth-child(3),
  .tax-credit .title-text-bg-image-card-rows .card-rows .layout-item:last-child {
    grid-column: 1 / span 2;
  }
}

@media only screen and (max-width: 767px) {
  .tax-credit .title-text-bg-image-card-rows .title-text-bg-image {
    padding: var(--spacing-xxl-5) 0 0;
  }

  .tax-credit .title-text-bg-image-card-rows .title-text-bg-image .bg-image {
    background-size: auto 100%;
    background-position: bottom right;
  }

  .tax-credit .title-text-bg-image-card-rows .card-rows {
    padding: var(--spacing-xxl-5) 0 0;
  }
}

/* ==========================================================================
   About
   ========================================================================== */
.about .title-text-image.image-left-text-right {
  padding: 0;
}

.about .title-text-bg-image .bg-image {
  background-image: image-set(
        url('/img/group-of-people-forming-a-human-chain-with-raised-arms-holding-hands.webp') type('image/webp'),
        url('/img/group-of-people-forming-a-human-chain-with-raised-arms-holding-hands.png') type('image/png')
  );
  background-repeat: no-repeat;
  background-position: center right;
  background-size: cover;
}

.about .title-text-bg-image .iaap-badge {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  top: -26rem;
  left: 0;
  width: clamp(16rem, 12vw, 22rem);
  height: clamp(16rem, 12vw, 22rem);
  border-radius: 100%;
  background-color: var(--color-primary-500-rgb);
  background-color: var(--color-primary-500-oklch);
  z-index: 9;
}

.about .title-text-bg-image .iaap-badge svg {
  width: 85%;
  height: auto;
}

.about .title-text-bg-image .iaap-badge svg path {
  fill: var(--color-ink-900-rgb);
  fill: var(--color-ink-900-oklch);
}

@media only screen and (max-width: 1059px) {
  .about .title-text-bg-image {
    padding: 0;
  }

  .about .title-text-bg-image .layout-item {
    flex: 0 0 66.666%;
  }

  .about .title-text-bg-image .bg-image {
    position: relative;
    height: 60vw;
    background-size: 200% auto;
    margin-top: var(--spacing-xxl-4);
  }

  .about .title-text-bg-image .iaap-badge {
    top: auto;
    bottom: -18rem;
  }
}

@media only screen and (max-width: 767px) {
  .about .title-text-bg-image .layout-item {
    flex: 0 0 100%;
  }

  .about .title-text-bg-image .bg-image {
    height: 100vw;
    background-size: cover;
  }

  .about .benefits-grid-card {
    padding-bottom: var(--spacing-m);
  }
}

/* ==========================================================================
   Pro Bono
   ========================================================================== */
.pro-bono .title-text-bg-image .bg-image {
  background-image: image-set(
        url('/img/collage-of-photos-with-people-performing-humanitarian-work-together.webp') type('image/webp'),
        url('/img/collage-of-photos-with-people-performing-humanitarian-work-together.png') type('image/png')
  );
  background-repeat: no-repeat;
  background-position: center left 50vw;
  background-size: auto 95%;
}

@media only screen and (max-width:1239px) {
  .pro-bono .title-text-bg-image .bg-image {
    background-position: center left 42vw;
  }
}

@media only screen and (max-width:1059px) {
  .pro-bono .title-text-bg-image .layout-item {
    flex: 0 0 41.333%;
  }

  .pro-bono .title-text-bg-image .bg-image {
    background-position: center left 40vw;
    background-size: 60% auto;
  }
}

@media only screen and (max-width:767px) {
   .pro-bono .title-text-bg-image {
    padding-bottom: var(--spacing-xxl-5);
   }

   .pro-bono .title-text-bg-image .content {
    margin-bottom: var(--spacing-xxl-2);
   }

  .pro-bono .title-text-bg-image .layout-item {
    flex: 0 0 100%;
  }

  .pro-bono .title-text-bg-image .bg-image {
    background-position: center;
    background-size: 110% auto;
  }
}

/* ==========================================================================
   Legal
   ========================================================================== */
.legal .layout {
  display: flex;
}

.legal .layout-item {
  flex: 0 0 66.666%;
}

.legal header {
  padding: var(--spacing-xxl-6) 0 var(--spacing-s);
}

.legal header .title {
  margin-bottom: var(--spacing-xxl-5);
}

.legal header span {
  display: block;
}

.legal .legal-content {
  padding-bottom: var(--spacing-xxl-6);
}

@media only screen and (max-width: 767px) {
  .legal .layout-item {
    flex: 0 0 100%;
  }
}

/* ==========================================================================
   Contact
   ========================================================================== */
.contact-content {
  padding: var(--spacing-xxl-8) 0;
}

.contact-content .layout {
  display: flex;
  flex-flow: row wrap;
}

.contact-content .layout-item:first-child {
  flex: 0 0 50%;
}

.contact-content .layout-item:last-child {
  flex: 0 0 41.666%;
  margin-left: 8.333%;
}

.contact-content header .title {
  margin-bottom: var(--spacing-xxl-2);
}

.contact-content header .text {
  margin-bottom: var(--spacing-xxl-5);
}

.contact-content .contact-form form {
  display: flex;
  flex-flow: column nowrap;
}

.contact-content form .form-group {
  position: relative;
  display: flex;
  flex-flow: column nowrap;
  margin-bottom: var(--spacing-xl);
}

.contact-content form .form-group.message,
.contact-content form .form-group.checkbox {
  margin-bottom: var(--spacing-xxl-2);
}

.contact-content form .form-group:last-child {
  margin-bottom: 0;
}

.contact-content form .form-group:last-child {
  align-items: flex-start;
}

.contact-content form .form-group:not(.checkbox) label {
  margin-bottom: var(--spacing-xxs);
}

.contact-content form input::placeholder,
.contact-content form select::placeholder,
.contact-content form textarea::placeholder {
  color: var(--color-ink-900-rgb);
  color: var(--color-ink-900-oklch);
  opacity: 0.6;
}

.contact-content form input[type="text"],
.contact-content form input[type="email"],
.contact-content form select,
.contact-content form textarea {
  background-color: var(--color-light-100-rgb);
  background-color: var(--color-light-100-oklch);
  padding: var(--spacing-m) var(--spacing-l);
  outline: 1px solid;
  outline-offset: -1px;
  outline-color: var(--color-light-700-rgb);
  outline-color: var(--color-light-700-oklch);
  border-radius: 1.2rem;
  transition: all 0.3 var(--transition-ease-io);
  border: none;
}

.contact-content form input[type="text"]:focus,
.contact-content form input[type="email"]:focus,
.contact-content form select:focus,
.contact-content form textarea:focus,
.contact-content form input[type="text"]:focus-visible,
.contact-content form input[type="email"]:focus-visible,
.contact-content form select:focus-visible,
.contact-content form textarea:focus-visible {
  background-color: var(--color-light-300-rgb);
  background-color: var(--color-light-300-oklch);
  outline-color: var(--color-ink-500-rgb);
  outline-color: var(--color-ink-500-oklch);
}

.contact-content form select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 28 28'%3E%3Cpath fill='rgb(1 37 41)' fill-rule='evenodd' d='M7.3 11c0-.2.1-.4.2-.5.3-.3.7-.3 1 0L14 16l5.5-5.5c.3-.3.7-.3 1 0 .3.3.3.7 0 1l-6 6c-.3.3-.7.3-1 0l-6-6c-.1-.1-.2-.3-.2-.5' clip-rule='evenodd'/%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-size: 2.8rem 2.8rem;
  background-position: right 2rem center;
  cursor: pointer;
}

.contact-content form .custom-checkbox {
  display: flex;
  align-items: flex-start;
  cursor: pointer;
  user-select: none;
}

.contact-content form .custom-checkbox-icon {
  flex: 0 0 auto;
  display: inline-block;
  width: 2.8rem;
  height: 2.8rem;
  background-color: var(--color-light-100-rgb);
  background-color: var(--color-light-100-oklch);
  outline: 1px solid;
  outline-color: var(--color-light-700-rgb);
  outline-color: var(--color-light-700-oklch);
  border-radius: 0.4rem;
  margin-right: var(--spacing-l);
  transition: all 0.3s var(--transition-ease-io);
}

.contact-content form input[type="checkbox"]:focus ~ .custom-checkbox .custom-checkbox-icon,
.contact-content form input[type="checkbox"]:focus-visible ~ .custom-checkbox .custom-checkbox-icon,
.contact-content form .custom-checkbox .custom-checkbox-icon:hover {
  background-color: var(--color-light-300-rgb);
  background-color: var(--color-light-300-oklch);
  outline-color: var(--color-ink-900-rgb);
  outline-color: var(--color-ink-900-oklch);
}

.contact-content form input[type="checkbox"]:checked + .custom-checkbox .custom-checkbox-icon {
  position: relative;
  background-color: var(--color-ink-900-rgb);
  background-color: var(--color-ink-900-oklch);
  outline-color: var(--color-ink-900-rgb);
  outline-color: var(--color-ink-900-oklch);
}

.contact-content form input[type="checkbox"]:checked + .custom-checkbox .custom-checkbox-icon::after {
  content: "";
  position: absolute;
  top: 45%;
  left: 50%;
  width: 0.8rem;
  height: 1.4rem;
  border: solid;
  border-color: var(--color-white-rgb);
  border-color: var(--color-white-oklch);
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -50%) rotate(45deg);
}

.contact-content form input[type="submit"] {
  min-width: 20rem;
}

.contact-content form .invalid input,
.contact-content form .invalid select,
.contact-content form .invalid textarea,
.contact-content form .invalid .custom-checkbox .custom-checkbox-icon {
  background-color: rgba(255, 143, 156, 0.3);
  background-color: oklch(77.34% 0.1354 13.34 / 30%);
  border-color: var(--color-accent-500-rgb);
  border-color: var(--color-accent-500-oklch);
}

.contact-content form .error {
  position: absolute;
  display: block;
  top: calc(100% + 0.8rem);
  right: 0;
  font-size: 1.6rem;
  color: var(--color-accent-500-rgb);
  color: var(--color-accent-500-oklch);
}

.contact-content .contact-card {
  padding: var(--spacing-xxl-2);
  margin-top: var(--spacing-xxl-7);
  background-color: var(--color-light-300-rgb);
  background-color: var(--color-light-300-oklch);
  border-radius: 2.8rem;
}

.contact-content .contact-card .title,
.contact-content .contact-card .text,
.contact-content .contact-card-contact {
  margin-bottom: var(--spacing-xxl-2);
}

.contact-content .contact-card .title {
  display: block;
}

.contact-content .contact-card-social span {
  display: block;
  margin-bottom: var(--spacing-l);
}

@media only screen and (max-width: 1059px) {
  .contact-content {
    padding: var(--spacing-xxl-5) 0;
  }

  .contact-content .layout-item:first-child {
    flex: 0 0 66.666%;
  }

  .contact-content .layout-item:last-child {
    flex: 0 0 66.666%;
    margin-left: 0;
  }

  .contact-content .contact-form .title {
    margin-bottom: var(--spacing-l);
  }

  .contact-content .contact-form .text {
    margin-bottom: var(--spacing-xxl-3);
  }

  .contact-content form input[type="submit"] {
    min-width: 100%;
  }

  .contact-content .contact-card {
    margin-top: var(--spacing-xxl-4);
  }

  .contact-content .contact-card .title, 
  .contact-content .contact-card .text, 
  .contact-content .contact-card-contact {
    margin-bottom: var(--spacing-l);
  }

}

@media only screen and (max-width: 767px) {
  .contact-content .layout-item:first-child {
    flex: 0 0 100%;
  }

  .contact-content .layout-item:last-child {
    flex: 0 0 100%;
  }

  .contact-content .contact-card {
    padding: var(--spacing-xxl-2) var(--spacing-l) var(--spacing-xl);
  }

  .contact-content form .form-group.message,
  .contact-content form .form-group.checkbox {
    margin-bottom: var(--spacing-xl);
  }

  .contact-content form .custom-checkbox-icon {
    width: 2.4rem;
    height: 2.4rem;
  }

}

/* ==========================================================================
   Thank You Page
   ========================================================================== */
.thank-you .title-text-button {
  display: flex;
  align-items: center;
  min-height: 80vh;
}

/* ==========================================================================
   Helper classes
   ========================================================================== */
/*
 * Hide visually and from screen readers
 */

.hidden,
[hidden] {
  display: none !important;
}

.visually-hidden {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.visually-hidden.focusable:active,
.visually-hidden.focusable:focus-visible {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  white-space: inherit;
  width: auto;
}

.invisible {
  visibility: hidden;
}

/* ==========================================================================
   Splide Slider
   ========================================================================== */
@keyframes splide-loading {
    0% { 
      transform: rotate(0); 
    }
    100% { 
      transform: rotate(360deg); 
    }
}

.splide__track--draggable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.splide__track--fade > .splide__list > .splide__slide {
    margin: 0;
    opacity: 0;
    z-index: 0;
}

.splide__track--fade > .splide__list > .splide__slide.is-active {
    opacity: 1;
    z-index: 1;
}

.splide--rtl {
    direction: rtl;
}

.splide__track--ttb > .splide__list {
    display: block;
}

.splide__container {
    box-sizing: border-box;
    position: relative;
}

.splide__list {
    backface-visibility: hidden;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    margin: 0;
    padding: 0;
}

.splide.is-initialized:not(.is-active) .splide__list {
    display: block;
}

.splide__pagination {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0;
    pointer-events: none;
}

.splide__pagination li {
    display: inline-block;
    line-height: 1;
    list-style-type: none;
    margin: 0;
    pointer-events: auto;
}

.splide:not(.is-overflow) .splide__pagination {
    display: none;
}

.splide__progress__bar {
    width: 0;
}

.splide {
    position: relative;
    visibility: hidden;
}

.splide.is-initialized,
.splide.is-rendered {
    visibility: visible;
}

.splide__slide {
    backface-visibility: hidden;
    box-sizing: border-box;
    flex-shrink: 0;
    list-style-type: none;
    margin: 0;
    position: relative;
}

.splide__slide img {
    vertical-align: bottom;
}

.splide__spinner {
    animation: splide-loading 1s linear infinite;
    border: 2px solid #999;
    border-left-color: transparent;
    border-radius: 50%;
    bottom: 0;
    contain: strict;
    display: inline-block;
    height: 20px;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
    width: 20px;
}

.splide__sr {
    clip: rect(0 0 0 0);
    border: 0;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.splide__toggle.is-active .splide__toggle__play,
.splide__toggle__pause {
    display: none;
}

.splide__toggle.is-active .splide__toggle__pause {
    display: inline;
}

.splide__track {
    overflow: hidden;
    position: relative;
    z-index: 0;
    cursor: grab;
}

.splide__track:active {
  cursor: grabbing;
}

.splide__arrows {
  position: absolute;
  top: calc(-1 * var(--spacing-xxl-5));
  right: 5vw;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  gap: var(--spacing-m);
}

.splide__arrow {
  display: flex;
  height: 6rem;
  width: 6rem;
  background-size: 2rem 2rem;
  background-repeat: no-repeat;
  background-position: center;
  outline: 1px solid;
  outline-offset: -1px;
  outline-color: var(--color-light-700-rgb);
  outline-color: var(--color-light-700-oklch);
  border-radius: 100%;
  transition: background-color 0.3s var(--transition-ease-io), outline-color 0.3s var(--transition-ease-io);
  cursor: pointer;
}

.splide__arrow--prev {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='rgb(0 54 61)' d='M12.6 19.6c.3-.3.3-.7 0-1l-5.8-5.8h12.3c.4 0 .7-.3.7-.7s-.3-.7-.7-.7H6.8l5.8-5.8c.3-.3.3-.7 0-1s-.7-.3-1 0l-7 7-.2.2c0 .1-.1.2-.1.3s0 .2.1.3c0 .1.1.2.2.2l7 7c.3.3.7.3 1 0Z'/%3E%3C/svg%3E%0A");
}

.splide__arrow--next {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='rgb(0 54 61)' d='M11.4 19.6c-.3-.3-.3-.7 0-1l5.8-5.8H4.9c-.4 0-.7-.3-.7-.7s.3-.7.7-.7h12.3l-5.8-5.8c-.3-.3-.3-.7 0-1s.7-.3 1 0l7 7 .2.2c0 .1.1.2.1.3s0 .2-.1.3c0 .1-.1.2-.2.2l-7 7c-.3.3-.7.3-1 0Z'/%3E%3C/svg%3E%0A");
}

.splide__arrow:hover {
  background-color: var(--color-light-300-rgb);
  background-color: var(--color-light-300-oklch);
}

.splide__arrow:focus-visible {
  background-color: var(--color-primary-300-rgb);
  background-color: var(--color-primary-300-oklch);
  outline-color: var(--color-ink-700-rgb);
  outline-color: var(--color-ink-700-oklch);
}

@media only screen and (max-width: 1059px) {
  .splide__arrows {
    top: auto;
    bottom: -8rem;
    right: 0;
    left: 50%;
    margin: 0 auto;
    transform: translateX(-50%);
    justify-content: center;
  }
}

@media only screen and (max-width: 767px) {
  .splide__arrow {
    height: 4.8rem;
    width: 4.8rem;
  }
}

/* ==========================================================================
   Media Queries
   ========================================================================== */

@media only screen and (min-width: 35em) {
  /* Style adjustments for viewports that meet the condition */
}

@media print,
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 1.25dppx),
(min-resolution: 120dpi) {}

/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {

  *,
  *::before,
  *::after {
    background: #fff !important;
    color: #000 !important;
    /* Black prints faster */
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a,
  a:visited {
    text-decoration: underline;
  }

  a[href]::after {
    content: " (" attr(href) ")";
  }

  abbr[title]::after {
    content: " (" attr(title) ")";
  }

  /*
   * Don't show links that are fragment identifiers,
   * or use the `javascript:` pseudo protocol
   */
  a[href^="#"]::after,
  a[href^="javascript:"]::after {
    content: "";
  }

  pre {
    white-space: pre-wrap !important;
  }

  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }

  tr,
  img {
    page-break-inside: avoid;
  }

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }
}