/* About page (Figma 128:731). Tokens come from site.css. */
:root {
  --about-gap-row: 6.875rem;        /* 110: photo -> text */
  --about-photo-w: 34.4375rem;      /* 551 */
  --about-text-w: 37.375rem;        /* 598 */
  --about-arch-w: 32.5rem;          /* 520 */
  --about-apply-text-w: 41.25rem;   /* 660 */
  --about-thumb-w: 17.5rem;         /* 280 */
  --about-trio-top: 6.625rem;       /* 106 */
  --about-reasons-y: 6.875rem;      /* 110 */
}

/* ---------- welcome ---------- */
.about-welcome__row { display: flex; justify-content: flex-start; align-items: center; column-gap: var(--about-gap-row); row-gap: var(--space-7); }
.about-welcome__media { position: relative; flex: 1 1 0%; max-width: var(--about-photo-w); }
.about-welcome__photo { aspect-ratio: 551 / 683; }
.about-welcome__body { flex: 1 1 0%; max-width: var(--about-text-w); display: flex; flex-direction: column; row-gap: var(--space-5); }
.about-welcome__years { position: absolute; left: 50%; bottom: 4%; display: flex; flex-direction: column; align-items: center; font-family: var(--ff-script); font-size: var(--fs-script-lg); line-height: 0.62; letter-spacing: 0; color: var(--c-white); white-space: nowrap; transform: translateX(-50%) rotate(-8deg); pointer-events: none; }
.about-welcome__years-word { margin-left: 1em; }

.about-reel { display: flex; align-items: center; column-gap: var(--space-6); row-gap: var(--space-4); margin-top: var(--space-5); }
.about-reel__thumb { position: relative; display: block; flex: 1 1 0%; max-width: var(--about-thumb-w); aspect-ratio: 7 / 4; overflow: hidden; background: var(--c-cream-deep); }
.about-reel__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-med) var(--ease); }
.about-reel__thumb:hover img { transform: scale(1.04); }
.about-reel__thumb::after { content: ""; position: absolute; inset: 0; background: var(--c-overlay); opacity: 0.4; }
.about-reel__play { position: absolute; left: 50%; top: 50%; z-index: var(--z-content); width: 3rem; height: 3rem; margin: -1.5rem 0 0 -1.5rem; border: 1px solid var(--c-white); border-radius: var(--r-circle); }
.about-reel__play::before { content: ""; position: absolute; left: 54%; top: 50%; border-style: solid; border-width: 0.4375rem 0 0.4375rem 0.6875rem; border-color: transparent transparent transparent var(--c-white); transform: translate(-50%, -50%); }
.about-reel__caption { flex: 1 1 0%; font-family: var(--ff-serif); font-weight: 500; font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); text-transform: uppercase; color: var(--c-black); }

/* ---------- trio ---------- */
.about-trio { padding-top: var(--about-trio-top); padding-bottom: 0; }
.about-trio__grid { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto; column-gap: var(--gap-grid); row-gap: var(--gap-grid); align-items: stretch; justify-items: stretch; }
.about-trio .section-head + .about-trio__grid { margin-top: var(--space-6); }
.about-trio__centre { position: relative; isolation: isolate; }
.about-trio__oval { border-radius: var(--r-circle); }
.about-trio__book { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border-radius: var(--r-circle); font-family: var(--ff-script); font-size: var(--fs-script-lg); line-height: 1; letter-spacing: 0; color: var(--c-white); white-space: nowrap; transition: color var(--t-fast) var(--ease); }
.about-trio__book-text { display: block; transform: rotate(-12deg); }
.about-trio__book:hover { color: var(--c-sand); }

/* ---------- reasons ---------- */
.about-reasons { padding-block: var(--about-reasons-y); }

/* ---------- CTA band ---------- */
.cta-band .logo { margin-bottom: var(--space-4); }

/* ---------- apply ---------- */
.about-apply__row { display: flex; justify-content: space-between; align-items: center; column-gap: var(--space-8); row-gap: var(--space-7); }
.about-apply__media { position: relative; flex: 1 1 0%; max-width: var(--about-arch-w); }
.about-apply__photo { aspect-ratio: 520 / 540; }
.about-apply__media .badge-spin { right: -2.5rem; top: 1rem; }
.about-apply__body { flex: 1 1 0%; max-width: var(--about-apply-text-w); display: flex; flex-direction: column; align-items: center; row-gap: var(--space-5); text-align: center; }
.about-call { display: flex; align-items: center; justify-content: center; column-gap: var(--space-6); margin-top: var(--space-4); text-align: left; }
.about-call__note { padding-right: var(--space-6); border-right: 1px solid var(--c-line); font-family: var(--ff-script); font-size: var(--fs-script-md); line-height: 0.8; letter-spacing: 0; color: var(--c-ink); text-align: center; }
.about-call__label { font-family: var(--ff-serif); font-weight: 500; font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); text-transform: uppercase; color: var(--c-black); }
.about-call__phone { font-weight: 400; color: var(--c-accent-ink); }
.about-call__phone:hover { text-decoration: underline; text-underline-offset: 0.25em; }

/* ---------- testimonials ---------- */
.about-quotes { position: relative; padding-top: var(--section-y); overflow: hidden; }
.about-quotes .watermark--ghost { color: var(--c-cream-deep); opacity: 0.9; }

/* ---------- responsive ---------- */
@media (max-width: 1280px) {
  :root { --about-gap-row: 4rem; }
  .about-apply__media .badge-spin { right: -1rem; }
}
@media (max-width: 991px) {
  .about-welcome__row, .about-apply__row { flex-direction: column; align-items: center; }
  .about-welcome__media, .about-apply__media { flex: none; width: 100%; }
  .about-welcome__body, .about-apply__body { flex: none; width: 100%; max-width: 40rem; }
  .about-trio__grid { grid-template-columns: 1fr 1fr; }
  .about-trio__centre { order: 3; grid-column: 1 / -1; justify-self: center; width: 100%; max-width: 25.625rem; }
  .about-apply__media .badge-spin { right: 0; }
  .promo-grid { grid-template-columns: 1fr; }
  .title br, .subtitle br { display: none; }
}
@media (max-width: 767px) {
  .about-reel__caption br { display: none; }
}
@media (max-width: 479px) {
  .about-trio__grid { grid-template-columns: 1fr; }
  .about-trio__centre { order: 0; }
  .about-reel { flex-direction: column; align-items: flex-start; }
  .about-reel__thumb { flex: none; width: 100%; }
  .about-call { flex-direction: column; row-gap: var(--space-4); text-align: center; }
  .about-call__note { padding-right: 0; padding-bottom: var(--space-4); border-right: 0; border-bottom: 1px solid var(--c-line); }
  .about-apply__media .badge-spin { width: 7rem; }
}
@media (prefers-reduced-motion: reduce) {
  .about-reel__thumb img, .about-trio__book { transition: none; }
}
