/* =========================================================================
   LINGKE AUDIO — sonictech.co.il brand landing page
   /brands/lingke/   ·   template: single-brands-lingke.php
   Derived 1:1 from the house pattern (valerion.css + perlisten.css), rescoped
   to #lingke-page with the `lgk-` BEM prefix.
   ========================================================================= */


/* ---- [A] HOUSE BASE — lifted from valerion.css ---- */
/* (a stray half of a stripped @import used to sit here — removed; the
   Spline Sans face is injected by the theme Customizer, not this file) */

/* The page's own backdrop — explicit per brand (the global body-black
   was breaking the Gutenberg editor and is being phased out). */
body.sonic-brand-lingke {
  background-color: #000 !important;
  /* The full-bleed parallax band is 100vw — clip (never hidden: it would
     kill the sticky act) so a desktop scrollbar can't cause an x-scroll. */
  overflow-x: clip;
}

/* Screen-reader-only utility (the H1's hidden "Lingke - " brand prefix). */
.lgk-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.lgk {
  --lgk-black: #000;
  --lgk-white: #fff;
  --lgk-font: 'Spline Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  margin: 0;
  padding: 0;
  background: var(--lgk-black);
  color: var(--lgk-white);
  font-family: var(--lgk-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

/* Widow guard, layer 2 (layer 1 is the JS NBSP join): browsers that know
   text-wrap:pretty avoid single-word last lines on their own. */
.lgk p, .lgk h2, .lgk h3 { text-wrap: pretty; }
.lgk .nowrap { white-space: nowrap; }


.lgk-skip-link {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none;
}
.lgk-skip-link:focus,
.lgk-skip-link:focus-visible {
  position: fixed !important;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  width: auto !important;
  height: auto !important;
  padding: 0.75rem 1.5rem !important;
  margin: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  white-space: normal !important;
  opacity: 1 !important;
  pointer-events: auto;
  z-index: 999999;
  background: var(--lgk-white);
  color: var(--lgk-black);
  font-weight: 600;
  text-decoration: none;
  border-radius: 4px;
}

/* ---------- Gradient text ---------- */
.lgk-gradient-gray {
  background-image: linear-gradient(90deg, #fdfdfd, #e6e6e6, #fff, #cfcfcf, #9e9e9e);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font-weight: 600;
}

.lgk-gradient-gray-thick {
  background-image: linear-gradient(90deg, #fdfdfd, #e6e6e6, #fff, #cfcfcf, #9e9e9e);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font-weight: 500;
}

/* ==========================================================
   HERO
   ========================================================== */
.lgk-hero {
  position: relative;
  width: 100%;
  background: var(--lgk-black);
}

.lgk-hero__inner {
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
  background: var(--lgk-black);
}
/* Top verses — Lingke's own poetry riding the top of the sequence,
   just under the floating header pill (~117px desktop / ~158px mobile).
   The two lines stack (grid) and the hero timeline crossfades them. */
.lgk-hero__topline {
  position: absolute;
  inset-inline: 0;
  top: clamp(100px, 11svh, 136px);     /* another ~8px up */
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-inline: clamp(1rem, 4vw, 3rem);
  pointer-events: none;
  transition: opacity 0.4s ease;
}
/* The verse + hint vanish the second the user scrolls (JS toggles). */
.lgk-hero__topline.is-gone { opacity: 0; }
.lgk-hero__topline-line {
  margin: 0;
  max-width: 22ch;
  text-align: center;
  font-size: clamp(1.8rem, 1.2rem + 2.6vw, 3.2rem);
  font-weight: 400;                  /* the mockup: two light lines... */
  letter-spacing: -0.015em;
  line-height: 1.22;
  color: #fff;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
}
.lgk-hero__topline-line strong {
  font-weight: 700;                  /* ...and a heavy "Anywhere." */
}
@media (max-width: 767px) {
  .lgk-hero__topline { top: 146px; }   /* another 8px up (pill is translucent) */
}

/* Chevron-down Lottie + "Scroll down slowly" — bottom-center of the first
   viewport; initScrollHint() shows it only while the page is at the top. */
.lgk-hero__scrollhint {
  position: absolute;
  inset-inline: 0;
  /* Small gap from the hero's end; the lvh-svh lift keeps it above the
     expanded iOS URL bar at the top of the page (house note). */
  inset-block-end: clamp(14px, 3svh, 28px);                       /* fallback */
  inset-block-end: calc(100lvh - 100svh + clamp(14px, 3svh, 28px));
  z-index: 6;
  display: grid;
  justify-items: center;
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}
.lgk-hero__scrollhint.is-on { opacity: 1; }
.lgk-hero__scrollhint-anim { width: 46px; height: 46px; }

/* Canvas */
.lgk-seq__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
}

/* Fallback */
.lgk-seq__fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 2;
  transition: opacity .25s ease;
}
.lgk-seq__fallback.is-hidden {
  opacity: 0;
  pointer-events: none;
}

/* Text overlay */
.lgk-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.lgk-hero__line {
  position: absolute;
  width: 90vw;
  max-width: 900px;
  margin: 0;
  text-align: center;
  font-family: var(--lgk-font);
  font-size: clamp(1.5rem, 3.8vw, 3.2rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--lgk-white);
  opacity: 0;
  will-change: transform, opacity;
}

/* Line 1 — centered on desktop, 28vh from top on mobile */
.lgk-hero__line[data-line="1"] {
  opacity: 1;
  font-size: clamp(1.1rem, 2.4vw, 2rem);
  top: 50%;
  transform: translateY(-50%);
}

.lgk-hero__thin {
  font-weight: 400;
}

/* Product name — larger, bolder */
.lgk-hero__line--product {
  font-size: clamp(2rem, 5.5vw, 4.5rem);
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* Video fade-to-black overlay */
.lgk-hero__blackout {
  position: absolute;
  inset: 0;
  background: var(--lgk-black);
  z-index: 5;
  opacity: 0;
  will-change: opacity;
  pointer-events: none;
}
.lgk-seq__bootmask.is-off {
  opacity: 0;
}

/* Mobile */
@media (max-width: 767px) {
  .lgk-hero__line {
    font-size: clamp(1.2rem, 5.5vw, 1.9rem);
    width: 92vw;
  }
  .lgk-hero__line[data-line="1"] {
    font-size: clamp(1.4rem, 7vw, 2.4rem);
    top: 28vh;
  }
  .lgk-hero__line--product {
    font-size: clamp(1.6rem, 7.5vw, 2.8rem);
  }
}

/* ==========================================================
   FEATURE CARDS — horizontal scroll section
   ========================================================== */
.lgk-features {
  position: relative;
  width: 100%;
  overflow: visible;
  background: var(--lgk-black);
  /* pan-y hands VERTICAL gestures to native scroll and keeps HORIZONTAL
     swipes exclusively ours — before this, a sideways swipe also nudged
     the page's vertical scroll (passive listeners can't prevent it), so
     the pin's scroll-derived X drifted mid-drag and the release jumped. */
  touch-action: pan-y;
}

@media (max-width: 767px) {
  .lgk-features {
    overflow-x: clip;
    overflow-y: visible;
  }
}

.lgk-features__track {
  display: flex;
  gap: 2.5rem;
  padding: 8vh 0;
  /* `max-content` on every breakpoint: with more than two cards the rail is
     wider than the viewport and the pin scrolls it horizontally (the house
     mechanism — see scrollDistance() in lingke-scroll.js). The leading and
     trailing padding keeps the first and last card optically centred at each
     end of the travel. */
  width: max-content;
  padding-left: calc(50vw - min(42vw, 520px) / 2);
  padding-right: calc(50vw - min(42vw, 520px) / 2);
  justify-content: flex-start;
  align-items: flex-start;
  will-change: transform;
}

@media (max-width: 767px) {
  .lgk-features__track {
    padding-right: calc(50vw - min(85vw, 600px) / 2);
    width: max-content;
    justify-content: flex-start;
    cursor: grab;
    -webkit-user-select: none;
    user-select: none;
  }
}

@media (max-width: 767px) {
}

/* ==========================================================
   OBSESSION TITLE — fixed overlay, zoom-in/out like logo
   ========================================================== */
.lgk-obsession-title {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8vw;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  will-change: opacity;
}

.lgk-obsession-title__text {
  font-family: var(--lgk-font);
  font-size: clamp(1.1rem, 3vw, 2rem);
  letter-spacing: -0.01em;
  line-height: 1.3;
  text-align: center;
  margin: 0;
  transform: scale(0.88);
  filter: blur(4px);
  will-change: transform, filter;
}

/* ==========================================================
   OBSESSION BODY — fixed viewport overlay, char-fill
   ========================================================== */
.lgk-obsession {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8vw;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  will-change: opacity, transform;
}

.lgk-obsession__inner {
  max-width: 660px;
  text-align: center;
}

.lgk-obsession__body {
  font-family: var(--lgk-font);
  font-size: clamp(1.1rem, 2.5vw, 1.4rem);
  font-weight: 500;
  line-height: 1.8;
  margin: 0;
  white-space: normal;
}

.lgk-obsession__body .char {
  color: rgba(255, 255, 255, 0.15);
}

@media (max-width: 767px) {
  .lgk-obsession-title__text {
    font-size: clamp(1.3rem, 5.5vw, 2rem);
  }
  .lgk-obsession {
    padding: 0 6vw;
  }
  .lgk-obsession__body {
    font-size: clamp(0.95rem, 4vw, 1.15rem);
  }
}

@media (min-width: 768px) {
}

@media (min-width: 768px) {
}

@media (max-width: 767px) {
}

@media (max-width: 767px) {
}

/* ==========================================================
   TRANSITION overlay (inside features, covers cards during fadeout)
   ========================================================== */
.lgk-features__fade {
  position: absolute;
  inset: 0;
  background: var(--lgk-black);
  opacity: 0;
  z-index: 50;
  pointer-events: none;
  will-change: opacity, background-color;
}

/* Individual card */
.lgk-card {
  flex-shrink: 0;
  width: min(42vw, 520px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  opacity: 0;
  will-change: transform, opacity;
}

@media (max-width: 767px) {
  .lgk-card {
    width: 85vw;
  }
}

.lgk-card__video {
  width: 100%;
  /* Square, like the sibling pages' cards (16/9 read as a letterbox). */
  aspect-ratio: 1 / 1;
  border-radius: 15px;
  overflow: hidden;
  position: relative;
  background: #111;
}

.lgk-card__video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.lgk-card__title {
  margin: 1.5rem 0 0.5rem;
  font-family: var(--lgk-font);
  font-size: clamp(1.4rem, 3.5vw, 2.4rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--lgk-white);
}

.lgk-card__desc {
  margin: 0 0 1.2rem;
  font-family: var(--lgk-font);
  font-size: clamp(0.8rem, 1.8vw, 1.2rem);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.5;
  max-width: 90%;
}

.lgk-card__btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: #0064FF !important;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.25s ease, background 0.25s ease;
  pointer-events: auto;
}

.lgk-card__btn:hover,
.lgk-card__btn:focus {
  transform: scale(1.12);
  background: #0052d6 !important;
  color: #fff !important;
}

.lgk-card__btn:active {
  transform: scale(0.96);
  background: #0046b8 !important;
}

/* ---------- Modal panels (Apple-style centered) ---------- */
.lgk-panel-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  z-index: 100010;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.lgk-panel-overlay.is-active {
  opacity: 1;
  pointer-events: auto;
}

.lgk-panel {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.92);
  width: min(88vw, 520px);
  /* 80vh made panel-enclosure the only panel of the five that clipped — and it
     clipped mid-word, which reads as broken rather than as "scroll for more".
     Dan ruled out shrinking the video and did not want any more copy cut, so
     the height comes from the frame instead: 90vh, tighter line spacing below,
     and less top padding. Verified FITS at 1440x900 and 390x844 with the clip
     at full size. Re-check with `node tools/panel-fit-budget.js` before
     lowering any of these three numbers again. */
  max-height: 90vh;
  background: #fff;
  z-index: 100011;
  border-radius: 15px;
  padding: 1.75rem 2rem 2rem;
  overflow-y: auto;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.lgk-panel.is-open {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: auto;
}

.lgk-panel__close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease;
  opacity: 0.5;
  padding: 0;
  color: #000 !important;
}

.lgk-panel__close:hover,
.lgk-panel__close:focus {
  opacity: 1;
  background: transparent !important;
  color: #000 !important;
}
/* House focus policy (IS 5568, same as every sibling brand): NO ring for
   mouse/touch focus, a visible ring for KEYBOARD focus only. */
#lingke-page a:focus,
#lingke-page button:focus,
#lingke-page [tabindex]:focus,
.lgk-panel button:focus {
  outline: none !important;
  box-shadow: none !important;
}
#lingke-page a:focus-visible,
#lingke-page button:focus-visible,
.lgk-panel button:focus-visible {
  outline: 2px solid #7ab0ff !important;
  outline-offset: 3px;
  box-shadow: none !important;
}
#lingke-page a,
#lingke-page button,
.lgk-panel button {
  -webkit-tap-highlight-color: transparent;
}

/* ---------- Rich panel content (NoirScene, Lumens) ---------- */
.lgk-panel__suptitle {
  font-family: var(--lgk-font);
  font-size: clamp(0.9rem, 2vw, 1.1rem);
  font-weight: 400;
  color: #272626;
  text-align: center;
  margin: 0 0 0.5rem;
}

.lgk-panel__headline {
  font-family: var(--lgk-font);
  font-size: clamp(1.35rem, 3.5vw, 1.75rem);
  font-weight: 500;
  color: #272626;
  text-align: center;
  line-height: 1.25;
  margin: 0 0 1.25rem;
}

.lgk-panel__video {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  margin: 0 0 1rem;
}

.lgk-panel__video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.lgk-panel__compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* row-gap 0, column-gap 1rem. The heads sit in grid row 1 and the spec stacks
     in row 2, so a shared `gap` put a blank line between a heading and its own
     list — the specs read as floating rather than belonging to the model above
     them. The columns still need their 1rem apart. */
  gap: 0 1rem;
  text-align: center;
  margin: 0 0 1.25rem;
}

.lgk-panel__compare-col {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  font-family: var(--lgk-font);
  font-size: clamp(0.75rem, 2vw, 0.9rem);
  font-weight: 400;
  color: #9a9999;
  line-height: 1.4;
}

/* Column heading. The model names used to sit at the BOTTOM of each column, so
   a reader had to reach line 3 to discover what separated the two lists — until
   then "28 mm tweeter" vs "20 mm silk-dome tweeter" read as a competitor
   comparison or a good/better ladder. It is neither: two designs for two sizes
   of speaker. Heading on top, and the question never arises. */
.lgk-panel__compare-head {
  font-family: var(--lgk-font);
  font-size: clamp(0.75rem, 2vw, 0.9rem);
  line-height: 1.4;
  color: #272626;
  font-weight: 600;
  align-self: end;          /* short head sits on the tall head's last line */
  text-wrap: balance;       /* else "…Starry M5" leaves M5 hanging alone */
  margin-bottom: 0.25rem;   /* just clear of its own list, nothing more */
}

.lgk-panel__feature {
  font-family: var(--lgk-font);
  font-size: clamp(0.85rem, 2.2vw, 1rem);
  font-weight: 400;
  color: #9a9999;
  text-align: center;
  line-height: 1.45;
  margin: 0 0 0.35rem;
}

/* The scan layer. Every line in this panel was one weight and one colour, so
   the reader had to read all of it to find any of it — which is why adding
   facts as more grey sentences makes a panel LONGER to read, not shorter.
   Term dark, consequence grey, model tag dimmer still: the eye takes the terms
   in one pass and drops into a clause only where it is curious.
   NOTE: .lgk-panel is background:#fff — emphasis here is DARK, never white. */
.lgk-panel__feature strong {
  color: #272626;
  font-weight: 600;
}

/* "Listening T5" tag — a technology that is NOT range-wide. Dan confirmed the
   120 mm waveguide and the alu-magnesium diaphragm are T5-only (2026-08-04).
   Do not promote either into the shared A5/T5/M5 column. */
.lgk-panel__only {
  color: #b8b7b7;
  white-space: nowrap;
}

.lgk-panel__desc {
  font-family: var(--lgk-font);
  font-size: clamp(0.8rem, 2vw, 0.95rem);
  font-weight: 500;
  color: #272626;
  text-align: center;
  line-height: 1.55;
  margin: 1rem 0 0;
}

/* Mobile cards */
@media (max-width: 767px) {
  .lgk-features__track {
    gap: 1.5rem;
    padding: 6vh 4vw;
    padding-right: calc(50vw - 85vw / 2);
    width: max-content;
    justify-content: flex-start;
    cursor: grab;
    -webkit-user-select: none;
    user-select: none;
  }
  .lgk-card {
    width: 85vw;
  }
  .lgk-card__title {
    font-size: clamp(1.15rem, 5vw, 1.6rem);
  }
  .lgk-card__desc {
    font-size: 0.8rem;
  }
  .lgk-card__btn {
    width: 44px;
    height: 44px;
  }
  .lgk-panel {
    width: 92vw;
    /* 2rem of side padding on a 359px panel is 64px — 18% of the width spent on
       margin. Narrower padding means more words per line, so fewer lines, which
       buys height without touching a single word. */
    padding: 1.75rem 1.25rem 1.5rem;
  }
}

.lgk-buy.is-visible {
  opacity: 1;
  filter: blur(0);
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

@media (max-width: 767px) {
}

/* ==========================================================
   RTL (Hebrew / Arabic)
   ========================================================== */
html[dir="rtl"] .lgk {
  direction: rtl;
}
html[dir="rtl"] .lgk-hero__line,
html[dir="rtl"] .lgk-card__title,
html[dir="rtl"] .lgk-card__desc,
html[dir="rtl"] .lgk-panel__suptitle,
html[dir="rtl"] .lgk-panel__headline,
html[dir="rtl"] .lgk-panel__feature,
html[dir="rtl"] .lgk-panel__compare-head,
html[dir="rtl"] .lgk-panel__only,
html[dir="rtl"] .lgk-panel__desc,
html[dir="rtl"] .lgk-cinema__title,
html[dir="rtl"] .lgk-cinema__body,
html[dir="rtl"] .lgk-obsession-title__text,
html[dir="rtl"] .lgk-obsession__body {
  direction: rtl;
}

html[dir="rtl"] .lgk-panel__close {
  right: auto;
  left: 0.75rem;
}

html[dir="rtl"] .lgk-gradient-gray,
html[dir="rtl"] .lgk-gradient-gray-thick,
html[dir="rtl"] .lgk-gradient-teal {
  background-image: linear-gradient(-90deg, #fdfdfd, #e6e6e6, #fff, #cfcfcf, #9e9e9e);
}

/* Hebrew font override — matches theme Custom CSS google-sans-varz */
html[lang^="he"] .lgk,
html[lang^="he"] .lgk *:not(svg):not(svg *) {
  font-family: "google-sans-varz", sans-serif !important;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .lgk-hero__overlay {
    flex-direction: column;
    gap: 2rem;
    padding-top: 15vh;
  }
  .lgk-hero__line {
    position: relative !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  .lgk-hero__blackout {
    opacity: 0 !important;
  }
  .lgk-card {
    opacity: 1 !important;
    transform: none !important;
  }
  .lgk-features__track {
    flex-wrap: wrap;
    width: auto;
  }
  .lgk-features__fade {
    display: none !important;
  }
  .lgk-obsession-title,
  .lgk-obsession {
    position: relative !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  .lgk-obsession .char {
    color: #fff !important;
  }
}

/* ==========================================================================
   STICKY BUY BUTTON — fixed bottom-centre pill (same pattern as Valerion /
   LB Speakers). Hidden by default; js/lingke-scroll.js adds `.is-visible`
   during the THX pinned scene (in as the THX logo appears, out before the
   pin releases).
   ========================================================================== */
.lgk-buy {
  position: fixed;
  bottom: 1.25rem;
  /* Plain `left: 50%` (NOT inset-inline-start): in RTL the logical prop flips
     to right while translateX(-50%) does not, drifting the pill off-centre.
     Valerion / LB use this same approach. */
  left: 50%;
  transform: translateX(-50%) translateY(30px);
  z-index: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.7rem 2.2rem;
  background: #0065ff;
  color: #fff !important;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  border-radius: 50px;
  white-space: nowrap;
  cursor: pointer;
  opacity: 0;
  filter: blur(10px);
  pointer-events: none;
  will-change: opacity, filter, transform;
  transition: opacity 0.5s ease, filter 0.5s ease,
              transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              background 0.25s ease;
}

.lgk-buy.is-visible {
  opacity: 1;
  filter: blur(0);
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.lgk-shop-tab.is-active { color: #262628 !important; }

/* Gentle fade replayed on every tab switch (initShop() re-adds it). */
.lgk-shop-panel.is-switch { animation: lgk-panel-in 0.45s ease; }

/* ==========================================================================
   FINISH / CONSULT — full-width SQUARE ambient video, then the "do it right"
   copy + WhatsApp CTA. Matches the existing dark sections (white heading like
   .lgk-slider-title, lighter body text, pill CTA).
   ========================================================================== */
.lgk-finish {
  width: 100%;
  background: #18181b;            /* matches the Technology section */
}

.lgk-finish__text {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(2.5rem, 8vh, 5rem) 20px clamp(1.5rem, 4vh, 2.5rem);
  text-align: start;             /* right in Hebrew, left in English */
}

.lgk-finish__title {
  margin: 0 0 clamp(1.2rem, 4vh, 2rem);
  color: #fff;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-size: clamp(1.7rem, 5vw, 2.8rem);
}

.lgk-finish__body p {
  margin: 0 0 1.1em;
  color: rgba(235, 235, 245, 0.78);
  font-size: clamp(1rem, 2.2vw, 1.12rem);
  line-height: 1.65;
  text-wrap: pretty;
}

.lgk-finish__body p:last-child { margin-bottom: 0; }

/* Small sub-heading inside the body ("For dealers, installers…"). */
.lgk-finish__mini {
  margin: clamp(1.6rem, 5vh, 2.4rem) 0 0.7em;
  color: #fff;
  font-weight: 600;
  font-size: clamp(1.05rem, 2.4vw, 1.25rem);
  line-height: 1.3;
}

/* CTA — STICKY: floats at the viewport bottom while the section scrolls, then
   docks at its final spot (the buy-now feel). Centred; the empty wrap passes
   clicks through, the pill re-enables them. */
.lgk-finish__cta-wrap {
  position: sticky;
  bottom: clamp(16px, 3vh, 28px);
  z-index: 10;
  margin-block-start: clamp(2.2rem, 6vh, 4rem);   /* air from the copy above */
  text-align: center;
  padding-bottom: clamp(1.5rem, 5vh, 3rem);
  pointer-events: none;
}

/* WhatsApp CTA — green pill with the glyph. Enters with a blur + rise fade
   (.is-visible, added by JS when the section scrolls in) — NO box-shadow. */
.lgk-finish__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.9rem;
  background: #1daa21;
  color: #fff !important;
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  border-radius: 50px;
  white-space: nowrap;
  pointer-events: auto;
  opacity: 0;
  transform: translateY(24px);
  filter: blur(8px);
  transition: opacity 0.5s ease, filter 0.5s ease,
              transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), background 0.2s ease;
}

.lgk-finish.is-visible .lgk-finish__cta {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

.lgk-finish__cta:hover  { background: #178c1b; transform: translateY(-2px); }

.lgk-finish__cta:active { transform: translateY(0); }

.lgk-finish__wa { width: 1.3em; height: 1.3em; flex: 0 0 auto; }

@media (min-width: 768px) {
}

@media (prefers-reduced-motion: reduce) {
  
    .lgk-buy.is-visible { filter: none; }
}

@media (min-width: 768px) {
}

@media (prefers-reduced-motion: reduce) {
  
    .lgk-finish__cta { opacity: 1; transform: none; filter: none; transition: none; }
  
    .lgk-finish__cta:hover { transform: none; }
}

@media (max-width: 767px) {
}

@media (max-width: 767px) {
}

/* -------------------------------------------------------------------------
   HERO — desktop scrubs a WebP frame sequence on canvas (Valerion pattern);
   mobile still plays a single MP4 until the portrait sequence exists.
   ------------------------------------------------------------------------- */
.lgk-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

@media (max-width: 767px) {
  .lgk-hero__video { object-fit: cover; }
}

/* The canvas and its stand-in still occupy the same box as the video.
   Both stay dormant until initSeq() marks the section, so a JS failure
   simply leaves the MP4 playing. */
.lgk-seq__canvas,
.lgk-seq__fallback {
  display: none;
}

.lgk-hero.is-seq .lgk-hero__video { display: none; }

.lgk-hero.is-seq .lgk-seq__canvas,
.lgk-hero.is-seq .lgk-seq__fallback {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.lgk-hero.is-seq .lgk-seq__fallback {
  object-fit: cover;
  z-index: 2;
  transition: opacity .25s ease;
}

/* Dropped the instant the first real frame is on the canvas. */
.lgk-hero.is-seq .lgk-seq__fallback.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.lgk-seq__bootmask.is-off { opacity: 0; }

/* -------------------------------------------------------------------------
   REDUCED MOTION — paint every authored scene in its resting state
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
}

@media (max-width: 767px) {
}

@media (prefers-reduced-motion: reduce) {
}


/* ===========================================================================
   V2 — CHOOSE YOUR LINGKE
   Replaces the V1 photo gallery and the Embla series carousel. Four model
   cards, real room photography, one destination: the products page.
   Desktop-first: the grid steps 4 -> 2 -> 1 so nothing breaks on a laptop,
   but the page is authored and QA'd at 1440.
   =========================================================================== */

.lgk-choose {
  position: relative;
  background: var(--lgk-black);
  padding: clamp(8rem, 17vh, 13rem) clamp(2rem, 3.4vw, 3.25rem) clamp(6rem, 11vh, 9rem);
}

.lgk-choose__head {
  max-width: 1720px;
  margin: 0 auto clamp(3.25rem, 6vh, 4.75rem);
}

.lgk-choose__eyebrow {
  margin: 0 0 1.1rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.44);
}

.lgk-choose__title {
  margin: 0 0 0.85rem;
  font-size: clamp(2rem, 4.2vw, 3.4rem);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.08;
  color: var(--lgk-white);
}

.lgk-choose__sub {
  margin: 0;
  max-width: 64ch;
  font-size: clamp(1rem, 1.25vw, 1.14rem);
  font-weight: 400;
  line-height: 1.62;
  color: rgba(255, 255, 255, 0.62);
}

.lgk-choose__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.1rem, 1.5vw, 1.6rem);
  max-width: 1720px;
  margin: 0 auto;
}

/* --- one model card ------------------------------------------------------ */

.lgk-model {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border-radius: 16px;
  background: #f5f5f7;             /* light body under the photo — no border */
  border: 0;
  overflow: hidden;
  /* NO transform transition and NO hover lift on the slide itself:
     Embla's loop repositions SLIDES with instant transforms to close the
     seam — a transform transition here animates that jump, so the card
     visibly "flies" across the rail at the loop point. The hover feel
     stays on the image zoom + background only. */
  transition: background-color 0.35s ease;
}

.lgk-model:hover,
.lgk-model:focus-visible {
  background: #ffffff;
}

.lgk-model:focus-visible {
  outline: 2px solid #0065ff;      /* white ring is invisible on the light body */
  outline-offset: 3px;
}

.lgk-model__media {
  display: block;
  position: relative;
  /* Square, like the sibling pages' product cards — V3's 3/4 portrait
     made every card read far too tall. */
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #000;
}

.lgk-model__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.001);           /* kills the 1px edge crawl on scale-back */
  transition: transform 0.75s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.lgk-model:hover .lgk-model__media img,
.lgk-model:focus-visible .lgk-model__media img { transform: scale(1.055); }

.lgk-model__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 1.75rem 1.6rem 1.6rem;
}

.lgk-model__series {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: rgba(60, 60, 67, 0.6);
}

.lgk-model__name {
  display: block;
  /* The descriptive line under the name was DELETED on Dan's instruction
     (2026-08-04) — the name now sits directly above the finishes chip, so it
     carries the gap the line used to. */
  margin-bottom: 1rem;
  font-size: 1.62rem;
  font-weight: 500;
  letter-spacing: -0.022em;
  line-height: 1.14;
  color: #1a1a1a;
}

.lgk-model__line {
  display: block;
  margin-bottom: 1.1rem;
  font-size: 0.98rem;
  line-height: 1.58;
  color: rgba(60, 60, 67, 0.72);
}

.lgk-model__specs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.9rem;             /* the swatch row now carries the gap to the CTA */
}

/* Finish swatches. Colours are read off the manufacturer's own photography — the
   only published finish sets are the A5's seven folders and the M3's eight files;
   the T5 and M5 swatches are photo-derived and pending confirmation. Each dot
   carries its colour as an inline --sw so the value lives next to the product in
   the template rather than in 21 stylesheet rules. */
.lgk-model__finishes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 1.35rem;
}

.lgk-sw {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--sw);
  /* inset, not border — keeps every dot the same 14px whatever the finish, and
     gives white and near-black swatches an edge against the card. */
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.16);
  transition: transform 0.25s ease;
}

