/*-- -------------------------- -->
<---      Summer Camp Hero      -->
<--- -------------------------- -*/

@keyframes hero-ring-spin-cw {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes hero-ring-spin-ccw {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}

@keyframes hero-rocket-drift {
  0%, 100% { transform: translateY(0px) rotate(-5deg); }
  50%       { transform: translateY(-16px) rotate(2deg); }
}

@keyframes hero-flame-flicker-outer {
  from { transform: scaleY(1) scaleX(1);       opacity: 0.9; }
  to   { transform: scaleY(0.68) scaleX(1.28); opacity: 0.6; }
}

@keyframes hero-flame-flicker-inner {
  from { transform: scaleY(1) scaleX(1);       opacity: 0.85; }
  to   { transform: scaleY(0.72) scaleX(1.22); opacity: 0.55; }
}

@keyframes hero-atom-orbit {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes hero-shoot-1 {
  0%   { transform: translate(0, 0);        opacity: 0; }
  5%   { opacity: 1; }
  28%  { transform: translate(200px, 80px); opacity: 0; }
  100% { transform: translate(200px, 80px); opacity: 0; }
}

@keyframes hero-shoot-2 {
  0%   { transform: translate(0, 0);        opacity: 0; }
  5%   { opacity: 0.7; }
  22%  { transform: translate(160px, 65px); opacity: 0; }
  100% { transform: translate(160px, 65px); opacity: 0; }
}

@keyframes hero-moon-pulse {
  0%, 100% { opacity: 0.62; }
  50%       { opacity: 0.92; }
}

@keyframes hero-asteroid-drift {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-10px); }
}

@keyframes hero-scroll-bob {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(6px); }
}

@keyframes hero-badge-dot-pulse {
  0%, 100% { box-shadow: 0 0 4px rgba(212, 168, 67, 0.55); }
  50%       { box-shadow: 0 0 14px rgba(212, 168, 67, 1); }
}

/* Mobile - 360px */
@media only screen and (min-width: 0px) {

  #hero-summer-camp {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 43.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #050D1E;
  }

  #hero-summer-camp::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    background:
      linear-gradient(180deg, rgba(5,13,30,0.55) 0%, rgba(10,25,55,0.72) 50%, rgba(5,13,30,0.60) 100%),
      linear-gradient(90deg,  rgba(5,13,30,0.35) 0%, transparent 50%, rgba(5,13,30,0.35) 100%);
  }

  #hero-summer-camp #star-canvas {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
  }

  #hero-summer-camp .cs-space-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    pointer-events: none;
    overflow: hidden;
  }

  #hero-summer-camp .cs-planet-ring--outer {
    transform-origin: 1220px 162px;
    animation: hero-ring-spin-cw 18s linear infinite;
  }

  #hero-summer-camp .cs-planet-ring--inner {
    transform-origin: 1220px 162px;
    animation: hero-ring-spin-ccw 28s linear infinite;
  }

  #hero-summer-camp .cs-rocket {
    transform-origin: 160px 760px;
    animation: hero-rocket-drift 8s ease-in-out infinite;
  }

  #hero-summer-camp .cs-rocket-flame--outer {
    transform-origin: 160px 822px;
    animation: hero-flame-flicker-outer 0.18s ease-in-out infinite alternate;
  }

  #hero-summer-camp .cs-rocket-flame--inner {
    transform-origin: 160px 828px;
    animation: hero-flame-flicker-inner 0.22s ease-in-out infinite alternate-reverse;
  }

  #hero-summer-camp .cs-atom-ring {
    transform-origin: 622px 208px;
  }

  #hero-summer-camp .cs-atom-ring--1 { animation: hero-atom-orbit 6s linear infinite; }
  #hero-summer-camp .cs-atom-ring--2 { animation: hero-atom-orbit 9s linear infinite reverse; }
  #hero-summer-camp .cs-atom-ring--3 { animation: hero-atom-orbit 12s linear infinite; }

  #hero-summer-camp .cs-moon {
    animation: hero-moon-pulse 5s ease-in-out infinite;
  }

  #hero-summer-camp .cs-shooting-star { opacity: 0; }

  #hero-summer-camp .cs-shooting-star--1 {
    animation: hero-shoot-1 6s ease-in infinite;
    animation-delay: 3s;
  }

  #hero-summer-camp .cs-shooting-star--2 {
    animation: hero-shoot-2 6s ease-in infinite;
    animation-delay: 9s;
  }

  #hero-summer-camp .cs-asteroid--1 {
    transform-origin: 1300px 700px;
    animation: hero-asteroid-drift 12s ease-in-out infinite;
    animation-delay: 2s;
  }

  #hero-summer-camp .cs-asteroid--2 {
    transform-origin: 140px 650px;
    animation: hero-asteroid-drift 15s ease-in-out infinite;
    animation-delay: 5s;
  }

  #hero-summer-camp .cs-container {
    width: 100%;
    max-width: 100%;
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: calc(var(--nav-offset, 7rem) + 2rem) 1.5rem 6rem;
    text-align: center;
  }

  #hero-summer-camp .cs-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 47.5rem;
  }

  /* Badge */
  #hero-summer-camp .cs-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    background: rgba(212, 168, 67, 0.13);
    border: 0.0625rem solid rgba(212, 168, 67, 0.4);
    border-radius: 100px;
    padding: 0.3125rem 0.875rem 0.3125rem 0.625rem;
    margin-bottom: 1.25rem;
  }

  #hero-summer-camp .cs-badge-dot {
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 50%;
    background: var(--signingGold);
    flex-shrink: 0;
    box-shadow: 0 0 6px rgba(212, 168, 67, 0.7);
    animation: hero-badge-dot-pulse 2.5s ease-in-out infinite;
  }

  /* Badge text — section-specific overrides only (dark bg context) */
  #hero-summer-camp .cs-badge-text {
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.78);
  }

  /* Title — hero-specific sizing and gold em override */
  #hero-summer-camp .cs-title {
    font-size: clamp(3.2rem, 5vw, 6.75rem);
    font-weight: 900;
    line-height: 1.08em;
    color: var(--white);
    margin: 0 0 1rem;
  }

  #hero-summer-camp .cs-title em {
    font-style: normal;
    color: var(--signingGold);
    display: block;
  }

  /* Text — hero-specific white override */
  #hero-summer-camp .cs-text {
    font-size: clamp(0.95rem, 1.6vw, 1.1rem);
    font-weight: 300;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.6);
    max-width: 30rem;
    margin: 0 0 1.75rem;
  }

  /* Info pills */
  #hero-summer-camp .cs-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 2rem;
  }

  #hero-summer-camp .cs-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    background: rgba(255, 255, 255, 0.07);
    border: 0.5px solid rgba(255, 255, 255, 0.18);
    border-radius: 100px;
    padding: 0.5rem 1rem;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background 0.2s ease, border-color 0.2s ease;
  }

  #hero-summer-camp .cs-pill:hover {
    background: rgba(255, 255, 255, 0.13);
    border-color: rgba(255, 255, 255, 0.35);
  }

  #hero-summer-camp .cs-pill svg {
    width: 0.9375rem;
    height: 0.9375rem;
    color: rgba(255, 255, 255, 0.5);
    flex-shrink: 0;
  }

  #hero-summer-camp .cs-pill span {
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    white-space: nowrap;
    letter-spacing: 0.02em;
  }

  /* Scroll indicator */
  #hero-summer-camp .cs-scroll {
    position: absolute;
    bottom: 2.25rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
  }

  #hero-summer-camp .cs-scroll-circle {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    border: 0.5px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.55);
    animation: hero-scroll-bob 2s ease-in-out infinite;
  }

}

