/* KOSCA Distribution — Global Styles */
/* tokens.css is loaded first by header.php; no @import here (it would force a
   second, serialized, render-blocking fetch of the same file). */

/* ============================================================
   SOFT COLOUR BLOOMS — beauty-industry atmosphere
   Blurred radial washes (brand hues + gold) drift behind the
   page, like spilled colour catching light. Pure CSS, no images,
   no JS. Fixed-position, painted once, pointer-events off.
============================================================ */

body {
  position: relative;
}

/* Page-wide ambient blooms — sit behind all content (z-below) */
.color-blooms {
  position: fixed;
  inset: 0;
  z-index: var(--z-below);
  pointer-events: none;
  overflow: hidden;
}

.color-blooms::before,
.color-blooms::after {
  content: '';
  position: absolute;
  border-radius: var(--radius-full);
  filter: blur(70px);
  opacity: 0.55;
}

/* Indigo bloom — upper left. Slow drift gives the ambient wash life. */
.color-blooms::before {
  width: 46vw;
  height: 46vw;
  top: -14vw;
  left: -10vw;
  background: radial-gradient(circle, rgba(107, 95, 212, 0.40) 0%, transparent 68%);
  animation: bloomDriftA 34s ease-in-out infinite alternate;
}

/* Science-blue bloom — lower right. Cool-on-warm reads far stronger than the
   old gold (gold over warm ivory was near-invisible); a third cool hue distinct
   from the indigo + teal blooms. */
.color-blooms::after {
  width: 40vw;
  height: 40vw;
  bottom: -12vw;
  right: -8vw;
  background: radial-gradient(circle, rgba(43, 94, 167, 0.30) 0%, transparent 68%);
  animation: bloomDriftB 42s ease-in-out infinite alternate;
}

/* A third, mid bloom for depth (separate element so we can place it freely).
   Teal "fresh" accent — calmer and more cohesive than the old lone red. */
.color-blooms__accent {
  position: absolute;
  width: 32vw;
  height: 32vw;
  top: 42%;
  right: 8%;
  border-radius: var(--radius-full);
  filter: blur(80px);
  opacity: 0.26;
  background: radial-gradient(circle, rgba(31, 122, 112, 0.30) 0%, transparent 70%);
  animation: bloomDriftC 38s ease-in-out infinite alternate;
}

/* Lazy, large-amplitude drifts — each bloom moves on its own slow loop so
   the field never looks like it's sliding as one piece. */
@keyframes bloomDriftA {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(4vw, 3vw, 0); }
}
@keyframes bloomDriftB {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-5vw, -2vw, 0); }
}
@keyframes bloomDriftC {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-3vw, 4vw, 0); }
}

@media (max-width: 768px) {
  .color-blooms::before { width: 70vw; height: 70vw; }
  .color-blooms::after  { width: 60vw; height: 60vw; }
  .color-blooms__accent { display: none; }
}

/* Respect reduced-motion: hold the blooms perfectly still. */
@media (prefers-reduced-motion: reduce) {
  .color-blooms::before,
  .color-blooms::after,
  .color-blooms__accent {
    animation: none;
  }
}

/* ============================================================
   TEXT SELECTION — brand indigo instead of browser blue.
   On the dark indigo bands an indigo highlight would vanish into
   the background, so those flip to gold with dark text.
============================================================ */

::selection {
  background: var(--color-brand-primary);
  color: #fff;   /* 8.9:1 on indigo */
}

.section--indigo ::selection,
.section--indigo-gold ::selection,
.page-hero--indigo ::selection,
.cta-strip ::selection,
.footer ::selection {
  background: var(--color-gold);
  color: var(--color-brand-primary-dark);   /* ~5.5:1 on gold */
}

/* ============================================================
   CROSS-DOCUMENT VIEW TRANSITIONS  (overdrive)
   Every full-page PHP navigation becomes a brand cross-fade instead
   of a white flash. The sticky nav is named, so it holds steady while
   the page content dissolves beneath it — an app-like continuity you
   don't expect from a multi-page site. Opt-in + progressive: browsers
   without support (Firefox) just navigate normally; fully stilled
   under reduced-motion. Both pages carry this rule (global.css is
   loaded on every page), which is what enables the cross-document run.
============================================================ */

@view-transition {
  navigation: auto;
}

/* Persistent chrome: the nav holds/morphs across pages rather than
   fading with the document. (Sticky top:0 → always cleanly captured.) */
.nav {
  view-transition-name: site-nav;
}

/* Outgoing page settles up + out; incoming rises + fades in. Short,
   ease-out — decisive, not floaty. */
