/* ============================================================
   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: 10px;
}
.nav-links a {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px;
  min-width: 122px; 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: 12px; }
.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; }
/* The language dropdown and its options were removed when the control became a
   one-press switch; their rules went with them. */

.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);
  /* 1.06 set the two lines so close that the descenders of line 1 (p, g) sat
     inside the ascenders of line 2 — worst on the home title, whose second
     line is italic and leans back into the one above. Phones already used
     1.15 in the media query below; desktop was the odd one out. */
  line-height: 1.22; 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: 90px; height: 90px; 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: 84px; height: 84px; }
  .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;
}
/* The CTA strip, How it works and the FAQ used to sit inside <main>; they are
   siblings of it now so that the Visual Editor can move any home section past
   any other (CSS `order` only sorts children of one container). This repeats
   what <main> gave them, and the page renders exactly as before. */
/* position: the editor pins each section's purple toolbar inside the section,
   which only works if the section is a containing block. Every other one on
   the page already is. No offsets, so nothing moves. */
.home-band { position: relative; max-width: 1240px; margin: 0 auto; padding: 0 40px; }
/* Stated width, for the sake of the section order below: a custom order turns the
   page into a flex column, and an element with auto side margins does not stretch
   to the container on its own there. Saying 100% makes block and flex identical. */
#page-services > .stats,
#page-services > .filter-section,
#page-services > main,
#page-services > .home-band { width: 100%; }
/* <main>'s bottom margin used to be the gap under the FAQ, which is no longer
   inside it — the page keeps that gap instead, wherever the last band lands. */
#page-services > main { margin-bottom: 0; }
#page-services { padding-bottom: 100px; }
.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);
}
/* A pill that goes somewhere. Brand gold rather than a underline: these sit in
   a row of plain keywords, and the difference has to read at 11px without
   turning the row into a list of links. */
.pill-link {
  background: rgba(193,143,89,0.12);
  color: var(--gold-deep, #946431);
  text-decoration: none;
  cursor: pointer;
  transition: background .16s ease, color .16s ease;
}
/* The arrow, not the colour, is what says "this goes somewhere". On 8 of the 9
   cards every pill is a link, so there is no grey pill beside it to compare
   against -- the signal has to be intrinsic. Same glyph the Contact rows use. */
.pill-link::after {
  content: '\203A';
  margin-left: 5px;
  font-weight: 700;
  opacity: .75;
}
.pill-link:hover, .pill-link:focus-visible {
  background: rgba(193,143,89,0.24);
  color: #7A5126;
}
.pill-link:hover::after { opacity: 1; }
@media (max-width: 768px) {
  /* 20px is under a comfortable tap target; only the ones you can tap grow. */
  .pill-link { padding: 7px 12px; }
}
@media (prefers-reduced-motion: reduce) { .pill-link { transition: none; } }
.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: 40px 48px 38px;
  color: #fff;
  display: block; text-align: center;
}
/* Icon, label, arrow on one line. The icon names the destination, the arrow says
   you are being taken there — the site's rule for any button that moves you. */
.cta-btn { display: inline-flex; align-items: center; gap: 9px; }
.cta-btn svg { flex-shrink: 0; opacity: .9 }
.cta-btn-arrow { font-weight: 600 }
.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; max-width: 640px; margin: 0 auto; }
.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: none;
  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;
  /* 70ch holds the live copy on two lines instead of three, and `balance` splits
     them at near-equal length rather than filling line one and leaving a stub. */
  max-width: 70ch; margin-left: auto; margin-right: auto;
  text-wrap: balance;
}
/* This column was built for two buttons side by side. With the phone number gone
   (6 Oct meeting) the single survivor stretched into a 430px pill sitting in an
   empty half. It now takes its own width at the end of the row. Touch devices
   below keep it full width, where a wide target beats a tidy one. */
.cta-actions {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; gap: 10px;
  align-items: center; margin-top: 20px;
}

/* 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; }
/* ── "Another way to reach you" ──────────────────────────────────────────
   Hidden until somebody sends the form with no phone and no email, so the
   common case stays a three-field form. Revealed with the same quiet 14px /
   .45s movement the rest of the site uses rather than a jump. */
/* One pressable row per channel. The whole row is the target, not just the words:
   on a phone a 13px link is a dart board, a full-width row is not. */
.cd-row { display: flex; gap: 11px; align-items: center; padding: 9px 10px; margin: 0 -10px;
  border-radius: 10px; text-decoration: none; color: inherit;
  transition: background .16s ease, transform .16s ease; }
/* A short step toward the thing you are pointing at. 0.16s, not the 0.45s used
   for things arriving on screen: hover is a reply to something the person just
   did, and a slow reply reads as lag, not as polish. */
.cd-row:hover { background: rgba(0,40,40,0.045); transform: translateX(3px); }
.cd-row:active { transform: translateX(3px) scale(.985); }
@media (prefers-reduced-motion: reduce) {
  .cd-row, .cd-row:hover, .cd-row:active { transition: background .16s ease; transform: none; }
}
.cd-row + .cd-row { margin-top: 2px; }
/* All five channels sit in one grid: the phone is a way of reaching us like the
   rest, and lifting it out with a divider said it was a different kind of thing.
   Five in two columns leaves the last cell empty, which reads as a list that ran
   out rather than as a layout with a hole — the alternative, stretching the fifth
   across both columns, invents an emphasis nothing asked for. */
/* One column at every width. Two columns put the chevron mid-card instead of
   against an edge, and made the rule between the firm's own channels and the
   apps cut across the grid rather than divide the list. */
.cd-grid { display: grid; grid-template-columns: 1fr; gap: 2px 6px; }
/* Spans whichever number of columns there are, so it divides the same two
   groups on a phone as on a desktop. */
