/* ========================================
Wellthcare - Main CSS Stylesheet
Modern, responsive, mobile-first design
======================================== */

/* ========================================
GLOBAL
======================================== */

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

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    position: relative;
    left: 0;
    right: 0;
    width: 100%;
    font-family: var(--font-body);
    font-size: var(--font-size-body);
    line-height: 1.6;
    color: var(--color-text-dark);
    background-color: var(--color-white);
    overflow-x: hidden;
}
body.no-scroll {
    overflow: hidden;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    background-color: var(--color-bg-offwhite);
}
::-webkit-scrollbar-thumb {
    background-color: var(--color-secondary-teal);
    border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-primary-teal);
}

/* ========================================
FONT STYLING
======================================== */

/*
body, p, label, .wizard-pane, button, input, textarea, select {
  font-family: var(--font-body);
  font-weight: var(--font-weight-regular);
  line-height: 1.6;
  color: var(--color-text-dark);
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-semibold);
  line-height: 1.2;
  color: var(--color-text-dark);
}
h1, .h1, .font-h1 {
  font-size: var(--font-size-h1);
}
h2, .h2, .font-h2 {
  font-size: var(--font-size-h2);
}
h3, .h3, .font-h3 {
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.5px;
  font-size: var(--font-size-h3);
}
h4, .h4, .font-h4 {
  font-size: var(--font-size-h4);
}
h5, .h5, .font-h5 {
  font-size: var(--font-size-h5);
}
h6, .h6, .font-h6 {
  font-size: var(--font-size-h6);
}
*/




body, p, a, ul, ol, li, label, .btn, .nav-link,  [class*="form-control"], .wizard-please, [class*="wizard"], .wizard-pane, .wizard-pane > * {
  font-family: var(--font-body);
  color: var(--color-text-dark);
  font-size: var(--font-size-body);
  line-height: 1.5;
  font-weight: var(--font-weight-regular);
  margin-bottom: 0px;
}
a, label, .btn {
  font-weight: var(--font-weight-bold);
}
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, .wizard-question, .wizard-subquestion, .modal-title, .panel-heading, .alert-heading {
  font-family: var(--font-heading);
  line-height: 1.2;
  font-weight: var(--font-weight-bold);
  color: var(--color-text-dark);
  margin-bottom: 0px;
}
h1, .h1 {
  font-size: var(--font-size-h1);
}
h1.text-lg, .h1.text-lg { font-size: calc(var(--font-size-h1) + 1.5vw); }
h1.text-xl, .h1.text-xl { font-size: calc(var(--font-size-h1) * 1.5vw); }
h1.text-xxl, .h1.text-xxl { font-size: calc(var(--font-size-h1) * 1.5vw); }
h2, .h2, .font-h2, .wizard-question {
  font-size: var(--font-size-h2);
}
h2.text-lg, .h2.text-lg, .wizard-question.text-lg { font-size: calc(var(--font-size-h2) + 0.9vw); }
h3, .h3 {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-medium);
}
h3.text-lg, .h3.text-lg { font-size: calc(var(--font-size-h3) + 0.6vw); }
h4, .h4, .font-h4, .wizard-subquestion {
  font-size: var(--font-size-h4);
}
h4.text-lg, .h4.text-lg { font-size: calc(var(--font-size-h4) + 0.3vw); }
h5, .h5 {
  font-size: var(--font-size-h5);
  line-height: 1.5;
  font-weight: var(--font-weight-regular);
}
h5.text-lg, .h5.text-lg { font-size: calc(var(--font-size-h5) * 1.5); }
h6, .h6 {
  font-family: var(--font-body);
  font-size: var(--font-size-h6);
  line-height: 1.5;
  font-weight: var(--font-weight-regular);
}
h6.text-lg, .h6.text-lg { font-size: calc(var(--font-size-h6) * 1.5); }
.modal-title, .panel-heading, .alert-heading {
  font-family: var(--font-heading);
  line-height: 1.3;
  font-weight: var(--font-weight-bold);
}
h1 > small, .h1 > small, h2 > small, .h2 > small, h3 > small, .h3 > small, h4 > small, .h4 > small, h5 > small, .h5 > small {
    font-weight: 400;
}
span > h1, span > h2, span > h3, span > h4, span > h5, span > p {
    display: inline;
}
h2:not(:last-child), h3:not(:last-child), h4:not(:last-child), h5:not(:last-child), h6:not(:last-child), p:not(:last-child), ul:not(.navbar-nav, :last-child), ul:not(.navbar-nav, .slides, .wizard-steps) > li:not(:last-child), ol:not(:last-child), ol > li:not(:last-child) {
    margin-bottom: 0.5rem;
}
h1:not(:last-child), .flex-inline-title:not(:last-child) {
    margin-bottom: 0.75rem;
}
.alert:not(:last-child) {
    margin-bottom: 1rem;
}
.alert:not(:first-child) {
    margin-top: 1rem;
}
ul {
  list-style: none;
  margin: 1rem 0;
}
ul li {
  border-bottom: none;
  padding-left: 20px;
}
ul li:not(:last-child) {
  margin-bottom: var(--spacing-sm);
}
ul li:last-child {
  border-bottom: none;
}
ul li::before {
  content: "●";
  color: var(--color-primary-teal);
  font-weight: bold;
  flex-shrink: 0;
  font-size: 100%;
  line-height: 0.5;
  margin-top: 0.4rem;
  margin-left: -20px;
  margin-right: 10px;
}
ul > li > * {
    line-height: inherit;
}
* > .text-sm {
    font-size: 80%;
}
.disclaimer-text {
  font-size: clamp(10px, 1vw, 14px) !important;
  font-style: italic;
}

@media(min-width: 576px) {
    small, .small {
        font-size: 80%;
    }
}
@media(min-width: 768px) {
  .disclaimer-text {
    white-space: nowrap;
  }
}
@media(max-width: 767px) {
  body, p, a, h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { 
    text-align: center;
  }
}

/* ========================================
CONTAINERS
======================================== */

