/* ============================================================
   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;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('/_assets/fonts/PlayfairDisplay-Italic-VariableFont_wght.woff2') format('woff2-variations'),
       url('/_assets/fonts/PlayfairDisplay-Italic-VariableFont_wght.woff2') format('woff2');
  font-weight: 400 900;
  font-style: italic;
  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', 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-serif:        'ogg', 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-italic:       'Playfair Display', 'ogg', Georgia, 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; }
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-italic); font-weight: var(--w-regular); font-style: italic; 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-italic); font-style: italic; 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-visible, .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-visible,
.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-visible { 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-visible,
.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-visible { background: #ffffff; color: var(--ph-plum); border-color: #ffffff; }
.ph-btn--ghost { background: transparent; color: var(--ph-plum); padding: 0; border: 0; border-bottom: 1px solid var(--ph-plum); border-radius: 0; padding-bottom: 6px; }

.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; }

/* ============================================================
   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. */
.ph-book--sticky {
  position: fixed;
  left: 0; right: 0; bottom: 0; top: 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);
  will-change: transform;
  transition: max-width 1.15s cubic-bezier(0.22, 0.61, 0.36, 1),
              padding 1.15s cubic-bezier(0.22, 0.61, 0.36, 1),
              border-radius 1.15s cubic-bezier(0.22, 0.61, 0.36, 1),
              border-color 1.15s cubic-bezier(0.22, 0.61, 0.36, 1),
              box-shadow 1.15s 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;
}
/* Tablet: 3 cols. Mobile (≤760px, matches the site's other mobile rules): 2 cols. */
@media (max-width: 1024px) { .ph-ig-grid { grid-template-columns: repeat(3, 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; inset: 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-visible .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; }
.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: transparent;
  border: 0;
  border-bottom: 1px solid var(--ph-stone);
  padding: 10px 0 12px;
  outline: none;
  transition: border-color var(--dur-fast);
}
.ph-evform__field > textarea { padding: 12px 0; }
.ph-evform__field > input:focus,
.ph-evform__field > select:focus,
.ph-evform__field > textarea:focus { border-bottom-color: var(--ph-plum); }
.ph-evform__field > select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ph-plum) 50%),
    linear-gradient(135deg, var(--ph-plum) 50%, transparent 50%);
  background-position: calc(100% - 14px) 18px, calc(100% - 8px) 18px;
  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; }
}

/* ============================================================
   Pinnacle Club signup modal
   ============================================================ */
.ph-club {
  position: fixed; inset: 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; inset: 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: 48px 24px 28px; border-radius: 22px; }
  .ph-club__title { font-size: 26px; }
  .ph-club__row { grid-template-columns: 1fr; gap: 12px; }
  .ph-club__body { font-size: 14px; }
}

/* Drawer anchors: the global :where(body.v3) a rule was overriding Tailwind's
   text-white on anchors-without-children (e.g. OFFERS). #nav-drawer adds an
   ID (1,0,0) to the selector so it wins both Tailwind and the body.v3 rule. */
#nav-drawer a,
#nav-drawer a:hover,
#nav-drawer a:focus,
#nav-drawer a:visited { color: #fff; text-decoration: none; }
#nav-drawer .ph-drawer-call:hover,
#nav-drawer .ph-drawer-call:active { background: rgba(0, 0, 0, 0.18); }

/* 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-visible,
  .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; inset: 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; inset: 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: 720px; }
.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(34px, 7.6vw, 72px); 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-italic); font-style: italic; font-weight: 400; }
.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: 610px; 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-italic); font-style: italic; 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; 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; }

/* ============================================================
   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; } }

/* ============================================================
   Rooms — featured carousel (horizontal-scrolling cards)
   Ported from the new Claude Design Canvas drop (May 22 update).
   ============================================================ */