@keyframes vt-page-out {
  to   { opacity: 0; transform: translateY(-8px); }
}
@keyframes vt-page-in {
  from { opacity: 0; transform: translateY(12px); }
}
::view-transition-old(root) {
  animation: vt-page-out 0.26s cubic-bezier(0.4, 0, 1, 1) both;
}
::view-transition-new(root) {
  animation: vt-page-in 0.42s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;   /* instant swap — no movement */
  }
}

/* ============================================================
   SECTION LABELS & HEADINGS PATTERN
============================================================ */

.section-label {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-brand-primary);
  margin-bottom: var(--space-3);
}

/* Eyebrow hue variants — let a section's label match its theme/wash.
   Paired with a leading tick so colour isn't the only signal. */
.section-label--warm  { color: var(--color-accent-warm-strong); }
.section-label--fresh { color: var(--color-accent-fresh-strong); }

.section-label::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 2px;
  margin-right: var(--space-2);
  vertical-align: middle;
  background: currentColor;
  border-radius: var(--radius-full);
}

.section-title {
  font-family: var(--font-heading);
  font-size: var(--fluid-h2);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
}

.section-subtitle {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
  max-width: 600px;
}

.section-header {
  margin-bottom: var(--space-12);
}

.section-header--center {
  text-align: center;
}

.section-header--center .section-subtitle {
  margin-inline: auto;
}

/* Typographic polish — even line breaks on multi-line headings, fewer orphans
   in lead prose. Progressive: browsers without text-wrap support ignore it. */
.heading-1, .heading-2, .heading-3, .heading-4,
.section-title, .page-hero__title, .cta-strip__title, .timeline__milestone {
  text-wrap: balance;
}
.text-lead, .section-subtitle, .page-hero__subtitle, .cta-strip__subtitle {
  text-wrap: pretty;
}

@media (max-width: 768px) {
  .section-header { margin-bottom: var(--space-8); }
}

/* ============================================================
   NAVIGATION
============================================================ */

/* Skip link — visually hidden until keyboard-focused, then pinned top-left.
   Lets keyboard/screen-reader users jump past the nav to #main-content. */
.skip-link {
  position: fixed;
  top: var(--space-3);
  left: var(--space-3);
  z-index: var(--z-toast, 1000);
  padding: var(--space-3) var(--space-5);
  background: var(--color-brand-primary);
  color: #fff;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  box-shadow: var(--shadow-md);
  transform: translateY(-150%);
  transition: transform var(--transition-base);
}

.skip-link:focus {
  transform: translateY(0);
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}

/* Global keyboard focus ring. Indigo reads strongly on the light surfaces that
   hold most interactive elements (nav, forms already ring themselves); on the
   dark indigo/footer bands it's invisible, so flip it to light-gold there. Only
   fires for keyboard focus, never mouse clicks. */
:where(a, button, .btn, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--color-brand-primary);
  outline-offset: 2px;
  border-radius: 2px;
}

.section--indigo :focus-visible,
.section--indigo-gold :focus-visible,
.page-hero--indigo :focus-visible,
.cta-strip :focus-visible,
.footer :focus-visible {
  outline-color: var(--color-gold-light);
}

/* Header is a semantic landmark only — display:contents removes its box from
   layout so the nested .nav keeps its original sticky context (the <body>),
   i.e. the nav still pins to the viewport top while the utility bar scrolls. */
.site-header { display: contents; }

.nav {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--nav-bg);
  border-bottom: 1px solid var(--nav-border);
  box-shadow: var(--shadow-xs);
  height: var(--nav-height);
  display: flex;
  align-items: center;
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad-x);
}

.nav__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.nav__logo img {
  height: 48px;
  width: auto;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  list-style: none;
}

.nav__links a {
  position: relative;
  display: block;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--nav-link-color);
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast), background var(--transition-fast);
  white-space: nowrap;
}

/* Hover: jewel-toned indigo pill (matches the stat cards), gold text */
.nav__links a:hover {
  color: var(--color-gold-light);
  background: var(--gradient-jewel-plum);
}

/* Active / current page: gold underline, no pill */
.nav__links a.active {
  color: var(--nav-link-active);
  background: transparent;
  font-weight: var(--weight-semibold);
}

.nav__links a.active::after {
  content: '';
  position: absolute;
  left: var(--space-3);
  right: var(--space-3);
  bottom: 2px;
  height: 2px;
  background: linear-gradient(90deg, var(--color-gold), var(--color-gold-deep));
  border-radius: 2px;
}

.nav__cta {
  margin-left: var(--space-4);
  flex-shrink: 0;
}

/* Nav "Contact Us" matches the "Get in Touch" CTA: indigo fill, gold text. */
.nav__cta .btn--primary {
  color: var(--color-gold-light);
}
.nav__cta .btn--primary:hover {
  color: var(--color-gold-light);
}

