@charset "utf-8";

:root { --ink: #1C1814; --ink-dark: #13100D; --accent: #7E2433; --accent-hover: #5F1824; --bronze: #9B7A45; --bronze-soft: #C8A86E; --paper: #F7F3EA; --paper-warm: #EFE8DA; --line: rgba(28, 24, 20, 0.12); --line-soft: rgba(28, 24, 20, 0.07); }

.font-display { font-optical-sizing: auto; font-variation-settings: "opsz" 96; }

html { scroll-padding-top: 80px; scroll-behavior: smooth; }

html, body { overflow-x: hidden !important; max-width: 100% !important; }

body { background-color: var(--paper); background-image: radial-gradient(circle at 18% 12%, rgba(155, 122, 69, 0.035) 0px, transparent 42%), radial-gradient(circle at 84% 78%, rgba(126, 36, 51, 0.03) 0px, transparent 46%); background-attachment: fixed; }

.border-gray-200 { border-color: var(--line) !important; }

.border-gray-300 { border-color: rgba(28, 24, 20, 0.18) !important; }

.divide-gray-100 > :not([hidden]) ~ :not([hidden]) { border-color: var(--line-soft) !important; }

.divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--line) !important; }

.ring-gray-200 { --tw-ring-color: var(--line) !important; }

.rule-bronze { height: 1px; background: linear-gradient(90deg, transparent, var(--bronze) 18%, var(--bronze) 82%, transparent); opacity: 0.5; }

.eyebrow { font-family: Onest, system-ui, sans-serif; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; }

#nav.nav-open { position: fixed !important; inset: 64px 0px 0px !important; width: 100vw !important; height: calc(-64px + 100dvh) !important; max-height: calc(-64px + 100vh) !important; background: var(--paper) !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; padding-top: 8px !important; padding-right: 20px !important; padding-left: 20px !important; padding-bottom: calc(24px + env(safe-area-inset-bottom)) !important; gap: 0px !important; z-index: 60 !important; overflow-y: auto !important; }

.nav-open a.nav-link { display: flex; flex-direction: column; gap: 2px; padding: 18px 4px; border-bottom: 1px solid var(--line-soft); position: relative; transition: padding-left 0.2s; font-family: Fraunces, Georgia, serif; font-size: 1.6rem; font-weight: 600; color: var(--ink); letter-spacing: -0.015em; line-height: 1.1; }

.nav-open a.nav-link::before { content: ""; position: absolute; left: 4px; top: 50%; width: 2px; height: 24px; margin-top: -12px; background: var(--accent); border-radius: 2px; opacity: 0; transition: opacity 0.2s; }

.nav-open a.nav-link:active { padding-left: 16px; }

.nav-open a.nav-link:active::before { opacity: 1; }

.nav-open a.nav-link::after { content: attr(data-desc); font-family: Onest, sans-serif; font-weight: 400; font-size: 0.8125rem; line-height: 1.3; color: rgba(28, 24, 20, 0.5); letter-spacing: 0px; margin-top: 4px; }

.nav-open .mobile-only-contact { display: block; margin-top: auto; padding-top: 28px; margin-bottom: 14px; }

.nav-open .mobile-contact-label { font-family: Onest, sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(28, 24, 20, 0.45); margin-bottom: 8px; }

.nav-open .mobile-contact-text { font-family: Onest, sans-serif; font-size: 14px; line-height: 1.55; color: var(--ink); font-weight: 500; }

.nav-open .mobile-contact-hours { font-family: Onest, sans-serif; font-size: 13px; color: rgba(28, 24, 20, 0.6); margin-top: 6px; }

.nav-open .mobile-menu-cta { align-items: center; justify-content: center; padding: 16px 20px; background: var(--accent); color: rgb(255, 255, 255); font-family: Onest, sans-serif; font-size: 1rem; font-weight: 600; border-radius: 12px; text-align: center; letter-spacing: 0px; box-shadow: rgba(126, 36, 51, 0.55) 0px 10px 26px -10px; display: flex !important; }

.nav-open .mobile-menu-cta:active { background: var(--accent-hover); }

@media (max-width: 639px) {
  body { padding-bottom: 76px; }
}

.practice-card { position: relative; isolation: isolate; }

.practice-card::after { content: ""; position: absolute; inset: 0px; background: radial-gradient(440px circle at var(--mx, 50%) var(--my, 50%),
                rgba(155, 122, 69, 0.22),
                rgba(126, 36, 51, 0.10) 35%,
                transparent 55%); opacity: 0; transition: opacity 0.35s; pointer-events: none; border-radius: inherit; z-index: 0; }