.container {
  width: 100%;
  max-width: var(--max-width-wide);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.container + .container,
* + .container {
  margin-top: var(--gutter);
}

.container-shadow {
    box-shadow: 0 0 10px rgb(212, 212, 212);
    border: 1px solid rgb(200, 200, 200);
}

@media(min-width: 1200px) {
  .container-narrow {
    max-width: var(--max-width-narrow);
  }
}
@media(min-width: 1400px) {
  .container:not(.container-narrow) {
    max-width: var(--max-width-wide);
  }
}

/* ========================================
ROWS & COLUMNS
======================================== */

.text-center [class^="col-"],
[class^="col-"].text-center {
  align-items: center;
}
@media(max-width: 767px) {
  [class^="col-"] {
    align-items: center;
  }
}

.row.align-items-stretch > [class^="col-"] > .card {
  flex: 1 1 auto;
  justify-content: center;
}

/* ========================================
DISPLAY
======================================== */

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

.flex, .d-flex { 
  display: flex; 
}
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.flex-center-spaced {
  -webkit-align-items: center !important;
  align-items: center !important;
  -webkit-justify-content: space-between !important;
  justify-content: space-between !important;
}
.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.flex-column {
  flex-direction: column;
}
.flex-grow-1 {
  flex-grow: 1;
}
.align-self-center {
  align-self: center;
}
.align-items-stretch {
  align-items: stretch;
}
@media(max-width: 767px) {
  [class^="col-"].centered-to-md {
    align-items: center;
  }
}

/* ========================================
BUTTONS
======================================== */

.btn,
.btn[class*="wizard-"] {
  --btn-bg-color: #2f2f2f;
  --btn-bg-color-active: #000000;
  --btn-color: #ffffff;
  --btn-color-active: #ffffff;
  --btn-font-size : var(--font-body);
  --btn-font-weight: var(--font-weight-bold);
  --btn-line-height: 1.6;
  --btn-padding-x: var(--spacing-lg);
  --btn-padding-y: var(--spacing-sm);
  --btn-border-radius: var(--radius-full);
  --btn-border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: auto;
  line-height: var(--btn-line-height);
  border: var(--btn-border);
  border-radius: var(--btn-border-radius);
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
  white-space: wrap;
  position: relative;
  overflow: hidden;
  color: var(--btn-color);
  background-color: var(--btn-bg-color);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  padding: var(--btn-padding-y) var(--btn-padding-x);
  text-transform: capitalize;
}
.btn:hover,
.btn:active {
  color: var(--btn-color-active);
  background-color: var(--btn-bg-color-active);
}
.btn.btn-arrow:not(.btn-lg) {
  padding-right: 14px;
}
.btn.btn-arrow::after {
  content: ">";
  font-weight: var(--btn-font-weight);
  transition: transform var(--transition-fast);
  background-color: #ffffff;
  width: 20px;
  height: 20px;
  border-radius: 20px;
  padding: 15px;
  display: flex; 
  justify-content: center;
  align-items: center;
  color: var(--btn-bg-color);
}
.btn.btn-arrow:hover::after {
  color: var(--btn-bg-color-active);
  transform: translateX(4px);
}
.btn.btn-sm {
  --btn-font-size: var(--font-size-small);
  --btn-line-height: 1.3;
  --btn-padding-x: var(--spacing-md);
  --btn-padding-y: var(--spacing-sm);
}
.btn.btn-lg {
  --btn-font-size: var(--font-size-h4);
  --btn-line-height: 1;
  --btn-padding-x: var(--spacing-xl);
  --btn-padding-y: var(--spacing-lg);
}
.btn, .btn:active, .btn:focus {
  width: 100%;
}
@media(min-width: 576px) {
  .btn {
    white-space: nowrap;
  }
  .btn, .btn:active, .btn:focus {
    width: auto;
  }
}
.btn.btn-primary,
.btn.btn-primary[class*="wizard-"]  {
  --btn-bg-color: var(--color-secondary-teal);
  --btn-bg-color-active: var(--color-primary-teal);
  --btn-color: var(--color-white);
  --btn-color-active: var(--color-white);
}
.btn.btn-secondary,
.btn.btn-secondary[class*="wizard-"] {
  --btn-bg-color: transparent;
  --btn-bg-color-active: var(--color-primary-teal);
  --btn-color: var(--color-primary-teal);
  --btn-color-active: var(--color-white);
  box-shadow: inset 0 0 0 2px var(--color-primary-teal);
}
.btn.btn-cancel,
.btn.btn-cancel[class*="wizard-"] {
  --btn-bg-color: var(--color-red);
  --btn-bg-color-active: var(--color-red-dark);
  --btn-color: var(--color-white);
  --btn-color-active: var(--color-white);
}
.btn.btn-cta {
  --btn-bg-color: var(--color-cta-purple);
  --btn-bg-color-active: #9D88AD;
  --btn-color: var(--color-white);
  --btn-color-active: var(--color-white);
}
.btn.btn-cta-inverted {
  --btn-bg-color: transparent;
  --btn-bg-color-active: #9D88AD;
  --btn-color: var(--color-cta-purple);
  --btn-color-active: var(--color-white);
  box-shadow: inset 0 0 0 2px var(--color-cta-purple);
}
.btn.btn-light {
  --btn-bg-color: var(--color-white);
  --btn-bg-color-active: var(--color-bg-lightgray);
  --btn-color: var(--color-primary-teal);
  --btn-color-active: var(--color-primary-teal);
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.btn:disabled:hover {
  transform: none;
  box-shadow: none;
}
.btn > * {
    font-size: inherit;
    line-height: inherit;
    margin-right: calc(var(--bs-btn-padding-x) * 0.5);
}
.btn > small {
    font-size: 75%;
    font-weight: 400;
}

.btn-group {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
}
.btn-group > .btn {
  position: relative;
  flex: 1 1 auto;
  border-radius: 0;
  margin: 0;
}
.btn-group > .btn:first-child {
  border-top-left-radius: var(--radius-full);
  border-bottom-left-radius: var(--radius-full);
}
.btn-group > .btn:last-child {
  border-top-right-radius: var(--radius-full);
  border-bottom-right-radius: var(--radius-full);
}
.btn-group > .btn:not(:first-child) {
  margin-left: 2px;
}

.flex-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.flex-group.inline {
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin: -1rem 0 0 -1rem;
}
.flex-group:not(.inline) > *:not(:last-child) {
  margin-bottom: 1rem;
}
.flex-group.inline > * {
  margin: 1rem 0 0 1rem;
}

a {
  color: var(--color-primary-teal);
  transition: color var(--transition-fast);
}
a, a:hover, a:focus, a:active {
  text-decoration: none;
}
a:hover {
  color: var(--color-secondary-teal);
}

/* ========================================
HEADER & NAVIGATION
======================================== */

.header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: var(--color-bg-offwhite);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition-base),
    background-color var(--transition-base);
}
.header.scrolled {
  background-color: rgba(255, 255, 255, 0.98);
  border-bottom-color: var(--color-border-light);
  box-shadow: var(--shadow-sm);
}
.header .header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  width: 100%;
  padding: var(--spacing-sm) 0;
}
.header .header-content .logo { 
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary-teal);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  width: auto;
  height: 100%;
  margin-right: 1rem;
}
.header .header-content .logo:hover {
  color: var(--color-secondary-teal);
}
.header .header-content .logo img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}
.header .header-content .nav-menu .btn {
  align-self: center;
}

