/* ==========================================================================
   Safe Law Chambers — Core Stylesheet
   Palette: Navy #0F2545 / Deep Navy #0A1B33 / Gold #C9A24B / Ivory #FAF6EE
   ========================================================================== */

/* Registered so browsers that support @property tween the heartbeat scale
   smoothly between keyframe steps; unsupported browsers just fall back to
   the last-set value instead of animating, which is harmless. */
@property --pulse {
  syntax: '<number>';
  inherits: false;
  initial-value: 1;
}

:root {
  --navy-950: #0a1526;
  --navy-900: #0d1f3a;
  --navy-800: #0f2545;
  --navy-700: #163158;
  --navy-600: #1f4270;
  --navy-100: #dfe6ef;
  --gold-600: #b8933f;
  --gold-500: #c9a24b;
  --gold-400: #d9b968;
  --gold-300: #e8cd8c;
  --ivory-100: #faf6ee;
  --ivory-200: #f3ecdb;
  --cream: #fbf9f4;
  --white: #ffffff;
  --ink: #1a2130;
  --ink-soft: #4a5566;
  --ink-faint: #7c8798;
  --border-soft: rgba(15, 37, 69, 0.1);
  --shadow-sm: 0 2px 10px rgba(10, 21, 38, 0.06);
  --shadow-md: 0 10px 30px rgba(10, 21, 38, 0.1);
  --shadow-lg: 0 20px 60px rgba(10, 21, 38, 0.16);
  --shadow-gold: 0 10px 30px rgba(201, 162, 75, 0.25);

  --font-serif: "Playfair Display", "Georgia", serif;
  --font-sans: "Jost", "Segoe UI", Arial, sans-serif;
  --font-devanagari: "Tiro Devanagari Hindi", "Noto Serif Devanagari", serif;

  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 26px;

  --ease: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Base ---------- */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  color: var(--ink);
  background-color: var(--cream);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  color: var(--navy-800);
  font-weight: 700;
  letter-spacing: 0.2px;
}

p {
  color: var(--ink-soft);
  line-height: 1.8;
}

a {
  text-decoration: none;
  color: inherit;
  transition: color 0.25s var(--ease);
}

img {
  max-width: 100%;
  display: block;
}

.container-xl {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
}

::selection {
  background: var(--gold-400);
  color: var(--navy-900);
}

/* ---------- Utility text ---------- */
.text-gold { color: var(--gold-500) !important; }
.text-navy { color: var(--navy-800) !important; }
.bg-navy { background-color: var(--navy-800) !important; }
.bg-ivory { background-color: var(--ivory-200) !important; }
.bg-cream { background-color: var(--cream) !important; }

.eyebrow {
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 4px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--gold-600);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.eyebrow::before {
  content: "";
  width: 34px;
  height: 1px;
  background: var(--gold-500);
  display: inline-block;
}

.eyebrow.center {
  justify-content: center;
}

.section-title {
  font-size: clamp(2rem, 3.2vw, 2.85rem);
  margin-bottom: 18px;
  line-height: 1.2;
}

.section-lead {
  font-size: 1.08rem;
  max-width: 640px;
  margin-bottom: 0;
}

.section-pad {
  padding: 110px 0;
}

@media (max-width: 767.98px) {
  .section-pad { padding: 70px 0; }
}

.divider-gold {
  width: 70px;
  height: 3px;
  background: linear-gradient(90deg, var(--gold-500), var(--gold-300));
  border-radius: 2px;
}

/* ---------- Buttons ---------- */
.btn {
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: 0.6px;
  border-radius: 999px;
  padding: 14px 34px;
  font-size: 0.92rem;
  transition: all 0.35s var(--ease);
  border: 1px solid transparent;
}

.btn-gold {
  background: linear-gradient(135deg, var(--gold-400), var(--gold-600));
  color: var(--navy-900);
  box-shadow: var(--shadow-gold);
}

.btn-gold:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(201, 162, 75, 0.38);
  color: var(--navy-950);
}

.btn-outline-light-gold {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.5);
  color: var(--white);
}

.btn-outline-light-gold:hover {
  background: var(--white);
  color: var(--navy-900);
  transform: translateY(-3px);
}

.btn-outline-navy {
  background: transparent;
  border-color: var(--navy-800);
  color: var(--navy-800);
}

.btn-outline-navy:hover {
  background: var(--navy-800);
  color: var(--white);
  transform: translateY(-3px);
}

.btn-sm-pill {
  padding: 10px 24px;
  font-size: 0.82rem;
}

/* ---------- Preloader ---------- */
#preloader {
  position: fixed;
  inset: 0;
  background: var(--navy-900);
  z-index: 12000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.6s var(--ease), visibility 0.6s var(--ease);
}

#preloader.loaded {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.preloader-mark {
  width: 64px;
  height: 64px;
  animation: pulseMark 1.6s ease-in-out infinite;
}

@keyframes pulseMark {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.12); opacity: 0.7; }
}

/* ---------- Disclaimer Modal ---------- */
.disclaimer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 21, 38, 0.88);
  backdrop-filter: blur(6px);
  z-index: 11000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s var(--ease), visibility 0.5s var(--ease);
}

.disclaimer-overlay.show {
  opacity: 1;
  visibility: visible;
}

.disclaimer-card {
  background: var(--ivory-100);
  max-width: 620px;
  width: 100%;
  border-radius: var(--radius-lg);
  padding: 52px 44px;
  text-align: center;
  position: relative;
  border: 1px solid var(--gold-300);
  transform: translateY(30px) scale(0.96);
  opacity: 0;
  transition: all 0.55s var(--ease-out) 0.15s;
  max-height: 88vh;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.disclaimer-card::-webkit-scrollbar {
  display: none;
}

.disclaimer-overlay.show .disclaimer-card {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.disclaimer-card .mark-wrap {
  width: 56px;
  height: 56px;
  margin: 0 auto 22px;
}

.disclaimer-card h4 {
  font-size: 1.5rem;
  margin-bottom: 6px;
}

.disclaimer-card .sub {
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 0.72rem;
  color: var(--gold-600);
  font-weight: 600;
  margin-bottom: 26px;
}

.disclaimer-card p {
  font-size: 0.95rem;
  text-align: left;
  color: var(--ink-soft);
}

.disclaimer-card ul {
  font-size: 0.95rem;
  text-align: left;
  color: var(--ink-soft);
  padding-left: 20px;
  margin-bottom: 1rem;
}

.disclaimer-card ul li {
  margin-bottom: 10px;
}

.disclaimer-card ul li:last-child {
  margin-bottom: 0;
}

.disclaimer-card .btn {
  margin-top: 10px;
}

/* ---------- Form Response Modal ---------- */
.form-response-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 21, 38, 0.88);
  backdrop-filter: blur(6px);
  z-index: 11500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--ease), visibility 0.4s var(--ease);
}

.form-response-overlay.show {
  opacity: 1;
  visibility: visible;
}

.form-response-card {
  background: var(--ivory-100);
  max-width: 460px;
  width: 100%;
  border-radius: var(--radius-lg);
  padding: 48px 40px 40px;
  text-align: center;
  position: relative;
  border: 1px solid var(--gold-300);
  transform: translateY(30px) scale(0.96);
  opacity: 0;
  transition: all 0.45s var(--ease-out) 0.1s;
  max-height: 88vh;
  overflow-y: auto;
}

.form-response-overlay.show .form-response-card {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.form-response-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-soft);
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s var(--ease);
}

.form-response-close:hover {
  background: rgba(10, 21, 38, 0.06);
  color: var(--ink);
}

.form-response-card .mark-wrap {
  width: 48px;
  height: 48px;
  margin: 0 auto 14px;
}

.form-response-icon {
  font-size: 2.4rem;
  margin-bottom: 6px;
  color: #2e9e5b;
}

.form-response-overlay.is-error .form-response-icon {
  color: #dc3545;
}

.form-response-card h4 {
  font-size: 1.3rem;
  margin-bottom: 10px;
}

