/* V2 site-wide surface policy. Keep these shared rules after page styles. */
:root {
  --v2-glass-surface: rgba(15, 15, 15, .95);
  --v2-glass-blur: blur(12px);
  --v2-glass-edge: rgba(255, 255, 255, .12);
}

html[data-theme="light"] {
  --v2-glass-surface: rgba(255, 255, 255, .97);
  --v2-glass-edge: rgba(0, 0, 0, .12);
}

.monument-portrait__grid {
  display: none !important;
}

/* V2 GRID START — restored from backup v2-20260815-footer-grid. */
.gradient-grid {
  position: fixed;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  opacity: .55;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, .06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, .06) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 115% 125% at 50% 52%, white 20%, white 62%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 115% 125% at 50% 52%, white 20%, white 62%, transparent 100%);
}

html[data-theme="light"] .gradient-grid {
  background-image:
    linear-gradient(to right, rgba(0, 0, 0, .06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 0, 0, .06) 1px, transparent 1px);
}
/* V2 GRID END — delete this block and the marked HTML element to remove it. */

/* Footer follows the header's scrolled glass state. */
.footer-container {
  background: var(--v2-glass-surface) !important;
  box-shadow: 0 0 24px rgba(255, 255, 255, .14) !important;
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
}

/* Consistent keyboard focus across the shared chrome and page controls. */
:where(a, button, [role="button"], input, select, textarea):focus-visible {
  outline: 3px solid rgba(var(--color-primary-rgb), .72);
  outline-offset: 3px;
}

/* Dark theme chrome uses the same soft white glow as the page panels. */
html:not([data-theme="light"]) .site-header .header-container,
html:not([data-theme="light"]) .site-header.scrolled .header-container {
  box-shadow: 0 0 24px rgba(255, 255, 255, .14) !important;
}

.home-command .sol-hero {
  background: rgba(15, 15, 15, .38) !important;
  background-color: rgba(15, 15, 15, .38) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* The hero remains transparent enough for the page grid to show through; no second grid is painted on it. */

html[data-theme="light"] .home-command .sol-hero {
  background: rgba(255, 255, 255, .48) !important;
  background-color: rgba(255, 255, 255, .48) !important;
}

/* V2 HERO VERTICAL RHYTHM START — center the hero stage and keep both gaps equal. */
.home-command {
  display: flex;
  align-items: stretch;
  min-height: calc(100svh - 8rem);
}

.home-command__showcase {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  width: 100%;
}

.home-command .sol-showcase {
  padding-block: 0;
}

.home-command .sol-concept {
  width: 100%;
  margin: 0;
  padding-block: clamp(2rem, 4vw, 4rem);
  overflow: visible;
}

.home-command .sol-hero {
  margin-block: auto;
}

/* Aura Spotlight — a broad blue/green halo sits behind the homepage portrait. */
.home-command .sol-portrait {
  isolation: isolate;
}

.home-command .aura-bg-shadow {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  width: 130%;
  height: 110%;
  aspect-ratio: auto;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 46% 54% 58% 42% / 50% 44% 56% 50%;
  background: linear-gradient(135deg, rgba(4, 55, 242, .55), rgba(16, 185, 129, .28));
  filter: blur(6px);
  opacity: 1;
  pointer-events: none;
  will-change: transform, opacity;
  animation: homeAuraMorph 14s ease-in-out infinite;
}

@keyframes homeAuraMorph {
  0%, 100% { border-radius: 46% 54% 58% 42% / 50% 44% 56% 50%; transform: translate(-50%, -50%) translate(0, -2%) rotate(-2deg) scale(1); }
  25% { border-radius: 52% 48% 50% 50% / 46% 54% 48% 52%; transform: translate(-50%, -50%) translate(3%, 0) rotate(2deg) scale(1.03); }
  50% { border-radius: 58% 42% 44% 56% / 42% 58% 42% 58%; transform: translate(-50%, -50%) translate(0, 3%) rotate(5deg) scale(1.05); }
  75% { border-radius: 52% 48% 50% 50% / 54% 46% 52% 48%; transform: translate(-50%, -50%) translate(-3%, 0) rotate(2deg) scale(1.03); }
}

.home-command .sol-portrait__frame {
  z-index: 1;
}

/* Editorial portrait polish: branded logo at the image's lower-left corner. */
.home-command .sol-portrait__index {
  top: auto;
  right: auto;
  bottom: clamp(4rem, 5vw, 5rem);
  left: clamp(-.5rem, -.4vw, -.25rem);
  width: clamp(3.8rem, 6vw, 5.5rem);
  line-height: 0;
  font-size: 0;
  filter: drop-shadow(0 0 12px rgba(var(--color-primary-rgb), .32));
  opacity: .96;
}

.home-command .sol-portrait__index picture,
.home-command .sol-portrait__index img {
  display: block;
  width: 100%;
  height: auto;
}

.home-command .sol-portrait__index img {
  -webkit-text-stroke: 0;
}

/* V2 PORTRAIT NOTCH START — large top-right editorial cut with no overlay border. */
.home-command .sol-portrait__frame {
  overflow: hidden;
  /* Match the SVG outline's 8.5% chamfer in both width and height. */
  --v2-portrait-notch: 8.5%;
  border-radius: clamp(18px, 2.75vw, 2.5rem);
  border: 0;
  clip-path: none !important;
}

.home-command .sol-portrait__frame img {
  border-radius: inherit;
}

.home-command .sol-portrait__frame::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  width: var(--v2-portrait-notch);
  height: var(--v2-portrait-notch);
  background: var(--v2-glass-surface);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  pointer-events: none;
}

