/* =====================================================
   DESIGN TOKENS
   In Framer: set these as Color Styles + Text Styles.
   Swap 'Jost' for your Nourd font file once uploaded.
===================================================== */
:root{
  --ink:#0F1F35;
  --ocean:#143B57;
  --teal:#4FC6DE;
  --sand:#C9B99A;
  --paper:#FFFFFF;
  --offwhite:#FAF9F6;
  --line:#E4E1D8;
  --text:#16202A;
  --text-soft:#5B6472;
}

*{box-sizing:border-box; margin:0; padding:0;}
body{font-family:'Work Sans', sans-serif; color:var(--text); background:var(--paper); font-weight:300; line-height:1.6;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}

/* TEXT STYLE: Display (Framer text style "Display / Wordmark") */
.wordmark{
  font-family:'Jost', sans-serif;
  letter-spacing:0.35em;
  text-transform:uppercase;
  font-weight:400;
}
h1,h2,h3{font-family:'Jost', sans-serif; font-weight:300;}
.eyebrow{font-size:11px; letter-spacing:0.25em; text-transform:uppercase; color:var(--teal);}

/* =====================================================
   COMPONENT: Nav
   Framer: Create Component "Nav" — one instance per page,
   set to "Fixed" position, add as override on every page.
===================================================== */
.site-nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:24px 56px;
  position:relative; z-index:10;
}
.site-nav.on-dark{position:absolute; top:0; left:0; right:0; color:var(--paper);}
.site-nav.on-light{background:var(--paper); border-bottom:1px solid var(--line); color:var(--ink);}
.site-nav .logo{font-size:13px;}
.site-nav .links{display:flex; gap:36px; font-size:12px; letter-spacing:0.08em; text-transform:uppercase;}
.site-nav .links a.active{border-bottom:1px solid currentColor; padding-bottom:3px;}
.site-nav .cta{border:1px solid currentColor; padding:9px 20px; font-size:11px; letter-spacing:0.08em; text-transform:uppercase;}

/* =====================================================
   COMPONENT: Page Header (used on Listings / About / Contact)
   Framer: Component "Page Header" — property: Title (text), Eyebrow (text)
===================================================== */
.page-header{
  background:var(--ink); color:var(--paper);
  padding:180px 56px 72px;
  text-align:left;
}
.page-header .eyebrow{color:var(--sand); display:block; margin-bottom:16px;}
.page-header h1{font-size:clamp(28px,4vw,44px); max-width:640px;}

/* =====================================================
   COMPONENT: Wave divider (signature element)
===================================================== */
.wave{display:block; width:100%; height:56px;}
.wave.flip{transform:rotate(180deg);}

/* =====================================================
   COMPONENT: Listing Card
   Framer: Component "Listing Card" — properties:
     Photo (image), Price (text), Address (text),
     Beds (text), Baths (text), Sqft (text)
   Bind each property to the matching CMS field.
===================================================== */
.card{background:var(--paper); display:block;}
.card .photo{height:220px; background:linear-gradient(135deg,#274a5e,#5b93a0);}
.card .body{padding:18px 2px;}
.card .price{font-family:'Jost', sans-serif; font-size:19px; margin-bottom:6px;}
.card .addr{font-size:13px; color:var(--text-soft); margin-bottom:10px; font-weight:300;}
.card .meta{font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-soft); display:flex; gap:14px;}

.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:32px;}
.wrap{max-width:1080px; margin:0 auto; padding:0 40px;}

/* =====================================================
   COMPONENT: Button (variants: primary / ghost)
===================================================== */
.btn{display:inline-block; padding:14px 30px; font-size:12px; letter-spacing:0.1em; text-transform:uppercase;}
.btn-primary{background:var(--ink); color:var(--paper);}
.btn-primary.on-dark{background:var(--paper); color:var(--ink);}
.btn-ghost{border:1px solid var(--ink); color:var(--ink);}
.btn-ghost.on-dark{border:1px solid rgba(255,255,255,0.6); color:var(--paper);}

