/* Legacy AI Collective - brand layer
   Design direction: "Legacy Structural Navy" (Novamira active design)
   Tokens are derived from the approved logo navy #0F1B26.
   The teal signal is a documented temporary token. */

:root {
  /* ---------------------------------------------------------------
     Dark theme - the default ground.

     Values are the dark column of the Legacy AI Collective design
     system role tokens. The light column below is the palette this
     file was built and browser-tested against and is unchanged.

     --lac-ink is the TEXT colour and inverts with the theme, so the
     surfaces that used to be painted with it take --lac-band, which
     stays a dark ground in both themes. See section 16.
     --------------------------------------------------------------- */

  --lac-bg: #0F1B26;            /* surface        - page ground */
  --lac-surface: #152433;       /* surface-raised - header, offcanvas */
  --lac-band: #152433;          /* emphasis band, closing panel, footer */
  --lac-ink: #E8ECEF;           /* ink            - primary text */
  --lac-ink-soft: #243445;
  --lac-muted: #A7B7C6;         /* ink-muted      - secondary text */
  --lac-line: #253748;          /* border         - default divider */
  --lac-line-control: #4F6B83;  /* border-strong  - interactive borders, 3:1 */
  --lac-line-ink: rgba(255, 255, 255, 0.16);
  --lac-muted-ink: #A7B7C6;
  --lac-on-band: #E8ECEF;       /* primary text on a band */
  --lac-accent: #4FC3B5;        /* brand          - teal-400 */
  --lac-accent-light: #4FC3B5;

  --lac-btn: #4FC3B5;           /* brand          - primary action */
  --lac-btn-ink: #0F1B26;       /* on-brand       - text on it */
  --lac-btn-hover: #6FD3C6;     /* derived lightening of teal-400 */
  --lac-btn-band: #4FC3B5;      /* primary action sitting on a band */
  --lac-btn-band-ink: #0F1B26;
  --lac-btn-band-hover: #6FD3C6;

  --lac-font-display: "Clash Grotesk", "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --lac-font-body: "Satoshi", "Space Grotesk", ui-sans-serif, system-ui, sans-serif;

  --lac-radius: 4px;
  --lac-radius-sm: 2px;
  --lac-wrap: 1200px;
  --lac-gutter: clamp(20px, 5vw, 32px);
  --lac-section-y: clamp(72px, 8vw, 112px);
}

/* Light theme - served when the visitor's system asks for it. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --lac-bg: #F4F6F7;
    --lac-surface: #FFFFFF;
    --lac-band: #0F1B26;
    --lac-ink: #0F1B26;
    --lac-ink-soft: #1B2B39;
    --lac-muted: #51606E;
    --lac-line: #DCE2E6;
    --lac-line-control: #DCE2E6;
    --lac-line-ink: rgba(255, 255, 255, 0.16);
    --lac-muted-ink: #AFBDC8;
    --lac-on-band: #FFFFFF;
    --lac-accent: #0A6459;
    --lac-accent-light: #5CCFBE;

    --lac-btn: #0F1B26;
    --lac-btn-ink: #FFFFFF;
    --lac-btn-hover: #1B2B39;
    --lac-btn-band: #FFFFFF;
    --lac-btn-band-ink: #0F1B26;
    --lac-btn-band-hover: #5CCFBE;
  }
}

/* Explicit opt-in hooks, for a toggle later. */
:root[data-theme="light"] {
  --lac-bg: #F4F6F7;
  --lac-surface: #FFFFFF;
  --lac-band: #0F1B26;
  --lac-ink: #0F1B26;
  --lac-ink-soft: #1B2B39;
  --lac-muted: #51606E;
  --lac-line: #DCE2E6;
  --lac-line-control: #DCE2E6;
  --lac-line-ink: rgba(255, 255, 255, 0.16);
  --lac-muted-ink: #AFBDC8;
  --lac-on-band: #FFFFFF;
  --lac-accent: #0A6459;
  --lac-accent-light: #5CCFBE;

  --lac-btn: #0F1B26;
  --lac-btn-ink: #FFFFFF;
  --lac-btn-hover: #1B2B39;
  --lac-btn-band: #FFFFFF;
  --lac-btn-band-ink: #0F1B26;
  --lac-btn-band-hover: #5CCFBE;
}

/* ---------------------------------------------------------------
   1. Accessibility primitives (site-wide)
   --------------------------------------------------------------- */

.lac-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.lac-skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 100000;
  display: inline-block;
  padding: 12px 20px;
  background: var(--lac-ink);
  color: #fff;
  font-family: var(--lac-font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--lac-radius);
  transition: top 120ms ease-out;
}

.lac-skip-link:focus {
  top: 16px;
  color: #fff;
}

/* Visible focus for every interactive element. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.elementor-button:focus-visible {
  outline: 2px solid var(--lac-accent);
  outline-offset: 3px;
  border-radius: var(--lac-radius-sm);
}

.lac-on-ink a:focus-visible,
.lac-on-ink button:focus-visible,
.lac-on-ink .elementor-button:focus-visible,
.ag-footer-1-area a:focus-visible,
.ag-header-2-area a:focus-visible,
.ag-header-2-area button:focus-visible,
.wa-offcanvas-area a:focus-visible,
.wa-offcanvas-area button:focus-visible {
  outline: 2px solid var(--lac-accent-light);
  outline-offset: 3px;
}

/* Respect reduced-motion across the theme's animation stack. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .wow,
  .animated {
    animation: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* If the animation script never runs, content must still be visible. */
.no-js .wow {
  visibility: visible !important;
}

/* ---------------------------------------------------------------
   2. Header (global, Aigora header style 2)
   --------------------------------------------------------------- */

.ag-header-2-area {
  background: var(--lac-surface);
  border-bottom: 1px solid var(--lac-line);
}

.ag-header-2-container {
  max-width: var(--lac-wrap);
  margin-inline: auto;
  padding-inline: var(--lac-gutter);
}

.ag-header-2-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 76px;
}

/* The theme draws a decorative white blob behind the nav; it fights a flat header. */
.ag-header-2-menu .bg-shape {
  display: none;
}

.ag-header-2-logo img.logo_site-size {
  display: block;
  width: auto;
  height: 34px;
  max-width: none;
}

.ag-header-2-menu {
  flex: 0 1 auto;
}

.ag-main-navigation .navbar-nav,
.ag-main-navigation ul.nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  flex-wrap: nowrap;
}

.ag-main-navigation .navbar-nav > li > a,
.ag-main-navigation ul.nav > li > a {
  display: inline-block;
  padding: 10px 14px;
  font-family: var(--lac-font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--lac-ink);
  text-decoration: none;
  border-radius: var(--lac-radius-sm);
  white-space: nowrap;
  transition: color 140ms ease, background-color 140ms ease;
}

.ag-main-navigation .navbar-nav > li > a:hover,
.ag-main-navigation ul.nav > li > a:hover {
  color: var(--lac-accent);
}

.ag-main-navigation .current-menu-item > a,
.ag-main-navigation .current_page_item > a {
  color: var(--lac-ink);
  box-shadow: inset 0 -2px 0 0 var(--lac-accent);
}

