/* ────────────────────────────────────────────────────────────────
   0 · ELEGANT PALETTE + TYPOGRAPHY
   ──────────────────────────────────────────────────────────────── */
   @import url("https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@300;400;600&family=Lora:wght@600&display=swap");

   :root {
     /* colours */
     --c-primary:        #243B55;       /* deep navy */
     --c-primary-dark:   #1B2D41;
     --c-secondary:      #D0B375;       /* muted champagne */
     --c-secondary-dark: #B59760;
     --c-accent:         #439DAB;       /* optional teal */
   
     /* feed Bootstrap */
     --bs-primary:       var(--c-primary);
     --bs-primary-rgb:   36, 59, 85;
     --bs-secondary:     var(--c-secondary);
     --bs-secondary-rgb: 208, 179, 117;
   
     /* rhythm */
     --space-1: .5rem;
     --space-2: 1rem;
     --space-3: 1.5rem;
     --space-4: 3rem;
   }
   
   /* body & headings ------------------------------------------------*/
   body{
     font-family:"Libre Franklin","Segoe UI",Roboto,system-ui,sans-serif;
     font-weight:300;
     letter-spacing:.015em;
     color:#2d2d2d;
   }
   
   h1,h2,h3,h4,h5,h6{
     font-family:"Lora",Georgia,serif;
     font-weight:600;
   }
   
   /* ────────────────────────────────────────────────────────────────
      1 · GLOBAL RHYTHM (unchanged)
      ──────────────────────────────────────────────────────────────── */
   section   { padding: var(--space-4) 0; }
   section h2{ margin-bottom: var(--space-3); }
   
   .lead { font-size: 1.15rem; line-height: 1.55; }
   
   /* ────────────────────────────────────────────────────────────────
      2 · NAVBAR POLISH
      ──────────────────────────────────────────────────────────────── */
   .navbar-brand   { font-weight:600; letter-spacing:.02em; }
   .nav-link       { font-weight:500; padding:var(--space-2); }
   .nav-link:hover { color:var(--bs-secondary); }
   
   /* ────────────────────────────────────────────────────────────────
      3 · CARD FINESSE
      ──────────────────────────────────────────────────────────────── */
   .card,.featured-card{
     border:none; border-radius:.7rem;
     box-shadow:0 8px 24px rgba(0,0,0,.05);
     transition:transform .25s, box-shadow .25s;
   }
   .card:hover,.featured-card:hover{
     transform:translateY(-6px);
     box-shadow:0 12px 32px rgba(0,0,0,.08);
   }
   
   /* ────────────────────────────────────────────────────────────────
      4 · FOOTER TONE-DOWN
      ──────────────────────────────────────────────────────────────── */
   .site-footer{
     background:var(--bs-primary);
     color:var(--bs-secondary);
     text-align:center;
     padding:1.5rem 0;
     border-top:2px solid var(--bs-secondary);
     font-size:.95rem; line-height:1.4;
   }
   .site-footer a{color:var(--bs-secondary);text-decoration:none;}
   .site-footer a:hover{color:#fff;}
   .footer-nav a{margin:0 .5rem;}
   
   /* ────────────────────────────────────────────────────────────────
      5 · HERO  (video + overlay)
      ──────────────────────────────────────────────────────────────── */
   .hero{
     position:relative;width:100%;height:70vh;
     display:flex;align-items:center;justify-content:center;
     overflow:hidden;
   }
   .hero-video{
     position:absolute;top:50%;left:50%;
     transform:translate(-50%,-50%);
     min-width:100%;min-height:100%;object-fit:cover;
   }
   .hero-overlay{position:absolute;inset:0;background:rgba(0,0,0,.5);}
   .hero-content{
     position:relative;z-index:1;max-width:720px;text-align:center;
     padding:1.5rem;background:rgba(255,255,255,.85);
     border-radius:.5rem;box-shadow:0 4px 12px rgba(0,0,0,.12);
   }
   .hero-content h1{color:var(--bs-primary);font-size:2.25rem;}
   .hero-content p {color:#444;margin-bottom:1.25rem;}
   
   /* ────────────────────────────────────────────────────────────────
      6 · SECTION HEADINGS
      ──────────────────────────────────────────────────────────────── */
   .section-heading,
   #services h2,#featured-articles h2,
   #get-started h2,#free-consultation h2{
     text-align:center;font-size:2.25rem;
     color:var(--bs-primary);
     margin:2rem 0 1.25rem;
   }
   
   /* ────────────────────────────────────────────────────────────────
      7 · GRID-AUTO helper
      ──────────────────────────────────────────────────────────────── */
   .grid-auto{
     display:grid;
     gap:1.25rem;
     grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
   }
   
   /* ────────────────────────────────────────────────────────────────
      8 · BUTTON ALIASES (Tailwind @apply removed for portability)
      ──────────────────────────────────────────────────────────────── */
   .btn-contact,
   .btn-calendly{
     display:inline-block;padding:.75rem 1.5rem;
     font-weight:700;border:2px solid var(--bs-secondary);
     color:var(--bs-primary);background:transparent;
     border-radius:.25rem;transition:.2s;
   }
   .btn-contact:hover,
   .btn-calendly:hover{
     background:var(--bs-secondary);color:var(--bs-primary);
   }
   .btn-intake{
     display:inline-block;padding:.75rem 1.5rem;
     font-weight:700;border:2px solid var(--bs-primary);
     background:var(--bs-primary);color:var(--bs-secondary);
     border-radius:.25rem;transition:.2s;
   }
   .btn-intake:hover{
     background:var(--c-primary-dark);color:#fff;
   }
   
   /* ────────────────────────────────────────────────────────────────
      9 · SMALL UTILITIES
      ──────────────────────────────────────────────────────────────── */
   .text-primary   { color:var(--bs-primary)!important; }
   .text-secondary { color:var(--bs-secondary)!important; }
   .bg-accent      { background:var(--c-accent)!important; }
   .rounded-md     { border-radius:.5rem!important; }
   
   /* ────────────────────────────────────────────────────────────────
   BUTTON PALETTE — matches new navy / champagne scheme
   ──────────────────────────────────────────────────────────────── */

/* PRIMARY  ▸ deep navy ------------------------------------------------ */
.btn-primary,
.btn-primary:disabled {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: #fff;
}
.btn-primary:hover,
.btn-primary:focus {
  background: var(--c-primary-dark);
  border-color: var(--c-primary-dark);
  color: #fff;
}

/* SECONDARY  ▸ filled champagne -------------------------------------- */
.btn-secondary,
.btn-secondary:disabled {
  background: var(--c-secondary);
  border-color: var(--c-secondary);
  color: var(--c-primary);
}
.btn-secondary:hover,
.btn-secondary:focus {
  background: var(--c-secondary-dark);
  border-color: var(--c-secondary-dark);
  color: var(--c-primary);
}

/* OUTLINE PRIMARY ▸ navy border / text -------------------------------- */
.btn-outline-primary,
.btn-outline-primary:disabled {
  background: transparent;
  border-color: var(--c-primary);
  color: var(--c-primary);
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: #fff;
}

/* OUTLINE SECONDARY ▸ champagne border / text ------------------------ */
.btn-outline-secondary,
.btn-outline-secondary:disabled {
  background: transparent;
  border-color: var(--c-secondary);
  color: var(--c-secondary);
}
.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
  background: var(--c-secondary);
  border-color: var(--c-secondary);
  color: var(--c-primary);
}

/* ALIASES (btn-contact / btn-intake / btn-calendly) ------------------- */
/* They now wrap the primary/secondary classes so colours stay synced.  */
.btn-contact,
.btn-calendly   { @apply btn btn-outline-secondary fw-bold; }
.btn-intake     { @apply btn btn-primary fw-bold; }

/* Fallback if Tailwind `@apply` isn't available:                       */
.btn-contact,
.btn-calendly {
  display:inline-block; padding:.75rem 1.5rem; font-weight:600;
  border:2px solid var(--c-secondary); color:var(--c-secondary);
  background:transparent; border-radius:.3rem; transition:.2s;
}
.btn-contact:hover,
.btn-calendly:hover {
  background:var(--c-secondary); color:var(--c-primary);
}
.btn-intake {
  display:inline-block; padding:.75rem 1.5rem; font-weight:600;
  border:2px solid var(--c-primary); background:var(--c-primary);
  color:#fff; border-radius:.3rem; transition:.2s;
}
.btn-intake:hover { background:var(--c-primary-dark); }