/* KeyLake Estates Website V1.8.42 — branded experience refinement
   Presentation-only overrides. No form contracts, endpoints, IDs, pricing, or runtime behavior changed. */

:root{
  --shadow:0 10px 30px rgba(0,36,74,.07);
  --radius:13px;
}

html{scroll-padding-top:92px}
body{
  color:#2E363A;
  line-height:1.58;
  letter-spacing:-.004em;
}
img{height:auto}

/* Header: quieter shell, clearer action. */
.topnote{
  min-height:31px;
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1.35;
  color:rgba(46,54,58,.86);
}
header{
  background:rgba(255,255,255,.975);
  border-bottom:1px solid rgba(0,36,74,.10);
}
nav{min-height:70px}
.brand{letter-spacing:.045em}
.brand small{color:rgba(46,54,58,.68);letter-spacing:.09em}
.joe-logo-slot{width:44px;height:44px;flex-basis:44px}
.navlinks{gap:17px}
.navlinks a:not(.button){
  position:relative;
  padding:25px 0 23px;
  color:rgba(46,54,58,.88);
}
.navlinks a:not(.button)::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:15px;
  height:2px;
  background:var(--green);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .16s ease;
}
.navlinks a:not(.button):hover::after,
.navlinks a:not(.button)[aria-current="page"]::after{transform:scaleX(1)}
.navlinks a[aria-current="page"]{
  color:var(--navy);
  text-decoration:none;
}
.navlinks .button{
  background:var(--navy);
  color:#fff;
  border:1px solid var(--navy);
  box-shadow:none;
  padding:10px 15px;
}
.navlinks .button:hover{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:none}

/* Buttons: service-company controls rather than SaaS pills. */
.button,
button,
input[type="submit"],
input[type="button"]{
  border-radius:9px;
  letter-spacing:0;
}
.button{min-height:44px}
.button:hover{transform:none}
.button:focus-visible,
button:focus-visible,
summary:focus-visible{
  outline:3px solid rgba(36,133,210,.28);
  outline-offset:3px;
}