.cd-sep { grid-column: 1 / -1; height: 1px; background: var(--line, #E3DED4);
  margin: 7px 0 8px; }
.cd-grid .cd-row { margin: 0; padding: 9px 8px; }
/* Shown at every width now that the list is one column: a phone has no cursor
   and no hover, so without this nothing there says these rows are tappable. */
.cd-go { width: 15px; height: 15px; flex-shrink: 0; margin-left: auto;
  color: rgba(11,26,26,.3); transition: color .16s ease; }
.cd-row:hover .cd-go, .cd-row:active .cd-go { color: var(--brand, #002828); }

/* The map preview: the hint lifts slightly on hover so the box reads as one
   clickable thing rather than a picture that happens to sit there. */
.cd-maphint { transition: background .16s ease, transform .16s ease; }
button:hover > .cd-maphint { background: #fff; transform: translateY(-1px); }
/* Navy until you reach for it. The label beside each icon already names the
   channel, so the brand colour is not carrying any information — it is a reward
   for hovering, and on the rest of the page nothing is this saturated. */
/* One teal at rest, each row's own --brand on hover. Tried the other way round
   and it was wrong for this page: five saturated colours in a column pull
   against the gold and deep green everything else is built from, and this card
   is supporting furniture, not the point of the page. */
.cd-ico { width: 23px; height: 23px; flex-shrink: 0; color: #002828;
  transition: color .16s ease, transform .16s ease; }
/* Hover carries the brand colour again, alongside the small lift. */
.cd-row:hover .cd-ico, .cd-row:focus-visible .cd-ico {
  color: var(--brand, #002828); transform: scale(1.08); }
@media (prefers-reduced-motion: reduce) {
  .cd-row:hover .cd-ico, .cd-row:focus-visible .cd-ico { transform: none; }
}
.cd-text { min-width: 0; line-height: 1.45; }
.cd-text strong { display: block; font-size: 13.5px; color: var(--text-primary); font-weight: 600; }
.cd-sub { display: block; font-size: 12px; color: var(--text-muted); }
/* NOT CURRENTLY USED. A row that is information rather than a destination:
   same icon and two lines so it sits level with its neighbours, minus
   everything that says "press me". Kept because the out-of-hours row needs it
   again the moment that number is withdrawn or is not ready. */
.cd-row-static { cursor: default; }
.cd-row-static:hover { background: transparent; transform: none; }
.cd-row-static:hover .cd-ico { color: #002828; }

/* ── Our Office map dialog ──────────────────────────────────────────────
   The card is only the map. Height is tied to the viewport rather than fixed,
   so a monitor gets a map and a phone does not get a letterbox; the controls
   are absolute over it, which is why the card is the positioning context. */
.mm-card { position: relative; background: #fff; border-radius: 14px; width: 100%;
  max-width: 1100px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.mm-card iframe { display: block; width: 100%; border: 0;
  height: min(80vh, 860px); min-height: 340px; }

/* Both controls in the top-right, 8px apart, reading as one group.
   Translucent white so the map still shows through, and a shadow so they stay
   legible over a dark block of buildings as well as over pale streets. */
.mm-close, .mm-maps { position: absolute; top: 10px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.93); border: none; border-radius: 17px;
  box-shadow: 0 2px 10px rgba(0,0,0,.2); color: #1F2937; cursor: pointer;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  transition: background .16s ease, transform .16s ease; }
.mm-close { right: 10px; width: 34px; padding: 0; }
.mm-maps { right: 52px; padding: 0 13px; gap: 7px;
  font-size: 12.5px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.mm-close svg { width: 15px; height: 15px; }
.mm-maps svg { width: 13px; height: 13px; flex-shrink: 0; }
.mm-close:hover, .mm-maps:hover { background: #fff; transform: translateY(-1px); }
.mm-close:active, .mm-maps:active { transform: scale(.96); }

/* On a phone the pill would run into Google's own card on the other side, so
   the label goes and it becomes a disc to match the close button. */
@media (max-width: 560px) {
  .mm-maps-t { display: none; }
  .mm-maps { width: 34px; padding: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .mm-close, .mm-maps { transition: none; }
  .mm-close:hover, .mm-maps:hover, .mm-close:active, .mm-maps:active { transform: none; }
}

.alt-contact-row { display: flex; gap: 10px; align-items: center; }
.alt-contact-row select.form-control { flex: 0 0 170px; width: 170px; }
.alt-contact-row input.form-control  { flex: 1; min-width: 0; }
.alt-contact-hint { margin-top: 7px; font-size: 12.5px; color: var(--text-muted); line-height: 1.6; }

/* The call gate borrows the phone country widget wholesale — one bordered box,
   a divider, a gold ring on focus. Everything here is scoped to .gate-fw so
   the phone widget's own rows do not grow icons they never asked for. */
.gate-fw { width: 100%; }
.gate-fw .phone-cb { min-width: 108px; max-width: 108px; padding: 11px 7px 11px 10px; font-size: 13.5px; color: #002828; }
.gate-fw .gate-cc .phone-cb { min-width: 78px; max-width: 78px; padding-left: 8px; }
.gate-fw .gate-cc .phone-cl { width: 248px; }
/* No divider after the dialling code: it belongs to the number in front of it,
   literally — picking a country writes the code into that same field. Two
   groups to read instead of three boxes. */
.gate-fw .gate-cc { border-right: none; }
.gate-fw.has-cc .form-control { padding-left: 5px !important; }
/* Narrow screens give the number the room, not the two pickers: a code and a
   channel are both recognisable clipped, a phone number is not. */
@media (max-width: 460px) {
  .gate-fw .phone-cb { min-width: 96px; max-width: 96px; font-size: 12.5px; }
  .gate-fw .gate-cc .phone-cb { min-width: 70px; max-width: 70px; }
}
/* Advisors who are free, in the unavailable modal. Five of them used to be
   five full-width rows, which pushed the form below the fold on a laptop and
   well off a phone. Tiles three to a row fit the same five in two. */
.unav-adv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.unav-adv {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: #fff; border: 1.5px solid var(--gray-200); border-radius: 12px;
  padding: 12px 6px 10px; cursor: pointer; font-family: inherit;
  transition: border-color .15s ease, background .15s ease;
}
.unav-adv:hover { border-color: var(--gold); background: #FFFDF9; }
.unav-adv-pic { position: relative; width: 44px; height: 44px; flex-shrink: 0; }
.unav-adv-pic img,
.unav-adv-pic .unav-adv-ini {
  width: 44px; height: 44px; border-radius: 50%; object-fit: cover;
  background: #E8EDED; display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700; color: #4B5563;
}
/* The dot sits on the photo, not beside the name: at this size the name is
   the only thing with room to grow, and a badge next to it would wrap. */
.unav-adv-dot {
  position: absolute; right: 0; bottom: 1px; width: 11px; height: 11px;
  border-radius: 50%; background: #10B981; border: 2px solid #fff;
}
.unav-adv-name {
  font-size: 11.5px; font-weight: 600; color: #111; line-height: 1.3;
  text-align: center; min-height: 30px; display: flex; align-items: center;
}
.unav-adv-go { font-size: 10.5px; font-weight: 700; color: var(--gold-deep); letter-spacing: .04em; }
/* Three 44px tiles plus gaps stop fitting once the modal is this narrow. */
@media (max-width: 420px) {
  .unav-adv-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Nothing picked yet: the picker IS the field.
   The input next to it is disabled until a channel is known, so two controls
   were sharing a phone-width row and the one that mattered lost - "- Select -"
   clipped to "- Sele...". Giving the picker the whole row costs nothing,
   because the thing it was sharing with cannot be used yet, and it makes the
   whole field one target to press. The picked state below is unchanged.
   .ch-empty is set by _chChanged(), beside the line that disables the input. */
.gate-fw.ch-empty .phone-cw { flex: 1 1 auto; border-right: none; }
/* text-align because a <button> centres its text by default, and a centred
   label would be the only thing on this form not starting at the left edge. */
.gate-fw.ch-empty .phone-cb { min-width: 0; max-width: none; width: 100%;
                              border-radius: 9px; font-size: 13.5px;
                              text-align: left; }
.gate-fw.ch-empty .form-control { display: none; }
/* The list hangs off .phone-cw, which now spans the row - so it can too. */
.gate-fw.ch-empty .phone-cl { width: 100%; }

.gate-fw .gate-ch-ic { display: flex; color: var(--navy); flex-shrink: 0; }
.gate-fw .gate-ch-lb { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gate-fw .gate-cv { flex-shrink: 0; margin-left: auto; }
.gate-fw .phone-cl { width: 212px; max-height: 206px; }
.gate-fw .phone-cl li { display: flex; align-items: center; gap: 9px; padding: 9px 12px; }
.gate-fw .phone-cl li .gate-ch-ic { color: #6B7280; transition: color .14s ease; }
.gate-fw .phone-cl li:hover .gate-ch-ic { color: var(--navy); }
.gate-fw .phone-cl li.sel { background: var(--gold-pale); font-weight: 700; }
.gate-fw .phone-cl li.sel .gate-ch-ic { color: var(--gold-deep); }
.gate-fw .form-control { font-size: 14.5px !important; color: #002828 !important; }
/* While we are waiting for an answer the block tints gold — the site's "look
   here" colour — instead of the red the form uses for a mistake. Nobody made a
   mistake; we just have not been told where to write back yet. */
.alt-contact.is-asking { background: var(--gold-pale); border: 1px solid rgba(193,143,89,0.35);
  border-radius: 12px; padding: 14px 16px;
  transition: background .3s ease, border-color .3s ease; }
.alt-contact.is-asking .alt-contact-hint { color: var(--gold-deep); font-weight: 600; }
@media (max-width: 600px) {
  .alt-contact-row { flex-direction: column; align-items: stretch; }
  .alt-contact-row select.form-control { flex: none; width: 100%; }
}

.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: 60px; height: 60px; border-radius: 50%;
  background: linear-gradient(135deg, var(--navy), var(--navy-mid));
  color: #fff; font-weight: 700; font-size: 22px;
  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;
  /* Two-line box, as on the other advisor cards: a name that wraps used to
     push this card's status line a row below its neighbours'. */
  min-height: 2.6em;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  overflow-wrap: anywhere;
}
.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 */
/* auto-fit, not a hardcoded count: this grid went from two cards to three and
   a fixed `repeat(2, 1fr)` would have dropped the third onto a row of its own.
   Same trap as the mobile nav's old repeat(5, 1fr). */
.meet-type-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px;
}
/* The picker before a channel has been chosen. Grey, because it is a prompt
   rather than an answer - and the field beside it is closed until the channel
   is known, so there is no way to type a number nothing can file. */
.gate-fw .gate-ch-lb.ch-unset { color: #9CA3AF; font-weight: 400; }
.gate-fw .form-control:disabled {
  background: transparent;
  color: #9CA3AF;
  cursor: not-allowed;
  -webkit-text-fill-color: #9CA3AF;   /* iOS greys disabled text its own way */
  opacity: 1;                          /* ...and dims it again on top */
}

/* A meeting format we could not actually deliver. Not display:none - a card
   that vanishes when the contact channel changes is a page that moves under
   the reader; greyed with a reason, it teaches the rule instead. Still
   clickable on purpose: selectMeetType() turns the click into "switch to
   Email", which is the one thing that unlocks it. */
.meet-type-card.locked {
  opacity: .55;
  border-style: dashed;
  background: var(--gray-100, #F3F4F6);
}
.meet-type-card.locked:hover { opacity: .72; }
.meet-type-card.locked[data-need="Email"] .meet-type-desc::after {
  /* TWO spaces after the escape, and the second one is the one you see.
     A CSS escape consumes a following whitespace character as its terminator,
     and it does that even when six hex digits were given — six digits only
     save you from needing the space, they do not stop it being eaten. Both
     "\00B7 requires" and "\0000B7 requires" therefore rendered as "·requires"
     with the gap missing; it took a screenshot to notice, twice. */
  content: "requires an email";
  color: #B45309;
  font-weight: 600;
}
html[lang="zh"] .meet-type-card.locked[data-need="Email"] .meet-type-desc::after { content: "\009700\008981\007535\005B50\0090AE\004EF6"; }
/* Same escape trap as above: two spaces, the second one is the one you see. */
.meet-type-card.locked[data-need="Phone"] .meet-type-desc::after {
  content: "requires a phone number";
  color: #B45309;
  font-weight: 600;
}
html[lang="zh"] .meet-type-card.locked[data-need="Phone"] .meet-type-desc::after { content: "\009700\008981\007535\008BDD\0053F7\007801"; }

.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;
}
/* Empty on the Book page now that the descriptions are gone - the element
   stays because the locked "requires ..." hint is a ::after on it.
   min-height holds one line either way, so a card showing a hint does not
   stand taller than the two beside it. */
.meet-type-desc { font-size: 12px; color: var(--text-muted); min-height: 1.1em; }

/* 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;
  padding: 5px 13px;
  background: rgba(11,26,26,0.04);
  border: 1px solid transparent;
  border-radius: 20px;
  font-size: 12.5px; color: var(--text-primary);
  line-height: 1.4;
}
/* A chip that opens a page: the same gold and the same arrow as the keyword
   pills on the card face, so the two layers speak one language.
   The tick that used to sit on every chip went with the underline -- a mark
   carried by all 45 of them tells a reader nothing, and the heading above
   already says these are the services covered. */
.modal-service-list li.has-link {
  padding: 0;                       /* the link takes the padding; see below */
  background: rgba(193,143,89,0.12);
  color: var(--gold-deep, #946431);
  transition: background .16s ease;
}
/* The whole chip is the link. While the padding belonged to the <li>, its outer
   edge looked pressable and did nothing. */
.modal-service-list li.has-link > a {
  display: inline-flex; align-items: center;
  padding: 5px 13px;
  border-radius: 20px;
  color: inherit;
}
.modal-service-list li.has-link > a::after {
  content: '\203A';
  margin-left: 5px; font-weight: 700; opacity: .75;
}
.modal-service-list li.has-link:hover { background: rgba(193,143,89,0.24); }
.modal-service-list li.has-link:hover > a::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .modal-service-list li.has-link { transition: none; }
}
.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%);
}
/* Inside the article reader the same strip needs the opposite treatment: the
   article above it is plain white, so it has to read as a different place
   rather than as more article. Cream ground, a real top edge, and the feathered
   glow turned off — melting into the background is the one thing to avoid here. */
#iframeModalSales {
  background: var(--cream);
  border-top: 1px solid #E2D7C3;
  box-shadow: inset 0 12px 20px -16px rgba(0, 40, 40, 0.22);
  margin-top: 0; padding-top: 30px;
}
#iframeModalSales::before { display: none; }

/* One-time "you're here" glow when the search box sends someone to the
   advisors (No results → Talk to a legal advisor). Static section otherwise. */
.home-sales-wrap.adv-arrive { border-radius: 28px; animation: adv-arrive-glow 1.4s ease-out 1; }
@keyframes adv-arrive-glow {
  0%   { box-shadow: 0 0 0 0 rgba(193,143,89,0); }
  25%  { box-shadow: 0 0 0 3px rgba(193,143,89,0.55), 0 0 40px rgba(193,143,89,0.25); }
  100% { box-shadow: 0 0 0 0 rgba(193,143,89,0); }
}
@media (prefers-reduced-motion: reduce) { .home-sales-wrap.adv-arrive { animation: none; } }
.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×230 + 3×20 = 940 (small slack to avoid
     sub-pixel wrap). This ceiling and the card width below move together — at
     910 a 230px card drops the row to three. */
  max-width: 990px;
  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 230px; max-width: 230px;
  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);
}
/* The photo keeps its cream ring everywhere; what changes with presence is the
   halo OUTSIDE it (.st-on / .st-busy below). Kept as a box-shadow rather than a
   second border so it costs no layout and can cross-fade. */
.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);
  transition: box-shadow .35s ease;
}
/* Advisors with no photo get the same halo, so presence does not depend on
   whether someone uploaded a picture. */
.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);
  transition: box-shadow .35s ease;
}
.home-adv-name {
  font-size: 15px; font-weight: 700; color: var(--navy);
  line-height: 1.3; margin-top: 2px;
  /* Two-line box — see .modal-adv-name: keeps the status line (and the buttons
     under it) at the same height whether a name wraps or not. */
  min-height: 2.6em;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  overflow-wrap: anywhere;
}
.home-adv-status {
  display: flex; align-items: center; gap: 5px;
}
.home-adv-avatar-wrap {
  position: relative; display: inline-block;
}
/* Presence halo — the dot is 13px and reads as a speck when the eye is moving
   across a row of faces; this says the same thing on the face itself.
   Translucent on purpose: solid green across several cards would become the
   loudest colour in the section, ahead of the navy heading and gold buttons. */
.home-adv-avatar-wrap.st-on .home-adv-photo,
.home-adv-avatar-wrap.st-on .home-adv-initial {
  box-shadow: 0 0 0 5px rgba(16,185,129,0.20), 0 2px 8px rgba(0,0,0,0.10);
}
.home-adv-avatar-wrap.st-busy .home-adv-photo,
.home-adv-avatar-wrap.st-busy .home-adv-initial {
  box-shadow: 0 0 0 5px rgba(217,119,6,0.30), 0 2px 8px rgba(0,0,0,0.10);
}
@media (prefers-reduced-motion: reduce) {
  .home-adv-photo, .home-adv-initial { transition: none; }
}

.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;
}
@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); }
}
/* Same size as the "CALL" rule below, and tucked under the name rather than
   floating halfway between it and the call block. On a phone this line used to
   be 11.5px against a 12px name - half a pixel apart, so neither read as the
   more important of the two.
   The -6px eats most of the card's uniform 10px gap, leaving 4px here against
   the 10px before "CALL": name and status are one group, the call block
   another. Green and 600 stay - this is the line that says the person can be
   reached right now. */
.home-adv-status-label {
  font-size: 10.5px; font-weight: 600; color: #9CA3AF;
  margin-top: -6px;
  transition: color .3s;
}
.home-adv-status-label.online { 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,
.fi.gate-flag.fi-cn {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgNjQwIDY0MCI+PGRlZnM+PHBhdGggaWQ9ImEiIGZpbGw9IiNmZjAiIGQ9Ik0wLTEgLjIyNDUtLjMwOS45NTExLS4zMDkuMzYzMy4xMTguNTg3OC44MDkgMCAuMzgyLS41ODc4LjgwOS0uMzYzMy4xMTgtLjk1MTEtLjMwOS0uMjI0NS0uMzA5WiIvPjwvZGVmcz48cGF0aCBmaWxsPSIjZWUxYzI1IiBkPSJNMCAwaDY0MHY2NDBIMHoiLz48dXNlIHhsaW5rOmhyZWY9IiNhIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMTIgMzE0KSBzY2FsZSgxNDgpIi8+PHVzZSB4bGluazpocmVmPSIjYSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNDMwIDE3MCkgcm90YXRlKDIzNikgc2NhbGUoNjApIi8+PHVzZSB4bGluazpocmVmPSIjYSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNTE1IDI3NSkgcm90YXRlKDI2Mikgc2NhbGUoNjApIi8+PHVzZSB4bGluazpocmVmPSIjYSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNTA1IDQwNSkgcm90YXRlKDI4Nykgc2NhbGUoNjApIi8+PHVzZSB4bGluazpocmVmPSIjYSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNDIwIDUwMCkgcm90YXRlKDMxMikgc2NhbGUoNjApIi8+PC9zdmc+) !important;
  background-position: center !important;
}
/* Appointment page: 60px picture, so flags between the homepage's and the modal's. */
.lawyer-pick .adv-lang-badge { top: -3px; right: -5px; }
.lawyer-pick .adv-lang-badge.adv-lang-1 { right: 1px; }
.lawyer-pick .adv-lang-badge .fi {
  width: 18px !important; height: 18px !important;
  border-width: 1.5px;
  box-shadow: 0 1px 4px rgba(0,0,0,.24);
}
.lawyer-pick .adv-lang-badge .fi + .fi { margin-left: -6px; }

/* Modal advisor cards use the same badge on a 64px avatar (homepage: 90px),
   so the flags come down a size and sit tighter to the photo. */
.modal-adv-avatar-wrap .adv-lang-badge { top: -3px; right: -5px; }
.modal-adv-avatar-wrap .adv-lang-badge.adv-lang-1 { right: 2px; }
.modal-adv-avatar-wrap .adv-lang-badge .fi {
  width: 19px !important; height: 19px !important;
  border-width: 1.5px;
  box-shadow: 0 1px 4px rgba(0,0,0,.26);
}
.modal-adv-avatar-wrap .adv-lang-badge .fi + .fi { margin-left: -6px; }

/* Round flags for the call gate. background-size:cover, not flag-icons' own
   `contain`: a contained flag inside a circle leaves bars at top and bottom.
   No white ring and no overlap, unlike the badge on a photo — the ring is
   there to lift flags off an avatar, and on a white dialog it would be
   invisible while the overlap turned two flags into one shape.
   See the CN rule further down: a circular crop needs its own artwork. */
/* Corner flags are absolutely positioned, so they push nothing aside. Without
   this the longest advisor name overlaps them by 22px on a 320px card (a 360px
   phone). Two 16px flags + their gap + breathing room. Applied only while
   flags are shown, so a call with none keeps the full width. */
#gateWho.has-langs { padding-right: 46px; }
.gate-flag {
  width: 16px !important; height: 16px !important;
  border-radius: 50% !important;
  background-size: cover !important;
  background-position: center !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
  display: block;
  flex-shrink: 0;
}
.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: 8px; width: 100%;
}
/* A pair of round icons on its own is in-call language — mute, speaker, hang
   up. This says what pressing them does before the eye gets there. */
.home-adv-call-sep {
  display: flex; align-items: center; gap: 9px; width: 100%;
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--navy); opacity: .75;
}
.home-adv-call-sep span { flex: 1; height: 1px; background: rgba(0,51,51,0.18); }
.home-adv-call-pair {
  display: flex; justify-content: center; gap: 24px; width: 100%;
}
/* The word is inside the button, not under it: with the label outside, the
   part that looks most like the control is the part that does nothing. */
.home-adv-call-btn {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: none; border: 0; padding: 2px;
  font-family: inherit; cursor: pointer;
}
/* Voice and Video are two ways to reach the same person, so they carry the same
   weight — filling one would say it is the real one and the other a fallback.
   Gold is deliberately not used here: it belongs to Book Now, one section over,
   and two gold shapes on one screen fight each other.
   48px clears the 44px floor both platform guidelines publish for the shortest
   side of a tap target; the full-width bars this replaced measured 37px on
   desktop and 34px on a phone, so the pair had been under it all along. */
.home-adv-call-disc {
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--navy); color: #fff;
  box-shadow: 0 4px 12px rgba(0,51,51,0.30);
  transition: background .2s, box-shadow .2s, transform .15s;
}
.adv-btn-label {
  font-size: 12px; font-weight: 700; color: var(--navy);
  transition: color .2s;
}
.home-adv-call-btn:hover:not(:disabled) .home-adv-call-disc {
  background: #004040; transform: scale(1.06);
  box-shadow: 0 6px 16px rgba(0,51,51,0.36);
}
/* Offline empties the disc instead of only fading the icon, so an unavailable
   card reads from across the row. Nothing here changes size, so the card is
   exactly as tall online or off. */
