/* ---------------------------------------------------------------------
   Homepage identity: "Trust & Authority" (per ui-ux-pro-max design-system
   recommendation for an academic statistical/editing consultancy) -
   navy + a single restrained trust-blue accent, serif headlines for
   scholarly credibility, no purple gradients or playful rainbow bars.
   ------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .ose-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
  }
  .ose-reveal.ose-in {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Card hover lift - applies to feature/pricing/team tiles */
#serviceCards .service-card,
.ose-hover-card {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
}

/* Feature cards: flat white surface + a single accent color per card
   (left rule + icon chip) instead of a full pastel-colored block -
   more restrained, closer to how a credentialed consultancy would
   present its services. Cards fade/slide in with a per-card stagger
   as the section scrolls into view (see site-polish.js). */
.ose-feature-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 22px 24px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-left: 3px solid var(--ose-feature-accent, #0369a1);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease,
    opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.ose-feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
}
@media (prefers-reduced-motion: no-preference) {
  .ose-feature-card {
    opacity: 0;
    transform: translateY(16px);
  }
  .ose-feature-card.ose-in {
    opacity: 1;
    transform: translateY(0);
  }
  .ose-feature-card.ose-in:hover {
    transform: translateY(-4px);
  }
}
.ose-feature-icon {
  width: 40px;
  height: 40px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}

.ose-feature-lede-icon {
  background: #0f172a;
}

.ose-feature-cta {
  background: #0f172a;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
}
.ose-feature-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18);
}

/* The compiled Tailwind build only includes utility classes actually used at
   build time, so the amber shade used for the feature-card accent is
   defined explicitly here (same value as Tailwind's amber-100/500 scale). */