.nav__hamburger {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  padding: var(--space-2);
  min-width: 44px;
  min-height: 44px;   /* WCAG 2.5.5 touch target */
  background: none;
  border: none;
}

.nav__hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-text-primary);
  border-radius: 2px;
  transition: all var(--transition-base);
}

/* Mobile nav */
.nav__mobile {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--color-surface);
  z-index: var(--z-overlay);
  flex-direction: column;
  padding: var(--space-6);
  overflow-y: auto;
}

.nav__mobile.is-open {
  display: flex;
}

.nav__mobile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-8);
}

.nav__mobile-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: var(--text-2xl);
  color: var(--color-text-primary);
  line-height: 1;
}

.nav__mobile-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.nav__mobile-links a {
  display: flex;
  align-items: center;
  min-height: 44px;          /* guarantee a comfortable touch target */
  padding: var(--space-4) var(--space-3);
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
  border-bottom: 1px solid var(--color-border);
  transition: color var(--transition-fast);
}

.nav__mobile-links a:hover {
  color: var(--color-brand-primary);
}

.nav__mobile-cta {
  margin-top: var(--space-8);
}

@media (max-width: 1024px) {
  .nav__links,
  .nav__cta {
    display: none;
  }
  .nav__hamburger {
    display: flex;
  }
}

/* ============================================================
   UTILITY BAR (top strip)
============================================================ */

.utility-bar {
  position: relative;
  overflow: hidden;   /* clip the 200%-wide animated spectrum ::before */
  background: var(--color-brand-primary);
  color: rgba(255,255,255,0.85);
  font-size: var(--text-xs);
  padding: var(--space-2) 0;
}

/* Spectrum hairline at the very top of the page — bookends the footer crown.
   Same flowing animation as the footer strip (doubled-width gradient whose
   position drifts; starts/ends on gold => seamless loop). */
.utility-bar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  /* Double-width gradient layer slid via transform (GPU-composited) instead of
     animating background-position (main-thread). width:200% + translateX(-50%)
     reproduces the same flowing drift without jank/CLS. */
  width: 200%;
  height: 3px;
  background: var(--gradient-spectrum);
  background-size: 50% 100%;
  background-repeat: repeat-x;
  animation: spectrum-flow 7s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .utility-bar::before { animation: none; }
}

.utility-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad-x);
}

.utility-bar__contact {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.utility-bar__contact a {
  color: rgba(255,255,255,0.85);
  display: flex;
  align-items: center;
  gap: var(--space-1);
  transition: color var(--transition-fast);
}

.utility-bar__contact a:hover { color: #fff; }

.utility-bar__social {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.utility-bar__social a {
  color: rgba(255,255,255,0.7);
  transition: color var(--transition-fast);
}

.utility-bar__social a:hover { color: #fff; }

@media (max-width: 768px) {
  .utility-bar { display: none; }
}

/* ============================================================
   FOOTER
============================================================ */

.footer {
  position: relative;
  overflow: hidden;   /* clip the 200%-wide animated spectrum ::before */
  background: var(--color-text-primary);
  color: rgba(255,255,255,0.75);
  padding-top: var(--space-16);
}

/* Spectrum hairline crowning the footer — ties the dark slab to the brand
   palette. The gradient is doubled in width and its position drifts, so the
   colours flow softly along the hairline (it starts/ends on gold, so the
   loop is seamless). */
.footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  /* GPU-composited drift — see .utility-bar::before. */
  width: 200%;
  height: 3px;
  background: var(--gradient-spectrum);
  background-size: 50% 100%;
  background-repeat: repeat-x;
  animation: spectrum-flow 7s linear infinite;
}

@keyframes spectrum-flow {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }   /* one full gradient tile = seamless loop */
}

@media (prefers-reduced-motion: reduce) {
  .footer::before { animation: none; }
}

.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: var(--space-12);
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad-x);
  padding-bottom: var(--space-12);
}

.footer__brand img {
  height: 48px;
  width: auto;
  margin-bottom: var(--space-4);
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

.footer__tagline {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-5);
  color: rgba(255,255,255,0.6);
}

.footer__contact-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--text-sm);
  margin-bottom: var(--space-3);
  color: rgba(255,255,255,0.7);
}

.footer__contact-item a {
  color: rgba(255,255,255,0.7);
  transition: color var(--transition-fast);
}

.footer__contact-item a:hover { color: #fff; }

.footer__heading {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: rgba(255,255,255,0.62);   /* ≥4.5:1 on the dark footer slab */
  margin-bottom: var(--space-5);
}

.footer__links {
  list-style: none;
  display: flex;
  flex-direction: column;
  /* No gap — the links' min-height already sets the row rhythm; an extra
     gap on top of it stacks into oversized spacing between items. */
  gap: 0;
}

.footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;   /* comfortable tap target + even row spacing */
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.65);
  transition: color var(--transition-fast);
}

