/* Vertex Homes – Core30 pages
   Everything is scoped under .c30 and every class starts with c30-, so nothing here
   can affect the site's own header, footer, Bootstrap or style.css.
   Colours / fonts follow vertexhomes.com/css/style.css */

.c30 {
  --c30-bronze: #9a7156;
  --c30-navy: #262261;
  --c30-cream: #f7f2ed;
  --c30-header-bg: #ded6cf;
  --c30-text: #555;
  --c30-line: #9a71562e;
  --c30-shadow: 8px 6px 9px #7171712b;

  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.8;
  letter-spacing: 0.3px;
  color: var(--c30-text);
  background: var(--c30-cream);
}
.c30 *, .c30 *::before, .c30 *::after { box-sizing: border-box; }
.c30 img { max-width: 100%; height: auto; display: block; }
.c30 a { color: var(--c30-navy); text-decoration: none; }
.c30 a:hover { color: var(--c30-bronze); }

.c30-container { max-width: 1170px; margin: 0 auto; padding: 0 16px; }

/* ---------- Banner (sits under the site's fixed header) ---------- */
.c30 .c30-banner { background: var(--c30-header-bg); padding-top: 100px; }
.c30 .c30-banner img { width: 100%; max-width: 1345px; height: auto; margin: 0 auto; }

/* ---------- Breadcrumb + page heading ---------- */
.c30 .c30-breadcrumb { font-size: 12px; padding-top: 22px; color: #777; background: none; }
.c30 .c30-breadcrumb a { color: var(--c30-bronze); }
.c30 .c30-breadcrumb span { margin: 0 6px; }
.c30 h1.c30-heading {
  display: grid; grid-template-columns: minmax(20px, 1fr) auto minmax(20px, 1fr); align-items: center; gap: 20px;
  text-align: center; color: #111; font-family: inherit; font-size: 28px; font-weight: 400;
  text-transform: uppercase; line-height: 1.35; letter-spacing: 0.3px;
  margin: 26px 0 40px; padding: 0;
}
.c30 h1.c30-heading::before, .c30 h1.c30-heading::after { content: ""; border-top: 2px solid #111; }

/* ---------- Content ---------- */
.c30 .c30-layout { padding-bottom: 50px; }
.c30 .c30-content section { padding: 0 0 26px; margin: 0 0 30px; border-bottom: 1px solid var(--c30-line); }
.c30 .c30-content section:last-child { border-bottom: 0; }
.c30 .c30-content h2 { font-family: inherit; font-size: 19px; font-weight: 600; color: #222; text-transform: uppercase; letter-spacing: 0.5px; line-height: 1.4; margin: 0 0 14px; }
.c30 .c30-content h3 { font-family: inherit; font-size: 16px; font-weight: 600; color: var(--c30-bronze); line-height: 1.4; margin: 20px 0 6px; }
.c30 .c30-content p { font-size: 15px; margin: 0 0 14px; }
.c30 .c30-content a { color: var(--c30-navy); font-weight: 700; }
.c30 .c30-content a:hover { color: var(--c30-bronze); }
.c30 .c30-content ul { padding-left: 20px; margin: 0 0 14px; list-style: disc; }
.c30 .c30-content li { margin-bottom: 4px; }
.c30 .c30-content ul.c30-cols { columns: 2; column-gap: 30px; }
.c30 .c30-content figure { margin: 40px 0 20px; padding: 0; }
.c30 .c30-content figure img { width: 100%; box-shadow: var(--c30-shadow); }

/* FAQ */
.c30 .c30-faq .c30-item h3 { margin: 18px 0 6px; }

/* ---------- Responsive ---------- */
@media (max-width: 767px) {
  .c30 .c30-banner { padding-top: 80px; }
  .c30 h1.c30-heading { font-size: 20px; gap: 10px; }
  .c30 .c30-content ul.c30-cols { columns: 1; }
}