/* =====================================================================
   PROTOTYPE A: EDITORIAL SPREAD  (header + hero only)
   Loaded after wings-reskin.css, so it wins over earlier rules, including ".navbar{border-bottom:0}".
   Everything from #areas down is untouched.

   Header: one ivory bar, one full-bleed greige rule, a tonal step into the beige hero.
           At rest it scrolls away with the page; it comes back only on scroll UP (html.ww-hdr + script).
   Hero:   a two-column spread. Headline in three near-equal bands on the left, a whole 5:6 arch
           on the right whose apex sits on the first cap line and whose base sits on the CTA row.
   ===================================================================== */

/* ---------- tokens ---------- */
:root { --hdr: 84px; --hdr-c: 64px; --gut: 30px; }
@media (max-width: 1199px) { :root { --hdr: 76px; --hdr-c: 60px; } }
@media (max-width: 991px)  { :root { --hdr: 72px; --hdr-c: 60px; --gut: 20px; } }
@media (max-width: 767px)  { :root { --hdr: 64px; --hdr-c: 56px; --gut: 15px; } }


/* =====================================================================
   HEADER
   ===================================================================== */

/* (a) surface + (b) edge: solid ivory, a full-bleed 1px greige rule, no shadow, no blur */
.navbar.w-nav {
  --hdr-now: var(--hdr);
  display: flex; align-items: center;
  box-sizing: border-box; min-height: var(--hdr); padding: 0;   /* min-height: the no-JS static menu can grow the bar */
  background-color: #FAF8F4; border-bottom: 1px solid #D5D1CB;
}
.navbar.w-nav::before, .navbar.w-nav::after { content: none; }   /* Webflow clearfix; nothing floats in here */
.navbar.w-nav > .container { flex: 0 1 auto; width: 100%; }

/* grid: brand on the left gutter, links centred on the viewport, CTA on the right container edge */
.navbar .grid-nav { grid-template-columns: 1fr auto 1fr; column-gap: 24px; row-gap: 0; align-items: center; }
.navbar .brand { padding: 0; margin: 0; }

/* links */
@media (min-width: 992px) {
  .navbar .nav-menu { display: flex; align-items: center; column-gap: 40px; }
  .navbar .nav-menu .nav-link {
    margin: 0; padding: 14.5px 0;                                  /* 44px hit area */
    font: 400 15px/1 var(--font-family--body); color: #2F2A31; white-space: nowrap;
  }
}
@media (min-width: 992px) and (max-width: 1199px) { .navbar .nav-menu { column-gap: 28px; } }

