/* =========================================================
   DESIGN TOKENS
========================================================= */

:root {
  --primary: #251A4E;
  --primary-light: #4B3575;
  --primary-dark: #181233;
  --hero-navy: #0B2566;

  --lavender: #EEE8FA;
  --lavender-light: #F5F0FC;

  --ivory: #FCF8F0;

  --gold: #FFCC00;
  --champagne: #F3D98B;

  --teal: #238FA8;

  --text: #282433;
  --muted: #6F687A;

  --white: #FFFFFF;

  --font-serif: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --font-sans: "Manrope", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --radius: 18px;

  --shadow-soft: 0 10px 30px rgba(37, 26, 78, 0.08);
  --shadow-hover: 0 18px 40px rgba(37, 26, 78, 0.14);

  --header-h: 68px;
}


/* =========================================================
   BASE
========================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 8px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--text);
  background: var(--white);
  overflow-x: hidden;
}

img {
  max-width: 100%;
  display: block;
}

h1,
h2,
h3 {
  font-family: var(--font-serif);
  color: var(--primary);
  line-height: 1.12;
  margin: 0 0 0.5em;
  font-weight: 600;
}

p {
  margin: 0 0 1em;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 3px;
  border-radius: 4px;
}


/* =========================================================
   CONTAINER
========================================================= */

.container {
  width: min(1180px, 100% - 2.5rem);
  margin-inline: auto;
}

.container.narrow {
  width: min(760px, 100% - 2.5rem);
}


/* =========================================================
   SKIP LINK
========================================================= */

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--gold);
  color: var(--primary);
  padding: 0.75rem 1rem;
  z-index: 200;
  font-weight: 700;
}

.skip-link:focus {
  left: 1rem;
  top: 1rem;
}


/* =========================================================
   BUTTONS
========================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;

  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;

  text-decoration: none;
  border: 0;
  border-radius: 999px;

  cursor: pointer;

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    background 0.25s ease;
}

.btn-gold {
  background: var(--gold);
  color: var(--primary);

  box-shadow:
    0 6px 18px rgba(216, 169, 58, 0.3);
}

.btn-gold:hover {
  transform: translateY(-2px);

  background: var(--champagne);

  box-shadow:
    0 10px 26px rgba(216, 169, 58, 0.45);
}

.btn-sm {
  padding: 0.7rem 1.3rem;
  font-size: 0.78rem;
}

.btn-lg {
  padding: 1.1rem 2.1rem;
  font-size: 0.92rem;
}

.btn-block {
  width: 100%;
}


/* =========================================================
   HEADER
========================================================= */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;

  z-index: 100;

  height: var(--header-h);

  display: flex;
  align-items: center;

  background: transparent;

  transition:
    background 0.35s ease,
    box-shadow 0.35s ease,
    backdrop-filter 0.35s ease;
}

.site-header.is-scrolled {
  background: rgba(37, 26, 78, 0.94);

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.18);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 1.5rem;

  min-height: var(--header-h);
}

/* =========================================================
   EYEBROW
========================================================= */

.eyebrow {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;

  color: var(--champagne);

  margin-bottom: 1.1rem;

  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.eyebrow::before {
  content: "";

  width: 28px;
  height: 1.5px;

  background: currentColor;
}

.eyebrow-dark {
  color: var(--teal);
}

/* =========================================================
   HEADER CONTACT (phone + email)
========================================================= */

.header-contact {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-width: 0;
}

.contact-link {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--white);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 600;
  white-space: nowrap;
  transition: color 0.25s ease;
}

.contact-link svg {
  flex-shrink: 0;
  color: var(--gold);
}

.contact-link:hover {
  color: var(--champagne);
}


/* =========================================================
   HERO LOGO
========================================================= */

.hero-logo {
  display: block;
  width: 150px;
  height: auto;
  margin-bottom: 1.5rem;
}


/* =========================================================
   HERO
========================================================= */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(620px, 56.25vw, 920px); /* 16:9 like your image */
  background: var(--hero-navy);
  color: var(--white);
  /* padding: var(--header-h) 0 0; */
  padding: 0;
  overflow: hidden;
  isolation: isolate;
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
}

.hero-inner {
  position: relative;
  z-index: 1;
}

.hero-copy {
  width: min(100%, 560px);
  padding: 3rem 0;
}

