/* ═══════════════════════════════════════════════════════
   GCDAY : Components
   Navbar, dropdowns, buttons, image cards, service cards,
   footer. Each block references the Webflow class it maps
   to in source-webflow/rendered-design/styles.md.
═══════════════════════════════════════════════════════ */

/* ═══ Typography helpers (Main Heading, Hero Heading copy, etc.) */

.eyebrow {
  display: inline-block;
  margin-bottom: var(--sp-3);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--white-sub);
}

.heading-main {
  margin-bottom: var(--sp-4);
  font-size: var(--text-4xl);
  line-height: 50px;
  font-weight: var(--weight-semi);
  text-align: center;
}

.heading-main--left {
  text-align: left;
}

.heading-lesser {
  margin-bottom: var(--sp-4);
  font-size: var(--text-2xl);
  line-height: 50px;
  font-weight: var(--weight-semi);
}

.title-small {
  margin-bottom: var(--sp-3);
  font-size: var(--text-base);
  line-height: var(--text-base);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

.lede {
  max-width: 60ch;
  font-size: var(--text-lg);
  line-height: var(--leading-body);
  font-weight: var(--weight-light);
  color: var(--surface-text);
}

@media (max-width: 478px) {
  .heading-main { font-size: var(--text-3xl); }
  .heading-lesser { font-size: var(--text-3xl); }
}

/* ═══ Image_Wrapper : 3px white-sub border, 15px radius
   The brand-signature image card treatment. */

.image-wrapper {
  display: flex;
  overflow: hidden;
  justify-content: center;
  align-items: center;
  border: var(--border-image);
  border-radius: var(--radius-lg);
}

.image-wrapper > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ═══ Button Primary : colour-cycling brand CTA
   The 8-colour animation lives in animations.css. */

.btn-primary {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 12px 24px;
  border-radius: var(--radius-md);
  background-color: var(--purple);
  color: #ffffff;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 20px;
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-ui);
  text-align: center;
  text-transform: capitalize;
  cursor: pointer;
  text-decoration: none;
  animation: btn-color-cycle 16s ease-in-out infinite,
             btn-text-cycle 16s steps(1, end) infinite;
  transition: transform var(--motion-base) var(--ease-standard);
  will-change: transform, background-color, color;
}

.btn-primary:hover,
.btn-primary:focus-visible {
  transform: var(--hover-shift);
  color: #ffffff;
}

.btn-primary--ghost {
  background-color: transparent;
  border: 2px solid var(--white-sub);
  color: var(--white-sub);
  animation: none;
}

.btn-primary--ghost:hover {
  transform: var(--hover-shift);
  background-color: var(--white-sub);
  color: var(--dark-grey);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}

/* ═══ Navbar (Navbar / Navbar Wrapper / Nav Link / Nav Dropdown) */

.site-header {
  position: relative;
  z-index: 50;
  width: 100%;
  background-color: transparent;
}

.navbar {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--sp-5) var(--page-gutter);
}

.navbar-wrapper {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--sp-5);
}

.navbar-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  color: var(--white-sub);
}

.navbar-brand img {
  height: 44px;
  width: auto;
}

.navbar-brand__wordmark {
  font-size: 22px;
  font-weight: var(--weight-bold);
  letter-spacing: 1.5px;
}

.nav-menu {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--sp-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  margin: 0 5px;
  padding: 5px 10px;
  color: var(--white-sub);
  font-size: var(--text-base);
  line-height: 20px;
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-ui);
  text-decoration: none;
  transition: color var(--motion-base) var(--ease-standard);
}

.nav-link:hover {
  color: var(--purple-on-dark);
}

.nav-dropdown {
  position: relative;
}

/* A real <button> now, so it needs the button chrome removed. It was a
   <span> in a focusable <li>, which gave screen readers an unlabelled
   list item and no hint that nine links sat behind it. */
.nav-dropdown__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  margin: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: inherit;
  color: var(--white-sub);
  font-size: var(--text-base);
  line-height: 20px;
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-ui);
  transition: color var(--motion-base) var(--ease-standard);
}

.nav-dropdown__toggle:hover {
  color: var(--purple-on-dark);
}

.nav-dropdown__icon {
  width: 12px;
  height: 12px;
  color: var(--purple-on-dark);
  transition: transform var(--motion-base) var(--ease-standard);
}

