@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Karla:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap");

/* ================================================================
   KAREN HILLIARD
   North Georgia Luxury Realtor
   ================================================================ */


/* ================================================================
   DESIGN SYSTEM
   ================================================================ */

:root {
  --ivory: #F7F4EE;
  --cream: #F3EFE8;
  --cream-deep: #E4DED4;
  --warm-white: #FBF9F5;

  --ink: #2A2521;
  --charcoal: #2A2521;
  --charcoal-soft: #3A342E;
  --dark: #2A2521;

  --sage: #B9B0A3;
  --sage-dark: #7E7568;

  --gold: #A86A52;
  --gold-dark: #8A5440;
  --gold-light: #D2A995;
  --gold-pale: #EFE7DE;

  --mid: #5E5852;
  --light-text: #8F887F;

  --border: rgba(42,37,33,.12);
  --border-dark: rgba(42,37,33,.14);

  --serif: "Cormorant Garamond",Georgia,serif;
  --sans: "Karla",Arial,sans-serif;

  --nav-h: 82px;
  --container: 1220px;

  --ease: cubic-bezier(.22, .61, .36, 1);
}


/* ================================================================
   RESET
   ================================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  margin: 0;
  overflow-x: hidden;

  background: var(--warm-white);
  color: var(--charcoal);

  font-family: var(--sans);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.75;

  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  display: block;
  max-width: 100%;
}

img[width][height] {
  height: auto;
}

a {
  color: inherit;
}

button,
input,
textarea,
select {
  font: inherit;
}

::selection {
  background: var(--gold-pale);
  color: var(--ink);
}


/* ================================================================
   SHARED
   ================================================================ */

.page {
  padding-top: 0;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 48px;
}

section {
  padding: 112px 0;
}

.section-label {
  margin-bottom: 15px;

  color: var(--gold-dark);

  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .23em;
  line-height: 1.3;
  text-transform: uppercase;
}

.section-title {
  margin-bottom: 24px;

  color: var(--ink);

  font-family: var(--serif);
  font-size: clamp(2.65rem, 4.2vw, 4.4rem);
  font-weight: 300;
  letter-spacing: -.025em;
  line-height: .99;
}

.section-title em {
  color: var(--gold-dark);
  font-style: italic;
}

.section-intro {
  max-width: 620px;

  color: var(--mid);

  font-size: .98rem;
  line-height: 1.9;
}


/* ================================================================
   BUTTONS
   ================================================================ */

.btn-primary,
.btn-outline,
.btn-gold {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;

  padding: 0 31px;

  font-size: .69rem;
  font-weight: 500;
  letter-spacing: .16em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;

  cursor: pointer;

  transition:
    background .3s ease,
    color .3s ease,
    border-color .3s ease,
    transform .3s var(--ease);
}

.btn-primary {
  border: 1px solid var(--charcoal);

  background: var(--charcoal);
  color: #fff;
}

.btn-primary:hover {
  border-color: var(--gold-dark);

  background: var(--gold-dark);

  transform: translateY(-2px);
}

.btn-outline {
  border: 1px solid rgba(23, 24, 22, .55);

  background: transparent;
  color: var(--ink);
}

.btn-outline:hover {
  border-color: var(--charcoal);

  background: var(--charcoal);
  color: #fff;

  transform: translateY(-2px);
}

.btn-gold {
  margin-top: 18px;

  border: 1px solid var(--gold);

  background: var(--gold);
  color: #151611;
}

.btn-gold:hover {
  border-color: #c3a777;

  background: #c3a777;

  transform: translateY(-2px);
}


/* ================================================================
   NAVIGATION
   ================================================================ */

#main-nav {
  position: sticky;
  z-index: 1000;
  top: 0;

  display: flex;
  width: 100%;
  height: var(--nav-h);
  align-items: center;
  justify-content: space-between;

  padding: 0 max(40px, calc((100vw - 1400px) / 2));

  border-bottom: 1px solid var(--border);

  background: rgba(255, 254, 250, .96);

  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);

  transition:
    box-shadow .3s ease,
    background .3s ease;
}

#main-nav.scrolled {
  background: rgba(255, 254, 250, .985);

  box-shadow: 0 8px 30px rgba(0, 0, 0, .055);
}

.nav-logo {
  color: var(--ink);

  font-family: var(--serif);
  font-size: 1.38rem;
  font-weight: 500;
  letter-spacing: .015em;
  line-height: 1;

  text-decoration: none;
}

.nav-logo span {
  display: block;

  margin-top: 7px;

  color: var(--gold-dark);

  font-family: var(--sans);
  font-size: .56rem;
  font-weight: 500;
  letter-spacing: .23em;
  line-height: 1;
  text-transform: uppercase;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 31px;

  list-style: none;
}

.nav-links > li > a {
  position: relative;

  color: #5f615c;

  font-size: .67rem;
  font-weight: 500;
  letter-spacing: .15em;
  text-decoration: none;
  text-transform: uppercase;

  transition: color .2s ease;
}

.nav-links > li > a:not(.nav-cta)::after {
  position: absolute;
  right: 0;
  bottom: -7px;
  left: 0;

  height: 1px;

  background: var(--gold);

  content: "";

  transform: scaleX(0);

  transition: transform .25s ease;
}

.nav-links > li > a:hover,
.nav-links > li > a.active {
  color: var(--gold-dark);
}

