/* ==========================================================================
   Potter's Messages — the style map, applied.

   Built from style-map.md (values taken from the live portal on 2026-08-08).
   This sheet is loaded LAST, after nicepage.css / index.css / the page's own
   styles, and re-skins the existing markup to match the member portal:
   the sunrise background, the two typefaces, gold instead of rose for
   anything that is a call to action, hairline borders, generous radii.

   Section numbers in the comments refer to style-map.md.
   ========================================================================== */

/* --------------------------------------------------------------------------
   §2  Colour — the complete palette
   -------------------------------------------------------------------------- */
:root {
  /* the anchor */
  --navy:        #3A4C74;
  --navy-soft:   #6B7CA0;

  /* gold — the accent */
  --gold:        #D9B871;
  --gold-soft:   #EBD6A8;
  --gold-deep:   #C1974A;
  --gold-ink:    #9C7B34;
  --glow-rgb:    217,184,113;

  /* rose — human warmth, used sparingly */
  --rose:        #C79AA0;
  --rose-deep:   #B48A8F;
  --rose-dark:   #9a7176;

  /* stained glass — categories only */
  --azure:       #93B2D6;
  --azure-ink:   #46699A;
  --amethyst:    #B3A5CE;
  --amethyst-ink:#6C5C97;

  /* the light the page is made of */
  --alabaster:   #F5F3ED;
  --ivory:       #EBE8E0;
  --mist:        #EFEFF4;

  /* text and edges */
  --ink:         #414B60;
  --muted:       #7F879B;
  --line:        rgba(58, 76, 116, .10);

  --card-shadow: 0 1px 2px rgba(58,76,116,.03),
                 0 12px 34px rgba(58,76,116,.06);

  /* the old brand, remapped where the page still asks for it (§2, §12) */
  --primary:   #3A4C74;
  --secondary: #C1974A;
  --color3:    #B48A8F;
  --color4:    #9a7176;
  --white:     #F5F3ED;
  --light:     #F5F3ED;
  --dark:      #3A4C74;
}

/* --------------------------------------------------------------------------
   §4  The background — a sun off the top-left corner, beams across a very
   desaturated mountain photograph. Fixed on every layer so the light runs
   unbroken from one element into the next.
   -------------------------------------------------------------------------- */
html { background-color: var(--alabaster); }

body,
body.u-body {
  background-image:
    radial-gradient(3000px 2400px at -8% -12%,
      rgba(245,243,237,0) 22%, rgba(245,243,237,.16) 44%,
      rgba(245,243,237,.42) 66%, rgba(245,243,237,.72) 84%,
      rgba(245,243,237,.88) 100%),

    repeating-conic-gradient(from 3deg at -6% -10%,
      rgba(255,253,247,0)   0.0deg, rgba(255,253,247,0)   1.1deg,
      rgba(255,253,247,.62) 2.4deg, rgba(255,253,247,0)   4.0deg,
      rgba(255,253,247,0)   4.7deg, rgba(255,253,247,.32) 5.6deg,
      rgba(255,253,247,0)   6.8deg, rgba(255,253,247,0)   7.7deg,
      rgba(255,253,247,.50) 9.0deg, rgba(255,253,247,0)  10.7deg,
      rgba(255,253,247,0)  11.5deg, rgba(255,253,247,.22)12.2deg,
      rgba(255,253,247,0)  13.2deg, rgba(255,253,247,0)  15.8deg),

    radial-gradient(1500px 1250px at -6% -10%,
      rgba(255,254,250,1) 0%, rgba(255,253,246,.80) 24%, rgba(255,253,246,0) 66%),

    linear-gradient(rgba(245,243,237,.72), rgba(241,239,232,.82)),

    linear-gradient(0deg, #A9A79E, #A9A79E),

    var(--pm-bg-photo, url('../images/Mountain_Bg.png'));

  background-blend-mode: normal, screen, screen, normal, color, normal;
  background-size:       cover, cover, cover, cover, cover, cover;
  background-attachment: fixed, fixed, fixed, fixed, fixed, fixed;
  background-position:   center center;
  background-repeat:     no-repeat;
  background-color:      var(--alabaster);
}

/* Sections must not paint over the light — one sun, not twelve. */
.u-body [class*="u-section-"],
.u-body .u-section-row,
.u-body .u-sheet,
.u-body .u-clearfix > .u-sheet {
  background-color: transparent !important;
}
.u-body [class*="u-section-"] {
  background-image: none !important;
}
/* the old dark photo/overlay treatments */
.u-body .u-shading,
.u-body .u-gradient,
.u-body .u-dark,
.u-body .u-grey,
.u-body [class*="u-grey-dark"] {
  background-image: none !important;
  background-color: transparent !important;
}

/* §4 note — `fixed` is unreliable on phones */
@media (max-width: 700px) {
  body, body.u-body { background-attachment: scroll, scroll, scroll, scroll, scroll, scroll; }
}

/* --------------------------------------------------------------------------
   §3  Typography — Cormorant Garamond for the human voice, Poppins for
   everything functional. Body copy is weight 300; that lightness is half
   the character of the site.
   -------------------------------------------------------------------------- */
body, .u-body,
.u-text, .u-btn, .u-nav-link, .u-input, input, select, textarea, button,
p, li, td, th, label, figcaption, blockquote {
  font-family: 'Poppins', sans-serif;
}

body, .u-body {
  color: var(--ink);
  font-weight: 300;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

.u-body p,
.u-body li,
.u-body .u-text:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
  font-weight: 300;
  line-height: 1.7;
  color: var(--ink);
}

h1, h2, h3, h4, h5, h6,
.u-body h1, .u-body h2, .u-body h3, .u-body h4, .u-body h5, .u-body h6,
.display, .u-title, .u-subtitle,
.pm-hero__headline, .pm-card__title {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 500 !important;
  letter-spacing: .005em;
  color: var(--navy) !important;
  text-transform: none !important;   /* §3 — the site deliberately un-uppercases */
  line-height: 1.2;
}
.u-body h1 { font-size: 2.5rem; }     /* 40px — the hero voice */
.u-body h2 { font-size: 2.125rem; }   /* 34px */
.u-body h3 { font-size: 1.45rem; }    /* 23px — card / panel title */
.u-body h4 { font-size: 1.25rem; }
.u-body h5, .u-body h6 {
  font-family: 'Poppins', sans-serif !important;
  font-size: 1.15rem; font-weight: 600 !important;
}

/* the emotional half of a heading, in italic — never a different colour */
.u-body h1 em, .u-body h2 em, .u-body h3 em {
  font-family: inherit; font-style: italic; color: inherit;
}

/* the eyebrow — a small gold label above a title (§3) */
.eyebrow,
.pm-hero__eyebrow-text,
.u-body .u-text.u-text-eyebrow {
  font-family: 'Poppins', sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: .2em !important;
  text-transform: uppercase !important;
  color: var(--gold-ink) !important;
}

/* --------------------------------------------------------------------------
   §2  Text colour — three choices and no more: ink, muted, navy.
   The page used white type over dark blocks; the blocks are gone, so the
   type comes back to ink.
   -------------------------------------------------------------------------- */
.u-body .u-text-white,
.u-body .u-text-white *,
.u-body a.u-text-white,
.u-body .u-text-body-alt-color,
.u-body .u-text-default,
.u-body [class*="u-text-grey"],
.u-body .u-text-black {
  color: var(--ink) !important;
}
.u-body .u-text-custom-color-1,
.u-body .u-text-custom-color-7,
.u-body .u-text-custom-color-8 { color: var(--navy) !important; }

/* rose was doing the work of an accent; gold does it now (§1.3, §2) */
.u-body .u-text-custom-color-3,
.u-body .u-text-custom-color-4,
.u-body .u-text-custom-color-11,
.u-body .u-text-custom-color-12 { color: var(--gold-ink) !important; }

.u-body .u-text-hover-custom-color-3:hover,
.u-body .u-text-hover-custom-color-4:hover,
.u-body a:hover { color: var(--gold-ink) !important; }

.u-body a { color: var(--gold-ink); transition: color .18s ease; }

/* small print */
.u-body small,
.u-body .u-text-small,
.u-body figcaption { color: var(--muted); font-weight: 300; }

/* --------------------------------------------------------------------------
   §2  Blocks that were painted in the old palette
   -------------------------------------------------------------------------- */
.u-body .u-custom-color-1,
.u-body .u-custom-color-5,
.u-body .u-custom-color-7,
.u-body .u-custom-color-8,
.u-body .u-container-layout.u-custom-color-1,
.u-body .u-container-layout.u-custom-color-7 {
  background-color: rgba(255,255,255,.72) !important;
  color: var(--ink) !important;
}
.u-body .u-custom-color-3,
.u-body .u-custom-color-4,
.u-body .u-custom-color-6,
.u-body .u-custom-color-11,
.u-body .u-custom-color-12 {
  background-color: rgba(var(--glow-rgb), .12) !important;
  color: var(--ink) !important;
}
.u-body .u-white,
.u-body .u-custom-color-10 {
  background-color: rgba(255,255,255,.86) !important;
  color: var(--ink) !important;
}

/* --------------------------------------------------------------------------
   §5  Cards and panels — white-ish, softly rounded, lifted off the light.
   A flat #fff card reads as a cut-out; the faint warm shift is what makes
   it sit in the page.
   -------------------------------------------------------------------------- */
.u-body .u-repeater-item,
.u-body .u-accordion-item,
.u-body .u-list-item > .u-container-style,
.u-body .u-layout-cell.u-container-style:not(.u-layout-cell-transparent):not(.u-image),
.u-body .u-tab-content,
.u-body .u-testimonial,
.card {
  background-image: linear-gradient(180deg, #FFFFFE 0%, #FCFBF7 100%) !important;
  border: 1px solid var(--line) !important;
  border-radius: 20px !important;
  box-shadow: var(--card-shadow) !important;
  transition: box-shadow .18s ease, transform .18s ease;
}
.u-body .u-repeater-item:hover,
.u-body .u-list-item > .u-container-style:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(58,76,116,.04), 0 18px 44px rgba(58,76,116,.10) !important;
}

/* §5 radii — 20px when unsure, and nothing sharp anywhere */
.u-body .u-container-style,
.u-body .u-image.u-radius,
.u-body .u-video,
.u-body .u-video-cover,
.u-body img.u-image:not(.u-logo-image):not(.u-image-contain) {
  border-radius: 20px;
}
.u-body .u-btn.u-shape-rectangle,
.u-body .u-btn-rectangle { border-radius: 999px !important; }
/* panels keep a card's corner, not a pill's (§5) */
.u-body .u-list-item.u-shape-rectangle,
.u-body .u-repeater-item.u-shape-rectangle,
.u-body .u-container-style.u-shape-rectangle { border-radius: 20px !important; }

/* the hero panel — larger radius, brighter interior, a lit upper edge */
.u-body .u-hero,
.u-body .hero,
.hero {
  border-radius: 28px;
  background:
    radial-gradient(680px 340px at 50% -30%, rgba(255,254,250,.95), rgba(255,254,250,0) 70%),
    linear-gradient(128deg, #FFFFFD 0%, #F7F5F0 44%, #EDEFF5 100%);
  border: 1px solid rgba(255,255,255,.95);
  box-shadow: 0 16px 44px rgba(58,76,116,.10), inset 0 1px 0 rgba(255,255,255,.9);
  padding: 40px 44px;
  color: var(--ink);
}
.card-floating {
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 24px;
  box-shadow: 0 16px 44px rgba(58,76,116,.12), inset 0 1px 0 rgba(255,255,255,.9);
  padding: 34px 32px;
}

/* --------------------------------------------------------------------------
   §6  Buttons — every one a full pill. Gold for the thing to do next,
   one per view; ghost beside it; line for anything quieter.
   -------------------------------------------------------------------------- */
.u-body .u-btn,
.u-body a.u-btn,
.u-body button.u-btn,
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: 'Poppins', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: .01em;
  text-transform: none !important;
  padding: 11px 24px !important;
  border-radius: 999px !important;
  border: 0 !important;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease, color .18s ease;
}

/* 1. PRIMARY — gold. The gradient runs at 120°, dark to light, over a soft glow. */
.u-body .u-btn.u-custom-color-1,
.u-body .u-btn.u-custom-color-3,
.u-body .u-btn.u-custom-color-4,
.u-body .u-btn.u-custom-color-7,
.u-body .u-btn.u-custom-color-8,
.u-body .u-btn.u-custom-color-11,
.u-body .u-btn.u-custom-color-12,
.u-body .u-btn.u-palette-1-base,
.u-body .u-btn.u-button-style.u-custom-color-3,
.pm-btn--primary,
.btn-gold {
  background-image: linear-gradient(120deg, var(--gold-deep) 0%, var(--gold) 52%, var(--gold-soft) 100%) !important;
  background-color: var(--gold-deep) !important;
  color: #fff !important;
  box-shadow: 0 8px 22px rgba(var(--glow-rgb), .44) !important;
}
.u-body .u-btn.u-custom-color-1:hover,
.u-body .u-btn.u-custom-color-3:hover,
.u-body .u-btn.u-custom-color-4:hover,
.u-body .u-btn.u-custom-color-7:hover,
.u-body .u-btn.u-custom-color-8:hover,
.u-body .u-btn.u-custom-color-11:hover,
.u-body .u-btn.u-custom-color-12:hover,
.pm-btn--primary:hover,
.btn-gold:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
  color: #fff !important;
}

