/* ==========================================================================
   Laxman Enterprises — styles.css
   Every selector is scoped under .lx so this can be pasted into a WordPress
   page without style bleed. Breakpoints: 640px / 900px / 1200px. Mobile-first.
   ========================================================================== */

/* GLOBAL RESET — remove this block if pasting into WordPress */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }
img, picture, video, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
/* END GLOBAL RESET */


/* ==========================================================================
   FONTS — self-hosted, no network calls
   ========================================================================== */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/poppins-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/poppins-700.woff2') format('woff2');
}
/* Inter ships as a variable font — one file covers 400/500/600 */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('assets/fonts/inter-var.woff2') format('woff2');
}


/* ==========================================================================
   TOKENS + ROOT WRAPPER
   ========================================================================== */
.lx {
  /* Brand — from the client's printed business card */
  --lx-ink:            #101A45;
  --lx-brand-blue:     #2D3092;
  --lx-brand-blue-700: #1E216B;
  --lx-brand-blue-100: #E7E8F5;

  --lx-accent:         #EB5C41;
  --lx-accent-700:     #C8452C;
  --lx-accent-100:     #FDEDE9;

  --lx-amber:          #E4802D;
  --lx-amber-swash:    rgba(228,128,45,.55);  /* heading underline, amber @ 55% */

  --lx-wa:             #25D366;
  --lx-wa-700:         #1DA851;

  /* Neutrals */
  --lx-white:          #FFFFFF;
  --lx-paper:          #F7F8FB;
  --lx-line:           #E2E5EE;
  --lx-muted:          #5A6478;
  --lx-body:           #2A3140;

  /* Type scale (fluid) */
  --lx-h1: clamp(2rem, 1.35rem + 3.1vw, 3.5rem);
  --lx-h2: clamp(1.6rem, 1.25rem + 1.7vw, 2.5rem);
  --lx-h3: clamp(1.15rem, 1.03rem + 0.55vw, 1.45rem);
  --lx-body-size: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);

  /* Spacing */
  --lx-s1: .5rem;  --lx-s2: .875rem; --lx-s3: 1.25rem;
  --lx-s4: 2rem;   --lx-s5: 3rem;    --lx-s6: 4.5rem;
  --lx-section-y: clamp(3rem, 2rem + 5vw, 6rem);

  --lx-radius: 14px;
  --lx-radius-lg: 22px;
  --lx-shadow: 0 4px 24px rgba(16,26,69,.08);
  --lx-shadow-lg: 0 18px 48px rgba(16,26,69,.14);
  --lx-maxw: 1200px;

  --lx-header-h: 72px;

  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: var(--lx-body-size);
  line-height: 1.65;
  color: var(--lx-body);
  background: var(--lx-white);
  /* Keeps the sticky mobile bar (6.18) from covering footer content */
  padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
}

.lx *, .lx *::before, .lx *::after { box-sizing: border-box; }

.lx p { margin: 0 0 var(--lx-s3); }
.lx p:last-child { margin-bottom: 0; }
.lx ul, .lx ol { margin: 0; padding: 0; list-style: none; }
.lx a { color: inherit; text-decoration: none; }
.lx address { font-style: normal; }

.lx :focus-visible {
  outline: 3px solid var(--lx-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.lx-wrap {
  width: 100%;
  max-width: var(--lx-maxw);
  margin-inline: auto;
  padding-inline: var(--lx-s3);
}

.lx-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--lx-accent);
  color: var(--lx-white);
  padding: .75rem 1.25rem;
  border-radius: 0 0 var(--lx-radius) 0;
  font-weight: 600;
}
.lx-skip:focus { left: 0; }

/* Anchor offset for the sticky header */
.lx [id] { scroll-margin-top: calc(var(--lx-header-h) + 12px); }


/* ==========================================================================
   TYPOGRAPHY PRIMITIVES + THE SIGNATURE TWO-TONE HEADING (3.3)
   ========================================================================== */
.lx .lx-h1,
.lx .lx-h2,
.lx .lx-h3 {
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.12;
  color: var(--lx-ink);
  margin: 0 0 var(--lx-s3);
  position: relative;
  z-index: 0;
}
.lx .lx-h1 { font-size: var(--lx-h1); }
.lx .lx-h2 { font-size: var(--lx-h2); }
.lx .lx-h3 { font-size: var(--lx-h3); }

/* The amber swash is painted as a background gradient rather than an absolutely
   positioned ::after: when the highlighted phrase wraps onto a second line an
   abs-positioned pseudo collapses against the fragmented inline box, leaving a
   stray sliver and no underline. box-decoration-break:clone gives every line
   fragment its own swash. */