.form-response-card p {
  font-size: 0.95rem;
  color: var(--ink-soft);
  margin-bottom: 0;
}

/* ---------- Cookie Consent ---------- */
#cookieBar {
  position: fixed;
  left: 18px;
  right: 18px;
  bottom: 18px;
  max-width: 980px;
  margin: 0 auto;
  background: var(--navy-900);
  color: var(--ivory-100);
  border-radius: var(--radius-md);
  padding: 20px 26px;
  z-index: 10500;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  justify-content: space-between;
  border: 1px solid rgba(201, 162, 75, 0.25);
  transform: translateY(140%);
  transition: transform 0.6s var(--ease-out);
}

#cookieBar.show {
  transform: translateY(0);
}

#cookieBar p {
  color: rgba(250, 246, 238, 0.82);
  margin: 0;
  font-size: 0.88rem;
  max-width: 640px;
}

#cookieBar strong {
  color: var(--gold-400);
}

.cookie-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

/* ---------- Navbar ---------- */
.slc-navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9000;
  padding: 22px 0;
  background: transparent;
  transition: top 0.5s var(--ease), padding 0.5s var(--ease);
}

.slc-navbar .container-xl {
  transition: max-width 0.5s var(--ease), background 0.5s var(--ease),
    border-radius 0.5s var(--ease), padding 0.5s var(--ease),
    box-shadow 0.5s var(--ease), border-color 0.5s var(--ease);
  border-radius: 999px;
  border: 1px solid transparent;
  padding-top: 0;
  padding-bottom: 0;
}

.slc-navbar.is-scrolled {
  top: 16px;
  padding: 0;
}

.slc-navbar.is-scrolled .container-xl {
  max-width: 1080px;
  background: rgba(10, 21, 38, 0.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-color: rgba(201, 162, 75, 0.18);
  border-radius: 999px;
  padding: 10px 14px 10px 26px;
  box-shadow: 0 14px 40px rgba(5, 12, 26, 0.35);
}

@media (max-width: 991.98px) {
  .slc-navbar.is-scrolled {
    top: 10px;
  }
  .slc-navbar.is-scrolled .container-xl {
    max-width: calc(100% - 24px);
    border-radius: 26px;
    padding: 10px 18px;
  }
}

.slc-navbar .navbar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-mark {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.brand-text .b-main {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--white);
  letter-spacing: 0.5px;
}

.brand-text .b-sub {
  font-size: 0.6rem;
  letter-spacing: 3px;
  color: var(--gold-400);
  text-transform: uppercase;
  font-weight: 600;
}

.slc-navbar .nav-link {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.2px;
  padding: 10px 13px !important;
  white-space: nowrap;
  position: relative;
}

.slc-navbar .nav-link.active,
.slc-navbar .nav-link:hover {
  color: var(--gold-400);
}

.slc-navbar .btn-gold {
  padding: 10px 22px;
  font-size: 0.8rem;
  white-space: nowrap;
  flex-shrink: 0;
}

@media (min-width: 992px) and (max-width: 1200px) {
  .slc-navbar .nav-link {
    padding: 10px 9px !important;
    font-size: 0.8rem;
  }
  .slc-navbar .btn-gold {
    padding: 9px 16px;
    font-size: 0.76rem;
  }
}

.navbar-toggler {
  border: none;
  padding: 6px;
}

.navbar-toggler:focus {
  box-shadow: none;
}

.navbar-toggler .line {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--white);
  margin: 5px 0;
  transition: all 0.3s var(--ease);
}

@media (max-width: 991.98px) {
  .slc-navbar .navbar-collapse {
    margin-top: 18px;
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 14px;
  }

  /* Menu needs its own backing when open, since the capsule background
     otherwise only appears once the page has scrolled past the hero. */
  .slc-navbar:has(.navbar-collapse.show) .container-xl {
    background: rgba(10, 21, 38, 0.97);
    border-radius: 26px;
    padding: 14px 18px;
  }
}

/* ---------- Page Header (inner pages) ---------- */
.page-header {
  position: relative;
  padding: 190px 0 110px;
  background: linear-gradient(160deg, var(--navy-950), var(--navy-800) 60%, var(--navy-700));
  overflow: hidden;
  text-align: center;
}

.page-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 15% 20%, rgba(201,162,75,0.14), transparent 40%),
    radial-gradient(circle at 85% 80%, rgba(201,162,75,0.1), transparent 45%);
}

.page-header .pattern-col {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 120px;
  opacity: 0.06;
  background-image: repeating-linear-gradient(115deg, var(--gold-400) 0 2px, transparent 2px 26px);
}
.page-header .pattern-col.left { left: -20px; }
.page-header .pattern-col.right { right: -20px; }

.page-header .content {
  position: relative;
  z-index: 2;
}

.page-header h1 {
  color: var(--white);
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  margin-bottom: 16px;
}

