/* ==========================================================================
   1. VARIABLES & DESIGN TOKENS
   ========================================================================== */
:root {
  /* Colors */
  --clr-primary-dark: #1E1E1E;
  /* Primary / Carbon Black */
  --clr-secondary: #FF4800;
  /* Secondary / Crimson Carrot */
  --clr-background: #EDF2F7;
  /* Primary / White Sparkle */
  --clr-shades-dark: #2E2E2E;
  /* Shades / Carbon Black */
  --clr-white: #FFFFFF;
  /* Pure White */
  --clr-secondary-light: #FF7F4D;
  /* Secondary / Light Orange */
  --bg-gradient-primary: linear-gradient(140deg, #FF7F4D 0.78%, #FF4800 99.96%);
  /* Main Orange Gradient */

  /* Typography */
  --ff-primary: 'Rethink Sans', sans-serif;

  /* Layout Options */
  --header-height: 5.5rem;
  --header-gutter: 0.5rem;
  /* Gap around floating header */
  --border-radius-pill: 999rem;
  --border-radius-24: 1.5rem;
  --transition-speed: 0.3s;
  --transition-easing: cubic-bezier(0.25, 1, 0.5, 1);

  /* Spacing & Layout Tokens */
  --container-max-width: 1200px;
  --container-padding: 3%;
  /* Mobile: 3% side padding */
  --section-spacing: 8rem;
}

html {
  scrollbar-gutter: stable;
  /* Crucial: ensures scrollbar space is reserved, preventing layout shift on hero completion */
}

@media screen and (max-width: 768px) {
  :root {
    --container-padding: 24px;
  }
}

/* ==========================================================================
   2. BASE STYLES
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--ff-primary);
  background-color: var(--clr-background);
  color: var(--clr-primary-dark);
  line-height: 1.37;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Custom Scrollbar Styles */
/* For Chrome, Safari, and newer versions of Edge */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: var(--clr-primary-dark);
}

::-webkit-scrollbar-thumb {
  background: var(--clr-secondary);
  border-radius: 10px;
  border: 2px solid var(--clr-primary-dark);
  /* Creates a nice 'floating' effect */
}

::-webkit-scrollbar-thumb:hover {
  background: var(--clr-secondary-light);
}

/* For Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--clr-secondary) var(--clr-primary-dark);
}

p,
li {
  font-size: 1rem;
  line-height: 1.37;
}

@media (min-width: 992px) {

  p,
  li {
    font-size: 1.125rem;
  }
}

h2 {
  text-wrap: balance;
}

/* Vertical Spacing Flow (Lobotomized Owl lite) */
p+p,
p+ul,
ul+p,
p+.btn,
.btn+p,
.about-card__content p+p,
.page-section__content p+p {
  margin-top: 1rem;
  /* Standard 16px space between paragraphs */
}

button {
  border: none;
  background: none;
  font-family: inherit;
  cursor: pointer;
}

ul {
  list-style: none;
}

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

/* Common Text Utilities */
.text--highlight {
  color: var(--clr-secondary);
}

.text--dark {
  color: var(--clr-primary-dark);
}

.text--white {
  color: var(--clr-white);
}

.text--bold {
  font-weight: 600;
}

/* ==========================================================================
   3. LAYOUT
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

@media screen and (max-width: 991px) {
  .container.px-8 {
    padding-inline: 8px;
  }
}

.section {
  padding-block: 6rem;
  width: 100%;
}

.section--first {
  padding-top: var(--section-spacing);
}

/* Remove bottom padding from the section wrapping info-card
   so the footer gap is controlled solely by footer margin-top */
.section:has(.info-card) {
  padding-bottom: 0;
}

/* ==========================================================================
   4. MODULES
   ========================================================================== */

/* --- TITLE MODULE --- */
.title {
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 0.85;
  font-size: clamp(2.25rem, 8vw, 5rem);
}

.title--hero {
  font-size: clamp(2rem, 8vw, 5rem);
  line-height: 0.95;
}

