/* Reset & Base Styles */
:root {
  --primary-color: #03363D; /* Biofarma dark green */
  --secondary-color: #00B4D8;
  --accent-color: #F8B195;
  --bg-light: #F4F7F6;
  --bg-dark: #011E22; /* Deep teal — darker end of the primary ramp */
  --bg-gradient: linear-gradient(135deg, #e0f7fa 0%, #ffffff 100%);
  --text-dark: #1A1A1A;
  --text-light: #666666;
  --white: #ffffff;
  --font-heading: 'Manrope', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --border-radius-lg: 24px;
  --border-radius-md: 16px;
  --border-radius-sm: 8px;
  --box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  --box-shadow-hover: 0 20px 40px rgba(0, 0, 0, 0.1);
  --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

html {
  scroll-behavior: smooth;
}

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

body {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--text-dark);
  background-color: var(--bg-light);
  line-height: 1.6;
}

a {
  text-decoration: none;
  color: inherit;
  transition: var(--transition);
}

ul {
  list-style: none;
}

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

.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

h1 {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 600;
  color: var(--primary-color);
  margin-bottom: 1.5rem;
}

h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 500;
  color: var(--primary-color);
  margin-bottom: 1rem;
}

h3 {
  font-size: clamp(1.5rem, 3vw, 2rem);
}

p {
  font-size: 1.125rem;
  color: var(--text-light);
  margin-bottom: 1rem;
}

/* Header */
.header {
  position: sticky;
  top: 0;
  margin: 0; /* Remove bottom spacing so it touches the video perfectly */
  width: 100%; /* Span full width to eliminate the floating box look */
  max-width: none;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: none;
  z-index: 1000;
  padding: 12px 40px; /* Adjust padding for full width */
  border-radius: 0; /* Remove rounded corners */
  transition: var(--transition);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05); /* Softer shadow */
}

.header.scrolled {
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.header__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: none;
  padding: 0;
}

.footer__brand {
}

.footer__brand img {
  height: 60px;
  width: auto;
  margin-bottom: 24px;
}

.header__logo {
  display: flex;
  align-items: center;
}

.header__logo img {
  height: 40px;
  width: auto;
  transform: scale(1.8);
  transform-origin: left center;
}

.header__right {
  display: flex;
  align-items: center;
  gap: 32px;
}

.header__nav {
  display: flex;
  gap: 32px;
  align-items: center;
}

.header__nav-link {
  font-weight: 500;
  color: var(--text-dark);
  font-size: 1rem;
  position: relative;
}

.header__nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--primary-color);
  transition: var(--transition);
}

.header__nav-link--mobile-contact {
  display: none;
}

.header__hamburger {
  display: none;
  background: transparent;
  border: none;
  color: var(--primary-color);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 8px;
}

.header__nav-link:hover::after {
  width: 100%;
}

.header__contact-btn {
  background-color: var(--primary-color);
  color: var(--white);
  padding: 12px 24px;
  border-radius: 100px;
  font-family: var(--font-body);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  position: relative;
  overflow: hidden;
  z-index: 1;
  transition: color 0.4s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

/* Inline SVG icons, sized and coloured like the Font Awesome glyphs they
   replace: 1em square, inheriting the current text colour. */
.icon {
  width: 1em;
  height: 1em;
  fill: currentColor;
  display: inline-block;
  vertical-align: -0.125em;
  flex-shrink: 0;
}

.icon.fa-lg {
  width: 1.33em;
  height: 1.33em;
}

@keyframes heartbeat {
  0% { transform: scale(1); }
  5% { transform: scale(1.2); }
  10% { transform: scale(1); }
  100% { transform: scale(1); }
}

.header__contact-btn .fa-heart,
.header__nav-link--mobile-contact .fa-heart,
.stats-cta__btn .fa-heart,
.give-band__btn .fa-heart {
  display: inline-block;
  animation: heartbeat 3s ease-in-out infinite;
  transform-origin: center;
  color: #ef4444;
}

/* The two in-page donation CTAs beat quicker than the header's, which sits on
   screen the whole visit and would nag at this speed. */
.stats-cta__btn .fa-heart,
.give-band__btn .fa-heart {
  animation-duration: 2s;
}

/* An infinitely looping animation is exactly what this setting is for. */
@media (prefers-reduced-motion: reduce) {
  .header__contact-btn .fa-heart,
  .header__nav-link--mobile-contact .fa-heart,
  .stats-cta__btn .fa-heart,
  .give-band__btn .fa-heart {
    animation: none;
  }
}

.header__contact-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 150%;
  height: 150%;
  border-radius: 0 100px 100px 0;
  background-color: var(--secondary-color);
  transform: translateX(-110%);
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: -1;
}

.header__contact-btn:hover,
.header__contact-btn:active,
.header__contact-btn:focus {
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 180, 216, 0.3);
}

.header__contact-btn:hover::before,
.header__contact-btn:active::before,
.header__contact-btn:focus::before {
  transform: translateX(-5%);
}

.header__dropdown {
  position: relative;
  display: inline-block;
}

.header__dropdown-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  background: white;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  min-width: 220px;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 8px;
  z-index: 100;
}

.header__dropdown:hover .header__dropdown-menu,
.header__dropdown:focus-within .header__dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.header__dropdown-menu a {
  padding: 12px 16px;
  color: var(--primary-color);
  text-decoration: none;
  font-weight: 500;
  border-radius: 8px;
  transition: background 0.2s;
  text-align: left;
}

.header__dropdown-menu a:hover {
  background: var(--bg-light);
  color: var(--secondary-color);
}

.hero {
  position: relative;
  margin: 0 0 340px 0; /* Full width edge-to-edge */
}

.hero__video-wrap {
  position: relative;
  width: 100%;
  border-radius: 0; /* Remove rounded corners for full stretch */
  overflow: hidden;
  line-height: 0;
  background-color: var(--primary-color);
}

.hero__video {
  width: 100%;
  height: 65vh; /* Shorter height */
  min-height: 400px;
  display: block;
  object-fit: cover;
  object-position: center 30%; /* User requested 30% framing */
  transform: scale(1.15); /* Zoom in to push baked-in black letterboxing out of the frame */
}

.hero__video-poster {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}

.hero__video-player {
  position: relative;
  z-index: 1;
}

.hero__video-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.2) 40%, transparent 70%);
  z-index: 1;
}

.hero__inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  text-align: left;
  padding: 100px 60px 40px 60px;
  pointer-events: none;
}

.hero__inner > * {
  pointer-events: auto;
}

.hero__badge {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  color: var(--white);
  border: 1px solid rgba(255,255,255,0.3);
  padding: 8px 16px;
  border-radius: 100px;
  font-weight: 600;
  font-size: 0.875rem;
  margin-bottom: 24px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.hero__content {
  max-width: 700px;
  margin: 0;
  color: var(--white);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.hero__content h1 {
  color: var(--white);
  font-size: clamp(2rem, 3.5vw, 3rem); /* Smaller font size */
  max-width: 600px;
}

.hero__content p {
  font-size: 1.1rem; /* Slightly smaller body */
  margin-bottom: 100px; /* Keep clear of the overlapping cards */
  margin-top: auto; /* Push down to the bottom */
  color: rgba(255,255,255,0.9);
  max-width: 500px;
}

.hero__cards {
  display: flex;
  align-items: center;
  gap: 24px;
  width: 100vw;
  position: absolute;
  top: calc(100% - 40px); /* Reduced overlap to bring cards down */
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  overflow: hidden;
  padding: 20px 0;
  white-space: nowrap;
}

.hero__cards-inner {
  display: flex;
  gap: 24px;
  animation: scrollCards 80s linear infinite;
  min-width: max-content;
  will-change: transform;
  transform: translateZ(0);
}

@keyframes scrollCards {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(calc(-100% - 24px), 0, 0); }
}

.hero__card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.2) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-top: 1px solid rgba(255, 255, 255, 0.8);
  border-left: 1px solid rgba(255, 255, 255, 0.8);
  padding: 60px 32px;
  border-radius: var(--border-radius-lg);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);

  text-align: left;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
  min-width: 280px;
  height: 340px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* Push text down to make use of tall height */
}

