:root {
  --navy: #0b2138;
  --navy-black: #071523;
  --white: #ffffff;
  --paper: #faf9f6;
  --charcoal: #1b1d20;
  --muted: #5c6570;
  --gold: #a9832f;
  --gold-light: #c9a869;
  --gold-dark: #8a6a24;
  --lighthouse-red: #a8382c;
  --hairline: #e1ddd3;
  --hairline-dark: rgba(255,255,255,0.16);
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

html, body {
  overflow-x: hidden;
  max-width: 100%;
}

body {
  font-family: var(--sans);
  color: var(--charcoal);
  background: var(--white);
  line-height: 1.7;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--navy);
  text-wrap: balance;
}

.eyebrow {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 18px;
}

.eyebrow-light {
  color: rgba(255,255,255,0.75);
}

/* Used where the default gold-on-dark eyebrow sits on a white or paper
   background instead — meets 4.5:1 contrast where --gold-light does not. */
.eyebrow-dark {
  color: var(--gold-dark);
}

/* Quiet text links — no filled buttons anywhere on the site */
.quiet-link {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--navy);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 3px;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.quiet-link::after {
  content: "\2192";
  margin-left: 8px;
}

.quiet-link:hover {
  color: var(--gold);
  border-color: var(--gold);
}

.quiet-link--light {
  color: var(--white);
  border-color: var(--gold-light);
}

.quiet-link--light:hover {
  color: var(--gold-light);
}

/* Lighthouse mark */
.lighthouse-mark {
  width: 26px;
  height: 40px;
  flex-shrink: 0;
}

.lh-tower { fill: var(--lighthouse-red); }
.lh-lantern { fill: var(--navy); }
.lh-base { fill: var(--navy); }
.lh-light {
  fill: var(--gold-light);
  filter: drop-shadow(0 0 2px var(--gold-light));
}

.lighthouse-mark--light .lh-lantern,
.lighthouse-mark--light .lh-base {
  fill: var(--white);
}

.lighthouse-mark--faint .lh-tower {
  fill: var(--navy);
  opacity: 0.1;
}
.lighthouse-mark--faint .lh-lantern,
.lighthouse-mark--faint .lh-base {
  fill: var(--navy);
  opacity: 0.1;
}
.lighthouse-mark--faint .lh-light {
  fill: var(--navy);
  opacity: 0.1;
  filter: none;
}

/* Nav */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  padding: 24px 0;
  background: var(--navy-black);
  transition: padding 0.35s ease, box-shadow 0.35s ease;
}

.nav.scrolled {
  padding: 16px 0;
  box-shadow: 0 1px 0 rgba(255,255,255,0.1);
}

.nav-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  align-items: center;
  gap: 34px;
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--white);
  margin-right: auto;
}

.nav-links {
  display: flex;
  gap: 36px;
}

.nav-links a {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--white);
  transition: opacity 0.2s ease;
  white-space: nowrap;
}

.nav-links a:hover {
  opacity: 0.7;
}

.nav-contact {
  display: flex;
  align-items: center;
  gap: 20px;
}

.nav-phone, .nav-email {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--white);
  white-space: nowrap;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 30px;
  height: 30px;
  background: none;
  border: none;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  height: 1px;
  background: var(--white);
}

@media (max-width: 1060px) {
  .nav-links {
    display: none;
  }
  .nav.menu-open .nav-links {
    display: flex;
    position: absolute;
    top: 100%;
    right: 0;
    flex-direction: column;
    align-items: flex-end;
    min-width: 220px;
    background: var(--navy-black);
    padding: 22px 24px 28px;
    gap: 18px;
    border-bottom: 1px solid var(--hairline-dark);
    border-left: 1px solid var(--hairline-dark);
  }
  .nav.menu-open .nav-links a {
    color: var(--white);
  }
  .nav-toggle {
    display: flex;
  }
}

@media (max-width: 700px) {
  .nav-email {
    display: none;
  }
}

@media (max-width: 560px) {
  .nav-inner {
    padding: 0 20px;
    gap: 18px;
  }
  .wordmark {
    font-size: 1.1rem;
  }
  .nav-phone {
    font-size: 0.7rem;
  }
}

