/* Park Community Credit Union — Lexington CD Campaign
   Design DNA Hash: 173413519b01
   Brand pulled live from parkcommunity.com:
     Type: Verlag (headings) + Open Sans (body)
     Purple #7A2A90 / #471E5C  |  Magenta #EC008C / #B80070
   Color strategy: dark-immersive | Components: minimal-elegant
   Do not edit by hand — regenerate via the engine. */

:root {
  /* ---- Exact Park brand tokens (parkcommunity.com) ---- */
  --purple: #7a2a90;          /* primary */
  --purple-deep: #471e5c;     /* primary-dark */
  --purple-grad: #7a2d8e;     /* primary-gradient */
  --purple-light: #b67fbc;    /* primary-light */

  --pink: #ec008c;            /* secondary — the brand magenta, bright */
  --pink-dark: #b80070;       /* secondary-dark — button fill (AA with white text) */
  --pink-darker: #98005c;     /* pressed */
  --pink-2: #eb9ad2;          /* secondary-light — soft accent text on dark */

  --brand-neutral: #767576;
  --brand-neutral-light: #e5e4e4;

  /* ---- Surfaces (stark, solid black to match parkcommunity.com) ---- */
  --bg-base: #0a0a0a;         /* stark solid black, like Park's dark sections */
  --bg-2: #141317;            /* subtle solid band */
  --bg-card: #1a1920;         /* solid card surface */
  --bg-elevated: #221f29;

  /* ---- Text ---- */
  --tx: #f7f5fb;
  --tx-2: #bcb3c8;            /* secondary, > 7:1 on dark */
  --tx-3: #928aa0;            /* muted labels (large / secondary only) */

  /* ---- Lines ---- */
  --line: rgba(255,255,255,0.10);
  --line-strong: rgba(255,255,255,0.20);

  /* ---- Type ---- */
  --font-head: "Verlag", "Figtree", system-ui, sans-serif;   /* client Verlag wins where licensed */
  --font-body: "Open Sans", system-ui, sans-serif;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  /* ---- Spacing (airy) ---- */
  --section: 96px;
  --radius: 4px;

  --z-sticky: 100;
  --z-menu: 300;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg-base);
  color: var(--tx);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Flat, solid surfaces to match parkcommunity.com (no film grain, no glows). */
body > * { position: relative; z-index: 1; }

