/* Landing Page — layout.
   Sizes are expressed in vw against the 1536x1024 reference (1px = 0.0651vw)
   so every proportion holds as the window changes. */

.landing {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
  background: var(--bg-landing);
  font-family: var(--font-ui);
}

/* City light sitting behind the panel. Glass can only read as glass if
   there is something to transmit — against flat black, any amount of
   transparency looks identical to a solid dark panel. Dimmed and blurred
   so it never competes with the interface on top of it. */
.landing::before {
  content: '';
  position: absolute;
  /* Spans the whole scene rather than sitting in the right-hand third — it
     is the page's backdrop now that the separate lower-left plate is gone.
     Overhangs every edge so the blur never reveals a hard border. */
  inset: -12% -8%;
  background-image: url('/luxury%20house%20for%20landing%20page.png');
  background-size: cover;
  background-position: 58% 52%;
  opacity: 0.5;
  filter: blur(3px) saturate(0.9) brightness(0.52);

  /* The vignette is weighted right of centre. Covering the full width puts
     the photograph under the headline, and this is what keeps that corner
     quiet enough to read against while the right side stays open. */
  -webkit-mask-image: radial-gradient(72% 64% at 63% 48%, #000 0%, rgba(0, 0, 0, 0.5) 56%, transparent 84%);
  mask-image: radial-gradient(72% 64% at 63% 48%, #000 0%, rgba(0, 0, 0, 0.5) 56%, transparent 84%);
  pointer-events: none;
  z-index: 1;
}

/* The water, as a second pass over the same photograph.

   One element can only carry one blur, so the upper scene and the pool
   cannot be graded differently on ::before alone. This layer repeats the
   plate at identical inset, size and position — so it registers exactly —
   and grades it clearer: less blur, more brightness, more opacity.

   Its mask does two jobs at once. The radial lobe picks out the reflecting
   pool low and left, which was already in the photograph and previously
   masked away; the linear gradient confines the whole layer to the bottom
   of the scene, so the upper composition keeps the darker, softer grade
   untouched. Intersected rather than added, so both must agree. */
.landing::after {
  content: '';
  position: absolute;
  inset: -12% -8%;
  background-image: url('/luxury%20house%20for%20landing%20page.png');
  background-size: cover;
  background-position: 58% 52%;
  opacity: 0.58;
  filter: blur(2px) saturate(0.95) brightness(0.62);

  -webkit-mask-image: radial-gradient(58% 42% at 24% 88%, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.45) 48%, transparent 80%),
    linear-gradient(to bottom, transparent 58%, #000 80%);
  mask-image: radial-gradient(58% 42% at 24% 88%, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.45) 48%, transparent 80%),
    linear-gradient(to bottom, transparent 58%, #000 80%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;

  pointer-events: none;
  z-index: 1;
}

/* ---- Top navigation ---------------------------------------------- */

/* Fixed, not absolute — it is site chrome now rather than part of the
   landing page, so it stays put through every section below.

   Hidden until the curtain lands: the Starting Page carries its own centred
   wordmark and the morphing logo travels from that to this one, so showing
   the real header early would put two logos on screen at once. The curtain
   raises --nav as it finishes. */
.topnav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  /* Trimmed from 10.35vh (~94px). The tallest nav item is only 40px, so a
     94px bar left ~27px of dead space above and below it. Clamped so the
     bar stays a comfortable 12px around the avatar rather than scaling with
     viewport height. */
  height: clamp(62px, 7vh, 72px);
  display: flex;
  align-items: center;
  /* Gutters match the page content exactly (owner request, 2026-07-25):
     left = the hero's left edge, right = the feature trail's 3.1% margin —
     so the wordmark sits flush over the headline and Get Started ends flush
     with the trail's last column, at every width. */
  padding: 0 clamp(20px, 3.1vw, 59px) 0 clamp(20px, 3.125vw, 50px);
  z-index: 40;
  opacity: var(--nav, 0);
  pointer-events: var(--nav-events, none);

  /* Transparent — no bar behind it. It belongs to the landing page only, so
     it slides up and out of view once you scroll into the suite; --nav-y is
     set from main.ts. The transform transition is safe here because the
     curtain reveal drives opacity (--nav), not transform. */
  background: transparent;
  transform: translateY(var(--nav-y, 0));
  transition: transform 320ms var(--ease);
}

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

.topnav__brand {
  display: flex;
  align-items: center;
  gap: 0.85vw;
}

/* /lumiq-logo.png is the supplied wordmark with the black plate cut to real
   alpha and the dead padding trimmed off, so it needs no blend mode and drops
   cleanly onto the hero photograph — or any background. */
.topnav__logo {
  display: block;
  width: 9.1vw;
  min-width: 116px;
  /* Capped just above the 1440 size (131px) — the buttons stopped scaling
     at their caps and a 173px wordmark beside 15px type read as imbalance
     on wide screens. */
  max-width: 132px;
  aspect-ratio: 1138 / 229;
  background-image: url('/lumiq-logo.png');
  background-size: contain;
  background-position: left center;
  background-repeat: no-repeat;
}

/* Kept for the morphing logo that carries the eye from the Starting Page up
   into this header — it still renders the lettermark and wordmark. */
.topnav__badge {
  display: grid;
  place-items: center;
  width: 2.604vw;
  height: 2.604vw;
  min-width: 30px;
  min-height: 30px;
  border-radius: 0.65vw;
  background: linear-gradient(150deg, var(--gold-bright), var(--gold));
  color: #1a1206;
  font-family: var(--font-display);
  font-size: 1.5vw;
  font-weight: 500;
  line-height: 1;
}

.topnav__mark {
  font-family: var(--font-mark);
  font-size: 1.693vw;
  font-weight: 500;
  letter-spacing: 0.11em;
  color: var(--white);
}

/* True page centre, not a fixed offset from the brand. The old
   `margin-left: 14.9vw` left the menu drifting left-of-centre as the
   viewport grew (owner flagged the ragged bar, 2026-07-25). Absolutely
   centred, the group is balanced between the wordmark and the actions at
   every width, whatever the two sides measure. */
.topnav__links {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: clamp(24px, 2.5vw, 38px);
}

.topnav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4vw;
  /* Same cap as the buttons — links a size larger than the CTA text would
     read as the imbalance the cap exists to fix. */
  font-size: clamp(13px, 1.042vw, 15px);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  white-space: nowrap;
}