.lgk-model:hover .lgk-sw,
.lgk-model:focus-visible .lgk-sw { transform: scale(1.12); }

.lgk-model__specs span {
  padding: 0.32rem 0.66rem;
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 99px;
  font-size: 0.76rem;
  letter-spacing: 0.01em;
  color: rgba(60, 60, 67, 0.78);
  white-space: nowrap;
}

.lgk-model__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: auto;                  /* pins the CTA to the bottom of every card */
  font-size: 0.9rem;
  font-weight: 500;
  color: #1a1a1a;
}

/* CSS-drawn arrow so the page carries no extra asset */
.lgk-arrow {
  display: inline-block;
  width: 0.62em;
  height: 0.62em;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.3s ease;
}

.lgk-model:hover .lgk-arrow,
.lgk-model:focus-visible .lgk-arrow { transform: rotate(45deg) translate(2px, -2px); }

/* RTL: the CSS-drawn chevron (border top+right at 45deg = points right)
   must point LEFT in Hebrew; -135deg mirrors it, and the hover nudge
   rides the rotated frame so it still travels along the arrow. */
html[dir="rtl"] .lgk-arrow { transform: rotate(-135deg); }
html[dir="rtl"] .lgk-model:hover .lgk-arrow,
html[dir="rtl"] .lgk-model:focus-visible .lgk-arrow,
html[dir="rtl"] .lgk-choose__all:hover .lgk-arrow {
  transform: rotate(-135deg) translate(2px, -2px);
}

