/* ==========================================================================
   Saltmarsh coastal design language (v1.4)
   Drawn from the illustrations: beach-hut gables and arched doors, sails and
   burgee flags, pebbles, striped awnings, bunting and waves. Flat colour, ink
   outlines and hard print-style shadows, never soft blobs or circles.

   Shape vocabulary
     flag    buttons              swallow-tail burgee, ink keel
     pebble  chips, tags, pager   four unequal corners
     tide    large panels         two big opposite corners (sail / leaf)
     gable   property cards       pitched-roof image
     door    people               arched portrait
     awning  header               scalloped stripes
     wave    section edges        foam line
   ========================================================================== */
:root{
  --ink:#17303D;--paper:#FBF6EC;--cream:#FFFBF2;--sand:#F3E8D2;--coral:#C8431D;--coral-d:#A9340F;--gold:#F2A93B;--teal:#2E8A99;--teal-d:#256C78;--sage:#7FA38F;--glass:#CFE3E3;
  --pebble:22px 12px 20px 10px;
  --tide:6px 34px 6px 34px;
  --tide-s:4px 16px 4px 16px;
  --notch:12px;
  --flag:polygon(0 0,100% 0,calc(100% - var(--notch)) 50%,100% 100%,0 100%);
  --wave-ink:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='8' viewBox='0 0 24 8'%3E%3Cpath d='M0 4 Q6 -1 12 4 T24 4' fill='none' stroke='%2317303D' stroke-width='1.6'/%3E%3C/svg%3E");
  --wave-coral:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='8' viewBox='0 0 24 8'%3E%3Cpath d='M0 4 Q6 -1 12 4 T24 4' fill='none' stroke='%23C8431D' stroke-width='2.4'/%3E%3C/svg%3E");
  --wave-gold:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='8' viewBox='0 0 24 8'%3E%3Cpath d='M0 4 Q6 -1 12 4 T24 4' fill='none' stroke='%23F2A93B' stroke-width='2.4'/%3E%3C/svg%3E");
  --wave-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='30' viewBox='0 0 96 30'%3E%3Cpath d='M0 16 Q24 -2 48 16 T96 16 V30 H0Z' fill='%23000'/%3E%3C/svg%3E");
}
body{background:var(--paper)}

