/*
! tailwindcss v3.3.0 | MIT License | https://tailwindcss.com
*/

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: #e5e7eb;
}

::before,
::after {
  --tw-content: '';
}

html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  tab-size: 4;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-feature-settings: normal;
  font-variation-settings: normal;
}

body {
  margin: 0;
  line-height: inherit;
}

hr {
  height: 0;
  color: inherit;
  border-top-width: 1px;
}

abbr:where([title]) {
  text-decoration: underline dotted;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

a {
  color: inherit;
  text-decoration: inherit;
}

b,
strong {
  font-weight: bolder;
}

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, "Consolas", "Liberation Mono", "Menlo", monospace;
  font-size: 1em;
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

table {
  text-indent: 0;
  border-color: inherit;
  border-collapse: collapse;
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
}

button,
select {
  text-transform: none;
}

button,
[type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: button;
  appearance: button;
  background-color: transparent;
  background-image: none;
}

:-moz-focusring {
  outline: auto;
}

:-moz-ui-invalid {
  box-shadow: none;
}

progress {
  vertical-align: baseline;
}

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

[type='search'] {
  -webkit-appearance: textfield;
  appearance: textfield;
  outline-offset: -2px;
}

::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  appearance: button;
  font: inherit;
}

summary {
  display: list-item;
}

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

textarea {
  resize: vertical;
}

input::placeholder,
textarea::placeholder {
  opacity: 1;
  color: #9ca3af;
}

button,
[role="button"] {
  cursor: pointer;
}

:disabled {
  cursor: default;
}

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
}

img,
video {
  max-width: 100%;
  height: auto;
}

[hidden] {
  display: none;
}

/* Custom CSS for Mascot Consultants */

/* Custom Styles */
html {
    scroll-behavior: smooth;
}

/* Hero Slider Styles */
.hero-slider {
    position: relative;
    overflow: hidden;
}

.slide {
    transition: opacity 1s ease-in-out;
}

.slide.active {
    opacity: 1 !important;
}

