/*-----------------------------------------------------------------------------------

    Carezyn UI layer
    Loaded after main.css. Everything here is additive, so it can be reviewed or
    dropped whole without touching the 360KB vendor stylesheet.

    Built from values measured off the reference sites rather than invented:

      Stripe    ink #061b31, muted #50617a, hairline #e5edf5, one signature
                accent (#533afd) carrying the whole page, h1 at weight 300,
                tracking -0.01em, 4px radii
      Linear    ground #08090a (near-black, not navy), type #f7f8f8 (off-white,
                not pure white), muted #8a8f98, surfaces built from
                rgba(255,255,255,0.02-0.08) over hairline borders rather than
                solid cards, h1 weight 510 at tracking -0.022em

    The lesson from both is restraint: one accent, light weight, tight
    tracking, small radii, hairline borders. Carezyn's accent is the logo
    green, so that is the single colour carried throughout.

    01. Tokens
    02. Typography
    03. Surfaces
    04. Hero
    05. Inverted panels
    06. Cards
    07. Buttons
    08. Navigation
    09. Accordion
    10. Counters & progress
    11. Forms
    12. Motion
    13. Reduced motion

-----------------------------------------------------------------------------------*/

/*----------------------------------------*/
/*  01. Tokens
/*----------------------------------------*/

:root {
  /* Ink and neutrals, measured off Stripe. The darkest text is a deep navy
     rather than black, which is why their pages feel soft but still crisp. */
  /* Measured off Nova Dental, an award-winning healthcare site: one near-black
     ink, with every lower level of hierarchy expressed as an opacity of that
     same colour rather than as a separate grey. That is what keeps a
     monochrome page feeling deliberate instead of washed out. */
  --cz-ink: #222326;
  --cz-ink-80: rgba(34, 35, 38, 0.80);
  --cz-ink-60: rgba(34, 35, 38, 0.60);
  --cz-ink-40: rgba(34, 35, 38, 0.40);
  --cz-hairline: #ededed;
  --cz-paper: #ffffff;
  --cz-paper-2: #f3f3f3;
  --cz-paper-tint: #f7f9f8;

  /* Inverted ground, measured off Linear. Near-black, not navy, with
     off-white type — pure white on pure black is harsher than either uses. */
  --cz-ground: #08090a;
  --cz-ground-2: #0f1011;
  --cz-on-ground: #f7f8f8;
  --cz-on-ground-muted: #8a8f98;
  --cz-surface: rgba(255, 255, 255, 0.04);
  --cz-surface-2: rgba(255, 255, 255, 0.07);
  --cz-surface-line: rgba(255, 255, 255, 0.10);

  /* One signature accent, Carezyn's own green, with a teal partner used only
     to give the gradient somewhere to travel. */
  --cz-accent-deep: #35611a;
  --cz-accent: #3f8f20;
  --cz-accent-bright: #56b22d;
  --cz-accent-soft: #eef6e9;
  --cz-accent-teal: #0c9a90;
  --cz-signature: linear-gradient(112deg, #3f8f20 0%, #56b22d 48%, #0c9a90 100%);

  /* Geometry. Both references stay tight; 18px rounding was the single
     biggest reason the previous pass read as a template. */
  --cz-r-sm: 3px;
  --cz-r-md: 7px;
  --cz-r-lg: 7px;

  /* Motion, within the published bands: hover 150-200ms, reveals 400-600ms. */
  --cz-t-hover: 180ms;
  --cz-t-state: 240ms;
  --cz-ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Shadows stay nearly invisible. The references separate surfaces with a
     hairline border, not a drop shadow. */
  --cz-shadow-sm: 0 1px 2px rgba(6, 27, 49, 0.04);
  --cz-shadow-md: 0 2px 4px rgba(6, 27, 49, 0.04), 0 10px 24px rgba(6, 27, 49, 0.06);
}

/*----------------------------------------*/
/*  02. Typography
/*----------------------------------------*/

/* Large, light and tightly tracked. Weight is the correction that matters
   most here — the previous pass set 700, where the references use 300-510. */
.section-title .title,
.banner-content .title,
.slider__content .title {
  font-size: clamp(2.4rem, 1.1rem + 4vw, 4.75rem);
  font-weight: 500;
  line-height: 0.94;
  letter-spacing: -0.042em;
}

.section-title .title strong,
.section-title .title b {
  font-weight: 600;
}

/* Solid ink, no gradient. The reference headline carries no colour at all —
   its weight comes from size, tracking and line-height. Gradient text was
   also the mechanism that blanked the counters, so it is gone from headings
   entirely rather than guarded. */
.section-title .title:not(.text-white) {
  color: var(--cz-ink);
}

/* One phrase set in italic serif, the way the reference lifts a single
   fragment of the headline out of the rest. Apply by wrapping that phrase
   in <em>. */
.section-title .title em,
.slider__content .title em {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.02em;
}

/* Eyebrow labels: small, spaced, quiet — never competing with the heading. */
.section-title .sub-title {
  position: relative;
  display: inline-block;
  padding-left: 38px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  /* Ink, not green. These labels sit on grounds that vary from white to a
     tinted bloom, and the green lands between 4.11 and 4.33 on the tinted
     ones — under 4.5 at 12px. The accent stays on the dash beside it, which
     carries no text, so colour is kept without risking legibility. */
  color: var(--cz-ink-80);
}

.section-title .sub-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 26px;
  height: 1px;
  background: var(--cz-accent);
}

/* Body copy: muted, and held to a readable measure. */
.section-title p,
.choose__content-five > p,
.services-content p,
.service-card p {
  color: var(--cz-ink-80);
  max-width: 62ch;
}

/*----------------------------------------*/
/*  03. Surfaces
/*----------------------------------------*/

.services-item,
.choose__box,
.card.collapse-custom,
.service-card {
  background: var(--cz-paper);
  border: 1px solid var(--cz-hairline);
  border-radius: var(--cz-r-md);
  box-shadow: none;
  transition: border-color var(--cz-t-hover) var(--cz-ease),
    box-shadow var(--cz-t-hover) var(--cz-ease),
    transform var(--cz-t-hover) var(--cz-ease);
}

/*----------------------------------------*/
/*  04. Hero
/*----------------------------------------*/

/* main.css puts mix-blend-mode: luminosity on this layer, which strips every
   bit of colour out of it and keeps only lightness. That one declaration is
   why the hero rendered grey, and why colour placed inside it vanished. */
.slider__area .slider__bg {
  mix-blend-mode: normal;
  opacity: 1;
}

/* A directional scrim, not a wash. The reference hero puts no colour over its
   photograph at all — it darkens only the corner the text sits in, so the
   image stays an image. This keeps the headline legible while letting the
   photograph carry whatever colour the hero has. */
.slider__area .slider__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(34, 35, 38, 0.86) 0%, rgba(34, 35, 38, 0.66) 34%, rgba(34, 35, 38, 0.20) 62%, rgba(34, 35, 38, 0.08) 100%),
    linear-gradient(to top, rgba(34, 35, 38, 0.45) 0%, transparent 42%);
  pointer-events: none;
}

.slider__area .slider__content {
  z-index: 3;
}

.slider__content .title {
  color: var(--cz-on-ground);
}

.slider__content p {
  color: rgba(247, 248, 248, 0.74);
  max-width: 56ch;
}

/* Hairline glass pill, the way both references treat an eyebrow on dark. */
.slider__content .sub-title {
  background: var(--cz-surface-2) !important;
  border: 1px solid var(--cz-surface-line);
  border-radius: 999px;
  backdrop-filter: blur(8px);
  font-size: 12px;
  letter-spacing: 0.17em;
  color: var(--cz-on-ground) !important;
}

