/* =============================================================================
   LITTLE MOO HOSTING, HOMEPAGE

   Loaded on "/" only. Scoped under .lm or body.home.

   One system, used everywhere on the page:
     · one container width and one gutter
     · one heading scale (Syne for headings, Inter for everything else)
     · one button family, 8px radius, never a pill
     · one panel: a 1px bordered container with internal dividers, 12px
       radius. Groups of related items live inside one panel rather than
       floating as separate cards.
     · one section rhythm
   ============================================================================= */

.lm {
  --lm-shell: 1200px;
  --lm-gut:   clamp(1.25rem, 4vw, 2.5rem);
  --lm-band:  clamp(3.25rem, 5.5vw, 5.5rem);

  --lm-r:     12px;
  --lm-r-sm:  8px;

  --lm-d1:    clamp(2.05rem, 1.5rem + 1.95vw, 3rem);
  --lm-d2:    clamp(1.7rem, 1.4rem + 1.25vw, 2.4rem);
  --lm-d3:    clamp(1.15rem, 1.05rem + .35vw, 1.35rem);

  --lm-display: "Syne", "Inter", system-ui, sans-serif;

  --lm-ground:  var(--warm);
  --lm-panel:   var(--surface);
  --lm-inset:   var(--surface-soft);
  --lm-line:    var(--border);
  --lm-ink:     var(--text);
  --lm-ink-2:   var(--text-soft);
  --lm-ink-3:   var(--text-muted);
  --lm-brand:   var(--brand);
  --lm-fill:    var(--brand-fill);
  --lm-deep:    #100D24;
}

:root[data-theme="dark"] .lm { --lm-deep: #17122B; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) .lm { --lm-deep: #17122B; }
}

.lm { background: var(--lm-ground); color: var(--lm-ink); }

.lm-shell {
  width: 100%; max-width: var(--lm-shell); margin-inline: auto;
  padding-inline: var(--lm-gut);
}


/* ── The header is the ordinary site bar on this route too ───────────────
   The previous homepage pulled the page up under a transparent header and
   forced the dark-ground logo onto it. Both are undone here, so each theme
   gets the supplied artwork that belongs to its ground. Neither logo file
   is altered. ──────────────────────────────────────────────────────────── */

body.home .top {
  position: sticky; top: 0; margin-bottom: 0;
  background: var(--header-ground); border-bottom: 1px solid var(--warm-line);
}
body.home .top.is-stuck { background: var(--header-ground); border-bottom-color: var(--warm-line); }

body.home .nav__link,
body.home .nav__signin,
body.home .uk,
body.home .nav__toggle { color: var(--on-warm-2); }
body.home .nav__link:hover,
body.home .nav__item:hover .nav__link,
body.home .nav__signin:hover { color: var(--purple); }
body.home .nav__link[aria-current] { color: var(--on-warm); }
body.home .top__menu { background: var(--warm-lift); border-color: var(--warm-line); color: var(--on-warm); }

body.home .mark .mark__light { display: block; }
body.home .mark .mark__dark  { display: none; }
:root[data-theme="dark"] body.home .mark .mark__light { display: none; }
:root[data-theme="dark"] body.home .mark .mark__dark  { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) body.home .mark .mark__light { display: none; }
  :root:not([data-theme="light"]):not([data-theme="dark"]) body.home .mark .mark__dark  { display: block; }
}


/* ── Type ───────────────────────────────────────────────────────────────── */

.lm h1, .lm h2, .lm h3 {
  font-family: var(--lm-display); font-weight: 700;
  line-height: 1.1; letter-spacing: -.02em; color: var(--lm-ink);
  text-wrap: balance;
}
.lm h2 { font-size: var(--lm-d2); }
.lm h3 { font-size: var(--lm-d3); letter-spacing: -.01em; }
.lm p  { margin: 0; }

/* The eyebrow and the button family are defined in hero.css, which every
   route loads, because the hero uses both. */

.lm-link {
  display: inline-flex; align-items: center; gap: .45rem; min-height: var(--tap);
  font-size: var(--t-small); font-weight: 600; color: var(--lm-brand);
  text-decoration: none; text-underline-offset: 4px;
}
.lm-link:hover { text-decoration: underline; }
.lm-link svg { transition: transform var(--fast) var(--ease); }
.lm-link:hover svg { transform: translateX(3px); }


/* ── Section heads ──────────────────────────────────────────────────────── */

