.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.card {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: var(--transition-base);
}
.card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

/* Hero: 4:3 on mobile (compact, minimal-text, no layout shift) —
   switches to a taller viewport-based crop from the sm breakpoint up. */
.hero-section {
  aspect-ratio: 4 / 3;
  max-height: 520px;
}
@media (min-width: 640px) {
  .hero-section {
    aspect-ratio: auto;
    height: 70vh;
    min-height: 420px;
    max-height: none;
  }
}

.ck-content h1, .ck-content h2, .ck-content h3 { font-family: var(--font-heading); color: var(--color-primary); margin-top: 1.5em; margin-bottom: 0.5em; }
.ck-content p { margin-bottom: 1em; line-height: 1.75; }
.ck-content ul, .ck-content ol { margin: 1em 0 1em 1.5em; }
.ck-content ul { list-style: disc; }
.ck-content ol { list-style: decimal; }
.ck-content img { border-radius: var(--radius-md); margin: 1.5em 0; }
.ck-content a { color: var(--color-primary); text-decoration: underline; }
.ck-content blockquote { border-left: 4px solid var(--color-gold); padding-left: 1em; font-style: italic; color: var(--color-text-muted); }
.ck-content table { width: 100%; border-collapse: collapse; margin: 1.5em 0; }
.ck-content table td, .ck-content table th { border: 1px solid #e5e7eb; padding: 0.5em 0.75em; }

/* ============================================================
   PREMIUM UI POLISH — custom CSS layered on top of Tailwind
   ============================================================ */

/* Card: subtle gradient border-glow on hover */
.card {
  position: relative;
  border: 1px solid var(--line);
}
.card::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, var(--brand), var(--accent));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .35s var(--ease);
  pointer-events: none;
}
.card:hover::after { opacity: 1; }

/* Section eyebrow label with leading rule */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: .72rem; font-weight: 800; letter-spacing: .18em;
  text-transform: uppercase; color: var(--brand);
}
.eyebrow::before { content: ''; width: 34px; height: 1px; background: currentColor; }

/* Buttons: ripple-style press feedback */
.btn-primary, .btn-ghost {
  position: relative; overflow: hidden;
}
.btn-primary::before, .btn-ghost::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at var(--rx, 50%) var(--ry, 50%), rgba(255,255,255,.35), transparent 60%);
  opacity: 0; transition: opacity .4s ease;
}
.btn-primary:active::before, .btn-ghost:active::before { opacity: 1; transition: none; }

/* Scroll progress bar (driven by site.js) */
#scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: linear-gradient(90deg, var(--brand), var(--accent));
  z-index: 60; transition: width .1s linear;
}

/* Back-to-top button */
#back-to-top {
  position: fixed; right: 20px; bottom: 20px; z-index: 55;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--brand); color: #fff; border: 0; cursor: pointer;
  display: grid; place-items: center;
  box-shadow: 0 12px 28px rgba(7,86,166,.32);
  opacity: 0; pointer-events: none; transform: translateY(10px);
  transition: all .3s var(--ease);
}
#back-to-top.show { opacity: 1; pointer-events: auto; transform: none; }
#back-to-top:hover { background: var(--navy); transform: translateY(-3px); }

/* Horizontal scroll strips (featured sliders): slim, branded scrollbar */
.snap-x::-webkit-scrollbar { height: 6px; }
.snap-x::-webkit-scrollbar-track { background: transparent; }
.snap-x::-webkit-scrollbar-thumb { background: var(--line); border-radius: 99px; }
.snap-x::-webkit-scrollbar-thumb:hover { background: var(--brand); }

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

/* Parallax quote section — fixed attachment on desktop, scroll on touch
   devices (iOS/Android don't support background-attachment:fixed reliably
   and it causes visual jitter, so it's disabled below the lg breakpoint). */
.parallax-quote {
  background-size: cover;
  background-position: center;
  background-attachment: scroll;
}
@media (min-width: 1024px) and (hover: hover) {
  .parallax-quote { background-attachment: fixed; }
}

/* Centered eyebrow variant used in section headers */
.eyebrow.justify-center { justify-content: center; }

/* ---------------- NAV LINK HOVER / ACTIVE ANIMATION ---------------- */
.nav-link { position: relative; overflow: hidden; }
.nav-underline {
  position: absolute; left: 12px; right: 12px; bottom: 6px; height: 2px; border-radius: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: center; transition: transform .3s cubic-bezier(.2,.75,.2,1);
}
.nav-link:hover .nav-underline { transform: scaleX(1); }
.nav-underline-active { transform: scaleX(1); background: var(--brand); }
.nav-link.is-active { background: color-mix(in srgb, var(--brand) 6%, transparent); }

/* ============================================================
   CONTENT COMPONENT LIBRARY — reusable blocks for building out
   richer page content across the site (impact stats, timelines,
   feature grids, accordions, partner strips). Everything here
   reads the same design tokens as the rest of site.css so new
   sections stay visually consistent with existing ones.
   ============================================================ */

