/* ============================================================
   "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:          #d6293e;  /* primary action / link */
  --c-navy-deep:     #a81f30;
  --c-gold:          #9C7C44;  /* warm accent on light */
  --c-gold-bright:   #d6293e;  /* warm accent on dark */
  --c-gold-deep:     #B9954F;

  /* legacy names — re-pointed, still consumed inline by templates */
  --c-crimson:       #d6293e;
  --c-crimson-deep:  #a81f30;
  --c-crimson-bright:#d6293e;  /* 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:      #d6293e;   /* navy — primary */
  --pp-accent-deep: #a81f30;
  --pp-gold:        #9C7C44;   /* bronze — decorative */
  --pp-gold-bright: #d6293e;
  --pp-ink:         #0E1A28;
  --pp-on-ink:      #ECEFF2;
  --pp-on-ink-muted:#9FACB9;

  --bs-primary:        #d6293e;
  --bs-primary-rgb:    214,41,62;
  --bs-link-color:     #d6293e;
  --bs-link-color-rgb: 214,41,62;
  --bs-link-hover-color: #a81f30;
  --bs-link-hover-color-rgb: 168,31,48;
  --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:          #000000;
  --pp-surface:     #121C28;
  --pp-line:        #243240;
  --pp-accent:      #d6293e;   /* on dark, gold carries actions */
  --pp-accent-deep: #a81f30;
  --pp-gold:        #d6293e;
  --pp-gold-bright: #d6293e;
  --pp-ink:         #070F18;
  --pp-on-ink:      #ECEFF2;
  --pp-on-ink-muted:#9FACB9;

  --bs-primary:        #d6293e;
  --bs-primary-rgb:    214,41,62;
  --bs-link-color:     #d6293e;
  --bs-link-color-rgb: 214,41,62;
  --bs-link-hover-color: #a81f30;
  --bs-link-hover-color-rgb: 168,31,48;
  --bs-body-color:     #E7EBEF;
  --bs-body-bg:        #000000;
  --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; }
/* SVG twin of .pp-rule-accent, animated with DrawSVG ([data-draw]). Default gold;
   on-dark instances override the stroke inline (e.g. var(--c-crimson-bright)). */
.pp-rule-accent-svg { display: block; width: 56px; height: 3px; overflow: visible; }
.pp-rule-accent-svg line { stroke: var(--pp-gold); stroke-width: 3; }

/* ---------- 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: var(--pp-on-ink);
  --bs-btn-hover-color: var(--pp-on-ink); --bs-btn-hover-bg: transparent; --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(214,41,62,.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); }
/* About-page numbered cards (01–04): large red editorial numerals */
.pp-index-no.pt-1 { color: #d6293e; font-family: var(--font-display); font-size: clamp(1.6rem, 3.5vw, 2rem); letter-spacing: .03em; line-height: 1; }

/* ---------- 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-accent); }
.pp-note { background: rgba(214,41,62,.05); border-left: 3px solid var(--pp-gold); padding: 1rem 1.25rem; }
[data-bs-theme=dark] .pp-note { background: rgba(214,41,62,.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(214,41,62,.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); }
[data-bs-theme=light] .navbar, [data-bs-theme=auto] .navbar { background-color: #FFFFFF; }
.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-brand-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.05;
  color: var(--pp-text);
  white-space: nowrap;
}
.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: transform var(--pp-dur) var(--pp-ease);
}
.pp-menu-btn:hover, .pp-menu-btn:focus-visible { transform: translateY(-4px); }
.pp-menu-btn:active { transform: translateY(-1px); }

/* 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(214,41,62,.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-top .navbar-brand-item { max-height: 40px; width: auto; }
.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-crimson-bright); }
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; } }

/* GSAP-driven service cards: hidden initial state, animated in via the
   fadeSlideTo effect. Reduced-motion shows them immediately (no animation). */
.pp-svc-card { opacity:0; transform: translateY(40px); }
@media (prefers-reduced-motion: reduce) { .pp-svc-card { opacity:1; transform:none; } }

/* SplitText word-reveal targets: container hidden until GSAP splits & reveals
   (prevents a flash of the un-split heading). Reduced-motion / no-JS shows them. */
[data-reveal-words] { opacity:0; }
@media (prefers-reduced-motion: reduce) { [data-reveal-words] { opacity:1; } }

/* ScrollSmoother active (body.pp-smooth, added by JS on desktop): the Sticky.js
   header pin (position:fixed) breaks inside the transformed content, so neutralize
   it — the header just scrolls away smoothly with the page. */
body.pp-smooth .navbar-sticky-on { position: static !important; box-shadow: none !important; }
body.pp-smooth #sticky-space { display: none !important; height: 0 !important; }

/* ---------- 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: #d6293e; --bs-btn-hover-border-color:#d6293e;
  --bs-btn-active-color: var(--c-ink); --bs-btn-active-bg:#d6293e; --bs-btn-active-border-color:#d6293e;
  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;
  /* flat black sky (gradient removed) */
  background: #000;
}
/* hairline gold rule along the very top of the hero — removed (divider between header and hero) */
.pp-hero::before { display: none; }