/* 2. GHOST — a second action beside the primary, over a light panel */
.u-body .u-btn.u-white,
.u-body .u-btn.u-custom-color-10,
.u-body .u-btn.u-btn-round.u-white,
.pm-btn--ghost,
.btn-ghost {
  background-image: none !important;
  background-color: rgba(255,255,255,.82) !important;
  color: var(--navy) !important;
  border: 1px solid rgba(58,76,116,.14) !important;
  box-shadow: none !important;
}
.u-body .u-btn.u-white:hover,
.u-body .u-btn.u-custom-color-10:hover,
.pm-btn--ghost:hover,
.btn-ghost:hover {
  background-color: #fff !important;
  transform: translateY(-1px);
}

/* 3. LINE — quiet, tertiary, on a card */
.u-body .u-btn[class*="u-border-"],
.btn-line {
  background-image: none !important;
  background-color: #fff !important;
  color: var(--navy) !important;
  border: 1px solid var(--line) !important;
}
.u-body .u-btn[class*="u-border-"]:hover,
.btn-line:hover {
  background-color: var(--ivory) !important;
  color: var(--gold-ink) !important;
  border-color: rgba(var(--glow-rgb), .55) !important;
}

.btn-sm { padding: 8px 18px !important; font-size: 12px !important; }

/* the larger call to action used on the calm pages (§6) */
.u-body .u-btn.u-btn-lg,
.btn-lg {
  font-size: 17px !important;
  padding: 15px 30px !important;
  min-height: 52px;
}

/* --------------------------------------------------------------------------
   §7  Form fields — soft alabaster fill, and a gold halo on focus.
   Never a blue browser outline.
   -------------------------------------------------------------------------- */
