/* ============================================================
   v3-refined — "Refined Classic"
   Ported from the Claude Design Canvas export (home-a.jsx).
   Tokens from design-system/colors_and_type.css + page-scope styles.

   Display face Ogg is delivered by Adobe Fonts kit pyx2otj. If it
   doesn't load on our domain, the cascade falls to Playfair Display
   then Georgia. DM Sans + Playfair Italic are self-hosted variable.
   ============================================================ */
@import url("https://use.typekit.net/pyx2otj.css");

@font-face {
  font-family: 'DM Sans';
  src: url('/_assets/fonts/DMSans-VariableFont_opsz_wght.woff2') format('woff2-variations'),
       url('/_assets/fonts/DMSans-VariableFont_opsz_wght.woff2') format('woff2');
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('/_assets/fonts/DMSans-Italic-VariableFont_opsz_wght.woff2') format('woff2-variations'),
       url('/_assets/fonts/DMSans-Italic-VariableFont_opsz_wght.woff2') format('woff2');
  font-weight: 100 1000;
  font-style: italic;
  font-display: swap;
}
/* Playfair Display Italic @font-face removed per Val (2026-06-03).
   Every site reference that previously used --font-italic now resolves
   to the same display stack as h1/h2/h3 (ogg → fallback). */

/* Ogg — self-hosted from Adobe Fonts (Typekit kit pyx2otj). Three weights
   we actually use on the site. Files downloaded 2026-06-03 and committed
   alongside the other self-hosted webfonts. */
@font-face {
  font-family: 'ogg';
  src: url('/_assets/fonts/Ogg-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'ogg';
  src: url('/_assets/fonts/Ogg-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'ogg';
  src: url('/_assets/fonts/Ogg-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* Brand colours */
  --ph-plum:           #624c79;
  --ph-plum-deep:      #4a3a5c;
  --ph-plum-darker:    #2f243c;
  --ph-plum-soft:      #8b7aa3;
  --ph-plum-wash:      #ede9f1;
  --ph-plum-mist:      #f6f3f8;

  --ph-paper:          #faf8f5;
  --ph-sand:           #f5f1ea;
  --ph-stone:          #e8e2d6;
  --ph-ink:            #1f1a26;
  --ph-mist:           #7a6f85;

  --ph-brass:          #b89968;
  --ph-gold:           #b89968;

  --ph-error:          #a44545;
  --ph-info:           var(--ph-plum);

  --bg:                var(--ph-paper);
  --bg-elevated:       #ffffff;
  --bg-subtle:         var(--ph-sand);
  --bg-inverse:        var(--ph-plum-darker);

  --fg-1:              var(--ph-ink);
  --fg-2:              #3a2f47;
  --fg-3:              var(--ph-mist);
  --fg-onPlum:         #faf8f5;
  --fg-link:           var(--ph-plum);

  --border:            var(--ph-stone);
  --border-strong:     var(--ph-stone);
  --hairline:          rgba(31, 26, 38, 0.08);

  /* Type families — Ogg primary, Playfair fallback, Georgia last */
  --font-display:      'ogg', Georgia, 'Times New Roman', serif;
  --font-serif:        'ogg', Georgia, 'Times New Roman', serif;
  /* Per Val: unified with --font-display (was Playfair Italic). Any spot
     that previously rendered in italic via this variable now matches the
     headings. Italic font-style declarations were stripped alongside. */
  --font-italic:       'ogg', Georgia, 'Times New Roman', serif;
  --font-sans:         'DM Sans', 'Helvetica Neue', system-ui, -apple-system, sans-serif;
  --font-mono:         ui-monospace, 'SF Mono', Menlo, monospace;

  --t-xs:              12px;
  --t-sm:              14px;
  --t-base:            16px;
  --t-md:              18px;
  --t-lg:              20px;
  --t-xl:              24px;
  --t-2xl:             32px;
  --t-3xl:             40px;
  --t-4xl:             56px;
  --t-5xl:             72px;
  --t-6xl:             96px;

  --lh-tight:          1.1;
  --lh-snug:           1.25;
  --lh-normal:         1.5;
  --lh-relaxed:        1.7;

  --ls-display:        0.08em;
  --ls-eyebrow:        0.22em;
  --ls-tight:          -0.01em;
  --ls-normal:         0;

  --w-light:           300;
  --w-regular:         400;
  --w-medium:          500;
  --w-semibold:        600;
  --w-bold:            700;

  --r-none:            0;
  --r-sm:              2px;
  --r-md:              4px;
  --r-lg:              8px;
  --r-xl:              16px;
  --r-card:            25px;
  --r-pill:            999px;

  --shadow-1:          0 1px 2px rgba(31, 26, 38, 0.06);
  --shadow-2:          0 2px 8px rgba(31, 26, 38, 0.08);
  --shadow-3:          0 8px 24px rgba(31, 26, 38, 0.10);
  --shadow-4:          0 20px 48px rgba(31, 26, 38, 0.14);
  --shadow-plum:       0 12px 32px rgba(98, 76, 121, 0.25);

  --ease-out:          cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out:       cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:          150ms;
  --dur-base:          250ms;
  --dur-slow:          450ms;
}

/* ============================================================
   Reset + base typography (scoped to body.v3 to not leak)
   ============================================================ */
/* Always reserve the scrollbar gutter so opening a modal/drawer (which
   locks body scroll) never removes the scrollbar and shifts the page.
   One global fix for every overlay — no per-component compensation. */
html { scrollbar-gutter: stable; }
/* The build wraps every <img …webp> in a <picture> for old-Safari fallbacks.
   display:contents removes the wrapper's box so existing `… img` layout rules
   (object-fit, width/height) keep applying exactly as before. */
picture { display: contents; }
/* iOS 13 doesn't support :where(), so Tailwind's `[hidden]:where(…)` reset is
   dropped there — and a class that sets `display` (e.g. the consent panel's
   display:flex) then overrides the UA [hidden] rule, leaving "hidden" elements
   visible. This plain rule restores correct [hidden] behaviour everywhere. */
[hidden] { display: none !important; }
/* Mobile drawer starts off-screen via transform: translate (universal) rather
   than Tailwind's `translate-x-full`, which uses the `translate` property —
   unsupported before iOS 14.1, so on iOS 13 the drawer wouldn't hide. The JS
   (drawer-script.ejs) toggles style.transform to open/close. */
[data-drawer-panel],
#nav-drawer [data-drawer-pane]:not([data-drawer-pane="root"]) { transform: translateX(100%); }
/* Drawer panel: cream background (Val 2026-06-05 — Rosewood-style). Default
   plum fallback removed since the new drawer doesn't use a gradient. */
[data-drawer-panel] { background-color: var(--ph-paper); }
#nav-drawer .ph-drawer__overlay { background: rgba(0, 0, 0, 0.4); opacity: 0; transition: opacity 300ms; }
/* Flexbox `gap` is unsupported before iOS 14.1, so flex rows that rely on it
   collapse to no spacing. On old Safari only (detected via missing `inset`,
   ~iOS 14.5−) add margin between adjacent items; modern browsers keep `gap`. */
@supports not (inset: 0) {
  .ph-btn + .ph-btn { margin-left: 12px; }
  .ph-hs__track > * + * { margin-left: 24px; }
}
body.v3 { background: var(--ph-paper); color: var(--fg-1); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: var(--t-base); line-height: var(--lh-normal); }
body.v3 *, body.v3 *::before, body.v3 *::after { box-sizing: border-box; }
/* Brand rule: never auto-hyphenate or break words anywhere on the site.
   Proper names must stay intact — wrap them in .ph-name to keep the whole
   name on one line (it wraps as a single unit instead of splitting). */
body.v3, body.v3 * { -webkit-hyphens: none; -ms-hyphens: none; hyphens: none; overflow-wrap: normal; word-break: normal; }
.ph-name { white-space: nowrap; }
body.v3 img { display: block; max-width: 100%; }
body.v3 button { font-family: inherit; cursor: pointer; }

/* :where() keeps default heading specificity at element-level (0,0,1) so that
   component classes (.ph-hero__h1, .ph-footer__h, etc.) at (0,1,0) win without
   needing artificial bumps. Without :where(), body.v3 h1 = (0,1,1) > class. */
:where(body.v3) h1, :where(body.v3) .h1 { font-family: var(--font-display); font-weight: var(--w-medium); font-size: var(--t-4xl); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); color: var(--fg-1); margin: 0; }
:where(body.v3) h2, :where(body.v3) .h2 { font-family: var(--font-display); font-weight: var(--w-medium); font-size: var(--t-3xl); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); color: var(--fg-1); margin: 0; }
:where(body.v3) h3, :where(body.v3) .h3 { font-family: var(--font-display); font-weight: var(--w-medium); font-size: var(--t-2xl); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); color: var(--fg-1); margin: 0; }
:where(body.v3) h4, :where(body.v3) .h4 { font-family: var(--font-display); font-weight: var(--w-medium); font-size: var(--t-xl); line-height: var(--lh-snug); color: var(--fg-1); margin: 0; }
:where(body.v3) h5, :where(body.v3) .h5, :where(body.v3) .eyebrow { font-family: var(--font-sans); font-weight: var(--w-semibold); font-size: var(--t-xs); line-height: var(--lh-normal); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--ph-plum); margin: 0; }
:where(body.v3) p, :where(body.v3) .body { font-family: var(--font-sans); font-size: 17px; line-height: var(--lh-relaxed); color: var(--fg-2); margin: 0; text-wrap: pretty; }
:where(body.v3) h1, :where(body.v3) h2, :where(body.v3) h3, :where(body.v3) h4, :where(body.v3) .h1, :where(body.v3) .h2, :where(body.v3) .h3, :where(body.v3) .h4 { text-wrap: balance; }
:where(body.v3) .lead { font-family: var(--font-display); font-size: var(--t-lg); line-height: var(--lh-relaxed); color: var(--fg-2); }
:where(body.v3) .caption { font-family: var(--font-sans); font-size: var(--t-sm); color: var(--fg-3); line-height: var(--lh-normal); }
:where(body.v3) a { color: var(--fg-link); text-decoration: none; text-underline-offset: 4px; transition: color var(--dur-fast) var(--ease-out); }
:where(body.v3) a:hover { color: var(--ph-plum-deep); text-decoration: underline; }
:where(body.v3) hr, :where(body.v3) .rule { border: 0; height: 1px; background: var(--ph-brass); opacity: 0.6; }

/* ============================================================
   Hero white-text legibility — explicit color + stronger shadow.
   The hero sits over photography; everything in it must be white
   with a shadow strong enough to read against a bright sky.
   ============================================================ */