.bg-amber-100 { background-color: #fef3c7; }
.bg-amber-500 { background-color: #b45309; }

/* Stat numbers: restrained data-appropriate accents (navy/blue/slate),
   not a bright rainbow - trust colors, not startup colors. */
.ose-stat-blue  { color: #0369a1; }
.ose-stat-green { color: #0f172a; }
.ose-stat-amber { color: #b45309; }

/* Gentle count-up friendly number transition */
.ose-stat-num { display: inline-block; transition: color 0.3s ease; }

/* Nav link underline sweep */
.ose-nav-link {
  position: relative;
}
.ose-nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 2px;
  background: #0369a1;
  transition: width 0.25s ease;
}
.ose-nav-link:hover::after {
  width: 100%;
}

/* Primary CTA: soft pulse ring on hover instead of a generic glow blob */
#oseHeroCtaPrimary {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
#oseHeroCtaPrimary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(3, 105, 161, 0.28);
}

/* font-urbanist was a dead Tailwind utility (never in the compiled build),
   so every heading silently fell back to the system font. Crimson Pro
   gives headlines scholarly gravitas; body copy uses Atkinson
   Hyperlegible (loaded in <head>) for accessibility-first readability. */
.font-urbanist {
  font-family: 'Crimson Pro', Georgia, serif;
  font-weight: 600;
  letter-spacing: -0.01em;
}

body {
  font-family: 'Atkinson Hyperlegible', -apple-system, sans-serif;
}

/* Glass-panel background: the page sits on a mosaic of rectangular
   panes (two different cell sizes layered so the grid doesn't read as
   a uniform checkerboard) with soft color washes glowing underneath,
   so the frosted-glass surfaces above it (nav, badge) have something
   to actually diffuse. */
body {
  background-color: #eef2f7;
  background-image:
    repeating-linear-gradient(90deg, rgba(15, 23, 42, 0.06) 0 1px, transparent 1px 128px),
    repeating-linear-gradient(0deg, rgba(15, 23, 42, 0.06) 0 1px, transparent 1px 96px),
    repeating-linear-gradient(90deg, rgba(15, 23, 42, 0.035) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(0deg, rgba(15, 23, 42, 0.035) 0 1px, transparent 1px 24px);
  background-attachment: fixed;
}

.ose-topbar-glass {
  background: rgba(248, 250, 252, 0.65) !important;
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border-bottom-color: rgba(15, 23, 42, 0.10) !important;
}

.ose-hero-badge {
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, 0.55) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.ose-hero-bg {
  position: relative;
  background: transparent;
  overflow: hidden;
}

/* Warm/cool glow blooming behind the hero - the glass tiles above pick
   up and diffuse this color through their blur, like light through
   real panes. */
.ose-glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle 420px at 38% 42%, rgba(217, 119, 6, 0.55) 0%, rgba(217, 119, 6, 0.25) 35%, transparent 70%),
    radial-gradient(circle 380px at 62% 38%, rgba(3, 105, 161, 0.45) 0%, rgba(3, 105, 161, 0.18) 40%, transparent 72%);
  filter: blur(6px);
}

/* The glass pane mosaic itself: a grid of rounded, frosted rectangles
   with visible gaps so the glow shows through the seams, like a
   stained-glass window laid over the hero. Populated by site-polish.js
   so the tile count adapts to viewport size. */
.ose-glass-tiles {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  gap: clamp(4px, 0.6vw, 8px);
  padding: clamp(4px, 0.6vw, 8px);
  pointer-events: none;
}
.ose-glass-tile {
  background: rgba(255, 255, 255, 0.30);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: clamp(6px, 0.9vw, 12px);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.ose-hero-content {
  position: relative;
  z-index: 1;
}

.ose-hero-bg::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: #0f172a;
}

.ose-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 0.85rem;
  font-weight: 700;
  color: #334155;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.ose-hero-badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #0369a1;
  box-shadow: 0 0 0 3px rgba(3, 105, 161, 0.15);
  flex-shrink: 0;
}

.ose-hero-sparkle {
  background: #0369a1;
  box-shadow: 0 4px 14px rgba(3, 105, 161, 0.3);
}

.ose-btn-primary {
  display: inline-block;
  background: #0f172a;
  color: #fff;
  border-radius: 8px;
  font-weight: 700;
  border: none;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, background 0.2s ease;
}
.ose-btn-primary:hover {
  background: #0369a1;
}

.ose-btn-secondary {
  display: inline-block;
  background: #fff;
  color: #0f172a;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.ose-btn-secondary:hover {
  border-color: #0369a1;
  background: #f0f9ff;
}

/* ---------------------------------------------------------------------
   Dashboard: real display font on numbers/titles, a brand accent stripe
   under the sidebar logo, and a hover-lift on stat/content cards so the
   page reads as a designed product rather than a stock admin template.
   ------------------------------------------------------------------- */

.stat-value,
.card-title,
.sidebar-logo span,
.metric-value,
.summary-total-value {
  font-family: 'Syne', 'Inter', sans-serif;
}

.sidebar-logo {
  position: relative;
}
.sidebar-logo::after {
  content: "";
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: -1px;
  height: 3px;
  background: linear-gradient(90deg, #2563eb 0%, #2563eb 33%, #16a34a 33%, #16a34a 66%, #d97706 66%, #d97706 100%);
}

.stat-card,
.card {
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, border-color 0.2s ease;
}
.stat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

/* Bento-style stat cards: a colored top edge tied to each icon's accent
   instead of identical white tiles, plus a bigger, bolder icon chip. */
.stat-card {
  position: relative;
  border-top: 3px solid transparent;
  overflow: hidden;
}
.stat-card:has(.stat-icon.blue)   { border-top-color: #2563eb; }
.stat-card:has(.stat-icon.green)  { border-top-color: #16a34a; }
.stat-card:has(.stat-icon.amber)  { border-top-color: #d97706; }
.stat-card:has(.stat-icon.purple) { border-top-color: #7c3aed; }

.stat-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
}
.stat-icon svg { width: 20px; height: 20px; }

/* Sidebar: active nav item gets a solid accent bar instead of a flat tint
   fill, so the current section reads at a glance. */
.nav-item {
  position: relative;
}
.nav-item.active {
  background: rgba(37, 99, 235, 0.16);
}
.nav-item.active::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 6px;
  bottom: 6px;
  width: 3px;
  border-radius: 2px;
  background: #2563eb;
}

/* Referral link + primary buttons: consistent soft-lift micro-interaction */
.btn-primary {
  transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.15s ease, background 0.15s ease;
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.25);
}