/* styles.css - design tokens, self-hosted fonts, base typography, and the
   signature patterns extracted from the design authority:
   PMHC-planning-updated/planning/landing page combined/Landing Page.html */

/* ---------- Self-hosted fonts (assets/fonts/) ---------- */
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/montserrat-v31-latin-regular.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/montserrat-v31-latin-italic.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/montserrat-v31-latin-500.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 500; font-display: swap; src: url('../fonts/montserrat-v31-latin-500italic.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/montserrat-v31-latin-600.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 600; font-display: swap; src: url('../fonts/montserrat-v31-latin-600italic.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/montserrat-v31-latin-700.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 700; font-display: swap; src: url('../fonts/montserrat-v31-latin-700italic.woff2') format('woff2'); }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/open-sans-v44-latin-regular.woff2') format('woff2'); }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/open-sans-v44-latin-500.woff2') format('woff2'); }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/open-sans-v44-latin-600.woff2') format('woff2'); }

/* ---------- Design tokens (keep in sync with @theme in input.css) ---------- */
:root {
  --ink: #2C2C2A;
  --graytxt: #5F5E5A;
  --gold: #BA7517;
  --golddk: #9E6314;
  --goldtint: #F7EFE2;
  --offwhite: #FAFAF9;
  --hairline: #EDEBE6;
}

/* ---------- Base ---------- */
html, body { background: #FFFFFF; color: var(--ink); }
/* Defensive horizontal-overflow guard for mobile. `clip` (not `hidden`) avoids
   creating a scroll container, so it never breaks the lg:sticky asides. */
html, body { overflow-x: clip; }
body { font-family: 'Open Sans', ui-sans-serif, system-ui, sans-serif; }
h1, h2, h3, h4, h5, h6, .font-display { font-family: 'Montserrat', ui-sans-serif, system-ui, sans-serif; }

/* ---------- Eyebrow label ---------- */
.eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 11px;
  color: var(--gold);
}

/* ---------- Hero gradient scrims (light, dissolve into white) ---------- */
.hero-scrim-left { background: linear-gradient(90deg, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.92) 32%, rgba(255,255,255,0.62) 55%, rgba(255,255,255,0.12) 78%, rgba(255,255,255,0) 100%); }
.hero-scrim-bottom { background: linear-gradient(180deg, rgba(255,255,255,0) 50%, rgba(255,255,255,0.85) 90%, #FFFFFF 100%); }

/* ---------- Reveal-on-scroll (paired with main.js IntersectionObserver) ---------- */
.reveal { opacity: 0; transform: translateY(20px); filter: blur(4px); transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1), filter .8s cubic-bezier(.16,1,.3,1); }
.reveal.is-visible { opacity: 1; transform: none; filter: blur(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; filter: none; transition: none; }
  .marquee-track { animation: none !important; }
}

/* ---------- Numbered steps ("How it works") - solid gold fill ---------- */
.outline-num {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 84px;
  line-height: 0.9;
  letter-spacing: 0.005em;
  color: var(--gold);
  -webkit-text-stroke: 0;
}
@media (min-width: 1024px) {
  .outline-num { font-size: 100px; }
}

/* ---------- Marquee (credibility tags) ---------- */
.marquee { mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; gap: 1.5rem; animation: marquee 38s linear infinite; width: max-content; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Hero accent (production hard-codes the "italic" variant) ---------- */
.accent { color: var(--gold); font-style: italic; font-weight: 500; }

/* ---------- Nav scrolled state (paired with main.js) ---------- */
#navbar { transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease; }
#navbar.scrolled {
  background-color: #FFFFFF;
  border-bottom-color: var(--hairline);
  box-shadow: 0 8px 24px -16px rgba(44,44,42,0.12);
}

/* ---------- Mobile menu ---------- */
.mobile-menu.open { opacity: 1; pointer-events: auto; }

/* ---------- Focus ring ---------- */
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 6px;
}