/* Public website polish, layered on top of the theme (bootstrap.min.css + style.css).
   Plain CSS only; every class is prefixed "cl-" so nothing leaks into the app screens. */

:root {
  --cl-primary: #0F9D8A;
  --cl-primary-deep: #0A6D5F;
  --cl-secondary: #1E293B;
  --cl-secondary-soft: #334155;
  --cl-ink: #0F172A;
  /* Lighter teal for primary accents that sit on charcoal (keeps text readable). */
  --cl-primary-on-dark: #5EEAD4;
  --cl-glow: 0 18px 40px -12px rgba(15, 157, 138, 0.55);
  --cl-lift: 0 24px 48px -18px rgba(30, 41, 59, 0.28);
  --cl-gradient: linear-gradient(135deg, var(--cl-primary) 0%, var(--cl-primary-deep) 100%);
}

/* ---------- Typography ---------- */
.cl-site h1,
.cl-site h2,
.cl-site .display-4,
.cl-site .display-5,
.cl-site .display-6 {
  font-family: "Poppins", "Nunito", sans-serif;
  letter-spacing: -0.02em;
}

.cl-gradient-text {
  background: linear-gradient(90deg, var(--cl-primary) 0%, var(--cl-primary-deep) 50%, var(--cl-primary) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  animation: cl-shine 6s linear infinite;
}

.cl-underline {
  position: relative;
  white-space: nowrap;
}
.cl-underline::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.06em;
  height: 0.22em;
  border-radius: 99px;
  background: rgba(15, 157, 138, 0.28);
  z-index: -1;
}

/* Section label: small pill with a pulsing dot. */
.cl-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 1rem;
  border-radius: 99px;
  background: rgba(15, 157, 138, 0.12);
  color: var(--cl-primary-deep);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.cl-eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cl-primary);
  box-shadow: 0 0 0 4px rgba(15, 157, 138, 0.22);
}

/* ---------- Header ---------- */
.cl-header {
  background: rgba(255, 255, 255, 0.85) !important;
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  transition: box-shadow 0.3s ease;
}
.cl-header-scrolled {
  box-shadow: 0 10px 30px -18px rgba(30, 41, 59, 0.45);
}

/* Contact bar above the menu. */
.cl-topbar {
  max-height: 44px;
  overflow: hidden;
  padding: 0.55rem 0;
  background: linear-gradient(90deg, var(--cl-secondary), var(--cl-secondary-soft));
  color: rgba(255, 255, 255, 0.72);
  transition: max-height 0.35s ease, padding 0.35s ease;
}
.cl-topbar a {
  color: rgba(255, 255, 255, 0.72);
  transition: color 0.2s ease;
}
.cl-topbar a:hover {
  color: #fff;
}
.cl-topbar-accent {
  color: var(--cl-primary-on-dark);
}
.cl-header-scrolled .cl-topbar {
  max-height: 0;
  padding: 0;
}

.cl-navbar {
  padding: 1rem 0;
  transition: padding 0.3s ease;
}
.cl-header-scrolled .cl-navbar {
  padding: 0.55rem 0;
}

/* Logo: a slight lift on hover; it shrinks a little with the compact header. */
.cl-logo img {
  height: auto;
  transition: transform 0.3s ease, width 0.3s ease;
}
.cl-logo:hover img {
  transform: translateY(-2px);
}
.cl-header-scrolled .cl-logo img {
  width: 120px;
}

/* Menu links sit in one soft pill; the current section gets a raised white chip. */
@media (min-width: 992px) {
  .cl-nav-pill {
    background: rgba(30, 41, 59, 0.05);
    border: 1px solid rgba(30, 41, 59, 0.06);
    border-radius: 99px;
  }
}
.cl-nav-link {
  border-radius: 99px;
  transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}
