/* Lalakai merge bridge — fonts, token unification, dark palette, shell helpers.
   Loaded last, after lalakai-core.css, lalakai-components.css,
   lalakai-pages.css and lalakai-base.css. */

/* ---------------------------------------------------------------- fonts */

@font-face {
  font-family: "STK Bureau Serif";
  src: url("../fonts/stk-bureau-book.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "STK Bureau Serif";
  src: url("../fonts/stk-bureau-medium.woff2") format("woff2");
  font-weight: 500 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Untitled Sans";
  src: url("../fonts/untitled-sans-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Untitled Sans";
  src: url("../fonts/untitled-sans-medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Untitled Sans";
  src: url("../fonts/untitled-sans-bold.woff2") format("woff2");
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono-medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------------------- token unification
   The core token vocabulary is canonical. The editorial variables are
   aliased onto it, and the display face is the serif while body,
   UI and mono use the sans and mono families. */

:root {
  --font-sans: "Untitled Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, Monaco, Consolas, monospace;
  --default-font-family: var(--font-sans);
  --default-mono-font-family: var(--font-mono);

  /* display face used by the editorial classes */
  --font-heading: "STK Bureau Serif", Georgia, serif;
  --font-body: "Untitled Sans", system-ui, sans-serif;

  /* alias editorial palette names onto the core tokens */
  --color-background: var(--color-mono-100);
  --color-text-primary: var(--color-primary);
  --color-text-secondary: color-mix(in srgb, var(--color-mono-900) 56%, transparent);
  --color-surface: var(--color-mono-000);
  --color-surface-alt: var(--color-mono-200);
  --color-button: var(--color-mono-900);
  --color-border: color-mix(in srgb, var(--color-mono-900) 6%, transparent);

  /* accent: the light blue sampled from the Hunter artwork. The core
     pri-800 token is repurposed as this accent so no purple remains. */
  --ll-accent: #5b93e2;
  --ll-accent-rgb: 91, 147, 226;
  --color-pri-800: var(--ll-accent);
  --color-pri-800-rgb: var(--ll-accent-rgb);
}

/* ------------------------------------------------------------ dark theme
   The core stylesheet ships a complete dark palette in lalakai-core.css under
   :root[data-theme=dark] / .dark; it wins for every token it defines, which
   is exactly what we want. The bridge only adds what it does not cover. */

:root[data-theme="dark"],
:root.dark {
  --ll-accent: #9cc4f2;
  --ll-accent-rgb: 156, 196, 242;
  --color-pri-800: var(--ll-accent);
  --color-pri-800-rgb: var(--ll-accent-rgb);
  color-scheme: dark;
}

/* -------------------------------------------------------------- selection
   The source sheets paint selection with --color-selection (a lavender
   pri-300) via `html ::selection`, which outranks a plain ::selection.
   Override it here, last-loaded and !important, with the accent blue. */

:root,
:root[data-theme="dark"],
:root.dark {
  --color-selection: var(--ll-accent) !important;
}

html ::selection,
html::selection {
  background: var(--ll-accent) !important;
  color: var(--color-background) !important;
}

html ::-moz-selection,
html::-moz-selection {
  background: var(--ll-accent) !important;
  color: var(--color-background) !important;
}

/* --------------------------------------------------------------- base */

body {
  background-color: var(--color-background);
  color: var(--color-primary);
  font-family: var(--font-sans);
}

:focus-visible {
  outline: 1px solid var(--color-pri-800);
  outline-offset: 3px;
}

/* ------------------------------------------------------------- shell
   --spacing-nav-width is set by the source site at runtime; give it a
   static value so the layout holds without their JS. */

@media (min-width: 768px) {
  :root {
    --spacing-nav-width: 180px;
  }
}

.ll-sidebar {
  display: flex;
  flex-direction: column;
}

.ll-brand-mark {
  display: block;
  height: 20px;
  width: 20px;
  object-fit: contain;
}

/* the header lockup: spark + Unbounded wordmark, inline SVG in currentColor
   so it takes the link's accent in both themes */
.ll-brand-lockup {
  display: block;
  height: 18px;
  width: auto;
}

.ll-brand-lockup--menu {
  height: 24px;
}

[data-theme="dark"] .ll-brand-mark,
.dark .ll-brand-mark {
  filter: invert(1);
}

/* nav indicator: the spark mark lives in the left gutter. It spins one
   turn when hovered and parks beside the active page. */

.ll-nav .link {
  position: relative;
  display: inline-block;
  z-index: 0;
  padding-left: 22px;
  margin-left: -22px;
  color: inherit;
  text-decoration: none;
  transition: color 0.12s ease;
}

.ll-nav .link::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  background-color: var(--color-pri-800);
  -webkit-mask: url("../logo/lalakai-mark-small-black.svg?v=1") center / contain no-repeat;
  mask: url("../logo/lalakai-mark-small-black.svg?v=1") center / contain no-repeat;
  opacity: 0;
  transform: none;
  transition: opacity 0.15s ease;
  pointer-events: none;
}

.ll-nav .link:not([aria-current="page"]):hover {
  color: var(--color-pri-800);
}

.ll-nav .link:not([aria-current="page"]):hover::before {
  opacity: 1;
  animation:
    ll-mark-in 0.72s cubic-bezier(0.22, 1, 0.36, 1),
    ll-mark-idle 7s linear 0.72s infinite;
}

.ll-nav .link[aria-current="page"] {
  color: var(--color-pri-800);
  font-weight: 500;
}

.ll-nav .link[aria-current="page"]::before {
  opacity: 1;
  transform: none;
  background-color: var(--color-primary);
}

@keyframes ll-mark-in {
  from {
    transform: rotate(-180deg) scale(0.5);
  }
  to {
    transform: rotate(0deg) scale(1);
  }
}

@keyframes ll-mark-idle {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ll-nav .link:not([aria-current="page"]):hover::before {
    animation: none;
    transform: none;
  }
}

/* ------------------------------------------------------- theme toggle */

.ll-theme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  width: 28px;
  cursor: pointer;
  border: 1px solid var(--color-mono-400);
  background: var(--color-mono-100);
  color: var(--color-primary);
  transition: box-shadow 0.1s ease, color 0.1s ease;
}

.ll-theme:hover {
  color: var(--color-pri-800);
  box-shadow: 1px 1px 0 0 var(--color-mono-300);
}

.ll-theme svg {
  display: block;
}

.ll-theme .ll-icon-sun {
  display: none;
}

[data-theme="dark"] .ll-theme .ll-icon-moon,
.dark .ll-theme .ll-icon-moon {
  display: none;
}

[data-theme="dark"] .ll-theme .ll-icon-sun,
.dark .ll-theme .ll-icon-sun {
  display: block;
}

/* ------------------------------------------------------ footer socials
   X and Hugging Face marks in the footer's bottom bar: bare icons, no box.
   28px square is the hit area only; the mark takes the brand colour on hover. */

.ll-social-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.ll-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  width: 28px;
  color: var(--color-primary);
  transition: color 0.1s ease;
}

.ll-social:hover {
  color: var(--color-pri-800);
}

.ll-social svg {
  display: block;
}

/* -------------------------------------------------------- mobile menu */

.ll-menu-button {
  cursor: pointer;
  border: 1px solid var(--color-mono-400);
  background: var(--color-mono-100);
  padding: 6px 10px;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--color-primary);
  transition: color 0.1s ease, box-shadow 0.1s ease;
}

