:root,
body,
html {
  --brand-cta: #009B90;
  --brand-teal: #00748B;
  --brand-navy: #1A374D;
  --brand-deep: #115E59;
  --brand-amber: #E49B3C;
  --brand-ink: #33373D;
  --brand-bg: #F5F7F9;
  --brand-mid: #D1D5DA;
}

/* Layout container */
.site-container {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Brand text colours */
.text-brand-ink   { color: var(--brand-ink); }
.text-brand-navy  { color: var(--brand-navy); }
.text-brand-amber { color: var(--brand-amber); }
.text-brand-cta   { color: var(--brand-cta); }
.text-brand-teal  { color: var(--brand-teal); }
.text-brand-deep  { color: var(--brand-deep); }

/* Brand background colours */
.bg-brand-cta   { background-color: var(--brand-cta); }
.bg-brand-teal  { background-color: var(--brand-teal); }
.bg-brand-navy  { background-color: var(--brand-navy); }
.bg-brand-deep  { background-color: var(--brand-deep); }
.bg-brand-amber { background-color: var(--brand-amber); }
.bg-brand-ink   { background-color: var(--brand-ink); }
.bg-brand-bg    { background-color: var(--brand-bg); }
.bg-brand-mid   { background-color: var(--brand-mid); }

/* Navigation links */
.nav-link {
  color: var(--brand-navy);
  font-weight: 500;
  text-decoration: none;
}
.nav-link:hover { color: var(--brand-teal); }

/* Balanced headline text */
.headline-balance {
  text-wrap: balance;
}
@supports not (text-wrap: balance) {
  .headline-balance { letter-spacing: -0.005em; }
}

/* Responsive soft line break */
.softbr { display: none; }
@media (max-width: 767px) {
  .softbr { display: inline; }
}

/* Problem tile hover safeguard */
@media (prefers-reduced-motion: reduce) {
  .problem-tile:hover { transform: none; }
}

/* ================================
   Testimonial Cards
   ================================ */
.testimonial-card {
  background-color: #fff;
  border-radius: 0.75rem; /* matches rounded-xl */
  padding: 1.5rem;
  box-shadow: rgba(0,0,0,.05) 0 2px 6px;
  opacity: 0;
  transform: translateX(60px) scale(1);
  animation: testimonialFadeIn 1.2s ease-out forwards;
  transition: transform 0.5s, box-shadow 0.5s, border-color 0.5s;
}

.testimonial-card:hover {
  box-shadow: rgba(0,155,144,.25) 0 8px 24px;
  z-index: 5;
  transform: translateX(0) scale(1.1);
}

@keyframes testimonialFadeIn {
  0% {
    opacity: 0;
    transform: translateX(60px) scale(1);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

/* ================================
   Mantra Cards (flexbox layout)
   ================================ */
.mantra-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* ================================
   Generic Fade Up animation
   ================================ */
@keyframes fadeUp {
  0%   { opacity: 0; transform: translateY(30px); }
  100% { opacity: 1; transform: translateY(0); }
}

.animate-fadeUp {
  animation: fadeUp 0.9s ease-out forwards;
  opacity: 0;
}

.delay-150 { animation-delay: 0.15s; }
.delay-300 { animation-delay: 0.3s; }

/* ================================
   Responsive spacing overrides
   ================================ */
@media (min-width: 640px) {
  .site-container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .site-container {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}