/* ============================================================
   LEK SYSTEMS — Bringing clarity to complexity
   UK software company: design, development & SaaS products.
   Light, minimalist corporate theme.
   ============================================================ */

:root{
  /* brand */
  --porcelain:#F1F3F9;   /* page background */
  --graphite:#1F2937;    /* primary dark / ink */
  --navy:#09203f;        /* accent gradient dark */
  --steel:#537895;       /* accent */
  --steel-lift:#6f8fac;  /* lifted accent for wireframe on light */
  --ice:#cfe3f5;

  --surface:#ffffff;     /* cards */
  --ink:var(--graphite);
  --ink-soft:#4b586b;    /* muted body text */
  --ink-faint:#7b8698;   /* labels, meta */

  --line: color-mix(in srgb, var(--graphite) 12%, transparent);
  --line-strong: color-mix(in srgb, var(--graphite) 20%, transparent);
  --accent-grad: linear-gradient(120deg, var(--graphite), var(--steel));

  --font-display:"Abel", system-ui, sans-serif;          /* headings */
  --font-body:"Josefin Sans", system-ui, sans-serif;     /* body */
  --font-mono:"IBM Plex Mono", ui-monospace, monospace;  /* labels */

  --max:1160px;
  --gutter:clamp(20px, 5vw, 72px);
  --radius:14px;

  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  background:var(--porcelain);
  color:var(--ink);
  font-family:var(--font-body);
  font-weight:400;
  font-size:clamp(16px,1.05vw,18px);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

a{color:inherit;text-decoration:none}
em{font-style:normal}
img,svg{display:block;max-width:100%}

::selection{background:var(--graphite);color:var(--porcelain)}
:focus-visible{outline:2px solid var(--steel);outline-offset:3px;border-radius:4px}

/* ---------- shared type ---------- */
.eyebrow{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--steel);
  display:flex;align-items:center;gap:.7em;
}
.eyebrow__idx{
  color:var(--ink);
  border:1px solid var(--line-strong);
  border-radius:3px;
  padding:.15em .5em;
  letter-spacing:.05em;
}
.eyebrow__dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--steel);
}

.section-title{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(2rem,4.4vw,3.4rem);
  line-height:1.06;
  letter-spacing:.005em;
  color:var(--ink);
}
.section-lede{
  color:var(--ink-soft);
  max-width:56ch;
  font-size:1.08rem;
}
.section-head{
  max-width:var(--max);margin-inline:auto;
  padding-inline:var(--gutter);
  display:flex;flex-direction:column;gap:1rem;
  margin-bottom:clamp(2.5rem,5vw,4rem);
}

