@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600&display=swap');

:root{
  --navy: #1B2A3A;
  --navy-soft: #263B50;
  --black: #0E141C;
  --sand: #EDE4D3;
  --paper: #FAF8F4;
  --teal: #5C8A82;
  --teal-deep: #43655F;
  --line: rgba(27,42,58,0.14);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{ scroll-behavior:smooth; }
body{
  font-family:'Inter', sans-serif;
  background:var(--paper);
  color:var(--navy);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.serif{ font-family:'Fraunces', serif; }

nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:24px 48px;
  background:var(--paper);
  position:sticky; top:0; z-index:50;
  border-bottom:1px solid var(--line);
}
.logo{ font-family:'Fraunces', serif; font-weight:600; font-size:20px; letter-spacing:0.02em; color:var(--navy); text-decoration:none; display:inline-block; }
.navlinks{ display:flex; gap:36px; list-style:none; font-size:14.5px; font-weight:500; }
.navlinks a{ color:var(--navy); text-decoration:none; opacity:0.75; transition:opacity .2s; }
.navlinks a:hover{ opacity:1; }
.navlinks a.active{ opacity:1; border-bottom:1.5px solid var(--teal); padding-bottom:2px; }
.nav-cta{
  background:var(--navy); color:var(--paper); padding:10px 22px;
  border-radius:3px; font-size:14px; font-weight:600; text-decoration:none;
  letter-spacing:0.01em;
}
.nav-right{ display:flex; align-items:center; gap:18px; }
.nav-toggle{ display:none; }
.nav-toggle-btn{
  display:none; cursor:pointer; width:24px; height:18px; position:relative;
}
.nav-toggle-btn span, .nav-toggle-btn span::before, .nav-toggle-btn span::after{
  content:""; position:absolute; left:0; right:0; height:2px; background:var(--navy);
  transition:transform .2s;
}
.nav-toggle-btn span{ top:8px; }
.nav-toggle-btn span::before{ top:-8px; }
.nav-toggle-btn span::after{ top:8px; }
.nav-toggle:checked ~ .nav-right .nav-toggle-btn span{ background:transparent; }
.nav-toggle:checked ~ .nav-right .nav-toggle-btn span::before{ transform:translateY(8px) rotate(45deg); }
.nav-toggle:checked ~ .nav-right .nav-toggle-btn span::after{ transform:translateY(-8px) rotate(-45deg); }

.hero{
  position:relative; min-height:88vh; display:flex; align-items:flex-end;
  background:
    linear-gradient(180deg, rgba(27,42,58,0.20) 0%, rgba(27,42,58,0.68) 82%),
    url('hero-hb-pier.jpg');
  background-size: cover;
  background-position: center 65%;
  padding:64px 48px 72px;
}
.hero::after{
  content:""; position:absolute; inset:0;
  background-image:
    radial-gradient(circle at 15% 30%, rgba(255,255,255,0.10), transparent 45%),
    radial-gradient(circle at 80% 20%, rgba(255,255,255,0.08), transparent 40%);
}
.hero-inner{ position:relative; max-width:640px; z-index:2; }
.eyebrow{
  color:var(--sand); font-size:13px; font-weight:600; letter-spacing:0.16em;
  text-transform:uppercase; margin-bottom:18px; display:block;
  border-left:2px solid var(--teal); padding-left:12px;
}
.hero h1{
  color:var(--paper); font-size:clamp(36px, 5.2vw, 62px); line-height:1.06;
  font-weight:600; margin-bottom:22px; letter-spacing:-0.01em;
}
.hero h1 em{ font-style:italic; color:var(--sand); font-weight:500; }
.hero p{ color:rgba(250,248,244,0.86); font-size:17px; line-height:1.6; max-width:480px; margin-bottom:32px; }
.hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; }
.btn-primary{
  background:var(--teal); color:var(--paper); padding:14px 26px;
  border-radius:3px; text-decoration:none; font-weight:600; font-size:14.5px;
  letter-spacing:0.01em; transition:background .2s; display:inline-block;
}
.btn-primary:hover{ background:var(--teal-deep); }
.btn-secondary{
  background:var(--navy); color:var(--paper); padding:14px 26px;
  border-radius:3px; text-decoration:none; font-weight:600; font-size:14.5px;
  letter-spacing:0.01em; transition:background .2s; display:inline-block;
}
.btn-secondary:hover{ background:var(--navy-soft); }
.btn-ghost{
  border:1px solid rgba(250,248,244,0.5); color:var(--paper); padding:14px 26px;
  border-radius:3px; text-decoration:none; font-weight:600; font-size:14.5px;
}
.btn-white{
  background:var(--paper); color:var(--navy); padding:14px 26px;
  border-radius:3px; text-decoration:none; font-weight:600; font-size:14.5px;
  letter-spacing:0.01em; transition:background .2s; display:inline-block;
}
.btn-white:hover{ background:var(--sand); }