/* Offset anchor-jump targets so headings don't land under the fixed nav */
#buying-selling,
#about {
  scroll-margin-top: 100px;
}

/* Hero */
.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(165deg, var(--navy-black) 0%, var(--navy) 65%, #12324f 100%);
  padding: 140px 24px 100px;
  text-align: center;
  overflow: hidden;
}

.hero-mark {
  margin-bottom: 36px;
}

.hero-lighthouse-wrap {
  position: relative;
  display: inline-block;
}

.hero-mark .lighthouse-mark {
  width: 34px;
  height: 52px;
  position: relative;
  z-index: 1;
}

.beacon-glow {
  position: absolute;
  top: -6px;
  left: 50%;
  width: 22px;
  height: 22px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(230,190,110,0.85) 0%, rgba(230,190,110,0.32) 40%, rgba(230,190,110,0) 72%);
  animation: beacon-pulse 9s ease-in-out infinite;
  pointer-events: none;
}

.beacon-beam-wrap {
  position: absolute;
  top: 2px;
  left: 50%;
  width: 0;
  height: 0;
  z-index: 0;
  animation: beacon-sweep 9s ease-in-out infinite, beacon-depth 9s steps(1, end) infinite;
  will-change: transform;
  pointer-events: none;
}

/* A single tapering wedge, narrow at the lamp and widening as it fades into
   the distance — reads as a swept searchlight cone rather than a rigid bar
   spinning like a windmill blade or clock hand. */
.beacon-beam {
  position: absolute;
  top: 0;
  left: 0;
  width: 110px;
  height: 46px;
  transform: translateY(-50%);
  transform-origin: 0 50%;
  clip-path: polygon(0% 46%, 0% 54%, 100% 100%, 100% 0%);
  background: linear-gradient(90deg, rgba(230,190,110,0.55) 0%, rgba(230,190,110,0.16) 55%, rgba(230,190,110,0) 100%);
  mix-blend-mode: screen;
  animation: beacon-length 9s ease-in-out infinite;
}

@media (max-width: 560px) {
  /* Keep the beam's reach proportional to the much narrower hero, so it
     reads as a subtle sweep instead of a bold cone dominating the headline. */
  .beacon-beam {
    width: 60px;
    height: 26px;
  }
}

@keyframes beacon-pulse {
  /* Synced to beacon-sweep/beacon-length's 9s cycle: glows only at 25%/75%,
     the instant the beam points straight down at the bottom of its arc,
     then dims again as it ascends back toward the horizontal apexes. */
  0%, 50%, 100% { opacity: 0.35; transform: translateX(-50%) scale(0.85); }
  25%, 75% { opacity: 1; transform: translateX(-50%) scale(1.2); }
}

@keyframes beacon-sweep {
  /* Arcs under the lamp from one side to the other and back, rather than
     spinning a full circle up past the header. */
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(180deg); }
}

@keyframes beacon-length {
  /* Shortest when pointing straight down at the midpoint of each swing
     (so it never reaches past the base of the tower), longest at the two
     horizontal apexes of the arc. Timed to land exactly on beacon-sweep's
     90°/270° points, since both share the same duration and easing. */
  0%, 50%, 100% { transform: translateY(-50%) scale(1); }
  25%, 75% { transform: translateY(-50%) scale(0.36); }
}