/* body-scoped so these win over Tailwind CDN preflight regardless of load order */
body :is(h1, h2, h3, h4) {
  font-family: var(--font-head);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--tx);
}
body p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
::selection { background: var(--pink); color: #fff; }

/* ============ Layout fallback layer ============
   Mirrors the exact Tailwind utilities used in the markup so the page is laid
   out correctly on first paint, before the Tailwind CDN runtime hydrates.
   This eliminates the load-time reflow "glitch". */
.grid { display: grid; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-center { justify-content: center; }
.text-center { text-align: center; }
.auto-rows-fr { grid-auto-rows: 1fr; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0,1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.gap-3 { gap: .75rem; }
.gap-4 { gap: 1rem; }
.gap-5 { gap: 1.25rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }
.gap-10 { gap: 2.5rem; }
[class~="gap-x-5"] { column-gap: 1.25rem; }
[class~="gap-x-6"] { column-gap: 1.5rem; }
[class~="gap-y-3"] { row-gap: .75rem; }
.col-span-2 { grid-column: span 2 / span 2; }

@media (min-width: 640px) {
  [class~="sm:grid-cols-2"] { grid-template-columns: repeat(2, minmax(0,1fr)); }
  [class~="sm:flex-row"] { flex-direction: row; }
}
@media (min-width: 768px) {
  [class~="md:grid-cols-2"] { grid-template-columns: repeat(2, minmax(0,1fr)); }
  [class~="md:grid-cols-3"] { grid-template-columns: repeat(3, minmax(0,1fr)); }
  [class~="md:grid-cols-4"] { grid-template-columns: repeat(4, minmax(0,1fr)); }
  [class~="md:grid-cols-[1.4fr_1fr_1fr]"] { grid-template-columns: 1.4fr 1fr 1fr; }
  [class~="md:col-span-2"] { grid-column: span 2 / span 2; }
}
@media (min-width: 1024px) {
  [class~="lg:grid-cols-4"] { grid-template-columns: repeat(4, minmax(0,1fr)); }
  [class~="lg:grid-cols-[1.35fr_1fr]"] { grid-template-columns: 1.35fr 1fr; }
  [class~="lg:grid-cols-[0.8fr_1.2fr]"] { grid-template-columns: .8fr 1.2fr; }
  [class~="lg:grid-cols-[0.7fr_1.3fr]"] { grid-template-columns: .7fr 1.3fr; }
  [class~="lg:grid-cols-[1fr_0.9fr]"] { grid-template-columns: 1fr .9fr; }
  [class~="lg:grid-cols-[1.1fr_0.9fr]"] { grid-template-columns: 1.1fr .9fr; }
  [class~="lg:grid-cols-[1.2fr_1fr]"] { grid-template-columns: 1.2fr 1fr; }
  [class~="lg:gap-16"] { gap: 4rem; }
  [class~="lg:gap-20"] { gap: 5rem; }
}

/* ---------- Structure helpers ---------- */
.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
@media (min-width: 1024px) { .wrap { padding-left: 40px; padding-right: 40px; } }
.section { padding-top: 72px; padding-bottom: 72px; }
@media (min-width: 768px) { .section { padding-top: var(--section); padding-bottom: var(--section); } }
.band-2 { background: var(--bg-2); }
.eyebrow { font-family: var(--font-head); font-weight: 700; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--pink-2); }

/* ---------- Buttons: classic-solid-square (brand magenta) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 15px 32px;
  font-family: var(--font-head); font-weight: 700; font-size: 14px;
  letter-spacing: 0.08em; text-transform: uppercase;
  border: 2px solid transparent; border-radius: var(--radius);
  cursor: pointer;
  transition: background-color 180ms var(--ease-out), color 180ms var(--ease-out),
              border-color 180ms var(--ease-out), transform 140ms var(--ease-out);
}
.btn-primary { background: var(--pink-dark); color: #fff; border-color: var(--pink-dark); }
.btn-outline { background: transparent; color: var(--tx); border-color: var(--line-strong); }
.btn-block { width: 100%; }
.btn:focus-visible { outline: 3px solid var(--pink-2); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { background: var(--pink); border-color: var(--pink); }
  .btn-outline:hover { border-color: var(--pink); color: var(--pink-2); }
}
.btn:active { transform: scale(0.97); }

.tlink { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-head); font-weight: 700; color: var(--pink-2); letter-spacing: 0.02em; transition: color 160ms var(--ease-out); }
.tlink i { transition: transform 180ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .tlink:hover { color: #fff; } .tlink:hover i { transform: translateX(4px); } }

/* ---------- Tag / badge (solid, square — not a ghost pill) ---------- */
.tag {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--pink-dark); color: #fff;
  font-family: var(--font-head); font-weight: 700; font-size: 12px;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 8px 14px; border-radius: var(--radius);
}

/* ---------- Cards: minimal-elegant on dark ---------- */
.card { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; }
.card-elevated { background: var(--bg-elevated); }

/* ---------- Nav ---------- */
.nav { position: sticky; top: 0; z-index: var(--z-sticky); background: rgba(11,9,16,0.88); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.brand { display: inline-flex; align-items: center; }
.brand .wordmark { height: 30px; width: auto; }
.nav-links { display: none; align-items: center; gap: 34px; }
.nav-links a { font-family: var(--font-head); font-weight: 600; font-size: 15px; color: var(--tx-2); transition: color 160ms var(--ease-out); }
.nav-links a:hover, .nav-links a.active { color: var(--tx); }
.nav-links a.active { position: relative; }
.nav-links a.active::after { content:""; position:absolute; left:0; right:0; bottom:-26px; height:2px; background: var(--pink); }
.nav-right { display: none; align-items: center; gap: 16px; }
.hamburger { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; background: transparent; border: 1px solid var(--line-strong); border-radius: var(--radius); color: var(--tx); cursor: pointer; }
@media (min-width: 900px) { .nav-links, .nav-right { display: flex; } .hamburger { display: none; } }

/* Mobile menu — full-viewport overlay */
.mobile-menu {
  position: fixed; top: 0; left: 0;
  width: 100vw; height: 100vh; height: 100dvh;
  z-index: var(--z-menu);
  display: none; flex-direction: column;
  background: var(--bg-2);
  padding: 24px;
  padding-top: max(24px, env(safe-area-inset-top));
  padding-bottom: max(24px, env(safe-area-inset-bottom));
  overflow-y: auto;
}
.mobile-menu.is-open { display: flex; }
.mobile-menu .mm-close { position: absolute; top: 16px; right: 16px; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--line-strong); border-radius: var(--radius); color: var(--tx); font-size: 24px; cursor: pointer; }
.mobile-menu nav { margin-top: 72px; display: flex; flex-direction: column; gap: 8px; }
.mobile-menu nav a { font-family: var(--font-head); font-weight: 800; font-size: 30px; letter-spacing: -0.02em; padding: 12px 0; border-bottom: 1px solid var(--line); }
.mobile-menu .mm-cta { margin-top: 32px; display: flex; flex-direction: column; gap: 12px; }

/* ---------- Decorative gradient orbs (static) ---------- */
/* Spotlight glows removed for the flat, solid look of parkcommunity.com. */
.orb, .orb-pink, .orb-purple { display: none !important; }

/* Park signature triangle mesh motif (flat line pattern, not a glow) */
.tri { position: absolute; pointer-events: none; z-index: 0; }

/* ---------- The rate ---------- */
.rate-display { font-family: var(--font-head); font-weight: 800; font-size: clamp(88px, 18vw, 260px); line-height: 0.86; letter-spacing: -0.03em; color: var(--tx); }
.rate-display .apy { color: var(--pink); }
.rate-display sup { font-size: 0.3em; font-weight: 700; vertical-align: super; color: var(--pink); }
/* Fixed-width figures so counting numbers do not reflow/jitter as digits change */
[data-count], [data-earn], [data-total] { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* ---------- Rate comparison bars ---------- */
.bar-row { display: grid; grid-template-columns: 1fr; gap: 8px; padding: 18px 0; border-bottom: 1px solid var(--line); }
@media (min-width: 640px) { .bar-row { grid-template-columns: 210px 1fr; align-items: center; gap: 20px; } }
.bar-name { font-family: var(--font-head); font-weight: 700; font-size: 16px; }
.bar-name small { display:block; font-family: var(--font-body); font-weight:400; font-size: 12px; color: var(--tx-3); letter-spacing: 0; text-transform: none; }
.bar-track { position: relative; height: 44px; background: rgba(255,255,255,0.05); border-radius: var(--radius); overflow: hidden; }
.bar-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; transform: scaleX(0); transform-origin: left center; background: var(--line-strong); border-radius: var(--radius); transition: transform 900ms var(--ease-out); }
.bar-row.is-park .bar-fill { background: linear-gradient(90deg, var(--pink), var(--purple)); }
.bar-val { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-family: var(--font-head); font-weight: 800; font-size: 18px; color: var(--tx); }
.bar-row.is-park { background: var(--bg-card); border: 1px solid rgba(236,0,140,0.45); border-radius: var(--radius); padding: 16px; }

/* ---------- Calculator ---------- */
.chip { font-family: var(--font-head); font-weight: 700; font-size: 15px; padding: 12px 18px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: transparent; color: var(--tx-2); cursor: pointer; transition: border-color 160ms var(--ease-out), color 160ms var(--ease-out), background-color 160ms var(--ease-out); }
.chip[aria-pressed="true"] { border-color: var(--pink); color: #fff; background: rgba(236,0,140,0.14); }
.chip:focus-visible { outline: 3px solid var(--pink-2); outline-offset: 2px; }
.earn-num { font-family: var(--font-head); font-weight: 800; font-size: clamp(52px, 9vw, 96px); line-height: 1; color: var(--pink); letter-spacing: -0.02em; }

/* ---------- FAQ ---------- */
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q { width: 100%; text-align: left; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 0; background: transparent; border: 0; color: var(--tx); font-family: var(--font-head); font-weight: 700; font-size: clamp(18px, 2.4vw, 22px); cursor: pointer; }
.faq-q i { color: var(--pink-2); transition: transform 220ms var(--ease-out); flex: none; }
.faq-q[aria-expanded="true"] i { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 300ms var(--ease-out); color: var(--tx-2); }
.faq-a .faq-a-inner { padding-bottom: 24px; max-width: 70ch; }

/* ---------- Forms ---------- */
.field { display: block; margin-bottom: 20px; }
.field label { display: block; font-family: var(--font-head); font-weight: 600; font-size: 14px; margin-bottom: 8px; color: var(--tx-2); }
.field .req { color: var(--pink-2); }
.field input, .field select, .field textarea { width: 100%; background: var(--bg-base); color: var(--tx); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 14px 16px; font-family: var(--font-body); font-size: 16px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--pink); box-shadow: 0 0 0 3px rgba(236,0,140,0.28); }

/* ---------- Map placeholder ---------- */
.mapph { position: relative; height: 200px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line);
  background: linear-gradient(rgba(11,9,16,0.2), rgba(11,9,16,0.2)),
    repeating-linear-gradient(0deg, transparent 0 22px, rgba(255,255,255,0.05) 22px 23px),
    repeating-linear-gradient(90deg, transparent 0 22px, rgba(255,255,255,0.05) 22px 23px),
    var(--bg-elevated);
  display: flex; align-items: center; justify-content: center; }
