/* ==========================================================================
   LIST SDN BHD — page styles
   Scoped under .lst-page so Astra defaults cannot leak in or out.
   Design tokens taken verbatim from the handoff README.
   ========================================================================== */

:root{
  /* Ground was the handoff's cream #f6f4ef; changed to white on request.
     The tint and field fills moved to neutral greys to match — a beige band
     or a beige input on a white page reads as a mistake, not a choice. */
  --lst-ground:#ffffff;
  --lst-white:#fff;
  --lst-tint:#f5f5f6;
  --lst-field:#f5f5f6;
  /* Greyish-blue wash behind the light content sections ("Medium"). */
  --lst-zone-a:#cfdaec;  /* top */
  --lst-zone-b:#e4ecf6;  /* bottom */
  --lst-ink:#17140f;
  --lst-navy:#1a3a6b;
  --lst-navy-deep:#14294d;
  --lst-red:#e5443b;
  --lst-red-dark:#a03a2f;
  --lst-muted:#4a453d;
  --lst-faint:#6a655b;
  --lst-foot-text:#b8b2a6;
  /* Was #6f695e, which sat at 3.37:1 on the ink footer — below WCAG AA for the
     11px mono labels and the copyright line. Reuses the existing blurb value
     rather than adding a new one; 5.28:1. */
  --lst-foot-faint:#8f897d;
  --lst-foot-blurb:#8f897d;
  --lst-input-border:#e2e2e4;
  --lst-max:1180px;
  --lst-pad:32px;
  --lst-sans:Manrope,system-ui,-apple-system,sans-serif;
  --lst-serif:Newsreader,Georgia,serif;
  --lst-mono:"IBM Plex Mono",ui-monospace,monospace;
}

/* --- reset / base ------------------------------------------------------- */
body.lst-body{
  margin:0;
  background:var(--lst-ground);
  color:var(--lst-ink);
  font-family:var(--lst-sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.lst-page,.lst-page *,.lst-page *::before,.lst-page *::after{box-sizing:border-box}
.lst-page{width:100%;overflow-x:hidden}
.lst-page img,.lst-page video{max-width:100%;display:block}
/* Base element resets use :where() so they carry ZERO specificity. Without it
   these outrank every component class below (e.g. `.lst-page p` beats
   `.lst-hero__p`) and silently zero out the design's vertical rhythm. */
:where(.lst-page) a{color:var(--lst-navy);text-decoration:none}
:where(.lst-page) a:hover,:where(.lst-page) a:focus{color:var(--lst-red-dark)}
:where(.lst-page) :where(h1,h2,h3,h4,p){margin:0;font-weight:400}
:where(.lst-page) :where(h4){font-family:var(--lst-sans);font-weight:600}
:where(.lst-page) :where(ul){margin:0;padding:0;list-style:none}

/* Astra sets `h1,h2,h3,h4,h5,h6{color:var(--ast-global-color-2)}` as a direct
   element rule, which beats the colour our sections pass down by inheritance —
   headings on the navy bands came out dark slate instead of white. The design
   expects headings to take their section's colour, so force inheritance.
   Needs real specificity (not :where) to outrank Astra's element selector. */
.lst-page :is(h1,h2,h3,h4,h5,h6){color:inherit}
.lst-page button{font-family:inherit}
.lst-page :focus-visible{outline:2px solid var(--lst-red);outline-offset:3px}

/* Astra sometimes injects page padding/containers — neutralise it. */
.lst-body #page,.lst-body .site-content,.lst-body .ast-container{max-width:none;padding:0;margin:0}
.lst-body .ast-container{width:auto}

/* --- shared layout helpers ---------------------------------------------- */
.lst-wrap{max-width:var(--lst-max);margin:0 auto;padding-left:var(--lst-pad);padding-right:var(--lst-pad)}
/* Visible to screen readers and crawlers, not on screen. Used for section
   headings the visual design omits but the document outline needs. */
.lst-sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.lst-kicker{
  font-family:var(--lst-mono);font-size:12px;letter-spacing:.2em;
  color:var(--lst-red-dark);text-transform:uppercase;
}
.lst-h1{font-family:var(--lst-serif);font-weight:400;letter-spacing:-.015em;line-height:1.03}
.lst-h2{font-family:var(--lst-serif);font-weight:400;font-size:42px;line-height:1.08}
.lst-lead{font-size:19px;line-height:1.6;color:var(--lst-muted)}

@keyframes lst-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.lst-rise{animation:lst-rise .7s ease both}
.lst-rise--d1{animation:lst-rise .7s .1s ease both}

/* ==========================================================================
   SCROLL REVEALS
   Same fade-and-rise the hero uses on load, fired once as each block enters
   view. Everything is gated behind .lst-js, which only js/reveal.js adds — so
   without JS, or with prefers-reduced-motion, nothing is ever hidden.
   Only opacity and transform animate, so no layout shift and no CLS cost.
   ========================================================================== */
.lst-js [data-reveal]{
  opacity:0;transform:translateY(16px);
  transition:opacity .6s ease,transform .6s cubic-bezier(.22,.61,.36,1);
}
.lst-js [data-reveal].is-in{opacity:1;transform:none}

/* Grouped items arrive in sequence so grids read left-to-right. */
.lst-js [data-stagger]>*{
  opacity:0;transform:translateY(16px);
  transition:opacity .55s ease,transform .55s cubic-bezier(.22,.61,.36,1);
}
.lst-js [data-stagger].is-in>*{opacity:1;transform:none}
.lst-js [data-stagger].is-in>*:nth-child(1){transition-delay:0ms}
.lst-js [data-stagger].is-in>*:nth-child(2){transition-delay:70ms}
.lst-js [data-stagger].is-in>*:nth-child(3){transition-delay:140ms}
.lst-js [data-stagger].is-in>*:nth-child(4){transition-delay:210ms}
.lst-js [data-stagger].is-in>*:nth-child(5){transition-delay:280ms}
/* Capped from the 6th item on: the product grid has eight cards, and letting
   the delay keep climbing makes the last one feel like it is lagging. */
.lst-js [data-stagger].is-in>*:nth-child(n+6){transition-delay:350ms}

/* Counting figures must not reflow their column as digits change. */
.lst-stat__n{font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion:reduce){
  .lst-page *,.lst-page *::before,.lst-page *::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}

/* --- buttons ------------------------------------------------------------
   NOTE: these are prefixed with .lst-page so they outrank the base
   `.lst-page a{color:navy}` rule above — without the prefix every button
   and nav link inherits the navy link colour. */
.lst-page .lst-btn{
  display:inline-block;font-family:var(--lst-sans);font-weight:600;font-size:15px;
  line-height:1;border-radius:44px;padding:16px 30px;cursor:pointer;border:0;
  transition:opacity .15s ease;
}
.lst-page .lst-btn:hover{opacity:.88}
.lst-page .lst-btn--ink,
.lst-page .lst-btn--ink:hover{background:var(--lst-ink);color:var(--lst-ground)}
.lst-page .lst-btn--white,
.lst-page .lst-btn--white:hover{background:#fff;color:var(--lst-navy-deep)}
.lst-page .lst-btn--white{font-weight:700;padding:16px 32px;white-space:nowrap}
.lst-page .lst-btn--cream,
.lst-page .lst-btn--cream:hover{background:var(--lst-ground);color:var(--lst-navy-deep)}
.lst-page .lst-btn--cream{font-weight:700;font-size:14px;padding:13px 24px;align-self:flex-start}
.lst-page .lst-link-under{
  font-weight:600;font-size:15px;color:var(--lst-ink);
  border-bottom:1.5px solid var(--lst-ink);padding-bottom:2px;
}
.lst-page .lst-link-under:hover{color:var(--lst-red-dark);border-bottom-color:var(--lst-red-dark)}

/* ==========================================================================
   NAV
   ========================================================================== */
.lst-nav{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.85);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(0,0,0,.07);
}
.lst-nav__inner{
  max-width:var(--lst-max);margin:0 auto;padding:18px var(--lst-pad);
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.lst-nav__logo img{height:30px;width:auto}
.lst-nav__links{display:flex;align-items:center;gap:30px;font-size:14.5px;font-weight:600}
.lst-page .lst-nav__link{color:var(--lst-muted)}
.lst-page .lst-nav__link:hover,
.lst-page .lst-nav__link.is-current{color:var(--lst-red-dark)}
.lst-page .lst-nav__cta{
  padding:11px 22px;border:1.5px solid var(--lst-ink);border-radius:44px;
  font-weight:600;color:var(--lst-ink);
}
.lst-page .lst-nav__cta:hover{background:var(--lst-ink);color:var(--lst-ground)}

/* hamburger — hidden on desktop */
.lst-nav__burger{
  display:none;width:44px;height:44px;padding:10px;
  background:transparent;border:0;cursor:pointer;
  flex-direction:column;justify-content:space-between;
}
.lst-nav__burger span{
  display:block;height:2px;width:100%;background:var(--lst-ink);border-radius:2px;
  transition:transform .25s ease,opacity .2s ease;
}
.lst-nav__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(10px) rotate(45deg)}
.lst-nav__burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.lst-nav__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-10px) rotate(-45deg)}

