/* v8 — the client chose font B: Gilda Display (headings) + Lora (text and italic display lines; Gilda has no italic).
   Cinzel (capitals) and Pinyon Script stay. */
:root { --display: "Gilda Display", Georgia, serif; --display-italic: "Lora", Georgia, serif; --body: "Lora", Georgia, serif; --body-scale: .92; }
body { font-size: calc(19px * var(--body-scale)); }
.display em, .hero-script, .fresco-caption, .intro-promise, .about-pull { font-family: var(--display-italic) !important; font-style: italic; }
.display, .hero-copy h1, .about-letter .display, .policy-card .display { font-weight: 400; }


/* The twelve signs: gold medallions under the fresco (client: "add small images of zodiac signs").
   Stand-in symbols from a 12-glyph font subset; an <img> inside .zg replaces each symbol when the artwork arrives. */
.zodiac { padding: 10px 16px 54px; }
.zodiac-row { list-style: none; margin: 0 auto; padding: 0; width: min(1180px, 100%); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 10px; }
.zodiac-row li { display: grid; justify-items: center; gap: 8px; }
.zg { width: clamp(46px, 5.6vw, 72px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  font: 400 clamp(1.3rem, 2.3vw, 2rem)/1 'Zodiac Symbols', 'Noto Sans Symbols', 'Segoe UI Symbol', serif; color: var(--gold-deep);
  background: radial-gradient(circle at 50% 38%, #fffaf0, #f3e3c2 70%); box-shadow: inset 0 0 0 1px rgba(138,100,32,.55), inset 0 0 0 4px #fbf3e2, inset 0 0 0 5px rgba(201,162,78,.5), 0 6px 14px -8px rgba(74,40,20,.45);
  transition: transform .4s var(--ease, ease), box-shadow .4s; }
.zg img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; }
.zodiac-row li:hover .zg { transform: translateY(-3px); box-shadow: inset 0 0 0 1px rgba(138,100,32,.7), inset 0 0 0 4px #fbf3e2, inset 0 0 0 5px rgba(201,162,78,.8), 0 10px 22px -10px rgba(201,162,78,.9); }
.zn { font: 600 .62rem/1.2 var(--caps); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-navy); text-align: center; }
@media (max-width: 860px) { .zodiac-row { grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: 18px; } .zg { width: clamp(46px, 12vw, 64px); font-size: 1.5rem; } }
@media (max-width: 560px) { .zodiac-row { grid-template-columns: repeat(4, minmax(0, 1fr)); } .zg { width: 56px; } .zn { letter-spacing: .08em; font-size: .6rem; } }
/* Illustrated medallions (the artwork has its own gold border, so no drawn ring). */
.zg.art { background: none; box-shadow: none; width: clamp(54px, 6.2vw, 80px); filter: drop-shadow(0 4px 8px rgba(74,40,20,.18)); }
.zodiac-row li:hover .zg.art { box-shadow: none; filter: drop-shadow(0 8px 14px rgba(201,162,78,.55)); }
@media (max-width: 860px) { .zg.art { width: clamp(54px, 13vw, 72px); } }
@media (max-width: 560px) { .zg.art { width: 64px; } }
.zodiac.parchment { background: none; }   /* no seam: the band sits on the page parchment */

/* v8 · Plan illustrations replace the small gold icons: one envelope, a bundle of seven, a stack of thirteen.
   Decorative (alt=""): the card text already says how many envelopes each plan brings. */
.plan { grid-template-columns: 104px minmax(0, 1fr) auto 26px; padding-block: 12px; }
.plan-img { grid-column: 1; grid-row: 1; width: 104px; height: 104px; object-fit: contain; filter: drop-shadow(0 6px 8px rgba(74,11,21,.18));
  transition: transform .6s var(--ease); }
.plan:has(input:checked) .plan-img { transform: rotate(-4deg) scale(1.06); }
@media (max-width: 480px) {
  .plan { grid-template-columns: 76px minmax(0, 1fr) 24px; }
  .plan-img { width: 76px; height: 76px; grid-row: 1 / span 2; }
}
@media (prefers-reduced-motion: reduce) { .plan-img, .plan:has(input:checked) .plan-img { transition: none; transform: none; } }

/* v8 · About us sign-off: the client's own logo instead of the script font (client: that script matched a competitor's). */
.about-sign img { display: block; width: min(280px, 72%); height: auto; margin-left: auto; }