/*
 * The Doner Group — Puget Sound real estate.
 *
 * The brief: modern enough for buyers in their thirties, without throwing away
 * forty years of standing. Two decisions carry the whole design.
 *
 * 1. The search is the hero. The old site led with a slideshow of houses; every
 *    portal a younger buyer already uses (Redfin, Zillow, Compass) leads with a
 *    search box, because that is the first thing they came to do. The listing
 *    photography available here is a decade old and would have undercut the
 *    "modern" brief, so it appears once, atmospherically, and never as a
 *    glamour shot.
 *
 * 2. Pacific Northwest color, not real-estate color. The trade defaults to
 *    navy-and-gold or grey corporate. Deep evergreen with warm cream and a
 *    cedar accent belongs to this region and reads current without chasing a
 *    trend that dates in two years.
 */

:root {
  --ink:    #0E1A16;   /* deep evergreen, near-black                */
  --ink-2:  #16261F;   /* the lighter dark, for panels              */
  --cream:  #F8F6F1;   /* warm page white                           */
  --sand:   #EDE8DD;   /* alternating sections                      */
  --line:   #DCD5C7;   /* rules and edges                           */
  --text:   #2B322E;   /* body copy                                 */
  --muted:  #6E756F;   /* captions                                  */
  --clay:   #B4653A;   /* the accent — cedar, used sparingly        */
  --clay-d: #96522E;
  --moss:   #3F6B57;

  --shell: min(1200px, 100% - 2.6rem);
  --serif: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  --sans:  system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--cream); color: var(--text);
  font-family: var(--sans); font-size: 17px; line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}
.wrap { width: var(--shell); margin-inline: auto; }
.narrow { max-width: 760px; }
h1, h2, h3 { font-family: var(--serif); color: var(--ink); line-height: 1.12; font-weight: 700; }
a { color: var(--clay); }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 1rem; top: 1rem; z-index: 100; background: var(--ink); color: #fff; padding: .6rem 1rem; border-radius: 4px; }

/* ── header ──────────────────────────────────────────────────────────────── */

.head {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--cream) 90%, transparent);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.head-in { display: flex; align-items: center; gap: 1.6rem; height: 70px; }
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; }
/* Fred's logo. Height-constrained so the header keeps its proportions however
   the artwork is shaped; width auto so it never distorts. */
.brand-logo { height: 2.6rem; width: auto; display: block; }
@media (max-width: 640px) { .brand-logo { height: 2.2rem; } }
.brand-txt { font-family: var(--serif); font-size: 1.12rem; font-weight: 700; color: var(--ink); }
.nav { margin-left: auto; display: flex; align-items: center; gap: 1.5rem; }
.nav a { color: var(--text); text-decoration: none; font-size: .94rem; font-weight: 500; }
.nav a:hover { color: var(--ink); }
.nav a.is-here { color: var(--ink); box-shadow: inset 0 -2px 0 var(--clay); }
.nav-btn { background: var(--ink); color: var(--cream) !important; padding: .5rem 1rem; border-radius: 2px; }
.nav-btn:hover { background: var(--moss); }
.head-tel { color: var(--ink); text-decoration: none; font-weight: 700; font-size: .95rem; }
@media (max-width: 900px) { .nav a:not(.nav-btn) { display: none; } .head-tel { display: none; } }

/* ── hero ────────────────────────────────────────────────────────────────── */

.hero { position: relative; background: var(--ink); overflow: hidden; }
.hero-bg { position: absolute; inset: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Heavy on the left where the words are, so the photograph keeps some life on
   the right instead of being flattened into a grey wash. */
.hero-bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(96deg, rgba(14,26,22,.94) 0%, rgba(14,26,22,.86) 42%,
                                      rgba(14,26,22,.55) 74%, rgba(14,26,22,.30) 100%);
}
/* The header is sticky and overlays the hero, so the first line has to clear
   its 70px or the headline is beheaded on load. */
