/* Local layout additions to the shared Golden Hour system. */
.page-how-it-works .section-inner { max-width: 1120px; margin: 0 auto; }
.page-how-it-works main { outline: none; }
.page-how-it-works main h2,
.page-how-it-works main h3,
.page-how-it-works h1 { font-family: var(--font-serif); font-weight: 400; }
.page-how-it-works main h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); line-height: 1.3; margin-bottom: 1.25rem; }
.page-how-it-works main h3 { font-size: 1.15rem; line-height: 1.5; margin-bottom: 0.75rem; }
.page-how-it-works main p { max-width: 65ch; margin-bottom: 1rem; }
.page-how-it-works main p:last-child { margin-bottom: 0; }
.page-how-it-works header.hero-strip { position: relative; overflow: hidden; padding: 3rem 1.5rem; }
.page-how-it-works .hero-inner { display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; margin: 0 auto; gap: 3rem; }
.page-how-it-works .hero-text { animation: none; }
.page-how-it-works header.hero-strip h1 { font-size: clamp(2rem, 3.4vw, 3rem); max-width: 20ch; line-height: 1.17; }
.page-how-it-works .hiw-kicker { font-weight: 600; }
.page-how-it-works .hiw-intro { font-size: 1.12rem; line-height: 1.6; }
.page-how-it-works .hiw-appointment { font-size: 0.9rem; font-weight: 500; }
.page-how-it-works .hiw-photo { overflow: hidden; border-radius: 48% 48% 1.5rem 1.5rem; box-shadow: 0 20px 45px rgba(59, 36, 54, 0.12); }
.page-how-it-works .hiw-photo img { display: block; width: 100%; height: auto; }
.page-how-it-works .hiw-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem 1.5rem; margin-top: 1.5rem; }
.page-how-it-works .hiw-text-link { display: inline-flex; align-items: center; min-height: 44px; text-underline-offset: 5px; font-weight: 500; }
.page-how-it-works main a:not(.btn) { color: var(--gh-plum); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.page-how-it-works main a:not(.btn):hover { color: #763b43; }
.page-how-it-works section.content { padding: 4rem 1.5rem; }
.page-how-it-works #your-visit,
.page-how-it-works #faq { scroll-margin-top: 6rem; }
.page-how-it-works .hiw-steps { counter-reset: visit; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; padding: 0; margin-top: 2rem; }
.page-how-it-works .hiw-steps li { counter-increment: visit; border-top: 1px solid var(--gh-line); padding-top: 1.25rem; }
.page-how-it-works .hiw-steps li::before { content: counter(visit, decimal-leading-zero); display: block; font-family: var(--font-serif); font-size: 1.5rem; color: #763b43; margin-bottom: 0.75rem; }
.page-how-it-works .hiw-steps p { font-size: 0.95rem; }
.page-how-it-works .hiw-roles,
.page-how-it-works .hiw-choice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4rem; }
.page-how-it-works .hiw-roles > div + div { border-left: 1px solid var(--gh-line); padding-left: 3rem; }
.page-how-it-works .hiw-choice { align-items: center; }
.page-how-it-works .hiw-prep { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem 3rem; margin-top: 2rem; }
.page-how-it-works .hiw-prep > div { border-top: 1px solid var(--gh-line); padding-top: 1rem; }
.page-how-it-works .hiw-prep dt { font-weight: 600; margin-bottom: 0.5rem; }
.page-how-it-works .hiw-prep dd { margin: 0; }
.page-how-it-works .hiw-safety,
.page-how-it-works .hiw-faq { max-width: 800px; }
.page-how-it-works .hiw-source { font-size: 0.9rem; }
.page-how-it-works .hiw-faq details { border-bottom: 1px solid var(--gh-line); }
.page-how-it-works .hiw-faq summary { padding: 1.2rem 0.5rem; font-weight: 600; cursor: pointer; }
.page-how-it-works .hiw-faq details p { margin: 0; padding: 0 0.5rem 1.4rem; }
.page-how-it-works .final-cta { padding: 4rem 1.5rem; text-align: center; }
.page-how-it-works .final-cta p { max-width: 660px; margin: 0 auto 2rem; }
.page-how-it-works .final-cta .actions { align-items: center; gap: 1rem 2rem; }
.page-how-it-works a:focus-visible,
.page-how-it-works button:focus-visible,
.page-how-it-works summary:focus-visible { outline: 3px solid #763b43; outline-offset: 4px; border-radius: 3px; }
.page-how-it-works footer a:focus-visible { outline-color: #fff9f2; }
.page-how-it-works nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; }
.page-how-it-works .hiw-skip { position: fixed; top: 0.6rem; left: 1rem; transform: translateY(-200%); z-index: 1001; padding: 0.8rem 1.2rem; color: #fff9f2; background: #3b2436; }
.page-how-it-works .hiw-skip:focus { transform: none; }
@media (max-width: 1100px) {
  .page-how-it-works .nav-links:not(.open) { visibility: hidden; }
  .page-how-it-works .footer-inner { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .page-how-it-works .hiw-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-how-it-works .hiw-prep { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .page-how-it-works header.hero-strip { padding: 2rem 1.25rem; }
  .page-how-it-works .hero-inner { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .page-how-it-works header.hero-strip h1 { font-size: clamp(1.85rem, 6.5vw, 2.5rem); max-width: 22ch; }
  .page-how-it-works .hiw-photo { width: min(100%, 480px); margin: 0 auto; border-radius: 1.5rem; }
  .page-how-it-works .hiw-roles,
  .page-how-it-works .hiw-choice { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .page-how-it-works .hiw-roles > div + div { border-left: 0; padding-left: 0; border-top: 1px solid var(--gh-line); padding-top: 2rem; }
  .page-how-it-works section.content { padding: 3rem 1.25rem; }
}
@media (max-width: 480px) {
  .page-how-it-works .hiw-steps,
  .page-how-it-works .hiw-prep { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .page-how-it-works .hiw-actions { gap: 0.6rem; }
  .page-how-it-works .hiw-actions .btn { width: 100%; }
  .page-how-it-works .hiw-actions .hiw-text-link { margin: 0 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .page-how-it-works *,
  .page-how-it-works *::before,
  .page-how-it-works *::after { transition: none !important; }
}