:root{
  --bg: #f6f1e8;
  --paper: #ffffff;
  --ink: #1f2321;
  --muted: #5b5f5c;
  --line: rgba(31,35,33,.14);
  --shadow: 0 18px 45px rgba(31,35,33,.12);

  --forest: #2f3a33;
  --pine: #3a4a40;
  --gold: #b08a57;
  --radius: 18px;
  --radius2: 26px;

  --serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

*{ box-sizing:border-box; }
html, body{ margin:0; padding:0; background:var(--bg); color:var(--ink); }
body{ font-family: var(--sans); line-height:1.55; }
a{ color: inherit; text-underline-offset: 3px; }
a:hover{ opacity:.92; }
img{ max-width:100%; height:auto; display:block; }

.container{ width:min(1160px, 92vw); margin:0 auto; }

.site-header{
  z-index: 20;
  background: rgba(246,241,232,.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

/* Sticky header on desktop/tablet only */
@media (min-width: 901px){
  .site-header{
    position: sticky;
    top: 0;
  }
}

/* Bigger header spacing */
.header-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 18px;
  padding: 26px 0 14px;
}

.brand{
  display:flex;
  align-items:center;
  gap: 18px;
  text-decoration:none;
}

.brand-text{ display:flex; flex-direction:column; gap:4px; }
.brand-name{
  font-family: var(--serif);
  font-weight: 800;
  letter-spacing: .2px;
  font-size: 22px;
}
.brand-tag{
  color: var(--muted);
  font-size: 13px;
}

/* ✅ HOME LOGO: larger, no box/background */
.logo-home{
  width: 300px;
  height: auto;
  display: block;

  background: none;
  padding: 0;
  border: none;
  box-shadow: none;
  border-radius: 0;
}

.header-right{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  min-width: 260px;
}

/* ✅ KW LOGO: light background so black text shows */
.logo-kw{
  width: min(520px, 52vw);
  max-width: 560px;
  border-radius: 18px;

  background: rgba(255,255,255,.92);
  padding: 18px 22px;

  border: 1px solid rgba(31,35,33,.14);
  box-shadow: var(--shadow);
}

.header-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  padding: 10px 0 16px;
  border-top: 1px solid rgba(31,35,33,.08);
}

.nav{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

.nav a{
  text-decoration:none;
  font-weight: 700;
  font-size: 14px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(31,35,33,.10);
  background: rgba(255,255,255,.65);
}
.nav a.active{
  background: linear-gradient(180deg, var(--paper), rgba(255,255,255,.6));
  border-color: rgba(176,138,87,.45);
  box-shadow: 0 10px 25px rgba(176,138,87,.12);
}

.header-cta{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content:flex-end;
}
.pill{
  text-decoration:none;
  font-weight: 800;
  font-size: 13px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(31,35,33,.14);
  background: linear-gradient(180deg, var(--paper), rgba(255,255,255,.7));
}
.pill.ghost{
  background: rgba(255,255,255,.55);
  font-weight: 700;
}

/* Hero */
/* Hero (Photo background + luxury overlay + fade into site bg) */
.hero{
  position: relative;
  overflow: hidden;
  color: #ffffff;

  /* Desktop hero background (WebP first, JPG fallback) */
  background-image: image-set(
    url("/mountain-lake-hero.webp") type("image/webp"),
    url("/mountain-lake-hero.jpg") type("image/jpeg")
  );
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  padding: 120px 0 105px;
}

/* Luxury overlay for readability */
.hero::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.55) 0%,
    rgba(255,255,255,0.35) 50%,
    rgba(255,255,255,0.60) 100%
  );
  z-index: 0;
}

.hero .faith-callout{
  background: rgba(255,255,255,.25);
  border: 1px solid rgba(255,255,255,.45);
  backdrop-filter: blur(6px);
}

/* Fade into your actual site background (matches --bg) */
.hero::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 120px;
  background: linear-gradient(
    to bottom,
    rgba(246,241,232,0) 0%,
    rgba(246,241,232,1) 100%
  );
  z-index: 1;
}