/* Removed floatSlow animations to keep them evenly aligned */

.hero__card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.2);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.3) 100%);
}

.hero__card.hero__card--with-img {
  justify-content: flex-end; 
  padding: 60px 32px; /* Restore padding if it was altered, just to be safe */
}

.hero__card.hero__card--with-img img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
  /* Fade the image out at the very top so the native glass card effect shows through, but keep most of the picture visible */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 25%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 25%);
}

.hero__card.hero__card--with-img::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 70%);
  z-index: 1;
}

.hero__card.hero__card--with-img h2,
.hero__card.hero__card--with-img h3,
.hero__card.hero__card--with-img p {
  position: relative;
  z-index: 2;
  color: var(--white);
  text-shadow: 0 2px 8px rgba(0,0,0,0.8), 0 0 20px rgba(0,0,0,0.5);
  margin-top: 0;
}

.hero__card h2,
.hero__card h3 {
  font-size: 3.5rem;
  color: var(--primary-color);
  margin-bottom: 12px;
}

.hero__card p {
  font-size: 1.25rem;
  margin: 0;
  font-weight: 500;
}

/* Ecosystem Section */
.ecosystem {
  padding: 120px 0;
  background: var(--white);
}

/* ==========================================================================
   Donation calls to action
   ========================================================================== */

/* Sits directly under the hero stat marquee, turning those figures into an
   ask instead of leaving them as decoration. */
.stats-cta {
  background: var(--white);
  padding: 32px 0 0;
}

.stats-cta__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 24px;
  text-align: center;
}

.stats-cta__text {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--primary-color);
  margin: 0;
}

.stats-cta__btn,
.give-band__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  text-decoration: none;
  border-radius: 100px;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

.stats-cta__btn {
  background-color: var(--primary-color);
  color: var(--white);
  padding: 12px 28px;
  font-size: 1rem;
}

.stats-cta__btn:hover,
.give-band__btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--box-shadow-hover);
}

/* Full-width teal band after the E-Transit van story. Reuses the footer's
   colour so it reads as a deliberate break between the two white sections
   rather than a stray coloured box. */
.give-band {
  background-color: var(--primary-color);
  color: var(--white);
  padding: 80px 0;
  text-align: center;
}

.give-band__title {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  color: var(--white);
  margin: 0 0 16px;
}

.give-band__text {
  max-width: 680px;
  margin: 0 auto 32px;
  font-size: 1.0625rem;
  line-height: 1.7;
  /* 0.85 alpha on the teal keeps body copy comfortably past AA without
     flattening the contrast between it and the heading. */
  color: rgba(255, 255, 255, 0.85);
}

.give-band__btn {
  background-color: var(--white);
  color: var(--primary-color);
  padding: 16px 40px;
  font-size: 1.0625rem;
}

.give-band__org {
  margin: 28px 0 0;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.7);
}

.give-band__tax {
  margin: 0 0 28px;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.9);
}

@media (max-width: 767px) {
  .give-band { padding: 56px 0; }
  /* .hero__cards is 380px tall and absolutely positioned at calc(100% - 40px),
     but .hero only reserves 280px of bottom margin here -- so the marquee
     overhangs the next element by 60px. The About section's padding used to
     swallow that; this CTA has to clear it explicitly or the text renders
     underneath the cards. */
  .stats-cta { padding-top: 84px; }
  .stats-cta__inner { flex-direction: column; }
}

/* The About block and Services At A Glance are two sections now, with the news
   panel between them. Without these the section's 120px band would be paid
   twice -- once closing About, once opening Services -- on top of hero08's own
   padding, leaving a dead gap on either side of the news panel. 60px each side
   keeps the original rhythm.

   The padding has to be real, and .ecosystem__header's bottom margin has to go
   with it: at padding-bottom 0 that 60px margin collapses out of the section,
   so the section ends flush with the awards card and the gap below it renders
   as page background -- a thick grey band rather than white. The sections are
   divided by a hairline instead, matching the one .stories already uses. */
.ecosystem--about {
  padding-bottom: 60px;
}

.ecosystem--about .ecosystem__header {
  margin-bottom: 0;
}

.ecosystem--services {
  padding-top: 60px;
  border-top: 1px solid rgba(3, 54, 61, 0.12);
}

.ecosystem__header {
  text-align: center;
  max-width: 900px;
  margin: 0 auto 60px;
}

.ecosystem__vision {
  font-size: 1.1rem;
  color: var(--primary-color);
  margin-top: 40px;
  margin-bottom: 20px;
}

.ecosystem__awards {
  margin-top: 40px;
  padding: 32px;
  /* Was rgba(var(--primary-rgb), 0.05), but --primary-rgb is not defined
     anywhere, so the whole declaration was invalid and the panel rendered with
     no background at all. Same tint, written literally: #03363D at 5%. */
  background: rgba(3, 54, 61, 0.05);
  border: 1px solid rgba(3, 54, 61, 0.12);
  border-radius: 12px;
  text-align: left;
}

.ecosystem__awards h3,
.ecosystem__awards h4 {
  font-size: 1.25rem;
  color: var(--primary-color);
  margin-bottom: 20px;
  text-align: center;
}

.ecosystem__awards ul.ecosystem__awards-list {
  list-style-type: none;
  padding-left: 0;
  font-size: 0.95rem;
  line-height: 1.6;
}

.ecosystem__awards ul.ecosystem__awards-list li {
  margin-bottom: 15px;
  display: flex;
  align-items: flex-start;
}

.ecosystem__awards ul.ecosystem__awards-list li:last-child {
  margin-bottom: 0;
}

.ecosystem__award-icon {
  width: 36px;
  height: 36px;
  margin-right: 14px;
  margin-top: -4px;
  flex-shrink: 0;
}

.ecosystem__award-icon--diploma {
  width: 54px;
  height: 54px;
  margin-top: -12px;
  margin-right: 5px;
  margin-left: -9px;
}

.ecosystem__partners {
  margin-bottom: 80px;
  background: var(--bg-light);
  padding: 40px;
  border-radius: var(--border-radius-lg);
  border: 1px solid rgba(0,0,0,0.05);
}

.ecosystem__partners-label {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--primary-color);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 24px;
  text-align: center;
}

.ecosystem__partners-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}

.ecosystem__partner-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: var(--white);
  border-radius: 100px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-dark);
  box-shadow: 0 2px 10px rgba(0,0,0,0.03);
  border: 1px solid rgba(0,0,0,0.05);
}

.ecosystem__partner-badge i {
  color: var(--secondary-color);
  font-size: 1.1rem;
}