/* --- the one button out of the section ----------------------------------- */

.lgk-choose__foot {
  max-width: 1720px;
  margin: clamp(3.25rem, 6vh, 4.5rem) auto 0;
  text-align: center;
}

.lgk-choose__all {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.9rem 2.1rem;
  border: 0;
  border-radius: 999px;
  background: #0065ff;           /* the house CTA blue — every brand page */
  font-size: 0.98rem;
  font-weight: 500;
  color: #fff;
  text-decoration: none;
  transition: background-color 0.25s ease, transform 0.25s ease;
}

.lgk-choose__all:hover,
.lgk-choose__all:focus-visible {
  background: #0052d6;
  color: #fff;
  transform: translateY(-2px);
}

.lgk-choose__all:hover .lgk-arrow { transform: rotate(45deg) translate(2px, -2px); }

/* --- Choose your Lingke as the house sonic-slider ------------------------
   Rides the component's --shop variant exactly like Storm Audio's product
   sliders: the shop variant kills the bottom scrim, gives the 84%-mobile /
   30%-desktop slide widths (the edge peek), and the is-current/is-inview
   card-content entrance. Everything below is scoped under #lingke-page:
   sonic-slider.css loads AFTER this file, so equal-specificity overrides
   lose (the source-order trap) — the id outranks it at any order. */