/* --- Animated impact/stat counters --- */
.counter-band {
  background: linear-gradient(135deg, var(--navy) 0%, var(--brand) 130%);
  position: relative; overflow: hidden;
}
.counter-band::before {
  content: ''; position: absolute; inset: 0; opacity: .12; pointer-events: none;
  background-image: radial-gradient(circle at 20% 20%, #fff 0, transparent 45%),
                     radial-gradient(circle at 85% 75%, #fff 0, transparent 40%);
}
.counter-item { position: relative; text-align: center; }
.counter-num {
  font-family: var(--font-heading); font-weight: 800; color: #fff;
  font-size: clamp(2rem, 5vw, 3rem); line-height: 1; letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
.counter-label {
  margin-top: .6rem; color: rgba(255,255,255,.72); font-size: .8rem;
  font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.counter-icon {
  width: 44px; height: 44px; margin: 0 auto .9rem; border-radius: 14px;
  background: rgba(255,255,255,.12); display: flex; align-items: center; justify-content: center;
  color: var(--accent);
}

/* --- Vertical timeline (milestones, history, process steps) --- */
.timeline { position: relative; margin-left: 1rem; }
.timeline::before {
  content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px;
  background: linear-gradient(var(--brand), var(--line));
}
.timeline-item { position: relative; padding-left: 2.25rem; padding-bottom: 2.25rem; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-dot {
  position: absolute; left: -5px; top: 4px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--brand); box-shadow: 0 0 0 4px var(--brand-3);
}
.timeline-year { font-family: var(--font-heading); font-weight: 800; color: var(--brand); font-size: .85rem; letter-spacing: .04em; }

/* --- Accordion (FAQ, process breakdowns) --- */
.accordion-item { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--white); overflow: hidden; transition: var(--transition-base); }
.accordion-item:hover { box-shadow: var(--shadow-sm); }
.accordion-trigger { width: 100%; text-align: left; padding: 1.1rem 1.3rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-weight: 700; color: var(--ink); cursor: pointer; background: none; border: 0; }
.accordion-plus { flex-shrink: 0; width: 26px; height: 26px; border-radius: 8px; background: var(--brand-3); color: var(--brand); display: flex; align-items: center; justify-content: center; transition: var(--transition-base); }
.accordion-item[open] .accordion-plus, .accordion-item.is-open .accordion-plus { background: var(--brand); color: #fff; transform: rotate(45deg); }
.accordion-panel { padding: 0 1.3rem 1.2rem; color: var(--muted); font-size: .92rem; line-height: 1.7; }

/* --- Icon-feature grid item (compact variant of .card, for dense infographic-style grids) --- */
.feature-tile { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 1.5rem; transition: var(--transition-base); }
.feature-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: transparent; }
.feature-tile-icon { width: 48px; height: 48px; border-radius: 14px; background: var(--brand-3); color: var(--brand); display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; }

/* --- Partner / affiliation strip --- */
.partner-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2.5rem 3rem; }
.partner-strip-item { display: flex; align-items: center; gap: .6rem; color: var(--muted); font-weight: 700; font-size: .85rem; opacity: .8; transition: opacity .25s ease, color .25s ease; }
.partner-strip-item:hover { opacity: 1; color: var(--brand); }

/* --- Section divider label used between stacked infographic blocks --- */
.section-kicker { display: inline-block; font-size: .7rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }

/* Parallax banner container (see .parallax-img handling in site.js) */
.parallax-container { position: relative; overflow: hidden; }
.parallax-img { position: absolute; inset: -10% 0; width: 100%; height: 120%; object-fit: cover; will-change: transform; }

/* Auto-advancing testimonial carousel */
.testimonial-dot { transition: background-color .3s ease, transform .3s ease; cursor: pointer; }
.testimonial-dot:hover { transform: scale(1.3); }


/* ------------------------------------------------------------------
   Accessible gold: #D9A441 is only 2.1:1 on white (fails WCAG AA), 7.7:1 on navy.
   Heritage-gold TEXT/ICONS therefore use a deeper gold on light surfaces and keep the
   brand gold on dark ones. (Backgrounds/borders that use gold are unaffected.)
   ------------------------------------------------------------------ */
body .text-heritage-gold { color: #855700; }
body [class*="bg-institutional-navy"] .text-heritage-gold,
body [class*="bg-charcoal-ink"] .text-heritage-gold,
body [class*="bg-brand-blue-deep"] .text-heritage-gold { color: #D9A441; }
body [class*="bg-surface-"] .text-heritage-gold,
body [class*="bg-white"] .text-heritage-gold,
body .bg-heritage-gold-subtle .text-heritage-gold { color: #855700; }

/* Visible keyboard focus everywhere on the public site (WCAG 2.4.7 / 2.4.11) */
body a:focus-visible, body button:focus-visible, body input:focus-visible, body select:focus-visible,
body textarea:focus-visible, body summary:focus-visible, body [tabindex]:focus-visible {
  outline: 3px solid #155EEF; outline-offset: 2px; border-radius: 4px;
}
body [class*="bg-institutional-navy"] a:focus-visible, body [class*="bg-institutional-navy"] button:focus-visible { outline-color: #FBF6EC; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }

/* Muted text: deeper slate on light surfaces (token), lighter slate on dark sections */
body [class*="bg-institutional-navy"] .text-slate-muted,
body [class*="bg-charcoal-ink"] .text-slate-muted,
body [class*="bg-brand-blue-deep"] .text-slate-muted { color: #A9B7CB; }