/* ==========================================================================
   CONTACT PAGE
   Loads after typography.css. It only adds; it never re-declares the
   heading scale, the families, or the section backgrounds those sheets own.

   The page is in two halves. The hero, the contact cards and the lead form
   sit inside the .ssp container and use the service design tokens. The
   Services and Industries sections are lifted verbatim from the home page
   and sit OUTSIDE .ssp, so they inherit style.css untouched and render
   exactly as they do on the home page.
   ========================================================================== */

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */

.ssp .ct-hero {
  background: linear-gradient(180deg, #FFF7ED 0%, #FFFDF9 100%);
  padding: 64px 0 52px;
  border-bottom: 1px solid var(--line);
}
.ssp .ct-hero h1 { max-width: 740px; margin: 0; }
.ssp .ct-hero .lead { max-width: 660px; margin-top: 15px; }

.ssp .ct-quick { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 26px; }

.ssp .ct-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 18px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--line);
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
  transition: .2s ease;
}
.ssp .ct-chip:hover { border-color: #fed7aa; color: var(--orange); transform: translateY(-2px); }
.ssp .ct-chip svg { width: 16px; height: 16px; stroke: var(--orange); fill: none; stroke-width: 1.9; flex: 0 0 16px; }

/* --------------------------------------------------------------------------
   MAIN  -  contact cards beside the lead form
   White band, so it separates from the cream hero above and the cream
   Services section below.
   -------------------------------------------------------------------------- */

.ssp .ct-main { background: #fff; padding: 68px 0; }

.ssp .ct-grid {
  display: grid;
  grid-template-columns: 372px minmax(0, 1fr);
  gap: 44px;
  align-items: start;
}

.ssp .ct-cards { display: flex; flex-direction: column; gap: 14px; }

.ssp .ct-card {
  display: flex;
  gap: 15px;
  padding: 21px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--soft);
  transition: .22s ease;
}
.ssp .ct-card:hover { border-color: #fed7aa; transform: translateY(-3px); box-shadow: var(--shadow); }

.ssp .ct-ico {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: #FFF1E4;
  display: grid;
  place-items: center;
}
.ssp .ct-ico svg { width: 21px; height: 21px; stroke: var(--orange); fill: none; stroke-width: 1.8; }

.ssp .ct-card-txt { min-width: 0; }
.ssp .ct-card h3 { font-size: 13px; letter-spacing: 1.1px; text-transform: uppercase; color: var(--orange); margin: 2px 0 7px; }
.ssp .ct-card b { display: block; font-size: 16px; font-weight: 700; color: var(--navy); line-height: 1.4; word-break: break-word; }
.ssp .ct-card b a { color: var(--navy); }
.ssp .ct-card b a:hover { color: var(--orange); }
.ssp .ct-card p { font-size: 13px; line-height: 1.6; color: var(--muted); margin: 6px 0 0; }

/* Navy reassurance panel. Breaks the run of light cards. */
.ssp .ct-assure {
  padding: 24px 22px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 92% -14%, rgba(249,115,22,.24) 0%, rgba(249,115,22,0) 60%),
    var(--navy);
  color: #fff;
}
.ssp .ct-assure h3 { font-size: 12.5px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--orange); margin: 0 0 14px; }
.ssp .ct-assure ol { list-style: none; margin: 0; padding: 0; }
.ssp .ct-assure li {
  display: flex;
  gap: 12px;
  font-size: 13.5px;
  line-height: 1.6;
  color: #CBD5E1;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255,255,255,.09);
}
.ssp .ct-assure li:last-child { border-bottom: 0; }
.ssp .ct-assure li span {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: rgba(249,115,22,.18);
  color: var(--orange);
  font-size: 11.5px;
  font-weight: 800;
  display: grid;
  place-items: center;
}

/* --------------------------------------------------------------------------
   LEAD FORM
   Contact Form 7 output, restyled to the site.
   -------------------------------------------------------------------------- */

.ssp .ct-form-card {
  padding: 34px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: #fff;
  box-shadow: var(--shadow);
}
.ssp .ct-form-card h2 { font-size: 26px; line-height: 1.25; margin: 0; }
.ssp .ct-form-card .ct-sub { font-size: 14.5px; line-height: 1.65; color: var(--muted); margin: 11px 0 26px; }

