/* =============================================================================
   Prins & Prins — Home v2 overrides
   Sits on top of site.css. Replaces ONLY the hero block + adds the new
   "rings editorial" and "house edit" preview row. Below those sections,
   v1 is kept intact (services strip, collection slideshow, full celebrity
   grid, reviews carousel, map). Palette nudges shift gold accents toward
   the brand green where it does not break v1.
   ============================================================================= */

:root {
  --pp-green-wall:    #BCC9B7;
  --pp-green-mist:    #E4ECDF;
  --pp-green-deep:    #1F3D2E;
  --pp-green-emerald: #1B3A2C;
  --pp-ink-v2:        #1A211C;
  --pp-paper-v2:      #FBFBF7;
  --pp-hairline:      rgba(26, 33, 28, 0.12);
}

/* ============================================================================
   HERO V2 — replaces the v1 video hero. Same .hero class, fully overridden.
   ============================================================================ */
body .hero {
  background: var(--pp-green-emerald);
  min-height: 100vh;
  height: 100vh;
  max-height: 1100px;
  position: relative;
  overflow: hidden;
}
body .hero #sparkleCanvas,
body .hero .hero-video,
body .hero .hero-overlay {
  display: none !important;
}
body .hero .hero-v2-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 60% center;
}
body .hero .hero-v2-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.45) 100%),
    linear-gradient(90deg, rgba(0,0,0,0.18) 0%, transparent 42%);
  pointer-events: none;
  z-index: 1;
}
body .hero .hero-content {
  position: absolute;
  left: 6%;
  top: 11%;
  bottom: auto;
  max-width: 820px;
  width: 50%;
  z-index: 2;
  text-align: left;
  padding: 0;
}
body .hero .hero-eyebrow-v2 {
  display: inline-block;
  font-size: 0.72rem; letter-spacing: 0.36em; text-transform: uppercase;
  color: #FFFFFF; font-weight: 500;
  padding-bottom: 14px; margin-bottom: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.4);
}
body .hero .hero-h-v2 {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 4.8vw, 4.2rem);
  font-weight: 400; line-height: 1.06;
  letter-spacing: -0.015em;
  color: #fff;
  margin: 0 0 20px;
  text-shadow: 0 4px 36px rgba(0, 0, 0, 0.55);
  max-width: 100%;
  /* 25 Aug 2026, Stefan: "too much up and down animation movement".
     heroHFloat removed. The soft light pulse stays. */
  animation: heroHFlash 4.4s ease-in-out infinite;
}
body .hero .hero-h-v2 em {
  font-style: italic;
  color: #E8C16A;
  background: none !important;
  -webkit-text-fill-color: #E8C16A !important;
  /* alternates with "diamonds" below: 5.2s cycle, this one leads */
  animation: heroEmFlashGold 5.2s ease-in-out 0s infinite;
  text-shadow: 0 0 18px rgba(228, 194, 119, 0.45);
}
@keyframes heroEmFlashGold {
  0%, 100% {
    color: #E8C16A;
    -webkit-text-fill-color: #E8C16A;
    text-shadow:
      0 4px 24px rgba(0, 0, 0, 0.45),
      0 0 0 rgba(255, 241, 196, 0);
  }
  50% {
    color: #FFF1C4;
    -webkit-text-fill-color: #FFF1C4;
    text-shadow:
      0 4px 24px rgba(0, 0, 0, 0.45),
      0 0 22px rgba(255, 241, 196, 0.95),
      0 0 48px rgba(212, 175, 110, 0.65);
  }
}
/* "diamonds" — gold flash, mirrors the star treatment for a brand pop.
   padding-right preserves the space the word-anim splitter strips. */
body .hero .hero-h-v2 .hero-h-gold {
  display: inline-block;
  font-style: normal;
  font-weight: 500;
  color: #E8C16A;
  -webkit-text-fill-color: #E8C16A;
  /* half a cycle behind "beautiful", so the two light up in turn */
  animation: heroHGoldFlash 5.2s ease-in-out 2.6s infinite;
  text-shadow: 0 0 18px rgba(228, 194, 119, 0.45);
  padding-right: 0.32em;
}
@keyframes heroHGoldFlash {
  0%, 100% {
    color: #E8C16A;
    -webkit-text-fill-color: #E8C16A;
    text-shadow:
      0 4px 24px rgba(0, 0, 0, 0.45),
      0 0 0 rgba(255, 241, 196, 0);
  }
  50% {
    color: #FFF1C4;
    -webkit-text-fill-color: #FFF1C4;
    text-shadow:
      0 4px 24px rgba(0, 0, 0, 0.45),
      0 0 22px rgba(255, 241, 196, 0.95),
      0 0 48px rgba(212, 175, 110, 0.65);
  }
}

/* Flash — a soft white glow on the whole headline that pulses every ~4s */
@keyframes heroHFlash {
  0%, 100% {
    text-shadow:
      0 4px 36px rgba(0, 0, 0, 0.55),
      0 0 0px rgba(255, 255, 255, 0);
  }
  50% {
    text-shadow:
      0 4px 36px rgba(0, 0, 0, 0.55),
      0 0 28px rgba(255, 255, 255, 0.55),
      0 0 60px rgba(228, 236, 223, 0.35);
  }
}
/* Em-only flash — sage glow that pulses faster for the italic word */
@keyframes heroEmFlash {
  0%, 100% {
    text-shadow:
      0 0 0 rgba(188, 201, 183, 0),
      0 4px 24px rgba(0, 0, 0, 0.45);
  }
  50% {
    text-shadow:
      0 0 22px rgba(228, 236, 223, 0.9),
      0 0 48px rgba(188, 201, 183, 0.65),
      0 4px 24px rgba(0, 0, 0, 0.45);
  }
}
@media (prefers-reduced-motion: reduce) {
  body .hero .hero-h-v2,
  body .hero .hero-h-v2 em,
  body .hero .hero-h-v2 .hero-h-gold { animation: none; }
}
body .hero .hero-sub-v2 {
  font-size: clamp(1.05rem, 1.18vw, 1.18rem);
  line-height: 1.65;
  color: #FFFFFF;
  max-width: 580px;
  font-weight: 300;
  margin: 0 0 32px;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.45);
}
body .hero .hero-actions {
  display: flex; gap: 16px; flex-wrap: wrap;
  margin: 0;
}
/* HERO CTAs
   4 Aug audit: "Glow/lighting effects on House Edit and Enquire buttons.
   Remove the glow effect; use a simple solid or outline state change on
   hover instead." The floating motion, the travelling shine sweep and the
   glass highlight overlay are all gone. What is left is geometry, one
   legibility shadow, and a clean colour swap on hover. */
body .hero .btn-v2 {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 0.66rem; letter-spacing: 0.26em; text-transform: uppercase;
  font-weight: 600; padding: 16px 30px;
  transition: background 0.3s, border-color 0.3s, color 0.3s;
  text-decoration: none;
  position: relative;
  animation: none;
}
body .hero .btn-v2-primary {
  background: #fff;
  color: var(--pp-green-deep);
  border: 1px solid #fff;
  box-shadow: 0 10px 26px -18px rgba(0, 0, 0, 0.55);
}
body .hero .btn-v2-primary:hover,
body .hero .btn-v2-primary:focus-visible {
  background: var(--pp-green-deep);
  color: #fff;
  border-color: #fff;
}
body .hero .btn-v2-ghost {
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 10px 26px -18px rgba(0, 0, 0, 0.55);
}
body .hero .btn-v2-ghost:hover,
body .hero .btn-v2-ghost:focus-visible {
  background: rgba(255, 255, 255, 0.16);
  border-color: #fff;
}

body .hero .hero-actions .btn-gold,
body .hero .hero-actions .btn-outline { display: none !important; }

/* Floating crest above the hero text — large, white, with a soft halo so the
   silhouette reads cleanly on the emerald backdrop. */
body .hero .hero-v2-crest {
  width: 150px; height: auto;
  margin: 0 0 32px;
  opacity: 1;
  filter:
    drop-shadow(0 0 18px rgba(255, 255, 255, 0.45))
    drop-shadow(0 0 38px rgba(188, 201, 183, 0.40))
    drop-shadow(0 6px 22px rgba(0, 0, 0, 0.55));
  animation:
    heroCrestFloat 7s ease-in-out infinite alternate,
    heroCrestGlow  4.2s ease-in-out infinite,
    riseV2 1.4s cubic-bezier(0.25, 0.1, 0.25, 1) 0.1s both;
}
@keyframes heroCrestFloat {
  from { transform: translateY(0); }
  to   { transform: translateY(-8px); }
}
@keyframes heroCrestGlow {
  0%, 100% {
    filter:
      drop-shadow(0 0 18px rgba(255, 255, 255, 0.45))
      drop-shadow(0 0 38px rgba(188, 201, 183, 0.40))
      drop-shadow(0 6px 22px rgba(0, 0, 0, 0.55));
  }
  50% {
    filter:
      drop-shadow(0 0 28px rgba(255, 255, 255, 0.70))
      drop-shadow(0 0 56px rgba(228, 236, 223, 0.55))
      drop-shadow(0 6px 26px rgba(0, 0, 0, 0.55));
  }
}
@keyframes riseV2 {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  body .hero .hero-v2-crest { animation: none; }
}

/* Floating particle canvas */
body .hero .hero-v2-particles {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 1;
  pointer-events: none;
}

/* Hero trust block — one pane of glass. The ratings strip and the certification
   row are two zones of the SAME surface, divided by a hairline, not two boxes
   stacked inside a frame. Nothing inside carries its own fill: the emerald and
   the model behind read straight through, softened by the backdrop blur. */
body .hero .hero-v2-trust {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  margin-bottom: 32px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 18px;
  background: linear-gradient(165deg,
    rgba(255, 255, 255, 0.07) 0%,
    rgba(10, 30, 22, 0.16) 42%,
    rgba(6, 20, 14, 0.22) 100%);
  backdrop-filter: blur(10px) saturate(135%);
  -webkit-backdrop-filter: blur(10px) saturate(135%);
  box-shadow:
    0 26px 60px -34px rgba(0, 0, 0, 0.62),
    inset 0 1px 0 rgba(255, 255, 255, 0.20),
    inset 0 0 0 1px rgba(228, 194, 119, 0.09);
  overflow: hidden;
}

/* Zone 1 — the three ratings, each in an equal bay with a hairline between. */
body .hero .hero-v2-ratings {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  padding: 17px 26px 16px;
  background: transparent;
  border: 0;
}
/* Three equal bays, each cluster centred in its own third. Both rows share this
   rhythm, so the hairlines land exactly on the column breaks and the row below
   reads as the same grid rather than a separate strip. Only from 721px up: the
   mobile hero drops the panel and lays these out on its own terms, and forcing
   thirds there squeezed GOOGLE REVIEWS onto two lines at 360px. */
@media (min-width: 721px) {
  body .hero .hr-v2-item { flex: 1 1 0; justify-content: center; min-width: 0; }
}

body .hero .hr-v2-item {
  display: inline-flex; align-items: center; gap: 12px;
  color: #FFFFFF;
}
body .hero .hr-v2-stack {
  display: inline-flex; flex-direction: column; gap: 2px;
  align-items: flex-start;
  line-height: 1;
}
body .hero .hr-v2-logo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  font-family: var(--serif); font-size: 1.32rem; font-weight: 700;
  background: #fff; color: var(--pp-green-deep);
  letter-spacing: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  flex-shrink: 0;
}
body .hero .hr-v2-ta {
  background: var(--pp-green-deep); color: #fff; font-size: 0.92rem;
  letter-spacing: 0.04em;
}
body .hero .hr-v2-pla {
  background: transparent;
  border: 1.5px solid var(--pp-green-wall);
  color: var(--pp-green-wall);
  font-size: 0.86rem; font-weight: 700;
  border-radius: 50%;
  letter-spacing: 0;
}
body .hero .hr-v2-score {
  font-family: var(--serif);
  font-size: 1.32rem;
  font-weight: 500;
  letter-spacing: 0;
  color: #FFFFFF;
  line-height: 1;
}
body .hero .hr-v2-score-pla {
  font-size: 1.04rem;
  letter-spacing: 0.01em;
  color: var(--pp-green-wall);
}
body .hero .hr-v2-stars {
  color: #E8C16A; font-size: 0.78rem; letter-spacing: 2px;
  line-height: 1;
}
body .hero .hr-v2-platform {
  font-size: 0.63rem; letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.80);
  font-weight: 500;
  line-height: 1.35;
  text-align: center;
}
body .hero .hr-v2-platform-wide { letter-spacing: 0.18em; }
body .hero .hr-v2-sep {
  flex: 0 0 auto;
  width: 1px; height: 40px;
  background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.28) 50%, transparent 100%);
}

/* Zone 2 — the certifications. No fill of its own: the only thing marking it
   off from the ratings above is a gold hairline that fades out at both ends,
   so the eye reads one surface with two registers. */
body .hero .hero-v2-certs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 14px 22px 15px;
  border-top: 0;
  background: transparent;
  position: relative;
  overflow: hidden;
}
body .hero .hero-v2-certs::before {
  content: '';
  position: absolute;
  top: 0; left: 26px; right: 26px;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(228, 194, 119, 0) 0%,
    rgba(228, 194, 119, 0.34) 16%,
    rgba(228, 194, 119, 0.50) 50%,
    rgba(228, 194, 119, 0.34) 84%,
    rgba(228, 194, 119, 0) 100%);
}
/* A slow gold sheen sweeps the row left → right continuously */
body .hero .hero-v2-certs::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    transparent 0%,
    transparent 38%,
    rgba(255, 241, 196, 0.10) 50%,
    transparent 62%,
    transparent 100%);
  background-size: 220% 100%;
  background-position: 120% 0;
  animation: heroCertsSheen 7s ease-in-out infinite;
  mix-blend-mode: screen;
}
@keyframes heroCertsSheen {
  0%   { background-position: 120% 0; }
  100% { background-position: -120% 0; }
}
body .hero .hc-v2-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: 'Inter', sans-serif;
  /* Sized so all three sit on a single line inside the 720px text column —
     the three-line "NATURAL / DIAMONDS / ONLY" rag was what made the old bar
     look thrown together. */
  font-size: 0.59rem;
  letter-spacing: 0.115em;
  text-align: center;
  text-transform: uppercase;
  color: #F4E4BC;
  font-weight: 600;
  line-height: 1;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45), 0 0 14px rgba(212, 175, 110, 0.28);
  position: relative;
  z-index: 1;
}
body .hero .hc-v2-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px; height: 17px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, #FFF1C4 0%, #E8C16A 55%, #C9A55C 100%);
  color: #1F3D2E;
  box-shadow:
    0 0 0 1px rgba(228, 194, 119, 0.55),
    0 0 12px rgba(228, 194, 119, 0.5);
  flex-shrink: 0;
  animation: heroCertMarkPulse 2.6s ease-in-out infinite;
}
body .hero .hc-v2-mark svg { width: 10px; height: 10px; stroke-width: 3; }
@keyframes heroCertMarkPulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(228, 194, 119, 0.55), 0 0 10px rgba(228, 194, 119, 0.4); }
  50%      { box-shadow: 0 0 0 1px rgba(255, 241, 196, 0.9),  0 0 22px rgba(255, 241, 196, 0.85); }
}
body .hero .hc-v2-dot { display: none !important; }
@media (min-width: 721px) {
  body .hero .hc-v2-item { flex: 1 1 0; min-width: 0; }
}

/* The hero copy column is 50% of the viewport, so the panel only has room for
   three single-line credentials from roughly 1240px up. Above that they sit on
   one line each; below, every column wraps to two centred lines together, which
   keeps the three-column rhythm instead of ragging. */
@media (min-width: 1330px) {
  body .hero .hero-v2-trust .hr-v2-platform { white-space: nowrap !important; line-height: 1 !important; }
  body .hero .hero-v2-trust .hc-v2-item { white-space: nowrap !important; }
  /* One line each, so the authored break is suppressed. */
  body .hero .hero-v2-trust .hc-v2-br { display: none; }
}
@media (max-width: 1329px) {
  body .hero .hero-v2-trust .hero-v2-ratings { padding: 15px 18px 14px; }
  body .hero .hero-v2-trust .hr-v2-item { gap: 10px; }
  body .hero .hero-v2-trust .hr-v2-logo { width: 28px !important; height: 28px !important; font-size: 0.96rem !important; }
  body .hero .hero-v2-trust .hr-v2-ta { font-size: 0.78rem !important; }
  body .hero .hero-v2-trust .hr-v2-score { font-size: 1.14rem !important; }
  body .hero .hero-v2-trust .hr-v2-score-pla { font-size: 0.9rem !important; }
  body .hero .hero-v2-trust .hr-v2-stars { font-size: 0.68rem !important; letter-spacing: 1.5px !important; }
  body .hero .hero-v2-trust .hr-v2-platform { font-size: 0.53rem !important; letter-spacing: 0.08em !important; }
  body .hero .hero-v2-trust .hr-v2-sep { height: 34px; }
  body .hero .hero-v2-trust .hero-v2-certs { padding: 12px 18px 13px; }
  body .hero .hero-v2-trust .hero-v2-certs::before { left: 18px; right: 18px; }
  body .hero .hero-v2-trust .hc-v2-item { font-size: 0.55rem !important; letter-spacing: 0.09em !important; gap: 8px; line-height: 1.45; }
  body .hero .hero-v2-trust .hc-v2-br { display: inline; }
  body .hero .hero-v2-trust .hc-v2-mark { width: 16px; height: 16px; }
  body .hero .hero-v2-trust .hc-v2-mark svg { width: 9px; height: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  body .hero .hero-v2-certs::after,
  body .hero .hc-v2-mark { animation: none !important; }
}

@media (max-width: 980px) {
  body .hero .hero-v2-trust .hero-v2-ratings { gap: 0; padding: 13px 12px 12px; }
  body .hero .hero-v2-trust .hr-v2-item { gap: 8px; }
  body .hero .hero-v2-trust .hr-v2-logo { width: 25px !important; height: 25px !important; font-size: 0.86rem !important; }
  body .hero .hero-v2-trust .hr-v2-ta { font-size: 0.68rem !important; }
  body .hero .hero-v2-trust .hr-v2-score { font-size: 1.0rem !important; }
  body .hero .hero-v2-trust .hr-v2-score-pla { font-size: 0.8rem !important; }
  body .hero .hero-v2-trust .hr-v2-stars { font-size: 0.6rem !important; letter-spacing: 1px !important; }
  body .hero .hero-v2-trust .hr-v2-platform { font-size: 0.51rem !important; letter-spacing: 0.04em !important; }
  body .hero .hero-v2-trust .hr-v2-sep { height: 30px; }
  body .hero .hero-v2-trust .hero-v2-certs { gap: 0; padding: 10px 10px 11px; }
  body .hero .hero-v2-trust .hero-v2-certs::before { left: 12px; right: 12px; }
  body .hero .hero-v2-trust .hc-v2-item { font-size: 0.52rem !important; letter-spacing: 0.05em !important; gap: 6px; line-height: 1.5; }
  body .hero .hero-v2-trust .hc-v2-mark { width: 14px; height: 14px; }
  body .hero .hero-v2-trust .hc-v2-mark svg { width: 8px; height: 8px; }
}

@media (min-width: 721px) and (max-width: 820px) {
  body .hero .hero-v2-trust .hero-v2-ratings { padding: 12px 10px 11px; }
  body .hero .hero-v2-trust .hr-v2-item { gap: 7px; }
  body .hero .hero-v2-trust .hr-v2-logo { width: 22px !important; height: 22px !important; font-size: 0.76rem !important; }
  body .hero .hero-v2-trust .hr-v2-ta { font-size: 0.6rem !important; }
  body .hero .hero-v2-trust .hr-v2-score { font-size: 0.92rem !important; }
  body .hero .hero-v2-trust .hr-v2-score-pla { font-size: 0.74rem !important; }
  body .hero .hero-v2-trust .hr-v2-stars { font-size: 0.55rem !important; letter-spacing: 0.5px !important; }
  body .hero .hero-v2-trust .hr-v2-platform { font-size: 0.46rem !important; letter-spacing: 0.02em !important; white-space: nowrap !important; }
  body .hero .hero-v2-trust .hr-v2-sep { height: 27px; }
  body .hero .hero-v2-trust .hero-v2-certs { padding: 9px 8px 10px; }
  body .hero .hero-v2-trust .hero-v2-certs::before { left: 10px; right: 10px; }
  body .hero .hero-v2-trust .hc-v2-item { font-size: 0.48rem !important; letter-spacing: 0.04em !important; gap: 5px; }
  body .hero .hero-v2-trust .hc-v2-mark { width: 13px; height: 13px; }
  body .hero .hero-v2-trust .hc-v2-mark svg { width: 7px; height: 7px; }
}

@media (max-width: 720px) {
  body .hero .hero-v2-trust { width: 100%; }
  body .hero .hero-v2-ratings {
    flex-wrap: wrap; gap: 12px 16px; padding: 14px 16px;
  }
  body .hero .hr-v2-sep { display: none; }
  body .hero .hr-v2-platform { font-size: 0.56rem; }
  body .hero .hero-v2-certs {
    flex-wrap: wrap; gap: 8px 12px;
    padding: 10px 16px 12px;
  }
  body .hero .hc-v2-item { font-size: 0.6rem; letter-spacing: 0.16em; }
  body .hero .hc-v2-dot { display: none; }
  body .hero .hero-v2-crest { width: 100px; margin-bottom: 24px; }
}
@media (max-width: 720px) {
  body .hero { min-height: clamp(620px, 86vh, 820px); }
  body .hero .hero-content { left: 6%; right: 6%; top: 11%; bottom: auto; max-width: 100%; }
  body .hero .hero-v2-img { object-position: 72% center; }
  body .hero .hero-h-v2 { font-size: clamp(2.4rem, 10vw, 3.2rem); }
  body .hero .hero-sub-v2 { font-size: 1rem; line-height: 1.6; }
  body .hero .btn-v2 { padding: 14px 22px; font-size: 0.62rem; }
}

/* ============================================================================
   HOUSE CREST WATERMARK
   25 Aug 2026, Stefan: "page is too busy on that 1 side, move logo to behind
   the person in the background, almost as watermark."
   The crest was a solid gold medallion at 49.5% — sitting on the end of the
   headline and beside the model's face. It now sits low-opacity and blended
   into the photograph on the right, clear of the copy column (left 6%,
   width 50%), behind the scrim, and with both animations removed.
   ============================================================================ */
body .hero .hero-gold-crest {
  position: absolute;
  z-index: 0;
  top: 52%;
  left: 78%;
  width: clamp(260px, 28vw, 480px);
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0.16;
  mix-blend-mode: soft-light;
  background: #F4D98B;
  -webkit-mask: url(../assets/images/logo_transparent.webp) center / contain no-repeat;
          mask: url(../assets/images/logo_transparent.webp) center / contain no-repeat;
  filter: none;
  animation: none;
}
@media (max-width: 1100px) {
  body .hero .hero-gold-crest { left: 82%; width: clamp(200px, 32vw, 340px); opacity: 0.13; }
}
@media (max-width: 720px) {
  /* On phones the crest becomes a neat brand stamp above the headline. */
  body .hero .hero-gold-crest { top: 5%; left: 50%; width: 104px; }
  body .hero .hero-content { top: 19%; }
}

/* ============================================================================
   RINGS EDITORIAL — full-bleed image with sage dust + animated scroll cue.
   Image fills the viewport width at its natural aspect ratio. No bars.
   ============================================================================ */
.edit-v2 {
  width: 100%;
  background: var(--pp-green-emerald);
  margin: 0;
  padding: 0;
}
.edit-v2 .edit-v2-image {
  position: relative;
  width: 100%;
  display: block;
  line-height: 0;
  overflow: hidden;
  isolation: isolate;
  /* Tighten the section vertically: cover-fit the wide image into a
     shorter window. The natural ratio is ~1.79:1; this forces ~2.4:1
     so the empty green wall above her hairline gets cropped away while
     the face, hands and rings stay fully framed. */
  aspect-ratio: 2.4 / 1;
}
@media (max-width: 880px) {
  /* On phones, a less aggressive crop keeps the composition readable. */
  .edit-v2 .edit-v2-image { aspect-ratio: 1.6 / 1; }
}
@media (max-width: 540px) {
  .edit-v2 .edit-v2-image { aspect-ratio: 1.2 / 1; }
}
.edit-v2 .edit-img {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Anchor toward the lower portion of the photo so the hairline-and-down
     half (face + hands + rings) is what fills the visible window. */
  object-position: center 78%;
  margin: 0;
}

/* Sage dust over the image */
.edit-v2 .edit-v2-particles {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 2;
  pointer-events: none;
}

/* "Shop Our Gorgeous Collection" — animated cue floating under her chin */
.edit-v2 .edit-v2-scroll {
  position: absolute;
  left: 50%;
  bottom: clamp(36px, 6vw, 76px);
  transform: translateX(-50%);
  z-index: 3;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-decoration: none;
  color: #FFFFFF;
  animation: editScrollPulse 3.4s ease-in-out infinite;
  cursor: pointer;
}
.edit-v2 .edit-v2-scroll-text {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.5rem, 2.6vw, 2.4rem);
  letter-spacing: 0.01em;
  color: #FFFFFF;
  text-shadow:
    0 2px 22px rgba(0, 0, 0, 0.55),
    0 0 32px rgba(228, 236, 223, 0.35);
  line-height: 1.1;
  white-space: nowrap;
}
.edit-v2 .edit-v2-scroll-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(8px) saturate(130%);
  -webkit-backdrop-filter: blur(8px) saturate(130%);
  color: #FFFFFF;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 0 24px rgba(228, 236, 223, 0.28),
    0 8px 24px -10px rgba(0, 0, 0, 0.55);
  animation: editArrowBob 2.2s ease-in-out infinite;
}
.edit-v2 .edit-v2-scroll:hover .edit-v2-scroll-arrow {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.85);
}

@keyframes editScrollPulse {
  0%, 100% { opacity: 0.92; transform: translate(-50%, 0); }
  50%      { opacity: 1;    transform: translate(-50%, -4px); }
}
@keyframes editArrowBob {
  0%, 100% { transform: translateY(0); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 24px rgba(228, 236, 223, 0.28), 0 8px 24px -10px rgba(0, 0, 0, 0.55); }
  50%      { transform: translateY(6px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), 0 0 38px rgba(228, 236, 223, 0.55), 0 8px 24px -10px rgba(0, 0, 0, 0.55); }
}

@media (prefers-reduced-motion: reduce) {
  .edit-v2 .edit-v2-scroll,
  .edit-v2 .edit-v2-scroll-arrow { animation: none; }
}

@media (max-width: 720px) {
  .edit-v2 .edit-v2-scroll { bottom: 22px; gap: 12px; }
  .edit-v2 .edit-v2-scroll-text { font-size: 1.2rem; }
  .edit-v2 .edit-v2-scroll-arrow { width: 38px; height: 38px; }
}

/* ============================================================================
   LED BRIDGE — thin green-light strip linking the rings image to the
   Our Collection section. Three layers: a deep emerald base, an inner gradient
   rail, and a traveling pulse that runs across the strip.
   ============================================================================ */
.led-bridge {
  position: relative;
  height: 6px;
  width: 100%;
  background: linear-gradient(180deg, #0F1F18 0%, #142B20 50%, #0F1F18 100%);
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 12px 28px -16px rgba(31, 61, 46, 0.45),
    0 -12px 28px -16px rgba(31, 61, 46, 0.45);
}
.led-bridge-rail {
  position: absolute;
  inset: 1px 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(188, 201, 183, 0.45) 12%,
    rgba(228, 236, 223, 0.85) 50%,
    rgba(188, 201, 183, 0.45) 88%,
    transparent 100%);
  filter: blur(0.5px) drop-shadow(0 0 6px rgba(188, 201, 183, 0.7))
                     drop-shadow(0 0 14px rgba(188, 201, 183, 0.45));
  animation: ledRailBreathe 4.8s ease-in-out infinite;
}
.led-bridge-pulse {
  position: absolute;
  top: 0; bottom: 0;
  left: -20%;
  width: 22%;
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.85) 50%,
    rgba(255, 255, 255, 0) 100%);
  filter: blur(1px) drop-shadow(0 0 8px rgba(228, 236, 223, 0.9));
  animation: ledRailRun 6.2s cubic-bezier(0.35, 0.05, 0.25, 1) infinite;
}
@keyframes ledRailBreathe {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 1; }
}
@keyframes ledRailRun {
  0%   { left: -22%; }
  60%  { left: 120%; }
  100% { left: 120%; }
}
@media (prefers-reduced-motion: reduce) {
  .led-bridge-rail, .led-bridge-pulse { animation: none; }
}

/* ============================================================================
   OUR COLLECTION — headline override (two confident serif lines, italic
   second line so the "Shaped inside our atelier." reads as a maker's mark).
   Also makes the head container wider so the lines breathe without wrapping.
   ============================================================================ */
.collections-section .coll-head {
  max-width: 1080px;
}
.collections-section .coll-head h2.coll-head-h {
  font-family: var(--serif);
  font-size: clamp(2.2rem, 4.4vw, 4rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.012em;
  color: var(--pp-ink-v2);
}
.collections-section .coll-head h2.coll-head-h em {
  font-style: italic;
  color: var(--pp-green-deep);
  font-weight: 400;
}
@media (max-width: 720px) {
  .collections-section .coll-head h2.coll-head-h {
    font-size: clamp(1.7rem, 6vw, 2.4rem);
  }
}

/* Bokeh canvas — ensure it covers the full section behind the head and grid */
.collections-section #collSparkleCanvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  z-index: 1;
  pointer-events: none;
}
.collections-section .coll-head,
.collections-section .coll-tabs,
.collections-section .coll-blurb,
.collections-section .coll-marquee,
.collections-section .coll-foot { position: relative; z-index: 2; }

/* ============================================================================
   VIDEO TRIO — three 1:1 atelier-footage placeholders, sits between the
   rings image and the Our Collection slideshow. Replace each .vt-placeholder
   with a <video> element when footage is ready.
   ============================================================================ */
.video-trio {
  width: 100%;
  background: #FFFFFF;
  padding: clamp(56px, 7vw, 96px) clamp(20px, 4vw, 48px);
}
.video-trio .vt-row {
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.8vw, 28px);
}
.video-trio .vt-tile {
  margin: 0;
  position: relative;
}
.video-trio .vt-frame {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  background: linear-gradient(150deg, #F4F6F1 0%, #E4ECDF 60%, #D7E0D1 100%);
  overflow: hidden;
  box-shadow:
    0 18px 44px -22px rgba(31, 61, 46, 0.28),
    inset 0 0 0 1px rgba(31, 61, 46, 0.08);
  transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1),
              box-shadow 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.video-trio .vt-tile:hover .vt-frame {
  transform: translateY(-4px);
  box-shadow:
    0 28px 62px -22px rgba(31, 61, 46, 0.38),
    inset 0 0 0 1px rgba(31, 61, 46, 0.16);
}
.video-trio .vt-frame video,
.video-trio .vt-frame iframe,
.video-trio .vt-frame img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  border: 0;
}
.video-trio .vt-placeholder {
  position: absolute; inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: var(--pp-green-deep);
  opacity: 0.78;
}
.video-trio .vt-placeholder svg { display: block; }
.video-trio .vt-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--pp-green-deep);
  font-weight: 500;
}

@media (max-width: 900px) {
  .video-trio .vt-row { grid-template-columns: 1fr 1fr; }
  .video-trio .vt-tile:nth-child(3) { grid-column: 1 / -1; max-width: 50%; margin: 0 auto; }
}
@media (max-width: 560px) {
  .video-trio .vt-row { grid-template-columns: 1fr; }
  .video-trio .vt-tile:nth-child(3) { max-width: 100%; }
}

/* ============================================================================
   HOUSE EDIT PREVIEW — 4-card product row pushed up
   ============================================================================ */
.he-row {
  background: #fff;
  padding: 96px 32px;
  max-width: 1440px; margin: 0 auto;
}
.he-head { text-align: center; max-width: 760px; margin: 0 auto 48px; }
.he-eyebrow {
  display: inline-block;
  font-size: 0.66rem; letter-spacing: 0.36em; text-transform: uppercase;
  color: var(--pp-green-deep); font-weight: 600;
  margin-bottom: 16px;
}
.he-rule {
  width: 36px; height: 1px;
  background: var(--pp-green-deep);
  margin: 0 auto 22px;
}
.he-h {
  font-family: var(--serif);
  font-size: clamp(2rem, 4vw, 3.6rem);
  font-weight: 400; line-height: 1.08;
  color: var(--pp-ink-v2);
  margin: 0;
}
.he-h em { font-style: italic; color: var(--pp-green-deep); }
.he-sub {
  font-size: 0.98rem; line-height: 1.75; color: #586259;
  max-width: 580px; margin: 20px auto 0; font-weight: 300;
}
.he-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
@media (max-width: 1000px) { .he-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; } }
@media (max-width: 540px)  { .he-grid { grid-template-columns: 1fr; gap: 14px; } }

.he-card {
  background: var(--pp-paper-v2); position: relative;
  transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1),
              box-shadow 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.he-card:hover { transform: translateY(-4px); box-shadow: 0 28px 60px -32px rgba(26, 33, 28, 0.25); }
.he-card-link { position: absolute; inset: 0; z-index: 2; }
.he-card-imgwrap { aspect-ratio: 4/5; overflow: hidden; background: var(--pp-paper-v2); }
.he-card-img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.9s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.he-card:hover .he-card-img { transform: scale(1.045); }
.he-card-body { padding: 22px 18px 26px; text-align: center; }
.he-card-cat {
  font-size: 0.6rem; letter-spacing: 0.26em; text-transform: uppercase;
  color: #8B938A; margin-bottom: 8px; font-weight: 500;
}
.he-card-name {
  font-family: var(--serif); font-size: 1.18rem; line-height: 1.3;
  color: var(--pp-ink-v2); font-weight: 400; margin-bottom: 6px;
  min-height: 2.6em;
}
.he-card-price { font-size: 0.78rem; color: #586259; }

.he-foot { text-align: center; margin-top: 56px; }
.he-ghost {
  display: inline-flex; align-items: center; gap: 14px;
  font-size: 0.68rem; letter-spacing: 0.3em; text-transform: uppercase;
  font-weight: 600; color: var(--pp-green-deep);
  padding: 10px 0; border-bottom: 1px solid var(--pp-green-deep);
  transition: gap 0.3s, color 0.3s;
  text-decoration: none;
}
.he-ghost:hover { gap: 24px; color: var(--pp-ink-v2); }

/* ============================================================================
   GENTLE PALETTE NUDGE — shift v1 gold accents in select places toward green.
   Kept conservative so v1's existing layouts don't break.
   ============================================================================ */
/* Section dividers that were gold gradients — restate as green */
.gilt-rule {
  background: linear-gradient(90deg, transparent, var(--pp-green-deep), transparent) !important;
  opacity: 0.55;
}
.section-gold-rule {
  background: linear-gradient(90deg, transparent, var(--pp-green-deep), transparent) !important;
  opacity: 0.55;
}
.gold-line,
.gold-line.center,
.gold-line.dark {
  background: var(--pp-green-deep) !important;
}

/* Eyebrows that were gold — to green-deep where they sit on light backgrounds */
.reviews-section .eyebrow,
.coll-head .eyebrow,
.srv-head .eyebrow,
.celeb-head .eyebrow,
.house .eyebrow,
.bp-eyebrow,
.visit-top .eyebrow {
  color: var(--pp-green-deep) !important;
}
.reviews-section h2 em,
.coll-head h2 em,
.celeb-head em,
.srv-head h2 em,
.cta-section h2 em {
  color: var(--pp-green-deep) !important;
}

/* Stars / rating accents on light sections */
.rp-stars span,
.rv-stars { color: var(--pp-green-deep) !important; }

/* Subtle: cream/warm backgrounds get a touch of green-mist warmth swap
   only where it reads natural; otherwise leave alone. */
.reviews-section { background: var(--pp-paper-v2) !important; }

@media (prefers-reduced-motion: reduce) {
  .he-card,
  .he-card-img,
  .btn-v2,
  .edit-v2 .edit-cta { transition: none !important; }
}

/* ============================================================================
   CELEBRITY CLIENTS V2 — sliding marquee, dark editorial band.
   Photographs drift right-to-left in an unbroken loop. No frames, soft duotone,
   names whisper-rise on hover. Sits directly under the collection slideshow.
   ============================================================================ */

.celebs-v2 {
  position: relative;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(208, 178, 117, 0.10) 0%, transparent 60%),
    radial-gradient(80% 60% at 50% 100%, rgba(31, 61, 46, 0.55) 0%, transparent 70%),
    linear-gradient(180deg, #0E1A14 0%, #142B20 45%, #0F1F18 100%);
  color: #F6F1E3;
  padding: clamp(28px, 3vw, 42px) 0 0;
  overflow: hidden;
  isolation: isolate;
}

.celebs-v2-particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.celebs-v2-head {
  position: relative;
  z-index: 3;
  text-align: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px clamp(18px, 2vw, 28px);
}

.celebs-v2-eyebrow {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  margin-bottom: 22px;
  /* Visible on dark green: champagne-to-cream sheen sweep + soft pulse */
  background-image: linear-gradient(
    100deg,
    #C9A55C 0%,
    #C9A55C 35%,
    #F5E0A8 48%,
    #FFF6D9 50%,
    #F5E0A8 52%,
    #C9A55C 65%,
    #C9A55C 100%
  );
  background-size: 280% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: eyebrowFlashGold 4.6s ease-in-out infinite;
  text-shadow: 0 0 22px rgba(245, 224, 168, 0.18);
}
@keyframes eyebrowFlashGold {
  0%   { background-position: 100% 0; }
  55%  { background-position: -100% 0; }
  100% { background-position: -100% 0; }
}

.celebs-v2-rule {
  width: 64px;
  height: 1px;
  margin: 0 auto 28px;
  background: linear-gradient(90deg, transparent 0%, #1F3D2E 50%, transparent 100%);
}

/* ============================================================================
   WORD-BY-WORD HEADLINE REVEAL — luxury entrance for hero + celebs h2.
   Each word fades up + blur-clears with a stagger when the line enters view.
   Pairs with a continuous shimmer on the italic emphasis word below.
   ============================================================================ */
.word-anim .word {
  display: inline-block;
  opacity: 0;
  filter: blur(10px);
  will-change: opacity, filter;
}
.word-anim.is-in .word {
  animation: ppWordIn 1.05s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  animation-delay: calc(80ms + var(--i, 0) * 95ms);
}
@keyframes ppWordIn {
  0%   { opacity: 0; filter: blur(10px); }
  100% { opacity: 1; filter: blur(0); }
}

/* Hero em — champagne gold flash, matches "diamonds" treatment */
body .hero .hero-h-v2 em {
  font-style: italic;
  /* not !important: an !important colour here outranks the keyframes and
     freezes the word, which is why "beautiful" never lit up before. */
  color: #E8C16A;
  background: none !important;
  -webkit-text-fill-color: #E8C16A;
  -webkit-background-clip: border-box !important;
          background-clip: border-box !important;
}

/* Celebs em — solid champagne gold, fully readable on dark green */
.celebs-v2-h em {
  display: inline-block;
  font-style: italic;
  color: #E8C16A !important;
  background: none !important;
  -webkit-text-fill-color: #E8C16A !important;
  -webkit-background-clip: border-box !important;
          background-clip: border-box !important;
  animation: celebsEmFlash 3.2s ease-in-out infinite;
}

/* Whole celebs headline floats gently */
.celebs-v2-h {
  animation: celebsHFloat 7s ease-in-out infinite;
}

@keyframes celebsHFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}
@keyframes celebsEmFlash {
  0%, 100% {
    text-shadow:
      0 0 0 rgba(245, 230, 194, 0),
      0 2px 18px rgba(0, 0, 0, 0.5);
    color: #E8C16A;
    -webkit-text-fill-color: #E8C16A;
  }
  50% {
    text-shadow:
      0 0 24px rgba(245, 230, 194, 0.95),
      0 0 52px rgba(212, 175, 110, 0.65),
      0 2px 18px rgba(0, 0, 0, 0.5);
    color: #FFF1C4;
    -webkit-text-fill-color: #FFF1C4;
  }
}

@media (prefers-reduced-motion: reduce) {
  .word-anim .word { opacity: 1; transform: none; filter: none; animation: none; }
  body .hero .hero-h-v2,
  body .hero .hero-h-v2 em,
  .celebs-v2-h,
  .celebs-v2-h em { animation: none; }
}

.celebs-v2-h {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: 0.003em;
  color: #F6F1E3;
  margin: 0;
  white-space: normal;
}
.celebs-v2-h em {
  font-style: italic;
  font-weight: 400;
}

.celebs-v2-sub {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: clamp(0.96rem, 1.15vw, 1.05rem);
  line-height: 1.75;
  color: rgba(246, 241, 227, 0.74);
  margin: 0 auto;
  max-width: 680px;
}

/* Marquee track ------------------------------------------------------------ */
.celebs-v2-marquee {
  position: relative;
  width: 100%;
  z-index: 3;
  overflow: hidden;
  padding: 8px 0 4px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

.celebs-v2-fade {
  position: absolute;
  top: 0; bottom: 0;
  width: 220px;
  z-index: 4;
  pointer-events: none;
  display: none; /* mask handles the fade; kept for fallback hook */
}

.celebs-v2-track {
  display: flex;
  gap: clamp(20px, 2.4vw, 38px);
  width: max-content;
  padding: 14px clamp(20px, 2.4vw, 38px) 14px;
  animation: celebsSlide 56s linear infinite;
  will-change: transform;
}
.celebs-v2-marquee:hover .celebs-v2-track,
.celebs-v2-marquee:focus-within .celebs-v2-track {
  animation-play-state: paused;
}

@keyframes celebsSlide {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .celebs-v2-track { animation: none; }
}

/* Individual portrait card ------------------------------------------------- */
.celebs-v2-card {
  position: relative;
  flex: 0 0 clamp(220px, 22vw, 320px);
  aspect-ratio: 3 / 4;
  margin: 0;
  overflow: hidden;
  border-radius: 2px;
  box-shadow:
    0 28px 60px -28px rgba(0, 0, 0, 0.7),
    0 2px 0 rgba(31, 61, 46, 0.06);
  transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.9s ease;
}

.celebs-v2-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 31, 24, 0.0) 35%, rgba(15, 31, 24, 0.72) 78%, rgba(8, 16, 12, 0.94) 100%);
  z-index: 2;
  pointer-events: none;
  transition: opacity 0.7s ease;
}

