/* ============================================================
   Magna Carta Law — Glass Premium Stylesheet (v2)
   Backup of v1 retained as style.css.bak2
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Brand */
  --navy-deep:    #001A1A;
  --navy:         #003333;
  --navy-mid:     #00524D;
  --navy-soft:    #0A4444;
  --gold:         #C18F59;
  --gold-glow:    #E5BE8E;
  --gold-deep:    #946431;
  --gold-pale:    #FBF3E2;

  /* Surfaces */
  --cream:        #F7F2E8;
  --paper:        #FFFCF5;
  --paper-warm:   #F1E9D7;
  /* Text highlights offered by the Visual Editor. Named shades rather than a
     free colour picker: every one of them is already in the palette, so text
     coloured in the editor cannot land outside the design. */
  --hl-gold:      #946431;
  --hl-navy:      #003333;
  --hl-muted:     #6B7280;
  --white:        #FFFFFF;

  /* Greys */
  --gray-50:      #F8FAFC;
  --gray-100:     #F1F5F9;
  --gray-200:     #E5E7EB;
  --gray-300:     #D1D5DB;
  --gray-400:     #9CA3AF;
  --gray-500:     #6B7280;
  --gray-600:     #4B5563;
  --gray-700:     #374151;
  --gray-800:     #1F2937;
  --gray-900:     #111827;

  /* Text */
  --text-primary:   #0B1A1A;
  --text-secondary: #3F4B4B;
  --text-muted:     #707878;
  --text-on-dark:        rgba(255,255,255,0.92);
  --text-on-dark-soft:   rgba(255,255,255,0.62);
  --text-on-dark-faint:  rgba(255,255,255,0.40);

  /* Status */
  --green:        #16A34A;
  --green-light:  #DCFCE7;
  --green-deep:   #065F46;
  --red:          #DC2626;
  --red-light:    #FEE2E2;
  --red-deep:     #991B1B;
  --amber:        #D97706;
  --amber-light:  #FEF3C7;
  --amber-deep:   #92400E;
  --blue:         #1D4ED8;
  --blue-light:   #DBEAFE;
  --blue-deep:    #1E3A8A;

  /* Radii */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-full: 999px;

  /* Shadows */
  --shadow-sm:  0 2px 8px rgba(0,26,26,0.05);
  --shadow-md:  0 8px 24px rgba(0,26,26,0.08);
  --shadow-lg:  0 16px 48px rgba(0,26,26,0.12);
  --shadow-xl:  0 24px 64px rgba(0,26,26,0.16);
  --shadow-gold: 0 8px 24px rgba(193,143,89,0.32);
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--cream);
  color: var(--text-primary);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main { flex: 1; }

/* ============================================================
   PAGE SYSTEM
   ============================================================ */
.page { display: none; }
.page.active { display: block; flex: 1; }

/* ============================================================
   NAV — glass pill with stacked icon menu
   ============================================================ */
nav {
  position: sticky; top: 14px; z-index: 100;
  margin: 14px 24px 0;
  transition: transform .3s ease, opacity .3s ease;
  background: rgba(0, 26, 26, 0.7);
  backdrop-filter: saturate(180%) blur(22px);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 22px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px 10px 22px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.32),
              inset 0 1px 0 rgba(255,255,255,0.06);
}

.nav-logo {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; cursor: pointer;
}
.nav-logo-img {
  height: 36px; width: auto; max-width: 140px;
  object-fit: contain; display: block;
}
.nav-logo-fallback {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--gold-glow));
  display: none;
  align-items: center; justify-content: center;
  box-shadow: 0 0 16px rgba(193,143,89,0.45);
}
.nav-logo-text {
  font-family: 'Libre Baskerville', serif;
  font-size: 15px; color: #fff;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.nav-links {
  list-style: none;
  display: flex; align-items: center; gap: 2px;
}
.nav-links a {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px;
  min-width: 78px; padding: 8px 12px 6px;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em;
  color: rgba(255,255,255,0.78);
  text-decoration: none; cursor: pointer;
  border: 1px solid transparent;
  border-radius: 14px;
  transition: color .2s, background .2s, border-color .2s, transform .2s;
  position: relative;
}
.nav-icon-m {
  line-height: 0;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
  transition: transform .25s, filter .25s;
}
.nav-label-m { font-size: 11px; }
.nav-links a:hover {
  color: #fff;
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.10);
}
.nav-links a:hover .nav-icon-m {
  transform: translateY(-1px) scale(1.06);
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5));
}
.nav-links a.active {
  color: var(--gold-glow);
  background: linear-gradient(180deg, rgba(193,143,89,0.18), rgba(193,143,89,0.08));
  border-color: rgba(229,190,142,0.35);
  box-shadow: 0 4px 14px rgba(193,143,89,0.18),
              inset 0 1px 0 rgba(255,255,255,0.05);
}
.nav-links a.active .nav-icon-m {
  filter: drop-shadow(0 0 10px rgba(229,190,142,0.55))
          drop-shadow(0 1px 2px rgba(0,0,0,0.3));
}
.nav-links a.active::after {
  content: ''; position: absolute; bottom: -4px; left: 50%;
  transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--gold-glow);
  box-shadow: 0 0 8px rgba(229,190,142,0.8);
}

.nav-end {
  display: flex;
  align-items: center;
  gap: 8px;
}
.nav-lang {
  position: relative;
  display: flex;
  align-items: center;
}
.nav-lang-btn {
  display: flex; align-items: center; gap: 5px;
  background: none; border: 1px solid rgba(255,255,255,0.25);
  color: rgba(255,255,255,0.75);
  font-size: 13px; font-weight: 600;
  cursor: pointer; padding: 7px 10px;
  border-radius: 8px;
  font-family: inherit; white-space: nowrap;
  transition: background .15s, color .15s;
}
.nav-lang-btn:hover { background: rgba(255,255,255,0.1); color: #fff; }
.nav-lang-dd {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.14);
  min-width: 150px;
  overflow: hidden;
  z-index: 8000;
}
.nav-lang-dd.open { display: block; }
.nav-lang-opt {
  padding: 10px 14px;
  font-size: 13px; font-weight: 500;
  color: #111; cursor: pointer;
  display: flex; align-items: center;
  transition: background .1s;
}
.nav-lang-opt:hover { background: #F3F4F6; }
.nav-lang-opt.active { color: var(--teal); font-weight: 700; }

.nav-cta {
  font-size: 13px; font-weight: 600;
  background: linear-gradient(135deg, var(--gold), var(--gold-glow));
  color: var(--navy-deep);
  text-decoration: none; cursor: pointer;
  padding: 11px 22px; border-radius: var(--radius-full);
  box-shadow: 0 4px 16px rgba(193,143,89,0.42);
  transition: transform .25s, box-shadow .25s;
  white-space: nowrap;
}
.nav-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(193,143,89,0.6);
}
/* Desktop has the gold "Book Now" CTA in the nav, so hide the redundant "Book"
   item in the nav-links menu there instead. (The nav-links menu is hidden on
   mobile/touch anyway, where Book lives in the bottom mobile-nav.) */
@media (min-width: 1025px) and (pointer: fine) {
  .nav-links li:has(> #nav-appointment) { display: none !important; }
}

/* ============================================================
   HERO — dark glass with gradient orbs
   ============================================================ */
.hero {
  position: relative;
  background: radial-gradient(ellipse at 20% -10%, #006161 0%, var(--navy) 40%, var(--navy-deep) 100%);
  color: var(--text-on-dark);
  overflow: hidden;
  padding: 80px 40px 100px;
  margin: 16px 24px 0;
  border-radius: 28px;
  box-shadow: var(--shadow-lg);
}
.hero::before, .hero::after {
  content: ''; position: absolute; border-radius: 50%;
  filter: blur(80px); pointer-events: none;
  z-index: 0;
}
.hero::before {
  width: 480px; height: 480px;
  background: rgba(193,143,89,0.28);
  top: -160px; right: -140px;
}
.hero::after {
  width: 360px; height: 360px;
  background: rgba(0,160,160,0.40);
  bottom: -120px; left: -100px;
}

.hero-inner {
  position: relative; z-index: 1;
  max-width: 1240px; margin: 0 auto;
  text-align: center;
  padding-top: 30px;
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  padding: 7px 18px; border-radius: var(--radius-full);
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-on-dark-soft);
  backdrop-filter: blur(10px);
  margin-bottom: 28px;
}
/* Hidden by request 2026-06-17 (Online Booking / Our Attorneys / Get In Touch).
   Markup kept intact — delete this one rule to bring all eyebrows back. */
.hero-eyebrow { display: none !important; }
.hero-eyebrow::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold-glow);
  box-shadow: 0 0 10px var(--gold-glow);
}

.hero-title {
  font-family: 'Libre Baskerville', serif; font-weight: 400;
  font-size: clamp(36px, 5.5vw, 72px);
  line-height: 1.06; letter-spacing: -0.02em;
  color: #fff;
  margin: 0 auto 40px;
  max-width: 18ch;
}
.hero-title em {
  background: linear-gradient(135deg, var(--gold), var(--gold-glow));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  font-style: italic;
}
/* Home hero — line 1 "Comprehensive Legal Cover", then a smaller "by" (same
   serif/colour) sitting inline beside the gold "Specialist Attorneys" on line 2.
   Scoped to the home title so Contact/Team/Appointment heros are untouched. */
.hero-title[data-setting="hero_title"] { max-width: none; }
.hero-title[data-setting="hero_title"] .hero-by { font-size: 0.5em; }

.hero-sub {
  font-size: 17px; line-height: 1.65;
  color: var(--text-on-dark-soft);
  max-width: 56ch; margin: 0 auto 12px;
}

/* Hero search */
@keyframes search-pop {
  0%   { transform: scale(1);    box-shadow: 0 4px 28px rgba(0,0,0,0.28), 0 0 24px rgba(174,26,48,0.24), inset 0 1px 0 rgba(255,255,255,0.14); }
  30%  { transform: scale(1.03); box-shadow: 0 6px 36px rgba(0,0,0,0.3),  0 0 40px rgba(174,26,48,0.40), inset 0 1px 0 rgba(255,255,255,0.2); }
  65%  { transform: scale(0.99); }
  100% { transform: scale(1);    box-shadow: 0 4px 28px rgba(0,0,0,0.28), 0 0 24px rgba(174,26,48,0.24), inset 0 1px 0 rgba(255,255,255,0.14); }
}
.search-wrap.is-popping { animation: search-pop 1.1s cubic-bezier(.25,0.46,0.45,0.94) forwards !important; }

@keyframes search-breathe {
  0%, 100% { box-shadow: 0 4px 28px rgba(0,0,0,0.28), 0 0 30px rgba(174,26,48,0.28), 0 0 60px rgba(235,210,150,0.12), inset 0 1px 0 rgba(255,255,255,0.16); }
  50%       { box-shadow: 0 8px 42px rgba(0,0,0,0.34), 0 0 46px rgba(174,26,48,0.42), 0 0 88px rgba(235,210,150,0.16), inset 0 1px 0 rgba(255,255,255,0.2); }
}
/* Rotating gold light that travels around the border — "AI prompt" shimmer */
@property --sb-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@keyframes sb-rotate { to { --sb-angle: 360deg; } }

.search-wrap {
  position: relative; z-index: 1;
  max-width: 760px; margin: 8px auto 0;
  background:
    radial-gradient(160% 260% at 20% 55%, rgba(174,26,48,0.66) 0%, rgba(174,26,48,0) 56%),
    radial-gradient(150% 280% at 52% -42%, rgba(132,22,42,0.60) 0%, rgba(132,22,42,0) 60%),
    radial-gradient(110% 190% at 91% 44%, rgba(235,210,150,0.44) 0%, rgba(235,210,150,0) 40%),
    linear-gradient(135deg, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0.05) 40%, rgba(255,255,255,0) 66%),
    linear-gradient(135deg, rgba(100,20,34,0.62), rgba(62,12,22,0.72));
  border: 1px solid rgba(255,255,255,0.19);
  backdrop-filter: blur(36px) saturate(170%); -webkit-backdrop-filter: blur(36px) saturate(170%);
  border-radius: var(--radius-full);
  padding: 9px 9px 9px 30px;
  display: flex; align-items: center; gap: 16px;
  box-shadow: 0 4px 28px rgba(0,0,0,0.28), 0 0 24px rgba(174,26,48,0.24), 0 0 48px rgba(235,210,150,0.12), inset 0 1px 0 rgba(255,255,255,0.18);
  animation: search-breathe 4s ease-in-out infinite;
  transition: border-color .3s, box-shadow .3s, transform .3s;
}
/* Travelling light ring — a masked conic gradient showing only on the border */
.search-wrap::before {
  content: '';
  position: absolute; inset: -1.5px;
  border-radius: inherit; padding: 1.5px;
  background: conic-gradient(from var(--sb-angle),
    rgba(247,228,168,0)    0deg,
    rgba(247,228,168,0)    55deg,
    rgba(232,202,128,0.55) 100deg,
    rgba(255,244,200,1)    140deg,
    rgba(255,236,176,0.95) 152deg,
    rgba(232,202,128,0.55) 190deg,
    rgba(247,228,168,0)    235deg,
    rgba(247,228,168,0)    360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: sb-rotate 3.4s linear infinite;
  filter: drop-shadow(0 0 5px rgba(247,228,168,0.55));
  pointer-events: none; z-index: 3;
}
.search-wrap:focus-within {
  animation: none;
  border-color: rgba(201,168,76,0.62);
  box-shadow: 0 8px 40px rgba(0,0,0,0.34), 0 0 0 3px rgba(201,168,76,0.14), 0 0 44px rgba(174,26,48,0.34), inset 0 1px 0 rgba(255,255,255,0.2);
}
/* Brighter, faster ring while focused */
.search-wrap:focus-within::before { animation-duration: 2.2s; filter: drop-shadow(0 0 8px rgba(255,240,190,0.75)); }
.search-wrap svg { flex-shrink: 0; opacity: 0.9; width: 20px; height: 20px; position: relative; z-index: 2; }
.search-wrap input {
  flex: 1; min-width: 0; border: none; background: transparent;
  font-size: 17px; color: #fff; outline: none;
  font-family: inherit; letter-spacing: 0.01em;
  padding: 13px 0; position: relative; z-index: 2;
}
/* native placeholder kept transparent — the .search-ph overlay shows all hint text */
.search-wrap input::placeholder { color: transparent; }
/* Animated placeholder overlay — a real element we can cross-fade between phrases */
.search-field { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; }
.search-field input { flex: 1; min-width: 0; }
.search-ph {
  position: absolute; left: 0; top: 0; right: 0; bottom: 0;
  display: flex; align-items: center;
  pointer-events: none; z-index: 1;
  font-size: 17px; letter-spacing: 0.01em;
  color: rgba(245,228,190,0.66);
  white-space: nowrap; overflow: hidden;
  opacity: 0; transition: opacity 1s ease;
}
.search-ph.show { opacity: 1; }
/* Hard guard: never overlap typed text — hide the hint overlay the moment the
   field is focused or has any value, regardless of JS timing/IME composition. */
.search-field input:focus ~ .search-ph,
.search-field input:not(:placeholder-shown) ~ .search-ph { opacity: 0 !important; }
/* Neutralise browser autofill — keep the glass look (no blue/yellow fill) */
.search-wrap input:-webkit-autofill,
.search-wrap input:-webkit-autofill:hover,
.search-wrap input:-webkit-autofill:focus,
.search-wrap input:-webkit-autofill:active {
  -webkit-text-fill-color: #fff !important;
  caret-color: #fff;
  /* deferring the bg transition indefinitely keeps the field transparent */
  transition: background-color 9999s ease-in-out 0s;
}
.search-btn {
  position: relative; z-index: 2;
  border: none; cursor: pointer;
  background: linear-gradient(135deg, var(--gold), var(--gold-glow));
  color: var(--navy-deep); font-weight: 700; font-size: 15px;
  padding: 16px 34px; border-radius: var(--radius-full);
  box-shadow: 0 4px 16px rgba(193,143,89,0.5), inset 0 1px 0 rgba(255,255,255,0.35);
  transition: transform .2s, box-shadow .2s, filter .2s;
  font-family: inherit; white-space: nowrap; overflow: hidden;
}
.search-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 26px rgba(193,143,89,0.65), inset 0 1px 0 rgba(255,255,255,0.4);
  filter: brightness(1.05);
}

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .search-wrap, .search-wrap::before { animation: none; }
  .search-ph { transition: none; }
}