/* Header CTA */
.ag-header-2-action-btn {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ag-header-2-action-btn .ag-pr-btn-2 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  background: var(--lac-ink);
  color: #fff;
  font-family: var(--lac-font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid var(--lac-ink);
  border-radius: var(--lac-radius);
  transition: background-color 140ms ease, border-color 140ms ease;
}

.ag-header-2-action-btn .ag-pr-btn-2:hover {
  background: var(--lac-ink-soft);
  border-color: var(--lac-ink-soft);
  color: #fff;
}

/* The theme paints the label with CSS generated content and hides the icon chrome. */
.ag-header-2-action-btn .ag-pr-btn-2 .icon {
  display: none;
}

.ag-header-2-action-btn .ag-pr-btn-2 .text::before {
  content: attr(data-front);
}

/* Offcanvas trigger */
.ag-offcanvas-btn-2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  color: var(--lac-ink);
  font-size: 1.5rem;
  border: 1px solid var(--lac-line);
  border-radius: var(--lac-radius);
  cursor: pointer;
}

.ag-offcanvas-btn-2:hover {
  border-color: var(--lac-ink);
}

@media (max-width: 1199px) {
  .ag-header-2-wrap {
    min-height: 64px;
  }

  .ag-header-2-logo img.logo_site-size {
    height: 28px;
  }

  /* Keep the primary action reachable on small screens without crowding. */
  .ag-header-2-action-btn .ag-pr-btn-2 {
    padding: 9px 14px;
    font-size: 0.875rem;
  }
}

/* Keep the primary action visible at every width; shrink rather than hide. */
@media (max-width: 479px) {
  .ag-header-2-wrap {
    gap: 10px;
  }

  .ag-header-2-logo img.logo_site-size {
    height: 24px;
  }

  .ag-header-2-action-btn {
    gap: 8px;
  }

  .ag-header-2-action-btn .ag-pr-btn-2 {
    padding: 8px 12px;
    font-size: 0.8125rem;
  }

  .ag-offcanvas-btn-2 {
    width: 40px;
    height: 40px;
  }
}

/* Mobile offcanvas panel */
.wa-offcanvas-area .wa-offcanvas-wrap {
  background: var(--lac-surface);
  padding: 24px;
}

.wa-offcanvas-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--lac-line);
}

.wa-offcanvas-top-logo img.logo_site-m-size {
  display: block;
  width: auto;
  height: 28px;
}

.wa-offcanvas-close {
  position: relative;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  background: transparent;
  border: 1px solid var(--lac-line);
  border-radius: var(--lac-radius);
  cursor: pointer;
}

.wa-offcanvas-close span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 1.5px;
  background: var(--lac-ink);
}

.wa-offcanvas-close span:first-child {
  transform: translate(-50%, -50%) rotate(45deg);
}

.wa-offcanvas-close span:last-child {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.mobile-main-navigation .navbar-nav {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mobile-main-navigation .navbar-nav > li {
  border-bottom: 1px solid var(--lac-line);
}

.mobile-main-navigation .navbar-nav > li > a {
  display: block;
  padding: 16px 0;
  font-family: var(--lac-font-display);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--lac-ink);
  text-decoration: none;
}

.mobile-main-navigation .navbar-nav > li > a:hover {
  color: var(--lac-accent);
}

.wa-offcanvas-cta {
  margin-top: 28px;
}

/* ---------------------------------------------------------------
   3. Footer (global, Aigora footer style 1)
   --------------------------------------------------------------- */

.ag-footer-1-area {
  background: var(--lac-ink);
  color: var(--lac-muted-ink);
  padding-block: clamp(56px, 7vw, 88px) 32px;
}

.ag-footer-1-area .ag-container-1 {
  max-width: var(--lac-wrap);
  margin-inline: auto;
  padding-inline: var(--lac-gutter);
}

.ag-footer-1-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.4fr;
  gap: 40px;
  padding-bottom: 48px;
}

.ag-footer-1-brand .logo {
  display: block;
  width: auto;
  height: 32px;
  margin-bottom: 20px;
}

.ag-footer-1-area p.disc,
.ag-footer-1-area p.widget-disc {
  font-family: var(--lac-font-body);
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--lac-muted-ink);
  max-width: 34ch;
}

.ag-footer-1-widget-title {
  font-family: var(--lac-font-display);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 16px;
}

.ag-footer-1-widget ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ag-footer-1-widget ul li + li {
  margin-top: 10px;
}

.ag-footer-1-widget ul a {
  font-family: var(--lac-font-body);
  font-size: 0.9375rem;
  color: var(--lac-muted-ink);
  text-decoration: none;
  transition: color 140ms ease;
}

.ag-footer-1-widget ul a:hover {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.lac-footer-cta {
  display: inline-flex;
  align-items: center;
  margin-top: 18px;
  padding: 12px 20px;
  background: #fff;
  color: var(--lac-ink) !important;
  font-family: var(--lac-font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
  border-radius: var(--lac-radius);
  transition: background-color 140ms ease;
}

.lac-footer-cta:hover {
  background: var(--lac-accent-light);
  color: var(--lac-ink) !important;
  text-decoration: none;
}

.ag-footer-1-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  padding-top: 24px;
  border-top: 1px solid var(--lac-line-ink);
}

.ag-footer-1-bottom p {
  margin: 0;
  font-family: var(--lac-font-body);
  font-size: 0.875rem;
  color: var(--lac-muted-ink);
}

.ag-footer-1-watermark {
  display: none;
}

@media (max-width: 991px) {
  .ag-footer-1-top {
    grid-template-columns: 1fr 1fr;
    gap: 36px;
  }
}

@media (max-width: 575px) {
  .ag-footer-1-top {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .ag-footer-1-area p.disc,
  .ag-footer-1-area p.widget-disc {
    max-width: none;
  }
}

/* ---------------------------------------------------------------
   4. Homepage layout system
   --------------------------------------------------------------- */

body.lac-home {
  background: var(--lac-bg);
  font-family: var(--lac-font-body);
  color: var(--lac-ink);
}

body.lac-home .body-bg-1,
body.lac-home .bg-default {
  background: transparent;
}

/* Section shell */
.lac-home .lac-s {
  --lac-ground: var(--lac-bg);
  background: var(--lac-ground);
  padding-block: var(--lac-section-y);
  width: 100%;
}

.lac-home .lac-s > .e-con-inner {
  max-width: var(--lac-wrap);
  margin-inline: auto;
  padding-inline: var(--lac-gutter);
  width: 100%;
}

.lac-home .lac-s--surface {
  --lac-ground: var(--lac-surface);
}

.lac-home .lac-s--ink {
  --lac-ground: var(--lac-ink);
  color: #fff;
}

/* Typography */
.lac-home .lac-s h1,
.lac-home .lac-s h2,
.lac-home .lac-s h3 {
  font-family: var(--lac-font-display);
  color: inherit;
  margin: 0;
}

.lac-home .lac-h1 .elementor-heading-title {
  font-size: clamp(1.875rem, 1.1rem + 3.1vw, 3.5rem);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.lac-home .lac-h2 .elementor-heading-title {
  font-size: clamp(1.75rem, 1.25rem + 2vw, 2.75rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.015em;
  text-wrap: balance;
  max-width: 20ch;
}

.lac-home .lac-h3 .elementor-heading-title {
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -0.005em;
}

.lac-home .lac-eyebrow .elementor-heading-title {
  display: block;
  font-family: var(--lac-font-body);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lac-accent);
}

.lac-home .lac-s--ink .lac-eyebrow .elementor-heading-title {
  color: var(--lac-accent-light);
}

.lac-home .lac-body p,
.lac-home .lac-lead p {
  margin: 0 0 1em;
  font-family: var(--lac-font-body);
  color: var(--lac-muted);
}

.lac-home .lac-body p:last-child,
.lac-home .lac-lead p:last-child {
  margin-bottom: 0;
}

.lac-home .lac-body p {
  font-size: 1.0625rem;
  line-height: 1.65;
  max-width: 66ch;
}

.lac-home .lac-lead p {
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  line-height: 1.6;
  max-width: 60ch;
}

.lac-home .lac-s--ink .lac-body p,
.lac-home .lac-s--ink .lac-lead p {
  color: var(--lac-muted-ink);
}

.lac-home .lac-note p {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--lac-muted);
  max-width: 52ch;
  margin: 0;
}

/* Buttons (Elementor button widget wrapper classes) */
.lac-home .lac-cta .elementor-button,
.lac-home .lac-cta-secondary .elementor-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 26px;
  font-family: var(--lac-font-body);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0;
  text-align: center;
  border-radius: var(--lac-radius);
  border: 1px solid var(--lac-ink);
  box-shadow: none;
  transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease;
}

.lac-home .lac-cta .elementor-button {
  background: var(--lac-ink);
  color: #fff;
}

.lac-home .lac-cta .elementor-button:hover {
  background: var(--lac-ink-soft);
  border-color: var(--lac-ink-soft);
  color: #fff;
}

.lac-home .lac-cta-secondary .elementor-button {
  background: transparent;
  color: var(--lac-ink);
}

.lac-home .lac-cta-secondary .elementor-button:hover {
  background: var(--lac-ink);
  color: #fff;
}

.lac-home .lac-s--ink .lac-cta .elementor-button {
  background: #fff;
  color: var(--lac-ink);
  border-color: #fff;
}

.lac-home .lac-s--ink .lac-cta .elementor-button:hover {
  background: var(--lac-accent-light);
  border-color: var(--lac-accent-light);
  color: var(--lac-ink);
}

.lac-home .lac-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.lac-home .lac-btn-row > .elementor-element {
  width: auto;
  max-width: none;
}

@media (max-width: 479px) {
  .lac-home .lac-btn-row {
    flex-direction: column;
    align-items: stretch;
  }

  .lac-home .lac-btn-row .elementor-button {
    width: 100%;
  }
}

/* ---------------------------------------------------------------
   5. Section compositions
   --------------------------------------------------------------- */

/* 5.1 Hero - split, headline-led */
.lac-home .lac-hero {
  padding-block: clamp(48px, 6vw, 96px) clamp(64px, 7vw, 104px);
}

.lac-home .lac-hero > .e-con-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.lac-home .lac-hero__copy {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
  width: 100%;
  padding: 0;
}

.lac-home .lac-hero__visual {
  width: 100%;
  padding: 0;
}

@media (max-width: 1023px) {
  .lac-home .lac-hero > .e-con-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  .lac-home .lac-hero__visual {
    order: 2;
  }
}

/* 5.2 Problem grid - four items divided by hairlines */
.lac-home .lac-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-top: 56px;
  width: 100%;
  padding: 0;
  border-top: 1px solid var(--lac-line);
}

