/* ==========================================================================
   LemonadaCore overrides
   Loaded after style.css. Everything here is a deliberate LemonadaCore
   decision rather than a template default, so it stays readable on its own.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. The paired text rule, cross-rule cases

   The template animates a button by fading in an ::after overlay. On these
   components the base rule sets white text while the overlay carries the
   lime gradient, so hovering paints white on lime at 1.22:1. Colour and
   surface live in different rules, joined only by :hover, which is why this
   cannot be fixed by rewriting a single declaration.

   The overlay sits above the button's own background but below its label,
   so the label must switch to black for exactly as long as the overlay is
   visible.
   -------------------------------------------------------------------------- */
.ibt-btn.ibt-btn-dark:hover,
.ibt-btn.ibt-btn-dark:hover span,
.ibt-btn.ibt-btn-dark:hover i,
.ibt-btn.ibt-btn-outline:hover,
.ibt-btn.ibt-btn-outline:hover span,
.ibt-btn.ibt-btn-outline:hover i,
.pagination .page-item .page-link:hover,
.pagination .page-item.active .page-link,
.project-card:hover span {
  color: var(--brand-on-lime);
  -webkit-text-fill-color: var(--brand-on-lime);
}

/* Arrow glyphs inside buttons are drawn with borders, not text colour. */
.ibt-btn.ibt-btn-dark:hover span[class=icon-arrow-top]::before,
.ibt-btn.ibt-btn-dark:hover span[class=icon-arrow-top]::after,
.ibt-btn.ibt-btn-outline:hover span[class=icon-arrow-top]::before,
.ibt-btn.ibt-btn-outline:hover span[class=icon-arrow-top]::after {
  border-color: var(--brand-on-lime);
  background-color: var(--brand-on-lime);
}

/* --------------------------------------------------------------------------
   2. Contact form, pre-launch state

   The form has no endpoint yet. A submit button that looks live but discards
   the message is worse than one that is visibly unavailable, so the button is
   disabled and the note says where to write instead.
   -------------------------------------------------------------------------- */
.custom-form button[type="submit"][disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.custom-form .form-note {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-body);
}

.custom-form .form-note a {
  color: var(--brand-lime-900);
  text-decoration: underline;
  font-weight: var(--f-semibold);
}

/* --------------------------------------------------------------------------
   3. Dark hero, banner, and footer

   The approved amendment to the light treatment. The hero and the footer sit
   on ink so the lime reads at full strength at the top and bottom of every
   page; everything between them keeps the template's light rhythm.

   The template's heroes were built for a light ground (#ecf0f4) with dark
   text, so inverting the surface means inverting every text colour inside
   it. Each selector below is scoped to a hero or footer container -- nothing
   here leaks into the light sections.
   -------------------------------------------------------------------------- */

.hero-style1,
.hero-style6,
.page-banner11 {
  background-color: var(--brand-ink) !important;
  background-image: none !important;
  color: #ffffff;
}

/* Headings and body copy inside the dark surfaces. */
.hero-style1 h1, .hero-style1 h2, .hero-style1 h3,
.hero-style1 .hero-title, .hero-style1 .gradient-title,
.hero-style6 h1, .hero-style6 h2, .hero-style6 h3,
.page-banner11 h1, .page-banner11 h2, .page-banner11 .title {
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
}

.hero-style1 p, .hero-style1 .hero-info,
.hero-style6 p,
.page-banner11 p {
  color: rgba(255, 255, 255, 0.82);
}

/* The eyebrow label is where the lime belongs: 17.25:1 on ink. */
.hero-style1 .sub-title,
.hero-style6 .sub-title,
.page-banner11 .sub-title {
  color: var(--brand-lime);
  -webkit-text-fill-color: var(--brand-lime);
}

/* Breadcrumbs on the inner-page banner. */
.page-banner11 a {
  color: rgba(255, 255, 255, 0.72);
}

.page-banner11 a:hover,
.hero-style1 a:hover {
  color: var(--brand-lime);
}

/* The primary call to action: lime surface, black label -- 17.25:1. */
.hero-style1 .banner-content .ibt-btn,
.hero-style6 .banner-content .ibt-btn {
  background: var(--brand-lime);
  color: var(--brand-on-lime);
  border-color: var(--brand-lime);
}