.hero h1 {
  color: var(--white);
  font-size: clamp(2.4rem, 4.6vw, 4.2rem);
  letter-spacing: -0.01em;
}

.hero h1 .amp {
  color: var(--gold);
  font-style: italic;
}

.lead {
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  color: var(--lavender);
  max-width: 32em;
  margin-bottom: 2rem;
}

.hero-meta {
  margin: 1.4rem 0 0;
  font-size: 0.9rem;
  color: var(--champagne);
  letter-spacing: 0.06em;
}

.hero-meta span {
  margin: 0 0.35rem;
  opacity: 0.6;
}

/* =========================================================
   HERO VISUAL
========================================================= */


/* .hero-visual.no-image img {
  display: none;
}

.hero-visual.no-image .hero-badge {
  display: none;
} */




/* =========================================================
   HERO BADGE
========================================================= */


.hero-badge strong {
  font-family: var(--font-serif);

  font-size: 1.15rem;

  color: var(--white);
}

.hero-badge span {
  font-size: 0.7rem;

  letter-spacing: 0.16em;

  text-transform: uppercase;

  color: var(--champagne);
}




/* =========================================================
   SECTIONS
========================================================= */

.section {
  padding:
    clamp(4rem, 8vw, 7rem)
    0;
}

.section-white {
  background: var(--white);
}

.section-ivory {
  background: var(--ivory);
}

.section-lavender {
  background: var(--lavender-light);
}

.section-deep {
  background: var(--primary);

  color: var(--white);
}

.section h2 {
  font-size: clamp(2rem, 4vw, 3.1rem);
}

.section-head {
  max-width: 640px;

  margin-bottom: 2.8rem;
}

.prose p {
  font-size: 1.15rem;

  color: var(--text);
}

.prose-accent {
  font-family: var(--font-serif);

  font-size:
    clamp(1.5rem, 2.6vw, 1.9rem) !important;

  color: var(--primary) !important;

  font-weight: 600;

  line-height: 1.3;

  padding-left: 1.2rem;

  border-left:
    3px solid var(--gold);

  margin-top: 1.8rem;
}


/* =========================================================
   CARDS
========================================================= */

.cards {
  list-style: none;

  margin: 0;

  padding: 0;

  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 1.5rem;
}

.card {
  background: var(--ivory);

  border:
    1px solid rgba(37, 26, 78, 0.09);

  border-radius: var(--radius);

  padding: 2rem 1.8rem;

  box-shadow: var(--shadow-soft);

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

.card:hover {
  transform: translateY(-4px);

  box-shadow: var(--shadow-hover);

  border-color: var(--gold);
}

.card-num {
  display: inline-grid;

  place-items: center;

  width: 46px;
  height: 46px;

  border-radius: 50%;

  background: var(--primary);

  color: var(--champagne);

  font-family: var(--font-serif);

  font-size: 1.4rem;

  font-weight: 700;

  margin-bottom: 1.2rem;
}

.card h3 {
  font-size: 1.65rem;
}

.card p {
  color: var(--muted);

  margin: 0;
}


/* =========================================================
   CHECKLIST
========================================================= */

.checklist {
  list-style: none;

  margin: 2rem 0 0;

  padding: 0;

  display: grid;

  gap: 1rem;
}

.checklist li {
  position: relative;

  background: var(--white);

  border-radius: 14px;

  padding:
    1.2rem
    1.4rem
    1.2rem
    3.4rem;

  box-shadow: var(--shadow-soft);

  font-size: 1.08rem;
}

.checklist li::before {
  content: "";

  position: absolute;

  left: 1.2rem;
  top: 1.4rem;

  width: 1.2rem;
  height: 1.2rem;

  border-radius: 50%;

  background: var(--gold);

  box-shadow:
    0 0 0 5px rgba(216, 169, 58, 0.2);
}


/* =========================================================
   TRUST / WHY TRUST SUJATHA
========================================================= */

.trust {
  background:
    linear-gradient(
      135deg,
      var(--primary),
      var(--primary-light)
    );

  overflow: hidden;
}







/* =========================================================
   TRUST - FOUNDER DETAILS
========================================================= */

.trust-copy {
  min-width: 0;
}

.trust h2 {
  color: var(--white);

  font-size:
    clamp(2.2rem, 4vw, 3.3rem);
}

.trust h2 .role {
  display: block;

  font-size: 0.6em;

  font-style: italic;

  color: var(--champagne);

  font-weight: 500;

  margin-top: 0.3rem;
}

.trust-copy p:last-child {
  color: var(--lavender);

  font-size: 1.1rem;

  line-height: 1.75;

  margin: 0;

  max-width: 38em;
}


/* =========================================================
   TRUST: video left, details right
========================================================= */

.trust-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.trust-video {
  min-width: 0;
}

.trust-video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid rgba(243, 217, 139, 0.4);
  background: #000;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}

.trust-video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Experience text under the name */
.trust h2 .exp {
  display: block;
  margin-top: 0.9rem;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}

.trust h2 .exp::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 1.5px;
  margin-right: 0.7rem;
  vertical-align: middle;
  background: currentColor;
}

