/* =========================================================
   v3 – hero, testimonials, academy certificate, Instagram
   ========================================================= */
body { font-size: 1.0625rem; }

/* ---- Hero ---- */
:root { --intro-delay: 1.55s; }
html.intro-seen { --intro-delay: .1s; }
.hero-v3 { padding-bottom: 110px; }
.hero-v3 .hero-grid { grid-template-columns: 1.08fr .92fr; gap: 70px; }
.hero-title .h-line { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.hero-title .h-line > .hero-in { display: inline-block; }
.hero-in { animation: heroIn 1s var(--ease) calc(var(--intro-delay) + var(--d, 0) * .11s) both; }
.hero-title .hero-in { animation-name: heroLine; animation-duration: 1.1s; }
@keyframes heroIn { from { opacity: 0; transform: translateY(26px); } }
@keyframes heroLine { from { transform: translateY(105%); } }
html.a11y-motion .hero-in { animation: none; }
@media (prefers-reduced-motion: reduce) { .hero-in { animation: none; } }

.hero-v3 .hero-visual { height: 640px; }
.hero-v3 .arch { inset: 0 16px 36px 64px; }
.hero-v3 .arch img { object-position: 50% 45%; }
.arch-outline {
  position: absolute; inset: 26px -6px 12px 88px; border: 1px solid var(--gold);
  border-radius: 999px 999px 30px 30px; opacity: .75; pointer-events: none;
}
.hero-v3 .spin-badge { top: 56px; left: 0; width: 142px; height: 142px; }
.arch-caption {
  position: absolute; left: 18px; bottom: 60px; writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: var(--latin); font-style: italic; letter-spacing: .18em; font-size: .95rem; color: var(--rose-deep); opacity: .8;
}
.hero-v3 .hero-cta { margin: 34px 0 0; }
.proof { display: flex; align-items: center; gap: 16px; margin-top: 34px; }
.proof-faces { display: flex; }
.proof-faces img {
  width: 42px; height: 42px; border-radius: 50%; object-fit: cover; border: 2px solid var(--cream);
  margin-inline-start: -12px; box-shadow: 0 6px 14px -8px rgba(0,0,0,.35);
}
.proof-faces img:first-child { margin-inline-start: 0; }
.proof-text { display: grid; line-height: 1.3; }
.proof-text .stars { color: var(--rose); letter-spacing: 3px; font-size: .95rem; }
.proof-text a { font-size: .9rem; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.scroll-cue {
  position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); width: 26px; height: 42px;
  border: 1.5px solid rgba(26,18,16,.25); border-radius: 20px; display: flex; justify-content: center; padding-top: 8px;
}
.scroll-cue span { width: 3px; height: 8px; border-radius: 3px; background: var(--rose-deep); animation: cue 1.8s ease-in-out infinite; }
@keyframes cue { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(12px); } }

/* ---- Testimonials ---- */
.quotes { text-align: center; }
.center-eyebrow { display: flex; justify-content: center; }
.quote-stage { position: relative; max-width: 920px; margin: 26px auto 0; display: grid; min-height: 250px; align-items: center; }
.quote-mark {
  position: absolute; top: -40px; left: 50%; transform: translateX(-50%); font-family: var(--latin); font-size: 11rem; line-height: 1;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: .35; pointer-events: none;
}
.quote-stage { padding-top: 64px; }
/* outgoing quote fades first, the incoming one follows – they never overlap */
.quote { grid-area: 1 / 1; opacity: 0; transform: translateY(14px); transition: opacity .4s ease, transform .4s ease; pointer-events: none; }
.quote.on { opacity: 1; transform: none; pointer-events: auto; transition: opacity .7s var(--ease) .4s, transform .7s var(--ease) .4s; }
.quote blockquote { font-family: var(--serif); font-weight: 300; font-size: clamp(1.45rem, 2.8vw, 2.25rem); line-height: 1.55; color: var(--cream); }
.quote figcaption { margin-top: 22px; color: var(--gold); letter-spacing: .04em; }
.quote figcaption b { font-weight: 500; }
.quote-people { display: flex; justify-content: center; gap: 14px; margin-top: 44px; }
.qp { width: 58px; height: 58px; border-radius: 50%; padding: 3px; border: 1px solid transparent; transition: transform .4s var(--ease), border-color .4s; }
.qp img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; filter: grayscale(.7); opacity: .55; transition: filter .4s, opacity .4s; }
.qp:hover img { opacity: .85; }
.qp.on { border-color: var(--gold); transform: scale(1.1); }
.qp.on img { filter: none; opacity: 1; }