/* Draw one responsive outline matching the supplied rounded-corner/chamfered shape. */
.home-command .sol-portrait__frame::after {
  z-index: 3;
  border: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M8 0H91.5L100 8.5V92C100 96.4 96.4 100 92 100H8C3.6 100 0 96.4 0 92V8C0 3.6 3.6 0 8 0Z' fill='none' stroke='%230437F2' stroke-opacity='.58' stroke-width='.28'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  box-shadow: inset 0 -120px 100px -80px rgba(0, 0, 0, .8);
}

/* V2 PORTRAIT NOTCH END */

/* V2 HERO VERTICAL RHYTHM END — remove this block to restore page-specific spacing. */

/* Short/zoomed viewports: reduce the fixed hero minimum so the centered stage still fits. */
@media (min-width: 992px) and (max-height: 900px) {
  .home-command {
    min-height: calc(100svh - 6.5rem);
  }

  .home-command .sol-concept {
    padding-block: clamp(.75rem, 1.5vw, 1.5rem);
  }

  .home-command .sol-hero {
    height: min(720px, calc(100svh - 9rem));
    min-height: 0;
    padding: clamp(1.25rem, 2.5vw, 2.5rem);
    overflow: hidden;
  }

  .home-command .sol-portrait {
    min-height: 0;
  }

  .home-command .sol-hero h1,
  .home-command .sol-hero h2 {
    font-size: clamp(3.2rem, 4.4vw, 4rem);
    line-height: .9;
  }

  .home-command .sol-identity {
    margin-top: .85rem;
  }

  .home-command .sol-identity > span:first-child {
    font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  }

  .home-command .sol-role {
    min-height: 1.8rem;
    margin-top: .65rem;
    font-size: 1rem;
  }

  .home-command .sol-summary {
    margin-top: .65rem;
    font-size: .9rem;
    line-height: 1.45;
  }

  .home-command .sol-actions {
    gap: .5rem;
    margin-top: 1rem;
  }

  .home-command .sol-btn {
    min-height: 40px;
    padding: .6rem 1rem;
    font-size: .8rem;
  }

  .home-command .sol-stats {
    margin-top: .75rem;
  }

  .home-command .sol-stat {
    min-height: 4.5rem;
    padding: .4rem .5rem;
  }

  .home-command .sol-stat strong {
    font-size: 1.35rem;
  }
}

@media (max-width: 991.98px) {
  .home-command .aura-bg-shadow {
    width: 130%;
    height: 110%;
  }

  /* Keep the brand mark anchored to the lower-left edge of the portrait on
     compact layouts instead of floating near the center of the image. */
  .home-command .sol-portrait__index {
    bottom: clamp(3.75rem, 6vw, 4.75rem);
    left: clamp(.8rem, 2.5vw, 1.25rem);
  }
}

@media (max-width: 899.98px) {
  .home-command .sol-portrait__index {
    bottom: clamp(1rem, 3.5vw, 1.5rem);
    left: clamp(.8rem, 3.5vw, 1.25rem);
    width: clamp(3.6rem, 16vw, 5rem);
    z-index: 4;
  }
}

/* Keep the footer's glass container in the same rounded visual language as
   the mobile header on tablet and phone widths. */
