/* Shared pillar page styles — Kyle Perks brand */
:root {
  --sky-deep: #0b2a45; --sky-mid: #1a5f8a; --sky-light: #3a8fc4;
  --sky-pale: #c8e6f5; --sky-mist: #e8f4fb; --cloud-white: #f5fafd;
  --gold: #c9a84c; --gold-light: #e8c96a;
  --text-dark: #0d1f2d; --text-mid: #3a5568; --text-light: #6b8fa8;
  --white: #ffffff;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Outfit', sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--sans); color: var(--text-dark); background: var(--white); line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { color: var(--sky-mid); text-decoration: none; }
a:hover { color: var(--gold); }

/* Top bar */
.topbar { background: var(--sky-deep); color: var(--white); padding: 16px 40px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 100; }
.topbar a.brand { font-family: var(--serif); font-size: 22px; color: var(--white); font-weight: 600; letter-spacing: 0.02em; }
.topbar a.brand strong { color: var(--gold); font-weight: 600; }
.topbar-cta { background: var(--gold); color: var(--sky-deep); padding: 10px 22px; border-radius: 100px; font-weight: 600; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; }
.topbar-cta:hover { background: var(--gold-light); color: var(--sky-deep); }

/* Hero */
.pillar-hero { background: linear-gradient(135deg, var(--sky-deep), var(--sky-mid)); color: var(--white); padding: 90px 40px 100px; text-align: center; }
.pillar-hero .eyebrow { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; font-weight: 500; }
.pillar-hero h1 { font-family: var(--serif); font-size: clamp(40px, 5.5vw, 68px); font-weight: 400; line-height: 1.1; max-width: 920px; margin: 0 auto 24px; }
.pillar-hero h1 em { color: rgba(255,255,255,0.75); font-style: italic; }
.pillar-hero .lede { font-size: 18px; font-weight: 300; color: rgba(255,255,255,0.78); max-width: 680px; margin: 0 auto; line-height: 1.55; }
.crumbs { font-size: 12px; color: rgba(255,255,255,0.55); margin-bottom: 24px; letter-spacing: 0.05em; }
.crumbs a { color: rgba(255,255,255,0.7); }
.crumbs a:hover { color: var(--gold); }

/* Body */
.pillar-body { max-width: 800px; margin: 0 auto; padding: 80px 32px 60px; }
.pillar-body h2 { font-family: var(--serif); font-size: clamp(28px, 3.4vw, 40px); font-weight: 400; color: var(--sky-deep); margin: 56px 0 18px; line-height: 1.2; }
.pillar-body h2:first-child { margin-top: 0; }
.pillar-body h3 { font-family: var(--serif); font-size: 22px; font-weight: 500; color: var(--sky-deep); margin: 36px 0 12px; }
.pillar-body p { font-size: 16.5px; color: var(--text-mid); margin-bottom: 16px; line-height: 1.75; font-weight: 300; }
.pillar-body ul, .pillar-body ol { margin: 12px 0 20px 22px; }
.pillar-body li { font-size: 16.5px; color: var(--text-mid); line-height: 1.75; margin-bottom: 8px; font-weight: 300; }
.pillar-body strong { color: var(--text-dark); font-weight: 600; }
.pillar-body a { border-bottom: 1px solid rgba(26,95,138,0.3); }

.callout { background: var(--sky-mist); border-left: 3px solid var(--gold); padding: 22px 26px; margin: 28px 0; border-radius: 0 10px 10px 0; }
.callout p { margin: 0; color: var(--text-dark); font-size: 15.5px; }

/* CTA card */
.pillar-cta { background: linear-gradient(135deg, var(--sky-deep), var(--sky-mid)); color: var(--white); padding: 56px 40px; border-radius: 18px; text-align: center; margin: 60px 0; }
.pillar-cta h3 { font-family: var(--serif); font-size: 32px; font-weight: 400; color: var(--white); margin-bottom: 12px; }
.pillar-cta p { color: rgba(255,255,255,0.75); margin-bottom: 28px; max-width: 540px; margin-left: auto; margin-right: auto; }
.pillar-cta .btn { display: inline-block; background: var(--gold); color: var(--sky-deep); padding: 14px 34px; border-radius: 100px; font-weight: 600; font-size: 14px; letter-spacing: 0.05em; text-transform: uppercase; }
.pillar-cta .btn:hover { background: var(--gold-light); color: var(--sky-deep); }

/* Related links */
.related { background: var(--cloud-white); padding: 60px 32px; }
.related-inner { max-width: 1000px; margin: 0 auto; }
.related h3 { font-family: var(--serif); font-size: 26px; font-weight: 400; color: var(--sky-deep); margin-bottom: 24px; text-align: center; }
.related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.related-card { background: var(--white); padding: 22px 24px; border-radius: 12px; border: 1px solid rgba(11,42,69,0.08); transition: border-color 0.2s, transform 0.2s; }
.related-card:hover { border-color: var(--gold); transform: translateY(-2px); }
.related-card .label { font-size: 11px; color: var(--gold); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; margin-bottom: 8px; }
.related-card h4 { font-family: var(--serif); font-size: 19px; font-weight: 500; color: var(--sky-deep); line-height: 1.25; }

/* Footer */
.foot { background: var(--sky-deep); color: rgba(255,255,255,0.6); padding: 40px; text-align: center; font-size: 13px; }
.foot a { color: var(--gold); }
.foot .nmls { font-size: 11px; color: rgba(255,255,255,0.4); margin-top: 12px; }

@media (max-width: 600px) {
  .topbar { padding: 12px 20px; }
  .topbar a.brand { font-size: 17px; }
  .topbar-cta { padding: 8px 14px; font-size: 11px; }
  .pillar-hero { padding: 60px 24px 70px; }
  .pillar-body { padding: 50px 22px; }
  .pillar-cta { padding: 40px 24px; }
}