body{margin:0;font-family:Arial,Helvetica,sans-serif;background:#070707;color:white}nav{position:sticky;top:0;background:#000;padding:15px 6%;display:flex;justify-content:space-between;border-bottom:1px solid #333;z-index:10}nav a{color:white;margin-left:15px;text-decoration:none;font-weight:bold}.brand{font-weight:900}.brand span{color:#5b2d91}.hero{min-height:85vh;display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center;padding:60px 6%;background:radial-gradient(circle at 20% 0%,rgba(255,122,0,.22),transparent 30%),linear-gradient(180deg,#111,#050505)}.badge{display:inline-block;background:linear-gradient(90deg,#5b2d91,#8f5cff);color:#000;padding:10px 14px;border-radius:999px;font-weight:900}h1{font-size:clamp(3rem,7vw,6rem);line-height:.92;margin:20px 0;text-transform:uppercase}h1 span,h2{color:#8f5cff}.btn,button{display:inline-block;margin:8px 8px 0 0;padding:14px 18px;border-radius:12px;background:#1a1a1a;color:white;text-decoration:none;border:1px solid #444;font-weight:900}.btn.main,button{background:linear-gradient(135deg,#5b2d91,#8f5cff);color:#000;border:0}.logoBox{background:#151515;border:1px solid #333;border-radius:26px;padding:20px;text-align:center}.logoBox img{max-width:100%;border-radius:18px}section{padding:60px 6%;text-align:center}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;text-align:left}.grid.small{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}.card{background:linear-gradient(180deg,#1b1b1b,#090909);border:1px solid #333;border-radius:18px;padding:22px}.card b{display:inline-flex;align-items:center;justify-content:center;width:60px;height:60px;border-radius:15px;background:#111;border:1px solid #555;color:#8f5cff}p{color:#bbb;line-height:1.6}form{max-width:1000px;margin:auto;background:#151515;border:1px solid #333;border-radius:22px;padding:22px;display:grid;grid-template-columns:repeat(2,1fr);gap:15px}input,select,textarea{width:100%;padding:14px;border-radius:10px;border:1px solid #444;background:#080808;color:white;font-size:1rem}textarea{grid-column:1/-1;min-height:140px}button{grid-column:1/-1;font-size:1rem;cursor:pointer}footer{text-align:center;padding:40px 6%;background:#030303;border-top:1px solid #333}@media(max-width:850px){.hero,form{grid-template-columns:1fr}nav div:last-child{display:none}}
/* Better card alignment */
.grid {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.card {
  width: 100%;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

section {
  overflow-x: hidden;
}

.hero {
  max-width: 1400px;
  margin: 0 auto;
  padding-left: 40px;
  padding-right: 40px;
}

form {
  max-width: 900px;
}

/* Fix all content centering */
section {
  text-align: center;
}

.grid {
  max-width: 1100px;
  margin: 0 auto;
  justify-content: center;
  align-items: stretch;
}

.card {
  text-align: center;
  align-items: center;
  justify-content: center;
}

/* Quote + Review forms centered properly */
form {
  max-width: 850px !important;
  margin: 0 auto !important;
  grid-template-columns: 1fr !important;
  justify-content: center;
  align-items: center;
}

form input,
form select,
form textarea,
form button {
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
}

/* Prevent right leaning */
.hero,
.grid,
form {
  padding-left: 20px !important;
  padding-right: 20px !important;
  box-sizing: border-box;
}


/* FINAL FIX: remove bright blue links everywhere */
a,
a:visited,
a:hover,
a:active {
  color: inherit !important;
  text-decoration: none !important;
}

/* Keep nav links readable */
nav a,
nav a:visited,
nav a:hover,
nav a:active {
  color: #ffffff !important;
}

/* Make the opening contact badge black text, not blue */
.badge,
.badge a,
.badge a:visited {
  color: #000000 !important;
}

/* Align the actual card boxes centered on the page */
.grid {
  width: 100% !important;
  max-width: 1180px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  display: grid !important;
  justify-content: center !important;
  justify-items: center !important;
  align-items: stretch !important;
}

/* Make every box sit evenly in the grid */
.card {
  width: 100% !important;
  max-width: 350px !important;
  min-height: 210px !important;
  text-align: left !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
}

/* Smaller process boxes centered too */
.grid.small .card {
  max-width: 270px !important;
}

/* Keep service cards in a balanced centered row on desktop */
@media (min-width: 1000px) {
  .grid:not(.small) {
    grid-template-columns: repeat(3, minmax(0, 350px)) !important;
  }

  .grid.small {
    grid-template-columns: repeat(4, minmax(0, 270px)) !important;
  }
}

/* Tablet balance */
@media (max-width: 999px) and (min-width: 650px) {
  .grid:not(.small) {
    grid-template-columns: repeat(2, minmax(0, 350px)) !important;
  }

  .grid.small {
    grid-template-columns: repeat(2, minmax(0, 270px)) !important;
  }
}

/* Mobile centered boxes */
@media (max-width: 649px) {
  .grid,
  .grid.small {
    grid-template-columns: 1fr !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .card,
  .grid.small .card {
    max-width: 100% !important;
  }
}

/* Center the form containers themselves without forcing the words to the center */
form {
  width: calc(100% - 48px) !important;
  max-width: 900px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: left !important;
}

form input,
form select,
form textarea,
form button {
  max-width: 100% !important;
}


/* FINAL FORM CENTERING */
#quote form,
#reviews form {
  width: 100% !important;
  max-width: 760px !important;
  margin: 0 auto !important;
  padding: 28px !important;
  display: grid !important;
  justify-content: center !important;
  align-items: center !important;
}

/* Keep inputs centered inside the centered form box */
#quote form input,
#quote form select,
#quote form textarea,
#quote form button,
#reviews form input,
#reviews form select,
#reviews form textarea,
#reviews form button {
  width: 100% !important;
  max-width: 680px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Keep the whole sections centered as a block */
#quote,
#reviews {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}


/* PERFECT SYMMETRICAL FORM BOXES */
#quote form,
#reviews form {
  max-width: 760px !important;
  margin: 0 auto !important;
  padding: 30px !important;
}

/* Every input/select/textarea/button same exact width */
#quote form input,
#quote form select,
#quote form textarea,
#quote form button,
#reviews form input,
#reviews form select,
#reviews form textarea,
#reviews form button {
  width: 680px !important;
  min-width: 680px !important;
  max-width: 680px !important;
  margin: 0 auto !important;
  display: block !important;
  box-sizing: border-box !important;
}

/* Keep spacing uniform */
#quote form > *,
#reviews form > * {
  margin-top: 10px !important;
  margin-bottom: 10px !important;
}