.nav-links > li > a:hover::after,
.nav-links > li > a.active::after {
  transform: scaleX(1);
}

.nav-cta {
  display: inline-flex;
  min-height: 40px;
  align-items: center;

  padding: 0 21px;

  background: var(--charcoal);
  color: #fff !important;
}

.nav-cta:hover {
  background: var(--gold-dark);
}


/* ================================================================
   NAV DROPDOWNS
   ================================================================ */

.nav-dropdown {
  position: relative;

  display: flex;
  height: var(--nav-h);
  align-items: center;
}

.nav-dropdown > a .caret {
  display: inline-block;

  margin-left: 4px;

  color: var(--gold);

  font-size: .52rem;

  transition: transform .2s ease;
}

.nav-dropdown:hover > a .caret,
.nav-dropdown:focus-within > a .caret {
  transform: rotate(180deg);
}

.nav-dropdown-menu {
  position: absolute;
  z-index: 1100;
  top: calc(100% - 1px);
  left: 50%;

  visibility: hidden;

  min-width: 225px;

  padding: 9px 0;

  border: 1px solid var(--border);

  background: rgba(255, 254, 250, .99);

  box-shadow: 0 20px 45px rgba(0, 0, 0, .09);

  opacity: 0;

  transform: translateX(-50%) translateY(-8px);

  transition:
    opacity .2s ease,
    transform .2s ease,
    visibility .2s;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
  visibility: visible;

  opacity: 1;

  transform: translateX(-50%) translateY(0);
}

.nav-dropdown-menu a {
  display: block;

  padding: 10px 24px;

  color: var(--mid);

  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-decoration: none;
  text-transform: uppercase;

  transition:
    color .2s ease,
    background .2s ease,
    padding-left .2s ease;
}

.nav-dropdown-menu a:hover {
  padding-left: 28px;

  background: var(--cream);
  color: var(--gold-dark);
}

.nav-dropdown-menu a:first-child {
  margin-bottom: 6px;
  padding-bottom: 13px;

  border-bottom: 1px solid var(--border);

  color: var(--ink);
}


/* ================================================================
   MOBILE NAV
   ================================================================ */

.nav-hamburger {
  display: none;

  padding: 5px;

  border: 0;

  background: none;

  cursor: pointer;
}

.nav-hamburger span {
  display: block;

  width: 24px;
  height: 1px;

  margin: 6px 0;

  background: var(--ink);
}

.mobile-menu {
  position: fixed;
  z-index: 999;
  top: var(--nav-h);
  right: 0;
  left: 0;

  display: none;
  max-height: calc(100svh - var(--nav-h));

  overflow-y: auto;

  padding: 12px 28px 32px;

  border-bottom: 1px solid var(--border);

  background: rgba(255, 254, 250, .99);

  box-shadow: 0 18px 30px rgba(0, 0, 0, .06);
}

.mobile-menu.open {
  display: flex;
  flex-direction: column;
}

.mobile-menu > a {
  padding: 15px 0;

  border-bottom: 1px solid var(--border);

  color: var(--charcoal);

  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .15em;
  text-decoration: none;
  text-transform: uppercase;
}

.mobile-submenu {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;

  padding: 15px 0;

  border-bottom: 1px solid var(--border);
}

.mobile-submenu a {
  padding: 7px 11px;

  border: 1px solid var(--border);

  background: var(--cream);
  color: var(--mid);

  font-size: .65rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-decoration: none;
  text-transform: uppercase;
}


/* ================================================================
   VIDEO HERO
   ================================================================ */

.video-hero {
  position: relative;

  display: flex;
  min-height: calc(100svh - var(--nav-h));

  align-items: center;
  justify-content: center;

  overflow: hidden;

  padding: 70px 28px;

  background:
    url("hero-poster.jpg") center center / cover no-repeat;
}

.video-hero-bg {
  position: absolute;
  z-index: 0;
  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center center;

  filter: none;

  transform: none;
}


/*
   Very light overlay.
   Keeps the original video looking crisp instead of
   making the footage look hazy or overly processed.
*/

.video-hero::after {
  position: absolute;
  z-index: 1;
  inset: 0;

  background: rgba(10, 12, 10, .035);

  content: "";

  pointer-events: none;
}


/* Hero panel */

.video-hero-panel {
  position: relative;
  z-index: 2;

  width: min(700px, 92vw);

  padding: 58px 60px;

  border: 1px solid rgba(180, 151, 99, .35);

  background: rgba(251, 250, 247, .89);

  box-shadow: 0 28px 70px rgba(0, 0, 0, .13);

  text-align: center;

  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.video-hero-panel::before {
  position: absolute;
  inset: 9px;

  border: 1px solid rgba(180, 151, 99, .12);

  content: "";

  pointer-events: none;
}

.video-hero .hero-eyebrow {
  margin-bottom: 17px;

  color: var(--gold-dark);

  font-size: .65rem;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
}

.video-hero .hero-title {
  margin-bottom: 23px;

  color: var(--ink);

  font-family: var(--serif);
  font-size: clamp(3.2rem, 5vw, 5rem);
  font-weight: 300;
  letter-spacing: -.035em;
  line-height: .92;
}

.video-hero .hero-title em {
  color: var(--gold-dark);

  font-style: italic;
}

.ht-line {
  display: inline-block;
}

.video-hero .hero-subtitle {
  max-width: 560px;

  margin: 0 auto 29px;

  color: #61635d;

  font-size: .91rem;
  line-height: 1.85;
}

.hero-subtitle-short {
  display: none;
}

.video-hero .hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
}