.lx .lx-h1 strong,
.lx .lx-h2 strong {
  font-weight: 700;
  color: var(--lx-brand-blue);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  background-image: linear-gradient(var(--lx-amber-swash), var(--lx-amber-swash));
  background-size: 100% .18em;
  background-position: 0 calc(100% - .04em);
  background-repeat: no-repeat;
  padding-inline: .05em;
  margin-inline: -.05em;
}
.lx .lx-h2--light { color: var(--lx-white); }
.lx .lx-h2--light strong { color: var(--lx-white); }

.lx .lx-eyebrow {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--lx-accent);
  margin: 0 0 var(--lx-s1);
}
.lx .lx-eyebrow--light { color: var(--lx-amber); }

.lx .lx-lead {
  color: var(--lx-muted);
  max-width: 56ch;
}

.lx .lx-sechead { margin-bottom: var(--lx-s4); }
.lx .lx-sechead--center { text-align: center; }
.lx .lx-sechead--center .lx-lead { margin-inline: auto; }
.lx .lx-sechead--row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--lx-s3);
}
.lx .lx-sechead__note {
  color: var(--lx-muted);
  font-size: .9rem;
  margin: 0;
}
.lx .lx-gmark { width: 34px; height: 34px; margin: 0 auto var(--lx-s2); }


/* ==========================================================================
   ICONS
   ========================================================================== */
.lx .lx-ico {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lx .lx-ico--fill { fill: currentColor; stroke: none; }
.lx .lx-ico--check { color: var(--lx-amber); stroke-width: 2.4; width: 19px; height: 19px; }
.lx .lx-ico--star { color: var(--lx-amber); fill: currentColor; stroke: none; width: 15px; height: 15px; }


/* ==========================================================================
   BUTTONS (3.4)
   ========================================================================== */
.lx .lx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 48px;
  padding: .7rem 1.35rem;
  border: 0;
  border-radius: 999px;
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-weight: 600;
  font-size: .95rem;
  line-height: 1.2;
  cursor: pointer;
  text-align: center;
  transition: transform 160ms ease, background-color 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
.lx .lx-btn:hover { transform: translateY(-2px); box-shadow: var(--lx-shadow); }
.lx .lx-btn:active { transform: translateY(0); }

.lx .lx-btn--call { background: var(--lx-accent); color: var(--lx-white); }
.lx .lx-btn--call:hover { background: var(--lx-accent-700); }

.lx .lx-btn--wa { background: var(--lx-wa); color: var(--lx-white); }
.lx .lx-btn--wa:hover { background: var(--lx-wa-700); }

.lx .lx-btn--ghost {
  background: transparent;
  color: currentColor;
  border: 1.5px solid rgba(255,255,255,.45);
}
.lx .lx-btn--ghost:hover { border-color: var(--lx-white); background: rgba(255,255,255,.08); }

.lx .lx-btn--sm { min-height: 44px; padding: .5rem 1rem; font-size: .85rem; }
.lx .lx-btn--block { display: flex; width: 100%; }


/* ==========================================================================
   6.1  TOP UTILITY BAR
   ========================================================================== */
.lx .lx-utility {
  display: none;
  background: var(--lx-ink);
  color: rgba(255,255,255,.86);
  font-size: .82rem;
}
.lx .lx-utility__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lx-s3);
  min-height: 46px;
  padding-block: .35rem;
}
.lx .lx-utility__msg { margin: 0; }
.lx .lx-utility__actions { display: flex; align-items: center; gap: var(--lx-s3); flex: none; }
.lx .lx-utility__tel {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-weight: 600;
  color: var(--lx-white);
  min-height: 44px;
}
.lx .lx-utility__tel:hover { color: var(--lx-amber); }
.lx .lx-utility__tel .lx-ico { width: 16px; height: 16px; }


/* ==========================================================================
   6.2  STICKY HEADER
   ========================================================================== */
.lx .lx-header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: var(--lx-white);
  border-bottom: 1px solid var(--lx-line);
  transition: box-shadow 160ms ease;
}
.lx .lx-header.is-stuck { box-shadow: var(--lx-shadow); }
.lx .lx-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lx-s3);
  min-height: var(--lx-header-h);
}

.lx .lx-lockup { display: flex; align-items: center; gap: .6rem; flex: none; min-height: 44px; }
.lx .lx-lockup__mark { width: auto; height: 40px; }
.lx .lx-lockup__text { display: flex; flex-direction: column; line-height: 1.15; }
.lx .lx-lockup__name {
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--lx-brand-blue);
}
.lx .lx-lockup__tag {
  display: none;
  font-weight: 500;
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--lx-muted);
}

