/* =========================================================================
   Fausto Industries — Brand layer
   Loads LAST in index.html and overrides theme.css, utilities.css, custom.css.
   Only `body`, `h1`–`h6`, `.btn`, and `.fi-*` / Bootstrap-scoped selectors.
   ========================================================================= */

/* ---------- 1. Brand tokens ---------------------------------------------- */
:root {
  --fi-blue:        #1E4D9C;
  --fi-blue-dark:   #16407F;
  --fi-blue-deep:   #102E5C;
  --fi-cyan:        #1E90E0;
  --fi-cyan-bright: #2BA8F5;
  --fi-slate:       #2C3845;
  --fi-slate-dark:  #1F2937;
  --fi-gray:        #6B7280;
  --fi-gray-light:  #E5E7EB;
  --fi-off-white:   #F4F6F8;
  --fi-white:       #FFFFFF;

  /* 2. Bootstrap variable overrides */
  --bs-primary:           var(--fi-blue);
  --bs-primary-rgb:       30, 77, 156;
  --bs-secondary:         var(--fi-slate);
  --bs-secondary-rgb:     44, 56, 69;
  --bs-info:              var(--fi-cyan);
  --bs-info-rgb:          30, 144, 224;
  --bs-body-font-family:  'Outfit', system-ui, sans-serif;
  --bs-body-color:        var(--fi-slate-dark);
  --bs-body-bg:           var(--fi-white);
}

/* ---------- 3. Base typography ------------------------------------------- */
body {
  font-family: 'Outfit', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight: 400;
  color: var(--fi-slate-dark);
  background-color: var(--fi-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ---------- 4. Heading scale --------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Outfit', system-ui, sans-serif;
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--fi-slate-dark);
  margin-top: 0;
}
h1 { font-size: clamp(2.5rem, 5vw,   4.5rem); line-height: 1.05; }
h2 { font-size: clamp(2rem,   3.6vw, 3rem);   line-height: 1.15; }
h3 { font-size: clamp(1.5rem, 2.4vw, 2rem);   line-height: 1.20; }
h4 { font-size: clamp(1.25rem,1.8vw, 1.5rem); line-height: 1.25; }
h5 { font-size: clamp(1.125rem,1.4vw,1.25rem);line-height: 1.30; }
h6 { font-size: 1rem;                          line-height: 1.35; }
h1 strong, h2 strong, h3 strong, h4 strong, h5 strong, h6 strong { font-weight: 700; }

/* ---------- 5. Display wordmark treatment -------------------------------- */
.fi-display {
  font-family: 'Outfit', sans-serif;
  font-weight: 300;
  line-height: 0.95;
  letter-spacing: -0.025em;
  font-size: clamp(3rem, 7vw, 6rem);
  margin: 0 0 1rem;
}
.fi-display strong { font-weight: 700; }

/* ---------- 6. Taglines / eyebrows --------------------------------------- */
.fi-tagline,
.fi-tagline-light {
  display: inline-block;
  font-family: 'Outfit', sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fi-cyan);
  margin: 0;
}
.fi-tagline-light { color: var(--fi-cyan-bright); }

/* ---------- 7. Hero — solid fallback color only ------------------------
   The image + gradient now live on a dedicated absolutely-positioned child
   .fi-hero-bg (added in index.html only). Keeping the background off the
   flex container itself decouples the image cropping from content-height
   shifts caused by the typed-text animation cycling strings of different
   widths — that was producing visible "zoom" repaints on every cycle.
   background-color stays as the final fallback if the bg layer fails. */
.fi-hero {
  position: relative;
  /* min-height: 100vh recomputes whenever the iOS/Android address bar shows
     or hides, which forces a background re-rasterize. 100svh (small viewport
     height) is the height of the viewport WITH the address bar visible — it
     doesn't change as chrome toggles, so the hero stays stable. The 100vh
     line ships first as a fallback for browsers without svh support. */
  min-height: 100vh;
  min-height: 100svh;
  background-color: var(--fi-blue);
  color: var(--fi-white);
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 8rem 0 4rem;
}

/* Hero background layer — sits beneath the radial glows (z-index 1) and
   tsParticles canvas (z-index 2). Image + 35%-opacity blue at top fading
   to solid deep navy at the bottom so the photo of Fausto reads cleanly.
   pointer-events:none so the absolute layer never intercepts clicks.
   width/height explicit alongside top/right/bottom/left so older browsers
   that don't honor `inset` shorthand still size the layer correctly. */
.fi-hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background:
    linear-gradient(to bottom, rgba(30, 77, 156, 0.35) 0%, rgb(0, 30, 61) 100%),
    url('/assets/images/photos/remote-desktop-bg2.jpg') center center / cover no-repeat var(--fi-blue);
  pointer-events: none;
  z-index: 0;
}

/* Mobile belt — promote .fi-hero-bg to its own GPU compositor layer so the
   browser doesn't re-rasterize the (large) background image on every scroll
   frame as the address bar toggles. background-attachment:scroll is already
   the default but we set it explicitly to defend against any cascade leak. */
@media (max-width: 991px) {
  .fi-hero-bg {
    background-attachment: scroll !important;
    transform: translateZ(0);
    will-change: auto;
  }
}

/* Subtle radial glow from upper-left for atmospheric depth */
.fi-hero::before {
  content: '';
  position: absolute;
  top: -20%;
  left: -10%;
  width: 60%;
  height: 80%;
  background: radial-gradient(circle, rgba(43, 168, 245, 0.15) 0%, transparent 60%);
  z-index: 1;
  pointer-events: none;
}

/* Subtle radial glow from lower-right for balance */
.fi-hero::after {
  content: '';
  position: absolute;
  bottom: -30%;
  right: -10%;
  width: 50%;
  height: 70%;
  background: radial-gradient(circle, rgba(16, 46, 92, 0.5) 0%, transparent 60%);
  z-index: 1;
  pointer-events: none;
}

.fi-hero-particles {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.fi-hero-particles canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.fi-hero > .container {
  position: relative;
  z-index: 10;
  display: block;
}
.fi-hero > .container > .row {
  align-items: center;
}

/* ---------- 8. Hero content styling -------------------------------------- */
.fi-hero-content {
  max-width: 36rem;
  align-self: center;
  padding-bottom: 0;
}
.fi-hero-eyebrow {
  display: inline-block;
  font-family: 'Outfit', sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fi-cyan-bright);
  margin-bottom: 1.5rem;
}
.fi-hero-content h1.fi-display,
.fi-hero-content h1.fi-display strong { color: var(--fi-white); }
.fi-hero-content .fi-tagline,
.fi-hero-content .fi-tagline-light { margin: 0.5rem 0 1.5rem; }
.fi-hero-subtitle {
  font-size: 1.125rem;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
  margin: 0 0 2rem;
  max-width: 34rem;
  white-space: normal;
}
.fi-hero-divider {
  width: 60px;
  height: 2px;
  background: var(--fi-cyan);
  margin: 1.5rem 0 2rem;
}