.lac-home .lac-grid-4 > .e-con {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px 28px 0 0;
  border-right: 1px solid var(--lac-line);
  width: 100%;
}

.lac-home .lac-grid-4 > .e-con:last-child {
  border-right: 0;
}

.lac-home .lac-grid-4 > .e-con + .e-con {
  padding-left: 28px;
}

.lac-home .lac-grid-4 .lac-body p {
  font-size: 0.9375rem;
  line-height: 1.6;
}

@media (max-width: 1023px) {
  .lac-home .lac-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lac-home .lac-grid-4 > .e-con:nth-child(2n) {
    border-right: 0;
  }

  .lac-home .lac-grid-4 > .e-con:nth-child(n + 3) {
    border-top: 1px solid var(--lac-line);
    margin-top: 28px;
  }

  .lac-home .lac-grid-4 > .e-con:nth-child(odd) {
    padding-left: 0;
  }

  .lac-home .lac-grid-4 > .e-con:nth-child(even) {
    padding-left: 28px;
  }
}

@media (max-width: 599px) {
  .lac-home .lac-grid-4 {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 40px;
  }

  .lac-home .lac-grid-4 > .e-con {
    border-right: 0;
    padding: 24px 0 0;
  }

  .lac-home .lac-grid-4 > .e-con + .e-con {
    padding-left: 0;
    border-top: 1px solid var(--lac-line);
    margin-top: 0;
  }
}

/* 5.3 Agitation - full-bleed ink band, editorial measure */
.lac-home .lac-band > .e-con-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}

.lac-home .lac-band__head,
.lac-home .lac-band__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  padding: 0;
}

@media (max-width: 899px) {
  .lac-home .lac-band > .e-con-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
}

/* 5.4 Approach - asymmetric split with a philosophy pull */
.lac-home .lac-approach > .e-con-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.lac-home .lac-approach__copy,
.lac-home .lac-approach__visual {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
  width: 100%;
  padding: 0;
}

.lac-home .lac-philosophy .elementor-heading-title {
  font-family: var(--lac-font-display);
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.625rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--lac-ink);
  padding-left: 20px;
  border-left: 2px solid var(--lac-accent);
}

@media (max-width: 1023px) {
  .lac-home .lac-approach > .e-con-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
}

/* 5.5 Solution categories - three hairline-separated columns */
.lac-home .lac-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-top: 56px;
  width: 100%;
  padding: 0;
  border-top: 1px solid var(--lac-line);
}

.lac-home .lac-grid-3 > .e-con {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 32px 32px 0 0;
  border-right: 1px solid var(--lac-line);
  width: 100%;
}

.lac-home .lac-grid-3 > .e-con:last-child {
  border-right: 0;
}

.lac-home .lac-grid-3 > .e-con + .e-con {
  padding-left: 32px;
}

.lac-home .lac-cat-label .elementor-heading-title {
  font-family: var(--lac-font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lac-muted);
}

.lac-home .lac-examples ul {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--lac-line);
}

.lac-home .lac-examples li {
  position: relative;
  padding: 9px 0 9px 18px;
  font-family: var(--lac-font-body);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--lac-muted);
  border-bottom: 1px solid var(--lac-line);
}

.lac-home .lac-examples li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.05em;
  width: 6px;
  height: 1px;
  background: var(--lac-accent);
}

.lac-home .lac-textlink a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--lac-font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--lac-ink);
  text-decoration: none;
  padding: 4px 0;
  box-shadow: inset 0 -1px 0 0 var(--lac-accent);
  transition: color 140ms ease, box-shadow 140ms ease;
}

.lac-home .lac-textlink a:hover {
  color: var(--lac-accent);
  box-shadow: inset 0 -2px 0 0 var(--lac-accent);
}

.lac-home .lac-cat-spacer {
  margin-top: auto;
}

@media (max-width: 899px) {
  .lac-home .lac-grid-3 {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 40px;
  }

  .lac-home .lac-grid-3 > .e-con {
    border-right: 0;
    padding: 28px 0 28px;
    border-bottom: 1px solid var(--lac-line);
  }

  .lac-home .lac-grid-3 > .e-con:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }

  .lac-home .lac-grid-3 > .e-con + .e-con {
    padding-left: 0;
  }
}

/* 5.6 Process rail - five ordered stages, legible without colour */
.lac-home .lac-rail {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  margin-top: 56px;
  width: 100%;
  padding: 0;
  border-top: 1px solid var(--lac-line);
}

.lac-home .lac-rail > .e-con {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 32px 24px 0 0;
  width: 100%;
}