.topnav__link.is-active {
  color: var(--gold);
}

/* The active underline sits below the text, matching the reference. */
.topnav__link.is-active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(-14px, -0.85vw, -10px);
  height: 2px;
  background: var(--gold);
}

.topnav__actions {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.3vw, 20px);
  margin-left: auto;
}

/* Capped: pure vw let these balloon on wide screens (54px tall, 20px type
   at 1900w). The caps sit just above the 1440 reference values, so the
   approved framing renders identically and only the runaway growth stops. */
.topnav__login {
  display: inline-flex;
  align-items: center;
  height: clamp(38px, 2.86vw, 44px);
  padding: 0 clamp(14px, 1.5vw, 22px);
  font-size: clamp(13px, 1.042vw, 15px);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  white-space: nowrap;
  transition: color 220ms var(--ease);
}

.topnav__login:hover {
  color: var(--white);
}

.topnav__cta {
  display: inline-flex;
  align-items: center;
  height: clamp(38px, 2.86vw, 44px);
  padding: 0 clamp(18px, 1.8vw, 26px);
  border-radius: 999px;
  background: linear-gradient(150deg, var(--gold-bright), var(--gold));
  color: #1a1206;
  font-size: clamp(13px, 1.042vw, 15px);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: filter 220ms var(--ease), transform 220ms var(--ease);
}

.topnav__cta:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

.icon--chevron {
  width: 0.78vw;
  min-width: 9px;
}

/* ---- Hero -------------------------------------------------------- */

/* --hu is the hero's unit. Everything in the hero is authored in vw, but the
   hero is POSITIONED as a % of viewport height and the feature bar below it
   is pinned at 82% — so on a wide-but-short window (16:9 laptops, the live
   1900x910 case) the stack outgrew the gap and "Trusted by 2,000+" landed on
   top of "Land Vision", with "Skip intro" sitting over the reflection.
   Past 16:10 the unit becomes height-driven, so the whole block scales down
   together and always clears the bar. At the 1440x900 reference min()
   resolves to exactly 1vw, so the approved framing is unchanged. */