/* ---------- Hero photo column — torso sits on a cyan baseline ----------- */
.fi-hero-photo-col {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding: 0;
  min-height: 100%;
}

/* Photo container — sized for torso composition */
.fi-hero-photo {
  position: relative;
  display: block;
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
}

/* Cyan baseline accent — short horizontal line the figure sits on */
.fi-hero-photo::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 2px;
  background: var(--fi-cyan);
  z-index: 1;
  box-shadow: 0 0 20px rgba(30, 144, 224, 0.5);
}

/* Subtle cyan glow behind the figure for depth */
.fi-hero-photo::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  height: 50%;
  background: radial-gradient(ellipse at bottom, rgba(30, 144, 224, 0.2) 0%, transparent 70%);
  z-index: 1;
  pointer-events: none;
  filter: blur(15px);
}

/* The image — defensive sizing, no flex/auto-width to collapse against */
.fi-hero-photo img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  margin: 0 auto;
  object-fit: contain;
  object-position: bottom center;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.3));
}

/* Tablet ≤ 991px: stacked layout, hero shrinks to content, photo on top */
@media (max-width: 991px) {
  .fi-hero {
    min-height: auto;
    padding: 6rem 0 3rem;
  }
  /* Reverse the column order — photo renders above text on tablet/mobile.
     HTML order stays "text, photo" so the h1 is still first for SEO + a11y. */
  .fi-hero > .container > .row {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .fi-hero-content {
    text-align: center;
    padding-bottom: 0;
    margin-bottom: 2rem;
  }
  .fi-hero-photo-col {
    margin-bottom: 1rem;
  }
  .fi-hero-photo {
    max-width: 360px;
    width: 100%;
  }
  .fi-hero-photo img {
    width: 100%;
    height: auto;
    max-height: 50vh;
  }
  /* Center the cyan divider on stacked layout */
  .fi-hero-divider {
    margin-left: auto;
    margin-right: auto;
  }
}

/* Mobile ≤ 576px: compact layout — text + photo flow naturally */
@media (max-width: 576px) {
  .fi-hero {
    padding: 5rem 0 2.5rem;
  }

  /* Tighten text spacing to make room for the photo within the viewport */
  .fi-hero h1 {
    font-size: clamp(2rem, 9vw, 2.75rem);
    margin-bottom: 0.5rem;
    line-height: 1.05;
  }
  .fi-hero-eyebrow {
    margin-bottom: 0.75rem;
    font-size: 0.7rem;
  }
  .fi-tagline-light {
    font-size: 0.7rem;
    margin-bottom: 0.75rem;
  }
  .fi-hero-subtitle {
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
    line-height: 1.4;
  }
  .fi-hero-divider {
    margin: 0.75rem auto 1rem;
  }
  .fi-hero-content .btn {
    padding: 0.65rem 1.25rem;
    font-size: 0.9rem;
  }
  /* Photo column tightens since it loads first (reversed order) */
  .fi-hero-photo-col {
    margin-bottom: 0.75rem;
  }
  .fi-hero-photo {
    max-width: 320px;
    width: 100%;
  }
  .fi-hero-photo img {
    width: 100%;
    height: auto;
    max-height: 50vh;
  }
}

/* Very small mobile ≤ 380px (iPhone SE etc) — even tighter */
@media (max-width: 380px) {
  .fi-hero {
    padding: 4.5rem 0 0;
  }
  .fi-hero h1 {
    font-size: 1.85rem;
    line-height: 1.05;
  }
  .fi-hero-subtitle {
    font-size: 0.875rem;
  }
  .fi-hero-photo {
    max-width: 260px;
  }
  .fi-hero-photo img {
    max-height: 45vh;
  }
  .fi-hero-content .btn {
    padding: 0.55rem 1rem;
    font-size: 0.85rem;
  }
  .fi-hero-content .btn + .btn {
    margin-left: 0.5rem !important;
  }
}
.fi-hero-typed {
  display: inline-block;
  white-space: nowrap;
  font-weight: 500;
  color: var(--fi-cyan-bright);
}
.fi-hero-subtitle .typed-cursor {
  color: var(--fi-cyan);
  font-weight: 400;
  margin-left: 0.05em;
}

/* ---------- 9. Section bands --------------------------------------------- */
.fi-section { padding: 6rem 0; background-color: var(--fi-white); }
.fi-section-light { background-color: var(--fi-off-white); }
.fi-section-dark  { background-color: var(--fi-slate-dark); color: var(--fi-white); }
.fi-section-dark h1, .fi-section-dark h2, .fi-section-dark h3,
.fi-section-dark h4, .fi-section-dark h5, .fi-section-dark h6 { color: var(--fi-white); }

/* ---------- 10. Section eyebrow ------------------------------------------ */
.fi-section-eyebrow {
  display: inline-flex;
  align-items: center;
  font-family: 'Outfit', sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fi-cyan);
  margin-bottom: 1rem;
}
.fi-section-eyebrow::before {
  content: '';
  display: inline-block;
  width: 2rem;
  height: 1px;
  background-color: var(--fi-cyan);
  margin-right: 0.85rem;
}

/* ---------- 11. Section title + lead ------------------------------------- */
.fi-section-title {
  font-size: clamp(2rem, 3.6vw, 3rem);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0 0 1.25rem;
}
.fi-section-title strong { font-weight: 700; }
.fi-section-lead {
  font-size: 1.125rem;
  font-weight: 300;
  color: var(--fi-gray);
  line-height: 1.6;
  max-width: 40rem;
  margin: 0;
}

/* ---------- 12. Service card --------------------------------------------- */
.fi-service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 2rem 1.75rem 1.75rem;
  background-color: var(--fi-white);
  border: 1px solid var(--fi-gray-light);
  border-radius: 2px;
  overflow: hidden;
  transition: transform 260ms ease,
              border-color 260ms ease,
              box-shadow 260ms ease;
}
.fi-service-card::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, transparent 50%, var(--fi-cyan) 50%);
  opacity: 0;
  transition: opacity 260ms ease;
}
.fi-service-card:hover {
  transform: translateY(-4px);
  border-color: var(--fi-blue);
  box-shadow: 0 22px 44px -22px rgba(16, 46, 92, 0.28);
}
.fi-service-card:hover::before { opacity: 1; }

/* ---------- 13. Service icon --------------------------------------------- */
.fi-service-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 2px;
  background-color: rgba(30, 77, 156, 0.08);
  color: var(--fi-blue);
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
  transition: background-color 260ms ease, color 260ms ease;
}
.fi-service-card:hover .fi-service-icon {
  background-color: var(--fi-blue);
  color: var(--fi-white);
}
.fi-service-card h3 {
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--fi-slate-dark);
  margin: 0 0 0.75rem;
}
.fi-service-card p {
  font-size: 0.95rem;
  color: var(--fi-gray);
  line-height: 1.55;
  margin: 0 0 1.25rem;
}