.lac-home .lac-rail > .e-con::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 0;
  width: 9px;
  height: 9px;
  background: var(--lac-bg);
  border: 1px solid var(--lac-ink);
}

.lac-home .lac-rail .lac-h3 .elementor-heading-title {
  font-size: 1.0625rem;
}

.lac-home .lac-rail .lac-stage-n .elementor-heading-title {
  font-family: var(--lac-font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--lac-accent);
}

.lac-home .lac-rail .lac-body p {
  font-size: 0.9375rem;
  line-height: 1.55;
}

@media (max-width: 1023px) {
  .lac-home .lac-rail {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 40px;
    border-top: 0;
    border-left: 1px solid var(--lac-line);
    padding-left: 28px;
  }

  .lac-home .lac-rail > .e-con {
    padding: 0 0 28px;
  }

  .lac-home .lac-rail > .e-con:last-child {
    padding-bottom: 0;
  }

  .lac-home .lac-rail > .e-con::before {
    top: 6px;
    left: -33px;
  }
}

/* 5.7 Who this is for / trust - narrow editorial measure */
.lac-home .lac-editorial > .e-con-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}

.lac-home .lac-editorial__head,
.lac-home .lac-editorial__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
  padding: 0;
}

.lac-home .lac-s--hairline {
  border-top: 1px solid var(--lac-line);
}

@media (max-width: 899px) {
  .lac-home .lac-editorial > .e-con-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
}

/* 5.8 Closing CTA - the one tinted panel on the page */
.lac-home .lac-close > .e-con-inner {
  max-width: var(--lac-wrap);
}

.lac-home .lac-close__panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  width: 100%;
  padding: clamp(40px, 6vw, 72px);
  background: var(--lac-ink);
  border-radius: var(--lac-radius);
  color: #fff;
}

.lac-home .lac-close__panel .lac-h2 .elementor-heading-title {
  max-width: 18ch;
}

.lac-home .lac-close__panel .lac-body p,
.lac-home .lac-close__panel .lac-note p {
  color: var(--lac-muted-ink);
}

.lac-home .lac-close__panel .lac-cta .elementor-button {
  background: #fff;
  color: var(--lac-ink);
  border-color: #fff;
}

.lac-home .lac-close__panel .lac-cta .elementor-button:hover {
  background: var(--lac-accent-light);
  border-color: var(--lac-accent-light);
  color: var(--lac-ink);
}

.lac-home .lac-close__panel a:focus-visible,
.lac-home .lac-close__panel .elementor-button:focus-visible {
  outline-color: var(--lac-accent-light);
}

/* ---------------------------------------------------------------
   6. Structural visuals (inline SVG, decorative)
   --------------------------------------------------------------- */

.lac-figure {
  display: block;
  width: 100%;
}

.lac-figure svg {
  display: block;
  width: 100%;
  height: auto;
}

.lac-figure--hero {
  max-width: 520px;
  margin-left: auto;
}

.lac-figure--approach {
  max-width: 420px;
  margin-left: auto;
}

@media (max-width: 1023px) {
  .lac-figure--hero,
  .lac-figure--approach {
    max-width: 420px;
    margin-inline: 0;
  }
}

/* ---------------------------------------------------------------
   7. Elementor resets inside the homepage
   --------------------------------------------------------------- */

.lac-home .lac-s .elementor-widget-container {
  margin: 0;
}

.lac-home .lac-s .elementor-widget:not(:last-child) {
  margin-block-end: 0;
}

.lac-home .lac-s .elementor-widget-text-editor {
  color: inherit;
}

.lac-home .lac-s .elementor-button-wrapper {
  line-height: 1;
}

/* Elementor boxed containers add their own padding; the shell owns it here. */
.lac-home .lac-s > .e-con-inner > .e-con {
  --padding-block-start: 0;
  --padding-block-end: 0;
  --padding-inline-start: 0;
  --padding-inline-end: 0;
}

/* ---------------------------------------------------------------
   8. Section stacking + inner container defaults
   --------------------------------------------------------------- */

.lac-home .lac-s > .e-con-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  row-gap: 14px;
}

/* Grids and rails must still span the full measure inside that column. */
.lac-home .lac-grid-4,
.lac-home .lac-grid-3,
.lac-home .lac-rail,
.lac-home .lac-close__panel {
  align-self: stretch;
}

/* The heading stack reads better with a touch more air under the eyebrow. */
.lac-home .lac-s > .e-con-inner > .lac-eyebrow {
  margin-bottom: 2px;
}

.lac-home .lac-s > .e-con-inner > .lac-h2 + .lac-lead,
.lac-home .lac-s > .e-con-inner > .lac-h2 + .lac-body {
  margin-top: 6px;
}

.lac-home .lac-how .lac-btn-row,
.lac-home .lac-how > .e-con-inner > .lac-body {
  margin-top: 16px;
}

/* ---------------------------------------------------------------
   9. Plain content pages served through the Elementor header/footer
      template (assessment, business solutions, how it works, legal)
   --------------------------------------------------------------- */

body.lac-page {
  background: var(--lac-bg);
  font-family: var(--lac-font-body);
  color: var(--lac-ink);
}

body.lac-page .body-bg-1,
body.lac-page .bg-default {
  background: transparent;
}

body.lac-page .lac-main {
  display: block;
  max-width: 760px;
  margin-inline: auto;
  padding: clamp(56px, 7vw, 96px) var(--lac-gutter);
}

body.lac-page .lac-main h1,
body.lac-page .lac-main h2,
body.lac-page .lac-main h3 {
  font-family: var(--lac-font-display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--lac-ink);
}

body.lac-page .lac-main h2 {
  font-size: 1.5rem;
  margin: 2em 0 0.5em;
}

body.lac-page .lac-main h2:first-child {
  margin-top: 0;
}

body.lac-page .lac-main p,
body.lac-page .lac-main li {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--lac-muted);
}

body.lac-page .lac-main p {
  margin: 0 0 1.1em;
}

body.lac-page .lac-main ol,
body.lac-page .lac-main ul {
  margin: 0 0 1.4em;
  padding-left: 1.2em;
}

body.lac-page .lac-main li {
  margin-bottom: 0.6em;
}

body.lac-page .lac-main li strong {
  color: var(--lac-ink);
  font-weight: 600;
}

body.lac-page .lac-main a {
  color: var(--lac-ink);
  text-decoration: none;
  box-shadow: inset 0 -1px 0 0 var(--lac-accent);
  transition: color 140ms ease, box-shadow 140ms ease;
}

body.lac-page .lac-main a:hover {
  color: var(--lac-accent);
  box-shadow: inset 0 -2px 0 0 var(--lac-accent);
}

/* ---------------------------------------------------------------
   10. Corrections found in browser testing
   --------------------------------------------------------------- */

/* Elementor's global kit typography targets .elementor-heading-title directly
   and was winning the cascade for font-family, so the display face is bound at
   the same level as the sizes that already apply. */
.lac-home .lac-h1 .elementor-heading-title,
.lac-home .lac-h2 .elementor-heading-title,
.lac-home .lac-h3 .elementor-heading-title,
.lac-home .lac-philosophy .elementor-heading-title {
  font-family: var(--lac-font-display);
}

.lac-home .lac-eyebrow .elementor-heading-title,
.lac-home .lac-cat-label .elementor-heading-title,
.lac-home .lac-stage-n .elementor-heading-title {
  font-family: var(--lac-font-body);
}

