/* ============================================================
   Lux Light — Website (site styles)
   Builds on the Lux Light design-system tokens. All colour, type
   and spacing reference DS custom properties. Site-specific layout
   + the scroll-reveal product showcase live here.
   Class prefix: .ll-  (avoids collision with DS .lx-*)
   ============================================================ */

/* ── Custom cursor ─────────────────────────────────────────── */
@media (pointer: fine) {
  /* Only hide the native pointer once the JS custom cursor has actually
     initialized (it bails on reduced-motion and never runs without JS).
     Otherwise those users would be left with no visible cursor at all. */
  html.has-custom-cursor body { cursor: none; }
  .cur {
    position: fixed; width: 10px; height: 10px;
    background: oklch(0.82 0.16 78 / 0.92);
    border-radius: 50%; pointer-events: none; z-index: 9999;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 14px 5px oklch(0.82 0.16 78 / 0.4);
    transition: width .2s, height .2s, box-shadow .2s;
  }
  .cur.big { width: 18px; height: 18px; box-shadow: 0 0 28px 10px oklch(0.82 0.16 78 / 0.3); }
  .cur-r {
    position: fixed; width: 36px; height: 36px;
    border: 1px solid oklch(0.82 0.16 78 / 0.35);
    border-radius: 50%; pointer-events: none; z-index: 9998;
    transform: translate(-50%, -50%);
    transition: width .2s, height .2s, border-color .2s;
  }
  .cur-r.big { width: 52px; height: 52px; border-color: oklch(0.82 0.16 78 / 0.5); }
  .cursor-glow {
    position: fixed; pointer-events: none; z-index: 1;
    width: 480px; height: 480px; border-radius: 50%;
    background: radial-gradient(circle, oklch(0.82 0.16 78 / 0.09) 0%, transparent 70%);
    transform: translate(-50%, -50%);
    transition: opacity .3s; mix-blend-mode: screen; opacity: 0;
  }
}

:root {
  --h-scale: 1;      /* heading scale  (Tweaks: density)   */
  --pad-scale: 1;    /* section rhythm (Tweaks: density)   */
  --ll-maxw: 1200px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
html, body { margin: 0; }
body {
  background: var(--bg-base);
  color: var(--text-body);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--gold-soft); }
img { max-width: 100%; display: block; }
a { color: inherit; }

/* Visible keyboard focus for site links (DS buttons/tags/inputs ship their own
   :focus-visible ring; these custom <a> elements had none). */
a:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: 3px;
}

.ll-wrap { max-width: var(--ll-maxw); margin: 0 auto; padding-inline: var(--page-margin); }

/* ---------- Shared display / section heads ---------- */
.ll-display {
  font-family: var(--serif); font-weight: 300; letter-spacing: -.012em;
  line-height: 1.04; color: var(--text-display); margin: 0;
}
.ll-h1 { font-size: calc(clamp(46px, 6.2vw, 90px) * var(--h-scale)); }
.ll-h2 { font-size: calc(clamp(32px, 4vw, 54px) * var(--h-scale)); }
.ll-h3 { font-size: calc(clamp(26px, 3vw, 40px) * var(--h-scale)); }

/* mixed headings — a quieter lead with a gold emphasis fragment,
   so section titles read with rhythm instead of one flat block */
.ll-h2--mixed { font-weight: 300; }
.ll-h2--mixed em {
  font-style: normal; font-weight: 400; color: var(--gold-deep);
  letter-spacing: -.004em;
  text-shadow: 0 0 26px oklch(0.82 0.16 72 / 0.42), 0 0 9px oklch(0.86 0.13 80 / 0.3);
}

.ll-sec { padding-block: calc(clamp(56px, 7vw, 104px) * var(--pad-scale)); }
.ll-sec--line { border-top: 1px solid var(--border); }
.ll-sechead { max-width: 60ch; }
.ll-sechead .ll-display { margin-top: 16px; }
.ll-secintro { display: flex; gap: 80px; align-items: center; }
.ll-secintro__left { flex: 0 0 auto; max-width: 520px; }
.ll-secintro__left .ll-display { margin-top: 16px; }
.ll-secintro__right { flex: 1; }
@media (max-width: 760px) { .ll-secintro { flex-direction: column; gap: 24px; } }

/* Product range intro — rack lighting background image */
.ll-range-intro { position: relative; padding-top: 0; }
.ll-range-intro__body {
  display: flex; flex-direction: column; align-items: center;
}
.ll-range-img {
  width: 85%; max-height: 280px; object-fit: contain; display: block;
  opacity: 0.75; margin-bottom: 0;
}
.ll-lead {
  font-family: var(--sans); font-size: 17px; line-height: 1.6;
  color: var(--text-muted); margin: 18px 0 0; max-width: 56ch;
}

/* ---------- Reveal-on-scroll ---------- */
.ll-reveal { opacity: 0; transform: translateY(20px); }
.ll-reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.ll-reveal[data-delay="1"].is-in { transition-delay: .08s; }
.ll-reveal[data-delay="2"].is-in { transition-delay: .16s; }
.ll-reveal[data-delay="3"].is-in { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
  .ll-reveal { opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   Header
   ============================================================ */
.ll-hdr {
  position: sticky; top: 0; z-index: 60;
  background: var(--alabaster);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-normal) var(--ease-standard),
              background var(--dur-normal) var(--ease-standard);
}
.ll-hdr[data-scrolled="true"] {
  background: oklch(0.969 0.007 86 / 0.82);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  border-bottom-color: var(--border);
}
.ll-hdr__in {
  max-width: var(--ll-maxw); margin: 0 auto;
  padding: 15px var(--page-margin);
  display: flex; align-items: center; gap: 28px;
}
.ll-hdr__logo { display: flex; align-items: center; }
.ll-hdr__logo img { height: 40px; width: auto; }
.ll-nav { display: flex; gap: 30px; margin-left: auto; align-items: center; }
.ll-nav a {
  font-family: var(--sans); font-size: 14px; font-weight: 500;
  color: var(--navy-700); text-decoration: none; position: relative; padding: 6px 0;
  transition: color var(--dur-fast) var(--ease-standard);
}
.ll-nav a:hover { color: var(--gold-deep); }
.ll-nav a[aria-current="page"] { color: var(--navy-900); }
.ll-nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1.5px;
  background: var(--gold); transition: right var(--dur-normal) var(--ease-standard);
}
.ll-nav a:hover::after { right: 0; }
.ll-nav a[aria-current="page"]::after { right: 0; }
.ll-hdr__cta { display: inline-flex; }
.ll-burger { display: none; }
.ll-mobnav { display: none; }