.celebs-v2-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(31, 61, 46, 0.0) 30%, rgba(31, 61, 46, 0.10) 60%, rgba(31, 61, 46, 0.0) 100%);
  opacity: 0;
  z-index: 3;
  pointer-events: none;
  transition: opacity 0.7s ease;
}

.celebs-v2-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  filter: grayscale(0.92) contrast(1.04) brightness(0.92) sepia(0.12);
  transform: scale(1.02);
  transition: filter 1.1s ease, transform 1.6s cubic-bezier(0.2, 0.7, 0.2, 1);
  z-index: 1;
}

.celebs-v2-card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 40px 90px -30px rgba(0, 0, 0, 0.85),
    0 0 0 1px rgba(31, 61, 46, 0.25);
}
.celebs-v2-card:hover .celebs-v2-img {
  filter: grayscale(0) contrast(1.06) brightness(1.02) sepia(0);
  transform: scale(1.07);
}
.celebs-v2-card:hover::after { opacity: 1; }
.celebs-v2-card:hover::before {
  background: linear-gradient(180deg, rgba(15, 31, 24, 0.0) 28%, rgba(15, 31, 24, 0.62) 72%, rgba(8, 16, 12, 0.92) 100%);
}

/* Caption ------------------------------------------------------------------ */
.celebs-v2-cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 4;
  padding: 18px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transform: translateY(8px);
  transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.celebs-v2-card:hover .celebs-v2-cap { transform: translateY(0); }

.celebs-v2-name {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: clamp(1.15rem, 1.3vw, 1.4rem);
  letter-spacing: 0.01em;
  color: #FFFFFF;
  line-height: 1.15;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
}

.celebs-v2-role {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #E9D9B6;
  opacity: 0.94;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.75), 0 0 18px rgba(0, 0, 0, 0.45);
}

/* Touch / narrow screens: shrink portraits, slow the loop, keep the rhythm */
@media (max-width: 768px) {
  .celebs-v2 { padding: clamp(28px, 5vw, 42px) 0 0; }
  .celebs-v2-card { flex-basis: 180px; }
  .celebs-v2-track {
    animation-duration: 48s;
    gap: 16px;
    padding: 22px 16px;
  }
  .celebs-v2-cap { padding: 14px 14px 16px; }
  .celebs-v2-name { font-size: 1.05rem; }
  .celebs-v2-role { font-size: 0.66rem; letter-spacing: 0.18em; }
}

@media (max-width: 480px) {
  .celebs-v2-card { flex-basis: 158px; }
  .celebs-v2-track { animation-duration: 42s; }
}

/* Touch devices — no hover available, so default to a slightly warmer image
   and a permanently-visible caption so portraits never read as "off". */
@media (hover: none) {
  .celebs-v2-img {
    filter: grayscale(0.55) contrast(1.04) brightness(0.98) sepia(0.06);
  }
  .celebs-v2-cap { transform: translateY(0); }
}

/* Make cards feel clickable — elegant pointer, no default zoom cursor */
.celebs-v2-card { cursor: pointer; }
.celebs-v2-card:focus-visible {
  outline: 1px solid rgba(201, 169, 110, 0.85);
  outline-offset: 4px;
}

/* ============================================================================
   CELEBRITY LIGHTBOX — editorial frame, slow fade + scale, brass hairlines.
   Keeps the marquee paused while open; closes on backdrop / ESC / close btn.
   ============================================================================ */
.celeb-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 56px);
  background: rgba(8, 16, 12, 0);
  backdrop-filter: blur(0);
  -webkit-backdrop-filter: blur(0);
  opacity: 0;
  transition: opacity 0.55s ease, background-color 0.55s ease, backdrop-filter 0.55s ease;
}
.celeb-lightbox.is-open {
  display: flex;
  opacity: 1;
  background: rgba(8, 16, 12, 0.88);
  backdrop-filter: blur(14px) saturate(1.05);
  -webkit-backdrop-filter: blur(14px) saturate(1.05);
}

.celeb-lightbox__backdrop {
  position: absolute;
  inset: 0;
  cursor: zoom-out;
}

/* The framed portrait card */
.celeb-lightbox__frame {
  position: relative;
  z-index: 2;
  max-width: min(560px, 92vw);
  width: 100%;
  background: #0A1410;
  border-radius: 3px;
  padding: 14px 14px 22px;
  box-shadow:
    0 60px 120px -30px rgba(0, 0, 0, 0.85),
    0 0 0 1px rgba(201, 169, 110, 0.38),
    0 0 0 6px rgba(201, 169, 110, 0.08),
    0 0 0 7px rgba(201, 169, 110, 0.22);
  transform: translateY(18px) scale(0.96);
  opacity: 0;
  transition:
    transform 0.85s cubic-bezier(0.2, 0.7, 0.2, 1),
    opacity 0.7s ease;
}
.celeb-lightbox.is-open .celeb-lightbox__frame {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* Brass corner ticks — subtle Tiffany-frame feel */
.celeb-lightbox__frame::before,
.celeb-lightbox__frame::after {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  border: 1px solid rgba(201, 169, 110, 0.7);
  pointer-events: none;
}
.celeb-lightbox__frame::before {
  top: 6px;
  left: 6px;
  border-right: 0;
  border-bottom: 0;
}
.celeb-lightbox__frame::after {
  bottom: 6px;
  right: 6px;
  border-left: 0;
  border-top: 0;
}

.celeb-lightbox__media {
  position: relative;
  aspect-ratio: 3 / 4;
  width: 100%;
  overflow: hidden;
  background: #0F1F18;
  border-radius: 1px;
}
.celeb-lightbox__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 60px 0 rgba(0, 0, 0, 0.45);
}
.celeb-lightbox__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  filter: grayscale(0) contrast(1.05) brightness(1.02);
  transform: scale(1.0);
  transition: transform 6s ease;
}
.celeb-lightbox.is-open .celeb-lightbox__img { transform: scale(1.04); }

/* Caption block under the portrait */
.celeb-lightbox__cap {
  text-align: center;
  padding: 22px 18px 6px;
  color: #F4ECDC;
}
.celeb-lightbox__rule {
  width: 36px;
  height: 1px;
  margin: 0 auto 14px;
  background: rgba(201, 169, 110, 0.65);
}
.celeb-lightbox__name {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: clamp(1.7rem, 2.4vw, 2.1rem);
  letter-spacing: 0.015em;
  line-height: 1.1;
  color: #F4ECDC;
}
.celeb-lightbox__role {
  display: block;
  margin-top: 10px;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #C9A96E;
}

/* Close button — brass ring, top-right */
.celeb-lightbox__close {
  position: absolute;
  top: -18px;
  right: -18px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #0A1410;
  border: 1px solid rgba(201, 169, 110, 0.6);
  color: #E9D9B6;
  font-family: 'Inter', sans-serif;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform 0.4s ease, background-color 0.4s ease, border-color 0.4s ease;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}
.celeb-lightbox__close:hover {
  transform: rotate(90deg);
  border-color: rgba(201, 169, 110, 1);
  background: #102019;
}
.celeb-lightbox__close:focus-visible {
  outline: 1px solid rgba(201, 169, 110, 0.95);
  outline-offset: 3px;
}

/* Reduced motion — skip the slow scale, just fade */
@media (prefers-reduced-motion: reduce) {
  .celeb-lightbox,
  .celeb-lightbox__frame,
  .celeb-lightbox__img,
  .celeb-lightbox__close {
    transition-duration: 0.15s !important;
  }
  .celeb-lightbox__frame { transform: none; }
  .celeb-lightbox.is-open .celeb-lightbox__img { transform: none; }
}

/* Mobile — pull close button inside the frame so it can't escape the viewport */
@media (max-width: 560px) {
  .celeb-lightbox__close {
    top: 8px;
    right: 8px;
    width: 38px;
    height: 38px;
  }
  .celeb-lightbox__frame { padding: 10px 10px 18px; }
  .celeb-lightbox__cap { padding: 18px 12px 4px; }
}

/* ============================================================================
   UNIVERSAL BUTTON POLISH
   4 Aug audit: remove the glow/lighting effects on CTAs, use a simple solid
   or outline state change on hover instead. The shine sweep and the gentle
   float that used to run on every v1 button are gone; the transition and the
   hover lift stay, because those are responses to the visitor, not ambient
   motion competing with the jewellery.
   ============================================================================ */
.btn-gold,
.btn-outline,
.btn-outline-dark,
.coll-foot-cta,
.house-link,
.cta-section .btn-gold {
  position: relative;
  transition:
    background 0.35s,
    border-color 0.35s,
    color 0.35s,
    transform 0.35s cubic-bezier(0.25, 0.1, 0.25, 1);
  animation: none;
}

.btn-gold:hover,
.btn-outline:hover,
.btn-outline-dark:hover,
.coll-foot-cta:hover,
.house-link:hover {
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .btn-gold:hover,
  .btn-outline:hover,
  .btn-outline-dark:hover,
  .coll-foot-cta:hover,
  .house-link:hover { transform: none; }
}

/* ============================================================================
   HERO CREDIBILITY BLOCK — promote the ratings + check-list. Bigger type,
   stronger ring around the pill, more contrast against the emerald.
   ============================================================================ */
/* The panel earns its contrast from the backdrop blur and the lit rim, not
   from a flat black fill. The inner rows stay fully transparent — that dark
   square sitting inside the rounded frame was the whole problem. */
body .hero .hero-v2-trust {
  border-color: rgba(255, 255, 255, 0.16) !important;
  background: linear-gradient(165deg,
    rgba(255, 255, 255, 0.07) 0%,
    rgba(10, 30, 22, 0.16) 42%,
    rgba(6, 20, 14, 0.22) 100%) !important;
  box-shadow:
    0 26px 60px -34px rgba(0, 0, 0, 0.62),
    inset 0 1px 0 rgba(255, 255, 255, 0.20),
    inset 0 0 0 1px rgba(228, 194, 119, 0.09) !important;
}
body .hero .hero-v2-ratings,
body .hero .hero-v2-certs {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
body .hero .hr-v2-item {
  font-size: 0.78rem !important;
  letter-spacing: 0.14em !important;
  color: #fff !important;
  font-weight: 600 !important;
}
body .hero .hr-v2-platform {
  font-size: 0.63rem !important;
  letter-spacing: 0.18em !important;
  color: rgba(255, 255, 255, 0.88) !important;
  font-weight: 500 !important;
}
body .hero .hr-v2-score {
  font-size: 1.4rem !important;
  font-weight: 600 !important;
  color: #fff !important;
  text-shadow: 0 0 14px rgba(228, 236, 223, 0.55);
}
body .hero .hr-v2-stars {
  color: #E8C16A !important;
  font-size: 0.84rem !important;
  letter-spacing: 2px !important;
  filter: drop-shadow(0 0 6px rgba(245, 224, 168, 0.75));
  animation: heroStarsGoldFlash 2.4s ease-in-out infinite;
}
@keyframes heroStarsGoldFlash {
  0%, 100% {
    color: #E8C16A;
    text-shadow:
      0 0 0 rgba(245, 224, 168, 0),
      0 2px 12px rgba(0, 0, 0, 0.45);
    filter: drop-shadow(0 0 4px rgba(212, 175, 110, 0.5));
  }
  50% {
    color: #FFF1C4;
    text-shadow:
      0 0 16px rgba(255, 241, 196, 1),
      0 0 36px rgba(228, 194, 119, 0.85),
      0 2px 12px rgba(0, 0, 0, 0.45);
    filter: drop-shadow(0 0 10px rgba(255, 241, 196, 0.9));
  }
}
body .hero .hr-v2-logo {
  width: 31px !important; height: 31px !important;
  font-size: 1.06rem !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 4px 14px -4px rgba(0, 0, 0, 0.55);
}
body .hero .hr-v2-ta { font-size: 0.86rem !important; }
/* 12× PlatAfrica medallion — gold, continuously shining */
body .hero .hr-v2-pla {
  position: relative;
  border: 1px solid #E8C16A !important;
  color: #FFF1C4 !important;
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 241, 196, 0.35) 0%, rgba(212, 175, 110, 0.18) 45%, rgba(31, 61, 46, 0.55) 100%) !important;
  text-shadow: 0 0 8px rgba(255, 241, 196, 0.8);
  animation: heroPlaShine 3.6s ease-in-out infinite;
  overflow: hidden;
}
body .hero .hr-v2-pla::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background: linear-gradient(115deg,
    transparent 0%,
    transparent 38%,
    rgba(255, 241, 196, 0.65) 50%,
    transparent 62%,
    transparent 100%);
  background-size: 220% 100%;
  background-position: 120% 0;
  animation: heroPlaSweep 3.6s ease-in-out infinite;
  mix-blend-mode: screen;
}
@keyframes heroPlaShine {
  0%, 100% {
    box-shadow:
      0 0 0 0 rgba(228, 194, 119, 0),
      inset 0 0 12px rgba(212, 175, 110, 0.3);
  }
  50% {
    box-shadow:
      0 0 22px 0 rgba(228, 194, 119, 0.75),
      0 0 48px 0 rgba(228, 194, 119, 0.35),
      inset 0 0 22px rgba(255, 241, 196, 0.55);
  }
}
@keyframes heroPlaSweep {
  0%   { background-position: 120% 0; }
  100% { background-position: -120% 0; }
}

/* "PlatAfrica" label — gold flash like the celebs italic */
body .hero .hr-v2-score-pla {
  color: #E8C16A !important;
  -webkit-text-fill-color: #E8C16A !important;
  font-weight: 600 !important;
  animation: heroPlaTextFlash 3.2s ease-in-out infinite;
}
@keyframes heroPlaTextFlash {
  0%, 100% {
    color: #E8C16A;
    -webkit-text-fill-color: #E8C16A;
    text-shadow: 0 0 0 rgba(245, 224, 168, 0);
  }
  50% {
    color: #FFF1C4;
    -webkit-text-fill-color: #FFF1C4;
    text-shadow:
      0 0 18px rgba(255, 241, 196, 0.95),
      0 0 40px rgba(212, 175, 110, 0.55);
  }
}

/* "Award Winner" caption — soft champagne so the gold reads consistently */
body .hero .hr-v2-platform-wide {
  color: #E4C277 !important;
}

@media (prefers-reduced-motion: reduce) {
  body .hero .hr-v2-stars,
  body .hero .hr-v2-pla,
  body .hero .hr-v2-pla::after,
  body .hero .hr-v2-score-pla { animation: none !important; }
}

/* The check-list row below ratings — promote to first-class credentials. */
body .hero .hero-v2-trust-list {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 22px;
  padding: 12px 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
body .hero .hero-v2-trust-list .ht-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #fff;
  font-weight: 600;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.4);
}
body .hero .hero-v2-trust-list .ht-tick {
  width: 16px; height: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--pp-green-wall);
  border-radius: 50%;
  color: var(--pp-green-wall);
  font-size: 0.72rem;
  background: rgba(188, 201, 183, 0.12);
}
body .hero .hero-v2-trust-list .ht-dot {
  width: 4px; height: 4px;
  background: var(--pp-green-wall);
  opacity: 0.5;
  transform: rotate(45deg);
}
@media (max-width: 720px) {
  body .hero .hr-v2-score { font-size: 1.15rem !important; }
  body .hero .hr-v2-item, body .hero .hr-v2-platform { font-size: 0.6rem !important; }
  body .hero .hero-v2-trust-list .ht-item { font-size: 0.6rem; letter-spacing: 0.18em; }
}

/* ============================================================================
   ENGAGEMENT RING SECTION (v3) — two-row editorial layout.
   Row 1: image left, text right.
   Row 2: text left, video right.
   Premium, magazine-style. Replaces the older two-up diptych.
   ============================================================================ */
.engagement-v3 {
  background: #FFFFFF;
  padding: 0 clamp(24px, 5vw, 88px) clamp(8px, 1vw, 14px);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.engagement-v3::before {
  /* Soft sage radial behind the section — adds depth without colour-block */
  content: '';
  position: absolute;
  top: -8%; left: -10%;
  width: 60%; height: 60%;
  background: radial-gradient(ellipse at center, rgba(228, 236, 223, 0.55) 0%, rgba(228, 236, 223, 0) 70%);
  pointer-events: none;
  z-index: 0;
}
.engagement-v3::after {
  content: '';
  position: absolute;
  bottom: -8%; right: -10%;
  width: 55%; height: 55%;
  background: radial-gradient(ellipse at center, rgba(188, 201, 183, 0.35) 0%, rgba(188, 201, 183, 0) 72%);
  pointer-events: none;
  z-index: 0;
}

/* Animated cosmic dust — sage / emerald particles drifting across the white
   ground. Sits behind all content but above the soft radials. */
.engagement-v3-dust {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.engagement-v3-intro {
  position: relative;
  z-index: 2;
  max-width: 820px;
  margin: 0 auto clamp(8px, 1vw, 14px);
  padding-top: clamp(18px, 2vw, 30px);
  text-align: center;
}
.engagement-v3-stage { position: relative; z-index: 2; }
.engagement-v3-eyebrow {
  display: inline-block;
  font-size: 0.74rem;
  letter-spacing: 0.46em;
  text-transform: uppercase;
  color: var(--pp-green-deep);
  font-weight: 700;
  margin-bottom: 10px;
}
.engagement-v3-rule {
  width: 42px; height: 1px;
  background: var(--pp-green-deep);
  margin: 0 auto 14px;
  position: relative;
}
.engagement-v3-rule::before,
.engagement-v3-rule::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 5px; height: 5px;
  background: var(--pp-green-deep);
  transform: translateY(-50%) rotate(45deg);
}
.engagement-v3-rule::before { left: -12px; }
.engagement-v3-rule::after  { right: -12px; }

.engagement-v3-h {
  font-family: var(--serif);
  font-size: clamp(2.6rem, 5.4vw, 4.8rem);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.022em;
  color: var(--pp-ink-v2);
  margin: 0;
}
.engagement-v3-h em {
  font-style: italic;
}
/* Flash effect — champagne gold sweep on the italic, matching hero "diamonds"
   and the rest of the page headlines. Wins the !important war so the
   per-word reveal doesn't overwrite it. */
.engagement-v3-h.h-shimmer em {
  background-image: linear-gradient(
    100deg,
    #C9A55C 0%,
    #C9A55C 35%,
    #E8C16A 48%,
    #FFF1C4 50%,
    #E8C16A 52%,
    #C9A55C 65%,
    #C9A55C 100%
  ) !important;
  background-size: 280% 100% !important;
  background-position: 100% 0 !important;
  -webkit-background-clip: text !important;
          background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  animation: hShimmer 7.2s ease-in-out 1.4s infinite !important;
  text-shadow: none !important;
}

/* SINGLE-FRAME STAGE: image | text + CTA | video.
   Designed to fit in one desktop viewport. Three columns side by side,
   text in the middle, media flanking. */
.engagement-v3-stage {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(20px, 2.4vw, 36px);
  align-items: stretch;
  max-width: 1480px;
  margin: 0 auto;
}
/* Legacy two-row layout — hidden so old markup never re-emerges */
.engagement-v3-row { display: none; }

/* The media card — image or video. Same frame for both so the two rows
   echo each other. Rounded corners (just slightly), subtle ring of deep
   green, deep shadow underneath. */
.engagement-v3-media-card {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 5;
  height: 100%;
  overflow: hidden;
  background: var(--pp-green-emerald);
  box-shadow:
    0 38px 80px -38px rgba(31, 61, 46, 0.55),
    0 0 0 1px rgba(31, 61, 46, 0.08);
  transition: transform 0.7s cubic-bezier(0.22, 0.7, 0.18, 1),
              box-shadow 0.7s cubic-bezier(0.22, 0.7, 0.18, 1);
}
.engagement-v3-media-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 56px 100px -46px rgba(31, 61, 46, 0.65),
    0 0 0 1px rgba(31, 61, 46, 0.14);
}

.engagement-v3-media {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.01);
  transition: transform 1.4s cubic-bezier(0.22, 0.7, 0.18, 1);
}
.engagement-v3-media-card:hover .engagement-v3-media { transform: scale(1.05); }
.engagement-v3-media-img .engagement-v3-media { object-position: center 32%; }
.engagement-v3-media-vid .engagement-v3-media { object-position: center center; }

/* Soft top + bottom scrim so the corner tag reads */
.engagement-v3-media-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 65%, rgba(0, 0, 0, 0.38) 100%);
  pointer-events: none;
  z-index: 1;
}

.engagement-v3-tag {
  position: absolute;
  left: 22px; bottom: 22px;
  z-index: 2;
  font-size: 0.6rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: #fff;
  font-weight: 700;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
}

/* Centre text column inside the single-frame stage.
   Stretches to match the side media height; text block centres in the top
   row, the animated crest fills the remaining space below — flush to the
   bottom of the flanking images. */
.engagement-v3-copy {
  align-self: stretch;
  display: grid;
  grid-template-rows: 1fr auto;
  text-align: center;
  max-width: 100%;
  padding: 0 clamp(8px, 1.4vw, 20px);
}
.engagement-v3-copy-block {
  align-self: center;
}

/* Animated Prins & Prins crest — black masked silhouette filled with a
   moving black-to-gold sheen. Sits at the bottom of the centre column. */
.engagement-v3-mark {
  align-self: end;
  justify-self: center;
  width: min(100%, 360px);
  height: clamp(140px, 17vw, 240px);
  margin-top: clamp(18px, 2.4vw, 32px);
  -webkit-mask-image: url('../assets/images/logo_transparent.webp');
          mask-image: url('../assets/images/logo_transparent.webp');
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center bottom;
          mask-position: center bottom;
  -webkit-mask-size: contain;
          mask-size: contain;
  background-image: linear-gradient(
    110deg,
    #0E1614 0%,
    #0E1614 28%,
    #6E5824 40%,
    #C9A55C 47%,
    #F5E0A8 50%,
    #C9A55C 53%,
    #6E5824 60%,
    #0E1614 72%,
    #0E1614 100%
  );
  background-size: 280% 100%;
  background-position: 100% 0;
  animation: engagementMarkShine 6.4s ease-in-out infinite;
  filter: drop-shadow(0 8px 22px rgba(31, 61, 46, 0.18));
}
@keyframes engagementMarkShine {
  0%   { background-position: 100% 0; }
  55%  { background-position: -100% 0; }
  100% { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .engagement-v3-mark { animation: none !important; background-position: 50% 0 !important; }
}

.engagement-v3-mini {
  display: inline-flex;
  align-items: center;
  font-size: 0.62rem;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--pp-green-deep);
  font-weight: 700;
  margin-bottom: 18px;
}
.engagement-v3-sub-h {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 3.2vw, 2.8rem);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.012em;
  color: var(--pp-ink-v2);
  margin: 0 0 22px;
}
.engagement-v3-sub-h em {
  font-style: italic;
  color: var(--pp-green-deep);
  background: none !important;
  -webkit-text-fill-color: var(--pp-green-deep) !important;
}
.engagement-v3-p {
  font-size: clamp(1rem, 1.1vw, 1.12rem);
  line-height: 1.78;
  color: #4A554D;
  font-weight: 300;
  margin: 0 0 24px;
}
.engagement-v3-list {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.engagement-v3-list li {
  font-size: 0.84rem;
  letter-spacing: 0.05em;
  color: var(--pp-ink-v2);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 500;
}
.engagement-v3-tick {
  width: 6px; height: 6px;
  background: var(--pp-green-deep);
  display: inline-block;
  flex: 0 0 6px;
  transform: rotate(45deg);
}

.engagement-v3-cta-row {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.engagement-v3-cta {
  background: var(--pp-green-deep) !important;
  color: #fff !important;
  border: none !important;
  padding: 18px 32px !important;
  letter-spacing: 0.22em;
  font-weight: 700;
  font-size: 0.66rem !important;
}
.engagement-v3-cta:hover {
  background: var(--pp-ink-v2) !important;
  box-shadow:
    0 24px 50px -20px rgba(31, 61, 46, 0.55),
    0 0 36px rgba(188, 201, 183, 0.4) !important;
}
.engagement-v3-secondary {
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--pp-green-deep);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 3px;
  transition: border-color 0.35s, color 0.35s;
}
.engagement-v3-secondary:hover {
  color: var(--pp-ink-v2);
  border-bottom-color: var(--pp-green-deep);
}

/* Tablet: stage collapses to image+video on a row, copy beneath them */
@media (max-width: 980px) {
  .engagement-v3-stage {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      'img vid'
      'copy copy';
    gap: 18px;
  }
  .engagement-v3-media-img { grid-area: img; }
  .engagement-v3-media-vid { grid-area: vid; }
  .engagement-v3-copy { grid-area: copy; padding-top: 8px; }
}
/* Phone: full stack — image, copy, video */
@media (max-width: 620px) {
  .engagement-v3-stage {
    grid-template-columns: 1fr;
    grid-template-areas:
      'img'
      'copy'
      'vid';
    gap: 18px;
  }
  .engagement-v3-cta { padding: 16px 28px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .engagement-v3-media-card,
  .engagement-v3-media { transition: none !important; transform: none !important; }
}

/* Hide the older v2 engagement styles if any element using them survives */
.engagement-v2 {
  background: #FFFFFF;
  padding: clamp(72px, 9vw, 120px) clamp(24px, 5vw, 64px) clamp(72px, 9vw, 120px);
  position: relative;
}

.engagement-v2-head {
  max-width: 820px;
  margin: 0 auto clamp(48px, 5vw, 76px);
  text-align: center;
}
.engagement-v2-eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--pp-green-deep);
  font-weight: 700;
  margin-bottom: 16px;
}
.engagement-v2-rule {
  width: 36px;
  height: 1px;
  background: var(--pp-green-deep);
  margin: 0 auto 26px;
}
.engagement-v2-h {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 5vw, 4.4rem);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.018em;
  color: var(--pp-ink-v2);
  margin: 0 0 22px;
}
.engagement-v2-h em {
  font-style: italic;
  color: var(--pp-green-deep);
  background: none !important;
  -webkit-text-fill-color: var(--pp-green-deep) !important;
}
.engagement-v2-sub {
  font-size: clamp(1.02rem, 1.15vw, 1.18rem);
  line-height: 1.75;
  color: #4A554D;
  max-width: 640px;
  margin: 0 auto;
  font-weight: 300;
}

/* The 2-up grid: image left, video right. Snug, no inner gap so they read
   as a diptych. Outer max-width keeps them readable on big monitors. */
.engagement-v2-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  max-width: 1380px;
  margin: 0 auto;
  background: var(--pp-green-emerald);
  position: relative;
  box-shadow: 0 38px 80px -40px rgba(31, 61, 46, 0.45);
}
.engagement-v2-tile {
  position: relative;
  margin: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--pp-green-emerald);
}
.engagement-v2-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.01);
  transition: transform 1.4s cubic-bezier(0.22, 0.7, 0.18, 1);
}
.engagement-v2-tile-img .engagement-v2-media { object-position: center 30%; }
.engagement-v2-tile-vid .engagement-v2-media { object-position: center center; }
.engagement-v2-tile:hover .engagement-v2-media { transform: scale(1.05); }

/* Soft scrim + caption ribbon at the bottom of each tile. */
.engagement-v2-tile::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, 0.42) 100%);
  pointer-events: none;
  transition: opacity 0.6s ease;
}
.engagement-v2-tile:hover::before { opacity: 0.6; }

.engagement-v2-cap {
  position: absolute;
  left: 28px;
  bottom: 24px;
  z-index: 2;
  font-size: 0.66rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: #fff;
  font-weight: 600;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.55);
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Footer: primary CTA + a quieter browse link. */
.engagement-v2-foot {
  margin-top: clamp(48px, 5vw, 72px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.engagement-v2-cta {
  /* Falls under the universal .btn-gold polish + animation. */
  background: var(--pp-green-deep) !important;
  color: #fff !important;
  padding: 18px 36px !important;
  border: none !important;
  letter-spacing: 0.26em;
  font-weight: 700;
}
.engagement-v2-cta:hover {
  background: var(--pp-ink-v2) !important;
  box-shadow: 0 24px 50px -20px rgba(31, 61, 46, 0.55), 0 0 36px rgba(188, 201, 183, 0.35) !important;
}
.engagement-v2-link {
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--pp-green-deep);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 3px;
  transition: border-color 0.35s, color 0.35s;
}
.engagement-v2-link:hover {
  color: var(--pp-ink-v2);
  border-bottom-color: var(--pp-green-deep);
}

@media (max-width: 780px) {
  .engagement-v2-grid {
    grid-template-columns: 1fr;
  }
  .engagement-v2-cap {
    left: 18px;
    bottom: 18px;
    font-size: 0.6rem;
    letter-spacing: 0.32em;
    padding: 6px 12px;
  }
  .engagement-v2-cta { padding: 16px 28px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .engagement-v2-media { transition: none !important; transform: none !important; }
}

/* ============================================================================
   HEADLINE MOTION — give every major headline italic accent a slow shimmer
   sweep + soft breathing glow. Calm, not theatrical, classy not gimmicky.
   Apply the .h-shimmer class to any headline; the italic <em> inside picks
   up the moving sheen, the parent picks up the breathing text-shadow.
   ============================================================================ */

/* Parent gets a soft breathing glow that sits behind the italic accent */
.h-shimmer {
  position: relative;
}

/* The italic accent — champagne gold sweep clipped to text, matches hero. */
.h-shimmer em {
  display: inline-block;
  position: relative;
  background-image: linear-gradient(
    100deg,
    #C9A55C 0%,
    #C9A55C 35%,
    #E8C16A 48%,
    #FFF1C4 50%,
    #E8C16A 52%,
    #C9A55C 65%,
    #C9A55C 100%
  );
  background-size: 280% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: hShimmer 7.2s ease-in-out 1.4s infinite;
  text-shadow: none !important;
}

/* On hero (dark background) the accent shimmers between sage and bright cream */
body .hero .hero-h-v2.h-shimmer em,
.hero-h-v2.h-shimmer em {
  background-image: linear-gradient(
    100deg,
    var(--pp-green-wall) 0%,
    var(--pp-green-wall) 35%,
    #DCE6D2 48%,
    #FFFFFF 50%,
    #DCE6D2 52%,
    var(--pp-green-wall) 65%,
    var(--pp-green-wall) 100%
  );
  background-size: 280% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: hShimmer 7.2s ease-in-out 1.4s infinite;
  text-shadow: none !important;
}

/* On the rings editorial (deep emerald) the accent shimmers in sage */
.edit-v2 .h-shimmer em {
  background-image: linear-gradient(
    100deg,
    var(--pp-green-wall) 0%,
    var(--pp-green-wall) 35%,
    #DCE6D2 48%,
    #FFFFFF 50%,
    #DCE6D2 52%,
    var(--pp-green-wall) 65%,
    var(--pp-green-wall) 100%
  );
  background-size: 280% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: hShimmer 7.2s ease-in-out 1.4s infinite;
}

@keyframes hShimmer {
  0%   { background-position: 100% 0; }
  55%  { background-position: -100% 0; }
  100% { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .h-shimmer em { animation: none !important; }
}

/* Green brand shader removed per user direction 2026-05-20.
   Pillar videos and services photographs render in their natural colour. */

@media (prefers-reduced-motion: reduce) {
  .services-section .srv-card .srv-img,
  .services-section .srv-card img { transition: none !important; }
}

/* ============================================================================
   ELEGANT DIVIDER STRIP — sits between major sections.
   A thin sage line each side, a small diamond ornament, a slow sheen sweep.
   ============================================================================ */
/* Scroll-down page breaker — same language as the rings editorial arrow.
   A circle with a down-arrow at centre, hairline rules either side,
   gently bobbing to invite the eye downward. */
.pp-divider {
  position: relative;
  width: 100%;
  height: 56px;
  margin: clamp(8px, 1vw, 14px) 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 0 clamp(20px, 4vw, 56px);
  overflow: hidden;
}
.pp-divider-rule {
  position: relative;
  flex: 1 1 0;
  height: 1px;
  max-width: 420px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(31, 61, 46, 0.0) 4%,
    rgba(31, 61, 46, 0.32) 60%,
    transparent 100%);
}
.pp-divider-rule-r {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(31, 61, 46, 0.32) 40%,
    rgba(31, 61, 46, 0.0) 96%,
    transparent 100%);
}
.pp-divider-scroll {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--pp-green-deep);
  flex-shrink: 0;
  animation: ppScrollPulse 3.4s ease-in-out infinite;
}
.pp-divider-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(31, 61, 46, 0.42);
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(6px) saturate(120%);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  color: var(--pp-green-deep);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 6px 18px -10px rgba(31, 61, 46, 0.4);
  animation: ppArrowBob 2.2s ease-in-out infinite;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.pp-divider-scroll:hover .pp-divider-arrow {
  background: var(--pp-green-deep);
  border-color: var(--pp-green-deep);
  color: #FFFFFF;
  transform: scale(1.05);
}
@keyframes ppScrollPulse {
  0%, 100% { opacity: 0.92; }
  50%      { opacity: 1; }
}
@keyframes ppArrowBob {
  0%, 100% { transform: translateY(0);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.6),
      0 6px 18px -10px rgba(31, 61, 46, 0.4); }
  50%      { transform: translateY(5px);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.75),
      0 10px 24px -10px rgba(31, 61, 46, 0.55),
      0 0 22px rgba(228, 236, 223, 0.5); }
}
@media (prefers-reduced-motion: reduce) {
  .pp-divider-scroll,
  .pp-divider-arrow { animation: none !important; }
}

/* ============================================================================
   CATEGORY TRIO — Earrings · Rings & Bracelets · Necklaces & Pendants.
   Sits directly under the engagement-rings section. World-class luxury cards.
   ============================================================================ */