/* =========================================================
   DETAILS
========================================================= */

.details {
  margin: 2rem 0 0;

  display: grid;

  grid-template-columns:
    repeat(auto-fit, minmax(200px, 1fr));

  gap: 1rem;
}

.details div {
  background: var(--white);

  border-radius: 14px;

  padding: 1.4rem;

  border-top:
    3px solid var(--gold);

  box-shadow: var(--shadow-soft);
}

.details dt {
  font-size: 0.74rem;

  letter-spacing: 0.18em;

  text-transform: uppercase;

  color: var(--teal);

  font-weight: 700;

  margin-bottom: 0.3rem;
}

.details dd {
  margin: 0;

  font-family: var(--font-serif);

  font-size: 1.6rem;

  color: var(--primary);

  font-weight: 600;

  line-height: 1.2;
}

.details [hidden] {
  display: none;
}


/* =========================================================
   FINAL SECTION + FORM
========================================================= */

.final {
  background:
    radial-gradient(
      60% 80% at 85% 20%,
      rgba(75, 53, 117, 0.9),
      transparent 70%
    ),
    var(--primary);
}

.final-grid {
  display: grid;

  grid-template-columns: 1fr 1fr;

  gap:
    clamp(2rem, 6vw, 5rem);

  align-items: center;
}

.final h2 {
  color: var(--white);

  font-size:
    clamp(2.1rem, 4.4vw, 3.4rem);
}

.final-sub {
  font-family: var(--font-serif);

  font-size:
    clamp(1.4rem, 2.6vw, 1.9rem);

  color: var(--champagne);

  font-style: italic;

  margin: 0;
}

.form-card {
  background: var(--white);

  color: var(--text);

  border-radius: 24px;

  padding:
    clamp(1.5rem, 4vw, 2.5rem);

  box-shadow:
    0 30px 70px rgba(0, 0, 0, 0.3);
}

.field {
  margin-bottom: 1.2rem;
}

.field label {
  display: block;

  font-weight: 700;

  font-size: 0.88rem;

  color: var(--primary);

  margin-bottom: 0.4rem;
}

.field input {
  width: 100%;

  font: inherit;

  font-size: 1rem;

  padding:
    0.95rem
    1.1rem;

  border:
    1.5px solid #d9d2e8;

  border-radius: 12px;

  background: var(--lavender-light);

  color: var(--text);

  transition:
    border-color 0.2s,
    box-shadow 0.2s,
    background 0.2s;
}

.field input:focus {
  outline: none;

  border-color: var(--primary-light);

  background: var(--white);

  box-shadow:
    0 0 0 4px rgba(75, 53, 117, 0.15);
}

.field input[aria-invalid="true"] {
  border-color: #b3261e;
}

.error {
  color: #b3261e;

  font-size: 0.82rem;

  margin: 0.35rem 0 0;

  min-height: 0;
}

.error:empty {
  display: none;
}

.form-status {
  font-size: 0.9rem;

  margin: 1rem 0 0;

  color: var(--muted);

  text-align: center;
}

.form-status:empty {
  display: none;
}

.confirmation {
  text-align: center;

  padding: 1.5rem 0.5rem;
}

.confirmation:focus {
  outline: none;
}

.confirm-icon {
  display: inline-grid;

  place-items: center;

  width: 64px;
  height: 64px;

  border-radius: 50%;

  background: var(--primary);

  color: var(--gold);

  font-size: 1.8rem;

  margin-bottom: 1rem;
}

.confirmation h3 {
  font-size: 1.9rem;
}

.confirmation p {
  color: var(--muted);

  margin: 0;
}


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

