/* --------------------------------------------------------------
   0️⃣ Import the custom font you used before
   -------------------------------------------------------------- */
/* @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap');  */

/* --------------------------------------------------------------
   1️⃣ Global reset & basic typography
   -------------------------------------------------------------- */
html, body {
  margin: 0;
  padding: 0;
  font-family: sans-serif,arial;
  box-sizing: border-box;
}
*, *::before, *::after { box-sizing: inherit; }

/* --------------------------------------------------------------
   2️⃣ Wrapper – overall page max‑width (no side padding)
   -------------------------------------------------------------- */
.cw-wrapper {
  max-width: 1200px;
  margin: 0 auto;
}

/* --------------------------------------------------------------
   3️⃣ Header & redesign banner – full‑width, no side gaps
   -------------------------------------------------------------- */
header,
.redesign-banner {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  padding: 1em 0;
}
header { background:#222; color:#fff; text-align:center; }
.redesign-banner {
  background:#fdd835;
  color:#000;
  font-size:110%;
  text-align:center;
  font-weight:bold;
}

/* --------------------------------------------------------------
   4️⃣ Body typography – custom font
   -------------------------------------------------------------- */
body { font-family:sans-serif,'Montserrat'; background:#fff; color:#333; }

/* --------------------------------------------------------------
   5️⃣ Centered column (max‑width 720px)
   -------------------------------------------------------------- */
.boxed-section {
  max-width:720px;
  margin:0 auto;
  padding:0 1rem;
}

/* --------------------------------------------------------------
   6️⃣ Main content (inside the column)
   -------------------------------------------------------------- */
main { padding:2rem 0; }
.main-content { max-width:720px; margin:40px auto 0 auto; padding:0 1rem; }

/* --------------------------------------------------------------
   7️⃣ Text block – all left‑aligned inside the centered column
   -------------------------------------------------------------- */
.blurb {
  margin-bottom:2rem;
  text-align:left;
}
.blurb h2 {
  margin:0.5rem 0 0.7rem 0;
  font-size:1.8rem;
}
.bold-text {
  font-weight:bold;
  font-size:120%;
  margin-top:0;
}
.blurb p { line-height:1.6; margin-top:0.6rem; }
.space-bttm { margin-bottom:20px; }

/* --------------------------------------------------------------
   8️⃣ Images – responsive and centered
   -------------------------------------------------------------- */
img { max-width:100%; height:auto; display:block; margin:1em auto; }

/* --------------------------------------------------------------
   9️⃣ Footer (inside the column)
   -------------------------------------------------------------- */
.footer {
  background:#222;
  color:#fff;
  text-align:center;
  padding:1em;
  margin-top:2rem;
}

/* --------------------------------------------------------------
   10️⃣ Utility helpers
   -------------------------------------------------------------- */
.center-text { text-align:center; }

/* --------------------------------------------------------------
   11️⃣ Contact form – centered box, inputs fill the box
   -------------------------------------------------------------- */
form#consultForm {
  max-width:480px;          /* width of the form box */
  margin:0 auto;            /* centre the whole form */
}
.form-group { margin-bottom:1.2rem; }
.form-group label {
  display:block;
  margin-bottom:0.4rem;
  font-weight:600;
  color:#555;
}
.form-group input,
.form-group textarea {
  width:100%;
  padding:0.6rem 0.8rem;
  border:1px solid #ccc;
  border-radius:4px;
  font-family:inherit;
  font-size:1rem;
  background:#fafafa;
  transition:border-color .2s, box-shadow .2s;
}
.form-group input:focus,
.form-group textarea:focus {
  outline:none;
  border-color:#0066ff;
  box-shadow:0 0 4px rgba(0,102,255,.2);
}
button[type="submit"] {
  background:#0066ff;
  color:#fff;
  border:none;
  padding:0.8rem 1.5rem;
  font-size:1rem;
  border-radius:4px;
  cursor:pointer;
  transition:background .2s;
}
button[type="submit"]:hover { background:#004fcc; }

/* --------------------------------------------------------------
   12️⃣ Honeypot – invisible to humans
   -------------------------------------------------------------- */
.hp-field {
  position:absolute;
  left:-9999px;
  width:0;
  height:0;
  overflow:hidden;
}
.hp-field label {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
}

/* --------------------------------------------------------------
   13️⃣ Result messages
   -------------------------------------------------------------- */
.form-result.success { color:#0a7d00; }
.form-result.error   { color:#c00; }

/* --------------------------------------------------------------
   14️⃣ Responsive tweaks (mobile)
   -------------------------------------------------------------- */
@media (max-width:480px) {
  .cw-wrapper { padding:1rem 1.2rem; }
  h1 { font-size:1.8rem; }
  h2 { font-size:1.5rem; }
  form#consultForm { max-width:100%; padding:0 .5rem; }
}