.cat-trio {
  position: relative;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(31, 61, 46, 0.04) 0%, transparent 60%),
    linear-gradient(180deg, #FFFFFF 0%, #FBFBF7 14%, #F5F4EE 55%, #FBFBF7 100%);
  padding: clamp(14px, 2vw, 24px) clamp(20px, 4vw, 56px) clamp(20px, 2.4vw, 36px);
  overflow: hidden;
  isolation: isolate;
}
.cat-trio-dust {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
.cat-trio-head,
.cat-trio-grid,
.cat-trio-showcase { position: relative; z-index: 1; }

.cat-trio-head {
  text-align: center;
  max-width: 880px;
  margin: 0 auto clamp(24px, 3vw, 40px);
}
.cat-trio-eyebrow {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--pp-green-deep);
  font-weight: 500;
  margin-bottom: 22px;
}
.cat-trio-rule {
  width: 56px;
  height: 1px;
  margin: 0 auto 28px;
  background: linear-gradient(90deg, transparent 0%, var(--pp-green-deep) 50%, transparent 100%);
}
.cat-trio-h {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: clamp(2.6rem, 5.4vw, 5rem);
  line-height: 1.02;
  letter-spacing: -0.018em;
  margin: 0 0 22px;
  /* WHOLE headline gold with a slow flashing sweep */
  background: linear-gradient(
    105deg,
    #B58A35 0%,
    #C9A55C 28%,
    #E8C16A 46%,
    #FFF6D6 50%,
    #E8C16A 54%,
    #C9A55C 72%,
    #B58A35 100%
  );
  background-size: 260% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 1px 0 rgba(212, 175, 110, 0.12));
  animation: catTrioHGoldFlash 7s ease-in-out infinite;
}
.cat-trio-h em {
  font-style: italic;
  /* italic phrase gets a brighter, faster flash for emphasis */
  background: linear-gradient(
    105deg,
    #C9A55C 0%,
    #C9A55C 30%,
    #FFE9A8 48%,
    #FFFFFF 50%,
    #FFE9A8 52%,
    #C9A55C 70%,
    #C9A55C 100%
  );
  background-size: 240% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: catTrioHGoldFlashEm 5s ease-in-out infinite;
  filter: drop-shadow(0 0 12px rgba(255, 233, 168, 0.35));
}
@keyframes catTrioHGoldFlash {
  0%   { background-position: 100% 0; }
  50%  { background-position: 0% 0; }
  100% { background-position: -100% 0; }
}
@keyframes catTrioHGoldFlashEm {
  0%   { background-position: 100% 0; filter: drop-shadow(0 0 6px rgba(255, 233, 168, 0.2)); }
  50%  { background-position: 0% 0;   filter: drop-shadow(0 0 22px rgba(255, 246, 214, 0.75)); }
  100% { background-position: -100% 0; filter: drop-shadow(0 0 6px rgba(255, 233, 168, 0.2)); }
}
.cat-trio-sub {
  font-family: 'Inter', sans-serif;
  font-size: clamp(0.96rem, 1.1vw, 1.05rem);
  line-height: 1.7;
  color: #586259;
  font-weight: 300;
  max-width: 620px;
  margin: 0 auto;
}
/* Lead subhead — larger, darker, more confident */
.cat-trio-sub-lead {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  line-height: 1.55;
  color: var(--pp-ink-v2);
  max-width: 720px;
  margin: 0 auto;
  letter-spacing: -0.002em;
}

/* (Custom-commission card was removed per direction 2026-05-20 — the bespoke
   offer is now woven into the lead subhead instead of a separate panel.) */

.cat-trio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 1.8vw, 30px);
  max-width: 1180px;
  margin: 0 auto;
}

/* Card — whole card is the link */
.cat-card {
  display: block;
  text-decoration: none;
  color: inherit;
  outline: none;
}

.cat-card-frame {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  isolation: isolate;
  background: var(--pp-green-deep);
  box-shadow:
    0 24px 60px -30px rgba(31, 61, 46, 0.4),
    0 2px 0 rgba(31, 61, 46, 0.06);
  transition:
    transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1),
    box-shadow 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.cat-card-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 26%;
  display: block;
  transform: scale(1.02);
  transition: transform 1.6s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.9s ease;
  z-index: 1;
}

.cat-card-glow {
  position: absolute;
  inset: -2px;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(70% 50% at 50% 100%, rgba(188, 201, 183, 0.0) 0%, transparent 100%);
  transition: background 0.9s ease;
}

.cat-card-scrim {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(8, 16, 12, 0.56) 0%,
    rgba(8, 16, 12, 0.20) 15%,
    rgba(8, 16, 12, 0) 33%,
    rgba(8, 16, 12, 0) 55%,
    rgba(8, 16, 12, 0.32) 80%,
    rgba(8, 16, 12, 0.84) 100%);
  transition: background 0.7s ease;
}

/* Chapter eyebrow — pinned to the top of the frame */
.cat-card-eyebrow {
  position: absolute;
  left: 0; right: 0; top: 0;
  z-index: 4;
  padding: clamp(20px, 2.4vw, 30px) 16px 0;
  text-align: center;
  font-family: 'Inter', sans-serif;
  font-size: 0.64rem;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.86);
  font-weight: 500;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6);
}

/* Title — pinned to the bottom of the frame */
.cat-card-body {
  position: absolute;
  left: 0; right: 0; bottom: 0; top: auto;
  z-index: 4;
  padding: 0 clamp(18px, 2vw, 28px) clamp(22px, 2.6vw, 32px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: #FFFFFF;
}
.cat-card-h {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: clamp(1.7rem, 2.4vw, 2.4rem);
  line-height: 1.08;
  letter-spacing: 0.005em;
  color: #FFFFFF;
  margin: 0;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.72);
}

/* CTA — a visible, elegant button beneath each image */
.cat-card-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  width: fit-content;
  margin: clamp(16px, 1.8vw, 22px) auto 0;
  padding: 14px 28px;
  background: var(--pp-green-deep);
  border: 1px solid var(--pp-green-deep);
  box-shadow: 0 14px 30px -18px rgba(31, 61, 46, 0.6);
  transition: background 0.45s ease, color 0.45s ease, border-color 0.45s ease,
              box-shadow 0.45s ease, transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.cat-card-cta-text {
  font-family: 'Inter', sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #FFFFFF;
  font-weight: 600;
}
.cat-card-cta-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  width: 30px;
  color: #E8C16A;
  transition: width 0.5s cubic-bezier(0.2, 0.7, 0.2, 1),
              transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1),
              color 0.4s ease;
}
.cat-card-cta-arrow svg { display: block; }

/* Hover state */
.cat-card:hover .cat-card-frame {
  transform: translateY(-6px);
  box-shadow:
    0 40px 90px -32px rgba(31, 61, 46, 0.5),
    0 0 0 1px rgba(188, 201, 183, 0.45);
}
.cat-card:hover .cat-card-img {
  transform: scale(1.08);
  filter: brightness(1.04) contrast(1.02);
}
.cat-card:hover .cat-card-glow {
  background:
    radial-gradient(70% 50% at 50% 100%, rgba(188, 201, 183, 0.22) 0%, transparent 100%);
}
.cat-card:hover .cat-card-cta,
.cat-card:focus-visible .cat-card-cta {
  background: var(--pp-green-emerald);
  border-color: #E8C16A;
  box-shadow: 0 18px 38px -16px rgba(31, 61, 46, 0.7), 0 0 0 1px rgba(232, 193, 106, 0.28);
  transform: translateY(-2px);
}
.cat-card:hover .cat-card-cta-arrow {
  width: 44px;
  color: #FFF1C4;
  transform: translateX(4px);
}

.cat-card:focus-visible .cat-card-frame {
  box-shadow:
    0 24px 60px -30px rgba(31, 61, 46, 0.5),
    0 0 0 2px var(--pp-green-deep);
}

@media (max-width: 1100px) {
  .cat-trio-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; }
}
@media (max-width: 760px) {
  .cat-trio-grid { grid-template-columns: 1fr; gap: 22px; max-width: 460px; }
}
@media (max-width: 720px) {
  .cat-trio { padding: 60px 18px 72px; }
  .cat-trio-head { margin-bottom: 36px; }
  .cat-card-frame { aspect-ratio: 4 / 5; }
}

@media (prefers-reduced-motion: reduce) {
  .cat-card-frame,
  .cat-card-img,
  .cat-card-glow,
  .cat-card-scrim,
  .cat-card-cta,
  .cat-card-cta-arrow { transition: none !important; }
  .cat-trio-h em { animation: none; }
}

/* ============================================================================
   CHAPTER IV — "YOURS TO IMAGINE" card (a button) + bespoke reveal modal
   ============================================================================ */
.cat-card--imagine {
  -webkit-appearance: none; appearance: none;
  background: none; border: 0; margin: 0; padding: 0;
  width: 100%; font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.cat-card--imagine .cat-card-frame {
  box-shadow:
    0 0 0 1px rgba(232, 193, 106, 0.5),
    0 26px 60px -30px rgba(31, 61, 46, 0.5),
    0 0 30px rgba(232, 193, 106, 0.18);
}
.cat-card--imagine:hover .cat-card-frame,
.cat-card--imagine:focus-visible .cat-card-frame {
  box-shadow:
    0 0 0 2px rgba(232, 193, 106, 0.8),
    0 30px 70px -28px rgba(31, 61, 46, 0.55),
    0 0 40px rgba(232, 193, 106, 0.32);
}
.cat-card-imagine-spark {
  position: absolute; top: 14px; right: 16px; z-index: 5;
  font-size: 0.95rem; line-height: 1; color: #FFF1C4;
  text-shadow: 0 0 10px rgba(232, 193, 106, 0.9);
  animation: imagineSpark 3.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes imagineSpark {
  0%, 100% { opacity: 0.55; transform: scale(0.9) rotate(0deg); }
  50%      { opacity: 1;    transform: scale(1.15) rotate(22deg); }
}

.imagine-modal {
  position: fixed; inset: 0; z-index: 3000;
  display: grid; place-items: center;
  padding: clamp(16px, 4vw, 48px);
}
.imagine-modal[hidden] { display: none; }
.imagine-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(8, 16, 11, 0.80);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  opacity: 0; transition: opacity 0.5s ease;
}
.imagine-modal.is-open .imagine-modal-backdrop { opacity: 1; }
.imagine-modal-panel {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 0.92fr 1fr;
  width: 100%; max-width: 1060px; max-height: 92vh;
  overflow: hidden;
  background: linear-gradient(180deg, #16301F 0%, #0E1F16 100%);
  border: 1px solid rgba(232, 193, 106, 0.38);
  box-shadow: 0 60px 130px -40px rgba(0, 0, 0, 0.85), 0 0 40px rgba(232, 193, 106, 0.12);
  transform: translateY(24px) scale(0.985);
  opacity: 0;
  transition: transform 0.6s cubic-bezier(0.22, 0.7, 0.18, 1), opacity 0.5s ease;
}
.imagine-modal.is-open .imagine-modal-panel { transform: none; opacity: 1; }
@media (max-width: 860px) {
  .imagine-modal-panel { grid-template-columns: 1fr; max-height: 94vh; overflow-y: auto; }
}
.imagine-modal-media { position: relative; overflow: hidden; background: #0E1F16; }
@media (max-width: 860px) { .imagine-modal-media { aspect-ratio: 4 / 5; } }
.imagine-modal-img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.15s cubic-bezier(0.22, 0.7, 0.18, 1) 0.12s;
}
.imagine-modal.is-open .imagine-modal-img { clip-path: inset(0 0 0 0); }
.imagine-modal-sweep::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, transparent, #FFF1C4, transparent);
  box-shadow: 0 0 18px rgba(232, 193, 106, 0.9), 0 0 40px rgba(232, 193, 106, 0.5);
  opacity: 0;
}
.imagine-modal.is-open .imagine-modal-sweep::before { animation: imagineSweep 1.3s cubic-bezier(0.22, 0.7, 0.18, 1) 0.12s; }
@keyframes imagineSweep { 0% { top: 0; opacity: 0; } 12% { opacity: 1; } 86% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
.imagine-modal-close {
  position: absolute; top: 14px; right: 14px; z-index: 3;
  width: 40px; height: 40px; display: grid; place-items: center;
  background: rgba(8, 16, 11, 0.5); border: 1px solid rgba(232, 193, 106, 0.4);
  color: #ECEFE9; cursor: pointer; border-radius: 50%;
  transition: background 0.25s, border-color 0.25s, transform 0.35s;
}
.imagine-modal-close:hover { background: rgba(232, 193, 106, 0.2); border-color: #E8C16A; transform: rotate(90deg); }
.imagine-modal-copy {
  padding: clamp(28px, 3.4vw, 56px);
  display: flex; flex-direction: column; justify-content: center;
  color: #ECEFE9;
}
.imagine-modal-eyebrow {
  font: 600 0.7rem/1 "Inter", sans-serif; letter-spacing: 0.34em; text-transform: uppercase;
  color: #E8C16A; margin-bottom: 16px;
}
.imagine-modal-rule { display: block; width: 54px; height: 1px; margin: 0 0 22px; background: linear-gradient(90deg, #E8C16A, rgba(232, 193, 106, 0)); }
.imagine-modal-h {
  font-family: var(--serif, "Cormorant Garamond", serif); font-weight: 400;
  font-size: clamp(1.8rem, 3vw, 2.7rem); line-height: 1.08; color: #FFFFFF; margin: 0 0 18px; letter-spacing: -0.01em;
}
.imagine-modal-h em { font-style: italic; color: #E8C16A; }
.imagine-modal-p {
  font: 300 clamp(0.96rem, 1.1vw, 1.06rem)/1.7 "Inter", sans-serif; color: rgba(236, 239, 233, 0.86); margin: 0 0 30px; max-width: 46ch;
}
.imagine-modal-btn {
  align-self: flex-start;
  display: inline-flex; align-items: center;
  padding: 16px 30px;
  background: linear-gradient(180deg, #F0D284 0%, #E8C16A 55%, #B58A33 100%);
  color: #16301F; font: 700 0.7rem/1 "Inter", sans-serif; letter-spacing: 0.24em; text-transform: uppercase;
  text-decoration: none; border: 1px solid #E8C16A;
  box-shadow: 0 14px 32px -14px rgba(0, 0, 0, 0.6), 0 0 24px rgba(232, 193, 106, 0.3);
  transition: transform 0.3s, box-shadow 0.3s;
}
.imagine-modal-btn:hover { transform: translateY(-2px); box-shadow: 0 20px 40px -16px rgba(0, 0, 0, 0.7), 0 0 36px rgba(232, 193, 106, 0.5); }
@media (prefers-reduced-motion: reduce) {
  .imagine-modal-img { clip-path: none !important; transition: none; }
  .imagine-modal-sweep::before { display: none; }
  .imagine-modal-panel { transition: opacity 0.3s ease; transform: none; }
  .cat-card-imagine-spark { animation: none; }
}

/* ============================================================================
   CAT-CARD enhancements — animated brass corner ornaments, diagonal sheen,
   blurb under the headline, sharper hover lift.
   ============================================================================ */
.cat-card { position: relative; }

.cat-card-corner {
  position: absolute;
  width: 28px; height: 28px;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.cat-card-corner::before,
.cat-card-corner::after {
  content: '';
  position: absolute;
  background: linear-gradient(180deg, #E4C277 0%, #C9A55C 100%);
  box-shadow: 0 0 14px rgba(228, 194, 119, 0.5);
}
.cat-card-corner::before { width: 18px; height: 1px; }
.cat-card-corner::after  { width: 1px;  height: 18px; }

.cat-card-corner-tl { top: -1px; left: -1px; transform: translate(-6px, -6px); }
.cat-card-corner-tl::before { top: 0; left: 0; }
.cat-card-corner-tl::after  { top: 0; left: 0; }

.cat-card-corner-tr { top: -1px; right: -1px; transform: translate(6px, -6px); }
.cat-card-corner-tr::before { top: 0; right: 0; }
.cat-card-corner-tr::after  { top: 0; right: 0; }

.cat-card-corner-bl { bottom: -1px; left: -1px; transform: translate(-6px, 6px); }
.cat-card-corner-bl::before { bottom: 0; left: 0; }
.cat-card-corner-bl::after  { bottom: 0; left: 0; }

.cat-card-corner-br { bottom: -1px; right: -1px; transform: translate(6px, 6px); }
.cat-card-corner-br::before { bottom: 0; right: 0; }
.cat-card-corner-br::after  { bottom: 0; right: 0; }

.cat-card:hover .cat-card-corner,
.cat-card:focus-visible .cat-card-corner {
  opacity: 1;
  transform: translate(0, 0);
}

/* Diagonal light sweep across the card on hover */
.cat-card-sheen {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    transparent 0%,
    transparent 38%,
    rgba(255, 255, 255, 0.12) 48%,
    rgba(255, 255, 255, 0.32) 50%,
    rgba(255, 255, 255, 0.12) 52%,
    transparent 62%,
    transparent 100%
  );
  background-size: 220% 100%;
  background-position: 120% 0;
  transition: background-position 1.4s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.5s ease;
  opacity: 0.0;
  mix-blend-mode: screen;
}
.cat-card:hover .cat-card-sheen {
  opacity: 1;
  background-position: -120% 0;
}

/* Card blurb sits between the headline and the CTA */
/* Slow continuous breath on each card image so cards feel alive at rest */
.cat-card-img {
  animation: ccImgBreath 9s ease-in-out infinite;
}
.cat-card:nth-child(2) .cat-card-img { animation-delay: -3s; }
.cat-card:nth-child(3) .cat-card-img { animation-delay: -6s; }
@keyframes ccImgBreath {
  0%, 100% { transform: scale(1.02); }
  50%      { transform: scale(1.05); }
}
.cat-card:hover .cat-card-img {
  animation-play-state: paused;
  transform: scale(1.10);
}

@media (prefers-reduced-motion: reduce) {
  .cat-card-img { animation: none !important; }
  .cat-card-sheen { transition: none !important; }
  .cat-card-corner { transition: none !important; }
}

/* ============================================================================
   PLATAFRICA AWARDS — compact medallion plaque.
   Narrower, denser, ornate. Animated conic gold spin + shimmer sweep +
   floating gold dust + art-deco corner brackets. Reads as a luxury award seal.
   ============================================================================ */
.awards-inline {
  /* FULL-BLEED slim plaque — sits flush against the bespoke section above */
  position: relative;
  left: 50%;
  right: 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
  margin-top: 0;
  margin-bottom: 0;
  max-width: none;
  isolation: isolate;
  background: linear-gradient(180deg, #0D1E16 0%, #122a1f 50%, #091410 100%);
  color: #F6F1E3;
  border-top: 1px solid rgba(232, 193, 106, 0.45);
  border-bottom: 1px solid rgba(232, 193, 106, 0.45);
  overflow: hidden;
}
.awards-inline--slim .awards-inline-inner {
  position: relative;
  z-index: 1;
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 2.4vw, 32px);
  padding: clamp(14px, 1.4vw, 20px) clamp(24px, 4vw, 56px);
}
.awards-inline--slim .awards-seal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  filter: drop-shadow(0 0 10px rgba(232, 193, 106, 0.45));
}
.awards-inline--slim .awards-inline-divider {
  width: 1px;
  align-self: stretch;
  background: linear-gradient(180deg, transparent 0%, rgba(232, 193, 106, 0.55) 50%, transparent 100%);
  flex-shrink: 0;
}
.awards-inline--slim .awards-inline-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
}
.awards-inline--slim .awards-inline-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 0.58rem;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: #E8C16A;
  font-weight: 700;
  text-shadow: 0 0 10px rgba(232, 193, 106, 0.45);
  white-space: nowrap;
}
.awards-inline--slim .awards-inline-h {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: clamp(1.1rem, 1.5vw, 1.4rem);
  line-height: 1.15;
  letter-spacing: 0.005em;
  color: #FFFFFF;
  margin: 0;
  white-space: nowrap;
}
.awards-inline--slim .awards-inline-h em {
  font-style: italic;
  background: linear-gradient(100deg, #C9A55C 0%, #E8C16A 45%, #FFF1C4 50%, #E8C16A 55%, #C9A55C 100%);
  background-size: 240% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: hShimmer 6.5s ease-in-out infinite;
}
.awards-inline--slim .awards-inline-tags {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 8px;
  flex-shrink: 0;
}
.awards-inline--slim .awards-inline-tag {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  font-family: 'Inter', sans-serif;
  font-size: 0.54rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #F8E9C2;
  border: 1px solid rgba(232, 193, 106, 0.55);
  background: rgba(232, 193, 106, 0.06);
  font-weight: 600;
  white-space: nowrap;
}
@media (max-width: 880px) {
  .awards-inline--slim .awards-inline-inner {
    flex-wrap: wrap;
    gap: 14px;
    padding: 18px 24px;
  }
  .awards-inline--slim .awards-inline-divider { display: none; }
  .awards-inline--slim .awards-inline-text { align-items: center; text-align: center; }
  .awards-inline--slim .awards-inline-h { white-space: normal; }
}
/* Decorative hairlines just inside the top and bottom borders for that double-rule plaque feel */
.awards-inline::before,
.awards-inline::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(228, 194, 119, 0.45) 18%, rgba(228, 194, 119, 0.45) 82%, transparent 100%);
  pointer-events: none;
  z-index: 2;
}
.awards-inline::before { top: 5px; }
.awards-inline::after  { bottom: 5px; }

.awards-inline-orb {
  position: absolute;
  top: 50%; left: 50%;
  width: 80vw;
  max-width: 1400px;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%) rotate(0deg);
  background: conic-gradient(
    from 0deg at 50% 50%,
    transparent 0deg,
    rgba(228, 194, 119, 0.18) 25deg,
    transparent 60deg,
    transparent 165deg,
    rgba(255, 241, 196, 0.12) 195deg,
    transparent 230deg,
    transparent 340deg,
    rgba(228, 194, 119, 0.14) 360deg
  );
  filter: blur(50px);
  opacity: 0.95;
  animation: awardsOrbSpin 26s linear infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes awardsOrbSpin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

.awards-inline-shine {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    108deg,
    transparent 32%,
    rgba(255, 241, 196, 0.08) 46%,
    rgba(255, 241, 196, 0.24) 50%,
    rgba(255, 241, 196, 0.08) 54%,
    transparent 68%
  );
  transform: translateX(-110%);
  animation: awardsShine 8s ease-in-out infinite;
  z-index: 0;
}
@keyframes awardsShine {
  0%   { transform: translateX(-110%); }
  55%  { transform: translateX(110%); }
  100% { transform: translateX(110%); }
}

.awards-inline-particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.awards-inline-particles > span {
  position: absolute;
  width: 2.5px;
  height: 2.5px;
  bottom: -8px;
  border-radius: 50%;
  background: #F1D588;
  box-shadow: 0 0 6px rgba(228, 194, 119, 0.9), 0 0 14px rgba(228, 194, 119, 0.5);
  opacity: 0;
  animation: awardsParticleRise 11s linear infinite;
}
.awards-inline-particles > span:nth-child(1)  { left: 5%;  animation-delay: 0s;    animation-duration: 11s; }
.awards-inline-particles > span:nth-child(2)  { left: 14%; animation-delay: 2.6s;  animation-duration: 9.5s; }
.awards-inline-particles > span:nth-child(3)  { left: 22%; animation-delay: 4.4s;  animation-duration: 12s;  }
.awards-inline-particles > span:nth-child(4)  { left: 33%; animation-delay: 1.1s;  animation-duration: 10.5s;}
.awards-inline-particles > span:nth-child(5)  { left: 44%; animation-delay: 5.9s;  animation-duration: 13s;  }
.awards-inline-particles > span:nth-child(6)  { left: 56%; animation-delay: 0.6s;  animation-duration: 10s;  }
.awards-inline-particles > span:nth-child(7)  { left: 68%; animation-delay: 3.4s;  animation-duration: 9s;   }
.awards-inline-particles > span:nth-child(8)  { left: 79%; animation-delay: 6.3s;  animation-duration: 11.5s;}
.awards-inline-particles > span:nth-child(9)  { left: 88%; animation-delay: 1.9s;  animation-duration: 12.5s;}
.awards-inline-particles > span:nth-child(10) { left: 95%; animation-delay: 4.8s;  animation-duration: 10.5s;}
@keyframes awardsParticleRise {
  0%   { transform: translateY(0) scale(0.6); opacity: 0; }
  12%  { opacity: 0.95; }
  85%  { opacity: 0.7; }
  100% { transform: translateY(-260px) scale(1); opacity: 0; }
}

/* Corner brackets sit just inside the content area, not the screen edges,
   so they still frame the message even on ultra-wide displays. */
.awards-inline-corner {
  position: absolute;
  width: 20px;
  height: 20px;
  pointer-events: none;
  z-index: 2;
}
.awards-inline-corner::before,
.awards-inline-corner::after {
  content: '';
  position: absolute;
  box-shadow: 0 0 6px rgba(228, 194, 119, 0.5);
}
.awards-inline-corner::before { width: 20px; height: 1px; background: linear-gradient(90deg, rgba(255, 241, 196, 0.95), rgba(228, 194, 119, 0.55)); }
.awards-inline-corner::after  { width: 1px;  height: 20px; background: linear-gradient(180deg, rgba(255, 241, 196, 0.95), rgba(228, 194, 119, 0.55)); }
/* clamp() keeps brackets near the inner content even on wide screens */
.awards-inline-corner--tl { top: 18px; left: max(20px, calc(50% - 600px)); }
.awards-inline-corner--tl::before { top: 0; left: 0; }
.awards-inline-corner--tl::after  { top: 0; left: 0; }
.awards-inline-corner--tr { top: 18px; right: max(20px, calc(50% - 600px)); }
.awards-inline-corner--tr::before { top: 0; right: 0; }
.awards-inline-corner--tr::after  { top: 0; right: 0; }
.awards-inline-corner--bl { bottom: 18px; left: max(20px, calc(50% - 600px)); }
.awards-inline-corner--bl::before { bottom: 0; left: 0; }
.awards-inline-corner--bl::after  { bottom: 0; left: 0; }
.awards-inline-corner--br { bottom: 18px; right: max(20px, calc(50% - 600px)); }
.awards-inline-corner--br::before { bottom: 0; right: 0; }
.awards-inline-corner--br::after  { bottom: 0; right: 0; }

.awards-inline-inner {
  position: relative;
  z-index: 1;
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(160px, auto) 1px 1fr;
  align-items: center;
  gap: clamp(22px, 3vw, 48px);
  padding: clamp(28px, 3.2vw, 42px) clamp(40px, 6vw, 80px);
}
.awards-inline-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
}
.awards-inline-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.46em;
  text-transform: uppercase;
  color: #E8C16A;
  font-weight: 600;
  text-shadow: 0 0 12px rgba(228, 194, 119, 0.55);
}
.awards-inline-num {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(3.6rem, 6vw, 5.2rem);
  line-height: 0.88;
  background: linear-gradient(180deg, #FFF6D6 0%, #E8C16A 52%, #B58A35 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 0 18px rgba(228, 194, 119, 0.55));
  animation: awardsInlineNumGlow 3.6s ease-in-out infinite;
  position: relative;
}
.awards-inline-x {
  font-size: 0.5em;
  font-weight: 300;
  margin-left: 4px;
  vertical-align: 0.42em;
  opacity: 0.92;
}
@keyframes awardsInlineNumGlow {
  0%, 100% { filter: drop-shadow(0 0 12px rgba(212, 175, 110, 0.45)); }
  50%      { filter: drop-shadow(0 0 34px rgba(255, 241, 196, 0.95)); }
}
.awards-inline-sub {
  font-family: 'Inter', sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: rgba(246, 241, 227, 0.82);
  font-weight: 500;
}
.awards-inline-rule {
  width: 1px;
  height: 70%;
  align-self: center;
  background: linear-gradient(180deg, transparent 0%, rgba(228, 194, 119, 0.65) 50%, transparent 100%);
}
.awards-inline-body { padding-right: clamp(8px, 1.4vw, 18px); }
.awards-inline-h {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: clamp(1.15rem, 1.7vw, 1.55rem);
  line-height: 1.28;
  letter-spacing: -0.005em;
  color: #FFFFFF;
  margin: 0 0 10px;
}
.awards-inline-h em {
  font-style: italic;
  background: linear-gradient(100deg, #C9A55C 0%, #C9A55C 35%, #E8C16A 48%, #FFF1C4 50%, #E8C16A 52%, #C9A55C 65%, #C9A55C 100%);
  background-size: 280% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: hShimmer 6s ease-in-out infinite;
}
.awards-inline-tags {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 7px;
}
.awards-inline-tag {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  font-family: 'Inter', sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #F8E9C2;
  border: 1px solid rgba(228, 194, 119, 0.55);
  background: rgba(228, 194, 119, 0.06);
  font-weight: 500;
}

@media (max-width: 720px) {
  .awards-inline { max-width: calc(100% - 28px); }
  .awards-inline-inner {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 14px;
    padding: clamp(28px, 6vw, 36px) clamp(20px, 5vw, 28px);
  }
  .awards-inline-rule {
    width: 60%;
    height: 1px;
    justify-self: center;
    background: linear-gradient(90deg, transparent 0%, rgba(228, 194, 119, 0.65) 50%, transparent 100%);
  }
  .awards-inline-tags { justify-content: center; }
  .awards-inline-body { padding-right: 0; }
  .awards-inline-corner { width: 14px; height: 14px; }
  .awards-inline-corner::before { width: 14px; }
  .awards-inline-corner::after  { height: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .awards-inline-orb,
  .awards-inline-shine,
  .awards-inline-particles > span,
  .awards-inline-num,
  .awards-inline-h em { animation: none !important; }
}

/* ============================================================================
   ATELIER EDIT — second product marquee inside .cat-trio.
   Reuses .coll-marquee/.coll-product styling; just adds a tight inline head
   so the strip sits close to the trio without burning vertical space.
   ============================================================================ */
.cat-trio .coll-head--inline {
  margin: clamp(40px, 4.5vw, 64px) auto clamp(16px, 1.6vw, 24px);
  max-width: 720px;
}
.cat-trio .coll-head--inline .eyebrow.dark { font-size: 0.66rem; }
.cat-trio .coll-head--inline .coll-head-h {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(1.6rem, 2.6vw, 2.4rem);
  line-height: 1.12;
  color: var(--pp-ink-v2);
  margin: 10px 0 0;
  letter-spacing: -0.005em;
}
.cat-trio .coll-head--inline .coll-head-h em { font-style: italic; }
.cat-trio .coll-marquee { margin-top: clamp(14px, 1.6vw, 22px); }
.cat-trio .coll-foot { margin-top: clamp(20px, 2.4vw, 32px); }

/* ============================================================================
   CAT-TRIO TIMELINE — storytelling chapters under the headline.
   Four nodes connected by a thin sage-and-brass line. Chapter IV is the
   mystery: italicised, dashed dot, soft pulse — the open door into bespoke.
   ============================================================================ */
.cat-trio-timeline {
  list-style: none;
  margin: clamp(24px, 3vw, 40px) auto 0;
  max-width: 1080px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
  padding: clamp(20px, 2.4vw, 32px) clamp(8px, 2vw, 28px) clamp(14px, 2vw, 24px);
  background: transparent;
  border: 0;
  box-shadow: none;
  overflow: visible;
  isolation: isolate;
}
/* Connecting line — refined brass hairline against the white ground */
.cat-trio-timeline::before {
  content: "";
  position: absolute;
  left: clamp(48px, 11%, 130px);
  right: clamp(48px, 11%, 130px);
  top: calc(clamp(20px, 2.4vw, 32px) + 0.7rem + 14px + 5px);
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(181, 138, 53, 0.35) 12%,
    rgba(181, 138, 53, 0.85) 50%,
    rgba(181, 138, 53, 0.35) 88%,
    transparent 100%
  );
  transform-origin: left center;
  transform: scaleX(0);
  animation: catTrioLineDraw 1.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.25s forwards;
  z-index: 2;
}
@keyframes catTrioLineDraw {
  to { transform: scaleX(1); }
}
@keyframes catTrioLineGlow {
  0%, 100% { box-shadow: 0 0 6px rgba(232, 193, 106, 0.55), 0 0 16px rgba(232, 193, 106, 0.28); }
  50%      { box-shadow: 0 0 14px rgba(255, 233, 168, 0.95), 0 0 34px rgba(232, 193, 106, 0.60); }
}
.cat-trio-chap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 10px;
  z-index: 3;
  opacity: 0;
  transform: translateY(8px);
  animation: catTrioChapIn 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}
.cat-trio-chap:nth-child(1) { animation-delay: 0.30s; }
.cat-trio-chap:nth-child(2) { animation-delay: 0.65s; }
.cat-trio-chap:nth-child(3) { animation-delay: 1.00s; }
.cat-trio-chap:nth-child(4) { animation-delay: 1.40s; }
@keyframes catTrioChapIn {
  to { opacity: 1; transform: translateY(0); }
}
.cat-trio-chap-num {
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  margin-bottom: 14px;
  line-height: 1;
  color: #6B5018;
  background: none;
  -webkit-background-clip: initial;
          background-clip: initial;
  -webkit-text-fill-color: currentColor;
  animation: none;
}
@keyframes catTrioChapNumFlash {
  0%   { background-position: 100% 0; }
  55%  { background-position: -100% 0; }
  100% { background-position: -100% 0; }
}
.cat-trio-chap-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FFF6D6 0%, #E8C16A 45%, #B58A35 100%);
  box-shadow:
    0 0 0 3px #FFFFFF,
    0 0 0 4px rgba(181, 138, 53, 0.55),
    0 0 10px rgba(181, 138, 53, 0.25);
  margin-bottom: 18px;
  position: relative;
  z-index: 4;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  animation: catTrioDotGlow 3.6s ease-in-out infinite;
}
.cat-trio-chap:nth-child(2) .cat-trio-chap-dot { animation-delay: 0.6s; }
.cat-trio-chap:nth-child(3) .cat-trio-chap-dot { animation-delay: 1.2s; }
@keyframes catTrioDotGlow {
  0%, 100% {
    box-shadow:
      0 0 0 3px #FFFFFF,
      0 0 0 4px rgba(181, 138, 53, 0.45),
      0 0 8px rgba(181, 138, 53, 0.20);
  }
  50% {
    box-shadow:
      0 0 0 3px #FFFFFF,
      0 0 0 4px rgba(181, 138, 53, 0.85),
      0 0 16px rgba(232, 193, 106, 0.55);
  }
}
.cat-trio-chap-title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: clamp(1.15rem, 1.5vw, 1.45rem);
  line-height: 1.18;
  letter-spacing: 0.005em;
  margin-bottom: 7px;
  color: #14271C;
  background: none;
  -webkit-background-clip: initial;
          background-clip: initial;
  -webkit-text-fill-color: currentColor;
  animation: none;
  text-shadow: none;
}
.cat-trio-chap:nth-child(2) .cat-trio-chap-title { animation-delay: 0.9s; }
.cat-trio-chap:nth-child(3) .cat-trio-chap-title { animation-delay: 1.8s; }
.cat-trio-chap:nth-child(4) .cat-trio-chap-title { animation-delay: 2.7s; }
@keyframes catTrioChapTitleFlash {
  0%   { background-position: 100% 0; }
  55%  { background-position: -100% 0; }
  100% { background-position: -100% 0; }
}
.cat-trio-chap-sub {
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(31, 61, 46, 0.78);
  font-weight: 500;
  line-height: 1.5;
}

/* Chapter IV — the mystery: italic voice, dashed node, soft shimmer.
   Chap-num still gets the gold neon flash from .cat-trio-chap-num. */
.cat-trio-chap-mystery .cat-trio-chap-sub {
  font-style: italic;
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 0.82rem;
  color: rgba(20, 39, 28, 0.78);
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
}
.cat-trio-chap-mystery .cat-trio-chap-num {
  font-size: 0.78rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  font-style: italic;
}
.cat-trio-chap-mystery .cat-trio-chap-title {
  font-style: italic;
  background: linear-gradient(
    105deg,
    #5C4416 0%,
    #7A5C20 30%,
    #8C6B29 50%,
    #7A5C20 70%,
    #5C4416 100%
  );
  background-size: 260% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: catTrioChapTitleFlash 6s ease-in-out infinite;
}
/* The Chapter IV node is the whole story's hook — a clickable button that
   reads as a glowing, faceted "reveal" beacon. Bigger and brighter than the
   plain chapter dots so the eye is pulled straight to it. */