.title--section {
  font-size: 3rem;
  /* Mobile: 48px */
}

.title--compact {
  font-size: 2rem;
  /* Mobile: 32px */
}

.title--impact {
  font-size: clamp(3rem, 10vw, 7rem);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.04em;
  display: flex;
  flex-direction: column;
}

.title--highlight-large {
  font-size: clamp(3.5rem, 12vw, 5.5rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
  margin-bottom: 0.5rem;
}


/* --- BUTTON MODULE --- */
.btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 0.8rem 2rem;
  border-radius: var(--border-radius-pill);
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: all var(--transition-speed);
  font-family: var(--ff-primary);
}

.btn--primary {
  background-color: var(--clr-secondary);
  color: var(--clr-white);
}

.btn--primary:hover {
  background-color: #d13a00;
  /* Darker Crimson */
  transform: translateY(-0.125rem);
}

.btn--outline-dark {
  background-color: transparent;
  color: var(--clr-primary-dark);
  border: 1px solid var(--clr-primary-dark);
}

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

/* --- Utility Class --- */
.mb-24 {
  margin-bottom: 24px;
}
.mb-12 {
  margin-bottom: 12px;
}

/* --- HERO MODULE --- */
.hero {
  position: relative;
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  /* Vertical center */
  justify-content: flex-start;
  padding-bottom: var(--header-height);
  /* Ensure text isn't hidden under the navigation */
  overflow: hidden;
}

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

@keyframes hero-ken-burns {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(1.1);
  }
}

.hero__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(30, 30, 30, 0.5) 0%, rgba(30, 30, 30, 0.85) 100%);
  z-index: 2;
}

.hero__inner {
  position: relative;
  z-index: 3;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  /* Center horizontally/vertically */
}

