/* ============================================================
   "CHAMBERS" — premium navy & bronze design system
   Fuad Aghayev, Attorney at Law
   Loaded AFTER style.css; layers over the Bootstrap theme.
   Site-wide: every template extends base.html, so the token
   remap below cascades to portfolio, blog, dashboard, accounts.

   Two-tone, accessible law-firm palette:
     · Deep NAVY  — carries actions, links, buttons, focus.
     · GOLD/BRONZE — decorative accent (rules, stats, on-dark
       eyebrows). Gold stays a flourish, never a text/button
       fill on white (it would fail contrast).
   NOTE: legacy --c-crimson* token names are kept (templates
   reference them inline) but re-pointed to the new palette so
   nothing breaks — --c-crimson-bright is now the on-dark gold.
   ============================================================ */

/* ---------- 1. Brand constants & type ---------- */
:root {
  --c-navy:          #14304B;  /* primary action / link */
  --c-navy-deep:     #0C2031;
  --c-gold:          #9C7C44;  /* warm accent on light */
  --c-gold-bright:   #CBAA68;  /* warm accent on dark */
  --c-gold-deep:     #B9954F;

  /* legacy names — re-pointed, still consumed inline by templates */
  --c-crimson:       #14304B;
  --c-crimson-deep:  #0C2031;
  --c-crimson-bright:#CBAA68;  /* accent on dark backgrounds = gold */

  --c-ink:           #0E1A28;
  --c-ink-deep:      #070F18;
  --c-paper:         #FFFFFF;
  --c-paper-2:       #F4F6F8;
  --c-muted:         #586575;
  --c-line:          #E3E7EC;
  --c-on-ink:        #ECEFF2;

  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --pp-ease: cubic-bezier(.22,.61,.36,1);
  --pp-dur: 240ms;
  --pp-shadow: 0 24px 60px -34px rgba(12,32,49,.42);
}

/* ---------- 2. Semantic tokens per theme ---------- */
[data-bs-theme=light], [data-bs-theme=auto] {  /* 'auto' aliased to Light: option removed, but tolerate a stale stored value */
  --pp-text:        #14202C;
  --pp-muted:       #586575;
  --pp-bg:          #FFFFFF;
  --pp-surface:     #F4F6F8;
  --pp-line:        #E3E7EC;
  --pp-accent:      #14304B;   /* navy — primary */
  --pp-accent-deep: #0C2031;
  --pp-gold:        #9C7C44;   /* bronze — decorative */
  --pp-gold-bright: #CBAA68;
  --pp-ink:         #0E1A28;
  --pp-on-ink:      #ECEFF2;
  --pp-on-ink-muted:#9FACB9;

  --bs-primary:        #14304B;
  --bs-primary-rgb:    20,48,75;
  --bs-link-color:     #14304B;
  --bs-link-color-rgb: 20,48,75;
  --bs-link-hover-color: #0C2031;
  --bs-link-hover-color-rgb: 12,32,49;
  --bs-body-color:     #14202C;
  --bs-body-bg:        #FFFFFF;
  --bs-border-color:   #E3E7EC;
  --bs-emphasis-color: #14202C;
}

[data-bs-theme=dark] {
  --pp-text:        #E7EBEF;
  --pp-muted:       #9DA9B6;
  --pp-bg:          #0C141E;
  --pp-surface:     #121C28;
  --pp-line:        #243240;
  --pp-accent:      #CBAA68;   /* on dark, gold carries actions */
  --pp-accent-deep: #B9954F;
  --pp-gold:        #CBAA68;
  --pp-gold-bright: #DCC288;
  --pp-ink:         #070F18;
  --pp-on-ink:      #ECEFF2;
  --pp-on-ink-muted:#9FACB9;

  --bs-primary:        #CBAA68;
  --bs-primary-rgb:    203,170,104;
  --bs-link-color:     #CBAA68;
  --bs-link-color-rgb: 203,170,104;
  --bs-link-hover-color: #DCC288;
  --bs-link-hover-color-rgb: 220,194,136;
  --bs-body-color:     #E7EBEF;
  --bs-body-bg:        #0C141E;
  --bs-border-color:   #243240;
  --bs-emphasis-color: #E7EBEF;
}

