/* Custom Style CSS */

    :root{
      /* Brand palette (based on your current site) */
      --sage: #6DAA9B;
      --sage-2:#9CC9BE;
      --teal:#244B46;
      --charcoal:#1E2A29;
      --bg:#FAFBFA;
      --bg-2:#E7F1EE;
      --line: rgba(30,42,41,.12);

      --radius: 18px;
      --radius-lg: 16px;

      --shadow: 0 14px 40px rgba(0,0,0,.12);
      --shadow-soft: 0 10px 26px rgba(0,0,0,.08);

      --max: 1200px;
    }

    *{box-sizing:border-box}
    html,body{margin:0;padding:0}
    body{
      font-family: "Open Sans", Arial, sans-serif;
      color: var(--charcoal);
      background: var(--bg);
      line-height: 1.6;
    }

    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}

    /* Utilities */
    .container{width:min(var(--max), calc(100% - 20px)); margin: 0 auto;}
    .request_appoint_btn{
      display:inline-flex; align-items:center; justify-content:center;
      gap:.55rem;
      padding: 9px 24px;
      border-radius: 4px;
      border: 1px solid transparent;
      font-weight: 600;
      font-size: .98rem;
      transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
      cursor:pointer;
      white-space:nowrap;
    }
    .request_appoint_btn:hover{transform: translateY(-1px); box-shadow: 0 10px 22px rgba(0,0,0,.12); }
    .request_appoint_btn-primary{background: var(--sage); color: #fff;}
    .request_appoint_btn-primary:hover{background:#2a475e}
    .request_appoint_btn-ghost{
      background: rgba(255,255,255,.14);
      color:#fff;
      border-color: rgba(255,255,255,.35);
      backdrop-filter: blur(8px);
    }
    .request_appoint_btn-ghost:hover{background: rgba(255,255,255,.20);}

   
    .pill {
      display: inline-flex;
      align-items: center;
      gap: .5rem;
      font-size: .9rem;
      color: #ffffff; /* pure white for better contrast */
      background: rgba(255, 255, 255, 0.10);  /* increased opacity */
      backdrop-filter: blur(6px);             /* glass effect */
      -webkit-backdrop-filter: blur(6px);
      border: 1px solid rgba(255, 255, 255, 0.22);
      padding: .4rem .8rem;  /* slightly larger */
      border-radius: 4px;
}
    .kicker{
      text-transform: uppercase;
      letter-spacing: .14em;
      font-size:.78rem;
      font-weight: 600;
      color: rgba(30,42,41,.72);
    }

    h1,h2,h3{
      font-family: "Merriweather", serif;
      margin: 0 0 .6rem;
      line-height: 1.15;
      letter-spacing: -0.01em;
    }
    h1{font-size: clamp(2rem, 3.7vw, 3.2rem); color:#fff;}
    h2{font-size: clamp(1.6rem, 2.2vw, 2.2rem);}
    h3{font-size: 1.2rem; font-family: "Merriweather", serif; letter-spacing: 0; font-weight: 700;}

    p{margin: 0 0 1rem; color: rgba(30,42,41,.86);}

    .section{padding: clamp(48px, 6vw, 84px) 0;}
    .section.slim{padding: clamp(40px, 5vw, 64px) 0;}
    .section-head{display:flex; align-items:flex-end; justify-content:space-between; gap: 20px; margin-bottom: 28px;}
    .section-head p{max-width: 62ch; margin:0; color: rgba(30,42,41,.76);}

    .card{
      background: rgba(255,255,255,.78);
      border: 1px solid rgba(30,42,41,.10);
      border-radius: var(--radius);
      box-shadow: var(--shadow-soft);
    }

    /* Header */
    .topbar{
      position: sticky;
      top: 0;
      z-index: 50;
      background: rgba(250,251,250,.8);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid rgba(30,42,41,.10);
    }
    .nav{
      display:flex; align-items:center; justify-content:space-between;
      padding: 14px 0;
      gap: 16px;
    }
    .brand{
      display:flex; flex-direction:column; line-height:1.1;
    }
     .brand strong{
        font-weight:700;
        letter-spacing:.02em;
        color:#6daa9b;
        font-size: 20px;
        font-family: 'Open Sans', sans-serif;
        text-transform: uppercase;
        transition: 300ms ease !important;
        font-weight: bold
     }
    .brand strong:visited {
     transition: 300ms ease !important;
     font-weight: bold;
    }


     .brand strong:hover, .brand strong:active, .brand strong:focus {
        color: #2a475e;
    }
	.brand strong:hover,.brand strong:active, .brand strong:focus{
	color:2a475e; }
	
    .brand span{font-size:.9rem; color: rgba(30,42,41,.70);}
    .menu{
      display:flex; align-items:center; gap: 18px;
      font-size: .95rem;
      color: rgba(30,42,41,.80);
    }
    .menu a{padding: 8px 10px; border-radius: 10px;}
    .menu a:hover{background: rgba(109,170,155,.12); color: rgba(30,42,41,.92);}
    .nav-cta{display:flex; align-items:center; gap: 10px;}
    .nav-cta .request_appoint_btn{padding:9px 18px; font-size:.92rem;}

    /* Mobile nav */
    .burger{display:none; border:1px solid rgba(30,42,41,.14); background:#fff; border-radius:12px; padding:10px 12px; cursor:pointer;}
    .burger svg{width:20px;height:20px}
    @media (max-width: 920px){
      .menu{display:none}
      .burger{display:inline-flex}
      .nav-cta{display:none}
    }
    .mobile-menu{
      display:none;
      border-top:1px solid rgba(30,42,41,.10);
      padding: 10px 0 16px;
    }
    .mobile-menu a{
      display:block;
      padding: 12px 10px;
      border-radius: 12px;
      color: rgba(30,42,41,.88);
    }
    .mobile-menu a:hover{background: rgba(109,170,155,.12);}
    .mobile-cta{display:flex; gap:10px; padding: 10px 10px 0;}
    .mobile-cta .request_appoint_btn{flex:1}

    /* HERO */
    .hero{
      position: relative;
      min-height: 78vh;
      display:flex;
      align-items: stretch;
      background:
        linear-gradient(120deg, rgba(36,75,70,.82), rgba(109,170,155,.22)),
        url("https://claycrosbymft.com/wp-content/themes/claycrosbymft/assets/images/ForestPath.jpg");
      background-size: cover;
      background-position: center;
      border-bottom: 1px solid rgba(255,255,255,.15);
    }
    .hero-inner{
      display:grid;
      grid-template-columns: 1.12fr .88fr;
      gap: 34px;
      padding: clamp(54px, 8vw, 92px) 0;
      align-items:center;
    }
    .hero-copy{
      max-width: 64ch;
    }
    .hero h1{
      margin-top: 20px;
    }
    .hero-copy p{color: rgba(255,255,255,.85); font-size: 1.06rem;}
    .hero-actions{display:flex; flex-wrap:wrap; gap: 12px; margin: 18px 0 18px;}
    .hero-badges{
      display:flex; flex-wrap:wrap; gap: 10px;
      margin-top: 18px;
    }

    .hero-panel{
      background: rgba(250,251,250,.88);
      border: 1px solid rgba(255,255,255,.25);
      border-radius: var(--radius-lg);
      padding: 22px;
      box-shadow: var(--shadow);
      backdrop-filter: blur(8px);
    }
    .hero-panel h3{margin:0 0 10px; font-size:1.05rem;}
    .hero-panel ul{margin:0; padding-left: 18px; color: rgba(30,42,41,.82);}
    .hero-panel li{margin: 8px 0;}
    .mini-note{
      margin-top: 14px;
      font-size:.92rem;
      color: rgba(30,42,41,.70);
      border-top: 1px dashed rgba(30,42,41,.20);
      padding-top: 12px;
    }

    @media (max-width: 920px){
      .hero{min-height:auto}
      .hero-inner{grid-template-columns: 1fr; padding: 54px 0 60px;}
      .hero-panel{order: 2;}
    }

    /* About split */
    .about{
      display:grid;
      grid-template-columns: .92fr 1.08fr;
      gap: 34px;
      align-items:center;
    }
    .about-media{
      border-radius: var(--radius-lg);
      overflow:hidden;
      border: 1px solid rgba(30,42,41,.10);
      box-shadow: var(--shadow-soft);
      background:
        linear-gradient(180deg, rgba(109,170,155,.18), rgba(109,170,155,.0));
      background-size: cover;
      background-position: center;
      
    }
     .about-media img{
      width: 100%;
     }
    @media (max-width: 920px){
      .about{grid-template-columns: 1fr;}
      .about-media{aspect-ratio: 16 / 10;}
    }

    /* Services cards */
    .grid-4{
      display:grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
    }
    @media (max-width: 1060px){
      .grid-4{grid-template-columns: repeat(2, 1fr);}
    }
    @media (max-width: 560px){
      .grid-4{grid-template-columns: 1fr;}
    }
    .service-card{
      padding: 18px;
      border-radius: var(--radius);
      background: rgba(255,255,255,.84);
      border: 1px solid rgba(30,42,41,.10);
      box-shadow: var(--shadow-soft);
      transition: transform .18s ease, box-shadow .18s ease;
      min-height: 180px;
    }
    .service-card:hover{transform: translateY(-2px); box-shadow: 0 16px 36px rgba(0,0,0,.12);}
    .icon{
      width: 42px; height: 42px; border-radius: 14px;
      display:grid; place-items:center;
      background: rgba(109,170,155,.16);
      border: 1px solid rgba(109,170,155,.22);
      margin-bottom: 12px;
    }
    .icon svg{width: 22px; height: 22px; fill: var(--teal); opacity: .9;}

    /* Focus list */
    .focus-wrap{
      background: #fff;
      border: 1px solid rgba(30,42,41,.10);
      border-radius: var(--radius-lg);
      padding: 22px;
      box-shadow: var(--shadow-soft);
    }
    .focus-grid{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px 18px;
      margin-top: 14px;
    }
    @media (max-width: 900px){
      .focus-grid{grid-template-columns: repeat(2, 1fr);}
    }
    @media (max-width: 520px){
      .focus-grid{grid-template-columns: 1fr;}
    }
    .check{
      display:flex; align-items:flex-start; gap:10px;
      padding: 10px 12px;
      border-radius: 14px;
      border: 1px solid rgba(30,42,41,.08);
      background: rgba(109,170,155,.08);
    }
    .check svg{flex:0 0 auto; width:18px; height:18px; margin-top:2px; fill: var(--sage);}
    .check span{color: rgba(30,42,41,.82); font-weight: 500;}

    /* Specializations */
    .specializations{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 18px;
      margin-top: 18px;
    }
    .specializations a div:hover {
      color: #fff;
      background: #6daa9b;
    }
    @media (max-width: 820px){.specializations{grid-template-columns:1fr}}
    .spec-item{
      padding: 14px 16px;
      border-radius: 16px;
      border: 1px solid rgba(30,42,41,.10);
      background: rgba(255,255,255,.78);
      display:flex; align-items:center; justify-content:space-between;
      gap: 10px;
    }
    .spec-item strong{font-weight: 650;}
    .spec-item em{font-style:normal; color: rgba(30,42,41,.65); font-size:.92rem;}

    /* Why section */
    .why{
      background:
        radial-gradient(1200px 500px at 20% 0%, rgba(109,170,155,.30), transparent 60%),
        radial-gradient(900px 400px at 90% 10%, rgba(156,201,190,.18), transparent 55%),
        var(--teal);
      color: #fff;
      border-top: 1px solid rgba(255,255,255,.12);
      border-bottom: 1px solid rgba(255,255,255,.12);
    }
    .why h2{color:#fff}
    .why p{color: rgba(255,255,255,.82)}
    .why-grid{
      display:grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
      margin-top: 18px;
    }
    @media (max-width: 1060px){.why-grid{grid-template-columns: repeat(2, 1fr)}}
    @media (max-width: 560px){.why-grid{grid-template-columns: 1fr}}
    .why-card{
      padding: 16px;
      border-radius: var(--radius);
      border: 1px solid rgba(255,255,255,.18);
      background: rgba(255,255,255,.08);
      backdrop-filter: blur(6px);
    }
    .why-card strong{display:block; font-weight: 700; margin-bottom: 6px;}
    .why-cta{margin-top: 22px; display:flex; flex-wrap:wrap; gap: 12px; align-items:center;}
    .rating{
      display:flex; align-items:center; gap: 8px; color: rgba(255,255,255,.85); font-size:.92rem;
      padding: .55rem .8rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06);
    }
    .stars{letter-spacing: .15em; color: #f3d27a;}

    /* Testimonials */
    .test-grid{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      margin-top: 18px;
    }
    @media (max-width: 980px){.test-grid{grid-template-columns: 1fr}}
    .quote{
      padding: 18px;
      border-radius: var(--radius);
      background: rgba(255,255,255,.86);
      border: 1px solid rgba(30,42,41,.10);
      box-shadow: var(--shadow-soft);
    }
    .quote p{margin:0 0 14px; color: rgba(30,42,41,.82)}
    .quote .who{display:flex; align-items:center; justify-content:space-between; gap:10px; color: rgba(30,42,41,.70); font-size:.92rem;}
    .quote .badge{background: rgba(109,170,155,.12); border:1px solid rgba(109,170,155,.22); padding:.35rem .6rem; border-radius: 999px; font-weight:600;}

    /* FAQ */
    .faq{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 18px;
      align-items:start;
      margin-top: 18px;
    }
    @media (max-width: 920px){.faq{grid-template-columns: 1fr}}
    details{
      background: rgba(255,255,255,.86);
      border: 1px solid rgba(30,42,41,.10);
      border-radius: var(--radius);
      padding: 14px 16px;
      box-shadow: var(--shadow-soft);
    }
    summary{
      cursor:pointer;
      font-weight: 700;
      list-style:none;
      display:flex; align-items:center; justify-content:space-between; gap: 16px;
    }
    summary::-webkit-details-marker{display:none}
    .plus{
      width: 34px; height: 34px; border-radius: 12px;
      display:grid; place-items:center;
      background: rgba(109,170,155,.14);
      border: 1px solid rgba(109,170,155,.22);
      flex:0 0 auto;
      transition: transform .18s ease;
    }
    details[open] .plus{transform: rotate(45deg);}
    details p{margin: 12px 0 0; color: rgba(30,42,41,.78)}

    /* Final CTA */
    .final-cta{
      background:
        radial-gradient(900px 400px at 20% 20%, rgba(156,201,190,.35), transparent 60%),
        linear-gradient(135deg, rgba(109,170,155,.35), rgba(109,170,155,.08)),
        #F6F8F7;
      border-top: 1px solid rgba(30,42,41,.08);
    }
    .cta-box{
      border-radius: var(--radius-lg);
      padding: 26px;
      border: 1px solid rgba(30,42,41,.10);
      background: rgba(255,255,255,.78);
      box-shadow: var(--shadow-soft);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 18px;
      flex-wrap:wrap;
    }
    .cta-box p{margin:0; max-width: 64ch;}
    .cta-actions{display:flex; gap: 12px; flex-wrap:wrap;}
    .cta-actions .request_appoint_btn-ghost{
      color: var(--teal);
      background: rgba(109,170,155,.12);
      border-color: rgba(109,170,155,.22);
    }

    /* Footer */
    footer{
      background: var(--teal);
      color: rgba(255,255,255,.86);
      padding: 42px 0;
    }
    .footer-grid{
      display:grid;
      grid-template-columns: 1.2fr .8fr .8fr;
      gap: 18px;
    }
    @media (max-width: 900px){.footer-grid{grid-template-columns:1fr}}
    footer a{color: rgba(255,255,255,.86)}
    footer a:hover{color:#fff; text-decoration:underline}
    .footer-title{font-weight: 800; margin-bottom: 10px; letter-spacing:.02em;}
    .muted{color: rgba(255,255,255,.70)}
    .footer-links{display:grid; gap: 10px;}
    .small{font-size:.92rem}

    /* Accessibility */
    .skip{
      position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden;
    }
    .skip:focus{left:16px; top:16px; width:auto; height:auto; background:#fff; padding:10px 12px; border-radius:12px; z-index:1000;}

  :root{
    --footer-bg:#2E4B5F;        /* dark blue/teal background like screenshot */
    --btn-bg:#5F8F86;           /* sage button */
    --btn-bg-hover:#547F77;
    --text:#ffffff;
    --muted:rgba(255,255,255,.78);
    --link:#7fb3a9;             /* muted green link color */
    --link-hover:#9fd2c7;
  }

  .footer-cta{
   padding: 56px 16px;
  }

  .footer-cta__inner{
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
  }

  .footer-cta__btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 26px;
    background: var(--btn-bg);
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 600;
    font-size: 12px;
    border-radius: 2px; /* squared button look like screenshot */
    border: 0;
    transition: background .18s ease, transform .18s ease;
  }

  .footer-cta__btn--small{
    padding: 11px 18px;
    font-size: 11px;
  }

  .footer-cta__btn:hover{
    background: var(--btn-bg-hover);
    transform: translateY(-1px);
  }

  .footer-cta__text{
    margin: 22px 0 22px;
    color: #000;
    font-size: 18px;
    font-weight: 600;
  }

  .footer-cta__link{
    color: var(--link);
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    margin-top: 22px;
  }

  .footer-cta__link:hover{
    color: var(--link-hover);
    text-decoration: underline;
  }

  .footer-cta__dot{
    color: var(--link);
    margin: 0 10px;
  }

  /* Responsive tweak */
  @media (max-width: 520px){
    .footer-cta__text{font-size: 16px; line-height: 1.4;}
    .footer-cta__btn{width: 100%; max-width: 320px;}
    .footer-cta__btn--small{max-width: 220px;}
  }