.approach-hero{padding:5rem 0}.hero-grid,.two-col,.data-grid,.next-grid{display:grid;gap:3rem;align-items:center}.approach-hero h1{font-size:clamp(2.8rem,7vw,4rem);letter-spacing:-.04em}.approach-hero h1:after,.rule:after{content:"";display:block;width:34px;height:2px;margin-top:1rem;background:var(--color-accent)}.hero-lead{margin-top:1.5rem;font-size:1.3rem;font-weight:600}.bodycopy{margin-top:1rem;color:var(--color-text-muted)}
.flow,.options,.steps{display:grid;gap:1.25rem}.node{text-align:center}.circle{width:88px;height:88px;margin:0 auto .75rem;display:grid;place-items:center;border-radius:50%;background:#e7f0f7}.node:nth-child(2) .circle{background:#f7e6e4}.node:nth-child(3) .circle{background:#e8f0e5}.circle svg,.picon svg,.stepicon svg{width:48px;height:48px}.node h3{font-size:1rem}.node p{margin-top:.35rem;color:var(--color-text-muted);font-size:.88rem}.node:nth-child(2) h3{color:var(--color-accent)}
.principles{padding:4.5rem 0;border-top:1px solid var(--color-border)}.principles-grid{display:grid;gap:3rem}.principles-intro p{margin-top:1rem;color:var(--color-text-muted)}.principle{display:block;padding:2rem 0;border-top:1px solid var(--color-border)}.principle:first-child{border-top:0;padding-top:0}.num{width:44px;height:44px;display:grid;place-items:center;border:1px solid #e7b5b6;border-radius:50%;color:var(--color-accent);font-weight:700}.pbody{display:grid;gap:1rem}.picon{width:88px;height:88px;display:grid;place-items:center;border-radius:50%;background:rgba(185,41,47,.08)}.principle:nth-child(2) .picon{background:rgba(36,87,167,.08)}.principle:nth-child(3) .picon{background:rgba(22,134,83,.08)}.principle h3{font-size:1.25rem}.principle p{margin-top:.65rem;color:var(--color-text-muted)}
.data-section{padding:2.5rem 0}.data-panel{padding:2rem;border-radius:12px;background:#f0f4f8}.data-copy p,.people-copy p,.lock-copy p{margin-top:1rem;color:var(--color-text-muted)}.data-note{margin-top:1.25rem;padding:1rem;background:#e6edf5;border-radius:8px;font-size:.9rem}.options{padding:1.5rem;background:#fff;border:1px solid var(--color-border);border-radius:8px}.option{text-align:center}.option:nth-child(2) .circle{background:#e8f0e5}.option:nth-child(3) .circle{background:#efe8f6}.option h3{font-size:1rem}.option p{margin-top:.45rem;color:var(--color-text-muted);font-size:.88rem}.designed{margin-top:1.25rem;padding-top:1rem;border-top:1px solid var(--color-border);text-align:center;color:#285fa3;font-weight:600;font-size:.9rem}
.people{padding:4rem 0}.lock-section{padding:2rem 0}.lock-panel{display:grid;gap:2rem;align-items:center;padding:2rem;background:#f8f4ef;border-radius:12px}.lock-icon{width:120px;height:120px;display:grid;place-items:center;border-radius:50%;background:#fff}.lock-icon svg{width:72px;height:72px}.tag{color:var(--color-accent)!important;font-weight:700}.checks{display:grid;gap:1rem;padding-left:1.25rem;border-left:1px solid var(--color-border)}.check{display:flex;gap:.75rem;font-weight:600}.check span:first-child{color:var(--color-accent)}
.next{padding:4.5rem 0}.next-intro p{margin-top:1rem;color:var(--color-text-muted)}.step{text-align:center}.badge{width:26px;height:26px;margin:0 auto -12px;position:relative;z-index:2;display:grid;place-items:center;border-radius:50%;background:#162433;color:#fff;font-size:.75rem;font-weight:700}.stepicon{width:88px;height:88px;margin:auto;display:grid;place-items:center;border-radius:50%;background:#e7f0f7}.step:nth-child(2) .stepicon{background:#e8f0e5}.step:nth-child(3) .stepicon{background:#efe8f6}.step:nth-child(4) .stepicon{background:#f7e9dd}.step h3{font-size:.95rem}.step p{margin-top:.45rem;color:var(--color-text-muted);font-size:.82rem;line-height:1.45}
.start{display:grid;gap:1.25rem;align-items:center;margin-bottom:4.5rem;padding:1.5rem;border:1px solid #e7b5b6;border-radius:8px;background:#fffdfc}.start-icon{width:64px;height:64px;display:grid;place-items:center;border-radius:50%;background:#f7e6de;color:var(--color-accent)}.start-icon svg{width:36px;height:36px}.start h2 span{color:var(--color-accent)}.start p{margin-top:.4rem;color:var(--color-text-muted);font-size:.93rem}
@media(min-width:1024px){.hero-grid{grid-template-columns:.78fr 1.22fr}.flow{grid-template-columns:repeat(3,1fr)}.flow .node+.node{position:relative}.flow .node+.node:before{content:"→";position:absolute;left:-12px;top:36px;color:var(--color-accent)}.principles-grid{grid-template-columns:.55fr 1.45fr}.pbody{grid-template-columns:auto 1fr}.data-grid{grid-template-columns:.55fr 1.45fr}.options{grid-template-columns:repeat(3,1fr)}.option+.option{border-left:1px dashed var(--color-border)}.two-col{grid-template-columns:.65fr 1.35fr}.lock-panel{grid-template-columns:auto 1.4fr .8fr}.next-grid{grid-template-columns:.55fr 1.45fr}.steps{grid-template-columns:repeat(4,1fr)}.step+.step{position:relative}.step+.step:before{content:"→";position:absolute;left:-8px;top:48px;color:var(--color-accent)}.start{grid-template-columns:auto 1fr 1.2fr auto}}

.picon svg{width:52px;height:52px}


/* Animated architecture illustration: "Your data. Your choice." */
.data-animation-column{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
}
.hybrid-arch-diagram{
  --coral-bg:var(--pastel-red,#f7e6e4);
  --coral-stroke:#D9A7AA;
  --coral-text:var(--color-accent,#A63D40);
  --purple-bg:var(--pastel-blue,#e7f0f7);
  --purple-stroke:#C9D7E3;
  --purple-text:var(--ehi-navy,#162b40);
  --teal-bg:var(--pastel-green,#e8f0e5);
  --teal-stroke:#B9CDB4;
  --teal-text:var(--ehi-navy-soft,#29445d);
  width:100%;
  max-width:560px;
  margin:0 auto;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
.hybrid-arch-diagram svg{width:100%;height:auto;display:block}
.hybrid-arch-diagram .box-coral{fill:var(--coral-bg);stroke:var(--coral-stroke)}
.hybrid-arch-diagram .box-purple{fill:var(--purple-bg);stroke:var(--purple-stroke)}
.hybrid-arch-diagram .box-teal{fill:var(--teal-bg);stroke:var(--teal-stroke)}
.hybrid-arch-diagram .th{font-size:16px;font-weight:600;fill:currentColor}
.hybrid-arch-diagram .ts{font-size:12.5px;font-weight:400;fill:currentColor;opacity:.8}
.hybrid-arch-diagram .txt-coral{color:var(--coral-text)}
.hybrid-arch-diagram .txt-purple{color:var(--purple-text)}
.hybrid-arch-diagram .txt-teal{color:var(--teal-text)}
.hybrid-arch-diagram .arr{stroke:#8A8A8A;stroke-width:1.5}

@keyframes hadFlow1{0%{transform:translate(0,0);opacity:0}10%{opacity:1}90%{opacity:1}100%{transform:translate(17px,5px);opacity:0}}
@keyframes hadFlow1r{0%{transform:translate(0,0);opacity:0}10%{opacity:1}90%{opacity:1}100%{transform:translate(-17px,-5px);opacity:0}}
@keyframes hadPulse{0%,100%{opacity:.5}50%{opacity:1}}
@media(prefers-reduced-motion:no-preference){
  .hybrid-arch-diagram .dot-a,.hybrid-arch-diagram .dot-c{animation:hadFlow1 1.8s ease-in-out infinite}
  .hybrid-arch-diagram .dot-b,.hybrid-arch-diagram .dot-d{animation:hadFlow1r 1.8s ease-in-out infinite}
  .hybrid-arch-diagram .agent-box{animation:hadPulse 2.4s ease-in-out infinite}
}

@media(max-width:699px){
  .data-animation-column{margin-top:.5rem}
  .hybrid-arch-diagram{max-width:420px}
}


/* Approach page visual-colour consistency pass */
.circle,
.picon,
.stepicon,
.lock-icon,
.start-icon{
  color:var(--ehi-navy,#162b40);
}

.badge{
  background:var(--ehi-navy,#162b40);
}

.hybrid-arch-diagram .arr{
  stroke:#7B8792;
}

/* Keep the AI agent as the brand focal point rather than a separate purple identity. */
.hybrid-arch-diagram .agent-box{
  stroke:var(--color-accent,#A63D40);
}

/* Retain the intentional red slash on the no-lock-in icon. */
.lock-icon .no-lock-slash{
  stroke:var(--ehi-red,#b9292f);
}


.data-animation-caption{
  margin:.85rem 0 0;
  text-align:center;
  font-size:.92rem;
  font-weight:600;
  color:var(--ehi-navy,#162b40);
}


/* Keep the animation and its caption vertically stacked in the right-hand column. */
.data-animation-column{
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

.data-animation-caption{
  width:100%;
  margin:.85rem 0 0;
  text-align:center;
}


/* Divider between animated architecture diagram and its caption */
.data-animation-divider{
  width:88%;
  height:1px;
  margin:1rem auto 0;
  background:var(--color-border);
}

.data-animation-caption{
  margin:.8rem 0 0;
  text-align:center;
}


/* "Your data. Your choice." column balance */
@media(min-width:700px){
  .data-grid{
    grid-template-columns:minmax(0,45fr) minmax(0,55fr);
  }
}


/* Hybrid architecture diagram V5 supplied component */
.hybrid-arch-diagram {
  --coral-bg:var(--pastel-red,#f7e6e4);
  --coral-stroke:#D9A7AA;
  --coral-text:var(--color-accent,#A63D40);
  --purple-bg:var(--pastel-blue,#e7f0f7);
  --purple-stroke:#C9D7E3;
  --purple-text:var(--ehi-navy,#162b40);
  --teal-bg:var(--pastel-green,#e8f0e5);
  --teal-stroke:#B9CDB4;
  --teal-text:var(--ehi-navy-soft,#29445d);
  --gray-bg:#F2F4F5;
  --gray-stroke:#C9D0D6;
  --gray-text:var(--ehi-navy-soft,#29445d);
  max-width: 420px;
  width: 100%;
  margin: 0 auto;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.hybrid-arch-diagram svg { width: 100%; height: auto; display: block; }
.hybrid-arch-diagram .box-coral { fill: var(--coral-bg); stroke: var(--coral-stroke); }
.hybrid-arch-diagram .box-purple { fill: var(--purple-bg); stroke: var(--purple-stroke); }
.hybrid-arch-diagram .box-teal { fill: var(--teal-bg); stroke: var(--teal-stroke); }
.hybrid-arch-diagram .box-gray { fill: var(--gray-bg); stroke: var(--gray-stroke); }
.hybrid-arch-diagram .th { font-size: 16px; font-weight: 600; fill: currentColor; }
.hybrid-arch-diagram .ts { font-size: 12.5px; font-weight: 400; fill: currentColor; opacity: 0.8; }
.hybrid-arch-diagram .txt-coral { color: var(--coral-text); }
.hybrid-arch-diagram .txt-purple { color: var(--purple-text); }
.hybrid-arch-diagram .txt-teal { color: var(--teal-text); }
.hybrid-arch-diagram .txt-gray { color: var(--gray-text); }
.hybrid-arch-diagram .arr { stroke: #8A8A8A; stroke-width: 1.5; }
.hybrid-arch-diagram .cap { font-size: 9.5px; }

@keyframes hadFlowGuard { 0% { transform: translate(0,0); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translate(19px,18px); opacity: 0; } }
@keyframes hadFlowGuardR { 0% { transform: translate(0,0); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translate(-19px,-18px); opacity: 0; } }
@keyframes hadFlowCloudD { 0% { transform: translate(0,0); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translate(-19px,18px); opacity: 0; } }
@keyframes hadFlowCloudU { 0% { transform: translate(0,0); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translate(19px,-18px); opacity: 0; } }
@keyframes hadFlowDown { 0% { transform: translateY(0); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateY(15px); opacity: 0; } }
@keyframes hadFlowUp { 0% { transform: translateY(0); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateY(-15px); opacity: 0; } }
@keyframes hadPulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  .hybrid-arch-diagram .dot-g1 { animation: hadFlowGuard 1.6s ease-in-out infinite; }
  .hybrid-arch-diagram .dot-g2 { animation: hadFlowGuardR 1.6s ease-in-out infinite; }
  .hybrid-arch-diagram .dot-c1 { animation: hadFlowCloudD 1.6s ease-in-out infinite; }
  .hybrid-arch-diagram .dot-c2 { animation: hadFlowCloudU 1.6s ease-in-out infinite; }
  .hybrid-arch-diagram .dot-u1 { animation: hadFlowDown 1.6s ease-in-out infinite; }
  .hybrid-arch-diagram .dot-u2 { animation: hadFlowUp 1.6s ease-in-out infinite; }
  .hybrid-arch-diagram .agent-box { animation: hadPulse 2.4s ease-in-out infinite; }
}
.data-animation-column .hybrid-arch-diagram{width:100%;max-width:560px;margin:0 auto}
@media(max-width:699px){.data-animation-column .hybrid-arch-diagram{max-width:420px}}


/* V5 colour harmonization with the rest of the Our Approach page */
.hybrid-arch-diagram .arr{
  stroke:#7B8792;
}

.hybrid-arch-diagram .agent-box{
  stroke:var(--color-accent,#A63D40);
}

/* Keep the four functional areas distinct, but within Ehi's muted palette. */
.hybrid-arch-diagram .box-coral{
  fill:var(--pastel-red,#f7e6e4);
  stroke:#D9A7AA;
}
.hybrid-arch-diagram .box-purple{
  fill:var(--pastel-blue,#e7f0f7);
  stroke:#C9D7E3;
}
.hybrid-arch-diagram .box-teal{
  fill:var(--pastel-green,#e8f0e5);
  stroke:#B9CDB4;
}
.hybrid-arch-diagram .box-gray{
  fill:#F2F4F5;
  stroke:#C9D0D6;
}

.hybrid-arch-diagram .txt-purple,
.hybrid-arch-diagram .txt-teal,
.hybrid-arch-diagram .txt-gray{
  color:var(--ehi-navy,#162b40);
}
.hybrid-arch-diagram .txt-coral{
  color:var(--color-accent,#A63D40);
}


/* Ehi Approach: icon glyphs stay a consistent navy (see visual-colour consistency pass above); circle background variety comes from the .principle:nth-child rules. */


/* Deep-link target from Home: keep section clear of the sticky header. */
#your-data-your-choice{
  scroll-margin-top:7rem;
}
.section-anchor{
  display:block;
  position:relative;
  scroll-margin-top:7rem;
}