/* ═══════════════════════════════════════════════════════════════
   T30 — Inner page heroes (HOME-SPEC "Inner pages")
   70vh, one image/clip, dark gradient top+bottom, centered
   UPPERCASE serif page title + one line. Same spacing as Home.
   Loaded after obx-home-sections.css so it wins.
   ═══════════════════════════════════════════════════════════════ */

.page-hero {
  position: relative; height: 70vh; min-height: 460px; max-height: 760px;
  overflow: hidden; display: flex; align-items: center; justify-content: center;
  background: var(--obx-ink);
}
.page-hero__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.page-hero__media video { display: block; }
/* allow a <picture> wrapper as the hero media (shop uses one) */
.page-hero picture.page-hero__media { display: block; }
.page-hero picture.page-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.page-hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    /* T32d: raise the mid-page band (.18→.30) so the lead/CTA sit over a real veil — the new 2K heroes have bright lit-water horizons that defeated the old dip */
    linear-gradient(180deg, rgba(4,12,22,.66) 0%, rgba(4,12,22,.30) 34%, rgba(4,12,22,.30) 62%, rgba(4,12,22,.70) 100%);
}
.page-hero__inner {
  position: relative; z-index: 2; text-align: center; padding: 0 24px; max-width: 1100px;
  width: 100%; margin: 0 auto; box-sizing: border-box;
}
.page-hero__eyebrow {
  font-family: var(--obx-font-body); font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.34em; text-transform: uppercase; color: rgba(255,255,255,.96);
  text-shadow: 0 1px 12px rgba(4,12,22,.7);
  display: block; margin-bottom: 22px;
}
.page-hero__title {
  font-family: var(--obx-font-display); font-weight: 400;
  font-size: clamp(2.4rem, 5.6vw, 4.6rem); line-height: 1.04; letter-spacing: 0.14em;
  text-transform: uppercase; color: #fff; margin: 0 0 20px;
  text-shadow: 0 2px 28px rgba(4,12,22,.7), 0 0 6px rgba(4,12,22,.5);
}
.page-hero__line {
  font-family: var(--obx-font-body); font-size: 1.05rem; line-height: 1.7;
  color: rgba(255,255,255,.96); max-width: 56ch; margin: 0 auto;
  text-shadow: 0 1px 16px rgba(4,12,22,.72), 0 0 4px rgba(4,12,22,.5);
}
.page-hero__cta { margin-top: 34px; display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.page-hero .btn {
  font-family: var(--obx-font-body); font-size: .78rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; text-decoration: none;
  padding: 13px 26px; border-radius: 2px; display: inline-flex; align-items: center; gap: 8px;
}
/* T31i — mobile: keep the hero CTA pair inside the viewport (no left overflow,
   no collision with the section head below) and readable over the media. */
@media (max-width: 700px) {
  .page-hero__cta { width: 100%; max-width: 360px; margin-left: auto; margin-right: auto; flex-direction: column; align-items: stretch; gap: 12px; }
  .page-hero__cta .btn { justify-content: center; width: 100%; }
  /* T31i — the hero stats card was a flex sibling of the content and pushed the
     content off the left edge on narrow screens (CTAs collided with the section
     head below). Take it out of the flex flow on mobile: overlay bottom-right,
     compact, so the content stays centered and nothing overlaps. */
  .academy-stage .ac-hero-stats { position: static; width: 100%; max-width: 340px; margin: 0 auto; padding: .65rem 1rem; display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: .35rem .8rem; z-index: 2; background: rgba(9,25,40,.82); backdrop-filter: blur(6px); box-sizing: border-box; }
  .academy-stage .ac-stat { border-left: none; padding: 0 0 0 .55rem; }
  .academy-stage .ac-stat:first-child { padding-left: 0; }
  .academy-stage .ac-stat-n { font-size: 1rem; }
  .academy-stage .ac-stat-l { font-size: .55rem; letter-spacing: .08em; }
  /* T31i — stack the hero content above the stats card on narrow screens so the
     stats (a flex sibling) can't squeeze the content into the left edge. */
  .page-hero { flex-direction: column; justify-content: center; align-items: center; gap: 18px; padding-top: 18px; }
  .page-hero__inner { width: 100%; }
  .page-hero__title { font-size: clamp(1.85rem, 8.2vw, 2.5rem); letter-spacing: .06em; margin-bottom: 12px; }
  .page-hero__line { font-size: .92rem; max-width: 42ch; }
  .page-hero__eyebrow { margin-bottom: 14px; }
  .page-hero__cta { margin-top: 22px; }
}
.page-hero .btn-light { background: #fff; color: var(--obx-ink); }
.page-hero .btn-light:hover { background: #C6A664; }
.page-hero .btn-ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.85); }
.page-hero .btn-ghost:hover { background: #fff; color: var(--obx-ink); }

/* luxury service cards — bright full-bleed image on top, light paper body (T30 "same card system") */
.svc-card { display: flex; flex-direction: column; border: 1px solid rgba(11,27,43,.1); background: #F7F5F0; }
.svc-card__img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.svc-card__body { padding: 30px 30px 34px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.svc-card__title { font-family: var(--obx-font-display); font-weight: 400; font-size: 1.55rem; color: var(--obx-ink); margin: 0; line-height: 1.1; }
.svc-card__text { font-family: var(--obx-font-body); font-size: .96rem; line-height: 1.7; color: #3d4b57; margin: 0; flex: 1; }
.svc-card__more {
  font-family: var(--obx-font-body); font-size: .74rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
  color: var(--obx-ink); text-decoration: none; align-self: flex-start; padding-bottom: 3px;
  border-bottom: 1px solid var(--obx-ink); transition: color .25s, border-color .25s;
}
.svc-card__more:hover { color: #8A6A2F; border-color: #8A6A2F; }

/* About: image beside text (no giant image) */
.about-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 80px); align-items: center; max-width: 1200px; margin: 0 auto; }
.about-split__media { display: block; margin: 0; }
.about-split__img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border: 1px solid rgba(11,27,43,.1); }
.about-split__body { display: flex; flex-direction: column; gap: 20px; }
.about-split__eyebrow { font-family: var(--obx-font-body); font-size: .72rem; font-weight: 500; letter-spacing: .32em; text-transform: uppercase; color: #8A6A2F; }
.about-split__title { font-family: var(--obx-font-display); font-weight: 400; font-size: clamp(1.9rem, 3.6vw, 2.8rem); color: var(--obx-ink); margin: 0; line-height: 1.1; }
.about-split__text { font-family: var(--obx-font-body); font-size: 1rem; line-height: 1.75; color: #3d4b57; margin: 0; }
@media (max-width: 860px) {
  .page-hero { height: 56vh; min-height: 380px; }
  .about-split { grid-template-columns: 1fr; gap: 32px; }
  .about-split__img { aspect-ratio: 16 / 10; }
}

/* ── T31b About: credential row + final CTA band ─────────────── */
.cred-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 48px); margin-top: 56px; }
.cred-cell { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 36px 24px; border: 1px solid var(--obx-hairline, #D9D4C7); background: #fff; }
.cred-cell__ic { display: inline-grid; place-items: center; width: 52px; height: 52px; border: 1px solid var(--obx-hairline, #D9D4C7); }
.cred-cell__ic svg { width: 26px; height: 26px; color: var(--obx-ink, #0B1B2B); }
.cred-cell__name { font-family: var(--obx-font-display, 'Bodoni Moda', serif); font-weight: 400; font-size: 1.3rem; letter-spacing: .04em; text-transform: uppercase; color: var(--obx-ink, #0B1B2B); margin-top: 10px; }
.cred-cell__detail { font-family: var(--obx-font-body, 'Inter', sans-serif); font-size: .85rem; letter-spacing: .14em; text-transform: uppercase; color: #4C5A68; }
@media (max-width: 720px) { .cred-row { grid-template-columns: 1fr; } }

.about-final { text-align: center; }
.about-final__inner { max-width: 720px; margin: 0 auto; }
.about-final h2 { margin-top: 18px; }
.about-final .lead { margin: 18px auto 0; max-width: 52ch; }
.about-final__actions { margin-top: 36px; display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
@media (prefers-reduced-motion: reduce) {
  .page-hero__media video { display: none; }
  .page-hero { background-position: center; }
}