@media (max-width: 820px) {
  .ll-nav, .ll-hdr__cta { display: none; }
  .ll-burger {
    display: inline-flex; align-items: center; justify-content: center;
    margin-left: auto; width: 44px; height: 44px; border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm); background: var(--paper); color: var(--navy-800); cursor: pointer;
  }
  .ll-burger i { width: 20px; height: 20px; }
  .ll-hdr__logo img { height: 26px; }
  .ll-mobnav { display: none; flex-direction: column; gap: 4px; padding: 8px var(--page-margin) 18px; border-top: 1px solid var(--border); background: var(--paper); }
  .ll-mobnav.open { display: flex; }
  .ll-mobnav a { padding: 12px 4px; font-size: 16px; font-weight: 500; color: var(--navy-800); text-decoration: none; border-bottom: 1px solid var(--line-soft); }
  .ll-mobnav .lx-btn { margin-top: 12px; }
}

/* ============================================================
   Hero  (Home) — video as full background, copy overlaid on top
   ============================================================ */
/* The video is 16:9 and bottom-anchored, so a viewport wider than 16:9 crops the
   sky, which is the only empty band the copy can sit in. Every extra pixel of hero
   height is a pixel of sky returned: visible sky = heroHeight - 0.36 x heroWidth.
   Height is nonetheless held at 94vh so the video does not run past the fold; the copy
   block above is sized to fit the sky that leaves. */
.ll-hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: clamp(620px, 94vh, 940px);
  background: var(--alabaster);
  overflow: hidden;
}
.ll-hero__bg {
  position: absolute; inset: 0; z-index: 0;
  background: var(--alabaster);
}
.ll-hero__bg video {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center bottom;
  display: block; opacity: 0;
  transition: opacity 1s var(--ease-out);
}
.ll-hero__bg video.is-ready { opacity: 1; }

/* light wash at the top so the dark copy stays legible over the video —
   mirrors the white-sky composition of the reference (NOT a dark filter) */
.ll-hero__wash {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(to bottom,
    var(--alabaster) 0%,
    oklch(0.969 0.007 86 / 0.85) 13%,
    oklch(0.969 0.007 86 / 0.28) 26%,
    transparent 38%);
}

.ll-hero__plaque {
  position: absolute; left: var(--page-margin); bottom: 16px; z-index: 2;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold-bright); display: flex; align-items: center; gap: 10px;
}
.ll-hero__plaque span { width: 22px; height: 1px; background: var(--gold-bright); display: inline-block; }

/* Overlaid copy: heading + CTA left, paragraph right */
.ll-hero__inner {
  position: relative; z-index: 2; width: 100%;
  max-width: var(--ll-maxw); margin: 0 auto;
  padding: clamp(28px,3.4vh,46px) var(--page-margin) clamp(40px,6vh,80px);
  display: grid; grid-template-columns: 1.3fr 0.7fr;
  gap: clamp(28px,4vw,64px); align-items: start;
}
.ll-hero__left { min-width: 0; }
/* Offset by the eyebrow's height so the paragraph's first line sits on the
   headline's first line instead of floating above it. */
.ll-hero__right { padding-top: clamp(0px,3.1vh,40px); min-width: 0; }

.ll-hero__eyebrow { margin-bottom: 12px; }
.ll-hero__title {
  font-family: var(--serif); margin: 0; color: var(--navy-900);
  display: flex; flex-direction: column; letter-spacing: -.012em;
}
.ll-hero__title-lead {
  font-size: calc(clamp(26px, 2.6vw, 38px) * var(--h-scale));
  font-weight: 300; line-height: 1.06; letter-spacing: .004em;
  color: var(--navy-700);
}
.ll-hero__title-em {
  font-style: normal; font-weight: 400;
  font-size: calc(clamp(44px, 5.6vw, 88px) * var(--h-scale));
  line-height: 0.96; letter-spacing: -.02em; margin-top: .04em;
  color: var(--gold-deep);
  text-shadow: 0 0 32px oklch(0.82 0.16 72 / 0.42), 0 0 11px oklch(0.86 0.13 80 / 0.32);
}
.ll-hero__sub {
  font-family: var(--sans); font-size: clamp(15px,1.3vw,18px); line-height: 1.65;
  /* 40ch alone overran the 0.7fr column and broke the page's right edge */
  color: var(--text-muted); max-width: min(40ch, 100%); margin: 0;
}
.ll-hero__sub-m { display: none; }
.ll-hero__cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: clamp(8px,1vw,14px); }

@media (max-width: 820px) {
  .ll-hero__inner { grid-template-columns: 1fr; gap: 18px; }
  .ll-hero__right { padding-top: 0; }
}

/* trust strip under hero (alabaster band) */
.ll-trust {
  display: flex; flex-wrap: wrap; gap: 14px 40px; align-items: center;
  max-width: var(--ll-maxw); margin: 0 auto;
  padding: clamp(22px,3vw,34px) var(--page-margin);
}
.ll-trust__item { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--text-muted); }
/* lucide swaps the <i> for an <svg>, so the icon rule has to name both or it never applies */
.ll-trust__item i, .ll-trust__item svg { width: 17px; height: 17px; color: var(--gold-deep); }

