/* BrandStatement — Figma "Manifesto" (section 3, 1440 ref: y986 h828).
   Cream bg, centered stack: Σ1 monogram + SUMONE wordmark → slogan (60px,
   --text-d60) → supporting line (30px, --text-d30) → underlined uppercase
   16px text link. Height comes from generous padding, never fixed. */

.cc_LmUd6PvvAN_ewcNoeaX4i .bs {
  position: relative;
  width: 100%;
  /* Figma 1440×828 (.section-14 is `flex-direction: column`, so child y is the
     CUMULATIVE margin flow, not nested-absolute):
       .frame-26        mt66  h290 → y  66..356
       .nothing-extra   mt57  h164 → y 413..577
       .text-wrapper-31 mt32  h41  → y 609..650
       .text-wrapper-32 mt57  h28  → y 707..735  (fixed box; glyph line 710..732)
     Top padding 66; bottom air 828 - 731.93 = 96px. */
  padding: clamp(48px, 10.73vw, 206px) 0 clamp(64px, 10.68vw, 205px); /* 206 top / 205 air @1920 */
  background-color: var(--color-cream, #f7f5f2);
  color: var(--bs-text, var(--color-black, #000000));
  text-align: center;
}
.cc_LmUd6PvvAN_ewcNoeaX4i .bs__inner {
  /* Figma text frames sit x81..x1358 → 81px side inset @1440. */
  max-width: 1920px;
  margin: 0 auto;
  padding-inline: clamp(16px, 5.63vw, 81px);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* The agency supplied the complete Σ1 + SUMONE lockup as one composed image.
   Figma frame: 603×290 at x418 (centered), y66..356. */
.cc_LmUd6PvvAN_ewcNoeaX4i .bs__lockup {
  display: block;
  width: auto;
  /* Figma .frame-26 = 603×290, centred at x418 ((1440-603)/2 = 418.5). The export
     ships .frame-26 as an EMPTY div (no background-image), so the asset's true
     ratio is unverifiable — scale on natural ratio and let the 603px width cap
     stand in for the design box. No max-height: the editor `logoWidth` prop
     feeds --bs-lockup-w below, and a stylesheet max-height would silently cap it. */
  max-width: min(100%, var(--bs-lockup-w, 603px));
  height: auto;
  object-fit: contain;
  object-position: center center;
  /* lockup bottom 356 → slogan top 413 = 57px */
  margin: 0 auto clamp(32px, 2.969vw, 57px); /* 57 @1920 */
}

/* The source MP4 deliberately keeps its original white stage. Blending that
   stage into the section avoids H.264/browser colour-conversion seams while
   preserving the black SUMONE artwork. */
.cc_LmUd6PvvAN_ewcNoeaX4i .sumone-animation-wrapper {
  background-color: var(--bs-bg, var(--color-cream));
  isolation: isolate;
  overflow: hidden;
}

/* The editor-provided transparent GIF is a mobile-only alternative. Keeping it
   out of the desktop render path preserves the sharper, lighter MP4 there. */
.cc_LmUd6PvvAN_ewcNoeaX4i .sumone-animation-gif {
  display: none;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
}

/* The blend must sit on its own element, NOT on the <video>. `filter` promotes
   the video into a separate compositing layer, and mobile WebKit/Chromium then
   ignore a mix-blend-mode declared on that same element — the white stage came
   through as an opaque box on phones while desktop looked correct. Blending the
   wrapping layer keeps the subtree out of the video-overlay path. (The two
   other sections using this asset — WardrobeSystem, StoryPage — blend without
   a filter, which is why only this one broke.) */
.cc_LmUd6PvvAN_ewcNoeaX4i .sumone-animation-blend {
  display: block;
  width: 100%;
  height: 100%;
  mix-blend-mode: multiply;
}

.cc_LmUd6PvvAN_ewcNoeaX4i .sumone-animation-wrapper video {
  display: block;
  width: 100%;
  height: 100%;
  /* contain at every breakpoint: below 1280px the wrapper takes an
     aspect-ratio box while `object-fit` on that <div> is inert, so a
     non-square source used to be cropped by the wrapper's overflow. */
  object-fit: contain;
  object-position: center center;
  /* The source's nominal white measures ~234.5 luma because its H.264 stream
     has no explicit colour-range metadata. Some WebKit/Chromium paths keep
     that value instead of expanding it to full white; multiply would then
     darken the paper and reveal the 960px video rectangle. Lifting the video
     by 255 / 234.5 before compositing clips only the near-white stage to white;
     true black artwork remains black. */
  filter: brightness(1.09);
}

/* Optional small uppercase label above the monogram. */
.cc_LmUd6PvvAN_ewcNoeaX4i .bs__eyebrow {
  font-family: var(--font-label, sans-serif);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--bs-accent, var(--color-gray-neutral, #8b8b8b));
  margin-bottom: clamp(24px, 2.5vw, 36px);
}

/* Σ + 1 = SUMONE monogram / wordmark row. */
.cc_LmUd6PvvAN_ewcNoeaX4i .bs__equation {
  font-family: var(--font-display, sans-serif);
  font-size: var(--text-d90, clamp(44px, 6.25vw, 90px));
  line-height: 1;
  letter-spacing: -0.02em;
  display: inline-flex;
  align-items: baseline;
  gap: 0.32em;
  flex-wrap: wrap;
  justify-content: center;
  /* Fallback path (no logoImage): same 57px lockup→slogan gap as .bs__lockup,
     otherwise the slogan sits flush against the equation. */
  margin-bottom: clamp(32px, 3.96vw, 57px);
}
.cc_LmUd6PvvAN_ewcNoeaX4i .bs__eq {
  font-weight: 300;
}
.cc_LmUd6PvvAN_ewcNoeaX4i .bs__op {
  font-weight: 200;
  color: var(--bs-text, var(--color-black, #000000));
  opacity: 0.55;
}
.cc_LmUd6PvvAN_ewcNoeaX4i .bs__glyph {
  height: 0.92em;
  width: auto;
  display: inline-block;
  object-fit: contain;
}
.cc_LmUd6PvvAN_ewcNoeaX4i .bs__brand {
  letter-spacing: 0.02em;
}
.cc_LmUd6PvvAN_ewcNoeaX4i .bs__brand-first {
  font-weight: 400;
}
.cc_LmUd6PvvAN_ewcNoeaX4i .bs__brand-accent {
  font-weight: 700;
}
.cc_LmUd6PvvAN_ewcNoeaX4i .bs__logo {
  height: 0.62em;
  width: auto;
  display: inline-block;
  object-fit: contain;
}

/* Slogan — 60px display line (e.g. "Nothing extra. Everything essential.").
   Figma: Manrope Regular (400), black, tracking 2% , leading normal.
   TRACKING: the export writes `letter-spacing: 2px` on .nothing-extra, but that
   is Figma's PERCENT value (2) serialised with a px suffix — the same exporter
   bug that puts `font-weight: 400` on "Manrope-Bold" parents. Nodes that carry
   the *computed* run value prove the real unit is 2%: .text-wrapper-13 is the
   identical 60px/Manrope-Regular token and declares `letter-spacing: 1.2px`
   (= 60 × 0.02); every span in the file (0.24/0.28/0.3/0.32/0.4/0.5/0.6/1.2px
   at 12/14/15/16/20/25/30/60px) is exactly 2% of its own size. */
.cc_LmUd6PvvAN_ewcNoeaX4i .bs__tagline {
  font-family: var(--font-display, sans-serif);
  font-size: var(--text-d60, clamp(32px, 4.17vw, 60px)); /* 60px @1440 */
  font-weight: 400;
  line-height: 1.3667; /* export h164 / 2 lines / 60px */
  letter-spacing: 0.02em; /* export .text-wrapper-13 = 1.2px @60 */
  color: var(--bs-text, var(--color-black, #000000));
  max-width: 1277px; /* Figma text frame width @1440 */
  margin: 0;
  white-space: pre-line;
}

/* Supporting line — 30px. Figma: Manrope Medium (500), black, tracking 2%. */
.cc_LmUd6PvvAN_ewcNoeaX4i .bs__tags {
  font-family: var(--font-body, sans-serif);
  font-size: var(--text-d30, clamp(20px, 2.08vw, 30px)); /* 30px @1440 */
  font-weight: 500;
  line-height: 1.3667; /* export h41 / 30px */
  /* .stilini-tamamlayan is the identical 30px/Manrope-Medium/h41 token and
     declares `letter-spacing: 0.6px` (= 30 × 0.02), not the parent-level 2px. */
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--bs-text, var(--color-black, #000000));
  max-width: 1277px; /* Figma text frame width @1440 */
  /* slogan bottom 577 → supporting line top 609 = 32px */
  margin: clamp(24px, 2.22vw, 32px) 0 0;
}

/* KEŞFET — underlined uppercase 16px text link.
   Figma: Manrope Bold (700), black, tracking 2%, solid underline. */
.cc_LmUd6PvvAN_ewcNoeaX4i .bs__btn {
  display: inline-flex;
  align-items: center;
  /* .text-wrapper-32 is a FIXED-height 28px text box with the line vertically
     centred (`display:flex; align-items:center`), so its 16px/normal line box
     (21.87px) sits at y710.07..731.93, not at y707. Our .bs__btn is line-box
     tall, so the gap from the 30px line's bottom (650) is 710.07-650 = 60px. */
  margin-top: clamp(40px, 4.17vw, 60px);
  font-family: var(--font-label, sans-serif);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.37; /* export `line-height: normal` */
  letter-spacing: 0.02em; /* export spans: 0.32px @16 */
  text-transform: uppercase;
  color: var(--bs-text, var(--color-black, #000000));
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  transition: opacity 0.3s ease, text-underline-offset 0.3s ease;
}
.cc_LmUd6PvvAN_ewcNoeaX4i .bs__btn:hover {
  opacity: 0.55;
  text-underline-offset: 9px;
}
/* Figma shows a plain underlined link — arrow glyph stays in DOM, hidden. */
.cc_LmUd6PvvAN_ewcNoeaX4i .bs__btn-arr {
  display: none;
}

/* The supplied lockup animation is a square video. On mobile, width:auto on a
   replaced <video> keeps too much of its intrinsic stage, causing the moving
   wordmark to appear off-centre and creating a large empty area. */
@media (max-width: 767px) {
  .cc_LmUd6PvvAN_ewcNoeaX4i .bs {
    overflow: hidden;
    padding-block: clamp(48px, 14vw, 72px);
  }

  /* Keep the desktop visual pipeline on phones, but make the filtered media a
     single composited texture before it reaches the blend layer. A filter on
     <video> itself lets mobile WebKit/Chromium promote the media to a native
     overlay and bypass the ancestor's blend; filtering its wrapper forces that
     video back into the CSS composition tree. */
  .cc_LmUd6PvvAN_ewcNoeaX4i .sumone-animation-wrapper {
    background-color: transparent;
    isolation: auto;
    mix-blend-mode: multiply;
  }

  .cc_LmUd6PvvAN_ewcNoeaX4i .sumone-animation-blend {
    mix-blend-mode: normal;
    filter: brightness(1.09);
  }

  .cc_LmUd6PvvAN_ewcNoeaX4i .sumone-animation-wrapper video {
    filter: none;
  }

  /* A transparent GIF needs neither colour correction nor blending. It also
     avoids the native mobile <video> overlay that exposed the white MP4 stage. */
  .cc_LmUd6PvvAN_ewcNoeaX4i .sumone-animation-wrapper.has-mobile-gif {
    background-color: transparent;
    isolation: auto;
    mix-blend-mode: normal;
  }

  .cc_LmUd6PvvAN_ewcNoeaX4i .has-mobile-gif .sumone-animation-gif {
    display: block;
  }

  .cc_LmUd6PvvAN_ewcNoeaX4i .has-mobile-gif .sumone-animation-blend {
    display: none;
  }

  .cc_LmUd6PvvAN_ewcNoeaX4i .bs__inner {
    width: 100%;
    padding-inline: 24px;
  }

  .cc_LmUd6PvvAN_ewcNoeaX4i .bs__lockup {
    /* The editor width may not exceed the phone gutter — it caps, never grows. */
    width: min(72vw, 320px, var(--bs-lockup-w, 320px));
    max-width: min(72vw, 320px, var(--bs-lockup-w, 320px));
    height: auto;
    aspect-ratio: 1 / 1;
    margin-inline: auto;
    margin-bottom: 32px;
    object-fit: contain;
    object-position: center center;
  }

  .cc_LmUd6PvvAN_ewcNoeaX4i .bs__tagline, .cc_LmUd6PvvAN_ewcNoeaX4i .bs__tags {
    width: 100%;
    margin-inline: auto;
    text-align: center;
  }

  .cc_LmUd6PvvAN_ewcNoeaX4i .bs__btn {
    margin-top: 40px;
  }
}

/* v-bs-logo-smaller: lockup natural ratio, monogram-scale */

/* v-bs-clean-logo: sumone.png monogram + Manrope slogan restored */

/* v-figma-align: Figma 1440 metrics — 603px lockup, 60px/82px slogan,
   30px/41px supporting line, 81px side inset, 66/57/32/57/93 vertical rhythm */

/* Agency PDF revision: content-sized panel inside the fixed desktop canvas,
   with equal 80px top/bottom air instead of a forced 1080px screen. */
@media (min-width: 1280px) {
  .cc_LmUd6PvvAN_ewcNoeaX4i .bs {
    box-sizing: border-box;
    height: auto;
    min-height: 0;
    padding: 80px 0;
  }

  .cc_LmUd6PvvAN_ewcNoeaX4i .bs__inner { padding-inline: 86px; }

  .cc_LmUd6PvvAN_ewcNoeaX4i .bs__lockup {
    width: var(--bs-lockup-w, 603px);
    max-width: var(--bs-lockup-w, 603px);
    height: 290px;
    margin-bottom: 57px;
    object-fit: contain;
  }

  /* The Figma lockup is a 603×290 window. The square source is centred in that
     window by the base `object-fit: contain` rule — no override needed here. */

  .cc_LmUd6PvvAN_ewcNoeaX4i .bs__tagline { width: 1277px; }
  .cc_LmUd6PvvAN_ewcNoeaX4i .bs__tags { margin-top: 32px; }

  .cc_LmUd6PvvAN_ewcNoeaX4i .bs__btn {
    min-height: 28px;
    margin-top: 32px;
    justify-content: center;
  }
}

/* Ekran-altı bölüm: sayfa açılışında viewport dışında olduğu için tarayıcı
   layout/paint maliyetini gerçekten görünene kadar erteleyebilir. `auto`
   anahtar sözcüğü sayesinde ilk yerleşimden sonra gerçek boyut hatırlanır —
   tahmin yalnızca ilk kaba scrollbar uzunluğunu besler, CLS üretmez. Sticky
   veya scroll-pin içeren bölümlere (ShopTheLook, CollectionStories) bilerek
   uygulanmadı. */
.cc_LmUd6PvvAN_ewcNoeaX4i .bs {
  content-visibility: auto;
  contain-intrinsic-size: auto 700px;
}