/*
Theme Name: Proposal Dubai
Theme URI: https://proposaldubai.com
Author: Beaconize
Description: Custom theme for proposaldubai.com. Framework-free CSS, no page builder. Every editable string resolves to an options page, a taxonomy term field, or a package field — see DOCS/02.
Version: 0.1.0
Requires at least: 6.5
Requires PHP: 8.2
Text Domain: pd
*/

/* ==========================================================================
   Proposal Dubai — site.css
   Design system extracted 1:1 from the approved orchids.app prototype
   (src/index.css @theme block + Tailwind utility semantics).

   No build step. No framework. Drops into a WordPress theme as style.css
   or is enqueued as-is. Class prefix `pd-` so it never collides with
   plugin / Gutenberg CSS.

   Contrast decisions are documented in DOCS/03-design-tokens.md — every
   text token here has been measured against its background.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Brand — verbatim from prototype @theme */
  --pd-accent:        #5A0710;   /* oxblood */
  --pd-surface:       #faf8f5;   /* page cream */
  --pd-card:          #f2ede6;   /* card sand */
  --pd-border:        #e5ddd0;   /* hairline */
  --pd-ink:           #1c1410;   /* primary text  — 17.1:1 on surface */
  --pd-gold:          #C9A96E;   /* decorative / on-dark only */

  /* Accessibility-corrected text tokens (see DOCS/03) */
  --pd-ink-2:         #7a5f5e;   /* secondary body — 5.46:1 surface / 4.97:1 card */
  --pd-ink-3:         #726558;   /* small meta     — 5.33 surface / 4.85 card / 4.51 alt / 5.02 band */
  --pd-ink-decor:     #9c8d82;   /* NON-TEXT only: icon strokes, dividers */
  --pd-gold-ink:      #7f6427;   /* gold-toned TEXT on light — 5.28:1 */
  --pd-accent-soft:   #8A4F55;   /* == accent @70% over cream. white on it 6.3:1 */
  --pd-tone:          #f6f3ee;   /* card 45% over surface, resolved (no color-mix) */
  --pd-tone-2:        #f5f1ec;   /* card 60% over surface, resolved */

  /* Type */
  --pd-font-sans:     "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --pd-font-display:  "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --pd-font-eyebrow:  "Cormorant Unicase", "Cormorant Garamond", Georgia, serif;
  --pd-font-serif:    var(--pd-font-display);   /* legacy alias — display family */
  --pd-font-numeric:  "Inter", system-ui, sans-serif;
  /* Type scale (Tailwind parity) */
  --pd-text-xs:   0.75rem;   --pd-lh-xs:  1rem;
  --pd-text-sm:   0.875rem;  --pd-lh-sm:  1.25rem;
  --pd-text-base: 1rem;      --pd-lh-base: 1.5rem;
  --pd-text-lg:   1.125rem;  --pd-lh-lg:  1.75rem;
  --pd-text-xl:   1.25rem;   --pd-lh-xl:  1.75rem;
  --pd-text-2xl:  1.5rem;    --pd-lh-2xl: 2rem;
  --pd-text-3xl:  1.875rem;  --pd-lh-3xl: 2.25rem;
  --pd-text-4xl:  2.25rem;
  --pd-text-5xl:  3rem;
  --pd-text-6xl:  3.75rem;

  /* Space — 4px base */
  --pd-1: 0.25rem;  --pd-2: 0.5rem;   --pd-3: 0.75rem;  --pd-4: 1rem;
  --pd-5: 1.25rem;  --pd-6: 1.5rem;   --pd-8: 2rem;     --pd-10: 2.5rem;
  --pd-12: 3rem;    --pd-16: 4rem;    --pd-20: 5rem;

  /* Radii — `pill` was referenced but never defined in the prototype theme,
     it is defined here so buttons actually render as pills. */
  --pd-radius-lg:   0.5rem;
  --pd-radius-xl:   0.75rem;
  --pd-radius-2xl:  1rem;
  --pd-radius-pill: 9999px;

  /* Layout */
  --pd-container: 80rem;      /* max-w-7xl */
  --pd-header-h:  73px;       /* logo-driven, matches prototype exactly */

  --pd-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --pd-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* --------------------------------------------------------------------------
   1b. PROTOTYPE-PARITY SWITCH
   The orchids prototype ships two accidental deviations from its own declared
   design system, both verified in its compiled CSS:
     * `rounded-pill` was never defined in its @theme, so every button
       compiled to border-radius: 0.
     * headings use Tailwind's `font-serif`, not `font-playfair`, so they
       render in ui-serif/Georgia rather than Playfair Display.
   This build follows the DECLARED system (pills + Playfair) because that is
   what the 19-Jul style guide signed off. If the client wants pixel parity
   with the screen they were shown, uncomment this block — no other edit.
   -------------------------------------------------------------------------- */
/* ENABLED 21 Aug 2026 — client requires parity with the screen they approved.
   Verified against the running prototype: it renders border-radius 0 on every
   button (no 9999px anywhere in its radii set) and ui-serif headings.
   The WCAG text-colour corrections are NOT reverted — those fix contrast
   failures rather than match a design, and stay regardless of this switch.
   Re-comment this block to go back to the 19-Jul declared system. */
:root {
  --pd-radius-pill: 0;
  --pd-font-serif: ui-serif, Georgia, "Times New Roman", serif;
}

/* --------------------------------------------------------------------------
   1c. MOBILE TYPE SCALE — every step 2px smaller below the md breakpoint.
   Requested for the mobile build. Line-heights come down with them so the
   text tightens instead of floating. The smallest step is held at 11px:
   10px body-adjacent text is below the readable floor on a phone.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  :root {
    --pd-text-xs:   0.6875rem; --pd-lh-xs:  0.875rem;   /* 12 -> 11 (floored) */
    --pd-text-sm:   0.75rem;   --pd-lh-sm:  1.125rem;   /* 14 -> 12 */
    --pd-text-base: 0.875rem;  --pd-lh-base: 1.375rem;  /* 16 -> 14 */
    --pd-text-lg:   1rem;      --pd-lh-lg:  1.625rem;   /* 18 -> 16 */
    --pd-text-xl:   1.125rem;  --pd-lh-xl:  1.625rem;   /* 20 -> 18 */
    --pd-text-2xl:  1.375rem;  --pd-lh-2xl: 1.875rem;   /* 24 -> 22 */
    --pd-text-3xl:  1.75rem;   --pd-lh-3xl: 2.125rem;   /* 30 -> 28 */
    --pd-text-4xl:  2.125rem;                           /* 36 -> 34 */
    --pd-text-5xl:  2.875rem;                           /* 48 -> 46 */
    --pd-text-6xl:  3.625rem;                           /* 60 -> 58 */
  }
}

/* --------------------------------------------------------------------------
   2. RESET / BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--pd-header-h) + 1rem); }
body {
  margin: 0;
  background: var(--pd-surface);
  color: var(--pd-ink);
  font-family: var(--pd-font-sans);
  font-size: var(--pd-text-base);
  line-height: var(--pd-lh-base);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;               /* belt-and-braces against 1px overflow */
}
img, video, iframe, svg { max-width: 100%; }
img, video { height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--pd-font-display); font-weight: 700; margin: 0; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }

:where(a, button, summary, select, input, textarea):focus-visible {
  outline: 2px solid var(--pd-accent);
  outline-offset: 2px;
  border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

.pd-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.pd-skip {
  position: absolute; left: 0; top: -100px; z-index: 100;
  background: var(--pd-accent); color: #fff; padding: 0.75rem 1rem;
  border-radius: 0 0 var(--pd-radius-lg) 0;
}
.pd-skip:focus { top: 0; }

/* --------------------------------------------------------------------------
   3. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */
.pd-container {
  max-width: var(--pd-container);
  margin-inline: auto;
  padding-inline: var(--pd-4);
}
@media (min-width: 640px) { .pd-container { padding-inline: var(--pd-6); } }
@media (min-width: 1024px) { .pd-container { padding-inline: var(--pd-8); } }

.pd-section        { padding-block: var(--pd-16); }
.pd-section--tight { padding-block: var(--pd-12); }
.pd-section--top   { margin-top: var(--pd-20); }
.pd-section--flush { padding-block: 0; }

.pd-head { text-align: center; margin-bottom: var(--pd-12); }
.pd-head h2, .pd-head h1 { margin-top: var(--pd-2); }
/* The global p reset leaves the lede flush under the H2; the prototype keeps
   a 12px gap (measured), so restore it for every section heading block. */
.pd-head p { margin-top: var(--pd-3); }
.pd-eyebrow {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--pd-accent);
  font-family: var(--pd-font-eyebrow);
  font-size: 14px;
  line-height: 1.2;
  font-weight: 400;
}
.pd-h1 {
  font-weight: 700;
  font-size: clamp(48px, 5vw, 76px);
  line-height: 0.98;
  letter-spacing: -0.02em;
  max-width: 900px;
}
.pd-h2 { font-weight: 700; font-size: var(--pd-text-3xl); line-height: var(--pd-lh-3xl); letter-spacing: -0.01em; }
.pd-h3 { font-weight: 700; font-size: var(--pd-text-lg); line-height: var(--pd-lh-lg); }
@media (min-width: 640px) {
  .pd-h2 { font-size: var(--pd-text-4xl); }
}
@media (min-width: 1024px) {
  .pd-h1 { font-size: clamp(56px, 5vw, 76px); }
}