.u-body input[type=text],
.u-body input[type=email],
.u-body input[type=password],
.u-body input[type=tel],
.u-body input[type=number],
.u-body input[type=search],
.u-body select,
.u-body textarea,
.u-body .u-input {
  background-color: rgba(245,243,237,.6) !important;
  background-image: none !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 14px !important;
  font-weight: 300;
  color: var(--ink) !important;
  padding: 13px 16px !important;
  min-height: 50px;
  box-shadow: none !important;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.u-body textarea, .u-body textarea.u-input { min-height: 120px; }

.u-body input:focus,
.u-body select:focus,
.u-body textarea:focus,
.u-body .u-input:focus {
  outline: none !important;
  background-color: #fff !important;
  border-color: rgba(var(--glow-rgb), .7) !important;
  box-shadow: 0 0 0 4px rgba(var(--glow-rgb), .14) !important;
}
.u-body ::placeholder { color: #A8AEBC; }

.u-body label,
.u-body .u-label {
  font-size: 13.5px;
  font-weight: 300;
  color: var(--ink) !important;
}

/* tick boxes, drawn by hand, gold when checked (§7) */
.u-body input[type=checkbox] {
  appearance: none; -webkit-appearance: none;
  width: 16px; height: 16px;
  border: 1.5px solid rgba(58,76,116,.28);
  border-radius: 5px;
  background: #fff; cursor: pointer; position: relative;
  min-height: 0 !important; padding: 0 !important;
}
.u-body input[type=checkbox]:checked {
  border-color: var(--gold-deep); background: var(--gold-deep);
}
.u-body input[type=checkbox]:checked::after {
  content: ''; position: absolute; left: 4.5px; top: 1px;
  width: 4px; height: 9px;
  border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* --------------------------------------------------------------------------
   §8  Smaller pieces — pills, marks, notices, alerts, ticked lists
   -------------------------------------------------------------------------- */
.pill {
  font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  border-radius: 999px; padding: 4px 11px; white-space: nowrap;
  background: rgba(var(--glow-rgb), .16); color: var(--gold-ink);
}
.pill.is-off { background: rgba(58,76,116,.06); color: #A8AEBC; }

.flag {
  position: absolute; top: -11px; left: 24px;
  font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  border-radius: 999px; padding: 5px 13px; white-space: nowrap;
  background: var(--gold-deep); color: #fff;
}
.flag.is-pick { background: var(--rose-deep); }

.mark {
  width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Cormorant Garamond', Georgia, serif; font-size: 19px; font-weight: 600;
  background: rgba(var(--glow-rgb), .16); color: var(--gold-ink);
}
.mark.is-alt { background: rgba(147,178,214,.22); color: var(--azure-ink); }

.notice {
  border: 1px solid rgba(var(--glow-rgb), .42);
  background: rgba(var(--glow-rgb), .10);
  border-radius: 16px;
  transition: background .18s ease;
}
.notice:hover { background: rgba(var(--glow-rgb), .16); }
.notice > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 14px; padding: 16px 22px;
}
.notice > summary::-webkit-details-marker { display: none; }
.notice-label {
  font-size: 14px; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--gold-ink);
}

.gets li {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 13.5px; font-weight: 300; line-height: 1.55; padding: 7px 0;
}
.gets li i { color: var(--gold-ink); font-size: 12px; margin-top: 4px; flex: none; }
.gets b { font-weight: 500; color: var(--navy); }

/* rose, never red (§8) */
.alert,
.u-body .u-alert,
.u-body .u-form-send-error {
  background: rgba(199,154,160,.14) !important;
  border: 1px solid rgba(199,154,160,.45) !important;
  color: var(--rose-dark) !important;
  border-radius: 14px !important;
  padding: 14px 18px !important;
}
.u-body .u-form-send-success {
  background: rgba(var(--glow-rgb), .12) !important;
  border: 1px solid rgba(var(--glow-rgb), .42) !important;
  color: var(--gold-ink) !important;
  border-radius: 14px !important;
}

/* icons — gold where they mark something, navy where they are furniture */
.u-body .u-icon.u-icon-circle {
  background-image: none !important;
  background-color: rgba(var(--glow-rgb), .16) !important;
  color: var(--gold-ink) !important;
}
.u-body .u-icon svg, .u-body .u-icon .u-svg-link { fill: currentColor; }
.u-body .u-icon.u-text-white,
.u-body .u-icon.u-text-white svg { color: var(--gold-ink) !important; fill: var(--gold-ink) !important; }
.u-body .u-social-icon svg { fill: var(--navy-soft) !important; }
.u-body .u-social-url:hover .u-social-icon svg { fill: var(--gold-ink) !important; }

/* accordions — the panel headers were dark navy slabs; they are cards now,
   with the chevron in gold (§5, §10) */
.u-body .u-accordion-link,
.u-body .u-accordion-item > .u-accordion-link {
  background-image: linear-gradient(180deg, #FFFFFE 0%, #FCFBF7 100%) !important;
  background-color: transparent !important;
  color: var(--navy) !important;
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 23px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  border: 0 !important;
  border-radius: 20px !important;
  padding: 16px 22px !important;
}
.u-body .u-accordion-link:hover { background-color: var(--ivory) !important; }
.u-body .u-accordion-link .u-icon,
.u-body .u-accordion-link svg { color: var(--gold-ink) !important; fill: var(--gold-ink) !important; transition: transform .2s ease; }
.u-body .u-accordion-pane { background-color: transparent !important; }

/* the nav item for the page you are on */
.u-body .u-header .u-nav-link.active,
.u-body .u-header li.active > .u-nav-link {
  color: var(--gold-ink) !important;
  background-color: rgba(var(--glow-rgb), .16) !important;
}

/* social marks — one quiet colour, gold on hover */
.u-body .u-social-icons .u-icon,
.u-body .u-social-icons .u-icon svg,
.u-body .u-social-icons .u-social-icon svg,
.u-body .u-social-icons [class*="u-social-"] svg {
  background-image: none !important;
  background-color: transparent !important;
  fill: var(--navy-soft) !important;
  color: var(--navy-soft) !important;
}
.u-body .u-social-icons a:hover .u-icon svg { fill: var(--gold-ink) !important; }

/* every rule and edge is the one hairline colour (§12.4) */
.u-body hr,
.u-body .u-line,
.u-body [class*="u-border-"] { border-color: var(--line) !important; }

/* --------------------------------------------------------------------------
   The header — was a dark navy bar. The page is made of light now, so the
   bar is white over the light, with a single hairline under it.
   -------------------------------------------------------------------------- */
.u-body .u-header {
  background-color: rgba(255,255,255,.86) !important;
  background-image: none !important;
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--line) !important;
  box-shadow: none !important;
}
.u-body .u-header.u-sticky-fixed,
.u-body.u-sticky-fixed .u-header {
  box-shadow: 0 1px 2px rgba(58,76,116,.03), 0 12px 34px rgba(58,76,116,.06) !important;
}
.u-body .u-header .u-nav-link,
.u-body .u-header a.u-nav-link.u-text-white,
.u-body .u-header .u-text-white {
  color: var(--navy) !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  text-transform: none !important;
  border-radius: 999px !important;
  transition: color .18s ease, background-color .18s ease;
}
.u-body .u-header .u-nav-link:hover,
.u-body .u-header .u-nav-link.active {
  color: var(--gold-ink) !important;
  background-color: rgba(var(--glow-rgb), .10) !important;
}
.u-body .u-header .u-submenu {
  background-color: rgba(255,255,255,.97) !important;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--card-shadow);
  padding: 8px !important;
  overflow: hidden;
}
.u-body .u-header .u-hamburger-link svg,
.u-body .u-header .u-hamburger-link { color: var(--navy) !important; fill: var(--navy) !important; }

/* the slide-out menu, light as well */
.u-body .u-sidenav,
.u-body .u-sidenav.u-black {
  background-color: rgba(255,255,255,.97) !important;
  background-image: none !important;
}
.u-body .u-sidenav .u-nav-link { color: var(--navy) !important; }
.u-body .u-sidenav .u-nav-link:hover { color: var(--gold-ink) !important; }
.u-body .u-menu-overlay,
.u-body .u-menu-overlay.u-black { background-color: rgba(58,76,116,.35) !important; }

/* --------------------------------------------------------------------------
   The footer — a quiet band on the same light, not a dark slab
   -------------------------------------------------------------------------- */
.u-body .u-footer {
  background-image: none !important;
  background-color: rgba(255,255,255,.62) !important;
  border-top: 1px solid var(--line);
  color: var(--ink) !important;
}
.u-body .u-footer .u-text,
.u-body .u-footer p,
.u-body .u-footer a,
.u-body .u-footer .u-text-white { color: var(--ink) !important; }
.u-body .u-footer a:hover { color: var(--gold-ink) !important; }

/* --------------------------------------------------------------------------
   §10  Motion — almost none, and never fast
   -------------------------------------------------------------------------- */
.u-body a,
.u-body .u-btn,
.u-body .u-icon,
.u-body .u-container-style { transition-duration: .18s !important; transition-timing-function: ease !important; }
.u-body .u-image-hover, .u-body [data-animation-name] { animation-duration: .18s !important; }

/* --------------------------------------------------------------------------
   The hand-built hero on the home page (css/hero.css) — same treatment,
   applied through its own tokens so the layout is untouched.
   -------------------------------------------------------------------------- */
.pm-hero {
  --pm-surface: transparent;
  --pm-surface-container-low: rgba(255,255,255,.72);
  --pm-on-surface: var(--ink);
  --pm-on-surface-variant: var(--muted);
  --pm-outline: rgba(58,76,116,.18);
  --pm-outline-variant: var(--line);
  --pm-primary: var(--gold-ink);
  --pm-primary-container: var(--gold-deep);
  --pm-primary-fixed: rgba(217,184,113,.18);
  --pm-shadow-ambient: var(--card-shadow);
  font-family: 'Poppins', sans-serif !important;
  background: transparent !important;
  color: var(--ink) !important;
  font-weight: 300;
}
.pm-hero__bg { display: none !important; }   /* the page's own light shows through */
.pm-hero__headline {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 500 !important;
  color: var(--navy) !important;
  line-height: 1.15;
}
.pm-hero__headline em { font-style: italic; color: inherit; }
.pm-hero__lead {
  font-size: 18px; font-weight: 300; color: #5C6470; max-width: 640px; line-height: 1.6;
}
.pm-hero__eyebrow-icon { color: var(--gold-ink) !important; }
.pm-hero__eyebrow-divider { background: var(--line) !important; }
.pm-hero__signin { color: var(--gold-ink) !important; font-size: 13px; font-weight: 400; }
.pm-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.pm-btn {
  border-radius: 999px !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 500 !important;
  transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease, color .18s ease;
}
.pm-card {
  background: linear-gradient(180deg, #FFFFFE 0%, #FCFBF7 100%) !important;
  border: 1px solid var(--line) !important;
  border-radius: 20px !important;
  box-shadow: var(--card-shadow) !important;
}
.pm-card__title { font-family: 'Cormorant Garamond', Georgia, serif !important; color: var(--navy) !important; }
.pm-card__sub, .pm-card__quote { color: var(--ink) !important; font-weight: 300; }
.pm-card__avatar { background: rgba(var(--glow-rgb), .16) !important; color: var(--gold-ink) !important; }
.pm-card__play { background: var(--gold-deep) !important; color: #fff !important; }

/* --------------------------------------------------------------------------
   §9  Layout and spacing — reading width, and air around everything
   -------------------------------------------------------------------------- */
.u-body .u-sheet { padding-left: 16px; padding-right: 16px; }
.u-body .u-text.u-text-prose,
.u-body article p { max-width: 780px; }

@media (max-width: 640px) {
  .u-body h1 { font-size: 1.95rem; }
  .u-body h2 { font-size: 1.7rem; }
  .hero, .u-body .hero { padding: 26px 22px; }
}

/* nothing sharp, nothing black, nothing bright (§1) */
.u-body .u-black { background-color: rgba(58,76,116,.06) !important; }

/* --------------------------------------------------------------------------
   Last: the page stylesheets set white type and dark drop shadows on the
   sections that used to sit over a photograph. The photographs are gone, so
   the type comes back to ink and navy. These selectors are deliberately
   heavy — they have to outrank per-section rules like `.u-section-1 .u-text-1`.
   -------------------------------------------------------------------------- */
html body.u-body [class*="u-section-"] h1,
html body.u-body [class*="u-section-"] h2,
html body.u-body [class*="u-section-"] h3,
html body.u-body [class*="u-section-"] h4 {
  color: var(--navy) !important;
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 500 !important;
  text-shadow: none !important;
  text-transform: none !important;
}
html body.u-body [class*="u-section-"] .u-text,
html body.u-body [class*="u-section-"] p,
html body.u-body [class*="u-section-"] li,
html body.u-body [class*="u-section-"] span:not(.u-icon):not([class*="u-social"]),
html body.u-body .u-footer .u-text {
  color: var(--ink) !important;
  text-shadow: none !important;
}

/* the accent spans inside those headings stay gold (§1.3) */
html body.u-body [class*="u-section-"] .u-text-custom-color-3,
html body.u-body [class*="u-section-"] .u-text-custom-color-4,
html body.u-body [class*="u-section-"] .u-text-custom-color-11,
html body.u-body [class*="u-section-"] .u-text-custom-color-12,
html body.u-body [class*="u-section-"] h1 span,
html body.u-body [class*="u-section-"] h2 span,
html body.u-body [class*="u-section-"] h3 span {
  color: var(--gold-ink) !important;
}
html body.u-body [class*="u-section-"] h1 em,
html body.u-body [class*="u-section-"] h2 em { color: var(--navy) !important; font-style: italic; }

/* nothing on this page needs a shadow to be readable any more */
html body.u-body [class*="u-section-"] .u-text,
html body.u-body .u-header .u-nav-link { text-shadow: none !important; }

/* buttons keep their own colour whatever the section says */
html body.u-body [class*="u-section-"] .u-btn { text-shadow: none !important; }
html body.u-body [class*="u-section-"] .u-btn.u-custom-color-1,
html body.u-body [class*="u-section-"] .u-btn.u-custom-color-3,
html body.u-body [class*="u-section-"] .u-btn.u-custom-color-4,
html body.u-body [class*="u-section-"] .u-btn.u-custom-color-11,
html body.u-body [class*="u-section-"] .u-btn.u-custom-color-12 { color: #fff !important; }

/* the heading wins over the body-text rule above (same weight of selector,
   so it has to come last and carry one more class) */
html body.u-body [class*="u-section-"] h1.u-text,
html body.u-body [class*="u-section-"] h2.u-text,
html body.u-body [class*="u-section-"] h3.u-text,
html body.u-body [class*="u-section-"] h4.u-text,
html body.u-body h1, html body.u-body h2, html body.u-body h3 {
  color: var(--navy) !important;
  font-weight: 500 !important;
  font-family: 'Cormorant Garamond', Georgia, serif !important;
}

/* a button with no colour of its own reads navy on white */
html body.u-body .u-btn { color: var(--navy) !important; }

/* the little PNG icons the builder ships are red and pink; there is no red in
   this palette, so they are brought into the gold family (§2, §11) */
html body.u-body .u-file-icon img:not(.u-social-icons img) {
  filter: grayscale(1) sepia(.72) saturate(2.4) hue-rotate(-6deg) brightness(.92);
}
html body.u-body .u-social-icons .u-file-icon img { filter: none; }

/* the video still in the hero card — a gold tint, not a gold slab */
.pm-card__video {
  background: rgba(var(--glow-rgb), .20) !important;
  border: 1px solid var(--line);
}

/* §10 — "no bounces, no slides, no entrance animations, nothing that draws
   attention to itself". The builder fades every section in as you scroll;
   the page simply is, instead. */
html body.u-body [data-animation-name],
html body.u-body [data-animation-name] *:not(.pm-fade) {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

/* --------------------------------------------------------------------------
   Bootstrap's helper classes are used on the pricing table. Its palette is
   not ours: success-green and danger-red have no place here (§2, §12.8).
   -------------------------------------------------------------------------- */
html body.u-body .text-success,
html body.u-body .text-warning,
html body.u-body .text-info { color: var(--gold-ink) !important; }
html body.u-body .text-danger { color: var(--rose-dark) !important; }
html body.u-body .text-primary,
html body.u-body .text-dark { color: var(--navy) !important; }
html body.u-body .text-secondary,
html body.u-body .text-muted { color: var(--muted) !important; }
html body.u-body .text-white { color: var(--ink) !important; }

html body.u-body .bg-light { background-color: rgba(255,255,255,.86) !important; }
html body.u-body .bg-white { background-color: rgba(255,255,255,.94) !important; }
html body.u-body .bg-dark,
html body.u-body .bg-primary,
html body.u-body .bg-secondary { background-color: rgba(58,76,116,.06) !important; color: var(--ink) !important; }
html body.u-body .bg-success,
html body.u-body .bg-warning,
html body.u-body .bg-danger { background-color: rgba(var(--glow-rgb), .14) !important; color: var(--gold-ink) !important; }

html body.u-body .rounded,
html body.u-body [class*="rounded-"] { border-radius: 20px !important; }
html body.u-body .shadow,
html body.u-body .shadow-sm,
html body.u-body .shadow-lg { box-shadow: var(--card-shadow) !important; }
html body.u-body .border { border-color: var(--line) !important; }

html body.u-body .btn-primary,
html body.u-body .btn-success,
html body.u-body .btn-danger,
html body.u-body .btn-warning {
  background-image: linear-gradient(120deg, var(--gold-deep) 0%, var(--gold) 52%, var(--gold-soft) 100%) !important;
  background-color: var(--gold-deep) !important;
  border: 0 !important; color: #fff !important; border-radius: 999px !important;
  box-shadow: 0 8px 22px rgba(var(--glow-rgb), .44) !important;
}
html body.u-body .btn-outline-primary,
html body.u-body .btn-secondary,
html body.u-body .btn-light {
  background: #fff !important; color: var(--navy) !important;
  border: 1px solid var(--line) !important; border-radius: 999px !important;
}
html body.u-body .display-1, html body.u-body .display-2,
html body.u-body .display-3, html body.u-body .display-4 {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 500 !important; color: var(--navy) !important;
}

/* --------------------------------------------------------------------------
   §11  Photography — desaturated, warm-grey, never competing with the text.
   A `color`-blended #A9A79E layer over the picture, then the alabaster veil.
   -------------------------------------------------------------------------- */
html body.u-body .u-image.u-layout-cell {
  position: relative;
  box-shadow: var(--card-shadow) !important;
  border-radius: 20px;
}
/* only on cells that are nothing but a picture — a panel with words on top
   would have the colour stripped out of everything inside it */
html body.u-body .u-image.u-layout-cell:not(.u-group):empty::after,
html body.u-body .u-image.u-layout-cell.u-image-1::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(rgba(245,243,237,.28), rgba(241,239,232,.34)),
    linear-gradient(0deg, #A9A79E, #A9A79E);
  background-blend-mode: normal, color;
  mix-blend-mode: color;
  opacity: .62;
}
html body.u-body img.u-image:not(.u-logo-image),
html body.u-body .u-video-cover img,
html body.u-body article img {
  filter: saturate(.58) contrast(.97) brightness(1.02);
}

/* the video still's wash was black; nothing on this page is black (§1) */
.pm-card__video::before { background: rgba(58,76,116,.06) !important; }
.pm-card--top .pm-card__video { margin-top: 16px; }

/* a long label wraps inside its card instead of running past the edge */
html body.u-body .u-btn {
  white-space: normal;
  max-width: 100%;
  text-align: center;
  line-height: 1.35;
}

/* the "create your first message" band carried 583px of empty height under
   the button; it closes up so "How it works" follows straight on */
html body.u-body #sec-3da3 .u-sheet-1 { min-height: 0 !important; }
html body.u-body #sec-3da3 .u-text-1 { margin-top: 60px !important; }
html body.u-body #sec-3da3 .u-btn-1 { margin-bottom: 10px !important; }
html body.u-body #how_it_works .u-sheet-1 { padding-top: 0 !important; }

/* the hero clipped its own cards at the bottom edge and the next section
   painted over them — the hero keeps its overflow and sits above */
.pm-hero { overflow: visible !important; position: relative; z-index: 5; }
.pm-hero__vessel,
.pm-hero__grid,
.pm-hero__col-cards,
.pm-hero__cards-wrap,
.pm-hero__cards { overflow: visible !important; }
.pm-card--bottom { z-index: 1; }
html body.u-body [class*="u-section-"] { position: relative; z-index: 0; }

/* the step numbers were a white numeral on a pale gold tint — almost
   invisible. They get the solid gold fill and its glow, like a flag (§8) */
html body.u-body #how_it_works .u-icon.u-icon-circle {
  background-image: linear-gradient(120deg, var(--gold-deep) 0%, var(--gold) 52%, var(--gold-soft) 100%) !important;
  background-color: var(--gold-deep) !important;
  box-shadow: 0 8px 22px rgba(var(--glow-rgb), .44) !important;
  height: 72px !important; width: 72px !important; padding: 15px !important;
  margin-bottom: 6px;
}
html body.u-body #how_it_works .u-icon.u-icon-circle img {
  filter: none !important;      /* the numeral stays white on the gold */
}

/* --------------------------------------------------------------------------
   The pricing row — four cards of equal height, tops and bottoms aligned,
   with Reflective sitting forward as the plan most people choose (§5, §8).
   -------------------------------------------------------------------------- */
html body.u-body .pm-pricing .row { align-items: stretch !important; }
html body.u-body .pm-pricing [class*="col-"] { display: flex; }
html body.u-body .pm-pricing [class*="col-"] > .bg-light,
html body.u-body .pm-pricing [class*="col-"] > div.bg-light {
  display: flex; flex-direction: column; width: 100%;
}

/* the card itself */
html body.u-body .pm-pricing .bg-light {
  display: flex; flex-direction: column; width: 100%;
  background-image: linear-gradient(180deg, #FFFFFE 0%, #FCFBF7 100%) !important;
  background-color: transparent !important;
  border: 1px solid var(--line) !important;
  border-radius: 20px !important;
  box-shadow: var(--card-shadow) !important;
  overflow: hidden;
}
/* price, plan name, then the body — the body takes up the slack */
html body.u-body .pm-pricing .bg-light > div:last-child {
  display: flex; flex-direction: column; flex: 1 1 auto;
}
html body.u-body .pm-pricing .bg-light > div:last-child > ul,
html body.u-body .pm-pricing .bg-light > div:last-child > p { flex: 1 1 auto; }
html body.u-body .pm-pricing .bg-light .btn {
  margin-top: auto; align-self: center;
}

/* the plan name band */
html body.u-body .pm-pricing h4.bg-white {
  background-color: rgba(58,76,116,.04) !important;
  box-shadow: none !important;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 500 !important; font-size: 20px !important;
  letter-spacing: .14em; color: var(--navy) !important;
}
html body.u-body .pm-pricing .display-4 { line-height: 1; }
html body.u-body .pm-pricing .currency,
html body.u-body .pm-pricing .term { color: var(--muted) !important; font-weight: 300; }
html body.u-body .pm-pricing li { font-weight: 300; line-height: 1.6; }
html body.u-body .pm-pricing > .container > h3 {
  font-size: 20px !important; font-weight: 400 !important;
  color: var(--ink) !important; max-width: 780px; margin: 0 auto 34px;
  font-family: 'Cormorant Garamond', Georgia, serif !important; font-style: italic;
  line-height: 1.5;
}

/* the Sign Up buttons wear the same gold as the step numbers */
html body.u-body .pm-pricing .btn-dark {
  background-image: linear-gradient(120deg, var(--gold-deep) 0%, var(--gold) 52%, var(--gold-soft) 100%) !important;
  background-color: var(--gold-deep) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 999px !important;
  box-shadow: 0 8px 22px rgba(var(--glow-rgb), .44) !important;
}
html body.u-body .pm-pricing .btn-dark:hover {
  filter: brightness(1.06); transform: translateY(-1px);
  color: #fff !important;
}

/* the preferred plan sits forward */
html body.u-body .pm-pricing .pm-plan--preferred { z-index: 2; }
html body.u-body .pm-pricing .pm-plan--preferred > .bg-light {
  transform: scale(1.045);
  border-color: rgba(var(--glow-rgb), .55) !important;
  box-shadow: 0 2px 6px rgba(58,76,116,.05), 0 22px 54px rgba(58,76,116,.14) !important;
}
html body.u-body .pm-pricing .pm-plan--preferred .flag {
  top: 2px; left: 50%; transform: translateX(-50%);
  z-index: 3; box-shadow: 0 6px 16px rgba(58,76,116,.14);
}
@media (max-width: 991px) {
  html body.u-body .pm-pricing .pm-plan--preferred > .bg-light { transform: none; }
}

/* every round icon mark wears the same gold as the step numbers */
html body.u-body .u-icon.u-icon-circle {
  background-image: linear-gradient(120deg, var(--gold-deep) 0%, var(--gold) 52%, var(--gold-soft) 100%) !important;
  background-color: var(--gold-deep) !important;
  box-shadow: 0 8px 22px rgba(var(--glow-rgb), .30) !important;
  color: #fff !important;
}
html body.u-body .u-icon.u-icon-circle img,
html body.u-body .u-icon.u-icon-circle svg {
  filter: brightness(0) invert(1) !important;   /* the symbol reads white on the gold */
  fill: #fff !important;
}

/* --------------------------------------------------------------------------
   The "Greatest Gift of Love" panel holds three pictures, five seconds each,
   dissolving into the next over a second and a half. The dissolve is deliberately slow — the
   page should never look like it is trying to get your attention (§10).
   -------------------------------------------------------------------------- */
html body.u-body .pm-slideshow {
  position: absolute; inset: 0;
  border-radius: inherit; overflow: hidden;
}
html body.u-body .pm-slideshow span {
  position: absolute; inset: 0;
  background-size: cover; background-repeat: no-repeat;
  opacity: 0;
  animation: pm-photo-fade 19.5s linear infinite !important;
}
html body.u-body .pm-slideshow span:nth-child(1) { animation-delay:  0s !important; }
html body.u-body .pm-slideshow span:nth-child(2) { animation-delay:  6.5s !important; }
html body.u-body .pm-slideshow span:nth-child(3) { animation-delay: 13s !important; }

@keyframes pm-photo-fade {
   0%    { opacity: 0; }
   7.69% { opacity: 1; }   /* a second and a half to dissolve in  */
  33.33% { opacity: 1; }   /* held for five seconds               */
  41.03% { opacity: 0; }   /* a second and a half to dissolve out  */
  100%   { opacity: 0; }
}

/* someone who has asked their computer for less movement gets one still */
@media (prefers-reduced-motion: reduce) {
  html body.u-body .pm-slideshow span { animation: none !important; opacity: 0; }
  html body.u-body .pm-slideshow span:nth-child(1) { opacity: 1; }
}

/* --------------------------------------------------------------------------
   A messenger behind the words on the "Greatest Gift of Love" panel. It is a
   painting held at a whisper. Its edges are feathered into transparency in
   the file itself, so it reads as a halo of light on the panel rather than a
   picture placed in it.
   -------------------------------------------------------------------------- */
html body.u-body #about .u-layout-cell-1 { position: relative; overflow: hidden; }
html body.u-body #about .u-layout-cell-1::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url('../images/angel-halo-soft.png');
  background-repeat: no-repeat;
  background-position: 50% 42%;
  background-size: 92% auto;
  opacity: .085;
  filter: saturate(.22) brightness(1.10) contrast(.88) blur(.7px);
  pointer-events: none;
}
html body.u-body #about .u-layout-cell-1 > .u-container-layout {
  position: relative; z-index: 1;    /* the words stay in front */
}
@media (max-width: 767px) {
  html body.u-body #about .u-layout-cell-1::before { opacity: .07; background-size: 96% auto; }
}

/* --------------------------------------------------------------------------
   The Survivor Checklist banner — it needs air above it, and a heading that
   says what the checklist is for before the question underneath it.
   The id here outranks the page-wide heading rules, which would otherwise
   paint navy type onto a navy band.
   -------------------------------------------------------------------------- */
html body.u-body #survivor-banner { margin-top: 76px; }

html body.u-body #survivor-banner .survivor-eyebrow {
  display: block;
  font-family: 'Poppins', sans-serif !important;
  font-size: 10.5px; font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-soft) !important;
  margin-bottom: 16px;
}
html body.u-body #survivor-banner .survivor-title {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 500 !important;
  font-size: 42px !important;
  line-height: 1.15;
  color: #F5F3ED !important;
  margin: 0 0 .55em;
}
html body.u-body #survivor-banner h3 {
  font-family: 'Poppins', sans-serif !important;
  font-size: 18px !important;
  font-weight: 300 !important;
  line-height: 1.55;
  color: rgba(245,243,237,.88) !important;
}
html body.u-body #survivor-banner p { color: rgba(245,243,237,.72) !important; }
html body.u-body #survivor-banner a {
  border-radius: 999px !important;
  background-image: linear-gradient(120deg, var(--gold-deep) 0%, var(--gold) 52%, var(--gold-soft) 100%) !important;
  background-color: var(--gold-deep) !important;
  color: #fff !important;
  box-shadow: 0 8px 22px rgba(var(--glow-rgb), .34);
}
html body.u-body #survivor-banner a:hover { filter: brightness(1.06); transform: translateY(-1px); }

