.hero-home { padding-block: var(--space-12); }
.hero-home__grid {
    display:grid;
    grid-template-columns:1fr;
    gap:var(--space-9);
    align-items:center;
}
.hero-home__content { max-width:var(--content-narrow); }
.hero-home__headline {
    font-size:clamp(2.5rem,11vw,3.5rem);
    line-height:var(--leading-hero);
    letter-spacing:-.035em;
}
.hero-home__headline span { display:block; }
.hero-home__intro {
    max-width:35rem;
    margin-top:var(--space-6);
    font-size:var(--text-body-lg);
    line-height:var(--leading-body-lg);
}
.hero-home__signature {
    max-width:34rem;
    margin-top:var(--space-7);
    font-size:1.375rem;
    font-weight:600;
    line-height:1.4;
}
.hero-home__actions { margin-top:var(--space-7); }

.home-what-we-do {
    padding-block:var(--space-11);
    background:var(--color-surface);
}
.home-what-we-do__content { max-width:var(--content-medium); }
.home-what-we-do h2 { max-width:42rem; }
.home-what-we-do__lead {
    max-width:42rem;
    margin-top:var(--space-6);
    font-size:var(--text-body-lg);
    line-height:var(--leading-body-lg);
}
.home-what-we-do__content > p:not(.home-what-we-do__lead) {
    max-width:var(--content-narrow);
    margin-top:var(--space-5);
    color:var(--color-text-muted);
}
.home-what-we-do .text-link { margin-top:var(--space-6); }

.home-principles { padding-block:var(--space-12); }
.home-principles__grid { display:grid; grid-template-columns:1fr; }
.home-principle { padding:0; }
.home-principle + .home-principle {
    margin-top:var(--space-7);
    padding-top:var(--space-7);
    border-top:var(--border-width) solid var(--color-border);
}
.home-principle h2 { font-size:var(--text-h3); }
.home-principle p { margin-top:var(--space-4); color:var(--color-text-muted); }
.home-principles__action { margin-top:var(--space-8); text-align:center; }

.home-security {
    padding-block:var(--space-11);
    background:var(--color-surface);
}
.home-security__grid {
    display:grid;
    grid-template-columns:1fr;
    gap:var(--space-8);
    align-items:center;
}
.home-security__content { max-width:38rem; }
.home-security__lead {
    margin-top:var(--space-6);
    font-size:var(--text-body-lg);
    line-height:var(--leading-body-lg);
}
.home-security__content > p:not(.home-security__lead) {
    margin-top:var(--space-5);
    color:var(--color-text-muted);
}
.home-security .text-link { margin-top:var(--space-6); }

.home-final-cta { padding-block:var(--space-12); }
.home-final-cta__content {
    max-width:48rem;
    margin-inline:auto;
    text-align:center;
}
.home-final-cta h2 { max-width:44rem; margin-inline:auto; }
.home-final-cta p {
    max-width:39rem;
    margin-inline:auto;
    color:var(--color-text-muted);
}
.home-final-cta h2 + p { margin-top:var(--space-6); }
.home-final-cta__closing {
    margin-top:var(--space-4);
    color:var(--color-text) !important;
    font-size:var(--text-body-lg);
    font-weight:500;
}
.home-final-cta .button { margin-top:var(--space-7); }

@media (min-width:1024px) {
    .hero-home__grid {
        grid-template-columns:1.1fr .9fr;
        gap:var(--space-10);
    }
    .hero-home__headline {
        font-size:clamp(2.75rem,5vw,4rem);
    }
    .home-principles__grid {
        grid-template-columns:repeat(3,minmax(0,1fr));
    }
    .home-principle {
        padding-inline:var(--space-7);
    }
    .home-principle:first-child { padding-left:0; }
    .home-principle:last-child { padding-right:0; }
    .home-principle + .home-principle {
        margin-top:0;
        padding-top:0;
        border-top:0;
        border-left:var(--border-width) solid var(--color-border);
    }
    .home-security__grid {
        grid-template-columns:1.1fr .9fr;
        gap:var(--space-10);
    }
}


/* =========================================================
   Home "AI built around real business problems" visual
   AI is integrated into the existing business environment.
   ========================================================= */

.home-what-we-do__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:2rem;
  align-items:center;
}

.home-what-we-do__visual{
  display:none;
}