.ll-menu-button:hover {
  color: var(--color-pri-800);
  box-shadow: 1px 1px 0 0 var(--color-mono-300);
}

.ll-mobile-menu[hidden] {
  display: none;
}

.ll-mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  background: var(--color-background);
  padding: 24px var(--spacing-page-left) 32px;
  overflow-y: auto;
}

.ll-mobile-menu a.ll-mobile-link {
  font-family: var(--font-heading);
  font-size: 30px;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--color-primary);
  text-decoration: none;
  padding: 6px 0;
}

.ll-mobile-menu a.ll-mobile-link[aria-current="page"] {
  color: var(--color-pri-800);
}

/* ------------------------------------------------------ page helpers */

.ll-figure {
  overflow: hidden;
  max-width: 600px;
  border: 1px solid var(--color-mono-300);
  background: var(--color-mono-200);
}

.ll-figure img {
  display: block;
  width: 100%;
  height: auto;
}

.ll-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid var(--color-divider-subtle);
  padding: 22px 0;
  text-decoration: none;
  color: inherit;
}

a.ll-row:hover .ll-row-title {
  color: var(--color-pri-800);
}

.ll-row-title {
  font-family: var(--font-heading);
  letter-spacing: -0.01em;
  transition: color 0.12s ease;
}

.ll-step {
  display: flex;
  gap: 24px;
  border-top: 1px solid var(--color-primary);
  padding-top: 16px;
}