/* Page hero (interior pages) — shorter than the homepage hero */
.page-hero{
  position:relative; min-height:52vh; display:flex; align-items:flex-end;
  background:
    linear-gradient(180deg, rgba(20,28,38,0.15) 0%, rgba(20,28,38,0.18) 40%, rgba(15,22,32,0.88) 100%),
    url('hero-about-hills.webp');
  background-size: cover;
  background-position: center 68%;
  padding:64px 48px 56px;
}
.page-hero-inner{ position:relative; max-width:680px; z-index:2; }
.page-hero h1{
  color:var(--paper); font-size:clamp(38px, 5.4vw, 60px); line-height:1.08;
  font-weight:600; letter-spacing:-0.01em; text-shadow:0 2px 24px rgba(0,0,0,0.25);
}
.page-hero h1 em{ font-style:italic; color:var(--sand); font-weight:500; }

.about{
  display:grid; grid-template-columns:1fr 1fr; gap:64px;
  padding:110px 48px; max-width:1240px; margin:0 auto; align-items:center;
}
.about-eyebrow{
  font-size:13px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--teal-deep); margin-bottom:16px; display:block;
}
.about h2{ font-size:38px; line-height:1.15; margin-bottom:20px; font-weight:600; }
.about p{ font-size:16px; line-height:1.75; color:rgba(27,42,58,0.78); margin-bottom:16px; max-width:480px; }
.about-photo{
  aspect-ratio:4/5; border-radius:4px;
  background:linear-gradient(160deg, var(--navy-soft), var(--teal-deep));
  display:flex; align-items:center; justify-content:center;
  color:rgba(250,248,244,0.5); font-size:13px; font-style:italic;
  position:relative; overflow:hidden;
}
.about-photo img{
  width:100%; height:100%; object-fit:cover; object-position:center 78%;
  display:block;
}
.meet-link{
  display:inline-flex; align-items:center; gap:8px; color:var(--navy); font-weight:600;
  font-size:14.5px; text-decoration:none; border-bottom:1.5px solid var(--teal); padding-bottom:3px;
  margin-top:8px;
}

.pathways{ background:var(--navy); padding:64px 48px; }
.pathways-head{ max-width:640px; margin:0 auto 36px; text-align:center; }
.path-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:2px;
  max-width:1240px; margin:0 auto; background:rgba(250,248,244,0.12);
}
.path-card{ background:var(--navy); padding:52px 36px; text-align:left; transition:background .25s; }
.path-card:hover{ background:var(--navy-soft); }
.path-icon{
  width:54px; height:54px; border-radius:50%; border:1.5px solid var(--teal);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:28px; color:var(--sand); font-size:20px;
}
.path-card h3{ color:var(--paper); font-size:22px; margin-bottom:10px; font-weight:600; }
.path-card p{ color:rgba(250,248,244,0.62); font-size:14.5px; line-height:1.6; margin-bottom:18px; }
.path-link{ color:var(--sand); font-size:13.5px; font-weight:600; text-decoration:none; }

.tours{ padding:110px 48px; max-width:1240px; margin:0 auto; }
.tours-head{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:48px; flex-wrap:nowrap; gap:32px; }
.tours-head h2{ font-size:34px; flex-shrink:0; }
.tours-head p{ color:rgba(27,42,58,0.6); font-size:15px; flex:1; text-align:right; }
.tour-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:22px; }
.tour-card{ display:block; border-radius:4px; overflow:hidden; background:var(--sand); text-decoration:none; }
.tour-thumb{
  aspect-ratio:9/14; background:linear-gradient(200deg, #cfc09a, #5C8A82aa);
  display:flex; align-items:flex-end; padding:16px; position:relative;
  overflow:hidden;
}
.tour-thumb img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
}
.tour-thumb::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(27,42,58,0) 55%, rgba(27,42,58,0.75) 100%);
}
.tour-thumb .play-dot, .tour-thumb span{ position:relative; z-index:2; }
.tour-thumb span{ color:var(--paper); font-size:13px; font-weight:600; background:rgba(27,42,58,0.55); padding:6px 10px; border-radius:2px; }
.play-dot{
  position:absolute; top:14px; right:14px; width:34px; height:34px; border-radius:50%;
  background:rgba(250,248,244,0.9); display:flex; align-items:center; justify-content:center;
  font-size:12px; color:var(--navy);
}

.lead{ background:var(--sand); padding:80px 48px; text-align:center; }
.lead h2{ font-size:30px; margin-bottom:14px; }
.lead p{ color:rgba(27,42,58,0.68); margin-bottom:30px; }
.lead-form{ display:flex; justify-content:center; gap:10px; flex-wrap:wrap; }
.lead-form input{
  padding:14px 18px; border:1px solid var(--line); border-radius:3px; font-size:14.5px;
  width:280px; font-family:'Inter'; background:var(--paper);
}

footer{ background:var(--black); color:rgba(250,248,244,0.5); padding:36px 48px; font-size:13px; text-align:center; border-top:1px solid rgba(250,248,244,0.08); }