@media (max-width: 991.98px) {
  .footer {
    padding: 10px 0 18px;
  }

  .footer-container {
    width: auto !important;
    max-width: none !important;
    margin-inline: 10px;
    border-radius: 32px !important;
    padding: clamp(1.35rem, 4vw, 2rem) clamp(1rem, 3vw, 2rem);
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .site-header .header-container,
  .footer-container {
    width: auto !important;
    max-width: none !important;
    margin-inline: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-command .aura-bg-shadow {
    animation: none;
  }
}

/* V2 PROJECT GLASS SURFACES START — project hero/filter surfaces match sol-hero. */
.project-page .project-hero,
.project-page .project-filters {
  background: var(--v2-glass-surface) !important;
  background-color: var(--v2-glass-surface) !important;
  backdrop-filter: var(--v2-glass-blur);
  -webkit-backdrop-filter: var(--v2-glass-blur);
}

.project-page .project-filters .btn,
.project-page .project-filters .filter-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.35rem;
  gap: .35rem;
  padding: .55rem .9rem;
  border: 1px solid var(--v2-glass-edge) !important;
  border-radius: 999px !important;
  color: var(--color-text-secondary) !important;
  background: var(--v2-glass-surface) !important;
  background-color: var(--v2-glass-surface) !important;
  backdrop-filter: var(--v2-glass-blur);
  -webkit-backdrop-filter: var(--v2-glass-blur);
  box-shadow: none;
  font-size: .75rem !important;
  font-weight: 600;
  line-height: 1.2;
  transition: transform .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease;
}

.project-page .project-filters .btn:hover,
.project-page .project-filters .btn:focus-visible,
.project-page .project-filters .filter-chip:hover,
.project-page .project-filters .filter-chip:focus-visible {
  transform: translateY(-2px);
  border-color: var(--color-primary) !important;
  color: var(--color-primary) !important;
  background: var(--v2-glass-surface) !important;
  background-color: var(--v2-glass-surface) !important;
  box-shadow: 0 8px 20px rgba(var(--color-primary-rgb), .14);
  outline: none;
}

.project-page .project-filters .filter-chip.active,
.project-page .project-filters .filter-chip[aria-pressed="true"] {
  border-color: var(--color-primary) !important;
  color: var(--color-primary) !important;
  background: var(--v2-glass-surface) !important;
  background-color: var(--v2-glass-surface) !important;
  box-shadow: inset 0 -2px 0 var(--color-primary), 0 6px 16px rgba(var(--color-primary-rgb), .12);
}

.project-page .project-index-panel li a {
  background: var(--v2-glass-surface) !important;
  background-color: var(--v2-glass-surface) !important;
  backdrop-filter: var(--v2-glass-blur);
  -webkit-backdrop-filter: var(--v2-glass-blur);
}
/* V2 PROJECT GLASS SURFACES END — remove this block to restore project-specific surfaces. */

/* V2 GLASS BOX POLICY START — keep cards and information boxes on the sol-hero surface. */
:where(
  .info-page__header,
  .card,
  .achievement-card,
  .interest-tag,
  .skill-category-card,
  .project-card,
  .featured-certification-card,
  .about-detail-card,
  .about-skill-group,
  .about-certification-group,
  .about-stat-card,
  .project-index-panel,
  .service-card,
  .service-next-step,
  .captcha-wrapper,
  .service-glass-card
) {
  background: var(--v2-glass-surface) !important;
  background-color: var(--v2-glass-surface) !important;
  backdrop-filter: var(--v2-glass-blur);
  -webkit-backdrop-filter: var(--v2-glass-blur);
}

:where(
  .info-page__header,
  .card,
  .achievement-card,
  .interest-tag,
  .skill-category-card,
  .project-card,
  .featured-certification-card,
  .about-detail-card,
  .about-skill-group,
  .about-certification-group,
  .about-stat-card,
  .project-index-panel,
  .service-card,
  .service-next-step,
  .captcha-wrapper,
  .service-glass-card
):hover {
  background: var(--v2-glass-surface) !important;
  background-color: var(--v2-glass-surface) !important;
}
/* V2 GLASS BOX POLICY END — remove this block to restore page-specific card surfaces. */

/* Page styles use an important project-card background; keep the shared policy authoritative. */
.project-page .project-card {
  background: var(--v2-glass-surface) !important;
  background-color: var(--v2-glass-surface) !important;
  backdrop-filter: var(--v2-glass-blur);
  -webkit-backdrop-filter: var(--v2-glass-blur);
}

.project-page .project-card:hover {
  background: var(--v2-glass-surface) !important;
  background-color: var(--v2-glass-surface) !important;
}

.info-page .card,
.info-page .card:hover {
  background: var(--v2-glass-surface) !important;
  background-color: var(--v2-glass-surface) !important;
  backdrop-filter: var(--v2-glass-blur);
  -webkit-backdrop-filter: var(--v2-glass-blur);
}

html[data-theme="light"] .footer-container {
  box-shadow: 0 4px 20px rgba(0, 0, 0, .12) !important;
}

/* Header active state: keep the current link text and add one quiet underline. */
.site-header .nav-link.active,
.site-header .navbar-nav .nav-link.active,
.site-header .nav-link.active:hover,
.site-header .navbar-nav .nav-link.active:hover {
  color: var(--color-text-primary) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  font-weight: 600 !important;
  text-decoration-line: underline !important;
  text-decoration-color: var(--color-primary) !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 0.35rem !important;
  transform: none !important;
}

/* Shared framing for page heroes and primary panels. */
.home-command .sol-hero,
.info-page .info-page__header,
.project-page .project-hero,
.service-page .service-hero,
.project-page .project-index-panel {
  border: 1px solid rgba(255, 255, 255, .1) !important;
  box-shadow: 0 0 24px rgba(255, 255, 255, .14) !important;
}

html[data-theme="light"] .home-command .sol-hero,
html[data-theme="light"] .info-page .info-page__header,
html[data-theme="light"] .project-page .project-hero,
html[data-theme="light"] .service-page .service-hero,
html[data-theme="light"] .project-page .project-index-panel {
  border-color: rgba(0, 0, 0, .1) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .12) !important;
}