/* =====================================================
   COMPONENT: Footer
   Framer: Component "Footer" — one instance, reused on every page.
===================================================== */
.site-footer{
  background:linear-gradient(90deg, var(--ink) 0%, var(--ink) 55%, #1c4f6e 78%, #4b8f95 100%);
  color:var(--paper); padding:64px 56px 40px;
}
.site-footer .row{display:flex; justify-content:space-between; align-items:center; max-width:1080px; margin:0 auto;}
.site-footer .wordmark{font-size:15px; color:var(--teal);}
.site-footer .mark{width:38px; height:38px; border:2px solid var(--paper); border-radius:50%; opacity:0.9;}
.site-footer .sub{max-width:1080px; margin:40px auto 0; font-size:11px; color:rgba(255,255,255,0.5); display:flex; justify-content:space-between;}

/* =====================================================
   PAGE-SPECIFIC: Home hero
===================================================== */
.hero{
  position:relative; height:88vh; min-height:560px;
  background:
    linear-gradient(180deg, rgba(15,31,53,0.15) 0%, rgba(15,31,53,0.55) 78%, var(--ink) 100%),
    linear-gradient(115deg, #1c4f6e 0%, #2f7a8f 38%, #6fb6b0 62%, #cdbf9c 100%);
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  text-align:center; color:var(--paper);
}
.hero h1{font-size:clamp(32px,5vw,58px); letter-spacing:0.02em; max-width:780px; line-height:1.25; margin:22px 0 28px;}
.hero p{font-size:15px; color:rgba(255,255,255,0.82); max-width:480px; margin-bottom:36px; font-weight:300;}
.hero .cta-row{display:flex; gap:16px;}

.pillars{display:grid; grid-template-columns:repeat(3,1fr); gap:64px; padding:96px 0;}
.pillar .num{font-family:'Jost', sans-serif; font-size:11px; letter-spacing:0.3em; color:var(--teal); margin-bottom:18px; display:block;}
.pillar h3{font-size:20px; letter-spacing:0.08em; text-transform:uppercase; margin-bottom:14px;}
.pillar p{font-size:14px; color:var(--text-soft);}

.section{padding:96px 0;}
.section.tinted{background:var(--offwhite);}
.section-head{display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:48px;}
.section-head h2{font-size:30px;}

/* =====================================================
   PAGE-SPECIFIC: Listings filter bar
===================================================== */
.filter-bar{display:flex; gap:24px; padding:32px 0; border-bottom:1px solid var(--line); margin-bottom:48px; font-size:12px; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-soft);}
.filter-bar span.active{color:var(--ink); border-bottom:1px solid var(--ink); padding-bottom:6px;}

/* =====================================================
   PAGE-SPECIFIC: Single listing
===================================================== */
.listing-hero{height:60vh; min-height:420px; background:linear-gradient(135deg,#274a5e,#5b93a0);}
.listing-gallery{display:grid; grid-template-columns:2fr 1fr 1fr; gap:8px; height:120px; margin-top:8px;}
.listing-gallery div{background:linear-gradient(135deg,#3a6a7d,#7fb0a6);}
.listing-main{display:grid; grid-template-columns:2fr 1fr; gap:64px; padding:64px 0;}
.listing-price{font-size:32px; margin-bottom:6px;}
.listing-addr{color:var(--text-soft); margin-bottom:24px; font-weight:300;}
.listing-facts{display:flex; gap:28px; padding:20px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-bottom:28px;}
.listing-facts div span{display:block; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-soft); margin-top:4px;}
.inquiry-card{background:var(--offwhite); padding:32px; height:fit-content;}
.inquiry-card h3{font-size:16px; letter-spacing:0.08em; text-transform:uppercase; margin-bottom:20px;}
.inquiry-card input, .inquiry-card textarea{
  width:100%; border:1px solid var(--line); background:var(--paper);
  padding:12px 14px; font-family:inherit; font-size:13px; margin-bottom:12px;
}
.inquiry-card textarea{resize:vertical; min-height:80px;}

/* =====================================================
   PAGE-SPECIFIC: About
===================================================== */
.about-main{display:grid; grid-template-columns:1fr 1.3fr; gap:64px; padding:80px 0; align-items:start;}
.about-photo{height:460px; background:linear-gradient(160deg,#1c3b52,#5b93a0);}
.about-main p{margin-bottom:18px; color:var(--text-soft); font-weight:300;}

/* =====================================================
   PAGE-SPECIFIC: Contact
===================================================== */
.contact-main{display:grid; grid-template-columns:1fr 1fr; gap:64px; padding:80px 0;}
.contact-info .row{display:flex; gap:14px; padding:14px 0; border-bottom:1px solid var(--line); font-size:14px;}
.contact-info .row span{color:var(--text-soft); width:90px; flex-shrink:0; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; padding-top:2px;}
.contact-form input, .contact-form textarea{
  width:100%; border:1px solid var(--line); background:var(--paper);
  padding:13px 14px; font-family:inherit; font-size:13px; margin-bottom:14px;
}
.contact-form textarea{resize:vertical; min-height:120px;}

@media (max-width: 860px){
  .site-nav .links{display:none;}
  .grid-3{grid-template-columns:1fr;}
  .pillars{grid-template-columns:1fr;}
  .listing-main, .about-main, .contact-main{grid-template-columns:1fr;}
}