/* Scroll Indicator */
.scroll-indicator {
  position: absolute;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 10;
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

.scroll-indicator__mouse {
  width: 22px;
  height: 38px;
  border: 2px solid white;
  border-radius: 12px;
  position: relative;
  display: flex;
  justify-content: center;
}

.scroll-indicator__wheel {
  width: 2px;
  height: 8px;
  background-color: white;
  border-radius: 2px;
  margin-top: 8px;
  animation: scrollWheel 1.5s ease-in-out infinite;
}

.scroll-indicator__arrow {
  animation: scrollArrow 1.5s ease-in-out infinite;
}

@keyframes scrollWheel {
  0% {
    transform: translateY(12px);
    opacity: 0;
  }

  30% {
    opacity: 1;
  }

  100% {
    transform: translateY(0);
    opacity: 0;
  }
}

@keyframes scrollArrow {
  0% {
    transform: translateY(0);
    opacity: 0.5;
  }

  50% {
    transform: translateY(5px);
    opacity: 1;
  }

  100% {
    transform: translateY(0);
    opacity: 0.5;
  }
}

@media (max-width: 768px) {
  .scroll-indicator {
    bottom: 80px;
    transform: translateX(-50%) scale(0.9);
  }
}

/* Base class for the text blocks inside Swiper */
.hero__text-panel {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  overflow-wrap: break-word;
  width: 100%;
}

/* Swiper Base Overrides */
.hero-swiper {
  --swiper-theme-color: var(--clr-secondary);
  z-index: 3;
}

.hero-swiper .swiper-button-prev,
.hero-swiper .swiper-button-next {
  color: #a0a0a0; /* Light grey default */
  opacity: 0.8;
  transition: all 0.3s ease;
}

.hero-swiper .swiper-button-prev:hover,
.hero-swiper .swiper-button-next:hover {
  opacity: 1;
  color: var(--clr-secondary);
}

.hero-swiper .swiper-pagination {
  bottom: 100px !important; /* Raised further to 100px for mobile visibility */
  z-index: 100 !important;
}

@media (min-width: 768px) {
  .hero-swiper .swiper-pagination {
    bottom: 40px !important; /* Keep desktop positioning clean */
  }
}

.hero-swiper .swiper-pagination-bullet {
  background: var(--clr-white);
  opacity: 0.5;
  transition: all 0.3s ease;
  border-radius: 999px;
}

.hero-swiper .swiper-pagination-bullet-active {
  background: var(--clr-secondary);
  opacity: 1;
  width: 25px; /* Pill effect */
}

@media (max-width: 768px) {
  .hero-swiper .swiper-button-prev,
  .hero-swiper .swiper-button-next {
    display: none;
  }
}

.hero__delayed-reveal {
  opacity: 0;
  display: inline-block;
  color: var(--clr-white);
}

.hero__subhead {
  color: #B3B3B3;
  font-size: clamp(.87rem, 3vw, .87rem);
  font-weight: 500;
  max-width: 40rem;
  line-height: 1.4;
  opacity: 0.95;
}

/* --- SPLIT TYPE MASKS --- */
.split-parent {
  overflow: hidden;
  display: block;
  padding-bottom: 0.5em; /* Expanded to 0.5em for deep descenders */
  margin-bottom: -0.5em; /* Offset the visual gap */
}
.split-child {
  display: inline-block;
  will-change: transform;
}

/* --- PAGE HERO MODULE --- */
.page-hero {
  padding-top: var(--header-height);
  padding-bottom: 6rem;
  background: linear-gradient(349deg, #EDF2F7 38.17%, #F5BDA6 98.76%);
  /* height: 100vh; */
  display: flex;
  align-items: center;
}

.page-hero--compact {
  height: auto;
  padding-top: calc(var(--header-height) + 4rem);
  padding-bottom: 0;
}

.page-hero__label {
  display: block;
  font-size: 0.875rem;
  letter-spacing: 0.1em;
  margin-bottom: 4rem;
  /* 64px */
}

.page-hero__title {
  margin-bottom: 4.8125rem;
  /* 77px */
}

@media (max-width: 991px) {
  .page-hero__title {
    font-size: 3rem;
    /* Mobile: 48px */
  }

  .page-hero {
    height: auto;
  }
}

.page-hero__intro {
  max-width: 45rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  /* Space between paragraphs: 16px */
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.6;
}

/* --- IMPACT STATEMENT MODULE --- */
.impact-word {
  will-change: transform, opacity;
}

.impact-word--highlight {
  color: var(--clr-secondary);
}


/* --- HEADER MODULE --- */
.header {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding-block: var(--header-gutter);
  /* Horizontal alignment handled by inner .container */
  z-index: 1000;
  transition: transform 0.4s var(--transition-easing);
}

/* Modifier to hide header when scrolling down to bottom sections */
.header--hidden {
  transform: translateY(calc(100% + var(--header-gutter)));
  /* Slide completely off-screen */
}

.header__inner {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* Keeps bar at bottom */
  background-color: var(--clr-primary-dark);
  border-radius: var(--border-radius-24);
  height: var(--header-height);
  padding: 0 1.5rem;
  box-shadow: 0 0.625rem 1.875rem rgba(0, 0, 0, 0.1);
  overflow: hidden;
  /* Hides internal nav initially */
  transition: height 0.6s var(--transition-easing),
    background-color 0.4s var(--transition-easing);
}

/* Open State for the Expanded Header */
.header__inner.is-open {
  height: 80vh;
}

/* Desktop override */
@media (min-width: 768px) {
  :root {
    --container-padding: 5%;
    /* Desktop: restore to 5% side padding */
  }

  .header__inner.is-open {
    height: 60vh;
  }

  .header {
    padding-block: var(--header-gutter);
    /* No padding-inline — .container wrapper handles it */
  }
}

/* Header Bottom Bar container */
.header__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: var(--header-height);
  width: 100%;
  flex-shrink: 0;
}

.header__logo-link {
  display: flex;
  align-items: center;
  position: relative;
  text-decoration: none;
}

.header__logo {
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

/* Header dynamic subtext shown on empty slides */
.header__logo-subtext {
  position: absolute;
  top: 100%;
  left: 0;
  font-size: 13px;
  font-weight: 500;
  color: #B3B3B3;
  letter-spacing: 0.1em;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  white-space: nowrap;
  pointer-events: none;
  margin-top: 2px;
}

.header--show-subtext .header__logo-subtext {
  opacity: 1;
  transform: translateY(0);
}

/* --- LEADERSHIP BIO LINKEDIN LINK --- */
.bio-linkedin-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--clr-secondary);
  text-decoration: none;
  margin-top: 1rem;
  transition: opacity 0.3s ease;
}
.bio-linkedin-link:hover {
  opacity: 0.8;
}
.bio-linkedin-link svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

