/* ==========================================================================
   LUMINA — Digital Agency & Personal Portfolio HTML Template
   Design system + components. Authored for Bootstrap 5.3.
   --------------------------------------------------------------------------
   00. Tokens
   01. Reset & base
   02. Typography
   03. Layout helpers
   04. Buttons & links
   05. Chrome (cursor, grain, progress, preloader)
   06. Navbar
   07. Hero
   08. Section furniture
   09. Cards (service, work, post, member, price)
   10. Marquee
   11. Stats & counters
   12. Testimonials
   13. Accordion & tabs
   14. Forms
   15. Footer
   16. Utility pages (404, coming soon)
   17. Reveal animations
   18. Responsive
   ========================================================================== */

/* ==========================================================================
   00. Tokens
   ========================================================================== */

:root {
  /* Brand */
  --lu-accent: #ff4d2e;
  /* #ff4d2e is the brand colour and stays that for lines, dots and glows. It is
     too light to carry white text at 4.5:1, and too light to read as text on a
     light surface, so each of those gets the shade that clears AA on it:
     white on #e11d00 is 4.80:1, and #d51800 reads 5.30:1 on white, 5.04:1 on
     the light background and 4.65:1 on the sunken one. */
  --lu-accent-ink: #ff4d2e;
  --lu-accent-fill: #e11d00;
  --lu-accent-soft: rgba(255, 77, 46, 0.12);
  --lu-accent-line: rgba(255, 77, 46, 0.32);

  /* Dark palette (default) */
  --lu-bg: #0a0a0c;
  --lu-bg-elev: #121216;
  --lu-bg-sunken: #060607;
  --lu-text: #f4f4f1;
  --lu-text-muted: #8f8f99;
  --lu-text-faint: #7d7d88;
  --lu-line: rgba(244, 244, 241, 0.1);
  --lu-line-strong: rgba(244, 244, 241, 0.2);

  /* Typography */
  --lu-font-display: "Syne", "Inter", system-ui, sans-serif;
  --lu-font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --lu-font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  --lu-fs-display: clamp(2.2rem, 6.2vw, 5.75rem);
  --lu-fs-h1: clamp(2.25rem, 4.6vw, 4rem);
  --lu-fs-h2: clamp(1.9rem, 3.6vw, 3.1rem);
  --lu-fs-h3: clamp(1.5rem, 2.6vw, 2.25rem);
  --lu-fs-h4: clamp(1.2rem, 1.8vw, 1.5rem);
  --lu-fs-lead: clamp(1.05rem, 1.4vw, 1.3rem);
  --lu-fs-label: 0.75rem;

  /* Space */
  --lu-section: clamp(4.5rem, 10vw, 9rem);
  --lu-gap: clamp(2.5rem, 5vw, 4rem);
  --lu-gutter: clamp(1.5rem, 4vw, 3rem);
  --lu-radius: 18px;
  --lu-radius-sm: 10px;
  --lu-radius-lg: 28px;

  /* Motion */
  --lu-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --lu-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --lu-dur: 0.6s;

  /* Bootstrap bridge */
  --bs-body-bg: var(--lu-bg);
  --bs-body-color: var(--lu-text);
  --bs-border-color: var(--lu-line);
  --bs-primary: var(--lu-accent);
  --bs-link-color: var(--lu-text);
  --bs-link-hover-color: var(--lu-accent-ink);
}

[data-theme="light"] {
  --lu-accent-ink: #d51800;
  --lu-bg: #faf9f6;
  --lu-bg-elev: #ffffff;
  --lu-bg-sunken: #f1f0ec;
  --lu-text: #0d0d10;
  --lu-text-muted: #5f5f6a;
  --lu-text-faint: #66666f;
  --lu-line: rgba(13, 13, 16, 0.1);
  --lu-line-strong: rgba(13, 13, 16, 0.22);
  --lu-accent-soft: rgba(255, 77, 46, 0.1);
}

/* ==========================================================================
   01. Reset & base
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

body {
  margin: 0;
  background-color: var(--lu-bg);
  color: var(--lu-text);
  font-family: var(--lu-font-body);
  font-size: 1rem;
  line-height: 1.65;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  transition: background-color 0.4s var(--lu-ease), color 0.4s var(--lu-ease);
}

img,
svg,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s var(--lu-ease), opacity 0.3s var(--lu-ease);
}

::selection {
  background: var(--lu-accent-fill);
  color: #fff;
}

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

/* Visually hidden, still read by assistive tech */
.lu-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link — keyboard users land here first */
.lu-skip {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 2000;
  padding: 0.75rem 1.25rem;
  background: var(--lu-accent-fill);
  color: #fff;
  border-radius: var(--lu-radius-sm);
  font-weight: 600;
}

.lu-skip:focus {
  top: 1rem;
}

/* ==========================================================================
   02. Typography
   ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6,
.lu-display {
  font-family: var(--lu-font-display);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

.lu-display {
  font-size: var(--lu-fs-display);
  font-weight: 800;
  letter-spacing: -0.045em;
}

h1,
.lu-h1 {
  font-size: var(--lu-fs-h1);
}

h2,
.lu-h2 {
  font-size: var(--lu-fs-h2);
}

h3,
.lu-h3 {
  font-size: var(--lu-fs-h3);
  line-height: 1.15;
}

h4,
.lu-h4 {
  font-size: var(--lu-fs-h4);
  line-height: 1.25;
}

p {
  margin: 0 0 1.25rem;
  text-wrap: pretty;
}

p:last-child {
  margin-bottom: 0;
}

.lu-lead {
  font-size: var(--lu-fs-lead);
  line-height: 1.6;
  color: var(--lu-text-muted);
}

.lu-muted {
  color: var(--lu-text-muted);
}

.lu-accent {
  color: var(--lu-accent-ink);
}

/* Small uppercase eyebrow used above every section heading */
.lu-label {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--lu-font-mono);
  font-size: var(--lu-fs-label);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lu-text-muted);
  margin-bottom: 1.25rem;
}

.lu-label::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--lu-accent);
}

.lu-label--center::before {
  display: none;
}

/* Outlined display text, used for oversized decorative headings */
.lu-outline {
  color: transparent;
  -webkit-text-stroke: 1px var(--lu-line-strong);
}

/* Animated underline on inline links */
.lu-ulink {
  position: relative;
  display: inline-block;
  padding-block: 0.25rem;
}

.lu-ulink::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.45s var(--lu-ease);
}

.lu-ulink:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* ==========================================================================
   03. Layout helpers
   ========================================================================== */

.lu-section {
  padding-block: var(--lu-section);
  position: relative;
}

.lu-section--tight {
  padding-block: calc(var(--lu-section) * 0.6);
}

/* Numbers/stats strip: hugs the section above, but keeps a visible gap below
   (on the page background) before the next section's own padding begins. */
.lu-section.lu-section--band {
  padding-block: 0 calc(var(--lu-section) * 0.6);
}

.lu-section:has(+ .lu-section--band) {
  padding-bottom: var(--lu-gap);
}

/* A banner is not a .lu-section, so the rule above cannot reserve the gap for it.
   After a banner the band supplies its own, or the card sits on the border. */
.lu-banner + .lu-section--band {
  padding-top: var(--lu-gap);
}

.lu-section--sunken {
  background: var(--lu-bg-sunken);
}

.lu-section--elev {
  background: var(--lu-bg-elev);
}

.container,
.container-fluid,
.container-lg,
.container-xl {
  padding-inline: var(--lu-gutter);
}

@media (min-width: 1400px) {
  .container {
    max-width: 1280px;
  }
}

.lu-divider {
  height: 1px;
  background: var(--lu-line);
  border: 0;
  margin: 0;
  opacity: 1;
}

/* Two-column heading block: title left, supporting copy right */
.lu-sec-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem 3rem;
  align-items: end;
  margin-bottom: var(--lu-gap);
}

@media (min-width: 992px) {
  .lu-sec-head--split {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  }
}

.lu-sec-head h2 {
  margin-bottom: 0;
}

/* ==========================================================================
   04. Buttons & links
   ========================================================================== */

.lu-btn {
  --btn-bg: var(--lu-text);
  --btn-fg: var(--lu-bg);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1rem 1.75rem;
  border: 1px solid transparent;
  border-radius: 100px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--lu-font-body);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.4s var(--lu-ease), border-color 0.4s var(--lu-ease),
    transform 0.4s var(--lu-ease);
}

/* Fill sweeps up from the bottom on hover */
.lu-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--lu-accent);
  transform: translateY(101%);
  transition: transform 0.5s var(--lu-ease);
}

.lu-btn:hover::before,
.lu-btn:focus-visible::before {
  transform: translateY(0);
}

.lu-btn:hover,
.lu-btn:focus-visible {
  color: #fff;
}

.lu-btn:active {
  transform: scale(0.97);
}

.lu-btn--accent {
  --btn-bg: var(--lu-accent-fill);
  --btn-fg: #fff;
}

.lu-btn--accent::before {
  background: var(--lu-text);
}

.lu-btn--accent:hover,
.lu-btn--accent:focus-visible {
  color: var(--lu-bg);
}

.lu-btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--lu-text);
  border-color: var(--lu-line-strong);
}

.lu-btn--ghost:hover,
.lu-btn--ghost:focus-visible {
  border-color: var(--lu-accent-ink);
}

.lu-btn--lg {
  padding: 1.2rem 2.25rem;
  font-size: 1rem;
}

.lu-btn--sm {
  padding: 0.7rem 1.25rem;
  font-size: 0.8rem;
}

.lu-btn__icon {
  width: 16px;
  height: 16px;
  transition: transform 0.4s var(--lu-ease);
}