/* All four claims hold a single line on desktop. The tightest case is >=1600px, where the
   content box is 1008px (max-width 1200 minus the 96px page margin), not the wider box at
   1440. Items are trimmed to fit that, and space-between distributes the remainder. Below
   1100px there is not enough width at a legible size, so the strip wraps as before. */
@media (min-width: 1100px) {
  .ll-trust { flex-wrap: nowrap; justify-content: space-between; gap: 18px; }
  .ll-trust__item { font-size: 13px; gap: 8px; white-space: nowrap; flex: 0 0 auto; }
  .ll-trust__item i, .ll-trust__item svg { width: 18px; height: 18px; }
}

/* ============================================================
   Product Showcase — pinned, scroll-reveal scenes
   ============================================================ */
.ll-show { position: relative; background: var(--navy-950); }
.ll-show__sticky {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: block; background: var(--navy-950);
}
.ll-show__scenes { position: absolute; inset: 0; }
.ll-show__frame {
  position: absolute; inset: 0; opacity: 0;
  will-change: opacity;
  transition: opacity 80ms linear;
}
.ll-show__frame img {
  width: 100%; height: 100%; object-fit: cover; object-position: center center;
  display: block;
}
/* legibility scrims — keep left + bottom text readable on bright frames */
.ll-show__scrim {
  position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background:
    linear-gradient(100deg, oklch(0.10 0.04 265 / 0.55) 0%, oklch(0.10 0.04 265 / 0.22) 30%, transparent 55%),
    linear-gradient(to top, oklch(0.08 0.03 265 / 0.42) 0%, transparent 28%),
    linear-gradient(to bottom, oklch(0.08 0.03 265 / 0.42) 0%, transparent 26%);
}

.ll-show__grid {
  position: relative; z-index: 3; height: 100%;
  max-width: var(--ll-maxw); margin: 0 auto;
  padding: calc(clamp(28px,4vh,52px) + 72px) var(--page-margin) clamp(28px,4vh,52px);
  display: grid; grid-template-columns: 1fr auto;
  grid-template-rows: auto 1fr auto; gap: 0 clamp(28px,4vw,72px);
}

/* product index (top-left) */
.ll-show__index { grid-column: 1; grid-row: 1; max-width: 360px; }
.ll-show__index h4 {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase;
  color: oklch(0.82 0.02 86 / 0.75); margin: 0 0 18px; font-weight: 500;
}
.ll-show__index ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.ll-show__index li {
  display: flex; align-items: baseline; gap: 16px;
  opacity: 0; transform: translateY(6px);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out), color .3s;
}
.ll-show__index li.is-in { opacity: 1; transform: none; }
.ll-show__index li .n {
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  color: var(--gold); min-width: 18px;
}
.ll-show__index li .t {
  font-family: var(--serif); font-style: normal; font-weight: 400; font-size: 18px;
  color: oklch(0.9 0.015 86 / 0.62); line-height: 1.1;
}
.ll-show__index li.active .t { color: var(--alabaster); }
.ll-show__index li.active .n { color: var(--gold-bright); }

/* meta (bottom-left) */
.ll-show__meta { grid-column: 1; grid-row: 3; max-width: min(34ch, 60%); align-self: end; }
.ll-show__kicker {
  font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold-bright); display: block; margin-bottom: 18px; white-space: pre-line;
}
.ll-show__title {
  font-family: var(--serif); font-weight: 300; letter-spacing: -.01em; line-height: 0.98;
  font-size: calc(clamp(44px, 5.4vw, 80px) * var(--h-scale)); color: var(--alabaster); margin: 0;
  text-shadow: 0 0 38px oklch(0.86 0.13 80 / 0.4), 0 2px 24px oklch(0.1 0.04 265 / 0.45);
}
.ll-show__desc {
  font-family: var(--sans); font-size: 16px; line-height: 1.55;
  color: oklch(0.86 0.012 86 / 0.82); margin: 20px 0 0; max-width: 38ch;
}
.ll-show__cta {
  margin-top: 26px; display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--sans); font-weight: 600; font-size: 14px; color: var(--alabaster);
  text-decoration: none; border-bottom: 1px solid oklch(0.86 0.11 78 / 0.5); padding-bottom: 3px;
  transition: gap var(--dur-normal) var(--ease-standard), color var(--dur-fast);
}
.ll-show__cta i { width: 16px; height: 16px; color: var(--gold-bright); transition: transform var(--dur-normal) var(--ease-standard); }
.ll-show__cta:hover { color: var(--gold-bright); }
.ll-show__cta:hover i { transform: translateX(4px); }

