/* Rates hero = the HOMEPAGE hero's header and type (client 2026-10-08).
   Header: logo + "Book Your Stay" + Menu start 50px from the top at every width, logo 126px (118 <=1450, 100 <=900), radius 10/8, no shadow — exactly the homepage hero header.
   Type: the homepage hero's faces, sizes and tracking, with the same @font-face metrics (size-adjust) so glyphs render identically:
     title Wondar Quason 102% (.93 line, -.012em)   accent Rollo 66% (no tilt)   lead Neue Frutiger 88% (1.3, -.008em)   crumbs Univers Next 99% (.2em)
   Sizes follow the viewport like the homepage hero's (title 5.789vw, accent 8.21vw, lead 1.544vw, crumbs .9526vw; floors 68/92/21/14).
   The dark teal photo plate and the white / gold colours are kept (navy text would not read on it). Copy sits on the 170px rails with 100px of padding under it.
   Scoped to .pdh--rates / body.page-rates: Park Details, Attractions and About share the base hero CSS and are untouched. Linked last. */
@font-face{font-family:"RH Display";src:url("../fonts/library/wondar-quason/wondar-quason-400.woff2") format("woff2");font-weight:400;font-display:swap;size-adjust:102%}
@font-face{font-family:"RH Accent";src:url("../fonts/library/rollo/rollo-400-fixed.woff2") format("woff2");font-weight:400;font-display:swap;size-adjust:66%}
@font-face{font-family:"RH Text";src:url("../fonts/library/neue-frutiger/neue-frutiger-400.woff2") format("woff2");font-weight:200 800;font-display:swap;size-adjust:88%}
@font-face{font-family:"RH Label";src:url("../fonts/library/univers-next-paneuropean/univers-next-paneuropean-400.woff2") format("woff2");font-weight:400;font-display:swap;size-adjust:99%}

.pdh--rates{--rh-logo:126px;--rh1:max(68px,5.789vw);--rh2:max(92px,8.21vw);--rh-lead:max(21px,1.544vw);--rh-crumb:max(14px,.9526vw);--rh-k:calc(100vw / 1900)}
@media(max-width:1450px){.pdh--rates{--rh-logo:118px}}
@media(max-width:900px){.pdh--rates{--rh-logo:100px}}

/* ---------- header: the homepage's ---------- */
.pdh--rates .hph__brand{width:var(--rh-logo);height:var(--rh-logo);border-radius:10px;box-shadow:none}
@media(max-width:900px){.pdh--rates .hph__brand{border-radius:8px}}
@media(min-width:1101px){.pdh--rates .pdh__header.hph{inset:50px var(--hph-rail) auto}}
@media(max-width:1100px){.pdh--rates .pdh__frame,.pdh--rates .pdh__frame{padding-top:50px}}

/* ---------- type: the homepage hero's ---------- */
body .pdh--rates .pdh__crumbs{font-family:"RH Label",Arial,sans-serif!important;font-weight:400;font-size:var(--rh-crumb);letter-spacing:.2em;line-height:1.4;gap:calc(14 * var(--rh-k))}
body .pdh--rates .pdh__crumbs::before{width:clamp(34px,2.4vw,46px);margin-right:calc(6 * var(--rh-k))}
body .pdh--rates .pdh__title{margin-top:calc(34 * var(--rh-k))}
body .pdh--rates .pdh__title-main{font-family:"RH Display",Georgia,serif!important;font-weight:400!important;font-size:var(--rh1);line-height:.93;letter-spacing:-.012em;margin-left:0}
body .pdh--rates .pdh__title-script{font-family:"RH Accent",cursive!important;font-weight:400!important;font-style:normal!important;font-size:var(--rh2);line-height:1;letter-spacing:0;word-spacing:0;margin:calc(-19.9 * var(--rh-k)) 0 0 0;transform:none}
body .pdh--rates .pdh__lead{font-family:"RH Text",Arial,sans-serif!important;font-weight:400;font-size:var(--rh-lead);line-height:1.3;letter-spacing:-.008em;margin:calc(11.2 * var(--rh-k)) 0 0 0;max-width:calc(660 * var(--rh-k))}
body .pdh--rates .hph__book,body .pdh--rates .hph__menu{font-family:"HP Text",Arial,sans-serif}
body .pdh--rates .pdh__lead{text-wrap:balance}
/* the copy is larger than the plate's own teal wash, so a soft scrim in the same teal carries the white text over the palms and sand behind the end of the lines */
.pdh--rates::before{content:"";position:absolute;z-index:0;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(1,56,62,.5) 0,rgba(1,56,62,.46) 30%,rgba(1,56,62,.26) 44%,rgba(1,56,62,.1) 54%,rgba(1,56,62,0) 62%),linear-gradient(0deg,rgba(1,56,62,.42) 0,rgba(1,56,62,0) 42%)}