.lu-btn:hover .lu-btn__icon {
  transform: translateX(3px);
}

/* Circular arrow button, used on cards */
.lu-circ {
  width: 48px;
  height: 48px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--lu-line-strong);
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  background: transparent;
  color: var(--lu-text);
  cursor: pointer;
  transition: background 0.4s var(--lu-ease), color 0.4s var(--lu-ease),
    border-color 0.4s var(--lu-ease), transform 0.4s var(--lu-ease);
}

.lu-circ svg {
  width: 18px;
  height: 18px;
}

.lu-circ:hover {
  background: var(--lu-accent-fill);
  border-color: var(--lu-accent-ink);
  color: #fff;
  transform: rotate(45deg);
}

/* ==========================================================================
   05. Chrome — cursor, grain, scroll progress, preloader
   ========================================================================== */

/* Film-grain overlay gives the flat dark surfaces some texture */
.lu-grain {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

.lu-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: var(--lu-accent);
  z-index: 1080;
  pointer-events: none;
}

/* Custom cursor — pointer devices only, see media query at the bottom */
.lu-cursor,
.lu-cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 1090;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.lu-cursor {
  width: 36px;
  height: 36px;
  border: 1px solid var(--lu-line-strong);
  margin: -18px 0 0 -18px;
  transition: opacity 0.3s ease, width 0.35s var(--lu-ease),
    height 0.35s var(--lu-ease), margin 0.35s var(--lu-ease),
    background-color 0.35s var(--lu-ease), border-color 0.35s var(--lu-ease);
}

.lu-cursor-dot {
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0 -2.5px;
  background: var(--lu-accent);
}

.lu-cursor.is-active {
  width: 68px;
  height: 68px;
  margin: -34px 0 0 -34px;
  background: var(--lu-accent-soft);
  border-color: var(--lu-accent-ink);
}

.lu-preloader {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  background: var(--lu-bg);
  transition: opacity 0.6s var(--lu-ease), visibility 0.6s;
}

.lu-preloader.is-done {
  opacity: 0;
  visibility: hidden;
}

.lu-preloader__mark {
  font-family: var(--lu-font-display);
  font-size: clamp(2rem, 6vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.04em;
}

.lu-preloader__bar {
  width: min(220px, 50vw);
  height: 2px;
  margin-top: 1.25rem;
  background: var(--lu-line);
  overflow: hidden;
}

.lu-preloader__bar span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--lu-accent);
  transition: width 0.3s linear;
}

/* ==========================================================================
   06. Navbar
   ========================================================================== */

.lu-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  /* Above the drawer (1040): the burger turns into the close button, so it
     has to stay tappable while the drawer covers the screen. */
  z-index: 1045;
  padding-block: 1.5rem;
  transition: padding 0.4s var(--lu-ease), background-color 0.4s var(--lu-ease),
    border-color 0.4s var(--lu-ease), transform 0.5s var(--lu-ease);
  border-bottom: 1px solid transparent;
}

.lu-nav.is-stuck {
  padding-block: 0.9rem;
  background: color-mix(in srgb, var(--lu-bg) 82%, transparent);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: var(--lu-line);
}

/* Slide the bar away when scrolling down, bring it back on scroll up */
.lu-nav.is-hidden {
  transform: translateY(-100%);
}

.lu-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.lu-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--lu-font-display);
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  flex-shrink: 0;
}

.lu-brand__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--lu-accent);
  margin-bottom: 0.5rem;
}

.lu-menu {
  display: none;
  align-items: center;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 992px) {
  .lu-menu {
    display: flex;
  }
}

.lu-menu > li {
  position: relative;
}

.lu-menu > li > a {
  font-size: 0.9rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding-block: 0.5rem;
  color: var(--lu-text-muted);
}

.lu-menu > li > a:hover,
.lu-menu > li.is-current > a {
  color: var(--lu-text);
}

.lu-menu > li.is-current > a::after {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--lu-accent);
}

/* Dropdown */
.lu-drop {
  position: absolute;
  top: calc(100% + 0.75rem);
  left: -1rem;
  min-width: 210px;
  padding: 0.6rem;
  margin: 0;
  list-style: none;
  background: var(--lu-bg-elev);
  border: 1px solid var(--lu-line);
  border-radius: var(--lu-radius-sm);
  box-shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.6);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  /* Closing is slower than opening, and delayed, so the pointer has time to
     cross the gap between the menu item and the panel. */
  transition: opacity 0.4s var(--lu-ease) 0.25s,
    transform 0.4s var(--lu-ease) 0.25s, visibility 0.4s 0.25s;
}

.lu-menu > li:hover > .lu-drop,
.lu-menu > li:focus-within > .lu-drop {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
  transition-duration: 0.22s;
}

/* Moving along the bar hands over cleanly. Leaving it altogether still gets the
   forgiving delay above; stepping onto a sibling closes the panel you left at
   once, so two are never open together. */
.lu-menu:hover > li:not(:hover) > .lu-drop,
.lu-menu:hover > li:not(:hover) > .lu-mega,
.lu-menu:focus-within > li:not(:focus-within) > .lu-drop,
.lu-menu:focus-within > li:not(:focus-within) > .lu-mega {
  transition-delay: 0s;
  transition-duration: 0.16s;
}

/* An invisible bridge across the gap, so travelling to the panel does not
   pass over dead space */
.lu-menu > li > .lu-drop::before,
.lu-menu > li > .lu-mega::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -0.85rem;
  height: 0.85rem;
}

.lu-drop a {
  display: block;
  padding: 0.55rem 0.85rem;
  border-radius: 7px;
  font-size: 0.875rem;
  color: var(--lu-text-muted);
}

.lu-drop a:hover {
  background: var(--lu-accent-soft);
  color: var(--lu-text);
}

.lu-nav__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

.lu-nav__cta {
  white-space: nowrap;
}

/* Between 992 and 1199 the Bootstrap container is 960px wide while the header row
   wants 961: flexbox took the difference out of the menu and the button until the
   button's label wrapped onto a second line and the bar grew from 42px to 50px.
   A slightly tighter menu gives the row the pixel it was short of. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .lu-menu {
    gap: 1.5rem;
  }
}

.lu-icon-btn {
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--lu-line);
  background: transparent;
  color: var(--lu-text);
  cursor: pointer;
  transition: border-color 0.3s var(--lu-ease), background 0.3s var(--lu-ease);
}

.lu-icon-btn:hover {
  border-color: var(--lu-accent-ink);
  background: var(--lu-accent-soft);
}

.lu-icon-btn svg {
  width: 18px;
  height: 18px;
}

.lu-nav__cta {
  display: none;
}

@media (min-width: 992px) {
  .lu-nav__cta {
    display: inline-flex;
  }
}

/* Burger */
.lu-burger {
  position: relative;
  width: 42px;
  height: 42px;
  display: inline-block;
  border: 1px solid var(--lu-line);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  padding: 0;
}

@media (min-width: 992px) {
  .lu-burger {
    display: none;
  }
}

/* Every bar is pinned to the same centre point. Closed, the outer two are
   offset by 6.5px; open, the offset is dropped and they rotate, so they
   cross exactly. Laying them out with grid rows left the geometry dependent
   on row sizing, and the two halves met at the edge instead of the middle. */
.lu-burger span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 17px;
  height: 1.5px;
  margin: -0.75px 0 0 -8.5px;
  border-radius: 2px;
  background: var(--lu-text);
  transform-origin: center center;
  transition: transform 0.4s var(--lu-ease), opacity 0.18s linear 0.1s,
    width 0.4s var(--lu-ease);
}

.lu-burger span:nth-child(1) {
  transform: translateY(-6.5px);
}

.lu-burger span:nth-child(3) {
  transform: translateY(6.5px);
}

.lu-burger:hover span:nth-child(2) {
  width: 12px;
}

/* The bars sit 6.5px apart centre to centre (1.5px tall plus a 5px gap), so
   each outer bar has to travel the full 6.5px to meet in the middle. Half of
   that left them short and the icon read as a chevron, not a cross. */
.lu-burger.is-open span:nth-child(1) {
  transform: rotate(45deg);
  transition-delay: 0s;
}

.lu-burger.is-open span:nth-child(2) {
  opacity: 0;
}

.lu-burger.is-open span:nth-child(2) {
  width: 17px;
}

.lu-burger.is-open span:nth-child(3) {
  transform: rotate(-45deg);
  transition-delay: 0s;
}

/* Mobile drawer */
.lu-drawer {
  position: fixed;
  inset: 0;
  z-index: 1040;
  background: var(--lu-bg);
  padding: 6rem var(--lu-gutter) 2rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Unrolls from the top edge rather than sliding a full screen height, so
     the panel never appears to travel further than the screen is tall. */
  clip-path: inset(0 0 100% 0);
  opacity: 0;
  visibility: hidden;
  transition: clip-path 0.5s var(--lu-ease-out), opacity 0.3s var(--lu-ease),
    visibility 0.5s;
}

.lu-drawer.is-open {
  clip-path: inset(0 0 0 0);
  opacity: 1;
  visibility: visible;
}

/* Entries rise in behind the curtain, one just after another */
.lu-drawer__list > li,
.lu-drawer > .lu-btn {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.4s var(--lu-ease), transform 0.45s var(--lu-ease-out);
}

.lu-drawer.is-open .lu-drawer__list > li,
.lu-drawer.is-open > .lu-btn {
  opacity: 1;
  transform: none;
}