@media (max-width: 640px) {
  html body.u-body #survivor-banner { margin-top: 48px; }
  html body.u-body #survivor-banner .survivor-title { font-size: 31px !important; }
}

/* --------------------------------------------------------------------------
   "Who we are" plays a video across the whole band. The left cell is a card
   so the words stay readable; the right cell is a window onto the video, not
   a panel — it must not pick up the card treatment.
   -------------------------------------------------------------------------- */
html body.u-body #sec-d8ac .u-layout-cell-2 {
  background: none !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
html body.u-body #sec-d8ac .u-layout-cell-2:hover { transform: none; box-shadow: none !important; }

/* the play mark on the video */
html body.u-body #sec-d8ac .pm-play-film {
  cursor: pointer;
  filter: drop-shadow(0 6px 18px rgba(58,76,116,.45));
  transition: transform .18s ease;
}
html body.u-body #sec-d8ac .u-dialog-link:hover { transform: translateY(-1px) scale(1.03); }

/* the left cell keeps the card, and the video is quieted behind it */
html body.u-body #sec-d8ac .u-video-shading {
  background-image: linear-gradient(0deg, rgba(58,76,116,.30), rgba(58,76,116,.30)) !important;
}

/* --------------------------------------------------------------------------
   "Who we are" — the words and the film are two halves of one row now. The
   film sits in the right-hand column, so it takes the column's width and the
   two match; its edges are rounded and feathered so it does not cut a hard
   rectangle out of the page's light.
   -------------------------------------------------------------------------- */