/* ---- 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(214,41,62,.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;
}
/* glow layer removed (gradient deleted) */
.pp-hero-glow { display: none; }
/* 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(0,0,0,.82) 0%, rgba(0,0,0,.55) 46%, rgba(0,0,0,.18) 78%, transparent 100%),
    linear-gradient(180deg, transparent 50%, rgba(0,0,0,.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); }
/* Hero eyebrow text follows the theme: near-black on light bg, near-white on dark bg (gold bar kept) */
.pp-hero .pp-eyebrow { color: var(--pp-text); }

/* 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(214,41,62,.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; }
}

/* ---------- 23b. LIGHT THEME — flip ink bands & hero to light ----------
   .pp-ink-section and .pp-hero are deliberately dark in the default
   (dark) theme. On the light theme they must read as light surfaces.
   We re-scope the on-ink tokens INSIDE these sections so every rule —
   AND every inline style in the templates that reads var(--pp-on-ink)
   / var(--c-on-ink) — flips automatically, instead of staying white
   text on a now-light background. 'auto' is aliased to light. */
[data-bs-theme=light] .pp-ink-section,
[data-bs-theme=auto]  .pp-ink-section {
  --pp-ink:          var(--pp-surface);
  --pp-on-ink:       var(--pp-text);
  --pp-on-ink-muted: var(--pp-muted);
  --c-on-ink:        var(--pp-text);
  background: var(--pp-surface);
  color: var(--pp-text);
}

[data-bs-theme=light] .pp-hero,
[data-bs-theme=auto]  .pp-hero {
  --c-on-ink:        var(--pp-text);
  --pp-on-ink:       var(--pp-text);
  --pp-on-ink-muted: var(--pp-muted);
  color: var(--pp-text);
  background: var(--pp-bg);
}
/* dim the white star-field (invisible / noisy on a light sky) */
[data-bs-theme=light] .pp-hero-sky,
[data-bs-theme=auto]  .pp-hero-sky { opacity: .25; }
/* legibility wash from the left for the dark copy, instead of the dark scrim */
[data-bs-theme=light] .pp-hero-overlay,
[data-bs-theme=auto]  .pp-hero-overlay {
  background:
    linear-gradient(90deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.32) 46%, transparent 78%);
}
/* the inline trust-strip divider is a near-white hairline (dark-theme); darken it */
[data-bs-theme=light] .pp-hero-trust,
[data-bs-theme=auto]  .pp-hero-trust { border-top-color: var(--pp-line) !important; }

/* ---------- 23c. Theme-aware hero portrait swap ----------
   Dark theme → Fuadik_C.jpg · Light theme → fuadik.jpg
   Exactly ONE portrait is ever visible. Both variants are governed by
   !important so no other rule (incl. responsive `img` defaults) can leak
   the hidden one — without this, both portraits showed at once on mobile. */
/* Default / dark theme: show dark, hide light */
.pp-hero-figure .pp-hero-img-dark  { display: block !important; }
.pp-hero-figure .pp-hero-img-light { display: none  !important; }
/* Light (and legacy 'auto') theme: show light, hide dark */
[data-bs-theme=light] .pp-hero-figure .pp-hero-img-light,
[data-bs-theme=auto]  .pp-hero-figure .pp-hero-img-light { display: block !important; }
[data-bs-theme=light] .pp-hero-figure .pp-hero-img-dark,
[data-bs-theme=auto]  .pp-hero-figure .pp-hero-img-dark  { display: 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; }

/* ---------- 23. Buttons → outline-only, theme-aware ----------
   No background fill on any .btn variant. Border + text follow the theme:
   black border/text on light bg, white border/text on dark bg.
   Hover does NOT change colour — the button simply lifts up a little.
   The segmented font-size control keeps its own hover (lift cancelled below). */