/* ---------- 14. Service capability chips --------------------------------- */
.fi-service-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0;
  margin: auto 0 0;
  list-style: none;
}
.fi-service-list li {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fi-blue);
  background-color: rgba(30, 77, 156, 0.06);
  border-radius: 2px;
  padding: 0.32rem 0.6rem;
}

/* ---------- 15. Capabilities band — inverted diagonal-plane composition - */
.fi-capabilities {
  position: relative;
  overflow: hidden;
  padding: 6rem 0;
  background-color: var(--fi-slate-dark);
  color: var(--fi-white);
  isolation: isolate;
}
.fi-capabilities::before,
.fi-capabilities::after {
  content: '';
  position: absolute;
  top: -12%;
  bottom: -12%;
  transform: skewX(-12deg);
  pointer-events: none;
}
.fi-capabilities::before {        /* blue plane on the right */
  right: -12%;
  width: 58%;
  background-color: var(--fi-blue);
  z-index: 1;
}
.fi-capabilities::after {         /* cyan stripe ~30% from right */
  right: 30%;
  width: 0.45rem;
  background-color: var(--fi-cyan);
  box-shadow: 0 0 36px rgba(30, 144, 224, 0.55),
              0 0 14px rgba(30, 144, 224, 0.7);
  z-index: 2;
}
.fi-capabilities > .container { position: relative; z-index: 3; }
.fi-capabilities .fi-section-title { color: var(--fi-white); }

/* ---------- 16. Capability item ------------------------------------------ */
.fi-capability-item {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  transition: padding-left 260ms ease;
}
.fi-capability-item:last-child { border-bottom: none; }
.fi-capability-item:hover { padding-left: 0.6rem; }
.fi-capability-number {
  flex: 0 0 auto;
  min-width: 2rem;
  font-family: 'Outfit', sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--fi-cyan);
}
.fi-capability-name {
  font-size: 1.125rem;
  font-weight: 400;
  color: var(--fi-white);
}

/* ---------- 17. Brand logo strip ----------------------------------------- */
.fi-brands { padding: 4rem 0; background-color: var(--fi-white); }
.fi-brands img {
  max-height: 50px;
  width: auto;
  filter: grayscale(100%);
  opacity: 0.55;
  transition: filter 260ms ease, opacity 260ms ease;
}
.fi-brands img:hover {
  filter: grayscale(0);
  opacity: 1;
}
/* Per-logo height tuning — equalize visual mass across mismatched aspects */
.fi-brands img[src*="MikroTik"]           { max-height: 36px; }
.fi-brands img[src*="Microsoft_365"]      { max-height: 36px; }
.fi-brands img[src*="Ubiquiti"]           { max-height: 44px; }
.fi-brands img[src*="Gsuite"]             { max-height: 44px; }
.fi-brands img[src*="Oracle_Hospitality"] { max-height: 50px; }
.fi-brands img[src*="Matrix_pbx"]         { max-height: 52px; }
.fi-brands img[src*="Ruckus_Wireless"]    { max-height: 64px; }
.fi-brands img[src*="Hotelkey"]           { max-height: 72px; }

/* ---------- 18. Portfolio item — overlay reveal -------------------------- */
.fi-portfolio-item {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 2px;
  background-color: var(--fi-slate-dark);
  color: var(--fi-white);
  text-decoration: none;
}
.fi-portfolio-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 420ms ease;
}
.fi-portfolio-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
              rgba(16, 46, 92, 0.0) 35%,
              rgba(16, 46, 92, 0.85) 100%);
  opacity: 0;
  transition: opacity 420ms ease;
}
.fi-portfolio-item:hover img      { transform: scale(1.05); }
.fi-portfolio-item:hover::after   { opacity: 1; }
.fi-portfolio-meta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 1.25rem 1.5rem;
  transform: translateY(12px);
  opacity: 0;
  transition: transform 420ms ease, opacity 420ms ease;
}
.fi-portfolio-item:hover .fi-portfolio-meta {
  transform: translateY(0);
  opacity: 1;
}
.fi-portfolio-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fi-cyan-bright);
  margin-bottom: 0.3rem;
}
.fi-portfolio-title {
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--fi-white);
  margin: 0;
}

/* ---------- 19. Filter buttons ------------------------------------------- */
.fi-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 2.5rem;
}
.fi-filter-btn {
  display: inline-block;
  padding: 0.5rem 1.25rem;
  font-family: 'Outfit', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fi-slate-dark);
  background-color: transparent;
  border: 1px solid var(--fi-gray-light);
  border-radius: 2px;
  cursor: pointer;
  text-decoration: none;
  transition: color 200ms ease,
              background-color 200ms ease,
              border-color 200ms ease;
}
.fi-filter-btn:hover {
  border-color: var(--fi-blue);
  color: var(--fi-blue);
}
.fi-filter-btn.active,
.fi-filter-btn.active:hover {
  background-color: var(--fi-blue);
  border-color: var(--fi-blue);
  color: var(--fi-white);
}

/* ---------- 20. Testimonial card ----------------------------------------- */
.fi-testimonial {
  position: relative;
  padding: 1.75rem 1.5rem 1.5rem 1.75rem;
  background-color: var(--fi-white);
  border: 1px solid var(--fi-gray-light);
  border-left: 3px solid var(--fi-cyan);
  border-radius: 2px;
  height: 100%;
}
.fi-testimonial-quote {
  font-style: italic;
  font-weight: 300;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--fi-slate-dark);
  margin: 0 0 1.25rem;
}
.fi-testimonial-name {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--fi-slate-dark);
  margin: 0;
}
.fi-testimonial-role {
  display: block;
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--fi-gray);
  margin-top: 0.15rem;
}

/* ---------- 21. Contact card --------------------------------------------- */
.fi-contact-card {
  text-align: center;
  padding: 2rem 1.25rem;
  background-color: var(--fi-white);
  border: 1px solid var(--fi-gray-light);
  border-radius: 2px;
  height: 100%;
  transition: border-color 260ms ease, transform 260ms ease;
}
.fi-contact-card:hover {
  border-color: var(--fi-blue);
  transform: translateY(-2px);
}
.fi-contact-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 2px;
  background-color: rgba(30, 144, 224, 0.10);
  color: var(--fi-cyan);
  font-size: 1.35rem;
  margin-bottom: 1.25rem;
}
.fi-contact-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fi-gray);
  margin-bottom: 0.4rem;
}
.fi-contact-value {
  display: block;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--fi-slate-dark);
  text-decoration: none;
  transition: color 200ms ease;
}
.fi-contact-value:hover { color: var(--fi-blue); }

