/* ------------------------------------------------------------------
   Bayspring Real Estate Partners — shared stylesheet
   Colors per July 2024 Style Guide:
     --ink   #0F4852   deep teal (primary)
     --mist  #C6D8D4   pale teal
     --sea   #77A8AA   mid teal
     --sun   #F47B46   accent orange
     --slate #6D6E71   neutral gray
   Typography: Oswald (headers) + Mulish (body)
------------------------------------------------------------------- */

:root{
  --ink: #0F4852;
  --ink-90: #1a525c;
  --mist: #C6D8D4;
  --mist-soft: #e6efed;
  --sea: #77A8AA;
  --sun: #F47B46;
  --slate: #6D6E71;
  --paper: #f6f4ef;
  --white: #ffffff;
  --line: rgba(15,72,82,.14);

  --display: "Oswald", "Arial Narrow", sans-serif;
  --body: "Mulish", "Helvetica Neue", Arial, sans-serif;

  --nav-h: 76px;
  --gutter: clamp(20px, 5vw, 80px);
  --max: 1480px;
}

*{ box-sizing: border-box; }
html, body{ margin:0; padding:0; }
html{ -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body{
  font-family: var(--body);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
}

img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }

/* ---------- Type ---------- */
.display, h1, h2, h3, .eyebrow, .nav-link{
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
h1{ font-size: clamp(44px, 6.8vw, 108px); line-height: 0.98; letter-spacing: -0.005em; margin:0; font-weight: 500; }
h2{ font-size: clamp(32px, 3.6vw, 56px); line-height: 1.02; margin:0; font-weight: 500; }
h3{ font-size: clamp(22px, 1.6vw, 28px); line-height: 1.1; margin:0; font-weight: 500; }

.eyebrow{
  font-size: 12px;
  letter-spacing: 0.22em;
  font-weight: 500;
  color: var(--sea);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.eyebrow::before{
  content:"";
  width: 28px; height: 2px;
  background: var(--sun);
}

.lede{
  font-family: var(--body);
  font-weight: 300;
  font-size: clamp(18px, 1.4vw, 22px);
  line-height: 1.55;
  color: var(--ink);
  max-width: 62ch;
}

p{ margin: 0 0 1em; max-width: 68ch; }

/* ---------- Header / Nav ---------- */
.site-header{
  position: sticky; top:0; z-index: 50;
  height: var(--nav-h);
  background: rgba(246,244,239,.86);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header.on-dark{
  background: rgba(15,72,82,.6);
  border-bottom: 1px solid rgba(255,255,255,.12);
  color: var(--white);
}
.nav{
  max-width: var(--max);
  height: 100%;
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
}
.brand{
  display: inline-flex; align-items: center; gap: 14px;
}
.brand .logo{
  display: block;
  height: 44px; width: auto;
}
.brand .tag{
  display: none; /* tag line hidden by default; use .brand.with-tag to show */
  font-family: var(--body);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--sea);
  padding-left: 14px;
  border-left: 1px solid currentColor;
  opacity: .9;
}
.brand.with-tag .tag{ display: inline-block; }
@media (max-width: 640px){
  .brand.with-tag .tag{ display: none; }
  .brand .logo{ height: 36px; }
}
.nav-links{
  display: flex; gap: clamp(18px, 2.4vw, 36px);
  align-items: center;
}
.nav-link{
  font-size: 13px;
  letter-spacing: 0.18em;
  color: var(--ink);
  padding: 8px 0;
  position: relative;
}
.on-dark .nav-link{ color: var(--white); }
.nav-link::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height: 2px; background: var(--sun);
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s ease;
}
.nav-link:hover::after, .nav-link[aria-current="page"]::after{ transform: scaleX(1); }
.nav-link[aria-current="page"]{ color: var(--ink); }
.on-dark .nav-link[aria-current="page"]{ color: var(--white); }

.nav-cta{
  font-family: var(--display);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 11px 18px;
  border: 1px solid currentColor;
  border-radius: 999px;
  transition: background .25s ease, color .25s ease;
}
.nav-cta:hover{ background: var(--ink); color: var(--white); border-color: var(--ink); }
.on-dark .nav-cta:hover{ background: var(--white); color: var(--ink); }

/* ---------- Layout helpers ---------- */
.wrap{ max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
section{ padding: clamp(64px, 9vw, 140px) 0; }
section.tight{ padding: clamp(48px, 6vw, 90px) 0; }

.row{ display: grid; gap: clamp(24px, 4vw, 80px); }
.row-2{ grid-template-columns: 1fr 1fr; }
.row-3{ grid-template-columns: repeat(3, 1fr); }
.row-4{ grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px){
  .row-2, .row-3, .row-4{ grid-template-columns: 1fr; }
}

.rule{ height:1px; background: var(--line); border:0; margin: 0; }

/* ---------- Buttons ---------- */
.btn{
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--display);
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 0.22em;
  padding: 16px 26px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--white);
  border: 1px solid var(--ink);
  transition: transform .2s ease, background .2s ease;
}
.btn:hover{ background: var(--sun); border-color: var(--sun); transform: translateY(-1px); }
.btn .arrow{ display:inline-block; transition: transform .2s ease; }
.btn:hover .arrow{ transform: translateX(4px); }