/* --- NAV TOGGLE (HAMBURGER) MODULE --- */
.nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;
  /* Gap between lines */
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: linear-gradient(140deg, #FF7F4D 0.78%, #FF4800 99.96%), #FF4800;
  transition: transform var(--transition-speed), background var(--transition-speed);
  z-index: 1001;
}

/* Hover State */
.nav-toggle:hover {
  transform: scale(1.05);
}

.nav-toggle__line {
  display: block;
  width: 1.5rem;
  height: 0.125rem;
  background-color: var(--clr-primary-dark);
  border-radius: 0.125rem;
  transition: transform var(--transition-speed), background-color var(--transition-speed), opacity var(--transition-speed);
}

/* Open state for Hamburger Parent */
.nav-toggle.is-active {
  background: var(--clr-background);
  /* White */
}

/* Open state for Hamburger Lines (The X) */
.nav-toggle.is-active .nav-toggle__line {
  background-color: var(--clr-secondary);
  /* Crimson Carrot */
}

.nav-toggle.is-active .nav-toggle__line:nth-child(1) {
  transform: translateY(0.1875rem) rotate(45deg);
}

.nav-toggle.is-active .nav-toggle__line:nth-child(2) {
  transform: translateY(-0.1875rem) rotate(-45deg);
}


/* --- NAV MODULE --- */
.nav {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: calc(100% - var(--header-height));
  width: 100%;
  padding: 1.5rem 0 0 0;
  overflow-y: auto;
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE and Edge */

  /* Hidden State Initially */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--transition-easing),
    visibility 0.4s;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.nav::-webkit-scrollbar {
  display: none;
}

/* Show nav layout when header is expanded */
.header__inner.is-open .nav {
  opacity: 1;
  visibility: visible;
}

@media (min-width: 768px) {
  .nav {
    padding-inline: 4rem;
  }
}

/* Nav List */
.nav__list {
  display: flex;
  flex-direction: row;
  gap: 2rem;
  justify-content: space-between;
  align-items: flex-start;
  margin-block: auto;
}

@media screen and (max-width: 991px) {
  .nav__list {
    flex-direction: column;
  }
}

.nav__item {
  transform: translateX(-5rem);
  opacity: 0;
  transition: opacity 0.5s var(--transition-easing), transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  cursor: pointer;
}

/* Animating items when header expands (sliding left to right) */
.header__inner.is-open .nav__item {
  opacity: 1;
  transform: translateX(0);
}

/* Stagger transition delays (Bottom sequence to top) */
.header__inner.is-open .nav__item:nth-child(5) {
  transition-delay: 0.1s;
}

.header__inner.is-open .nav__item:nth-child(4) {
  transition-delay: 0.15s;
}

.header__inner.is-open .nav__item:nth-child(3) {
  transition-delay: 0.2s;
}

.header__inner.is-open .nav__item:nth-child(2) {
  transition-delay: 0.25s;
}

.header__inner.is-open .nav__item:nth-child(1) {
  transition-delay: 0.3s;
}

/* Nav Links & Subtext */
.nav__link {
  font-size: 3.5rem;
  font-weight: 500;
  letter-spacing: -0.04em;
  color: var(--clr-white);
  transition: color var(--transition-speed);
  display: inline-block;
  line-height: 1;
  position: relative;
}

.nav__subtext {
  display: block;
  font-size: 0.9rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 0.1rem;
  transition: color var(--transition-speed);
}