.breadcrumb-slc {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  color: rgba(255,255,255,0.6);
  font-size: 0.85rem;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.breadcrumb-slc a { color: rgba(255,255,255,0.6); }
.breadcrumb-slc a:hover { color: var(--gold-400); }
.breadcrumb-slc .sep { color: var(--gold-500); }
.breadcrumb-slc .current { color: var(--gold-400); }

/* ---------- Hero (Home) ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: linear-gradient(160deg, var(--navy-950) 0%, var(--navy-800) 55%, var(--navy-700) 100%);
  overflow: hidden;
  padding-top: 120px;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(ellipse at 20% 10%, rgba(201,162,75,0.16), transparent 45%),
    radial-gradient(ellipse at 90% 90%, rgba(201,162,75,0.12), transparent 50%);
  z-index: 0;
}

.hero-columns {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.05;
  background-image: repeating-linear-gradient(90deg, var(--gold-300) 0 2px, transparent 2px 90px);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
}

.hero-side-art {
  position: absolute;
  top: 0;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  opacity: 0.55;
  pointer-events: none;
  user-select: none;
}

.hero-side-art-left {
  left: 0;
  width: 32%;
  object-position: left center;
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0.9) 55%, transparent 100%);
  mask-image: linear-gradient(90deg, rgba(0,0,0,0.9) 55%, transparent 100%);
}

.hero-side-art-right {
  top: auto;
  bottom: 0;
  right: 0;
  height: auto;
  width: 34%;
  max-height: 62%;
  object-fit: contain;
  object-position: bottom right;
  opacity: 0.5;
  filter: saturate(0.75) brightness(0.85);
}

@media (max-width: 991.98px) {
  .hero-side-art { display: none; }
}

.hero-particles {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.hero-particles span {
  position: absolute;
  border-radius: 50%;
  background: var(--gold-400);
  box-shadow: 0 0 6px 1px rgba(201, 162, 75, 0.7);
  opacity: 0;
  animation-name: particleTwinkle;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

@keyframes particleTwinkle {
  0%, 100% { opacity: 0; transform: translateY(0) scale(0.8); }
  50% { opacity: var(--op, 0.6); transform: translateY(-14px) scale(1); }
}

.hero-particles span:nth-child(1) { left: 62.1%; top: 8.2%; width: 2.8px; height: 2.8px; animation-delay: 1.79s; animation-duration: 9.42s; --op: 0.67; }
.hero-particles span:nth-child(2) { left: 85.9%; top: 13.5%; width: 3.3px; height: 3.3px; animation-delay: 0.24s; animation-duration: 6.31s; --op: 0.58; }
.hero-particles span:nth-child(3) { left: 4.5%; top: 23.1%; width: 3.9px; height: 3.9px; animation-delay: 4.36s; animation-duration: 6.32s; --op: 0.62; }
.hero-particles span:nth-child(4) { left: 78.1%; top: 6.6%; width: 4.4px; height: 4.4px; animation-delay: 5.59s; animation-duration: 7.04s; --op: 0.39; }
.hero-particles span:nth-child(5) { left: 92.0%; top: 34.9%; width: 2.3px; height: 2.3px; animation-delay: 0.77s; animation-duration: 10.08s; --op: 0.63; }
.hero-particles span:nth-child(6) { left: 77.9%; top: 68.8%; width: 3.6px; height: 3.6px; animation-delay: 7.78s; animation-duration: 7.27s; --op: 0.6; }
.hero-particles span:nth-child(7) { left: 80.0%; top: 59.2%; width: 4.6px; height: 4.6px; animation-delay: 4.62s; animation-duration: 9.23s; --op: 0.33; }
.hero-particles span:nth-child(8) { left: 23.4%; top: 30.9%; width: 2.2px; height: 2.2px; animation-delay: 1.86s; animation-duration: 5.61s; --op: 0.45; }
.hero-particles span:nth-child(9) { left: 61.8%; top: 37.4%; width: 3.1px; height: 3.1px; animation-delay: 1.68s; animation-duration: 6.6s; --op: 0.82; }
.hero-particles span:nth-child(10) { left: 62.9%; top: 58.4%; width: 2.5px; height: 2.5px; animation-delay: 5.83s; animation-duration: 5.98s; --op: 0.51; }
.hero-particles span:nth-child(11) { left: 95.0%; top: 61.0%; width: 3.7px; height: 3.7px; animation-delay: 5.48s; animation-duration: 10.06s; --op: 0.73; }
.hero-particles span:nth-child(12) { left: 23.5%; top: 8.8%; width: 2.9px; height: 2.9px; animation-delay: 2.14s; animation-duration: 6.27s; --op: 0.82; }
.hero-particles span:nth-child(13) { left: 84.4%; top: 33.1%; width: 4.0px; height: 4.0px; animation-delay: 3.17s; animation-duration: 10.49s; --op: 0.55; }
.hero-particles span:nth-child(14) { left: 26.9%; top: 27.2%; width: 3.7px; height: 3.7px; animation-delay: 2.1s; animation-duration: 8.51s; --op: 0.79; }
.hero-particles span:nth-child(15) { left: 39.5%; top: 24.9%; width: 5.0px; height: 5.0px; animation-delay: 4.08s; animation-duration: 5.55s; --op: 0.33; }
.hero-particles span:nth-child(16) { left: 12.3%; top: 60.0%; width: 4.4px; height: 4.4px; animation-delay: 3.38s; animation-duration: 5.38s; --op: 0.51; }
.hero-particles span:nth-child(17) { left: 95.6%; top: 51.5%; width: 4.9px; height: 4.9px; animation-delay: 6.89s; animation-duration: 5.07s; --op: 0.7; }
.hero-particles span:nth-child(18) { left: 66.1%; top: 52.2%; width: 2.8px; height: 2.8px; animation-delay: 5.13s; animation-duration: 5.67s; --op: 0.54; }
.hero-particles span:nth-child(19) { left: 44.7%; top: 88.0%; width: 4.6px; height: 4.6px; animation-delay: 2.11s; animation-duration: 8.0s; --op: 0.4; }
.hero-particles span:nth-child(20) { left: 87.8%; top: 80.9%; width: 2.9px; height: 2.9px; animation-delay: 5.11s; animation-duration: 8.65s; --op: 0.38; }
.hero-particles span:nth-child(21) { left: 73.7%; top: 52.4%; width: 4.3px; height: 4.3px; animation-delay: 4.24s; animation-duration: 5.0s; --op: 0.48; }
.hero-particles span:nth-child(22) { left: 3.8%; top: 85.9%; width: 4.6px; height: 4.6px; animation-delay: 6.65s; animation-duration: 6.85s; --op: 0.33; }
.hero-particles span:nth-child(23) { left: 84.5%; top: 87.4%; width: 2.3px; height: 2.3px; animation-delay: 3.89s; animation-duration: 5.42s; --op: 0.72; }
.hero-particles span:nth-child(24) { left: 74.0%; top: 17.0%; width: 3.4px; height: 3.4px; animation-delay: 4.4s; animation-duration: 6.59s; --op: 0.78; }
.hero-particles span:nth-child(25) { left: 41.8%; top: 24.2%; width: 3.6px; height: 3.6px; animation-delay: 5.84s; animation-duration: 6.21s; --op: 0.47; }
.hero-particles span:nth-child(26) { left: 95.5%; top: 61.9%; width: 3.3px; height: 3.3px; animation-delay: 4.14s; animation-duration: 5.73s; --op: 0.42; }

.hero .content {
  position: relative;
  z-index: 2;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(201, 162, 75, 0.12);
  border: 1px solid rgba(201, 162, 75, 0.35);
  color: var(--gold-400);
  padding: 8px 20px;
  border-radius: 999px;
  font-size: 0.78rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 28px;
}

.hero h1 {
  color: var(--white);
  font-size: clamp(2.6rem, 5.6vw, 4.4rem);
  line-height: 1.12;
  margin-bottom: 26px;
}

.hero h1 em {
  font-style: italic;
  color: var(--gold-400);
}

.hero p.lead {
  color: rgba(255,255,255,0.75);
  font-size: 1.15rem;
  max-width: 540px;
  margin-bottom: 40px;
}

.hero-cta {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 60px;
}

.hero-stats {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
}

.hero-stats .stat h3 {
  color: var(--gold-400);
  font-size: 2.2rem;
  margin-bottom: 2px;
}

.hero-stats .stat span {
  color: rgba(255,255,255,0.6);
  font-size: 0.8rem;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.hero-visual {
  position: relative;
  z-index: 2;
}

.hero-photo-frame {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(201,162,75,0.3);
}

.hero-photo-frame img {
  width: 100%;
  height: 560px;
  object-fit: cover;
}

/* ---------- Hero Duo (two directors, distinct individual profiles) ---------- */
.hero-duo-layout .hero-cta {
  margin-bottom: 44px;
}

.hero-directors-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 44px;
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--white);
  font-family: var(--font-serif);
  font-size: 1.02rem;
  font-style: italic;
  opacity: 0;
  animation: fadeInUp 0.8s var(--ease-out) 1.3s forwards;
}

.hero-directors-link i {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--gold-500);
  color: var(--gold-400);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-style: normal;
  font-size: 0.95rem;
  transition: all 0.3s var(--ease);
}

.hero-directors-link:hover i {
  background: var(--gold-500);
  color: var(--navy-900);
  transform: rotate(45deg);
}

.hero-directors-link:hover {
  color: var(--gold-400);
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Hero emblem wall — motto as the headline, crest as a faint backdrop ---------- */
.hero-emblem-wall {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 560px;
  overflow: visible;
  text-align: center;
}

.hero-emblem-wall-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 560px;
  height: 560px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(201, 162, 75, 0.14) 0%, transparent 62%);
  animation: wallGlowPulse 5.2s ease-in-out infinite 1.4s;
  pointer-events: none;
}

@keyframes wallGlowPulse {
  0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(0.97); }
  50% { opacity: 0.85; transform: translate(-50%, -50%) scale(1.02); }
}

/* Crest sits centred behind the motto text, faint, slow double-thump heartbeat */
.hero-emblem-wall-mark {
  --pulse: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(460px, 72%);
  height: auto;
  transform: translate(-50%, -50%) scale(var(--pulse));
  opacity: 0;
  animation: wallCrestIn 1.1s var(--ease-out) 0.5s forwards, heartbeat 5.2s ease-in-out infinite 1.9s;
  will-change: transform;
}

@keyframes wallCrestIn {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.94); }
  to { opacity: 0.22; transform: translate(-50%, -50%) scale(1); }
}

/*
  A real heartbeat: two sharp beats close together, then a long rest — not a
  smooth sine "breathing" loop. Held mostly at rest (1) with brief spikes.
*/
@keyframes heartbeat {
  0%, 100% { --pulse: 1; }
  4% { --pulse: 1.07; }
  8% { --pulse: 1; }
  12% { --pulse: 1.1; }
  18% { --pulse: 1; }
  /* long rest until the next beat */
}

/* Motto — the section's headline, same scale as the hero h1 */
.hero-emblem-motto {
  position: relative;
  z-index: 2;
  max-width: 620px;
  padding: 0 20px;
}