/*----------------------------------------*/
/*  05. Inverted panels
/*----------------------------------------*/

/* main.css targets this with two classes (.counter-area.home-10), so the
   override has to match that specificity to take effect. */
.counter-area,
.counter-area.home-10,
.counter-area.home-9 {
  position: relative;
  overflow: hidden;
  background-color: var(--cz-ground);
  background-image: radial-gradient(52rem 26rem at 50% -30%, rgba(12, 154, 144, 0.16), transparent 64%);
}

.counter-area.home-10 .bg {
  background-color: transparent;
  background-image: linear-gradient(130deg, #0b1f18 0%, #0f2d22 54%, #0c9a90 220%);
}

.counter-area .counter-item {
  border-left: 1px solid var(--cz-surface-line);
  padding-left: 24px;
}

.counter-area .counter-item .title,
.counter-area .counter-item span,
.counter-area p {
  color: var(--cz-on-ground-muted);
}

/*----------------------------------------*/
/*  05a. Neuron field
/*----------------------------------------*/

/* Mount point for carezyn-neurons.js. The script reads its palette from the
   three custom properties below, so retheming the field never needs the
   JavaScript touched. */
.cz-neurons {
  --cz-neuron-node: rgba(86, 178, 45, 0.90);
  --cz-neuron-link: rgba(12, 154, 144, 0.34);
  --cz-neuron-signal: rgba(198, 255, 214, 0.95);

  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: auto;
  overflow: hidden;
}

/* The canvas itself must never intercept clicks on the copy above it; the
   container keeps pointer events only so the field can track the cursor. */
.cz-neurons canvas {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* On the stats band the field sits behind real figures, so it is dialled
   right back — the numbers are the content there, not the texture. */
.cz-neurons--quiet {
  --cz-neuron-node: rgba(12, 154, 144, 0.55);
  --cz-neuron-link: rgba(12, 154, 144, 0.20);
  --cz-neuron-signal: rgba(160, 255, 220, 0.75);
  z-index: 0;
  opacity: 0.75;
}

/* Hero copy has to clear the field. */
.slider__area .container {
  position: relative;
  z-index: 4;
}

/*----------------------------------------*/
/*  05b. Light grounds
/*----------------------------------------*/

/* Four of the homepage sections sat on flat #fff and one on flat #ecf6fa,
   which is most of why the page felt like paper. None of the reference sites
   use pure white either — Nova Dental sits on #f3f3f3, Stripe on #f6f9fc.
   These grounds stay very low in saturation on purpose: large soft blooms
   read as depth, while anything stronger reads as a novelty background. */
body {
  background-color: var(--cz-paper-tint);
  background-image: linear-gradient(180deg, #fbfdfb 0%, #eef4f1 100%);
  background-attachment: fixed;
}

/* Alternating tints give the long scroll a rhythm rather than one flat field. */
.choose__area-five,
.choose__area-six {
  position: relative;
  background-color: transparent;
  background-image:
    radial-gradient(58rem 30rem at 92% -8%, rgba(12, 154, 144, 0.22), transparent 64%),
    radial-gradient(46rem 26rem at -6% 104%, rgba(63, 143, 32, 0.20), transparent 64%),
    linear-gradient(176deg, #ffffff 0%, #eef6f4 100%);
}

/* This section references assets/img/bg/services_bg.jpg, which has never
   existed on the server — it 404s in production too. A gradient ground both
   replaces the missing image and removes the need for it. */
.services-area.services-bg {
  position: relative;
  background-color: transparent;
  background-image:
    radial-gradient(64rem 34rem at 50% -14%, rgba(34, 35, 38, 0.10), transparent 64%),
    radial-gradient(44rem 26rem at 4% 38%, rgba(12, 154, 144, 0.20), transparent 62%),
    radial-gradient(40rem 24rem at 96% 76%, rgba(63, 143, 32, 0.17), transparent 62%),
    linear-gradient(184deg, #eaf1f5 0%, #fbfdfc 54%, #e9f3ee 100%);
}

/* Replaces the flat pale blue with a gradient in the same family. */
.business__area-home-9 {
  background-color: transparent !important;
  background-image:
    radial-gradient(52rem 28rem at 88% 8%, rgba(63, 143, 32, 0.24), transparent 62%),
    radial-gradient(44rem 24rem at 8% 92%, rgba(12, 154, 144, 0.20), transparent 62%),
    linear-gradient(172deg, #e4eef5 0%, #f2f9fa 52%, #e3f1ea 100%) !important;
}

.services__area-seven {
  position: relative;
  background-color: transparent;
  background-image:
    radial-gradient(50rem 26rem at 4% 10%, rgba(12, 154, 144, 0.21), transparent 62%),
    radial-gradient(42rem 22rem at 98% 88%, rgba(63, 143, 32, 0.16), transparent 62%),
    linear-gradient(178deg, #ffffff 0%, #edf5f2 100%);
}

/* The footer's text is set in black and deep indigo, so this stays light —
   inverting it would need every one of those colours rewritten first. */
footer {
  position: relative;
  background-color: transparent;
  background-image:
    radial-gradient(56rem 26rem at 78% 108%, rgba(12, 154, 144, 0.22), transparent 62%),
    radial-gradient(40rem 22rem at 10% 0%, rgba(63, 143, 32, 0.14), transparent 60%),
    linear-gradient(180deg, #f4f8f6 0%, #e4edea 100%);
}

/* A hairline between grounds, which is how the references separate bands. */
.choose__area-five,
.services-area.services-bg,
.business__area-home-9,
.services__area-seven,
footer {
  border-top: 1px solid rgba(34, 35, 38, 0.06);
}

/*----------------------------------------*/
/*  06. Cards
/*----------------------------------------*/

.services-item {
  position: relative;
  overflow: hidden;
}

/* A single hairline of accent on hover, instead of six competing colours. */
.services-item::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: var(--cz-signature);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--cz-t-state) var(--cz-ease);
}

.services-item:hover,
.choose__box:hover,
.service-card:hover {
  transform: translateY(-3px);
  border-color: #cfdbe9;
  box-shadow: var(--cz-shadow-md);
}

.services-item:hover::after {
  transform: scaleX(1);
}

.services-item .services-thumb img {
  transition: transform 320ms var(--cz-ease);
}

.services-item:hover .services-thumb img {
  transform: scale(1.03);
}

/* Icon tiles: one accent, tinted ground, accent glyph. Quiet by default and
   filled only on hover, which is how the references handle an icon chip. */
.services-item .services-content .icon,
.service-card .icon-box {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 46px !important;
  height: 46px !important;
  min-width: 46px;
  border-radius: var(--cz-r-sm) !important;
  background: var(--cz-accent-soft) !important;
  color: var(--cz-accent) !important;
  box-shadow: none;
  transition: background-color var(--cz-t-hover) var(--cz-ease),
    color var(--cz-t-hover) var(--cz-ease);
}

.services-item .services-content .icon i,
.service-card .icon-box i {
  color: var(--cz-accent) !important;
  font-size: 20px;
  line-height: 1;
  transition: color var(--cz-t-hover) var(--cz-ease);
}

.services-item:hover .services-content .icon,
.service-card:hover .icon-box {
  background: var(--cz-accent) !important;
  color: #fff !important;
}

.services-item:hover .services-content .icon i,
.service-card:hover .icon-box i {
  color: #fff !important;
}

.business__tag-icon {
  background: var(--cz-accent) !important;
  border-radius: var(--cz-r-sm);
  transition: transform var(--cz-t-state) var(--cz-ease);
}

.business__tag:hover .business__tag-icon {
  transform: translateY(-2px);
}

.provider-pill {
  border-radius: 999px;
  transition: background-color var(--cz-t-hover) var(--cz-ease),
    border-color var(--cz-t-hover) var(--cz-ease);
}

.provider-pill:hover {
  background: var(--cz-accent) !important;
  border-color: var(--cz-accent) !important;
}

/*----------------------------------------*/
/*  07. Buttons
/*----------------------------------------*/

.btn {
  position: relative;
  border-radius: var(--cz-r-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: transform var(--cz-t-hover) var(--cz-ease),
    box-shadow var(--cz-t-hover) var(--cz-ease),
    background-color var(--cz-t-hover) var(--cz-ease),
    background-position var(--cz-t-state) var(--cz-ease);
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

/* The one filled action colour on the page. */
.btn.btn-two,
.header-btn .btn,
.slider__content .btn {
  background-image: var(--cz-signature);
  background-size: 180% auto;
  border: none;
  color: #fff;
  box-shadow: 0 1px 2px rgba(6, 27, 49, 0.10);
}

.btn.btn-two:hover,
.header-btn .btn:hover,
.slider__content .btn:hover {
  background-position: right center;
  box-shadow: 0 6px 16px -8px rgba(63, 143, 32, 0.75);
}

.btn:focus-visible,
.tgmenu__navbar-wrap > ul > li > a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--cz-accent);
  outline-offset: 2px;
}

/*----------------------------------------*/
/*  08. Navigation
/*----------------------------------------*/

.tgmenu__navbar-wrap > ul > li > a {
  position: relative;
  font-weight: 500;
}

.tgmenu__navbar-wrap > ul > li > a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 18px;
  width: 100%;
  height: 1px;
  background: var(--cz-accent);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--cz-t-hover) var(--cz-ease);
}

.tgmenu__navbar-wrap > ul > li > a:hover::after,
.tgmenu__navbar-wrap > ul > li.active > a::after {
  transform: scaleX(1);
  transform-origin: left center;
}

/*----------------------------------------*/
/*  09. Accordion
/*----------------------------------------*/

.card.collapse-custom:hover {
  transform: none;
  border-color: #cfdbe9;
}

.card.collapse-custom .arrow {
  transition: transform var(--cz-t-state) var(--cz-ease);
}

.card.collapse-custom [aria-expanded="true"] .arrow {
  transform: rotate(180deg);
}

/*----------------------------------------*/
/*  10. Counters & progress
/*----------------------------------------*/

/* No gradient text on the odometer. It builds each digit as a ribbon of
   absolutely positioned children, and background-clip: text does not paint
   across that structure — a transparent fill makes the figures disappear. */
.counter-area .odometer {
  font-size: clamp(2.4rem, 1.5rem + 2.6vw, 3.6rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--cz-on-ground) !important;
  -webkit-text-fill-color: var(--cz-on-ground) !important;
  background: none !important;
}

.progress {
  overflow: hidden;
  border-radius: 999px;
  height: 6px;
}

.progress-bar {
  background-image: var(--cz-signature);
  border-radius: 999px;
}

/*----------------------------------------*/
/*  11. Forms
/*----------------------------------------*/

.form-grp input,
.form-grp textarea,
.form-control,
.form-select {
  border: 1px solid var(--cz-hairline);
  border-radius: var(--cz-r-sm);
  transition: border-color var(--cz-t-hover) var(--cz-ease),
    box-shadow var(--cz-t-hover) var(--cz-ease);
}

.form-grp input:focus,
.form-grp textarea:focus,
.form-control:focus,
.form-select:focus {
  border-color: var(--cz-accent);
  box-shadow: 0 0 0 3px rgba(63, 143, 32, 0.14);
}

.ajax-response.success {
  color: var(--cz-accent);
}

/*----------------------------------------*/
/*  12. Motion
/*----------------------------------------*/

/* One slow ambient mover, not four. Guidance is no more than 3-4 elements
   animating in a view, and healthcare is named as a restrained-motion
   context, so the page relies on hover feedback and scroll reveals instead. */
.alltuchtopdown {
  animation: cz-float 11s ease-in-out infinite;
}

@keyframes cz-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

/*----------------------------------------*/
/*  13. Reduced motion
/*----------------------------------------*/

@media (prefers-reduced-motion: reduce) {
  .alltuchtopdown {
    animation: none !important;
  }

  .services-item,
  .choose__box,
  .card.collapse-custom,
  .service-card,
  .btn,
  .provider-pill,
  .services-item .services-thumb img {
    transition: none !important;
  }

  .services-item:hover,
  .choose__box:hover,
  .service-card:hover,
  .btn:hover {
    transform: none !important;
  }
}

/*----------------------------------------*/
/*  15. Dark theme
/*----------------------------------------*/

/* Measured off aikah.robertoattanasio.com. Its dark is not black: the large
   sections are a navy gradient, #0b1c2f into #081321, over a #06050a base,
   lifted by violet blooms and violet surfaces at #5b478f. Pure black was the
   wrong reading on the first pass — this is deep blue.

   Scoped to [data-bs-theme="dark"], which is the attribute the template's own
   color-modes.js already sets, so the switch costs no extra machinery. */

:root {
  --cz-dk-ground: #081321;
  --cz-dk-ground-2: #0b1c2f;
  --cz-dk-base: #06050a;
  --cz-dk-ink: #eef4fb;
  --cz-dk-ink-70: rgba(238, 244, 251, 0.72);
  --cz-dk-ink-50: rgba(238, 244, 251, 0.52);
  --cz-dk-surface: rgba(255, 255, 255, 0.04);
  --cz-dk-surface-2: rgba(255, 255, 255, 0.07);
  --cz-dk-line: rgba(255, 255, 255, 0.11);
  --cz-dk-bloom-a: rgba(91, 71, 143, 0.40);
  --cz-dk-bloom-b: rgba(12, 154, 144, 0.26);
}

[data-bs-theme="dark"] body {
  background-color: var(--cz-dk-ground);
  background-image: linear-gradient(170deg, var(--cz-dk-base) 0%, var(--cz-dk-ground) 46%, var(--cz-dk-ground-2) 100%);
  color: var(--cz-dk-ink-70);
}

/* Section grounds: the same navy travel, with a bloom placed differently per
   band so the scroll does not read as one flat field. */
[data-bs-theme="dark"] .choose__area-five,
[data-bs-theme="dark"] .choose__area-six,
[data-bs-theme="dark"] .services-area.services-bg,
[data-bs-theme="dark"] .services__area-seven,
[data-bs-theme="dark"] .business__area-home-9,
[data-bs-theme="dark"] footer {
  background-color: transparent !important;
  border-top: 1px solid var(--cz-dk-line);
}

[data-bs-theme="dark"] .choose__area-five {
  background-image:
    radial-gradient(56rem 30rem at 92% -8%, var(--cz-dk-bloom-b), transparent 64%),
    linear-gradient(100deg, var(--cz-dk-ground-2) 0%, var(--cz-dk-ground) 100%) !important;
}

[data-bs-theme="dark"] .services-area.services-bg {
  background-image:
    radial-gradient(60rem 32rem at 12% 20%, var(--cz-dk-bloom-a), transparent 62%),
    linear-gradient(260deg, var(--cz-dk-ground-2) 0%, var(--cz-dk-ground) 100%) !important;
}

[data-bs-theme="dark"] .business__area-home-9 {
  background-image:
    radial-gradient(52rem 28rem at 88% 10%, var(--cz-dk-bloom-b), transparent 62%),
    linear-gradient(100deg, var(--cz-dk-ground) 0%, var(--cz-dk-ground-2) 100%) !important;
}

[data-bs-theme="dark"] .services__area-seven {
  background-image:
    radial-gradient(50rem 26rem at 6% 88%, var(--cz-dk-bloom-a), transparent 62%),
    linear-gradient(260deg, var(--cz-dk-ground) 0%, var(--cz-dk-ground-2) 100%) !important;
}

[data-bs-theme="dark"] footer {
  background-image:
    radial-gradient(56rem 26rem at 78% 108%, var(--cz-dk-bloom-b), transparent 62%),
    linear-gradient(180deg, var(--cz-dk-ground) 0%, var(--cz-dk-base) 100%) !important;
}

/* Header sits on the navy rather than white. */
[data-bs-theme="dark"] #header-fixed-height,
[data-bs-theme="dark"] .menu-area,
[data-bs-theme="dark"] .header-top-wrap,
[data-bs-theme="dark"] .sticky-menu {
  background-color: rgba(8, 19, 33, 0.88) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--cz-dk-line);
}

/* Type. The footer in particular ships hardcoded black and deep indigo, so
   those have to be named explicitly or half the page goes unreadable. */
[data-bs-theme="dark"] .section-title .title:not(.text-white),
[data-bs-theme="dark"] h1, [data-bs-theme="dark"] h2, [data-bs-theme="dark"] h3,
[data-bs-theme="dark"] h4, [data-bs-theme="dark"] h5, [data-bs-theme="dark"] h6,
[data-bs-theme="dark"] .title,
[data-bs-theme="dark"] .fw-title,
[data-bs-theme="dark"] footer h4,
[data-bs-theme="dark"] .counter-area .odometer {
  color: var(--cz-dk-ink) !important;
  -webkit-text-fill-color: var(--cz-dk-ink) !important;
  background: none !important;
}

[data-bs-theme="dark"] p,
[data-bs-theme="dark"] li,
[data-bs-theme="dark"] span:not(.sub-title),
[data-bs-theme="dark"] .services-content p,
[data-bs-theme="dark"] .service-card p,
[data-bs-theme="dark"] footer p,
[data-bs-theme="dark"] footer li {
  color: var(--cz-dk-ink-70);
}

[data-bs-theme="dark"] a:not(.btn),
[data-bs-theme="dark"] footer a:not(.btn),
[data-bs-theme="dark"] .tgmenu__navbar-wrap > ul > li > a {
  color: var(--cz-dk-ink-70);
  transition: color var(--cz-t-hover) var(--cz-ease);
}

[data-bs-theme="dark"] a:not(.btn):hover,
[data-bs-theme="dark"] .tgmenu__navbar-wrap > ul > li > a:hover {
  color: var(--cz-dk-ink);
}

/* Surfaces: translucent white over the navy with a hairline, which is how
   both Aikah and Linear build a card on dark. */
[data-bs-theme="dark"] .services-item,
[data-bs-theme="dark"] .choose__box,
[data-bs-theme="dark"] .card.collapse-custom,
[data-bs-theme="dark"] .service-card,
[data-bs-theme="dark"] .contact__form-wrap,
[data-bs-theme="dark"] .modal-content {
  background: var(--cz-dk-surface) !important;
  border: 1px solid var(--cz-dk-line) !important;
  backdrop-filter: blur(6px);
}

[data-bs-theme="dark"] .services-item:hover,
[data-bs-theme="dark"] .choose__box:hover,
[data-bs-theme="dark"] .service-card:hover {
  background: var(--cz-dk-surface-2) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  box-shadow: none;
}

/* Icon chips invert too, or they sit as pale blocks on the navy. */
[data-bs-theme="dark"] .services-item .services-content .icon,
[data-bs-theme="dark"] .service-card .icon-box {
  background: rgba(86, 178, 45, 0.16) !important;
  color: var(--cz-accent-bright) !important;
}

[data-bs-theme="dark"] .services-item .services-content .icon i,
[data-bs-theme="dark"] .service-card .icon-box i {
  color: var(--cz-accent-bright) !important;
}

[data-bs-theme="dark"] .services-item:hover .services-content .icon,
[data-bs-theme="dark"] .service-card:hover .icon-box {
  background: var(--cz-accent) !important;
  color: #fff !important;
}

/* Forms on dark. */
[data-bs-theme="dark"] .form-grp input,
[data-bs-theme="dark"] .form-grp textarea,
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
  background-color: rgba(255, 255, 255, 0.05);
  border-color: var(--cz-dk-line);
  color: var(--cz-dk-ink);
}

[data-bs-theme="dark"] .form-grp input::placeholder,
[data-bs-theme="dark"] .form-grp textarea::placeholder,
[data-bs-theme="dark"] .form-control::placeholder {
  color: var(--cz-dk-ink-50);
}

[data-bs-theme="dark"] .form-select option {
  background-color: var(--cz-dk-ground);
  color: var(--cz-dk-ink);
}

/* The stats band already inverts; align it to the navy family. */
[data-bs-theme="dark"] .counter-area,
[data-bs-theme="dark"] .counter-area.home-10 {
  background-color: var(--cz-dk-base);
  background-image: radial-gradient(52rem 26rem at 50% -30%, var(--cz-dk-bloom-a), transparent 64%) !important;
}

/* Decorative shapes drawn for a white page read as bright blobs on navy. */
[data-bs-theme="dark"] .shape-top-right,
[data-bs-theme="dark"] .shape-left,
[data-bs-theme="dark"] .shape-bottom-left,
[data-bs-theme="dark"] .services__icon-shape {
  opacity: 0.22;
}

/* Theme toggle in the header. */
.cz-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-right: 10px;
  border: 1px solid var(--cz-hairline);
  border-radius: 999px;
  background: transparent;
  color: var(--cz-ink);
  cursor: pointer;
  transition: border-color var(--cz-t-hover) var(--cz-ease),
    color var(--cz-t-hover) var(--cz-ease),
    background-color var(--cz-t-hover) var(--cz-ease);
}

.cz-theme-toggle:hover {
  border-color: var(--cz-accent);
  color: var(--cz-accent);
}

[data-bs-theme="dark"] .cz-theme-toggle {
  border-color: var(--cz-dk-line);
  color: var(--cz-dk-ink);
}

[data-bs-theme="dark"] .cz-theme-toggle:hover {
  background: var(--cz-dk-surface-2);
}

.cz-theme-toggle .fa-sun { display: none; }
.cz-theme-toggle .fa-moon { display: block; }

/* Under [data-bs-theme=dark] the template remaps --tg-theme-secondary-* to its
   amber ramp and --tg-theme-primary-* to a pale indigo. With dark mode dormant
   that never mattered; now that it is the default it puts amber on the nav and
   the primary CTA, and white-on-amber measures 1.78 against a 4.5 requirement.
   These remap both ramps into the navy-and-green family instead. */
[data-bs-theme="dark"] {
  --tg-theme-secondary-50: #0f2a08;
  --tg-theme-secondary-100: #17400d;
  --tg-theme-secondary-200: #1f5512;
  --tg-theme-secondary-300: #2a6b18;
  --tg-theme-secondary-400: #33801d;
  --tg-theme-secondary-500: #3f8f20;
  --tg-theme-secondary-600: #56b22d;
  --tg-theme-secondary-700: #74c851;
  --tg-theme-secondary-800: #9ed982;
  --tg-theme-secondary-900: #cdecbd;
  --tg-theme-secondary: #3f8f20;

  --tg-theme-primary-50: #0b1c2f;
  --tg-theme-primary-80: #12263d;
  --tg-theme-primary-100: #16324f;
  --tg-theme-primary-200: #1d4066;
  --tg-theme-primary-300: #24527f;
  --tg-theme-primary-400: #3d6d9c;
  --tg-theme-primary-500: #6f9cc4;
  --tg-theme-primary-600: #8fb4d4;
  --tg-theme-primary-700: #b2cde3;
  --tg-theme-primary-800: #d2e3ef;
  --tg-theme-primary-900: #eef4fb;

  --tg-heading-color: var(--cz-dk-ink);
  --tg-body-color: var(--cz-dk-ink-70);
  /* Used 68x as a background and 105x as a text colour in main.css, so it
     cannot be right for both. It maps to the dark surface here, which
     fixes the backgrounds, and text is driven by the explicit rules
     below instead. */
  --tg-color-white-default: #0f172e;
  --tg-border-1: var(--cz-dk-line);
  --tg-border-2: var(--cz-dk-line);
}

/* Contact details in the header strip were rendering in the pale indigo at
   3.51, below the 4.5 threshold. */
[data-bs-theme="dark"] .header-top-wrap a,
[data-bs-theme="dark"] .header-contact a,
[data-bs-theme="dark"] .header-top-wrap li {
  color: var(--cz-dk-ink-70) !important;
}

/* Filled actions keep a deep enough green for white label text to pass. */
[data-bs-theme="dark"] .btn.btn-two,
[data-bs-theme="dark"] .header-btn .btn,
[data-bs-theme="dark"] .slider__content .btn,
[data-bs-theme="dark"] .btn {
  color: #fff !important;
}

/* .footer__area-two sets a hardcoded white that the footer selector above does
   not reach, which left the whole footer light with off-white text on it. */
[data-bs-theme="dark"] .footer__area-two,
[data-bs-theme="dark"] .footer__area,
[data-bs-theme="dark"] .footer__top-two {
  background-color: transparent !important;
}

/* main.css hardcodes black on footer links at .footer__top-two
   .footer-link-list .list-wrap li a, which outranks the general dark link
   rule above. There are several variants of this across the template, so
   these are forced rather than matched selector for selector. */
[data-bs-theme="dark"] footer a,
[data-bs-theme="dark"] footer li a,
[data-bs-theme="dark"] .footer-link-list .list-wrap li a,
[data-bs-theme="dark"] .footer__top-two .footer-link-list .list-wrap li a {
  color: var(--cz-dk-ink-70) !important;
}

[data-bs-theme="dark"] footer a:hover,
[data-bs-theme="dark"] .footer-link-list .list-wrap li a:hover {
  color: var(--cz-accent-bright) !important;
}

/* Progress labels still carried the light-theme body indigo (#3e4073), which
   measures 1.94 against the navy. */
[data-bs-theme="dark"] .choose__box .title,
[data-bs-theme="dark"] .progress-title,
[data-bs-theme="dark"] .choose__content-five span,
[data-bs-theme="dark"] .choose__content-five .title,
[data-bs-theme="dark"] [class*="progress"] span,
[data-bs-theme="dark"] [class*="progress"] .title {
  color: var(--cz-dk-ink) !important;
}

/* White on the standard green measured 2.91-4.07, short of 4.5. These are
   deepened until white passes: #38781c puts the lightest stop at 5.08. */
[data-bs-theme="dark"] .btn.btn-two,
[data-bs-theme="dark"] .header-btn .btn,
[data-bs-theme="dark"] .slider__content .btn,
[data-bs-theme="dark"] .btn.btn-primary {
  background-color: #2f6b16 !important;
  background-image: linear-gradient(118deg, #2a5f14 0%, #33701a 54%, #38781c 100%) !important;
}

/* Last three contrast fixes, each measured rather than guessed.

   1. .range__item p kept the light-theme indigo at 1.94. */
[data-bs-theme="dark"] .range__item p,
[data-bs-theme="dark"] .range__item .title,
[data-bs-theme="dark"] .business__range p,
[data-bs-theme="dark"] .business__range .title {
  color: var(--cz-dk-ink) !important;
}

/* 2. A plain .btn takes its background from --tg-theme-primary-500, which has
      to stay light because it is also a text colour — white on it measured
      2.91. Rather than fight that dual use, every filled button in dark mode
      takes the single green action colour. */
[data-bs-theme="dark"] .btn:not(.btn-close):not(.btn-secondary) {
  background-color: #2f6b16 !important;
  background-image: linear-gradient(118deg, #2a5f14 0%, #33701a 54%, #38781c 100%) !important;
  border-color: transparent !important;
  color: #fff !important;
}

/* 3. Accent text on navy: #3f8f20 measured 4.37, just short. The brighter
      #56b22d measures 7.03 on the same ground. */
[data-bs-theme="dark"] .section-title .sub-title,
[data-bs-theme="dark"] .tgmenu__navbar-wrap > ul > li.active > a,
[data-bs-theme="dark"] a.text-primary,
[data-bs-theme="dark"] .ajax-response.success {
  color: var(--cz-accent-bright) !important;
}

/* main.css colours the current nav item with
   .tgmenu__navbar-wrap > ul > li.active a — a descendant selector, so the
   child-combinator form above does not reach it. On navy the standard green
   measures 4.37 against a 4.5 requirement; the brighter green measures 7.03. */
[data-bs-theme="dark"] .tgmenu__navbar-wrap > ul > li.active a,
[data-bs-theme="dark"] .tgmenu__navbar-wrap > ul > li:hover > a {
  color: var(--cz-accent-bright) !important;
}

/* The off-canvas mobile menu is a separate tree (.tgmobile__menu-box) with its
   own active-link colour, so the desktop nav rules never reach it. */
[data-bs-theme="dark"] .tgmobile__menu .navigation li.active > a,
[data-bs-theme="dark"] .tgmobile__menu-box .navigation li.active > a,
[data-bs-theme="dark"] .tgmobile__menu-outer .navigation li.active > a {
  color: var(--cz-accent-bright) !important;
}

[data-bs-theme="dark"] .tgmobile__menu,
[data-bs-theme="dark"] .tgmobile__menu-box,
[data-bs-theme="dark"] .tgmobile__menu .navigation li > a {
  background-color: transparent;
  color: var(--cz-dk-ink-70);
}

[data-bs-theme="dark"] .tgmobile__menu-box {
  background-color: var(--cz-dk-ground) !important;
}

/*----------------------------------------*/
/*  16. Dark theme — page-local surfaces
/*----------------------------------------*/

/* The service pages carry their own <style> blocks with white and near-white
   panels (.step-box, .why-box, .provider-card, .provider-section) plus
   Bootstrap's .bg-light utility. Those blocks sit in the body, after this
   stylesheet, so they win on order and need !important to override.

   Left alone they stayed light while the global dark rules turned their text
   off-white, which is what made copy disappear. Measured at ratio 1.01.    */
[data-bs-theme="dark"] .bg-light,
[data-bs-theme="dark"] section.bg-light,
[data-bs-theme="dark"] .provider-section,
[data-bs-theme="dark"] .contact__area,
[data-bs-theme="dark"] .about__area-three,
[data-bs-theme="dark"] .about__bg-two {
  background-color: transparent !important;
  background-image: linear-gradient(176deg, var(--cz-dk-ground-2) 0%, var(--cz-dk-ground) 100%) !important;
}

[data-bs-theme="dark"] .step-box,
[data-bs-theme="dark"] .why-box,
[data-bs-theme="dark"] .provider-card,
[data-bs-theme="dark"] .contact__form-wrap {
  background-color: var(--cz-dk-surface) !important;
  background-image: none !important;
  border: 1px solid var(--cz-dk-line) !important;
  box-shadow: none !important;
}

/* The #666 body copy inside those panels, and their headings. */
[data-bs-theme="dark"] .step-box p,
[data-bs-theme="dark"] .why-box p,
[data-bs-theme="dark"] .provider-card p,
[data-bs-theme="dark"] .service-card p,
[data-bs-theme="dark"] .why-box li,
[data-bs-theme="dark"] .step-box li {
  color: var(--cz-dk-ink-70) !important;
}

[data-bs-theme="dark"] .step-box h1, [data-bs-theme="dark"] .step-box h2,
[data-bs-theme="dark"] .step-box h3, [data-bs-theme="dark"] .step-box h4,
[data-bs-theme="dark"] .step-box h5, [data-bs-theme="dark"] .step-box h6,
[data-bs-theme="dark"] .why-box h1, [data-bs-theme="dark"] .why-box h2,
[data-bs-theme="dark"] .why-box h3, [data-bs-theme="dark"] .why-box h4,
[data-bs-theme="dark"] .why-box h5, [data-bs-theme="dark"] .why-box h6,
[data-bs-theme="dark"] .provider-card h1, [data-bs-theme="dark"] .provider-card h2,
[data-bs-theme="dark"] .provider-card h3, [data-bs-theme="dark"] .provider-card h4,
[data-bs-theme="dark"] .provider-card h5, [data-bs-theme="dark"] .provider-card h6 {
  color: var(--cz-dk-ink) !important;
  -webkit-text-fill-color: var(--cz-dk-ink) !important;
}

/* Light utility pills (Bootstrap spacing classes on a pale ground). */
[data-bs-theme="dark"] span.bg-light,
[data-bs-theme="dark"] .badge.bg-light,
[data-bs-theme="dark"] .bg-white {
  background-color: var(--cz-dk-surface-2) !important;
  color: var(--cz-dk-ink) !important;
}

/* Bootstrap text utilities that assume a light ground. */
[data-bs-theme="dark"] .text-dark,
[data-bs-theme="dark"] .text-body,
[data-bs-theme="dark"] .text-black {
  color: var(--cz-dk-ink) !important;
}

[data-bs-theme="dark"] .text-muted,
[data-bs-theme="dark"] .text-secondary {
  color: var(--cz-dk-ink-50) !important;
}

/* Bootstrap's semantic text utilities are tuned for a light ground; on navy
   .text-success (#198754) measures 3.1. These are the lightened equivalents. */
[data-bs-theme="dark"] .text-success { color: #4ade80 !important; }
[data-bs-theme="dark"] .text-primary { color: #7dafe8 !important; }
[data-bs-theme="dark"] .text-danger  { color: #f58a86 !important; }
[data-bs-theme="dark"] .text-warning { color: #f3c969 !important; }
[data-bs-theme="dark"] .text-info    { color: #6fd6e8 !important; }

/*----------------------------------------*/
/*  17. Light theme — pre-existing white-on-white
/*----------------------------------------*/

/* The service pages mark some heading blocks .white-title (white text, meant
   for a dark band) while the section itself is .bg-white. White on white: the
   headings have been invisible in light mode since before any of this work —
   both classes are in the original baseline. The dark theme happened to mask
   it, and the toggle exposes it again, so it is fixed here rather than left.

   Scoped to light only; on a genuinely dark band .white-title still applies. */
html:not([data-bs-theme="dark"]) section.bg-white .section-title.white-title .title,
html:not([data-bs-theme="dark"]) section.bg-light .section-title.white-title .title,
html:not([data-bs-theme="dark"]) section.bg-white .section-title.white-title .sub-title,
html:not([data-bs-theme="dark"]) section.bg-light .section-title.white-title .sub-title {
  color: var(--cz-ink) !important;
  -webkit-text-fill-color: var(--cz-ink) !important;
  background: none !important;
}

html:not([data-bs-theme="dark"]) section.bg-white .section-title.white-title .sub-title,
html:not([data-bs-theme="dark"]) section.bg-light .section-title.white-title .sub-title {
  color: var(--cz-accent-deep) !important;
  -webkit-text-fill-color: var(--cz-accent-deep) !important;
}

html:not([data-bs-theme="dark"]) section.bg-white .section-title.white-title .section-description,
html:not([data-bs-theme="dark"]) section.bg-white .section-title.white-title p {
  color: var(--cz-ink-80) !important;
}

/* Some eyebrows carry an inline colour (#00b386, #00a86b) straight in the
   markup, which outranks any class rule. On a light ground that teal measures
   1.6. Forced to ink where the section is light; .white-title blocks sit on
   dark bands and keep their own colour. */
html:not([data-bs-theme="dark"]) .section-title:not(.white-title) .sub-title {
  color: var(--cz-ink-80) !important;
}

/*----------------------------------------*/
/*  18. Split headings — keep words whole
/*----------------------------------------*/

/* GSAP SplitText wraps every character in its own inline-block div. Each one
   is a line-break opportunity, so the browser is free to break mid-word, which
   is how "Performance-Driven" rendered as "Performance-Dr / iven".

   SplitText does group characters inside a per-word wrapper, so holding that
   wrapper to nowrap restores normal word-level wrapping without touching the
   per-character animation. */
.tg-element-title .split-line > div,
.tg-heading-subheading .split-line > div {
  white-space: nowrap;
}

/* The hyphen in "Performance-Driven" is still a legal break point; this keeps
   hyphenated compounds together too. */
.tg-element-title,
.tg-heading-subheading .title {
  hyphens: none;
  -webkit-hyphens: none;
  overflow-wrap: normal;
  word-break: normal;
}

/*----------------------------------------*/
/*  19. Equal-height service cards
/*----------------------------------------*/

/* The four cards carry different amounts of copy, so they ended at different
   heights with the buttons floating at different levels. Stretching the row
   and making each card a column lets the body copy take what it needs and
   pins the action to the bottom of every card. */
.services-item-wrap .row {
  align-items: stretch;
}

.services-item-wrap .row > [class*="col-"] {
  display: flex;
}

.services-item-wrap .services-item {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.services-item-wrap .services-item .services-content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

/* Pushes the button down so every card's CTA sits on the same line. */
.services-item-wrap .services-item .services-content .btn {
  margin-top: auto;
  align-self: flex-start;
}

/*----------------------------------------*/
/*  20. Stacking service cards
/*----------------------------------------*/

/* Each card takes the full width and sticks under the header, so scrolling
   brings the next one up over the one before it and the stack builds as you
   go. Sticky does the work; the script only adds the recede on the card
   underneath.

   Below the large breakpoint the cards stay in normal flow — stacking inside
   a short viewport leaves no room to read a card before the next covers it. */
@media (min-width: 992px) {
  .cz-stack .row {
    display: block;
    margin: 0;
  }

  .cz-stack .row > [class*="col-"] {
    width: 100%;
    max-width: 100%;
    flex: none;
    padding: 0;
    position: sticky;
    /* A small stagger so the edge of each earlier card stays visible. */
    top: calc(104px + (var(--cz-i, 0) * 14px));
    margin-bottom: 36px;
  }

  .cz-stack .row > [class*="col-"]:nth-child(1) { --cz-i: 0; z-index: 1; }
  .cz-stack .row > [class*="col-"]:nth-child(2) { --cz-i: 1; z-index: 2; }
  .cz-stack .row > [class*="col-"]:nth-child(3) { --cz-i: 2; z-index: 3; }
  .cz-stack .row > [class*="col-"]:nth-child(4) { --cz-i: 3; z-index: 4; }
  .cz-stack .row > [class*="col-"]:nth-child(5) { --cz-i: 4; z-index: 5; }
  .cz-stack .row > [class*="col-"]:nth-child(6) { --cz-i: 5; z-index: 6; }

  /* Full-width cards read better as a two-column panel than as a tall
     portrait card, so the thumbnail moves beside the copy. */
  .cz-stack .services-item {
    flex-direction: row;
    align-items: stretch;
    min-height: 420px;
    overflow: hidden;
    /* opaque, or the card beneath shows through the stack */
    background: var(--cz-paper);
    transform-origin: center top;
    will-change: transform, opacity;
  }

  [data-bs-theme="dark"] .cz-stack .services-item {
    background: #0d1b2c !important;
    backdrop-filter: none;
  }

  .cz-stack .services-item .services-thumb {
    flex: 0 0 44%;
    max-width: 44%;
    margin: 0;
    overflow: hidden;
  }

  .cz-stack .services-item .services-thumb a,
  .cz-stack .services-item .services-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .cz-stack .services-item .services-content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 48px 52px;
  }

  .cz-stack .services-item .services-content .title {
    font-size: clamp(1.5rem, 1rem + 1.2vw, 2.1rem);
    line-height: 1.12;
    letter-spacing: -0.02em;
    margin-bottom: 14px;
  }

  .cz-stack .services-item .services-content p {
    font-size: 1.0625rem;
    line-height: 1.7;
    max-width: 52ch;
    margin-bottom: 26px;
  }

  /* The bottom bar belongs to the portrait layout; it would sit mid-panel. */
  .cz-stack .services-item::after {
    display: none;
  }

  .cz-stack .services-item:hover {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cz-stack .row > [class*="col-"] {
    position: static;
  }

  .cz-stack .services-item {
    transform: none !important;
    opacity: 1 !important;
  }
}

/* <main class="fix"> carries overflow: hidden, which makes it a scroll
   container and therefore disables position: sticky for everything inside —
   the stacking cards never stuck. overflow-x: clip clips the same horizontal
   overflow the rule was there for without creating a scroll container, so
   sticky keeps working. Browsers without clip support simply fall back to
   non-stacking cards, which still read correctly. */
main.fix {
  overflow: visible;
  overflow-x: clip;
}

/*----------------------------------------*/
/*  21. Stack shine
/*----------------------------------------*/

/* A light sweep that crosses whichever card is currently on top of the stack,
   plus an accent edge and a small lift on its copy, so arriving at a card
   feels like an event rather than a scroll position.

   Only the front card animates: running a sheen on all four at once would be
   four simultaneous animations competing for the same glance. */
@media (min-width: 992px) {
  .cz-stack .services-item::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(
      104deg,
      transparent 38%,
      rgba(255, 255, 255, 0.16) 47%,
      rgba(255, 255, 255, 0.05) 54%,
      transparent 64%
    );
    transform: translateX(-120%);
  }

  [data-bs-theme="dark"] .cz-stack .services-item::before {
    background: linear-gradient(
      104deg,
      transparent 38%,
      rgba(140, 255, 190, 0.13) 47%,
      rgba(120, 220, 255, 0.07) 54%,
      transparent 64%
    );
  }

  .cz-stack .services-item.cz-front::before {
    opacity: 1;
    animation: cz-sheen 4.2s cubic-bezier(0.3, 0, 0.2, 1) 0.3s infinite;
  }

  /* The front card gets an accent edge and a deeper lift. */
  .cz-stack .services-item {
    transition: box-shadow 420ms var(--cz-ease);
  }

  .cz-stack .services-item.cz-front {
    box-shadow: 0 28px 70px -28px rgba(6, 27, 49, 0.45),
      0 0 0 1px rgba(63, 143, 32, 0.30);
  }

  [data-bs-theme="dark"] .cz-stack .services-item.cz-front {
    box-shadow: 0 28px 70px -28px rgba(0, 0, 0, 0.75),
      0 0 0 1px rgba(86, 178, 45, 0.38),
      0 0 46px -18px rgba(12, 154, 144, 0.55);
  }

  /* The icon chip fills in once its card reaches the front. */
  .cz-stack .services-item.cz-front .services-content .icon {
    background: var(--cz-accent) !important;
    color: #fff !important;
  }

  .cz-stack .services-item.cz-front .services-content .icon i {
    color: #fff !important;
  }

  /* Copy settles upward as the card arrives. */
  .cz-stack .services-item .services-content > * {
    transform: translateY(8px);
    opacity: 0.92;
    transition: transform 520ms var(--cz-ease), opacity 520ms var(--cz-ease);
  }

  .cz-stack .services-item.cz-front .services-content > * {
    transform: translateY(0);
    opacity: 1;
  }

  .cz-stack .services-item.cz-front .services-content > *:nth-child(2) { transition-delay: 60ms; }
  .cz-stack .services-item.cz-front .services-content > *:nth-child(3) { transition-delay: 120ms; }
  .cz-stack .services-item.cz-front .services-content > *:nth-child(4) { transition-delay: 180ms; }

  @keyframes cz-sheen {
    0%   { transform: translateX(-120%); }
    55%  { transform: translateX(120%); }
    100% { transform: translateX(120%); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .cz-stack .services-item::before { animation: none !important; opacity: 0 !important; }
  .cz-stack .services-item .services-content > * {
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
  }
}

/* main.css gives .services-thumb a 100px bottom-left radius
   (10px 10px 0 100px). That is a decorative sweep for the portrait card,
   where it curves away under the copy. Beside full-width copy it reads as a
   large bite out of the corner, so the thumbnail squares off and the card's
   own overflow does the rounding. */
@media (min-width: 992px) {
  .cz-stack .services-item .services-thumb {
    border-radius: 0 !important;
  }

  /* The equal-height rule pins the action to the bottom of the card, which is
     right in a grid of four but leaves a dead gap under the copy here, where
     the block is vertically centred. */
  .cz-stack .services-item .services-content .btn {
    margin-top: 6px;
  }
}

/*----------------------------------------*/
/*  22. Neuron field variants
/*----------------------------------------*/

/* The script reads these numbers off each mount, so a variant is just a class:
   density is nodes per 10,000 square pixels, reach is the link distance in px,
   speed is px per frame, signals scales how often one fires. */

/* Any section hosting a field has to be a positioning context, and its own
   content has to sit above it. */
.cz-has-field {
  position: relative;
}

.cz-has-field > .container,
.cz-has-field > .container-fluid {
  position: relative;
  z-index: 1;
}

/* Shape variants. */
.cz-neurons--sparse {
  --cz-neuron-density: 0.28;
  --cz-neuron-reach: 210;
  --cz-neuron-speed: 0.09;
  --cz-neuron-max: 54;
  --cz-neuron-signals: 0.5;
}

.cz-neurons--dense {
  --cz-neuron-density: 1.15;
  --cz-neuron-reach: 112;
  --cz-neuron-speed: 0.2;
  --cz-neuron-max: 130;
  --cz-neuron-signals: 1.6;
}

.cz-neurons--drift {
  --cz-neuron-density: 0.45;
  --cz-neuron-reach: 260;
  --cz-neuron-speed: 0.05;
  --cz-neuron-max: 60;
  --cz-neuron-signals: 0.35;
}

/* Colour variants. */
.cz-neurons--teal {
  --cz-neuron-node: rgba(12, 154, 144, 0.75);
  --cz-neuron-link: rgba(12, 154, 144, 0.26);
  --cz-neuron-signal: rgba(160, 255, 236, 0.9);
}

.cz-neurons--violet {
  --cz-neuron-node: rgba(124, 92, 255, 0.62);
  --cz-neuron-link: rgba(124, 92, 255, 0.22);
  --cz-neuron-signal: rgba(206, 192, 255, 0.9);
}

.cz-neurons--slate {
  --cz-neuron-node: rgba(34, 35, 38, 0.30);
  --cz-neuron-link: rgba(34, 35, 38, 0.13);
  --cz-neuron-signal: rgba(63, 143, 32, 0.8);
}

[data-bs-theme="dark"] .cz-neurons--slate {
  --cz-neuron-node: rgba(238, 244, 251, 0.34);
  --cz-neuron-link: rgba(238, 244, 251, 0.14);
  --cz-neuron-signal: rgba(86, 178, 45, 0.9);
}

/* Coverage variants, so the field is not always an even wash edge to edge. */
.cz-neurons--edge-right {
  -webkit-mask-image: linear-gradient(to left, #000 0%, rgba(0, 0, 0, 0.55) 38%, transparent 68%);
  mask-image: linear-gradient(to left, #000 0%, rgba(0, 0, 0, 0.55) 38%, transparent 68%);
}

.cz-neurons--edge-left {
  -webkit-mask-image: linear-gradient(to right, #000 0%, rgba(0, 0, 0, 0.55) 38%, transparent 68%);
  mask-image: linear-gradient(to right, #000 0%, rgba(0, 0, 0, 0.55) 38%, transparent 68%);
}

.cz-neurons--top {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.5) 45%, transparent 78%);
  mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.5) 45%, transparent 78%);
}

.cz-neurons--bottom {
  -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.5) 45%, transparent 78%);
  mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.5) 45%, transparent 78%);
}

/* On light grounds the field has to sit well back or it reads as noise. */
.cz-neurons--faint {
  opacity: 0.5;
}

[data-bs-theme="dark"] .cz-neurons--faint {
  opacity: 0.85;
}

/*----------------------------------------*/
/*  23. EHR launch announcement
/*----------------------------------------*/

.cz-ehr-modal .modal-content {
  position: relative;
  border: 1px solid var(--cz-hairline);
  border-radius: 14px;
  overflow: hidden;
  background: var(--cz-paper);
  background-image:
    radial-gradient(38rem 20rem at 108% -18%, rgba(12, 154, 144, 0.16), transparent 64%),
    radial-gradient(30rem 18rem at -14% 112%, rgba(63, 143, 32, 0.14), transparent 64%);
  box-shadow: 0 32px 80px -28px rgba(6, 27, 49, 0.45);
}

[data-bs-theme="dark"] .cz-ehr-modal .modal-content {
  background: var(--cz-dk-ground) !important;
  border-color: var(--cz-dk-line) !important;
  background-image:
    radial-gradient(38rem 20rem at 108% -18%, rgba(12, 154, 144, 0.22), transparent 64%),
    radial-gradient(30rem 18rem at -14% 112%, rgba(124, 92, 255, 0.20), transparent 64%) !important;
  box-shadow: 0 32px 90px -28px rgba(0, 0, 0, 0.8);
}

.cz-ehr-body {
  padding: 44px 46px 38px;
}

.cz-ehr-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
}

[data-bs-theme="dark"] .cz-ehr-close {
  filter: invert(1) grayscale(1) brightness(1.8);
}

.cz-ehr-eyebrow {
  display: inline-block;
  margin-bottom: 14px;
  padding: 5px 12px;
  border: 1px solid var(--cz-accent);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--cz-accent-deep);
}

[data-bs-theme="dark"] .cz-ehr-eyebrow {
  color: var(--cz-accent-bright);
  border-color: rgba(86, 178, 45, 0.5);
  background: rgba(86, 178, 45, 0.10);
}

.cz-ehr-title {
  font-size: clamp(1.7rem, 1.1rem + 1.8vw, 2.5rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin-bottom: 14px;
  color: var(--cz-ink);
}

[data-bs-theme="dark"] .cz-ehr-title {
  color: var(--cz-dk-ink);
}

.cz-ehr-title em {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 400;
}

.cz-ehr-lead {
  max-width: 56ch;
  margin-bottom: 26px;
  color: var(--cz-ink-80);
  line-height: 1.65;
}

[data-bs-theme="dark"] .cz-ehr-lead {
  color: var(--cz-dk-ink-70);
}

.cz-ehr-list {
  list-style: none;
  margin: 0 0 30px;
  padding: 0;
  display: grid;
  gap: 14px;
}

.cz-ehr-list li {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  line-height: 1.55;
  color: var(--cz-ink-80);
}

[data-bs-theme="dark"] .cz-ehr-list li {
  color: var(--cz-dk-ink-70);
}

.cz-ehr-list strong {
  color: var(--cz-ink);
  font-weight: 600;
}

[data-bs-theme="dark"] .cz-ehr-list strong {
  color: var(--cz-dk-ink);
}

.cz-ehr-ico {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--cz-accent-soft);
  color: var(--cz-accent);
  font-size: 14px;
}

[data-bs-theme="dark"] .cz-ehr-ico {
  background: rgba(86, 178, 45, 0.16);
  color: var(--cz-accent-bright);
}

.cz-ehr-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(12, 154, 144, 0.14);
  color: #0a6f68;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

[data-bs-theme="dark"] .cz-ehr-tag {
  background: rgba(12, 154, 144, 0.22);
  color: #6fe0d4;
}

.cz-ehr-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.cz-ehr-cta {
  background-image: var(--cz-signature);
  background-size: 180% auto;
  border: none;
  color: #fff !important;
  padding: 13px 26px;
  border-radius: var(--cz-r-sm);
  font-weight: 600;
}

.cz-ehr-later {
  background: none;
  border: none;
  padding: 0;
  font-size: 0.9375rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  /* ink-60 measured 4.23 on the dialog ground, short of 4.5 at this size */
  color: var(--cz-ink-80);
  transition: color var(--cz-t-hover) var(--cz-ease);
}

.cz-ehr-later:hover {
  color: var(--cz-ink);
}

[data-bs-theme="dark"] .cz-ehr-later {
  color: var(--cz-dk-ink-50);
}

[data-bs-theme="dark"] .cz-ehr-later:hover {
  color: var(--cz-dk-ink);
}

/* Entry: the dialog settles rather than snapping in. */
.cz-ehr-modal.fade .modal-dialog {
  transform: translateY(18px) scale(0.985);
  transition: transform 320ms var(--cz-ease), opacity 320ms var(--cz-ease);
}

.cz-ehr-modal.show .modal-dialog {
  transform: none;
}

@media (max-width: 575.98px) {
  .cz-ehr-body {
    padding: 34px 22px 28px;
  }

  .cz-ehr-actions {
    gap: 14px;
  }

  .cz-ehr-cta {
    width: 100%;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cz-ehr-modal.fade .modal-dialog {
    transform: none;
    transition: none;
  }
}

/* A quiet field inside the announcement. It sits behind the copy and is kept
   much sparser than a full-section one — a dialog is a small space and the
   text is the point. */
.cz-neurons--modal {
  --cz-neuron-density: 0.5;
  --cz-neuron-reach: 150;
  --cz-neuron-speed: 0.07;
  --cz-neuron-max: 34;
  --cz-neuron-signals: 0.8;
  --cz-neuron-node: rgba(12, 154, 144, 0.55);
  --cz-neuron-link: rgba(12, 154, 144, 0.20);
  --cz-neuron-signal: rgba(63, 143, 32, 0.85);
  z-index: 0;
  opacity: 0.6;
  /* fades out before it reaches the body copy on the left */
  -webkit-mask-image: linear-gradient(to left, #000 0%, rgba(0, 0, 0, 0.5) 42%, transparent 76%);
  mask-image: linear-gradient(to left, #000 0%, rgba(0, 0, 0, 0.5) 42%, transparent 76%);
}

[data-bs-theme="dark"] .cz-neurons--modal {
  --cz-neuron-node: rgba(86, 178, 45, 0.7);
  --cz-neuron-link: rgba(12, 154, 144, 0.3);
  --cz-neuron-signal: rgba(160, 255, 220, 0.9);
  opacity: 0.85;
}

/* The dialog's own content has to clear the field. */
.cz-ehr-body {
  position: relative;
  z-index: 1;
}

.cz-ehr-close {
  z-index: 2;
}