/* ============================================================
   TOM MACKROLA HOMES — shared brand system
   Single source of truth for brand tokens + repeated primitives.
   Link this in <head> BEFORE any page's own <style> so page-level
   rules can still override where a page needs something bespoke.

   Brand (locked): red #D71920 (accent only, never a field color),
   ink #0D0D0D, white, Montserrat, roofline SVG mark.
   Delta Realty, Corp. — 4949 W. 95th St., Oak Lawn, IL 60453 —
   IL Lic. #478008353. Service area: Chicagoland.
   ============================================================ */

:root{
  --red:#D71920;
  --red-700:#A5131A;
  --ink:#0D0D0D;
  --white:#FFFFFF;
  --paper:#FFFFFF;
  --surface:#F6F5F4;
  --border:#E3E0DD;
  --muted:#6B6660;
  --ok:#2F6B3A;
  --calm:#1f4e5f;
}

/* ---- base reset ---- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Montserrat',system-ui,sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
button,input,select,textarea{font-family:inherit}
:focus-visible{outline:2px solid var(--red);outline-offset:2px}

/* ---- roofline signature (thin red gable rule) ---- */
.roofline{display:block;width:100%;height:14px}
.roofline path{fill:none;stroke:var(--red);stroke-width:3}

/* ---- logo lockup (canonical; see tmh-logo.html for full kit) ---- */
.tmh-logo{display:inline-flex;align-items:center;gap:14px;text-decoration:none}
.tmh-mark{width:56px;height:auto;flex:none}
.tmh-word{display:flex;flex-direction:column;gap:5px}
.tmh-name{font-weight:800;letter-spacing:.06em;line-height:1;color:var(--ink);font-size:26px;white-space:nowrap}
.tmh-name .r{color:var(--red)}
.tmh-tagline{display:flex;align-items:center;gap:8px}
.tmh-tagline .rule{height:1.5px;width:16px;background:var(--red);flex:none}
.tmh-tagline .words{font-weight:600;letter-spacing:.12em;font-size:10.5px;color:var(--ink)}
.tmh-tagline .words i{color:var(--red);font-style:normal;margin:0 5px}
/* on dark: wordmark goes white, red stays red */
.on-dark .tmh-name,.on-dark .tmh-tagline .words{color:#fff}

/* ---- primary button (solid red) + outline variant ---- */
.btn{
  font-family:inherit;font-size:15px;font-weight:700;
  color:#fff;background:var(--red);border:1px solid var(--red);
  border-radius:3px;padding:14px 22px;cursor:pointer;
  transition:background .15s,border-color .15s;
}
.btn:hover{background:var(--red-700);border-color:var(--red-700)}
.btn.outline{background:#fff;color:var(--red)}
.btn.outline:hover{background:var(--red);color:#fff}

/* ---- MRED / Fair Housing compliance footer ---- */
.compliance{background:var(--surface);border-top:3px solid var(--red);padding:28px 24px}
.compliance-in{max-width:1200px;margin:0 auto;font-size:.72rem;color:var(--muted);line-height:1.7}
.compliance-in strong{color:var(--ink);font-weight:600}