.hero-emblem-motto-text {
  margin: 0;
  font-family: var(--font-devanagari);
  font-size: clamp(2.6rem, 5.6vw, 4.4rem);
  line-height: 1.15;
  color: var(--gold-300);
  text-shadow: 0 4px 30px rgba(5, 12, 26, 0.7);
  opacity: 0;
  animation: fadeInUp 0.9s var(--ease-out) 1.1s forwards;
}

.hero-emblem-motto-text::after {
  content: "";
  display: inline-block;
  width: 3px;
  height: 0.85em;
  margin-left: 6px;
  background: var(--gold-400);
  vertical-align: -0.1em;
  animation: mottoCursorBlink 0.8s steps(1) infinite;
}

@keyframes mottoCursorBlink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.hero-emblem-motto-translation {
  display: block;
  margin-top: 20px;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(250, 246, 238, 0.55);
  opacity: 0;
  animation: fadeInUp 0.9s var(--ease-out) 1.3s forwards;
}

@media (max-width: 1199.98px) {
  .hero-emblem-wall { min-height: 460px; }
  .hero-emblem-wall-mark { width: min(380px, 68%); }
}

@media (max-width: 991.98px) {
  .hero-emblem-wall { min-height: 400px; }
  .hero-emblem-wall-mark { width: min(320px, 64%); }
  .hero-emblem-motto-translation { font-size: 0.75rem; }
}

@media (max-width: 767.98px) {
  .hero-emblem-wall { min-height: 320px; padding: 20px 0; }
  .hero-emblem-wall-mark { width: min(260px, 62%); }
  .hero-emblem-motto-translation { margin-top: 14px; font-size: 0.68rem; letter-spacing: 1.5px; }
}

@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

.scroll-cue {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  color: rgba(255,255,255,0.55);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 0.7rem;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.scroll-cue .line {
  width: 1px;
  height: 34px;
  background: linear-gradient(var(--gold-400), transparent);
  animation: scrollLine 2s ease-in-out infinite;
}

@keyframes scrollLine {
  0% { transform: scaleY(0); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
  51% { transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ---------- Marquee (clients strip) ---------- */
.marquee-strip {
  background: var(--navy-900);
  padding: 34px 0;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}

.marquee-strip::before,
.marquee-strip::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 90px;
  z-index: 2;
}
.marquee-strip::before { left: 0; background: linear-gradient(90deg, var(--navy-900), transparent); }
.marquee-strip::after { right: 0; background: linear-gradient(270deg, var(--navy-900), transparent); }

.marquee-track {
  display: inline-flex;
  gap: 70px;
  animation: marqueeScroll 26s linear infinite;
}

@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.marquee-track span {
  color: rgba(255,255,255,0.4);
  font-family: var(--font-serif);
  font-size: 1.3rem;
  letter-spacing: 1px;
  display: inline-flex;
  align-items: center;
  gap: 70px;
}

.marquee-track span i {
  color: var(--gold-500);
  font-size: 0.5rem;
}

/* ---------- About Section ---------- */
.about-image-stack {
  position: relative;
  margin-right: 30px;
  margin-bottom: 30px;
}

@media (max-width: 991.98px) {
  .about-image-stack {
    margin-right: 0;
    margin-bottom: 40px;
  }
}

.about-image-stack .img-main {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.about-image-stack .img-main img {
  height: 480px;
  width: 100%;
  object-fit: cover;
}

.about-image-stack .img-badge {
  position: absolute;
  bottom: -30px;
  right: -30px;
  background: var(--navy-800);
  color: var(--white);
  border-radius: var(--radius-md);
  padding: 26px;
  width: 190px;
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(201,162,75,0.25);
}

.about-image-stack .img-badge .num {
  font-family: var(--font-serif);
  font-size: 2.4rem;
  color: var(--gold-400);
  line-height: 1;
  margin-bottom: 8px;
}

.about-image-stack .img-badge .lbl {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.5px;
}

.about-points {
  list-style: none;
  padding: 0;
  margin: 30px 0;
}

.about-points li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 18px;
}

.about-points .chk {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(201,162,75,0.14);
  color: var(--gold-600);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.85rem;
}

.about-points strong {
  display: block;
  color: var(--navy-800);
  font-size: 1rem;
  margin-bottom: 2px;
}

.about-points p {
  margin: 0;
  font-size: 0.9rem;
}

.signature-block {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 34px;
  padding-top: 30px;
  border-top: 1px solid var(--border-soft);
}

.signature-block .sig-name {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.6rem;
  color: var(--navy-800);
}

.signature-block .sig-role {
  font-size: 0.78rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ---------- Practice / Expertise Cards ---------- */
.practice-card {
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 42px 32px;
  height: 100%;
  position: relative;
  border: 1px solid var(--border-soft);
  transition: all 0.4s var(--ease);
  overflow: hidden;
}

.practice-card::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold-400), var(--gold-600));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--ease);
}

.practice-card:hover {
  transform: translateY(-10px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}

.practice-card:hover::after {
  transform: scaleX(1);
}

.practice-card .num-tag {
  position: absolute;
  top: 28px;
  right: 30px;
  font-family: var(--font-serif);
  font-size: 2.4rem;
  color: var(--ivory-200);
  font-weight: 700;
  transition: color 0.4s var(--ease);
}

.practice-card:hover .num-tag {
  color: var(--gold-300);
}

.practice-card .icon-wrap {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: var(--navy-800);
  color: var(--gold-400);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  margin-bottom: 26px;
  transition: all 0.4s var(--ease);
}

.practice-card:hover .icon-wrap {
  background: linear-gradient(135deg, var(--gold-400), var(--gold-600));
  color: var(--navy-900);
  transform: rotate(-8deg) scale(1.05);
}

.practice-icon-svg {
  width: 38px;
  height: 38px;
}

.practice-card h4 {
  font-size: 1.2rem;
  margin-bottom: 14px;
}

.practice-card p {
  font-size: 0.92rem;
  margin-bottom: 18px;
}

.practice-card .card-link {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--navy-800);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
}

.practice-card .card-link i {
  transition: transform 0.3s var(--ease);
}

.practice-card:hover .card-link {
  color: var(--gold-600);
}

.practice-card:hover .card-link i {
  transform: translateX(6px);
}

/* ---------- Why Us / Stats band ---------- */
.stats-band {
  background: var(--navy-800);
  position: relative;
  overflow: hidden;
}

.stats-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 80% 20%, rgba(201,162,75,0.15), transparent 45%);
}

.stat-item {
  text-align: center;
  position: relative;
  z-index: 2;
  padding: 20px;
}

.stat-item h2 {
  color: var(--gold-400);
  font-size: 3rem;
  margin-bottom: 6px;
}

.stat-item h2 span { color: var(--gold-400); }

.stat-item p {
  color: rgba(255,255,255,0.65);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 0.78rem;
  margin: 0;
}

/* ---------- Team ---------- */
.team-card {
  background: var(--white);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: all 0.4s var(--ease);
  height: 100%;
}

.team-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
}

.team-photo {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4/5;
}

.team-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}

.team-card:hover .team-photo img {
  transform: scale(1.08);
}

.team-social {
  position: absolute;
  bottom: -60px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 18px;
  background: linear-gradient(0deg, rgba(10,21,38,0.85), transparent);
  transition: bottom 0.4s var(--ease);
}

.team-card:hover .team-social {
  bottom: 0;
}

.team-social a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  border: 1px solid rgba(255,255,255,0.3);
  transition: all 0.3s var(--ease);
}

.team-social a:hover {
  background: var(--gold-500);
  color: var(--navy-900);
  border-color: var(--gold-500);
}

.team-info {
  padding: 24px 22px;
  text-align: center;
}

.team-info h5 {
  font-size: 1.1rem;
  margin-bottom: 4px;
}

.team-info span {
  color: var(--gold-600);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
}

/* ---------- Director Profile (directors.html) ---------- */

/* Large portrait frame — echoes .hero-photo-frame / .about-image-stack proportions
   but built for a single large full-bleed portrait with a hover tilt + gleam. */