.ssp .wpcf7 { margin: 0; }
.ssp .wpcf7 form.wpcf7-form { margin: 0; }
.ssp .wpcf7 .ct-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px; }
.ssp .wpcf7 .ct-f { margin: 0; min-width: 0; }
.ssp .wpcf7 .ct-f-wide { grid-column: 1 / -1; }

.ssp .wpcf7 .ct-f label {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .2px;
  color: var(--navy);
  margin-bottom: 7px;
}
.ssp .wpcf7 .ct-f label i { color: var(--orange); font-style: normal; }

.ssp .wpcf7 .wpcf7-form-control-wrap { display: block; }

.ssp .wpcf7 input[type="text"],
.ssp .wpcf7 input[type="email"],
.ssp .wpcf7 input[type="tel"],
.ssp .wpcf7 input[type="url"],
.ssp .wpcf7 select,
.ssp .wpcf7 textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  font-family: "Poppins", system-ui, -apple-system, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--navy);
  transition: border-color .18s ease, box-shadow .18s ease;
  -webkit-appearance: none;
  appearance: none;
}
.ssp .wpcf7 input::placeholder,
.ssp .wpcf7 textarea::placeholder { color: #9aa7b8; }

.ssp .wpcf7 input[type="text"]:focus,
.ssp .wpcf7 input[type="email"]:focus,
.ssp .wpcf7 input[type="tel"]:focus,
.ssp .wpcf7 input[type="url"]:focus,
.ssp .wpcf7 select:focus,
.ssp .wpcf7 textarea:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(249,115,22,.15);
}

.ssp .wpcf7 textarea { min-height: 116px; resize: vertical; }

/* The native select arrow is removed above, so draw one back in. */
.ssp .wpcf7 select {
  padding-right: 40px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%235b6b80%22%20stroke-width%3D%222%22%3E%3Cpath%20d%3D%22M6%209l6%206%206-6%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px 16px;
  cursor: pointer;
}

.ssp .wpcf7 .ct-submit { margin: 24px 0 0; }

.ssp .wpcf7 input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 15px 28px;
  border: 2px solid var(--orange);
  border-radius: 32px;
  background: var(--orange);
  font-family: "Poppins", system-ui, -apple-system, Arial, sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  transition: .2s ease;
}
.ssp .wpcf7 input[type="submit"]:hover { background: #e0630f; border-color: #e0630f; transform: translateY(-2px); }

.ssp .wpcf7 .ct-fine { font-size: 12.5px; line-height: 1.6; color: var(--muted); margin: 14px 0 0; text-align: center; }

/* Validation and response messages */
.ssp .wpcf7 .wpcf7-not-valid { border-color: #dc2626; }
.ssp .wpcf7 .wpcf7-not-valid-tip { font-size: 12px; font-weight: 600; color: #dc2626; margin-top: 6px; }
.ssp .wpcf7 .wpcf7-response-output {
  margin: 20px 0 0;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--orange);
  border-radius: 0 12px 12px 0;
  background: #FFF7ED;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--navy);
}
.ssp .wpcf7 form.sent .wpcf7-response-output { border-left-color: #16a34a; background: #F0FDF4; }
.ssp .wpcf7 form.invalid .wpcf7-response-output,
.ssp .wpcf7 form.unaccepted .wpcf7-response-output { border-left-color: #dc2626; background: #FEF2F2; }
.ssp .wpcf7 .wpcf7-spinner { margin: 12px auto 0; display: block; }

/* --------------------------------------------------------------------------
   THE TWO COPIED HOME SECTIONS
   Both inherit style.css, where .section carries no background of its own
   and therefore reads as cream. Stacked on this page they would be one
   flat slab, so Industries takes the second cream the home page already
   uses for its testimonials band. Nothing new is invented.
   -------------------------------------------------------------------------- */

.ss-contact #industries { background: var(--cream-2); }

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */

@media (max-width: 1040px) {
  .ssp .ct-grid { grid-template-columns: 1fr; gap: 34px; }
  .ssp .ct-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ssp .ct-assure { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .ssp .ct-hero { padding: 44px 0 38px; }
  .ssp .ct-main { padding: 48px 0; }
  .ssp .ct-cards { grid-template-columns: 1fr; }
  .ssp .ct-form-card { padding: 24px 20px; }
  .ssp .ct-form-card h2 { font-size: 23px; }
  .ssp .wpcf7 .ct-form-grid { grid-template-columns: 1fr; }
  .ssp .ct-chip { font-size: 13px; padding: 10px 15px; }
}