/* Smaller cards and tags use the same edge with a quieter shadow. */
:where(
  .project-page .project-card,
  .project-page .project-index-panel li a,
  .project-page .project-card .badge,
  .info-page .card,
  .thank-you-content .card,
  .info-page .featured-certification-card,
  .info-page .about-detail-card,
  .info-page .about-skill-group,
  .info-page .about-certification-group,
  .info-page .about-stat-card,
  .info-page .about-chip-list span,
  .achievement-card,
  .interest-tag,
  .skill-category-card,
  .service-page .service-card,
  .service-page .service-next-step,
  .service-page .service-tags span,
  .service-glass-card,
  .badge,
  .tag-badge
) {
  border-color: rgba(255, 255, 255, .1) !important;
  box-shadow: 0 0 16px rgba(255, 255, 255, .08) !important;
}

html[data-theme="light"] :where(
  .project-page .project-card,
  .project-page .project-index-panel li a,
  .project-page .project-card .badge,
  .info-page .card,
  .thank-you-content .card,
  .info-page .featured-certification-card,
  .info-page .about-detail-card,
  .info-page .about-skill-group,
  .info-page .about-certification-group,
  .info-page .about-stat-card,
  .info-page .about-chip-list span,
  .achievement-card,
  .interest-tag,
  .skill-category-card,
  .service-page .service-card,
  .service-page .service-next-step,
  .service-page .service-tags span,
  .service-glass-card,
  .badge,
  .tag-badge
) {
  border-color: rgba(0, 0, 0, .1) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .08) !important;
}

/* Keep intentional off-canvas decoration from creating a horizontal phone scroll. */
html,
body {
  overflow-x: clip;
}

@supports not (overflow: clip) {
  html,
  body {
    overflow-x: hidden;
  }
}