.director-portrait {
  position: relative;
  transform: perspective(1200px) rotateY(0deg);
  transition: transform 0.6s var(--ease-out);
}

.director-portrait:hover {
  transform: perspective(1200px) rotateY(-3deg) translateY(-6px);
}

.director-portrait .ph-wrap {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(201, 162, 75, 0.25);
  transition: box-shadow 0.6s var(--ease-out);
}

.director-portrait:hover .ph-wrap {
  box-shadow: 0 30px 70px rgba(10, 21, 38, 0.24);
}

.director-portrait .ph-wrap {
  aspect-ratio: 3/4;
}

.director-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.9s var(--ease-out), filter 0.9s var(--ease-out);
  filter: saturate(0.96);
}

.director-portrait:hover img {
  transform: scale(1.06);
  filter: saturate(1.05);
}

/* Gold diagonal gleam sweep on hover */
.director-portrait .ph-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.22) 50%, transparent 60%);
  transform: translateX(-120%);
  pointer-events: none;
  z-index: 2;
}

.director-portrait:hover .ph-wrap::after {
  transform: translateX(120%);
  transition: transform 1.1s var(--ease-out);
}

/* Ribbon-style name tag anchored to the portrait, riffs on .hero-photo-tag */
.director-portrait .dp-tag {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;
  z-index: 3;
  background: rgba(10, 21, 38, 0.72);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(201, 162, 75, 0.35);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  color: var(--white);
  transform: translateY(14px);
  opacity: 0;
  transition: all 0.5s var(--ease-out);
}

.director-portrait:hover .dp-tag {
  transform: translateY(0);
  opacity: 1;
}

.director-portrait .dp-tag strong {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  display: block;
}

.director-portrait .dp-tag span {
  color: var(--gold-400);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Floating credential badge, echoes .about-image-stack .img-badge, with a gentle bob */
.director-portrait .dp-badge {
  position: absolute;
  top: -18px;
  right: -18px;
  z-index: 3;
  background: var(--navy-800);
  color: var(--white);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  width: 132px;
  text-align: center;
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(201, 162, 75, 0.3);
  animation: dpFloat 4.5s ease-in-out infinite;
}

.director-profile.flip .director-portrait .dp-badge {
  left: -18px;
  right: auto;
}

.director-portrait .dp-badge .num {
  font-family: var(--font-serif);
  font-size: 1.7rem;
  color: var(--gold-400);
  line-height: 1;
  margin-bottom: 4px;
}

.director-portrait .dp-badge .lbl {
  font-size: 0.68rem;
  letter-spacing: 0.4px;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.3;
}

@keyframes dpFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@media (prefers-reduced-motion: reduce) {
  .director-portrait .dp-badge { animation: none; }
}

/* Two-column director layout: alternates image/text sides via .flip */
.director-profile {
  position: relative;
}

.director-profile .dp-visual-col {
  order: 1;
}

.director-profile .dp-text-col {
  order: 2;
}

.director-profile.flip .dp-visual-col {
  order: 2;
}

.director-profile.flip .dp-text-col {
  order: 1;
}

@media (max-width: 991.98px) {
  .director-profile .dp-visual-col,
  .director-profile.flip .dp-visual-col {
    order: 1;
  }
  .director-profile .dp-text-col,
  .director-profile.flip .dp-text-col {
    order: 2;
  }
}

/* Divider rule between the two director sections */
.director-divider {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0;
}

.director-divider .line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-500) 50%, transparent);
}

.director-divider .mark {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--gold-500);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-600);
  font-size: 1.1rem;
  flex-shrink: 0;
  transition: all 0.4s var(--ease);
}

.director-divider .mark:hover {
  background: var(--gold-500);
  color: var(--navy-900);
  transform: rotate(180deg);
}

/* Mini credential/credibility stat row under a director's bio */
.dp-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 28px 0;
}

.dp-stats .dp-stat {
  flex: 1 1 140px;
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 18px 16px;
  text-align: center;
  transition: all 0.35s var(--ease);
}

.dp-stats .dp-stat:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: var(--gold-400);
}

.dp-stats .dp-stat h3 {
  font-size: 1.9rem;
  color: var(--navy-800);
  margin-bottom: 2px;
}

.dp-stats .dp-stat h3 span { color: var(--navy-800); }

.dp-stats .dp-stat p {
  margin: 0;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--ink-faint);
}

/* Light-background social icon-circle variant (dark icon on light card, gold on hover) —
   same interaction contract as .footer-social / .team-social, adapted for a white/cream section */
.dp-social {
  display: flex;
  gap: 12px;
  margin-top: 22px;
}

.dp-social a {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border-soft);
  background: var(--ivory-200);
  color: var(--navy-800);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  transition: all 0.3s var(--ease);
}

.dp-social a:hover {
  background: var(--gold-500);
  border-color: var(--gold-500);
  color: var(--navy-900);
  transform: translateY(-4px);
}

/* Practice-focus checklist for director pages: like .about-points but with a
   subtle left-to-right reveal wipe already handled by .reveal-left on parent */
.dp-focus-list {
  list-style: none;
  padding: 0;
  margin: 26px 0;
}

.dp-focus-list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px dashed var(--border-soft);
}

.dp-focus-list li:last-child { border-bottom: 0; }

.dp-focus-list .chk {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(201, 162, 75, 0.14);
  color: var(--gold-600);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.8rem;
  margin-top: 2px;
  transition: all 0.3s var(--ease);
}

.dp-focus-list li:hover .chk {
  background: var(--gold-500);
  color: var(--navy-900);
  transform: scale(1.12);
}

.dp-focus-list strong {
  display: block;
  color: var(--navy-800);
  font-size: 0.98rem;
}

.dp-focus-list p {
  margin: 2px 0 0;
  font-size: 0.86rem;
}

/* ---------- Awards ---------- */
.award-item {
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 34px 28px;
  display: flex;
  gap: 20px;
  align-items: flex-start;
  height: 100%;
  transition: all 0.35s var(--ease);
}

.award-item:hover {
  border-color: var(--gold-400);
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
}

.award-item .trophy {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-300), var(--gold-600));
  color: var(--navy-900);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
}

.award-item h5 {
  font-size: 1.02rem;
  margin-bottom: 6px;
}

.award-item .year {
  font-size: 0.75rem;
  color: var(--gold-600);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
  margin-bottom: 6px;
  display: block;
}

.award-item p {
  font-size: 0.88rem;
  margin: 0;
}

/* ---------- Testimonials ---------- */
.testimonial-section {
  background: var(--navy-900);
  position: relative;
  overflow: hidden;
}

.testimonial-section::before {
  content: "\201C";
  position: absolute;
  font-family: var(--font-serif);
  font-size: 40rem;
  line-height: 1;
  color: rgba(255,255,255,0.02);
  top: -160px;
  left: 40px;
  z-index: 0;
}

.testi-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-lg);
  padding: 46px 40px;
  position: relative;
  z-index: 2;
}

.testi-card .quote-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-400), var(--gold-600));
  color: var(--navy-900);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  margin-bottom: 24px;
}

.testi-card p.quote {
  color: rgba(255,255,255,0.85);
  font-size: 1.15rem;
  font-family: var(--font-serif);
  font-style: italic;
  line-height: 1.7;
  margin-bottom: 30px;
}

.testi-stars {
  color: var(--gold-400);
  margin-bottom: 16px;
  font-size: 0.85rem;
  letter-spacing: 3px;
}

.testi-person {
  display: flex;
  align-items: center;
  gap: 14px;
}

.testi-person img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--gold-500);
}

.testi-person h6 {
  color: var(--white);
  font-size: 0.95rem;
  margin-bottom: 2px;
}

.testi-person span {
  color: rgba(255,255,255,0.5);
  font-size: 0.78rem;
}

.testi-nav {
  display: flex;
  gap: 12px;
  margin-top: 36px;
}

.testi-nav button {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.25);
  background: transparent;
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s var(--ease);
}