.lx .lx-nav { display: none; }
.lx .lx-nav__list { display: flex; align-items: center; gap: clamp(.5rem, 1.4vw, 1.35rem); }
.lx .lx-nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: .25rem;
  font-weight: 500;
  font-size: .93rem;
  color: var(--lx-body);
  position: relative;
  transition: color 160ms ease;
}
.lx .lx-nav__link:hover { color: var(--lx-brand-blue); }
.lx .lx-nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 12px;
  height: 2px;
  border-radius: 999px;
  background: var(--lx-amber);
  transform: scaleX(0);
  transition: transform 160ms ease;
}
.lx .lx-nav__link[aria-current="true"] { color: var(--lx-brand-blue); font-weight: 600; }
.lx .lx-nav__link[aria-current="true"]::after { transform: scaleX(1); }

.lx .lx-header__actions { display: flex; align-items: center; gap: var(--lx-s2); flex: none; }
.lx .lx-header__tel {
  display: none;
  align-items: center;
  gap: .4rem;
  font-weight: 600;
  font-size: .9rem;
  color: var(--lx-ink);
  min-height: 44px;
}
.lx .lx-header__tel:hover { color: var(--lx-accent); }
.lx .lx-header__actions .lx-btn--wa { display: none; }

.lx .lx-burger {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 46px;
  height: 46px;
  padding: 0;
  background: var(--lx-brand-blue-100);
  border: 0;
  border-radius: 12px;
  cursor: pointer;
}
.lx .lx-burger__bar {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 999px;
  background: var(--lx-brand-blue);
}


/* ==========================================================================
   MOBILE NAV OVERLAY
   ========================================================================== */
.lx .lx-mobnav { position: fixed; inset: 0; z-index: 120; }
.lx .lx-mobnav[hidden] { display: none; }
.lx .lx-mobnav__backdrop { position: absolute; inset: 0; background: rgba(16,26,69,.55); }
.lx .lx-mobnav__panel {
  position: absolute;
  inset: 0 0 0 auto;
  width: min(360px, 88vw);
  background: var(--lx-white);
  padding: var(--lx-s3);
  display: flex;
  flex-direction: column;
  gap: var(--lx-s3);
  overflow-y: auto;
}
.lx .lx-mobnav__head { display: flex; align-items: center; justify-content: space-between; }
.lx .lx-mobnav__title {
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-weight: 700;
  color: var(--lx-brand-blue);
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: .85rem;
}
.lx .lx-mobnav__close {
  width: 46px; height: 46px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--lx-brand-blue-100);
  border: 0; border-radius: 12px;
  color: var(--lx-brand-blue);
  cursor: pointer;
}
.lx .lx-mobnav__list { display: flex; flex-direction: column; }
.lx .lx-mobnav__link {
  display: flex;
  align-items: center;
  min-height: 52px;
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--lx-ink);
  border-bottom: 1px solid var(--lx-line);
}
.lx .lx-mobnav__foot { display: flex; flex-direction: column; gap: var(--lx-s1); margin-top: auto; }


/* ==========================================================================
   SECTION SHELLS
   ========================================================================== */
.lx .lx-sec { padding-block: var(--lx-section-y); background: var(--lx-white); }
.lx .lx-sec--paper { background: var(--lx-paper); }
.lx .lx-sec--ink { background: var(--lx-ink); color: rgba(255,255,255,.82); }


/* ==========================================================================
   6.3  HERO
   ========================================================================== */
.lx .lx-hero {
  position: relative;
  padding-block: clamp(2.25rem, 1.5rem + 4vw, 4.5rem);
  background:
    radial-gradient(120% 90% at 78% 8%, var(--lx-brand-blue-100) 0%, rgba(231,232,245,0) 62%),
    var(--lx-white);
  overflow: hidden;
}
.lx .lx-hero__inner { display: grid; gap: var(--lx-s5); }
.lx .lx-hero__sub { color: var(--lx-muted); max-width: 58ch; }
.lx .lx-hero__cta { display: flex; flex-wrap: wrap; gap: var(--lx-s2); margin-bottom: var(--lx-s4); }

.lx .lx-stats { display: flex; align-items: center; gap: var(--lx-s3); }
.lx .lx-stat { display: flex; flex-direction: column; }
.lx .lx-stat__num {
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-weight: 700;
  font-size: 1.8rem;
  line-height: 1.1;
  color: var(--lx-brand-blue);
}
.lx .lx-stat__label { font-size: .82rem; color: var(--lx-muted); }
.lx .lx-stat__div { width: 1px; height: 40px; background: var(--lx-line); flex: none; }

