/* Geist + Lora are self-hosted via fonts.css in the base templates */
*, *::before, *::after {
  box-sizing: border-box;
}

::before,
::after {
  text-decoration: inherit;
  vertical-align: inherit;
}

:where(html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video) {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

:where(:root) {
  cursor: default;
  line-height: 1.5;
  text-size-adjust: 100%;
  overflow-wrap: break-word;
  tab-size: 4;
  -webkit-tap-highlight-color: transparent;
}

:where(html) {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizespeed;
}

:where(article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section) {
  display: block;
}

:where(body) {
  line-height: 1;
}

:where(ol, ul)[class] {
  list-style: none;
}

:where(img, picture, video, canvas, svg) {
  display: block;
  max-width: 100%;
  height: auto;
}

:where(input, button, textarea, select) {
  font: inherit;
}

:where(blockquote, q) {
  quotes: none;
}
:where(blockquote, q)::before, :where(blockquote, q)::after {
  content: "";
  content: none;
}

:where(table) {
  border-spacing: 0;
  border-collapse: collapse;
}

:where(hr) {
  height: 0;
  color: inherit;
}

:where(pre) {
  overflow: auto;
  font-family: monospace;
  font-size: 1em;
}

:where(svg:not([fill])) {
  fill: currentcolor;
}

:where(button, [type=button i], [type=reset i], [type=submit i]) {
  appearance: auto;
}

:where(textarea) {
  resize: vertical;
  margin: 0;
}

:where([type=search i]) {
  appearance: textfield;
  outline-offset: -2px;
}

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

::input-placeholder {
  color: inherit;
  opacity: 0.54;
}

::-webkit-search-decoration {
  appearance: none;
}

::-webkit-file-upload-button {
  font: inherit;
  appearance: auto;
}

:where(details > summary:first-of-type) {
  display: list-item;
}

:where([aria-busy=true i]) {
  cursor: progress;
}

:where([aria-disabled=true i], [disabled]) {
  cursor: not-allowed;
}

:where([aria-hidden=false i][hidden]) {
  display: initial;
}

:where([aria-hidden=false i][hidden]:not(:focus)) {
  position: absolute;
  clip: rect(0, 0, 0, 0);
}

:where(a:focus),
:where(button:focus),
:where(div[tabindex]:focus),
:where(input:focus),
:where(select:focus),
:where(textarea:focus) {
  opacity: 1 !important;
  outline-width: 2px !important;
  outline-offset: 2px !important;
}

@media (prefers-reduced-motion: no-preference) {
  *:focus {
    transition: outline-offset 0.25s ease;
  }
}
video {
  pointer-events: none !important;
  user-select: none !important;
}

[id] {
  scroll-margin-top: 150px;
}

html {
  background: #ffffff;
}

body {
  background: inherit;
}

.site-wrapper {
  overflow: hidden;
}

.body-overlay {
  pointer-events: none;
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  visibility: hidden;
  opacity: 0;
  background-color: rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(20px);
  transition: 250ms ease-in-out opacity, 250ms ease-in-out visibility;
}
.has-overlay .body-overlay {
  pointer-events: auto;
  visibility: visible;
  opacity: 1;
}
@media (max-width: 1099px) {
  .nav-open .body-overlay {
    pointer-events: auto;
    visibility: visible;
    opacity: 1;
  }
}

html {
  font-family: "Geist", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.55;
  color: #113c2a;
}

body {
  font-family: inherit;
  font-size: clamp(1rem, 0.9167rem + 0.2315vw, 1.125rem);
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  margin-top: 1em;
  margin-bottom: 1.25rem;
  font-family: "Lora", serif;
  font-weight: 500;
  line-height: 1.55;
  color: inherit;
}
h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child {
  margin-top: 0;
}
h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p {
  margin-top: 20px;
}

h1,
.has-font-size-heading-1 {
  font-size: clamp(2.625rem, 1.5417rem + 3.0093vw, 4.25rem);
  line-height: 1;
}
@media (max-width: 575px) {
  h1,
  .has-font-size-heading-1 {
    line-height: 1.1;
  }
}

h2,
.has-font-size-heading-2 {
  font-size: clamp(2rem, 1.3333rem + 1.8519vw, 3rem);
  line-height: 1.2;
}

h3,
.has-font-size-large {
  font-size: clamp(1.5rem, 1.1667rem + 0.9259vw, 2rem);
  line-height: 1.3;
}
@media (max-width: 575px) {
  h3,
  .has-font-size-large {
    line-height: 1.55;
  }
}

h4,
.has-font-size-medium {
  font-size: clamp(1.25rem, 1.0833rem + 0.463vw, 1.5rem);
}

h5,
.has-font-size-text {
  font-size: clamp(1rem, 0.9167rem + 0.2315vw, 1.125rem);
}

h6,
.has-font-size-button {
  font-size: 1rem;
  text-transform: uppercase;
}

.has-font-size-small {
  font-size: 0.875rem;
}

.has-font-size-tiny {
  font-size: 0.75rem;
}

.has-font-size-slogan-1 {
  font-size: clamp(4.5rem, 1.25rem + 9.0278vw, 9.375rem);
  line-height: 1;
}
@media (max-width: 575px) {
  .has-font-size-slogan-1 {
    line-height: 1.05;
  }
}

.has-font-size-slogan-2 {
  font-size: clamp(2.5rem, 1.8333rem + 1.8519vw, 3.5rem);
  line-height: 1;
}
@media (max-width: 575px) {
  .has-font-size-slogan-2 {
    line-height: 1.1;
  }
}

.has-font-family-primary {
  font-family: "Geist", sans-serif;
  font-weight: 400;
}

.has-font-family-secondary {
  font-family: "Lora", serif;
  font-weight: 500;
}

p:first-child, p:only-child {
  margin-top: 0;
}
p + p {
  margin-top: 1.55em;
}
p a {
  text-decoration: underline;
}

a {
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  text-decoration: none;
  text-underline-offset: 3px;
  transition: 150ms ease-in-out color;
}
a:hover, a:active {
  color: inherit;
  text-decoration: underline;
}

b,
strong {
  font-weight: 600;
}

i,
em {
  font-weight: inherit;
  font-style: italic;
}

ul:not([class]), ul.wp-block-list,
ol:not([class]),
ol.wp-block-list {
  padding-left: 28px;
}
ul:not([class]) ul,
ul:not([class]) ol, ul.wp-block-list ul,
ul.wp-block-list ol,
ol:not([class]) ul,
ol:not([class]) ol,
ol.wp-block-list ul,
ol.wp-block-list ol {
  margin-block: 0;
}
ul:is(.wp-block-list),
ol:is(.wp-block-list) {
  margin: 0;
}
ul + p,
ol + p {
  margin-top: 10px !important;
}

ul:not([class]), ul.wp-block-list {
  list-style: disc;
}

ol:not([class]), ol.wp-block-list {
  list-style: decimal;
}

sup,
sub {
  font-size: 0.75rem;
  line-height: 0;
}

sup {
  vertical-align: super;
}

sub {
  vertical-align: sub;
}

.skip-link {
  position: absolute;
  overflow: hidden;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  white-space: nowrap;
  transition: none;
  clip: rect(0, 0, 0, 0);
}
.skip-link:focus {
  z-index: 100000;
  top: 8px;
  left: 8px;
  display: block;
  width: auto;
  height: auto;
  padding: 16px 24px;
  font-size: 1rem;
  font-weight: 700;
  line-height: normal;
  color: #000000;
  text-decoration: none;
  background-color: #fefefe;
  clip-path: none;
  box-shadow: 0 0 2px 2px rgb(0, 0, 0);
  clip: auto !important;
}

.sr-only {
  position: absolute;
  overflow: hidden;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  white-space: nowrap;
  clip: rect(0, 0, 0, 0);
}

.content-wrapper {
  position: relative;
  z-index: 2;
  background: #ffffff;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 7%, rgb(255, 255, 255) 100%);
}
@media (max-width: 959px) {
  .content-wrapper {
    padding-top: 40px;
    border-radius: 16px;
    background: #ffffff;
  }
}
@media (max-width: 575px) {
  .content-wrapper {
    padding-top: 20px;
  }
}
.content-wrapper .content-white {
  padding-block: clamp(3.125rem, 1.0417rem + 5.787vw, 6.25rem);
  border-radius: 16px;
}

.nav-toggle {
  cursor: pointer;
  position: relative;
  z-index: 100;
  display: grid;
  place-content: center;
  order: 2;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: transparent;
}
@media (min-width: 1100px) {
  .nav-toggle {
    display: none;
  }
}
.nav-toggle > span {
  position: relative;
  display: block;
  width: 24px;
  height: 1px;
  border-radius: 0;
  background: #113c2a;
  transition: 250ms ease-in-out all;
}
.nav-toggle > span::before, .nav-toggle > span::after {
  content: "";
  position: absolute;
  display: block;
  width: 24px;
  height: 1px;
  border-radius: 0;
  background: #113c2a;
  transition: 250ms ease-in-out all;
}
.nav-toggle > span::before {
  top: -6px;
  opacity: 1;
}
.nav-toggle > span::after {
  top: 6px;
  opacity: 1;
}
.nav-toggle.is-active > span {
  transform: rotate(45deg);
  background: #113c2a;
}
.nav-toggle.is-active > span::before, .nav-toggle.is-active > span::after {
  top: 0;
  transform: rotate(90deg);
  background: #113c2a;
}
.nav-toggle.is-active > span::before {
  opacity: 0;
  background: transparent;
}

.nav--primary .nav-list {
  display: flex;
  gap: clamp(1.25rem, 0.4167rem + 2.3148vw, 2.5rem);
  align-items: center;
  justify-content: center;
}
@media (max-width: 1099px) {
  .nav--primary .nav-list {
    position: absolute;
    top: 100%;
    left: -101vw;
    flex-direction: column;
    width: 100vw;
    padding-block: 40px 20px;
    border-top: 1px solid #cfd8d4;
    background: #ffffff;
    transition: 250ms ease-in-out all;
  }
}
@media (max-width: 1099px) {
  .nav--primary .nav-list.is-active {
    left: 0;
  }
}
.nav--primary .nav-list .nav-item--mobile {
  display: none;
}
@media (max-width: 1099px) {
  .nav--primary .nav-list .nav-item--mobile {
    display: block;
    margin-top: 20px;
  }
}
.nav--primary .nav-list .nav-link {
  font-size: 1rem;
  line-height: 1.5;
}
@media (max-width: 1099px) {
  .nav--primary .nav-list .nav-link {
    font-family: "Lora", serif;
    font-size: 32px;
    font-weight: 500;
  }
}
.nav--primary .nav-list .nav-link.is-active {
  text-decoration: underline;
}
@media (max-width: 1099px) {
  .nav--primary .nav-list .nav-link--mobile {
    font-family: "Geist", sans-serif;
    font-size: 16px;
    font-weight: 400;
  }
}
.nav--footer .nav-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
@media (max-width: 767px) {
  .nav--footer .nav-list {
    align-items: center;
  }
}
.nav--footer .nav-link {
  font-size: 1rem;
  line-height: 1.5;
}

.button {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border: 1px solid #113c2a;
  border-radius: 8px;
  font-size: 1rem;
  line-height: 1.5;
  color: #ffffff;
  text-align: center;
  background: #113c2a;
  transition: 150ms ease-in-out all;
}
.button:hover, .button:focus, .button:active {
  border-color: #217c4d;
  color: #ffffff;
  text-decoration: none;
  background: #217c4d;
}
.button--outline {
  border-color: #918c89;
  color: #113c2a;
  background: transparent;
}
.button--outline:hover, .button--outline:focus, .button--outline:active {
  border-color: #217c4d;
  color: #ffffff;
  background: #217c4d;
}

.site-header {
  position: fixed;
  z-index: 101;
  width: 100vw;
  padding-block: 24px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  transition: 250ms ease-in-out all;
}
@media (max-width: 1099px) {
  .site-header {
    padding-block: 20px;
  }
}
.site-header.is-fixed {
  padding-block: 12px;
  background: white;
}
@media (max-width: 1099px) {
  .site-header.is-fixed {
    padding-block: 10px;
  }
}
.nav-open .site-header {
  background: white;
}
.site-header__inner {
  display: flex;
  gap: 24px;
  align-items: center;
  width: min(1440px, 100%);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 0.4167rem + 2.3148vw, 2.5rem);
}
.site-header__nav {
  flex-grow: 1;
}
@media (max-width: 1099px) {
  .site-header__nav {
    flex-grow: unset;
    margin-left: auto;
  }
}
.site-header__button {
  display: flex;
  align-items: center;
  gap: 16px;
}