@media (max-width: 767.98px) {
  /* The 10px header margins must be included in its available width. */
  .site-header .header-container {
    width: auto !important;
  }

  /* Avoid Bootstrap's wide negative gutter on the nested profile row. */
  .info-page--about #about-profile-section {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}

/* Mobile navigation correction: actions live in the header, while the
   viewport-level navigation dock lives outside the sticky header. */
.mobile-header-actions,
.mobile-bottom-nav {
  display: none;
}

.site-header .nav-icon,
.site-header .nav-label-mobile {
  display: none;
}

@media (min-width: 992px) {
  .site-header .navbar-toggler {
    display: none !important;
  }

  .site-header .navbar-collapse {
    display: flex !important;
    align-items: center;
    flex-basis: auto;
  }
}

@media (max-width: 991.98px) {
  body {
    padding-bottom: calc(90px + env(safe-area-inset-bottom));
  }

  /* Keep the fixed dock viewport-bound; filtered ancestors can create a
     containing block for fixed descendants in Chromium/WebKit. */
  .site-header,
  .site-header .header-container {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .site-header::before {
    display: none;
  }

  .site-header {
    padding: 10px 0;
  }

  .site-header .header-container {
    width: auto !important;
    margin-inline: 10px;
    padding: 8px 14px;
  }

  .site-header .navbar {
    min-height: 38px;
  }

  .site-header .navbar-brand {
    min-width: 0;
    margin-right: 0;
  }

  .site-header .navbar-brand .signature-name {
    font-size: clamp(1.05rem, 4vw, 1.3rem);
    white-space: nowrap;
  }

  .site-header .navbar-toggler {
    display: none !important;
  }

  .site-header .navbar-collapse,
  .site-header .navbar-collapse.collapse {
    display: none !important;
    position: static !important;
    inset: auto !important;
  }

  .mobile-header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    flex-shrink: 0;
  }

  .mobile-header-action {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 11px !important;
  }

  .mobile-header-action::after {
    display: none !important;
  }

  .mobile-header-action i {
    margin: 0 !important;
    font-size: .95rem;
  }

  #searchModal .modal-dialog {
    width: min(92vw, 560px);
    max-width: none;
    margin: 1rem auto;
  }

  #searchModal .modal-content {
    max-height: calc(100svh - 2rem);
  }

  #searchModal #searchResults {
    max-height: min(400px, 48svh);
  }

  .mobile-bottom-nav {
    position: fixed !important;
    z-index: 1040;
    inset: auto 10px 10px 10px !important;
    display: block !important;
    width: auto;
    min-height: 68px;
    padding: 7px max(8px, env(safe-area-inset-left)) calc(7px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-right));
    background: var(--v2-glass-surface);
    border: 1px solid var(--v2-glass-edge);
    border-radius: 32px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .22);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
  }

  html[data-theme="light"] .mobile-bottom-nav {
    box-shadow: 0 -10px 28px rgba(0, 0, 0, .1);
  }

  .mobile-bottom-nav__list {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-items: stretch;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .mobile-bottom-nav__item {
    display: flex;
    min-width: 0;
  }

  .mobile-bottom-nav .nav-link {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    width: 100%;
    min-width: 0;
    min-height: 52px;
    margin: 0;
    padding: 6px 2px;
    border: 0;
    border-radius: 24px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: var(--color-text-gray) !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    font-size: .62rem;
    line-height: 1.05;
    font-weight: 600;
    white-space: nowrap;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: color .25s ease, background-color .25s ease, transform .2s ease, box-shadow .25s ease;
  }

  .mobile-bottom-nav .nav-link::before {
    position: absolute;
    z-index: -1;
    inset: 2px;
    content: "";
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(var(--color-primary-rgb), .2), rgba(var(--color-primary-rgb), .06));
    opacity: 0;
    transform: scale(.86);
    transition: opacity .25s ease, transform .25s ease;
  }

  .mobile-bottom-nav .nav-link > * {
    position: relative;
    z-index: 1;
  }

  .mobile-bottom-nav .nav-link:hover,
  .mobile-bottom-nav .nav-link:focus-visible {
    color: var(--color-text-primary) !important;
    background: var(--color-overlay-light) !important;
    transform: translateY(-2px) !important;
  }

  .mobile-bottom-nav .nav-link:hover::before,
  .mobile-bottom-nav .nav-link:focus-visible::before,
  .mobile-bottom-nav .nav-link.active::before {
    opacity: 1;
    transform: scale(1);
  }

  .mobile-bottom-nav .nav-link.active,
  .mobile-bottom-nav .nav-link.active:hover,
  .mobile-bottom-nav .nav-link.active:focus-visible {
    color: var(--color-primary) !important;
    background: var(--color-primary-light) !important;
    border-radius: 24px;
    box-shadow: inset 0 0 0 1px rgba(var(--color-primary-rgb), .22), 0 5px 16px rgba(var(--color-primary-rgb), .2) !important;
    text-decoration: none !important;
  }

  .mobile-bottom-nav .nav-link.active .nav-icon {
    transform: translateY(-1px) scale(1.13);
    filter: drop-shadow(0 0 5px rgba(var(--color-primary-rgb), .45));
  }

  .mobile-bottom-nav .nav-link.active::after {
    position: absolute;
    right: 50%;
    bottom: 3px;
    width: 4px;
    height: 4px;
    content: "";
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 8px currentColor;
    transform: translateX(50%);
  }

  .mobile-bottom-nav .nav-link:active,
  .mobile-bottom-nav .nav-link.active:active {
    color: var(--color-primary) !important;
    background: rgba(var(--color-primary-rgb), .22) !important;
    transform: scale(.94) !important;
    box-shadow: inset 0 0 0 1px rgba(var(--color-primary-rgb), .3), 0 2px 8px rgba(var(--color-primary-rgb), .18) !important;
  }

  .mobile-bottom-nav .nav-icon {
    display: block;
    font-size: 1rem;
    line-height: 1;
  }
}