.ecosystem__services-header {
  text-align: center;
  margin-bottom: 40px;
}

.ecosystem__services-header h3 {
  font-size: 2.25rem;
  color: var(--primary-color);
  margin-bottom: 12px;
}

.ecosystem__services-header p {
  font-size: 1.125rem;
  color: var(--text-light);
}

/* Licensing note under the services grid. Several cards -- Therapy, Substance
   Abuse, Anger Management, Group Sessions, Drug Testing -- read as clinical
   care, so the qualifier sits with them rather than only in the footer. */
.services-disclaimer {
  max-width: 760px;
  margin: 40px auto 0;
  text-align: center;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-light);
}

.service-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 40px;
}

.service-image-card {
  position: relative;
  height: 250px;
  width: 100%;
  cursor: pointer;
  overflow: hidden;
  border-radius: var(--border-radius-md);
  background: var(--bg-light);
}

.service-image-card__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), filter 0.5s ease;
  filter: grayscale(100%);
}

.service-image-card:hover .service-image-card__bg {
  transform: scale(1.1);
  filter: grayscale(0%) saturate(1.3);
}

.service-image-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.1) 100%);
  z-index: 10;
  transition: background 0.5s ease;
}

.service-image-card:hover .service-image-card__overlay {
  background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.1) 100%);
}

.service-image-card__content {
  position: relative;
  z-index: 20;
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px;
  color: rgba(255,255,255,0.7);
  transition: color 0.5s ease;
}

.service-image-card:hover .service-image-card__content {
  color: #ffffff;
}

.service-image-card__text {
  transform: translateY(10px);
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.service-image-card:hover .service-image-card__text {
  transform: translateY(0);
}

.service-image-card__text h3 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 8px;
  color: #ffffff;
}

.service-image-card__text p {
  font-size: 0.95rem;
  line-height: 1.4;
  margin: 0;
}

@media (max-width: 768px) {
  .service-image-card__bg {
    filter: grayscale(0%) saturate(1.3);
  }
  
  .service-image-card__overlay {
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.1) 100%);
  }
  
  .service-image-card__content {
    color: #ffffff;
  }
  
  .service-image-card__text {
    transform: translateY(0);
  }
}

/* Brands/Programs Section */
.programs {
  padding: 120px 0 60px;
  background: var(--bg-light);
}

.programs__header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 60px;
  margin-bottom: 60px;
  scroll-margin-top: 120px;
}

.programs__header-image {
  width: 100%;
}

/* Photo Carousel */
.photo-carousel {
  position: relative;
  width: 100%;
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0,0,0,0.1);
  aspect-ratio: 4/3;
}

.photo-carousel__track {
  position: relative;
  width: 100%;
  height: 100%;
}

.photo-carousel__slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  z-index: 1;
}

.photo-carousel__slide.active {
  opacity: 1;
  z-index: 2;
}

.photo-carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.8);
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-color);
  font-size: 1.2rem;
  transition: background 0.3s ease, opacity 0.3s ease;
  opacity: 0;
  pointer-events: none;
}

.photo-carousel.show-arrows .photo-carousel__arrow {
  opacity: 1;
  pointer-events: auto;
}

.photo-carousel__arrow:hover {
  background: rgba(255, 255, 255, 1);
}

.photo-carousel__arrow--left {
  left: 16px;
}

.photo-carousel__arrow--right {
  right: 16px;
}

.programs__header-text {
  max-width: 100%;
}

.programs__header-text h2 {
  font-size: 1.75rem;
  line-height: 1.5;
  font-weight: 500;
  color: var(--text-color);
}

.programs__logos {
  display: flex;
  align-items: center;
  gap: 40px;
  margin-bottom: 60px;
  overflow-x: auto;
  padding-bottom: 20px;
}

.programs__logos img {
  height: 40px;
  opacity: 0.5;
  filter: grayscale(100%);
  transition: var(--transition);
}

.programs__logos img:hover {
  opacity: 1;
  filter: grayscale(0%);
}

/* Programs Slider */
.programs__slider {
  overflow: hidden;
  padding: 40px 0;
  background: var(--bg-light);
  position: relative;
  margin-top: 40px;
  /* Full-bleed out of .container (which caps at 1280px) so this rule spans the
     viewport and lines up with the .stories border-top below the strip. A
     container-width line would read as noticeably narrower on wide screens. */
  width: auto;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  /* Straight edges: a 24px radius would bow the rule at both ends. */
  border-radius: 0;
  border-top: 1px solid rgba(3, 54, 61, 0.12);
}

.programs__slider::before,
.programs__slider::after {
  content: "";
  position: absolute;
  top: 0;
  width: 100px;
  height: 100%;
  z-index: 2;
}

.programs__slider::before {
  left: 0;
  background: linear-gradient(to right, var(--bg-light) 0%, transparent 100%);
}

.programs__slider::after {
  right: 0;
  background: linear-gradient(to left, var(--bg-light) 0%, transparent 100%);
}

.programs__slider-inner {
  display: flex;
  align-items: center;
  gap: 0;
  width: max-content;
  animation: scrollPrograms 45s linear infinite;
  will-change: transform;
  transform: translateZ(0);
}

.programs__slider-group {
  display: flex;
  align-items: center;
  gap: 40px;
  padding-right: 40px;
}

@keyframes scrollPrograms {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}

.programs__slider-bullet {
  color: var(--primary-color);
  font-size: 1.5rem;
  opacity: 0.3;
}

.programs__slider-logo {
  height: 120px;
  width: auto;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.programs__slider-logo:hover {
  transform: scale(1.05);
}

@media (max-width: 991px) {
  .programs__slider::before,
  .programs__slider::after {
    display: none;
  }
}

/* Testimonies Section */
.stories {
  padding: 100px 0;
  /* Was var(--bg-color), which is undefined -- it fell back to transparent and
     therefore rendered the same #f4f7f6 as .programs directly above, so the two
     sections ran together with no seam. Set it explicitly and mark the boundary.
     Deliberately NOT white: the testimonial cards are #ffffff and would vanish. */
  background: var(--bg-light);
  border-top: 1px solid rgba(3, 54, 61, 0.12);
}

/* Phones were getting the full desktop section padding -- 120px above the
   partner logos and 100px around the stories block eats most of a screen. */
@media (max-width: 767px) {
  .ecosystem__awards { padding: 20px; }
  .programs { padding: 56px 0 32px; }
  .stories { padding: 56px 0; }
  .ecosystem { padding: 64px 0; }
}

.stories__header {
  max-width: 700px;
  margin: 0 auto 60px;
}

.stories__header h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--text-dark);
  margin-bottom: 16px;
  font-weight: 700;
  line-height: 1.2;
}

.stories__header p {
  font-size: 1.125rem;
  color: var(--text-light);
  line-height: 1.6;
}

.text-center {
  text-align: center;
}

.reviews-badge {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  background: var(--white);
  padding: 12px 24px;
  border-radius: 100px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
  margin-top: 30px;
}

.google-logo {
  width: 32px;
  height: 32px;
}

.reviews-badge__text {
  text-align: left;
  line-height: 1.2;
}

.reviews-badge__text strong {
  font-size: 1.125rem;
  color: var(--text-dark);
}

.reviews-badge__stars {
  color: #FBBC05;
  font-size: 0.9rem;
  display: inline-block;
  margin: 0 6px;
}