.lu-drawer.is-open .lu-drawer__list > li:nth-child(1) { transition-delay: 0.14s; }
.lu-drawer.is-open .lu-drawer__list > li:nth-child(2) { transition-delay: 0.19s; }
.lu-drawer.is-open .lu-drawer__list > li:nth-child(3) { transition-delay: 0.24s; }
.lu-drawer.is-open .lu-drawer__list > li:nth-child(4) { transition-delay: 0.29s; }
.lu-drawer.is-open .lu-drawer__list > li:nth-child(5) { transition-delay: 0.34s; }
.lu-drawer.is-open .lu-drawer__list > li:nth-child(6) { transition-delay: 0.39s; }
.lu-drawer.is-open > .lu-btn { transition-delay: 0.44s; }

@media (prefers-reduced-motion: reduce) {
  .lu-drawer__list > li,
  .lu-drawer > .lu-btn {
    opacity: 1;
    transform: none;
  }
}

.lu-drawer__list {
  list-style: none;
  margin: 0 0 2.5rem;
  padding: 0;
  border-top: 1px solid var(--lu-line);
}

/* Direct children only — as a descendant selector this also ruled off every
   submenu entry. */
.lu-drawer__list > li {
  border-bottom: 1px solid var(--lu-line);
}

/* The whole row is the toggle — reaching for a 20px chevron on a phone is a
   poor target, and tapping the label is what people try first. */
.lu-drawer__row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 0;
  border: 0;
  background: none;
  color: var(--lu-text);
  font-family: var(--lu-font-display);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  text-align: left;
  cursor: pointer;
  transition: color 0.3s var(--lu-ease);
}

.lu-drawer__row[aria-expanded="true"] {
  color: var(--lu-accent-ink);
}

.lu-drawer__chev {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--lu-line);
  color: var(--lu-text-muted);
  transition: transform 0.35s var(--lu-ease), border-color 0.3s var(--lu-ease),
    background 0.3s var(--lu-ease), color 0.3s var(--lu-ease);
}

.lu-drawer__chev svg {
  width: 15px;
  height: 15px;
}

.lu-drawer__row[aria-expanded="true"] .lu-drawer__chev {
  transform: rotate(180deg);
  border-color: var(--lu-accent-line);
  background: var(--lu-accent-soft);
  color: var(--lu-accent-ink);
}

.lu-drawer__list > li > a,
.lu-drawer__row > a {
  display: block;
  flex: 1;
  padding: 1.1rem 0;
  font-family: var(--lu-font-display);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.03em;
}

/* Matches the desktop mega menu: soft rounded rows, no rules between them,
   opened with a height transition rather than a display swap. */
.lu-drawer__sub {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.1rem;
  /* A ceiling rather than a fraction: grid-template-rows: 0fr constrains only
     the first row, so a list of links would never close. The value only has
     to clear the longest submenu. */
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.45s var(--lu-ease), opacity 0.3s var(--lu-ease),
    padding 0.45s var(--lu-ease);
}

.lu-drawer__sub.is-open {
  max-height: 40rem;
  opacity: 1;
  padding-bottom: 1rem;
}

.lu-drawer__sub a {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.65rem 0.85rem;
  border-radius: var(--lu-radius-sm);
  color: var(--lu-text-muted);
  font-size: 0.95rem;
  transition: background 0.25s var(--lu-ease), color 0.25s var(--lu-ease);
}

/* A small accent dash stands in for the rule that used to separate rows */
.lu-drawer__sub a::before {
  content: "";
  width: 14px;
  height: 1px;
  flex-shrink: 0;
  background: var(--lu-line-strong);
  transition: width 0.25s var(--lu-ease), background 0.25s var(--lu-ease);
}

.lu-drawer__sub a:hover,
.lu-drawer__sub a:focus-visible {
  background: var(--lu-accent-soft);
  color: var(--lu-text);
}

.lu-drawer__sub a:hover::before,
.lu-drawer__sub a:focus-visible::before {
  width: 20px;
  background: var(--lu-accent);
}

.lu-drawer__toggle {
  background: none;
  border: 0;
  color: var(--lu-text-muted);
  padding: 0.5rem;
  cursor: pointer;
  transition: transform 0.3s var(--lu-ease);
}

.lu-drawer__toggle.is-open {
  transform: rotate(180deg);
}

/* ==========================================================================
   07. Hero
   ========================================================================== */

.lu-hero {
  position: relative;
  padding-top: clamp(7rem, 12vw, 9.5rem);
  padding-bottom: var(--lu-section);
  overflow: hidden;
}

/* Soft radial wash behind the hero copy */
.lu-hero__glow {
  position: absolute;
  top: -20%;
  left: 50%;
  width: min(1100px, 130vw);
  aspect-ratio: 1;
  transform: translateX(-50%);
  background: radial-gradient(
    circle,
    var(--lu-accent-soft) 0%,
    transparent 62%
  );
  pointer-events: none;
  z-index: 0;
}

.lu-hero > .container {
  position: relative;
  z-index: 2;
}

/* The masked line reveal clips anything wider than its column, so a hero that
   shares its row with another column gets a smaller display size. Without this
   a long word is cut off mid-letter rather than wrapping. */
.lu-hero--split .lu-hero__title {
  font-size: clamp(2.25rem, 4.1vw, 3.85rem);
}

.lu-hero__title {
  font-size: var(--lu-fs-display);
  overflow-wrap: break-word;
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 0.95;
  margin-bottom: 1.5rem;
}

.lu-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.5rem;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--lu-line);
}

.lu-hero__meta dt {
  font-family: var(--lu-font-mono);
  font-size: var(--lu-fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lu-text-faint);
  margin-bottom: 0.35rem;
}

.lu-hero__meta dd {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
}

/* Rotating word in the hero headline */
.lu-rotator {
  display: inline-grid;
  vertical-align: bottom;
  overflow: hidden;
  height: 1em;
}

.lu-rotator span {
  grid-area: 1 / 1;
  /* Display-size text only needs 3:1, and the brand colour gives 3.14:1 on the
     light background, so the headline keeps it in both themes. */
  color: var(--lu-accent);
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 0.5s var(--lu-ease), transform 0.5s var(--lu-ease);
}

.lu-rotator span.is-in {
  opacity: 1;
  transform: translateY(0);
}

.lu-rotator span.is-out {
  opacity: 0;
  transform: translateY(-100%);
}

/* Page banner used on every inner page */
.lu-banner {
  position: relative;
  padding-top: clamp(8rem, 16vw, 11rem);
  padding-bottom: clamp(3rem, 7vw, 5rem);
  border-bottom: 1px solid var(--lu-line);
  overflow: hidden;
}

.lu-banner__glow {
  position: absolute;
  top: -40%;
  right: -10%;
  width: min(720px, 90vw);
  aspect-ratio: 1;
  background: radial-gradient(circle, var(--lu-accent-soft) 0%, transparent 65%);
  pointer-events: none;
}

.lu-crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  font-size: 0.85rem;
  color: var(--lu-text-muted);
}

.lu-crumb li + li::before {
  content: "/";
  margin-right: 0.6rem;
  color: var(--lu-text-faint);
}

.lu-crumb a:hover {
  color: var(--lu-accent-ink);
}

/* ==========================================================================
   08. Section furniture
   ========================================================================== */

/* Numbered list rows — used for process/approach sections */
.lu-rows {
  border-top: 1px solid var(--lu-line);
}

.lu-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem 1.5rem;
  align-items: start;
  padding-block: clamp(1.5rem, 3vw, 2.5rem);
  border-bottom: 1px solid var(--lu-line);
  transition: background-color 0.2s var(--lu-ease),
    border-color 0.2s var(--lu-ease);
}

.lu-row:hover {
  background-color: var(--lu-bg-elev);
  border-bottom-color: var(--lu-accent-line);
}

@media (min-width: 992px) {
  .lu-row {
    grid-template-columns: 90px minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 2.5rem;
    align-items: center;
  }
}

.lu-row__num {
  font-family: var(--lu-font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  color: var(--lu-text-faint);
  padding-top: 0.35rem;
  transition: color 0.2s var(--lu-ease);
}

.lu-row__title {
  font-size: clamp(1.35rem, 2.2vw, 1.9rem);
  margin: 0;
  transition: color 0.2s var(--lu-ease), transform 0.25s var(--lu-ease);
}

.lu-row:hover .lu-row__num,
.lu-row:hover .lu-row__title {
  color: var(--lu-accent-ink);
}

.lu-row:hover .lu-row__title,
.lu-row:hover .lu-row__body {
  transform: translateX(0.5rem);
}

.lu-row__body {
  grid-column: 1 / -1;
  color: var(--lu-text-muted);
  margin: 0;
  max-width: 30rem;
  transition: transform 0.25s var(--lu-ease);
}

@media (min-width: 992px) {
  .lu-row__body {
    grid-column: auto;
  }
}

/* ==========================================================================
   09. Cards
   ========================================================================== */

.lu-card {
  position: relative;
  height: auto;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--lu-bg-elev);
  border: 1px solid var(--lu-line);
  border-radius: var(--lu-radius);
  overflow: hidden;
  transition: border-color 0.45s var(--lu-ease), transform 0.45s var(--lu-ease);
}

.lu-card:hover {
  border-color: var(--lu-accent-line);
  transform: translateY(-4px);
}

/* A card that fills its column keeps a row of cards level. A card sitting
   among other content must not — a blanket height:100% stretched the article
   author card to the full height of the column it shared with the sidebar. */
.row > [class*="col"] > .lu-card:only-child {
  height: 100%;
}

.lu-card__icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--lu-accent-soft);
  color: var(--lu-accent-ink);
  margin-bottom: 1.5rem;
}

.lu-card__icon svg {
  width: 24px;
  height: 24px;
}