.header .header-content .nav {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  top: 100%;
  left: 0;
  right: 0;
  background-color: var(--color-white);
  gap: var(--spacing-lg);
  padding: var(--spacing-2xl) var(--gutter);
  border-bottom: 1px solid var(--color-border-light);
  overflow: hidden;
  transform-origin: top;
  transform: scaleY(0);
  transition: transform var(--transition-base);
}
.header .header-content .nav.active {
  transform: scaleY(1);
}
.header .header-content .nav .nav-link {
  width: 100%;
}
.header .header-content .nav .nav-link::after {
  display: none;
}
.header .header-content .nav .nav-link.active {
  color: var(--color-primary-teal);
}

.header .header-content .hamburger {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--spacing-sm);
}
.header .header-content .hamburger span {
  width: 24px;
  height: 2px;
  background-color: var(--color-text-dark);
  transition: all var(--transition-base);
  transform-origin: center;
}
.header .header-content .hamburger.active span:nth-child(1) {
  transform: rotate(45deg) translate(6px, 6px);
}
.header .header-content .hamburger.active span:nth-child(2) {
  opacity: 0;
}
.header .header-content .hamburger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}

@media(min-width: 768px) {
  .header .header-content .nav {
    position: unset;
    flex-direction: row;
    background: transparent;
    border-bottom: none;
    flex: 1;
    gap: calc(var(--spacing-3xl) * 0.5);
    transform: none;
    transition: none;
    transform-origin: unset;
    padding: 0px;
  }
  .header .header-content .nav .nav-link {
    width: auto;
  }
  .header .header-content .nav-menu > a:not(.btn) {
    line-height: 1.3;
  }
  .header .header-content .nav-menu > a:first-child {
    margin-left: auto;
  }
  .header .header-content .nav-menu > a:nth-last-of-type(1) + * {
    margin-left: auto;
  }
  .header .header-content .nav .nav-link {
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-dark);
    position: relative;
    transition: color var(--transition-fast);
  }
  .header .header-content .nav .nav-link::after {
    display: block;
    content: "";
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--color-primary-teal);
    transition: width var(--transition-fast);
  }
  .header .header-content .nav .nav-link:hover, 
  .header .header-content .nav .nav-link.active {
    color: var(--color-primary-teal);
  }
  .header .header-content .nav .nav-link:hover::after,
  .header .header-content .nav .nav-link.active::after {
    width: 100%;
  }

  .header .header-content .nav-menu .btn {
    align-self: center;
  }
  .header .header-content .nav-menu .flex-group {
    flex-direction: row;
    flex-wrap: nowrap;
    width: auto;
  }
  .header .header-content .nav-menu .flex-group > * {
    margin: 0px;
  }
  .header .header-content .nav-menu .flex-group > *:not(:last-child) {
    margin-right: 1rem;
  }
  .header .header-content .hamburger {
    display: none;
  }
  .header .header-content .nav-menu .btn {
    align-self: center;
  }
}
@media(min-width: 992px) {
  .header .header-content .nav {
    gap: calc(var(--spacing-3xl) * 0.75);
  }
}
@media(min-width: 1200px) {
  .header .header-content {
    height: 70px;
  }
}

/* ========================================
SECTIONS & FOOTERS
======================================== */