/* ---------- 3. Base typography ---------- */
body {
  font-family: var(--font-body);
  color: var(--pp-text);
  background-color: var(--pp-bg);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,h2,h3,h4,h5,h6,
.h1,.h2,.h3,.h4,.h5,.h6,
.display-1,.display-2,.display-3,.display-4,.display-5,.display-6 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.1;
  color: var(--pp-text);
}
.display-1,.display-2,.display-3 { font-weight: 500; }

.lead { font-size: 1.15rem; line-height: 1.7; color: var(--pp-muted); }
a { transition: color var(--pp-dur) var(--pp-ease); }
.pp-measure { max-width: 64ch; }
.text-muted, .pp-muted { color: var(--pp-muted) !important; }
.pp-accent { color: var(--pp-accent) !important; }
.pp-serif { font-family: var(--font-display) !important; }

/* ---------- 4. Eyebrow / labels / rules ---------- */
.pp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--pp-accent);
}
.pp-eyebrow.has-bar::before {
  content: "";
  width: 30px; height: 2px;
  background: var(--pp-accent);
  display: inline-block;
}
.pp-eyebrow.is-centered { justify-content: center; }
.pp-kicker {
  font-family: var(--font-body);
  font-size: .72rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--pp-muted);
}
.pp-rule { height: 1px; background: var(--pp-line); border: 0; }
.pp-rule-accent { height: 3px; width: 56px; background: var(--pp-gold); border: 0; }

/* ---------- 5. Sections ---------- */
.pp-section { padding-top: clamp(3rem, 6vw, 6.5rem); padding-bottom: clamp(3rem, 6vw, 6.5rem); }
.pp-paper-2 { background: var(--pp-surface); }
.pp-ink-section { background: var(--pp-ink); color: var(--pp-on-ink); }
.pp-ink-section h1,.pp-ink-section h2,.pp-ink-section h3,
.pp-ink-section h4,.pp-ink-section .h1,.pp-ink-section .h2,.pp-ink-section .h3 { color: var(--pp-on-ink); }
.pp-ink-section .lead,.pp-ink-section .pp-muted { color: var(--pp-on-ink-muted); }
.pp-section-head { max-width: 720px; }

/* ---------- 6. Display headline ---------- */
.pp-display {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.02em;
  font-size: clamp(2.6rem, 6vw, 4.6rem);
}
.pp-display-sm { font-size: clamp(2rem, 4.5vw, 3.2rem); line-height: 1.08; }