/* ============================================================
   STATS — floating glass cards
   ============================================================ */
.stats {
  max-width: 1240px;
  margin: -52px auto 0;
  padding: 0 40px;
  position: relative;
  z-index: 5;
}
.stats-inner {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
.stat {
  background: rgba(255,255,255,0.65);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: var(--radius-lg);
  padding: 24px 20px; text-align: center;
  box-shadow: var(--shadow-md);
  transition: transform .3s, box-shadow .3s;
}
.stat:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}
.stat-num {
  font-family: 'Libre Baskerville', serif;
  font-size: 32px; font-weight: 700;
  color: var(--navy);
  line-height: 1.1; margin-bottom: 8px;
  letter-spacing: -0.01em;
}
.stat-label {
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-muted); font-weight: 600;
}
/* Google reviews stat (clickable) */
.stat-google { display: block; text-decoration: none; color: inherit; cursor: pointer; }
.stat-google:hover { border-color: var(--gold); }
.stat-star { color: var(--gold); margin-left: 2px; }
.stat-reviews-label {
  text-transform: none; letter-spacing: 0.02em;
  color: var(--gold-deep); font-weight: 600; font-size: 12px;
}
.stat-go { font-size: 11px; font-weight: 700; }
.stat-google:hover .stat-reviews-label { text-decoration: underline; }

/* ============================================================
   GOOGLE REVIEWS section (under the stats bar)
   ============================================================ */
.reviews-section { scroll-margin-top: 90px; } /* clears the sticky nav on jump */
.reviews-wrap {
  position: relative;
  max-width: 1240px; /* match every other section (hero/stats/filter/services/footer) */
  margin: 28px auto 8px;
  padding: 34px 28px 36px;
}
/* Same feathered backdrop as the advisors section, mirrored left-to-right so the
   two panels don't read as a repeat when stacked. Static — no motion. */
.reviews-wrap::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  border-radius: 28px;
  background:
    radial-gradient(58% 70% at 90% 6%,  rgba(193,143,89,0.16) 0%, rgba(193,143,89,0) 55%),
    radial-gradient(52% 62% at 6% 14%,  rgba(0,40,40,0.055) 0%, rgba(0,40,40,0) 55%),
    radial-gradient(70% 78% at 14% 100%, rgba(193,143,89,0.13) 0%, rgba(193,143,89,0) 60%),
    linear-gradient(180deg, #FCF5E8 0%, var(--gold-pale) 100%);
  -webkit-mask-image: radial-gradient(118% 130% at 50% 48%, #000 52%, transparent 100%);
          mask-image: radial-gradient(118% 130% at 50% 48%, #000 52%, transparent 100%);
}
.reviews-header { text-align: center; margin-bottom: 24px; }
.reviews-title {
  font-family: 'Libre Baskerville', serif;
  font-size: clamp(26px, 3.2vw, 36px); font-weight: 700;
  color: var(--navy-deep); letter-spacing: -0.01em;
  margin: 0; line-height: 1.2;
}
.reviews-title em {
  background: linear-gradient(135deg, var(--gold), var(--gold-deep));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; font-style: italic;
}
.reviews-widget-mount { min-height: 160px; }
.reviews-loading {
  display: flex; align-items: center; justify-content: center;
  min-height: 160px; color: var(--text-muted); font-size: 14px;
  text-align: center; padding: 0 20px;
}

/* ---- Google summary bar ---- */
.gsum {
  display: flex; align-items: center; justify-content: center;
  gap: 20px; flex-wrap: wrap;
  margin: 4px auto 26px; padding: 16px 26px; max-width: 640px;
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(193,143,89,0.22);
  border-radius: 20px;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 20px rgba(0,40,40,0.05);
}
.gsum-score { display: flex; align-items: baseline; gap: 6px; }
.gsum-num {
  font-family: 'Libre Baskerville', serif;
  font-size: 38px; font-weight: 700; color: var(--navy); line-height: 1;
}
.gsum-of    { font-size: 13px; color: var(--text-muted); }
.gsum-mid   { display: flex; flex-direction: column; gap: 3px; }
.gsum-count { font-size: 13px; color: var(--text-secondary); }
.gsum-count b { color: var(--navy); font-weight: 700; }
.gsum-cta {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 600; color: var(--navy); text-decoration: none;
  border: 1px solid rgba(0,51,51,0.16); border-radius: 999px;
  padding: 8px 16px; background: #fff; transition: 0.18s ease;
}
.gsum-cta:hover {
  border-color: var(--gold); color: var(--gold-deep);
  box-shadow: 0 3px 12px rgba(193,143,89,0.18);
}
.g-logo { width: 17px; height: 17px; flex: 0 0 17px; }

/* ---- Stars ---- */
.stars { display: inline-flex; gap: 3px; line-height: 1; }
.stars svg { width: 20px; height: 20px; flex: 0 0 20px; }
.stars .s-full  { fill: var(--gold); }
.stars .s-empty { fill: var(--gray-300); }
/* Half star: the gold path sits on top of the grey one and is cut down the
   middle. inset() measures against the path's own bounding box, so the cut
   lands on the star's visual centre rather than the 24px viewBox centre. */
.stars .s-half  { clip-path: inset(0 50% 0 0); }
.stars.lg svg { width: 24px; height: 24px; flex: 0 0 24px; }
.rcard.is-active .stars svg { width: 23px; height: 23px; flex: 0 0 23px; }

/* ============================================================
   REVIEWS CAROUSEL
   The rail is a transform, not a scroller: `index` says which review is
   centre stage, and the position, the scaled-up card and the lit dot are all
   derived from it. Wrapping is just `index = 0` — no seam, nothing to
   teleport, nothing to judder.
   ============================================================ */
.rcarousel { position: relative; }

/* Edge fade by MASK, not by a coloured overlay.
   A coloured gradient only disappears if it matches whatever is behind it — and
   behind these cards is the wrap's gold-tinted gradient, not a flat colour. So
   the overlay never blended; it read as a grey rectangle taped over the ends.
   Masking fades the cards themselves to transparent, so it is right over any
   backdrop. Safe for performance here: the mask sits on the STATIC viewport, not
   on a scroller — it's the moving box that makes masks expensive.
   Horizontal only, so the cards' drop shadows are left alone. */
.rviewport {
  overflow: hidden;
  padding: 30px 0 46px;   /* room for the active card's shadow — clipping it is
                             what turned the bottom edge into a hard straight line */
  -webkit-mask-image: linear-gradient(90deg,
      transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(90deg,
      transparent 0, #000 7%, #000 93%, transparent 100%);
}

.rtrack {
  display: flex; gap: 14px; align-items: center;
  transform: translate3d(0,0,0);
  /* Long and gentle. The old 0.62s with a sharp ease-out arrived fast and then
     braked hard — it read as a snap, not a glide. easeInOutCubic over ~1s eases
     in and out symmetrically, which is what makes it feel unhurried. */
  transition: transform 0.85s cubic-bezier(0.65, 0, 0.35, 1);
  will-change: transform;
}
.rtrack.nomotion { transition: none; }

/* empty slot at each end so the first and last card can still sit centred */
.rspacer { flex: 0 0 calc((100% - 40px) / 3); }

.rcard {
  flex: 0 0 calc((100% - 40px) / 3);      /* 3 per view */
  position: relative; display: flex; flex-direction: column;
  align-items: center; text-align: center;
  border-radius: 20px; padding: 30px 26px 24px;
  /* Glass WITHOUT backdrop-filter. A real blur has to resample everything behind
     the card on every frame — with nine of them sliding and scaling at once that
     is exactly what made the rail judder before. The look is rebuilt from three
     cheap parts instead: a translucent fill (so the wrap's gold gradient shows
     through for real), a white hairline along the top edge (the cue the eye
     actually reads as "glass"), and a soft outer shadow for thickness. */
  background:
    /* gold rule along the top — kept as a background layer because ::before is
       used for the quotation-mark watermark */
    linear-gradient(90deg, var(--gold-deep), var(--gold-glow), transparent),
    linear-gradient(158deg,
      rgba(255,255,255,0.80) 0%,
      rgba(255,255,255,0.52) 48%,
      rgba(255,252,245,0.62) 100%);
  background-repeat: no-repeat;
  background-position: top left, center;
  background-size: 0% 2px, 100% 100%;     /* rule hidden until this card is active */
  border: 1px solid rgba(255,255,255,0.75);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),        /* top-edge light catch */
    inset 0 0 0 1px rgba(255,255,255,0.28),      /* faint inner rim */
    0 10px 30px -16px rgba(0,40,40,0.22);
  font: inherit; color: inherit; cursor: pointer;
  touch-action: pan-y;                    /* horizontal drag is ours to handle */
  /* off-centre cards sit back (smaller) but keep FULL colour — only the carousel's
     edge mask fades things out, not the side cards themselves. Pushed to 0.85 so the
     centre card clearly leads now that the sides are no longer dimmed. */
  transform: scale(0.85); opacity: 1;
  transition: transform 0.85s cubic-bezier(0.65, 0, 0.35, 1),
              opacity 0.78s ease, box-shadow 0.78s ease, border-color 0.45s ease,
              background-size 0.78s cubic-bezier(0.65, 0, 0.35, 1);
  overflow: hidden;
  will-change: transform;
}
.rcard.is-active {
  transform: scale(1); opacity: 1;
  /* the presented pane is a little more solid and sits deeper on the page */
  background:
    linear-gradient(90deg, var(--gold-deep), var(--gold-glow), transparent),
    linear-gradient(158deg,
      rgba(255,255,255,0.94) 0%,
      rgba(255,255,255,0.70) 48%,
      rgba(255,252,245,0.80) 100%);
  background-repeat: no-repeat;
  background-position: top left, center;
  background-size: 100% 2px, 100% 100%;   /* the rule sweeps in from the left */
  border-color: rgba(255,255,255,0.9);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 0 0 1px rgba(193,143,89,0.18),       /* gold rim, not a gold border */
    0 28px 56px -26px rgba(0,40,40,0.32);
}
.rcard:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
/* side cards keep full colour, so hover feedback is a gentle shadow lift, not a
   brightness change */
.rcard:hover {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    inset 0 0 0 1px rgba(255,255,255,0.28),
    0 16px 38px -18px rgba(0,40,40,0.3);
}
/* No transform on hover: growing a card under the cursor moves its own hit-box,
   which drops hover, which shrinks it back — a flicker loop. Shadow instead. */
.rcard.is-active:hover {
  opacity: 1;
  border-color: rgba(255,255,255,1);
  box-shadow: 0 32px 64px -28px rgba(0,40,40,0.42);
}

/* Faint gold quotation-mark watermark in the top-left corner — the testimonial
   flourish the original layout left a note for but never added. overflow:hidden on
   the card keeps it tucked inside the rounded corner. It sits at z-index 0 with the
   card's real content lifted to z-index 1 so nothing gets covered; on the presented
   card it warms up a touch. */
.rcard::before {
  content: '\201C';
  /* sits at the head of the review text (left gutter) so it reads as the opening
     quotation of the actual words, not a loose corner ornament */
  position: absolute; top: 168px; left: 16px; z-index: 0;
  font-family: 'Libre Baskerville', serif; font-weight: 700;
  font-size: 120px; line-height: 1;
  color: rgba(193,143,89,0.12); pointer-events: none;
  transition: color 0.78s ease;
}
.rcard.is-active::before { color: rgba(193,143,89,0.17); }
.rcard > * { position: relative; z-index: 1; }

.ravatar-wrap { position: relative; flex: 0 0 auto; margin-bottom: 14px; }
.ravatar {
  width: 76px; height: 76px; border-radius: 50%; object-fit: cover; display: block;
  background: var(--paper-warm);
  box-shadow: 0 0 0 3px #fff, 0 0 0 4px rgba(193,143,89,0.32),
              0 8px 20px -8px rgba(0,40,40,0.3);
  transition: box-shadow 0.78s ease;
}
.rcard.is-active .ravatar {
  box-shadow: 0 0 0 3px #fff, 0 0 0 4px rgba(193,143,89,0.6),
              0 12px 26px -8px rgba(0,40,40,0.38);
}
.ravatar-fb {
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 28px; color: var(--gold-deep);
  background: var(--gold-pale);
}
/* Google mark on the portrait — says "real review" without saying it */
.rverif {
  position: absolute; right: -2px; bottom: -2px;
  width: 32px; height: 32px; border-radius: 50%; background: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0,40,40,0.26);
}
.rverif svg { width: 19px; height: 19px; }

.rname {
  font-weight: 700; font-size: 15.5px; color: var(--navy-deep); line-height: 1.3;
  max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rwhen {
  font-size: 11px; color: var(--text-muted); margin-top: 3px;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.rstars-row { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 14px 0 4px; }

.rtext {
  font-size: 17px; color: var(--text-secondary); line-height: 1.65;
  display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3;
  -webkit-box-orient: vertical; overflow: hidden;
  flex: 1; min-height: calc(17px * 1.65 * 3);   /* every card the same height */
  margin: 12px 0 16px;
}
.rgo {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600; color: var(--gold-deep);
  padding: 7px 16px; border-radius: 999px;
  background: rgba(193,143,89,0.1);
  transition: background 0.3s ease, color 0.3s ease, gap 0.3s ease;
}
.rcard.is-active:hover .rgo { background: var(--navy); color: #fff; gap: 9px; }
.rgo svg { width: 12px; height: 12px; }

/* ---- Arrows ----
   Frosted glass over the cream backdrop with a gold hairline, so they read as
   part of the section rather than two white pucks dropped on top of it. The
   blur is affordable here: two static elements, nothing scrolling under them. */
.rnav {
  position: absolute; top: 50%; z-index: 2;
  width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, rgba(255,255,255,0.78), rgba(251,243,226,0.62));
  backdrop-filter: blur(10px);
  border: 1px solid rgba(193,143,89,0.32);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),          /* top-edge highlight = glass */
    0 6px 18px -6px rgba(0,40,40,0.22);
  cursor: pointer;
  transform: translateY(-50%);
  transition: background 0.28s ease, border-color 0.28s ease,
              box-shadow 0.28s ease, transform 0.28s cubic-bezier(0.22,1,0.36,1);
}
.rnav:hover {
  background: linear-gradient(150deg, var(--navy-mid), var(--navy));
  border-color: var(--gold);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.14),
    0 10px 26px -8px rgba(0,51,51,0.42),
    0 0 0 4px rgba(193,143,89,0.12);            /* soft gold halo */
}
.rnav:hover svg { stroke: var(--gold-glow); }
.rnav:active { transform: translateY(-50%) scale(0.94); }
.rnav:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.rnav svg {
  width: 18px; height: 18px; stroke: var(--navy); stroke-width: 2.4;
  fill: none; stroke-linecap: round; stroke-linejoin: round;
  transition: stroke 0.28s ease;
}
/* nudge the arrow the way it travels */
.rnav-prev:hover svg { transform: translateX(-1px); }
.rnav-next:hover svg { transform: translateX(1px); }

.rnav-prev { left: -14px; }
.rnav-next { right: -14px; }

/* ---- Dots ---- */
.rdots { display: flex; justify-content: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.rdot {
  width: 8px; height: 8px; border-radius: 999px; border: 0; padding: 0;
  cursor: pointer; background: rgba(0,40,40,0.16); transition: 0.22s ease;
}
.rdot:hover { background: rgba(193,143,89,0.5); }
.rdot.on { width: 26px; background: linear-gradient(90deg, var(--gold), var(--gold-deep)); }

/* ---- Skeleton ---- */
.skel-card {
  flex: 0 0 calc((100% - 40px) / 3); height: 300px; border-radius: 20px;
  background: linear-gradient(100deg, rgba(255,252,245,0.9) 30%, rgba(241,233,215,0.75) 50%, rgba(255,252,245,0.9) 70%);
  background-size: 220% 100%;
  animation: reviewShimmer 1.4s linear infinite;
  border: 1px solid rgba(0,40,40,0.06);
}
@keyframes reviewShimmer { from { background-position: 180% 0; } to { background-position: -40% 0; } }

/* ============================================================
   REVIEW MODAL — full text + the firm's reply
   ============================================================ */
.rmodal {
  position: fixed; inset: 0; z-index: 3000;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(0,26,26,0.55); backdrop-filter: blur(4px);
  opacity: 0; visibility: hidden;
  transition: opacity 0.22s ease, visibility 0.22s ease;
}
.rmodal.open { opacity: 1; visibility: visible; }
.rmodal-box {
  position: relative; width: 100%; max-width: 600px;
  max-height: 86vh; overflow-y: auto;
  background: var(--paper); border: 1px solid rgba(193,143,89,0.24);
  border-radius: 24px; padding: 34px 32px 30px;
  box-shadow: 0 24px 70px rgba(0,26,26,0.3);
  transform: translateY(14px) scale(0.97);
  transition: transform 0.26s cubic-bezier(0.22,1,0.36,1);
}
.rmodal.open .rmodal-box { transform: none; }
.rmodal-x {
  position: absolute; top: 16px; right: 16px;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid rgba(0,40,40,0.1); background: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: 0.18s ease;
}
.rmodal-x:hover { background: var(--navy); border-color: var(--navy); }
.rmodal-x:hover svg { stroke: #fff; }
.rmodal-x svg {
  width: 15px; height: 15px; stroke: var(--navy); stroke-width: 2.4;
  fill: none; stroke-linecap: round; transition: stroke 0.18s ease;
}
.rmodal-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.rmodal-head .ravatar { width: 56px; height: 56px; }
.rmodal-name { font-weight: 700; font-size: 17px; color: var(--navy-deep); }
.rmodal-when { font-size: 12.5px; color: var(--text-muted); margin-top: 3px; }
.rmodal-text {
  font-size: 15.5px; line-height: 1.78; color: var(--text-secondary);
  margin: 16px 0 22px; white-space: pre-wrap;
}
/* ---- The firm's answer, as a chat reply ----
   Avatar + bubble with a tail, indented from the review above it, so it reads
   as a response in a thread rather than a boxed-out footnote. */
.rmodal-reply {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 0 0 22px; padding-left: 26px;      /* indent = "this is a reply to that" */
}
/* Just the mark — no disc, no ring, no shadow behind it */
.rreply-avatar {
  flex: 0 0 34px; width: 34px; height: 34px;
  object-fit: contain;
}

.rreply-bubble {
  position: relative; flex: 1; min-width: 0;
  background: var(--gold-pale);
  border: 1px solid rgba(193,143,89,0.28);
  border-radius: 4px 16px 16px 16px;          /* squared corner points at the tail */
  padding: 12px 16px 13px;
  box-shadow: 0 4px 14px -8px rgba(0,40,40,0.25);
}
/* the tail — a small triangle pointing back at the avatar */
.rreply-bubble::before,
.rreply-bubble::after {
  content: ''; position: absolute; top: 10px; width: 0; height: 0;
  border-style: solid;
}
.rreply-bubble::before {                       /* border layer, sits 1px further out */
  left: -9px;
  border-width: 0 9px 9px 0;
  border-color: transparent rgba(193,143,89,0.28) transparent transparent;
}
.rreply-bubble::after {                        /* fill layer, covers all but the edge */
  left: -8px;
  border-width: 0 8px 8px 0;
  border-color: transparent var(--gold-pale) transparent transparent;
}
.rreply-bubble b {
  display: block; font-size: 12px; font-weight: 700; color: var(--gold-deep);
  letter-spacing: 0.02em; margin-bottom: 4px;
}
.rreply-bubble p {
  font-size: 14px; line-height: 1.65; color: var(--text-secondary);
  white-space: pre-wrap;
}
.rmodal-foot { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.rmodal-foot .gsum-cta { padding: 10px 18px; }

/* ---- Responsive: 3 → 2 → 1 per view ---- */
@media (max-width: 1024px) {
  .rcard, .rspacer, .skel-card { flex-basis: calc((100% - 20px) / 2); }
  .rnav-prev { left: -6px; }
  .rnav-next { right: -6px; }
}
@media (max-width: 768px) {
  .reviews-wrap { padding: 26px 14px 28px; margin: 18px 12px 6px; }
  .reviews-title { font-size: 22px; }

  /* One card, with a sliver of its neighbours peeking to say "swipe me". */
  .rcard, .rspacer, .skel-card { flex-basis: 78%; }
  .rtrack { gap: 14px; }
  .rcard { padding: 26px 20px 20px; }
  .rviewport { padding: 14px 0 18px; }

  /* Arrows stay — swiping is discoverable, but not everyone tries it. They ride
     over the peeking neighbour cards rather than the active one. */
  .rnav { width: 38px; height: 38px; }
  .rnav svg { width: 16px; height: 16px; }
  .rnav-prev { left: 0; }
  .rnav-next { right: 0; }

  .rviewport { -webkit-mask-image: none; mask-image: none; padding: 18px 0 30px; }

  .gsum { gap: 14px; padding: 14px 18px; margin-bottom: 18px; }
  .gsum-num { font-size: 32px; }

  .ravatar { width: 68px; height: 68px; }
  .rtext { font-size: 15.5px; min-height: calc(15.5px * 1.65 * 3); }

  .rdots { gap: 6px; }
  .rdot { width: 7px; height: 7px; }
  .rdot.on { width: 22px; }

  .rmodal-box { padding: 28px 20px 24px; max-height: 90vh; border-radius: 20px; }
  .rmodal-reply { padding-left: 0; gap: 8px; }
  .rreply-avatar { flex-basis: 30px; width: 30px; height: 30px; }
  .rmodal-text { font-size: 15px; }
  .rmodal-foot .gsum-cta { width: 100%; justify-content: center; }
}
@media (max-width: 400px) {
  .rcard, .rspacer, .skel-card { flex-basis: 82%; }
  .rcard { padding: 24px 16px 18px; }
  .rnav { width: 34px; height: 34px; }
}

/* Reduced motion: no autoplay drift, no shimmer */
@media (prefers-reduced-motion: reduce) {
  .rtrack { transition: none; }
  .skel-card { animation: none; }
}

/* ============================================================
   FILTER chips
   ============================================================ */
.filter-section {
  max-width: 1240px; margin: 48px auto 20px; padding: 0 40px;
}
.filter-inner {
  display: flex; flex-wrap: nowrap; align-items: center; gap: 8px;
  justify-content: center;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
}
.filter-inner::-webkit-scrollbar { display: none; }
.chip { flex-shrink: 0; }
.filter-label {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-muted);
  padding-right: 4px;
}
.chip {
  border: 1.5px solid rgba(11,26,26,0.15); cursor: pointer;
  background: #fff; color: var(--text-secondary);
  font-size: 12.5px; font-weight: 500;
  padding: 7px 16px; border-radius: var(--radius-full);
  transition: all .18s; font-family: inherit;
  line-height: 1;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.chip:hover {
  background: var(--gold-pale);
  border-color: var(--gold);
  color: var(--gold-deep);
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(193,143,89,0.18);
}
.chip.active {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 3px 10px rgba(0,40,40,0.25);
  transform: translateY(-1px);
  font-weight: 600;
}

/* ============================================================
   SECTION HEADER
   ============================================================ */
main {
  max-width: 1240px; margin: 0 auto 100px;
  padding: 0 40px;
}
.section-header {
  display: flex; justify-content: space-between; align-items: end;
  margin-bottom: 28px; gap: 24px;
}
.section-title {
  font-family: 'Libre Baskerville', serif;
  font-size: clamp(28px, 3.6vw, 42px);
  font-weight: 700; line-height: 1.15;
  color: var(--navy-deep);
  letter-spacing: -0.01em;
}
.section-title em {
  background: linear-gradient(135deg, var(--gold), var(--gold-deep));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; font-style: italic;
}
.section-count {
  font-size: 13px; color: var(--text-muted); font-weight: 500;
}

/* ============================================================
   SERVICES GRID
   ============================================================ */
.services-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
}

.svc-card {
  position: relative; background: var(--paper);
  border: 1px solid rgba(11,26,26,0.06);
  border-radius: var(--radius-xl);
  padding: 28px;
  overflow: hidden; cursor: pointer;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
  display: flex; flex-direction: column;
}
.svc-card::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 100% 0%, rgba(193,143,89,0.10) 0%, transparent 55%);
  opacity: 0; transition: opacity .4s; pointer-events: none;
}
.svc-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(193,143,89,0.35);
}
.svc-card:hover::before { opacity: 1; }
.svc-card.featured {
  border-color: rgba(193,143,89,0.4);
  background: linear-gradient(180deg, var(--paper) 0%, var(--gold-pale) 100%);
}
.svc-card.featured::after {
  content: ''; position: absolute; top: 0; right: 0;
  width: 120px; height: 120px;
  background: radial-gradient(circle at 100% 0%, rgba(193,143,89,0.25) 0%, transparent 70%);
}

.svc-icon-wrap {
  width: 56px; height: 56px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 22px;
  position: relative; z-index: 1;
}
.svc-top {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 12px;
  position: relative; z-index: 1;
}
.svc-tag {
  display: inline-block;
  font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 700;
  padding: 4px 10px; border-radius: var(--radius-full);
}
.svc-popular {
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--gold-deep);
  background: var(--gold-pale);
  padding: 4px 10px; border-radius: var(--radius-full);
}