.ph-hero__copy { color: #ffffff; }
.ph-hero__copy .ph-eyebrow,
.ph-hero__copy .ph-hero__eyebrow,
.ph-hero__copy h1,
.ph-hero__copy p,
.ph-hero__copy a { color: #ffffff; }
.ph-hero__eyebrow { color: #ffffff !important; text-shadow: 0 1px 6px rgba(0,0,0,0.55), 0 2px 14px rgba(0,0,0,0.35); }
.ph-hero__h1 { color: #ffffff !important; text-shadow: 0 2px 12px rgba(0,0,0,0.55), 0 4px 28px rgba(0,0,0,0.35); }
.ph-hero__sub { color: rgba(255,255,255,0.95) !important; text-shadow: 0 1px 8px rgba(0,0,0,0.65), 0 2px 18px rgba(0,0,0,0.4); }

/* ============================================================
   Buttons
   ============================================================ */
.ph-btn { font-family: var(--font-sans); font-size: 13px; font-weight: var(--w-semibold); letter-spacing: 0.14em; text-transform: uppercase; padding: 16px 30px; border-radius: var(--r-card); border: 1px solid transparent; transition: all var(--dur-base) var(--ease-out); display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; line-height: 1; cursor: pointer; }
/* Buttons styled as anchors must never inherit the global a:hover underline
   or the plum-deep link colour. Pin text-decoration none across every state. */
.ph-btn, .ph-btn:hover, .ph-btn:focus, .ph-btn:focus, .ph-btn:active, .ph-btn:visited { text-decoration: none; }
.ph-btn--sm { font-size: 11px; padding: 12px 22px; letter-spacing: 0.16em; }
.ph-btn--primary,
.ph-btn--primary:hover,
.ph-btn--primary:focus,
.ph-btn--primary:focus,
.ph-btn--primary:active,
.ph-btn--primary:visited { color: var(--fg-onPlum); }
.ph-btn--primary { background: var(--ph-plum); }
.ph-btn--primary:hover { background: var(--ph-plum-deep); box-shadow: var(--shadow-plum); }
.ph-btn--primary:active { transform: translateY(1px); box-shadow: var(--shadow-1); }
.ph-btn--secondary { background: transparent; color: var(--ph-plum); border-color: var(--ph-plum); }
.ph-btn--secondary:hover,
.ph-btn--secondary:focus,
.ph-btn--secondary:focus { background: var(--ph-plum); color: var(--fg-onPlum); }
.ph-btn--secondary:active { transform: translateY(1px); }
.ph-btn--paper,
.ph-btn--paper:hover,
.ph-btn--paper:focus,
.ph-btn--paper:focus,
.ph-btn--paper:active,
.ph-btn--paper:visited { color: var(--ph-plum); }
.ph-btn--paper { background: var(--ph-paper); }
.ph-btn--paper:hover { background: #fff; box-shadow: var(--shadow-2); }
.ph-btn--outline-paper,
.ph-btn--outline-paper:visited { background: transparent; color: #ffffff; border-color: #ffffff; }
.ph-btn--outline-paper:hover,
.ph-btn--outline-paper:focus,
.ph-btn--outline-paper:focus { background: #ffffff; color: var(--ph-plum); border-color: #ffffff; }
/* Touch devices have no real hover, but tapping a button leaves :hover/:focus
   "stuck", so its text colour flips and stays changed. Neutralise the colour-
   changing hovers on touch so buttons keep their resting appearance. */
@media (hover: none) {
  .ph-btn--outline-paper:hover,
  .ph-btn--outline-paper:focus { background: transparent; color: #ffffff; border-color: #ffffff; }
  .ph-btn--secondary:hover,
  .ph-btn--secondary:focus { background: transparent; color: var(--ph-plum); }
  .ph-btn--primary:hover { background: var(--ph-plum); box-shadow: none; }
}
/* Ghost button — text + arrow beside it, no underline. Hover: colour to
   Plum Soft and rotate the arrow 45° upward (per design system). */
.ph-btn--ghost { background: transparent; color: var(--ph-plum); padding: 0; border: 0; border-radius: 0; }
.ph-btn--ghost svg { transition: transform var(--dur-base) var(--ease-out); }
.ph-btn--ghost:hover, .ph-btn--ghost:focus { color: var(--ph-plum-soft); }
.ph-btn--ghost:hover svg, .ph-btn--ghost:focus svg { transform: rotate(-45deg); }

.ph-link-arrow { font-family: var(--font-sans); font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ph-plum); display: inline-flex; align-items: center; gap: 10px; text-decoration: none; cursor: pointer; border: 0; background: none; padding: 0; }
.ph-link-arrow svg { transition: transform var(--dur-base) var(--ease-out); }
.ph-link-arrow:hover { color: var(--ph-plum-deep); }
.ph-link-arrow:hover svg { transform: rotate(-45deg); }

/* ============================================================
   Layout primitives
   ============================================================ */
.ph-wrap { max-width: 1280px; margin: 0 auto; padding: 0 56px; }
.ph-wrap--wide { max-width: 1360px; margin: 0 auto; padding: 0 40px; }
.ph-section { padding: 96px 0; }
.ph-section--tight { padding: 64px 0; }
.ph-section--loose { padding: 128px 0; }

.ph-eyebrow { font-family: var(--font-sans); font-size: 11px; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ph-plum); }
.ph-eyebrow--paper { color: var(--fg-onPlum); opacity: 0.85; }

.ph-rule { height: 1px; background: var(--ph-brass); opacity: 0.55; border: 0; display: block; }

/* ============================================================
   Announcement bar
   ============================================================ */
.ph-announce {
  position: fixed; top: 0; left: 0; right: 0; z-index: 55;
  background: var(--ph-plum-darker); color: var(--fg-onPlum);
  font-family: var(--font-sans); font-size: 12px; letter-spacing: 0.18em;
  text-transform: uppercase; text-align: center; padding: 10px 24px;
  font-weight: 500;
}
.ph-announce strong { font-weight: 600; color: var(--ph-brass); margin-right: 10px; letter-spacing: 0.22em; }
.ph-announce a { color: inherit; text-decoration: underline; text-underline-offset: 4px; }

/* Fade-in on scroll. JS adds .fade-on-scroll to every section + footer
   after the hero on load, then an IntersectionObserver flips .is-visible
   when the element enters the viewport. Respect prefers-reduced-motion. */
.fade-on-scroll {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 900ms cubic-bezier(0.22, 0.61, 0.36, 1), transform 900ms cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}
.fade-on-scroll.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .fade-on-scroll { opacity: 1; transform: none; transition: none; }
}

/* Body top offset clears the fixed announcement bar — sized in JS to match
   the bar's actual rendered height so there's never a gap underneath. The
   bottom offset clears the fixed booking bar (~80px). */
body.v3 { padding-bottom: 96px; }
@media (max-width: 760px) {
  body.v3 { padding-bottom: 64px; }
}

/* ============================================================
   Header
   ============================================================ */
.ph-header { position: absolute; top: 0; left: 0; right: 0; z-index: 30; transition: background var(--dur-base) var(--ease-out); }
.ph-header--solid { position: relative; background: var(--ph-paper); border-bottom: 1px solid var(--hairline); }
.ph-header__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 32px; padding: 24px 56px; max-width: 1360px; margin: 0 auto; }
.ph-header__brand { justify-self: start; display: inline-flex; flex-shrink: 0; }
/* Lock to the height + native aspect ratio; flex-shrink: 0 stops the
   surrounding grid/flex from squashing it at narrow widths. */
.ph-header__brand img { height: 38px; width: auto; flex-shrink: 0; max-width: none; object-fit: contain; transition: filter var(--dur-base); }
.ph-header__brand--invert img { filter: brightness(0) invert(1); }
.ph-header__nav { display: flex; gap: 36px; }
.ph-header__nav a { font-family: var(--font-sans); font-size: 13px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-1); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: color var(--dur-fast); cursor: pointer; }
.ph-header__nav a:hover { color: var(--ph-plum); }
.ph-header--invert .ph-header__nav a { color: var(--fg-onPlum); }
.ph-header--invert .ph-header__nav a:hover { color: var(--ph-brass); }
.ph-header__nav a.is-active { color: var(--ph-brass); position: relative; }
.ph-header--invert .ph-header__nav a.is-active { color: var(--ph-brass); }
.ph-header__nav a.is-active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px;
  height: 1px; background: var(--ph-brass);
}
.ph-header__nav .caret { width: 9px; height: 9px; opacity: 0.6; }

/* Desktop dropdown for nav items with children. Submenu is hidden until
   the parent is hovered/focused; renders below the nav with a soft card. */
.ph-nav-item { position: relative; display: inline-flex; align-items: center; }
.ph-nav-chev { margin-left: 4px; opacity: 0.75; transition: transform var(--dur-fast); }
.ph-nav-item--has-children:hover .ph-nav-chev,
.ph-nav-item--has-children:focus-within .ph-nav-chev { transform: rotate(180deg); }
.ph-nav-submenu {
  position: absolute; top: 100%; left: 50%;
  transform: translate(-50%, -4px);
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  box-shadow: 0 12px 36px rgba(31, 26, 38, 0.16);
  /* Top padding doubles as an invisible "bridge" between the nav link and
     the visible submenu content — keeps :hover alive as the mouse crosses
     the small distance between them without snapping back closed. */
  padding: 10px 0 8px;
  min-width: 220px;
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out), visibility 0s linear 200ms;
  z-index: 60;
}
.ph-nav-item--has-children:hover .ph-nav-submenu,
.ph-nav-item--has-children:focus-within .ph-nav-submenu {
  opacity: 1; visibility: visible; pointer-events: auto;
  /* No vertical translate — top edge of submenu sits flush with bottom of
     the nav link, so the hover trail never crosses an unclaimed pixel. */
  transform: translate(-50%, 0);
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out), visibility 0s;
}
.ph-nav-submenu__item {
  display: block; padding: 10px 22px;
  font-family: var(--font-sans); font-size: 12px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--fg-1) !important; text-decoration: none;
  white-space: nowrap;
}
.ph-nav-submenu__item:hover { background: var(--ph-sand); color: var(--ph-plum) !important; }
.ph-header__cta { display: flex; gap: 14px; justify-self: end; align-items: center; }
/* Hamburger icon — bump up so it's a comfortable tap target on tablet/mobile
   (the SVG ships at 22px; this enlarges it without touching every template). */
#nav-open svg { width: 28px; height: 28px; }

/* ============================================================
   Booking widget (visual; static for v3 first cut)
   ============================================================ */
/* minmax(0, fr) prevents columns from inflating beyond their fr share when
   content has a large intrinsic min-width — keeps the bar from overflowing
   horizontally without needing overflow:auto (which would clip the popovers). */
.ph-book { background: #fff; border: 1px solid var(--ph-stone); border-radius: var(--r-card); box-shadow: var(--shadow-3); padding: 14px; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.1fr) minmax(0, 1.1fr) minmax(0, 1.3fr) auto; align-items: stretch; gap: 6px; position: relative; z-index: 50; }
.ph-book__field { position: relative; padding: 14px 22px; border-radius: var(--r-md); display: flex; flex-direction: column; gap: 6px; cursor: pointer; transition: background var(--dur-fast); text-align: left; background: transparent; border: 0; font-family: inherit; color: inherit; }
.ph-book__field:hover { background: var(--ph-plum-mist); }
.ph-book__field + .ph-book__field { border-left: 1px solid var(--hairline); }
.ph-book__lbl { font-family: var(--font-sans); font-size: 10px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ph-plum); }
.ph-book__val { font-family: var(--font-serif); font-size: 17px; font-weight: 500; color: var(--fg-1); line-height: 1.2; }
.ph-book__val--muted { color: var(--ph-mist); font-style: italic; }
.ph-book__field input { border: 0; padding: 0; background: transparent; outline: none; font-family: var(--font-serif); font-size: 17px; color: var(--fg-1); width: 100%; }
.ph-book__btn { background: var(--ph-plum); color: var(--fg-onPlum); border: 0; border-radius: 50px; font-family: var(--font-sans); font-size: 13px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; padding: 0 36px; cursor: pointer; transition: background var(--dur-fast), box-shadow var(--dur-base) var(--ease-out); display: inline-flex; align-items: center; gap: 10px; }
.ph-book__btn:hover { background: var(--ph-plum-deep); box-shadow: var(--shadow-plum); }
.ph-book--docked { position: absolute; left: 50%; transform: translateX(-50%); bottom: 60px; width: min(1180px, calc(100% - 80px)); z-index: 100; }

/* Morphing booking bar:
   - On load: narrow rounded card docked at the bottom of the hero (since the
     hero is full-viewport, bar's bottom edge = hero's bottom edge in viewport).
   - As page scrolls: JS applies transform: translateY(-N) so the bar rides
     upward with the page until it caps at the top.
   - At the top: .is-at-top toggles in, bar expands to full-width and the
     border / shadow / popovers all flip downward. */
/* Per Val (2026-06-03): floats 50px below the nav initially, becomes
   sticky + full-width once the user scrolls past the threshold.
   --bookbar-top is the JS-computed offset for nav + announcement bar
   + 50px gap. Default 130px is a sane fallback for first paint. */