.section-header {
  text-align: center;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.section-header:not(:last-child) {
  margin-bottom: var(--spacing-3xl);
}
.section-header h2 {
  color: var(--color-primary-teal);
}
.section-header p {
  font-size: var(--font-size-body);
}
.section-header > *:not(:last-child) {
  margin-bottom: var(--spacing-lg);
}
section, footer {
  padding: var(--spacing-xl) 0;
}

footer {
  background: linear-gradient(135deg, var(--color-primary-teal) 0%, var(--color-secondary-teal) 100%);
  color: var(--color-white);
}
footer a {
  color: rgba(255, 255, 255, 0.7);
  transition: color var(--transition-fast);
}
footer a:hover,
footer p,
footer li {
  color: var(--color-white);
}
footer form {
  width: 100%;
}
footer form label {
  white-space: nowrap;
}
footer .form-group {
  width: 100%;
}
footer input {
  flex: 1;
  padding: var(--spacing-md) var(--spacing-lg);
  border: none;
  border-radius: var(--radius-full);
  font-size: var(--font-size-body);
  width: 100%;
}
footer ul {
  list-style: none;
}
footer ul > li {
  padding-left: 0px;
}
footer ul > li::before {
  content: "";
  display: none;
}
.footer-divider {
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  padding-top: var(--spacing-2xl);
  width: 100%;
}

@media(min-width: 768px) {
  section, footer {
    padding: var(--spacing-3xl) 0px;
  }
}
@media(min-width: 1200px) {
  section, footer {
    padding: var(--spacing-4xl) 0px;
  }
}

/* ========================================
CARDS
======================================== */

.card {
  display: flex;
  flex-direction: column;
  background-color: var(--color-white);
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  transition: all var(--transition-base);
  border: none;
  overflow: hidden;
  width: 100%;
}
.card.w-auto {
  width: fit-content;
}
.card.centered {
  margin-left: auto;
  margin-right: auto;
}
.card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  transform: none;
}
.card .card-header {
  padding: var(--spacing-xl) var(--spacing-2xl);
  padding-bottom: calc(var(--spacing-xl) * 0.5);
}
.card .card-header *:not(:last-child) {
  margin-bottom: var(--spacing-md);
}
.card .card-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1 1 auto;
  padding: var(--spacing-xl) var(--spacing-2xl);
}
.card .card-header + .card-body {
  padding-top: calc(var(--spacing-xl) * 0.5);
}
.card-title {
  font-size: var(--font-size-h4);
  margin-bottom: var(--spacing-md);
  color: var(--color-text-dark);
}
.card-description {
  color: var(--color-text-medium);
  font-size: var(--font-size-small);
}
.card-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-bg-sage);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-md);
  font-size: 1.5rem;
}
.card-image {
  width: 100%;
  height: 240px;
  border-radius: var(--radius-lg);
  object-fit: cover;
  margin-bottom: var(--spacing-lg);
}
.card.bg-primary,
.card.bg-primary .card-header,
.card.bg-primary .card-header > *,
.card.bg-primary .card-body,
.card.bg-primary .card-body > *,
.card.bg-secondary,
.card.bg-secondary .card-header > *,
.card.bg-secondary .card-header,
.card.bg-secondary .card-body,
.card.bg-secondary .card-body > * {
  color: #ffffff;
}
.card.bg-job-interview {
  overflow: hidden;
  background-image: url(/img/job-interview.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  min-height: 500px;
}
.card.bg-broken-system {
  overflow: hidden;
  background-image: url(/img/broken-system-visual.jpg);
  background-repeat: no-repeat;
  background-size: 100% auto;
  width: 100%;
  height: auto;
}

@media(min-width: 1200px) {
  .card-body.narrow {
    padding-left: calc(var(--spacing-2xl) + 15%);
    padding-right: calc(var(--spacing-2xl) + 15%);
  }
}

/* ========================================
PANELS
======================================== */

.panel {
  --panel-head-color: var(--color-text-dark);
  --panel-head-bg-color: #ffffff;
  --panel-body-color: var(--color-text-dark);
  --panel-body-bg-color: #ffffff;
  --panel-border-color: #ced4da;
  border: 1px solid var(--panel-border-color);
  background-color: #ffffff;
  box-shadow: 0 1px 1px rgb(0 0 0 / 5%);
}
.panel, .panel-heading, .panel-body, .panel-footer {
  border-radius: 0.50rem;
}
.panel > .panel-heading:not(:last-child),
.panel > .panel-body:not(:last-child) {
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}
.panel > .panel-body:not(:first-child),
.panel > .panel-footer:not(:first-child) {
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
}
.panel:not(:first-child) {
  margin-top: 15px;
}
:not(.panel) > .panel-body {
  border: 2px solid rgba(0, 0, 0, 0.15);
  padding: 15px;
}
:not(.panel) > .panel-body:not(:last-child) {
  margin-bottom: 15px;
}
.panel .panel-heading,
.panel .panel-body,
.panel .panel-footer {
  width: 100%;
  padding: 15px;
}
.panel .panel-heading {
  color: var(--panel-head-color);
  background-color: var(--panel-head-bg-color);
  border-bottom: 1px solid var(--panel-border-color);
}
.panel .panel-heading[data-toggle="collapse"] {
  display: inline-flex;
}
.panel .panel-heading[data-toggle="collapse"] > * {
  flex: 0 0 auto;
}
.panel .panel-heading [data-toggle="collapse"] {
  margin-left: auto;
}
.panel .panel-heading > i {
  margin-left: auto;
}
.panel .panel-heading[data-toggle="collapse"] .panel-title {
  line-height: 1;
}
.panel .panel-heading[data-toggle="collapse"] > * {
  margin-bottom: 0px;
}
.panel .panel-title {
  font-weight: bold;
  color: var(--panel-head-color);
}
.panel .panel-heading > *:not(.panel-title, .wizard-question, .wizard-subquestion) {
  font-weight: 400;
}
.panel .panel-body {
  color: var(--panel-body-color);
  background-color: var(--panel-body-bg-color);
}
.panel .panel-heading[data-toggle="collapse"] {
  cursor: pointer;
}
.panel .panel-heading > i {
  font-size: 1.50rem;
  color: inherit;
}
.panel .panel-footer {
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
  -webkit-align-items: baseline;
  align-items: baseline;
}
.panel-footer:not(:first-child, :empty) {
  margin-top: 15px;
}
.panel .panel-footer > * {
  margin-left: 15px;
}
.panel.panel-lg {
  padding: 0px;
}

@media(min-width: 576px) {
  .panel.panel-lg {
    padding: 15px;
  }
}
@media(min-width: 992px) {
  .panel.panel-lg {
    padding: 30px;
  }
}

.panel.panel-default {
  --panel-head-color: var(--color-text-dark);
  --panel-head-bg-color: #f5f5f5;
  --panel-body-color: var(--color-text-dark);
  --panel-body-bg-color: #ffffff;
  --panel-border-color: #dddddd;
}
.panel.panel-warning {
  --panel-head-color: var(--color-orange-dark);
  --panel-head-bg-color: var(--color-orange-opaque);
  --panel-body-color: var(--color-orange-dark);
  --panel-body-bg-color: var(--color-orange-opaque);
  --panel-border-color: var(--color-orange);
}
.panel.panel-danger {
  --panel-head-color: var(--color-red-dark);
  --panel-head-bg-color: var(--color-red-opaque);
  --panel-body-color: var(--color-red-dark);
  --panel-body-bg-color: var(--color-red-opaque);
  --panel-border-color: var(--color-red);
}
.panel.panel-primary {
  --panel-head-color: var(--color-primary-teal);
  --panel-head-bg-color: var(--color-primary-teal-opaque);
  --panel-body-color: var(--color-primary-teal);
  --panel-body-bg-color: var(--color-primary-teal-opaque);
  --panel-border-color: var(--color-primary-teal);
}
.panel.panel-secondary {
  --panel-head-color: var(--color-secondary-teal);
  --panel-head-bg-color: var(--color-secondary-teal-opaque);
  --panel-body-color: var(--color-secondary-teal);
  --panel-body-bg-color: var(--color-secondary-teal-opaque);
  --panel-border-color: var(--color-secondary-teal);
}

/* ========================================
DROPZONE
======================================== */

.dropzone-box {
  -webkit-display: flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  min-height: 155px;
  border-radius: 4px;
  width: 100%;
  height: auto;
  padding: 10px;
  -webkit-transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  -ms-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
  transition: all 0.25s ease;
}
.dropzone-box .dz-default {
  cursor: pointer;
}
.dz-default.dz-message {
  text-align: center;
  -webkit-transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  -ms-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
  transition: all 0.25s ease;
}
.dz-text-small {
  font-size: 14px;
  font-weight: 400px;
}
.dropzone-box .fa.fa-cloud-upload {
  display: block;
  width: 65px;
  height: 65px;
  text-align: center;
  line-height: 65px;
  font-size: 32px;
  background: #eeeeee;
  color: #aaaaaa;
  border-radius: 0.8rem;
  margin: 0px auto 10px auto;
  -webkit-transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  -ms-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
  transition: all 0.25s ease;
}
.dropzone-box:hover .fa.fa-cloud-upload {
  color: #ffffff;
}
.dz-started .dz-default.dz-message {
  display: none;
}
.dz-started:hover .fa.fa-cloud-upload {
  background: #eeeeee !important;
  color: #aaaaaa !important;
}
.dropzone-box.dz-drag-hover {
  border-color: var(--color-primary-teal);
}
.dropzone-box:hover .fa.fa-cloud-upload {
  background: var(--color-primary-teal);
}
.alert.alert-info.alert-dark {
  background-size: 20px 20px;
}
.dz-preview {
  width: 100%;
}
.dz-preview .dz-details .dz-size {
  font-weight: bold;
}
.dz-preview .dz-details .dz-filename {
  font-size: 85%;
  word-break: break-all;
}
.dz-preview .dz-success-mark,
.dz-preview .dz-error-mark {
  display: none;
}
.dz-preview .dz-remove {
  color: var(--color-red);
}
.dz-preview.dz-image-preview {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  height: auto;
}
.dz-preview.dz-image-preview .dz-image > img {
  width: 100%;
  height: auto;
}
.dz-preview.dz-image-preview .dz-image,
.dz-preview.dz-image-preview .dz-details,
.dz-preview.dz-image-preview .dz-progress,
.dz-preview.dz-image-preview .dz-error-message,
.dz-preview.dz-image-preview .dz-success-mark,
.dz-preview.dz-image-preview .dz-error-mark,
.dz-preview.dz-image-preview .dz-remove {
  width: 100%;
  height: auto;
  flex: 0 0 auto;
}
.dz-preview:not(.dz-image-preview) .dz-image {
  display: none;
}
.dz-preview.dz-image-preview .dz-image > *,
.dz-preview .dz-details > *:not(:empty),
.dz-preview .dz-progress > *:not(:empty),
.dz-preview .dz-error-message > *:not(:empty) {
  margin-bottom: 5px;
}

@media(min-width: 768px) {
  .dz-preview.dz-image-preview .dz-image {
    width: 30%;
  }
  .dz-preview.dz-image-preview .dz-details {
    width: 65%;
    margin-left: auto;
  }
}

/* ========================================
MODALS
======================================== */

.modal .modal-dialog .modal-content {
  border-radius: 1rem;
  overflow: hidden;
}
.modal .modal-dialog .modal-content {
  background-color: #ffffff;
}
.modal .modal-dialog .modal-content .modal-header,
.modal .modal-dialog .modal-content .modal-footer {
  background-color: rgba(245, 245, 245, 0.75);
}
.modal .modal-dialog .modal-content [class*="col-"]:last-of-type .modal-header,
.modal .modal-dialog .modal-content [class*="col-"]:last-of-type .modal-body,
.modal .modal-dialog .modal-content [class*="col-"]:last-of-type .modal-footer {
  padding: 1.35rem 2rem 1.35rem 1.25rem;
}
.modal .modal-dialog .modal-content .modal-header .modal-title {
  color: var(--color-primary-teal);
  margin-bottom: 0px;
}
.modal .modal-dialog .modal-content .modal-footer .action-group.inline {
  margin-top: 0px;
}
.modal .modal-dialog .modal-content .modal-footer .action-group.inline > * {
  margin-top: 0px;
}
.modal-footer > .btn:not(:first-child) {
    margin-left:10px;
}

@media(min-width: 576px) {
  .modal-dialog {
    margin: 1.75rem auto;
  }
  .modal-dialog .modal-content {
    max-height: calc(100vh - 3.50rem);
  }
}

/* ========================================
PIXEL WIZARD
======================================== */

.wizard-content {
  padding: 0px;
}
.wizard-content .wizard-pane.panel {
  margin-top: 0px;
}
.wizard-content .wizard-pane.panel-lg > .panel-heading {
  color: var(--color-text-dark);
  border-bottom-width: 0;
}
.wizard-content .wizard-pane.panel-lg > .panel-heading > * {
  color: inherit !important;
}
.wizard-content .wizard-pane.panel-lg > .panel-heading > .panel-title {
  color: var(--color-primary-teal) !important;
}
.wizard-pane.panel .panel-footer {
  background-color: var(--color-bg-offwhite);
}
.wizard-wrapper {
  height: 0px;
  border-width: 0px;
}
.wizard-wrapper ul.wizard-steps > li {
  min-width: 200px;
}
.ui-wizard *:not(.alert) > hr {
  border-top-color: var(--color-primary-teal);
}
.ui-wizard .form-check {
  padding-left: 1.563rem;
}
.ui-wizard .form-check .form-check-input {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.156rem;
  margin-left: -1.563rem;
}
.ui-wizard label.form-check-title {
  margin-bottom: 10px;
}
.ui-wizard .form-check:last-child label {
  margin-bottom: 0px;
}
.wizard-pane.panel > .panel-heading {
  line-height: 1;
}
.wizard-pane.panel > .panel-heading .panel-title {
  color: var(--color-primary-teal);
  line-height: 1.3;
}

/* ========================================
IMAGES & VIDEOS
======================================== */

img {
  max-width: 100%;
  height: auto;
  display: block;
}
.img-responsive {
  width: 100%;
  height: auto;
}
.img-wrapper {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  width: 100%;
  height: 300px;
  overflow: hidden;
  border-radius: 16px;
}
.img-wrapper.fixed-ratio {
  border-radius: 0px;
  height: auto;
}
.img-wrapper.full-width-banner {
  border-radius: 0px;
  height: auto;
}
.img-wrapper > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.img-wrapper > img.object-fill {
  object-fit: fill;
}
.img-wrapper.fixed-ratio > img {
  width: 100%;
  height: auto;
  object-fit: contain;
}
.img-wrapper.full-width-banner > img {
  width: 100%;
  height: 350px;
  object-fit: cover;
}
.img-wrapper.full-width-banner.img-tall > img {
  height: 400px;
}

.video-wrapper {
  display: flex;
  width: 100%;
  height: auto;
}
.video-wrapper.video-centered {
  justify-content: center;
  align-items: center;
  align-self: center;
}
.video-wrapper.video-bordered {
  border-radius: 16px;
  border: 3px solid var(--color-secondary-teal);
  padding: 0 0;
  overflow: hidden;
}
.video-wrapper > video {
  width: 100%;
  height: auto;
}

.phone-screen {
  background-color: var(--color-white);
  border-radius: 30px;
  overflow: hidden;
  position: relative;
  height: -webkit-fill-available;
  height: fit-content;
  padding-bottom: 100%; /* 16/9 × 100% = 9:16 portrait */
  width: 100%;
}
.phone-screen video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
}