/* About page specifics */
.story{ padding:100px 48px 110px; max-width:720px; margin:0 auto; }
.story-intro{
  display:grid; grid-template-columns:minmax(160px, 220px) 1fr; gap:36px;
  align-items:center; margin-bottom:40px;
}
.story-headshot{
  aspect-ratio:4/5; border-radius:6px; overflow:hidden;
  box-shadow:0 0 0 1px var(--line);
}
.story-headshot img{ width:100%; height:100%; object-fit:cover; display:block; }
.story .about-eyebrow{ text-align:center; display:block; }
.story h2{ font-size:36px; text-align:center; margin-bottom:36px; }
.story-lede{
  font-family:'Fraunces', serif; font-size:21px; line-height:1.5; font-weight:500;
  text-align:left; color:var(--navy);
}
.story p{ font-size:16.5px; line-height:1.85; color:rgba(27,42,58,0.78); margin-bottom:22px; }

/* "Two sides of the same coin" — colored feature panel, kept compact since it's easy to skim past */
.coin{
  background:var(--sand); padding:64px 48px; text-align:center;
}
.coin .about-eyebrow{ text-align:center; }
.coin h2{ font-size:26px; margin-bottom:36px; }
.coin-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:0;
  max-width:900px; margin:0 auto; text-align:left;
}
.coin-col{ display:flex; flex-direction:column; justify-content:center; padding:0 40px; }
.coin-col:first-child{ border-right:1px solid var(--line); padding-left:0; }
.coin-col:last-child{ padding-right:0; }
.coin p{ font-size:15px; line-height:1.7; color:rgba(27,42,58,0.78); margin-bottom:16px; }
.coin p:last-child{ margin-bottom:0; }
.coin-col:last-child p{
  font-family:'Fraunces', serif; font-style:italic; font-size:17.5px;
  line-height:1.55; color:var(--navy);
}

@media(max-width:640px){
  .story-intro{ grid-template-columns:1fr; text-align:center; }
  .story-headshot{ width:min(220px, 60vw); aspect-ratio:4/5; margin:0 auto; }
  .story-lede{ text-align:center; }
}

.contact-cta{ padding:100px 48px; text-align:center; }
.contact-cta .cta-inner{ max-width:760px; margin:0 auto; }
.contact-cta h2{ font-size:34px; margin-bottom:16px; }
.contact-cta p{ font-size:16px; line-height:1.7; color:rgba(27,42,58,0.72); margin-bottom:32px; }
.contact-cta .hero-ctas{ justify-content:center; }
.contact-cta .btn-ghost{
  border-color:var(--line); color:var(--navy);
}
.contact-cta--dark{
  background:var(--navy); color:var(--paper);
}
.contact-cta--dark h2{ color:var(--paper); }
.contact-cta--dark p{ color:rgba(250,248,244,0.7); }
.contact-cta--dark .btn-ghost{ border-color:rgba(250,248,244,0.5); color:var(--paper); }

.contact-strip{ background:var(--paper); padding:0 48px 110px; text-align:center; }
.contact-strip .about-eyebrow{ text-align:center; }
.contact-strip h2{ font-size:32px; margin-bottom:40px; }
.contact-methods{
  display:flex; justify-content:center; gap:24px; max-width:720px; margin:0 auto;
}
.contact-method{
  display:flex; align-items:center; gap:16px; flex:1;
  padding:28px 24px; border:1px solid var(--line); border-radius:4px;
  text-decoration:none; color:var(--navy); text-align:left;
  transition:border-color .2s, background .2s;
}
.contact-method:hover{ border-color:var(--teal); background:var(--sand); }
.contact-icon{
  width:44px; height:44px; flex-shrink:0; border-radius:50%;
  border:1.5px solid var(--teal-deep); color:var(--teal-deep);
  display:flex; align-items:center; justify-content:center; font-size:18px;
}
.contact-text{ display:flex; flex-direction:column; gap:2px; }
.contact-label{
  font-size:12px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase;
  color:rgba(27,42,58,0.5);
}
.contact-value{ font-size:15.5px; font-weight:600; }

.social-intro{
  max-width:480px; margin:40px auto 20px; font-size:15px; line-height:1.6;
  color:rgba(27,42,58,0.7);
}
.social-links{ display:flex; justify-content:center; gap:28px; flex-wrap:wrap; }
.social-links a{
  color:var(--navy); font-size:14.5px; font-weight:600; text-decoration:none;
  border-bottom:1.5px solid var(--teal); padding-bottom:3px;
}
.social-links a:hover{ color:var(--teal-deep); }
.social-links--inline{
  justify-content:flex-start; gap:22px; margin-top:16px;
}
.social-links--inline a{ font-size:13.5px; }

/* Find a Home page */
.page-hero--find{
  background:
    linear-gradient(180deg, rgba(20,28,38,0.20) 0%, rgba(20,28,38,0.25) 40%, rgba(15,22,32,0.85) 100%),
    url('hero-find-a-home.jpg');
  background-size: cover;
  background-position: 92% 38%;
}