.testi-nav button:hover {
  background: var(--gold-500);
  border-color: var(--gold-500);
  color: var(--navy-900);
}

/* ---------- Blog / News Cards ---------- */
.blog-card {
  background: var(--white);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: all 0.4s var(--ease);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.blog-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
}

.blog-img {
  position: relative;
  overflow: hidden;
  height: 230px;
}

.blog-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}

.blog-card:hover .blog-img img {
  transform: scale(1.1);
}

.blog-tag {
  position: absolute;
  top: 18px;
  left: 18px;
  background: var(--gold-500);
  color: var(--navy-900);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 6px 16px;
  border-radius: 999px;
}

.blog-body {
  padding: 26px 24px 28px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.blog-meta {
  display: flex;
  gap: 18px;
  font-size: 0.78rem;
  color: var(--ink-faint);
  margin-bottom: 14px;
}

.blog-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.blog-meta i { color: var(--gold-600); }

.blog-body h5 {
  font-size: 1.12rem;
  margin-bottom: 12px;
  line-height: 1.4;
}

.blog-body p {
  font-size: 0.88rem;
  margin-bottom: 18px;
  flex: 1;
}

.blog-readmore {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--navy-800);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.blog-readmore i { transition: transform 0.3s var(--ease); }
.blog-card:hover .blog-readmore { color: var(--gold-600); }
.blog-card:hover .blog-readmore i { transform: translateX(6px); }

/* ---------- CTA band ---------- */
.cta-band {
  background: linear-gradient(120deg, var(--navy-950), var(--navy-800));
  border-radius: var(--radius-lg);
  padding: 64px 56px;
  position: relative;
  overflow: hidden;
}

.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 90% 10%, rgba(201,162,75,0.2), transparent 50%);
}

.cta-band h2 {
  color: var(--white);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  margin-bottom: 10px;
  position: relative;
  z-index: 2;
}

.cta-band p {
  color: rgba(255,255,255,0.7);
  margin-bottom: 0;
  position: relative;
  z-index: 2;
}

.cta-band .cta-actions {
  position: relative;
  z-index: 2;
}

/* ---------- Footer ---------- */
.slc-footer {
  background: var(--navy-950);
  color: rgba(255,255,255,0.6);
  padding-top: 90px;
}

.slc-footer h6 {
  color: var(--white);
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 26px;
}

.slc-footer .footer-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}

.slc-footer .footer-brand .b-main {
  font-family: var(--font-serif);
  color: var(--white);
  font-size: 1.3rem;
}

.slc-footer p {
  color: rgba(255,255,255,0.5);
  font-size: 0.9rem;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: 13px;
}

.footer-links a {
  color: rgba(255,255,255,0.55);
  font-size: 0.9rem;
  transition: all 0.3s var(--ease);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.footer-links a::before {
  content: "";
  width: 5px;
  height: 5px;
  background: var(--gold-500);
  border-radius: 50%;
  flex-shrink: 0;
}

.footer-links a:hover {
  color: var(--gold-400);
  transform: translateX(4px);
}

.footer-contact-item {
  display: flex;
  gap: 14px;
  margin-bottom: 18px;
}

.footer-contact-item i {
  color: var(--gold-500);
  margin-top: 4px;
}

.footer-contact-item span {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.6);
}

.footer-contact-item.on-light span {
  color: var(--ink-soft);
}

.footer-contact-item.on-light i {
  color: var(--gold-600);
}

.footer-social {
  display: flex;
  gap: 10px;
  margin-top: 22px;
}

.footer-social a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.7);
  transition: all 0.3s var(--ease);
}

.footer-social a:hover {
  background: var(--gold-500);
  border-color: var(--gold-500);
  color: var(--navy-900);
  transform: translateY(-4px);
}

.footer-newsletter {
  display: flex;
  margin-top: 6px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.15);
}

.footer-newsletter input {
  flex: 1;
  background: rgba(255,255,255,0.05);
  border: none;
  padding: 13px 20px;
  color: var(--white);
  font-size: 0.86rem;
  outline: none;
}

.footer-newsletter input::placeholder {
  color: rgba(255,255,255,0.4);
}

.footer-newsletter button {
  background: var(--gold-500);
  border: none;
  padding: 0 22px;
  color: var(--navy-900);
  font-weight: 600;
}

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  margin-top: 70px;
  padding: 26px 0;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 0.82rem;
}

.footer-bottom a {
  color: rgba(255,255,255,0.55);
}

.footer-bottom a:hover { color: var(--gold-400); }

.footer-bottom .bottom-links {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

/* ---------- Back to top ---------- */
#backToTop {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--navy-800);
  color: var(--gold-400);
  border: 1px solid var(--gold-500);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 8000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.35s var(--ease);
}

#backToTop.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

#backToTop:hover {
  background: var(--gold-500);
  color: var(--navy-900);
}

/* ---------- Reveal on scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}

.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
.reveal-scale.in-view {
  opacity: 1;
  transform: scale(1);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
.reveal-left.in-view { opacity: 1; transform: translateX(0); }

.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
.reveal-right.in-view { opacity: 1; transform: translateX(0); }

.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }
.delay-5 { transition-delay: 0.5s; }

/* ---------- Misc components ---------- */
.section-badge-icon {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: var(--ivory-200);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-600);
  font-size: 2rem;
  margin: 0 auto 22px;
}

.value-card {
  text-align: center;
  padding: 40px 26px;
  border-radius: var(--radius-md);
  transition: all 0.35s var(--ease);
}

.value-card:hover {
  background: var(--white);
  box-shadow: var(--shadow-md);
  transform: translateY(-8px);
}

.value-card .icon-circle {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--navy-800);
  color: var(--gold-400);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
  margin: 0 auto 22px;
  transition: all 0.4s var(--ease);
}

.value-card:hover .icon-circle {
  background: linear-gradient(135deg, var(--gold-400), var(--gold-600));
  color: var(--navy-900);
}

.value-card h5 { font-size: 1.05rem; margin-bottom: 10px; }
.value-card p { font-size: 0.88rem; margin: 0; }

.timeline-item {
  position: relative;
  padding-left: 46px;
  padding-bottom: 46px;
  border-left: 2px solid var(--border-soft);
}

.timeline-item:last-child {
  border-left: 2px solid transparent;
  padding-bottom: 0;
}

.timeline-item::before {
  content: "";
  position: absolute;
  left: -9px;
  top: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--gold-500);
  border: 3px solid var(--ivory-100);
  box-shadow: 0 0 0 2px var(--gold-500);
}

.timeline-item .yr {
  font-family: var(--font-serif);
  color: var(--gold-600);
  font-size: 1.1rem;
  margin-bottom: 6px;
  display: block;
}

.timeline-item h5 { font-size: 1.05rem; margin-bottom: 8px; }
.timeline-item p { font-size: 0.9rem; margin: 0; }

/* Forms */
.form-control-slc {
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 15px 20px;
  font-size: 0.92rem;
  width: 100%;
  transition: all 0.3s var(--ease);
  color: var(--ink);
}

.form-control-slc:focus {
  outline: none;
  border-color: var(--gold-500);
  box-shadow: 0 0 0 4px rgba(201,162,75,0.12);
}

.form-control-slc.is-invalid {
  border-color: #dc3545;
}

.invalid-feedback-slc {
  display: none;
  color: #dc3545;
  font-size: 0.8rem;
  margin-top: 6px;
}

.invalid-feedback-slc.show {
  display: block;
}

.form-label-slc {
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--navy-800);
  margin-bottom: 8px;
  display: block;
}

/* Map */
.map-wrap {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  filter: grayscale(0.3) contrast(1.05);
}

.map-wrap iframe {
  width: 100%;
  height: 460px;
  border: 0;
  display: block;
}

/* Contact info cards */
.contact-info-card {
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 34px 28px;
  text-align: center;
  height: 100%;
  border: 1px solid var(--border-soft);
  transition: all 0.35s var(--ease);
}

.contact-info-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-md);
  border-color: var(--gold-400);
}

