/* ==========================================================================
   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.
   -------------------------------------------------------------------------- */
/* The template draws decorative carets on top-level items through rules that
   are awkward to pin down. Rather than fight specificity, all of its pseudo
   carets are suppressed and the real one is a span in the markup — which
   cannot be overridden by a rule we have not found. */
.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 .menu-caret {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-inline-start: 7px;
  border-inline-end: 1.6px solid currentColor;
  border-block-end: 1.6px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.18s ease;
}

.main-menu .mainmenu > li:hover .menu-caret {
  transform: translateY(0) rotate(-135deg);
}

.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;
}

/* This block sets its own ink through the template's --color-heading and
   --color-body, neither of which dark mode redefines. It sits inside the
   contact card, which does darken, so it needs the site tokens instead. */
.active-body .contact-direct a {
  color: var(--lc-text);
}

.active-body .contact-direct a:hover {
  color: var(--lc-lime-text);
}

.active-body .contact-direct .label {
  color: var(--lc-muted);
}

/* --------------------------------------------------------------------------
   Direct contact, replacing the form

   The form had no endpoint, so it shipped disabled with a note pointing
   elsewhere — the most prominent control on the page was the one thing that
   did not work. WhatsApp and a phone call reach the company directly, which
   is both a better route for the visitor and one less system to build.
   -------------------------------------------------------------------------- */
.contact-actions {
  display: grid;
  gap: 18px;
  align-content: start;
}

.contact-actions h2 {
  margin: 0;
}

.contact-actions p {
  margin: 0;
  max-width: 46ch;
}

.contact-actions-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-block-start: 6px;
}

/* The primary action is a lime surface with a black label: 17.25:1.
   White on lime would be 1.22:1, which the invariant forbids. */
.contact-actions .contact-action-primary {
  background: var(--brand-lime);
  color: var(--brand-on-lime);
  border-color: var(--brand-lime);
}

.contact-actions .contact-action-primary:hover,
.contact-actions .contact-action-primary span {
  color: var(--brand-on-lime);
}

.contact-actions-email {
  font-size: 15px;
}

/* --lc-lime-text is #546f01 in light, the same value --brand-lime-900 carries,
   and brightens to the full lime under .active-body. The card behind this link
   is now dark in dark mode, so the link has to brighten with it. */
.contact-actions-email a {
  color: var(--lc-lime-text);
  text-decoration: underline;
  font-weight: var(--f-semibold);
}

/* --------------------------------------------------------------------------
   Header layout with the full menu

   The template's header is a Bootstrap row of auto-width columns, sized for
   a four-item menu. The site now has six top-level items with submenus, and
   the middle column grew until the last one — search and the call to action —
   wrapped onto a second line on every page.

   The row is told not to wrap and the menu is allowed to shrink, so the
   header stays one line. Spacing is tightened rather than the type shrunk,
   which keeps the labels legible.
   -------------------------------------------------------------------------- */
.header-menu-area > .row {
  flex-wrap: nowrap;
}

.header-menu-area > .row > .col-auto {
  min-width: 0;
}

.main-menu .mainmenu {
  gap: 2px;
  flex-wrap: nowrap;
}

.main-menu .mainmenu > li > a {
  display: inline-flex;
  align-items: center;
  padding: 9px 13px;
  white-space: nowrap;
  font-size: 15px;
  /* Equal line-height on every item; without it the ones carrying a caret
     sit on a different baseline from the ones that do not. */
  line-height: 1.2;
}

/* Submenus: the template styles .sub-menu for its own mega-menu, which no
   longer exists. These are plain dropdowns and need their own presentation. */
.main-menu .mainmenu > li {
  position: relative;
}

.main-menu .mainmenu > li > .sub-menu {
  position: absolute;
  inset-block-start: calc(100% + 8px);
  inset-inline-start: 0;
  min-width: 244px;
  margin: 0;
  padding: 10px;
  list-style: none;
  background: var(--color-surface-white);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  z-index: 999;
}

.main-menu .mainmenu > li:hover > .sub-menu,
.main-menu .mainmenu > li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.main-menu .mainmenu > li > .sub-menu li a {
  display: block;
  padding: 9px 12px;
  border-radius: 9px;
  font-size: 15px;
  white-space: nowrap;
  color: var(--color-heading);
}

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

/* Below the desktop breakpoint the offcanvas menu takes over, as the
   template already intends. */
@media (max-width: 1199px) {
  .header-menu-area > .row {
    flex-wrap: wrap;
  }
}

/* --------------------------------------------------------------------------
   Generated content pages

   The eighteen pages built from the content model borrowed the template's
   .ser-block2 and .sec-title, which are styled for the layouts they ship in.
   Reused here they gave unpadded text with the section headings colliding
   into the headline above them. These pages get their own namespace instead.
   -------------------------------------------------------------------------- */
.lc-page {
  padding-block: clamp(64px, 8vw, 120px);
}

/* Intro: headline on one side, lede and capabilities on the other. */
.lc-page .lc-intro {
  align-items: start;
  row-gap: 28px;
  margin-block-end: clamp(48px, 6vw, 88px);
}

