/* The Sound Bath Company — global resets + responsive overrides.
   All component styling lives inline in index.html so the design is
   preserved exactly; this file only holds what inline styles cannot do. */

html, body { margin: 0; padding: 0; background: #F4E2D2; }
* { box-sizing: border-box; }
a { color: #C7481B; text-decoration: none; }
a:hover { opacity: .75; }
h1, p { margin: 0; }
img { max-width: 100%; }
[data-sticky][hidden] { display: none !important; }

/* ---- Hero: the arch is sized in px for the desktop composition.
        Below 1100px it scales down in steps so the sun, headline and
        both calls to action stay inside the first screen. ---- */

@media (max-width: 1100px) {
  .hero { height: 640px !important; }
  .arch { width: min(600px, 92vw) !important; height: 586px !important;
          border-radius: 50% 50% 0 0 / 51% 51% 0 0 !important; }
  .rays { width: 760px !important; height: 760px !important; top: 84px !important; }
  .sun  { width: 142px !important; height: 142px !important; top: 66px !important; }
  .arch-copy { padding: 236px 44px 0 !important; }
  .headline { font-size: 66px !important; }
}

@media (max-width: 820px) {
  .hero { height: 580px !important; }
  .arch { width: min(520px, 94vw) !important; height: 520px !important; top: 44px !important; }
  .rays { width: 640px !important; height: 640px !important; top: 70px !important; }
  .sun  { width: 118px !important; height: 118px !important; top: 54px !important; }
  .arch-copy { padding: 198px 34px 0 !important; }
  .headline { font-size: 54px !important; }
  .topbar { padding: 20px 24px !important; }
  .topbar > div:first-child { font-size: 23px !important; }
}

/* Phones: the arch narrows to 84vw and drops to 78px from the top, so the
   angel plates read above the dome and at both bottom corners instead of
   being squeezed to a sliver. Both plates stay visible at this size. */
@media (max-width: 560px) {
  .hero { height: 596px !important; }
  .arch { width: 84vw !important; height: 452px !important; top: 78px !important; }
  .rays { width: 520px !important; height: 520px !important; top: 52px !important; }
  .sun  { width: 84px !important; height: 84px !important; top: 38px !important; }
  .arch-copy { padding: 146px 18px 0 !important; }
  .headline { font-size: 38px !important; }
  .arch-copy p { font-size: 15px !important; max-width: 260px !important; }
  .topbar { padding: 16px 18px !important; }
  .topbar > div:first-child { font-size: 19px !important; white-space: normal !important; }
}

/* ---- The interest section.
        Desktop: explainer over offerings in the left column, the Tally panel
        spanning both rows on the right.
        Mobile: one column in DOM order — explainer, form, offerings — so the
        form is reachable without scrolling past the three offering cards. ---- */

.explainer  { grid-column: 1; grid-row: 1; }
.offerings  { grid-column: 1; grid-row: 2; }
.formpanel  { grid-column: 2; grid-row: 1 / span 2; position: sticky; top: 24px; }

@media (max-width: 900px) {
  #interest { grid-template-columns: 1fr !important; }
  .explainer, .offerings, .formpanel {
    grid-column: 1 !important; grid-row: auto !important;
    position: static !important;
  }
}