.cat-trio-mystery-trigger {
  -webkit-appearance: none;
          appearance: none;
  background: none;
  border: 0;
  margin: 0;
  padding: 0 4px 4px;
  width: 100%;
  font: inherit;
  color: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  isolation: isolate;
  border-radius: 16px;
  transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
}
/* Soft gold halo behind the column — marks it as the special, openable one */
.cat-trio-mystery-trigger::before {
  content: "";
  position: absolute;
  inset: -14px -8px -16px;
  z-index: -1;
  border-radius: 18px;
  background: radial-gradient(58% 56% at 50% 34%, rgba(232, 193, 106, 0.16) 0%, rgba(232, 193, 106, 0) 72%);
  opacity: 0.85;
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.cat-trio-mystery-trigger:hover,
.cat-trio-mystery-trigger:focus-visible {
  transform: translateY(-4px);
  outline: none;
}
.cat-trio-mystery-trigger:hover::before,
.cat-trio-mystery-trigger:focus-visible::before {
  opacity: 1;
  transform: scale(1.07);
}

.cat-trio-chap-mystery .cat-trio-chap-dot {
  width: 20px;
  height: 20px;
  margin-top: -5px;
  margin-bottom: 15px;
  border: 0;
  background: radial-gradient(circle at 38% 30%, #FFF7DC 0%, #F0D283 42%, #C99A3C 100%);
  display: grid;
  place-items: center;
  overflow: visible;
  animation: catTrioMystGem 3s ease-in-out infinite;
}
/* Expanding "ping" ring — the tap-me pulse */
.cat-trio-chap-mystery .cat-trio-chap-dot::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(232, 193, 106, 0.85);
  animation: catTrioMystPing 2.6s cubic-bezier(0.2, 0.7, 0.2, 1) infinite;
  pointer-events: none;
}
/* Slow dashed orbit ring — the mystical compass feel */
.cat-trio-chap-mystery .cat-trio-chap-dot::after {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 1px dashed rgba(181, 138, 53, 0.6);
  animation: catTrioMystSpin 9s linear infinite;
  pointer-events: none;
}
.cat-trio-mystery-spark {
  position: absolute;
  top: -11px;
  right: -12px;
  font-size: 0.72rem;
  line-height: 1;
  color: #FFF1C4;
  text-shadow: 0 0 8px rgba(232, 193, 106, 0.95);
  animation: imagineSpark 3.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes catTrioMystGem {
  0%, 100% {
    box-shadow:
      0 0 0 4px #FFFFFF,
      0 0 0 5px rgba(181, 138, 53, 0.70),
      0 0 14px rgba(232, 193, 106, 0.45);
    transform: scale(1);
  }
  50% {
    box-shadow:
      0 0 0 4px #FFFFFF,
      0 0 0 6px rgba(181, 138, 53, 1),
      0 0 26px rgba(255, 233, 168, 0.85);
    transform: scale(1.08);
  }
}
@keyframes catTrioMystPing {
  0%   { transform: scale(1);   opacity: 0.9; }
  70%  { transform: scale(2.7); opacity: 0; }
  100% { transform: scale(2.7); opacity: 0; }
}
@keyframes catTrioMystSpin {
  to { transform: rotate(360deg); }
}

/* "Open the Chapter" cue — the explicit click affordance under the title */
.cat-trio-mystery-cue {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 13px;
  font: 600 0.6rem/1 'Inter', sans-serif;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #8C6B29;
  animation: catTrioCuePulse 2.8s ease-in-out infinite;
}
.cat-trio-mystery-cue-text {
  position: relative;
}
.cat-trio-mystery-cue-text::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 1px;
  background: linear-gradient(90deg, rgba(181, 138, 53, 0.9), rgba(181, 138, 53, 0.2));
  transform: scaleX(0.4);
  transform-origin: left center;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.cat-trio-mystery-cue-arrow {
  transition: transform 0.4s ease;
}
.cat-trio-mystery-trigger:hover .cat-trio-mystery-cue-text::after,
.cat-trio-mystery-trigger:focus-visible .cat-trio-mystery-cue-text::after {
  transform: scaleX(1);
}
.cat-trio-mystery-trigger:hover .cat-trio-mystery-cue-arrow,
.cat-trio-mystery-trigger:focus-visible .cat-trio-mystery-cue-arrow {
  transform: translateX(5px);
}
@keyframes catTrioCuePulse {
  0%, 100% { opacity: 0.72; }
  50%      { opacity: 1; }
}

/* Tablet — keep horizontal but tighten */
@media (max-width: 820px) {
  .cat-trio-timeline { max-width: 680px; padding: 22px 14px 16px; }
  .cat-trio-chap-title { font-size: 1.1rem; }
  .cat-trio-chap-sub { font-size: 0.64rem; letter-spacing: 0.18em; }
  .cat-trio-chap-num { font-size: 0.62rem; letter-spacing: 0.36em; }
  .cat-trio-timeline::before { left: 12%; right: 12%; top: calc(22px + 0.62rem + 14px + 5px); }
}

/* Mobile — stack vertically with a centred connecting line */
@media (max-width: 600px) {
  .cat-trio-timeline {
    grid-template-columns: 1fr;
    gap: 22px;
    max-width: 360px;
    padding: 26px 18px;
  }
  .cat-trio-timeline::before {
    left: 50%;
    right: auto;
    top: 6px;
    bottom: 6px;
    width: 1px;
    height: auto;
    background: linear-gradient(
      180deg,
      transparent 0%,
      rgba(108, 132, 110, 0.45) 10%,
      rgba(178, 153, 110, 0.55) 55%,
      rgba(108, 132, 110, 0.40) 90%,
      transparent 100%
    );
    transform-origin: top center;
    transform: scaleY(0);
    animation: catTrioLineDrawV 1.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.25s forwards;
  }
  @keyframes catTrioLineDrawV {
    to { transform: scaleY(1); }
  }
  .cat-trio-chap { padding: 4px 0; }
  .cat-trio-chap-num { margin-bottom: 10px; }
  .cat-trio-chap-dot { margin-bottom: 12px; }
  .cat-trio-chap-title { font-size: 1.2rem; }
  .cat-trio-chap-sub { font-size: 0.68rem; }
}

@media (prefers-reduced-motion: reduce) {
  .cat-trio-timeline::before,
  .cat-trio-chap { animation: none !important; opacity: 1; transform: none; }
  .cat-trio-timeline::before { transform: scaleX(1); }
  .cat-trio-chap-mystery .cat-trio-chap-title,
  .cat-trio-chap-mystery .cat-trio-chap-dot,
  .cat-trio-chap-mystery .cat-trio-chap-dot::after,
  .cat-trio-mystery-spark,
  .cat-trio-mystery-cue { animation: none !important; }
  .cat-trio-chap-mystery .cat-trio-chap-dot::before { display: none; }
  .cat-trio-mystery-trigger { transition: none; }
}

/* ============================================================================
   BESPOKE ATELIER — three-column hero panel: image | copy | image.
   Sits between the cat-trio collection chapter and the PlatAfrica ribbon.
   Bottom margin is ZERO so the deep-emerald ground flows directly into the
   awards-inline panel below, merging them into one continuous dark band.
   ============================================================================ */
/* ============================================================================
   BESPOKE ATELIER — white editorial ground (mirrors engagement-v3 language).
   Three-column stage: image | centred copy | image. Full-bleed wide background
   that breaks out of the page container above the dark PlatAfrica panel.
   ============================================================================ */
.bespoke-atelier {
  position: relative;
  margin: clamp(56px, 7vw, 96px) calc(-1 * clamp(20px, 4vw, 56px)) 0;
  padding: clamp(56px, 6.5vw, 110px) clamp(24px, 5vw, 88px) clamp(28px, 3vw, 48px);
  background: #FFFFFF;
  overflow: hidden;
  isolation: isolate;
}
/* Soft sage radials — depth without colour-blocking. Mirrors engagement-v3. */
.bespoke-atelier::before {
  content: '';
  position: absolute;
  top: -8%; left: -10%;
  width: 60%; height: 60%;
  background: radial-gradient(ellipse at center, rgba(228, 236, 223, 0.58) 0%, rgba(228, 236, 223, 0) 70%);
  pointer-events: none;
  z-index: 0;
}
.bespoke-atelier::after {
  content: '';
  position: absolute;
  bottom: -8%; right: -10%;
  width: 55%; height: 55%;
  background: radial-gradient(ellipse at center, rgba(188, 201, 183, 0.38) 0%, rgba(188, 201, 183, 0) 72%);
  pointer-events: none;
  z-index: 0;
}

.bespoke-atelier-dust {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* Centred intro: eyebrow + rule + headline */
.bespoke-atelier-intro {
  position: relative;
  z-index: 2;
  max-width: 1320px;
  margin: 0 auto clamp(36px, 4vw, 60px);
  text-align: center;
  padding: 0 12px;
}

.bespoke-atelier-eyebrow {
  display: inline-block;
  font: 700 0.74rem/1 "Inter", sans-serif;
  letter-spacing: 0.46em;
  text-transform: uppercase;
  color: var(--pp-green-deep);
  margin-bottom: 12px;
}

.bespoke-atelier-rule {
  width: 42px;
  height: 1px;
  background: var(--pp-green-deep);
  margin: 0 auto 18px;
  position: relative;
}
.bespoke-atelier-rule::before,
.bespoke-atelier-rule::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 5px; height: 5px;
  background: var(--pp-green-deep);
  transform: translateY(-50%) rotate(45deg);
}
.bespoke-atelier-rule::before { left: -12px; }
.bespoke-atelier-rule::after  { right: -12px; }

.bespoke-atelier-h {
  position: relative;
  font-family: var(--serif, "Cormorant Garamond", "Playfair Display", serif);
  font-weight: 400;
  font-size: clamp(2.4rem, 5vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--pp-ink-v2);
  margin: 0;
}
.bespoke-atelier-h em { font-style: italic; }

/* Champagne-gold shimmer on the italic accent — matches engagement-v3 */
.bespoke-atelier .h-shimmer em {
  background-image: linear-gradient(
    100deg,
    #C9A55C 0%,
    #C9A55C 35%,
    #E8C16A 48%,
    #FFF1C4 50%,
    #E8C16A 52%,
    #C9A55C 65%,
    #C9A55C 100%
  ) !important;
  background-size: 280% 100% !important;
  background-position: 100% 0 !important;
  -webkit-background-clip: text !important;
          background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  animation: hShimmer 7.2s ease-in-out 1.4s infinite !important;
  text-shadow: none !important;
}

/* Three-column stage: image | copy | image */
.bespoke-atelier-stage {
  position: relative;
  z-index: 2;
  max-width: 1480px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 3.4vw, 44px);
  align-items: stretch;
}
@media (min-width: 980px) {
  .bespoke-atelier-stage {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(20px, 2.4vw, 36px);
  }
}

/* Image cards — full image, no frame, no corner brackets, no badge tag. */
.bespoke-atelier-media {
  position: relative;
  margin: 0;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--pp-green-emerald);
  box-shadow:
    0 38px 80px -38px rgba(31, 61, 46, 0.55),
    0 0 0 1px rgba(31, 61, 46, 0.08);
  transition: transform 0.7s cubic-bezier(0.22, 0.7, 0.18, 1),
              box-shadow 0.7s cubic-bezier(0.22, 0.7, 0.18, 1);
}
.bespoke-atelier-media:hover {
  transform: translateY(-4px);
  box-shadow:
    0 56px 100px -46px rgba(31, 61, 46, 0.65),
    0 0 0 1px rgba(31, 61, 46, 0.14);
}
@media (max-width: 979px) {
  .bespoke-atelier-media { max-width: 540px; aspect-ratio: 1 / 1; justify-self: center; }
}

.bespoke-atelier-img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 18%;
  transform: scale(1.01);
  transition: transform 1.4s cubic-bezier(0.22, 0.7, 0.18, 1);
}
.bespoke-atelier-media--right .bespoke-atelier-img { object-position: center 30%; }
.bespoke-atelier-media:hover .bespoke-atelier-img { transform: scale(1.05); }

/* Centre copy column — text-only, between the two images */
.bespoke-atelier-copy {
  position: relative;
  z-index: 2;
  align-self: center;
  text-align: center;
  max-width: 480px;
  margin: 0 auto;
  color: var(--pp-ink-v2);
  padding: 0 clamp(4px, 1vw, 14px);
}

.bespoke-atelier-mini {
  display: inline-flex;
  align-items: center;
  font: 700 0.62rem/1 "Inter", sans-serif;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--pp-green-deep);
  margin-bottom: 18px;
}

.bespoke-atelier-p {
  font-family: "Inter", system-ui, sans-serif;
  font-size: clamp(1rem, 1.1vw, 1.12rem);
  line-height: 1.78;
  color: #4A554D;
  font-weight: 300;
  margin: 0 auto clamp(26px, 2.8vw, 36px);
  max-width: 440px;
}

/* Numbered process tiles — quiet card on white */
.bespoke-atelier-list {
  list-style: none;
  margin: 0 auto clamp(28px, 3vw, 40px);
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  max-width: 460px;
  text-align: left;
}
@media (min-width: 520px) {
  .bespoke-atelier-list { grid-template-columns: 1fr 1fr; gap: 10px 12px; }
}
.bespoke-atelier-list li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px 18px 22px;
  font-family: "Inter", sans-serif;
  font-size: 0.92rem;
  letter-spacing: 0.01em;
  line-height: 1.32;
  color: var(--pp-ink-v2);
  font-weight: 500;
  background: linear-gradient(155deg, #FFFFFF 0%, rgba(228, 236, 223, 0.35) 100%);
  border: 1px solid rgba(31, 61, 46, 0.22);
  border-top: 2px solid #E8C16A;
  border-radius: 0;
  box-shadow:
    0 1px 0 rgba(232, 193, 106, 0.35) inset,
    0 12px 26px -14px rgba(31, 61, 46, 0.22);
  transition: border-color 0.4s ease, background 0.4s ease, transform 0.4s ease, box-shadow 0.4s ease;
  overflow: hidden;
}
.bespoke-atelier-list li::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(120deg,
    transparent 30%,
    rgba(255, 245, 200, 0.55) 50%,
    transparent 70%);
  transform: translateX(-110%);
  transition: transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.bespoke-atelier-list li:hover {
  border-color: rgba(31, 61, 46, 0.45);
  border-top-color: #E8C16A;
  background: linear-gradient(155deg, #FFFFFF 0%, rgba(188, 201, 183, 0.45) 100%);
  transform: translateY(-3px);
  box-shadow:
    0 1px 0 rgba(232, 193, 106, 0.65) inset,
    0 20px 38px -16px rgba(31, 61, 46, 0.35);
}
.bespoke-atelier-list li:hover::before { transform: translateX(110%); }

.bespoke-atelier-num {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif, "Cormorant Garamond", serif);
  font-style: italic;
  font-size: 1.2rem;
  line-height: 1;
  background: linear-gradient(180deg, #FFF6D6 0%, #E8C16A 55%, #8C6B29 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  letter-spacing: -0.02em;
  border: 1px solid rgba(232, 193, 106, 0.55);
  border-radius: 50%;
  box-shadow:
    0 0 0 1px rgba(255, 245, 200, 0.6) inset,
    0 0 12px rgba(232, 193, 106, 0.35);
}
.bespoke-atelier-li-title {
  flex: 1 1 auto;
  display: block;
  font-weight: 500;
}

.bespoke-atelier-cta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 16px 24px;
  margin-top: 8px;
}

.bespoke-atelier-cta {
  background: var(--pp-green-deep) !important;
  color: #fff !important;
  border: none !important;
  padding: 18px 32px !important;
  letter-spacing: 0.22em;
  font-weight: 700;
  font-size: 0.66rem !important;
}
.bespoke-atelier-cta:hover {
  background: var(--pp-ink-v2) !important;
  box-shadow:
    0 24px 50px -20px rgba(31, 61, 46, 0.55),
    0 0 36px rgba(188, 201, 183, 0.4) !important;
}

.bespoke-atelier-secondary {
  position: relative;
  font: 600 0.7rem/1 "Inter", sans-serif;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--pp-green-deep);
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.bespoke-atelier-secondary:hover {
  color: var(--pp-ink-v2);
  border-bottom-color: var(--pp-green-deep);
}

@media (max-width: 720px) {
  .bespoke-atelier {
    margin: 40px calc(-1 * clamp(20px, 4vw, 56px)) 0;
    padding: 56px 22px 64px;
  }
  .bespoke-atelier-intro { margin-bottom: 30px; }
  .bespoke-atelier-stage { gap: 26px; }
  .bespoke-atelier-cta { padding: 16px 28px !important; }
  .bespoke-atelier-cta-row { gap: 14px 22px; }
  .bespoke-atelier-list { gap: 8px; }
  .bespoke-atelier-list li { padding: 12px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .bespoke-atelier-media,
  .bespoke-atelier-img,
  .bespoke-atelier-list li,
  .bespoke-atelier-secondary { transition: none !important; transform: none !important; }
}

/* ============================================================================
   BESPOKE ATELIER — cinematic film band
   Sits ABOVE the eyebrow / headline inside .bespoke-atelier. Silent loop of
   the goldsmiths and designers at work, framed with brass corner ticks and a
   slow sweeping light rail. Mirrors the cinematography of the live site's
   "Jewellery Designers" hero, brought inside the editorial layout.
   ============================================================================ */
.bespoke-atelier-film {
  position: relative;
  z-index: 2;
  /* Full-bleed: break out of the section's padding and span the viewport */
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: 0;
  margin-bottom: 0;
  aspect-ratio: 21 / 9;
  overflow: hidden;
  background: var(--pp-green-emerald, #1F3D2E);
  box-shadow:
    0 1px 0 rgba(232, 193, 106, 0.30) inset,
    0 48px 110px -54px rgba(31, 61, 46, 0.55);
  isolation: isolate;
}
@media (max-width: 720px) {
  .bespoke-atelier-film { aspect-ratio: 4 / 5; margin-bottom: 38px; }
}
.bespoke-atelier-film-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  filter: brightness(0.92) saturate(1.04) contrast(1.05);
}
.bespoke-atelier-film-scrim {
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(60% 55% at 50% 50%, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.0) 80%),
    linear-gradient(180deg, rgba(20,24,26,0.35) 0%, rgba(20,24,26,0) 28%, rgba(20,24,26,0) 60%, rgba(20,24,26,0.55) 100%);
}
/* Centered overlay headline — large, gold-italic, with breath */
.bespoke-atelier-film-title {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: clamp(24px, 4vw, 56px);
  pointer-events: none;
}
.bespoke-atelier-film-title-eyebrow {
  display: inline-block;
  font: 600 0.7rem/1 "Inter", system-ui, sans-serif;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: #E8C16A;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(232, 193, 106, 0.45);
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.55);
}
.bespoke-atelier-film-title-h {
  font-family: 'Cormorant Garamond', 'Georgia', serif;
  font-weight: 400;
  font-size: clamp(2.2rem, 4.4vw, 4.2rem);
  line-height: 1.04;
  letter-spacing: -0.012em;
  color: #FFFFFF;
  margin: 0 0 16px;
  text-shadow:
    0 4px 36px rgba(0, 0, 0, 0.7),
    0 0 28px rgba(0, 0, 0, 0.5);
  max-width: 920px;
}
.bespoke-atelier-film-title-h em {
  font-style: italic;
  color: #E8C16A;
  font-weight: 500;
  text-shadow:
    0 4px 36px rgba(0, 0, 0, 0.7),
    0 0 18px rgba(232, 193, 106, 0.5);
}
.bespoke-atelier-film-title-sub {
  font-family: 'Cormorant Garamond', 'Georgia', serif;
  font-style: italic;
  font-size: clamp(1.05rem, 1.4vw, 1.32rem);
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.92);
  margin: 0;
  max-width: 720px;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.6);
}
@media (max-width: 720px) {
  .bespoke-atelier-film-title-h { font-size: clamp(1.7rem, 8vw, 2.4rem); }
  .bespoke-atelier-film-title-sub { font-size: 1rem; }
}

/* Caption — bottom-left "Inside the Atelier · Huguenot House · Cape Town" */
.bespoke-atelier-film-caption {
  position: absolute;
  left: clamp(18px, 3vw, 40px);
  bottom: clamp(18px, 3vw, 36px);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: clamp(10px, 1.4vw, 18px);
  padding: 12px 18px;
  background: rgba(20, 24, 26, 0.42);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(232, 193, 106, 0.32);
}
.bespoke-atelier-film-eyebrow {
  font: 600 0.66rem/1 "Inter", system-ui, sans-serif;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: #E8C16A;
  text-shadow: 0 1px 8px rgba(0,0,0,0.4);
}
.bespoke-atelier-film-line {
  display: inline-block;
  width: 28px; height: 1px;
  background: linear-gradient(90deg, rgba(232,193,106,0.0), rgba(232,193,106,0.85), rgba(232,193,106,0.0));
}
.bespoke-atelier-film-place {
  font: 500 0.62rem/1 "Inter", system-ui, sans-serif;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.86);
}
/* Brass corner ticks — same language as the team card frames */
.bespoke-atelier-film-corner {
  position: absolute;
  width: 22px; height: 22px;
  z-index: 4;
  pointer-events: none;
}
.bespoke-atelier-film-corner::before,
.bespoke-atelier-film-corner::after {
  content: '';
  position: absolute;
  background: #E8C16A;
  box-shadow: 0 0 8px rgba(232, 193, 106, 0.6);
}
.bespoke-atelier-film-corner::before { width: 100%; height: 1px; }
.bespoke-atelier-film-corner::after  { width: 1px;  height: 100%; }
.bespoke-atelier-film-corner--tl { top: 10px;    left: 10px; }
.bespoke-atelier-film-corner--tr { top: 10px;    right: 10px; }
.bespoke-atelier-film-corner--tr::before { right: 0; }
.bespoke-atelier-film-corner--tr::after  { right: 0; }
.bespoke-atelier-film-corner--bl { bottom: 10px; left: 10px; }
.bespoke-atelier-film-corner--bl::before { bottom: 0; }
.bespoke-atelier-film-corner--bl::after  { bottom: 0; }
.bespoke-atelier-film-corner--br { bottom: 10px; right: 10px; }
.bespoke-atelier-film-corner--br::before { bottom: 0; right: 0; }
.bespoke-atelier-film-corner--br::after  { bottom: 0; right: 0; }
/* Gentle pulse on the brass corners */
.bespoke-atelier-film-corner::before,
.bespoke-atelier-film-corner::after {
  animation: baFilmCornerPulse 3.6s ease-in-out infinite;
}
@keyframes baFilmCornerPulse {
  0%, 100% { opacity: 0.7; }
  50%      { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .bespoke-atelier-film-corner::before,
  .bespoke-atelier-film-corner::after { animation: none !important; }
}

/* ============================================================================
   H-SHEEN — gleaming light sweep clipped to the TEXT itself (not the box).
   Previous box-overlay implementation showed a visible rectangle artifact.
   This version animates a moving cream/gold peak across the headline's
   background-clip: text, so the shine appears ONLY on the letters.
   The italic <em> keeps its own gold shimmer because it has its own
   background-image with !important. The non-italic letters animate from
   cream → bright white peak → cream.
   ============================================================================ */
.h-sheen {
  /* Animate the base text color via a moving cream-to-white-to-cream gradient,
     clipped to the type. Dark-ground default. Light-ground variant overrides
     the gradient with ink/gold for contexts like the engagement section. */
  background-image: linear-gradient(
    100deg,
    #FBF8EE 0%,
    #FBF8EE 38%,
    #FFFFFF 48%,
    #FFF8E0 50%,
    #FFFFFF 52%,
    #FBF8EE 62%,
    #FBF8EE 100%
  );
  background-size: 250% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: hSheen 8s ease-in-out 1.4s infinite;
}

/* Light-ground variant: the engagement section sits on white. The base text
   is ink-dark with a champagne-gold peak moving across it. */
.engagement-v3 .h-sheen,
.h-sheen.h-sheen--light {
  background-image: linear-gradient(
    100deg,
    #1A211C 0%,
    #1A211C 38%,
    rgba(201, 165, 92, 0.85) 47%,
    #FFF1C4 50%,
    rgba(201, 165, 92, 0.85) 53%,
    #1A211C 62%,
    #1A211C 100%
  );
  background-size: 250% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

@keyframes hSheen {
  0%   { background-position: 200% 0; }
  55%  { background-position: -100% 0; }
  100% { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .h-sheen { animation: none !important; background-position: 50% 0 !important; }
}

/* ============================================================================
   AWARDS-INLINE — HERO VARIANT.
   Sits flush against the bespoke-atelier section above (no top margin),
   amplified into a full achievement panel: laurel wreath flanking the 12×,
   richer typography, paragraph context, dotted tag chips, more breathing room.
   ============================================================================ */
.awards-inline--hero {
  margin-top: 0 !important;
  background:
    radial-gradient(70% 130% at 50% 50%, rgba(232, 193, 106, 0.16) 0%, transparent 60%),
    linear-gradient(180deg, #0E1F16 0%, #1B3A2C 50%, #0C1A12 100%);
  border-top: 1px solid rgba(232, 193, 106, 0.55) !important;
  border-bottom: 1px solid rgba(232, 193, 106, 0.55) !important;
}
.awards-inline--hero .awards-inline-inner {
  max-width: 1240px;
  grid-template-columns: minmax(220px, auto) 1px 1fr;
  align-items: center;
  gap: clamp(28px, 4vw, 64px);
  padding: clamp(56px, 6.5vw, 96px) clamp(40px, 6vw, 96px);
}

/* The 12× wrapped with laurels */
.awards-inline-numwrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
}
.awards-laurel {
  width: clamp(40px, 4.5vw, 64px);
  height: auto;
  filter: drop-shadow(0 0 12px rgba(232, 193, 106, 0.45));
  flex: 0 0 auto;
  opacity: 0.95;
}
.awards-laurel--l { margin-right: -8px; }
.awards-laurel--r { margin-left:  -8px; }

.awards-inline--hero .awards-inline-num {
  font-size: clamp(5rem, 8.5vw, 8rem);
  line-height: 0.86;
  background: linear-gradient(180deg, #FFF6D6 0%, #FFE8A8 32%, #E8C16A 62%, #8C6B29 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  filter:
    drop-shadow(0 0 22px rgba(232, 193, 106, 0.65))
    drop-shadow(0 4px 18px rgba(0, 0, 0, 0.55));
}
.awards-inline--hero .awards-inline-x {
  font-size: 0.42em;
  margin-left: 6px;
  vertical-align: 0.52em;
}
.awards-inline--hero .awards-inline-eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.5em;
  margin-bottom: 14px;
}
.awards-inline--hero .awards-inline-sub {
  font-size: 0.7rem;
  letter-spacing: 0.42em;
  margin-top: 14px;
  color: rgba(255, 241, 196, 0.92);
}

.awards-inline-kicker {
  display: inline-block;
  font: 600 0.68rem/1 "Inter", sans-serif;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: #E8C16A;
  margin-bottom: 14px;
  text-shadow: 0 0 12px rgba(232, 193, 106, 0.42);
}

.awards-inline--hero .awards-inline-h {
  font-size: clamp(1.55rem, 2.5vw, 2.4rem);
  line-height: 1.18;
  margin-bottom: 16px;
  color: #FBF8EE;
}

.awards-inline-p {
  font: 400 0.96rem/1.7 "Inter", sans-serif;
  color: rgba(246, 241, 227, 0.82);
  margin: 0 0 22px;
  max-width: 580px;
}

.awards-inline--hero .awards-inline-tag {
  padding: 8px 16px;
  font-size: 0.65rem;
  letter-spacing: 0.34em;
  background: rgba(232, 193, 106, 0.09);
  border-color: rgba(232, 193, 106, 0.70);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 0.4s ease, border-color 0.4s ease, color 0.4s ease, transform 0.4s ease;
}
.awards-inline--hero .awards-inline-tag:hover {
  background: rgba(232, 193, 106, 0.18);
  border-color: rgba(255, 241, 196, 0.95);
  color: #FFF8E0;
  transform: translateY(-1px);
}
.awards-inline-tag-dot {
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #E8C16A;
  box-shadow: 0 0 6px rgba(232, 193, 106, 0.85);
}

.awards-inline--hero .awards-inline-rule {
  height: 78%;
}

/* Mobile: stack the stat above the body, reduce padding */
@media (max-width: 880px) {
  .awards-inline--hero .awards-inline-inner {
    grid-template-columns: 1fr;
    text-align: center;
    gap: clamp(22px, 3vw, 36px);
    padding: clamp(48px, 6.5vw, 72px) clamp(24px, 6vw, 40px);
  }
  .awards-inline--hero .awards-inline-rule { display: none; }
  .awards-inline-p { margin-left: auto; margin-right: auto; }
  .awards-inline-tags { justify-content: center; }
  .awards-laurel { width: 38px; }
}

@media (max-width: 480px) {
  .awards-inline--hero .awards-inline-num { font-size: 4.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .awards-inline--hero .awards-inline-tag { transition: none !important; }
}

/* ============================================================================
   PLATAFRICA — SLIM FULL-BLEED BAND (2026-05-20, revised)
   Edge-to-edge dark green band, flush with the section above. About a third of
   the previous boxed plaque's height: tight vertical padding, smaller 9, body
   copy condensed into a single inline column. Reads as a refined laurel seal.
   ============================================================================ */
.awards-inline.awards-inline--hero {
  /* restore full-bleed edge-to-edge band */
  position: relative;
  left: 50% !important;
  right: 50% !important;
  width: 100vw !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  max-width: none !important;
  border-radius: 0 !important;
  overflow: hidden;
}
.awards-inline.awards-inline--hero .awards-inline-inner {
  max-width: 1320px;
  grid-template-columns: minmax(180px, auto) 1px 1fr;
  align-items: center;
  gap: clamp(24px, 3.4vw, 56px);
  /* Slim vertical padding — the band is now a third of its previous height */
  padding: clamp(18px, 2vw, 28px) clamp(28px, 5vw, 72px);
}
.awards-inline.awards-inline--hero .awards-inline-corner--tl,
.awards-inline.awards-inline--hero .awards-inline-corner--tr { top: 10px; }
.awards-inline.awards-inline--hero .awards-inline-corner--bl,
.awards-inline.awards-inline--hero .awards-inline-corner--br { bottom: 10px; }

/* Tighter eyebrow + sub, with a brass hairline above and below the 12× block */
.awards-inline.awards-inline--hero .awards-inline-stat {
  gap: 6px;
  position: relative;
}
.awards-inline.awards-inline--hero .awards-inline-eyebrow {
  font-size: 0.56rem;
  letter-spacing: 0.48em;
  margin-bottom: 4px;
  position: relative;
  padding-bottom: 8px;
}
.awards-inline.awards-inline--hero .awards-inline-eyebrow::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 56px;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(232, 193, 106, 0.85) 50%, transparent 100%);
}
.awards-inline.awards-inline--hero .awards-inline-sub {
  font-size: 0.56rem;
  letter-spacing: 0.42em;
  margin-top: 4px;
  position: relative;
  padding-top: 8px;
  color: rgba(255, 241, 196, 0.95);
}
.awards-inline.awards-inline--hero .awards-inline-sub::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 56px;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(232, 193, 106, 0.85) 50%, transparent 100%);
}

/* Refined, more elegant 9 — slightly smaller, softer glow, calmer pulse */
.awards-inline.awards-inline--hero .awards-inline-num {
  font-size: clamp(3.4rem, 5.2vw, 5rem);
  line-height: 0.9;
  filter:
    drop-shadow(0 0 18px rgba(255, 232, 168, 0.75))
    drop-shadow(0 0 42px rgba(232, 193, 106, 0.42))
    drop-shadow(0 3px 10px rgba(0, 0, 0, 0.55));
  animation: awardsNumPulse 5.4s ease-in-out infinite;
}
@keyframes awardsNumPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.02); }
}

/* Smaller radial glow burst — tuned to the slimmer band */
.awards-burst {
  position: absolute;
  top: 50%; left: 50%;
  width: 160px; height: 160px;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle at center,
      rgba(255, 241, 196, 0.40) 0%,
      rgba(232, 193, 106, 0.26) 28%,
      rgba(232, 193, 106, 0.08) 52%,
      transparent 72%);
  filter: blur(8px);
  pointer-events: none;
  z-index: 0;
  animation: awardsBurstBreath 5.6s ease-in-out infinite;
}
@keyframes awardsBurstBreath {
  0%, 100% { opacity: 0.8; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.06); }
}

/* The numwrap needs the 9, laurels, and stars layered above the burst */
.awards-inline-numwrap { position: relative; }
.awards-inline-numwrap .awards-laurel,
.awards-inline-numwrap .awards-inline-num { position: relative; z-index: 2; }

/* Four award-star sparkles at the corners of the 9 — sized for the slimmer band */
.awards-star {
  position: absolute;
  width: 12px;
  height: 12px;
  z-index: 3;
  filter: drop-shadow(0 0 6px rgba(255, 232, 168, 0.85));
  animation: awardsStarTwinkle 3.6s ease-in-out infinite;
}
.awards-star--tl { top: 2px;   left: -2px;  animation-delay: 0s; }
.awards-star--tr { top: 2px;   right: -2px; animation-delay: 0.9s; }
.awards-star--bl { bottom: 6px; left: -2px;  animation-delay: 1.8s; width: 9px;  height: 9px; }
.awards-star--br { bottom: 6px; right: -2px; animation-delay: 2.7s; width: 9px;  height: 9px; }

@keyframes awardsStarTwinkle {
  0%, 100% { opacity: 0.55; transform: scale(0.85) rotate(0deg); }
  50%      { opacity: 1;    transform: scale(1.15) rotate(20deg); }
}

/* Laurel wreaths scaled down to match the slimmer band */
.awards-inline.awards-inline--hero .awards-laurel {
  width: clamp(26px, 2.6vw, 38px);
}

/* Compact body type so the whole band stays a tight horizontal stripe */
.awards-inline.awards-inline--hero .awards-inline-h {
  font-size: clamp(1.15rem, 1.7vw, 1.55rem);
  line-height: 1.22;
  margin-bottom: 6px;
}
.awards-inline.awards-inline--hero .awards-inline-p {
  font-size: 0.82rem;
  line-height: 1.55;
  margin-bottom: 10px;
  max-width: 640px;
}
.awards-inline.awards-inline--hero .awards-inline-kicker {
  font-size: 0.58rem;
  letter-spacing: 0.42em;
  margin-bottom: 8px;
}
.awards-inline.awards-inline--hero .awards-inline-tag {
  padding: 5px 11px;
  font-size: 0.54rem;
  letter-spacing: 0.28em;
}
.awards-inline.awards-inline--hero .awards-inline-rule {
  height: 64%;
}

@media (max-width: 880px) {
  .awards-inline.awards-inline--hero .awards-inline-inner {
    grid-template-columns: 1fr;
    text-align: center;
    gap: clamp(16px, 2.4vw, 24px);
    padding: clamp(22px, 4vw, 32px) clamp(22px, 5vw, 32px);
  }
  .awards-inline.awards-inline--hero .awards-inline-rule { display: none; }
  .awards-inline.awards-inline--hero .awards-inline-p { margin-left: auto; margin-right: auto; }
  .awards-inline.awards-inline--hero .awards-inline-tags { justify-content: center; }
  .awards-burst { width: 130px; height: 130px; }
}

@media (prefers-reduced-motion: reduce) {
  .awards-inline.awards-inline--hero .awards-inline-num,
  .awards-burst,
  .awards-star { animation: none !important; }
}

/* ============================================================================
   ENGAGEMENT V3 — align the copy column to the TOP of the creatives so the
   eyebrow + body start at the same vertical line as where the image and
   video begin. Previously the copy was align-self: center, which floated it
   to the mid-line of the photo. Pulling it up to the top reads tighter.
   ============================================================================ */
.engagement-v3-copy {
  align-self: start !important;
  padding-top: clamp(8px, 1.6vw, 22px);
}

/* ============================================================================
   HOMEPAGE HEADLINE BLEND PASS (2026-05-20)
   The previous shimmer/sheen effects fired bright #FFF / #FFF6D6 peaks across
   text on light grounds, and several headlines stacked .h-shimmer + .h-sheen,
   which read as a diagonal "box" beam crossing the section. This pass:

   1. Removes white-hot peaks from every text gradient on light grounds (they
      now top out at warm champagne #EAD09A — same family as the brass dim).
   2. Strips drop-shadow halos that bled past the glyphs into empty space
      (those were the "floating glow" artifacts the eye reads as a sticker).
   3. Calms the cat-trio whole-headline gold animation: the non-italic half
      now sits as solid ink-dark text (matches every other section head on
      the page), and only the <em> shimmers — one effect per headline, not two.
   4. Slows the shimmer cadence so the sweep is a slow breath, not a flash.

   No new effects added — every change is a reduction. The site reads as one
   integrated piece instead of several pasted-on flashing labels.
   ============================================================================ */

/* --- CAT-TRIO headline: kill whole-text gold animation, restore ink base --- */
.cat-trio-h {
  background: none !important;
  background-image: none !important;
  -webkit-text-fill-color: var(--pp-ink-v2) !important;
  color: var(--pp-ink-v2) !important;
  filter: none !important;
  animation: none !important;
}
.cat-trio-h em {
  /* Calmer champagne sweep — no #FFF peak, no drop-shadow halo */
  background-image: linear-gradient(
    100deg,
    #B58A35 0%,
    #C9A55C 32%,
    #E6C783 48%,
    #F0DBA0 50%,
    #E6C783 52%,
    #C9A55C 68%,
    #B58A35 100%
  ) !important;
  background-size: 240% 100% !important;
  filter: none !important;
  animation: catTrioHGoldFlashEm 9s ease-in-out infinite !important;
}

/* --- Soften .h-shimmer em peak in sections that use the generic shimmer
   (atelier edit, bespoke collection head, awards). Hero and celebs are
   excluded — their <em> is deliberately a solid champagne fill, and
   layering a background gradient there renders as a highlighter
   rectangle because those rules pin background-clip to border-box. */
.cat-trio .coll-head--inline .h-shimmer em,
.collections-section .h-shimmer em,
.awards-inline .h-shimmer em {
  background-image: linear-gradient(
    100deg,
    #B58A35 0%,
    #C9A55C 32%,
    #E6C783 48%,
    #F0DBA0 50%,
    #E6C783 52%,
    #C9A55C 68%,
    #B58A35 100%
  ) !important;
  background-size: 240% 100% !important;
  animation-duration: 9s !important;
  text-shadow: none !important;
  filter: none !important;
}

/* --- Engagement headline: soften the em (no #FFF1C4 peak) --- */
.engagement-v3-h.h-shimmer em {
  background-image: linear-gradient(
    100deg,
    #B58A35 0%,
    #C9A55C 32%,
    #E6C783 48%,
    #F0DBA0 50%,
    #E6C783 52%,
    #C9A55C 68%,
    #B58A35 100%
  ) !important;
  background-size: 240% 100% !important;
  animation-duration: 9s !important;
  filter: none !important;
}

/* --- Bespoke atelier headline: same champagne family, no white peak --- */
.bespoke-atelier .h-shimmer em {
  background-image: linear-gradient(
    100deg,
    #B58A35 0%,
    #C9A55C 30%,
    #EAD09A 48%,
    #F4DCA0 50%,
    #EAD09A 52%,
    #C9A55C 70%,
    #B58A35 100%
  ) !important;
  background-size: 240% 100% !important;
  animation-duration: 9s !important;
  filter: none !important;
}

/* --- Celebs em: soften the flashing peak and shrink the halo --- */
.celebs-v2-h em {
  animation-duration: 6s !important;
}
@keyframes celebsEmFlash {
  0%, 100% {
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
    color: #E8C16A;
    -webkit-text-fill-color: #E8C16A;
  }
  50% {
    text-shadow:
      0 0 14px rgba(232, 193, 106, 0.45),
      0 2px 14px rgba(0, 0, 0, 0.45);
    color: #F0CF85;
    -webkit-text-fill-color: #F0CF85;
  }
}

/* --- Hero em: deliberately untouched — the original rule pins it to solid
   champagne gold (#E8C16A) on the dark green, which already blends cleanly.
   Trying to layer a gradient here renders as a highlighter rectangle because
   the upstream rule also pins background-clip to border-box. Leave it alone. */

/* --- h-sheen light variant: if anything still has it, soften the peak --- */
.h-sheen.h-sheen--light,
.engagement-v3 .h-sheen,
.bespoke-atelier .h-sheen {
  background-image: linear-gradient(
    100deg,
    #1A211C 0%,
    #1A211C 38%,
    rgba(201, 165, 92, 0.7) 47%,
    #EAD09A 50%,
    rgba(201, 165, 92, 0.7) 53%,
    #1A211C 62%,
    #1A211C 100%
  ) !important;
  animation-duration: 10s !important;
}

/* --- Strip leftover drop-shadow halos that extended beyond text on light bg --- */
.engagement-v3-h,
.bespoke-atelier-h em,
.cat-trio-h em,
.coll-head-h em {
  filter: none !important;
}

/* ============================================================================
   REFINEMENT PASS — 2026-05-22
   Sasha review of the home page:
   1. Diamond glyph replaces the arrow on the Explore CTAs.
   2. Collapse the empty ivory band between the cat-trio CTA and the
      Bespoke Atelier section.
   3. Elevate the Bespoke Atelier headline: brass eyebrow, refined rule,
      a soft cream halo behind the type, brass undercurrent on the italic.
   4. Slim the PlatAfrica honour band further (vertical padding cut).
   5. Make the "9" badge more outstanding: bigger, calmer brass aurora
      behind the laurel wreath, twinkle on the stars.
   ============================================================================ */

/* 1 · Diamond glyph on the CTA */
.coll-foot-cta .cta-diamond {
  margin-left: 10px;
  vertical-align: -2px;
  transition: transform 0.55s cubic-bezier(0.25, 0.1, 0.25, 1), filter 0.45s ease;
  filter: drop-shadow(0 0 0 rgba(212, 175, 110, 0));
}
.coll-foot-cta:hover .cta-diamond {
  transform: rotate(-12deg) scale(1.12);
  filter: drop-shadow(0 0 6px rgba(232, 193, 106, 0.65));
}
@media (prefers-reduced-motion: reduce) {
  .coll-foot-cta .cta-diamond { transition: none; }
}

