/* ===== CSS Reset and Base ===== */
:root{
  --primary-color:#5D4037;   /* Executive brown */
  --primary-dark:#3E2723;
  --primary-light:#8D6E63;

  /* Enhanced neutral palette */
  --neutral-25:#F9F8F6;      /* Soft ivory */
  --neutral-50:#F3F1ED;      /* Warm off-white */
  --neutral-100:#E8E4DE;     /* Subtle beige */
  --neutral-150:#D6D2CB;     /* Warm gray-beige */
  --neutral-200:#C8C2B9;     /* Muted taupe */
  --secondary-color:#6B6760; /* Sophisticated gray */
  
  --accent-color:#D7CCC8;
  --text-color:#2A2925;      /* Richer dark for better contrast */
  --light-text:#FAFAFA;
  --bg-color:#F8F7F5;        /* Soft warm background */
  --card-bg:#FFFFFF;

  --card-shadow:0 4px 20px rgba(0,0,0,0.06);
  --transition:all .3s cubic-bezier(.25,.8,.25,1);
  --nav-height:80px;

  /* Desktop section spacing */
  --section-spacing:90px;
}

*{ 
    margin:0; 
    padding:0; 
    box-sizing:border-box 
}

html{ 
    scroll-behavior:smooth; 
    font-size:18px 
}

body{
  font-family:'Roboto',system-ui,-apple-system,Segoe UI,Arial,sans-serif;
  line-height:1.7;
  color:var(--text-color);
  background:var(--bg-color);
  overflow-x:hidden;
  padding-top:var(--nav-height);
}

/* Headings keep serif voice for sophistication */
h1,h2,h3,h4,h5,h6{
  font-family:'Source Serif Pro',serif;
  font-weight:600;
  line-height:1.28;
  letter-spacing:-0.02em;
}

/* ===== Header / Navbar ===== */
header.site-header{
  position:fixed; top:0; left:0; width:100%;
  background-color:rgba(255,255,255,.97);
  backdrop-filter:saturate(180%) blur(12px);
  box-shadow:0 1px 0 rgba(0,0,0,.05);
  z-index:1000;
  height:var(--nav-height);
  transition:height .3s ease, box-shadow .3s ease, background-color .3s ease;
  border-bottom:1px solid rgba(0,0,0,.03);
}
header.site-header.scrolled{
  height:70px;
  box-shadow:0 4px 20px rgba(0,0,0,.08);
  background-color:rgba(255,255,255,.98);
}

.navbar{
  display:flex; 
  justify-content:space-between; 
  align-items:center;
  padding:0 40px; 
  max-width:1400px; 
  margin:0 auto; 
  height:100%;
}

.logo-img{
  height:46px; 
  width:46px; 
  border-radius:50%; 
  object-fit:cover;
  transition:var(--transition);
   border:2px solid var(--primary-color);
}

.logo-img:hover{ 
    transform:scale(1.05)
}

.nav-links{ 
    display:flex; 
    list-style:none; 
    align-items:center; 
    gap:36px 
}

.nav-links a{
  color:var(--text-color); 
  text-decoration:none; 
  font-weight:500; 
  position:relative;
  padding:8px 0; 
  transition:var(--transition); 
  font-size:.95rem; 
  letter-spacing:.3px;
}

.nav-links a:hover,.nav-links a:focus{ 
    color:var(--primary-color) 
}

.nav-links a::after{
  content:''; 
  position:absolute; 
  bottom:0; 
  left:0; 
  width:0; 
  height:2px;
  background:var(--primary-color); 
  transition:var(--transition);
}

.nav-links a:hover::after,.nav-links a:focus::after{ 
    width:100% 
}

.download-btn{
  padding:12px 28px; 
  background:var(--primary-color); 
  color:#fff; 
  border:none;
  border-radius:8px; 
  cursor:pointer; 
  font-weight:700; 
  transition:var(--transition);
  font-size:.85rem; 
  letter-spacing:.5px; 
  box-shadow:0 3px 8px rgba(93,64,55,.2);
  text-transform:uppercase;
}