.site-header__login-link {
  font-weight: 500;
  text-decoration: none;
  color: inherit;
  padding: 6px 4px;
  transition: color 0.15s ease;
}

.site-header__login-link:hover,
.site-header__login-link:focus {
  text-decoration: underline;
}

@media (max-width: 1099px) {
  .site-header__button {
    display: none;
  }
}

.site-footer {
  width: min(1440px, 100%);
  margin-bottom: 40px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 0.4167rem + 2.3148vw, 2.5rem);
}
.site-footer__label {
  margin-bottom: 24px;
  font-size: clamp(1.25rem, 1.0833rem + 0.463vw, 1.5rem);
  line-height: 1.3;
}
@media (max-width: 767px) {
  .site-footer__label {
    text-align: center;
  }
}
.site-footer__inner {
  padding-block: clamp(2.5rem, 0.8333rem + 4.6296vw, 5rem) 40px;
  padding-inline: clamp(2.5rem, 0.8333rem + 4.6296vw, 5rem);
  border-radius: 16px;
  color: #ffffff;
  background: #113c2a;
}
@media (max-width: 767px) {
  .site-footer__inner {
    padding-inline: clamp(1.25rem, 0.4167rem + 2.3148vw, 2.5rem);
  }
}
.site-footer__content {
  display: flex;
  gap: 40px;
  justify-content: space-between;
  margin-bottom: clamp(3.125rem, 1.0417rem + 5.787vw, 6.25rem);
}
@media (max-width: 959px) {
  .site-footer__content {
    flex-direction: column;
    margin-bottom: clamp(2.5rem, 0.8333rem + 4.6296vw, 5rem);
  }
}
.site-footer__slogan {
  max-width: 520px;
  margin: 0;
}
@media (max-width: 767px) {
  .site-footer__slogan {
    text-align: center;
  }
}
.site-footer__branding {
  display: flex;
  align-items: center;
  justify-content: center;
}
.site-footer__copy {
  display: flex;
  gap: clamp(1.25rem, 0.4167rem + 2.3148vw, 2.5rem);
  align-items: center;
  margin-top: clamp(2.5rem, 0.8333rem + 4.6296vw, 5rem);
}
@media (max-width: 767px) {
  .site-footer__copy {
    flex-direction: column;
    gap: 8px;
  }
}
.site-footer__copy p {
  margin: 0;
  font-size: 0.75rem;
  /* WCAG AA 1.4.3: #868686 on #113c2a was ~3.4:1; #c8c8c8 lifts to ~7.5:1. */
  color: #c8c8c8;
  text-align: center;
}
@media (max-width: 575px) {
  .site-footer__copy p {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
}
.site-footer__copy p.author {
  margin-left: auto;
}
@media (max-width: 767px) {
  .site-footer__copy p.author {
    margin-left: unset;
  }
}
@media (max-width: 575px) {
  .site-footer__copy p.author {
    flex-direction: row;
  }
}
.site-footer__copy p a {
  text-decoration: none;
}
.site-footer__copy p a:hover, .site-footer__copy p a:focus, .site-footer__copy p a:active {
  color: #ffffff;
  text-decoration: underline;
}

.hero {
  width: min(1440px, 100%);
  margin-inline: auto;
}
.hero__inner {
  display: flex;
  gap: 24px;
  justify-content: space-between;
}
@media (max-width: 959px) {
  .hero__inner {
    flex-direction: column;
  }
}
.hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 640px;
  padding-left: clamp(1.25rem, 0.4167rem + 2.3148vw, 2.5rem);
  padding-block: calc(clamp(3.125rem, 1.0417rem + 5.787vw, 6.25rem) + 86px) clamp(3.125rem, -3.125rem + 17.3611vw, 12.5rem);
}
@media (max-width: 959px) {
  .hero__content {
    max-width: unset;
    padding-bottom: 0;
  }
}
.hero__heading {
  font-size: clamp(2.5rem, 1.8333rem + 1.8519vw, 3.5rem);
  line-height: 1;
}
@media (max-width: 575px) {
  .hero__heading {
    line-height: 1.2;
  }
}
.hero__heading .words {
  display: inline-grid;
  font-style: italic;
}
.hero__heading .words span {
  grid-area: 1/-1;
}
.hero__buttons {
  display: flex;
  gap: 20px;
  margin-top: 20px;
}
@media (max-width: 575px) {
  .hero__buttons {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }
}
.hero__image {
  position: relative;
  align-self: stretch;
  width: 100%;
  max-width: 740px;
  min-height: 0;
  margin-right: -20px;
}
@media (max-width: 959px) {
  .hero__image {
    width: 104%;
    max-width: unset;
    margin-top: -80px;
    margin-bottom: -50%;
    margin-left: -2%;
  }
}
@media (max-width: 575px) {
  .hero__image {
    margin-top: -65px;
  }
}
@media (max-width: 349px) {
  .hero__image {
    margin-top: -20px;
  }
}
.hero__image img,
.hero__image video {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(-14%);
  width: 100%;
  height: auto;
}
@media (max-width: 959px) {
  .hero__image img,
  .hero__image video {
    position: unset;
    transform: unset;
  }
}