.mapph .pin { color: var(--pink); font-size: 30px; filter: drop-shadow(0 4px 10px rgba(236,0,140,0.5)); }

/* Branch mini-map thumbnail (landing page) */
.branch-map { height: 210px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--bg-elevated); }
.branch-map .leaflet-control-attribution { font-size: 10px; background: rgba(6,4,9,0.6); }

/* ---------- Locations finder (mirrors parkcommunity.com/locations) ---------- */
.loc-search { display: flex; align-items: center; gap: 12px; background: var(--bg-base); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 0 16px; margin-bottom: 24px; }
.loc-search i { color: var(--tx-3); }
.loc-search input { flex: 1; min-width: 0; background: transparent; border: 0; color: var(--tx); font-family: var(--font-body); font-size: 16px; padding: 15px 0; }
.loc-search input:focus { outline: none; }
.loc-search:focus-within { border-color: var(--pink); box-shadow: 0 0 0 3px rgba(236,0,140,0.25); }
.loc-region { font-family: var(--font-head); font-weight: 700; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tx-3); margin-bottom: 14px; }
.loc-list { display: flex; flex-direction: column; gap: 12px; }
.loc-item { display: flex; flex-direction: column; gap: 6px; text-align: left; width: 100%; cursor: pointer; background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; transition: border-color 160ms var(--ease-out), background-color 160ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .loc-item:hover { border-color: var(--line-strong); } }
.loc-item.is-active { border-color: var(--pink); background: rgba(236,0,140,0.08); }
.loc-item:focus-visible { outline: 3px solid var(--pink-2); outline-offset: 2px; }
.loc-name { font-family: var(--font-head); font-weight: 800; font-size: 19px; color: var(--tx); }
.loc-addr { color: var(--tx-2); font-size: 15px; }
.loc-meta { color: var(--tx-3); font-size: 13px; }
.loc-meta i { color: var(--tx-3); margin-right: 6px; }
.loc-tag { color: var(--pink-2); font-family: var(--font-head); font-weight: 600; font-size: 13px; }
.loc-empty { color: var(--tx-2); font-size: 14px; margin-top: 16px; max-width: 46ch; }
.loc-map { display: flex; flex-direction: column; gap: 14px; }
.loc-frame-wrap { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--bg-elevated); }
.loc-map iframe, .loc-canvas { display: block; width: 100%; height: 420px; border: 0; }
.loc-canvas { background: var(--bg-elevated); }
@media (min-width: 1024px) { .loc-map { position: sticky; top: 96px; } .loc-map iframe, .loc-canvas { height: 500px; } }

