/* ==========================================================================
   VACATION RENTALS
   Search pill, quick filters, listing cards, the split map view.
   ========================================================================== */

/* ==========================================================================
   VACATION RENTALS — page-specific CSS
   The search rail deliberately reuses the .field anatomy the homepage hero
   already uses (divided cells, icon + label + value, no boxes) instead of
   inventing a second form language. A page of bordered input rectangles is
   what made the first version of this page look like a template.
     [CSS] this block -> assets/css/vacation-rentals.css
   ========================================================================== */
/* --- Search pill ---------------------------------------------------------
   The homepage hero's own search bar, in the pill shape travellers know from
   the booking sites. It literally reuses .field, .field__icon, .field__label,
   .field__control and .field__chevron from the shared stylesheet — the icon,
   the small-caps label, the value, the chevron and the hairline divider are
   all the homepage's. Only the colours change, because that bar sits on a dark
   glass panel over the hero photograph and this one sits on cream.
   ------------------------------------------------------------------------- */
.rail{
  background:var(--sand);
  padding:clamp(1.5rem,3vw,2.5rem) var(--gutter) clamp(1.25rem,2.4vw,2rem);
  scroll-margin-top:var(--header-h);
}
.rail__form{margin:0}
.pill{
  display:grid;
  grid-template-columns:1.2fr 1fr 1fr 1.1fr auto;
  align-items:stretch;
  max-width:64rem;
  padding:.34rem .34rem .34rem 0;
  background:var(--white);
  border:1px solid var(--line-strong);
  border-radius:999px;
  box-shadow:0 16px 40px -34px rgba(42,33,24,.6);
}
/* Tighter than the hero bar: that one is the headline act over a photograph,
   this one sits above thirteen results and should not be 114px of chrome. */