/* Was .nav-dropdown[open], which nothing ever set, so the chevron never
   turned. Driven by the button's own state now. */
.nav-dropdown__toggle[aria-expanded="true"] .nav-dropdown__icon {
  transform: rotate(180deg);
}

.nav-dropdown__list {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 240px;
  padding: var(--sp-3) var(--sp-4);
  margin: 0;
  list-style: none;
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 18px 40px -10px rgba(0, 0, 0, 0.35);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--motion-base) var(--ease-standard),
              visibility var(--motion-base) var(--ease-standard);
}

/* Hover still opens it for mouse users. The aria-expanded state is what
   keyboard and screen-reader users drive, and what the JS toggles. */
.nav-dropdown:hover .nav-dropdown__list,
.nav-dropdown__toggle[aria-expanded="true"] + .nav-dropdown__list {
  opacity: 1;
  visibility: visible;
}

.nav-dropdown__link {
  display: block;
  padding: 6px 4px;
  color: var(--dark-grey);
  font-size: var(--text-sm);
  font-weight: var(--weight-semi);
  text-decoration: none;
  transition: color var(--motion-base) var(--ease-standard);
}

/* Every navbar dropdown link hovers to brand purple for readability.
   (The colour combo classes are kept on the markup in case the small
   dot indicator or another visual cue ever uses them, but the hover
   colour is uniform.) */
.nav-dropdown__link:hover {
  color: var(--purple);
}

.nav-button-wrapper {
  display: flex;
  justify-content: flex-end;
}

.nav-toggle {
  display: none;
  padding: 10px;
  color: var(--white-sub);
}

@media (max-width: 991px) {
  .navbar-wrapper {
    grid-template-columns: auto 1fr auto;
  }
  .nav-menu {
    position: absolute;
    inset: 100% 0 auto 0;
    flex-direction: column;
    gap: 0;
    padding: var(--sp-5);
    background-color: var(--dark-grey);
    border-top: 1px solid rgba(245, 247, 246, 0.12);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--motion-base) var(--ease-standard),
                transform var(--motion-base) var(--ease-standard),
                visibility var(--motion-base) var(--ease-standard);
  }
  .site-header[data-menu-open="true"] .nav-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .nav-dropdown__list {
    position: static;
    transform: none;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    margin-top: var(--sp-2);
    background-color: rgba(255, 255, 255, 0.95);
  }
  .nav-toggle { display: inline-flex; }
}

/* ═══ Hero (Section #Landing + Hero Heading + LandingCopy) */

.hero {
  position: relative;
  isolation: isolate;
  min-height: 78vh;
  display: flex;
  align-items: center;
  padding: var(--sp-9) var(--page-gutter) var(--sp-10);
  overflow: hidden;
}

.hero__photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-color: var(--dark-grey);
}

.hero__inner {
  position: relative;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  text-align: left;
}

.landing-copy {
  display: block;
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--weight-semi);
  font-size: var(--text-hero);
  line-height: 1.02;
  color: var(--white-sub);
}

.landing-copy + .landing-copy {
  margin-top: var(--sp-3);
}

/* Staggered indentation creates the layered hero shape from the Webflow design.
   Lines stagger inside the centered hero__inner block, so the entire group
   stays visually balanced on the page rather than leaning right. */
.landing-copy--line1 { padding-left: 0; }
.landing-copy--line2 { padding-left: 2.5rem; }
.landing-copy--line3 { padding-left: 5rem; }

@media (max-width: 767px) {
  .hero { min-height: 70vh; padding: var(--sp-8) var(--page-gutter-sm) var(--sp-9); }
  .landing-copy--line2 { padding-left: 1.5rem; }
  .landing-copy--line3 { padding-left: 3rem; }
}

@media (max-width: 478px) {
  .landing-copy--line2 { padding-left: 1rem; }
  .landing-copy--line3 { padding-left: 2rem; }
}

.landing-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-4);
  margin: var(--sp-7) auto 0;
}

@media (max-width: 991px) {
  .landing-actions { max-width: 100%; }
}

/* ═══ Decorative icon graphics, staggered down the page */
/* 4 icons alternating left → right → left → right, each 30vw wide and centered
   exactly on the viewport edge (so half the icon is visible). They sit behind
   the content and rotate inward on scroll (left=cw, right=ccw). */

/* #main is the positioning context for the icon overlay. */
#main { position: relative; }