.cl-nav-link:hover {
  color: var(--cl-primary) !important;
}
.cl-nav-link[aria-current="true"] {
  background: #fff;
  box-shadow: 0 4px 14px -6px rgba(30, 41, 59, 0.3);
}
@media (max-width: 991.98px) {
  .cl-nav-link[aria-current="true"] {
    background: rgba(15, 157, 138, 0.1);
    box-shadow: none;
  }
}

.cl-btn-ghost {
  border: 0 !important;
  background: transparent;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.cl-btn-ghost:hover,
.cl-btn-ghost:focus-visible {
  background: rgba(15, 157, 138, 0.1) !important;
  color: var(--cl-primary) !important;
}

/* Reading progress along the bottom edge of the header. */
.cl-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  background: var(--cl-gradient);
  transform: scaleX(var(--cl-progress, 0));
  transform-origin: left;
}

/* ---------- Buttons ---------- */
.cl-btn-glow {
  background: var(--cl-gradient) !important;
  border: 0 !important;
  color: #fff !important;
  box-shadow: var(--cl-glow);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.cl-btn-glow:hover,
.cl-btn-glow:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 22px 44px -12px rgba(15, 157, 138, 0.7);
}
.cl-btn-glow i {
  transition: transform 0.25s ease;
}
.cl-btn-glow:hover i {
  transform: scale(1.15);
}

/* ---------- Hero ---------- */
.cl-hero {
  background:
    radial-gradient(60rem 30rem at 85% -10%, rgba(15, 157, 138, 0.16), transparent 60%),
    radial-gradient(40rem 26rem at -10% 110%, rgba(30, 41, 59, 0.08), transparent 60%),
    #fff !important;
  isolation: isolate;
}
/* Faint dot grid that fades towards the edges. */
.cl-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(rgba(30, 41, 59, 0.13) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse at 30% 40%, #000 0%, transparent 70%);
  mask-image: radial-gradient(ellipse at 30% 40%, #000 0%, transparent 70%);
}
.cl-blob {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.55;
  animation: cl-drift 14s ease-in-out infinite alternate;
}
.cl-blob-1 {
  width: 320px;
  height: 320px;
  top: 8%;
  right: 6%;
  background: rgba(15, 157, 138, 0.45);
}
.cl-blob-2 {
  width: 260px;
  height: 260px;
  bottom: -60px;
  left: 30%;
  background: rgba(39, 54, 78, 0.25);
  animation-delay: -6s;
}

.cl-hero-panel {
  background: linear-gradient(150deg, var(--cl-secondary-soft) 0%, var(--cl-secondary) 70%) !important;
}
.cl-hero-panel::after {
  /* Soft primary glow behind the scale icon. */
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(15, 157, 138, 0.35), transparent 70%);
  transform: translate(-50%, -55%);
}
.cl-hero-mark {
  position: relative;
  z-index: 1;
}
.cl-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px dashed rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: cl-spin 40s linear infinite;
}

/* Floating cards keep their animate.css entrance, then bob gently via the inner wrapper. */
.cl-float {
  animation: cl-float 6s ease-in-out infinite;
}
.cl-float-delay-1 { animation-delay: -1.5s; }
.cl-float-delay-2 { animation-delay: -3s; }
.cl-float-delay-3 { animation-delay: -4.5s; }

.cl-glass {
  background: rgba(255, 255, 255, 0.92) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.7) !important;
}

.cl-trust-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.9rem;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(30, 41, 59, 0.08);
  box-shadow: 0 6px 18px -10px rgba(30, 41, 59, 0.25);
}

/* ---------- Practice-area marquee ---------- */
.cl-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.cl-marquee-track {
  display: flex;
  gap: 1rem;
  width: max-content;
  animation: cl-marquee 38s linear infinite;
}
.cl-marquee:hover .cl-marquee-track {
  animation-play-state: paused;
}
.cl-marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1.25rem;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  font-weight: 600;
  white-space: nowrap;
}
.cl-marquee-item i {
  color: var(--cl-primary-on-dark);
  font-size: 1.25rem;
}

