/* ============================================================
   7256 S VERNON — Chicago Property Management & Multifamily
   Design tokens: brick masonry palette, architectural spec-sheet layout
   ============================================================ */

:root{
  --ink:        #1C1A17;
  --brick:      #8C3B2E;
  --brick-deep: #6E2E24;
  --limestone:  #D8D2C4;
  --mortar:     #F5F1E8;
  --patina:     #4E7268;
  --patina-deep:#3B5A52;
  --charcoal:   #55524A;
  --white:      #FFFDF9;
  --line:       rgba(28,26,23,0.14);

  --display: 'Fraunces', 'Georgia', serif;
  --body: 'IBM Plex Sans', -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', 'Courier New', monospace;

  --max: 1160px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--mortar);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img,svg{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
h1,h2,h3,h4{ font-family: var(--display); font-weight: 600; margin: 0 0 .5em; letter-spacing: -0.01em; }
p{ margin: 0 0 1em; color: var(--charcoal); }
.wrap{ max-width: var(--max); margin: 0 auto; padding: 0 32px; }

@media (max-width: 640px){
  .wrap{ padding: 0 20px; }
}

/* ---------- utility type ---------- */
.eyebrow{
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brick);
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before{
  content: "";
  width: 20px; height: 1px;
  background: var(--brick);
  display: inline-block;
}
.mono-label{
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--charcoal);
}

/* ---------- coursing divider (brick coursing motif) ---------- */
.coursing{
  height: 17px;
  width: 100%;
  background-image: repeating-linear-gradient(
    to right,
    var(--line) 0px, var(--line) 1px,
    transparent 1px, transparent 34px
  );
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.coursing.tight{ height: 9px; }

/* ---------- header ---------- */
.site-header{
  position: sticky; top:0; z-index: 50;
  background: var(--mortar);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height: 84px;
}
.brand{
  font-family: var(--mono);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.06em;
  display:flex; align-items:center; gap: 12px;
}
.brand .mark{
  width: 34px; height: 34px; flex: none;
}
.brand .addr-num{ color: var(--ink); }
.brand .addr-rest{ color: var(--charcoal); font-weight: 400; font-size: 10.5px; }

nav.primary-nav ul{
  list-style:none; display:flex; gap: 34px; margin:0; padding:0;
}
nav.primary-nav a{
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--charcoal);
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
nav.primary-nav a:hover,
nav.primary-nav a[aria-current="page"]{
  color: var(--brick);
  border-bottom-color: var(--brick);
}

.nav-toggle{ display:none; }

@media (max-width: 820px){
  nav.primary-nav ul{ display:none; }
  .nav-toggle{
    display:block; background:none; border:1px solid var(--line);
    font-family: var(--mono); font-size: 12px; letter-spacing:.08em;
    text-transform:uppercase; padding: 9px 14px; color: var(--ink);
    cursor:pointer;
  }
  nav.primary-nav.open ul{
    display:flex; flex-direction:column; gap: 0;
    position:absolute; top:84px; left:0; right:0;
    background: var(--mortar); border-bottom:1px solid var(--line);
    padding: 8px 20px 20px;
  }
  nav.primary-nav.open ul li{ border-top: 1px solid var(--line); }
  nav.primary-nav.open ul li a{ display:block; padding: 14px 0; }
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 15px 26px;
  border: 1px solid var(--ink);
  transition: background .15s ease, color .15s ease, border-color .15s ease;
  cursor: pointer;
}
.btn.primary{ background: var(--brick); border-color: var(--brick); color: var(--white); }
.btn.primary:hover{ background: var(--brick-deep); border-color: var(--brick-deep); }
.btn.ghost{ background: transparent; color: var(--ink); }
.btn.ghost:hover{ background: var(--ink); color: var(--white); }
.btn.on-dark{ border-color: var(--white); color: var(--white); }
.btn.on-dark:hover{ background: var(--white); color: var(--ink); }

/* ---------- hero ---------- */
.hero{ padding: 76px 0 64px; }
.hero .wrap{
  display:grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items:center;
}
.hero h1{
  font-size: clamp(34px, 4.6vw, 58px);
  line-height: 1.06;
  max-width: 12ch;
}
.hero .lede{ font-size: 18px; max-width: 46ch; }
.hero .cta-row{ display:flex; gap:14px; margin-top: 30px; flex-wrap: wrap; }
.hero .elevation{ justify-self: end; width: 100%; max-width: 380px; }

@media (max-width: 900px){
  .hero .wrap{ grid-template-columns: 1fr; }
  .hero .elevation{ justify-self: start; max-width: 280px; order: -1; }
}

/* ---------- page header (non-home) ---------- */
.page-hero{ padding: 56px 0 46px; }
.page-hero h1{ font-size: clamp(30px, 4vw, 46px); max-width: 18ch; }
.page-hero .lede{ font-size: 17px; max-width: 56ch; }
.page-hero .cta-row{ margin-top: 26px; }

/* ---------- section spacing ---------- */
section.block{ padding: 64px 0; }
section.block.tight{ padding: 46px 0; }
.section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap: 24px; margin-bottom: 40px; flex-wrap: wrap;}
.section-head h2{ font-size: clamp(24px, 3vw, 34px); margin:0; max-width: 20ch; }
.section-head .mono-label{ margin: 0; }