@media(min-width: 1200px) {
  .img-wrapper:not(.fixed-ratio, .full-width-banner) {
    height: 350px;
  }
  .img-wrapper.full-width-banner > img {
    height: 400px;
  }
  .img-wrapper.full-width-banner.img-tall > img {
    height: 650px;
  }
}

/* ========================================
FAQ ACCORDION
======================================== */

.accordion {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border-light);
}

.accordion-item {
  border-bottom: 1px solid rgba(3, 95, 94, 0.3);
  transition: all var(--transition-base);
}
.accordion-item:last-child {
  border-bottom: none;
}
.accordion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-md) var(--spacing-lg);
  background-color: var(--color-white);
  cursor: pointer;
  transition: all var(--transition-fast);
  border: none;
  width: 100%;
  text-align: left;
  font-family: var(--font-body);
  font-size: var(--font-size-h4);
  font-weight: 400;
  color: var(--color-primary-teal);
}
.accordion-header:hover {
  background-color: var(--color-white);
  color: var(--color-primary-teal);
}
.accordion-header.active {
  background-color: var(--color-white);
  color: var(--color-primary-teal);
}
.accordion-header .accordion-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition-base);
  flex-shrink: 0;
  color: var(--color-primary-teal);
  font-weight: 700;
  font-size: 1.2rem;
}
.accordion-header.active .accordion-icon {
  transform: rotate(45deg);
}
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-base);
}
.accordion-content.active {
  max-height: 500px;
}
.accordion-content .accordion-body {
  padding: var(--spacing-lg) var(--spacing-3xl);
  padding-right: var(--spacing-5xl);
  color: var(--color-text-medium);
  line-height: 1.8;
}