/* Ensure content is above overlays */
.hero .container{
  position: relative;
  z-index: 2;

  /* Premium fade-in */
  animation: heroFade 1.15s ease-out forwards;
  opacity: 0;
  transform: translateY(18px);
}

@keyframes heroFade{
  to{ opacity: 1; transform: translateY(0); }
}

.hero-slim{ padding-top: 100px; }

.hero-grid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 22px;
  align-items: start;
  padding-bottom: 26px;
}

.eyebrow{
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--pine);
  margin: 0 0 12px;
}

h1{
  font-family: var(--serif);
  font-size: clamp(34px, 4.3vw, 56px);
  line-height: 1.05;
  margin: 0 0 14px;
}

.lead{
  margin: 0 0 16px;
  color: #2d332f;
  font-size: 17px;
}

.faith-callout{
  border-left: 4px solid rgba(176,138,87,.65);
  padding: 12px 14px;
  background: rgba(255,255,255,.62);
  border-radius: 14px;
  border: 1px solid rgba(31,35,33,.10);
  margin: 14px 0 18px;
}
.faith-title{
  font-weight: 900;
  color: var(--forest);
  margin-bottom: 4px;
}
.faith-text{ color: var(--muted); font-size: 14px; }
.verse{ display:block; margin-top:6px; font-style: italic; color:#3b403d; }

.hero-actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 6px;
}

  .hero .btn{
  background: rgba(255,255,255,.35);
  border: 1px solid rgba(255,255,255,.60);
  color: #1f2321;
  box-shadow: 0 12px 28px rgba(31,35,33,.08);
  backdrop-filter: blur(6px);
}

.hero .btn.primary{
  background: rgba(176,138,87,.25);
  border-color: rgba(176,138,87,.45);
}

.btn.ghost{ background: rgba(255,255,255,.60); }
.btn.full{ width:100%; }

.trust-row{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  margin-top: 18px;
}
.hero .trust-item{
  background: rgba(255,255,255,.25);
  border: 1px solid rgba(255,255,255,.45);
  color: #2f3a33;
  backdrop-filter: blur(6px);
}

