/* The Hawley Team at KW Florida Living
   ---------------------------------------------------------------------------
   Palette is taken from the logo itself rather than invented, so the site and
   the sign in the yard are the same brand. Navy and blue are the Hawley roof
   mark; the red is Keller Williams and is used sparingly, as KW's own guidance
   requires. */

:root {
  --navy:      #173976;
  --blue:      #417dbc;
  --blue-dark: #2f639b;
  --kw-red:    #b10302;
  --ink:       #12212c;
  --body:      #3e5468;
  --sub:       #6e8497;
  --line:      #dce5eb;
  --wash:      #eff4f7;
  --wash-2:    #f7fafb;
  --white:     #ffffff;
  --gold:      #c8922a;

  --shadow-sm: 0 1px 2px rgba(18,33,44,.06), 0 2px 8px rgba(18,33,44,.05);
  --shadow-md: 0 2px 6px rgba(18,33,44,.07), 0 12px 30px rgba(18,33,44,.09);
  --shadow-lg: 0 4px 12px rgba(18,33,44,.08), 0 24px 60px rgba(18,33,44,.13);

  --r-sm: 8px;  --r-md: 12px;  --r-lg: 18px;  --r-xl: 26px;
  --wrap: 1180px;
  --gut: clamp(18px, 4vw, 40px);

  /* One scale, used everywhere. Type that changes size on its own between
     breakpoints beats fifty media queries. */
  --t-hero: clamp(2.3rem, 1.2rem + 4.4vw, 4.6rem);
  --t-h1:   clamp(1.9rem, 1.2rem + 2.6vw, 3.2rem);
  --t-h2:   clamp(1.5rem, 1.1rem + 1.5vw, 2.25rem);
  --t-h3:   clamp(1.15rem, 1rem + .6vw, 1.5rem);
  --t-lede: clamp(1.05rem, .98rem + .4vw, 1.3rem);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0; background: var(--white); color: var(--ink);
  font: 17px/1.62 -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: var(--blue-dark); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gut); }
