/*
 * site.css — marketing pages (index / about / contact).
 *
 * Loads AFTER theme.css and store.css. Reuses the shared band primitives
 * (.ro-band*, .ro-btn, .ro-eyebrow, .ro-ulink, .ro-watermark) from theme.css
 * and the dark .ro-bar chrome + black .ro-foot footer from store.css, then
 * adds the marketing-only pieces: public nav, hero, prose bands, FAQ
 * accordion, contact form, and the rich site footer.
 *
 * Client brand: gold + PT Serif / Playball, high-contrast bands, parallax,
 * pill buttons. No left-accent stripe cards, no em-dashes in copy.
 */

/* ---- public header nav ---- */
.ro-bar .ro-nav-link { font-family: var(--ro-sans); }
.ro-signin {
  font-size: .82rem; font-weight: 600; color: #14130f; text-decoration: none;
  background: var(--ro-gold-on-dk); border: 1.5px solid var(--ro-gold-on-dk);
  border-radius: var(--ro-pill); padding: .45rem 1.1rem; transition: background .15s ease, color .15s ease;
}
.ro-signin:hover { background: transparent; color: var(--ro-gold-on-dk); }

/* ---- hero ---- */
.ro-band--parallax.ro-hero { min-height: 66vh; display: flex; align-items: center; }
.ro-hero-copy { max-width: 30ch; }
.ro-hero .ro-kicker { display: block; font-family: var(--ro-script); font-size: clamp(2.8rem, 7.5vw, 5rem); color: #f6f3ea; line-height: 1; margin: 0; }
.ro-hero h1 { font-size: clamp(2rem, 4.4vw, 3rem); line-height: 1.06; margin: 0 0 1rem; }
.ro-band--parallax .ro-hero h1 { color: #f6f3ea; }
.ro-hero p { font-size: 1.05rem; max-width: 46ch; margin: 0 0 1.7rem; }
.ro-cta-row { display: flex; flex-wrap: wrap; gap: .7rem; }

/* ---- generic display heading for bands ---- */
.ro-display { font-size: clamp(2.4rem, 6vw, 4rem); margin: 0 0 .6rem; }
.ro-h2 { font-family: var(--ro-serif); font-size: clamp(1.7rem, 3.4vw, 2.3rem); margin: 0 0 1rem; }

/* ---- prose ---- */
.ro-prose { max-width: 62ch; }
.ro-prose p { margin: 0 0 1rem; font-size: 1.02rem; }
.ro-prose p:last-child { margin-bottom: 0; }
.ro-center .ro-prose { margin-left: auto; margin-right: auto; }

/* ---- FAQ accordion (hairline rows, no stripe) ---- */
.ro-faq { max-width: 780px; margin: 1.5rem auto 0; }
.ro-faq details { border-top: 1px solid var(--ro-line-strong); }
.ro-faq details:last-child { border-bottom: 1px solid var(--ro-line-strong); }
.ro-faq summary {
  list-style: none; cursor: pointer; padding: 1.1rem 2rem 1.1rem 0; position: relative;
  font-family: var(--ro-serif); font-size: 1.1rem; color: var(--ro-ink);
}
.ro-faq summary::-webkit-details-marker { display: none; }
.ro-faq summary::after {
  content: "+"; position: absolute; right: .2rem; top: 50%; transform: translateY(-50%);
  font-family: var(--ro-sans); font-weight: 400; font-size: 1.4rem; color: var(--ro-gold-ink); line-height: 1;
}
.ro-faq details[open] summary::after { content: "\2013"; }
.ro-faq .ro-faq-a { padding: 0 2rem 1.2rem 0; color: var(--ro-mut); font-size: .96rem; overflow: hidden; }
.ro-faq summary::after { transition: transform .2s ease; }
.ro-faq .ro-faq-a p { margin: 0; }

/* ---- contact form (over parallax; white gold-border card) ---- */
.ro-form-card {
  background: var(--ro-white); border: 1.5px solid var(--ro-gold); border-radius: var(--ro-soft);
  padding: 2rem 1.9rem 2.2rem; max-width: 560px; margin: 0 auto; color: var(--ro-body);
  box-shadow: 0 24px 60px rgba(0,0,0,.4);
}
.ro-form-card h2 { font-family: var(--ro-serif); font-size: 1.6rem; margin: 0 0 .3rem; color: var(--ro-ink); }
.ro-form-card .ro-form-sub { color: var(--ro-mut); font-size: .95rem; margin: 0 0 1.5rem; }
.ro-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
@media (max-width: 520px) { .ro-form-row { grid-template-columns: 1fr; } }
.ro-field { margin-bottom: 1.1rem; }
.ro-field label { display: block; font-size: .8rem; font-weight: 600; color: var(--ro-ink); margin: 0 0 .3rem; }
.ro-field .req { color: var(--ro-gold-ink); }
.ro-field input, .ro-field textarea {
  width: 100%; padding: .68rem .75rem; font-size: 1rem; font-family: var(--ro-sans);
  border: 1px solid var(--ro-line-strong); border-radius: var(--ro-soft); background: var(--ro-white); color: var(--ro-ink);
}
.ro-field textarea { min-height: 130px; resize: vertical; }
.ro-field input:focus, .ro-field textarea:focus { outline: none; border-color: var(--ro-gold-ink); box-shadow: 0 0 0 3px rgba(138,122,72,.18); }
.ro-form .ts { display: flex; justify-content: center; margin: .2rem 0 1.2rem; min-height: 65px; }
.ro-form-msg { margin-top: 1.1rem; padding: .8rem 1rem; border-radius: var(--ro-soft); font-size: .9rem; display: none; }
.ro-form-msg.show { display: block; }
.ro-form-msg.ok { background: #edf5ed; color: var(--ro-ok); border: 1px solid #cfe6cf; }
.ro-form-msg.err { background: #fbeceb; color: var(--ro-err); border: 1px solid #f0cfcc; }

/* ---- rich site footer (black band) ---- */
.ro-sitefoot { background: var(--ro-black); color: #b3aea3; padding: clamp(3rem, 6vw, 4.5rem) 1.5rem 2.5rem; border-top: 2px solid var(--ro-gold); }
.ro-sitefoot-in { max-width: 1080px; margin: 0 auto; text-align: center; }
.ro-sitefoot .ro-foot-brand { display: inline-block; font-family: var(--ro-script); font-size: clamp(2rem, 5vw, 2.8rem); color: #f3efe2; text-decoration: none; line-height: 1; }
.ro-sitefoot .ro-foot-brand b { color: var(--ro-gold-on-dk); font-weight: 400; }
.ro-sitefoot .ro-foot-brand img { height: 72px; width: auto; display: block; margin: 0 auto; }
.ro-sitefoot .ro-foot-email { display: inline-block; margin: 1rem 0 0; }
.ro-foot-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.4rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.ro-foot-nav a { font-family: var(--ro-serif); font-style: italic; font-size: 1.05rem; color: #cfcabd; text-decoration: none; }
.ro-foot-nav a:hover { color: var(--ro-gold-on-dk); }
.ro-foot-legal { margin: 2rem 0 0; font-size: .74rem; color: #7f7a70; }
.ro-foot-disclaimer { max-width: 70ch; margin: 1rem auto 0; font-size: .72rem; color: #7f7a70; line-height: 1.55; }