/* Mountain band */
.mountain-band{
  height: 140px;
  background:
    linear-gradient(to top, rgba(246,241,232,1), rgba(246,241,232,0)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1400' height='220' viewBox='0 0 1400 220'%3E%3Cpath d='M0 170 C120 120 220 150 330 120 C420 90 520 100 620 70 C740 20 820 60 910 70 C1030 90 1110 50 1200 70 C1290 90 1340 120 1400 110 L1400 220 L0 220 Z' fill='%23e9decb'/%3E%3Cpath d='M0 185 C150 140 240 170 360 145 C470 120 560 150 700 105 C820 60 920 95 1040 105 C1170 120 1230 85 1400 95 L1400 220 L0 220 Z' fill='%23d8c8ae' opacity='0.9'/%3E%3Cpath d='M0 200 C180 165 280 190 410 170 C540 150 650 180 760 150 C910 110 1040 135 1160 145 C1280 155 1330 140 1400 150 L1400 220 L0 220 Z' fill='%233a4a40' opacity='0.20'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: cover;
  margin-top: 10px;
}

/* Sections */
.section{ padding: 56px 0; }
.section.alt{
  background: linear-gradient(180deg, rgba(255,255,255,.70), rgba(255,255,255,.35));
  border-top: 1px solid rgba(31,35,33,.10);
  border-bottom: 1px solid rgba(31,35,33,.10);
}
.section-head{ margin-bottom: 18px; }
.section-head h2{
  font-family: var(--serif);
  font-size: 30px;
  margin: 0 0 8px;
}
.muted{ color: var(--muted); }
.small{ font-size: 13px; }

.grid3{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.grid2{ display:grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.card{
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(31,35,33,.12);
  border-radius: var(--radius2);
  padding: 18px;
  box-shadow: var(--shadow);
}
.card.premium{
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.70));
  border-color: rgba(176,138,87,.22);
}
.card-title{ margin: 0 0 6px; font-family: var(--serif); }

.card-block{ margin-top: 12px; }
.label{
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 900;
  color: var(--pine);
  margin-bottom: 4px;
}
.biglink{ font-weight: 900; font-size: 18px; text-decoration: none; }
.biglink.small{ font-size: 14px; font-weight: 800; color: #2f3a33; }

.divider{ height: 1px; background: rgba(31,35,33,.14); margin: 16px 0; }

.feature{
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(31,35,33,.12);
  border-radius: var(--radius2);
  padding: 18px;
  box-shadow: 0 14px 34px rgba(31,35,33,.10);
}
.feature h3{ margin: 0 0 8px; font-family: var(--serif); }
.feature p{ margin: 0 0 10px; color: #343a36; }
.feature ul{ margin: 0; padding-left: 18px; color: var(--muted); }
.feature li{ margin: 8px 0; }

.areas-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 14px; }
.area-card{
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(31,35,33,.12);
  border-radius: var(--radius2);
  padding: 18px;
  box-shadow: 0 14px 34px rgba(31,35,33,.08);
}
.area-card h3{ margin:0 0 6px; font-family: var(--serif); }

.map-wrap{ margin-top: 22px; }
.map-title{ margin: 0 0 10px; font-family: var(--serif); }
.map-frame{
  width: 100%;
  height: 420px;
  border: 1px solid rgba(31,35,33,.14);
  border-radius: var(--radius2);
  box-shadow: var(--shadow);
}

.timeline{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.step{
  display:flex;
  gap: 12px;
  align-items:flex-start;
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(31,35,33,.12);
  border-radius: var(--radius2);
  padding: 16px;
  box-shadow: 0 14px 30px rgba(31,35,33,.08);
}
.step-num{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(176,138,87,.25), rgba(255,255,255,.78));
  border: 1px solid rgba(176,138,87,.35);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 950;
}
.step-body h3{ margin:0 0 6px; font-family: var(--serif); }
.step-body p{ margin:0; color: var(--muted); }

.pricing-wrap{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.price-card{
  position: relative;
  background: rgba(255,255,255,.76);
  border: 1px solid rgba(31,35,33,.12);
  border-radius: var(--radius2);
  padding: 18px;
  box-shadow: var(--shadow);
}
.price-card.featured{
  border-color: rgba(176,138,87,.45);
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.72));
}
.ribbon{
  position:absolute;
  top: 14px;
  right: 14px;
  font-weight: 900;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(176,138,87,.18);
  border: 1px solid rgba(176,138,87,.35);
}
.price{
  font-family: var(--serif);
  font-size: 34px;
  font-weight: 900;
  margin: 8px 0 4px;
}
.bullet{ margin: 10px 0 0; padding-left: 18px; color: var(--muted); }
.bullet li{ margin: 8px 0; }

/* Contact lines */
.contact-lines{ display:grid; gap: 10px; margin-top: 12px; }
.contact-lines .label{ display:inline-block; width: 88px; }

/* ===== Premium form layout ===== */
.form-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.form-grid .full{ grid-column: 1 / -1; }

.form-card h3{ margin-top: 0; }

.help-inline{
  font-size: 12px;
  color: var(--muted);
  margin-top: 6px;
}

.form-actions{
  margin-top: 14px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

.success{
  display:none;
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(176,138,87,.35);
  background: rgba(176,138,87,.12);
  color: #2b302d;
  font-weight: 700;
}

label{ display:block; font-weight: 800; margin-top: 12px; color: #2b302d; }
input, textarea, select{
  width:100%;
  margin-top: 6px;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(31,35,33,.18);
  background: rgba(255,255,255,.82);
  outline: none;
  font-family: var(--sans);
}
input:focus, textarea:focus, select:focus{
  border-color: rgba(176,138,87,.55);
  box-shadow: 0 0 0 4px rgba(176,138,87,.15);
}

/* Footer */
.site-footer{
  padding: 22px 0;
  border-top: 1px solid rgba(31,35,33,.12);
  background: rgba(255,255,255,.55);
}
.footer-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  color: var(--muted);
  font-weight: 700;
}
.footer-links{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
}
.footer-links a{ color: var(--muted); text-decoration:none; }
.footer-links a:hover{ text-decoration: underline; }

.fineprint{
  color: var(--muted);
  font-size: 12px;
  margin-top: 16px;
  opacity: .9;
  line-height: 1.4;
}

@media (max-width: 980px){
  .hero-grid{ grid-template-columns: 1fr; }
  .header-nav{ flex-direction: column; align-items: flex-start; }
  .header-cta{ justify-content:flex-start; }
  .grid3{ grid-template-columns: 1fr; }
  .areas-grid{ grid-template-columns: 1fr; }
  .timeline{ grid-template-columns: 1fr; }
  .pricing-wrap{ grid-template-columns: 1fr; }
  .logo-kw{ width: min(520px, 88vw); }
  .form-grid{ grid-template-columns: 1fr; }
}

/* Subtle parallax on desktop only */
@media (min-width: 901px){
  .hero{ background-attachment: fixed; }
}

/* Mobile: use portrait crop + reduce hero height */
@media (max-width: 900px){
  .hero{
    background-image: image-set(
      url("/mountain-lake-hero-mobile.webp") type("image/webp"),
      url("/mountain-lake-hero-mobile.jpg") type("image/jpeg")
    );
    background-attachment: scroll;
    background-position: center top;
    padding: 88px 0 78px;
  }

  .hero::after{ height: 80px; }
}

@media (max-width: 900px){

  .hero{
    padding: 70px 0 60px;
  }

  .hero .faith-callout{
    padding: 10px 12px;
  }

  .hero .trust-row{
    gap: 6px;
  }

  .hero .trust-item{
    font-size: 11px;
    padding: 6px 8px;
  }
}
/* ==========================================
   MOBILE STACK: HOME logo + Brand + KW logo
   Paste at VERY BOTTOM of styles.css
   ========================================== */
@media (max-width: 900px){

  /* Force the top header section into a single column */
  .header-top{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 12px !important;
  }

  /* Make sure brand block is also stacked */
  .brand{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 10px !important;
  }

  /* If brand text is separate, center it */
  .brand-text{
    text-align: center !important;
    align-items: center !important;
  }

  /* HOME logo size for mobile */
  .logo-home{
    width: min(72vw, 180px) !important;
    height: auto !important;
    max-width: 180px !important;
  }

  /* Force the KW container to be its own row and centered */
  .header-right{
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 !important;
  }

  .logo-kw{
    width: min(92vw, 320px) !important;
    max-width: 320px !important;
    height: auto !important;
    margin: 0 auto !important;
  }
}
@media (max-width: 900px){
  .hero .card.premium{
    background: rgba(255,255,255,0.40) !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
    padding: 14px !important;
  }
}
}
/* ==========================================
   MOBILE: DISABLE STICKY/FIXED HEADER (SCROLL)
   Paste at VERY BOTTOM of styles.css
   ========================================== */
@media (max-width: 900px){

  /* Kill sticky/fixed on any header-related wrapper */
  header,
  .site-header,
  .header,
  .masthead,
  .topbar,
  .sticky,
  .is-sticky,
  .header-wrap,
  .header-inner,
  .header-top,
  .header-nav,
  .navwrap,
  .container-header{
    position: static !important;
    top: auto !important;
    inset: auto !important;
    z-index: auto !important;
  }

  /* Some designs use transform/filter on sticky wrappers */
  header,
  .site-header,
  .header-wrap,
  .header-inner{
    transform: none !important;
    filter: none !important;
  }

  /* Prevent “sticky spacing” that keeps a big gap */
  body{
    padding-top: 0 !important;
  }
  main{
    padding-top: 0 !important;
  }
}
/* =====================================
   HERO LIGHT MODE FORCE OVERRIDE
   ===================================== */

.hero::before{
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.55) 0%,
    rgba(255,255,255,0.35) 50%,
    rgba(255,255,255,0.60) 100%
  ) !important;
}