.pill .field{
  padding:.6rem clamp(.95rem,1.5vw,1.6rem);
  gap:clamp(.6rem,.95vw,.9rem);
  border-radius:999px;
  transition:background-color .25s var(--ease);
}
.pill .field:hover{background:rgba(120,105,85,.07)}
.pill .field__icon{color:#8A6E49;width:clamp(17px,1.25vw,19px);height:auto}
.pill .field__body{gap:.1rem}
.pill .field__label{color:var(--text-muted)}
.pill .field__control{
  color:var(--ink);
  font-size:clamp(.9375rem,1vw,1rem);
  line-height:1.3;
}
.pill select.field__control option{background:var(--white);color:var(--ink)}
.pill .field__chevron{color:var(--text-dim);width:12px}
.pill .field + .field::before{background:var(--line-strong);top:24%;bottom:24%}
.pill .field:hover + .field::before,.pill .field:hover::before{opacity:0}
.pill .field:focus-within{
  border-radius:999px;
  background:rgba(120,105,85,.07);
  box-shadow:0 0 0 2px var(--brand) inset;
}
.pill .field:focus-within::before,.pill .field:focus-within + .field::before{opacity:0}
/* Dates: the shared script paints the value as US MM/DD/YYYY whatever locale
   the browser would otherwise use. These restate the two colours .field__control
   carries for the dark hero panel. */
.pill .field__display{color:var(--ink);font-size:clamp(.9375rem,1vw,1rem);line-height:1.3}
.pill .field__control[type="date"].is-empty + .field__display{color:var(--text-dim)}
.pill__go{
  flex:0 0 auto;align-self:center;
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  height:3rem;padding:0 1.5rem;margin-left:.34rem;
  border:0;border-radius:999px;cursor:pointer;
  background:var(--brand);color:var(--cream);
  font:inherit;font-size:.8125rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  transition:background-color .3s var(--ease);
}
.pill__go svg{width:15px;height:auto}
.pill__go:hover,.pill__go:focus-visible{background:var(--brand-deep)}
/* --- Quick filters -------------------------------------------------------- */
.quick{
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .55rem;
  margin:clamp(.9rem,1.6vw,1.25rem) 0 0;
}
.qf{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.72rem 1.05rem;          /* 44px tall: a finger, not a cursor */
  border:1px solid rgba(120,105,85,.38);border-radius:999px;
  background:var(--white);
  font:inherit;font-size:.875rem;line-height:1.3;color:var(--text-mid);
  cursor:pointer;white-space:nowrap;
  transition:background-color .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease);
}
.qf svg{width:14px;height:auto;flex:0 0 auto}
.qf:hover{border-color:var(--ink);color:var(--ink)}
.qf[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.qf--count{
  margin-left:auto;border-style:dashed;background:transparent;color:var(--text-soft);cursor:pointer;
}
.qf--count[hidden]{display:none}
/* --- Result bar + view toggle --------------------------------------------- */
.bar{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:.75rem clamp(1rem,2vw,1.75rem);
  margin-top:clamp(.9rem,1.6vw,1.25rem);
}
.bar__count{margin:0;font-size:clamp(.9375rem,1.05vw,1.0625rem);color:var(--ink)}
.bar__count b{font-weight:500}
.seg{
  display:inline-flex;flex:0 0 auto;
  padding:3px;border:1px solid rgba(120,105,85,.34);border-radius:999px;background:var(--white);
}
.seg__btn{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.5rem 1.05rem;border:0;border-radius:999px;background:transparent;
  font:inherit;font-size:.875rem;line-height:1.3;color:var(--text-body);cursor:pointer;
  transition:background-color .3s var(--ease),color .3s var(--ease);
}
.seg__btn svg{width:15px;height:auto}
.seg__btn[aria-pressed="true"]{background:var(--ink);color:var(--cream)}
.seg__btn:not([aria-pressed="true"]):hover{background:rgba(120,105,85,.1);color:var(--ink)}
/* --- Neighbourhood groups ------------------------------------------------
   ONE grid holding all thirteen cards, with the group headings as full-width
   items inside it. They used to be a grid per neighbourhood, which meant a
   group of one — "On the beach" — left the rest of its row empty and the
   cards never flowed continuously. Headings hide in map view, so the thirteen
   then run two per row straight through.
   ------------------------------------------------------------------------- */
.lst{
  background:var(--sand-lite);
  padding:clamp(2rem,3.6vw,3.5rem) var(--gutter) var(--section-y-lg);
}
.lst__grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--card-gap);
  align-items:start;
}
.grp__head{
  grid-column:1 / -1;
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:baseline;gap:.4rem clamp(1rem,2vw,2rem);
  margin-top:clamp(1.5rem,3vw,3.25rem);
  padding-bottom:clamp(.6rem,1.1vw,.9rem);
  border-bottom:1px solid var(--line-strong);
}
.grp__head:first-child{margin-top:0}
.grp__title{
  grid-column:1;margin:0;font-weight:400;
  font-size:clamp(1.375rem,2.3vw,2.125rem);line-height:1.1;
  letter-spacing:-.015em;color:var(--ink);
}
.grp__n{
  grid-column:2;grid-row:1;white-space:nowrap;
  font-size:clamp(.8125rem,.95vw,.9375rem);color:var(--text-muted);
}
.grp__lede{
  grid-column:1 / -1;margin:clamp(.5rem,.9vw,.75rem) 0 0;max-width:70ch;
  font-size:clamp(.9375rem,1.06vw,1.0625rem);line-height:1.65;color:var(--text-body);
}
.grp__lede a{
  color:var(--brand);text-decoration:none;border-bottom:1px solid var(--link-line);
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.grp__lede a:hover,.grp__lede a:focus-visible{color:var(--brand-deep);border-bottom-color:var(--brand-deep)}
/* --- One home ------------------------------------------------------------
   Card anatomy follows the booking-site convention: a rounded photograph
   carrying the card with no border and no shadow, a swipeable gallery inside
   it, then a tight text block. Depth comes from the photography, which is why
   a border would fight it. --------------------------------------------------- */
.home{position:relative;min-width:0;display:flex;flex-direction:column}
.home__media{
  position:relative;display:block;
  aspect-ratio:20/19;                 /* nearly square, as the booking sites use */
  border-radius:12px;overflow:hidden;background:#D9D2C8;
}
.gal{position:absolute;inset:0;display:flex;height:100%}
/* overflow:hidden on the slide, not only on the card: the image scales on
   hover, and without this the scaled edge bleeds into the next slide and grows
   the strip's scrollWidth, which makes the snap points drift. */
.gal__slide{position:relative;flex:0 0 100%;height:100%;overflow:hidden}
.gal__slide img{width:100%;height:100%;object-fit:cover;display:block}
.gal{
  overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;
  overscroll-behavior-inline:contain;
}
.gal::-webkit-scrollbar{display:none}
.gal__slide{scroll-snap-align:center}
.gal__btn{
  position:absolute;top:50%;z-index:2;
  width:30px;height:30px;margin-top:-15px;
  display:grid;place-items:center;
  border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.92);color:#2A241F;
  box-shadow:0 2px 8px rgba(0,0,0,.26);
  opacity:0;transform:scale(.85);
  transition:opacity .25s var(--ease),transform .25s var(--ease),background-color .25s var(--ease);
}
.gal__btn svg{width:9px;height:auto}
.gal__btn--prev{left:10px}
.gal__btn--next{right:10px}
.home:hover .gal__btn,.home:focus-within .gal__btn{opacity:1;transform:none}
.gal__btn:hover{background:#fff}
.gal__btn:focus-visible{opacity:1;transform:none}
.gal__btn[disabled]{opacity:0 !important;pointer-events:none}
/* --- Hover affordance ------------------------------------------------------
   A scrim and a label, both set on the photograph rather than under it, so
   revealing them moves nothing — a control that appeared in the flow would
   push every card below it down.

   Text on the scrim rather than a filled pill: the gallery already puts two
   white discs on this photograph and a third white shape turns the corner of
   it into a control panel.

   Decorative, and aria-hidden — the card's real link is its name, and thirteen
   repetitions of the same phrase is noise in a screen reader. */
.home__scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(0deg,rgba(14,10,8,.55),rgba(14,10,8,.15) 32%,transparent 56%);
  opacity:0;transition:opacity .4s var(--ease);
}
.home:hover .home__scrim,.home:focus-within .home__scrim{opacity:1}
.home__cta{
  position:absolute;left:14px;bottom:12px;z-index:3;
  display:inline-flex;align-items:center;gap:.55em;
  color:#fff;
  font-size:.75rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  text-shadow:0 1px 10px rgba(0,0,0,.5);
  opacity:0;transform:translateY(9px);
  transition:opacity .36s var(--ease),transform .36s var(--ease);
  pointer-events:none;white-space:nowrap;
}
.home__cta svg{width:15px;height:auto;transition:transform .36s var(--ease) .05s}
.home:hover .home__cta,.home:focus-within .home__cta{opacity:1;transform:none}
.home:hover .home__cta svg{transform:translateX(3px)}
.gal__dots{
  position:absolute;left:0;right:0;bottom:9px;z-index:2;
  display:flex;justify-content:center;gap:5px;pointer-events:none;
}
.gal__dot{
  width:6px;height:6px;border-radius:50%;
  background:rgba(255,255,255,.62);
  transition:background-color .25s var(--ease),transform .25s var(--ease);
}
.gal__dot.is-on{background:#fff;transform:scale(1.18)}
/* The text block below the photograph.

   The rule that matters for a grid of cards is that the same information sits
   in the same place on every one — that is what lets an eye run across a row
   instead of re-reading each card from scratch. So the slots are fixed and
   every card gets all of them in the same order, with a reserved height for
   the two that vary:

     place   — where it is, quiet, always line one
     name    — the one distinctive treatment on the card
     specs   — sleeps / bedrooms / bathrooms, always in that order
     line    — one sentence, two lines of space reserved whether used or not
     notes   — dogs, and the catch. Never more than two, never the same twice.

   Three type sizes, not five. The selling points that used to be tan pills are
   in the sentence now; a tag repeating what the sentence just said was a
   second treatment carrying no second meaning. */
.home__place{
  margin:clamp(.65rem,1vw,.85rem) 0 0;
  font-size:.75rem;
  line-height:1.3;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--text-dim);
}
.home__name{
  margin:.3rem 0 0;
  font-family:var(--font-serif);font-weight:400;
  font-size:clamp(1.0625rem,1.3vw,1.25rem);line-height:1.22;color:var(--ink);
  /* two lines reserved: the longest names wrap and the short ones must not
     pull everything below them up out of alignment */
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;min-height:2.44em;
}
.home__name a{color:inherit;text-decoration:none}
.home__name a::after{content:"";position:absolute;inset:0;border-radius:12px}
.home__name a:focus-visible{outline:none}
.home__name a:focus-visible::after{outline:2px solid var(--focus-ring);outline-offset:4px}
.home__specs{
  display:flex;flex-wrap:wrap;margin:.3rem 0 0;padding:0;list-style:none;
  font-size:.8125rem;line-height:1.45;color:var(--text-soft);
  font-variant-numeric:tabular-nums;
}
.home__specs li + li::before{content:"·";margin:0 .45em;opacity:.5}
.home__note{
  margin:.45rem 0 0;
  font-size:.875rem;line-height:1.5;color:var(--text-mid);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;min-height:2.62em;
}
/* One row, one colour family, no pill backgrounds. The caution keeps its own
   colour AND its own icon, so it never depends on colour alone. */