.home-adv-call-btn:disabled { cursor: not-allowed; }
.home-adv-call-btn:disabled .home-adv-call-disc {
  /* soft navy ghost instead of stark grey — calm "offline" look */
  background: rgba(0,40,40,0.05); color: rgba(0,40,40,0.42); box-shadow: none;
}
.home-adv-call-btn:disabled .adv-btn-label { color: rgba(0,40,40,0.42); }
@media (prefers-reduced-motion: reduce) {
  .home-adv-call-disc { transition: background .2s, box-shadow .2s; }
  .home-adv-call-btn:hover:not(:disabled) .home-adv-call-disc { transform: none; }
}
@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; }
  /* v2.2.5: 52px was 31% of the card vs 53% on desktop - the face is the card */
  .home-adv-photo, .home-adv-initial { width: 84px; height: 84px; }
  .home-adv-initial { font-size: 29px; }
  .home-adv-name { font-size: 12px; }
  /* Side by side again now that each button is a disc with one word under it:
     "Voice" and "Video" fit across a ~150px card where "Voice Call" could not.
     44px is the floor itself rather than a margin over it, so the discs do not
     shrink any further than this. */
  .home-adv-btn-row { gap: 6px; }
  .home-adv-call-sep { font-size: 9.5px; gap: 6px; }
  /* follows the rule above it, as on desktop */
  .home-adv-status-label { font-size: 9.5px; }
  .home-adv-call-pair { gap: 14px; }
  .home-adv-call-disc { width: 44px; height: 44px; }
  .adv-btn-label { font-size: 10.5px; }
  /* 16px on a 76px photo was 21% of the face, where desktop reads 28% — the
     badge was shrinking faster than the thing it sits on. 23px on an 84px
     photo is 27%, so it carries the same weight on a phone as on a screen.
     The ring and the overlap are drawn for the disc they sit on, so both move
     with it: a 1.5px ring disappears at this size, and -6px leaves the pair
     looking like two separate marks instead of one badge. */
  .adv-lang-badge { top: -3px; right: -7px; }
  .adv-lang-badge .fi { width: 23px !important; height: 23px !important; border-width: 2px; }
  .adv-lang-badge .fi + .fi { margin-left: -7px; }
}
.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;
  /* Fixed two-line box: names run one line ("Peter David Cole") or two
     ("Kwanruethai Chaisuwan"), which used to leave the status line below at a
     different height on every card. The name centres inside the box. */
  min-height: 2.6em;
  display: flex; align-items: center; justify-content: center;
  overflow-wrap: anywhere;
}
.modal-adv-status-label {
  font-size: 9.5px; font-weight: 600; color: #9CA3AF;
}
.modal-adv-status-label.online { color: #059669; }
.modal-adv-btn-row {
  width: 100%; display: flex; flex-direction: column; gap: 6px; margin-top: auto;
}
/* Same pair, same equal weight, in the smaller card inside a service modal.
   42px is below the 44px tap floor, but this card only exists inside a modal on
   a screen wide enough to open one; the homepage card a phone actually gets
   keeps the full 44px. */
.modal-adv-call-sep {
  display: flex; align-items: center; gap: 7px; width: 100%;
  font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--navy); opacity: .75;
}
.modal-adv-call-sep span { flex: 1; height: 1px; background: rgba(0,51,51,0.18); }
.modal-adv-call-pair {
  display: flex; justify-content: center; gap: 18px; width: 100%;
}
.modal-adv-call-btn {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  background: none; border: 0; padding: 2px;
  font-family: inherit; cursor: pointer;
}
.modal-adv-call-disc {
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--navy); color: #fff;
  box-shadow: 0 3px 10px rgba(0,51,51,0.28);
  transition: background .2s, box-shadow .2s, transform .15s;
}
.modal-adv-call-btn:hover:not(:disabled) .modal-adv-call-disc {
  background: #004040; transform: scale(1.06);
}
.modal-adv-call-btn:disabled { cursor: not-allowed; }
.modal-adv-call-btn:disabled .modal-adv-call-disc {
  background: rgba(0,40,40,0.05); color: rgba(0,40,40,0.42); box-shadow: none;
}
.modal-adv-call-btn:disabled .modal-adv-btn-label { color: rgba(0,40,40,0.42); }
.modal-adv-btn-label { font-size: 11px; font-weight: 700; color: var(--navy); }
.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;
}
@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)
   ============================================================ */