/* ---------- 22. Button base ---------------------------------------------- */
.btn {
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  letter-spacing: 0.03em;
  border-radius: 2px;
  padding: 0.7rem 1.5rem;
  transition: transform 200ms ease,
              background-color 200ms ease,
              border-color 200ms ease,
              color 200ms ease,
              box-shadow 200ms ease;
}
.btn:focus,
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(30, 144, 224, 0.25);
}

/* ---------- 23. btn-primary (cyan accent CTA) ---------------------------- */
.btn-primary {
  background-color: var(--fi-cyan);
  border-color: var(--fi-cyan);
  color: var(--fi-white);
  box-shadow: 0 4px 18px -6px rgba(30, 144, 224, 0.55);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:focus-visible,
.btn-primary:active {
  background-color: var(--fi-cyan-bright) !important;
  border-color: var(--fi-cyan-bright) !important;
  color: var(--fi-white) !important;
  transform: translateY(-2px);
  box-shadow: 0 9px 24px -7px rgba(30, 144, 224, 0.7);
}

/* ---------- 24. btn-soft-white ------------------------------------------- */
.btn-soft-white {
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.6);
  color: var(--fi-white);
}
.btn-soft-white:hover,
.btn-soft-white:focus,
.btn-soft-white:focus-visible {
  background-color: var(--fi-white);
  border-color: var(--fi-white);
  color: var(--fi-slate-dark);
}

/* ---------- 25. btn-dark-solid ------------------------------------------- */
.btn-dark-solid {
  background-color: var(--fi-slate-dark);
  border-color: var(--fi-slate-dark);
  color: var(--fi-white);
}
.btn-dark-solid:hover,
.btn-dark-solid:focus,
.btn-dark-solid:focus-visible {
  background-color: var(--fi-slate);
  border-color: var(--fi-slate);
  color: var(--fi-white);
  transform: translateY(-2px);
}

/* ---------- 26. Navbar — transparent on hero, blurred white when scrolled
   (main.js adds `.scrolled` to `.site-navbar`, not `.site-navbar-scrolled`) */
.site-navbar {
  background-color: transparent !important;
  box-shadow: none !important;
  padding-top: 1rem;
  padding-bottom: 1rem;
  transition: background-color 260ms ease,
              box-shadow 260ms ease,
              backdrop-filter 260ms ease;
}
.site-navbar.scrolled {
  background-color: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 6px 24px -12px rgba(16, 46, 92, 0.15) !important;
}

/* ---------- 27. Nav links — cyan underline reveal ------------------------ */
.site-navbar .nav-link {
  position: relative;
  font-family: 'Outfit', sans-serif;
  font-weight: 400;
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  color: var(--fi-white);
  padding: 0.5rem 0.9rem;
  transition: color 200ms ease;
}
.site-navbar .nav-link::after {
  content: '';
  position: absolute;
  left: 0.9rem;
  right: 0.9rem;
  bottom: 0.35rem;
  height: 1px;
  background-color: var(--fi-cyan);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 260ms ease;
}
.site-navbar .nav-link:hover,
.site-navbar .nav-link.active { color: var(--fi-cyan-bright); }
.site-navbar .nav-link:hover::after,
.site-navbar .nav-link.active::after { transform: scaleX(1); }
.site-navbar.scrolled .nav-link        { color: var(--fi-slate-dark); }
.site-navbar.scrolled .nav-link:hover,
.site-navbar.scrolled .nav-link.active { color: var(--fi-blue); }

/* ---------- 28. Brand wordmark ------------------------------------------- */
.fi-brand {
  font-family: 'Outfit', sans-serif;
  font-weight: 300;
  font-size: 1.2rem;
  letter-spacing: 0.02em;
  color: var(--fi-white);
  text-decoration: none;
  padding: 0;
  transition: color 260ms ease;
}
.fi-brand strong { font-weight: 700; }
.fi-brand strong::after { content: ""; display: inline-block; width: 0.18em; }
.fi-brand:hover { color: var(--fi-cyan-bright); }
.site-navbar.scrolled .fi-brand        { color: var(--fi-slate-dark); }
.site-navbar.scrolled .fi-brand:hover  { color: var(--fi-blue); }

/* ---------- 29. Mobile toggler — clean 3-bar ----------------------------- */
.site-navbar .navbar-toggler-alternative {
  border: none;
  background: transparent;
  padding: 0.5rem;
  cursor: pointer;
}
.site-navbar .navbar-toggler-alternative-icon {
  display: block;
  width: 24px;
  height: 18px;
  position: relative;
}
.site-navbar .navbar-toggler-alternative-icon span,
.site-navbar .navbar-toggler-alternative-icon span::before,
.site-navbar .navbar-toggler-alternative-icon span::after {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--fi-white);
  border-radius: 2px;
  transition: background-color 260ms ease, transform 260ms ease;
}
.site-navbar .navbar-toggler-alternative-icon span {
  position: absolute;
  top: 50%;
  margin-top: -1px;
}
.site-navbar .navbar-toggler-alternative-icon span::before,
.site-navbar .navbar-toggler-alternative-icon span::after {
  content: '';
  position: absolute;
  left: 0;
}
.site-navbar .navbar-toggler-alternative-icon span::before { top: -7px; }
.site-navbar .navbar-toggler-alternative-icon span::after  { top:  7px; }
.site-navbar.scrolled .navbar-toggler-alternative-icon span,
.site-navbar.scrolled .navbar-toggler-alternative-icon span::before,
.site-navbar.scrolled .navbar-toggler-alternative-icon span::after {
  background-color: var(--fi-slate-dark);
}

/* ---------- Footer (brand-consistent colors) ----------------------------- */
.fi-footer {
  background-color: var(--fi-slate-dark);
  color: rgba(255, 255, 255, 0.7);
  padding: 4rem 0 2rem;
}
.fi-footer .fi-brand        { color: var(--fi-white); font-size: 1.5rem; }
.fi-footer .fi-brand:hover  { color: var(--fi-cyan-bright); }
.fi-footer a                { color: rgba(255, 255, 255, 0.7); text-decoration: none; }
.fi-footer a:hover          { color: var(--fi-cyan-bright); }
.fi-footer-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 2px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.85);
  transition: color 200ms ease, border-color 200ms ease, background-color 200ms ease;
}
.fi-footer-social:hover {
  background-color: var(--fi-cyan);
  border-color: var(--fi-cyan);
  color: var(--fi-white);
}
.fi-footer-rule {
  border: 0;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.08);
  margin: 2.5rem 0 1.5rem;
}

/* ---------- About credentials list (cyan left-border accents) ----------- */
.fi-credentials { margin: 0; }
.fi-credentials dt {
  font-family: 'Outfit', sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--fi-slate-dark);
  padding-left: 0.85rem;
  border-left: 2px solid var(--fi-cyan);
  margin-top: 1.25rem;
}
.fi-credentials dt:first-child { margin-top: 0; }
.fi-credentials dd {
  font-size: 0.95rem;
  color: var(--fi-gray);
  padding-left: 0.85rem;
  margin: 0.25rem 0 0;
  line-height: 1.55;
}