.video-hero .btn-gold {
  margin-top: 12px;
}

.video-hero .hero-phone {
  margin-top: 23px;

  color: var(--mid);

  font-size: .69rem;
  letter-spacing: .07em;
}

.video-hero .hero-phone a {
  color: var(--gold-dark);

  font-weight: 500;
  text-decoration: none;
}


/* ================================================================
   STANDARD HERO — INNER PAGES
   ================================================================ */

.hero {
  display: grid;
  min-height: 82vh;

  background: var(--cream);

  grid-template-columns: 1fr 1fr;
}

.hero-text {
  display: flex;
  flex-direction: column;
  justify-content: center;

  padding: 80px;
}

.hero-eyebrow {
  margin-bottom: 20px;

  color: var(--gold-dark);

  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.hero-title {
  margin-bottom: 28px;

  color: var(--ink);

  font-family: var(--serif);
  font-size: clamp(3rem, 5vw, 5.2rem);
  font-weight: 300;
  line-height: 1;
}

.hero-title em {
  color: var(--gold-dark);

  font-style: italic;
}

.hero-subtitle {
  max-width: 460px;

  margin-bottom: 42px;

  color: var(--mid);

  font-size: 1rem;
  line-height: 1.85;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hero-phone {
  margin-top: 35px;

  color: var(--mid);

  font-size: .75rem;
}

.hero-phone a {
  color: var(--gold-dark);

  font-weight: 500;
  text-decoration: none;
}

.hero-image {
  position: relative;

  overflow: hidden;

  background: var(--cream-deep);
}

.hero-image img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}

.hero-image-overlay {
  position: absolute;
  right: 30px;
  bottom: 30px;
  left: 30px;

  padding: 19px 23px;

  background: rgba(251, 250, 247, .92);

  backdrop-filter: blur(7px);
}

.hero-image-overlay p {
  color: var(--mid);

  font-size: .75rem;
}


/* ================================================================
   STATS
   ================================================================ */

.intro-band {
  padding: 51px 0;

  background: var(--charcoal);
}

.intro-band .container {
  display: flex;
  align-items: center;
  gap: 55px;
}

.intro-stat {
  flex: 1;

  text-align: center;
}

.intro-stat .number {
  color: var(--gold-light);

  font-family: var(--serif);
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  font-weight: 300;
  line-height: 1;
}

.intro-stat .label {
  margin-top: 10px;

  color: rgba(255, 255, 255, .62);

  font-size: .62rem;
  font-weight: 400;
  letter-spacing: .18em;
  line-height: 1.4;
  text-transform: uppercase;
}

.intro-divider {
  width: 1px;
  height: 58px;

  background: rgba(255, 255, 255, .13);
}


/* ================================================================
   SERVICES
   ================================================================ */

.services {
  background: var(--warm-white);
}

.services > .container > .section-label,
.services > .container > .section-title,
.services > .container > .section-intro {
  margin-right: auto;
  margin-left: auto;

  text-align: center;
}

.services > .container > .section-intro {
  max-width: 680px;
}

.services-grid {
  display: grid;

  margin-top: 64px;

  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);

  grid-template-columns: repeat(2, 1fr);
}

.service-card {
  position: relative;

  min-height: 310px;

  padding: 48px;

  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);

  background: transparent;

  transition: background .35s ease;
}

.service-card::before {
  display: block;

  width: 30px;
  height: 1px;

  margin-bottom: 28px;

  background: var(--gold);

  content: "";

  transition: width .35s var(--ease);
}

.service-card:hover {
  background: var(--cream);
}

.service-card:hover::before {
  width: 58px;
}

.service-icon {
  display: none;
}

.service-card h3 {
  margin-bottom: 17px;

  color: var(--ink);

  font-family: var(--serif);
  font-size: clamp(1.75rem, 2.5vw, 2.35rem);
  font-weight: 300;
  line-height: 1.1;
}

.service-card p {
  max-width: 470px;

  color: var(--mid);

  font-size: .9rem;
  line-height: 1.85;
}

.service-card .learn-more {
  display: inline-block;

  margin-top: 25px;
  padding-bottom: 4px;

  border-bottom: 1px solid var(--gold-light);

  color: var(--gold-dark);

  font-size: .65rem;
  font-weight: 500;
  letter-spacing: .15em;
  text-decoration: none;
  text-transform: uppercase;
}


/* ================================================================
   ABOUT
   ================================================================ */

.about-strip {
  overflow: hidden;

  background: var(--cream);
}

.about-strip .container {
  display: grid;
  align-items: center;
  gap: clamp(55px, 8vw, 105px);

  grid-template-columns: .9fr 1.1fr;
}

.about-strip-image {
  position: relative;
  z-index: 1;
}

.about-strip-image::before {
  position: absolute;
  z-index: -1;
  top: 22px;
  right: -22px;
  bottom: -22px;
  left: 22px;

  border: 1px solid var(--gold);

  content: "";
}

.about-strip-image img {
  width: 100%;
}

.about-strip-text .section-title {
  font-size: clamp(2.8rem, 4vw, 4.3rem);
}

.about-strip-text .section-intro {
  max-width: 650px;

  margin-bottom: 29px;
}