.contact-info-card .icon-circle {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: var(--ivory-200);
  color: var(--gold-600);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin: 0 auto 20px;
}

.contact-info-card h5 { font-size: 1.02rem; margin-bottom: 10px; }
.contact-info-card p { font-size: 0.88rem; margin: 0; }

/* Gallery */
.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  cursor: pointer;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}

.gallery-item .overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(10,21,38,0.85), rgba(10,21,38,0.1));
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 22px;
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}

.gallery-item:hover img { transform: scale(1.12); }
.gallery-item:hover .overlay { opacity: 1; }

.gallery-item .overlay h6 {
  color: var(--white);
  font-size: 0.95rem;
  margin-bottom: 2px;
}

.gallery-item .overlay span {
  color: var(--gold-400);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.gallery-item .zoom-icon {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(6px);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.7);
  transition: all 0.35s var(--ease);
}

.gallery-item:hover .zoom-icon {
  opacity: 1;
  transform: scale(1);
}

/* Masonry gallery — CSS columns, images keep natural aspect ratio, auto-packs regardless of size */
.masonry {
  column-count: 3;
  column-gap: 4px;
}

.masonry .gallery-item {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin-bottom: 4px;
  display: block;
  height: auto;
  border-radius: 0;
}

.masonry .gallery-item img {
  height: auto;
  width: 100%;
  display: block;
}

@media (max-width: 991.98px) {
  .masonry { column-count: 2; }
}

@media (max-width: 575.98px) {
  .masonry { column-count: 1; }
}

.gallery-filter {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 50px;
}

.gallery-filter button {
  background: transparent;
  border: 1px solid var(--border-soft);
  color: var(--ink-soft);
  padding: 10px 26px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  transition: all 0.3s var(--ease);
}

.gallery-filter button.active,
.gallery-filter button:hover {
  background: var(--navy-800);
  border-color: var(--navy-800);
  color: var(--white);
}

/* Career page */
.job-card {
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 32px 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 22px;
  transition: all 0.35s var(--ease);
}

.job-card:hover {
  border-color: var(--gold-400);
  box-shadow: var(--shadow-md);
  transform: translateX(6px);
}

.job-card h5 { font-size: 1.1rem; margin-bottom: 10px; }

.job-meta {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 0.82rem;
  color: var(--ink-faint);
}

.job-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.job-meta i { color: var(--gold-600); }

.perk-item {
  text-align: center;
  padding: 30px 20px;
}

.perk-item .icon-circle {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: var(--ivory-200);
  color: var(--gold-600);
  font-size: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}

/* Blog single/sidebar */
.sidebar-widget {
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 30px 26px;
  margin-bottom: 28px;
  border: 1px solid var(--border-soft);
}

.sidebar-widget h6 {
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.85rem;
  margin-bottom: 22px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--ivory-200);
}

.recent-post-item {
  display: flex;
  gap: 14px;
  margin-bottom: 18px;
}

.recent-post-item img {
  width: 66px;
  height: 66px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
}

.recent-post-item h6 {
  font-size: 0.85rem;
  margin-bottom: 4px;
  line-height: 1.4;
  border: none;
  padding: 0;
}

.recent-post-item span {
  font-size: 0.74rem;
  color: var(--ink-faint);
}

.tag-pill {
  display: inline-block;
  background: var(--ivory-200);
  color: var(--navy-800);
  font-size: 0.78rem;
  padding: 7px 16px;
  border-radius: 999px;
  margin: 0 6px 10px 0;
  transition: all 0.3s var(--ease);
}

.tag-pill:hover {
  background: var(--gold-500);
  color: var(--navy-900);
}

.category-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.category-list li {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px dashed var(--border-soft);
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.category-list li:last-child { border-bottom: none; }
.category-list li span { color: var(--gold-600); font-weight: 600; }

/* FAQ Accordion (Expertise page) */
.accordion-slc .accordion-item {
  border: none;
  margin-bottom: 16px;
  border-radius: var(--radius-md) !important;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.accordion-slc .accordion-button {
  font-family: var(--font-serif);
  font-weight: 700;
  color: var(--navy-800);
  font-size: 1.02rem;
  padding: 24px 28px;
  background: var(--white);
}

.accordion-slc .accordion-button:not(.collapsed) {
  background: var(--navy-800);
  color: var(--white);
  box-shadow: none;
}

.accordion-slc .accordion-button:focus {
  box-shadow: none;
  border-color: transparent;
}

.accordion-slc .accordion-button::after {
  filter: none;
  background-size: 18px;
}

.accordion-slc .accordion-body {
  padding: 26px 28px 30px;
  font-size: 0.92rem;
  color: var(--ink-soft);
  background: var(--ivory-100);
}

/* Process steps */
.process-step {
  text-align: center;
  position: relative;
  padding: 0 20px;
}

.process-step .step-num {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  border: 2px dashed var(--gold-400);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 1.5rem;
  color: var(--navy-800);
  margin: 0 auto 24px;
  background: var(--cream);
}

.process-step h5 { font-size: 1.02rem; margin-bottom: 10px; }
.process-step p { font-size: 0.88rem; margin: 0; }

/* Lightbox */
#lightbox {
  position: fixed;
  inset: 0;
  background: rgba(10,21,38,0.95);
  z-index: 10800;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s var(--ease);
  padding: 40px;
}

#lightbox.show { opacity: 1; visibility: visible; }

#lightbox img {
  max-width: 100%;
  max-height: 85vh;
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
}

#lightbox .lb-close {
  position: absolute;
  top: 30px;
  right: 40px;
  color: var(--white);
  font-size: 1.8rem;
  cursor: pointer;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 50%;
  transition: all 0.3s var(--ease);
}

#lightbox .lb-close:hover {
  background: var(--gold-500);
  color: var(--navy-900);
}

/* Utility spacing helpers already covered by Bootstrap; custom section bg pattern */
.pattern-bg {
  position: relative;
}

.pattern-bg .side-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--border-soft);
}

/* Responsive tweaks */
@media (max-width: 991.98px) {
  .hero { padding-top: 140px; text-align: center; }
  .hero-cta { justify-content: center; }
  .hero-stats { justify-content: center; }
  .hero-visual { margin-top: 60px; }
  .about-image-stack .img-badge { right: 10px; }
  .cta-band { padding: 46px 30px; text-align: center; }
  .cta-band .cta-actions { margin-top: 24px; }
}

@media (max-width: 575.98px) {
  .disclaimer-card { padding: 36px 24px; }
  #cookieBar { flex-direction: column; align-items: flex-start; padding: 22px; }
  .hero-duo-badge { display: none; }
}

/* ==========================================================================
   Scroll Ledger — a law-book that opens as the section scrolls into view.
   JS drives two custom properties on .ledger-book: --cover-rot (the cover
   swinging open) and --page-rot (the single page turning after it). The
   open two-page spread sits underneath both, always in place — nothing
   needs to rotate to "reveal" it, the cover and page simply move out of
   the way, so nothing can flip past viewing angle and vanish.
   ========================================================================== */
.ledger-scene {
  position: relative;
  height: 340vh;
  background: linear-gradient(160deg, var(--navy-950) 0%, var(--navy-800) 55%, var(--navy-700) 88%, var(--ivory-100) 100%);
}

.ledger-scene::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(ellipse at 15% 12%, rgba(201, 162, 75, 0.16), transparent 45%),
    radial-gradient(ellipse at 85% 30%, rgba(201, 162, 75, 0.12), transparent 50%);
  pointer-events: none;
}

/* Same gold rule-line texture as the hero, so this reads as the same site */
.ledger-columns {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.05;
  background-image: repeating-linear-gradient(90deg, var(--gold-300) 0 2px, transparent 2px 90px);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 15%, #000 75%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 15%, #000 75%, transparent 100%);
}

