/* Global theme + PHONE NUMBER VARIABLES */
:root {
  /* Restored palette from your screenshot */
  --bg: #f3e1eb;        /* light pink background */
  --bg-2: #d9b6c9;      /* subtle gradient end */
  --card: #ffffff;      /* cards/sections */
  --text: #2c1d24;      /* dark plum for headings/text */
  --muted: #ae9da3;     /* secondary text */
  --brand: #966583;     /* brand link/primary */
  --brand-2: #895a75;   /* secondary accent for buttons */
  --brand-dark: #795269;/* pill/strong accents */
  --border: #e9ccd9;    /* soft dividers */

  /* Phone (already set to your number) */
  --phone-display: "(407) 284-9530";
  --phone-e164: "+14072849530";
}

* { box-sizing: border-box; }
html, body { margin:0; padding:0; background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%); color:var(--text); font-family: system-ui,-apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial; line-height:1.6; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

.container { width: min(1100px, 92%); margin: 0 auto; }

/* Header */
.site-header { border-bottom: 1px solid var(--border); position: sticky; top:0; backdrop-filter: blur(8px); background: rgba(255,255,255,0.5); z-index: 50; }
.site-header .wrap { display:flex; align-items:center; justify-content:space-between; padding: 0.9rem 0; }
.logo { font-weight:700; letter-spacing:.3px; color:var(--text); }
.nav { display:flex; gap:1rem; align-items:center; }
.nav a.button { color:#0b0f14; background: linear-gradient(135deg, var(--brand), var(--brand-2)); padding:.55rem .95rem; border-radius: 999px; font-weight:600; }
.nav a.cta-link { color: var(--brand-2); }

.menu-btn { display:none; background:transparent; border:1px solid var(--border); color:var(--text); border-radius:10px; padding:.5rem .7rem; }
.menu-icon { width:22px; height:2px; background:var(--text); display:block; position:relative; }
.menu-icon::before, .menu-icon::after { content:""; position:absolute; left:0; right:0; height:2px; background:var(--text); }
.menu-icon::before { top:-6px; } .menu-icon::after { top:6px; }

@media (max-width: 820px) {
  .menu-btn { display:block; }
  .nav { position: absolute; left:0; right:0; top:58px; background: rgba(255,255,255,0.98); border-bottom:1px solid var(--border); display:none; flex-direction:column; padding: .75rem 1rem; }
  .nav.open { display:flex; }
}

/* Hero */
.hero { padding: 3.5rem 0 2.5rem; display:grid; gap:1.2rem; }
.hero h1 { font-size: clamp(1.8rem, 3.6vw, 3rem); margin: 0; }
.hero p.lead { color: var(--muted); margin: 0; }
.hero .cta { color: var(--brand); text-decoration: none; }

/* Sections & cards */
.section { padding: 2rem 0; }
.card { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 1rem; }
.grid-3 { display:grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 900px) { .grid-3 { grid-template-columns: 1fr; } }

/* Blog */
.blog-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 900px) { .blog-grid { grid-template-columns: 1fr; } }
.blog-card { position: relative; background: var(--card); border:1px solid var(--border); border-radius: 16px; overflow:hidden; display:grid; grid-template-rows: auto 1fr auto; }
.blog-card__image img { width:100%; height:auto; display:block; }
.blog-card__content { padding: 1rem; }
.blog-card__content h2 { margin: .25rem 0 .35rem; font-size: 1.2rem; }
.blog-card__meta { color: var(--brand); text-decoration: none; }
.button--text { text-decoration: underline; }

/* Article */
.article { max-width: 860px; padding: 1.6rem 1rem 3rem; }
.article-hero img { width:100%; height:auto; border-radius: 14px; display:block; }
.article h1 { margin-top: .6rem; font-size: clamp(1.6rem, 3vw, 2.4rem); }
.article .article-cta { color: var(--brand); text-decoration: none; }
.article .button { color:#0b0f14; background: linear-gradient(135deg, var(--brand), var(--brand-2)); padding:.6rem 1rem; border-radius: 999px; font-weight:600; }

/* Footer */
.site-footer { border-top: 1px solid var(--border); padding: 1.2rem 0 2rem; color: var(--muted); }
.footer-nav { display:flex; gap: .8rem; flex-wrap:wrap; }
.footer-nav a { color: var(--brand); text-decoration: none; }

a:visited { color: var(--brand); }

.nav a.cta-link {
  background: var(--brand-dark);
  color: #fff;
  padding: .45rem .9rem;
  border-radius: 999px;
  font-weight: 700;
  border: none;
}
.nav a.cta-link:hover { opacity: .92; text-decoration: none; }