.ph-book--sticky {
  position: fixed;
  left: 0; right: 0; top: var(--bookbar-top, 130px); bottom: auto;
  z-index: 50;
  margin: 0 auto;
  max-width: min(1180px, calc(100% - 80px));
  width: 100%;
  background: rgba(250, 248, 245, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 12px 24px;
  border: 1px solid var(--hairline);
  border-radius: 22px;
  box-shadow: 0 14px 32px rgba(31, 26, 38, 0.18);
  transition: top 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
              max-width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
              padding 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
              border-radius 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
              border-color 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
              box-shadow 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.ph-book--sticky .ph-book__btn { border-radius: 50px; }

/* Popovers always open DOWNWARD from the bar, regardless of scroll position. */
/* Popovers open DOWNWARD; JS sets inline left:Npx to anchor under the
   trigger that opened them (Guests under Guests, Dates under Check-in, …). */
.ph-book--sticky .ph-book__pop { top: calc(100% + 12px); bottom: auto; }

/* Static "top dock" variant — used on content pages (e.g. blog) where the
   booking bar should render in normal flow directly below the header,
   full width, with no morphing scroll behavior. Body class
   `book-bar--top` disables the morphing JS; CSS overrides the fixed
   positioning here. */
body.book-bar--top .ph-book--sticky {
  position: static;
  transform: none !important;
  max-width: 100vw;
  width: 100%;
  margin: 0;
  border-radius: 0;
  border-left: 0; border-right: 0; border-top: 0;
  box-shadow: 0 4px 18px rgba(31, 26, 38, 0.08);
  background: var(--ph-paper);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body.book-bar--top .ph-book--sticky .ph-book__btn { border-radius: 50px; }
body.book-bar--top .ph-book--sticky .ph-book__pop { top: calc(100% + 12px); bottom: auto; }

/* Pinned at top: expand to full width, flatten corners, flip border + shadow
   downward, flip popovers to open downward. */
.ph-book--sticky.is-expanded {
  /* Animates from the docked 1180px cap up to viewport width. Must be a
     finite length — transitioning to the keyword `none` would snap instead
     of interpolating. */
  max-width: 100vw;
  /* margin stays "0 auto" so auto margins compute to 0 each side at full
     width — keeps the expansion symmetric instead of snapping to the left */
  padding: 12px 40px;
  border-color: transparent;
  border-bottom-color: var(--hairline);
  border-radius: 0;
  box-shadow: 0 6px 20px rgba(31, 26, 38, 0.10);
}
/* Popovers stay opening downward in expanded state too (no flip needed) */

/* ============================================================
   Instagram grid — live feed from /instagram/{slug}.
   Square tiles, subtle hover lift, dark-gradient overlay with
   like/comment counts on hover (matches IG's web grid behaviour).
   ============================================================ */
.ph-ig-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
/* Large tablet: 3 cols. iPad portrait (≤900px): 2 cols. Mobile (≤760px): 2 cols. */
@media (max-width: 1024px) { .ph-ig-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px)  { .ph-ig-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px)  { .ph-ig-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }

.ph-ig-tile {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 25px;
  background: #1c1320;
  text-decoration: none;
  color: #fff;
  transition: transform 220ms var(--ease-out);
}
.ph-ig-tile:hover { transform: scale(1.015); }
.ph-ig-tile img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 320ms var(--ease-out), filter 320ms var(--ease-out);
}
.ph-ig-tile:hover img { transform: scale(1.04); filter: brightness(0.7); }

/* Top-right indicator for video/carousel posts (white IG-style icon) */
.ph-ig-tile__type {
  position: absolute; top: 10px; right: 10px;
  display: grid; place-items: center;
  color: #fff;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
  pointer-events: none;
}

/* Hover overlay — gradient fade + centred stats */
.ph-ig-tile__overlay {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  display: grid; place-items: center;
  background: rgba(20, 14, 28, 0);
  opacity: 0;
  transition: opacity 220ms var(--ease-out), background 220ms var(--ease-out);
  pointer-events: none;
}
.ph-ig-tile:hover .ph-ig-tile__overlay,
.ph-ig-tile:focus .ph-ig-tile__overlay {
  opacity: 1;
  background: rgba(20, 14, 28, 0.32);
}
.ph-ig-tile__stats {
  display: flex; gap: 28px;
  font-family: var(--font-sans);
  font-size: 16px; font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.ph-ig-tile__stat {
  display: inline-flex; align-items: center; gap: 8px;
}
.ph-ig-tile__stat svg { display: block; }

/* ============================================================
   Event inquiry form — used on the Meetings & Events page.
   Two-column grid that collapses to one column on mobile.
   ============================================================ */
.ph-evform__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px 40px;
}
.ph-evform__field { display: block; }
.ph-evform__field--full { grid-column: span 2; }
.ph-evform__l {
  display: block;
  font-family: var(--font-sans);
  font-size: 11px; font-weight: 600; letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ph-plum);
  margin-bottom: 8px;
}
.ph-evform__l .req { color: var(--ph-brass); margin-left: 2px; }
/* Per Val (2026-06-04, ref contact form): pill-style inputs on a sand form
   card. Each control gets its own rounded white pill with a stone border;
   labels stay above. Focus adds a plum ring; invalid swaps to red border. */
.ph-evform__field > input,
.ph-evform__field > select,
.ph-evform__field > textarea {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 16px; line-height: 1.5;
  color: var(--fg-1);
  background: #fff;
  border: 1px solid var(--ph-stone);
  border-radius: var(--r-card);
  padding: 14px 18px;
  outline: none;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.ph-evform__field > textarea { min-height: 120px; resize: vertical; }
.ph-evform__field > input:focus,
.ph-evform__field > select:focus,
.ph-evform__field > textarea:focus {
  border-color: var(--ph-plum);
  box-shadow: 0 0 0 3px rgba(98,76,121,0.08);
}
.ph-evform__field > input::placeholder,
.ph-evform__field > textarea::placeholder { color: var(--fg-3); opacity: 1; }
.ph-evform__field > select {
  appearance: none; padding-right: 44px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ph-plum) 50%),
    linear-gradient(135deg, var(--ph-plum) 50%, transparent 50%);
  background-position: calc(100% - 22px) calc(50% + 1px), calc(100% - 16px) calc(50% + 1px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
@media (max-width: 760px) {
  .ph-evform__grid { grid-template-columns: 1fr; gap: 24px; }
  .ph-evform__field--full { grid-column: auto; }
}

/* ============================================================
   Pill radio group (CSS-only) — styled radios for guest counts,
   yes/no toggles, etc. Native radios drive value + a11y; the label
   face is the pill. Old-Safari safe (:focus + adjacent sibling).
   ============================================================ */
.ph-pillgroup { display: flex; flex-wrap: wrap; gap: 10px; }
.ph-pill { position: relative; display: inline-flex; }
.ph-pill input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.ph-pill__face { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-sans); font-size: 14px; font-weight: 500; letter-spacing: 0.04em; color: var(--ph-plum); background: transparent; border: 1px solid var(--ph-stone); border-radius: var(--r-pill, 999px); padding: 11px 22px; cursor: pointer; white-space: nowrap; transition: background var(--dur-fast, 160ms) var(--ease-out, ease), color var(--dur-fast, 160ms) var(--ease-out, ease), border-color var(--dur-fast, 160ms) var(--ease-out, ease); }
.ph-pill__face:hover { border-color: var(--ph-plum); background: var(--ph-plum-mist); }
.ph-pill input:checked + .ph-pill__face { background: var(--ph-plum); color: #fff; border-color: var(--ph-plum); }
.ph-pill input:focus + .ph-pill__face { box-shadow: 0 0 0 3px var(--ph-plum-mist); }
.ph-pill input:checked:focus + .ph-pill__face { box-shadow: 0 0 0 3px var(--ph-brass); }

/* ============================================================
   Single-date picker (date-picker.ejs) — trigger styled like an
   evform underline field; popover reuses the .ph-cal calendar.
   ============================================================ */
.ph-datepick { position: relative; }
.ph-datepick__input { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.ph-datepick__btn { width: 100%; display: flex; align-items: center; gap: 10px; font-family: var(--font-sans); font-size: 16px; line-height: 1.5; color: var(--fg-1); background: #fff; border: 1px solid var(--ph-stone); border-radius: var(--r-card); padding: 13px 18px; text-align: left; cursor: pointer; transition: border-color var(--dur-fast), box-shadow var(--dur-fast); }
.ph-datepick__btn svg { flex: none; color: var(--ph-plum); margin-left: auto; }
.ph-datepick__btn:focus { outline: none; border-color: var(--ph-plum); box-shadow: 0 0 0 3px rgba(98,76,121,0.08); }
.ph-datepick.is-open .ph-datepick__btn { border-color: var(--ph-plum); }
.ph-datepick__label.is-placeholder { color: var(--ph-mist); }
.ph-datepick__pop { position: absolute; top: calc(100% + 8px); left: 0; z-index: 200; background: #fff; border: 1px solid var(--ph-stone); border-radius: var(--r-card); box-shadow: var(--shadow-4); padding: 22px 24px; }
.ph-datepick__pop[hidden] { display: none; }
.ph-cal__cell--selected { background: var(--ph-plum); color: var(--fg-onPlum); font-weight: 600; }

/* ============================================================
   Form validation (custom — native bubbles suppressed via
   form-validate.ejs). Invalid fields get .is-invalid on their
   .ph-evform__field wrapper. Reusable across every form.
   ============================================================ */
.ph-evform__field.is-invalid > input,
.ph-evform__field.is-invalid > select,
.ph-evform__field.is-invalid > textarea,
.ph-evform__field.is-invalid .ph-datepick__btn,
.ph-evform__field.is-invalid .ph-nselect__btn { border-color: var(--ph-error); }
.ph-evform__field.is-invalid .ph-pill__face { border-color: var(--ph-error); }
.ph-evform__field.is-invalid .ph-evform__l { color: var(--ph-error); }
/* Universal control-level red border — covers any form (club modal, contact, …). */
body.v3 input[aria-invalid="true"], body.v3 select[aria-invalid="true"], body.v3 textarea[aria-invalid="true"] { border-color: var(--ph-error); border-bottom-color: var(--ph-error); }
.is-invalid .ph-club__lbl { color: var(--ph-error); }
.ph-field-err { margin-top: 8px; font-family: var(--font-sans); font-size: 12px; font-weight: 500; letter-spacing: 0.02em; color: var(--ph-error); }

/* Form-level error banner (rendered above the submit button on fetch failure). */
.ph-form-error { margin: 16px 0 0; padding: 14px 18px; border-radius: var(--r-card, 12px); background: rgba(164, 69, 69, 0.08); border: 1px solid var(--ph-error); color: var(--ph-error); font-family: var(--font-sans); font-size: 14px; line-height: 1.5; }
.ph-form-error a { color: var(--ph-error); text-decoration: underline; }

/* File-upload UI (events form). */
.ph-files { display: flex; flex-direction: column; gap: 10px; }
.ph-files__btn { display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border: 1px dashed var(--ph-plum); background: transparent; color: var(--ph-plum); font-family: var(--font-sans); font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; border-radius: var(--r-pill, 999px); cursor: pointer; align-self: flex-start; transition: background var(--dur-fast, 160ms) var(--ease-out, ease), color var(--dur-fast, 160ms) var(--ease-out, ease); }
.ph-files__btn:hover { background: var(--ph-plum); color: #fff; }
.ph-files__btn:disabled { opacity: 0.5; cursor: not-allowed; }
.ph-files__hint { font-family: var(--font-sans); font-size: 12px; color: var(--ph-mist); }
.ph-files__list { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 8px; }
.ph-files__item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--ph-plum-mist); border-radius: var(--r-md, 8px); font-family: var(--font-sans); font-size: 13px; color: var(--ph-plum-deep); }
.ph-files__item--err { background: rgba(164, 69, 69, 0.08); color: var(--ph-error); }
.ph-files__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ph-files__size { color: var(--ph-mist); font-size: 12px; flex: none; }
.ph-files__remove { background: transparent; border: 0; padding: 4px 6px; cursor: pointer; color: inherit; opacity: 0.6; }
.ph-files__remove:hover { opacity: 1; }
.ph-files__progress { height: 3px; background: var(--ph-stone); border-radius: 999px; overflow: hidden; margin-top: 6px; }
.ph-files__progress > span { display: block; height: 100%; background: var(--ph-plum); width: 0; transition: width 0.25s linear; }

/* Busy state for submit buttons — replaces the label HTML with
   "<spinner/> <label>" while a fetch is in-flight. Spinner is a 1px ring
   with one quadrant transparent, rotating. Sized to the button's font. */
.ph-btn.is-busy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: progress;
  opacity: 0.92;
}
.ph-btn.is-busy .ph-btn__label { display: inline-block; }
.ph-btn__spinner {
  display: inline-block;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: phBtnSpin 0.72s linear infinite;
  vertical-align: -0.15em;
}
@keyframes phBtnSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .ph-btn__spinner { animation: phBtnSpin 1.6s linear infinite; }
}

/* Per-slide callout used on the home "Thoughtful Amenities" amenity card.
   Sits outside the slideshow (so it can overflow the photo edge) and swaps
   contents in sync with the active slide via the phslideshow:change event.
   Only one callout is .is-visible at a time; the others stay positioned in
   the same spot but fade out so the transition matches the photo fade. */
.ph-amenity-callout-stack {
  position: absolute;
  right: -32px;
  bottom: 40px;
  pointer-events: none; /* Otherwise the stacked callouts trap hover on top of the photo. */
}
.ph-amenity-callout {
  position: relative;
  top: 0;
  left: 0;
  /* Pinned dimensions so all three callouts render at the exact same size —
     pool slides ("25m") would otherwise be narrower than the gym ("3rd Floor"
     subscript) and the box would visibly resize between slides. */
  width: 300px;
  min-height: 88px;
  box-sizing: border-box;
  background: var(--ph-paper);
  border: 1px solid var(--ph-stone);
  border-radius: var(--r-card);
  padding: 20px 24px;
  box-shadow: var(--shadow-2);
  display: flex;
  align-items: center;
  gap: 16px;
  opacity: 0;
  transition: opacity 900ms ease-in-out;
  pointer-events: auto;
}
.ph-amenity-callout + .ph-amenity-callout { position: absolute; top: 0; left: 0; }
.ph-amenity-callout.is-visible { opacity: 1; }
.ph-amenity-callout__big {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 44px;
  color: var(--ph-plum);
  line-height: 1;
  white-space: nowrap;
}
.ph-amenity-callout__big--text {
  /* Non-numeric "big" lines (e.g. "FULLY EQUIPPED") get smaller, uppercase,
     two-line treatment so they read as a label, not a wannabe number. */
  font-size: 18px;
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.15;
  color: var(--ph-plum);
}
.ph-amenity-callout__unit {
  font-size: 22px;
  font-family: var(--font-sans);
  letter-spacing: 0.04em;
  color: var(--ph-mist);
  margin-left: 4px;
}
/* Stacked variant — two-line uppercase next to the big number, used when
   the "unit" is more than one character ("RD FLOOR" instead of "m"). Sized
   so the big-number slot stays the same width as the pool's single "m". */
.ph-amenity-callout__unit--stacked {
  font-size: 10px;
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ph-mist);
  line-height: 1.25;
  margin-left: 6px;
  display: inline-block;
  vertical-align: middle;
}
.ph-amenity-callout__desc {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--fg-2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.4;
}
@media (prefers-reduced-motion: reduce) {
  .ph-amenity-callout { transition: none; }
}

/* Wine-bottle icon optical-centering nudge. The artwork's visible mass sits
   slightly below the geometric centre (bottle stem on top, glass + wider
   base below), so when `place-items: center` puts the box dead-centre the
   icon reads as sitting low. Shift it up a hair so it looks balanced
   alongside the other Club-perk icons. */
img[src*="v3-icons/wine-bottle"] {
  transform: translateY(-8px);
}
img[src*="v3-icons/cutlery"] {
  transform: translateY(-4px) scale(0.88);
}

/* Auto-fade slideshow for the amenity pool slot. Parent must set
   aspect-ratio + overflow:hidden; the slideshow fills it edge-to-edge.
   Driven by JS that toggles .is-visible on a setInterval — CSS just
   provides the opacity transition. Switched from pure CSS animation to
   JS because the keyframe approach was inconsistent across browsers and
   silently no-op'd for users with prefers-reduced-motion (they saw only
   the first image with no fallback explanation). prefers-reduced-motion
   still pins to the first slide (the JS reads the media query and skips
   the interval) — same outcome, more predictable. */
.ph-slideshow,
.ph-pool-slideshow {           /* legacy alias — old partial still uses ph-pool-* */
  position: relative;
  width: 100%;
  height: 100%;
}
.ph-slide,
.ph-pool-slide {                /* legacy alias */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 900ms ease-in-out;
}
.ph-slide.is-visible,
.ph-pool-slide.is-visible {
  opacity: 1;
}
.ph-slide img,
.ph-slide picture,
.ph-pool-slide img,
.ph-pool-slide picture {
  width: 100%;
  height: 100%;
  display: block;
}
.ph-slide img,
.ph-pool-slide img {
  object-fit: cover;
}

/* Staged progress tracker — appears below the submit button on form submit
   when the request has files (events PDF/DOCX). Tells the user what's
   happening over the ~10-15s pipeline: upload → scan → review → send. */
.ph-progress {
  margin: 24px 0 16px;
  padding: 20px 22px;
  border-radius: var(--r-card, 12px);
  background: linear-gradient(180deg, rgba(184, 153, 104, 0.08), rgba(98, 76, 121, 0.06));
  border: 1px solid rgba(184, 153, 104, 0.30);
  display: flex;
  flex-direction: column;
  gap: 14px;
  animation: phSuccessRise 0.4s var(--ease-out, cubic-bezier(.18,.89,.32,1.28)) both;
}
.ph-progress__row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-family: var(--font-sans);
  transition: opacity 0.25s ease;
}
.ph-progress__row[data-state="pending"] { opacity: 0.45; }
.ph-progress__row[data-state="active"]  { opacity: 1; }
.ph-progress__row[data-state="done"]    { opacity: 0.8; }
.ph-progress__icon {
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.ph-progress__row[data-state="pending"] .ph-progress__icon {
  border: 2px solid var(--ph-mist);
  background: transparent;
}
.ph-progress__row[data-state="active"] .ph-progress__icon {
  border: 2px solid var(--ph-plum);
  border-right-color: transparent;
  background: transparent;
  animation: phBtnSpin 0.72s linear infinite;
}
.ph-progress__row[data-state="done"] .ph-progress__icon {
  border: 2px solid var(--ph-plum);
  background: var(--ph-plum);
}
.ph-progress__row[data-state="done"] .ph-progress__icon::before {
  content: '';
  width: 6px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-1px, -1px);
}
.ph-progress__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ph-progress__label {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--fg-1);
}
.ph-progress__row[data-state="active"] .ph-progress__label { color: var(--ph-plum-deep); }
.ph-progress__hint {
  font-size: 12px;
  line-height: 1.45;
  color: var(--ph-mist);
}

/* Form-success card — replaces the form after a 200 response. Brand-brass
   gradient (was previously sage green) — gold tones land closer to our
   plum/cream palette. Animated draw-on check + confetti burst in
   form-submit-helper. */