/* The secondary action stays quiet: an outline on ink, never lime-on-lime. */
.hero-style1 .banner-content .ibt-btn.ibt-btn-outline,
.hero-style6 .banner-content .ibt-btn.ibt-btn-outline {
  background: transparent;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.35);
}

/* Align the already-dark CTA section and the footer with the ink token, so
   the page ends on the same black it began with rather than a near-black. */
.main-sec,
.footer-style1 {
  background-color: var(--brand-ink) !important;
}

.footer-style1,
.footer-style1 p,
.footer-style1 li,
.footer-style1 a {
  color: rgba(255, 255, 255, 0.78);
}

.footer-style1 h1, .footer-style1 h2, .footer-style1 h3,
.footer-style1 h4, .footer-style1 h5, .footer-style1 h6 {
  color: #ffffff;
}

.footer-style1 a:hover {
  color: var(--brand-lime);
}

/* Seam: the first light section after a dark hero must paint its own ground.
   Template sections inherit from the page and would otherwise show the dark
   surface through, or let a decorative overlay bleed across the boundary. */
.hero-style1 + section,
.hero-style6 + section,
.page-banner11 + section {
  position: relative;
  z-index: 1;
  background-color: #ffffff;
}

/* --------------------------------------------------------------------------
   4. The hero's image card

   .hero-style1 splits into .hero-info, which sits on ink, and .video-banner,
   an artwork card. Section 3 turned every hero .sub-title lime, which is
   correct on ink (17.25:1) and unreadable on the light artwork (1.22:1).

   Rather than tune the text to whichever artwork is in place -- a coupling
   that breaks the next time the image changes -- the card gets its own ink
   scrim. Contrast then depends on the scrim, not on the picture behind it.
   -------------------------------------------------------------------------- */
.hero-style1 .video-banner .container2 {
  position: relative;
}

.hero-style1 .video-banner .banner-content {
  position: relative;
  z-index: 2;
}

.hero-style1 .video-banner .banner-content::before {
  content: "";
  position: absolute;
  inset: -32px -40px;
  background: linear-gradient(90deg,
              rgba(0, 0, 0, 0.86) 0%,
              rgba(0, 0, 0, 0.72) 55%,
              rgba(0, 0, 0, 0.35) 100%);
  border-radius: 12px;
  z-index: -1;
}

.hero-style1 .video-banner .banner-content .sub-title {
  color: var(--brand-lime);
  -webkit-text-fill-color: var(--brand-lime);
}

.hero-style1 .video-banner .banner-content .title2,
.hero-style1 .video-banner .banner-content h1,
.hero-style1 .video-banner .banner-content h2 {
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
}

/* --------------------------------------------------------------------------
   5. Navigation

   The four-item menu that replaced the template's mega-menu has no dropdowns,
   but the template still draws a caret after the first three items. Rather
   than hunt the rule that does it -- which would only reappear the next time
   the template's CSS is regenerated -- the decoration is suppressed on our
   own menu items, which is where the guarantee belongs.
   -------------------------------------------------------------------------- */
.main-menu .mainmenu > li > a::after,
.main-menu .mainmenu > li > a::before,
.main-menu .mainmenu > li::after,
.main-menu .mainmenu > li::before {
  content: none !important;
  display: none !important;
}