.lm-head {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 1rem clamp(1.5rem, 4vw, 4rem); align-items: end;
  margin-bottom: clamp(1.75rem, 3.5vw, 3rem);
}
.lm-head__lede { font-size: var(--t-body); line-height: 1.65; color: var(--lm-ink-2); max-width: 52ch; }
.lm-head__note { margin-top: .75rem; font-size: var(--t-small); line-height: 1.6; color: var(--lm-ink-3); max-width: 56ch; }
.lm-head--centre { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
.lm-head--centre .lm-head__lede { text-align: center; }

@media (max-width: 880px) { .lm-head { grid-template-columns: minmax(0, 1fr); align-items: start; } }

/* ── The panel: one bordered container, dividers inside ─────────────────── */

.lm-panel {
  border: 1px solid var(--lm-line); border-radius: var(--lm-r);
  background: var(--lm-panel); overflow: hidden;
}


/* =======================================================================
   1 - HERO

   Copy, both actions, the domain search and the reassurance points on the
   left; the diced portrait of Missie on the right.

   The portrait is ported from "Diced Hero Section" by Maxim Bortnikov
   (https://21st.dev/@maxim.bort.devel/components/diced-hero-section), which
   credits the mask technique to https://codepen.io/t_afif/pen/LEPBYvK.
   Preserved verbatim: the 2x2 square grid at 20px gutter and 20px radius,
   and the four inverse-radius masks, so the panels lock together instead of
   sitting apart.
   ======================================================================= */

/* ── The hero ────────────────────────────────────────────────────────────
   The hero itself is no longer defined here. It is a site-wide component in
   assets/css/hero.css, which every non-legal page loads, so the homepage and
   the inner pages are literally the same object rather than two designs that
   resemble each other. What stays below belongs to this route only: the
   domain search that sits inside the homepage's hero, and the reveal
   animation the homepage script drives.

   This region also carried a duplicated, half-pasted copy of the hero media
   rules nested inside a `max-width: 560px` query, which left the stylesheet
   with an unbalanced brace and the phone rules inert. Removing the hero from
   this file removes that too.
   ──────────────────────────────────────────────────────────────────────── */


html.js [data-reveal] { opacity: 0; transform: translateY(12px); }
html.js [data-reveal].is-in {
  opacity: 1; transform: none;
  transition: opacity .5s var(--ease) calc(var(--n, 0) * .1s),
              transform .5s var(--ease) calc(var(--n, 0) * .1s);
}
/* The rule draws itself in on this route, where the reveal script runs.
   It is keyed to [data-reveal] so a page without that script never hides
   it. */
html.js .lm-hero__rule[data-reveal] { transform: scaleX(0); }
html.js .lm-hero__rule[data-reveal].is-in {
  transform: none;
  transition: transform .5s var(--ease) calc(var(--n, 0) * .1s);
}


/* -- The domain search ------------------------------------------------
   A functional control. The interaction pattern is after Kokonut UI's
   Action Search Bar; it is not one of the component adaptations.       */

   A functional control. The interaction pattern is after Kokonut UI's
   Action Search Bar; it is not one of the component adaptations.       */

.lm-find { position: relative; z-index: 20; width: 100%; max-width: 34rem; text-align: left; }
.lm-find__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .45rem; }
.lm-find__label { font-size: var(--t-micro); font-weight: 600; color: var(--lm-ink-3); }