/* Every section sits above the icon layer. */
#main > section { position: relative; z-index: 1; }

.icon-bleeds {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.icon-bleed {
  position: absolute;
  width: 60vw;             /* Bigger so the visible sliver still feels present */
  height: auto;
  opacity: 0.55;           /* Lower opacity so they stay decorative, not loud */
  filter: saturate(1.05);
  will-change: transform;
  pointer-events: none;
  transform-origin: 50% 50%;
  display: block;
}

/* Show ~16vw of each icon (about 27% of its width). The other ~73%
   stays tucked offscreen so the spinning never crosses into the
   text area at common desktop widths. */
.icon-bleed--left  { left:  -44vw; }
.icon-bleed--right { right: -44vw; }

/* Stagger: 3 icons spread further apart vertically so they don't bunch. */
.icon-bleed--1 { top: 12%; }
.icon-bleed--2 { top: 46%; }
.icon-bleed--3 { top: 80%; }

@media (max-width: 991px) {
  .icon-bleed { width: 70vw; opacity: 0.35; }
  .icon-bleed--left  { left:  -54vw; }   /* 16vw visible */
  .icon-bleed--right { right: -54vw; }
}

@media (max-width: 600px) {
  .icon-bleed { width: 80vw; opacity: 0.22; }
  .icon-bleed--left  { left:  -64vw; }   /* 16vw visible */
  .icon-bleed--right { right: -64vw; }
}

@media (prefers-reduced-motion: reduce) {
  .icon-bleed { transform: none !important; }
}

/* ═══ Service card grid (Section #Services) */

.services-section {
  position: relative;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sp-7);
  max-width: 1200px;
  margin: var(--sp-7) auto 0;
}

.service-card {
  display: flex;
  flex-direction: column;
  padding: var(--sp-5);
  border: 3px solid var(--white-sub);
  border-radius: var(--radius-lg);
  background-color: var(--surface-card-bg);
  box-shadow: var(--shadow-soft);
  transition: transform var(--motion-base) var(--ease-standard),
              box-shadow var(--motion-base) var(--ease-standard);
}

.service-card:hover {
  transform: var(--hover-shift);
}

.service-card__media {
  width: 100%;
  aspect-ratio: 4 / 3;
  margin-bottom: var(--sp-5);
  border-radius: var(--radius-md);
  overflow: hidden;
  background-color: #0e0e0e;
  background-image:
    linear-gradient(135deg, rgba(11, 133, 200, 0.25), rgba(129, 33, 102, 0.25)),
    repeating-linear-gradient(45deg, rgba(245, 247, 246, 0.04) 0 10px, transparent 10px 22px);
}

.service-card__title {
  margin: 0 0 var(--sp-3);
  font-size: 28px;
  font-weight: var(--weight-semi);
  color: var(--white-sub);
}

.service-card__text {
  margin: 0 0 var(--sp-5);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--surface-text-dim);
}

.service-card__cta {
  margin-top: auto;
  align-self: flex-start;
}

/* ═══ Philosophy split (About section, Hayden intro) */

.philosophy-split {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--sp-8);
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

.philosophy-split__media {
  position: relative;
  aspect-ratio: 4 / 5;
  border: 3px solid var(--white-sub);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: #0e0e0e;
  background-image:
    linear-gradient(135deg, rgba(67, 176, 73, 0.20), rgba(11, 133, 200, 0.20)),
    radial-gradient(circle at 40% 40%, rgba(245, 247, 246, 0.08), transparent 70%);
  box-shadow: var(--shadow-soft);
}

.philosophy-split__body p {
  font-size: var(--text-lg);
  line-height: var(--leading-body);
  color: var(--surface-text-dim);
  max-width: 52ch;
}

@media (max-width: 991px) {
  .philosophy-split {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }
}

/* ═══ Upcoming events (empty state placeholder) */

.events-empty {
  margin-top: var(--sp-7);
  padding: var(--sp-8) var(--sp-6);
  border: 1px dashed rgba(245, 247, 246, 0.25);
  border-radius: var(--radius-lg);
  text-align: center;
  color: var(--surface-text-dim);
}

.events-empty__title {
  margin: 0 0 var(--sp-3);
  font-size: var(--text-xl);
  font-weight: var(--weight-semi);
  color: var(--white-sub);
}

/* ═══ Footer (Footer Wrapper / Footer Link / Title Small) */