.main-menu .mainmenu {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.main-menu .mainmenu > li > a {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: var(--f-semibold);
  line-height: 1.2;
  transition: 0.25s;
}

/* The current page is marked with the brand colour, black label on lime. */
.main-menu .mainmenu > li.active > a {
  background: var(--brand-lime);
  color: var(--brand-on-lime);
}

.main-menu .mainmenu > li:not(.active) > a:hover {
  background: var(--brand-lime-soft);
  color: var(--brand-on-lime);
}

/* --------------------------------------------------------------------------
   6. Gradient headings on light sections

   .gradient-title paints its glyphs with a lime gradient via
   background-clip: text. On the ink hero that reads at 17.25:1. In the light
   sections it lands at 1.22:1 -- the same failure the whole invariant exists
   to prevent, arriving through a route the surface-based check deliberately
   ignores, because with background-clip there is no surface to measure.

   In light sections the highlight drops to --brand-lime-900, the one step of
   the ramp dark enough for body-weight text on white at 5.75:1. Same hue,
   same family, readable.
   -------------------------------------------------------------------------- */
.neural-playground .gradient-title,
.neural-playground7 .gradient-title,
section:not(.hero-style1):not(.hero-style6):not(.page-banner11):not(.main-sec)
  .gradient-title {
  background-image: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: var(--color-heading);
  -webkit-text-fill-color: var(--color-heading);
  -webkit-text-stroke-width: 0;
}

/* Only the emphasised words carry the brand colour, as the template
   intended -- painting the whole heading olive loses the emphasis that the
   gradient was there to create in the first place. */
.neural-playground .gradient-title span,
.neural-playground7 .gradient-title span,
section:not(.hero-style1):not(.hero-style6):not(.page-banner11):not(.main-sec)
  .gradient-title span {
  color: var(--brand-lime-900);
  -webkit-text-fill-color: var(--brand-lime-900);
}

/* --------------------------------------------------------------------------
   7. Text inheriting a lime surface from an ancestor

   The third structural route to the same failure. The marquee bands paint
   the lime gradient on the section while the white sits on a descendant
   span, so neither a same-rule check nor a hover-pair check can see it.
   1.22:1 in every case.
   -------------------------------------------------------------------------- */
.marquee-sec2 .marquee-inner span,
.marquee-sec3 .marquee-inner span,
.marquee-sec4 .marquee-inner span,
.blog-img3 .date .title,
.blog-img3 .date span,
.ser-card20_card2 .title {
  color: var(--brand-on-lime);
  -webkit-text-fill-color: var(--brand-on-lime);
}

/* --------------------------------------------------------------------------
   8. hero-style6 stays light

   Section 3 turned this hero dark along with the others, but its layout is a
   white content panel beside an image, not a full-bleed dark band. Forcing
   the surface dark left the headline white on white -- invisible. The
   structure differs, so the treatment does too: this hero keeps the
   template's light panel, and the ink appears only in the footer.
   -------------------------------------------------------------------------- */
.hero-style6 {
  background-color: var(--color-surface-light-1) !important;
  color: var(--color-body);
}

.hero-style6 h1, .hero-style6 h2, .hero-style6 h3,
.hero-style6 .title {
  color: var(--color-heading);
  -webkit-text-fill-color: var(--color-heading);
}

.hero-style6 p {
  color: var(--color-body);
}

.hero-style6 .sub-title {
  color: var(--brand-lime-900);
  -webkit-text-fill-color: var(--brand-lime-900);
}

/* --------------------------------------------------------------------------
   10. Global UI/UX Polish, Accessibility & Motion
   -------------------------------------------------------------------------- */

/* Scroll progress indicator */
#scrollProgressBar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--brand-lime) 0%, var(--brand-lime-200) 100%);
  z-index: 99999;
  transition: width 0.1s ease-out;
  pointer-events: none;
}

/* Accessible focus ring for keyboard navigation */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--brand-lime) !important;
  outline-offset: 3px !important;
  border-radius: 4px;
}

/* Enhanced Theme Toggle Floating Button */
#themeBtn {
  position: fixed;
  right: 28px;
  bottom: 96px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--brand-ink-2);
  color: var(--brand-lime);
  border: 1px solid rgba(195, 252, 16, 0.35);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
  z-index: 999;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#themeBtn:hover {
  background: var(--brand-lime);
  color: var(--brand-on-lime);
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 12px 28px rgba(195, 252, 16, 0.3);
}

/* Scroll to top button polish */
#scrollBtn {
  position: fixed;
  right: 28px;
  bottom: 36px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--brand-ink-2);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#scrollBtn.show {
  opacity: 1;
  visibility: visible;
}

#scrollBtn:hover {
  background: var(--brand-lime);
  color: var(--brand-on-lime);
  border-color: var(--brand-lime);
  transform: translateY(-3px);
}

/* --------------------------------------------------------------------------
   11. Interactive Neural Playground Component
   -------------------------------------------------------------------------- */