.download-btn:hover,.download-btn:focus{
  background:var(--primary-dark);
  transform:translateY(-2px);
  box-shadow:0 6px 12px rgba(93,64,55,.25);
}

/* Mobile menu */
.menu-toggle{
  display:none; 
  flex-direction:column; 
  justify-content:space-between;
  width:30px; 
  height:22px; 
  background:transparent; 
  border:none; 
  cursor:pointer;
  padding:0;
  z-index:1001; 
  position:relative;
}

.bar{
  display:block; 
  height:2px; 
  width:100%; 
  background-color:var(--primary-dark);
  border-radius:3px; 
  transition:var(--transition); 
  transform-origin:center;
}

.menu-toggle[aria-expanded="true"] .bar:nth-child(1){transform:translateY(10px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] .bar:nth-child(2){opacity:0}
.menu-toggle[aria-expanded="true"] .bar:nth-child(3){transform:translateY(-10px) rotate(-45deg)}

/* ===== Hero ===== */
.hero{
  min-height:calc(100vh - var(--nav-height));
  padding:12px 5px 0; /* tighter gap below navbar */
  background:linear-gradient(135deg, var(--primary-light) 0%, var(--primary-dark) 100%);
  color:var(--light-text);
  display:flex; 
  align-items:center; 
  position:relative; 
  overflow:hidden;
}

.hero-decor{
  position:absolute; inset:0;
  background: radial-gradient(800px 400px at 10% 10%, rgba(255,255,255,.08), transparent 60%),
              radial-gradient(600px 300px at 90% 20%, rgba(215,204,200,.12), transparent 65%);
  pointer-events:none;
}

.hero-container{
  display:flex; 
  align-items:center; 
  max-width:1400px; 
  width:100%; 
  margin:0 auto;
  gap:64px; 
  padding:0 20px; 
  position:relative; 
  z-index:1;
}

.hero-text{ 
    flex:1; 
    opacity:0; 
    transform:translateY(20px); 
    animation:fadeInUp .8s ease-out forwards .3s
}

.hero-image{ 
    flex:1; 
    display:flex; 
    justify-content:center; 
    opacity:0; 
    transform:translateY(20px); 
    animation:fadeInUp .8s ease-out forwards .5s 
}

.hero-image img{
  max-width:100%; 
  height:auto; 
  max-height:70vh; 
  border-radius:16px;
  box-shadow:0 20px 40px rgba(0,0,0,.3); 
  transition:var(--transition);
  object-fit:cover;
  border:12px solid rgba(255,255,255,.1)
}

.hero-image img:hover{ 
    transform:scale(1.02) 
}

h1#hero-heading{
  font-size:3.4rem;
  margin-bottom:16px; 
  line-height:1.12; 
  color:var(--light-text);
  text-shadow:0 2px 4px rgba(0,0,0,.2); 
  animation:fadeIn .8s ease-out .4s forwards; 
  opacity:0;
}

.subtitle{
  font-size:1.6rem; 
  margin-bottom:18px; 
  color:rgba(255,255,255,.95);
  font-weight:400; 
  animation:fadeIn .8s ease-out .5s forwards;
   opacity:0;
}

.hero-description{
  font-size:1.15rem;
  margin-bottom:26px; 
  max-width:560px; 
  color:rgba(255,255,255,.92);
  animation:fadeIn .8s ease-out .6s forwards; 
  opacity:0;
}

.hero-cta{ 
    display:flex; 
    gap:16px; 
    width:100%; 
    animation:fadeIn .8s ease-out .7s forwards; 
    opacity:0 
}

.cta-button{
  padding:14px 28px; 
  background-color:var(--primary-color); 
  color:#fff; 
  border:none;
  border-radius:10px; 
  font-weight:700; 
  cursor:pointer; 
  transition:var(--transition);
  font-size:1.02rem; 
  letter-spacing:.4px; 
  box-shadow:0 6px 12px rgba(0,0,0,.15);
  text-transform:uppercase;
}

.cta-button.secondary{ 
    background-color:transparent; 
    border:2px solid #fff; 
    color:#fff 
}

.cta-button:hover{ 
    transform:translateY(-3px); 
    box-shadow:0 10px 20px rgba(0,0,0,.2) 
}