/* The same glass as `nav` at the top of this file - deliberately the same
   numbers, not merely similar ones, so the two bars are one material.
   It floats clear of the screen edges because a pane only reads as glass when
   you can see its edges; flush to three of them it just looks like a dim strip.
   max-width keeps it from stretching into an empty 1000px pill on a tablet,
   where the buttons inside are capped at 480px and centred. */
.mobile-nav {
  display: none;
  position: fixed;
  /* The same gutters as the header (`nav { margin: 14px 24px 0 }`) and, like
     the header, NO width cap. With 12px + max-width:520px the two bars stopped
     matching as soon as the screen passed ~544px: the header kept growing and
     this one sat short in the middle of the screen. */
  left: 24px;
  right: 24px;
  bottom: max(12px, env(safe-area-inset-bottom));
  transition: transform .3s ease;
  top: auto;
  height: auto;
  z-index: 1000;
  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;
  padding: 8px 8px 10px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.32),
              inset 0 1px 0 rgba(255,255,255,0.06);
}
.mobile-nav-inner {
  /* The count is NOT written down. It was repeat(5, 1fr) with Portal in the
     middle and had to be corrected by hand when Portal was commented out - the
     same correction every time a button is hidden or restored. Auto-flow takes
     however many buttons are really there, so the "restore = also raise the
     column count" note on each commented-out button no longer applies.

     No width cap either: the bar now reaches the same gutters as the header,
     and a capped inner would leave the buttons huddled in the middle of it. */
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px;
}
.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); }
/* The circle marks the page you are on and travels with it. The old active
   state was a faint gold tint behind the label, which on a dark bar at arm's
   length was close to no state at all.
   The ring is the bar's own colour, not a highlight: that is what makes the
   disc read as punched through the bar instead of stuck on top of it, so it
   has to track .mobile-nav's background if that ever changes. */