.lc-page .lc-intro .sec-title {
  margin-block-end: 0;
}

.lc-page .lc-intro .sec-title .title {
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.14;
  letter-spacing: -1.5px;
  margin-block-end: 0;
}

.lc-page .lc-lede p {
  font-size: 18px;
  line-height: 1.7;
  margin-block-end: 24px;
  color: var(--color-body);
}

/* Capabilities: a two-column list with a lime marker, not a bare bullet. */
.lc-page .lc-capabilities {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px 26px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lc-page .lc-capabilities li {
  position: relative;
  padding-block: 9px;
  padding-inline-start: 26px;
  border-block-end: 1px solid var(--color-border);
  font-weight: var(--f-medium);
  color: var(--color-heading);
}

.lc-page .lc-capabilities li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 17px;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--brand-lime);
}

/* Question-and-answer cards. These are the FAQ entries marked up in JSON-LD,
   so they need to read as discrete answers rather than a wall of prose. */
.lc-page .lc-qa {
  row-gap: 24px;
}

.lc-page .lc-card {
  height: 100%;
  padding: clamp(24px, 2.6vw, 36px);
  background: var(--color-surface-light-3);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.lc-page .lc-card:hover {
  border-color: var(--brand-lime-900);
  transform: translateY(-2px);
}

.lc-page .lc-card-title {
  font-size: clamp(20px, 1.8vw, 25px);
  line-height: 1.25;
  letter-spacing: -0.6px;
  margin-block: 0 12px;
  color: var(--color-heading);
}

.lc-page .lc-card p {
  margin: 0;
  font-size: 16px;
  line-height: 1.75;
  color: var(--color-body);
}

@media (max-width: 991px) {
  .lc-page .lc-intro .sec-title .title {
    font-size: clamp(26px, 6vw, 34px);
  }
}

/* --------------------------------------------------------------------------
   A note on horizontal overflow

   A scan flagged the marquee bands as overflowing the viewport. Measuring
   instead of trusting the scan — rendering at a 1200px window and comparing
   the painted width — showed the document is exactly 1200px on every page.
   The bands are full-bleed by design and touch the edge on purpose.

   No rule is added. The overflow-x: clip written here first was fixing
   nothing, and clipping the document root would have broken any future
   sticky positioning for no gain.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Narrow viewports

   The template ships no blanket rule constraining images, and the logo file
   is 440px wide. Below roughly 600px that one image fills the whole screen
   and pushes the header out of shape — verified by rendering with and
   without this block side by side.

   WHAT THIS IS NOT. A first pass concluded the pages overflowed their
   viewport, from screenshots that showed the logo and headings cut off at
   the right edge. They were not. A probe injected into the page reported
   clientWidth == scrollWidth == 500 with nothing extending past it; the only
   elements outside the viewport were the offcanvas menu at negative
   coordinates, which is where it belongs.

   The cut-off was an artefact of the capture: headless Chrome has a minimum
   window width of around 500px, so a request for a 390px window produced a
   500px layout cropped to a 390px image. A screenshot's width is the window,
   never the document, so it cannot show overflow — it can only hide it.
   These rules are responsive sizing, not an overflow fix.
   -------------------------------------------------------------------------- */
img,
svg,
video {
  max-width: 100%;
  height: auto;
}

/* The anchor around the logo carries no class, so the selector targets any
   image inside the logo containers. An earlier version keyed on `.logo img`
   and matched nothing at all. */
.header-logo img,
.side-menu img.logo,
.side-menu .logo img,
.footer-logo img,
.footer-widget img {
  width: auto;
  max-height: 44px;
  object-fit: contain;
}

@media (max-width: 575px) {
  .header-logo img,
  .side-menu img.logo,
  .side-menu .logo img,
  .footer-logo img,
  .footer-widget img {
    max-height: 30px;
  }
}

/* Long display headings must wrap rather than run past the edge. The banner
   titles are set in a size chosen for desktop; on a phone they need to be
   free to break and to scale down. */
.page-banner11 .title,
.hero-style1 .hero-title,
.hero-style1 .gradient-title,
.hero-style6 .title,
.lc-page .lc-intro .sec-title .title,
.lc-page .lc-card-title {
  overflow-wrap: anywhere;
  hyphens: auto;
}

@media (max-width: 767px) {
  .page-banner11 .title {
    font-size: clamp(26px, 8vw, 40px);
    line-height: 1.15;
  }

  .hero-style1 .hero-title,
  .hero-style1 .gradient-title,
  .hero-style6 .title {
    font-size: clamp(28px, 8.5vw, 44px);
    line-height: 1.12;
    letter-spacing: -1px;
  }

  /* The oversized decorative wordmark is a desktop flourish; at phone width
     it is simply a horizontal scrollbar. */
  .video-banner .banner-content .title2,
  .staff-text {
    font-size: clamp(44px, 16vw, 90px);
    overflow-wrap: anywhere;
  }

  .lc-page {
    padding-block: 56px;
  }
}

/* Tables and pre blocks scroll inside themselves rather than widening the
   document, which is the other common source of sideways scroll. */
table,
pre {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}