.btn-ghost{
  background: transparent;
  color: var(--ink);
}
.btn-ghost:hover{ background: var(--ink); color: var(--white); }

/* ---------- Hero ---------- */
.hero{
  position: relative;
  min-height: clamp(520px, 72vh, 740px);
  color: var(--white);
  background: var(--ink);
  overflow: hidden;
  isolation: isolate;
}
.hero .bg{
  position:absolute; inset:0; z-index: -2;
  background-position: center;
  background-size: cover;
}
.hero::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg, rgba(15,72,82,.55) 0%, rgba(15,72,82,.72) 60%, rgba(15,72,82,.92) 100%);
}
.hero .wrap{
  height: 100%;
  min-height: inherit;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-top: clamp(60px, 12vh, 130px);
  padding-bottom: clamp(48px, 7vh, 90px);
}
.hero h1{ color: var(--white); max-width: 18ch; }
.hero h1 .accent{ color: var(--mist); }
.hero h1 .sun{ color: var(--sun); }
.hero-meta{
  display:flex; gap: clamp(24px, 5vw, 80px);
  margin-top: clamp(28px, 4vw, 48px);
  flex-wrap: wrap;
  align-items: baseline;
}
.hero-meta .label{
  font-family: var(--display);
  font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--mist); opacity: .8;
  display: block; margin-bottom: 6px;
}
.hero-meta .value{
  font-family: var(--display);
  font-size: clamp(20px, 1.6vw, 26px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ---------- Page header (interior) ---------- */
.page-head{
  background: var(--ink);
  color: var(--white);
  padding: clamp(120px, 16vw, 220px) 0 clamp(70px, 9vw, 130px);
  position: relative;
  overflow: hidden;
}
.page-head::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height: 8px;
  background: linear-gradient(90deg, var(--sun) 0 18%, transparent 18%);
}
.page-head h1{ color: var(--white); max-width: 22ch; }
.page-head .eyebrow{ color: var(--mist); }
.page-head .eyebrow::before{ background: var(--sun); }
.page-head .lede{ color: var(--mist); margin-top: 28px; }

/* ---------- Stats ---------- */
.stats{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.stat{
  padding: clamp(28px, 3vw, 48px) clamp(20px, 2vw, 32px);
  border-right: 1px solid var(--line);
}
.stat:last-child{ border-right: 0; }
.stat .num{
  font-family: var(--display);
  font-size: clamp(40px, 4.4vw, 68px);
  line-height: 1;
  color: var(--ink);
}
.stat .num .unit{ color: var(--sun); margin-left: 2px; }
.stat .lbl{
  margin-top: 14px;
  font-family: var(--display);
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--slate);
}
@media (max-width: 900px){
  .stats{ grid-template-columns: 1fr 1fr; }
  .stat:nth-child(2){ border-right: 0; }
  .stat:nth-child(1), .stat:nth-child(2){ border-bottom: 1px solid var(--line); }
}

/* ---------- Big quote block ---------- */
.statement{
  background: var(--mist-soft);
  padding: clamp(70px, 10vw, 140px) 0;
}
.statement .quote{
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 52px);
  line-height: 1.12;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  max-width: 24ch;
  color: var(--ink);
}
.statement .quote .sun{ color: var(--sun); }

/* ---------- Team cards ---------- */
.team-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 3vw, 48px) clamp(24px, 2.4vw, 40px);
}
@media (max-width: 1000px){ .team-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px){ .team-grid{ grid-template-columns: 1fr; } }

