/* Harbour House v2 (illustrative guesthouse). Hand written; prefix hh-. Values follow reference/Copy spec.md and
   Art direction.md (ledger 32: measured and source values used as they are). Copied into the site by build.py. */
@font-face{font-family:'HH Literata';src:url('/static/literata-hh-74a5fc6c39c6.woff2') format('woff2');font-weight:200 250;font-display:swap}
@font-face{font-family:'HH Onest';src:url('/static/onest-hh-50c036046f5f.woff2') format('woff2');font-weight:400 500;font-display:swap}
@font-face{font-family:'HH Petrona';src:url('/static/petrona-hh-d425351a8c24.woff2') format('woff2');font-weight:350 400;font-display:swap}

:root{
  --ink:#2c2927;
  --n-default:#f5f4f1;--n-light:#eae7e3;--n-med:#cec9c4;--n-d300:#9c938c;--n-d200:#6f6a66;--n-d100:#4d4945;
  --w-default:#f3efec;--w-light:#e2dbd6;--w-med:#cbc5c2;--w-d300:#ada09b;--w-d200:#7d6d67;--w-d100:#5f514b;
  --c-default:#e9ecf0;--c-light:#dde1e5;--c-med:#c4c8ce;--c-d300:#90949a;--c-d200:#6c737d;--c-d100:#4e4d50;
  --lit:'HH Literata',Georgia,serif;--one:'HH Onest',system-ui,sans-serif;--pet:'HH Petrona',Georgia,serif;
  --e-sheet:cubic-bezier(.25,.5,0,1);  /* the reference's sheet and burger curve */
  --e-ui:cubic-bezier(.4,0,.2,1);      /* reveals and docking */
  --e-load:cubic-bezier(.215,.61,.355,1);
  --p1o:cubic-bezier(.25,.46,.45,.94); /* power1 out */
  --p2o:cubic-bezier(.215,.61,.355,1); /* power2 out */
  --p3o:cubic-bezier(.165,.84,.44,1);  /* power3 out */
  --p2io:cubic-bezier(.645,.045,.355,1);
  --g:40px;--gap:240px;--wash:rgba(45,41,40,.15);--sh:44,41,39;
}
body.hh{--page:var(--n-default);--muted:var(--n-d200);--line:var(--n-med);margin:0;background:var(--page);color:var(--ink);font:350 16px/22px var(--pet);overflow-x:clip}
body.hh.hh-page-rooms{--page:var(--w-light);--muted:var(--w-d100);--line:var(--w-med)}
body.hh.hh-page-ocean-room{--page:var(--c-default);--muted:var(--c-d100);--line:var(--c-med)}
body.hh.hh-page-guide{--page:var(--n-med);--muted:var(--n-d100);--line:var(--n-d300)}
body.hh.hh-page-stay,body.hh.hh-page-enquire{--page:var(--w-d200);--muted:#fff;--line:rgba(255,255,255,.45);color:#fff}
.hh-leaving{transition:background-color .6s var(--p2io)}
.hh *{-webkit-tap-highlight-color:transparent}
.hh figure{margin:0}
.hh img{width:100%;height:100%;object-fit:cover}
.hh picture{display:block;width:100%;height:100%}
.hh-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hh [data-tone=light] :focus-visible,.hh-menu :focus-visible,.hh-enq :focus-visible{outline-color:var(--ink)}
.hh [data-tone=dark] :focus-visible{outline-color:#fff}

/* ---------- type roles */
.hh-h2,.hh-h3,.hh-panel-title,.hh-panel-h,.hh-close-title,.hh-foot-title,.hh-enq-title,.hh-contact-title,.hh-card-title{text-wrap:balance}
.hh-statement,.hh-large-p,.hh-body,.hh-small,.hh-panel-p,.hh-slogan-text,.hh-foot-tag{text-wrap:pretty}
/* at desktop widths the statements and slogans run to six lines at most, so they balance: no short last line such as
   'the sea.' (round 2; phones keep pretty, which only stops one word last lines) */
@media (min-width:1024px){.hh-statement,.hh-slogan-text{text-wrap:balance}}
.hh-h2,.hh-hero-title,.hh-close-title{font-family:var(--lit);font-weight:200;font-size:48px;line-height:51.8px;font-variation-settings:'opsz' 36;margin:0;letter-spacing:0}
.hh-statement,.hh-h3,.hh-panel-title,.hh-panel-h,.hh-foot-title,.hh-enq-title,.hh-contact-title{font-family:var(--lit);font-weight:200;font-size:32px;line-height:40px;margin:0}
.hh-large-p{font-family:var(--lit);font-weight:200;font-size:24px;line-height:31.9px}
.hh-eyebrow,.hh-label{font:400 11px/16.5px var(--one);letter-spacing:1.1px;text-transform:uppercase;color:var(--muted);margin:0 0 16px}
.hh-body{font:350 16px/22px var(--pet);margin:24px 0 0}
.hh-small{font:400 14px/19.9px var(--pet);margin:0}
.hh-link{position:relative;z-index:1;display:inline-block;font:400 13px/16.3px var(--one);letter-spacing:1.3px;text-transform:uppercase;color:var(--muted);text-decoration:none;padding:0 0 8px;border:0;border-bottom:1px solid var(--line);background:none;cursor:pointer;transition:color .2s,border-color .2s}
.hh-link:hover{color:var(--n-d100);border-color:var(--n-d300)}
.hh-link::after,.hh-enq-edit::after,.hh-foot-base a::after,.hh-ribbon a::after{content:'';position:absolute;left:0;right:0;top:-10px;bottom:-10px}
.hh [data-tone=dark] .hh-link:hover{color:#fff;border-color:#fff}
.hh-link--white,.hh-link--white:hover{color:#fff;border-color:rgba(255,255,255,.6)}
.hh-link--white:hover{border-color:#fff}
.hh-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 20px;border:0;background:var(--n-d100);color:#fff;font:400 13px/16px var(--one);letter-spacing:1.3px;text-transform:uppercase;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color .2s}
.hh-btn:hover{background:var(--ink)}
.hh-btn--light{background:var(--n-light);color:var(--ink);transition:background-color .7s .1s}
.hh-btn--light:hover{background:#fff}
.hh-btn--full{width:100%}
.hh-btn--ink{background:var(--n-d100)}

/* ---------- ribbon (house rule for illustrative examples) */
.hh-ribbon{position:absolute;top:0;left:0;right:0;height:28px;z-index:40;background:rgba(44,41,39,.85);color:var(--n-light);text-align:center}
.hh-ribbon p{margin:0;font:400 11px/28px var(--one);letter-spacing:1.1px;text-transform:uppercase;white-space:nowrap}
.hh-ribbon a{position:relative;color:inherit;margin-left:12px;text-decoration:underline;text-underline-offset:3px;display:inline-block;line-height:28px}
.hh-ribbon a::after{left:-10px;right:-10px;top:0;bottom:-16px}

/* ---------- header (fixed, transparent; colour follows the section under it) */
.hh-header{position:fixed;top:0;left:0;right:0;height:105px;z-index:60;color:#fff;transition:color .2s ease-out;pointer-events:none;--drop:0px}
.hh-header.is-ink{color:var(--ink)}
html:not(.hh-js) .hh-header{position:absolute}
/* the band: once the page has scrolled, a hard edged band of the section's own colour behind the header over every
   flat section (none over a photograph section), so words and photographs scrolling up pass cleanly under it, never
   half faded through the header's words; the header is ink or white, whichever reads better on it (site.js;
   ledger 82). 84 px clears the docked controls (31 to 75) by 9 px; 56 on phones (8 to 52) */
.hh-veil{position:fixed;top:0;left:0;right:0;height:84px;z-index:35;pointer-events:none;background-color:var(--page);opacity:0;transition:opacity .25s ease-out,background-color .25s ease-out}
.hh-veil.is-on{opacity:1}
.hh-header>.hh-menu-btn,.hh-header>.hh-mark,.hh-header>.hh-enquire,.hh-header>.hh-subnav{pointer-events:auto}
.hh-menu-btn,.hh-enquire{position:absolute;top:31px;height:44px;display:flex;align-items:center;padding:0;border:0;background:none;color:inherit;font:400 13px/19.5px var(--one);letter-spacing:1.3px;text-transform:uppercase;text-decoration:none;transform:translateY(var(--drop));transition:opacity .2s,transform .5s var(--e-ui),color .4s var(--e-sheet)}
.hh-header:not(.is-ink) .hh-menu-btn,.hh-header:not(.is-ink) .hh-enquire,.hh-header:not(.is-ink) .hh-subnav{font-weight:450}
.hh-menu-btn{left:60px;z-index:4;gap:10px}
.hh-enquire{right:60px}
.hh-menu-btn:hover .hh-menu-word,.hh-enquire:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
html:not(.hh-js) .hh-menu-btn{visibility:hidden}
.hh-burger{position:relative;width:12px;height:7.5px}
.hh-burger i{position:absolute;left:0;width:12px;height:1.5px;background:currentColor;transition:transform .2s var(--e-sheet)}
.hh-burger i:first-child{top:0}.hh-burger i:last-child{top:6px}
.hh-menu-btn[aria-expanded=true]{color:var(--ink)}
.hh-menu-btn[aria-expanded=true] .hh-burger i:first-child{transform:translateY(3px) rotate(45deg) scaleY(.75)}
.hh-menu-btn[aria-expanded=true] .hh-burger i:last-child{transform:translateY(-3px) rotate(-45deg) scaleY(.75)}
.hh-mark{position:absolute;left:50%;top:31px;width:236.3px;height:44px;margin-left:-118.15px;color:inherit;transform:translateY(var(--drop));transition:transform .5s var(--e-ui),opacity .5s var(--e-ui),color .2s ease-out}
.hh-mark i,.hh-foot-brand i{position:absolute;left:0;right:0;top:13.2px;height:16.6px;background:currentColor;-webkit-mask:url('/static/harbour-house-wordmark-ae91425b6445.svg') center/100% 100% no-repeat;mask:url('/static/harbour-house-wordmark-ae91425b6445.svg') center/100% 100% no-repeat}
.hh-mark .hh-mark-p{display:none;-webkit-mask-image:url('/static/harbour-house-wordmark-phone-1b1b68b0fee8.svg');mask-image:url('/static/harbour-house-wordmark-phone-1b1b68b0fee8.svg')}
.hh-subnav{position:absolute;top:91px;left:0;right:0;display:flex;justify-content:center;gap:0 26px;font:400 13px/16px var(--one);letter-spacing:1.3px;text-transform:uppercase;pointer-events:none!important;transition:transform .6s var(--e-ui),opacity .5s ease-out}
.hh-subnav a{pointer-events:auto;color:inherit;text-decoration:none;height:44px;display:flex;align-items:center;transition:opacity .2s,color .2s ease-out}
.hh-subnav a:hover,.hh-subnav a[aria-current]{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
.hh-docked .hh-subnav{transform:translateY(-63.5px)}
@media (min-width:1024px){.hh-docked [data-subnav] .hh-mark{transform:translateY(-80px);opacity:0;pointer-events:none}}

/* dim layer behind the sheets */
.hh-dim{position:fixed;inset:0;z-index:1;background:var(--n-d100);opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s}
body.menu-open .hh-dim,.hh-sheet-on .hh-dim{opacity:.6;visibility:visible;pointer-events:auto;transition-delay:0s}
body.menu-open,.hh-sheet-on body{overflow:hidden}

/* ---------- menu (move B): two white 320 px sheets from the left, the room hover photo on desktop */
.hh-menu{position:fixed;inset:0;z-index:3;color:var(--ink);visibility:hidden;pointer-events:none;transition:visibility 0s 1.2s}
.hh-menu[data-open]{visibility:visible;transition-delay:0s}
.hh-menu ul{list-style:none;margin:0;padding:0}
.hh-menu a,.hh-sub-back{color:var(--ink);text-decoration:none;font:400 13px/16px var(--one);letter-spacing:1.3px;text-transform:uppercase;transition:color .2s}
.hh-sheet1,.hh-sheet2{position:absolute;top:0;bottom:0;left:0;width:320px;background:#fff;pointer-events:auto;transform:translateX(-640px);transition:transform 1.2s var(--e-sheet)}
.hh-sheet1{z-index:3;display:flex;flex-direction:column}
.hh-sheet2{z-index:2;border-left:1px solid var(--n-light);padding:0 40px}
.hh-menu[data-open] .hh-sheet1,.hh-menu[data-open] .hh-sheet2{transform:translateX(0);transition-duration:.6s}
.hh-sheet1>.hh-menu-list{margin-top:138px}
.hh-sheet1 .hh-menu-list>li>a,.hh-menu-sub a{display:flex;align-items:center;min-height:28px;padding:0 40px;margin-bottom:18px}
.hh-menu-group{margin:-2px 0 18px}
.hh-menu-label{display:block;padding:0 40px 9px;font:500 9px/11.1px var(--one);letter-spacing:.9px;text-transform:uppercase;color:var(--n-d200)}
.hh-menu-sub a{margin-bottom:0}
.hh-menu-room{display:flex}
.hh-menu-room a{flex:1}
.hh-sub-open{display:none}
.hh-sheet1 .hh-menu-list:hover a{color:var(--n-d300)}
.hh-sheet1 .hh-menu-list:hover a:hover,.hh-sheet1 .hh-menu-list a:focus-visible{color:var(--ink)}
.hh-menu-foot{margin-top:auto;padding:0 40px 52px}
.hh-menu-small{margin:0 0 14px;font:400 10px/13px var(--one);letter-spacing:1px;text-transform:uppercase;color:var(--n-d200)}
.hh-menu-tag{margin:0;font:200 24px/31.9px var(--lit);color:var(--n-d100)}
.hh-sub-back{display:none}
.hh-room-label{margin:42px 0 0;font:400 13px/16px var(--one);letter-spacing:2.6px;text-transform:uppercase;color:var(--ink)}
.hh-sheet2 .hh-menu-list{margin-top:56px}
.hh-sheet2 .hh-menu-list a{display:flex;align-items:center;min-height:28px;margin-bottom:2.5px}
.hh-sheet2 .hh-menu-list a:hover{color:var(--n-d300)}
.hh-room-note{position:absolute;left:40px;right:40px;bottom:52px;margin:0;font:400 12px/16px var(--pet);color:var(--ink)}
.hh-sheet2>*{opacity:0;transition:opacity .3s}
.hh-menu-photos{position:absolute;top:0;bottom:0;left:640px;right:0;display:none;opacity:0;pointer-events:none;transition:opacity .33s}
.hh-menu-photo{position:absolute;inset:0}
.hh-menu-photo img{opacity:0;transition:opacity .4s}
@media (min-width:1024px){.hh-sheet2{visibility:hidden;transition:transform 1.2s var(--e-sheet),visibility 0s 1.2s}}
.hh-sheet2-back{display:none;position:absolute;top:0;bottom:0;left:0;width:320px;background:#fff;border-left:1px solid var(--n-light);transform:translateX(-640px);transition:transform 1.2s var(--e-sheet)}
/* Desktop pointer: one white second sheet (the backing) slides out with the first room and back when the pointer
   leaves the rooms; the room panels ride on it, so swapping rooms crossfades the panels in place and crosses the
   photographs, as the reference's submenu panels do (its timings, reference/Copy spec.md move B). data-leave (site.js)
   marks the way back from a room, which runs later and quicker than the menu's own opening. */
@media (min-width:1024px) and (hover:hover){
  .hh-menu[data-open] .hh-menu-photos{display:block}
  .hh-sheet2-back{display:block;z-index:1}
  .hh-sheet2{z-index:2;background:transparent;border-left:0;opacity:0;pointer-events:none;transition:transform 1.2s var(--e-sheet),opacity 1s var(--e-sheet) .24s,visibility 0s 1.24s}
  .hh-sheet2>*{transition:opacity 1s var(--e-sheet) .24s}
  .hh-menu[data-open] .hh-sheet2{transition:transform .6s var(--e-sheet),opacity 1s var(--e-sheet) .24s,visibility 0s 1.24s}
  .hh-menu[data-open] .hh-sheet2-back{transform:translateX(0);transition:transform .6s var(--e-sheet)}
  .hh-menu[data-open][data-leave] .hh-sheet2{transition:transform .4s var(--e-sheet) .12s,opacity 1s var(--e-sheet) .52s,visibility 0s 1.52s}
  .hh-menu[data-open][data-leave] .hh-sheet2>*{transition-delay:.52s}
  .hh-menu[data-open][data-leave] .hh-sheet2-back{transition:transform .4s var(--e-sheet) .12s}
  .hh-menu[data-room=ocean] .hh-sheet2,.hh-menu[data-room=garden] .hh-sheet2,.hh-menu[data-room=ocean] .hh-sheet2-back,.hh-menu[data-room=garden] .hh-sheet2-back{transform:translateX(320px)}
  .hh-menu[data-room=ocean] .hh-sheet2,.hh-menu[data-room=garden] .hh-sheet2{transition:transform .4s var(--e-sheet) .23s,opacity 1s var(--e-sheet) .24s,visibility 0s 1.24s}
  .hh-menu[data-room=ocean] .hh-sheet2-back,.hh-menu[data-room=garden] .hh-sheet2-back{transition:transform .4s var(--e-sheet) .23s}
  .hh-menu[data-room=ocean] #hh-room-ocean,.hh-menu[data-room=garden] #hh-room-garden{visibility:visible;opacity:1;pointer-events:auto;transition:transform .4s var(--e-sheet) .23s,opacity 1s var(--e-sheet) .24s,visibility 0s}
  .hh-menu[data-room=ocean] #hh-room-ocean>*,.hh-menu[data-room=garden] #hh-room-garden>*{opacity:1}
  .hh-menu-photos{transition:opacity .4s var(--e-ui) .12s}
  .hh-menu[data-room=ocean] .hh-menu-photos,.hh-menu[data-room=garden] .hh-menu-photos{opacity:1;pointer-events:auto;transition:opacity .4s var(--e-ui) .24s}
  .hh-menu-photo img{transition:opacity .4s var(--e-ui) .44s}
  .hh-menu[data-leave] .hh-menu-photo img{transition-delay:.32s}
  .hh-menu[data-room=ocean] [data-room-photo=ocean],.hh-menu[data-room=garden] [data-room-photo=garden]{z-index:1}
  .hh-menu[data-room=ocean] [data-room-photo=ocean] img,.hh-menu[data-room=garden] [data-room-photo=garden] img{opacity:1;transition:opacity .5s var(--e-ui) .44s}
}

/* ---------- enquiry sheet (move B): 560 px from the right */
.hh-enq{position:fixed;top:0;right:0;bottom:0;width:560px;max-width:100%;z-index:70;visibility:hidden;transition:visibility 0s .4s}
.hh-enq.is-open{visibility:visible;transition-delay:0s}
.hh-enq-panel{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;background:var(--w-default);color:var(--ink);padding:52px 60px 60px;transform:translateX(100%);transition:transform .4s var(--e-sheet)}
.hh-enq.is-open .hh-enq-panel{transform:none}
.hh-enq-close{position:absolute;top:22px;right:38px;width:44px;height:44px;border:0;background:none;color:var(--ink);cursor:pointer}
.hh-enq-close::before,.hh-enq-close::after{content:'';position:absolute;left:15px;top:21px;width:14px;height:1px;background:currentColor;transform:rotate(45deg)}
.hh-enq-close::after{transform:rotate(-45deg)}
.hh-enq-title{max-width:400px;margin:0 0 42px}
.hh-enq .hh-label{display:block;margin:0 0 10px;color:var(--n-d200)}
.hh-label--rule{margin-top:32px!important}
.hh-select{position:relative}
.hh-select::after{content:'';position:absolute;right:18px;top:50%;width:6px;height:6px;margin-top:-5px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg);pointer-events:none}
.hh-select select,.hh-input{width:100%;height:48px;margin:0;border:1px solid var(--n-med);border-radius:0;background:transparent;color:inherit;padding:0 14px;font:400 16px/20px var(--pet);-webkit-appearance:none;appearance:none}
.hh-select select{padding-right:40px;cursor:pointer}
.hh-textarea{height:120px;padding:12px 14px;resize:vertical}
.hh-enq-step .hh-input,.hh-enq-step .hh-select{margin-bottom:22px}
.hh-enq-step [data-step-next]{margin-top:40px}
.hh-cal{border-top:1px solid var(--n-med);max-width:440px}
.hh-cal-head{position:relative;display:flex;justify-content:center;align-items:center;gap:12px;height:48px;font:400 16px/20px var(--pet)}
.hh-cal-move{position:absolute;top:2px;width:44px;height:44px;border:0;background:none;color:var(--ink);cursor:pointer}
.hh-cal-move:disabled{color:var(--n-med);cursor:default}
.hh-cal-move::before{content:'';position:absolute;left:19px;top:19px;width:6px;height:6px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
.hh-cal-prev{left:-10px}.hh-cal-prev::before{transform:rotate(-135deg);left:21px}
.hh-cal-next{right:-10px}
.hh-cal-grid{display:grid;grid-template-columns:repeat(7,1fr)}
.hh-cal-wd{height:40px;line-height:40px;text-align:center;font:400 12.6px/40px var(--pet);color:var(--n-d200)}
.hh-cal-day{height:46px;border:0;border-bottom:1px solid var(--n-light);border-radius:0;padding:0;background:none;color:var(--ink);font:400 14px/1 var(--pet);cursor:pointer;transition:background-color .2s,color .2s}
.hh-cal-day:hover:not([aria-disabled]):not(.is-start):not(.is-end){background:var(--n-light)}
.hh-cal-day[aria-disabled]{color:var(--n-med);cursor:default}
.hh-cal-day.is-between{background:var(--w-med)}
.hh-cal-day.is-start,.hh-cal-day.is-end{background:var(--n-d100);color:#fff}
.hh-cal-day.is-today{text-decoration:underline;text-underline-offset:4px}
.hh-cal-pad{border-bottom:1px solid var(--n-light)}
.hh-cal-status{min-height:40px;margin:16px 0 0;font:400 14px/19.9px var(--pet);color:var(--n-d200);border-bottom:1px solid var(--n-med);padding-bottom:16px}
.hh-cal-status.is-error{color:#8a3b2e}
.hh-enq-summary{position:relative;display:flex;gap:32px;margin:0 0 36px;padding-right:56px}
.hh-enq-summary p{margin:0;font:400 14px/19.9px var(--pet)}
.hh-enq-summary p:first-child{flex:none;white-space:nowrap}
.hh-enq-summary .hh-label{margin-bottom:4px}
.hh-enq-edit{position:absolute;right:0;top:12px;border:0;background:none;padding:0 0 4px;border-bottom:1px solid var(--n-med);font:400 11px/16px var(--one);letter-spacing:1.1px;text-transform:uppercase;color:var(--n-d200);cursor:pointer;min-height:24px}
.hh-enq-result{outline:0}
.hh-enq-result-title{margin:0 0 20px;font:200 24px/31.9px var(--lit)}
.hh-enq-sum{white-space:pre-line;margin:0 0 20px;font:400 14px/19.9px var(--pet)}
.hh-enq-note{margin:0 0 28px;font:400 14px/19.9px var(--pet);color:var(--n-d200)}

/* ---------- hero (move A) */
.hh-hero{position:relative;height:100vh;height:100svh;min-height:520px;overflow:hidden;color:#fff;background:var(--page)}
.hh-hero-par,.hh-hero-media,.hh-hero-still{position:absolute;inset:0}
.hh-hero-still{opacity:0;transition:opacity 1.2s var(--e-ui)}
.hh-hero-still.is-active{opacity:1}
.hh-hero-still img{transform-origin:50% 50%}
.hh-hero-shade{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(rgba(var(--sh),.5),rgba(var(--sh),0) 260px),linear-gradient(0deg,rgba(var(--sh),.5),rgba(var(--sh),0) 300px),var(--wash)}
.hh-hero-title{position:absolute;z-index:2;left:var(--g);top:43.11vh;white-space:nowrap}
.hh-hero-title--villa{top:47.1vh}
.hh-hero-title--villa.hh-l3{top:44.44vh}
.hh-line{display:block}
.hh-w{display:inline-block}
.hh-hero-eyebrow{position:absolute;z-index:2;left:var(--g);top:calc(47.1vh - 31px);margin:0;font:450 11px/16.5px var(--one);letter-spacing:1.1px;text-transform:uppercase}
.hh-hero--stay .hh-hero-eyebrow{top:calc(44.44vh - 31px)}
.hh-cue{position:absolute;z-index:2;left:50%;bottom:0;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:30.5px;padding-top:8px;font:450 11px/16.5px var(--one);letter-spacing:1.1px;text-transform:uppercase;color:#fff;text-decoration:none;white-space:nowrap;transition:opacity .6s var(--e-sheet)}
.hh-cue::after{content:'';width:1px;height:40px;background:#fff}
.hh-scrolled .hh-cue{opacity:0}
/* per photo shading (Art direction section 4.5), on top of the reference's wash */
.hh-hero--home .hh-hero-shade{background:radial-gradient(560px 120px at 50% 53px,rgba(var(--sh),.36),rgba(var(--sh),0)),radial-gradient(300px 120px at calc(100% - 94px) 53px,rgba(var(--sh),.5),rgba(var(--sh),0)),linear-gradient(90deg,rgba(var(--sh),.36) 0,rgba(var(--sh),.28) 480px,rgba(var(--sh),0) 780px),linear-gradient(rgba(var(--sh),.44),rgba(var(--sh),0) 210px),linear-gradient(0deg,rgba(var(--sh),.36),rgba(var(--sh),0) 260px),var(--wash)}
.hh-hero--house .hh-hero-shade{background:radial-gradient(860px 80px at 50% 112px,rgba(var(--sh),.58),rgba(var(--sh),0)),radial-gradient(420px 80px at 50% 52px,rgba(var(--sh),.3),rgba(var(--sh),0)),radial-gradient(280px 100px at calc(100% - 100px) 53px,rgba(var(--sh),.42),rgba(var(--sh),0)),radial-gradient(260px 100px at 100px 53px,rgba(var(--sh),.3),rgba(var(--sh),0)),linear-gradient(rgba(var(--sh),.5),rgba(var(--sh),0) 280px),linear-gradient(0deg,rgba(var(--sh),.62),rgba(var(--sh),0) 300px),var(--wash)}
.hh-hero--ocean-room .hh-hero-shade{background:radial-gradient(820px 70px at 50% 113px,rgba(var(--sh),.46),rgba(var(--sh),0)),linear-gradient(90deg,rgba(var(--sh),.5) 0,rgba(var(--sh),.4) 460px,rgba(var(--sh),0) 820px),linear-gradient(rgba(var(--sh),.66),rgba(var(--sh),0) 300px),linear-gradient(0deg,rgba(var(--sh),.6),rgba(var(--sh),0) 300px),var(--wash)}
.hh-hero--rooms .hh-hero-shade{background:radial-gradient(820px 70px at 50% 113px,rgba(var(--sh),.56),rgba(var(--sh),0)),radial-gradient(640px 220px at 250px 470px,rgba(var(--sh),.3),rgba(var(--sh),0)),linear-gradient(90deg,rgba(var(--sh),.42) 0,rgba(var(--sh),.34) 460px,rgba(var(--sh),0) 800px),linear-gradient(rgba(var(--sh),.64),rgba(var(--sh),0) 260px),linear-gradient(0deg,rgba(var(--sh),.62),rgba(var(--sh),0) 300px),var(--wash)}
.hh-hero--garden-room .hh-hero-shade,.hh-hero--guide .hh-hero-shade{background:radial-gradient(820px 70px at 50% 113px,rgba(var(--sh),.48),rgba(var(--sh),0)),linear-gradient(90deg,rgba(var(--sh),.4) 0,rgba(var(--sh),.3) 460px,rgba(var(--sh),0) 780px),linear-gradient(rgba(var(--sh),.58),rgba(var(--sh),0) 280px),linear-gradient(0deg,rgba(var(--sh),.55),rgba(var(--sh),0) 300px),var(--wash)}
.hh-hero--stay .hh-hero-shade{background:radial-gradient(260px 120px at 90px 378px,rgba(var(--sh),.2),rgba(var(--sh),0)),linear-gradient(rgba(var(--sh),.7),rgba(var(--sh),0) 250px),linear-gradient(0deg,rgba(var(--sh),.7),rgba(var(--sh),0) 300px),var(--wash)}

/* arrival: html.hh-pre is set in the head (not with reduced motion); site.js adds hh-a1 to hh-a5 on the reference's
   timeline: words in 1 s with a 0.1 s stagger, then the photograph (1.8 s) and the words turn white (0.8 s, staggered);
   the header drops 60 px in 1.2 s; the cue fades in 1.2 s. Inner pages fade the wordmark and subnav in 0.5 s after 0.3 s. */
.hh-pre .hh-mark,.hh-pre .hh-subnav{opacity:0}
.hh-pre.hh-a1 .hh-mark,.hh-pre.hh-a1 .hh-subnav{opacity:1;transition:opacity .5s ease-out .3s,transform .5s var(--e-ui)}
.hh-pre .hh-header>.hh-menu-btn,.hh-pre .hh-header>.hh-enquire,.hh-pre .hh-page-index .hh-mark,.hh-pre.hh-a1 .hh-page-index .hh-mark{opacity:0;translate:0 -60px}
.hh-pre.hh-a4 .hh-header>.hh-menu-btn,.hh-pre.hh-a4 .hh-header>.hh-enquire,.hh-pre.hh-a4 .hh-page-index .hh-mark{opacity:1;translate:none;transition:opacity 1.2s var(--p2o),translate 1.2s var(--p2o),transform .5s var(--e-ui)}
.hh-pre .hh-cue{opacity:0}
.hh-pre.hh-a5 .hh-cue{opacity:1;transition:opacity 1.2s var(--p1o)}
.hh-pre .hh-hero--home .hh-hero-media,.hh-pre .hh-hero--home .hh-hero-shade{opacity:0}
.hh-pre .hh-hero--home .hh-hero-media{transform:scale(1.05)}
.hh-pre .hh-page-index .hh-header{color:var(--ink)}
.hh-pre .hh-hero .hh-w{opacity:0;transform:translateX(-20px);color:var(--ink)}
.hh-pre.hh-a2 .hh-hero .hh-w{opacity:1;transform:none;transition:opacity 1s var(--p2o) calc(var(--d) * 1ms),transform 1s var(--p2o) calc(var(--d) * 1ms)}
.hh-pre.hh-a3 .hh-hero .hh-w{color:#fff;transition:opacity 1s var(--p2o) calc(var(--d) * 1ms),transform 1s var(--p2o) calc(var(--d) * 1ms),color .8s var(--p1o) calc(var(--d) * 1ms)}
.hh-pre.hh-a3 .hh-hero--home .hh-hero-media{opacity:1;transform:none;transition:opacity 1.8s var(--p3o),transform 1.8s var(--p3o)}
.hh-pre.hh-a3 .hh-hero--home .hh-hero-shade{opacity:1;transition:opacity 1.8s var(--p3o)}
.hh-pre.hh-a3 .hh-page-index .hh-header{color:#fff;transition:color .8s var(--p1o)}
.hh-pre .hh-hero--villa .hh-hero-media,.hh-pre .hh-hero--villa .hh-hero-shade{opacity:0}
.hh-pre.hh-a1 .hh-hero--villa .hh-hero-media,.hh-pre.hh-a1 .hh-hero--villa .hh-hero-shade{opacity:1;transition:opacity 1.8s var(--e-load)}
.hh-pre .hh-hero-eyebrow{opacity:0;transform:translateX(-20px)}
.hh-pre.hh-a2 .hh-hero-eyebrow{opacity:1;transform:none;transition:opacity .8s var(--p1o),transform 1s var(--p2o)}

/* page change: content fades while the body colour tweens to the next page's */
.hh-leaving main,.hh-leaving .hh-footer,.hh-leaving .hh-ribbon,.hh-leaving .hh-veil,.hh-leaving .hh-header>:not(.hh-dim):not(.hh-menu){opacity:0!important;transition:opacity .6s var(--p2io)!important}

/* reveals: rise 40 px and fade in 0.7 s after 0.1 s; photos fade in 1 s */
.hh-js [data-reveal]{opacity:0;transform:translateY(40px)}
.hh-js [data-reveal].is-in{opacity:1;transform:none;transition:opacity .7s var(--e-ui) .1s,transform .7s var(--e-ui) .1s}
@media (prefers-reduced-motion:no-preference){.hh-js [data-rise]{opacity:0}}
.hh-js [data-reveal-photo]{opacity:0}
.hh-js [data-reveal-photo].is-in{opacity:1;transition:opacity 1s var(--e-ui) .1s}

/* ---------- index 2: statement with photo */
.hh-stmt{padding-top:var(--gap)}
.hh-stmt>.hh-statement{margin-left:7.64vw;width:45.14vw;min-width:min(650px,calc(100vw - 2 * var(--g)));max-width:calc(100vw - 7.64vw - var(--g))}
.hh-stmt-row{display:flex;align-items:flex-end;gap:2.85vw;margin-top:80px;padding-left:var(--g)}
.hh-stmt-photo{flex:0 0 51.94vw;aspect-ratio:4/3;overflow:hidden}
.hh-stmt-aside{flex:0 0 20.9vw;min-width:240px}
.hh-stmt-aside .hh-link,.hh-portraits-aside .hh-link,.hh-large-aside .hh-link{margin-top:24px}

/* ---------- index 3: room cards row */
.hh-cards{position:relative;display:flex;margin-top:var(--gap);--card:44.79vw;--cgap:2.78vw}
.hh-cards-text{flex:0 0 35.56vw;box-sizing:border-box;padding:0 4.4vw 0 var(--g);display:flex;flex-direction:column;justify-content:space-between;height:var(--card)}
.hh-cards-text .hh-small{max-width:300px}
.hh-cards .hh-track{flex:1;min-width:0}
.hh-track{position:relative}
.hh-track-list{display:flex;gap:var(--cgap);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;list-style:none;margin:0;padding:0}
.hh-track-list::-webkit-scrollbar{display:none}
.hh-track-list.is-moving{scroll-snap-type:none}
.hh-card{flex:0 0 var(--card);scroll-snap-align:start}
.hh-card a{display:block;color:inherit;text-decoration:none;transition:opacity .3s}
.hh-card a:hover{opacity:.9}
.hh-card-photo{display:block;aspect-ratio:1;overflow:hidden}
.hh-card-photo img{transition:transform .6s var(--e-ui)}
.hh-card a:hover .hh-card-photo img{transform:scale(1.02)}
.hh-card-title{display:flex;align-items:center;gap:5px;margin:20px 0 0;font:200 24px/26.4px var(--lit)}
.hh-card-title i{width:6px;height:6px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg);opacity:0;transition:opacity .3s,margin .3s;margin-left:5px}
.hh-card a:hover .hh-card-title i,.hh-card a:focus-visible .hh-card-title i{opacity:1;margin-left:8px}
.hh-card-line{display:block;margin-top:8px;font:400 11px/16.5px var(--one);letter-spacing:1.1px;text-transform:uppercase;color:var(--muted)}
.hh-track-nav{position:absolute;top:calc(var(--card) / 2 - 24px);left:0;right:0;height:0}
.hh-cards .hh-track-nav{left:-35.56vw}
.hh-arrow{position:absolute;top:0;width:48px;height:48px;border:0;padding:0;background:var(--n-light);color:var(--ink);cursor:pointer;transition:background-color .3s,opacity .3s}
.hh-arrow:hover{background:var(--w-light)}
.hh-arrow:disabled{opacity:.5;cursor:default}
.hh-arrow::before{content:'';position:absolute;left:19px;top:20px;width:7px;height:7px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
.hh-arrow--prev{left:0}.hh-arrow--prev::before{transform:rotate(-135deg);left:22px}
.hh-arrow--next{right:0}
.hh-track:not(.has-overflow) .hh-track-nav{display:none}

/* ---------- move C: sticky crossfading panels */
.hh-panels{position:relative;margin-top:var(--gap);color:#fff}
.hh-panel{position:relative;height:100vh;min-height:560px;overflow:hidden}
.hh-panel-bg{position:absolute;inset:0;z-index:1;background:var(--w-d200)}
.hh-panel-bg::after{content:'';position:absolute;inset:0;background:radial-gradient(760px 520px at 77.78% 86.67%,rgba(var(--sh),.42),rgba(var(--sh),0)),linear-gradient(rgba(var(--sh),.74),rgba(var(--sh),0) 260px),var(--wash)}
.hh-panel--title .hh-panel-bg::after{content:none}
.hh-panel-card{position:absolute;z-index:2;left:65.83vw;top:70.78vh;width:320px}
.hh-panel-card--title{left:0;right:0;top:50%;width:auto;text-align:center;transform:translateY(-50%)}
.hh-panel-card--title .hh-eyebrow{color:#fff;margin-bottom:22px}
.hh-panel-title{font-size:48px;line-height:51.8px}
.hh-panel-meta{margin:12px 0 0;font:400 11px/16.5px var(--one);letter-spacing:1.1px;text-transform:uppercase}
.hh-panel-p{margin:40px 0 24px;font:350 16px/22px var(--pet)}
.hh-page-guide .hh-panel-p{margin-top:24px}
.hh-js .hh-panels{height:calc(var(--n) * 150vh)}
.hh-js .hh-panels-stage{position:sticky;top:0;height:100vh;overflow:hidden}
.hh-js .hh-panel{position:absolute;inset:0;height:auto;min-height:0;overflow:visible}
.hh-js .hh-panel-bg{opacity:0;transition:opacity .88s var(--e-ui)}
/* is-shown: the active panel's photograph, and the first photograph while a title panel's words fade (ledger 90) */
.hh-js .hh-panel.is-shown .hh-panel-bg{opacity:1}
/* round 4: while a title panel holds the screen, the first photograph shows faintly through its taupe (a veiled view, not
   an empty band), then comes in whole at the handover (ledger 92); never with reduced motion */
@media (prefers-reduced-motion:no-preference){.hh-js .hh-panel--title.is-active+.hh-panel:not(.is-shown) .hh-panel-bg{opacity:.3}}
.hh-js .hh-panel-card{opacity:0;pointer-events:none}
.hh-js .hh-panel.is-active .hh-panel-card{pointer-events:auto}
.hh-js .hh-panel-card--title{transform:none;top:auto;bottom:calc(50vh - 40px)}

/* ---------- index 5: a stay here, two portraits */
.hh-portraits{position:relative;margin-top:var(--gap);height:calc(28.06vw + 68.75vw)}
.hh-portraits-text{position:absolute;left:6.94vw;top:0;width:36.8vw}
.hh-portrait{position:absolute;width:45.83vw;aspect-ratio:2/3;overflow:hidden}
.hh-portrait--1{left:51.39vw;top:0}
.hh-portrait--2{left:var(--g);top:28.06vw}
.hh-portraits-aside{position:absolute;left:51.39vw;bottom:0;width:22.9vw;min-width:240px}

/* ---------- index 6, guide 6: large photo right */
.hh-large{margin-top:calc(var(--gap) + 40px);padding-left:20vw}
.hh-large-head{margin-bottom:48px}
.hh-large-photo{aspect-ratio:3/2;overflow:hidden}
.hh-large-aside{width:22.9vw;min-width:260px;margin-top:40px}

/* ---------- spec strip */
.hh-overview{padding-top:80px}
/* a room page's strip leads its statement as the house page's does (the reference's villa module: 80 px, 40 on phones) */
.hh-overview+.hh-stmt{padding-top:80px}
/* round 4: a room page's intro shares the strip's left edge (13.19vw), as the house page's does: statement, photo and strip
   on one line from 768 px up (phones keep their own column) */
@media (min-width:768px){.hh-overview+.hh-stmt>.hh-statement{margin-left:13.19vw;min-width:min(650px,calc(100vw - 13.19vw - var(--g)));max-width:calc(100vw - 13.19vw - var(--g))}
.hh-overview+.hh-stmt .hh-stmt-row{padding-left:13.19vw;padding-right:var(--g)}.hh-overview+.hh-stmt .hh-stmt-aside{flex:0 1 20.9vw;min-width:200px}}
.hh-strip{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:0 13.19vw;min-height:129px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.hh-strip-items{display:flex;flex-wrap:wrap;align-items:center;margin:0;font:400 17px/20px var(--one);letter-spacing:1.7px;text-transform:uppercase}
.hh-strip-items i{width:5px;height:5px;margin:0 23px;border-radius:50%;background:var(--line)}
.hh-strip .hh-btn{min-width:194px}
.hh-strip--white,.hh-strip--plain{--line:rgba(255,255,255,.45)}
.hh-strip--white .hh-strip-items i,.hh-strip--plain .hh-strip-items i{background:rgba(255,255,255,.7)}

/* ---------- intro (simple larger content) */
.hh-intro{padding:var(--gap) 0 0}
.hh-intro .hh-statement{margin:0 15vw;max-width:876px}
.hh-intro--wide .hh-statement{font-size:32px;line-height:42.6px}

/* ---------- offset photo pairs: A at 13.33vw, B flush left 40 px below with the text right of it, bottom aligned
   (house 1 to 3 opens with the strip and statement; the stay page puts the text above, as the reference's services
   page does); the right pair puts A at 20vw (VIEW GALLERY on it) and B flush right, the text at 20vw beside B */
.hh-pair{display:grid;margin-top:var(--gap);grid-template-columns:13.33vw 53.33vw 2.78vw 27.78vw 1fr;row-gap:40px}
.hh-pair-lead-wrap{grid-column:1/-1}
.hh-pair-lead{margin:0 0 120px 7.64vw;max-width:650px}
.hh-pair--strip{margin-top:80px}
.hh-pair--strip .hh-pair-lead{margin:80px 0 40px 13.33vw;width:52.8vw;max-width:none}
.hh-pair--left .hh-pair-a{grid-column:2;grid-row:2;aspect-ratio:3/2;overflow:hidden}
.hh-pair--left .hh-pair-b{grid-column:1/4;grid-row:3;width:66.67vw;aspect-ratio:3/2;overflow:hidden}
.hh-pair--left .hh-pair-text{grid-column:4;grid-row:3;align-self:end}
.hh-pair--left:not(.hh-pair--strip) .hh-pair-a{grid-row:1}
.hh-pair--left:not(.hh-pair--strip) .hh-pair-b,.hh-pair--left:not(.hh-pair--strip) .hh-pair-text{grid-row:2}
.hh-pair--square .hh-pair-a{aspect-ratio:1}
.hh-pair--top .hh-pair-text{grid-column:2/5;grid-row:1!important;align-self:start;max-width:53.33vw;margin-bottom:80px}
.hh-pair--top .hh-pair-a{grid-row:2!important}
.hh-pair--top .hh-pair-b{grid-row:3!important}
.hh-pair--top .hh-body{max-width:640px}
.hh-pair--right{grid-template-columns:20vw 23.33vw 2.78vw 1fr}
.hh-pair--right .hh-pair-a-wrap{grid-column:1/-1;grid-row:1;margin-left:20vw;width:65.6vw}
.hh-pair--right .hh-pair-a{aspect-ratio:944.6/624;overflow:hidden}
.hh-pair--right .hh-pair-text{grid-column:2;grid-row:2;align-self:start}
.hh-pair--right .hh-pair-b{grid-column:4;grid-row:2;aspect-ratio:776.4/517.6;overflow:hidden}
.hh-pair-text .hh-h3{margin-top:0}

/* ---------- features block (dark tint) */
.hh-features{margin-top:var(--gap);padding:var(--gap) var(--g);background:var(--w-d200);color:#fff;--muted:#fff}
.hh-features--cool{background:var(--c-d200)}
.hh-features .hh-strip{margin:136px 0 150px}
.hh-strip--plain{min-height:64px}
.hh-feature-grid{display:grid;grid-template-columns:29.3vw 1fr;gap:120px 0;margin-left:calc(26.8vw - var(--g))}
.hh-feature ul{list-style:none;margin:0;padding:0}
.hh-feature li{position:relative;padding-left:16px;margin-bottom:14px;font:400 14px/19.9px var(--pet)}
.hh-feature li::before{content:'';position:absolute;left:0;top:8px;width:4px;height:4px;border-radius:50%;background:currentColor}

/* ---------- small cards */
.hh-scards{margin-top:var(--gap);--card:21.67vw;--cgap:2.78vw}
.hh-scards-head{padding:0 var(--g);margin-bottom:48px}
.hh-track--small .hh-track-list{padding:0 var(--g);scroll-padding:0 var(--g)}
.hh-scard{flex:0 0 var(--card);scroll-snap-align:start}
.hh-scard-photo{display:block;aspect-ratio:3/4;overflow:hidden}
.hh-scard .hh-card-title{font-size:24px}
.hh-card-note{margin:8px 0 0;font:400 14px/19.9px var(--pet)}
.hh-track--small .hh-track-nav{top:calc(var(--card) * 4 / 6 - 24px)}

/* ---------- move D: sticky enquiry close (the words start a screen down and scroll up through the held photo,
   which crosses to the second photo a quarter of the way; ledger 72) */
.hh-close{position:relative;height:200vh;margin-top:var(--gap);color:#fff;--muted:#fff;overflow-x:clip}
.hh-close-stage{position:sticky;top:0;height:100vh;overflow:hidden}
.hh-close-bg{position:absolute;inset:0;opacity:0;transition:opacity .77s var(--e-ui)}
.hh-close-bg.is-active{opacity:1}
.hh-close-shade{position:absolute;inset:0;background:linear-gradient(rgba(var(--sh),.4),rgba(var(--sh),0) 200px),rgba(var(--sh),.5)}
.hh-close-content{position:absolute;z-index:1;left:13.19vw;right:13.19vw;top:100vh}
.hh-close-content::before{content:'';position:absolute;z-index:-1;left:-13.19vw;right:-13.19vw;top:-120px;bottom:-120px;background:linear-gradient(rgba(var(--sh),0),rgba(var(--sh),.26) 120px,rgba(var(--sh),.26) calc(100% - 120px),rgba(var(--sh),0));pointer-events:none}
.hh-close .hh-eyebrow{margin-bottom:19.5px}
.hh-close-title{font-size:48px;line-height:62.4px;max-width:875px;margin-bottom:80px}
.hh-close .hh-strip{margin:0}

/* ---------- enquire.html: the contact page */
.hh-contact{padding:242px 20px 80px;background:var(--w-d200);color:#fff;--muted:#fff}
.hh-contact-col{max-width:512px;margin:0 auto}
.hh-contact-eyebrow{text-align:center;margin-bottom:22px}
.hh-contact-title{text-align:center}
.hh-contact-form{margin-top:64px}
.hh-contact .hh-label{display:block;margin:0 0 10px;color:#fff}
.hh-contact .hh-input,.hh-contact .hh-select select{border-color:rgba(206,201,196,.6);margin-bottom:24px}
.hh-contact .hh-select select option{color:var(--ink)}
.hh-contact-form .hh-btn{margin-top:8px}
.hh-contact-result{text-align:left}
.hh-contact-done{margin:64px 0 16px;font:200 24px/31.9px var(--lit)}
.hh-contact-note,.hh-contact-sum{margin:0 0 20px;font:400 14px/19.9px var(--pet)}

/* ---------- footer */
.hh-footer{position:relative;overflow:hidden;background:var(--w-d100);color:#fff;padding:240px var(--g) 64px}
.hh-foot-bg{position:absolute;inset:0;pointer-events:none}
.hh-foot-bg img{opacity:.3;filter:saturate(.6) brightness(.8)}
.hh-foot-bg::after{content:'';position:absolute;left:0;right:0;top:0;height:300px;background:linear-gradient(var(--page),rgba(95,81,75,0))}
.hh-closes .hh-foot-bg::after{content:none}
.hh-closes .hh-footer{padding-top:200px}
.hh-page-enquire .hh-footer{padding-top:140px}
.hh-foot-halves{position:relative;display:grid;grid-template-columns:1fr 1fr;max-width:1000px;margin:0 auto;text-align:center}
.hh-foot-halves::before{content:'';position:absolute;left:50%;top:0;bottom:0;width:1px;background:rgba(255,255,255,.35)}
.hh-foot-half{padding:100px 40px 112px}
.hh-foot-title{margin:0 0 16px;font:200 32px/40px var(--lit)}
.hh-foot-half .hh-btn{min-width:min(370px,100%)}
.hh-foot-band{position:relative;display:flex;gap:40px;margin-top:120px}
.hh-foot-brand{position:relative;flex:0 0 400px}
.hh-foot-brand i{top:0;width:236.3px}
.hh-foot-tag{margin:40px 0 0;font:200 24px/31.9px var(--lit)}
.hh-foot-cols{display:flex;gap:40px 72px;flex-wrap:wrap}
.hh-foot-col{min-width:180px}
.hh-foot-head{margin:0 0 14px;font:200 24px/26.4px var(--lit);color:var(--w-med)}
.hh-foot-col ul{list-style:none;margin:0;padding:0}
.hh-foot-col a{display:inline-flex;align-items:center;min-height:44px;color:rgba(255,255,255,.86);text-decoration:none;font:400 13px/16px var(--one);letter-spacing:1.3px;text-transform:uppercase;transition:color .2s}
.hh-foot-col a:hover{color:#fff}
.hh-foot-base{position:relative;display:flex;justify-content:space-between;gap:40px;margin-top:120px;font:400 14px/19.9px var(--pet);color:var(--n-light)}
.hh-foot-base p{margin:0;max-width:560px}
.hh-foot-base a{position:relative;display:inline-block;color:inherit;text-underline-offset:3px}
.hh-foot-base a::after{top:-12px;bottom:-12px}

/* ---------- house 5 and 11, stay 4: one photo flush left (960 × 640), its text right and bottom aligned */
.hh-large-p{margin:0}
.hh-stmt--wide .hh-stmt-photo{aspect-ratio:16/9}
.hh-single{display:grid;grid-template-columns:66.67vw 2.78vw minmax(0,27.78vw) 1fr;align-items:end;margin-top:var(--gap)}
.hh-single-photo{grid-column:1;aspect-ratio:3/2;overflow:hidden}
.hh-single-text{grid-column:3;max-width:330px}
.hh-single-text .hh-h3{margin-bottom:24px}
.hh-single-text .hh-link{margin-top:24px}

/* ---------- stay 5: text first, then a 4:3 photo at 13.33vw */
.hh-inset{margin-top:var(--gap);padding-left:13.33vw}
.hh-inset-text{max-width:53.33vw}
.hh-inset-text .hh-link{margin-top:32px}
.hh-inset .hh-inset-photo{width:53.33vw;aspect-ratio:4/3;overflow:hidden;margin-top:80px}

/* ---------- house 6: the location on the light tint, our own drawn map of an imagined bay */
.hh-loc{margin-top:var(--gap);padding:var(--gap) 0;background:var(--n-light);--muted:var(--n-d100)}
.hh-loc-in{margin:0 12.29vw}
.hh-loc .hh-map{margin-top:120px;aspect-ratio:1086/755}
.hh-map-svg{display:block;width:100%;height:100%;overflow:visible}
.hh-map-land{fill:#968a84}
.hh-map-main{fill:url(#hh-map-g)}
.hh-map-trail{fill:none;stroke:#f5f4f1;stroke-width:1.4;stroke-dasharray:1.5 5;stroke-linecap:round}
.hh-map-dot{fill:var(--ink);stroke:#f5f4f1;stroke-width:1.5}
.hh-map-home{fill:var(--ink);stroke:#f5f4f1;stroke-width:2.5}
.hh-map-lead{fill:none;stroke:var(--ink);stroke-width:1}
.hh-map-label{font:400 10px var(--one);letter-spacing:1px;text-transform:uppercase;fill:var(--ink)}
.hh-map-name{font:250 20px var(--lit);letter-spacing:5px;text-transform:uppercase;fill:var(--ink)}
.hh-loc .hh-large-p{margin-top:80px;max-width:770px}
.hh-loc-list{list-style:none;margin:40px 0 0;padding:0}
.hh-loc-list li,.hh-roommod-feat li{position:relative;padding-left:16px;font:400 14px/32px var(--pet)}
.hh-roommod-feat li{line-height:19.9px;margin-bottom:13px}
.hh-loc-list li::before,.hh-roommod-feat li::before{content:'';position:absolute;left:0;top:14px;width:4px;height:4px;border-radius:50%;background:currentColor}
.hh-roommod-feat li::before{top:8px}

/* ---------- house 8, guide 7: the slogan band, 95vh, a white statement set in the sky (page speed) */
.hh-slogan{position:relative;height:95vh;min-height:520px;margin-top:var(--gap);overflow:hidden;color:#fff;background:var(--n-light)}
.hh-page-ocean-room .hh-slogan{background:var(--c-light)}
.hh-slogan-bg{position:absolute;inset:0}
.hh-slogan-shade{position:absolute;inset:0;background:linear-gradient(rgba(var(--sh),.5),rgba(var(--sh),.2) 300px,rgba(var(--sh),0) 520px),var(--wash)}
.hh-slogan-text{position:absolute;left:41.53vw;top:87px;width:50vw;max-width:720px;margin:0;font:200 32px/40px var(--lit)}

/* ---------- house 10: two squares beside the text (455 × 455 at 31.25vw and 65.6vw) */
.hh-squares{display:grid;grid-template-columns:6.944vw 21.944vw 2.361vw 31.6vw 2.78vw 31.6vw 1fr;margin-top:var(--gap)}
.hh-squares-text{grid-column:2;grid-row:1;align-self:start}
.hh-square{grid-row:1;aspect-ratio:1;overflow:hidden}
.hh-square--1{grid-column:4}
.hh-square--2{grid-column:6}

/* ---------- room sliders (rooms 3 and 4, room pages 6): slides 675 px tall at their own shape, from x 0 */
.hh-slider{--sh:min(46.875vw,76vh);--sgap:40px}
.hh-slider-list{display:flex;gap:var(--sgap);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;list-style:none;margin:0;padding:0}
.hh-slider-list::-webkit-scrollbar{display:none}
.hh-slider-list.is-moving{scroll-snap-type:none}
.hh-slide{flex:0 0 auto;width:calc(var(--sh) * var(--ar));height:var(--sh);scroll-snap-align:start}
.hh-slide-fig{height:100%;overflow:hidden;background:var(--line)}
.hh-slide-fig img{transition:transform .6s var(--e-sheet)}
.hh-js .hh-slide-fig{cursor:zoom-in}
.hh-js .hh-slide-fig:hover img{transform:scale(1.02)}
.hh-slider-nav{display:flex;align-items:center;height:48px;margin-top:16px}
.hh-slider-nav .hh-arrow{position:relative}
.hh-slider-frac{display:flex;gap:6px;margin:0 0 0 20px;font:400 11px/16px var(--one);letter-spacing:2px;color:var(--muted)}
.hh-slider-cur{color:var(--ink)}
html:not(.hh-js) .hh-slider-nav{display:none}

/* ---------- rooms 3 and 4: the room modules */
.hh-roommod{margin-top:var(--gap)}
.hh-roommod--tint{padding:var(--gap) 0;background:var(--w-default)}
.hh-roommod+.hh-roommod--tint{margin-top:120px}
.hh-roommod--tint+.hh-close,.hh-features+.hh-close{margin-top:0}
.hh-roommod-head{padding:0 var(--g);margin-bottom:72px}
/* the spec strip role under each room name (17 / 20, tracking 1.7), three short items as the reference's; phones as our other strips */
.hh-roommod-strip{display:flex;flex-wrap:wrap;align-items:center;margin:20px 0 0;font:400 17px/20px var(--one);letter-spacing:1.7px;text-transform:uppercase;color:var(--ink)}
.hh-roommod-strip i{width:5px;height:5px;margin:0 23px;border-radius:50%;background:var(--line)}
.hh-strip-items i.is-break,.hh-roommod-strip i.is-break{display:none}
/* a held break is a zero height flex line: with the 4 px row gap either side, wrapped lines sit 8 px apart */
.hh-strip-items,.hh-roommod-strip{row-gap:4px}
.hh-strip-break{flex:0 0 100%;height:0}
.hh-roommod-cols{display:grid;grid-template-columns:15vw 30vw 9.72vw 29.2vw 1fr;margin-top:80px}
.hh-roommod-cols>.hh-large-p{grid-column:2}
.hh-roommod-feat{grid-column:4}
.hh-roommod-feat ul{list-style:none;margin:0;padding:0}
.hh-roommod-links{display:flex;flex-wrap:wrap;align-items:center;gap:24px 32px;margin-top:40px}
.hh-roomslider{margin-top:var(--gap)}

/* ---------- VIEW GALLERY on the offset pair's first photo (house 3, room pages 5) */
.hh-pair-a-wrap{position:relative}
.hh-gallery-btn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);min-height:48px;padding:0 20px;border:0;background:var(--n-light);color:var(--ink);font:400 13px/16px var(--one);letter-spacing:1.3px;text-transform:uppercase;white-space:nowrap;cursor:pointer;transition:background-color .7s .1s}
.hh-gallery-btn:hover{background:#fff}
html:not(.hh-js) .hh-gallery-btn{display:none}

/* ---------- card row pagination on phones and tablets: the reference's 16 px squares */
.hh-dots{display:none;gap:8px;margin:24px var(--g) 0}
.hh-dots i{width:16px;height:16px;background:var(--n-d300);opacity:.3;transition:opacity .3s}
.hh-dots i.is-on{opacity:1}

/* ---------- stay 3: the services cards, caps labels under 3:4 photographs, the heading at 21.8vw */
.hh-scards--labels .hh-scards-head{padding-left:21.8vw}
.hh-scards--labels .hh-h2{line-height:60px;max-width:812px}
.hh-scards--labels .hh-card-title{margin:16px 0 0;font:400 11px/16.5px var(--one);letter-spacing:1.1px;text-transform:uppercase}

/* ---------- the photo viewer (the reference's gallery modal): a 0.7 s veil, the photograph 0.3 s after 0.8 s,
   changes slide 50 px in 0.6 s; filters on the house and room pages, the slider's own photographs elsewhere */
.hh-viewer{position:fixed;inset:0;z-index:90;color:#fff;--it:96px;--ib:48px;--ix:96px}
.hh-viewer-veil{position:absolute;inset:0;background:var(--ink);opacity:0;transition:opacity .7s var(--e-sheet)}
.hh-viewer.is-open .hh-viewer-veil{opacity:1}
.hh-viewer-stage{position:absolute;top:var(--it);bottom:var(--ib);left:var(--ix);right:var(--ix);pointer-events:none}
.hh-viewer-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transform:translateX(var(--from,0));transition:opacity .3s ease-in-out,transform .6s var(--e-sheet)}
.hh-viewer-img.is-on{opacity:1;transform:none}
.hh-viewer-img.is-first{transition-delay:.8s,.8s}
.hh-viewer-img.is-out{opacity:0;transform:translateX(var(--to,0))}
.hh-viewer-top{position:absolute;z-index:2;top:0;left:0;right:0;display:flex;align-items:center;justify-content:center;min-height:96px;padding:0 112px;box-sizing:border-box;opacity:0;transition:opacity .7s var(--e-sheet)}
.hh-viewer.is-open .hh-viewer-top,.hh-viewer.is-open .hh-viewer-nav,.hh-viewer.is-open .hh-viewer-count{opacity:1}
.hh-viewer-name{position:absolute;left:var(--g);top:40px;margin:0;font:400 11px/16px var(--one);letter-spacing:2px;text-transform:uppercase}
.hh-viewer-filters{display:flex;flex-wrap:wrap;justify-content:center;gap:0 40px}
.hh-viewer-filters button{min-height:44px;padding:0;border:0;background:none;color:rgba(255,255,255,.72);font:500 17px/20px var(--one);letter-spacing:1.7px;text-transform:uppercase;cursor:pointer;transition:color .3s}
.hh-viewer-filters button:hover,.hh-viewer-filters button[aria-pressed=true]{color:#fff}
.hh-viewer-filters button[aria-pressed=true]{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
.hh-viewer-close,.hh-viewer-nav{position:absolute;z-index:3;width:48px;height:48px;padding:0;border:0;background:var(--n-d100);color:#fff;cursor:pointer}
.hh-viewer-close::before,.hh-viewer-close::after,.hh-viewer-nav::before{content:'';position:absolute;opacity:.72;transition:opacity .3s}
.hh-viewer-close:hover::before,.hh-viewer-close:hover::after,.hh-viewer-nav:hover::before,.hh-viewer-close:focus-visible::before,.hh-viewer-close:focus-visible::after,.hh-viewer-nav:focus-visible::before{opacity:1}
.hh-viewer-close{top:24px;right:24px}
.hh-viewer-close::before,.hh-viewer-close::after{left:16px;top:23.5px;width:16px;height:1px;background:currentColor;transform:rotate(45deg)}
.hh-viewer-close::after{transform:rotate(-45deg)}
.hh-viewer-nav{right:24px;opacity:0;transition:opacity .7s var(--e-sheet)}
.hh-viewer-nav::before{left:19px;top:20px;width:7px;height:7px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
.hh-viewer-prev{top:calc(50% - 52px)}
.hh-viewer-prev::before{left:22px;transform:rotate(-135deg)}
.hh-viewer-next{top:calc(50% + 4px)}
.hh-viewer-nav:disabled{display:none}
.hh-viewer-count{position:absolute;z-index:2;left:var(--g);bottom:16px;margin:0;font:400 11px/16px var(--one);letter-spacing:2px;opacity:0;transition:opacity .7s var(--e-sheet)}
.hh-viewer--set .hh-viewer-top{justify-content:flex-start}

@media (max-width:1023px){
  .hh-js .hh-track.has-overflow .hh-dots{display:flex}
  .hh-single{grid-template-columns:87.18vw 1fr}
  .hh-single-text{grid-column:1/-1;max-width:none;padding:24px var(--g) 0}
  .hh-single-text .hh-small{max-width:480px}
  .hh-inset{padding:0}
  .hh-inset-text{max-width:none;padding:0 var(--g)}
  .hh-inset .hh-inset-photo{width:74.36vw;margin:40px 0 0 12.82vw}
  .hh-loc{padding:120px 0}
  .hh-loc-in{margin:0 var(--g)}
  .hh-loc .hh-map{margin-top:32px}
  .hh-loc .hh-large-p{margin-top:40px}
  .hh-squares{grid-template-columns:12.82vw 59.49vw 1fr;row-gap:32px}
  .hh-squares-text{grid-column:1/-1;grid-row:2;padding:0 var(--g) 0 12.82vw}
  .hh-square--1{grid-column:2;grid-row:1}
  .hh-square--2{grid-column:2;grid-row:3}
  .hh-slogan-text{left:var(--g);right:var(--g);width:auto}
  .hh-roommod-cols{grid-template-columns:var(--g) 1fr var(--g);row-gap:48px;margin-top:40px}
  .hh-roommod-cols>.hh-large-p,.hh-roommod-feat{grid-column:2}
  .hh-roommod-head{margin-bottom:40px}
  .hh-scards--labels .hh-scards-head{padding-left:var(--g)}
  .hh-viewer{--it:120px;--ib:96px;--ix:0px}
  .hh-viewer-veil{background:var(--w-d200)}
  .hh-viewer.is-open .hh-viewer-veil{opacity:1}
  .hh-viewer-top{justify-content:flex-start;padding:16px 84px 0 var(--g);min-height:0;align-items:flex-start}
  .hh-viewer-name{position:static;margin-top:16px}
  .hh-viewer-filters{justify-content:flex-start;gap:0 20px}
  .hh-viewer-filters button{font-size:14px;line-height:18px;color:#fff}
  .hh-viewer-close{top:16px;right:16px}
  .hh-viewer-nav{top:auto;bottom:24px;right:auto}
  .hh-viewer-prev{left:calc(50% - 52px)}
  .hh-viewer-next{left:calc(50% + 4px)}
  .hh-viewer--set{--it:80px}
  .hh-viewer-count{bottom:40px}
}
@media (max-width:767px){
  .hh-slider{--sh:50vw;--sgap:16px}
  .hh-slider-nav{padding:0 var(--g)}
  .hh-slogan{height:80vh;min-height:480px}
  .hh-slogan-text{top:72px;font-size:24px;line-height:30px}
  .hh-slogan-shade{background:linear-gradient(rgba(var(--sh),.6),rgba(var(--sh),.42) 55%,rgba(var(--sh),0) 92%),var(--wash)}
  .hh-scards--labels .hh-h2{line-height:40px}
  .hh-map-label{font-size:28px;letter-spacing:2px}
  .hh-map-name{font-size:44px;letter-spacing:8px}
  .hh-map-dot{stroke-width:3}
  .hh-map-home{stroke-width:4}
  .hh-map-lead{stroke-width:2.5}
}

/* ---------- tablet */
@media (max-width:1023px){
  :root{--gap:180px}
  .hh-subnav{display:none}
  /* the scroller stays put and its first sheet slides in, so a touch during the slide already scrolls the menu */
  .hh-menu{right:auto;width:min(320px,100vw);overflow-y:auto;overscroll-behavior:contain;pointer-events:auto;transition:visibility 0s .5s}
  .hh-menu[data-open]{transition:visibility 0s}
  .hh-sheet1,.hh-sheet2{transform:none;transition:none;width:auto;right:0}
  .hh-sheet1{position:relative;min-height:100%;padding:84px 0 32px;box-sizing:border-box;transform:translateX(-100%);transition:transform .5s var(--e-sheet)}
  .hh-menu[data-open] .hh-sheet1{transform:none;transition:transform .5s var(--e-sheet)}
  .hh-sheet1>.hh-menu-list{margin-top:0}
  .hh-sheet1 .hh-menu-list>li>a,.hh-menu-sub a,.hh-sheet2 .hh-menu-list a{min-height:44px;margin:0;padding:0 20px}
  .hh-menu-label{padding:12px 20px 4px}
  .hh-menu-group{margin:0}
  .hh-sub-open{display:block;flex:0 0 52px;height:44px;border:0;background:none;color:var(--ink);position:relative;cursor:pointer}
  .hh-sub-open::before{content:'';position:absolute;left:20px;top:19px;width:6px;height:6px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
  .hh-sheet1 .hh-menu-list:hover a{color:var(--ink)}
  .hh-menu-foot{padding:32px 20px 0}
  .hh-sheet2{position:absolute;top:0;bottom:auto;min-height:100%;z-index:4;padding:0;border:0;visibility:hidden;clip-path:inset(0 0 0 100%);transform:translateX(-100%);transition:clip-path .4s var(--e-sheet),visibility 0s .4s,transform .5s var(--e-sheet)}
  .hh-menu[data-open] .hh-sheet2{transform:none}
  .hh-sheet2>*{opacity:1}
  .hh-menu[data-sub=ocean] #hh-room-ocean,.hh-menu[data-sub=garden] #hh-room-garden{visibility:visible;clip-path:inset(0);transition:clip-path .4s var(--e-sheet),visibility 0s}
  .hh-sub-back{display:flex;align-items:center;gap:10px;min-height:44px;margin:74px 0 0;padding:0 20px;border:0;background:none;cursor:pointer;font-size:11px}
  .hh-sub-back::before{content:'';width:5px;height:5px;border-top:1px solid currentColor;border-left:1px solid currentColor;transform:rotate(-45deg)}
  .hh-room-label{margin:20px 20px 0}
  .hh-sheet2 .hh-menu-list{margin-top:24px}
  .hh-room-note{position:static;margin:40px 20px 32px}
  .hh-menu-photos{display:none!important}
  .hh-cards{flex-direction:column;--card:75.64vw;--cgap:20px}
  .hh-cards-text{height:auto;padding:0 var(--g);gap:24px;margin-bottom:40px}
  .hh-cards .hh-track-list{padding:0 var(--g);scroll-padding:0 var(--g)}
  .hh-track-nav{display:none}
  .hh-pair{grid-template-columns:12.82vw 74.36vw 1fr;row-gap:20px}
  .hh-pair-lead{margin:0 var(--g) 40px}
  .hh-pair--strip{margin-top:40px}
  .hh-pair--strip .hh-pair-lead{margin:40px var(--g) 60px 12.82vw;width:auto}
  .hh-pair--left .hh-pair-a,.hh-pair--left:not(.hh-pair--strip) .hh-pair-a{grid-column:2;grid-row:auto}
  .hh-pair--left .hh-pair-b,.hh-pair--left:not(.hh-pair--strip) .hh-pair-b{grid-column:1/-1;grid-row:auto;width:87.18vw}
  .hh-pair--left .hh-pair-text,.hh-pair--left:not(.hh-pair--strip) .hh-pair-text{grid-column:1/-1;grid-row:auto;padding:20px var(--g) 0;max-width:560px}
  .hh-pair--top .hh-pair-text{grid-column:1/-1;padding:0 var(--g);max-width:none;margin-bottom:40px}
  .hh-pair--top .hh-pair-a{grid-row:2!important}
  .hh-pair--top .hh-pair-b{grid-row:3!important}
  .hh-pair--right{grid-template-columns:var(--g) 1fr var(--g);row-gap:32px}
  .hh-pair--right .hh-pair-a-wrap{grid-column:1/-1;grid-row:1;width:77.69vw;margin-left:var(--g)}
  .hh-pair--right .hh-pair-text{grid-column:2;grid-row:2;max-width:560px;padding:0}
  .hh-pair--right .hh-pair-b{grid-column:1/-1;grid-row:3;width:87.18vw;margin-left:12.82vw}
  .hh-feature-grid{grid-template-columns:1fr 1fr;gap:56px 40px;margin-left:0}
  .hh-features .hh-strip{margin:64px 0 80px}
  .hh-features{padding:120px var(--g)}
  .hh-panel-card{left:auto;right:var(--g)}
  .hh-panel-card--title{left:0;right:0}
  .hh-portraits{height:auto;display:grid;grid-template-columns:var(--g) 1fr 1fr var(--g);row-gap:32px}
  .hh-portraits-text,.hh-portrait,.hh-portraits-aside{position:static;width:auto}
  .hh-portraits-text{grid-column:2/4}
  .hh-portrait--1{grid-column:2/4;width:62.8vw}
  .hh-portraits .hh-portrait--2{grid-column:2/4;width:62.8vw;justify-self:end;margin-top:-30vw}
  .hh-portraits-aside{grid-column:2/4}
  .hh-large{padding-left:var(--g)}
  .hh-large-photo{margin-right:0}
  .hh-large-aside{width:auto;max-width:400px}
  .hh-foot-band{flex-direction:column;margin-top:120px}
  .hh-foot-brand{flex:none}
}

/* ---------- phone */
@media (max-width:767px){
  :root{--g:20px;--gap:120px}
  .hh-ribbon p{font-size:9.5px;letter-spacing:.45px}
  .hh-ribbon a{margin-left:8px}
  .hh-header{height:60px}
  .hh-veil{height:56px}
  .hh-header{--drop:28px}
  .hh-off-top .hh-header{--drop:0px}
  .hh-menu-btn,.hh-enquire{top:7.5px;font-size:10px;line-height:15px;letter-spacing:1px}
  .hh-menu-btn{left:20px;gap:6px;padding-right:4px}
  .hh-enquire{right:20px;padding-left:4px}
  .hh-mark{top:8.25px;width:179.7px;margin-left:-89.85px}
  .hh-mark i{top:15px;height:12.5px}
  .hh-mark .hh-mark-d{display:none}
  .hh-mark .hh-mark-p{display:block}
  .hh-h2,.hh-hero-title{font-size:32px;line-height:34.6px}
  .hh-close-title{font-size:32px;line-height:41.6px;margin-bottom:40px}
  .hh-statement,.hh-h3,.hh-panel-title,.hh-panel-h,.hh-foot-title,.hh-contact-title{font-size:24px;line-height:30px}
  .hh-panel-title{font-size:32px;line-height:34.6px}
  .hh-js .hh-panel-bg{transition-duration:.47s}
  .hh-large-p{font-size:20px;line-height:27px}
  .hh-intro--wide .hh-statement{font-size:24px;line-height:30px}
  .hh-enq-title{font-size:28px;line-height:35px}
  .hh-body{font-size:14px;line-height:19.3px}
  .hh-hero-title{top:45.85vh}
  .hh-hero-title--villa,.hh-hero-title--villa.hh-l3{top:45.85vh}
  .hh-hero-eyebrow,.hh-hero--stay .hh-hero-eyebrow{top:calc(45.85vh - 29px)}
  .hh-hero--home .hh-hero-shade{background:radial-gradient(320px 160px at 41.0% 50.9%,rgba(var(--sh),.42),rgba(var(--sh),0)),linear-gradient(rgba(var(--sh),.76),rgba(var(--sh),0) 250px),linear-gradient(0deg,rgba(var(--sh),.52),rgba(var(--sh),0) 260px),var(--wash)}
  .hh-hero--house .hh-hero-shade{background:radial-gradient(200px 50px at 50% 57px,rgba(var(--sh),.3),rgba(var(--sh),0)),linear-gradient(rgba(var(--sh),.66),rgba(var(--sh),0) 240px),linear-gradient(0deg,rgba(var(--sh),.62),rgba(var(--sh),0) 280px),var(--wash)}
  .hh-hero--ocean-room .hh-hero-shade{background:linear-gradient(90deg,rgba(var(--sh),.22),rgba(var(--sh),0) 72%),linear-gradient(rgba(var(--sh),.78) 0,rgba(var(--sh),.6) 30%,rgba(var(--sh),.58) 46%,rgba(var(--sh),.36) 57%,rgba(var(--sh),0) 74%),linear-gradient(0deg,rgba(var(--sh),.7),rgba(var(--sh),0) 280px),var(--wash)}
  .hh-hero--rooms .hh-hero-shade{background:radial-gradient(220px 100px at 14% 43.2%,rgba(var(--sh),.5),rgba(var(--sh),0)),radial-gradient(340px 150px at 38.5% 50.9%,rgba(var(--sh),.56),rgba(var(--sh),0)),linear-gradient(rgba(var(--sh),.8),rgba(var(--sh),0) 230px),linear-gradient(0deg,rgba(var(--sh),.68),rgba(var(--sh),0) 300px),var(--wash)}
  .hh-hero--garden-room .hh-hero-shade,.hh-hero--guide .hh-hero-shade{background:radial-gradient(360px 200px at 36% 48%,rgba(var(--sh),.52),rgba(var(--sh),0)),linear-gradient(rgba(var(--sh),.8),rgba(var(--sh),0) 260px),linear-gradient(0deg,rgba(var(--sh),.55),rgba(var(--sh),0) 280px),var(--wash)}
  .hh-hero--garden-room .hh-hero-shade{background:radial-gradient(360px 200px at 36% 48%,rgba(var(--sh),.52),rgba(var(--sh),0)),linear-gradient(rgba(var(--sh),.8),rgba(var(--sh),0) 260px),linear-gradient(0deg,rgba(var(--sh),.74),rgba(var(--sh),.3) 150px,rgba(var(--sh),0) 320px),var(--wash)}
  .hh-hero--stay .hh-hero-shade{background:radial-gradient(200px 80px at 15.4% 45.0%,rgba(var(--sh),.22),rgba(var(--sh),0)),radial-gradient(300px 200px at 38.5% 53.9%,rgba(var(--sh),.36),rgba(var(--sh),0)),linear-gradient(rgba(var(--sh),.55),rgba(var(--sh),0) 200px),linear-gradient(0deg,rgba(var(--sh),.35),rgba(var(--sh),0) 260px),var(--wash)}
  .hh-pre.hh-a2 .hh-hero .hh-w{transition:opacity 1s var(--p2o) calc(var(--pd) * 1ms),transform 1s var(--p2o) calc(var(--pd) * 1ms)}
  .hh-pre.hh-a3 .hh-hero .hh-w{transition:opacity 1s var(--p2o) calc(var(--pd) * 1ms),transform 1s var(--p2o) calc(var(--pd) * 1ms),color .85s var(--p1o) calc(var(--d) * 1ms)}
  .hh-stmt>.hh-statement{margin:0 var(--g) 0 12.82vw;width:auto;min-width:0;max-width:none}
  .hh-stmt-row{display:block;margin-top:40px;padding:0 var(--g)}
  .hh-overview+.hh-stmt{padding-top:40px}
  .hh-portraits-text{margin-left:calc(12.82vw - var(--g))}
  .hh-stmt-aside{min-width:0;margin:24px 0 0 30px}
  .hh-panel-card{left:var(--g);right:var(--g);top:auto;bottom:56px;width:auto}
  .hh-panel-card--title{bottom:auto;top:50%}
  .hh-js .hh-panel-card--title{top:auto;bottom:calc(50vh - 40px)}
  .hh-panel-bg::after{background:linear-gradient(rgba(var(--sh),.66),rgba(var(--sh),0) 230px),linear-gradient(0deg,rgba(var(--sh),.76) 0,rgba(var(--sh),.64) 50%,rgba(var(--sh),0) 92%),var(--wash)}
  .hh-panel-p{margin-top:24px}
  .hh-strip{flex-direction:column;align-items:stretch;margin:0 var(--g);padding:28px 0 24px;border-bottom:0;text-align:center}
  .hh-strip-items{justify-content:center;font-size:12px;line-height:16px;letter-spacing:1.2px}
  .hh-strip-items i{margin:0 8px}
  .hh-roommod-strip{font-size:12px;line-height:16px;letter-spacing:1.2px}
  .hh-roommod-strip i{margin:0 8px}
  .hh-strip .hh-btn{width:100%}
  .hh-close-shade{background:linear-gradient(rgba(var(--sh),.3),rgba(var(--sh),0) 200px),rgba(var(--sh),.6)}
  .hh-close-content{left:var(--g);right:var(--g)}
  .hh-close-content::before{left:calc(var(--g) * -1);right:calc(var(--g) * -1)}
  .hh-close .hh-strip{margin:0}
  .hh-intro .hh-statement{margin:0 var(--g)}
  .hh-scards{--card:33.08vw;--cgap:20px}
  .hh-scard{flex-basis:max(33.08vw,150px)}
  .hh-scard .hh-card-title{font-size:20px;line-height:24px}
  .hh-contact{padding:160px var(--g) 72px}
  .hh-footer{padding:140px var(--g) 48px}
  .hh-foot-bg::after{height:200px}
  .hh-closes .hh-footer{padding-top:120px}
  .hh-page-enquire .hh-footer{padding-top:96px}
  .hh-foot-halves{grid-template-columns:1fr}
  .hh-foot-halves::before{left:20%;right:20%;top:50%;bottom:auto;width:auto;height:1px}
  .hh-foot-half{padding:48px 0}
  .hh-foot-band{margin-top:72px;align-items:center;text-align:center}
  .hh-foot-brand{order:2;margin-top:8px}
  .hh-foot-brand i{left:50%;right:auto;margin-left:-89.85px}
  .hh-foot-cols{justify-content:center}
  .hh-foot-half .hh-btn{min-width:0}
  .hh-foot-brand i{width:179.7px;height:12.5px}
  .hh-foot-cols{gap:32px 40px}
  .hh-foot-col{min-width:130px}
  .hh-foot-base{flex-direction:column;align-items:center;gap:16px;margin-top:48px;text-align:center}
  .hh-roommod+.hh-roommod--tint{margin-top:64px}
  .hh-js .hh-panels--index{height:calc(var(--n) * 150vh - 50vh)}
  .hh-scards--labels .hh-scard .hh-card-title{font-size:11px;line-height:16.5px}
  .hh-enq-panel{padding:28px var(--g) 40px}
  .hh-enq-close{top:12px;right:8px}
  .hh-enq-title{padding-right:44px;margin-bottom:32px}
  .hh-enq-summary{flex-direction:column;gap:12px}
}
@media (max-width:379px){
  .hh-ribbon p{font-size:8px;letter-spacing:.2px}
  .hh-ribbon a{margin-left:6px}
  .hh-hero-title{font-size:30px;line-height:32.4px}
  .hh-menu-word{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .hh-menu-btn{min-width:44px}
  .hh-enquire{letter-spacing:.6px}
  .hh-mark{width:156px;margin-left:-78px}
  .hh-mark i{top:16px;height:10.85px}
}
@media (max-width:359px){
  .hh-strip-items,.hh-roommod-strip{font-size:11px;letter-spacing:1.1px}
  .hh-strip-items i,.hh-roommod-strip i{margin:0 6px}
}
@media (max-width:339px){
  .hh-enquire{letter-spacing:.4px}
  .hh-mark{width:146px;margin-left:-73px}
  .hh-mark i{top:16.36px;height:10.13px}
}
@media (max-width:767px){.hh-contact-title br{display:none}}
@media (max-width:767px) and (orientation:landscape){
  .hh-hero-title,.hh-hero-title--villa,.hh-hero-title--villa.hh-l3{top:auto;bottom:96px}
  .hh-hero-eyebrow{top:auto;bottom:calc(96px + 34.6px * 2 + 12px)}
}

/* ---------- focus inside the horizontal rows (the rows clip an outside ring) and while the viewer is open */
.hh-track-list :focus-visible,.hh-slider-list :focus-visible{outline-offset:-2px}
.hh-card a:focus-visible .hh-card-photo{outline:2px solid #fff;outline-offset:-6px}
.hh-slide-fig{position:relative}
.hh-slide-fig::after{content:'';position:absolute;inset:2px;border:2px solid #fff;opacity:0;pointer-events:none}
.hh-slide-fig:focus-visible::after{opacity:1}
.hh-viewer-on body{overflow:hidden}
.hh-viewer:not(.is-open) .hh-viewer-img{opacity:0;transition:opacity .3s ease-in-out}

/* ---------- reduced motion: nothing moves; panels and sequences read as still frames */
@media (prefers-reduced-motion:reduce){
  .hh-js [data-reveal],.hh-js [data-reveal-photo]{opacity:1;transform:none}
  .hh-js .hh-panels{height:auto}
  .hh-js .hh-panels-stage{position:static;height:auto;overflow:visible}
  .hh-js .hh-panel{position:relative;height:100vh;min-height:560px;overflow:hidden}
  .hh-js .hh-panel-bg{opacity:1}
  .hh-js .hh-panel-card{opacity:1!important;transform:none!important;pointer-events:auto}
  .hh-js .hh-panel-card--title{top:50%;bottom:auto;transform:translateY(-50%)!important}
  .hh-hero-still img{transform:none!important}
}