/* the row runs wide, so both halves are big: the words in one, the film in
   the other, the same width and the same height */
html body.u-body #sec-d8ac .u-sheet {
  max-width: 94% !important;
  width: 94% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  overflow: hidden;
}
html body.u-body #sec-d8ac .u-layout-wrap,
html body.u-body #sec-d8ac .u-layout,
html body.u-body #sec-d8ac .u-layout-row { width: 100% !important; margin: 0 !important; max-width: 100% !important; }
html body.u-body #sec-d8ac .u-layout-cell-1,
html body.u-body #sec-d8ac .u-layout-cell-2 {
  width: 50% !important; max-width: 50% !important; flex: 0 0 50% !important;
  box-sizing: border-box !important;
}
html body.u-body #sec-d8ac .u-container-layout { box-sizing: border-box !important; }
/* the builder pins these cells at 716px tall, which forces the film into a
   squarer box than it is and crops its captions off at the sides */
html body.u-body #sec-d8ac .u-layout-cell-1,
html body.u-body #sec-d8ac .u-layout-cell-2 { min-height: 0 !important; }
html body.u-body #sec-d8ac .u-sheet-1 { min-height: 0 !important; }
html body.u-body #sec-d8ac { padding: 64px 0 !important; }

html body.u-body #sec-d8ac .u-background-video {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: 100% !important;        /* the film matches the card, top to bottom */
  min-height: 100%;
  margin: 0 !important;
  border-radius: 26px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 8px rgba(58,76,116,.06), 0 26px 60px rgba(58,76,116,.18),
              inset 0 1px 0 rgba(255,255,255,.10) !important;
  -webkit-mask-image: radial-gradient(140% 140% at 50% 50%, #000 88%, transparent 100%);
          mask-image: radial-gradient(140% 140% at 50% 50%, #000 88%, transparent 100%);
}
html body.u-body #sec-d8ac .u-background-video .embed-responsive {
  position: absolute; inset: 0;
  width: 100% !important; height: 100% !important;
  border-radius: 26px;
}
html body.u-body #sec-d8ac .u-background-video video {
  position: absolute; inset: 0;
  width: 100% !important; height: 100% !important;
  object-fit: cover;
  border-radius: 26px;
}
html body.u-body #sec-d8ac .u-video-shading {
  background-image: linear-gradient(0deg, rgba(58,76,116,.10), rgba(58,76,116,.10)) !important;
  border-radius: 26px;
}