.lm-find__modes { display: inline-flex; border: 1px solid var(--lm-line); border-radius: 7px; overflow: hidden; }
.lm-find__mode {
  min-height: 30px; padding: 0 .7rem; border: 0; background: var(--lm-panel); cursor: pointer;
  font-family: var(--sans); font-size: var(--t-micro); font-weight: 600; color: var(--lm-ink-3);
  transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.lm-find__mode + .lm-find__mode { border-left: 1px solid var(--lm-line); }
.lm-find__mode.is-on { background: var(--lm-fill); color: #fff; }

.lm-find__field {
  display: flex; align-items: center; gap: .5rem;
  padding: .4rem .4rem .4rem 1rem;
  border: 1px solid var(--border-strong); border-radius: 10px; background: var(--lm-panel);
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.lm-find__field:focus-within { border-color: var(--lm-brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.lm-find__field input {
  flex: 1 1 auto; min-width: 0; padding: .5rem 0; border: 0; background: none;
  font-family: var(--sans); font-size: var(--t-body); color: var(--lm-ink);
}
.lm-find__field input::placeholder { color: var(--lm-ink-3); }
.lm-find__field input:focus { outline: none; }

.lm-find__glyph { position: relative; flex: none; width: 18px; height: 18px; overflow: hidden; color: var(--lm-ink-3); }
.lm-find__glyph svg { position: absolute; inset: 0; width: 18px; height: 18px; transition: transform .2s var(--ease), opacity .2s var(--ease); }
.lm-find__send { transform: translateY(-20px); opacity: 0; }
.lm-find.is-typed .lm-find__search { transform: translateY(20px); opacity: 0; }
.lm-find.is-typed .lm-find__send { transform: none; opacity: 1; }
.lm-find__go { flex: none; }

.lm-find__panel {
  position: absolute; left: 0; right: 0; top: calc(100% + .35rem); z-index: 40;
  overflow: hidden; border: 1px solid var(--lm-line); border-radius: 10px;
  background: var(--lm-panel); box-shadow: 0 18px 40px -18px rgba(22, 19, 43, .38);
}
html.js .lm-find__panel { height: 0; opacity: 0; transition: height .4s var(--ease), opacity .25s var(--ease); }
html.js .lm-find__panel.is-open { opacity: 1; }
.lm-find__panel ul { margin: 0; padding: .35rem; list-style: none; }
.lm-find__panel li button {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center; gap: .6rem; width: 100%;
  padding: .5rem .6rem; border: 0; border-radius: 6px; background: none; cursor: pointer;
  text-align: left; font-family: var(--sans);
  transition: background-color var(--fast) var(--ease);
}
.lm-find__panel li button:hover,
.lm-find__panel li button:focus-visible { background: var(--lm-inset); }
.lm-find__panel li img { width: auto; height: 16px; opacity: .85; }
.lm-find__name { font-size: var(--t-small); font-weight: 600; color: var(--lm-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lm-find__ext  { font-size: var(--t-micro); color: var(--lm-ink-3); }
.lm-find__meta { font-size: var(--t-micro); color: var(--lm-ink-3); text-align: right; }

html.js .lm-find__panel li { opacity: 0; transform: translateY(20px); }
html.js .lm-find__panel.is-open li {
  opacity: 1; transform: none;
  transition: opacity .3s var(--ease) calc(var(--n) * .06s), transform .3s var(--ease) calc(var(--n) * .06s);
}

.lm-find__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin-top: .2rem; padding: .6rem .95rem; border-top: 1px solid var(--lm-line);
  font-size: var(--t-micro); color: var(--lm-ink-3);
}


@media (max-width: 899px) {
  .lm-find { max-width: none; }
}
@media (max-width: 560px) {
  .lm-find__top { flex-direction: column; align-items: flex-start; gap: .5rem; }
  .lm-find__go { padding-inline: 1rem; }
  .lm-find__panel li button { grid-template-columns: auto minmax(0, 1fr) auto; }
  .lm-find__ext { display: none; }
}



/* =======================================================================
   2 - SERVICES - ported from "Layout Grid"
   Manu Arora / Aceternity UI
   https://21st.dev/@manuarora700/components/layout-grid

   Preserved: the uneven bento of photographic panels; selecting one makes
   it grow to dominate while the rest fall back and dim; the dark veil over
   the chosen panel; its content rising in from below over 0.3s easeInOut.
   The layout animation is done by transitioning the grid tracks, which
   keeps every panel on screen instead of hiding five behind a scrim.
   ======================================================================= */

.lm-svc { padding: var(--lm-band) 0; }

.lm-bento {
  --c1: 1fr; --c2: 1fr; --c3: 1fr;
  --r1: 1fr; --r2: 1fr; --r3: 1fr;
  display: grid;
  grid-template-columns: var(--c1) var(--c2) var(--c3);
  grid-template-rows: var(--r1) var(--r2) var(--r3);
  gap: clamp(.6rem, 1.2vw, 1rem);
  height: clamp(34rem, 62vw, 46rem);
  margin: 0; padding: 0; list-style: none;
  transition: grid-template-columns .45s var(--ease), grid-template-rows .45s var(--ease);
}

.lm-tile {
  position: relative; overflow: hidden; border-radius: var(--lm-r);
  background: var(--lm-deep); min-width: 0; min-height: 0;
  transition: opacity .3s var(--ease), filter .3s var(--ease);
}
/* The uneven bento: two panels take a double column, the rest a single. */
.lm-tile--ashford   { grid-column: 1 / span 2; grid-row: 1; }
.lm-tile--kingsley  { grid-column: 3;          grid-row: 1; }
.lm-tile--alderley  { grid-column: 1;          grid-row: 2; }
.lm-tile--hawthorne { grid-column: 2 / span 2; grid-row: 2; }
.lm-tile--ellistone { grid-column: 1 / span 2; grid-row: 3; }
.lm-tile--ripley    { grid-column: 3;          grid-row: 3; }

.lm-tile__pic { position: absolute; inset: 0; }
.lm-tile__pic .ph,
.lm-tile__pic img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.lm-tile__veil {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 8, 20, .18) 0%, rgba(10, 8, 20, .5) 46%, rgba(10, 8, 20, .88) 100%);
  transition: opacity .3s var(--ease);
}
.lm-bento.has-open .lm-tile:not(.is-open) { opacity: .55; filter: saturate(.7); }
.lm-tile.is-open .lm-tile__veil { background: linear-gradient(105deg, rgba(10, 8, 20, .92) 0%, rgba(10, 8, 20, .78) 46%, rgba(10, 8, 20, .42) 100%); }

.lm-tile__face {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  display: flex; flex-direction: column; align-items: flex-start; gap: .2rem;
  padding: clamp(.9rem, 1.8vw, 1.4rem);
  border: 0; background: none; cursor: pointer; text-align: left; width: 100%;
  font-family: var(--sans); color: #fff;
}
.lm-tile__face::after { content: ""; position: absolute; inset: 0; }
.lm-tile__face:focus-visible { outline: 3px solid var(--accent); outline-offset: -5px; }
.lm-tile__cat { font-size: var(--t-eyebrow); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #C9BCFF; }
.lm-tile__name {
  font-family: var(--lm-display); font-weight: 700;
  font-size: clamp(1.25rem, 1rem + .9vw, 1.9rem); line-height: 1.05; letter-spacing: -.02em; color: #fff;
}
.lm-tile__price { font-size: var(--t-small); font-weight: 600; color: #E7E2F4; }
.lm-tile__price span { font-weight: 400; color: #B7AEDA; }

.lm-tile__more {
  position: absolute; inset: auto 0 0 0; z-index: 3;
  padding: clamp(.9rem, 1.8vw, 1.4rem);
  color: #E7E2F4; pointer-events: none;
}
html.js .lm-tile__more { opacity: 0; transform: translateY(100px); transition: opacity .3s ease-in-out, transform .3s ease-in-out; }
html.js .lm-tile.is-open .lm-tile__more { opacity: 1; transform: none; pointer-events: auto; }
html.js .lm-tile.is-open .lm-tile__face { pointer-events: auto; }
html.js .lm-tile.is-open .lm-tile__face::after { display: none; }

.lm-tile__sum { font-size: var(--t-small); line-height: 1.55; max-width: 42ch; }
.lm-tile__pts { display: grid; gap: .35rem; margin: .8rem 0 1rem; padding: 0; list-style: none; }
.lm-tile__pts li { display: flex; align-items: flex-start; gap: .5rem; font-size: var(--t-micro); color: #CFC8E4; }
.lm-tile__pts svg { flex: none; width: 15px; height: 15px; margin-top: .1rem; color: #9B82FF; }

/* When a panel is open its face rides above its own description. */
html.js .lm-tile.is-open .lm-tile__face { position: relative; inset: auto; }
html.js .lm-tile.is-open { display: flex; flex-direction: column; justify-content: flex-end; }
html.js .lm-tile.is-open .lm-tile__more { position: relative; inset: auto; padding-top: 0; }

.lm-svc__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem; margin-top: 1.5rem; padding: 1.1rem 1.35rem;
  border: 1px dashed var(--border-strong); border-radius: var(--lm-r);
  font-size: var(--t-small); color: var(--lm-ink-2);
}

@media (max-width: 900px) {
  .lm-bento { height: auto; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; transition: none; }
  .lm-tile { grid-column: 1 !important; grid-row: auto !important; min-height: 15rem; }
  html.js .lm-tile__more { position: relative; inset: auto; opacity: 1; transform: none; pointer-events: auto; }
  html.js .lm-tile .lm-tile__face { position: relative; inset: auto; }
  html.js .lm-tile { display: flex; flex-direction: column; justify-content: flex-end; }
  html.js .lm-tile .lm-tile__face::after { display: none; }
  .lm-bento.has-open .lm-tile:not(.is-open) { opacity: 1; filter: none; }
  /* Every panel is open on a phone, so every panel needs the darker veil. */
  .lm-tile__veil { background: linear-gradient(180deg, rgba(10, 8, 20, .45) 0%, rgba(10, 8, 20, .8) 40%, rgba(10, 8, 20, .95) 100%); }
}

@media (prefers-reduced-motion: reduce) {
  .lm-bento { transition: none; }
  html.js .lm-tile__more { transition: none; }
}


/* ═══════════════════════════════════════════════════════════════════════
   3 · WHY
   ═══════════════════════════════════════════════════════════════════════ */

.lm-why { padding: var(--lm-band) 0; background: var(--lm-inset); border-block: 1px solid var(--lm-line); }

/* ── The reading column, ported from "Scroll 01" ─────────────────────────
   felipemenezes098 - https://21st.dev/@felipemenezes098/components/scroll-01

   The source's shape: a two-column grid, the media column sticky and
   clipped to a rounded frame, the images stacked absolutely inside it and
   cross-faded on a short linear transition while the text column scrolls
   past. Below the breakpoint the two columns become one stack and each
   entry carries its own picture.

   What is deliberately not ported: the source drops an inactive entry's
   text to opacity 0. This section carries the wording that qualifies what
   is included on which plan, so every word stays at full strength and only
   the photograph changes. ─────────────────────────────────────────────── */

.lm-read { display: grid; gap: clamp(1.5rem, 4vw, 3rem); }

.lm-read__media { display: none; }

.lm-read__flow { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); }

.lm-read__step > h3 { font-size: var(--lm-d2); margin: 0 0 .8rem; }
.lm-read__body { font-size: var(--t-body); line-height: 1.7; color: var(--lm-ink-2); max-width: 52ch; }
.lm-read__note { margin-top: .8rem; font-size: var(--t-small); line-height: 1.6; color: var(--lm-ink-3); max-width: 56ch; }
.lm-read__step .lm-link { margin-top: .9rem; }

/* The inline picture belongs to the stacked layout only. */
.lm-read__inline {
  margin: 0 0 1.25rem; border-radius: var(--lm-r); overflow: hidden;
  background: var(--lm-panel); aspect-ratio: 3 / 2;   /* the 'hero' set */
}
.lm-read__inline .ph,
.lm-read__inline img { display: block; width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 981px) {
  .lm-read { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }

  /* Sticky media, as the source has it. */
  .lm-read__media { display: block; position: sticky; top: calc(var(--head-h) + 1.5rem); }
  .lm-read__frame {
    /* The source's own frame: sticky, clipped, and capped at 70vh. An
       earlier pass substituted a 3:2 box here, which left the picture
       filling only 39% of the viewport with an empty column beside the
       reading. The height is the component, so it is restored. */
    position: relative; overflow: hidden;
    height: 70vh; min-height: 22rem;
    border-radius: var(--lm-r); background: var(--lm-panel);
    border: 1px solid var(--lm-line);
  }
  .lm-read__shot {
    position: absolute; inset: 0; opacity: 0;
    transition: opacity .15s linear;          /* the source's own timing */
  }
  .lm-read__shot.is-live { opacity: 1; }
  .lm-read__shot .ph,
  .lm-read__shot img { display: block; width: 100%; height: 100%; object-fit: cover; }

  /* With the sticky picture present, the inline one would be a duplicate. */
  .lm-read__inline { display: none; }

  /* The source spaces its entries so one at a time sits mid-viewport. Its
     own 30vh gap assumes two short lines per entry; these entries carry a
     claim, a caveat and four facts, so the gap is set from the content. */
  .lm-read__flow { gap: clamp(4rem, 9vw, 7rem); padding-block: clamp(1rem, 3vw, 2.5rem); }
}

/* Without scripting the sticky column never becomes active, so it is not
   shown at all and every claim keeps its own picture. */
html:not(.js) .lm-read__media { display: none; }
html:not(.js) .lm-read__inline { display: block; }
html:not(.js) .lm-read { grid-template-columns: minmax(0, 1fr); }

.lm-facts { margin: 1.5rem 0 0; padding: 0; list-style: none; border-top: 1px solid var(--lm-line); }
.lm-facts li { padding: .8rem 0; border-bottom: 1px solid var(--lm-line); }
.lm-facts strong { display: block; font-size: var(--t-small); font-weight: 700; color: var(--lm-ink); }
.lm-facts span  { display: block; margin-top: .15rem; font-size: var(--t-micro); color: var(--lm-ink-3); }


/* =======================================================================
   4 - MIGRATION - ported from "Connoisseur Stack Interactor"
   hardikkashiyani123456788
   https://21st.dev/@hardikkashiyani123456788/components/connoisseur-stack-interactor

   Preserved: the numbered index whose live entry fills and steps right
   while the rest sit outlined and set back; and the photograph shown
   through a clip path built from separate shapes, each scaling in from
   nothing in a scattered, staggered order so the picture assembles rather
   than fades. The GSAP timeline becomes CSS transitions with per-shape
   delays, played once on a change rather than looped.
   ======================================================================= */

.lm-move { padding: var(--lm-band) 0; }

.lm-stage {
  display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center;
}

.lm-stage__index { display: flex; flex-direction: column; gap: clamp(1rem, 2.4vw, 2.25rem); margin: 0; padding: 0; list-style: none; }
.lm-stage__item {
  display: flex; align-items: flex-start; gap: 1.1rem; width: 100%;
  padding: .35rem 0; border: 0; background: none; cursor: pointer; text-align: left;
  font-family: var(--sans);
}
.lm-stage__item:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; border-radius: 4px; }
.lm-stage__no {
  font-family: var(--lm-display); font-weight: 700; font-size: 1.4rem; line-height: 1.3;
  color: var(--lm-ink-3);
  transition: color .5s var(--ease), transform .5s var(--ease);
}
.lm-stage__item.is-live .lm-stage__no { color: var(--lm-brand); transform: scale(1.1); }

/* Live is solid and stepped in; the rest are outlined and held back. */
.lm-stage__name {
  font-family: var(--lm-display); font-weight: 700;
  font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3.4rem); line-height: .9;
  letter-spacing: -.03em; text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--border-strong);
  opacity: .55; transform: translateX(0);
  transition: color .7s var(--ease), opacity .7s var(--ease), transform .7s var(--ease),
              -webkit-text-stroke-color .7s var(--ease);
}
.lm-stage__item.is-live .lm-stage__name {
  color: var(--lm-ink); -webkit-text-stroke: 1.5px transparent;
  opacity: 1; transform: translateX(1rem);
}
.lm-stage__item:hover .lm-stage__name { opacity: .8; }

.lm-stage__fig { position: relative; margin: 0; }
.lm-stage__svg { display: block; width: 100%; height: auto; }
.lm-stage__svg .p {
  transform-box: fill-box; transform-origin: 50% 50%;
  transform: scale(0);
}
.lm-stage__svg.is-set .p {
  transform: scale(1);
  transition: transform .8s cubic-bezier(.16, 1, .3, 1) var(--d, 0s);
}

.lm-stage__copy { margin-top: 1.5rem; position: relative; min-height: 5.5rem; }
.lm-stage__copy p {
  position: absolute; inset: 0; margin: 0;
  font-size: var(--t-body); line-height: 1.7; color: var(--lm-ink-2); max-width: 46ch;
  opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.lm-stage__copy p.is-live { opacity: 1; transform: none; pointer-events: auto; }
html:not(.js) .lm-stage__copy { min-height: 0; }
html:not(.js) .lm-stage__copy p { position: static; opacity: 1; transform: none; margin-bottom: 1rem; }
html:not(.js) .lm-stage__svg .p { transform: scale(1); }

.lm-move__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .75rem 1.75rem; margin-top: clamp(2rem, 4vw, 3.5rem);
}

@media (max-width: 900px) {
  .lm-stage { grid-template-columns: minmax(0, 1fr); }
  .lm-stage__fig { order: -1; max-width: 30rem; }
  .lm-stage__name { font-size: clamp(1.7rem, 6vw, 2.4rem); }
}

@media (prefers-reduced-motion: reduce) {
  .lm-stage__svg .p { transform: scale(1) !important; transition: none !important; }
  .lm-stage__copy p { transition: none; }
}


/* ═══════════════════════════════════════════════════════════════════════
   5 · SUPPORT
   ═══════════════════════════════════════════════════════════════════════ */

/* ── The page's tonal arc ────────────────────────────────────────────────
   The eight sections used to sit on two grounds a few percent apart, so the
   page read as one continuous dark field and any structure inside it was
   invisible at a glance. The dark palette already carries five grounds and
   the page was using two of them.

   Sections 1, 2, 3, 4 and 8 keep the grounds they were approved with. The
   back half now descends into a trough and climbs out of it:

     1 hero          --page        base
     2 services      --page        base
     3 why           --lm-inset    lift
     4 migrations    --page        base
     5 support       --ink         drop
     6 sustainability--black       floor, with the film
     7 commitments   --warm-lift   climb
     8 close         --lm-inset    lift

   Every value is an existing token, so the light theme keeps its own
   equivalents and the ink bands stay near-constant across both. ──────── */

.lm-help {
  padding: clamp(4rem, 7vw, 7rem) 0;
  background: var(--ink); color: var(--on-ink);
  border-block: 1px solid var(--ink-line);
}
.lm-help__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.lm-help .lm-eyebrow { color: var(--brand-quiet); }
.lm-help__copy h2 {
  color: var(--on-ink); margin-bottom: 1rem; max-width: 18ch;
  font-size: clamp(1.85rem, 1.4rem + 1.9vw, 2.9rem); letter-spacing: -.025em;
}
.lm-help__copy > p { font-size: var(--t-body); line-height: 1.7; color: var(--on-ink-2); max-width: 50ch; }
.lm-help__copy > p + p { margin-top: .8rem; }
.lm-help__acts { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem !important; }
.lm-help .lm-btn--line { border-color: rgba(255, 255, 255, .38); color: #fff; }
.lm-help .lm-btn--line:hover { background: rgba(255, 255, 255, .1); border-color: #fff; color: #fff; }
.lm-help__copy > p.lm-help__note { margin-top: .9rem; font-size: var(--t-micro); line-height: 1.55; color: var(--on-ink-3); max-width: 46ch; }

/* ── The references, ported from "CTA Section" (cta-section-3) ───────────
   shadcnstore - https://21st.dev/@shadcnstore/components/cta-section-3

   The source's resource entry: an icon tile, a title, a trailing arrow that
   steps right on hover, and a line of explanation beneath. Kept exactly,
   including the 4px step.

   Changed: the source floats each one as its own card. The page's rule is
   one bordered panel with dividers inside it, so the three share a panel.
   The source's badge is dropped, because nothing on this page is a pill.
   The whole row is one link, so the target is the full width of the entry
   rather than a small anchor at the end of a paragraph. ─────────────── */

.lm-help__refstitle {
  font-size: var(--t-micro); font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--on-ink-3); margin: 0 0 .9rem;
}

/* A raised object on the ink ground rather than a panel on a tint. The lift
   is a translucent white so it works on both themes' ink. */
.lm-help__routes {
  margin: 0; padding: 0; list-style: none;
  border: 1px solid var(--ink-line); border-radius: var(--lm-r);
  background: rgba(255, 255, 255, .045); overflow: hidden;
  box-shadow: var(--shadow-2);
}
.lm-help__routes > li + li { border-top: 1px solid var(--ink-line); }

.lm-ref {
  display: block; padding: clamp(1rem, 2vw, 1.35rem);
  text-decoration: none; color: inherit;
  transition: background var(--fast) var(--ease);
}
.lm-ref:hover, .lm-ref:focus-visible { background: rgba(255, 255, 255, .06); }
.lm-ref:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }

.lm-ref__top { display: flex; align-items: center; gap: .75rem; }
.lm-ref__icon {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--lm-r-sm);
  color: var(--brand-quiet);
  background: rgba(255, 255, 255, .06);                         /* fallback */
  background: color-mix(in srgb, var(--brand-quiet) 20%, transparent);
}
.lm-ref__icon svg { width: 20px; height: 20px; }
.lm-ref__name {
  flex: 1 1 auto; font-family: var(--lm-display); font-size: var(--t-body);
  font-weight: 700; letter-spacing: -.01em; color: var(--on-ink);
}
.lm-ref__go { flex: none; display: inline-flex; color: var(--on-ink-3); }
.lm-ref__go svg { width: 16px; height: 16px; }
/* The source's hover step, same distance. */
.lm-ref__go svg { transition: transform var(--fast) var(--ease); }
.lm-ref:hover .lm-ref__go svg,
.lm-ref:focus-visible .lm-ref__go svg { transform: translateX(4px); }

.lm-ref__body {
  display: block; margin-top: .5rem; padding-left: calc(40px + .75rem);
  font-size: var(--t-micro); line-height: 1.55; color: var(--on-ink-2);
}

@media (max-width: 980px) { .lm-help__grid { grid-template-columns: minmax(0, 1fr); align-items: start; } }
@media (max-width: 480px) {
  .lm-ref__body { padding-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .lm-ref, .lm-ref__go svg { transition: none; }
  .lm-ref:hover .lm-ref__go svg { transform: none; }
}


/* The floor of the arc. The film was already the one idea here; it was
   simply not given the room to be one. The band is taller, the heading is
   set at the page's display scale, and the badge is a mark of real size
   rather than a small picture parked in a corner. */
.lm-green {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(5rem, 10vw, 9rem) 0; color: #fff; background: var(--black);
  border-block: 1px solid var(--ink-line);
}
.lm-green__film { position: absolute; inset: 0; z-index: 0; }
.lm-green__film .vfilm,
.lm-green__film picture,
.lm-green__film img,
.lm-green__film video { display: block; width: 100%; height: 100%; object-fit: cover; }
.lm-green__veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(88deg, rgba(7, 6, 15, .94) 0%, rgba(7, 6, 15, .70) 50%, rgba(7, 6, 15, .22) 86%);
}
/* The film is this section's one idea. No component was imported: every
   Backgrounds candidate was a gradient wash, animated beams or a second
   cinematic hero, and this page already has its hero. What was wrong was
   the composition beside the film. The two columns were vertically centred
   against each other, which left the badge floating opposite the middle of
   the copy with no relationship to it. They now share a baseline, and the
   badge sits under a hairline as a mark rather than as a picture. */
.lm-green__grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1.35fr) auto;
  gap: clamp(1.5rem, 4vw, 3.5rem); align-items: end;
}
.lm-green h2 {
  color: #fff; margin-bottom: 1rem; max-width: 16ch;
  font-size: var(--lm-d1); letter-spacing: -.03em;
}
.lm-green p { font-size: var(--t-body); line-height: 1.7; color: var(--on-ink-2); max-width: 48ch; }
.lm-green p + p { margin-top: .8rem; }
.lm-green__acts { margin-top: 1.75rem !important; }
.lm-green__badge {
  max-width: 280px; padding-top: 1.4rem;
  border-top: 1px solid rgba(255, 255, 255, .32);
}
.lm-green__badge img { width: 100%; height: auto; }

@media (max-width: 880px) {
  .lm-green__grid { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .lm-green__badge { max-width: 190px; }
}


/* ═══════════════════════════════════════════════════════════════════════
   7 · COMMITMENTS
   ═══════════════════════════════════════════════════════════════════════ */

/* The climb out of the trough. The section takes the lifted ground and the
   ledger takes the inset, so the panel still reads as a distinct object in
   both themes rather than disappearing into its own section. */
.lm-vow {
  padding: clamp(4rem, 7vw, 7rem) 0;
  background: var(--warm-lift); border-block: 1px solid var(--lm-line);
}
.lm-vow .lm-head h2 { font-size: clamp(1.85rem, 1.4rem + 1.9vw, 2.9rem); letter-spacing: -.025em; }

/* ── The commitments ledger ──────────────────────────────────────────────
   No 21st.dev component. The Accordion and Disclosure family fits the shape
   of this content and fails its purpose: it hides the exclusion behind a
   control. Each standard here is qualified, and the qualification has to
   sit beside the claim, always visible.

   So: a ledger. The standard is the term, everything qualifying it is the
   detail, and a hairline runs the full width to tie each pair together.
   One bordered panel, dividers inside, exactly as the rest of the page. */

.lm-ledger {
  margin: 0; padding: 0;
  border: 1px solid var(--lm-line); border-radius: var(--lm-r);
  background: var(--lm-inset); overflow: hidden;
  box-shadow: var(--shadow-2);
}
.lm-ledger__row {
  display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.75fr);
  gap: .5rem clamp(1.75rem, 4.5vw, 4rem);
  padding: clamp(1.6rem, 3vw, 2.4rem) clamp(1.5rem, 3vw, 2.25rem);
}
/* A firmer rule between standards. This is the section's whole structure,
   so the rule has to be legible rather than a hairline hint. */
.lm-ledger__row + .lm-ledger__row { border-top: 1px solid var(--border-strong); }

.lm-ledger dt {
  font-family: var(--lm-display); font-size: var(--lm-d3);
  font-weight: 700; letter-spacing: -.015em; color: var(--lm-ink);
  line-height: 1.25; text-wrap: balance;
}
.lm-ledger dd { margin: 0; }
.lm-ledger dd p { font-size: var(--t-body); line-height: 1.65; color: var(--lm-ink-2); max-width: 60ch; }

/* The exclusion. Set apart from the claim it qualifies, and never hidden. */
.lm-ledger__caveat {
  margin-top: .8rem; padding-left: 1.1rem;
  border-left: 2px solid var(--border-strong);
  font-size: var(--t-small) !important; color: var(--lm-ink-3) !important;
}
.lm-ledger dd .lm-link { margin-top: .7rem; }

@media (max-width: 760px) {
  .lm-ledger__row { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
}


/* =======================================================================
   8 - CLOSE - ported from "Reveal Image Mask"
   daiwiikharihar - https://21st.dev/@daiwiikharihar/components/reveal-image-mask

   Preserved: the frame held inside a contained rounded shape that opens to
   the full editorial frame as the section passes, using the source's own
   rounded variant, inset 30% round 10% opening to inset 0 round 0, damped
   rather than tracked exactly, over the same start-85% to end-15% window.
   ======================================================================= */

.lm-close { padding: var(--lm-band) 0; background: var(--lm-inset); border-top: 1px solid var(--lm-line); }
.lm-close__wrap { display: grid; justify-items: center; text-align: center; gap: clamp(1.5rem, 3vw, 2.5rem); }

.lm-close__say { max-width: 46rem; }
.lm-close__say h2 { font-size: clamp(1.9rem, 1.4rem + 2vw, 3rem); margin: 0 0 .9rem; letter-spacing: -.03em; }
.lm-close__lede { font-size: var(--t-body); line-height: 1.7; color: var(--lm-ink-2); max-width: 52ch; margin-inline: auto; }

.lm-mask { width: 100%; max-width: 58rem; margin: 0; }
.lm-mask__frame {
  --p: 30%; --r: 10%;
  aspect-ratio: 16 / 10; overflow: hidden; border-radius: 2rem;
  background: var(--lm-deep);
  clip-path: inset(var(--p) round var(--r));
}
.lm-mask__frame img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 16%; }
html:not(.js) .lm-mask__frame { --p: 0%; --r: 0%; }
.lm-mask figcaption {
  margin-top: .9rem; font-size: var(--t-micro); color: var(--lm-ink-3);
}

.lm-close__foot { display: grid; justify-items: center; gap: 1.5rem; width: 100%; }
.lm-close__list {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem 1.5rem;
  margin: 0; padding: 0; list-style: none; text-align: left; max-width: 58rem;
}
.lm-close__list li { display: flex; align-items: flex-start; gap: .5rem; font-size: var(--t-micro); color: var(--lm-ink-2); }
.lm-close__list svg { flex: none; width: 16px; height: 16px; margin-top: .1rem; color: var(--lm-brand); }
.lm-close__acts { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin: 0; }

@media (max-width: 760px) {
  .lm-close__list { grid-template-columns: minmax(0, 1fr); }
  .lm-close__acts .lm-btn { flex: 1 1 12rem; }
  .lm-mask__frame { aspect-ratio: 4 / 3; border-radius: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .lm-mask__frame { --p: 0%; --r: 0%; }
}


/* -- Reduced motion --------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal],
  html.js .lm-fan,
  html.js .lm-mosaic__cell {
    opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important;
  }
  html.js .lm-fan__card { --dx: 0px !important; transition: none !important; }
  .lm-link svg, .lm-btn { transition: none; }
}

/* ── From Little Moo: articles read from littlemoogroup.com ──────────────
   Editorial, not a card grid. No boxes, no shadows, no chunky containers:
   each piece is held by a hairline above it and by its own spacing, which
   is how the rest of this page already works.

   Asymmetric on purpose. The lead piece takes more of the row and sets its
   title a size larger, so the eye is given an order to read in rather than
   three identical tiles competing. Everything below uses the same tokens
   as the sections around it, so it inherits both themes without a second
   palette of its own. */

.lm-editorial {
  padding: clamp(4rem, 7vw, 7rem) 0;
  background: var(--warm-lift);
  border-block: 1px solid var(--lm-line);
}
.lm-editorial .lm-head h2 {
  font-size: clamp(1.85rem, 1.4rem + 1.9vw, 2.9rem);
  letter-spacing: -.025em;
  text-wrap: balance;
}

.lm-articles {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  /* The lead is wider. Three columns, deliberately unequal. */
  grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 3.5vw, 3.25rem);
  align-items: start;
}

.lm-article { min-width: 0; }

.lm-article__link {
  display: flex; flex-direction: column;
  padding-top: 1.15rem;
  border-top: 1px solid var(--border-strong);
  color: inherit; text-decoration: none;
  transition: border-color var(--fast) var(--ease);
}
.lm-article__link:hover,
.lm-article__link:focus-visible { border-top-color: var(--lm-brand); }
.lm-article__link:focus-visible {
  outline: 2px solid var(--focus, var(--lm-brand)); outline-offset: 6px;
}

/* ── the image, or the panel that stands in for one ─────────────────── */

.lm-article__frame {
  position: relative; overflow: hidden;
  border-radius: var(--lm-r);
  background: var(--lm-inset);
  aspect-ratio: 16 / 10;
  margin-bottom: 1.1rem;
}
.lm-article--lead .lm-article__frame { aspect-ratio: 16 / 9; }

.lm-article__img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform var(--d, .4s) var(--ease);
}
.lm-article__link:hover .lm-article__img { transform: scale(1.03); }