.faq-tabs {
  display: flex;
  gap: var(--spacing-xl);
  border-bottom: 2px solid var(--color-border-light);
  margin-bottom: var(--spacing-lg);
}
.faq-tabs button {
  background: none;
  border: none;
  padding: 0 0 var(--spacing-md);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-medium);
  position: relative;
  transition: color var(--transition-fast);
}
.faq-tabs button.active {
  color: var(--color-primary-teal);
}
.faq-tabs button::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 3px;
  background-color: #C4A35A;
  transition: width var(--transition-fast);
}
.faq-tabs button.active::after {
  width: 100%;
}
.faq-item + .faq-item {
  border-top: 1px solid var(--color-border-light);
}
.faq-item.open .accordion-icon {
  transform: rotate(45deg);
}
.faq-item.open .faq-question {
  color: var(--color-primary-teal);
}
.accordion-content.faq-answer {
  opacity: 0;
  transition: max-height var(--transition-base), opacity var(--transition-base);
}

/* ========================================
CONTENT GROUPS
======================================== */

.group-content {
  display: block;
  width: 100%;
}
.group-content.inline {
  display: inline-block;
}
.group-content > *:not(:last-child) {
  margin-bottom: var(--spacing-md);
}

.text-divide-left {
  color: var(--color-secondary-teal);
  border-left: 2px solid var(--color-secondary-teal);
  padding-left: 10px;
  margin-left: 10px;
}

/* ========================================
READMORE CONTENT
======================================== */

.readmore-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  line-height: 1.4;
}
.readmore-text {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: all 0.3s ease;
}
.readmore-text > *:not(:last-child) {
  margin-bottom: var(--spacing-md);
}
.readmore-text.expanded {
  -webkit-line-clamp: unset;
  line-clamp: unset;
}
.readmore-toggle, .readmore-toggle:active, .readmore-toggle:focus {
  margin-top: var(--spacing-md) !important;
}
.readmore-container.text-left .readmore-toggle {
  align-self: flex-start;
}

/* ========================================
BLOCKQUOTE
======================================== */