.hero h1{
  color: #1f2321 !important;
  text-shadow: none !important;
}

.hero .lead{
  color: #2f3a33 !important;
  text-shadow: none !important;
}

.hero .eyebrow{
  color: #3a4a40 !important;
  text-shadow: none !important;
}

.hero .faith-callout{
  background: rgba(255,255,255,.18) !important;
  border: 1px solid rgba(255,255,255,.45) !important;
  backdrop-filter: blur(6px) !important;
}

.hero .btn{
  background: rgba(255,255,255,.35) !important;
  border: 1px solid rgba(255,255,255,.60) !important;
  color: #1f2321 !important;
}

.hero .trust-item{
  background: rgba(255,255,255,.25) !important;
  border: 1px solid rgba(255,255,255,.45) !important;
  color: #2f3a33 !important;
}
/* =====================================
   HERO RIGHT CONTACT CARD FIX
   ===================================== */

/* Target hero right card only */
.hero .card,
.hero .card.premium{
 background: rgba(255,255,255,0.32) !important;   /* <-- more transparent */
  backdrop-filter: blur(4px) !important;           /* subtle glass */
  -webkit-backdrop-filter: blur(4px) !important;   /* Safari/iPhone */
  border: 1px solid rgba(255,255,255,0.55) !important;
  box-shadow: 0 18px 40px rgba(31,35,33,.10) !important;
}