.svc-name {
  font-family: 'Libre Baskerville', serif;
  font-size: 19px; font-weight: 700; line-height: 1.3;
  color: var(--navy-deep);
  margin-bottom: 10px; letter-spacing: -0.005em;
  position: relative; z-index: 1;
}
.svc-desc {
  font-size: 14px; line-height: 1.6;
  color: var(--text-secondary);
  margin-bottom: 18px;
  position: relative; z-index: 1;
}
.svc-pills {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 22px;
  position: relative; z-index: 1;
}
.pill {
  font-size: 11px; font-weight: 500;
  padding: 4px 10px; border-radius: var(--radius-full);
  background: rgba(11,26,26,0.04);
  color: var(--text-secondary);
}
.svc-footer {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid rgba(11,26,26,0.06);
  display: flex; align-items: center; justify-content: flex-end;
  gap: 12px; flex-wrap: wrap;
  position: relative; z-index: 1;
}
.svc-price {
  font-size: 12.5px; font-weight: 600;
  color: var(--text-secondary);
}
.svc-btn {
  border: none; cursor: pointer;
  background: var(--navy-deep); color: #fff;
  font-size: 13px; font-weight: 600;
  padding: 10px 18px; border-radius: 10px;
  transition: background .2s, transform .2s;
  font-family: inherit;
  text-decoration: none; display: inline-flex; align-items: center;
}
.svc-btn:hover {
  background: var(--navy);
  transform: translateY(-1px);
}

.no-results {
  display: none;
  text-align: center; padding: 60px 20px;
  color: var(--text-muted);
}
.no-results p:first-child {
  font-family: 'Libre Baskerville', serif; font-size: 22px;
  color: var(--text-primary); margin-bottom: 8px;
}

/* ============================================================
   CTA STRIP — dark glass band
   ============================================================ */
.cta-strip {
  margin-top: 64px;
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
  border-radius: var(--radius-xl);
  padding: 56px 48px;
  color: #fff;
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 36px; align-items: center;
}
.cta-strip::before {
  content: ''; position: absolute; width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(193,143,89,0.4) 0%, transparent 70%);
  top: -140px; right: -100px; filter: blur(40px);
}
.cta-strip::after {
  content: ''; position: absolute; width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(0,160,160,0.4) 0%, transparent 70%);
  bottom: -100px; left: -50px; filter: blur(40px);
}
.cta-text { position: relative; z-index: 1; }
.cta-eyebrow {
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold-glow); margin-bottom: 12px; font-weight: 600;
}
.cta-title {
  font-family: 'Libre Baskerville', serif;
  font-size: clamp(26px, 3.2vw, 36px); font-weight: 400;
  line-height: 1.2; margin-bottom: 10px; max-width: 22ch;
  letter-spacing: -0.01em;
}
.cta-title em {
  font-style: italic; color: var(--gold-glow);
}
.cta-sub {
  color: rgba(255,255,255,0.7); font-size: 14.5px; line-height: 1.6;
  max-width: 50ch;
}
.cta-actions {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; gap: 10px;
  align-items: stretch;
}

/* Buttons (used everywhere) */
.btn-primary, .btn-sec {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 14px; font-weight: 600;
  padding: 13px 26px; border-radius: var(--radius-full);
  cursor: pointer; text-decoration: none; text-align: center;
  transition: all .3s; font-family: inherit;
  white-space: nowrap;
}
.btn-primary {
  background: linear-gradient(135deg, var(--gold), var(--gold-glow));
  color: var(--navy-deep);
  border: none;
  box-shadow: var(--shadow-gold);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(193,143,89,0.55);
}
.btn-sec {
  background: rgba(255,255,255,0.08); color: #fff;
  border: 1px solid rgba(255,255,255,0.18);
}
.btn-sec:hover { background: rgba(255,255,255,0.16); }
/* on light bg */
.appt-info-card .btn-sec,
.appt-form-wrap .btn-sec,
.modal-actions .btn-sec {
  background: var(--paper); color: var(--navy-deep);
  border-color: var(--gray-200);
}
.appt-info-card .btn-sec:hover,
.appt-form-wrap .btn-sec:hover,
.modal-actions .btn-sec:hover {
  background: var(--gray-50); border-color: var(--gray-300);
}

/* ============================================================
   APPOINTMENT page
   ============================================================ */
