/* Area guide styles (moved out of area.html so every community page can share them) */
:root {
  --white:#ffffff;--off-white:#f8f7f4;--stone-50:#f5f3ef;--stone-100:#e8e4dc;
  --stone-300:#c4bdb0;--stone-500:#8c8278;--stone-700:#4a453f;--ink:#1a1814;
  --accent:#2c4a3e;--accent-lt:#3d6b5c;--gold:#b8976a;
  --serif:'Cormorant Garamond',Georgia,serif;--sans:'Jost',sans-serif;
  --nav-h:72px;--max-w:1240px;--ease:cubic-bezier(0.25,0.46,0.45,0.94);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:var(--sans);color:var(--ink);background:var(--white);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none}
.container{width:100%;max-width:var(--max-w);margin:0 auto;padding:0 clamp(24px,5vw,64px)}
.label{font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.divider{width:48px;height:1px;background:var(--gold);margin:20px 0}
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;padding:14px 32px;border:1px solid currentColor;transition:background .3s var(--ease),color .3s var(--ease);cursor:pointer}
.btn-accent{color:var(--white);background:var(--accent);border-color:var(--accent)}
.btn-accent:hover{background:var(--accent-lt);border-color:var(--accent-lt)}
.btn svg{transition:transform .3s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.js-loaded .reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.visible{opacity:1;transform:none}
.reveal-delay-2{transition-delay:.2s}

/* NAV */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;height:var(--nav-h);display:flex;align-items:center;background:rgba(255,255,255,.97);box-shadow:0 1px 0 var(--stone-100)}
.nav .container{display:flex;align-items:center;justify-content:space-between;width:100%}
.nav-logo-img{height:52px;width:auto}
.nav-links{display:flex;align-items:center;gap:36px}
.nav-links a{font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--stone-700);transition:color .3s}
.nav-links a:hover,.nav-links a.active{color:var(--ink)}
.nav-cta{font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;padding:10px 22px;border:1px solid var(--accent);color:var(--accent);transition:background .3s,color .3s}
.nav-cta:hover{background:var(--accent);color:var(--white)}
.nav-toggle{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:4px}
.nav-toggle span{display:block;width:24px;height:1.5px;background:var(--ink);transition:transform .3s,opacity .3s}
.nav-toggle.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.nav-mobile{display:none;position:fixed;inset:0;background:var(--ink);z-index:99;flex-direction:column;align-items:center;justify-content:center;gap:40px;opacity:0;pointer-events:none;transition:opacity .4s var(--ease)}
.nav-mobile.open{opacity:1;pointer-events:all}
.nav-mobile a{font-family:var(--serif);font-size:clamp(28px,5vw,42px);font-weight:300;color:var(--white);letter-spacing:.04em;transition:color .2s}
.nav-mobile a:hover{color:var(--gold)}

