/* WordPress-specific styles not present in the ported design system:
   blog index cards, blog single post body, and a few template helpers.
   Uses the same design tokens as app.css. */

/* Blog index */
.blog-grid { gap: 28px; }

/* Blog toolbar: keyword search + clear */
.blog-toolbar { display: flex; align-items: center; gap: 14px; margin-bottom: 38px; max-width: 640px; }
.blog-search { display: flex; align-items: center; gap: 10px; flex: 1; border: 1px solid var(--line); border-radius: 40px; padding: 12px 20px; background: rgba(8,8,8,.5); transition: border-color .3s, box-shadow .3s; }
.blog-search:focus-within { border-color: var(--gold); box-shadow: 0 0 22px var(--gold-glow); }
.blog-search svg { color: var(--mute-2); flex-shrink: 0; }
.blog-search input { flex: 1; border: none; background: transparent; color: var(--bone); font-size: .95rem; outline: none; }
.blog-search input::placeholder { color: var(--mute-2); }
.blog-clear { border: 1px solid var(--line); background: transparent; color: var(--mute); border-radius: 40px; padding: 12px 18px; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; transition: .3s; }
.blog-clear:hover { border-color: var(--gold); color: var(--gold); }
.blog-empty { grid-column: 1 / -1; text-align: center; padding: 40px 0; }

/* ===== Event hubs and city landing pages ===== */
.city-grid { gap: 22px; }
.city-card { display: flex; flex-direction: column; gap: .5rem; padding: 26px 26px 28px; text-decoration: none; transition: border-color .3s var(--ease), transform .3s var(--ease); }
.city-card:hover { border-color: var(--gold); transform: translateY(-3px); }
.city-card h3 { font-family: var(--font-display); font-size: 1.35rem; color: var(--bone); font-weight: 500; }
.city-card p { color: var(--mute); font-size: .92rem; line-height: 1.55; }
.city-card .bc-more { margin-top: auto; padding-top: .6rem; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.city-next { display: inline-flex; align-items: center; flex-wrap: wrap; gap: .55rem; margin-top: 1.6rem; padding: .7rem 1.2rem; border: 1px solid var(--line); border-radius: 40px; background: rgba(197,164,99,.06); color: var(--mute); font-size: .92rem; }
.city-next b { color: var(--bone); }
.city-next .sep { color: var(--mute-2); }
@media (max-width: 760px) { .city-next { border-radius: 14px; } }

/* Real, crawlable blog pagination (core paginate_links() output: a ul.page-numbers
   of li > a.page-numbers / span.page-numbers.current / span.page-numbers.dots) */
.blog-pagination { margin-top: 44px; display: flex; justify-content: center; }
.blog-pagination ul.page-numbers { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; list-style: none; padding: 0; margin: 0; }
.blog-pagination a.page-numbers, .blog-pagination span.page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: 40px; color: var(--mute); font-size: .85rem; text-decoration: none; transition: .3s; }
.blog-pagination a.page-numbers:hover { border-color: var(--gold); color: var(--gold); }
.blog-pagination span.page-numbers.current { border-color: var(--gold); color: var(--gold); background: rgba(197,164,99,.08); }
.blog-pagination span.page-numbers.dots { border: none; color: var(--mute-2); }

.blog-card { display: flex; flex-direction: column; overflow: hidden; padding: 0; text-decoration: none; }
.blog-card .bc-img { aspect-ratio: 16 / 10; overflow: hidden; }
.blog-card .bc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.blog-card:hover .bc-img img { transform: scale(1.05); }
.blog-card .bc-body { padding: 26px 26px 30px; display: flex; flex-direction: column; gap: .7rem; flex: 1; }
.blog-card .bc-tag { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.blog-card h3 { font-family: var(--font-display); font-size: 1.4rem; line-height: 1.2; color: var(--bone); font-weight: 500; }
.blog-card p { color: var(--mute); font-size: .95rem; line-height: 1.6; }
.blog-card .bc-more { margin-top: auto; padding-top: .4rem; font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }

/* Blog single */
.post-wrap { max-width: 820px; margin: 0 auto; }
.post-hero { border-radius: 8px; overflow: hidden; margin-bottom: 40px; }
.post-hero img { width: 100%; height: auto; display: block; }
.post-date { color: var(--mute); font-family: var(--font-mono); font-size: .8rem; letter-spacing: .08em; }
.post-body p { color: var(--bone-2); font-size: 1.1rem; line-height: 1.85; margin-bottom: 1.5rem; }
.post-foot { margin-top: 40px; }

/* Events empty state */
.evempty { grid-column: 1 / -1; color: var(--mute); }
.evempty a { color: var(--gold); }

/* Book combo scroll popup (no pricing yet) */
.bookpop{position:fixed;inset:0;z-index:88;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(0,0,0,.72);backdrop-filter:blur(8px);opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s var(--ease)}
.bookpop.show{opacity:1;visibility:visible}
.bookpop-inner{position:relative;display:grid;grid-template-columns:.82fr 1fr;max-width:760px;width:100%;background:rgba(11,11,11,.97);border:1px solid var(--gold);border-radius:14px;overflow:hidden;box-shadow:0 0 60px var(--gold-glow),0 30px 80px rgba(0,0,0,.6);transform:translateY(26px) scale(.965);transition:transform .55s var(--ease)}
.bookpop.show .bookpop-inner{transform:none}
.bookpop-x{position:absolute;top:14px;right:16px;z-index:2;background:rgba(0,0,0,.45);border:1px solid var(--line);color:var(--bone);width:34px;height:34px;border-radius:50%;font-size:1.15rem;line-height:1;cursor:pointer;transition:.3s var(--ease)}
.bookpop-x:hover{border-color:var(--gold);color:var(--gold);box-shadow:0 0 16px var(--gold-glow)}
.bookpop-cover{position:relative;background:radial-gradient(120% 80% at 30% 20%,#1a140a,#0b0b0b);display:flex;align-items:center;justify-content:center;padding:34px}
.bookpop-cover::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 50% at 50% 100%,var(--gold-glow),transparent 60%);mix-blend-mode:screen}
.bookpop-cover img{position:relative;width:100%;max-width:228px;height:auto;border-radius:4px;box-shadow:0 22px 55px rgba(0,0,0,.65);transform:rotate(-4deg);animation:bookpop-float 5s ease-in-out infinite}
@keyframes bookpop-float{0%,100%{transform:rotate(-4deg) translateY(0)}50%{transform:rotate(-4deg) translateY(-8px)}}
.bookpop-body{padding:42px 40px 38px}
.bookpop-body .eyebrow{margin-bottom:.7rem}
.bookpop-body h3{font-family:var(--font-display);font-size:1.95rem;line-height:1.12;color:var(--bone);font-weight:500;margin-bottom:1rem}
.bookpop-body p{color:var(--mute);font-size:.98rem;line-height:1.65;margin-bottom:1.3rem}
.bookpop-list{list-style:none;margin:0 0 1.7rem;padding:0;display:flex;flex-direction:column;gap:.65rem}
.bookpop-list li{position:relative;padding-left:1.7rem;color:var(--bone-2);font-size:.93rem;line-height:1.4}
.bookpop-list li::before{content:"";position:absolute;left:0;top:.4em;width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px var(--gold-glow)}
.bookpop-note{margin-top:1.1rem;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute-2)}
@media(max-width:680px){
  .bookpop-inner{grid-template-columns:1fr;max-width:380px;max-height:90vh;overflow-y:auto}
  .bookpop-cover{padding:28px 28px 0}
  .bookpop-cover img{max-width:140px}
  .bookpop-body{padding:26px 28px 32px}
  .bookpop-body h3{font-size:1.55rem}
}