.ll-step-index {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  color: var(--color-secondary);
  padding-top: 3px;
}

.ll-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--color-primary);
  background: var(--color-background);
  color: var(--color-primary);
  padding: 10px 18px;
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.ll-button:hover {
  background: var(--color-pri-800);
  border-color: var(--color-pri-800);
  color: var(--color-mono-000);
}

.ll-button-quiet {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--color-primary);
  padding-bottom: 2px;
  font-size: 14px;
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.12s ease, border-color 0.12s ease;
}

.ll-button-quiet:hover {
  color: var(--color-pri-800);
  border-color: var(--color-pri-800);
}

.ll-code {
  overflow-x: auto;
  border: 1px solid var(--color-mono-300);
  background: var(--color-mono-200);
  padding: 18px 20px;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-secondary);
}

/* model cards */

.ll-card {
  text-decoration: none;
  color: inherit;
}

.ll-card .ll-figure {
  transition: border-color 0.12s ease;
}

.ll-card:hover .ll-figure {
  border-color: var(--color-mono-400);
}

.ll-card-action {
  border-bottom: 1px solid var(--color-primary);
  padding-bottom: 2px;
  color: var(--color-primary);
  transition: color 0.12s ease, border-color 0.12s ease;
}

.ll-card:hover .ll-card-action {
  color: var(--color-pri-800);
  border-color: var(--color-pri-800);
}

/* model card: art image, live mesh above it, crisp HTML copy on top */

.ll-card-media {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  aspect-ratio: 503 / 260;
  border: 1px solid var(--color-mono-300);
  background: var(--color-mono-200);
  transition: border-color 0.12s ease;
}

.ll-card:hover .ll-card-media {
  border-color: var(--color-mono-400);
}

.ll-card-bg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ll-card-media .ll-mesh {
  z-index: 1;
  opacity: 1;
  filter: blur(0.2px);
}

/* model art: a WebGL piece per model (assets/js/art.js) fills the
   artwork area; the copy and the sheen sit above it. Until its first frame,
   or without WebGL, the host's pale ground shows instead. */