/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #hero-summer-camp .cs-container {
    padding: calc(var(--nav-offset, 7rem) + 2rem) 2.5rem 6rem;
  }

  #hero-summer-camp .cs-pills { gap: 0.625rem; }
}

/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #hero-summer-camp .cs-container {
    padding: calc(var(--nav-offset, 7rem) + 3rem) 6vw 7rem;
  }
}

/* Small mobile - max 480px */
@media only screen and (max-width: 30rem) {
  #hero-summer-camp { min-height: 100svh; }

  #hero-summer-camp .cs-container {
    padding: calc(var(--nav-offset, 7rem) + 1rem) 1rem 5rem;
  }

  #hero-summer-camp .cs-title { font-size: clamp(1.9rem, 8vw, 2.4rem); }
  #hero-summer-camp .cs-pill span { font-size: 0.6875rem; }
}

/*-- -------------------------- -->
<---        Camp Overview       -->
<--- -------------------------- -*/

@media only screen and (min-width: 0px) {
  #camp-overview {
    padding: var(--sectionPadding);
    background: var(--white);
  }

  #camp-overview .cs-container {
    display: flex;
    flex-direction: column;
    gap: clamp(2rem, 4vw, 3rem);
  }

  #camp-overview .cs-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  /* Title — section override: gold em, margin */
  #camp-overview .cs-title {
    margin: 0 0 1.25rem;
  }

  #camp-overview .cs-title em {
    font-style: normal;
    color: var(--signingGold);
  }

  #camp-overview .cs-text {
    margin: 0 0 0.875rem;
    max-width: 42.5rem;
  }

  #camp-overview .cs-text:last-child { margin-bottom: 0; }

  /* Image group */
  #camp-overview .cs-image-group {
    display: flex;
    gap: 0.75rem;
  }

  #camp-overview .cs-image {
    border-radius: 0.75rem;
    overflow: hidden;
    height: clamp(10rem, 20vw, 15rem);
    flex: 1;
  }

  #camp-overview .cs-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.5s ease;
  }

  #camp-overview .cs-image:hover img { transform: scale(1.04); }

  #camp-overview .cs-image-left,
  #camp-overview .cs-image-right { display: none; }
}

@media only screen and (min-width: 48rem) {
  #camp-overview .cs-container { padding: 0 2.5rem; }

  #camp-overview .cs-image-left,
  #camp-overview .cs-image-right { display: block; }

  #camp-overview .cs-image-center { flex: 1.3; }
}