/* ---------- 7. Arrow link (editorial CTA) ---------- */
.pp-arrow-link {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  border-left: 3px solid var(--pp-accent);
  padding: .35rem 0 .35rem .9rem;
  text-decoration: none;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .76rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--pp-text);
  transition: gap var(--pp-dur) var(--pp-ease), color var(--pp-dur) var(--pp-ease);
}
.pp-arrow-link .pp-arrow { color: var(--pp-accent); font-size: 1.1rem; line-height: 1; transition: transform var(--pp-dur) var(--pp-ease); }
.pp-arrow-link:hover { gap: 1.15rem; color: var(--pp-accent); }
.pp-arrow-link:hover .pp-arrow { transform: translateX(4px); }
.pp-ink-section .pp-arrow-link, .pp-footer .pp-arrow-link, .pp-hero .pp-arrow-link { color: var(--pp-on-ink); border-left-color: var(--pp-gold-bright); }
.pp-ink-section .pp-arrow-link:hover, .pp-hero .pp-arrow-link:hover { color: #fff; }
.pp-hero .pp-arrow-link .pp-arrow { color: var(--pp-gold-bright); }

/* ---------- 8. Buttons (sharp, editorial) ---------- */
.btn { font-family: var(--font-body); font-weight: 600; letter-spacing: .02em; border-radius: 0; padding: .7rem 1.4rem; transition: background-color var(--pp-dur) var(--pp-ease), color var(--pp-dur) var(--pp-ease), border-color var(--pp-dur) var(--pp-ease); }
.btn-lg { padding: .9rem 1.8rem; }
.btn-crimson {
  --bs-btn-color:#fff; --bs-btn-bg: var(--pp-accent); --bs-btn-border-color: var(--pp-accent);
  --bs-btn-hover-color:#fff; --bs-btn-hover-bg: var(--pp-accent-deep); --bs-btn-hover-border-color: var(--pp-accent-deep);
  --bs-btn-active-bg: var(--pp-accent-deep); --bs-btn-active-border-color: var(--pp-accent-deep);
}
.btn-ink {
  --bs-btn-color:#fff; --bs-btn-bg: var(--c-ink); --bs-btn-border-color: var(--c-ink);
  --bs-btn-hover-color:#fff; --bs-btn-hover-bg:#000; --bs-btn-hover-border-color:#000;
}
.btn-outline-ink {
  --bs-btn-color: var(--pp-text); --bs-btn-border-color: var(--pp-text);
  --bs-btn-hover-color:#fff; --bs-btn-hover-bg: var(--pp-text); --bs-btn-hover-border-color: var(--pp-text);
}
.pp-ink-section .btn-outline-ink, .pp-footer .btn-outline-ink, .pp-hero .btn-outline-ink {
  --bs-btn-color: var(--pp-on-ink); --bs-btn-border-color: rgba(236,239,242,.45);
  --bs-btn-hover-color: var(--c-ink); --bs-btn-hover-bg: var(--pp-on-ink); --bs-btn-hover-border-color: var(--pp-on-ink);
}

/* ---------- 9. Cards ---------- */
.pp-card {
  position: relative;
  background: var(--pp-bg);
  border: 1px solid var(--pp-line);
  border-radius: 0;
  padding: 1.75rem;
  height: 100%;
  transition: box-shadow var(--pp-dur) var(--pp-ease), border-color var(--pp-dur) var(--pp-ease), transform var(--pp-dur) var(--pp-ease);
}
.pp-card::before { content:""; position:absolute; top:-1px; left:-1px; height:3px; width:0; background:var(--pp-gold); transition: width var(--pp-dur) var(--pp-ease); }
.pp-card:hover { border-color: rgba(20,48,75,.4); box-shadow: var(--pp-shadow); transform: translateY(-3px); }
.pp-card:hover::before { width: 64px; }
a.pp-card { text-decoration: none; color: inherit; }

/* Images render in full colour by default (grayscale-on-hover removed per request) */
.pp-card-img { width:100%; aspect-ratio:3/2; object-fit:cover; }
.pp-grayscale { filter: none; }
.grayscale { filter: none; }   /* neutralise legacy theme grayscale (e.g. contact map) */

/* Overlay card */
.pp-overlay-card { position:relative; overflow:hidden; min-height:360px; border:1px solid var(--pp-line); }
.pp-overlay-card img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition: transform 600ms var(--pp-ease); }
.pp-overlay-card::after { content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(11,12,13,.9) 0%, rgba(11,12,13,.2) 55%, transparent 82%); }
.pp-overlay-card:hover img { transform: scale(1.05); }
.pp-overlay-card .pp-overlay-body { position:relative; z-index:1; color: var(--pp-on-ink); }

/* ---------- 10. Numbered practice strip ---------- */
.pp-index-no { font-family: var(--font-body); font-size:.72rem; font-weight:600; letter-spacing:.2em; color: var(--pp-gold); }

/* ---------- 11. Drop cap, notes, quotes ---------- */
.pp-dropcap::first-letter { font-family: var(--font-display); font-weight:500; float:left; font-size:3.6em; line-height:.82; padding:.05em .12em 0 0; color: var(--pp-gold); }
.pp-note { background: rgba(20,48,75,.05); border-left: 3px solid var(--pp-gold); padding: 1rem 1.25rem; }
[data-bs-theme=dark] .pp-note { background: rgba(203,170,104,.1); }
.pp-quote { font-family: var(--font-display); font-size: 1.7rem; line-height: 1.4; font-style: italic; color: var(--pp-text); }

/* ---------- 12. Stats ---------- */
.pp-stat-num { font-family: var(--font-display); font-weight:500; font-size: clamp(2.2rem,4vw,3.2rem); line-height:1; color: var(--pp-gold); }
.pp-stat-label { font-family: var(--font-body); font-size:.72rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color: var(--pp-muted); }

