/* ==========================================================================
   Empire Residential Solutions Inc.
   Design system — navy & gold, carried over from the V9 agent email so the
   email and the site read as one brand.

   Headlines are Georgia at REGULAR weight, not bold. That restraint is what
   makes the email look considered instead of loud; keep it here.
   ========================================================================== */

:root {
  /* Brand */
  --navy:        #1C2432;
  --navy-deep:   #141A24;
  --navy-line:   #2C3646;
  --gold:        #C79C39;
  --gold-deep:   #7B5C18;   /* eyebrow labels on light backgrounds */
  --gold-soft:   #E0C176;
  --cream:       #F6EEDB;
  --page:        #E7EBF0;

  /* Text */
  --ink:         #252525;
  --ink-soft:    #57544C;
  --on-navy:     #E7E2D8;
  --on-navy-dim: #A9B2C0;

  /* Type */
  --serif: Georgia, "Times New Roman", Times, serif;
  --sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, Helvetica, sans-serif;

  /* Rhythm */
  --wrap:    1120px;
  --wrap-sm: 760px;
  --gutter:  24px;
  --section: 88px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: #FFFFFF;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; border: 0; display: block; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: normal;      /* deliberate — see note above */
  margin: 0 0 .5em;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 1.25rem + 1.7vw, 2.5rem); }
h3 { font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem); }

p  { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--gold-deep); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--navy); }

/* Keyboard users must be able to see where they are. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

.skip-link {
  position: absolute; left: -9999px;
  background: var(--gold); color: var(--navy);
  padding: 12px 20px; z-index: 200; font-weight: 700;
}
.skip-link:focus { left: 16px; top: 16px; }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.wrap--narrow { max-width: var(--wrap-sm); }

.section { padding: var(--section) 0; }
.section--tight { padding: 56px 0; }

.section--navy  { background: var(--navy); color: var(--on-navy); }
.section--cream { background: var(--cream); }
.section--page  { background: var(--page); }

.section--navy h1, .section--navy h2, .section--navy h3,
.hero h1, .hero h2, .hero h3 { color: var(--gold); }
.section--navy a, .hero a { color: var(--gold); }
.section--navy a:hover, .hero a:hover { color: #FFFFFF; }

/* Buttons keep their own colours inside navy sections. Without this the
   `.section--navy a` rule above out-ranks `.btn` and paints gold text onto a
   gold button. */
.section--navy .btn, .hero .btn { color: var(--navy); }
.section--navy .btn:hover, .hero .btn:hover { color: var(--navy); }
.section--navy .btn--ghost, .hero .btn--ghost { color: var(--gold); }
.section--navy .btn--ghost:hover, .hero .btn--ghost:hover { color: var(--navy); }

/* ---------- Eyebrow ---------- */
.eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0 0 12px;
}
.section--navy .eyebrow, .hero .eyebrow { color: var(--gold); }

.lede { font-size: 1.15rem; line-height: 1.6; color: var(--ink-soft); }
.section--navy .lede, .hero .lede { color: var(--on-navy); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  background: var(--gold);
  color: var(--navy);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .2px;
  line-height: 1;
  padding: 17px 30px;
  border: 1px solid var(--gold);
  border-radius: 3px;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.btn:hover { background: var(--gold-soft); color: var(--navy); }

.btn--ghost { background: transparent; color: var(--gold); }
.btn--ghost:hover { background: var(--gold); color: var(--navy); }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 28px; }
.btn-note { font-size: 14px; color: var(--on-navy-dim); }

/* ---------- Header ---------- */
.site-header {
  background: var(--navy);
  border-bottom: 1px solid var(--navy-line);
  position: sticky; top: 0; z-index: 100;
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding-top: 14px; padding-bottom: 14px;
}

.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.brand__mark { width: 62px; flex: none; }
.brand__text { display: block; }
.brand__name {
  font-family: var(--serif); font-size: 23px; line-height: 1.05;
  letter-spacing: 1.5px; color: var(--gold); display: block;
}
.brand__sub {
  font-size: 9.5px; letter-spacing: 1.3px; text-transform: uppercase;
  color: var(--gold); opacity: .85; display: block; margin-top: 3px;
}

.nav { display: flex; align-items: center; gap: 30px; }
.nav a {
  color: var(--on-navy); text-decoration: none;
  font-size: 15px; letter-spacing: .2px; white-space: nowrap;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--gold); }
.nav .btn { color: var(--navy); }

.nav-toggle {
  display: none; background: none; border: 1px solid var(--navy-line);
  border-radius: 3px; color: var(--gold); padding: 9px 12px; cursor: pointer;
}