/* Hover Effect for Links & Tagline */
.nav__item:hover .nav__link {
  color: var(--clr-secondary);
}

.nav__item:hover .nav__subtext {
  color: var(--clr-white);
}

/* Active state — current page highlight (footer nav) */
.nav__item.is-active .nav__link,
.footer__nav-item.is-active .nav__link {
  color: var(--clr-secondary);
}

.nav__item.is-active .nav__subtext,
.footer__nav-item.is-active .nav__subtext {
  color: var(--clr-white);
}

/* --- ABOUT CARD MODULE --- */
.about-sections {
  display: flex;
  flex-direction: column;
}



.about-card {
  width: 100%;
}

@media screen and (min-width: 992px) {
  .about-card--viewport {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
}

.about-card--viewport {
  display: flex;
  align-items: center;
  padding: 104px 0px;
}


.about-card--primary {
  background: var(--bg-gradient-primary);
  color: var(--clr-primary-dark);
}

.about-card--primary .container {
  display: flex;
  flex-direction: column;
}

.about-card--light {
  background-color: var(--clr-background);
  color: var(--clr-primary-dark);
}

.about-card__section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  /* 24px — between heading and body on mobile */
}

.about-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  /* Space between content blocks: 24px */
  width: 100%;
}

/* CTA button gets extra spacing — total 48px from last text line */
.about-card__body .btn {
  margin-top: 1.5rem;
}

@media (min-width: 992px) {
  .about-card__section {
    display: grid;
    grid-template-columns: 35% 1fr;
    gap: 8rem;
    align-items: start;
    /* padding-block: 8rem; */
  }

  .about-card__section .title--section {
    position: sticky;
    top: 6rem;
    margin-bottom: 0;
    font-size: clamp(2.5rem, 8vw, 3.5rem);
  }

  .about-card__body {
    max-width: 50rem;
    gap: 3rem;
  }
}

/* Page Section Grid Layout (for inside pages) */
.page-section__grid {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.page-section__bio-header {
  display: flex;
  flex-direction: column;
}

.page-section__bio-img {
  width: 140px;
  height: 140px;
  object-fit: cover;
  margin-bottom: 1rem;
}

@media (min-width: 992px) {
  .page-section__grid {
    display: grid;
    grid-template-columns: 35% 1fr;
    gap: 8rem;
    align-items: start;
  }

  .page-section__grid .page-section__title {
    position: sticky;
    top: 15rem;
    /* Adjust for sub-nav visibility */
    margin-bottom: 0;
    font-size: 3rem;
    /* Desktop: 48px */
  }

  .page-section__bio-name {
    font-size: inherit;
    margin-bottom: 0;
  }

  .page-section__bio-img {
    width: 200px;
    height: 200px;
    object-fit: cover;
    margin-bottom: 1.5rem;
  }

  .page-section__bio-designation {
    margin-top: 1rem;
    text-transform: uppercase;
    font-size: 0.875rem;
    line-height: 1.4;
  }

  .page-section__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3rem;
    max-width: 60rem;
  }
}

.about-card__content {
  display: flex;
  flex-direction: column;
}

.about-card__list {
  list-style: disc;
  padding-left: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.about-card__list li {
  padding-left: 0.25rem;
}

/* --- FAQ MODULE --- */
.faq__title {
  margin-bottom: 1.5rem;
  /* Standard 24px space */
}

.faq__list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.faq__item {
  background-color: rgba(30, 30, 30, 0.08);
  /* Light grey for closed */
  border-radius: var(--border-radius-24);
  overflow: hidden;
  transition: background-color var(--transition-speed), transform var(--transition-speed);
  scroll-margin-top: 100px;
  /* Accounts for header height when smooth scrolling */
}

.faq__header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem;
  /* Standard: 24px */
  text-align: left;
  transition: all var(--transition-speed);
}

.faq__question {
  font-size: 1rem;
  /* 16px — fixed for both mobile and desktop */
  font-weight: 600;
  color: var(--clr-primary-dark);
  max-width: 88%;
  line-height: 1.3;
  transition: color var(--transition-speed);
}

