/* Shared visual system — applied after each page's local styles to preserve content and interactions. */
:root {
    --bg-main: #fffaf2;
    --bg-card: #ffffff;
    --bg-card-hover: #fffefb;
    --bg-elevated: #f4eee4;
    --text-light: #183c36;
    --text-muted: #59706b;
    --text-muted-light: #49635e;
    --accent: #ef6a50;
    --accent-hover: #d9533d;
    --accent-dim: rgba(239, 106, 80, 0.12);
    --accent-glow: rgba(239, 106, 80, 0.22);
    --border: #dce4dc;
    --border-hover: #91aaa1;
    --shadow-card: 0 14px 34px rgba(30, 62, 54, 0.08);
    --shadow-hover: 0 22px 44px rgba(30, 62, 54, 0.14);
    --radius: 18px;
    --nav-h: 82px;
}

html { background: var(--bg-main); }
body {
    background: var(--bg-main) !important;
    color: var(--text-muted) !important;
    letter-spacing: -0.01em;
}
h1, h2, h3, h4, h5 { color: var(--text-light) !important; letter-spacing: -0.035em; }
.container, .wrap { max-width: 1200px !important; }

/* Navigation */
nav {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: var(--nav-h) !important;
    background: rgba(255, 250, 242, 0.94) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-bottom: 1px solid rgba(24, 60, 54, 0.1) !important;
    box-shadow: 0 2px 18px rgba(24, 60, 54, 0.035);
    z-index: 10000 !important;
    pointer-events: auto !important;
}
.nav-wrapper, .nav-inner {
    position: relative !important;
    z-index: 10001 !important;
    pointer-events: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    height: 100% !important;
}
.nav-logo { filter: none; }
.nav-brand-name { color: var(--text-light) !important; font-size: 1.15rem !important; }
.nav-links { gap: 4px !important; pointer-events: auto !important; }
.nav-links a {
    color: var(--text-muted) !important;
    border-radius: 999px !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}
.nav-links a:hover, .nav-links a.active { color: var(--text-light) !important; background: #edf3ed !important; }
.nav-links a.btn-primary, .nav-cta {
    background: var(--accent) !important;
    color: #fff !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}
.nav-links a.btn-primary:hover, .nav-cta:hover { background: var(--accent-hover) !important; color: #fff !important; }
.nav-burger {
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    position: relative !important;
    z-index: 10005 !important;
    min-width: 44px;
    min-height: 44px;
    padding: 8px;
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
}
.nav-burger span {
    display: block !important;
    width: 22px !important;
    height: 2px !important;
    background: var(--text-light) !important;
    border-radius: 2px !important;
    transition: transform 0.3s ease, opacity 0.3s ease !important;
}
.nav-burger.active span:nth-child(1), .nav-burger.open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg) !important;
}
.nav-burger.active span:nth-child(2), .nav-burger.open span:nth-child(2) {
    opacity: 0 !important;
}
.nav-burger.active span:nth-child(3), .nav-burger.open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg) !important;
}
.mobile-menu {
    background: rgba(255, 250, 242, 0.98) !important;
    border-color: var(--border) !important;
    z-index: 9999 !important;
}
.mobile-menu a {
    color: var(--text-light) !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}