.ph-success {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 64px 48px;
  border-radius: var(--r-card, 16px);
  border: 1px solid rgba(184, 153, 104, 0.45);
  background:
    radial-gradient(900px 320px at 50% -10%, rgba(212, 175, 117, 0.32), rgba(212, 175, 117, 0) 70%),
    linear-gradient(180deg, #f8efde 0%, #ecdcb5 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 12px 40px rgba(122, 94, 47, 0.12);
  animation: phSuccessRise 0.55s var(--ease-out, cubic-bezier(.18,.89,.32,1.28)) both;
}
.ph-success__icon {
  display: inline-flex;
  width: 96px;
  height: 96px;
  margin: 0 auto 22px;
  border-radius: 50%;
  background: linear-gradient(180deg, #d4af75 0%, #a78049 100%);
  box-shadow: 0 14px 32px rgba(122, 94, 47, 0.28), 0 0 0 8px rgba(184, 153, 104, 0.18);
  align-items: center;
  justify-content: center;
  animation: phSuccessPop 0.6s var(--ease-out, cubic-bezier(.18,.89,.32,1.28)) 0.05s both;
}
.ph-success__icon svg { display: block; }
.ph-success__circle { stroke: rgba(255, 255, 255, 0.6); stroke-dasharray: 183; stroke-dashoffset: 183; animation: phSuccessDraw 0.7s ease-out 0.25s forwards; }
.ph-success__check  { stroke: #ffffff; stroke-dasharray: 60; stroke-dashoffset: 60; animation: phSuccessDraw 0.45s ease-out 0.55s forwards; }
.ph-success__title  { font-family: var(--font-display); font-weight: 500; font-size: 40px; line-height: 1.05; letter-spacing: -0.01em; color: #6f5326; margin: 0 0 10px; }
.ph-success__greet  { font-family: var(--font-display); font-size: 22px; color: #9b773d; margin: 0 0 14px; }
.ph-success__body   { font-family: var(--font-sans); font-size: 16px; line-height: 1.6; color: #4a3a1f; margin: 0 auto; max-width: 520px; }
.ph-success__ref    { font-family: var(--font-sans); font-size: 13px; color: #7a5e2f; margin-top: 22px; }
.ph-success__ref code {
  display: inline-block;
  background: rgba(184, 153, 104, 0.20);
  color: #6f5326;
  padding: 3px 10px;
  border-radius: 999px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  letter-spacing: 0.02em;
}
@keyframes phSuccessRise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes phSuccessPop  { 0% { transform: scale(0.4); opacity: 0; } 80% { transform: scale(1.06); opacity: 1; } 100% { transform: scale(1); } }
@keyframes phSuccessDraw { to { stroke-dashoffset: 0; } }
@media (max-width: 640px) {
  .ph-success { padding: 48px 24px; }
  .ph-success__title { font-size: 30px; }
  .ph-success__greet { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  .ph-success, .ph-success__icon, .ph-success__circle, .ph-success__check { animation: none; }
  .ph-success__circle, .ph-success__check { stroke-dashoffset: 0; }
}

/* Checkboxes / radios are interactive — always use the hand cursor. */
body.v3 input[type="checkbox"], body.v3 input[type="radio"] { cursor: pointer; }

/* Hero copy floats over photography — guarantee a black shadow behind every
   white text element (not buttons) on every page's hero banner for legibility. */
.ph-hero__copy :where(h1, h2, p, span, .ph-eyebrow, a:not(.ph-btn)) { text-shadow: 0 2px 14px rgba(0,0,0,0.55), 0 1px 5px rgba(0,0,0,0.5); }
.ph-hero__copy .ph-btn { text-shadow: none; }

/* ============================================================
   Legal / prose pages (privacy, terms, …) — constrained reading column.
   ============================================================ */
.ph-legal { max-width: 820px; margin: 0 auto; }
.ph-legal__updated { font-family: var(--font-sans); font-size: 13px; letter-spacing: 0.04em; color: var(--ph-mist); margin: 0 0 8px; }
.ph-legal h2 { font-family: var(--font-display); font-weight: 500; font-size: 28px; line-height: 1.2; letter-spacing: -0.01em; color: var(--ph-plum); margin: 48px 0 14px; }
.ph-legal h3 { font-family: var(--font-display); font-weight: 500; font-size: 21px; line-height: 1.25; color: var(--fg-1); margin: 32px 0 10px; }
.ph-legal p { font-family: var(--font-sans); font-size: 16px; line-height: 1.8; color: var(--fg-2); margin: 0 0 16px; }
.ph-legal ul { margin: 0 0 16px; padding-left: 22px; }
.ph-legal li { font-family: var(--font-sans); font-size: 16px; line-height: 1.7; color: var(--fg-2); margin: 0 0 8px; }
.ph-legal a { color: var(--ph-plum); text-decoration: underline; }

/* Offers landing — type-group heading. The horizontal rule on the right gives
   each section a tidy "label + line" treatment without dominating the cards. */
.ph-offers-group + .ph-offers-group { margin-top: 128px; }
.ph-offers-group__head { display: flex; align-items: center; gap: 28px; margin: 0 0 40px; }
.ph-offers-group__h { font-family: var(--font-display); font-weight: 500; font-size: 32px; line-height: 1.1; letter-spacing: -0.01em; color: var(--ph-plum); margin: 0; }
.ph-offers-group__rule { flex: 1; height: 1px; background: var(--ph-stone); }
/* Tablet / mobile — keep generous group separation, tighten the heading row. */
@media (max-width: 1024px) {
  .ph-offers-group + .ph-offers-group { margin-top: 104px; }
  .ph-offers-group__head { gap: 20px; margin-bottom: 32px; }
}
@media (max-width: 760px) {
  .ph-offers-group + .ph-offers-group { margin-top: 88px; }
  .ph-offers-group__head { gap: 16px; margin-bottom: 24px; }
  .ph-offers-group__h { font-size: 26px; }
}

/* Offer card type pill — colour-coded per type (see pier-offers.md vocabulary).
   Semi-transparent + backdrop-blur so it sits cleanly over photography. */
.ph-offer-pill {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  font-family: var(--font-sans); font-size: 10px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase; color: #fff;
  padding: 7px 12px; border-radius: var(--r-pill); white-space: nowrap;
  background: rgba(98, 76, 121, 0.92); /* default = plum */
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
/* Each type gets a light→deep gradient within its own colour family. The first
   `background` is a solid fallback for old Safari (gradients unsupported pre-iOS 6,
   but kept for any edge engine that drops the gradient line). */
.ph-offer-pill[data-type="Stay Saver"] {
  background: rgba(98, 76, 121, 0.94);
  background: linear-gradient(135deg, rgba(122, 96, 152, 0.95) 0%, rgba(78, 60, 98, 0.95) 100%);
}
.ph-offer-pill[data-type="Dining Included"] {
  background: rgba(184, 153, 104, 0.94);
  background: linear-gradient(135deg, rgba(208, 174, 120, 0.96) 0%, rgba(154, 122, 76, 0.96) 100%);
}
.ph-offer-pill[data-type="Adventure"] {
  background: rgba(58, 107, 90, 0.94);
  background: linear-gradient(135deg, rgba(82, 138, 116, 0.96) 0%, rgba(40, 86, 70, 0.96) 100%);
}
.ph-offer-pill[data-type="Local Favourites"] {
  background: rgba(177, 90, 60, 0.94);
  background: linear-gradient(135deg, rgba(204, 116, 80, 0.96) 0%, rgba(146, 68, 42, 0.96) 100%);
}
.ph-offer-pill[data-type="Seasonal"] {
  background: rgba(74, 111, 140, 0.94);
  background: linear-gradient(135deg, rgba(102, 144, 176, 0.96) 0%, rgba(56, 92, 120, 0.96) 100%);
}
.ph-offer-pill[data-type="Signature"] {
  background: rgba(61, 43, 84, 0.94);
  background: linear-gradient(135deg, rgba(86, 62, 116, 0.96) 0%, rgba(40, 28, 60, 0.96) 100%);
}

/* HTML sitemap — categorized link columns. */
.ph-sitemap { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 48px 40px; max-width: 1080px; margin: 0 auto; }
.ph-sitemap__col h2 { font-family: var(--font-display); font-weight: 500; font-size: 22px; line-height: 1.2; letter-spacing: -0.01em; color: var(--ph-plum); margin: 0 0 18px; }
.ph-sitemap__col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.ph-sitemap__col a { font-family: var(--font-sans); font-size: 15px; line-height: 1.4; color: var(--fg-1); text-decoration: none; }
.ph-sitemap__col a:hover { color: var(--ph-plum); }

/* ============================================================
   Pinnacle Club signup modal
   ============================================================ */
.ph-club {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0;
  z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms var(--ease-out);
}
.ph-club[aria-hidden="false"] { opacity: 1; pointer-events: auto; }
.ph-club[hidden] { display: none; }
.ph-club__backdrop {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  background: rgba(31, 26, 38, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.ph-club__dialog {
  position: relative;
  max-width: 540px;
  width: 100%;
  background: rgba(47, 36, 60, 0.92);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 25px;
  padding: 56px 44px 40px;
  text-align: center;
  box-shadow: 0 28px 72px rgba(0, 0, 0, 0.45);
  transform: scale(0.96);
  transition: transform 240ms var(--ease-out);
}
.ph-club[aria-hidden="false"] .ph-club__dialog { transform: scale(1); }
.ph-club__close {
  position: absolute; top: 16px; right: 18px;
  background: transparent; border: 0; padding: 0;
  width: 36px; height: 36px;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.72);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.ph-club__close:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }

.ph-club__eyebrow {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ph-brass);
  margin: 0 0 16px;
}
.ph-club__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 34px;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 0 0 16px;
}
.ph-club__body {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
  max-width: 420px;
  margin: 0 auto 28px;
}

.ph-club__form { display: flex; flex-direction: column; gap: 16px; text-align: left; }
.ph-club__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ph-club__field { display: flex; flex-direction: column; gap: 6px; }
.ph-club__lbl {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}
.ph-club__lbl .req { color: var(--ph-brass); margin-left: 2px; }
.ph-club__field input[type="text"],
.ph-club__field input[type="email"] {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  color: #fff;
  font-family: var(--font-sans);
  font-size: 15px;
  padding: 12px 14px;
  width: 100%;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.ph-club__field input:focus {
  border-color: var(--ph-brass);
  background: rgba(255, 255, 255, 0.10);
  outline: none;
}
.ph-club__consent {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.85);
  margin-top: 4px;
  text-align: left;
  max-width: 380px;
  margin-left: auto;
  margin-right: auto;
}
.ph-club__consent input[type="checkbox"] {
  flex: none;
  width: 18px; height: 18px;
  accent-color: var(--ph-brass);
}
.ph-club__cta {
  align-self: center;
  background: var(--ph-brass);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  padding: 16px 36px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  min-width: 200px;
  margin: 12px auto 0;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.ph-club__cta:hover { background: #c8a674; }
.ph-club__cta:active { transform: translateY(1px); }
.ph-club__cta:disabled { opacity: 0.7; cursor: default; }

@media (max-width: 760px) {
  .ph-club__dialog {
    padding: 32px 18px 22px; border-radius: 18px;
    /* Cap height so the modal always fits the viewport with breathing room
       around it; let inner content scroll if a future copy change overflows. */
    max-height: calc(100vh - 32px);
    overflow-y: auto;
  }
  .ph-club__title { font-size: 26px; }
  .ph-club__row { grid-template-columns: 1fr; gap: 12px; }
  .ph-club__body { font-size: 14px; }
  /* Success state: tighten the headline + greet so the 3 perks + Book Now CTA
     all fit on a single phone screen (Val, 2026-06-05). */
  .ph-success__icon { transform: scale(0.85); margin-bottom: -6px; }
  .ph-success__title { font-size: 22px !important; margin: 4px 0 6px; }
  .ph-success__greet { font-size: 15px !important; margin: 0 0 10px !important; }
}

/* Drawer (Val 2026-06-05): Rosewood-style full-width cream panel with
   large serif (Ogg) menu items, black-text wordmark at the top. */
#nav-drawer a,
#nav-drawer a:hover,
#nav-drawer a:focus,
#nav-drawer a:visited { text-decoration: none; }
.ph-drawer__panel {
  width: 100vw; max-width: 100vw;
  background: var(--ph-paper);
  color: var(--fg-1);
}
.ph-drawer__bar {
  height: 72px;
  border-bottom: 1px solid var(--hairline);
  flex: none;
}
.ph-drawer__close { color: var(--fg-1); background: transparent; border: 0; cursor: pointer; }
.ph-drawer__close:hover { color: var(--ph-plum); }
.ph-drawer__brand { display: inline-flex; align-items: center; justify-content: center; flex: 1; }
.ph-drawer__brand img {
  /* Wordmark is wide (4252×653) so we constrain by max-width. 15% bigger than
     the previous 96px header logo per Val — landed at ~190px wide visually. */
  height: 36px; width: auto; max-width: 70vw; object-fit: contain; display: block;
}
.ph-drawer__list { list-style: none; padding: 36px 28px 24px; margin: 0; }
.ph-drawer__item {
  display: block;
  font-family: 'ogg', Georgia, 'Times New Roman', serif;
  font-weight: 500;
  font-size: clamp(36px, 8vw, 52px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--fg-1);
  padding: 8px 0;
  transition: color 180ms;
}
.ph-drawer__item:hover { color: var(--ph-plum); }
.ph-drawer__call {
  border-top: 1px solid var(--hairline);
  padding-top: 18px; padding-bottom: 18px;
  color: var(--fg-1);
  transition: background 180ms;
}
.ph-drawer__call:hover { background: rgba(0, 0, 0, 0.04); }
.ph-drawer__call-eyebrow { font-family: var(--font-sans); font-size: 10px; font-weight: 600; letter-spacing: 0.32em; text-transform: uppercase; color: var(--fg-3); }
.ph-drawer__call-number { font-family: var(--font-sans); font-size: 16px; font-weight: 500; letter-spacing: 0.04em; color: var(--fg-1); }
.ph-drawer__email {
  border-top: 1px solid var(--hairline);
  padding-top: 18px; padding-bottom: 22px;
  font-family: var(--font-sans); font-size: 13px; color: var(--fg-2);
}
.ph-drawer__email a { color: var(--fg-2); }
.ph-drawer__email a:hover { color: var(--ph-plum); }

/* Mobile-only BOOK NOW CTA — purple gradient, full-width pinned to the bottom. */
.ph-book-mobile { display: none; }
@media (max-width: 760px) {
  /* Hide the full multi-field bar; show the simple CTA instead */
  .ph-book--sticky { display: none; }
  .ph-book-mobile {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 50;
    align-items: center; justify-content: center; gap: 12px;
    padding: 16px 24px;
    background: linear-gradient(135deg, var(--ph-plum-soft) 0%, var(--ph-plum) 45%, var(--ph-plum-deep) 100%);
    color: #fff;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: 0 -4px 16px rgba(31, 26, 38, 0.18);
    min-height: 56px;
    transition: filter var(--dur-fast) var(--ease-out);
  }
  .ph-book-mobile,
  .ph-book-mobile:hover,
  .ph-book-mobile:focus,
  .ph-book-mobile:focus,
  .ph-book-mobile:active,
  .ph-book-mobile:visited { color: #fff; text-decoration: none; }
  .ph-book-mobile:active { filter: brightness(0.92); }
  .ph-book-mobile svg { flex: none; opacity: 0.95; }
}

/* ============================================================
   Booking widget — interactive popovers (calendar + guests)
   Ported from the Canvas Calendar / GuestsPicker components.
   ============================================================ */
/* .ph-book base position is set above; do NOT redeclare it here or it'll
   cascade over .ph-book--sticky and break the fixed-top positioning. */
.ph-book__field { position: relative; }
.ph-book__pop {
  position: absolute;
  top: calc(100% + 12px);
  background: #fff;
  border: 1px solid var(--ph-stone);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-4);
  padding: 24px 26px;
  z-index: 200;
}
.ph-book__pop[hidden] { display: none; }
.ph-book__pop--dates  { min-width: 660px; }
.ph-book__pop--guests { min-width: 320px; }
.ph-book__pop-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--hairline); }
.ph-book__pop-summary { font-family: var(--font-serif); font-size: 15px; color: var(--fg-2); }
.ph-book__pop-actions { display: flex; gap: 12px; }
.ph-book__pop-note { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--hairline); font-size: 12px; color: var(--ph-mist); line-height: 1.5; }
.ph-book__pop-note a { color: var(--ph-plum); }

/* Calendar */
.ph-cal { display: flex; gap: 32px; }
.ph-cal__month { width: 280px; }
.ph-cal__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; gap: 10px; }
.ph-cal__title { font-family: var(--font-serif); font-size: 17px; font-weight: 500; color: var(--fg-1); }
.ph-cal__nav { background: transparent; border: 1px solid var(--ph-stone); border-radius: 50%; width: 30px; height: 30px; display: grid; place-items: center; color: var(--ph-plum); cursor: pointer; transition: all var(--dur-fast); padding: 0; }
.ph-cal__nav:hover { background: var(--ph-plum); color: #fff; border-color: var(--ph-plum); }
.ph-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.ph-cal__dow { text-align: center; font-size: 10px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ph-mist); padding: 6px 0; }
.ph-cal__cell { aspect-ratio: 1; display: grid; place-items: center; font-family: var(--font-sans); font-size: 13px; color: var(--fg-1); border-radius: 50%; cursor: pointer; border: 0; background: transparent; transition: all 150ms; padding: 0; }
.ph-cal__cell:hover { background: var(--ph-plum-wash); }
.ph-cal__cell--out { color: var(--ph-mist); opacity: 0.35; pointer-events: none; }
.ph-cal__cell--in-range { background: var(--ph-plum-mist); border-radius: 0; color: var(--ph-plum-deep); }
.ph-cal__cell--start, .ph-cal__cell--end { background: var(--ph-plum); color: var(--fg-onPlum); font-weight: 600; }
.ph-cal__cell--start { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.ph-cal__cell--end { border-top-left-radius: 0; border-bottom-left-radius: 0; }

/* Guests */
.ph-guests__row { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--hairline); }
.ph-guests__row:last-child { border-bottom: 0; }
.ph-guests__nm { font-family: var(--font-serif); font-size: 16px; color: var(--fg-1); }
.ph-guests__sub { font-family: var(--font-sans); font-size: 12px; color: var(--ph-mist); }
.ph-guests__step { display: inline-flex; align-items: center; gap: 14px; }
.ph-guests__step button { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--ph-plum); background: transparent; color: var(--ph-plum); font-size: 16px; cursor: pointer; line-height: 1; display: grid; place-items: center; transition: all var(--dur-fast); padding: 0; }
.ph-guests__step button:hover:not(:disabled) { background: var(--ph-plum); color: #fff; }
.ph-guests__step button:disabled { opacity: 0.35; cursor: not-allowed; }
.ph-guests__step .val { font-family: var(--font-serif); font-size: 18px; min-width: 16px; text-align: center; }

@media (max-width: 760px) {
  .ph-book__pop--dates { min-width: 0; width: calc(100vw - 24px); left: 12px; right: 12px; }
  .ph-book__pop--guests { right: 12px; left: 12px; min-width: 0; }
  .ph-cal { flex-direction: column; gap: 16px; }
  .ph-cal__month { width: 100%; }
}

/* ============================================================
   Hero slider
   ============================================================ */
/* Hero fills the viewport on most screens; on very tall screens the cap
   leaves room below it for the next section to peek through. The booking
   bar is positioned in JS against the hero's bottom edge, so the exact
   hero height no longer matters for the bar straddle. */
.ph-hero { position: relative; height: 100vh; min-height: 600px; max-height: 920px; overflow: hidden; }
.ph-hero__slide { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1200ms var(--ease-out), transform 7000ms var(--ease-out); transform: scale(1); }
.ph-hero__slide.is-active { opacity: 1; transform: scale(1.04); }
.ph-hero__overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.30) 30%, rgba(0,0,0,0.20) 55%, rgba(0,0,0,0.65) 100%); pointer-events: none; }
/* Hero copy bottom = 95px from hero bottom. The booking bar visually
   straddles the hero edge (its top edge sits ~40px above hero bottom),
   so 95 - 40 = 55px between the copy's bottom edge and the booking bar's
   top edge. Consistent across home / stay / location / events. */
.ph-hero__copy { position: absolute; left: 0; right: 0; bottom: 95px; z-index: 2; }
.ph-hero__copy .ph-wrap { max-width: 1280px; }
.ph-hero__copy .inner { max-width: 864px; }
.ph-hero__eyebrow { color: #ffffff; opacity: 0.9; margin-bottom: 18px; text-shadow: 0 1px 6px rgba(0,0,0,0.4); }
.ph-hero__h1 { font-family: var(--font-display); font-weight: 500; font-size: clamp(40px, 7vw, 62px); line-height: 1.05; letter-spacing: -0.015em; margin: 0 0 20px; color: #ffffff; text-shadow: 0 2px 18px rgba(0,0,0,0.45); max-width: 760px; }
.ph-hero__h1 em { font-family: var(--font-display); font-style: normal; font-weight: var(--w-medium); }
.ph-hero__sub { font-family: var(--font-sans); font-size: 17px; line-height: 1.65; color: rgba(255,255,255,0.92); margin: 0 0 32px; max-width: 732px; text-shadow: 0 1px 8px rgba(0,0,0,0.45); }
.ph-hero__ctas { display: flex; gap: 14px; flex-wrap: wrap; }
/* Slider dots sit just above the booking bar's top edge, ~10px clear of it
   (bar top is 40px above hero bottom; dots at 50px = 10px above bar top). */
.ph-hero__dots { position: absolute; bottom: 90px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; z-index: 4; }
@media (max-width: 760px) { .ph-hero__dots { bottom: 30px; } }

/* ============================================================
   Nav dropdowns
   ============================================================ */
.ph-navi { position: relative; }
.ph-navi__btn { font-family: var(--font-sans); font-size: 13px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; background: transparent; border: 0; padding: 8px 0; cursor: pointer; color: inherit; display: inline-flex; align-items: center; gap: 6px; transition: color var(--dur-fast); }
.ph-header--invert .ph-navi__btn { color: var(--fg-onPlum); }
.ph-navi__btn:hover { color: var(--ph-plum); }
.ph-header--invert .ph-navi__btn:hover { color: var(--ph-brass); }
.ph-navi__btn .caret { width: 9px; height: 9px; opacity: 0.6; transition: transform var(--dur-base) var(--ease-out); }
.ph-navi[data-open="true"] .ph-navi__btn .caret { transform: rotate(180deg); }
.ph-navi__panel { position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(-6px); min-width: 260px; background: #fff; border: 1px solid var(--ph-stone); border-radius: var(--r-card); box-shadow: var(--shadow-4); padding: 14px; opacity: 0; pointer-events: none; transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); z-index: 100; }
.ph-navi[data-open="true"] .ph-navi__panel { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.ph-navi__panel a { display: block; padding: 12px 16px; border-radius: var(--r-md); font-family: var(--font-sans); font-size: 14px; font-weight: 500; letter-spacing: 0.04em; text-transform: none; color: var(--fg-1); text-decoration: none; transition: background var(--dur-fast), color var(--dur-fast); }
.ph-navi__panel a:hover { background: var(--ph-plum-mist); color: var(--ph-plum); }
.ph-navi__panel a .desc { display: block; font-size: 12px; font-weight: 400; color: var(--ph-mist); margin-top: 2px; letter-spacing: 0; }
.ph-hero__dot { width: 10px; height: 10px; border-radius: 999px; border: 0; padding: 0; cursor: pointer; background: rgba(255,255,255,0.45); transition: all var(--dur-base) var(--ease-out); }
.ph-hero__dot.is-active { width: 32px; background: #ffffff; }

/* ============================================================
   Editorial rooms (alternating rows)
   ============================================================ */
.ph-rooms-editorial { display: flex; flex-direction: column; gap: 88px; }
.ph-rooms-editorial .row { display: grid; grid-template-columns: 1.3fr 1fr; gap: 64px; align-items: center; }
.ph-rooms-editorial .row.flip { grid-template-columns: 1fr 1.3fr; }
.ph-rooms-editorial .media { aspect-ratio: 5 / 3.6; border-radius: var(--r-card); overflow: hidden; position: relative; }
.ph-rooms-editorial .media img { width: 100%; height: 100%; object-fit: cover; }
.ph-rooms-editorial .body { padding-right: 16px; }
.ph-rooms-editorial .row.flip .body { padding-right: 0; padding-left: 16px; }
.ph-rooms-editorial .meta { font-family: var(--font-display); font-size: 17px; color: var(--ph-plum); margin-bottom: 22px; }
.ph-rooms-editorial h3 { font-family: var(--font-display); font-weight: 500; font-size: 44px; letter-spacing: -0.015em; line-height: 1.05; margin: 0 0 12px; }
.ph-rooms-editorial .features { list-style: none; padding: 0; margin: 0 0 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; }
.ph-rooms-editorial .features li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--fg-2); }
.ph-rooms-editorial .features li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ph-brass); flex: none; }
.ph-rooms-editorial .foot { display: flex; align-items: center; justify-content: space-between; padding-top: 28px; border-top: 1px solid var(--hairline); }
.ph-rooms-editorial .price { font-family: var(--font-serif); font-size: 26px; font-weight: 500; color: var(--ph-plum); line-height: 1; }
.ph-rooms-editorial .price .from { display: block; font-family: var(--font-sans); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ph-mist); margin-bottom: 6px; }
.ph-rooms-editorial .price .per { font-family: var(--font-sans); font-size: 12px; color: var(--ph-mist); letter-spacing: 0.08em; margin-left: 4px; }

/* ============================================================
   Horizontal scroller
   ============================================================ */
.ph-hs { position: relative; }
.ph-hs__track { display: flex; align-items: stretch; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 56px; padding: 8px 56px 24px; scrollbar-width: none; -ms-overflow-style: none; }
.ph-hs__track::-webkit-scrollbar { display: none; }
.ph-hs__track > * { scroll-snap-align: start; flex: 0 0 auto; }
.ph-hs__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; background: rgba(255,255,255,0.95); border: 1px solid var(--ph-stone); border-radius: 50%; color: var(--ph-plum); display: grid; place-items: center; cursor: pointer; box-shadow: var(--shadow-2); transition: all var(--dur-base) var(--ease-out); z-index: 5; }
.ph-hs__nav:hover { background: var(--ph-plum); color: #fff; border-color: var(--ph-plum); }
.ph-hs__nav--prev { left: 14px; }
.ph-hs__nav--next { right: 14px; }
.ph-hs__nav[disabled] { opacity: 0; pointer-events: none; }

/* Mobile counter bar (Val, 2026-06-05, ref Marriott). Injected by
   hs-scroller-script.ejs into every .ph-hs scroller, hidden on desktop. */
.ph-hs__counter { display: none; }
@media (max-width: 760px) {
  .ph-hs__counter {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 24px 14px;
  }
  .ph-hs__counter-arrow {
    width: 44px; height: 44px;
    background: transparent; border: 0; padding: 0;
    color: var(--fg-1); cursor: pointer;
    display: grid; place-items: center;
    touch-action: manipulation;
    transition: opacity var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  }
  .ph-hs__counter-arrow:hover { color: var(--ph-plum); }
  .ph-hs__counter-arrow[disabled] { opacity: 0.25; pointer-events: none; }
  .ph-hs__counter-text {
    font-family: var(--font-sans); font-size: 13px; font-weight: 500;
    letter-spacing: 0.06em; color: var(--fg-1);
    font-variant-numeric: tabular-nums;
  }
  /* Hide the desktop centre-overlay nav circles on mobile (the top bar
     replaces them). */
  .ph-hs__nav { display: none; }
  /* Cards become ~85vw so one fits + peek of the next, padding tightened. */
  .ph-hs__track { padding: 0 24px 16px !important; scroll-padding-left: 24px !important; gap: 14px !important; }
  .ph-hs__track > article { width: calc(85vw - 24px) !important; max-width: 360px; }
}

/* ============================================================
   Room card (scroller variant)
   ============================================================ */
.ph-room { width: 520px; background: #fff; border: 1px solid var(--ph-stone); border-radius: var(--r-card); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.ph-room:hover { box-shadow: var(--shadow-3); transform: translateY(-3px); }
.ph-room__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.ph-room__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.ph-room:hover .ph-room__media img { transform: scale(1.05); }
.ph-room__body { padding: 26px 28px 28px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.ph-room__t { font-family: var(--font-display); font-weight: 500; font-size: 26px; line-height: 1.15; letter-spacing: -0.01em; color: var(--fg-1); margin: 0; }
.ph-room__features { display: flex; flex-wrap: wrap; align-items: center; margin-top: 4px; }
.ph-room__feature { font-size: 16px; color: var(--fg-2); display: inline-flex; align-items: center; }
.ph-room__feature + .ph-room__feature::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--ph-brass); display: inline-block; margin: 0 10px; }
.ph-room__foot { margin-top: auto; padding-top: 22px; border-top: 1px solid var(--hairline); display: flex; gap: 10px; align-items: center; }
.ph-room__foot .ph-btn { flex: 1; justify-content: center; padding: 12px 14px; font-size: 11px; letter-spacing: 0.16em; }

/* ============================================================
   Amenities marquee
   ============================================================ */
.ph-marquee { position: relative; overflow: hidden; border: 1px solid var(--ph-brass); border-radius: var(--r-card); background: #fff; box-shadow: 0 4px 14px rgba(184, 153, 104, 0.16), 0 1px 3px rgba(31, 26, 38, 0.06); }
.ph-marquee__track { display: flex; width: max-content; animation: ph-marquee-scroll 90s linear infinite; }
.ph-marquee:hover .ph-marquee__track { animation-play-state: paused; }
.ph-marquee__item { flex: 0 0 auto; padding: 32px 40px; display: flex; align-items: center; gap: 12px; border-right: 1px solid var(--ph-brass); font-family: var(--font-sans); font-size: 15px; font-weight: 500; color: var(--fg-1); white-space: nowrap; }
.ph-marquee__item img { width: 36px; height: 36px; object-fit: contain; flex: none; }
@keyframes ph-marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ph-marquee::before, .ph-marquee::after { content: ""; position: absolute; top: 0; bottom: 0; width: 80px; pointer-events: none; z-index: 2; }
.ph-marquee::before { left: 0; background: linear-gradient(90deg, #fff, transparent); }
.ph-marquee::after { right: 0; background: linear-gradient(-90deg, #fff, transparent); }
@media (prefers-reduced-motion: reduce) { .ph-marquee__track { animation: none; } }

/* Amenities grid — shared on home + stay (Val, 2026-06-04 update).
   No card background, no outer outline. Brass hairlines run between every row
   AND across the top of the first row + bottom of the last row.
   Each cell is icon + label, left-aligned. */
.ph-amenities {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 56px;
  padding: 0;
}
.ph-amenities__cell {
  display: flex; align-items: center; gap: 18px;
  padding: 22px 0;
  border-bottom: 1px solid var(--ph-brass);
  text-align: left;
}
/* First row gets a per-column top border, matching the per-column bottoms.
   At 3 cols → top border on cells 1-3; 2 cols → cells 1-2; 1 col → cell 1. */
.ph-amenities__cell:nth-child(-n+3) { border-top: 1px solid var(--ph-brass); }
.ph-amenities__icon { width: 32px; height: 32px; object-fit: contain; flex: none; }
.ph-amenities__label { font-family: var(--font-sans); font-size: 15px; font-weight: 500; color: var(--fg-1); line-height: 1.3; }

@media (max-width: 1024px) {
  .ph-amenities { grid-template-columns: repeat(2, 1fr); column-gap: 40px; }
  .ph-amenities__cell:nth-child(-n+3) { border-top: 0; }
  .ph-amenities__cell:nth-child(-n+2) { border-top: 1px solid var(--ph-brass); }
}
/* Mobile (Val, 2026-06-05): keep 3 columns even at narrow widths, but stack
   icon-top + label-below in each cell. Avoids the previous tall vertical list. */
/* Mobile (Val, 2026-06-05): collapse column-gap to 0 so the per-cell row
   borders touch and form a continuous full-width line between rows. */
@media (max-width: 760px) {
  .ph-amenities { grid-template-columns: repeat(3, 1fr); column-gap: 0; }
  .ph-amenities__cell {
    flex-direction: column; align-items: center; justify-content: flex-start;
    text-align: center; gap: 8px;
    padding: 18px 4px;
  }
  .ph-amenities__icon { width: 28px; height: 28px; }
  .ph-amenities__label { font-size: 11px; letter-spacing: 0.04em; line-height: 1.3; }
  .ph-amenities__cell:nth-child(-n+3) { border-top: 1px solid var(--ph-brass); }
}

/* Venue highlights — single-row icons (Events page, Val 2026-06-04 update).
   No card background, no outer outline. Just gold vertical dividers between
   each icon cell. Icon-top + label-bottom. */
.ph-venue-highlights {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.ph-venue-highlights__cell {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 28px 16px; gap: 14px;
  border-right: 1px solid var(--ph-brass);
}
.ph-venue-highlights__cell:last-child { border-right: 0; }
/* Fixed 46×46 box. All icons (img + inline svg) fill the box at full size,
   object-fit: contain so nothing skews — they keep their own proportions. */
.ph-venue-highlights__icon { width: 46px; height: 46px; display: grid; place-items: center; color: var(--fg-1); flex: none; }
.ph-venue-highlights__icon img,
.ph-venue-highlights__icon svg { width: 46px; height: 46px; object-fit: contain; display: block; }
.ph-venue-highlights__label { font-family: var(--font-sans); font-size: 13px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-1); line-height: 1.4; }

@media (max-width: 1024px) {
  .ph-venue-highlights { grid-template-columns: repeat(2, 1fr); }
  .ph-venue-highlights__cell:nth-child(2n) { border-right: 0; }
}
/* Mobile (Val, 2026-06-05): keep 2x2 grid even at narrow widths instead of
   collapsing to 1-col list. */
@media (max-width: 640px) {
  .ph-venue-highlights { grid-template-columns: repeat(2, 1fr); }
  .ph-venue-highlights__cell { border-right: 1px solid var(--ph-brass); padding: 24px 8px; }
  .ph-venue-highlights__cell:nth-child(2n) { border-right: 0; }
  .ph-venue-highlights__cell:nth-child(-n+2) { border-bottom: 1px solid var(--ph-brass); }
}

/* 3-col variant (Weddings: 3 cols × 2 rows). Per Val (2026-06-04 update 2):
   short vertical dividers between columns (pseudo-elements in the column gap)
   + ONE full-width horizontal rule between row 1 and row 2 (real div element
   that grid-spans all columns). */
.ph-venue-highlights--3 {
  grid-template-columns: repeat(3, 1fr);
  column-gap: 32px; row-gap: 0;
}
.ph-venue-highlights--3 .ph-venue-highlights__cell {
  position: relative;
  border: 0;
  padding: 44px 8px;
}
/* Vertical divider centred in the column gap. Use :nth-of-type so the
   inline <hr> rule between rows doesn't shift the nth count off-by-one. */
.ph-venue-highlights--3 .ph-venue-highlights__cell::after {
  content: "";
  position: absolute;
  right: -16px;
  top: 22%; bottom: 22%;
  width: 1px;
  background: var(--ph-brass);
}
.ph-venue-highlights--3 .ph-venue-highlights__cell:nth-of-type(3n)::after { display: none; }
/* Full-width horizontal rule between rows. Spans all columns + their gap. */
.ph-venue-highlights__rule {
  grid-column: 1 / -1;
  height: 0;
  border: 0;
  border-top: 1px solid var(--ph-brass);
  margin: 0;
}

/* Mobile (Val, 2026-06-05): keep 3 cols × 2 rows on all sizes (was collapsing
   to 2 cols at tablet, 1 col at phone — Val wants 3x2 like the home page
   amenities). Tighten gaps + padding so it fits on a phone. */
@media (max-width: 1024px) {
  .ph-venue-highlights--3 { column-gap: 16px; }
  .ph-venue-highlights--3 .ph-venue-highlights__cell::after { right: -8px; }
  .ph-venue-highlights--3 .ph-venue-highlights__cell { padding: 28px 4px; }
}
@media (max-width: 640px) {
  .ph-venue-highlights--3 { column-gap: 8px; }
  .ph-venue-highlights--3 .ph-venue-highlights__cell::after { right: -4px; }
  .ph-venue-highlights--3 .ph-venue-highlights__cell { padding: 20px 2px; }
  .ph-venue-highlights--3 .ph-venue-highlights__icon { width: 36px; height: 36px; }
  .ph-venue-highlights--3 .ph-venue-highlights__icon img,
  .ph-venue-highlights--3 .ph-venue-highlights__icon svg { width: 36px; height: 36px; }
  .ph-venue-highlights--3 .ph-venue-highlights__label { font-size: 10px; letter-spacing: 0.1em; }
}

/* Per-card photo slider */
.ph-pslider { position: relative; width: 100%; height: 100%; overflow: hidden; }
.ph-pslider__slide { position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 0; transition: opacity 600ms var(--ease-out); }
.ph-pslider__slide.is-active { opacity: 1; z-index: 1; }
.ph-pslider__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph-pslider__controls { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 14px; z-index: 5; padding: 0; }
.ph-pslider__arrow { background: transparent; border: 0; padding: 4px; color: #ffffff; cursor: pointer; display: inline-flex; align-items: center; transition: opacity var(--dur-fast) var(--ease-out); opacity: 0.85; }
.ph-pslider__arrow:hover { opacity: 1; }
.ph-pslider__arrow:disabled { opacity: 0.35; cursor: not-allowed; }
.ph-pslider__dots { display: inline-flex; align-items: center; gap: 8px; }
.ph-pslider__dot { width: 8px; height: 8px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; background: rgba(255,255,255,0.55); transition: all var(--dur-base) var(--ease-out); }
.ph-pslider__dot.is-active { background: #ffffff; width: 24px; border-radius: 999px; }

/* ============================================================
   Rooms grid — 3-column card layout (Val, 2026-06-04)
   Replaces the previous ph-rfc carousel for the rooms section. Cards are
   left-aligned, image on top, 2-line eyebrow (bed type / size), description
   paragraph, View Rates CTA at the bottom. Stacks to 1 col on phones.
   ============================================================ */
.ph-rgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.ph-rgrid__card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--ph-stone); border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow-2); }
.ph-rgrid__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.ph-rgrid__body { padding: 28px 28px 28px; display: flex; flex-direction: column; gap: 10px; text-align: left; flex: 1; }
.ph-rgrid__name { font-family: var(--font-display); font-weight: 500; font-size: 28px; letter-spacing: -0.015em; line-height: 1.1; color: var(--fg-1); margin: 0; }
.ph-rgrid__eyebrow { font-family: var(--font-sans); font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ph-plum); white-space: nowrap; }
.ph-rgrid__desc { font-family: var(--font-sans); font-size: 14px; line-height: 1.6; color: var(--fg-2); margin: 0; }
.ph-rgrid__foot { display: flex; justify-content: flex-start; margin: 0; }

/* Per Val (2026-06-04): below desktop, stack all 3 cards in one column.
   Never show the awkward 2-then-1 layout. */
@media (max-width: 1024px) {
  .ph-rgrid { grid-template-columns: 1fr; gap: 22px; }
  .ph-rgrid__body { padding: 22px 22px 22px; }
  .ph-rgrid__name { font-size: 24px; }
}

/* ============================================================
   Rooms slider — 3 cards visible + peek, arrows L/R (Val, 2026-06-04)
   Transform-based slider (NOT overflow-x:auto — that interacts badly with
   flex children sized via calc(100% - …) and refuses to clip in some
   layouts). Viewport's overflow:hidden physically clips card #4; track is
   translated horizontally by JS to navigate. Card width is set via a
   --rslider-card-w CSS variable that the JS computes from viewport.clientWidth.
   ============================================================ */
/* Wider wrap for this slider only — per Val, cards should grow on wide
   screens. Overrides the default ph-wrap max-width of 1280. */
.ph-rslider__wrap {
  position: relative;
  max-width: 1600px;
}
.ph-rslider {
  overflow: hidden;
  overflow-x: clip;
  padding: 8px 0 24px;
}
.ph-rslider__track {
  display: flex; gap: 28px;
  width: max-content;
  transform: translate3d(var(--rslider-x, 0px), 0, 0);
  /* Snappier slide — Val flagged the 380ms felt laggy on mobile arrow taps. */
  transition: transform 220ms cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}
.ph-rslider__card {
  flex: 0 0 var(--rslider-card-w, 380px);
  min-width: 0;
}
.ph-rslider__arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px; border-radius: 50%; border: 0; padding: 0;
  background: rgba(255,255,255,0.96); color: var(--ph-plum);
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
  display: grid; place-items: center; cursor: pointer; z-index: 10;
  transition: transform 200ms var(--ease-out), background 200ms var(--ease-out);
}
.ph-rslider__arrow:hover { background: #fff; transform: translateY(-50%) scale(1.06); }
.ph-rslider__arrow:active { transform: translateY(-50%) scale(0.96); }
.ph-rslider__arrow--prev { left: 16px; }
.ph-rslider__arrow--next { right: 16px; }

.ph-rslider__arrow:disabled { opacity: 0.4; cursor: not-allowed; }

/* Mobile counter bar — top arrows + "01 / N" page counter (Val, 2026-06-05,
   ref Marriott). Injected by rooms-carousel.ejs JS. Hidden on desktop. */
.ph-rslider__counter { display: none; }
@media (max-width: 1024px) {
  .ph-rslider__arrow--prev { left: 4px; }
  .ph-rslider__arrow--next { right: 4px; }
}
@media (max-width: 760px) {
  .ph-rslider__counter {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 24px 14px;
  }
  .ph-rslider__counter-arrow {
    width: 44px; height: 44px;
    background: transparent; border: 0; padding: 0;
    color: var(--fg-1); cursor: pointer;
    display: grid; place-items: center;
    /* manipulation removes the iOS 300ms tap delay on these buttons. */
    touch-action: manipulation;
    transition: color var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
  }
  .ph-rslider__counter-arrow:hover { color: var(--ph-plum); }
  .ph-rslider__counter-arrow[disabled] { opacity: 0.25; pointer-events: none; }
  .ph-rslider__counter-text {
    font-family: var(--font-sans); font-size: 13px; font-weight: 500;
    letter-spacing: 0.06em; color: var(--fg-1);
    font-variant-numeric: tabular-nums;
  }
  /* On mobile the counter bar replaces the side overlay arrows. */
  .ph-rslider__arrow--prev,
  .ph-rslider__arrow--next { display: none; }
  /* Smoother swipe — disable text selection + ensure horizontal pan only. */
  .ph-rslider { touch-action: pan-y; user-select: none; -webkit-user-select: none; }
}
@media (max-width: 640px) {
  .ph-rslider__arrow { width: 40px; height: 40px; }
}

/* ============================================================
   Footer
   ============================================================ */
.ph-footer { background: var(--ph-plum-darker); color: var(--fg-onPlum); padding: 64px 0 28px; }
.ph-footer__top { display: grid; grid-template-columns: 1.35fr 1fr 1fr 1.25fr; gap: 48px; padding-bottom: 0; align-items: start; }
.ph-footer h4, .ph-footer__h { font-family: var(--font-sans); font-size: 12px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-onPlum); margin: 0 0 22px; font-style: normal; }
.ph-footer__col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.ph-footer__col a { color: var(--fg-onPlum); text-decoration: none; font-size: 15px; transition: color var(--dur-fast); }
.ph-footer__col a:hover { color: var(--ph-brass); }
.ph-footer__contact { color: var(--fg-onPlum); font-size: 15px; line-height: 1.6; display: flex; flex-direction: column; gap: 12px; }
.ph-footer__contact strong { font-weight: 600; letter-spacing: 0.04em; }
.ph-footer__contact a { color: var(--fg-onPlum); text-decoration: none; }
.ph-footer__contact a:hover { color: var(--ph-brass); }
.ph-footer__social { display: flex; gap: 18px; margin-top: 18px; }
.ph-footer__social a { width: 28px; height: 28px; display: grid; place-items: center; opacity: 0.92; }
.ph-footer__social a:hover { opacity: 1; }
.ph-footer__social img { width: 22px; height: 22px; object-fit: contain; display: block; }

/* Newsletter signup (footer left column). */
.ph-footer__news-sub { margin: -10px 0 18px; font-size: 14px; line-height: 1.5; color: rgba(255,255,255,0.78); max-width: 360px; }
.ph-footer__news-form { display: flex; gap: 0; max-width: 360px; }
.ph-footer__news-form input[type="email"] {
  flex: 1; min-width: 0;
  font-family: var(--font-sans); font-size: 14px; color: var(--fg-1);
  background: #fff; border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--r-pill, 999px) 0 0 var(--r-pill, 999px);
  padding: 12px 18px; outline: none;
}
.ph-footer__news-form input[type="email"]::placeholder { color: var(--fg-3); }
.ph-footer__news-form input[type="email"]:focus { border-color: var(--ph-brass); box-shadow: 0 0 0 2px rgba(184,153,104,0.35); }
.ph-footer__news-btn {
  font-family: var(--font-sans); font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--fg-onPlum); background: transparent; border: 1px solid rgba(255,255,255,0.6); border-left: 0;
  border-radius: 0 var(--r-pill, 999px) var(--r-pill, 999px) 0;
  padding: 12px 22px; cursor: pointer; white-space: nowrap;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.ph-footer__news-btn:hover { background: var(--ph-brass); border-color: var(--ph-brass); color: var(--ph-plum-darker); }
.ph-footer__news-consent { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; font-size: 12px; line-height: 1.5; color: rgba(255,255,255,0.72); max-width: 360px; }
.ph-footer__news-consent input[type="checkbox"] { margin-top: 3px; accent-color: var(--ph-brass); }
.ph-footer__news-thanks { margin-top: 14px; font-size: 14px; color: var(--ph-brass); }

/* Wordmark — centered between columns and bottom row. Per Val (2026-06-05):
   hairline above removed, gap from links above set to 30px. */
.ph-footer__brandmark { display: flex; justify-content: center; padding: 30px 0 44px; }
.ph-footer__brandmark img { height: 64px; width: auto; object-fit: contain; filter: brightness(0) invert(1); }

.ph-footer__bot { padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.18); display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: rgba(255,255,255,0.72); }
.ph-footer__bot a { color: rgba(255,255,255,0.72); text-decoration: none; }
.ph-footer__bot a:hover { color: var(--ph-brass); }

@media (max-width: 1024px) {
  .ph-footer__top { grid-template-columns: 1fr 1fr; gap: 40px; }
  .ph-footer__news { grid-column: 1 / -1; }
  .ph-footer__contact-col { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .ph-footer__top { grid-template-columns: 1fr; }
  .ph-footer__brandmark img { height: 52px; }
  .ph-footer__bot { flex-direction: column; gap: 12px; text-align: center; }
}

/* ============================================================
   Responsive (basic — desktop-first, light tablet)
   ============================================================ */
/* ============================================================
   Responsive — tablet + mobile
   ============================================================ */
@media (max-width: 1024px) {
  .ph-wrap { padding: 0 32px; }
  .ph-section { padding: 72px 0; }
  /* Collapse to the hamburger below 1024px (matches the `lg:` breakpoint in
     the markup). Tailwind's `hidden`/`lg:*` utilities live in @layer
     utilities and can't override the unlayered .ph-btn display, so the nav +
     desktop CTAs are hidden here instead. Drop the empty middle nav column
     (1fr auto 1fr → 1fr auto) so the hamburger pins right instead of landing
     mid-page. #nav-open is not a .ph-btn, so it stays visible. */
  .ph-header__inner { padding: 18px 24px; grid-template-columns: 1fr auto; }
  .ph-header__nav { display: none; }
  .ph-header__cta .ph-btn { display: none; }
  /* Mobile (Val, 2026-06-05): hide announce bar, pin header to viewport top,
     centre the wordmark, hamburger floats over header on the right. Backdrop
     blur keeps the header readable when overlaying hero images. */
  .ph-announce { display: none; }
  .ph-header,
  .ph-header--invert,
  .ph-header--solid {
    position: fixed; top: 0; left: 0; right: 0; z-index: 60;
    background: rgba(250, 248, 245, 0.92);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    backdrop-filter: saturate(140%) blur(10px);
    border-bottom: 1px solid var(--hairline);
  }
  .ph-header--invert { background: rgba(20, 14, 24, 0.55); border-bottom-color: rgba(255,255,255,0.12); }
  .ph-header--invert .ph-header__brand img { filter: brightness(0) invert(1); }
  /* Centre the brand: hamburger remains absolutely on the right, brand centred. */
  .ph-header__inner { position: relative; grid-template-columns: 1fr; justify-items: center; padding: 12px 20px; }
  .ph-header__brand { justify-self: center; }
  .ph-header__brand img { height: 28px; }
  .ph-header__cta { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); justify-self: end; }
  /* Push body content down so the fixed header doesn't overlay the first
     section. Hero is full-viewport so the header sits naturally on it; pages
     without a hero (privacy, contact, etc.) need the top padding too. */
  body.v3 { padding-top: 56px; }
  /* .ph-book stays single-row from 760px up — only the <760px gradient
     BOOK NOW pill swaps in below. */
  .ph-rooms-editorial { gap: 56px; }
  .ph-rooms-editorial .row, .ph-rooms-editorial .row.flip { grid-template-columns: 1fr; gap: 28px; }
  .ph-rooms-editorial .body, .ph-rooms-editorial .row.flip .body { padding: 0; }
  .ph-rooms-editorial h3 { font-size: clamp(28px, 5.4vw, 44px); }
  .ph-marquee { margin-inline: 24px !important; }
  .ph-marquee__item { padding: 24px 28px; font-size: 13px; }
  .ph-marquee__item img { width: 28px; height: 28px; }
  /* All ph-split sections stack to a single column on mobile (Val, 2026-06-05).
     Source order wins unless the section is marked --image-first-mobile and
     its children carry __media/__text classes, in which case image renders on
     top regardless of HTML order. */
  .ph-split { grid-template-columns: 1fr !important; gap: 24px !important; align-items: stretch !important; }
  .ph-split--image-first-mobile .ph-split__media { order: 1; }
  .ph-split--image-first-mobile .ph-split__text { order: 2; }

  /* Mobile-only 4:3 crop for all non-hero photos on events + weddings pages.
     Overrides any inline aspect-ratio / min-height / height to guarantee
     consistent framing. img inside uses object-fit: cover so the crop is
     proportional. */
  .ph-page-image {
    aspect-ratio: 4 / 3 !important;
    min-height: 0 !important;
    height: auto !important;
  }

  /* Tight section spacing for the events page Location → Flex → Holiday group
     on mobile. 32px padding each side = 64px between adjacent section
     boundaries (Val: previous 8px / 20px both too small). */
  .ph-section--tight-mobile { padding: 32px 0 !important; }
}

/* Old-Safari (old iPad, iOS ≤12 — detected via missing `inset`) header bump.
   On the physically large old iPads the compact tablet header reads too small;
   modern iPads already look right, so scope this to old Safari only and leave
   the modern view alone. Bigger logo + hamburger + a touch more height. */
@supports not (inset: 0) {
  @media (max-width: 1024px) {
    .ph-header__inner { padding: 24px 28px; }
    .ph-header__brand img { height: 48px; }
    /* Hamburger 50% bigger (old iPad) — bump the button too so the icon fits. */
    #nav-open { width: 60px; height: 60px; }
    #nav-open svg { width: 54px; height: 54px; }
    /* H1 reads too small here — clamp()/vw units underperform on old Safari, so
       pin large fixed sizes. */
    .ph-hero__h1 { font-size: 64px; }
    h1 { font-size: 48px; }
    /* Dining cards: aspect-ratio is unsupported on old Safari, so give the media
       an explicit height. The flip card (Pier 7) shows its image ABOVE the text
       and ~50% shorter. */
    .ph-dine__media { height: 300px; }
    article[data-dine-flip] { display: flex !important; flex-direction: column-reverse; }
    article[data-dine-flip] .ph-dine__media { height: 150px; }
  }
}

/* Old-Safari (old iPad) feature-section restack. The split sections across
   the site are inline-styled 2-col grids, so a normal media query can't
   collapse them; old Safari also ignores `gap`, so the columns sit squished
   with no spacing and the trailing CTAs spill into the next section. Scope to
   old Safari only (the modern view already restacks/space correctly) — force
   a single column and restore vertical rhythm with margins (`gap` is a no-op
   here, so the inline gap values do nothing and we replace them). */
@supports not (inset: 0) {
  @media (max-width: 1024px) {
    .ph-split { display: block !important; }
    .ph-split > * + * { margin-top: 44px; }
  }
}

/* Phone breakpoint */
@media (max-width: 760px) {
  .ph-wrap { padding: 0 20px; }
  .ph-section { padding: 56px 0; }

  /* Header — hide desktop nav, leave brand + Book Now */
  .ph-header__inner { grid-template-columns: 1fr auto; gap: 12px; padding: 14px 20px; }
  .ph-header__brand img { height: 30px; }
  .ph-header__nav { display: none; }
  .ph-header__cta .ph-btn:not(.ph-btn--primary) { display: none; }

  /* Hero — shorter, smaller copy, NO docked widget overlap */
  .ph-hero { height: auto; min-height: 88vh; }
  .ph-hero__copy { bottom: auto; top: 50%; transform: translateY(-50%); position: absolute; padding-bottom: 60px; }
  .ph-hero__copy .inner { max-width: 100%; }
  .ph-hero__h1 { font-size: clamp(32px, 9.6vw, 56px); margin-bottom: 14px; }
  .ph-hero__sub { font-size: 15px; margin-bottom: 22px; }
  .ph-hero__ctas { gap: 10px; }
  .ph-hero__ctas .ph-btn { padding: 13px 22px; font-size: 11px; }
  .ph-hero__dots { bottom: 36px; }

  /* Booking widget — un-dock, place below hero in flow */
  .ph-book--docked {
    position: relative; left: auto; bottom: auto; transform: none;
    width: calc(100% - 32px); margin: -28px auto 32px;
  }
  .ph-book { grid-template-columns: 1fr 1fr; gap: 4px; padding: 10px; border-radius: 18px; }
  .ph-book__field { padding: 10px 14px; }
  .ph-book__field + .ph-book__field { border-left: 0; }
  .ph-book__field:nth-child(odd) + .ph-book__field { border-left: 1px solid var(--hairline); }
  .ph-book__lbl { font-size: 9px; letter-spacing: 0.2em; }
  .ph-book__val { font-size: 15px; }
  .ph-book__btn { grid-column: 1 / -1; padding: 14px 16px; font-size: 11px; }

  /* Section heading inline-sizes — collapse via clamp via attribute style */
  .ph-section h2, .ph-section h3,
  section[style*="background"] h2 {
    /* Mobile collapse: tighter sizes for inline-styled headings */
  }

  /* Two-column sections — any .ph-wrap with an inline grid-template-columns
     collapses to a single column on mobile (catches Location, Events, etc.
     even when their <section> isn't tagged with .ph-section). */
  .ph-wrap[style*="grid-template-columns"] { grid-template-columns: 1fr !important; gap: 32px !important; }
  /* Pool callout — pull it inside the photo, scale down */
  .ph-section .ph-wrap > div > div[style*="right: -32px"] {
    right: 16px !important; bottom: 16px !important; padding: 12px 16px !important;
  }
  .ph-section .ph-wrap > div > div[style*="right: -32px"] > div:first-child {
    font-size: 30px !important;
  }

  /* Book Direct perks table — stack */
  section[style*="background: var(--ph-plum)"] > .ph-wrap > div[style*="grid-template-columns: repeat(3"] {
    grid-template-columns: 1fr !important;
  }
  section[style*="background: var(--ph-plum)"] > .ph-wrap > div[style*="grid-template-columns: repeat(3"] > div {
    border-right: 0 !important;
    border-bottom: 1px solid rgba(232,226,214,0.18);
  }
  section[style*="background: var(--ph-plum)"] > .ph-wrap > div[style*="grid-template-columns: repeat(3"] > div:last-child {
    border-bottom: 0;
  }

  /* Dining — stack alternating spreads */
  section[style*="background: var(--ph-sand)"] article[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }

  /* Weddings split — stack */
  section[style*="padding: 72px 0"] > .ph-wrap[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  /* Attractions intro grid — stack */
  section[style*="background: var(--ph-sand)"] > .ph-wrap[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  /* Attractions cards smaller */
  .ph-hs__track > article { width: 280px !important; }

  /* Social grid: 2 columns instead of 4 */
  div[style*="grid-template-columns: repeat(4, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }

  /* Footer — single column */
  .ph-footer { padding: 48px 0 24px; }
  .ph-footer__top { grid-template-columns: 1fr; gap: 36px; padding-bottom: 36px; }
  .ph-footer__logo img { height: 60px; }
  .ph-footer__bot { flex-direction: column; gap: 12px; }
  .ph-footer__bot > * { text-align: center; }
  .ph-footer h4, .ph-footer__h {
    /* Important: re-assert here in case any default H4 style still bleeds */
    font-family: var(--font-sans); font-size: 12px; font-weight: 600;
    letter-spacing: 0.22em; text-transform: uppercase;
    font-style: normal; color: var(--fg-onPlum);
    margin: 0 0 16px;
  }

  /* All inline-styled big H2s — re-cap via attribute-selector clamp */
  h2[style*="font-size: 56px"] { font-size: clamp(28px, 7vw, 56px) !important; }
  h2[style*="font-size: 52px"] { font-size: clamp(28px, 6.5vw, 52px) !important; }
  h2[style*="font-size: 48px"] { font-size: clamp(26px, 6vw, 48px) !important; }
  h2[style*="font-size: 46px"] { font-size: clamp(26px, 5.6vw, 46px) !important; }
  h2[style*="font-size: 44px"] { font-size: clamp(26px, 5.4vw, 44px) !important; }
  h2[style*="font-size: 42px"] { font-size: clamp(24px, 5vw, 42px) !important; }
  h3[style*="font-size: 40px"] { font-size: clamp(24px, 5vw, 40px) !important; }
  h4[style*="font-size: 32px"] { font-size: clamp(22px, 4.4vw, 32px) !important; }
}

/* Very narrow phones — extra trim */
@media (max-width: 380px) {
  .ph-wrap { padding: 0 16px; }
  .ph-hero__h1 { font-size: clamp(28px, 9vw, 38px); }
  .ph-book__field { padding: 8px 12px; }
}

/* ============================================================
   Contact page — phone/email block on the left, simple form
   on the right; mockup-faithful spacing.
   ============================================================ */
.ph-contact-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 80px; align-items: start; }
@media (max-width: 880px) { .ph-contact-grid { grid-template-columns: 1fr; gap: 56px; } }

.ph-contact-block { margin-bottom: 36px; }
.ph-contact-block h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.005em;
  color: var(--ph-plum);
  margin: 0 0 14px;
}
.ph-contact-block p,
.ph-contact-block li {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.65;
  color: var(--fg-1);
  margin: 0;
}
.ph-contact-block a { color: var(--fg-1); text-decoration: none; border-bottom: 1px solid var(--hairline); transition: color 200ms var(--ease-out), border-color 200ms var(--ease-out); }
.ph-contact-block a:hover { color: var(--ph-plum); border-color: var(--ph-plum); }

.ph-contact-rule { height: 1px; background: var(--hairline); margin: 32px 0; border: 0; }

.ph-contact-emails {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 14px;
}
.ph-contact-emails__cat {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ph-plum);
  margin-bottom: 4px;
  display: block;
}

.ph-contact-form { display: flex; flex-direction: column; gap: 18px; }
.ph-contact-form__field {
  border: 1px solid var(--ph-stone);
  border-radius: var(--r-card);
  padding: 0 22px;
  background: #fff;
  transition: border-color 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
.ph-contact-form__field:focus-within {
  border-color: var(--ph-plum);
  box-shadow: 0 0 0 3px rgba(98,76,121,0.08);
}
/* Single-line inputs only — fixed height, never expand or wrap. */
.ph-contact-form__field input {
  width: 100%;
  height: 56px;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--fg-1);
}
.ph-contact-form__field input::placeholder { color: var(--fg-2); opacity: 1; }
.ph-contact-form__submit { align-self: flex-end; margin-top: 6px; }

/* ============================================================
   Careers page — clean job-card list. One per row, click-through
   to a mailto application or future detail page.
   ============================================================ */
.ph-job-list { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--hairline); }
.ph-job-card {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 28px 0;
  border-bottom: 1px solid var(--hairline);
  text-decoration: none;
  color: var(--fg-1);
  transition: background 200ms var(--ease-out);
}
.ph-job-card:hover { background: rgba(98,76,121,0.04); }
.ph-job-card__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--ph-plum);
  margin: 0;
}
.ph-job-card__meta {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-2);
}
.ph-job-card__type {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ph-plum);
}
.ph-job-card__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: transparent;
  color: var(--ph-plum);
  transition: background 200ms var(--ease-out), transform 200ms var(--ease-out);
}
.ph-job-card:hover .ph-job-card__arrow {
  background: var(--ph-plum);
  color: #fff;
  transform: translateX(4px);
}
@media (max-width: 720px) {
  .ph-job-card { grid-template-columns: 1fr auto; row-gap: 8px; }
  .ph-job-card__meta, .ph-job-card__type { grid-column: 1; font-size: 12px; }
  .ph-job-card__arrow { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
}

/* ============================================================
   FAQ accordion — native <details>/<summary>, chevron rotates
   on open. Section headings group related Qs.
   ============================================================ */
.ph-faq-section { margin-bottom: 56px; }
.ph-faq-section:last-of-type { margin-bottom: 0; }
.ph-faq-section__h {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--ph-plum);
  margin: 0 0 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--hairline);
}