.mnav-item.active { color: var(--gold-glow); background: none; }
.mnav-item.active:hover { background: none; }
.mnav-item.active .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;
  color: #0a1414;
  border: 5px solid rgba(0, 26, 26, 0.7);   /* = .mobile-nav background */
  box-shadow: 0 6px 18px rgba(193,143,89,0.45);
  margin-top: -34px; margin-bottom: 2px;
  transition: transform .2s, box-shadow .2s;
}
.mnav-item.active .mnav-icon svg { width: 23px; height: 23px; stroke-width: 2; }
.mnav-item.active .mnav-label { font-weight: 800; }
/* Has to clear the circle standing proud of the bar AND the 12px the bar now
   floats above the bottom edge. */
.mobile-nav.nav-hidden { transform: translateY(calc(100% + 76px)); }
@media (max-width: 900px) {
  nav.nav-top-hidden { transform: translateY(calc(-100% - 28px)); opacity: 0; }
}
/* .mnav-center is gone: one button raised for good competed with the circle
   that now marks the active page, and two raised discs on a three-slot bar
   read as a mistake rather than a hierarchy. The commented-out Portal and
   Book buttons used to carry this class - they no longer need it. */

/* ============================================================
   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: 92px !important; }   /* bar + the 12px it floats */
  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; }
  .home-band { padding: 0 16px; }
  #page-services { padding-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: 30px 24px 28px; }
  .cta-actions { align-items: stretch; margin-top: 22px; }

  .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 */
  /* The active circle stands ~26px proud of the bar, and on the Team tab it
     sits exactly where this bubble used to. The bubble is hidden today, so
     this is insurance against the day it is switched back on. */
  #chatBubble { bottom: 130px !important; }
  #scrollSearchBtn { bottom: 160px !important; }
  #chatWindow { bottom: 196px !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 { position: relative; margin-top: 64px; padding: 34px 28px 36px; }
