body.menu-lock {
  overflow: hidden;
}

a:focus-visible,
button:focus-visible,
select:focus-visible {
  outline: 2px solid var(--gold, #CBA763);
  outline-offset: 4px;
  box-shadow: 0 0 0 4px rgba(26, 26, 26, 0.28);
}

.story-anchor {
  scroll-margin-top: 64px;
}

.mobile-menu-toggle {
  display: none;
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  margin-left: auto;
  min-height: 44px;
  min-width: 44px;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--cream, #F5EFE3);
  font: inherit;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
}

.nav > a {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
}

.hero-proof,
.trust-proof,
.quick-match,
.mobile-story {
  padding: clamp(54px, 8vh, 96px) clamp(28px, 7vw, 110px);
}

.hero-proof,
.quick-match {
  background: var(--cream, #F5EFE3);
  color: var(--ink, #1a1a1a);
}

.trust-proof {
  background: var(--cream2, #EDE5D5);
  color: var(--ink, #1a1a1a);
}

.hero-proof-grid,
.trust-proof-grid,
.finder-grid,
.mobile-story-grid {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
}

.hero-proof-grid,
.trust-proof-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid rgba(26, 26, 26, 0.09);
  border-left: 1px solid rgba(26, 26, 26, 0.09);
}

.proof-card {
  padding: clamp(20px, 3vw, 34px);
  border-right: 1px solid rgba(26, 26, 26, 0.09);
  border-bottom: 1px solid rgba(26, 26, 26, 0.09);
}

.proof-card .proof-value {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1;
  color: var(--maroon, #893C3B);
  letter-spacing: -0.03em;
}

.proof-card .proof-label {
  display: block;
  margin-top: 10px;
  color: #666;
  font-size: 11px;
  letter-spacing: 0.2em;
  line-height: 1.5;
  text-transform: uppercase;
}

.trust-proof-grid {
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.35fr);
  gap: clamp(32px, 6vw, 84px);
  border: 0;
  align-items: start;
}

.trust-copy h2,
.quick-match h2,
.mobile-story h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(34px, 5vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.035em;
}

.trust-copy h2 span,
.quick-match h2 span,
.mobile-story h2 span {
  color: var(--maroon, #893C3B);
}

.trust-copy p,
.quick-match p,
.mobile-story p {
  margin-top: 18px;
  max-width: 640px;
  color: #606060;
  font-size: 14px;
  line-height: 1.85;
}

.trust-list {
  display: grid;
  gap: 14px;
}

.trust-item {
  padding: 20px 22px;
  background: rgba(245, 239, 227, 0.58);
  border-left: 2px solid var(--maroon, #893C3B);
}

.trust-item strong {
  display: block;
  margin-bottom: 8px;
  color: var(--ink, #1a1a1a);
  font-weight: 700;
}

.trust-item span {
  color: #666;
  font-size: 13px;
  line-height: 1.7;
}

.finder-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(30px, 6vw, 80px);
  align-items: center;
}

.finder-card {
  padding: clamp(24px, 4vw, 42px);
  background: #fffaf0;
  border: 1px solid rgba(26, 26, 26, 0.09);
  box-shadow: 0 24px 70px rgba(58, 10, 10, 0.08);
}

.finder-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.finder-field {
  display: grid;
  gap: 8px;
}

.finder-field label {
  color: var(--maroon, #893C3B);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.finder-field select {
  width: 100%;
  min-height: 48px;
  border: 1px solid rgba(137, 60, 59, 0.2);
  border-radius: 0;
  background: var(--cream, #F5EFE3);
  color: var(--ink, #1a1a1a);
  font: inherit;
  font-size: 14px;
  padding: 0 14px;
}

.finder-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}

.finder-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  text-decoration: none;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.finder-primary {
  background: var(--maroon, #893C3B);
  color: var(--cream, #F5EFE3);
}

.finder-secondary {
  color: var(--maroon, #893C3B);
  border: 1px solid rgba(137, 60, 59, 0.24);
}

.finder-status {
  min-height: 20px;
  margin-top: 14px;
  color: #777;
  font-size: 12px;
  line-height: 1.5;
}

.mobile-story {
  display: none;
  background: #0b0908;
  color: var(--cream, #F5EFE3);
}

.mobile-story p {
  color: rgba(245, 239, 227, 0.58);
}

.mobile-story-grid {
  display: grid;
  gap: 16px;
  margin-top: 28px;
}

.mobile-story-card {
  padding: 22px;
  background: rgba(245, 239, 227, 0.045);
  border: 1px solid rgba(203, 167, 99, 0.13);
}

.mobile-story-card strong {
  display: block;
  margin-bottom: 8px;
  color: var(--gold, #CBA763);
  font-family: 'Playfair Display', serif;
  font-size: 22px;
}

.mobile-story-card span {
  color: rgba(245, 239, 227, 0.56);
  font-size: 13px;
  line-height: 1.7;
}

.home-page .hero::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  z-index: 1;
  height: clamp(92px, 14vh, 160px);
  background:
    linear-gradient(180deg, rgba(26, 6, 6, 0) 0%, rgba(12, 4, 4, 0.72) 72%, #080404 100%);
  pointer-events: none;
}

.home-page .scroll-cue {
  z-index: 2;
}

.home-page .hero-proof {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 18%, rgba(137, 60, 59, 0.26), transparent 34%),
    radial-gradient(circle at 8% 82%, rgba(203, 167, 99, 0.08), transparent 34%),
    linear-gradient(180deg, #080404 0%, #160606 44%, #0b0404 100%);
  color: var(--cream, #F5EFE3);
  /* No hairline: hero, proof, match and the book are one continuous dark run,
     so any border here reads as an unwanted seam. Section openings are marked
     by the animated kicker rules instead. */
  border-top: 0;
  border-bottom: 0;
  padding: clamp(72px, 10vh, 128px) clamp(28px, 7vw, 110px) clamp(78px, 11vh, 138px);
}

.home-page .hero-proof::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(203, 167, 99, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(203, 167, 99, 0.035) 1px, transparent 1px);
  background-size: 86px 86px;
  mask-image: linear-gradient(to bottom, transparent, #000 28%, #000 72%, transparent);
  z-index: 0;
}

.home-page .hero-proof::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  height: clamp(90px, 14vh, 170px);
  background: linear-gradient(180deg, rgba(11, 4, 4, 0) 0%, #080404 100%);
  pointer-events: none;
}

.home-page .hero-proof-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.42fr);
  gap: clamp(38px, 7vw, 96px);
  align-items: start;
}

.home-page .proof-kicker,
.home-page .finder-kicker,
.home-page .care-kicker,
.home-page .trust-kicker {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 18px;
  color: rgba(203, 167, 99, 0.58);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
}

.home-page .proof-kicker::before,
.home-page .finder-kicker::before,
.home-page .care-kicker::before,
.home-page .trust-kicker::before {
  content: "";
  width: 42px;
  height: 1px;
  background: rgba(203, 167, 99, 0.48);
}

.home-page .proof-title {
  max-width: 360px;
  margin: 0;
  color: var(--cream, #F5EFE3);
  font-family: "Playfair Display", serif;
  font-size: clamp(38px, 5vw, 72px);
  font-weight: 900;
  line-height: 0.98;
  letter-spacing: -0.045em;
}

.home-page .proof-copy {
  max-width: 330px;
  margin: 24px 0 0;
  color: rgba(245, 239, 227, 0.52);
  font-size: 14px;
  line-height: 1.8;
}

.home-page .hero-proof-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border: 0;
  background: transparent;
}

.home-page .hero-proof .proof-card {
  position: relative;
  min-height: 210px;
  padding: clamp(24px, 3.5vw, 42px);
  border: 0;
  border-top: 1px solid rgba(203, 167, 99, 0.16);
  background: rgba(245, 239, 227, 0.035);
}

.home-page .hero-proof .proof-card:nth-child(odd) {
  border-right: 1px solid rgba(203, 167, 99, 0.12);
}

.home-page .hero-proof .proof-card:nth-child(1),
.home-page .hero-proof .proof-card:nth-child(2) {
  border-top-color: rgba(203, 167, 99, 0.28);
}

.home-page .hero-proof .proof-value {
  color: var(--gold, #CBA763);
  font-size: clamp(42px, 6vw, 76px);
}

.home-page .hero-proof .proof-label {
  margin-top: 12px;
  color: rgba(245, 239, 227, 0.72);
  font-size: 9px;
  letter-spacing: 0.3em;
}

.home-page .hero-proof .proof-card p {
  max-width: 250px;
  margin: 22px 0 0;
  color: rgba(245, 239, 227, 0.48);
  font-size: 12.5px;
  line-height: 1.7;
}

.home-page .quick-match {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding-top: clamp(76px, 11vh, 136px);
  padding-bottom: clamp(98px, 13vh, 168px);
}

.home-page .concierge-card {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 0;
  padding: 0;
  border: 1px solid rgba(203, 167, 99, 0.18);
  background: var(--cream, #F5EFE3);
  box-shadow:
    0 -26px 90px rgba(203, 167, 99, 0.045),
    0 34px 100px rgba(76, 14, 14, 0.2);
  margin: 0 auto;
  width: 100%;
}

.home-page .concierge-card .finder-copy {
  position: relative;
  overflow: hidden;
  min-height: 430px;
  padding: clamp(34px, 5.5vw, 68px);
  background:
    radial-gradient(circle at 80% 18%, rgba(203, 167, 99, 0.16), transparent 34%),
    linear-gradient(145deg, #4a1818 0%, #250808 58%, #120606 100%);
}

.home-page .concierge-card .finder-copy::after {
  content: "JJT";
  position: absolute;
  right: -0.08em;
  bottom: -0.22em;
  color: rgba(245, 239, 227, 0.035);
  font-family: "Playfair Display", serif;
  font-size: clamp(118px, 18vw, 250px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.08em;
}

.home-page .concierge-card .finder-copy h2 {
  position: relative;
  z-index: 1;
  max-width: 430px;
  margin: 0 0 18px;
  color: var(--cream, #F5EFE3);
  font-size: clamp(38px, 5vw, 68px);
}

.home-page .concierge-card .finder-copy p:not(.finder-kicker) {
  position: relative;
  z-index: 1;
  max-width: 420px;
  color: rgba(245, 239, 227, 0.56);
}

.home-page .finder-note {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 10px;
  margin-top: clamp(28px, 5vh, 52px);
}

.home-page .finder-note span {
  width: fit-content;
  border-bottom: 1px solid rgba(203, 167, 99, 0.2);
  padding-bottom: 8px;
  color: rgba(203, 167, 99, 0.72);
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.home-page .finder-panel {
  padding: clamp(30px, 5vw, 64px);
  background:
    linear-gradient(135deg, rgba(255, 250, 242, 0.86), rgba(237, 229, 213, 0.82)),
    var(--cream, #F5EFE3);
}

.home-page .finder-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 28px;
  border-bottom: 1px solid rgba(137, 60, 59, 0.14);
  padding-bottom: 18px;
}

.home-page .finder-panel-head span {
  color: var(--maroon, #893C3B);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.home-page .finder-panel-head strong {
  color: rgba(26, 26, 26, 0.36);
  font-family: "Playfair Display", serif;
  font-size: 24px;
  line-height: 1;
}

.home-page .concierge-card .finder-fields {
  gap: 16px;
}

.home-page .concierge-card .finder-fields select {
  min-height: 52px;
  border-color: rgba(137, 60, 59, 0.2);
  background: rgba(255, 250, 242, 0.76);
}

.home-page .care-path {
  background:
    radial-gradient(circle at 18% 8%, rgba(137, 60, 59, 0.28), transparent 28%),
    #0b0908;
  color: var(--cream, #F5EFE3);
}

.home-page .care-path-inner {
  max-width: 1180px;
  margin: 0 auto;
}

.home-page .care-path h2 {
  max-width: 560px;
  margin: 0 0 34px;
  color: var(--cream, #F5EFE3);
  font-family: "Playfair Display", serif;
  font-size: clamp(34px, 7vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.04em;
}

.home-page .care-steps {
  position: relative;
  display: grid;
  gap: 0;
  border-top: 1px solid rgba(203, 167, 99, 0.14);
}

.home-page .care-step {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 18px;
  border: 0;
  border-bottom: 1px solid rgba(203, 167, 99, 0.12);
  background: transparent;
  padding: 26px 0;
}

.home-page .care-step-n {
  color: rgba(203, 167, 99, 0.66);
  font-family: "Playfair Display", serif;
  font-size: 30px;
  font-weight: 900;
  line-height: 1;
}

.home-page .care-step h3 {
  margin: 0 0 8px;
  color: var(--gold, #CBA763);
  font-size: 28px;
}

.home-page .care-step p {
  max-width: 460px;
  margin: 0;
  color: rgba(245, 239, 227, 0.56);
}

.home-page .founder-standards {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 88% 6%, rgba(203, 167, 99, 0.14), transparent 38%),
    linear-gradient(180deg, #f8f2e8 0%, var(--cream, #F5EFE3) 100%);
  border-top: 0;
  padding-bottom: clamp(82px, 12vh, 148px);
}

.home-page .founder-grid {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.34fr);
  gap: clamp(34px, 7vw, 96px);
  border: 0;
  align-items: start;
}

.home-page .trust-copy h2 {
  margin: 0;
  color: var(--ink, #1a1a1a);
  font-family: "Playfair Display", serif;
  font-size: clamp(38px, 5vw, 72px);
  line-height: 1;
  letter-spacing: -0.045em;
}

.home-page .trust-copy p:not(.trust-kicker) {
  max-width: 360px;
  margin-top: 24px;
  color: rgba(26, 26, 26, 0.56);
  font-size: 14px;
  line-height: 1.82;
}

.home-page .standard-list {
  border-top: 1px solid rgba(137, 60, 59, 0.16);
}

.home-page .standard-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: clamp(18px, 3vw, 34px);
  padding: clamp(24px, 3.6vw, 42px) 0;
  border: 0;
  border-bottom: 1px solid rgba(137, 60, 59, 0.14);
  background: transparent;
}

.home-page .standard-n {
  color: rgba(137, 60, 59, 0.44);
  font-family: "Playfair Display", serif;
  font-size: clamp(28px, 4vw, 46px);
  font-weight: 900;
  line-height: 1;
}

.home-page .standard-row h3 {
  margin: 0 0 10px;
  color: var(--maroon, #893C3B);
  font-size: clamp(26px, 3vw, 42px);
  line-height: 1.04;
}

.home-page .standard-row p {
  max-width: 560px;
  margin: 0;
  color: rgba(26, 26, 26, 0.58);
}

.home-page .ready {
  min-height: 82vh;
  margin-top: -1px;
}

.home-page .ready-content {
  max-width: 1180px;
}

.home-page .ready-right {
  border-left-color: rgba(203, 167, 99, 0.18);
}

.home-page .ready-step {
  position: relative;
  border-bottom-color: rgba(203, 167, 99, 0.13);
}

.home-page .ready-step::before {
  content: "";
  position: absolute;
  left: -30px;
  top: 50%;
  width: 10px;
  height: 1px;
  background: rgba(203, 167, 99, 0.36);
}

@media (max-width: 880px) {
  .nav {
    height: 62px;
    padding: 0 18px;
  }

  .nav-logo {
    height: 34px;
    width: 34px;
  }

  .mobile-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .nav-links {
    position: fixed;
    top: 62px;
    left: 0;
    right: 0;
    display: grid;
    gap: 0;
    padding: 12px 18px 22px;
    background: rgba(42, 8, 8, 0.96);
    border-bottom: 1px solid rgba(203, 167, 99, 0.16);
    transform: translateY(-120%);
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.28s ease;
    z-index: 1;
  }

  .nav.menu-open .nav-links {
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
  }

  /* Backdrop: darkens the page behind the open menu and acts as a click
     target to close it. */
  .nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 0;
    background: rgba(0, 0, 0, 0.62);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.28s ease, visibility 0.28s ease;
  }

  .nav.menu-open .nav-backdrop {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .nav-links a {
    min-height: 46px;
    display: flex;
    align-items: center;
    color: rgba(245, 239, 227, 0.72);
  }

  .nav-enrol {
    justify-content: center;
    margin-top: 10px;
  }

  .hero {
    min-height: auto;
  }

  .hero-content {
    min-height: 100svh;
    grid-template-columns: 1fr;
    padding: 112px 28px 72px;
    overflow: hidden;
  }

  .hero-left {
    padding: 0;
  }

  .hero-h1 {
    font-size: clamp(48px, 15vw, 66px);
  }

  .hero-sub {
    max-width: 28rem;
    color: rgba(245, 239, 227, 0.56);
  }

  .hero-right {
    display: none;
  }

  .hero-btns,
  .ready-btns {
    width: 100%;
  }

  .btn-p,
  .rbtn-p {
    width: 100%;
    text-align: center;
  }

  #book-section {
    display: none;
  }

  .mobile-story {
    display: block;
  }

  .hero-proof-grid,
  .trust-proof-grid,
  .finder-grid {
    grid-template-columns: 1fr;
  }

  .hero-proof-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .finder-fields {
    grid-template-columns: 1fr;
  }

  .finder-actions a {
    width: 100%;
  }

  .home-page .hero-proof-inner,
  .home-page .concierge-card,
  .home-page .founder-grid {
    grid-template-columns: 1fr;
  }

  .home-page .hero-proof-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-page .quick-match {
    padding-top: 72px;
    padding-bottom: 112px;
  }

  .home-page .concierge-card {
    border-top: 0;
    box-shadow: 0 34px 90px rgba(0, 0, 0, 0.5);
  }

  .home-page .concierge-card .finder-copy {
    min-height: auto;
  }

  .home-page .founder-grid {
    gap: 30px;
  }

  .home-page .founder-standards {
    padding-bottom: 92px;
  }

  .home-page .ready-step::before {
    display: none;
  }

  .ft-grid,
  .ft-bot {
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 480px) {
  .hero-content {
    padding-left: 24px;
    padding-right: 24px;
  }

  .hero-h1 {
    font-size: clamp(40px, 12vw, 52px);
    max-width: 100%;
  }

  .hero-sub {
    max-width: 100%;
  }

  .btn-p,
  .rbtn-p {
    padding-left: 20px;
    padding-right: 20px;
    letter-spacing: 0.18em;
  }

  .hero-proof,
  .trust-proof,
  .quick-match,
  .mobile-story {
    padding-left: 24px;
    padding-right: 24px;
  }

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

  .home-page .hero-proof {
    padding-top: 54px;
    padding-bottom: 58px;
  }

  .home-page .proof-title,
  .home-page .trust-copy h2 {
    font-size: clamp(38px, 13vw, 54px);
  }

  .home-page .proof-copy {
    margin-top: 18px;
  }

  .home-page .hero-proof-grid {
    grid-template-columns: 1fr;
  }

  .home-page .hero-proof .proof-card {
    min-height: auto;
    border-right: 0;
    padding: 28px 0;
    background: transparent;
  }

  .home-page .hero-proof .proof-card:nth-child(odd) {
    border-right: 0;
  }

  .home-page .hero-proof .proof-value {
    font-size: clamp(46px, 18vw, 68px);
  }

  .home-page .concierge-card {
    margin-left: -24px;
    margin-right: -24px;
    border-left: 0;
    border-right: 0;
  }

  .home-page .concierge-card .finder-copy,
  .home-page .finder-panel {
    padding-left: 24px;
    padding-right: 24px;
  }

  .home-page .finder-panel-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .home-page .care-step,
  .home-page .standard-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .home-page .standard-row {
    padding: 28px 0;
  }

  .ph {
    min-height: auto;
    padding: 118px 28px 60px;
  }

  .ph-h1 {
    font-size: clamp(44px, 14vw, 60px);
  }

  .ph-wm {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  #book-section {
    display: none;
  }

  .mobile-story {
    display: block;
  }
}

/* ═══════════════════════════════════════════════════════════
   PAGE THEME: dark above the book, cream below it.

   Hero → Proof → Match → Book all sit on one dark canvas, then a
   single seam hands over to cream for Standards → Ready → Footer.
   Because there is at most one theme boundary, sections no longer
   need to cover each other, so nothing here is pinned.

   Scoped to .home-page throughout: Tutors.html and Subjects.html
   share .ready and .finder-card and keep their own treatment.
   ═══════════════════════════════════════════════════════════ */

/* ── Dark run: Match ────────────────────────────────────────
   The section becomes part of the dark canvas and the concierge
   card reads as a sheet of paper resting on it. */

.home-page .quick-match {
  background:
    radial-gradient(circle at 14% 16%, rgba(137, 60, 59, 0.3), transparent 40%),
    linear-gradient(180deg, #080404 0%, #150606 46%, #0d0505 100%);
  color: var(--cream, #F5EFE3);
}

/* Faint vertical rules, so this section reads differently from the
   square grid texture on the section above it. */
.home-page .quick-match::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: linear-gradient(90deg, rgba(203, 167, 99, 0.05) 1px, transparent 1px);
  background-size: 104px 100%;
  mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent);
}

.home-page .concierge-card {
  border-color: rgba(203, 167, 99, 0.22);
  box-shadow:
    0 -1px 0 rgba(203, 167, 99, 0.1),
    0 46px 110px rgba(0, 0, 0, 0.62);
}

/* ── The seam: book → Standards ─────────────────────────────
   The one theme change on the page, so it gets a deliberate edge
   rather than a blend. */

.home-page .founder-standards {
  border-top: 1px solid rgba(203, 167, 99, 0.32);
  box-shadow: 0 -30px 66px rgba(8, 4, 4, 0.5);
}

/* ── Light run: Ready ───────────────────────────────────────
   Same layout as before, inverted to cream with maroon accents.
   Gold is dropped for text here: it does not carry enough
   contrast against cream. */

.home-page .ready-bg {
  background:
    radial-gradient(circle at 84% 18%, rgba(203, 167, 99, 0.22), transparent 44%),
    linear-gradient(168deg, #f8f2e8 0%, var(--cream, #F5EFE3) 54%, var(--cream2, #EDE5D5) 100%);
}

.home-page .ready-vignette {
  background: radial-gradient(ellipse 110% 90% at 82% 50%, rgba(137, 60, 59, 0.1) 0%, transparent 62%);
}

.home-page .ready-eyebrow {
  color: var(--maroon, #893C3B);
}

.home-page .ready-eyebrow::before {
  background: rgba(137, 60, 59, 0.42);
}

.home-page .ready-h2 {
  color: var(--ink, #1a1a1a);
}

.home-page .ready-h2 .gold {
  color: var(--maroon, #893C3B);
}

.home-page .ready-rule {
  background: rgba(137, 60, 59, 0.3);
}

.home-page .ready-sub {
  color: rgba(26, 26, 26, 0.66);
}

.home-page .rbtn-p {
  background: var(--maroon, #893C3B);
  color: var(--cream, #F5EFE3);
}

.home-page .rbtn-g {
  color: rgba(26, 26, 26, 0.62);
}

.home-page .rbtn-g:hover {
  color: var(--maroon, #893C3B);
}

.home-page .ready-right {
  border-left-color: rgba(137, 60, 59, 0.18);
}

.home-page .ready-step {
  border-bottom-color: rgba(137, 60, 59, 0.14);
}

.home-page .ready-step::before {
  background: rgba(137, 60, 59, 0.34);
}

.home-page .ready-step-n {
  color: var(--maroon, #893C3B);
}

.home-page .ready-step-l {
  color: rgba(26, 26, 26, 0.52);
}

.home-page .ready-step-d {
  color: rgba(26, 26, 26, 0.62);
}

/* ── Footer: stays dark ─────────────────────────────────────
   A cream footer washed out the close, so the footer keeps its
   dark treatment and acts as the base of the page rather than a
   section. Its top edge is the page's second theme crossing and
   is punctuated by the same flash as the first. */

.home-page footer {
  border-top: 1px solid rgba(203, 167, 99, 0.2);
}

/* ── Page canvas ────────────────────────────────────────────
   The body background is what shows during overscroll and in any
   momentary gap while the pinned book section is being measured.
   The default cream flashed as a white sliver under the dark run,
   so the canvas is dark and matches both ends of the page: the
   hero at the top and the footer at the bottom. */

.home-page {
  background: #0b0908;
}

/* ── Chapter rail ───────────────────────────────────────────
   Marks the current section and re-tints itself for the theme
   of whichever section is in view. */

.chapter-rail {
  position: fixed;
  top: 50%;
  right: clamp(12px, 1.8vw, 26px);
  z-index: 150;
  display: none;
  flex-direction: column;
  transform: translateY(-50%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.45s ease, visibility 0.45s ease;
}

.section-flow .chapter-rail {
  display: flex;
}

.chapter-rail.visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.chapter-link {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-height: 30px;
  padding: 7px 0;
  text-decoration: none;
}

.chapter-tick {
  width: 14px;
  height: 1px;
  flex-shrink: 0;
  background: rgba(245, 239, 227, 0.3);
  transition: width 0.32s ease, background-color 0.32s ease;
}

.chapter-label {
  color: rgba(245, 239, 227, 0.34);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(8px);
  transition: color 0.32s ease, opacity 0.32s ease, transform 0.32s ease;
}

.chapter-link:hover .chapter-label,
.chapter-link:focus-visible .chapter-label,
.chapter-link.on .chapter-label {
  opacity: 1;
  transform: none;
}

.chapter-link.on .chapter-tick {
  width: 30px;
  background: var(--gold, #CBA763);
}

.chapter-link.on .chapter-label {
  color: var(--gold, #CBA763);
}

.chapter-rail.rail-light .chapter-tick {
  background: rgba(26, 26, 26, 0.26);
}

.chapter-rail.rail-light .chapter-label {
  color: rgba(26, 26, 26, 0.46);
}

.chapter-rail.rail-light .chapter-link.on .chapter-tick {
  background: var(--maroon, #893C3B);
}

.chapter-rail.rail-light .chapter-link.on .chapter-label {
  color: var(--maroon, #893C3B);
}

@media (max-width: 1180px) {
  .chapter-label {
    display: none;
  }
}

/* The rail is a desktop affordance. On a phone it would sit on top of the
   content it is meant to index, and the thumb is already the navigation.
   Placed after the rail rules so it wins without !important. */
@media (max-width: 880px) {
  .section-flow .chapter-rail {
    display: none;
  }
}