.footer__links a:hover { color: #fff; }

.footer__social {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.footer__social a {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.6);
  font-size: var(--text-sm);
  transition: background var(--transition-fast), color var(--transition-fast);
}

.footer__social a:hover {
  background: var(--color-brand-primary);
  color: #fff;
}

.footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: var(--space-5) 0;
}

.footer__bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad-x);
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.62);   /* copyright — ≥4.5:1 on the dark footer slab */
}

.footer__legal-links {
  display: flex;
  gap: var(--space-5);
}

.footer__legal-links a {
  color: rgba(255,255,255,0.62);   /* legal links must stay legible — ≥4.5:1 */
  transition: color var(--transition-fast);
}

.footer__legal-links a:hover { color: rgba(255,255,255,0.8); }

@media (max-width: 1024px) {
  .footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }
}

@media (max-width: 600px) {
  .footer__grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
  .footer__bottom-inner {
    flex-direction: column;
    gap: var(--space-3);
    text-align: center;
  }
  /* Touch targets: lift every footer link to the 44px minimum on mobile. */
  .footer__links a { min-height: 44px; }
  .footer__legal-links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .footer__social a {
    width: 44px;
    height: 44px;
  }
  /* Linked contact rows (email, phone): centre the icon with the single-line
     link and give the whole row 44px of tap height. The address row has no
     link, so it keeps its top-aligned multi-line layout untouched. */
  .footer__contact-item:has(a) {
    align-items: center;
    min-height: 44px;
    margin-bottom: var(--space-1);
  }
  /* The clickable <a> itself must reach 44px — not just its row — so the
     tap target (not the container) meets the minimum. */
  .footer__contact-item a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* ============================================================
   CTA STRIP (reusable across pages)
============================================================ */

.cta-strip {
  position: relative;
  /* Signature jewel surface — shared with every indigo section */
  background: var(--gradient-jewel);
  padding: var(--space-16) 0;
  text-align: center;
  overflow: hidden;
}

.cta-strip__title {
  font-family: var(--font-heading);
  font-size: var(--fluid-h3);
  font-weight: var(--weight-bold);
  color: #fff;
  margin-bottom: var(--space-4);
}

.cta-strip__subtitle {
  font-size: var(--text-md);
  color: rgba(255,255,255,0.75);
  margin-bottom: var(--space-8);
  max-width: 500px;
  margin-inline: auto;
  line-height: var(--leading-relaxed);
}

/* Buttons match the jewel language: gold primary, white-outline secondary
   (same treatment as the brands strip, since both sit on indigo) */
.cta-strip .btn--primary {
  background: var(--color-gold);
  border-color: var(--color-gold);
  color: var(--color-brand-primary-dark);
}

.cta-strip .btn--primary:hover {
  background: var(--color-gold-light);
  border-color: var(--color-gold-light);
  color: var(--color-brand-primary-dark);
}

.cta-strip .btn--secondary {
  color: #fff;
  border-color: rgba(255,255,255,0.55);
}

.cta-strip .btn--secondary:hover {
  background: rgba(255,255,255,0.12);
  border-color: #fff;
}

/* ------------------------------------------------------------
   Centered button row beneath a section (services, brands, CTA).
   Shared helper — replaces one-off inline flex rows.
------------------------------------------------------------ */
.section-actions {
  margin-top: var(--space-10);
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  flex-wrap: wrap;
}
.section-actions--tight { margin-top: var(--space-8); }

/* ------------------------------------------------------------
   CTA AURORA + FROSTED GLASS  (reusable across pages)
   A blooming aurora light-field of brand-hued ribbons sits behind
   the CTA, with a full-section frosted-glass sheet over it so the
   colour reads as soft, diffused light. Decorative only (markup is
   aria-hidden). The machinery is hue-neutral here; per-page colour
   tuning (champagne vs. indigo) layers on top via .cta-strip--light
   (home.css) or .cta-strip--aurora below.
------------------------------------------------------------ */
.cta-bloom {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Dither / noise overlay — kills gradient banding on 8-bit displays.
   A faint tiled SVG noise perturbs the smooth gradient into fine
   stippling the eye blends back to a clean tone. */
.cta-bloom::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.9;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  background-size: 120px 120px;
}

/* Full-section frosted-glass sheet — blurs the aurora behind it. */
.cta-glass-layer {
  position: absolute;
  inset: 0;
  z-index: 1;                       /* above aurora (0), below content (2) */
  pointer-events: none;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(20px) saturate(135%);
          backdrop-filter: blur(20px) saturate(135%);
}

/* Each ribbon is an oversized, off-centre, heavily-blurred gradient sheet
   that sweeps like an aurora band rather than spinning like a disc. */
.cta-bloom__petal {
  position: absolute;
  border-radius: 50%;
  filter: blur(55px);
  mix-blend-mode: normal;
  transform-origin: center;
  opacity: 0.45;
}

/* Multi-colour aurora — each ribbon a distinct vivid hue spanning the
   spectrum; they overlap + sweep so adjacent hues blend at the seams. */
.cta-bloom__petal--1 {
  width: 90%; height: 150%;
  top: -40%; left: -25%;
  background: radial-gradient(60% 45% at 50% 50%,
    rgba(86, 64, 196, 0.80) 0%,
    rgba(86, 64, 196, 0.52) 24%,
    rgba(86, 64, 196, 0.26) 46%,
    rgba(86, 64, 196, 0.10) 62%,
    rgba(86, 64, 196, 0) 78%);
  animation: aurora-sweep-1 24s ease-in-out infinite;
}
.cta-bloom__petal--2 {
  width: 95%; height: 140%;
  top: -30%; right: -30%;
  background: radial-gradient(58% 42% at 50% 50%,
    rgba(190, 70, 150, 0.70) 0%,
    rgba(190, 70, 150, 0.46) 24%,
    rgba(190, 70, 150, 0.22) 46%,
    rgba(190, 70, 150, 0.08) 62%,
    rgba(190, 70, 150, 0) 78%);
  animation: aurora-sweep-2 30s ease-in-out infinite;
}
.cta-bloom__petal--3 {
  width: 110%; height: 130%;
  bottom: -45%; left: 0;
  background: radial-gradient(55% 40% at 50% 50%,
    rgba(34, 160, 150, 0.62) 0%,
    rgba(34, 160, 150, 0.40) 24%,
    rgba(34, 160, 150, 0.20) 46%,
    rgba(34, 160, 150, 0.07) 64%,
    rgba(34, 160, 150, 0) 80%);
  animation: aurora-sweep-3 34s ease-in-out infinite;
}
.cta-bloom__petal--4 {
  width: 85%; height: 120%;
  bottom: -35%; right: -15%;
  background: radial-gradient(60% 40% at 50% 50%,
    rgba(224, 168, 70, 0.66) 0%,
    rgba(224, 168, 70, 0.42) 24%,
    rgba(224, 168, 70, 0.20) 46%,
    rgba(224, 168, 70, 0.07) 62%,
    rgba(224, 168, 70, 0) 78%);
  animation: aurora-sweep-4 27s ease-in-out infinite;
}

/* Big travelling sweeps — large blurred sheets need large translate
   distances for the lit area to visibly shift. */
@keyframes aurora-sweep-1 {
  0%, 100% { transform: translate(-55%, -20%) rotate(-12deg) scale(1); }
  50%      { transform: translate(45%, 25%)   rotate(8deg)   scale(1.15); }
}
@keyframes aurora-sweep-2 {
  0%, 100% { transform: translate(50%, 18%)   rotate(10deg)  scale(1.1); }
  50%      { transform: translate(-50%, -22%) rotate(-9deg)  scale(0.95); }
}
@keyframes aurora-sweep-3 {
  0%, 100% { transform: translate(-40%, 30%)  rotate(6deg)   scale(1); }
  50%      { transform: translate(45%, -30%)  rotate(-8deg)  scale(1.18); }
}
@keyframes aurora-sweep-4 {
  0%, 100% { transform: translate(40%, 20%)   rotate(-8deg)  scale(1.05); }
  50%      { transform: translate(-48%, -18%) rotate(12deg)  scale(0.92); }
}

@media (prefers-reduced-motion: reduce) {
  .cta-bloom__petal { animation: none; }
}

/* ------------------------------------------------------------
   .cta-strip--light — champagne CTA variant (Home + About).
   Light surface → dark text, indigo-fill primary with gold text,
   indigo-outline secondary; the aurora + frosted glass read as soft
   diffused colour through the glass. Shared by both pages.
------------------------------------------------------------ */
.cta-strip--light {
  /* Transparent so the warm page wash shows through — same treatment as the
     "Team behind the work" (spotlight) section. */
  background: transparent;
  isolation: isolate;               /* contain the aurora blend modes */
}
.cta-strip--light::after { display: none; }   /* drop the indigo bloom overlay */

/* Spectrum hairline crowning the TOP of the section — mirrors the flowing
   strip on the footer. Doubled-width gradient whose position drifts, so the
   colours flow softly along the line (starts/ends on gold => seamless loop). */
.cta-strip--light::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  /* GPU-composited drift — see .utility-bar::before. */
  width: 200%;
  height: 3px;
  z-index: 2;                       /* above the aurora, like the footer line */
  background: var(--gradient-spectrum);
  background-size: 50% 100%;
  background-repeat: repeat-x;
  animation: spectrum-flow 7s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .cta-strip--light::before { animation: none; }
}

