/* ===========================================================================
   DHANYA NAMBIAR — Testimonials page
   A dedicated "testimonial after testimonial" reading page. Same cream/gold
   editorial world as the main site; real headshots from her media kit.
   ======================================================================== */

/* ---------- page hero / her note ---------- */
.thero { background: linear-gradient(180deg, var(--paper), var(--cream)); text-align: center;
  padding-top: clamp(8rem, 18vh, 11rem); padding-bottom: clamp(2.5rem, 6vh, 4.5rem); }
.thero .wrap { max-width: 760px; }
.thero .rule { margin-bottom: 2.2rem; }
.thero .kicker { justify-content: center; margin-bottom: 1.4rem; }
.thero h1 { font-family: var(--serif); font-weight: 300; font-size: clamp(2.7rem, 7vw, 5rem);
  line-height: 1; letter-spacing: -.015em; margin-bottom: 1.6rem; }
.thero h1 .script { display: inline; }
.thero .intro { font-family: var(--serif); font-style: italic; font-size: clamp(1.25rem, 2.3vw, 1.65rem);
  line-height: 1.5; color: var(--ink-2); }
.thero .intro b { color: var(--gold-deep); font-weight: 500; font-style: italic; }
.thero .signoff { font-family: var(--serif); font-style: italic; color: var(--gold-deep);
  font-size: 1.5rem; margin-top: 1.5rem; }
.thero .count { margin-top: 2.4rem; font-size: .74rem; letter-spacing: .26em; text-transform: uppercase;
  color: var(--ink-soft); }

/* ---------- the voices: two-up cards, round photos, quote beneath ----------
   Warmer, friendlier layout (per Dhanya's brief): a circular rimmed headshot,
   then the quote-mark, quote and name centred beneath — two people per row. */
.tvoices { background: var(--cream); padding-top: clamp(1rem, 3vh, 2rem); }
.tvoices .wrap { max-width: 1080px; }

.tgrid { display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(3rem, 6vw, 5.5rem) clamp(2.5rem, 6vw, 6rem); }

.tvoice { display: flex; flex-direction: column; align-items: center; text-align: center; }

.tvoice-photo { position: relative; width: clamp(128px, 15vw, 172px); aspect-ratio: 1;
  margin-bottom: 1.6rem; }
.tvoice-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%;
  border-radius: 50%; box-shadow: var(--shadow-soft); }
.tvoice-photo::after { content: ""; position: absolute; inset: -7px; border: 1px solid var(--gold-line);
  border-radius: 50%; pointer-events: none; }
.tvoice-body { display: flex; flex-direction: column; align-items: center; }

.tqm { width: 26px; opacity: .8; margin: 0 0 1rem; }
.tquote { font-family: var(--serif); font-style: italic; font-size: clamp(1.08rem, 1.35vw, 1.26rem);
  line-height: 1.6; color: var(--ink); margin-bottom: 1.4rem; max-width: 44ch; }
.tquote b { color: var(--gold-deep); font-weight: 500; font-style: italic; }

.tvoice-who { display: flex; flex-direction: column; align-items: center; gap: .2rem; }
.tname { font-family: var(--sans); font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  font-size: .8rem; color: var(--ink); }
.trole { font-size: .9rem; color: var(--ink-2); line-height: 1.45; max-width: 36ch; }
.tloc { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-deep);
  margin-top: .35rem; }

/* ---------- finale: the closing (photo-less) quote ---------- */
.tfinale { text-align: center; max-width: 760px; margin: clamp(2.5rem, 6vw, 4.5rem) auto 0;
  padding-top: clamp(2.6rem, 6vw, 4.5rem); border-top: 1px solid var(--gold-line); }
.tfinale .tqm { margin: 0 auto 1.3rem; width: 38px; }
.tfinale p { font-family: var(--serif); font-style: italic; font-size: clamp(1.5rem, 3vw, 2.15rem);
  line-height: 1.4; color: var(--ink); margin-bottom: 1.4rem; }
.tfinale figcaption { font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-deep); font-weight: 500; }

/* ---------- back-to-site CTA reuses .audition; small tweaks ---------- */
.tback .aud-cta { margin-top: .5rem; }

/* ---------- simple top nav for the sub-page ---------- */
.nav .back { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2);
  display: inline-flex; align-items: center; gap: .5em; transition: color .3s; }
.nav .back:hover { color: var(--gold-deep); }
.nav .back svg { width: 1em; height: 1em; }

/* this sub-page has no hamburger — keep the two links inline on mobile
   (the shared stylesheet otherwise hides .nav-links off-screen below 900px) */
@media (max-width: 900px) {
  .nav-links { position: static; inset: auto; flex-direction: row; gap: .8rem; align-items: center;
    background: none; backdrop-filter: none; transform: none; padding: 0; }
}
@media (max-width: 560px) {
  .nav .back { display: none; }        /* the brand already returns home */
  .brand .name { display: none; }      /* the hummingbird alone returns home — no crowding */
  .brand img { width: 34px; }
  .nav { padding-inline: 1.1rem; }
}

@media (max-width: 720px) {
  .tgrid { grid-template-columns: 1fr; gap: clamp(2.8rem, 9vw, 3.8rem); }
  .tvoice-photo { width: clamp(132px, 34vw, 168px); }
}