.lgk-choose__slider {
  max-width: 1720px;
  margin: 0 auto;
}
/* Mobile: the carousel ignores the section's side padding and runs the
   full viewport width — the component's own --ss-edge (16px start inset)
   is the only margin, exactly like the sibling pages' carousels. */
@media (max-width: 767px) {
  .lgk-choose__slider {
    width: 100vw;
    max-width: none;
    margin-inline: calc(50% - 50vw);
  }
}
/* The card defines its own height (square image + light body), not the
   component's slide aspect. */
#lingke-page .sonic-slider--lgk .sonic-slider__slide {
  aspect-ratio: auto;
  height: auto;
  background: #f5f5f7;               /* the light body — no border */
  display: flex;
  flex-direction: column;
}
#lingke-page .sonic-slider--lgk .sonic-slider__slide:hover,
#lingke-page .sonic-slider--lgk .sonic-slider__slide:focus-visible {
  background: #ffffff;
}

/* Card-content entrance — the Storm/shop grammar mirrored onto the lgk
   card fields: hidden + shifted at rest, slide in staggered when the card
   is current (mobile) / in view (desktop). */
#lingke-page .sonic-slider--lgk .lgk-model__series,
#lingke-page .sonic-slider--lgk .lgk-model__name,
#lingke-page .sonic-slider--lgk .lgk-model__specs,
#lingke-page .sonic-slider--lgk .lgk-model__finishes,
#lingke-page .sonic-slider--lgk .lgk-model__cta {
  opacity: 0;
  transform: translateX(-26px);
  transition: opacity 0.6s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