/* ---------- buttons ---------- */
.btn{
  font-family:var(--font-mono);
  font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;
  padding:.95em 1.6em;border-radius:8px;
  display:inline-flex;align-items:center;gap:.6em;
  cursor:pointer;border:1px solid transparent;
  transition:transform .35s var(--ease),background .3s,color .3s,border-color .3s,box-shadow .35s;
}
.btn:hover{transform:translateY(-2px)}
.btn--solid{
  background:var(--graphite);color:var(--porcelain);font-weight:500;
}
.btn--solid:hover{box-shadow:0 14px 34px -14px color-mix(in srgb,var(--graphite) 60%,transparent)}
.btn--line{border-color:var(--line-strong);color:var(--ink);background:transparent}
.btn--line:hover{border-color:var(--graphite);background:color-mix(in srgb,var(--graphite) 5%,transparent)}
.btn__arrow{transition:transform .35s var(--ease)}
.btn:hover .btn__arrow{transform:translateX(4px)}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:120;
  display:flex;align-items:center;justify-content:space-between;
  gap:2rem;
  padding:1.1rem var(--gutter);
  transition:background .4s,border-color .4s,padding .4s,backdrop-filter .4s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:color-mix(in srgb,var(--porcelain) 82%,transparent);
  backdrop-filter:blur(14px);
  border-bottom-color:var(--line);
  padding-block:.7rem;
}
.nav__brand{display:flex;align-items:center;gap:.65rem}
.nav__mark{width:28px;height:28px;color:var(--graphite)}
.nav__word{font-family:var(--font-display);font-weight:400;letter-spacing:.22em;font-size:1.02rem;color:var(--ink)}
.nav__word em{color:var(--steel)}
.nav__links{display:flex;gap:2rem}
.nav__links a{
  font-family:var(--font-mono);font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-soft);position:relative;padding:.3em 0;transition:color .3s;
}
.nav__links a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--steel);
  transition:width .35s var(--ease);
}
.nav__links a:hover{color:var(--ink)}
.nav__links a:hover::after{width:100%}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;min-height:92svh;
  display:flex;align-items:center;
  padding:9rem var(--gutter) 5rem;
  overflow:hidden;
}
.hero__canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.hero__grid{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(transparent 0 97%, var(--line) 97%) 0 0/100% 72px,
    linear-gradient(90deg, transparent 0 97%, var(--line) 97%) 0 0/72px 100%;
  mask-image:radial-gradient(120% 90% at 62% 45%, #000 20%, transparent 74%);
  opacity:.6;
}
.hero__inner{position:relative;z-index:5;max-width:var(--max);margin-inline:auto;width:100%}

.hero__title{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(2.8rem,8vw,6.4rem);
  line-height:.98;letter-spacing:.005em;
  margin:1.4rem 0 1rem;color:var(--ink);
}
.hero__title em{
  background:var(--accent-grad);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero__strap{
  font-family:var(--font-display);font-size:clamp(1.3rem,2.6vw,1.9rem);
  color:var(--steel);letter-spacing:.01em;margin-bottom:1.2rem;
}
.hero__lede{max-width:52ch;font-size:1.14rem;color:var(--ink-soft)}
.hero__actions{display:flex;gap:1rem;flex-wrap:wrap;margin-top:2.4rem}

/* ============================================================
   ABOUT
   ============================================================ */
.about{padding:clamp(4rem,9vw,8rem) 0}
.about__body{
  max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter);
  display:flex;flex-direction:column;gap:1.4rem;max-width:min(760px,92vw);
}
.about__body p{
  font-family:var(--font-display);
  font-size:clamp(1.3rem,2.6vw,1.9rem);
  line-height:1.4;color:var(--ink);letter-spacing:.005em;
}
.about__body p:not(:first-child){color:var(--ink-soft)}

/* ============================================================
   WHAT WE DO (capabilities grid)
   ============================================================ */
.platform{padding:clamp(4rem,9vw,8rem) 0;background:var(--surface);border-block:1px solid var(--line)}
.features{
  width:min(var(--max), 100% - 2*var(--gutter));margin-inline:auto;
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
}
.feature{
  background:var(--surface);padding:2rem 1.8rem;
  display:flex;flex-direction:column;gap:.55rem;
  transition:background .35s;
}
.feature:hover{background:color-mix(in srgb,var(--steel) 6%,var(--surface))}
.feature h3{font-family:var(--font-display);font-weight:400;font-size:1.4rem;letter-spacing:.005em;color:var(--ink)}
.feature p{color:var(--ink-soft);font-size:.98rem;line-height:1.55}

/* ============================================================
   PHILOSOPHY
   ============================================================ */
.philosophy{padding:clamp(4rem,9vw,8rem) 0}
.pillars{
  max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter);
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,4vw,3rem);
}
.pillar{display:flex;flex-direction:column;gap:.8rem;padding-top:1.4rem;border-top:2px solid var(--graphite)}
.pillar__idx{font-family:var(--font-display);font-size:1.6rem;color:var(--ink);letter-spacing:.01em}
.pillar p{color:var(--ink-soft);font-size:1.05rem}

/* ============================================================
   CREDENTIALS
   ============================================================ */
.creds-sec{padding:clamp(4rem,9vw,8rem) 0;background:var(--surface);border-block:1px solid var(--line)}
.creds{
  width:min(var(--max), 100% - 2*var(--gutter));margin-inline:auto;
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
}
.cred{
  background:var(--surface);padding:1.9rem 1.6rem;
  display:flex;flex-direction:column;gap:.5rem;
}
.cred__label{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--steel)}
.cred__value{font-family:var(--font-display);font-size:clamp(1.35rem,2.4vw,1.7rem);color:var(--ink);letter-spacing:.01em;line-height:1.1}
.cred__sub{font-size:.86rem;color:var(--ink-faint);margin-top:auto}