@media(min-width:700px){
  .home-what-we-do__grid{
    grid-template-columns:minmax(0,1.05fr) minmax(280px,.95fr);
    gap:clamp(2rem,5vw,4rem);
  }

  .home-what-we-do__content{
    max-width:38rem;
  }

  .home-what-we-do__visual{
    display:block;
    width:100%;
    max-width:500px;
    justify-self:end;
    color:var(--ehi-navy,#162b40);
  }

  .home-what-we-do__visual svg{
    width:100%;
    height:auto;
    display:block;
  }

  .home-what-we-do__visual .business-frame{
    fill:rgba(255,255,255,.5);
    stroke:var(--color-border);
    stroke-width:1.5;
  }

  .home-what-we-do__visual .business-node{
    fill:none;
    stroke:var(--ehi-navy,#162b40);
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
    opacity:.82;
  }

  .home-what-we-do__visual .business-connector{
    fill:none;
    stroke:var(--ehi-navy,#162b40);
    stroke-width:1.6;
    opacity:.24;
  }

  .home-what-we-do__visual .ai-halo{
    fill:var(--pastel-red,#f7e6e4);
    opacity:.95;
  }

  .home-what-we-do__visual .ai-core{
    fill:var(--ehi-red,#b9292f);
  }

  .home-what-we-do__visual .ai-label{
    fill:#fff;
    font-family:Arial,Helvetica,sans-serif;
    font-size:17px;
    font-weight:700;
  }

  .home-what-we-do__visual .detail-dot{
    fill:var(--pastel-blue,#e7f0f7);
    stroke:var(--ehi-navy,#162b40);
    stroke-width:1;
  }

  .home-what-we-do__visual .detail-dot--small{
    fill:var(--pastel-green,#e8f0e5);
  }
}

@media(min-width:700px) and (max-width:1023px){
  .home-what-we-do__grid{
    grid-template-columns:minmax(0,1.15fr) minmax(240px,.85fr);
    gap:2rem;
  }

  .home-what-we-do__visual{
    max-width:390px;
  }
}

@media(max-width:699px){
  .home-what-we-do__visual{
    display:none !important;
  }
}

/* Preferred mock-up treatment for "A practical way to introduce AI" */
.home-principles{
  padding-block:var(--section-md,4.25rem);
}

.home-principles__intro{
  max-width:none;
  margin:0 0 2.4rem;
  text-align:center;
}

.home-principles__intro h2{
  margin:0;
}

.home-principles__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1.5rem;
}

.home-principle{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:1.25rem;
  align-items:start;
  padding:0;
}

.home-principle__icon{
  width:4.2rem;
  height:4.2rem;
  margin:0;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#f7f5f2;
  color:var(--ehi-navy,#162b40);
  border:1px solid rgba(22,43,64,.06);
}

.home-principle__icon svg{
  width:2.45rem;
  height:2.45rem;
}


.home-principle__copy h3{
  margin:0;
  font-size:1.2rem;
  line-height:1.2;
}

.home-principle__rule{
  display:block;
  width:1.9rem;
  height:2px;
  margin:.8rem 0 .9rem;
  background:var(--ehi-red,#b9292f);
}

.home-principle__copy p{
  margin:0;
  color:var(--color-text-muted);
  font-size:.96rem;
}

.home-principles__action{
  display:flex;
  justify-content:center;
  margin-top:2.2rem;
}

.home-principles__action .button--secondary{
  min-width:15rem;
  justify-content:center;
  border-color:var(--ehi-red,#b9292f);
  color:var(--ehi-red,#b9292f);
}

@media(min-width:1024px){
  .home-principles__grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:0;
  }

  .home-principle{
    min-height:9rem;
    padding:0 2rem;
  }

  .home-principle:first-child{
    padding-left:1rem;
  }

  .home-principle:last-child{
    padding-right:1rem;
  }

  .home-principle + .home-principle{
    border-left:1px solid var(--color-border);
  }
}

@media(max-width:699px){
  .home-principles__intro{
    margin-bottom:1.8rem;
  }

  .home-principle{
    grid-template-columns:3.6rem 1fr;
    gap:1rem;
  }

  .home-principle__icon{
    width:3.6rem;
    height:3.6rem;
  }

  .home-principle__icon svg{
    width:2.1rem;
    height:2.1rem;
  }

  .home-principles__action .button--secondary{
    width:100%;
    min-width:0;
  }
}


/* =========================================================
   Home missing visuals: final inline SVG/CSS implementations
   ========================================================= */

.home-hero-visual{
  position:relative;
  width:100%;
  min-height:300px;
  display:grid;
  place-items:center;
}
.home-hero-visual__rings{
  position:absolute;
  width:280px;
  aspect-ratio:1;
  border:1px solid rgba(22,43,64,.08);
  border-radius:50%;
}
.home-hero-visual__rings::before,
.home-hero-visual__rings::after{
  content:"";
  position:absolute;
  inset:14%;
  border:1px solid rgba(22,43,64,.07);
  border-radius:50%;
}
.home-hero-visual__rings::after{inset:29%}
.home-hero-flow{
  position:relative;
  z-index:1;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.35rem;
}
.home-hero-node{
  width:112px;
  text-align:center;
  font-size:.8rem;
  line-height:1.35;
}
.home-hero-node__box{
  width:82px;
  height:82px;
  margin:0 auto .75rem;
  display:grid;
  place-items:center;
  background:#fff;
  border:1px solid var(--color-border);
  border-radius:12px;
  box-shadow:0 6px 18px rgba(22,43,64,.07);
  color:var(--ehi-navy,#162b40);
}
.home-hero-node__box svg{width:45px;height:45px}
.home-hero-node strong{font-weight:600}
.home-hero-node--ai .home-hero-node__box{
  background:var(--ehi-red,#b9292f);
  color:#fff;
  border-color:var(--ehi-red,#b9292f);
}
.home-hero-node--ai strong{color:var(--ehi-red,#b9292f)}
.home-hero-arrow{
  flex:0 0 auto;
  color:rgba(185,41,47,.55);
  font-size:1.15rem;
}

.home-data-visual{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1rem;
  width:100%;
  padding:1rem 0;
}
.home-data-option{
  width:150px;
  text-align:center;
  font-size:.78rem;
}
.home-data-option__box{
  width:118px;
  height:138px;
  margin:0 auto .75rem;
  display:grid;
  place-items:center;
  border:1px solid var(--color-border);
  border-radius:10px;
  background:rgba(255,255,255,.8);
  box-shadow:0 6px 18px rgba(22,43,64,.05);
  color:var(--ehi-navy,#162b40);
}
.home-data-option__box svg{width:52px;height:52px}
.home-data-option--ai{width:175px}
.home-data-option__circle{
  width:142px;
  height:142px;
  margin:0 auto .75rem;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#fff;
  border:1px solid var(--color-border);
  box-shadow:0 6px 18px rgba(22,43,64,.05);
  color:var(--ehi-navy,#162b40);
}
.home-data-option__circle svg{width:48px;height:48px}
.home-data-option strong,
.home-data-option span{display:block}
.home-data-option strong{
  margin-bottom:.25rem;
  color:var(--ehi-navy,#162b40);
}
.home-data-option span{
  color:var(--color-text-muted);
  line-height:1.45;
}
.home-data-arrow{
  color:rgba(185,41,47,.55);
  font-size:1.25rem;
}

@media(min-width:700px) and (max-width:1023px){
  .home-hero-node{width:95px}
  .home-hero-node__box{width:70px;height:70px}
  .home-hero-node__box svg{width:39px;height:39px}
  .home-hero-visual__rings{width:230px}
  .home-data-option{width:130px}
  .home-data-option__box{width:105px;height:125px}
  .home-data-option--ai{width:150px}
  .home-data-option__circle{width:125px;height:125px}
}

@media(max-width:699px){
  .home-hero-visual{
    min-height:0;
    padding:1rem 0;
  }
  .home-hero-visual__rings{display:none}
  .home-hero-flow{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    gap:1rem .5rem;
  }
  .home-hero-node{width:auto}
  .home-hero-node__box{
    width:68px;
    height:68px;
  }
  .home-hero-node__box svg{width:38px;height:38px}
  .home-hero-arrow{font-size:1rem}
  .home-data-visual{
    flex-direction:column;
    gap:.75rem;
  }
  .home-data-option,
  .home-data-option--ai{
    width:min(100%,260px);
  }
  .home-data-option__box,
  .home-data-option__circle{
    width:92px;
    height:92px;
  }
  .home-data-option__box svg,
  .home-data-option__circle svg{
    width:42px;
    height:42px;
  }
  .home-data-arrow{transform:rotate(90deg)}
}

/* Updated illustration for "AI built around real business problems" */
.home-business-problems__image{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
  object-position:center;
}


/* Home business-problems process diagram */
.home-what-we-do__visual{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
}

.home-business-problems__image{
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
  object-fit:contain;
  object-position:center;
}

/* Keep this value-adding diagram visible when the section stacks on mobile. */
@media(max-width:699px){
  .home-what-we-do__visual{
    display:flex !important;
    width:100%;
    margin-top:1.5rem;
  }

  .home-business-problems__image{
    width:100%;
    max-width:620px;
    margin:0 auto;
  }
}


/* Home "AI built around real business problems" CTA ordering */
@media(min-width:700px){
  .home-what-we-do__grid{
    grid-template-areas:
      "content visual"
      "cta visual";
  }

  .home-what-we-do__content{
    grid-area:content;
  }

  .home-what-we-do__visual{
    grid-area:visual;
  }

  .home-what-we-do__cta{
    grid-area:cta;
    align-self:start;
  }
}

@media(max-width:699px){
  .home-what-we-do__grid{
    display:flex;
    flex-direction:column;
  }

  .home-what-we-do__content{order:1}
  .home-what-we-do__visual{order:2}
  .home-what-we-do__cta{
    order:3;
    margin-top:1rem;
  }
}


/* Icon glyphs stay a consistent navy (set on .home-principle__icon); only the circle background varies per icon. */
.home-principle__icon--friction{
  background:rgba(185,41,47,.08);
}
.home-principle__icon--focus{
  background:rgba(36,87,167,.08);
}
.home-principle__icon--impact{
  background:rgba(22,134,83,.08);
}


/* Make "Explore Solutions" visually identical to the Home "Our Approach" CTA. */
.home-secondary-cta-match{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  width:auto;
  margin:0;
  padding:.72rem 1rem;
  border:1px solid var(--ehi-navy,#162b40);
  border-radius:.5rem;
  background:transparent;
  color:var(--ehi-navy,#162b40);
  font:inherit;
  font-weight:600;
  line-height:1.2;
  text-decoration:none;
}

.home-secondary-cta-match:visited{
  color:var(--ehi-navy,#162b40);
}

.home-secondary-cta-match span{
  color:inherit;
}

/* Match the spacing behaviour of the Our Approach CTA container. */
.home-what-we-do__cta{
  margin:0;
  padding:0;
}

@media(hover:hover) and (pointer:fine){
  .home-secondary-cta-match:hover{
    border-color:var(--ehi-navy,#162b40);
    color:var(--ehi-navy,#162b40);
    background:rgba(22,43,64,.04);
  }
}

@media(max-width:699px){
  .home-what-we-do__cta{
    margin-top:1rem;
  }
}


/* =========================================================
   Shared Home secondary CTA treatment
   Explore Solutions and Our Approach now use the exact same
   border, text, dimensions, padding and arrow treatment.
   ========================================================= */
.home-secondary-action .button--secondary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  width:auto;
  min-width:15rem;
  min-height:var(--button-height);
  margin:0;
  padding-inline:var(--button-padding-x);
  border:var(--border-width) solid var(--ehi-red,#b9292f);
  border-radius:var(--radius-md);
  background:transparent;
  color:var(--ehi-red,#b9292f);
  font-size:var(--text-button);
  font-weight:600;
  line-height:1;
  text-decoration:none;
  white-space:nowrap;
}

.home-secondary-action .button--secondary:visited{
  color:var(--ehi-red,#b9292f);
}

.home-secondary-action .button--secondary span{
  color:inherit;
}

@media(hover:hover) and (pointer:fine){
  .home-secondary-action .button--secondary:hover{
    border-color:var(--color-accent-hover,#8f3033);
    color:var(--color-accent-hover,#8f3033);
    background:rgba(166,61,64,.06);
  }
}

@media(max-width:699px){
  .home-secondary-action .button--secondary{
    width:100%;
    min-width:0;
  }
}

/* Cancel the obsolete one-off Explore Solutions styling. */
.home-secondary-cta-match{
  all:unset;
}


/* Keep the third Home secondary CTA aligned with the shared CTA family. */
.home-security__action{
  margin-top:1.25rem;
}