.slider-btn {
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.slider-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.indicator.active {
    opacity: 1 !important;
    transform: scale(1.2);
}

/* Floating Contact Buttons */
.floating-btn {
    position: relative;
    animation: float 3s ease-in-out infinite;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.floating-btn:hover {
    animation-play-state: paused;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.25);
}

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

/* Floating button tooltips */
.floating-btn .absolute {
    pointer-events: none;
}

/* Navigation active state */
.nav-link.active {
    color: #0284c7 !important;
    font-weight: 600;
}

/* Hero section background */
.hero-bg {
    background: linear-gradient(135deg, rgba(2, 132, 199, 0.9), rgba(15, 23, 42, 0.8)), 
                url('https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

/* Service cards hover effect */
.service-card {
    transition: all 0.3s ease;
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

/* Portfolio hover effects */
.portfolio-item {
    overflow: hidden;
    position: relative;
}

.portfolio-item img {
    transition: transform 0.3s ease;
}

.portfolio-item:hover img {
    transform: scale(1.1);
}

.portfolio-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(2, 132, 199, 0.9), rgba(15, 23, 42, 0.8));
    opacity: 0;
    transition: opacity 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.portfolio-item:hover .portfolio-overlay {
    opacity: 1;
}

/* Team member cards */
.team-card {
    transition: all 0.3s ease;
}

.team-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

/* Statistics counter animation */
.counter {
    font-size: 2.5rem;
    font-weight: bold;
    color: #0284c7;
}

/* Button animations */
.btn-primary {
    background: linear-gradient(135deg, #0284c7, #0369a1);
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #0369a1, #075985);
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(2, 132, 199, 0.3);
}

/* Form styling */
.form-input {
    transition: all 0.3s ease;
    border: 2px solid #e2e8f0;
}

.form-input:focus {
    border-color: #0284c7;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.1);
    outline: none;
}

/* Loading animation */
.loading {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Parallax sections */
.parallax {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
    background: #0284c7;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #0369a1;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .hero-bg {
        background-attachment: scroll;
    }
    
    .parallax {
        background-attachment: scroll;
    }
    
    .counter {
        font-size: 2rem;
    }
}

/* Animation delays for staggered effects */
.animate-delay-100 {
    animation-delay: 0.1s;
}

.animate-delay-200 {
    animation-delay: 0.2s;
}

.animate-delay-300 {
    animation-delay: 0.3s;
}

.animate-delay-400 {
    animation-delay: 0.4s;
}

/* Gallery lightbox */
.gallery-item {
    cursor: pointer;
    transition: all 0.3s ease;
}

.gallery-item:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

/* Contact form success message */
.alert-success {
    background-color: #d1fae5;
    border-color: #a7f3d0;
    color: #065f46;
}

.alert-error {
    background-color: #fee2e2;
    border-color: #fecaca;
    color: #991b1b;
}

/* Professional color scheme overrides */
.text-primary { color: #0284c7; }
.text-secondary { color: #eab308; }
.bg-primary { background-color: #0284c7; }
.bg-secondary { background-color: #eab308; }
.border-primary { border-color: #0284c7; }

/* Architecture-specific styling */
.blueprint-bg {
    background-image: 
        linear-gradient(rgba(2, 132, 199, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(2, 132, 199, 0.1) 1px, transparent 1px);
    background-size: 20px 20px;
}

.construction-pattern {
    background-image: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 10px,
        rgba(234, 179, 8, 0.1) 10px,
        rgba(234, 179, 8, 0.1) 20px
    );
}

/* Brand theme overrides (logo-inspired warm palette) */
:root {
    /* Default theme variables (will be overridden by theme classes) */
    --primary-50:  #FFFBEB; --primary-100: #FEF3C7; --primary-200: #FDE68A; --primary-300: #FCD34D; --primary-400: #FBBF24; --primary-500: #F59E0B; --primary-600: #D97706; --primary-700: #B45309; --primary-800: #92400E; --primary-900: #78350F;
    --secondary-50:#FFF7ED; --secondary-100:#FFEDD5; --secondary-200:#FED7AA; --secondary-300:#FDBA74; --secondary-400:#FB923C; --secondary-500:#F97316; --secondary-600:#EA580C; --secondary-700:#C2410C; --secondary-800:#9A3412; --secondary-900:#7C2D12;
    --accent-50:  #f8fafc; --accent-100: #f1f5f9; --accent-200:#e2e8f0; --accent-300:#cbd5e1; --accent-400:#94a3b8; --accent-500:#64748b; --accent-600:#475569; --accent-700:#334155; --accent-800:#1e293b; --accent-900:#0f172a;

    /* Site surfaces */
    --brand-bg: var(--primary-50);
    --brand-surface: var(--accent-100);
    --brand-card: #FFFFFF;
}

/* === 7 Theme Presets === */
/* 1) Amber + Orange + Navy (default) */
/* Uses :root defaults; no override block needed */

/* 2) Navy + Gold */
.theme-navy-gold {
    --primary-50:#FFFBEB; --primary-100:#FEF3C7; --primary-200:#FDE68A; --primary-300:#FCD34D; --primary-400:#FBBF24; --primary-500:#D4A017; --primary-600:#B8860B; --primary-700:#946B09; --primary-800:#7A5807; --primary-900:#5D4305;
    --secondary-50:#eef2f7; --secondary-100:#dfe7f1; --secondary-200:#bfd0e3; --secondary-300:#99b7d3; --secondary-400:#5f8fb8; --secondary-500:#2f6a9a; --secondary-600:#0d3b66; --secondary-700:#0b3357; --secondary-800:#092a47; --secondary-900:#071d32;
    --accent-50:#f8fafc; --accent-100:#f1f5f9; --accent-200:#e2e8f0; --accent-300:#cbd5e1; --accent-400:#94a3b8; --accent-500:#64748b; --accent-600:#475569; --accent-700:#334155; --accent-800:#1e293b; --accent-900:#0f172a;
}

/* 3) Emerald + Charcoal */
.theme-emerald {
    --primary-50:#ecfdf5; --primary-100:#d1fae5; --primary-200:#a7f3d0; --primary-300:#6ee7b7; --primary-400:#34d399; --primary-500:#10b981; --primary-600:#059669; --primary-700:#047857; --primary-800:#065f46; --primary-900:#064e3b;
    --secondary-50:#cffafe; --secondary-100:#a5f3fc; --secondary-200:#67e8f9; --secondary-300:#22d3ee; --secondary-400:#06b6d4; --secondary-500:#0ea5a1; --secondary-600:#0891b2; --secondary-700:#0e7490; --secondary-800:#155e75; --secondary-900:#164e63;
    --accent-50:#f8fafc; --accent-100:#f1f5f9; --accent-200:#e2e8f0; --accent-300:#cbd5e1; --accent-400:#94a3b8; --accent-500:#64748b; --accent-600:#475569; --accent-700:#334155; --accent-800:#1f2937; --accent-900:#111827;
}

/* 4) Royal Blue + Gold */
.theme-royal-gold {
    --primary-50:#fff7e5; --primary-100:#ffefcc; --primary-200:#ffe3a3; --primary-300:#f9cf6c; --primary-400:#eeb94e; --primary-500:#d4a017; --primary-600:#b8860b; --primary-700:#946b09; --primary-800:#7a5807; --primary-900:#5d4305;
    --secondary-50:#e0f2fe; --secondary-100:#bae6fd; --secondary-200:#7dd3fc; --secondary-300:#38bdf8; --secondary-400:#0ea5e9; --secondary-500:#0284c7; --secondary-600:#0369a1; --secondary-700:#075985; --secondary-800:#0c4a6e; --secondary-900:#0a3d59;
    --accent-50:#f8fafc; --accent-100:#f1f5f9; --accent-200:#e2e8f0; --accent-300:#cbd5e1; --accent-400:#94a3b8; --accent-500:#64748b; --accent-600:#475569; --accent-700:#334155; --accent-800:#1e293b; --accent-900:#0f172a;
}

/* 5) Burgundy + Sand */
.theme-burgundy-sand {
    --primary-50:#fff7ed; --primary-100:#ffedd5; --primary-200:#fed7aa; --primary-300:#fdba74; --primary-400:#fb923c; --primary-500:#f97316; --primary-600:#ea580c; --primary-700:#c2410c; --primary-800:#9a3412; --primary-900:#7c2d12;
    --secondary-50:#fdf2f8; --secondary-100:#fce7f3; --secondary-200:#fbcfe8; --secondary-300:#f9a8d4; --secondary-400:#f472b6; --secondary-500:#be185d; --secondary-600:#9d174d; --secondary-700:#831843; --secondary-800:#6b0f3f; --secondary-900:#4a0e2c;
    --accent-50:#fafaf9; --accent-100:#f5f5f4; --accent-200:#e7e5e4; --accent-300:#d6d3d1; --accent-400:#a8a29e; --accent-500:#78716c; --accent-600:#57534e; --accent-700:#44403c; --accent-800:#292524; --accent-900:#1c1917;
}

/* 6) Slate + Cyan */
.theme-slate-cyan {
    --primary-50:#ecfeff; --primary-100:#cffafe; --primary-200:#a5f3fc; --primary-300:#67e8f9; --primary-400:#22d3ee; --primary-500:#06b6d4; --primary-600:#0891b2; --primary-700:#0e7490; --primary-800:#155e75; --primary-900:#164e63;
    --secondary-50:#f8fafc; --secondary-100:#f1f5f9; --secondary-200:#e2e8f0; --secondary-300:#cbd5e1; --secondary-400:#94a3b8; --secondary-500:#64748b; --secondary-600:#475569; --secondary-700:#334155; --secondary-800:#1f2937; --secondary-900:#111827;
    --accent-50:#f1f5f9; --accent-100:#e2e8f0; --accent-200:#cbd5e1; --accent-300:#94a3b8; --accent-400:#64748b; --accent-500:#475569; --accent-600:#334155; --accent-700:#1f2937; --accent-800:#0f172a; --accent-900:#0b1220;
}

/* 7) Forest + Cream */
.theme-forest-cream {
    --primary-50:#f0fdf4; --primary-100:#dcfce7; --primary-200:#bbf7d0; --primary-300:#86efac; --primary-400:#4ade80; --primary-500:#22c55e; --primary-600:#16a34a; --primary-700:#15803d; --primary-800:#166534; --primary-900:#14532d;
    --secondary-50:#fefce8; --secondary-100:#fef9c3; --secondary-200:#fef08a; --secondary-300:#fde047; --secondary-400:#facc15; --secondary-500:#eab308; --secondary-600:#ca8a04; --secondary-700:#a16207; --secondary-800:#854d0e; --secondary-900:#713f12;
    --accent-50:#fafaf9; --accent-100:#f5f5f4; --accent-200:#e7e5e4; --accent-300:#d6d3d1; --accent-400:#a8a29e; --accent-500:#78716c; --accent-600:#57534e; --accent-700:#44403c; --accent-800:#292524; --accent-900:#1c1917;
}

/* 8) Purple + Magenta */
.theme-purple-magenta {
    --primary-50:#f5f3ff; --primary-100:#ede9fe; --primary-200:#ddd6fe; --primary-300:#c4b5fd; --primary-400:#a78bfa; --primary-500:#8b5cf6; --primary-600:#7c3aed; --primary-700:#6d28d9; --primary-800:#5b21b6; --primary-900:#4c1d95;
    --secondary-50:#fdf4ff; --secondary-100:#fae8ff; --secondary-200:#f5d0fe; --secondary-300:#f0abfc; --secondary-400:#e879f9; --secondary-500:#d946ef; --secondary-600:#c026d3; --secondary-700:#a21caf; --secondary-800:#86198f; --secondary-900:#701a75;
    --accent-50:#f8fafc; --accent-100:#f1f5f9; --accent-200:#e2e8f0; --accent-300:#cbd5e1; --accent-400:#94a3b8; --accent-500:#64748b; --accent-600:#475569; --accent-700:#334155; --accent-800:#1e293b; --accent-900:#0f172a;
}

/* Apply warm background site-wide */
body {
    background-color: var(--brand-bg);
}

/* Lightly tint typical white sections to brand surface */
.bg-white {
    background-color: var(--brand-surface) !important;
}

/* Make accent-50 (light gray sections) use warm brand surface */
.bg-accent-50 {
    background-color: var(--brand-surface) !important;
}

/* Utility to force true white cards when needed */
.bg-card-white {
    background-color: var(--brand-card) !important;
}

/* Video slide styling to ensure full cover */
.slide video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Smooth slide transitions */
.hero-slider .slide {
    transition: opacity 700ms ease-in-out;
}

/* === Tailwind Utility Overrides to use CSS variables === */
/* Text colors */
.text-primary-400 { color: var(--primary-400) !important; }
.text-primary-500 { color: var(--primary-500) !important; }
.text-primary-600 { color: var(--primary-600) !important; }
.text-primary-700 { color: var(--primary-700) !important; }
.text-secondary-400 { color: var(--secondary-400) !important; }
.text-secondary-500 { color: var(--secondary-500) !important; }
.text-secondary-600 { color: var(--secondary-600) !important; }
.text-accent-500 { color: var(--accent-500) !important; }
.text-accent-600 { color: var(--accent-600) !important; }
.text-accent-700 { color: var(--accent-700) !important; }
.text-accent-800 { color: var(--accent-800) !important; }

/* Background colors */
.bg-primary-50 { background-color: var(--primary-50) !important; }
.bg-primary-100 { background-color: var(--primary-100) !important; }
.bg-primary-600 { background-color: var(--primary-600) !important; }
.bg-primary-700 { background-color: var(--primary-700) !important; }
.bg-secondary-500 { background-color: var(--secondary-500) !important; }
.bg-secondary-600 { background-color: var(--secondary-600) !important; }
.bg-secondary-700 { background-color: var(--secondary-700) !important; }
.bg-accent-50 { background-color: var(--accent-50) !important; }
.bg-accent-800 { background-color: var(--accent-800) !important; }
.bg-accent-900 { background-color: var(--accent-900) !important; }

/* Borders */
.border-accent-100 { border-color: var(--accent-100) !important; }
.border-secondary-600 { border-color: var(--secondary-600) !important; }

/* Hover states (escape colon) */
.hover\:bg-primary-700:hover { background-color: var(--primary-700) !important; }
.hover\:bg-primary-600:hover { background-color: var(--primary-600) !important; }
.hover\:bg-secondary-600:hover { background-color: var(--secondary-600) !important; }
.hover\:text-primary-200:hover { color: var(--primary-200) !important; }

/* Theme switcher UI */
.theme-menu { position: absolute; right: 0; top: 100%; margin-top: 0.5rem; background: #fff; color: #0f172a; border-radius: 0.5rem; box-shadow: 0 10px 25px rgba(0,0,0,0.15); width: 16rem; padding: 0.75rem; display: none; z-index: 1000; pointer-events: auto; }
.theme-menu.open { display: block; }
.theme-swatch { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.5rem; }
.theme-chip { height: 28px; border-radius: 9999px; cursor: pointer; border: 1px solid rgba(0,0,0,0.1); }
.theme-chip:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,0.12); }
.theme-toggle-active .theme-menu { display: block; }

/* === Themed Section + Card Styles (center pages) === */
.section-title { color: var(--accent-800); }
.section-subtitle { color: var(--accent-600); }
.section-divider { width: 72px; height: 4px; background-color: var(--primary-500); border-radius: 9999px; margin: 0.5rem auto 0; }

/* Generic card base */
.card,
.service-card,
.testimonial-card {
    background-color: var(--brand-card);
    border: 1px solid var(--accent-100);
    border-radius: 0.75rem;
    box-shadow: 0 10px 16px rgba(0,0,0,0.05);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover,
.service-card:hover,
.testimonial-card:hover { transform: translateY(-4px); box-shadow: 0 18px 28px rgba(0,0,0,0.08); border-color: var(--primary-300); }

/* Service card icon bubble helpers (optional for consistency) */
.icon-bubble { background-color: var(--primary-100); color: var(--primary-600); }

/* Portfolio overlay effects */
.portfolio-item .portfolio-overlay {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: linear-gradient(180deg, rgba(15,23,42,0) 0%, rgba(15,23,42,0.55) 60%, rgba(15,23,42,0.85) 100%);
    opacity: 0; transition: opacity .25s ease;
}
.portfolio-item:hover .portfolio-overlay { opacity: 1; }
.portfolio-item img { transition: transform .35s ease; display: block; }
.portfolio-item:hover img { transform: scale(1.04); }

/* Category pill */
.category-pill {
    background-color: var(--primary-100);
    color: var(--primary-700);
    padding: 0.25rem 0.6rem;
    border-radius: 9999px;
    font-weight: 600;
}

/* Testimonial card accent */
.testimonial-card { border-top: 4px solid var(--primary-500); }

/* ===== Legal Page (Privacy / Terms) Typography ===== */
/* Testimonials slider overflow & controls cleanup */
.swiper.swiper-testimonials { overflow: hidden; }
.swiper-testimonials .swiper-pagination,
.swiper-testimonials .swiper-scrollbar { display: none !important; }
.swiper-testimonials .swiper-wrapper { overflow: visible; }

.legal-content {
    counter-reset: h2counter;
    color: var(--accent-700);
    font-size: 1.05rem;
    line-height: 1.75;
}
.legal-content h1,
.legal-content h2,
.legal-content h3,
.legal-content h4 { 
    color: var(--accent-900);
    font-family: 'Playfair Display', serif;
    font-weight: 700;
}
.legal-content h1 { font-size: 2.25rem; margin: 1.5rem 0 1rem; }
.legal-content h2 { font-size: 1.5rem; margin: 1.75rem 0 0.75rem; counter-reset: h3counter; }
.legal-content h3 { font-size: 1.125rem; margin: 1rem 0 0.5rem; }
.legal-content h4 { font-size: 1rem; margin: 0.75rem 0 0.4rem; }

/* Numbered headings (H2, H3) */
.legal-content h2::before {
    counter-increment: h2counter;
    content: counter(h2counter) '. ';
    color: var(--primary-600);
}
.legal-content h3::before {
    counter-increment: h3counter;
    content: counter(h2counter) '.' counter(h3counter) ' ';
    color: var(--primary-600);
}

/* Headings anchor offset to account for fixed header */
.legal-content h2, .legal-content h3 { scroll-margin-top: 120px; }

/* Paragraphs */
.legal-content p { margin: 0.5rem 0 1rem; }

/* Lists */
.legal-content ul { list-style: disc; padding-left: 1.5rem; margin: 0.25rem 0 1rem; }
.legal-content ol { list-style: decimal; padding-left: 1.5rem; margin: 0.25rem 0 1rem; }
.legal-content li { margin: 0.25rem 0; }

/* Links */
.legal-content a { color: var(--primary-700); text-decoration: underline; }
.legal-content a:hover { color: var(--primary-600); }

/* Tables */
.legal-content table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
.legal-content th, .legal-content td { border: 1px solid var(--accent-200); padding: 0.6rem 0.75rem; }
.legal-content thead th { background-color: var(--accent-100); }

/* Blockquotes */
.legal-content blockquote {
    border-left: 4px solid var(--primary-500);
    padding-left: 1rem;
    color: var(--accent-600);
    margin: 1rem 0;
}

/* Horizontal rule */
.legal-content hr { border: 0; border-top: 1px solid var(--accent-200); margin: 1.5rem 0; }

/* Notes */
.legal-content .note { background: #fffbeb; border: 1px solid #fde68a; padding: 0.75rem 1rem; border-radius: 0.5rem; }
.legal-content .warning { background: #fef2f2; border: 1px solid #fecaca; padding: 0.75rem 1rem; border-radius: 0.5rem; }

/* TOC styles */
.legal-toc ul { list-style: none; padding-left: 0; }
.legal-toc a { color: var(--accent-600); text-decoration: none; }
.legal-toc a:hover { color: var(--primary-700); }
.legal-toc li.font-medium > a { color: var(--accent-800); }