/* Shared subpage chrome — ported from index.html so every page matches the homepage.
   Loaded AFTER each page's inline <style> block, so these rules win the cascade.
   Covers: nav scroll states + burger menu, button shine, scroll reveals, and the
   mobile rule that hero/closing CTAs share one row instead of stacking. */

/* ── Button shine (homepage lines: csShine / .cs-primary) ── */
@keyframes csShine { 0% { transform: translateX(-130%) skewX(-18deg); } 55%, 100% { transform: translateX(330%) skewX(-18deg); } }
.cs-primary { position: relative; overflow: hidden; isolation: isolate; transform: translateZ(0); background-color: #FFC300; }
.cs-primary::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.6), transparent); transform: translateX(-130%) skewX(-18deg); animation: csShine 5s ease-in-out 1.2s infinite; pointer-events: none; }
.cs-primary:hover::after { animation-duration: 1.1s; }

/* ── Nav states (homepage): at top show wordmark only; scrolled show CTA, drop wordmark.
      Pages with light (cream) heroes carry .cs-solid: permanently solid, CTA + wordmark always on. ── */
.cs-burger { display: none; background: transparent; border: 0; color: #F7F5F2; font-size: 1.5rem; cursor: pointer; line-height: 1; padding: .25rem; }

/* ── Mobile menu: full-screen takeover ── */
#cs-menu { position: fixed; inset: 0; z-index: 100; background: #001D3D; display: flex; flex-direction: column; padding: 1.1rem clamp(1.25rem,5vw,3.5rem) calc(1.5rem + env(safe-area-inset-bottom)); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .3s ease, visibility .3s ease; }
#cs-menu.open { opacity: 1; visibility: visible; pointer-events: auto; }
.cs-menu-head { display: flex; align-items: center; justify-content: space-between; }
.cs-menu-close { background: transparent; border: 0; color: #F7F5F2; font-size: 1.55rem; cursor: pointer; line-height: 1; padding: .25rem; }
.cs-menu-links { display: flex; flex-direction: column; gap: .4rem; margin-top: clamp(2rem, 8vh, 4rem); }
.cs-menu-links a { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; font-size: clamp(2rem, 6.5vh, 2.6rem); line-height: 1.35; color: #F7F5F2; }
.cs-menu-cta { margin-top: auto; }
/* links + CTA stagger up as the panel fades in */
#cs-menu .cs-menu-links a, #cs-menu .cs-menu-cta { opacity: 0; transform: translateY(16px); transition: opacity .35s ease, transform .35s ease; }
#cs-menu.open .cs-menu-links a, #cs-menu.open .cs-menu-cta { opacity: 1; transform: none; }
#cs-menu.open .cs-menu-links a:nth-child(1) { transition-delay: .06s; }
#cs-menu.open .cs-menu-links a:nth-child(2) { transition-delay: .11s; }
#cs-menu.open .cs-menu-links a:nth-child(3) { transition-delay: .16s; }
#cs-menu.open .cs-menu-links a:nth-child(4) { transition-delay: .21s; }
#cs-menu.open .cs-menu-links a:nth-child(5) { transition-delay: .26s; }
#cs-menu.open .cs-menu-cta { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) {
  #cs-menu, #cs-menu .cs-menu-links a, #cs-menu .cs-menu-cta { transition: none; }
}
#cs-nav-cta { display: none; }
#cs-nav.past-hero #cs-nav-cta, #cs-nav.cs-solid #cs-nav-cta { display: inline-flex; }
#cs-nav.past-hero:not(.cs-solid) .cs-wordmark { display: none; }
@media (max-width: 1000px) {
  .cs-navlink { display: none !important; }
  .cs-burger { display: block; }
}

/* ── Scroll reveals — classes are assigned by JS, so no-JS users see everything immediately ── */
.cs-reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); transition-delay: var(--reveal-delay, 0s); will-change: opacity, transform; }
.cs-reveal.cs-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .cs-reveal { opacity: 1; transform: none; transition: none; }
}

/* ── Hero + closing CTAs share one row on phones (homepage 560px rules) ──
   These override each page's older stack-to-one-column rules by cascade order. */
@media (max-width: 560px) {
  .cs-ctas-row { display: flex !important; flex-wrap: nowrap !important; gap: .6rem !important; }
  .cs-ctas-row > a { flex: 1 1 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: .9rem .5rem !important; font-size: .72rem !important; letter-spacing: .03em !important; white-space: nowrap !important; }
  .cs-ctas-pair { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: .6rem !important; }
  .cs-ctas-pair > a { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: .9rem .5rem !important; font-size: .72rem !important; letter-spacing: .03em !important; white-space: nowrap !important; }
  #cs-nav-cta { padding: .5rem .95rem !important; font-size: .7rem !important; }
}

/* ── ≤430px: wordmark + nav CTA can't share the row — hide the wordmark whenever
   the CTA is visible (solid/past-hero nav). The per-page `.nav-brand` media rules
   were dead code: the span's class is .cs-wordmark (bug found 2026-07-08). ── */
@media (max-width: 430px) {
  #cs-nav.cs-solid .cs-wordmark, #cs-nav.past-hero .cs-wordmark { display: none !important; }
}