/* the play mark rests in the middle of the film */
html body.u-body #sec-d8ac .u-container-layout-2 { position: relative; }
html body.u-body #sec-d8ac .pm-play-film {
  position: absolute !important;
  inset: 0; margin: auto;
  width: 96px; height: 96px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  filter: drop-shadow(0 8px 22px rgba(58,76,116,.40));
  z-index: 2;
}
html body.u-body #sec-d8ac .pm-play-film img { width: 96px; height: auto; }

/* the gutter lives inside the right column — a margin on the left column would
   push the two cells past the row's width and wrap them */
html body.u-body #sec-d8ac .u-layout-cell-2 { align-items: stretch !important; }
html body.u-body #sec-d8ac .u-container-layout-1 { padding: 34px 38px !important; }
html body.u-body #sec-d8ac .u-layout-cell-1 .u-text {
  font-size: 15px !important; line-height: 1.6 !important;
}
html body.u-body #sec-d8ac .u-container-layout-2 {
  padding: 0 0 0 28px !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  align-self: stretch !important;
  flex: 1 1 auto !important;
}
@media (max-width: 991px) {
  html body.u-body #sec-d8ac { padding: 40px 0 !important; }
  html body.u-body #sec-d8ac .u-sheet { max-width: 100% !important; width: 100% !important; padding: 0 16px !important; }
  html body.u-body #sec-d8ac .u-layout-row { flex-wrap: wrap !important; }
  html body.u-body #sec-d8ac .u-layout-cell-1,
  html body.u-body #sec-d8ac .u-layout-cell-2 {
    width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important;
  }
  html body.u-body #sec-d8ac .u-container-layout-1 { padding: 26px 22px !important; }
  html body.u-body #sec-d8ac .u-container-layout-2 { padding: 20px 0 0 !important; height: auto !important; }
  html body.u-body #sec-d8ac .u-background-video {
    height: auto !important; min-height: 0 !important; aspect-ratio: 16 / 9;
  }
  html body.u-body #sec-d8ac .u-dialog-link,
  html body.u-body #sec-d8ac .pm-play-film { width: 72px; height: 72px; }
  html body.u-body #sec-d8ac .pm-play-film img { width: 72px; }
}