/* 2 · Tighten the gap below the cat-trio CTA into the Bespoke Atelier */
.cat-trio {
  padding-bottom: clamp(4px, 0.6vw, 10px) !important;
}
.cat-trio .coll-foot {
  margin-top: clamp(10px, 1.2vw, 18px) !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
.bespoke-atelier {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
/* Tight breath between video and headline */
.bespoke-atelier-intro {
  margin-top: 0 !important;
  padding-top: clamp(28px, 3vw, 48px) !important;
}

/* ============================================================================
   SEAM GOLD — thin gold strip used as a clean connector between two sections.
   ~1cm tall. No animation, no effects.
   ============================================================================ */
.seam-gold {
  display: block;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg,
    rgba(201, 168, 97, 0) 0%,
    rgba(201, 168, 97, 0.55) 18%,
    #C9A861 50%,
    rgba(201, 168, 97, 0.55) 82%,
    rgba(201, 168, 97, 0) 100%);
  margin: clamp(56px, 6vw, 96px) 0 0;
  position: relative;
  z-index: 2;
  box-shadow: 0 0 6px rgba(201, 168, 97, 0.45);
}
/* Tight variant — sits the strip right at the bottom edge of the frames above,
   cutting the section cleanly just before the collection. */
.seam-gold--tight {
  margin-top: clamp(4px, 0.8vw, 12px);
}

/* 3 · Elevate the Bespoke Atelier headline */
.bespoke-atelier-intro {
  position: relative;
  padding-top: 18px;
  padding-bottom: 8px;
}
/* Soft warm aura behind the headline so it feels lifted off the white */
.bespoke-atelier-intro::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(560px, 60vw, 980px);
  height: clamp(220px, 22vw, 360px);
  transform: translate(-50%, -50%);
  background:
    radial-gradient(ellipse at center,
      rgba(232, 213, 168, 0.22) 0%,
      rgba(232, 213, 168, 0.10) 38%,
      rgba(232, 213, 168, 0) 70%);
  filter: blur(2px);
  z-index: -1;
  pointer-events: none;
}
/* Brass-tinted eyebrow, slightly larger, with hairline ornaments either side */
.bespoke-atelier-eyebrow {
  position: relative;
  display: inline-block !important;
  font-size: 0.74rem !important;
  letter-spacing: 0.46em !important;
  color: var(--pp-green-deep) !important;
  font-weight: 700 !important;
  margin-bottom: 12px !important;
}
.bespoke-atelier-eyebrow::before,
.bespoke-atelier-eyebrow::after { content: none !important; display: none !important; }
/* Clean centred rule — matches the rest of the page */
.bespoke-atelier-rule {
  width: 42px !important;
  height: 1px !important;
  background: var(--pp-green-deep) !important;
  margin: 0 auto 18px !important;
  position: relative;
}
.bespoke-atelier-rule::before,
.bespoke-atelier-rule::after { content: none !important; display: none !important; }
/* Slightly larger, more confident headline */
.bespoke-atelier-h {
  font-size: clamp(2.2rem, 4.2vw, 4.2rem) !important;
  letter-spacing: -0.022em !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
  white-space: nowrap;
}
@media (max-width: 760px) {
  .bespoke-atelier-h { white-space: normal; }
}
/* Soft brass underline that breathes under the italic line */
.bespoke-atelier-h em {
  position: relative;
}
.bespoke-atelier-h em::after {
  content: '';
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -10px;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(232, 193, 106, 0.5) 18%, rgba(232, 193, 106, 0.85) 50%, rgba(232, 193, 106, 0.5) 82%, transparent 100%);
  filter: blur(0.4px);
  opacity: 0.85;
  animation: bespokeUnderlineBreath 6.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes bespokeUnderlineBreath {
  0%, 100% { opacity: 0.55; transform: scaleX(0.92); }
  50%      { opacity: 1;    transform: scaleX(1.0); }
}
@media (prefers-reduced-motion: reduce) {
  .bespoke-atelier-h em::after { animation: none; }
}

/* 4 · Slim the PlatAfrica band — cut vertical padding further */
.awards-inline.awards-inline--hero .awards-inline-inner {
  padding: clamp(12px, 1.4vw, 20px) clamp(28px, 5vw, 72px) !important;
  gap: clamp(20px, 2.6vw, 42px) !important;
}
.awards-inline.awards-inline--hero .awards-inline-h {
  font-size: clamp(1.2rem, 1.8vw, 1.6rem) !important;
  margin-bottom: 4px !important;
}
.awards-inline.awards-inline--hero .awards-inline-p {
  font-size: 0.82rem !important;
  line-height: 1.5 !important;
  margin-bottom: 8px !important;
  max-width: 560px;
}
.awards-inline.awards-inline--hero .awards-inline-kicker {
  margin-bottom: 6px !important;
}
.awards-inline.awards-inline--hero .awards-inline-corner--tl,
.awards-inline.awards-inline--hero .awards-inline-corner--tr { top: 8px !important; }
.awards-inline.awards-inline--hero .awards-inline-corner--bl,
.awards-inline.awards-inline--hero .awards-inline-corner--br { bottom: 8px !important; }

/* 5 · Make the 9 more outstanding */
/* Rotating brass conic halo behind the wreath */
.awards-inline.awards-inline--hero .awards-inline-numwrap::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 230px; height: 230px;
  transform: translate(-50%, -50%);
  background: conic-gradient(
    from 0deg at 50% 50%,
    rgba(232, 193, 106, 0)   0deg,
    rgba(232, 193, 106, 0.22) 40deg,
    rgba(255, 241, 196, 0.42) 90deg,
    rgba(232, 193, 106, 0.22) 140deg,
    rgba(232, 193, 106, 0)   200deg,
    rgba(232, 193, 106, 0.18) 260deg,
    rgba(255, 241, 196, 0.34) 310deg,
    rgba(232, 193, 106, 0)   360deg
  );
  border-radius: 50%;
  filter: blur(14px);
  opacity: 0.85;
  animation: awardsHaloSpin 18s linear infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes awardsHaloSpin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}
/* Bigger, more luminous 9 */
.awards-inline.awards-inline--hero .awards-inline-num {
  font-size: clamp(4.4rem, 6.4vw, 6.4rem) !important;
  line-height: 0.86 !important;
  background: linear-gradient(180deg, #FFFBE6 0%, #FFE9A8 30%, #E8C16A 62%, #8C6B29 100%) !important;
  -webkit-background-clip: text !important;
          background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter:
    drop-shadow(0 0 28px rgba(255, 241, 196, 0.85))
    drop-shadow(0 0 48px rgba(232, 193, 106, 0.5))
    drop-shadow(0 4px 14px rgba(0, 0, 0, 0.55)) !important;
}
/* Slightly bigger laurels to match the bigger 9 */
.awards-inline.awards-inline--hero .awards-laurel {
  width: clamp(34px, 3.4vw, 48px) !important;
  filter: drop-shadow(0 0 14px rgba(232, 193, 106, 0.6)) !important;
}
/* Brighter twinkling stars */
.awards-inline.awards-inline--hero .awards-star {
  width: 14px;
  height: 14px;
  filter: drop-shadow(0 0 8px rgba(255, 241, 196, 0.95));
}
.awards-inline.awards-inline--hero .awards-star--bl,
.awards-inline.awards-inline--hero .awards-star--br {
  width: 11px;
  height: 11px;
}
/* Slightly wider awards-burst behind the 9 */
.awards-inline.awards-inline--hero .awards-burst {
  width: 200px !important;
  height: 200px !important;
}
@media (max-width: 720px) {
  .awards-inline.awards-inline--hero .awards-inline-numwrap::before {
    width: 170px;
    height: 170px;
  }
  .awards-inline.awards-inline--hero .awards-inline-num {
    font-size: 4rem !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .awards-inline.awards-inline--hero .awards-inline-numwrap::before {
    animation: none !important;
  }
}

/* ============================================================================
   V2 POLISH PASS — 2026-05-22
   Reviews, Visit ("Find the House"), Map and Footer redesign.
   Goals: stronger trust, real legibility, brand green throughout, no gold.
   Sits at the end of home_v2.css so these rules win the cascade.
   ============================================================================ */


/* ---------------------------------------------------------------------------
   1. REVIEWS — luxe trust trio + readable cards
   ------------------------------------------------------------------------- */

.reviews-section {
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(31, 61, 46, 0.04) 0%, transparent 60%),
    var(--pp-paper-v2) !important;
  padding: 64px 0 78px !important;
}

.reviews-section .container { max-width: 1280px; padding: 0 28px; }

.reviews-section .reviews-head { margin-bottom: 28px !important; }

.reviews-section .reviews-h2 {
  font-family: var(--serif, 'Cormorant Garamond', serif) !important;
  font-size: clamp(2.2rem, 3.6vw, 3.2rem) !important;
  font-weight: 400 !important;
  letter-spacing: 0.005em;
  line-height: 1.06 !important;
  color: var(--pp-ink-v2) !important;
}

.reviews-section .reviews-h2 em {
  font-style: italic;
  color: var(--pp-green-deep) !important;
}

.reviews-sub {
  font-family: var(--serif, 'Cormorant Garamond', serif);
  font-size: clamp(1rem, 1.25vw, 1.12rem);
  font-style: italic;
  font-weight: 400;
  color: rgba(26, 33, 28, 0.82);
  line-height: 1.6;
  max-width: 640px;
  margin: 16px auto 0;
  text-align: center;
}

/* Trust trio — three peer tiles on a hairline ground */
.reviews-section .reviews-platforms {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr auto 1fr !important;
  align-items: stretch !important;
  gap: 0 !important;
  margin: 32px auto 44px !important;
  max-width: 1020px !important;
  background: #FFFFFF !important;
  border: 1px solid rgba(31, 61, 46, 0.16) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 18px 50px rgba(20, 28, 22, 0.07),
    0 4px 14px rgba(20, 28, 22, 0.04) !important;
  position: relative;
}

.reviews-section .reviews-platforms::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  pointer-events: none;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(31, 61, 46, 0.55) 22%, rgba(31, 61, 46, 0.9) 50%, rgba(31, 61, 46, 0.55) 78%, transparent 100%);
  opacity: 0.7;
}

.reviews-section .rp-badge {
  flex: none !important;
  display: grid !important;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 16px !important;
  padding: 22px 26px !important;
  text-align: left;
  border-radius: 0;
  transition: background-color 0.45s ease, transform 0.45s ease;
}

.reviews-section .rp-badge:hover {
  background: rgba(31, 61, 46, 0.04) !important;
  transform: none !important;
}

.reviews-section .rp-divider {
  width: 1px !important;
  background: linear-gradient(180deg, transparent 8%, rgba(31, 61, 46, 0.22) 30%, rgba(31, 61, 46, 0.22) 70%, transparent 92%) !important;
  margin: 0 !important;
  align-self: stretch !important;
}

.reviews-section .rp-logo-g,
.reviews-section .rp-logo-ta,
.reviews-section .rp-logo-pla {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(20, 28, 22, 0.18), 0 1px 0 rgba(255,255,255,0.6) inset;
}

.reviews-section .rp-logo-g {
  background: conic-gradient(from 0deg, #4285F4 0%, #34A853 30%, #FBBC05 50%, #EA4335 75%, #4285F4 100%);
  font-size: 1rem !important;
}

.reviews-section .rp-logo-ta {
  background: #00AA6C;
  font-size: 0.66rem !important;
  letter-spacing: 0.02em;
}

.reviews-section .rp-logo-pla {
  background: linear-gradient(160deg, var(--pp-green-deep) 0%, #2c5742 55%, var(--pp-green-deep) 100%);
  color: #E4ECDF;
  position: relative;
}

.reviews-section .rp-logo-pla::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  box-shadow: 0 0 0 1px rgba(228, 236, 223, 0.35) inset;
}

.reviews-section .rp-info { display: flex; flex-direction: column; gap: 4px; }

.reviews-section .rp-platform-name {
  font-size: 0.56rem !important;
  letter-spacing: 0.3em !important;
  text-transform: uppercase;
  font-weight: 700 !important;
  color: var(--pp-green-deep) !important;
}

.reviews-section .rp-score-row {
  display: flex !important;
  align-items: baseline;
  gap: 10px !important;
  margin-top: 4px !important;
}

.reviews-section .rp-score {
  font-family: var(--serif, 'Cormorant Garamond', serif);
  font-size: 1.6rem !important;
  font-weight: 400;
  color: var(--pp-ink-v2) !important;
  line-height: 1;
}

.rp-score.rp-score-pla {
  font-family: var(--serif, 'Cormorant Garamond', serif);
  font-size: 1.6rem !important;
  color: var(--pp-green-deep) !important;
  font-style: italic;
}

.rp-pla-label {
  font-size: 0.54rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--pp-green-deep);
  align-self: center;
}

.reviews-section .rp-stars {
  color: var(--pp-green-deep) !important;
  font-size: 0.78rem !important;
  letter-spacing: 2px !important;
}

.reviews-section .rp-count {
  font-size: 0.54rem !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase;
  color: rgba(26, 33, 28, 0.6) !important;
  margin-top: 4px !important;
  font-weight: 600;
}

.reviews-section .rp-cta {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  margin-top: 8px !important;
  font-size: 0.52rem !important;
  letter-spacing: 0.26em !important;
  text-transform: uppercase;
  font-weight: 700 !important;
  color: var(--pp-green-deep) !important;
}

@media (max-width: 900px) {
  .reviews-section .reviews-platforms {
    grid-template-columns: 1fr !important;
    max-width: 460px !important;
  }
  .reviews-section .rp-divider {
    width: auto !important;
    height: 1px !important;
    background: linear-gradient(90deg, transparent, rgba(31, 61, 46, 0.22) 30%, rgba(31, 61, 46, 0.22) 70%, transparent) !important;
  }
}

/* Cards: solid white, real shadow, readable serif, emerald accent */
.reviews-section .rv-carousel {
  max-width: 1280px;
  padding: 8px 0 8px;
}

.reviews-section .rv-track { gap: 26px !important; }

.reviews-section .rv-card {
  flex: 0 0 340px !important;
  width: 340px !important;
  min-height: 252px !important;
  /* Glassy sage-celadon translucent frame — Tiffany-equivalent in our palette */
  background:
    linear-gradient(155deg, rgba(255, 255, 255, 0.65) 0%, rgba(228, 236, 223, 0.55) 35%, rgba(188, 201, 183, 0.45) 100%) !important;
  backdrop-filter: blur(14px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(140%) !important;
  border: 1px solid rgba(31, 61, 46, 0.22) !important;
  border-top: 2px solid #E8C16A !important;
  padding: 28px 26px 22px !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.75) inset,
    0 0 0 1px rgba(232, 193, 106, 0.18) inset,
    0 22px 48px rgba(20, 28, 22, 0.14),
    0 4px 12px rgba(20, 28, 22, 0.06) !important;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
}

/* Diagonal glossy reflection sweep across the glass */
.reviews-section .rv-card::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    transparent 0%,
    rgba(255, 255, 255, 0) 30%,
    rgba(255, 255, 255, 0.45) 48%,
    rgba(255, 255, 255, 0.65) 50%,
    rgba(255, 255, 255, 0.45) 52%,
    rgba(255, 255, 255, 0) 70%,
    transparent 100%
  );
  background-size: 280% 100%;
  background-position: -120% 0;
  mix-blend-mode: screen;
  animation: rvGlassSheen 11s ease-in-out infinite;
  z-index: 1;
}
@keyframes rvGlassSheen {
  0%   { background-position: -120% 0; }
  60%  { background-position: 220% 0; }
  100% { background-position: 220% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .reviews-section .rv-card::after { animation: none; }
}

.reviews-section .rv-card > * { position: relative; z-index: 2; }

.reviews-section .rv-card::before {
  content: '\201C' !important;
  position: absolute;
  top: 6px !important;
  right: 18px !important;
  font-family: var(--serif, 'Cormorant Garamond', serif);
  font-size: 5.4rem !important;
  line-height: 1;
  color: rgba(201, 165, 92, 0.42) !important;
  pointer-events: none;
  text-shadow: 0 0 12px rgba(232, 193, 106, 0.35);
  z-index: 2;
}

.reviews-section .rv-card .rv-text {
  font-family: var(--serif, 'Cormorant Garamond', serif);
  font-style: italic;
  font-weight: 500 !important;
  font-size: 1.08rem !important;
  line-height: 1.62 !important;
  color: #0F1612 !important;
  margin: 4px 0 10px !important;
  -webkit-line-clamp: 5 !important;
}

.reviews-section .rv-card .rv-stars {
  color: #E8C16A !important;
  font-size: 0.98rem !important;
  letter-spacing: 4px !important;
  margin-bottom: 2px !important;
  text-shadow: 0 0 10px rgba(232, 193, 106, 0.55);
}

.reviews-section .rv-platform-label {
  color: #6B4F1F !important;
  font-weight: 700 !important;
  font-size: 0.6rem !important;
  letter-spacing: 0.28em !important;
}

.reviews-section .rv-byline {
  border-top: 1px solid rgba(31, 61, 46, 0.28) !important;
  padding-top: 12px !important;
  display: flex !important;
  flex-direction: column;
  gap: 4px;
}

.reviews-section .rv-author {
  font-size: 0.78rem !important;
  letter-spacing: 0.22em !important;
  color: #0F1612 !important;
  font-weight: 800 !important;
}

.reviews-section .rv-source {
  font-size: 0.62rem !important;
  letter-spacing: 0.2em !important;
  color: rgba(20, 28, 22, 0.85) !important;
  font-weight: 600 !important;
}

/* Slim, gentle fades — first card stays fully visible */
.reviews-section .rv-fade { width: 36px !important; }
.reviews-section .rv-fade-l {
  background: linear-gradient(to right, #FBFBF7 0%, rgba(251, 251, 247, 0) 100%) !important;
}
.reviews-section .rv-fade-r {
  background: linear-gradient(to left, #FBFBF7 0%, rgba(251, 251, 247, 0) 100%) !important;
}


/* ---------------------------------------------------------------------------
   2. VISIT ("Find the House") — refined editorial split
   ------------------------------------------------------------------------- */

.visit-redesign .visit-top.visit-top-flipped {
  padding: 76px 56px 90px !important;
  gap: 64px !important;
  background:
    radial-gradient(80% 50% at 50% 0%, rgba(31, 61, 46, 0.05) 0%, transparent 60%),
    var(--pp-paper-v2) !important;
}

.visit-redesign .visit-content { padding: 8px 0 !important; gap: 28px !important; }

.visit-redesign .visit-content .eyebrow {
  color: var(--pp-green-deep) !important;
  font-size: 0.56rem;
  letter-spacing: 0.36em;
  font-weight: 700;
}

.visit-redesign .visit-hero-h {
  font-family: var(--serif, 'Cormorant Garamond', serif) !important;
  font-size: clamp(2.4rem, 4.4vw, 3.8rem) !important;
  font-weight: 400 !important;
  line-height: 1.04 !important;
  color: #0F1612 !important;
  margin-top: 14px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.65);
}
.visit-redesign .visit-hero-h em {
  font-style: italic;
}

.visit-redesign .visit-intro {
  font-family: "Inter", system-ui, sans-serif !important;
  font-size: clamp(1rem, 1.1vw, 1.12rem) !important;
  font-weight: 300 !important;
  line-height: 1.78 !important;
  color: #4A554D !important;
  max-width: 540px;
}

/* Anchor target offset so the fixed appt-bar + nav never cover the heading */
.visit-redesign { scroll-margin-top: 96px; }

/* Details: refined card stack, brass top accent, emerald hairline */
.visit-redesign .visit-details-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
  margin-top: 6px !important;
}

.visit-redesign .visit-detail {
  background: #FFFFFF !important;
  border: 1px solid rgba(31, 61, 46, 0.16) !important;
  padding: 24px 24px 22px !important;
  box-shadow: 0 10px 26px rgba(20, 28, 22, 0.06) !important;
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
  position: relative;
  overflow: hidden;
}
/* Brass micro-accent along the top edge of every card */
.visit-redesign .visit-detail::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, #E8C16A 0%, #C9A861 55%, rgba(201, 168, 97, 0) 100%);
}

.visit-redesign .visit-detail:hover {
  transform: translateY(-3px);
  border-color: rgba(31, 61, 46, 0.34) !important;
  box-shadow: 0 18px 38px rgba(20, 28, 22, 0.11) !important;
}

.visit-redesign .visit-detail-label {
  font-size: 0.58rem !important;
  letter-spacing: 0.26em !important;
  text-transform: uppercase;
  color: var(--pp-green-deep) !important;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.visit-redesign .visit-detail-icon { color: #C9A861 !important; }

.visit-redesign .visit-detail-value {
  font-family: var(--serif, 'Cormorant Garamond', serif);
  font-size: 1.06rem !important;
  line-height: 1.5 !important;
  color: var(--pp-ink-v2) !important;
  margin-top: 9px;
}

.visit-redesign .visit-detail-value a {
  color: var(--pp-ink-v2) !important;
  border-bottom: 1px solid rgba(31, 61, 46, 0.3);
  transition: color 0.3s, border-color 0.3s;
}
.visit-redesign .visit-detail-value a:hover {
  color: var(--pp-green-deep) !important;
  border-bottom-color: var(--pp-green-deep);
}

/* Photo stack — slightly tighter, less aggressive inset */
.visit-redesign .visit-photo-stack .vps-main {
  box-shadow: 0 28px 70px rgba(20, 28, 22, 0.16), 0 6px 22px rgba(20, 28, 22, 0.08) !important;
}
.visit-redesign .visit-photo-stack .vps-inset {
  width: 264px !important;
  right: -14px !important;
  bottom: -22px !important;
  border: 4px solid #FFFFFF !important;
  box-shadow: 0 22px 50px rgba(20, 28, 22, 0.22) !important;
}
.visit-redesign .vps-tag,
.visit-redesign .vps-inset-tag {
  background: rgba(31, 61, 46, 0.92) !important;
  color: #FBFBF7 !important;
  border-radius: 0 !important;
  letter-spacing: 0.3em !important;
}

/* CTA row beneath the visit details grid */
.visit-redesign .visit-cta-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  margin-top: 30px;
  max-width: 340px;
}
/* Both CTAs share identical geometry so they stack as an even, matched pair. */
.visit-redesign .visit-cta-primary,
.visit-redesign .visit-cta-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  width: 100%;
  min-height: 58px;
  box-sizing: border-box;
  padding: 0 28px !important;
  font: 700 0.66rem/1 "Inter", sans-serif !important;
  letter-spacing: 0.24em !important;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  box-shadow: 0 8px 22px rgba(20, 28, 22, 0.26) !important;
  transition: transform 0.3s, box-shadow 0.3s, background 0.3s, color 0.3s;
}
.visit-redesign .visit-cta-primary {
  background: linear-gradient(180deg, #E8D5A8 0%, #C9A861 100%) !important;
  color: #1F3D2E !important;
  border-color: rgba(201, 168, 97, 0.7) !important;
}
.visit-redesign .visit-cta-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(20, 28, 22, 0.4) !important;
}
.visit-redesign .visit-cta-secondary {
  background: var(--pp-green-deep, #1F3D2E) !important;
  color: #F4EFE6 !important;
  border-color: var(--pp-green-deep, #1F3D2E) !important;
}
.visit-redesign .visit-cta-secondary:hover {
  transform: translateY(-2px);
  background: #16301F !important;
  color: #FFFFFF !important;
  box-shadow: 0 14px 30px rgba(20, 28, 22, 0.42) !important;
}
.visit-redesign .visit-cta-secondary .wa-ico {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}

@media (max-width: 760px) {
  .visit-redesign .visit-top.visit-top-flipped { padding: 48px 18px 72px !important; gap: 36px !important; }
  .visit-redesign .visit-details-grid { grid-template-columns: 1fr !important; }
  .visit-redesign .visit-photo-stack .vps-inset { width: 196px !important; right: -4px !important; bottom: -28px !important; }
  .visit-redesign .visit-cta-row { gap: 12px; margin-top: 22px; max-width: none; }
}


/* ---------------------------------------------------------------------------
   3. MAP — shrunk into an elegant card, no longer a hero band
   ------------------------------------------------------------------------- */

.visit-map-section {
  padding: 52px 28px 70px !important;
  background:
    radial-gradient(70% 50% at 50% 0%, rgba(31, 61, 46, 0.04) 0%, transparent 65%),
    var(--pp-paper-v2) !important;
}
.visit-map-section::before { display: none !important; }

.visit-map-section #mapSparkleCanvas { opacity: 0.55; }

.visit-map-section .visit-map-header {
  max-width: 980px !important;
  margin: 0 auto 24px !important;
}
.visit-map-section .visit-map-header .eyebrow {
  color: var(--pp-green-deep) !important;
  font-size: 0.54rem;
  letter-spacing: 0.36em;
  font-weight: 700;
}
.visit-map-section .visit-map-h {
  font-family: var(--serif, 'Cormorant Garamond', serif);
  font-size: clamp(2.2rem, 3.6vw, 3.2rem) !important;
  font-weight: 400 !important;
  line-height: 1.06 !important;
  color: var(--pp-ink-v2) !important;
  margin: 0 0 14px;
  text-align: center;
}
.visit-map-sub {
  font-family: "Inter", system-ui, sans-serif;
  font-size: clamp(1rem, 1.1vw, 1.12rem);
  font-weight: 300;
  line-height: 1.78;
  color: #4A554D;
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
}
.visit-map-section .visit-map-header { text-align: center; }
.visit-map-section .visit-map-header .gold-line {
  margin: 14px auto 18px !important;
}

.visit-map-wrap {
  max-width: 980px !important;
  margin: 0 auto !important;
  border: 1px solid rgba(31, 61, 46, 0.18) !important;
  background: #FFFFFF !important;
  box-shadow:
    0 22px 60px rgba(20, 28, 22, 0.1),
    0 6px 18px rgba(20, 28, 22, 0.04) !important;
}

.visit-map-frame { height: 560px !important; }

.visit-map-card {
  top: 22px !important;
  right: 22px !important;
  width: 300px !important;
  padding: 22px 22px 20px !important;
  background: rgba(255, 255, 255, 0.97) !important;
  border: 1px solid rgba(31, 61, 46, 0.2) !important;
  box-shadow: 0 18px 44px rgba(20, 28, 22, 0.18), 0 4px 12px rgba(20, 28, 22, 0.08) !important;
}

.vmc-eyebrow {
  font-size: 0.46rem !important;
  letter-spacing: 0.3em !important;
  color: var(--pp-green-deep) !important;
}
.vmc-eyebrow::before {
  background: var(--pp-green-deep) !important;
  box-shadow: 0 0 0 3px rgba(31, 61, 46, 0.18) !important;
}

.vmc-title {
  font-size: 1.35rem !important;
  color: var(--pp-ink-v2) !important;
  line-height: 1.12 !important;
}

.vmc-address {
  font-size: 0.78rem !important;
  color: rgba(26, 33, 28, 0.72) !important;
  line-height: 1.7 !important;
  margin-bottom: 12px !important;
}

.vmc-meta { gap: 6px !important; padding: 10px 0 12px !important; margin-bottom: 14px !important; }
.vmc-meta-row { font-size: 0.72rem !important; color: rgba(26, 33, 28, 0.78) !important; }
.vmc-meta-row svg { color: var(--pp-green-deep) !important; }

.vmc-chips { grid-template-columns: 1fr 1fr !important; gap: 6px !important; margin-bottom: 14px !important; }
.vmc-chip {
  padding: 9px 8px !important;
  font-size: 0.5rem !important;
  letter-spacing: 0.16em !important;
  border: 1px solid rgba(31, 61, 46, 0.28) !important;
  color: var(--pp-ink-v2) !important;
  background: rgba(255, 255, 255, 0.7) !important;
}
.vmc-chip:hover {
  background: var(--pp-green-deep) !important;
  border-color: var(--pp-green-deep) !important;
  color: #FBFBF7 !important;
}
.vmc-chip-primary {
  background: var(--pp-green-deep) !important;
  border-color: var(--pp-green-deep) !important;
  color: #FBFBF7 !important;
}
.vmc-chip-primary:hover {
  background: var(--pp-green-emerald) !important;
  border-color: var(--pp-green-emerald) !important;
}

.vmp-dot { background: var(--pp-green-deep) !important; }
.vmp-pulse { background: rgba(31, 61, 46, 0.45) !important; }

/* Map card CTAs — stack the buttons full-width, kill the slanted clip-path
   that was chopping the wrapped "Book a Consultation" label, and centre the
   text properly. Replace the diagonal glint with a slow horizontal sheen. */
.visit-map-card .vmc-ctas {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin-top: 4px !important;
}

.visit-map-card .vmc-ctas .btn-gold,
.visit-map-card .vmc-ctas .btn-outline {
  width: 100% !important;
  flex: 0 0 auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 46px !important;
  padding: 13px 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  white-space: nowrap !important;
  clip-path: none !important;
  border-radius: 0 !important;
  font-size: 0.6rem !important;
  letter-spacing: 0.22em !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  gap: 0 !important;
  overflow: hidden;
  position: relative;
}

.visit-map-card .vmc-ctas .btn-gold {
  background: linear-gradient(180deg, #25492f 0%, var(--pp-green-deep) 60%, #173023 100%) !important;
  color: #FBFBF7 !important;
  border: 1px solid var(--pp-green-deep) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.15) inset,
    0 0 0 1px rgba(228, 236, 223, 0.12) inset,
    0 8px 18px rgba(20, 28, 22, 0.22) !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
}

.visit-map-card .vmc-ctas .btn-gold::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 255, 255, 0) 35%,
    rgba(228, 236, 223, 0.45) 50%,
    rgba(255, 255, 255, 0) 65%,
    transparent 100%) !important;
  background-size: 280% 100% !important;
  background-position: -100% 0 !important;
  animation: ppButtonSheen 5.5s ease-in-out infinite 1.5s !important;
  opacity: 0.95;
  z-index: 1;
}

.visit-map-card .vmc-ctas .btn-gold:hover {
  transform: translateY(-1px) !important;
  background: linear-gradient(180deg, var(--pp-green-deep) 0%, #173023 100%) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 0 0 1px rgba(228, 236, 223, 0.25) inset,
    0 12px 28px rgba(20, 28, 22, 0.32),
    0 0 24px rgba(188, 201, 183, 0.22) !important;
}

.visit-map-card .vmc-ctas .btn-outline {
  background: #FFFFFF !important;
  color: var(--pp-green-deep) !important;
  border: 1px solid rgba(31, 61, 46, 0.32) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 4px 12px rgba(20, 28, 22, 0.06) !important;
}

.visit-map-card .vmc-ctas .btn-outline:hover {
  background: var(--pp-green-mist) !important;
  border-color: var(--pp-green-deep) !important;
  color: var(--pp-green-deep) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 10px 22px rgba(20, 28, 22, 0.12), 0 0 0 1px rgba(31, 61, 46, 0.18) !important;
}

@keyframes ppButtonSheen {
  0%, 60%   { background-position: -100% 0; opacity: 0; }
  62%       { opacity: 1; }
  90%       { background-position: 200% 0; opacity: 1; }
  100%      { background-position: 200% 0; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .visit-map-card .vmc-ctas .btn-gold::before { animation: none !important; }
}

@media (max-width: 1100px) {
  .visit-map-section { padding: 44px 24px 62px !important; }
  .visit-map-frame { height: 520px !important; }
  .visit-map-card { width: 280px !important; top: 18px !important; right: 18px !important; }
}

@media (max-width: 760px) {
  .visit-map-section { padding: 36px 14px 52px !important; }
  .visit-map-wrap { box-shadow: 0 14px 36px rgba(20, 28, 22, 0.1) !important; }
  .visit-map-frame { height: 280px !important; border: 0 !important; }
  .visit-map-card {
    position: static !important;
    width: 100% !important;
    border-top: none !important;
  }
}


/* ---------------------------------------------------------------------------
   4. FOOTER — recolour to brand green, lift legibility
   ------------------------------------------------------------------------- */

footer.footer {
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(31, 61, 46, 0.55) 0%, transparent 60%),
    linear-gradient(180deg, #0E1A14 0%, #0A140F 60%, #06100B 100%) !important;
  color: #E4ECDF !important;
}

/* Aurora — keep but tint green */
.footer .footer-aurora {
  background:
    radial-gradient(50% 40% at 22% 28%, rgba(188, 201, 183, 0.10) 0%, transparent 70%),
    radial-gradient(50% 40% at 78% 70%, rgba(31, 61, 46, 0.32) 0%, transparent 70%) !important;
}

/* Crest band rule — unified GOLDEN LED beam (matches site.css), the single
   energy strip that connects every section into the footer, sitewide. */
.footer .footer-crest-band::before {
  height: 2px !important;
  background: linear-gradient(90deg,
    rgba(232, 193, 106, 0) 0%,
    rgba(232, 193, 106, 0.85) 22%,
    #FFF1C4 50%,
    rgba(232, 193, 106, 0.85) 78%,
    rgba(232, 193, 106, 0) 100%) !important;
  background-size: 100% 100% !important;
  animation: ppFooterLed 3.8s ease-in-out infinite !important;
}
.footer .footer-crest-band::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 50% !important;
  width: 9px !important; height: 9px !important;
  transform: translate(-50%, -45%) rotate(45deg) !important;
  background: #FFF1C4 !important;
  box-shadow: 0 0 14px rgba(232, 193, 106, 0.9) !important;
  z-index: 4 !important;
  pointer-events: none !important;
}

/* Crest image: remove the sepia/saturate filter that produced literal gold */
.footer .footer-crest-img {
  filter: none !important;
  opacity: 0.92 !important;
  animation: none !important;
  width: 42px !important;
}

/* Soft slow shimmer — luminescent celadon glow that breathes through key text.
   Stays well above its baseline brightness throughout the cycle so legibility
   never drops. Triggered on wordmark, certs, socials, column titles. */
@keyframes ppFooterShimmer {
  0%, 100% {
    text-shadow:
      0 0 8px rgba(188, 201, 183, 0.3),
      0 0 22px rgba(31, 61, 46, 0.55);
  }
  50% {
    text-shadow:
      0 0 14px rgba(228, 236, 223, 0.55),
      0 0 30px rgba(188, 201, 183, 0.4),
      0 0 60px rgba(31, 61, 46, 0.5);
  }
}

@keyframes ppCelaSweep {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}

/* Wordmark — luminous serif title with gentle celadon shimmer */
.footer .footer-wordmark {
  color: #FFFFFF !important;
  letter-spacing: 0.32em !important;
  font-size: 1.32rem !important;
  animation: ppFooterShimmer 4.4s ease-in-out infinite !important;
}

/* Tagline — bright italic cream with a permanent soft halo */
.footer .footer-tagline {
  color: rgba(251, 251, 247, 0.95) !important;
  animation: none !important;
  text-shadow: 0 0 12px rgba(31, 61, 46, 0.6), 0 1px 1px rgba(0, 0, 0, 0.4) !important;
  font-size: 0.95rem !important;
  font-style: italic;
}

/* Contact rows — icons and labels brighter, values close to pure cream */
.footer .f-contact-icon {
  border-color: rgba(188, 201, 183, 0.55) !important;
  color: #DDEBD8 !important;
  background: rgba(31, 61, 46, 0.32) !important;
  animation: none !important;
  box-shadow: inset 0 0 8px rgba(188, 201, 183, 0.08);
}

.footer .f-contact-label {
  color: var(--pp-green-wall) !important;
  font-size: 0.48rem !important;
  letter-spacing: 0.3em !important;
  font-weight: 700 !important;
  text-shadow: 0 0 8px rgba(31, 61, 46, 0.6);
}

.footer .f-contact-val,
.footer .f-contact-val a {
  color: #FBFBF7 !important;
  animation: none !important;
  text-shadow: 0 0 10px rgba(31, 61, 46, 0.55), 0 1px 1px rgba(0, 0, 0, 0.45) !important;
  font-size: 0.92rem !important;
}
.footer .f-contact-val a:hover {
  color: var(--pp-green-wall) !important;
  text-shadow: 0 0 10px rgba(188, 201, 183, 0.55), 0 0 22px rgba(31, 61, 46, 0.45) !important;
}

/* Socials — brighter outline with a slow breathing glow */
.footer .f-social {
  border-color: rgba(188, 201, 183, 0.5) !important;
  color: #E4ECDF !important;
  animation: ppFooterShimmer 3.6s ease-in-out infinite !important;
}
.footer .f-social svg { filter: drop-shadow(0 0 4px rgba(188, 201, 183, 0.3)); }
.footer .f-social:hover {
  border-color: var(--pp-green-wall) !important;
  color: #FFFFFF !important;
  background: rgba(31, 61, 46, 0.45) !important;
  box-shadow: 0 0 18px rgba(188, 201, 183, 0.55), 0 0 36px rgba(31, 61, 46, 0.55) !important;
  animation: none !important;
}

/* Cert tags — readable celadon pills with subtle pulse */
.footer .f-cert {
  color: #ECF3E7 !important;
  border-color: rgba(188, 201, 183, 0.45) !important;
  background: rgba(31, 61, 46, 0.35) !important;
  font-size: 0.56rem !important;
  letter-spacing: 0.16em !important;
  padding: 5px 10px !important;
  font-weight: 600 !important;
  text-shadow: 0 0 8px rgba(31, 61, 46, 0.5);
  animation: ppFooterShimmer 4.8s ease-in-out infinite !important;
}
.footer .f-cert:nth-child(2) { animation-delay: 0.6s !important; }
.footer .f-cert:nth-child(3) { animation-delay: 1.2s !important; }
.footer .f-cert:nth-child(4) { animation-delay: 1.8s !important; }

/* Column titles — bright celadon with a sweeping shimmer overlay */
.footer .f-col-title {
  position: relative;
  color: transparent !important;
  background: linear-gradient(90deg,
    var(--pp-green-wall) 0%,
    #FFFFFF 45%,
    var(--pp-green-wall) 50%,
    #FFFFFF 55%,
    var(--pp-green-wall) 100%) !important;
  background-size: 220% 100% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  border-bottom: 1px solid rgba(188, 201, 183, 0.35) !important;
  animation: ppCelaSweep 7s linear infinite !important;
  font-size: 0.62rem !important;
  letter-spacing: 0.34em !important;
  font-weight: 700 !important;
  padding-bottom: 12px !important;
  filter: drop-shadow(0 0 6px rgba(31, 61, 46, 0.5));
}

/* Footer nav links — bright cream with celadon glow */
.footer .f-links a {
  color: #ECF3E7 !important;
  font-size: 0.88rem !important;
  text-shadow: 0 0 8px rgba(31, 61, 46, 0.45);
  transition: color 0.35s ease, text-shadow 0.35s ease, transform 0.35s ease !important;
}
.footer .f-links a::before {
  background: rgba(188, 201, 183, 0.6) !important;
  height: 1px !important;
  width: 12px !important;
}
.footer .f-links a:hover {
  color: #FFFFFF !important;
  transform: translateX(4px);
  text-shadow: 0 0 10px rgba(188, 201, 183, 0.7), 0 0 24px rgba(31, 61, 46, 0.55) !important;
}
.footer .f-links a:hover::before {
  background: var(--pp-green-wall) !important;
  width: 20px !important;
  box-shadow: 0 0 8px rgba(188, 201, 183, 0.5);
}

/* Three houses list */
.footer .f-sites a {
  color: #ECF3E7 !important;
  font-size: 0.88rem !important;
  text-shadow: 0 0 8px rgba(31, 61, 46, 0.45);
}
.footer .f-sites a::before { color: var(--pp-green-wall) !important; opacity: 0.85; }
.footer .f-sites a:hover {
  color: #FFFFFF !important;
  text-shadow: 0 0 10px rgba(188, 201, 183, 0.7), 0 0 24px rgba(31, 61, 46, 0.55) !important;
}
.footer .f-sites a:hover::before { color: var(--pp-green-wall) !important; opacity: 1; }

/* Subtext under each of the three sites — pure shine, italic cream that
   catches a soft celadon highlight as it sweeps across. Hits the inline-styled
   span directly to beat the inline color, and runs a slow sheen so the line
   feels lit, not muted. */
.footer .f-sites a span,
.footer .f-sites a span[style] {
  display: block !important;
  margin-top: 4px !important;
  font-family: var(--serif, 'Cormorant Garamond', serif);
  font-size: 0.78rem !important;
  letter-spacing: 0.1em !important;
  font-style: italic !important;
  font-weight: 400 !important;

  /* Text-clip a soft cream → celadon → cream gradient and slide it,
     so the subtitle literally shimmers across the line. */
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  background: linear-gradient(90deg,
    #ECF3E7 0%,
    #FFFFFF 45%,
    var(--pp-green-wall) 50%,
    #FFFFFF 55%,
    #ECF3E7 100%) !important;
  background-size: 220% 100% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  animation: ppCelaSweep 8s linear infinite !important;
  filter: drop-shadow(0 0 6px rgba(31, 61, 46, 0.6)) drop-shadow(0 0 12px rgba(188, 201, 183, 0.18));
  text-shadow: none !important;
}
.footer .f-sites a:nth-child(2) span,
.footer .f-sites li:nth-child(2) a span { animation-delay: 1.5s !important; }
.footer .f-sites a:nth-child(3) span,
.footer .f-sites li:nth-child(3) a span { animation-delay: 3s !important; }

/* Override any remaining inline-gold body copy in the right column */
.footer [style*="color:rgba(160,144,120"] {
  color: rgba(228, 236, 223, 0.92) !important;
  text-shadow: 0 0 6px rgba(31, 61, 46, 0.45) !important;
}
.footer div[style*="background:linear-gradient(to right,transparent,var(--gold))"] {
  background: linear-gradient(to right, transparent, var(--pp-green-wall)) !important;
  box-shadow: 0 0 6px rgba(188, 201, 183, 0.25);
}
.footer div[style*="background:linear-gradient(to left,transparent,var(--gold))"] {
  background: linear-gradient(to left, transparent, var(--pp-green-wall)) !important;
  box-shadow: 0 0 6px rgba(188, 201, 183, 0.25);
}
.footer span[style*="color:var(--gold)"] {
  color: var(--pp-green-wall) !important;
  text-shadow: 0 0 8px rgba(188, 201, 183, 0.5);
}
.footer p[style*="font-family:var(--serif)"] {
  color: rgba(251, 251, 247, 0.92) !important;
  text-shadow: 0 0 8px rgba(31, 61, 46, 0.5), 0 1px 1px rgba(0, 0, 0, 0.4);
  font-size: 0.86rem !important;
}

/* Footer bar — readable copyright and legal links */
.footer .footer-bar {
  border-top: 1px solid rgba(188, 201, 183, 0.28) !important;
  padding: 18px 56px !important;
}
.footer .f-copy {
  color: rgba(228, 236, 223, 0.88) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.08em !important;
  text-shadow: 0 0 8px rgba(31, 61, 46, 0.5) !important;
  animation: none !important;
}
.footer .f-legal a {
  color: rgba(228, 236, 223, 0.82) !important;
  font-size: 0.66rem !important;
  letter-spacing: 0.16em !important;
  font-weight: 600 !important;
  text-shadow: 0 0 6px rgba(31, 61, 46, 0.45);
}
.footer .f-legal a:hover {
  color: #FFFFFF !important;
  text-shadow: 0 0 10px rgba(188, 201, 183, 0.6), 0 0 22px rgba(31, 61, 46, 0.45) !important;
}

@media (prefers-reduced-motion: reduce) {
  .footer .footer-wordmark,
  .footer .f-social,
  .footer .f-cert,
  .footer .f-col-title { animation: none !important; }
}


/* ---------------------------------------------------------------------------
   FOOTER NEON MOTION LAYER — signature luxury shine.
   Three pieces:
     1. A slow shooting-comet of white-celadon light that sweeps across the
        top of the footer-main, then again across the bottom in counterpoint.
     2. A soft halo behind the crest that gently breathes.
     3. Breathing neon hairlines between each of the four columns.
   Subtle by design — meant to feel like the footer is lit from within, not
   a light show. All paused for prefers-reduced-motion.
   ------------------------------------------------------------------------- */

.footer .footer-main {
  position: relative;
  isolation: isolate;
}

/* TOP comet — neon white-celadon sweep travelling left to right */
.footer .footer-main::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: 0;
  height: 1px;
  pointer-events: none;
  z-index: 1;
  background-image: linear-gradient(90deg,
    transparent 0%,
    rgba(188, 201, 183, 0.0) 36%,
    rgba(228, 236, 223, 0.55) 46%,
    rgba(255, 255, 255, 0.98) 50%,
    rgba(228, 236, 223, 0.55) 54%,
    rgba(188, 201, 183, 0.0) 64%,
    transparent 100%);
  background-size: 280% 100%;
  background-repeat: no-repeat;
  background-position: -100% 0;
  animation: ppNeonCometTop 11s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
  filter: drop-shadow(0 0 4px rgba(228, 236, 223, 0.6)) drop-shadow(0 0 10px rgba(31, 61, 46, 0.5));
}

/* BOTTOM comet — right to left, slower, slightly delayed */
.footer .footer-main::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  height: 1px;
  pointer-events: none;
  z-index: 1;
  background-image: linear-gradient(270deg,
    transparent 0%,
    rgba(188, 201, 183, 0.0) 36%,
    rgba(228, 236, 223, 0.5) 46%,
    rgba(255, 255, 255, 0.95) 50%,
    rgba(228, 236, 223, 0.5) 54%,
    rgba(188, 201, 183, 0.0) 64%,
    transparent 100%);
  background-size: 280% 100%;
  background-repeat: no-repeat;
  background-position: 200% 0;
  animation: ppNeonCometBottom 13s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite 2.5s;
  filter: drop-shadow(0 0 4px rgba(228, 236, 223, 0.55)) drop-shadow(0 0 10px rgba(31, 61, 46, 0.5));
}