/* Leaflet on the dark brand */
.leaflet-container { background: var(--bg-elevated); font-family: var(--font-body); }
.leaflet-bar a, .leaflet-bar a:hover { background: var(--bg-card); color: var(--tx); border-bottom-color: var(--line); }
.leaflet-control-attribution { background: rgba(6,4,9,0.7); color: var(--tx-3); }
.leaflet-control-attribution a { color: var(--pink-2); }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--bg-elevated); color: var(--tx); box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
.leaflet-popup-content-wrapper { border-radius: var(--radius); border: 1px solid var(--line-strong); }
.leaflet-popup-content { margin: 14px 16px; }
.leaflet-popup-content .pop-name { display: block; font-family: var(--font-head); font-weight: 800; font-size: 15px; color: var(--tx); }
.leaflet-popup-content .pop-addr { display: block; color: var(--tx-2); font-size: 13px; margin-top: 4px; }
.leaflet-popup-close-button { color: var(--tx-3) !important; }
.loc-pin { background: none; border: 0; }

/* Embedded official Park locator (LocatorSearch), deep-linked to Lexington */
.locator-embed { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--bg-elevated); }
.locator-embed iframe { display: block; width: 100%; height: 560px; border: 0; }
@media (min-width: 768px) { .locator-embed iframe { height: 640px; } }