/* lux readout — compact module, bottom-right, aligned with the meta */
.ll-show__lux {
  grid-column: 2; grid-row: 3; align-self: end; justify-self: end;
  display: flex; flex-direction: column; align-items: flex-end;
  text-align: right; min-width: 124px;
}
.ll-show__lux-label {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .22em; text-transform: uppercase;
  color: oklch(0.82 0.02 86 / 0.6); margin-bottom: 8px;
}
.ll-show__lux-num {
  font-family: var(--serif); font-weight: 300; line-height: .85;
  font-size: clamp(46px, 4.8vw, 78px); color: var(--alabaster);
  font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: 6px;
  text-shadow: 0 0 30px oklch(0.86 0.15 80 / 0.55), 0 0 10px oklch(0.92 0.1 86 / 0.4);
}
.ll-show__lux-num i {
  font-family: var(--mono); font-style: normal; font-size: 14px; letter-spacing: .08em;
  color: oklch(0.82 0.02 86 / 0.7);
}
.ll-show__lux-top { display: flex; flex-direction: column; align-items: flex-end; }
.ll-show__meter {
  position: relative; width: 2px; height: clamp(120px, 22vh, 230px); margin: 18px 7px 0;
  background: oklch(0.82 0.02 86 / 0.18); border-radius: 2px;
}
.ll-show__meter .fill {
  position: absolute; left: 0; right: 0; bottom: 0; height: 0%;
  background: linear-gradient(to top, var(--gold), var(--amber)); border-radius: 2px;
  box-shadow: 0 0 12px oklch(0.82 0.13 78 / 0.6);
}
.ll-show__meter .tick {
  position: absolute; right: 10px; transform: translateY(50%);
  font-family: var(--mono); font-size: 9px; letter-spacing: .1em;
  color: oklch(0.82 0.02 86 / 0.45); white-space: nowrap;
}
.ll-show__lux-foot { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; margin-top: 16px; }
.ll-show__lux-foot .cap {
  font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold-bright);
}
.ll-show__dots { display: flex; gap: 6px; }
.ll-show__dots b {
  width: 5px; height: 5px; border-radius: 50%; background: oklch(0.82 0.02 86 / 0.3);
  transition: background var(--dur-normal) var(--ease-standard), transform var(--dur-normal);
}
.ll-show__dots b.on { background: var(--gold-bright); transform: scale(1.25); }

/* scroll hint on first showcase */
.ll-show__hint {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 4;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase;
  color: oklch(0.86 0.02 86 / 0.6); display: flex; flex-direction: column; align-items: center; gap: 7px;
  transition: opacity var(--dur-normal);
}
.ll-show__hint i { width: 15px; height: 15px; animation: ll-bob 1.8s var(--ease-standard) infinite; }
@keyframes ll-bob { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(4px);} }
@media (prefers-reduced-motion: reduce) { .ll-show__hint i { animation: none; } }

@media (max-width: 820px) {
  .ll-show__sticky { height: 100svh; }
  .ll-show__grid { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; }
  .ll-show__index { display: none; }
  .ll-show__lux { grid-column: 1; grid-row: 1; flex-direction: row; justify-items: start;
    align-self: start; text-align: left; padding-left: 0; grid-template-rows: none; }
  .ll-show__meter { display: none; }
  .ll-show__lux { display: flex; justify-content: space-between; width: 100%; align-items: flex-start; }
  .ll-show__lux-foot { align-items: flex-end; }
}

/* ============================================================
   Why Lux Light band (navy)
   ============================================================ */
.ll-why { background: var(--navy-900) url('../assets/why-luxlight-bg.jpg') center center / cover no-repeat; color: var(--text-on-inverse); position: relative; overflow: hidden; }
.ll-why::before {
  content: ""; position: absolute; inset: 0;
  background: oklch(0.10 0.04 265 / 0.45);
  pointer-events: none;
}
/* cursor-following glow — lives in the section background, behind the opaque cards */
.ll-why__glow {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0; transition: opacity .3s var(--ease-standard);
  background: radial-gradient(240px circle at var(--gx, 50%) var(--gy, 50%),
    oklch(0.82 0.14 78 / 0.20), oklch(0.82 0.14 78 / 0.07) 45%, transparent 72%);
}
.ll-why .ll-wrap { position: relative; z-index: 1; }
.ll-why .ll-display { color: var(--alabaster); }
/* Eyebrows read their colour from --accent-text (set inline by the DS component).
   The base value (gold-ink) is tuned for the light alabaster surface; re-scope it
   to the bright gold on dark bands so the kicker stays legible. */
.ll-why, .ll-ab__cta { --accent-text: var(--gold-bright); }
.ll-why .ll-h2--mixed em { color: var(--gold-bright); text-shadow: 0 0 30px oklch(0.82 0.16 75 / 0.5), 0 0 10px oklch(0.86 0.14 80 / 0.36); }
.ll-why .ll-lead { color: oklch(0.84 0.012 86 / 0.85); }
.ll-pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 48px; }
.ll-pillar.lx-card {
  background: oklch(0.2 0.035 265);
  border: 1px solid var(--navy-700);
  position: relative; overflow: hidden;
  border-radius: var(--radius-md);
  padding: 26px 24px 28px;
  display: flex; flex-direction: column;
}
.ll-pillar__n { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; color: var(--gold-bright); }
.ll-pillar__glow {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit;
  opacity: 0; transition: opacity .3s var(--ease-standard);
  background: radial-gradient(280px circle at var(--gx,50%) var(--gy,30%), oklch(0.82 0.15 78 / 0.45), transparent 70%);
}
.ll-pillar__glow { display: none; }
.ll-pillar.lx-card {
  transition: transform 200ms var(--ease-standard), box-shadow 260ms var(--ease-standard), border-color 260ms var(--ease-standard) !important;
}
.ll-pillar.lx-card:hover {
  border-color: oklch(0.82 0.15 78 / 0.5) !important;
  box-shadow: 0 0 0 1px oklch(0.82 0.15 78 / 0.25), 0 8px 40px 4px oklch(0.82 0.15 78 / 0.28), 0 2px 12px oklch(0.82 0.15 78 / 0.18) !important;
  transform: translateY(-4px);
}
.ll-pillar.lx-card > *:not(.ll-pillar__glow) { position: relative; z-index: 1; }
.ll-pillar__rule { height: 1px; background: var(--gold-deep); margin: 16px 0; transform-origin: left; }
.ll-pillar h3 { font-family: var(--sans); font-weight: 600; font-size: 17px; color: var(--alabaster); margin: 0 0 9px; }
.ll-pillar p { font-family: var(--sans); font-size: 14px; line-height: 1.55; color: oklch(0.82 0.012 86 / 0.8); margin: 0; }