/* Three-image cluster */
.lx .lx-cluster {
  position: relative;
  display: grid;
  grid-template-columns: 1.12fr .88fr;
  grid-template-rows: 1fr 1fr;
  gap: 12px;
  /* Ratio lives on the container so both columns resolve to the same height —
     otherwise the stacked pair on the right drives the cluster taller than the
     copy beside it. */
  aspect-ratio: 1 / 1.05;
}
.lx .lx-cluster figure { margin: 0; }
.lx .lx-cluster picture { display: block; height: 100%; }
.lx .lx-cluster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
}
.lx .lx-cluster__big,
.lx .lx-cluster__sm {
  overflow: hidden;
  min-height: 0;
  border-radius: var(--lx-radius-lg);
  box-shadow: var(--lx-shadow-lg);
  background: var(--lx-brand-blue-100);
}
.lx .lx-cluster__big { grid-column: 1; grid-row: 1 / span 2; }
.lx .lx-cluster__sm--a { grid-column: 2; grid-row: 1; }
.lx .lx-cluster__sm--b { grid-column: 2; grid-row: 2; }

/* Rotating corner sticker (5.3) */
.lx .lx-sticker {
  display: none;
  position: absolute;
  top: -18px;
  right: -18px;
  width: 108px;
  height: 108px;
  border-radius: 50%;
  background: var(--lx-ink);
  color: var(--lx-white);
  box-shadow: var(--lx-shadow-lg);
  z-index: 3;
  place-items: center;
}
.lx .lx-sticker__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: lx-spin 8s linear infinite;
}
/* Sized so two repetitions of the label fit the r=45 path (~283px) without
   the start and end of the string colliding. */
.lx .lx-sticker__label {
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: .03em;
  fill: var(--lx-white);
}
.lx .lx-sticker__drop {
  position: relative;
  width: 30px;
  height: 30px;
  fill: none;
  stroke: var(--lx-amber);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@keyframes lx-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }


/* ==========================================================================
   6.4  WHAT WE DO
   ========================================================================== */
.lx .lx-about__inner { display: grid; gap: var(--lx-s4); align-items: center; }
.lx .lx-about__media { margin: 0; border-radius: var(--lx-radius-lg); overflow: hidden; box-shadow: var(--lx-shadow); }
.lx .lx-about__media img { width: 100%; height: 100%; max-height: 520px; object-fit: cover; object-position: center 35%; }


/* ==========================================================================
   6.5  KEY BENEFITS
   ========================================================================== */
.lx .lx-benefits__grid { display: grid; gap: var(--lx-s2); }
.lx .lx-bcard {
  display: flex;
  align-items: center;
  gap: var(--lx-s2);
  padding: var(--lx-s3);
  background: var(--lx-white);
  border: 1px solid var(--lx-line);
  border-radius: var(--lx-radius);
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.lx .lx-bcard:hover { transform: translateY(-3px); border-color: var(--lx-brand-blue); box-shadow: var(--lx-shadow); }
.lx .lx-bcard__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 50%;
  background: var(--lx-brand-blue-100);
  color: var(--lx-brand-blue);
}
.lx .lx-bcard__ico .lx-ico { width: 22px; height: 22px; }
.lx .lx-bcard__title {
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--lx-ink);
  margin: 0;
}


/* ==========================================================================
   6.6  GALLERY STRIP
   ========================================================================== */
.lx .lx-arrows { display: none; gap: .5rem; }
.lx .lx-arrow {
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--lx-white);
  border: 1px solid var(--lx-line);
  border-radius: 50%;
  color: var(--lx-ink);
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}
.lx .lx-arrow:hover { background: var(--lx-brand-blue); border-color: var(--lx-brand-blue); color: var(--lx-white); }
.lx .lx-arrow:disabled { opacity: .38; cursor: default; }
.lx .lx-arrow:disabled:hover { background: var(--lx-white); border-color: var(--lx-line); color: var(--lx-ink); }

.lx .lx-gallery__strip {
  display: flex;
  gap: var(--lx-s2);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 4px;
}
.lx .lx-gallery__strip::-webkit-scrollbar { display: none; }
.lx .lx-gcard {
  position: relative;
  flex: 0 0 78%;
  scroll-snap-align: start;
  border-radius: var(--lx-radius-lg);
  overflow: hidden;
  box-shadow: var(--lx-shadow);
  background: var(--lx-brand-blue-100);
  aspect-ratio: 3 / 4;
}
.lx .lx-gcard img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.lx .lx-gcard__cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: var(--lx-s4) var(--lx-s3) var(--lx-s3);
  background: linear-gradient(to top, rgba(16,26,69,.88) 0%, rgba(16,26,69,.55) 55%, rgba(16,26,69,0) 100%);
  color: var(--lx-white);
  font-weight: 500;
  font-size: .92rem;
  line-height: 1.35;
}