blockquote {
  border-left: 4px solid var(--color-primary-teal);
  background-color: rgba(3, 95, 94, 0.05);
  color: var(--color-primary-teal);
  font-style: italic;
  font-size: var(--font-size-h4);
  padding: 1rem 1.5rem;
  font-weight: var(--font-weight-bold);
  line-height: 1.3;
}
blockquote > .quote-source {
  font-style: normal;
  font-weight: var(--font-weight-regular);
  font-size: 75%;
  margin-top: var(--spacing-sm);
}
blockquote:not(:first-child) {
  margin-top: 1.5rem;
}
blockquote:not(:last-child) {
  margin-bottom: 1.5rem;
}

.testimonial-quote-icon {
  font-size: 3rem;
  color: var(--color-primary-teal);
  margin-bottom: var(--spacing-lg);
}

/* ========================================
LOADING & STATES
======================================== */

#loadingDialog {
  position: fixed;
  display: none;
  justify-content: center;
  align-items: center;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(255, 255, 255, 0.75);
  z-index: 99999999;
}
#loadingDialog.show {
  display: flex;
}
#loadingDialog .card {
  width: auto;
  margin: auto;
  background: var(--color-primary-teal);
}
#loadingDialog .card h3 {
  color: #ffffff;
}
#loadingDialog .spinner {
  position: relative;
  width: 60px;
  height: 60px;
  border: 6px solid rgba(255, 255, 255, 0.25);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 30px 60px;
}

.loading {
  pointer-events: none;
  opacity: 0.6;
}
.loading::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  animation: shimmer 2s infinite;
}

.error {
  background-color: rgba(220, 38, 38, 0.1);
  border-color: var(--color-red);
  color: var(--color-red-dark);
}
.warning {
  background-color: rgba(245, 158, 11, 0.1);
  border-color: var(--color-orange);
  color: var(--color-orange-dark);
}
.success {
  background-color: rgba(16, 185, 129, 0.1);
  border-color: var(--color-green);
  color: var(--color-green-dark);
}

/* ========================================
BADGES
======================================== */

.badge {
    --badge-bg-color: #2f2f2f;
    --badge-color: #ffffff;
    --badge-font-size: var(--font-size-body);
    --badge-font-weight: var(--font-weight-semibold);
    --badge-padding-x: var(--spacing-xl);
    --badge-padding-y: var(--spacing-lg);
    display: inline-block;
    text-align: center;
    font-size: var(--badge-font-size);
    font-weight: var(--badge-font-weight);
    border-radius: var(--radius-lg);
    background-color: var(--badge-bg-color);
    color: var(--badge-color);
    padding: var(--badge-padding-y) var(--badge-padding-x);
    width: auto;
}
.badge.w-100 {
    width: 100%;
}
.badge.badge-purple {
  --badge-bg-color: var(--color-cta-purple);
  --badge-color: var(--color-white);
}

/* ========================================
FORMS & FORM GROUPS
======================================== */

.form-check {
  position: relative;
  display: inline-flex;
  padding-left: 1.25rem;
}
.form-check .form-check-input {
  position: absolute;
  margin-top: 0.2rem;
  align-self:flex-start;
  margin-left: -1.25rem;
}
.form-group {
  margin-bottom: var(--spacing-lg);
}
.form-group > * {
    margin: 0px;
}
.form-group > *:not(:first-child) {
  margin-top: 0.25rem;
}
.form-group[class*="inline"] {
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}
.form-group[class*="inline"] > *:not(:last-child) {
  margin-right: 0.25rem;
}
.form-group.inline {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-start;
}
.form-group.inline > * {
  flex: 1 0 0%;
}
.form-group[class*="inline"] label {
  flex: 0 0 auto;
  margin: 0px 0.50rem 0.25rem 0px;
}
.form-group > label ~ .form-check > label {
  font-weight: 400;
}
.form-group > .inline {
  display: inline-flex;
  margin-left: -7.5px;
  margin-right: -7.5px;
}
.form-group > .inline > * {
  flex: 1 0 0%;
  margin-left: 7.5px;
  margin-right: 7.5px;
}
.form-group > .inline > input[type="number"].toggle-value-field {
  min-width: calc(35% - 22.5px);
  flex-grow: 0;
}
.form-group > .inline > input[type="text"].toggle-value-field {
  max-width: calc(50% - 22.5px);
}
.form-group > .inline > .form-check > label {
  font-size: 90%;
  font-weight: 400;
}
.form-group label ~ label.form-check,
.form-check-title ~ label.form-check,
.form-group label ~ .form-check > .form-check-label,
.form-check-title ~ .form-check > .form-check-label {
    font-weight: 400;
}
.form-group.has-error label.label-required {
    color: initial !important;
}
.has-error .form-control,
.has-error input[class*="form-check"] {
    border-color: var(--color-red);
}
.form-label {
  display: block;
  margin-bottom: var(--spacing-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-dark);
  font-size: var(--font-size-small);
}
.form-input,
.form-textarea,
.form-select {
  width: 100%;
  padding: var(--spacing-md) var(--spacing-lg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--font-size-body);
  font-family: var(--font-body);
  transition: all var(--transition-fast);
  background-color: var(--color-white);
}
.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  outline: none;
  border-color: var(--color-primary-teal);
  box-shadow: 0 0 0 3px rgba(3, 95, 94, 0.1);
}
.form-textarea {
  resize: vertical;
  min-height: 120px;
  font-family: var(--font-body);
}
.form-checkbox {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}
.form-checkbox input {
  width: 18px;
  height: 18px;
  cursor: pointer;
}
.form-checkbox label {
  cursor: pointer;
  margin: 0;
}


.form-error {
  color: var(--color-red);
  font-size: var(--font-size-tiny);
  margin-top: var(--spacing-sm);
}
.form-success {
  background-color: rgba(16, 185, 129, 0.1);
  color: var(--color-green);
  padding: var(--spacing-lg);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-lg);
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-lg);
}

/* Placeholder styling */
input::placeholder,
textarea::placeholder {
  color: var(--color-text-muted);
  opacity: 0.7;
}

