/* Sunny Path Family Care — bespoke landing styles (built on theme.css tokens) */

/* Landing footer sits flush against the visit band */
.page-landing .site-footer { margin-top: 0; }

/* ---------- Brand lockup ----------
   The landing page carries the traced sun inline so it recolors with
   currentColor; theme.css masks the same asset for the shared pages. */

.page-landing .brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  -webkit-mask: none;
  mask: none;
  color: var(--color-sun);
}

.page-landing .site-footer .brand-mark {
  background: none;
  color: #f6c65b;
}

.brand-glyph {
  width: 100%;
  height: 100%;
}

/* ---------- Nav ---------- */

.page-landing .nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.nav-caret {
  width: 0.85rem;
  height: 0.85rem;
  flex: none;
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  background: var(--color-bg);
  overflow: hidden;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 3rem;
  align-items: center;
  padding-top: 3.5rem;
  padding-bottom: 5.5rem;
}

.hero-title {
  font-size: clamp(2.1rem, 4.6vw, 3.35rem);
  line-height: 1.15;
  margin-bottom: 1.1rem;
}

.hero-accent {
  font-style: italic;
  color: var(--color-brand);
}

.hero-lede {
  font-size: 1.08rem;
  color: var(--color-ink-muted);
  max-width: 44ch;
  margin-bottom: 1.75rem;
}

.hero-ctas {
  display: flex;
  gap: 0.9rem;
  flex-wrap: wrap;
  margin-bottom: 1.9rem;
}

.hero-chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 0.55rem 1.75rem;
  flex-wrap: wrap;
}

/* Trust marks are labels, not actions: bare icon + text in the same voice as
   .visit-detail, so they never read as a third row of buttons under the CTAs. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 700;
  font-size: 0.85rem;
  white-space: nowrap;
  color: var(--color-accent-deep);
}

.chip-icon {
  width: 1.05rem;
  height: 1.05rem;
  flex: none;
  color: var(--color-accent);
}

/* Family-photo slot: real photo over the painted golden-hour fallback */
.hero-photo {
  min-height: 420px;
  align-self: stretch;
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  margin-right: calc(50% - 50vw);
  background-size: cover;
  background-position: center;
  filter: saturate(1.05) brightness(1.01);
  background-image:
    url(../../assets/img/sunny-path/hero.webp),
    radial-gradient(55% 45% at 68% 38%, rgba(255, 244, 214, 0.95) 0%, transparent 60%),
    radial-gradient(40% 55% at 22% 78%, rgba(125, 140, 85, 0.4) 0%, transparent 65%),
    radial-gradient(35% 35% at 82% 78%, rgba(216, 155, 74, 0.55) 0%, transparent 70%),
    radial-gradient(28% 30% at 45% 62%, rgba(236, 111, 82, 0.22) 0%, transparent 70%),
    linear-gradient(150deg, #f6e8ca 0%, #e9d3a9 42%, #cbb083 100%);
}

/* Gentle curve out of the hero into the services section: the fill hides the
   bottom of the hero, the sage hairline is the divider itself */
.hero-curve {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  display: block;
  width: 100%;
  height: 96px;
}

.hero-curve-fill { fill: var(--color-surface); }

.hero-curve-line {
  fill: none;
  stroke: #a8b48c;
  stroke-width: 1.5;
}

/* ---------- Services ---------- */

/* The hero curve already supplies the breathing room above this section */
.services {
  background: var(--color-surface);
  padding-top: 3rem;
}

.services .section-head { margin-bottom: 2.1rem; }

/* Six services wrap 3 x 2; all six across squeezes each card into a sliver. */
.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
}

/* Airy cards: hairline rule, no shadow, snug padding (see mockup). */
.service-card {
  text-align: center;
  padding-top: 1.4rem;
  border-color: #f2ece0;
  border-radius: var(--radius-sm);
}

.service-card:hover { border-color: #e8dcc4; }

.service-card .card-body { padding: 0.85rem 0.95rem 1.15rem; align-items: center; }

.service-card .card-title { font-size: 1rem; margin-bottom: 0.1rem; }

.service-card .card-text { font-size: 0.85rem; line-height: 1.55; }

.service-card .card-link { font-size: 0.84rem; margin-top: 0.6rem; }

/* Soft pastel discs — the only color the cards carry */
.service-icon,
.step-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  margin: 0 auto;
  flex: none;
}