.pd-lede { font-size: var(--pd-text-lg); line-height: 1.625; color: var(--pd-ink-2); margin-top: var(--pd-4); }
.pd-body { font-size: var(--pd-text-sm); line-height: 1.625; color: var(--pd-ink-2); }
.pd-meta { font-size: var(--pd-text-xs); line-height: var(--pd-lh-xs); color: var(--pd-ink-3); }

/* Grid helpers — mobile-first, identical breakpoints to the prototype */
.pd-grid { display: grid; gap: var(--pd-6); grid-template-columns: 1fr; }
.pd-grid--gap10 { gap: var(--pd-10); }
.pd-grid--gap3  { gap: var(--pd-3); }
@media (min-width: 640px) {
  .pd-grid--2\@sm, .pd-grid--3\@lg, .pd-grid--4\@lg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pd-grid--3\@sm { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .pd-grid--2\@md { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pd-grid--3\@md { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .pd-grid--3\@lg { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pd-grid--4\@lg { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pd-grid--5\@lg { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .pd-grid--2\@lg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.pd-split { display: grid; gap: var(--pd-12); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 1024px) { .pd-split { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.pd-aspect-4-3  { aspect-ratio: 4 / 3;  overflow: hidden; }
.pd-aspect-16-9 { aspect-ratio: 16 / 9; overflow: hidden; }
.pd-aspect-16-10{ aspect-ratio: 16 / 10; overflow: hidden; }
.pd-aspect-4-3 > img, .pd-aspect-16-9 > img, .pd-aspect-16-10 > img,
.pd-cover { width: 100%; height: 100%; object-fit: cover; }
/* When the card image is a link (see template-parts/card-package.php) the
   aspect box is an <a>, which is inline by default — make it fill like the div. */
a.pd-aspect-4-3 { display: block; }

.pd-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pd-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* --------------------------------------------------------------------------
   4. BUTTONS
   State matrix: default / hover / focus-visible / active / disabled
   -------------------------------------------------------------------------- */
.pd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 44px;                       /* touch target */
  padding: 0.875rem 1.75rem;
  font-size: var(--pd-text-sm); font-weight: 500; line-height: 1;
  text-decoration: none; cursor: pointer;
  border-radius: var(--pd-radius-pill);
  border: 1px solid transparent;
  transition: background-color 0.2s var(--pd-ease), color 0.2s var(--pd-ease), border-color 0.2s var(--pd-ease);
}
.pd-btn svg { width: 1.25rem; height: 1.25rem; flex: none; }
.pd-btn--sm { padding: 0.625rem 1.25rem; min-height: 44px; }

/* primary — solid oxblood, white text 14.3:1 */
.pd-btn--primary { background: var(--pd-accent); border-color: var(--pd-accent); color: #fff; }
.pd-btn--primary:hover { background: #430509; border-color: #430509; }
.pd-btn--primary:active { background: #340407; }

/* soft — the prototype's accent/70 look, pinned to a solid value so contrast
   is predictable on any background (white on it = 6.3:1) */
.pd-btn--soft { background: var(--pd-accent-soft); border-color: var(--pd-accent); color: #fff; }
.pd-btn--soft:hover { background: var(--pd-accent); }

/* outline on light */
.pd-btn--outline { border-color: rgb(90 7 16 / 0.4); color: var(--pd-accent); background: transparent; }
.pd-btn--outline:hover { background: rgb(90 7 16 / 0.06); border-color: var(--pd-accent); }

/* glass — over photography only */
.pd-btn--glass {
  background: rgb(255 255 255 / 0.12);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-color: rgb(255 255 255 / 0.45); color: #fff;
}
.pd-btn--glass:hover { background: rgb(255 255 255 / 0.22); }
.pd-btn--ghost-light { border-color: rgb(255 255 255 / 0.6); color: #fff; background: transparent; }
.pd-btn--ghost-light:hover { background: rgb(255 255 255 / 0.12); }
.pd-btn[aria-disabled="true"], .pd-btn:disabled { opacity: 0.5; pointer-events: none; }

.pd-link { color: var(--pd-accent); font-weight: 600; text-decoration: none; }
.pd-link:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   5. HEADER / NAV
   -------------------------------------------------------------------------- */
.pd-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  /* Opaque. At 0.95 the hero video bled through the fixed header and it read
     as unfinished; the blur below is kept for anything that scrolls past. */
  background: var(--pd-surface);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--pd-border);
}
.pd-header__bar { display: flex; align-items: center; justify-content: space-between; height: var(--pd-header-h); gap: var(--pd-4); }
.pd-logo { display: flex; align-items: center; flex: none; }
.pd-logo img { height: var(--pd-header-h); width: auto; }

.pd-nav { display: none; align-items: center; gap: var(--pd-6); }
.pd-nav__link { font-size: var(--pd-text-base); font-weight: 500; color: var(--pd-ink-2); text-decoration: none; }
.pd-nav__link:hover { color: var(--pd-accent); }
.pd-header__cta { display: none; }
@media (min-width: 768px) {
  /* The nav and the header CTA shared one rule, and it reset the nav's own
     gap from --pd-6 (24px) down to --pd-3 (12px) — so the desktop nav was
     TIGHTER than the base declaration intended. Split them: the CTA cluster
     wants to stay compact, the nav wants air between six top-level items. */
  .pd-header__cta { display: flex; align-items: center; gap: var(--pd-3); }
  .pd-nav { display: flex; align-items: center; gap: var(--pd-5); }
}

@media (min-width: 1024px) {
  /* Measured on the deployed header: at 1024 there is only ~76px of slack
     between the logo and the CTA once the six items are laid out, so this
     breakpoint takes the smaller step. */
  .pd-nav { gap: var(--pd-8); }
}

@media (min-width: 1280px) {
  /* From 1280 up there is ~332px spare, so the nav can take the wider gap
     without pushing against the logo or the Private-consultation button. */
  .pd-nav { gap: var(--pd-10); }
}


.pd-burger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; background: none; border: 0; cursor: pointer; color: var(--pd-ink);
}
.pd-burger svg { width: 1.5rem; height: 1.5rem; }
.pd-burger .pd-burger__close { display: none; }
.pd-burger[aria-expanded="true"] .pd-burger__close { display: block; }
.pd-burger[aria-expanded="true"] .pd-burger__open  { display: none; }
/* declared after the base rule so source order actually hides it on desktop */
@media (min-width: 768px) { .pd-burger { display: none; } }

/* Desktop dropdown */
.pd-dd { position: relative; }
.pd-dd__toggle {
  display: inline-flex; align-items: center; gap: 0.25rem;
  background: none; border: 0; cursor: pointer; padding: 0.625rem 0; min-height: 44px;
  font-size: var(--pd-text-base); font-weight: 500; color: var(--pd-ink-2);
}
.pd-dd__toggle:hover { color: var(--pd-accent); }
.pd-dd__toggle svg { width: 0.875rem; height: 0.875rem; transition: transform 0.2s var(--pd-ease); }
.pd-dd__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.pd-dd__panel {
  position: absolute; top: 100%; left: 0; padding-top: 0.25rem;
  display: none; min-width: 16rem; z-index: 60;
}
.pd-dd__panel > div {
  background: var(--pd-surface); border: 1px solid var(--pd-border);
  border-radius: var(--pd-radius-2xl); box-shadow: var(--pd-shadow-lg); padding: var(--pd-2);
}
.pd-dd:hover .pd-dd__panel,
.pd-dd__toggle[aria-expanded="true"] + .pd-dd__panel { display: block; }
.pd-dd__panel a {
  display: block; padding: 0.5rem 1rem; font-size: var(--pd-text-sm);
  color: var(--pd-ink-2); text-decoration: none; border-radius: var(--pd-radius-xl);
}
.pd-dd__panel a:hover { color: var(--pd-accent); background: rgb(90 7 16 / 0.05); }

/* Mobile panel — full-height sheet under the header.
   Opaque (no bleed-through), owns its own scroll, groups collapsed so the
   whole IA is visible without scrolling. 25 flat links do not fit a phone. */
.pd-mobile-nav {
  position: fixed;
  top: var(--pd-header-h); left: 0; right: 0;
  height: calc(100vh - var(--pd-header-h));
  height: calc(100dvh - var(--pd-header-h));
  display: none; flex-direction: column;
  background: var(--pd-surface);
  border-top: 1px solid var(--pd-border);
  z-index: 45;
}
.pd-mobile-nav[data-open="true"] { display: flex; }
@media (min-width: 768px) { .pd-mobile-nav[data-open="true"] { display: none; } }

.pd-mobile-nav__scroll {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: var(--pd-2) var(--pd-4) var(--pd-4);
}
.pd-mobile-nav__group { border-bottom: 1px solid var(--pd-border); }
.pd-mobile-nav__group > summary {
  display: flex; align-items: center; gap: var(--pd-2);
  min-height: 56px; padding: var(--pd-3) 0;
  font-size: var(--pd-text-base); font-weight: 600; color: var(--pd-ink);
  cursor: pointer; list-style: none;
}
.pd-mobile-nav__group > summary::-webkit-details-marker { display: none; }
.pd-mobile-nav__group > summary > svg {
  width: 1.125rem; height: 1.125rem; margin-left: auto; color: var(--pd-ink-3);
  transition: transform 0.2s var(--pd-ease);
}
.pd-mobile-nav__group[open] > summary > svg { transform: rotate(180deg); }
.pd-mobile-nav__count {
  font-size: var(--pd-text-xs); font-weight: 600; color: var(--pd-ink-3);
  background: var(--pd-card); border: 1px solid var(--pd-border);
  border-radius: var(--pd-radius-pill); padding: 0.0625rem 0.5rem;
}
.pd-mobile-nav__links { padding-bottom: var(--pd-3); }
.pd-mobile-nav__links a,
.pd-mobile-nav__direct a {
  display: flex; align-items: center; min-height: 48px;
  padding: var(--pd-2) var(--pd-3);
  font-size: var(--pd-text-sm); color: var(--pd-ink-2); text-decoration: none;
  border-radius: var(--pd-radius-lg);
}
.pd-mobile-nav__links a:active,
.pd-mobile-nav__direct a:active { background: rgb(90 7 16 / 0.06); color: var(--pd-accent); }
.pd-mobile-nav__direct { padding-top: var(--pd-2); }
.pd-mobile-nav__direct a { font-weight: 600; color: var(--pd-ink); padding-inline: 0; }
.pd-mobile-nav__foot {
  flex: none; padding: var(--pd-4);
  border-top: 1px solid var(--pd-border); background: var(--pd-card);
  padding-bottom: max(var(--pd-4), env(safe-area-inset-bottom));
}
.pd-mobile-nav__foot .pd-btn { width: 100%; }
.pd-mobile-nav__tel {
  display: flex; align-items: center; justify-content: center; min-height: 44px;
  margin-top: var(--pd-2); font-size: var(--pd-text-sm); font-weight: 600;
  color: var(--pd-accent); text-decoration: none;
}
body[data-pd-lock="true"] { overflow: hidden; }

/* --------------------------------------------------------------------------
   6. HERO
   -------------------------------------------------------------------------- */
.pd-hero { position: relative; display: flex; align-items: center; overflow: hidden; min-height: 85vh; }
.pd-hero--short { min-height: 50vh; }
.pd-hero--mid   { min-height: 70vh; }
.pd-hero__media { position: absolute; inset: 0; }
.pd-hero__media > img, .pd-hero__media > video { width: 100%; height: 100%; object-fit: cover; }
.pd-hero__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* YouTube background: cover the box on BOTH axes (16:9), never letterbox.
   Hidden below 768px — see build.py hero_media(). */
.pd-hero__media iframe {
  display: none;
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: max(100%, 177.78vh); height: max(100%, 56.25vw);
  border: 0; pointer-events: none;
}
@media (min-width: 768px) {
  .pd-hero__media--video iframe { display: block; }
  .pd-hero__media--video .pd-hero__poster { display: none; }
}
/* A moving background needs a heavier scrim than a still one. */
.pd-hero__media--video .pd-hero__scrim {
  background: linear-gradient(to top, rgb(0 0 0 / 0.94), rgb(0 0 0 / 0.8) 45%, rgb(0 0 0 / 0.6) 75%, rgb(0 0 0 / 0.7));
}
.pd-hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgb(0 0 0 / 0.9), rgb(0 0 0 / 0.72) 45%, rgb(0 0 0 / 0.5) 75%, rgb(0 0 0 / 0.55));
}
.pd-hero__inner {
  position: relative; z-index: 10; width: 100%;
  /* the header is fixed and 73px tall — the hero's first line has to start below it */
  padding-top: calc(var(--pd-header-h) + var(--pd-3));
  padding-bottom: var(--pd-16);
}
@media (min-width: 768px) { .pd-hero__inner { padding-top: calc(var(--pd-header-h) + var(--pd-12)); } }
.pd-hero__copy { max-width: 48rem; }
.pd-hero h1 { color: #fff; margin-top: var(--pd-4); }
.pd-hero__sub { font-size: var(--pd-text-lg); line-height: 1.625; color: rgb(255 255 255 / 0.8); margin-top: var(--pd-4); max-width: 36rem; }
.pd-hero__quote { font-family: var(--pd-font-serif); font-style: italic; color: var(--pd-gold); font-size: var(--pd-text-xl); margin-top: var(--pd-2); }
.pd-hero__actions { display: flex; flex-direction: column; gap: var(--pd-4); margin-top: var(--pd-8); }
@media (min-width: 640px) {
  .pd-hero__actions { flex-direction: row; flex-wrap: wrap; }
  .pd-hero__quote { font-size: var(--pd-text-2xl); }
}
.pd-hero__note { font-size: var(--pd-text-xs); color: rgb(255 255 255 / 0.6); margin-top: var(--pd-3); }
.pd-hero__price { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pd-4); margin-top: var(--pd-6); }
.pd-hero__price strong { font-size: var(--pd-text-2xl); color: #fff; font-weight: 500; font-family: var(--pd-font-numeric); font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
.pd-hero__price span { font-size: var(--pd-text-sm); font-weight: 400; color: rgb(255 255 255 / 0.65); }

/* Mobile hero rhythm: the primary CTA has to clear the sticky bar without
   scrolling. Measured on the tallest hero (package page) at 390x844. */
@media (max-width: 767px) {
  .pd-hero__sub     { font-size: var(--pd-text-base); line-height: 1.6; margin-top: var(--pd-3); }
  /* package hero carries badge + h1 + strapline + summary + price + CTA; on a
     short phone that stack pushes the CTA under the sticky bar. Compress it. */
  .pd-hero--mid .pd-h1 { font-size: 1.75rem; line-height: 1.2; }
  .pd-hero__quote      { display: none; }
  .pd-hero--mid .pd-hero__sub {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .pd-hero__actions { margin-top: var(--pd-6); }
  .pd-hero__price   { margin-top: var(--pd-4); }
  .pd-badge         { margin-bottom: var(--pd-3); }
  .pd-trust         { margin-top: var(--pd-6); gap: var(--pd-3) var(--pd-6); }
}

.pd-trust { display: flex; flex-wrap: wrap; gap: var(--pd-6); margin-top: var(--pd-10); }
.pd-trust li { display: flex; align-items: center; gap: 0.5rem; font-size: var(--pd-text-sm); color: rgb(255 255 255 / 0.85); }
.pd-trust svg { width: 1rem; height: 1rem; flex: none; color: var(--pd-gold); }

/* RUN-020: the four trust stats must sit on ONE line on desktop. The bar was
   capped by the hero copy column (48rem) and wrapped 3+1 at every width; on
   large screens it now spans the full container as a clean 4-across row.
   Below 1024 the wrap stays — stacking is correct on phone/tablet. */
@media (min-width: 1024px) {
	.pd-trust { flex-wrap: nowrap; justify-content: space-between; gap: var(--pd-3) var(--pd-4); }
	.pd-trust li { white-space: nowrap; }
}

.pd-badge {
  display: inline-block; padding: 0.25rem 0.75rem; margin-bottom: var(--pd-4);
  font-size: var(--pd-text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;
  color: #fff; background: var(--pd-accent); border-radius: var(--pd-radius-pill);
}

/* --------------------------------------------------------------------------
   7. BREADCRUMB
   -------------------------------------------------------------------------- */
.pd-crumbs { padding-top: var(--pd-header-h); background: var(--pd-surface); }
.pd-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding-block: var(--pd-4); }
@media (max-width: 767px) {
  /* one line, current page truncates — a 2-line breadcrumb costs ~35px of
     above-the-fold space on a short phone and earns nothing */
  .pd-crumbs ol { flex-wrap: nowrap; padding-block: var(--pd-3); }
  .pd-crumbs li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pd-crumbs li:last-child { min-width: 0; }
}
.pd-crumbs li, .pd-crumbs a { font-size: var(--pd-text-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; color: var(--pd-ink-3); text-decoration: none; }
@media (min-width: 768px) { .pd-crumbs li, .pd-crumbs a { font-weight: 600; letter-spacing: 0.1em; } }
.pd-crumbs a:hover { color: var(--pd-accent); }
.pd-crumbs [aria-current="page"] { color: var(--pd-accent); }

/* --------------------------------------------------------------------------
   8. CARDS
   -------------------------------------------------------------------------- */
.pd-card {
  background: var(--pd-card); border: 1px solid var(--pd-border);
  border-radius: var(--pd-radius-2xl); overflow: hidden;
  transition: border-color 0.2s var(--pd-ease);
}
a.pd-card, .pd-card--link { display: block; text-decoration: none; color: inherit; }
a.pd-card:hover, .pd-card--link:hover { border-color: rgb(90 7 16 / 0.35); }
.pd-card__body { padding: var(--pd-5); }
.pd-card__body--lg { padding: var(--pd-6); }
.pd-card__title { font-size: var(--pd-text-xl); line-height: var(--pd-lh-xl); color: var(--pd-ink); }
a.pd-card:hover .pd-card__title { color: var(--pd-accent); }
.pd-card__text { font-size: var(--pd-text-sm); line-height: 1.625; color: var(--pd-ink-2); margin-top: var(--pd-2); }
.pd-card__icon {
  display: flex; align-items: center; justify-content: center;
  background: rgb(90 7 16 / 0.05);
}
.pd-card__icon svg { width: 4rem; height: 4rem; color: var(--pd-ink-decor); transition: color 0.2s var(--pd-ease); }
a.pd-card:hover .pd-card__icon svg { color: var(--pd-accent); }
.pd-card__icon--sm svg { width: 3rem; height: 3rem; }
.pd-card img { transition: transform 0.5s var(--pd-ease); }
a.pd-card:hover img, .pd-card--zoom:hover img { transform: scale(1.05); }

/* Tag pills removed from package cards (launch tracker 2 Sep) — the pill
   rules were deleted with them. */
.pd-card__foot {
  display: flex; flex-direction: column; gap: var(--pd-3);
  margin-top: var(--pd-5); padding-top: var(--pd-4); border-top: 1px solid var(--pd-border);
}
@media (min-width: 640px) {
  /* A real gap, not 0. `justify-content: space-between` keeps the two apart only
     while the price is short; "Price on request" is wide enough to run straight
     into the Details button with nothing between them. The gap guarantees the
     separation and the actions give way before the price does. */
  .pd-card__foot { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--pd-4); }
}
.pd-price__label { font-size: var(--pd-text-xs); color: var(--pd-ink-3); display: block; }
.pd-price__value { font-size: var(--pd-text-base); font-weight: 500; color: var(--pd-accent); font-family: var(--pd-font-numeric); font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
.pd-price__value--gold { color: var(--pd-gold-ink); }
.pd-card__actions { display: flex; gap: var(--pd-2); justify-content: flex-end; }

.pd-stars { display: flex; gap: 2px; }
.pd-stars svg { width: 1rem; height: 1rem; fill: var(--pd-accent); }
.pd-hero .pd-stars svg { fill: var(--pd-gold); }
.pd-stars--muted svg + svg { fill: rgb(90 7 16 / 0.2); }

/* Glass feature cards on photographic band */
.pd-band { position: relative; overflow: hidden; margin-top: var(--pd-16); }
.pd-band__media { position: absolute; inset: 0; }
.pd-band__media img { width: 100%; height: 100%; object-fit: cover; }
.pd-band__scrim { position: absolute; inset: 0; background: rgb(0 0 0 / 0.74); }
.pd-band__inner { position: relative; z-index: 10; padding-block: var(--pd-20); }
.pd-band h2 { color: #fff; }
.pd-band__lede { color: rgb(255 255 255 / 0.8); margin-top: var(--pd-3); max-width: 42rem; margin-inline: auto; }
.pd-glass {
  padding: var(--pd-6); border-radius: var(--pd-radius-2xl);
  background: rgb(255 255 255 / 0.12); border: 1px solid rgb(255 255 255 / 0.25);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.pd-glass svg { width: 2rem; height: 2rem; color: rgb(255 255 255 / 0.9); }
.pd-glass h3 { color: #fff; margin-top: var(--pd-3); font-size: var(--pd-text-lg); }
.pd-glass p { font-size: var(--pd-text-sm); line-height: 1.625; color: rgb(255 255 255 / 0.8); margin-top: var(--pd-2); }

/* Credentials row */
.pd-cred { text-align: center; }
.pd-cred svg { width: 2.5rem; height: 2.5rem; margin: 0 auto var(--pd-5); color: var(--pd-accent); }
/* RUN-029: every serif title instance is bold and at the card-title size. */
.pd-cred h3 { font-weight: 700; }
.pd-cred .pd-cred__title { font-family: var(--pd-font-eyebrow); font-size: var(--pd-text-xl); font-weight: 700; text-transform: uppercase; letter-spacing: 0.22em; margin-bottom: var(--pd-3); }
.pd-cred p { font-size: var(--pd-text-base); line-height: 1.625; color: var(--pd-ink-2); }

/* Steps */
.pd-step { text-align: center; }
.pd-step__icon {
  width: 4rem; height: 4rem; margin: 0 auto; display: flex; align-items: center; justify-content: center;
  background: var(--pd-card); border: 1px solid var(--pd-border); border-radius: var(--pd-radius-2xl);
}
.pd-step__icon svg { width: 2rem; height: 2rem; color: var(--pd-ink); }
.pd-step h3 { margin-top: var(--pd-6); font-size: var(--pd-text-lg); }
.pd-step p { font-size: var(--pd-text-sm); line-height: 1.625; color: var(--pd-ink-2); margin-top: var(--pd-3); }

/* Inclusion rows (icon + text, left aligned) */
.pd-incl { display: flex; gap: var(--pd-4); }
.pd-incl__icon {
  width: 3rem; height: 3rem; flex: none; display: flex; align-items: center; justify-content: center;
  border-radius: var(--pd-radius-xl); background: rgb(90 7 16 / 0.05); border: 1px solid rgb(90 7 16 / 0.2);
}
.pd-incl__icon svg { width: 1.5rem; height: 1.5rem; color: var(--pd-accent); }
/* RUN-028: the inclusion titles match the package-card titles (both 20px/
   --pd-text-xl) so the serif H3s read at one size across the page. */
.pd-incl h3 { font-size: var(--pd-text-xl); line-height: var(--pd-lh-xl); }
.pd-incl p { font-size: var(--pd-text-sm); line-height: 1.625; color: var(--pd-ink-2); margin-top: var(--pd-1); }

.pd-checklist li { display: flex; align-items: flex-start; gap: var(--pd-3); font-size: var(--pd-text-sm); color: var(--pd-ink-2); line-height: 1.625; }
.pd-checklist li + li { margin-top: var(--pd-3); }
.pd-checklist svg { width: 1rem; height: 1rem; flex: none; margin-top: 0.3rem; color: var(--pd-accent); }

.pd-deflist li + li { margin-top: var(--pd-4); }
.pd-deflist dt, .pd-deflist b { font-size: var(--pd-text-sm); font-weight: 600; color: var(--pd-ink); }
.pd-deflist dd, .pd-deflist p { font-size: var(--pd-text-sm); color: var(--pd-ink-2); margin: 0.125rem 0 0; }

/* --------------------------------------------------------------------------
   9. FINDER (budget picker) + CALCULATOR
   -------------------------------------------------------------------------- */
.pd-finder__controls { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--pd-4); margin-bottom: var(--pd-10); }
.pd-select {
  appearance: none; -webkit-appearance: none;
  padding: 0.8125rem 3rem 0.8125rem 1.25rem;
  min-height: 44px;
  background: var(--pd-card); color: var(--pd-ink);
  border: 1px solid var(--pd-ink-2); border-radius: var(--pd-radius-pill);
  font-size: var(--pd-text-sm); font-weight: 500; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a5f5e' stroke-width='2' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; background-size: 1rem;
}
.pd-finder__stage { max-width: 32rem; margin-inline: auto; display: flex; align-items: center; gap: var(--pd-3); }
.pd-finder__stage > div { flex: 1; min-width: 0; }
.pd-iconbtn {
  flex: none; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--pd-card); border: 1px solid var(--pd-border); border-radius: 50%;
  color: var(--pd-ink-2); cursor: pointer; transition: color 0.2s, border-color 0.2s;
}
.pd-iconbtn:hover { color: var(--pd-accent); border-color: rgb(90 7 16 / 0.35); }
.pd-iconbtn svg { width: 1.25rem; height: 1.25rem; }
.pd-fade { transition: opacity 0.3s var(--pd-ease); }
.pd-fade[data-fading="true"] { opacity: 0; }

.pd-calc { display: grid; gap: var(--pd-8); grid-template-columns: 1fr; }
@media (min-width: 1024px) { .pd-calc { grid-template-columns: 1.15fr 0.85fr; align-items: start; } }
.pd-calc__panel { background: var(--pd-card); border: 1px solid var(--pd-border); border-radius: var(--pd-radius-2xl); padding: var(--pd-6); }
.pd-calc__group + .pd-calc__group { margin-top: var(--pd-6); padding-top: var(--pd-6); border-top: 1px solid var(--pd-border); }
.pd-calc__legend { font-family: var(--pd-font-eyebrow); font-size: var(--pd-text-base); font-weight: 400; text-transform: uppercase; letter-spacing: 0.22em; margin-bottom: var(--pd-1); }
.pd-calc__hint { font-size: var(--pd-text-xs); color: var(--pd-ink-3); margin-bottom: var(--pd-3); }
.pd-choices { display: grid; gap: var(--pd-2); grid-template-columns: 1fr; }
@media (min-width: 640px) { .pd-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pd-choice {
  display: flex; align-items: flex-start; gap: 0.625rem;
  padding: 0.75rem 0.875rem; min-height: 44px;
  background: var(--pd-surface); border: 1px solid var(--pd-border);
  border-radius: var(--pd-radius-xl); cursor: pointer;
  font-size: var(--pd-text-sm); color: var(--pd-ink);
  transition: border-color 0.2s, background-color 0.2s;
}
.pd-choice:hover { border-color: rgb(90 7 16 / 0.35); }
.pd-choice input { margin: 0.2rem 0 0; accent-color: var(--pd-accent); width: 1rem; height: 1rem; flex: none; }
.pd-choice__price { display: block; font-size: var(--pd-text-xs); color: var(--pd-ink-3); margin-top: 0.125rem; }
.pd-choice:has(input:checked) { border-color: var(--pd-accent); background: rgb(90 7 16 / 0.04); }
.pd-choice:has(input:focus-visible) { outline: 2px solid var(--pd-accent); outline-offset: 2px; }

.pd-summary { position: sticky; top: calc(var(--pd-header-h) + 1rem); }
.pd-summary__row { display: flex; justify-content: space-between; gap: var(--pd-4); font-size: var(--pd-text-sm); color: var(--pd-ink-2); }
.pd-summary__row + .pd-summary__row { margin-top: var(--pd-2); }
.pd-summary__total { display: flex; justify-content: space-between; align-items: baseline; margin-top: var(--pd-4); padding-top: var(--pd-4); border-top: 1px solid var(--pd-border); }
.pd-summary__total b { font-size: var(--pd-text-2xl); color: var(--pd-accent); }

/* Mobile: a running total pinned above the sticky bar. On a phone the summary
   panel sits below a long option list, so without this the visitor cannot see
   the number while choosing — which is the entire point of the tool. */
.pd-calc-sticky { display: none; }
@media (max-width: 767px) {
  .pd-calc-sticky {
    position: fixed; left: 0; right: 0; bottom: 57px; z-index: 39;
    display: flex; align-items: center; justify-content: space-between; gap: var(--pd-3);
    padding: var(--pd-3) var(--pd-4);
    background: var(--pd-card); border-top: 1px solid var(--pd-border);
    box-shadow: 0 -8px 20px rgb(28 20 16 / 0.12);
  }
  .pd-calc-sticky span { display: block; font-size: var(--pd-text-xs); color: var(--pd-ink-3); }
  .pd-calc-sticky b { font-size: var(--pd-text-lg); color: var(--pd-accent); }
  .pd-calc-sticky .pd-btn { flex: none; }
  body:has(.pd-calc-sticky) { padding-bottom: 130px; }
  .pd-summary { position: static; }
}

/* --------------------------------------------------------------------------
   10. FAQ (details/summary — keyboard accessible, no JS required)
   -------------------------------------------------------------------------- */
.pd-faq { max-width: 48rem; margin-inline: auto; }
.pd-faq__item { background: var(--pd-card); border: 1px solid var(--pd-border); border-radius: var(--pd-radius-xl); overflow: hidden; }
.pd-faq__item + .pd-faq__item { margin-top: var(--pd-3); }
.pd-faq__item > summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--pd-4);
  padding: var(--pd-4) var(--pd-6); cursor: pointer; list-style: none;
  font-size: var(--pd-text-sm); font-weight: 500; color: var(--pd-ink);
}
.pd-faq__item > summary::-webkit-details-marker { display: none; }
.pd-faq__item > summary::after {
  content: ""; flex: none; width: 1rem; height: 1rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23736659' stroke-width='2' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.2s var(--pd-ease);
}
.pd-faq__item[open] > summary::after { transform: rotate(180deg); }
.pd-faq__answer { padding: 0 var(--pd-6) var(--pd-4); font-size: var(--pd-text-sm); line-height: 1.625; color: var(--pd-ink-2); }

/* --------------------------------------------------------------------------
   11. CTA BAND / TESTIMONIALS / GALLERY
   -------------------------------------------------------------------------- */
.pd-cta { position: relative; border-radius: var(--pd-radius-2xl); overflow: hidden; }
.pd-cta__media { position: absolute; inset: 0; }
.pd-cta__media img { width: 100%; height: 100%; object-fit: cover; }
.pd-cta__scrim { position: absolute; inset: 0; background: linear-gradient(to bottom, rgb(0 0 0 / 0.72), rgb(0 0 0 / 0.55), rgb(0 0 0 / 0.72)); }
.pd-cta__inner { position: relative; z-index: 10; padding: var(--pd-20) var(--pd-8); text-align: center; }
.pd-cta h2 { color: #fff; margin-top: var(--pd-3); }
.pd-cta p { color: rgb(255 255 255 / 0.82); margin: var(--pd-4) auto 0; max-width: 36rem; line-height: 1.625; }
.pd-cta .pd-btn { margin-top: var(--pd-8); }

.pd-quote { background: var(--pd-card); border: 1px solid var(--pd-border); border-radius: var(--pd-radius-xl); padding: var(--pd-6); }
.pd-quote p { font-size: var(--pd-text-sm); line-height: 1.625; color: var(--pd-ink-2); margin-top: var(--pd-3); }
.pd-quote__date { display: block; margin-top: 2px; font-size: var(--pd-text-xs); color: var(--pd-ink-3); }
/* RUN-024: Read more - the clamp applies only once JS is live (pd-quotes-ready),
   so the full text stays reachable without it; open expands downward smoothly. */
.pd-carousel.pd-quotes-ready .pd-quote__body {
  max-height: 7.5rem;
  overflow: hidden;
  transition: max-height 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.pd-carousel.pd-quotes-ready .pd-quote__body > p { margin-top: 0; }
.pd-quote__more {
  display: inline-flex; align-items: center; margin-top: var(--pd-3); padding: 0;
  background: none; border: none; cursor: pointer;
  font: inherit; font-size: var(--pd-text-xs); font-weight: 600;
  color: var(--pd-accent, #5a0710);
}
.pd-quote__more:hover { text-decoration: underline; }
.pd-quote__more .pd-quote__more-close { display: none; }
.pd-quote--open .pd-quote__more-close { display: inline; }
.pd-quote--open .pd-quote__more-open { display: none; }
.pd-quote cite { display: block; font-size: var(--pd-text-xs); font-weight: 600; font-style: normal; color: var(--pd-ink); margin-top: var(--pd-3); }

.pd-gallery { display: grid; gap: var(--pd-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .pd-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pd-gallery figure { margin: 0; border-radius: var(--pd-radius-xl); overflow: hidden; aspect-ratio: 4 / 3; }
.pd-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--pd-ease); }
.pd-gallery figure:hover img { transform: scale(1.05); }
.pd-video { aspect-ratio: 16 / 9; border-radius: var(--pd-radius-2xl); overflow: hidden; background: var(--pd-card); }
.pd-video iframe { width: 100%; height: 100%; border: 0; display: block; }

.pd-portrait { width: 12rem; height: 12rem; border-radius: 50%; overflow: hidden; flex: none; justify-self: center; }
.pd-portrait img { width: 100%; height: 100%; object-fit: cover; }
.pd-tone { background: var(--pd-tone); border-top: 1px solid var(--pd-border); }

.pd-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--pd-4);
  padding: var(--pd-4); background: var(--pd-card); border: 1px solid var(--pd-border); border-radius: var(--pd-radius-xl);
}
.pd-row + .pd-row { margin-top: var(--pd-3); }
.pd-row__price { font-size: var(--pd-text-sm); font-weight: 500; color: var(--pd-accent); white-space: nowrap; font-family: var(--pd-font-numeric); font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }

.pd-pricebox { text-align: center; padding: var(--pd-8); background: var(--pd-card); border: 1px solid var(--pd-border); border-radius: var(--pd-radius-2xl); }
.pd-pricebox strong { display: block; font-size: var(--pd-text-4xl); font-weight: 500; color: var(--pd-accent); font-family: var(--pd-font-numeric); font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }

/* --------------------------------------------------------------------------
   12. FORMS
   -------------------------------------------------------------------------- */
.pd-form { display: grid; gap: var(--pd-4); }
@media (min-width: 640px) { .pd-form__two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pd-4); } }
.pd-field label { display: block; font-size: var(--pd-text-sm); font-weight: 600; margin-bottom: 0.375rem; }
.pd-field input, .pd-field textarea, .pd-field select {
  width: 100%; min-height: 44px; padding: 0.6875rem 0.875rem;
  font: inherit; font-size: var(--pd-text-sm); color: var(--pd-ink);
  background: var(--pd-surface); border: 1px solid var(--pd-ink-2); border-radius: var(--pd-radius-xl);
}
.pd-field textarea { min-height: 8rem; resize: vertical; }
.pd-field__hint { font-size: var(--pd-text-xs); color: var(--pd-ink-3); margin-top: 0.25rem; }
.pd-field--error input, .pd-field--error textarea { border-color: #8a1020; }
.pd-field__error { font-size: var(--pd-text-xs); color: #8a1020; margin-top: 0.25rem; }

/* --------------------------------------------------------------------------
   13. FOOTER + FLOATING / STICKY NAV
   -------------------------------------------------------------------------- */
.pd-footer { border-top: 1px solid var(--pd-border); background: var(--pd-tone-2); }
.pd-footer__inner { padding-block: var(--pd-16); }
.pd-footer h4 { font-family: var(--pd-font-sans); font-size: var(--pd-text-sm); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; }
.pd-footer ul { margin-top: var(--pd-4); display: grid; gap: var(--pd-2); }
.pd-footer a { font-size: var(--pd-text-sm); color: var(--pd-ink-2); text-decoration: none; }
.pd-footer a:hover { color: var(--pd-accent); }
.pd-footer__blurb { font-size: var(--pd-text-sm); line-height: 1.625; color: var(--pd-ink-2); margin-top: var(--pd-3); }
.pd-footer__nap { margin-top: var(--pd-4); display: grid; gap: 0.375rem; }
.pd-footer__nap, .pd-footer__nap a { font-size: var(--pd-text-xs); color: var(--pd-ink-3); }
.pd-social { display: flex; align-items: center; gap: var(--pd-3); margin-top: var(--pd-4); }
.pd-social { flex-wrap: nowrap; }
.pd-social a { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; height: 44px; margin-left: -10px; color: var(--pd-ink-3); }
.pd-social a:first-child { margin-left: 0; }
.pd-social svg { width: 1.25rem; height: 1.25rem; }
.pd-social a:hover { color: var(--pd-accent); }
.pd-reviewchip {
  display: inline-flex; align-items: center; gap: var(--pd-2); margin: var(--pd-10) auto var(--pd-6);
  padding: 0.625rem 1rem; background: var(--pd-card); border: 1px solid var(--pd-border);
  border-radius: var(--pd-radius-xl); text-decoration: none;
}
.pd-reviewchip:hover { border-color: rgb(90 7 16 / 0.35); }
.pd-reviewchip span { font-size: var(--pd-text-sm); color: var(--pd-ink-2); text-decoration: underline; text-underline-offset: 2px; }
.pd-reviewchip svg { width: 1.25rem; height: 1.25rem; flex: none; }
.pd-reviewchip .pd-stars svg { width: 0.875rem; height: 0.875rem; fill: #B8860B; }
.pd-footer__legal { margin-top: var(--pd-12); padding-top: var(--pd-8); border-top: 1px solid var(--pd-border); text-align: center; }
.pd-footer__legal p { font-size: var(--pd-text-sm); color: var(--pd-ink-3); }
.pd-footer__legal div { display: flex; justify-content: center; gap: var(--pd-4); margin-top: var(--pd-2); }
.pd-footer__legal a { font-size: var(--pd-text-xs); color: var(--pd-ink-3); text-decoration: underline; text-underline-offset: 2px; }
.pd-center { display: flex; justify-content: center; }

/* Floating WhatsApp — desktop only (mobile has the sticky bar) */
.pd-wa-float {
  position: fixed; right: var(--pd-6); bottom: var(--pd-6); z-index: 50;
  width: 56px; height: 56px; border-radius: 50%;
  display: none; align-items: center; justify-content: center;
  background: var(--pd-accent); border: 1px solid rgb(255 255 255 / 0.35);
  box-shadow: var(--pd-shadow-lg); color: #fff;
}
.pd-wa-float:hover { background: #430509; }
.pd-wa-float svg { width: 1.75rem; height: 1.75rem; fill: currentColor; }
@media (min-width: 768px) { .pd-wa-float { display: flex; } }

/* Chat widget (LeadConnector) — deconflicting the bottom-right corner.
   Measured before this rule existed: the chat launcher landed at 20px/20px
   bottom-right, overlapping the WhatsApp float by 2916px² on desktop and the
   mobile nav bar by 2146px² on phones, burying one control under the other.

   The launcher is `position: fixed` inside the widget's own shadow DOM, so it
   cannot be selected from here. A transform on the host turns `chat-widget`
   into the containing block for its fixed descendants, which lets the whole
   widget be moved with two properties and no shadow-DOM injection — so a
   widget update cannot break the fix. The host is 0x0 and pointer-transparent;
   only the launcher inside it is interactive. */
/* The host is deliberately left exactly as the widget ships it.
   An earlier attempt positioned it fixed at 0x0 with a transform, to make it the
   containing block for its fixed shadow children and move the whole widget from
   the stylesheet. It works on desktop, where the panel has a pixel width, and
   breaks on phones, where the panel sizes itself in percentages: against a 0x0
   containing block the panel computed to zero and the chat opened invisible
   (data-active="true", nothing rendered). Only the launcher is repositioned now,
   from site.js, and the panel keeps the widget's own geometry. */

/* Phones: the launcher is lifted clear of the sticky nav bar by a stylesheet
   injected into the widget's shadow root (see site.js), NOT by moving the host.
   Moving the host was tried first and moves the open chat panel too: at 60px the
   621px panel was pushed to y=-37 on a 664px screen and lost its top edge. Only
   the launcher may move; the panel must keep the full height of the viewport. */

/* Desktop: the launcher keeps the corner and the WhatsApp float moves above it,
   which is the arrangement visitors expect when a site offers both. The class is
   set in footer.php rather than via body_class(), because this theme emits no
   <body> tag at all and body_class() therefore never runs. */
@media (min-width: 768px) {
  .pd-wa-float--with-chat { bottom: calc(var(--pd-6) + 74px); }
}

/* Mobile sticky bottom bar */
body { padding-bottom: 60px; }
@media (min-width: 768px) { body { padding-bottom: 0; } }
.pd-mobilebar { position: fixed; inset: auto 0 0 0; z-index: 40; }
@media (min-width: 768px) { .pd-mobilebar { display: none; } }
.pd-mobilebar__bar { display: flex; background: #171412; border-top: 1px solid rgb(255 255 255 / 0.12); padding-bottom: env(safe-area-inset-bottom); }
.pd-mobilebar__bar button, .pd-mobilebar__bar a {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 56px; padding: 0.875rem 0.5rem; background: none; border: 0;
  font-size: var(--pd-text-sm); font-weight: 500; color: rgb(255 255 255 / 0.75);
  text-decoration: none; cursor: pointer;
}
.pd-mobilebar__bar a.pd-mobilebar__wa { flex: 0 0 68px; color: #fff; }
.pd-mobilebar__bar svg { width: 1.125rem; height: 1.125rem; }
.pd-mobilebar__bar [aria-expanded="true"] { color: #e6b8bd; background: rgb(255 255 255 / 0.1); }
.pd-mobilebar__divider { width: 1px; background: rgb(255 255 255 / 0.12); }
.pd-mobilebar__sheet {
  position: relative; display: none;
  max-height: 60vh; max-height: 60dvh; overflow-y: auto; overscroll-behavior: contain;
  background: #171412; border-top: 1px solid rgb(255 255 255 / 0.12);
  border-radius: var(--pd-radius-2xl) var(--pd-radius-2xl) 0 0; padding: var(--pd-4);
  box-shadow: 0 -12px 30px rgb(0 0 0 / 0.35);
}
.pd-mobilebar__sheet[data-open="true"] { display: block; }
[hidden] { display: none !important; }          /* group toggling must beat any layout rule */
.pd-mobilebar__sheet p {
  font-size: var(--pd-text-xs); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.08em; color: rgb(255 255 255 / 0.65); margin-bottom: var(--pd-3);
}
.pd-mobilebar__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pd-1); }
.pd-mobilebar__sheet a {
  display: flex; align-items: center; min-height: 48px;
  padding: 0.5rem 0.75rem; border-radius: var(--pd-radius-lg);
  font-size: var(--pd-text-sm); line-height: 1.3; color: rgb(255 255 255 / 0.85); text-decoration: none;
}
.pd-mobilebar__sheet a:active { background: rgb(255 255 255 / 0.12); color: #fff; }
.pd-scrim { position: fixed; inset: 0; background: rgb(0 0 0 / 0.45); border: 0; padding: 0; }

/* Heading size modifiers — these replaced inline font-size styles so that the
   mobile type step-down below applies to them too. */
.pd-h2--sm { font-size: var(--pd-text-2xl); line-height: var(--pd-lh-2xl); }
.pd-h3--lg { font-size: var(--pd-text-xl);  line-height: var(--pd-lh-xl); }
.pd-h3--md { font-size: var(--pd-text-lg);  line-height: var(--pd-lh-lg); }
.pd-h3--sm { font-size: var(--pd-text-base); line-height: var(--pd-lh-base); }
.pd-h3--xs { font-size: var(--pd-text-sm);  line-height: var(--pd-lh-sm); }
.pd-stat   { font-size: var(--pd-text-4xl); color: var(--pd-accent); }
.pd-hero__ratingnote { font-size: var(--pd-text-sm); color: rgb(255 255 255 / 0.75); }

/* --------------------------------------------------------------------------
   14. UTILITIES
   -------------------------------------------------------------------------- */
.pd-mt-2  { margin-top: var(--pd-2); }
.pd-mt-3  { margin-top: var(--pd-3); }
.pd-mt-4  { margin-top: var(--pd-4); }
.pd-mt-6  { margin-top: var(--pd-6); }
.pd-mt-8  { margin-top: var(--pd-8); }
.pd-mt-10 { margin-top: var(--pd-10); }
.pd-mt-20 { margin-top: var(--pd-20); }
.pd-mt-12 { margin-top: var(--pd-12); }
.pd-mt-16 { margin-top: var(--pd-16); }
.pd-mb-20 { margin-bottom: var(--pd-20); }
.pd-textcenter { text-align: center; }
.pd-narrow { max-width: 48rem; margin-inline: auto; }
.pd-narrower { max-width: 40rem; margin-inline: auto; }
.pd-prose p + p { margin-top: var(--pd-4); }
.pd-prose { font-size: var(--pd-text-sm); line-height: 1.7; color: var(--pd-ink-2); }
.pd-prose--lg { font-size: var(--pd-text-base); }
.pd-prose h2, .pd-prose h3 { color: var(--pd-ink); margin-top: var(--pd-8); }
.pd-prose h2 + p, .pd-prose h3 + p { margin-top: var(--pd-3); }
.pd-rounded { border-radius: var(--pd-radius-2xl); overflow: hidden; }
.pd-stack-6 > * + * { margin-top: var(--pd-6); }
.pd-stack-3 > * + * { margin-top: var(--pd-3); }
.pd-lift { margin-top: -2.5rem; position: relative; z-index: 20; }

/* --------------------------------------------------------------------------
   15. MOBILE OVERRIDES THAT MUST WIN
   Declared last on purpose — these override rules defined earlier in the file.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  /* Exception to the -2px mobile type scale: iOS Safari zooms the whole page
     when a focused form control is under 16px, which breaks the layout
     mid-enquiry. Form controls therefore stay at 16px. */
  .pd-field input,
  .pd-field textarea,
  .pd-field select,
  .pd-select { font-size: 16px; }
}

/* ---------------------------------------------------------------- Pagination
   the_posts_pagination() emits nav.navigation.pagination with .page-numbers /
   .nav-links, which the static build never had because it was a flat export
   with no paging. Without these the numbers render as cramped inline text on
   the blog and search results. (RUN-030: repointed from .pd-pagination — that
   class was never on the markup, so the whole block had been dead.) */
.navigation.pagination { margin: 3rem 0 0; }
.navigation.pagination .nav-links {
  display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; align-items: center;
}
.navigation.pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 0 .85rem;
  border: 1px solid var(--pd-border, #e5ddd0); border-radius: 9999px;
  font-size: .95rem; line-height: 1; text-decoration: none;
  color: var(--pd-ink, #1C1410); background: #fff;
  transition: background .15s ease, border-color .15s ease;
}
.navigation.pagination .page-numbers:hover { background: var(--pd-surface, #faf8f5); border-color: var(--pd-oxblood, #5A0710); }
.navigation.pagination .page-numbers.current {
  background: var(--pd-oxblood, #5A0710); border-color: var(--pd-oxblood, #5A0710); color: #fff; font-weight: 600;
}
.navigation.pagination .page-numbers.dots { border-color: transparent; background: none; min-width: 0; padding: 0 .25rem; }

/* --------------------------------------------------------------------------
   TOUCH TAP TARGETS — 44px minimum on coarse pointers.
   Measured 21 Aug across 40 pages: nav "Blog" 34x24 on tablet, footer "Legal
   Notices" 71x22 and blog "Read more" 316x22 on mobile. All are comfortably
   wide; it is the HEIGHT that fails, so height is what this fixes. Padding
   rather than min-height, so the visual type scale is untouched and only the
   hit area grows. Desktop keeps its tighter rhythm — 44px is a finger.
   -------------------------------------------------------------------------- */
@media (pointer: coarse), (max-width: 1024px) {
  .pd-nav__link,
  .pd-footer__legal a,
  .pd-link,
  .pd-card__foot .pd-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  /* Keep the footer row from growing by the full 44px on each line. */
  .pd-footer__legal div { gap: var(--pd-6); margin-top: 0; }
}

/* Part of the PROTOTYPE-PARITY SWITCH (section 1b), placed at the end of the
   file because the base .pd-btn--primary rule appears later than section 1b and
   was winning on source order — the switch looked applied but the button still
   painted solid oxblood.

   The prototype paints rgba(90,7,16,.7). The ALPHA is the point: over cream it
   lightens to ~#8A4F55, over the dark hero photo it deepens. Substituting the
   flat #8A4F55 (which is what "accent-soft" is — accent at 70% composited over
   cream) matched on light sections and left the hero CTA looking washed out and
   half-disabled against the photograph. Keep the alpha; do not flatten it.

   Contrast: white on the cream-composited value is 6.3:1; on the hero it sits
   over a scrimmed photograph and goes darker still, so AA holds either way. */
.pd-btn--primary { background: rgba(90, 7, 16, 0.7); }
.pd-btn--primary:hover { background: rgba(90, 7, 16, 0.85); }

/* --------------------------------------------------------------------------
   TEXT OVER PHOTOGRAPHY — safety net.
   Measured 21 Aug from rendered pixels (tests/text-over-image.js), not from
   CSS: 330 of 535 text regions sitting on imagery fell below AA, worst 1.99:1,
   because a single flat scrim cannot serve both a dark dune photo and a bright
   sky one. The scrims above were deepened where the copy sits; this shadow
   carries the small text — captions, VAT notes, eyebrows — over the bright
   patches that remain. It is invisible on dark backdrops and does the work only
   where it is needed.
   -------------------------------------------------------------------------- */
.pd-hero__copy .pd-eyebrow,
.pd-hero__sub,
.pd-hero__note,
.pd-hero__quote,
.pd-hero__price span,
.pd-band .pd-eyebrow,
.pd-band p,
.pd-cta__inner .pd-eyebrow,
.pd-cta__inner p {
  text-shadow: 0 1px 3px rgb(0 0 0 / 0.85), 0 0 12px rgb(0 0 0 / 0.5);
}
/* Every scrap of copy in the dark header sections is white, end to end.
   The accent-red eyebrow and the gold hero quote were unreadable over the
   video scrim; all three contexts (hero video/photo, band photo, cta
   gradient) are dark behind the copy, so pure white is correct in each.
   The band lede keeps its 0.8 white — it is already white. */
.pd-hero__copy .pd-eyebrow,
.pd-band .pd-eyebrow,
.pd-cta__inner .pd-eyebrow,
.pd-hero__quote,
.pd-band p:not(.pd-band__lede),
.pd-cta__inner p {
  color: #fff;
}
.pd-btn--glass, .pd-btn--ghost-light {
  text-shadow: 0 1px 3px rgb(0 0 0 / 0.7);
  backdrop-filter: blur(2px);
}

/* --------------------------------------------------------------------------
   PACKAGE CARD — even rows, pinned footer, honest truncation.

   Measured 21 Aug across the category templates, all three builds:
     * a row of three cards ran 247-275px tall (28px spread)
     * the description was clamped to 2 lines while the copy needed 3 —
       scrollHeight 68 against clientHeight 46 on EVERY card, so every
       package summary was being cut mid-sentence
     * price and CTA sat at a different height in each card (top 231 / 494 /
       522 within one grid), because .pd-card__foot simply followed the text
     * both card buttons rendered 44px tall on desktop, which reads as heavy
       inside a 247px card

   The cause is one thing: the card was a block box, so its internal rows were
   never distributed. Making it a flex column and pinning the footer fixes the
   price/CTA alignment for free — no per-card height hacks, and it holds
   whatever the title and tag counts do.
   -------------------------------------------------------------------------- */
.pd-card { display: flex; flex-direction: column; height: 100%; }
.pd-card > .pd-aspect-4-3,
.pd-card > .pd-aspect-16-9,
.pd-card > .pd-card__icon { flex: none; }

.pd-card__body { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }

/* Titles wrap to at most two lines and reserve both, so a one-line name and a
   two-line name do not push the rest of the card apart. */
.pd-card__title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(2 * var(--pd-text-xl) * var(--pd-lh-xl-num, 1.35));
  overflow-wrap: anywhere;
}

/* Tags keep one row's worth of space whether there are one or three. */

/* Four lines, and four lines' worth of space.
   Measured against the real catalogue rather than the six prototype samples:
   summaries run 18-33 words, needing 68-114px. Two lines truncated every card;
   three still truncated ten of thirteen on the desert archive. Four covers the
   bulk, and -webkit-line-clamp ellipsises the rest honestly rather than
   silently cutting. Reserving the same four lines on every card is what keeps
   a row aligned when one summary is short and its neighbour is long. */
.pd-card__text.pd-clamp-2,
.pd-card__text {
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(4 * var(--pd-text-sm) * 1.625);
  overflow-wrap: anywhere;
}

/* Taxonomy cards carry a TAGLINE, not a summary: "The city as your backdrop"
   is five words. Reserving four lines under it left ~68px of empty card, which
   reads as a rendering fault rather than as breathing room. Two lines is
   enough to align a row of taglines, and the rule above still governs package
   cards, where 18-33 word summaries genuinely need four. */
.pd-card--link .pd-card__text,
.pd-card--link .pd-card__text.pd-clamp-2 {
  -webkit-line-clamp: 2;
  min-height: calc(2 * var(--pd-text-sm) * 1.625);
}

/* The price block is the reason rows fell out of alignment at tablet width.
   Measured at 768px: the actions occupy 217px, leaving the price column too
   narrow, so "AED 14,999" and "Price on request" wrapped to two lines. That
   grew the block 48px -> 72px, grew the footer, and pushed the price 24px down
   relative to its neighbour. A price is a single token and must never wrap;
   the actions give way instead. */
.pd-price__value { white-space: nowrap; }
.pd-card__foot > :first-child { flex: 0 0 auto; }
.pd-card__actions { flex: 0 1 auto; min-width: 0; }

/* Price-on-request cards carry no "From" label. Reserving an empty line for it
   was the wrong fix twice over: the placeholder measured 18px against a real
   label's 24px, so the value still dropped 6px, and an empty line above
   "Price on request" reads as a gap rather than alignment.

   Align the thing that matters instead — the price VALUE. The block is a
   column justified to its end and tall enough for label + value, so the value
   sits on one baseline across the row whether or not a label sits above it. */
.pd-card__foot > :first-child {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: calc((var(--pd-text-xs) * 1.5) + (var(--pd-text-base) * 1.5));
}
.pd-price__label { display: block; }

/* The footer is the whole point: pinned to the bottom, so price and CTA share a
   baseline across every card in the row. */
.pd-card__foot { margin-top: auto; }
.pd-card__actions { flex: none; }

/* A card CTA is a secondary action in a dense grid. 44px is right for a finger
   and heavy for a cursor, so the height follows the pointer. Never below the
   WCAG 2.5.8 minimum of 24px. */
@media (pointer: fine) {
  .pd-card .pd-btn--sm { min-height: 38px; padding-block: 0.5rem; }
}
@media (pointer: coarse), (max-width: 1024px) {
  .pd-card .pd-btn--sm { min-height: 44px; }
}

/* Phones: the footer stacks, so the actions get the full width rather than
   crowding against the price. */
@media (max-width: 639px) {
  .pd-card__foot { gap: var(--pd-3); }
  .pd-card__actions { width: 100%; }
  .pd-card__actions .pd-btn { flex: 1 1 0; justify-content: center; }
}

/* --------------------------------------------------------------------------
   TESTIMONIAL QUOTES — reserve the star row.
   Ratings are optional (a testimonial without one shows no stars, deliberately,
   because stars are a claim). Side by side that left the un-rated quote's text
   starting 16px above its neighbour's. Reserving the row keeps the quotes on a
   shared baseline whether or not stars are painted into it, and the cite pins
   to the bottom so attributions line up too.
   -------------------------------------------------------------------------- */
.pd-quote {
  display: flex; flex-direction: column; height: 100%;
  /* <figure> carries a 40px side margin from the UA stylesheet. Only
     `.pd-gallery figure` was zeroing it, so inside the carousel every quote
     added 80px of phantom width: the track measured 1596px against the 1356px
     the geometry called for, the arrow step overshot, and the strip loaded
     already scrolled 40px with `prev` wrongly enabled. */
  margin: 0;
}
.pd-quote > .pd-stars,
.pd-quote::before { flex: none; }
.pd-quote:not(:has(.pd-stars))::before {
  /* Exactly the star row's footprint, measured: 16px tall with no margins of
     its own. An earlier attempt added a 12px margin the real row does not have
     and pushed the un-rated quote 12px the other way. */
  content: ""; display: block; height: 16px;
}
.pd-quote p { flex: 1 1 auto; }
.pd-quote cite { margin-top: auto; }

/* --------------------------------------------------------------------------
   TESTIMONIAL CAROUSEL — two per view.
   Built on scroll-snap rather than JS transforms: the strip is a real scroll
   container, so it works with a trackpad, a touch swipe, keyboard arrows and a
   screen reader before any script runs. The arrows below only call scrollBy —
   if the JS fails the section is still fully readable and scrollable, which a
   translate-based carousel is not.
   Two per view from 640px, one below it. Quotes keep their equal-height
   alignment because each slide is a flex item stretching to the track.
   -------------------------------------------------------------------------- */
.pd-carousel { position: relative; }
.pd-carousel__track {
  display: flex; gap: var(--pd-6);
  overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;                    /* the arrows are the affordance */
  padding-bottom: var(--pd-2);
  align-items: stretch;
}
.pd-carousel__track::-webkit-scrollbar { display: none; }
.pd-carousel__track > * {
  flex: 0 0 100%; scroll-snap-align: start; min-width: 0;
}
@media (min-width: 640px) {
  .pd-carousel__track > * { flex: 0 0 calc((100% - var(--pd-6)) / 2); }
}
/* RUN-024: arrows ride the left/right sides of the cards; no counter. */
.pd-carousel__nav { display: contents; }
.pd-carousel [data-pd-carousel-prev],
.pd-carousel [data-pd-carousel-next] {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  background: var(--pd-card, #f2ede6);
  box-shadow: 0 2px 10px rgba(28, 20, 16, 0.14);
}
.pd-carousel [data-pd-carousel-prev] { left: -20px; }
.pd-carousel [data-pd-carousel-next] { right: -20px; }
/* Phones: the -20px hang put the 44px arrow's right edge 4px past the viewport
   on a 390px screen, which scrolled the whole document sideways. Pre-existing
   since the arrows moved outside the card; caught by the chat-widget suite's
   overflow assertion. Flush with the card edge below 420px — the arrows still
   overlap the card, just without hanging off the screen. */
@media (max-width: 419px) {
  .pd-carousel [data-pd-carousel-prev] { left: 0; }
  .pd-carousel [data-pd-carousel-next] { right: 0; }
}
@media (min-width: 1280px) {
  .pd-carousel [data-pd-carousel-prev] { left: -72px; }
  .pd-carousel [data-pd-carousel-next] { right: -72px; }
}
.pd-carousel__count {
  font-size: var(--pd-text-xs); color: var(--pd-ink-3);
  min-width: 4.5rem; text-align: center; font-variant-numeric: tabular-nums;
}
.pd-carousel [data-pd-carousel-prev][disabled],
.pd-carousel [data-pd-carousel-next][disabled] { opacity: 0.35; cursor: default; }

/* A carousel that animates past three quotes is motion nobody asked for. */
@media (prefers-reduced-motion: reduce) {
  .pd-carousel__track { scroll-behavior: auto; }
}

/* --------------------------------------------------------------------------
   CALLOUT — a soft panel for a secondary message inside a narrow column.
   Added because page-thank-you.php was reaching for `.pd-band .pd-band--soft`,
   and `.pd-band` is the full-bleed image band whose padding and background live
   on absolutely-positioned children it did not have. The result was an unstyled
   div. This is what that markup was actually asking for.
   -------------------------------------------------------------------------- */
.pd-callout {
  background: var(--pd-card);
  border: 1px solid var(--pd-border);
  border-radius: var(--pd-radius-xl);
  padding: var(--pd-6);
}

/* --------------------------------------------------------------------------
   MOBILE SHEET GROUP — one taxonomy list inside the bottom sheet.
   Its label and links are styled by the descendant rules above, and site.js
   shows one group at a time by setting the `hidden` attribute. The rule below
   looks redundant against the UA default, and is not: `[hidden]` is only
   `display: none` until something gives the element any other `display`, at
   which point the attribute silently stops working and every group renders at
   once. Stating it here means a later layout change cannot break the toggle.
   -------------------------------------------------------------------------- */
.pd-mobilebar__group[hidden] { display: none; }

/* --------------------------------------------------------------------------
   PRE-WEDDING COLLECTION SECTIONS (RUN-011) — fine print, owner bio.
   Prototype: numbered 01-05 fine-print cards on a 2-col grid; owner split.
   House styles: card surface, border, pill numerals, WCAG-corrected inks.
   -------------------------------------------------------------------------- */
.pd-fineprint__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
}
.pd-fineprint__item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  background: var(--pd-card, #f2ede6);
  border: 1px solid var(--pd-border, #e5ddd0);
  border-radius: var(--pd-radius, 18px);
  padding: 1.25rem 1.4rem;
}
.pd-fineprint__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2.4rem;
  height: 2.4rem;
  padding: 0.1em 0 0 0.05em;
  font-family: var(--pd-font-display, "Cormorant Garamond", serif);
  font-size: 1.2rem;
  font-weight: 700;
  font-feature-settings: "lnum" 1;
  line-height: 0;
  color: #fff;
  background: var(--pd-accent, #5a0710);
  border-radius: 999px;
}
.pd-fineprint__item p { margin: 0; color: var(--pd-ink, #1c1410); font-size: 0.95rem; line-height: 1.55; }
@media (max-width: 720px) {
  .pd-fineprint__grid { grid-template-columns: 1fr; }
}
.pd-owner { align-items: center; }
/* RUN-021: the text must sit NEXT TO the portrait, not a column away — the
   equal 2-col split left a ~330px void between a 300px image and the copy.
   The image column is sized to the image, so the intro starts beside it. */
@media (min-width: 1024px) {
  .pd-owner { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: var(--pd-8); }
}
.pd-owner__media { max-width: 300px; }
.pd-owner__media img { width: 100%; height: auto; border-radius: var(--pd-radius, 18px); }
@media (max-width: 720px) {
  .pd-owner__media { max-width: 220px; margin-inline: auto; }
}

/* ── About: founder feature (about-owner, 2026-09-02) ─────────────────────── */
.pd-founder { display: grid; gap: var(--pd-10); grid-template-columns: 1fr; align-items: stretch; }
@media (min-width: 1024px) { .pd-founder { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: var(--pd-12); } }
.pd-founder__media { border-radius: 18px; overflow: hidden; background: var(--pd-card); }
.pd-founder__media img { width: 100%; height: auto; display: block; }
@media (min-width: 1024px) { .pd-founder__media { height: 100%; } .pd-founder__media img { height: 100%; object-fit: cover; object-position: center 28%; } }
.pd-founder__rule { width: 88px; height: 2px; margin-top: var(--pd-4); background: var(--pd-gold); border-radius: 2px; }
.pd-founder__promise { color: var(--pd-accent); font-style: italic; }
.pd-founder__press { display: grid; gap: var(--pd-5); grid-template-columns: 1fr; }
@media (min-width: 640px) { .pd-founder__press { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pd-press-card { display: flex; flex-direction: column; background: var(--pd-surface); border: 1px solid var(--pd-border); border-radius: 14px; overflow: hidden; text-decoration: none; color: inherit; transition: border-color .15s ease, box-shadow .15s ease; }
.pd-press-card:hover { border-color: rgb(90 7 16 / 0.35); box-shadow: 0 6px 20px rgb(28 20 16 / 0.06); }
.pd-press-card__media { display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.pd-press-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pd-press-card__body { padding: var(--pd-4); display: flex; flex-direction: column; gap: var(--pd-3); flex: 1 1 auto; }
.pd-press-card__title { font-family: var(--pd-font-display); font-size: var(--pd-text-lg); line-height: 1.3; color: var(--pd-ink); }
.pd-press-card__link { display: inline-flex; align-items: center; gap: 0.375rem; margin-top: auto; font-size: var(--pd-text-sm); font-weight: 600; color: var(--pd-gold-ink); }
.pd-press-card__link svg { width: 14px; height: 14px; flex: none; }

/* About: full-width press feature (image left / text right, spans both columns) */
.pd-press-card--wide { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch; }
@media (max-width: 639px) { .pd-press-card--wide { grid-template-columns: 1fr; } }
.pd-press-card--wide .pd-press-card__media { aspect-ratio: auto; min-height: 100%; overflow: hidden; }
.pd-press-card--wide .pd-press-card__body { justify-content: center; gap: var(--pd-2); padding: var(--pd-6); }
.pd-press-card__publisher { font-family: var(--pd-font-eyebrow); font-size: var(--pd-text-xs); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pd-gold-ink); }
.pd-press-card__excerpt { font-size: var(--pd-text-sm); line-height: 1.55; color: var(--pd-ink-2); }

/* Catalogue pages: full-page embedded PDF (RUN-033 addendum, 6 Sep). The pdf.js
   viewer renders to canvas, so the embed behaves identically on desktop and on
   Android/iOS, which refuse to render PDFs inline in a plain iframe. The frame
   fills the viewport below the fixed header; dvh first, vh as the fallback. */
.pd-catalogue { padding-top: var(--pd-header-h); }
.pd-pdf-frame { width: 100%; height: calc(100vh - var(--pd-header-h) - 3.75rem); height: calc(100dvh - var(--pd-header-h) - 3.75rem); background: #241f19; }
.pd-pdf-frame__viewer { display: block; width: 100%; height: 100%; border: 0; }
.pd-pdf-frame__fallback { padding: var(--pd-6); }
.pd-pdf-frame__dl { padding: var(--pd-3) 0; }

/* FAQs page (RUN-033 addendum, 6 Sep): grouped accordion sections on the
   recreated /faqs/ page — pairs parsed from the verbatim page content. */
.pd-faq-group { margin-top: var(--pd-8); }
.pd-faq-group .pd-faq { margin-top: var(--pd-5); }