@media only screen and (min-width: 64rem) {
  #camp-overview {
    padding: 2rem clamp(2rem, 4vw, 3.5rem) clamp(3rem, 5vw, 4.5rem);
  }

  #camp-overview .cs-container {
    max-width: 100%;
    padding: 0;
  }

  #camp-overview .cs-image { height: 15rem; }
}

@media only screen and (max-width: 30rem) {
  #camp-overview .cs-title { font-size: clamp(1.9rem, 8vw, 2.4rem); }
}


/*-- -------------------------- -->
<---       A Typical Day        -->
<--- -------------------------- -*/

@media only screen and (min-width: 0px) {
  #typical-day {
    padding: var(--sectionPadding);
    padding-bottom: 2rem;
    background: var(--white);
  }

  #typical-day .cs-container {
    padding: 0 1rem;
  }

  #typical-day .cs-header {
    text-align: center;
    margin-bottom: 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* Topper — section-specific colour override (greyed out vs standard gold) */
  #typical-day .cs-topper {
    color: rgba(0, 0, 0, 0.35);
    margin-bottom: 0.5rem;
    text-align: center;
  }

  #typical-day .cs-title {
    margin: 0 0 0.75rem;
    text-align: center;
    width: 100%;
  }

  #typical-day .cs-text {
    opacity: 0.6;
    max-width: 27.5rem;
    margin: 0 auto;
    text-align: center;
  }

  /* Mobile timeline */
  #typical-day .cs-tl-mobile {
    display: flex;
    flex-direction: column;
    position: relative;
    padding-left: 2.125rem;
  }

  #typical-day .cs-tl-mobile::before {
    content: "";
    position: absolute;
    left: 0.5625rem;
    top: 1.75rem;
    bottom: 5.125rem;
    width: 0.0625rem;
    background: rgba(0, 0, 0, 0.1);
  }

  #typical-day .cs-tl-wrap { display: none; }

  #typical-day .cs-tl-row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 0.875rem;
    margin-bottom: 0.75rem;
    position: relative;
  }

  #typical-day .cs-tl-row:last-child { margin-bottom: 0; }

  #typical-day .cs-tl-rail {
    position: absolute;
    left: -2.125rem;
    top: 0.875rem;
    width: 1.25rem;
    display: flex;
    justify-content: center;
  }

  /* Mobile node */
  #typical-day .cs-tl-mobile .cs-tl-node {
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 50%;
    background: var(--navy);
    box-shadow: 0 0 0 0.1875rem rgba(15, 47, 91, 0.15);
    position: relative;
    z-index: 1;
    flex-shrink: 0;
  }

  #typical-day .cs-tl-connector { display: none; }

  #typical-day .cs-tl-card {
    flex: 1;
    min-width: 0;
    background: #f8f8f8;
    border: 0.0625rem solid rgba(0, 0, 0, 0.06);
    border-radius: 0.625rem;
    padding: 0.875rem 1rem;
    text-align: left;
  }

  #typical-day .cs-tl-time {
    display: block;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--navy);
    margin-bottom: 0.25rem;
  }

  #typical-day .cs-tl-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--navy);
    line-height: 1.3;
    margin: 0 0 0.25rem;
  }

  #typical-day .cs-tl-desc {
    font-size: 0.75rem;
    font-weight: 300;
    line-height: 1.65;
    color: var(--charcoal);
    opacity: 0.55;
    margin: 0;
  }
}

@media only screen and (min-width: 48rem) {
  #typical-day .cs-container { padding: 0 2.5rem; }
}

@media only screen and (min-width: 64rem) {
  #typical-day {
    padding-left: 6vw;
    padding-right: 6vw;
  }

  #typical-day .cs-container { padding: 0; }
  #typical-day .cs-tl-mobile { display: none; }

  #typical-day .cs-tl-wrap {
    display: block;
    position: relative;
    width: 100%;
  }

  #typical-day .cs-tl-line {
    display: block;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 0.0625rem;
    background: rgba(0, 0, 0, 0.1);
    pointer-events: none;
  }

  #typical-day .cs-tl-line-fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0%;
    background: var(--navy);
    transition: height 0.6s ease;
  }

  #typical-day .cs-tl-item {
    display: grid;
    grid-template-columns: 1fr 3rem 1fr;
    align-items: start;
    gap: 0;
    margin-bottom: 3rem;
    opacity: 0;
    transform: translateY(1.25rem);
    transition: opacity 0.55s ease, transform 0.55s ease;
  }

  #typical-day .cs-tl-item.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  #typical-day .cs-tl-item.is-visible .cs-tl-node {
    width: 0.875rem;
    height: 0.875rem;
    background: var(--navy);
    border-color: var(--white);
    box-shadow:
      0 0 0 0.1875rem var(--white),
      0 0 0 0.3125rem var(--navy);
  }

  #typical-day .cs-tl-item.is-visible .cs-tl-time {
    color: var(--navy);
    opacity: 1;
  }

  #typical-day .cs-tl-node-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 1.125rem;
  }

  /* Desktop node */
  #typical-day .cs-tl-wrap .cs-tl-node {
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 50%;
    background: transparent;
    border: 0.09375rem solid rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
    box-shadow: none;
    transition:
      width 0.35s ease,
      height 0.35s ease,
      background 0.35s ease,
      border-color 0.35s ease,
      box-shadow 0.35s ease;
  }

  #typical-day .cs-tl-left,
  #typical-day .cs-tl-right { display: block; }

  #typical-day .cs-tl-left {
    padding-right: 1.75rem;
    text-align: right;
  }

  #typical-day .cs-tl-right {
    padding-left: 1.75rem;
    text-align: left;
  }

  #typical-day .cs-tl-card {
    display: inline-block;
    width: 100%;
    text-align: left;
    background: #f8f8f8;
    border: 0.0625rem solid rgba(0, 0, 0, 0.06);
    border-radius: 0.625rem;
    padding: 1rem 1.25rem;
  }

  #typical-day .cs-tl-left .cs-tl-card { text-align: right; }

  #typical-day .cs-tl-time {
    font-size: 0.6875rem;
    opacity: 0.5;
    transition: opacity 0.35s ease;
  }

  #typical-day .cs-tl-title { font-size: 1.125rem; }
  #typical-day .cs-tl-desc  { font-size: 0.8125rem; }
}