/* Service provider logo cards (logo monochromed for a uniform look on dark) */
.prov-grid{gap:20px}
.prov-card{display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:18px;text-align:center;border:1px solid var(--line);border-radius:8px;padding:30px 22px;background:var(--ink-2);text-decoration:none;transition:.5s var(--ease);min-height:184px}
.prov-card:hover{border-color:var(--gold);box-shadow:0 18px 44px rgba(0,0,0,.45),0 0 36px var(--gold-glow);transform:translateY(-4px)}
.prov-card.featured{background:radial-gradient(120% 90% at 50% 0%,rgba(197,164,99,.08),var(--ink-2))}
.prov-logo{flex:1;display:flex;align-items:center;justify-content:center;width:100%;min-height:62px}
.prov-logo img{max-width:160px;max-height:58px;width:auto;height:auto;object-fit:contain;filter:brightness(0) invert(1);opacity:.74;transition:.4s var(--ease)}
.prov-card:hover .prov-logo img{opacity:1}
.prov-logo .prov-name{font-family:var(--font-display);font-size:1.2rem;line-height:1.2;color:var(--bone);font-weight:500}
.prov-meta{display:flex;flex-direction:column;gap:.45rem;align-items:center}
.prov-cat{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.prov-go{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);transition:.3s var(--ease)}
.prov-card:hover .prov-go{color:var(--gold)}
.prov-sub{color:var(--mute);margin-top:-.4rem;margin-bottom:1.5rem;max-width:60ch}

/* Education impact stats: same statx treatment as the main grid, 4 columns (4+3) */
.impact-stats{border-top:none}
.impact-stat-grid{grid-template-columns:repeat(4,1fr)}
.impact-stat-grid .statx{border:none !important}
.impact-stat-grid .sx-brag{max-width:26ch}
@media(max-width:980px){.impact-stat-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:680px){.impact-stat-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:430px){.impact-stat-grid{grid-template-columns:1fr}}

/* Partner logo strip (monochrome, consistent with provider logos) */
/* brightness(0) invert(1) crushed every logo to a solid white silhouette. That is fine
   for a plain wordmark, but it erased any logo whose meaning lives in interior contrast:
   ABSA is white lettering inside a red disc, so it rendered as a featureless grey circle
   and the client reasonably thought it was missing. Greyscale mutes the colour to suit the
   dark strip while keeping the inside of a mark readable. */
.partners .plogo{height:44px;width:auto;max-width:150px;object-fit:contain;filter:brightness(0) invert(1);opacity:.62;transition:.35s var(--ease)}
.partners .plogo:hover{opacity:1}
/* Full-colour marks opt out of the white-silhouette treatment. ABSA's wordmark
   is white lettering inside a red disc, so flattening it to white leaves a
   featureless circle with the brand nowhere in it. */
.partners .plogo--full{filter:none;opacity:.9}
.partners .plogo--full:hover{opacity:1}
.partners .wrap{gap:30px 32px}
@media(max-width:760px){.partners .plogo{height:32px;max-width:112px}.partners .wrap{gap:20px 22px}}

/* Consultation card: the CTA sat flush against the description. */
.nextcard .nc-meta + .btn{margin-top:1.15rem}

/* Founder portrait in the who-we-are intro column. */
.intro-portrait{display:block;width:100%;max-width:300px;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 15%;margin-top:2.1rem;border-radius:4px;border:1px solid var(--line);box-shadow:0 18px 44px rgba(0,0,0,.45)}
@media(max-width:900px){.intro-portrait{max-width:230px;margin-top:1.6rem}}

/* Provider cards link to detail pages; lead partners get a gold border */
.prov-card{position:relative}
.prov-card.featured{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 18px 50px rgba(0,0,0,.5),0 0 42px var(--gold-glow)}
.prov-card.featured:hover{box-shadow:0 0 0 1px var(--gold-lt),0 22px 56px rgba(0,0,0,.55),0 0 60px var(--gold-glow);transform:translateY(-4px)}
.prov-badge{position:absolute;top:12px;right:12px;font-family:var(--font-mono);font-size:.54rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);border:1px solid var(--gold);border-radius:20px;padding:.22rem .6rem;background:rgba(197,164,99,.08)}