.reviews-badge__text span {
  font-size: 0.85rem;
  color: var(--text-light);
  display: block;
}

.stagger-wrapper {
  position: relative;
  width: 100%;
  height: 600px;
  overflow: hidden;
  background: var(--bg-light);
  border-radius: var(--border-radius-lg);
  margin-top: 40px;
}

.stagger-testimonials {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.stagger-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 365px;
  height: 365px;
  cursor: pointer;
  border: 2px solid var(--border-color, #e2e8f0);
  padding: 30px;
  transition: all 0.5s ease-in-out;
  background: var(--white);
  color: var(--text-dark);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  z-index: 0;
}

.stagger-card--center {
  z-index: 10;
  background: var(--primary-color);
  color: var(--white);
  border-color: var(--primary-color);
  box-shadow: 0px 8px 0px 4px var(--bg-color);
}

.stagger-card:not(.stagger-card--center):hover {
  border-color: rgba(0, 180, 216, 0.5);
}

.stagger-card .review-card__stars {
  color: #FBBC05;
  font-size: 1.1rem;
  margin-bottom: 20px;
  display: flex;
  gap: 4px;
}

.stagger-card--center .review-card__stars {
  color: #FBBC05;
}

.stagger-card p {
  font-size: 1.125rem;
  line-height: 1.6;
  font-style: italic;
  margin-bottom: 24px;
  flex-grow: 1;
  color: inherit;
}

.stagger-card strong {
  font-weight: 700;
  font-size: 1.05rem;
  color: inherit;
}

.stagger-controls {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 12px;
  z-index: 20;
}

.stagger-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: var(--white);
  border: 2px solid var(--border-color, #e2e8f0);
  border-radius: 50%;
  font-size: 1.25rem;
  color: var(--text-dark);
  cursor: pointer;
  transition: all 0.3s ease;
}

.stagger-btn:hover {
  background: var(--primary-color);
  color: var(--white);
  border-color: var(--primary-color);
}

@media (max-width: 640px) {
  .stagger-card {
    width: 290px;
    height: 350px;
    padding: 24px;
  }
  
  .stagger-card p {
    font-size: 1.05rem;
    line-height: 1.5;
    margin-bottom: 12px;
  }
  
  .stagger-card .review-card__stars {
    margin-bottom: 12px;
  }
}

/* ==========================================================================
   Hero08 (Press Release Redesign)
   ========================================================================== */
.hero08 {
  /* Was var(--color-white), which is not defined anywhere -- the background
     silently fell back to transparent, so the section never read as its own
     panel. --white is the variable this stylesheet actually defines. */
  background-color: var(--white);
  /* Hairline to mark the start of the section. */
  border-top: 1px solid rgba(3, 54, 61, 0.12);
  /* Was 80px top; the preceding .stories section already contributes 100px of
     bottom padding, so the combined gap above the heading was excessive. */
  padding: 48px 24px 80px;
  overflow: hidden;
}

.hero08__container {
  max-width: 1152px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 64px;
}

.hero08__header {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: flex-end;
}

@media (min-width: 1024px) {
  .hero08__header {
    grid-template-columns: 1fr 1fr;
    gap: 64px;
  }
}

.hero08__title {
  font-family: var(--font-serif);
  font-size: 36px;
  font-weight: 400;
  line-height: 1.1;
  color: var(--color-text);
  margin: 0;
}

/* Below 1024px the header stacks into one column and the description group
   underneath is already centred, so a left-aligned title looked orphaned. */
@media (max-width: 1023px) {
  .hero08__title { text-align: center; }
}

@media (min-width: 640px) {
  .hero08__title { font-size: 48px; }
}

.hero08__desc-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  text-align: center;
}

.hero08__wf-logo {
  border-radius: 50%;
  object-fit: contain;
  width: 100px;
  height: 100px;
  align-self: center;
}

@media (min-width: 1024px) {
  .hero08__wf-logo {
    width: 160px;
    height: 160px;
  }
}

.hero08__desc {
  color: var(--color-text-light);
  font-size: 16px;
  max-width: 384px;
  line-height: 1.6;
}

.hero08__social-proof {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hero08__social-proof-text {
  font-weight: 600;
  font-size: 14px;
  color: var(--color-text);
}

.hero08__avatars {
  display: flex;
  margin-left: 10px;
}

.hero08__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--color-white);
  background-color: #f1f5f9;
  margin-left: -10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  flex-shrink: 0;
}

.hero08__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero08__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

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

.hero08__card {
  position: relative;
  width: 100%;
  aspect-ratio: 16/10;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.1);
  isolation: isolate;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hero08__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.15);
}

.hero08__card-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

.hero08__card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom right, rgba(0,0,0,0.35), rgba(0,0,0,0.05), transparent);
  z-index: -1;
}

.hero08__card-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  padding: 32px;
}

.hero08__card-title {
  font-weight: 600;
  font-size: 24px;
  color: #ffffff;
  margin: 0;
  text-shadow: 0 2px 4px rgba(0,0,0,0.6);
}

.hero08__card-subtitle {
  margin-top: 4px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

.hero08__card-cta {
  margin-top: auto;
}

.btn--white {
  background-color: #ffffff;
  color: #000000;
  border: none;
  font-weight: 500;
  transition: background-color 0.2s;
  padding: 10px 24px;
  border-radius: 6px;
  display: inline-block;
  text-decoration: none;
}

.btn--white:hover {
  background-color: rgba(255, 255, 255, 0.9);
}

/* Animations */
.hero08 .reveal {
  opacity: 0;
  transform: translateY(12px);
  filter: blur(6px);
  transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1), 
              transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), 
              filter 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.hero08 .media-reveal {
  transform: translateY(24px);
  filter: blur(8px);
  transition-duration: 0.6s;
  transition-delay: 0.1s;
}

.hero08 .reveal.active {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0px);
}

/* Contact/Footer */
.footer {
  position: relative;
  background: var(--primary-color);
  color: var(--white);
  padding: 80px 0 40px;
}