@media only screen and (min-width: 80rem) {
  #typical-day {
    padding-left: 6vw;
    padding-right: 6vw;
  }
}


/*-- -------------------------- -->
<---       Programs by Age      -->
<--- -------------------------- -*/

@media only screen and (min-width: 0px) {
  #programs-by-age {
    padding: var(--sectionPadding);
    background: var(--white);
  }

  #programs-by-age .cs-container {
    padding: 0 1rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }

  #programs-by-age .cs-header {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  /* Label — gold topper variant */
  #programs-by-age .cs-label {
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--signingGold);
    display: block;
    margin: 0;
  }

  #programs-by-age .cs-title { margin: 0; }
  #programs-by-age .cs-text  { margin: 0; max-width: 35rem; }

  #programs-by-age .cs-card-group {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  #programs-by-age .cs-card {
    border-radius: 0.875rem;
    border: 0.5px solid rgba(0, 0, 0, 0.08);
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  #programs-by-age .cs-card-top {
    padding: 1.5rem 1.75rem 1.375rem;
    flex-shrink: 0;
  }

  #programs-by-age .cs-card-top--explorers  { background: var(--navy); }
  #programs-by-age .cs-card-top--innovators { background: #142447; }

  #programs-by-age .cs-age-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    border-radius: 100px;
    padding: 0.1875rem 0.625rem 0.1875rem 0.4375rem;
    margin-bottom: 1rem;
  }

  #programs-by-age .cs-age-badge--explorers {
    background: rgba(212, 168, 67, 0.18);
    border: 0.5px solid rgba(212, 168, 67, 0.4);
  }

  #programs-by-age .cs-age-badge--innovators {
    background: rgba(26, 120, 189, 0.18);
    border: 0.5px solid rgba(26, 120, 189, 0.4);
  }

  #programs-by-age .cs-badge-dot {
    width: 0.3125rem;
    height: 0.3125rem;
    border-radius: 50%;
    flex-shrink: 0;
  }

  #programs-by-age .cs-badge-dot--gold { background: var(--signingGold); }
  #programs-by-age .cs-badge-dot--blue { background: var(--brooklynBlue); }

  #programs-by-age .cs-badge-text {
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
  }

  #programs-by-age .cs-card-title {
    font-size: clamp(1.3rem, 3vw, 1.6rem);
    font-weight: 900;
    color: var(--white);
    line-height: 1.15;
    margin: 0 0 0.5rem;
  }

  #programs-by-age .cs-card-desc {
    font-size: 0.8125rem;
    font-weight: 300;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
  }

  #programs-by-age .cs-card-body {
    padding: 1.375rem 1.75rem;
    background: var(--white);
    flex: 1;
  }

  #programs-by-age .cs-card-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
  }

  #programs-by-age .cs-card-list-item {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    font-size: 0.875rem;
    color: var(--charcoal);
    line-height: 1.5;
  }

  #programs-by-age .cs-item-dot {
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 0.3125rem;
  }

  #programs-by-age .cs-item-dot--gold { background: var(--signingGold); }
  #programs-by-age .cs-item-dot--blue { background: var(--brooklynBlue); }

  #programs-by-age .cs-card-footer {
    padding: 0 1.75rem 1.5rem;
    background: var(--white);
    flex-shrink: 0;
  }

  #programs-by-age .cs-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 100px;
    padding: 0.625rem 1.25rem;
    text-decoration: none;
    transition: opacity 0.18s ease, box-shadow 0.18s ease;
  }

  #programs-by-age .cs-card-cta svg {
    width: 0.625rem;
    height: 0.625rem;
    flex-shrink: 0;
  }

  #programs-by-age .cs-card-cta--explorers {
    background: var(--navy);
    color: var(--white);
  }

  #programs-by-age .cs-card-cta--explorers:hover {
    opacity: 0.88;
    box-shadow: 0 4px 18px rgba(15, 47, 91, 0.25);
  }

  #programs-by-age .cs-card-cta--innovators {
    background: var(--brooklynBlue);
    color: var(--white);
  }

  #programs-by-age .cs-card-cta--innovators:hover {
    opacity: 0.88;
    box-shadow: 0 4px 18px rgba(26, 120, 189, 0.25);
  }
}