/* ============================================================
   CONTACT
   ============================================================ */
.contact{padding:clamp(5rem,10vw,9rem) var(--gutter)}
.contact__inner{
  max-width:620px;margin-inline:auto;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:1.1rem;
}
.contact__mark{width:52px;height:52px;color:var(--steel)}
.contact h2{font-family:var(--font-display);font-weight:400;font-size:clamp(2rem,5vw,3.2rem);line-height:1.06;letter-spacing:.005em;color:var(--ink)}
.contact p{color:var(--ink-soft);font-size:1.1rem;max-width:46ch}
.contact .btn{margin-top:.6rem;text-transform:none;letter-spacing:.04em}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{border-top:1px solid var(--line);padding:clamp(3rem,6vw,5rem) var(--gutter) 2rem;background:var(--porcelain)}
.foot__top{max-width:var(--max);margin-inline:auto;display:flex;justify-content:space-between;align-items:flex-start;gap:2rem;flex-wrap:wrap;padding-bottom:2.5rem;border-bottom:1px solid var(--line)}
.foot__brand{display:flex;align-items:center;gap:.65rem}
.foot__copy{text-align:right}
.foot__tag{font-family:var(--font-display);font-size:1.2rem;color:var(--ink)}
.foot__sub{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);margin-top:.4rem}
.foot__links{max-width:var(--max);margin:2rem auto 0;display:flex;gap:2rem;flex-wrap:wrap}
.foot__links a{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);transition:color .3s}
.foot__links a:hover{color:var(--ink)}
.foot__base{max-width:var(--max);margin:2rem auto 0;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;color:var(--ink-faint)}
.foot__legal{max-width:var(--max);margin:1.2rem auto 0;font-size:.82rem;line-height:1.5;color:var(--ink-faint);max-width:min(72ch,100%)}

/* ============================================================
   REVEAL animations (subtle fade-up only)
   ============================================================ */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
.section-head .section-title,.section-head .eyebrow,.section-head .section-lede{opacity:0;transform:translateY(20px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.section-head.in .eyebrow{opacity:1;transform:none}
.section-head.in .section-title{opacity:1;transform:none;transition-delay:.06s}
.section-head.in .section-lede{opacity:1;transform:none;transition-delay:.14s}
.feature,.cred,.pillar{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.feature.in,.cred.in,.pillar.in{opacity:1;transform:none}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:960px){
  .nav__links{display:none}
  .features{grid-template-columns:repeat(2,1fr)}
  .creds{grid-template-columns:repeat(2,1fr)}
  .pillars{grid-template-columns:1fr;gap:1.6rem}
  .foot__copy{text-align:left}
}
@media (max-width:760px){
  .hero{padding-top:7.5rem;min-height:auto}
  .hero__canvas{opacity:.5}
}
@media (max-width:560px){
  .features{grid-template-columns:1fr}
  .creds{grid-template-columns:1fr}
  .foot__top{flex-direction:column}
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .reveal,.feature,.cred,.pillar,.section-head .eyebrow,.section-head .section-title,.section-head .section-lede{opacity:1!important;transform:none!important}
}

/* Inline SVG sprite host — kept out of the markup so the CSP needs no
   style-src unsafe-inline. */
.svg-sprite { position: absolute; }

/* ============================================================
   Sub-pages (404 + privacy)
   Minimal shells that reuse the tokens and type scale above.
   ============================================================ */
.mini{display:flex;flex-direction:column;min-height:100vh}
.nav--static{position:static;background:transparent;border-bottom:1px solid var(--line)}
.mini__main{
  flex:1;width:100%;max-width:var(--max);
  margin:0 auto;padding:clamp(3.5rem,10vh,7rem) var(--gutter) 4rem;
}
.mini__title{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(2.1rem,5.2vw,3.4rem);line-height:1.08;
  letter-spacing:-.01em;margin:.9rem 0 1.1rem;
}
.mini__lede{max-width:60ch;color:var(--ink-soft);font-size:1.06rem}
.mini__actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.4rem}
.foot--mini{padding-top:2rem}

/* Long-form copy, used by the privacy notice. */
.prose h2{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(1.15rem,2.2vw,1.45rem);
  margin:2.6rem 0 .6rem;padding-top:1.6rem;
  border-top:1px solid var(--line);
}
.prose p{max-width:68ch;color:var(--ink-soft)}
.prose a{color:var(--steel);text-decoration:underline;text-underline-offset:3px}
.prose a:hover{color:var(--graphite)}
.prose strong{color:var(--ink);font-weight:500}
.prose__meta{
  font-family:var(--font-mono);font-size:.74rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-faint);margin-top:2.8rem;
}