.lu-card h3 {
  font-size: 1.3rem;
  margin-bottom: 0.65rem;
}

.lu-card p {
  color: var(--lu-text-muted);
  font-size: 0.95rem;
  margin-bottom: 0;
}

.lu-card__num {
  position: absolute;
  top: 1.25rem;
  right: 1.5rem;
  font-family: var(--lu-font-mono);
  font-size: 0.75rem;
  color: var(--lu-text-faint);
  letter-spacing: 0.1em;
}

/* --- Work card ---------------------------------------------------------- */

.lu-work {
  display: block;
  position: relative;
  border-radius: var(--lu-radius);
  overflow: hidden;
  background: var(--lu-bg-elev);
  border: 1px solid var(--lu-line);
  transition: border-color 0.45s var(--lu-ease);
}

.lu-work:hover {
  border-color: var(--lu-accent-line);
}

.lu-work__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--lu-bg-sunken);
}

.lu-work__media img,
.lu-work__media svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--lu-ease);
}

.lu-work:hover .lu-work__media img,
.lu-work:hover .lu-work__media svg {
  transform: scale(1.06);
}

.lu-work__body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.5rem;
}

.lu-work__cat {
  font-family: var(--lu-font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lu-text-faint);
  display: block;
  margin-bottom: 0.4rem;
}

.lu-work__title {
  font-size: 1.25rem;
  margin: 0;
  transition: color 0.35s var(--lu-ease);
}

.lu-work:hover .lu-work__title {
  color: var(--lu-accent-ink);
}

/* Filter bar */
.lu-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: var(--lu-gap);
}

.lu-filter {
  padding: 0.6rem 1.2rem;
  border-radius: 100px;
  border: 1px solid var(--lu-line);
  background: transparent;
  color: var(--lu-text-muted);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.35s var(--lu-ease);
}

.lu-filter:hover {
  border-color: var(--lu-line-strong);
  color: var(--lu-text);
}

.lu-filter.is-active {
  background: var(--lu-text);
  border-color: var(--lu-text);
  color: var(--lu-bg);
}

/* Grid item hide/show — animated, not a hard display swap. The [data-reveal]
   prefix keeps these states ahead of the reveal's .is-in once an item has
   already scrolled into view. */
.lu-grid-item {
  transition: opacity 0.35s var(--lu-ease), transform 0.35s var(--lu-ease);
  will-change: opacity, transform;
}

.lu-grid-item.is-hidden {
  display: none;
}

/* While a filter swap runs, the grid ignores the slow scroll-reveal timing
   and uses one quick, even easing so the change reads as a single motion. */
[data-reveal].lu-grid-item.is-filtering {
  transition: opacity 0.15s var(--lu-ease), transform 0.15s var(--lu-ease);
  transition-delay: 0ms;
}

/* Items leaving fade down-and-out; arriving ones fade up-and-in on a stagger. */
.lu-grid-item.is-fading,
.lu-grid-item.is-entering,
[data-reveal].lu-grid-item.is-fading,
[data-reveal].lu-grid-item.is-entering {
  opacity: 0;
  transform: translateY(8px) scale(0.98);
}

/* --- Post card ---------------------------------------------------------- */

.lu-post {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: var(--lu-radius);
  overflow: hidden;
  background: var(--lu-bg-elev);
  border: 1px solid var(--lu-line);
  transition: border-color 0.45s var(--lu-ease), transform 0.45s var(--lu-ease);
}

.lu-post:hover {
  border-color: var(--lu-accent-line);
  transform: translateY(-4px);
}

.lu-post__media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--lu-bg-sunken);
}

.lu-post__media svg,
.lu-post__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--lu-ease);
}

.lu-post:hover .lu-post__media svg,
.lu-post:hover .lu-post__media img {
  transform: scale(1.05);
}

.lu-post__body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.lu-post__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--lu-font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lu-text-faint);
  margin-bottom: 0.85rem;
}

.lu-post__tag {
  color: var(--lu-accent-ink);
}

.lu-post h3 {
  font-size: 1.2rem;
  line-height: 1.3;
  margin-bottom: 0.75rem;
}

.lu-post p {
  font-size: 0.9rem;
  color: var(--lu-text-muted);
  margin-bottom: 1.25rem;
}

.lu-post__more {
  margin-top: auto;
  font-size: 0.85rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.lu-post__more svg {
  width: 15px;
  height: 15px;
  transition: transform 0.35s var(--lu-ease);
}

.lu-post:hover .lu-post__more svg {
  transform: translateX(4px);
}

/* --- Team member -------------------------------------------------------- */

.lu-member {
  display: block;
  text-align: center;
}

.lu-member h3 a:hover {
  color: var(--lu-accent-ink);
}

.lu-member__link {
  display: block;
  width: 100%;
  height: 100%;
}

.lu-member__media {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--lu-radius);
  overflow: hidden;
  background: var(--lu-bg-sunken);
  margin-bottom: 1.25rem;
  border: 1px solid var(--lu-line);
}

.lu-member__media svg,
.lu-member__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--lu-ease);
}

.lu-member:hover .lu-member__media svg,
.lu-member:hover .lu-member__media img {
  transform: scale(1.05);
}

.lu-member__social {
  position: absolute;
  left: 50%;
  bottom: 1rem;
  transform: translate(-50%, 130%);
  display: flex;
  gap: 0.5rem;
  padding: 0.5rem;
  border-radius: 100px;
  background: color-mix(in srgb, var(--lu-bg) 75%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform 0.5s var(--lu-ease);
}

.lu-member:hover .lu-member__social {
  transform: translate(-50%, 0);
}

/* A touch screen has no hover, so the row would never appear: show it outright. */
@media (hover: none), (pointer: coarse) {
  .lu-member__social {
    transform: translate(-50%, 0);
  }
}

.lu-member__social a {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--lu-text);
}

.lu-member__social a:hover {
  background: var(--lu-accent-fill);
  color: #fff;
}

.lu-member__social svg {
  width: 16px;
  height: 16px;
}

.lu-member h3 {
  font-size: 1.15rem;
  margin-bottom: 0.2rem;
}

.lu-member__role {
  font-family: var(--lu-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lu-text-faint);
}

/* --- Pricing ------------------------------------------------------------ */

.lu-price {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  border-radius: var(--lu-radius-lg);
  border: 1px solid var(--lu-line);
  background: var(--lu-bg-elev);
  transition: border-color 0.45s var(--lu-ease), transform 0.45s var(--lu-ease);
}

.lu-price:hover {
  transform: translateY(-4px);
  border-color: var(--lu-accent-line);
}

.lu-price--featured {
  border-color: var(--lu-accent-ink);
  background: linear-gradient(
    170deg,
    var(--lu-accent-soft) 0%,
    var(--lu-bg-elev) 45%
  );
}

.lu-price__badge {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  padding: 0.3rem 0.75rem;
  border-radius: 100px;
  background: var(--lu-accent-fill);
  color: #fff;
  font-family: var(--lu-font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.lu-price__name {
  font-size: 1.1rem;
  margin-bottom: 0.35rem;
}

.lu-price__tag {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 1.5rem 0 0.5rem;
}

.lu-price__amount {
  font-family: var(--lu-font-display);
  /* Sized so the longest figure in the table still fits the column. At the
     old 3.5rem a five-digit price ran up to 60px past the card edge. */
  font-size: clamp(1.9rem, 2.9vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
}

.lu-price__per {
  color: var(--lu-text-faint);
  font-size: 0.85rem;
  white-space: nowrap;
}

/* The billing period lives on its own line instead of trailing the figure */
.lu-price__note {
  display: block;
  min-height: 1.25rem;
  margin-bottom: 1rem;
  font-family: var(--lu-font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lu-accent-ink);
  opacity: 0;
  transition: opacity 0.3s var(--lu-ease);
}

.lu-price__note.is-shown {
  opacity: 1;
}

.lu-price__list {
  list-style: none;
  margin: 0 0 2rem;
  padding: 1.5rem 0 0;
  border-top: 1px solid var(--lu-line);
  display: grid;
  gap: 0.85rem;
  flex: 1;
}

.lu-price__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: 0.92rem;
  color: var(--lu-text-muted);
}

.lu-price__list svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  margin-top: 0.2rem;
  color: var(--lu-accent-ink);
}

.lu-price__list li.is-off {
  color: var(--lu-text-faint);
  text-decoration: line-through;
}

.lu-price__list li.is-off svg {
  color: var(--lu-text-faint);
}

/* Billing switch */
.lu-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.4rem 0.5rem;
  border-radius: 100px;
  border: 1px solid var(--lu-line);
  background: var(--lu-bg-elev);
  font-size: 0.85rem;
}

.lu-switch button {
  border: 0;
  background: transparent;
  color: var(--lu-text-muted);
  padding: 0.45rem 1.1rem;
  border-radius: 100px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 500;
  transition: all 0.35s var(--lu-ease);
}

.lu-switch button.is-active {
  background: var(--lu-text);
  color: var(--lu-bg);
}

/* ==========================================================================
   10. Marquee
   ========================================================================== */

.lu-marquee {
  display: flex;
  overflow: hidden;
  user-select: none;
  gap: var(--gap, 3rem);
  padding-block: clamp(2rem, 4vw, 3rem);
  border-block: 1px solid var(--lu-line);
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    #000 12%,
    #000 88%,
    transparent
  );
  mask-image: linear-gradient(
    90deg,
    transparent,
    #000 12%,
    #000 88%,
    transparent
  );
}

.lu-marquee__track {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--gap, 3rem);
  min-width: 100%;
  animation: lu-scroll var(--speed, 32s) linear infinite;
}