.ll-card-media.ll-art-host {
  background: linear-gradient(160deg, #f2f8ff 0%, #cfe2fb 100%);
}

.ll-art {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.ll-art.is-ready {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .ll-art {
    transition: none;
  }
}

/* home hero: a live glossy surface (art.js, data-art="mesh") with the title
   set as live text on top. The letters rise in one by one, and the title
   leans a little toward the cursor (--px and --py, set by art.js). */

.ll-hero-art {
  position: relative;
  aspect-ratio: 1520 / 1035;
  container-type: inline-size;
  background: #cfe4ff;
}

.ll-hero-art::after {
  z-index: 4;
}

.ll-title-card {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0 6%;
  text-align: center;
  color: #111;
  pointer-events: none;
}

.ll-title-lead {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(40px, 6.4vw, 104px);
  font-size: clamp(40px, 9.5cqi, 104px);
  line-height: 1;
  letter-spacing: -0.01em;
  text-shadow: 0 0 36px rgba(255, 255, 255, 0.55);
  transform: translate3d(calc(var(--px, 0) * 10px), calc(var(--py, 0) * 6px), 0);
}

.ll-title-letter {
  display: inline-block;
  animation: ll-title-letter 1s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: calc(0.15s + var(--i, 0) * 0.07s);
}

.ll-display[data-title-rise] .ll-title-letter {
  animation-delay: calc(0.1s + var(--i, 0) * 0.018s);
}

.ll-title-word {
  display: inline-block;
  white-space: nowrap;
}

.ll-title-models {
  display: block;
  margin-top: 0.3em;
  font-family: var(--font-heading);
  font-size: clamp(16px, 2.6vw, 40px);
  font-size: clamp(16px, 3.9cqi, 40px);
  line-height: 1.2;
  letter-spacing: 0.05em;
  transform: translate3d(calc(var(--px, 0) * 5px), calc(var(--py, 0) * 4px), 0);
}

.ll-title-models-line {
  display: block;
  animation: ll-title-rise 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.9s both;
}

.ll-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;
}

@keyframes ll-title-letter {
  from {
    opacity: 0;
    transform: translate3d(0, 0.5em, 0) rotate(6deg);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

@keyframes ll-title-rise {
  from {
    opacity: 0;
    transform: translate3d(0, 0.5em, 0);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ll-title-letter,
  .ll-title-models-line {
    animation: none;
  }
}

.ll-card-cover {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.ll-card-media.ll-sheen::after {
  z-index: 4;
}

.blog-title-link {
  color: inherit;
  text-decoration: none;
}

.blog-title-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ll-card-copy {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.1rem 1.3rem;
  color: #000;
  pointer-events: none;
  /* light halo so the animated lines/dots sit behind the text, not through it.
     Same stroke thickness — only separation, no faux bold. */
  text-shadow:
    0 0 16px rgba(255, 255, 255, 0.9),
    0 0 4px rgba(255, 255, 255, 0.95);
}

.ll-weights {
  position: relative;
  z-index: 5;
  align-self: flex-start;
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.45rem 0.9rem;
  font-size: 13px;
  line-height: 1;
  color: #191919;
  text-decoration: none;
  background: #ffffff;
  border: 1px solid rgba(25, 25, 25, 0.45);
  pointer-events: auto;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.ll-weights:hover {
  background: #eef4fc;
  border-color: #191919;
}

.ll-weights:focus-visible {
  outline: 2px solid var(--color-pri-800);
  outline-offset: 2px;
}

.ll-card-title {
  font-family: var(--font-heading);
  font-size: clamp(19px, 1.7vw, 26px);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.ll-card-desc {
  max-width: 46ch;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.4;
  font-weight: 400;
  font-synthesis: none;
  color: #000;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.ll-card-desc .ll-u {
  font-weight: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.ll-card-params {
  font-size: 13px;
  line-height: 1.4;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.78);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.ll-card-params .ll-num {
  color: inherit;
  font-weight: inherit;
}

/* home layout: hero grid, info strip, section rhythm */

.ll-hero {
  display: grid;
  gap: 40px;
}

@media (min-width: 1200px) {
  .ll-hero {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 64px;
    align-items: start;
  }
  /* grow the hero figure left and down only: the right and top edges stay put */
  .ll-hero > .ll-figure {
    width: calc(100% + 36px);
    margin-left: -36px;
  }
}

/* home display headline: sized to hold its three lines inside the
   narrowest desktop column */

.ll-display {
  font-size: clamp(40px, 3.4vw, 48px);
  line-height: 1.06;
  letter-spacing: -0.02em;
}

@media (max-width: 767px) {
  .ll-display {
    font-size: 30px;
    line-height: 1.15;
  }
}

.ll-sections {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 56px;
}

@media (min-width: 768px) {
  .ll-sections {
    gap: 88px;
  }
}

/* cursor-tracked sheen over an image: a white highlight and a blue wash
   follow the pointer while it is over the figure */

.ll-sheen {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* live mesh flow: a WebGL canvas (assets/js/mesh.js) paints several
   domain-warped colour fields that drift, merge and split, blended into the
   artwork so its type stays legible. On the model cards the gas is a
   visible wind the pointer can push, and the picture stays readable. */

.ll-mesh {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mix-blend-mode: soft-light;
  opacity: 0.95;
}

.ll-sheen::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(
      140px circle at var(--mx, 50%) var(--my, 50%),
      rgba(255, 255, 255, 0.42),
      rgba(255, 255, 255, 0) 70%
    ),
    radial-gradient(
      215px circle at var(--mx, 50%) var(--my, 50%),
      rgba(91, 147, 226, 0.2),
      rgba(91, 147, 226, 0) 75%
    );
  opacity: 0;
  transition: opacity 0.3s ease;
}

.ll-sheen:hover::after {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .ll-sheen::after {
    transition: none;
  }
}

/* missing arbitrary utilities used by the pages (pinned here so the
   static Tailwind bundles do not have to contain them) */

.gap-24 {
  gap: 6rem;
}

.text-\[19px\] {
  font-size: 19px;
}
.text-\[22px\] {
  font-size: 22px;
}
.text-\[28px\] {
  font-size: 28px;
}
.text-\[32px\] {
  font-size: 32px;
}
.mt-20 {
  margin-top: 5rem;
}
.gap-2\.5 {
  gap: 0.625rem;
}
.pt-6 {
  padding-top: 1.5rem;
}
.pt-5 {
  padding-top: 1.25rem;
}
.pt-10 {
  padding-top: 2.5rem;
}
.pt-16 {
  padding-top: 4rem;
}
.max-w-\[16ch\] {
  max-width: 16ch;
}
.max-w-\[18ch\] {
  max-width: 18ch;
}
.max-w-\[24ch\] {
  max-width: 24ch;
}
.max-w-\[28ch\] {
  max-width: 28ch;
}
.max-w-\[34ch\] {
  max-width: 34ch;
}
.max-w-\[52ch\] {
  max-width: 52ch;
}
.max-w-\[62ch\] {
  max-width: 62ch;
}
.max-w-\[46ch\] {
  max-width: 46ch;
}
@media (min-width: 768px) {
  .md\:pt-4 {
    padding-top: 1rem;
  }
  .md\:pt-8 {
    padding-top: 2rem;
  }
  .md\:pt-10 {
    padding-top: 2.5rem;
  }
  .md\:pt-12 {
    padding-top: 3rem;
  }
  .md\:pt-13 {
    padding-top: 3.25rem;
  }
  .md\:pt-14 {
    padding-top: 3.5rem;
  }
  .md\:pt-32 {
    padding-top: 8rem;
  }
}
@media (min-width: 768px) {
  .md\:pt-16 {
    padding-top: 4rem;
  }
}

@media (max-width: 767px) {
  .text-title {
    font-size: var(--text-heading);
    line-height: 1.15;
  }
}

/* nudge the home hero down by a hair (md:pt-13 = 3.25rem, +2px) */
@media (min-width: 768px) {
  .ll-hero {
    padding-top: 3.375rem;
  }
}


/* careers empty state: a calm panel that says there is nothing open yet */

.ll-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.15rem;
  max-width: 55ch;
  padding: 2.5rem clamp(1.5rem, 3vw, 2.75rem);
  border: 1px solid var(--color-divider-subtle);
  background: var(--color-mono-100);
}

.ll-status {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 13px;
  line-height: 1;
  color: var(--color-secondary);
}

.ll-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-mono-400);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-mono-400) 18%, transparent);
  animation: ll-status 2.6s ease-in-out infinite;
}

@keyframes ll-status {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.4;
    transform: scale(0.78);
  }
}

.ll-empty-title {
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.ll-empty-body {
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-secondary);
}

@media (prefers-reduced-motion: reduce) {
  .ll-status-dot {
    animation: none;
  }
}

/* careers hero: copy on the left, a live mesh panel on the right */

.ll-careers {
  display: grid;
  gap: 40px;
}

.ll-careers-main {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 1.5rem;
}

.ll-careers-visual {
  position: relative;
  overflow: hidden;
  min-height: 300px;
  border: 1px solid var(--color-mono-300);
  background: var(--color-mono-200);
}

.ll-careers-visual .ll-mesh {
  mix-blend-mode: normal;
  opacity: 1;
}

.ll-careers-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(
    130% 100% at 50% 36%,
    rgba(10, 30, 70, 0) 52%,
    rgba(10, 30, 70, 0.3) 100%
  );
}

.ll-careers-visual.ll-sheen::after {
  z-index: 4;
}

.ll-careers-mark-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  width: 38%;
  max-width: 190px;
  aspect-ratio: 1;
  pointer-events: none;
  transform: translate(-50%, -50%) translate(var(--mark-x, 0px), var(--mark-y, 0px))
    rotate(var(--mark-rot, 0deg));
  will-change: transform;
}

