/* ============================================================
   Modern Care Works, site layout (moderncareworks.com)
   Page-local layout shared across the four pages. All brand
   styling (colors, type, components) lives in brand.css; this
   file only arranges those pieces. Load AFTER brand.css.
   ============================================================ */

/* ---- Header / top nav (shared across pages) ---- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  background: rgba(249,249,246,.9); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--mcw-hairline);
}
.topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--mcw-s4); padding-block: var(--mcw-s3); }
.topbar__brand { display: inline-flex; align-items: center; }
.topbar__brand img { height: 70px; width: auto; display: block; }
.topbar nav { display: flex; align-items: center; gap: var(--mcw-s5); }
.topbar nav a { font-family: var(--mcw-font-head); font-weight: 600; font-size: .875rem; color: var(--mcw-gray); text-decoration: none; }
.topbar nav a:hover { color: var(--mcw-slate); }
.topbar nav a[aria-current="page"] { color: var(--mcw-slate); }
.topbar nav a.mcw-btn { color: var(--mcw-white); }

/* ---- Hero ---- */
.hero { padding-block: var(--mcw-s9) var(--mcw-s8); position: relative; overflow: hidden; }
.hero__mark { position: absolute; right: -80px; top: -40px; width: 460px; opacity: .05; pointer-events: none; }
.hero__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--mcw-s8); align-items: center; }
.hero p.mcw-subtitle { margin-top: var(--mcw-s5); }
.hero__cta { display: flex; gap: var(--mcw-s3); margin-top: var(--mcw-s6); flex-wrap: wrap; }
.hero__aside { font-family: var(--mcw-font-head); font-weight: 600; color: var(--mcw-slate); font-size: 1.2rem; line-height: 1.45; margin: 0; }

/* ---- Generic section rhythm ---- */
section { padding-block: var(--mcw-s8); }
.section-head { max-width: 60ch; margin-bottom: var(--mcw-s7); }
.band { background: var(--mcw-white); border-block: 1px solid var(--mcw-hairline); }

/* ---- Numbered / labelled steps ---- */
.steps { grid-template-columns: repeat(3, 1fr); }
.step { padding: var(--mcw-s5); }
.step__n { font-family: var(--mcw-font-head); font-weight: 700; font-size: .8125rem; letter-spacing: .12em; color: var(--mcw-gold); margin: 0 0 var(--mcw-s2); }
.step__n::before { content: ""; display: inline-block; width: 22px; height: 2px; background: var(--mcw-gold); vertical-align: middle; margin-right: 8px; }

/* ---- Simple feature cards ---- */
.cards-3 { grid-template-columns: repeat(3, 1fr); }
.cards-2 { grid-template-columns: repeat(2, 1fr); }
.feature { padding: var(--mcw-s5); }
.feature h3 { margin-bottom: var(--mcw-s2); }
.feature p { margin: 0; }

/* ---- Five-pillar illustrative panel ---- */
.pillars-layout { display: grid; grid-template-columns: 1fr 1fr; gap: var(--mcw-s8); align-items: center; }
.pillar-defs { display: grid; gap: var(--mcw-s4); }
.pillar-def { display: grid; grid-template-columns: auto 1fr; gap: var(--mcw-s4); }
.pillar-def b { font-family: var(--mcw-font-head); color: var(--mcw-slate); }
.pillar-def .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--mcw-slate); margin-top: 7px; }
.scorecard { padding: var(--mcw-s6); }
.scorecard__head { display: flex; align-items: center; justify-content: space-between; gap: var(--mcw-s4); margin-bottom: var(--mcw-s5); }

/* ---- Roles / sign-off ---- */
.role { padding: var(--mcw-s5); }
.role__tag { font-family: var(--mcw-font-head); font-weight: 700; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mcw-gold); margin: 0 0 var(--mcw-s2); }

/* ---- Closing CTA band ---- */
.cta-final { text-align: center; }
.cta-final .mcw-title { margin-inline: auto; max-width: 20ch; }
.cta-final .mcw-subtitle { margin-inline: auto; }

/* ---- Contact form ---- */
.contact-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--mcw-s8); align-items: start; }
.form { display: grid; gap: var(--mcw-s5); }
.field { display: grid; gap: var(--mcw-s2); }
.field label { font-family: var(--mcw-font-head); font-weight: 600; font-size: .875rem; color: var(--mcw-slate); }
.field input, .field textarea {
  font-family: var(--mcw-font-body); font-size: 1rem; color: var(--mcw-ink);
  background: var(--mcw-white); border: 1px solid var(--mcw-hairline);
  border-radius: var(--mcw-radius-sm); padding: 12px 14px; width: 100%; min-height: 44px;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible { border-color: var(--mcw-slate-200); }
.form__note { font-size: .8125rem; color: var(--mcw-gray); margin: 0; }

/* ---- Footer (gold top rule via .mcw-footer) ---- */
.pagefoot { padding-block: var(--mcw-s6); }
.pagefoot__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--mcw-s4); flex-wrap: wrap; }
.pagefoot__inner img { height: 26px; width: auto; }
.pagefoot__meta { color: var(--mcw-gray); }
.pagefoot__meta a { color: var(--mcw-gray); }

@media (max-width: 820px) {
  .hero__grid, .pillars-layout, .contact-grid { grid-template-columns: 1fr; gap: var(--mcw-s6); }
  .steps, .cards-3, .cards-2 { grid-template-columns: 1fr; }
  .topbar nav { gap: var(--mcw-s4); }
  .topbar nav a:not(.mcw-btn) { display: none; }
}

/* Phone widths: the full 2x lockup crowds the Request-a-demo CTA, so size
   the logo as large as cleanly fits beside it while keeping a comfortable gap. */
@media (max-width: 480px) {
  .topbar__brand img { height: 56px; }
}