.appt-layout {
  max-width: 1240px; margin: 30px auto 100px;
  padding: 0 40px;
  display: grid; grid-template-columns: 1fr 380px; gap: 28px;
}

.appt-form-wrap, .appt-main {
  background: var(--paper);
  border: 1px solid rgba(11,26,26,0.06);
  border-radius: var(--radius-xl);
  padding: 0;
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.appt-form-header {
  padding: 28px 32px 22px;
  border-bottom: 1px solid rgba(11,26,26,0.06);
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper-warm) 100%);
}
.appt-form-header h2 {
  font-family: 'Libre Baskerville', serif;
  font-size: 22px; font-weight: 700;
  color: var(--navy-deep); margin-bottom: 4px;
  letter-spacing: -0.005em;
}
.appt-form-header p {
  font-size: 13px; color: var(--text-secondary);
}

.appt-form-body { padding: 28px 32px; }
.appt-main { padding: 28px 32px; }

.form-section {
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px dashed rgba(11,26,26,0.08);
}
.form-section:last-of-type { border-bottom: none; padding-bottom: 0; margin-bottom: 24px; }
.form-section-title {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 16px;
}

.form-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  margin-bottom: 12px;
}
.form-row.single { grid-template-columns: 1fr; }
.form-row:last-child { margin-bottom: 0; }

.form-group { display: flex; flex-direction: column; }
.form-label {
  font-size: 12.5px; font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 6px;
}
.form-label span { color: var(--red); margin-left: 2px; }

.form-control {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--gray-200);
  border-radius: 10px;
  font-size: 14px;
  font-family: inherit;
  color: var(--text-primary);
  background: #fff;
  transition: border-color .2s, box-shadow .2s;
  outline: none;
}
.form-control:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(193,143,89,0.12);
}
.form-control::placeholder { color: var(--gray-400); }
textarea.form-control { resize: vertical; min-height: 90px; }
select.form-control {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23707878' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

/* Lawyer picks */
.lawyer-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}
.lawyer-pick {
  border: 1.5px solid var(--gray-200);
  border-radius: 14px;
  padding: 14px 12px; text-align: center;
  cursor: pointer; background: #fff;
  transition: all .2s;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.lawyer-pick:hover {
  border-color: var(--gold);
  background: var(--gold-pale);
  transform: translateY(-2px);
}
.lawyer-pick.selected {
  border-color: var(--navy);
  background: linear-gradient(180deg, var(--paper-warm), var(--gold-pale));
  box-shadow: 0 6px 18px rgba(193,143,89,0.18);
}
.lawyer-pick-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, var(--navy), var(--navy-mid));
  color: #fff; font-weight: 700; font-size: 16px;
  display: flex; align-items: center; justify-content: center;
}
.lawyer-pick-name {
  font-size: 13px; font-weight: 600;
  color: var(--text-primary); line-height: 1.3;
}
.lawyer-pick-spec {
  font-size: 11px; color: var(--text-muted);
}

/* Time slots */
.time-slots {
  display: flex; flex-wrap: wrap; gap: 8px;
  min-height: 50px;
}
.slot {
  background: #fff;
  border: 1.5px solid var(--gray-200);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 13px; font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
  transition: all .2s;
  font-family: inherit;
}
.slot:hover { border-color: var(--gold); background: var(--gold-pale); }
.slot.selected {
  background: var(--navy-deep);
  border-color: var(--navy-deep);
  color: #fff;
  box-shadow: 0 4px 12px rgba(0,51,51,0.25);
}
.slot.unavail {
  background: var(--gray-100);
  color: var(--gray-400);
  cursor: not-allowed;
  text-decoration: line-through;
}
.slot.unavail:hover { border-color: var(--gray-200); background: var(--gray-100); }

/* Meeting type */
.meet-type-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
}
.meet-type-card {
  border: 1.5px solid var(--gray-200);
  border-radius: 14px;
  padding: 18px 16px;
  cursor: pointer; background: #fff;
  transition: all .2s; text-align: center;
}
.meet-type-card:hover {
  border-color: var(--gold); background: var(--gold-pale);
}
.meet-type-card.selected {
  border-color: var(--navy);
  background: linear-gradient(180deg, var(--paper-warm), var(--gold-pale));
  box-shadow: 0 6px 18px rgba(193,143,89,0.18);
}
.meet-type-icon { font-size: 28px; margin-bottom: 8px; }
.meet-type-name {
  font-size: 14px; font-weight: 600;
  color: var(--text-primary); margin-bottom: 4px;
}
.meet-type-desc { font-size: 12px; color: var(--text-muted); }

/* Portal "Book New Appointment" modal — roomier rows + meeting cards that mirror
   the public Book page. Card class is .pb-meet (distinct from .meet-type-card) so
   the two forms' select handlers don't clash on the same page. */
#portalBookFormWrap > .form-group { margin-bottom: 18px; }
.pb-meet {
  border: 1.5px solid var(--gray-200); border-radius: 14px;
  padding: 18px 16px; cursor: pointer; background: #fff;
  transition: all .2s; text-align: center;
}
.pb-meet:hover { border-color: var(--gold); background: var(--gold-pale); }
.pb-meet.pb-meet--active {
  border-color: var(--navy);
  background: linear-gradient(180deg, var(--paper-warm), var(--gold-pale));
  box-shadow: 0 6px 18px rgba(193,143,89,0.18);
}
.pb-meet .meet-type-icon { line-height: 0; }

.submit-btn {
  width: 100%;
  background: linear-gradient(135deg, var(--gold), var(--gold-glow));
  color: var(--navy-deep);
  border: none;
  padding: 14px 24px;
  border-radius: var(--radius-full);
  font-size: 15px; font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow-gold);
  transition: transform .25s, box-shadow .25s;
  font-family: inherit;
}
.submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(193,143,89,0.55);
}

/* Success state */
.appt-success {
  display: none; text-align: center;
  padding: 56px 32px;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: #fff;
  border-radius: var(--radius-xl);
  position: relative; overflow: hidden;
}
.appt-success::before {
  content: ''; position: absolute; width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(193,143,89,0.3) 0%, transparent 70%);
  top: -120px; right: -80px; filter: blur(40px);
}
.appt-success > * { position: relative; z-index: 1; }
.success-icon {
  font-size: 48px; margin-bottom: 18px;
}
.appt-success h3 {
  font-family: 'Libre Baskerville', serif;
  font-size: 28px; font-weight: 700; margin-bottom: 10px;
  color: #fff;
}
.appt-success p {
  color: rgba(255,255,255,0.75);
  font-size: 14.5px; margin: 0 auto;
  max-width: 50ch;
}
.appt-ref {
  display: inline-block; margin: 24px auto 0;
  background: rgba(193,143,89,0.18);
  border: 1px solid rgba(193,143,89,0.4);
  color: var(--gold-glow);
  font-family: 'Courier New', monospace;
  font-size: 18px; font-weight: 700;
  letter-spacing: 2px;
  padding: 12px 22px; border-radius: 12px;
}

/* Sidebar */
.appt-sidebar, .appt-info-col {
  display: flex; flex-direction: column; gap: 16px;
}
.appt-info-card {
  background: var(--paper);
  border: 1px solid rgba(11,26,26,0.06);
  border-radius: var(--radius-lg);
  padding: 22px;
  box-shadow: var(--shadow-sm);
}
.appt-info-card h3 {
  font-family: 'Libre Baskerville', serif;
  font-size: 16px; font-weight: 700;
  color: var(--navy-deep);
  margin-bottom: 16px;
}
.info-row {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 10px 0;
  border-top: 1px dashed rgba(11,26,26,0.08);
}
.info-row:first-of-type { border-top: none; padding-top: 0; }
.info-icon { font-size: 18px; flex-shrink: 0; line-height: 1.4; }
.info-text {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.info-text strong {
  font-size: 13.5px; font-weight: 600; color: var(--text-primary);
}
.info-text span {
  font-size: 12.5px; color: var(--text-muted); line-height: 1.5;
}

/* ============================================================
   TEAM page
   ============================================================ */
.team-layout {
  max-width: 1240px; margin: 30px auto 100px;
  padding: 0 40px;
}
.team-intro {
  text-align: center; margin: 0 auto 40px;
  max-width: 720px;
}
.team-intro h2 {
  font-family: 'Libre Baskerville', serif;
  font-size: clamp(28px, 3.6vw, 40px);
  font-weight: 700;
  color: var(--navy-deep);
  letter-spacing: -0.01em;
  margin-bottom: 14px;
}
.team-intro h2 em {
  background: linear-gradient(135deg, var(--gold), var(--gold-deep));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; font-style: italic;
}
.team-intro p {
  color: var(--text-secondary); font-size: 15px; line-height: 1.7;
}

.team-section-label {
  font-family: 'Libre Baskerville', serif;
  font-size: 21px; font-style: normal;
  letter-spacing: -0.015em;
  color: var(--navy-deep);
  font-weight: 700;
  padding: 12px 0;
  margin-bottom: 8px;
  display: flex; align-items: center; justify-content: center; gap: 16px;
}
.team-section-label::before,
.team-section-label::after {
  content: ''; flex: 1; height: 3px;
}
.team-section-label::before {
  background: linear-gradient(to right, transparent, rgba(193,143,89,0.9) 65%);
}
.team-section-label::after {
  background: linear-gradient(to left, transparent, rgba(193,143,89,0.9) 65%);
}

.team-grid {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 20px;
}
.team-card {
  /* Grow to fill a full row (capped at max-width), so leftover cards on the
     last row stay centred instead of starting from the left. */
  flex: 1 1 300px; max-width: 380px;
  background: var(--paper);
  border: 1px solid rgba(11,26,26,0.06);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .35s, box-shadow .35s, border-color .35s;
  display: flex; flex-direction: column;
}
.team-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(193,143,89,0.3);
}
.team-card-banner {
  height: 80px;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%);
  position: relative;
}
.team-card-banner::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 80% 0%, rgba(193,143,89,0.35) 0%, transparent 60%);
}
.team-card-body {
  padding: 0 22px 22px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  flex: 1;
}
.team-avatar {
  width: 92px; height: 92px; border-radius: 50%;
  margin-top: -46px;
  background: var(--paper);
  border: 4px solid var(--paper);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  position: relative; z-index: 1;
}
.team-avatar img {
  width: 100%; height: 100%; object-fit: cover;
}
.team-name {
  font-family: 'Libre Baskerville', serif;
  font-size: 17px; font-weight: 700;
  color: var(--navy-deep);
  margin-top: 14px; margin-bottom: 4px;
  letter-spacing: -0.005em;
}
.team-role {
  font-size: 12px; font-weight: 500;
  color: var(--gold-deep);
  letter-spacing: 0.04em;
  margin-bottom: 12px;
}
.team-spec-tags {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px;
  margin-bottom: 12px;
}
.spec-tag {
  font-size: 10.5px; font-weight: 600;
  padding: 4px 10px; border-radius: var(--radius-full);
  background: rgba(193,143,89,0.10);
  color: var(--gold-deep);
}
.team-bio {
  font-size: 13px; line-height: 1.6;
  color: var(--text-secondary);
  margin-bottom: 16px;
}
.team-stats-row {
  display: flex; gap: 16px; justify-content: center;
  margin-top: auto; margin-bottom: 16px;
  width: 100%;
}
.t-stat { display: flex; flex-direction: column; align-items: center; }
.t-stat-num {
  font-family: 'Libre Baskerville', serif;
  font-size: 16px; font-weight: 700;
  color: var(--navy-deep);
}
.t-stat-label {
  font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted); font-weight: 600;
}
.team-btn {
  width: 100%;
  background: var(--navy-deep); color: #fff;
  border: none;
  padding: 11px 18px; border-radius: 10px;
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: background .2s, transform .2s;
  font-family: inherit;
}
.team-btn:hover {
  background: var(--navy);
  transform: translateY(-1px);
}

/* Values section (Team page) */
.values-section {
  margin-top: 64px;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
  border-radius: var(--radius-xl);
  padding: 56px 48px;
  color: #fff;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 40px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.values-section::before {
  content: ''; position: absolute; width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(193,143,89,0.4) 0%, transparent 70%);
  top: -120px; right: -100px; filter: blur(40px);
}
.values-section::after {
  content: ''; position: absolute; width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(0,160,160,0.4) 0%, transparent 70%);
  bottom: -100px; left: -50px; filter: blur(40px);
}
.values-text { position: relative; z-index: 1; }
.values-text h3 {
  font-family: 'Libre Baskerville', serif;
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin-bottom: 16px;
}
.values-text h3 em {
  font-style: italic;
  color: var(--gold-glow);
}
.values-text p {
  color: rgba(255,255,255,0.7);
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 24px;
  max-width: 42ch;
}
.values-list {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
}
.value-item {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(8px);
  border-radius: var(--radius-lg);
  padding: 18px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  transition: background .2s, transform .2s;
}
.value-item:hover {
  background: rgba(255,255,255,0.08);
  transform: translateY(-3px);
}
.value-icon {
  font-size: 24px;
  flex-shrink: 0;
  line-height: 1.4;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.3));
}
.value-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.value-text strong {
  font-family: 'Libre Baskerville', serif;
  font-size: 14.5px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.005em;
}
.value-text span {
  font-size: 12.5px;
  line-height: 1.55;
  color: rgba(255,255,255,0.6);
}

/* ============================================================
   CLIENT PORTAL
   ============================================================ */
.portal-login {
  max-width: 460px;
  margin: 60px auto 100px;
  padding: 0 24px;
}
.login-card {
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: #fff;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  position: relative;
}
.login-card::before {
  content: ''; position: absolute; width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(193,143,89,0.35) 0%, transparent 70%);
  top: -100px; right: -80px; filter: blur(30px);
  pointer-events: none;
}
.login-header {
  padding: 32px 32px 24px; text-align: center;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  position: relative;
}
.login-logo {
  font-family: 'Libre Baskerville', serif;
  font-size: 18px; color: var(--gold-glow);
  margin-bottom: 8px;
}
.login-title {
  font-size: 11px; letter-spacing: 0.32em;
  color: rgba(255,255,255,0.55);
}
.login-body {
  padding: 28px 32px 32px;
  position: relative;
}
.login-body h3 {
  font-family: 'Libre Baskerville', serif;
  font-size: 22px; font-weight: 700;
  margin-bottom: 6px;
}
.login-body > p {
  font-size: 13.5px;
  color: rgba(255,255,255,0.6);
  line-height: 1.6;
  margin-bottom: 22px;
}
.login-form-group { margin-bottom: 14px; }
.login-label {
  display: block;
  font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.7);
  margin-bottom: 6px;
}
.login-input {
  width: 100%;
  padding: 12px 14px;
  background: rgba(255,255,255,0.08);
  border: 1.5px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  font-size: 14px; font-family: inherit;
  color: #fff;
  outline: none;
  transition: border-color .2s, background .2s;
}
.login-input::placeholder { color: rgba(255,255,255,0.35); }
.login-input:focus {
  border-color: var(--gold);
  background: rgba(255,255,255,0.12);
  box-shadow: 0 0 0 4px rgba(193,143,89,0.18);
}
.login-btn {
  width: 100%;
  background: linear-gradient(135deg, var(--gold), var(--gold-glow));
  color: var(--navy-deep);
  border: none;
  padding: 13px;
  border-radius: 10px;
  font-size: 14.5px; font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  box-shadow: var(--shadow-gold);
  transition: transform .2s, box-shadow .2s;
}
.login-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(193,143,89,0.55);
}
.login-note {
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  text-align: center;
  margin-top: 16px;
  line-height: 1.6;
}

