/* ============================================================
   Orange Grove Social — Coastal layer (2026-09-26)
   Loaded LAST on every page (just before </head>, after page <style>),
   so it wins ties without !important. The few !important flags below
   exist only to beat page-level heading rules or inline style="" attrs.
   Colors come from the tokens in ogs-v4.css.
   ============================================================ */

/* ---- Display type: Fraunces, bold and soft ---- */
h1, h2, h3, .hero-h1, .sec-title, .final-h, .brand, .pkg-price, .link-line,
.gets-cta h3, .pillar h3, .pains-lede, .problem-lede{
  font-variation-settings: "SOFT" 100, "opsz" 144;
}
h1, .hero-h1, .sec-title, .final-h{
  font-weight: 700 !important;          /* pages set weight 400 on their own hero h1 selectors */
  letter-spacing: -.035em !important;
}
.hero-h1{ font-size: clamp(3.2rem, 8.6vw, 9rem); line-height: .95 }
h3, .gets-cta h3, .pillar h3{ font-weight: 600; letter-spacing: -.015em }

/* Headlines in Postcard Blue, accent words in Terracotta.
   Dark bands (.approach/.results/.system/.versus) keep their own cream
   headline rules, which out-rank these. */
.sec-title{ color: var(--postcard) }
/* Board terracotta (#D66A4A) is only ~3:1 on parchment — used for rules/fills.
   Terracotta TEXT uses the deeper shades so it stays readable. */
.sec-title em{ color: var(--orange-deep) }
.case-card h3 em,
.words .lead-quote em{ color: var(--cta-hover) }   /* both sit on the darker parchment */

/* Wide-tracked labels, like the board's captions */
.mono-tag, .sec-num, .eyebrow{ letter-spacing: .24em }
.p-num{ letter-spacing: .12em }
@media (max-width: 760px){ .hero-kicker .mono-tag{ letter-spacing: .1em } }
.sec-num{ color: var(--cta-hover) }

/* ---- Brand mark: butter-yellow sun + blue wordmark ---- */
.brand{ font-weight: 700; letter-spacing: -.02em; color: var(--postcard) }
.brand:hover{ color: var(--postcard) }
.brand-mark{
  background: var(--butter);
  box-shadow: inset -3px -4px 0 rgba(214, 106, 74, .25);
}
.brand-mark::after{ background: var(--postcard) }

/* ---- Buttons & links ---- */
.btn{ border-radius: 6px; letter-spacing: .04em }
.link-line{ font-weight: 500 }

/* Hero kicker rule becomes a small wave */
.rule-seg{
  border: 0; height: 10px; width: 46px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='10' viewBox='0 0 46 10'%3E%3Cpath d='M1 5c4-4 7-4 11 0s7 4 11 0 7-4 11 0 7 4 11 0' fill='none' stroke='%23F2D47A' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center;
}

/* ---- Dark bands: butter-yellow accents ---- */
.approach .sec-num, .results .sec-num, .system .sec-num, .versus .sec-num{ color: var(--butter) }

/* Hero video overlay: navy wash instead of warm brown (beats page .hero-bg::after) */
body .hero-bg::after{
  background: linear-gradient(to top, rgba(20, 35, 61, .86) 0%, rgba(20, 35, 61, .34) 48%, rgba(20, 35, 61, .18) 100%);
}

/* ---- Photography: postcard borders + a warm film grade ---- */
.collage-grid img, .ind-media img, .shot img{
  border-radius: 3px !important;        /* overrides inline style="border-radius:18px" */
  filter: saturate(.9) contrast(.95) sepia(.1);
}
.collage-grid > div{
  background: #FBF7EF; padding: 8px; border-radius: 3px;
  box-shadow: 0 1px 0 rgba(20, 35, 61, .12), 0 18px 34px -24px rgba(20, 35, 61, .45);
}
.ind-media{ border-radius: 4px }
video{ filter: saturate(.92) sepia(.06) }
.reel-row .frame, .proof-media [style*="aspect-ratio: 9 / 16"]{
  border-radius: 6px !important;        /* overrides inline 18px */
  outline: 8px solid #FBF7EF;
}

/* ---- Final CTA: a postcard-blue band with a rising sun ---- */
.final{ background: var(--postcard); position: relative; overflow: hidden }
.final::before{
  content: ""; position: absolute; left: 50%; top: 58%;
  width: min(560px, 90vw); aspect-ratio: 1; border-radius: 50%;
  transform: translateX(-50%);
  background: var(--butter);
}
.final .wrap{ position: relative; z-index: 1 }
.final-h{ color: var(--parchment) }
.final-h em{ color: var(--butter) }
.final p{ color: rgba(246, 239, 227, .86) }

/* Footer address band sits on the navy footer: light text
   (it inherited dark ink colors before — near-invisible since launch) */
footer .nap-inner{ color: rgba(246, 239, 227, .74) }
footer .nap-inner a{ color: var(--parchment) }

/* Offer cards: parchment postcard with a terracotta top rule */
.gets-cta{ border-top: 3px solid var(--terracotta); border-radius: 4px }
.pkg-price{ color: var(--postcard) }