@keyframes beacon-depth {
  /* Passes in front of the tower on the outbound swing, behind it on the
     return swing, so the beam reads as rotating in front of and behind
     the lighthouse rather than always on one side of it. */
  0% { z-index: 2; }
  50% { z-index: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .beacon-glow,
  .beacon-beam-wrap,
  .beacon-beam {
    animation: none;
  }
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  color: var(--white);
}

.hero h1 {
  font-size: clamp(2.1rem, 5vw, 3.8rem);
  line-height: 1.15;
  color: var(--white);
  margin-bottom: 26px;
}

.hero-sub {
  font-size: 1.08rem;
  font-weight: 300;
  color: rgba(255,255,255,0.82);
  max-width: 560px;
  margin: 0 auto;
  text-wrap: balance;
}

.hero-content .quiet-link {
  margin-top: 34px;
}

.section-head {
  max-width: 640px;
  margin: 0 auto 56px;
  text-align: center;
  padding: 0 24px;
}

.section-head h2 {
  font-size: clamp(1.9rem, 3vw, 2.5rem);
}

.section-sub {
  margin-top: 18px;
  color: var(--muted);
  font-size: 1rem;
  text-wrap: balance;
}

.divider-mark {
  display: flex;
  justify-content: center;
  padding: 0 24px 90px;
}

/* Buying & Selling */
.buying-selling {
  padding: 0 24px 100px;
  max-width: 1080px;
  margin: 0 auto;
}

.bs-panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  max-width: 920px;
  margin: 0 auto;
}

.bs-panel {
  padding: 46px 48px;
  border-top: 1px solid var(--hairline);
}

.bs-panel:first-child {
  border-right: 1px solid var(--hairline);
}

.bs-panel h3 {
  font-size: 1.5rem;
  margin-bottom: 18px;
}

.bs-panel p {
  color: var(--muted);
  font-size: 0.98rem;
}

@media (max-width: 760px) {
  .bs-panels {
    grid-template-columns: 1fr;
  }
  .bs-panel:first-child {
    border-right: none;
  }
  .bs-panel {
    padding: 40px 8px;
  }
}

/* Why Kirkland — navy band, no photography, gives the navy its weight */
.why {
  background: var(--navy-black);
  color: var(--white);
  padding: 130px 24px;
}

.why .section-head h2 {
  color: var(--white);
}

.why-list {
  list-style: none;
  max-width: 700px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.why-list li {
  padding: 24px 0;
  border-top: 1px solid var(--hairline-dark);
  color: rgba(255,255,255,0.82);
  font-size: 1.02rem;
  display: flex;
  gap: 18px;
  align-items: baseline;
  text-wrap: balance;
}

.why-list li:last-child {
  border-bottom: 1px solid var(--hairline-dark);
}

.why-list li::before {
  content: "";
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  transform: translateY(-2px);
}

/* About */
.about {
  padding: 110px 24px;
  display: flex;
  justify-content: center;
  background: var(--paper);
  border-top: 1px solid var(--hairline);
}

.about-inner {
  max-width: 680px;
  text-align: center;
}

.about-inner h2 {
  font-size: clamp(1.9rem, 3vw, 2.5rem);
  margin-bottom: 30px;
}

.about-inner p:not(.eyebrow) {
  color: var(--charcoal);
  font-size: 1.04rem;
  margin-bottom: 20px;
  text-wrap: pretty;
}

/* Founders — mirrors the .bs-panel two-up layout used for Buying & Selling */
.founders {
  padding: 110px 24px;
}

.founders-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  max-width: 920px;
  margin: 0 auto;
}

.founder-card {
  padding: 46px 48px;
  border-top: 1px solid var(--hairline);
}

.founder-card:first-child {
  border-right: 1px solid var(--hairline);
}

.founder-photo {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  font-family: var(--serif);
  font-size: 1.3rem;
  color: var(--gold-dark);
  background: var(--paper);
}

.founder-card h3 {
  font-size: 1.5rem;
  margin-bottom: 4px;
}

.founder-role {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin-bottom: 18px;
}

.founder-card p:not(.founder-role) {
  color: var(--muted);
  font-size: 0.98rem;
  margin-bottom: 14px;
  text-wrap: pretty;
}

.founder-card p:last-child {
  margin-bottom: 0;
}

@media (max-width: 760px) {
  .founders-grid {
    grid-template-columns: 1fr;
  }
  .founder-card:first-child {
    border-right: none;
  }
  .founder-card {
    padding: 40px 8px;
  }
}

/* Closing — the one deliberate get-in-touch moment on the homepage */
.closing {
  background: var(--navy);
  color: var(--white);
  text-align: center;
  padding: 140px 24px;
}

