/* Park Details hero v8 — copies the 2000 × 750 "Comfort inside, The Gulf Outside." mockup (2026-09-30).
   Replaces park-details-hero.css; linked LAST so it also beats park-details-mockup-type.css.
   Frame: 1900 px wide (the mockup at 0.95), every length in frame px × --u (= 100cqw / 1900).
   Rails: the logo's left edge sits on 170, the Book a Stay pill's right edge on 1730 (the mockup's left group moves
   +70.25 px, its right group −95.9 px). Top: logo and pill start 150 px from the top (everything moves down 120.55 px,
   so the plate carries 127 mockup px of extra sky: 2000 × 877 → a 1900 × 833 frame).
   Plate: pool-plate-v8 = the mockup with the logo, words, nav and button removed (LaMa); waves, palms and pool stay.
   Faces: the ones the mockup was drawn from — Newsreader (title), Fractis (script), Avenir (lead), Montserrat (labels). */
@font-face{font-family:"PDH8 Newsreader";src:url("../fonts/hero/newsreader-var.woff2") format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"PDH8 Fractis";src:url("../fonts/library/fractis/fractis-400-fixed.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"PDH8 Avenir";src:url("../fonts/library/avenir/avenir-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"PDH8 Montserrat";src:url("../fonts/hero/montserrat-var.woff2") format("woff2");font-weight:100 900;font-display:swap}

.pdh{
  --deep:#014146;
  --gold:#edba6f;
  position:relative;
  isolation:isolate;
  container-type:inline-size;
  width:100%;
  aspect-ratio:1900/833;
  z-index:2;
  background:#0b4a4f;
  color:#fff;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.pdh__bg{position:absolute;z-index:-1;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 0;pointer-events:none;user-select:none;-webkit-user-drag:none}
.pdh__frame{--u:calc(100cqw / 1900);position:absolute;z-index:1;inset:0}
.pdh a{text-decoration:none}
.pdh :where(p,h1,ul){margin:0;padding:0;list-style:none}
.pdh__copy,.pdh__copy *{-webkit-user-select:text;user-select:text}

/* ---------- header ---------- */
.pdh__header{position:absolute;inset:0 0 auto;height:0}
.pdh .pdh__brand{
  position:absolute;
  left:calc(170 * var(--u));
  top:calc(150 * var(--u));
  display:block;
  width:calc(117 * var(--u));
  line-height:0;
  border-radius:calc(4 * var(--u));
  overflow:hidden;
  box-shadow:0 calc(6 * var(--u)) calc(18 * var(--u)) rgba(0,30,34,.25);
  transition:transform .2s ease;
}
.pdh__brand img{display:block;width:100%;height:auto}
.pdh__brand:hover{transform:translateY(-2px)}

/* nav: five links, a hairline after each, then the pill (mockup: 64 px between words, separators centred) */
.pdh .pdh__links{
  position:absolute;
  right:calc((1900 - 1502.95 + 26.6) * var(--u));
  top:calc(159.5 * var(--u));
  display:flex;
  align-items:center;
  height:calc(27.6 * var(--u));
}
.pdh__links li{display:flex;align-items:center;height:100%}
.pdh__links li::after{content:"";display:block;width:max(1px,calc(1 * var(--u)));height:100%;background:rgba(255,255,255,.72)}
.pdh .pdh__links a{
  display:block;
  padding:0 calc(var(--nav-pad, 28.2) * var(--u));
  color:#fff;
  font:400 calc(var(--nav-fs, 16.2) * var(--u))/1 "PDH8 Avenir",Arial,sans-serif;
  letter-spacing:var(--nav-ls, .02em);
  text-transform:uppercase;
  white-space:nowrap;
  text-shadow:0 1px 2px rgba(0,40,70,.18);
  transition:opacity .2s ease;
}
.pdh__links a:hover{opacity:.78}

.pdh .pdh__book{
  position:absolute;
  left:calc(1502.95 * var(--u));
  top:calc(149 * var(--u));
  display:flex;
  align-items:center;
  width:calc(227.05 * var(--u));
  height:calc(48.5 * var(--u));
  padding:0 0 0 calc(33.2 * var(--u));
  box-sizing:border-box;
  border-radius:999px;
  background:var(--deep);
  color:#fff;
  font:400 calc(var(--nav-fs, 16.2) * var(--u))/1 "PDH8 Avenir",Arial,sans-serif;
  letter-spacing:var(--book-ls, .11em);
  text-transform:uppercase;
  white-space:nowrap;
  box-shadow:0 calc(8 * var(--u)) calc(20 * var(--u)) rgba(0,30,34,.22);
  transition:background .2s ease,transform .2s ease;
}
.pdh__book-chip{
  position:absolute;
  left:calc((1673.95 - 1502.95) * var(--u));
  top:50%;
  display:grid;
  place-items:center;
  width:calc(33.3 * var(--u));
  height:calc(33.3 * var(--u));
  border-radius:50%;
  background:#fafafa;
  color:var(--deep);
  transform:translateY(-50%);
}
.pdh__book-chip svg{width:calc(14 * var(--u));height:calc(14 * var(--u));fill:none;stroke:currentColor;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease}
.pdh__book:hover{background:#0a4f59;transform:translateY(-2px)}
.pdh__book:hover .pdh__book-chip svg{transform:translateX(2px)}

/* ---------- copy ---------- */
.pdh .pdh__copy{position:absolute;left:calc(243 * var(--u));top:calc(var(--copy-top, 306.5) * var(--u));width:calc(700 * var(--u))}
.pdh .pdh__crumbs{
  display:flex;
  align-items:center;
  gap:calc(var(--cr-gap, 12) * var(--u));
  margin:0 0 0 calc(4.75 * var(--u));
  color:#d9e6e4;
  font:400 calc(var(--cr-fs, 12.2) * var(--u))/1 "PDH8 Montserrat",Arial,sans-serif;
  letter-spacing:var(--cr-ls, .46em);
  text-transform:uppercase;
}
.pdh .pdh__crumbs::before{content:"";flex:none;width:calc(45 * var(--u));height:max(1px,calc(1.3 * var(--u)));margin-right:calc(var(--rule-gap, 5.5) * var(--u));background:rgba(255,255,255,.78)}
.pdh .pdh__crumbs a{color:inherit;transition:color .2s ease}
.pdh .pdh__crumbs a:hover{color:#fff}
.pdh .pdh__title{margin:calc(var(--t-gap, 30) * var(--u)) 0 0;font-weight:400;letter-spacing:0}
.pdh .pdh__title-main{
  display:block;
  color:#fbfbfb;
  font:var(--t-wt, 540) calc(var(--t-fs, 80) * var(--u))/1 "PDH8 Newsreader",Georgia,serif;
  letter-spacing:var(--t-ls, -.018em);
  white-space:nowrap;
  text-shadow:0 calc(2 * var(--u)) calc(6 * var(--u)) rgba(0,24,28,.28);
}
.pdh .pdh__title-script{
  display:block;
  margin:calc(var(--s-gap, 6) * var(--u)) 0 0 calc(var(--s-dx, 15) * var(--u));
  color:var(--gold);
  font:400 calc(var(--s-fs, 77) * var(--u))/var(--s-lh, 1.5) "PDH8 Fractis",cursive;
  letter-spacing:var(--s-ls, -.1em);
  word-spacing:0;
  white-space:nowrap;
  -webkit-text-stroke:0;
  text-shadow:0 calc(2 * var(--u)) calc(6 * var(--u)) rgba(0,24,28,.25);
}
.pdh__title-script .pdm-kern{letter-spacing:inherit}
.pdh .pdh__lead{
  margin:calc(var(--l-gap, 22) * var(--u)) 0 0 calc(10 * var(--u));
  max-width:calc(var(--l-w, 520) * var(--u));
  color:#eff5f4;
  font:400 calc(var(--l-fs, 22.8) * var(--u))/calc(33.25 * var(--u)) "PDH8 Avenir",Arial,sans-serif;
  letter-spacing:var(--l-ls, .005em);
  text-shadow:0 1px 3px rgba(0,24,28,.3);
}

.pdh a:focus-visible,.pdh button:focus-visible{outline:3px solid var(--gold);outline-offset:4px}

/* ---------- below 1100px: the layout flows; the link row scrolls under the copy ---------- */
@container (max-width:1100px){
  .pdh__frame{position:relative;inset:auto;display:flex;flex-direction:column;min-height:100%;padding:24px clamp(20px,5cqw,56px) 32px;box-sizing:border-box}
  .pdh__header{position:static;height:auto;display:flex;align-items:center;justify-content:space-between;gap:12px}
  .pdh .pdh__brand{position:static;width:clamp(84px,11cqw,112px);border-radius:4px}
  .pdh .pdh__book{position:relative;left:auto;top:auto;width:auto;height:48px;gap:14px;padding:0 6px 0 20px;font-size:14px;letter-spacing:.05em}
  .pdh__book-chip{position:static;transform:none;width:36px;height:36px}
  .pdh__book-chip svg{width:13px;height:13px}
  .pdh__nav{order:3;margin-top:28px;min-width:0}
  .pdh .pdh__links{position:static;height:auto;overflow-x:auto;scrollbar-width:none}
  .pdh__links::-webkit-scrollbar{display:none}
  .pdh__links li{height:22px}
  .pdh .pdh__links a{padding:0 16px;font-size:13px}
  .pdh__links li:first-child a{padding-left:0}
  .pdh__links li:last-child::after{display:none}
  .pdh .pdh__copy{position:static;order:2;width:auto;max-width:620px;margin-top:clamp(36px,8cqw,64px)}
  .pdh .pdh__crumbs{margin:0;gap:10px;font-size:12px}
  .pdh .pdh__crumbs::before{width:32px;height:1px;margin-right:4px}
  .pdh .pdh__title{margin-top:14px}
  .pdh .pdh__title-main{font-size:clamp(44px,9cqw,84px);white-space:normal}
  .pdh .pdh__title-script{margin:2px 0 0 .2em;font-size:clamp(50px,9.5cqw,86px);line-height:1.3;white-space:normal}
  .pdh .pdh__lead{max-width:34ch;margin:10px 0 0;font-size:clamp(17px,2.6cqw,21px);line-height:1.5}
}
@media (max-width:1100px){
  .pdh{aspect-ratio:auto;min-height:640px}
  .pdh__bg{object-position:0 100%}
}
@media (prefers-reduced-motion:reduce){.pdh *{transition:none!important}}

/* "Inside the gate" starts 150 px below the hero now that no tab pill hangs over the seam (was 42.5 + 150 − 7.5). */
@media (min-width:1101px){.ig{--ig-pad:calc(142.5 * 100vw / 1900)}}