.mobile-menu a:hover { background: #edf3ed !important; color: var(--text-light) !important; }
.mobile-menu a.btn-primary { background: var(--accent) !important; color: #fff !important; }

/* Shared calls to action and rhythm */
.btn-primary, .btn-email {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #fff !important;
    border-radius: 999px !important;
    box-shadow: 0 10px 20px rgba(239, 106, 80, 0.18);
}
.btn-primary:hover, .btn-email:hover { background: var(--accent-hover) !important; border-color: var(--accent-hover) !important; box-shadow: 0 13px 24px rgba(239, 106, 80, 0.24) !important; }
.btn-secondary, .btn-outline, .back-link {
    background: #fff !important;
    border-color: #bfd0c7 !important;
    color: var(--text-light) !important;
    border-radius: 999px !important;
}
.btn-secondary:hover, .btn-outline:hover { background: #edf3ed !important; border-color: var(--text-light) !important; }
.section-label, .hero-eyebrow, .profile-role, .work-category, .case-category { color: var(--accent) !important; }
.section-label::before, .case-category::before { background: var(--accent) !important; }
section { border-color: rgba(24, 60, 54, 0.1) !important; }

/* A warm, editorial hero treatment shared across home, directories, profiles, and case studies. */
.hero, .page-hero, .profile-hero, .work-hero, .case-header, .page-header {
    background:
        radial-gradient(circle at 82% 22%, rgba(219, 240, 125, 0.78) 0 11%, transparent 28%),
        radial-gradient(circle at 10% 74%, rgba(239, 106, 80, 0.13) 0 16%, transparent 34%),
        #fffaf2 !important;
    border-color: rgba(24, 60, 54, 0.12) !important;
}
.hero::before, .page-hero::before, .profile-hero::before, .work-hero::before, .case-header::before { opacity: 0.38 !important; }
.hero { padding-top: calc(var(--nav-h) + 92px) !important; padding-bottom: 88px !important; }
.hero-eyebrow {
    background: #edf3ed !important;
    border-color: #c7d8cb !important;
    border-radius: 999px !important;
    color: var(--text-light) !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
}
.hero h1, .page-hero h1, .work-hero h1, .case-header h1, .profile-name, .profile-content h1 { font-weight: 700 !important; }
.hero h1 .highlight { color: var(--accent) !important; }
.hero p, .page-hero p, .work-hero p, .case-header p, .profile-bio { color: var(--text-muted-light) !important; }
.hero-stats {
    max-width: 900px;
    margin-inline: auto;
    padding: 28px 36px 0 !important;
    border-color: rgba(24, 60, 54, 0.14) !important;
}
.hero-stat-num { color: var(--text-light) !important; }
.hero-stat-label { color: var(--text-muted) !important; }

/* Cards become tactile paper panels with clear affordances. */
.premium-card, .service-card, .expert-card, .work-card, .case-study, .testimonial-card,
.cert-card, .credential-item, .focus-card, .surgery-card, .slideshow-card, .flagship-card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow-card);
}
.premium-card::after, .work-card::after { background: var(--accent) !important; }
.premium-card:hover, .service-card:hover, .expert-card:hover, .work-card:hover, .case-study:hover,
.testimonial-card:hover, .cert-card:hover, .focus-card:hover, .surgery-card:hover, .flagship-card:hover {
    background: var(--bg-card-hover) !important;
    border-color: #aac1b4 !important;
    box-shadow: var(--shadow-hover) !important;
}
.team-img, .expert-img { border-color: #c7d8cb !important; background: #f4eee4 !important; }
.team-role, .expert-role, .work-tag, .expert-tag, .deliverable-tag, .category-tag { color: var(--accent) !important; }
.work-tag, .expert-tag, .deliverable-tag, .category-tag { background: #fff0ea !important; border-radius: 999px !important; }
.team-links { border-color: var(--border) !important; }
.team-link { color: var(--text-light) !important; border-color: #c7d8cb !important; background: #fff !important; }
.team-link:hover { background: #fff0ea !important; border-color: var(--accent) !important; color: var(--accent) !important; }
.btn-profile { background: #edf3ed !important; border-color: #d2dfd5 !important; color: var(--text-light) !important; border-radius: 12px !important; }
.premium-card:hover .btn-profile { color: var(--text-light) !important; border-color: #aac1b4 !important; background: #e5f0e6 !important; }

#partner, .cta-banner { background: #edf3ed !important; }
.cta-banner { border-color: rgba(24, 60, 54, 0.1) !important; }
footer { background: #183c36 !important; border-color: #183c36 !important; }
footer p { color: #dce9dd !important; }
footer a { color: #fff !important; }
.skip-link { background: var(--accent) !important; color: #fff !important; border-radius: 999px !important; }
:focus-visible { outline-color: var(--accent) !important; }

@media (max-width: 768px) {
    :root { --nav-h: 70px; }
    .container, .wrap { padding-left: 20px !important; padding-right: 20px !important; }
    .hero { padding-top: calc(var(--nav-h) + 58px) !important; padding-bottom: 58px !important; }
    .hero-stats { padding-inline: 8px !important; }
    .page-hero, .profile-hero, .work-hero, .case-header, .page-header { background-position: 85% 0, 0 100% !important; }
}

/* Motion and mobile drawer enhancements. */
.reveal-on-scroll { opacity: 0; transform: translateY(24px); transition: opacity .7s ease var(--reveal-delay, 0ms), transform .7s cubic-bezier(.2,.7,.2,1) var(--reveal-delay, 0ms); }
.reveal-on-scroll.is-revealed { opacity: 1; transform: translateY(0); }
.menu-overlay { position: fixed; inset: 0; border: 0; background: rgba(15, 39, 34, .45); opacity: 0; display: none; pointer-events: none; transition: opacity .32s ease; z-index: 9998; }
.menu-overlay.is-visible { display: block !important; opacity: 1 !important; pointer-events: auto !important; }
body.menu-open { overflow: hidden; }
.work-highlights .section-header h2::before, .portfolio-section h2::before { content: 'Work Highlights'; display: block; margin-bottom: 10px; color: var(--accent); font: 700 .7rem/1 var(--font-body, sans-serif); letter-spacing: .14em; text-transform: uppercase; }
@media (max-width: 768px) {
  .nav-links { display: none !important; }
  .nav-burger { display: flex !important; align-items: center; justify-content: center; }
  .mobile-menu { top: 0 !important; left: auto !important; right: 0; width: min(86vw, 360px) !important; height: 100dvh !important; min-height: 100dvh; padding: 100px 20px 28px !important; align-items: stretch !important; justify-content: flex-start; gap: 6px !important; border: 0 !important; border-left: 1px solid var(--border) !important; box-shadow: -18px 0 50px rgba(24,60,54,.14); transform: translateX(105%); visibility: hidden; transition: transform .36s cubic-bezier(.2,.75,.25,1), visibility 0s linear .36s !important; z-index: 9999 !important; overflow-y: auto; }
  .mobile-menu.open { transform: translateX(0); visibility: visible; transition-delay: 0s !important; }
  .mobile-menu a { max-width: none !important; min-height: 48px; display: flex; align-items: center; justify-content: center; }
  .mobile-menu a.btn-primary { margin-top: 16px; }
}
@media (min-width: 769px) {
  .nav-links { display: flex !important; }
  .nav-burger { display: none !important; }
  .mobile-menu { display: none !important; pointer-events: none !important; visibility: hidden !important; }
  .menu-overlay { display: none !important; pointer-events: none !important; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* Responsive guardrails for every page's independently-authored card layout. */
.grid-2, .grid-3, .expert-grid, .portfolio-grid, .media-grid, .cert-grid, .slideshow-grid {
    min-width: 0;
}
.premium-card, .service-card, .expert-card, .work-card, .case-study, .testimonial-card,
.cert-card, .credential-item, .focus-card, .surgery-card, .slideshow-card, .flagship-card,
.media-card { min-width: 0; }
.work-img-wrap, .preview-area, .slideshow-container { min-width: 0; }
.work-img, .preview-img, .media-preview img { display: block; width: 100%; max-width: 100%; }
.media-preview { overflow: hidden; background: var(--bg-elevated); }
.media-preview img { height: 100%; object-fit: cover; object-position: center; }

/* Keep card footers aligned even when bios, tags, or social links differ. */
#team .grid-3 > .premium-card, .expert-grid > .expert-card,
.grid-3 > .work-card, .portfolio-grid > .work-card, .portfolio-grid > .case-study,
.media-grid > .media-card, .testimonial-track > .testimonial-card,
.slideshow-grid > .slideshow-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}
#team .card-actions, .expert-grid .card-actions,
.work-card .work-content, .case-study .case-content, .media-card .media-card-content,
.testimonial-card .attribution { margin-top: auto; }

#team .card-actions, .expert-grid .card-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    padding-top: 16px !important;
    border-top: 1px solid var(--border) !important;
    flex-shrink: 0 !important;
    position: relative !important;
    z-index: 1 !important;
}

#team .team-links, .expert-grid .team-links {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    min-height: auto !important;
    width: 100% !important;
    flex-shrink: 0 !important;
}

#team .team-link, .expert-grid .team-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 !important;
    font-size: 0.72rem !important;
    padding: 5px 12px !important;
    line-height: 1.2 !important;
    flex-shrink: 0 !important;
}

#team .btn-profile, .expert-grid .btn-profile {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
}
.work-card .work-content, .case-study .case-content, .media-card .media-card-content { width: 100%; }
.media-card-content > .btn-secondary { margin-top: auto; }
@media (max-width: 1024px) {
    .grid-3, .portfolio-grid, .expert-grid, .media-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .work-img-wrap, .preview-area { height: clamp(180px, 28vw, 220px) !important; }
}
@media (max-width: 480px) {
    .grid-2, .grid-3, .portfolio-grid, .expert-grid, .media-grid, .cert-grid, .slideshow-grid { grid-template-columns: minmax(0, 1fr) !important; }
    .premium-card, .service-card, .expert-card, .work-card, .case-study, .testimonial-card, .media-card { max-width: 100%; }
    .work-img-wrap, .preview-area { height: min(56vw, 220px) !important; }
}

/* Cohesive expert profile presentation. */
.profile-hero .profile-grid, .profile-hero .profile-content { align-items: center !important; }
.profile-img-wrapper { box-shadow: 14px 16px 0 #dff0c1, var(--shadow-card) !important; }
.profile-role, .profile-title { display: inline-flex; width: fit-content; padding: 6px 10px; background: #fff0ea; border-radius: 999px; }
.profile-credentials-inline { display: block; padding: 12px 14px; border-left: 3px solid var(--accent); background: rgba(255,255,255,.56); border-radius: 0 12px 12px 0; }
.profile-bio { font-size: 1.06rem !important; }
.cert-section, .portfolio-section, .timeline-section { position: relative; }
.cert-section { background: #fff !important; }
.portfolio-section { background: #fffaf2 !important; }
.portfolio-section .work-card, .portfolio-section .case-study { min-height: 100%; }
.cta-actions { gap: 12px; }
@media (max-width: 480px) { .profile-img-wrapper { box-shadow: 8px 10px 0 #dff0c1, var(--shadow-card) !important; } .profile-credentials-inline { font-size: .78rem; } }