/* ==========================================================================
   HOMEPAGE — hero
   ========================================================================== */
.lst-hero{
  max-width:var(--lst-max);margin:0 auto;padding:78px var(--lst-pad) 70px;
  display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:end;
}
.lst-hero__h1{font-size:68px;line-height:1.02;margin:0 0 26px;text-wrap:balance}
.lst-hero__h1 em{font-style:italic;color:var(--lst-navy)}
.lst-hero__p{max-width:520px;margin:0 0 52px}
.lst-hero__ctas{display:flex;gap:18px;align-items:center;flex-wrap:wrap}

/* animated motion graphic (decorative) */
.lst-motion{
  position:relative;aspect-ratio:4/5;border-radius:6px;overflow:hidden;
  background:linear-gradient(160deg,#1a355f,#0c1a34 70%);
}
@keyframes lst-gridpan{from{background-position:0 0}to{background-position:0 40px}}
@keyframes lst-sweep{0%{transform:translateY(-60%)}100%{transform:translateY(560%)}}
@keyframes lst-pulse{0%,100%{opacity:.3;transform:scale(.85)}50%{opacity:1;transform:scale(1)}}
@keyframes lst-drift{0%,100%{transform:translate(0,0) rotate(45deg)}50%{transform:translate(0,-16px) rotate(45deg)}}
@keyframes lst-barfill{0%{width:8%}45%{width:88%}55%{width:88%}100%{width:8%}}
@keyframes lst-fadeflow{0%,100%{opacity:.4}50%{opacity:.9}}

.lst-motion__grid{
  position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:40px 40px;
  animation:lst-gridpan 5s linear infinite;
  -webkit-mask-image:linear-gradient(to bottom,#000,transparent 92%);
  mask-image:linear-gradient(to bottom,#000,transparent 92%);
}
.lst-motion__sq1{
  position:absolute;top:12%;right:16%;width:56px;height:56px;
  background:rgba(229,68,59,.5);border-radius:10px;filter:blur(.5px);
  animation:lst-drift 6s ease-in-out infinite;
}
.lst-motion__sq2{
  position:absolute;bottom:18%;left:12%;width:38px;height:38px;
  background:rgba(90,150,255,.45);border-radius:8px;
  animation:lst-drift 7.5s ease-in-out infinite .8s;
}
.lst-motion__sweep{
  position:absolute;left:0;right:0;height:120px;
  background:linear-gradient(to bottom,transparent,rgba(120,175,255,.14),transparent);
  animation:lst-sweep 4.5s ease-in-out infinite;
}
.lst-motion__flow{
  position:absolute;left:22px;right:22px;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:12px;
}
.lst-flow{
  display:flex;align-items:center;gap:11px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  border-radius:9px;padding:12px 13px;
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
}
.lst-flow__label{font-size:12.5px;color:#dde6f5}
.lst-flow__meta{margin-left:auto;font-family:var(--lst-mono);font-size:10px;color:#7d90b5}
.lst-dot{width:8px;height:8px;border-radius:50%;flex:none}
.lst-dot--green{background:#3fd98a;animation:lst-pulse 2.4s ease-in-out infinite}
.lst-dot--green.is-d2{animation-delay:.5s}
.lst-dot--blue{background:#5a96ff;animation:lst-pulse 1.4s ease-in-out infinite}
.lst-dot--off{background:#4a566d}
.lst-flow--active{
  display:block;background:rgba(90,150,255,.1);border-color:rgba(120,175,255,.45);
}
.lst-flow--active .lst-flow__row{display:flex;align-items:center;gap:11px;margin-bottom:9px}
.lst-flow--active .lst-flow__label{color:#eaf1ff}
.lst-flow--active .lst-flow__meta{color:#8fb4ff;animation:lst-fadeflow 1.4s ease-in-out infinite}
.lst-flow__track{height:5px;border-radius:3px;background:rgba(255,255,255,.12);overflow:hidden}
.lst-flow__bar{height:100%;background:#5a96ff;border-radius:3px;animation:lst-barfill 3.6s ease-in-out infinite}
.lst-flow--done{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08);opacity:.55}
.lst-flow--done .lst-flow__label{color:#9fabc4}

/* --- stat row ----------------------------------------------------------- */
.lst-stats{border-top:1px solid rgba(0,0,0,.12);border-bottom:1px solid rgba(0,0,0,.12)}
.lst-stats__grid{
  max-width:var(--lst-max);margin:0 auto;
  display:grid;grid-template-columns:repeat(3,1fr);
}
.lst-stat{padding:34px var(--lst-pad);border-right:1px solid rgba(0,0,0,.1)}
.lst-stat:last-child{border-right:0}
.lst-stat__n{font-family:var(--lst-serif);font-size:46px;line-height:1.1;color:var(--lst-navy)}
.lst-stat__l{font-size:14px;color:var(--lst-faint);margin-top:4px}

/* ==========================================================================
   IMMERSIVE ZONE (home only) — dark, full-viewport hero + stat band on one
   continuous dark field, then a hard cut back to the light editorial sections
   below. Wraps ONLY the hero and stat row. Everything is scoped under
   .lst-immersive so no dark styling leaks into the rest of the page.
   ========================================================================== */
.lst-immersive{
  --imm-hi:#eef2f8;      /* headline / figures */
  --imm-mid:#c2cde0;     /* body copy / stat labels */
  --imm-accent:#8fb4ff;  /* italic headline + links on dark */
  position:relative;isolation:isolate;color:var(--imm-hi);
  background:radial-gradient(120% 90% at 80% 0%,#1a355f,#0c1a34 58%,#070f1f);
}

/* Ambient layer — deliberately STATIC (a second moving grid would fight the
   hero graphic). Just a faint grid fading in from the top and two soft glows. */
.lst-immersive__bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.lst-imm__grid{
  position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:60px 60px;
  -webkit-mask-image:radial-gradient(130% 100% at 50% 0%,#000,transparent 76%);
  mask-image:radial-gradient(130% 100% at 50% 0%,#000,transparent 76%);
}
.lst-imm__glow{position:absolute;border-radius:50%;filter:blur(90px)}
.lst-imm__glow--a{top:-12%;right:-8%;width:52%;height:60%;background:rgba(26,58,107,.55)}
.lst-imm__glow--b{bottom:-16%;left:-10%;width:46%;height:52%;background:rgba(20,41,77,.5)}

/* content above the ambient layer */
.lst-immersive > .lst-hero,
.lst-immersive > .lst-stats{position:relative;z-index:1}

/* --- hero, full viewport --------------------------------------------- */
.lst-immersive .lst-hero{
  min-height:100vh;min-height:100svh;
  align-items:center;padding-top:118px;padding-bottom:80px;
}
.lst-immersive .lst-hero__h1{color:var(--imm-hi)}
.lst-immersive .lst-hero__h1 em{color:var(--imm-accent)}
.lst-immersive .lst-hero__p{color:var(--imm-mid)}
/* primary CTA flips to a white pill; the underlined link turns white.
   (Uses --lst-white, not the old --lst-cream token, which was renamed to
   --lst-ground when the site background went white.) */
.lst-immersive .lst-btn--ink,
.lst-immersive .lst-btn--ink:hover{background:var(--lst-white);color:var(--lst-navy-deep)}
.lst-immersive .lst-link-under{color:#fff;border-bottom-color:rgba(255,255,255,.55)}
.lst-immersive .lst-link-under:hover{color:#fff;border-bottom-color:#fff}

/* Ambient drift + sweep across the whole hero backdrop (no enclosing box).
   Sits behind the content via z-index:-1; overflow clips the travelling sweep.
   Reuses the sq1/sq2/sweep visuals that used to live in the box.
   The hero is a centred 1180px block but the dark ground is full-bleed, so the
   layer is stretched to the full viewport width (left:50% + translateX + 100vw)
   — otherwise the sweep only covers the middle and leaves the side bands dark.
   Safe from causing a scrollbar because .lst-page has overflow-x:hidden. */
.lst-immersive .lst-hero__ambient{
  position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);
  width:100vw;z-index:-1;overflow:hidden;pointer-events:none;
}
/* The four workflow cards, floating free in the right of the hero. */
.lst-immersive .lst-flow-stack{
  display:flex;flex-direction:column;gap:12px;
  width:100%;max-width:360px;margin-left:auto;
}

/* --- stat band on dark ----------------------------------------------- */
.lst-immersive .lst-stats{border-top:1px solid rgba(255,255,255,.14);border-bottom:0}
.lst-immersive .lst-stat{
  border-right-color:rgba(255,255,255,.12);
  border-bottom-color:rgba(255,255,255,.12); /* used when stacked on mobile */
  padding-top:52px;padding-bottom:52px;
}
.lst-immersive .lst-stat__n{color:#fff;font-size:60px}
.lst-immersive .lst-stat__l{color:var(--imm-mid)}

/* On phones the full-viewport hero would leave a huge empty band, so relax it. */
@media (max-width:860px){
  .lst-immersive .lst-hero{min-height:auto;padding-top:96px;padding-bottom:48px}
  .lst-immersive .lst-stat__n{font-size:46px}
  /* headline first, floating cards below it, centred */
  .lst-immersive .lst-hero__visual{order:0}
  .lst-immersive .lst-flow-stack{margin:0 auto;max-width:420px}
}

/* ==========================================================================
   LIGHT-ZONE WASH — one continuous blue-grey gradient behind the three light
   content sections (What we do, Industries, Approach). Full-bleed; the centred
   section content sits transparently on top so there are no seams. Text
   contrast on this tint is AA-verified (kicker 4.7, body 6.7, ink 13+).
   ========================================================================== */
.lst-lightzone{
  background:linear-gradient(180deg,var(--lst-zone-a) 0%,var(--lst-zone-b) 100%);
}
/* Approach carried its own opaque tint + rules; drop them so the zone wash
   shows through unbroken. */
.lst-lightzone .lst-approach{background:transparent;border-top:0;border-bottom:0}

/* --- services (numbered editorial rows) --------------------------------- */
.lst-services{
  max-width:var(--lst-max);margin:0 auto;padding:78px var(--lst-pad) 20px;
  scroll-margin-top:80px;
}
.lst-sec-h2{margin:14px 0 44px;max-width:640px}
.lst-srow{
  display:grid;grid-template-columns:60px 1fr 1.4fr;gap:32px;
  padding:30px 0;border-top:1px solid rgba(0,0,0,.12);align-items:baseline;
}
.lst-srow:last-child{border-bottom:1px solid rgba(0,0,0,.12)}
.lst-srow__n{font-family:var(--lst-mono);font-size:15px;color:var(--lst-red-dark)}
.lst-srow__t{font-family:var(--lst-serif);font-size:28px;margin:0}
.lst-srow__p{font-size:15.5px;line-height:1.65;color:var(--lst-muted);margin:0}

/* --- industries --------------------------------------------------------- */
.lst-industries{
  max-width:var(--lst-max);margin:0 auto;padding:70px var(--lst-pad) 30px;
  scroll-margin-top:80px;
}
.lst-cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
/* A soft shadow lifts the card off the white ground, so the border can drop
   back to a hairline. The abstract-shape icon chips were replaced by a short
   sector-coloured rule — an editorial marker rather than a meaningless glyph. */
.lst-card{
  background:var(--lst-white);border:1px solid rgba(0,0,0,.07);
  border-radius:14px;padding:34px 32px 32px;
  box-shadow:0 12px 40px rgba(0,0,0,.05);
}
.lst-card__mark{
  display:block;width:34px;height:3px;border-radius:2px;margin:0 0 22px;
  background:var(--lst-navy);
}
.lst-card__mark--navy{background:var(--lst-navy)}
.lst-card__mark--red{background:var(--lst-red-dark)}
.lst-card__t{font-family:var(--lst-serif);font-size:26px;line-height:1.15;margin:0 0 12px}
.lst-card__p{font-size:15px;line-height:1.65;color:var(--lst-muted);margin:0}

/* --- approach ----------------------------------------------------------- */
.lst-approach{
  background:var(--lst-tint);
  border-top:1px solid rgba(0,0,0,.08);border-bottom:1px solid rgba(0,0,0,.08);
  margin-top:60px;scroll-margin-top:80px;
}
.lst-approach__inner{max-width:var(--lst-max);margin:0 auto;padding:74px var(--lst-pad)}
.lst-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
.lst-step__n{font-family:var(--lst-serif);font-size:40px;line-height:1.1;color:var(--lst-navy);margin-bottom:10px}
.lst-step__n--red{color:var(--lst-red-dark)}
/* h3 rather than h4: the page outline must not skip a level (h2 -> h4).
   Styling is unchanged from the design. */
.lst-step h3{font-family:var(--lst-sans);font-weight:600;font-size:19px;margin:0 0 8px}
.lst-step p{font-size:14.5px;color:var(--lst-muted);line-height:1.6;margin:0}

/* --- lead capture band (homepage) --------------------------------------- */
.lst-lead-band{background:var(--lst-navy);color:#eef1f6;scroll-margin-top:80px}
.lst-lead-band__inner{
  max-width:var(--lst-max);margin:0 auto;padding:78px var(--lst-pad);
  display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;
}
.lst-lead-band .lst-kicker{color:#f0a59e;margin-bottom:18px}
.lst-lead-band__h2{font-family:var(--lst-serif);font-size:46px;line-height:1.06;margin:0 0 18px}
.lst-lead-band__p{font-size:16.5px;line-height:1.6;color:#b9c4d8;margin:0 0 28px;max-width:440px}
.lst-ticks{display:flex;flex-direction:column;gap:12px;font-size:15px;color:#d3dbe9}
.lst-tick{display:flex;gap:11px;align-items:center}
.lst-tick span{
  width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.14);
  display:flex;align-items:center;justify-content:center;font-size:11px;color:#fff;flex:none;
}

/* ==========================================================================
   FORMS — WPForms restyled to match the design
   ========================================================================== */
.lst-form-card{
  background:var(--lst-white);border:1px solid rgba(0,0,0,.13);border-radius:16px;
  padding:40px;box-shadow:0 10px 40px rgba(0,0,0,.06);
}
.lst-form-note{font-size:12px;color:#8c877c;text-align:center;margin:16px 0 0}

/* WPForms Lite ships `wpforms-full.min.css`, which loads AFTER this file and
   drives its whole appearance through CSS custom properties. Setting those
   properties is the supported way to restyle it — fighting the stylesheet with
   raw selectors loses, because its own rules are both later and specific. */
.lst-form .wpforms-container{
  margin:0;
  --wpforms-field-border-radius:9px;
  --wpforms-field-size-font-size:14.5px;
  --wpforms-field-size-input-height:50px;
  --wpforms-field-size-input-spacing:16px;
  --wpforms-field-size-padding-h:15px;
  --wpforms-field-size-line-height:22px;
  --wpforms-label-size-font-size:13px;
  --wpforms-label-size-line-height:18px;
  --wpforms-label-size-sublabel-spacing:7px;
  --wpforms-button-border-radius:9px;
  --wpforms-button-size-font-size:15px;
  --wpforms-button-size-height:52px;
  --wpforms-button-size-padding-h:16px;
}
.lst-form .wpforms-field{padding:0 0 16px}
/* These three need the .wpforms-container prefix to outrank WPForms' own
   `.wpforms-container .wpforms-field-label` / `div.wpforms-container-full
   input[type=submit]` rules, which are equally or more specific than a bare
   `.lst-form ...` selector and load later. */
.lst-form .wpforms-container .wpforms-field-label{font-family:var(--lst-sans);font-weight:600}
.lst-form .wpforms-container .wpforms-submit{
  width:100%;font-family:var(--lst-sans);font-weight:700;cursor:pointer;
}
/* Textarea height is `--wpforms-field-size-input-height * 5.1` in a 3-class,
   2-element selector, so the override needs four classes to win. */
.lst-form .wpforms-container.wpforms-render-modern textarea.wpforms-field-large{resize:none}

/* Company + Industry sit side by side, as in the design. */
.lst-form .wpforms-field.lst-half{display:inline-block;width:calc(50% - 8px);vertical-align:top}
.lst-form .wpforms-field.lst-half + .wpforms-field.lst-half{margin-left:16px}

/* light variant — Contact page white card */
.lst-form--light .wpforms-container{
  --wpforms-field-background-color:#f5f5f6;
  --wpforms-field-border-color:#e2e2e4;
  --wpforms-field-text-color:#17140f;
  --wpforms-label-color:#4a453d;
  --wpforms-label-sublabel-color:#8c877c;
  --wpforms-button-background-color:#14294d;
  --wpforms-button-text-color:#ffffff;
}
.lst-form--light ::placeholder{color:#a39e93;opacity:1}
.lst-form--light .wpforms-container.wpforms-render-modern textarea.wpforms-field-large{height:120px}

/* dark variant — homepage navy band */
.lst-form--dark .wpforms-container{
  --wpforms-field-border-radius:8px;
  --wpforms-field-background-color:rgba(255,255,255,.08);
  --wpforms-field-border-color:rgba(255,255,255,.2);
  --wpforms-field-text-color:#ffffff;
  --wpforms-label-color:#d3dbe9;
  --wpforms-label-sublabel-color:#9fabc4;
  --wpforms-button-border-radius:8px;
  --wpforms-button-background-color:#ffffff;
  --wpforms-button-text-color:#14294d;
}
.lst-form--dark ::placeholder{color:#9fabc4;opacity:1}
.lst-form--dark select option{color:var(--lst-ink)}
.lst-form--dark .wpforms-container.wpforms-render-modern textarea.wpforms-field-large{height:96px}

/* --------------------------------------------------------------------------
   Render-mode-independent overrides. Some WPForms builds render "classic"
   markup that ignores the CSS custom properties above, and the active parent
   theme's generic input/button rules then win. These direct rules force the
   LIST styling regardless of WPForms version or render mode, so they carry
   !important to beat the theme's frontend styles.
   -------------------------------------------------------------------------- */
.lst-form .wpforms-container input[type=text],
.lst-form .wpforms-container input[type=email],
.lst-form .wpforms-container input[type=tel],
.lst-form .wpforms-container input[type=url],
.lst-form .wpforms-container input[type=number],
.lst-form .wpforms-container select,
.lst-form .wpforms-container textarea{
  width:100% !important;box-sizing:border-box !important;
  background-color:var(--lst-field) !important;
  border:1px solid var(--lst-input-border) !important;
  border-radius:9px !important;
  padding:14px 15px !important;
  font-family:var(--lst-sans) !important;font-size:14.5px !important;
  color:var(--lst-ink) !important;height:auto !important;line-height:1.4 !important;
  box-shadow:none !important;-webkit-appearance:none;appearance:none;
}
.lst-form .wpforms-container textarea{height:120px !important;resize:none !important}
.lst-form .wpforms-container input:focus,
.lst-form .wpforms-container select:focus,
.lst-form .wpforms-container textarea:focus{
  border-color:var(--lst-red) !important;outline:none !important;
}
.lst-form .wpforms-container .wpforms-field-label{
  font-family:var(--lst-sans) !important;font-weight:600 !important;
  font-size:13px !important;margin:0 0 7px !important;
}
.lst-form .wpforms-container button[type=submit],
.lst-form .wpforms-container .wpforms-submit,
.lst-form .wpforms-container input[type=submit]{
  width:100% !important;border:0 !important;border-radius:9px !important;
  padding:15px 16px !important;cursor:pointer;
  font-family:var(--lst-sans) !important;font-weight:700 !important;font-size:15px !important;
  background-color:var(--lst-navy-deep) !important;color:#fff !important;
  height:auto !important;box-shadow:none !important;text-transform:none !important;
  letter-spacing:normal !important;
}

/* light variant (Contact) — labels muted, cream fields (already default above) */
.lst-form--light .wpforms-container .wpforms-field-label{color:var(--lst-muted) !important}

/* dark variant (Home navy band) — translucent fields, white button */
.lst-form--dark .wpforms-container input[type=text],
.lst-form--dark .wpforms-container input[type=email],
.lst-form--dark .wpforms-container input[type=tel],
.lst-form--dark .wpforms-container input[type=url],
.lst-form--dark .wpforms-container input[type=number],
.lst-form--dark .wpforms-container select,
.lst-form--dark .wpforms-container textarea{
  background-color:rgba(255,255,255,.08) !important;
  border-color:rgba(255,255,255,.2) !important;
  color:#fff !important;border-radius:8px !important;
}
.lst-form--dark .wpforms-container textarea{height:96px !important}
.lst-form--dark .wpforms-container .wpforms-field-label{color:#d3dbe9 !important}
.lst-form--dark .wpforms-container button[type=submit],
.lst-form--dark .wpforms-container .wpforms-submit,
.lst-form--dark .wpforms-container input[type=submit]{
  background-color:#fff !important;color:var(--lst-navy-deep) !important;border-radius:8px !important;
}

/* Confirmation ("thank you") panels. WPForms styles its own success box green
   via `div.wpforms-container-full .wpforms-confirmation-container-full`, so
   these need the extra .lst-form class to win. */
.lst-form .wpforms-confirmation-container-full,
.lst-form div.wpforms-container-full .wpforms-confirmation-container-full{
  text-align:center;border:0;margin:0;
}
.lst-form .wpforms-confirmation-container-full p,
.lst-form div.wpforms-container-full .wpforms-confirmation-container-full p{
  margin:0;font-family:var(--lst-sans);font-size:15px;line-height:1.6;
}
.lst-form .wpforms-confirmation-container-full h3,
.lst-form div.wpforms-container-full .wpforms-confirmation-container-full h3{
  font-family:var(--lst-serif);font-weight:400;font-size:28px;margin:0 0 12px;
}

.lst-form--light .wpforms-confirmation-container-full,
.lst-form--light div.wpforms-container-full .wpforms-confirmation-container-full{
  background:var(--lst-navy);color:#eef1f6;border-radius:16px;padding:60px 44px;
}
.lst-form--light .wpforms-confirmation-container-full p{color:#b9c4d8}

.lst-form--dark .wpforms-confirmation-container-full,
.lst-form--dark div.wpforms-container-full .wpforms-confirmation-container-full{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18) !important;
  border-radius:14px;padding:48px 40px;color:#eef1f6;
  animation:lst-rise .5s ease both;
}
.lst-form--dark .wpforms-confirmation-container-full p{color:#b9c4d8}

/* placeholder shown until the WPForms form ID is set */
.lst-formph{border-radius:16px;padding:40px;font-size:14px;line-height:1.6}
.lst-formph__title{font-family:var(--lst-serif);font-size:24px;margin:0 0 10px}
.lst-formph__body{margin:0}
.lst-formph code{font-family:var(--lst-mono);font-size:12.5px}
.lst-formph--light{
  background:var(--lst-white);border:1px dashed var(--lst-input-border);
  color:var(--lst-muted);box-shadow:0 10px 40px rgba(0,0,0,.06);
}
.lst-formph--dark{
  background:rgba(255,255,255,.06);border:1px dashed rgba(255,255,255,.3);color:#b9c4d8;
}
.lst-formph--dark .lst-formph__title{color:#eef1f6}

/* ==========================================================================
   PRODUCTS PAGE
   ========================================================================== */
.lst-prod-hero{max-width:var(--lst-max);margin:0 auto;padding:74px var(--lst-pad) 20px}
.lst-prod-hero .lst-kicker{margin-bottom:20px}
.lst-prod-hero__h1{font-size:60px;margin:0 0 22px;max-width:820px}
.lst-prod-hero__p{max-width:600px;margin:0}
.lst-prod-grid{
  max-width:var(--lst-max);margin:0 auto;padding:50px var(--lst-pad) 30px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
}
.lst-prod{
  background:var(--lst-white);border:1px solid rgba(0,0,0,.13);border-radius:12px;
  padding:30px;display:flex;flex-direction:column;
}
.lst-prod__tag{
  font-family:var(--lst-mono);font-size:11px;letter-spacing:.12em;
  color:var(--lst-red-dark);margin-bottom:16px;
}
.lst-prod__t{font-family:var(--lst-serif);font-size:25px;margin:0 0 10px;line-height:1.2}
.lst-prod__p{font-size:14.5px;line-height:1.6;color:var(--lst-muted);margin:0 0 20px;flex:1}
.lst-page .lst-dl{
  align-self:flex-start;font-family:var(--lst-mono);font-size:11.5px;letter-spacing:.06em;
  color:var(--lst-faint);border-bottom:1px solid rgba(0,0,0,.22);padding-bottom:1px;
}
.lst-page .lst-dl:hover{color:var(--lst-red-dark);border-bottom-color:var(--lst-red-dark)}
.lst-prod--cta{
  background:var(--lst-navy);color:#fff;border:0;justify-content:center;
}
.lst-prod--cta .lst-prod__t{color:#fff}
.lst-prod--cta .lst-prod__p{color:#b9c4d8;flex:0;margin-bottom:22px}

/* ==========================================================================
   ABOUT ("What we do") PAGE
   ========================================================================== */
/* Text-only hero (skyline removed). Single column so the copy runs the full
   content width; headline and intro carry their own readability caps. */
.lst-about-hero{
  max-width:var(--lst-max);margin:0 auto;padding:78px var(--lst-pad) 60px;
}
.lst-about-hero .lst-kicker{display:block;margin-bottom:24px}
.lst-about-hero__h1{font-size:60px;margin:0 0 24px;max-width:960px}
.lst-about-hero__p{max-width:680px;margin:0}


/* story */
.lst-story{border-top:1px solid rgba(0,0,0,.12)}
.lst-story__inner{
  max-width:var(--lst-max);margin:0 auto;padding:66px var(--lst-pad);
  display:grid;grid-template-columns:.9fr 1.4fr;gap:56px;
}
.lst-story h2{font-family:var(--lst-serif);font-size:34px;line-height:1.1;margin:0}
.lst-story__body{display:flex;flex-direction:column;gap:20px;font-size:16px;line-height:1.7;color:var(--lst-muted)}

/* values */
.lst-values{background:var(--lst-tint);border-top:1px solid rgba(0,0,0,.08);border-bottom:1px solid rgba(0,0,0,.08)}
.lst-values__inner{max-width:var(--lst-max);margin:0 auto;padding:70px var(--lst-pad)}
.lst-values .lst-kicker{margin-bottom:36px}
.lst-values__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
.lst-value h3{font-family:var(--lst-serif);font-weight:400;font-size:24px;margin:0 0 10px}
.lst-value p{font-size:14.5px;color:var(--lst-muted);line-height:1.6;margin:0}

/* about stats (4 cols, borderless) */
.lst-stats4{
  max-width:var(--lst-max);margin:0 auto;padding:66px var(--lst-pad);
  display:grid;grid-template-columns:repeat(4,1fr);gap:24px;
}
.lst-stats4 .lst-stat__n{font-size:48px}

/* CTA band */
.lst-cta-band{background:var(--lst-navy);color:#eef1f6}
.lst-cta-band__inner{
  max-width:var(--lst-max);margin:0 auto;padding:70px var(--lst-pad);
  display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap;
}
.lst-cta-band h2{font-family:var(--lst-serif);font-size:40px;line-height:1.06;margin:0;max-width:560px}

/* ==========================================================================
   CONTACT PAGE
   ========================================================================== */
.lst-contact{
  max-width:var(--lst-max);margin:0 auto;padding:78px var(--lst-pad) 80px;
  display:grid;grid-template-columns:.95fr 1.05fr;gap:64px;align-items:start;
}
.lst-contact .lst-kicker{margin-bottom:22px}
.lst-contact__h1{font-size:56px;margin:0 0 22px}
.lst-contact__p{font-size:18px;line-height:1.6;color:var(--lst-muted);max-width:440px;margin:0 0 40px}
.lst-meta{display:flex;flex-direction:column;gap:26px}
.lst-meta__label{
  font-family:var(--lst-mono);font-size:11px;letter-spacing:.14em;
  color:#8c877c;margin-bottom:8px;
}
.lst-meta__email{font-size:17px;font-weight:600}
.lst-meta__val{font-size:16px;color:var(--lst-muted);line-height:1.55}

/* ==========================================================================
   SIGN IN — LIST chrome + styling around the page's own login form
   (Ultimate Member on the live file-manager login page). The UM selectors
   below use !important because UM ships fairly specific/aggressive CSS; the
   plain input/button selectors cover the general case if the markup differs.
   UM is not installed on the dev site, so the field styling is built to UM's
   standard classes and finalised against the live form after deployment.
   ========================================================================== */
.lst-signin{
  max-width:var(--lst-max);margin:0 auto;padding:78px var(--lst-pad) 92px;
  display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;
}
.lst-signin .lst-kicker{margin-bottom:22px}
.lst-signin__h1{font-size:52px;margin:0 0 20px}
.lst-signin__p{max-width:40ch;margin:0 0 26px}
.lst-signin__secure{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--lst-faint)}
.lst-signin__dot{
  width:9px;height:9px;border-radius:50%;background:#1f9d57;flex:none;
  box-shadow:0 0 0 4px rgba(31,157,87,.16);
}
.lst-signin__card{
  background:var(--lst-white);border:1px solid rgba(0,0,0,.1);border-radius:16px;
  padding:40px 36px;box-shadow:0 16px 48px rgba(0,0,0,.08);
}

/* --- style whatever login form the page outputs (Ultimate Member) --- */
.lst-signin__card input[type=text],
.lst-signin__card input[type=email],
.lst-signin__card input[type=password],
.lst-signin__card .um-form-field{
  width:100% !important;box-sizing:border-box;
  font-family:var(--lst-sans) !important;font-size:14.5px !important;
  background:var(--lst-field) !important;border:1px solid var(--lst-input-border) !important;
  border-radius:9px !important;padding:14px 15px !important;
  color:var(--lst-ink) !important;height:auto !important;
  -webkit-appearance:none;appearance:none;box-shadow:none !important;
}
.lst-signin__card input[type=text]:focus,
.lst-signin__card input[type=email]:focus,
.lst-signin__card input[type=password]:focus,
.lst-signin__card .um-form-field:focus{
  outline:none;border-color:var(--lst-red) !important;
}
.lst-signin__card ::placeholder{color:#a39e93;opacity:1}
.lst-signin__card label,
.lst-signin__card .um-field-label label{
  display:block;font-family:var(--lst-sans);font-size:13px;font-weight:600;
  color:var(--lst-muted);margin:0 0 7px;
}
.lst-signin__card input[type=submit],
.lst-signin__card button[type=submit],
.lst-signin__card .um-button{
  width:100% !important;border:0 !important;border-radius:9px !important;
  padding:15px 16px !important;cursor:pointer;
  font-family:var(--lst-sans) !important;font-weight:700 !important;font-size:15px !important;
  background:var(--lst-navy-deep) !important;color:#fff !important;height:auto !important;
  box-shadow:none !important;text-transform:none !important;
}
.lst-signin__card .um-button:hover{opacity:.9}
/* UM spacing niceties */
.lst-signin__card .um,
.lst-signin__card .um-form{max-width:none !important}

@media (max-width:860px){
  .lst-signin{grid-template-columns:1fr;gap:34px;padding:44px var(--lst-pad) 56px}
  .lst-signin__h1{font-size:38px}
  .lst-signin__intro{order:-1}
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.lst-footer{background:var(--lst-ink);color:var(--lst-foot-text)}
.lst-footer__inner{
  max-width:var(--lst-max);margin:0 auto;padding:56px var(--lst-pad) 36px;
  display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:40px;
}
.lst-footer__brand img{height:26px;width:auto;margin-bottom:16px}
.lst-footer__brand p{font-size:14px;line-height:1.6;color:var(--lst-foot-blurb);margin:0;max-width:260px}
.lst-footer__label{
  font-family:var(--lst-mono);font-size:11px;letter-spacing:.14em;
  color:var(--lst-foot-faint);margin-bottom:16px;
}
.lst-footer__links{display:flex;flex-direction:column;gap:11px;font-size:14px}
.lst-page .lst-footer__links a{color:var(--lst-foot-text)}
.lst-page .lst-footer__links a:hover{color:var(--lst-red-dark)}
.lst-footer__qr{
  display:block;width:108px;height:108px;border-radius:10px;
  background:#fff;padding:6px;overflow:hidden;
}
.lst-footer__qr img{width:100%;height:100%;image-rendering:pixelated}
.lst-footer__cap{font-size:13px;color:var(--lst-foot-blurb);margin-top:12px}
.lst-footer__bar{
  max-width:var(--lst-max);margin:0 auto;padding:18px var(--lst-pad);
  border-top:1px solid rgba(255,255,255,.08);
  font-size:12.5px;color:var(--lst-foot-faint);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* --- tablet: product grid 3 → 2 ----------------------------------------- */
@media (max-width:1040px){
  .lst-prod-grid{grid-template-columns:repeat(2,1fr)}
  .lst-hero__h1{font-size:56px}
  .lst-prod-hero__h1,.lst-about-hero__h1{font-size:50px}
  .lst-h2,.lst-lead-band__h2{font-size:36px}
}

/* --- hamburger nav ------------------------------------------------------ */
@media (max-width:900px){
  .lst-nav__burger{display:flex}
  .lst-nav__links{
    display:none;position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--lst-ground);border-bottom:1px solid rgba(0,0,0,.1);
    padding:8px var(--lst-pad) 20px;
    box-shadow:0 12px 30px rgba(0,0,0,.08);
  }
  .lst-nav__links.is-open{display:flex}
  .lst-nav__link{
    display:flex;align-items:center;min-height:48px;font-size:16px;
    border-bottom:1px solid rgba(0,0,0,.07);
  }
  .lst-nav__cta{
    margin-top:16px;text-align:center;min-height:48px;
    display:flex;align-items:center;justify-content:center;
  }
  .lst-nav__inner{position:relative}
}

/* --- stack every 2-col grid --------------------------------------------- */
@media (max-width:860px){
  :root{--lst-pad:22px}

  .lst-hero,
  .lst-contact,
  .lst-lead-band__inner,
  .lst-story__inner{
    grid-template-columns:1fr;
    gap:36px;
    align-items:start;
  }

  /* hero visual full-width above the text on mobile */
  .lst-hero{padding:40px var(--lst-pad) 48px}
  .lst-about-hero{padding:40px var(--lst-pad) 44px}
  .lst-hero__visual{order:-1}
  .lst-motion{aspect-ratio:4/3}

  .lst-hero__h1{font-size:42px;line-height:1.06}
  .lst-prod-hero__h1,.lst-about-hero__h1{font-size:38px}
  .lst-contact__h1{font-size:38px}
  .lst-h2,.lst-lead-band__h2,.lst-cta-band h2{font-size:30px}
  .lst-lead{font-size:17px}
  .lst-hero__p{margin-bottom:38px}
  .lst-hero__ctas{gap:14px}
  .lst-btn{padding:15px 26px;min-height:48px;display:inline-flex;align-items:center}

  /* stat rows stack */
  .lst-stats__grid{grid-template-columns:1fr}
  .lst-stat{border-right:0;border-bottom:1px solid rgba(0,0,0,.1);padding:26px var(--lst-pad)}
  .lst-stat:last-child{border-bottom:0}
  .lst-stats4{grid-template-columns:repeat(2,1fr);padding:44px var(--lst-pad);gap:28px}

  /* services rows: number inline above title */
  .lst-services{padding:48px var(--lst-pad) 12px}
  .lst-srow{grid-template-columns:1fr;gap:10px;padding:26px 0}
  .lst-srow__t{font-size:24px}

  /* card grids single column */
  .lst-industries{padding:44px var(--lst-pad) 20px}
  .lst-cards3,.lst-steps,.lst-values__grid{grid-template-columns:1fr;gap:18px}
  .lst-steps,.lst-values__grid{gap:30px}
  .lst-prod-grid{grid-template-columns:1fr;padding:32px var(--lst-pad) 20px}

  .lst-approach{margin-top:36px}
  .lst-approach__inner,.lst-values__inner{padding:48px var(--lst-pad)}
  .lst-story__inner{padding:44px var(--lst-pad)}
  .lst-lead-band__inner{padding:48px var(--lst-pad)}
  .lst-cta-band__inner{padding:48px var(--lst-pad);gap:26px}
  .lst-contact{padding:40px var(--lst-pad) 56px}
  .lst-prod-hero{padding:40px var(--lst-pad) 8px}

  /* forms fill the width, no oversized card padding */
  .lst-form-card,.lst-formph{padding:26px 22px}
  /* Company + Industry stop sharing a row */
  .lst-form .wpforms-field.lst-half{display:block;width:100%}
  .lst-form .wpforms-field.lst-half + .wpforms-field.lst-half{margin-left:0}
  .lst-form--light .wpforms-confirmation-container-full{padding:40px 24px}
  .lst-form--dark .wpforms-confirmation-container-full{padding:34px 22px}
  .lst-form--light .wpforms-confirmation-container-full{padding:44px 26px;font-size:24px}
  .lst-form--dark .wpforms-confirmation-container-full{padding:36px 24px;font-size:22px}

  /* footer stacks */
  .lst-footer__inner{grid-template-columns:1fr;gap:32px;padding:44px var(--lst-pad) 30px}
  .lst-footer__brand p{max-width:none}
}

@media (max-width:420px){
  .lst-hero__h1{font-size:34px}
  .lst-prod-hero__h1,.lst-about-hero__h1,.lst-contact__h1{font-size:32px}
  .lst-h2,.lst-lead-band__h2,.lst-cta-band h2{font-size:26px}
  .lst-stats4{grid-template-columns:1fr}
  .lst-hero__ctas{flex-direction:column;align-items:stretch}
  .lst-hero__ctas .lst-btn{text-align:center;justify-content:center}
  .lst-link-under{align-self:flex-start}
}