html body.u-body #sec-d8ac .u-layout-cell-2 {
  background: none !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
html body.u-body #sec-d8ac .u-layout-cell-2:hover { transform: none; box-shadow: none !important; }

/* the play mark on the video */
html body.u-body #sec-d8ac .pm-play-film {
  cursor: pointer;
  filter: drop-shadow(0 6px 18px rgba(58,76,116,.45));
  transition: transform .18s ease;
}
html body.u-body #sec-d8ac .u-dialog-link:hover { transform: translateY(-1px) scale(1.03); }

/* the left cell keeps the card, and the video is quieted behind it */
html body.u-body #sec-d8ac .u-video-shading {
  background-image: linear-gradient(0deg, rgba(58,76,116,.30), rgba(58,76,116,.30)) !important;
}

/* --------------------------------------------------------------------------
   "Who we are" — the words and the film are two halves of one row now. The
   film sits in the right-hand column, so it takes the column's width and the
   two match; its edges are rounded and feathered so it does not cut a hard
   rectangle out of the page's light.
   -------------------------------------------------------------------------- */
html body.u-body #sec-d8ac .u-background-video {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9;
  margin: 0 !important;
  border-radius: 26px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 8px rgba(58,76,116,.06), 0 26px 60px rgba(58,76,116,.18),
              inset 0 1px 0 rgba(255,255,255,.10) !important;
  -webkit-mask-image: radial-gradient(135% 135% at 50% 50%, #000 86%, transparent 100%);
          mask-image: radial-gradient(135% 135% at 50% 50%, #000 86%, transparent 100%);
}
html body.u-body #sec-d8ac .u-background-video .embed-responsive {
  position: absolute; inset: 0;
  width: 100% !important; height: 100% !important;
  border-radius: 26px;
}
html body.u-body #sec-d8ac .u-background-video video {
  position: absolute; inset: 0;
  width: 100% !important; height: 100% !important;
  object-fit: cover;
  border-radius: 26px;
}
html body.u-body #sec-d8ac .u-video-shading {
  background-image: linear-gradient(0deg, rgba(58,76,116,.10), rgba(58,76,116,.10)) !important;
  border-radius: 26px;
}

/* the play mark rests in the middle of the film */
html body.u-body #sec-d8ac .u-container-layout-2 { position: relative; }
html body.u-body #sec-d8ac .pm-play-film {
  position: absolute !important;
  inset: 0; margin: auto;
  width: 92px; height: 92px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  filter: drop-shadow(0 8px 22px rgba(58,76,116,.40));
}
html body.u-body #sec-d8ac .u-dialog-link img { width: 92px; height: auto; }

/* the two columns as one row: equal width, a gutter between them, and the
   words centred against the film */
/* the gutter lives inside the right column — a margin on the left column would
   push the two cells past the row's width and wrap them */
html body.u-body #sec-d8ac .u-layout-cell-2 { align-items: center !important; }
html body.u-body #sec-d8ac .u-container-layout-2 {
  padding: 0 0 0 26px !important;
  display: block !important;
  width: 100% !important;
  flex: 1 1 auto !important;
}
@media (max-width: 991px) {
  html body.u-body #sec-d8ac .u-container-layout-2 { padding: 24px 0 0 !important; }
}

html body.u-body #sec-d8ac .u-layout-cell-2 {
  background: none !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
html body.u-body #sec-d8ac .u-layout-cell-2:hover { transform: none; box-shadow: none !important; }

/* the play mark on the video */
html body.u-body #sec-d8ac .pm-play-film {
  cursor: pointer;
  filter: drop-shadow(0 6px 18px rgba(58,76,116,.45));
  transition: transform .18s ease;
}
html body.u-body #sec-d8ac .u-dialog-link:hover { transform: translateY(-1px) scale(1.03); }

/* the left cell keeps the card, and the video is quieted behind it */
html body.u-body #sec-d8ac .u-video-shading {
  background-image: linear-gradient(0deg, rgba(58,76,116,.30), rgba(58,76,116,.30)) !important;
}

/* The film stops being a full-bleed backdrop and becomes a panel on the right,
   beside the words. Its own captions then play in the clear, and the left of
   the band is the page's own light rather than a dark slab. */

html body.u-body #sec-d8ac .u-video-shading {
  background-image: linear-gradient(0deg, rgba(58,76,116,.12), rgba(58,76,116,.12)) !important;
  border-radius: 20px;
}



/* --------------------------------------------------------------------------
   The film that opens over the page when a hero card is clicked
   -------------------------------------------------------------------------- */