/* ---------- card grid ---------- */
.grid-3{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.grid-2{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.card{ background: var(--mortar); padding: 34px 30px; }
.card--framed{ border: 1px solid var(--line); background: var(--white); }
.card .num{ font-family: var(--mono); color: var(--brick); font-size: 13px; letter-spacing: .08em; }
.card h3{ font-size: 20px; margin: 14px 0 10px; }
.card p{ font-size: 15px; margin-bottom: 0; }
.card a.more{ display:inline-block; margin-top:16px; font-family: var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color: var(--patina); border-bottom:1px solid var(--patina); }

@media (max-width: 820px){
  .grid-3{ grid-template-columns: 1fr; }
  .grid-2{ grid-template-columns: 1fr; }
}

/* ---------- neighborhood strip ---------- */
.areas-eyebrow{ margin-bottom: 16px; }
.area-list{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap: 0;
  font-family: var(--mono); font-size: 14px; letter-spacing:.02em;
}
.area-list li{
  padding: 10px 20px 10px 0;
  border-right: 1px solid var(--line);
  margin-right: 20px;
}
.area-list li:last-child{ border-right:none; }

/* ---------- CTA band ---------- */
.cta-band{ background: var(--ink); color: var(--white); padding: 70px 0; }
.cta-band h2{ color: var(--white); font-size: clamp(26px,3.4vw,40px); max-width: 16ch; }
.cta-band p{ color: var(--limestone); max-width: 50ch; }
.cta-band .wrap{ display:flex; justify-content:space-between; align-items:center; gap: 30px; flex-wrap: wrap; }

/* ---------- footer ---------- */
footer.site-footer{ background: var(--limestone); padding: 56px 0 28px; }
.footer-grid{ display:grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 40px; }
.footer-grid h4{ font-family: var(--mono); font-size: 12px; letter-spacing:.1em; text-transform:uppercase; color: var(--charcoal); margin-bottom: 16px; }
.footer-grid .plaque{ font-family: var(--mono); font-size: 14px; line-height: 1.9; }
.footer-grid ul{ list-style:none; margin:0; padding:0; font-size: 14.5px; line-height: 2.1; }
.footer-grid ul a:hover{ color: var(--brick); }
.footer-bottom{
  border-top: 1px solid rgba(28,26,23,0.2); padding-top: 22px;
  display:flex; justify-content:space-between; flex-wrap: wrap; gap: 10px;
  font-family: var(--mono); font-size: 12px; letter-spacing:.04em; color: var(--charcoal);
}

@media (max-width: 780px){
  .footer-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px){
  .footer-grid{ grid-template-columns: 1fr; }
}

/* ---------- process / list ---------- */
.spec-list{ border-top: 1px solid var(--line); }
.spec-row{
  display:grid; grid-template-columns: 90px 1fr 2fr; gap: 24px;
  padding: 26px 0; border-bottom: 1px solid var(--line);
}
.spec-row .n{ font-family: var(--mono); color: var(--brick); font-size: 13px; padding-top:3px; }
.spec-row h3{ font-size: 19px; margin:0; }
.spec-row p{ margin:0; font-size: 15px; }
@media (max-width: 700px){
  .spec-row{ grid-template-columns: 40px 1fr; }
  .spec-row p{ grid-column: 2 / 3; }
}

/* ---------- steps (rentals process) ---------- */
.steps{ display:grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--line); border:1px solid var(--line); }
.step{ background: var(--mortar); padding: 28px 24px; }
.step .n{ font-family: var(--mono); font-size: 22px; color: var(--brick); }
.step h4{ font-size: 16px; margin: 10px 0 8px; font-family: var(--body); font-weight:600; }
.step p{ font-size: 14px; margin:0; }
@media (max-width: 820px){ .steps{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px){ .steps{ grid-template-columns: 1fr; } }

/* ---------- contact ---------- */
.contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 60px; }
.contact-card{ border: 1px solid var(--line); padding: 34px; background: var(--white); }
.contact-card .mono-label{ display:block; margin-bottom: 6px; }
.contact-card p{ margin-top: 6px; }
.contact-card .big-link{ font-family: var(--display); font-size: 26px; display:block; margin-bottom: 26px; }
.contact-card .big-link:hover{ color: var(--brick); }
@media (max-width: 900px){ .contact-grid{ grid-template-columns: 1fr; } }

.inquire-label{ margin-bottom: 18px; }
form.inquire{ display:flex; flex-direction:column; gap: 18px; }
form.inquire label{ font-family: var(--mono); font-size: 12px; letter-spacing:.08em; text-transform:uppercase; color: var(--charcoal); display:block; margin-bottom:8px; }
form.inquire input, form.inquire select, form.inquire textarea{
  width:100%; border: 1px solid var(--line); background: var(--white);
  padding: 13px 14px; font-family: var(--body); font-size: 15px; color: var(--ink);
}
form.inquire textarea{ min-height: 120px; resize: vertical; }
form.inquire input:focus, form.inquire select:focus, form.inquire textarea:focus{
  outline: 2px solid var(--patina); outline-offset: 1px;
}
form.inquire .btn.primary{ align-self: flex-start; }
form.inquire .form-hint{ font-size: 13px; margin-top: -6px; }
.visually-hidden{
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------- about page specifics ---------- */
.value-list{ display:grid; grid-template-columns: repeat(2,1fr); gap: 40px 50px; }
.value-list .v h3{ font-size: 18px; margin-bottom: 8px; }
.value-list .v .idx{ font-family: var(--mono); color: var(--brick); font-size:12px; }
@media (max-width: 700px){ .value-list{ grid-template-columns: 1fr; } }

/* ---------- accessibility ---------- */
a:focus-visible, button:focus-visible{ outline: 2px solid var(--patina); outline-offset: 3px; }

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