/* Hero: keep the photography, but make the message feel more direct and local. */
.hero{min-height:535px}
.hero::before{
  background-image:linear-gradient(90deg,rgba(0,36,74,.78) 0%,rgba(0,36,74,.56) 43%,rgba(0,36,74,.18) 72%,rgba(0,36,74,.04) 100%),url('assets/about/house-fall.jpg');
  filter:saturate(.86) contrast(.98);
}
.hero .wrap{padding:76px 0 68px}
.hero h1{max-width:790px}
.hero p{max-width:610px;color:rgba(255,255,255,.91)}
.hero .button{background:#fff;color:var(--navy);border-color:#fff}
.hero .button.alt{background:rgba(0,36,74,.18);color:#fff;border-color:rgba(255,255,255,.48)}
.hero .button.alt:hover{background:rgba(255,255,255,.10);border-color:#fff}
.eyebrow{color:rgba(255,255,255,.88)}

/* Inner-page hierarchy. */
.page-hero{
  background:linear-gradient(135deg,#FFFFFF 0%,#FFFFFF 62%,#E5EEF4 100%);
  border-bottom:1px solid rgba(0,36,74,.08);
}
.page-hero h1{color:var(--navy)!important;max-width:800px}
.page-hero p{color:rgba(46,54,58,.82)!important}
.kicker{color:var(--green);font-weight:800}
h2{color:var(--navy)}
h3{color:#2E363A}
.lead{color:rgba(46,54,58,.80)}

/* Reduce visual bulk without making the site sterile. */
section{border-top:1px solid rgba(0,36,74,.035)}
main>section:first-child{border-top:0}
.section-head{align-items:start}
.card,.step,.situation,.report-card,.plan,.intake,.info-card,.side-card,.privacy-box{
  border-color:rgba(0,36,74,.11);
}
.card,.step,.situation,.info-card,.side-card{
  background:#fff;
}
.card,.step,.situation,.info-card,.side-card,.referral-point{
  transition:border-color .16s ease,background-color .16s ease;
}
@media (hover:hover){
  .card:hover,.step:hover,.situation:hover,.info-card:hover,.side-card:hover,.referral-point:hover{
    border-color:rgba(36,133,210,.34);
  }
}
.icon,.check,.status{background:#E5EEF4;color:var(--green)}
.photo,.winter,.gallery-shell,.gallery-stage,.about-gallery{overflow:hidden}
.photo,.winter,.gallery-slide img{filter:saturate(.92) contrast(.99)}

/* Plans: keep Core/Premium equally credible; use hierarchy instead of a dark "upgrade" card. */
.plan{position:relative}
.plan.premium{border-color:rgba(0,36,74,.22)}
.plan.premium::before{
  content:"";
  position:absolute;
  left:-1px;right:-1px;top:-1px;
  height:4px;
  background:var(--blue);
  border-radius:13px 13px 0 0;
}
.price-row{padding:11px 0}

/* Forms: calmer inputs and more obvious selected state. */
.intake{overflow:hidden;border-color:rgba(0,36,74,.13)}
.intake-head{border-bottom-color:rgba(0,36,74,.10)}
.field label,.fieldset-title{color:var(--navy)}
.field input,.field select,.field textarea{
  min-height:46px;
  border-color:rgba(0,36,74,.17);
  background:#fff;
  padding:12px 13px;
}
.field textarea{min-height:112px}
.field input:hover,.field select:hover,.field textarea:hover{border-color:rgba(0,36,74,.30)}
.choice label{border-color:rgba(0,36,74,.15);background:#fff}
.choice input:checked+label{
  border-color:var(--blue);
  background:#E5EEF4;
  box-shadow:0 0 0 1px var(--blue);
}
.progress-track{background:rgba(0,36,74,.09)}
.progress-bar{background:var(--blue)}
.review-row{border-bottom-color:rgba(0,36,74,.08)}

/* Closing CTA: invitation, not a billboard. */
.contact{
  border-color:rgba(0,36,74,.14);
  background:linear-gradient(135deg,#FFFFFF 0%,#FFFFFF 70%,#E5EEF4 100%);
}
.contact h2{color:var(--navy)}
.contact .button{background:var(--navy);color:#fff;border-color:var(--navy)}
.contact .button:hover{background:var(--blue);border-color:var(--blue)}
.contact .button.alt:hover{border-color:rgba(36,133,210,.45);background:#E5EEF4}

/* Mobile navigation and touch targets. */
.mobile-menu summary{
  min-height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-color:rgba(0,36,74,.16);
  color:var(--navy);
}
.mobile-menu-panel{
  width:min(280px,calc(100vw - 32px));
  border-color:rgba(0,36,74,.12);
  border-radius:12px;
  box-shadow:0 18px 42px rgba(0,36,74,.13);
}
.mobile-menu-panel a{min-height:44px;display:flex;align-items:center}
.mobile-menu-panel a[aria-current="page"]{background:#E5EEF4;color:var(--navy)}

/* Footer: retain full utility while reducing visual noise. */
.site-footer{border-top:4px solid var(--green)}
.footer-wordmark{letter-spacing:.055em}
.footer-logo-mark{width:34px;height:34px}
.footer-column h2{color:#fff}
.footer-bottom{border-top-color:rgba(255,255,255,.13)}

@media (max-width:900px){
  header{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
  nav{min-height:64px}
  .navlinks{display:none}
  .mobile-menu{display:block}
  .hero{min-height:480px}
  .hero::before{background-position:center 45%}
  .page-hero{padding:56px 0 44px!important}
  .section-head{gap:12px}
}

@media (max-width:640px){
  .topnote{font-size:.76rem;padding:7px 14px}
  .joe-logo-slot{width:36px;height:36px;flex-basis:36px}
  .brand{font-size:.88rem}
  .brand small{font-size:.51rem}
  .hero{min-height:455px}
  .hero::before{background-image:linear-gradient(90deg,rgba(0,36,74,.80) 0%,rgba(0,36,74,.59) 60%,rgba(0,36,74,.22) 100%),url('assets/about/house-fall.jpg')}
  .hero .wrap{padding:60px 0 54px}
  .hero-actions{display:grid;grid-template-columns:1fr}
  .hero-actions .button{width:100%}
  .contact-actions{gap:9px}
  .footer-bottom{gap:12px}
}

@media (prefers-reduced-motion:reduce){
  .navlinks a:not(.button)::after,
  .card,.step,.situation,.info-card,.side-card,.referral-point{transition:none}
}