.cta-button.secondary:hover{ 
    background-color:rgba(255,255,255,.12) 
}

/* Hero metrics */
.hero-metrics{
  margin-top:24px;
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr)); /* 3 × 2 on desktop */
  gap:12px; max-width:720px;
}

.metric{
  display:flex; 
  flex-direction:column;
  align-items:flex-start; 
  gap:4px;
  background:rgba(255,255,255,.12); 
  border:1px solid rgba(255,255,255,.2);
  border-radius:14px; 
  padding:14px 16px; backdrop-filter:blur(8px);
  box-shadow:0 8px 20px rgba(0,0,0,.15); 
  transform:translateY(8px); 
  opacity:0;
  animation:chipIn .7s ease forwards;
}

.metric:nth-child(1){animation-delay:.15s}
.metric:nth-child(2){animation-delay:.25s}
.metric:nth-child(3){animation-delay:.35s}
.metric:nth-child(4){animation-delay:.45s}
.metric:nth-child(5){animation-delay:.55s}
.metric:nth-child(6){animation-delay:.65s}
.metric-value{font-weight:800;font-size:1.06rem}
.metric-label{font-size:.9rem;opacity:.9}

/* ===== Sections & Containers ===== */
.container{ 
    max-width:1100px; 
    margin:0 auto; 
    padding:0 30px 
}

section { 
    padding: var(--section-spacing) 0; 
}

.section-header{ 
    text-align:center; 
    margin-bottom:56px 
}

.section-subtitle{
  font-size:1.25rem; 
  text-align:center; 
  max-width:700px; 
  margin:16px auto 0; 
  color: var(--secondary-color);
}

/* About */
.about{ 
    position:relative; 
    overflow:hidden; 
    color:var(--light-text) 
}

.about-video-bg{ 
    position:absolute;
    inset:0; 
    width:100%; 
    height:100%; 
    object-fit:cover;
    z-index:-1; 
    opacity:.92 
}

.about .container{
  background-color:rgba(93, 64, 55, 0.446);
  padding:56px; 
  border-radius:16px; 
  backdrop-filter:blur(8px); 
  box-shadow:var(--card-shadow);
}

#about-heading{ 
    font-size:2.4rem; 
    margin-bottom:20px; 
    color:var(--light-text); 
    text-align:center 
}

.about-text{
  font-size:1.08rem; 
  margin-bottom:28px; 
  line-height:1.6; 
  text-align:center; 
  max-width:900px;
  margin-left:auto; 
  margin-right:auto; 
  color:rgba(255,255,255,.95);
}

.button-container{ 
    display:flex;
    justify-content:center;
    margin-top:28px
}

/* Competencies */
.competencies{ 
    background-color:var(--neutral-50) 
}

#competencies-heading{ 
    font-size:2.3rem; 
    margin-bottom:28px; 
    color:var(--primary-dark); 
    text-align:center 
}

.accordion{
    max-width:1100px; 
    margin:0 auto 16px 
}

.accordion-item{
  margin-bottom:18px; 
  border-radius:12px; 
  overflow:hidden; 
  box-shadow:var(--card-shadow);
  background-color:var(--card-bg); 
  border:1px solid var(--neutral-150)
}

.accordion-button{
  width:100%; 
  padding:22px 28px; 
  text-align:left; 
  background-color:var(--primary-color); 
  color:#fff;
  border:none; 
  font-size:1.15rem; 
  font-weight:700; 
  cursor:pointer; 
  display:flex; 
  justify-content:space-between; 
  align-items:center;
  transition:var(--transition)
}

.accordion-button:hover,.accordion-button:focus{ 
    background-color:var(--primary-dark) 
}

.accordion-icon{ 
    font-size:1.3rem; 
    transition:var(--transition) 
}

.accordion-button[aria-expanded="true"] .accordion-icon{ 
    transform:rotate(45deg) 
}

.accordion-content{ 
    max-height:0; 
    overflow:hidden; 
    transition:max-height .4s ease-out; 
    background-color:var(--card-bg) 
}