.hero {
  position: absolute;
  top: 16.4%;
  left: clamp(20px, 3.125vw, 50px);
  z-index: 2;
  --hu: min(1vw, 1.6vh);
}

.hero__label {
  display: flex;
  align-items: center;
  gap: calc(0.72 * var(--hu));
  margin: 0;
  font-size: calc(0.911 * var(--hu));
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--gold);
}

.icon--sparkle {
  width: 1.1vw;
  min-width: 12px;
}
/* Scoped: .icon--sparkle / .icon--arrow are global classes used all over the
   app, and --hu only exists inside the hero. */
.hero .icon--sparkle { width: calc(1.1 * var(--hu)); }

.hero__headline {
  margin: calc(2.38 * var(--hu)) 0 0;
  font-family: var(--font-display);
  font-size: calc(4.948 * var(--hu));
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.005em;
  color: var(--cream);
}

.hero__headline em {
  font-style: italic;
  color: var(--gold);
}

.hero__sub {
  margin: calc(1.5 * var(--hu)) 0 0;
  font-size: calc(1.367 * var(--hu));
  font-weight: 300;
  line-height: 1.71;
  color: var(--muted);
}

.hero__actions {
  display: flex;
  align-items: center;
  gap: calc(1.1 * var(--hu));
  margin-top: calc(2.4 * var(--hu));
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(0.8 * var(--hu));
  height: calc(3.58 * var(--hu));
  min-height: 42px;
  border-radius: 999px;
  font-size: calc(1.107 * var(--hu));
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.btn--gold {
  width: calc(14.58 * var(--hu));
  background: linear-gradient(160deg, var(--gold-bright), var(--gold));
  color: #1a1206;
  box-shadow: 0 0.5vw 2vw rgba(201, 160, 99, 0.16);
}

.btn--ghost {
  width: calc(13.2 * var(--hu));
  border: 1px solid var(--gold-line);
  color: var(--gold-bright);
}

.icon--arrow {
  width: 1.3vw;
  min-width: 14px;
}
.hero .icon--arrow { width: calc(1.3 * var(--hu)); }

.proof {
  display: flex;
  align-items: center;
  gap: calc(1.69 * var(--hu));
  margin-top: calc(3.78 * var(--hu));
}

.proof__faces {
  display: flex;
}

.proof__face {
  width: calc(3.385 * var(--hu));
  height: calc(3.385 * var(--hu));
  min-width: 34px;
  min-height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--gold-line);
  /* Generated headshots; the gradient stays underneath as the load/fallback. */
  background-size: cover;
  background-position: center;
}