/* Provider detail page */
.prov-detail-logo{margin-bottom:30px}
.prov-detail-logo img{max-height:66px;max-width:230px;width:auto;filter:brightness(0) invert(1);opacity:.92}
.prov-detail-body p{color:var(--bone-2);font-size:1.12rem;line-height:1.8;margin-bottom:1.3rem}

/* Services pointer to provider network */
.svc-note{text-align:center;color:var(--mute);font-size:.95rem;margin-top:34px}
.svc-note a{color:var(--gold)}

/* FAQ prominence (moved up the page + bolder) */
.faq{position:relative;overflow:hidden}
.faq .faq-list{max-width:920px}
.faq .faq-q{font-size:1.38rem}
.faq-cta{text-align:center;margin-top:46px}
.faq-cta p{color:var(--mute);margin-bottom:1rem}

/* Latest insights strip on the home page (reuses blog-card styling) */
.latest-insights{position:relative;overflow:hidden}
.latest-insights .blog-grid{gap:28px}

/* Blog pagination (page-blog.php) */
.blog-pager{display:flex;justify-content:center;align-items:center;gap:.5rem;margin-top:54px;flex-wrap:wrap}
.blog-pager a,.blog-pager span{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;padding:0 .9rem;border:1px solid var(--line);border-radius:8px;color:var(--bone-2);font-family:var(--font-mono);font-size:.78rem;letter-spacing:.06em;text-decoration:none;transition:.35s var(--ease)}
.blog-pager a:hover{border-color:var(--gold);color:var(--gold);box-shadow:0 0 18px var(--gold-glow)}
.blog-pager .current{background:var(--gold);border-color:var(--gold);color:var(--ink);font-weight:600}
.blog-pager .current:hover{color:var(--ink);box-shadow:none}