/* ---------- 30a. Navbar collapse mode (matches navbar-expand-lg = <992px) - */
@media (max-width: 991.98px) {
  .site-navbar .navbar-collapse {
    background-color: var(--fi-white);
    margin-top: 0.5rem;
    padding: 1rem;
    border-radius: 2px;
    box-shadow: 0 12px 30px -16px rgba(16, 46, 92, 0.25);
  }
  /* Force readable colors inside the white collapse, regardless of navbar
     transparent / scrolled state */
  .site-navbar .navbar-collapse .nav-link        { color: var(--fi-slate-dark); }
  .site-navbar .navbar-collapse .nav-link:hover,
  .site-navbar .navbar-collapse .nav-link.active { color: var(--fi-blue); }
  .site-navbar .navbar-collapse .nav-link::after { background-color: var(--fi-blue); }
}

/* ---------- 30b. Phone-size layout --------------------------------------- */
@media (max-width: 768px) {
  .fi-section              { padding: 4rem 0; }
  .fi-capabilities         { padding: 4rem 0; }
  .fi-capabilities::before { width: 75%; transform: skewX(-8deg); }
  .fi-capabilities::after  { right: 22%; transform: skewX(-8deg); }
}

/* ---------- 31. Hero entry animation ------------------------------------- */
@keyframes fiFadeUp {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.fi-hero-eyebrow,
.fi-hero h1,
.fi-hero .fi-tagline,
.fi-hero-subtitle,
.fi-hero-content .btn {
  animation: fiFadeUp 700ms ease both;
}
.fi-hero-eyebrow      { animation-delay: 0.10s; }
.fi-hero h1           { animation-delay: 0.20s; }
.fi-hero .fi-tagline  { animation-delay: 0.30s; }
.fi-hero-subtitle     { animation-delay: 0.40s; }
.fi-hero-content .btn { animation-delay: 0.50s; }

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

/* ---------- Third-party widget collision overrides ----------------------- */
/* Stack the back-to-top button ABOVE the 3CX live-chat bubble (vertically),
   with the chat bubble retaining its default bottom-right corner slot.
   - margin: 0 kills Bootstrap's .mb-4 / .me-4 on the button so bottom/right
     are the only source of truth.
   - z-index: 1040 sits above page content (BS navbar is 1030) but below the
     3CX widget (~9999+), so the chat naturally wins any z-overlap in its
     own slot while back-to-top reads cleanly in the slot above. */
.btn-back-to-top {
  bottom: 90px !important;
  right: 1.5rem !important;
  margin: 0 !important;
  z-index: 1040 !important;
}

@media (max-width: 768px) {
  .btn-back-to-top {
    bottom: 80px !important;
    right: 1rem !important;
  }
}

/* ---------- Track Record stat cards ------------------------------------- */
/* `var(--fi-font-display)` from the brief isn't defined in this file; using
   the literal 'Outfit' family that the rest of brand.css already uses. */
.fi-stat {
  padding: 2rem 1rem;
}

.fi-stat-number {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  line-height: 1;
  color: var(--fi-cyan);
  margin-bottom: 0.75rem;
  letter-spacing: -0.02em;
}

.fi-stat-label {
  font-size: 0.95rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.4;
}

@media (max-width: 768px) {
  .fi-stat {
    padding: 1rem 0.5rem;
  }
}

/* ---------- FAQ accordion — clearer separation between Q and A ---------- */
.fi-faq {
  border-top: 2px solid var(--fi-cyan);
}

.fi-faq-item {
  border-bottom: 1px solid var(--fi-gray-light);
  padding: 0;
  background: var(--fi-white);
  transition: background-color 0.2s ease;
}

.fi-faq-item[open] {
  background: var(--fi-off-white);
}

.fi-faq-question {
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--fi-slate-dark);
  padding: 1.5rem 3rem 1.5rem 1.5rem;
  cursor: pointer;
  list-style: none;
  position: relative;
  transition: color 0.2s ease;
  letter-spacing: -0.005em;
  line-height: 1.4;
}

.fi-faq-question::-webkit-details-marker { display: none; }

.fi-faq-question::after {
  content: '+';
  position: absolute;
  right: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.75rem;
  font-weight: 300;
  color: var(--fi-cyan);
  line-height: 1;
  transition: transform 0.3s ease;
}

.fi-faq-item[open] .fi-faq-question::after {
  transform: translateY(-50%) rotate(45deg);
}

.fi-faq-item[open] .fi-faq-question,
.fi-faq-question:hover {
  color: var(--fi-blue);
}

.fi-faq-answer {
  padding: 0 3rem 1.75rem 1.5rem;
  border-left: 3px solid var(--fi-cyan);
  margin-left: 0;
}

.fi-faq-answer p {
  font-family: 'Outfit', system-ui, sans-serif;
  font-weight: 300;
  font-size: 0.9375rem;
  color: var(--fi-gray);
  line-height: 1.7;
  margin-bottom: 0;
}

@media (max-width: 576px) {
  .fi-faq-question {
    font-size: 1rem;
    padding: 1.25rem 2.5rem 1.25rem 1rem;
  }
  .fi-faq-answer {
    padding: 0 1rem 1.5rem 1rem;
  }
  .fi-faq-question::after {
    right: 1rem;
    font-size: 1.5rem;
  }
}

/* ---------- Contact form ------------------------------------------------- */
.fi-contact-heading {
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  font-size: 1.25rem;
  color: var(--fi-slate-dark);
  margin-bottom: 1.5rem;
}

.fi-contact-form .form-control {
  border-radius: 2px;
  border: 1px solid var(--fi-gray-light);
  padding: 0.75rem 1rem;
  font-size: 0.95rem;
  font-family: 'Outfit', sans-serif;
  background: var(--fi-white);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.fi-contact-form .form-control:focus {
  border-color: var(--fi-cyan);
  box-shadow: 0 0 0 3px rgba(30, 144, 224, 0.15);
  outline: none;
}

.fi-form-label {
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--fi-slate-dark);
  margin-bottom: 0.4rem;
  letter-spacing: 0.02em;
}

.fi-required {
  color: var(--fi-cyan);
}

/* Honeypot — hidden from humans, visible to bots */
.fi-honeypot,
.fi-honeypot * {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.fi-form-status {
  font-size: 0.9rem;
  min-height: 1.5rem;
}

.fi-form-status.is-success {
  color: #15803D;
  font-weight: 500;
}

.fi-form-status.is-error {
  color: #B91C1C;
  font-weight: 500;
}

.fi-contact-info .fi-contact-card {
  margin-bottom: 1rem;
  padding: 1.25rem;
}

/* ============================================================
   FAQ — Aggressive override (loaded last, wins specificity)
   ============================================================ */
section#faq .fi-faq {
  border-top: 2px solid var(--fi-cyan) !important;
  margin-top: 2rem;
}