.btn {
  --bs-btn-bg: transparent;
  --bs-btn-color: var(--pp-text);
  --bs-btn-border-color: var(--pp-text);
  /* hover / active keep the resting colours — no fill change */
  --bs-btn-hover-bg: transparent;
  --bs-btn-hover-color: var(--pp-text);
  --bs-btn-hover-border-color: var(--pp-text);
  --bs-btn-active-bg: transparent;
  --bs-btn-active-color: var(--pp-text);
  --bs-btn-active-border-color: var(--pp-text);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-color: var(--pp-muted);
  --bs-btn-disabled-border-color: var(--pp-muted);
  border-width: 1px;
  transition: transform var(--pp-dur) var(--pp-ease),
              border-color var(--pp-dur) var(--pp-ease),
              color var(--pp-dur) var(--pp-ease);
}
/* Lift on hover/focus instead of changing colour */
.btn:hover, .btn:focus-visible { transform: translateY(-4px); }
.btn:active { transform: translateY(-1px); }
/* Keep text-only link buttons borderless */
.btn-link { --bs-btn-border-color: transparent; }
/* Segmented font-size control keeps its own colour hover — don't lift its segments */
.pp-fontsize .btn:hover, .pp-fontsize .btn:focus-visible, .pp-fontsize .btn:active { transform: none; }

/* ---------- 24. Booking consultation card ---------- */
.pp-booking-card {
  position: relative;
  border: 1px solid var(--pp-line);
  background: var(--pp-bg);
  box-shadow: var(--pp-shadow);
}
/* corner plus-marks (decorative) */
.pp-booking-mark {
  position: absolute; width: 1.4rem; height: 1.4rem;
  display: flex; align-items: center; justify-content: center;
  color: var(--pp-accent); font-size: 1.4rem; line-height: 1;
  pointer-events: none;
}
.pp-booking-mark.tl { top: -.7rem; left: -.7rem; }
.pp-booking-mark.tr { top: -.7rem; right: -.7rem; }
.pp-booking-mark.bl { bottom: -.7rem; left: -.7rem; }
.pp-booking-mark.br { bottom: -.7rem; right: -.7rem; }

.pp-booking-info { padding: clamp(1.5rem, 4vw, 2.75rem); }
.pp-booking-form { padding: clamp(1.5rem, 4vw, 2.75rem); background: var(--pp-surface); border-top: 1px solid var(--pp-line); }
@media (min-width: 992px) {
  .pp-booking-form { border-top: 0; border-left: 1px solid var(--pp-line); }
}

.pp-booking-contact { display: grid; gap: .75rem; margin-top: 1.75rem; }
.pp-booking-contact a, .pp-booking-contact div.pp-bc-row {
  display: flex; align-items: center; gap: .75rem;
  color: var(--pp-text); text-decoration: none;
}
.pp-booking-contact a:hover { color: var(--pp-accent); }
.pp-booking-contact .pp-bc-ic {
  flex: none; width: 2.5rem; height: 2.5rem;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--pp-line); color: var(--pp-accent);
}
.pp-booking-contact .pp-bc-label { font-weight: 600; font-size: .9rem; }
.pp-booking-contact .pp-bc-value { color: var(--pp-muted); font-size: .82rem; }

/* time slot buttons */
#slots .slot-btn { border-radius: 0; }
#slots .slot-btn.active { color: #fff; }
.pp-booking-field-error { color: var(--pp-accent); font-size: .8rem; margin-top: .3rem; }

/* ---------- 25. Language switcher (AZ / RU / EN) ---------- */
.pp-lang-switch { display: inline-flex; gap: .1rem; align-items: center; }
.pp-lang-switch .pp-lang {
  border: 0; background: transparent; padding: .18rem .42rem;
  font-family: var(--font-body); font-weight: 600; font-size: .72rem; letter-spacing: .08em;
  color: var(--pp-muted); cursor: pointer; line-height: 1;
  transition: color var(--pp-dur) var(--pp-ease);
}
.pp-lang-switch .pp-lang:hover { color: var(--pp-accent); }
.pp-lang-switch .pp-lang.is-active { color: var(--pp-accent); text-decoration: underline; text-underline-offset: 3px; }
.pp-lang-switch .pp-lang:focus-visible { outline: 2px solid var(--pp-accent); outline-offset: 2px; }