/* ---- Academy certificate ---- */
.cert-wrap { position: relative; width: 100%; max-width: 480px; aspect-ratio: 4 / 5; margin-inline: auto; display: grid; place-items: center; }
.cert {
  position: absolute; width: 76%; aspect-ratio: 1 / 1.32; border-radius: 6px; padding: 14px;
  background: linear-gradient(160deg, #fffdfb, #f8eee8); box-shadow: 0 40px 70px -30px rgba(80, 40, 25, .5);
  transform: rotate(-4deg); transition: transform .8s var(--ease);
}
.cert-back { background: linear-gradient(160deg, var(--blush-2), #e2bfae); transform: rotate(5deg) translate(-7%, 4%); opacity: .9; }
.cert-wrap:hover .cert:not(.cert-back) { transform: rotate(-1.5deg) translateY(-8px); }
.cert-inner {
  height: 100%; border: 1.5px solid var(--gold); outline: 1px solid rgba(214,169,127,.45); outline-offset: -8px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 4px;
  padding: 30px 24px 22px; direction: ltr;
}
.cert-inner img { width: 64px; margin-bottom: 14px; }
.cert-kicker { font-family: var(--latin); text-transform: uppercase; letter-spacing: .26em; font-size: .68rem; color: var(--rose-deep); }
.cert-title { font-family: var(--latin); font-style: italic; font-size: clamp(2rem, 3.4vw, 2.8rem); line-height: 1.1; color: var(--ink); }
.cert-sub { font-family: var(--latin); font-size: .95rem; letter-spacing: .12em; color: var(--muted); }
.cert-foot { margin-top: auto; width: 100%; display: flex; justify-content: space-between; align-items: flex-end; }
.cert-sign { font-family: var(--latin); font-style: italic; font-size: 1.35rem; color: var(--ink); border-top: 1px solid rgba(26,18,16,.25); padding-top: 4px; }
.cert-seal {
  width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; font-family: var(--latin); font-style: italic;
  background: var(--grad); color: var(--ink); font-size: 1.1rem; box-shadow: inset 0 0 0 3px rgba(255,255,255,.5);
}

/* ---- Instagram strip ---- */
.ig-strip { background: #120c0a; }
.ig-grid { display: grid; grid-template-columns: repeat(6, 1fr); position: relative; }
.ig-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; filter: saturate(.9) brightness(.78); transition: filter .6s; }
.ig-grid:hover img { filter: saturate(1) brightness(.92); }
.ig-pill {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 26px; border-radius: 99px; background: var(--cream); color: var(--ink); font-weight: 600; white-space: nowrap;
  box-shadow: 0 20px 40px -18px rgba(0,0,0,.6); transition: transform .4s var(--ease);
}
.ig-grid:hover .ig-pill { transform: translate(-50%, -50%) scale(1.05); }

@media (max-width: 1080px) {
  .hero-v3 .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-v3 .hero-visual { height: 560px; }
}
@media (max-width: 720px) {
  .hero-v3 { padding-bottom: 70px; }
  .hero-v3 .hero-visual { height: 400px; }
  .hero-v3 .arch { inset: 0 8px 20px 40px; }
  .arch-outline { inset: 16px -2px 8px 56px; }
  .hero-v3 .spin-badge { top: 18px; left: -4px; width: 100px; height: 100px; }
  .arch-caption, .scroll-cue { display: none; }
  .proof { margin-top: 26px; }
  .quote-stage { min-height: 330px; padding-top: 48px; }
  .quote-mark { font-size: 8rem; top: -30px; }
  .qp { width: 50px; height: 50px; }
  .ig-grid { grid-template-columns: repeat(3, 1fr); }
  .cert-wrap { max-width: 340px; }
}