.hero-in { position: relative; padding: calc(70px + clamp(3rem, 10vh, 6rem)) 0 clamp(3.4rem, 9vh, 5.5rem); }
.kicker {
  color: #9FB3A6; font-size: .76rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; margin-bottom: 1.1rem;
}
.hero h1 { color: #fff; font-size: clamp(2.2rem, 6vw, 4.2rem); letter-spacing: -0.02em; }
.hero-sub { color: #D5DAD4; font-size: clamp(1.02rem, 2.3vw, 1.2rem); max-width: 48ch; margin-top: 1.4rem; }
.hero-cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.1rem; }
.hero-facts {
  list-style: none; display: flex; flex-wrap: wrap; gap: 2.4rem;
  margin-top: 3rem; padding-top: 1.8rem; border-top: 1px solid rgba(255,255,255,.16);
}
.hero-facts strong { display: block; font-family: var(--serif); font-size: 1.7rem; color: #fff; }
.hero-facts span { display: block; color: #9FB3A6; font-size: .84rem; margin-top: .15rem; }

/* ── buttons ─────────────────────────────────────────────────────────────── */

.btn {
  display: inline-block; border: 0; cursor: pointer; text-decoration: none;
  font-family: inherit; font-size: 1rem; font-weight: 600;
  padding: .9rem 1.7rem; border-radius: 2px; transition: background .15s, border-color .15s;
}
.btn-1 { background: var(--clay); color: #fff; }
.btn-1:hover { background: var(--clay-d); }
.btn-2 { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.5); }
.btn-2:hover { border-color: #fff; }
.btn:focus-visible { outline: 2px solid var(--clay); outline-offset: 3px; }

/* ── sections ────────────────────────────────────────────────────────────── */

.sec { padding: clamp(3.4rem, 8vw, 6rem) 0; }
section[id] { scroll-margin-top: 86px; }
.sec-alt { background: var(--sand); }
.sec-head { max-width: 62ch; margin-bottom: 2.2rem; }
.sec-head h2 { font-size: clamp(1.75rem, 4.2vw, 2.6rem); }
.sec-head p { margin-top: .7rem; color: var(--muted); font-size: 1.05rem; }

/* ── the IDX frames ──────────────────────────────────────────────────────── */

/* The live MLS search, framed so it reads as part of the page rather than a
   bolted-on widget. Fixed height with internal scroll — IDX Broker resizes its
   own content and a fluid height would jump on every filter change. */
.idx-frame {
  background: #fff; border: 1px solid var(--line); border-radius: 3px;
  overflow: hidden; box-shadow: 0 1px 3px rgba(14,26,22,.06);
}
.idx-frame iframe { display: block; width: 100%; height: 760px; border: 0; }
/* Hold the space before the frame arrives, so nothing jumps when it does. */
.idx-frame:not([data-loaded]) { min-height: 760px; }
.idx-frame.idx-short:not([data-loaded]) { min-height: 620px; }
@media (max-width: 640px) { .idx-frame:not([data-loaded]) { min-height: 620px; } }
.idx-short iframe { height: 620px; }
@media (max-width: 640px) { .idx-frame iframe { height: 620px; } }
.idx-more { margin-top: 1rem; color: var(--muted); font-size: .95rem; }

/* ── selling ─────────────────────────────────────────────────────────────── */

.sec-sell { background: var(--ink); color: #CFD6D0; }
.sec-sell h2 { color: #fff; font-size: clamp(1.75rem, 4.2vw, 2.6rem); }
.kicker-light { color: #9FB3A6; }
.sell-grid { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: 1.05fr .95fr; align-items: center; }
@media (max-width: 900px) { .sell-grid { grid-template-columns: 1fr; } }
.sell-copy .lead { margin-top: 1.1rem; font-size: 1.08rem; }
.ticks { list-style: none; margin: 1.6rem 0 2rem; display: grid; gap: .7rem; }
.ticks li { padding-left: 1.7rem; position: relative; font-size: .98rem; }
.ticks li::before {
  content: ''; position: absolute; left: 0; top: .55em;
  width: .62rem; height: .62rem; border-radius: 50%; background: var(--clay);
}
.sell-img img { width: 100%; height: auto; display: block; border-radius: 3px; }

/* ── team ────────────────────────────────────────────────────────────────── */

.team { display: grid; gap: 1.6rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.who { background: #fff; border: 1px solid var(--line); border-radius: 3px; overflow: hidden; display: flex; flex-direction: column; }
.who-pic { aspect-ratio: 7 / 8; background: var(--sand); overflow: hidden; }
.who-pic img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
/* Two of the six have no real photograph on the old site. A monogram is more
   respectable than a stock silhouette, and makes the gap obvious to the client
   rather than hiding it. */
.who-mono {
  width: 100%; height: 100%; display: grid; place-items: center;
  background: linear-gradient(150deg, var(--ink) 0%, var(--moss) 100%);
  color: #fff; font-family: var(--serif); font-size: 2.6rem; letter-spacing: .04em;
}
.who-body { padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; flex: 1; }
.who h3 { font-size: 1.15rem; }
.who-role { color: var(--clay); font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-top: .3rem; }
.who p.bio { margin-top: .7rem; font-size: .93rem; color: var(--muted); }
.who-more {
  margin-top: auto; padding-top: .8rem; background: none; border: 0; cursor: pointer;
  font: inherit; font-size: .88rem; font-weight: 600; color: var(--clay); text-align: left;
}

/* ── areas ───────────────────────────────────────────────────────────────── */

/* ── the areas scroller ───────────────────────────────────────────────────
   Fred liked the scrolling photos and the scrolling neighborhoods on his old
   site. This is both at once, and it is faster than what it replaces: the old
   one was FlexSlider, which cannot show a photo until jQuery has loaded.

   scroll-snap gives native momentum, native rubber-banding and a real
   scrollbar for a mouse — behavior a JavaScript carousel spends kilobytes
   imitating badly. Swipeable, never auto-advancing. */

.area-scroll {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(78%, 340px);
  gap: 1rem; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding: 0 1.3rem;
  padding: .25rem .25rem 1.1rem;
  /* bleed to the screen edge on a phone, so a half-visible card at the right
     tells the reader there is more without needing an arrow to say so */
  margin-inline: calc(var(--gutter, 1.3rem) * -1);
  padding-inline: var(--gutter, 1.3rem);
  scrollbar-width: thin;
}
.area-card {
  scroll-snap-align: start; text-decoration: none; color: inherit;
  background: var(--cream); border: 1px solid var(--line); border-radius: 10px;
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.area-card:hover, .area-card:focus-visible {
  transform: translateY(-3px); border-color: var(--clay);
  box-shadow: 0 14px 30px rgba(14,26,22,.13);
}
.area-card img {
  /* height:auto is load-bearing. The <img> carries width/height attributes so
     the browser reserves space and the page never jumps — but that height is a
     presentational hint, and with nothing in CSS overriding it the image locks
     to 450px and aspect-ratio is ignored entirely. */
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover;
  /* both zeroed: a grid or flex child will not shrink below its intrinsic
     size without them, and the picture bursts the card */
  min-width: 0; min-height: 0;
}
.area-body { padding: .95rem 1.05rem 1.1rem; display: flex; flex-direction: column; gap: .3rem; }
.area-body strong { font-family: var(--serif); font-size: 1.18rem; color: var(--ink); }
.area-body small { color: var(--muted); font-size: .89rem; line-height: 1.45; }
.area-go { margin-top: .35rem; font-size: .85rem; font-weight: 600; color: var(--clay); }
.area-card:hover .area-go { color: var(--clay-d); }

.areas-more { margin: 1.4rem 0 .6rem; color: var(--muted); font-size: .95rem; }

@media (prefers-reduced-motion: reduce) {
  .area-scroll { scroll-behavior: auto; }
  .area-card { transition: none; }
}

.areas { list-style: none; display: flex; flex-wrap: wrap; gap: .55rem; }
.areas li {
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: .45rem 1rem; font-size: .92rem; color: var(--text);
}

/* ── contact ─────────────────────────────────────────────────────────────── */

.sec-contact { background: var(--sand); }
.form { display: grid; gap: 1rem; }
.r2 { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 620px) { .r2 { grid-template-columns: 1fr; } }
.form label { display: block; font-size: .88rem; font-weight: 600; color: var(--ink); }
.form i { color: var(--clay); font-style: normal; }
.form input, .form textarea, .form select {
  width: 100%; margin-top: .4rem; font-family: inherit; font-size: 1rem; color: var(--text);
  background: #fff; border: 1px solid var(--line); border-radius: 2px; padding: .78rem .9rem;
}
.form input:focus, .form textarea:focus, .form select:focus {
  outline: 0; border-color: var(--moss); box-shadow: 0 0 0 3px rgba(63,107,87,.14);
}
.form textarea { resize: vertical; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.fbtn { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.fnote { font-size: .92rem; color: var(--muted); }
.fmsg { font-size: .95rem; min-height: 1.2em; }
.fmsg.ok { color: var(--moss); font-weight: 600; }
.fmsg.bad { color: #A2402F; font-weight: 600; }

/* ── footer ──────────────────────────────────────────────────────────────── */

.foot { background: var(--ink); color: #A9B2AC; padding: 3rem 0 1.8rem; }
.foot-in { display: flex; flex-wrap: wrap; gap: 1.6rem; justify-content: space-between; }
.foot-brand { font-family: var(--serif); color: #fff; font-size: 1.2rem; font-weight: 700; }
.foot-sm { font-size: .85rem; margin-top: .35rem; }
.foot-c { text-align: right; font-size: .95rem; }
.foot-c a { color: #DCE1DC; text-decoration: none; }
.foot-c a:hover { text-decoration: underline; }
@media (max-width: 620px) { .foot-c { text-align: left; } }
.copy { width: var(--shell); margin: 2.2rem auto 0; padding-top: 1.3rem; border-top: 1px solid #27352E; font-size: .8rem; color: #7C857F; }

/* ---------------- Google reviews ----------------
   Quiet by design. Real estate sites tend to shout their testimonials in a
   coloured box; these sit on the page like the rest of the content and let the
   words do it. Google returns at most five and chooses them itself, so the
   layout has to look right with three as well as five. */
.sec-reviews .sec-head p { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.stars { letter-spacing: .06em; color: var(--clay); white-space: nowrap; }
.stars .star.off { color: var(--line); }
.reviews {
  display: grid; gap: 1.4rem;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}
.rv {
  margin: 0; padding: 1.3rem 1.4rem;
  background: var(--cream); border: 1px solid var(--line); border-radius: 12px;
  display: flex; flex-direction: column;
}
.rv blockquote {
  margin: .6rem 0 1.1rem; font-family: var(--serif); font-size: 1.02rem;
  line-height: 1.55; color: var(--text);
  /* Google reviews run long. Four lines is enough to judge the tone; the rest
     is one click away, and a wall of text nobody reads persuades nobody. */
  display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical;
  overflow: hidden;
}
.rv figcaption { margin-top: auto; display: flex; align-items: center; gap: .65rem; }
.rv-face { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; }
.rv-mono {
  display: grid; place-items: center; background: var(--sand); color: var(--moss);
  font-weight: 700; font-family: var(--sans);
}
.rv-who { display: flex; flex-direction: column; min-width: 0; }
.rv-who b { font-size: .92rem; }
.rv-who small { color: var(--muted); font-size: .8rem; }
.reviews-more { margin-top: 1.4rem; }

/* ── live listings under the areas scroller ──────────────────────────────
   The card is a button now rather than a link: it opens real listings in
   place instead of sending the visitor to another site. */
.area-card { border: 0; padding: 0; font: inherit; text-align: left; cursor: pointer;
             background: var(--cream); width: 300px; flex: 0 0 auto; }
.area-card[aria-expanded="true"] { outline: 2px solid var(--clay); outline-offset: 2px; }
/* A city with no widget yet — shown, but plainly not clickable, which is
   better than a link that leads to an empty result. */
.area-card.area-soon { cursor: default; opacity: .82; }
.area-card.area-soon .area-go { color: var(--muted); }

.idx-panel { margin-top: 1.4rem; border: 1px solid var(--line); border-radius: 10px;
             background: #fff; padding: 1rem 1.1rem; }
.idx-panel[hidden] { display: none; }
.idx-head { margin: 0 0 .8rem; display: flex; align-items: center; gap: .8rem;
            font-size: .95rem; color: var(--text); }
.idx-close { margin-left: auto; background: none; border: 1px solid var(--line);
             border-radius: 6px; padding: .3rem .7rem; cursor: pointer; font: inherit;
             font-size: .85rem; color: var(--muted); }
.idx-close:hover { border-color: var(--clay); color: var(--clay); }
.idx-fail { color: var(--clay-d); font-size: .92rem; }
/* IDX ships its own stylesheet; keep its carousel inside our column. */
.idx-panel img { max-width: 100%; height: auto; }