/* ---------- 13. Forms ---------- */
.form-control, .form-select {
  border-radius: 0; border-color: var(--pp-line);
  background-color: var(--pp-bg); color: var(--pp-text);
  padding: .75rem .9rem;
}
.form-control:focus, .form-select:focus { border-color: var(--pp-accent); box-shadow: 0 0 0 .18rem rgba(20,48,75,.15); }
.form-label { font-weight: 600; font-size: .85rem; letter-spacing: .04em; color: var(--pp-text); }

/* ---------- 14. Header / navbar ---------- */
.navbar { background-color: var(--pp-bg); border-bottom: 1px solid var(--pp-line); }
.navbar .nav-link { font-weight: 500; letter-spacing: .01em; color: var(--pp-text); }
.navbar .nav-link:hover, .navbar .nav-link.active { color: var(--pp-accent); }
.navbar .navbar-brand-item { max-height: 42px; width: auto; }
.pp-wordmark { font-family: var(--font-display); font-weight: 500; font-size: 1.45rem; letter-spacing: -.01em; color: var(--pp-text); text-decoration: none; }
.pp-wordmark b { color: var(--pp-accent); font-weight: 500; }

.pp-menu-btn {
  display:inline-flex; align-items:center; gap:.55rem;
  background: var(--pp-accent); color:#fff; border:0;
  font-family: var(--font-body); font-weight:600; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  padding:.7rem 1.05rem; cursor:pointer;
  transition: background-color var(--pp-dur) var(--pp-ease);
}
.pp-menu-btn:hover { background: var(--pp-accent-deep); }