.lu-marquee:hover .lu-marquee__track {
  animation-play-state: paused;
}

.lu-marquee--rev .lu-marquee__track {
  animation-direction: reverse;
}

@keyframes lu-scroll {
  to {
    transform: translateX(calc(-100% - var(--gap, 3rem)));
  }
}

.lu-marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 1.5rem;
  font-family: var(--lu-font-display);
  font-size: clamp(1.75rem, 4vw, 3.25rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  white-space: nowrap;
  color: var(--lu-text);
}

.lu-marquee__item::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--lu-accent);
  flex-shrink: 0;
}

/* Logo strip */
.lu-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(2rem, 6vw, 4.5rem);
}

.lu-logos span {
  font-family: var(--lu-font-display);
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--lu-text-faint);
  transition: color 0.4s var(--lu-ease);
}

.lu-logos span:hover {
  color: var(--lu-text);
}

/* ==========================================================================
   11. Stats & counters
   ========================================================================== */

.lu-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--lu-line);
  border: 1px solid var(--lu-line);
  border-radius: var(--lu-radius);
  overflow: hidden;
}

@media (min-width: 768px) {
  .lu-stats--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.lu-stat {
  background: var(--lu-bg);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  text-align: center;
}

.lu-stat__num {
  font-family: var(--lu-font-display);
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.05em;
}

.lu-stat__label {
  font-family: var(--lu-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lu-text-faint);
}

/* ==========================================================================
   12. Testimonials
   ========================================================================== */

/* Swiper sizes slides to their content by default, which left the cards at
   different heights. Stretching the track and giving the card a floor keeps
   the row even however long the quote runs. */
.swiper-wrapper {
  align-items: stretch;
}

.swiper-slide {
  height: auto;
}

/* A quote only fills its box where quotes sit side by side and a row has to
   stay level. Standing alone in an article it must size to its content —
   height:100% there stretched it to the whole column. */
.swiper-slide > .lu-quote,
.lu-quote.h-100 {
  height: 100%;
  min-height: 300px;
}

.lu-quote {
  height: auto;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  border-radius: var(--lu-radius);
  border: 1px solid var(--lu-line);
  background: var(--lu-bg-elev);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.lu-quote__stars {
  display: flex;
  gap: 0.2rem;
  color: var(--lu-accent-ink);
}

.lu-quote__stars svg {
  width: 16px;
  height: 16px;
  /* Lucide ships stroke-only icons. A rating star has to be filled, or a
     five-star review reads as five empty ones. */
  fill: currentColor;
}

/* The stars a review did not earn keep the outline, in a quieter colour. */
.lu-quote__stars svg.is-empty {
  fill: none;
  color: var(--lu-text-faint);
}

.lu-quote blockquote {
  margin: 0;
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  line-height: 1.6;
  flex: 1 1 auto;
}

.lu-quote__by {
  margin-top: auto;
}

.lu-quote__by {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--lu-line);
}

.lu-quote__avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: var(--lu-accent-soft);
  color: var(--lu-accent-ink);
  font-family: var(--lu-font-display);
  font-weight: 700;
  font-size: 1rem;
}

.lu-quote__name {
  font-weight: 600;
  font-size: 0.95rem;
  display: block;
}

.lu-quote__role {
  font-size: 0.8rem;
  color: var(--lu-text-faint);
}

/* Swiper chrome */
.swiper {
  overflow: visible !important;
}

.lu-swiper-wrap {
  overflow: hidden;
  margin-inline: calc(var(--lu-gutter) * -1);
  padding-inline: var(--lu-gutter);
}

.lu-slider-nav {
  display: flex;
  gap: 0.6rem;
}

.lu-slider-nav button {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--lu-line-strong);
  background: transparent;
  color: var(--lu-text);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all 0.35s var(--lu-ease);
}

.lu-slider-nav button:hover {
  background: var(--lu-accent-fill);
  border-color: var(--lu-accent-ink);
  color: #fff;
}

.lu-slider-nav svg {
  width: 18px;
  height: 18px;
}

.lu-slider-nav button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* ==========================================================================
   13. Accordion & tabs
   ========================================================================== */

.lu-acc {
  border-top: 1px solid var(--lu-line);
}

.lu-acc__item {
  border-bottom: 1px solid var(--lu-line);
}

.lu-acc__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: clamp(1.1rem, 2.4vw, 1.6rem) 0;
  background: transparent;
  border: 0;
  color: var(--lu-text);
  font-family: var(--lu-font-display);
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-align: left;
  cursor: pointer;
  transition: color 0.35s var(--lu-ease);
}

.lu-acc__btn:hover,
.lu-acc__btn[aria-expanded="true"] {
  color: var(--lu-accent-ink);
}

.lu-acc__sign {
  position: relative;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.lu-acc__sign::before,
.lu-acc__sign::after {
  content: "";
  position: absolute;
  background: currentColor;
  transition: transform 0.4s var(--lu-ease), opacity 0.3s var(--lu-ease);
}

.lu-acc__sign::before {
  top: 50%;
  left: 0;
  width: 100%;
  height: 1.5px;
  margin-top: -0.75px;
}

.lu-acc__sign::after {
  left: 50%;
  top: 0;
  width: 1.5px;
  height: 100%;
  margin-left: -0.75px;
}

.lu-acc__btn[aria-expanded="true"] .lu-acc__sign::after {
  transform: rotate(90deg);
  opacity: 0;
}

.lu-acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s var(--lu-ease);
}

.lu-acc__panel.is-open {
  grid-template-rows: 1fr;
}

.lu-acc__panel > div {
  overflow: hidden;
}

.lu-acc__panel p {
  color: var(--lu-text-muted);
  padding-bottom: 1.5rem;
  margin: 0;
  max-width: 62ch;
}

/* ==========================================================================
   14. Forms
   ========================================================================== */

.lu-field {
  margin-bottom: 1.25rem;
}

.lu-field label {
  display: block;
  font-family: var(--lu-font-mono);
  font-size: var(--lu-fs-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lu-text-faint);
  margin-bottom: 0.6rem;
}

.lu-input,
.lu-textarea,
.lu-select {
  width: 100%;
  padding: 0.95rem 1.1rem;
  background: var(--lu-bg-elev);
  border: 1px solid var(--lu-line);
  border-radius: var(--lu-radius-sm);
  color: var(--lu-text);
  font-family: inherit;
  font-size: 0.95rem;
  transition: border-color 0.3s var(--lu-ease), background 0.3s var(--lu-ease);
}

/* A file field otherwise shows the browser's own button — a white pill sitting in
   a dark input. Dress it as the template's small ghost button instead. The two
   pseudo-elements must stay in separate rules: one selector list containing a
   pseudo-element a browser does not know invalidates the whole rule. */
.lu-input[type="file"] {
  padding-block: 0.6rem;
  cursor: pointer;
}

.lu-input[type="file"]::file-selector-button {
  margin-inline-end: 0.9rem;
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--lu-line-strong);
  border-radius: 100px;
  background: transparent;
  color: var(--lu-text);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.3s var(--lu-ease), color 0.3s var(--lu-ease);
}

.lu-input[type="file"]::file-selector-button:hover {
  border-color: var(--lu-accent);
  color: var(--lu-accent-ink);
}

.lu-input[type="file"]::-webkit-file-upload-button {
  margin-inline-end: 0.9rem;
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--lu-line-strong);
  border-radius: 100px;
  background: transparent;
  color: var(--lu-text);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.lu-input::placeholder,
.lu-textarea::placeholder {
  color: var(--lu-text-faint);
}

.lu-input:focus,
.lu-textarea:focus,
.lu-select:focus {
  outline: none;
  border-color: var(--lu-accent-ink);
  background: var(--lu-bg);
}

.lu-textarea {
  min-height: 150px;
  resize: vertical;
}

.lu-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%238f8f99' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.1rem center;
  padding-right: 2.75rem;
}

.lu-input.is-invalid,
.lu-textarea.is-invalid {
  border-color: #ef4444;
}

.lu-error {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.8rem;
  color: #ef4444;
  min-height: 1rem;
}

.lu-form-note {
  margin-top: 1rem;
  padding: 0.9rem 1.1rem;
  border-radius: var(--lu-radius-sm);
  font-size: 0.9rem;
  display: none;
}

.lu-form-note.is-ok {
  display: block;
  background: rgba(34, 197, 94, 0.12);
  color: #4ade80;
}

.lu-form-note.is-err {
  display: block;
  background: rgba(239, 68, 68, 0.12);
  color: #f87171;
}

/* Contact detail rows */
.lu-contact-row {
  display: flex;
  gap: 1.1rem;
  padding-block: 1.5rem;
  border-bottom: 1px solid var(--lu-line);
}

.lu-contact-row:first-child {
  border-top: 1px solid var(--lu-line);
}

.lu-contact-row__icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--lu-accent-soft);
  color: var(--lu-accent-ink);
}

.lu-contact-row__icon svg {
  width: 20px;
  height: 20px;
}

.lu-contact-row h4 {
  font-size: 0.95rem;
  margin-bottom: 0.2rem;
}

.lu-contact-row p,
.lu-contact-row a {
  color: var(--lu-text-muted);
  font-size: 0.95rem;
  margin: 0;
}

.lu-contact-row a:hover {
  color: var(--lu-accent-ink);
}

/* ==========================================================================
   15. Footer
   ========================================================================== */

.lu-cta {
  position: relative;
  padding-block: var(--lu-section);
  text-align: center;
  overflow: hidden;
  border-top: 1px solid var(--lu-line);
}