.ph-faq-item {
  border-bottom: 1px solid var(--hairline);
}
.ph-faq-item > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 4px;
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--fg-1);
  transition: color var(--dur-base) var(--ease-out);
}
.ph-faq-item > summary::-webkit-details-marker { display: none; }
.ph-faq-item > summary:hover { color: var(--ph-plum); }
.ph-faq-item[open] > summary { color: var(--ph-plum); }

.ph-faq-item__chev {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: transparent;
  color: var(--ph-plum);
  transition: transform 280ms var(--ease-out), background 200ms var(--ease-out);
}
.ph-faq-item:hover .ph-faq-item__chev { background: rgba(98, 76, 121, 0.08); }
.ph-faq-item[open] .ph-faq-item__chev { transform: rotate(180deg); }

.ph-faq-item__body {
  padding: 0 4px 24px;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.7;
  color: var(--fg-2);
  max-width: 760px;
}
.ph-faq-item__body ul { list-style: disc; padding-left: 22px; margin: 8px 0; }
.ph-faq-item__body li { margin: 4px 0; }
.ph-faq-item__body strong { color: var(--fg-1); font-weight: 600; }

/* ============================================================
   Blog landing — 3-col card grid, mobile collapses to 1.
   Card has rounded-top image, padded body, plum title link.
   ============================================================ */