/* Glossary page (entity/AEO play) */
.glossary{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.gloss{background:var(--ink-2);border:1px solid var(--line);border-radius:10px;padding:28px 26px;transition:.45s var(--ease)}
.gloss:hover{border-color:var(--gold);box-shadow:0 16px 40px rgba(0,0,0,.4),0 0 30px var(--gold-glow);transform:translateY(-3px)}
.gloss h3{font-family:var(--font-display);font-size:1.32rem;line-height:1.2;color:var(--bone);font-weight:500;margin:0 0 .8rem}
.gloss h3::after{content:"";display:block;width:34px;height:2px;background:var(--gold);margin-top:.7rem;box-shadow:0 0 10px var(--gold-glow)}
.gloss p{color:var(--mute);font-size:.96rem;line-height:1.65;margin:0}
@media(max-width:980px){.glossary{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.glossary{grid-template-columns:1fr}}

/* Reviews / testimonials rotator (curated now, live feed later) */
.reviews{position:relative;overflow:hidden}
.reviews-rotator{position:relative;max-width:760px;margin:0 auto;min-height:260px}
.rev-card{position:absolute;inset:0;opacity:0;transform:scale(.96);transition:opacity .6s var(--ease),transform .6s var(--ease);pointer-events:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.1rem;text-align:center}
.rev-card.active{opacity:1;transform:scale(1);pointer-events:auto}
.rev-stars{color:var(--gold);letter-spacing:.18em;font-size:1.1rem}
.rev-quote{font-family:var(--font-display);font-size:clamp(1.35rem,2.8vw,1.95rem);line-height:1.45;color:var(--bone);max-width:42ch;margin:0;font-weight:500}
.rev-by{color:var(--mute);font-size:.95rem}
.rev-by b{color:var(--bone)}
.rev-src{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);border:1px solid var(--line);border-radius:20px;padding:.15rem .55rem;margin-left:.5rem;white-space:nowrap}
.rev-dots{display:flex;gap:.6rem;justify-content:center;margin-top:40px}
.rev-dot{width:9px;height:9px;border-radius:50%;border:1px solid var(--line);background:transparent;cursor:pointer;transition:.3s var(--ease);padding:0}
.rev-dot.active{background:var(--gold);border-color:var(--gold);box-shadow:0 0 10px var(--gold-glow)}

/* ===== Per-event landing page (single-pe_event.php) ===== */
.ev-single-head{position:relative;overflow:hidden}
.ev-single-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.28;filter:saturate(.9)}
.ev-single-ov{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,8,8,.72) 0%,rgba(8,8,8,.86) 60%,var(--ink) 100%)}
.ev-single-head .wrap{position:relative;z-index:2}
.ev-single-tags{display:inline-flex;align-items:center;gap:.85rem;margin-bottom:1.1rem}
.ev-single-tags .evtag{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);border:1px solid var(--line);border-radius:20px;padding:.28rem .7rem}
.ev-single-tags .evcity{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.ev-single-tags .evcity::before{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--gold);margin-right:.7rem;vertical-align:middle}
.ev-single-venue{font-family:var(--font-display);font-size:1.3rem;color:var(--bone);margin-top:1rem}
.ev-single-date{color:var(--gold);font-family:var(--font-mono);font-size:.85rem;letter-spacing:.06em;margin-top:.4rem}
.ev-single-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:52px;align-items:start}
.ev-single-copy{color:var(--mute);line-height:1.7;margin-bottom:2.4rem}
.ev-single-copy p{margin-bottom:1rem}
.ev-expect{list-style:none;padding:0;margin:1.6rem 0 0;display:flex;flex-direction:column;gap:1.05rem}
.ev-expect li{position:relative;padding-left:2.1rem;color:var(--bone);line-height:1.55;font-size:1.02rem}
.ev-expect li::before{content:"";position:absolute;left:0;top:.1rem;width:1.25rem;height:1.25rem;border-radius:50%;border:1px solid var(--gold);background:var(--gold-glow);box-shadow:0 0 12px var(--gold-glow)}
.ev-expect li::after{content:"";position:absolute;left:.4rem;top:.46rem;width:.42rem;height:.24rem;border-left:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(-45deg)}
.ev-single-card{position:sticky;top:110px;display:flex;flex-direction:column;gap:1.1rem}
.ev-meta{display:flex;flex-direction:column;gap:.9rem;margin:.4rem 0 .4rem}
.ev-meta-row{display:flex;justify-content:space-between;gap:1rem;padding-bottom:.85rem;border-bottom:1px solid var(--line)}
.ev-meta-row:last-child{border-bottom:0;padding-bottom:0}
.ev-meta-k{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.ev-meta-v{color:var(--bone);text-align:right;font-size:.95rem}
.ev-single-cta{width:100%;justify-content:center;text-align:center}
.ev-single-microcopy{font-size:.78rem;line-height:1.5;text-align:center}
@media(max-width:900px){.ev-single-grid{grid-template-columns:1fr;gap:40px}.ev-single-card{position:static;top:auto}}

/* ===== Lead-magnet landing page (page-free-investment-strategy-guide.php) ===== */
.lm-head{position:relative;overflow:hidden}
.lm-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:60px;align-items:center}
.lm-copy h1{margin:1rem 0 1.4rem}
.lm-inside{list-style:none;padding:0;margin:2rem 0 0;display:flex;flex-direction:column;gap:1.05rem}
.lm-inside li{display:flex;gap:1rem;align-items:flex-start;color:var(--mute);line-height:1.55;font-size:1rem}
.lm-inside li b{color:var(--bone)}
.lm-inum{flex:none;font-family:var(--font-mono);font-size:.8rem;font-weight:700;color:var(--gold);width:1.9rem;padding-top:.15rem;letter-spacing:.02em}
.lm-card{display:flex;flex-direction:column;gap:0;padding:0;overflow:hidden}
.lm-cover{position:relative;background:radial-gradient(120% 100% at 80% -10%,rgba(197,164,99,.22),transparent 55%),var(--ink);padding:34px 30px 30px;border-bottom:1px solid var(--line)}
.lm-cover-ey{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.lm-cover-ttl{font-family:var(--font-display);font-weight:600;font-size:2.6rem;line-height:1;color:var(--bone);margin:.5rem 0 .2rem}
.lm-cover-sub{font-family:var(--font-display);font-style:italic;color:var(--gold-lt,#e3cd9c);font-size:1.05rem}
.lm-cover-brand{position:absolute;top:30px;right:30px;font-family:var(--font-display);font-weight:700;font-size:1rem;color:var(--bone)}
.lm-cover-brand span{color:var(--gold)}
.lm-form,.lm-success{padding:28px 30px 30px;display:flex;flex-direction:column;gap:1rem}
.lm-form-h{font-family:var(--font-display);font-weight:500;font-size:1.5rem;color:var(--bone);margin-bottom:.2rem}
.lm-consent{display:flex;gap:.6rem;align-items:flex-start;font-size:.8rem;line-height:1.5;color:var(--mute);cursor:pointer}
.lm-consent input{margin-top:.2rem;accent-color:var(--gold);flex:none}
.lm-consent a{color:var(--gold);text-decoration:underline}
.lm-submit{width:100%;justify-content:center;text-align:center}
.lm-micro{font-size:.74rem;text-align:center;line-height:1.5}
.lm-success{text-align:center;align-items:center}
.lm-tick{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--ink);background:linear-gradient(135deg,var(--gold-lt,#e3cd9c),var(--gold));box-shadow:0 0 24px var(--gold-glow)}
.lm-tick svg{width:26px;height:26px}
@media(max-width:900px){.lm-grid{grid-template-columns:1fr;gap:40px}.lm-cover-brand{position:static;display:block;margin-bottom:.6rem}}

/* ===== Rotating event ticker (top announce bar) ===== */
.announce .tick{display:flex;align-items:center;gap:.55rem;white-space:nowrap;color:var(--mute);text-transform:none;letter-spacing:.04em;font-weight:400;font-size:.74rem}
.announce .tick b{color:var(--bone);font-weight:600}
.announce .tick .tick-cta{color:var(--gold);text-transform:uppercase;letter-spacing:.12em;font-weight:700;font-size:.68rem;transition:color .3s var(--ease)}
.announce .tick:hover .tick-cta{color:var(--gold-lt,#e3cd9c)}
.announce .ticker{display:grid;align-items:center;justify-items:center}
.announce .ticker > .tick{grid-area:1 / 1;opacity:0;transition:opacity .55s var(--ease);pointer-events:none}
.announce .ticker > .tick.active{opacity:1;pointer-events:auto}
@media(max-width:760px){.announce .tick{font-size:.68rem;gap:.4rem}}

/* ===== Shop: cart, checkout, upsell, buy buttons ===== */
.header-right .badge{opacity:.5;transition:.3s var(--ease)}
.header-right .badge.has{opacity:1;background:var(--gold);color:var(--ink)}
.pe-add .pe-price{opacity:.85;font-weight:700}
.pe-add.added{background:var(--emerald,#34d399)!important;color:#04150e!important}
.pe-soon{display:inline-block;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);border:1px solid var(--line);border-radius:22px;padding:.5rem 1rem}
.pe-empty{text-align:center;color:var(--mute);font-size:1.05rem;padding:3rem 0}
.pe-empty a{color:var(--gold)}
.pe-cart-grid,.pe-checkout-grid{display:grid;grid-template-columns:1.5fr .9fr;gap:44px;align-items:start}
.pe-lines{display:flex;flex-direction:column;gap:0}
.pe-line{display:grid;grid-template-columns:1fr auto auto auto;align-items:center;gap:1.2rem;padding:1.2rem 0;border-bottom:1px solid var(--line)}
.pe-line-name{color:var(--bone);font-size:1.02rem;display:flex;flex-direction:column;gap:.25rem}
.pe-line-unit{color:var(--mute);font-size:.78rem}
.pe-qty{display:flex;align-items:center;gap:.7rem;border:1px solid var(--line);border-radius:26px;padding:.25rem .5rem}
.pe-qty button{background:none;border:0;color:var(--gold);font-size:1.05rem;cursor:pointer;width:1.4rem;height:1.4rem;line-height:1}
.pe-qty span{min-width:1.2rem;text-align:center;color:var(--bone)}
.pe-line-price{color:var(--bone);font-weight:600;min-width:5rem;text-align:right}
.pe-remove{background:none;border:0;color:var(--mute);font-size:1.3rem;cursor:pointer;line-height:1;transition:color .3s}
.pe-remove:hover{color:var(--gold-lt,#e3cd9c)}
.pe-summary,.pe-order-summary{position:sticky;top:110px;display:flex;flex-direction:column;gap:.85rem;padding:26px}
.pe-row{display:flex;justify-content:space-between;color:var(--mute);font-size:.98rem}
.pe-row.pe-disc{color:var(--gold)}
.pe-row.pe-total{color:var(--bone);font-family:var(--font-display);font-size:1.3rem;font-weight:600;border-top:1px solid var(--line);padding-top:.85rem;margin-top:.3rem}
.pe-checkout-btn{width:100%;justify-content:center;text-align:center;margin-top:.6rem}
.pe-keep{text-align:center;color:var(--mute);font-size:.85rem;text-decoration:underline}
.pe-lines-mini{gap:.6rem;margin-bottom:.4rem}
.pe-line-mini{display:flex;justify-content:space-between;gap:1rem;color:var(--mute);font-size:.9rem}
.pe-line-mini span:last-child{color:var(--bone);white-space:nowrap}
/* upsell inline card */
.pe-upsell{border:1px solid var(--gold);border-radius:12px;padding:16px;margin:.5rem 0;background:radial-gradient(120% 100% at 100% 0,rgba(197,164,99,.14),transparent 60%);display:flex;gap:14px;align-items:center}
.pe-upsell-img{width:56px;height:56px;border-radius:8px;background-size:cover;background-position:center;flex:none}
.pe-upsell-body{display:flex;flex-direction:column;gap:.4rem}
.pe-upsell-body h4{font-family:var(--font-display);font-size:1.02rem;color:var(--bone);font-weight:500;line-height:1.3}
.pe-upsell-add{margin-top:.3rem}

/* ===== Hero "next event" card: exclusive Investors Evening variant ===== */
.nextcard.evening{border-color:var(--gold);background:radial-gradient(120% 100% at 100% 0,rgba(197,164,99,.12),rgba(10,10,10,.5));box-shadow:0 24px 60px rgba(0,0,0,.4),0 0 40px var(--gold-glow)}
.nextcard.evening .nc-top{color:var(--gold-lt,#e3cd9c)}
.nextcard .nc-upsell{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--line);font-size:.82rem;line-height:1.5;color:var(--mute)}
.nextcard .nc-upsell b{color:var(--gold)}
/* checkout form */
.pe-checkout-form,.pe-order-summary{padding:28px}
.pe-ch-h{font-family:var(--font-display);font-size:1.25rem;color:var(--bone);margin-bottom:1rem;font-weight:500}
.pe-err{background:rgba(220,80,80,.12);border:1px solid rgba(220,80,80,.4);color:#f0b4b4;padding:.7rem 1rem;border-radius:8px;font-size:.9rem;margin-bottom:1rem}
.pe-pay{width:100%;justify-content:center;text-align:center;margin-top:.5rem}
.pe-secure{color:var(--mute);font-size:.76rem;text-align:center;margin-top:.9rem;line-height:1.5}
/* upsell popup */
.pe-upsell-pop{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;background:rgba(4,4,4,.72);backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .4s var(--ease)}
.pe-upsell-pop.show{opacity:1;pointer-events:auto}
.pe-upsell-card{position:relative;max-width:440px;width:92%;background:var(--ink-2,#101010);border:1px solid var(--gold);border-radius:16px;padding:38px 34px;text-align:center;transform:scale(.94);transition:transform .4s var(--ease)}
.pe-upsell-pop.show .pe-upsell-card{transform:scale(1)}
.pe-upsell-pop-img{width:96px;height:96px;border-radius:10px;background-size:cover;background-position:center;margin:0 auto 1rem}
.pe-upsell-card h3{font-family:var(--font-display);font-size:1.6rem;line-height:1.2;color:var(--bone);margin:.5rem 0 1rem}
.pe-upsell-card .btn{width:100%;justify-content:center;text-align:center;margin-top:.4rem}
.pe-upsell-x{position:absolute;top:14px;right:16px;background:none;border:0;color:var(--mute);font-size:1.5rem;cursor:pointer;line-height:1}
.pe-upsell-no{display:block;width:100%;background:none;border:0;color:var(--mute);font-size:.82rem;margin-top:.9rem;cursor:pointer;text-decoration:underline}
@media(max-width:900px){.pe-cart-grid,.pe-checkout-grid{grid-template-columns:1fr;gap:32px}.pe-summary,.pe-order-summary{position:static}}

/* ============================================================
   TEAM GRID  ·  Who We Are
   21 people, 14 with photographs. Anyone without one gets a gold
   monogram so the grid stays even and nothing looks broken.
   ============================================================ */
.team-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(224px,1fr));
  gap:26px;
  margin-top:38px;
}
.tm-card{
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
  border:1px solid var(--line);
  border-radius:16px;
  padding:22px 20px 24px;
  text-align:center;
  transition:border-color .45s var(--ease),transform .45s var(--ease),box-shadow .45s var(--ease);
}
.tm-card:hover{
  border-color:var(--gold);
  transform:translateY(-4px);
  box-shadow:0 18px 42px -22px var(--gold-glow);
}
.tm-photo{
  width:118px;height:118px;margin:0 auto 16px;
  border-radius:50%;overflow:hidden;
  border:1px solid var(--line);
  background:var(--ink-2);
  display:flex;align-items:center;justify-content:center;
}
.tm-card:hover .tm-photo{border-color:var(--gold)}
.tm-photo img{width:100%;height:100%;object-fit:cover;display:block}
.tm-mono span{
  font-family:'Playfair Display',Georgia,serif;
  font-size:2.05rem;letter-spacing:.03em;
  background:linear-gradient(135deg,var(--gold-lt),var(--gold),var(--gold-deep));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.tm-name{
  font-family:'Playfair Display',Georgia,serif;
  font-size:1.06rem;line-height:1.25;margin:0 0 4px;color:var(--bone);
}
.tm-role{
  font-size:.78rem;letter-spacing:.07em;text-transform:uppercase;
  color:var(--gold);margin-bottom:10px;
}
.tm-quals{list-style:none;margin:0;padding:0}
.tm-quals li{
  font-size:.76rem;line-height:1.45;color:var(--mute);
  padding-top:5px;
}
.tm-quals li+li{border-top:1px solid rgba(255,255,255,.045);margin-top:5px}

@media(max-width:760px){
  .team-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px}
  .tm-card{padding:18px 12px 20px}
  .tm-photo{width:88px;height:88px}
  .tm-quals{display:none}          /* keep mobile cards scannable */
}

/* ─── "What we do" service pages ──────────────────────────────────────────
   A consistent system for the trust-structuring, trust-accounting and
   property-investment pages, built from the existing black+gold vocabulary.
   All selectors are prefixed .svcpg- so they cannot collide with the section
   padding classes (.pad/.cta/.stats), which was the specificity trap to avoid. */

.svcpg-lede{max-width:60ch;margin:0 auto;text-align:center}
.svcpg-lede .eyebrow{margin-bottom:1.15rem}
.svcpg-lede h2{font-family:var(--font-display);font-weight:500;font-size:clamp(1.9rem,3.8vw,2.9rem);color:#fff;line-height:1.08;margin-bottom:1.3rem}
.svcpg-lede p{color:var(--mute);font-size:1.12rem;line-height:1.72}

/* Benefit lists: raw <ul> bullets become a gold-ticked, two-column checklist. */
.svcpg-checklist{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:15px 40px;max-width:900px;margin:44px auto 0}
.svcpg-checklist li{position:relative;padding-left:40px;color:var(--bone);font-size:1.03rem;line-height:1.55}
.svcpg-checklist li::before{content:"";position:absolute;left:0;top:1px;width:24px;height:24px;border-radius:50%;border:1px solid var(--gold);background:radial-gradient(circle at 50% 45%,var(--gold-glow),transparent 72%)}
.svcpg-checklist li::after{content:"";position:absolute;left:9px;top:6px;width:6px;height:11px;border:solid var(--gold);border-width:0 2px 2px 0;transform:rotate(42deg)}

/* Centred section heading used above the sub-services and the FAQ. */
.svcpg-head{text-align:center;max-width:54ch;margin:0 auto 56px}
.svcpg-head .eyebrow{margin-bottom:1.05rem}
.svcpg-head h2{font-family:var(--font-display);font-weight:500;font-size:clamp(2rem,4.4vw,3.2rem);color:#fff}

/* The sub-service cards reuse .grid3/.card; this just gives the number a corner. */
.svcpg-band{background:var(--ink-2);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.svcpg-band .card .cnum{display:block;margin-bottom:16px}

/* Some service-page answers are long (the tax ones); lift the accordion clamp so
   they are not clipped. Higher specificity than .faq-item.open .faq-a. */
.svcpg-faq .faq-item.open .faq-a{max-height:1400px}

@media(max-width:760px){
  .svcpg-checklist{grid-template-columns:1fr;gap:13px}
  .svcpg-head{margin-bottom:40px}
}

/* ─── Fixed-header clearance safety net ───────────────────────────────────
   Pages built with a .pagehead hero clear the fixed header (200px top pad).
   Several imported pages open with a plain .pad section instead, whose 120px
   top padding is not enough: the heading slid up under the header and the logo
   overlapped it. This gives the FIRST content section the pagehead clearance
   whenever it is a .pad. Scoped to body > section:first-of-type, so mid-page
   .pad sections and pages that already start with .pagehead are untouched. */
body > section.pad:first-of-type{padding-top:200px}
@media(max-width:760px){ body > section.pad:first-of-type{padding-top:150px} }

/* Service-provider category sections are jump targets from the nav dropdown, so they need
   space above them or the fixed header covers the heading when you land on the anchor.
   Cleared for the FULL header (announce 42 + bar 116 = 158) since a deep-link can land with
   the header not yet in its compact scrolled state. */
.prov-cat{scroll-margin-top:178px}
.prov-cat + .prov-cat{margin-top:68px}
@media(max-width:900px){ .prov-cat{scroll-margin-top:150px} }

/* ─── Image-forward events hub ────────────────────────────────────────────
   The old event pages felt richer only because they led with real photos of the
   evenings. This gives the hub a split hero (copy + photo) and puts a photo on
   every city card, in our black+gold theme. */
.evhero{position:relative;overflow:hidden;background:var(--ink);padding:200px 0 74px}
.evhero > .wrap{display:grid;grid-template-columns:1.04fr .96fr;gap:56px;align-items:center}
.evhero-text{position:relative;z-index:2}
.evhero-media{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:4/3;box-shadow:0 34px 90px rgba(0,0,0,.55)}
.evhero-media img{width:100%;height:100%;object-fit:cover;display:block}
.evhero-media::after{content:"";position:absolute;inset:0;border-radius:12px;box-shadow:inset 0 0 0 1px rgba(197,164,99,.30);pointer-events:none}
@media(max-width:900px){
  .evhero{padding:150px 0 44px}
  .evhero > .wrap{grid-template-columns:1fr;gap:30px}
  .evhero-media{aspect-ratio:16/10;max-height:360px}
}

/* City cards become photo cards: image flush at top, text below. Overrides the
   earlier text-only .city-card padding (same specificity, later in the file wins). */
.city-card{padding:0;gap:0;overflow:hidden}
.city-card .cc-img{aspect-ratio:16/10;overflow:hidden;background:var(--ink-2)}
.city-card .cc-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease)}
.city-card:hover .cc-img img{transform:scale(1.06)}
.city-card .cc-body{display:flex;flex-direction:column;gap:.5rem;padding:22px 24px 24px}

/* "Add image here" placeholder: shown wherever the registry has no photo for a slot yet,
   so the team can see exactly where to drop the new photography. Fills its container. */
.img-ph{width:100%;height:100%;min-height:180px;display:flex;align-items:center;justify-content:center;
  background:repeating-linear-gradient(45deg,#131313,#131313 14px,#181712 14px,#181712 28px);
  border:1px dashed rgba(197,164,99,.45)}
.img-ph span{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);opacity:.9}
.evhero-media .img-ph{position:absolute;inset:0;border-radius:12px}

/* ─── WooCommerce loop in the house style ─────────────────────────────────
   Default Woo ships grey buttons and body-font titles that read as another
   website inside this one. Product titles take the display face; add-to-cart
   takes the ghost-gold button language; the pagehead-to-grid dead gap closes. */
.woo-wrap{padding-top:34px}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--font-display);font-weight:500;font-size:1.35rem;color:var(--bone)}
.woocommerce ul.products li.product .price{color:var(--gold);font-size:1rem}
.woocommerce ul.products li.product a.button,
.woocommerce a.button.add_to_cart_button{
  background:transparent;border:1px solid var(--line);color:var(--bone);border-radius:2px;
  font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  padding:.85rem 1.5rem;transition:.4s var(--ease)}
.woocommerce ul.products li.product a.button:hover,
.woocommerce a.button.add_to_cart_button:hover{
  border-color:var(--gold);color:var(--gold);box-shadow:0 0 22px var(--gold-glow);background:transparent}
.woocommerce ul.products li.product img{transition:transform .5s var(--ease)}
.woocommerce ul.products li.product:hover img{transform:translateY(-4px)}

/* Inline post imagery produced by the WPBakery conversion: full-width figures with
   air around them, and multi-image galleries as a responsive grid. */
.post-body .pe-inline-img,article .pe-inline-img{margin:2.2rem 0;border-radius:10px;overflow:hidden}
.pe-inline-img img{width:100%;height:auto;display:block}
.pe-inline-img+.pe-inline-img{margin-top:14px}
.pe-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;margin:2.2rem 0}
.pe-gallery img{width:100%;height:100%;object-fit:cover;border-radius:8px;display:block}
@media(max-width:560px){.pe-gallery{grid-template-columns:1fr}}

/* ─── Consent banner (POPIA) ──────────────────────────────────────────────
   Native, on-brand replacement for the unconfigured Complianz banner. Bottom bar,
   ink surface with the gold hairline, same button language as the rest of the site. */
.pe-consent{position:fixed;left:0;right:0;bottom:0;z-index:95;background:rgba(10,10,10,.97);
  border-top:1px solid var(--gold);box-shadow:0 -18px 60px rgba(0,0,0,.55);
  transform:translateY(110%);transition:transform .5s var(--ease)}
.pe-consent.show{transform:none}
.pe-consent-in{max-width:var(--maxw);margin:0 auto;padding:18px 28px;display:flex;
  align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap}
.pe-consent p{color:var(--mute);font-size:.92rem;line-height:1.55;margin:0;max-width:62ch}
.pe-consent p a{color:var(--gold);text-decoration:underline}
.pe-consent-btns{display:flex;gap:10px;flex-shrink:0}
.pe-consent .btn{padding:.8rem 1.3rem;font-size:.68rem}
@media(max-width:760px){
  .pe-consent-in{flex-direction:column;align-items:stretch;padding:16px 20px}
  .pe-consent-btns{width:100%}
  .pe-consent-btns .btn{flex:1;justify-content:center}
}

/* Ticket buttons in the event side card stack vertically and fill the card. */
.ticket-stack{display:flex;flex-direction:column;gap:10px}
.ticket-stack .btn{justify-content:center;width:100%}

/* Click-to-load YouTube facade: 16:9 thumbnail with the gold play ring; becomes the real
   youtube-nocookie iframe only when pressed. */
.pe-yt{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;cursor:pointer;background:var(--ink-2);box-shadow:0 24px 70px rgba(0,0,0,.5)}
.pe-yt img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease),opacity .4s}
.pe-yt:hover img{transform:scale(1.04);opacity:.85}
.pe-yt-play{position:absolute;inset:0;margin:auto;width:76px;height:76px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(8,8,8,.72);border:1px solid var(--gold);box-shadow:0 0 34px var(--gold-glow);transition:.35s var(--ease)}
.pe-yt:hover .pe-yt-play{transform:scale(1.08)}
.pe-yt-play svg{width:30px;height:30px;fill:var(--gold);margin-left:4px}
.pe-yt iframe{width:100%;height:100%;border:0;display:block}

/* ===== Block-based cart and checkout =====
 *
 * WooCommerce's block cart and checkout are ordinary WordPress pages, so they render
 * through page.php and never touch woocommerce.php. That template is where the theme
 * puts its .pagehead top padding and .wrap container, so without it the cart opened
 * underneath the fixed header, ran off the right edge of the viewport, and showed
 * WooCommerce's unstyled buttons instead of the brand's.
 *
 * Scoped to the two body classes so nothing here can leak onto the rest of the site.
 * Values are the theme's own: 200px clears the header exactly as .pagehead does, and
 * the container matches .wrap.
 */
body.woocommerce-cart .wp-block-woocommerce-cart,
body.woocommerce-checkout .wp-block-woocommerce-checkout,
body.woocommerce-cart .woocommerce,
body.woocommerce-checkout .woocommerce {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 200px 28px 90px;
}

/* The page's own h1, when Woo renders one outside the block. */
body.woocommerce-cart h1.display,
body.woocommerce-checkout h1.display {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 200px 28px 0;
}
/* When the page already prints its own heading, that heading clears the header and the
   block must not add a second 200px on top of it. The heading sits in a .sectionhead, not
   as a sibling of the block, so this keys off the page rather than adjacency. Browsers
   without :has() simply keep the roomier spacing, which is untidy but never broken. */
body.woocommerce-cart:has(h1.display) .wp-block-woocommerce-cart,
body.woocommerce-checkout:has(h1.display) .wp-block-woocommerce-checkout,
body.woocommerce-cart:has(h1.display) .woocommerce,
body.woocommerce-checkout:has(h1.display) .woocommerce {
  padding-top: 34px;
}

/* Nothing may push the page sideways. Woo's block tables are wide by default. */
body.woocommerce-cart,
body.woocommerce-checkout { overflow-x: hidden; }
body.woocommerce-cart .wc-block-cart__submit,
body.woocommerce-cart table,
body.woocommerce-checkout table { max-width: 100%; }

/* Buttons wear the brand, not WooCommerce's defaults. */
body.woocommerce-cart .wc-block-cart__submit-button,
body.woocommerce-cart .wp-block-woocommerce-proceed-to-checkout-block a,
body.woocommerce-checkout .wc-block-components-checkout-place-order-button,
body.woocommerce-cart .wc-block-components-button:not(.is-link),
body.woocommerce-checkout .wc-block-components-button:not(.is-link) {
  background: linear-gradient(120deg, var(--gold), var(--gold-lt)) !important;
  color: #15110a !important;
  border: none !important;
  border-radius: 3px !important;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size: .72rem;
  padding: 1rem 1.6rem !important;
  box-shadow: 0 6px 26px rgba(197,164,99,.22);
  transition: .4s var(--ease);
}
body.woocommerce-cart .wc-block-components-button:not(.is-link):hover,
body.woocommerce-checkout .wc-block-components-button:not(.is-link):hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 44px rgba(197,164,99,.5);
}

/* Field labels were invisible: Woo's floating labels inherit a colour that vanishes
   on the dark ground, so a buyer could not tell what any box wanted. */
body.woocommerce-checkout .wc-block-components-form .wc-block-components-text-input label,
body.woocommerce-checkout .wc-block-components-text-input label,
body.woocommerce-checkout .wc-block-components-checkout-step__title,
body.woocommerce-checkout .wc-block-components-form label,
body.woocommerce-cart .wc-block-components-form label {
  color: var(--bone) !important;
  opacity: 1 !important;
}
body.woocommerce-checkout .wc-block-components-text-input input,
body.woocommerce-checkout .wc-block-components-textarea,
body.woocommerce-checkout select {
  background: rgba(244,241,236,.04) !important;
  border: 1px solid var(--line) !important;
  color: var(--bone) !important;
}
body.woocommerce-checkout .wc-block-components-text-input input:focus,
body.woocommerce-checkout select:focus {
  border-color: var(--gold) !important;
  outline: none;
}
body.woocommerce-cart .wc-block-components-product-name,
body.woocommerce-cart .wc-block-cart-item__total,
body.woocommerce-checkout .wc-block-components-product-name { color: var(--bone); }
body.woocommerce-cart .wc-block-components-totals-item__label,
body.woocommerce-checkout .wc-block-components-totals-item__label { color: var(--mute); }

@media (max-width: 900px) {
  body.woocommerce-cart .wp-block-woocommerce-cart,
  body.woocommerce-checkout .wp-block-woocommerce-checkout,
  body.woocommerce-cart h1.display,
  body.woocommerce-checkout h1.display { padding-left: 18px; padding-right: 18px; }
}

/* ---- Scrolling event photography strip -------------------------------- */
/* The track holds the same row twice and translates by exactly half its own
   width, so the loop closes seamlessly without JavaScript. Hover pauses it,
   and reduced motion turns it into a plain horizontal scroller. */
.pe-gal{--pe-gal-bg:var(--ink);position:relative;overflow:hidden;background:var(--pe-gal-bg);padding:clamp(44px,6vw,84px) 0}
.pe-gal--alt{--pe-gal-bg:var(--ink-2)}
.pe-gal .sectionhead{margin-bottom:30px}
.pe-gal-track{display:flex;width:max-content;animation:pe-gal-scroll var(--pe-gal-dur,90s) linear infinite;will-change:transform}
.pe-gal--rev .pe-gal-track{animation-direction:reverse}
.pe-gal-row{display:flex;gap:14px;padding-right:14px}
.pe-gal-row img{height:var(--pe-gal-h,230px);width:auto;max-width:none;object-fit:cover;border-radius:4px;border:1px solid var(--line);filter:saturate(.94);transition:filter .4s var(--ease),border-color .4s var(--ease)}
.pe-gal-row img:hover{filter:saturate(1.06);border-color:var(--gold)}
@keyframes pe-gal-scroll{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.pe-gal:hover .pe-gal-track{animation-play-state:paused}
/* Soft edges so photographs drift in and out instead of being sliced off. */
.pe-gal::before,.pe-gal::after{content:"";position:absolute;top:0;bottom:0;width:clamp(36px,8vw,140px);z-index:2;pointer-events:none}
.pe-gal::before{left:0;background:linear-gradient(90deg,var(--pe-gal-bg),transparent)}
.pe-gal::after{right:0;background:linear-gradient(270deg,var(--pe-gal-bg),transparent)}
@media(max-width:760px){.pe-gal-row img{height:calc(var(--pe-gal-h,230px) * .66)}.pe-gal-row{gap:10px;padding-right:10px}}
@media(prefers-reduced-motion:reduce){
  .pe-gal{overflow-x:auto}
  .pe-gal-track{animation:none}
  .pe-gal-row[aria-hidden="true"]{display:none}
  .pe-gal::before,.pe-gal::after{display:none}
}

/* Promotional film on the event hubs: constrained so it reads as a feature
   rather than a full bleed banner. */
.pe-yt-frame{max-width:860px;margin:0 auto}