/* The same feathered panel the reviews and advisor blocks use, with its gradients
   turned the other way so three stacked panels do not read as one repeated tile.
   It is also what makes the glass above possible. */
.seo-block::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  border-radius: 28px;
  background:
    radial-gradient(56% 66% at 10% 6%,   rgba(0,40,40,0.07) 0%, rgba(0,40,40,0) 55%),
    radial-gradient(54% 64% at 92% 18%,  rgba(193,143,89,0.15) 0%, rgba(193,143,89,0) 58%),
    radial-gradient(70% 76% at 82% 100%, rgba(193,143,89,0.12) 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%);
}
.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 {
  /* Glass, with the stylesheet's standard recipe. It only reads as glass because
     .seo-block below gives the section something to sit on — on the bare cream
     page this would be a translucent nothing that costs a blur every frame. */
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(20px) saturate(170%);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  border: 1px solid rgba(255,255,255,0.75);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.95),
              0 10px 30px -16px rgba(0,40,40,0.22);
  border-radius: var(--radius-lg);
  padding: 28px 26px;
  text-align: center;
}
/* Was a numbered badge. The number said "step 1 of 3", which is not what these
   cards are — they are what the service gives you, in no particular order. The
   tile matches the practice-area cards so this introduces no new shape. */
.seo-step-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 15px;
  /* Solid gold, because the icons are drawn filled in white — on the pale tile
     they would read as a blank square. */
  background: linear-gradient(135deg, var(--gold), var(--gold-deep));
  color: #fff;
  box-shadow: 0 4px 12px rgba(193,143,89,0.22);
  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; }
}