.practice-card:hover::after { opacity: 1; }

.practice-card > * { position: relative; z-index: 1; }

.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1); }

.reveal.is-visible { opacity: 1; transform: none; }

.reveal [data-stagger] { opacity: 0; transform: translateY(18px); transition: opacity 0.6s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1); }

.reveal.is-visible [data-stagger] { opacity: 1; transform: none; }

.reveal.is-visible [data-stagger]:nth-child(2) { transition-delay: 0.08s; }

.reveal.is-visible [data-stagger]:nth-child(3) { transition-delay: 0.16s; }

.reveal.is-visible [data-stagger]:nth-child(4) { transition-delay: 0.24s; }

.stats-paper { background-color: var(--paper-warm); background-image: radial-gradient(circle at 25% 25%, rgba(126, 36, 51, 0.024) 0px, transparent 50%), radial-gradient(circle at 75% 75%, rgba(155, 122, 69, 0.03) 0px, transparent 50%); }

@keyframes phone-ring { 
  0%, 78%, 100% { transform: rotate(0deg); }
  80%, 88% { transform: rotate(-14deg); }
  82%, 86% { transform: rotate(0deg); }
  84% { transform: rotate(14deg); }
  90% { transform: rotate(-8deg); }
  92% { transform: rotate(8deg); }
  94% { transform: rotate(-4deg); }
  96% { transform: rotate(4deg); }
}

.phone-anim { transform-origin: 50% 55%; animation: 4s ease-in-out 0s infinite normal none running phone-ring; }

.phone-anim-fast { animation: 2.4s ease-in-out 0s infinite normal none running phone-ring; }

@keyframes chat-pulse { 
  0% { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(1.6); opacity: 0; }
}

.chat-pulse-ring { animation: 2s ease-out 0s infinite normal none running chat-pulse; }

@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

@media print {
  #chatWidget, header, .fixed { display: none !important; }
}

#header { background: rgba(247, 243, 234, 0.82); backdrop-filter: blur(16px) saturate(1.35); box-shadow: rgba(155, 122, 69, 0.22) 0px 1px 0px; transition: box-shadow 0.35s, background 0.35s; }

.header-scrolled { box-shadow: rgba(155, 122, 69, 0.3) 0px 1px 0px, rgba(28, 24, 20, 0.4) 0px 12px 30px -18px; background: rgba(247, 243, 234, 0.92) !important; }

.hd-word { color: var(--ink); }

.hd-word .hd-accent { color: var(--accent); }

.logo-link .logo-mark { transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1); }

.logo-link:hover .logo-mark { transform: rotate(-3deg) scale(1.05); }

#header .nav-link { color: rgb(78, 70, 60); transition: color 0.25s, background-size 0.35s cubic-bezier(0.32, 0.72, 0, 1); background-image: linear-gradient(var(--bronze), var(--bronze)); background-repeat: no-repeat; background-position: left 100%; background-size: 0% 1.5px; padding-bottom: 3px; }

#header .nav-link:hover { color: var(--ink); background-size: 100% 1.5px; }

#burger { color: var(--ink); }

.nav-open a.nav-link { color: var(--ink) !important; background-image: none; }

.legal { max-width: 760px; margin: 0px auto; padding: 64px 24px 96px; }

.legal h1 { font-family: Fraunces, Georgia, serif; font-size: 2.75rem; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 8px; line-height: 1.05; }

.legal h2 { font-family: Fraunces, Georgia, serif; font-size: 1.6rem; font-weight: 600; color: var(--ink); letter-spacing: -0.015em; margin: 36px 0px 12px; }

.legal h3 { font-family: Fraunces, Georgia, serif; font-size: 1.2rem; font-weight: 600; color: var(--ink); margin: 24px 0px 8px; }

.legal p { margin-bottom: 12px; line-height: 1.75; color: rgb(78, 70, 60); }

.legal ul { margin: 12px 0px 12px 24px; line-height: 1.75; color: rgb(78, 70, 60); }

.legal a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

.legal__updated { font-size: 0.875rem; color: rgb(138, 129, 117); margin-bottom: 32px; }

.legal__back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 32px; font-size: 0.875rem; color: var(--ink); font-weight: 600; }

.legal__back:hover { color: var(--accent); }