.section-problem {
  position: relative;
  z-index: 1;
  width: min(1440px, 100%);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 0.4167rem + 2.3148vw, 2.5rem);
  color: #ffffff;
}
.section-problem__inner {
  display: flex;
  gap: clamp(2.5rem, 1.6667rem + 2.3148vw, 3.75rem);
  padding-block: clamp(2.5rem, -0.8333rem + 9.2593vw, 7.5rem);
  padding-inline: clamp(1.25rem, -4.1667rem + 15.0463vw, 9.375rem);
  border-radius: 16px;
  background: #113c2a;
  background-image: url("../images/homepage/svg/background-01.c6bc0cc59695.svg");
  background-repeat: no-repeat;
  background-position: bottom right;
  background-size: contain;
}
@media (max-width: 959px) {
  .section-problem__inner {
    flex-direction: column;
  }
}
.section-problem__column {
  flex: 0 1 100%;
}

.claren {
  width: min(1440px, 100%);
  margin-block: 0 clamp(3.125rem, 1.0417rem + 5.787vw, 6.25rem);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 0.4167rem + 2.3148vw, 2.5rem);
}
.claren__inner {
  display: flex;
  flex-direction: column;
  gap: clamp(2.5rem, 0.8333rem + 4.6296vw, 5rem);
}
.claren__heading {
  width: min(840px, 100%);
  margin-inline: auto;
  text-align: center;
}
.claren__boxes {
  display: flex;
  gap: 5px;
}
@media (max-width: 959px) {
  .claren__boxes {
    flex-wrap: wrap;
    row-gap: 40px;
  }
}
.claren__box {
  position: relative;
}
@media (max-width: 959px) {
  .claren__box {
    width: calc(33.3333333333% - 10px);
  }
}
@media (max-width: 379px) {
  .claren__box {
    width: calc(50% - 5px);
  }
}
.claren__box a {
  position: absolute;
  top: 52%;
  left: 50%;
  transform: translate(-50%, -50%);
  line-height: 1;
  color: #ffffff;
  text-align: center;
}
@media (max-width: 575px) {
  .claren__box a {
    font-size: 1rem;
  }
}
.claren__box a span {
  display: inline-flex;
  margin-top: 20px;
  margin-inline: auto;
  transition: 150ms ease all;
}
@media (max-width: 575px) {
  .claren__box a span {
    margin-top: 8px;
  }
}
.claren__box a:hover, .claren__box a:focus, .claren__box a:active {
  text-decoration: none;
}
.claren__box a:hover span, .claren__box a:focus span, .claren__box a:active span {
  transform: translateX(5px);
}

