/* Everyday Luxury homepage redesign.
 * Scoped under .haven-homepage-redesign; lengths scale with --u so <html> stays 16px.
 * Generated once from the approved design preview by scripts/homepage-redesign/build_theme.py;
 * this file is now the source of truth and has been edited by hand since (theme isolation block,
 * About stack, see the comments below). Do not regenerate it over the top of those edits. */
.haven-homepage-redesign {--u: calc(clamp(16px, calc(10.4px + .4vw), 24px) / 16);
  --linen:#faf7f1; --linen-2:#f1ebde; --paper:#fffdf9;
  --sand:#c4a078; --sand-deep:#a07f55; --gold-text:#8a6a40; --terra:#b5614a; --sage:#6b8c7a;
  --earth:#1e1a14; --deep:#0f0c08; --ink:#1a1612; --ink-soft:#5a4f43; --rule:#d8cdb8;
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --maxw:calc(2080 * var(--u)); --edge:clamp(calc(20 * var(--u)),3.4vw,calc(96 * var(--u)));
  --ease:cubic-bezier(.16,1,.3,1);
  --sh-1:0 1px 2px rgba(30,26,20,.05),0 calc(12 * var(--u)) calc(32 * var(--u)) -16px rgba(30,26,20,.28);
  --sh-2:0 2px calc(4 * var(--u)) rgba(30,26,20,.06),0 calc(32 * var(--u)) calc(64 * var(--u)) -28px rgba(30,26,20,.42);
  /* the liquid glass label (destination labels and the card location label): pale glass over a dark tint, so white words stay readable on any photo */
  --glass-fill:rgba(250,247,241,.16); --glass-edge:rgba(255,255,255,.28); --glass-blur:calc(10 * var(--u));
  --glass-scrim:rgba(15,12,8,.40); --glass-solid:rgba(30,26,20,.62);}
/* The compact stylesheet gives <main> overflow-x:hidden, which turns <main> into the scroll container
 * that position:sticky pins against, so the About cards never pinned. clip clips the same way without
 * creating a scroll container. */