/* The closing band arrives as one slab, so its button had no moment of its own:
   it was simply already there when the fade ended. Holding it back a fifth of a
   second lets the words settle first and the action land after them, which is
   where the eye should finish. Same 14px and .45s as everything else — the delay
   is the only new value, and it is small enough to read as sequence, not as lag.

   The eyebrow leads by the same amount in the other direction for the same
   reason: it is the line that says who this band is for. */
.cta-strip.rv-in .cta-eyebrow { animation: rvFadeUp .45s ease-out .06s backwards; }
.cta-strip.rv-in .cta-actions { animation: rvFadeUp .45s ease-out .20s backwards; }

/* 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,
  .cta-strip.rv-in .cta-eyebrow,
  .cta-strip.rv-in .cta-actions {
    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 }

/* ============================================================
   中文 — type for Chinese
   ------------------------------------------------------------
   Two things make Chinese read small on a site drawn for English:
   the Latin webfonts (Libre Baskerville / Inter) carry no CJK
   glyphs, so every Chinese character falls back to whatever the OS
   ships; and CJK glyphs fill their box edge to edge, so at the same
   px they look denser and smaller than Latin text with no spaces
   between words. So: name the fallback explicitly, add ~1–2px to
   running text, open the line-height, and drop the wide letter-
   spacing (tracking that flatters uppercase Latin only spreads CJK
   apart). Headings already ≥24px are left alone.
   Everything here is behind html[lang="zh"] — English is untouched.
   ============================================================ */