.ph-blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 32px;
}
@media (max-width: 1024px) { .ph-blog-grid { grid-template-columns: repeat(2, 1fr); gap: 36px 24px; } }
@media (max-width: 700px)  { .ph-blog-grid { grid-template-columns: 1fr; gap: 40px; } }

/* 2-column variant. */
.ph-blog-grid--two { grid-template-columns: repeat(2, 1fr); gap: 48px 40px; }
@media (max-width: 700px) { .ph-blog-grid--two { grid-template-columns: 1fr; gap: 40px; } }

/* 4-column variant — used on the /offers/ landing (lots of offers). */
.ph-blog-grid--four { grid-template-columns: repeat(4, 1fr); gap: 36px 28px; }
@media (max-width: 1100px) { .ph-blog-grid--four { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px)  { .ph-blog-grid--four { grid-template-columns: repeat(2, 1fr); gap: 32px 20px; } }
@media (max-width: 520px)  { .ph-blog-grid--four { grid-template-columns: 1fr; } }

.ph-blog-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: var(--r-card);
  overflow: hidden;
  border: 1px solid var(--hairline);
  transition: transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out);
}
.ph-blog-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }

.ph-blog-card__media {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--ph-paper);
}
.ph-blog-card__media img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 420ms var(--ease-out);
}
.ph-blog-card:hover .ph-blog-card__media img { transform: scale(1.04); }