/* Portal Dashboard */
.portal-dashboard {
  display: none;
  max-width: 1240px; margin: 30px auto 100px;
  padding: 0 40px;
}
.portal-dashboard.visible { display: block; }

.portal-topbar {
  display: flex; justify-content: space-between; align-items: center;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: #fff;
  padding: 18px 26px;
  border-radius: var(--radius-lg);
  margin-bottom: 16px;
  box-shadow: var(--shadow-md);
  position: relative; overflow: hidden;
}
.portal-topbar::before {
  content: ''; position: absolute; width: 240px; height: 240px;
  background: radial-gradient(circle, rgba(193,143,89,0.3) 0%, transparent 70%);
  top: -100px; right: -60px; filter: blur(30px);
}
.portal-user {
  display: flex; align-items: center; gap: 12px;
  position: relative; z-index: 1;
}
.portal-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--gold-glow));
  color: var(--navy-deep);
  font-weight: 700; font-size: 17px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 14px rgba(193,143,89,0.4);
}
.portal-user-name {
  font-family: 'Libre Baskerville', serif;
  font-size: 16px; font-weight: 700;
  margin-bottom: 2px;
}
.portal-user-sub {
  font-size: 11.5px;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.04em;
}
.portal-logout {
  position: relative; z-index: 1;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
  color: rgba(255,255,255,0.85);
  padding: 8px 16px;
  border-radius: var(--radius-full);
  font-size: 12.5px; font-weight: 500;
  cursor: pointer;
  transition: all .2s;
  font-family: inherit;
}
.portal-logout:hover {
  background: rgba(255,255,255,0.16); color: #fff;
}
.portal-topbar-actions {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 8px;
}
/* Replay the guided tour. Round, quiet, and the same weight as Sign Out — it is a
   way back in, not a call to action. */
.portal-help {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
  color: rgba(255,255,255,0.85);
  font-size: 15px; font-weight: 700; line-height: 1;
  font-family: inherit;
  cursor: pointer;
  transition: all .2s;
  flex-shrink: 0;
}
.portal-help:hover { background: var(--gold); border-color: var(--gold); color: var(--navy-deep); }

/* Tabs */
.portal-tabs {
  display: flex; flex-wrap: wrap; gap: 4px;
  background: var(--paper);
  border: 1px solid rgba(11,26,26,0.06);
  border-radius: var(--radius-lg);
  padding: 8px;
  margin-bottom: 18px;
  box-shadow: var(--shadow-sm);
  overflow-x: auto;
}
.ptab {
  border: none; cursor: pointer;
  background: transparent; color: var(--text-secondary);
  font-size: 13px; font-weight: 500;
  padding: 9px 16px;
  border-radius: 10px;
  transition: all .2s;
  font-family: inherit;
  white-space: nowrap;
}
.ptab:hover { background: rgba(193,143,89,0.08); color: var(--text-primary); }
.ptab.active {
  background: linear-gradient(135deg, var(--navy), var(--navy-mid));
  color: #fff;
  box-shadow: 0 4px 10px rgba(0,51,51,0.22);
}

.portal-layout { display: block; }
.portal-content { display: block; }

.portal-section { display: none; }
.portal-section.visible { display: block; }

.portal-overview-bottom {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 20px;
}
.portal-profile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* Overview cards */
.overview-cards {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  margin-bottom: 22px;
}
.ov-card {
  background: var(--paper);
  border: 1px solid rgba(11,26,26,0.06);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-sm);
  transition: transform .25s, box-shadow .25s;
  position: relative; overflow: hidden;
}
.ov-card::before {
  content: ''; position: absolute; top: 0; right: 0; width: 50px; height: 50px;
  background: radial-gradient(circle, rgba(193,143,89,0.18) 0%, transparent 70%);
  border-radius: 50%;
}
.ov-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.ov-label {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 10px;
}
.ov-val {
  font-family: 'Libre Baskerville', serif;
  font-size: 28px; font-weight: 700;
  color: var(--navy-deep);
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}
.ov-sub {
  font-size: 12px; color: var(--text-muted);
}

/* Timeline */
.timeline-wrap {
  background: var(--paper);
  border: 1px solid rgba(11,26,26,0.06);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-sm);
}
.timeline-title {
  font-family: 'Libre Baskerville', serif;
  font-size: 16px; font-weight: 700;
  color: var(--navy-deep);
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px dashed rgba(11,26,26,0.08);
}
.timeline { position: relative; padding-left: 8px; }
.timeline::before {
  content: ''; position: absolute;
  left: 11px; top: 8px; bottom: 8px;
  width: 2px; background: rgba(193,143,89,0.25);
}
.tl-item {
  display: flex; gap: 14px;
  padding: 10px 0; position: relative;
}
.tl-dot {
  width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  flex-shrink: 0; position: relative; z-index: 1;
  background: var(--paper);
}
.tl-dot.done {
  background: var(--green);
  color: #fff;
  box-shadow: 0 0 0 3px var(--paper), 0 0 12px rgba(22,163,74,0.4);
}
.tl-dot.current {
  background: var(--gold);
  color: var(--navy-deep);
  box-shadow: 0 0 0 3px var(--paper), 0 0 14px rgba(193,143,89,0.55);
}
.tl-dot.upcoming {
  background: var(--paper);
  color: var(--gray-400);
  border: 2px solid var(--gray-200);
  box-shadow: 0 0 0 3px var(--paper);
}
.tl-dot.cancelled {
  background: #DC2626; color: #fff;
  box-shadow: 0 0 0 3px var(--paper), 0 0 12px rgba(220,38,38,0.4);
}
/* Gentle pulse on the current step so the customer's eye lands on "where we are now". */
@keyframes tlPulse {
  0%, 100% { box-shadow: 0 0 0 3px var(--paper), 0 0 14px rgba(193,143,89,0.55); }
  50%      { box-shadow: 0 0 0 3px var(--paper), 0 0 22px rgba(193,143,89,0.9); }
}
.tl-dot.current { animation: tlPulse 2.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .tl-dot.current { animation: none; } }
.tl-body { flex: 1; padding-bottom: 8px; }
.tl-title {
  font-size: 13.5px; font-weight: 600;
  color: var(--text-primary); margin-bottom: 2px;
}
.tl-title.muted { color: var(--text-muted); font-weight: 500; }
.tl-date {
  font-size: 11.5px; color: var(--text-muted);
  letter-spacing: 0.04em;
}

/* Cases table */
.cases-table {
  background: var(--paper);
  border: 1px solid rgba(11,26,26,0.06);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.cases-table-header {
  display: grid; grid-template-columns: 130px 1fr 130px 1fr 110px;
  gap: 12px;
  padding: 14px 22px;
  background: var(--gray-50);
  border-bottom: 1px solid rgba(11,26,26,0.06);
}
.cases-th {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-muted);
}
.case-row {
  display: grid; grid-template-columns: 130px 1fr 130px 1fr 110px;
  gap: 12px;
  padding: 16px 22px;
  border-bottom: 1px solid rgba(11,26,26,0.06);
  align-items: center;
  transition: background .15s;
}
.case-row:last-child { border-bottom: none; }
.case-row:hover { background: var(--gold-pale); }
.case-id {
  font-family: 'Courier New', monospace;
  font-weight: 700; color: var(--navy-deep);
  font-size: 13px;
}
.case-title {
  font-size: 13.5px; font-weight: 600;
  color: var(--text-primary);
}
.case-sub {
  font-size: 11.5px; color: var(--text-muted);
  margin-top: 2px;
}
.case-status {
  display: inline-block;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--radius-full);
}
.case-status.active        { background: var(--blue-light);   color: var(--blue-deep); }
.case-status.on_hold       { background: var(--amber-light);  color: var(--amber-deep); }
.case-status.closed_won    { background: var(--green-light);  color: var(--green-deep); }
.case-status.closed_lost   { background: var(--red-light);    color: var(--red-deep); }
.case-status.closed        { background: var(--gray-100);     color: var(--gray-700); }
.case-lawyer { font-size: 13px; color: var(--text-secondary); }
.case-date {
  font-size: 12px; color: var(--text-muted);
  letter-spacing: 0.04em;
}