/* A piece with no featured image. Setting its category large is honest and
   reads as a deliberate treatment; an empty grey rectangle does not. */
.lm-article__frame--type {
  display: grid; place-items: center;
  padding: 1.25rem;
  background:
    linear-gradient(140deg, var(--brand-quiet, transparent), transparent 62%),
    var(--lm-inset);
  border: 1px solid var(--lm-line);
}
.lm-article__glyph {
  font-family: var(--lm-display);
  font-size: clamp(1.15rem, .9rem + 1.1vw, 1.9rem);
  font-weight: 700; letter-spacing: -.02em; line-height: 1.15;
  text-align: center; text-wrap: balance;
  color: var(--lm-ink-3); opacity: .62;
}

/* ── the words ───────────────────────────────────────────────────────── */

.lm-article__kicker {
  margin: 0 0 .5rem;
  font-size: .7rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--lm-brand);
}

.lm-article__title {
  margin: 0;
  font-family: var(--lm-display);
  font-size: clamp(1.05rem, .95rem + .45vw, 1.3rem);
  font-weight: 700; letter-spacing: -.015em; line-height: 1.28;
  color: var(--lm-ink); text-wrap: balance;
}
.lm-article--lead .lm-article__title {
  font-size: clamp(1.25rem, 1.05rem + .8vw, 1.7rem);
}
.lm-article__link:hover .lm-article__title { text-decoration: underline; text-underline-offset: 4px; }

