:root{
    --green: #1D4A3B;
    --green-deep: #123128;
    --gold: #C99A44;
    --gold-light: #E3C079;
    --cream: #FBF7EE;
    --cream-soft: #F3ECDD;
    --ink: #2B2B27;
    --ink-soft: #665F53;
    --line: #E4D8BE;
  }
  *{ box-sizing:border-box; }
  body{
    margin:0;
    background: var(--cream);
    color: var(--ink);
    font-family:'Mulish', sans-serif;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  a{ color:inherit; }
  .wrap{ max-width: 1180px; margin:0 auto; padding: 0 32px; }
  .script{ font-family:'Alex Brush', cursive; }
  .serif{ font-family:'Playfair Display', serif; }
  .label{
    font-family:'Poppins', sans-serif;
    font-weight:600;
    letter-spacing:0.14em;
    text-transform:uppercase;
    font-size:0.78rem;
  }

  @media (prefers-reduced-motion: reduce){
    *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
  }

  /* -------- Header -------- */
  header{
    position: sticky; top:0; z-index: 50;
    background: rgba(251,247,238,0.94);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--line);
  }
  nav.wrap{
    display:flex; align-items:center; justify-content:space-between;
    height: 84px;
  }
  .brand{ display:flex; align-items:center; gap:8px; text-decoration:none; }
  .brand .script{ font-size:2rem; color: var(--green); line-height:1; }
  .brand-mark{ width:26px; height:26px; color: var(--gold); }
  .brand-logo-img{ height: 52px; width: auto; display:block; }
  .header-right{ display:flex; align-items:center; gap:22px; }
  .phone-link{
    font-family:'Poppins', sans-serif;
    font-weight:600;
    font-size:0.95rem;
    color: var(--green);
    text-decoration:none;
  }
  .btn{
    display:inline-flex; align-items:center; gap:8px;
    padding: 13px 26px;
    background: var(--gold);
    color: #FFFDF8;
    font-family:'Poppins', sans-serif;
    font-weight:600;
    font-size:0.88rem;
    text-decoration:none;
    border-radius: 3px;
    border: 1px solid var(--gold);
    transition: background 0.2s ease, transform 0.15s ease;
  }
  .btn:hover{ background:#B98832; }
  .btn:focus-visible{ outline:2px solid var(--green); outline-offset:3px; }
  .btn-outline{
    background:transparent; color: var(--green); border:1.5px solid var(--green);
  }
  .btn-outline:hover{ background: var(--green); color:#fff; }

  /* -------- Hero -------- */
  .hero{
    position:relative;
    padding: 90px 0 50px;
    overflow:hidden;
    text-align:center;
    isolation:isolate;
  }
  .hero-bg-photo{
    position:absolute; top:0; left:0;
    width:100%; height: min(680px, 82%);
    object-fit:cover;
    object-position: center 30%;
    z-index:-2;
  }
  .hero-bg-wash{
    position:absolute; inset:0;
    background: linear-gradient(180deg, rgba(251,247,238,0.74) 0%, rgba(251,247,238,0.64) 55%, rgba(251,247,238,0.85) 100%);
    z-index:-1;
  }
  .hero-content{ position:relative; z-index:1; max-width: 640px; }

  .hero-logo-img{
    width: min(560px, 82%);
    height: auto;
    margin: 0 auto 20px;
    display:block;
  }

  .at-home.center{
    color: var(--gold);
    margin: 0 auto 26px;
    display:flex; align-items:center; gap:12px;
    max-width: 260px;
  }
  .at-home::before, .at-home::after{ content:""; flex:1; height:1px; background: var(--gold-light); }
  .hero-when{
    font-size: clamp(1.5rem, 3.2vw, 2rem);
    font-weight: 500;
    font-style: italic;
    color: var(--ink);
    margin: 0 0 6px;
  }
  .hero-can{
    font-size: clamp(3.4rem, 9vw, 6rem);
    color: var(--green);
    line-height: 1;
    margin: 0 0 28px;
  }
  .hero-lede{
    color: var(--ink-soft);
    font-size: 1.06rem;
    max-width: 480px;
    margin: 0 auto;
  }
  .hero-lede strong{ color: var(--ink); }

  /* -------- What Is MyAlly -------- */
  .about-intro{ padding: 0 0 20px; text-align:center; }
  .about-intro h2{
    font-size: clamp(1.5rem, 2.6vw, 1.9rem);
    color: var(--green);
    margin: 0 0 22px;
    display:flex; align-items:center; justify-content:center; gap:18px;
  }
  .about-intro h2::before, .about-intro h2::after{ content:""; width:70px; height:1px; background: var(--gold); }
  .about-intro p{
    color: var(--ink-soft);
    font-size: 1.08rem;
    max-width: 620px;
    margin: 0 auto;
    line-height: 1.7;
  }

  /* -------- Services -------- */
  .services{ padding: 60px 0 70px; text-align:center; }
  .services h2{
    font-size: clamp(1.5rem, 2.6vw, 1.9rem);
    color: var(--green);
    margin: 0 0 44px;
    display:flex; align-items:center; justify-content:center; gap:18px;
  }
  .services h2::before, .services h2::after{ content:""; width:70px; height:1px; background: var(--gold); }
  .service-grid{
    display:grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
  }
  .service{ padding: 0 12px; }
  .service-icon{
    width:64px; height:64px;
    margin: 0 auto 18px;
    border-radius:50%;
    background: var(--cream-soft);
    border: 1px solid var(--gold-light);
    display:flex; align-items:center; justify-content:center;
    color: var(--green);
  }
  .service-icon svg{ width:28px; height:28px; }
  .service h3{
    font-family:'Poppins', sans-serif;
    font-size:0.94rem;
    font-weight:600;
    color: var(--ink);
    margin: 0 0 8px;
    line-height:1.3;
  }
  .service p{
    font-size:0.85rem;
    color: var(--ink-soft);
    margin:0;
    line-height:1.5;
  }
  .service-note{
    margin-top: 8px !important;
    font-family:'Poppins', sans-serif;
    font-size:0.72rem !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--gold) !important;
    font-weight: 600;
  }

  /* -------- Shared rule heading -------- */
  .rule-heading{
    font-size: clamp(1.5rem, 2.6vw, 1.9rem);
    color: var(--green);
    margin: 0 0 22px;
    display:flex; align-items:center; justify-content:center; gap:18px;
  }
  .rule-heading::before, .rule-heading::after{ content:""; width:70px; height:1px; background: var(--gold); }
  .rule-heading.left{ justify-content:flex-start; }
  .rule-heading.left::before{ display:none; }
  .rule-heading.left::after{ flex:1; max-width:70px; }

  /* -------- How It Works -------- */
  .how-it-works{ padding: 70px 0; text-align:center; background: var(--cream-soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
  .step-grid{
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 36px;
    margin-top: 44px;
    text-align:left;
  }
  .step{ padding-top: 20px; border-top: 2px solid var(--gold-light); }
  .step-num{
    font-family:'Alex Brush', cursive;
    font-size: 2.2rem;
    color: var(--gold);
    display:block;
    margin-bottom: 10px;
  }
  .step h3{ font-family:'Poppins', sans-serif; font-size:1rem; font-weight:600; color: var(--ink); margin: 0 0 8px; }
  .step p{ color: var(--ink-soft); font-size:0.92rem; margin:0; line-height:1.5; }
  .how-it-works-close{
    margin-top: 40px;
    font-family:'Poppins', sans-serif;
    font-weight:600;
    letter-spacing:0.05em;
    color: var(--green);
  }

  .visit-detail{
    margin: 50px auto 0;
    max-width: 720px;
    background: var(--paper, var(--cream));
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 42px 44px;
    text-align:left;
  }
  .visit-detail-title{
    font-family:'Playfair Display', serif;
    font-style: italic;
    font-size: 1.5rem;
    color: var(--green);
    margin: 0 0 12px;
    text-align:center;
  }
  .visit-detail-lede{
    text-align:center;
    color: var(--ink-soft);
    font-size: 1rem;
    max-width: 480px;
    margin: 0 auto 28px;
  }
  .visit-checklist{
    list-style:none; margin:0; padding:0;
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 30px;
  }
  .visit-checklist li{
    display:flex;
    align-items:flex-start;
    gap: 10px;
    font-size: 0.96rem;
    color: var(--ink);
    line-height:1.4;
  }
  .visit-checklist li svg{
    width: 19px; height:19px;
    flex-shrink:0;
    margin-top: 2px;
    color: var(--gold);
  }

  /* -------- Why Families Choose -------- */
  .why-choose{ padding: 80px 0; text-align:center; }
  .why-choose-lede{ color: var(--ink-soft); font-size:1.05rem; max-width: 560px; margin: 0 auto 34px; }
  .why-list{
    list-style:none; margin: 0 auto; padding:0;
    display:inline-grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 40px;
    text-align:left;
  }
  .why-list li{ display:flex; align-items:center; gap:12px; font-size:1.02rem; color: var(--ink); }
  .why-bullet{ width:20px; height:20px; object-fit:contain; flex-shrink:0; }
  .why-choose-note{
    margin: 34px auto 0;
    max-width: 560px;
    color: var(--ink-soft);
    font-size:0.98rem;
    padding-top: 26px;
    border-top: 1px solid var(--line);
  }

  /* -------- Founder -------- */
  .founder{ padding: 80px 0; background: var(--green); color:#F3EEE2; }
  .founder-inner{ display:grid; grid-template-columns: 120px 1fr; gap: 44px; align-items:flex-start; }
  .founder-mark{
    width: 92px; height:92px; border-radius:50%;
    background: var(--cream);
    display:flex; align-items:center; justify-content:center;
    font-family:'Playfair Display', serif; font-style:italic; font-weight:600; font-size:1.6rem;
    color: var(--green-deep);
  }
  .founder .rule-heading{ color:#F3EEE2; }
  .founder .rule-heading::after{ background: var(--gold-light); }
  .founder-copy p{ color:#D7DED9; font-size:1.02rem; margin: 0 0 16px; max-width: 620px; }
  .founder-quote{
    margin: 26px 0 0;
    padding: 22px 0 0 24px;
    border-left: 3px solid var(--gold);
    max-width: 560px;
  }
  .founder-quote{
    font-family:'Playfair Display', serif;
    font-style: italic;
    font-size: 1.2rem;
    color: #F3EEE2;
    line-height: 1.5;
  }
  .founder-quote-attr{
    display:block;
    margin-top: 14px;
    font-family:'Poppins', sans-serif;
    font-style: normal;
    font-size: 0.82rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gold-light);
  }

  /* -------- Who It's For -------- */
  .for-whom{ padding: 80px 0; text-align:center; }
  .for-whom-lede{ color: var(--ink-soft); font-size:1.05rem; margin: 0 0 30px; }
  .for-whom-list{
    list-style:none; margin: 0 auto; padding:0;
    max-width: 640px;
    display:grid; grid-template-columns: 1fr 1fr;
    gap: 14px 40px;
    text-align:left;
  }
  .for-whom-list li{
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
    font-size:0.98rem;
  }

  /* -------- Banner -------- */
  .banner{
    margin: 20px auto 50px;
    max-width: 1180px;
    padding: 0 32px;
  }
  .banner-inner{
    position:relative;
    border-radius: 14px;
    overflow:hidden;
    min-height: 220px;
    display:flex;
    align-items:center;
  }
  .banner-photo{
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit:cover;
  }
  .banner-overlay{
    position:absolute; inset:0;
    background: linear-gradient(100deg, rgba(18,49,40,0.85) 0%, rgba(18,49,40,0.55) 40%, rgba(18,49,40,0.08) 66%, rgba(18,49,40,0) 82%);
  }
  .banner-text{
    position:relative; z-index:2;
    color:#F3EEE2;
    font-size: clamp(1.8rem, 3.8vw, 2.7rem);
    font-weight:500;
    margin:0;
    line-height:1.3;
    padding: 54px 40px 54px 60px;
    max-width: 520px;
  }
  .banner-text .script{ font-size: 1.6em; color: var(--gold-light); display:inline-block; margin-left:6px; }

  /* -------- Final CTA -------- */
  .final{
    text-align:center;
    padding: 40px 0 70px;
  }
  .final .script{ font-size: 4.2rem; color: var(--green); display:block; margin-bottom:20px; }
  .final p{ color: var(--ink-soft); max-width: 480px; margin: 0 auto 30px; }
  .pricing-note{
    font-size: 0.95rem;
    color: var(--green) !important;
    margin: -12px auto 30px !important;
  }
  .pricing-note strong{ color: var(--gold); }
  .final-leaves{ display:flex; align-items:center; justify-content:center; gap:16px; margin-bottom:6px; }
  .final-leaves svg{ width:22px; height:22px; color: var(--gold); }
  .final-leaves .label{ font-size: 1.05rem; letter-spacing: 0.18em; }

  /* -------- Contact bar -------- */
  .contact-bar{ background: var(--green); color:#F3EEE2; padding: 34px 0; }
  .contact-grid{
    display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
    gap: 30px 46px;
  }
  .contact-item{ display:flex; align-items:center; gap:12px; text-decoration:none; color:#F3EEE2; }
  .contact-item .icon-circle{
    width:38px; height:38px; border-radius:50%;
    background: var(--gold);
    display:flex; align-items:center; justify-content:center;
    color: var(--green-deep); flex-shrink:0;
  }
  .contact-item .icon-circle svg{ width:18px; height:18px; }
  .contact-item .ct-title{ font-weight:700; font-size:0.95rem; }
  .contact-item .ct-sub{ font-size:0.8rem; color: var(--gold-light); }
  .service-area{
    text-align:center;
    padding-top: 26px;
    margin-top: 26px;
    border-top: 1px solid rgba(243,238,226,0.18);
  }
  .service-area .label{ color: var(--gold-light); margin-bottom:8px; }
  .service-area .counties{
    font-family:'Poppins', sans-serif;
    font-weight:600;
    font-size:0.72rem;
    letter-spacing:0.03em;
    color:#F3EEE2;
    white-space: nowrap;
  }
  .counties span{ color: var(--gold-light); margin: 0 6px; }

  /* -------- Footer -------- */
  footer{ background: var(--green-deep); color:#B9C4BD; padding: 24px 0; }
  footer .wrap{ display:flex; flex-wrap:wrap; gap:10px 24px; align-items:center; justify-content:space-between; }
  footer p{ margin:0; font-size:0.78rem; line-height:1.6; max-width: 760px; }
  footer .emergency{ color: var(--gold-light); font-weight:600; }

  /* -------- Responsive -------- */
  @media (max-width: 900px){
    .service-grid{ grid-template-columns: repeat(3, 1fr); row-gap: 40px; }
    .banner-overlay{ background: linear-gradient(180deg, rgba(18,49,40,0.35) 0%, rgba(18,49,40,0.82) 72%); }
    .banner-text{ padding: 40px 28px; max-width: 100%; text-align:center; }
    .header-right .phone-link{ display:none; }
    .step-grid{ grid-template-columns: 1fr 1fr; }
    .founder-inner{ grid-template-columns: 1fr; }
    .founder-mark{ margin-bottom: 8px; }
  }
  @media (max-width: 560px){
    .wrap{ padding: 0 20px; }
    .hero{ padding: 60px 0 70px; }
    .service-grid{ grid-template-columns: 1fr 1fr; }
    .hero-logo-img{ width: 92%; margin-bottom: 10px; }
    .hero-when{ font-size: 1.25rem; }
    .hero-can{ font-size: 3rem; }
    .final .script{ font-size: 2.6rem; }
    .service-area .counties{ font-size: 0.6rem; letter-spacing: 0.01em; }
    .counties span{ margin: 0 4px; }
    .contact-grid{ flex-direction:column; align-items:flex-start; max-width: 280px; margin: 0 auto; gap: 26px; }
    footer .wrap{ flex-direction:column; align-items:flex-start; }
    .step-grid{ grid-template-columns: 1fr; }
    .why-list{ display:block; }
    .why-list li{ margin-bottom: 14px; }
    .visit-detail{ padding: 28px 22px; }
    .visit-checklist{ grid-template-columns: 1fr; }
    .for-whom-list{ display:block; }
    .for-whom-list li{ display:block; }
  }