.proof__face:nth-child(1) { background-image: url('/gen/face-1.jpg'), linear-gradient(160deg, #3a3028 0%, #241d16 100%); }
.proof__face:nth-child(2) { background-image: url('/gen/face-2.jpg'), linear-gradient(160deg, #3a3028 0%, #241d16 100%); }
.proof__face:nth-child(3) { background-image: url('/gen/face-3.jpg'), linear-gradient(160deg, #3a3028 0%, #241d16 100%); }

.proof__face + .proof__face {
  margin-left: calc(-1.04 * var(--hu));
}

.proof__text {
  margin: 0;
  font-size: calc(1.042 * var(--hu));
  font-weight: 300;
  line-height: 1.6;
  color: var(--muted);
}

/* ---- Dashboard (rendered glass, on video) --------------------------- */
/* The dashboard fills 98.6% x 97.2% of the square video frame, offset 2.5%
   from the top. The element is sized and positioned from those measured
   numbers so the panel lands exactly where the old DOM one sat, and stays
   square so the render is never stretched. Screen blending drops the pure
   black out, so the panel reads as glass over the scene rather than
   punching a hole in it — and the flying shards composite the same way. */

/* Full-bleed rather than a panel-sized box. The clip is composed with the
   dashboard already sitting in its top-right quadrant, so covering the
   viewport puts the panel where the layout expects it AND gives the shards
   the whole screen to travel across — over the headline and down past the
   button. Screen blend drops the clip's black background, so only the glass
   itself composites over the page. */
/* Height-keyed, always. These were full-bleed with object-fit: cover, which
   keys the crop to WIDTH once the viewport is wider than the 16:9 frame —
   and almost every real browser window is (screen minus taskbar and chrome).
   That inflated the panel ~18% and pushed it up under the nav on the live
   site. Sizing the element to the frame itself (height 100%, width from the
   16:9 ratio, centred with the -50% in the composed transform below) keeps
   the crop height-keyed at every aspect, so the panel holds the approved
   1440x900 framing — centred in the scene — on wide-short viewports too.
   The frame's edges are pure black and screen blending drops black, so the
   gaps this leaves beside the frame on ultrawide windows paint nothing. */
.landing-glass,
.landing-dash {
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  width: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
  z-index: 2;
  mix-blend-mode: screen;
  pointer-events: none;
  will-change: opacity, transform;
  transform-origin: 52.2% 12.4%;
}

/* Scaled so the panel reads at the size it was drawn at: measured 495x474
   at centre (1025, 362), wanted ~824x648 at (1068, 532).

   Two things this rule has to respect. curtain.css sets
   `[data-wake] { transform: translate3d(0, var(--rise), 0) }` and is
   imported later, so a plain `transform` here loses the cascade — and
   overriding it outright would kill the wake-rise. Both are composed in
   one declaration, and the selector is doubled so it wins the tie.

   The origin is solved rather than guessed: to land a scaled centre C on
   target T, the origin must sit at (s*C - T) / (s - 1). */
/* Plan A clip, scaled a little larger than the previously approved framing
   at the director's request: 1.167 -> 1.30, about 11% bigger, grown about
   its own centre so it did not drift while resizing.

   The nudge left and down is an explicit translate rather than more
   transform-origin arithmetic. Origin shifts move the panel by
   dOrigin * (1 - S), so every reposition changes with the scale and with
   the viewport; a translate in px moves it by exactly what it says.
   Rightmost transform applies first, so this scales, then offsets. */
.landing .landing-glass,
.landing .landing-dash {
  /* Fitted inside the box drawn on the page: 465x425 at 555,135. The panel
     is 1.05 wide-to-tall against a 1.09 box, so it very nearly fills it —
     scale = min(465/440, 425/420) = 1.012, height binding — and it is
     centred across the box's width. Offsets are re-solved per scale, since
     scaling about a fixed origin moves the panel as well as resizing it.

     The vertical offset then aligns the panel's top edge with the top of
     .hero__label — the AI-POWERED CREATION line at y 149 — so the two start
     on the same row.

     A 1.34 composition-wide enlargement was tried here and reverted — it
     filled the viewport but read as oversized.

     The panel alone is then 15% larger: 1.012 * 1.15 = 1.164.

     Size and position are taken from the supplied reference rather than
     chosen: there the panel spans 50.9%-97.6% across and starts at 13.4%
     down. Against this viewport that is 594 wide at x 648, top 122 — so
     scale 594/440 = 1.35, with the offsets solved for that scale. It sits
     slightly higher than the AI-POWERED CREATION line, as the reference
     has it, rather than level with it. */
  /* The -50% centres the frame (left: 50% above); percentages resolve
     against the element's own width, untouched by the scale. The -52px and
     +10px nudges are the approved framing, unchanged. */
  transform: translate3d(calc(-50% - 52px), calc(var(--rise) + 10px), 0) scale(1.35);
}

/* Exactly one of these is visible at a time — see the swap in glass.ts.
   Both are screen-blended, which is additive, so any overlap composites the
   dashboard twice and it reads noticeably brighter. The clip starts hidden;
   the still is what shows at rest. */
.landing-glass { z-index: 3; opacity: 0; }
.landing-dash { z-index: 4; }

/* ---- Dashboard panel (superseded by .landing-glass) ----------------- */
/* An author `display` rule beats the UA stylesheet's [hidden] { display:
   none }, so the retired panel needs this or it paints over the video. */

.landing-panel[hidden] {
  display: none !important;
}
/* One container. The curtain engine addresses .landing-panel and never
   reaches inside, so this subtree can change freely. */

.landing-panel {
  position: absolute;
  left: 39.71%;
  top: 11.52%;
  width: 57.29%;
  height: 81.74%;
  display: flex;
  border: 1px solid rgba(201, 160, 99, 0.3);
  border-radius: 1.823vw;

  /* Tempered glass: a tinted pane, not a solid surface. The city behind
     shows through the blur; the tint keeps the interface legible. */
  background: linear-gradient(
    148deg,
    rgba(36, 31, 26, 0.44) 0%,
    rgba(14, 12, 10, 0.66) 52%,
    rgba(19, 16, 13, 0.58) 100%
  );
  -webkit-backdrop-filter: blur(26px) saturate(126%);
  backdrop-filter: blur(26px) saturate(126%);

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.11),
    inset 0 0 3vw rgba(255, 255, 255, 0.025),
    0 0 4vw rgba(201, 160, 99, 0.1),
    0 1.5vw 5vw rgba(0, 0, 0, 0.55);

  overflow: hidden;
  isolation: isolate;
  z-index: 2;
}

/* Surface reflection. Sits above the interface because a reflection is on
   the glass, not under it. Kept very low so it never washes out text. */
.landing-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    118deg,
    rgba(255, 255, 255, 0.075) 0%,
    rgba(255, 255, 255, 0.028) 16%,
    rgba(255, 255, 255, 0) 38%,
    rgba(255, 255, 255, 0) 76%,
    rgba(255, 255, 255, 0.022) 100%
  );
  pointer-events: none;
  z-index: 5;
}

/* Sidebar */

.panel__sidebar {
  display: flex;
  flex-direction: column;
  width: 21.59%;
  padding: 2.41vw 1.3vw 1.95vw 2.28vw;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}

.panel__mark {
  font-family: var(--font-mark);
  font-size: 1.237vw;
  font-weight: 400;
  letter-spacing: 0.15em;
  color: var(--gold);
  margin-bottom: 2.28vw;
}

.panel__nav {
  display: flex;
  flex-direction: column;
}

.panel__item {
  display: flex;
  align-items: center;
  gap: 0.85vw;
  height: 2.86vw;
  padding: 0 0.85vw;
  margin-bottom: 0.46vw;
  border-radius: 0.65vw;
  font-size: 0.977vw;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.74);
  text-decoration: none;
  white-space: nowrap;
}

.panel__item .icon {
  width: 1.17vw;
  min-width: 13px;
  flex-shrink: 0;
  opacity: 0.72;
}

.panel__item.is-active {
  background: rgba(201, 160, 99, 0.12);
  color: var(--gold);
}

.panel__item.is-active .icon {
  opacity: 1;
}

.panel__rule {
  height: 1px;
  background: rgba(255, 255, 255, 0.07);
  margin: 0.85vw 0;
}

.panel__help {
  margin-top: auto;
  margin-bottom: 0;
}

/* Main column */

.panel__main {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 4.69vw 2.34vw 1.95vw 2.21vw;
  min-width: 0;
}

.panel__head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  flex-shrink: 0;
}

.panel__greeting {
  grid-column: 1;
  margin: 0;
  font-size: 1.693vw;
  font-weight: 500;
  color: var(--white);
  white-space: nowrap;
}

.panel__greeting span {
  font-size: 0.9em;
}

.panel__ask {
  grid-column: 1;
  margin: 0.91vw 0 0;
  font-size: 0.977vw;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.58);
}