.lm-article__excerpt {
  margin: .65rem 0 0;
  font-size: var(--t-small); line-height: 1.62;
  color: var(--lm-ink-2); max-width: 46ch;
}

.lm-article__foot {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .5rem .9rem;
  margin: 1.05rem 0 0;
  font-size: var(--t-small); color: var(--lm-ink-3);
}
.lm-article__foot time { font-variant-numeric: tabular-nums; }
.lm-article__cta {
  display: inline-flex; align-items: center; gap: .4rem;
  margin-left: auto;
  font-weight: 600; color: var(--lm-brand);
}
.lm-article__cta svg { transition: transform var(--fast) var(--ease); }
.lm-article__link:hover .lm-article__cta svg { transform: translateX(3px); }

.lm-articles__more {
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
  border-top: 1px solid var(--lm-line);
}

/* ── tablet: the lead takes the full width, the other two share ──────── */
@media (max-width: 1040px) {
  .lm-articles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lm-article--lead { grid-column: 1 / -1; }
  .lm-article--lead .lm-article__frame { aspect-ratio: 21 / 9; }
  .lm-article--lead .lm-article__excerpt { max-width: 62ch; }
}

/* ── mobile: stacked, image ratios kept shallow so a card is scannable ── */
@media (max-width: 680px) {
  .lm-articles { grid-template-columns: minmax(0, 1fr); gap: 2.25rem; }
  .lm-article--lead { grid-column: auto; }
  .lm-article--lead .lm-article__frame,
  .lm-article__frame { aspect-ratio: 16 / 9; }
  .lm-article__foot { gap: .4rem .75rem; }
  .lm-article__cta { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .lm-article__img,
  .lm-article__cta svg { transition: none; }
  .lm-article__link:hover .lm-article__img { transform: none; }
}