:root{
  --navy:#192230;
  --yellow:#FFCD00;
  --white:#FFFFFF;
  --ease:cubic-bezier(.2,.8,.2,1);
  --page:min(1360px,calc(100% - 48px));
  --line:rgba(25,34,48,.10);
  --shadow:0 20px 60px rgba(25,34,48,.10);
  --shadow-strong:0 30px 80px rgba(25,34,48,.16);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--white);color:var(--navy);
  font-family:"Montserrat",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  overflow-x:hidden;
}
a{text-decoration:none;color:inherit}
button,input,textarea,select{font:inherit}
.container{width:var(--page);margin:auto}

.kicker{
  display:inline-flex;align-items:center;gap:10px;
  font-size:10px;font-weight:800;letter-spacing:.15em;text-transform:uppercase
}
.kicker::before{content:"";width:25px;height:3px;border-radius:99px;background:var(--yellow)}

.hero-title{
  margin:16px 0 0;max-width:900px;
  font-size:clamp(40px,4.9vw,68px);
  line-height:.98;letter-spacing:-.05em;font-weight:800
}
.section-title{
  margin:14px 0 0;max-width:760px;
  font-size:clamp(30px,3.7vw,50px);
  line-height:1;letter-spacing:-.04em;font-weight:800
}
.copy{margin:18px 0 0;max-width:680px;font-size:13px;line-height:1.8;opacity:.66}

.reveal{opacity:0;transform:translateY(22px);transition:.65s var(--ease)}
.reveal.visible{opacity:1;transform:none}

/* HERO */
.hero{
  padding:88px 0 54px;
  background:
    linear-gradient(rgba(25,34,48,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(25,34,48,.025) 1px,transparent 1px),
    var(--white);
  background-size:56px 56px;
  border-bottom:1px solid var(--line);
}
.hero-grid{
  display:grid;grid-template-columns:1.08fr .92fr;gap:56px;align-items:end
}
.hero-side{
  display:grid;gap:12px
}
.hero-note{
  padding:22px;border-radius:20px;background:var(--navy);color:var(--white);
  box-shadow:var(--shadow-strong);position:relative;overflow:hidden
}
.hero-note::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--yellow)
}
.hero-note small{
  display:block;color:var(--yellow);font-size:8px;font-weight:800;letter-spacing:.14em;text-transform:uppercase
}
.hero-note strong{
  display:block;margin-top:10px;font-size:18px;line-height:1.2
}
.hero-note p{
  margin:8px 0 0;font-size:9px;line-height:1.65;color:rgba(255,255,255,.60)
}

.response-strip{
  display:grid;grid-template-columns:repeat(3,1fr);
  border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--white)
}
.response-item{
  padding:16px;border-right:1px solid var(--line)
}
.response-item:last-child{border-right:0}
.response-item span{display:block;font-size:7px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;opacity:.42}
.response-item strong{display:block;margin-top:5px;font-size:9px;line-height:1.4}

/* MAIN CONTACT */
.contact-main{padding:64px 0 74px}
.contact-grid{
  display:grid;grid-template-columns:1.18fr .82fr;gap:22px;align-items:start
}
.form-panel{
  border:1px solid var(--line);border-radius:26px;padding:28px;background:var(--white);box-shadow:var(--shadow)
}
.form-head{
  display:flex;justify-content:space-between;gap:20px;align-items:flex-start;
  padding-bottom:22px;border-bottom:1px solid var(--line)
}
.form-head h2{margin:0;font-size:24px;letter-spacing:-.03em}
.form-head p{margin:6px 0 0;font-size:9px;line-height:1.6;opacity:.56;max-width:520px}
.form-badge{
  padding:8px 10px;border-radius:999px;background:var(--navy);color:var(--yellow);
  font-size:8px;font-weight:800;white-space:nowrap
}