/* ---------- awning (replaces the flat stripe) ---------- */
.stripe{height:30px;background:repeating-linear-gradient(90deg,#E3622E 0 38px,#F2A93B 38px 76px,#2E8A99 76px 114px,#FBF6EC 114px 152px);
  -webkit-mask:linear-gradient(#000 0 0) top/100% calc(100% - 14px) no-repeat,radial-gradient(ellipse 19px 14px at 50% 0,#000 97%,#0000 100%) bottom/38px 14px repeat-x;
  mask:linear-gradient(#000 0 0) top/100% calc(100% - 14px) no-repeat,radial-gradient(ellipse 19px 14px at 50% 0,#000 97%,#0000 100%) bottom/38px 14px repeat-x;
  filter:drop-shadow(0 2px 0 rgba(23,48,61,.18))}

/* ---------- buttons: the burgee flag ---------- */
.btn,.btn-val,.svc-btn{--notch:12px;border-radius:0!important;clip-path:var(--flag);border:0;padding-left:26px;padding-right:calc(26px + var(--notch));
  box-shadow:inset 0 -4px 0 rgba(23,48,61,.26);letter-spacing:.005em;position:relative;isolation:isolate;transition:transform .15s ease,background .15s ease,color .15s ease}
.btn-sm{--notch:9px;padding-left:18px;padding-right:calc(18px + var(--notch))}
.btn:hover,.btn-val:hover{transform:translate(-1px,-2px)}
.btn-coral{background:var(--coral);color:#fff}.btn-coral:hover{background:var(--coral-d)}
.btn-gold,.btn-val{background:var(--gold);color:var(--ink)}.btn-gold:hover,.btn-val:hover{background:#F7BC62}
.btn-val{--notch:15px;min-height:56px;font-size:18px;box-shadow:inset 0 -5px 0 rgba(23,48,61,.28)}
/* outlined flag: ink flag with a cream flag laid inside it */
.btn-line{background:var(--ink)!important;color:var(--ink);box-shadow:none}
.btn-line::before{content:"";position:absolute;inset:2.5px;background:var(--cream);clip-path:polygon(0 0,100% 0,calc(100% - var(--notch) + 1px) 50%,100% 100%,0 100%);z-index:-1;transition:background .15s ease}
.btn-line:hover{color:#fff}.btn-line:hover::before{background:var(--ink)}
/* clip-path would hide the focus ring, so the flag squares off while focused */
.btn:focus-visible,.btn-val:focus-visible,.svc-btn:focus-visible{clip-path:none;border-radius:4px!important;outline:3px solid var(--gold);outline-offset:3px;box-shadow:0 0 0 6px var(--ink)}
.btn-line:focus-visible::before{inset:2.5px}
@media (forced-colors:active){.btn,.btn-val,.svc-btn{clip-path:none;border:2px solid ButtonText!important}}

/* segmented tabs become a boardwalk */
.tabs,.viewtog{border-radius:6px!important;background:var(--cream);border:2px solid var(--ink)!important;padding:3px}
.tabs label,.tabs .tablink,.viewtog button{border-radius:3px!important}
.tabs input:checked+label,.tabs .tablink[aria-current="page"],.viewtog button[aria-pressed="true"]{background:var(--ink);color:#fff;box-shadow:inset 0 -4px 0 var(--gold)}
.maptog button{clip-path:none}

/* ---------- pebbles: chips, tags, pager, pills ---------- */
.chip,.chipc span,.chipl,.fchip,.pill,.ptags li,.pg,.pbadge,.pstatus,.bfig figcaption,.hstat,.mpin{border-radius:var(--pebble)!important}
.chipc span,.chipl,.chip{background:var(--cream);border:2px solid #8A7B5A}
.chipc input:checked+span,.chipl[aria-current="true"]{background:var(--ink);border-color:var(--ink)}
.pg{border-width:2px;background:var(--cream)}
.pg[aria-current="page"]{box-shadow:inset 0 -4px 0 var(--gold)}
.ptags li{background:var(--sand)}

/* ---------- fields ---------- */
.sel,.inp,.txa{border-radius:var(--tide-s)!important;border:2px solid #8A7B5A;background-color:var(--cream)}
.sel:focus,.inp:focus,.txa:focus{border-color:var(--ink)}
.lab{letter-spacing:.1em}

/* ---------- panels: the tide corner ---------- */
.card-w,.branch,.empty,.cookie,.mapview,.gprompt,.alert-status,.notice-bar,.svc-panel,.savesearch-form,.stat,.mini-market>div,.sent-card,.binfo,.chart,[class*="chart-"]{border-radius:var(--tide)}
[style*="border-radius:30px"],[style*="border-radius:28px"],[style*="border-radius:26px"],[style*="border-radius:24px"],[style*="border-radius:22px"]{border-radius:var(--tide)!important}
[style*="border-radius:20px"],[style*="border-radius:18px"],[style*="border-radius:16px"],[style*="border-radius:14px"],[style*="border-radius:12px"]{border-radius:var(--tide-s)!important}
[style*="border-radius:999px"]:not([style*="999px 999px"]){border-radius:var(--pebble)!important}
[style*="border-radius:50%"]{border-radius:6px 16px 6px 16px!important}
.card-w,.branch,.mapview,.empty{border:2px solid var(--ink);background:var(--cream)}
.branch{box-shadow:7px 7px 0 var(--ink)}
.cookie{border:2.5px solid var(--ink);box-shadow:7px 7px 0 var(--ink)}
.svc-panel{border:2.5px solid var(--ink);box-shadow:6px 6px 0 var(--ink);background:var(--cream)}
.svc-panel a{border-radius:3px!important}.svc-panel a:hover{background:var(--sand);box-shadow:inset 4px 0 0 var(--coral)}
.skip{border-radius:4px}

/* ---------- headings and flags ---------- */
h1.h1::after{content:"";display:block;width:132px;height:10px;margin-top:16px;background:var(--wave-coral) repeat-x 0 0/24px 8px}
[style*="text-align:center"] h1.h1::after,[style*="text-align:center"] .h2::after{margin-left:auto;margin-right:auto}
.eyebrow::before{content:"";width:20px;height:14px;background:var(--coral);clip-path:polygon(0 0,100% 0,60% 50%,100% 100%,0 100%);flex:none}
.bsub{position:relative;padding-bottom:12px}
.bsub::after{content:"";position:absolute;left:0;bottom:0;width:84px;height:8px;background:var(--wave-gold) repeat-x 0 0/24px 8px}

/* ---------- menu: pier boards with a waterline ---------- */
.hdr-nav{border-top:0!important;padding-top:6px;padding-bottom:16px!important;background:var(--wave-ink) repeat-x 0 100%/24px 8px;gap:2px}
.hdr-nav a{border-radius:0!important;padding:10px 12px 12px!important;position:relative;font-weight:700;letter-spacing:.005em}
.hdr-nav a::after{content:"";position:absolute;left:10px;right:10px;bottom:3px;height:8px;background:var(--wave-gold) repeat-x 0 0/24px 8px;opacity:0;transform:scaleX(.6);transform-origin:left;transition:opacity .15s ease,transform .2s ease}
.hdr-nav a:hover,.hdr-nav li.current-menu-item>a,.hdr-nav li.current_page_item>a,.hdr-nav a[aria-current="page"]{background:transparent!important;color:var(--ink)}
.hdr-nav a:hover::after{opacity:1;transform:none}
.hdr-nav li.current-menu-item>a::after,.hdr-nav li.current_page_item>a::after,.hdr-nav a[aria-current="page"]::after{opacity:1;transform:none;background-image:var(--wave-coral)}
.hdr-nav li.current-menu-item>a::before,.hdr-nav li.current_page_item>a::before{content:"";position:absolute;left:50%;top:-1px;width:12px;height:9px;margin-left:-6px;background:var(--coral);clip-path:polygon(0 0,100% 0,50% 100%)}
.svc-btn{background:var(--ink);color:#fff;font-size:16px;padding-top:0;padding-bottom:0;margin-right:10px}
.svc-btn:hover{background:#0F2631}
.svc-btn::after{display:none}
.hdr .logo svg rect{rx:10}
.hdr-actions .btn-sm{min-height:48px}

/* ---------- property cards: a hut with a pitched roof ---------- */
.pcard{background:transparent!important;border:0!important;border-radius:0!important;overflow:visible!important;filter:drop-shadow(6px 6px 0 rgba(23,48,61,.92));transition:transform .18s ease,filter .18s ease}
.pcard:hover{transform:translate(-2px,-3px);box-shadow:none!important;filter:drop-shadow(9px 9px 0 rgba(23,48,61,.92))}
.pcard .pimg{clip-path:polygon(0 17%,50% 0,100% 17%,100% 100%,0 100%);aspect-ratio:4/3.3!important}
.pcard .pimg::after{content:"";position:absolute;inset:0;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolyline points='0,100 0,17 50,0 100,17 100,100' fill='none' stroke='%2317303D' stroke-width='5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat}
.pcard .pbody{background:var(--cream);border:2.5px solid var(--ink);border-top:0;border-radius:0 0 4px 30px}
.pcard .pbadge{top:25%!important;left:12px!important}
.pcard .pstatus{bottom:12px}
.pcard .hearts,.hearts{top:23%!important;right:12px!important;width:44px;height:44px;border-radius:6px 16px 6px 16px!important;background:var(--cream);border:2px solid var(--ink)}
.pcard:focus-within{outline:3px solid var(--gold);outline-offset:6px}
.cards.list .pcard .pimg{clip-path:none;aspect-ratio:auto!important}
.cards.list .pcard .pimg::after{display:none}
.cards.list .pcard .pbody{border-top:2.5px solid var(--ink);border-left:0;border-radius:0 30px 4px 0}
.cards.list .pcard .pbadge{top:14px!important}.cards.list .hearts{top:12px!important}
.cards.list .pcard .pimg{border:2.5px solid var(--ink);border-right:0;border-radius:30px 0 0 4px}
@media(max-width:700px){.cards.list .pcard .pimg{border-right:2.5px solid var(--ink);border-bottom:0;border-radius:4px 4px 0 0;clip-path:polygon(0 17%,50% 0,100% 17%,100% 100%,0 100%)}.cards.list .pcard .pbody{border-top:0;border-left:2.5px solid var(--ink);border-radius:0 0 4px 30px}}
.pprice{letter-spacing:-.015em}

/* ---------- people: the arched door ---------- */
.townc{border:2.5px solid var(--ink)!important;border-radius:4px 4px 4px 28px!important;background:var(--cream);box-shadow:6px 6px 0 var(--ink);overflow:hidden}
.townc:hover{box-shadow:9px 9px 0 var(--ink)}
.townc>div:first-child{border-radius:999px 999px 0 0;margin:14px 14px 0;overflow:hidden;border:2.5px solid var(--ink);border-bottom:0}
.hstat .dot{border-radius:2px;transform:rotate(45deg)}

/* ---------- branch block: the crew sits right under the branch header ---------- */
.branch{gap:30px;position:relative}
.bfig{border:2.5px solid var(--ink);background:var(--sand);padding:0}
.bfig:first-child{border-radius:4px 4px 4px 34px}
.bfig:last-child{border-radius:34px 4px 4px 4px}
.bfig figcaption{left:10px;bottom:10px;background:var(--ink);font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.bph{border-radius:0!important}
.crew{background:var(--sand);border:2.5px solid var(--ink);border-radius:var(--tide);padding:22px 24px 26px;position:relative}
.crew-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;font-size:26px;margin-bottom:18px}
.crew-n{font-family:'Figtree',sans-serif;font-size:14px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#4F6470}
.crew-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:20px 18px}
.crew-card{display:flex;flex-direction:column;gap:3px;text-decoration:none;color:var(--ink);height:100%}
.crew-door{display:block;position:relative;aspect-ratio:4/5;border-radius:999px 999px 6px 6px;overflow:hidden;border:2.5px solid var(--ink);background:var(--glass);margin-bottom:10px;box-shadow:5px 5px 0 var(--ink);transition:transform .15s ease,box-shadow .15s ease}
.crew-card:hover .crew-door{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink)}
.crew-card strong{font-family:'Fraunces',serif;font-size:20px;line-height:1.15}
.crew-role{font-size:15px;color:#33505E}
.crew-go{margin-top:4px;font-weight:700;color:var(--teal-d);font-size:15px}
.crew-card:hover .crew-go{text-decoration:underline}
.crew-card:focus-visible .crew-door{outline:3px solid var(--gold);outline-offset:3px}
.bmarket{border-top:2px dashed #8A7B5A;padding-top:22px}

/* ---------- ornaments: waves instead of straight section edges ---------- */
.sec-wave{position:relative;padding-top:calc(var(--pt,72px) + 18px)!important;
  -webkit-mask:linear-gradient(#000 0 0) 0 30px/100% calc(100% - 30px) no-repeat,var(--wave-mask) 0 0/96px 30px repeat-x;
  mask:linear-gradient(#000 0 0) 0 30px/100% calc(100% - 30px) no-repeat,var(--wave-mask) 0 0/96px 30px repeat-x}
.foot-wave{-webkit-mask:linear-gradient(#000 0 0) 0 30px/100% calc(100% - 30px) no-repeat,var(--wave-mask) 0 0/96px 30px repeat-x;mask:linear-gradient(#000 0 0) 0 30px/100% calc(100% - 30px) no-repeat,var(--wave-mask) 0 0/96px 30px repeat-x;padding-top:92px!important;margin-top:-1px}
.step-n,.trust p span{border-radius:0!important;clip-path:polygon(25% 3%,75% 3%,100% 50%,75% 97%,25% 97%,0 50%);background:var(--gold)}
.trust p span{background:var(--sand)}
.sent-tick{border-radius:0!important;clip-path:polygon(25% 3%,75% 3%,100% 50%,75% 97%,25% 97%,0 50%)}
.trust{border-top:0;background:var(--wave-ink) repeat-x 0 0/24px 8px;padding-top:34px}

/* ---------- map and prompts ---------- */
.mpin{background:var(--ink);border:2px solid var(--cream);padding:8px 12px;border-radius:4px 14px 4px 14px!important}
#map-canvas{border-radius:4px 28px 4px 28px;border:2px solid var(--ink)}
.gprompt{background:var(--glass);border:2.5px solid var(--ink);box-shadow:6px 6px 0 var(--ink)}
.mapview{background:var(--cream)}
.leaflet-container{font-family:inherit}

/* ---------- footer ---------- */
.foot-logo{border-radius:4px 14px 4px 14px}

@media(max-width:700px){
  :root{--tide:6px 24px 6px 24px}
  .branch{box-shadow:5px 5px 0 var(--ink)}
  .crew{padding:18px 16px 22px}
  .crew-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stripe{height:26px}
}
@media(prefers-reduced-motion:reduce){.btn:hover,.btn-val:hover,.pcard:hover,.crew-card:hover .crew-door{transform:none}}
@media print{.stripe,.sec-wave{-webkit-mask:none;mask:none}}
@media(max-width:700px){.hdr-nav a{padding:8px 8px 12px!important;font-size:15px}.svc-btn{margin-right:4px}}
/* Services closes the menu */
.svc{margin-left:6px}
.svc-btn{margin-right:0;margin-left:0}
/* more breathing room before the flag's notched end */
.btn-sm{padding-right:calc(24px + var(--notch))}
.hdr-actions .btn-sm{padding-left:20px;padding-right:calc(30px + var(--notch))}
/* Saved properties and Sign in: plain outlined buttons, no flag */
.hdr-actions .btn-line{clip-path:none;border-radius:4px 14px 4px 14px!important;background:var(--cream)!important;border:2.5px solid var(--ink);box-shadow:none;color:var(--ink);padding:0 20px}
.hdr-actions .btn-line::before{display:none}
.hdr-actions .btn-line:hover{background:var(--ink)!important;color:#fff}
.hdr-actions .btn-line:focus-visible{border-radius:4px!important}