[dir="rtl"] #lingke-page .sonic-slider--lgk .lgk-model__series,
[dir="rtl"] #lingke-page .sonic-slider--lgk .lgk-model__name,
[dir="rtl"] #lingke-page .sonic-slider--lgk .lgk-model__specs,
[dir="rtl"] #lingke-page .sonic-slider--lgk .lgk-model__finishes,
[dir="rtl"] #lingke-page .sonic-slider--lgk .lgk-model__cta {
  transform: translateX(26px);
}
#lingke-page .sonic-slider--lgk .sonic-slider__slide.is-current .lgk-model__series,
#lingke-page .sonic-slider--lgk .sonic-slider__slide.is-current .lgk-model__name,
#lingke-page .sonic-slider--lgk .sonic-slider__slide.is-current .lgk-model__specs,
#lingke-page .sonic-slider--lgk .sonic-slider__slide.is-current .lgk-model__finishes,
#lingke-page .sonic-slider--lgk .sonic-slider__slide.is-current .lgk-model__cta {
  opacity: 1;
  transform: none;
}
#lingke-page .sonic-slider--lgk .sonic-slider__slide.is-current .lgk-model__series   { transition-delay: 0.05s; }
#lingke-page .sonic-slider--lgk .sonic-slider__slide.is-current .lgk-model__name     { transition-delay: 0.12s; }
#lingke-page .sonic-slider--lgk .sonic-slider__slide.is-current .lgk-model__specs    { transition-delay: 0.19s; }
#lingke-page .sonic-slider--lgk .sonic-slider__slide.is-current .lgk-model__finishes { transition-delay: 0.26s; }
#lingke-page .sonic-slider--lgk .sonic-slider__slide.is-current .lgk-model__cta      { transition-delay: 0.33s; }
@media (min-width: 768px) {
  #lingke-page .sonic-slider--lgk .sonic-slider__slide.is-inview .lgk-model__series,
  #lingke-page .sonic-slider--lgk .sonic-slider__slide.is-inview .lgk-model__name,
  #lingke-page .sonic-slider--lgk .sonic-slider__slide.is-inview .lgk-model__specs,
  #lingke-page .sonic-slider--lgk .sonic-slider__slide.is-inview .lgk-model__finishes,
  #lingke-page .sonic-slider--lgk .sonic-slider__slide.is-inview .lgk-model__cta {
    opacity: 1;
    transform: none;
  }
  #lingke-page .sonic-slider--lgk .sonic-slider__slide.is-inview .lgk-model__series   { transition-delay: 0.05s; }
  #lingke-page .sonic-slider--lgk .sonic-slider__slide.is-inview .lgk-model__name     { transition-delay: 0.12s; }
  #lingke-page .sonic-slider--lgk .sonic-slider__slide.is-inview .lgk-model__specs    { transition-delay: 0.19s; }
  #lingke-page .sonic-slider--lgk .sonic-slider__slide.is-inview .lgk-model__finishes { transition-delay: 0.26s; }
  #lingke-page .sonic-slider--lgk .sonic-slider__slide.is-inview .lgk-model__cta      { transition-delay: 0.33s; }
}
@media (prefers-reduced-motion: reduce) {
  #lingke-page .sonic-slider--lgk .lgk-model__series,
  #lingke-page .sonic-slider--lgk .lgk-model__name,
  #lingke-page .sonic-slider--lgk .lgk-model__specs,
  #lingke-page .sonic-slider--lgk .lgk-model__finishes,
  #lingke-page .sonic-slider--lgk .lgk-model__cta {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* --- graceful step-down; the page is authored for desktop ---------------- */

@media (max-width: 1180px) {
  .lgk-choose__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .lgk-choose__grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .lgk-model,
  .lgk-model__media img,
  .lgk-sw,
  .lgk-arrow { transition: none; }
  .lgk-model:hover { transform: none; }
  .lgk-model:hover .lgk-model__media img { transform: scale(1.001); }
  .lgk-model:hover .lgk-sw { transform: none; }
  .lgk-seen__hero video { height: 100%; transform: none !important; }
}


/* ===========================================================================
   V3 — MEANT TO BE SEEN
   The one section that argues looks rather than engineering. Authored for both
   breakpoints from the start: the lead is two columns on desktop and stacks on
   mobile, and the trio collapses to a single column.
   =========================================================================== */

.lgk-seen {
  position: relative;
  background: var(--lgk-black);
  padding: clamp(5rem, 12vh, 9rem) clamp(1.25rem, 3.4vw, 3.25rem) clamp(5rem, 11vh, 8rem);
}

/* --- lead: copy beside the stand shot ------------------------------------ */

.lgk-seen__lead {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
  max-width: 1720px;
  margin: 0 auto;
}

/* Two columns keyed on ASPECT, not width alone.
   The old trigger was `min-width: 900px`. A phone on its side is 844px wide, so
   it fell through to the stacked layout — which put the copy in a 46ch column on
   the left, left the ENTIRE right half of the screen empty black, and dropped
   the 9:16 film underneath as a 172px thumbnail. A whole screen of nothing, which
   is exactly why the page read as jumping from the story straight to the cards.
   Aspect is the honest test: if the viewport is wider than it is tall there is
   room to place the film beside the copy, whatever the pixel width. It also fixes
   the reverse case — a tall narrow desktop window now stacks instead of cramming
   a 44vh-wide film next to the text. */
@media (min-width: 760px) and (min-aspect-ratio: 1 / 1) {
  .lgk-seen__lead {
    /* Single column at every aspect now — the film is a full-bleed
       parallax band below the copy, no longer a side column. */
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
}

/* Phone on its side: real width, almost no height. Tighten the vertical rhythm
   and the type so the whole beat lands in about one screen instead of scrolling
   through empty black. The film keeps its 44vh cap — 44vh of width is 78vh of
   height, so it fills the short viewport rather than shrinking with it. */
@media (orientation: landscape) and (max-height: 600px) {
  .lgk-seen {
    /* It has to HOLD, not flash.
       Two things stack up against this beat in landscape. The pinned act
       releases ~426px (1.09 screens) before this section arrives, and that
       stretch is solid black — the feature rail scrolling away under a fully
       opaque fade. Then, once the two-column layout stopped it wasting half the
       screen, the section collapsed to 386px: under one screen tall, so it was
       gone before it registered. A full screen of black followed by a section
       that flashes past is exactly why the page read as jumping from the story
       straight to the product cards.
       Portrait gives this beat 1.35 screens. Landscape now gets the same, with
       the composition centred in it. */
    min-height: 140vh;
    min-height: 140svh;
    display: flex;
    align-items: center;
    padding-top: clamp(1.5rem, 6vh, 3rem);
    padding-bottom: clamp(1.5rem, 6vh, 3rem);
  }

  .lgk-seen__lead { width: 100%; }

  .lgk-seen__eyebrow { margin-bottom: 0.6rem; }

  .lgk-seen__title {
    font-size: clamp(1.5rem, 3.4vw, 2.2rem);
    margin-bottom: 0.75rem;
  }

  .lgk-seen__body {
    font-size: clamp(0.85rem, 1.5vw, 1rem);
    line-height: 1.5;
    margin-bottom: 0.75rem;
  }

  .lgk-seen__copy { max-width: 54ch; }
}

.lgk-seen__copy {
  max-width: 46ch;
}

.lgk-seen__eyebrow {
  margin: 0 0 1.1rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.44);
}

.lgk-seen__title {
  margin: 0 0 1.35rem;
  font-size: clamp(2.1rem, 6vw, 3.6rem);
  font-weight: 500;
  letter-spacing: -0.028em;
  line-height: 1.05;
  color: var(--lgk-white);
}

.lgk-seen__body {
  margin: 0 0 1.1rem;
  font-size: clamp(1rem, 2.6vw, 1.16rem);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.64);
}