.checklist {
  margin: 25px 0 35px;

  list-style: none;
}

.checklist li {
  display: flex;
  align-items: flex-start;
  gap: 14px;

  padding: 11px 0;

  border-bottom: 1px solid rgba(32, 34, 31, .1);

  color: #50534d;

  font-size: .86rem;
}

.checklist li::before {
  color: var(--gold-dark);

  content: "—";

  font-family: var(--serif);
  font-size: 1.2rem;
}


/* ================================================================
   COMMUNITY LINKS
   ================================================================ */

.nearby-links {
  display: flex;
  max-width: 980px;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;

  margin: 42px auto 0;
}

.nearby-links a {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;

  padding: 0 23px;

  border: 1px solid var(--border);

  background: var(--warm-white);
  color: var(--charcoal);

  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-decoration: none;
  text-transform: uppercase;

  transition:
    background .25s ease,
    color .25s ease,
    border-color .25s ease,
    transform .25s ease;
}

.nearby-links a:hover {
  border-color: var(--charcoal);

  background: var(--charcoal);
  color: #fff;

  transform: translateY(-2px);
}


/* ================================================================
   TESTIMONIAL
   ================================================================ */

.testimonial-section {
  position: relative;

  overflow: hidden;

  padding: 120px 0;

  background: var(--sage-dark);

  text-align: center;
}

.testimonial-section::before {
  position: absolute;
  top: -110px;
  left: 50%;

  color: rgba(255, 255, 255, .035);

  content: "“";

  font-family: var(--serif);
  font-size: 32rem;
  line-height: 1;

  transform: translateX(-50%);
}

.testimonial-section .container {
  position: relative;
  z-index: 1;
}

.quote-mark {
  display: block;

  height: 55px;

  margin-bottom: 14px;

  color: var(--gold-light);

  font-family: var(--serif);
  font-size: 5rem;
  line-height: .8;
}

