/* HDY REAL ESTATE, LLC — townhouse row elevation */

:root {
  --facade-cream: #F4EDE3;
  --doorway-brown: #4A3627;
  --brick-provencal: #A64432;
  --vine-green: #46803C;
  --cellar-slate: #26332B;
  --railing-iron: #7E858C;
  --terrace-cream: #EBE6D8;
  --cream-tint-deep: #E7DFD0;
  --cream-ink: #F6F1E7;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-size: 16px;
  font-family: Georgia, "Times New Roman", serif;
  background-color: #F4EDE3;
  color: #4A3627;
  line-height: 1.7;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: Georgia, "Times New Roman", serif;
  color: #4A3627;
  letter-spacing: 0.01em;
  margin: 0 0 0.5em;
}

p {
  margin: 0 0 1em;
}

a {
  color: #A64432;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* ---------- scroll reveal (class based) ---------- */
.reveal-pre { opacity: 1; transform: none; }
html.js .reveal-pre { opacity: 0; transform: translateY(14px); transition: opacity 600ms ease, transform 600ms ease; }
html.js .reveal-pre.is-shown { opacity: 1; transform: none; }

.pagewrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- CORNICE NAV ---------- */
.buzzernav {
  background-color: #26332B;
  border-bottom: 6px solid #7E858C;
  padding: 0 0 18px;
  position: sticky;
  top: 0;
  z-index: 50;
}

.buzzernav-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 14px 24px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 18px;
}

.navbrand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-right: auto;
}

.brandplate {
  background-color: #A64432;
  border: 3px solid #EBE6D8;
  border-radius: 4px;
  padding: 8px 16px;
  color: #F6F1E7;
  font-size: 1.25rem;
  font-weight: bold;
  letter-spacing: 0.14em;
  box-shadow: 0 3px 0 #7E858C;
}

.brandfig {
  color: #F6F1E7;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1.4;
}