.search-section{ padding:100px 48px; max-width:900px; margin:0 auto; text-align:center; }
.search-section .about-eyebrow{ text-align:center; }
.search-section h2{ font-size:34px; margin-bottom:16px; }
.search-section > p{ font-size:16px; line-height:1.7; color:rgba(27,42,58,0.72); max-width:560px; margin:0 auto 40px; }
.realscout-search-wrap{ max-width:500px; margin:0 auto; }
.search-note{ margin-top:28px; font-size:14px; color:rgba(27,42,58,0.6); }
.search-note a{ color:var(--navy); font-weight:600; border-bottom:1.5px solid var(--teal); text-decoration:none; padding-bottom:2px; }

.popular-searches{ margin-bottom:48px; }
.popular-searches-label{
  font-size:12px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase;
  color:rgba(27,42,58,0.45); margin-bottom:18px;
}
.search-pills{ display:flex; justify-content:center; flex-wrap:wrap; gap:12px; max-width:640px; margin:0 auto; }
.search-pill{
  padding:10px 20px; border:1px solid var(--line); border-radius:100px;
  color:var(--navy); font-size:14px; font-weight:600; text-decoration:none;
  transition:border-color .2s, background .2s;
}
.search-pill:hover{ border-color:var(--teal); background:var(--sand); }

.listings-section{ background:var(--sand); padding:100px 48px; }
.listings-section-head{ max-width:640px; margin:0 auto 48px; text-align:center; }
.listings-section-head .about-eyebrow{ text-align:center; }
.listings-section-head h2{ font-size:34px; margin-bottom:16px; }
.listings-section-head p{ font-size:15px; line-height:1.65; color:rgba(27,42,58,0.65); }
.listings-wrap{
  max-width:1000px; margin:0 auto; background:var(--paper);
  padding:32px; border-radius:6px; border:1px solid var(--line);
}

realscout-office-listings{ --rs-listing-divider-color: var(--teal-deep); width:100%; }
realscout-advanced-search{
  --rs-as-button-text-color:#ffffff;
  --rs-as-background-color: var(--paper);
  --rs-as-button-color: var(--navy);
  --rs-as-widget-width: 100% !important;
}

/* Sell Your Home page */
.page-hero--sell{
  background:
    linear-gradient(180deg, rgba(20,28,38,0.18) 0%, rgba(20,28,38,0.22) 45%, rgba(15,22,32,0.82) 100%),
    url('hero-sell-your-home.jpg');
  background-size: cover;
  background-position: 68% 58%;
}

.sell-intro{ padding:100px 48px 90px; max-width:720px; margin:0 auto; text-align:center; }
.sell-intro .about-eyebrow{ text-align:center; }
.sell-intro h2{ font-size:34px; margin-bottom:20px; }
.sell-intro p{ font-size:16px; line-height:1.75; color:rgba(27,42,58,0.75); }

.sell-steps{ background:var(--navy); padding:80px 48px 100px; }
.sell-steps-head{ max-width:640px; margin:0 auto 48px; text-align:center; }
.sell-steps-head .about-eyebrow{ text-align:center; color:var(--sand); }
.sell-steps-head h2{ font-size:30px; color:var(--paper); }
.steps-row{
  display:flex; max-width:1140px; margin:0 auto;
  border-top:1px solid rgba(250,248,244,0.16);
}
.step-item{ flex:1; padding:32px 28px 4px; border-left:1px solid rgba(250,248,244,0.16); }
.step-item:first-child{ border-left:none; padding-left:0; }
.step-item:last-child{ padding-right:0; }
.step-num{
  font-family:'Fraunces', serif; font-style:italic; font-size:28px;
  color:var(--teal); display:block; margin-bottom:16px;
}
.step-item h3{ font-size:18px; margin-bottom:10px; font-weight:600; color:var(--paper); }
.step-item p{ font-size:14px; line-height:1.6; color:rgba(250,248,244,0.62); }

.valuation-section{ background:var(--sand); padding:100px 48px; text-align:center; }
.valuation-section .about-eyebrow{ text-align:center; }
.valuation-section h2{ font-size:32px; margin-bottom:24px; }
.valuation-copy{ max-width:560px; margin:0 auto 40px; }
.valuation-copy p{ font-size:15px; line-height:1.7; color:rgba(27,42,58,0.68); margin-bottom:16px; }
.valuation-copy p:last-child{ margin-bottom:0; }
.realscout-value-wrap{
  display:flex; justify-content:center; width:100%;
  scroll-margin-top:96px;
}
realscout-home-value{
  display:block; margin:0 auto; max-width:100%;
  --rs-hvw-background-color: var(--paper);
  --rs-hvw-title-color: var(--navy);
  --rs-hvw-subtitle-color: rgba(27,42,58,0.55);
  --rs-hvw-input-text-color: var(--navy);
  --rs-hvw-primary-button-text-color: #ffffff;
  --rs-hvw-primary-button-color: var(--navy);
  --rs-hvw-secondary-button-text-color: var(--navy);
  --rs-hvw-secondary-button-color: var(--paper);
  --rs-hvw-widget-width: auto;
}