/* ---------- Footer ---------- */
.foot { background: #060409; border-top: 1px solid var(--line); }
.legal { font-size: 12px; line-height: 1.7; color: var(--tx-3); max-width: 900px; }

/* ---------- Reveal on scroll (JS-gated: without JS, everything is visible) ----------
   Uses a keyframe animation, not a transition. A transition can freeze at its start
   value when the .in class lands in the same paint as the initial hidden state; an
   animation always runs to completion and holds its end state with fill-mode both. */
html.js [data-animate] { opacity: 0; }
html.js [data-animate-group] > * { opacity: 0; }
html.js [data-animate].in { animation: dna-reveal 700ms var(--ease-out) both; }
html.js [data-animate-group].in > * { animation: dna-reveal 700ms var(--ease-out) both; }
html.js [data-animate-group].in > *:nth-child(2) { animation-delay: 90ms; }
html.js [data-animate-group].in > *:nth-child(3) { animation-delay: 180ms; }
html.js [data-animate-group].in > *:nth-child(4) { animation-delay: 270ms; }
html.js [data-animate-group].in > *:nth-child(5) { animation-delay: 360ms; }
@keyframes dna-reveal { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* ---------- Skip link ---------- */
.skip { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--pink-dark); color:#fff; padding: 12px 18px; font-family: var(--font-head); font-weight: 700; border-radius: var(--radius); }
.skip:focus { left: 12px; top: 12px; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  html.js [data-animate], html.js [data-animate-group] > * { opacity: 1 !important; transform: none !important; animation: none !important; }
  .bar-fill { transition: none !important; transform: scaleX(var(--bar-final, 1)) !important; }
}

/* ---------- Print ---------- */
@media print {
  .nav, .mobile-menu, .orb, .btn, .hamburger { display: none !important; }
  body { background: #fff; color: #000; }
  body::before { display: none; }
  .card, .band-2, .foot { background: #fff !important; border-color: #ccc !important; }
  * { color: #000 !important; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 12px; color: #555; }
}