.panel__new {
  grid-row: 1 / span 2;
  grid-column: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45vw;
  width: 9.64vw;
  height: 2.67vw;
  border-radius: 999px;
  background: linear-gradient(160deg, var(--gold-bright), var(--gold));
  color: #1a1206;
  font-size: 0.977vw;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.panel__new .icon {
  width: 0.85vw;
  min-width: 10px;
}

/* Feature cards */

/* The grid takes whatever height is left after the fixed rows, so the
   panel never overflows regardless of window size. */
.panel__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: 1fr 1fr;
  gap: 0.78vw 1.04vw;
  margin-top: 1.43vw;
  flex: 1;
  min-height: 0;
}

.card {
  position: relative;
  display: block;
  height: 100%;
  border-radius: 0.78vw;
  overflow: hidden;
  text-decoration: none;
}

/* Neutral fills standing in for the card imagery. Each tone differs so
   the four read as distinct cards. Replace with real stills. */
.tone-a { background: linear-gradient(155deg, #253040 0%, #14171d 100%); }
.tone-b { background: linear-gradient(155deg, #33291d 0%, #191512 100%); }
.tone-c { background: linear-gradient(155deg, #2e2418 0%, #16120e 100%); }
.tone-d { background: linear-gradient(155deg, #1d232c 0%, #121417 100%); }

.card__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 3vw;
  height: 3vw;
  min-width: 30px;
  min-height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: var(--white);
}

.card__play .icon {
  width: 1.1vw;
  min-width: 12px;
}

.card__meta {
  position: absolute;
  left: 1.04vw;
  bottom: 1.04vw;
  display: flex;
  flex-direction: column;
  gap: 0.2vw;
}

.card__title {
  font-size: 1.107vw;
  font-weight: 500;
  color: var(--white);
}

.card__sub {
  font-size: 0.847vw;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.66);
}

/* Recent projects */

.panel__recent {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 1.76vw;
  flex-shrink: 0;
}

.panel__recentTitle {
  margin: 0;
  font-size: 1.107vw;
  font-weight: 500;
  color: var(--white);
}

.panel__viewall {
  font-size: 0.977vw;
  font-weight: 400;
  color: var(--gold);
  text-decoration: none;
}

.panel__thumbs {
  display: grid;
  /* minmax(0,…) — plain 1fr lets a long nowrap title widen its own
     column, which would give each thumbnail a different height. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.72vw;
  margin-top: 1.17vw;
  flex-shrink: 0;
}

.thumb {
  display: block;
  text-decoration: none;
}

.thumb__shot {
  position: relative;
  display: block;
  aspect-ratio: 145 / 110;
  border-radius: 0.52vw;
  overflow: hidden;
}

.thumb__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 1.82vw;
  height: 1.82vw;
  min-width: 20px;
  min-height: 20px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.24);
  color: var(--white);
}

.thumb__play .icon {
  width: 0.72vw;
  min-width: 8px;
}

.thumb__time {
  position: absolute;
  right: 0.42vw;
  bottom: 0.36vw;
  font-size: 0.716vw;
  color: rgba(255, 255, 255, 0.92);
}

.thumb__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4vw;
  margin-top: 0.78vw;
}

.thumb__title {
  font-size: 0.78vw;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.thumb__dur {
  font-size: 0.78vw;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.55);
  flex-shrink: 0;
}

/* ---- Feature bar ---------------------------------------------------- */
/* Laid out to the supplied reference: four items across the foot of the
   scene, separated by hairlines, with the light trail running above them.
   The mirrored reflection that was here has been removed — the reference
   does not have one, and it was competing with the water in the backdrop. */

/* The gold waterline that used to run between the bar and its reflection
   has been removed. The reflection still reads as water without it. */

/* Anchored from the top rather than the bottom now: the reflection has to
   sit underneath it, so the bar cannot be pinned to the viewport floor. */
.ltrail__row {
  position: absolute;
  left: 3.1%;
  right: 3.1%;
  top: 82%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  z-index: 2;
}

.ltrail__item {
  display: flex;
  align-items: center;
  gap: 1.25vw;
  padding-left: 2.2vw;
  min-width: 0;
}

/* Hairline separators between items, not around them — so the bar reads as
   one row rather than four cards. */
.ltrail__item + .ltrail__item {
  border-left: 1px solid rgba(231, 197, 138, 0.16);
}
.ltrail__item:first-child { padding-left: 0.9vw; }

.ltrail__icon {
  display: grid;
  place-items: center;
  width: 3.1vw;
  height: 3.1vw;
  min-width: 34px;
  min-height: 34px;
  flex-shrink: 0;
  border: 1px solid rgba(231, 197, 138, 0.42);
  border-radius: 0.58vw;
  color: var(--gold, #e6c88f);
  background: rgba(231, 197, 138, 0.05);
}

.ltrail__icon svg { width: 1.4vw; min-width: 16px; height: auto; }
.ltrail__icon b {
  font-size: 1.04vw;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--gold, #e6c88f);
}

.ltrail__text { display: flex; flex-direction: column; gap: 0.28vw; min-width: 0; }
/* Jost — the face used for the LUMIQ wordmark. Playfair was tried here and
   rejected: at this size the serif read as decorative rather than
   confident. Jost is geometric and slightly wide, so a little tracking and
   the 500 weight (the heaviest loaded) give the titles presence without
   shouting, and it ties the foot of the page to the logo instead of the
   headline. */
.ltrail__title {
  font-family: var(--font-mark);
  font-size: 1.17vw;
  font-weight: 500;
  letter-spacing: 0.022em;
  color: #f6f2ea;
  white-space: nowrap;
}
/* Wraps rather than staying on one line — the reference sets these over two
   lines, and the sentences are too long to hold in a quarter-width column. */
.ltrail__sub {
  font-size: 0.82vw;
  font-style: normal;
  line-height: 1.45;
  color: rgba(233, 226, 214, 0.6);
}

/* The reflection is the same markup flipped, not a second design — edit the
   text once and both update. Masked so it dissolves into the water rather
   than ending on a line. */
.ltrail__row--echo {
  top: calc(82% + 4.2vw);
  transform: scaleY(-1);
  opacity: 0.24;
  filter: blur(0.5px);
  -webkit-mask-image: linear-gradient(to top, transparent 6%, #000 80%);
  mask-image: linear-gradient(to top, transparent 6%, #000 80%);
  pointer-events: none;
}

/* Separators would double up in the mirror and read as a second bar. */
.ltrail__row--echo .ltrail__item + .ltrail__item { border-left-color: transparent; }

/* ---- Skip intro -------------------------------------------------------- */
/* A quiet ghost link in the hero's empty lower-left, for visitors who would
   rather not sit through the curtain and glass break. Deliberately understated
   — it is an escape hatch, not a primary CTA competing with Start Creating. */
.hero__skip {
  display: inline-flex;
  align-items: center;
  gap: calc(0.6 * var(--hu));
  margin-top: calc(2.6 * var(--hu));
  padding: calc(0.5 * var(--hu)) calc(0.2 * var(--hu));
  border: none;
  background: none;
  font-family: inherit;
  font-size: calc(0.95 * var(--hu));
  font-weight: 400;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: color 200ms var(--ease), gap 200ms var(--ease);
}

.hero__skip:hover {
  color: var(--gold-bright);
  gap: calc(0.9 * var(--hu));
}

.hero__skip:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 4px;
  border-radius: 4px;
}

.hero__skip .icon {
  width: calc(1 * var(--hu));
  min-width: 11px;
}

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

/* ---- Back to top ------------------------------------------------------- */
/* Floating return-to-hero, created in main.ts. Hidden while on the landing
   (the header is there); fades and lifts in once the suite reaches the top,
   on the same threshold that slides the header away. */
.to-top {
  position: fixed;
  right: clamp(18px, 2.2vw, 34px);
  bottom: clamp(18px, 2.2vw, 34px);
  z-index: 30;
  display: grid;
  place-items: center;
  width: clamp(44px, 3.4vw, 52px);
  height: clamp(44px, 3.4vw, 52px);
  border: 1px solid rgba(201, 160, 99, 0.4);
  border-radius: 50%;
  background: linear-gradient(160deg, rgba(38, 30, 21, 0.92), rgba(12, 10, 8, 0.92));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--gold-bright);
  cursor: pointer;
  box-shadow: 0 0.8vw 2.4vw rgba(0, 0, 0, 0.45);
  /* Hidden state: nudged down, faded, and click-through disabled. */
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 260ms var(--ease), transform 260ms var(--ease),
    background-color 200ms var(--ease), border-color 200ms var(--ease);
}

.to-top.is-shown {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.to-top:hover {
  background: linear-gradient(160deg, rgba(52, 41, 27, 0.95), rgba(20, 16, 11, 0.95));
  border-color: rgba(201, 160, 99, 0.7);
}

.to-top:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 3px;
}

.to-top .icon {
  width: clamp(16px, 1.15vw, 20px);
}

@media (prefers-reduced-motion: reduce) {
  .to-top { transition: opacity 200ms linear; }
}