/* OC Lifestyle page */
.page-hero--lifestyle{
  background:
    linear-gradient(180deg, rgba(20,28,38,0.15) 0%, rgba(20,28,38,0.20) 45%, rgba(15,22,32,0.85) 100%),
    url('hero-oc-lifestyle.jpg');
  background-size: cover;
  background-position: center 45%;
}

.lifestyle-intro{ padding:100px 48px 70px; max-width:720px; margin:0 auto; text-align:center; }
.lifestyle-intro .about-eyebrow{ text-align:center; }
.lifestyle-intro h2{ font-size:34px; margin-bottom:20px; }
.lifestyle-intro p{ font-size:16px; line-height:1.75; color:rgba(27,42,58,0.75); }

.lifestyle-section{ padding:0 48px 90px; }
.lifestyle-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:28px;
  max-width:1140px; margin:0 auto;
}
.lifestyle-card{
  display:flex; flex-direction:column;
  background:var(--paper); border:1px solid var(--line); border-radius:6px;
  padding:44px 36px; text-align:left; text-decoration:none; color:var(--navy);
  transition:border-color .2s;
}
.lifestyle-card:hover{ border-color:var(--teal); }
.lifestyle-icon{
  width:56px; height:56px; border-radius:50%; border:1.5px solid var(--teal-deep);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:26px; color:var(--teal-deep); font-size:22px;
}
.lifestyle-card h3{ font-size:22px; margin-bottom:12px; font-weight:600; }
.lifestyle-card p{ font-size:14.5px; line-height:1.65; color:rgba(27,42,58,0.68); margin-bottom:26px; }
.btn-card{
  align-self:flex-start; margin-top:auto;
  display:inline-block; padding:11px 22px; border:1.5px solid var(--teal-deep);
  color:var(--teal-deep); border-radius:3px;
  font-weight:600; font-size:13.5px; transition:background .2s, color .2s;
}
.lifestyle-card:hover .btn-card{ background:var(--teal-deep); color:var(--paper); }

.latest-section{ background:var(--sand); padding:90px 48px 100px; }
.latest-head{ max-width:640px; margin:0 auto 48px; text-align:center; }
.latest-head .about-eyebrow{ text-align:center; }
.latest-head h2{ font-size:32px; }
.latest-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:28px;
  max-width:1140px; margin:0 auto;
}
.article-card{
  display:block; background:var(--paper); border:1px solid var(--line); border-radius:6px;
  overflow:hidden; text-decoration:none; color:var(--navy); transition:border-color .2s;
}
.article-card:hover{ border-color:var(--teal); }
.article-photo{
  aspect-ratio:16/10; background:linear-gradient(160deg, var(--navy-soft), var(--teal-deep));
  display:flex; align-items:center; justify-content:center;
  color:rgba(250,248,244,0.5); font-size:13px; font-style:italic;
}
.article-body{ padding:26px 24px; }
.article-category{
  font-size:12px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--teal-deep); display:block; margin-bottom:10px;
}
.article-card h3{ font-size:18px; line-height:1.35; margin-bottom:16px; font-weight:600; }
.article-link{ font-size:13.5px; font-weight:600; color:var(--navy); }

/* Contact page */
.contact-page-head{ padding:110px 48px 56px; max-width:640px; margin:0 auto; text-align:center; }
.contact-page-head .about-eyebrow{ text-align:center; }
.contact-page-head h1{ font-size:clamp(32px, 4.6vw, 46px); margin-bottom:16px; line-height:1.12; }
.contact-page-head p{ font-size:16px; line-height:1.65; color:rgba(27,42,58,0.7); }

