/* Final site hotfix — readability, symmetry and compact responsive layouts */

/* HOME: replace the awkward split support section with a balanced card system */
.home-page .engagement-section{
  background:#101012 !important;
  color:#f4f4f4 !important;
  padding:96px 0 !important;
}
.home-page .engagement-layout{
  display:block !important;
  max-width:1120px !important;
  margin:0 auto !important;
}
.home-page .engagement-visual{display:none !important;}
.home-page .engagement-content{
  width:100% !important;
  max-width:none !important;
  text-align:center !important;
}
.home-page .engagement-content h2{
  max-width:760px !important;
  margin:0 auto 44px !important;
  font-size:clamp(42px,4.2vw,68px) !important;
  line-height:.98 !important;
  letter-spacing:-.045em !important;
  color:#f4f4f4 !important;
}
.home-page .engagement-list{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:16px !important;
  width:100% !important;
}
.home-page .engagement-list article{
  min-height:190px !important;
  padding:28px !important;
  border:1px solid rgba(244,244,244,.15) !important;
  border-radius:20px !important;
  background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.018)) !important;
  text-align:left !important;
  display:flex !important;
  align-items:flex-end !important;
  box-shadow:none !important;
}
.home-page .engagement-list article::before{
  content:"";
  position:absolute;
  width:54px;
  height:3px;
  top:27px;
  left:28px;
  border-radius:999px;
  background:#bfff00;
}
.home-page .engagement-list article{position:relative !important;}
.home-page .engagement-list h3{
  margin:0 0 10px !important;
  color:#f4f4f4 !important;
  font-size:25px !important;
  line-height:1.05 !important;
}
.home-page .engagement-list p{
  margin:0 !important;
  color:rgba(244,244,244,.68) !important;
  font-size:15px !important;
  line-height:1.55 !important;
  max-width:31ch !important;
}

/* AI: ensure every capability caption is readable on dark backgrounds */
.ai-capabilities-section{
  background:#0d0d0f !important;
  color:#f4f4f4 !important;
}
.ai-capabilities-section .ai-cap-grid{
  gap:18px !important;
}
.ai-capabilities-section .ai-cap-grid article{
  overflow:hidden !important;
  padding:0 0 24px !important;
  border:1px solid rgba(244,244,244,.16) !important;
  border-radius:18px !important;
  background:#161619 !important;
  color:#f4f4f4 !important;
  box-shadow:none !important;
}
.ai-capabilities-section .ai-cap-grid img{
  display:block !important;
  width:100% !important;
  height:205px !important;
  object-fit:cover !important;
  border-bottom:1px solid rgba(244,244,244,.12) !important;
}
.ai-capabilities-section .ai-cap-grid h2{
  color:#f4f4f4 !important;
  margin:20px 22px 7px !important;
  font-size:23px !important;
  line-height:1.1 !important;
}
.ai-capabilities-section .ai-cap-grid p{
  color:rgba(244,244,244,.68) !important;
  margin:0 22px !important;
  font-size:14px !important;
  line-height:1.52 !important;
}

/* WHY US: premium section uses the established dark colour */
.about-page .split-story,
html[data-page="about"] .split-story{
  background:#101012 !important;
  color:#f4f4f4 !important;
  border-color:rgba(244,244,244,.12) !important;
}
.about-page .split-story h2,
html[data-page="about"] .split-story h2{
  color:#f4f4f4 !important;
}
.about-page .split-story h2 em,
html[data-page="about"] .split-story h2 em{
  color:#f4f4f4 !important;
}
.about-page .split-story p,
html[data-page="about"] .split-story p{
  color:rgba(244,244,244,.68) !important;
}
.about-page .split-story-images img,
html[data-page="about"] .split-story-images img{
  border-color:rgba(244,244,244,.15) !important;
}

/* SERVICES: compact, symmetric alternating rows */
html[data-page="services"] .service-stack{
  gap:28px !important;
}
html[data-page="services"] .service-feature,
html[data-page="services"] .service-feature-reverse{
  display:grid !important;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr) !important;
  align-items:center !important;
  gap:46px !important;
  min-height:390px !important;
  padding:34px !important;
  border:1px solid rgba(15,15,20,.11) !important;
  border-radius:26px !important;
  background:#f8f8f9 !important;
}
html[data-page="services"] .service-feature-reverse .service-image{order:2 !important;}
html[data-page="services"] .service-feature-reverse .service-copy{order:1 !important;}
html[data-page="services"] .service-image{
  height:310px !important;
  border-radius:20px !important;
  overflow:hidden !important;
}
html[data-page="services"] .service-image img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
}
html[data-page="services"] .service-copy{max-width:560px !important;}
html[data-page="services"] .service-copy h2{
  font-size:clamp(38px,3.5vw,56px) !important;
  line-height:1 !important;
  letter-spacing:-.04em !important;
  margin-bottom:16px !important;
}