.lac-home .lac-body p,
.lac-home .lac-lead p,
.lac-home .lac-note p,
.lac-home .lac-examples li,
.lac-home .lac-textlink a,
.lac-home .lac-cta .elementor-button,
.lac-home .lac-cta-secondary .elementor-button {
  font-family: var(--lac-font-body);
}

/* Very narrow phones: the header's logo, CTA and trigger together overran the
   viewport by ~10px at 320px. Tighten the whole row rather than drop the CTA. */
@media (max-width: 360px) {
  .ag-header-2-container {
    padding-inline: 14px;
  }

  .ag-header-2-wrap {
    gap: 8px;
    min-height: 58px;
  }

  .ag-header-2-logo {
    flex: 0 1 auto;
    min-width: 0;
  }

  .ag-header-2-logo img.logo_site-size {
    height: 20px;
  }

  .ag-header-2-action-btn {
    gap: 6px;
    flex: 0 0 auto;
  }

  .ag-header-2-action-btn .ag-pr-btn-2 {
    padding: 7px 10px;
    font-size: 0.75rem;
  }

  .ag-offcanvas-btn-2 {
    width: 36px;
    height: 36px;
    font-size: 1.25rem;
  }
}

/* Nothing in the header row may push the document wider than the viewport. */
.ag-header-2-area,
.ag-header-2-container,
.ag-header-2-wrap {
  max-width: 100%;
  box-sizing: border-box;
}

.ag-header-2-wrap {
  flex-wrap: nowrap;
}

/* Elementor's global kit also binds heading colour to --e-global-color-primary
   (its default light blue). Bind the brand colours at the same level, with the
   ink-ground and closing-panel inversions one step more specific. */
.lac-home .lac-h1 .elementor-heading-title,
.lac-home .lac-h2 .elementor-heading-title,
.lac-home .lac-h3 .elementor-heading-title,
.lac-home .lac-philosophy .elementor-heading-title {
  color: var(--lac-ink);
}

.lac-home .lac-s--ink .lac-h1 .elementor-heading-title,
.lac-home .lac-s--ink .lac-h2 .elementor-heading-title,
.lac-home .lac-s--ink .lac-h3 .elementor-heading-title,
.lac-home .lac-close__panel .lac-h2 .elementor-heading-title,
.lac-home .lac-close__panel .lac-h3 .elementor-heading-title {
  color: #FFFFFF;
}

/* Same for body copy rendered by the text editor widget. */
.lac-home .lac-body p,
.lac-home .lac-lead p,
.lac-home .lac-note p {
  color: var(--lac-muted);
}

.lac-home .lac-s--ink .lac-body p,
.lac-home .lac-s--ink .lac-lead p,
.lac-home .lac-s--ink .lac-note p,
.lac-home .lac-close__panel .lac-body p,
.lac-home .lac-close__panel .lac-note p {
  color: var(--lac-muted-ink);
}

.lac-home .lac-examples li {
  color: var(--lac-muted);
}

.lac-home .lac-textlink a {
  color: var(--lac-ink);
}

.lac-home .lac-textlink a:hover {
  color: var(--lac-accent);
}

/* ===============================================================
   11. Elementor container layout layer (authoritative)

   Elementor drives container layout from custom properties:
     .e-con, .e-con > .e-con-inner { display: var(--display) }
     .e-con.e-flex > .e-con-inner  { flex-direction: var(--flex-direction) }
     .e-con.e-flex                 { --flex-direction: column }
   so a rule that sets `display` without also setting `flex-direction`
   leaves every row stacked. These declarations come last in the file so
   they win the cascade over the generic section stacking above.
   =============================================================== */

/* --- Section shell: block outer, gutter + measure on the inner --- */
.lac-home .lac-s {
  display: block;
  padding-block: var(--lac-section-y);
  padding-inline: 0;
}

.lac-home .lac-s > .e-con-inner {
  padding-block: 0;
  padding-inline: var(--lac-gutter);
  max-width: var(--lac-wrap);
  margin-inline: auto;
  width: 100%;
}

/* Default section rhythm: a single stacked column. */
.lac-home .lac-s > .e-con-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  row-gap: 14px;
}

/* --- Two-column sections override that stack --- */
.lac-home .lac-s.lac-hero > .e-con-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  column-gap: clamp(32px, 5vw, 72px);
  row-gap: 40px;
  align-items: center;
}

.lac-home .lac-s.lac-band > .e-con-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  column-gap: clamp(28px, 5vw, 72px);
  row-gap: 24px;
  align-items: start;
}

.lac-home .lac-s.lac-approach > .e-con-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  column-gap: clamp(32px, 5vw, 72px);
  row-gap: 40px;
  align-items: center;
}

.lac-home .lac-s.lac-editorial > .e-con-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  column-gap: clamp(28px, 5vw, 72px);
  row-gap: 20px;
  align-items: start;
}

@media (max-width: 1023px) {
  .lac-home .lac-s.lac-hero > .e-con-inner,
  .lac-home .lac-s.lac-approach > .e-con-inner {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 899px) {
  .lac-home .lac-s.lac-band > .e-con-inner,
  .lac-home .lac-s.lac-editorial > .e-con-inner {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- Inner column wrappers (full containers) --- */
.lac-home .lac-hero__copy,
.lac-home .lac-hero__visual,
.lac-home .lac-approach__copy,
.lac-home .lac-approach__visual,
.lac-home .lac-band__head,
.lac-home .lac-band__body,
.lac-home .lac-editorial__head,
.lac-home .lac-editorial__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  row-gap: 18px;
  width: 100%;
  padding: 0;
  margin: 0;
}

.lac-home .lac-hero__visual,
.lac-home .lac-approach__visual {
  row-gap: 0;
}

/* --- Button rows must actually be rows --- */
.lac-home .lac-btn-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  column-gap: 12px;
  row-gap: 12px;
  width: auto;
  max-width: 100%;
  padding: 0;
  margin: 0;
}

.lac-home .lac-btn-row > .elementor-element {
  width: auto;
  max-width: none;
  flex: 0 0 auto;
}

@media (max-width: 479px) {
  .lac-home .lac-btn-row {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .lac-home .lac-btn-row > .elementor-element {
    width: 100%;
  }

  .lac-home .lac-btn-row .elementor-button {
    width: 100%;
  }
}

/* --- Grids and the process rail --- */
.lac-home .lac-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  width: 100%;
  padding: 0;
  margin-top: 42px;
  border-top: 1px solid var(--lac-line);
}

.lac-home .lac-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  width: 100%;
  padding: 0;
  margin-top: 42px;
  border-top: 1px solid var(--lac-line);
}

.lac-home .lac-rail {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  width: 100%;
  padding: 0;
  margin-top: 42px;
  border-top: 1px solid var(--lac-line);
}

.lac-home .lac-grid-4 > .e-con,
.lac-home .lac-grid-3 > .e-con,
.lac-home .lac-rail > .e-con {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  margin: 0;
}

.lac-home .lac-grid-4 > .e-con {
  row-gap: 10px;
  padding: 28px 28px 0 0;
  border-right: 1px solid var(--lac-line);
}

.lac-home .lac-grid-3 > .e-con {
  row-gap: 14px;
  padding: 32px 32px 0 0;
  border-right: 1px solid var(--lac-line);
}

.lac-home .lac-rail > .e-con {
  position: relative;
  row-gap: 8px;
  padding: 32px 24px 0 0;
}

.lac-home .lac-grid-4 > .e-con:last-child,
.lac-home .lac-grid-3 > .e-con:last-child {
  border-right: 0;
  padding-right: 0;
}

.lac-home .lac-grid-4 > .e-con + .e-con {
  padding-left: 28px;
}