.site-footer {
  background: var(--primary-dark);

  text-align: center;

  padding: 2.5rem 0;

  color: var(--lavender);
}

.footer-brand {
  font-family: var(--font-serif);

  font-size: 1.6rem;

  color: var(--white);

  margin: 0;
}

.footer-sub {
  margin: 0.2rem 0 0;

  font-size: 0.85rem;

  letter-spacing: 0.08em;

  color: var(--champagne);
}


/* =========================================================
   REVEAL
========================================================= */

.reveal {
  opacity: 0;

  transform: translateY(22px);

  transition:
    opacity 0.8s ease,
    transform 0.8s ease;
}

.reveal.is-visible {
  opacity: 1;

  transform: none;
}

.cards .reveal:nth-child(2) {
  transition-delay: 0.12s;
}

.cards .reveal:nth-child(3) {
  transition-delay: 0.24s;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 960px) {

  .hero-logo {
    margin-inline: auto;
  }

    /* Hero: image on top, text below */
  .hero {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    padding-top: 0;
  }

  .hero-media {
    position: relative;
    inset: auto;
    z-index: 0;
    height: clamp(300px, 62vw, 520px);
    order: -1;
  }

  .hero-media img {
    object-position: 82% center;
  }

  /* fade the image into the navy background */
  .hero-media::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 45%;
    background: linear-gradient(to bottom, transparent, var(--hero-navy));
  }

  .hero-copy {
    width: 100%;
    padding: 0.5rem 0 3.5rem;
    text-align: center;
    margin-inline: auto;
  }

  .hero-copy .eyebrow {
    justify-content: center;
  }

  .hero .lead {
    margin-inline: auto;
  }

  .hero-grid {
    grid-template-columns: 1fr;

    min-height: 0;

    gap: 0;
  }

  /* .hero-copy {
    padding-bottom: 2rem;
  } */

  .hero-visual {
    min-height: 380px;

    margin-top: 1rem;
  }

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

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

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

  .trust-copy {
    text-align: center;
  }

  .trust-copy .eyebrow {
    justify-content: center;
  }

  .trust h2 .exp::before {
    display: none;
  }


}


@media (max-width: 700px) {

  .header-contact {
    gap: 0.5rem;
  }

  .contact-text {
    display: none;
  }

  .contact-link {
    width: 40px;
    height: 40px;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(243, 217, 139, 0.45);
    background: rgba(24, 18, 51, 0.45);
  }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 560px) {

  :root {
    --header-h: 66px;
  }

  body {
    font-size: 1rem;
  }


  /* Header */

  .header-inner {
    gap: 0.75rem;
  }

  /* Register button */

  .btn-sm {
    padding:
      0.6rem
      0.9rem;

    font-size: 0.66rem;

    letter-spacing: 0.015em;

    white-space: nowrap;
  }


  /* Hero */



  .hero {
    padding-top:
      calc(var(--header-h) + 2rem);
  }

  .hero-cta .btn {
    width: 100%;
  }

  .hero-visual {
    min-height: 320px;
  }

  .hero-meta span {
    margin:
      0 0.15rem;
  }


  /* Hero image */

  .hero-visual img {
    width: min(100%, 400px);
  }


  /* Hero badge */

  .hero-badge {
    max-width: calc(100% - 2rem);

    padding:
      0.5rem
      1rem;
  }

  .hero-badge strong {
    font-size: 1rem;
  }

  .hero-badge span {
    font-size: 0.62rem;
  }


  /* Experience */

  .trust-stat {
    border-right: 0;

    border-bottom:
      1px solid rgba(243, 217, 139, 0.35);

    padding:
      0 0 2.5rem;
  }

  .stat-num {
    font-size: clamp(5rem, 24vw, 7rem);
  }

  .stat-label {
    max-width: 15em;
  }


  /* Founder image */

  .trust-founder {
    order: initial;
  }

  .trust-image-wrap {
    width: min(82vw, 320px);

    aspect-ratio: 4 / 5;

    border-radius: 20px;
  }


  /* Founder details */

  .trust-copy {
    grid-column: auto;

    text-align: center;
  }

  .trust-copy .eyebrow {
    justify-content: center;
  }

  .trust h2 {
    font-size: clamp(2.1rem, 9vw, 2.8rem);
  }

  .trust h2 .role {
    font-size: 0.62em;
  }

  .trust-copy p:last-child {
    font-size: 1rem;

    line-height: 1.7;
  }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 390px) {

  .container {
    width:
      calc(100% - 1.5rem);
  }

  .btn-sm {
    padding:
      0.55rem
      0.7rem;

    font-size: 0.58rem;
  }
}


