/* TOZ Services page styles — page-specific (shared header/nav/footer/mobile-menu
   and :root tokens live in /css/shared.css) */


/* =============================================================================
   SHARED — Buttons (frosted-glass standard,§13) + section titles
   ============================================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 18px 36px;
  border: 1px solid currentColor;
  border-radius: 0;
  cursor: pointer;
  transition: transform 0.3s var(--ease-spring),
              border-color 0.3s var(--ease-spring),
              color 0.3s var(--ease-spring);
}
.btn--ghost {
  background: rgba(28, 36, 75, 0.4);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  color: var(--toz-white);
  border-color: rgba(229, 228, 235, 0.6);
}
.btn--ghost:hover {
  color: var(--toz-teal-bright);
  border-color: var(--toz-teal-bright);
  transform: translateY(-1px);
}
/* Hover previously used --toz-teal, which measures only 2.58:1 on this
   section's --toz-white background (a token later darkened to #E5E4EB,
   2026-09-07) — --toz-teal-on-light passes (~4.98:1); see the matching
   fix + full explanation in about.css. */
.btn--ghost--on-light {
  background: rgba(229, 228, 235, 0.50);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  color: var(--toz-indigo);
  border-color: var(--toz-indigo);
}
.btn--ghost--on-light:hover {
  color: var(--toz-teal-on-light);
  border-color: var(--toz-teal-on-light);
  transform: translateY(-1px);
}
.btn:focus-visible {
  outline: 2px solid var(--toz-teal-bright);
  outline-offset: 4px;
}

/* Shared section-title typography (colour set per section) */
.day-program__title,
.tozpas__title,
.advocacy__title {
  font-family: 'Poppins', sans-serif;
  font-weight: 100;
  font-size: clamp(2.5rem, 5.2vw, 4rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0;
}

/* =============================================================================
   1. HERO — full-bleed image placeholder + standard gradient overlay
   ============================================================================= */

.hero {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 120px 24px 96px;
  --hero-bg: url('/images/IMG_6031.webp');
  background: var(--hero-bg) center / cover no-repeat;
  color: var(--toz-white);
  text-align: center;
}
@media (max-width: 768px) {
  .hero { --hero-bg: url('/images/IMG_6031-mobile.webp'); }
}
.hero__overlay {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg,
    rgba(28, 36, 75, 0.50) 0%,
    rgba(20, 20, 54, 0.30) 35%,
    rgba(9, 6, 18, 0.65) 100%);
}
.hero__inner { max-width: 960px; }
.hero__title {
  font-family: 'Karla', sans-serif;
  font-weight: 100;
  font-size: clamp(3rem, 7vw, 6.5rem);
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--toz-white);
  margin: 0;
  white-space: nowrap;
  hyphens: none;
}
/* =============================================================================
   2. SERVICES NAVIGATION — white, 3 image + title anchor cards
   ============================================================================= */

.svc-intro {
  background: var(--toz-white);
  padding: 140px 24px;
  color: var(--toz-indigo);
}
.svc-intro__inner { max-width: var(--max-content); margin: 0 auto; }
.svc-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}
.svc-card {
  display: flex;
  flex-direction: column;
  color: var(--toz-indigo);
  border: 1px solid rgba(28, 36, 75, 0.12);
  transition: transform 0.3s var(--ease-spring), border-color 0.3s var(--ease-spring);
}
.svc-card:hover { transform: translateY(-4px); border-color: var(--toz-teal); }
.svc-card:focus-visible { outline: 2px solid var(--toz-teal); outline-offset: 4px; }
.svc-card__img { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; }
.svc-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.svc-card__text { padding: 24px 26px; text-align: center; }
.svc-card__title {
  font-family: 'Karla', sans-serif;
  font-weight: 100;
  font-size: 1.4rem;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--toz-indigo);
  margin: 0;
}

/* =============================================================================
   3. TOZ DAY PROGRAM — indigo, simple two-column intro + image
   ============================================================================= */

.day-program {
  background: var(--toz-indigo);
  padding: 140px 24px;
  color: var(--toz-white);
}
.day-program__inner { max-width: var(--max-content); margin: 0 auto; }
.day-program__intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
}
.day-program__title { color: var(--toz-white); margin: 0 0 28px; }
.day-program__body {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 18px;
  line-height: 1.7;
  color: var(--toz-white);
  margin: 0 0 16px;
  text-wrap: pretty;
}
.day-program__body:last-child { margin-bottom: 0; }
/* 800/774 matches the supplied lead photo's native ratio (near-square) —
   avoids the crop that the previous 4/5 portrait placeholder box would
   have forced on a real, much-less-elongated image. */