.images-slogan {
  position: relative;
  width: min(1920px, 100%);
  margin-block: clamp(3.125rem, 1.0417rem + 5.787vw, 6.25rem);
  margin-inline: auto;
}
@media (min-width: 1441px) {
  .images-slogan {
    margin-block: clamp(6.25rem, 2.0833rem + 11.5741vw, 12.5rem);
  }
}
.images-slogan__inner {
  width: min(1440px, 100%);
  margin-inline: auto;
  padding-block: clamp(6.25rem, 2.0833rem + 11.5741vw, 12.5rem);
  padding-inline: clamp(1.25rem, 0.4167rem + 2.3148vw, 2.5rem);
}
.images-slogan__slogan {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin-inline: auto;
  font-size: clamp(4.5rem, 1.25rem + 9.0278vw, 9.375rem);
  line-height: 1;
  text-align: center;
}
@media (max-width: 575px) {
  .images-slogan__slogan {
    font-size: 54px;
    line-height: 1.2;
  }
}
.images-slogan__image {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}
@media (max-width: 575px) {
  .images-slogan__image {
    width: 120%;
  }
}

.expanding-blocks {
  margin-block: clamp(3.125rem, 1.0417rem + 5.787vw, 6.25rem);
}
.expanding-blocks__inner {
  display: flex;
  gap: 20px;
  width: min(1440px, 100%);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 0.4167rem + 2.3148vw, 2.5rem);
}
@media (max-width: 959px) {
  .expanding-blocks__inner {
    flex-direction: column;
  }
}
.expanding-blocks__block {
  position: relative;
  overflow: hidden;
  display: flex;
  flex: 1 1 25%;
  flex-direction: column;
  border-radius: 16px;
  transition: 400ms ease-in-out flex-basis;
}
@media (max-width: 959px) {
  .expanding-blocks__block {
    flex: 1 1 auto;
    min-height: 50vh;
  }
}
.expanding-blocks__block-image {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.expanding-blocks__block-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 400ms ease transform;
}
.expanding-blocks__block-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  height: 100%;
  min-height: 580px;
  padding: clamp(1.25rem, 0.4167rem + 2.3148vw, 2.5rem);
  color: #ffffff;
  background: linear-gradient(57.66deg, rgba(0, 0, 0, 0.4) 20.61%, rgba(0, 0, 0, 0) 69.87%);
}
@media (max-width: 959px) {
  .expanding-blocks__block-content {
    flex: 1 1 100%;
    height: 100%;
    min-height: unset;
  }
}
.expanding-blocks__block-heading {
  margin: 0;
}
.expanding-blocks__block-description {
  overflow: hidden;
  max-height: 1px;
  margin-top: 0;
  opacity: 0;
  transition: 250ms ease all;
  transition-delay: 1ms;
}
@media (max-width: 959px) {
  .expanding-blocks__block-description {
    max-width: 330px;
    max-height: unset;
    margin-top: 20px;
    opacity: 1;
    transition-delay: 1ms;
  }
}
@media (min-width: 960px) {
  .expanding-blocks__block.is-active {
    flex: 1 1 calc(50% + 20px);
  }
}
@media (min-width: 960px) {
  .expanding-blocks__block.is-active .expanding-blocks__block-description {
    max-height: 500px;
    margin-top: 20px;
    opacity: 1;
    transition-delay: 400ms;
  }
}

.vertical-boxes {
  width: min(1440px, 100%);
  margin-block: clamp(3.125rem, 1.0417rem + 5.787vw, 6.25rem);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 0.4167rem + 2.3148vw, 2.5rem);
}
.vertical-boxes__inner {
  display: flex;
  gap: 40px;
}
@media (max-width: 959px) {
  .vertical-boxes__inner {
    flex-direction: column;
    gap: 20px;
  }
}
.vertical-boxes__header {
  display: flex;
  flex-direction: column;
  gap: clamp(2.5rem, 0.8333rem + 4.6296vw, 5rem);
  width: 100%;
}
@media (max-width: 959px) {
  .vertical-boxes__header {
    gap: 0;
  }
}
.vertical-boxes__image {
  max-width: 500px;
  margin-inline: auto;
}
.vertical-boxes__content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  max-width: 554px;
}
@media (max-width: 959px) {
  .vertical-boxes__content {
    max-width: unset;
  }
}
.vertical-boxes__box {
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 0.4167rem + 2.3148vw, 2.5rem);
  padding: clamp(1.25rem, 0.4167rem + 2.3148vw, 2.5rem);
  border: 1px solid #a4cab8;
  border-radius: 16px;
  background: #ffffff;
}
.vertical-boxes__box-heading {
  max-width: 240px;
  margin: 0;
}
.vertical-boxes__box-text {
  margin: 0;
}

.text-image {
  width: min(1440px, 100%);
  margin-block: clamp(3.125rem, 1.0417rem + 5.787vw, 6.25rem);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 0.4167rem + 2.3148vw, 2.5rem);
}
.text-image__header {
  margin-bottom: clamp(2.5rem, 1.6667rem + 2.3148vw, 3.75rem);
  text-align: center;
}
.text-image__inner {
  display: flex;
  gap: 20px;
}
@media (max-width: 959px) {
  .text-image__inner {
    flex-direction: column;
  }
}
.text-image__content {
  display: flex;
  flex: 1 1 50%;
  flex-direction: column;
  justify-content: space-between;
  padding: 40px;
  border-radius: 16px;
  color: #ffffff;
  background: #1a3062;
}
@media (max-width: 959px) {
  .text-image__content {
    min-height: 240px;
  }
}
.text-image__title {
  font-size: 24px;
  line-height: 1.35;
}
.text-image__image {
  flex: 1 1 50%;
  border-radius: 16px;
}
@media (max-width: 959px) {
  .text-image__image {
    min-height: 240px;
  }
}
.text-image__image img {
  width: 100%;
  height: 100%;
  border-radius: 16px;
  object-fit: cover;
}

.image-block {
  width: min(1440px, 100%);
  margin-block: clamp(3.125rem, 1.0417rem + 5.787vw, 6.25rem);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 0.4167rem + 2.3148vw, 2.5rem);
}
.image-block__inner {
  display: flex;
  flex-direction: column;
  gap: clamp(3.125rem, 1.0417rem + 5.787vw, 6.25rem);
}
.image-block__header {
  display: flex;
  gap: clamp(1.25rem, 0.4167rem + 2.3148vw, 2.5rem);
}
@media (max-width: 959px) {
  .image-block__header {
    flex-direction: column;
  }
}
.image-block__heading {
  flex: 1 1 50%;
}
@media (max-width: 767px) {
  .image-block__heading {
    flex: 1 1 100%;
  }
}
.image-block__text-wrapper {
  flex: 1 1 50%;
  max-width: 550px;
}
@media (max-width: 767px) {
  .image-block__text-wrapper {
    flex: 1 1 100%;
    max-width: unset;
  }
}
.image-block__image {
  display: grid;
  place-content: center;
}
.image-block__image svg {
  grid-area: 1/-1;
}
@media (max-width: 767px) {
  .image-block__image svg {
    width: 50vw;
  }
}
.image-block__image svg:first-child {
  z-index: 1;
}