.site-footer {
  margin-top: var(--sp-10);
  padding: var(--sp-9) var(--page-gutter) var(--sp-7);
  background-color: #0d0d0d;
  border-top: 1px solid rgba(245, 247, 246, 0.08);
}

.footer-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-8);
  max-width: 1080px;
  margin: 0 auto;
  justify-content: space-between;
  align-items: flex-start;
}

.footer-brand-col {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  flex-shrink: 0;
}

.footer-brand img {
  height: 60px;
  width: auto;
}

.footer-socials {
  display: flex;
  gap: var(--sp-3);
}

.footer-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(245, 247, 246, 0.08);
  color: var(--white-sub);
  text-decoration: none;
  transition: transform var(--motion-base) var(--ease-standard),
              color var(--motion-base) var(--ease-standard),
              background var(--motion-base) var(--ease-standard);
}

.footer-social:hover {
  transform: var(--hover-shift);
  color: var(--purple-on-dark);
  background: rgba(245, 247, 246, 0.14);
}

.footer-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(140px, auto));
  gap: var(--sp-8);
  flex: 1;
}

.footer-block {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.footer-block__title {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--white-sub);
  margin-bottom: var(--sp-1);
}

.footer-block__links {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.footer-link {
  margin: 4px 0;
  color: var(--white-sub);
  font-size: var(--text-sm);
  line-height: var(--text-base);
  font-weight: var(--weight-bold);
  text-decoration: none;
  transition: transform var(--motion-base) var(--ease-standard),
              color var(--motion-base) var(--ease-standard);
}

.footer-link:hover {
  transform: var(--hover-shift);
  color: var(--purple-on-dark);
}

.footer-meta {
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(245, 247, 246, 0.08);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  justify-content: space-between;
  align-items: center;
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
  font-size: var(--text-sm);
  color: var(--surface-text-dim);
}

@media (max-width: 767px) {
  .footer-wrapper { flex-direction: column; }
  .footer-columns {
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }
}

@media (max-width: 478px) {
  .footer-columns { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  .footer-content {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-6);
  }
  .footer-wrapper {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .footer-block {
    align-items: center;
  }
  .footer-meta {
    flex-direction: column;
    text-align: center;
  }
}

@media (max-width: 478px) {
  .footer-content { grid-template-columns: 1fr; }
}

/* ═══ Contact Modal */

.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 10, 10, 0.72);
  padding: var(--sp-4);
  overflow-y: auto;
}

.modal[hidden] { display: none; }

.modal__panel {
  /* margin auto rather than flex centring alone, or a panel taller
     than the viewport has its top pushed above the scroll area. */
  margin: auto;
  position: relative;
  width: 100%;
  max-width: 520px;
  background: var(--dark-grey);
  border: 1px solid rgba(245, 247, 246, 0.12);
  border-radius: 15px;
  padding: var(--sp-7) var(--sp-6);
  color: var(--white-sub);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6);
}

.modal__close {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-4);
  background: none;
  border: 0;
  color: var(--white-sub);
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  transition: transform var(--motion-base) var(--ease-standard),
              color var(--motion-base) var(--ease-standard);
}

.modal__close:hover {
  transform: var(--hover-shift);
  color: var(--purple-on-dark);
}

.modal__title {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: var(--text-h3, 30px);
  margin: 0 0 var(--sp-2);
}

.modal__subtitle {
  margin: 0 0 var(--sp-5);
  color: var(--surface-text-dim, rgba(245, 247, 246, 0.7));
  font-size: var(--text-base);
}

