:root{
  --bg:#F9F5EC;
  --text: #5D3A1A;
  --muted: rgba(93,58,26,0.75);
  --subtle: rgba(93,58,26,0.55);
  --rule: rgba(93,58,26,0.18);

  --accent:#7E8C5F;
  --accent-soft: rgba(126,140,95,0.12);
  --neutral: #D8C7A1;

  --max: 1120px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  background: var(--bg);
  font-family: 'Inter', 'Lato', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  line-height:1.5;
}

a{color:inherit; text-decoration:none}
.container{width:min(var(--max), calc(100% - 44px)); margin:0 auto;}

.rule{border-top:1px solid var(--rule);}
.mono{letter-spacing:0.12em; text-transform:uppercase; font-size:12px; color:var(--subtle);}

h1,h2{
  font-family: 'Space Grotesk', 'DM Sans', ui-sans-serif, system-ui, sans-serif;
  font-weight:700;
  letter-spacing:-0.02em;
  margin:0;
  color:var(--text);
}
h1{font-size: clamp(44px, 5.3vw, 74px); line-height:0.96;}
h2{font-size: clamp(26px, 2.2vw, 34px); line-height:1.05;}

p{margin:0; color:var(--muted); font-size:16px;}
strong{color:var(--text)}

.header{
  position:sticky; top:0; z-index:40;
  background: var(--bg);
  border-bottom:1px solid var(--rule);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 0;
}
.brand{
  font-family: 'Space Grotesk', 'DM Sans', ui-sans-serif, system-ui, sans-serif;
  font-weight:700;
  font-size:22px;
  color:var(--text);
}
.mobile-menu-toggle{
  display:none;
  flex-direction:column;
  gap:4px;
  background:transparent;
  border:none;
  cursor:pointer;
  padding:8px;
  z-index:50;
}

.mobile-menu-toggle span{
  width:24px;
  height:2px;
  background:var(--text);
  transition:all 0.3s;
}

.mobile-menu-toggle[aria-expanded="true"] span:nth-child(1){
  transform:rotate(45deg) translate(6px, 6px);
}

.mobile-menu-toggle[aria-expanded="true"] span:nth-child(2){
  opacity:0;
}

.mobile-menu-toggle[aria-expanded="true"] span:nth-child(3){
  transform:rotate(-45deg) translate(6px, -6px);
}

.nav-menu{
  display:flex;
  align-items:center;
  gap:22px;
}

.navlinks{display:flex; gap:22px; align-items:center;}
.navlinks a{
  color:var(--muted);
  padding:6px 0;
  border-bottom:1px solid transparent;
}
.navlinks a:hover{color:var(--text); border-bottom-color:var(--rule);}
.navlinks a.active{color:var(--text); border-bottom-color:var(--accent);}

@media (max-width: 768px){
  .mobile-menu-toggle{
    display:flex;
  }
  
  .nav-menu{
    position:fixed;
    top:0;
    right:0;
    width:280px;
    height:100vh;
    background:var(--bg);
    border-left:1px solid var(--rule);
    flex-direction:column;
    align-items:flex-start;
    padding:80px 24px 24px;
    gap:24px;
    transform:translateX(100%);
    transition:transform 0.3s;
    z-index:45;
    overflow-y:auto;
  }
  
  .nav-menu.open{
    transform:translateX(0);
  }
  
  .navlinks{
    flex-direction:column;
    align-items:flex-start;
    gap:16px;
    width:100%;
  }
  
  .navlinks a{
    width:100%;
    padding:12px 0;
    border-bottom:1px solid var(--rule);
  }
  
  .nav-menu .button{
    width:100%;
    justify-content:center;
  }
  
  .header::after{
    content:"";
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100vh;
    background:rgba(93,58,26,0.4);
    opacity:0;
    pointer-events:none;
    transition:opacity 0.3s;
    z-index:44;
  }
  
  .header.menu-open::after{
    opacity:1;
    pointer-events:all;
  }
}

.cta{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 14px;
  border:1px solid var(--rule);
}
.button{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px;
  border:1px solid var(--rule);
  background: transparent;
  color:var(--text);
  font-weight:600;
  letter-spacing:0.01em;
}
.button:hover{
  border-color:var(--accent);
  color:var(--accent);
}
.button.primary{
  border-color:var(--accent);
  background:var(--accent);
  color:var(--bg);
}
.button.primary:hover{
  background:var(--text);
  border-color:var(--text);
  color:var(--bg);
}