/* Mobile */
@media(max-width:760px){
  .home-page .engagement-section{padding:68px 0 !important;}
  .home-page .engagement-content h2{
    font-size:40px !important;
    line-height:1 !important;
    margin-bottom:28px !important;
    text-align:left !important;
  }
  .home-page .engagement-list{
    grid-template-columns:1fr !important;
    gap:12px !important;
  }
  .home-page .engagement-list article{
    min-height:146px !important;
    padding:24px !important;
  }
  .home-page .engagement-list article::before{left:24px;top:23px;}

  .ai-capabilities-section .ai-cap-grid{
    grid-template-columns:1fr !important;
    gap:14px !important;
  }
  .ai-capabilities-section .ai-cap-grid img{height:180px !important;}
  .ai-capabilities-section .ai-cap-grid h2{font-size:21px !important;}

  html[data-page="about"] .split-story-grid{
    grid-template-columns:1fr !important;
    gap:38px !important;
  }
  html[data-page="about"] .split-story h2{
    font-size:42px !important;
    line-height:1 !important;
  }
  html[data-page="about"] .split-story-images{
    grid-template-columns:1fr 1fr !important;
    gap:10px !important;
  }
  html[data-page="about"] .split-story-images img{
    height:180px !important;
    transform:none !important;
  }

  html[data-page="services"] .service-feature,
  html[data-page="services"] .service-feature-reverse{
    grid-template-columns:1fr !important;
    gap:24px !important;
    min-height:0 !important;
    padding:18px !important;
    border-radius:20px !important;
  }
  html[data-page="services"] .service-feature-reverse .service-image,
  html[data-page="services"] .service-feature-reverse .service-copy{
    order:initial !important;
  }
  html[data-page="services"] .service-image{height:220px !important;}
  html[data-page="services"] .service-copy h2{font-size:38px !important;}
}

/* =========================================================
   FINAL TYPOGRAPHY SYSTEM — based on approved home hero
   Keeps bold and italic lines separated with no collisions.
   ========================================================= */
:root{
  --fh-display-size:clamp(44px,4.45vw,76px);
  --fh-display-mobile:clamp(38px,11vw,50px);
  --fh-display-leading:.96;
  --fh-italic-leading:1.02;
}

/* One consistent display style throughout the website */
.hero-copy h1,
.section-heading h2,
.system-copy h2,
.ai-copy h2,
.engagement-content h2,
.testimonial-heading h2,
.final-copy h2,
.inner-hero h1,
.contact-hero h1,
.page-cta h2,
.split-story h2,
.founders-copy h2,
.ai-showcase-copy h2{
  font-family:Arial, Helvetica, sans-serif !important;
  font-size:var(--fh-display-size) !important;
  line-height:var(--fh-display-leading) !important;
  letter-spacing:-.052em !important;
  font-weight:760 !important;
}

/* Italic line always starts below the bold line — never overlaps */
.hero-copy h1 em,
.section-heading h2 em,
.system-copy h2 em,
.ai-copy h2 em,
.testimonial-heading h2 em,
.inner-hero h1 em,
.contact-hero h1 em,
.page-cta h2 em,
.split-story h2 em,
.founders-copy h2 em,
.ai-showcase-copy h2 em{
  display:block !important;
  position:relative !important;
  margin-top:.12em !important;
  padding-top:.02em !important;
  font-family:Georgia, 'Times New Roman', serif !important;
  font-size:1em !important;
  line-height:var(--fh-italic-leading) !important;
  letter-spacing:-.042em !important;
  font-style:italic !important;
  font-weight:400 !important;
  color:inherit !important;
  background:none !important;
  -webkit-background-clip:initial !important;
  background-clip:initial !important;
  -webkit-text-fill-color:currentColor !important;
}

/* Home hero: white bold and white italic, with safe spacing */
.home-page .hero-copy h1,
.home-page .hero-copy h1 em{
  color:#f4f4f4 !important;
}
.home-page .hero-copy h1 em{margin-top:.13em !important;}

/* AI opening: clean white section, all heading text black */
html[data-page="ai"] .inner-hero{
  background:#f4f4f4 !important;
  border-color:rgba(13,13,13,.14) !important;
}
html[data-page="ai"] .inner-hero h1,
html[data-page="ai"] .inner-hero h1 em,
html[data-page="ai"] .inner-hero p{
  color:#0d0d0d !important;
  -webkit-text-fill-color:#0d0d0d !important;
}

/* Testimonials: light section, no purple display text */
.home-page .testimonials-section{
  background:#f4f4f4 !important;
  color:#0d0d0d !important;
}
.home-page .testimonial-heading h2,
.home-page .testimonial-heading h2 em{
  color:#0d0d0d !important;
  -webkit-text-fill-color:#0d0d0d !important;
}

/* Why-us premium section keeps the existing deep black theme */
html[data-page="about"] .split-story{
  background:#0d0d0d !important;
  color:#f4f4f4 !important;
}
html[data-page="about"] .split-story h2,
html[data-page="about"] .split-story h2 em{
  color:#f4f4f4 !important;
  -webkit-text-fill-color:#f4f4f4 !important;
}
html[data-page="about"] .split-story p{color:#b8b8bf !important;}

@media(max-width:760px){
  .hero-copy h1,
  .section-heading h2,
  .system-copy h2,
  .ai-copy h2,
  .engagement-content h2,
  .testimonial-heading h2,
  .final-copy h2,
  .inner-hero h1,
  .contact-hero h1,
  .page-cta h2,
  .split-story h2,
  .founders-copy h2,
  .ai-showcase-copy h2{
    font-size:var(--fh-display-mobile) !important;
    line-height:.98 !important;
  }
  .hero-copy h1 em,
  .section-heading h2 em,
  .system-copy h2 em,
  .ai-copy h2 em,
  .testimonial-heading h2 em,
  .inner-hero h1 em,
  .contact-hero h1 em,
  .page-cta h2 em,
  .split-story h2 em,
  .founders-copy h2 em,
  .ai-showcase-copy h2 em{
    margin-top:.14em !important;
    line-height:1.04 !important;
  }
}