@media (max-width: 559px) {
  .site-header .navbar-brand .signature-name {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 58vw;
  }

  .mobile-bottom-nav .nav-label {
    display: none;
  }
}

@media (max-width: 360px) {
  .mobile-header-actions {
    gap: 2px;
  }

  .mobile-header-action {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
  }

  .site-header .header-container {
    margin-inline: 6px;
    padding-inline: 10px;
  }

  .mobile-bottom-nav {
    padding-inline: 4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-bottom-nav .nav-link,
  .mobile-bottom-nav .nav-link::before,
  .mobile-bottom-nav .nav-link .nav-icon {
    transition: none;
  }
}

/* CSP-safe presentation classes for elements previously styled inline. */
.navbar-logo--compact {
  height: 32px;
  width: auto;
  margin-right: 0.5rem;
}

.footer-logo--compact {
  height: 40px;
  width: auto;
}

.thank-you-content--spaced {
  padding-top: 8rem;
  padding-bottom: 5rem;
  min-height: 70vh;
}

/* Shared return-to-top control. */
.back-to-top {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: calc(1rem + env(safe-area-inset-bottom));
  z-index: 1040;
  display: grid;
  width: 2.9rem;
  height: 2.9rem;
  place-items: center;
  border: 1px solid var(--v2-glass-edge);
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .22), 0 0 0 1px rgba(var(--color-primary-rgb), .08);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(.75rem) scale(.88);
  transition: opacity .25s ease, visibility .25s ease, transform .25s ease, border-color .25s ease, color .25s ease;
}

.back-to-top__chevron {
  display: block;
  width: .7rem;
  height: .7rem;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: translateY(.12rem) rotate(-135deg);
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.back-to-top:hover,
.back-to-top:focus-visible {
  border-color: var(--color-primary);
  color: #fff;
  transform: translateY(-.2rem) scale(1.04);
  box-shadow: 0 14px 30px rgba(var(--color-primary-rgb), .2), 0 0 0 4px rgba(var(--color-primary-rgb), .1);
}

.back-to-top:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

@media (max-width: 991.98px) {
  .back-to-top {
    bottom: calc(6.5rem + env(safe-area-inset-bottom));
  }
}

@media (prefers-reduced-motion: reduce) {
  .back-to-top {
    transition: none;
  }
}

.thank-you-content.is-visible {
  display: block;
}

.thanks-logo--compact {
  height: 50px;
  width: auto;
  opacity: 0.9;
}

.toast-notification {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9999;
  padding: 12px 24px;
  color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgb(0 0 0 / 30%);
  animation: slideInUp 0.3s ease-out;
  font-size: 14px;
  font-weight: 500;
}

.toast-success {
  background: #22c55e;
}

.toast-info {
  background: #3b82f6;
}

.toast-notification.is-dismissing {
  animation: slideOutDown 0.3s ease-out;
}

@keyframes slideInUp {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes slideOutDown {
  from { transform: translateY(0); opacity: 1; }
  to { transform: translateY(100%); opacity: 0; }
}

.search-result-item {
  padding: 12px 16px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  border-bottom: 1px solid rgb(255 255 255 / 5%);
}

.search-result-item:last-child {
  border-bottom: none;
}

.search-result-item:hover,
.search-result-item.selected {
  background: rgb(255 255 255 / 5%);
}

.search-result-item kbd {
  padding: 2px 6px;
  background: rgb(255 255 255 / 10%);
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 4px;
  font-family: Inter, monospace;
  font-size: 11px;
}

#searchResults {
  max-height: 400px;
  overflow-y: auto;
}