.lac-home .lac-grid-3 > .e-con + .e-con {
  padding-left: 32px;
}

@media (max-width: 1023px) {
  .lac-home .lac-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lac-home .lac-grid-4 > .e-con:nth-child(2n) {
    border-right: 0;
    padding-right: 0;
  }

  .lac-home .lac-grid-4 > .e-con:nth-child(odd) {
    padding-left: 0;
  }

  .lac-home .lac-grid-4 > .e-con:nth-child(even) {
    padding-left: 28px;
  }

  .lac-home .lac-grid-4 > .e-con:nth-child(n + 3) {
    border-top: 1px solid var(--lac-line);
    margin-top: 28px;
  }

  .lac-home .lac-rail {
    grid-template-columns: minmax(0, 1fr);
    border-top: 0;
    border-left: 1px solid var(--lac-line);
    padding-left: 28px;
  }

  .lac-home .lac-rail > .e-con {
    padding: 0 0 28px;
  }

  .lac-home .lac-rail > .e-con:last-child {
    padding-bottom: 0;
  }

  .lac-home .lac-rail > .e-con::before {
    top: 6px;
    left: -33px;
  }
}

@media (max-width: 899px) {
  .lac-home .lac-grid-3 {
    grid-template-columns: minmax(0, 1fr);
  }

  .lac-home .lac-grid-3 > .e-con {
    border-right: 0;
    padding: 28px 0;
    border-bottom: 1px solid var(--lac-line);
  }

  .lac-home .lac-grid-3 > .e-con + .e-con {
    padding-left: 0;
  }

  .lac-home .lac-grid-3 > .e-con:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }
}

@media (max-width: 599px) {
  .lac-home .lac-grid-4 {
    grid-template-columns: minmax(0, 1fr);
  }

  .lac-home .lac-grid-4 > .e-con,
  .lac-home .lac-grid-4 > .e-con:nth-child(even),
  .lac-home .lac-grid-4 > .e-con:nth-child(odd) {
    border-right: 0;
    padding: 24px 0 0;
    margin-top: 0;
  }

  .lac-home .lac-grid-4 > .e-con + .e-con {
    border-top: 1px solid var(--lac-line);
  }
}

/* --- Closing panel --- */
.lac-home .lac-s.lac-close > .e-con-inner {
  display: block;
}

.lac-home .lac-close__panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  row-gap: 20px;
  width: 100%;
  margin: 0;
  padding: clamp(36px, 5.5vw, 72px);
  background: var(--lac-ink);
  border-radius: var(--lac-radius);
}

/* --- Figures sit tight to their column --- */
.lac-home .lac-figure {
  width: 100%;
  margin: 0;
}

.lac-home .lac-figure--hero {
  max-width: 500px;
  margin-left: auto;
}

.lac-home .lac-figure--approach {
  max-width: 380px;
  margin-left: auto;
}

@media (max-width: 1023px) {
  .lac-home .lac-figure--hero,
  .lac-home .lac-figure--approach {
    max-width: 380px;
    margin-left: 0;
  }
}

/* --- Theme scroll-to-top button carried the old demo orange --- */
.progress-wrap,
#scrollUp,
.scroll-up-btn,
.ag-scroll-up,
.wa-scroll-up {
  background: var(--lac-ink) !important;
  border-color: var(--lac-ink) !important;
  color: #fff !important;
  box-shadow: none !important;
}

.progress-wrap svg.progress-circle path,
.progress-wrap::after {
  stroke: var(--lac-accent-light) !important;
  color: #fff !important;
}

/* The theme's back-to-top control is .wa-back-to-top and carried the demo orange. */
.wa-back-to-top,
.wa-back-to-top.wa_backToTop {
  background: var(--lac-ink) !important;
  border: 1px solid var(--lac-ink) !important;
  border-radius: var(--lac-radius) !important;
  box-shadow: none !important;
}

.wa-back-to-top svg,
.wa-back-to-top svg path {
  fill: #FFFFFF !important;
}

.wa-back-to-top:hover {
  background: var(--lac-accent) !important;
  border-color: var(--lac-accent) !important;
}

.wa-back-to-top:focus-visible {
  outline: 2px solid var(--lac-accent);
  outline-offset: 3px;
}

/* ---------------------------------------------------------------
   12. Hero proportion

   At 1440 the copy column measured 591px while the two CTAs need 597px,
   so the secondary button wrapped to its own line, and the headline ran
   to three lines. Giving the copy column more of the split and easing the
   display ceiling puts the headline on two lines and the CTAs on one row.
   --------------------------------------------------------------- */

.lac-home .lac-s.lac-hero > .e-con-inner {
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
}

.lac-home .lac-h1 .elementor-heading-title {
  font-size: clamp(1.875rem, 1.15rem + 2.6vw, 3rem);
}

.lac-home .lac-figure--hero {
  max-width: 420px;
}

@media (max-width: 1023px) {
  .lac-home .lac-s.lac-hero > .e-con-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .lac-home .lac-figure--hero {
    max-width: 380px;
  }
}

/* ---------------------------------------------------------------
   13. Footer ground

   The theme paints .ag-footer-1-area with a white-to-grey gradient and
   nests a white, shadowed, 48px-radius card (.ag-footer-1-wrap) inside
   it, so a reversed logo and white headings land white-on-white. Flatten
   the card and let the ink ground carry the footer.
   --------------------------------------------------------------- */

.ag-footer-1-area {
  background: var(--lac-ink) !important;
  border-radius: 0 !important;
  padding-top: clamp(56px, 7vw, 88px) !important;
  padding-bottom: 32px !important;
  overflow: visible !important;
}