/* ---------- Hero ---------- */
.hero { background: var(--navy); color: var(--on-navy); overflow: hidden; }
.hero__grid {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: 56px; align-items: center;
  /* Horizontal padding must stay var(--gutter): this element is also .wrap,
     and a `padding: X 0 Y` shorthand here silently zeroes the page gutter. */
  padding: 84px var(--gutter) 92px;
}
.hero h1 { color: var(--gold); margin-bottom: 20px; }
.hero__art { position: relative; }
.hero__art img { width: 100%; border-radius: 2px; }
/* Fades the photo into the navy so it sits in the page instead of on it. */
.hero__art::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--navy) 0%, rgba(28,36,50,.55) 22%, rgba(28,36,50,0) 62%);
  pointer-events: none;
}

/* ---------- Credibility bar ---------- */
.proof { background: var(--navy-deep); border-top: 1px solid var(--navy-line); }
.proof__grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 32px; padding: 34px var(--gutter);
}
.proof__item { text-align: center; }
.proof__num {
  font-family: var(--serif); font-size: 30px; line-height: 1.1; color: var(--gold);
}
.proof__label {
  font-size: 11px; letter-spacing: 1.3px; text-transform: uppercase;
  color: var(--on-navy-dim); margin-top: 7px;
}

/* ---------- Cards ---------- */
.grid { display: grid; gap: 28px; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }

.card {
  background: #FFFFFF;
  border: 1px solid #DFE3EA;
  border-top: 3px solid var(--gold);
  padding: 32px 28px;
}
.card h3 { color: var(--navy); }
.card p:last-child { margin-bottom: 0; }