.form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.form__row {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.form__label {
  font-size: 13.5px;
  font-weight: var(--weight-semi);
  color: var(--white-sub);
  letter-spacing: 0.25px;
}

.form__req {
  color: var(--pink-on-dark);
  margin-left: 4px;
}

.form__input,
.form__select,
.form__textarea {
  width: 100%;
  padding: 12px 14px;
  background: rgba(245, 247, 246, 0.06);
  border: 1px solid rgba(245, 247, 246, 0.18);
  border-radius: 8px;
  color: var(--white-sub);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: var(--weight-light, 300);
  line-height: 20px;
  transition: border-color var(--motion-base) var(--ease-standard),
              background var(--motion-base) var(--ease-standard);
}

.form__input:focus,
.form__select:focus,
.form__textarea:focus {
  outline: none;
  border-color: var(--light-blue);
  background: rgba(245, 247, 246, 0.10);
}

/* The open dropdown list is drawn by the browser, not the page, and it takes
   the white text from the select above but not the see-through dark fill.
   That left white text on a white list. Giving the options a solid dark
   background keeps the list readable, and color-scheme asks the browser to
   draw the list and its scrollbar in dark mode too. */
.form__select {
  color-scheme: dark;
}

.form__select option {
  background: var(--surface-card-bg);
  color: var(--white-sub);
}

.form__select option:disabled {
  color: var(--surface-text-dim);
}

.form__textarea {
  min-height: 120px;
  resize: vertical;
}

.form__status {
  min-height: 1.2em;
  font-size: var(--text-sm);
}

.form__status.is-error   { color: var(--red-on-dark); }
.form__status.is-success { color: var(--green); }

/* ═══════════════════════════════════════════════════════
   SERVICE DETAIL PAGE COMPONENTS
   Used by every service detail page (Individual Support,
   Group Programs, etc.). Layout primitives come from
   layout.css (.grid, .grid--left, .grid--right). Brand
   accent comes from --accent, which body.service-* sets.
═══════════════════════════════════════════════════════ */

/* ─── Service hero: page title + banner image stacked. */

.service-hero {
  padding: var(--sp-9) var(--page-gutter) var(--sp-7);
}

.service-hero__title {
  margin: 0 auto var(--sp-7);
  max-width: var(--container-prose);
  text-align: center;
  font-size: var(--text-hero);
  line-height: var(--leading-tight);
  font-weight: var(--weight-semi);
  color: var(--white-sub);
}

.service-hero__banner {
  position: relative;
  width: 100%;
  max-width: 1400px;
  aspect-ratio: 16 / 7;
  margin: 0 auto;
  border: var(--border-image);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: #0e0e0e;
  background-image:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 25%, transparent), color-mix(in srgb, var(--accent) 0%, transparent)),
    radial-gradient(circle at 30% 40%, rgba(245, 247, 246, 0.10), transparent 65%);
  box-shadow: var(--shadow-soft);
}

.service-hero__banner > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 991px) {
  .service-hero { padding: var(--sp-8) var(--page-gutter-sm) var(--sp-7); }
  .service-hero__banner { aspect-ratio: 16 / 9; }
}

@media (max-width: 600px) {
  .service-hero__banner { aspect-ratio: 4 / 3; }
}

/* ─── Centered callout heading (between hero and body grids). */

.service-callout {
  max-width: var(--container-prose);
  margin: var(--sp-7) auto var(--sp-7);
  padding: 0 var(--page-gutter);
  text-align: center;
}

.service-callout__heading {
  margin: 0;
  font-size: var(--text-3xl);
  line-height: var(--leading-snug);
  font-weight: var(--weight-semi);
  color: var(--white-sub);
}

.service-callout__heading::after {
  content: "";
  display: block;
  width: 64px;
  height: 3px;
  margin: var(--sp-5) auto 0;
  background: var(--accent);
  border-radius: var(--radius-pill);
}

@media (max-width: 600px) {
  .service-callout__heading { font-size: var(--text-2xl); }
}

/* ─── Body content blocks: alternating text + image grids.
   Uses .grid .grid--left or .grid--right from layout.css for the
   2-column layout. .service-content stacks blocks vertically. */

.service-content {
  display: flex;
  flex-direction: column;
  gap: var(--sp-9);
  padding: var(--sp-7) var(--page-gutter) var(--sp-9);
  max-width: 1280px;
  margin: 0 auto;
}

@media (max-width: 991px) {
  .service-content {
    padding: var(--sp-7) var(--page-gutter-sm) var(--sp-8);
    gap: var(--sp-8);
  }
}

.content-block {
  align-items: center;
}

.content-block__copy > h2,
.content-block__copy > h3 {
  margin: 0 0 var(--sp-4);
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  font-weight: var(--weight-semi);
  color: var(--white-sub);
}

.content-block__copy > p {
  margin: 0 0 var(--sp-4);
  font-size: var(--text-lg);
  line-height: var(--leading-body);
  color: var(--surface-text-dim);
}

.content-block__copy > p:last-child { margin-bottom: 0; }