.hero{
  padding:54px 0 22px;
  position:relative;
}

.hero-background{
  background-image:url('assets/maher-hero.jpg');
  background-size:cover;
  background-position:45% 30%; /* Slightly left and more up */
  background-repeat:no-repeat;
  min-height:70vh;
  display:flex;
  align-items:center;
  position:relative;
}

.hero-overlay{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(249,245,236,0.75);
  z-index:1;
}

.hero-background .container{
  position:relative;
  z-index:2;
}

.heroCopy{
  position:relative;
  z-index:2;
  max-width:600px;
}

.kicker{
  display:flex; gap:10px; align-items:center;
  color:var(--text);
  font-size:13px;
  letter-spacing:0.10em;
  text-transform:uppercase;
}
.dot{width:8px; height:8px; background: var(--accent);}

.heroLead{
  margin-top:14px;
  font-size:18px;
  max-width: 58ch;
  color:var(--text);
}
.heroActions{
  margin-top:18px;
  display:flex; gap:12px; flex-wrap:wrap;
}

@media (max-width: 920px){
  .hero-background{
    min-height:60vh;
  }
  
  .heroCopy{
    max-width:100%;
  }
}


.section{
  padding:44px 0;
}
.sectionHead{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:16px;
  margin-bottom:18px;
}
.sectionBody{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:26px;
}
@media (max-width: 920px){
  .sectionBody{grid-template-columns:1fr}
}

.list{
  margin:0; padding:0; list-style:none;
  border-top:1px solid var(--rule);
}
.list li{
  padding:14px 0;
  border-bottom:1px solid var(--rule);
  display:flex;
  gap:12px;
  align-items:flex-start;
}
.list li span{
  color:var(--accent);
  font-weight:700;
  min-width: 22px;
}

.quote{
  border-top:1px solid var(--rule);
  padding-top:14px;
}
.quote blockquote{
  margin:0;
  font-family: 'Space Grotesk', 'DM Sans', ui-sans-serif, system-ui, sans-serif;
  font-weight:700;
  font-size:20px;
  line-height:1.3;
  color:var(--text);
}
.quote p{margin-top:8px; color:var(--subtle); font-size:13px; letter-spacing:0.06em; text-transform:uppercase;}

.testimonialsGrid{
  display:grid;
  grid-template-columns:1fr;
  gap:32px;
}

.testimonialCard{
  border-top:1px solid var(--rule);
  padding-top:24px;
}

.testimonialImages{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-bottom:20px;
  max-width:400px;
}

.testimonialImages.single-image{
  grid-template-columns:1fr;
  max-width:200px;
}

.testimonialImage{
  position:relative;
  aspect-ratio:3/4;
  overflow:hidden;
  background:var(--neutral);
}

.testimonialImage img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  opacity:0.85;
}

.client-1 .testimonialImage:last-child img{
  object-position:60% center;
}

.imageLabel{
  position:absolute;
  bottom:8px;
  left:8px;
  padding:4px 8px;
  background:var(--bg);
  color:var(--text);
  font-size:11px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  font-family:'Inter', ui-sans-serif, system-ui;
  border:1px solid var(--rule);
}