.closing-line {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
  max-width: 620px;
  margin: 0 auto 34px;
  color: rgba(255,255,255,0.92);
  text-wrap: balance;
}

.closing-contact {
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
}

.closing-contact a {
  font-family: var(--serif);
  font-size: 1.3rem;
  color: var(--white);
  border-bottom: 1px solid var(--gold-light);
  padding-bottom: 4px;
}

.closing-contact a:hover {
  color: var(--gold-light);
}

/* Contact page */
.contact-hero {
  padding: 170px 24px 90px;
  text-align: center;
  background: linear-gradient(165deg, var(--navy-black) 0%, var(--navy) 65%, #12324f 100%);
  color: var(--white);
}

.contact-hero h1 {
  color: var(--white);
  font-size: clamp(2rem, 4.4vw, 3.2rem);
}

.contact-hero p {
  margin-top: 20px;
  color: rgba(255,255,255,0.8);
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  font-size: 1.02rem;
  text-wrap: balance;
}

.contact-main {
  padding: 110px 24px 130px;
  text-align: center;
}

.contact-details {
  display: flex;
  justify-content: center;
  gap: 90px;
  flex-wrap: wrap;
  margin-bottom: 70px;
}

.contact-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.contact-label {
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-dark);
}

.contact-value {
  font-family: var(--serif);
  font-size: 1.7rem;
  color: var(--navy);
  transition: color 0.2s ease;
}

.contact-item:hover .contact-value {
  color: var(--gold);
}

.contact-reassurance {
  max-width: 560px;
  margin: 0 auto;
  color: var(--muted);
  font-size: 1rem;
  text-wrap: balance;
}

.contact-address {
  margin-top: 34px;
  font-style: normal;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.9;
}

.contact-address .quiet-link {
  margin-top: 6px;
}

.hours-section {
  max-width: 320px;
  margin: 54px auto 0;
  text-align: center;
}

.hours-heading {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin-bottom: 18px;
}

.hours-list {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  row-gap: 8px;
  column-gap: 24px;
  font-size: 0.92rem;
  color: var(--muted);
}

.hours-list dt {
  text-align: left;
  color: var(--charcoal);
}

.hours-list dd {
  text-align: right;
}

/* Communities hub — links to the individual community pages */
.communities {
  padding: 90px 24px 100px;
  border-top: 1px solid var(--hairline);
}

.communities-links {
  display: flex;
  justify-content: center;
  gap: 20px 36px;
  flex-wrap: wrap;
  max-width: 820px;
  margin: 0 auto;
}

/* FAQ */
.faq {
  padding: 110px 24px;
  background: var(--paper);
  border-top: 1px solid var(--hairline);
}

.faq-list {
  max-width: 720px;
  margin: 0 auto;
}

.faq-item {
  padding: 28px 0;
  border-top: 1px solid var(--hairline);
}

.faq-item:last-child {
  border-bottom: 1px solid var(--hairline);
}

.faq-item h3 {
  font-size: 1.1rem;
  margin-bottom: 10px;
}

.faq-item p {
  color: var(--muted);
  font-size: 0.98rem;
  text-wrap: pretty;
}

/* Areas We Serve hub */
.area-list-section {
  padding: 90px 24px 110px;
}

.area-list {
  max-width: 760px;
  margin: 0 auto;
}

.area-item {
  padding: 36px 0;
  border-top: 1px solid var(--hairline);
}

.area-item:last-child {
  border-bottom: 1px solid var(--hairline);
}

.area-item h2 {
  font-size: 1.35rem;
  margin-bottom: 10px;
}

.area-item p {
  color: var(--muted);
  font-size: 1rem;
  margin-bottom: 16px;
  text-wrap: pretty;
}

/* Breadcrumb — sits inside the dark page hero on interior pages */
.breadcrumb {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin-bottom: 22px;
}

.breadcrumb a {
  color: rgba(255,255,255,0.7);
  border-bottom: 1px solid transparent;
}

.breadcrumb a:hover {
  color: var(--gold-light);
  border-color: var(--gold-light);
}