.ph-blog-card__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px 28px 32px;
  flex: 1;
}
.ph-blog-card__meta {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ph-plum);
  opacity: 0.85;
}
.ph-blog-card__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--ph-plum);
  margin: 0;
  /* Cap at 2 lines so every card aligns on the grid. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ph-blog-card__title a { color: inherit; text-decoration: none; }
.ph-blog-card__title a:hover { color: var(--ph-plum-deep); }
.ph-blog-card__excerpt {
  font-family: var(--font-sans);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--fg-2);
  margin: 0;
  flex: 1;
  /* Cap at 3 lines, ellipsize anything longer. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ph-blog-card__body > div:last-child { margin-top: 6px; }

/* ============================================================
   Editorial masonry blog grid — CSS columns produce true masonry
   flow; mixed image aspect ratios per card create asymmetric
   varying card heights. 15px rounded corners site spec. Cards
   share the .ph-blog-card structure with the offers page, so the
   line-clamps + hover lift apply automatically.
   ============================================================ */

/* Magazine layout — a repeating cycle of rows (hero+stack → feature → 3-up)
   that gives the page a consistent rhythm without random masonry gaps. Cards
   inside a row share grid height via align-items: stretch + flexible
   internals (image flexes, body sits at the bottom), and the wide "feature"
   row is intentionally short (≤280px) so it doesn't dominate the page.
   Excerpt length is governed per modifier via -webkit-line-clamp — larger
   cards show more text, smaller cards stay tight. */