.pm-lightbox {
  position: fixed; inset: 0; z-index: 99999;
  background: rgba(47,62,96,.78);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 6vh 5vw;
}
.pm-lightbox__frame {
  position: relative;
  width: min(1100px, 100%);
  aspect-ratio: 16 / 9;
  border-radius: 20px;
  overflow: hidden;
  background: #10151f;
  box-shadow: 0 40px 90px rgba(20,26,40,.55);
}
.pm-lightbox iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pm-lightbox__close {
  position: absolute; top: -46px; right: -4px;
  width: 38px; height: 38px; line-height: 1;
  border: 0; border-radius: 999px;
  background: rgba(255,255,255,.9); color: #3A4C74;
  font-size: 22px; cursor: pointer;
  transition: background .18s ease, transform .18s ease;
}
.pm-lightbox__close:hover { background: #fff; transform: translateY(-1px); }
@media (max-width: 700px) {
  .pm-lightbox { padding: 0 12px; }
  .pm-lightbox__close { top: -44px; right: 0; }
}

/* the cards in the hero are buttons now */
.pm-hero .pm-card__video { cursor: pointer; transition: transform .18s ease; }
.pm-hero .pm-card__video:hover .pm-card__play { transform: scale(1.08); }
.pm-hero .pm-card__video:focus-visible {
  outline: none; box-shadow: 0 0 0 4px rgba(217,184,113,.45);
}

/* --------------------------------------------------------------------------
   The team, beside the words in "Who we are" (§5, §8 — a card, round marks,
   Cormorant for the names, Poppins for the roles)
   -------------------------------------------------------------------------- */
html body.u-body .pm-team {
  height: 100%;
  display: flex; flex-direction: column; justify-content: center;
  background-image: linear-gradient(180deg, #FFFFFE 0%, #FCFBF7 100%);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--card-shadow);
  padding: 34px 30px 30px;
  text-align: center;
}
html body.u-body .pm-team__eyebrow {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-size: 10.5px; font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; color: var(--gold-ink);
  margin-bottom: 26px;
}
html body.u-body .pm-team__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
html body.u-body .pm-team__person { margin: 0; }
html body.u-body .pm-team__photo {
  width: 116px; height: 116px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background-size: cover;
  background-position: 50% 30%;
  filter: saturate(.62) contrast(.98);
  box-shadow: 0 1px 2px rgba(58,76,116,.04), 0 10px 26px rgba(58,76,116,.14);
  outline: 4px solid rgba(255,255,255,.9);
  outline-offset: -1px;
  transition: transform .18s ease, box-shadow .18s ease;
}
html body.u-body .pm-team__person:hover .pm-team__photo {
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(58,76,116,.05), 0 16px 34px rgba(58,76,116,.18);
}
html body.u-body .pm-team__person figcaption { display: block; }
html body.u-body .pm-team__person b {
  display: block;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 20px; font-weight: 500; color: var(--navy);
  line-height: 1.25;
}
html body.u-body .pm-team__person span {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-size: 11.5px; font-weight: 300; color: var(--muted);
  letter-spacing: .04em; margin-top: 3px;
}

@media (max-width: 1150px) {
  html body.u-body .pm-team__photo { width: 94px; height: 94px; }
  html body.u-body .pm-team__person b { font-size: 18px; }
}
@media (max-width: 560px) {
  html body.u-body .pm-team__grid { gap: 16px; }
  html body.u-body .pm-team__photo { width: 84px; height: 84px; }
}

/* --------------------------------------------------------------------------
   The gold band across the foot of the "Greatest Gift of Love" card
   -------------------------------------------------------------------------- */
html body.u-body #about .u-layout-cell-1,
html body.u-body #carousel_1dc4 .u-layout-cell-2,
html body.u-body #sec-232c .u-layout-cell-1,
html body.u-body .u-layout-cell:has(> .pm-learn-more) { position: relative; overflow: hidden; }
html body.u-body #about .u-container-layout-1,
html body.u-body #carousel_1dc4 .u-container-layout-2,
html body.u-body #sec-232c .u-container-layout-1 { padding-bottom: 82px !important; }
html body.u-body .pm-learn-more {
  position: absolute; left: 0; right: 0; bottom: 0;
  z-index: 2;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 17px 20px;
  font-family: 'Poppins', sans-serif !important;
  font-size: 14px; font-weight: 500; letter-spacing: .04em;
  color: #fff !important;
  text-decoration: none;
  background-image: linear-gradient(120deg, var(--gold-deep) 0%, var(--gold) 52%, var(--gold-soft) 100%);
  border-radius: 0 0 20px 20px;
  cursor: pointer;
  transition: filter .18s ease;
}
html body.u-body .pm-learn-more::after {
  content: '';
  width: 0; height: 0;
  border-left: 8px solid #fff;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  margin-left: 2px;
}
html body.u-body .pm-learn-more:hover { filter: brightness(1.06); color: #fff !important; }
html body.u-body .pm-learn-more:focus-visible {
  outline: none; box-shadow: 0 0 0 4px rgba(var(--glow-rgb), .45);
}

/* --------------------------------------------------------------------------
   The F.A.Q. answers inside an accordion sit in a grid with a 20px gutter,
   which the builder makes by pulling the row 10px wider than its box. Paint
   the card on the cell and it hangs 10px outside the panel on each side — so
   the card is the inner box instead, and the gutter stays a gutter.
   -------------------------------------------------------------------------- */
html body.u-body .u-accordion-pane .u-layout-cell.u-container-style {
  background: none !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
html body.u-body .u-accordion-pane .u-layout-cell > .u-container-layout {
  height: 100%;                       /* so the answers in a row match */
  background-image: linear-gradient(180deg, #FFFFFE 0%, #FCFBF7 100%) !important;
  border: 1px solid var(--line) !important;
  border-radius: 20px !important;
  box-shadow: var(--card-shadow) !important;
  padding: 24px 26px !important;
}
html body.u-body .u-accordion-pane .u-layout-cell:hover > .u-container-layout {
  box-shadow: 0 2px 4px rgba(58,76,116,.04), 0 18px 44px rgba(58,76,116,.10) !important;
}
html body.u-body .u-accordion-pane .u-group { background: none !important; border: 0 !important; box-shadow: none !important; }

/* answers side by side in a row match each other, top and bottom */
html body.u-body .u-accordion-pane .u-layout-row { align-items: stretch !important; }
html body.u-body .u-accordion-pane .u-layout-row > .u-layout-cell,
html body.u-body .u-accordion-pane .u-layout-col > div > .u-layout-row > .u-layout-cell {
  align-self: stretch !important;
}
html body.u-body .u-accordion-pane .u-layout-cell > .u-container-layout { align-self: stretch !important; flex: 1 1 auto; }

/* The builder pins each F.A.Q. panel and its inner group to a fixed height
   (799px, 520px, 1421px …), which leaves a stretch of empty white under the
   answers. Let them be as tall as the answers need. */
html body.u-body .u-accordion-pane,
html body.u-body .u-accordion-pane .u-group,
html body.u-body .u-accordion-pane .u-layout-cell,
html body.u-body .u-accordion-pane .u-repeater,
html body.u-body .u-accordion-pane .u-repeater-item {
  min-height: 0 !important;
  height: auto !important;
}
html body.u-body .u-accordion-pane .u-container-layout-1 { padding-bottom: 8px !important; }

/* the same fixed heights sit on the panels outside the accordion */
html body.u-body .u-group,
html body.u-body .u-group-elements { min-height: 0 !important; height: auto !important; }

/* answers in the same row of a grid match each other too */
html body.u-body .u-accordion-pane .u-repeater { align-items: stretch !important; }
html body.u-body .u-accordion-pane .u-repeater-item { height: auto !important; align-self: stretch !important; }
html body.u-body .u-accordion-pane .u-repeater-item > .u-container-layout { height: 100%; }

/* The builder makes the gutter by pulling the row 10px wider than the panel
   on each side, which hangs the answers outside the panel. Put the row back
   inside and space the answers with padding instead. */
html body.u-body .u-accordion-pane .u-layout {
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
}
html body.u-body .u-accordion-pane .u-layout-cell {
  padding: 0 10px 20px !important;
  box-sizing: border-box !important;
}
html body.u-body .u-accordion-pane .u-layout-col > div:last-child .u-layout-cell { padding-bottom: 0 !important; }

/* The builder freezes each section's sheet at the height it happened to be in
   the editor (845px, 880px, …), which leaves large empty bands under short
   content. Let every sheet be as tall as what is in it. */
html body.u-body .u-sheet { min-height: 0 !important; }

/* The YouTube mark is a white PNG while Instagram and X are inline SVG, so a
   filter can never match them exactly. Paint the PNG's shape in the same
   colour instead, and it sits with the others. */
html body.u-body .u-social-icons .u-social-custom {
  -webkit-mask: url('../images/3820269-1885a068.png') no-repeat 50% / contain;
          mask: url('../images/3820269-1885a068.png') no-repeat 50% / contain;
  background-color: var(--navy-soft) !important;
  background-image: none !important;
  transition: background-color .18s ease;
}
html body.u-body .u-social-icons .u-social-custom img { visibility: hidden; }
html body.u-body .u-social-icons a:hover .u-social-custom { background-color: var(--gold-ink) !important; }

/* the wordmark sits on each card's screen, under the play button */
html body.u-body .pm-hero .pm-card__video { position: relative; }
html body.u-body .pm-hero .pm-card__video::after {
  content: '';
  position: absolute;
  inset: 9% 7%;                     /* fills the player's screen */
  background: url('../images/Potters_messages_logo_black.png') no-repeat 50% 50% / contain;
  opacity: .38;
  pointer-events: none;
  z-index: 1;
}
html body.u-body .pm-hero .pm-card__play { position: relative; z-index: 2; }

/* one wordmark is enough — it stays in the bar, not again under it */
html body.u-body .pm-hero .pm-hero__logo { display: none !important; }

/* the add-on that sits under the plans, not inside one */
html body.u-body .pm-addon {
  max-width: 780px; margin: 8px auto 0;
  display: flex; align-items: center; gap: 18px;
  padding: 18px 26px;
  border: 1px solid rgba(var(--glow-rgb), .42);
  background: rgba(var(--glow-rgb), .10);
  border-radius: 16px;
  text-align: left;
}
html body.u-body .pm-addon__label {
  flex: none;
  font-family: 'Poppins', sans-serif;
  font-size: 10.5px; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--gold-ink);
}
html body.u-body .pm-addon__text {
  margin: 0; font-size: 14px; font-weight: 300; line-height: 1.6; color: var(--ink);
}
html body.u-body .pm-addon__text b { font-weight: 500; color: var(--navy); }
@media (max-width: 700px) {
  html body.u-body .pm-addon { flex-direction: column; align-items: flex-start; gap: 8px; text-align: left; }
}