.testimonialContent{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.testimonialQuote{
  margin:0;
  font-family:'Space Grotesk', 'DM Sans', ui-sans-serif, system-ui, sans-serif;
  font-weight:700;
  font-size:22px;
  line-height:1.3;
  color:var(--text);
}

.testimonialMeta{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.testimonialName{
  margin:0;
  color:var(--text);
  font-weight:600;
  font-size:15px;
}

.testimonialDetails{
  margin:0;
  color:var(--subtle);
  font-size:13px;
  letter-spacing:0.04em;
  text-transform:uppercase;
}

.footer{
  padding:28px 0 40px;
  border-top:1px solid var(--rule);
  color:var(--subtle);
  font-size:13px;
}

input:focus, textarea:focus, select:focus{
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

select{
  cursor:pointer;
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235D3A1A' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  padding-right:36px;
}

input[type="checkbox"], input[type="radio"]{
  accent-color:var(--accent);
  cursor:pointer;
}

.modal{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(249,245,236,0.95);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:100;
  padding:20px;
}

.modal-content{
  background:var(--bg);
  border:1px solid var(--rule);
  padding:32px;
  max-width:480px;
  width:100%;
  text-align:center;
  position:relative;
}

.modal-close{
  position:absolute;
  top:16px;
  right:16px;
  background:transparent;
  border:none;
  color:var(--muted);
  font-size:32px;
  line-height:1;
  cursor:pointer;
  padding:0;
  width:32px;
  height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:color 0.2s;
}

.modal-close:hover{
  color:var(--text);
}

.modal-header{
  margin-bottom:16px;
}

.modal-header h2{
  font-family:'Space Grotesk', 'DM Sans', ui-sans-serif, system-ui, sans-serif;
  font-weight:700;
  font-size:28px;
  margin:0;
  color:var(--text);
}

.modal-content p{
  margin:0 0 24px 0;
  color:var(--muted);
  font-size:16px;
}

button:disabled{
  opacity:0.5;
  cursor:not-allowed;
}

/* Client Progress Carousel */
.carousel-wrapper{
  margin-top:18px;
}

.carousel-link{
  display:block;
  text-decoration:none;
  color:inherit;
  transition:opacity 0.2s;
}

.carousel-link:hover{
  opacity:0.85;
}

.carousel-container{
  position:relative;
  width:100%;
}

.carousel-track-wrapper{
  position:relative;
  width:100%;
  overflow:hidden;
}

.carousel-link{
  display:block;
  width:100%;
  text-decoration:none;
  color:inherit;
  transition:opacity 0.2s;
}

.carousel-link:hover{
  opacity:0.85;
}

.carousel-track{
  display:flex;
  width:100%;
  position:relative;
}

.carousel-slide{
  min-width:100%;
  display:none;
}

.carousel-slide.active{
  display:block;
}

.carousel-card-link{
  display:block;
  text-decoration:none;
  color:inherit;
  transition:opacity 0.2s;
}

.carousel-card-link:hover{
  opacity:0.85;
}

.carousel-card{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px;
  align-items:center;
  max-width:900px;
  margin:0 auto;
}

.carousel-content{
  display:flex;
  flex-direction:column;
  gap:20px;
}

.carousel-quote{
  margin:0;
  font-family:'Space Grotesk', 'DM Sans', ui-sans-serif, system-ui, sans-serif;
  font-weight:700;
  font-size:24px;
  line-height:1.3;
  color:var(--text);
}

.carousel-meta{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.carousel-name{
  margin:0;
  color:var(--text);
  font-weight:600;
  font-size:16px;
}

.carousel-timeframe{
  margin:0;
  color:var(--muted);
  font-size:13px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  font-family:'Inter', ui-sans-serif, system-ui;
}

.carousel-images{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.carousel-image{
  position:relative;
  aspect-ratio:3/4;
  overflow:hidden;
  background:var(--neutral);
}

.carousel-image img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

.carousel-label{
  position:absolute;
  bottom:8px;
  left:8px;
  padding:4px 8px;
  background:var(--bg);
  color:var(--text);
  font-size:11px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  font-family:'Inter', ui-sans-serif, system-ui;
  border:1px solid var(--rule);
}

.carousel-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:var(--bg);
  border:1px solid var(--rule);
  color:var(--text);
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:10;
  font-size:20px;
  padding:0;
  transition:border-color 0.2s, color 0.2s;
}

.carousel-btn:hover{
  border-color:var(--accent);
  color:var(--accent);
}

.carousel-btn:focus{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

.carousel-btn-prev{
  left:12px;
}

.carousel-btn-next{
  right:12px;
}

.carousel-btn span{
  line-height:1;
}

.carousel-cta{
  margin-top:20px;
  text-align:center;
}

.carousel-link-text{
  color:var(--text);
  text-decoration:none;
  font-size:14px;
  letter-spacing:0.04em;
  text-transform:uppercase;
  border-bottom:1px solid transparent;
  transition:border-color 0.2s;
}

.carousel-link-text:hover{
  border-bottom-color:var(--accent);
}

@media (max-width: 920px){
  .carousel-btn{
    width:36px;
    height:36px;
    font-size:18px;
  }
  
  .carousel-btn-prev{
    left:8px;
  }
  
  .carousel-btn-next{
    right:8px;
  }
  
  .carousel-card{
    gap:24px;
  }
  
  .carousel-quote{
    font-size:20px;
  }
}

@media (max-width: 640px){
  .carousel-card{
    grid-template-columns:1fr;
    gap:20px;
  }
  
  .carousel-content{
    order:1;
  }
  
  .carousel-images{
    order:2;
  }
  
  .carousel-quote{
    font-size:18px;
  }
}