.accordion-content p{ 
    padding:24px 28px; 
    margin:0; 
    font-size:1.06rem; 
    line-height:1.6 
}

.see-more{ 
    display:block; 
    margin:28px auto 0; 
    padding:12px 28px }

/* Case Studies */
.case-studies{ 
    background:linear-gradient(225deg,var(--primary-dark),var(--primary-light)); 
    color:var(--light-text) 
}

.case-study-highlight{ 
    max-width:1100px;
    margin:0 auto 
}

.case-study-card{
  background-color:rgba(255,255,255,.97); 
  border-radius:16px; 
  box-shadow:0 16px 40px rgba(0,0,0,.2);
  overflow:hidden; 
  transition:var(--transition); 
  color:var(--text-color)
}

.case-study-card:hover{ 
    transform:translateY(-6px) 
}

.case-study-header{
  background:linear-gradient(135deg,var(--primary-dark) 0%,var(--primary-color) 100%);
  color:var(--light-text); 
  padding:44px 28px; 
  text-align:center; 
  position:relative
}

.case-study-header h3{ 
    margin:0; 
    font-size:2.1rem; 
    letter-spacing:.4px; 
    text-shadow:0 2px 4px rgba(0,0,0,.2) 
}

.case-studies .section-header h2{ 
    font-size:2.4rem; 
    color:var(--light-text); 
    position:relative; 
    display:inline-block 
}

.case-studies .section-header h2::after{
  content:''; 
  position:absolute; 
  bottom:-12px; 
  left:50%; 
  transform:translateX(-50%);
  width:80px; 
  height:4px; 
  background-color:var(--accent-color)
}

.case-studies .section-subtitle{
  font-size:1.25rem; 
  color:rgba(255,255,255,.92); 
  max-width:700px; 
  margin:18px auto 0; 
  line-height:1.6
}

.case-study-content{ 
    padding:44px; 
    font-size: 1.06rem 
}

.case-study-section{ 
    margin-bottom:36px 
}

.case-study-section h4{
  color:var(--primary-dark); 
  margin-bottom:18px; 
  font-size:1.35rem; 
  display:flex; 
  align-items:center; 
  gap:12px
}

.case-study-section h4 i{ 
    font-size:1.2rem; 
    color:var(--primary-color) 
}

.case-study-section p{ 
    font-size:1.06rem; 
    line-height:1.6; 
    margin-bottom:18px 
}

.strategy-grid{
  display:grid; 
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:24px; 
  margin-top:18px
}

.strategy-phase{
  background-color:var(--neutral-50); 
  padding:24px; 
  border-radius:12px; 
  border-left:5px solid var(--primary-color);
  transition:var(--transition)
}

.strategy-phase:hover{ 
    transform:translateY(-4px); 
    box-shadow:0 8px 20px rgba(0,0,0,.1)
}

.strategy-phase h5{ 
    color:var(--primary-dark); 
    margin-bottom:10px; 
    font-size:1.22rem 
}

.strategy-phase ul{ 
    padding-left:24px 
}

.strategy-phase li{ 
    margin-bottom:10px; 
    list-style-type:disc; 
    line-height:1.8; 
    font-size:1.02rem 
}

.impact-grid{
  display:grid; 
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:24px;
  margin-top:18px
}

.impact-quantitative,.impact-qualitative{
  background-color:var(--neutral-50); 
  padding:24px; 
  border-radius:12px; 
  border-left:5px solid var(--primary-color);
  transition:var(--transition)
}

.impact-quantitative:hover,.impact-qualitative:hover{ 
    transform:translateY(-4px); 
    box-shadow:0 8px 20px rgba(0,0,0,.1) 
}

.impact-quantitative h5,.impact-qualitative h5{ 
    color:var(--primary-dark); 
    margin-bottom:10px; 
    font-size:1.22rem 
}

.impact-quantitative li,.impact-qualitative li{ 
    margin-bottom:10px; 
    line-height:1.8; 
    font-size:1.02rem 
}

.tech-proficiency{
  display:grid; 
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:24px; 
  margin-top:18px
}