.testimonial-section blockquote {
  max-width: 900px;

  margin: 0 auto 31px;

  color: #fff;

  font-family: var(--serif);
  font-size: clamp(1.65rem, 3vw, 2.65rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.4;
}

.testimonial-section cite {
  color: var(--gold-light);

  font-size: .65rem;
  font-weight: 500;
  font-style: normal;
  letter-spacing: .18em;
  text-transform: uppercase;
}


/* ================================================================
   INNER PAGE HERO
   ================================================================ */

.page-hero {
  padding: 110px 0 85px;

  border-bottom: 1px solid var(--border);

  background: var(--cream);
}

.page-hero h1 {
  max-width: 850px;

  color: var(--ink);

  font-family: var(--serif);
  font-size: clamp(3rem, 5vw, 5rem);
  font-weight: 300;
  line-height: .98;
}

.page-hero p {
  max-width: 620px;

  margin-top: 23px;

  color: var(--mid);

  font-size: .96rem;
  line-height: 1.85;
}


/* ================================================================
   VALUES
   ================================================================ */

.values-grid {
  display: grid;
  gap: 16px;

  margin-top: 48px;

  grid-template-columns: repeat(2, 1fr);
}

.value-card {
  padding: 34px;

  border: 1px solid var(--border);

  background: var(--cream);
}

.value-card h4 {
  margin-bottom: 9px;

  color: var(--ink);

  font-family: var(--serif);
  font-size: 1.45rem;
  font-weight: 400;
}

.value-card p {
  color: var(--mid);

  font-size: .85rem;
  line-height: 1.75;
}


/* ================================================================
   CITY CONTENT
   ================================================================ */

.city-prose {
  max-width: 760px;

  margin-top: 35px;
}

.city-prose p {
  margin-bottom: 21px;

  color: var(--mid);

  font-size: .96rem;
  line-height: 1.95;
}


/* ================================================================
   FAQ
   ================================================================ */

.faq-list {
  max-width: 800px;

  margin-top: 42px;
}

.faq-item {
  margin-bottom: 10px;

  border: 1px solid var(--border);

  background: var(--cream);
}

.faq-item summary {
  position: relative;

  padding: 20px 52px 20px 24px;

  color: var(--ink);

  font-family: var(--serif);
  font-size: 1.32rem;

  cursor: pointer;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  position: absolute;
  top: 50%;
  right: 23px;

  color: var(--gold-dark);

  content: "+";

  transform: translateY(-50%);
}

.faq-item[open] summary::after {
  content: "−";
}

.faq-item p {
  padding: 0 24px 22px;

  color: var(--mid);

  font-size: .88rem;
  line-height: 1.8;
}


/* ================================================================
   VENDORS
   ================================================================ */

.vendor-category {
  margin-bottom: 70px;
}

.vendor-category-title {
  margin-bottom: 30px;
  padding-bottom: 17px;

  border-bottom: 1px solid var(--border);

  color: var(--ink);

  font-family: var(--serif);
  font-size: 1.8rem;
  font-weight: 300;

  text-align: center;
}

.vendor-cards {
  display: grid;
  gap: 14px;

  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.vendor-card {
  padding: 30px 25px;

  border: 1px solid var(--border);

  background: var(--cream);

  text-align: center;
}

.vendor-card h4 {
  margin-bottom: 7px;

  color: var(--ink);

  font-family: var(--serif);
  font-size: 1.35rem;
}

.vendor-card .contact-name {
  color: var(--mid);

  font-size: .78rem;
}

.vendor-card .vendor-phone {
  margin: 7px 0 10px;

  font-weight: 500;
}

.vendor-card .vendor-phone a {
  text-decoration: none;
}

.vendor-card .vendor-desc {
  margin-bottom: 15px;

  color: var(--mid);

  font-size: .8rem;
  font-style: italic;
}

.vendor-card .vendor-link {
  color: var(--gold-dark);

  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-decoration: none;
  text-transform: uppercase;
}

.vendor-disclaimer {
  margin-top: 45px;

  padding: 19px 23px;

  border-left: 2px solid var(--gold);

  background: var(--gold-pale);
  color: var(--mid);

  font-size: .82rem;
}


/* ================================================================
   BLOG
   ================================================================ */

.blog-coming {
  padding: 90px 0;

  text-align: center;
}

.blog-coming .big-icon {
  margin-bottom: 20px;

  font-size: 2.5rem;
}

.blog-coming h2 {
  margin-bottom: 12px;

  font-family: var(--serif);
  font-size: 2.6rem;
  font-weight: 300;
}

.blog-coming p {
  max-width: 430px;

  margin: 0 auto 28px;

  color: var(--mid);
}


/* ================================================================
   CONTACT SECTION
   ================================================================ */

.footer-contact {
  padding: 110px 0;

  border-top: 1px solid var(--border);

  background: var(--cream);
}

.footer-contact .container {
  display: grid;
  align-items: start;
  gap: clamp(55px, 8vw, 100px);

  grid-template-columns: .85fr 1.15fr;
}

.contact-info-col h2 {
  margin-bottom: 32px;

  color: var(--ink);

  font-family: var(--serif);
  font-size: clamp(2.6rem, 4vw, 4rem);
  font-weight: 300;
  line-height: 1;
}

.contact-info-col h2 em {
  color: var(--gold-dark);

  font-style: italic;
}

.contact-detail {
  display: grid;
  align-items: start;

  padding: 18px 0;

  border-top: 1px solid var(--border);

  grid-template-columns: 28px 1fr;
}

.contact-detail .icon {
  color: var(--gold-dark);
}

.contact-detail p {
  color: var(--mid);

  font-size: .88rem;
}

.contact-detail a {
  color: var(--charcoal);

  text-decoration: none;
}

.hours-grid {
  display: grid;

  margin-top: 25px;

  font-size: .79rem;

  grid-template-columns: 105px 1fr;
  gap: 7px 18px;
}

.hours-grid .day {
  color: var(--mid);

  font-weight: 500;
}


/* ================================================================
   FORM
   ================================================================ */

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 19px;
}

.form-row {
  display: grid;
  gap: 17px;

  grid-template-columns: 1fr 1fr;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.form-group label {
  color: var(--mid);

  font-size: .63rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;

  padding: 14px 15px;

  border: 1px solid #d7d0c5;
  border-radius: 0;
  outline: none;

  background: rgba(255, 254, 250, .75);
  color: var(--charcoal);

  font-size: .87rem;

  transition:
    border-color .2s ease,
    box-shadow .2s ease;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color: var(--gold);

  box-shadow: 0 0 0 3px rgba(180, 151, 99, .08);
}

.form-group textarea {
  min-height: 135px;

  resize: vertical;
}

.form-note {
  color: var(--mid);

  font-size: .72rem;
}

.form-success {
  display: none;

  padding: 14px 18px;

  border: 1px solid var(--gold-light);

  background: var(--gold-pale);

  font-size: .84rem;
}


/* ================================================================
   FIND ME ONLINE
   ================================================================ */

.footer-profiles {
  padding: 70px 0 74px;

  border-top: 1px solid var(--border);

  background: var(--warm-white);
}

.footer-profiles .container {
  text-align: center;
}

.fp-label {
  margin-bottom: 11px;

  color: var(--gold-dark);

  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.footer-profiles h3 {
  margin-bottom: 31px;

  color: var(--ink);

  font-family: var(--serif);
  font-size: clamp(1.65rem, 2.6vw, 2.3rem);
  font-weight: 300;
}

.footer-profiles h3 em {
  color: var(--gold-dark);

  font-style: italic;
}

.fp-links {
  display: flex;
  max-width: 1080px;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;

  margin: auto;
}

.fp-links a {
  display: inline-flex;
  min-height: 43px;
  align-items: center;
  gap: 8px;

  padding: 0 17px;

  border: 1px solid var(--border);

  background: #fff;
  color: #51534e;

  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .07em;
  text-decoration: none;

  transition:
    border-color .2s ease,
    color .2s ease,
    transform .2s ease;
}

.fp-links a:hover {
  border-color: var(--gold);

  color: var(--gold-dark);

  transform: translateY(-2px);
}


/* ================================================================
   NEW FOOTER
   ================================================================ */

.footer-bar {
  padding: 0;

  background: #151614;
}

.footer-bar-inner {
  width: 100%;
  max-width: var(--container);

  margin: 0 auto;

  padding: 76px 48px 34px;
}


/* Main footer grid */

.footer-main {
  display: grid;
  align-items: start;
  gap: 100px;

  padding-bottom: 65px;

  grid-template-columns: minmax(280px, .85fr) 1.4fr;
}


/* Brand */

.footer-brand {
  max-width: 350px;
}

.footer-logo {
  display: inline-block;

  color: #fff;

  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 400;
  line-height: 1;

  text-decoration: none;
}

.footer-logo span {
  display: block;

  margin-top: 10px;

  color: var(--gold-light);

  font-family: var(--sans);
  font-size: .58rem;
  font-weight: 500;
  letter-spacing: .23em;
  text-transform: uppercase;
}

.footer-brand-copy {
  max-width: 320px;

  margin-top: 27px;

  color: rgba(255, 255, 255, .52);

  font-size: .8rem;
  line-height: 1.8;
}

.footer-phone {
  display: inline-block;

  margin-top: 24px;

  color: rgba(255, 255, 255, .88);

  font-family: var(--serif);
  font-size: 1.35rem;

  text-decoration: none;

  transition: color .2s ease;
}

.footer-phone:hover {
  color: var(--gold-light);
}


/* Navigation columns */

.footer-menu {
  display: grid;
  gap: 50px;

  grid-template-columns: repeat(3, 1fr);
}

.footer-menu-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.footer-menu-title {
  width: 100%;

  margin-bottom: 19px;
  padding-bottom: 13px;

  border-bottom: 1px solid rgba(255, 255, 255, .1);

  color: var(--gold-light);

  font-size: .6rem;
  font-weight: 500;
  letter-spacing: .19em;
  text-transform: uppercase;
}

.footer-menu-col a {
  display: inline-block;

  padding: 5px 0;

  color: rgba(255, 255, 255, .62);

  font-size: .72rem;
  font-weight: 300;
  letter-spacing: .035em;
  line-height: 1.6;
  text-decoration: none;

  transition:
    color .2s ease,
    transform .2s ease;
}

.footer-menu-col a:hover {
  color: #fff;

  transform: translateX(3px);
}


/* Bottom legal section */

.footer-bottom {
  display: grid;
  align-items: end;
  gap: 60px;

  padding-top: 27px;

  border-top: 1px solid rgba(255, 255, 255, .1);

  grid-template-columns: 1fr auto;
}

.footer-legal {
  max-width: 850px;
}

.footer-legal p {
  color: rgba(255, 255, 255, .39);

  font-size: .62rem;
  line-height: 1.7;
}

.footer-legal p + p {
  margin-top: 5px;
}

.footer-credit {
  color: rgba(255, 255, 255, .36);

  font-size: .58rem;
  letter-spacing: .12em;
  text-transform: uppercase;

  white-space: nowrap;
}

.footer-credit a {
  margin-left: 5px;

  border-bottom: 1px solid rgba(212, 193, 156, .35);

  color: var(--gold-light);

  text-decoration: none;

  transition:
    color .2s ease,
    border-color .2s ease;
}

.footer-credit a:hover {
  border-color: #fff;

  color: #fff;
}


/* ================================================================
   SCROLL REVEAL
   ================================================================ */

.reveal-item {
  opacity: 0;

  transform: translateY(25px);

  transition:
    opacity .8s var(--ease),
    transform .8s var(--ease);

  transition-delay: var(--rd, 0ms);
}

.reveal-item.revealed {
  opacity: 1;

  transform: none;
}


/* ================================================================
   TABLET
   ================================================================ */

@media (max-width: 1050px) {

  #main-nav {
    padding: 0 28px;
  }

  .nav-links {
    gap: 20px;
  }

  .footer-main {
    gap: 60px;
  }

  .footer-menu {
    gap: 30px;
  }

}


/* ================================================================
   MOBILE / TABLET
   ================================================================ */

@media (max-width: 900px) {

  :root {
    --nav-h: 74px;
  }

  section {
    padding: 80px 0;
  }

  .container,
  .footer-bar-inner {
    padding-right: 26px;
    padding-left: 26px;
  }


  /* Nav */

  #main-nav {
    padding: 0 25px;
  }

  .nav-links {
    display: none;
  }

  .nav-hamburger {
    display: block;
  }


  /* Video hero */

  .video-hero {
    padding: 48px 28px;
  }

  .video-hero-panel {
    width: min(620px, 92vw);

    padding: 48px 38px;
  }


  /* Standard hero */

  .hero {
    min-height: auto;

    grid-template-columns: 1fr;
  }

  .hero-text {
    padding: 65px 26px;
  }


  /* Stats */

  .intro-band .container {
    gap: 28px;
  }


  /* Services */

  .services-grid {
    grid-template-columns: 1fr;
  }

  .service-card {
    min-height: 0;
  }


  /* About */

  .about-strip .container {
    gap: 55px;

    grid-template-columns: 1fr;
  }

  .about-strip-image {
    width: min(620px, 92%);

    margin: auto;
  }


  /* Contact */

  .footer-contact .container {
    gap: 60px;

    grid-template-columns: 1fr;
  }


  /* New footer */

  .footer-bar-inner {
    padding-top: 62px;
  }

  .footer-main {
    gap: 55px;

    grid-template-columns: 1fr;
  }

  .footer-brand {
    max-width: 500px;
  }

  .footer-brand-copy {
    max-width: 480px;
  }

  .footer-menu {
    max-width: 700px;

    grid-template-columns: repeat(3, 1fr);
  }

  .footer-bottom {
    align-items: start;
    gap: 20px;

    grid-template-columns: 1fr;
  }

  .footer-credit {
    white-space: normal;
  }


  /* Values */

  .values-grid {
    grid-template-columns: 1fr;
  }

}


/* ================================================================
   PHONE
   ================================================================ */

@media (max-width: 600px) {

  section {
    padding: 64px 0;
  }

  .container,
  .footer-bar-inner {
    padding-right: 21px;
    padding-left: 21px;
  }

  .section-title {
    font-size: clamp(2.35rem, 11vw, 3.1rem);
  }


  /* Hero */

  .video-hero {
    min-height: calc(100svh - var(--nav-h));

    padding: 32px 20px;
  }

  .video-hero-panel {
    width: min(330px, 90vw);

    padding: 30px 21px;

    background: rgba(251, 250, 247, .87);
  }

  .video-hero-panel::before {
    inset: 6px;
  }

  .video-hero .hero-eyebrow {
    margin-bottom: 11px;

    font-size: .52rem;
  }

  .video-hero .hero-title {
    margin-bottom: 15px;

    font-size: clamp(2rem, 10vw, 2.6rem);
  }

  .video-hero .hero-subtitle-full {
    display: none;
  }

  .video-hero .hero-subtitle-short {
    display: block;

    margin-bottom: 19px;

    font-size: .76rem;
    line-height: 1.55;
  }

  .video-hero .hero-actions {
    flex-direction: column;
    gap: 7px;
  }

  .video-hero .hero-actions .btn-primary,
  .video-hero .hero-actions .btn-outline,
  .video-hero .btn-gold {
    width: 100%;
    min-height: 43px;

    padding: 0 13px;

    font-size: .61rem;
  }


  /* Stats */

  .intro-band {
    padding: 39px 0;
  }

  .intro-band .container {
    display: grid;
    gap: 28px 10px;

    grid-template-columns: 1fr 1fr;
  }

  .intro-stat:last-child {
    grid-column: 1 / -1;
  }

  .intro-divider {
    display: none;
  }

  .intro-stat .number {
    font-size: 2.35rem;
  }


  /* Services */

  .services-grid {
    margin-top: 45px;
  }

  .service-card {
    padding: 35px 27px;
  }


  /* About */

  .about-strip-image {
    width: calc(100% - 16px);
  }

  .about-strip-image::before {
    top: 11px;
    right: -11px;
    bottom: -11px;
    left: 11px;
  }


  /* Communities */

  .nearby-links {
    gap: 7px;

    margin-top: 31px;
  }

  .nearby-links a {
    min-height: 41px;

    padding: 0 14px;

    font-size: .59rem;
  }


  /* Testimonial */

  .testimonial-section {
    padding: 82px 0;
  }


  /* Form */

  .form-row {
    grid-template-columns: 1fr;
  }


  /* Contact */

  .footer-contact {
    padding: 75px 0;
  }


  /* Profiles */

  .footer-profiles {
    padding: 55px 0;
  }


  /* Footer */

  .footer-bar-inner {
    padding-top: 52px;
    padding-bottom: 27px;
  }

  .footer-main {
    gap: 45px;

    padding-bottom: 45px;
  }

  .footer-logo {
    font-size: 1.75rem;
  }

  .footer-brand-copy {
    margin-top: 22px;

    font-size: .77rem;
  }

  .footer-menu {
    gap: 35px 20px;

    grid-template-columns: 1fr 1fr;
  }

  .footer-menu-col:last-child {
    grid-column: 1 / -1;
  }

  .footer-menu-title {
    margin-bottom: 12px;
  }

  .footer-bottom {
    padding-top: 22px;
  }

}


/* ================================================================
   VERY SMALL PHONES
   ================================================================ */

@media (max-width: 400px) {

  .container,
  .footer-bar-inner {
    padding-right: 18px;
    padding-left: 18px;
  }

  #main-nav {
    padding: 0 18px;
  }

  .footer-menu {
    grid-template-columns: 1fr;
  }

  .footer-menu-col:last-child {
    grid-column: auto;
  }

}


