/* EUNOIA INFOGRAPHIC */

/* FONTS*/
@import url("https://fonts.googleapis.com/css2?family=Lexend:wght@200;300;400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Love+Light&display=swap");

html {
  scroll-behavior: smooth;
  font-size: 100%; /* 1rem = 16px */
}

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

/* Root */
:root {
  /* Layout */
  --page-max: 120rem;       /* ~1920px */
  --shell-padding-x: 7.5rem;/* ~120px */
  --shell-padding-y: 5rem;  /* ~80px */

  /* Colors */
  --bg: #000000;
  --white: #ffffff;

  --magenta: #d10ea7;
  --red-main: #ec093a;
  --orange-main: #ff6200;
  --yellow-main: #cfb832;
  --green-main: #1cbe00;
  --blue-main: #229acc;
  --blue-dark: #273bcc;
  --purple-main: #7a3ecc;
  --orange-alt: #f28416;
  --teal-main: #299eab;
  --red-alt: #fd093d;
  --black-main: #000000;
	
  --purple: var(--purple-main);

  /* Shadows */
  --shadow-soft: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.25);
  --shadow-strong: 0 1.125rem 2.5rem rgba(0, 0, 0, 0.45);

  
  --radius-card-xl: 6.75rem; /* ~109px */
  --radius-pill: 2.5rem;
  --radius-form: 2rem;

  /* Hero metrics (converted from px) */
  --rail-w: 26.25rem;       /* 420px */
  --hero-h: 46.5rem;        /* 743px */
  --hero-min-h: 35rem;      /* 560px */
  --headline-w: 65.125rem;  /* 1042px */
  --paint-w: 94rem;         /* 1504px */
  --paint-h: 30.75rem;      /* 492px */
  --search-w: 21.375rem;    /* 342px */
  --search-h: 3.3125rem;    /* 53px */
  --ticker-h: 3.8125rem;    /* 61px */
}

/* Base body styles */
body {
  min-height: 100vh;
  background: var(--bg);
  color: var(--white);
  font-family: "Lexend", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  overflow-x: hidden;
}

/* Basic section shell used across the page */
section {
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  background: var(--bg);
}

/* Reusable text helpers */
.heading-xl {
  font-family: "Lexend", system-ui, sans-serif;
  font-weight: 400;
}

.text-body {
  font-family: "Lexend", system-ui, sans-serif;
  font-weight: 300;
}

/* SECTION 1 — HERO */

.hero {
  position: relative;
  height: var(--hero-h);
  min-height: var(--hero-min-h);
  margin-inline: auto;
  overflow: hidden;
}

/* Left rail: logo + nav */
.rail {
  position: absolute;
  inset-block: 0;
  left: 0;
  width: var(--rail-w);
  display: grid;
  grid-template-rows: auto 1fr;
  padding: 2.5rem 2rem;
  gap: 2rem;
}

.logo img {
  width: 10.9375rem; /* 175px */
  height: auto;
  display: block;
}

/* Side navigation */
.side-nav ul {
  list-style: none;
  display: grid;
  gap: 1.5rem;
  margin-top: 0.5rem;
}

.side-nav a {
  font-family: "Lexend", system-ui, sans-serif;
  font-size: 1.25rem;
  font-weight: 200;
  line-height: 1.1;
  color: var(--white);
  text-decoration: none;
  opacity: 0.95;
  transition: color 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}

.side-nav a:hover,
.side-nav a.is-active {
  color: var(--purple-main);
  opacity: 1;
  transform: translateX(0.125rem);
}

.rail-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 0.0625rem; /* 1px */
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.12),
    rgba(255, 255, 255, 0.06),
    rgba(255, 255, 255, 0.12)
  );
}

/* Search */
.search {
  position: absolute;
  top: 2.375rem;   /* 38px */
  right: 1.75rem;  /* 28px */
  width: min(92vw, var(--search-w));
  height: var(--search-h);
  border-radius: 0.375rem;
  border: 0.0625rem solid var(--white);
  display: flex;
  align-items: center;
  padding-inline: 1.125rem;
  gap: 0.5rem;
}

.search input {
  flex: 1;
  height: 100%;
  background: transparent;
  border: 0;
  color: var(--white);
  font-family: "Lexend", system-ui, sans-serif;
  font-size: 1.25rem;
  font-weight: 200;
  text-align: right;
  padding-right: 1rem;
}

.search input::placeholder {
  color: rgba(255, 255, 255, 0.9);
}

.search button {
  width: 0;
  height: 0;
  border: 0;
  padding: 0;
  background: transparent;
}


/* Mandala */
.mandala-wrap {
  position: absolute;
  left: calc(var(--rail-w) + 0.625rem);
  top: 8.125rem;           /* 130px */
  width: 12.9rem;          /* 206.495px */
  height: 25.635rem;       /* 410.162px */
  display: grid;
  place-items: center;
  isolation: isolate;
}

.mandala {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter: hue-rotate(0deg) saturate(1.2);
  animation: hueFlow 3s linear infinite;
  transition: transform 0.35s ease, filter 0.35s ease;
  mix-blend-mode: screen;
}

@keyframes hueFlow {
  0% {
    filter: hue-rotate(0deg) saturate(1.2);
  }
  50% {
    filter: hue-rotate(180deg) saturate(1.25);
  }
  100% {
    filter: hue-rotate(360deg) saturate(1.2);
  }
}