.day-program__lead-img { margin: 0; aspect-ratio: 800 / 774; overflow: hidden; }
.day-program__lead-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.day-program__gallery {
  margin-top: 64px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
/* 3/4 matches all three supplied gallery photos' shared native portrait
   ratio — was 1/1, which would have cropped a quarter off each. */
.day-program__gallery figure { margin: 0; aspect-ratio: 3 / 4; overflow: hidden; }
.day-program__gallery figure img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* =============================================================================
   PARALLAX BANDS — full-bleed image placeholders (no text), hero overlay
   ============================================================================= */

.partners-band {
  position: relative;
  height: 420px;
  /* PLACEHOLDER — swap each variant to background-image: url(...) */
  background: var(--toz-indigo-alt);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.partners-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(28, 36, 75, 0.50) 0%,
    rgba(20, 20, 54, 0.30) 35%,
    rgba(9, 6, 18, 0.65) 100%);
}
.partners-band--warehouse {
  background-image: url('/images/TOZPAS_Warehouse_GoodThing_2025.webp');
}
@media (max-width: 768px) {
  .partners-band--warehouse { background-image: url('/images/TOZPAS_Warehouse_GoodThing_2025-mobile.webp'); }
}

/* =============================================================================
   6. ADVOCACY THROUGH ARTS — white; compact editorial showcase.
      Suitcase Stories and The Sound of All of Us are large featured
      projects (image + text stacked, order reversed between the two);
      Draw Us In / Yukon School & Community Inclusion Residency form a
      compact side-by-side pair. (A closing video is planned for a later
      pass — deliberately not included yet, per the director.)
   ============================================================================= */

.advocacy {
  background: var(--toz-indigo-alt);
  padding: 140px 24px;
  color: var(--toz-white);
}
.advocacy__inner { max-width: var(--max-content); margin: 0 auto; }
/* Editorial, left-led intro — heading and paragraph sit in an asymmetric
   two-column relationship rather than stacked on a single centred axis,
   so the section opens like a magazine spread instead of a second hero. */
.advocacy__head {
  max-width: var(--max-content);
  margin: 0 auto 80px;
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.3fr);
  gap: 48px;
  align-items: start;
  text-align: left;
}
.advocacy__title {
  color: var(--toz-white);
}
.advocacy__lead {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 1.1rem;
  line-height: 1.75;
  color: var(--toz-white);
  opacity: 0.9;
  margin: 0;
  padding-top: 0.35em;
  text-wrap: pretty;
}

/* Featured projects — Suitcase Stories (image-first) and The Sound of
   All of Us (text-first); DOM order alone gives the "reversed" layout. */
.advocacy__featured {
  max-width: var(--max-content);
  margin: 64px auto 0;
}
/* The header's own bottom margin already provides the gap before the
   first featured project (Suitcase Stories). */
.advocacy__head + .advocacy__featured { margin-top: 0; }
.advocacy__featured-img { aspect-ratio: 21 / 9; margin: 0 0 28px; overflow: hidden; }
.advocacy__featured-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.advocacy__featured-text {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}
/* Suitcase Stories only — info splits into an editorial grid (date/title
   in one column, description in another) instead of another centred
   block stacked under the image. */
.advocacy__featured--split .advocacy__featured-text {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 48px;
  text-align: left;
  align-items: start;
}
.advocacy__featured-meta .project__title { margin-bottom: 0; }

/* Draw Us In / Yukon School & Community Inclusion Residency — compact pair */
.advocacy__pair {
  max-width: var(--max-content);
  margin: 64px auto 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px;
}
.advocacy__pair-img { aspect-ratio: 4 / 3; margin: 0 0 20px; overflow: hidden; }
.advocacy__pair-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.project__date {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--toz-teal-bright);
  margin: 0 0 12px;
}
.project__title {
  font-family: 'Karla', sans-serif;
  font-weight: 100;
  font-size: 2rem;
  line-height: 1.15;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--toz-white);
  margin: 0 0 16px;
}
.advocacy__pair-text .project__title { font-size: 1.5rem; }
.project__body {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 17px;
  line-height: 1.7;
  color: var(--toz-white);
  opacity: 0.9;
  margin: 0;
  text-wrap: pretty;
}
.advocacy__pair-text .project__body { font-size: 16px; }

/* The Sound of All of Us — text-first layout (image follows text), unlike
   Suitcase Stories' split image-first layout; give the text a bottom gap
   before the image below it, mirroring the image's own 28px gap above text
   in the split layout. */
.advocacy__featured-text + .advocacy__featured-img { margin-top: 28px; }

/* =============================================================================
   5. DR. AUBYN O'GRADY QUOTE — standalone full-width block between TOZPAS and
      Advocacy. Same treatment as the home page's pull-quote (body +
      attribution only, no photo carousel).
   ============================================================================= */

/* Full-width parallax artwork band between TOZPAS and Advocacy — same
   gradient overlay + fixed-attachment treatment as the site's other
   parallax bands. */