.tech-category{
  background-color:var(--neutral-50); 
  padding:24px; 
  border-radius:12px; 
  border-left:5px solid var(--primary-color);
  transition:var(--transition)
}

.tech-category:hover{ 
    transform:translateY(-4px); 
    box-shadow:0 8px 20px rgba(0,0,0,.1)
}

.tech-category h5{ 
    color:var(--primary-dark); 
    margin-bottom:10px; 
    font-size:1.22rem 
}

.tech-tags{ 
    display:flex; 
    flex-wrap:wrap; 
    gap:10px 
}

.tech-tags span{
  background-color:var(--primary-color); 
  color:var(--light-text); 
  padding:8px 14px; 
  border-radius:20px;
  font-size:.95rem; 
  transition:var(--transition)
}

.tech-tags span:hover{ 
    background-color:var(--primary-dark); 
    transform:translateY(-2px)
}

.competency-grid{
  display:grid; 
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:24px; 
  margin-top:18px
}

.competency-category{
  background-color:var(--neutral-50); 
  padding:24px; 
  border-radius:12px; 
  border-left:5px solid var(--primary-color);
  transition:var(--transition)
}

.competency-category:hover{ 
    transform:translateY(-4px); 
    box-shadow:0 8px 20px rgba(0,0,0,.1) 
}

.competency-category h5{ 
    color:var(--primary-dark); 
    margin-bottom:10px; 
    font-size:1.22rem 
}

.competency-category ul{ 
    padding-left:24px 
}

.competency-category li{
  margin-bottom:10px; 
  position:relative; 
  line-height:1.8; 
  font-size:1.02rem
}

.competency-category li::before{
  content:'•';
  position:absolute; 
  left:-20px;
  color:var(--primary-color); 
  font-weight:700; 
  font-size:1.3rem
}

.view-all-btn{
  display:inline-block; 
  padding:14px 32px; 
  background-color:var(--primary-dark); 
  color:#fff; 
  border-radius:10px;
  text-decoration:none; 
  font-weight:700; 
  transition:var(--transition); 
  font-size:1.02rem; 
  margin-top:36px; 
  border:none;
  cursor:pointer; 
  text-transform:uppercase; 
  letter-spacing:.5px; 
  box-shadow:0 6px 14px rgba(0,0,0,.15)
}

.view-all-btn:hover{ 
    background-color:var(--primary-color); 
    transform:translateY(-3px); 
    box-shadow:0 10px 22px rgba(0,0,0,.18)
}

/* Testimonials */
.testimonials{ 
    background-color:var(--neutral-100); 
    color:var(--text-color) 
}

#testimonials-heading{ 
    font-size:2.4rem; 
    color:var(--primary-dark); 
    text-align:center 
}

.testimonial-grid{
  display:grid; 
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:28px;
  max-width:1100px; 
  margin:0 auto
}

.testimonial-card{
  background-color:var(--card-bg); 
  border-radius:16px; 
  overflow:hidden; 
  color:var(--text-color);
  transition:var(--transition); 
  display:flex; 
  flex-direction:column; 
  height:100%; 
  box-shadow:var(--card-shadow)
}

.testimonial-card:hover{ 
    transform:translateY(-6px); 
    box-shadow:0 18px 36px rgba(0,0,0,.12) 
}

.testimonial-header{ 
    padding:26px; 
    background-color:var(--primary-light); 
    color:#fff 
}

.client-info h3{ 
    margin:0; 
    font-size:1.35rem 
}

.client-title{ 
    font-size:1.02rem; 
    opacity:.92; 
    margin:8px 0 0 
}

.testimonial-content{ 
    padding:26px; 
    flex-grow:1; 
    display:flex; 
    flex-direction:column 
}

.rating{ 
    color:#FFC107; 
    margin-bottom:18px; 
    font-size:1.05rem 
}

blockquote{ 
    font-style:italic; 
    margin-bottom:18px; 
    flex-grow:1; 
    font-size:1.05rem; 
    line-height:1.8 
}

.testimonial-excerpt{ 
    display:block 
}

.testimonial-full{ 
    display:none 
}