/* Make ALL text inside hero card black */
.hero .card *,
.hero .card.premium *{
  color: #1f2321 !important;
  text-shadow: none !important;
}

/* Labels a little darker for contrast */
.hero .card.premium .label{
  color: #2f3a33 !important;
}

/* Make links bold and readable */
.hero .card a{
  color: #1f2321 !important;
  font-weight: 700;
}
/* ==========================================
   HEADER MLS FEATURE PILL (3rd line only)
   ========================================== */

.header-cta{
  flex-wrap: wrap;
}

/* Make the MLS pill larger + centered */
.header-cta .mls-feature{
  font-size: 16px;
  font-weight: 900;
  padding: 14px 20px;
  border-radius: 16px;

  background: linear-gradient(
    180deg,
    rgba(176,138,87,.25),
    rgba(255,255,255,.85)
  );

  border: 1px solid rgba(176,138,87,.45);
  box-shadow: 0 14px 32px rgba(176,138,87,.15);

  width: 100%;        /* forces it onto its own line */
  text-align: center;      /* center text */
}

/* Slight hover lift */
.header-cta .mls-feature:hover{
  transform: translateY(-2px);
  transition: all .2s ease;
}
/* ==========================================
   HEADER: Featured MLS pill (own line, centered, icon)
   ========================================== */

.header-cta{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

/* Featured MLS CTA */
.header-cta .mls-feature{
  flex: 0 0 100%;              /* its own line */
  max-width: 560px;            /* keeps it centered and premium */
  justify-content: center;

  font-size: 18px;
  font-weight: 950;
  padding: 14px 18px;
  border-radius: 18px;
  text-align: center;

  background: linear-gradient(
    180deg,
    rgba(176,138,87,.28),
    rgba(255,255,255,.78)
  );
  border: 1px solid rgba(176,138,87,.55);
  box-shadow: 0 16px 34px rgba(176,138,87,.16);

  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* Property search icon (magnifying glass + house) */
.header-cta .mls-feature .mls-icon{
  width: 22px;
  height: 22px;
  display: inline-block;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M10 4a6 6 0 1 0 3.54 10.86l.8.8H14l-2 2v2h7v-7h-2l-2-2v-.34l-.8-.8A6 6 0 0 0 10 4Zm0 2a4 4 0 1 1 0 8a4 4 0 0 1 0-8Zm-4 14v-6l6-5l6 5v6h-4v-4h-4v4H6Z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M10 4a6 6 0 1 0 3.54 10.86l.8.8H14l-2 2v2h7v-7h-2l-2-2v-.34l-.8-.8A6 6 0 0 0 10 4Zm0 2a4 4 0 1 1 0 8a4 4 0 0 1 0-8Zm-4 14v-6l6-5l6 5v6h-4v-4h-4v4H6Z'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity: .92;
}

.header-cta .mls-feature:hover{
  transform: translateY(-2px);
  transition: transform .18s ease;
}

/* Mobile: keep it full width and clean */
@media (max-width: 900px){
  .header-cta .mls-feature{
    max-width: 100%;
  }
}