.testimonials {
  width: min(1440px, 100%);
  margin-block: 0 clamp(3.125rem, 1.0417rem + 5.787vw, 6.25rem);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 0.4167rem + 2.3148vw, 2.5rem);
}
.testimonials__header {
  margin-bottom: clamp(2.5rem, 1.6667rem + 2.3148vw, 3.75rem);
  text-align: center;
}
.testimonials__heading {
  margin: 0;
}
.testimonials__text {
  margin: 0;
  margin-top: 20px;
}
.testimonials__inner {
  padding-inline: clamp(2.5rem, 1.6667rem + 2.3148vw, 3.75rem);
  border-radius: 16px;
  color: #ffffff;
  background: #1a3062;
}
@media (max-width: 959px) {
  .testimonials__inner {
    padding-block: 0;
    padding-inline: 0;
  }
}

.testimonial {
  overflow: hidden;
  display: flex;
  gap: clamp(1.25rem, 0.4167rem + 2.3148vw, 2.5rem);
  align-items: center;
}
@media (max-width: 959px) {
  .testimonial {
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }
}
.testimonial__image {
  position: relative;
  align-self: stretch;
  width: 100%;
  max-width: 482px;
}
@media (max-width: 959px) {
  .testimonial__image {
    max-width: 300px;
    margin-top: -100px;
    margin-inline: auto;
  }
}
.testimonial__image img {
  pointer-events: none;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 100%;
  height: auto;
  mask-image: url("data:image/svg+xml,%3Csvg width='483' height='744' viewBox='0 0 483 744' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M482.189 40.0482C482.189 10.7388 451.709 -8.61829 425.181 3.8444L22.9913 192.793C8.95891 199.385 -0.000169039 213.492 -0.000169039 228.996V703.702C-0.000169039 733.011 30.4806 752.368 57.0083 739.905L459.198 550.957C473.23 544.365 482.189 530.257 482.189 514.753V40.0482Z' fill='white'/%3E%3C/svg%3E%0A");
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
}
@media (max-width: 959px) {
  .testimonial__image img {
    position: static;
    top: 0;
    left: 0;
    transform: unset;
  }
}
.testimonial__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  min-height: 540px;
  padding-block: clamp(2.5rem, 0.8333rem + 4.6296vw, 5rem);
  padding-inline: clamp(2.5rem, 1.6667rem + 2.3148vw, 3.75rem);
}
@media (max-width: 959px) {
  .testimonial__content {
    justify-content: flex-end;
    min-height: unset;
    padding-block: 0 clamp(2.5rem, 1.6667rem + 2.3148vw, 3.75rem);
    padding-inline: clamp(1.25rem, 0.4167rem + 2.3148vw, 2.5rem);
  }
}
.testimonial blockquote p {
  font-family: "Lora", serif;
  font-size: clamp(2rem, 1.3333rem + 1.8519vw, 3rem);
  line-height: 1.25;
}
.testimonial blockquote cite {
  display: inline-flex;
  margin: 0;
  margin-top: 20px;
  font-size: 16px;
  line-height: 1.5;
}

/* ===================================================================
 * CONTACT MODAL
 * =================================================================== */

.contact-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  opacity: 0;
  transition: opacity 250ms ease-in-out, visibility 250ms ease-in-out;
}

.contact-modal.is-open {
  visibility: visible;
  opacity: 1;
}

.contact-modal .modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.contact-modal .modal-dialog {
  position: relative;
  z-index: 1;
  width: 90%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  background: #ffffff;
  border-radius: 16px;
  padding: clamp(2rem, 1rem + 2.5vw, 3rem);
  transform: translateY(20px);
  transition: transform 250ms ease-in-out;
}

.contact-modal.is-open .modal-dialog {
  transform: translateY(0);
}

.contact-modal .modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid #a4cab8;
  border-radius: 8px;
  cursor: pointer;
  color: #113c2a;
  transition: background-color 150ms ease-in-out, border-color 150ms ease-in-out;
}

.contact-modal .modal-close:hover,
.contact-modal .modal-close:focus {
  background: #a4cab8;
  border-color: #217c4d;
}

.contact-modal .modal-title {
  font-size: clamp(1.5rem, 1.1667rem + 0.9259vw, 2rem);
  margin: 0 0 24px 0;
  color: #113c2a;
}

.contact-modal .modal-alert {
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: 0.875rem;
}

.contact-modal .modal-alert--success {
  background: #e8f5e9;
  color: #113c2a;
}

.contact-modal .modal-alert--error {
  background: #fce4ec;
  color: #c26b5b;
}

.contact-form .form-field {
  margin-bottom: 20px;
}

.contact-form .form-label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  color: #113c2a;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #a4cab8;
  border-radius: 8px;
  font-family: "Geist", sans-serif;
  font-size: 1rem;
  color: #113c2a;
  background: #ffffff;
  transition: border-color 150ms ease-in-out, box-shadow 150ms ease-in-out;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: #217c4d;
  box-shadow: 0 0 0 3px rgba(33, 124, 77, 0.15);
}

.contact-form textarea {
  resize: vertical;
  min-height: 120px;
}

.contact-form .form-error {
  margin-top: 6px;
  font-size: 0.75rem;
  color: #c26b5b;
}

.contact-form__submit {
  width: 100%;
  margin-top: 8px;
}

/* ===================================================================
 * AUTH PAGES (login, signup, password reset, etc.)
 * =================================================================== */

/* On auth pages the header has no mobile nav, so always show the button */
.auth-main ~ .site-footer,
.auth-main {
  /* marker for specificity context */
}

body:has(.auth-main) .site-header__button {
  display: block;
}

.auth-main {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: clamp(6rem, 4rem + 4vw, 8rem) clamp(1rem, 0.5rem + 1.5vw, 2rem) clamp(2.5rem, 1rem + 4vw, 5rem);
  min-height: calc(100vh - 200px);
}

/* Auth card */

.auth-card {
  width: 100%;
  max-width: 460px;
  background: #ffffff;
  border-radius: 16px;
  padding: clamp(2rem, 1.25rem + 2vw, 3rem);
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.04),
    0 6px 24px rgba(0, 0, 0, 0.06);
}

.auth-card__title {
  font-family: "Lora", serif;
  font-weight: 500;
  font-size: clamp(1.5rem, 1.1667rem + 0.9259vw, 2rem);
  color: #113c2a;
  text-align: center;
  margin: 0 0 32px 0;
}

/* Auth form fields */

.auth-form .form-field {
  margin-bottom: 20px;
}

.auth-form .form-label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  color: #113c2a;
}

.auth-form input[type="email"],
.auth-form input[type="password"],
.auth-form input[type="text"] {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #a4cab8;
  border-radius: 8px;
  font-family: "Geist", sans-serif;
  font-size: 1rem;
  color: #113c2a;
  background: #ffffff;
  transition: border-color 150ms ease-in-out, box-shadow 150ms ease-in-out;
}

.auth-form input[type="email"]:focus,
.auth-form input[type="password"]:focus,
.auth-form input[type="text"]:focus {
  outline: none;
  border-color: #217c4d;
  box-shadow: 0 0 0 3px rgba(33, 124, 77, 0.15);
}