.cta-strip--light .container { position: relative; z-index: 2; }  /* content above aurora + noise */

.cta-strip--light .cta-strip__title { color: var(--color-text-primary); }
.cta-strip--light .cta-strip__subtitle { color: var(--color-text-secondary); }
/* "Get in Touch" primary → Meet-the-Team style: indigo fill, gold text. */
.cta-strip--light .btn--primary {
  background: var(--color-brand-primary);
  border-color: var(--color-brand-primary);
  color: var(--color-gold-light);
}
.cta-strip--light .btn--primary:hover {
  background: var(--color-brand-primary-dark);
  border-color: var(--color-brand-primary-dark);
  color: var(--color-gold-light);
}
.cta-strip--light .btn--secondary {
  color: var(--color-brand-primary);
  border-color: rgba(61, 54, 128, 0.55);
}
/* Hover mirrors the hero "Our Services" button: keep the text colour, add a
   faint same-hue wash and brighten the border (no fill/colour flip). */
.cta-strip--light .btn--secondary:hover {
  background: rgba(61, 54, 128, 0.10);
  border-color: var(--color-brand-primary);
  color: var(--color-brand-primary);
}

/* ============================================================
   PAGE HERO (reusable)
============================================================ */

.page-hero {
  position: relative;
  /* Soft multi-hue wash — warm + indigo + fresh bloom on the off-white base.
     Reads as a tinted, lively header instead of a flat grey band. */
  background:
    radial-gradient(90% 120% at 100% 0%, var(--color-accent-warm-faint) 0%, transparent 60%),
    radial-gradient(80% 120% at 0% 100%, var(--color-accent-fresh-faint) 0%, transparent 55%),
    linear-gradient(180deg, var(--color-brand-primary-faint) 0%, var(--color-surface-alt) 100%);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-16) 0 var(--space-12);
  overflow: hidden;
}