@keyframes ppNeonCometTop {
  0%   { background-position: -100% 0; opacity: 0; }
  6%   { opacity: 1; }
  60%  { background-position: 100% 0; opacity: 1; }
  72%  { background-position: 130% 0; opacity: 0; }
  100% { background-position: 130% 0; opacity: 0; }
}
@keyframes ppNeonCometBottom {
  0%   { background-position: 200% 0; opacity: 0; }
  6%   { opacity: 1; }
  60%  { background-position: 0% 0; opacity: 1; }
  72%  { background-position: -30% 0; opacity: 0; }
  100% { background-position: -30% 0; opacity: 0; }
}

/* Crest halo — soft pulsing aurora behind the crest image */
.footer .footer-crest-band {
  position: relative;
  isolation: isolate;
}
.footer .footer-crest-band > .footer-crest-img { position: relative; z-index: 2; }
.footer .footer-crest-band::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 160px;
  height: 160px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle,
      rgba(255, 255, 255, 0.18) 0%,
      rgba(228, 236, 223, 0.14) 28%,
      rgba(31, 61, 46, 0.12) 55%,
      transparent 75%);
  filter: blur(10px);
  animation: ppCrestHalo 5.4s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}
@keyframes ppCrestHalo {
  0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(0.92); }
  50%      { opacity: 1;    transform: translate(-50%, -50%) scale(1.08); }
}

/* Vertical neon hairlines between the four columns. Drawn as ::before on
   the 2nd / 3rd / 4th direct children of .footer-main, sitting in the gap. */
.footer .footer-main > div { position: relative; }
.footer .footer-main > div + div::before {
  content: '';
  position: absolute;
  left: -20px;
  top: 12%;
  bottom: 12%;
  width: 1px;
  pointer-events: none;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(188, 201, 183, 0.18) 20%,
    rgba(228, 236, 223, 0.6) 50%,
    rgba(188, 201, 183, 0.18) 80%,
    transparent 100%);
  animation: ppNeonHairline 4.2s ease-in-out infinite alternate;
  box-shadow: 0 0 6px rgba(188, 201, 183, 0.18);
}
.footer .footer-main > div:nth-child(3)::before { animation-delay: 0.9s; }
.footer .footer-main > div:nth-child(4)::before { animation-delay: 1.8s; }

@keyframes ppNeonHairline {
  0%   {
    opacity: 0.35;
    box-shadow: 0 0 4px rgba(188, 201, 183, 0.18);
  }
  100% {
    opacity: 0.95;
    box-shadow: 0 0 10px rgba(228, 236, 223, 0.55), 0 0 22px rgba(31, 61, 46, 0.45);
  }
}

/* Hide the vertical hairlines on stacked layouts */
@media (max-width: 1100px) {
  .footer .footer-main > div + div::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .footer .footer-main::before,
  .footer .footer-main::after,
  .footer .footer-crest-band::after,
  .footer .footer-main > div + div::before { animation: none !important; }
}

/* ============================================================================
   CELEBRITY CARDS — REFINEMENT PASS 2026-05-22
   Sasha feedback: hover cursor was the browser default zoom-in (ugly).
   Lightbox could exceed the viewport and the page kept scrolling underneath.
   - Replace the diagonal-tint ::after with a brass-bordered diamond badge.
   - Cap the lightbox frame to the viewport; image becomes flex-shrinkable.
   - JS sets <html> + <body> scroll lock (handled in index.html).
   ============================================================================ */

/* Repurpose ::after as a centered brass-and-diamond hover affordance */
.celebs-v2-card::after {
  content: "\025C6"; /* ◆ */
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(54px, 5.6vw, 72px);
  height: clamp(54px, 5.6vw, 72px);
  inset: auto;
  display: grid;
  place-items: center;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(18px, 1.7vw, 24px);
  color: #FFF1C4;
  text-shadow: 0 0 14px rgba(232, 193, 106, 0.85);
  background:
    radial-gradient(circle at center,
      rgba(15, 28, 22, 0.86) 0%,
      rgba(15, 28, 22, 0.55) 60%,
      rgba(15, 28, 22, 0) 100%);
  border: 1px solid rgba(232, 193, 106, 0.55);
  border-radius: 50%;
  z-index: 5;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.82);
  transition: opacity 0.5s ease, transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.4s ease;
  pointer-events: none;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.55);
}
.celebs-v2-card:hover::after,
.celebs-v2-card:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  border-color: rgba(255, 241, 196, 0.95);
}

/* Override the legacy hover rule that set the diagonal tint via ::after */
.celebs-v2-card:hover::after { opacity: 1; }

@media (hover: none) {
  /* Touch devices: keep the affordance visible at a quieter intensity */
  .celebs-v2-card::after {
    opacity: 0.7;
    transform: translate(-50%, -50%) scale(0.95);
  }
}
@media (prefers-reduced-motion: reduce) {
  .celebs-v2-card::after { transition: opacity 0.2s ease; }
}

/* ----- Lightbox: constrain to viewport so it never overflows ----- */
.celeb-lightbox__frame {
  max-width: min(440px, 90vw) !important;
  max-height: calc(100vh - 36px);
  padding: 12px 12px 16px !important;
  display: flex;
  flex-direction: column;
}
.celeb-lightbox__media {
  flex: 1 1 auto;
  min-height: 0;
  max-height: calc(100vh - 200px); /* room for caption + close + frame padding */
  aspect-ratio: 3 / 4;
  width: 100%;
}
/* If the 3/4 ratio would overflow vertically, browser respects max-height
   and the width shrinks accordingly because aspect-ratio is responsive. */
.celeb-lightbox__img {
  object-fit: cover;
  object-position: center 18%;
}
.celeb-lightbox__cap {
  flex: 0 0 auto;
  padding: 16px 16px 4px !important;
}
.celeb-lightbox__rule {
  margin-bottom: 10px !important;
}
.celeb-lightbox__name {
  font-size: clamp(1.45rem, 2vw, 1.85rem) !important;
}
.celeb-lightbox__role {
  margin-top: 8px !important;
  font-size: 0.66rem !important;
}

/* Stronger backdrop so page underneath reads as fully dismissed */
.celeb-lightbox.is-open {
  background: rgba(6, 12, 9, 0.92) !important;
  backdrop-filter: blur(18px) saturate(1.1) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.1) !important;
}

/* Body scroll-lock helper class. JS toggles .celeb-lightbox-open on <html>
   and <body> so the page beneath cannot scroll while the portrait is up. */
html.celeb-lightbox-open,
body.celeb-lightbox-open {
  overflow: hidden !important;
  height: 100% !important;
  /* prevent layout shift from scrollbar disappearing */
  /* scrollbar-gutter is supported on modern browsers */
}
body.celeb-lightbox-open {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
}

@media (max-width: 560px) {
  .celeb-lightbox__frame {
    max-width: 92vw !important;
    padding: 10px 10px 14px !important;
  }
  .celeb-lightbox__media { max-height: calc(100vh - 170px); }
}


/* ============================================================================
   COLLECTIONS HERO — FULL-BLEED OVERLAY + SHIMMERING TRUST BAND
   Replaces the v1 paper-padded layout. Image now touches the left/right edges,
   the headline sits OVER it with a luxe scrim, and the certification pills
   live in their own animated trust band directly below.
   ============================================================================ */

.col-hero-v2.col-hero-v2-overlay {
  position: relative;
  background: #0a120d;
  padding: 0 !important;
  margin: 0;
  width: 100%;
  min-height: clamp(560px, 88vh, 980px);
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
}

.col-hero-v2.col-hero-v2-overlay::before { content: none !important; }

/* MOBILE: a true vertical crop of the creative.
   26 Aug 2026, Sasha: "it needs to be vertical". Padding the landscape master
   out with extended velvet read as a horizontal strip floating in green, which
   is not a vertical composition. collections.html now serves a real 9:16 crop
   below 760px, cut into the spread so the emerald pendant, the swallow brooch
   and the diamond sunburst fill the frame, with clean velvet at the top for
   the headline to sit on. */
@media (max-width: 760px) {
  .col-hero-v2.col-hero-v2-overlay {
    aspect-ratio: 9 / 16;
    min-height: 0;
    max-height: 92vh;
  }
  .col-hero-v2.col-hero-v2-overlay .col-hero-v2-cover-img {
    object-fit: cover !important;
    object-position: center !important;
  }
}

.col-hero-v2-overlay .col-hero-v2-cover-img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  z-index: 0 !important;
  display: block;
}

.col-hero-v2-overlay .col-hero-v2-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(8, 16, 11, 0.55) 0%,
      rgba(8, 16, 11, 0.18) 32%,
      rgba(8, 16, 11, 0.18) 60%,
      rgba(8, 16, 11, 0.75) 100%),
    radial-gradient(ellipse 60% 50% at 50% 50%, transparent 0%, rgba(8, 16, 11, 0.35) 100%);
}

.col-hero-v2-overlay .col-hero-v2-head {
  position: relative !important;
  z-index: 2 !important;
  max-width: 920px !important;
  margin: 0 auto !important;
  padding: clamp(56px, 8vh, 96px) clamp(28px, 5vw, 72px) clamp(56px, 8vh, 96px) !important;
  text-align: center !important;
  color: #FBFBF7 !important;
}

/* ---------------------------------------------------------------------------
   CRYSTAL PANE — a floating frosted-glass card with brass corner brackets and
   animated shimmer rails. Sits over the cover photo so the headline reads
   like a museum plaque, not body copy lost in the velvet.
   ------------------------------------------------------------------------- */
.col-hero-v2-overlay .col-hero-v2-pane {
  background:
    linear-gradient(135deg, rgba(8, 16, 11, 0.62) 0%, rgba(20, 36, 26, 0.50) 50%, rgba(8, 16, 11, 0.62) 100%);
  backdrop-filter: blur(22px) saturate(125%);
  -webkit-backdrop-filter: blur(22px) saturate(125%);
  border: 1px solid rgba(228, 236, 223, 0.22);
  box-shadow:
    0 0 0 1px rgba(31, 61, 46, 0.4) inset,
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 40px 100px -30px rgba(0, 0, 0, 0.55),
    0 18px 60px -20px rgba(31, 61, 46, 0.5);
  isolation: isolate;
}

/* Inner aura — soft emerald-to-warm-cream radial glow */
.col-hero-v2-overlay .col-hero-v2-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 50% at 50% 35%, rgba(228, 236, 223, 0.10) 0%, transparent 70%),
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(201, 169, 110, 0.08) 0%, transparent 65%);
  z-index: 0;
}

.col-hero-v2-overlay .col-hero-v2-pane > .col-hero-v2-eyebrow,
.col-hero-v2-overlay .col-hero-v2-pane > .col-hero-v2-rule,
.col-hero-v2-overlay .col-hero-v2-pane > .col-hero-v2-h,
.col-hero-v2-overlay .col-hero-v2-pane > .col-hero-v2-sub {
  position: relative;
  z-index: 2;
}

/* Brass corner brackets — Art Deco L-shapes at each corner with a soft halo */
.col-hero-v2-corner {
  position: absolute;
  width: 36px;
  height: 36px;
  border-color: rgba(201, 169, 110, 0.92);
  z-index: 4;
  pointer-events: none;
  filter: drop-shadow(0 0 8px rgba(201, 169, 110, 0.55)) drop-shadow(0 0 18px rgba(255, 246, 217, 0.18));
  animation: ppCornerGlow 5s ease-in-out infinite;
}
.col-hero-v2-corner-tl { top: -1px;    left: -1px;   border-top: 1px solid;    border-left: 1px solid;  }
.col-hero-v2-corner-tr { top: -1px;    right: -1px;  border-top: 1px solid;    border-right: 1px solid; animation-delay: 0.6s; }
.col-hero-v2-corner-bl { bottom: -1px; left: -1px;   border-bottom: 1px solid; border-left: 1px solid;  animation-delay: 1.2s; }
.col-hero-v2-corner-br { bottom: -1px; right: -1px;  border-bottom: 1px solid; border-right: 1px solid; animation-delay: 1.8s; }

@keyframes ppCornerGlow {
  0%, 100% {
    border-color: rgba(201, 169, 110, 0.85);
    filter: drop-shadow(0 0 6px rgba(201, 169, 110, 0.45));
  }
  50% {
    border-color: rgba(255, 246, 217, 1);
    filter: drop-shadow(0 0 12px rgba(255, 246, 217, 0.7)) drop-shadow(0 0 26px rgba(201, 169, 110, 0.45));
  }
}

/* Top + bottom shimmer rails — slow brass sweep travelling across the pane edges */
.col-hero-v2-rail {
  position: absolute;
  left: 12%;
  right: 12%;
  height: 1px;
  pointer-events: none;
  z-index: 3;
  background-image: linear-gradient(90deg,
    transparent 0%,
    rgba(201, 169, 110, 0.55) 30%,
    rgba(255, 246, 217, 1) 50%,
    rgba(201, 169, 110, 0.55) 70%,
    transparent 100%);
  background-size: 220% 100%;
  background-position: 200% center;
  background-repeat: no-repeat;
  filter: drop-shadow(0 0 6px rgba(201, 169, 110, 0.45));
}
.col-hero-v2-rail-top { top: -1px;    animation: ppRailSweep 7s linear infinite; }
.col-hero-v2-rail-bot { bottom: -1px; animation: ppRailSweep 7s linear infinite reverse 3.5s; }

@keyframes ppRailSweep {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}

/* Headline gets a heavier text-shadow so it sits crisp on any photo */
.col-hero-v2-overlay .col-hero-v2-pane .col-hero-v2-h {
  text-shadow:
    0 2px 4px rgba(0, 0, 0, 0.7),
    0 6px 24px rgba(0, 0, 0, 0.55),
    0 0 60px rgba(0, 0, 0, 0.45),
    0 0 100px rgba(20, 36, 26, 0.4) !important;
}

.col-hero-v2-overlay .col-hero-v2-pane .col-hero-v2-sub {
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.7),
    0 4px 16px rgba(0, 0, 0, 0.55) !important;
}

.col-hero-v2-overlay .col-hero-v2-pane .col-hero-v2-eyebrow {
  filter: drop-shadow(0 0 14px rgba(255, 246, 217, 0.45)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
}

.col-hero-v2-overlay .col-hero-v2-pane .col-hero-v2-rule {
  background: linear-gradient(90deg, transparent, rgba(255, 246, 217, 0.95), transparent) !important;
  box-shadow: 0 0 10px rgba(255, 246, 217, 0.55);
}

@media (max-width: 560px) {
  .col-hero-v2-overlay .col-hero-v2-pane {
    margin: 0 14px !important;
  }
  .col-hero-v2-corner { width: 24px; height: 24px; }
  .col-hero-v2-rail { left: 8%; right: 8%; }
}

@media (prefers-reduced-motion: reduce) {
  .col-hero-v2-corner,
  .col-hero-v2-rail-top,
  .col-hero-v2-rail-bot { animation: none !important; }
}


/* The NEON TRUST BADGES block that stood here styled the seven chips the hero
   used to carry over the photograph. Those chips were removed on 26 Aug 2026 and
   'col-trust-v2--neon' now appears in no HTML on the site, so the rules and their
   two keyframes were unreachable and have been deleted. */


/* ============================================================================
   INTRO BAND — replaces the trust-band slot below the hero. A clean
   editorial line of body copy on paper, centred, with elegant flanking rules.
   ============================================================================ */
/* .col-trust-band was hidden while the credentials lived on the cover photo.
   26 Aug 2026: they moved back out of the hero into this band, so it is live again. */

.col-intro-band {
  position: relative;
  padding: clamp(48px, 6vw, 88px) clamp(20px, 4vw, 80px);
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(31, 61, 46, 0.05) 0%, transparent 70%),
    #FBFBF7;
  text-align: center;
  overflow: hidden;
}

.col-intro-band::before,
.col-intro-band::after {
  content: '';
  position: absolute;
  top: 50%;
  width: clamp(60px, 10vw, 160px);
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(31, 61, 46, 0.4) 50%, transparent);
}
.col-intro-band::before { left: 6%; }
.col-intro-band::after  { right: 6%; }

.col-intro-band-text {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1.1rem, 1.5vw, 1.45rem);
  line-height: 1.65;
  color: #1A211C;
  max-width: 820px;
  margin: 0 auto;
}

@media (max-width: 760px) {
  .col-intro-band::before,
  .col-intro-band::after { display: none; }
  .col-intro-band-text { font-size: 1.05rem; }
}


/* ============================================================================
   CART FAB — recolour to a brighter green that out-shines the WhatsApp button.
   Brighter celadon ground, brighter gold ring, larger glow, faster pulse.
   ============================================================================ */
.cart-fab {
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.55) 0%, rgba(228, 236, 223, 0) 38%),
    linear-gradient(135deg, #E4ECDF 0%, #88B58C 35%, #1F3D2E 100%) !important;
  color: #F5E0A8 !important;
  border: 1.5px solid rgba(255, 246, 217, 0.85) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 8px 28px rgba(31, 61, 46, 0.55),
    0 0 18px rgba(188, 201, 183, 0.6),
    0 0 42px rgba(201, 169, 110, 0.35) !important;
  width: 58px !important;
  height: 58px !important;
  animation: ppCartFabPulse 2.6s ease-in-out infinite !important;
  position: fixed !important;
  bottom: 96px !important;
  right: 28px !important;
  z-index: 60 !important;
}

.cart-fab svg {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4)) drop-shadow(0 0 8px rgba(255, 246, 217, 0.55));
  stroke-width: 1.6 !important;
}

.cart-fab:hover {
  transform: scale(1.08) !important;
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.7) 0%, rgba(228, 236, 223, 0) 42%),
    linear-gradient(135deg, #F0F6EB 0%, #98C29C 35%, #1F3D2E 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    0 12px 36px rgba(31, 61, 46, 0.6),
    0 0 28px rgba(255, 246, 217, 0.7),
    0 0 56px rgba(188, 201, 183, 0.6) !important;
}

.cart-fab-count {
  background: linear-gradient(135deg, #FFF6D9 0%, #F5E0A8 50%, #C9A55C 100%) !important;
  color: #1F3D2E !important;
  border: 2px solid #FBFBF7 !important;
  box-shadow: 0 0 10px rgba(255, 246, 217, 0.65) !important;
  font-weight: 700 !important;
}

@keyframes ppCartFabPulse {
  0%, 100% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.55),
      0 8px 24px rgba(31, 61, 46, 0.5),
      0 0 14px rgba(188, 201, 183, 0.45),
      0 0 0 0 rgba(228, 236, 223, 0.55);
  }
  70% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.6),
      0 10px 32px rgba(31, 61, 46, 0.55),
      0 0 22px rgba(255, 246, 217, 0.6),
      0 0 0 22px rgba(228, 236, 223, 0);
  }
  100% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.55),
      0 8px 24px rgba(31, 61, 46, 0.5),
      0 0 14px rgba(188, 201, 183, 0.45),
      0 0 0 0 rgba(228, 236, 223, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cart-fab { animation: none !important; }
}


/* ============================================================================
   COLLECTION HERO — REMOVE CRYSTAL PANE FRAME
   The frosted-glass pane, corner brackets, shimmer rails and dark scrim are
   off. Photo is clear behind the text. Headline survives via heavy text-shadow
   and a serif "white-ink" treatment that holds against any photography.
   ============================================================================ */

/* Kill the pane chrome */
.col-hero-v2-overlay .col-hero-v2-pane {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* Soft, low-opacity wash behind the text only — keeps minimum legibility on
   the brightest hot-spots of the photo without reading as a "frame". Sits on
   the head element itself so only the column of type is gently darkened. */
.col-hero-v2-overlay .col-hero-v2-pane::before {
  content: '';
  position: absolute;
  inset: -10% -8%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 55% at 50% 50%, rgba(8, 16, 11, 0.32) 0%, rgba(8, 16, 11, 0.0) 70%);
  filter: blur(20px);
}

/* Hide every frame element */
.col-hero-v2-overlay .col-hero-v2-corner,
.col-hero-v2-overlay .col-hero-v2-rail,
.col-hero-v2-overlay .col-hero-v2-glow {
  display: none !important;
}

/* Lighten the section-wide scrim — keep just enough top + bottom vignette so
   the nav and bottom of the photo darken, but the centre stays clear. */
.col-hero-v2-overlay .col-hero-v2-scrim {
  background:
    linear-gradient(180deg,
      rgba(8, 16, 11, 0.55) 0%,
      rgba(8, 16, 11, 0.05) 22%,
      rgba(8, 16, 11, 0.0) 50%,
      rgba(8, 16, 11, 0.05) 78%,
      rgba(8, 16, 11, 0.55) 100%) !important;
}

/* Headline — heavy multi-layer shadow halo. Reads on any photo. */
.col-hero-v2-overlay .col-hero-v2-pane .col-hero-v2-h {
  text-shadow:
    0 2px 3px rgba(0, 0, 0, 0.85),
    0 4px 10px rgba(0, 0, 0, 0.75),
    0 8px 28px rgba(0, 0, 0, 0.65),
    0 0 36px rgba(0, 0, 0, 0.55),
    0 0 80px rgba(8, 16, 11, 0.75),
    0 0 120px rgba(20, 36, 26, 0.55) !important;
  filter: drop-shadow(0 0 18px rgba(0, 0, 0, 0.45));
}

.col-hero-v2-overlay .col-hero-v2-pane .col-hero-v2-h em {
  filter: drop-shadow(0 0 14px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 26px rgba(188, 201, 183, 0.4));
}

/* Eyebrow — keep the brass clipped text, add a sharper drop-shadow for grip */
.col-hero-v2-overlay .col-hero-v2-pane .col-hero-v2-eyebrow {
  filter:
    drop-shadow(0 1px 2px rgba(0, 0, 0, 0.85))
    drop-shadow(0 2px 8px rgba(0, 0, 0, 0.65))
    drop-shadow(0 0 18px rgba(255, 246, 217, 0.4));
}

/* Rule — cream glow on a soft halo */
.col-hero-v2-overlay .col-hero-v2-pane .col-hero-v2-rule {
  box-shadow:
    0 0 8px rgba(255, 246, 217, 0.6),
    0 0 18px rgba(0, 0, 0, 0.45) !important;
}

/* Sub-text was moved out of the hero by an earlier change; no override needed. */

/* Trust badges retain their own neon pill backgrounds — those individual
   modules are intentional. Just kill the pane wrapper effects above. */

.col-hero-v2-overlay .col-hero-v2-eyebrow {
  background-image: linear-gradient(
    100deg,
    #BCC9B7 0%,
    #BCC9B7 35%,
    #FFFFFF 48%,
    #FFFFFF 52%,
    #BCC9B7 65%,
    #BCC9B7 100%
  ) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.46em !important;
  filter: drop-shadow(0 0 14px rgba(31, 61, 46, 0.6));
}

.col-hero-v2-overlay .col-hero-v2-rule {
  width: 72px !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(228, 236, 223, 0.9), transparent) !important;
  box-shadow: 0 0 8px rgba(228, 236, 223, 0.45);
}

.col-hero-v2-overlay .col-hero-v2-h {
  color: #FFFFFF !important;
  font-size: clamp(2.6rem, 5.4vw, 5rem) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.012em !important;
  margin: 0 0 22px !important;
  text-shadow:
    0 2px 24px rgba(0, 0, 0, 0.45),
    0 0 60px rgba(0, 0, 0, 0.35);
}

.col-hero-v2-overlay .col-hero-v2-h em {
  font-style: italic;
  background-image: linear-gradient(
    100deg,
    #E4ECDF 0%,
    #FFFFFF 45%,
    #BCC9B7 50%,
    #FFFFFF 55%,
    #E4ECDF 100%
  ) !important;
  background-size: 220% 100%;
  background-position: 100% center;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: ppCelaSweep 6s linear infinite;
  filter: drop-shadow(0 0 18px rgba(188, 201, 183, 0.35));
}

.col-hero-v2-overlay .col-hero-v2-sub {
  color: rgba(251, 251, 247, 0.92) !important;
  font-size: clamp(1rem, 1.2vw, 1.12rem) !important;
  line-height: 1.78 !important;
  max-width: 680px !important;
  margin: 0 auto !important;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.5);
}

/* Subtle scroll cue inside the hero (decorative) */
.col-hero-v2-overlay::after {
  content: '';
  position: absolute;
  bottom: 22px;
  left: 50%;
  width: 1px;
  height: 56px;
  background: linear-gradient(180deg, rgba(228, 236, 223, 0.65), transparent);
  transform: translateX(-50%);
  z-index: 2;
  animation: ppHeroCueDrop 2.6s ease-in-out infinite;
}
@keyframes ppHeroCueDrop {
  0%, 100% { transform: translate(-50%, 0); opacity: 0.4; }
  50%      { transform: translate(-50%, 10px); opacity: 1; }
}


/* --- Trust band — sits between hero and toolbar, animated shine on every pill --- */
.col-trust-band {
  position: relative;
  padding: clamp(30px, 4vw, 56px) clamp(20px, 4vw, 60px);
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(31, 61, 46, 0.06) 0%, transparent 70%),
    #FBFBF7;
  overflow: hidden;
}

.col-trust-band .col-trust-v2 {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 14px 0;
  padding: 22px 12px;
  background: #FFFFFF;
  border: 1px solid rgba(31, 61, 46, 0.18);
  margin: 0 auto;
  max-width: 1180px;
  width: 100%;
  box-sizing: border-box;
  box-shadow:
    0 22px 56px -34px rgba(31, 61, 46, 0.28),
    0 6px 22px -16px rgba(20, 28, 22, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  position: relative;
  isolation: isolate;
}

/* Brass-deep top accent line and green-deep bottom rule */
.col-trust-band .col-trust-v2::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(201, 169, 110, 0.7) 25%, rgba(255, 246, 217, 0.95) 50%, rgba(201, 169, 110, 0.7) 75%, transparent 100%);
  opacity: 0.85;
}
.col-trust-band .col-trust-v2::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(31, 61, 46, 0.4) 50%, transparent 100%);
}

/* Each pill becomes a richer, lit module separated by a vertical hairline */
.col-trust-band .col-trust-v2-item {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 6px 28px;
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  color: #1A211C;
  letter-spacing: 0.06em;
  font-weight: 600;
  position: relative;
}

.col-trust-band .col-trust-v2-item + .col-trust-v2-item::before {
  content: '';
  position: absolute;
  left: 0; top: 12%; bottom: 12%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(31, 61, 46, 0.28), transparent);
}

/* Badges — brass with a slow shimmer sweep across their text */
.col-trust-band .col-trust-v2-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  padding: 5px 12px;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: 0.92rem;
  border: 1px solid rgba(160, 122, 53, 0.65);
  background:
    linear-gradient(135deg, rgba(251, 248, 240, 0.95) 0%, rgba(255, 255, 255, 1) 50%, rgba(248, 244, 232, 0.95) 100%);
  letter-spacing: 0.08em;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 4px 14px -6px rgba(160, 122, 53, 0.4);
  position: relative;
  overflow: hidden;
  /* Brass-cream text shimmer */
  background-clip: padding-box;
}

.col-trust-band .col-trust-v2-badge {
  color: transparent;
  -webkit-background-clip: padding-box;
}
/* Use a separate inner gradient for the text using ::after wouldn't work since
   :badge is an inline-flex. Instead set the text colour and add a glow halo. */
.col-trust-band .col-trust-v2-badge {
  color: #8B6A2F;
  text-shadow: 0 0 8px rgba(201, 169, 110, 0.45), 0 1px 0 rgba(255, 255, 255, 0.8);
  animation: ppBadgeShine 5.4s ease-in-out infinite;
}
.col-trust-band .col-trust-v2-item:nth-child(2) .col-trust-v2-badge { animation-delay: 0.6s; }
.col-trust-band .col-trust-v2-item:nth-child(3) .col-trust-v2-badge { animation-delay: 1.2s; }
.col-trust-band .col-trust-v2-item:nth-child(4) .col-trust-v2-badge { animation-delay: 1.8s; }
.col-trust-band .col-trust-v2-item:nth-child(5) .col-trust-v2-badge { animation-delay: 2.4s; }

@keyframes ppBadgeShine {
  0%, 100% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.9),
      0 4px 14px -6px rgba(160, 122, 53, 0.4);
    border-color: rgba(160, 122, 53, 0.55);
  }
  50% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 1),
      0 0 18px rgba(201, 169, 110, 0.55),
      0 4px 18px -4px rgba(160, 122, 53, 0.55);
    border-color: rgba(201, 169, 110, 0.95);
  }
}

/* Star ratings — brass with a glow pulse */
.col-trust-band .col-trust-v2-stars {
  color: #C9A55C;
  letter-spacing: 2px;
  font-size: 0.92rem;
  text-shadow: 0 0 8px rgba(201, 169, 110, 0.45);
  animation: ppStarsGlow 4s ease-in-out infinite;
}
@keyframes ppStarsGlow {
  0%, 100% { text-shadow: 0 0 6px rgba(201, 169, 110, 0.35); }
  50%      { text-shadow: 0 0 14px rgba(201, 169, 110, 0.75), 0 0 28px rgba(255, 246, 217, 0.4); }
}

.col-trust-band .col-trust-v2-text {
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  color: #1A211C;
  letter-spacing: 0.05em;
  font-weight: 600;
}
.col-trust-band .col-trust-v2-text strong { color: #1A211C; font-weight: 700; font-size: 0.92rem; }

/* Slow comet shine sweeping across the trust band itself, like a luxe billboard */
.col-trust-band::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg,
    transparent 30%,
    rgba(255, 246, 217, 0.0) 38%,
    rgba(255, 246, 217, 0.18) 50%,
    rgba(255, 246, 217, 0.0) 62%,
    transparent 70%);
  background-size: 280% 100%;
  background-position: 220% center;
  animation: ppTrustComet 7.5s ease-in-out infinite 1.2s;
  mix-blend-mode: screen;
  z-index: 2;
}
@keyframes ppTrustComet {
  0%   { background-position: 220% center; opacity: 0; }
  10%  { opacity: 1; }
  70%  { background-position: -120% center; opacity: 1; }
  78%  { background-position: -120% center; opacity: 0; }
  100% { background-position: -120% center; opacity: 0; }
}

@media (max-width: 900px) {
  .col-trust-band .col-trust-v2 { padding: 16px 8px; gap: 12px 0; }
  .col-trust-band .col-trust-v2-item { padding: 6px 16px; font-size: 0.72rem; }
  .col-trust-band .col-trust-v2-item + .col-trust-v2-item::before { display: none; }
}

@media (max-width: 560px) {
  /* min-height and the head padding were removed 26 Aug 2026: the first fought
     the 9:16 crop rule that deliberately zeroes min-height, the second fought
     the new top-aligned padding. Both were specificity 0,2,0 and won on order. */
  .col-hero-v2-overlay .col-hero-v2-h { font-size: clamp(2rem, 8vw, 2.8rem) !important; }
}

@media (prefers-reduced-motion: reduce) {
  .col-hero-v2-overlay::after,
  .col-hero-v2-overlay .col-hero-v2-h em,
  .col-trust-band::after,
  .col-trust-band .col-trust-v2-badge,
  .col-trust-band .col-trust-v2-stars { animation: none !important; }
}

/* ============================================================================
   CHROME CONSISTENCY OVERRIDES — added 2026-05-24
   Killing the loud cream "page-breaker" bands the client called out, and
   unifying the review stars to the gold treatment used in the hero. These
   rules are the final word in the cascade so subpages inherit them too.
   ============================================================================ */

/* 1 · No cream-to-emerald gradient band. Both the legacy .led-breaker
       and the .footer-seam wrappers collapse to zero — white content
       ends, a single luminous brass LED hairline glows along the top of
       the dark footer, and the footer begins. One clean cut. */
.led-breaker,
.footer-seam {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  overflow: hidden !important;
}
.led-breaker > *,
.footer-seam > * { display: none !important; }
.led-breaker::before,
.led-breaker::after,
.footer-seam::before,
.footer-seam::after { display: none !important; content: none !important; }