.member{
  display: block;
}
.member .portrait{
  aspect-ratio: 4/5;
  background: var(--mist);
  overflow: hidden;
  position: relative;
}
.member .portrait img{
  width:100%; height:100%; object-fit: cover;
  filter: saturate(0.95);
  transition: transform .6s ease;
}
.member:hover .portrait img{ transform: scale(1.03); }
.member .info{
  padding: 22px 4px 0;
  border-top: 2px solid var(--ink);
  margin-top: 18px;
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 16px;
}
.member .name{
  font-family: var(--display);
  font-size: clamp(20px, 1.5vw, 26px);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.member .title{
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--sea);
}
.member .bio{
  margin-top: 18px;
  font-size: 15.5px;
  line-height: 1.6;
  color: #2c4a4f;
}
.member .email{
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 14px;
  font-family: var(--display);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sun);
  border-bottom: 1px solid transparent;
}
.member .email:hover{ border-bottom-color: var(--sun); }

/* ---------- Portfolio cards ---------- */
.portfolio-grid{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(20px, 2vw, 36px);
}
.proj{ position: relative; display: block; }
.proj.span-4{ grid-column: span 4; }
.proj.span-5{ grid-column: span 5; }
.proj.span-6{ grid-column: span 6; }
.proj.span-7{ grid-column: span 7; }
.proj.span-8{ grid-column: span 8; }
.proj.span-12{ grid-column: span 12; }
@media (max-width: 900px){
  .proj.span-4, .proj.span-5, .proj.span-6, .proj.span-7, .proj.span-8{ grid-column: span 12; }
}
.proj .ph{
  aspect-ratio: 16/10;
  background: var(--mist);
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.proj.tall .ph{ aspect-ratio: 4/5; }
.proj .ph::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(135deg, rgba(15,72,82,.0) 0%, rgba(15,72,82,.0) 60%, rgba(15,72,82,.25) 100%);
  pointer-events:none;
}
.proj .ph .placeholder{
  text-align:center; color: var(--ink);
  font-family: var(--display); letter-spacing: 0.24em; text-transform: uppercase;
  font-size: 12px;
  opacity: .7;
}
.proj .meta{
  margin-top: 18px;
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  border-top: 1px solid var(--ink);
  padding-top: 16px;
}
.proj .meta .name{
  font-family: var(--display);
  font-size: clamp(20px, 1.4vw, 24px);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.proj .meta .tag{
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sea);
  white-space: nowrap;
}
.proj .sub{
  margin-top: 8px;
  font-size: 14.5px;
  color: var(--slate);
}

.filter-bar{
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-bottom: clamp(32px, 4vw, 56px);
}
.chip{
  font-family: var(--display);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 10px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  background: transparent;
  color: var(--ink);
  transition: all .2s ease;
}
.chip:hover{ border-color: var(--ink); }
.chip.is-active{ background: var(--ink); color: var(--white); border-color: var(--ink); }

/* ---------- News ---------- */
.news-list{
  border-top: 1px solid var(--line);
}
.news-item{
  display: grid;
  grid-template-columns: 120px 110px 1fr 160px auto;
  align-items: center;
  gap: clamp(16px, 2.4vw, 32px);
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  transition: background .2s ease, padding .2s ease;
}
.news-item:hover{ background: rgba(198,216,212,.25); padding-left: 18px; padding-right: 18px; }
.news-item .thumb{
  display: block;
  width: 120px; height: 80px;
  overflow: hidden;
  background: var(--mist-soft);
  border: 1px solid var(--line);
}
.news-item .thumb img{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.95);
  transition: transform .5s ease;
}
.news-item:hover .thumb img{ transform: scale(1.06); }
  gap: clamp(20px, 3vw, 48px);
  padding: clamp(24px, 3vw, 40px) 0;
  border-bottom: 1px solid var(--line);
  align-items: center;
  transition: background .2s ease, padding .2s ease;
}
.news-item:hover{ background: rgba(198,216,212,.25); padding-left: 18px; padding-right: 18px; }
.news-item .date{
  font-family: var(--display);
  font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sea);
}
.news-item .headline{
  font-family: var(--display);
  font-size: clamp(20px, 1.6vw, 28px);
  line-height: 1.15;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--ink);
}
.news-item .kind{
  font-family: var(--display);
  font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--slate);
}
.news-item .go{
  font-family: var(--display);
  font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sun);
  white-space: nowrap;
}
@media (max-width: 900px){
  .news-item{ grid-template-columns: 120px 1fr; gap: 12px 16px; }
  .news-item .thumb{ grid-row: span 4; }
  .news-item .kind, .news-item .go{ font-size: 11px; }
}
@media (max-width: 560px){
  .news-item{ grid-template-columns: 1fr; }
  .news-item .thumb{ grid-row: auto; width: 100%; height: 180px; }
}