.content-block__media {
  aspect-ratio: 4 / 3;
  width: 100%;
  border: var(--border-image);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: #0e0e0e;
  background-image:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%),
    radial-gradient(circle at 60% 40%, rgba(245, 247, 246, 0.08), transparent 70%);
  box-shadow: var(--shadow-soft);
}

.content-block__media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ─── Feature grid: 4 cards (Start With Trust block). */

.feature-section {
  padding: var(--sp-8) var(--page-gutter) var(--sp-9);
  max-width: 1280px;
  margin: 0 auto;
  text-align: center;
}

.feature-section__intro {
  max-width: 60ch;
  margin: 0 auto var(--sp-7);
  font-size: var(--text-lg);
  line-height: var(--leading-body);
  color: var(--surface-text-dim);
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-5);
  margin-top: var(--sp-6);
}

.feature-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding: var(--sp-6) var(--sp-5);
  border: 3px solid var(--white-sub);
  border-radius: var(--radius-lg);
  background-color: var(--surface-card-bg);
  box-shadow: var(--shadow-soft);
  transition: transform var(--motion-base) var(--ease-standard),
              border-color var(--motion-base) var(--ease-standard);
}

.feature-card:hover {
  transform: var(--hover-shift);
  border-color: var(--accent);
}

.feature-card__title {
  margin: 0 0 var(--sp-3);
  font-size: var(--text-xl);
  font-weight: var(--weight-semi);
  color: var(--white-sub);
}

.feature-card__title::before {
  content: "";
  display: block;
  width: 32px;
  height: 3px;
  margin-bottom: var(--sp-3);
  background: var(--accent);
  border-radius: var(--radius-pill);
}

.feature-card__text {
  margin: 0;
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--surface-text-dim);
}

/* ─── Service closing message + CTA. */

.service-closing {
  max-width: var(--container-prose);
  margin: 0 auto;
  padding: var(--sp-7) var(--page-gutter) var(--sp-10);
  text-align: center;
}

.service-closing__heading {
  margin: 0 0 var(--sp-5);
  font-size: var(--text-3xl);
  line-height: var(--leading-snug);
  font-weight: var(--weight-semi);
  color: var(--white-sub);
}

.service-closing__copy {
  margin: 0 auto var(--sp-7);
  max-width: 60ch;
  font-size: var(--text-lg);
  line-height: var(--leading-body);
  color: var(--surface-text-dim);
}

@media (max-width: 600px) {
  .service-closing__heading { font-size: var(--text-2xl); }
}

/* ═══════════════════════════════════════════════════════
   CONTENT PAGE COMPONENTS
   Used by the non-service pages: Philosophy, Hayden's Story,
   Partners, Resources, Quotes, Newsletter.
═══════════════════════════════════════════════════════ */

/* ─── Generic empty state (Resources empty list, Quotes placeholder) */

.empty-state {
  margin: var(--sp-7) auto 0;
  max-width: 720px;
  padding: var(--sp-8) var(--sp-6);
  border: 1px dashed rgba(245, 247, 246, 0.25);
  border-radius: var(--radius-lg);
  text-align: center;
  color: var(--surface-text-dim);
}

.empty-state__title {
  margin: 0 0 var(--sp-3);
  font-size: var(--text-xl);
  font-weight: var(--weight-semi);
  color: var(--white-sub);
}

/* ─── Partner card grid (Partners page) */

.partners-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--sp-5);
  max-width: 1280px;
  margin: var(--sp-7) auto 0;
}

.partner-card {
  display: flex;
  flex-direction: column;
  padding: var(--sp-6) var(--sp-6);
  border: 3px solid var(--white-sub);
  border-radius: var(--radius-lg);
  background-color: var(--surface-card-bg);
  box-shadow: var(--shadow-soft);
  transition: transform var(--motion-base) var(--ease-standard),
              border-color var(--motion-base) var(--ease-standard);
}

.partner-card:hover {
  transform: var(--hover-shift);
  border-color: var(--accent);
}

.partner-card__name {
  margin: 0 0 var(--sp-2);
  font-size: var(--text-xl);
  font-weight: var(--weight-semi);
  color: var(--white-sub);
}

.partner-card__name::before {
  content: "";
  display: block;
  width: 32px;
  height: 3px;
  margin-bottom: var(--sp-3);
  background: var(--accent);
  border-radius: var(--radius-pill);
}

.partner-card__tagline {
  margin: 0 0 var(--sp-4);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--surface-text);
}