.neural-playground-wrapper {
  background: var(--brand-ink-2);
  border: 1px solid rgba(195, 252, 16, 0.2);
  border-radius: 20px;
  padding: 32px;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.35);
  margin-top: 24px;
  color: #ffffff;
  position: relative;
  overflow: hidden;
}

.neural-playground-wrapper::before {
  content: "";
  position: absolute;
  top: -80px;
  right: -80px;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(195, 252, 16, 0.12) 0%, transparent 70%);
  pointer-events: none;
}

.neural-playground-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.neural-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(195, 252, 16, 0.12);
  border: 1px solid rgba(195, 252, 16, 0.35);
  border-radius: 999px;
  font-size: 13px;
  font-weight: var(--f-semibold);
  color: var(--brand-lime);
}

.neural-badge .status-dot {
  width: 8px;
  height: 8px;
  background: var(--brand-lime);
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 8px var(--brand-lime);
  animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.85); }
}

.neural-modes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.neural-mode-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.85);
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: var(--f-medium);
  cursor: pointer;
  transition: all 0.25s ease;
}

.neural-mode-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.3);
}

.neural-mode-btn.active {
  background: var(--brand-lime);
  color: var(--brand-on-lime);
  border-color: var(--brand-lime);
  font-weight: var(--f-semibold);
  box-shadow: 0 4px 14px rgba(195, 252, 16, 0.25);
}

.neural-chips-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.neural-chips-label {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  margin-right: 4px;
}

.neural-chip {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.8);
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.neural-chip:hover {
  background: rgba(195, 252, 16, 0.12);
  border-color: var(--brand-lime);
  color: var(--brand-lime);
}

.neural-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

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

.neural-input-panel,
.neural-output-panel {
  display: flex;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 20px;
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.panel-title {
  font-size: 14px;
  font-weight: var(--f-semibold);
  color: rgba(255, 255, 255, 0.9);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.neural-textarea {
  width: 100%;
  height: 180px;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  color: #ffffff;
  padding: 14px;
  font-size: 14px;
  line-height: 1.6;
  font-family: inherit;
  resize: vertical;
  transition: border-color 0.2s ease;
}

.neural-textarea:focus {
  outline: none;
  border-color: var(--brand-lime);
}

.neural-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
}

.neural-run-btn {
  background: var(--brand-lime);
  color: var(--brand-on-lime);
  border: none;
  padding: 10px 22px;
  border-radius: 999px;
  font-weight: var(--f-semibold);
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.25s ease;
}

.neural-run-btn:hover {
  background: var(--brand-lime-200);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(195, 252, 16, 0.35);
}

.neural-run-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.neural-output-box {
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 16px;
  min-height: 180px;
  max-height: 280px;
  overflow-y: auto;
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Menlo, monospace;
  font-size: 13px;
  line-height: 1.7;
  color: #e2e8f0;
  white-space: pre-wrap;
  word-break: break-word;
}

.neural-cursor {
  display: inline-block;
  width: 8px;
  height: 15px;
  background: var(--brand-lime);
  margin-left: 2px;
  vertical-align: middle;
  animation: blink-cursor 0.8s infinite;
}

@keyframes blink-cursor {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.neural-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}

.neural-metric-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.neural-metric-item strong {
  color: var(--brand-lime);
}

.neural-copy-btn {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.8);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.neural-copy-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.4);
}

/* --------------------------------------------------------------------------
   12. Interactive Architecture Estimator (services.html)
   -------------------------------------------------------------------------- */
.arch-estimator-sec {
  background: var(--brand-ink);
  color: #ffffff;
  padding: 80px 0;
  position: relative;
}

.arch-estimator-box {
  background: var(--brand-ink-2);
  border: 1px solid rgba(195, 252, 16, 0.2);
  border-radius: 20px;
  padding: 36px;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.4);
}

.arch-step-title {
  font-size: 16px;
  font-weight: var(--f-bold);
  color: #ffffff;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.arch-step-title span {
  width: 26px;
  height: 26px;
  background: var(--brand-lime);
  color: var(--brand-on-lime);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: var(--f-bold);
}

.arch-options-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}

.arch-option-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 14px 16px;
  cursor: pointer;
  transition: all 0.25s ease;
  user-select: none;
}