/* ============================================================
   01 THE PLATFORM — bento grid
   The dark version used separately-bordered cards with gradient
   fills and a glow shadow. Translated to the light idiom used by
   the rest of this site: a single hairline grid (1px gaps over a
   --line background) with white cells, keeping the bento's span
   variety for visual interest.
   ⚠️ The grid takes the page gutter as MARGIN, not internal
   padding — otherwise the container's hairline background bleeds
   out into grey edge bands.
   ============================================================ */
.bento{
  width:min(var(--max), 100% - 2*var(--gutter));margin-inline:auto;
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  grid-auto-rows:minmax(190px,auto);
  background:var(--line);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;
}
.card{
  background:var(--surface);padding:1.9rem 1.8rem;
  display:flex;flex-direction:column;gap:.6rem;
  transition:background .35s;
}
/* Restraint: a background tint only. The dark version's lift-and-glow
   hover-sheen was removed for the minimalist brief — don't re-add it. */
.card:hover{background:color-mix(in srgb,var(--steel) 6%,var(--surface))}
.card--wide{grid-column:span 2}
.card--tall{grid-row:span 2}
.card--accent{background:color-mix(in srgb,var(--steel) 9%,var(--surface))}
.card--accent:hover{background:color-mix(in srgb,var(--steel) 14%,var(--surface))}
.card__tag{
  font-family:var(--font-mono);font-size:.66rem;
  letter-spacing:.24em;color:var(--steel);
}
.card h3{
  font-family:var(--font-display);font-weight:400;
  font-size:1.45rem;letter-spacing:.005em;line-height:1.12;color:var(--ink);
}
.card p{color:var(--ink-soft);font-size:1rem;line-height:1.55}
.card__list{list-style:none;margin-top:auto;display:flex;flex-direction:column;gap:.5rem;padding-top:1rem}
.card__list li{
  font-family:var(--font-mono);font-size:.74rem;color:var(--ink-faint);
  padding-left:1.2em;position:relative;
}
.card__list li::before{content:"▸";position:absolute;left:0;color:var(--steel)}
.card--feature{flex-direction:row;align-items:center;gap:1.8rem}
.card__body{display:flex;flex-direction:column;gap:.6rem}
.card__cube{flex:0 0 120px;display:grid;place-items:center}

/* CSS isometric mini-cube. Steel outline, no inset glow — the light
   theme carries no bloom. Slow enough to read as structure, not motion. */
.isocube{
  width:74px;height:74px;transform-style:preserve-3d;
  transform:rotateX(-24deg) rotateY(-38deg);
  animation:isospin 22s linear infinite;
}
.isocube i{
  position:absolute;inset:0;
  border:1.2px solid var(--steel);opacity:.55;
}
.isocube i:nth-child(1){transform:translateZ(37px)}
.isocube i:nth-child(2){transform:rotateY(90deg) translateZ(37px)}
.isocube i:nth-child(3){transform:rotateX(90deg) translateZ(37px)}
@keyframes isospin{to{transform:rotateX(-24deg) rotateY(322deg)}}

/* ============================================================
   02 HOW WE WORK — four stages
   ============================================================ */