/* proof line */
.ll-proof {
  margin-top: 56px; padding-top: 30px; border-top: 1px solid var(--navy-700);
  display: flex; gap: 16px; align-items: flex-start; max-width: 80ch;
}
.ll-proof i { width: 20px; height: 20px; color: var(--gold-bright); flex: none; margin-top: 3px; }
.ll-proof p { font-family: var(--serif); font-style: normal; font-size: clamp(18px,2vw,24px); line-height: 1.4; color: var(--alabaster); margin: 0; font-weight: 300; }

@media (max-width: 820px) { .ll-pillars { grid-template-columns: 1fr 1fr; gap: 28px; } }
@media (max-width: 520px) { .ll-pillars { grid-template-columns: 1fr; } }

/* ============================================================
   Enquiry band
   ============================================================ */
.ll-enq { background: var(--alabaster-warm); border-top: 1px solid var(--border); }
.ll-enq__in {
  max-width: var(--ll-maxw); margin: 0 auto; padding: calc(clamp(48px,6vw,84px) * var(--pad-scale)) var(--page-margin);
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 60px;
}
.ll-enq__img { flex-shrink: 0; width: clamp(320px, 36vw, 520px); }
.ll-enq__img img { width: 100%; height: auto; display: block; opacity: 0.92; }
.ll-enq h2 { margin-top: 14px; }
.ll-enq__contact { display: flex; gap: 26px; flex-wrap: wrap; margin-top: 22px; }
.ll-enq__contact a { display: inline-flex; align-items: center; gap: 9px; font-size: 14.5px; color: var(--navy-700); text-decoration: none; }
.ll-enq__contact a:hover { color: var(--gold-deep); }
.ll-enq__contact i { width: 16px; height: 16px; color: var(--gold-deep); }
.ll-enq__loc { display: inline-flex; align-items: center; gap: 9px; font-size: 14.5px; color: var(--navy-700); }
.ll-enq__loc i { width: 16px; height: 16px; color: var(--gold-deep); }
.ll-enq__cta { margin-top: 32px; }

/* ============================================================
   Footer
   ============================================================ */