.faq__item .faq__question h2 {
  color: var(--clr-primary-dark);
  font-size: 1.6rem;
  padding-bottom: 0.5rem;
}

.faq__item .faq__question p {
  color: var(--clr-secondary);
  font-size: 1rem;
}

@media (max-width: 991px) {
  .faq__item .faq__question h2 {
    font-size: 1.3rem;
  }

  .faq__item .faq__question p {
    font-size: 0.9rem;
  }
}

/* FAQ Icon (+ / -) */
.faq__icon {
  position: relative;
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
}

.faq__icon-line {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--clr-secondary);
  border-radius: 2px;
  transition: transform var(--transition-speed), background-color var(--transition-speed);
}

/* Horizontal line */
.faq__icon-line:first-child {
  width: 1.25rem;
  height: 2.5px;
}

/* Vertical line (disappears for minus) */
.faq__icon-line:last-child {
  width: 2.5px;
  height: 1.25rem;
}

.faq__item.is-open .faq__icon-line:last-child {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}

/* Body / Answer */
.faq__body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s var(--transition-easing);
}

.faq__item.is-open .faq__body {
  max-height: 2500px;
  transition: max-height 0.8s ease-in-out;
}

.faq__content {
  padding: 1.5rem;
  /* Standard: 24px */
  color: var(--clr-primary-dark);
  line-height: 1.6;
  font-size: 0.875rem;
  /* 14px */
}

.faq__content ul {
  list-style: disc;
  padding-left: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-left: 15px;
}

.faq__content ul li {
  padding-left: 0.25rem;
}

.faq__content h2 {
  padding: 20px 0;
}

.faq__item:not(.is-open) .faq__content {
  color: var(--clr-primary-dark);
}

.info-card {
  background-color: var(--clr-secondary-light);
  color: var(--clr-primary-dark);
  border-radius: var(--border-radius-24);
  /* 24px */
  padding: 5.5rem 2rem 5.5rem;
}

.info-card .container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  /* Space between title and content: 24px */
}

.info-card__title {
  font-size: 2rem;
  /* Mobile: 32px */
  line-height: 1.1;
  /* Space handled by parent flex gap */
}

.info-card__title--no-margin {
  margin-bottom: 0 !important;
}

.info-card__content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  /* Standard paragraph spacing: 16px */
}

.info-card__text {
  font-weight: 400;
  line-height: 1.5;
}

.info-card__highlight {
  margin-top: 1rem;
}


.info-card__highlight-subtitle {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
}

.info-card .btn {
  width: fit-content;
}

@media (min-width: 992px) {
  .info-card__highlight-subtitle {
    font-size: 1.25rem;
  }

  .info-card {
    padding: 6rem 5rem;
  }

  .info-card__title {
    font-size: clamp(2.5rem, 8vw, 3.5rem);
  }
}

/* --- PAGE SECTION MODULE --- */
.page-section {
  background-color: var(--clr-background);
  position: relative;
}

.page-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - (var(--container-padding) * 2));
  max-width: var(--container-max-width);
  border-top: 1px dashed var(--clr-secondary);
}

.page-section__title {
  margin-bottom: 0;
  /* Rely on container gap for spacing to avoid doubling */
}

.page-section__content {
  max-width: 45rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.page-section__list {
  list-style: disc;
  padding-left: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* --- SUB NAV MODULE --- */
.sub-nav {
  position: fixed;
  bottom: 0;
  left: 50%;
  width: calc(100% - 48px);
  padding-block: var(--header-gutter);
  /* Horizontal alignment handled by inner .container */
  z-index: 1100;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 100px);
  /* transform: translateY(100px); */
  transition: transform 0.6s var(--transition-easing),
    opacity 0.4s ease,
    visibility 0.4s;
}

.sub-nav.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  /* Allow clicks when visible */
  transform: translate(-50%, 0);
}