p.has-error,
span.has-error,
.validationMessage {
  font-size: 0.875rem;
  font-weight: bold;
  font-style: italic;
  color: var(--color-red) !important;
}
.label-required {
  position: relative;
}
.label-required::after {
  font-family: inherit;
  content: "*"; 
  font-size: 0.75rem; 
  font-weight: 100;
  position: relative;
  line-height: 1;
  width: 0;
  top: -0.25rem;
  right: 0;
  margin-left: 0.25rem;
  color: var(--color-red);
  text-align: right;
}
.validationMessage {
    display: block;
}

/* Selection styling */
::selection {
  background-color: var(--color-primary-teal);
  color: var(--color-white);
}

::-moz-selection {
  background-color: var(--color-primary-teal);
  color: var(--color-white);
}

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

/* ========================================
HELPER CLASSES
======================================== */

/* TEXT -------------------------------- */
.font-bold {
  font-weight: var(--font-weight-bold) !important;
}
.font-light {
  font-weight: var(--font-weight-light) !important;
}
.text-center { text-align: center !important; }
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }
.text-nowrap { white-space: nowrap !important; }
.text-bold { font-weight: 600 !important; }
.text-italic ul.text-italic > li { font-style: italic !important; }
.text-underline { text-decoration: underline !important; }
.text-strikethrough { text-decoration: line-through !important; }
.text-uppercase { text-transform: uppercase !important; letter-spacing: 0.025rem !important; }
.text-thin { font-weight: 400 !important; }
.no-wrap { white-space: nowrap !important; }
.no-padding { padding: 0px !important; }
.no-padding-l { padding-left: 0px !important; }
.no-padding-r { padding-right: 0px !important; }
.no-padding-t { padding-top: 0px !important; }
.no-padding-b { padding-bottom: 0px !important; }
.no-margin { margin: 0px !important; }
.margin-sm { margin: 7.5px !important; }
.margin-sm-l { margin-left: 7.5px !important; }
.margin-sm-r { margin-right: 7.5px !important; }
.margin-md { margin: 15px !important; }
.padding-md { padding: 15px !important; }
.margin-lg { margin: 30px !important; }
.no-margin-t { margin-top: 0px !important; }
.margin-md-t { margin-top: 15px !important; }
.margin-lg-t { margin-top: 30px !important; }
.no-margin-b { margin-bottom: 0px !important; }
.margin-md-b { margin-bottom: 15px !important; }
.margin-lg-b { margin-bottom: 30px !important; }
.no-margin-vr { margin-top: 0px !important; margin-bottom: 0px !important; }
.margin-md-vr { margin-top: 15px !important; margin-bottom: 15px !important; }
.margin-lg-vr { margin-top: 30px !important; margin-bottom: 30px !important; }
.no-margin-l { margin-left: 0px !important; }
.margin-md-l { margin-left: 15px !important; }
.margin-lg-l { margin-left: 30px !important; }
.no-margin-r { margin-right: 0px !important; }
.margin-md-r { margin-right: 15px !important; }
.margin-lg-r { margin-right: 30px !important; }
.hidden { display: none !important; }
.invisible { visibility: hidden; }

@media(min-width: 768px) {
  .text-left-md { text-align: left !important; }
}

/* COLORS ------------------------------ */
.color-primary { color: var(--color-primary-teal) !important; }
.bg-primary { background-color: var(--color-primary-teal) !important; }
.bg-primary-gradient { background: linear-gradient(135deg, var(--color-primary-teal) 0%, var(--color-secondary-teal) 100%); }
.color-secondary { color: var(--color-secondary-teal) !important; }
.bg-secondary { background-color: var(--color-secondary-teal) !important; }
.color-purple { color: var(--color-cta-purple) !important; }
.bg-purple { background-color: var(--color-cta-purple) !important; }
.bg-purple-gradient { background: linear-gradient(135deg, var(--color-cta-purple) 0%, #9D88AD 100%); }
.color-sage { color: var(--color-bg-sage) !important; }
.bg-sage { background-color: var(--color-bg-sage) !important; }
.bg-light { background-color: var(--color-bg-offwhite) !important; }
.color-light-gray { color: var(--color-bg-lightgray) !important; }
.bg-light-gray { background-color: var(--color-bg-lightgray) !important; }
.color-medium { color: var(--color-text-medium) !important; }
.color-white { color: #ffffff !important; }
.bg-cream { background-color: var(--color-bg-cream) !important; }
.color-red,
.color-danger {
    color: var(--color-red) !important;
}
.color-orange,
.color-warning {
    color: var(--color-orange) !important;
}
.color-green,
.color-success {
    color: var(--color-green) !important;
}
.color-white {
    color: #ffffff !important;
}
.color-primary > *,
.color-secondary > *,
.color-red > *,
.color-orange > *,
.color-green > *,
.color-white > * {
    color: inherit;
}

/* FORMATTING -------------------------- */
.w-100 { width: 100%; }
@media(min-width: 992px) {
  .w-lg-narrow {
    max-width: var(--max-width-narrow);
  }
  .w-lg-25 { width: 25%; }
}
@media(max-width: 767px) {
  .hide-mobile {
    display: none;
  }
}
@media(min-width: 768px) and (max-width: 991px) {
  .hide-tablet { 
    display: none;
  }
}
@media(min-width: 992px) and (max-width: 1199px) {
  .hide-tablet-landscape {
    display: none;
  }
}
@media(min-width: 1200px) {
  .hide-desktop {
    display: none;
  }
}

/* ========================================
ACCESSIBILITY
======================================== */

/* Print Styles */
@media print {
  .header, footer, .cta-banner, .btn {
    display: none;
  }
  body {
    background-color: var(--color-white);
  }
  .card {
    box-shadow: none;
    border: 1px solid var(--color-border);
  }
}

/* Focus styles for keyboard navigation */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-primary-teal);
  outline-offset: 2px;
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: more) {
  :root {
    --shadow-subtle: 0 2px 8px rgba(0, 0, 0, 0.15);
  }
  .card {
    border: 2px solid var(--color-border);
  }
}

/* Dark mode support (for future implementation) */
@media (prefers-color-scheme: dark) {
  /* Colors can be inverted here if needed */
  /* This is optional and depends on design requirements */
}


/* ========================================
END OF STYLESHEET
======================================== */