/* Thin colorful rule under every hero — the salon spectrum as a hairline */
.page-hero::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--gradient-spectrum);
}

.page-hero__breadcrumb {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  margin-bottom: var(--space-4);
}

.page-hero__breadcrumb a {
  color: var(--color-text-tertiary);
}

.page-hero__breadcrumb a:hover {
  color: var(--color-brand-primary);
}

.page-hero__title {
  font-family: var(--font-heading);
  font-size: var(--fluid-h2);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-4);
}

.page-hero__subtitle {
  font-size: var(--text-md);
  color: var(--color-text-secondary);
  max-width: 600px;
  line-height: var(--leading-relaxed);
}

@media (max-width: 768px) {
  .page-hero { padding: var(--space-10) 0 var(--space-8); }
}

/* ------------------------------------------------------------
   .page-hero--indigo — drenched indigo variant of the page hero.
   Swaps the light multi-hue wash for the signature jewel surface
   (same gradient as .section--indigo, the CTA and the brands strip),
   and flips the text light. The spectrum hairline already reads well
   on the dark ground, so it stays. Opt-in per page (About uses it).
------------------------------------------------------------ */
.page-hero--indigo {
  background: var(--gradient-jewel);
  border-bottom-color: rgba(255, 255, 255, 0.12);
}

.page-hero--indigo .page-hero__title {
  color: var(--color-gold-light);
}

.page-hero--indigo .page-hero__subtitle {
  color: rgba(255, 255, 255, 0.75);
}

.page-hero--indigo .page-hero__breadcrumb,
.page-hero--indigo .page-hero__breadcrumb a {
  color: rgba(255, 255, 255, 0.55);
}

.page-hero--indigo .page-hero__breadcrumb a:hover {
  color: var(--color-gold-light);
}

/* Eyebrow — small gold label above the title (matches every page hero). */
.page-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-gold-deep);
  margin-bottom: var(--space-4);
}

.page-hero__eyebrow::before {
  content: '';
  display: block;
  width: 24px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}

.page-hero--indigo .page-hero__eyebrow {
  color: var(--color-gold-light);
}

/* ============================================================
   STAT COUNTER CARDS
============================================================ */

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}

.stat-card {
  position: relative;
  text-align: center;
  padding: var(--space-10) var(--space-6);
  /* Jewel-toned card — deep indigo with a subtle plum bloom + glossy top
     highlight. Reads premium/cosmetics-counter against the warm ivory bg. */
  background: var(--gradient-jewel-plum);
  border: 1px solid rgba(201, 162, 75, 0.22);   /* faint gold edge */
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 32px rgba(43, 38, 96, 0.28);
  overflow: hidden;
}