.auth-form input[type="email"]::placeholder,
.auth-form input[type="password"]::placeholder,
.auth-form input[type="text"]::placeholder {
  color: #918c89;
}

/* Three-part date-of-birth input (MM / DD / YYYY) lives in
   simplechat-tokens.css alongside the partial markup. Loaded by both
   chat_base.html and auth_base.html. */

/* Auth form error messages */

.auth-form .form-error {
  margin-top: 6px;
  font-size: 0.75rem;
  color: #c26b5b;
}

.auth-form .errorlist {
  list-style: none;
  padding: 0;
  margin: 6px 0 0 0;
  font-size: 0.75rem;
  color: #c26b5b;
}

/* Checkbox (Remember Me) */

.auth-form .form-check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
}

.auth-form .form-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #113c2a;
  cursor: pointer;
}

.auth-form .form-check label {
  font-size: 0.875rem;
  color: #113c2a;
  cursor: pointer;
}

/* Primary auth button */

.auth-form .button {
  width: 100%;
  display: block;
  text-align: center;
  margin-bottom: 16px;
}

/* Onboarding prev/next navigation */

.onboarding-nav {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 20px;
}

.onboarding-nav .button {
  width: auto;
  display: inline-flex;
  margin-bottom: 0;
}

/* Links */

.auth-card__link {
  display: block;
  text-align: center;
  font-size: 0.875rem;
  color: #113c2a;
  text-decoration: none;
  transition: color 150ms ease-in-out;
}

.auth-card__link:hover,
.auth-card__link:focus {
  text-decoration: underline;
  text-underline-offset: 3px;
  color: #217c4d;
}

/* Divider */

.auth-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 24px 0;
  /* WCAG 1.4.3: was #918c89 (~3.1:1 on white). #6c6c6c lifts to ~5.7:1. */
  color: #6c6c6c;
  font-size: 0.875rem;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #a4cab8;
}

/* Social / alternative login buttons */

.auth-social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 12px 24px;
  border: 1px solid #918c89;
  border-radius: 8px;
  background: transparent;
  color: #113c2a;
  font-family: "Geist", sans-serif;
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 150ms ease-in-out, border-color 150ms ease-in-out, color 150ms ease-in-out;
}

.auth-social-btn + .auth-social-btn {
  margin-top: 12px;
}

.auth-social-btn:hover,
.auth-social-btn:focus {
  background: #217c4d;
  border-color: #217c4d;
  color: #ffffff;
}

.auth-social-btn svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* Footer text */

.auth-card__footer {
  text-align: center;
  margin-top: 24px;
  font-size: 0.875rem;
  color: #918c89;
}

.auth-card__footer a {
  color: #113c2a;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 150ms ease-in-out;
}

.auth-card__footer a:hover,
.auth-card__footer a:focus {
  color: #217c4d;
}

/* Alert messages */

.auth-alert {
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 20px;
  font-size: 0.875rem;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.auth-alert--success {
  background: #e8f5e9;
  color: #113c2a;
}

.auth-alert--error,
.auth-alert--danger {
  background: #fce4ec;
  color: #c26b5b;
}

.auth-alert--info,
.auth-alert--warning {
  background: #fff8e1;
  color: #856404;
}

.auth-alert__close {
  margin-left: auto;
  background: none;
  border: none;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  color: inherit;
  opacity: 0.6;
  transition: opacity 150ms ease-in-out;
}

.auth-alert__close:hover {
  opacity: 1;
}

/* ─── Extended Auth Page Styles ─────────────────────────────────────── */

/* Wide auth card variant (profile, email management, MFA) */

.auth-card--wide {
  max-width: 640px;
}

/* Auth card subtitle / description text */

.auth-card__subtitle {
  /* WCAG 1.4.3: was #918c89 (~3.1:1 on white). #6c6c6c lifts to ~5.7:1. */
  color: #6c6c6c;
  font-size: 0.9375rem;
  line-height: 1.6;
  margin-bottom: 24px;
}

/* Additional form input types */

.auth-form input[type="date"],
.auth-form input[type="tel"],
.auth-form input[type="url"],
.auth-form input[type="number"],
.auth-form select,
.auth-form textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #a4cab8;
  border-radius: 8px;
  font-family: "Geist", sans-serif;
  font-size: 1rem;
  color: #113c2a;
  background: #ffffff;
  transition: border-color 150ms ease-in-out, box-shadow 150ms ease-in-out;
}

.auth-form input[type="date"]:focus,
.auth-form input[type="tel"]:focus,
.auth-form input[type="url"]:focus,
.auth-form input[type="number"]:focus,
.auth-form select:focus,
.auth-form textarea:focus {
  outline: none;
  border-color: #217c4d;
  box-shadow: 0 0 0 3px rgba(33, 124, 77, 0.15);
}

.auth-form textarea {
  resize: vertical;
  min-height: 80px;
}

/* Form help text */

.form-help {
  margin-top: 6px;
  font-size: 0.8125rem;
  /* WCAG 1.4.3: was #918c89 (~3.1:1 on white). #6c6c6c lifts to ~5.7:1. */
  color: #6c6c6c;
  line-height: 1.4;
}

/* Radio and checkbox groups */

.auth-form .form-radio,
.auth-form .form-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  border: 1px solid #a4cab8;
  border-radius: 8px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: border-color 150ms ease-in-out, background 150ms ease-in-out;
}

.auth-form .form-radio:hover,
.auth-form .form-checkbox:hover {
  border-color: #217c4d;
  background: rgba(33, 124, 77, 0.04);
}

.auth-form .form-radio.is-selected,
.auth-form .form-checkbox.is-selected {
  border-color: #217c4d;
  background: rgba(33, 124, 77, 0.06);
}

.auth-form .form-radio input[type="radio"],
.auth-form .form-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: #113c2a;
  cursor: pointer;
  flex-shrink: 0;
}

.auth-form .form-radio__label,
.auth-form .form-checkbox__label {
  flex: 1;
}

.auth-form .form-radio__title,
.auth-form .form-checkbox__title {
  font-weight: 600;
  color: #113c2a;
  font-size: 0.9375rem;
}

.auth-form .form-radio__desc,
.auth-form .form-checkbox__desc {
  font-size: 0.8125rem;
  /* WCAG 1.4.3: was #918c89 (~3.1:1 on white). #6c6c6c lifts to ~5.7:1. */
  color: #6c6c6c;
  margin-top: 2px;
}

/* Button variants */

.button--danger {
  background: #c26b5b;
  color: #ffffff;
  border-color: #c26b5b;
}

.button--danger:hover,
.button--danger:focus {
  background: #a85a4c;
  border-color: #a85a4c;
  color: #ffffff;
}

.button--secondary {
  background: transparent;
  color: #113c2a;
  border: 1px solid #918c89;
}