@media only screen and (min-width: 48rem) {
  #programs-by-age .cs-container       { padding: 0 2.5rem; }
  #programs-by-age .cs-card-group      { grid-template-columns: 1fr 1fr; }
}

@media only screen and (min-width: 64rem) {
  #programs-by-age .cs-container   { padding: 0 6vw; }
  #programs-by-age .cs-card-top    { padding: 1.75rem 2rem 1.5rem; }
  #programs-by-age .cs-card-body   { padding: 1.5rem 2rem; }
  #programs-by-age .cs-card-footer { padding: 0 2rem 1.75rem; }
}

@media only screen and (max-width: 30rem) {
  #programs-by-age .cs-container { padding: 0 1rem; }
}


/*-- -------------------------- -->
<---        Safety & Staff      -->
<--- -------------------------- -*/

@media only screen and (min-width: 0px) {
  #safety-staff {
    padding: var(--sectionPadding);
    background: var(--white);
  }

  #safety-staff .cs-container { padding: 0 1rem; }

  #safety-staff .cs-split {
    display: flex;
    flex-direction: column;
    border: 0.5px solid rgba(0, 0, 0, 0.08);
    border-radius: 0.875rem;
    overflow: hidden;
  }

  #safety-staff .cs-left {
    background: #f7f7f6;
    padding: 1.75rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    border-bottom: 0.5px solid rgba(0, 0, 0, 0.07);
  }

  #safety-staff .cs-left-top {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  /* Topper — section-specific gold */
  #safety-staff .cs-topper {
    color: var(--signingGold);
    margin: 0;
  }

  #safety-staff .cs-title { margin: 0; }
  #safety-staff .cs-text  { margin: 0; }

  #safety-staff .cs-pill-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  #safety-staff .cs-pill {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--white);
    border: 0.5px solid rgba(0, 0, 0, 0.08);
    border-radius: 0.625rem;
    padding: 0.75rem 1rem;
  }

  #safety-staff .cs-pill-icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  #safety-staff .cs-pill-icon--gold { background: rgba(212, 168, 67, 0.12); }
  #safety-staff .cs-pill-icon--navy { background: rgba(15, 47, 91, 0.08); }
  #safety-staff .cs-pill-icon--blue { background: rgba(26, 120, 189, 0.1); }

  #safety-staff .cs-pill-icon svg { width: 1rem; height: 1rem; }

  #safety-staff .cs-pill-body {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
  }

  #safety-staff .cs-pill-title {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--navy);
    display: block;
  }

  #safety-staff .cs-pill-sub {
    font-size: 0.6875rem;
    color: var(--silver);
    display: block;
  }

  #safety-staff .cs-right {
    background: var(--white);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
  }

  #safety-staff .cs-right-label {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--navy);
    margin: 0 0 0.875rem;
  }

  #safety-staff .cs-checklist {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    flex: 1;
  }

  #safety-staff .cs-check-item {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
  }

  #safety-staff .cs-check-box {
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 0.25rem;
    background: var(--navy);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 0.0625rem;
    color: var(--white);
  }

  #safety-staff .cs-check-box svg { width: 0.5625rem; height: 0.5625rem; }

  #safety-staff .cs-check-text {
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--charcoal);
    margin: 0;
  }

  #safety-staff .cs-divider {
    height: 0.5px;
    background: rgba(0, 0, 0, 0.07);
    margin: 1rem 0;
  }

  #safety-staff .cs-stat-row {
    display: flex;
    gap: 0.5rem;
  }

  #safety-staff .cs-stat {
    flex: 1;
    background: #f7f7f6;
    border-radius: 0.5rem;
    padding: 0.625rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.1875rem;
  }

  #safety-staff .cs-stat-num {
    font-size: clamp(1.2rem, 3vw, 1.4rem);
    font-weight: 900;
    color: var(--navy);
    line-height: 1;
    display: block;
  }

  #safety-staff .cs-stat-label {
    font-size: 0.5625rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--silver);
    display: block;
  }
}

@media only screen and (min-width: 48rem) {
  #safety-staff .cs-container { padding: 0 2.5rem; }

  #safety-staff .cs-split { flex-direction: row; }

  #safety-staff .cs-left {
    border-bottom: none;
    border-right: 0.5px solid rgba(0, 0, 0, 0.07);
    flex: 1;
  }

  #safety-staff .cs-right { flex: 1; padding: 1.75rem; }
}

@media only screen and (min-width: 64rem) {
  #safety-staff .cs-container { padding: 0 6vw; }
  #safety-staff .cs-left      { padding: 2.25rem 2rem; }
  #safety-staff .cs-right     { padding: 2.25rem 2rem; }
}

@media only screen and (max-width: 30rem) {
  #safety-staff .cs-container { padding: 0 1rem; }
  #safety-staff .cs-stat-row  { gap: 0.375rem; }
  #safety-staff .cs-stat      { padding: 0.5rem 0.625rem; }
}