/* SHORTER MATCHING FORM BOXES */
#quote form input,
#quote form select,
#quote form textarea,
#quote form button,
#reviews form input,
#reviews form select,
#reviews form textarea,
#reviews form button {
  width: 520px !important;
  min-width: 520px !important;
  max-width: 520px !important;
  margin: 0 auto !important;
  display: block !important;
  box-sizing: border-box !important;
}

/* Keep textarea slightly taller but same width */
#quote form textarea,
#reviews form textarea {
  min-height: 140px !important;
}


/* FINAL COMPACT FORM FIX - boxes stay clearly inside gray frame */

/* Make the gray frame wrap the smaller boxes neatly */
#quote form,
#reviews form {
  width: 620px !important;
  max-width: 620px !important;
  margin: 0 auto !important;
  padding: 28px !important;
  box-sizing: border-box !important;
  background: #151515 !important;
  border: 1px solid #333 !important;
}

/* Quote section: smaller two-column boxes inside frame */
#quote form {
  display: grid !important;
  grid-template-columns: 250px 250px !important;
  gap: 14px 18px !important;
  justify-content: center !important;
  align-items: start !important;
}

#quote form input,
#quote form select {
  width: 250px !important;
  min-width: 250px !important;
  max-width: 250px !important;
  margin: 0 !important;
  display: block !important;
  box-sizing: border-box !important;
}

/* File upload also stays short */
#quote form input[type="file"] {
  width: 250px !important;
}

/* Textarea stays inside the gray frame but not huge */
#quote form textarea {
  grid-column: 1 / -1 !important;
  width: 518px !important;
  min-width: 518px !important;
  max-width: 518px !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}

/* Quote button shorter and centered */
#quote form button {
  grid-column: 1 / -1 !important;
  width: 300px !important;
  min-width: 300px !important;
  max-width: 300px !important;
  margin: 4px auto 0 auto !important;
  display: block !important;
}

/* Review section: compact centered boxes inside frame */
#reviews form {
  display: grid !important;
  grid-template-columns: 360px !important;
  gap: 14px !important;
  justify-content: center !important;
  align-items: start !important;
}

#reviews form input,
#reviews form select,
#reviews form textarea,
#reviews form button {
  width: 360px !important;
  min-width: 360px !important;
  max-width: 360px !important;
  margin: 0 auto !important;
  display: block !important;
  box-sizing: border-box !important;
}

#reviews form textarea {
  min-height: 130px !important;
}

/* Mobile: keep everything inside screen */
@media (max-width: 700px) {
  #quote form,
  #reviews form {
    width: calc(100% - 34px) !important;
    max-width: calc(100% - 34px) !important;
    padding: 20px !important;
  }

  #quote form {
    grid-template-columns: 1fr !important;
  }

  #quote form input,
  #quote form select,
  #quote form textarea,
  #quote form button,
  #reviews form input,
  #reviews form select,
  #reviews form textarea,
  #reviews form button {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
}


/* MATCH REVIEW SECTION TO COMPACT QUOTE STYLE */
#reviews form {
  width: 620px !important;
  max-width: 620px !important;
  margin: 0 auto !important;
  padding: 28px !important;
  box-sizing: border-box !important;
  background: #151515 !important;
  border: 1px solid #333 !important;
  display: grid !important;
  grid-template-columns: 360px !important;
  gap: 14px !important;
  justify-content: center !important;
}

/* Shorter centered review inputs */
#reviews form input,
#reviews form select {
  width: 360px !important;
  min-width: 360px !important;
  max-width: 360px !important;
  margin: 0 auto !important;
  display: block !important;
  box-sizing: border-box !important;
}

/* Review textarea shorter and contained */
#reviews form textarea {
  width: 360px !important;
  min-width: 360px !important;
  max-width: 360px !important;
  min-height: 120px !important;
  margin: 0 auto !important;
  display: block !important;
  box-sizing: border-box !important;
}

/* Review button shorter too */
#reviews form button {
  width: 260px !important;
  min-width: 260px !important;
  max-width: 260px !important;
  margin: 4px auto 0 auto !important;
  display: block !important;
}

/* Mobile keep it clean */
@media (max-width: 700px) {
  #reviews form {
    width: calc(100% - 34px) !important;
    max-width: calc(100% - 34px) !important;
    grid-template-columns: 1fr !important;
  }

  #reviews form input,
  #reviews form select,
  #reviews form textarea,
  #reviews form button {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
}