/* The LED beam lives on the footer's top edge. Thin brass line, warm
   halo bleeding a few pixels into both sides — that halo IS the seam. */
.footer { position: relative; }
.footer::before {
  content: '' !important;
  position: absolute !important;
  top: -1px !important;
  left: 0 !important;
  right: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(232, 193, 106, 0)    8%,
    rgba(232, 193, 106, 0.55) 24%,
    #FFF1C4 50%,
    rgba(232, 193, 106, 0.55) 76%,
    rgba(232, 193, 106, 0)    92%,
    transparent 100%) !important;
  box-shadow:
    0 0 10px rgba(255, 241, 196, 0.9),
    0 0 26px rgba(232, 193, 106, 0.6),
    0  -8px 30px rgba(232, 193, 106, 0.22),
    0   8px 30px rgba(232, 193, 106, 0.22) !important;
  pointer-events: none !important;
  z-index: 4 !important;
  animation: footerLEDBreath 5.2s ease-in-out infinite;
}
@keyframes footerLEDBreath {
  0%, 100% { opacity: 0.85; filter: brightness(1); }
  50%      { opacity: 1;     filter: brightness(1.18); }
}
@media (prefers-reduced-motion: reduce) {
  .footer::before { animation: none !important; }
}

/* ============================================================================
   LED DIVIDER — reusable luminous strip between two cream sections.
   Drop <div class="led-divider" aria-hidden="true"></div> anywhere a section
   meets another section and the seam needs a single elegant beam of light.
   Thin brass hairline + warm halo + slow breathing pulse + a brighter bead
   that traverses the line every few seconds.
   ============================================================================ */
.led-divider {
  position: relative;
  display: block;
  width: 100%;
  padding: clamp(14px, 2vw, 28px) 0;
  background: transparent;
  pointer-events: none;
  overflow: hidden;
}
.led-divider::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(72vw, 760px);
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(232, 193, 106, 0) 5%,
    rgba(232, 193, 106, 0.60) 22%,
    #FFF1C4 50%,
    rgba(232, 193, 106, 0.60) 78%,
    rgba(232, 193, 106, 0) 95%,
    transparent 100%);
  box-shadow:
    0 0 8px rgba(255, 241, 196, 0.75),
    0 0 22px rgba(232, 193, 106, 0.45),
    0 -4px 22px rgba(232, 193, 106, 0.18),
    0  4px 22px rgba(232, 193, 106, 0.18);
  animation: ledDividerBreath 5.6s ease-in-out infinite;
}
/* Brighter travelling bead — a thin bright dot that runs the length of
   the line every few seconds like a real LED filament. */
.led-divider::after {
  content: '';
  position: absolute;
  top: 50%;
  left: calc(50% - min(36vw, 380px));
  width: 80px;
  height: 2px;
  transform: translateY(-50%);
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 244, 200, 0) 10%,
    #FFFCEB 50%,
    rgba(255, 244, 200, 0) 90%,
    transparent 100%);
  box-shadow:
    0 0 16px rgba(255, 244, 200, 0.9),
    0 0 32px rgba(255, 220, 140, 0.7);
  border-radius: 1px;
  animation: ledDividerRunner 7.2s ease-in-out infinite;
  opacity: 0;
}
@keyframes ledDividerBreath {
  0%, 100% { opacity: 0.78; filter: brightness(1); }
  50%      { opacity: 1;    filter: brightness(1.22); }
}
@keyframes ledDividerRunner {
  0%   { transform: translate(0, -50%);                          opacity: 0; }
  8%   { opacity: 1; }
  50%  { transform: translate(min(72vw, 760px), -50%);           opacity: 1; }
  58%  { opacity: 0; }
  100% { transform: translate(min(72vw, 760px), -50%);           opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .led-divider::before,
  .led-divider::after { animation: none !important; }
  .led-divider::after { display: none !important; }
}
@media (max-width: 720px) {
  .led-divider { padding: clamp(10px, 3vw, 20px) 0; }
  .led-divider::before { width: 86vw; }
  .led-divider::after { left: 7vw; }
  @keyframes ledDividerRunner {
    0%   { transform: translate(0, -50%);    opacity: 0; }
    8%   { opacity: 1; }
    50%  { transform: translate(86vw, -50%); opacity: 1; }
    58%  { opacity: 0; }
    100% { transform: translate(86vw, -50%); opacity: 0; }
  }
}

/* 2 · .pp-divider — quieter ornament between white sections. No more
       opaque cream circle on a white ground. */
.pp-divider {
  margin: clamp(20px, 3vw, 36px) 0 !important;
  height: 40px !important;
}
.pp-divider-arrow {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  width: 30px !important;
  height: 30px !important;
  color: rgba(31, 61, 46, 0.55) !important;
}
.pp-divider-scroll:hover .pp-divider-arrow {
  background: transparent !important;
  border: 0 !important;
  color: var(--pp-green-deep) !important;
  transform: translateY(2px) scale(1.06) !important;
}
.pp-divider-rule,
.pp-divider-rule-r {
  max-width: 320px !important;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(31, 61, 46, 0.22) 50%,
    transparent 100%) !important;
}

/* 3 · Reviews section — gold stars + brighter platform titles. Wins over
       the older sage-green override on rp-stars / rv-stars. */
.reviews-section .rp-stars,
.reviews-section .rp-stars span,
.reviews-section .rv-stars {
  color: #E8C16A !important;
  letter-spacing: 2.5px !important;
  font-size: 0.92rem !important;
  filter: drop-shadow(0 0 6px rgba(245, 224, 168, 0.55));
  animation: heroStarsGoldFlash 2.6s ease-in-out infinite;
}
.reviews-section .rp-stars { gap: 3px; }

