/* Prosperitas Services - shared component styles (light theme)
   Brand tokens from logo: navy #203861 (wordmark), gray #606062 (tagline).
   Palette: paper #F8F9FB (base), white cards, tint #EDF1F7 (alt sections),
   navy #203861 (single accent), navy-light #3D5A8F (hover), slate neutrals.
   Radius system: interactive = pill, cards/media = 16-24px (rounded-2xl).
   Theme: light, locked. The navy CTA color-block is the one dark moment.
   The previous dark theme is preserved on branch backup/dark-theme. */

::selection {
  background: #203861;
  color: #fff;
}

body { text-rendering: optimizeLegibility; }

/* ---- Buttons ---- */
.btn-primary,
.btn-ghost,
.btn-light {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 9999px;
  padding: 0.875rem 1.75rem;
  font-size: 0.875rem;
  font-weight: 700;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.btn-primary { background: #203861; color: #fff; }
.btn-primary:hover { background: #1A2E50; }
.btn-ghost { border: 1px solid #cbd5e1; color: #203861; }
.btn-ghost:hover { border-color: #203861; background: rgba(32, 56, 97, 0.05); }
.btn-light { background: #fff; color: #203861; padding: 1.125rem 2.25rem; font-size: 1rem; }
.btn-light:hover { background: #EDF1F7; }
.btn-primary:active, .btn-ghost:active, .btn-light:active { transform: translateY(1px); }
.btn-primary:focus-visible, .btn-ghost:focus-visible {
  outline: 2px solid #203861;
  outline-offset: 4px;
}
.btn-light:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

/* ---- Navigation ---- */
.nav-link {
  border-radius: 9999px;
  padding: 0.5rem 0.875rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #475569;
  transition: color 0.2s ease;
}
.nav-link:hover { color: #203861; }
.nav-link[aria-current="page"] { color: #203861; font-weight: 700; }
.nav-link:focus-visible { outline: 2px solid #203861; outline-offset: 2px; }

/* ---- Mobile nav: burger morphs to X, overlay slides with stagger ---- */
.burger {
  position: relative;
  display: block;
  width: 18px;
  height: 14px;
}
.burger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), top 0.3s ease, bottom 0.3s ease;
}
.burger span:first-child { top: 2px; }
.burger span:last-child { bottom: 2px; }
#nav-toggle[aria-expanded="true"] .burger span:first-child { top: 6px; transform: rotate(45deg); }
#nav-toggle[aria-expanded="true"] .burger span:last-child { bottom: 6px; transform: rotate(-45deg); }

.mobile-menu {
  /* Anchored to the fixed header (its backdrop-filter makes it the
     containing block, so position:fixed would collapse to 0 height) */
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: calc(100dvh - 72px);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-10px);
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s;
}
.mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}
.mobile-menu nav { padding: 1.5rem 1.25rem 2.5rem; }
.menu-link {
  display: block;
  padding: 0.875rem 0;
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #203861;
  border-bottom: 1px solid #EDF1F7;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s ease;
}
.menu-link:hover,
.menu-link[aria-current="page"] { color: #3D5A8F; }
.menu-link:focus-visible { outline: 2px solid #203861; outline-offset: 2px; border-radius: 0.5rem; }
.mobile-menu .btn-primary {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s ease;
}
.mobile-menu.is-open .menu-link,
.mobile-menu.is-open .btn-primary { opacity: 1; transform: none; }
.mobile-menu.is-open nav > *:nth-child(1) { transition-delay: 0.05s; }
.mobile-menu.is-open nav > *:nth-child(2) { transition-delay: 0.1s; }
.mobile-menu.is-open nav > *:nth-child(3) { transition-delay: 0.15s; }
.mobile-menu.is-open nav > *:nth-child(4) { transition-delay: 0.2s; }
.mobile-menu.is-open nav > *:nth-child(5) { transition-delay: 0.25s; }
.mobile-menu.is-open nav > *:nth-child(6) { transition-delay: 0.3s; }
.mobile-menu.is-open nav > *:nth-child(7) { transition-delay: 0.35s; }

/* Mega menu panel: shown via .is-open (JS) or keyboard focus-within */
.mega-panel {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%) translateY(8px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}
.mega.is-open .mega-panel,
.mega:focus-within .mega-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* ---- Text reveal masks ---- */
.line-mask { display: block; overflow: hidden; }
.line-mask > span { display: block; }
[data-words] .w { display: inline-block; overflow: hidden; vertical-align: top; }
[data-words] .w > span { display: inline-block; }

/* ---- Logo marquee (the one marquee per page) ---- */
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 42s linear infinite;
}
.marquee-track:hover { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---- Floating hero shapes: slow drift, mouse-parallaxed via JS ---- */
.shape {
  position: absolute;
  border-radius: 9999px;
  border: 1px solid rgba(32, 56, 97, 0.12);
  pointer-events: none;
}
.shape--fill { border: 0; background: rgba(32, 56, 97, 0.06); }

/* ---- Film grain: fixed, non-interactive, cheap to composite ---- */
.grain {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- Page transition veil ----
   Opt-in: an inline head script adds html.motion only when JS runs AND
   the user allows motion, so no-JS visitors never see the veil. */
.page-veil {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: #F8F9FB;
  opacity: 0;
  pointer-events: none;
}
html.motion .page-veil { opacity: 1; pointer-events: auto; }

/* ---- Tabs ---- */
.tab-btn {
  border-radius: 9999px;
  padding: 0.625rem 1.375rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: #475569;
  border: 1px solid #cbd5e1;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
.tab-btn:hover { color: #203861; border-color: #203861; }
.tab-btn[aria-selected="true"] { background: #203861; border-color: #203861; color: #fff; }
.tab-btn:focus-visible { outline: 2px solid #203861; outline-offset: 3px; }

/* ---- Filter pills (case studies) ---- */
.filter-btn {
  border-radius: 9999px;
  padding: 0.625rem 1.375rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: #475569;
  border: 1px solid #cbd5e1;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
.filter-btn:hover { color: #203861; border-color: #203861; }
.filter-btn[aria-pressed="true"] { background: #203861; border-color: #203861; color: #fff; }
.filter-btn:focus-visible { outline: 2px solid #203861; outline-offset: 3px; }

/* ---- Forms ---- */
.field { display: flex; flex-direction: column; gap: 0.5rem; }
.field label { font-size: 0.875rem; font-weight: 700; color: #203861; }
.field input,
.field select,
.field textarea {
  width: 100%;
  border-radius: 1rem;
  border: 1px solid #cbd5e1;
  background: #fff;
  padding: 0.875rem 1.125rem;
  font-size: 1rem;
  color: #1e293b;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.field input::placeholder,
.field textarea::placeholder { color: #94a3b8; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: #94a3b8; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid #203861;
  outline-offset: 2px;
  border-color: transparent;
}
.field .error { display: none; font-size: 0.875rem; color: #B91C1C; }
.field.is-invalid input,
.field.is-invalid textarea { border-color: #DC2626; }
.field.is-invalid .error { display: block; }

/* ---- Case study dialog ---- */
dialog.case-dialog {
  max-width: 44rem;
  width: calc(100% - 2.5rem);
  border: 1px solid #e2e8f0;
  border-radius: 1.5rem;
  background: #fff;
  color: #475569;
  padding: 0;
}
dialog.case-dialog::backdrop { background: rgba(15, 23, 42, 0.45); }

/* ---- Expanding service panels (home "What we do") ----
   Mobile: stacked image cards, everything visible. Desktop: five
   panels share a row; the first sits open until another is hovered
   or keyboard-focused, which expands it and compresses the rest.
   Pure CSS, so it works without JS and under reduced motion. */
.svc-panels {
  display: grid;
  gap: 1rem;
}
.svc-panel {
  position: relative;
  display: block;
  min-height: 16rem;
  overflow: hidden;
  border-radius: 1rem;
}
.svc-more { transition: opacity 0.45s ease 0.12s, transform 0.45s ease 0.12s; }
@media (min-width: 1024px) {
  .svc-panels.svc-panels {
    display: flex;
    gap: 0.875rem;
    height: 34rem;
  }
  .svc-panel {
    flex: 1 1 0%;
    min-width: 0;
    min-height: 0;
    transition: flex-grow 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  }
  /* JS keeps one panel sticky-open (.is-open); the :hover/:first-child
     rules only serve the no-JS fallback (container gets .js-svc when
     the script runs). */
  .svc-panels:not(.js-svc):not(:hover):not(:focus-within) .svc-panel:first-child,
  .svc-panels:not(.js-svc) .svc-panel:hover,
  .svc-panel:focus-within,
  .svc-panel.is-open { flex-grow: 2.6; }
  .svc-more {
    opacity: 0;
    transform: translateY(10px);
    /* Fixed width so multiline copy never rewraps while widths animate */
    width: 22rem;
  }
  .svc-panels:not(.js-svc):not(:hover):not(:focus-within) .svc-panel:first-child .svc-more,
  .svc-panels:not(.js-svc) .svc-panel:hover .svc-more,
  .svc-panel:focus-within .svc-more,
  .svc-panel.is-open .svc-more {
    opacity: 1;
    transform: none;
  }
}

/* ---- Scrolltelling process (service pages) ----
   Default render: static navy section, every step fully readable.
   JS adds .scrolltell on desktop + motion: step bodies collapse into the
   left index, media panels appear on the right and crossfade per step. */
.process-scrolltell .step-media { display: none; }
.process-scrolltell.scrolltell .step-media { display: block; }
.process-scrolltell.scrolltell .step-body { display: none; }
.process-scrolltell.scrolltell .process-step { cursor: pointer; }
.process-scrolltell.scrolltell .process-step h3 {
  color: rgba(255, 255, 255, 0.3);
  transition: color 0.35s ease;
}
.process-scrolltell.scrolltell .process-step:hover h3 { color: rgba(255, 255, 255, 0.6); }
.process-scrolltell.scrolltell .process-step.is-active h3 { color: #fff; }
.process-scrolltell.scrolltell .process-step.is-active { border-color: #fff; }
.scrolltell .step-panel {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}
.scrolltell .step-panel:first-child { position: relative; }
.scrolltell .step-panel.is-active { opacity: 1; transform: none; }

/* ---- Horizontal process stepper: the line draws on scroll (JS) ---- */
.process-line-fill {
  position: absolute;
  inset: 0;
  background: #203861;
  transform-origin: left;
  transform: scaleX(0);
}
html:not(.motion) .process-line-fill { transform: none; }

/* ---- Process timeline: the spine is drawn on scroll (JS scales it) ---- */
.timeline-spine {
  position: absolute;
  left: 5px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #e2e8f0;
}
.timeline-spine > span {
  position: absolute;
  inset: 0;
  background: #203861;
  transform-origin: top;
  transform: scaleY(0);
}
html:not(.motion) .timeline-spine > span { transform: none; }

/* ---- Reduced motion: kill everything ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}