.ll-ftr { background: var(--navy-950); color: var(--text-on-inverse); }
.ll-ftr__in {
  max-width: var(--ll-maxw); margin: 0 auto; padding: 72px var(--page-margin) 44px;
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.1fr; gap: 40px;
}
.ll-ftr__logo img { height: 46px; width: auto; }
.ll-ftr__tag { font-family: var(--serif); font-weight: 300; font-size: 25px; line-height: 1.2; color: var(--alabaster); max-width: 20ch; margin: 22px 0 0; }
.ll-ftr__col h4 { font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-bright); margin: 0 0 16px; font-weight: 500; }
.ll-ftr__col a, .ll-ftr__col p { display: block; font-family: var(--sans); font-size: 14px; color: oklch(0.82 0.012 86 / 0.8); text-decoration: none; margin-bottom: 11px; line-height: 1.5; }
.ll-ftr__col a { transition: color var(--dur-fast); }
.ll-ftr__col a:hover { color: var(--alabaster); }
.ll-ftr__bar { border-top: 1px solid var(--navy-700); }
.ll-ftr__bar-in {
  max-width: var(--ll-maxw); margin: 0 auto; padding: 20px var(--page-margin);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: oklch(0.7 0.012 86 / 0.8);
}
@media (max-width: 820px) { .ll-ftr__in { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .ll-ftr__in { grid-template-columns: 1fr; gap: 28px; } }

/* ============================================================
   Products page
   ============================================================ */
.ll-prod { max-width: var(--ll-maxw); margin: 0 auto; padding: clamp(40px,5vw,72px) var(--page-margin) 100px; }
.ll-prod__head { max-width: 64ch; }
.ll-prod__head .ll-display { margin-top: 14px; }
.ll-prod__head a { color: var(--navy-700); font-weight: 600; text-decoration: none; cursor: pointer; }
.ll-prod__head a:hover { color: var(--gold-deep); }
.ll-filters { display: flex; gap: 9px; flex-wrap: wrap; padding: 26px 0 28px; border-bottom: 1px solid var(--border); margin-bottom: 30px; position: sticky; top: 71px; background: var(--bg-base); z-index: 20; }
/* The select is only the mobile collapsed-filter affordance; the desktop filter is the pills.
   Hide it at all widths by default (the ≤820 rules below reveal it when .ll-filters is compact). */
.ll-fsel { display: none; }
.ll-prodgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.ll-count { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 22px; }
@media (max-width: 900px) { .ll-prodgrid { grid-template-columns: 1fr 1fr; } .ll-filters { top: 67px; } }
@media (max-width: 560px) { .ll-prodgrid { grid-template-columns: 1fr; } }

/* ============================================================
   About page
   ============================================================ */
.ll-ab { max-width: var(--ll-maxw); margin: 0 auto; padding-inline: var(--page-margin); }
.ll-ab__hero { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; padding: clamp(40px,5vw,80px) 0 clamp(48px,6vw,88px); border-bottom: 1px solid var(--border); }
.ll-ab__hero .ll-display { margin-top: 16px; }
.ll-ab__img-col { display: flex; flex-direction: column; gap: 20px; }
.ll-ab__img-caption { font-size: 14px; line-height: 1.65; color: var(--text-muted); }
.ll-ab__img-inner {
  width: 100%; height: 100%; min-height: 500px;
  background: repeating-linear-gradient(-45deg, oklch(0.93 0.008 86) 0px, oklch(0.93 0.008 86) 12px, oklch(0.88 0.012 86) 12px, oklch(0.88 0.012 86) 24px);
  display: flex; align-items: center; justify-content: center;
}
.ll-ab__img-label {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-muted); background: oklch(0.97 0.006 86 / 0.92);
  padding: 8px 16px; border-radius: var(--radius-sm);
}
.ll-ab__story p { font-family: var(--sans); font-size: 16px; line-height: 1.7; color: var(--text-body); margin: 0 0 16px; }
.ll-ab__story p:first-child { font-size: 18px; color: var(--text-heading); }
.ll-ab__stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; padding: clamp(40px,5vw,72px) 0; border-bottom: 1px solid var(--border); }
.ll-stat .v { font-family: var(--serif); font-weight: 300; font-size: clamp(40px,5vw,68px); color: var(--text-display); line-height: 1; }
.ll-stat .k { font-family: var(--sans); font-size: 14.5px; color: var(--text-muted); margin-top: 10px; }
.ll-principles { display: grid; grid-template-columns: repeat(3,1fr); gap: 38px 40px; }
.ll-principle.lx-card {
  position: relative; padding: 30px 28px; display: flex; flex-direction: column;
  background: var(--navy-950); border: 1px solid var(--navy-700);
  border-radius: var(--radius-md); overflow: hidden;
  transition: transform 200ms var(--ease-standard), box-shadow 260ms var(--ease-standard), border-color 260ms var(--ease-standard);
}
.ll-principle.lx-card:hover {
  border-color: oklch(0.82 0.15 78 / 0.5);
  box-shadow: 0 0 0 1px oklch(0.82 0.15 78 / 0.25), 0 8px 40px 4px oklch(0.82 0.15 78 / 0.28), 0 2px 12px oklch(0.82 0.15 78 / 0.18);
  transform: translateY(-4px);
}
.ll-principle__glow {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit;
  opacity: 0; transition: opacity .3s var(--ease-standard);
  background: radial-gradient(280px circle at var(--gx,50%) var(--gy,30%), oklch(0.82 0.15 78 / 0.45), transparent 70%);
}
.ll-principle.lx-card:hover .ll-principle__glow { opacity: 1; }
.ll-principle.lx-card > *:not(.ll-principle__glow) { position: relative; z-index: 1; }
.ll-principle__n { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; color: var(--gold-bright); }
.ll-principle__rule { height: 1px; background: var(--gold-deep); margin: 14px 0; }
.ll-principle h3 { font-family: var(--sans); font-weight: 600; font-size: 17px; color: var(--alabaster); margin: 0 0 8px; }
.ll-principle p { font-family: var(--sans); font-size: 14.5px; line-height: 1.6; color: oklch(0.82 0.012 86 / 0.8); margin: 0; }
.ll-ab__cta { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; background: var(--navy-900); border-radius: var(--radius-lg); padding: clamp(36px,4vw,56px) clamp(36px,4vw,56px); margin-bottom: clamp(48px,6vw,88px); position: relative; overflow: hidden; }
.ll-ab__cta::before { content: ""; position: absolute; right: -5%; top: -40%; width: 50%; height: 160%; background: radial-gradient(closest-side, oklch(0.82 0.12 78 / 0.18), transparent 70%); }
.ll-ab__cta > * { position: relative; }
.ll-ab__cta h2 { font-family: var(--serif); font-weight: 300; font-size: clamp(28px,3.4vw,44px); color: var(--alabaster); margin: 10px 0 0; line-height: 1.08; }
.ll-ab__cta p { font-family: var(--sans); font-size: 15px; color: oklch(0.82 0.012 86 / 0.85); margin: 14px 0 0; max-width: 42ch; line-height: 1.55; }
@media (max-width: 860px) { .ll-ab__hero { grid-template-columns: 1fr; gap: 28px; } .ll-principles { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ll-principles, .ll-ab__stats { grid-template-columns: 1fr; } }

/* ============================================================
   Contact page
   ============================================================ */
.ll-ct { max-width: var(--ll-maxw); margin: 0 auto; padding: clamp(40px,5vw,72px) var(--page-margin) 100px; }
.ll-ct__grid { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 56px; align-items: start; }
.ll-ct__head .ll-display { margin-top: 14px; }
.ll-ct__head p { font-family: var(--sans); font-size: 17px; color: var(--text-muted); margin: 16px 0 36px; line-height: 1.55; max-width: 50ch; }
.ll-form { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ll-form .span { grid-column: 1 / -1; }
.ll-form__actions { grid-column: 1/-1; display: flex; align-items: center; gap: 18px; margin-top: 6px; flex-wrap: wrap; }
.ll-form__note { font-family: var(--sans); font-size: 13px; color: var(--text-faint); }

/* Requirement-document upload — native file input themed to match the form + buttons */
.ll-file-field input[type="file"] {
  font-family: var(--sans); font-size: 14px; color: var(--text-muted);
  background: var(--paper); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); padding: 9px 12px; width: 100%; cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.ll-file-field input[type="file"]:hover { border-color: var(--navy-500); }
.ll-file-field input[type="file"]:focus-visible { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px oklch(0.86 0.11 78 / 0.22); }
.ll-file-field input[type="file"]::file-selector-button {
  font-family: var(--sans); font-weight: 600; font-size: 14px; letter-spacing: .005em; text-transform: none;
  color: var(--alabaster); background: var(--navy-800); border: 1px solid var(--navy-700);
  border-radius: var(--radius-sm); padding: 10px 18px; margin: -1px 16px -1px -2px; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.ll-file-field input[type="file"]::file-selector-button:hover {
  background: var(--gold-bright); color: var(--navy-800); border-color: var(--gold-bright);
  box-shadow: 0 0 20px 4px oklch(0.82 0.16 78 / 0.4);
}
.ll-aside { background: var(--navy-900); border-radius: var(--radius-lg); padding: 34px; color: var(--text-on-inverse); position: relative; overflow: hidden; }
.ll-aside::before { content:""; position:absolute; right:-20%; top:-20%; width:70%; height:60%; background: radial-gradient(closest-side, oklch(0.82 0.12 78 / 0.16), transparent 70%); }
.ll-aside > * { position: relative; }
.ll-aside h3 { font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-bright); margin: 0 0 24px; font-weight: 500; }
.ll-aside__row { display: flex; gap: 14px; margin-bottom: 22px; align-items: flex-start; }
.ll-aside__row i { width: 18px; height: 18px; color: var(--gold); margin-top: 2px; flex: none; }
.ll-aside__row .k { font-family: var(--sans); font-size: 12px; color: oklch(0.72 0.012 86 / 0.9); letter-spacing: .02em; }
.ll-aside__row .v { font-family: var(--sans); font-size: 15px; color: var(--alabaster); margin-top: 3px; line-height: 1.4; }
.ll-aside__wa { display: flex; align-items: center; gap: 10px; margin-top: 6px; padding-top: 24px; border-top: 1px solid var(--navy-600); font-family: var(--sans); font-size: 14px; color: var(--alabaster); cursor: pointer; text-decoration: none; }
.ll-aside__wa i { width: 18px; height: 18px; color: #4ad27e; }
.ll-success { max-width: 580px; margin: 40px auto; text-align: center; padding: 52px 40px; background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.ll-success__ring { width: 66px; height: 66px; border-radius: 50%; margin: 0 auto 24px; display: flex; align-items: center; justify-content: center; background: var(--gold-soft); box-shadow: var(--glow-amber-sm); }
.ll-success__ring i { width: 30px; height: 30px; color: var(--gold-deep); }
.ll-success h2 { font-family: var(--serif); font-weight: 300; font-size: 38px; color: var(--text-display); margin: 0 0 14px; line-height: 1.1; }
.ll-success p { font-family: var(--sans); font-size: 16px; color: var(--text-muted); line-height: 1.6; margin: 0 auto 28px; max-width: 44ch; }
@media (max-width: 860px) { .ll-ct__grid { grid-template-columns: 1fr; gap: 36px; } }
@media (max-width: 560px) { .ll-form { grid-template-columns: 1fr; } }

/* ============================================================
   Card amber-glow hover  (applies to ALL interactive cards)
   ============================================================ */
.lx-card--interactive { transition: box-shadow var(--dur-slow) var(--ease-standard),
    transform var(--dur-normal) var(--ease-standard), border-color var(--dur-slow) var(--ease-standard); }
.lx-card--interactive:hover {
  transform: translateY(-3px);
  border-color: oklch(0.86 0.11 78 / 0.42);
  box-shadow: 0 0 0 1px oklch(0.86 0.11 78 / 0.26),
              0 10px 30px oklch(0.82 0.13 78 / 0.20),
              0 22px 50px oklch(0.82 0.13 78 / 0.12);
}

/* All buttons — navy at rest, light up gold on hover (the brand's button identity) */
.lx-btn {
  background: var(--navy-800) !important;
  color: var(--alabaster) !important;
  border-color: var(--navy-700) !important;
  transition: background 280ms var(--ease-standard), color 280ms var(--ease-standard), border-color 280ms var(--ease-standard), transform 200ms var(--ease-standard), box-shadow 280ms var(--ease-standard) !important;
}
.lx-btn:hover {
  background: var(--gold-bright) !important;
  color: var(--navy-800) !important;
  border-color: var(--gold-bright) !important;
  box-shadow: 0 0 28px 8px oklch(0.82 0.16 78 / 0.45) !important;
}
/* Secondary buttons keep DS ghost style */
.lx-btn--secondary {
  background: transparent !important;
  color: var(--navy-800) !important;
  border-color: var(--navy-800) !important;
}
.lx-btn--secondary:hover {
  background: var(--gold-bright) !important;
  color: var(--navy-800) !important;
  border-color: var(--gold-bright) !important;
}

/* No glow on product card image section */
.lx-product__media { pointer-events: none; }
.lx-product:hover .lx-product__media::after { opacity: 0 !important; }
.lx-btn--primary:hover { transform: translateY(-2px); }
.lx-btn--primary:active { transform: translateY(1px); }
.lx-btn--secondary:hover { transform: translateY(-2px); }
.lx-btn:hover i[data-lucide="arrow-right"] { transform: translateX(3px); }
.lx-btn i[data-lucide="arrow-right"] { transition: transform 200ms var(--ease-standard); }

/* ============================================================
   Accent emphasis  (Tweaks)
   gold  = restrained (default)   ·   amber = warmer, more glow
   ============================================================ */
[data-accent="amber"] .lx-btn--primary { box-shadow: var(--glow-amber-sm); }
[data-accent="amber"] .lx-btn--primary:hover { box-shadow: var(--glow-amber); }
[data-accent="amber"] .lx-card--interactive:hover {
  box-shadow: 0 0 0 1px oklch(0.86 0.13 78 / 0.45),
              0 12px 36px oklch(0.82 0.15 78 / 0.34),
              0 26px 60px oklch(0.82 0.15 78 / 0.18);
}
[data-accent="amber"] .ll-show__meter .fill { box-shadow: 0 0 20px oklch(0.82 0.15 78 / 0.8); }

/* ============================================================
   Mobile responsive overrides
   Override inline JSX px values and tighten layouts for small screens
   ============================================================ */

/* ── Tablet (≤820px) ── */
@media (max-width: 820px) {
  /* Custom desktop cursor halo/dot/ring can overflow on narrow widths — hide them */
  .cur, .cur-r, .cursor-glow { display: none !important; }

  /* Hero: collapse inline font sizes */
  .ll-hero__title-lead { font-size: clamp(32px,5vw,46px) !important; }
  .ll-hero__title-em   { font-size: clamp(40px,7vw,54px) !important; }
  .ll-hero__sub        { width: 100% !important; }

  /* Showcase title */
  .ll-show__title { font-size: clamp(34px,5vw,52px) !important; width: 100% !important; }

  /* Products / About / Contact headings */
  .ll-prod__head h1,
  .ll-ab__hero h1,
  .ll-ct__head h1 { font-size: clamp(34px,5vw,48px) !important; width: 100% !important; white-space: normal !important; }

  /* Hero: drop the secondary paragraph + secondary button on mobile */
  .ll-hero__left { height: auto !important; }
  .ll-hero__right { display: none; }
  .ll-hero__cta .lx-btn--secondary { display: none; }

  /* Hero (mobile): centre the banner copy and lift it clear of the imagery */
  .ll-hero__inner { text-align: center; align-content: start; padding-top: 54px; padding-bottom: 40px; }
  .ll-hero__eyebrow { display: flex; justify-content: center; margin-bottom: 16px; }
  .ll-hero__title { align-items: center; }
  /* fixed inline heights (45px + 100px) left from desktop edits hold the button down — release them */
  .ll-hero__title-lead, .ll-hero__title-em { height: auto !important; }
  .ll-hero__cta { justify-content: center; margin-top: 12px !important; }

  /* Hero (mobile): supporting line under the heading */
  .ll-hero__sub-m {
    display: block; font-family: var(--sans);
    font-size: 16px; line-height: 1.6; color: var(--text-muted);
    max-width: 34ch; margin: 14px auto 2px;
  }

  /* Product range: bleed the rack image to the screen edges (bigger, still centred) */
  .ll-range-img {
    width: calc(100% + (var(--page-margin) * 2)); max-width: none; max-height: none;
    margin-left: calc(var(--page-margin) * -1);
    margin-right: calc(var(--page-margin) * -1);
  }
  .ll-secintro { flex-direction: column; gap: 20px; height: auto !important; }
  .ll-secintro__left, .ll-secintro__right { max-width: 100%; }

  /* Enquiry section: collapse grid to one column, kill fixed 555px widths */
  .ll-enq__in { grid-template-columns: 1fr; gap: 32px; }
  .ll-enq h2 { width: 100% !important; }
  .ll-enq__contact { flex-direction: column; gap: 12px; }
  .ll-enq__img { width: 100%; max-width: 340px; }

  /* Why section heading: allow wrap */
  .ll-why h2 { white-space: normal !important; }

  /* About — story image: keep its natural 1:1, never stretch */
  .ll-ab__img-col img { width: 100% !important; height: auto !important; }

  /* About — principles heading: allow wrap (kills nowrap overflow) */
  .ll-ab .ll-sechead h2 { white-space: normal !important; }

  /* About — "Work with us" CTA: drop the fixed banner ratio so the copy fits.
     cta-bg.jpg holds its blueprint artwork in the right 25% and is flat navy elsewhere.
     Once the ratio goes portrait, a centred cover-crop lands entirely in that flat area
     and the panel reads as a plain block, so anchor the crop to the artwork instead.
     Inline styles set the position, hence !important. */
  .ll-ab__cta { aspect-ratio: auto !important; min-height: 300px; padding: 32px 24px !important;
    background-position: right center !important; }
  .ll-ab__cta > div:not(.ll-ab__cta__glow) { padding: 0 !important; max-width: 100%; }
  .ll-ab__cta h2 { white-space: normal !important; }
  .ll-ab__cta p { width: auto !important; max-width: 100% !important; margin: 14px 0 0 !important; }

  /* Scroll-collapse category filter → compact dropdown (matches the form selects) */
  .ll-fsel {
    display: none; width: 100%;
    font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
    color: var(--navy-700); background: var(--paper);
    border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
    padding: 12px 40px 12px 14px; cursor: pointer;
    -webkit-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%232c456b' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center;
    transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
  }
  .ll-fsel:hover { border-color: var(--navy-500); }
  .ll-fsel:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px oklch(0.86 0.11 78 / 0.22); }
  .ll-filters.compact { padding: 10px 0; gap: 0; }
  .ll-filters.compact .lx-tag { display: none; }
  .ll-filters.compact .ll-fsel { display: block; }
}

/* ── Mobile (≤520px) ── */
@media (max-width: 520px) {
  /* Hero copy */
  .ll-hero__title-lead { font-size: 30px !important; }
  .ll-hero__title-em   { font-size: 36px !important; }
  .ll-hero__cta        { flex-direction: column; }
  .ll-hero__cta .lx-btn { width: 100%; justify-content: center; }

  /* Trust strip: 2 per row, centred as a block on phones */
  .ll-trust { gap: 10px 24px; justify-content: center; }
  .ll-trust__item { font-size: 12.5px; }

  /* Showcase */
  .ll-show__title  { font-size: 28px !important; }
  .ll-show__desc   { font-size: 13px; }
  .ll-show__kicker { font-size: 10px; }

  /* Products / About / Contact headings */
  .ll-prod__head h1,
  .ll-ab__hero h1,
  .ll-ct__head h1 { font-size: 30px !important; }

  /* About img placeholder */
  .ll-ab__img-inner { min-height: 240px; }

  /* Enquiry heading */
  .ll-enq h2 { font-size: clamp(26px,6vw,36px) !important; }

  /* CTA band */
  .ll-ab__cta { flex-direction: column; gap: 24px; }

  /* Contact form span class */
  .ll-form .span { grid-column: 1; }
}

/* ============================================================
   Touch targets (WCAG 2.5.8)
   Keyed to pointer type, not viewport width: a 1024px tablet needs 44px
   targets and an 800px-wide laptop window does not.
   ============================================================ */
@media (pointer: coarse) {
  /* Category filter pills render at 29px from their 8px block padding */
  .lx-tag { min-height: 44px; padding-block: 0; display: inline-flex; align-items: center; }

  /* Each card's primary conversion action is a 17px-tall text button */
  .lx-product__cta { min-height: 44px; }

  /* Standalone inline link under the catalogue intro */
  .ll-prod__head a { display: inline-block; padding-block: 11px; }

  /* Footer link lists sit at a 21px line box; trade the margin for tappable padding */
  .ll-ftr__col a { padding-block: 12px; margin-bottom: 0; }
}