/* ================================================================
   ACCESSIBILITY
   ================================================================ */

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto;
  }

  .video-hero-bg {
    display: none;
  }

  .video-hero {
    background:
      url("hero-poster.jpg")
      center center / cover no-repeat;
  }

  .reveal-item {
    opacity: 1 !important;

    transform: none !important;

    transition: none !important;
  }

}

/* ═══════════════════════════════════════════════════════════
   THEME — LINEN & STONE
   Warm neutrals, espresso type, one clay note. No dark blocks.
   ═══════════════════════════════════════════════════════════ */
body{font-weight:400}
h1,h2,h3,.section-title,.hero-title,.nav-logo,.footer-logo,.intro-stat .number{font-family:var(--serif);font-weight:300;letter-spacing:-.005em}
.section-title{font-size:clamp(2.6rem,4.4vw,4rem)}
.section-title em,h1 em,.hero-title em{color:var(--gold);font-style:italic;font-weight:300}
.section-label{color:var(--sage-dark);letter-spacing:.34em;font-size:.64rem}
#main-nav{background:rgba(247,244,238,.94);border-bottom:1px solid var(--border)}
.nav-links a{letter-spacing:.22em;font-size:.66rem}
.nav-cta{background:transparent!important;color:var(--ink)!important;border:1px solid var(--ink)!important;padding:13px 30px!important}
.nav-cta:hover{background:var(--ink)!important;color:#fff!important}
/* HERO — linen wash over video, headline lower-third, centered */
.video-hero{align-items:center;padding:64px 24px}
.video-hero .video-hero-bg{opacity:.9;filter:saturate(.85)}
.video-hero::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,rgba(247,244,238,.15) 0%,rgba(247,244,238,.25) 60%,rgba(247,244,238,.7) 100%)}
.video-hero-panel{box-shadow:none;background:rgba(247,244,238,.9);backdrop-filter:none;-webkit-backdrop-filter:none;border:1px solid rgba(42,37,33,.12);max-width:920px;padding:64px 56px}
.video-hero .hero-eyebrow{color:var(--gold);letter-spacing:.36em;font-size:.64rem}
.video-hero .hero-title{color:var(--ink);font-size:clamp(3.2rem,6.6vw,5.9rem);line-height:.96;font-weight:300}
.video-hero .hero-subtitle{color:var(--mid);max-width:58ch;margin:0 auto 34px;font-size:1rem;line-height:1.8}
.video-hero .btn-primary{background:var(--ink);color:#fff;border-radius:0}
.video-hero .btn-outline{color:var(--ink);border-color:var(--ink);border-radius:0}
.video-hero .btn-gold{background:transparent;color:var(--gold-dark);padding:0;border-bottom:1px solid var(--gold);margin-top:26px;letter-spacing:.26em}
.video-hero .hero-phone{color:var(--mid)}
/* Buttons: sharp, quiet */
.btn-primary,.btn-outline,.btn-gold{border-radius:0;letter-spacing:.24em;font-size:.66rem;padding:16px 36px}
.btn-primary{background:var(--ink)}.btn-primary:hover{background:var(--gold-dark)}
.btn-gold{background:transparent;color:var(--gold-dark);border:1px solid var(--gold)}.btn-gold:hover{background:var(--gold);color:#fff}
/* Stats: hairline table, no dark bar */
.intro-band{background:var(--warm-white);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:44px 0}
.intro-stat .number{color:var(--ink);font-size:3.6rem}
.intro-stat .label{color:var(--sage-dark);letter-spacing:.28em;font-size:.6rem}
.intro-divider{background:var(--border)}
/* Cards: tone-on-tone stone */
.services{background:var(--cream)}
.service-card{background:var(--warm-white);border:1px solid var(--border);border-radius:0;padding:44px 36px}
.service-card::before{display:none}
.service-card:hover{background:var(--warm-white);border-color:var(--gold);transform:none;box-shadow:0 30px 60px -40px rgba(42,37,33,.25)}
.service-card h3{font-size:1.9rem;font-weight:300}
.service-card .learn-more{color:var(--gold-dark);letter-spacing:.22em;font-size:.64rem}
/* About strip: stone panel, offset clay frame */
.about-strip{background:var(--cream-deep)}
.about-strip-image::before{inset:16px -16px -16px 16px;border:1px solid var(--gold)}
.checklist li::before{color:var(--gold)}
/* Quote: stone, not black */
.testimonial-section{background:var(--cream-deep);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.testimonial-section blockquote{color:var(--ink);font-weight:300}
.testimonial-section cite{color:var(--gold-dark)}
.testimonial-section .quote-mark{color:var(--gold)}
.testimonial-section .btn-outline{border-color:var(--ink)!important;color:var(--ink)!important}
.nearby-links a{border-radius:0;letter-spacing:.2em;font-size:.62rem;border-color:var(--border)}
.nearby-links a:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.footer-contact{background:var(--ivory)}.footer-profiles{background:var(--cream)}
.footer-profiles h3 em{color:var(--gold)}
.footer-bar{background:var(--dark)}
.fp-links a{border-radius:0}
@media(max-width:768px){.video-hero{padding:40px 16px}.video-hero-panel{padding:40px 24px}.video-hero .hero-title{font-size:3rem}}

/* ── Brokerage bar ───────────────────────────── */
.footer-kw-bar { display:flex; align-items:center; gap:18px; padding:22px 0; border-top:1px solid rgba(255,255,255,0.10); }
.footer-bar .footer-kw-bar img[width][height] { height:40px; width:auto; background:#fff; padding:4px 7px; border-radius:2px; flex-shrink:0; }
.footer-kw-bar p { font-size:0.74rem; color:rgba(255,255,255,0.55); line-height:1.8; margin:0; letter-spacing:0.02em; }
.footer-kw-bar strong { color:rgba(255,255,255,0.85); font-weight:500; }
.footer-kw-bar a { color:rgba(255,255,255,0.75); }
.footer-kw-bar .kw-sep { margin:0 6px; opacity:0.5; }
@media (max-width:640px){ .footer-kw-bar{align-items:flex-start} .footer-kw-bar .kw-sep{display:none} .footer-kw-bar p{display:flex;flex-direction:column;gap:2px} }


/* "Part of The Legacy Team" line under the footer phone number */
.footer-team { margin-top: 18px; max-width: 480px; font-size: .85rem; line-height: 1.6; color: rgba(255, 255, 255, .52); }
.footer-team a { color: var(--gold-light); text-decoration: none; border-bottom: 1px solid currentColor; transition: color .2s; }
.footer-team a:hover, .footer-team a:focus-visible { color: #fff; }

/* Side-by-side buttons under the partner bio on the About page */
.about-links { display: inline-grid; grid-template-columns: 1fr; gap: 12px; }
.about-links .btn-outline { margin: 0; text-align: center; justify-content: center; }