.sub-nav .container {
  background-color: var(--clr-primary-dark);
  height: var(--header-height);
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  padding: 0 8px;
  overflow: hidden;
}

@media (min-width: 768px) {
  .sub-nav {
    padding-block: var(--header-gutter);
    /* No padding-inline — .container handles it */
  }
}

.sub-nav__container {
  display: flex;
  gap: 0.5rem;
  background-color: transparent;
  padding: 0;
  border-radius: 16px;
  width: fit-content;
  overflow-x: auto;
  scrollbar-width: none;
  max-width: 100%;
}

.sub-nav__container::-webkit-scrollbar {
  display: none;
}

.sub-nav__item {
  padding: 0.6rem 1.25rem;
  border-radius: 16px;
  font-weight: 600;
  font-size: 0.825rem;
  white-space: normal;
  width: 10.5rem;
  /* 168px standard width */
  flex-shrink: 0;
  min-height: 4.5rem;
  transition: all var(--transition-speed);
  color: var(--clr-white);
  background-color: #333333;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.2;
}

@media screen and (max-width: 991px) {
  .sub-nav__item {
    width: 45%;
  }
}

.sub-nav__item.is-active {
  background-color: var(--clr-secondary);
  color: #000000;
  /* Dark text for highlighted orange */
}

.sub-nav__item:not(.is-active):hover {
  background-color: #444444;
  color: var(--clr-white);
}

/* --- FORM MODULE --- */
.engagement-form {
  /* max-width: 60rem; */
  width: 100%;
  margin-top: 4rem;
  background-color: #0b0b0b;
  /* Slightly darker for more pop */
  padding: 4rem;
  border-radius: var(--border-radius-24);
  color: var(--clr-white);
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

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

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  position: relative;
}

.form-group--full {
  grid-column: 1 / -1;
}

.form-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--clr-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
}

.form-label .required {
  color: var(--clr-secondary);
  margin-left: 0.25rem;
}

.form-input,
.form-textarea {
  width: 100%;
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  color: var(--clr-white);
  font-family: inherit;
  font-size: 1rem;
  transition: all var(--transition-speed);
}

/* Radio buttons styling */
.radio-group {
  display: flex;
  gap: 2rem;
  padding: 0.5rem 0;
}

.radio-label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  font-size: 1rem;
  color: var(--clr-white);
  user-select: none;
  transition: color 0.3s ease;
}

.radio-label:hover {
  color: var(--clr-secondary);
}

.radio-label:hover .radio-custom {
  border-color: var(--clr-secondary);
  transform: scale(1.08);
}

.radio-label input {
  display: none;
}

.radio-custom {
  width: 22px;
  height: 22px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  /* Circular */
  position: relative;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
}

.radio-label input:checked+.radio-custom {
  border-color: var(--clr-secondary);
}

.radio-label input:checked+.radio-custom::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  width: 12px;
  height: 12px;
  background-color: var(--clr-secondary);
  border-radius: 50%;
  animation: radioScale 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes radioScale {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }

  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}

/* Prefix wrapper styling */
.input-prefix-wrapper {
  display: flex;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  overflow: hidden;
  transition: all var(--transition-speed);
}

.input-prefix {
  padding-left: 1.25rem;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 500;
  white-space: nowrap;
  /* Fix for prefix alignment issue */
  display: flex;
  align-items: center;
  line-height: 1;
}

.input-prefix-wrapper .form-input {
  background-color: transparent;
  border: none;
  padding-left: 0.5rem;
}

.form-group.has-error .input-prefix-wrapper {
  border-color: #ff4d4d;
}

.input-prefix-wrapper:focus-within {
  border-color: var(--clr-secondary);
  background-color: rgba(255, 255, 255, 0.08);
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: rgba(255, 255, 255, 0.3);
  font-weight: 400;
}

.form-input:hover,
.form-textarea:hover,
.input-prefix-wrapper:hover {
  background-color: rgba(255, 255, 255, 0.08);
}

.form-input:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--clr-secondary);
  background-color: rgba(255, 255, 255, 0.08);
}

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