.ll-careers-mark {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0.55;
  animation: ll-mark-spin 60s linear infinite;
  filter: drop-shadow(0 2px 10px rgba(8, 24, 56, 0.28));
  transition: opacity 0.3s ease;
}

.ll-careers-visual:hover .ll-careers-mark {
  opacity: 0.9;
}

@keyframes ll-mark-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ll-careers-mark {
    animation: none;
  }
  .ll-careers-mark-wrap {
    transition: none;
    transform: translate(-50%, -50%);
  }
}

@media (min-width: 1200px) {
  .ll-careers {
    grid-template-columns: minmax(0, 6.5fr) minmax(0, 4.2fr);
    gap: 48px;
    align-items: stretch;
  }
  .ll-careers-visual {
    margin-top: 64px;
  }
}

/* blog: featured post + grid of recent posts */

.ll-featured {
  display: grid;
  gap: 40px;
  align-items: center;
}

.ll-featured-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
}

.ll-post-meta {
  font-size: 14px;
  line-height: 1.4;
  color: var(--color-secondary);
}

.ll-featured-title {
  font-family: var(--font-heading);
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1.02;
  letter-spacing: -0.03em;
}

.ll-featured-desc {
  max-width: 42ch;
  font-size: 17px;
  line-height: 1.6;
  color: var(--color-secondary);
}