.footer::before {
  content: "";
  position: absolute;
  top: -9px;
  left: 0;
  width: 100%;
  height: 10px;
  background: inherit;
  -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxMDAwIDIwJyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSdub25lJz48cG9seWdvbiBwb2ludHM9JzAsMjAgMTAwMCwyMCAxMDAwLDEwIDk5MCwxNCA5ODAsNiA5NzAsMTYgOTYwLDggOTUwLDEyIDk0MCw1IDkzMCwxNyA5MjAsOSA5MTAsMTMgOTAwLDQgODkwLDE2IDg4MCw3IDg3MCwxNSA4NjAsNSA4NTAsMTIgODQwLDggODMwLDE3IDgyMCwxMCA4MTAsMTQgODAwLDYgNzkwLDE2IDc4MCw5IDc3MCwxMyA3NjAsNCA3NTAsMTUgNzQwLDcgNzMwLDE2IDcyMCw1IDcxMCwxMiA3MDAsOSA2OTAsMTcgNjgwLDExIDY3MCwxNCA2NjAsNiA2NTAsMTUgNjQwLDggNjMwLDEzIDYyMCw0IDYxMCwxNiA2MDAsNyA1OTAsMTQgNTgwLDUgNTcwLDEyIDU2MCw5IDU1MCwxNyA1NDAsMTAgNTMwLDEzIDUyMCw2IDUxMCwxNiA1MDAsOCA0OTAsMTQgNDgwLDUgNDcwLDEyIDQ2MCw3IDQ1MCwxNSA0NDAsOSA0MzAsMTMgNDIwLDQgNDEwLDE2IDQwMCw2IDM5MCwxNCAzODAsNSAzNzAsMTIgMzYwLDkgMzUwLDE3IDM0MCwxMSAzMzAsMTQgMzIwLDYgMzEwLDE1IDMwMCw4IDI5MCwxMyAyODAsNCAyNzAsMTYgMjYwLDcgMjUwLDE0IDI0MCw1IDIzMCwxMiAyMjAsOCAyMTAsMTcgMjAwLDEwIDE5MCwxMyAxODAsNiAxNzAsMTYgMTYwLDggMTUwLDE0IDE0MCw1IDEzMCwxMiAxMjAsNyAxMTAsMTUgMTAwLDkgOTAsMTMgODAsNCA3MCwxNiA2MCw2IDUwLDE0IDQwLDUgMzAsMTIgMjAsOSAxMCwxNyAwLDExJyBmaWxsPSdibGFjaycvPjwvc3ZnPg==");
  -webkit-mask-size: 1000px 10px;
  -webkit-mask-position: bottom left;
  -webkit-mask-repeat: repeat-x;
  mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxMDAwIDIwJyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSdub25lJz48cG9seWdvbiBwb2ludHM9JzAsMjAgMTAwMCwyMCAxMDAwLDEwIDk5MCwxNCA5ODAsNiA5NzAsMTYgOTYwLDggOTUwLDEyIDk0MCw1IDkzMCwxNyA5MjAsOSA5MTAsMTMgOTAwLDQgODkwLDE2IDg4MCw3IDg3MCwxNSA4NjAsNSA4NTAsMTIgODQwLDggODMwLDE3IDgyMCwxMCA4MTAsMTQgODAwLDYgNzkwLDE2IDc4MCw5IDc3MCwxMyA3NjAsNCA3NTAsMTUgNzQwLDcgNzMwLDE2IDcyMCw1IDcxMCwxMiA3MDAsOSA2OTAsMTcgNjgwLDExIDY3MCwxNCA2NjAsNiA2NTAsMTUgNjQwLDggNjMwLDEzIDYyMCw0IDYxMCwxNiA2MDAsNyA1OTAsMTQgNTgwLDUgNTcwLDEyIDU2MCw5IDU1MCwxNyA1NDAsMTAgNTMwLDEzIDUyMCw2IDUxMCwxNiA1MDAsOCA0OTAsMTQgNDgwLDUgNDcwLDEyIDQ2MCw3IDQ1MCwxNSA0NDAsOSA0MzAsMTMgNDIwLDQgNDEwLDE2IDQwMCw2IDM5MCwxNCAzODAsNSAzNzAsMTIgMzYwLDkgMzUwLDE3IDM0MCwxMSAzMzAsMTQgMzIwLDYgMzEwLDE1IDMwMCw4IDI5MCwxMyAyODAsNCAyNzAsMTYgMjYwLDcgMjUwLDE0IDI0MCw1IDIzMCwxMiAyMjAsOCAyMTAsMTcgMjAwLDEwIDE5MCwxMyAxODAsNiAxNzAsMTYgMTYwLDggMTUwLDE0IDE0MCw1IDEzMCwxMiAxMjAsNyAxMTAsMTUgMTAwLDkgOTAsMTMgODAsNCA3MCwxNiA2MCw2IDUwLDE0IDQwLDUgMzAsMTIgMjAsOSAxMCwxNyAwLDExJyBmaWxsPSdibGFjaycvPjwvc3ZnPg==");
  mask-size: 1000px 10px;
  mask-position: bottom left;
  mask-repeat: repeat-x;
}

.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  margin-bottom: 60px;
}

@media (min-width: 1024px) {
  .footer__grid {
    grid-template-columns: 1fr 2.5fr;
    gap: 64px;
  }
}

.footer__brand-col {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  text-align: center;
}

@media (min-width: 1024px) {
  .footer__brand-col {
    align-items: flex-start;
    text-align: left;
  }
}

.footer__logo-box {
  background: linear-gradient(135deg, #ffffff 0%, #f4f7f6 100%);
  padding: 0px 4px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
}

@media (min-width: 1024px) {
  .footer__logo-box {
    align-self: flex-start;
  }
}

.footer__logo-box img {
  height: 80px;
  /* Required now the tag carries width/height attributes for CLS: without it
     the width attribute is taken literally and the logo is stretched. */
  width: auto;
  display: block;
}

/* press-release.html uses .footer__brand rather than .footer__brand-col, so it
   was missing this and fell through to the global #666 -- 2.28:1 on the teal. */
.footer__brand-col p,
.footer__brand p {
  color: rgba(255, 255, 255, 0.7);
  max-width: 400px;
  line-height: 1.6;
}

.footer__socials {
  display: flex;
  gap: 24px;
  list-style: none;
  padding: 0;
  margin: 0;
  justify-content: center;
}

@media (min-width: 1024px) {
  .footer__socials {
    justify-content: flex-start;
  }
}

.footer__socials a {
  color: var(--color-white);
  font-size: 24px;
  transition: color 0.2s, transform 0.2s;
  display: inline-block;
}

.footer__socials a:hover {
  color: var(--color-secondary);
  transform: translateY(-2px);
}

.footer__links-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}

@media (min-width: 640px) {
  .footer__links-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 768px) {
  .footer__links-grid {
    /* Content-sized tracks, not 4 equal ones: the Contact column holds a
       44-character email that needs ~335px while the other three need <150px.
       space-between stops auto tracks from stretching back to equal widths. */
    grid-template-columns: repeat(4, auto);
    justify-content: space-between;
    /* Tighter column gap than the 40px row gap: the contact column needs the
       width for a 44-character address, and space-between redistributes
       whatever is left over anyway. */
    column-gap: 28px;
  }
}

/* The address must break rather than overflow in narrow columns, but once
   there is room for its full width, keep it on a single line. */
.footer a[href^="mailto:"] {
  word-break: break-all;
}

@media (min-width: 1220px) {
  .footer a[href^="mailto:"] {
    word-break: normal;
    white-space: nowrap;
  }
}

/* On a phone the footer is one column, so the 45-character address has the
   full width available -- but not at 16px: it needs 378px (354 of text plus
   the 24px icon and gap) inside a 342px column at 390px wide. Scaling the
   text with the viewport keeps it on one line instead of breaking mid-word,
   and the clamp stops it collapsing on very narrow screens. */
@media (max-width: 767px) {
  .footer a[href^="mailto:"] {
    font-size: clamp(11px, calc(4.5vw - 3.2px), 1rem);
    white-space: nowrap;
    word-break: normal;
  }
}

.footer__links-col {
  text-align: center;
}

@media (min-width: 640px) {
  .footer__links-col {
    text-align: left;
  }
}

.footer__links-col h3 {
  color: var(--white);
  margin-bottom: 24px;
  font-size: 1.125rem;
  font-weight: 600;
}

.footer__links-col ul {
  display: flex;
  flex-direction: column;
  gap: 16px;
  list-style: none;
  padding: 0;
  margin: 0;
  align-items: center;
}

@media (min-width: 640px) {
  .footer__links-col ul {
    align-items: flex-start;
  }
}