.ag-footer-1-area .ag-footer-1-wrap {
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.ag-footer-1-area .ag-footer-1-brand {
  max-width: none;
}

.ag-footer-1-area .ag-footer-1-brand .logo {
  display: block;
  width: auto;
  height: 30px;
  margin-bottom: 18px;
}

/* Section labels: small, quiet, legible on ink. */
.ag-footer-1-area .ag-footer-1-widget-title {
  font-family: var(--lac-font-body) !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.3 !important;
  color: #FFFFFF !important;
  padding-bottom: 0 !important;
  margin: 0 0 16px !important;
}

/* Two animated decorative bars sat under every footer heading. */
.ag-footer-1-area .ag-footer-1-widget-title span {
  display: none !important;
}

.ag-footer-1-area p.disc,
.ag-footer-1-area p.widget-disc {
  color: var(--lac-muted-ink) !important;
}

.ag-footer-1-area .ag-footer-1-widget ul a {
  color: var(--lac-muted-ink) !important;
}

.ag-footer-1-area .ag-footer-1-widget ul a:hover {
  color: #FFFFFF !important;
}

.ag-footer-1-area .ag-footer-1-bottom {
  border-top: 1px solid var(--lac-line-ink) !important;
  padding-top: 24px !important;
  margin-top: 8px;
}

.ag-footer-1-area .ag-footer-1-bottom .copyright,
.ag-footer-1-area .ag-footer-1-bottom .rights {
  color: var(--lac-muted-ink) !important;
  font-size: 0.875rem !important;
}

.ag-footer-1-area .lac-footer-cta {
  background: #FFFFFF !important;
  color: var(--lac-ink) !important;
}

.ag-footer-1-area .lac-footer-cta:hover {
  background: var(--lac-accent-light) !important;
  color: var(--lac-ink) !important;
}

/* Scroll reveal must never leave the footer permanently invisible. */
.ag-footer-1-area .ag-footer-1-wrap.wow {
  visibility: visible !important;
}

/* ---------------------------------------------------------------
   14. Hero clearance under the absolute header

   The theme positions .ag-header-2-area absolutely (top: 12px), so it is
   out of flow and the hero has to reserve its own clearance. At 390px the
   header ran to y=77 while the hero's top padding was only 72px, clipping
   the eyebrow.
   --------------------------------------------------------------- */

.lac-home .lac-s.lac-hero {
  padding-top: 124px;
  padding-bottom: var(--lac-section-y);
}

@media (max-width: 1199px) {
  .lac-home .lac-s.lac-hero {
    padding-top: 108px;
  }
}

/* Plain content pages carry the same absolute header. */
body.lac-page .lac-main {
  padding-top: clamp(116px, 12vw, 148px);
}

/* ---------------------------------------------------------------
   15. Footer rhythm
   --------------------------------------------------------------- */

.ag-footer-1-area .ag-footer-1-top {
  align-items: start;
  padding-bottom: 40px !important;
}

.ag-footer-1-area .lac-footer-cta {
  font-size: 0.875rem !important;
  padding: 11px 16px !important;
}

/* Page title on plain content pages (supplied by the plugin, since the
   Elementor header/footer template prints content only). */
body.lac-page .lac-main .lac-page-title {
  font-family: var(--lac-font-display);
  font-size: clamp(1.875rem, 1.3rem + 1.8vw, 2.5rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--lac-ink);
  margin: 0 0 24px;
  text-wrap: balance;
}

/* ===============================================================
   16. Dark theme

   The token block inverts --lac-ink, so anything that used it as a
   GROUND rather than as text is restated here against --lac-band and
   the button tokens. Every declaration resolves to the original light
   value under the light palette, so this section is a no-op there.
   =============================================================== */

/* --- Grounds that were painted with the text token --- */

.lac-skip-link {
  background: var(--lac-band);
  color: var(--lac-on-band);
}

.lac-skip-link:focus {
  color: var(--lac-on-band);
}

.lac-home .lac-s--ink {
  --lac-ground: var(--lac-band);
  color: var(--lac-on-band);
}

.lac-home .lac-close__panel {
  background: var(--lac-band);
  color: var(--lac-on-band);
}

.ag-footer-1-area {
  background: var(--lac-band) !important;
}

/* --- Headings and labels that sit on a band --- */

.lac-home .lac-s--ink .lac-h1 .elementor-heading-title,
.lac-home .lac-s--ink .lac-h2 .elementor-heading-title,
.lac-home .lac-s--ink .lac-h3 .elementor-heading-title,
.lac-home .lac-close__panel .lac-h2 .elementor-heading-title,
.lac-home .lac-close__panel .lac-h3 .elementor-heading-title {
  color: var(--lac-on-band);
}

.ag-footer-1-area .ag-footer-1-widget-title {
  color: var(--lac-on-band) !important;
}

.ag-footer-1-area .ag-footer-1-widget ul a:hover {
  color: var(--lac-on-band) !important;
}

/* --- Primary actions on the page ground --- */

.ag-header-2-action-btn .ag-pr-btn-2,
.lac-home .lac-cta .elementor-button {
  background: var(--lac-btn);
  border-color: var(--lac-btn);
  color: var(--lac-btn-ink);
}

.ag-header-2-action-btn .ag-pr-btn-2:hover,
.lac-home .lac-cta .elementor-button:hover {
  background: var(--lac-btn-hover);
  border-color: var(--lac-btn-hover);
  color: var(--lac-btn-ink);
}

.lac-home .lac-cta-secondary .elementor-button {
  background: transparent;
  border-color: var(--lac-ink);
  color: var(--lac-ink);
}

.lac-home .lac-cta-secondary .elementor-button:hover {
  background: var(--lac-btn);
  border-color: var(--lac-btn);
  color: var(--lac-btn-ink);
}

/* --- Primary actions sitting on a band --- */

.lac-home .lac-s--ink .lac-cta .elementor-button,
.lac-home .lac-close__panel .lac-cta .elementor-button,
.lac-footer-cta,
.ag-footer-1-area .lac-footer-cta {
  background: var(--lac-btn-band) !important;
  border-color: var(--lac-btn-band) !important;
  color: var(--lac-btn-band-ink) !important;
}

.lac-home .lac-s--ink .lac-cta .elementor-button:hover,
.lac-home .lac-close__panel .lac-cta .elementor-button:hover,
.lac-footer-cta:hover,
.ag-footer-1-area .lac-footer-cta:hover {
  background: var(--lac-btn-band-hover) !important;
  border-color: var(--lac-btn-band-hover) !important;
  color: var(--lac-btn-band-ink) !important;
}

/* --- Scroll-to-top: navy on a navy page is not a control --- */

.progress-wrap,
#scrollUp,
.scroll-up-btn,
.ag-scroll-up,
.wa-scroll-up,
.wa-back-to-top,
.wa-back-to-top.wa_backToTop {
  background: var(--lac-btn) !important;
  border-color: var(--lac-btn) !important;
  color: var(--lac-btn-ink) !important;
}

.wa-back-to-top svg,
.wa-back-to-top svg path {
  fill: var(--lac-btn-ink) !important;
}

.wa-back-to-top:hover {
  background: var(--lac-btn-hover) !important;
  border-color: var(--lac-btn-hover) !important;
}

/* --- Interactive borders carry meaning, so they hold 3:1 (system 13) --- */

.ag-offcanvas-btn-2,
.wa-offcanvas-close {
  border-color: var(--lac-line-control);
}

.ag-offcanvas-btn-2:hover {
  border-color: var(--lac-ink);
}

/* --- Page ground stays scoped to the templates this layer owns ---

   body.lac-home and body.lac-page already carry var(--lac-bg), so they
   follow the theme automatically. A global body ground was tried here
   and reverted: /about/ and /contact/ are built in Elementor and get
   neither class, so their widget text - coloured by the Elementor kit,
   not by this file - would have landed dark on a dark ground. Those
   templates keep the ground they have today. The header and footer are
   global, so they follow the dark palette everywhere. */

/* ---------------------------------------------------------------
   16.1 Header lockup

   The header markup serves the navy wordmark, which is right on the
   light ground and invisible on the dark one. The white lockup that
   already ships beside this file is swapped in for the dark default
   and the swap is undone when the visitor asks for light. The paths
   resolve against this stylesheet, so they follow its scheme.
   --------------------------------------------------------------- */

.ag-header-2-logo img.logo_site-size,
.wa-offcanvas-top-logo img.logo_site-m-size {
  content: url("legacy-wordmark-white.svg");
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .ag-header-2-logo img.logo_site-size,
  :root:not([data-theme="dark"]) .wa-offcanvas-top-logo img.logo_site-m-size {
    content: normal;
  }
}

:root[data-theme="light"] .ag-header-2-logo img.logo_site-size,
:root[data-theme="light"] .wa-offcanvas-top-logo img.logo_site-m-size {
  content: normal;
}
/* ===============================================================
   17. Imagery

   Four photographs, all Unsplash License (free, commercial use, no
   permission required). They are decorative: every one sits behind or
   beside copy that already carries the meaning, so they are painted as
   backgrounds and stay out of the accessibility tree rather than
   carrying alt text that would only repeat the heading beside them.

   Each was centre-cropped, desaturated and dimmed server-side so it
   sits on the navy ground instead of glaring off it. WebP first with a
   JPEG fallback for browsers without image-set().
   =============================================================== */

/* --- 17.1 The structural band ---
   The "cost of the wrong fix" band takes a brutalist concrete grid as
   texture. The overlay is heavy on purpose: the picture is a ground,
   not a subject, and the body copy over it holds about 9:1. */

.lac-home .lac-s.lac-band {
  background-image:
    linear-gradient(rgba(21, 36, 51, 0.88), rgba(21, 36, 51, 0.93)),
    url("img/band-structure-1200.jpg");
  background-image:
    linear-gradient(rgba(21, 36, 51, 0.88), rgba(21, 36, 51, 0.93)),
    image-set(url("img/band-structure-1200.webp") type("image/webp") 1x,
              url("img/band-structure-2400.webp") type("image/webp") 2x);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

@media (min-width: 1200px) {
  .lac-home .lac-s.lac-band {
    background-image:
      linear-gradient(rgba(21, 36, 51, 0.88), rgba(21, 36, 51, 0.93)),
      url("img/band-structure-2400.jpg");
    background-image:
      linear-gradient(rgba(21, 36, 51, 0.88), rgba(21, 36, 51, 0.93)),
      image-set(url("img/band-structure-2400.webp") type("image/webp") 1x);
  }
}

/* --- 17.2 Category cards ---
   One image per solution category, set as the card's leading element. */

.lac-home .lac-grid-3 > .e-con::before {
  content: "";
  display: block;
  align-self: stretch;
  width: 100%;
  aspect-ratio: 16 / 10;
  margin-bottom: 4px;
  background-color: var(--lac-surface);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: var(--lac-radius);
  filter: saturate(0.9);
  transition: transform 420ms cubic-bezier(0.2, 0.6, 0.2, 1),
              filter 420ms ease;
}

.lac-home .lac-grid-3 > .e-con:nth-child(1)::before {
  background-image: url("img/cat-diagnosis-800.jpg");
  background-image: image-set(url("img/cat-diagnosis-400.webp") type("image/webp") 1x,
                              url("img/cat-diagnosis-800.webp") type("image/webp") 2x);
}

.lac-home .lac-grid-3 > .e-con:nth-child(2)::before {
  background-image: url("img/cat-systems-800.jpg");
  background-image: image-set(url("img/cat-systems-400.webp") type("image/webp") 1x,
                              url("img/cat-systems-800.webp") type("image/webp") 2x);
}

.lac-home .lac-grid-3 > .e-con:nth-child(3)::before {
  background-image: url("img/cat-experience-800.jpg");
  background-image: image-set(url("img/cat-experience-400.webp") type("image/webp") 1x,
                              url("img/cat-experience-800.webp") type("image/webp") 2x);
}

/* The cards gain a top edge once they carry an image, so the hairline
   that divided them needs a little more room to breathe. */
.lac-home .lac-grid-3 > .e-con {
  padding-top: 24px;
}
/* ===============================================================
   18. Motion and interaction

   Takes the Aigora demo's three moves - a moving divider, cards that
   answer the pointer, and content that arrives on scroll - and rebuilds
   them quietly. The theme's own .wow stack stays disabled.

   Every effect is opt-in through a class that brand-motion.js adds only
   after confirming the browser is not asking for reduced motion, so with
   JS off, or with reduce set, the page renders complete and still.
   Nothing here hides content on its own.
   =============================================================== */

/* --- 18.1 Scroll reveal --- */

@media (prefers-reduced-motion: no-preference) {
  .lac-home .lac-reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 620ms ease, transform 620ms cubic-bezier(0.2, 0.6, 0.2, 1);
  }

  .lac-home .lac-reveal.is-in {
    opacity: 1;
    transform: none;
  }

  .lac-home .lac-stagger > .e-con {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 520ms ease, transform 520ms cubic-bezier(0.2, 0.6, 0.2, 1);
  }

  .lac-home .lac-stagger.is-in > .e-con {
    opacity: 1;
    transform: none;
  }

  .lac-home .lac-stagger.is-in > .e-con:nth-child(2) { transition-delay: 70ms; }
  .lac-home .lac-stagger.is-in > .e-con:nth-child(3) { transition-delay: 140ms; }
  .lac-home .lac-stagger.is-in > .e-con:nth-child(4) { transition-delay: 210ms; }
  .lac-home .lac-stagger.is-in > .e-con:nth-child(5) { transition-delay: 280ms; }
}
/* --- 18.2 Cards answer the pointer ---
   The hairline grid is the page's structure, so the hover moves the
   hairline rather than floating the card off the page: the rule under
   the card thickens into brand teal and the image lifts a little. */

.lac-home .lac-grid-3 > .e-con,
.lac-home .lac-grid-4 > .e-con {
  position: relative;
  transition: border-color 240ms ease;
}

.lac-home .lac-grid-3 > .e-con::after,
.lac-home .lac-grid-4 > .e-con::after {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  height: 2px;
  width: 0;
  background: var(--lac-accent);
  transition: width 360ms cubic-bezier(0.2, 0.6, 0.2, 1);
}

.lac-home .lac-grid-3 > .e-con:hover::after,
.lac-home .lac-grid-3 > .e-con:focus-within::after,
.lac-home .lac-grid-4 > .e-con:hover::after,
.lac-home .lac-grid-4 > .e-con:focus-within::after {
  width: 100%;
}

.lac-home .lac-grid-3 > .e-con:hover::before,
.lac-home .lac-grid-3 > .e-con:focus-within::before {
  transform: translateY(-3px) scale(1.012);
  filter: saturate(1.04);
}

/* The category link already carries an inset rule; deepen it in step. */
.lac-home .lac-grid-3 > .e-con:hover .lac-textlink a {
  color: var(--lac-accent);
  box-shadow: inset 0 -2px 0 0 var(--lac-accent);
}

/* On a touch screen there is no hover, so the rule is simply present. */
@media (hover: none) {
  .lac-home .lac-grid-3 > .e-con::after,
  .lac-home .lac-grid-4 > .e-con::after {
    display: none;
  }
}

/* --- 18.3 The process rail fills as it is read --- */

.lac-home .lac-rail > .e-con::before {
  transition: background-color 300ms ease, border-color 300ms ease;
}

.lac-home .lac-rail > .e-con.is-in::before {
  background: var(--lac-accent);
  border-color: var(--lac-accent);
}
/* --- 18.4 Moving divider ---
   The Aigora demos put a moving divider between every section. This is
   that idea at a much lower volume: one quiet band, the site's own
   capability words, no colour shift, faded at both ends so it reads as
   a rule rather than a banner. It pauses on hover and on focus, holds
   still entirely under reduced motion, and is hidden from assistive
   technology because every word in it already appears in the copy. */

.lac-ticker {
  overflow: hidden;
  width: 100%;
  padding-block: 15px;
  background: var(--lac-surface);
  border-block: 1px solid var(--lac-line);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.lac-ticker__track {
  display: flex;
  width: max-content;
  align-items: center;
  animation: lac-ticker-slide 48s linear infinite;
}

.lac-ticker:hover .lac-ticker__track,
.lac-ticker:focus-within .lac-ticker__track {
  animation-play-state: paused;
}

.lac-ticker__item {
  display: inline-flex;
  align-items: center;
  gap: 22px;
  padding-right: 22px;
  font-family: var(--lac-font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lac-muted);
  white-space: nowrap;
}

.lac-ticker__item::after {
  content: "";
  width: 5px;
  height: 5px;
  flex: 0 0 5px;
  background: var(--lac-accent);
}

@keyframes lac-ticker-slide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

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