.lu-cta__glow {
  position: absolute;
  bottom: -60%;
  left: 50%;
  transform: translateX(-50%);
  width: min(900px, 120vw);
  aspect-ratio: 1;
  background: radial-gradient(circle, var(--lu-accent-soft) 0%, transparent 60%);
  pointer-events: none;
}

.lu-cta > .container {
  position: relative;
  z-index: 2;
}

.lu-footer {
  background: var(--lu-bg-sunken);
  border-top: 1px solid var(--lu-line);
  padding-top: var(--lu-section);
}

.lu-footer__top {
  display: grid;
  gap: 2.5rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--lu-line);
}

@media (min-width: 768px) {
  .lu-footer__top {
    grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
    gap: 2rem;
  }
}

.lu-footer__head {
  margin: 0 0 1.25rem;
}

.lu-footer__toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: default;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-align: left;
}

.lu-footer__chev {
  display: none;
}

.lu-footer h3 {
  font-family: var(--lu-font-mono);
  font-size: var(--lu-fs-label);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lu-text-faint);
  margin-bottom: 1.25rem;
}

.lu-footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
}

/* Newsletter submit: a labelled control, not a bare circle */
.lu-news__go {
  padding-inline: 1.1rem;
  white-space: nowrap;
}

.lu-footer__links a {
  color: var(--lu-text-muted);
  font-size: 0.92rem;
}

.lu-footer__links a:hover {
  color: var(--lu-accent-ink);
}

.lu-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.75rem;
  font-size: 0.85rem;
  color: var(--lu-text-faint);
}

.lu-social {
  display: flex;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.lu-social a {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--lu-line);
  color: var(--lu-text-muted);
  transition: all 0.35s var(--lu-ease);
}

.lu-social a:hover {
  background: var(--lu-accent-fill);
  border-color: var(--lu-accent-ink);
  color: #fff;
  transform: translateY(-2px);
}

.lu-social svg {
  width: 16px;
  height: 16px;
}

.lu-to-top {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--lu-line-strong);
  background: color-mix(in srgb, var(--lu-bg) 80%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--lu-text);
  display: grid;
  place-items: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: all 0.4s var(--lu-ease);
  z-index: 1020;
}

.lu-to-top.is-shown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.lu-to-top:hover {
  background: var(--lu-accent-fill);
  border-color: var(--lu-accent-ink);
  color: #fff;
}

.lu-to-top svg {
  width: 18px;
  height: 18px;
}

/* ==========================================================================
   16. Utility pages
   ========================================================================== */

.lu-util {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 7rem var(--lu-gutter) 3rem;
  position: relative;
  overflow: hidden;
}

.lu-util__code {
  font-family: var(--lu-font-display);
  font-size: clamp(6rem, 22vw, 16rem);
  font-weight: 800;
  line-height: 0.85;
  letter-spacing: -0.06em;
  margin-bottom: 1.5rem;
  background: linear-gradient(
    180deg,
    var(--lu-text) 0%,
    var(--lu-accent) 130%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lu-countdown {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-block: 2.5rem;
}

.lu-countdown__cell {
  min-width: 92px;
  padding: 1.25rem 1rem;
  border-radius: var(--lu-radius);
  border: 1px solid var(--lu-line);
  background: var(--lu-bg-elev);
}

.lu-countdown__val {
  font-family: var(--lu-font-display);
  font-size: clamp(1.75rem, 5vw, 2.75rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  display: block;
}

.lu-countdown__lbl {
  font-family: var(--lu-font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lu-text-faint);
  margin-top: 0.4rem;
  display: block;
}

.lu-subscribe {
  display: flex;
  gap: 0.6rem;
  max-width: 460px;
  margin-inline: auto;
  flex-wrap: wrap;
}

.lu-subscribe .lu-input {
  flex: 1;
  min-width: 200px;
}

/* ==========================================================================
   17. Reveal animations
   ========================================================================== */

[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.85s var(--lu-ease-out), transform 0.85s var(--lu-ease-out);
  transition-delay: var(--d, 0ms);
  will-change: opacity, transform;
}

[data-reveal="left"] {
  transform: translateX(-30px);
}

[data-reveal="right"] {
  transform: translateX(30px);
}

[data-reveal="zoom"] {
  transform: scale(0.94);
}

[data-reveal="fade"] {
  transform: none;
}

[data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* Below the lg breakpoint the side columns are full width, so a horizontal
   reveal offset pushes the page wider than the screen before it fires.
   Fall back to the vertical motion there. */
@media (max-width: 991.98px) {
  [data-reveal="left"],
  [data-reveal="right"] {
    transform: translateY(26px);
  }
}

/* Line-by-line headline reveal */
/* Direct-child selectors only: a nested component such as .lu-rotator must
   keep its own display mode rather than being forced to block. */
/* The mask that makes each line slide up also clips whatever sits below the
   baseline, and the display faces run at a line-height under 1. The padding
   opens room for descenders; the matching negative margin keeps the stacked
   line spacing exactly where it was. */
.lu-lines > span {
  display: block;
  overflow: hidden;
  padding-bottom: 0.3em;
  margin-bottom: -0.3em;
}

.lu-lines > span > i {
  display: block;
  font-style: inherit;
  transform: translateY(105%);
  transition: transform 0.9s var(--lu-ease-out);
  transition-delay: var(--d, 0ms);
}

.lu-lines.is-in > span > i {
  transform: translateY(0);
}

/* ==========================================================================
   18. Responsive & preferences
   ========================================================================== */

/* Cursor is pointer-only; touch devices keep the native behaviour */
@media (hover: none), (pointer: coarse), (max-width: 991.98px) {
  .lu-cursor,
  .lu-cursor-dot {
    display: none !important;
  }
}

@media (max-width: 991.98px) {
  .lu-hero__meta {
    gap: 1.25rem 2rem;
  }

  .lu-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575.98px) {
  .lu-btn {
    width: 100%;
  }

  .lu-btn--auto {
    width: auto;
  }

  .lu-footer__bottom {
    justify-content: center;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  [data-reveal],
  .lu-lines > span > i {
    opacity: 1 !important;
    transform: none !important;
  }

  .lu-marquee__track {
    animation: none;
  }
}

@media print {
  .lu-nav,
  .lu-to-top,
  .lu-cursor,
  .lu-cursor-dot,
  .lu-grain,
  .lu-preloader,
  .lu-progress {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }
}

/* ==========================================================================
   19. Mega menu
   ========================================================================== */

.lu-mega {
  position: absolute;
  top: calc(100% + 0.75rem);
  left: 50%;
  transform: translate(-50%, 8px);
  width: min(720px, calc(100vw - 3rem));
  padding: 1.5rem;
  background: var(--lu-bg-elev);
  border: 1px solid var(--lu-line);
  border-radius: var(--lu-radius);
  box-shadow: 0 32px 64px -32px rgba(0, 0, 0, 0.7);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--lu-ease) 0.25s,
    transform 0.4s var(--lu-ease) 0.25s, visibility 0.4s 0.25s;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.75rem;
}

.lu-menu > li:hover > .lu-mega,
.lu-menu > li:focus-within > .lu-mega {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition-delay: 0s;
}

.lu-mega__col h4 {
  font-family: var(--lu-font-mono);
  font-size: var(--lu-fs-label);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lu-text-faint);
  margin-bottom: 0.9rem;
}

.lu-mega__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.15rem;
}

.lu-mega__col a {
  display: block;
  padding: 0.45rem 0.65rem;
  margin-inline: -0.65rem;
  border-radius: 8px;
  font-size: 0.9rem;
  color: var(--lu-text-muted);
}

.lu-mega__col a:hover {
  background: var(--lu-accent-soft);
  color: var(--lu-text);
}

.lu-mega__tag {
  font-family: var(--lu-font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lu-accent-ink);
  margin-left: 0.4rem;
}

/* ==========================================================================
   20. Search overlay
   ========================================================================== */

.lu-search {
  position: fixed;
  inset: 0;
  z-index: 1060;
  background: color-mix(in srgb, var(--lu-bg) 92%, transparent);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: clamp(5rem, 14vh, 9rem) var(--lu-gutter) 2rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s var(--lu-ease), visibility 0.35s;
  overflow-y: auto;
}

.lu-search.is-open {
  opacity: 1;
  visibility: visible;
}

.lu-search__box {
  max-width: 680px;
  margin-inline: auto;
}

.lu-search__field {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--lu-line-strong);
}

.lu-search__field svg {
  width: 22px;
  height: 22px;
  color: var(--lu-text-faint);
  flex-shrink: 0;
}

.lu-search__input {
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  color: var(--lu-text);
  font-family: var(--lu-font-display);
  font-size: clamp(1.4rem, 4vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -0.03em;
}

.lu-search__input:focus {
  outline: none;
}

.lu-search__input::placeholder {
  color: var(--lu-text-faint);
}

.lu-search__results {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}

.lu-search__results a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1rem;
  margin-inline: -1rem;
  border-radius: var(--lu-radius-sm);
  transition: background 0.25s var(--lu-ease);
}

.lu-search__results a:hover,
.lu-search__results a:focus-visible {
  background: var(--lu-accent-soft);
}

.lu-search__results strong {
  font-weight: 600;
  font-size: 0.98rem;
}

.lu-search__results span {
  font-family: var(--lu-font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lu-text-faint);
  flex-shrink: 0;
}

.lu-search__empty {
  padding: 1.5rem 0;
  color: var(--lu-text-muted);
}

.lu-search__hint {
  margin-top: 2rem;
  font-family: var(--lu-font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lu-text-faint);
}

.lu-search__close {
  position: absolute;
  top: 1.5rem;
  right: var(--lu-gutter);
}

/* ==========================================================================
   21. Cookie consent
   ========================================================================== */

.lu-cookie {
  position: fixed;
  left: var(--lu-gutter);
  bottom: var(--lu-gutter);
  z-index: 1035;
  width: min(420px, calc(100vw - var(--lu-gutter) * 2));
  padding: 1.5rem;
  background: var(--lu-bg-elev);
  border: 1px solid var(--lu-line-strong);
  border-radius: var(--lu-radius);
  box-shadow: 0 24px 48px -20px rgba(0, 0, 0, 0.55);
  transform: translateY(calc(100% + 2rem));
  transition: transform 0.55s var(--lu-ease);
}

.lu-cookie.is-shown {
  transform: translateY(0);
}

.lu-cookie h2 {
  font-size: 1.05rem;
  margin-bottom: 0.5rem;
}

.lu-cookie p {
  font-size: 0.88rem;
  color: var(--lu-text-muted);
  margin-bottom: 1.25rem;
}

.lu-cookie__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.lu-cookie__actions .lu-btn {
  flex: 1;
  min-width: 120px;
}

/* ==========================================================================
   22. Newsletter
   ========================================================================== */

.lu-news {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.lu-news .lu-input {
  flex: 1;
  min-width: 0;
  padding-block: 0.8rem;
}

.lu-news .lu-btn {
  flex-shrink: 0;
  padding-inline: 1.25rem;
}

/* ==========================================================================
   23. Lightbox
   ========================================================================== */

.lu-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1070;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 5vw, 3rem);
  background: color-mix(in srgb, var(--lu-bg-sunken) 94%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s var(--lu-ease), visibility 0.35s;
}

.lu-lightbox.is-open {
  opacity: 1;
  visibility: visible;
}

.lu-lightbox__img {
  max-width: min(1100px, 100%);
  max-height: 78vh;
  border-radius: var(--lu-radius);
  border: 1px solid var(--lu-line);
  object-fit: contain;
}

.lu-lightbox__bar {
  position: absolute;
  left: 50%;
  bottom: clamp(1rem, 4vw, 2.5rem);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 0.75rem;
  border-radius: 100px;
  background: var(--lu-bg-elev);
  border: 1px solid var(--lu-line);
}

.lu-lightbox__count {
  font-family: var(--lu-font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--lu-text-muted);
  font-variant-numeric: tabular-nums;
}

.lu-lightbox__close {
  position: absolute;
  top: clamp(1rem, 4vw, 2rem);
  right: clamp(1rem, 4vw, 2rem);
}

/* ==========================================================================
   24. Tabs
   ========================================================================== */

.lu-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--lu-line);
  margin-bottom: 2rem;
}