/*-- -------------------------- -->
<---         Registration       -->
<--- -------------------------- -*/

@media only screen and (min-width: 0px) {
  #register {
    padding: var(--sectionPadding);
    background: #f7f7f6;
  }

  #register .cs-container {
    padding: 0 1rem;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
  }

  #register .cs-left {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }

  /* Topper */
  #register .cs-topper {
    color: var(--signingGold);
    display: block;
  }

  #register .cs-title {
    margin: 0;
  }

  #register .cs-title em {
    font-style: normal;
    color: var(--signingGold);
  }

  #register .cs-text {
    margin: 0;
    max-width: 23.75rem;
  }

  #register .cs-details {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 0.25rem;
  }

  #register .cs-detail {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

  #register .cs-detail-icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.5rem;
    background: rgba(15, 47, 91, 0.07);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--navy);
  }

  #register .cs-detail-body {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
  }

  #register .cs-detail-label {
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--silver);
    display: block;
  }

  #register .cs-detail-val {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--navy);
    display: block;
  }

  #register .cs-divider {
    height: 0.5px;
    background: rgba(0, 0, 0, 0.08);
    margin: 0.25rem 0;
  }

  #register .cs-steps {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
  }

  #register .cs-step {
    display: flex;
    align-items: center;
    gap: 0.625rem;
  }

  #register .cs-step-num {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    border: 1.5px solid var(--lightGrey);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.625rem;
    font-weight: 700;
    color: var(--silver);
    flex-shrink: 0;
    transition: all 0.2s ease;
  }

  #register .cs-step-label {
    font-size: 0.8125rem;
    color: var(--silver);
    transition: color 0.2s ease;
  }

  #register .cs-step.is-done .cs-step-num {
    background: var(--navy);
    border-color: var(--navy);
    color: var(--white);
    font-size: 0.5625rem;
  }

  #register .cs-step.is-done .cs-step-label { color: var(--navy); }

  #register .cs-step.is-active .cs-step-num {
    background: var(--signingGold);
    border-color: var(--signingGold);
    color: var(--navy);
  }

  #register .cs-step.is-active .cs-step-label {
    font-weight: 700;
    color: var(--navy);
  }

  /* Form card */
  #register .cs-form-card {
    background: var(--white);
    border: 0.5px solid rgba(0, 0, 0, 0.09);
    border-radius: 0.875rem;
    overflow: hidden;
  }

  #register .cs-step-header {
    padding: 1.25rem 1.5rem 1.125rem;
    border-bottom: 0.5px solid rgba(0, 0, 0, 0.07);
  }

  /* Progress pills (form-specific — different from hero pills) */
  #register .cs-pills {
    display: flex;
    gap: 0.375rem;
    margin-bottom: 0.875rem;
  }

  #register .cs-pill {
    flex: 1;
    height: 0.25rem;
    border-radius: 0.125rem;
    background: var(--lightGrey);
    transition: background 0.3s ease;
  }

  #register .cs-pill.is-done   { background: var(--navy); }
  #register .cs-pill.is-active { background: var(--signingGold); }

  #register .cs-step-meta {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
  }

  #register .cs-step-name {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--signingGold);
    margin: 0 0 0.25rem;
  }

  #register .cs-step-title {
    font-size: clamp(1.1rem, 2.5vw, 1.4rem);
    font-weight: 900;
    color: var(--navy);
    margin: 0 0 0.1875rem;
    line-height: 1.2;
  }

  #register .cs-step-sub {
    font-size: 0.8125rem;
    color: var(--silver);
    margin: 0;
  }

  #register .cs-step-num-display {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--silver);
    white-space: nowrap;
    flex-shrink: 0;
    margin-top: 0.25rem;
  }

  #register .cs-summary {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-bottom: 0.5px solid rgba(0, 0, 0, 0.06);
    flex-wrap: wrap;
  }

  #register .cs-summary-card {
    flex: 1;
    min-width: 4.5rem;
    background: #f7f7f6;
    border: 0.5px solid rgba(0, 0, 0, 0.07);
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
  }

  #register .cs-summary-label {
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--silver);
    display: block;
    margin-bottom: 0.1875rem;
  }

  #register .cs-summary-val {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--navy);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
  }

  #register .cs-step-body {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  #register .cs-field {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
  }

  #register .cs-field--full { width: 100%; }

  #register .cs-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.875rem;
  }

  #register .cs-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--charcoal);
    display: block;
  }

  #register .cs-label-note {
    font-weight: 400;
    color: var(--silver);
  }

  #register .cs-input {
    width: 100%;
    height: 2.625rem;
    border: 0.5px solid rgba(0, 0, 0, 0.14);
    border-radius: 0.5rem;
    background: #fafafa;
    padding: 0 0.875rem;
    font-size: 0.875rem;
    color: var(--charcoal);
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }

  #register .cs-input:focus {
    border-color: var(--navy);
    box-shadow: 0 0 0 3px rgba(15, 47, 91, 0.1);
    background: var(--white);
  }

  #register .cs-radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    padding: 0.25rem 0;
  }

  #register .cs-radio {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--charcoal);
    cursor: pointer;
    user-select: none;
  }

  #register .cs-radio input[type="radio"] { display: none; }

  #register .cs-radio-dot {
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 50%;
    border: 1.5px solid var(--lightGrey);
    background: #fafafa;
    flex-shrink: 0;
    position: relative;
    transition: border-color 0.2s ease;
  }

  #register .cs-radio-dot::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--navy);
    transition: transform 0.18s ease;
  }

  #register .cs-radio input[type="radio"]:checked ~ .cs-radio-dot {
    border-color: var(--navy);
  }

  #register .cs-radio input[type="radio"]:checked ~ .cs-radio-dot::after {
    transform: translate(-50%, -50%) scale(1);
  }

  /* Week selector */
  #register .cs-weeks {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  #register .cs-week-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
  }

  #register .cs-month {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--navy);
    min-width: 3.25rem;
    flex-shrink: 0;
  }

  #register .cs-week-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  #register .cs-week-btn {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--charcoal);
    background: var(--white);
    border: 0.5px solid var(--lightGrey);
    border-radius: 100px;
    padding: 0.4375rem 1.125rem;
    cursor: pointer;
    transition: all 0.18s ease;
    white-space: nowrap;
  }

  #register .cs-week-btn:hover { border-color: var(--navy); color: var(--navy); }

  #register .cs-week-btn.is-active {
    background: var(--navy);
    border-color: var(--navy);
    color: var(--white);
  }

  #register .cs-cost-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--navy);
    border-radius: 0.625rem;
    padding: 1rem 1.25rem;
    margin-top: 0.25rem;
  }

  #register .cs-cost-left {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
  }

  #register .cs-cost-label {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
  }

  #register .cs-cost-sublabel {
    font-size: 0.75rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.35);
  }

  #register .cs-cost-amount {
    font-size: clamp(1.6rem, 4vw, 2rem);
    font-weight: 900;
    color: var(--signingGold);
    line-height: 1em;
  }

  /* Checkboxes */
  #register .cs-checkboxes {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  #register .cs-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    cursor: pointer;
    user-select: none;
  }

  #register .cs-checkbox input[type="checkbox"] { display: none; }

  #register .cs-checkbox-box {
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 0.25rem;
    border: 1.5px solid var(--lightGrey);
    background: #fafafa;
    flex-shrink: 0;
    margin-top: 0.125rem;
    position: relative;
    transition: background 0.18s ease, border-color 0.18s ease;
  }

  #register .cs-checkbox-box::after {
    content: "";
    position: absolute;
    top: 0.0625rem;
    left: 0.3125rem;
    width: 0.375rem;
    height: 0.625rem;
    border: 2px solid var(--white);
    border-top: none;
    border-left: none;
    transform: rotate(45deg) scale(0);
    transition: transform 0.18s ease;
  }

  #register .cs-checkbox input[type="checkbox"]:checked ~ .cs-checkbox-box {
    background: var(--navy);
    border-color: var(--navy);
  }

  #register .cs-checkbox input[type="checkbox"]:checked ~ .cs-checkbox-box::after {
    transform: rotate(45deg) scale(1);
  }

  #register .cs-checkbox-text {
    font-size: 0.875rem;
    line-height: 1.55em;
    color: var(--charcoal);
  }

  /* Success state */
  #register .cs-success {
    display: none;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 3.5rem 1.5rem;
    gap: 0.75rem;
  }

  #register .cs-success-icon {
    width: 3.75rem;
    height: 3.75rem;
    border-radius: 50%;
    background: rgba(15, 47, 91, 0.07);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem;
  }

  #register .cs-success-title {
    font-size: 1.375rem;
    font-weight: 900;
    color: var(--navy);
    margin: 0;
  }

  #register .cs-success-text {
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--silver);
    max-width: 25rem;
    margin: 0;
  }

  /* Form footer */
  #register .cs-form-footer {
    padding: 0 1.5rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
  }

  #register .cs-btn-back {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--silver);
    background: transparent;
    border: 0.5px solid var(--lightGrey);
    border-radius: 100px;
    padding: 0.6875rem 1.5rem;
    cursor: pointer;
    visibility: hidden;
    transition: all 0.18s ease;
  }

  #register .cs-btn-back:hover { border-color: var(--navy); color: var(--navy); }

  #register .cs-btn-next {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--navy);
    background: var(--signingGold);
    border: none;
    border-radius: 100px;
    padding: 0.75rem 2rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: background 0.18s ease;
  }

  #register .cs-btn-next:hover { background: #c49a35; }

  #register .cs-btn-submit {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--white);
    background: var(--navy);
    border: none;
    border-radius: 100px;
    padding: 0.75rem 2rem;
    cursor: pointer;
    transition: background 0.18s ease, box-shadow 0.18s ease;
  }

  #register .cs-btn-submit:hover {
    background: #1e3460;
    box-shadow: 0 4px 22px rgba(10, 22, 40, 0.25);
  }
}