.haven-homepage-redesign {overflow-x:clip}
:where(.haven-homepage-redesign .hpr-sec) * {box-sizing:border-box}
:where(.haven-homepage-redesign .hpr-sec) [hidden] {display:none!important}
.haven-homepage-redesign .hpr-sec {background:var(--linen);color:var(--ink);font:400 calc(16 * var(--u))/1.65 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
:where(.haven-homepage-redesign .hpr-sec) img {display:block;max-width:100%;height:auto}
:where(.haven-homepage-redesign .hpr-sec) a {color:inherit;text-decoration:none}
:where(.haven-homepage-redesign .hpr-sec) button {font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:where(.haven-homepage-redesign .hpr-sec) ul,
:where(.haven-homepage-redesign .hpr-sec) ol {margin:0;padding:0;list-style:none}
:where(.haven-homepage-redesign .hpr-sec) h1,
.haven-homepage-redesign .hpr-sec h2,
:where(.haven-homepage-redesign .hpr-sec) h3,
:where(.haven-homepage-redesign .hpr-sec) h4,
:where(.haven-homepage-redesign .hpr-sec) p,
:where(.haven-homepage-redesign .hpr-sec) figure,
:where(.haven-homepage-redesign .hpr-sec) blockquote,
:where(.haven-homepage-redesign .hpr-sec) dl,
:where(.haven-homepage-redesign .hpr-sec) dd {margin:0}
:where(.haven-homepage-redesign .hpr-sec) :focus-visible {outline:2px solid var(--ink);outline-offset:calc(3 * var(--u));border-radius:calc(6 * var(--u))}
/* Theme isolation. The theme's site-wide sheets (style.css, foundation, responsive) style bare
 * elements: heading and bold colours, paragraph and list line-height and spacing, a boxed
 * blockquote, link colour and underline on hover. The design depends on none of that, so each
 * property is pinned here. The selectors use :where() for the element part so they weigh the same
 * as the section's own class rules, which come later in this file and win. tests/homepage/
 * check-layout.cjs compares the page with and without the theme sheets and fails on any difference. */
.haven-homepage-redesign .hpr-sec :where(h1,h2,h3,h4,h5,h6,b,strong,em,small,i,blockquote) {color:inherit}
.haven-homepage-redesign .hpr-sec :where(p,li,dd,dt,figcaption,blockquote) {line-height:inherit}
.haven-homepage-redesign .hpr-sec :where(li,dd,dt) {margin:0}
.haven-homepage-redesign .hpr-sec :where(blockquote) {border:0;padding:0;background:none;box-shadow:none;quotes:none}
.haven-homepage-redesign .hpr-sec :where(blockquote)::before,
.haven-homepage-redesign .hpr-sec :where(blockquote)::after {content:none}
.haven-homepage-redesign .hpr-sec :where(a):is(:hover,:focus,:active,:visited) {text-decoration:none}
.haven-homepage-redesign .sr {position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.haven-homepage-redesign .ic {width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.haven-homepage-redesign .ic--fill {fill:currentColor;stroke:none}
.haven-homepage-redesign .hpr-wrap {max-width:var(--maxw);margin-inline:auto;padding-inline:var(--edge)}
.haven-homepage-redesign.js-ready [data-hpr-reveal] {opacity:0;transform:translateY(calc(24 * var(--u)));transition:opacity .9s var(--ease) var(--d,0s),transform .9s var(--ease) var(--d,0s)}
.haven-homepage-redesign.js-ready [data-hpr-reveal].is-in {opacity:1;transform:none}
/* type */
.haven-homepage-redesign .hpr-eyebrow {font:600 calc(12 * var(--u))/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--gold-text);display:flex;align-items:center}
.haven-homepage-redesign .hpr-eyebrow span {display:inline-flex;align-items:center}
.haven-homepage-redesign .hpr-eyebrow span::after {content:"";width:calc(34 * var(--u));height:1px;background:currentColor;margin:0 calc(12 * var(--u));opacity:.7}
.haven-homepage-redesign .hpr-sec h2 {font:500 clamp(calc(40 * var(--u)),5vw,calc(96 * var(--u)))/1.02 var(--serif);letter-spacing:-.022em;text-wrap:balance}
.haven-homepage-redesign .hpr-sec h2 em,
.haven-homepage-redesign .hpr-sec h2 b {font-style:italic;font-weight:500;color:var(--gold-text)}
.haven-homepage-redesign .hpr-sec h2 em.u {display:inline-block}
.haven-homepage-redesign .lead {font-size:clamp(calc(16 * var(--u)),1.2vw,calc(19 * var(--u)));line-height:1.7;color:var(--ink-soft);max-width:54ch}
.haven-homepage-redesign .hpr-link {display:inline-flex;align-items:center;gap:calc(10 * var(--u));min-height:calc(44 * var(--u));font:600 calc(14 * var(--u))/1 var(--sans);letter-spacing:.03em;color:var(--ink);background:linear-gradient(currentColor,currentColor) 0 calc(50% + calc(14 * var(--u)))/0 1px no-repeat;transition:background-size .5s var(--ease)}
.haven-homepage-redesign .hpr-link .ic {font-size:calc(18 * var(--u));transition:transform .5s var(--ease)}
.haven-homepage-redesign .hpr-link:hover {background-size:calc(100% - calc(28 * var(--u))) 1px}
.haven-homepage-redesign .hpr-link:hover .ic {transform:translateX(calc(5 * var(--u)))}
.haven-homepage-redesign .hpr-btn {display:inline-flex;align-items:center;justify-content:center;gap:calc(10 * var(--u));min-height:calc(52 * var(--u));padding:0 calc(28 * var(--u));border-radius:calc(999 * var(--u));background:var(--ink);color:var(--linen);font:600 calc(14.499 * var(--u))/1 var(--sans);letter-spacing:.01em;transition:transform .35s var(--ease),background .3s,color .3s,box-shadow .3s;white-space:nowrap}
.haven-homepage-redesign .hpr-btn .ic {font-size:calc(18 * var(--u));transition:transform .45s var(--ease)}
.haven-homepage-redesign .hpr-btn:hover {background:var(--earth);transform:translateY(-2px)}
.haven-homepage-redesign .hpr-btn:hover .ic {transform:translateX(calc(4 * var(--u)))}
.haven-homepage-redesign .hpr-btn:active {transform:scale(.97)}
.haven-homepage-redesign .hpr-btn--gold {background:var(--sand);color:var(--ink)}
.haven-homepage-redesign .hpr-btn--gold:hover {background:#d3b38c}
.haven-homepage-redesign .hpr-btn--ghost {background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.haven-homepage-redesign .hpr-btn--ghost:hover {background:var(--ink);color:var(--linen)}
.haven-homepage-redesign .hpr-btn--light {background:transparent;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.7)}
.haven-homepage-redesign .hpr-btn--light:hover {background:#fff;color:var(--ink)}
.haven-homepage-redesign .hpr-btn--sm {min-height:calc(44 * var(--u));padding:0 calc(20 * var(--u));font-size:calc(13.501 * var(--u))}
.haven-homepage-redesign .actions {display:flex;flex-wrap:wrap;gap:calc(12 * var(--u));align-items:center}
.haven-homepage-redesign .only-touch {display:none}
/* sections */
.haven-homepage-redesign .hpr-sec {position:relative;padding-block:clamp(calc(72 * var(--u)),8.5vw,calc(168 * var(--u)))}
.haven-homepage-redesign .hpr-sec + .hpr-sec::before {content:"";position:absolute;top:0;left:var(--edge);right:var(--edge);height:1px;background:linear-gradient(90deg,transparent,var(--rule) 14%,var(--rule) 86%,transparent)}
.haven-homepage-redesign .hpr-sec__head {display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(calc(24 * var(--u)),5vw,calc(96 * var(--u)));align-items:end;margin-bottom:clamp(calc(36 * var(--u)),4.5vw,calc(80 * var(--u)))}
.haven-homepage-redesign .hpr-sec__head h2 {margin-top:calc(22 * var(--u))}
.haven-homepage-redesign .hpr-sec__side {display:flex;flex-direction:column;gap:calc(14 * var(--u));align-items:flex-start}
.haven-homepage-redesign .hpr-sec__side p {color:var(--ink-soft);max-width:44ch}
.haven-homepage-redesign .center {text-align:center;display:flex;flex-direction:column;align-items:center}
.haven-homepage-redesign .center .hpr-eyebrow {justify-content:center}
/* header */
/* hero (unchanged from the current site) */
.haven-homepage-redesign .hpr-chip {display:inline-flex;padding:calc(9 * var(--u)) calc(18 * var(--u));border-radius:calc(999 * var(--u));background:rgba(250,247,241,.14);border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(calc(10 * var(--u)));font:600 calc(12 * var(--u))/1 var(--sans);letter-spacing:.18em;text-transform:uppercase}
/* 01 signature stays: the real property card (card.css) in a rotating grid */
.haven-homepage-redesign .sel {display:inline-flex;align-items:center;gap:calc(10 * var(--u));padding:calc(9 * var(--u)) calc(16 * var(--u));border-radius:calc(999 * var(--u));background:var(--paper);box-shadow:inset 0 0 0 1px var(--rule);font:600 calc(12 * var(--u))/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.haven-homepage-redesign .sel i {width:calc(7 * var(--u));height:calc(7 * var(--u));border-radius:50%;background:var(--sage);box-shadow:0 0 0 0 rgba(107,140,122,.5);animation:ping 2.6s ease-out infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(107,140,122,.5)}70%,100%{box-shadow:0 0 0 calc(9 * var(--u)) rgba(107,140,122,0)}}
.haven-homepage-redesign .sel small {font:500 calc(12 * var(--u))/1 var(--sans);letter-spacing:.02em;text-transform:none;color:var(--ink-soft)}
.haven-homepage-redesign .stays .hsc-featured-properties__grid {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(24 * var(--u));transition:opacity .45s ease,transform .6s var(--ease)}
.haven-homepage-redesign .stays .hsc-featured-properties__grid.is-swapping {opacity:0;transform:translateY(calc(14 * var(--u)))}
.haven-homepage-redesign .stays .hsc-featured-properties__item {min-width:0}
.haven-homepage-redesign .stays .hsc-featured-properties__item .hsc-prop-card {height:100%}
.haven-homepage-redesign .stays__foot {margin-top:clamp(calc(28 * var(--u)),3vw,calc(52 * var(--u)));display:flex;justify-content:center}
.haven-homepage-redesign .stays .hsc-featured-properties__item .hsc-prop-card {transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
/* Gallery arrows on the homepage cards show only while the mouse is over a card (or a keyboard user is inside it), never at rest and never on a touch
   screen: there the dots, swipe, mouse drag and arrow keys (all built into the real card script) move the photos. The arrows stay in the page and
   only fade, so the script and a screen reader still find them. The keyboard rule uses :focus-visible, not :focus-within, so that clicking an arrow
   with the mouse (which leaves it focused) does not keep the arrows showing after the mouse has gone. */
.haven-homepage-redesign .stays .hsc-featured-properties__grid .hsc-prop-card__nav {opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s ease,visibility 0s linear .25s,background .2s ease}
.haven-homepage-redesign .stays .hsc-featured-properties__grid .hsc-prop-card:has(:focus-visible) .hsc-prop-card__nav {opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s}
@media (hover:hover) {
  .haven-homepage-redesign .stays .hsc-featured-properties__grid .hsc-prop-card:hover .hsc-prop-card__nav {opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s}
}
/* A soft dark veil over the top of each card photo (the destination cards have one too), so the white glass label stays readable over a bright sky
   or a white wall: measured on four real photos, white on the bare glass was about 2 to 1. It sits under the label, arrows, dots and price, and takes no clicks. */
.haven-homepage-redesign .stays .hsc-prop-card__media::before {content:"";position:absolute;inset:0 0 auto 0;height:84px;z-index:9;pointer-events:none;background:linear-gradient(180deg,rgba(15,12,8,.34) 0%,rgba(15,12,8,.18) 42%,rgba(15,12,8,0) 100%)}
/* Card look (2026-11-13 trial): the card is the page colour instead of the connector's cream-to-tan gradient, and the name is smaller (the
   connector sets 25px; haven-custom.css raises it to 27px on a laptop with !important, so this needs !important too; that sheet is shared with the
   Live homepage and is left alone). The thin edge and soft shadow stay, so the card still reads as a card. */
.haven-homepage-redesign .stays .hsc-prop-card {background:var(--linen)}
.haven-homepage-redesign .stays .hsc-prop-card .hsc-prop-card__name {font-size:22px!important}
@media (max-width:900px) {
  .haven-homepage-redesign .stays .hsc-prop-card .hsc-prop-card__name {font-size:21px!important}
}
@media (min-width:761px) and (max-width:900px) {
  /* the three narrow tablet columns: the longest names ran to four lines at 22px */
  .haven-homepage-redesign .stays .hsc-prop-card .hsc-prop-card__name {font-size:20px!important}
}
/* The specs line ("1 Bedroom, 1 Bath, 4 Guests") is Cormorant italic, a face with a small x-height, so the connector's 12 to 13px read like 9.
   14px fits one line on a phone and from 932px up, even for the longest line (5 Bedrooms, 4.5 Baths, 16 Guests). Between 761 and 931px the three
   columns are only 186 to 239px wide (an iPad held upright) and the line already wrapped there at 13px, so the gap shrinks to 6px, the tracking to
   .02em and the size grows with the column (12px at 800px, 14px from 879px). Under about 800px the very longest lines can still take a second line.
   The connector sets the size, tracking and gap without !important, so plain rules win. */
.haven-homepage-redesign .stays .hsc-prop-card__specs {font-size:14px}
@media (min-width:761px) and (max-width:931px) {
  .haven-homepage-redesign .stays .hsc-prop-card__specs {font-size:clamp(12px,calc(2.48vw - 7.87px),14px);letter-spacing:.02em;gap:6px}
}
.haven-homepage-redesign .stays .hsc-featured-properties__grid .hsc-prop-card__media {touch-action:pan-y;cursor:grab}
/* the card has no booking buttons now, so the whole body is the link (same stretched-link pattern the connector uses on search cards) */
.haven-homepage-redesign .stays .hsc-prop-card .hsc-prop-card__body {position:relative}
.haven-homepage-redesign .stays .hsc-prop-card .hsc-prop-card__name .hsc-prop-link::after {content:"";position:absolute;inset:0;z-index:1}
.haven-homepage-redesign .stays .hsc-prop-card .hsc-prop-card__name .hsc-prop-link {transition:color .3s}
@media (hover:hover) {
  .haven-homepage-redesign .stays .hsc-featured-properties__item .hsc-prop-card:hover {transform:translateY(-6px);box-shadow:var(--sh-2)}
  /* !important on purpose: the connector card sheet sets .hsc-prop-card .hsc-prop-link {text-decoration:none !important}, which kept this underline from ever showing */
  .haven-homepage-redesign .stays .hsc-prop-card:hover .hsc-prop-card__name .hsc-prop-link {text-decoration:underline!important;text-decoration-thickness:1px!important;text-underline-offset:5px}
}
/* 02 meaning: back to the previous card size (aspect 4 / 5.4, five across) */
.haven-homepage-redesign .moments {display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:calc(22 * var(--u))}
.haven-homepage-redesign .moment {position:relative;aspect-ratio:4/5.4;border-radius:calc(18 * var(--u));overflow:hidden;color:#fff;isolation:isolate;box-shadow:var(--sh-1);outline-offset:calc(4 * var(--u));cursor:pointer;transition:transform .55s var(--ease),box-shadow .55s var(--ease)}
.haven-homepage-redesign .moment:hover,
.haven-homepage-redesign .moment:focus-visible {transform:translateY(-4px);box-shadow:var(--sh-2)}
.haven-homepage-redesign .moment img {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;filter:saturate(.94) brightness(.94);transition:transform 1.4s var(--ease),filter .55s}
.haven-homepage-redesign .moment:hover img,
.haven-homepage-redesign .moment:focus-visible img,
.haven-homepage-redesign .moment.is-open img {transform:scale(1.06);filter:saturate(.95) brightness(.74)}
.haven-homepage-redesign .moment__veil {position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 52%,rgba(0,0,0,.55) 86%,rgba(0,0,0,.72) 100%);transition:background .55s}
.haven-homepage-redesign .moment:hover .moment__veil,
.haven-homepage-redesign .moment:focus-visible .moment__veil,
.haven-homepage-redesign .moment.is-open .moment__veil {background:linear-gradient(180deg,rgba(15,12,8,.2) 0%,rgba(15,12,8,.6) 45%,rgba(15,12,8,.92) 100%)}
.haven-homepage-redesign .line {position:absolute;background:var(--sand);z-index:1;pointer-events:none;transition:transform .65s var(--ease)}
.haven-homepage-redesign .line--t,
.haven-homepage-redesign .line--b {height:1px;left:calc(14 * var(--u));right:calc(14 * var(--u));transform:scaleX(0)}
.haven-homepage-redesign .line--l,
.haven-homepage-redesign .line--r {width:1px;top:calc(14 * var(--u));bottom:calc(14 * var(--u));transform:scaleY(0)}
.haven-homepage-redesign .line--t {top:calc(14 * var(--u));transform-origin:left}
.haven-homepage-redesign .line--r {right:calc(14 * var(--u));transform-origin:top;transition-delay:.2s}
.haven-homepage-redesign .line--b {bottom:calc(14 * var(--u));transform-origin:right;transition-delay:.4s}
.haven-homepage-redesign .line--l {left:calc(14 * var(--u));transform-origin:bottom;transition-delay:.6s}
.haven-homepage-redesign .moment:hover .line,
.haven-homepage-redesign .moment:focus-visible .line,
.haven-homepage-redesign .moment.is-open .line,
.haven-homepage-redesign .dcard:hover .line,
.haven-homepage-redesign .dcard:focus-visible .line {transform:none}
.haven-homepage-redesign .moment__txt {position:absolute;left:calc(22 * var(--u));right:calc(22 * var(--u));bottom:calc(24 * var(--u));display:flex;flex-direction:column;gap:calc(8 * var(--u))}
.haven-homepage-redesign .moment__num {font:600 calc(12 * var(--u))/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:#e6cfa9}
.haven-homepage-redesign .moment h3 {font:500 clamp(calc(22 * var(--u)),1.7vw,calc(32 * var(--u)))/1.08 var(--serif);letter-spacing:-.012em}
.haven-homepage-redesign .reveal-rows {display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .8s var(--ease) .1s,opacity .6s ease .1s}
.haven-homepage-redesign .reveal-rows > * {overflow:hidden;min-height:0}
.haven-homepage-redesign .moment:hover .reveal-rows,
.haven-homepage-redesign .moment:focus-visible .reveal-rows,
.haven-homepage-redesign .moment.is-open .reveal-rows,
.haven-homepage-redesign .dcard:hover .reveal-rows,
.haven-homepage-redesign .dcard:focus-visible .reveal-rows {grid-template-rows:1fr;opacity:1}
.haven-homepage-redesign .moment p {font-size:calc(13.501 * var(--u));line-height:1.55;color:rgba(255,255,255,.9)}
/* 03 destinations rail: starts at the left edge */
.haven-homepage-redesign .rail-ctl {display:flex;align-items:center;gap:calc(16 * var(--u));width:100%;max-width:calc(440 * var(--u));margin-top:calc(6 * var(--u))}
.haven-homepage-redesign .rail-ctl__btns {display:flex;gap:calc(10 * var(--u))}
.haven-homepage-redesign .rbtn {width:calc(52 * var(--u));height:calc(52 * var(--u));border-radius:50%;display:grid;place-items:center;font-size:calc(20 * var(--u));box-shadow:inset 0 0 0 1px var(--ink);transition:background .35s,color .35s,transform .35s var(--ease),opacity .3s;flex:none}
.haven-homepage-redesign .rbtn:hover {background:var(--ink);color:var(--linen)}
.haven-homepage-redesign .rbtn:active {transform:scale(.94)}
.haven-homepage-redesign .rbtn[aria-disabled="true"] {opacity:.32;pointer-events:none}
.haven-homepage-redesign .rail-ctl__prog {flex:1;height:2px;background:var(--rule);border-radius:2px;overflow:hidden}
.haven-homepage-redesign .rail-ctl__prog i {display:block;height:100%;background:var(--ink);transform-origin:left;transform:scaleX(.2);transition:transform .25s ease-out}
.haven-homepage-redesign .rail-ctl__count {font:500 calc(18 * var(--u))/1 var(--serif);letter-spacing:.04em;min-width:calc(58 * var(--u));text-align:right}
.haven-homepage-redesign .rail {overflow-x:auto;scroll-snap-type:x proximity;padding:calc(18 * var(--u)) var(--edge) calc(34 * var(--u));scroll-padding-inline:var(--edge);scrollbar-width:none;cursor:grab;overscroll-behavior-x:contain}
.haven-homepage-redesign .rail::-webkit-scrollbar {display:none}
.haven-homepage-redesign .rail.is-drag {scroll-snap-type:none;cursor:grabbing;scroll-behavior:auto}
.haven-homepage-redesign .rail.is-drag a {pointer-events:none}
.haven-homepage-redesign .rail ul {display:flex;gap:clamp(calc(14 * var(--u)),1.5vw,calc(28 * var(--u)));width:max-content}
.haven-homepage-redesign .rail li {flex:0 0 clamp(calc(272 * var(--u)),21vw,calc(520 * var(--u)));scroll-snap-align:start}
.haven-homepage-redesign .dcard {position:relative;display:block;width:100%;aspect-ratio:3/4.1;border-radius:calc(24 * var(--u));overflow:hidden;color:#fff;isolation:isolate;box-shadow:var(--sh-1);-webkit-user-drag:none}
.haven-homepage-redesign .dcard img {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1.6s var(--ease);-webkit-user-drag:none;user-select:none}
.haven-homepage-redesign .dcard:hover img,
.haven-homepage-redesign .dcard:focus-visible img {transform:scale(1.08)}
.haven-homepage-redesign .dcard__veil {position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(15,12,8,.28) 0%,rgba(15,12,8,0) 28%,rgba(15,12,8,.5) 58%,rgba(15,12,8,.9) 100%)}
.haven-homepage-redesign .dcard__num {position:absolute;top:calc(22 * var(--u));left:calc(24 * var(--u));font:500 calc(15 * var(--u))/1 var(--serif);letter-spacing:.14em;opacity:.9}
.haven-homepage-redesign .dcard__eye {position:absolute;top:calc(18 * var(--u));right:calc(18 * var(--u));padding:calc(7 * var(--u)) calc(12 * var(--u));border-radius:calc(999 * var(--u));background:linear-gradient(var(--glass-scrim),var(--glass-scrim)),var(--glass-fill);border:1px solid var(--glass-edge);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));font:600 calc(12 * var(--u))/1 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.haven-homepage-redesign .dcard__txt {position:absolute;left:calc(26 * var(--u));right:calc(26 * var(--u));bottom:calc(28 * var(--u));display:flex;flex-direction:column;gap:calc(10 * var(--u))}
.haven-homepage-redesign .dcard h3 {font:500 clamp(calc(30 * var(--u)),2.4vw,calc(46 * var(--u)))/1.02 var(--serif);letter-spacing:-.018em}
.haven-homepage-redesign .dcard__kw {font:600 calc(12 * var(--u))/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#e6cfa9}
.haven-homepage-redesign .dcard .reveal-rows p {font-size:calc(14 * var(--u));line-height:1.6;color:rgba(255,255,255,.88);margin-bottom:calc(14 * var(--u))}
.haven-homepage-redesign .dcard__cta {display:inline-flex;align-items:center;gap:calc(8 * var(--u));font:600 calc(13 * var(--u))/1 var(--sans);letter-spacing:.06em;text-transform:uppercase}
.haven-homepage-redesign .dcard__cta .ic {font-size:calc(16 * var(--u))}
.haven-homepage-redesign .dest__foot {margin-top:calc(6 * var(--u));display:flex;justify-content:flex-end}
/* variants shared */
.haven-homepage-redesign .photo {overflow:hidden;background:var(--linen-2)}
.haven-homepage-redesign .photo img {width:100%;height:100%;object-fit:cover}
.haven-homepage-redesign .cap {font-size:calc(12.499 * var(--u));line-height:1.5;color:var(--ink-soft)}
.haven-homepage-redesign .stars {display:flex;gap:calc(4 * var(--u));color:var(--sand-deep);font-size:calc(19 * var(--u))}
.haven-homepage-redesign .paper {background:var(--paper);border:1px solid rgba(216,205,184,.85);box-shadow:var(--sh-1)}
.haven-homepage-redesign .founders {display:flex;align-items:center;gap:calc(12 * var(--u));font-size:calc(13 * var(--u));color:var(--ink-soft)}
.haven-homepage-redesign .founders i {display:inline-grid;place-items:center;width:calc(38 * var(--u));height:calc(38 * var(--u));border-radius:50%;background:var(--ink);color:var(--sand);font:500 calc(15 * var(--u))/1 var(--serif);font-style:normal;letter-spacing:.04em}
.haven-homepage-redesign .founders i + i {margin-left:-8px;box-shadow:0 0 0 2px var(--linen)}
.haven-homepage-redesign .measures {display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.haven-homepage-redesign .measure {padding:calc(4 * var(--u)) clamp(calc(10 * var(--u)),1.4vw,calc(24 * var(--u)));border-left:1px solid rgba(255,255,255,.26)}
.haven-homepage-redesign .measure:first-child {padding-left:0;border-left:0}
.haven-homepage-redesign .measure b {display:block;font:500 clamp(calc(34 * var(--u)),3.4vw,calc(58 * var(--u)))/1 var(--serif);letter-spacing:-.02em;font-style:normal;color:#fff;font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"lnum" 1}
.haven-homepage-redesign .measure span {display:block;margin-top:calc(6 * var(--u));font:600 calc(12 * var(--u))/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:#e6cfa9}
.haven-homepage-redesign .measures--ink .measure {border-left-color:var(--rule)}
.haven-homepage-redesign .measures--ink .measure b {color:var(--ink)}
.haven-homepage-redesign .measures--ink .measure span {color:var(--gold-text)}
/* 04 guest edit: review bento. Six reviews a day; the small cards are image cards that bloom on hover */
.haven-homepage-redesign .gA {display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(calc(14 * var(--u)),1.4vw,calc(26 * var(--u)))}
.haven-homepage-redesign .gA__feat {grid-column:1/9;grid-row:1/3;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);border-radius:calc(30 * var(--u));overflow:hidden;min-height:clamp(calc(440 * var(--u)),36vw,calc(760 * var(--u)))}
.haven-homepage-redesign .gA__photo {position:relative;background:var(--linen-2);overflow:hidden}
.haven-homepage-redesign .gA__photo img {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .45s ease,transform 1.8s var(--ease)}
.haven-homepage-redesign .gA__feat .gA__photo.is-out img {opacity:0;transform:scale(1.1)}
.haven-homepage-redesign .gA__tag {position:absolute;left:calc(14 * var(--u));bottom:calc(14 * var(--u));right:calc(14 * var(--u));padding:calc(12 * var(--u)) calc(16 * var(--u));border-radius:calc(16 * var(--u));background:rgba(250,247,241,.8);backdrop-filter:blur(calc(14 * var(--u))) saturate(160%);-webkit-backdrop-filter:blur(calc(14 * var(--u))) saturate(160%);border:1px solid rgba(255,255,255,.5);display:flex;justify-content:space-between;align-items:center;gap:calc(10 * var(--u));transition:transform .7s var(--ease)}
.haven-homepage-redesign .gA__tag .hpr-link {white-space:nowrap;flex:none}
.haven-homepage-redesign .gA__tag b {font:500 calc(20 * var(--u))/1.1 var(--serif);letter-spacing:-.01em}
.haven-homepage-redesign .gA__tag small {display:block;font:600 calc(12 * var(--u))/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-top:calc(4 * var(--u))}
.haven-homepage-redesign .gA__copy {padding:clamp(calc(24 * var(--u)),3.2vw,calc(64 * var(--u)));display:flex;flex-direction:column;justify-content:center;gap:clamp(calc(16 * var(--u)),1.8vw,calc(28 * var(--u)));transition:opacity .3s ease,transform .5s var(--ease)}
.haven-homepage-redesign .gA__copy.is-out {opacity:0;transform:translateY(calc(10 * var(--u)))}
.haven-homepage-redesign .gA__mark {font:500 calc(96 * var(--u))/.5 var(--serif);color:var(--sand);height:calc(40 * var(--u));display:block}
.haven-homepage-redesign .gA__quote {font:italic 500 clamp(calc(26 * var(--u)),2.6vw,calc(46 * var(--u)))/1.18 var(--serif);letter-spacing:-.012em;text-wrap:pretty}
.haven-homepage-redesign .gA__who {display:flex;flex-direction:column;gap:2px;font-size:calc(14 * var(--u));color:var(--ink-soft)}
.haven-homepage-redesign .gA__who strong {color:var(--ink);font-weight:700;font-size:calc(15 * var(--u))}
.haven-homepage-redesign .gA__sm {--pad:clamp(calc(18 * var(--u)),1.6vw,calc(30 * var(--u)));position:relative;overflow:hidden;isolation:isolate;grid-column:span 4;border-radius:calc(26 * var(--u));padding:var(--pad);display:flex;flex-direction:column;gap:calc(14 * var(--u));text-align:left;cursor:pointer;transition:transform .6s var(--ease),box-shadow .6s var(--ease),border-color .5s,color .5s,opacity .45s ease}
.haven-homepage-redesign .gA.is-swapping .gA__sm {opacity:0;transform:translateY(calc(12 * var(--u)))}
.haven-homepage-redesign .gA__sm:nth-of-type(1) {grid-column:9/13;grid-row:1}
.haven-homepage-redesign .gA__sm:nth-of-type(2) {grid-column:9/13;grid-row:2}
.haven-homepage-redesign .gA__bg {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;clip-path:circle(0% at calc(var(--pad) + calc(26 * var(--u))) calc(var(--pad) + calc(26 * var(--u))));transform:scale(1.2);transition:clip-path 1.05s var(--ease),transform 1.8s var(--ease)}
.haven-homepage-redesign .gA__veil {position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(15,12,8,.34) 0%,rgba(15,12,8,.62) 52%,rgba(15,12,8,.9) 100%);opacity:0;transition:opacity .6s ease}
.haven-homepage-redesign .gA__top {display:flex;align-items:center;gap:calc(12 * var(--u));padding-right:calc(46 * var(--u))}
.haven-homepage-redesign .gA__top img {width:calc(52 * var(--u));height:calc(52 * var(--u));border-radius:calc(14 * var(--u));object-fit:cover;flex:none;transition:box-shadow .5s}
.haven-homepage-redesign .gA__top b {display:block;font:500 calc(19 * var(--u))/1.1 var(--serif);letter-spacing:-.005em}
.haven-homepage-redesign .gA__top small {display:block;font:600 calc(12 * var(--u))/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin-top:calc(3 * var(--u));transition:color .5s}
.haven-homepage-redesign .gA__go {position:absolute;top:var(--pad);right:var(--pad);width:calc(36 * var(--u));height:calc(36 * var(--u));border-radius:50%;display:grid;place-items:center;background:rgba(250,247,241,.92);color:var(--ink);font-size:calc(16 * var(--u));opacity:0;transform:scale(.6) rotate(-45deg);transition:opacity .4s ease,transform .7s var(--ease)}
.haven-homepage-redesign .gA__sm .stars {font-size:calc(14 * var(--u));transition:color .5s}
.haven-homepage-redesign .gA__sm-q {font:italic 500 clamp(calc(19 * var(--u)),1.45vw,calc(26 * var(--u)))/1.3 var(--serif);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.haven-homepage-redesign .gA__sm-who {margin-top:auto;font-size:calc(13 * var(--u));color:var(--ink-soft);transition:color .5s}
.haven-homepage-redesign .gA__sm-who b {color:var(--ink);transition:color .5s}
.haven-homepage-redesign .gA__sm:focus-visible {transform:translateY(-5px);box-shadow:var(--sh-2);border-color:transparent;color:#fff}
.haven-homepage-redesign .gA__sm:focus-visible .gA__bg {clip-path:circle(150% at calc(var(--pad) + calc(26 * var(--u))) calc(var(--pad) + calc(26 * var(--u))));transform:scale(1)}
.haven-homepage-redesign .gA__sm:focus-visible .gA__veil {opacity:1}
.haven-homepage-redesign .gA__sm:focus-visible .gA__top small,
.haven-homepage-redesign .gA__sm:focus-visible .stars {color:#e6cfa9}
.haven-homepage-redesign .gA__sm:focus-visible .gA__sm-who,
.haven-homepage-redesign .gA__sm:focus-visible .gA__sm-who b {color:#fff}
.haven-homepage-redesign .gA__sm:focus-visible .gA__top img {box-shadow:0 0 0 2px rgba(255,255,255,.7)}
.haven-homepage-redesign .gA__sm:focus-visible .gA__go {opacity:1;transform:none}
@media (hover:hover) {
  .haven-homepage-redesign .gA__feat:hover .gA__photo img {transform:scale(1.05)}
  .haven-homepage-redesign .gA__feat:hover .gA__tag {transform:translateY(-4px)}
  .haven-homepage-redesign .gA__sm:hover {transform:translateY(-5px);box-shadow:var(--sh-2);border-color:transparent;color:#fff}
  .haven-homepage-redesign .gA__sm:hover .gA__bg {clip-path:circle(150% at calc(var(--pad) + calc(26 * var(--u))) calc(var(--pad) + calc(26 * var(--u))));transform:scale(1)}
  .haven-homepage-redesign .gA__sm:hover .gA__veil {opacity:1}
  .haven-homepage-redesign .gA__sm:hover .gA__top small,
  .haven-homepage-redesign .gA__sm:hover .stars {color:#e6cfa9}
  .haven-homepage-redesign .gA__sm:hover .gA__sm-who,
  .haven-homepage-redesign .gA__sm:hover .gA__sm-who b {color:#fff}
  .haven-homepage-redesign .gA__sm:hover .gA__top img {box-shadow:0 0 0 2px rgba(255,255,255,.7)}
  .haven-homepage-redesign .gA__sm:hover .gA__go {opacity:1;transform:none}
}
.haven-homepage-redesign .gA__hint {margin-top:clamp(calc(18 * var(--u)),2vw,calc(30 * var(--u)));font-size:calc(13 * var(--u));color:var(--ink-soft)}
/* 05 concierge A: request composer */
.haven-homepage-redesign .cpA {display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(calc(28 * var(--u)),5vw,calc(110 * var(--u)));align-items:stretch}
.haven-homepage-redesign .cpA__photo {position:relative;border-radius:calc(32 * var(--u));overflow:hidden;min-height:clamp(calc(420 * var(--u)),44vw,calc(860 * var(--u)));box-shadow:var(--sh-2);background:var(--linen-2)}
.haven-homepage-redesign .cpA__photo img {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity .9s ease,transform 1.8s var(--ease)}
.haven-homepage-redesign .cpA__photo img.is-active {opacity:1;transform:none}
.haven-homepage-redesign .cpA__photo .cap {position:absolute;left:calc(14 * var(--u));bottom:calc(14 * var(--u));padding:calc(9 * var(--u)) calc(14 * var(--u));border-radius:calc(999 * var(--u));background:rgba(250,247,241,.88);backdrop-filter:blur(calc(10 * var(--u)));color:var(--ink)}
.haven-homepage-redesign .cpA__copy {display:flex;flex-direction:column;justify-content:center;gap:clamp(calc(18 * var(--u)),2vw,calc(30 * var(--u)))}
.haven-homepage-redesign .cpA__copy h2 {margin-top:calc(4 * var(--u))}
.haven-homepage-redesign .composer {border-radius:calc(30 * var(--u));padding:clamp(calc(20 * var(--u)),2.4vw,calc(40 * var(--u)));display:flex;flex-direction:column;gap:calc(16 * var(--u))}
.haven-homepage-redesign .composer label {font:600 calc(12 * var(--u))/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-text)}
.haven-homepage-redesign .chips {display:flex;flex-wrap:wrap;gap:calc(8 * var(--u))}
.haven-homepage-redesign .pill {min-height:calc(44 * var(--u));padding:0 calc(18 * var(--u));border-radius:calc(999 * var(--u));box-shadow:inset 0 0 0 1px var(--rule);background:var(--linen);font:600 calc(13.501 * var(--u))/1 var(--sans);transition:background .3s,color .3s,box-shadow .3s,transform .3s var(--ease)}
.haven-homepage-redesign .pill:hover {box-shadow:inset 0 0 0 1px var(--ink)}
.haven-homepage-redesign .pill:active {transform:scale(.96)}
.haven-homepage-redesign .pill[aria-pressed="true"] {background:var(--ink);color:var(--linen);box-shadow:none}
.haven-homepage-redesign .composer textarea {width:100%;min-height:clamp(calc(120 * var(--u)),9vw,calc(190 * var(--u)));resize:vertical;padding:calc(18 * var(--u)) calc(20 * var(--u));border-radius:calc(18 * var(--u));border:1px solid var(--rule);background:var(--linen);font:400 calc(16 * var(--u))/1.6 var(--sans);color:var(--ink);transition:border-color .3s,box-shadow .3s}
.haven-homepage-redesign .composer textarea::placeholder {color:#7a6f61}
.haven-homepage-redesign .composer textarea:focus {outline:none;border-color:var(--ink);box-shadow:0 0 0 calc(3 * var(--u)) rgba(196,160,120,.35)}
.haven-homepage-redesign .composer__row {display:flex;flex-wrap:wrap;align-items:center;gap:calc(14 * var(--u)) calc(20 * var(--u))}
.haven-homepage-redesign .composer__note {font-size:calc(13 * var(--u));color:var(--ink-soft);max-width:34ch}
/* 06 homeowners A: revenue preview invite */
.haven-homepage-redesign .hwA {display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(calc(14 * var(--u)),1.4vw,calc(26 * var(--u)))}
.haven-homepage-redesign .hwA__photo {position:relative;border-radius:calc(34 * var(--u));overflow:hidden;min-height:clamp(calc(480 * var(--u)),46vw,calc(900 * var(--u)));isolation:isolate;color:#fff;box-shadow:var(--sh-2)}
.haven-homepage-redesign .hwA__photo img {position:absolute;inset:-6% 0;width:100%;height:112%;object-fit:cover;z-index:-2;will-change:transform}
.haven-homepage-redesign .hwA__photo::before {content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(15,12,8,.05) 20%,rgba(15,12,8,.78) 100%)}
.haven-homepage-redesign .hwA__over {position:absolute;left:clamp(calc(22 * var(--u)),3vw,calc(56 * var(--u)));right:clamp(calc(22 * var(--u)),3vw,calc(56 * var(--u)));bottom:clamp(calc(22 * var(--u)),3vw,calc(56 * var(--u)));display:flex;flex-direction:column;gap:calc(18 * var(--u))}
.haven-homepage-redesign .hwA__over .hpr-chip {align-self:flex-start}
.haven-homepage-redesign .hwA__over h2 {color:#fff;font-size:clamp(calc(36 * var(--u)),4.4vw,calc(84 * var(--u)))}
.haven-homepage-redesign .hwA__over h2 b {color:#e6cfa9}
.haven-homepage-redesign .hwA__sub {font-size:calc(15.501 * var(--u));line-height:1.65;color:rgba(255,255,255,.9);max-width:54ch}
.haven-homepage-redesign .hwA__panel {border-radius:calc(34 * var(--u));padding:clamp(calc(24 * var(--u)),3.2vw,calc(64 * var(--u)));display:flex;flex-direction:column;justify-content:center;gap:clamp(calc(16 * var(--u)),1.8vw,calc(28 * var(--u)))}
.haven-homepage-redesign .hwA__panel .tag {font:600 calc(12 * var(--u))/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-text)}
.haven-homepage-redesign .hwA__panel h3 {font:500 clamp(calc(30 * var(--u)),3.2vw,calc(60 * var(--u)))/1.04 var(--serif);letter-spacing:-.018em;text-wrap:balance}
.haven-homepage-redesign .hwA__panel p {color:var(--ink-soft);font-size:calc(15.501 * var(--u));line-height:1.65;max-width:46ch}
.haven-homepage-redesign .addr {display:flex;flex-direction:column;gap:calc(12 * var(--u))}
.haven-homepage-redesign .addr input {width:100%;min-height:calc(58 * var(--u));padding:0 calc(22 * var(--u));border-radius:calc(999 * var(--u));border:1px solid var(--rule);background:var(--linen);font:400 calc(16 * var(--u))/1 var(--sans);color:var(--ink);transition:border-color .3s,box-shadow .3s}
.haven-homepage-redesign .addr input::placeholder {color:#7a6f61}
.haven-homepage-redesign .addr input:focus {outline:none;border-color:var(--ink);box-shadow:0 0 0 calc(3 * var(--u)) rgba(196,160,120,.35)}
.haven-homepage-redesign .addr .hpr-btn {width:100%}
/* 07 about: stacking principle cards. Image curtain on entry, scroll-linked parallax, and the stack recedes as the next card lands */
.haven-homepage-redesign .abA {display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(calc(28 * var(--u)),6vw,calc(130 * var(--u)));align-items:start}
.haven-homepage-redesign .abA__copy {top:calc(112 * var(--u));display:flex;flex-direction:column;gap:clamp(calc(16 * var(--u)),1.8vw,calc(26 * var(--u)))}
.haven-homepage-redesign .abA__copy h2 {margin-top:calc(4 * var(--u));font-size:clamp(calc(38 * var(--u)),4.4vw,calc(84 * var(--u)))}
.haven-homepage-redesign .abA__copy p {color:var(--ink-soft);max-width:52ch}
.haven-homepage-redesign .abA__prog {display:flex;align-items:center;gap:calc(14 * var(--u));margin-top:calc(6 * var(--u));font:500 calc(20 * var(--u))/1 var(--serif);letter-spacing:.06em;color:var(--ink-soft);font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1}
.haven-homepage-redesign .abA__prog span:first-child {color:var(--ink);min-width:1.4em}
.haven-homepage-redesign .abA__prog i {display:block;position:relative;flex:0 0 clamp(calc(70 * var(--u)),9vw,calc(170 * var(--u)));height:2px;background:var(--rule);overflow:hidden}
.haven-homepage-redesign .abA__prog b {position:absolute;inset:0;background:var(--ink);transform-origin:left;transform:scaleX(.2);transition:transform .5s var(--ease)}
.haven-homepage-redesign .by {font:600 calc(12 * var(--u))/1.6 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-text)}
.haven-homepage-redesign .stack {display:flex;flex-direction:column;gap:calc(28 * var(--u));padding-bottom:6vh}
.haven-homepage-redesign .pcard {--c:0;top:calc(calc(104 * var(--u)) + var(--i) * calc(20 * var(--u)));height:clamp(calc(340 * var(--u)),30vw,calc(620 * var(--u)));border-radius:calc(32 * var(--u));overflow:hidden;color:#fff;isolation:isolate;box-shadow:var(--sh-2);transform:scale(calc(1 - var(--c) * .05));transform-origin:50% 0;will-change:transform}
.haven-homepage-redesign .pcard::before {content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(15,12,8,.12) 0%,rgba(15,12,8,.25) 40%,rgba(15,12,8,.85) 100%)}
.haven-homepage-redesign .pcard::after {content:"";position:absolute;inset:0;z-index:3;background:var(--deep);opacity:calc(var(--c) * .55);pointer-events:none}
.haven-homepage-redesign .pcard__media {position:absolute;inset:-9% 0;z-index:-2;transform:translate3d(0,var(--py,0px),0);will-change:transform}
.haven-homepage-redesign .pcard__media img {width:100%;height:100%;object-fit:cover;transform:scale(1.14);transition:transform 2.8s var(--ease)}
.haven-homepage-redesign .pcard.is-in .pcard__media img {transform:scale(1)}
.haven-homepage-redesign .pcard__n {position:absolute;top:clamp(calc(20 * var(--u)),2.4vw,calc(40 * var(--u)));left:clamp(calc(22 * var(--u)),2.6vw,calc(44 * var(--u)));font:italic 500 clamp(calc(22 * var(--u)),2vw,calc(34 * var(--u)))/1 var(--serif);color:#e6cfa9}
.haven-homepage-redesign .pcard__txt {position:absolute;left:clamp(calc(22 * var(--u)),2.6vw,calc(44 * var(--u)));right:clamp(calc(22 * var(--u)),2.6vw,calc(44 * var(--u)));bottom:clamp(calc(22 * var(--u)),2.6vw,calc(44 * var(--u)));display:flex;flex-direction:column;gap:calc(10 * var(--u))}
.haven-homepage-redesign .pcard h3 {font:500 clamp(calc(30 * var(--u)),3.4vw,calc(64 * var(--u)))/1.02 var(--serif);letter-spacing:-.018em}
.haven-homepage-redesign .pcard p {font-size:calc(15 * var(--u));line-height:1.55;color:rgba(255,255,255,.9);max-width:44ch}
/* Pinning needs overflow-x:clip on <main> (above). A browser without it (Safari before 16) keeps the
 * compact stylesheet's overflow-x:hidden, where sticky would be inert, so there the cards stay a plain
 * list and the script (which looks at the computed position) leaves them alone. */
@supports (overflow-x:clip) {
  .haven-homepage-redesign .abA__copy {position:sticky}
  .haven-homepage-redesign .pcard {position:sticky}
}
.haven-homepage-redesign.js-ready .pcard[data-hpr-curtain] .pcard__media {clip-path:inset(100% 0 0 0);transition:clip-path 1.5s var(--ease)}
.haven-homepage-redesign.js-ready .pcard[data-hpr-curtain].is-in .pcard__media {clip-path:inset(0 0 0 0)}
.haven-homepage-redesign .pcard__n,
.haven-homepage-redesign .pcard h3,
.haven-homepage-redesign .pcard p {transition:opacity 1s var(--ease),transform 1.1s var(--ease)}
.haven-homepage-redesign.js-ready .pcard[data-hpr-curtain] .pcard__n {opacity:0;transform:translateY(calc(12 * var(--u)))}
.haven-homepage-redesign.js-ready .pcard[data-hpr-curtain] h3 {opacity:0;transform:translateY(calc(28 * var(--u)))}
.haven-homepage-redesign.js-ready .pcard[data-hpr-curtain] p {opacity:0;transform:translateY(calc(20 * var(--u)))}
.haven-homepage-redesign.js-ready .pcard[data-hpr-curtain].is-in .pcard__n {opacity:1;transform:none;transition-delay:.5s}
.haven-homepage-redesign.js-ready .pcard[data-hpr-curtain].is-in h3 {opacity:1;transform:none;transition-delay:.65s}
.haven-homepage-redesign.js-ready .pcard[data-hpr-curtain].is-in p {opacity:1;transform:none;transition-delay:.8s}
@media (hover:hover) {
  .haven-homepage-redesign .pcard.is-in:hover .pcard__media img {transform:scale(1.05);transition-duration:1.6s}
}
/* footer */
/* dot nav */
/* small text and hit areas (2026-11-12 review): nothing under 12px, easy-to-hit dots. Scoped here, so the site-wide sheets and the connector are untouched. */
/* The location label on a card is the same liquid white glass pill as the destination labels (.dcard__eye: Coastal Icon and the like), still 12px,
   built from the same --glass tokens. The dark tint under the pale glass is what makes the white words pass 4.5 to 1 on any photo (measured on the
   pixels in tests/homepage/check-cards.cjs); the soft dark text shadow adds a little more over a bright sky or a white wall. haven-custom.css paints the old label (terracotta
   fill, cream text, its own font) with !important, so the fill, text colour and font are !important here too. */
.haven-homepage-redesign .stays .hsc-prop-card__location-badge {top:14px;left:14px;padding:7px 12px;border-radius:999px;background:linear-gradient(var(--glass-scrim),var(--glass-scrim)),var(--glass-fill)!important;border:1px solid var(--glass-edge);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));color:#fff!important;font:600 12px/1 var(--sans)!important;letter-spacing:.14em;text-transform:uppercase;text-shadow:0 1px 3px rgba(15,12,8,.4)}
.haven-homepage-redesign .haven-hp-dotnav__dot::before {content:"";position:absolute;inset:-6px -19px} /* 6px dot, 44px wide and the full 18px step tall */
.haven-homepage-redesign .haven-hp-dotnav__dot::after {font-size:12px}
@media (pointer:coarse) {
  /* card photo dots: the visible dot stays where it is, the button grows to 44px tall (the row moves down by the 10px it gained above) */
  .haven-homepage-redesign .stays .hsc-prop-card__dots {bottom:26px}
  .haven-homepage-redesign .stays .hsc-prop-card__media button.hsc-prop-card__dot {height:44px !important;min-height:44px !important;max-height:44px !important}
}
/* review switcher (not part of the design) */
/* responsive */
/* The real card is built in fixed px, so on big screens it is zoomed with the page instead of getting more columns. */
@media (min-width:1700px) {
  .haven-homepage-redesign .stays .hsc-featured-properties__grid {zoom:1.1}
}
@media (min-width:2200px) {
  .haven-homepage-redesign .stays .hsc-featured-properties__grid {zoom:1.25}
}
@media (min-width:3000px) {
  .haven-homepage-redesign .stays .hsc-featured-properties__grid {zoom:1.45}
}
@media (hover:none) {
  .haven-homepage-redesign .moment .reveal-rows,
  .haven-homepage-redesign .dcard .reveal-rows {grid-template-rows:0fr;opacity:0}
  .haven-homepage-redesign .dcard .reveal-rows {grid-template-rows:1fr;opacity:1}
  .haven-homepage-redesign .moment.is-open .reveal-rows {grid-template-rows:1fr;opacity:1}
  .haven-homepage-redesign .only-hover {display:none}
  .haven-homepage-redesign .only-touch {display:inline}
}
@media (max-width:1180px) {
  .haven-homepage-redesign .stays .hsc-featured-properties__grid {grid-template-columns:repeat(3,minmax(0,1fr))}
  .haven-homepage-redesign .moments {grid-template-columns:repeat(6,minmax(0,1fr))}
  .haven-homepage-redesign .moment {grid-column:span 2}
  .haven-homepage-redesign .moment:nth-child(4) {grid-column:2/4}
  .haven-homepage-redesign .moment:nth-child(5) {grid-column:4/6}
  .haven-homepage-redesign .gA__feat {grid-column:1/-1;grid-row:auto}
  .haven-homepage-redesign .gA__sm,
  .haven-homepage-redesign .gA__sm:nth-of-type(1),
  .haven-homepage-redesign .gA__sm:nth-of-type(2) {grid-column:span 4;grid-row:auto}
}
@media (max-width:900px) {
  .haven-homepage-redesign .hpr-sec__head {grid-template-columns:1fr;gap:calc(20 * var(--u))}
  .haven-homepage-redesign .gA__feat,
  .haven-homepage-redesign .cpA,
  .haven-homepage-redesign .hwA,
  .haven-homepage-redesign .abA {grid-template-columns:1fr}
  .haven-homepage-redesign .gA__feat {min-height:0}
  .haven-homepage-redesign .gA__photo {aspect-ratio:4/3.4}
  .haven-homepage-redesign .gA__sm,
  .haven-homepage-redesign .gA__sm:nth-of-type(1),
  .haven-homepage-redesign .gA__sm:nth-of-type(2) {grid-column:span 12}
  .haven-homepage-redesign .cpA__photo {min-height:0;aspect-ratio:4/3.6}
  .haven-homepage-redesign .abA__copy {position:static}
  .haven-homepage-redesign .abA__prog {display:none}
  .haven-homepage-redesign .hwA__photo {min-height:calc(440 * var(--u))}
  .haven-homepage-redesign .pcard {position:relative;top:0;transform:none!important;will-change:auto}
  .haven-homepage-redesign .pcard::after {display:none}
}
@media (max-width:760px) {
  .haven-homepage-redesign .stays .hsc-featured-properties__grid {display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:min(86%,calc(360 * var(--u)));overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(var(--edge)*-1);padding:calc(6 * var(--u)) var(--edge) calc(26 * var(--u));scrollbar-width:none}
  .haven-homepage-redesign .stays .hsc-featured-properties__grid::-webkit-scrollbar {display:none}
  .haven-homepage-redesign .stays .hsc-featured-properties__item {scroll-snap-align:start}
  .haven-homepage-redesign .moments {grid-template-columns:1fr 1fr;gap:calc(12 * var(--u))}
  .haven-homepage-redesign .moment,
  .haven-homepage-redesign .moment:nth-child(4) {grid-column:auto}
  .haven-homepage-redesign .moment:nth-child(5) {grid-column:1/-1;aspect-ratio:16/10}
  .haven-homepage-redesign .hpr-chip {letter-spacing:.1em;font-size:calc(12 * var(--u));padding:calc(9 * var(--u)) calc(14 * var(--u));text-align:center}
  .haven-homepage-redesign .rail-ctl {max-width:none}
  .haven-homepage-redesign .measure {padding-inline:calc(10 * var(--u))}
  .haven-homepage-redesign .gA__tag .hpr-link {white-space:nowrap}
}
@media (prefers-reduced-motion:reduce) {
  :where(.haven-homepage-redesign .hpr-sec) *,
  :where(.haven-homepage-redesign .hpr-sec) *::before,
  :where(.haven-homepage-redesign .hpr-sec) *::after {animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .haven-homepage-redesign.js-ready [data-hpr-reveal] {transform:none}
  .haven-homepage-redesign .hwA__photo img {transform:none!important}
  .haven-homepage-redesign .pcard {position:relative;top:0;transform:none!important}
  .haven-homepage-redesign .pcard::after {display:none}
  .haven-homepage-redesign .pcard__media {transform:none!important}
  .haven-homepage-redesign.js-ready .pcard[data-hpr-curtain] .pcard__media {clip-path:none}
  .haven-homepage-redesign.js-ready .pcard[data-hpr-curtain] .pcard__n,
  .haven-homepage-redesign.js-ready .pcard[data-hpr-curtain] h3,
  .haven-homepage-redesign.js-ready .pcard[data-hpr-curtain] p {opacity:1;transform:none}
  .haven-homepage-redesign .pcard__media img {transform:none!important}
  .haven-homepage-redesign .gA__bg {transition:none}
}
@media (prefers-reduced-transparency:reduce) {
  .haven-homepage-redesign .gA__tag {backdrop-filter:none;-webkit-backdrop-filter:none}
  .haven-homepage-redesign .gA__tag {background:var(--linen)}
  .haven-homepage-redesign .stays .hsc-prop-card__location-badge {backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--glass-solid)!important}
  .haven-homepage-redesign .dcard__eye {backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--glass-solid)}
}
/* Narrow phones (after the 760px rules so they win): the three owner measures keep their 12px labels and stay inside the photo
   (the 12px floor widened them past it: 15px at 360px). Less tracking and padding; 340px and up fit, 320px is 1px over. */
@media (max-width:420px) {
  .haven-homepage-redesign .measure span {letter-spacing:.08em}
  .haven-homepage-redesign .measure {padding-inline:calc(6 * var(--u))}
}
@media (max-width:350px) {
  .haven-homepage-redesign .measure span {letter-spacing:.03em}
  .haven-homepage-redesign .measure {padding-inline:calc(3 * var(--u))}
}

/* Hero. Its base rules live in haven-homepage-compact.css, which the Live homepage shares, so everything here is scoped to the redesign.
   Text floor: the destination chips, the search button label and the scroll hint were 10 to 11px. */
.haven-homepage-redesign .haven-hp-s01__dest,
.haven-homepage-redesign .haven-hp-s01__scroll-hint,
.haven-homepage-redesign .haven-hp-s01__search .hsc-hero-search-button__label {font-size:12px}
@media (max-width:760px) {
  /* The stacked search makes the hero content taller than a short phone screen, and the content was centred on the whole screen:
     its top (the kicker) slid behind the fixed header and its bottom spilled out of the hero. Now the hero grows to fit its content,
     and the content starts below the header. The 128-unit floor keeps the top stable when the header shrinks on scroll; the offset
     header-script.js publishes only matters if the header is ever taller than that. */
  .haven-homepage-redesign .haven-hp-s01__shell {height:auto; min-height:0}
  .haven-homepage-redesign .haven-hp-s01__content {
    position:relative; inset:auto; box-sizing:border-box;
    min-height:680px; min-height:max(680px, 100svh);
    padding-top:calc(128 * var(--u)); padding-top:max(calc(128 * var(--u)), calc(var(--haven-header-offset, 0px) + 12px));
    padding-bottom:32px;
  }
  /* The kicker: its two 32px rules left it three lines on a 390px phone; without them and with less tracking it is two. */
  .haven-homepage-redesign .haven-hp-s01__chip {margin-bottom:18px; font-size:12px; letter-spacing:.14em; text-align:center; justify-content:center}
  .haven-homepage-redesign .haven-hp-s01__chip::before,
  .haven-homepage-redesign .haven-hp-s01__chip::after {display:none}
  /* Tighter gaps (and less tracking on the chips, so they sit in two rows) keep a 390 x 844 phone's whole hero on one screen. */
  .haven-homepage-redesign .haven-hp-slideshow__messages {margin-bottom:22px}
  .haven-homepage-redesign .haven-hp-s01__search {margin-bottom:24px}
  .haven-homepage-redesign .haven-hp-s01__dest {padding-inline:12px; letter-spacing:.1em}
}
@media (max-width:350px) {
  /* The five slide bars and the pause button were 4px wider than a 320px screen's content. */
  .haven-homepage-redesign .haven-hp-slideshow__progress {gap:8px}
  .haven-homepage-redesign .haven-hp-slideshow__dot-track {width:28px}
  .haven-homepage-redesign .haven-hp-slideshow__controls {gap:12px}
}