/* ---------- Cards ---------- */
.cl-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(30, 41, 59, 0.08) !important;
  border-radius: 18px !important;
  transition: transform 0.35s cubic-bezier(.2, .8, .2, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}
.cl-card::before {
  /* Primary accent bar that sweeps in along the top edge on hover. */
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 4px;
  width: 100%;
  background: var(--cl-gradient);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s ease;
}
.cl-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--cl-lift) !important;
  border-color: rgba(15, 157, 138, 0.35) !important;
}
.cl-card:hover::before {
  transform: scaleX(1);
}

.cl-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: linear-gradient(145deg, var(--cl-secondary-soft), var(--cl-secondary)) !important;
  box-shadow: 0 12px 24px -12px rgba(30, 41, 59, 0.6);
  transition: transform 0.35s ease, background 0.35s ease;
}
.cl-card:hover .cl-icon {
  transform: rotate(-6deg) scale(1.06);
}
.cl-icon-soft {
  background: rgba(15, 157, 138, 0.12) !important;
  color: var(--cl-primary-deep) !important;
  box-shadow: none;
}
.cl-card:hover .cl-icon-soft {
  background: var(--cl-gradient) !important;
  color: #fff !important;
}

/* Lawyer portrait with a gradient ring. */
.cl-portrait {
  padding: 4px;
  border-radius: 50%;
  background: conic-gradient(from 140deg, var(--cl-primary), var(--cl-primary-deep), #5EEAD4, var(--cl-primary));
  transition: transform 0.4s ease;
}
.cl-card:hover .cl-portrait {
  transform: scale(1.05);
}

/* ---------- Section backdrops ---------- */
.cl-dark-band .text-primary,
.cl-hero-panel .text-primary {
  color: var(--cl-primary-on-dark) !important;
}

.cl-section-tint {
  background:
    radial-gradient(40rem 20rem at 100% 0%, rgba(15, 157, 138, 0.08), transparent 60%),
    #F8FAFC !important;
}

.cl-dark-band {
  background:
    radial-gradient(30rem 16rem at 10% 0%, rgba(15, 157, 138, 0.22), transparent 60%),
    radial-gradient(30rem 16rem at 90% 100%, rgba(255, 255, 255, 0.07), transparent 60%),
    linear-gradient(135deg, var(--cl-secondary-soft), var(--cl-secondary)) !important;
}

/* How it works: dashed connector between the step icons. */
.cl-steps {
  position: relative;
}
@media (min-width: 768px) {
  .cl-steps::before {
    content: "";
    position: absolute;
    top: 96px;
    left: 18%;
    right: 18%;
    border-top: 2px dashed rgba(15, 157, 138, 0.45);
  }
}

/* Final call to action: animated gradient border around the navy panel. */
.cl-cta {
  position: relative;
  padding: 3px;
  border-radius: 28px;
  background: linear-gradient(120deg, var(--cl-primary), var(--cl-secondary-soft), var(--cl-primary-deep), var(--cl-secondary-soft));
  background-size: 300% 300%;
  animation: cl-border 10s ease infinite;
}
.cl-cta > div {
  border-radius: 25px !important;
}

/* ---------- Keyframes ---------- */
@keyframes cl-shine {
  to { background-position: 200% center; }
}
@keyframes cl-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@keyframes cl-drift {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(-40px, 30px) scale(1.12); }
}
@keyframes cl-spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes cl-marquee {
  to { transform: translateX(-50%); }
}
@keyframes cl-border {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .cl-gradient-text,
  .cl-blob,
  .cl-ring,
  .cl-float,
  .cl-marquee-track,
  .cl-cta {
    animation: none !important;
  }
  .cl-topbar,
  .cl-navbar,
  .cl-logo img {
    transition: none !important;
  }
  .cl-card,
  .cl-card:hover {
    transform: none;
  }
}