/* Deal Cards */
.deal-card {
  background: var(--paper);
  border: 1px solid rgba(11,26,26,0.06);
  border-radius: var(--radius-lg);
  padding: 18px 22px;
  display: flex; align-items: center; gap: 16px;
  cursor: pointer;
  transition: box-shadow .2s, border-color .2s, transform .2s;
  box-shadow: var(--shadow-sm);
  text-decoration: none;
}
.deal-card:hover {
  border-color: rgba(193,143,89,0.4);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.deal-card-ref {
  font-family: 'Courier New', monospace;
  font-weight: 700; font-size: 13px;
  color: var(--navy-deep);
  white-space: nowrap;
  min-width: 90px;
}
.deal-card-body { flex: 1; min-width: 0; }
.deal-card-title { font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; }
.deal-card-sub { font-size: 12px; color: var(--text-muted); }
.deal-card-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.deal-card-arrow { color: var(--gold); font-size: 18px; flex-shrink: 0; }

/* Deal Room sub-tabs */
.dtab {
  padding: 8px 16px; border: none; background: none; cursor: pointer;
  font-size: 13px; font-weight: 500; color: var(--text-muted);
  border-bottom: 2px solid transparent; margin-bottom: -2px;
  border-radius: 6px 6px 0 0; white-space: nowrap;
  transition: color .15s, border-color .15s;
}
.dtab.active { color: var(--navy-deep); border-bottom-color: var(--gold); font-weight: 600; }
.dtab:hover:not(.active) { color: var(--navy-deep); }

/* Deal Room split workspace (portal) */
.portal-dr-workspace {
  display: grid; grid-template-columns: 1fr 400px; gap: 0; align-items: start;
  background: var(--paper); border: 1px solid rgba(11,26,26,0.07);
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 2px 16px rgba(0,26,26,.07);
}
.portal-dr-left { padding: 22px 24px; }
/* Right column = the case's ticket correspondence (light, formatted, osTicket-style).
   No height lock: the reply form + thread flow and the PAGE scrolls, so the Send button
   is never clipped or trapped behind a nested scrollbar. */
.portal-dr-right {
  background: var(--cream);
  border-left: 1px solid rgba(11,26,26,.07);
  overflow-x: hidden; padding: 14px 14px 22px;
}
.portal-dr-chat-hdr { display: none; }   /* replaced by the ticket thread label */
/* This column is only ~400px wide, so keep the ticket form compact: stack the identity
   fields, let inputs shrink, and never let anything push past the edge. */
.portal-dr-right .tk-idrow { grid-template-columns: 1fr; gap: 10px; margin-bottom: 12px; }
.portal-dr-right .tk-reply-bd { padding: 14px; }
.portal-dr-right .tk-editor { min-height: 88px; }
.portal-dr-right .tk-reply, .portal-dr-right .tk-editor-wrap,
.portal-dr-right .tk-entry, .portal-dr-right .tk-preview { max-width: 100%; }
.portal-dr-tab-bar {
  display: flex; gap: 4px;
  border-bottom: 2px solid rgba(11,26,26,.1);
  margin-bottom: 20px; overflow-x: auto;
}
@media(max-width:900px){
  .portal-dr-workspace { grid-template-columns:1fr; min-height:auto; }
  .portal-dr-left { padding:16px; border-right:none; border-bottom:1px solid rgba(11,26,26,.08); max-height:none; min-height:auto; }
  .portal-dr-right { border-left:none; max-height:none; min-height:auto; }
}

/* ============================================================
   TICKET-STYLE CORRESPONDENCE (.tk-*) — shared look for the case
   Deal Room (portal) and the admin client reply. osTicket-inspired,
   Magna Carta palette. See ticket-preview.html for the reference.
   ============================================================ */
/* Reply form (the "ตอบกลับ" card) */
.tk-reply { background: var(--paper); border: 1px solid #E7E1D4; border-radius: 14px;
  box-shadow: 0 10px 30px -22px rgba(0,40,40,.4); margin-bottom: 18px; overflow: hidden; }
.tk-reply-hd { display: flex; align-items: center; gap: 9px; cursor: pointer; user-select: none;
  padding: 12px 16px; background: linear-gradient(180deg, var(--gold-pale), #F7EEDD); border-bottom: 1px solid #E7E1D4; }
.tk-reply-hd .pencil { color: var(--gold-deep); display: flex; }
.tk-reply-hd .ttl { font-weight: 700; font-size: 13.5px; color: var(--navy); flex: 1; }
.tk-reply-hd .chev { border: none; background: transparent; cursor: pointer; color: var(--gold-deep); display: flex; transition: transform .25s ease; padding: 0; }
.tk-reply.collapsed .chev { transform: rotate(-90deg); }
.tk-reply.collapsed .tk-reply-bd { display: none; }
.tk-reply-bd { padding: 16px; }
.tk-idrow { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.tk-field { display: flex; flex-direction: column; gap: 5px; }
.tk-field label { font-size: 11.5px; font-weight: 600; color: var(--text-secondary); }
.tk-field input { font: inherit; font-size: 13px; padding: 8px 11px; border: 1px solid #E7E1D4;
  border-radius: 9px; background: var(--paper-warm); color: var(--text-secondary);
  min-width: 0; width: 100%; }
.tk-field input[readonly] { cursor: default; }
.tk-lbl { display: block; font-size: 11.5px; font-weight: 600; color: var(--text-secondary); margin: 0 0 6px; }
/* editor */
.tk-editor-wrap { border: 1px solid #E7E1D4; border-radius: 9px; overflow: hidden; background: #fff; margin-bottom: 14px; }
.tk-editor-wrap:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(193,143,89,.12); }
.tk-toolbar { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; padding: 6px 8px; background: #FAF6EC; border-bottom: 1px solid #F0EBDF; }
.tk-toolbar button { min-width: 29px; height: 29px; padding: 0 7px; border: 1px solid transparent; border-radius: 6px;
  background: transparent; color: var(--text-secondary); cursor: pointer; font: inherit; font-size: 13.5px;
  display: inline-flex; align-items: center; justify-content: center; }
.tk-toolbar button:hover { background: #fff; border-color: #E7E1D4; color: var(--navy); }
.tk-sep { width: 1px; height: 18px; background: #E7E1D4; margin: 0 5px; }
.tk-toolbar .grow { flex: 1; }
.tk-toolbar .tk-preview-btn { min-width: auto; gap: 6px; padding: 0 12px; font-size: 12px; font-weight: 600;
  color: var(--navy); border-color: #E7E1D4; background: #fff; }
.tk-toolbar .tk-preview-btn.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.tk-editor { min-height: 120px; max-height: 300px; overflow-y: auto; padding: 12px 14px;
  font-size: 13.5px; line-height: 1.62; color: var(--text-primary); outline: none; }
.tk-editor:empty:before { content: attr(data-ph); color: #A9B2B0; }
.tk-editor p { margin: 0 0 8px; } .tk-editor p:last-child { margin-bottom: 0; }
.tk-editor ul, .tk-editor ol { margin: 5px 0 8px; padding-left: 24px; }
.tk-editor a { color: var(--gold-deep); text-decoration: underline; }
.tk-preview { padding: 12px 14px; min-height: 120px; font-size: 13.5px; line-height: 1.62; }
.tk-status { display: flex; align-items: center; gap: 10px; padding: 6px 13px; background: #FAF6EC;
  border-top: 1px solid #F0EBDF; font-size: 11px; color: var(--text-muted); }
.tk-status .grow { flex: 1; }
.tk-saved { color: #4E8C6A; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
/* attachments */
.tk-files { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.tk-file-row { display: flex; align-items: center; gap: 8px; }
.tk-file-row input[type=file] { font: inherit; font-size: 12px; flex: 1; padding: 7px 9px;
  border: 1px solid #E7E1D4; border-radius: 9px; background: #fff; color: var(--text-secondary); min-width: 0; }
.tk-file-x { border: none; background: transparent; cursor: pointer; color: var(--text-muted);
  width: 28px; height: 28px; border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tk-file-x:hover { background: #FBEAEA; color: #C0392B; }
.tk-addmore { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 12px; font-weight: 600;
  color: var(--navy); background: #fff; border: 1px solid #E7E1D4; border-radius: 99px; padding: 7px 14px; cursor: pointer; }
.tk-addmore:hover { border-color: var(--gold); color: var(--gold-deep); }
.tk-hint { font-size: 10.5px; color: var(--text-muted); margin: 9px 0 0; line-height: 1.5; }
/* actions */
.tk-actions { display: flex; gap: 10px; justify-content: center; margin-top: 18px; padding-top: 15px; border-top: 1px solid #F0EBDF; }
.tk-btn { font: inherit; font-size: 13px; font-weight: 700; padding: 10px 30px; border-radius: 99px; cursor: pointer; border: 1px solid transparent; }
.tk-btn-primary { background: linear-gradient(135deg, var(--gold), var(--gold-deep)); color: #fff; box-shadow: 0 6px 16px -8px rgba(193,143,89,.7); }
.tk-btn-primary:hover { filter: brightness(1.05); }
.tk-btn-primary:disabled { opacity: .5; cursor: default; box-shadow: none; }
.tk-btn-ghost { background: #fff; color: var(--text-secondary); border-color: #E7E1D4; }
.tk-btn-ghost:hover { background: var(--paper-warm); }
/* thread (each message = a ticket entry) */
.tk-thread-lbl { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); font-weight: 700; margin: 2px 2px 12px; }
.tk-thread { display: flex; flex-direction: column; gap: 12px; }
.tk-entry { background: #fff; border: 1px solid #E7E1D4; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 14px -12px rgba(0,40,40,.4); }
.tk-entry.firm { border-left: 3px solid var(--gold); }
.tk-entry.me   { border-left: 3px solid #4E8C8C; }
.tk-entry-hd { display: flex; align-items: center; gap: 9px; padding: 10px 14px; border-bottom: 1px solid #F0EBDF; background: linear-gradient(180deg, #FCFAF4, #F8F3E9); }
.tk-av { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; color: #fff; }
.tk-entry.firm .tk-av { background: linear-gradient(135deg, var(--gold), var(--gold-deep)); }
.tk-entry.me   .tk-av { background: linear-gradient(135deg, #6FB3B3, #4E8C8C); }
.tk-who { font-weight: 700; font-size: 13px; color: var(--navy); }
.tk-role { font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 2px 7px; border-radius: 99px; }
.tk-role.firm { color: var(--gold-deep); background: var(--gold-pale); border: 1px solid rgba(193,143,89,.35); }
.tk-role.me   { color: #2C6E6E; background: #E4F1F1; border: 1px solid rgba(78,140,140,.3); }
.tk-time { margin-left: auto; font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.tk-body { padding: 13px 14px; font-size: 13.5px; line-height: 1.66; color: var(--text-secondary); word-wrap: break-word; overflow-wrap: anywhere; }
.tk-body p { margin: 0 0 8px; } .tk-body p:last-child { margin-bottom: 0; }
.tk-body ul, .tk-body ol { margin: 5px 0 8px; padding-left: 24px; }
.tk-body a { color: var(--gold-deep); text-decoration: underline; }
.tk-body u { text-decoration: underline; }
@media (max-width: 560px) { .tk-idrow { grid-template-columns: 1fr; } }

/* Messages */
.msg-layout { display: grid; gap: 16px; }
.msg-area {
  background: var(--paper);
  border: 1px solid rgba(11,26,26,0.06);
  border-radius: var(--radius-lg);
  display: flex; flex-direction: column;
  height: 600px; max-height: 75vh;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.msg-area-header {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 20px;
  background: linear-gradient(180deg, var(--navy), var(--navy-deep));
  color: #fff;
  flex-shrink: 0;
}
.msg-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--gold-glow));
  color: var(--navy-deep);
  font-weight: 700; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.msg-area-name {
  font-family: 'Libre Baskerville', serif;
  font-size: 14.5px; font-weight: 700;
}
.msg-area-role {
  font-size: 11.5px;
  color: rgba(255,255,255,0.55);
}
.msg-body {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 12px;
  background: linear-gradient(180deg, var(--gray-50) 0%, var(--paper) 100%);
}
.msg-bubble-wrap {
  display: flex; gap: 8px;
  max-width: 75%;
  align-self: flex-start;
}
.msg-bubble-wrap.mine {
  align-self: flex-end;
  flex-direction: row-reverse;
}
.msg-bubble {
  padding: 10px 14px;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 16px 16px 16px 4px;
  font-size: 13.5px; line-height: 1.55;
  color: var(--text-primary);
  word-wrap: break-word;
}
.msg-bubble-wrap.mine .msg-bubble {
  background: linear-gradient(135deg, var(--navy), var(--navy-mid));
  color: #fff; border-color: transparent;
  border-radius: 16px 16px 4px 16px;
}
.msg-time {
  font-size: 10.5px; color: var(--text-muted);
  margin-top: 4px; padding: 0 8px;
}
.msg-input-row {
  display: flex; gap: 8px;
  padding: 12px;
  background: var(--paper);
  border-top: 1px solid var(--gray-200);
  flex-shrink: 0;
}
.msg-input {
  flex: 1;
  padding: 10px 14px;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-full);
  font-size: 14px; font-family: inherit;
  outline: none;
  transition: border-color .2s;
}
.msg-input:focus { border-color: var(--gold); }
.msg-send {
  border: none; cursor: pointer;
  background: linear-gradient(135deg, var(--gold), var(--gold-glow));
  color: var(--navy-deep);
  padding: 10px 22px;
  border-radius: var(--radius-full);
  font-size: 13.5px; font-weight: 700;
  font-family: inherit;
  box-shadow: var(--shadow-gold);
  transition: transform .2s;
}
.msg-send:hover { transform: translateY(-1px); }

/* Documents */
.docs-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px;
}
.doc-card {
  background: var(--paper);
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 18px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  transition: all .25s;
  box-shadow: var(--shadow-sm);
}
.doc-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: rgba(193,143,89,0.3);
}
.doc-icon {
  width: 48px; height: 48px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  margin-bottom: 12px;
}
.doc-name {
  font-size: 13.5px; font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
  word-break: break-word;
}
.doc-meta {
  font-size: 11.5px; color: var(--text-muted);
  margin-bottom: 12px;
}
.doc-download {
  display: inline-block;
  background: var(--navy-deep); color: #fff;
  padding: 7px 16px;
  border-radius: var(--radius-full);
  font-size: 12px; font-weight: 600;
  text-decoration: none;
  margin-top: 6px;
  transition: background .2s, transform .2s;
}
.doc-download:hover {
  background: var(--navy);
  transform: translateY(-1px);
}

/* Generic .card (used in Profile/Consent) */
.card {
  background: var(--paper);
  border: 1px solid rgba(11,26,26,0.06);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.card-header {
  background: var(--gray-50);
  padding: 14px 20px;
  border-bottom: 1px solid rgba(11,26,26,0.06);
}

/* ============================================================
   SERVICE DETAIL MODAL & PORTAL BOOK MODAL
   ============================================================ */
.modal-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0, 26, 26, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 8000;
  align-items: center; justify-content: center;
  padding: 20px;
  animation: modalFadeIn .2s ease;
}
.modal-overlay.open { display: flex; }
@keyframes modalFadeIn { from { opacity: 0 } to { opacity: 1 } }

.modal {
  background: var(--paper);
  border-radius: var(--radius-xl);
  max-width: 640px;
  width: 100%;
  max-height: 90vh;
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-xl);
  animation: modalSlideUp .3s ease;
}
@keyframes modalSlideUp {
  from { opacity: 0; transform: translateY(20px) scale(.97) }
  to   { opacity: 1; transform: translateY(0) scale(1) }
}
.modal-header {
  position: relative;
  padding: 28px 32px 22px;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: #fff;
  overflow: hidden;
  flex-shrink: 0;
}
.modal-header::before {
  content: ''; position: absolute; width: 240px; height: 240px;
  background: radial-gradient(circle, rgba(193,143,89,0.32) 0%, transparent 70%);
  top: -100px; right: -60px; filter: blur(30px);
}
.modal-close {
  position: absolute; top: 14px; right: 14px;
  width: 34px; height: 34px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 50%;
  color: #fff;
  font-size: 22px; line-height: 1;
  cursor: pointer; z-index: 1;
  transition: background .15s;
}
.modal-close:hover { background: rgba(255,255,255,0.22); }

.modal-tag {
  position: relative; z-index: 1;
  display: inline-block;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  background: rgba(193,143,89,0.18);
  color: var(--gold-glow);
  border: 1px solid rgba(193,143,89,0.3);
  margin-bottom: 12px;
}
.modal-title {
  position: relative; z-index: 1;
  font-family: 'Libre Baskerville', serif;
  font-size: clamp(18px, 2.4vw, 26px); font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
  line-height: 1.3;
  word-break: break-word;
}

.modal-body {
  padding: 26px 32px 28px;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
}
.modal-desc-wrap {
  position: relative;
  margin-bottom: 22px;
}
.modal-desc-wrap::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0; height: 44px;
  background: linear-gradient(transparent, #fff);
  pointer-events: none;
  opacity: 1; transition: opacity .2s;
}
.modal-desc-wrap.desc-no-fade::after { opacity: 0; }
.modal-desc {
  font-size: 14.5px; line-height: 1.7;
  color: var(--text-secondary);
  max-height: 200px; overflow-y: auto;
  padding-right: 6px;
  scrollbar-width: thin; scrollbar-color: rgba(193,143,89,0.35) transparent;
}
.modal-desc::-webkit-scrollbar { width: 4px; }
.modal-desc::-webkit-scrollbar-track { background: transparent; }
.modal-desc::-webkit-scrollbar-thumb { background: rgba(193,143,89,0.4); border-radius: 4px; }
.modal-services h4 {
  font-family: 'Libre Baskerville', serif;
  font-size: 14px; font-weight: 700;
  color: var(--navy-deep);
  margin-bottom: 12px;
}
.modal-service-list {
  list-style: none; padding: 0; margin: 0 0 22px;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.modal-service-list li {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 13px 5px 10px;
  background: #F3F4F6;
  border: 1px solid #E5E7EB;
  border-radius: 20px;
  font-size: 12.5px; color: var(--text-primary);
  line-height: 1.4;
}
.modal-service-list li::before {
  content: '✓';
  color: var(--gold-deep); font-weight: 700; font-size: 11px;
  flex-shrink: 0;
}
.modal-service-list li.svc-hidden { display: none; }
.svc-show-more {
  display: inline-flex; align-items: center;
  padding: 5px 14px;
  background: transparent;
  border: 1px dashed #9CA3AF;
  border-radius: 20px;
  font-size: 12px; color: #6B7280;
  cursor: pointer; margin-bottom: 22px;
  transition: border-color .15s, color .15s;
}
.svc-show-more:hover { border-color: var(--gold); color: var(--gold-deep); }
.modal-price-row {
  background: var(--gold-pale);
  border: 1px solid rgba(193,143,89,0.3);
  border-radius: var(--radius-lg);
  padding: 18px;
  margin-bottom: 22px;
  display: flex; gap: 12px;
}
/* One framed panel so the heading + advisor cards read as a single block —
   makes it obvious the cards below are people you can call. */
.home-sales-wrap {
  position: relative;
  max-width: 1240px; /* match every other section (hero/stats/filter/services/footer) */
  margin: 28px auto 8px;
  padding: 34px 28px 40px;
}
/* Soft glowing backdrop with feathered (faded) edges — no hard border/box, melts
   into the page. On a pseudo so the cards above stay fully opaque (a mask on the
   wrap itself would fade the cards too). Static — no motion. */
.home-sales-wrap::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  border-radius: 28px;
  background:
    radial-gradient(58% 70% at 10% 6%,  rgba(193,143,89,0.16) 0%, rgba(193,143,89,0) 55%),
    radial-gradient(52% 62% at 94% 14%, rgba(0,40,40,0.055) 0%, rgba(0,40,40,0) 55%),
    radial-gradient(70% 78% at 86% 100%, rgba(193,143,89,0.13) 0%, rgba(193,143,89,0) 60%),
    linear-gradient(180deg, #FCF5E8 0%, var(--gold-pale) 100%);
  -webkit-mask-image: radial-gradient(118% 130% at 50% 48%, #000 52%, transparent 100%);
          mask-image: radial-gradient(118% 130% at 50% 48%, #000 52%, transparent 100%);
}
.home-sales-header {
  text-align: center;
  margin-bottom: 26px;
}
.home-sales-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gold-deep); margin-bottom: 8px;
}
.home-sales-title {
  font-size: 24px; font-weight: 800; color: var(--navy);
  margin: 0 0 10px; line-height: 1.2;
}
.home-sales-sub {
  font-size: 14px; color: var(--text-secondary); line-height: 1.5;
  max-width: 540px; margin: 2px auto 0;
}
.home-sales-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  /* 4 cards per row on desktop: 4×210 + 3×20 = 900 (small slack to avoid
     sub-pixel wrap; not enough room for a 5th, which would need +230). */
  max-width: 910px;
  margin: 0 auto;
}
.home-adv-card {
  background: #fff;
  border: 1.5px solid rgba(193,143,89,0.2);
  border-radius: 18px;
  padding: 30px 20px 24px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-align: center;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  transition: transform .2s, box-shadow .2s, border-color .2s;
  flex: 0 0 210px; max-width: 210px;
  box-sizing: border-box;
}
.home-adv-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(193,143,89,0.2);
  border-color: var(--gold);
}
.home-adv-photo {
  width: 90px; height: 90px; border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--gold-pale);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.home-adv-initial {
  width: 90px; height: 90px; border-radius: 50%;
  background: linear-gradient(135deg, var(--navy), #004444);
  display: flex; align-items: center; justify-content: center;
  font-size: 32px; font-weight: 700; color: var(--gold-glow);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.home-adv-name {
  font-size: 15px; font-weight: 700; color: var(--navy);
  line-height: 1.3; margin-top: 2px;
}
.home-adv-status {
  display: flex; align-items: center; gap: 5px;
}
.home-adv-avatar-wrap {
  position: relative; display: inline-block;
}
.home-adv-dot {
  position: absolute; bottom: 2px; right: 2px;
  width: 13px; height: 13px; border-radius: 50%;
  background: #D1D5DB; border: 2px solid #fff;
  transition: background .3s;
}
.home-adv-dot.online {
  background: #10B981;
  animation: adv-dot-beat 1.2s ease-in-out infinite;
}
.home-adv-dot.busy {
  background: #F59E0B;
  animation: adv-dot-beat-busy 1.2s ease-in-out infinite;
}
.home-adv-dot.away { background: #10B981; }
@keyframes adv-dot-beat-busy {
  0%   { transform: scale(1);    box-shadow: 0 0 0 0   rgba(245,158,11,0.7); }
  30%  { transform: scale(1.35); box-shadow: 0 0 0 4px rgba(245,158,11,0.3); }
  60%  { transform: scale(1);    box-shadow: 0 0 0 8px rgba(245,158,11,0); }
  100% { transform: scale(1);    box-shadow: 0 0 0 0   rgba(245,158,11,0); }
}
@keyframes adv-dot-beat {
  0%   { transform: scale(1);    box-shadow: 0 0 0 0   rgba(16,185,129,0.7); }
  30%  { transform: scale(1.35); box-shadow: 0 0 0 4px rgba(16,185,129,0.3); }
  60%  { transform: scale(1);    box-shadow: 0 0 0 8px rgba(16,185,129,0); }
  100% { transform: scale(1);    box-shadow: 0 0 0 0   rgba(16,185,129,0); }
}
.home-adv-status-label {
  font-size: 11.5px; font-weight: 600; color: #9CA3AF;
  transition: color .3s;
}
.home-adv-status-label.online { color: #059669; }
.home-adv-status-label.away  { color: #059669; }
/* Language badge — overlapping circular flags (top-right of advisor avatar) */
.adv-lang-badge {
  position: absolute;
  top: -4px;
  right: -6px;
  display: flex;
  align-items: center;
  pointer-events: none;
}
.adv-lang-badge .fi {
  width: 25px !important;
  height: 25px !important;
  border-radius: 50% !important;
  background-size: cover !important;
  background-position: center !important;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.28);
  display: block;
  flex-shrink: 0;
}
.adv-lang-badge .fi + .fi { margin-left: -8px; }
.adv-lang-badge.adv-lang-1 { right: 4px; }
/* The real CN flag put through a 25px circular crop is almost pure red — the stars
   sit in the corner and get cut off, so it reads as a blank red dot next to the
   firm's own red. Swap in a square, badge-only artwork: same flag colours, star
   cluster recentred and scaled up so it still reads at 16px on mobile.
   The big star stays left of centre and the four small ones are drawn large: a
   single centred star on red is the Vietnamese flag, not the Chinese one. */
.adv-lang-badge .fi.fi-cn {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgNjQwIDY0MCI+PGRlZnM+PHBhdGggaWQ9ImEiIGZpbGw9IiNmZjAiIGQ9Ik0wLTEgLjIyNDUtLjMwOS45NTExLS4zMDkuMzYzMy4xMTguNTg3OC44MDkgMCAuMzgyLS41ODc4LjgwOS0uMzYzMy4xMTgtLjk1MTEtLjMwOS0uMjI0NS0uMzA5WiIvPjwvZGVmcz48cGF0aCBmaWxsPSIjZWUxYzI1IiBkPSJNMCAwaDY0MHY2NDBIMHoiLz48dXNlIHhsaW5rOmhyZWY9IiNhIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMTIgMzE0KSBzY2FsZSgxNDgpIi8+PHVzZSB4bGluazpocmVmPSIjYSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNDMwIDE3MCkgcm90YXRlKDIzNikgc2NhbGUoNjApIi8+PHVzZSB4bGluazpocmVmPSIjYSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNTE1IDI3NSkgcm90YXRlKDI2Mikgc2NhbGUoNjApIi8+PHVzZSB4bGluazpocmVmPSIjYSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNTA1IDQwNSkgcm90YXRlKDI4Nykgc2NhbGUoNjApIi8+PHVzZSB4bGluazpocmVmPSIjYSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNDIwIDUwMCkgcm90YXRlKDMxMikgc2NhbGUoNjApIi8+PC9zdmc+) !important;
  background-position: center !important;
}
.home-adv-langs {
  display: flex;
  gap: 4px;
  justify-content: center;
  margin-top: 2px;
}
.home-adv-lang-flag {
  width: 22px !important;
  height: 16px !important;
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.18);
  flex-shrink: 0;
}
.home-adv-btn-row {
  margin-top: auto;
  display: flex; flex-direction: column; gap: 6px; width: 100%;
}
.home-adv-call-btn {
  width: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--navy); color: #fff;
  border: none; border-radius: 10px;
  padding: 9px 14px;
  font-size: 12.5px; font-weight: 600; font-family: inherit;
  cursor: pointer;
  transition: background .2s, opacity .2s, transform .15s;
}
.home-adv-call-btn:hover:not(:disabled) {
  background: #004040;
  transform: scale(1.02);
}
.home-adv-call-btn:disabled {
  /* soft navy ghost instead of stark grey — calm "offline" look */
  background: rgba(0,40,40,0.05); color: rgba(0,40,40,0.42); cursor: not-allowed;
}
/* Tel. is the always-available action → primary gold CTA so every card invites contact */
.home-adv-tel-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; padding: 9px 12px;
  background: linear-gradient(135deg, var(--gold), var(--gold-glow));
  color: var(--navy-deep);
  border: none;
  border-radius: 10px;
  font-size: 12.5px; font-weight: 700; text-decoration: none;
  box-shadow: 0 3px 12px rgba(193,143,89,0.35), inset 0 1px 0 rgba(255,255,255,0.35);
  transition: transform .15s, box-shadow .2s, filter .2s;
}
.home-adv-tel-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(193,143,89,0.5), inset 0 1px 0 rgba(255,255,255,0.4);
  filter: brightness(1.03);
}
@media (max-width: 600px) {
  .home-sales-wrap { padding: 26px 14px 30px; margin: 18px 12px 6px; border-radius: 22px; }
  /* 2 columns on mobile — CSS grid handles the gap so cards never overflow.
     Reset the base card's fixed 210px width so each card fills its 1fr column. */
  .home-sales-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 100%; }
  .home-sales-title { font-size: 20px; }
  .home-adv-card { flex: none; width: auto; min-width: 0; max-width: none; padding: 18px 12px 14px; }
  .home-adv-photo, .home-adv-initial { width: 52px; height: 52px; }
  .home-adv-initial { font-size: 18px; }
  .home-adv-name { font-size: 12px; }
  .home-adv-btn-row { flex-direction: row; gap: 5px; }
  .home-adv-call-btn { flex: 1; font-size: 11px; padding: 7px 0; }
  .home-adv-tel-btn  { flex: 1; font-size: 11px; padding: 7px 0; min-width: 0; }
  .adv-btn-name, .adv-btn-label { display: none; }
  .adv-lang-badge { top: -2px; right: -10px; }
  .adv-lang-badge .fi { width: 16px !important; height: 16px !important; border-width: 1.5px; }
  .adv-lang-badge .fi + .fi { margin-left: -6px; }
}
.modal-sales-label {
  font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold-deep);
}
.modal-sales-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px;
}
.modal-adv-card {
  background: #fff;
  border: 1.5px solid rgba(193,143,89,0.2);
  border-radius: 14px; padding: 14px 10px 12px;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  text-align: center;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.modal-adv-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(193,143,89,0.18);
  border-color: var(--gold);
}
.modal-adv-avatar-wrap { position: relative; display: inline-block; }
.modal-adv-photo {
  width: 64px; height: 64px; border-radius: 50%;
  object-fit: cover; display: block;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.modal-adv-initial {
  width: 64px; height: 64px; border-radius: 50%;
  background: linear-gradient(135deg, var(--navy), #004444);
  color: #fff; font-weight: 700; font-size: 22px;
  display: flex; align-items: center; justify-content: center;
}
.modal-adv-name {
  font-size: 12px; font-weight: 700; color: var(--navy); line-height: 1.3;
}
.modal-adv-status-label {
  font-size: 10.5px; font-weight: 600; color: #9CA3AF;
}
.modal-adv-status-label.online { color: #059669; }
.modal-adv-status-label.away  { color: #059669; }
.modal-adv-btn-row {
  width: 100%; display: flex; flex-direction: column; gap: 5px; margin-top: auto;
}
.modal-adv-call-btn {
  width: 100%; padding: 6px 8px;
  background: var(--navy); color: #fff;
  border: none; border-radius: 8px;
  font-size: 11px; font-weight: 600; font-family: inherit;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  cursor: pointer; transition: background .2s, opacity .2s;
}
.modal-adv-call-btn:hover:not(:disabled) { background: #004040; }
.modal-adv-call-btn:disabled { background: #E5E7EB; color: #9CA3AF; cursor: not-allowed; }
.modal-adv-tel-btn {
  width: 100%; padding: 6px 8px;
  background: var(--gold-pale); color: var(--gold-deep);
  border: 1.5px solid rgba(193,143,89,0.45); border-radius: 8px;
  font-size: 11px; font-weight: 600; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  transition: background .2s, border-color .2s, color .2s;
}
.modal-adv-tel-btn:hover {
  background: linear-gradient(135deg, var(--gold), var(--gold-glow));
  color: var(--navy-deep); border-color: transparent;
}
.modal-adv-btn-label { font-size: 11px; }
.sale-avatar-wrap { position: relative; display: inline-block; }
.sale-status-dot {
  position: absolute; bottom: 1px; right: 1px;
  width: 11px; height: 11px; border-radius: 50%;
  background: #D1D5DB; border: 2px solid #fff;
  transition: background .3s;
}
.sale-status-dot.online {
  background: #10B981;
  animation: sale-glow 1.8s ease-in-out infinite;
}
.sale-status-dot.busy {
  background: #F59E0B;
  animation: sale-glow-busy 1.8s ease-in-out infinite;
}
.sale-status-dot.away { background: #10B981; }
@keyframes sale-glow-busy {
  0%, 100% { box-shadow: 0 0 0 0   rgba(245,158,11,.55); }
  50%       { box-shadow: 0 0 0 4px rgba(245,158,11,0); }
}
@keyframes sale-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16,185,129,.55); }
  50%       { box-shadow: 0 0 0 4px rgba(16,185,129,0); }
}
.sale-online-chip {
  display: none;
  font-size: 9.5px; font-weight: 700; letter-spacing: .03em;
  color: #059669; background: #D1FAE5;
  border-radius: 20px; padding: 1px 7px;
  line-height: 1.6;
}
.sale-online-chip.visible { display: inline-block; }

.modal-cta-row {
  display: flex; gap: 8px; align-items: stretch;
}
.modal-cta-call {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
}
.modal-cta-tel {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 11px 16px;
  background: var(--gold-pale); color: var(--gold-deep);
  border: 1.5px solid rgba(193,143,89,0.45); border-radius: 10px;
  font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: background .2s, border-color .2s, color .2s, transform .15s;
}
.modal-cta-tel:hover {
  background: linear-gradient(135deg, var(--gold), var(--gold-glow));
  color: var(--navy-deep); border-color: transparent;
  transform: scale(1.02);
}
.modal-actions {
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end;
}
.modal-actions .btn-primary,
.modal-actions .btn-sec {
  padding: 11px 22px; font-size: 13.5px;
}

/* Document Preview modal */
#docPreviewOverlay { display: none; }
#docPreviewOverlay.open { display: flex; }
#docPreviewOverlay > .doc-preview-modal {
  max-width: 960px;
  width: 95vw;
  height: 90vh;
  display: flex;
  flex-direction: column;
}
.doc-preview-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  background: #1a1a1a;
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}
#docPreviewContent {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}
#docPreviewContent iframe {
  width: 100%; height: 100%; border: none; display: block;
}
#docPreviewContent img {
  max-width: 100%; max-height: 100%;
  object-fit: contain; display: block;
  border-radius: 4px;
}
.doc-preview-unavail {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; color: rgba(255,255,255,0.5);
  font-size: 14px; text-align: center; padding: 40px;
}
.doc-preview-unavail svg { opacity: .4; }

/* Portal Book modal — uses same .modal but smaller */
#portalBookOverlay { display: none; }
#portalBookOverlay.open,
#portalBookOverlay[style*="display:flex"],
#portalBookOverlay[style*="display: flex"] { display: flex !important; }
#portalBookOverlay > .modal { max-width: 560px; }

.pb-meet {
  border: 2px solid var(--gray-200) !important;
  border-radius: 12px;
  background: #fff;
  transition: all .2s;
}
.pb-meet:hover { border-color: var(--gold) !important; background: var(--gold-pale); }
.pb-meet.pb-meet--active {
  border-color: var(--navy) !important;
  background: var(--gold-pale) !important;
  box-shadow: 0 4px 12px rgba(193,143,89,0.22);
}
.pb-selected { /* selected slot pill in portal-book */
  background: var(--navy-deep) !important;
  border-color: var(--navy-deep) !important;
  color: #fff !important;
}

/* ============================================================
   FOOTER
   ============================================================ */
#global-footer {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: rgba(255,255,255,0.7);
  margin-top: 80px;
  padding: 40px 24px 32px;
  position: relative; overflow: hidden;
}
#global-footer::before {
  content: ''; position: absolute; width: 400px; height: 200px;
  background: radial-gradient(ellipse, rgba(193,143,89,0.2) 0%, transparent 70%);
  top: -50px; left: 50%; transform: translateX(-50%);
  filter: blur(40px);
}
.footer-inner {
  max-width: 1240px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 20px;
  text-align: center;
  position: relative; z-index: 1;
}
.footer-logo {
  font-family: 'Libre Baskerville', serif;
  font-size: 17px; color: var(--gold-glow);
  letter-spacing: 0.04em;
}
.footer-links {
  list-style: none; display: flex; flex-wrap: wrap;
  justify-content: center; gap: 20px;
}
.footer-links a {
  color: rgba(255,255,255,0.65);
  text-decoration: none; cursor: pointer;
  font-size: 13.5px;
  transition: color .2s;
}
.footer-links a:hover { color: var(--gold-glow); }
.footer-copy {
  font-size: 12px; color: rgba(255,255,255,0.4);
  letter-spacing: 0.04em;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.08);
  width: 100%; max-width: 600px;
}

/* ============================================================
   MOBILE BOTTOM NAV (shown ≤ 900px)
   ============================================================ */
.mobile-nav {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  transition: transform .3s ease;
  top: auto;
  height: auto;
  z-index: 1000;
  background: #001A1A;
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: 8px 8px 10px;
  padding-bottom: max(10px, env(safe-area-inset-bottom));
  box-shadow: 0 -8px 24px rgba(0,0,0,0.3);
}
.mobile-nav-inner {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px;
  max-width: 480px; margin: 0 auto;
}
.mnav-item {
  background: transparent; border: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px;
  padding: 8px 4px;
  border-radius: 12px;
  font-family: inherit;
  color: rgba(255,255,255,0.7);
  transition: background .2s, color .2s;
}
.mnav-icon { line-height: 0; }
.mnav-label {
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.04em;
}
.mnav-item:hover { color: #fff; background: rgba(255,255,255,0.06); }
.mnav-item.active {
  color: var(--gold-glow);
  background: linear-gradient(180deg, rgba(193,143,89,0.18), rgba(193,143,89,0.08));
}
.mobile-nav.nav-hidden { transform: translateY(calc(100% + 28px)); }
@media (max-width: 900px) {
  nav.nav-top-hidden { transform: translateY(calc(-100% - 28px)); opacity: 0; }
}
.mnav-center {
  position: relative;
  margin-top: -20px;
  padding: 0;
  background: transparent !important;
  color: #fff !important;
}
.mnav-center .mnav-icon {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--gold-glow));
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(193,143,89,0.5);
  transition: transform .2s, box-shadow .2s;
}
.mnav-center:hover .mnav-icon {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(193,143,89,0.65);
}
.mnav-center.active .mnav-icon {
  box-shadow: 0 4px 20px rgba(193,143,89,0.8);
}
.mnav-center .mnav-label {
  margin-top: 4px;
  color: var(--gold-glow);
}

/* ============================================================
   PAYMENT MODAL (override the inline-styled tabs)
   ============================================================ */
.pm-tab {
  transition: all .15s;
  font-family: inherit;
}
.pm-tab.active {
  background: var(--navy-deep) !important;
  border-color: var(--navy-deep) !important;
  color: #fff !important;
}
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .3 } }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .appt-layout { grid-template-columns: 1fr; }
  .overview-cards { grid-template-columns: repeat(2, 1fr); }
  .stats-inner { grid-template-columns: repeat(2, 1fr); }
}
@media screen and (max-width: 1024px), (pointer: coarse) {
  body { padding-bottom: 76px !important; }
  nav { padding: 8px 8px 8px 14px !important; margin: 10px 12px 0 !important; border-radius: 18px !important; }
  .nav-logo-text { display: none !important; }
  .nav-links { display: none !important; }
  .nav-cta { padding: 9px 14px !important; font-size: 12px !important; }
  .mobile-nav { display: block !important; }

  .hero {
    padding: 32px 20px 50px;
    margin: 12px 12px 0;
    border-radius: 22px;
  }
  .hero-inner { padding-top: 0; }
  .hero-eyebrow { margin-bottom: 14px; padding: 5px 12px; font-size: 10.5px; letter-spacing: 0.14em; }
  .hero-title { font-size: clamp(29px, 8vw, 42px); line-height: 1.15; margin-bottom: 22px; }
  .hero-sub { font-size: 13.5px; line-height: 1.55; margin-bottom: 10px; }
  .search-wrap { max-width: 100%; padding: 6px 6px 6px 18px; margin-top: 8px; margin-bottom: 36px; }
  .search-wrap input { font-size: 15px; padding: 10px 0; }
  .search-ph { font-size: 15px; }
  .search-btn { padding: 13px 20px; font-size: 14px; font-weight: 700; }

  .stats { padding: 0 12px; margin-top: -28px; }
  .stats-inner { gap: 8px; }
  .stat { padding: 14px 10px; }
  .stat-num { font-size: 20px; }
  .stat-label { font-size: 9.5px; letter-spacing: 0.1em; }

  .mobile-nav { display: block; }

  .filter-section { padding: 0; margin-top: 36px; }
  .filter-inner {
    width: 100%;
    justify-content: flex-start;
    border-radius: 0;
    padding: 10px 16px;
    padding-right: 32px;
    gap: 6px;
    scroll-padding-inline-start: 16px;
  }
  .filter-label { display: none; }
  .chip { padding: 6px 13px; font-size: 12px; }
  main { padding: 0 16px; margin-bottom: 60px; }
  /* iPad / tablets keep 2 columns; phones drop to 1 in the 480px block below */
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .cta-strip { padding: 36px 24px; grid-template-columns: 1fr; gap: 24px; }

  .appt-layout { padding: 0 16px; gap: 18px; }
  .appt-form-body { padding: 22px; }
  .form-row { grid-template-columns: 1fr; }

  .team-layout { padding: 0 16px; }
  .values-section {
    grid-template-columns: 1fr;
    padding: 36px 24px;
    gap: 28px;
  }
  .values-list { grid-template-columns: 1fr; }

  .portal-dashboard { padding: 0 16px; margin-top: 20px; }
  .portal-topbar { flex-wrap: wrap; gap: 10px; padding: 14px 18px; }
  .portal-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .ptab { flex-shrink: 0; }
  .overview-cards { grid-template-columns: 1fr 1fr; }
  .portal-overview-bottom { grid-template-columns: 1fr; }
  .portal-profile-grid { grid-template-columns: 1fr; }
  .cases-table-header { display: none; }
  .case-row {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 14px;
  }
  #global-footer { margin-top: 40px; padding: 32px 20px 24px; }

  /* Push chat bubble & window above the mobile bottom nav */
  #chatBubble { bottom: 92px !important; }
  #scrollSearchBtn { bottom: 160px !important; }
  #chatWindow { bottom: 158px !important; right: 12px !important; width: calc(100vw - 24px) !important; max-width: 360px; }
}

@media (max-width: 480px) {
  .services-grid { grid-template-columns: 1fr; }
  .stats-inner { grid-template-columns: 1fr 1fr; }
  .overview-cards { grid-template-columns: 1fr; }
  .meet-type-grid { grid-template-columns: 1fr; }
  .modal-actions { flex-direction: column; }
  .modal-actions > * { width: 100%; justify-content: center; }
}

/* ============================================================
   UTILITIES
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Phone country-code widget ──────────────────────────────── */
.phone-fw {
  display: flex;
  border: 1.5px solid var(--gray-200);
  border-radius: 10px;
  overflow: visible;
  background: #fff;
  transition: border-color .2s, box-shadow .2s;
}
.phone-fw:hover { border-color: var(--gold); }
.phone-fw:focus-within {
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(193,143,89,0.12);
}
.phone-cw {
  position: relative;
  flex-shrink: 0;
  border-right: 1.5px solid var(--gray-200);
}
.phone-cb {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 10px;
  height: 100%;
  min-width: 92px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
  white-space: nowrap;
  outline: none;
  border-radius: 9px 0 0 9px;
  color: var(--text-secondary);
}
.phone-cb:hover { background: var(--gray-100); }
.phone-cl {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  width: 240px;
  max-height: 220px;
  overflow-y: auto;
  background: #fff;
  border: 1.5px solid var(--gray-200);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  z-index: 9999;
  padding: 4px 0;
  margin: 0;
  list-style: none;
}
.phone-cl li {
  padding: 8px 14px;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-primary);
}
.phone-cl li:hover { background: var(--gray-100); }
.phone-fw .form-control {
  flex: 1;
  min-width: 0;
  width: auto !important;
  border: none !important;
  border-radius: 0 9px 9px 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding-left: 10px !important;
}

/* ============================================================
   SEO CONTENT BLOCK (Tier 1, added 2026-07-07)
   "How online consultation works" + "Why online" + FAQ.
   Responsive via auto-fit grids — no media query needed.
   ============================================================ */
.seo-block { margin-top: 64px; }
.seo-lead {
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.75;
  color: var(--text-secondary);
  max-width: 820px;
  margin: -8px 0 36px;
}
.seo-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-bottom: 32px;
}
.seo-step {
  background: var(--paper);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 28px 26px;
}
.seo-step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--gold), var(--gold-deep));
  color: #fff; font-weight: 700; font-size: 16px;
  font-family: 'Libre Baskerville', serif;
  margin-bottom: 14px;
}
.seo-step-title {
  font-family: 'Libre Baskerville', serif;
  font-size: 18px; color: var(--navy-deep); margin-bottom: 8px;
}
.seo-step p { font-size: 14.5px; line-height: 1.65; color: var(--text-secondary); }

.seo-why {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px 28px;
}
.seo-why li {
  position: relative; padding-left: 26px;
  font-size: 14.5px; line-height: 1.6; color: var(--text-secondary);
}
.seo-why li::before {
  content: '\2713'; position: absolute; left: 0; top: 0;
  color: var(--gold-deep); font-weight: 700;
}

.seo-faq {
  margin-top: 56px;
  /* Lets block-size animate from 0 to `auto`. Scoped here rather than :root so it
     can't change how any other auto-sized element behaves. */
  interpolate-size: allow-keywords;
}
.seo-faq-item {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  margin-bottom: 12px;
  background: var(--paper);
  overflow: hidden;
}
.seo-faq-item summary {
  cursor: pointer; list-style: none;
  padding: 18px 22px;
  font-weight: 600; font-size: 15.5px; color: var(--navy-deep);
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.seo-faq-item summary::-webkit-details-marker { display: none; }
.seo-faq-item summary::after {
  content: '+'; font-size: 22px; font-weight: 400; line-height: 1;
  color: var(--gold-deep); flex-shrink: 0;
}
.seo-faq-item[open] summary::after { content: '\2212'; }

/* Smooth open/close. `content-visibility` must be in the transition (with
   allow-discrete) or the answer pops in at full height instead of sliding.
   Browsers without ::details-content simply open instantly — no breakage. */
.seo-faq-item::details-content {
  block-size: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    block-size .34s cubic-bezier(.4,0,.2,1),
    opacity .26s ease,
    content-visibility .34s allow-discrete;
}
.seo-faq-item[open]::details-content { block-size: auto; opacity: 1; }

.seo-faq-item p {
  padding: 0 22px 20px; margin: 0;
  font-size: 14.5px; line-height: 1.7; color: var(--text-secondary);
}

@media (prefers-reduced-motion: reduce) {
  .seo-faq-item::details-content { transition: none; }
}

/* ============================================================
   PORTAL GUIDED TOUR  (first login, replayable from the ? button)

   The overlay is appended to <body> on purpose: any ancestor carrying
   backdrop-filter / transform / filter becomes the containing block for
   position:fixed and would trap the whole tour inside a card.
   ============================================================ */
.mct-overlay { position: fixed; inset: 0; z-index: 9600; display: none; }
.mct-overlay.open { display: block; }

/* One element does both jobs — the ring IS the dim, so there is no separate
   backdrop to keep in sync with the hole. A step with no target parks this at
   0×0 with a transparent border: the screen dims, nothing is outlined. */
.mct-spot {
  position: fixed; left: 0; top: 0; width: 0; height: 0;
  border-radius: 12px;
  border: 2px solid var(--gold, #C18F59);
  box-shadow: 0 0 0 9999px rgba(2, 14, 14, 0.74);
  pointer-events: none;
  transition: left .28s cubic-bezier(.4,0,.2,1), top .28s cubic-bezier(.4,0,.2,1),
              width .28s cubic-bezier(.4,0,.2,1), height .28s cubic-bezier(.4,0,.2,1);
}
.mct-spot.plain { border-color: transparent; }

.mct-card {
  position: fixed;
  width: 330px; max-width: calc(100vw - 28px);
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(0,0,0,0.34);
  padding: 17px 18px 13px;
  font-family: inherit;
  --ax: 50%;
}
/* Arrow toward the highlighted element; --ax is set by the positioner so it keeps
   pointing at the target even when the card is clamped to the viewport edge. */
.mct-card::before {
  content: ''; position: absolute; left: var(--ax); margin-left: -8px;
  border: 8px solid transparent;
}
.mct-card.below::before { top: -16px; border-bottom-color: #fff; }
.mct-card.above::before { bottom: -16px; border-top-color: #fff; }
.mct-card.middle::before { display: none; }

.mct-step {
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold, #C18F59); font-weight: 700; margin-bottom: 7px;
}
.mct-title {
  font-family: 'Libre Baskerville', serif;
  font-size: 16px; line-height: 1.4; margin: 0 0 8px;
  color: var(--text-primary, #0B1A1A);
}
.mct-body {
  font-size: 13.5px; line-height: 1.65; margin: 0 0 14px;
  color: var(--text-secondary, #3F4B4B);
}
.mct-body b { color: var(--text-primary, #0B1A1A); font-weight: 600; }

.mct-actions { display: flex; align-items: center; gap: 8px; }
.mct-spacer { flex: 1; }
.mct-skip {
  background: none; border: none; font-family: inherit;
  color: var(--text-muted, #6B7280); font-size: 12.5px; cursor: pointer; padding: 6px 0;
}
.mct-skip:hover { color: var(--text-secondary, #3F4B4B); text-decoration: underline; }
.mct-back, .mct-next {
  font-family: inherit; font-size: 13px; font-weight: 600;
  border-radius: 9px; padding: 9px 16px; cursor: pointer; transition: all .2s;
}
.mct-back {
  background: #fff; color: var(--text-secondary, #3F4B4B);
  border: 1.5px solid var(--gray-200, #E5E7EB);
}
.mct-back:hover { border-color: var(--gray-300, #D1D5DB); color: var(--text-primary, #0B1A1A); }
.mct-next {
  background: var(--navy, #003333); color: #fff; border: 1.5px solid var(--navy, #003333);
}
.mct-next:hover { background: var(--navy-deep, #001A1A); }

@media (max-width: 600px) {
  .mct-card { width: calc(100vw - 24px); padding: 15px 15px 11px; }
  .mct-title { font-size: 15px; }
  .mct-body { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .mct-spot { transition: none; }
}

/* ============================================================
   SCROLL REVEAL — หัวข้อและการ์ดค่อย ๆ ลอยขึ้นตอนเลื่อนถึง
   ============================================================
   Deliberately quiet: 14px of travel over 450ms, once per element,
   never replayed on the way back up. Someone reading a law firm's
   site is usually mid-problem and deciding whether to trust the
   firm — motion that draws attention to itself works against that.

   THE RULE THAT MATTERS: the hidden state lives in .rv-armed, a
   class JavaScript adds at runtime. It is NOT in the stylesheet's
   default state. If script.js fails to load or the reveal block
   throws, every word on the page is still on screen and the page
   simply does not animate. Writing `opacity: 0` into the base rule
   instead would mean one JS error blanks the whole site — which is
   how this effect usually gets shipped, and why it usually breaks.
   ============================================================ */
/* Animation, not transition, and that is the whole trick.

   Replaying on every scroll-past means these classes live on the element for
   good — they can never be stripped once the fade ends. A `transition` here
   would therefore sit permanently on top of `.svc-card`'s own
   `transition: transform .35s, box-shadow .35s, border-color .35s`, silently
   throwing away the shadow and border half of its hover. `animation` is a
   separate property that overrides nothing, and once the keyframes finish
   (no forwards fill) the element is back under the cards' own rules — so the
   hover lift keeps working between reveals.

   `backwards` fill matters for the stagger: without it a card with a 210ms
   delay paints fully visible for 210ms and then snaps to invisible when its
   animation starts. */
.rv-armed { opacity: 0; }
.rv-armed.rv-in {
  opacity: 1;
  animation: rvFadeUp .45s ease-out backwards;
}

@keyframes rvFadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* JS already refuses to arm anything when reduce-motion is on. This is the
   second lock, for the case where the OS setting is flipped after load. */
@media (prefers-reduced-motion: reduce) {
  .rv-armed,
  .rv-armed.rv-in {
    opacity: 1;
    animation: none;
  }
}

/* ============================================================
   TEXT HIGHLIGHTS — offered by Admin → Visual Editor
   Named shades from the palette above rather than a free colour picker, so
   text coloured in the editor cannot land outside the design. They are plain
   classes because the save whitelist already allows class on a <span> and does
   not allow style — which keeps an inline-style injection route closed.
   ============================================================ */
.mc-hl-gold  { color: var(--hl-gold) }
.mc-hl-navy  { color: var(--hl-navy) }
.mc-hl-muted { color: var(--hl-muted) }
/* The dark sections need the lighter end of the same hues to stay readable. */
.hero .mc-hl-gold, .cta-strip .mc-hl-gold { color: var(--gold-glow) }
.hero .mc-hl-navy, .cta-strip .mc-hl-navy { color: #FFFFFF }