.footer__links-col a {
  color: rgba(255, 255, 255, 0.7);
  transition: color 0.2s, padding-left 0.2s;
  text-decoration: none;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.4;
  justify-content: center;
}

@media (min-width: 640px) {
  .footer__links-col a {
    justify-content: flex-start;
  }
}

.footer__links-col a i {
  margin-top: 4px;
  color: var(--color-secondary);
  flex-shrink: 0;
}

.footer__links-col a:hover {
  color: var(--white);
  padding-left: 4px;
}

.footer__indicator {
  position: relative;
  display: flex;
  width: 8px;
  height: 8px;
  margin-top: 6px;
}

.footer__indicator .ping {
  position: absolute;
  display: inline-flex;
  height: 100%;
  width: 100%;
  border-radius: 50%;
  background-color: var(--color-secondary);
  opacity: 0.75;
  animation: ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.footer__indicator .dot {
  position: relative;
  display: inline-flex;
  border-radius: 50%;
  width: 8px;
  height: 8px;
  background-color: var(--color-secondary);
}

@keyframes ping {
  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}

/* The global `p` rule sets #666666, which beats the light colour inherited
   from .footer__bottom -- 2.28:1 against the dark teal footer, well under the
   4.5:1 minimum. Inheritance always loses to a direct rule, so restate it. */
.footer__bottom p {
  color: inherit;
}

.footer__bottom {
  padding-top: 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  /* 0.5 alpha blends to #819b9e on the teal footer = 4.45:1, just under the
     4.5:1 AA minimum. 0.6 clears it with margin. */
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.875rem;
  text-align: center;
}

@media (min-width: 640px) {
  .footer__bottom {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

.btn-outline {
  border: 2px solid rgba(255, 255, 255, 0.2);
  color: var(--white);
  padding: 12px 24px;
  border-radius: 100px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  transition: var(--transition);
}

.btn-outline:hover {
  background: var(--white);
  color: var(--primary-color);
}

/* Donate Page */
.donate-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  /* Taller than a cropped hero needs to be: the photo is now shown whole,
     so the section height is what determines how big it reads. */
  min-height: 76vh;
  /* Solid colour first so the section is never light-on-light if the
     gradient fails to parse or the photos are still loading. */
  background-color: var(--primary-color);
  background-image: linear-gradient(135deg, var(--primary-color) 0%, var(--bg-dark) 100%);
  padding: 100px 0 88px;
  color: var(--white);
  text-align: left;
}

/* --- Hero photo --- */
.donate-hero__media {
  position: absolute;
  inset: 24px 5%;
  z-index: 0;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}

.donate-hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Light gradient overlay to make left-aligned text readable */
.donate-hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.2) 50%, transparent 100%);
}

.donate-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 0 10%;
}

/* Shadow pool removed to accommodate left alignment */

.donate-hero__content {
  max-width: 800px;
  margin: 0;
}

.donate-hero__content h1 {
  font-size: 2.25rem;
  color: #E1AF38; /* Trinity Gold */
  margin-bottom: 16px;
  /* Belt-and-braces over the brightest frames in the rotation. */
  text-shadow: 0 2px 24px rgba(1, 30, 34, 0.5);
  font-weight: 600;
}

.donate-hero__content p {
  font-size: 2.25rem;
  line-height: 1.2;
  color: rgba(255,255,255,0.92);
  margin-bottom: 40px;
  text-shadow: 0 1px 16px rgba(1, 30, 34, 0.5);
  font-weight: 500;
}

.donate-hero__tax-badge {
  display: inline-block;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 12px 24px;
  border-radius: 50px;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.5px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.donate-hero__tax-badge i {
  color: #E1AF38; /* Trinity Gold */
  margin-right: 8px;
  font-size: 1.1rem;
}

.donate-content {
  padding: 80px 0 120px;
  background: var(--bg-light);
}

.scriptures-text-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 40px;
  max-width: 800px;
  margin: 0 auto;
}

.scripture-text {
  padding: 0 20px;
}

.scripture-text blockquote {
  font-size: 1.5rem;
  font-family: var(--font-heading);
  color: var(--primary-color);
  font-style: italic;
  margin-bottom: 12px;
  line-height: 1.4;
}

.scripture-text cite {
  font-size: 1.125rem;
  color: var(--text-light);
  font-weight: 600;
  font-style: normal;
}

@media (max-width: 991px) {
  .donate-hero {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    padding: 0;
    height: auto;
    min-height: 0;
    display: flex;
    flex-direction: column-reverse;
  }

  .programs__header {
    display: flex;
    flex-direction: column;
    gap: 40px;
  }

  .programs__header-text {
    order: 1;
  }

  .programs__header-image {
    order: 2;
    display: block; /* explicitly overriding just in case */
  }

  .donate-hero__media {
    position: relative;
    height: 200px;
    width: 100%;
    background-color: transparent !important;
    border-radius: 0 !important;
    overflow: hidden;
  }

  .donate-hero__media::after {
    display: none;
  }

  .donate-hero__inner {
    padding: 24px 20px;
    background: transparent;
    text-align: center;
  }

  .donate-hero__content {
    margin: 0 auto;
  }

  .donate-hero__content h1 {
    font-size: 2rem;
    color: #E1AF38; /* Trinity Gold */
    text-shadow: none;
    margin-bottom: 12px;
  }
  
  .donate-hero__content p {
    font-size: 1.125rem;
    color: var(--text-color);
    text-shadow: none;
    margin-bottom: 24px;
  }

  .donate-hero__tax-badge i {
    color: var(--secondary-color);
    font-size: 1.25rem;
  }

  .scriptures-text-section {
    position: relative;
    max-width: 100%;
    margin: 40px auto 0;
    padding: 60px 24px;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
  }

  .scriptures-text-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url('assets/scripture-bg.webp');
    background-size: cover;
    background-position: center;
    z-index: 0;
  }

  .scriptures-text-section::after {
    content: "";
    position: absolute;
    inset: 0;
    /* Reduced gradient opacity to reveal more of the picture */
    background: linear-gradient(135deg, rgba(3, 54, 61, 0.4) 0%, rgba(1, 30, 34, 0.3) 100%);
    z-index: 1;
  }

  .scripture-text {
    position: relative;
    z-index: 2;
  }

  .scripture-text blockquote {
    font-size: 1.5rem;
    color: var(--white);
    /* Stronger text shadow to compensate for the lighter background */
    text-shadow: 0 2px 8px rgba(0,0,0,0.8), 0 4px 20px rgba(0,0,0,0.6);
  }

  .scripture-text cite {
    color: var(--white);
    font-weight: 700;
    text-shadow: 0 2px 8px rgba(0,0,0,0.8);
  }
}

/* Scroll Fade In Animation */
.fade-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.donate-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 40px;
  margin-bottom: 80px;
}

.donate-card-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.donate-card {
  background: var(--white);
  padding: 48px;
  border-radius: var(--border-radius-lg);
  box-shadow: var(--box-shadow);
  text-align: center;
  border-top: 4px solid var(--primary-color);
  transition: var(--transition);
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.donate-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--box-shadow-hover);
}