/* Slim top bar */
.pp-topbar { background: var(--c-ink); color: var(--c-on-ink); font-size:.8rem; letter-spacing:.02em; border-bottom:1px solid rgba(203,170,104,.18); }
.pp-topbar a { color: var(--c-gold-bright); text-decoration:none; }
.pp-topbar a:hover { color:#fff; }
.pp-topbar i { color: var(--c-gold-bright); }

/* ---------- 15. Slide-in overlay menu (signature) ---------- */
/* Right-anchored panel: slides in from the right, leaving the page
   visible on the left (~50% on desktop). Full width on mobile. */
.pp-overlay {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 100%;                              /* mobile: full width */
  z-index: 1080;
  background: var(--c-ink);
  display: flex; flex-direction: column; gap: clamp(1.25rem, 3vh, 2rem);
  padding: clamp(1.5rem, 4vw, 3rem);
  overflow-y: auto;
  box-shadow: -28px 0 70px -36px rgba(0,0,0,.65);
  transform: translateX(100%);              /* parked off-canvas, to the right */
  visibility: hidden;
  transition: transform var(--pp-dur) var(--pp-ease), visibility var(--pp-dur) var(--pp-ease);
}
.pp-overlay.is-open { transform: translateX(0); visibility: visible; }

@media (min-width: 768px) { .pp-overlay { width: 70%; } }
@media (min-width: 992px) { .pp-overlay { width: 50%; max-width: 720px; } }

/* The parked (off-canvas) panel must not create a horizontal scrollbar.
   overflow-x: clip (not hidden) suppresses it WITHOUT establishing a scroll
   container, so the JS sticky header and vertical scrolling stay intact. */
html { overflow-x: clip; }
.pp-overlay-top { flex:0 0 auto; display:flex; justify-content:space-between; align-items:center; }
.pp-overlay-close { background:none; border:0; color: var(--c-on-ink); font-size:1.6rem; cursor:pointer; line-height:1; padding:.25rem; }
.pp-overlay-close:hover { color: var(--c-crimson-bright); }
/* Main area: navigation + information block — natural height, normal flow */
.pp-overlay-main { flex:0 0 auto; display:flex; flex-direction:column; gap: clamp(1.5rem, 4vh, 2.4rem); }
.pp-overlay-nav { display:flex; flex-direction:column; gap:.2rem; }
.pp-overlay-nav a {
  font-family: var(--font-display); font-weight:500;
  font-size: clamp(1.9rem, 4.4vw, 2.9rem); line-height:1.18;
  color: var(--c-on-ink); text-decoration:none; width:max-content; max-width:100%;
  transition: color var(--pp-dur) var(--pp-ease), padding-left var(--pp-dur) var(--pp-ease);
}
.pp-overlay-nav a:hover { color: var(--c-crimson-bright); padding-left:.6rem; }

/* Information block (editorial, not a Bootstrap card) */
.pp-overlay-info { border-left:3px solid var(--c-crimson-bright); background: rgba(255,255,255,.045); padding:1.15rem 1.35rem; max-width:440px; }
.pp-overlay-info-name { font-family: var(--font-display); font-weight:500; font-size:1.5rem; line-height:1.1; color: var(--c-on-ink); }
.pp-overlay-info-desc { font-size:.92rem; line-height:1.6; color: var(--pp-on-ink-muted); margin:.5rem 0 1rem; }

/* Footer: contact list + social */
.pp-overlay-foot { flex:0 0 auto; margin-top:auto; display:flex; flex-direction:column; gap:1.1rem; border-top:1px solid rgba(244,242,239,.16); padding-top:1.5rem; color: var(--c-on-ink); }
.pp-overlay-contact { display:grid; gap:.45rem; font-size:.88rem; }
.pp-overlay-contact a, .pp-overlay-contact > div { color: var(--pp-on-ink-muted); text-decoration:none; display:flex; align-items:center; gap:.55rem; }
.pp-overlay-contact a:hover { color:#fff; }
.pp-overlay-contact i { color: var(--c-crimson-bright); width:1.05rem; text-align:center; flex:none; }
.pp-overlay-foot-row { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; }
.pp-overlay-social { display:flex; gap:1.15rem; font-size:1.25rem; }
.pp-overlay-social a { color: var(--c-on-ink); }
.pp-overlay-social a:hover { color: var(--c-crimson-bright); }
.pp-overlay-auth { font-family: var(--font-body); font-weight:600; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color: var(--pp-on-ink-muted); text-decoration:none; }
.pp-overlay-auth:hover { color:#fff; }
body.pp-no-scroll { overflow: hidden; }

/* ---------- 16. Footer — deep ink band with gold accents ---------- */
footer.pp-footer { background: var(--c-ink); color: var(--c-on-ink); border-top:3px solid var(--c-gold); }
footer.pp-footer a { color: rgba(236,239,242,.74); text-decoration:none; transition: color var(--pp-dur) var(--pp-ease); }
footer.pp-footer a:hover { color: var(--c-gold-bright); }
footer.pp-footer i { color: var(--c-gold-bright); }
footer.pp-footer .pp-stat-label { color: var(--c-gold-bright); }
footer.pp-footer .pp-wordmark b { color: var(--c-gold-bright) !important; }
footer.pp-footer .pp-foot-rule { height:1px; background: rgba(255,255,255,.12); border:0; }
footer.pp-footer .pp-foot-disclaimer { color:#7E8B99; }
[data-bs-theme=dark] footer.pp-footer { background: var(--c-ink-deep); }

/* ---------- 17. Tabs / breadcrumb tweaks ---------- */
.nav-tabs { --bs-nav-tabs-link-active-color: var(--pp-accent); --bs-nav-tabs-border-color: var(--pp-line); border-bottom-color: var(--pp-line); }
.nav-tabs .nav-link { color: var(--pp-muted); font-weight:500; }
.nav-tabs .nav-link.active { color: var(--pp-accent); border-bottom-color: var(--pp-accent); background: transparent; border-top:0; border-left:0; border-right:0; }
.breadcrumb { --bs-breadcrumb-divider-color: var(--pp-muted); font-size:.85rem; }
.breadcrumb a { color: var(--pp-accent); text-decoration:none; }

/* ---------- 18. Accessibility & motion floor ---------- */
a:focus-visible, button:focus-visible, .btn:focus-visible,
.form-control:focus-visible, .nav-link:focus-visible, .pp-menu-btn:focus-visible {
  outline: 2px solid var(--pp-accent); outline-offset: 2px;
}
.pp-card, a.pp-card, .pp-overlay-card, .pp-menu-btn, [role="button"] { cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .pp-overlay-card:hover img { transform: none; }
}

/* ---------- 19. Reveal-on-scroll ---------- */
.pp-reveal { opacity:0; transform: translateY(18px); transition: opacity .6s var(--pp-ease), transform .6s var(--pp-ease); }
.pp-reveal.is-in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) { .pp-reveal { opacity:1; transform:none; } }

/* ---------- 22. Gold accent button (for dark hero / bands) ---------- */
.btn-gold {
  --bs-btn-color: var(--c-ink); --bs-btn-bg: var(--c-gold-bright); --bs-btn-border-color: var(--c-gold-bright);
  --bs-btn-hover-color: var(--c-ink); --bs-btn-hover-bg: #DCC288; --bs-btn-hover-border-color:#DCC288;
  --bs-btn-active-color: var(--c-ink); --bs-btn-active-bg:#DCC288; --bs-btn-active-border-color:#DCC288;
  font-weight: 600;
}

/* ---------- 23. Signature HERO — deep-space night sky ---------- */
.pp-hero {
  position: relative; overflow: hidden; isolation: isolate;
  color: var(--c-on-ink);
  min-height: 100vh; min-height: 100svh;
  /* elegant dark-blue → black sky (CSS-only, no external URLs) */
  background:
    radial-gradient(120% 80% at 78% 8%, rgba(34,68,120,.55) 0%, transparent 52%),
    radial-gradient(90% 70% at 12% 2%, rgba(20,48,75,.45) 0%, transparent 50%),
    linear-gradient(180deg, #0a1730 0%, #081226 42%, #050a16 100%);
}
/* hairline gold rule along the very top of the hero */
.pp-hero::before { content:""; position:absolute; top:0; left:0; right:0; height:3px; background: var(--c-gold); z-index:6; }

/* ---- sky layers (parallax) ---- */
.pp-hero-sky { position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.pp-stars { position:absolute; inset:-18%; pointer-events:none; will-change:transform; }
/* each layer = tiled field of tiny star dots at different scales/opacity */
.pp-stars-1 {
  background-image:
    radial-gradient(1px 1px at 18px 32px, rgba(255,255,255,.9), transparent),
    radial-gradient(1px 1px at 92px 14px, rgba(255,255,255,.7), transparent),
    radial-gradient(1px 1px at 140px 88px, rgba(255,255,255,.8), transparent),
    radial-gradient(1px 1px at 60px 120px, rgba(214,226,255,.7), transparent),
    radial-gradient(1px 1px at 175px 50px, rgba(255,255,255,.6), transparent);
  background-size: 220px 200px; background-repeat: repeat;
  opacity:.55; animation: pp-twinkle 7s ease-in-out infinite;
}
.pp-stars-2 {
  background-image:
    radial-gradient(1.6px 1.6px at 40px 60px, rgba(255,255,255,1), transparent),
    radial-gradient(1.4px 1.4px at 130px 30px, rgba(220,232,255,.95), transparent),
    radial-gradient(1.5px 1.5px at 200px 150px, rgba(255,255,255,.9), transparent),
    radial-gradient(1.4px 1.4px at 95px 175px, rgba(255,248,232,.85), transparent);
  background-size: 300px 280px; background-repeat: repeat;
  opacity:.75; animation: pp-twinkle 5s ease-in-out infinite .8s;
}
.pp-stars-3 {
  background-image:
    radial-gradient(2.2px 2.2px at 80px 70px, rgba(255,255,255,1), transparent),
    radial-gradient(2px 2px at 260px 200px, rgba(203,170,104,.9), transparent),
    radial-gradient(2px 2px at 360px 90px, rgba(255,255,255,.95), transparent);
  background-size: 460px 420px; background-repeat: repeat;
  opacity:.9; animation: pp-twinkle 8s ease-in-out infinite 1.6s;
}
/* soft glows — one cool, one warm gold — for depth */
.pp-hero-glow { position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(45% 38% at 80% 14%, rgba(96,140,210,.16), transparent 70%),
    radial-gradient(40% 30% at 16% 8%, rgba(203,170,104,.10), transparent 70%);
}
/* legibility overlay: darker toward the left where the copy sits, and the base */
.pp-hero-overlay { position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(5,10,22,.82) 0%, rgba(6,12,26,.55) 46%, rgba(6,12,26,.18) 78%, transparent 100%),
    linear-gradient(180deg, transparent 50%, rgba(5,8,16,.6) 100%);
}

.pp-hero-inner {
  position: relative; z-index: 2;
  display: flex; align-items: center;
  min-height: 100vh; min-height: 100svh;
  padding-block: clamp(5.5rem, 12vh, 8rem);
}

/* ---- entrance animation: staggered fade-up ---- */
@keyframes pp-rise { from { opacity:0; transform: translateY(26px); } to { opacity:1; transform:none; } }
@keyframes pp-twinkle { 0%,100% { opacity:.45; } 50% { opacity:.9; } }
.pp-rise { opacity:0; animation: pp-rise .9s var(--pp-ease) both; }
.pp-hero .pp-display { color: var(--c-on-ink); }
.pp-hero-lead { color: var(--pp-on-ink-muted); }

/* Framed B/W portrait plate (editorial offset frame, à la reference) */
.pp-hero-figure { position: relative; max-width: 420px; margin-left: auto; }
.pp-hero-figure::before {
  content:""; position:absolute; inset: 16px -16px -16px 16px;
  border: 1px solid rgba(203,170,104,.5); z-index:0;
}
.pp-hero-figure img {
  position: relative; z-index: 1; display:block; width: 100%;
  aspect-ratio: 4 / 4.7; object-fit: cover; object-position: top center;
  background: #e9ebee;                 /* opaque studio backdrop */
  filter: contrast(1.02);              /* full colour (grayscale removed per request) */
}
/* faint navy tint unifies the portrait plate with the dark band */
.pp-hero-figure::after {
  content:""; position:absolute; z-index:2; left:0; right:0; top:0;
  height: calc(100% - 16px);
  background: linear-gradient(180deg, transparent 55%, rgba(14,26,40,.28));
  pointer-events:none;
}
.pp-hero-figure figcaption {
  position: relative; z-index: 1; margin-top: 1rem;
  font-family: var(--font-body); font-size:.72rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color: var(--c-gold-bright);
}

/* trust strip */
.pp-hero-trust { display:flex; flex-wrap:wrap; gap:.65rem 1.6rem; }
.pp-hero-trust .pp-trust-item {
  display:inline-flex; align-items:center; gap:.55rem;
  font-family: var(--font-body); font-size:.74rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color: var(--c-on-ink);
}
.pp-hero-trust .pp-trust-item i { color: var(--c-gold-bright); font-size:.85rem; }

/* scroll cue */
.pp-hero-cue { position:absolute; left:50%; bottom:1.3rem; transform:translateX(-50%); z-index:3; color: var(--pp-on-ink-muted); font-size:1.3rem; line-height:1; animation: pp-bob 2.4s var(--pp-ease) infinite; }
.pp-hero-cue:hover { color: var(--c-gold-bright); }
@keyframes pp-bob { 0%,100%{ transform:translate(-50%,0);} 50%{ transform:translate(-50%,6px);} }

@media (max-width: 991.98px) {
  .pp-hero { min-height: auto; }
  .pp-hero-inner { min-height: 100vh; min-height: 100svh; padding-block: clamp(4.5rem, 12vh, 6rem); }
  .pp-hero-figure { max-width: 300px; margin: .5rem auto 0; }
  .pp-hero-cue { display: none; }
  .pp-hero-overlay { background:
    linear-gradient(180deg, rgba(5,10,22,.55) 0%, rgba(6,12,26,.35) 40%, rgba(5,8,16,.72) 100%); }
}
@media (prefers-reduced-motion: reduce) {
  .pp-hero-cue { animation: none; }
  .pp-rise { opacity:1; animation: none; }
  .pp-stars { animation: none !important; }
}

/* ---------- 20. Theme harmony (dashboard / accounts / blog leftovers) ---------- */
/* These pages inherit the cascade; harmonise the theme's accent helpers to crimson. */
.btn-primary-soft { color: var(--pp-accent); background-color: rgba(var(--bs-primary-rgb), .10); border: 0; }
.btn-primary-soft:hover, .btn-primary-soft:focus, .btn-primary-soft.active { color: #fff; background-color: var(--pp-accent) !important; border-color: var(--pp-accent) !important; }
.badge.text-bg-primary, .badge.bg-primary { background-color: var(--pp-accent) !important; }
.page-link { color: var(--pp-accent); border-radius: 0; }
.page-link:hover { color: var(--pp-accent-deep); }
.page-item.active .page-link { background-color: var(--pp-accent); border-color: var(--pp-accent); color: #fff; }
.form-control.bg-light, .form-select.bg-light { background-color: var(--pp-surface) !important; }
.nav-pills { --bs-nav-pills-link-active-bg: var(--pp-accent); }
.dropdown-menu { --bs-dropdown-link-active-bg: var(--pp-accent); }
.form-check-input:checked { background-color: var(--pp-accent); border-color: var(--pp-accent); }
a.btn-link, .btn-link { --bs-btn-color: var(--pp-accent); --bs-btn-hover-color: var(--pp-accent-deep); }

/* ---------- 21. Header controls: font-size group + theme switcher ---------- */
.pp-controls-divider { width:1px; height:22px; background: var(--pp-line); display:inline-block; }

.pp-fontsize .btn { padding:.18rem .52rem; font-size:.78rem; font-weight:600; line-height:1; border:1px solid var(--pp-line); color: var(--pp-muted); background: transparent; }
.pp-fontsize .btn:hover { border-color: var(--pp-accent); color: var(--pp-accent); z-index:2; }
.pp-fontsize .btn-check:checked + .btn { background: var(--pp-accent); border-color: var(--pp-accent); color:#fff; z-index:2; }
.pp-fontsize .btn-check:focus-visible + .btn { outline:2px solid var(--pp-accent); outline-offset:2px; }

/* Theme switcher trigger — borderless, integrated icon button */
.pp-theme-btn {
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; padding:0;
  border:0; background:transparent; box-shadow:none; border-radius:4px;
  color: var(--pp-text); font-size:1.1rem; line-height:1; cursor:pointer;
  transition: color var(--pp-dur) var(--pp-ease), background-color var(--pp-dur) var(--pp-ease);
}
.pp-theme-btn:hover { color: var(--pp-accent); }
.pp-theme-btn:focus { outline:none; box-shadow:none; }
.pp-theme-btn:focus-visible { outline:none; color: var(--pp-accent); background: rgba(var(--bs-primary-rgb), .10); }
.pp-theme-btn[aria-expanded="true"] { color: var(--pp-accent); background: rgba(var(--bs-primary-rgb), .10); }
/* Show only the glyph for the current mode (CSS-driven; default = auto/half-circle) */
.pp-theme-btn i { display:none; line-height:1; }
.pp-theme-btn .pp-ic-light { display:inline-flex; }            /* default (also covers any stale 'auto') */
[data-bs-theme=dark] .pp-theme-btn .pp-ic-light { display:none; }
[data-bs-theme=dark] .pp-theme-btn .pp-ic-dark { display:inline-flex; }

/* Theme dropdown */
.pp-theme-menu { padding:.4rem; min-width:13rem; border:1px solid var(--pp-line); border-radius:0; box-shadow: var(--pp-shadow); }
.pp-theme-menu .dropdown-item { position:relative; display:flex; align-items:center; gap:.7rem; padding:.6rem .85rem; border-radius:0; font-size:.9rem; color: var(--pp-text); }
.pp-theme-menu .dropdown-item i { font-size:1rem; width:1.2rem; text-align:center; color: var(--pp-muted); }
.pp-theme-menu .dropdown-item:hover, .pp-theme-menu .dropdown-item:focus { background: var(--pp-surface); color: var(--pp-accent); }
.pp-theme-menu .dropdown-item:hover i, .pp-theme-menu .dropdown-item:focus i { color: var(--pp-accent); }
/* Active = the theme currently applied — highlight + checkmark, no JS needed */
[data-bs-theme=light] .pp-theme-menu [data-bs-theme-value=light],
[data-bs-theme=dark]  .pp-theme-menu [data-bs-theme-value=dark] { background: rgba(var(--bs-primary-rgb), .10); color: var(--pp-accent); font-weight:600; }
[data-bs-theme=light] .pp-theme-menu [data-bs-theme-value=light] i,
[data-bs-theme=dark]  .pp-theme-menu [data-bs-theme-value=dark] i { color: var(--pp-accent); }
[data-bs-theme=light] .pp-theme-menu [data-bs-theme-value=light]::after,
[data-bs-theme=dark]  .pp-theme-menu [data-bs-theme-value=dark]::after { content:"\2713"; margin-left:auto; color: var(--pp-accent); font-weight:700; }