.home__tags{
  display:flex;flex-wrap:wrap;gap:.2rem .9rem;
  margin:auto 0 0;padding:clamp(.5rem,.85vw,.65rem) 0 0;list-style:none;
  min-height:1.9rem;
}
.home__tags li{
  display:inline-flex;align-items:center;gap:.34rem;
  font-size:.78125rem;line-height:1.45;
}
.home__tags svg{width:12px;height:auto;flex:0 0 auto}
.home__tags .t-pet{color:#2C5F3E}
.home__tags .t-note{color:#7A4119}
/* the one beachfront house keeps a feature row in list view */
.home--feature{
  grid-column:1 / -1;
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:clamp(1.25rem,2.6vw,2.75rem);align-items:center;
}
.home--feature .home__media{aspect-ratio:16/9;border-radius:14px}
.home--feature .home__body{min-width:0;display:flex;flex-direction:column}
.home--feature .home__place{margin-top:0}
.home--feature .home__name{
  margin-top:.45rem;font-size:clamp(1.375rem,2.2vw,2.0625rem);line-height:1.1;
  -webkit-line-clamp:none;overflow:visible;min-height:0;
}
.home--feature .home__specs{margin-top:.6rem;font-size:clamp(.875rem,1vw,.9375rem)}
.home--feature .home__note{
  margin-top:.65rem;font-size:clamp(.9375rem,1.08vw,1.0625rem);max-width:52ch;
  -webkit-line-clamp:none;overflow:visible;min-height:0;
}
.home--feature .home__tags{margin-top:clamp(.9rem,1.5vw,1.25rem);padding-top:0;min-height:0}
.home.is-hot .home__media{box-shadow:0 0 0 3px var(--brand)}
/* --- Split view: results beside a sticky map ------------------------------ */
.split{display:block}
.lst.is-split .split{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(1.25rem,2.4vw,2rem);
  align-items:start;
}
/* In map view the neighbourhood headings step aside — they are structure for
   a reader scrolling the page, not for someone scanning a map. They stay in
   the DOM, so the page a crawler sees is unchanged, and with them out of the
   flow the thirteen cards run two per row straight through. */
.lst.is-split .grp__head{display:none}
.lst.is-split .lst__grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1rem,1.8vw,1.5rem);
}
.lst.is-split .home--feature{grid-column:auto;grid-template-columns:1fr;gap:0;align-items:stretch}
.lst.is-split .home--feature .home__media{aspect-ratio:20/19;border-radius:12px}
.lst.is-split .home--feature .home__place{margin-top:clamp(.65rem,1vw,.85rem)}
.lst.is-split .home--feature .home__name{
  margin-top:.3rem;font-size:clamp(1.0625rem,1.3vw,1.25rem);line-height:1.22;
  -webkit-line-clamp:2;overflow:hidden;min-height:2.44em;
}
.lst.is-split .home--feature .home__specs{margin-top:.3rem;font-size:.8125rem}
.lst.is-split .home--feature .home__note{
  margin-top:.45rem;font-size:.875rem;max-width:none;
  -webkit-line-clamp:2;overflow:hidden;min-height:2.62em;
}
.lst.is-split .home--feature .home__tags{margin-top:auto;padding-top:clamp(.5rem,.85vw,.65rem);min-height:1.9rem}
.split__list{min-width:0}
.split__map{display:none}
.lst.is-split .split__map{
  display:block;position:sticky;
  top:calc(var(--header-h) + .75rem);
  min-width:0;
}
/* --- The map -------------------------------------------------------------- */
.mapv__frame{
  position:relative;
  border:1px solid rgba(120,105,85,.28);
  border-radius:14px;overflow:hidden;
  background:linear-gradient(180deg,#EBE6DC 0%,#F2EEE6 100%);
}
/* The frame keeps the map's own proportions rather than stretching to the
   viewport. Filling a tall column with a landscape map meant cropping the
   sides off — Rye Beach and half the neighbourhood label went with them. */
.lst.is-split .mapv__frame{aspect-ratio:1000/560;height:auto}
.mapv__svg{display:block;width:100%;height:auto}
.m-lake{fill:#CBDCE4}
.m-lake-edge{fill:none;stroke:#9DBCC9;stroke-width:1.6}
.m-river{fill:none;stroke:#9DBCC9;stroke-width:5;stroke-linecap:round}
.m-land{fill:#E6E0D4}
.m-road{fill:none;stroke:#D6CDBB;stroke-width:2.4;stroke-linecap:round}
.m-label{fill:var(--text-muted);font-size:21px;letter-spacing:.06em}
.m-label--water{fill:#6E95A6;font-size:26px;letter-spacing:.2em}
.m-pin{fill:var(--text-dim)}
.m-pin-label{fill:var(--text-body);font-size:19px}
.m-dist{fill:var(--text-dim);font-size:17px}
/* The shaded circle is the convention the booking sites use for a stay whose
   exact address is not published until it is booked: it says "somewhere in
   here", which is the honest claim when the homes are spread across a
   neighbourhood. */
.m-area{cursor:pointer}
.m-area__hit{fill:transparent}
.m-area__halo{
  fill:rgba(17,110,156,.1);stroke:rgba(17,110,156,.3);stroke-width:1.2;
  transition:fill .3s var(--ease);
}
.m-area__pill{
  fill:#fff;stroke:rgba(42,33,24,.18);stroke-width:1;
  filter:drop-shadow(0 2px 5px rgba(42,33,24,.22));
  transition:fill .25s var(--ease),stroke .25s var(--ease);
}
.m-area__text{
  fill:var(--ink);font-size:20px;font-weight:500;text-anchor:middle;
  pointer-events:none;transition:fill .25s var(--ease);
}
.m-area__name{fill:var(--text-body);font-size:18px;text-anchor:middle;pointer-events:none}
.m-area:hover .m-area__pill,.m-area:focus-visible .m-area__pill,.m-area.is-hot .m-area__pill{fill:var(--ink);stroke:var(--ink)}
.m-area:hover .m-area__text,.m-area:focus-visible .m-area__text,.m-area.is-hot .m-area__text{fill:var(--cream)}
.m-area:hover .m-area__halo,.m-area.is-hot .m-area__halo{fill:rgba(17,110,156,.2)}
.m-area[aria-pressed="true"] .m-area__pill{fill:var(--brand);stroke:var(--brand-deep)}
.m-area[aria-pressed="true"] .m-area__text{fill:var(--cream)}
.m-area.is-empty{opacity:.28;pointer-events:none}
.m-area:focus-visible{outline:none}
.m-area:focus-visible .m-area__pill{stroke:var(--ink);stroke-width:2.5}
.mapv__key{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem clamp(1rem,2vw,1.75rem);
  margin:clamp(.7rem,1.2vw,1rem) 0 0;
  font-size:clamp(.75rem,.86vw,.8125rem);line-height:1.5;color:var(--text-soft);
}
/* --- Empty state ---------------------------------------------------------- */
.lst__empty{
  margin:0;padding:clamp(2.5rem,5vw,4.5rem) 0;text-align:center;
  font-size:clamp(1rem,1.2vw,1.125rem);line-height:1.65;color:var(--text-body);
}
.lst__empty b{display:block;margin-bottom:.35rem;font-weight:500;color:var(--ink);font-size:1.15em}
.lst__empty a{color:var(--brand);text-decoration:none;border-bottom:1px solid rgba(17,110,156,.4)}
.lst__empty a:hover{color:var(--brand-deep);border-bottom-color:var(--brand-deep)}
/* --- "Which home for which trip" icons -----------------------------------
   Scoped with a modifier: .know__list is shared with the guide pages, About
   and Contact, and none of those wants an icon column. The paragraph is
   indented to the heading's text so each item keeps one clean text edge. */
.know__list--icons h3{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:start;
  gap:var(--ico-gap);
}
.know__list--icons{--ico-size:clamp(21px,1.7vw,25px);--ico-gap:clamp(.6rem,.95vw,.85rem)}
.know__list--icons h3 > svg{
  width:var(--ico-size);height:auto;
  color:var(--brand);
  margin-top:.12em;
}
.know__list--icons p{margin-left:calc(var(--ico-size) + var(--ico-gap))}
@media (max-width:480px){
.know__list--icons p{margin-left:0}
}
/* --- Comparison table ----------------------------------------------------- */
.cmp{
  background:var(--sand);
  padding:var(--section-y) var(--gutter);
  scroll-margin-top:var(--header-h);
}
.cmp__wrap{margin-top:var(--block-gap);overflow-x:auto;-webkit-overflow-scrolling:touch}
.cmp table{width:100%;min-width:44rem;border-collapse:collapse;font-size:clamp(.8125rem,.98vw,.9375rem)}
.cmp caption{
  caption-side:bottom;padding-top:clamp(.85rem,1.5vw,1.25rem);text-align:left;
  font-size:clamp(.75rem,.88vw,.875rem);line-height:1.55;color:var(--text-soft);max-width:80ch;
}
.cmp th,.cmp td{
  padding:clamp(.6rem,1.05vw,.9rem) clamp(.5rem,.85vw,.85rem);
  text-align:left;vertical-align:top;border-bottom:1px solid rgba(120,105,85,.24);
}
.cmp thead th{font-weight:500;font-size:.8125rem;color:#3E3E42;border-bottom-color:rgba(120,105,85,.45);white-space:nowrap}
.cmp tbody th{font-weight:400;color:var(--ink);min-width:12rem}
.cmp tbody th a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(17,110,156,.4)}
.cmp tbody th a:hover,.cmp tbody th a:focus-visible{color:var(--brand-deep);border-bottom-color:var(--brand-deep)}
.cmp td{color:var(--text-body);font-variant-numeric:tabular-nums}
.cmp td.is-num{white-space:nowrap}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:0}
.cmp tbody tr:hover th,.cmp tbody tr:hover td{background:rgba(255,255,255,.55)}
.cmp .is-no{color:#7E7566}
/* --- Same at every home --------------------------------------------------- */
.same{background:var(--sand-lite);padding:var(--section-y) var(--gutter)}
.same__grid{
  list-style:none;margin:var(--block-gap) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--card-gap);
}
.same__grid li{padding-top:clamp(.8rem,1.3vw,1.05rem);border-top:2px solid rgba(120,105,85,.35)}
.same__grid h3{
  margin:0;font-family:var(--font-serif);font-weight:400;
  font-size:clamp(1rem,1.25vw,1.1875rem);line-height:1.25;color:var(--ink);
}
.same__grid p{margin:.4rem 0 0;font-size:clamp(.8125rem,.95vw,.9375rem);line-height:1.6;color:var(--text-body)}
@media (max-width:1024px){
.lst__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1180px){
.same__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1040px){
.home--feature{grid-template-columns:1fr;gap:clamp(.9rem,2vw,1.4rem)}
.home--feature .home__media{aspect-ratio:3/2}
/* below this the map stops being a useful companion column */
.lst.is-split .split{grid-template-columns:1fr}
.lst.is-split .split__map{position:static;order:-1;margin-bottom:clamp(1rem,2vw,1.5rem)}
.lst.is-split .mapv__frame{height:auto;aspect-ratio:16/10;min-height:0}
.lst.is-split .lst__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
.pill{grid-template-columns:1fr 1fr;row-gap:0;border-radius:20px;padding:.34rem}
.pill .field{border-radius:16px}
.pill .field::before{display:none}
.pill .field:nth-child(n+3){border-top:1px solid var(--line)}
.pill__go{grid-column:1 / -1;margin:.34rem 0 0;width:100%}
}
@media (max-width:560px){
.lst__grid{grid-template-columns:1fr}
.lst.is-split .lst__grid{grid-template-columns:1fr}
.same__grid{grid-template-columns:1fr}
.pill{grid-template-columns:1fr}
.pill .field:nth-child(n+2){border-top:1px solid var(--line)}
.bar{flex-direction:column;align-items:stretch}
.seg{align-self:flex-start}
.quick{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter)}
.quick::-webkit-scrollbar{display:none}
.qf--count{margin-left:0}
}
@media (prefers-reduced-motion:reduce){
.home__media img{transition:none}
.home__cta{transition:opacity .01ms linear;transform:none}
.home__cta svg{transition:none}
}
@media (hover:none){
.home__cta,.home__scrim{display:none}
}