.reviews-section .rp-platform-name {
  font-family: var(--sans, 'Inter', system-ui, sans-serif) !important;
  font-size: 0.62rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  color: var(--pp-green-deep, #1F3D2E) !important;
  margin-bottom: 6px !important;
}

.reviews-section .rp-score {
  font-family: var(--serif, 'Cormorant Garamond', serif) !important;
  font-size: 1.85rem !important;
  font-weight: 400 !important;
  color: #0E0F0E !important;
  line-height: 1 !important;
}

.reviews-section .rp-count {
  font-family: var(--sans, 'Inter', system-ui, sans-serif) !important;
  font-size: 0.6rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: rgba(26, 33, 28, 0.62) !important;
  margin-top: 8px !important;
}

.reviews-section .rp-cta {
  font-family: var(--sans, 'Inter', system-ui, sans-serif) !important;
  font-size: 0.56rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.3em !important;
  text-transform: uppercase !important;
  color: var(--pp-green-deep, #1F3D2E) !important;
  margin-top: 12px !important;
}

@media (prefers-reduced-motion: reduce) {
  .reviews-section .rp-stars,
  .reviews-section .rp-stars span,
  .reviews-section .rv-stars { animation: none !important; }
}

/* Pages that ship their own savings cart hide the chrome's diamond-cart
   so the two floats never overlap in the bottom-right stack. */
body.page-collections .diamond-cart,
body.page-product    .diamond-cart { display: none !important; }

/* ============================================================================
   COLLECTIONS HERO HEADLINE — fix word-anim breaking background-clip:text
   ============================================================================
   The .word-anim splitter wraps each word in an inline-block <span class="word">,
   which creates its own paint context. The parent's background-clip:text +
   transparent fill cannot reach the children, so the words painted as solid
   black on the dark green velvet hero (invisible). Force the words to paint
   in solid white (body) and champagne gold (italic em), matching the celebs
   headline. We MUST NOT touch the .word entrance animation (ppWordIn) — that
   is what fades the words in from opacity 0; killing it leaves them hidden. */
.col-hero-v2-overlay .col-hero-v2-h,
.col-hero-v2 .col-hero-v2-h {
  background: none !important;
  -webkit-background-clip: border-box !important;
          background-clip: border-box !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  text-shadow:
    0 2px 18px rgba(0, 0, 0, 0.55),
    0 0 32px rgba(0, 0, 0, 0.35) !important;
  filter: drop-shadow(0 2px 18px rgba(0, 0, 0, 0.45)) !important;
  animation: none !important;
}
/* Colour ONLY on the words — leave their opacity/transform/blur animation
   alone so they still fade in word-by-word. */
.col-hero-v2-overlay .col-hero-v2-h .word,
.col-hero-v2 .col-hero-v2-h .word {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  background: none !important;
  -webkit-background-clip: border-box !important;
          background-clip: border-box !important;
}

.col-hero-v2-overlay .col-hero-v2-h em,
.col-hero-v2-overlay .col-hero-v2-h em .word,
.col-hero-v2 .col-hero-v2-h em,
.col-hero-v2 .col-hero-v2-h em .word {
  font-style: italic;
  color: #E8C16A !important;
  -webkit-text-fill-color: #E8C16A !important;
  background: none !important;
  -webkit-background-clip: border-box !important;
          background-clip: border-box !important;
}
.col-hero-v2-overlay .col-hero-v2-h em,
.col-hero-v2 .col-hero-v2-h em {
  animation: celebsEmFlash 3.2s ease-in-out infinite !important;
}
@media (prefers-reduced-motion: reduce) {
  .col-hero-v2-overlay .col-hero-v2-h em,
  .col-hero-v2 .col-hero-v2-h em { animation: none !important; }
}

/* ============================================================================
   PAGE BREAKER (.pp-divider) — final pass
   ============================================================================
   The client called the divider "thick, copy-pasted, like an error." Killing
   the flanking hairlines so only a single floating chevron remains, drifting
   gently between sections. The chevron now uses a 1pt sage hairline and a
   subtle bob; no circle, no glow, no rule lines. The container collapses to
   the chevron's own height so adjacent sections can breathe into each other. */
.pp-divider {
  height: auto !important;
  min-height: 0 !important;
  margin: clamp(6px, 1.2vw, 18px) 0 !important;
  padding: 6px 0 !important;
  background: transparent !important;
  overflow: visible !important;
  gap: 0 !important;
}
.pp-divider .pp-divider-rule,
.pp-divider .pp-divider-rule-l,
.pp-divider .pp-divider-rule-r { display: none !important; }

.pp-divider .pp-divider-scroll {
  background: transparent !important;
  border: 0 !important;
  padding: 4px 8px !important;
  animation: ppDividerFloat 4.2s ease-in-out infinite !important;
}
.pp-divider .pp-divider-arrow {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
  width: 26px !important;
  height: 26px !important;
  color: rgba(31, 61, 46, 0.42) !important;
  filter: none !important;
}
.pp-divider .pp-divider-scroll:hover .pp-divider-arrow {
  color: var(--pp-green-deep, #1F3D2E) !important;
  transform: translateY(2px) !important;
}
@keyframes ppDividerFloat {
  0%, 100% { transform: translateY(0); opacity: 0.7; }
  50%      { transform: translateY(4px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .pp-divider .pp-divider-scroll { animation: none !important; }
}

/* ============================================================================
   BESPOKE COMMISSION NUMBERS (01 / 02 / 03 / 04) — final pass
   ============================================================================
   Was: gold-text-clipped numerals on a gold-outlined circle = invisible at
   small size. Now: solid champagne-gold disc with crisp white numerals, so
   the steps actually read. The serif italic stays for the editorial feel. */
.bespoke-atelier-num,
.bespoke-atelier-list li .bespoke-atelier-num {
  background: radial-gradient(120% 120% at 30% 25%, #F0D58A 0%, #D4AF6E 55%, #A7811F 100%) !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  -webkit-background-clip: border-box !important;
          background-clip: border-box !important;
  border: 1px solid rgba(140, 107, 41, 0.55) !important;
  border-radius: 50% !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -2px 6px rgba(140, 107, 41, 0.45),
    0 4px 10px -4px rgba(140, 107, 41, 0.55) !important;
  text-shadow: 0 1px 1px rgba(120, 90, 30, 0.55) !important;
  font-weight: 500 !important;
}

/* ============================================================================
   THREE LIFETIMES OF KNOWLEDGE (What We Do) — white ground.
   Overrides the deep-emerald pillars band from site.css. Loaded last, so the
   !important here beats the earlier !important emerald + cream rules.
   The header text flips to dark ink/green; the dark video tiles below stay.
   ============================================================================ */
.pillars-section {
  background: #FFFFFF !important;
}
.pillars-section .pillars-header h2,
.pillars-section h2[style*="color:var(--cream)"] {
  color: var(--pp-green-deep) !important;
  text-shadow: none !important;
}
.pillars-section .pillars-header p,
.pillars-section [style*="color:var(--cream-dim)"] {
  color: rgba(26, 33, 28, 0.74) !important;
}
.pillars-section .eyebrow { color: #8C6B29 !important; }
.pillars-section .gold-line {
  background: linear-gradient(90deg, transparent, #B58A35, transparent) !important;
}
/* The cream dust layer is invisible on white; the ivory sparkle canvas
   (dark-gold, built for light grounds) carries the shimmer instead. */
.pillars-section .gold-particles { display: none !important; }

@media (max-width: 900px){
  .word-anim .word{opacity:1;transform:none;filter:none;animation:none;}
  body .hero .hero-h-v2,body .hero .hero-h-v2 em,.celebs-v2-h,.celebs-v2-h em{animation:none;}
}

/* === MOBILE POLISH MANAGED: hero-mobile === */
@media (max-width: 600px){
  /* ===== ISSUE 1: HERO, compact + legible ===== */
  /* crest: small brand stamp clear of the nav, dim so it never fights the headline */
  body .hero .hero-gold-crest{ top: 9.5% !important; left: 50% !important;
    width: 58px !important; opacity: .42 !important; }
  /* content block: start just below the crest, use the room sparingly */
  body .hero .hero-content{ top: 15% !important; left: 7% !important; right: 7% !important; max-width:100% !important; }
  body .hero .hero-eyebrow-v2{ font-size: .58rem !important; letter-spacing: .26em !important; padding-bottom: 9px !important; margin-bottom: 4px !important; }
  /* headline: 4 lines max, tight */
  body .hero .hero-h-v2{ font-size: clamp(2rem, 8vw, 2.35rem) !important; line-height: 1.04 !important; margin: 0 0 12px !important; }
  /* sub-copy: ONE short, bright line on mobile (rest hidden) */
  body .hero .hero-sub-v2{ color:#fff !important; font-weight:400 !important;
    font-size:.95rem !important; line-height:1.45 !important; max-width:none !important;
    margin:0 0 16px !important; text-shadow:0 1px 10px rgba(0,0,0,.8) !important; }
  body .hero .hero-sub-rest{ display:none !important; }
  /* trust strip: ratings only on mobile (certs list hidden to free height) */
  body .hero .hero-v2-trust{ margin-bottom:16px !important; width:auto !important; }
  body .hero .hero-v2-ratings{ display:flex !important; flex-wrap:wrap !important;
    gap:6px 14px !important; padding:11px 14px !important; justify-content:flex-start !important; }
  body .hero .hr-v2-logo{ width:23px !important; height:23px !important; font-size:.82rem !important; }
  body .hero .hr-v2-score{ font-size:.92rem !important; }
  body .hero .hr-v2-score-pla{ font-size:.8rem !important; }
  body .hero .hr-v2-platform{ font-size:.5rem !important; letter-spacing:.1em !important; }
  body .hero .hr-v2-stars{ font-size:.58rem !important; }
  body .hero .hr-v2-sep{ display:none !important; }
  body .hero .hero-v2-certs{ display:none !important; }
  /* CTAs: visible, on a single row, never clipped */
  body .hero .hero-actions{ display:flex !important; gap:10px !important; flex-wrap:wrap !important; margin-bottom:6px !important; }
  body .hero .hero-actions .btn-v2{ font-size:.6rem !important; padding:13px 16px !important; letter-spacing:.14em !important; }
}
/* === END MOBILE POLISH: hero-mobile === */

/* === MOBILE POLISH MANAGED: home-sections === */
@media (max-width: 600px){
  /* ===== ISSUE 2: celebrity carousel must slide on mobile (a shared rule kills it) ===== */
  body .celebs-v2 .celebs-v2-marquee .celebs-v2-track{
    animation: celebsSlide 40s linear infinite !important; }

  /* ===== ISSUE 3: imagine modal close is always reachable ===== */
  body .imagine-modal-close{
    position: fixed !important; top: 14px !important; right: 14px !important;
    z-index: 99999 !important; width: 46px !important; height: 46px !important;
    background: rgba(8,16,11,.82) !important; border: 1px solid rgba(232,193,106,.7) !important;
    color:#fff !important; opacity:1 !important; visibility:visible !important; display:grid !important; }

  /* ===== ISSUE 4: PlatAfrica plaque edge to edge, nothing cut ===== */
  body .awards-inline{ left:50% !important; right:50% !important;
    margin-left:-50vw !important; margin-right:-50vw !important;
    width:100vw !important; max-width:100vw !important; }
  body .awards-inline-inner{ padding:26px 18px !important; gap:14px !important; }
  body .awards-inline-eyebrow, body .awards-inline-sub{
    font-size:.5rem !important; letter-spacing:.22em !important; white-space:normal !important; line-height:1.5 !important; }
  body .awards-inline-h{ font-size:clamp(1.3rem,5.6vw,1.7rem) !important; }
  body .awards-inline-tag{ font-size:.52rem !important; }

  /* ===== ISSUES 5 & 6: text over video / image must stand out ===== */
  body .pillar .pillar-shade{
    background: linear-gradient(180deg, rgba(8,14,10,.22) 0%, rgba(8,14,10,.5) 52%, rgba(8,14,10,.9) 100%) !important; }
  body .pillar .pillar-title{ font-size: clamp(1.7rem,7.4vw,2.1rem) !important; color:#fff !important;
    text-shadow:0 2px 16px rgba(0,0,0,.85), 0 1px 3px rgba(0,0,0,.7) !important; }
  body .pillar .pillar-desc{ color:#fff !important; font-size:.92rem !important; line-height:1.5 !important;
    text-shadow:0 1px 10px rgba(0,0,0,.8) !important; }
  body .pillar .pillar-link{ color:#E8C16A !important; font-weight:600 !important; letter-spacing:.16em !important;
    text-shadow:0 1px 10px rgba(0,0,0,.85) !important; }
  body .pillar .pillar-num{ color:rgba(255,255,255,.78) !important; text-shadow:0 1px 8px rgba(0,0,0,.7) !important; }
}
@media (max-width: 600px) and (prefers-reduced-motion: reduce){
  body .celebs-v2 .celebs-v2-marquee .celebs-v2-track{ animation: none !important; }
}
/* === END MOBILE POLISH: home-sections === */

/* === MOBILE POLISH MANAGED: hero-scrim-mobile === */
@media (max-width: 600px){
  body .hero .hero-v2-scrim{
    background: linear-gradient(180deg, rgba(8,14,10,.42) 0%, rgba(8,14,10,.30) 30%, rgba(8,14,10,.72) 100%) !important; }
}
/* === END MOBILE POLISH: hero-scrim-mobile === */

/* === MOBILE POLISH MANAGED: hero-img-mobile === */
@media (max-width: 600px){
  body .hero .hero-v2-img{ object-position: 66% 36% !important; }
  body .hero{ min-height: 80vh !important; }
  body .hero .hero-gold-crest{ opacity: 1 !important; width: 72px !important;
    filter: drop-shadow(0 2px 12px rgba(0,0,0,.65)) brightness(1.15) !important; }
}
/* === END MOBILE POLISH: hero-img-mobile === */


/* ============================================================================
   /* SCOPED TO THE HOME PAGE.
   home_v2.css is linked by 20 pages, and every rule below was written as
   "body .hero", so all of it was also landing on the Atelier, Huguenot House,
   the museum and the rest, where the hero markup is shared but the layout is
   not. On jewellery-designers.html it pushed .hero-content 25px off the left
   edge and clipped the copy. The home page body carries no class, subpages all
   carry .subpage, so :not(.subpage) is the honest divider. */

MOBILE HERO, FIRST SCREEN. Appended last so it wins cleanly.

   WHY: on a 390px phone the hero copy column was still inheriting width: 50%
   from the desktop rule, because nothing below 720px ever reset it. Measured:
   .hero-content was 195px wide inside a 390px screen. That single value is
   what forced the eyebrow onto 3 lines, the headline onto 4, the trust panel
   into a 166px vertical stack and the two CTAs into a 142px stack, which put
   the second button 41px past the 844px fold.

   DECISION on the crest: hidden on phones rather than enlarged. The sticky
   header sitting directly above the hero already shows the same crest next to
   the PRINS & PRINS wordmark, so a second crest 40px lower repeats what the
   visitor just read and spends about 90px of the only screen that matters.
   The engraved text inside the mark is also unreadable at any size that fits
   here. The headline leads instead, which is the thing that actually sells.

   Everything below is inside @media (max-width: 720px). No desktop rule is
   touched, and nothing here sets height or min-height on body:not(.subpage) .hero.
   ============================================================================ */
@media (max-width: 720px) {

  /* 1. Crest out of the hero on phones. The header carries the brand mark. */
  body:not(.subpage) .hero .hero-gold-crest { display: none !important; }

  /* 2. The fix that unlocks everything: a real full width copy column,
        pinned near the top of the hero so the headline lands immediately. */
  body:not(.subpage) .hero .hero-content {
    left: 6.5% !important;
    right: 6.5% !important;
    width: auto !important;
    max-width: none !important;
    top: clamp(20px, 4.6vh, 44px) !important;
    bottom: auto !important;
    text-align: left !important;
  }

  /* 3. Legibility floor for white copy sitting over a face. Soft enough to
        read as depth in the photograph, not as a box. It paints behind the
        text only, inside the hero content stacking context, so it cannot
        interfere with the hero image or with the separate hero scrim. */
  body:not(.subpage) .hero .hero-content::before {
    content: '' !important;
    position: absolute;
    left: -8vw; right: -8vw;
    top: -6vh; bottom: -18vh;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(180deg,
      rgba(6, 14, 10, 0.60) 0%,
      rgba(6, 14, 10, 0.50) 46%,
      rgba(6, 14, 10, 0.30) 74%,
      rgba(6, 14, 10, 0.00) 100%);
  }

  /* 4. Eyebrow on ONE line. inline-block plus nowrap keeps the hairline under
        the text only, and the size is set so the whole string fits the 339px
        column at 390px. Measured width 295px, zero overflow. */
  body:not(.subpage) .hero .hero-eyebrow-v2 {
    display: inline-block !important;
    white-space: nowrap !important;
    font-size: 0.52rem !important;
    letter-spacing: 0.17em !important;
    color: #F6EDD6 !important;
    padding-bottom: 10px !important;
    margin-bottom: 16px !important;
    border-bottom: 1px solid rgba(232, 193, 106, 0.55) !important;
  }

  /* 5. Headline leads. Sized in vw so the forced break lands as a clean two
        line lockup at every phone width, instead of the old four narrow lines
        or a three line version with a one word orphan. The gold word carries a
        0.32em pad on desktop to replace the space the word splitter strips,
        which reads as a double space at this size, so it is trimmed here. */
  body:not(.subpage) .hero .hero-h-v2 {
    font-size: clamp(1.8rem, 7.9vw, 2.6rem) !important;
    line-height: 1.06 !important;
    letter-spacing: -0.018em !important;
    margin: 0 0 18px !important;
  }
  body:not(.subpage) .hero .hero-h-v2 .hero-h-gold { padding-right: 0.16em !important; }

  /* 6. Subline, one calm line of support. */
  body:not(.subpage) .hero .hero-sub-v2 {
    font-size: 1.02rem !important;
    line-height: 1.45 !important;
    margin: 0 0 22px !important;
  }

  /* 7. Trust signals kept in full, compacted from a 166px vertical stack into
        one 62px horizontal band. Google, TripAdvisor and PlatAfrica all stay,
        scores and stars intact. */
  body:not(.subpage) .hero .hero-v2-trust {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 0 20px !important;
    border-radius: 14px !important;
  }
  body:not(.subpage) .hero .hero-v2-ratings {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 8px !important;
    padding: 10px 12px !important;
  }
  body:not(.subpage) .hero .hr-v2-item {
    gap: 8px !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
  }
  body:not(.subpage) .hero .hr-v2-logo { width: 26px !important; height: 26px !important; font-size: 0.88rem !important; }
  body:not(.subpage) .hero .hr-v2-score { font-size: 0.95rem !important; }
  body:not(.subpage) .hero .hr-v2-score-pla { font-size: 0.74rem !important; }
  body:not(.subpage) .hero .hr-v2-stars { font-size: 0.54rem !important; letter-spacing: 1px !important; }
  body:not(.subpage) .hero .hr-v2-platform {
    font-size: 0.44rem !important;
    letter-spacing: 0.08em !important;
    white-space: nowrap !important;
  }
  body:not(.subpage) .hero .hr-v2-sep { display: none !important; }

  /* 8. CTAs. Full width bars, primary first, both inside the first screen.
        A cramped two up row at this width shrinks the labels to noise. */
  body:not(.subpage) .hero .hero-actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 0 !important;
  }
  body:not(.subpage) .hero .hero-actions .btn-v2 {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 16px 14px !important;
    font-size: 0.62rem !important;
    letter-spacing: 0.18em !important;
    white-space: nowrap !important;
  }
}

/* No new animation is introduced above. This only restates the existing
   reduced motion contract for the hero at phone widths. */
@media (max-width: 720px) and (prefers-reduced-motion: reduce) {
  body:not(.subpage) .hero .hero-h-v2,
  body:not(.subpage) .hero .hero-h-v2 em,
  body:not(.subpage) .hero .hero-h-v2 .hero-h-gold,
  body:not(.subpage) .hero .btn-v2,
  body:not(.subpage) .hero .btn-v2::before { animation: none !important; }
}

/* Narrow phones (iPhone SE, Galaxy S at 360px). Measured a 3px horizontal
   overflow inside the ratings band at 360px, so the band is trimmed a little
   further. Still all three trust signals, still one row. */
@media (max-width: 380px) {
  body:not(.subpage) .hero .hero-v2-ratings { gap: 6px !important; padding: 10px 10px !important; }
  body:not(.subpage) .hero .hr-v2-item { gap: 6px !important; }
  body:not(.subpage) .hero .hr-v2-logo { width: 24px !important; height: 24px !important; font-size: 0.8rem !important; }
  body:not(.subpage) .hero .hr-v2-platform { font-size: 0.42rem !important; letter-spacing: 0.05em !important; }
  body:not(.subpage) .hero .hr-v2-stars { font-size: 0.5rem !important; letter-spacing: 0.5px !important; }
  body:not(.subpage) .hero .hero-actions .btn-v2 { letter-spacing: 0.14em !important; padding: 15px 10px !important; }
}



/* ============================================================================
   HERO SHARPNESS FIX, phones. Appended last on purpose: it cannot disturb the
   cascade above it, and deleting this block is a complete revert.

   THE PROBLEM, measured in Chrome at 390x844 DPR3. The master photo is
   2200x1228, ratio 1.79 landscape. The phone hero box was 390x928.4, ratio
   0.420. object-fit cover therefore painted 1170 device pixels from just 375
   real source pixels, a 3.12x upscale. That is the blur. There is no higher
   resolution master in the repo, so the fix is to stop discarding pixels.

   Lever one lives in index.html: a dedicated portrait derivative, cropped 1:1
   out of the master with no resampling at all.

   Lever two is here: a shorter hero box. With a source only 1228px tall, the
   widest portrait crop a box of ratio R can consume is 1228 x R pixels, so
   raising R buys real resolution linearly. Measured at 390x844:
     928px tall  ratio 0.420  upscale 2.27x
     780px tall  ratio 0.500  upscale 1.91x
   The gain stops at ratio 0.5537, a 704px hero, because past that cover starts
   trimming the photograph vertically for nothing. We stop at 780px instead,
   because .hero has overflow hidden and the hero copy bottom sits at 742px, so
   anything under about 743px clips the second call to action.

   Verified no clipping at 390x844, 360x800, 375x667 and 430x932. At 375x667
   this also repairs an existing 10.1px clip of the hero copy.
   ============================================================================ */
@media (max-width: 720px) {
  body:not(.subpage) .hero {
    /* vh first as the fallback for engines without svh */
    height: clamp(680px, 84vh, 820px) !important;
    height: clamp(680px, 84svh, 820px) !important;
    min-height: 0 !important;
    max-height: none !important;
  }
  /* The portrait file is already framed on the subject, so it wants no offset.
     This also cancels the older 66% 36% override earlier in this file, which
     would slide the new crop sideways and cut the tanzanite earring off. */
  body:not(.subpage) .hero .hero-v2-img {
    object-position: 50% 50% !important;
  }
}
/* === END HERO SHARPNESS FIX === */

/* ============================================================================
   MOBILE HERO v3, EDITORIAL. Appended last, so it wins on source order.

   BRIEF: put the crest lower, let the photograph carry the top of the screen,
   and sit the type on it so it reads as a magazine cover rather than a banner
   with a caption.

   HOW: the hero children that matter (the crest and the copy) stop being
   absolutely positioned and become flex items in a bottom aligned column. The
   image, the particle canvas and the scrim stay absolute, so they are out of
   flex flow and keep filling the box. That gives one honest stacking order,
   crest then copy, both anchored to the bottom, with no magic offsets to keep
   in sync when the copy reflows.

   WHY BOTTOM ANCHORED: the subject of the photograph is a face in the upper
   half. Any copy pinned to the top lands on it. Anchoring the copy low leaves
   roughly the top 45 percent of the frame completely clear, which is what
   makes the image feel like the point of the page instead of a backdrop.

   The scrim is rebuilt to match: transparent through the face, deepening from
   just above the crest so every line of type has a dark ground under it
   without a visible edge anywhere.
   ============================================================================ */
@media (max-width: 720px) {

  /* --- 1. hero becomes a bottom aligned column ---------------------------- */
  body:not(.subpage) .hero {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
  }

  /* --- 2. scrim: clear through the face, deep under the type -------------- */
  body:not(.subpage) .hero .hero-v2-scrim {
    background: linear-gradient(180deg,
      rgba(5, 13, 9, 0.34) 0%,
      rgba(5, 13, 9, 0.06) 16%,
      rgba(5, 13, 9, 0.00) 34%,
      rgba(5, 13, 9, 0.22) 50%,
      rgba(5, 13, 9, 0.62) 66%,
      rgba(5, 13, 9, 0.86) 82%,
      rgba(5, 13, 9, 0.95) 100%) !important;
  }

  /* the old copy-scrim is redundant now the hero scrim does the work, and two
     stacked gradients muddied the midtones of the photograph */
  body:not(.subpage) .hero .hero-content::before { display: none !important; }

  /* --- 3. the crest, lower, as a brand stamp above the headline ----------- */
  body:not(.subpage) .hero .hero-gold-crest {
    display: block !important;
    position: static !important;
    order: 1;
    flex: 0 0 auto;
    top: auto !important; left: auto !important;
    transform: none !important;
    width: clamp(46px, 13.5vw, 60px) !important;
    height: clamp(46px, 13.5vw, 60px) !important;
    margin: 0 0 clamp(12px, 1.8vh, 18px) 7% !important;
    filter: drop-shadow(0 2px 14px rgba(0, 0, 0, 0.55));
  }

  /* --- 4. copy column, in flow, hard against the bottom ------------------- */
  body:not(.subpage) .hero .hero-content {
    position: relative !important;
    order: 2;
    flex: 0 0 auto;
    inset: auto !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 7% clamp(64px, 8.4vh, 92px) !important;
    padding: 0 !important;
    text-align: left !important;
  }

  /* --- 5. type, tuned so nothing orphans and nothing wraps badly ---------- */
  body:not(.subpage) .hero .hero-eyebrow-v2 {
    display: inline-block !important;
    white-space: nowrap !important;
    font-size: clamp(0.46rem, 2.35vw, 0.55rem) !important;
    letter-spacing: 0.16em !important;
    padding-bottom: 9px !important;
    margin-bottom: clamp(10px, 1.6vh, 15px) !important;
  }
  body:not(.subpage) .hero .hero-h-v2 {
    font-size: clamp(2.05rem, 10.4vw, 2.85rem) !important;
    line-height: 1.03 !important;
    letter-spacing: -0.012em !important;
    margin-bottom: clamp(10px, 1.6vh, 15px) !important;
    text-shadow: 0 2px 22px rgba(0, 0, 0, 0.5) !important;
  }
  body:not(.subpage) .hero .hero-sub-v2 {
    font-size: clamp(0.88rem, 4vw, 1rem) !important;
    line-height: 1.45 !important;
    margin-bottom: clamp(13px, 2vh, 20px) !important;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55) !important;
  }
  /* the trailing sentence is a desktop luxury. On a phone it costs four lines
     of the only screen that matters and pushes the buttons under the fold. */
  body:not(.subpage) .hero .hero-sub-v2 .hero-sub-rest { display: none !important; }

  /* --- 6. trust strip: one compact row, still legible --------------------- */
  body:not(.subpage) .hero .hero-v2-trust {
    width: 100% !important;
    margin-bottom: clamp(13px, 2vh, 20px) !important;
  }
  body:not(.subpage) .hero .hero-v2-ratings {
    flex-wrap: nowrap !important;
    gap: 10px !important;
    padding: 9px 11px !important;
    justify-content: space-between !important;
  }
  body:not(.subpage) .hero .hr-v2-logo { width: 25px !important; height: 25px !important; font-size: 0.9rem !important; }
  body:not(.subpage) .hero .hr-v2-score { font-size: 0.94rem !important; }
  body:not(.subpage) .hero .hr-v2-platform { font-size: 0.44rem !important; letter-spacing: 0.13em !important; }
  body:not(.subpage) .hero .hr-v2-stars { font-size: 0.56rem !important; }

  /* --- 7. calls to action ------------------------------------------------- */
  body:not(.subpage) .hero .hero-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 9px !important;
    width: 100% !important;
  }
  body:not(.subpage) .hero .btn-v2 {
    width: 100% !important;
    justify-content: center !important;
    white-space: nowrap !important;
    padding: 13px 16px !important;
    font-size: clamp(0.56rem, 2.7vw, 0.64rem) !important;
    letter-spacing: 0.15em !important;
  }
}

/* ============================================================================
   MOBILE HERO v3 TUNING. Gives the photograph back the top of the frame.

   The v3 block above got the crest and copy anchored low, but the stack was
   still 520px tall inside a 780px hero, so only about 17 percent of the image
   was clear. The face is the asset, so the stack has to lose height.

   Where it comes from: the boxed trust panel becomes a single hairline row,
   which is both more editorial and 26px shorter; the second call to action
   loses its heavy padding; and the gaps tighten. Nothing is removed, the
   credentials and both CTAs are all still there.

   Also handles short phones. On a 375x667 screen the hero floor of 680px plus
   a 128px header put the second CTA 100px under the fold. Below 700px tall the
   hero now sizes to the screen instead of to a fixed floor.
   ============================================================================ */
@media (max-width: 720px) {

  /* trust: hairline row, not a panel */
  body:not(.subpage) .hero .hero-v2-trust { margin-bottom: clamp(11px, 1.6vh, 15px) !important; }
  body:not(.subpage) .hero .hero-v2-ratings {
    background: transparent !important;
    border: 0 !important;
    border-top: 1px solid rgba(232, 193, 106, 0.30) !important;
    border-bottom: 1px solid rgba(232, 193, 106, 0.30) !important;
    border-radius: 0 !important;
    padding: 8px 0 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  body:not(.subpage) .hero .hr-v2-logo { width: 21px !important; height: 21px !important; font-size: 0.76rem !important; }
  body:not(.subpage) .hero .hr-v2-score { font-size: 0.86rem !important; }
  body:not(.subpage) .hero .hr-v2-platform { font-size: 0.4rem !important; }
  body:not(.subpage) .hero .hero-v2-certs { display: none !important; }

  /* CTAs: primary keeps weight, secondary gets lighter */
  body:not(.subpage) .hero .hero-actions { gap: 8px !important; }
  body:not(.subpage) .hero .btn-v2 { padding: 12px 14px !important; }
  body:not(.subpage) .hero .btn-v2-ghost, body:not(.subpage) .hero .btn-v2:nth-child(2) { padding: 11px 14px !important; }

  /* tighter rhythm through the copy */
  body:not(.subpage) .hero .hero-gold-crest { margin-bottom: clamp(9px, 1.3vh, 14px) !important; }
  body:not(.subpage) .hero .hero-eyebrow-v2 { margin-bottom: clamp(9px, 1.3vh, 13px) !important; }
  body:not(.subpage) .hero .hero-h-v2 { margin-bottom: clamp(8px, 1.2vh, 12px) !important; }
  body:not(.subpage) .hero .hero-sub-v2 { margin-bottom: clamp(11px, 1.6vh, 16px) !important; }
  body:not(.subpage) .hero .hero-content { margin-bottom: clamp(52px, 6.6vh, 74px) !important; }
}

/* short phones: size the hero to the screen, not to a fixed floor */
@media (max-width: 720px) and (max-height: 700px) {
  body:not(.subpage) .hero { min-height: calc(100svh - 128px) !important; height: auto !important; }
  body:not(.subpage) .hero .hero-gold-crest { width: 44px !important; height: 44px !important; }
  body:not(.subpage) .hero .hero-h-v2 { font-size: clamp(1.8rem, 8.6vw, 2.2rem) !important; }
  body:not(.subpage) .hero .hero-content { margin-bottom: clamp(30px, 4.4vh, 46px) !important; }
}

/* ============================================================================
   MOBILE HERO v4 CORRECTIONS

   1. THE CREST WAS LANDING ON HER FOREHEAD. Turning .hero into a flex column
      exposed an inherited align-items: center, so a 58px fixed width crest got
      centred in the frame, which put it squarely on the model's face. It now
      aligns to the same left edge as the type, which is what a masthead does.

   2. THE TRUST PANEL kept its glass box because the box is not drawn by
      .hero-v2-ratings at all, it comes from .lg::before and .lg::after on the
      parent .hero-v2-trust, and liquid-glass.css loads after this file. The
      hairline experiment is abandoned: the glass panel reads better over a
      photograph anyway. It is simply made compact instead.

   3. SCRIM. The headline sits across lit skin, which is the brightest part of
      the frame. The gradient now deepens earlier and harder so every line has
      a dark ground under it, while the top of the frame stays clear.
   ============================================================================ */
@media (max-width: 720px) {

  body:not(.subpage) .hero { align-items: stretch !important; }

  body:not(.subpage) .hero .hero-gold-crest {
    align-self: flex-start !important;
    margin-left: 7% !important;
  }

  /* deeper, earlier scrim so type always has a ground */
  body:not(.subpage) .hero .hero-v2-scrim {
    background: linear-gradient(180deg,
      rgba(5, 13, 9, 0.30) 0%,
      rgba(5, 13, 9, 0.04) 14%,
      rgba(5, 13, 9, 0.00) 26%,
      rgba(5, 13, 9, 0.30) 40%,
      rgba(5, 13, 9, 0.62) 52%,
      rgba(5, 13, 9, 0.84) 66%,
      rgba(5, 13, 9, 0.93) 80%,
      rgba(5, 13, 9, 0.96) 100%) !important;
  }

  /* trust panel: keep the glass, lose the bulk */
  body:not(.subpage) .hero .hero-v2-ratings {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 7px 12px !important;
    box-shadow: none !important;
  }
  body:not(.subpage) .hero .hero-v2-trust.lg { border-radius: 14px !important; }
  body:not(.subpage) .hero .hero-v2-trust.lg:hover { border-radius: 14px !important; transform: none !important; }
}

/* ============================================================================
   MOBILE HERO v5, the last two details

   1. HEADLINE ORPHAN. At 10.4vw the second half ran "diamonds in Cape" then
      "Town." on its own line. A one word third line reads as a mistake at this
      size. Dropping to 8.9vw lets "diamonds in Cape Town." hold one line at
      360px and up, giving a clean two line lockup. It is a smaller headline,
      and a tidy two line lockup beats a bigger three line one with an orphan.

   2. SCRIM DEPTH. The type crosses lit skin, the brightest area in the frame.
      The gradient now reaches full strength by the headline rather than below
      it, so the copy always has a dark ground. The top of the frame is
      untouched, so the face still reads as the subject.
   ============================================================================ */
@media (max-width: 720px) {
  body:not(.subpage) .hero .hero-h-v2 {
    font-size: clamp(1.86rem, 8.9vw, 2.5rem) !important;
    line-height: 1.06 !important;
  }
  body:not(.subpage) .hero .hero-v2-scrim {
    background: linear-gradient(180deg,
      rgba(5, 13, 9, 0.28) 0%,
      rgba(5, 13, 9, 0.03) 13%,
      rgba(5, 13, 9, 0.00) 24%,
      rgba(5, 13, 9, 0.34) 36%,
      rgba(5, 13, 9, 0.70) 47%,
      rgba(5, 13, 9, 0.88) 58%,
      rgba(5, 13, 9, 0.94) 72%,
      rgba(5, 13, 9, 0.97) 100%) !important;
  }
}

/* ============================================================================
   MOBILE HERO v6. Kills the "Town." orphan for good.

   Two things were pushing the second half over the edge by a handful of pixels.
   The gold word carries a 0.32em right pad on desktop, to replace the space the
   word splitter strips, and the word-anim spans add their own inline spacing.
   Both are removed on phones and the size comes down a further notch, which
   puts "diamonds in Cape Town." on one line from 360px up.
   ============================================================================ */
@media (max-width: 720px) {
  body:not(.subpage) .hero .hero-h-v2 { font-size: clamp(1.72rem, 8.2vw, 2.35rem) !important; }
  body:not(.subpage) .hero .hero-h-gold { padding-right: 0 !important; margin-right: 0.16em !important; }
  body:not(.subpage) .hero .hero-h-v2 .word { margin-right: 0 !important; }
}

/* ============================================================================
   MOBILE HERO v7. The forced break was the problem, not the type size.

   The markup hard breaks after "beautiful", which is right on a wide screen.
   On a phone it locks the second half to "diamonds in Cape Town.", a string
   that will not fit one line at any size worth setting a hero in, so it always
   spilled "Town." onto a third line on its own.

   Dropping the break on phones and letting the browser balance the whole
   sentence gives two even lines at a bigger size than any of the forced
   variants managed. text-wrap: balance does the evening out, and where it is
   not supported the natural wrap is still better than the orphan.
   ============================================================================ */
@media (max-width: 720px) {
  body:not(.subpage) .hero .hero-h-v2 br { display: none !important; }
  body:not(.subpage) .hero .hero-h-v2 {
    font-size: clamp(1.86rem, 8.7vw, 2.45rem) !important;
    text-wrap: balance;
    line-height: 1.07 !important;
  }
  body:not(.subpage) .hero .hero-h-gold { margin-right: 0 !important; padding-right: 0 !important; }
}

/* ============================================================================
   MOBILE HERO v8. Split layout: type at the top, buttons at the foot, the
   jewellery completely clear in between.

   WHAT WAS ACTUALLY WRONG: the earring, the cocktail ring and the tanzanite
   pendant were never missing from the crop. Measured in master coordinates
   they sit at y420 to 500, y650 to 720 and y940 to 1010, all inside the
   680x1228 portrait derivative. The copy block was simply sitting on top of
   them. Nothing needed re-cropping, the type needed to get out of the way.

   THE LAYOUT: .hero-content becomes a full height flex column, so the eyebrow
   and headline sit hard against the top, above her eyes, and margin-top:auto
   pushes the two calls to action to the foot. Everything between the headline
   and the buttons is untouched photograph, which is where the whole
   composition lives.

   THE HEIGHT: the hero is sized to the screen rather than to a fixed floor, so
   the full portrait crop shows head to shoulders with no vertical trimming.
   That is the zoom out. At 390x844 the piece lands like this, in screen
   coordinates: eyes 300, earring 369 to 415, ring 501 to 541, pendant 668 to
   708, all clear of both the type above and the buttons below.

   REMOVED, as instructed: the crest, and the subline beginning "Diamonds,
   tanzanite, sapphire and emerald". The trust strip moves up under the
   headline so the foot carries only the two buttons.
   ============================================================================ */
@media (max-width: 720px) {

  body:not(.subpage) .hero {
    height: calc(100svh - 128px) !important;
    min-height: 0 !important;
    max-height: none !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
  }

  /* out, as instructed */
  body:not(.subpage) .hero .hero-gold-crest { display: none !important; }
  body:not(.subpage) .hero .hero-sub-v2 { display: none !important; }

  /* the copy column owns the full height and distributes within it */
  body:not(.subpage) .hero .hero-content {
    position: relative !important;
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    inset: auto !important;
    width: auto !important;
    max-width: none !important;
    margin: clamp(14px, 2.2vh, 24px) 7% clamp(18px, 2.6vh, 28px) !important;
    padding: 0 !important;
  }

  /* type block, above her eyes */
  body:not(.subpage) .hero .hero-eyebrow-v2 { margin-bottom: clamp(8px, 1.2vh, 12px) !important; }
  body:not(.subpage) .hero .hero-h-v2 {
    font-size: clamp(1.72rem, 8.1vw, 2.3rem) !important;
    line-height: 1.06 !important;
    margin-bottom: clamp(10px, 1.5vh, 15px) !important;
    text-wrap: balance;
  }

  /* trust strip rides with the type, not with the buttons */
  body:not(.subpage) .hero .hero-v2-trust { margin-bottom: 0 !important; }

  /* buttons to the foot, clear of the pendant */
  body:not(.subpage) .hero .hero-actions {
    margin-top: auto !important;
    padding-top: clamp(12px, 2vh, 20px) !important;
  }

  /* scrim: dark at the two ends where the type lives, clear through the middle
     so the earring, the ring and the pendant all read against the emerald */
  body:not(.subpage) .hero .hero-v2-scrim {
    background: linear-gradient(180deg,
      rgba(5, 13, 9, 0.86) 0%,
      rgba(5, 13, 9, 0.70) 16%,
      rgba(5, 13, 9, 0.34) 27%,
      rgba(5, 13, 9, 0.06) 38%,
      rgba(5, 13, 9, 0.00) 48%,
      rgba(5, 13, 9, 0.06) 62%,
      rgba(5, 13, 9, 0.34) 78%,
      rgba(5, 13, 9, 0.72) 90%,
      rgba(5, 13, 9, 0.88) 100%) !important;
  }
}

/* ============================================================================
   MOBILE HERO v9. Centred type, and two calls to action that stop crowding
   each other.

   Centring: the eyebrow carries a hairline underneath it, which only looks
   right centred if the rule is centred with it, so the rule becomes an inline
   block with auto margins rather than a full width border.

   The CTAs were 8px apart with near identical weight, which read as one lump.
   The primary keeps the solid cream fill, the secondary drops to a gold
   hairline outline on glass, and the gap opens to 12px. Different weight plus
   real space is what separates them, not size.
   ============================================================================ */
@media (max-width: 720px) {

  body:not(.subpage) .hero .hero-content { text-align: center !important; align-items: center !important; }

  body:not(.subpage) .hero .hero-eyebrow-v2 {
    display: inline-block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    border-bottom: 1px solid rgba(232, 193, 106, 0.5) !important;
  }
  body:not(.subpage) .hero .hero-h-v2,
  body:not(.subpage) .hero .hero-sub-v2 { text-align: center !important; }

  body:not(.subpage) .hero .hero-v2-trust { width: 100% !important; }
  body:not(.subpage) .hero .hero-v2-ratings { justify-content: center !important; }

  /* --- calls to action ---------------------------------------------------- */
  body:not(.subpage) .hero .hero-actions {
    align-items: stretch !important;
    gap: 12px !important;
    width: 100% !important;
  }
  body:not(.subpage) .hero .btn-v2 {
    width: 100% !important;
    justify-content: center !important;
    padding: 15px 16px !important;
    border-radius: 2px !important;
  }
  /* primary: solid, the one thing on the screen that is fully opaque */
  body:not(.subpage) .hero .hero-actions .btn-v2:first-child {
    background: #FBF8EE !important;
    color: #17301F !important;
    border: 1px solid #FBF8EE !important;
    box-shadow: 0 14px 34px -18px rgba(0, 0, 0, 0.8) !important;
  }
  /* secondary: gold hairline on glass, clearly subordinate */
  body:not(.subpage) .hero .hero-actions .btn-v2:nth-child(2) {
    background: rgba(8, 18, 12, 0.34) !important;
    color: #F6EDD6 !important;
    border: 1px solid rgba(232, 193, 106, 0.62) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    backdrop-filter: blur(6px) !important;
    box-shadow: none !important;
  }
}

/* ============================================================================
   MOBILE HERO v10. Height that actually matches the screen.

   100svh was resolving 72px larger than the real viewport in testing, which
   left the second button 4px from the fold, and 4px is nothing once a real
   browser draws its own chrome. dvh tracks the live viewport, and a hard
   max-height on vh is the belt and braces if dvh is unsupported.
   ============================================================================ */
@media (max-width: 720px) {
  body:not(.subpage) .hero {
    height: calc(100dvh - 136px) !important;
    max-height: calc(100vh - 136px) !important;
    min-height: 470px !important;
  }
}

/* ============================================================================
   MOBILE HERO v11. Ratings and buttons travel down together.

   The ratings strip was riding with the headline at the top, which left it
   sitting across her eyes and put a gap between it and the buttons it belongs
   with. Moving margin-top:auto from .hero-actions onto .hero-v2-trust pushes
   the pair down as one group, so the top of the frame is only the eyebrow and
   the headline, and the whole foot is ratings then buttons.
   ============================================================================ */
@media (max-width: 720px) {
  body:not(.subpage) .hero .hero-v2-trust {
    margin-top: auto !important;
    margin-bottom: clamp(11px, 1.6vh, 16px) !important;
  }
  body:not(.subpage) .hero .hero-actions {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

/* ============================================================================
   MOBILE HERO v12. Full frame, and the foot pushed right down.

   ZOOM OUT, properly. object-fit: cover decides what you see from the BOX
   shape, not the file, so a wider file changes nothing on its own. The phone
   crop is 680x1228, a ratio of 0.5537. The hero box was 390x779, a ratio of
   0.5006, so cover scaled to the taller side and quietly threw away about ten
   per cent off each edge.

   Giving the hero that exact aspect-ratio means the box and the photograph are
   the same shape, so every pixel of the crop is on screen and nothing is
   trimmed anywhere. That is as far out as this master goes. At 390 wide the
   hero becomes 704px, which still clears the 716px available under the header,
   and max-height keeps it honest on short phones.

   FOOT LOWER. The ratings strip and the buttons were floating about 74px off
   the bottom edge. That drops to roughly 26px, so the pair sits down on the
   foot of the frame where it was asked to be, without touching the safe area.
   ============================================================================ */
@media (max-width: 720px) {
  body:not(.subpage) .hero {
    aspect-ratio: 680 / 1228 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 132px) !important;
  }
  body:not(.subpage) .hero .hero-content {
    margin-bottom: clamp(18px, 2.6vh, 30px) !important;
    margin-top: clamp(10px, 1.6vh, 18px) !important;
  }
  body:not(.subpage) .hero .hero-v2-trust {
    margin-bottom: clamp(9px, 1.3vh, 13px) !important;
  }
  /* the crop now fits exactly, so object-position has nothing left to bias */
  body:not(.subpage) .hero .hero-v2-img { object-position: 50% 50% !important; }
}

/* ============================================================================
   MOBILE HERO v13. Make the copy column actually fill the hero.

   The ratings and buttons were still sitting about 79px clear of the foot even
   after the bottom margin came down to 22px. The reason is that .hero-content
   was flex: 1 1 auto, and auto lets a flex item settle at its content height
   rather than grow, so margin-top:auto on the ratings strip had nothing spare
   to push against. flex-basis 100% makes the column take the full height, and
   the auto margin then does what it was supposed to do all along.
   ============================================================================ */
@media (max-width: 720px) {
  body:not(.subpage) .hero .hero-content {
    flex: 1 1 100% !important;
    min-height: 0 !important;
  }
}

/* ============================================================================
   MOBILE HERO v14. The last 69px.

   .hero-content was already flex: 1 1 100% and still stopped 69px short of the
   foot. It was not the flex item, it was the container: .hero carries padding
   from the desktop rule, so with aspect-ratio setting a 704px border box the
   content box the flex children actually get is smaller. Zeroing the padding
   on phones hands those pixels back, and the auto margin drops the ratings and
   buttons onto the foot of the frame.
   ============================================================================ */
@media (max-width: 720px) {
  body:not(.subpage) .hero { padding: 0 !important; }
}

/* ============================================================================
   MOBILE HERO v15. Short phones.

   Dropping the hero padding gained 69px everywhere, which is right on a normal
   phone but pushed the second button 19px under the fold on a 375x667 screen,
   where there is only 539px under the header to work with. On screens under
   700px tall the hero is capped harder and the foot is compressed: smaller
   ratings row, tighter buttons, less air between them. Nothing is removed.
   ============================================================================ */
@media (max-width: 720px) and (max-height: 700px) {
  body:not(.subpage) .hero {
    aspect-ratio: auto !important;
    height: calc(100dvh - 138px) !important;
    max-height: calc(100vh - 138px) !important;
  }
  body:not(.subpage) .hero .hero-content {
    margin-top: 8px !important;
    margin-bottom: 12px !important;
  }
  body:not(.subpage) .hero .hero-h-v2 { font-size: clamp(1.6rem, 7.6vw, 2rem) !important; }
  body:not(.subpage) .hero .hero-v2-trust { margin-bottom: 8px !important; }
  body:not(.subpage) .hero .hero-v2-ratings { padding: 6px 10px !important; }
  body:not(.subpage) .hero .hero-actions { gap: 8px !important; }
  body:not(.subpage) .hero .btn-v2 { padding: 11px 14px !important; }
}

/* ============================================================================
   MOBILE HERO v16. Stop trusting dvh on short phones.

   On a 375x667 screen the browser reported 100dvh as 719px, 52px more than the
   viewport, so calc(100dvh - 138px) still ran the hero past the fold. Rather
   than chase a unit that lies, short screens get a plain pixel ceiling that can
   be measured and proved. 500px leaves the second button 40px clear of the fold
   on a 667px screen with the header above it.

   Taller phones are untouched and keep the aspect-ratio treatment, which is
   what shows the whole photograph.
   ============================================================================ */
@media (max-width: 720px) and (max-height: 700px) {
  body:not(.subpage) .hero {
    aspect-ratio: auto !important;
    height: 500px !important;
    max-height: 500px !important;
    min-height: 0 !important;
  }
}
@media (max-width: 720px) and (min-height: 701px) and (max-height: 780px) {
  body:not(.subpage) .hero {
    aspect-ratio: auto !important;
    height: 590px !important;
    max-height: 590px !important;
  }
}

/* ============================================================================
   MOBILE HERO v17. Get the pendant out from behind the buttons.

   MEASURED, 390x844: the tanzanite pendant lands at y667..707 on screen, and
   the ratings strip plus the two buttons were a 238px block starting at y594,
   so the pendant was completely covered. There is exactly 125px of frame below
   the pendant, so the whole block has to fit inside that.

   Where the 238px went: the ratings sat in an 83px liquid-glass panel, and the
   two buttons were 56px each. The panel is the easy 45px. Its box is drawn by
   .lg::before and .lg::after in liquid-glass.css, which loads after this file,
   so killing it needs both a heavier selector and !important. The ratings then
   read as a hairline row, which is more editorial over a photograph anyway.

   New block: about 120px, so it starts below y707 and the pendant is clear.

   Short phones are deliberately excluded. On a 375x667 screen there is only
   57px under the pendant, and no honest layout puts a ratings row and two
   buttons in 57px, so that size keeps the roomier foot instead.
   ============================================================================ */
@media (max-width: 720px) and (min-height: 701px) {

  /* the glass box goes, the credentials stay */
  body:not(.subpage) .hero .hero-v2-trust.lg::before,
  body:not(.subpage) .hero .hero-v2-trust.lg::after { display: none !important; }
  body:not(.subpage) .hero .hero-v2-trust.lg {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border-radius: 0 !important;
    margin-bottom: 6px !important;
  }
  body:not(.subpage) .hero .hero-v2-ratings {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 3px 0 !important;
    gap: 9px !important;
  }
  body:not(.subpage) .hero .hr-v2-logo { width: 19px !important; height: 19px !important; font-size: 0.66rem !important; }
  body:not(.subpage) .hero .hr-v2-score { font-size: 0.8rem !important; }
  body:not(.subpage) .hero .hr-v2-platform { font-size: 0.38rem !important; letter-spacing: 0.1em !important; }
  body:not(.subpage) .hero .hr-v2-stars { font-size: 0.5rem !important; }
  /* the credentials read against the photograph now the panel has gone */
  body:not(.subpage) .hero .hero-v2-ratings * { text-shadow: 0 1px 8px rgba(0,0,0,.85), 0 0 18px rgba(0,0,0,.6) !important; }

  body:not(.subpage) .hero .hero-actions { gap: 6px !important; }
  body:not(.subpage) .hero .btn-v2 { padding: 11px 14px !important; }
  body:not(.subpage) .hero .hero-content { margin-bottom: 10px !important; }
}

/* ============================================================================
   MOBILE HERO v18. The last 60px, itemised.

   Measured at 390x844 the foot block was 184px against a 125px budget. Where
   it was going: the trust wrapper carried 10px of padding top and bottom that
   was only ever there to sit inside the glass panel, which has now gone; each
   rating item ran 34px tall; and each button was 45px, 22px of which was
   padding. Trimming all three, and the gaps, brings the block to about 122px,
   which puts its top edge just below the pendant.

   The buttons end up around 37px tall. Full width, so the tap target is still
   generous horizontally, and this only applies to phones taller than 700px.
   ============================================================================ */
@media (max-width: 720px) and (min-height: 701px) {
  body:not(.subpage) .hero .hero-v2-trust.lg { padding: 0 !important; margin-bottom: 5px !important; }
  body:not(.subpage) .hero .hero-v2-ratings { padding: 0 !important; }
  body:not(.subpage) .hero .hr-v2-item { line-height: 1.15 !important; }
  body:not(.subpage) .hero .hr-v2-logo { width: 17px !important; height: 17px !important; font-size: 0.6rem !important; }
  body:not(.subpage) .hero .hr-v2-score { font-size: 0.74rem !important; line-height: 1.1 !important; }
  body:not(.subpage) .hero .hr-v2-platform { font-size: 0.36rem !important; }
  body:not(.subpage) .hero .hero-actions { gap: 4px !important; margin-bottom: 0 !important; }
  body:not(.subpage) .hero .btn-v2 { padding: 7px 14px !important; }
  body:not(.subpage) .hero .hero-content { margin-bottom: 8px !important; }
}

/* ============================================================================
   MOBILE HERO v19. The final 9px, taken from the ratings not the buttons.

   At 390x844 the block was 134px against a 125px budget, so 9px of the pendant
   was still behind it. Those 9px come out of the ratings row rather than the
   buttons, because the buttons are already at 37px and shrinking them further
   starts to hurt the tap target. The rating logos drop to 15px and the row runs
   tighter, which is enough.
   ============================================================================ */
@media (max-width: 720px) and (min-height: 701px) {
  body:not(.subpage) .hero .hr-v2-logo { width: 15px !important; height: 15px !important; font-size: 0.54rem !important; }
  body:not(.subpage) .hero .hr-v2-item { line-height: 1.05 !important; gap: 5px !important; }
  body:not(.subpage) .hero .hr-v2-score { font-size: 0.7rem !important; }
  body:not(.subpage) .hero .hr-v2-stars { font-size: 0.46rem !important; }
  body:not(.subpage) .hero .hero-v2-trust.lg { margin-bottom: 4px !important; }
  body:not(.subpage) .hero .hero-content { margin-bottom: 6px !important; }
}

/* ============================================================================
   MOBILE HERO v20. Credentials move up under the headline.

   The ratings and the PlatAfrica badge now sit directly beneath the headline
   instead of travelling down with the buttons. The auto margin moves from
   .hero-v2-trust onto .hero-actions, so the buttons alone hold the foot.

   Useful side effect: the foot block drops from about 130px to about 84px,
   which is 46px more clear frame under the tanzanite pendant, so the pendant
   goes from partly visible to fully visible on a normal phone.

   The strip sits in the band between the headline and her eyes, which is a
   narrow window, so it stays on one compact row.
   ============================================================================ */
@media (max-width: 720px) {
  body:not(.subpage) .hero .hero-v2-trust {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    order: 0 !important;
  }
  body:not(.subpage) .hero .hero-actions {
    margin-top: auto !important;
    padding-top: 0 !important;
  }
}
@media (max-width: 720px) and (min-height: 701px) {
  body:not(.subpage) .hero .hero-v2-trust.lg { margin-bottom: 0 !important; }
  /* a touch more presence now it is not fighting the buttons for room */
  body:not(.subpage) .hero .hr-v2-logo { width: 18px !important; height: 18px !important; font-size: 0.62rem !important; }
  body:not(.subpage) .hero .hr-v2-score { font-size: 0.8rem !important; }
  body:not(.subpage) .hero .hr-v2-platform { font-size: 0.4rem !important; }
  body:not(.subpage) .hero .hr-v2-stars { font-size: 0.52rem !important; }
}

/* ============================================================================
   ATELIER INCLUSIONS, NOT BUTTONS

   These four lines are <li> items describing what a commission includes. They
   were styled as bordered cards with a gold top edge, a hover lift, a shadow
   and a light sweep across them, which is the exact visual language of a
   button. People were reading them as four things to click, and clicking them
   does nothing, which is a dead end right next to the real call to action.

   They now read as a checklist: gold tick, hairline rule between items, no
   box, no shadow, no lift, no sweep, and cursor stays default. The real
   buttons underneath keep their weight and are now the only things on the
   panel that look pressable.
   ============================================================================ */
.bespoke-atelier-list {
  gap: 0 !important;
  max-width: 460px;
}
.bespoke-atelier-list li {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding: 13px 2px 13px 0 !important;
  background: none !important;
  border: 0 !important;
  border-top: 1px solid rgba(31, 61, 46, 0.14) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  cursor: default !important;
  transition: none !important;
}
.bespoke-atelier-list li:first-child { border-top: 0 !important; }

/* the ::before was the sweep that made them feel pressable. It becomes the tick. */
.bespoke-atelier-list li::before {
  content: "" !important;
  position: static !important;
  inset: auto !important;
  flex: 0 0 auto !important;
  width: 17px !important;
  height: 17px !important;
  margin-top: 2px !important;
  transform: none !important;
  transition: none !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B8912F' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

/* nothing here reacts to a pointer, because nothing here is clickable */
.bespoke-atelier-list li:hover {
  background: none !important;
  border-color: rgba(31, 61, 46, 0.14) !important;
  border-top-color: rgba(31, 61, 46, 0.14) !important;
  transform: none !important;
  box-shadow: none !important;
}
.bespoke-atelier-list li:first-child:hover { border-top: 0 !important; }
.bespoke-atelier-list li:hover::before { transform: none !important; }

.bespoke-atelier-li-title {
  font-weight: 400 !important;
  line-height: 1.45 !important;
  color: rgba(26, 24, 20, 0.88) !important;
}

@media (max-width: 720px) {
  .bespoke-atelier-list { grid-template-columns: 1fr !important; }
  .bespoke-atelier-list li { padding: 12px 0 !important; font-size: 0.88rem !important; }
}


/* ============================================================================
   COLLECTIONS HERO — SOCIAL PROOF LINE
   26 Aug 2026, Sasha: "all these buttons block creative".
   The hero used to carry seven neon chips. At 390px they stacked into seven
   separate rows 363px tall, covering 54% of the cover photo, and the pane
   itself overflowed the hero by 119px. The four gemmological credentials moved
   down into .col-trust-band; what stays here is social proof only, set as one
   centred line of type with no pill backgrounds, so the photograph reads.
   ============================================================================ */
.col-hero-v2-overlay .col-hero-v2-proof {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 20px;
  margin: 26px auto 0;
  padding: 0;
  position: relative;
  z-index: 3;
  font-family: 'Inter', sans-serif;
  font-size: clamp(0.66rem, 1.5vw, 0.8rem);
  letter-spacing: 0.08em;
  font-weight: 600;
  color: rgba(251, 251, 247, 0.94);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65), 0 0 10px rgba(0, 0, 0, 0.45);
}

.col-hero-v2-overlay .col-proof-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.col-hero-v2-overlay .col-proof-stars {
  color: #F5E0A8;
  letter-spacing: 1.5px;
  font-size: 0.92em;
  text-shadow: 0 0 8px rgba(255, 246, 217, 0.6), 0 0 16px rgba(201, 169, 110, 0.4);
}

.col-hero-v2-overlay .col-proof-text strong {
  color: #FFFFFF;
  font-weight: 700;
  font-size: 1.06em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6), 0 0 10px rgba(255, 246, 217, 0.4);
}

/* Same brass plate as the credential badges, so the two sets read as one family */
.col-hero-v2-overlay .col-proof-badge {
  display: inline;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 1.06em;
  letter-spacing: 0.06em;
  color: #FFFFFF;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6), 0 0 10px rgba(255, 246, 217, 0.4);
}

/* Brass hairline between the three, not a dash */
.col-hero-v2-overlay .col-proof-sep {
  width: 1px;
  height: 14px;
  background: linear-gradient(180deg, transparent, rgba(201, 169, 110, 0.85), transparent);
  flex: 0 0 auto;
}

/* Phones: drop the hairlines and the trailing words so the three sit compactly.
   "Google Reviews" becomes "Google", "PlatAfrica Awards" becomes "PlatAfrica";
   the band below carries the full wording. */
@media (max-width: 560px) {
  .col-hero-v2-overlay .col-hero-v2-proof {
    gap: 8px 16px;
    margin-top: 20px;
    letter-spacing: 0.06em;
  }
  /* The wording is client copy and must not be altered, so the trailing words
     are clipped visually but stay in the accessibility tree and in the DOM. */
  .col-hero-v2-overlay .col-proof-more {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  .col-hero-v2-overlay .col-proof-stars { letter-spacing: 1px; font-size: 0.86em; }
}

/* The credentials band sits straight under the hero, so it should not also
   carry the big top pad that separated it from the old marquee slot. */
.col-trust-band { padding-top: clamp(26px, 3.5vw, 44px); }

@media (max-width: 560px) {
  .col-trust-band { padding: 22px 16px 26px; }
  .col-trust-band .col-trust-v2 { padding: 14px 6px; gap: 10px 0; }
  .col-trust-band .col-trust-v2-item {
    padding: 5px 12px;
    font-size: 0.68rem;
    letter-spacing: 0.04em;
  }
  /* Hairline dividers read as clutter once the pills wrap onto their own rows */
  .col-trust-band .col-trust-v2-item + .col-trust-v2-item::before { display: none; }
}


/* ============================================================================
   COLLECTION HERO / TRUST BAND — corrections after review, 26 Aug 2026
   ============================================================================ */

/* The proof row wraps well above 560px, which left a brass hairline dangling at
   the start or end of a wrapped line between roughly 561px and 660px. Suppress
   the separators wherever the row can wrap. */
@media (max-width: 760px) {
  .col-hero-v2-overlay .col-proof-sep { display: none; }
}

/* Same orphan-hairline problem in the credentials band: the four items measure
   about 916px, so they wrap any time the card is narrower than roughly 1250px,
   yet the dividers were only suppressed below 900px. That left a leading
   hairline on wrapped rows at 1024px, one of the target widths. */
@media (max-width: 1250px) {
  .col-trust-band .col-trust-v2-item + .col-trust-v2-item::before { display: none; }
}

/* The section scrim is deliberately clear through the vertical middle, and the
   pane wash was centred on the pane, so it faded out before reaching the proof
   line at the bottom of the type column. Drop the wash slightly and lengthen it
   so the whole column of type keeps its backing, without drawing a box. */
.col-hero-v2-overlay .col-hero-v2-pane::before {
  background:
    radial-gradient(ellipse 70% 62% at 50% 58%, rgba(8, 16, 11, 0.34) 0%, rgba(8, 16, 11, 0.0) 72%);
}

/* The 9:16 mobile crop was cut with clean velvet at the top for type to sit on,
   and the jewels filling the lower frame. Centring the pane put the headline
   straight over the jewels. Sit the type at the top, where the crop intends it.
   Portrait only: on a short landscape phone the hero is barely 330px tall and a
   tall top pad would push the headline out of an overflow:hidden box. */
@media (max-width: 760px) and (orientation: portrait) {
  .col-hero-v2.col-hero-v2-overlay { align-items: flex-start; }
  .col-hero-v2-overlay .col-hero-v2-head {
    padding: clamp(48px, 7vh, 80px) 20px clamp(28px, 4vh, 44px) !important;
  }
}

/* ============================================================================
   COLLECTIONS HERO, PHONES — KEEP THE TYPE OFF THE JEWELLERY
   26 Aug 2026, Sasha: "move the text and reviews up, it must not touch
   jewellery". Top-anchoring alone was not enough. The block ran from 9% to 55%
   of the hero while the re-cut 9:16 crop only carries clean wall down to about
   34%, so the headline still landed on the swallow brooch and the reviews line
   sat on the chain. Everything below trims the block to roughly 195px so it
   finishes inside that clean band: smaller eyebrow, tighter rules and leading,
   and a reviews line held to one row. Scoped to 760px so it covers every width
   that gets the 9:16 crop, not just phones.
   ============================================================================ */
@media (max-width: 760px) and (orientation: portrait) {
  .col-hero-v2-overlay .col-hero-v2-head {
    padding: clamp(24px, 3.2vw, 40px) 16px 20px !important;
  }

  .col-hero-v2-overlay .col-hero-v2-eyebrow {
    font-size: 0.6rem !important;
    letter-spacing: 0.34em !important;
    margin-bottom: 9px !important;
  }

  .col-hero-v2-overlay .col-hero-v2-rule {
    width: 54px !important;
    margin: 0 auto 11px !important;
  }

  .col-hero-v2-overlay .col-hero-v2-h {
    font-size: clamp(1.32rem, 6vw, 1.62rem) !important;
    line-height: 1.15 !important;
    letter-spacing: 0.004em !important;
    margin: 0 !important;
  }

  /* One row, not two. The stars carry the rating; the words stay small. */
  .col-hero-v2-overlay .col-hero-v2-proof {
    flex-wrap: nowrap !important;
    gap: 0 12px !important;
    margin-top: 13px !important;
    font-size: 0.58rem !important;
    letter-spacing: 0.03em !important;
  }
  .col-hero-v2-overlay .col-proof-item { gap: 5px !important; }
  .col-hero-v2-overlay .col-proof-stars {
    font-size: 0.78em !important;
    letter-spacing: 0.5px !important;
  }
  .col-hero-v2-overlay .col-proof-badge {
    min-width: 0 !important;
    padding: 1px 5px !important;
    font-size: 0.82em !important;
  }

  /* The scroll cue was landing in the middle of the emerald pendant */
  .col-hero-v2-overlay::after { height: 38px; bottom: 14px; }
}


/* ============================================================================
   CREDENTIALS PLATE — 26 Aug 2026, Sasha
   The four gemmological credentials sat in a boxed white card that stacked into
   four rows on a phone and ate 314px of the page for one line of information.
   Rebuilt as an engraved plate: no card, no drop shadow, just the credentials
   set between two brass hairlines on the paper ground, with a small lozenge
   between them instead of vertical rules. Same information, roughly half the
   height, and it now reads as part of the page rather than a widget dropped
   onto it. The editorial paragraph moved above this band in collections.html,
   so the sequence is photograph, then what the collection is, then the proof.
   ============================================================================ */
.col-trust-band {
  padding: clamp(22px, 2.6vw, 34px) clamp(18px, 4vw, 56px) clamp(26px, 3vw, 40px) !important;
  background: #FBFBF7;
}

/* The comet sweep belonged to the old card. On a bare plate it reads as a
   smear across the paper, so it goes. */
.col-trust-band::after { content: none; }

.col-trust-band .col-trust-v2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 9px 20px;
  max-width: 1120px;
  margin: 0 auto;
  padding: 15px 8px 16px;
  background: transparent;
  border: 0;
  border-top: 1px solid rgba(160, 122, 53, 0.34);
  border-bottom: 1px solid rgba(160, 122, 53, 0.34);
  box-shadow: none;
}

/* The old ::before/::after drew a 2px brass bar and a green rule across the
   card. The hairline borders do that job now. */
.col-trust-band .col-trust-v2::before,
.col-trust-band .col-trust-v2::after { content: none; }

.col-trust-band .col-trust-v2-item {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 0;
  font-family: 'Inter', sans-serif;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: #2A3129;
}

/* A small brass lozenge between credentials, in flow rather than absolutely
   positioned, so it wraps with the item it belongs to instead of orphaning
   itself at the start of a new row. */
.col-trust-band .col-trust-v2-item + .col-trust-v2-item::before {
  content: '';
  position: static;
  display: block;
  flex: 0 0 auto;
  width: 4px;
  height: 4px;
  margin-right: 11px;
  transform: rotate(45deg);
  background: rgba(160, 122, 53, 0.75);
  opacity: 1;
  top: auto; bottom: auto; left: auto;
}

.col-trust-band .col-trust-v2-badge {
  min-width: 0;
  padding: 3px 7px;
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  border: 1px solid rgba(160, 122, 53, 0.5);
  background: transparent;
  color: #8B6A2F;
  box-shadow: none;
  text-shadow: none;
  animation: none;
}

.col-trust-band .col-trust-v2-text {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  color: inherit;
}

/* Phones: the lozenges stay, they are what keeps three wrapped rows reading as
   one sentence. Type drops a step so the first two credentials share a row. */
@media (max-width: 620px) {
  .col-trust-band {
    padding: 24px 14px 26px !important;
  }
  .col-trust-band .col-trust-v2 {
    gap: 7px 18px;
    padding: 11px 0 12px;
  }
  .col-trust-band .col-trust-v2-item {
    font-size: 0.58rem;
    letter-spacing: 0.02em;
    gap: 6px;
    padding: 0;
  }
  /* CSS cannot tell which item starts a wrapped row, so on a phone the lozenge
     landed as a leading mark on rows two and three. Drop them here and let the
     column gap do the separating; the plate stays legible either way. */
  .col-trust-band .col-trust-v2-item + .col-trust-v2-item::before {
    display: none;
  }
  .col-trust-band .col-trust-v2-badge {
    padding: 1px 4px;
    font-size: 0.62rem;
    letter-spacing: 0.06em;
  }
}

/* Separators stay hidden below 1250px. That is the width where the four
   credentials stop fitting on one row, and a lozenge at the start of a wrapped
   row reads as a stray mark. The existing max-width:1250px rule handles it. */

@media (max-width: 620px) {
  .col-intro-band { padding: 34px 18px 22px !important; }
  .col-intro-band-text { font-size: 1rem; line-height: 1.6; }
  .col-trust-band { padding-top: 6px !important; }
}


/* ============================================================================
   VISIT PHOTO STACK, PHONES — STOP THE INSET BURYING THE CAPTION
   26 Aug 2026. The Huguenot House inset is pinned bottom-right at 196px, which
   is 58% of a 335px frame, so it sat straight over "A Moment Inside Our Home"
   in the bottom-left and clipped it to "A MOMENT INS". Pre-existing, but it
   shows plainly now the main frame carries the whole photograph. Narrow the
   inset and tighten the caption so the two sit side by side.
   ============================================================================ */
@media (max-width: 600px) {
  .visit-redesign .visit-photo-stack .vps-inset {
    width: 138px !important;
    right: -10px !important;
    bottom: -22px !important;
    border-width: 3px !important;
  }
  .visit-redesign .visit-photo-stack .vps-tag {
    left: 12px !important;
    bottom: 12px !important;
    font-size: 0.4rem !important;
    letter-spacing: 0.16em !important;
    padding: 6px 10px !important;
  }
  .visit-redesign .visit-photo-stack .vps-inset-tag {
    font-size: 0.36rem !important;
    letter-spacing: 0.12em !important;
    padding: 5px 7px !important;
  }
}

/* ============================================================================
   VISIT PHOTO STACK — show the whole photograph, 27 Aug 2026
   Sasha: "make sure we see full creative, why is it so zoomed in".

   The frame declares aspect-ratio: 1160/1440 to match the showroom photograph,
   but site.css also capped it with max-height. A max-height cannot coexist with
   an aspect-ratio: at 1920 the ratio asked for a 809px tall box, max-height
   clamped it to 720, and the frame became 0.905 instead of 0.806. object-fit:
   cover then quietly sliced 13% off the top and bottom of the creative. The
   same clamp applied below 980px, where max-height: 620 cropped it again.

   Bound the frame by WIDTH instead. A max-width cannot fight the aspect ratio,
   so the box keeps the photograph's proportions at every viewport and cover
   crops nothing. The idle scale(1.02) is also dropped, since a 2% zoom is 2% of
   the creative the client cannot see; the hover drift is kept as an effect.
   ============================================================================ */
.visit-redesign .visit-photo-stack .vps-main {
  max-height: none;
  max-width: 660px;
}
@media (max-width: 980px) {
  .visit-redesign .visit-photo-stack .vps-main { max-height: none; max-width: 440px; }
}
@media (max-width: 640px) {
  .visit-redesign .visit-photo-stack .vps-main { max-height: none; max-width: 100%; }
}
.visit-redesign .visit-photo-stack .vps-main img { transform: scale(1); }
.visit-redesign .visit-photo-stack:hover .vps-main img { transform: scale(1.04); }