/* =========================================================
   EXTREMELY SMALL SCREENS
========================================================= */

@media (max-width: 320px) {


  .btn-sm {
    padding:
      0.5rem
      0.55rem;

    font-size: 0.54rem;
  }

  .trust-image-wrap {
    width: min(86vw, 270px);
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;

    transition: none !important;
  }

  .reveal {
    opacity: 1;

    transform: none;
  }
}


/* =========================================================
   CENTERED SECTION HEAD
========================================================= */

.section-head.center {
  margin-inline: auto;
  text-align: center;
}

.section-head.center .eyebrow {
  justify-content: center;
}

.section-sub {
  color: var(--muted);
  font-size: 1.1rem;
  margin: 0;
}


/* =========================================================
   TESTIMONIAL SLIDER
========================================================= */

.tslider {
  --per-view: 3;
}

.tslider-viewport {
  overflow: hidden;
  margin: 0 -0.75rem;
  padding: 0.75rem 0 1.25rem;
}

.tslider-track {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
  touch-action: pan-y;
}

.tcard {
  flex: 0 0 calc(100% / var(--per-view));
  padding: 0 0.75rem;
  display: flex;
}

.tcard-inner {
  width: 100%;
  display: flex;
  flex-direction: column;
  background: var(--ivory);
  border: 1px solid rgba(37, 26, 78, 0.09);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

.tcard-inner:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: var(--gold);
}

.tcard-img {
  margin: 0;
  aspect-ratio: 4 / 3;
  background: var(--lavender);
  overflow: hidden;
}

.tcard-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.tcard-inner:hover .tcard-img img {
  transform: scale(1.04);
}

.tcard-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 1.6rem 1.6rem 1.8rem;
}

.tcard-body h3 {
  font-size: 1.6rem;
  margin-bottom: 0.5rem;
}

.tcard-body p {
  flex: 1;
  color: var(--muted);
  font-size: 1rem;
  margin-bottom: 1.4rem;
}

.tcard-body .btn {
  align-self: flex-start;
}


/* Controls */

.tslider-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  margin-top: 0.5rem;
}

.tslider-arrow {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  border: 1.5px solid var(--primary);
  background: transparent;
  color: var(--primary);
  cursor: pointer;
  transition:
    background 0.25s ease,
    color 0.25s ease,
    opacity 0.25s ease;
}

.tslider-arrow:hover:not(:disabled) {
  background: var(--primary);
  color: var(--champagne);
}

.tslider-arrow:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.tslider-dots {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.tslider-dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #d9d2e8;
  cursor: pointer;
  transition:
    width 0.3s ease,
    background 0.3s ease;
}

.tslider-dot[aria-current="true"] {
  width: 28px;
  background: var(--gold);
}


/* =========================================================
   TEXT TESTIMONIALS
========================================================= */

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

.voice {
  position: relative;
  margin: 0;
  padding: 2.4rem 2rem 1.8rem;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.voice:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}

/* Big gold quote mark */
.voice::before {
  content: "\201C";
  position: absolute;
  top: 0.9rem;
  left: 1.6rem;
  font-family: var(--font-serif);
  font-size: 5rem;
  line-height: 1;
  color: var(--gold);
  opacity: 0.85;
}

.voice blockquote {
  flex: 1;
  margin: 2.2rem 0 1.5rem;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--text);
}

.voice figcaption {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(37, 26, 78, 0.1);
}

.voice-avatar {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--primary);
  color: var(--champagne);
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-weight: 700;
}

.voice-name {
  display: block;
  font-weight: 700;
  line-height: 1.3;
  color: var(--primary);
}

.voice-role {
  display: block;
  font-size: 0.85rem;
  color: var(--muted);
}


/* Featured quote (large, dark card) */

.voice-featured {
  grid-row: span 2;
  justify-content: center;
  padding: 3.4rem 2.4rem 2.4rem;
  background:
    radial-gradient(
      70% 60% at 85% 10%,
      rgba(243, 217, 139, 0.18),
      transparent 70%
    ),
    linear-gradient(135deg, var(--primary), var(--primary-light));
}