.button--secondary:hover,
.button--secondary:focus {
  background: #113c2a;
  border-color: #113c2a;
  color: #ffffff;
}

.button--outline {
  background: transparent;
  color: #113c2a;
  border: 1px solid #a4cab8;
}

.button--outline:hover,
.button--outline:focus {
  background: #113c2a;
  border-color: #113c2a;
  color: #ffffff;
}

.button--small {
  padding: 8px 16px;
  font-size: 0.875rem;
}

.button--full {
  width: 100%;
  display: block;
  text-align: center;
}

/* Button group (inline buttons) */

.button-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Badge */

.auth-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.auth-badge--success {
  background: #e8f5e9;
  color: #113c2a;
}

.auth-badge--warning {
  background: #fff8e1;
  color: #856404;
}

.auth-badge--info {
  background: rgba(33, 124, 77, 0.1);
  color: #113c2a;
}

.auth-badge--muted {
  background: #f0efed;
  color: #918c89;
}

/* Inline alert (non-dismissible info/warning boxes) */

.auth-info-box {
  padding: 14px 18px;
  border-radius: 8px;
  font-size: 0.875rem;
  line-height: 1.5;
  margin-bottom: 20px;
}

.auth-info-box--info {
  background: rgba(33, 124, 77, 0.08);
  color: #113c2a;
}

.auth-info-box--warning {
  background: #fff8e1;
  color: #856404;
}

.auth-info-box--danger {
  background: #fce4ec;
  color: #c26b5b;
}

.auth-info-box strong {
  font-weight: 600;
}

/* Horizontal rule */

.auth-hr {
  border: none;
  border-top: 1px solid #a4cab8;
  margin: 24px 0;
}

/* Section card (for MFA, profile sub-sections) */

.auth-section {
  border: 1px solid #a4cab8;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 12px;
}

.auth-section__title {
  font-size: 1rem;
  font-weight: 600;
  color: #113c2a;
  margin-bottom: 8px;
}

.auth-section__text {
  font-size: 0.875rem;
  color: #918c89;
  margin-bottom: 12px;
}

/* Email list (email management page) */

.auth-email-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid #a4cab8;
  border-radius: 8px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: border-color 150ms ease-in-out, background 150ms ease-in-out;
}

.auth-email-item:hover {
  border-color: #217c4d;
  background: rgba(33, 124, 77, 0.04);
}

.auth-email-item input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: #113c2a;
  cursor: pointer;
  flex-shrink: 0;
}

.auth-email-item__info {
  flex: 1;
}

.auth-email-item__address {
  font-weight: 500;
  color: #113c2a;
}

.auth-email-item__badges {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}

/* Profile page */

.auth-profile-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 24px;
}

.auth-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.auth-avatar--initial {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #113c2a;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  font-weight: 600;
  flex-shrink: 0;
}

.auth-profile-name {
  font-size: 1.5rem;
  font-weight: 600;
  color: #113c2a;
  margin-bottom: 4px;
}

.auth-profile-email {
  font-size: 0.875rem;
  color: #918c89;
}

/* Profile action grid */

.auth-action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
  margin-bottom: 24px;
}

.auth-action-grid .button--outline {
  text-align: center;
  font-size: 0.875rem;
  padding: 10px 12px;
  text-decoration: none;
}

.auth-staff-tools__title {
  font-size: 0.875rem;
  font-weight: 600;
  color: #918c89;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
}

/* Conversation list */

.auth-conversation-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border: 1px solid #a4cab8;
  border-radius: 8px;
  margin-bottom: 8px;
  text-decoration: none;
  color: #113c2a;
  transition: border-color 150ms ease-in-out, background 150ms ease-in-out;
}

.auth-conversation-item:hover {
  border-color: #217c4d;
  background: rgba(33, 124, 77, 0.04);
}

.auth-conversation-item__title {
  font-weight: 600;
  margin-bottom: 4px;
}

.auth-conversation-item__id {
  font-size: 0.8125rem;
  color: #918c89;
  font-family: monospace;
}

.auth-conversation-item__date {
  font-size: 0.8125rem;
  color: #918c89;
  white-space: nowrap;
}

/* QR code */

.auth-qr-code {
  max-width: 250px;
  padding: 16px;
  background: #fefefe;
  border-radius: 8px;
  border: 1px solid #a4cab8;
}

/* Monospace input (secrets, codes) */

.auth-mono-input {
  font-family: "SF Mono", "Fira Code", "Fira Mono", "Roboto Mono", monospace;
  font-size: 0.875rem;
  letter-spacing: 0.05em;
}

textarea.auth-mono-input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #a4cab8;
  border-radius: 8px;
  background: #fefefe;
  color: #113c2a;
  resize: none;
}

/* ─── Error Pages ───────────────────────────────────────────────────── */

.error-code {
  font-size: 6rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 16px;
}

.error-code--403,
.error-code--500 {
  color: #c26b5b;
}

.error-code--404 {
  color: #856404;
}

/* ─── Journey Pages ─────────────────────────────────────────────────── */

/* Landing split layout */

.landing-split {
  display: flex;
  min-height: calc(100vh - 74px);
  background: #faf9f6;
  color: #113c2a;
}

.landing-split-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4rem 3rem 4rem 6rem;
}

.landing-split-right {
  flex: 1;
  position: relative;
  background: #faf9f6;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 96px;
}

/* ── Tile-grid hero ──────────────────────────────────────────────────
   4×3 grid of slanted parallelogram tiles — 5 photos + 7 brand color
   blocks. Each tile gets skewY(-8deg) for the lean; photo children
   counter-skew + slight zoom so the underlying image stays upright
   and fully fills the slanted frame.

   Even columns (2 and 4) are translated down by 50% of a tile height
   to create the honeycomb interlock from the design reference.
   Grid sizes to content and centers within .landing-split-right. */
.hero-tile-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 24px 18px;
  width: 100%;
  max-width: 720px;
  box-sizing: border-box;
  background: transparent;
}
.hero-tile {
  aspect-ratio: 5 / 6;
  border-radius: 16px;
  overflow: hidden;
  background: var(--claren-cream-warm, #faf7f2);
  /* Default lean — odd columns (1, 3) lean one way (top-right higher) */
  transform: skewY(-8deg);
}
.hero-tile--photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center;
  /* Counter-skew to keep photo upright inside the slanted frame */
  transform: skewY(8deg) scale(1.18);
}

/* Even columns (2 and 4): flip the slant the other way. No vertical
   stagger — paired columns (1+2 and 3+4) align on their inner surfaces,
   and the alternating slant alone produces the zigzag rhythm. */
.hero-tile:nth-child(4n+2),
.hero-tile:nth-child(4n) {
  transform: skewY(8deg);
}
.hero-tile:nth-child(4n+2) .hero-tile--photo img,
.hero-tile:nth-child(4n) .hero-tile--photo img,
.hero-tile--photo:nth-child(4n+2) img,
.hero-tile--photo:nth-child(4n) img {
  transform: skewY(-8deg) scale(1.18);
}