.form-note {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
  text-align: right;
}

.error-msg {
  font-size: 0.75rem;
  color: #ff4d4d;
  display: none;
  font-weight: 500;
}

.form-group.has-error .error-msg {
  display: block;
}

.form-group.has-error .form-input,
.form-group.has-error .form-textarea {
  border-color: #ff4d4d;
}

.form-submit {
  margin-top: 1rem;
  border: none;
  cursor: pointer;
}

@media (max-width: 768px) {
  .engagement-form {
    padding: 1.5rem;
    margin-top: 2rem;
  }
}

/* --- FOOTER MODULE --- */
.footer {
  margin-top: 8px;
  /* Mobile gap between info-card and footer: 8px */
  background-color: var(--clr-primary-dark);
  color: var(--clr-white);
  padding: 4rem 2rem;
  /* Container wrapper handles width & centering */
  border-radius: var(--border-radius-24);
  /* 24px */
  margin-bottom: var(--header-gutter);
  position: relative;
  z-index: 1100;
}

.footer__inner {
  display: flex;
  flex-direction: column;
  gap: 4rem;
}

/* Footer Nav */
.footer__nav {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.footer__nav-item:hover .nav__link {
  color: var(--clr-secondary);
}

.footer__nav-item:hover .nav__subtext {
  color: var(--clr-white);
}

/* Socials */
.footer__socials {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  color: #D1D5DB;
  /* light gray for distinction, or you can use rgba */
  font-size: 1.125rem;
  margin-top: 1rem;
}

.footer__social-link {
  transition: color var(--transition-speed);
}

.footer__social-link:hover {
  color: var(--clr-secondary);
}

/* Footer Middle */
.footer__middle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer__logo {
  width: 210px;
}

/* Scroll To Top Button */
.footer__scroll-top {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--clr-white);
  transition: all var(--transition-speed);
}

.footer__scroll-top:hover {
  background-color: var(--clr-white);
  color: var(--clr-primary-dark);
}

/* Footer Bottom (Copyright / Legal) */
.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.6;
}

.footer__legal {
  text-align: right;
}

.footer__legal a {
  transition: color var(--transition-speed);
}

.footer__legal a:hover {
  color: var(--clr-white);
}

@media (min-width: 992px) {
  .footer {
    padding: 6rem 5rem 4rem;
    border-radius: var(--border-radius-24);
    /* 24px — consistent with info-card */
    margin-top: 16px;
    /* Desktop gap between info-card and footer: 16px */
  }

  .footer__inner {
    gap: 5rem;
  }

  .footer__nav {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    gap: 2rem;
  }

  .footer__nav .nav__link {
    font-size: 2.5rem;
    cursor: pointer;
  }


  .footer__nav-item {
    flex: 1;
  }

  .footer__socials {
    display: flex;
    gap: 4rem;
    margin-top: 0;
    padding: 0;
  }

  .footer__middle {
    margin-top: 0;
    padding-bottom: 0;
    border-bottom: none;
  }

  .footer__bottom {
    padding-top: 0;
  }
}

/* --- AUDIO PRONUNCIATION BUTTON --- */
.pronunciation-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.audio-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: #f6cbb7; /* Matches the soft peach orange in the image */
  color: var(--clr-primary-dark);
  transition: transform var(--transition-speed), background-color var(--transition-speed);
}

.audio-btn:hover {
  background-color: #f1b397;
  transform: scale(1.05);
}

.audio-btn svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}
/* Hero Slide Typographic Brand Lockup Scalers */
.hero__title-dot {
  font-size: 0.45em;
  display: inline-block;
  vertical-align: middle;
  margin: 0 0.1em;
  transform: translateY(-0.15em);
}
.hero__title-svg {
  height: 6em;
  width: auto;
  display: block;
}

@media screen and (max-width: 768px) {
  .hero__title-svg {
    height: 4em;
  }
}

@media screen and (max-width: 480px) {
  .hero__title-svg {
    height: 3em;
  }
}