.partner-card__description {
  margin: 0 0 var(--sp-5);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--surface-text-dim);
}

.partner-card__cta {
  margin-top: auto;
  align-self: flex-start;
}

/* ─── Vertical timeline (Hayden's Story)
   Each entry is a substantive section, not a list bullet. The page IS
   the timeline, so spacing, type sizes, and the accent rail are all
   tuned to carry weight as the user scrolls through them. */

.timeline {
  position: relative;
  max-width: 900px;
  margin: var(--sp-7) auto var(--sp-9);
  padding: 0 var(--page-gutter) 0 calc(var(--page-gutter) + var(--sp-8));
}

@media (max-width: 600px) {
  .timeline {
    padding-left: calc(var(--page-gutter-sm) + var(--sp-6));
    padding-right: var(--page-gutter-sm);
  }
}

.timeline::before {
  content: "";
  position: absolute;
  left: calc(var(--page-gutter) + 18px);
  top: 12px;
  bottom: 12px;
  width: 2px;
  background: linear-gradient(
    to bottom,
    rgba(245, 247, 246, 0.05),
    rgba(245, 247, 246, 0.22) 8%,
    rgba(245, 247, 246, 0.22) 92%,
    rgba(245, 247, 246, 0.05)
  );
  border-radius: var(--radius-pill);
}

@media (max-width: 600px) {
  .timeline::before {
    left: calc(var(--page-gutter-sm) + 12px);
  }
}

.timeline-item {
  position: relative;
  padding: var(--sp-3) 0 var(--sp-8);
}

.timeline-item:last-child { padding-bottom: 0; }

.timeline-item::before {
  content: "";
  position: absolute;
  left: calc(var(--sp-8) * -1 + 11px);
  top: 22px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 5px var(--surface-bg), 0 0 0 7px rgba(245, 247, 246, 0.10);
}

@media (max-width: 600px) {
  .timeline-item::before {
    left: calc(var(--sp-6) * -1 + 5px);
    width: 14px;
    height: 14px;
  }
}

/* Each entry's content lives inside a mask that does not move, so the
   slide inside it can start out to the left and be genuinely clipped
   rather than merely transparent. The mask reaches back to just clear of
   the dot, then pays the distance back as padding so the content sits
   exactly where it always did.

   The offset is a token because the rail and dot shift at the narrow
   breakpoint, and the mask has to follow them. */

.timeline { --tl-mask-offset: 30px; }

.timeline-item__mask {
  overflow: hidden;
  margin-left: calc(var(--tl-mask-offset) * -1);
  padding-left: var(--tl-mask-offset);
}

@media (max-width: 600px) {
  .timeline { --tl-mask-offset: 11px; }
}

.timeline-item__year {
  display: inline-block;
  margin: 0 0 var(--sp-3);
  padding: 4px 12px;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: 0.3px;
  /* Not uppercased. These labels aren't all years, and forcing caps turned
     "2020's" into "2020'S" and "Mid 20s" into "MID 20S". The markup carries
     the casing each label should actually read in. */
  text-transform: none;
  color: var(--accent-text);
  border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.timeline-item__title {
  margin: 0 0 var(--sp-3);
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  font-weight: var(--weight-semi);
  color: var(--white-sub);
}

.timeline-item__text {
  margin: 0;
  font-size: var(--text-lg);
  line-height: var(--leading-body);
  color: var(--surface-text-dim);
}

@media (max-width: 600px) {
  .timeline-item__title { font-size: var(--text-xl); }
  .timeline-item__text  { font-size: var(--text-base); }
}

/* ─── Newsletter signup form */

.newsletter-section {
  max-width: 640px;
  margin: 0 auto;
  padding: var(--sp-7) var(--page-gutter) var(--sp-10);
  text-align: center;
}

.newsletter-section__intro {
  margin: 0 auto var(--sp-7);
  max-width: 56ch;
  font-size: var(--text-lg);
  line-height: var(--leading-body);
  color: var(--surface-text-dim);
}

.newsletter-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  text-align: left;
}

.newsletter-form__row {
  display: flex;
  gap: var(--sp-3);
}

.newsletter-form__row .form__input {
  flex: 1;
  min-width: 0;
}

.newsletter-form__row .btn-primary {
  flex-shrink: 0;
}

@media (max-width: 478px) {
  .newsletter-form__row {
    flex-direction: column;
  }
}