/* Brand color swatches */
.hero-tile--darkgreen { background: #113c2a; }
.hero-tile--coral     { background: #ff8356; }
.hero-tile--gold      { background: #e3bf02; }
.hero-tile--cream     { background: #f5edca; }
.hero-tile--deepblue  { background: #123167; }
.hero-tile--blush     { background: #f7b7cb; }
.hero-tile--mint      { background: #d4e5db; }

/* prefers-reduced-motion users get no CTA hover lift on the landing page */
@media (prefers-reduced-motion: reduce) {
  .landing-cta-btn { transition: none; }
  .landing-cta-btn:hover { transform: none; }
}

.landing-headline {
  color: #113c2a;
  font-size: 2.8rem;
  line-height: 1.25;
  letter-spacing: -0.03em;
  font-weight: 700;
}

.landing-subheader {
  color: #4a6a5a;
  font-size: 1.05rem;
  line-height: 1.5;
  font-weight: 600;
  margin: 16px 0 0;
  max-width: 32em;
}

.landing-cta-btn {
  display: inline-block;
  background: #113c2a;
  color: #ffffff;
  border: none;
  font-weight: 600;
  padding: 0.75rem 2.5rem;
  border-radius: 8px;
  font-family: "Geist", sans-serif;
  font-size: 1rem;
  text-decoration: none;
  transition: background 150ms ease-in-out, transform 150ms ease-in-out;
}

.landing-cta-btn:hover {
  background: #0d2e20;
  color: #ffffff;
  transform: translateY(-2px);
}

.landing-hero-image {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.landing-hero-subtitle {
  color: #4a6a5a;
}

.landing-hero-link {
  color: #113c2a;
  text-decoration: underline;
}

@media (max-width: 768px) {
  .landing-split {
    flex-direction: column;
  }

  .landing-split-left {
    padding: 3rem 1.5rem 2rem;
    text-align: center;
  }

  .landing-headline {
    font-size: 2rem;
  }

  .landing-split-right {
    position: relative;
    min-height: 360px;
  }

  /* Mobile: drop to 2 columns, 6 tiles total. The :nth-child(n+7) hide
     prunes the third row down to nothing on small screens. */
  .hero-tile-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    padding: 14px;
  }
  .hero-tile:nth-child(n+7) {
    display: none;
  }
}

/* Journey selector tile grid */

.journey-selector-hero {
  text-align: center;
  padding: 48px 24px 32px;
  background: #113c2a;
  color: #ffffff;
  border-radius: 12px;
  margin-bottom: 32px;
}

.journey-selector-hero h1 {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.journey-selector-hero p {
  margin-top: 12px;
  opacity: 0.85;
  font-size: 1.0625rem;
}

.journey-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}

.journey-tile {
  display: block;
  padding: 28px 20px;
  border: 1px solid #a4cab8;
  border-radius: 12px;
  text-align: center;
  text-decoration: none;
  color: #113c2a;
  transition: border-color 150ms ease-in-out, transform 150ms ease-in-out, box-shadow 150ms ease-in-out;
}

.journey-tile:hover {
  border-color: #217c4d;
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.journey-tile__title {
  font-weight: 600;
  font-size: 1.0625rem;
  margin-bottom: 8px;
}

.journey-tile__desc {
  font-size: 0.875rem;
  color: #918c89;
  line-height: 1.5;
}

.journey-tile--disabled {
  opacity: 0.6;
  cursor: default;
}

.journey-tile--disabled:hover {
  border-color: #a4cab8;
  transform: none;
  box-shadow: none;
}

/* Journey progress bar */

.journey-progress {
  height: 6px;
  border-radius: 9999px;
  overflow: hidden;
  background: #a4cab8;
  margin-bottom: 24px;
}

.journey-progress-bar {
  height: 100%;
  background: #113c2a;
  border-radius: 9999px;
  transition: width 400ms ease;
}

/* Onboarding steps */

.onboarding-step {
  display: none;
}

.onboarding-step.active {
  display: block;
}

/* Mode selection */

.auth-card--journey {
  max-width: 640px;
}

/* Not eligible page */

.not-eligible-list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px 0;
}

.not-eligible-list li {
  padding: 8px 0;
  font-size: 0.9375rem;
  color: #113c2a;
  display: flex;
  align-items: center;
  gap: 10px;
}

.not-eligible-list li::before {
  content: "\2713";
  color: #217c4d;
  font-weight: 700;
}

/* Schedule page */

.schedule-layout {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 32px;
  align-items: start;
}

@media (max-width: 768px) {
  .schedule-layout {
    grid-template-columns: 1fr;
  }
}

.schedule-slots {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.coach-slot-btn {
  padding: 8px 16px;
  border: 1px solid #a4cab8;
  border-radius: 8px;
  background: #ffffff;
  color: #113c2a;
  font-family: "Geist", sans-serif;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 150ms ease;
}

.coach-slot-btn:hover {
  border-color: #217c4d;
  color: #217c4d;
}

.coach-slot-btn.selected {
  background: #113c2a;
  border-color: #113c2a;
  color: #ffffff;
  font-weight: 600;
}

/* Appointment confirmed */

.auth-card--appointment {
  max-width: 520px;
}

/* ─── Back Link (common pattern) ────────────────────────────────────── */

.auth-back-link {
  display: inline-block;
  margin-top: 24px;
  font-size: 0.875rem;
  color: #113c2a;
  text-decoration: none;
  transition: color 150ms ease-in-out;
}

.auth-back-link:hover {
  color: #217c4d;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ─── Delete confirmation list ──────────────────────────────────────── */

.auth-delete-list {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
}

.auth-delete-list li {
  padding: 6px 0;
  font-size: 0.9375rem;
  color: #918c89;
  padding-left: 20px;
  position: relative;
}

.auth-delete-list li::before {
  content: "\2022";
  position: absolute;
  left: 4px;
  color: #c26b5b;
}

/* Override: auth-main pages with landing-split should use full width */

body:has(.auth-main .landing-split) .auth-main {
  padding: 0;
  display: block;
}

/* Override: schedule/selector pages need wider layout */

.auth-main--wide {
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
  padding: 40px 24px;
}

body:has(.auth-main--wide) .auth-main {
  display: block;
  max-width: none;
  padding: 0;
}

/* Tile 6 plain-text label (replaces the old "Choose your path" link) */
.claren__box-label {
  position: absolute;
  top: 52%;
  left: 50%;
  transform: translate(-50%, -50%);
  line-height: 1;
  color: #ffffff;
  text-align: center;
}
@media (max-width: 575px) {
  .claren__box-label {
    font-size: 1rem;
  }
}

/* Subhead in audience expanding-blocks (between heading and description) */
.expanding-blocks__block-subhead {
  margin: 12px 0 0;
  font-style: italic;
  font-size: clamp(1rem, 0.8333rem + 0.4630vw, 1.25rem);
  line-height: 1.4;
  color: #ffffff;
  opacity: 0.92;
}