.arch-option-card:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(195, 252, 16, 0.4);
  transform: translateY(-2px);
}

.arch-option-card.selected {
  background: rgba(195, 252, 16, 0.1);
  border-color: var(--brand-lime);
  box-shadow: 0 4px 16px rgba(195, 252, 16, 0.18);
}

.arch-option-card h5 {
  font-size: 14px;
  font-weight: var(--f-semibold);
  color: #ffffff;
  margin-bottom: 4px;
}

.arch-option-card p {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 0;
  line-height: 1.4;
}

.arch-result-card {
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(195, 252, 16, 0.3);
  border-radius: 14px;
  padding: 24px;
  height: 100%;
}

.arch-result-title {
  font-size: 18px;
  font-weight: var(--f-bold);
  color: var(--brand-lime);
  margin-bottom: 16px;
}

.arch-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.arch-tag {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #ffffff;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: var(--f-medium);
}

.arch-deliverables-list {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
}

.arch-deliverables-list li {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.82);
  margin-bottom: 8px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.arch-deliverables-list li i {
  color: var(--brand-lime);
  margin-top: 3px;
}

/* --------------------------------------------------------------------------
   13. Consultation / Contact Modal Dialog
   -------------------------------------------------------------------------- */
.consultation-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.consultation-modal.active {
  opacity: 1;
  visibility: visible;
}

.consultation-dialog {
  background: var(--brand-ink-2);
  border: 1px solid rgba(195, 252, 16, 0.3);
  border-radius: 20px;
  max-width: 580px;
  width: 100%;
  padding: 36px;
  color: #ffffff;
  position: relative;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
  transform: scale(0.95);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.consultation-modal.active .consultation-dialog {
  transform: scale(1);
}

.consultation-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: #ffffff;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}

.consultation-close:hover {
  background: var(--brand-lime);
  color: var(--brand-on-lime);
}

.consultation-email-box {
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  padding: 16px;
  margin: 20px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.consultation-email-box code {
  font-size: 15px;
  color: var(--brand-lime);
  font-family: inherit;
  font-weight: var(--f-bold);
}

/* --------------------------------------------------------------------------
   14. Card and Section Hover Micro-Interactions
   -------------------------------------------------------------------------- */
.ser-card,
.feature-card,
.ser-block2 {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.3s ease;
  border-radius: 14px;
}

.ser-card:hover,
.feature-card:hover,
.ser-block2:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.12);
}

/* Accordion UX enhancements */
.accordion-button:not(.collapsed) {
  background-color: var(--brand-lime-soft) !important;
  color: var(--brand-on-lime) !important;
  box-shadow: none;
}

.accordion-button:focus {
  box-shadow: none;
  border-color: var(--brand-lime);
}

.accordion-item {
  border-radius: 10px !important;
  overflow: hidden;
  margin-bottom: 12px;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

/* Reduced motion media query */
@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;
  }
}


/* --------------------------------------------------------------------------
   WhatsApp quick contact

   The company's number is the fastest route to a conversation, so it is one
   tap away from every page rather than only from the contact form. Lime
   surface with a black glyph, holding the invariant: white on lime would be
   1.22:1.
   -------------------------------------------------------------------------- */
.wa-float {
  position: fixed;
  inset-block-end: 24px;
  inset-inline-end: 24px;
  z-index: 9999;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--brand-lime);
  color: var(--brand-on-lime);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.wa-float:hover,
.wa-float:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
  color: var(--brand-on-lime);
}

/* Clear of the mobile viewport edge and any bottom bar. */
@media (max-width: 767px) {
  .wa-float {
    inset-block-end: 18px;
    inset-inline-end: 18px;
    width: 52px;
    height: 52px;
  }
}

/* Contact details block, used on the contact page. */
.contact-direct {
  display: grid;
  gap: 18px;
  margin-block: 28px 0;
}

.contact-direct a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: var(--f-semibold);
  color: var(--color-heading);
}

.contact-direct a:hover {
  color: var(--brand-lime-900);
}

.contact-direct .label {
  display: block;
  font-size: 14px;
  color: var(--color-body);
  font-weight: var(--f-regular);
  margin-block-end: 4px;
}