.stooptabs {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.stooptab {
  position: relative;
}

.stooptab > a {
  display: block;
  background-color: #EBE6D8;
  color: #4A3627;
  border-left: 2px solid #7E858C;
  border-right: 2px solid #7E858C;
  border-top: 2px solid #7E858C;
  border-bottom: 5px solid #A64432;
  padding: 12px 18px 9px;
  font-size: 0.86rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: bold;
}

.stooptab > a:hover {
  text-decoration: none;
  background-color: #fffaf1;
  border-bottom-color: #46803C;
}

.stooptab:nth-child(1) > a { padding-top: 20px; }
.stooptab:nth-child(2) > a { padding-top: 13px; }
.stooptab:nth-child(3) > a { padding-top: 22px; }
.stooptab:nth-child(4) > a { padding-top: 11px; }
.stooptab:nth-child(5) > a { padding-top: 18px; }

.houseno {
  position: absolute;
  top: 2px;
  right: 8px;
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  color: #A64432;
  font-weight: bold;
}

.navtoggle {
  display: none;
  background-color: #EBE6D8;
  color: #4A3627;
  border: 2px solid #7E858C;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  padding: 10px 14px;
  cursor: pointer;
  text-transform: uppercase;
  font-family: inherit;
}

@media (max-width: 860px) {
  .buzzernav-inner { align-items: center; }
  .navbrand { width: 100%; justify-content: space-between; }
  .navtoggle { display: block; }
  .stooptabs { display: none; width: 100%; }
  .buzzernav.is-open .stooptabs { display: flex; }
  .stooptab > a { padding-top: 14px; }
}

/* ---------- HERO ROWHOUSE ---------- */
.rowhouse {
  background-color: #F4EDE3;
  border-bottom: 1px solid #7E858C;
}

.rowhouse-grid {
  max-width: 1180px;
  margin: 0 auto;
  padding: 60px 24px 40px;
  display: grid;
  grid-template-columns: 55% 45%;
  gap: 34px;
  align-items: center;
}

@media (max-width: 940px) {
  .rowhouse-grid { grid-template-columns: 1fr; }
}

.hero-eyebrow {
  font-size: 0.74rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #46803C;
  font-weight: bold;
  margin-bottom: 14px;
}

.hero-headline {
  font-size: 2.7rem;
  line-height: 1.16;
  color: #4A3627;
  margin-bottom: 18px;
}

.headline-door {
  color: #A64432;
}

.hero-lede {
  font-size: 1.06rem;
  max-width: 34em;
  color: #4A3627;
}

.keyplates {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 22px;
}

.keyplate {
  display: inline-block;
  background-color: #A64432;
  color: #F6F1E7;
  padding: 14px 26px 12px;
  border: 3px solid #4A3627;
  border-radius: 6px;
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: bold;
}

.keyplate:hover { text-decoration: none; background-color: #46803C; }
.keyplate-alt { background-color: #26332B; }
.keyplate-alt:hover { background-color: #A64432; }
.keytag {
  display: block;
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  color: #EBE6D8;
  margin-bottom: 4px;
}

/* ---- CSS townhouse row ---- */
.terrace {
  background-color: #EBE6D8;
  border: 3px solid #7E858C;
  border-radius: 3px;
  padding: 0 0 0;
  box-shadow: 0 8px 0 #E7DFD0;
}

.cornice {
  height: 26px;
  background-color: #26332B;
  border-bottom: 5px solid #A64432;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
}

.cornice-dentil {
  width: 100%;
  height: 6px;
  background-color: #7E858C;
  margin-top: 4px;
}

.cornice-course {
  display: flex;
  gap: 8px;
}

.cornice-course span {
  display: block;
  width: 12px;
  height: 10px;
  background-color: #EBE6D8;
  border: 1px solid #7E858C;
}

.bays {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  padding: 12px 12px 0;
  background-color: #E7DFD0;
}

.bay {
  flex: 1 1 0;
  background-color: #F4EDE3;
  border: 2px solid #4A3627;
  border-bottom: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 8px 6px 0;
}

.bay:nth-child(1) { flex-grow: 1.0; }
.bay:nth-child(2) { flex-grow: 1.3; }
.bay:nth-child(3) { flex-grow: 0.9; }
.bay:nth-child(4) { flex-grow: 1.2; }
.bay:nth-child(5) { flex-grow: 1.05; }

.bayno {
  background-color: #A64432;
  color: #F6F1E7;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  padding: 2px 5px;
  align-self: flex-start;
  margin-bottom: 6px;
  font-weight: bold;
}

.windowpair {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
}

.shutterwin {
  flex: 1 1 0;
  height: 46px;
  background-color: #EBE6D8;
  border: 2px solid #7E858C;
  position: relative;
}

.shutterwin::before,
.shutterwin::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 6px;
  background-color: #A64432;
}

.shutterwin::before { left: 0; }
.shutterwin::after { right: 0; }

.shutterwin i {
  position: absolute;
  left: 9px;
  right: 9px;
  top: 50%;
  height: 2px;
  background-color: #7E858C;
}

.planter {
  height: 14px;
  background-color: #46803C;
  border: 2px solid #26332B;
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  margin: 0 2px 6px;
  overflow: visible;
}

.sprig {
  width: 3px;
  height: 16px;
  background-color: #46803C;
  border-left: 2px solid #26332B;
}

.stoop {
  height: 16px;
  background-color: #EBE6D8;
  border-top: 3px solid #7E858C;
  box-shadow: inset 0 -3px 0 #26332B;
}

.bay:nth-child(1) .stoop { height: 12px; }
.bay:nth-child(2) .stoop { height: 26px; }
.bay:nth-child(3) .stoop { height: 18px; }
.bay:nth-child(4) .stoop { height: 30px; }
.bay:nth-child(5) .stoop { height: 14px; }

.doorpanel {
  width: 30px;
  height: 40px;
  background-color: #A64432;
  border: 2px solid #4A3627;
  margin: 0 auto;
}

.railrun {
  height: 8px;
  background-color: #7E858C;
  border-top: 3px dotted #F4EDE3;
  margin: 0 12px;
}

.pavement {
  height: 20px;
  background-color: #26332B;
  border-top: 4px solid #A64432;
  margin-top: 0;
}

.pavement-slabs {
  display: flex;
  gap: 3px;
  padding: 4px 12px 0;
}

.pavement-slabs span {
  flex: 1 1 0;
  height: 8px;
  background-color: #7E858C;
}

/* ---------- SECTION HEADINGS ---------- */
.sectionhead {
  padding: 56px 0 8px;
}

.sectionhead-kicker {
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #46803C;
  font-weight: bold;
}

.sectionhead h2 {
  font-size: 1.9rem;
  margin-top: 8px;
}

.sectionhead p {
  max-width: 60ch;
}

/* ---------- LISTING STRIP ---------- */
.listingstrip {
  padding: 20px 0 24px;
}

.listingfolio {
  display: grid;
  grid-template-columns: 190px 1fr;
  background-color: #EBE6D8;
  border: 2px solid #4A3627;
  margin-bottom: 22px;
  position: relative;
}

.listingfolio:nth-child(odd) {
  transform: skewY(-1deg);
  background-color: #EBE6D8;
}

.listingfolio:nth-child(even) {
  transform: skewY(1deg);
  background-color: #E7DFD0;
}

.foliodepth-a { min-height: 168px; }
.foliodepth-b { min-height: 186px; }
.foliodepth-c { min-height: 158px; }
.foliodepth-d { min-height: 196px; }
.foliodepth-e { min-height: 174px; }
.foliodepth-f { min-height: 164px; }

.folio-col {
  background-color: #26332B;
  color: #F6F1E7;
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.folio-num {
  font-size: 0.95rem;
  letter-spacing: 0.2em;
  color: #F6F1E7;
  font-weight: bold;
}

.doormark {
  width: 26px;
  height: 40px;
  background-color: #A64432;
  border: 2px solid #F6F1E7;
  border-radius: 3px 3px 0 0;
  margin-top: 10px;
}

.folio-state {
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #EBE6D8;
  margin-top: 12px;
}

.frontage {
  padding: 18px 22px 22px;
}

.frontage h3 {
  font-size: 1.28rem;
  margin-bottom: 8px;
}

.frontage h3 a { color: #4A3627; }
.frontage h3 a:hover { color: #A64432; }

.frontage p {
  font-size: 0.97rem;
  margin-bottom: 12px;
}

.railbar {
  height: 8px;
  background-color: #7E858C;
  border-top: 2px solid #26332B;
  position: relative;
  margin-top: 6px;
}

.railfill {
  position: absolute;
  top: 0;
  left: 0;
  height: 8px;
  background-color: #A64432;
}

.railfill-f1 { width: 22%; }
.railfill-f2 { width: 38%; }
.railfill-f3 { width: 52%; }
.railfill-f4 { width: 68%; }
.railfill-f5 { width: 84%; }
.railfill-f6 { width: 97%; }

.priceband {
  display: inline-block;
  margin-top: 8px;
  background-color: #26332B;
  color: #F6F1E7;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  padding: 3px 9px;
}

.listingfolio-invert {
  background-color: #26332B;
  border-color: #EBE6D8;
}

.listingfolio-invert .folio-col {
  background-color: #A64432;
}

.listingfolio-invert .frontage h3,
.listingfolio-invert .frontage h3 a,
.listingfolio-invert .frontage p {
  color: #F6F1E7;
}

.listingfolio-invert .frontage h3 a:hover { color: #EBE6D8; }

.listingfolio-invert .railbar { background-color: #7E858C; border-top-color: #F6F1E7; }
.listingfolio-invert .priceband { background-color: #EBE6D8; color: #26332B; }

@media (max-width: 700px) {
  .listingfolio { grid-template-columns: 1fr; }
  .listingfolio:nth-child(odd),
  .listingfolio:nth-child(even) { transform: none; }
}

/* ---------- OPEN HOUSE ACCENT ---------- */
.openhouse {
  background-color: #A64432;
  color: #F6F1E7;
  padding: 34px 0;
  border-top: 6px solid #7E858C;
  border-bottom: 6px solid #7E858C;
}

.openhouse-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
}

.keyglyph {
  width: 34px;
  height: 34px;
  border: 3px solid #F6F1E7;
  border-radius: 50%;
  position: relative;
  flex: 0 0 auto;
}

.keyglyph::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  width: 22px;
  height: 4px;
  background-color: #F6F1E7;
  transform: translateY(-50%);
}

.openhouse-text {
  font-size: 1.16rem;
  max-width: 70ch;
}

.openhouse-text strong { letter-spacing: 0.04em; }

/* ---------- GENERAL CONTENT BANDS ---------- */
.contentblock {
  background-color: #F4EDE3;
  padding: 20px 0 36px;
}

.contentblock-alt {
  background-color: #EBE6D8;
  padding: 20px 0 36px;
  border-top: 2px solid #7E858C;
  border-bottom: 2px solid #7E858C;
}

.contentblock-dark {
  background-color: #26332B;
  color: #F6F1E7;
  padding: 42px 0;
}

.contentblock-dark h2,
.contentblock-dark h3 { color: #F6F1E7; }
.contentblock-dark a { color: #EBE6D8; }

.prose-wide {
  max-width: 78ch;
}

.prose-wide p { font-size: 1.02rem; }

.processrow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 22px;
}

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

.processstep {
  background-color: #EBE6D8;
  border: 2px solid #7E858C;
  border-top: 6px solid #A64432;
  padding: 16px;
}

.processstep:nth-child(even) {
  border-top-color: #46803C;
  background-color: #E7DFD0;
}

.processstep h3 {
  font-size: 1rem;
  margin-bottom: 6px;
}

.stepno {
  display: inline-block;
  background-color: #26332B;
  color: #F6F1E7;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  padding: 2px 8px;
  margin-bottom: 10px;
}

/* ---------- FOOTER PAVEMENT ---------- */
.porchbase {
  background-color: #26332B;
  color: #F6F1E7;
  border-top: 6px solid #7E858C;
  padding: 0 0 0;
}

.kerbline {
  height: 10px;
  background-color: #7E858C;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 140px;
}

.bollard {
  width: 10px;
  height: 26px;
  background-color: #A64432;
  border: 2px solid #F6F1E7;
  border-radius: 4px 4px 0 0;
  margin-top: 16px;
}

.porchbase-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 30px 24px 26px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 22px;
}

@media (max-width: 860px) {
  .porchbase-inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 520px) {
  .porchbase-inner { grid-template-columns: 1fr; }
}

.plaque {
  background-color: #EBE6D8;
  color: #4A3627;
  border: 3px solid #A64432;
  border-radius: 4px;
  padding: 16px;
}

.plaque strong {
  display: block;
  letter-spacing: 0.14em;
  margin-bottom: 8px;
  color: #4A3627;
}

.plaque p {
  font-size: 0.88rem;
  margin: 0;
  color: #4A3627;
}

.footcol h4 {
  color: #F6F1E7;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-bottom: 2px solid #7E858C;
  padding-bottom: 8px;
  margin-bottom: 12px;
}

.footcol ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footcol li { margin-bottom: 8px; }

.footcol a {
  color: #EBE6D8;
  font-size: 0.9rem;
}

.footcol a:hover { color: #F6F1E7; }

.porchbase-base {
  border-top: 2px solid #7E858C;
  padding: 16px 24px;
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  align-items: center;
  font-size: 0.82rem;
  color: #EBE6D8;
}

.knocker {
  border: 2px solid #A64432;
  border-radius: 50%;
  padding: 2px 8px;
  color: #F6F1E7;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
}

/* ---------- CONTACT ---------- */
.contactgrid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 28px;
  align-items: start;
}

@media (max-width: 840px) {
  .contactgrid { grid-template-columns: 1fr; }
}

.formpanel {
  background-color: #EBE6D8;
  border: 2px solid #4A3627;
  border-top: 6px solid #A64432;
  padding: 22px;
}

.fieldrow {
  margin-bottom: 16px;
}

.fieldrow label {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #4A3627;
  margin-bottom: 6px;
  font-weight: bold;
}

.fieldrow input,
.fieldrow textarea {
  width: 100%;
  padding: 11px 12px;
  border: 2px solid #7E858C;
  background-color: #F4EDE3;
  color: #4A3627;
  font-family: inherit;
  font-size: 0.98rem;
}

.fieldrow textarea { min-height: 120px; resize: vertical; }

.formbutton {
  background-color: #A64432;
  color: #F6F1E7;
  border: 3px solid #4A3627;
  padding: 13px 26px;
  font-size: 0.86rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: bold;
  cursor: pointer;
  font-family: inherit;
}

.formbutton:hover { background-color: #46803C; }

.formnote {
  font-size: 0.82rem;
  margin-top: 12px;
}

.infopanel {
  background-color: #26332B;
  color: #F6F1E7;
  border: 2px solid #7E858C;
  padding: 22px;
}

.infopanel h3 { color: #F6F1E7; }

.infopanel a { color: #EBE6D8; }

.infopanel hr {
  border: none;
  border-top: 2px solid #7E858C;
  margin: 16px 0;
}

.infopanel p { font-size: 0.95rem; }

.hours-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.hours-list li {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px dotted #7E858C;
  padding: 6px 0;
  font-size: 0.9rem;
}

.faqitem {
  background-color: #EBE6D8;
  border: 2px solid #7E858C;
  margin-bottom: 14px;
}

.faqq {
  width: 100%;
  text-align: left;
  background-color: #EBE6D8;
  color: #4A3627;
  border: none;
  padding: 16px 18px;
  font-size: 1rem;
  font-family: inherit;
  font-weight: bold;
  cursor: pointer;
}

.faqq:hover { background-color: #E7DFD0; }

.faqa {
  display: none;
  padding: 0 18px 16px;
  font-size: 0.96rem;
}

.faqitem.is-open .faqa { display: block; }

.faqitem.is-open .faqq { border-bottom: 2px solid #A64432; }

/* ---------- CTA BAND ---------- */
.ctaband {
  background-color: #46803C;
  color: #F6F1E7;
  padding: 34px 0;
  border-top: 5px solid #26332B;
  border-bottom: 5px solid #26332B;
}

.ctaband-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.ctaband h2 { color: #F6F1E7; margin-bottom: 4px; }

.ctaband p { margin: 0; color: #F6F1E7; }

.ctakey {
  background-color: #F6F1E7;
  color: #26332B;
  border: 3px solid #26332B;
  padding: 14px 26px;
  font-weight: bold;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.86rem;
}

.ctakey:hover { text-decoration: none; background-color: #EBE6D8; }

/* ---------- MISC ---------- */
.statband {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 20px;
}

@media (max-width: 760px) {
  .statband { grid-template-columns: 1fr; }
}

.statcell {
  background-color: #EBE6D8;
  border-left: 6px solid #A64432;
  padding: 16px 18px;
}

.statcell:nth-child(2) { border-left-color: #46803C; }
.statcell:nth-child(3) { border-left-color: #7E858C; }

.statcell strong {
  display: block;
  font-size: 1.5rem;
  color: #A64432;
}

.statcell span {
  font-size: 0.86rem;
}

.inline-list {
  margin: 0 0 1em;
  padding-left: 20px;
}

.inline-list li { margin-bottom: 6px; }