/* ==========================================================================
   6.7  WORK IN ACTION — VIDEO STRIP
   ========================================================================== */
.lx .lx-video[hidden] { display: none; }
.lx .lx-video__strip {
  display: flex;
  gap: var(--lx-s2);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.lx .lx-video__strip::-webkit-scrollbar { display: none; }
.lx .lx-vcard {
  position: relative;
  flex: 0 0 72%;
  scroll-snap-align: start;
  aspect-ratio: 9 / 16;
  border-radius: var(--lx-radius-lg);
  overflow: hidden;
  background: var(--lx-ink);
  box-shadow: var(--lx-shadow);
}
.lx .lx-vcard__el { width: 100%; height: 100%; object-fit: cover; }
.lx .lx-vcard__mute {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(16,26,69,.62);
  border: 0;
  border-radius: 50%;
  color: var(--lx-white);
  cursor: pointer;
  backdrop-filter: blur(4px);
}
.lx .lx-vcard__mute .lx-ico--unmuted { display: none; }
.lx .lx-vcard__mute[aria-pressed="true"] .lx-ico--muted { display: none; }
.lx .lx-vcard__mute[aria-pressed="true"] .lx-ico--unmuted { display: block; }


/* ==========================================================================
   6.8  HOW WE WORK — 5 STEPS (dark band)
   ========================================================================== */
.lx .lx-steps__track {
  display: grid;
  gap: var(--lx-s4);
  position: relative;
  padding-left: 46px;
}
/* Mobile: vertical timeline line down the left */
.lx .lx-steps__track::before {
  content: "";
  position: absolute;
  left: 17px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: rgba(255,255,255,.16);
}
.lx .lx-step { position: relative; }
.lx .lx-step__num {
  position: absolute;
  left: -46px;
  top: -2px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--lx-ink);
  border: 2px solid var(--lx-amber);
  color: var(--lx-amber);
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-weight: 700;
  font-size: .85rem;
}
.lx .lx-step__eyebrow {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--lx-amber);
  margin: 0 0 .25rem;
}
.lx .lx-step__title {
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-weight: 600;
  font-size: 1.08rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--lx-white);
  margin: 0 0 .4rem;
}
.lx .lx-step__body { font-size: .93rem; color: rgba(255,255,255,.74); margin: 0; }


/* ==========================================================================
   6.9  WHAT'S COVERED
   ========================================================================== */
.lx .lx-covered__inner { display: grid; gap: var(--lx-s4); align-items: center; }
.lx .lx-ticks { display: grid; gap: .55rem; margin-top: var(--lx-s3); }
.lx .lx-tick {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-size: .95rem;
  line-height: 1.45;
}
.lx .lx-tick .lx-ico--check { margin-top: .18em; }
.lx .lx-tick--lg { font-size: 1rem; line-height: 1.6; color: var(--lx-body); }
.lx .lx-covered__media { margin: 0; border-radius: var(--lx-radius-lg); overflow: hidden; box-shadow: var(--lx-shadow); }
.lx .lx-covered__media img { width: 100%; height: 100%; max-height: 560px; object-fit: cover; object-position: center 35%; }


/* ==========================================================================
   6.10  WHY CHOOSE US
   ========================================================================== */
.lx .lx-why__inner { display: grid; gap: var(--lx-s4); align-items: center; }
.lx .lx-why__list { display: grid; gap: var(--lx-s2); margin-top: var(--lx-s3); }
.lx .lx-why__media { margin: 0; border-radius: var(--lx-radius-lg); overflow: hidden; box-shadow: var(--lx-shadow); }
.lx .lx-why__media img { width: 100%; height: 100%; max-height: 560px; object-fit: cover; object-position: center 35%; }


/* ==========================================================================
   6.11  TRUST STRIP
   ========================================================================== */
.lx .lx-trust { padding-block: clamp(2rem, 1.4rem + 3vw, 3.25rem); }
.lx .lx-trust__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--lx-s3); }
.lx .lx-tchip { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .45rem; }
.lx .lx-tchip__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--lx-brand-blue-100);
  color: var(--lx-brand-blue);
}
.lx .lx-tchip__ico .lx-ico { width: 24px; height: 24px; }
.lx .lx-tchip__label {
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-weight: 600;
  font-size: .88rem;
  line-height: 1.25;
  color: var(--lx-ink);
}
.lx .lx-tchip__sub { font-size: .76rem; color: var(--lx-muted); }


/* ==========================================================================
   6.12 / 6.16  CTA BANDS
   ========================================================================== */