.lu-tab {
  padding: 0.65rem 1.25rem;
  border-radius: 100px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--lu-text-muted);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.35s var(--lu-ease);
}

.lu-tab:hover {
  color: var(--lu-text);
}

.lu-tab[aria-selected="true"] {
  background: var(--lu-accent-soft);
  border-color: var(--lu-accent-line);
  color: var(--lu-accent-ink);
}

.lu-tabpanel[hidden] {
  display: none !important;
}

/* ==========================================================================
   25. Skill bars
   ========================================================================== */

.lu-skill + .lu-skill {
  margin-top: 1.5rem;
}

.lu-skill__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.6rem;
}

.lu-skill__name {
  font-weight: 600;
  font-size: 0.95rem;
}

.lu-skill__pct {
  font-family: var(--lu-font-mono);
  font-size: 0.8rem;
  color: var(--lu-text-faint);
  font-variant-numeric: tabular-nums;
}

.lu-skill__track {
  height: 4px;
  border-radius: 100px;
  background: var(--lu-line);
  overflow: hidden;
}

.lu-skill__fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--lu-accent), #ff8a5c);
  transition: width 1.2s var(--lu-ease-out);
}

/* ==========================================================================
   26. Masonry portfolio
   ========================================================================== */

.lu-masonry {
  columns: 1;
  column-gap: 1.25rem;
}

@media (min-width: 640px) {
  .lu-masonry {
    columns: 2;
  }
}

@media (min-width: 1100px) {
  .lu-masonry {
    columns: 3;
  }
}

.lu-masonry > * {
  break-inside: avoid;
  margin-bottom: 1.25rem;
  display: block;
}

/* Vary the tile heights so the columns interlock instead of lining up in
   rows. Column 1 runs tall / medium / short, column 2 runs the same rhythm
   rotated (short / tall / medium), and column 3 keeps two tall tiles so its
   bottom sits close to the others. */
.lu-masonry .lu-work__media {
  aspect-ratio: 4 / 3; /* short */
}

.lu-masonry > :nth-child(2) .lu-work__media,
.lu-masonry > :nth-child(6) .lu-work__media {
  aspect-ratio: 1 / 1; /* medium */
}

.lu-masonry > :nth-child(1) .lu-work__media,
.lu-masonry > :nth-child(5) .lu-work__media,
.lu-masonry > :nth-child(7) .lu-work__media,
.lu-masonry > :nth-child(8) .lu-work__media {
  aspect-ratio: 3 / 4; /* tall */
}

/* ==========================================================================
   27. Blog list layout
   ========================================================================== */

.lu-plist {
  border-top: 1px solid var(--lu-line);
}

.lu-plist__item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
  border-bottom: 1px solid var(--lu-line);
  align-items: center;
}

@media (min-width: 768px) {
  .lu-plist__item {
    grid-template-columns: 190px minmax(0, 1fr) auto;
    gap: 2rem;
  }
}

.lu-plist__media {
  aspect-ratio: 16 / 10;
  border-radius: var(--lu-radius-sm);
  overflow: hidden;
  background: var(--lu-bg-sunken);
  border: 1px solid var(--lu-line);
}

.lu-plist__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--lu-ease);
}

.lu-plist__item:hover .lu-plist__media img {
  transform: scale(1.06);
}

/* The row shows an arrow, so the whole row has to be the click target —
   otherwise the affordance points at something that is not there. */
.lu-plist__item h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.lu-plist__item h3 {
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  margin-bottom: 0.5rem;
  transition: color 0.35s var(--lu-ease);
}

.lu-plist__item:hover h3 {
  color: var(--lu-accent-ink);
}

.lu-plist__item p {
  color: var(--lu-text-muted);
  font-size: 0.92rem;
  margin: 0;
}

/* ==========================================================================
   28. Job listings
   ========================================================================== */

.lu-job {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem 2rem;
  padding: clamp(1.25rem, 3vw, 1.85rem);
  border: 1px solid var(--lu-line);
  border-radius: var(--lu-radius);
  background: var(--lu-bg-elev);
  transition: border-color 0.4s var(--lu-ease), transform 0.4s var(--lu-ease);
}

.lu-job + .lu-job {
  margin-top: 1rem;
}

.lu-job:hover {
  border-color: var(--lu-accent-line);
  transform: translateY(-2px);
}

@media (min-width: 768px) {
  .lu-job {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
}

.lu-job h3 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}

.lu-job__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.lu-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.7rem;
  border-radius: 100px;
  border: 1px solid var(--lu-line);
  font-family: var(--lu-font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lu-text-muted);
}

.lu-chip svg {
  width: 12px;
  height: 12px;
}

.lu-chip--accent {
  border-color: var(--lu-accent-line);
  background: var(--lu-accent-soft);
  color: var(--lu-accent-ink);
}

/* ==========================================================================
   29. Prose (legal pages)
   ========================================================================== */

.lu-prose {
  max-width: 68ch;
}

.lu-prose h2 {
  font-size: clamp(1.35rem, 2.4vw, 1.8rem);
  margin-top: 2.75rem;
  margin-bottom: 0.9rem;
}

.lu-prose h2:first-child {
  margin-top: 0;
}

.lu-prose h3 {
  font-size: 1.1rem;
  margin-top: 1.75rem;
  margin-bottom: 0.6rem;
}

.lu-prose p,
.lu-prose li {
  color: var(--lu-text-muted);
}

.lu-prose ul,
.lu-prose ol {
  padding-left: 1.2rem;
  margin-bottom: 1.25rem;
  display: grid;
  gap: 0.5rem;
}

.lu-prose a {
  color: var(--lu-accent-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.lu-toc {
  position: sticky;
  top: 110px;
}

.lu-toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.15rem;
  counter-reset: toc;
}

.lu-toc a {
  display: block;
  padding: 0.45rem 0.75rem;
  margin-inline: -0.75rem;
  border-radius: 8px;
  font-size: 0.88rem;
  color: var(--lu-text-muted);
}

.lu-toc a:hover {
  background: var(--lu-accent-soft);
  color: var(--lu-text);
}

/* ==========================================================================
   30. Misc additions
   ========================================================================== */

/* Small note bar used above legal copy */
.lu-notice {
  display: flex;
  gap: 0.85rem;
  padding: 1rem 1.25rem;
  border-radius: var(--lu-radius-sm);
  border: 1px solid var(--lu-accent-line);
  background: var(--lu-accent-soft);
  font-size: 0.9rem;
  margin-bottom: 2.5rem;
}

.lu-notice svg {
  width: 18px;
  height: 18px;
  color: var(--lu-accent-ink);
  flex-shrink: 0;
  margin-top: 0.15rem;
}

.lu-notice p {
  margin: 0;
  color: var(--lu-text-muted);
}

/* Image with a zoom affordance */
/* Sits over the media rather than wrapping the card: a <button> may only
   contain phrasing content, so it cannot hold the card markup. */
.lu-zoom {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}

.lu-zoom::after {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--lu-bg) 35%, transparent);
  opacity: 0;
  transition: opacity 0.35s var(--lu-ease);
}