section#faq .fi-faq-item {
  display: block !important;
  border-bottom: 1px solid var(--fi-gray-light) !important;
  background: var(--fi-white) !important;
  padding: 0 !important;
  margin: 0 !important;
  transition: background-color 0.2s ease;
}

section#faq .fi-faq-item[open] {
  background: var(--fi-off-white) !important;
}

section#faq .fi-faq-question {
  display: block !important;
  font-family: 'Outfit', system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: 1.0625rem !important;
  color: #1F2937 !important;
  background: transparent !important;
  padding: 1.5rem 3rem 1.5rem 1.5rem !important;
  margin: 0 !important;
  cursor: pointer !important;
  list-style: none !important;
  position: relative !important;
  transition: color 0.2s ease;
  letter-spacing: -0.005em;
  line-height: 1.4 !important;
  outline: none;
}

section#faq .fi-faq-question::-webkit-details-marker,
section#faq .fi-faq-question::marker {
  display: none !important;
  content: '' !important;
}

section#faq .fi-faq-question::after {
  content: '+' !important;
  position: absolute !important;
  right: 1.5rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 1.75rem !important;
  font-weight: 300 !important;
  color: #1E90E0 !important;
  line-height: 1 !important;
  transition: transform 0.3s ease;
}

section#faq .fi-faq-item[open] .fi-faq-question::after {
  transform: translateY(-50%) rotate(45deg) !important;
}

section#faq .fi-faq-item[open] .fi-faq-question {
  color: #1E4D9C !important;
}

section#faq .fi-faq-question:hover {
  color: #1E4D9C !important;
}

section#faq .fi-faq-answer {
  display: block !important;
  background: transparent !important;
  padding: 0 3rem 1.75rem 1.5rem !important;
  border-left: 3px solid #1E90E0 !important;
  margin: 0 !important;
}

section#faq .fi-faq-answer p {
  font-family: 'Outfit', system-ui, sans-serif !important;
  font-weight: 300 !important;
  font-size: 0.9375rem !important;
  color: #6B7280 !important;
  line-height: 1.7 !important;
  margin: 0 !important;
}

@media (max-width: 576px) {
  section#faq .fi-faq-question {
    font-size: 1rem !important;
    padding: 1.25rem 2.5rem 1.25rem 1rem !important;
  }
  section#faq .fi-faq-answer {
    padding: 0 1rem 1.5rem 1rem !important;
  }
  section#faq .fi-faq-question::after {
    right: 1rem !important;
    font-size: 1.5rem !important;
  }
}

/* ============================================================
   Contact form status messages — high-visibility success/error
   ============================================================ */
#contactStatus {
  display: block;
  min-height: 1.5rem;
  margin-top: 1rem;
  padding: 0;
  font-size: 0.95rem;
  font-weight: 500;
  font-family: 'Outfit', system-ui, sans-serif;
  opacity: 0;
  transition: opacity 0.3s ease;
}

#contactStatus:not(:empty) {
  opacity: 1;
  padding: 1rem 1.25rem;
  border-radius: 2px;
  border-left: 4px solid;
}

#contactStatus.is-success {
  background: #ECFDF5 !important;
  color: #065F46 !important;
  border-left-color: #10B981 !important;
}

#contactStatus.is-error {
  background: #FEF2F2 !important;
  color: #991B1B !important;
  border-left-color: #DC2626 !important;
}

/* Per-field validation errors (inline, below the offending input) */
.fi-contact-form .form-control.is-invalid {
  border-color: #DC2626 !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15) !important;
}

.fi-contact-form .fi-field-error {
  color: #DC2626;
  font-size: 0.85rem;
  font-weight: 500;
  margin-top: 0.35rem;
  font-family: 'Outfit', system-ui, sans-serif;
}

/* =============================================================================
   Legal / policy pages (privacy, cookie-policy) — body typography
   ============================================================================= */
.fi-legal-body {
  font-family: 'Outfit', system-ui, sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--fi-slate-dark);
}
.fi-legal-body h2 {
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--fi-slate-dark);
  letter-spacing: -0.005em;
  line-height: 1.3;
  margin: 2.5rem 0 0.85rem;
}
.fi-legal-body h2:first-child { margin-top: 0; }
.fi-legal-body h3 {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--fi-slate-dark);
  letter-spacing: 0;
  line-height: 1.3;
  margin: 1.75rem 0 0.6rem;
}
.fi-legal-body p {
  margin: 0 0 1rem;
  color: var(--fi-slate-dark);
}
.fi-legal-body ul {
  padding-left: 1.5rem;
  margin: 0 0 1rem;
}
.fi-legal-body ul li {
  margin-bottom: 0.5rem;
  color: var(--fi-slate-dark);
}
.fi-legal-body a {
  color: var(--fi-blue);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color 200ms ease;
}
.fi-legal-body a:hover { color: var(--fi-cyan); }
.fi-legal-body strong {
  font-weight: 600;
  color: var(--fi-slate-dark);
}
.fi-legal-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.875em;
  padding: 0.1em 0.35em;
  background: var(--fi-off-white);
  border-radius: 2px;
  color: var(--fi-slate-dark);
}
.fi-legal-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0 2rem;
  font-size: 0.9rem;
}
.fi-legal-body th,
.fi-legal-body td {
  text-align: left;
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid var(--fi-gray-light);
  vertical-align: top;
  color: var(--fi-slate-dark);
}
.fi-legal-body th {
  background: var(--fi-off-white);
  font-weight: 600;
  letter-spacing: 0.02em;
  font-size: 0.78rem;
  text-transform: uppercase;
  border-bottom: 2px solid var(--fi-cyan);
}
@media (max-width: 576px) {
  .fi-legal-body table { font-size: 0.85rem; }
  .fi-legal-body th,
  .fi-legal-body td { padding: 0.5rem 0.6rem; }
}

/* =============================================================================
   Klaro consent banner — brand override
   - Equal visual weight on ALL THREE buttons (no dark patterns per CCPA/CPRA).
   - Identical padding, font, min-width, height, border thickness, hover lift.
   - Only color/role differ between Accept All / Decline All / Customize.
   - Scoped via additionalClass:'fi-klaro' in klaro-config.js so nothing else
     on the page is touched.
   ============================================================================= */

/* ---------- Banner container --------------------------------------------- */
/* Klaro v0.7 ships a default `.klaro .cookie-notice { right: 20px; bottom: 20px;
   max-width: 400px }` rule on desktop, so we explicitly reset top/right to
   `auto` to prevent the inherited right:20px from fighting our left:50% +
   transform centering. max-height + overflow-y caps the banner so it can never
   take over the screen even with very long content. */