.read-more-btn{
  background:none; 
  border:none; 
  color:var(--primary-color); 
  font-weight:700; 
  cursor:pointer; 
  text-align:left;
  padding:6px 0; 
  margin-top:auto; 
  align-self:flex-start; 
  font-size:1.02rem; 
  display:flex; 
  align-items:center; 
  gap:10px
}

.read-more-btn:hover{ 
    color:var(--primary-dark) 
}

.read-more-btn::after{ 
    content:'→'; 
    transition:var(--transition) 
}

.read-more-btn:hover::after{ 
    transform:translateX(6px) 
}

.testimonial-actions{ 
    display:flex; 
    justify-content:center; 
    margin-top:36px 
}

/* Services */
.services-preview{ 
    background-color:var(--card-bg) 
}

#services-preview-heading{
  font-size:2.6rem;
   text-align:center; 
   color:var(--primary-dark); 
   margin-bottom:12px; 
   position:relative
}

#services-preview-heading::after{
  content:''; 
  position:absolute; 
  bottom:-12px; 
  left:50%; 
  transform:translateX(-50%);
  width:80px; 
  height:4px; 
  background-color:var(--accent-color)
}

.services-preview-grid{
  display:grid; 
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:28px; 
  max-width:1200px; 
  margin:0 auto
}

.service-preview-card{
  background-color:var(--card-bg); 
  border-radius:16px; 
  padding:36px 30px;
  transition:all .35s cubic-bezier(.175,.885,.32,1.275); 
  box-shadow:0 8px 22px rgba(0,0,0,.08);
  border:1px solid var(--neutral-150); 
  display:flex; 
  flex-direction:column; 
  align-items:center; 
  text-align:center;
  position:relative; 
  overflow:hidden; 
  z-index:1
}

.service-preview-card::before{
  content:''; 
  position:absolute; 
  top:0; 
  left:0; 
  width:100%; 
  height:100%;
  background:linear-gradient(135deg,rgba(93,64,55,.08) 0%, rgba(255,255,255,0) 100%);
  z-index:-1; 
  opacity:0; 
  transition:opacity .3s ease
}

.service-preview-card:hover{ 
    transform:translateY(-8px); 
    box-shadow:0 20px 40px rgba(0,0,0,.12) 
}

.service-preview-card:hover::before{ 
    opacity:1 
}

.service-preview-card.highlighted{ 
    border:2px solid var(--primary-color) 
}

.service-preview-badge{
  position:absolute; 
  top:20px; 
  right:-34px; 
  background:var(--primary-color); 
  color:#fff; 
  padding:6px 44px;
  transform:rotate(45deg); 
  font-size:.85rem; 
  font-weight:800; 
  box-shadow:0 4px 10px rgba(0,0,0,.15); 
  z-index:2; 
  border-radius:0
}

.service-preview-icon{
  width:84px; 
  height:84px; 
  background:linear-gradient(135deg,var(--primary-light) 0%, var(--primary-color) 100%);
  color:#fff; 
  border-radius:50%; 
  display:flex; 
  align-items:center; 
  justify-content:center; 
  margin-bottom:22px;
  font-size:2rem; 
  transition:all .35s ease; 
  box-shadow:0 6px 14px rgba(93,64,55,.25)
}

.service-preview-card:hover .service-preview-icon{ 
    transform:translateY(-4px) rotate(10deg) scale(1.06) 
}

.service-preview-card h3{
  font-size:1.45rem; 
  margin-bottom:18px; 
  color:var(--primary-dark); 
  position:relative; 
  padding-bottom:12px
}

.service-preview-card h3::after{
  content:''; 
  position:absolute; 
  bottom:0; 
  left:50%; 
  transform:translateX(-50%);
  width:50px; 
  height:3px; 
  background-color:var(--primary-light); 
  transition:width .3s ease
}

.service-preview-card:hover h3::after{ 
    width:80px 
}

.service-preview-link{
  display:inline-flex; 
  align-items:center; 
  gap:12px; 
  color:var(--primary-color); 
  font-weight:800; 
  text-decoration:none;
  transition:all .3s ease; 
  font-size:1.06rem; 
  margin-top:auto; 
  padding:12px 22px; 
  border-radius:999px; 
  background-color:rgba(93,64,55,.08)
}