.lx .lx-band { padding-block: clamp(2.5rem, 1.8rem + 3.5vw, 4.25rem); text-align: center; }
.lx .lx-band--ink { background: var(--lx-ink); }
.lx .lx-band--blue { background: var(--lx-brand-blue-700); }
.lx .lx-band__title {
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-weight: 700;
  font-size: var(--lx-h2);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--lx-white);
  margin: 0 0 var(--lx-s1);
}
.lx .lx-band__sub { color: rgba(255,255,255,.78); margin: 0 auto var(--lx-s3); max-width: 52ch; }
.lx .lx-band__cta { display: flex; flex-wrap: wrap; gap: var(--lx-s2); justify-content: center; }


/* ==========================================================================
   6.13  TESTIMONIALS
   ========================================================================== */
.lx .lx-carousel { position: relative; }
.lx .lx-carousel__track {
  display: flex;
  gap: var(--lx-s2);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 4px;
}
.lx .lx-carousel__track::-webkit-scrollbar { display: none; }
.lx .lx-tcard {
  flex: 0 0 100%;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: var(--lx-s2);
  padding: var(--lx-s3);
  background: var(--lx-white);
  border: 1px solid var(--lx-line);
  border-radius: var(--lx-radius);
  box-shadow: var(--lx-shadow);
}
.lx .lx-tcard__head { display: flex; align-items: center; gap: .7rem; }
.lx .lx-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  background: var(--lx-brand-blue-100);
  color: var(--lx-brand-blue);
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
}
.lx .lx-tcard__name {
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-weight: 600;
  font-size: .95rem;
  color: var(--lx-ink);
  margin: 0;
}
.lx .lx-stars { display: flex; gap: 2px; margin: 0; }
.lx .lx-tcard__body { color: var(--lx-muted); font-size: .95rem; margin: 0; }

.lx .lx-carousel__ui {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--lx-s2);
  margin-top: var(--lx-s3);
}
.lx .lx-dots { display: flex; align-items: center; gap: 0; }
/* The visible dot is small, but the button itself is a full 44x44 tap target. */
.lx .lx-dot {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.lx .lx-dot::before {
  content: "";
  display: block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--lx-line);
  transition: background-color 160ms ease, width 160ms ease;
}
.lx .lx-dot[aria-selected="true"]::before { background: var(--lx-brand-blue); width: 22px; border-radius: 999px; }
.lx .lx-tests__close {
  margin-top: var(--lx-s4);
  text-align: center;
  color: var(--lx-muted);
  max-width: 68ch;
  margin-inline: auto;
}


/* ==========================================================================
   6.14  WHERE WE WORK — MARQUEE
   ========================================================================== */
.lx .lx-marquee { display: grid; gap: var(--lx-s2); overflow: hidden; }
.lx .lx-marquee__row { display: flex; gap: var(--lx-s2); width: max-content; animation: lx-marquee 46s linear infinite; }
.lx .lx-marquee__row--rev { animation-direction: reverse; animation-duration: 54s; }
.lx .lx-marquee:hover .lx-marquee__row { animation-play-state: paused; }
.lx .lx-marquee__group { display: flex; gap: var(--lx-s2); }
.lx .lx-chip {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding: .6rem 1.15rem;
  border-radius: 999px;
  border: 1px solid var(--lx-line);
  background: var(--lx-paper);
  color: var(--lx-ink);
  font-weight: 500;
  font-size: .92rem;
}
@keyframes lx-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-50% - (var(--lx-s2) / 2))); }
}


/* ==========================================================================
   6.15  SCAN FOR A FREE QUOTE
   ========================================================================== */
.lx .lx-qr__inner { display: grid; gap: var(--lx-s3); align-items: center; justify-items: center; text-align: center; }
.lx .lx-qr__card { display: none; padding: var(--lx-s2); background: var(--lx-white); border-radius: var(--lx-radius); box-shadow: var(--lx-shadow); }
.lx .lx-qr__card img { width: 200px; height: 200px; }
.lx .lx-qr__btn { margin-top: var(--lx-s1); }


/* ==========================================================================
   FAQ ACCORDION
   ========================================================================== */
