/* ================= QUOTE / COST CALCULATOR ================= */

:root {
    --primary: #1c588d;
    --secondary: #1e90ff;
    --accent: #ff7a59;
    --white: #ffffff;
    --dark-text: #1f2933;
    --muted: rgba(255,255,255,.85);
}

/* section wrapper */
.quote-section {
    position: relative;
    padding: 110px 0;
    background:
        linear-gradient(rgba(28,88,141,.92), rgba(28,88,141,.92)),
        url("https://images.unsplash.com/photo-1590496793929-36417d3117fb?auto=format&fit=crop&w=1920&q=80");
    background-size: cover;
    background-position: center;
    color: var(--white);
   
}

/* layout */
.quote-container {
    width: 90%;
    max-width: 1200px;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: 60px;
    align-items: center;
}

/* LEFT CONTENT */
.quote-info .kicker {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
}

.quote-info .kicker span {
    width: 50px;
    height: 2px;
    background: var(--accent);
}

.quote-info h2 {
    margin: 14px 0 18px;
    font-size: 56px;
    font-weight: 900;
    line-height: 1.05;
}

.quote-info p {
    font-size: 17px;
    line-height: 1.75;
    max-width: 520px;
    color: var(--muted);
}

/* feature icons */
.quote-features {
    margin-top: 40px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 26px;
}

.feature {
    display: flex;
    align-items: center;
    gap: 14px;
}

.feature i {
    font-size: 28px;
    color: var(--white);
}

.feature span {
    font-weight: 700;
}

/* RIGHT FORM */
.quote-form {
    background: var(--white);
    padding: 45px 42px;
}

.quote-form h3 {
    margin-bottom: 28px;
    font-size: 24px;
    font-weight: 800;
    color: var(--dark-text);
}

/* grid */
.form-grid {
    display: grid;
    padding: 25px;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.form-grid.full {
    grid-template-columns: 1fr;
}

/* inputs */
.quote-form input,
.quote-form select {
    width: 100%;
    padding: 14px 14px;
    border: 1px solid #ddd;
    font-size: 14px;
    outline: none;
}

.quote-form input:focus,
.quote-form select:focus {
    border-color: var(--secondary);
}

/* dimensions row */
.dimensions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-top: 16px;
}

/* options */
.form-options {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin: 18px 0 26px;
    font-size: 14px;
    color: var(--dark-text);
}

.form-options label {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* submit */
.quote-form button {
    width: 100%;
    padding: 16px;
    border: none;
    background: var(--primary);
    color: var(--white);
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    text-transform: uppercase;
}

.quote-form button:hover {
    background: var(--secondary);
}

/* ================= RESPONSIVE ================= */

@media (max-width: 980px) {
    .quote-container {
        grid-template-columns: 1fr;
    }

    .quote-info h2 {
        font-size: 44px;
    }
}

@media (max-width: 520px) {
    .quote-info h2 {
        font-size: 36px;
    }

    .dimensions {
        grid-template-columns: repeat(2, 1fr);
    }
}




/* =========================================
   QUOTE HERO (scoped to .quote-hero only)
   Built to match your Services hero layout
   Will NOT collide with other quote.css code
========================================= */

.quote-hero{
  position: relative;

  

  /* Background image (replace anytime) */
background-image: url("https://images.unsplash.com/photo-1578575437130-527eed3abbec?auto=format&fit=crop&w=2000&q=80");

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* Height/spacing similar to your Services hero */
  padding: 110px 0 95px;
  text-align: center;
  color: var(--white);
  overflow: hidden;
}

/* Overlay (same feel as services hero) */
.quote-hero__overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.65);
  /* Optional: slight brand tint, comment out if you want pure black */
  /* background: linear-gradient(90deg, rgba(0,0,0,.55), rgba(28,88,141,.30)); */
  z-index: 0;
}

.quote-hero__content{
  position: relative;
  z-index: 1;
  max-width: 900px;
}

.quote-hero__content h1{
  margin: 0 0 14px;
  font-size: clamp(38px, 5vw, 64px);
  font-weight: 800;
  letter-spacing: .2px;
}

.quote-hero__content p{
  margin: 0 auto;
  max-width: 760px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--muted);
}

/* Responsive */
@media (max-width: 768px){
  .quote-hero{
    padding: 90px 0 75px;
    margin-top: 14px;
  }
  .quote-hero__content h1{
    font-size: clamp(30px, 8vw, 44px);
  }
}




/* =========================================
   QUOTE NEXT SECTION (scoped)
   Matches Services look, uses your colors
========================================= */

.quote-next{
  padding: 60px 0 30px;
  background: #f7fbff; /* subtle blue-tint background */
}

.quote-next__head{
  text-align: center;
  max-width: 850px;
  margin: 0 auto 26px;
}

.quote-next__kicker{
  display: inline-block;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: .3px;
  margin-bottom: 10px;
  position: relative;
  padding-left: 58px;
}

.quote-next__kicker::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width: 46px;
  height: 2px;
  transform: translateY(-50%);
  background: rgba(255,255,255,.35);
  background: color-mix(in srgb, var(--primary) 70%, #ffffff 30%);
  border-radius: 2px;
}

.quote-next__head h2{
  margin: 0 0 10px;
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 800;
  color: var(--dark-text);
}

.quote-next__head h2 span{
  color: var(--primary);
}

.quote-next__head p{
  margin: 0 auto;
  max-width: 760px;
  color: rgba(31,41,51,.75);
  line-height: 1.7;
}