.voice-featured::before {
  top: 1.4rem;
  left: 2rem;
  font-size: 7rem;
  color: var(--gold);
}

.voice-featured blockquote {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 2.3vw, 2rem);
  font-style: italic;
  font-weight: 500;
  line-height: 1.35;
  color: var(--white);
  margin-top: 3rem;
}

.voice-featured figcaption {
  border-top-color: rgba(243, 217, 139, 0.35);
}

.voice-featured .voice-avatar {
  background: var(--gold);
  color: var(--primary);
}

.voice-featured .voice-name {
  color: var(--white);
}

.voice-featured .voice-role {
  color: var(--champagne);
}


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

@media (max-width: 960px) {


  .tslider {
    --per-view: 2;
  }

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

  .voice-featured {
    grid-column: 1 / -1;
    grid-row: auto;
  }
}

@media (max-width: 600px) {

  .tslider {
    --per-view: 1;
  }

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

  .voice-featured {
    padding: 3.2rem 1.6rem 1.8rem;
  }

  .tcard-body h3 {
    font-size: 1.5rem;
  }
}

.tvideo {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
}

.tvideo iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}


/* =========================================================
   THEME TESTIMONIAL CARDS (no personal quotes)
========================================================= */

/* Small gold star instead of a quotation mark */
.voice-theme::before {
  content: "\2726";
  top: 1.4rem;
  font-size: 2rem;
}

.voice-theme.voice-featured::before {
  top: 2rem;
  left: 2rem;
  font-size: 3rem;
}

.voice-text {
  flex: 1;
  margin: 2.2rem 0 1.5rem;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--text);
}

.voice-featured .voice-text {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 2.3vw, 2rem);
  font-style: italic;
  font-weight: 500;
  line-height: 1.35;
  color: var(--white);
  margin-top: 3rem;
}


/* =========================================================
   SHORT VIDEO TESTIMONIALS (vertical 9:16)
========================================================= */

.sslider {
  --per-view: 4;
  --gap: 1.25rem;
}

.sslider-track {
  display: flex;
  gap: var(--gap);
  list-style: none;
  margin: 0;
  padding: 0.9rem 0.25rem 1.6rem;

  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.sslider-track::-webkit-scrollbar {
  display: none;
}

.scard {
  flex: 0 0 calc((100% - (var(--per-view) - 1) * var(--gap)) / var(--per-view));
  scroll-snap-align: start;
  min-width: 0;
}

.scard-inner {
  background: var(--white);
  border: 1px solid rgba(37, 26, 78, 0.09);
  border-radius: 24px;
  padding: 0.6rem 0.6rem 0;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

.scard-inner:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-hover);
  border-color: var(--gold);
}

/* Phone-style vertical frame */
.sframe {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: 18px;
  overflow: hidden;
  background: #000;
  box-shadow: inset 0 0 0 1px rgba(243, 217, 139, 0.35);
}

.sframe iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Caption under each video */
.scap {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 0.6rem 1rem;
}

.scap-avatar {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--primary);
  color: var(--champagne);
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 700;
}

.scap-name {
  display: block;
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.3;
  color: var(--primary);
}

.scap-role {
  display: block;
  font-size: 0.8rem;
  color: var(--muted);
}

/* Controls */
.sslider-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  margin-top: 0.25rem;
}

.sslider-arrow {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  border: 1.5px solid var(--primary);
  background: transparent;
  color: var(--primary);
  cursor: pointer;
  transition:
    background 0.25s ease,
    color 0.25s ease,
    opacity 0.25s ease;
}

.sslider-arrow:hover:not(:disabled) {
  background: var(--primary);
  color: var(--champagne);
}

.sslider-arrow:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.sslider-dots {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sslider-dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #d9d2e8;
  cursor: pointer;
  transition:
    width 0.3s ease,
    background 0.3s ease;
}

.sslider-dot[aria-current="true"] {
  width: 28px;
  background: var(--gold);
}

/* Responsive */
@media (max-width: 1100px) {
  .sslider { --per-view: 3; }
}

@media (max-width: 760px) {
  .sslider { --per-view: 2; --gap: 1rem; }
}

@media (max-width: 520px) {
  .sslider { --per-view: 1.25; --gap: 0.9rem; }
  .scard-inner { border-radius: 20px; }
  .sframe { border-radius: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .sslider-track { scroll-behavior: auto; }
}