.section--cream .card { border-color: #E4D9BE; border-top-color: var(--gold); }

/* ---------- Numbered steps ---------- */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.steps li {
  counter-increment: step;
  display: grid; grid-template-columns: 44px 1fr; gap: 16px;
  padding: 18px 0; border-bottom: 1px solid rgba(123,92,24,.18);
}
.steps li:last-child { border-bottom: 0; }
.steps li::before {
  content: "0" counter(step);
  grid-column: 1; grid-row: 1 / span 2;
  font-size: 13px; font-weight: 700; letter-spacing: 1px;
  color: var(--gold-deep); padding-top: 4px;
}
.steps h3 { grid-column: 2; grid-row: 1; margin-bottom: 4px; font-size: 1.15rem; }
.steps p  { grid-column: 2; grid-row: 2; margin: 0; color: var(--ink-soft); font-size: .97rem; }

/* ---------- Split ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.split--top { align-items: start; }

/* ---------- Contact ---------- */
.contact-list { list-style: none; margin: 0; padding: 0; }
.contact-list li { padding: 14px 0; border-bottom: 1px solid var(--navy-line); }
.contact-list li:last-child { border-bottom: 0; }
.contact-list .label {
  display: block; font-size: 11px; letter-spacing: 1.3px;
  text-transform: uppercase; color: var(--on-navy-dim); margin-bottom: 4px;
}
.contact-list a, .contact-list span.value { font-size: 1.05rem; color: var(--gold); }

.form-field { margin-bottom: 18px; }
.form-field label {
  display: block; font-size: 13px; font-weight: 700;
  letter-spacing: .4px; margin-bottom: 6px; color: var(--navy);
}
.form-field input, .form-field select, .form-field textarea {
  width: 100%; padding: 13px 14px;
  border: 1px solid #C9CFDA; border-radius: 3px;
  font-family: var(--sans); font-size: 16px; color: var(--ink); background: #FFF;
}
.form-field textarea { min-height: 130px; resize: vertical; }
.form-hint { font-size: 13px; color: var(--ink-soft); margin-top: 6px; }

.notice {
  background: var(--cream); border-left: 3px solid var(--gold);
  padding: 18px 22px; font-size: .95rem; color: var(--ink-soft);
}
.notice--error {
  background: #FBEAEA; border-left-color: #A32020; color: #6B1616;
}
.notice--error a { color: #6B1616; }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy); color: var(--on-navy-dim); font-size: 14px; }
.site-footer__top { padding: 56px var(--gutter) 40px; }
.site-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
.site-footer h2 {
  font-family: var(--sans); font-size: 11px; font-weight: 700;
  letter-spacing: 1.4px; text-transform: uppercase; color: var(--gold);
  margin: 0 0 14px;
}
.site-footer a { color: var(--on-navy); text-decoration: none; }
.site-footer a:hover { color: var(--gold); text-decoration: underline; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 9px; }

.legal {
  border-top: 1px solid var(--navy-line);
  padding: 30px var(--gutter) 44px;
  font-size: 12.5px; line-height: 1.7; color: #8E97A6;
}
.legal p { margin: 0 0 12px; }
.legal strong { color: var(--on-navy); }
.legal a { color: #8E97A6; text-decoration: underline; }
.legal a:hover { color: var(--gold); }

.eho { display: flex; align-items: flex-start; gap: 12px; }
.eho svg { flex: none; margin-top: 2px; }

/* ---------- Legal document pages ---------- */
.doc { max-width: 760px; }
.doc h2 { margin-top: 2.2em; font-size: 1.6rem; color: var(--navy); }
.doc h2:first-of-type { margin-top: 0; }
.doc h3 { margin-top: 1.6em; font-size: 1.15rem; color: var(--navy); }
.doc ul { padding-left: 1.2em; }
.doc li { margin-bottom: .5em; }
.doc__updated { font-size: 14px; color: var(--ink-soft); margin-bottom: 2.5em; }

/* ---------- Component modifiers ---------- */

/* Intro block that sits above a card grid. */
.section-intro { max-width: var(--wrap-sm); margin: 0 0 48px; }

/* Slightly shorter hero, for interior pages. */
.hero__grid--compact { padding: 70px var(--gutter) 74px; }

/* A card sitting on a navy section rather than a light one. */
.card--on-navy { background: transparent; border-color: var(--navy-line); }
.card--on-navy h3 { color: var(--gold); }
.card--on-navy p  { color: var(--on-navy); }

/* Numbered steps on a navy background. */
.steps--on-navy li    { border-bottom-color: var(--navy-line); }
.steps--on-navy li::before { color: var(--gold); }
.steps--on-navy h3    { color: var(--on-navy); }
.steps--on-navy p     { color: var(--on-navy-dim); }

.btn-row--center { justify-content: center; }

/* Ghost button on a LIGHT background — the default ghost assumes navy. */
.btn--ghost-dark { color: var(--gold-deep); border-color: var(--gold-deep); }
.btn--ghost-dark:hover { background: var(--gold-deep); color: #FFFFFF; }

.panel { padding: 38px 34px; }
.panel h2 { font-size: 1.6rem; margin-bottom: 20px; }

.logo-lg { width: 100%; max-width: 360px; margin: 0 auto; }
/* `width: 100%` is load-bearing: a bare `max-width: 360px` out-ranks the global
   `img { max-width: 100% }` and pushes the page wider than a 320px phone. */

.note-dim { margin-top: 18px; font-size: 14px; color: var(--on-navy-dim); }

.person-role {
  font-size: 13px; font-weight: 700; letter-spacing: .3px;
  color: var(--gold-deep); margin-bottom: .8em;
}

.value--plain { color: var(--on-navy); font-size: 1rem; }

/* ---------- Utilities ---------- */
.center { text-align: center; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.mt-0  { margin-top: 0; }
.mt-16 { margin-top: 16px; }
.mt-20 { margin-top: 20px; }
.mt-22 { margin-top: 22px; }
.mt-24 { margin-top: 24px; }
.mt-28 { margin-top: 28px; }
.mt-34 { margin-top: 34px; }

.mb-6  { margin-bottom: 6px; }
.mb-10 { margin-bottom: 10px; }
.mb-14 { margin-bottom: 14px; }
.mb-24 { margin-bottom: 24px; }
.mb-26 { margin-bottom: 26px; }
.mb-42 { margin-bottom: 42px; }
.mb-44 { margin-bottom: 44px; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 900px) {
  :root { --section: 64px; }

  .nav-toggle { display: block; }
  .nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--navy); border-bottom: 1px solid var(--navy-line);
    padding: 8px var(--gutter) 22px;
  }
  .nav[data-open="true"] { display: flex; }
  .nav a { padding: 14px 0; border-bottom: 1px solid var(--navy-line); }
  .nav .btn { margin-top: 16px; text-align: center; border-bottom: 0; }

  .hero__grid { grid-template-columns: 1fr; gap: 36px; padding: 56px var(--gutter) 64px; }
  .hero__art { order: -1; }
  .hero__art::after {
    background: linear-gradient(180deg, rgba(28,36,50,.35) 0%, rgba(28,36,50,0) 45%);
  }

  .proof__grid { grid-template-columns: repeat(2, 1fr); gap: 26px; }
  .grid--3, .grid--2 { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; gap: 36px; }
  .site-footer__grid { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 480px) {
  body { font-size: 16px; }
  .brand__mark { width: 50px; }
  .brand__name { font-size: 19px; }
  .brand__sub  { font-size: 8.5px; letter-spacing: 1px; }
  .proof__grid { grid-template-columns: 1fr; gap: 20px; }
  .btn { display: block; text-align: center; }
  .btn-row { flex-direction: column; align-items: stretch; }
}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

/* ---------- Print ---------- */
@media print {
  .site-header, .nav, .btn, .hero__art { display: none; }
  body { font-size: 11pt; color: #000; }
  .section { padding: 12pt 0; }
  .section--navy, .section--cream, .section--page { background: #FFF !important; color: #000 !important; }
  .section--navy h1, .section--navy h2, .section--navy h3 { color: #000 !important; }
}