/* PAGE HEADER */
.page-header{padding-top:calc(var(--nav-h) + clamp(48px,6vw,80px));padding-bottom:clamp(48px,6vw,80px);position:relative;overflow:hidden}
.page-header::before{content:'';position:absolute;inset:0;background:linear-gradient(160deg,#1a2e28 0%,#0f1f1b 50%,#1c2535 100%)}
.page-header::after{content:'';position:absolute;top:-20%;right:-10%;width:60%;height:100%;background:radial-gradient(ellipse,rgba(184,151,106,.07) 0%,transparent 65%)}
.page-header .container{position:relative;z-index:2}
.page-header h1{font-family:var(--serif);font-size:clamp(42px,6vw,80px);font-weight:300;color:var(--white);line-height:1.06;letter-spacing:-.01em}
.page-header h1 em{font-style:italic;color:var(--gold)}
.page-header-sub{font-size:14px;font-weight:300;color:rgba(255,255,255,.55);margin-top:20px;max-width:520px;line-height:1.8}

/* TABS */
.area-tabs{background:var(--white);border-bottom:1px solid var(--stone-100);position:sticky;top:var(--nav-h);z-index:50}
.area-tabs .container{display:flex;overflow-x:auto;scrollbar-width:none}
.area-tabs .container::-webkit-scrollbar{display:none}
.area-tab{font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--stone-500);padding:18px 28px;border:none;border-bottom:2px solid transparent;white-space:nowrap;cursor:pointer;background:none;transition:color .3s,border-color .3s}
.area-tab:hover{color:var(--ink)}
.area-tab.active{color:var(--ink);border-bottom-color:var(--accent)}

/* OVERVIEW */
.area-overview{padding:clamp(64px,8vw,100px) 0;background:var(--off-white)}
.area-overview .container{display:grid;grid-template-columns:1fr 1fr;gap:clamp(48px,8vw,96px);align-items:center}
.area-overview-text h2{font-family:var(--serif);font-size:clamp(32px,3.5vw,48px);font-weight:300;color:var(--ink);line-height:1.15;margin:12px 0 24px}
.area-overview-text h2 em{font-style:italic;color:var(--accent)}
.area-overview-text p{font-size:15px;font-weight:300;line-height:1.9;color:var(--stone-700);margin-bottom:20px}

/* COMMUNITIES */
.community-section{scroll-margin-top:calc(var(--nav-h) + 54px)}
.section-divider{height:2px;background:var(--stone-100)}

.community-hero-img-wrap{width:100%;height:clamp(320px,40vw,520px);position:relative;overflow:hidden}
.community-hero-bg{position:absolute;inset:0}
.bg-bainbridge{background:linear-gradient(135deg,#1e3a2e 0%,#2c4a3e 40%,#1a2e28 100%)}
.bg-poulsbo{background:linear-gradient(135deg,#1c2535 0%,#2a3850 40%,#1a2030 100%)}
.bg-kingston{background:linear-gradient(135deg,#2a2018 0%,#3d3020 40%,#1a1810 100%)}
.bg-hansville{background:linear-gradient(135deg,#1a2535 0%,#243045 40%,#131a28 100%)}
.bg-kitsap{background:linear-gradient(135deg,#1e2e20 0%,#2a3e2c 40%,#162018 100%)}
.community-hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.community-hero-overlay{position:absolute;inset:0;background:linear-gradient(to right,rgba(0,0,0,.65) 0%,rgba(0,0,0,.15) 60%,transparent 100%);display:flex;align-items:flex-end}
.community-hero-content{padding:clamp(32px,4vw,56px);max-width:760px}
.community-hero-content .label{color:var(--gold);margin-bottom:12px;display:block}
.community-hero-content h2{font-family:var(--serif);font-size:clamp(36px,5vw,64px);font-weight:300;color:var(--white);line-height:1.08}
.community-hero-content p{font-size:14px;font-weight:300;color:rgba(255,255,255,.7);margin-top:14px;line-height:1.8}

.community-body{padding:clamp(56px,7vw,96px) 0}
.community-body.bg-off-white{background:var(--off-white)}
.community-body.bg-white{background:var(--white)}
.community-body .inner{display:grid;grid-template-columns:1fr 360px;gap:clamp(48px,6vw,88px);align-items:start}
.community-body .inner.rev{grid-template-columns:360px 1fr}

.community-content h3{font-family:var(--serif);font-size:clamp(22px,2.5vw,30px);font-weight:400;color:var(--ink);margin:36px 0 14px;line-height:1.2}
.community-content h3:first-child{margin-top:0}
.community-content p{font-size:15px;font-weight:300;line-height:1.9;color:var(--stone-700);margin-bottom:20px}
.community-content ul{margin-bottom:24px;display:flex;flex-direction:column;gap:10px}
.community-content ul li{font-size:14px;font-weight:300;line-height:1.75;color:var(--stone-700);padding-left:20px;position:relative}
.community-content ul li::before{content:'—';position:absolute;left:0;color:var(--gold)}
.community-content blockquote{border-left:2px solid var(--gold);padding:4px 0 4px 24px;margin:32px 0}
.community-content blockquote p{font-family:var(--serif);font-size:clamp(17px,1.8vw,22px);font-style:italic;font-weight:300;color:var(--ink);margin-bottom:0;line-height:1.6}

/* SIDEBAR */
.community-sidebar{position:sticky;top:calc(var(--nav-h) + 68px);display:flex;flex-direction:column;gap:20px}
.sidebar-card{background:var(--stone-50);padding:28px}
.sidebar-card-title{font-size:10px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.stat-box{background:var(--white);padding:14px 16px}
.stat-label{font-size:9px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--stone-500);margin-bottom:4px}
.stat-value{font-family:var(--serif);font-size:20px;font-weight:400;color:var(--ink)}
.stat-sub{font-size:10px;font-weight:300;color:var(--stone-500);margin-top:2px}
.agent-img{width:100%;height:180px;object-fit:cover;object-position:center 8%;margin-bottom:14px}
.agent-name{font-family:var(--serif);font-size:19px;font-weight:400;color:var(--ink)}
.agent-title{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--stone-500);margin-top:4px;margin-bottom:14px}
.agent-blurb{font-size:13px;font-weight:300;line-height:1.8;color:var(--stone-700);margin-bottom:18px}
.nav-dots{display:flex;flex-direction:column}
.nav-dot{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--stone-100);cursor:pointer}
.nav-dot:last-child{border-bottom:none}
.dot-circle{width:6px;height:6px;border-radius:50%;background:var(--stone-300);flex-shrink:0;transition:background .3s}
.nav-dot:hover .dot-circle{background:var(--accent)}
.dot-label{font-size:12px;font-weight:400;letter-spacing:.06em;color:var(--stone-700);transition:color .3s}
.nav-dot:hover .dot-label{color:var(--ink)}

/* CTA */
.cta-band{background:var(--accent);padding:56px 0}
.cta-band .container{display:grid;grid-template-columns:1fr auto;align-items:center;gap:40px}
.cta-band h2{font-family:var(--serif);font-size:clamp(24px,3vw,38px);font-weight:300;color:var(--white)}
.cta-band p{font-size:14px;font-weight:300;color:rgba(255,255,255,.6);margin-top:8px}

/* FOOTER */
.footer{background:var(--ink);padding:64px 0 0}
.footer-top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;padding-bottom:56px;border-bottom:1px solid rgba(255,255,255,.08)}
.footer-brand-col{display:flex;flex-direction:column;align-items:center;text-align:center}
.footer-brand-logo{width:200px;height:auto;margin-bottom:20px}
.footer-compass-logo{width:120px;height:auto;margin:12px 0 16px}
.footer-brand-compass{font-size:11px;color:var(--stone-500);line-height:1.7}
.footer-col h4{font-size:10px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:20px}
.footer-col ul{display:flex;flex-direction:column;gap:12px}
.footer-col ul li a{font-size:13px;font-weight:300;color:var(--stone-500);transition:color .3s}
.footer-col ul li a:hover{color:var(--white)}
.footer-contact-item{display:flex;flex-direction:column;gap:2px;margin-bottom:16px}
.footer-contact-label{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--stone-700)}
.footer-contact-value{font-size:13px;font-weight:300;color:var(--stone-500);transition:color .3s}
.footer-contact-value:hover{color:var(--white)}
.footer-bottom{padding:24px 0;display:flex;align-items:flex-start;justify-content:space-between;gap:24px}
.footer-legal{font-size:10px;font-weight:300;line-height:1.8;color:rgba(255,255,255,.2);max-width:700px}
.footer-legal a{color:rgba(255,255,255,.35);text-decoration:underline;text-underline-offset:2px}
.footer-legal a:hover{color:rgba(255,255,255,.6)}
.footer-copy{font-size:10px;color:rgba(255,255,255,.2);white-space:nowrap;margin-top:4px}

@media(max-width:1024px){
  .nav-links,.nav-cta{display:none}
  .nav-toggle{display:flex}
  .nav-mobile{display:flex}
  .area-overview .container{grid-template-columns:1fr}
  .community-body .inner,.community-body .inner.rev{grid-template-columns:1fr}
  .community-sidebar{position:static}
  .cta-band .container{grid-template-columns:1fr}
  .footer-top{grid-template-columns:1fr 1fr}
  .agent-img{width:150px;height:190px;object-fit:cover;object-position:center 8%;display:block;margin:0 auto 14px}
}
@media(max-width:640px){
  .footer-top{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column}
}

/* ===== Redesign step three (shared by the blog and area pages) ===== */
:root { --tide: cubic-bezier(.22,1,.36,1); }

/* Breadcrumb above titles */
.post-crumbs { display:flex; align-items:center; gap:10px; font-size:10px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.45); margin-bottom:22px; }
.post-crumbs a { color:rgba(255,255,255,.7); transition:color .4s var(--tide); }
.post-crumbs a:hover { color:var(--gold); }

/* "Next" band: a full-width photo that invites the next read */
.post-next { position:relative; display:block; overflow:hidden; background:var(--ink); color:var(--white); isolation:isolate; }
.post-next-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.42; transform:scale(1.04); transition:transform 1.8s var(--tide), opacity 1.2s var(--tide); z-index:-1; }
.post-next::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg, rgba(10,18,15,.8) 0%, rgba(10,18,15,.25) 100%); z-index:-1; }
.post-next:hover .post-next-img { transform:scale(1.1); opacity:.6; }
.post-next .container { padding-top:clamp(72px,10vw,140px); padding-bottom:clamp(72px,10vw,140px); }
.post-next-label { display:block; font-size:10px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin-bottom:18px; }
.post-next-title { display:block; font-family:var(--serif); font-weight:300; font-size:clamp(30px,4.6vw,60px); line-height:1.08; max-width:820px; }
.post-next-title::after { content:''; display:block; width:48px; height:1px; background:var(--gold); margin-top:26px; transition:width .9s var(--tide); }
.post-next:hover .post-next-title::after { width:140px; }
.post-next-meta { display:block; margin-top:18px; font-size:12px; letter-spacing:.08em; color:rgba(255,255,255,.55); }

/* Reading progress line along the top of an article */
.read-progress { position:fixed; top:0; left:0; right:0; height:2px; background:var(--gold); transform-origin:left; transform:scaleX(var(--p, 0)); z-index:1200; pointer-events:none; }

/* Page titles rise into place */
@media (prefers-reduced-motion: no-preference) {
  .rise > * { animation: rise 1.2s var(--tide) both; }
  .rise > :nth-child(2) { animation-delay:.08s; } .rise > :nth-child(3) { animation-delay:.16s; }
  .rise > :nth-child(4) { animation-delay:.24s; } .rise > :nth-child(5) { animation-delay:.32s; }
  .pt-enter .rise > * { animation-delay:.55s; }
  @keyframes rise { from { opacity:0; transform:translateY(26px); } to { opacity:1; transform:none; } }

  /* Photos glide from the card you clicked into the page that opens (newer browsers) */
  @view-transition { navigation: auto; }
  ::view-transition-group(*) { animation-duration:.75s; animation-timing-function:cubic-bezier(.76,0,.24,1); }
  ::view-transition-old(*), ::view-transition-new(*) { height:100%; object-fit:cover; overflow:hidden; }
  ::view-transition-old(root) { animation:.45s ease both vt-out; }
  ::view-transition-new(root) { animation:.6s ease .15s both vt-in; }
  @keyframes vt-out { to { opacity:0; } }
  @keyframes vt-in { from { opacity:0; } }
}

/* Tabs are links to each community's page, with a sliding gold underline */
a.area-tab { display:inline-block; position:relative; border-bottom:none; }
.area-tab::after { content:''; position:absolute; left:28px; right:28px; bottom:0; height:2px; background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .7s var(--tide); }
.area-tab:hover::after { transform:scaleX(.35); }
.area-tab.active::after { transform:scaleX(1); background:var(--accent); }
.area-tab.active { border-bottom-color:transparent; }

/* Overview: heading beside the text */
.area-overview .container { grid-template-columns:.9fr 1.1fr; align-items:end; }
.area-overview-head h2 { font-family:var(--serif); font-size:clamp(34px,4vw,56px); font-weight:300; color:var(--ink); line-height:1.1; margin-top:12px; }
.area-overview-head h2 em { font-style:italic; color:var(--accent); }
.area-overview-text p:last-child { margin-bottom:0; }

/* Communities: cards on one side, a map that stays in view on the other */
.community-grid-wrap { padding:clamp(72px,9vw,128px) 0; background:var(--white); }
.community-grid-head { margin-bottom:clamp(40px,5vw,72px); }
.community-grid-head h2 { font-family:var(--serif); font-size:clamp(34px,4vw,56px); font-weight:300; line-height:1.1; color:var(--ink); }
.community-grid-head h2 em { font-style:italic; color:var(--accent); }
.community-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(40px,5vw,80px); align-items:start; }
.community-map { position:sticky; top:calc(var(--nav-h) + 76px); }
.community-map .area-map-wrap, #area-map-page { height:calc(100vh - var(--nav-h) - 120px); min-height:420px; max-height:720px; background:#2e4560; }
.community-grid { display:flex; flex-direction:column; gap:clamp(48px,6vw,88px); }
.community-card { display:block; color:inherit; }
.community-card-img { aspect-ratio:16/10; overflow:hidden; background:var(--stone-100); }
.community-card-img img { width:100%; height:100%; object-fit:cover; transform:scale(1.02); transition:transform 1.8s var(--tide), filter 1.2s var(--tide); filter:saturate(.9); }
.community-card:hover .community-card-img img, .community-card.is-current .community-card-img img { transform:scale(1.07); filter:saturate(1.05); }
.community-card-body { padding-top:26px; }
.community-card-body .label { display:block; margin-bottom:10px; }
.community-card-body h3 { font-family:var(--serif); font-size:clamp(30px,3vw,42px); font-weight:300; line-height:1.1; color:var(--ink); margin-bottom:12px; }
.community-card-body p { font-size:15px; font-weight:300; line-height:1.8; color:var(--stone-700); max-width:36em; margin-bottom:18px; }
.community-card-link { display:inline-flex; align-items:center; gap:8px; font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); transition:gap .5s var(--tide); }
.community-card:hover .community-card-link { gap:14px; }
@media (max-width:900px) {
  .community-layout { grid-template-columns:1fr; }
  .community-map { position:relative; top:auto; }
  .community-map .area-map-wrap, #area-map-page { height:340px; min-height:0; }
}

/* A community's own page: a tall photo with the name over it */
.community-page-hero .community-hero-img-wrap { height:min(78svh, 760px); min-height:420px; }
.community-page-hero .community-hero-photo { inset:-8% 0; height:116%; will-change:transform; }
.community-page-hero .community-hero-overlay { background:linear-gradient(90deg, rgba(10,18,15,.72) 0%, rgba(10,18,15,.25) 60%, rgba(10,18,15,.1) 100%), linear-gradient(0deg, rgba(10,16,14,.55) 0%, rgba(10,16,14,0) 45%); }
.community-page-hero h1 { font-family:var(--serif); font-size:clamp(46px,7vw,96px); font-weight:300; color:var(--white); line-height:1.02; letter-spacing:-.01em; }
.community-page-hero .community-hero-content { padding-top:calc(var(--nav-h) + 40px); max-width:880px; }
.community-page-hero .community-hero-content p { font-size:16px; max-width:34em; }
.town-page .area-tabs { top:var(--nav-h); }
a.nav-dot { color:inherit; }
.community-page-hero .community-hero-overlay { justify-content:center; }
.community-page-hero .community-hero-content { width:100%; max-width:var(--max-w); margin:0 auto; padding:calc(var(--nav-h) + 40px) clamp(24px,5vw,64px) clamp(40px,5vw,72px); }
.community-page-hero .community-hero-content h1 { max-width:12em; }