.lead-form-section{ padding:0 48px 130px; max-width:560px; margin:0 auto; }
.lead-form-card{
  background:var(--paper); border:1px solid var(--line); border-radius:8px;
  padding:44px; box-shadow:0 1px 3px rgba(27,42,58,0.05);
}
.lead-form-card h2{ font-size:24px; margin-bottom:10px; }
.lead-form-card > p{ font-size:14.5px; color:rgba(27,42,58,0.65); margin-bottom:28px; line-height:1.6; }
.form-row{ margin-bottom:22px; }
.form-row label{
  font-size:13px; font-weight:600; letter-spacing:0.02em; color:var(--navy);
  display:flex; flex-direction:column; gap:8px;
}
.form-row .optional{ font-weight:400; color:rgba(27,42,58,0.4); }
.form-row input, .form-row select, .form-row textarea{
  font-family:'Inter', sans-serif; font-size:15px; padding:12px 14px;
  border:1px solid var(--line); border-radius:4px; background:var(--paper); color:var(--navy);
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus{
  outline:none; border-color:var(--teal);
}
.form-row textarea{ resize:vertical; }
.lead-form-card button[type="submit"]{
  width:100%; border:none; cursor:pointer; font-size:15px; font-family:'Inter', sans-serif;
}
.form-error{ color:#b3261e; font-size:13.5px; line-height:1.5; margin-top:16px; text-align:center; }
.step2-actions{ display:flex; gap:12px; margin-top:6px; }
.step2-actions button{
  flex:1; font-size:14.5px; font-family:'Inter', sans-serif; cursor:pointer;
}
.step2-actions .btn-ghost{ border-color:var(--line); color:var(--navy); background:none; }
.step2-actions button[type="submit"]{ border:none; }
.lead-thankyou{ text-align:center; }
.lead-thankyou h2{ margin-bottom:12px; }
.lead-thankyou p{ margin-bottom:0; }

.direct-contact{ max-width:560px; margin:28px auto 0; text-align:center; }
.direct-contact-label{ font-size:13px; color:rgba(27,42,58,0.55); margin-bottom:14px; }
.direct-contact-actions{ display:flex; gap:12px; }
.btn-outline{
  flex:1; padding:12px 20px; border:1px solid var(--line); border-radius:4px;
  color:var(--navy); text-decoration:none; font-weight:600; font-size:14px;
  text-align:center; transition:border-color .2s, background .2s;
}
.btn-outline:hover{ border-color:var(--teal); background:var(--sand); }

/* Category subpages: Things to Do / Eat & Drink / City Guides */
.page-hero--things{
  background:
    linear-gradient(180deg, rgba(20,28,38,0.15) 0%, rgba(20,28,38,0.20) 45%, rgba(15,22,32,0.85) 100%),
    url('hero-things-to-do.jpg');
  background-size: cover;
  background-position: center 65%;
}
.page-hero--eat{
  background:
    linear-gradient(180deg, rgba(20,28,38,0.15) 0%, rgba(20,28,38,0.20) 45%, rgba(15,22,32,0.85) 100%),
    url('hero-eat-and-drink.jpg');
  background-size: cover;
  background-position: center 55%;
}
.page-hero--cities{
  background:
    linear-gradient(180deg, rgba(20,28,38,0.15) 0%, rgba(20,28,38,0.20) 45%, rgba(15,22,32,0.85) 100%),
    url('hero-city-guides.jpg');
  background-size: cover;
  background-position: center 68%;
}

.page-hero--learn{
  background:
    linear-gradient(180deg, rgba(20,28,38,0.15) 0%, rgba(20,28,38,0.20) 45%, rgba(15,22,32,0.85) 100%),
    url('hero-learn.jpg');
  background-size: cover;
  background-position: center 62%;
}

.page-hero--buying{
  background:
    linear-gradient(180deg, rgba(20,28,38,0.20) 0%, rgba(20,28,38,0.25) 45%, rgba(15,22,32,0.88) 100%),
    url('hero-buying.jpg');
  background-size: cover;
  background-position: center 40%;
}
.page-hero--selling{
  background:
    linear-gradient(180deg, rgba(20,28,38,0.30) 0%, rgba(20,28,38,0.35) 45%, rgba(15,22,32,0.88) 100%),
    url('hero-selling.jpg');
  background-size: cover;
  background-position: center 55%;
}
.page-hero--owning{
  background:
    linear-gradient(180deg, rgba(20,28,38,0.20) 0%, rgba(20,28,38,0.30) 45%, rgba(15,22,32,0.88) 100%),
    url('hero-owning-investing.jpg');
  background-size: cover;
  background-position: center 60%;
}

.category-intro{ padding:100px 48px 60px; max-width:720px; margin:0 auto; text-align:center; }
.back-link-wrap{ padding:20px 48px 0; }
.back-link{
  display:inline-block; color:rgba(27,42,58,0.55); text-decoration:none;
  font-size:13.5px; font-weight:600; transition:color .2s;
}
.back-link:hover{ color:var(--teal-deep); }
.category-intro .about-eyebrow{ text-align:center; }
.category-intro h2{ font-size:34px; margin-bottom:20px; }
.category-intro p{ font-size:16px; line-height:1.75; color:rgba(27,42,58,0.75); }

.post-list{ max-width:900px; margin:0 auto; padding:0 48px 110px; }
.post-row{
  display:flex; gap:32px; align-items:center; padding:32px 0;
  border-top:1px solid var(--line); text-decoration:none; color:var(--navy);
}
.post-list .post-row:first-child{ border-top:none; padding-top:0; }
.post-thumb{
  flex:0 0 240px; aspect-ratio:4/3; border-radius:6px; overflow:hidden; position:relative;
  background:linear-gradient(160deg, var(--navy-soft), var(--teal-deep));
  display:flex; align-items:center; justify-content:center;
  color:rgba(250,248,244,0.5); font-size:12.5px; font-style:italic;
}
.post-thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.post-content{ flex:1; }
.post-category{
  font-size:12px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--teal-deep); display:block; margin-bottom:10px;
}
.post-meta{ display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-bottom:10px; }
.post-meta .post-category{ margin-bottom:0; }
.post-meta .post-city{ font-size:12.5px; color:rgba(27,42,58,0.5); }
.post-meta .post-date{ font-size:12px; color:rgba(27,42,58,0.45); }
.post-meta .post-city::before, .post-meta .post-date::before{ content:"·"; margin-right:10px; color:rgba(27,42,58,0.3); }
.post-sponsored{
  display:inline-block; font-size:11px; font-weight:600; letter-spacing:0.04em;
  color:var(--teal-deep); border:1px solid var(--teal-deep); border-radius:100px;
  padding:2px 10px; margin-bottom:10px;
}
.post-content h3{ font-size:20px; margin-bottom:10px; font-weight:600; line-height:1.3; transition:color .2s; }
.post-content p{ font-size:14.5px; line-height:1.65; color:rgba(27,42,58,0.68); margin-bottom:14px; }
.post-link{ font-size:13.5px; font-weight:600; color:var(--navy); }
.post-row:hover h3{ color:var(--teal-deep); }
.post-row:hover .post-thumb{ opacity:0.9; }
.post-row:focus-visible{ outline:2px solid var(--teal-deep); outline-offset:4px; border-radius:6px; }
.filter-pill:focus-visible{ outline:2px solid var(--teal-deep); outline-offset:2px; }
.btn-load-more:focus-visible{ outline:2px solid var(--teal-deep); outline-offset:2px; }
.archive-search:focus-visible{ border-color:var(--teal); }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.archive-controls{ margin-bottom:48px; }
.archive-search{
  display:block; width:100%; max-width:420px; margin:0 auto 24px;
  padding:13px 20px; border:1px solid var(--line); border-radius:100px;
  font-family:'Inter', sans-serif; font-size:14.5px; background:var(--paper); color:var(--navy);
}
.archive-search:focus{ outline:none; border-color:var(--teal); }
.filter-pills{ display:flex; justify-content:center; flex-wrap:wrap; gap:10px; }
.filter-pill{
  padding:9px 18px; border:1px solid var(--line); border-radius:100px;
  background:var(--paper); color:var(--navy); font-size:13.5px; font-weight:600;
  font-family:'Inter', sans-serif; cursor:pointer; transition:border-color .2s, background .2s, color .2s;
}
.filter-pill:hover{ border-color:var(--teal); }
.filter-pill.active{ background:var(--navy); border-color:var(--navy); color:var(--paper); }

.archive-empty{ display:none; text-align:center; padding:48px 0; color:rgba(27,42,58,0.55); font-size:15px; }
.load-more-wrap{ display:none; text-align:center; margin-top:8px; }
.btn-load-more{
  display:inline-block; padding:12px 30px; border:1.5px solid var(--teal-deep);
  background:none; color:var(--teal-deep); border-radius:3px;
  font-weight:600; font-size:14px; font-family:'Inter', sans-serif; cursor:pointer;
  transition:background .2s, color .2s;
}
.btn-load-more:hover{ background:var(--teal-deep); color:var(--paper); }

@media(max-width:860px){
  .about{ grid-template-columns:1fr; }
  .path-grid, .tour-grid, .lifestyle-grid, .latest-grid{ grid-template-columns:1fr; }
  .coin-grid{ grid-template-columns:1fr; text-align:center; }
  .coin-col{ padding:0; }
  .coin-col:first-child{
    border-right:none; border-bottom:1px solid var(--line);
    padding-bottom:24px; margin-bottom:24px;
  }
  .contact-methods{ flex-direction:column; }
  nav{ padding:16px 18px; flex-wrap:wrap; }
  .logo{ font-size:17px; }
  .nav-right{ gap:12px; }
  .nav-cta{ padding:8px 14px; font-size:12.5px; }
  .nav-toggle-btn{ display:block; flex-shrink:0; }
  .navlinks{
    display:none; width:100%; order:3;
    flex-direction:column; gap:0; margin-top:18px;
  }
  .nav-toggle:checked ~ .navlinks{ display:flex; }
  .navlinks li{ padding:14px 0; border-top:1px solid var(--line); }
  .navlinks a{ opacity:0.85; }
  .hero, .page-hero, .about, .pathways, .tours, .lead, .story, .coin, .contact-cta, .contact-strip, .search-section, .listings-section, .contact-page-head, .lead-form-section, .sell-intro, .sell-steps, .valuation-section, .lifestyle-intro, .lifestyle-section, .latest-section, .category-intro, .post-list, .back-link-wrap{ padding-left:24px; padding-right:24px; }
  .post-row{ flex-direction:column; align-items:stretch; gap:18px; }
  .post-thumb{ flex:none; width:100%; }
  .listings-wrap{ padding:18px; }
  .tours-head{ flex-direction:column; align-items:flex-start; gap:12px; }
  .tours-head p{ text-align:left; max-width:none; }
  .lead-form-card{ padding:28px 24px; }
  .direct-contact-actions{ flex-direction:column; }
  .steps-row{ flex-direction:column; border-top:none; }
  .step-item{
    border-left:none; padding:24px 0; border-top:1px solid var(--line);
  }
  .step-item:first-child{ border-top:none; padding-top:0; }
}

/* =========================================================================
 * Lead-capture: contextual callouts + site-wide modal  (driven by leads.js)
 * All copy / targeting lives in leads.js — this is styling only.
 * ========================================================================= */

/* Honeypot field on the contact form (see contact.html) */
.hp-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.sg-lead{
  font-family:'Inter', sans-serif;
  color:var(--navy);
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow:0 18px 44px -12px rgba(14,20,28,0.35), 0 4px 12px rgba(14,20,28,0.08);
  padding:22px 22px 20px;
  position:relative;
}

.sg-lead-close{
  position:absolute; top:8px; right:8px;
  width:34px; height:34px; border:none; border-radius:8px;
  background:none; color:rgba(27,42,58,0.5);
  font-size:22px; line-height:1; cursor:pointer;
  transition:background .15s, color .15s;
}
.sg-lead-close:hover{ background:var(--sand); color:var(--navy); }
.sg-lead-close:focus-visible{ outline:2px solid var(--teal); outline-offset:2px; }

.sg-lead-heading{
  font-family:'Fraunces', serif; font-weight:600;
  font-size:17.5px; line-height:1.25; color:var(--navy);
  padding-right:26px; margin-bottom:7px;
}
.sg-lead-copy{
  font-size:13px; line-height:1.55; color:rgba(27,42,58,0.7);
}

.sg-lead-form{ margin-top:14px; display:flex; flex-direction:column; gap:9px; }
.sg-lead-actions{ display:flex; gap:8px; }

.sg-lead-input{
  width:100%; padding:10px 12px;
  border:1px solid var(--line); border-radius:7px;
  font:400 14px/1.4 'Inter', sans-serif; color:var(--navy);
  background:#fff;
}
.sg-lead-input--sm{ padding:8px 10px; font-size:13px; }
.sg-lead-input:focus{ outline:none; border-color:var(--teal); box-shadow:0 0 0 3px rgba(92,138,130,0.15); }

.sg-lead-btn{
  flex:1 1 auto;
  padding:10px 16px; border:none; border-radius:7px;
  background:var(--teal); color:var(--paper);
  font:600 13.5px/1 'Inter', sans-serif; cursor:pointer;
  transition:background .18s, opacity .18s;
}
.sg-lead-btn:hover{ background:var(--teal-deep); }
.sg-lead-btn:focus-visible{ outline:2px solid var(--navy); outline-offset:2px; }
.sg-lead-btn:disabled{ opacity:0.65; cursor:default; }
.sg-lead-btn--ghost{
  flex:0 0 auto;
  background:none; border:1px solid var(--line); color:var(--navy);
}
.sg-lead-btn--ghost:hover{ background:var(--sand); }

.sg-lead-consent-row{
  display:flex; align-items:flex-start; gap:8px;
  font-size:11px; line-height:1.45; color:rgba(27,42,58,0.6);
  cursor:pointer;
}
.sg-lead-consent{ flex:0 0 auto; margin-top:1px; accent-color:var(--teal-deep); }

.sg-lead-hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }

.sg-lead-err{ font-size:12px; line-height:1.45; color:#b3261e; margin-top:2px; }

.sg-lead-subhead{ font-size:12.5px; font-weight:600; color:var(--navy); margin-bottom:2px; }
.sg-lead-plabel{ display:flex; flex-direction:column; gap:3px; margin-bottom:2px; }
.sg-lead-plabel > span{
  font-size:10.5px; font-weight:600; letter-spacing:0.04em;
  text-transform:uppercase; color:var(--teal-deep);
}
.sg-lead-pform{ margin-top:12px; }

.sg-lead-done-title{ font-family:'Fraunces', serif; font-weight:600; font-size:17px; margin-bottom:5px; }
.sg-lead-done{ font-size:13px; line-height:1.55; color:rgba(27,42,58,0.75); margin-top:6px; }
.sg-lead-done p + p{ margin-top:4px; }

/* ---- Contextual callout: corner card, no overlay ---- */
.sg-callout{
  position:fixed; right:24px; bottom:24px; z-index:200;
  width:360px; max-width:calc(100vw - 32px);
  opacity:0; transform:translateY(18px);
  transition:opacity .3s ease, transform .3s cubic-bezier(.2,.7,.3,1);
}
.sg-callout.is-visible{ opacity:1; transform:translateY(0); }

/* ---- Site modal: centered dialog with dimmed backdrop ---- */
.sg-lead-overlay{
  position:fixed; inset:0; z-index:300;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  background:rgba(14,20,28,0.55);
  opacity:0; transition:opacity .28s ease;
}
.sg-lead-overlay.is-visible{ opacity:1; }
.sg-modal-card{
  width:100%; max-width:424px; padding:32px 30px 26px;
  transform:scale(0.96); transition:transform .28s cubic-bezier(.2,.7,.3,1);
}
.sg-lead-overlay.is-visible .sg-modal-card{ transform:scale(1); }
.sg-modal-card .sg-lead-heading{ font-size:22px; }
.sg-modal-card .sg-lead-copy{ font-size:14px; }

@media(max-width:560px){
  .sg-callout{
    right:0; bottom:0; left:0; width:100%; max-width:none;
    border-radius:16px 16px 0 0;
    transform:translateY(100%);
  }
  .sg-callout.is-visible{ transform:translateY(0); }
  .sg-lead-actions{ flex-wrap:wrap; }
}

@media(prefers-reduced-motion:reduce){
  .sg-callout, .sg-lead-overlay, .sg-modal-card{ transition:none; }
}