.quote-next__grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 16px;
  margin-top: 18px;
}

.quote-next__card{
  background: var(--white);
  border: 1px solid rgba(28,88,141,.12);
  border-radius: 16px;
  padding: 18px;
  transition: transform .2s ease, border-color .2s ease;
}

.quote-next__icon{
  width: 54px;
  height: 54px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(28,88,141,.10);
  border: 1px solid rgba(28,88,141,.14);
  margin-bottom: 12px;
  color: var(--primary);
  font-size: 20px;
}

.quote-next__card h4{
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 800;
  color: var(--dark-text);
}

.quote-next__card p{
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(31,41,51,.72);
}

.quote-next__card:hover{
  transform: translateY(-3px);
  border-color: rgba(28,88,141,.25);
}

/* Responsive */
@media (max-width: 1000px){
  .quote-next__grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  .quote-next{ padding: 48px 0 20px; }
  .quote-next__grid{ grid-template-columns: 1fr; }
}


/* =========================================
   QUOTE PROCESS SECTION (scoped)
========================================= */

.quote-process{
  padding: 55px 0 65px;
  background: var(--white);
}

.quote-process__head{
  text-align:center;
  max-width: 880px;
  margin: 0 auto 26px;
}

.quote-process__kicker{
  display:inline-block;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: .3px;
  margin-bottom: 10px;
  position: relative;
  padding-left: 58px;
}

.quote-process__kicker::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:46px;
  height:2px;
  transform: translateY(-50%);
  background: color-mix(in srgb, var(--primary) 70%, #ffffff 30%);
  border-radius: 2px;
}

.quote-process__head h2{
  margin: 0 0 10px;
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 800;
  color: var(--dark-text);
}

.quote-process__head h2 span{
  color: var(--primary);
}

.quote-process__head p{
  margin: 0 auto;
  max-width: 760px;
  color: rgba(31,41,51,.75);
  line-height: 1.7;
}

/* Steps grid */
.quote-process__grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 16px;
  margin-top: 18px;
}

.quote-step{
  border: 1px solid rgba(28,88,141,.12);
  border-radius: 16px;
  padding: 18px;
  background: #f7fbff;
  transition: transform .2s ease, border-color .2s ease;
  position: relative;
  overflow:hidden;
}

/* subtle top glow */
.quote-step::before{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(260px 120px at 15% 0%, rgba(30,144,255,.16), transparent 60%);
  pointer-events:none;
}

.quote-step__num{
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  font-weight: 900;
  color: var(--white);
  background: var(--primary);
  border: 1px solid rgba(28,88,141,.25);
  margin-bottom: 12px;
  position: relative;
  z-index: 1;
}

.quote-step h4{
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 800;
  color: var(--dark-text);
  position: relative;
  z-index: 1;
}

.quote-step p{
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(31,41,51,.72);
  position: relative;
  z-index: 1;
}

.quote-step:hover{
  transform: translateY(-3px);
  border-color: rgba(28,88,141,.25);
}

/* Responsive */
@media (max-width: 1000px){
  .quote-process__grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  .quote-process{ padding: 45px 0 55px; }
  .quote-process__grid{ grid-template-columns: 1fr; }
}



/* =========================================
   QUOTE FORM SECTION (FINAL)
========================================= */

.quote-form-section{
  padding: 70px 0 90px;
  background: #f7fbff;
}

.quote-form-head{
  text-align: center;
  max-width: 900px;
  margin: 0 auto 30px;
}

.quote-form-kicker{
  display: inline-block;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: .3px;
  margin-bottom: 10px;
}

.quote-form-head h2{
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 800;
  color: var(--dark-text);
  margin-bottom: 10px;
}

.quote-form-head h2 span{
  color: var(--primary);
}

.quote-form-head p{
  color: rgba(31,41,51,.75);
  line-height: 1.7;
}

/* Alerts */
.quote-alert{
  max-width: 900px;
  margin: 0 auto 20px;
  padding: 14px;
  border-radius: 10px;
  font-weight: 600;
}

.quote-alert.error{
  background: #fdecea;
  color: #b42318;
}

.quote-alert.success{
  background: #ecfdf3;
  color: #027a48;
}

/* Form */
.quote-form{
  max-width: 900px;
  margin: 0 auto;
  background: var(--white);
  border: 1px solid rgba(28,88,141,.15);
  border-radius: 16px;
  padding: 28px;
}

.quote-grid{
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 16px;
  margin-bottom: 16px;
}

.field label{
  display: block;
  margin-bottom: 6px;
  font-weight: 700;
  font-size: 14px;
  color: var(--dark-text);
}

.field input,
.field select,
.field textarea{
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(28,88,141,.25);
  font-size: 14px;
}

.field textarea{
  min-height: 120px;
  resize: vertical;
}

.quote-options{
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin: 18px 0;
}

.quote-options label{
  font-weight: 600;
  color: var(--dark-text);
}

.quote-options input{
  margin-right: 6px;
}

.quote-submit{
  width: 100%;
  margin-top: 10px;
  padding: 16px;
  border-radius: 12px;
  border: none;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  color: var(--white);
  background: linear-gradient(90deg, var(--primary), var(--secondary));
}

/* Responsive */
@media (max-width: 768px){
  .quote-grid{ grid-template-columns: 1fr; }
  .quote-form{ padding: 20px; }
}