.lgk-seen__body--last {
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.9);
}

/* Full-bleed parallax band (breaks out of the section's padding): the
   film fills the whole viewport; the JS slides the taller video through
   the window as the band scrolls past. Source is 1440x2560, so the
   center crop still has pixels to spare at any width. */
.lgk-seen__hero {
  position: relative;
  margin: clamp(2.5rem, 7vh, 4.5rem) calc(50% - 50vw) 0;
  width: 100vw;
  max-width: none;
  height: 100svh;
  overflow: hidden;
}

.lgk-seen__hero video {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 130%;                    /* parallax headroom — JS translates */
  object-fit: cover;
  display: block;
  will-change: transform;
}


@media (min-width: 760px) {
}

@media (max-width: 600px) {
}

@media (prefers-reduced-motion: reduce) {
}


/* ===========================================================================
   V3 — the hero finale is the logo, not the words "Lingke Audio".
   The h1 keeps its text for search and screen readers; this SVG sits on top.
   Sized to land at roughly the width the wordmark used to occupy.
   =========================================================================== */

.lgk-hero__logo {
  display: block;
  width: min(41vw, 434px);       /* -30% from V3's 58vw/620px — too big */
  height: auto;
  margin: 0 auto;
}

@media (max-width: 767px) {
  .lgk-hero__logo { width: min(55vw, 294px); }   /* -30% */
}