.service-preview-link:hover{ 
    gap:16px; 
    color:var(--primary-dark); 
    background-color:rgba(93,64,55,.14); 
    transform:translateY(-2px)
}

.view-all-container{ 
    display:flex; 
    justify-content:center; 
    margin-top:44px 
}

/* Footer */
.footer{
  background-color:var(--primary-dark); 
  color:var(--light-text); 
  padding:84px 30px 34px;
  text-align:left; /* ensure left alignment overall */
}

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

.footer-grid{
  display:grid; 
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:38px; 
  margin-bottom:44px; 
  text-align:left;
}

.footer-heading{
  font-size:1.45rem; 
  margin-bottom:22px; 
  position:relative; 
  padding-bottom:12px; 
  text-align:left;
}

.footer-heading::after{
  content:''; 
  position:absolute; 
  bottom:0; 
  left:0; 
  width:60px; 
  height:3px; 
  background-color:var(--accent-color)
}

/* Inline links so phone/email sit beside icons */
.footer a{
  color:var(--light-text); 
  text-decoration:none; 
  transition:var(--transition);
  font-size:1.02rem; 
  display:inline; 
  margin-bottom:0;
}

.footer a:hover,.footer a:focus{ 
    color:var(--accent-color); 
    transform:translateX(6px) 
}

/* Icon + text on one line */
.footer address p,
.footer .social-links p{
  display:flex; 
  align-items:center; 
  gap:12px; 
  margin:8px 0; 
  text-align:left;
}

.footer i{ 
    width:20px; 
    text-align:center }

.footer-bottom{
  text-align:center; 
  padding-top:28px; 
  border-top:1px solid rgba(255,255,255,.12)
}

.copyright{ 
    font-size:1rem; 
    opacity:.85 
}

/* Back to Top */
#back-to-top{
  position:fixed; 
  bottom:20px; 
  right:20px; 
  width:60px; 
  height:60px;
  background-color:var(--primary-color); 
  color:#fff; 
  border:none; 
  border-radius:50%;
  font-size:1.4rem; 
  cursor:pointer; 
  opacity:0; 
  visibility:hidden; 
  transition:var(--transition);
  display:flex; 
  align-items:center; 
  justify-content:center; 
  z-index:99; 
  box-shadow:0 8px 20px rgba(0,0,0,.25)
}

#back-to-top.visible{ 
    opacity:.95; 
    visibility:visible 
}

#back-to-top:hover{ 
    opacity:1; 
    background-color:var(--primary-dark); 
    transform:translateY(-6px) 
}

/* ===== Reveal Animations ===== */
.reveal{ 
    opacity:0; 
    transform:translateY(20px); 
    transition:opacity .8s ease, transform .8s ease 
}

.reveal.reveal-in{ 
    opacity:1; 
    transform:translateY(0) 
}

@keyframes fadeInUp{ 
    from{opacity:0; transform:translateY(24px)} to{opacity:1; transform:translateY(0)} 
}

@keyframes fadeIn{ 
    from{opacity:0} to{opacity:1} 
}

@keyframes chipIn{ 
    from{opacity:0; transform:translateY(12px) scale(.98)} to{opacity:1; transform:translateY(0) scale(1)} 
}

/* ===== Responsive ===== */
@media (max-width:1200px){
  .hero-container,.navbar{ 
    padding:0 30px }
}

@media (max-width:992px){
  html{ 
    font-size:16.5px }  /* smaller but readable */
  :root { 
    --section-spacing: 64px; } /* tighter than desktop */

  .hero-container{
    flex-direction:column; 
    text-align:center; 
    gap:24px;
    padding-top:8px; 
    padding-bottom:32px; /* reduced */
  }

  /* Image immediately after navbar */
  .hero-image{ 
    order:-1 }

  .hero-text{ 
    display:flex; 
    flex-direction:column; 
    align-items:center }

  .hero-description{ 
    max-width:100% }

  .hero-image img{ 
    max-height:60vh }

  h1#hero-heading{
     font-size:3rem }

  .subtitle{ 
    font-size:1.4rem }

  #about-heading,#competencies-heading,#testimonials-heading,#services-preview-heading,.case-study-header h3{
    font-size:2.3rem
  }

  .section-header{
     margin-bottom:44px } 

  .services-preview-grid,.testimonial-grid{
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr))
  }

  .hero-metrics{
    grid-template-columns:repeat(2, minmax(0,1fr));
    max-width:520px; 
    gap:10px
  }

  .about .container{ 
    padding:32px }

  .case-study-content{ 
    padding:28px }

  .testimonial-actions{ 
    margin-top:28px }

  .view-all-container{ 
    margin-top:32px }
    
}