/* ---------- desktop: copy bottom-anchored on the rails with 100px under it (the homepage hero's rhythm) ---------- */
@media(min-width:1101px){
 .pdh--rates{display:grid;aspect-ratio:auto;min-height:calc(833 * 100vw / 1900)}
 .pdh--rates .pdh__frame{position:relative;inset:auto;grid-area:1/1;display:flex;flex-direction:column;justify-content:flex-end;box-sizing:border-box;padding:calc(50px + var(--rh-logo) + 60px) var(--hph-rail) 100px}
 .pdh--rates .pdh__copy{position:relative;left:auto;top:auto;width:auto;max-width:calc(760 * var(--rh-k));margin:0}
}

/* ---------- tablets / phones (the base CSS flows the hero below 1100): homepage sizes ---------- */
@media(max-width:1100px){
 .pdh--rates .pdh__frame{padding-bottom:70px}
 body .pdh--rates .pdh__copy{margin-top:clamp(80px,14cqw,108px);max-width:620px}
 body .pdh--rates .pdh__crumbs{font-size:max(12px,12.672px)}
 body .pdh--rates .pdh__title{margin-top:24px}
 body .pdh--rates .pdh__title-main{font-size:68px;white-space:nowrap}
 body .pdh--rates .pdh__title-script{font-size:92px;margin:-9px 0 0;white-space:nowrap;line-height:1.1}
 body .pdh--rates .pdh__lead{font-size:21px;line-height:1.3;max-width:520px;margin-top:20px}
}
@media(max-width:900px){
 body .pdh--rates .pdh__crumbs{font-size:clamp(10px,1.65vw,13px);letter-spacing:.17em}
 body .pdh--rates .pdh__title-main{font-size:clamp(60px,13.1vw,106px);line-height:.96}
 body .pdh--rates .pdh__title-script{font-size:clamp(65px,15.1vw,115px)}
 body .pdh--rates .pdh__lead{font-size:clamp(21px,3.2vw,26px);max-width:510px}
}
@media(max-width:540px){
 body .pdh--rates .pdh__crumbs{font-size:10px;letter-spacing:.14em}
 body .pdh--rates .pdh__title-main{font-size:clamp(52px,13.9vw,72px);letter-spacing:-.05em}
 body .pdh--rates .pdh__title-script{font-size:clamp(56px,14.7vw,76px);letter-spacing:-.025em}
 body .pdh--rates .pdh__lead{font-size:21px;line-height:1.35;margin-top:25px}
}
@media(max-width:360px){
 body .pdh--rates .pdh__title-main{font-size:47px}
 body .pdh--rates .pdh__title-script{font-size:51px}
 body .pdh--rates .pdh__lead{font-size:19px}
}

/* ---------- the open menu (Night Tide) copies the hero header, so it moves with it ---------- */
.page-rates .ov.mnt{--top:50px;--logo:126px}
.page-rates .mnt .ov__top img{border-radius:10px}
.page-rates .mnt .ov__nav{padding-top:184px}
@media(max-width:1450px){.page-rates .ov.mnt{--logo:118px}.page-rates .mnt .ov__nav{padding-top:158px}}
@media(min-width:901px) and (max-height:820px){.page-rates .mnt .ov__nav{padding-top:134px}}
@media(min-width:901px) and (max-width:1450px) and (max-height:820px){.page-rates .mnt .ov__nav{padding-top:128px}}
@media(max-width:900px){.page-rates .ov.mnt{--top:50px;--logo:100px}.page-rates .mnt .ov__top img{border-radius:8px}.page-rates .mnt .ov__nav{padding-top:40px}}