.klaro.fi-klaro .cookie-notice,
.fi-klaro .cookie-notice {
  position: fixed !important;
  top: auto !important;
  right: auto !important;
  bottom: 1rem !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: calc(100% - 2rem) !important;
  max-width: 1100px !important;
  height: auto !important;
  max-height: calc(100vh - 2rem) !important;
  overflow-y: auto !important;
  margin: 0 !important;
  padding: 1.25rem 1.5rem !important;
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
  background: var(--fi-white) !important;
  color: var(--fi-slate-dark) !important;
  border: none !important;
  border-top: 3px solid var(--fi-cyan) !important;
  border-radius: 2px !important;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.08) !important;
  font-family: 'Outfit', system-ui, sans-serif !important;
  z-index: 9999 !important;
  box-sizing: border-box;
}

/* Inner layout: body content takes the remaining width, button group hugs
   its content on the right. Desktop only — mobile media query stacks them. */
.fi-klaro .cookie-notice > .cn-body {
  flex: 1 1 320px;
  min-width: 0;
  margin: 0 !important;
}
.fi-klaro .cookie-notice > .cn-ok,
.fi-klaro .cookie-notice .cn-buttons {
  flex: 0 0 auto;
  margin: 0 !important;
}

/* Trust Klaro's own hide class — do NOT force display on .cookie-modal.
   Klaro toggles .cookie-notice-hidden on the notice itself; honor it. */
.fi-klaro .cookie-notice.cookie-notice-hidden {
  display: none !important;
}

/* ---------- Banner content text ------------------------------------------ */
.fi-klaro .cookie-notice .cn-body,
.fi-klaro .cookie-notice-content {
  color: var(--fi-slate-dark) !important;
  font-family: 'Outfit', system-ui, sans-serif !important;
}
.fi-klaro .cookie-notice h1,
.fi-klaro .cookie-notice h2,
.fi-klaro .cookie-notice .cn-body h2 {
  color: var(--fi-slate-dark) !important;
  font-family: 'Outfit', system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: 1.1rem !important;
  line-height: 1.3 !important;
  margin: 0 0 0.5rem !important;
}
.fi-klaro .cookie-notice p,
.fi-klaro .cookie-notice .cn-body p,
.fi-klaro .cookie-notice-content p {
  color: var(--fi-slate-dark) !important;
  font-family: 'Outfit', system-ui, sans-serif !important;
  font-weight: 400 !important;
  font-size: 0.95rem !important;
  line-height: 1.5 !important;
  margin: 0 0 1rem !important;
}
.fi-klaro .cookie-notice a {
  color: var(--fi-blue) !important;
  text-decoration: none !important;
}
.fi-klaro .cookie-notice a:hover {
  text-decoration: underline !important;
  text-underline-offset: 2px;
}

/* ---------- Button container — flex layout, even spacing -----------------
   After JS hoists the .cn-learn-more link into here, this container holds
   ALL THREE actions as flex children. align-items:center vertically aligns
   the link's text baseline with the buttons. */
.fi-klaro .cn-buttons,
.fi-klaro .cookie-notice .cn-buttons {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center !important;
  gap: 0.5rem !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ---------- ALL THREE BUTTONS — identical sizing (CCPA equal weight) ---- */
/* Klaro renders "Customize Settings" as <a class="cm-link cn-learn-more">,
   not a <button>. We have to style the <a> like a button (kill the default
   underline + blue link color) so all three sit identically in the row. */
.fi-klaro .cn-buttons .cm-btn,
.fi-klaro .cookie-modal .cm-btn,
.fi-klaro .cm-btn,
.fi-klaro button.cn-decline,
.fi-klaro button.cn-learn-more,
.fi-klaro a.cn-learn-more,
.fi-klaro .cm-link,
.fi-klaro .cm-link.cn-learn-more,
.fi-klaro .cn-decline,
.fi-klaro .cn-learn-more {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 140px !important;
  height: auto !important;
  padding: 0.75rem 1.5rem !important;
  margin: 0 !important;
  font-family: 'Outfit', system-ui, sans-serif !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  line-height: 1.2 !important;
  text-transform: none !important;
  text-decoration: none !important;
  border-radius: 2px !important;
  border-width: 1px !important;
  border-style: solid !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box;
}

/* ---------- Accept All — cyan solid --------------------------------------
   The Accept button is <button class="cm-btn cm-btn-success">; we do NOT
   target .cn-ok here because Klaro v0.7 uses .cn-ok as a WRAPPER DIV around
   the link + .cn-buttons, not on the button itself. Styling .cn-ok as a
   button would shape the wrapper, not the action. */
.fi-klaro button.cn-ok,
.fi-klaro .cm-btn-success,
.fi-klaro .cm-btn.cm-btn-success,
.fi-klaro .cm-btn-accept-all {
  background: var(--fi-cyan) !important;
  border-color: var(--fi-cyan) !important;
  color: var(--fi-white) !important;
}
.fi-klaro button.cn-ok:hover,
.fi-klaro .cm-btn-success:hover,
.fi-klaro .cm-btn.cm-btn-success:hover,
.fi-klaro .cm-btn-accept-all:hover {
  background: var(--fi-cyan-bright) !important;
  border-color: var(--fi-cyan-bright) !important;
  color: var(--fi-white) !important;
  transform: translateY(-1px) !important;
}

/* ---------- .cn-ok wrapper ----------------------------------------------
   An inline script at the bottom of each page hoists the
   <a class="cn-learn-more"> OUT of .cn-ok and INTO .cn-buttons (see
   "Klaro DOM restructure" script) so all three actions sit as siblings in
   the same flex container. After that move, .cn-ok only contains
   .cn-buttons, so we collapse the wrapper with display:contents — .cn-buttons
   becomes the direct flex child of .cookie-notice. */
.fi-klaro .cookie-notice .cn-ok {
  display: contents !important;
}

/* ---------- Decline All — white with solid blue outline -----------------
   Klaro v0.7 uses class="cm-btn cm-btn-danger cn-decline" on the decline
   <button>, so we MUST target .cm-btn-danger or its default red leaks in. */
.fi-klaro .cn-decline,
.fi-klaro button.cn-decline,
.fi-klaro .cm-btn-decline,
.fi-klaro .cm-btn.cm-btn-decline,
.fi-klaro .cm-btn-danger,
.fi-klaro .cm-btn.cm-btn-danger,
.fi-klaro button.cm-btn-danger {
  background: var(--fi-white) !important;
  border-color: var(--fi-blue) !important;
  color: var(--fi-blue) !important;
}
.fi-klaro .cn-decline:hover,
.fi-klaro button.cn-decline:hover,
.fi-klaro .cm-btn-decline:hover,
.fi-klaro .cm-btn.cm-btn-decline:hover,
.fi-klaro .cm-btn-danger:hover,
.fi-klaro .cm-btn.cm-btn-danger:hover,
.fi-klaro button.cm-btn-danger:hover {
  background: var(--fi-blue) !important;
  border-color: var(--fi-blue) !important;
  color: var(--fi-white) !important;
  transform: translateY(-1px) !important;
}

/* ---------- Customize Settings — white with solid slate outline ---------
   In Klaro v0.7 this is <a class="cm-link cn-learn-more">, NOT a <button>,
   so include the link variants to override default link color/underline. */
.fi-klaro .cn-learn-more,
.fi-klaro button.cn-learn-more,
.fi-klaro a.cn-learn-more,
.fi-klaro .cm-link.cn-learn-more,
.fi-klaro .cm-btn-info,
.fi-klaro .cm-btn.cm-btn-info,
.fi-klaro .cm-btn-learn-more {
  background: var(--fi-white) !important;
  border-color: var(--fi-slate-dark) !important;
  color: var(--fi-slate-dark) !important;
  text-decoration: none !important;
}
.fi-klaro .cn-learn-more:hover,
.fi-klaro button.cn-learn-more:hover,
.fi-klaro a.cn-learn-more:hover,
.fi-klaro .cm-link.cn-learn-more:hover,
.fi-klaro .cm-btn-info:hover,
.fi-klaro .cm-btn.cm-btn-info:hover,
.fi-klaro .cm-btn-learn-more:hover {
  background: var(--fi-slate-dark) !important;
  border-color: var(--fi-slate-dark) !important;
  color: var(--fi-white) !important;
  text-decoration: none !important;
  transform: translateY(-1px) !important;
}

/* ---------- Modal — same white-with-cyan-top look ------------------------ */
.fi-klaro .cookie-modal,
.fi-klaro .cm-modal {
  font-family: 'Outfit', system-ui, sans-serif !important;
  color: var(--fi-slate-dark) !important;
}
.fi-klaro .cookie-modal .cm-modal,
.fi-klaro .cm-modal .cm-modal-inner,
.fi-klaro .cm-modal {
  background: var(--fi-white) !important;
  color: var(--fi-slate-dark) !important;
  border-top: 3px solid var(--fi-cyan) !important;
  border-radius: 2px !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25) !important;
}
.fi-klaro .cm-modal .cm-header h1,
.fi-klaro .cm-modal .cm-header h2,
.fi-klaro .cookie-modal h1,
.fi-klaro .cookie-modal h2 {
  color: var(--fi-slate-dark) !important;
  font-family: 'Outfit', system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: 1.25rem !important;
}
.fi-klaro .cm-modal .cm-header p,
.fi-klaro .cookie-modal p {
  color: var(--fi-slate-dark) !important;
  font-family: 'Outfit', system-ui, sans-serif !important;
  font-weight: 400 !important;
}
.fi-klaro .cm-modal .cm-services .cm-service,
.fi-klaro .cm-modal .cm-purposes .cm-purpose,
.fi-klaro .cm-services .cm-service {
  border-color: var(--fi-gray-light) !important;
  background: var(--fi-white) !important;
}
.fi-klaro .cm-modal .cm-services .cm-service h2,
.fi-klaro .cm-modal .cm-purposes .cm-purpose h2,
.fi-klaro .cm-services .cm-service .cm-service-title {
  color: var(--fi-slate-dark) !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
}
.fi-klaro .cm-modal .cm-services .cm-service p,
.fi-klaro .cm-services .cm-service p {
  color: var(--fi-gray) !important;
  font-size: 0.875rem !important;
}