.breadcrumb .breadcrumb-current {
  color: rgba(255,255,255,0.85);
}

/* Community pages */
.community-section {
  padding: 80px 24px;
  max-width: 740px;
  margin: 0 auto;
}

.community-section + .community-section {
  border-top: 1px solid var(--hairline);
}

.community-section h2 {
  font-size: clamp(1.5rem, 2.6vw, 1.9rem);
  margin-bottom: 20px;
}

.community-section p {
  color: var(--muted);
  font-size: 1.02rem;
  margin-bottom: 16px;
  text-wrap: pretty;
}

.community-section p:last-child {
  margin-bottom: 0;
}

.community-list {
  list-style: none;
  margin-top: 4px;
}

.community-list li {
  padding: 12px 0;
  border-top: 1px solid var(--hairline);
  color: var(--muted);
  font-size: 0.98rem;
  display: flex;
  gap: 14px;
  text-wrap: pretty;
}

.community-list li:first-child {
  border-top: none;
  padding-top: 0;
}

.community-list li::before {
  content: "";
  flex-shrink: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
  transform: translateY(10px);
}

.community-market-note {
  background: var(--paper);
  border: 1px solid var(--hairline);
  padding: 26px 28px;
}

.community-market-note p {
  margin-bottom: 0;
  font-size: 0.92rem;
}

.community-market-note .market-label {
  display: block;
  color: var(--navy);
  font-family: var(--serif);
  font-size: 1.05rem;
  margin-bottom: 8px;
}

.community-crosslinks {
  padding: 70px 24px 100px;
  max-width: 740px;
  margin: 0 auto;
  text-align: center;
  border-top: 1px solid var(--hairline);
}

.community-crosslinks h2 {
  font-size: 1.2rem;
  margin-bottom: 22px;
}

.community-crosslinks-list {
  display: flex;
  justify-content: center;
  gap: 16px 32px;
  flex-wrap: wrap;
}

/* Map embed */
.map-section {
  padding: 0 24px 110px;
  max-width: 900px;
  margin: 0 auto;
}

.map-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--hairline);
}

.map-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Footer community links */
.footer-communities {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  font-size: 0.78rem;
}

.footer-communities a {
  color: rgba(255,255,255,0.5);
  border-bottom: 1px solid transparent;
}

.footer-communities a:hover {
  color: var(--gold-light);
  border-color: var(--gold-light);
}

@media (max-width: 640px) {
  .footer-communities {
    justify-content: flex-start;
  }
}

/* Footer */
.footer {
  background: var(--navy-black);
  padding: 56px 24px 34px;
}

.footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 30px;
  flex-wrap: wrap;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.footer-wordmark {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--white);
  font-size: 1.2rem;
  letter-spacing: 0.04em;
}

.footer-details {
  text-align: right;
}

.footer-phone, .footer-email {
  display: block;
  color: var(--white);
  font-size: 0.92rem;
  margin-bottom: 6px;
}

.footer-phone:hover, .footer-email:hover {
  color: var(--gold-light);
}

.footer-address {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.5);
  margin-bottom: 14px;
}

.footer-hours {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.5);
  margin-bottom: 14px;
}

.footer-area {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.5);
  max-width: 320px;
}

.footer-legal {
  max-width: 1100px;
  margin: 40px auto 0;
  padding-top: 26px;
  border-top: 1px solid var(--hairline-dark);
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.eho-mark {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  color: rgba(255,255,255,0.55);
}

.footer-legal-text {
  font-size: 0.72rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.55);
  max-width: 760px;
}

.footer-copy {
  max-width: 1100px;
  margin: 22px auto 0;
  font-size: 0.72rem;
  color: rgba(255,255,255,0.5);
}

.footer-updated {
  max-width: 1100px;
  margin: 4px auto 0;
  font-size: 0.68rem;
  color: rgba(255,255,255,0.35);
}

@media (max-width: 640px) {
  .footer-inner {
    flex-direction: column;
  }
  .footer-details {
    text-align: left;
  }
  .footer-area {
    max-width: 100%;
  }
}

/* Scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}