.service-icon svg,
.step-icon svg {
  width: 1.8rem;
  height: 1.8rem;
}

.icon-pink { background: var(--pastel-pink); color: #d1685c; }
.icon-coral { background: var(--pastel-pink); color: var(--color-brand-deep); }
.icon-blue { background: var(--pastel-blue); color: #4a72ab; }
.icon-gold { background: var(--pastel-gold); color: #d2a03a; }
.icon-goldline { background: var(--pastel-gold); color: #d2a03a; }
.icon-lilac { background: var(--pastel-lilac); color: #8d70bb; }
.icon-green { background: var(--pastel-green); color: #6c8f56; }

/* ---------- Team ---------- */

.team-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 2fr);
  gap: 3rem;
  align-items: center;
}

.team-copy .section-title { margin-bottom: 0.6rem; }

.team-copy .section-sub { margin-bottom: 1.6rem; }

.btn-olive {
  background: var(--color-accent-deep);
  color: #ffffff;
}

.btn-olive:hover { background: #4c5733; }

.team-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.1rem;
}

.team-card {
  background: var(--color-surface);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.team-photo {
  aspect-ratio: 4 / 4.6;
  background-size: cover;
  background-position: center 22%;
  /* warm, cheerful grade so the pack headshots feel native to the palette */
  filter: sepia(0.18) saturate(1.15) brightness(1.04);
}

/* Real portraits layered over per-person painted fallback moods */
.team-photo--1 {
  background-image:
    url(../../assets/img/pack/headshot-4.webp),
    radial-gradient(60% 45% at 50% 38%, rgba(255, 246, 224, 0.95) 0%, transparent 65%),
    radial-gradient(80% 45% at 50% 100%, rgba(110, 123, 79, 0.65) 0%, transparent 70%),
    linear-gradient(160deg, #f0e2c4 0%, #ddc59c 100%);
}
.team-photo--2 {
  background-image:
    url(../../assets/img/pack/headshot-3.webp),
    radial-gradient(60% 45% at 50% 38%, rgba(255, 248, 230, 0.95) 0%, transparent 65%),
    radial-gradient(80% 45% at 50% 100%, rgba(90, 118, 150, 0.55) 0%, transparent 70%),
    linear-gradient(160deg, #efe3cb 0%, #d6c4a4 100%);
}
.team-photo--3 {
  background-image:
    url(../../assets/img/pack/headshot-7.webp),
    radial-gradient(60% 45% at 50% 38%, rgba(255, 244, 216, 0.95) 0%, transparent 65%),
    radial-gradient(80% 45% at 50% 100%, rgba(191, 121, 91, 0.5) 0%, transparent 70%),
    linear-gradient(160deg, #f2e4c6 0%, #dcc39a 100%);
}
.team-photo--4 {
  background-image:
    url(../../assets/img/pack/headshot-5.webp),
    radial-gradient(60% 45% at 50% 38%, rgba(255, 249, 232, 0.95) 0%, transparent 65%),
    radial-gradient(80% 45% at 50% 100%, rgba(139, 148, 102, 0.6) 0%, transparent 70%),
    linear-gradient(160deg, #ece0c8 0%, #d2c2a2 100%);
}

.team-card-caption {
  text-align: center;
  padding: 0.8rem 0.6rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.team-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--color-navy);
}

/* Credential gets its own line so every caption is the same three lines tall,
   whatever the name length. */
.team-cred {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--color-accent-deep);
}

.team-role {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-ink-muted);
}

/* ---------- Testimonials ---------- */

.testimonials { background: var(--color-surface); }

.eyebrow-heart {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.eyebrow-glyph {
  width: 0.85rem;
  height: 0.85rem;
  flex: none;
  color: var(--color-brand);
}

/* Carousel arrows flank the row without narrowing the cards. The 0.5rem of
   button padding is subtracted from the offsets so the glyph still lands where
   the mockup puts it. */
.testimonial-row { position: relative; }

.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  color: var(--color-accent);
  padding: 0.5rem;
  border: 0;
  background: none;
  border-radius: 50%;
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.carousel-arrow:hover {
  color: var(--color-accent-deep);
  background: rgba(125, 140, 85, 0.12);
}

.carousel-arrow--prev { left: -3.1rem; }
.carousel-arrow--next { right: -3.1rem; }

.carousel-glyph {
  width: 1.5rem;
  height: 1.5rem;
}

/* Both slides share one grid cell, so the row is always as tall as the tallest
   slide and swapping never shifts the page. */
.testimonial-slides { display: grid; }

.testimonial-slide {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.4rem);
  transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s linear 0.35s;
}

.testimonial-slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s;
}

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.testimonial-card {
  position: relative;
  margin: 0;
  background: #fffdf8;
  border: 1px solid #f2ece0;
  border-radius: var(--radius-sm);
  padding: 1.4rem 1.4rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.quote-mark {
  position: absolute;
  top: 0.4rem;
  left: 1.1rem;
  font-family: var(--font-display);
  font-size: 3rem;
  line-height: 1;
  color: rgba(236, 111, 82, 0.35);
}

.testimonial-body {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding-top: 0.8rem;
}

/* Client portraits over the pastel fallback discs (same layering as .team-photo) */
.t-avatar {
  width: 3rem;
  height: 3rem;
  background-size: cover;
  background-position: center 20%;
  filter: sepia(0.18) saturate(1.15) brightness(1.04);
}

.t-avatar--1 {
  background-image:
    url(../../assets/img/pack/headshot-2.webp),
    linear-gradient(140deg, var(--pastel-pink), #f2c3ba);
}
.t-avatar--2 {
  background-image:
    url(../../assets/img/pack/headshot-6.webp),
    linear-gradient(140deg, var(--pastel-blue), #bcd0e8);
}
.t-avatar--3 {
  background-image:
    url(../../assets/img/pack/headshot-8.webp),
    linear-gradient(140deg, var(--pastel-gold), #f0d791);
}
/* Headshot 1 is framed wider than the rest of the pack, so it gets zoomed to
   match the face size of the discs above it. */
.t-avatar--4 {
  background-image:
    url(../../assets/img/pack/headshot-1.webp),
    linear-gradient(140deg, var(--pastel-green), #cfe0c6);
  background-size: 190% auto, cover;
  background-position: 55% 13%, center;
}

/* The pack is out of loose headshots, so slide two's two parents are framed out
   of the shared two-person photo: zoom past the disc, then pan to each face. */
.t-avatar--5 {
  background-image:
    url(../../assets/img/pack/blog-rel-1.webp),
    linear-gradient(140deg, var(--pastel-lilac), #dcd0ea);
  background-size: 480% auto, cover;
  background-position: 32% 5%, center;
}
.t-avatar--6 {
  background-image:
    url(../../assets/img/pack/blog-rel-1.webp),
    linear-gradient(140deg, var(--pastel-blue), #bcd0e8);
  background-size: 480% auto, cover;
  background-position: 75% 3%, center;
}

.testimonial-quote {
  margin: 0;
  font-size: 0.96rem;
  color: var(--color-ink);
  flex: 1;
}

.testimonial-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: auto;
}

.testimonial-name {
  font-weight: 800;
  font-size: 0.88rem;
  color: var(--color-navy);
}

.stars {
  display: inline-flex;
  align-items: center;
  gap: 0.14rem;
  color: var(--color-sun);
}

.star-glyph {
  width: 0.8rem;
  height: 0.8rem;
}

/* ---------- How it works + FAQ ---------- */

.how-faq { background: var(--color-bg); }

.how-faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 4rem;
  align-items: start;
}

.col-head { text-align: center; margin-bottom: 2.25rem; }

.col-head .section-title { font-size: 1.55rem; margin-bottom: 0; }

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  counter-reset: none;
}

.step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.55rem;
}

/* dotted connector between steps */
.step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 3rem;
  left: calc(50% + 2.2rem);
  width: calc(100% - 4.4rem + 0.75rem);
  border-top: 3px dotted #dcd2b6;
}

/* Tucked onto the disc's top-left rim (disc: 3.5rem wide, 1.1rem from the top),
   so bubble and disc visibly intersect. */
.step-num {
  position: absolute;
  top: 0.6rem;
  left: calc(50% - 2.25rem);
  z-index: 1;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.75rem;
  color: #ffffff;
}

.step-num--1 { background: var(--color-accent); }
.step-num--2 { background: var(--color-brand); }
.step-num--3 { background: var(--color-sun); }
.step-num--4 { background: #4f74a8; }

/* The steps carry the section's color: each disc keeps its pastel fill,
   ringed in the page ground so the dotted connector reads behind it. */
.step-icon {
  margin-top: 1.1rem;
  box-shadow: 0 0 0 5px var(--color-bg);
}

.step-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--color-navy);
  line-height: 1.3;
}

.step-text {
  font-size: 0.83rem;
  color: var(--color-ink-muted);
  max-width: 20ch;
}

/* FAQ */

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.faq-item {
  background: var(--color-surface);
  border: 1px solid #f2ece0;
  border-radius: var(--radius-sm);
}

.faq-q {
  list-style: none;
  cursor: pointer;
  padding: 0.9rem 1.2rem;
  font-weight: 700;
  font-size: 0.96rem;
  color: var(--color-navy);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.faq-q::-webkit-details-marker { display: none; }

.faq-plus {
  width: 1.05rem;
  height: 1.05rem;
  flex: none;
  color: var(--color-brand);
  transition: transform 0.15s ease;
}

.faq-item[open] .faq-plus { transform: rotate(45deg); }

.faq-a {
  margin: 0;
  padding: 0 1.2rem 1rem;
  color: var(--color-ink-muted);
  font-size: 0.93rem;
}

.faq-more {
  display: inline-block;
  margin-top: 1.4rem;
  font-weight: 800;
  font-size: 0.92rem;
  color: var(--color-brand-deep);
  text-decoration: none;
}

.faq-more:hover { text-decoration: underline; }

/* ---------- Visit ---------- */

.visit {
  background: var(--color-sage-bg);
  padding: 4.5rem 0;
}

.visit-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr);
  gap: 3rem;
  align-items: center;
}

.visit-copy .section-title { margin-bottom: 0.4rem; }

.visit-copy .section-sub { margin-bottom: 1.5rem; font-size: 0.98rem; }

.visit-details {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.visit-detail {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--color-ink);
}

.visit-icon {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  margin-top: 0.15rem;
  color: var(--color-accent-deep);
}

/* Map: OpenStreetMap capture, tinted to the section's pastel tone */
.visit-map {
  position: relative;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  background: #e6e2d3;
}

.map-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.74) brightness(1.08) contrast(0.9);
}

.map-pin {
  position: absolute;
  left: 30%;
  top: 44%;
  width: 30px;
  height: 30px;
  transform: translate(-50%, -70%);
  color: #e04b32;
  filter: drop-shadow(0 3px 4px rgba(39, 57, 92, 0.32));
}

.map-pin-glyph {
  width: 100%;
  height: 100%;
  display: block;
}

.map-credit {
  position: absolute;
  left: 0.5rem;
  bottom: 0.4rem;
  font-size: 0.62rem;
  line-height: 1.4;
  color: #5b6070;
  background: rgba(255, 255, 255, 0.72);
  border-radius: 4px;
  padding: 0.05rem 0.35rem;
}

.map-card {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  background: #ffffff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 0.9rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  max-width: 15rem;
}

.map-card-name {
  font-weight: 800;
  font-size: 0.88rem;
  color: var(--color-navy);
}

.map-card-addr {
  font-size: 0.8rem;
  color: var(--color-ink-muted);
}

.map-card-link {
  margin-top: 0.3rem;
  font-weight: 800;
  font-size: 0.82rem;
  color: var(--color-brand-deep);
  text-decoration: none;
}

.map-card-link:hover { text-decoration: underline; }

/* Footer social buttons: cream circle outlines with a brand glyph */

.footer-social {
  list-style: none;
  /* closes the Contact Us column, flush left under the address line */
  margin: 0.5rem 0 0;
  padding: 0;
  display: flex;
  gap: 0.55rem;
}

.social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  border: 1px solid rgba(238, 240, 228, 0.55);
  color: #eef0e4;
}

.social-btn:hover {
  border-color: #f6c65b;
  color: #f6c65b;
}

.social-glyph {
  width: 0.85rem;
  height: 0.85rem;
}

/* Footer contact rows carry the same icon set as the Visit Us list */

.footer-contact {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.footer-icon {
  width: 0.95rem;
  height: 0.95rem;
  flex: none;
  margin-top: 0.28rem;
  color: #c3cbaa;
}

/* Footer hours rows */

.footer-hours {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.95rem;
  color: #e2e6d2;
  max-width: 18rem;
}

/* Neither the day label nor the time range may break mid-phrase */
.footer-hours span { white-space: nowrap; }

.footer-hours span:last-child { color: #c3cbaa; }

/* ---------- Responsive ---------- */

@media (max-width: 1024px) {
  /* No room outside the container for floating arrows, so the controls drop
     below the cards as a centered pair and stay operable. */
  .testimonial-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    column-gap: 0.75rem;
    row-gap: 1.4rem;
  }

  .testimonial-slides { flex: 1 0 100%; }

  .carousel-arrow {
    position: static;
    transform: none;
    order: 1;
    padding: 0.65rem;
    background: #fffdf8;
    border: 1px solid #f2ece0;
  }

  .hero-grid {
    grid-template-columns: 1fr;
    padding-bottom: 4.5rem;
  }

  .hero-photo {
    min-height: 300px;
    margin-right: 0;
    border-radius: var(--radius-lg);
  }

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

  .team-cards { grid-template-columns: repeat(2, 1fr); }

  .testimonial-grid { grid-template-columns: 1fr; }

  .how-faq-grid { grid-template-columns: 1fr; gap: 3.5rem; }

  .visit-grid { grid-template-columns: 1fr; }

  /* Six services in three columns get too narrow once the container stops
     growing, so they pair off two-up. */
  .service-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  /* One service and one step per row: two-up columns on a phone leave the
     card copy at three or four words a line. */
  .service-grid { grid-template-columns: 1fr; }

  .steps { grid-template-columns: 1fr; row-gap: 2rem; }

  /* The dotted connector only reads across a row, never down a column. */
  .step::after { display: none; }

  /* Stacked hero: the copy has no photo beside it any more, so the whole
     column centres rather than hugging a left edge with a dead right gutter. */
  .hero-copy { text-align: center; }

  .hero-lede {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1.1rem;
  }

  .hero-ctas { justify-content: center; }

  .hero-chips { justify-content: center; }

  /* Phone hero leads with the photo as a short, wide banner instead of burying
     it under the copy, and the copy's rhythm tightens so the headline and the
     primary CTA still land in the first screenful. Bottom padding clears the
     shortened curve so a wrapped third chip is never hidden under it. */
  .hero-grid {
    gap: 1.5rem;
    padding-top: 1.5rem;
    padding-bottom: 4.5rem;
  }

  .hero-curve { height: 48px; }

  .hero-photo {
    order: -1;
    align-self: start;
    min-height: 0;
    height: 220px;
    background-position: center 45%;
  }

  .hero-title { margin-bottom: 0.7rem; }

  .hero-ctas { margin-bottom: 1.3rem; }

  .visit { padding: 3.25rem 0; }

  /* Tap targets: bare text links and the footer icon buttons are all under
     40px tall at their desktop sizes. */
  .faq-more,
  .map-card-link {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
  }

  .faq-more { margin-top: 0.6rem; }

  .map-card-link { margin-top: 0; }

  .social-btn {
    width: 2.75rem;
    height: 2.75rem;
  }

  .social-glyph {
    width: 1.05rem;
    height: 1.05rem;
  }

  /* The team stays two-up on phones: one card per row turns four portraits
     into a full screen of scrolling each. The caption scales with the card. */
  .team-cards { gap: 0.85rem; }

  .team-card-caption { padding: 0.65rem 0.4rem 0.85rem; }

  .team-name { font-size: 0.9rem; }

  .team-cred { font-size: 0.62rem; letter-spacing: 0.1em; }

  .team-role { font-size: 0.76rem; }
}