@media only screen and (min-width: 48rem) {
  #register .cs-container { padding: 0 2.5rem; }

  #register .cs-step-header { padding: 1.375rem 2rem 1.25rem; }
  #register .cs-summary     { padding: 0.75rem 2rem; }
  #register .cs-step-body   { padding: 1.75rem 2rem; }
  #register .cs-form-footer { padding: 0 2rem 1.75rem; }
}

@media only screen and (min-width: 64rem) {
  #register .cs-container {
    padding: 0 6vw;
    display: grid;
    grid-template-columns: 21.25rem 1fr;
    gap: 3.75rem;
    align-items: start;
  }

  #register .cs-left {
    position: sticky;
    top: calc(var(--nav-offset, 7rem) + 2rem);
  }

  #register .cs-text { max-width: 100%; }

  #register .cs-step-header { padding: 1.5rem 2.25rem 1.25rem; }
  #register .cs-summary     { padding: 0.875rem 2.25rem; }
  #register .cs-step-body   { padding: 2rem 2.25rem; }
  #register .cs-form-footer { padding: 0 2.25rem 2rem; }
}

@media only screen and (min-width: 80rem) {
  #register .cs-container {
    grid-template-columns: 23.75rem 1fr;
    gap: 5rem;
  }
}

@media only screen and (max-width: 30rem) {
  #register .cs-step-header { padding: 1rem 1rem 0.875rem; }
  #register .cs-summary     { padding: 0.625rem 1rem; }
  #register .cs-step-body   { padding: 1.25rem 1rem; }
  #register .cs-form-footer { padding: 0 1rem 1.25rem; }
  #register .cs-field-row   { grid-template-columns: 1fr; }
  #register .cs-week-row    { flex-direction: column; align-items: flex-start; }
  #register .cs-steps       { display: none; }
}