.lx .lx-faq__inner { max-width: 860px; }
.lx .lx-acc { display: grid; gap: var(--lx-s1); }
.lx .lx-acc__item {
  border: 1px solid var(--lx-line);
  border-radius: var(--lx-radius);
  background: var(--lx-white);
  overflow: hidden;
}
.lx .lx-acc__item.is-open { border-color: var(--lx-brand-blue); box-shadow: var(--lx-shadow); }
.lx .lx-acc__h { margin: 0; font-size: 1rem; }
.lx .lx-acc__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lx-s2);
  width: 100%;
  min-height: 56px;
  padding: var(--lx-s2) var(--lx-s3);
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--lx-ink);
}
.lx .lx-acc__btn:hover { color: var(--lx-brand-blue); }
.lx .lx-acc__chev { transition: transform 160ms ease; color: var(--lx-brand-blue); }
.lx .lx-acc__btn[aria-expanded="true"] .lx-acc__chev { transform: rotate(180deg); }
.lx .lx-acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 240ms ease;
}
.lx .lx-acc__item.is-open .lx-acc__panel { grid-template-rows: 1fr; }
.lx .lx-acc__inner { overflow: hidden; }
.lx .lx-acc__inner p {
  padding: 0 var(--lx-s3) var(--lx-s3);
  margin: 0;
  color: var(--lx-muted);
  font-size: .95rem;
}


/* ==========================================================================
   6.17  FOOTER
   ========================================================================== */
.lx .lx-footer { background: var(--lx-ink); color: rgba(255,255,255,.74); }
.lx .lx-footer__grid { display: grid; gap: var(--lx-s4); padding-block: var(--lx-s5); }
.lx .lx-footer .lx-lockup--footer .lx-lockup__mark { height: 54px; }
.lx .lx-footer .lx-lockup__name { color: var(--lx-white); }
.lx .lx-footer .lx-lockup__tag { display: block; color: rgba(255,255,255,.6); }
.lx .lx-footer__blurb { margin-top: var(--lx-s2); font-size: .92rem; }
.lx .lx-footer__h {
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .04em;
  color: var(--lx-white);
  margin: 0 0 var(--lx-s2);
}
.lx .lx-footer__list { display: grid; gap: .1rem; }
.lx .lx-footer__list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: .92rem;
  transition: color 160ms ease;
}
.lx .lx-footer__list a:hover { color: var(--lx-amber); }
.lx .lx-footer__contact { display: grid; gap: var(--lx-s2); font-size: .92rem; }
.lx .lx-footer__contact li { display: flex; gap: .6rem; align-items: flex-start; }
.lx .lx-footer__contact .lx-ico { margin-top: .25em; color: var(--lx-amber); }
.lx .lx-footer__contact a { min-height: 44px; display: inline-flex; align-items: center; }
.lx .lx-footer__contact a:hover { color: var(--lx-amber); }

.lx .lx-enq { margin-top: var(--lx-s3); }
.lx .lx-enq__h {
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-weight: 600;
  color: var(--lx-white);
  font-size: .9rem;
  margin: 0 0 var(--lx-s1);
}
.lx .lx-enq__label {
  display: block;
  font-size: .74rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
  margin-bottom: .3rem;
}
.lx .lx-enq__select,
.lx .lx-enq__input {
  width: 100%;
  min-height: 46px;
  padding: .6rem .8rem;
  margin-bottom: var(--lx-s2);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 10px;
  color: var(--lx-white);
  font-size: .92rem;
}
.lx .lx-enq__select option { color: var(--lx-body); background: var(--lx-white); }
.lx .lx-enq__input::placeholder { color: rgba(255,255,255,.45); }

.lx .lx-footer__bottom { border-top: 1px solid rgba(255,255,255,.12); }
.lx .lx-footer__bottominner {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  align-items: center;
  text-align: center;
  padding-block: var(--lx-s3);
  font-size: .85rem;
}
.lx .lx-footer__bottominner p { margin: 0; }


/* ==========================================================================
   6.18  STICKY MOBILE BOTTOM BAR
   ========================================================================== */
.lx .lx-stickybar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 80;
  display: flex;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-shadow: 0 -4px 20px rgba(16,26,69,.18);
}
.lx .lx-stickybar__btn {
  flex: 1 1 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 60px;
  color: var(--lx-white);
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-weight: 600;
  font-size: .98rem;
}
.lx .lx-stickybar__btn--call { background: var(--lx-accent); }
.lx .lx-stickybar__btn--wa { background: var(--lx-wa); }


/* ==========================================================================
   REVEAL-ON-SCROLL
   ========================================================================== */
.lx .lx-reveal { opacity: 0; transform: translateY(8px); transition: opacity 420ms ease, transform 420ms ease; }
.lx .lx-reveal.is-visible { opacity: 1; transform: none; }
.lx.lx--no-reveal .lx-reveal { opacity: 1; transform: none; transition: none; }


/* ==========================================================================
   BREAKPOINT: 400px — the header lockup's second line is hidden below this
   (see 4.2); the layout breakpoints proper are 640 / 900 / 1200.
   ========================================================================== */
