/* =========================
   Reset & Base
   ========================= */
   * { margin: 0; padding: 0; box-sizing: border-box; }

   html, body { height: 100%; }
   
   body {
     min-height: 100vh;
     display: flex;
     flex-direction: column;
     font-family: 'Open Sans', sans-serif;
     font-size: 16px;
     line-height: 1.6;
     color: #333;
     background-color: #fff;
   }
   
   .container {
     max-width: 1200px;
     margin: 0 auto;
     padding: 0 20px;
   }
   
   /* =========================
      Design Tokens (Global)
      ========================= */
      :root{
        --gradient-purple: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        
        /* layout */
        --header-h: 80px;
        --hero-min: 340px;
        --hero-pad: 36px;
      
        /* universal type scale */
        --fs-h1: clamp(34px, 4.8vw, 48px);
        --fs-h2: clamp(22px, 3.2vw, 32px);
        --fs-h3: 24px;
        --fs-lead: clamp(18px, 2.2vw, 22px);
        --fs-lead-lg: clamp(22px, 2.8vw, 32px);
      
        /* brand */
        --brand: #6a3f98;
        --brand-dark: #5a347f;
        --indigo: #667eea;
        --green: #357836;
        --lemon: #f6da71;
        --blue: #a4c3e9;
      
        /* costs page */
        --costs-color: #d9a19c;      /* base pink */
        --costs-color-dark: #c2857f; /* hover/darker pink */
      }
   
   /* =========================
      Typography (Universal)
      ========================= */
   h1, h2, h3, h4, h5, h6 {
     font-weight: 600;
     line-height: 1.2;
     margin-bottom: 1rem;
   }
   h1 { font-size: var(--fs-h1); }
   h2 { font-size: var(--fs-h2); }
   h3 { font-size: var(--fs-h3); }
   
   p { margin-bottom: 1rem; }
   
   a {
     color: var(--brand);
     text-decoration: none;
     transition: color .3s ease;
   }
   a:hover { color: var(--brand); }
   
   /* lead text helpers (used in page heroes) */
   .page-hero .lead {
     font-size: var(--fs-lead);
     line-height: 1.45;
   }
   .page-hero .lead-lg {
     font-size: var(--fs-lead-lg);
     line-height: 1.35;
     font-weight: 600;
   }
   
   /* =========================
      Sticky Footer Layout
      ========================= */
   .site-main { flex: 1 0 auto; }
   .site-footer { margin-top: auto; }
   
   /* =========================
      Header / Navigation
      ========================= */
   .site-header {
     background-color: #fff;
     box-shadow: 0 2px 10px rgba(102,126,234,0.1);
     position: fixed; top: 0; left: 0; right: 0;
     z-index: 1000;
     border-bottom: 1px solid rgba(102,126,234,0.1);
     min-height: var(--header-h);
   }
   
   .main-navigation .container { height: 100%; }
   
   .nav-wrapper {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 1rem 0;
   }
   
   .logo a {
     font-size: 24px;
     font-weight: 700;
     color: #333;
   }
   
   /* primary menu */
   .nav-menu {
     display: flex;
     list-style: none;
     gap: 2rem;
   }
   .nav-menu a {
     color: #333;
     font-weight: 500;
     transition: color .3s ease;
   }
   .nav-menu a:hover { color: var(--brand); }
   
   /* dropdowns */
   .nav-menu li { position: relative; }
   .has-dropdown > a::after {
     content: '▾'; margin-left: 5px; font-size: 12px;
   }
   .dropdown-menu {
     position: absolute; top: 100%; left: 0;
     background-color: #fff;
     min-width: 200px;
     box-shadow: 0 4px 10px rgba(0,0,0,0.1);
     border-radius: 4px;
     opacity: 0; visibility: hidden; transform: translateY(-10px);
     transition: all .3s ease;
     z-index: 1000;
     list-style: none;
     padding: .5rem 0;
   }
   .has-dropdown:hover .dropdown-menu {
     opacity: 1; visibility: visible; transform: translateY(0);
   }
   .dropdown-menu a {
     display: block; padding: .5rem 1.5rem; color: #333; font-size: 14px;
   }
   .dropdown-menu a:hover { background-color: #f8f9fa; color: var(--indigo); }
   
   /* mobile toggle */
   .mobile-menu-toggle { display: none; flex-direction: column; cursor: pointer; }
   .mobile-menu-toggle span {
     width: 25px; height: 3px; background-color: #333; margin: 3px 0; transition: .3s;
   }
   
   /* =========================
      Hero Bands (Top-of-page)
      ========================= */
   /* HOME hero (uses .hero-section) */
   .hero-section{
     margin-top: 0;
     padding: calc(var(--header-h) + 36px) 0 80px;
     position: relative; overflow: hidden;
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   }
   .hero-section::before{ content:none; } /* disable overlay */
   .hero-grid{
     display: grid;
     grid-template-columns: 1.2fr 1fr 0.9fr; /* text | photo | creds */
     gap: 2rem; align-items: start;
   }
   .hero-content h1 { margin-bottom: .25rem; }
   .hero-content h2 { font-weight: 600; opacity:.95; margin-bottom: .75rem; }
   .hero-description { margin-bottom: 1rem; max-width: 56ch; }
   .hero-image img{
     width: 100%; height: auto; display: block; border-radius: 12px; object-fit: cover;
     box-shadow: 0 10px 24px rgba(0,0,0,0.18);
   }
   /* creds stack */
   .hero-creds { align-self: start; text-align: center; }
   .hero-creds h3{ margin-bottom: 1rem; font-size: 1.25rem; font-weight: 700; color:#fff; }
   .creds-stack{ list-style:none; display:grid; gap:.9rem; justify-items:center; }
   .cred-item{
     display:grid; grid-template-columns:44px 1fr; gap:.75rem; align-items:center;
     background: rgba(255,255,255,0.08);
     border: 1px solid rgba(255,255,255,0.18);
     border-radius:12px; padding:.6rem .75rem; backdrop-filter: blur(2px);
     width:100%; max-width:280px;
   }
   .cred-item img{
     width:44px; height:44px; object-fit:contain; border-radius:50%;
     background: rgba(255,255,255,0.85);
   }
   .cred-title{ display:block; font-weight:700; font-size:.95rem; color:#fff; }
   .cred-sub{ display:block; font-size:.82rem; color:#eaeaea; opacity:.9; }
   
   /* Make home hero text light */
   body.index .hero-section,
   body.index .hero-section h1,
   body.index .hero-section h2,
   body.index .hero-section p { color: #f7f9ff; }
   
   /* INNER page hero (uses .page-hero) */
   .page-hero{
     margin-top: 0;
     display: flex; align-items: center; justify-content: center;
     min-height: var(--hero-min);
     padding: calc(var(--header-h) + var(--hero-pad)) 0 var(--hero-pad);
     text-align: center;
     position: relative; overflow: hidden;
   }
   
   /* Per-page colors (sizes are universal, only color/shadow differs) */
   body.coaching .page-hero{
     background-color: var(--lemon);
   }
   body.coaching .page-hero h1,
   body.coaching .page-hero .lead {
     color:#fff;
     text-shadow: 1px 1px 3px rgba(0,0,0,0.25); /* optional for readability */
   }
   
   body.meet-ellen .page-hero{
     background-color: var(--green);
   }
   body.meet-ellen .page-hero h1,
   body.meet-ellen .page-hero .lead {
     color:#fff; text-shadow: 1px 1px 3px rgba(0,0,0,0.25);
   }
   
   body.costs .page-hero{
     background-color: var(--blue);
   }
   body.costs .page-hero h1,
   body.costs .page-hero .lead {
     color:#fff;
     text-shadow: 1px 1px 3px rgba(0,0,0,0.25); /* optional for contrast */
   }
   
   body.contact .page-hero {
    background-color: #2ec9c8; /* teal to match button */
  }
  body.contact .page-hero h1,
  body.contact .page-hero .lead {
    color:#fff;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.25);
  }
   
   /* =========================
      Sections & Utilities
      ========================= */
   section { padding: 60px 0; }
   
   .section-title {
     text-align: center;
     margin-bottom: 3rem;
     color: #333;
   }
   
   /* smooth anchor offset for fixed header */
   h2[id], h3[id] { scroll-margin-top: calc(var(--header-h) + 10px); }
   
   /* =========================
      Buttons
      ========================= */
   .btn{
     display:inline-block;
     padding: 12px 30px;
     font-weight: 600;
     border-radius: 5px;
     transition: all .3s ease;
   }
   .btn-primary{
     background-color: var(--brand);
     color:#fff;
     border:none;
     box-shadow: 0 4px 15px rgba(0,0,0,0.2);
   }
   body.index .btn-primary {
    background: var(--gradient-purple);
  }
   .btn-primary:hover{
     background-color: var(--brand-dark);
     color:#fff;
     transform: translateY(-2px);
     box-shadow: 0 6px 20px rgba(0,0,0,0.3);
   }
   .btn-secondary{
     background-color: transparent;
     color:#fff;
     border: 2px solid #fff;
   }
   .btn-secondary:hover{
     background-color:#fff; color: var(--indigo);
     box-shadow: 0 4px 15px rgba(0,0,0,0.2);
   }
   
   /* page-specific CTAs that only change color, not size */
   body.coaching .cta-section .btn,
   body.coaching .cta-section .btn.btn-primary{
     background-color: var(--lemon); color:#000; border:none;
     box-shadow: 0 4px 15px rgba(0,0,0,0.18);
   }
   body.coaching .cta-section .btn:hover{
     background-color:#2d662d; color:#fff;
     transform: translateY(-2px);
     box-shadow: 0 8px 22px rgba(0,0,0,0.22);
   }
   
   body.meet-ellen .btn-green{
     background-color: var(--green); color:#fff; border:none;
     box-shadow: 0 4px 15px rgba(0,0,0,0.18);
   }
   body.meet-ellen .btn-green:hover{
     background-color:#2d662d; color:#fff;
     transform: translateY(-2px);
     box-shadow: 0 8px 22px rgba(0,0,0,0.22);
   }
   
   /* =========================
      About / Content Blocks
      ========================= */
   .about-section { background-color: #f8f9fa; }
   
   .about-content { max-width: 800px; margin: 0 auto; }
   .about-text p { font-size: 17px; color:#555; margin-bottom: 1.5rem; }
   
   .content-section{ position: relative; padding: 60px 0; }
   .content-wrapper{ max-width: 900px; margin: 0 auto; position: relative; z-index: 1; }
   .content-wrapper h2{ color:#333; margin-top: 2rem; margin-bottom: 1rem; }
   .content-wrapper h3{ color:#444; margin-top: 1.5rem; margin-bottom: .75rem; }
   .content-wrapper ul{ margin-left: 2rem; margin-bottom: 1.5rem; }
   .content-wrapper li{ margin-bottom: .5rem; }
   
   /* Meet Ellen banded headings */
   body.meet-ellen .heading-green{
     display:block; background-color: var(--green); color:#fff;
     padding: .5rem .75rem; border-radius: 8px;
     margin: 1.25rem 0 .75rem;
     box-shadow: 0 2px 8px rgba(0,0,0,0.08);
   }
   
   /* Coaching banded headings */
   body.coaching .content-wrapper > h2,
   body.coaching .content-wrapper > h3,
   body.coaching .content-wrapper .heading-yellow{
     display:block; background-color: var(--lemon); color:#222;
     padding: .55rem .85rem; border-radius: 8px;
     margin: 1.25rem 0 .75rem;
     box-shadow: 0 2px 8px rgba(0,0,0,0.08);
   }
   body.coaching .content-wrapper h2 + ul,
   body.coaching .content-wrapper h3 + ul{ margin-top: .5rem; }
   body.coaching .content-wrapper > h2{ margin-top: 2rem; }


   /*MEET ELLEN*/
   /* Meet Ellen page – make links green */
body.meet-ellen a {
  color: var(--green);
  font-weight: 600;  /* optional: to match button boldness */
  text-decoration: none;
}

body.meet-ellen a:hover {
  color: #2d662d; /* a darker green for hover */
  text-decoration: underline;
}




   /* --- Meet Ellen: layout + center the portrait --- */
.meet-ellen .about-wrapper {
  display: grid;
  grid-template-columns: 320px 1fr;  /* photo | text */
  gap: 2rem;
  align-items: start;
}

.meet-ellen .about-image {
  display: flex;            /* centers the image horizontally */
  justify-content: center;
}

.meet-ellen .about-image img {
  width: 100%;
  max-width: 360px;         /* adjust to taste */
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,.1);
}

@media (max-width: 768px) {
  .meet-ellen .about-wrapper {
    grid-template-columns: 1fr;  /* stack on mobile */
  }
}
   
   /* =========================
      Services (Home)
      ========================= */
   .services-section {
     background: linear-gradient(180deg, #fff 0%, #f8f9fa 100%);
     position: relative;
   }
   body.index .services-section .services-grid{
     display:grid; grid-template-columns: repeat(3, 1fr); gap:2rem;
   }
   @media (max-width: 900px){ body.index .services-section .services-grid{ grid-template-columns: repeat(2, 1fr); } }
   @media (max-width: 600px){ body.index .services-section .services-grid{ grid-template-columns: 1fr; } }
   @media (min-width: 1200px){ body.index .services-section .services-grid{ padding: 0 2rem; } }
   
   .service-card{
    background: var(--gradient-purple); padding:2rem; border-radius:12px; text-align:center;
    color:#fff;
    border: none;
    box-shadow: 0 8px 24px rgba(0,0,0,0.16);
     transition: transform .3s ease, box-shadow .3s ease;
     position: relative; overflow:hidden; min-height:250px;
     display:flex; flex-direction:column; justify-content:center;
     box-shadow: 0 5px 15px rgba(0,0,0,0.08);
     border: 1px solid rgba(102,126,234,0.1);
   }
   .service-card::before{
    content:none;
  }
   .service-card > * { position: relative; z-index: 2; }
   .service-card:hover{
    transform: translateY(-6px); box-shadow: 0 10px 28px rgba(0,0,0,0.22);
  }
   .service-card h3{ color:#fff; margin-bottom:1rem; font-size:22px; }
.service-card p{ color:rgba(255,255,255,0.92); }
   
  /* background images per card (disabled for gradient style) */
/*
.service-card:nth-child(1){ background:url('...') center/cover; }
.service-card:nth-child(2){ background:url('...') center/cover; }
.service-card:nth-child(3){ background:url('...') center/cover; }
.service-card:nth-child(4){ background:url('...') center/cover; }
.service-card:nth-child(5){ background:url('...') center/cover; }
.service-card:nth-child(6){ background:url('...') center/cover; }
*/
   /* =========================
      Testimonials (Home)
      ========================= */
   .testimonials-section{
     position: relative; color:#fff; padding:60px 0; overflow:hidden;
   }
   .testimonials-section::before{
    content:''; position:absolute; inset:0;
    background: var(--gradient-purple);
    z-index:0;
  }
   .testimonials-section > * { position:relative; z-index:1; }
   .testimonials-section .section-title{
    color:#fff;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.25); /* optional for contrast */
  }
   .testimonials-stack{ display:flex; flex-direction:column; gap:22px; }
   .testimonial-row{
     display:flex; gap:24px; background:#fff; border-radius:14px; padding:22px 24px;
     box-shadow: 0 8px 24px rgba(0,0,0,0.08); align-items:flex-start;
   }
   .t-side{ flex:0 0 260px; max-width:260px; }
   .t-name{ font-style:normal; font-weight:700; color:#3b5bbb; line-height:1.35; display:block; }
   .t-title{ display:block; font-weight:600; color:#5b6a7a; opacity:.95; margin-top:2px; font-size:.95rem; }
   .t-quote{
     margin:0; font-size:1.05rem; line-height:1.75; color:#2a2f36; flex:1 1 auto; position:relative; padding-left:34px;
   }
   .t-quote::before{
     content:"“"; position:absolute; left:0; top:-8px; font-size:44px; line-height:1; opacity:.18;
   }
   .t-quote::after{
     content:"”"; position:absolute; right:-10px; bottom:-12px; font-size:44px; line-height:1; opacity:.18;
   }
   @media (max-width: 860px){
     .testimonial-row{ flex-direction:column; }
     .t-side{ flex:0 0 auto; max-width:none; }
     .t-quote{ padding-left:0; }
     .t-quote::before{ display:none; }
   }
   
/* =========================
   Contact Page / Form
   ========================= */
   .contact-section {
    text-align: center;
    background: #f8f9fa;
    position: relative;
  }
  .contact-content { position: relative; z-index: 1; }
  .contact-content p { font-size: 18px; color: #555; margin-bottom: 1rem; }
  .contact-info { margin: 2rem 0; }
  .contact-info p { font-size: 17px; color: #333; margin-bottom: .5rem; }
  
  .contact-form-wrapper {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 3rem;
    position: relative;
    z-index: 1;
  }
  .contact-intro {
    grid-column: 1 / -1;
    text-align: center;
    margin-bottom: 2rem;
  }
  .contact-intro p { font-size: 20px; line-height: 1.6; }
  
  .contact-form {
    background: #fff;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
  }
  .form-group { display: flex; flex-direction: column; }
  .form-group.full-width { grid-column: 1 / -1; }
  .form-group label { font-weight: 600; margin-bottom: .5rem; color: #333; }
  .form-group input,
  .form-group select,
  .form-group textarea {
    padding: .75rem;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 16px;
    transition: border-color .3s ease;
    font-family: 'Open Sans', sans-serif;
  }
  .form-group input:focus,
  .form-group select:focus,
  .form-group textarea:focus {
    outline: none;
    border-color: var(--indigo);
    box-shadow: 0 0 0 3px rgba(102,126,234,0.1);
  }
  .form-group input.error,
  .form-group select.error,
  .form-group textarea.error {
    border-color: #e74c3c;
  }
  
  .form-message {
    grid-column: 1 / -1;
    display: none;
    padding: 1rem;
    border-radius: 6px;
    margin-bottom: 1rem;
  }
  .success-message { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
  .error-message   { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
  .info-message    { background: #d1ecf1; color: #0c5460; border: 1px solid #bee5eb; }
  
  /* Submit button */
  .contact-form .btn {
    grid-column: 1 / -1;
    justify-self: center;
    margin-top: 1rem;
  }
  .contact-form .btn.btn-primary {
    background-color: #2ec9c8;   /* turquoise */
    color: #fff;                 /* white text */
    border: none;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    transition: all .3s ease;
  }
  .contact-form .btn.btn-primary:hover {
    background-color: #27b3b2;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.28);
  }
  
  /* Sidebar: turquoise box with white font */
  body.contact .contact-info-sidebar {
    background: #2ec9c8;
    color: #fff;
    padding: 2rem;
    border-radius: 12px;
    height: fit-content;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
  }
  body.contact .contact-info-sidebar h3,
  body.contact .contact-info-sidebar p,
  body.contact .contact-info-sidebar li {
    color: #fff;
  }
  body.contact .contact-info-sidebar a {
    color: #fff;
    font-weight: 600;
    text-decoration: underline;
  }
  body.contact .contact-info-sidebar a:hover {
    text-decoration: none;
    opacity: .9;
  }
  /* =========================
   Costs Page
   ========================= */
body.costs { display:flex; flex-direction:column; }
body.costs .site-main{ flex:1 0 auto; }
body.costs .site-footer{ flex-shrink:0; }

/* Hero */
body.costs .page-hero{
  background-color: var(--costs-color);
}
body.costs .page-hero h1,
body.costs .page-hero .lead {
  color:#fff;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.25); /* for readability */
}

/* Content wrapper */
body.costs .content-section{ background:#fff; padding:60px 0; position:relative; z-index:1; }
body.costs .content-section .container{ max-width:960px; }

/* Pricing grid/cards */
body.costs .pricing-grid{
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:1.25rem; align-items:stretch; margin:1.25rem 0 2rem;
}
@media (max-width:760px){ body.costs .pricing-grid{ grid-template-columns:1fr; } }

body.costs .pricing-card{
  background:#fff; border:1px solid rgba(0,0,0,0.08); border-radius:16px; padding:1.25rem;
  box-shadow: 0 8px 24px rgba(0,0,0,0.06); position:relative;
}
body.costs .pricing-card .pricing-header{
  display:flex; align-items:baseline; justify-content:space-between; gap:.75rem;
}
body.costs .pricing-card h3{ margin:0; font-size:1.25rem; }
body.costs .pricing-card .price{ font-size:2rem; font-weight:700; line-height:1; }
body.costs .pricing-card .pricing-note{ margin:.5rem 0 1rem; opacity:.85; }

/* Pricing buttons – PINK */
body.costs .pricing-card .btn{
  background-color: var(--costs-color);
  color:#fff;
  border:none;
  box-shadow:0 4px 15px rgba(0,0,0,0.15);
}
body.costs .pricing-card .btn:hover{
  background-color: var(--costs-color-dark);
  color:#fff;
  transform: translateY(-2px);
  box-shadow:0 8px 22px rgba(0,0,0,0.18);
}
body.costs .pricing-card.featured{ box-shadow:0 10px 28px rgba(0,0,0,0.1); transform: translateY(-2px); }

/* Included/checklist */
body.costs .included{
  background:#fff; border:1px solid rgba(0,0,0,0.06); border-radius:14px;
  padding:1rem 1.25rem; margin:1rem 0 2rem;
}
body.costs .checklist{ list-style:none; padding-left:0; margin:0; }
body.costs .checklist li{
  position:relative; padding-left:1.75rem; margin:.6rem 0;
}
body.costs .checklist li::before{
  content:"✓"; position:absolute; left:0; top:.1rem; font-weight:700;
  color: var(--costs-color-dark);  /* darker pink for contrast */
}

/* How it works */
body.costs .how-it-works{
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:1rem; margin:0 0 2rem;
}
@media (max-width:760px){ body.costs .how-it-works{ grid-template-columns:1fr; } }
body.costs .how-it-works .step{
  background:#fff; border:1px solid rgba(0,0,0,0.06); border-radius:14px; padding:1rem; text-align:center;
  box-shadow: 0 6px 20px rgba(0,0,0,0.05);
}
body.costs .how-it-works h4{ margin:0 0 .25rem; font-size:1rem; }

/* Step numbers – keep structure, just recolor */
body.costs .step .step-num{
  width:40px; height:40px; margin:0 auto .5rem; border-radius:999px;
  display:grid; place-items:center; font-weight:700;
  background: var(--costs-color);    /* pink */
  color:#fff;                        /* white number */
  border:none; box-shadow:0 2px 8px rgba(0,0,0,0.12);
}

/* Big CTA button – pink */
body.costs .btn-lg{
  padding:.9rem 1.25rem; font-size:1.05rem; border-radius:999px;
  background-color: var(--costs-color);
  color:#fff; border:none; box-shadow:0 4px 15px rgba(0,0,0,0.15);
}
body.costs .btn-lg:hover{
  background-color: var(--costs-color-dark);
  color:#fff; transform: translateY(-2px); box-shadow:0 8px 22px rgba(0,0,0,0.18);
}
   
   /* =========================
      Footer
      ========================= */
   .site-footer{
     background-color:#333; color:#fff; padding:2rem 0; text-align:center;
   }
   .site-footer p{ margin:0; }
   
   /* =========================
   Responsive
   ========================= */

/* ===== Tablet (≤1024px): 2-col with creds below image ===== */
@media (max-width: 1024px){
  .hero-grid{
    grid-template-columns: 1fr .9fr;
    grid-template-areas:
      "content image"
      "creds   creds";
    gap: 1.5rem;
    align-items: center;
  }
  .hero-content { grid-area: content; }
  .hero-image   { grid-area: image; }
  .hero-creds   { grid-area: creds; }
  .hero-buttons { justify-content: flex-start; }
}

/* ===== Phones / Small tablets (≤968px): clean stacked order ===== */
@media (max-width: 968px){
  .hero-grid{
    display: grid;
    grid-template-areas:
      "content"
      "image"
      "creds";
    grid-template-columns: 1fr;
    gap: 18px;
  }

  /* Map to areas + centering */
  .hero-content { grid-area: content; }
  .hero-image   { grid-area: image; justify-self: center; }
  .hero-creds   { grid-area: creds; text-align: left; }

  /* Type scales for nicer wraps */
  .hero-section .hero-content h1 { font-size: clamp(28px, 7vw, 42px); line-height: 1.1; }
  .hero-section .hero-content h2 { font-size: clamp(18px, 5.2vw, 26px); line-height: 1.25; }

  /* Copy, CTA, image, creds sizing */
  .hero-description { max-width: 68ch; }
  .hero-buttons { margin-top: 10px; display: flex; justify-content: center; }
  .hero-buttons .btn { max-width: 100%; text-align: center; }

  .hero-image img{
    width: min(92vw, 420px);
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 10px 24px rgba(0,0,0,0.18);
  }

  .creds-stack{ justify-items: stretch; }
  .cred-item{ max-width: 560px; width: 100%; }

  /* Prevent horizontal scroll on small screens */
  html, body { overflow-x: hidden; }
}

/* ===== Nav & form tweaks (≤768px): keep your existing behavior ===== */
@media (max-width: 768px){
  .mobile-menu-toggle{ display:flex; }

  .nav-menu{
    display:none; position:absolute; top:100%; left:0; right:0;
    background:#fff; flex-direction:column; padding:1rem; box-shadow:0 5px 10px rgba(0,0,0,0.1);
  }
  .nav-menu.active{ display:flex; }
  .dropdown-menu{
    position: static; opacity:1; visibility:visible; transform:none; box-shadow:none;
    background:#f8f9fa; display:none; margin-left:1rem;
  }
  .dropdown-menu.show{ display:block; }
  .has-dropdown > a::after{ float:right; }

  .hero-section{ padding: calc(var(--header-h) + 24px) 0 60px; }

  .contact-form-wrapper{ grid-template-columns:1fr; }
  .contact-form{ grid-template-columns:1fr; }
  .contact-info-sidebar{ margin-top:2rem; }
  .content-wrapper{ padding: 0 1rem; }
}
/* ===== Mobile dropdown caret & layering ===== */
.site-header { z-index: 1000; }
.mobile-menu-toggle { z-index: 1100; position: relative; }
.nav-menu { z-index: 1200; }

@media (max-width: 768px){
  .nav-wrapper { position: relative; }              
  .has-dropdown { position: relative; }
  .has-dropdown > a { padding-right: 38px; }        
  .has-dropdown > a::after { content: none; }       

  .submenu-toggle{
    position: absolute;
    top: 0; right: 8px;
    height: 44px; width: 30px;
    border: 0; background: transparent; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .submenu-toggle::after{
    content: '▾';
    display: inline-block;
    transform: rotate(0deg);
    transition: transform .2s ease;
    font-size: 14px; line-height: 44px;
  }
  .submenu-toggle[aria-expanded="true"]::after{
    transform: rotate(180deg);
  }
}

/* (Optional) Desktop reinforce (≥1025px) – keeps your 3-col hero explicit */
@media (min-width: 1025px){
  .hero-grid{
    grid-template-columns: 1.2fr 1fr 0.9fr;  /* text | photo | creds */
    grid-template-areas: "content image creds";
    gap: 2rem;
    align-items: center;
  }
  .hero-buttons { justify-content: flex-start; }
  .hero-creds   { text-align: left; }
}