@font-face{font-family:'Vesta Display';src:url('assets/fonts/vesta-display-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
/* The Audrey display face ships several punctuation glyphs EMPTY - they are
   mapped and reserve width but have no outlines, so they render as blank gaps.
   Because the glyph exists, the browser never falls back on its own.
   Affected: | (r) . en/em dash bullet ellipsis, and the accented
             letters u-diaeresis n-tilde a-circumflex e-circumflex
             i-circumflex o-circumflex u-circumflex c-cedilla and their caps
   These are borrowed from the body face, which draws them correctly. */
@font-face{font-family:'Vesta Display';src:url('assets/fonts/vesta-body-300.woff2') format('woff2');unicode-range:U+007C,U+00A1,U+00A9,U+00AA,U+00AB,U+00AE,U+00B0,U+00B7,U+00BA,U+00BB,U+00BF,U+00C2,U+00CD,U+00D1,U+00D4,U+00D7,U+00E2,U+00E7,U+00EA,U+00EE,U+00F1,U+00F4,U+00FB,U+00FC,U+2013-2014,U+2022,U+2026;font-weight:400;font-style:normal;font-display:swap;}
  @font-face{font-family:'Vesta Body';src:url('assets/fonts/vesta-body-300.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap;}
  @font-face{font-family:'Vesta Body';src:url('assets/fonts/vesta-body-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;}


  :root{
    --black-sand:#191919; --sand:#D3C9B6; --palm:#C8DCD1; --sea-mist:#E9EEEC;
    --warm-bg:#FAF6F0; --muted-fg:#6B5D52;
    --display:'Vesta Display','Georgia',serif;
    --body:'Vesta Body',-apple-system,sans-serif;
  }
  *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
  body{font-family:var(--body);font-weight:300;color:var(--black-sand);background:var(--warm-bg);font-size:16px;line-height:1.65;}
  a{color:inherit;text-decoration:none;}
  img{max-width:100%;display:block;}

  @keyframes kenburns-bg{0%{background-size:105%;}100%{background-size:120%;}}
  @keyframes kenburns-img{0%{transform:scale(1.0);}100%{transform:scale(1.1);}}

  /* site nav (this IS the real navigation, and it doubles as the page switcher for this preview) */
  .site-nav{position:sticky;top:0;z-index:900;isolation:isolate;background:rgba(250,246,240,0.94);backdrop-filter:blur(10px);border-bottom:1px solid rgba(25,25,25,.08);}
  .nav-inner{max-width:1240px;margin:0 auto;padding:20px 32px;display:flex;align-items:center;justify-content:space-between;}
  .nav-logo{font-family:var(--display);font-size:16px;letter-spacing:3px;cursor:pointer;background:none;border:none;color:var(--black-sand);}
  
/* Mobile menu button and panel */
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:10px;margin:-10px -10px -10px 0;
  flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;}
.nav-toggle span{display:block;width:22px;height:1.5px;background:var(--black-sand);
  transition:transform .25s ease,opacity .2s ease;}
.site-nav.menu-open .nav-toggle span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.site-nav.menu-open .nav-toggle span:nth-child(2){opacity:0;}
.site-nav.menu-open .nav-toggle span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}

@media(max-width:860px){
  .nav-toggle{display:flex;}
  .nav-inner{padding:16px 22px;}
  .nav-cb{display:none;}
  .site-nav.menu-open .nav-links{display:flex;flex-direction:column;align-items:flex-start;gap:0;
    position:fixed;top:57px;left:0;right:0;bottom:0;background:var(--warm-bg);
    padding:14px 26px 40px;overflow-y:auto;z-index:900;}
  .site-nav.menu-open .nav-links > a,
  .site-nav.menu-open .nav-group{width:100%;border-bottom:1px solid rgba(25,25,25,.08);}
  .site-nav.menu-open .nav-link{font-size:14px;letter-spacing:1.5px;padding:17px 0;width:100%;
    border-bottom:none;}
  /* dropdowns are always open inside the panel — no second tap needed */
  .site-nav.menu-open .nav-menu{position:static;display:block;box-shadow:none;background:none;
    border:none;padding:0 0 14px 2px;min-width:0;opacity:1;visibility:visible;transform:none;}
  .site-nav.menu-open .nav-menu a{display:block;font-size:13px;padding:11px 0;color:var(--muted-fg);
    text-transform:none;letter-spacing:.3px;border-bottom:none;}
  .site-nav.menu-open .nav-menu-lead{font-weight:600;color:var(--black-sand);}
  .site-nav.menu-open .nav-menu-note{display:block;font-size:11.5px;color:var(--muted-fg);
    padding:2px 0 10px;line-height:1.5;}
  .site-nav.menu-open .nav-caret{display:none;}
}
@media(prefers-reduced-motion:reduce){ .nav-toggle span{transition:none;} }
.nav-links{display:flex;gap:22px;align-items:center;}
  .nav-link{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;background:none;border:none;cursor:pointer;color:var(--black-sand);padding:4px 0;border-bottom:1px solid transparent;font-family:var(--body);}
  .nav-link.active{border-bottom-color:var(--black-sand);}

  /* ---- NAV DROPDOWN ---- */
  .nav-group{position:relative;display:flex;align-items:center;}
  .nav-group > .nav-link{display:inline-flex;align-items:center;gap:5px;}
  .nav-caret{display:inline-block;width:0;height:0;border-left:3.5px solid transparent;border-right:3.5px solid transparent;border-top:4px solid currentColor;opacity:.55;transition:transform .18s ease,opacity .18s ease;}
  .nav-group:hover .nav-caret,.nav-group:focus-within .nav-caret{transform:rotate(180deg);opacity:1;}
  .nav-menu{position:absolute;top:100%;left:-16px;min-width:212px;background:#FFFDFA;border:1px solid rgba(25,25,25,.09);border-radius:2px;box-shadow:0 8px 28px rgba(25,25,25,.10);padding:8px 0;margin-top:14px;opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .18s ease,transform .18s ease,visibility .18s;z-index:950;-webkit-transform:translateZ(0);will-change:transform,opacity;}
  .nav-group:hover .nav-menu,.nav-group:focus-within .nav-menu{opacity:1;visibility:visible;transform:translateY(0);}
  .nav-menu::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px;}
  .nav-menu a{display:block;padding:9px 18px;font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:var(--black-sand);text-decoration:none;transition:background .15s ease;}
  .nav-menu a:hover{background:var(--warm-bg);}
  .nav-menu .nav-menu-note{display:block;font-size:10px;letter-spacing:.3px;text-transform:none;color:var(--muted-fg);padding:1px 18px 9px;}
  .nav-menu a.nav-menu-lead{border-bottom:1px solid rgba(25,25,25,.07);margin-bottom:5px;padding-bottom:10px;}
  .nav-cb{font-size:10px;letter-spacing:1px;color:var(--muted-fg);text-align:right;line-height:1.5;border-left:1px solid rgba(25,25,25,.12);padding-left:18px;text-transform:uppercase;white-space:nowrap;}
  .nav-cb b{font-size:10.5px;letter-spacing:1.5px;}
  .nav-cb b{display:block;color:var(--black-sand);}
  /* The name block is a link to About — styled so it still reads as a credential,
     not as navigation. */
  a.nav-cb{text-decoration:none;transition:opacity .15s;}
  a.nav-cb:hover{opacity:.62;}
  a.nav-cb:focus-visible{outline:2px solid var(--forest,#4E7A5D);outline-offset:3px;}


  .container{max-width:1240px;margin:0 auto;padding:0 32px;}
  .section{padding:88px 32px;}
  .section-warm{background:var(--warm-bg);}
  .section-mist{background:var(--sea-mist);}
  .section-black{background:var(--black-sand);color:#fff;}
  .eyebrow{font-size:11px;letter-spacing:4px;text-transform:uppercase;color:var(--muted-fg);margin-bottom:16px;}
  .eyebrow.on-dark{color:var(--sand);}
  h1,h2,h3{font-family:var(--display);font-weight:400;}
  
/* Opening statement on the About page — sized to sit alongside the
   section headings rather than below the body copy. */
.about-lede{font-family:var(--display);font-size:clamp(24px,2.6vw,32px);line-height:1.32;color:var(--black-sand);font-style:normal;margin:0 0 30px;max-width:22em;text-wrap:balance;}
.section-title{font-size:clamp(28px,3.4vw,42px);line-height:1.2;margin-bottom:16px;}
  .section-sub{font-size:15px;color:var(--muted-fg);max-width:560px;font-weight:300;line-height:1.75;}
  .center{text-align:center;margin-left:auto;margin-right:auto;}

  .btn{display:inline-block;border:1px solid var(--black-sand);color:var(--black-sand);padding:13px 30px;font-size:11px;letter-spacing:2px;text-transform:uppercase;}
  .btn-fill{display:inline-block;background:var(--black-sand);color:#fff;padding:14px 32px;font-size:11px;letter-spacing:2px;text-transform:uppercase;border:1px solid var(--black-sand);}
  .btn-light{display:inline-block;border:1px solid rgba(255,255,255,.6);color:#fff;padding:13px 30px;font-size:11px;letter-spacing:2px;text-transform:uppercase;}
  
/* Return to the listings index, placed above the fold on property pages. */
.back-link{display:inline-flex;align-items:center;gap:8px;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--muted-fg);border-bottom:none;margin-bottom:26px;transition:color .2s ease;}
.back-link:hover{color:var(--black-sand);}
.back-link .back-arrow{transition:transform .2s ease;display:inline-block;}
.back-link:hover .back-arrow{transform:translateX(-3px);}
.link-underline{font-size:11px;letter-spacing:2px;text-transform:uppercase;border-bottom:1px solid currentColor;padding-bottom:4px;}
  .social-row{display:flex;gap:12px;margin-top:22px;}
  .social-badge{width:40px;height:40px;border:1px solid var(--black-sand);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--black-sand);transition:background .2s ease,color .2s ease;}
  .social-badge:hover{background:var(--black-sand);color:#fff;}

  /* ---- HOME HERO ---- */
  .hero{position:relative;height:88vh;min-height:600px;display:flex;align-items:flex-end;overflow:hidden;}
  .hero-img{position:absolute;inset:0;background-position:center;background-repeat:no-repeat;background-size:105%;animation:kenburns-bg 24s ease-in-out infinite alternate;}
  .hero-overlay{position:absolute;inset:0;background:linear-gradient(0deg,rgba(35,20,8,.62) 0%,rgba(35,20,8,.08) 55%);}
  .hero-content{position:relative;z-index:2;color:#fff;width:100%;max-width:1240px;margin:0 auto;padding:0 32px 76px;}
/* text column sits inside the same gutter as every other page section */
.hero-content > *{max-width:640px;}
.hero-content > .btn-row{max-width:none;}
  .hero-content h1{font-size:clamp(36px,5vw,58px);line-height:1.15;margin-bottom:20px;}
  .hero-content p{font-size:15px;color:rgba(255,255,255,.85);max-width:440px;margin-bottom:28px;font-weight:300;}
  .btn-row{display:flex;gap:14px;flex-wrap:wrap;}

  /* ---- PAGE HERO (interior pages) ---- */
  .page-hero{position:relative;height:340px;display:flex;align-items:center;overflow:hidden;}
  /* Page heroes center their text, so the sitewide bottom-up gradient lands in
     the wrong place. Darken from the left instead - behind the heading - and
     clear across the right so more of the photograph shows. */
  .page-hero .hero-overlay{background:linear-gradient(90deg,
      rgba(28,18,10,.68) 0%, rgba(28,18,10,.46) 28%,
      rgba(28,18,10,.16) 58%, rgba(28,18,10,0) 82%);}
  @media(max-width:760px){
    .page-hero .hero-overlay{background:linear-gradient(90deg,
        rgba(28,18,10,.72) 0%, rgba(28,18,10,.52) 55%, rgba(28,18,10,.28) 100%);}
  }
  .page-hero-content{position:relative;z-index:2;color:#fff;}
  .page-hero-content h1{font-size:clamp(30px,4vw,44px);margin-bottom:10px;}
  .page-hero-content p{color:rgba(255,255,255,.82);font-size:14.5px;font-weight:300;}

  /* ---- SPOTLIGHT (home) ---- */
  .spotlight-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:center;}
  .spotlight-img{height:440px;border-radius:2px;overflow:hidden;}
  .spotlight-img img{width:100%;height:100%;object-fit:cover;}
  .spotlight-body p{color:var(--muted-fg);font-size:14.5px;font-weight:300;line-height:1.8;margin:18px 0 26px;}

  /* ---- ABOUT SPLIT ---- */
  .split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
  .split-img{height:420px;border-radius:2px;overflow:hidden;}
  .split-img img{width:100%;height:100%;object-fit:cover;}
  /* Portraits crop from the top so the subject's head isn't cut off. */
  .split-img.portrait img{object-position:center 12%;}
  .split-body p{color:var(--muted-fg);font-size:14.5px;font-weight:300;margin-bottom:16px;line-height:1.8;}
  /* Closing statement line: display face, so it needs its own tighter leading
     rather than inheriting the 1.8 meant for 14.5px body copy. */
  .split-body p.closing-line{font-family:var(--display);font-size:19px;line-height:1.45;
    color:var(--black-sand);margin:28px 0 0;max-width:26em;text-wrap:balance;}

  /* ---- QUOTE ---- */
  .quote-block{max-width:680px;margin:0 auto;text-align:center;}
  .quote-block p{font-family:var(--display);font-style:normal;font-size:22px;line-height:1.6;margin-bottom:18px;}
  .quote-block span{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--muted-fg);}
  /* Real testimonials run four or five sentences, not one line. At 22px a
     paragraph that long becomes a wall; .long steps it down and widens the
     measure so it still reads as speech. */
  .quote-block.long{max-width:760px;}
  .quote-block.long p{font-size:18px;line-height:1.72;text-wrap:pretty;}

  /* Client testimonials. Real ones, supplied by Michael — the single centred
     .quote-block above used to carry an invented "Robert & Emily Chen,
     Vancouver" that survived the sweep which caught the homepage one.
     Two-column rather than three: these run long, and three columns of
     small type reads as a review widget instead of people talking. */
  .quote-row{display:grid;grid-template-columns:repeat(2,1fr);gap:34px;align-items:start;}
  /* White on #FAF6F0 is only a few points of contrast, so the cards need the
     border plus a whisper of shadow to read as cards on the homepage's warm
     band as well as on the mist band on About. */
  .quote-card{padding:26px 28px 24px;background:#fff;border:1px solid rgba(0,0,0,.09);
    border-radius:2px;box-shadow:0 1px 3px rgba(25,25,25,.04);}
  .quote-card p{font-family:var(--display);font-size:16.5px;line-height:1.7;color:var(--black-sand);
    margin:0 0 16px;text-wrap:pretty;}
  .quote-card .qc-by{display:block;font-size:11px;letter-spacing:2px;text-transform:uppercase;
    color:var(--muted-fg);}
  /* An odd count leaves a hole in a 2-up grid; the last card spans both and
     centres its text so the row closes cleanly at any number. */
  .quote-row.odd .quote-card:last-child{grid-column:1 / -1;max-width:620px;margin:0 auto;text-align:center;}
  @media(max-width:760px){
    .quote-row{grid-template-columns:1fr;gap:22px;}
    .quote-row.odd .quote-card:last-child{text-align:left;}
  }

  /* ---- COMMUNITIES ---- */
  .feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;}
  .feature-card-img{height:230px;border-radius:2px;overflow:hidden;margin-bottom:18px;}
  .feature-card-img img{width:100%;height:100%;object-fit:cover;}
  .feature-loc{font-size:11px;letter-spacing:1px;color:var(--muted-fg);margin-bottom:6px;}
  .feature-name{font-family:var(--display);font-size:19px;margin-bottom:8px;}
  .feature-desc{font-size:13.5px;color:var(--muted-fg);font-weight:300;line-height:1.7;margin-bottom:12px;}
  .feature-bullets{font-size:12.5px;color:var(--black-sand);}
  .feature-bullets div{margin-bottom:4px;}
  .feature-bullets div::before{content:'— ';color:var(--muted-fg);}
  .more-communities{margin-top:56px;padding-top:36px;border-top:1px solid rgba(25,25,25,.1);}
  .more-communities h2{font-family:var(--display);font-size:15px;margin-bottom:14px;font-weight:400;}
  .more-list{display:grid;grid-template-columns:1fr 1fr;gap:14px 40px;font-size:13.5px;color:var(--muted-fg);line-height:1.5;}
  .more-list b{color:var(--black-sand);font-weight:600;}
  @media(max-width:640px){.more-list{grid-template-columns:1fr;}}

  /* ---- LISTINGS ---- */
  .listing-row{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:center;padding:44px 0;border-bottom:1px solid rgba(25,25,25,.1);}
  .listing-row:first-of-type{padding-top:0;}
  .listing-img{height:280px;border-radius:2px;overflow:hidden;}
  .listing-img img{width:100%;height:100%;object-fit:cover;}
  .listing-price{font-family:var(--display);font-size:24px;margin-bottom:6px;}
  .listing-title{font-size:16px;font-weight:600;margin-bottom:6px;}
  .listing-loc{font-size:12px;color:var(--muted-fg);margin-bottom:14px;}
  .listing-desc{font-size:13.5px;color:var(--muted-fg);font-weight:300;line-height:1.75;margin-bottom:18px;}
  .listing-facts{display:flex;gap:22px;font-size:12.5px;color:var(--black-sand);margin-bottom:20px;}
  .pending-tag{display:inline-block;background:var(--sand);color:var(--black-sand);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;padding:4px 12px;border-radius:100px;margin-bottom:10px;}
  .back-tag{display:inline-block;background:#6FA07F;color:#fff;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;padding:4px 12px;border-radius:100px;margin-bottom:10px;}
  .brokerage-tag{display:inline-block;background:rgba(25,25,25,.06);color:var(--muted-fg);font-size:9.5px;letter-spacing:1.2px;text-transform:uppercase;padding:4px 11px;border-radius:100px;margin-bottom:10px;}
  .listed-by{font-size:11.5px;color:var(--muted-fg);font-weight:300;margin-top:14px;padding-top:12px;border-top:1px solid rgba(25,25,25,.08);}
  .section-intro-note{font-size:13.5px;color:var(--muted-fg);font-weight:300;line-height:1.8;max-width:640px;margin:-14px 0 34px;}

  /* ---- Communities page ------------------------------------------------
     Eleven communities, each with a real write-up. Six have no photograph
     yet. Rather than borrow a photo of one house to stand for a whole
     community, those six get a typographic plate: the name set large on
     the sand palette. Meant to look chosen, not missing. When a real photo
     arrives, .cm-plate is swapped for .cm-photo and nothing else changes. */
  .cm-list{display:flex;flex-direction:column;gap:64px;margin-top:8px;}
  .cm-entry{display:grid;grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr);gap:38px;align-items:start;}
  .cm-entry:nth-child(even) .cm-figure{order:2;}
  @media(max-width:820px){
    .cm-entry{grid-template-columns:1fr;gap:22px;}
    .cm-entry:nth-child(even) .cm-figure{order:0;}
  }
  .cm-figure{margin:0;}
  .cm-photo{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;border-radius:2px;}
  /* A second, supporting photograph. Only Costa Verde runs long enough to
     leave dead space beside its text. The wider ratio keeps it reading as
     support rather than as a repeat of the lead image. */
  .cm-photo-2{aspect-ratio:16/10;margin-top:14px;}
  .cm-cap{font-size:12px;letter-spacing:.2px;color:var(--muted-fg);line-height:1.55;margin:9px 0 0;}
  .cm-plate{aspect-ratio:4/3;border-radius:2px;background:var(--sand);
    display:flex;flex-direction:column;justify-content:flex-end;padding:26px 24px;position:relative;overflow:hidden;}
  .cm-plate:after{content:"";position:absolute;inset:0;
    background:linear-gradient(150deg,rgba(255,255,255,.34),rgba(255,255,255,0) 62%);pointer-events:none;}
  .cm-plate-name{font-family:var(--display);font-size:clamp(22px,3.1vw,31px);line-height:1.16;color:var(--black-sand);position:relative;z-index:1;}
  .cm-plate-note{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--muted-fg);margin-top:12px;position:relative;z-index:1;}
  .cm-body h3{font-family:var(--display);font-weight:400;font-size:clamp(21px,2.7vw,27px);line-height:1.2;margin:0 0 4px;}
  .cm-eyebrow{font-size:11px;letter-spacing:2.2px;text-transform:uppercase;color:var(--muted-fg);margin-bottom:9px;}
  .cm-body p{font-size:14.5px;line-height:1.85;font-weight:300;margin:0 0 12px;}
  .cm-tag{font-family:var(--display);font-size:15px;color:var(--muted-fg);font-style:italic;margin:0 0 14px;}
  /* Jump index above the list. Eleven entries is too many to scroll blind —
     a visitor should be able to see what is covered and go straight to the one
     they came for. scroll-margin-top clears the fixed nav so a jumped-to entry
     does not land underneath it. */
  .cm-index{margin:0 0 42px;}
  .cm-index-lead{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--muted-fg);
    margin:0 0 12px;}
  .cm-index-links{display:flex;flex-wrap:wrap;gap:8px 0;align-items:baseline;}
  .cm-index-links a{font-family:var(--display);font-size:16px;line-height:1.3;color:var(--black-sand);
    text-decoration:none;padding:0 14px;border-left:1px solid rgba(25,25,25,.16);
    transition:color .18s ease;}
  .cm-index-links a:first-child{padding-left:0;border-left:0;}
  .cm-index-links a:hover,.cm-index-links a:focus-visible{color:var(--muted-fg);
    text-decoration:underline;text-underline-offset:3px;}
  .cm-entry{scroll-margin-top:90px;}
  @media(max-width:620px){
    .cm-index-links{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;}
    .cm-index-links a{padding:0;border-left:0;font-size:15px;}
  }

  .cm-facts{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 6px;padding:0;list-style:none;}
  .cm-facts li{font-size:11.5px;letter-spacing:.4px;color:var(--muted-fg);
    border:1px solid rgba(25,25,25,.14);border-radius:2px;padding:5px 10px;}


  /* ---- The occasional-notes sign-up -------------------------------------
     Deliberately not a lead-gen widget. It appears only at the end of the
     guides and Insights posts, where somebody has just read a few thousand
     words and might want the next one. Never on a listing page: a buyer
     looking at a house is doing something else, and interrupting that is how
     a boutique site starts to feel like a portal.

     The tone is an offer, not a gate. Christie's stops you and asks for a
     phone number; this waits until you have got something, then asks for an
     email and lets you ignore it. */
  .notes-signup{margin:56px 0 8px;padding:30px 32px;background:var(--sea-mist);border-radius:2px;}
  .notes-signup h3{font-family:var(--display);font-weight:400;font-size:clamp(19px,2.4vw,23px);line-height:1.25;margin:0 0 8px;}
  .notes-signup p{font-size:14px;line-height:1.75;font-weight:300;color:var(--muted-fg);margin:0 0 16px;max-width:52ch;}
  .notes-form{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-start;}
  .notes-form input[type=email]{flex:1 1 260px;min-width:0;padding:12px 14px;font-family:var(--body);font-size:14px;
    border:1px solid rgba(25,25,25,.18);border-radius:2px;background:#fff;color:var(--black-sand);}
  .notes-form input[type=email]:focus{outline:none;border-color:var(--black-sand);}
  .notes-form button{padding:12px 22px;font-family:var(--body);font-size:12px;letter-spacing:1.6px;text-transform:uppercase;
    background:var(--black-sand);color:#fff;border:none;border-radius:2px;cursor:pointer;transition:opacity .18s ease;}
  .notes-form button:hover{opacity:.85;}
  .notes-form button[disabled]{opacity:.5;cursor:default;}
  .notes-note{font-size:11.5px;color:var(--muted-fg);margin-top:12px;letter-spacing:.2px;}
  .notes-status{font-size:13.5px;margin-top:12px;line-height:1.6;}
  .notes-status.ok{color:#3F6B4F;}
  .notes-status.err{color:#8A4B3A;}

  /* ---- Exit-intent version of the same offer ----------------------------
     Same content, shown once, only on guides, only if they have not already
     signed up or dismissed it. Desktop triggers on the cursor leaving the
     top of the viewport; mobile has no such signal so it waits for real
     scroll depth instead. Dismissal is remembered. */
  .notes-modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:20px;
    background:rgba(25,25,25,.55);opacity:0;pointer-events:none;transition:opacity .28s ease;}
  .notes-modal.is-open{opacity:1;pointer-events:auto;}
  .notes-modal-inner{background:var(--warm-bg);max-width:460px;width:100%;padding:34px 34px 30px;border-radius:2px;position:relative;
    transform:translateY(8px);transition:transform .28s ease;}
  .notes-modal.is-open .notes-modal-inner{transform:none;}
  .notes-modal .notes-signup{margin:0;padding:0;background:none;}
  .notes-close{position:absolute;top:10px;right:12px;width:32px;height:32px;border:none;background:none;cursor:pointer;
    font-size:22px;line-height:1;color:var(--muted-fg);}
  .notes-close:hover{color:var(--black-sand);}
  @media(max-width:520px){
    .notes-signup{padding:24px 20px;}
    .notes-modal-inner{padding:28px 22px 24px;}
  }

  .community-available{font-size:12.5px;color:var(--muted-fg);font-weight:300;margin-top:14px;padding-top:12px;border-top:1px solid rgba(25,25,25,.08);line-height:1.8;}
  .community-available b{color:var(--black-sand);font-weight:500;}
  .community-available a{color:var(--black-sand);text-decoration:none;border-bottom:1px solid rgba(25,25,25,.25);}
  .community-available a:hover{border-bottom-color:#6FA07F;color:#6FA07F;}
  .listing-row{cursor:pointer;}
  .listing-row .listing-img{transition:opacity .2s ease;}
  .listing-row:hover .listing-img{opacity:.88;}
  .listing-row .listing-title{transition:color .2s ease;}
  .listing-row:hover .listing-title{color:#6FA07F;}

  /* ---- PROPERTY DETAIL ---- */
  .property-meta{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:18px;margin-bottom:8px;padding-bottom:24px;border-bottom:1px solid rgba(25,25,25,.1);}
  .property-meta .listing-price{font-size:32px;margin-bottom:0;}
  .property-facts{display:flex;gap:28px;flex-wrap:wrap;margin:24px 0 32px;}
  .property-facts .f{min-width:90px;}
  .property-facts .f .n{font-family:var(--display);font-size:19px;color:var(--black-sand);}
  .property-facts .f .l{font-size:10.5px;letter-spacing:1px;text-transform:uppercase;color:var(--muted-fg);margin-top:3px;}
  .sold-strip{display:flex;gap:24px;overflow-x:auto;padding-bottom:8px;}
  .sold-item{flex:0 0 190px;}
  .sold-item .thumb{height:125px;border-radius:2px;overflow:hidden;margin-bottom:10px;}
  .sold-item .thumb img{width:100%;height:100%;object-fit:cover;}
  .sold-item .t{font-size:12.5px;font-weight:600;line-height:1.35;margin-bottom:3px;}
  .sold-item .l{font-size:11.5px;color:var(--muted-fg);line-height:1.4;}
  .sold-item .s{font-size:11px;color:var(--muted-fg);opacity:.8;margin-top:4px;letter-spacing:.3px;}
  .note{font-size:12px;color:var(--muted-fg);font-style:italic;margin-top:18px;}

  /* ---- ABOUT VALUES ---- */
  .values-row{display:flex;gap:40px;flex-wrap:wrap;margin-top:16px;}
  .value-item{flex:1;min-width:200px;}
  /* .k is a label on most value-items and a real <h3> question in the FAQ
     block on process.html. Weight and margins are pinned here so the heading
     version renders identically to the div version. */
  .value-item .k{font-family:var(--display);font-size:16px;font-weight:300;line-height:1.35;margin:0 0 8px;overflow-wrap:break-word;}
  .value-item .d{font-size:13px;color:var(--muted-fg);font-weight:300;line-height:1.7;}

  /* ---- THE PROCESS ---- */
  .process-steps{display:flex;flex-direction:column;gap:28px;margin-top:24px;max-width:720px;}
  .process-step{display:flex;gap:20px;align-items:flex-start;}
  .process-step .num{flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--black-sand);display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:14px;color:var(--black-sand);}
  .process-step .step-title{font-family:var(--display);font-size:16px;margin-bottom:5px;}
  .process-step .step-desc{font-size:13.5px;color:var(--muted-fg);font-weight:300;line-height:1.75;}
  /* Multi-column rather than a 2-up grid. With grid, every row is as tall as
     its tallest cell, so a short answer sitting beside a long one left a large
     hole beneath it — very visible in the FAQ, where answers vary from two
     lines to twelve. Columns let the items pack against each other instead.
     The inline-block/width pair is what makes break-inside:avoid hold up
     across browsers; without it an item can be split down the middle. */
  .doc-grid{columns:2;column-gap:40px;margin-top:24px;}
  .doc-grid > .value-item{display:inline-block;width:100%;margin:0 0 32px;
    break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid;}
  .doc-grid > .value-item:last-child{margin-bottom:0;}
  @media(max-width:640px){.doc-grid{columns:1;}}

  /* ---- CONSERVATION ---- */
  .post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:8px;}
  @media(max-width:900px){.post-grid{grid-template-columns:1fr 1fr;}}
  @media(max-width:640px){.post-grid{grid-template-columns:1fr;}}
  .post-card{display:block;text-decoration:none;color:inherit;}
  .post-card .post-bar{height:3px;width:44px;background:#6FA07F;margin-bottom:20px;}
  .post-card .post-tag{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--muted-fg);margin-bottom:10px;}
  .post-card .post-title{font-family:var(--display);font-size:19px;margin-bottom:10px;line-height:1.3;}
  .post-card .post-excerpt{font-size:13.5px;color:var(--muted-fg);font-weight:300;line-height:1.75;margin-bottom:16px;}
  .post-card .post-read{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;border-bottom:1px solid currentColor;padding-bottom:3px;}

  /* The nav is sticky rather than fixed, so it already occupies flow space —
     the hero's top padding sits entirely on top of it. 100px was doubling up. */
  .post-hero{padding:52px 32px 26px;background:var(--warm-bg);}
  /* Hero and body section share the same background, so their stacked padding
     read as one void rather than as a deliberate break. Photo heroes
     (.page-hero) are untouched: there the color change does the separating. */
  .post-hero + .section{padding-top:22px;}
  .post-hero-inner{max-width:760px;margin:0 auto;}
  .post-hero .post-tag{display:inline-block;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:#fff;background:#6FA07F;padding:6px 14px;border-radius:100px;margin-bottom:20px;}
  .post-hero h1{font-family:var(--display);font-size:clamp(28px,3.6vw,42px);line-height:1.2;margin-bottom:16px;}
  /* The standfirst was set identically to body copy — same size, weight and
     color — so nothing but whitespace separated the hero from the article.
     Sizing it up lets the gap close without the two blocks running together. */
  .post-hero .post-sub{font-size:17px;color:var(--muted-fg);font-weight:300;line-height:1.7;max-width:62ch;}

  .post-body{max-width:720px;margin:0 auto;}
  .post-body p{font-size:14.5px;color:var(--muted-fg);font-weight:300;line-height:1.9;margin-bottom:22px;}
  .post-body h2,.post-body h3{font-family:var(--display);font-size:19px;margin:38px 0 14px;color:var(--black-sand);}
  .post-facts{display:flex;gap:30px;flex-wrap:wrap;margin:32px 0;padding:22px 0;border-top:1px solid rgba(25,25,25,.1);border-bottom:1px solid rgba(25,25,25,.1);}
  .post-facts .f{min-width:110px;}
  .post-facts .f .n{font-family:var(--display);font-size:21px;color:var(--black-sand);}
  .post-facts .f .l{font-size:10.5px;letter-spacing:1px;text-transform:uppercase;color:var(--muted-fg);margin-top:3px;}
  .post-tieback{border:1px solid rgba(25,25,25,.12);border-left:3px solid #6FA07F;padding:24px 28px;margin:40px 0;background:var(--warm-bg);}
  .post-tieback .lbl{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--muted-fg);margin-bottom:10px;}
  .post-tieback p{margin-bottom:0;color:var(--black-sand);font-weight:400;}
  /* Inline links inside a tieback need a visible affordance — the global
     a{text-decoration:none} rule would otherwise render them invisible. */
  .post-tieback a{border-bottom:1px solid rgba(25,25,25,.38);}
  .post-tieback a:hover{border-bottom-color:var(--black-sand);}
  .post-nav{display:flex;flex-wrap:wrap;gap:16px 24px;justify-content:space-between;align-items:center;
    margin-top:56px;padding-top:28px;border-top:1px solid rgba(25,25,25,.1);}

  /* ---- CONTACT ---- */
  .contact-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:64px;align-items:start;}
  .contact-item{margin-bottom:22px;}
  .contact-item .l{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted-fg);margin-bottom:4px;}
  .contact-item .v{font-size:15px;}
  .form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px;}
  .field label{display:block;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:7px;font-weight:600;}
  .field input,.field textarea{width:100%;padding:12px 14px;border:1px solid rgba(25,25,25,.15);background:#fff;font-family:var(--body);font-size:14px;color:var(--black-sand);outline:none;}
  .field{margin-bottom:18px;}

  /* ---- FOOTER ---- */
  .footer{background:var(--black-sand);color:var(--sea-mist);padding:60px 32px 28px;}
  .footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1.1fr;gap:48px;max-width:1240px;margin:0 auto 40px;}
  @media(max-width:900px){.footer-grid{grid-template-columns:1fr 1fr;gap:36px;}}
  .footer-logo{font-family:var(--display);font-size:15px;letter-spacing:3px;color:var(--sand);margin-bottom:14px;}
  .footer-tag{font-size:13px;color:rgba(233,238,236,.6);font-weight:300;line-height:1.7;}
  .footer-h{font-family:var(--display);color:var(--sand);font-size:12px;letter-spacing:2px;margin-bottom:16px;}
  .footer-line{font-size:13px;color:rgba(233,238,236,.68);margin-bottom:10px;font-weight:300;}
  .footer-line a{color:inherit;text-decoration:none;transition:color .18s ease;}
  .footer-line a:hover{color:var(--sand);}
  
/* Brokerage disclaimer — required franchise language plus accuracy notice. */
.footer-legal{max-width:1240px;margin:16px auto 0;font-size:11px;line-height:1.75;color:rgba(233,238,236,.30);letter-spacing:.2px;font-weight:300;}
/* Two notices now: the Coldwell Banker corporate block issued by the CMO, then
   Michael's own licensing line. Kept as separate paragraphs so they do not read
   as one run-on wall — different authors, different ground covered. */
.footer-legal p{margin:0 0 9px;}
.footer-legal p:last-child{margin-bottom:0;}
.footer-note{font-size:11px;color:rgba(233,238,236,.38);letter-spacing:.5px;}
/* The US line is also Michael's WhatsApp — worth saying, because overseas
   buyers default to WhatsApp and will not guess. Underlined because the
   global a{text-decoration:none} would otherwise hide it. */
.footer-note .wa-link{border-bottom:1px solid rgba(233,238,236,.32);}
.footer-note .wa-link:hover{color:rgba(233,238,236,.85);border-bottom-color:rgba(233,238,236,.7);}
.wa-inline{display:block;margin-top:5px;font-size:11px;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--muted-fg);border-bottom:1px solid rgba(25,25,25,.25);width:fit-content;padding-bottom:2px;}
.wa-inline:hover{color:var(--black-sand);border-bottom-color:var(--black-sand);}
  .footer-bottom{max-width:1240px;margin:28px auto 0;padding-top:22px;border-top:1px solid rgba(211,201,182,.14);font-size:12px;color:rgba(233,238,236,.4);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;}
  .footer-social{display:flex;gap:10px;margin-top:18px;}
  .footer-social a{width:34px;height:34px;border-radius:50%;background:rgba(233,238,236,.08);display:flex;align-items:center;justify-content:center;transition:background .2s ease,transform .2s ease;}
  .footer-social a:hover{background:rgba(211,201,182,.22);transform:translateY(-2px);}
  .footer-social svg{width:15px;height:15px;fill:var(--sand);}

  /* ---- PROPERTY VIDEO ---- */
  .property-video{margin-top:32px;}
  .property-video video{width:100%;max-width:820px;display:block;border-radius:2px;background:#000;}
  .property-video-reel video{max-width:320px;}
.reel-link{margin-top:14px;}
.reel-link a{border-bottom-color:rgba(25,25,25,.35);}
.reel-link a:hover{border-bottom-color:currentColor;}

  .video-note{font-size:12.5px;color:var(--muted-fg);font-weight:300;margin-top:10px;}
  .video-embed{position:relative;width:100%;max-width:820px;aspect-ratio:16/9;overflow:hidden;background:#000;border-radius:2px;}
/* Secondary footage (camera traps etc) sits smaller than a property tour. */
.property-video.secondary .video-embed{max-width:620px;}
.property-video.secondary .video-note{max-width:620px;}
  .video-embed iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0;}
  /* A Short is 9:16, so it needs its own frame — the 16/9 default would
     letterbox it into a thin strip with black either side. Capped narrow so
     it reads as a phone-shaped clip beside the full walkthrough above it.
     YouTube only generates 16:9 thumbnails for Shorts, so the poster is
     cropped to center rather than fitted. */
  .video-vertical{aspect-ratio:9/16;max-width:320px;}
  .video-vertical img{object-fit:cover;object-position:center;}
  .video-facade{cursor:pointer;}
  .video-facade img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;display:block;}
  .video-facade .video-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:68px;height:48px;border-radius:10px;background:rgba(18,18,18,.62);transition:background .18s ease;}
  .video-facade .video-play:after{content:"";position:absolute;top:50%;left:52%;transform:translate(-50%,-50%);border-style:solid;border-width:11px 0 11px 18px;border-color:transparent transparent transparent #fff;}
  .video-facade:hover .video-play,.video-facade:focus-visible .video-play{background:rgba(18,18,18,.85);}
  .video-facade:focus-visible{outline:2px solid var(--sand);outline-offset:3px;}

  /* ---- PROPERTY GALLERY ---- */
  .property-gallery{margin-top:40px;}
  
/* Gallery lightbox */
.gallery-grid img{cursor:zoom-in;transition:opacity .2s ease;}
.gallery-grid img:hover{opacity:.9;}
.gallery-grid img:focus-visible{outline:2px solid var(--black-sand);outline-offset:3px;}

.lightbox{position:fixed;inset:0;z-index:2000;display:none;align-items:center;justify-content:center;
  background:rgba(16,14,12,.94);padding:28px;}
.lightbox.is-open{display:flex;}
.lightbox-stage{margin:0;max-width:100%;max-height:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;}
.lightbox-stage img{max-width:min(1500px,92vw);max-height:82vh;width:auto;height:auto;
  object-fit:contain;border-radius:2px;box-shadow:0 20px 60px rgba(0,0,0,.5);}
.lightbox-stage figcaption{font-size:12.5px;line-height:1.6;color:rgba(233,238,236,.62);
  text-align:center;max-width:46em;font-weight:300;}
.lightbox-close,.lightbox-prev,.lightbox-next{position:absolute;background:rgba(255,255,255,.07);
  border:none;color:rgba(233,238,236,.85);cursor:pointer;border-radius:100px;
  display:flex;align-items:center;justify-content:center;transition:background .2s ease;}
.lightbox-close:hover,.lightbox-prev:hover,.lightbox-next:hover{background:rgba(255,255,255,.16);}
.lightbox-close{top:20px;right:22px;width:42px;height:42px;font-size:26px;line-height:1;}
.lightbox-prev,.lightbox-next{top:50%;transform:translateY(-50%);width:52px;height:52px;font-size:30px;line-height:1;}
.lightbox-prev{left:20px;}
.lightbox-next{right:20px;}
.lightbox-count{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);
  font-size:11px;letter-spacing:2px;color:rgba(233,238,236,.5);}
@media(max-width:720px){
  .lightbox{padding:12px;}
  .lightbox-stage img{max-height:74vh;max-width:96vw;}
  .lightbox-prev,.lightbox-next{width:44px;height:44px;font-size:26px;}
  .lightbox-prev{left:8px;} .lightbox-next{right:8px;}
  .lightbox-stage figcaption{font-size:12px;padding:0 6px;}
}
@media(prefers-reduced-motion:reduce){
  .gallery-grid img,.lightbox-close,.lightbox-prev,.lightbox-next{transition:none;}
}
/* Three across, but laid out with flex rather than grid on purpose.
   A gallery whose photo count isn't a multiple of three leaves one or two
   images stranded on the last row, hard against the left edge, which reads
   as a mistake. Flex-wrap plus justify-content:center pulls that short row
   into the middle so it looks intentional — and it works for any count,
   so no listing has to lose a good photo to satisfy the arithmetic.
   A full row fills the width exactly, so complete rows are unaffected. */
/* Any element carrying the hidden attribute must actually stay hidden.
   Without this, a rule like .gallery-grid{display:flex} quietly overrides
   the browser's own hidden styling — which is why the Map tab used to
   leave the photo grid on screen. */
[hidden]{display:none !important;}

/* Three across, laid out with flex rather than grid on purpose.
   A gallery whose count isn't a multiple of three would otherwise strand
   one or two photos on the last row, which reads as a mistake. Instead of
   deleting good photos to fix the arithmetic, the short last row simply
   widens to fill: one leftover becomes a full-width closing shot, two
   become a pair of halves. Works at any count, nothing is lost, and the
   ending looks deliberate. */
.gallery-grid{display:flex;flex-wrap:wrap;gap:10px;}
  .gallery-grid img{width:calc((100% - 20px)/3);height:190px;object-fit:cover;
    display:block;border-radius:2px;flex:0 0 auto;}

  /* one photo left over — it starts a row and ends the gallery */
  .gallery-grid img:last-child:nth-child(3n+1){width:100%;height:300px;}
  /* two left over — split the row between them */
  .gallery-grid img:nth-last-child(2):nth-child(3n+1),
  .gallery-grid img:last-child:nth-child(3n+2){width:calc((100% - 10px)/2);height:240px;}

  @media(max-width:760px){
    /* two across on a phone, so the arithmetic changes: reset the
       three-column leftovers first, then handle an odd final photo. */
    .gallery-grid img,
    .gallery-grid img:last-child:nth-child(3n+1),
    .gallery-grid img:nth-last-child(2):nth-child(3n+1),
    .gallery-grid img:last-child:nth-child(3n+2){
      width:calc((100% - 10px)/2);height:150px;}
    .gallery-grid img:last-child:nth-child(2n+1){width:100%;height:220px;}
  }

  /* ---- REGIONS / MAP ---- */
  .region-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:start;}
  

/* Costa Rica provinces — boundaries from the Instituto Geografico Nacional.
   Drawn into the page: no map service, no API key, nothing to break. */
.cr-map{width:100%;height:auto;display:block;border-radius:2px;}
.cr-sea{fill:#E4EBED;}

/* Type and markers are sized in SVG user units, so a viewBox tween would blow
   them up in proportion to the zoom — at the Southern Pacific crop the labels
   came out three times too big and collided. --cr-k is set by the script to
   viewBoxWidth/820, which cancels the zoom out again and keeps every label and
   marker the same size on screen throughout the move. */
.cr-map{--cr-k:1;}
.cr-water text,.cr-gateway text,.cr-detail text{font-size:calc(12.5px * var(--cr-k));}
.cr-neighbor-label text{font-size:calc(13px * var(--cr-k));}
.cr-detail circle{r:calc(3px * var(--cr-k));}
.cr-gateway path{transform-box:fill-box;transform-origin:center;transform:scale(var(--cr-k));}

/* Opening move. While the map is still flying down from the whole country to
   the Southern Pacific, the areas, town markers and key are held back — the
   country reads as context first, the markets arrive once you are there.
   Opacity rather than display so nothing shifts when they appear. */
.cr-area,.cr-gateway,.cr-detail,.cr-key,.cr-caption{transition:opacity .6s ease .15s;}
.map-wrap.is-intro .cr-area,
.map-wrap.is-intro .cr-gateway,
.map-wrap.is-intro .cr-detail,
.map-wrap.is-intro .cr-key,
.map-wrap.is-intro .cr-caption{opacity:0;}
.map-wrap.is-intro .cr-area{pointer-events:none;}
@media(prefers-reduced-motion:reduce){
  .cr-area,.cr-gateway,.cr-detail,.cr-key,.cr-caption{transition:none;}
}

/* Neighboring countries — context only, not interactive. A surprising number
   of buyers think Costa Rica is an island, or confuse it with Puerto Rico. */
.cr-neighbor path{fill:#EAE7E0;stroke:#C6C1B8;stroke-width:1;pointer-events:none;}

.cr-water text{font-family:var(--body);font-size:12.5px;fill:#9DB0B8;letter-spacing:3px;text-anchor:middle;pointer-events:none;font-weight:400;}
.cr-neighbor-label text{font-family:var(--body);font-size:13px;fill:#A9A399;
  letter-spacing:2.5px;text-anchor:middle;pointer-events:none;font-weight:400;}
/* Provinces are context only now — they draw the country, they don't respond.
   The clickable layer is the five areas below, because "Puntarenas" is one
   shape covering four markets that have nothing to do with each other. */
.cr-prov{fill:#F7F4ED;stroke:#8A857C;stroke-width:.9;stroke-linejoin:round;pointer-events:none;}

/* The five areas, all in one quiet tone. Color-coding them was tried twice —
   five opacities of one green (indistinguishable) and then five separate hues
   (legible, but it turned a restrained map into an infographic). One tone says
   "these are the five" and lets selection do the talking, which is the only
   moment a visitor is actually asking about one area rather than scanning all
   five. Seaward edges come from the real coastline via clipPath; only the
   inland divisions are drawn by hand. */
/* The areas are never shaded — not at rest, not on hover, not when selected.
   They survive only as invisible hit regions: picking one still reveals that
   area's towns and swaps the caption underneath, which is the part that
   actually tells a visitor something. fill:transparent rather than fill:none,
   because "none" is unpainted and the shape would stop catching the pointer.
   Selection feedback lives on the key label, which goes green and bolds. */
/* Kept as geometry only. With no fill and every town already labeled there is
   nothing for a hover to disclose, and a cursor that changes over a shape that
   never responds just reads as broken. The five areas are navigable as real
   sections further down the page. */
.cr-area{fill:none;stroke:none;pointer-events:none;}

/* The hover lift (a small scale plus drop-shadow) was removed along with the
   fills — a shadow cast by a transparent shape draws nothing, so it was only
   costing repaints. */

/* Key beneath the map. Doubles as the controls — on a phone there is no
   hover, and the area names live in <title> where nobody would find them. */
.cr-key{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 16px;}
.cr-key-btn{display:flex;align-items:center;gap:8px;background:none;border:0;padding:3px 0;
  font-family:var(--body);font-size:12.5px;font-weight:300;color:var(--muted-fg);
  cursor:pointer;text-align:left;transition:color .2s ease;}
.cr-key-btn:hover,.cr-key-btn:focus-visible{color:var(--black-sand);}
.cr-key-btn.is-active{color:#4E7A5D;font-weight:600;}
/* No swatches — the areas share one tone now, so a color chip would be telling
   the reader nothing. Selection reads on the label itself (see .is-active
   above): it goes green and gains weight. */


/* Gateway airport is always shown; everything else appears on selection. */
.cr-gateway path{fill:#4E7A5D;pointer-events:none;}
.cr-gateway text{font-family:var(--body);font-size:12.5px;fill:#4E7A5D;font-weight:600;pointer-events:none;}
/* Every town is drawn all the time. The map's job here is orientation — a
   visitor who has never been to Costa Rica needs to see how Quepos, Dominical,
   Uvita, Ojochal, Golfito and Puerto Jiménez sit relative to each other. Hiding
   them behind a hover meant the map said nothing until you guessed to touch it. */
.cr-mark{pointer-events:none;}

/* Sized off --cr-k like the other labels, otherwise the zoom scales these up
   with the geometry and the town names collide. The halo stroke has to scale
   with them or it swamps the letterforms at the tight end. */
.cr-mark text{font-family:var(--body);font-size:calc(13.5px * var(--cr-k,1));font-weight:600;
  paint-order:stroke fill;stroke:var(--warm-bg);
  stroke-width:calc(2.6px * var(--cr-k,1));stroke-linejoin:round;}
.cr-mark path,.cr-mark circle{transform-box:fill-box;transform-origin:center;
  transform:scale(var(--cr-k,1));}
.cr-mark.air path{fill:#4E7A5D;} .cr-mark.air text{fill:#4E7A5D;font-weight:600;}
.cr-mark.sea .anch{fill:none;stroke:#3F6E8C;stroke-width:1.5;stroke-linecap:round;}
.cr-mark.sea text{fill:#3F6E8C;}
.cr-mark.town circle{fill:var(--black-sand);} .cr-mark.town text{fill:var(--black-sand);}
@media(prefers-reduced-motion:reduce){ .cr-mark{transition:none;} }
/* .cr-towns was an earlier layer that no longer exists in the markup — the
   town labels live in .cr-mark inside .cr-detail. Rules removed rather than
   left orphaned, which is how the neighbor-country fill went unnoticed. */
.cr-caption{font-size:11.5px;line-height:1.6;color:var(--muted-fg);font-weight:300;margin-top:12px;}
.region-tier-title.is-highlit{color:#4E7A5D;}
@media(prefers-reduced-motion:reduce){ .cr-prov{transition:none;} }
.map-wrap{position:sticky;top:110px;background:#fff;border:1px solid rgba(25,25,25,.06);border-radius:2px;padding:20px 22px;}
  #google-map{width:100%;height:460px;border-radius:2px;background:#f3f1ec;}
  .gmap-water-label{color:#8a7c6d;font-size:11px;letter-spacing:2px;font-style:italic;font-family:Georgia,serif;text-transform:uppercase;white-space:nowrap;}
  .gmap-water-label-sm{color:#8a7c6d;font-size:8px;letter-spacing:.8px;font-style:italic;font-family:Georgia,serif;text-transform:uppercase;white-space:nowrap;}
  .map-legend-row{display:flex;gap:16px;margin-top:12px;font-size:9.5px;color:var(--muted-fg);flex-wrap:wrap;}
  .map-legend-row span{display:inline-flex;align-items:center;gap:5px;}
  .map-legend-row .dot{width:7px;height:7px;border-radius:50%;display:inline-block;}
  .map-legend-row .dot.town{background:var(--black-sand);}
  .map-legend-row .dot.area{background:var(--warm-bg);border:1.1px solid var(--black-sand);}
  .map-legend-row .dot.airport{width:13px;height:13px;border-radius:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%236B5D52' d='M21 16v-2l-8-5V3.5c0-.83-.67-1.5-1.5-1.5S10 2.67 10 3.5V9l-8 5v2l8-2.5V19l-2.5 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5l8 2.5z'/%3E%3C/svg%3E");background-size:contain;background-repeat:no-repeat;background-position:center;}
  .map-legend-row .dot.marina{width:11px;height:14px;border-radius:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-5 -10 10 20'%3E%3Cpath fill='%237FA8C9' d='M -1.8,-8.8 A 1.8,1.8 0 1 0 1.8,-8.8 A 1.8,1.8 0 1 0 -1.8,-8.8 Z M -0.8,-7 L 0.8,-7 L 0.8,5 L -0.8,5 Z M -4,-2.8 L 4,-2.8 L 4,-1.2 L -4,-1.2 Z M -0.8,3 Q -0.8,7 -4.5,6.5 Q -3,3.5 -0.8,3 Z M 0.8,3 Q 0.8,7 4.5,6.5 Q 3,3.5 0.8,3 Z'/%3E%3C/svg%3E");background-size:contain;background-repeat:no-repeat;background-position:center;}
  .map-legend-row .dot.park{border-radius:1px;background:#8FBF9E;border:1px solid var(--black-sand);}
  .map-legend-row .dot.waterfall{border-radius:50% 50% 50% 0;background:#9AC0CE;border:1px solid var(--black-sand);transform:rotate(45deg);}
  .map-caption{font-size:11px;color:var(--muted-fg);margin-top:10px;letter-spacing:.3px;}
  .getting-here{background:var(--sea-mist);border-radius:4px;padding:16px 18px;margin-top:14px;font-size:12.5px;color:var(--muted-fg);line-height:1.7;}
  .getting-here b{color:var(--black-sand);}

  
/* Regions page has three levels: the section, the four regions inside it,
   and the towns inside those. Each needs to read clearly below the last. */
.region-section-title{font-family:var(--display);font-size:clamp(30px,3.4vw,40px);line-height:1.18;color:var(--black-sand);margin:0 0 14px;font-weight:400;letter-spacing:.4px;}
.region-tier-title{font-family:var(--display);font-size:22px;line-height:1.25;letter-spacing:2.5px;color:var(--black-sand);margin:0 0 8px;text-transform:uppercase;padding-top:30px;margin-top:34px;border-top:1px solid rgba(25,25,25,.13);font-weight:400;}
.region-tier-title.first{margin-top:0;padding-top:0;border-top:none;}
  .region-tier-title:first-child{margin-top:0;}
  .region-accordion{border:none;margin-bottom:8px;}
  .region-accordion summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted-fg);padding:12px 0;border-bottom:1px solid rgba(25,25,25,.1);}
  .region-accordion summary::-webkit-details-marker{display:none;}
  .region-accordion summary::after{content:'+';margin-left:auto;font-size:15px;font-weight:400;color:var(--black-sand);transition:transform .2s ease;}
  .region-accordion[open] summary::after{transform:rotate(45deg);}
  .region-accordion[open] summary{border-bottom-color:rgba(25,25,25,.08);}
  .region-accordion-count{color:var(--muted-fg);}
  .region-accordion-body{padding-top:4px;}
  .region-accordion-body .region-card:first-child{padding-top:16px;}
  /* Informational cards inside an accordion, not controls — the pointer cursor
   and the active highlight were left over from when clicking one panned a
   Google Map that no longer exists. */
.region-card{padding:20px 0;border-bottom:1px solid rgba(25,25,25,.08);scroll-margin-top:130px;}
  
  .region-card-head{display:flex;align-items:center;gap:10px;margin-bottom:6px;}
  .region-name{font-family:var(--display);font-size:19px;}
  .region-tag{font-size:9.5px;letter-spacing:1px;text-transform:uppercase;padding:3px 9px;border-radius:100px;}
  .region-tag.town{background:var(--black-sand);color:#fff;}
  .region-tag.area{background:var(--sand);color:var(--black-sand);}
  .region-desc{font-size:13.5px;color:var(--muted-fg);font-weight:300;line-height:1.75;}
  .name-note{border-left:2px solid var(--sand);padding:2px 0 2px 16px;margin:0 0 20px;}
  .name-note p{font-size:13.5px;color:var(--muted-fg);font-weight:300;line-height:1.75;margin:0 0 10px;}
  .name-note p:last-child{margin-bottom:0;}

  .also-serving-list{display:grid;grid-template-columns:1fr 1fr;gap:10px 40px;font-size:13.5px;color:var(--muted-fg);}
  .also-serving-list b{color:var(--black-sand);font-weight:600;}
  .also-serving-list span{cursor:pointer;padding:4px 6px;margin:-4px -6px;border-radius:2px;transition:background .3s;scroll-margin-top:130px;}
  .also-serving-list span.active{background:rgba(211,201,182,.18);}

  @media(max-width:860px){
    .spotlight-grid,.split,.contact-grid,.listing-row{grid-template-columns:1fr;}
    .feature-grid{grid-template-columns:1fr;}
    .footer-grid{grid-template-columns:1fr;gap:34px;}
    .nav-links{display:none;}
    .region-layout{grid-template-columns:1fr;}
    .map-wrap{position:static;}
    .also-serving-list{grid-template-columns:1fr;}
  }

  /* Opening statement on the Properties page. Sits above the filter and
     explains why the list is short on purpose — without it, 35 hand-picked
     listings can read as thin inventory rather than as a curated set. */
  .listings-intro{max-width:none;margin:0 0 40px;}
  .listings-intro .intro-lede{font-family:var(--display);font-size:clamp(20px,2.2vw,26px);
    line-height:1.35;color:var(--black-sand);margin:0 0 22px;text-wrap:balance;}
  /* Runs the full container width so it aligns with the listings grid below and
     reads as two short paragraphs rather than a tall narrow column. The nudge up
     in size and line-height keeps a long line comfortable to read. */
  .listings-intro p{font-size:15.5px;line-height:1.85;color:var(--muted-fg);
    font-weight:300;margin:0 0 15px;text-wrap:pretty;}
  .listings-intro p:last-child{margin-bottom:0;}

  /* Properties filter. The earlier version of this referenced --line and
     --ink, neither of which exists on this site, so an active pill rendered
     as white text on nothing. Uses the real palette now. */
  .filter-bar{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 34px;}
  .filter-bar[hidden]{display:none;}
  .filter-pill{appearance:none;background:none;border:1px solid rgba(25,25,25,.18);
    color:var(--muted-fg);font-family:var(--body);font-size:11px;letter-spacing:1.2px;
    text-transform:uppercase;padding:8px 16px;border-radius:100px;cursor:pointer;
    transition:background .18s ease,border-color .18s ease,color .18s ease;}
  .filter-pill:hover{border-color:var(--black-sand);color:var(--black-sand);}
  .filter-pill.active{background:var(--black-sand);border-color:var(--black-sand);color:#fff;}
  .filter-pill .filter-count{opacity:.55;margin-left:6px;letter-spacing:1px;}
  @media(prefers-reduced-motion:reduce){.filter-pill{transition:none;}}

  .related-listings{margin-top:44px;padding-top:30px;border-top:1px solid rgba(25,25,25,.1);}
  .rl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:14px;}
  @media(max-width:640px){.rl-grid{grid-template-columns:1fr;}}
  /* --line and --ink were never defined on this site, so these borders
     silently did not render at all. Using the real palette. */
  .rl-grid a{display:block;padding:14px 16px;border:1px solid rgba(25,25,25,.14);border-radius:2px;transition:border-color .18s ease;}
  .rl-grid a:hover{border-color:var(--black-sand);}
  .rl-name{display:block;font-family:var(--display);font-size:15px;line-height:1.35;margin-bottom:5px;}
  .rl-meta{display:block;font-size:11.5px;color:var(--muted-fg);letter-spacing:.3px;}

  
/* Newsletter opt-in on the contact form. Unticked by default — consent has
   to be given, not assumed, and a good share of these buyers are European. */
.optin{display:flex;align-items:flex-start;gap:11px;margin:6px 0 22px;cursor:pointer;}
.optin input{margin-top:3px;width:16px;height:16px;flex-shrink:0;accent-color:var(--black-sand);cursor:pointer;}
.optin span{font-size:12.5px;line-height:1.65;color:var(--muted-fg);font-weight:300;}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;}
  .form-status{font-size:13px;line-height:1.6;margin-top:14px;min-height:1px;}
  .form-status.ok{color:#2f6f4f;}
  .form-status.err{color:#8a3b2f;}
  button[type="submit"][disabled]{opacity:.6;cursor:default;}

  .field-note{font-size:10px;letter-spacing:.5px;color:var(--muted-fg);text-transform:none;opacity:.75;margin-left:6px;}

  .brochure{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;
    margin-top:44px;padding:28px 30px;border:1px solid rgba(25,25,25,.14);border-radius:2px;background:#FFFDFA;}
  .brochure-copy{flex:1 1 320px;}
  .brochure-title{font-family:var(--display);font-size:20px;line-height:1.3;margin:2px 0 8px;font-weight:400;}
  .brochure-copy p{font-size:13.5px;color:var(--muted-fg);font-weight:300;line-height:1.75;margin:0;max-width:46em;}
  .brochure-btn{display:inline-flex;flex-direction:column;align-items:center;gap:4px;
    background:var(--black-sand);color:#fff;padding:15px 26px;border-radius:2px;
    font-size:11.5px;letter-spacing:1.6px;text-transform:uppercase;white-space:nowrap;
    transition:opacity .18s ease;}
  .brochure-btn:hover{opacity:.86;}
  .brochure-meta{font-size:9.5px;letter-spacing:.8px;opacity:.62;text-transform:none;}
  @media(max-width:640px){.brochure{flex-direction:column;align-items:flex-start;}
    .brochure-btn{width:100%;}}

  /* Casa Ladera bird log — a slow drift of species names. Deliberately quiet:
     small, letterspaced, muted, and it stops entirely if the visitor has asked
     the system to reduce motion. */
  .birdlog{margin-top:46px;padding-top:32px;border-top:1px solid rgba(25,25,25,.1);}
  .birdlog-lead{font-size:13.5px;color:var(--muted-fg);font-weight:300;line-height:1.8;max-width:52em;margin:0 0 22px;}
  /* No width cap — this line is short enough to sit on one line at any normal
     window size, and capping it at 44em forced an awkward two-line break. */
  .birdlog-note{font-size:12.5px;color:var(--muted-fg);font-weight:300;line-height:1.7;margin:18px 0 0;font-style:italic;opacity:.85;}
  .birdlog-track{position:relative;overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
            mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
  .birdlog-row{display:flex;width:max-content;white-space:nowrap;}
  .birdlog-row span{font-size:11.5px;letter-spacing:1.6px;text-transform:uppercase;
    color:var(--muted-fg);padding:7px 0;margin-right:34px;}
  .birdlog-row span::after{content:"·";margin-left:34px;opacity:.4;}
  .birdlog-row.a{animation:birddrift-l 86s linear infinite;}
  .birdlog-row.b{animation:birddrift-r 104s linear infinite;}
  .birdlog-track:hover .birdlog-row{animation-play-state:paused;}
  @keyframes birddrift-l{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  @keyframes birddrift-r{from{transform:translateX(-50%)}to{transform:translateX(0)}}
  @media(prefers-reduced-motion:reduce){
    .birdlog-row{animation:none;flex-wrap:wrap;width:auto;white-space:normal;}
    .birdlog-track{-webkit-mask-image:none;mask-image:none;}
  }

  /* ---- LISTING LOCATION MAP ----
     Sits behind a tab on the gallery so it adds no page height. Satellite
     only — a road map of a jungle ridge shows nothing. One pin, the property
     being viewed; other listings never appear here. */
  .gallery-tabs{display:flex;gap:26px;align-items:baseline;margin:0 0 18px;}
  .gallery-tabs button{background:none;border:0;padding:0 0 5px;cursor:pointer;
    font-family:var(--body);font-size:11px;letter-spacing:4px;text-transform:uppercase;
    color:var(--muted-fg);border-bottom:1px solid transparent;transition:color .18s ease,border-color .18s ease;}
  .gallery-tabs button:hover{color:var(--black-sand);}
  .gallery-tabs button.is-active{color:var(--black-sand);border-bottom-color:var(--black-sand);}

  /* Listing locator — a still image drawn at build time, not a live map.
     Nothing to drag, nothing to load from a tile service, and it can only
     ever contain what we chose to draw on it. */
  .property-locator img{display:block;width:100%;max-width:460px;height:auto;
    border-radius:2px;background:#DCE6E8;}
  .locator-note{font-size:12px;color:var(--muted-fg);font-weight:300;
    margin:10px 0 0;max-width:460px;line-height:1.6;}
  .locator-note a{color:var(--black-sand);text-decoration:underline;
    text-underline-offset:2px;white-space:nowrap;}

  /* ---- Guides hub -------------------------------------------------------
     Three long guides, each with the questions it answers listed beneath so
     a reader can jump straight to the one they came for. The question list
     runs in two columns on desktop and collapses to one on narrow screens;
     break-inside keeps a question from splitting across the column gap. */
  .guide-entry{border-top:1px solid rgba(25,25,25,.12);padding:36px 0 34px;}
  .guide-entry:first-of-type{border-top:none;padding-top:6px;}
  .guide-entry .guide-eyebrow{font-size:10.5px;letter-spacing:2px;text-transform:uppercase;
    color:var(--muted-fg);margin:0 0 10px;}
  .guide-entry h3{font-family:var(--display);font-size:clamp(21px,2.3vw,27px);
    line-height:1.25;margin:0 0 10px;}
  .guide-entry h3 a{color:var(--black-sand);text-decoration:none;}
  .guide-entry h3 a:hover{text-decoration:underline;text-underline-offset:3px;}
  .guide-entry .guide-sub{font-size:14.5px;font-weight:300;line-height:1.8;
    color:var(--muted-fg);margin:0;max-width:62ch;}
  .guide-qs{list-style:none;padding:0;margin:20px 0 0;columns:2;column-gap:40px;}
  .guide-qs li{margin:0 0 10px;break-inside:avoid;font-size:13.5px;line-height:1.5;}
  .guide-qs a{color:var(--muted-fg);text-decoration:none;
    border-bottom:1px solid rgba(25,25,25,.16);padding-bottom:1px;}
  .guide-qs a:hover{color:var(--black-sand);border-bottom-color:var(--black-sand);}
  @media(max-width:760px){.guide-qs{columns:1;}}

  /* ---- On-page contents (long guides only) ------------------------------
     A quiet jump list at the top of the three long guides. Hairline rules
     rather than a filled box, so it reads as part of the article instead of
     a widget stuck on top of it. Sub-items sit under their parent section
     and are dimmed a step further. No JavaScript — plain anchors. */
  .guide-toc{margin:34px 0 40px;padding:20px 0 18px;
    border-top:1px solid rgba(25,25,25,.14);border-bottom:1px solid rgba(25,25,25,.14);}
  .guide-toc-lbl{font-size:10.5px;letter-spacing:2px;text-transform:uppercase;
    color:var(--muted-fg);margin:0 0 14px;}
  .guide-toc ol,.guide-toc ul{list-style:none;padding:0;margin:0;}
  .guide-toc > ol > li{margin:0 0 9px;}
  .guide-toc a{color:var(--black-sand);text-decoration:none;font-size:14px;
    line-height:1.5;border-bottom:1px solid transparent;}
  .guide-toc a:hover{border-bottom-color:rgba(25,25,25,.45);}
  .guide-toc ul{margin:8px 0 14px 18px;padding-left:14px;
    border-left:1px solid rgba(25,25,25,.12);}
  .guide-toc ul li{margin:0 0 7px;}
  .guide-toc ul a{font-size:13px;font-weight:300;color:var(--muted-fg);}
  .guide-toc ul a:hover{color:var(--black-sand);}
  /* Offset so a jumped-to heading does not sit under the fixed nav bar. */
  .post-body h2[id],.post-body h3[id],.section-title[id],.container h3[id]{scroll-margin-top:96px;}

  /* ---- Map pop-out ------------------------------------------------------
     The map areas are already click- and hover-driven, so the enlarge control
     is a separate button rather than a click on the map itself — otherwise it
     would steal the interaction the areas depend on. Popped out it is a larger
     panel, not a full-screen takeover: the SVG is vector, so it stays sharp. */
  /* .map-wrap is already position:sticky on desktop, which gives the button its
     containing block. Below 860px it is switched to static to stop it sticking —
     relative keeps it unstuck while still anchoring the button. */
  @media(max-width:860px){ .map-wrap{position:relative;} }
  .map-expand{position:absolute;top:14px;right:16px;z-index:3;
    width:34px;height:34px;border-radius:100px;cursor:pointer;
    border:1px solid rgba(25,25,25,.14);background:rgba(255,255,255,.92);
    color:var(--muted-fg);font-size:15px;line-height:1;
    display:flex;align-items:center;justify-content:center;
    transition:background .18s ease,color .18s ease,border-color .18s ease;}
  .map-expand:hover{background:#fff;color:var(--black-sand);border-color:rgba(25,25,25,.34);}
  .map-expand svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;
    stroke-linecap:round;stroke-linejoin:round;}

  .map-pop{position:fixed;inset:0;z-index:2000;display:none;
    align-items:center;justify-content:center;padding:32px;
    background:rgba(16,14,12,.62);}
  .map-pop.is-open{display:flex;}
  .map-pop-inner{position:relative;background:#fff;border-radius:2px;
    padding:22px 24px 18px;max-width:96vw;max-height:96vh;
    box-shadow:0 24px 70px rgba(0,0,0,.34);}
  /* The map is roughly square, so height is the binding constraint — size it to
     the viewport and let width follow, rather than capping it at a fixed px. */
  .map-pop-inner .cr-map{height:min(80vh,900px);width:auto;max-width:92vw;}
  .map-pop-close{position:absolute;top:12px;right:14px;width:34px;height:34px;
    border:none;background:transparent;color:var(--muted-fg);
    font-size:24px;line-height:1;cursor:pointer;border-radius:100px;}
  .map-pop-close:hover{color:var(--black-sand);background:rgba(25,25,25,.06);}
  .map-pop-note{font-size:12.5px;color:var(--muted-fg);font-weight:300;
    margin:14px 0 0;text-align:center;}
  @media(max-width:760px){
    .map-pop{padding:14px;}
    .map-pop-inner{padding:18px 16px 14px;max-width:96vw;}
  }

  /* Clicking bare sea or land enlarges the map; clicking one of the five areas
     jumps to that section instead (handled in regions-map.js). */
  .map-wrap .cr-map{cursor:zoom-in;}
  .map-wrap:hover .map-expand{background:#fff;color:var(--black-sand);
    border-color:rgba(25,25,25,.34);}

  /* ---- Map areas, made live again ---------------------------------------
     These were switched off in an earlier pass because highlighting an area
     that led nowhere "reads as broken". They now navigate to the matching
     section, so the hover is a promise the click keeps. */
  .cr-area{pointer-events:all;cursor:pointer;
    transition:fill .18s ease,stroke .18s ease;}
  .cr-area:hover,.cr-area.is-active{fill:rgba(111,160,127,.30);
    stroke:#6FA07F;stroke-width:1.4;}
  .map-pop-inner .cr-area:hover{fill:rgba(111,160,127,.34);}

  /* ---- Communities: keep the photo with the reader ----------------------
     The write-ups run 200-250 words and the photo is a 4:3 block, so the image
     column ran out long before the text did and left a tall empty gap. Making
     the figure sticky means it travels down beside the paragraph being read
     instead of scrolling away at the top. Desktop only — below 820px the
     layout is already stacked, where sticky would be wrong. */
  @media(min-width:821px){
    .cm-figure{position:sticky;top:100px;}
  }


  /* The linked-sold-item treatment (play badge, green hover) was removed on
     2 Sep 2026. Only one of the five closings had a walkthrough, so the badge
     singled that card out and made the other four read as broken rather than
     simply video-less. Rules deleted rather than left orphaned. */

  /* ---- Renderings on a land listing ------------------------------------
     Every other image on the Lot 65 page is a photograph of the actual site,
     so an unlabelled render would read as a house that already exists. The
     badge sits on the image itself rather than in a caption, because captions
     get separated from their pictures the moment anything is shared, saved
     or scraped. On a homesite this is the difference between showing what
     could be built and implying something has been. */
  .render-block{margin-top:46px;padding-top:32px;border-top:1px solid rgba(0,0,0,.10);}
  .render-eyebrow{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--muted-fg);margin:0 0 9px;}
  .render-block h2{margin:0 0 10px;}
  .render-note{max-width:62ch;color:var(--muted-fg);line-height:1.7;font-weight:300;margin:0 0 22px;}
  .render-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;}
  .render-fig{position:relative;margin:0;}
  .render-fig img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;border-radius:2px;}
  .render-fig figcaption{position:absolute;left:10px;top:10px;
    background:rgba(22,22,22,.80);color:#fff;font-size:10px;letter-spacing:1.6px;
    text-transform:uppercase;padding:5px 9px;border-radius:2px;}

  /* Guides and Insights are deliberately two pages, not one: how buying works
     versus what is happening here. Each carries a single line pointing at the
     other. It replaced a full section on Guides whose only job was to link to
     Insights, which made the two read as the same thing seen twice. */
  .cross-note{font-size:14px;font-weight:300;line-height:1.8;color:var(--muted-fg);
    max-width:66ch;margin:0;padding-left:16px;border-left:2px solid rgba(0,0,0,.10);}
  .cross-note strong{font-weight:600;color:var(--black-sand);}
  .cross-note a{text-decoration:underline;text-underline-offset:2px;}

  /* The PSA application window moves every year — in 2026 it opened five weeks
     earlier than in 2025 and closed before most people had looked. Marked so a
     reader skimming for the date cannot skim past the warning. */
  .psa-alert{border-left:3px solid #C9A227;padding:2px 0 2px 16px;background:transparent;}

  /* Sources on the guides. A page that states rates to the colón should say
     where they came from and when they were last checked — it is the one thing
     that separates a written-once article from a maintained one, and it is what
     a reader (or an assistant quoting the page) needs in order to trust it. */
  .source-list{list-style:none;padding:0;margin:0 0 22px;max-width:70ch;}
  .source-list li{padding:12px 0;border-bottom:1px solid rgba(0,0,0,.08);}
  .source-list li:last-child{border-bottom:none;}
  .source-list a{font-size:14.5px;text-decoration:underline;text-underline-offset:2px;display:block;}
  .source-list span{display:block;font-size:13px;color:var(--muted-fg);line-height:1.6;margin-top:4px;font-weight:300;}
  .verified-note{font-size:12.5px;color:var(--muted-fg);font-weight:300;}

  /* Homepage guide row. Replaced an invented testimonial ("John & Jane Smith,
     Luxury Homeowners, New York") that was sitting on the front page. Real
     testimonials go back in when Michael supplies them; until then the slot
     holds something that is actually true. */
  .home-guide-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;}
  .home-guide-row a{display:block;padding:18px 18px 20px;background:#fff;border:1px solid rgba(0,0,0,.08);
    border-radius:2px;text-decoration:none;transition:border-color .18s ease,transform .18s ease;}
  .home-guide-row a:hover{border-color:rgba(0,0,0,.22);transform:translateY(-2px);}
  .hg-t{display:block;font-family:var(--display);font-size:17px;line-height:1.25;color:var(--black-sand);margin-bottom:7px;}
  .hg-s{display:block;font-size:12.5px;line-height:1.55;color:var(--muted-fg);font-weight:300;}

  /* The five conservation pages linked only to each other — a closed loop that
     made good writing read as decoration. Each now points at the listings,
     towns and guides it is actually about. Piedras Blancas in particular is the
     forest surrounding the Golfo Dulce estate, and the two pages did not know
     the other existed. */
  .cons-related{margin:34px 0 0;padding:18px 20px;background:var(--warm-bg);border-radius:2px;
    font-size:13.5px;line-height:1.75;font-weight:300;color:var(--muted-fg);}
  .cons-related .cr-lbl{display:block;font-size:10.5px;letter-spacing:2px;text-transform:uppercase;
    color:var(--black-sand);margin-bottom:8px;font-weight:600;}
  .cons-related a{text-decoration:underline;text-underline-offset:2px;}



/* Current page inside a nav dropdown */
  .nav-menu a.is-current{color:#2C2A26;font-weight:600;}


/* Cookie consent notice — small, bottom-left, never a full-screen interruption */
  .consent{position:fixed;left:20px;bottom:20px;z-index:120;max-width:390px;
    background:#FCFBF8;border:1px solid #DCD5C9;padding:20px 22px;
    box-shadow:0 6px 28px rgba(28,26,24,.15);
    opacity:0;transform:translateY(10px);transition:opacity .25s,transform .25s;}
  .consent.is-in{opacity:1;transform:none;}
  .consent p{margin:0 0 14px;font-size:13px;line-height:1.7;color:#6B5D52;}
  .consent-actions{display:flex;gap:10px;justify-content:flex-end;}
  .consent button{font-family:inherit;font-size:11px;letter-spacing:1.3px;text-transform:uppercase;
    padding:9px 16px;cursor:pointer;border:1px solid #2C2A26;background:none;color:#2C2A26;}
  .consent .consent-yes{background:#2C2A26;color:#FCFBF8;}
  .consent button:hover{opacity:.82;}
  @media (max-width:560px){
    .consent{left:12px;right:12px;bottom:12px;max-width:none;}
  }

/* Coldwell Banker Vesta Group mark — one instance, footer only. The site is the
   personal-brand tier; the franchise endorses it rather than leading it. */
  .footer-cb{display:inline-block;margin-top:18px;opacity:.62;transition:opacity .18s;}
  .footer-cb:hover{opacity:.9;}
  .footer-cb img{width:150px;height:auto;display:block;}
  @media (max-width:600px){ .footer-cb img{width:130px;} }

/* Price sort on the Properties page. Sits in the filter bar, pushed right so it
   reads as a separate control from the type pills rather than a fourth pill. */
  .sort-wrap{margin-left:auto;display:flex;align-items:center;gap:9px;}
  .sort-lbl{font-size:10.5px;letter-spacing:1.4px;text-transform:uppercase;color:#8A7F70;}
  .sort-select{font-family:inherit;font-size:12.5px;color:#2C2A26;background:#fff;
    border:1px solid #DCD5C9;padding:7px 28px 7px 11px;border-radius:0;cursor:pointer;
    appearance:none;-webkit-appearance:none;
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238A7F70' stroke-width='1.4'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 10px center;}
  .sort-select:focus{outline:2px solid #4E7A5D;outline-offset:-1px;}
  @media (max-width:640px){
    .sort-wrap{margin-left:0;width:100%;justify-content:space-between;margin-top:10px;}
  }

/* "Coming Soon" in place of a price — reads as a status, not a number. */
  .listing-price.is-soon{color:#4E7A5D;font-family:var(--body);font-size:12px;
    letter-spacing:2px;text-transform:uppercase;font-weight:600;
    display:inline-block;border:1px solid #4E7A5D;padding:5px 12px;margin-bottom:8px;}