@media (min-width: 400px) {
  .lx .lx-lockup__tag { display: block; }
}


/* ==========================================================================
   BREAKPOINT: 640px
   ========================================================================== */
@media (min-width: 640px) {
  .lx .lx-benefits__grid { grid-template-columns: repeat(2, 1fr); }
  .lx .lx-ticks { grid-template-columns: repeat(2, 1fr); gap: .55rem var(--lx-s3); }
  .lx .lx-gcard { flex-basis: 46%; }
  .lx .lx-vcard { flex-basis: 44%; }
  .lx .lx-tcard { flex-basis: calc(50% - (var(--lx-s2) / 2)); }
  .lx .lx-trust__grid { grid-template-columns: repeat(3, 1fr); }
  .lx .lx-sticker { display: grid; }
  .lx .lx-footer__bottominner { flex-direction: row; justify-content: space-between; text-align: left; }
  .lx .lx-qr__inner { grid-template-columns: auto 1fr; text-align: left; justify-items: start; gap: var(--lx-s4); }
  .lx .lx-qr__card { display: block; }
  .lx .lx-qr__btn { display: none; }
}


/* ==========================================================================
   BREAKPOINT: 900px
   ========================================================================== */
@media (min-width: 900px) {
  .lx { padding-bottom: 0; }
  .lx .lx-utility { display: block; }
  .lx .lx-nav { display: block; }
  .lx .lx-header__tel { display: inline-flex; }
  .lx .lx-header__actions .lx-btn--wa { display: inline-flex; }
  .lx .lx-burger { display: none; }
  .lx .lx-stickybar { display: none; }
  .lx .lx-arrows { display: flex; }

  .lx .lx-hero__inner { grid-template-columns: 55fr 45fr; align-items: center; gap: var(--lx-s5); }
  .lx .lx-cluster__sm { margin-left: -22px; z-index: 2; }

  .lx .lx-about__inner { grid-template-columns: 1.05fr .95fr; gap: var(--lx-s5); }
  .lx .lx-covered__inner { grid-template-columns: 1.1fr .9fr; gap: var(--lx-s5); }
  .lx .lx-why__inner { grid-template-columns: 1.05fr .95fr; gap: var(--lx-s5); }

  .lx .lx-benefits__grid { grid-template-columns: repeat(3, 1fr); gap: var(--lx-s3); }
  .lx .lx-trust__grid { grid-template-columns: repeat(6, 1fr); }

  /* Deliberately narrower than a quarter so the fourth card peeks past the
     edge — the strip stays scrollable and the prev/next arrows have work. */
  .lx .lx-gcard { flex-basis: 31%; }
  .lx .lx-vcard { flex-basis: calc((100% - (var(--lx-s2) * 2)) / 3); }
  .lx .lx-tcard { flex-basis: calc((100% - (var(--lx-s2) * 2)) / 3); }

  /* Steps become a horizontal 5-column track with a connecting line */
  .lx .lx-steps__track {
    grid-template-columns: repeat(5, 1fr);
    gap: var(--lx-s3);
    padding-left: 0;
    padding-top: 58px;
  }
  .lx .lx-steps__track::before {
    left: 10%;
    right: 10%;
    top: 18px;
    bottom: auto;
    width: auto;
    height: 2px;
  }
  .lx .lx-step__num { left: 0; top: -58px; }

  .lx .lx-footer__grid { grid-template-columns: 1.25fr .8fr 1fr 1.25fr; gap: var(--lx-s4); }
}


/* ==========================================================================
   BREAKPOINT: 1200px
   ========================================================================== */
@media (min-width: 1200px) {
  .lx .lx-hero { padding-block: clamp(3rem, 2rem + 3vw, 5rem); }
  .lx .lx-sticker { width: 124px; height: 124px; top: -26px; right: -26px; }
  .lx .lx-bcard { padding: var(--lx-s3) var(--lx-s4); }
}


/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .lx .lx-btn:hover,
  .lx .lx-bcard:hover { transform: none; }
  .lx .lx-sticker__ring { animation: none; }
  .lx .lx-marquee__row { animation: none; }
  .lx .lx-reveal { opacity: 1; transform: none; transition: none; }
  .lx .lx-gallery__strip,
  .lx .lx-video__strip,
  .lx .lx-carousel__track { scroll-behavior: auto; }
  .lx .lx-acc__panel { transition: none; }
  .lx .lx-acc__chev { transition: none; }
  .lx .lx-btn,
  .lx .lx-arrow,
  .lx .lx-nav__link,
  .lx .lx-nav__link::after,
  .lx .lx-header,
  .lx .lx-dot { transition: none; }
}