.donate-card__icon {
  width: 80px;
  height: 80px;
  background: var(--bg-light);
  color: var(--primary-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  margin: 0 auto 24px;
}

.donate-card h2 {
  color: var(--primary-color);
  margin-bottom: 16px;
}

.donate-card p {
  color: var(--text-light);
  margin-bottom: 40px;
}

.donate-card__methods {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.donate-method {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.05);
  background: var(--bg-light);
  text-decoration: none;
  transition: var(--transition);
}

.donate-method--onetime {
  background: var(--primary-color);
  color: #ffffff !important;
  flex-direction: row;
  justify-content: center;
  gap: 12px;
  font-size: 1.25rem;
  font-weight: 700;
  border: none;
  padding: 20px;
  position: relative;
  overflow: hidden;
  z-index: 1;
  transition: color 0.4s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.donate-method--onetime::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 150%;
  height: 150%;
  border-radius: 0 100px 100px 0;
  background-color: var(--secondary-color);
  transform: translateX(-110%);
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: -1;
}

.donate-method--onetime:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 180, 216, 0.3);
  color: #ffffff !important;
}

.donate-method--onetime:hover::before {
  transform: translateX(-5%);
}

.donate-method--recurring {
  background: var(--secondary-color);
  color: #ffffff !important;
  flex-direction: row;
  justify-content: center;
  gap: 12px;
  font-size: 1.25rem;
  font-weight: 700;
  border: none;
  padding: 20px;
  position: relative;
  overflow: hidden;
  z-index: 1;
  transition: color 0.4s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.donate-method--recurring::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 150%;
  height: 150%;
  border-radius: 0 100px 100px 0;
  background-color: var(--primary-color);
  transform: translateX(-110%);
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: -1;
}

.donate-method--recurring:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 180, 216, 0.3);
  color: #ffffff !important;
}

.donate-method--recurring:hover::before {
  transform: translateX(-5%);
}

.donate-method--paypal {
  background: #003087;
  color: #ffffff !important;
  flex-direction: row;
  justify-content: center;
  gap: 12px;
  font-size: 1.25rem;
  font-weight: 700;
  border: none;
  padding: 20px;
  position: relative;
  overflow: hidden;
  z-index: 1;
  transition: color 0.4s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.donate-method--paypal::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 150%;
  height: 150%;
  border-radius: 0 100px 100px 0;
  background-color: var(--secondary-color);
  transform: translateX(-110%);
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: -1;
}

.donate-method--paypal:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 180, 216, 0.3);
  color: #ffffff !important;
}

.donate-method--paypal:hover::before {
  transform: translateX(-5%);
}
.donate-method--paypal i {
  font-size: 1.5rem;
}

.donate-method--cashapp {
  border-color: rgba(0, 214, 50, 0.5);
  background: rgba(0, 214, 50, 0.06);
}

.donate-method__label {
  font-weight: 700;
  color: var(--primary-color);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  text-transform: uppercase;
  font-size: 0.875rem;
  letter-spacing: 0.5px;
}

.donate-method--cashapp .donate-method__label {
  /* Brand #00D632 only hits ~1.9:1 on the pale card — darkened for legibility. */
  color: #00802A;
  font-size: 1rem;
}

.donate-method__value {
  font-size: 1.25rem;
  color: var(--text-dark);
  font-weight: 600;
  line-height: 1.5;
}

.scriptures-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 40px;
  max-width: 900px;
  margin: 0 auto;
}

.scripture-card {
  text-align: center;
  padding: 40px;
  background: var(--white);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--box-shadow);
  position: relative;
}

.scripture-card__icon {
  font-size: 2rem;
  color: var(--secondary-color);
  opacity: 0.2;
  margin-bottom: 24px;
}

.scripture-card blockquote {
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--primary-color);
  line-height: 1.6;
  margin: 0 0 24px 0;
  font-style: italic;
}

.scripture-card cite {
  font-weight: 700;
  color: var(--secondary-color);
  font-style: normal;
}