/* header CTA: outline at rest, filled plum once pinned. The swap is instant; only hover eases. */
.navbar .nav-button-link {
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  height: 44px; min-height: 44px; padding: 0 22px; gap: 0;
  border: 1px solid #2F2A31; border-radius: 999px; background: transparent; color: #2F2A31;
  font: 600 14.5px/1 var(--font-family--body); letter-spacing: .01em; white-space: nowrap; text-decoration: none;
  transition: none;
}
.navbar .nav-button-link:hover, .navbar .nav-button-link:focus-visible {
  background-color: #2F2A31; border-color: #2F2A31; color: #FAF8F4;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.navbar.is-pinned .nav-button-link { background-color: #49374D; border-color: #49374D; color: #FAF8F4; }
.navbar.is-pinned .nav-button-link:hover, .navbar.is-pinned .nav-button-link:focus-visible { background-color: #2F2A31; border-color: #2F2A31; }
@media (max-width: 767px) { .navbar .nav-button-link { display: none; } }   /* the menu carries it on phones */

/* below 992: brand on the gutter, CTA + menu button on the right */
@media (max-width: 991px) {
  .navbar .grid-nav { grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; }
  .navbar .grid-nav > .nav-menu { grid-column: 1 / -1; grid-row: 2; }   /* only shows in-grid without JS */
  .navbar .right-nav { column-gap: 12px; row-gap: 0; }
}

/* menu button: two thin lines that fold into an x, no filled square */
.navbar .menu-button {
  box-sizing: border-box; width: 44px; height: 44px; padding: 0;
  background: transparent; color: #2F2A31; border-radius: 0;
}
.navbar .menu-button.w--open { background: transparent; color: #2F2A31; }
.navbar .menu-button .w-icon-nav-menu { display: none; }
.navbar .menu-button::before, .navbar .menu-button::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 22px; height: 1.5px; margin: -.75px 0 0 -11px; background: #2F2A31; border-radius: 1px;
  transition: transform .2s ease;
}
.navbar .menu-button::before { transform: translateY(-3.5px); }
.navbar .menu-button::after  { transform: translateY(3.5px); }
.navbar .menu-button.w--open::before { transform: rotate(45deg); }
.navbar .menu-button.w--open::after  { transform: rotate(-45deg); }

/* menu panel (Webflow's overlay): ivory, hangs under the header rule, one rule at its foot */
.navbar .w-nav-overlay { top: calc(100% + 1px); }
@media (max-width: 991px) {
  .navbar .nav-menu[data-nav-menu-open] {
    box-sizing: border-box; min-width: 0; text-align: left;
    background: #FAF8F4; border: 0; border-bottom: 1px solid #D5D1CB;
    padding: 8px var(--gut) 24px;
    max-height: calc(100vh - var(--hdr-now)); max-height: calc(100svh - var(--hdr-now));
    overflow-y: auto; overscroll-behavior: contain;
  }
  .navbar .nav-menu[data-nav-menu-open] .nav-link, html:not(.w-mod-js) .navbar .nav-menu .nav-link {
    display: block; box-sizing: border-box; min-height: 52px; margin: 0; padding: 14.5px 0;
    font: 400 18px/1.3 var(--font-family--body); color: #2F2A31; text-align: left;
  }
  .navbar .nav-menu[data-nav-menu-open] .nav-link-cta, html:not(.w-mod-js) .navbar .nav-menu .nav-link-cta {
    display: inline-flex; align-items: center; height: 52px; min-height: 52px; margin-top: 12px; padding: 0 28px;
    border-radius: 999px; background: #49374D; color: #FAF8F4;
    font: 600 15px/1 var(--font-family--body); letter-spacing: .01em; text-decoration: none; white-space: nowrap;
  }
  .navbar .nav-menu[data-nav-menu-open] .nav-link-cta:hover,
  html:not(.w-mod-js) .navbar .nav-menu .nav-link-cta:hover { background: #2F2A31; color: #FAF8F4; text-decoration: none; }
  /* no JS: the same list, static under the brand row (which keeps the rest height) */
  html:not(.w-mod-js) .navbar .grid-nav { grid-template-rows: calc(var(--hdr) - 1px) auto; }
  html:not(.w-mod-js) .navbar .nav-menu { text-align: left; background: transparent; border: 0; padding: 0 0 24px; }
}

/* ---------- scroll-up reveal (html.ww-hdr is set by an inline head script) ---------- */
/* REST: same geometry as the in-flow header, but out of flow, so pinning never shifts the page */
.ww-hdr .navbar.w-nav { position: absolute; top: 0; left: 0; right: 0; z-index: 1000; height: var(--hdr); min-height: 0; }
.ww-hdr main { padding-top: var(--hdr); }
/* PINNED: fixed and compact; SHOWN eases in, HIDDEN eases out faster */
.ww-hdr .navbar.w-nav.is-pinned {
  --hdr-now: var(--hdr-c);
  position: fixed; height: var(--hdr-c);
  transform: translateY(0); transition: transform 380ms cubic-bezier(.16, 1, .3, 1);
}
.ww-hdr .navbar.w-nav.is-pinned.is-hidden {
  transform: translateY(calc(-100% - 1px)); transition: transform 260ms cubic-bezier(.4, 0, 1, 1);
}
/* keyboard focus inside a hidden bar always brings it back */
.ww-hdr .navbar.w-nav.is-pinned.is-hidden:has(:focus-visible) { transform: translateY(0); transition: transform 380ms cubic-bezier(.16, 1, .3, 1); }
@supports not selector(:has(a)) {
  .ww-hdr .navbar.w-nav.is-pinned.is-hidden:focus-within { transform: translateY(0); }
}
/* handover at the very top: the compact bar grows back to its rest height */
.ww-hdr .navbar.w-nav.is-settling { transition: height 240ms ease-out; }
/* invisible switches (rest -> pinned off-screen, jumps) never animate */
.ww-hdr .navbar.ww-no-anim { transition: none !important; }

@media (prefers-reduced-motion: reduce) {
  .ww-hdr .navbar.w-nav, .ww-hdr .navbar.w-nav.is-pinned, .ww-hdr .navbar.w-nav.is-pinned.is-hidden,
  .ww-hdr .navbar.w-nav.is-settling, .navbar .menu-button::before, .navbar .menu-button::after { transition: none !important; }
}

/* the held arch in #womens: keep its growing z-indices inside its own stacking context, under the bar */
#womens .ws-stages { isolation: isolate; }


/* =====================================================================
   HERO: EDITORIAL SPREAD
   ===================================================================== */

/* (c) tonal step: the ramp now starts on beige, so ivory bar -> rule -> beige field reads as header, then page */
.hero-section.bg-gradient-four { background-image: linear-gradient(180deg, #EEE7DD 0%, #F3EEE7 60%, #FAF8F4 100%); }

.hero-section {
  --padT: 52px; --padB: 68px;
  /* the caps size. The third term only acts below ~780px of height (e.g. 1366x768): it keeps the text column
     (3.054F of headline + 244px of dek) no taller than the arch, so the CTA row stays on the arch base and the
     spread still ends at the fold */
  --F: clamp(96px, min(10vw - 16px, 15.8vh - 14px, 32.75vh - 147.5px), 128px);
  /* arch width: fills the fold; the max() guard only acts once F has hit its 96px floor (under ~720px tall):
     the arch then grows to the text column instead of leaving the CTA row hanging below its base */
  --aw: clamp(433px, max(min((100vh - var(--hdr) - 52px - 68px) / 1.2, 40.5vw), (3.054 * var(--F) + 244px) / 1.2), 600px);
  --aw: clamp(433px, max(min((100svh - var(--hdr) - 52px - 68px) / 1.2, 40.5vw), (3.054 * var(--F) + 244px) / 1.2), 600px);
  padding: var(--padT) 0 var(--padB);
}
.hero-section .container { display: block; }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--aw);
  grid-template-rows: auto 1fr;
}

/* headline: three near-equal bands */
.hero-section .hero-title {
  grid-column: 1; grid-row: 1; position: relative; z-index: 1;
  margin: -.075em 0 0;                         /* cap top of ПРОМЯНАТА lands on the arch apex */
  font-family: var(--font-family--heading); font-weight: 300; font-size: var(--F);
  line-height: .94; letter-spacing: 0; color: #2F2A31; text-transform: uppercase; white-space: nowrap;
}
.hero-section .hero-title .hero-line {
  display: block; font-family: var(--font-family--heading); font-weight: 300;
  line-height: .94; letter-spacing: 0; color: #2F2A31; text-transform: uppercase; white-space: nowrap;
}
.hero-section .hero-title .hero-text-span {
  display: block; font-family: var(--font-family--pre-title); font-weight: 300; font-style: normal;
  font-size: 2.25em;                           /* the accent face is size-adjusted to 56.3%: its x-height ~ the caps' cap height */
  line-height: .5; margin-top: .055em;         /* keeps the Bulgarian в ascender clear of ЗАПОЧВА */
  color: #49374D; letter-spacing: 0; text-transform: none; white-space: nowrap;
}
.hero-line-in { display: inline-block; }

/* dek: description, then the CTA row */
.hero-dek { grid-column: 1; grid-row: 2; align-self: end; padding-top: 40px; }
.hero-section .hero-description {
  margin: 0; max-width: 440px;
  font-family: var(--font-family--body); font-weight: 400; font-size: 18px; line-height: 1.6;
  color: #2F2A31; text-transform: none; text-wrap: pretty;
}
.hero-actions { display: flex; align-items: center; gap: 28px; margin-top: 36px; }
.hero-actions-rule { flex: none; width: 1px; height: 44px; background: #D5D1CB; }
.hero-section .hero-cta {
  flex: none; box-sizing: border-box; height: 52px; min-height: 52px; margin: 0; padding: 0 30px;
  font: 600 15px/1 var(--font-family--body); letter-spacing: .01em; white-space: nowrap;
}

/* facts lockup: the page's own meta line, no box */
.hero-facts { margin: 0; display: inline-flex; align-items: center; gap: 14px; white-space: nowrap; }
.hero-facts-num {
  font-family: var(--font-family--heading); font-weight: 300; font-size: 44px; line-height: 1;
  color: #2F2A31; font-variant-numeric: lining-nums;
}
.hero-facts-label {
  font-family: var(--font-family--body); font-weight: 400; font-size: 14.5px; line-height: 1.4;
  color: #4A434D;                              /* body, not muted: muted drops to ~4.4:1 on the beige top */
}

/* the arch: whole, uncut, 5:6; static position replaces Webflow's absolute 745x910 box */
.hero-section .hero-grid .hero-image-wrap {
  grid-column: 2; grid-row: 1 / span 2; align-self: start; order: 0;
  position: static; inset: auto; width: var(--aw); height: auto; aspect-ratio: 5 / 6; margin: 0;
  border-radius: 999px 999px 0 0; overflow: hidden; isolation: isolate;
  background-color: #D5D1CB;                   /* while decoding */
}
.hero-section .hero-grid .hero-image {
  display: block; width: 100%; height: 100%; aspect-ratio: auto;
  object-fit: cover; object-position: 50% 20%;
}

/* 992-1199: same spread, facts stack under the CTA */
@media (min-width: 992px) and (max-width: 1199px) {
  .hero-section {
    --padT: 40px; --padB: 72px;
    --F: clamp(72px, min(7.8vw, 10.84vw - 31px), 92px);   /* 80 at 1024; tapers a little below 1024 so ПРОМЯНАТА keeps 80px+ from the curve */
    /* same base guard: headline 3.054F + dek 325px (40 + five 27.2px lines + 32 + 52 + 20 + 44) */
    --aw: clamp(400px, max(min((100vh - var(--hdr) - 40px - 72px) / 1.2, 47vw), (3.054 * var(--F) + 325px) / 1.2), 520px);
    --aw: clamp(400px, max(min((100svh - var(--hdr) - 40px - 72px) / 1.2, 47vw), (3.054 * var(--F) + 325px) / 1.2), 520px);
  }
  .hero-section .hero-description { font-size: 17px; max-width: 380px; }
}
@media (max-width: 1199px) {
  .hero-actions { flex-direction: column; align-items: flex-start; gap: 20px; margin-top: 32px; }
  .hero-actions-rule { display: none; }
}

/* 768-991: headline across both columns; description + CTA beside the arch, both top-aligned */
@media (max-width: 991px) {
  .hero-section { --padT: 40px; --padB: 64px; --F: clamp(64px, min(13vw, 24vh), 120px); }
  .hero-grid { grid-template-columns: minmax(0, 1fr) 44%; grid-template-rows: auto auto; column-gap: 40px; row-gap: 48px; }
  .hero-section .hero-title { grid-column: 1 / -1; }
  .hero-dek { grid-row: 2; align-self: start; padding-top: 0; }
  .hero-section .hero-grid .hero-image-wrap { grid-column: 2; grid-row: 2; width: 100%; }
  .hero-section .hero-description { font-size: 17px; max-width: none; }
}

/* phones: one column; the arch follows the facts, its crown and her face cross the fold */
@media (max-width: 767px) {
  .hero-section { --padT: 32px; --padB: 48px; --F: clamp(44px, 14.4vw, 104px); }
  .hero-grid { display: block; }
  .hero-dek { padding-top: 24px; }
  .hero-section .hero-description { max-width: 34em; }   /* keeps the measure on 600-767px screens; no effect on phones */
  .hero-actions { margin-top: 28px; }
  .hero-facts-num { font-size: 38px; }
  .hero-section .hero-grid .hero-image-wrap { width: min(100%, 440px); margin: 40px 0 0 auto; }
}

/* ---------- entrance (html.ww-hero-pre is set in <head> only when motion is allowed; JS adds .ww-hero-go) ---------- */
.ww-hero-pre .hero-section .hero-line { clip-path: inset(-60% -8% 0 -8%); }
.ww-hero-pre .hero-section .hero-text-span { clip-path: inset(-60% -8% -.25em -8%); }   /* the р descender is never cut */
.ww-hero-pre .hero-section .hero-line-in { opacity: 0; transform: translateY(.42em); }
.ww-hero-go .hero-section .hero-line-in {
  opacity: 1; transform: none;
  transition: opacity 1.1s cubic-bezier(.16, 1, .3, 1), transform 1.1s cubic-bezier(.16, 1, .3, 1);
}
.ww-hero-go .hero-section .hero-line + .hero-line .hero-line-in { transition-delay: 110ms; }
.ww-hero-go .hero-section .hero-text-span .hero-line-in { transition-duration: 1.4s; transition-delay: 260ms; }
/* the arch frame is static from the first paint (LCP-safe); only the photo inside settles */
.ww-hero-pre .hero-section .hero-image { transform: scale(1.04); transform-origin: 50% 30%; }
.ww-hero-go .hero-section .hero-image { transform: none; transition: transform 1.8s cubic-bezier(.16, 1, .3, 1); }