.contact-main{background:linear-gradient(180deg,#f7f9fb 0,#fff 44%)}
.contact-top{padding:3rem 0 4rem}.contact-grid{display:grid;gap:3rem;align-items:start}.intro h1{font-size:clamp(3.2rem,9vw,4.5rem);letter-spacing:-.045em}.intro h1:after,.rule:after{content:"";display:block;width:40px;height:2px;margin-top:1.2rem;background:var(--color-accent)}.intro h2{margin-top:1.7rem;font-size:clamp(2rem,5vw,2.65rem);line-height:1.15}.intro p{margin-top:1.35rem;max-width:31rem;font-size:1.06rem;line-height:1.65;color:var(--color-text-muted)}
.city-placeholder{min-height:230px;margin-top:2.5rem;display:grid;place-items:end center;padding:1.5rem;border-radius:0 0 42% 0;background:linear-gradient(135deg,#f6f8fa,#eaf0f6);border:1px dashed #d0d6dc;color:var(--color-text-muted);text-align:center}.city-placeholder strong{display:block;color:var(--color-text)}.city-placeholder span{font-size:.84rem}

.contact-card{padding:2rem;background:#fff;border:1px solid var(--color-border);border-radius:10px;box-shadow:0 10px 30px rgba(19,40,62,.07)}.contact-card h2{font-size:1.75rem}.form-rule{width:34px;height:2px;margin:.7rem 0 1.25rem;background:var(--color-accent)}.field{margin-top:1.1rem}.field label{display:block;margin-bottom:.45rem;font-size:.88rem;font-weight:650}.req{color:var(--color-accent)}.field input,.field textarea{width:100%;padding:.9rem 1rem;border:1px solid #cfd6dd;border-radius:5px;background:#fff;font:inherit;color:var(--color-text)}.field textarea{min-height:135px;resize:vertical}.field input:focus,.field textarea:focus{outline:2px solid rgba(196,0,18,.15);border-color:var(--color-accent)}.form-button{width:100%;margin-top:1.5rem;border:0;cursor:pointer}.privacy-note{display:flex;gap:.6rem;align-items:center;justify-content:center;margin-top:1rem;color:var(--color-text-muted);font-size:.82rem}.privacy-note svg{width:18px;height:18px}.prototype-note{margin-top:.8rem;text-align:center;color:var(--color-text-muted);font-size:.75rem}

.next-contact{padding:1rem 0 3.5rem}.next-contact h2{text-align:center;font-size:2rem}.next-contact h2:after{margin-left:auto;margin-right:auto}.contact-steps{display:grid;gap:1.5rem;margin-top:2.5rem}.contact-step{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:start}.step-icon{width:88px;height:88px;display:grid;place-items:center;border-radius:50%;background:#e7f0f7}.contact-step:nth-child(2) .step-icon{background:#e8f0e5}.contact-step:nth-child(3) .step-icon{background:#efe8f6}.step-icon svg{width:48px;height:48px}.step-number{color:var(--color-accent);font-weight:800}.contact-step h3{font-size:1.25rem}.contact-step p{margin-top:.55rem;color:var(--color-text-muted);font-size:.92rem}

.reassurance,.email-section{padding-bottom:2rem}.wide-panel{display:grid;gap:1.5rem;align-items:center;padding:1.5rem 2rem;border-radius:9px}.reassurance .wide-panel{background:#f8f4ef}.email-section .wide-panel{background:#edf3f8}.panel-icon{width:82px;height:82px;display:grid;place-items:center;border-radius:50%;background:#fff;color:#17304a}.panel-icon svg{width:48px;height:48px}.reassurance .panel-icon{color:var(--color-accent)}.wide-panel h2{font-size:1.45rem}.wide-panel p{color:var(--color-text-muted)}.email-link{font-size:1.1rem;font-weight:750;color:var(--color-accent);text-decoration:none}.email-link:hover{text-decoration:underline}

@media(min-width:1024px){
.contact-top{padding-top:2rem}.contact-grid{grid-template-columns:.95fr 1.05fr;gap:4rem}.intro{padding-top:2rem}.contact-card{padding:2.25rem}
.contact-steps{grid-template-columns:repeat(3,1fr);gap:2.5rem}.contact-step{grid-template-columns:auto 1fr}.contact-step+.contact-step{position:relative}.contact-step+.contact-step:before{content:"→";position:absolute;left:-1.7rem;top:35px;color:var(--color-accent)}
.wide-panel{grid-template-columns:auto .8fr 1.6fr}.email-section .wide-panel{grid-template-columns:auto .8fr 1fr}
}


/* Contact option 1: no standalone illustration.
   The Talk → Explore → Demonstrate sequence carries the visual weight. */

.city-placeholder{
  display:none !important;
}

.intro{
  max-width:34rem;
}

.next-contact{
  padding:2.25rem 0 4rem;
}

.next-contact__intro{
  max-width:44rem;
  margin-inline:auto;
  text-align:center;
}

.next-contact__intro .rule::after{
  margin-left:auto;
  margin-right:auto;
}

.next-contact__intro p{
  margin-top:1rem;
  color:var(--color-text-muted);
}

.contact-journey{
  display:grid;
  grid-template-columns:1fr;
  gap:0;
  max-width:980px;
  margin:2.5rem auto 0;
}

.contact-journey__step{
  position:relative;
  padding:0 0 2.5rem 5rem;
}

.contact-journey__step:last-child{
  padding-bottom:0;
}

.contact-journey__step::before{
  content:"";
  position:absolute;
  left:2rem;
  top:4rem;
  bottom:0;
  width:1px;
  background:var(--color-border);
}

.contact-journey__step:last-child::before{
  display:none;
}

.contact-journey__marker{
  position:absolute;
  left:0;
  top:.15rem;
  width:1.7rem;
  height:1.7rem;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--ehi-navy,#162b40);
  color:#fff;
  font-size:.72rem;
  font-weight:700;
  z-index:2;
}

.contact-journey__icon{
  width:4rem;
  height:4rem;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--pastel-blue,#e7f0f7);
  color:var(--ehi-navy,#162b40);
}

.contact-journey__step:nth-child(2) .contact-journey__icon{
  background:var(--pastel-green,#e8f0e5);
}

.contact-journey__step:nth-child(3) .contact-journey__icon{
  background:var(--pastel-purple,#efe8f6);
}

.contact-journey__icon svg{
  width:2.15rem;
  height:2.15rem;
}

.contact-journey__step h3{
  margin-top:.85rem;
  font-size:1.2rem;
}

.contact-journey__step p{
  margin-top:.55rem;
  max-width:29rem;
  color:var(--color-text-muted);
  font-size:.94rem;
}

@media(min-width:1024px){
  .contact-journey{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:2rem;
    position:relative;
  }

  .contact-journey::before{
    content:"";
    position:absolute;
    left:16.5%;
    right:16.5%;
    top:2rem;
    height:1px;
    background:var(--color-border);
  }

  .contact-journey__step{
    padding:0;
    text-align:center;
  }

  .contact-journey__step::before{
    display:none;
  }

  .contact-journey__marker{
    left:50%;
    top:-.8rem;
    transform:translateX(-50%);
  }

  .contact-journey__icon{
    margin-inline:auto;
    position:relative;
    z-index:1;
  }

  .contact-journey__step p{
    margin-left:auto;
    margin-right:auto;
  }
}


/* =========================================================
   Contact sequential-flow refinement
   Intro → What happens next → No big commitment → Form
   ========================================================= */

/* The opening is now a focused single-column introduction. */
.contact-hero .container,
.contact-hero__grid,
.contact-layout,
.contact-grid{
  display:block;
}

.contact-hero .intro,
.contact-hero__copy,
.intro{
  width:min(100%, 46rem);
  max-width:46rem;
  margin-inline:auto;
}

/* Give the opening enough presence without manufacturing empty space. */
.contact-hero{
  padding-bottom:2.5rem;
}

/* Form becomes the destination of the page. */
.conversation-form-section{
  padding:1rem 0 4.5rem;
}

.conversation-form-section .contact-card{
  width:min(100%, 860px);
  margin-inline:auto;
  padding:clamp(1.4rem,3vw,2.25rem);
}

.conversation-form-section .contact-card h2,
.conversation-form-section .contact-card h3{
  text-align:left;
}

/* Two-column short fields on desktop/tablet where the existing markup permits it. */
@media(min-width:700px){
  .conversation-form-section form{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:1.25rem;
    row-gap:1rem;
  }

  .conversation-form-section form > .field:nth-of-type(n+5),
  .conversation-form-section form > .form-button,
  .conversation-form-section form > button,
  .conversation-form-section form > p{
    grid-column:1 / -1;
  }
}

@media(max-width:699px){
  .conversation-form-section{
    padding-bottom:3.5rem;
  }

  .conversation-form-section .contact-card{
    padding:1.25rem;
  }
}

/* Definitive corrected sequential contact flow */
.contact-top .contact-grid{display:block !important}
.contact-top .intro{width:min(100%,46rem);max-width:46rem;margin-inline:auto}
.conversation-form-section{padding:1rem 0 4.5rem}
.conversation-form-section .contact-card{width:min(100%,860px);margin-inline:auto}


/* =========================================================
   Contact opening visual experiment
   Abstract "challenge / conversation / possibility" composition
   ========================================================= */

.contact-hero-visual{
  display:none;
}

@media(min-width:700px){
  .contact-top .contact-grid{
    display:grid !important;
    grid-template-columns:minmax(0,1.05fr) minmax(280px,.95fr);
    gap:3rem;
    align-items:center;
  }

  .contact-top .intro{
    width:auto;
    max-width:34rem;
    margin-inline:0;
  }

  .contact-hero-visual{
    display:block;
    width:100%;
    max-width:500px;
    justify-self:end;
    color:var(--ehi-navy,#162b40);
  }

  .contact-hero-visual svg{
    display:block;
    width:100%;
    height:auto;
  }

  .contact-hero-visual__path{
    stroke:var(--ehi-navy,#162b40);
    stroke-width:2;
    stroke-linecap:round;
    opacity:.28;
  }

  .contact-hero-visual__path--secondary{
    opacity:.18;
  }

  .contact-hero-visual__halo{
    fill:var(--pastel-red,#f7e6e4);
    opacity:.9;
  }

  .contact-hero-visual__core{
    fill:var(--ehi-red,#b9292f);
  }

  .contact-hero-visual__node{
    fill:var(--pastel-blue,#e7f0f7);
    stroke:var(--ehi-navy,#162b40);
    stroke-width:1.5;
  }

  .contact-hero-visual__node--b{
    fill:var(--pastel-green,#e8f0e5);
  }

  .contact-hero-visual__node--c{
    fill:var(--pastel-purple,#efe8f6);
  }

  .contact-hero-visual__node--d{
    fill:var(--pastel-orange,#f7e9dd);
  }

  .contact-hero-visual__ghost{
    fill:none;
    stroke:var(--color-border);
    stroke-width:1;
    opacity:.7;
  }

  .contact-hero-visual__ghost--small{
    opacity:.45;
  }
}

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

  .contact-hero-visual{
    max-width:380px;
  }
}

@media(max-width:699px){
  .contact-hero-visual{
    display:none !important;
  }
}