/* Utilities */
.text-center { text-align: center; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-12 { margin-bottom: 3rem; }
.mt-4 { margin-top: 1rem; }
.mt-8 { margin-top: 2rem; }
.mt-12 { margin-top: 3rem; }

/* Responsive */
@media (max-width: 992px) {
  .programs__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .stories__grid {
    grid-template-columns: 1fr;
  }
  .footer__grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Between the hamburger breakpoint and ~991px the header carries four nav
   links plus both pill buttons and the logo, with no slack: at 32px gaps the
   row runs over and "About Us" breaks onto two lines. Tighten the spacing and
   type just in that band, and stop the links wrapping. */
@media (min-width: 769px) and (max-width: 991px) {
  .header__right,
  .header__nav {
    gap: 20px;
  }
  .header__nav-link {
    white-space: nowrap;
    font-size: 0.9375rem;
  }
  .header__contact-btn--desktop {
    padding: 10px 18px;
    font-size: 0.9375rem;
  }
}

@media (max-width: 768px) {
  .donate-hero {
    padding: 32px 0 64px;
    min-height: 0;
  }
  .donate-hero__content h1 {
    font-size: 2.25rem;
  }
  /* Less blur at small sizes — 28px reads as mush on a phone. */
  .donate-hero__media::before {
    filter: blur(18px) saturate(1.15);
  }
  .donate-hero__tax-badge {
    flex-direction: column;
    text-align: center;
  }
  .donate-content {
    padding: 40px 0 40px;
  }
  .donate-grid {
    grid-template-columns: 1fr;
    margin-bottom: 40px;
  }
  .donate-card {
    padding: 32px 24px;
  }
  
  .header {
    padding: 16px 20px 12px 20px; /* Extra top padding so logo isn't cut off */
  }
  
  .header__contact-btn--desktop {
    display: none !important;
  }
  .header__hamburger {
    display: block;
  }
  .header__nav-link--mobile-contact {
    display: block;
    margin-top: 16px;
    padding: 12px 24px;
    background-size: 200% 100%;
    background-image: linear-gradient(to right, var(--secondary-color) 50%, var(--primary-color) 50%);
    background-position: 100% 0;
    color: var(--white) !important;
    border-radius: 100px;
    text-align: center;
    transition: background-position 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s ease, box-shadow 0.3s ease;
  }
  .header__nav-link--mobile-contact:hover,
  .header__nav-link--mobile-contact:active,
  .header__nav-link--mobile-contact:focus {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 180, 216, 0.3);
    background-position: 0 0;
  }
  .header__nav {
    display: none; /* Keep initial state hidden until toggled */
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 24px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    border-top: 1px solid rgba(0,0,0,0.05);
  }
  .header__nav.is-open {
    display: flex;
  }
  .hero {
    margin-bottom: 280px; /* Slightly less margin needed on mobile */
  }
  .hero__video {
    height: 75vh; /* Give a bit more vertical breathing room on mobile */
    transform: scale(1.35); /* Stronger zoom on mobile to hide stubborn letterboxing */
  }
  .hero__inner {
    padding: 40px 24px 40px 24px; /* Much less side padding for mobile screens */
  }
  .hero__content h1 {
    font-size: 2.25rem; /* More proportionate mobile heading size */
    line-height: 1.2;
  }
  .hero__content p {
    font-size: 1rem; /* Proportional mobile body text */
    margin-bottom: 24px;
  }
  .programs__grid {
    grid-template-columns: 1fr;
  }
  .footer__grid {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 40px;
  }
  .footer__brand p {
    margin-left: auto;
    margin-right: auto;
  }
  .footer__links ul {
    align-items: center;
  }
  .footer__links a {
    justify-content: center;
    font-size: 0.85rem;
  }
  .footer__bottom {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }
  
  .mobile-center-text,
  .mobile-center-text h2,
  .mobile-center-text h3,
  .mobile-center-text p {
    text-align: center !important;
  }
  .mobile-center-text p {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  
  .mobile-subheading {
    display: block;
    font-size: 1.5rem;
    font-weight: 500;
    margin-top: 12px;
  }
  
  .ecosystem__award-icon {
    margin-top: 2px !important;
  }
  
  .ecosystem__award-icon--diploma {
    margin-top: 2px !important;
  }
  
  .ecosystem__award-icon--badge {
    margin-top: 4px !important;
  }
}

/* --- News Section --- */
.news {
    padding: 80px 0;
    background: linear-gradient(135deg, rgba(0, 114, 206, 0.15) 0%, rgba(1, 54, 61, 0.15) 100%);
}
.news__inner {
    display: flex;
    flex-direction: column;
    gap: 40px;
}
@media (min-width: 992px) {
    .news__inner {
        flex-direction: row;
        align-items: center;
    }
}
.news__image-wrapper {
    flex: 1;
    min-height: 300px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}
.news__image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.news__content {
    flex: 1.2;
    padding: 40px;
}
@media (min-width: 992px) {
    .news__content {
        padding: 60px;
    }
}
.news__tag {
    display: inline-block;
    background-color: rgba(0, 114, 206, 0.1);
    color: var(--primary-color, #0072CE);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 20px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.news__title {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    margin-bottom: 20px;
    line-height: 1.2;
    color: var(--text-dark);
}
.news__title .highlight-text {
    display: inline-block;
    font-size: clamp(1.25rem, 2vw, 1.75rem);
    font-weight: 800;
    margin-bottom: 8px;
    background: linear-gradient(135deg, var(--primary-color, #0072CE), #00a160);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.news__content p {
    font-size: 1.125rem;
    color: var(--text-body);
    margin-bottom: 30px;
    line-height: 1.7;
}
.news__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    background-color: var(--primary-color, #0072CE);
    color: #ffffff !important;
    padding: 14px 28px;
    border-radius: 100px;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    text-decoration: none;
}
.news__btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 114, 206, 0.3);
    background-color: #005fa3;
}
.news__btn i {
    transition: transform 0.3s ease;
}
.news__btn:hover i {
    transform: translateX(4px);
}

/* --- FAQ ------------------------------------------------------------------
   Modelled on the 21st.dev centred FAQ: small eyebrow, large heading, then
   tinted question bars with the answer revealed underneath. Rebuilt in plain
   CSS on this site's own tokens -- the original is a React/Tailwind component
   and this site has no build step. Teal replaces the reference's indigo. */
.faq {
  padding: 100px 0;
  background: var(--white);
  border-top: 1px solid rgba(3, 54, 61, 0.12);
}
.faq__header {
  max-width: 640px;
  margin: 0 auto 40px;
  text-align: center;
}
.faq__eyebrow {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-light);
  margin: 0 0 8px;
  letter-spacing: 0.02em;
}
.faq__header h2 {
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  color: var(--text-dark);
  margin: 0 0 16px;
  font-weight: 700;
  line-height: 1.15;
}
.faq__header p:not(.faq__eyebrow) {
  color: var(--text-light);
  font-size: 0.95rem;
  margin: 0;
}
.faq__list {
  max-width: 620px;
  margin: 0 auto;
}

/* Each row: a tinted bar, with the answer sitting below it on the page. */
.faq__item {
  margin-bottom: 12px;
}
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 18px;
  /* Deeper teal wash, and it fades to a faint tint rather than pure white, so
     the whole bar reads as shaded rather than only its left edge. */
  background: linear-gradient(to right, rgba(3, 54, 61, 0.16), rgba(3, 54, 61, 0.04));
  border: 1px solid rgba(3, 54, 61, 0.18);
  border-radius: 6px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--text-dark);
  cursor: pointer;
  list-style: none;               /* hide the default disclosure triangle */
  transition: border-color 0.2s ease;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { border-color: rgba(3, 54, 61, 0.28); }
.faq__q:focus-visible {
  outline: 3px solid var(--primary-color);
  outline-offset: 2px;
}
/* The sprite only carries left/right chevrons, so point it down and spin it
   through to up on open -- same motion as the reference's 180deg flip. */
.faq__chevron {
  flex-shrink: 0;
  color: var(--primary-color);
  transform: rotate(90deg);
  transition: transform 0.4s ease;
}
.faq__item[open] .faq__chevron { transform: rotate(270deg); }

/* <details> cannot itself be transitioned, but a nested grid row can go
   0fr -> 1fr, which animates the reveal on open. */
.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  padding: 0 18px;
  transition: grid-template-rows 0.4s ease, opacity 0.4s ease, padding 0.4s ease;
}
.faq__item[open] .faq__a {
  grid-template-rows: 1fr;
  opacity: 1;
  padding: 16px 18px 4px;
}
.faq__a-inner { overflow: hidden; }
.faq__a p {
  color: var(--text-light);
  line-height: 1.7;
  margin: 0 0 12px;
  font-size: 0.9rem;
}
.faq__a p:last-child { margin-bottom: 0; }
.faq__contact {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
}
.faq__contact li {
  color: var(--text-light);
  line-height: 1.7;
  margin-bottom: 4px;
  font-size: 0.9rem;
}
.faq__contact strong { color: var(--text-dark); }
.faq__a a {
  color: var(--primary-color);
  font-weight: 600;
  word-break: break-word;
}
@media (max-width: 767px) {
  /* The contact rows read "Label: value" on one line, which needs up to 373px
     inside a 295px column -- so the email ran to three lines and the two case
     management numbers to two. Dropping the label onto its own line hands each
     value the full width, and the address is scaled to fit what is left. */
  .faq__contact li { margin-bottom: 10px; }
  .faq__contact strong { display: block; }
  .faq__contact a[href^="mailto:"] {
    display: inline-block;
    font-size: clamp(9px, calc(4.44vw - 4.6px), 0.9rem);
    white-space: nowrap;
  }
  .faq { padding: 56px 0; }
  .faq__header { margin-bottom: 28px; }
  .faq__q { padding: 14px 16px; font-size: 0.9rem; }
  .faq__a { padding: 0 16px; }
  .faq__item[open] .faq__a { padding: 14px 16px 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .faq__chevron, .faq__a, .faq__q { transition: none; }
}

/* --- Contact cards --------------------------------------------------------
   The 44-character address needs ~360px on one line. In the desktop row layout
   the text column beside the icon is only 226px on a phone, so it wrapped —
   and the inline word-break:break-all split it mid-word, which is what looked
   broken. Stacking the card on mobile hands the text the card's full width,
   and the address is then scaled to fit that.
   !important is needed on two properties only: align-items and padding are set
   inline on the card, and inline styles beat the stylesheet. */
@media (max-width: 600px) {
  .contact-card {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 14px !important;
    padding: 18px !important;
  }
  .contact-card__email {
    display: block;
    font-size: clamp(10px, calc(4.44vw - 3.8px), 1rem);
    white-space: nowrap;
    word-break: normal;
  }
}

/* Instagram and LinkedIn glyphs are kept for visual balance but the accounts
   do not exist, so they are spans rather than links: not focusable, not
   announced as links, and no pointer cursor implying they do something. */
.footer__social--inactive {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.45;
  cursor: default;
}