.ledger-particles {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.ledger-particles span {
  position: absolute;
  border-radius: 50%;
  background: var(--gold-400);
  box-shadow: 0 0 6px 1px rgba(201, 162, 75, 0.7);
  opacity: 0;
  animation-name: particleTwinkle;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.ledger-particles span:nth-child(1) { left: 8%; top: 14%; width: 3px; height: 3px; animation-delay: 0.6s; animation-duration: 7.4s; --op: 0.55; }
.ledger-particles span:nth-child(2) { left: 92%; top: 20%; width: 4px; height: 4px; animation-delay: 2.1s; animation-duration: 9.1s; --op: 0.4; }
.ledger-particles span:nth-child(3) { left: 15%; top: 68%; width: 3.4px; height: 3.4px; animation-delay: 3.4s; animation-duration: 6.8s; --op: 0.6; }
.ledger-particles span:nth-child(4) { left: 88%; top: 62%; width: 2.6px; height: 2.6px; animation-delay: 1.2s; animation-duration: 8.3s; --op: 0.45; }
.ledger-particles span:nth-child(5) { left: 50%; top: 8%; width: 3.8px; height: 3.8px; animation-delay: 4.6s; animation-duration: 7.9s; --op: 0.5; }
.ledger-particles span:nth-child(6) { left: 25%; top: 30%; width: 2.8px; height: 2.8px; animation-delay: 5.5s; animation-duration: 6.5s; --op: 0.65; }
.ledger-particles span:nth-child(7) { left: 70%; top: 45%; width: 3.2px; height: 3.2px; animation-delay: 0.3s; animation-duration: 9.6s; --op: 0.42; }
.ledger-particles span:nth-child(8) { left: 40%; top: 78%; width: 4.2px; height: 4.2px; animation-delay: 2.9s; animation-duration: 7.1s; --op: 0.5; }
.ledger-particles span:nth-child(9) { left: 78%; top: 82%; width: 2.4px; height: 2.4px; animation-delay: 4.1s; animation-duration: 8.7s; --op: 0.58; }
.ledger-particles span:nth-child(10) { left: 5%; top: 46%; width: 3.6px; height: 3.6px; animation-delay: 1.8s; animation-duration: 6.2s; --op: 0.48; }
.ledger-particles span:nth-child(11) { left: 60%; top: 16%; width: 2.9px; height: 2.9px; animation-delay: 3.9s; animation-duration: 9.3s; --op: 0.52; }
.ledger-particles span:nth-child(12) { left: 33%; top: 55%; width: 3.1px; height: 3.1px; animation-delay: 0.9s; animation-duration: 7.7s; --op: 0.44; }
.ledger-particles span:nth-child(13) { left: 82%; top: 12%; width: 2.5px; height: 2.5px; animation-delay: 5.1s; animation-duration: 6.9s; --op: 0.6; }
.ledger-particles span:nth-child(14) { left: 18%; top: 88%; width: 3.7px; height: 3.7px; animation-delay: 2.4s; animation-duration: 8.1s; --op: 0.4; }
.ledger-particles span:nth-child(15) { left: 95%; top: 50%; width: 3px; height: 3px; animation-delay: 4.4s; animation-duration: 7.5s; --op: 0.55; }
.ledger-particles span:nth-child(16) { left: 45%; top: 35%; width: 2.7px; height: 2.7px; animation-delay: 1.5s; animation-duration: 9.9s; --op: 0.46; }
.ledger-particles span:nth-child(17) { left: 55%; top: 90%; width: 3.9px; height: 3.9px; animation-delay: 3.2s; animation-duration: 6.4s; --op: 0.5; }
.ledger-particles span:nth-child(18) { left: 10%; top: 5%; width: 2.6px; height: 2.6px; animation-delay: 0.1s; animation-duration: 8.6s; --op: 0.42; }

.ledger-sticky {
  position: sticky;
  z-index: 1;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 44px;
  overflow: hidden;
}

.ledger-intro {
  text-align: center;
  max-width: 640px;
  padding: 0 24px;
}

.ledger-intro .hero-badge {
  margin-bottom: 22px;
}

.ledger-title {
  font-family: var(--font-serif);
  font-size: clamp(1.7rem, 3.2vw, 2.6rem);
  line-height: 1.25;
  color: var(--white);
}

.ledger-book {
  --cover-rot: 0deg;
  --page-rot: 0deg;
  position: relative;
  width: min(760px, 86vw);
  height: min(480px, 56vh);
  perspective: 2600px;
}

.ledger-book-shadow {
  position: absolute;
  left: 50%;
  bottom: -6%;
  width: 70%;
  height: 40px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.45) 0%, transparent 72%);
  filter: blur(6px);
}

/* The open spread: two static halves, always present beneath the cover/page */
.ledger-spread {
  position: absolute;
  inset: 0;
  display: flex;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
}

.ledger-spread-half {
  position: relative;
  width: 50%;
  padding: 42px 34px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: linear-gradient(155deg, #f8f2e2 0%, #efe6cf 100%);
}

.ledger-spread-left {
  box-shadow: inset -10px 0 24px -14px rgba(15, 10, 4, 0.35);
}

.ledger-spread-right {
  box-shadow: inset 10px 0 24px -14px rgba(15, 10, 4, 0.25);
}

/* The single turning page: pinned to the right half's footprint, hinged on
   its LEFT edge (the spine). At rest (0deg) it lies flat over the right
   half, hiding it. Turning drives it toward negative rotation so it lifts
   and swings left, uncovering the spread beneath — never past 90 degrees
   past the point where the spread itself is meant to be the resting state. */
.ledger-page {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  transform-style: preserve-3d;
  transform-origin: left center;
  transform: rotateY(calc(-1 * var(--page-rot)));
  z-index: 20;
}

.ledger-page-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 42px 34px;
  background: linear-gradient(155deg, #f8f2e2 0%, #efe6cf 100%);
}

.ledger-page-back {
  transform: rotateY(180deg);
  box-shadow: inset -10px 0 24px -14px rgba(15, 10, 4, 0.35);
}

/* The cover: spans the full spread while closed, hinged on the book's left
   edge, swings open to reveal everything beneath it. */
.ledger-cover {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform-origin: left center;
  transform: rotateY(calc(-1 * var(--cover-rot)));
  z-index: 30;
  border-radius: 6px;
}

.ledger-cover-frame {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  border-radius: 6px;
  background: linear-gradient(155deg, #241608 0%, #17100a 55%, #241608 100%);
  box-shadow: inset 0 0 0 1px rgba(201, 162, 75, 0.35), inset 0 0 60px rgba(0, 0, 0, 0.5), 0 30px 70px rgba(0, 0, 0, 0.5);
  padding: 40px;
  text-align: center;
}

.ledger-cover-mark {
  width: 100px;
  height: 100px;
  opacity: 0.92;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.5));
}

.ledger-cover-title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: 1px;
  color: var(--gold-400);
}

.ledger-cover-sub {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(217, 185, 104, 0.6);
  margin-top: -12px;
}

.ledger-motto {
  font-family: var(--font-devanagari);
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  color: var(--navy-800);
  margin: 0;
  line-height: 1.3;
}

.ledger-motto-translation {
  display: block;
  margin-top: 14px;
  font-family: var(--font-sans);
  font-size: 0.64rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.ledger-eyebrow {
  font-family: var(--font-sans);
  font-size: 0.62rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--gold-600);
  font-weight: 600;
}

.ledger-heading {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  color: var(--navy-800);
  margin: 14px 0;
  line-height: 1.3;
}

.ledger-back-text {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 10px 0 0;
}

.ledger-folio {
  position: absolute;
  bottom: 20px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.75rem;
  color: var(--ink-faint);
}

@media (max-width: 767.98px) {
  .ledger-scene { height: 300vh; }
  .ledger-book { width: min(340px, 88vw); height: min(460px, 68vh); }
  .ledger-cover-mark { width: 76px; height: 76px; }
  .ledger-cover-title { font-size: 1.1rem; }
  .ledger-spread-half,
  .ledger-page-face { padding: 26px 20px; }
  .ledger-heading { font-size: 1rem; }
  .ledger-back-text { font-size: 0.75rem; }
  .ledger-motto { font-size: 1.15rem; }
}