.process{padding:clamp(4rem,9vw,8rem) 0;background:var(--surface);border-block:1px solid var(--line)}
.steps{
  width:min(var(--max), 100% - 2*var(--gutter));margin-inline:auto;
  list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:0;
}
.step{
  padding:2rem 1.6rem;border-left:1px solid var(--line);position:relative;
  transition:background .4s;
}
.step:first-child{border-left:none}
.step:hover{background:color-mix(in srgb,var(--steel) 5%,transparent)}
.step__no{font-family:var(--font-mono);font-size:.78rem;color:var(--steel);letter-spacing:.1em}
.step h3{
  font-family:var(--font-display);font-weight:400;
  font-size:1.5rem;margin:1.2rem 0 .6rem;color:var(--ink);letter-spacing:.005em;
}
.step p{color:var(--ink-soft);font-size:.98rem;line-height:1.55}
/* The rule that grows in as the step reveals. */
.step::after{
  content:"";position:absolute;top:2.3rem;left:1.6rem;
  width:0;height:1px;background:var(--steel);
  transition:width .8s var(--ease);
}
.step.in::after{width:34px}

/* ============================================================
   03 UNDER THE HOOD — the self-drawing LEK mark
   ============================================================ */
.arch{
  width:min(var(--max), 100% - 2*var(--gutter));margin-inline:auto;
  padding:clamp(4rem,9vw,8rem) 0;
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center;
}
.arch__copy{display:flex;flex-direction:column;gap:1.1rem}
.arch__list{list-style:none;display:flex;flex-direction:column;gap:1rem;margin-top:1rem}
.arch__list li{display:flex;flex-direction:column;border-top:1px solid var(--line);padding-top:.8rem}
.arch__list b{font-family:var(--font-display);font-weight:400;font-size:1.15rem;color:var(--ink)}
.arch__list span{color:var(--ink-soft);font-size:.95rem}
.arch__stage{position:relative;min-height:min(56vh,480px);display:grid;place-items:center}

/* The mark traces itself once via stroke-dashoffset (see main.js).
   ⚠️ NO drop-shadow glow and NO pulsing ldglow animation — those were
   the dark theme's. On the light theme the mark is a clean line shell. */
.logodraw{width:min(84%,360px);height:auto;overflow:visible}
.logodraw__path{
  fill:transparent;
  stroke:var(--graphite);
  stroke-width:.17;
  stroke-linejoin:round;stroke-linecap:round;
}

/* Reveals for the restored sections. */
.card,.step{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.card.in,.step.in{opacity:1;transform:none}

@media (max-width:980px){
  .bento{grid-template-columns:repeat(2,1fr)}
  .card--tall{grid-row:span 1}
  .card--feature{flex-direction:column;align-items:flex-start}
  .steps{grid-template-columns:repeat(2,1fr)}
  .step:nth-child(3){border-left:none}
  .arch{grid-template-columns:1fr}
  .arch__stage{order:-1;min-height:40vh}
}

@media (max-width:620px){
  .bento{grid-template-columns:1fr}
  .card--wide{grid-column:span 1}
  .steps{grid-template-columns:1fr}
  .step{border-left:none;border-top:1px solid var(--line)}
  .step:first-child{border-top:none}
}

@media (prefers-reduced-motion:reduce){
  .isocube{animation:none}
  .card,.step{opacity:1!important;transform:none!important}
  .step::after{width:34px}
}

/* The ninth bento slot. Six cards with one --wide and one --tall fill 8 of 9
   grid slots, so without this the grid shows a grey hole bottom-right. It
   carries the mark and the strapline only — deliberately makes no claim. */
.card--brand{
  align-items:center;justify-content:center;text-align:center;gap:1rem;
  background:color-mix(in srgb,var(--steel) 5%,var(--surface));
}
.card--brand:hover{background:color-mix(in srgb,var(--steel) 5%,var(--surface))}
.card__mark{width:44px;height:44px;color:var(--steel);opacity:.75}
.card__strap{
  font-family:var(--font-display);font-size:1.1rem;
  line-height:1.3;color:var(--steel);letter-spacing:.01em;
}

/* A very faint ghost of the finished mark, sitting behind the animated path
   and sharing identical path data. Without it the cell is completely empty
   for the whole draw, which reads as a broken image rather than an animation
   about to happen. Kept low enough that the trace is still the event. */
.logodraw__ghost{
  fill:transparent;
  stroke:var(--graphite);
  stroke-width:.17;
  stroke-linejoin:round;stroke-linecap:round;
  opacity:.1;
}