/*-- -------------------------- -->
<---           Camp FAQ         -->
<--- -------------------------- -*/

@media only screen and (min-width: 0px) {
  #ossd-faq {
    background: var(--white);
    padding: var(--sectionPadding);
    border-top: 0.5px solid rgba(0, 0, 0, 0.06);
  }

  #ossd-faq .cs-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }

  #ossd-faq .cs-header {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  /* Header label — gold uppercase */
  #ossd-faq .cs-label {
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--signingGold);
    margin: 0;
  }

  #ossd-faq .cs-title { margin: 0; }

  #ossd-faq .cs-desc {
    margin: 0;
    max-width: 30rem;
  }

  #ossd-faq .cs-faq-list {
    list-style: none;
    padding: 0;
    margin: 0;
    border: 0.5px solid rgba(0, 0, 0, 0.08);
    border-radius: 0.75rem;
    overflow: hidden;
  }

  #ossd-faq .cs-faq-item {
    border-bottom: 0.5px solid rgba(0, 0, 0, 0.07);
  }

  #ossd-faq .cs-faq-item:last-child { border-bottom: none; }

  #ossd-faq .cs-faq-q {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.125rem 1.5rem;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background 0.2s ease;
  }

  #ossd-faq .cs-faq-q:hover { background: #f7f7f6; }

  #ossd-faq .cs-faq-q-text {
    font-size: clamp(1.1rem, 1.8vw, 1.3rem);
    font-weight: 600;
    color: var(--navy);
    line-height: 1.4;
    transition: color 0.2s ease;
  }

  #ossd-faq .cs-faq-icon {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    border: 0.5px solid rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.2s ease, border-color 0.2s ease;
  }

  #ossd-faq .cs-faq-icon svg {
    width: 0.625rem;
    height: 0.625rem;
    color: var(--navy);
    transition: color 0.2s ease;
  }

  #ossd-faq .cs-faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, padding 0.35s ease;
  }

  #ossd-faq .cs-faq-a p {
    font-size: 0.875rem;
    line-height: 1.75;
    color: var(--charcoal);
    padding: 0 1.5rem 1.125rem;
    margin: 0;
    max-width: 42.5rem;
  }

  #ossd-faq .cs-faq-item.cs-active .cs-faq-q { background: #f7f7f6; }
  #ossd-faq .cs-faq-item.cs-active .cs-faq-q-text { color: var(--navy); }

  #ossd-faq .cs-faq-item.cs-active .cs-faq-icon {
    background: var(--navy);
    border-color: var(--navy);
  }

  #ossd-faq .cs-faq-item.cs-active .cs-faq-icon svg { color: var(--white); }
  #ossd-faq .cs-faq-item.cs-active .cs-faq-a { max-height: 25rem; }
}

@media only screen and (min-width: 48rem) {
  #ossd-faq .cs-header {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2.5rem;
  }

  #ossd-faq .cs-header-left { flex-shrink: 0; }
  #ossd-faq .cs-desc { text-align: right; padding-bottom: 0.25rem; }
}

@media only screen and (min-width: 64rem) {
  #ossd-faq {
    padding-left: 6vw;
    padding-right: 6vw;
  }

  #ossd-faq .cs-faq-q   { padding: 1.25rem 1.75rem; }
  #ossd-faq .cs-faq-a p { padding: 1.75rem 1.25rem; }
}