.ll-featured-visual {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 2 / 1;
  border-radius: 16px;
  border: 1px solid var(--color-mono-300);
  background: var(--color-mono-200);
}

.ll-featured-visual .ll-mesh {
  mix-blend-mode: normal;
  opacity: 1;
}

.ll-featured-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(
    130% 100% at 50% 40%,
    rgba(10, 30, 70, 0) 55%,
    rgba(10, 30, 70, 0.3) 100%
  );
}

.ll-featured-visual.ll-sheen::after {
  z-index: 4;
}

.ll-featured-label {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: clamp(26px, 3vw, 42px);
  letter-spacing: -0.02em;
  color: #ffffff;
  text-shadow: 0 2px 24px rgba(8, 24, 56, 0.45);
  pointer-events: none;
}

.ll-post-grid {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ll-post {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  color: inherit;
  text-decoration: none;
}

.ll-post-thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid var(--color-mono-300);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.ll-post:hover .ll-post-thumb {
  transform: scale(1.015);
}

.ll-post-thumb-image,
.ll-home-post-thumb-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ll-post-thumb-label {
  position: absolute;
  top: 50%;
  left: 1.15rem;
  z-index: 2;
  transform: translateY(-50%);
  color: #ffffff;
  font-family: var(--font-heading);
  font-size: 20px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-shadow: 0 1px 14px rgba(6, 20, 50, 0.4);
}

.ll-post-thumb-label--center {
  left: 50%;
  width: 100%;
  padding: 0 1rem;
  text-align: center;
  transform: translate(-50%, -50%);
}

.ll-post-title {
  font-family: var(--font-heading);
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  transition: color 0.15s ease;
}

.ll-post:hover .ll-post-title {
  color: var(--color-pri-800);
}

.ll-chev {
  display: inline-block;
  vertical-align: -1px;
  transition: transform 0.18s ease;
}

.ll-post:hover .ll-chev,
.ll-readmore:hover .ll-chev {
  transform: translateX(3px);
}

.ll-readmore {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.6rem;
  padding: 0.65rem 1.15rem;
  border: 1px solid var(--color-mono-500);
  border-radius: 999px;
  font-size: 15px;
  line-height: 1;
  color: var(--color-primary);
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.ll-readmore:hover {
  background: var(--color-mono-100);
  border-color: var(--color-primary);
}

.ll-thumb-a {
  background:
    radial-gradient(120% 120% at 24% 18%, #eaf4ff 0%, rgba(234, 244, 255, 0) 50%),
    radial-gradient(120% 120% at 84% 30%, #7db4f0 0%, rgba(125, 180, 240, 0) 58%),
    linear-gradient(135deg, #4f8fe0 0%, #2b5fb8 100%);
}

.ll-thumb-b {
  background:
    radial-gradient(120% 120% at 78% 22%, #eaf2ff 0%, rgba(234, 242, 255, 0) 50%),
    radial-gradient(120% 120% at 16% 80%, #6fa6e6 0%, rgba(111, 166, 230, 0) 58%),
    linear-gradient(135deg, #3f72c4 0%, #172a5e 100%);
}

.ll-thumb-c {
  background:
    radial-gradient(120% 120% at 30% 82%, #e8f7ff 0%, rgba(232, 247, 255, 0) 50%),
    radial-gradient(120% 120% at 84% 18%, #67c4f0 0%, rgba(103, 196, 240, 0) 58%),
    linear-gradient(135deg, #4aa8e6 0%, #1f6fc0 100%);
}

.ll-thumb-d {
  background:
    radial-gradient(120% 120% at 24% 26%, #dce9ff 0%, rgba(220, 233, 255, 0) 48%),
    radial-gradient(130% 130% at 80% 78%, #4f86e0 0%, rgba(79, 134, 224, 0) 60%),
    linear-gradient(135deg, #3465be 0%, #101f4c 100%);
}

@media (min-width: 1024px) {
  .ll-post-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .ll-featured {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.6fr);
    gap: 72px;
  }
}

/* looping video used as a post visual */
.ll-media-video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* blog: nudge the whole page a touch smaller */
.ll-blog {
  zoom: 0.9;
}

/* homepage: concise summary + slim blog strip */

.ll-about {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.ll-about-lead {
  max-width: 62ch;
  font-size: 17px;
  line-height: 1.65;
  color: var(--color-secondary);
}

.ll-about-grid {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--color-divider-subtle);
}

.ll-about-item {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  padding: 22px 0;
  border-top: 1px solid var(--color-divider-subtle);
  color: inherit;
  text-decoration: none;
}

.ll-about-item:hover .ll-card-action {
  color: var(--color-pri-800);
  border-color: var(--color-pri-800);
}

.ll-about-visual {
  position: relative;
  display: block;
  width: 84px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--color-mono-300);
}

.ll-about-visual:not(.ll-thumb-a):not(.ll-thumb-d) {
  background: var(--color-mono-200);
}

.ll-about-visual .ll-card-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ll-about-body {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.ll-about-index {
  font-size: 13px;
  line-height: 1;
  color: var(--color-secondary);
}

.ll-home-posts {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.ll-home-posts-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.ll-home-post-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ll-home-post {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 10px;
  color: inherit;
  text-decoration: none;
}

.ll-home-post-thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid var(--color-mono-300);
  border-radius: 12px;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.ll-home-post:hover .ll-home-post-thumb {
  transform: scale(1.015);
}

.ll-home-post-meta {
  font-size: 12px;
  line-height: 1.4;
  color: var(--color-secondary);
}

.ll-home-post-title {
  font-family: var(--font-heading);
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  transition: color 0.15s ease;
}

.ll-home-post:hover .ll-home-post-title {
  color: var(--color-pri-800);
}

@media (min-width: 900px) {
  .ll-home-post-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .ll-home-post-thumb {
    transition: none;
  }
}

/* Desktop sidebar type: keep the utility markup, with a slightly larger size. */
.ll-nav {
  font-size: 16px;
  line-height: 19px;
}

/* Homepage hero actions only: slightly larger than the global buttons. */
.ll-hero-actions .ll-button {
  padding: 12px 22px;
  font-size: 15px;
}