@media (max-width:768px){
  html{ 
    font-size:15px }

  :root { 
    --nav-height: 70px; 
    --section-spacing: 52px; } 

  body{ 
    padding-top:var(--nav-height) }

  .navbar{ 
    padding:0 24px }

  .menu-toggle{ 
    display:flex }

  .nav-links{
    position:fixed; 
    top:var(--nav-height); 
    left:0; 
    width:100%;
    background-color:var(--card-bg); 
    flex-direction:column; 
    align-items:center;
    padding:20px 0; 
    gap:18px; 
    box-shadow:0 12px 24px rgba(0,0,0,.1);
    transform:translateY(-150%); 
    transition:transform .4s ease;
  }

  .nav-links.active{ 
    transform:translateY(0) }

  h1#hero-heading{
     font-size:2.5rem }

  .hero-cta{ 
    flex-direction:column; align-items:center }

  .cta-button{ 
    width:100%; max-width:300px }

  .about .container,.case-study-content{ 
    padding:24px 20px }

  .section-header{ 
    margin-bottom:36px }

  .strategy-grid,.impact-grid,.tech-proficiency,.competency-grid{ 
    grid-template-columns:1fr }

  .service-preview-card,.testimonial-card{ 
    padding:24px 20px }

  #back-to-top{ 
    width:54px; 
    height:54px; 
    font-size:1.2rem; 
    bottom:20px; 
    right:20px }

  .hero-metrics{ 
    grid-template-columns:repeat(2, minmax(0,1fr)); 
    max-width:520px }
}

@media (max-width:576px){
  html{ 
    font-size:14px } 

  :root{ 
    --section-spacing: 44px; } 

  h1#hero-heading{ 
    font-size:2.2rem }

  .subtitle{ 
    font-size:1.15rem }

  .hero-description{ 
    font-size:1rem }

  #about-heading,#competencies-heading,#testimonials-heading,#services-preview-heading,.case-study-header h3{
    font-size:2rem
  }

  .case-study-header{ 
    padding:22px 16px }

  .case-study-header h3{ 
    font-size:1.7rem }

  .case-study-section h4{ 
    font-size:1.2rem }

  .about .container,.case-study-content{ 
    padding:20px 16px }

  .accordion-button{ 
    padding:16px 20px; 
    font-size:1.02rem }

  .accordion-content p{ 
    padding:16px }

  .section-header{ 
    margin-bottom:28px }

  .services-preview-grid,.testimonial-grid{ 
    gap:20px }

  .view-all-container{ 
    margin-top:24px }

  .testimonial-actions{ 
    margin-top:24px }

  /* Ensure hero metrics stay 2 columns (2 × 3) */
  .hero-metrics{ 
    grid-template-columns:repeat(2, minmax(0,1fr)); 
    max-width:440px; 
    gap:8px }

  /* Footer always left-aligned on small screens (explicit) */
  .footer, .footer .container, .footer-grid, .footer-bottom, .footer-heading { 
    text-align:left }
}

@media (max-width:400px){
  :root{ 
    --section-spacing:40px } /* ultra-compact on very small devices */

  h1#hero-heading{ 
    font-size:2rem }

  .hero-cta .cta-button{ 
    padding:12px 18px }

  .services-preview-card h3{ 
    font-size:1.22rem }

  .services-preview-grid,.testimonial-grid{ 
    grid-template-columns:1fr }

  .footer-heading{ 
    font-size:1.2rem }

  .footer a{ 
    font-size:.95rem }
    
}