.ph-rfc { position: relative; width: 100%; }
.ph-rfc__legend { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0; margin: 0 auto 40px; padding: 0; position: relative; z-index: 5; }
.ph-rfc__legend-item { font-family: var(--font-sans); font-size: 12px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ph-mist); background: transparent; border: 0; padding: 10px 24px; cursor: pointer; position: relative; transition: color var(--dur-base) var(--ease-out); }
.ph-rfc__legend-item + .ph-rfc__legend-item::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 14px; background: var(--ph-stone); }
.ph-rfc__legend-item::after { content: ""; position: absolute; left: 50%; bottom: -2px; transform: translateX(-50%); width: 0; height: 2px; background: var(--ph-plum); transition: width var(--dur-base) var(--ease-out); }
.ph-rfc__legend-item.is-active { color: var(--ph-plum); }
.ph-rfc__legend-item.is-active::after { width: 28px; }
.ph-rfc__legend-item:hover:not(.is-active) { color: var(--fg-1); }
.ph-rfc__track { display: flex; gap: 32px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 8px 200px 24px; scroll-padding-left: 200px; scrollbar-width: none; }
.ph-rfc__track::-webkit-scrollbar { display: none; }
.ph-rfc__card { flex: 0 0 1040px; scroll-snap-align: start; transition: opacity 350ms var(--ease-out); }
.ph-rfc__card[data-active="false"] { opacity: 0.55; }
.ph-rfc__arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 56px; height: 56px; background: rgba(0,0,0,0.25); color: #ffffff; border: 0; border-radius: 50%; z-index: 10; cursor: pointer; display: grid; place-items: center; transition: all 250ms var(--ease-out); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.ph-rfc__arrow:hover:not(:disabled) { background: rgba(0,0,0,0.55); color: #ffffff; }
.ph-rfc__arrow:active:not(:disabled) { transform: translateY(-50%) scale(0.95); }
.ph-rfc__arrow:disabled { opacity: 0.3; cursor: not-allowed; }
.ph-rfc__arrow--prev { left: 64px; }
.ph-rfc__arrow--next { right: 64px; }

/* The horizontal-split single-card carousel layout above is the canonical
   layout at every desktop width — no widescreen grid swap. */

/* Amenity grid (Stay page — 6 cols x 2 rows, brass-bordered) */
.ph-amen-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; border: 1px solid var(--ph-brass); border-radius: var(--r-card); background: #fff; overflow: hidden; }
.ph-amen { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; }
.ph-amen__icon { width: 56px; height: 56px; display: grid; place-items: center; }
.ph-amen__icon img { width: 44px; height: 44px; object-fit: contain; }
.ph-amen__l { font-family: var(--font-sans); font-size: 14px; font-weight: 500; color: var(--fg-1); letter-spacing: 0.04em; line-height: 1.3; }
@media (max-width: 1024px) {
  .ph-amen-grid { grid-template-columns: repeat(4, 1fr); }
  .ph-amen-grid .ph-amen { border-right-width: 1px !important; border-bottom-width: 1px !important; }
  .ph-amen-grid .ph-amen:nth-child(4n) { border-right: none !important; }
  .ph-amen-grid .ph-amen:nth-last-child(-n+4) { border-bottom: none !important; }
}
@media (max-width: 640px) {
  .ph-amen-grid { grid-template-columns: repeat(2, 1fr); }
  .ph-amen-grid .ph-amen:nth-child(2n) { border-right: none !important; }
  .ph-amen-grid .ph-amen:nth-last-child(-n+2) { border-bottom: none !important; }
}

/* Per-card photo slider */
.ph-pslider { position: relative; width: 100%; height: 100%; overflow: hidden; }
.ph-pslider__slide { position: absolute; inset: 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; }

/* Mobile carousel sizing — cards become 90vw so they fit + one peek shows */
@media (max-width: 1024px) {
  .ph-rfc__track { padding: 8px 24px 24px; scroll-padding-left: 24px; gap: 16px; }
  .ph-rfc__card { flex: 0 0 calc(100vw - 80px); }
  .ph-rfc__arrow { width: 44px; height: 44px; }
  .ph-rfc__arrow--prev { left: 8px; }
  .ph-rfc__arrow--next { right: 8px; }
}
@media (max-width: 760px) {
  .ph-rfc__legend { gap: 0; margin-bottom: 24px; padding: 0 16px; }
  .ph-rfc__legend-item { padding: 8px 12px; font-size: 11px; letter-spacing: 0.18em; }
  .ph-rfc__track { padding: 8px 16px 16px; scroll-padding-left: 16px; }
  .ph-rfc__card { flex: 0 0 calc(100vw - 48px); }
  .ph-rfc__arrow { display: none; }
}