/* Gold hairline across the top — refined jewel detailing, not a loud bar */
.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
}

.stat-card__number {
  font-family: var(--font-heading);
  font-size: var(--text-4xl);
  font-weight: var(--weight-bold);
  color: var(--color-gold-light);   /* gold figures on deep indigo — jewel-toned */
  font-variant-numeric: tabular-nums;   /* equal-width digits — steady during the count-up */
  line-height: 1;
  margin-bottom: var(--space-2);
}

.stat-card__label {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.82);   /* light on the deep jewel card */
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

@media (max-width: 768px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 400px) {
  .stats-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   FORM STYLES
============================================================ */

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.form-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
}

.form-input,
.form-select,
.form-textarea {
  padding: var(--input-padding);
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--input-radius);
  color: var(--input-text);
  font-size: var(--text-base);
  font-family: var(--font-body);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  outline: none;
  width: 100%;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--input-border-focus);
  box-shadow: var(--shadow-focus);
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--input-placeholder);
}

.form-textarea {
  min-height: 140px;
  resize: vertical;
}

.form-error {
  font-size: var(--text-xs);
  color: var(--color-error);
}

.form-success {
  padding: var(--space-4);
  background: var(--color-success-bg);
  border: 1px solid var(--color-success);
  border-radius: var(--radius-md);
  color: var(--color-success);
  font-size: var(--text-sm);
  margin-bottom: var(--space-5);
}

/* ============================================================
   PAGINATION
============================================================ */

.pagination {
  display: flex;
  justify-content: center;
  margin-top: var(--space-12);
}

.pagination ul {
  display: flex;
  gap: var(--space-2);
  list-style: none;
}

.pagination li a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  transition: all var(--transition-fast);
}

.pagination li.active a,
.pagination li a:hover {
  background: var(--color-brand-primary);
  border-color: var(--color-brand-primary);
  color: #fff;
}

/* ============================================================
   SCROLL ANIMATION
============================================================ */

/* Hidden state applies ONLY when the JS animation layer is active
   (html.js-anim, set before paint). Without JS the content stays visible —
   no blank sections if the observer misfires or scripts fail to load. */
.js-anim .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.js-anim .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal--delay-1 { transition-delay: 0.1s; }
.reveal--delay-2 { transition-delay: 0.2s; }
.reveal--delay-3 { transition-delay: 0.3s; }
.reveal--delay-4 { transition-delay: 0.4s; }


/* ============================================================
   SHARED JEWEL ICON TILES
   Elevates the generic flat-lavender icon tiles across the site
   into deep-indigo jewel tiles with gold glyphs + gold edge —
   matching the homepage service cards. One place, every page.
   (Brand-meaningful cards keep their own colours and are not
   listed here. Profile photos / dark-section tiles excluded.)
============================================================ */

/* NOTE: .overview-pill__icon is intentionally NOT in this list — the About
   overview panel uses the gold-gradient Academy tile (defined in about.css),
   not the indigo jewel tile this rule standardizes. */
.academy-pillar__icon,
.program-card__icon,
.cert-badge__icon,
.why-kosca__icon,
.award-badge__icon,
.services-hero__card-icon,
.benefit-card__icon,
.service-section__icon-wrap,
.dept-card__icon,
.culture-card__icon,
.download-item__icon,
.category-card__icon-wrap,
.mvv-card__icon-wrap {
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,0.12) 0%, transparent 55%),
    linear-gradient(160deg, var(--color-brand-primary) 0%, var(--color-brand-primary-dark) 100%) !important;
  border: 1px solid rgba(201, 162, 75, 0.30);
  color: var(--color-gold-light) !important;
  box-shadow: 0 6px 16px rgba(43, 38, 96, 0.20);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

/* SVG glyphs inside follow the gold colour (most use currentColor) */
.academy-pillar__icon svg,
.program-card__icon svg,
.cert-badge__icon svg,
.why-kosca__icon svg,
.award-badge__icon svg,
.services-hero__card-icon svg,
.benefit-card__icon svg,
.service-section__icon-wrap svg,
.dept-card__icon svg,
.culture-card__icon svg,
.download-item__icon svg,
.category-card__icon-wrap svg,
.mvv-card__icon-wrap svg {
  color: var(--color-gold-light);
  stroke: currentColor;
}

/* ============================================================
   TIMELINE
============================================================ */