.lu-zoom:hover::after,
.lu-zoom:focus-visible::after {
  opacity: 1;
}

/* ==========================================================================
   31. Mobile refinements
   --------------------------------------------------------------------------
   The header packed a wordmark and three 42px controls behind a 2rem gap,
   which needs about 390px. Below that the menu button ran off-screen and
   could not be reached at all. These rules compress the bar, tighten the
   drawer so more than five entries fit on a screen, and give the drawer's
   submenus a visible hierarchy.
   ========================================================================== */

@media (max-width: 575.98px) {
  :root {
    --lu-section: 3.5rem;
    --lu-gap: 2rem;
  }

  .lu-nav {
    padding-block: 1rem;
  }

  .lu-nav.is-stuck {
    padding-block: 0.7rem;
  }

  .lu-nav__inner {
    gap: 0.75rem;
  }

  .lu-brand {
    font-size: 1.15rem;
    gap: 0.4rem;
  }

  .lu-brand__dot {
    width: 7px;
    height: 7px;
    margin-bottom: 0.4rem;
  }

  .lu-nav__actions {
    gap: 0.4rem;
  }

  /* Thumbs, not cursors: the header controls clear 44px on phones */
  .lu-icon-btn,
  .lu-burger {
    width: 44px;
    height: 44px;
  }

  /* --- Drawer ----------------------------------------------------------- */

  .lu-drawer {
    padding-top: 5rem;
  }

  .lu-drawer__list > li > a,
  .lu-drawer__row > a {
    padding: 0.85rem 0;
    font-size: 1.35rem;
  }

  .lu-drawer__toggle {
    padding: 0.4rem;
  }

  /* The rail marks the level; padding and margin are owned by the collapse
     rules above, which a padding here would stop from closing fully. */
  .lu-drawer__sub {
    padding-left: 0.9rem;
    border-left: 1px solid var(--lu-accent-line);
  }

  .lu-drawer__sub.is-open {
    margin-bottom: 0.35rem;
  }

  .lu-drawer__sub a {
    padding: 0.6rem 0.75rem;
    font-size: 0.9rem;
  }

  /* --- Content ----------------------------------------------------------- */

  .lu-section {
    padding-block: 3.5rem;
  }

  .lu-section--tight {
    padding-block: 2.5rem;
  }

  .lu-sec-head {
    margin-bottom: 2rem;
  }

  .lu-hero {
    padding-top: 6.5rem;
  }

  .lu-hero__meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    margin-top: 2.25rem;
    padding-top: 1.5rem;
  }

  .lu-hero__meta dd {
    font-size: 0.95rem;
  }

  /* --- Buttons ------------------------------------------------------------
     .lu-btn goes full width here, which is right for a lone call to action
     but wrong for a pair sitting side by side or a small inline control. */

  .lu-btn {
    padding: 0.95rem 1.5rem;
  }

  .lu-btn--lg {
    padding: 1.05rem 1.5rem;
    font-size: 0.95rem;
  }

  /* A row of buttons stacks and each one fills the row */
  .d-flex.flex-wrap.gap-3 > .lu-btn,
  .d-flex.flex-wrap.gap-3 > .lu-btn--auto {
    width: 100%;
  }

  /* Pagination and filters stay inline. The slider arrows are drawn as circles,
     so they keep their own width -- width:auto flattens them into ellipses. */
  .lu-filters .lu-filter,
  .lu-switch button,
  nav[aria-label="Pagination"] .lu-filter {
    width: auto;
  }

  .lu-filters {
    gap: 0.45rem;
    margin-bottom: 1.75rem;
  }

  .lu-filter {
    padding: 0.5rem 0.95rem;
    font-size: 0.8rem;
  }

  /* Filter, pagination and billing pills reach 44px without growing sideways */
  .lu-filter,
  .lu-switch button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
  }

  .lu-brand {
    min-height: 44px;
  }

  /* A numbered pagination pill is as tall as it is wide */
  nav[aria-label="Pagination"] .lu-filter {
    min-width: 44px;
  }

  /* Breadcrumbs keep their tight line but gain a 44px hit area around it.
     The 0.6rem gap plus the "/" leaves room, so the boxes never overlap. */
  .lu-crumb a {
    display: inline-block;
    padding-block: 0.875rem;
    margin-block: -0.875rem;
    padding-inline: 0.3rem;
    margin-inline: -0.3rem;
  }

  /* An email or phone number is tapped, not clicked */
  .lu-contact-row a[href^="mailto:"],
  .lu-contact-row a[href^="tel:"] {
    display: inline-block;
    padding-block: 0.72rem;
    margin-block: -0.5rem;
  }

  .lu-member__social a {
    width: 44px;
    height: 44px;
  }

  .lu-toc a {
    padding-block: 0.72rem;
  }

  .lu-input[type="file"]::file-selector-button {
    min-height: 44px;
    padding-block: 0;
  }

  .lu-card .lu-footer__links a {
    display: block;
    padding-block: 0.82rem;
  }

  .lu-card .lu-footer__links {
    gap: 0;
  }

  /* --- Cards and rows ---------------------------------------------------- */

  .lu-card,
  .lu-price {
    padding: 1.35rem;
  }

  .lu-work__body {
    padding: 1.15rem;
    gap: 1rem;
  }

  .lu-circ {
    width: 44px;
    height: 44px;
  }

  .lu-row {
    padding-block: 1.35rem;
    gap: 0.5rem 1rem;
  }

  .lu-row__title {
    font-size: 1.2rem;
  }

  .lu-row__body {
    font-size: 0.9rem;
  }

  /* --- Footer ------------------------------------------------------------ */

  .lu-footer__top {
    gap: 0;
    padding-bottom: 1.5rem;
  }

  /* The brand block above the first column carries no divider of its own,
     so the social icons sit flush against the Studio column's top border. */
  .lu-social {
    margin-bottom: 1.5rem;
  }

  .lu-social a {
    width: 44px;
    height: 44px;
  }

  /* Four stacked link lists is a long scroll on a phone, so each column
     becomes a toggle, closed by default, matching the drawer. */
  .lu-footer__col {
    border-top: 1px solid var(--lu-line);
  }

  .lu-footer__col .lu-footer__head {
    margin: 0;
  }

  .lu-footer__toggle {
    cursor: pointer;
    padding-block: 1rem;
  }

  .lu-footer__chev {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid var(--lu-line);
    color: var(--lu-text-muted);
    transition: transform 0.35s var(--lu-ease), background 0.3s var(--lu-ease),
      border-color 0.3s var(--lu-ease), color 0.3s var(--lu-ease);
  }

  .lu-footer__chev svg {
    width: 13px;
    height: 13px;
  }

  .lu-footer__toggle[aria-expanded="true"] .lu-footer__chev {
    transform: rotate(180deg);
    background: var(--lu-accent-soft);
    border-color: var(--lu-accent-line);
    color: var(--lu-accent-ink);
  }

  .lu-footer__col .lu-footer__links {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.4s var(--lu-ease), opacity 0.3s var(--lu-ease),
      padding 0.4s var(--lu-ease);
  }

  .lu-footer__col .lu-footer__links.is-open {
    max-height: 26rem;
    opacity: 1;
    padding-bottom: 0.5rem;
  }

  /* The row, not just the words, is the tap target -- the list gap becomes padding */
  .lu-footer__col .lu-footer__links {
    gap: 0;
  }

  .lu-footer__col .lu-footer__links a {
    display: block;
    padding-block: 0.82rem;
  }

  .lu-footer__bottom .lu-ulink {
    padding-block: 0.7rem;
  }

  /* The subscribe control was an icon-only circle sitting beside a wide
     field; it read as an unlabelled blob. Full width under the input. */
  .lu-news {
    gap: 0.5rem;
  }

  .lu-news .lu-input {
    min-width: 0;
    flex: 1 1 100%;
  }

  .lu-news__go {
    flex: 1 1 100%;
    min-height: 44px;
    justify-content: center;
    padding-block: 0.8rem;
  }

  .lu-footer__bottom {
    flex-direction: column;
    gap: 0.75rem;
    text-align: center;
  }

  /* --- Overlays ---------------------------------------------------------- */

  /* At desktop width this sits in a corner. On a phone it spans the screen,
     so it has to stay shallow — it was covering the page's main call to
     action until dismissed. */
  .lu-cookie {
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0.75rem;
    width: auto;
    padding: 1rem 1.1rem;
  }

  .lu-cookie h2 {
    font-size: 0.95rem;
    margin-bottom: 0.3rem;
  }

  .lu-cookie p {
    font-size: 0.82rem;
    line-height: 1.5;
    margin-bottom: 0.85rem;
  }

  .lu-cookie__actions .lu-btn {
    padding: 0.7rem 1rem;
    font-size: 0.82rem;
    min-width: 0;
  }

  /* Pricing cards carried desktop-sized gaps around the figure */
  .lu-price__tag {
    margin: 1rem 0;
  }

  .lu-price__amount {
    font-size: 2.35rem;
  }

  .lu-price__list {
    padding-top: 1.15rem;
    margin-bottom: 1.5rem;
    gap: 0.7rem;
  }

  .lu-price__list li {
    font-size: 0.88rem;
  }

  .lu-to-top {
    width: 42px;
    height: 42px;
  }

  .lu-search {
    padding-top: 4.5rem;
  }
}

/* Very narrow phones: the wordmark yields before the controls do */
@media (max-width: 359.98px) {
  .lu-brand {
    font-size: 1rem;
  }

  .lu-nav__actions {
    gap: 0.25rem;
  }
}