/* ============================================================
   Existing — ph-rfx (featured card body): keep alongside ph-rfc
   ============================================================ */
/* Card aspect-ratio matches the image: image is 1.4fr of 2.4fr (= 7/12 of
   card width), with 5/4 photo aspect → image height = card_width * 7/15.
   Locking the card to 15/7 means the image fills its column edge-to-edge
   AND the body cell is exactly the same height, so the foot (sticky to
   body bottom) sits flush with the image bottom. */
.ph-rfx { display: grid; grid-template-columns: 1.4fr 1fr; aspect-ratio: 15 / 7; background: #fff; border: 1px solid var(--ph-stone); border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow-2); }
.ph-rfx__media { position: relative; aspect-ratio: 5 / 4; overflow: hidden; }
.ph-rfx__media img { width: 100%; height: 100%; object-fit: cover; }
.ph-rfx__tag { position: absolute; top: 24px; left: 24px; background: rgba(255,255,255,0.94); backdrop-filter: blur(6px); font-family: var(--font-sans); font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ph-plum); padding: 8px 14px; border-radius: var(--r-pill); z-index: 6; }
/* padding-bottom intentionally 0 so the foot (View Rates button) sits flush
   with the body's bottom edge — which is the same line as the image's bottom
   edge thanks to the grid. The foot keeps its padding-top for breathing room
   from the features list above. */
.ph-rfx__body { padding: 36px 40px 0; display: flex; flex-direction: column; justify-content: space-between; gap: 14px; max-height: 100%; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; }
.ph-rfx__body::-webkit-scrollbar { display: none; }
.ph-rfx__name { font-family: var(--font-display); font-weight: 500; font-size: 32px; letter-spacing: -0.015em; line-height: 1.05; color: var(--fg-1); margin: 0; }
.ph-rfx__features { display: flex; flex-direction: column; gap: 5px; margin: 10px 0 0; padding: 12px 0 0; border-top: 1px solid var(--hairline); }
.ph-rfx__feature { display: flex; align-items: flex-start; gap: 10px; font-family: var(--font-sans); font-size: 12px; line-height: 1.45; color: var(--fg-2); }
.ph-rfx__feature::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--ph-brass); flex: none; margin-top: 7px; }
.ph-rfx__foot { position: sticky; bottom: 0; padding: 18px 0 24px; background: #fff; display: flex; justify-content: flex-start; z-index: 2; }

@media (max-width: 760px) {
  /* Stack image on top of body — undo the desktop card aspect-ratio + the
     sticky foot, and let body grow to fit its content naturally. */
  .ph-rfx { grid-template-columns: 1fr; aspect-ratio: auto; }
  .ph-rfx__media { aspect-ratio: 4 / 3; }
  .ph-rfx__body { padding: 24px 22px 24px; max-height: none; overflow: visible; }
  .ph-rfx__name { font-size: 26px; }
  .ph-rfx__foot { position: static; background: transparent; padding: 18px 0 0; }
}

/* ============================================================
   Footer
   ============================================================ */
.ph-footer { background: var(--ph-plum-darker); color: var(--fg-onPlum); padding: 64px 0 28px; }
.ph-footer__top { display: grid; grid-template-columns: auto 1fr 1fr 1fr; gap: 48px; padding-bottom: 56px; 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 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: 14px; }
.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; }
.ph-footer__logo { display: flex; align-items: flex-start; }
.ph-footer__logo img { height: 80px; width: auto; filter: brightness(0) invert(1); }
.ph-footer__bot { padding-top: 28px; 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); }

/* ============================================================
   Responsive (basic — desktop-first, light tablet)
   ============================================================ */
/* ============================================================
   Responsive — tablet + mobile
   ============================================================ */
@media (max-width: 1024px) {
  .ph-wrap { padding: 0 32px; }
  .ph-section { padding: 72px 0; }
  .ph-header__inner { padding: 18px 24px; }
  .ph-header__nav { gap: 22px; }
  .ph-header__nav a { font-size: 12px; letter-spacing: 0.10em; }
  /* .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; }
}

/* 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;
}

/* ============================================================
   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 — used on the /offers/ landing page. */
.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; } }

.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.
   ============================================================ */
.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;
  inset: 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); }