.timeline {
  position: relative;
  padding: var(--space-8) 0;
  list-style: none;
  margin: 0;
  counter-reset: timeline;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg,
    var(--color-brand-primary) 0%,
    var(--color-gold) 50%,
    var(--color-brand-primary) 100%);
  opacity: 0.4;
  z-index: 0;
  transform: translateX(-50%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
}

.timeline::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  width: 2px;
  height: var(--timeline-progress, 0%);
  background: linear-gradient(180deg, var(--color-brand-primary-dark), var(--color-brand-primary));
  transform: translateX(-50%);
  box-shadow: 0 0 10px rgba(61, 54, 128, 0.55);
  z-index: 0;
  transition: height 0.15s linear;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 6%, #000 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 6%, #000 100%);
}

.timeline__item {
  display: grid;
  grid-template-columns: 1fr 60px 1fr;
  gap: 0;
  align-items: center;
  position: relative;
  z-index: 1;
}

.timeline__item + .timeline__item {
  margin-top: calc(var(--space-8) * -1);
}

.timeline__content {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--card-radius);
  padding: var(--space-6);
  box-shadow: 0 10px 28px rgba(43, 38, 96, 0.12);
  overflow: hidden;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.timeline__content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
}

.timeline__content:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(43, 38, 96, 0.18);
}

.timeline__content--right { grid-column: 3; }
.timeline__content--left  { grid-column: 1; text-align: right; }

.timeline__dot {
  grid-column: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
}

.timeline__dot-inner {
  width: 18px;
  height: 18px;
  background: var(--color-brand-primary);
  border-radius: 50%;
  border: 3px solid var(--color-bg);
  box-shadow: 0 0 0 2px var(--color-gold);
  position: relative;
  z-index: 1;
  transform: scale(0.55);
  opacity: 0.45;
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
              opacity 0.45s ease,
              box-shadow 0.45s ease;
}

.timeline__item.anim-in .timeline__dot-inner,
.timeline__item.is-visible .timeline__dot-inner {
  transform: scale(1);
  opacity: 1;
  box-shadow: 0 0 0 2px var(--color-gold), 0 0 14px rgba(201, 162, 75, 0.6);
}

.timeline__item:first-child .timeline__dot-inner,
.timeline__item:last-child .timeline__dot-inner {
  width: 22px;
  height: 22px;
  background: var(--color-gold);
  box-shadow: 0 0 0 2px var(--color-brand-primary);
}
.timeline__item:first-child.anim-in .timeline__dot-inner,
.timeline__item:first-child.is-visible .timeline__dot-inner,
.timeline__item:last-child.anim-in .timeline__dot-inner,
.timeline__item:last-child.is-visible .timeline__dot-inner {
  box-shadow: 0 0 0 2px var(--color-brand-primary), 0 0 16px rgba(201, 162, 75, 0.7);
}

.timeline__item:last-child .timeline__dot { position: relative; }
.timeline__item:last-child .timeline__dot::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--color-gold);
  transform: translate(-50%, -50%) scale(1);
  opacity: 0;
  z-index: 0;
  pointer-events: none;
}
.timeline__item:last-child.anim-in .timeline__dot::after,
.timeline__item:last-child.is-visible .timeline__dot::after {
  animation: timeline-last-pulse 2.4s ease-out infinite;
}
@keyframes timeline-last-pulse {
  0%   { transform: translate(-50%, -50%) scale(1);   opacity: 0.55; }
  70%  { transform: translate(-50%, -50%) scale(2.8); opacity: 0; }
  100% { transform: translate(-50%, -50%) scale(2.8); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .timeline__item:last-child .timeline__dot::after { animation: none; }
}

.timeline__year-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background: var(--color-brand-primary);
  color: var(--color-gold-light);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-3);
}

.timeline__content--left .timeline__year-badge { margin-left: auto; }

.timeline__milestone {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}

.timeline__desc {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
}

@media (max-width: 768px) {
  .timeline::before,
  .timeline::after { left: 20px; }
  .timeline__item {
    grid-template-columns: 40px 1fr;
    grid-template-rows: auto;
    column-gap: var(--space-2);
  }
  .timeline__item + .timeline__item { margin-top: var(--space-6); }
  .timeline__dot { grid-column: 1; grid-row: 1; align-items: flex-start; padding-top: var(--space-5); }
  .timeline__content--right,
  .timeline__content--left {
    grid-column: 2; grid-row: 1; text-align: left;
  }
  .timeline__content--left .timeline__year-badge { margin-left: 0; }
  .timeline__content::after {
    content: '';
    position: absolute;
    top: 50%; left: -8px;
    width: 8px; height: 2px;
    background: var(--color-gold);
    opacity: 0.6;
    transform: translateY(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .timeline__dot-inner { transition: none; }
  .timeline::after { transition: none; }
}