/* ---------- Toggle switches — cyan on, gray-light off ------------------- */
.fi-klaro .cm-list-input + .cm-list-label .cm-switch,
.fi-klaro .cm-list-input + .cm-list-label .slider,
.fi-klaro .cm-switch .slider {
  background: var(--fi-gray-light) !important;
}
.fi-klaro .cm-list-input:checked + .cm-list-label .cm-switch,
.fi-klaro .cm-list-input:checked + .cm-list-label .slider,
.fi-klaro .cm-list-input.required:checked + .cm-list-label .slider,
.fi-klaro .cm-list-input.required + .cm-list-label .slider {
  background: var(--fi-cyan) !important;
}
.fi-klaro .cm-list-input + .cm-list-label .slider::before,
.fi-klaro .cm-switch .slider::before {
  background: var(--fi-white) !important;
}
.fi-klaro .cm-list-input:focus + .cm-list-label .slider {
  box-shadow: 0 0 0 3px rgba(30, 144, 224, 0.25) !important;
}

/* ---------- "Save My Choices" in modal — styled like Decline All -------- */
.fi-klaro .cm-modal .cm-btn-accept,
.fi-klaro .cm-modal .cm-btn-accept-selected,
.fi-klaro .cm-btn-accept,
.fi-klaro .cm-btn-accept-selected {
  background: var(--fi-white) !important;
  border-color: var(--fi-blue) !important;
  color: var(--fi-blue) !important;
}
.fi-klaro .cm-modal .cm-btn-accept:hover,
.fi-klaro .cm-modal .cm-btn-accept-selected:hover,
.fi-klaro .cm-btn-accept:hover,
.fi-klaro .cm-btn-accept-selected:hover {
  background: var(--fi-blue) !important;
  border-color: var(--fi-blue) !important;
  color: var(--fi-white) !important;
  transform: translateY(-1px) !important;
}

/* ---------- Powered-by — hidden via disablePoweredBy, belt+suspenders ---- */
.fi-klaro .cm-powered-by,
.fi-klaro .cookie-notice .cm-powered-by { display: none !important; }

/* ---------- Mobile (≤768px): flush bottom, stack content, full-width buttons */
@media (max-width: 768px) {
  .fi-klaro .cookie-notice {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    transform: none !important;
    padding: 1rem !important;
    border-radius: 0 !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.75rem !important;
  }
  .fi-klaro .cookie-notice > .cn-body { flex: none; }
  .fi-klaro .cookie-notice p,
  .fi-klaro .cookie-notice-content p,
  .fi-klaro .cookie-notice .cn-body p {
    font-size: 0.875rem !important;
  }
  /* .cn-ok is display:contents — its only child .cn-buttons is the actual
     flex container. Stack the three actions vertically on mobile. */
  .fi-klaro .cn-buttons {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.5rem !important;
  }
  .fi-klaro .cookie-notice .cm-btn,
  .fi-klaro .cookie-notice a.cn-learn-more,
  .fi-klaro .cookie-notice .cm-link.cn-learn-more,
  .fi-klaro .cn-decline,
  .fi-klaro .cn-learn-more {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
}

/* ---------- Footer Do Not Sell link --------------------------------------
   Inherits .fi-footer a treatment (rgba white 0.7, hover cyan-bright). */
.fi-footer-do-not-sell { cursor: pointer; }