.form-body{padding-top:22px}
.row-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field{display:grid;gap:7px;margin-bottom:14px}
.field label{font-size:8px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.field input,.field textarea,.field select{
  width:100%;border:1px solid rgba(25,34,48,.12);background:var(--white);color:var(--navy);
  border-radius:14px;padding:14px 14px;font-size:11px;outline:none;transition:.2s var(--ease)
}
.field textarea{min-height:140px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{
  border-color:var(--navy);box-shadow:0 0 0 3px rgba(25,34,48,.055)
}

.project-types{display:flex;flex-wrap:wrap;gap:7px}
.type-chip{
  border:1px solid rgba(25,34,48,.12);background:var(--white);color:var(--navy);
  padding:9px 11px;border-radius:999px;font-size:8px;font-weight:800;cursor:pointer;
  transition:.2s var(--ease)
}
.type-chip:hover,.type-chip.active{
  background:var(--navy);color:var(--yellow);border-color:var(--navy)
}

.submit-row{
  display:flex;justify-content:space-between;gap:18px;align-items:center;margin-top:6px
}
.submit-note{font-size:8px;line-height:1.5;opacity:.50;max-width:380px}
.submit-btn{
  min-height:50px;padding:0 18px;border:0;border-radius:14px;
  background:var(--navy);color:var(--yellow);font-size:10px;font-weight:800;cursor:pointer;
  transition:.25s var(--ease)
}
.submit-btn:hover{transform:translateY(-3px)}

/* CONTACT SIDE */
.contact-side{display:grid;gap:12px}
.contact-card{
  border:1px solid var(--line);border-radius:20px;padding:20px;background:var(--white)
}
.contact-card.dark{background:var(--navy);color:var(--white);border-color:var(--navy)}
.contact-label{
  display:block;font-size:8px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;opacity:.46
}
.contact-card.dark .contact-label{color:var(--yellow);opacity:1}
.contact-value{
  display:flex;justify-content:space-between;align-items:center;gap:15px;margin-top:12px
}
.contact-value strong{font-size:15px;line-height:1.3}
.contact-link{
  width:36px;height:36px;border-radius:11px;display:grid;place-items:center;
  background:var(--navy);color:var(--yellow);flex:0 0 36px
}
.contact-card.dark .contact-link{background:var(--yellow);color:var(--navy)}
.contact-link svg{width:15px;height:15px}

.side-intro{
  padding:22px;border-radius:20px;background:rgba(25,34,48,.035);border:1px solid var(--line)
}
.side-intro strong{display:block;font-size:14px}
.side-intro p{margin:8px 0 0;font-size:9px;line-height:1.65;opacity:.58}

/* WHAT HAPPENS NEXT */
.next{padding:70px 0;background:var(--navy);color:var(--white)}
.next-head{
  display:grid;grid-template-columns:1fr .5fr;gap:36px;align-items:end;margin-bottom:28px
}
.next .copy{color:rgba(255,255,255,.58);opacity:1}
.next-note{
  justify-self:end;max-width:290px;font-size:9px;line-height:1.6;color:var(--yellow);font-weight:800
}
.next-flow{
  position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:18px
}
.next-flow::before{
  content:"";position:absolute;left:8%;right:8%;top:25px;border-top:2px dotted rgba(255,255,255,.16)
}
.next-step{position:relative;z-index:2}
.next-dot{
  width:50px;height:50px;border-radius:50%;display:grid;place-items:center;
  background:var(--navy);border:2px solid var(--yellow);color:var(--yellow);
  font-size:8px;font-weight:800
}
.next-step h3{margin:17px 0 7px;font-size:14px}
.next-step p{margin:0;font-size:9px;line-height:1.6;color:rgba(255,255,255,.54)}

/* QUICK FAQ */
.faq{padding:70px 0}
.faq-grid{display:grid;grid-template-columns:.7fr 1.3fr;gap:46px}
.faq-list{border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-btn{
  width:100%;border:0;background:transparent;color:var(--navy);
  padding:17px 0;display:grid;grid-template-columns:1fr auto;gap:16px;text-align:left;cursor:pointer
}
.faq-btn strong{font-size:11px}
.faq-btn span{font-size:18px;transition:.2s var(--ease)}
.faq-answer{
  max-height:0;overflow:hidden;opacity:0;
  transition:max-height .35s var(--ease),opacity .25s var(--ease),padding .25s var(--ease)
}
.faq-item.open .faq-answer{max-height:140px;opacity:1;padding:0 0 16px}
.faq-item.open .faq-btn span{transform:rotate(45deg)}
.faq-answer p{margin:0;font-size:9px;line-height:1.65;opacity:.58}

/* FINAL CTA */
.final{padding:0 0 78px}
.final-line{
  padding-top:28px;border-top:1px solid var(--line);
  display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center
}
.final h2{
  margin:0;max-width:760px;font-size:clamp(28px,3.4vw,46px);
  line-height:1;letter-spacing:-.04em
}
.final p{margin:10px 0 0;font-size:9px;line-height:1.6;opacity:.55}
.final-btn{
  min-height:48px;padding:0 18px;border-radius:14px;background:var(--navy);color:var(--yellow);
  display:inline-flex;align-items:center;font-size:10px;font-weight:800
}

/* MOBILE */
@media(max-width:960px){
  :root{--page:min(100% - 28px,1360px)}
  .hero-grid,.contact-grid,.next-head,.faq-grid{grid-template-columns:1fr}
  .next-note{justify-self:start}
}
@media(max-width:760px){
  :root{--page:calc(100% - 22px)}
  .hero{padding:64px 0 40px}
  .hero-title{font-size:clamp(38px,11vw,52px)}
  .section-title{font-size:clamp(30px,9vw,44px)}
  .hero-grid{gap:28px}
  .response-strip{grid-template-columns:1fr}
  .response-item{border-right:0;border-bottom:1px solid var(--line)}
  .response-item:last-child{border-bottom:0}

  .contact-main{padding:52px 0}
  .contact-grid{gap:14px}
  .form-panel{padding:20px;border-radius:22px}
  .form-head{display:block}
  .form-badge{display:inline-flex;margin-top:12px}
  .row-2{grid-template-columns:1fr}
  .submit-row{align-items:flex-start;flex-direction:column}
  .submit-btn{width:100%}

  .contact-side{
    grid-template-columns:1fr 1fr
  }
  .side-intro{grid-column:1/-1}
  .contact-card{padding:17px}
  .contact-value strong{font-size:12px}

  .next{padding:56px 0}
  .next-flow{
    grid-template-columns:1fr;gap:0;padding-left:62px
  }
  .next-flow::before{
    left:24px;right:auto;top:24px;bottom:24px;border-top:0;border-left:2px dotted rgba(255,255,255,.16)
  }
  .next-step{padding:0 0 22px}
  .next-dot{position:absolute;left:-62px;top:0;width:48px;height:48px}
  .next-step h3{margin-top:0}

  .faq{padding:56px 0}
  .faq-grid{gap:26px}

  .final{padding-bottom:66px}
  .final-line{grid-template-columns:1fr;gap:20px}
  .final-btn{justify-self:start}
}
@media(max-width:480px){
  .contact-side{grid-template-columns:1fr}
  .side-intro{grid-column:auto}
  .project-types{gap:6px}
  .type-chip{padding:8px 9px}
}

#formStatus.success{color:#1f6b45;opacity:1}#formStatus.error{color:#9b2c2c;opacity:1}