.ph-blog-mag { display: flex; flex-direction: column; gap: 36px; }
.ph-blog-row { display: grid; gap: 32px; align-items: stretch; min-width: 0; }
.ph-blog-row--hero-stack { grid-template-columns: 2fr 1fr; }
.ph-blog-row--feature    { grid-template-columns: 1fr; }
.ph-blog-row--three      { grid-template-columns: repeat(3, 1fr); }
.ph-blog-row--two        { grid-template-columns: repeat(2, 1fr); max-width: 880px; margin: 0 auto; width: 100%; }
.ph-blog-stack { display: grid; grid-template-rows: 1fr 1fr; gap: 32px; min-width: 0; min-height: 0; }
.ph-blog-stack > * { min-height: 0; }

.ph-mag-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--ph-stone); border-radius: var(--r-card); overflow: hidden; transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); min-width: 0; }
.ph-mag-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.ph-mag-card__media { display: block; overflow: hidden; background: var(--ph-paper); flex: 1 1 auto; min-height: 200px; }
.ph-mag-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur-base) var(--ease-out); }
.ph-mag-card:hover .ph-mag-card__media img { transform: scale(1.04); }
.ph-mag-card__body { padding: 22px 26px 24px; display: flex; flex-direction: column; gap: 10px; flex: 0 0 auto; }
.ph-mag-card__meta { font-family: var(--font-sans); font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ph-plum); }
.ph-mag-card__title { font-family: var(--font-display); font-weight: 500; font-size: 22px; line-height: 1.2; letter-spacing: -0.01em; margin: 0; color: var(--fg-1); }
.ph-mag-card__title a { color: inherit; text-decoration: none; }
.ph-mag-card__title a:hover { color: var(--ph-plum-deep); }
.ph-mag-card__excerpt {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.6;
  color: var(--fg-2);
  margin: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;  /* default — overridden per variant below */
}
.ph-mag-card__cta { font-family: var(--font-sans); font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ph-plum); display: inline-flex; align-items: center; gap: 10px; text-decoration: none; margin-top: auto; padding-top: 8px; }

/* Variants — excerpt clamp scales with card real-estate.
   hero:    ~4 lines (deep card, deserves a richer preview)
   col:     ~2 lines (compact)
   feature: ~3 lines (compressed banner)                                */
.ph-mag-card--hero { /* default flex column from base */ }
.ph-mag-card--hero .ph-mag-card__media   { min-height: 360px; }
.ph-mag-card--hero .ph-mag-card__title   { font-size: 28px; }
.ph-mag-card--hero .ph-mag-card__excerpt { -webkit-line-clamp: 4; font-size: 15px; }
.ph-mag-card--hero .ph-mag-card__body    { padding: 26px 30px 28px; }

/* Per Val, Jun 1: shorten the col card images by ~50%. Pin to a landscape
   aspect-ratio so the image stops flex-growing to fill the row height. */
.ph-mag-card--col .ph-mag-card__media    { aspect-ratio: 16 / 9; min-height: 0; flex: none; }
.ph-mag-card--col .ph-mag-card__title    { font-size: 18px; }
.ph-mag-card--col .ph-mag-card__excerpt  { -webkit-line-clamp: 2; }
.ph-mag-card--col .ph-mag-card__body     { padding: 20px 22px 22px; }

/* Feature — slim banner. ~50% shorter than the prior version. Image left,
   copy right, equal columns; constrained max-height so it never bloats. */
.ph-mag-card--feature { display: grid; grid-template-columns: 1.05fr 1fr; align-items: stretch; max-height: 300px; }
.ph-mag-card--feature .ph-mag-card__media { min-height: 0; height: 100%; flex: none; }
.ph-mag-card--feature .ph-mag-card__media img { height: 100%; }
.ph-mag-card--feature .ph-mag-card__body { padding: 28px 36px; align-self: center; gap: 12px; max-height: 100%; overflow: hidden; }
.ph-mag-card--feature .ph-mag-card__title { font-size: 26px; line-height: 1.15; }
.ph-mag-card--feature .ph-mag-card__excerpt { -webkit-line-clamp: 3; }

@media (max-width: 1024px) {
  .ph-blog-row--hero-stack { grid-template-columns: 1fr; }
  .ph-blog-stack { grid-template-rows: auto; grid-template-columns: 1fr 1fr; gap: 24px; }
  .ph-blog-stack > * { min-height: 200px; }
  .ph-blog-row--three { grid-template-columns: repeat(2, 1fr); }
  .ph-blog-row--three > :nth-child(3) { grid-column: 1 / -1; }  /* third card spans 2 cols when there are only 2 cols */
  .ph-mag-card--hero .ph-mag-card__media { min-height: 280px; }
  .ph-mag-card--hero .ph-mag-card__title { font-size: 26px; }
  .ph-mag-card--feature { max-height: 260px; grid-template-columns: 1fr 1fr; }
  .ph-mag-card--feature .ph-mag-card__title { font-size: 22px; }
}
@media (max-width: 760px) {
  .ph-blog-mag { gap: 24px; }
  .ph-blog-row,
  .ph-blog-row--hero-stack,
  .ph-blog-row--feature,
  .ph-blog-row--three,
  .ph-blog-row--two { grid-template-columns: 1fr; gap: 24px; }
  .ph-blog-stack { display: contents; }  /* collapse so stack cards stack vertically with rest */
  .ph-blog-row--three > :nth-child(3) { grid-column: auto; }
  .ph-mag-card--feature { display: flex; flex-direction: column; max-height: none; }
  .ph-mag-card--feature .ph-mag-card__media { min-height: 220px; flex: 0 0 auto; }
  .ph-mag-card--feature .ph-mag-card__body { padding: 22px 24px 24px; align-self: stretch; }
  .ph-mag-card--feature .ph-mag-card__title { font-size: 22px; }
  .ph-mag-card--hero .ph-mag-card__media { min-height: 220px; }
  .ph-mag-card--hero .ph-mag-card__title { font-size: 22px; }
  /* Mobile keeps the same 16:9 ratio from the desktop rule (above); just
     reset the min-height override so it doesn't fight the aspect-ratio. */
  .ph-mag-card--col  .ph-mag-card__media { min-height: 0; }
  /* On mobile every card has room — show a slightly fuller excerpt. */
  .ph-mag-card--col .ph-mag-card__excerpt { -webkit-line-clamp: 3; }
}

.ph-blog-masonry {
  column-count: 3;
  column-gap: 32px;
}
@media (max-width: 1024px) { .ph-blog-masonry { column-count: 2; column-gap: 24px; } }
@media (max-width: 640px)  { .ph-blog-masonry { column-count: 1; } }

.ph-blog-masonry .ph-mason-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 15px;
  overflow: hidden;
  border: 1px solid var(--hairline);
  /* Keep each card whole — never let a column-break split it. */
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  margin-bottom: 32px;
  transition: transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out);
}
.ph-blog-masonry .ph-mason-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }

.ph-mason-card__media { display: block; overflow: hidden; background: var(--ph-paper); }
.ph-mason-card__media img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 420ms var(--ease-out);
}
.ph-blog-masonry .ph-mason-card:hover .ph-mason-card__media img { transform: scale(1.04); }

/* Aspect variants — rotate through these per card to create
   mixed heights. Tall, square, wide, portrait. */
.ph-mason-card--tall    .ph-mason-card__media { aspect-ratio: 4 / 5; }
.ph-mason-card--square  .ph-mason-card__media { aspect-ratio: 1 / 1; }
.ph-mason-card--wide    .ph-mason-card__media { aspect-ratio: 16 / 10; }
.ph-mason-card--portrait .ph-mason-card__media { aspect-ratio: 3 / 4; }
.ph-mason-card--landscape .ph-mason-card__media { aspect-ratio: 4 / 3; }

.ph-mason-card__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 26px 28px 26px;
}
.ph-mason-card__meta {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ph-plum);
  opacity: 0.85;
}
.ph-mason-card__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--ph-plum);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ph-mason-card__title a { color: inherit; text-decoration: none; }
.ph-mason-card__title a:hover { color: var(--ph-plum-deep); }
.ph-mason-card__excerpt {
  font-family: var(--font-sans);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--fg-2);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Subtle "Read More" CTA: plum text, small arrow that nudges right. */
.ph-mason-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ph-plum);
  text-decoration: none;
  align-self: flex-start;
}
.ph-mason-card__cta svg { transition: transform 200ms var(--ease-out); }
.ph-mason-card__cta:hover { color: var(--ph-plum-deep); }
.ph-mason-card__cta:hover svg { transform: translateX(4px); }

/* Category filter — pill chips with active state. */
.ph-blog-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0 0 56px;
}
.ph-blog-filter button {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 10px 18px;
  border: 1px solid var(--ph-plum);
  background: transparent;
  color: var(--ph-plum);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: all 180ms var(--ease-out);
}
.ph-blog-filter button:hover { background: rgba(98, 76, 121, 0.08); }
.ph-blog-filter button.is-active {
  background: var(--ph-plum);
  color: var(--fg-onPlum);
}

/* ============================================================
   Inline Pinnacle Club signup form (blog page + future inline uses).
   Lives on a plum background; fields use white underlines.
   ============================================================ */
.ph-club-inline { display: flex; flex-direction: column; gap: 18px; }
.ph-club-inline__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@media (max-width: 600px) { .ph-club-inline__row { grid-template-columns: 1fr; } }

.ph-club-inline__field {
  display: block;
  border-bottom: 1px solid rgba(255,255,255,0.45);
  transition: border-color var(--dur-base) var(--ease-out);
}
.ph-club-inline__field:focus-within { border-color: #ffffff; }
.ph-club-inline__field input[type="text"],
.ph-club-inline__field input[type="email"] {
  width: 100%;
  background: transparent;
  border: 0;
  outline: 0;
  padding: 12px 2px;
  font-family: var(--font-sans);
  font-size: 15px;
  color: #fff;
  letter-spacing: 0.01em;
}
.ph-club-inline__field input::placeholder { color: rgba(255,255,255,0.7); }

.ph-club-inline__consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255,255,255,0.85);
  text-align: left;
  margin: 6px 0 8px;
  cursor: pointer;
}
.ph-club-inline__consent input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 16px; height: 16px; margin-top: 2px;
  border: 1px solid rgba(255,255,255,0.7);
  border-radius: 3px;
  background: transparent;
  flex: none;
  cursor: pointer;
  position: relative;
}
.ph-club-inline__consent input[type="checkbox"]:checked {
  background: #fff;
  border-color: #fff;
}
.ph-club-inline__consent input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  top: 2px; right: 2px; bottom: 2px; left: 2px;
  background: var(--ph-plum);
  border-radius: 1px;
}
.ph-club-inline button[type="submit"] { align-self: center; margin-top: 6px; }

/* ============================================================
   Blog post detail — long-form article layout.
   ============================================================ */
.ph-blog-article {
  max-width: 760px;
  margin: 0 auto;
  font-family: var(--font-sans);
  color: var(--fg-1);
}
.ph-blog-article__eyebrow {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ph-plum);
  margin-bottom: 18px;
}
.ph-blog-article__h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 50px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ph-plum);
  margin: 0 0 24px;
}
@media (max-width: 700px) {
  .ph-blog-article__h1 { font-size: clamp(32px, 8vw, 50px); }
}
.ph-blog-article__lede {
  /* "P1" — Val's design system, intro/lede paragraph below H1. */
  font-family: var(--font-sans);
  font-style: italic;
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0;
  line-height: 1.5;
  color: var(--fg-1);
  margin: 0 0 40px;
}
.ph-blog-article__hero {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--r-card);
  margin: 0 0 48px;
  display: block;
}
.ph-blog-article h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 28px;
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--ph-plum);
  margin: 48px 0 16px;
}
.ph-blog-article p {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.7;
  color: var(--fg-1);
  margin: 0 0 18px;
}
.ph-blog-article__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 32px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ph-plum);
  text-decoration: none;
}
.ph-blog-article__back:hover { color: var(--ph-plum-deep); }

/* ── iOS focus-zoom fix ─────────────────────────────────────────────────
   Safari / Chrome on iOS auto-zoom to ~150% the moment a user focuses an
   input whose effective font-size is below 16px. There is no way to
   disable the behaviour from the input itself; the only documented fix
   is to make sure every text-input has ≥16px font-size on touch widths.
   We apply it across the board so contact / events / weddings / contact
   modal / club modal forms all behave consistently on mobile. Inputs are
   still styled however they were on desktop — this only kicks in below
   the standard breakpoint. */
@media (max-width: 768px) {
  input:not([type=button]):not([type=submit]):not([type=reset]):not([type=checkbox]):not([type=radio]),
  textarea,
  select {
    font-size: 16px;
  }
}