/* ---------- Contact ---------- */
.contact-grid{
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(36px, 5vw, 80px);
}
@media (max-width: 900px){ .contact-grid{ grid-template-columns: 1fr; } }

.form{ display: grid; gap: 22px; }
.field{ display: grid; gap: 8px; }
.field label{
  font-family: var(--display);
  font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--slate);
}
.field input, .field textarea, .field select{
  font-family: var(--body);
  font-size: 16px;
  padding: 14px 16px;
  background: var(--white);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 0;
  transition: border-color .2s ease;
}
.field input:focus, .field textarea:focus, .field select:focus{
  outline: 0; border-color: var(--ink);
}
.field textarea{ resize: vertical; min-height: 140px; }
.field-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 640px){ .field-row{ grid-template-columns: 1fr; } }

.office{
  border-top: 2px solid var(--ink);
  padding-top: 24px;
}
.office + .office{ margin-top: 32px; }
.office .city{
  font-family: var(--display);
  font-size: clamp(28px, 2.4vw, 40px);
  letter-spacing: 0.02em; text-transform: uppercase;
}
.office .addr{
  margin-top: 12px;
  color: var(--slate);
  font-size: 15.5px;
  line-height: 1.6;
}
.office .lnk{
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 16px;
  font-family: var(--display);
  font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sun);
}

/* ---------- Footer ---------- */
.site-footer{
  background: var(--ink);
  color: var(--mist);
  padding: clamp(60px, 7vw, 100px) 0 36px;
  position: relative;
}
.site-footer::before{
  content:""; position:absolute; left:0; right:0; top:0; height: 6px;
  background: linear-gradient(90deg, var(--sun) 0 22%, transparent 22%);
}
.footer-grid{
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: clamp(28px, 3vw, 56px);
}
@media (max-width: 900px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .footer-grid{ grid-template-columns: 1fr; } }

.footer-grid h4{
  font-family: var(--display);
  font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--sea); margin: 0 0 16px;
}
.footer-grid a{
  display: block; padding: 6px 0;
  color: var(--white);
  font-size: 15px;
}
.footer-grid a:hover{ color: var(--sun); }
.footer-brand{
  display: block;
}
.footer-brand img{
  height: 44px; width: auto; display: block;
}
.footer-tag{
  margin-top: 24px;
  font-size: 14.5px; line-height: 1.55; color: var(--mist); max-width: 32ch;
}
.footer-bottom{
  margin-top: clamp(48px, 6vw, 80px);
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.12);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 12.5px; letter-spacing: 0.06em; color: rgba(255,255,255,.6);
}

/* ---------- Section background variants ---------- */
.bg-soft{ background: var(--mist-soft); }
.bg-paper{ background: var(--paper); }
.bg-mist{ background: var(--mist); }
.bg-ink{ background: var(--ink); color: var(--white); }
.bg-ink h1, .bg-ink h2{ color: var(--white); }
.bg-ink .eyebrow{ color: var(--mist); }
.bg-ink .eyebrow::before{ background: var(--sun); }

/* ---------- Project status badge ---------- */
.proj .badge{
  position: absolute;
  top: 14px; left: 14px;
  z-index: 2;
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 7px 12px 6px;
  background: var(--white);
  color: var(--ink);
  display: inline-flex; align-items: center; gap: 8px;
}
.proj .badge::before{
  content:"";
  width: 7px; height: 7px; border-radius: 999px;
  background: var(--sun);
  display: inline-block;
}
.proj.is-past .badge{ background: rgba(15,72,82,.9); color: var(--white); }
.proj.is-past .badge::before{ background: var(--mist); }
.proj .ph img{
  width: 100%; height: 100%; object-fit: cover;
  display: block;
  transition: transform .6s ease;
}
.proj:hover .ph img{ transform: scale(1.03); }
.reveal{ opacity: 0; transform: translateY(16px); transition: opacity .8s ease, transform .8s ease; }
.reveal.in{ opacity: 1; transform: none; }

/* ---------- Misc ---------- */
.section-head{
  display: flex; justify-content: space-between; align-items: flex-end; gap: 24px;
  margin-bottom: clamp(36px, 4vw, 64px);
  flex-wrap: wrap;
}
.section-head .left{ max-width: 60ch; }
.section-head h2{ margin-top: 14px; }

.kicker{
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--sea);
}