.svc-pullquote {
  position: relative;
  isolation: isolate;
  padding: 140px 24px;
  text-align: center;
  color: var(--toz-white);
  background-image: url('/images/S_TR_Artwork_LeavesFlowers_2026.webp');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  overflow: hidden;
}
@media (max-width: 768px) {
  .svc-pullquote { background-image: url('/images/S_TR_Artwork_LeavesFlowers_2026-mobile.webp'); }
}
.svc-pullquote::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg,
    rgba(28, 36, 75, 0.50) 0%,
    rgba(20, 20, 54, 0.30) 35%,
    rgba(9, 6, 18, 0.65) 100%);
}
.svc-pullquote__body {
  max-width: 880px;
  margin: 0 auto 40px;
  font-family: 'Karla', sans-serif;
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1.5rem, 3.4vw, 2.5rem);
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--toz-white);
}
.svc-pullquote__attribution {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-style: normal;
  color: var(--toz-teal-bright);
}

/* =============================================================================
   4. TOZPAS — indigo-alt gallery wall, image-led showcase
   ============================================================================= */

.tozpas {
  background: var(--toz-white);
  padding: 160px 24px;
  color: var(--toz-indigo);
}
.tozpas__inner { max-width: var(--max-content); margin: 0 auto; }
.tozpas__head { text-align: center; max-width: 760px; margin: 0 auto 64px; }
.tozpas__title { color: var(--toz-indigo); margin: 0 0 24px; }
.tozpas__lead {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 1.1rem;
  line-height: 1.75;
  color: var(--toz-indigo);
  opacity: 0.85;
  margin: 0 0 20px;
  text-wrap: pretty;
}
.tozpas__lead:last-of-type { margin-bottom: 0; text-wrap: balance; }
/* Large featured artwork — the dominant visual element of the section,
   substantially bigger than the gallery images below it. */
.tozpas__featured {
  max-width: var(--max-content);
  margin: 64px auto 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid rgba(28, 36, 75, 0.10);
}
.tozpas__featured img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Artwork gallery — 3x2, sized so individual pieces are actually
   visible rather than compressed into a thumbnail strip. */
.tozpas__gallery {
  max-width: var(--max-content);
  margin: 40px auto 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.tozpas__gallery figure { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid rgba(28, 36, 75, 0.10); }
.tozpas__gallery figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tozpas__closing {
  max-width: 760px;
  margin: 64px auto 0;
  text-align: center;
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--toz-indigo);
  opacity: 0.85;
  text-wrap: pretty;
}

/* =============================================================================
   7. GET IN TOUCH — closing parallax band, CTA button only
   ============================================================================= */

.partners-band--cta {
  height: auto;
  min-height: 400px;
  padding: 120px 24px;
}
.svc-cta__inner {
  position: relative;
  z-index: 1;
  text-align: center;
  color: var(--toz-white);
}
/* Small accent rule above the button — gives the CTA a deliberate focal
   point instead of a lone button in open space, without adding copy. */
.svc-cta__inner::before {
  content: '';
  display: block;
  width: 64px;
  height: 1px;
  background: var(--toz-teal-bright);
  margin: 0 auto 40px;
}

/* =============================================================================
   FOOTER
   ============================================================================= */


/* =============================================================================
   RESPONSIVE
   ============================================================================= */

@media (max-width: 1024px) {

  /* iOS/Android handle background-attachment: fixed unreliably → scroll */
  .partners-band,
  .svc-pullquote { background-attachment: scroll; }

  .day-program__intro { gap: 48px; }
  .advocacy__pair { gap: 28px; }
  .advocacy__featured-img { aspect-ratio: 16 / 9; }
}

@media (max-width: 768px) {
  .hero { padding: 96px 24px 64px; min-height: 70vh; }

  .partners-band { height: 280px; }
  .partners-band--cta { height: auto; min-height: 0; padding: 96px 24px; }

  .svc-intro,
  .advocacy,
  .svc-pullquote { padding: 96px 24px; }
  .day-program,
  .tozpas { padding: 96px 24px; }

  .advocacy__head {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 56px;
  }
  .advocacy__lead { padding-top: 0; }
  .advocacy__featured--split .advocacy__featured-text {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* What We Do cards → 1 column */
  .svc-cards { grid-template-columns: 1fr; gap: 28px; }

  /* Day Program → stack, image after text */
  .day-program__intro {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .day-program__intro .day-program__lead-img { order: 2; }
  .day-program__gallery { grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 48px; }

  .tozpas__featured { aspect-ratio: 4 / 3; margin-top: 48px; }
  .tozpas__gallery { grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 32px; }
  .tozpas__closing { margin-top: 48px; }

  /* Advocacy → tighter stacking, image-led featured projects shrink to 4:3 */
  .advocacy__featured { margin-top: 48px; }
  .advocacy__featured-img { aspect-ratio: 4 / 3; margin-bottom: 20px; }
  .advocacy__pair {
    grid-template-columns: 1fr;
    gap: 40px;
    margin-top: 48px;
  }
  .toz-footer { padding: 56px 24px 32px; }
  .toz-footer__nav ul { flex-direction: column; gap: 16px; }
  .toz-footer__land { margin-top: 32px; font-size: 13px; }
}

@media (max-width: 480px) {
  .hero__title { font-size: 2.5rem; }
  .day-program__gallery,
  .tozpas__gallery { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}