html[lang="zh"] body,
html[lang="zh"] input,
html[lang="zh"] textarea,
html[lang="zh"] select,
html[lang="zh"] button {
  font-family: 'Inter', 'PingFang SC', 'HarmonyOS Sans SC', 'Microsoft YaHei',
               'Hiragino Sans GB', 'Noto Sans SC', 'Source Han Sans SC', sans-serif;
}
/* Serif headings: almost no machine has a CJK serif installed, so the browser
   silently substitutes a sans one anyway — ask for the good sans directly. */
html[lang="zh"] .hero-title,
html[lang="zh"] .section-title,
html[lang="zh"] .reviews-title,
html[lang="zh"] .svc-name,
html[lang="zh"] .modal-title,
html[lang="zh"] .login-title,
html[lang="zh"] .form-section-title {
  font-family: 'PingFang SC', 'HarmonyOS Sans SC', 'Microsoft YaHei',
               'Hiragino Sans GB', 'Noto Sans SC', 'Source Han Sans SC', sans-serif;
  letter-spacing: 0;
}

/* Hero + section intros */
html[lang="zh"] .hero-sub            { font-size: 18.5px; line-height: 1.8; }
html[lang="zh"] .home-sales-sub      { font-size: 15.5px; line-height: 1.75; }
html[lang="zh"] .home-sales-eyebrow,
html[lang="zh"] .cta-eyebrow,
html[lang="zh"] .modal-sales-label   { font-size: 12.5px; letter-spacing: .06em; }
html[lang="zh"] .home-sales-title    { font-size: 26px; }
html[lang="zh"] .section-count,
html[lang="zh"] .filter-label        { font-size: 14px; letter-spacing: .04em; }

/* Service cards + their modal */
html[lang="zh"] .svc-name            { font-size: 20.5px; line-height: 1.45; }
html[lang="zh"] .svc-desc            { font-size: 15.5px; line-height: 1.85; }
html[lang="zh"] .svc-btn             { font-size: 14px; }
html[lang="zh"] .pill                { font-size: 12.5px; }
html[lang="zh"] .modal-desc          { font-size: 16px; line-height: 1.9; }
html[lang="zh"] .modal-service-list li { font-size: 12.5px; line-height: 1.7; }

/* Advisor cards — homepage and modal */
html[lang="zh"] .home-adv-name       { font-size: 16px; }
html[lang="zh"] .home-adv-status-label { font-size: 11.5px; }
html[lang="zh"] .home-adv-call-sep      { font-size: 11.5px; }
html[lang="zh"] .adv-btn-label       { font-size: 13px; }
html[lang="zh"] .modal-adv-name      { font-size: 13.5px; }
html[lang="zh"] .modal-adv-status-label { font-size: 10.5px; }
html[lang="zh"] .modal-adv-call-sep      { font-size: 10.5px; }
html[lang="zh"] .modal-adv-btn-label { font-size: 12px; }

/* Team */
html[lang="zh"] .team-role           { font-size: 13.5px; }
html[lang="zh"] .team-bio            { font-size: 14.5px; line-height: 1.8; }
html[lang="zh"] .spec-tag            { font-size: 12px; }
html[lang="zh"] .t-stat-label        { font-size: 12px; letter-spacing: .04em; }

/* Reviews */
html[lang="zh"] .rtext               { font-size: 17.5px; line-height: 1.85; }
html[lang="zh"] .rname               { font-size: 16px; }
html[lang="zh"] .rwhen,
html[lang="zh"] .gsum-count          { font-size: 14px; }

/* Forms, portal, footer */
html[lang="zh"] .form-label          { font-size: 13.5px; }
html[lang="zh"] .meet-type-desc,
html[lang="zh"] .lawyer-pick-spec    { font-size: 13px; }
html[lang="zh"] .ptab                { font-size: 14px; }
html[lang="zh"] .ov-sub,
html[lang="zh"] .footer-copy         { font-size: 13px; }
html[lang="zh"] .footer-links        { font-size: 14.5px; }
html[lang="zh"] .stat-label          { font-size: 13px; letter-spacing: .04em; }
/* .stat-num is Libre Baskerville, a Latin face with no Chinese glyphs: a
   translated figure fell back character by character and came out garbled.
   Same CJK stack as every other Chinese override here. The negative
   letter-spacing goes too — it is tuned for Latin numerals and only
   crowds Han characters. */
html[lang="zh"] .stat-num {
  font-family: 'PingFang SC', 'HarmonyOS Sans SC', 'Microsoft YaHei',
               'Hiragino Sans GB', 'Noto Sans SC', 'Source Han Sans SC', sans-serif;
  letter-spacing: 0;
  font-size: 28px;
}

/* Search dropdown — its rows are built in script.js with inline styles, so the
   language override has to out-rank them. */
html[lang="zh"] #searchDropdown [style*="font-size:13px"]   { font-size: 14.5px !important; }
html[lang="zh"] #searchDropdown [style*="font-size:11.5px"] { font-size: 13px !important; line-height: 1.7 !important; }
html[lang="zh"] #searchDropdown [style*="font-size:12px"]   { font-size: 13.5px !important; }
html[lang="zh"] #searchDropdown [style*="font-size:11px"]   { font-size: 12.5px !important; letter-spacing: .04em !important; }

@media (max-width: 600px) {
  /* Phones already run the small end of every scale — keep the bump, lose the
     extra line-height so cards don't grow a row taller. */
  html[lang="zh"] .hero-sub  { font-size: 16.5px; line-height: 1.7; }
  html[lang="zh"] .svc-desc  { font-size: 15px; line-height: 1.75; }
  html[lang="zh"] .home-adv-name { font-size: 13.5px; }
  html[lang="zh"] .modal-desc { font-size: 15.5px; line-height: 1.8; }
}