/* Headline */
.hero-copy {
  position: absolute;
  top: 11.25rem; /* 180px */
  left: calc(var(--rail-w) + 22.5rem); /* 360px */
  width: min(56vw, var(--headline-w));
  overflow: hidden;
}

.hero-copy h1 {
  font-family: "Lexend", system-ui, sans-serif;
  font-weight: 400;
  font-size: 6.9375rem;  /* 111px */
  line-height: 6.25rem;  /* 100px */
  letter-spacing: -0.41625rem; /* -6.66px */
  color: var(--white);
  text-shadow: 0 0.125rem 0 rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: translateX(-100%);
  animation: slideIn 1.8s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

@keyframes slideIn {
  0% {
    opacity: 0;
    transform: translateX(-100%);
  }
  60% {
    opacity: 1;
    transform: translateX(10%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Bottom ticker */
.ticker {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--ticker-h);
  display: grid;
  place-items: center;
  background: linear-gradient(
    90deg,
    #86129a 3.37%,
    #333990 21.63%,
    #636bdc 51.44%,
    #71a792 87.02%
  );
  overflow: hidden;
}

.ticker p {
  width: max-content;
  color: #fff;
  font-family: "Lexend", system-ui, sans-serif;
  font-size: 1.625rem; /* 26px */
  font-weight: 300;
  letter-spacing: 0.065rem; /* 1.04px */
  white-space: nowrap;
  animation: marquee 25s linear infinite;
  padding-left: 100%;
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

/* SECTION 2 — WHAT IS ART THERAPY */

.what-is {
  padding: var(--shell-padding-y) var(--shell-padding-x) 5.625rem;
  min-height: 74.0625rem; /* 1185px */
  display: flex;
  justify-content: center;
}

.what-is__inner {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Main title */
.what-is__title {
  color: var(--white);
  font-family: "Lexend", system-ui, sans-serif;
  font-size: 4.5rem;
  font-weight: 400;
  line-height: 1.2;
  text-align: center;
}

/* 3-column layout */
.what-is__grid {
  width: 100%;
  margin-top: 5rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 5rem;
}

.what-is__col {
  display: flex;
  flex-direction: column;
  color: var(--white);
}

/* Left column — ART */
.what-is__art-heading {
  display: flex;
  flex-direction: column;
  margin-bottom: 1.5rem;
}

.what-is__art-word {
  display: block;
  width: 14.625rem;   /* 234px */
  height: 5.5625rem;  /* 89px */
  font-family: "Lexend", system-ui, sans-serif;
  font-size: 6rem;
  font-weight: 400;
  line-height: 1.39;
  letter-spacing: -0.12rem;
}

.what-is__pronunciation {
  display: block;
  width: 17.1875rem;  /* 275px */
  height: 5.3125rem;  /* 85px */
  font-family: "Lexend", system-ui, sans-serif;
  font-size: 2.5rem;
  font-weight: 300;
  line-height: 1.39;
}

/* “noun” label */
.what-is__label {
  margin-bottom: 0.75rem;
  font-family: "Lexend", system-ui, sans-serif;
  font-size: 1.125rem;
  font-weight: 300;
}

/* Body text */
.what-is__body {
  width: 16.5rem; /* 264px */
  font-family: "Lexend", system-ui, sans-serif;
  font-size: 1.5rem;
  font-weight: 200;
  line-height: 1.37;
  letter-spacing: 0.09rem; /* 1.44px */
}

.what-is__body--therapy {
  width: 20rem; /* 320px */
}

/* Icon under art text */
.what-is__icon {
  margin-top: 1.75rem;
}

.what-is__icon img {
  width: 6rem;
  height: auto;
}

/* Center: mandala stack */
.what-is__col--mandala {
  align-items: center;
  justify-content: center;
}

.what-is__mandala-stack {
  position: relative;
  width: 40.1875rem; /* 643px */
  height: 37.9375rem;/* 607px */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Mandala (rotating) */
.what-is__mandala {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: contain;
  animation: rotateCW 42s linear infinite;
  transform-origin: center center;
}

/* Text circle (rotating opposite) */
.what-is__circle {
  position: absolute;
  width: 24.1875rem; /* 387px */
  height: 24.1875rem;
  object-fit: contain;
  animation: rotateCCW 55s linear infinite;
  transform-origin: center center;
}

/* Head with heart/chaos */
.what-is__head {
  position: absolute;
  width: 12rem;  /* ~192px */
  height: 14.5rem; /* ~232px */
  object-fit: contain;
}

@keyframes rotateCW {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes rotateCCW {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}

/* Right column — THERAPY */
.what-is__therapy-heading {
  display: flex;
  flex-direction: column;
  margin-bottom: 1.125rem;
}

.what-is__therapy-word {
  width: 26.75rem; /* 428px */
  height: 5.375rem;/* 86px */
  font-family: "Lexend", system-ui, sans-serif;
  font-size: 6rem;
  font-weight: 400;
  line-height: 6.25rem;
  letter-spacing: -0.12rem;
}

.what-is__therapy-pronunciation {
  width: 17.946rem; /* 287.142px */
  height: 6.25rem;  /* 100px */
  font-family: "Lexend", system-ui, sans-serif;
  font-size: 2.5rem;
  font-weight: 300;
  line-height: 6.25rem;
}

.what-is__therapy-icon {
  margin-bottom: 0.75rem;
}

.what-is__therapy-icon img {
  width: 8.085rem;  /* 129.368px */
  height: 10.939rem;/* 175.018px */
  object-fit: contain;
}

/* Bottom quote */
.what-is__quote {
  margin-top: 6.875rem; /* 110px */
  width: 100%;
  max-width: 70.3125rem; /* 1125px */
  color: var(--white);
  text-align: center;
  font-family: "Love Light", cursive;
  font-size: 3.8125rem; /* 61px */
  font-weight: 400;
  line-height: 5.0625rem; /* 81px */
  letter-spacing: 0.305rem; /* 4.88px */
}

/* SECTION 3 — WHY USE ART THERAPY */

.why-art {
  padding: 5.625rem var(--shell-padding-x) 7.5rem;
  display: flex;
  justify-content: center;
}

.why-art__inner {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Title */
.why-art__title {
  width: 100%;
  max-width: 75.5625rem; /* 1209px */
  color: var(--white);
  text-align: center;
  font-family: "Lexend", system-ui, sans-serif;
  font-size: 6.1875rem; /* 99px */
  font-weight: 400;
  line-height: 6.25rem;
}

/* Cards grid */
.why-art__grid {
  width: 100%;
  margin-top: 5.625rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  justify-items: center;
  gap: 2.5rem;
}

/* Base card */
.why-card {
  box-sizing: border-box;
  width: 24.16rem;      /* 386.519px */
  height: 33.86rem;     /* 541.787px */
  border-radius: var(--radius-card-xl);
  border: 0.4375rem solid var(--white); /* 7px */
  background: var(--card-base, #555);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem;
  cursor: default;
  transition:
    background 0.5s ease,
    transform 0.4s ease,
    box-shadow 0.4s ease;
}

.why-card__inner {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Shared text layers */
.why-card__text {
  position: absolute;
  margin: 0;
  width: 17.5rem; /* 280px */
  max-width: 100%;
  color: var(--white);
  text-align: center;
  font-family: "Lexend", system-ui, sans-serif;
  font-size: 2.0625rem; /* 33px */
  font-weight: 500;
  line-height: 1.37;
  letter-spacing: 0.12375rem; /* 1.98px */
}

/* Default text */
.why-card__text--front {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Hover text */
.why-card__text--back {
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity 0.45s ease, transform 0.45s ease;
}

/* Hover state */
.why-card:hover,
.why-card:focus-within {
  background: var(--card-hover, #777);
  transform: translateY(-0.625rem);
  box-shadow: var(--shadow-strong);
}

.why-card:hover .why-card__text--front,
.why-card:focus-within .why-card__text--front {
  opacity: 0;
  transform: translateY(-1rem);
}

.why-card:hover .why-card__text--back,
.why-card:focus-within .why-card__text--back {
  opacity: 1;
  transform: translateY(0);
}

/* Color pairs */
.why-card--1 {
  --card-base: var(--magenta);
  --card-hover: var(--purple-main);
}

.why-card--2 {
  --card-base: var(--orange-main);
  --card-hover: var(--orange-alt);
}

.why-card--3 {
  --card-base: var(--blue-main);
  --card-hover: var(--teal-main);
}

.why-card--4 {
  --card-base: var(--red-main);
  --card-hover: var(--red-alt);
}

/* SECTION 4 — FACTS */

.facts {
  padding: 5rem 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.facts__inner {
  width: 84.6875rem;  /* 1629px */
  max-width: 100%;
  padding: 5rem 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

/* Row */
.facts__row {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  align-items: center;
  column-gap: 5rem;
  cursor: default;
  transition: transform 0.35s ease;
}

/* Left label */
.facts__label {
  display: flex;
  width: 43rem; /* 688px */
  max-width: 100%;
  flex-direction: column;
  justify-content: center;
  color: var(--white);
  text-align: center;
  font-family: "Lexend", system-ui, sans-serif;
  font-size: 5rem; /* 80px */
  font-weight: 400;
  line-height: 6.25rem; /* 100px */
  margin: 0;
  opacity: 0;
  transform: translate3d(-5rem, 2.5rem, 0);
  transition: opacity 0.9s ease-out, transform 0.9s ease-out;
}

/* Right detail */
.facts__detail {
  width: 55.9375rem; /* 895px */
  max-width: 100%;
  color: var(--white);
  font-family: "Lexend", system-ui, sans-serif;
  font-size: 2.5rem;  /* 40px */
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0.125rem; /* 2px */
  text-transform: capitalize;
  margin: 0;
  opacity: 0;
  transform: translate3d(5rem, 2.5rem, 0);
  transition: opacity 0.9s ease-out, transform 0.9s ease-out;
}

/* Visible (parallax style) */
.facts__row.is-visible .facts__label,
.facts__row.is-visible .facts__detail {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.facts__row.is-visible .facts__detail {
  transition-delay: 0.15s;
}

/* Row color themes */
.facts__row--1 { --facts-color: var(--orange-main); }
.facts__row--2 { --facts-color: var(--green-main); }
.facts__row--3 { --facts-color: var(--magenta); }

/* Hover */
.facts__row:hover {
  transform: translateY(-0.375rem);
}

.facts__row:hover .facts__label,
.facts__row:hover .facts__detail {
  color: var(--facts-color);
}

/* SECTION 5 — PERCENTAGES/ THE SCIENCE BEHIND IT */

.percentages {
  padding: 5.625rem 0 7.5rem;
  display: flex;
  justify-content: center;
}

.percentages__inner {
  width: 100%;
  max-width: 75rem; /* 1200px */
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Title */
.percentages__title {
  color: var(--white);
  text-align: center;
  font-family: "Lexend", system-ui, sans-serif;
  font-size: 6.1875rem; /* 99px */
  font-weight: 400;
  line-height: 6.25rem;
}

.percentages__subtitle {
  margin: 1.25rem 0 3.75rem;
  color: var(--white);
  text-align: center;
  font-family: "Lexend", system-ui, sans-serif;
  font-size: 1.625rem; /* 26px */
  font-weight: 300;
  letter-spacing: 0.1875rem; /* 3px */
}

/* Grid */
.percentages__grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 26.25rem; /* 420px */
  gap: 3.75rem 2.5rem;
  justify-items: center;
}

/* Card wrapper */
.perc-card {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Circle */
.perc-card__circle {
  width: 24.25rem;  /* 388px */
  height: 24.25rem;
  border-radius: 50%;
  border: 0.5rem solid var(--teal-main); /* 8px */
  background: var(--perc-color, #555);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding: 2rem;
  cursor: pointer;
  transition:
    transform 0.4s ease,
    box-shadow 0.4s ease,
    background 0.4s ease;
}

.perc-card__circle:hover,
.perc-card__circle:focus-visible {
  transform: translateY(-0.5rem);
  box-shadow: var(--shadow-strong);
  outline: none;
}

/* Shared text styles */
.perc-card__value,
.perc-card__text {
  position: absolute;
  display: flex;
  width: 21.5rem;   /* 344px */
  height: 9.875rem; /* 158px */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: var(--white);
  text-align: center;
  font-family: "Lexend", system-ui, sans-serif;
}

/* Percentage text */
.perc-card__value {
  font-size: 7.5rem; /* 120px */
  font-weight: 700;
  line-height: 1.1;
  text-transform: capitalize;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

/* Description text */
.perc-card__text {
  font-size: 1.5rem; /* 24px */
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.0875rem; /* 1.4px */
  opacity: 0;
  transform: translateY(1.125rem);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Swap content on hover/focus */
.perc-card__circle:hover .perc-card__value,
.perc-card__circle:focus-visible .perc-card__value {
  opacity: 0;
  transform: translateY(-1.125rem);
}

.perc-card__circle:hover .perc-card__text,
.perc-card__circle:focus-visible .perc-card__text {
  opacity: 1;
  transform: translateY(0);
}

/* Color mapping */
.perc-card--73 { --perc-color: var(--blue-main); }
.perc-card--75 { --perc-color: var(--orange-main); }
.perc-card--76 { --perc-color: var(--purple-main); }
.perc-card--77 { --perc-color: var(--magenta); }
.perc-card--79 { --perc-color: var(--red-main); }
.perc-card--81 { --perc-color: var(--yellow-main); }

/* SECTION 6 — WHO IT HELPS */

.who {
  padding: 5.625rem 0 7.5rem;
  display: flex;
  justify-content: center;
}

.who__inner {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Title + subtitle */
.who__title {
  color: var(--white);
  text-align: center;
  font-family: "Lexend", system-ui, sans-serif;
  font-size: 5.375rem; /* 86px */
  font-weight: 400;
  line-height: 6.25rem;
}

.who__subtitle {
  margin: 1.25rem 0 4.375rem;
  color: var(--white);
  text-align: center;
  font-family: "Lexend", system-ui, sans-serif;
  font-size: 1.75rem; /* 28px */
  font-weight: 300;
  letter-spacing: 0.15rem;
}

/* Base row */
.who-row {
  width: 100%;
  max-width: var(--page-max);
  height: 37.5rem; /* 600px */
  display: flex;
  align-items: stretch;
  overflow: hidden;
  opacity: 0;
  transform: translateY(2.5rem);
  animation: whoRowIn 1s ease-out forwards;
}

.who-row:nth-of-type(1) { animation-delay: 0.25s; }
.who-row:nth-of-type(2) { animation-delay: 0.65s; }
.who-row:nth-of-type(3) { animation-delay: 1.05s; }
.who-row:nth-of-type(4) { animation-delay: 1.45s; }

@keyframes whoRowIn {
  from {
    opacity: 0;
    transform: translateY(2.5rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Reverse layout */
.who-row--reverse {
  flex-direction: row-reverse;
}

/* Panels */
.who-row__panel {
  height: 100%;
}

.who-row__panel--image {
  flex: 1;
  min-width: 0;
}

.who-row__panel--image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Color panel */
.who-row__panel--color {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-inline: 8.75rem; /* 140px */
}

/* Rounded inner edges */
.who-row:not(.who-row--reverse) .who-row__panel--color {
  border-radius: 0 13.75rem 13.75rem 0; /* ~220px */
}

.who-row.who-row--reverse .who-row__panel--color {
  border-radius: 13.75rem 0 0 13.75rem;
  justify-content: flex-end;
}

/* Group colors */
.who-row__panel--children { background: var(--yellow-main); }
.who-row__panel--adults   { background: var(--red-main); }
.who-row__panel--seniors  { background: var(--orange-main); }
.who-row__panel--veterans { background: var(--blue-main); }

/* Text block */
.who-row__text {
  max-width: 27rem; /* ~432px */
}

.who-row__heading {
  margin: 0 0 0.625rem;
  color: var(--white);
  font-family: "Lexend", system-ui, sans-serif;
  font-size: 4.625rem; /* 74px */
  font-weight: 800;
  line-height: 5.5625rem; /* 89px */
}

.who-row__subheading {
  margin: 0;
  color: var(--white);
  font-family: "Lexend", system-ui, sans-serif;
  font-size: 1.875rem; /* 30px */
  font-weight: 300;
  line-height: 1.14;
  letter-spacing: 0.09375rem; /* 1.5px */
}

/* Bottom quote */
.who__quote {
  margin-top: 5.625rem; /* 90px */
  display: flex;
  width: 100%;
  max-width: var(--page-max);
  height: 9.5rem; /* 152px */
  flex-direction: column;
  justify-content: center;
  color: var(--white);
  text-align: center;
  font-family: "Love Light", cursive;
  font-size: 3.8125rem; /* 61px */
  font-weight: 400;
  line-height: 5.0625rem; /* 81px */
  letter-spacing: 0.305rem;
}

/*SECTION 7 — COLOR MEANING */

.colors-meaning {
  padding: 4.375rem 0 5rem;
  display: flex;
  justify-content: center;
}

.colors-meaning__inner {
  width: 100%;
  max-width: var(--page-max);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.colors-meaning__title {
  color: var(--white);
  text-align: center;
  font-family: "Lexend", system-ui, sans-serif;
  font-size: 4.4375rem; /* 71px */
  font-weight: 400;
  line-height: 5.625rem; /* 90px */
}

.colors-meaning__intro {
  margin: 1.25rem 0 3.125rem;
  max-width: 56.25rem; /* 900px */
  color: var(--white);
  text-align: center;
  font-family: "Lexend", system-ui, sans-serif;
  font-size: 1.5rem; /* 24px */
  font-weight: 300;
  line-height: 1.32;
  letter-spacing: 0.075rem;
}

/* Slider area */
.colors-meaning__slider {
  position: relative;
  width: 100%;
  max-width: var(--page-max);
  height: 53.75rem; /* 860px */
  overflow: hidden;
}

/* Single slide */
.color-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.4s ease;
}

.color-slide__center {
  position: relative;
  width: 100%;
  max-width: 75rem; /* 1200px */
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Circle */
.color-slide__circle {
  width: 22.5rem;  /* 360px */
  height: 22.5rem;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 5;
}

/* Color name (centered inside circle) */
.color-slide__name {
  color: var(--white);
  text-align: center;
  font-family: "Lexend", system-ui, sans-serif;
  font-size: 11.25rem; /* 180px */
  font-weight: 800;
  line-height: 0.85;
  letter-spacing: -0.5rem;
  text-shadow: 0.25rem 0.25rem 0.25rem rgba(0, 0, 0, 0.25);
}

/* Subheading */
.color-slide__sub {
  color: var(--white);
  text-align: center;
  font-family: "Lexend", system-ui, sans-serif;
  font-size: 2.375rem; /* 38px */
  font-weight: 400;
  margin-top: 0.375rem;
  letter-spacing: 0.125rem;
  text-transform: capitalize;
}

/* Tag words around circle */
.color-slide__tags {
  position: absolute;
  inset: 0;
  list-style: none;
}

.color-slide__tags li {
  position: absolute;
  width: 13.125rem; /* 210px */
  color: var(--white);
  font-family: "Lexend", system-ui, sans-serif;
  font-size: 1.5rem; /* 24px */
  font-weight: 500;
  text-align: center;
  line-height: 1.1;
}

/* Tag positions */
.color-slide__tags li:nth-child(1) { top: 10%; left: 50%; transform: translateX(-50%); }
.color-slide__tags li:nth-child(2) { top: 23%; left: 15%; }
.color-slide__tags li:nth-child(3) { top: 23%; right: 15%; }
.color-slide__tags li:nth-child(4) { top: 45%; left: 5%;  transform: translateY(-50%); }
.color-slide__tags li:nth-child(5) { top: 45%; right: 5%; transform: translateY(-50%); }
.color-slide__tags li:nth-child(6) { bottom: 23%; left: 15%; }
.color-slide__tags li:nth-child(7) { bottom: 10%; left: 50%; transform: translateX(-50%); }
.color-slide__tags li:nth-child(8) { bottom: 22%; right: 15%; }

/* Circle backgrounds + glow */
.color-slide--red .color-slide__circle {
  background: linear-gradient(0deg, rgba(0,0,0,0.2), rgba(0,0,0,0.2)), var(--red-main);
  box-shadow: var(--shadow-soft), 0 0 2.5rem rgba(236, 9, 58, 0.85);
}

.color-slide--orange .color-slide__circle {
  background: linear-gradient(0deg, rgba(0,0,0,0.2), rgba(0,0,0,0.2)), var(--orange-main);
  box-shadow: var(--shadow-soft), 0 0 2.5rem rgba(255, 98, 0, 0.85);
}

.color-slide--yellow .color-slide__circle {
  background: linear-gradient(0deg, rgba(0,0,0,0.2), rgba(0,0,0,0.2)), var(--yellow-main);
  box-shadow: var(--shadow-soft), 0 0 2.5rem rgba(207, 184, 50, 0.9);
}

.color-slide--green .color-slide__circle {
  background: linear-gradient(0deg, rgba(0,0,0,0.2), rgba(0,0,0,0.2)), var(--green-main);
  box-shadow: var(--shadow-soft), 0 0 2.5rem rgba(28, 190, 0, 0.9);
}

.color-slide--blue .color-slide__circle {
  background: linear-gradient(0deg, rgba(0,0,0,0.2), rgba(0,0,0,0.2)), var(--blue-main);
  box-shadow: var(--shadow-soft), 0 0 2.5rem rgba(34, 154, 204, 0.9);
}

.color-slide--purple .color-slide__circle {
  background: linear-gradient(0deg, rgba(0,0,0,0.2), rgba(0,0,0,0.2)), var(--purple-main);
  box-shadow: var(--shadow-soft), 0 0 2.5rem rgba(122, 62, 204, 0.9);
}

/* Black circle: white stroke + white glow */
.color-slide--black .color-slide__circle {
  background: linear-gradient(0deg, rgba(0,0,0,0.35), rgba(0,0,0,0.35)), var(--black-main);
  border: 0.1875rem solid var(--white); /* 3px */
  box-shadow:
    0.375rem 0.25rem 0.25rem rgba(0, 0, 0, 0.4),
    0 0 2.1875rem rgba(255, 255, 255, 0.75),
    0 0 3.4375rem rgba(255, 255, 255, 0.45);
}

/* Auto-cycle animation: 2.5s per color, total 17.5s */
@keyframes colorSlideCycle {
  0%, 14% { opacity: 1; visibility: visible; }
  16%, 100% { opacity: 0; visibility: hidden; }
}

/* Attach animation to all slides */
.color-slide {
  animation: colorSlideCycle 17.5s linear infinite;
}

/* Order */
.color-slide--red    { animation-delay: 0s; }
.color-slide--orange { animation-delay: 2.5s; }
.color-slide--yellow { animation-delay: 5s; }
.color-slide--green  { animation-delay: 7.5s; }
.color-slide--blue   { animation-delay: 10s; }
.color-slide--purple { animation-delay: 12.5s; }
.color-slide--black  { animation-delay: 15s; }

/* SECTION 8 — JOIN THE MOVEMENT */

.join {
  padding: 7.5rem 0 8.75rem;
  display: flex;
  justify-content: center;
  color: var(--white);
}

.join__inner {
  width: 100%;
  max-width: 85rem; /* 1360px */
  margin: 0 auto;
  padding-inline: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 5rem;
}

.join__header {
  text-align: center;
}

.join__header h2 {
  font-family: "Lexend", system-ui, sans-serif;
  font-size: 5rem; /* 80px */
  font-weight: 400;
  line-height: 1.1;
}

.join__tagline {
  margin-top: 2rem;
  font-family: "Lexend", system-ui, sans-serif;
  font-size: 2rem; /* 32px */
  font-weight: 500;
  letter-spacing: 0.125rem;
}

.join__intro {
  margin-top: 1rem;
  max-width: 45rem;
  margin-inline: auto;
  font-family: "Lexend", system-ui, sans-serif;
  font-size: 1.25rem; /* 20px */
  font-weight: 300;
  line-height: 1.5;
}

/* Content layout: mandala + form */
.join__content {
  display: grid;
  grid-template-columns: minmax(0, 26.25rem) minmax(0, 1fr); /* ~420px */
  align-items: flex-start;
  gap: 3.75rem;
}

/* Left visual */
.join__visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.75rem;
}

.join__mandala-wrap {
  width: 16.25rem;  /* 260px */
  height: 26.25rem; /* 420px */
  display: flex;
  align-items: center;
  justify-content: center;
}

.join__mandala {
  width: 100%;
  height: auto;
  display: block;
  transform: scaleX(-1);
  transition: transform 0.4s ease, filter 0.4s ease;
}

.join__mandala:hover {
  transform: scaleX(-1) scale(1.03);
  filter: hue-rotate(15deg) brightness(1.1);
}

.join__logo {
  width: 9.375rem; /* 150px */
  height: auto;
  opacity: 0.93;
}

/* Form */
.join__form {
  width: 100%;
  max-width: 38.75rem; /* 620px */
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  font-family: "Lexend", system-ui, sans-serif;
}

.join__field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.join__field label,
.join__field-label {
  font-size: 1rem;
  font-weight: 400;
}

.join__field input {
  width: 100%;
  height: 3rem; /* 48px */
  border-radius: 0.25rem;
  border: 0.0625rem solid rgba(255, 255, 255, 0.35);
  background-color: transparent;
  color: var(--white);
  padding-inline: 0.875rem;
  font-family: "Lexend", system-ui, sans-serif;
  font-size: 1rem;
  outline: none;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background-color 0.2s ease;
}

.join__field input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.join__field input:focus {
  border-color: var(--purple-main);
  box-shadow: 0 0 0 0.0625rem rgba(122, 62, 204, 0.7);
  background-color: rgba(255, 255, 255, 0.02);
}

.join__field small {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.7);
}

/* City + State */
.join__field--city-state {
  flex-direction: row;
  gap: 1rem;
}

.join__field-half {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

/* State dropdown — black background */
.join__field select {
  width: 100%;
  height: 3rem;
  border-radius: 0.25rem;
  border: 0.0625rem solid rgba(255, 255, 255, 0.45);
  background-color: #000;
  color: var(--white);
  padding-inline: 0.875rem;
  font-family: "Lexend", system-ui, sans-serif;
  font-size: 1rem;
  outline: none;
  cursor: pointer;

  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #fff 50%),
    linear-gradient(135deg, #fff 50%, transparent 50%);
  background-position: calc(100% - 1.125rem) center,
    calc(100% - 0.8125rem) center;
  background-size: 0.375rem 0.375rem, 0.375rem 0.375rem;
  background-repeat: no-repeat;
}

.join__field select:hover {
  border-color: rgba(255, 255, 255, 0.8);
}

.join__field select:focus {
  border-color: var(--purple-main);
  box-shadow: 0 0 0 0.125rem rgba(122, 62, 204, 0.55);
}

/* Mailing list choices (Yes / No) */
.join__choices {
  display: flex;
  gap: 0.625rem;
  margin-top: 0.25rem;
}

.join__choices input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.join__choice-label {
  flex: 1;
  text-align: center;
  padding: 0.625rem 1rem;
  border-radius: 2.5rem;
  border: 0.0625rem solid rgba(255, 255, 255, 0.5);
  font-size: 0.875rem;
  font-weight: 400;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}

.join__choice-label:hover {
  transform: translateY(-0.0625rem);
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.35);
  border-color: var(--magenta);
}

/* Checked state */
.join__choices input:checked + .join__choice-label {
  background: linear-gradient(90deg, var(--magenta), var(--purple-main));
  color: var(--white);
  border-color: transparent;
  box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.45);
}

/* Submit */
.join__actions {
  margin-top: 1.125rem;
}

.join__submit {
  width: 13.125rem; /* 210px */
  height: 3.25rem;  /* 52px */
  border-radius: 2.5rem;
  border: none;
  cursor: pointer;
  font-family: "Lexend", system-ui, sans-serif;
  font-size: 1.125rem; /* 18px */
  font-weight: 400;
  color: var(--white);
  background: linear-gradient(90deg, var(--magenta), var(--purple-main));
  box-shadow: 0 0.3125rem 1.125rem rgba(0, 0, 0, 0.5);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    filter 0.18s ease;
}

.join__submit:hover {
  transform: translateY(-0.125rem);
  box-shadow: 0 0.5625rem 1.625rem rgba(0, 0, 0, 0.65);
  filter: brightness(1.05);
}

.join__submit:active {
  transform: translateY(0);
  box-shadow: 0 0.25rem 0.875rem rgba(0, 0, 0, 0.6);
}

/* RESPONSIVE BREAKPOINTS */

/* ≤ 1200px */
@media (max-width: 75rem) {
  :root {
    --shell-padding-x: 3.75rem;
  }

  .hero {
    height: auto;
    padding-bottom: var(--ticker-h);
  }

  .hero-copy {
    left: calc(var(--rail-w) + 16.25rem);
    top: 10rem;
  }

  .mandala-wrap {
    left: calc(var(--rail-w) - 0.625rem);
    width: 21.25rem;
  }

  .what-is {
    padding-inline: 3.75rem;
  }

  .what-is__mandala-stack {
    width: 30rem;
    height: 28.75rem;
  }

  .facts__inner {
    padding-inline: 1.5rem;
  }

  .facts__row {
    grid-template-columns: 1fr;
    row-gap: 1.25rem;
    text-align: center;
  }

  .facts__label,
  .facts__detail {
    width: 100%;
    max-width: 90%;
    margin-inline: auto;
  }

  .why-art__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 3.125rem;
  }

  .join__content {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    justify-items: center;
  }

  .join__visual {
    flex-direction: row;
    gap: 2rem;
  }
}

/* ≤ 992px */
@media (max-width: 62rem) {
  :root {
    --rail-w: 16.25rem; /* 260px */
  }

  .rail {
    padding: 1.75rem 1.25rem;
  }

  .side-nav ul {
    gap: 1.125rem;
  }

  .hero-copy {
    left: calc(var(--rail-w) + 10rem);
    top: 9.375rem;
  }

  .what-is__grid {
    gap: 3rem;
  }

  .why-art {
    padding-inline: 3.75rem;
  }

  .percentages__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 23.75rem;
  }

  .perc-card__circle {
    width: 21.25rem;
    height: 21.25rem;
  }

  .perc-card__value {
    font-size: 6rem;
  }

  .who-row {
    flex-direction: column;
    height: auto;
  }

  .who-row--reverse {
    flex-direction: column;
  }

  .who-row__panel {
    height: auto;
  }

  .who-row__panel--image {
    height: 16.25rem;
  }

  .who-row__panel--color {
    padding: 2.5rem 2rem 3.125rem;
    border-radius: 0;
    justify-content: center;
    text-align: center;
  }

  .who-row__heading {
    font-size: 3rem;
    line-height: 1.1;
  }

  .who-row__subheading {
    font-size: 1.375rem;
  }

  .colors-meaning__slider {
    height: 43.75rem; /* 700px */
  }

  .color-slide__circle {
    width: 16.25rem;
    height: 16.25rem;
  }

  .color-slide__name {
    font-size: 8.75rem;
    letter-spacing: -0.375rem;
  }

  .color-slide__sub {
    font-size: 1.625rem;
  }

  .color-slide__tags li {
    font-size: 1.125rem;
    width: 9.375rem;
  }
}

/* ≤ 768px */
@media (max-width: 48rem) {
  :root {
    --shell-padding-x: 1.5rem;
  }

  .hero {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .rail {
    position: relative;
    width: 100%;
    height: auto;
    grid-template-rows: auto auto;
    padding: 1.25rem;
  }

  .rail-divider {
    display: none;
  }

  .side-nav ul {
    grid-template-columns: 1fr 1fr;
    gap: 0.875rem 1.125rem;
    margin-bottom: 0.625rem;
  }

  .side-nav a {
    font-size: 0.95rem;
  }

  .search {
    position: relative;
    top: 0;
    right: 0;
    margin: 0.625rem auto 0;
    height: 3.25rem;
  }

  .search input {
    text-align: left;
    font-size: 1rem;
  }

  .mandala-wrap {
    position: absolute;
    left: 0.625rem;
    top: 13.125rem;
    width: 42vw;
    max-width: 13.75rem;
  }

  .hero-copy {
    position: absolute;
    left: calc(0.625rem + 42vw + 0.625rem);
    right: 0.75rem;
    top: 13.75rem;
    width: auto;
  }

  .hero-copy h1 {
    font-size: clamp(2.25rem, 7vw, 2.75rem);
    line-height: 1.05;
    letter-spacing: -0.09375rem;
  }

  .paint {
    left: 10%;
    top: 16.25rem;
    width: 120%;
    transform: translateX(-10%);
  }

  .ticker p {
    padding-left: 100%;
    font-size: 0.75rem;
  }

  .what-is {
    padding: 3.125rem 1.5rem 4.375rem;
  }

  .what-is__title {
    font-size: 3rem;
  }

  .what-is__grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    justify-items: center;
  }

  .what-is__col--art,
  .what-is__col--therapy {
    align-items: flex-start;
  }

  .what-is__mandala-stack {
    width: 22.5rem;
    height: 21.25rem;
  }

  .what-is__mandala,
  .what-is__circle {
    width: 100%;
    height: 100%;
  }

  .what-is__quote {
    font-size: 2.5rem;
    line-height: 1.2;
    letter-spacing: 0.125rem;
  }

  .why-art {
    padding: 4.375rem 1.5rem 5.625rem;
  }

  .why-art__title {
    font-size: 3.5rem;
    line-height: 1.1;
  }

  .why-art__grid {
    grid-template-columns: 1fr;
  }

  .why-card {
    width: 100%;
    max-width: 23.75rem;
  }

  .facts__label {
    font-size: 3.25rem;
    line-height: 1.1;
  }

  .facts__detail {
    font-size: 1.75rem;
    letter-spacing: 0.075rem;
  }

  .percentages {
    padding-inline: 1.5rem;
  }

  .percentages__grid {
    grid-template-columns: 1fr;
    grid-auto-rows: 22.5rem;
  }

  .perc-card__circle {
    width: 18.75rem;
    height: 18.75rem;
  }

  .perc-card__value {
    font-size: 5rem;
  }

  .perc-card__text {
    font-size: 1.25rem;
  }

  .who__title {
    font-size: 3.5rem;
    line-height: 1.1;
  }

  .who__quote {
    font-size: 2.5rem;
    line-height: 1.2;
  }

  .colors-meaning__slider {
    height: 38.75rem;
  }

  .color-slide__circle {
    width: 14.375rem;
    height: 14.375rem;
  }

  .color-slide__name {
    font-size: 6.25rem;
  }

  .color-slide__sub {
    font-size: 1.25rem;
  }

  .color-slide__tags li {
    font-size: 0.875rem;
    width: 8.125rem;
  }

  .join {
    padding: 5rem 0 5.625rem;
  }

  .join__inner {
    padding-inline: 1.25rem;
  }

  .join__header h2 {
    font-size: 2.875rem;
  }

  .join__tagline {
    font-size: 1.5rem;
  }

  .join__intro {
    font-size: 1rem;
  }

  .join__content {
    gap: 2rem;
  }

  .join__visual {
    flex-direction: column;
  }

  .join__form {
    width: 100%;
  }

  .join__field--city-state {
    flex-direction: column;
  }

  .join__submit {
    width: 100%;
  }
}

/* ≤ 480px */
@media (max-width: 30rem) {
  .what-is__title {
    font-size: 2.25rem;
  }

  .what-is__art-word,
  .what-is__therapy-word {
    font-size: 4rem;
    line-height: 1.1;
  }

  .what-is__pronunciation,
  .what-is__therapy-pronunciation {
    font-size: 1.75rem;
  }

  .what-is__body,
  .what-is__body--therapy {
    width: 100%;
  }

  .what-is__quote {
    font-size: 2rem;
    line-height: 1.2;
    letter-spacing: 0.09375rem;
  }

  .percentages__title {
    font-size: 2.625rem;
  }

  .perc-card__circle {
    width: 16.25rem;
    height: 16.25rem;
  }

  .perc-card__value {
    font-size: 4rem;
  }

  .perc-card__text {
    font-size: 1.125rem;
    letter-spacing: 0.0625rem;
  }

  .who__title {
    font-size: 2.5rem;
  }

  .who-row__heading {
    font-size: 2.5rem;
  }

  .who-row__subheading {
    font-size: 1.25rem;
  }

  .who-row__panel--image {
    height: 13.75rem;
  }

  .who__quote {
    font-size: 2rem;
  }

  .colors-meaning__title {
    font-size: 2.875rem;
    line-height: 1.1;
  }

  .colors-meaning__intro {
    font-size: 1.25rem;
  }

  .colors-meaning__slider {
    height: 38.75rem;
  }

  .join__header h2 {
    font-size: 2.5rem;
  }
}