.eyebrow {
  font-size: .78rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--blue); margin: 0 0 12px;
}
.lede { font-size: var(--t-lede); line-height: 1.55; color: var(--body); }

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 15px 28px; border: 0; border-radius: 999px; cursor: pointer;
  font: 600 1rem/1 inherit; text-decoration: none; white-space: nowrap;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.btn-primary { background: var(--navy); color: #fff; box-shadow: var(--shadow-md); }
.btn-primary:hover { background: #0f2a5c; transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.btn-ghost { background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.5); backdrop-filter: blur(8px); }
.btn-ghost:hover { background: rgba(255,255,255,.24); transform: translateY(-2px); }
.btn-quiet { background: #fff; color: var(--navy); border: 1px solid var(--line); }
.btn-quiet:hover { border-color: var(--blue); color: var(--blue-dark); transform: translateY(-2px); }
.btn-sm { padding: 11px 20px; font-size: .93rem; }

/* Buttons do not wrap by default, which is right for "Search" and wrong for a
   whole question. On a narrow screen let the long ones wrap rather than widen
   the page. */
@media (max-width: 560px) {
  .btn { white-space: normal; text-align: center; }
}

/* ----------------------------------------------------------------- header */
.hdr {
  position: sticky; top: 0; z-index: 60; background: rgba(255,255,255,.9);
  backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid transparent;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.hdr.stuck { border-bottom-color: var(--line); box-shadow: var(--shadow-sm); }
.hdr-in { display: flex; align-items: center; gap: 22px; height: 76px; }
.hdr-logo { flex: 0 0 auto; }
.hdr-logo img { height: 40px; width: auto; }
.nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.nav a {
  padding: 10px 11px; border-radius: var(--r-sm); text-decoration: none; white-space: nowrap;
  color: var(--ink); font-weight: 550; font-size: .94rem; transition: background .15s, color .15s;
}
.nav a:hover { background: var(--wash); color: var(--navy); }
.nav a.cta { background: var(--navy); color: #fff; margin-left: 6px; padding-inline: 16px; }
.nav a.cta:hover { background: #0f2a5c; }
.burger { display: none; margin-left: auto; background: none; border: 0; padding: 10px; cursor: pointer; }
.burger span { display: block; width: 24px; height: 2px; background: var(--ink); border-radius: 2px; }
.burger span + span { margin-top: 6px; }

@media (max-width: 1060px) {
  .nav {
    position: fixed; inset: 76px 0 auto; flex-direction: column; align-items: stretch;
    background: #fff; border-bottom: 1px solid var(--line); padding: 12px var(--gut) 22px;
    gap: 2px; box-shadow: var(--shadow-md); display: none;
  }
  .nav.open { display: flex; }
  .nav a { padding: 14px 12px; font-size: 1.05rem; }
  .hdr-in { height: 64px; }
  .hdr-logo img { height: 30px; }
  .nav { top: 64px; }
  .nav a.cta { margin: 10px 0 0; text-align: center; }
  .burger { display: block; }
}

/* ------------------------------------------------------------------- hero */
.hero { position: relative; color: #fff; overflow: hidden; isolation: isolate; }
.hero-bg { position: absolute; inset: 0; z-index: -2; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 46%; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(7,18,36,.72) 0%, rgba(7,18,36,.55) 45%, rgba(7,18,36,.86) 100%),
    linear-gradient(100deg, rgba(23,57,118,.72) 0%, rgba(23,57,118,.28) 52%, transparent 78%);
}
.hero-in { padding-block: clamp(70px, 11vw, 140px) clamp(60px, 9vw, 110px); max-width: 830px; }
.hero h1 {
  font-size: var(--t-hero); line-height: 1.03; letter-spacing: -.022em;
  margin: 0 0 20px; font-weight: 800; text-wrap: balance;
}
.hero p.lede { color: rgba(255,255,255,.93); max-width: 640px; font-size: clamp(1.1rem, 1rem + .5vw, 1.4rem); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* search bar sitting on the hero */
.hero-search {
  margin-top: 38px; background: rgba(255,255,255,.97); border-radius: var(--r-xl);
  padding: 10px 10px 10px 22px; display: flex; align-items: center; gap: 10px;
  box-shadow: var(--shadow-lg); max-width: 620px;
}
.hero-search input {
  flex: 1; border: 0; outline: none; background: none; font: 1.05rem inherit; color: var(--ink);
  padding: 14px 0; min-width: 0;
}
.hero-search input::placeholder { color: var(--sub); }
@media (max-width: 560px) {
  .hero-search { flex-direction: column; align-items: stretch; padding: 14px; border-radius: var(--r-lg); }
  .hero-search input { padding: 8px 4px; }
  .hero-search .btn { width: 100%; }
}

/* the strip of live numbers under the hero */
.pulse { background: var(--navy); color: #fff; }
.pulse-in { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding-block: 26px; }
.pulse-item { text-align: center; padding: 6px 10px; border-left: 1px solid rgba(255,255,255,.16); }
.pulse-item:first-child { border-left: 0; }
.pulse-n { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem); font-weight: 800; letter-spacing: -.02em; }
.pulse-l { font-size: .8rem; color: rgba(255,255,255,.72); margin-top: 3px; letter-spacing: .02em; }
@media (max-width: 720px) {
  .pulse-in { grid-template-columns: repeat(2, 1fr); gap: 18px 4px; }
  .pulse-item:nth-child(3) { border-left: 0; }
}

/* ---------------------------------------------------------------- sections */
.sec { padding: clamp(56px, 8vw, 104px) 0; }
.sec-wash { background: var(--wash-2); }
.sec-head { max-width: 680px; margin-bottom: 42px; }
.sec-head h2 { font-size: var(--t-h2); line-height: 1.16; letter-spacing: -.018em; margin: 0 0 14px; text-wrap: balance; }
.sec-head p { margin: 0; }

.grid { display: grid; gap: 22px; }
.g-2 { grid-template-columns: repeat(2, 1fr); }
.g-3 { grid-template-columns: repeat(3, 1fr); }
.g-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .g-3, .g-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .g-2, .g-3, .g-4 { grid-template-columns: 1fr; } }

/* tool cards */
.tool {
  display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 26px; text-decoration: none; color: inherit;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.tool:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: #c3d6e4; }
.tool-ico {
  width: 46px; height: 46px; border-radius: var(--r-md); display: grid; place-items: center;
  background: var(--wash); color: var(--blue-dark); margin-bottom: 16px;
}
.tool-ico svg { width: 24px; height: 24px; stroke-width: 1.7; }
.tool h3 { font-size: 1.12rem; margin: 0 0 7px; letter-spacing: -.01em; }
.tool p { margin: 0; font-size: .95rem; color: var(--body); line-height: 1.5; }
.tool-go { margin-top: 16px; font-size: .9rem; font-weight: 650; color: var(--blue-dark); }

/* split feature */
.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 5vw, 70px); align-items: center; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
.split img { border-radius: var(--r-lg); box-shadow: var(--shadow-md); }

/* ------------------------------------------------------------------ footer */
.ftr { background: var(--ink); color: rgba(255,255,255,.74); padding: clamp(48px,6vw,78px) 0 30px; font-size: .93rem; }
.ftr a { color: rgba(255,255,255,.86); text-decoration: none; }
.ftr a:hover { color: #fff; text-decoration: underline; }
.ftr-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 34px; }
@media (max-width: 900px) { .ftr-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ftr-top { grid-template-columns: 1fr; } }
.ftr h4 { color: #fff; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 14px; }
.ftr ul { list-style: none; margin: 0; padding: 0; }
.ftr li { margin-bottom: 9px; }
.ftr-logo img { height: 46px; filter: brightness(0) invert(1); opacity: .96; }
.ftr-legal {
  margin-top: 42px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.14);
  font-size: .78rem; line-height: 1.66; color: rgba(255,255,255,.52);
}
.ftr-legal strong { color: rgba(255,255,255,.72); }
.eho { display: inline-block; width: 15px; vertical-align: -2px; margin-right: 5px; }

/* Reveal on scroll, gently.
   ---------------------------------------------------------------------------
   Scoped to html.js, which an inline script in the head sets. Without that
   scope a JavaScript failure of any kind leaves every .rise element at opacity
   0 and the page renders blank, which is a spectacular way to lose a visitor
   over a decoration. No JS, no hiding, no problem. */
.js .rise { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.js .rise.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .rise { opacity: 1; transform: none; } }

/* --------------------------------------------------------- footer socials */
.ftr-social { display: flex; gap: 10px; margin-bottom: 34px; flex-wrap: wrap; }
.ftr-social a {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.08); color: rgba(255,255,255,.8);
  transition: background .16s ease, color .16s ease, transform .16s ease;
}
.ftr-social a:hover { background: var(--blue); color: #fff; transform: translateY(-2px); }
.ftr-social svg { width: 19px; height: 19px; }

/* ------------------------------------------------- the full community list */
/* Cards for the biggest handful, then every single one as a plain link. A
   resident of a 9-sale community should still find their own, and 489 of these
   pages had no inbound link at all before this existed. Columns keep 274 names
   to about the height of six cards. */
.allcomm .commList {
  list-style: none; margin: 0; padding: 0;
  columns: 4 200px; column-gap: 26px;
}
.allcomm .commList li { break-inside: avoid; margin: 0 0 2px; }
.allcomm .commList a {
  display: flex; justify-content: space-between; gap: 10px; align-items: baseline;
  padding: 6px 8px; border-radius: var(--r-sm); text-decoration: none;
  color: var(--body); font-size: .93rem; line-height: 1.35;
}
.allcomm .commList a:hover { background: var(--wash); color: var(--navy); }
.allcomm .commList a span { color: var(--sub); font-size: .82rem; flex: 0 0 auto; }
.allcomm .commList li.hide { display: none; }
@media (max-width: 560px) { .allcomm .commList { columns: 2 140px; } }