/* Przemysławka x Bittersweet — fluid, full-width build
   Layout & motion rhythm modelled 1:1 on the Aurae/Temlis Webflow template
   (full-bleed sections, generous section padding, big fluid headings,
    cubic-bezier(.25,.46,.45,.94) transitions), with Przemysławka's own
    palette, content and typographic pairing (Inter + Libre Caslon Text). */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=Libre+Caslon+Text:ital@0;1&display=swap');

:root {
  --ink:   #323232;
  --cream: #efe2d1;
  --gold:  #ba9768;
  --sage:  #e6edcc;
  --black: #131313;
  --muted: #6f6f6f;

  /* fluid section padding — mirrors aurae padding-section large (6rem) */
  --section-pad: clamp(64px, 9vw, 120px);
  --gutter: clamp(20px, 5vw, 80px);
  /* full-bleed page edge margin — Figma nav sits 20px from the frame edges
     (1400px bar in a 1440px frame); used by the full-width header + hero */
  --edge: clamp(16px, 1.4vw, 28px);
  --maxw: 1280px;
  --radius: 12px;

  /* the template's signature transform easing */
  --ease: cubic-bezier(.25, .46, .45, .94);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth;}

body {
  background: #fff;
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }

.serif { font-family: 'Libre Caslon Text', Georgia, serif; font-style: italic; }
.sans  { font-family: 'Inter', sans-serif; font-style: normal; }

.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ===================================================================
   SHARED HEADINGS (fluid scale ~ aurae h2/h3)
   =================================================================== */
h1, h2, h3, h4, h5, h6 { font-weight: 400; }

.section-heading {
  font-size: clamp(34px, 5vw, 60px);
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--ink);
  margin-bottom: clamp(40px, 5vw, 72px);
}

.display-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  font-size: clamp(56px, 12vw, 129px);
  line-height: .88;
  letter-spacing: -.02em;
  color: var(--ink);
  margin-bottom: clamp(48px, 6vw, 80px);
}
.display-heading__reg { font-family: 'Inter', sans-serif; }
.display-heading__it  { font-family: 'Libre Caslon Text', serif; font-style: italic; }

/* ===================================================================
   HEADER
   =================================================================== */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  /* full width: only the Figma edge margin on each side (no centred max-width) */
  padding: clamp(12px, 1.6vw, 20px) var(--edge);
  transition: transform .4s var(--ease), background-color .4s var(--ease);
}
.header.is-hidden { transform: translateY(-130%); }
.header__inner {
  background: #fff;
  border-radius: 20px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px;
  box-shadow: 0 6px 24px rgba(0,0,0,.06);
}
.logo { display: block; height: 40px; }
.logo img { height: 100%; width: auto; }
.nav { display: flex; gap: clamp(24px, 6vw, 112px); align-items: center; }
.menu {
  display: flex; gap: clamp(20px, 2.6vw, 50px); align-items: center;
  font-weight: 500; font-size: 14px; color: var(--ink); white-space: nowrap;
}
.menu a { color: inherit; text-decoration: none; transition: color .2s var(--ease); }
.menu a:hover { color: var(--gold); }
.btn-buy {
  background: var(--gold); padding: 0 26px; height: 40px; min-width: 150px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 500; font-size: 14px; text-decoration: none; white-space: nowrap;
  transition: transform .3s var(--ease), filter .3s var(--ease);
}
.btn-buy:hover { transform: translateY(-2px); filter: brightness(1.06); }
@media (max-width: 720px) { .menu { display: none; } }

/* ===================================================================
   HERO  (Swiper slider — 3 slides, 3s autoplay loop)
   =================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  /* left rail for the heading + dots — see .hero__content */
  --hero-rail: clamp(20px, 4.2vw, 60px);
}
.hero__swiper { width: 100%; }
.hero__slide {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.hero__bg { position: absolute; inset: -10% 0; z-index: 0; }
/* <picture> is only a wrapper for the art-directed mobile swap; it has to
   carry the same box as a bare <img> so object-fit still fills the slide */
.hero__bg picture { display: block; width: 100%; height: 100%; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.25) 0%, transparent 35%, rgba(0,0,0,.05) 60%, rgba(0,0,0,.55) 100%);
}
/* a slide that is nothing but a finished banner (Figma 2038:20): the artwork
   already carries its own typography and contrast, so it gets no scrim — and no
   -10% bleed either, which keeps its full width on screen so the baked-in
   lettering is not cropped sideways. */
.hero__bg.is-plain { inset: 0; }
.hero__bg.is-plain::after { content: none; }

/* right-side product visual — the white disc + bottle on slides 2 & 3.
   Geometry mirrors Figma: a 66%-wide disc anchored bottom-right and pushed
   mostly off-canvas, with the flacon resting on its upper-left arc. */
.hero__media { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero__circle {
  --disc: translate(40%, 62%);
  position: absolute; right: 0; bottom: 0;
  width: clamp(460px, 62%, 920px); aspect-ratio: 1;
  background: #fff; border-radius: 50%;
  transform: var(--disc);
}
.hero__bottle {
  position: absolute; right: clamp(8px, 3.4vw, 56px); bottom: -3%;
  width: clamp(190px, 23vw, 330px); height: auto;
  filter: drop-shadow(0 26px 48px rgba(0,0,0,.32));
}

.hero__content {
  position: relative; z-index: 2;
  /* full width: content runs edge-to-edge, inset on the hero's own rail — 60px in
     the 1440 frame (Figma 2037:9 puts the heading at x=60), fluid down to the
     page edge margin on small screens. Shared by all three slides so the heading
     doesn't shift sideways as the carousel rotates. */
  width: 100%;
  padding: 0 var(--hero-rail) clamp(48px, 8vh, 110px);
  color: #fff;
}

/* stationary slide indicators — one shared row that stays put while the slides
   move beneath it. `bottom` is a fallback; app.js measures the heading and sets
   the exact offset so the dots always sit just above it. */
.hero__dots {
  position: absolute; left: var(--hero-rail); bottom: 44vh; z-index: 5;
  display: flex; gap: clamp(16px, 2vw, 31px); align-items: center;
}
.hero__dots button {
  appearance: none; -webkit-appearance: none; border: 0; padding: 0; margin: 0;
  cursor: pointer; display: block;
  width: clamp(12px, 1.3vw, 19px); aspect-ratio: 1; border-radius: 50%;
  background: #fff; opacity: .35;
  transition: opacity .45s var(--ease), transform .3s var(--ease);
}
.hero__dots button:hover { opacity: .65; }
.hero__dots button.is-active { opacity: 1; }
.hero__dots button:focus-visible { outline: 2px solid #fff; outline-offset: 4px; opacity: 1; }

.hero__lead {
  display: flex; align-items: flex-end;
  min-height: 2.2em; /* reserve two lines so every slide's heading is the same
                        height and the stationary dots line up across slides */
  font-size: clamp(40px, 6.4vw, 70px); line-height: 1.1; letter-spacing: -.02em;
  text-shadow: 0 4px 40px rgba(0,0,0,.25); margin-bottom: clamp(20px, 2.4vw, 32px);
}
.hero__lead-in { display: block; }
.hero__desc {
  max-width: 478px; font-size: clamp(15px, 1.4vw, 18px); line-height: 1.45;
  color: rgba(255,255,255,.92);
}

/* per-slide entrance — content + product animate in once a slide is active.
   Scoped to .swiper-initialized so the copy stays visible if the JS never runs. */
.swiper-initialized .hero__content > * {
  opacity: 0; transform: translateY(40px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.swiper-initialized .hero__circle {
  opacity: 0; transform: var(--disc) scale(.55);
  transition: opacity .7s var(--ease), transform 1s var(--ease);
}
.swiper-initialized .hero__bottle {
  opacity: 0; transform: translateY(44px);
  transition: opacity .8s var(--ease), transform .9s var(--ease);
}
.swiper-initialized .swiper-slide-active .hero__content > * { opacity: 1; transform: none; }
.swiper-initialized .swiper-slide-active .hero__content > *:nth-child(2) { transition-delay: .1s; }
.swiper-initialized .swiper-slide-active .hero__circle { opacity: 1; transform: var(--disc) scale(1); }
.swiper-initialized .swiper-slide-active .hero__bottle { opacity: 1; transform: none; transition-delay: .18s; }

@media (max-width: 720px) {
  .hero__media { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .swiper-initialized .hero__content > *,
  .swiper-initialized .hero__bottle { opacity: 1; transform: none; transition: none; }
  .swiper-initialized .hero__circle { opacity: 1; transform: var(--disc); transition: none; }
}

/* ===================================================================
   INTRO
   =================================================================== */
.intro {
  position: relative;
  padding-block: var(--section-pad);
  overflow: hidden;
  height: 100vh;
  align-content: center;
}
.intro::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background: url('assets/fabryka.png') no-repeat center center;
  opacity: 1; mix-blend-mode: multiply; pointer-events: none;
}
.intro__inner { position: relative; z-index: 1; text-align: center; }
.intro__lead {
  font-size: clamp(28px, 4.4vw, 53px);
  line-height: 1.18; letter-spacing: -.02em; color: var(--ink);
  margin-bottom: clamp(28px, 3vw, 44px);
}
.intro__body {
  max-width: 750px; margin-inline: auto;
  font-size: clamp(16px, 1.5vw, 24px); line-height: 1.45; color: var(--ink);
}

/* ===================================================================
   NUTY ZAPACHOWE
   =================================================================== */
.notes { padding-block: var(--section-pad) 0; }
.notes__head { text-align: center; }
.notes__head .section-heading { text-align: left; margin-bottom: 0; }

/* Pinned scroll track — mirrors aurae .features_scroll (300vh) + sticky wrapper.
   Negative margin pulls the centered stage up closer to the heading (the sticky
   wrapper centres the bottle in a 100vh frame, leaving whitespace above it). */
.notes_scroll { position: relative; height: 300vh; margin-top: max(-110px, -9vh); }
.notes_wrapper {
  position: sticky; top: 0; height: 100vh;
  display: flex; align-items: center; overflow: hidden;
}
.notes_stage {
  position: relative; width: 100%; max-width: var(--maxw);
  height: min(74vh, 720px); margin-inline: auto; padding-inline: var(--gutter);
}
.notes_img {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: clamp(440px, 48vw, 720px); z-index: 1;
}
.notes_img img { width: 100%; height: auto; object-fit: contain; filter: drop-shadow(0 30px 60px rgba(0,0,0,.18)); }

/* cards positioned around the bottle (like aurae feature_right is-one/two/three) */
.note_right { position: absolute; display: flex; align-items: center; z-index: 2; }
.note_right.is-one   { top: 12%; right: 2%; }
.note_right.is-two   { top: 46%; left: 2%; }
.note_right.is-three { top: 70%; right: 5%; }

.note_pointer { display: flex; align-items: center; flex: none; }
.note_point {
  width: 13px; height: 13px; border-radius: 50%; background: var(--ink); flex: none;
}
.note_line { width: clamp(24px, 4vw, 80px); height: 0; border-top: 1px solid var(--gold); flex: none; }
/* line draws from the point (image side) outward toward the card */
.note_right.is-one .note_line,
.note_right.is-three .note_line { transform-origin: left center; }
.note_right.is-two  .note_line { transform-origin: right center; }

.card-note {
  width: min(403px, 80vw);
  background: var(--sage); border-radius: var(--radius);
  padding: clamp(20px, 2vw, 26px) clamp(22px, 2.2vw, 28px);
  display: flex; align-items: baseline; gap: clamp(10px, 1.1vw, 16px);
  color: var(--ink);
}
.note_right .card-note { width: clamp(320px, 30vw, 403px); }
.card-note .num {
  flex: none;
  font-family: 'Libre Caslon Text', serif; font-style: italic;
  font-size: clamp(30px, 3.2vw, 46px); line-height: 1.2; letter-spacing: -.02em;
  color: var(--muted);
}
.card-note__body { display: flex; flex-direction: column; gap: clamp(12px, 1.4vw, 20px); }
.card-note__title {
  font-family: 'Inter', sans-serif; font-weight: 400; font-style: normal;
  font-size: clamp(30px, 3.2vw, 46px); line-height: 1.2; letter-spacing: -.02em;
  color: var(--ink);
}
.card-note ul {
  list-style: disc; padding-left: 1.2em;
  font-size: clamp(15px, 1.45vw, 18px); line-height: 1.2; color: var(--muted);
}

/* Mobile (≤991px) — aurae drops the pin here: no sticky, connectors hidden,
   bottle + cards stack as a plain centered list with a simple fade-in. */
@media (max-width: 991px) {
  .notes_scroll { height: auto; margin-top: 0; }
  .notes_wrapper { position: static; height: auto; display: block; padding-block: clamp(40px, 8vw, 72px); overflow: visible; }
  .notes_stage {
    height: auto; display: flex; flex-direction: column; align-items: center;
    gap: clamp(28px, 6vw, 48px);
  }
  .notes_img { position: static; transform: none; width: clamp(400px, 90vw, 640px); margin-inline: auto; }
  .note_right { position: static; width: 100%; max-width: 420px; justify-content: center; }
  .note_pointer { display: none; }
  .note_right .card-note { width: 100%; }
}

/* ===================================================================
   WAŻNE POSTACIE
   =================================================================== */
/* aurae .section_testimonial-heading — giant display heading pinned as a
   full-viewport background; the cards section scrolls up over it. */
.people_scroll { position: relative; background: var(--cream); }
/* Mirrors aurae .testimonial_heading-wrapper: a full-viewport sticky wrapper
   with the text centred inside, so the heading sits dead-centre vertically the
   moment the section reaches the top and stays there while the cards scroll. */
.people-heading {
  position: sticky; top: 0; height: 100vh;
  display: grid; place-items: center; z-index: 0;
}
/* full-width so the big type isn't clipped on the sides; centred as a block */
.people-heading__bg {
  width: 100%; padding-inline: var(--gutter);
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.people-line {
  font-size: clamp(56px, 13vw, 150px); line-height: .95; letter-spacing: -.04em;
  white-space: nowrap; max-width: 100%;
}
.people-line.is-one { color: rgba(50, 50, 50, .26); font-family: 'Inter', sans-serif; }
.people-line.is-two {
  color: var(--ink);
  font-family: 'Libre Caslon Text', serif; font-style: italic;
}
.people-cards {
  position: relative; z-index: 1;
  /* the 100vh sticky heading above is the lead-in; the cards then scroll up
     over the centred text. Extra bottom room keeps the heading centred for a
     good stretch before it releases into the next section. */
  padding-block: clamp(40px, 8vw, 96px) clamp(120px, 30vh, 320px);
}
/* Diagonal scatter (Figma 2016:245 → Ważne postacie): Halina upper-left, Jacek
   lower-right.
   A 2-col grid with a top offset on Jacek keeps it fully responsive — and
   collapses to a stacked column on mobile, like aurae's testimonial cards
   (which switch from absolute scatter to position:static). */
.people__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
}
.card-person { width: min(100%, 420px); }
.card-person.is-halina { justify-self: start; }
.card-person.is-jacek  { justify-self: end; margin-top: clamp(140px, 20vw, 360px); }

.card-person {
  background: #fff; border-radius: var(--radius); overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
}
.card-person .photo { aspect-ratio: 4 / 3; overflow: hidden; }
.card-person .photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* jacek.png is a tall 2:3 portrait — focus the crop on the face so the head
   isn't cut off by the 4:3 frame */
.card-person.is-jacek .photo img { object-position: 50% 14%; }
.card-person.is-halina .photo img { object-position: 50% 40%; }
.card-person .body {
  padding: clamp(28px, 2.6vw, 40px) clamp(20px, 2vw, 24px) clamp(34px, 3.2vw, 50px);
  display: flex; flex-direction: column; gap: clamp(18px, 2vw, 31px); color: var(--ink);
}
.card-person h3 {
  font-family: 'Libre Caslon Text', serif; font-style: italic; font-weight: 400;
  font-size: clamp(28px, 3vw, 40px); line-height: 1.15; letter-spacing: -.02em;
}
.card-person p { font-size: 16px; line-height: 1.4; }
/* "Czytaj więcej" (Figma 2016:311 / 2016:319) — an underlined link in the card's
   lower-right corner that expands the biography in place. Native <details>, so no
   JS and no modal: the default marker is stripped and the label swaps to "Zwiń"
   once open. The expanded copy keeps the body's left alignment. */
/* "Czytaj więcej" as a solid button — same shape/behaviour as `.cta__btn`,
   sized to its label and aligned to the card's left edge */
.person__btn {
  align-self: flex-start;
  background: var(--ink); color: #fff; text-decoration: none;
  padding: 0 36px; height: 57px; border-radius: 8px; font-size: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.person__btn:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0,0,0,.2); }

.person__more > summary {
  list-style: none; cursor: pointer;
  text-align: right; font-size: 16px; line-height: 1.4;
  text-decoration: underline; text-underline-offset: 3px;
}
.person__more > summary::-webkit-details-marker { display: none; }
.person__more > summary::marker { content: ''; }
.person__more > summary .is-less,
.person__more[open] > summary .is-more { display: none; }
.person__more[open] > summary .is-less { display: inline; }
.person__more > p { margin-top: clamp(14px, 1.6vw, 20px); text-align: left; }
@media (max-width: 760px) {
  /* aurae collapses the scattered cards to a static stacked column on mobile */
  .people__layout { grid-template-columns: minmax(0, 460px); justify-content: center; }
  .card-person.is-halina, .card-person.is-jacek { justify-self: center; margin-top: 0; }
  .card-person { width: 100%; }
  /* mobile: no freeze — heading flows normally above the stacked cards */
  .people-heading { position: static; height: auto; top: auto; padding-block: clamp(56px, 14vw, 96px); }
  .people-heading__bg { position: static; transform: none; }
  .people-cards { padding-block: 0 var(--section-pad); }
}

/* ===================================================================
   KLUCZOWE MOMENTY (dark)
   =================================================================== */
/* the gradient (Figma 2016:245 → Kluczowe momenty) lives on the section itself so it spans the
   full viewport width (cream seam at top → periwinkle → indigo at the bottom).
   NB: no `overflow: hidden` here — it would create a scroll container and break
   the `position: sticky` pinning the heading + card stack rely on. */
.history {
  position: relative;
  background: transparent;
  /* the section now ends on indigo; the pink wave that used to close it lives on
     .statement below and overlaps it (see .statement__apla). This padding is the
     breathing room the wave's own top margin used to provide. */
  padding-bottom: clamp(48px, 6vw, 96px);
}
/* full-section background: just the gradient (cream seam → periwinkle → indigo) */
.history__bg {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
/* the three keepers of the recipe + pay-off line, centred under the card pile */
.history__legacy {
  position: relative; z-index: 2;
  max-width: 964px; margin-inline: auto;
  padding-inline: var(--gutter);
  text-align: center; color: #fff;
  font-size: clamp(19px, 2.2vw, 32px); line-height: 1.2;
  text-shadow: 0 2px 24px rgba(49, 49, 49, .22);
}
.history__legacy .it { font-family: 'Libre Caslon Text', serif; font-style: italic; }
/* design leaves a blank line before the pay-off */
.history__legacy-out { display: block; margin-top: 1.2em; }

/* aurae .section_steps — heading pinned on the left, a column of cards on the
   right that stick one-by-one and pile up as you scroll. Height comes from the
   stacked cards themselves; no fixed vh track needed. */
.steps_scroll { position: relative; z-index: 1; }
.steps_layout {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: clamp(32px, 5vw, 80px);
  /* the pile needs to finish (and the heading un-pin) before the closing copy —
     the apla now occupies real layout space, so no reservation is needed here */
  padding-top: clamp(80px, 10vw, 160px);
  padding-bottom: clamp(60px, 8vw, 140px);
}
/* heading pins in the upper-middle of the viewport while the cards scroll past */
.steps_heading {
  flex: 1 1 auto; max-width: 46%; z-index: 2;
  position: sticky; top: clamp(96px, 22vh, 220px); align-self: flex-start;
}
.eyebrow {
  color: #fff; font-size: clamp(18px, 1.8vw, 24px); font-weight: 400;
  letter-spacing: .01em; margin-bottom: clamp(16px, 2vw, 24px);
  text-shadow: 0 2px 20px rgba(49,49,49,.25);
}
.history__heading {
  color: #fff;
  font-size: clamp(40px, 6.4vw, 80px); line-height: .9; letter-spacing: -.02em;
  text-shadow: 0 2px 28px rgba(49,49,49,.22);
}
.history__heading .reg { font-family: 'Inter', sans-serif; }
.history__heading .it  { font-family: 'Libre Caslon Text', serif; font-style: italic; }

/* right column — cards flow vertically; each sticks and the next slides up to
   cover it, leaving a small peeking edge so they read as a pile */
.steps_list {
  position: relative; flex: 0 0 auto; width: min(520px, 46%);
  display: flex; flex-direction: column; gap: clamp(28px, 5vw, 64px);
}
.step_card-wrapper {
  border-radius: var(--radius); overflow: hidden; will-change: transform;
  position: sticky; transform-origin: center top;
  /* incremental sticky offsets → each earlier card peeks --peek above the next.
     --i is the card's index in the pile; the peek is kept small because the pile
     is seven cards deep and the last one still has to clear the viewport. */
  --stack-top: clamp(96px, 16vh, 170px);
  --peek: 18px;
  top: calc(var(--stack-top) + var(--i, 0) * var(--peek));
  /* fanned deck (Figma 2016:245): each card also sits --fan further right than the
     one above it. The offset is a margin rather than a transform because GSAP owns
     this element's transform (initSteps scrubs `scale`) and would overwrite it. The
     mirrored right margin keeps every card the same width and the column's
     footprint unchanged, so the fan never overflows toward the viewport edge. */
  --fan: clamp(10px, 1.4vw, 20px);
  margin-left: calc(var(--i, 0) * var(--fan));
  margin-right: calc((6 - var(--i, 0)) * var(--fan));
}
.step_card-wrapper.is-one   { --i: 0; }
.step_card-wrapper.is-two   { --i: 1; }
.step_card-wrapper.is-three { --i: 2; }
.step_card-wrapper.is-four  { --i: 3; }
.step_card-wrapper.is-five  { --i: 4; }
.step_card-wrapper.is-six   { --i: 5; }
.step_card-wrapper.is-seven { --i: 6; }

.card-hist {
  border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column;
  background: #fff; box-shadow: 0 18px 45px rgba(0,0,0,.32); height: 100%;
}
.card-hist .photo { aspect-ratio: 8 / 5; overflow: hidden; }
.card-hist .photo img { width: 100%; height: 100%; object-fit: cover; }
.card-hist .photo--beige { background: #d6d0c0; display: grid; place-items: center; }
.card-hist .photo--beige img { width: 56%; height: 100%; object-fit: cover; }
.card-hist .body {
  padding: clamp(28px, 2.6vw, 40px) clamp(20px, 2vw, 24px);
  display: flex; flex-direction: column; justify-content: center; gap: 18px;
  color: var(--ink); min-height: 200px;
}
.card-hist h3 {
  font-family: 'Libre Caslon Text', serif; font-style: italic; font-weight: 400;
  font-size: clamp(28px, 3vw, 40px); line-height: 1.1; letter-spacing: -.02em;
}
.card-hist p { font-size: clamp(16px, 1.5vw, 22px); line-height: 1.25; }

/* mobile — drop the pin: heading on top, cards as a plain stacked column */
@media (max-width: 860px) {
  .steps_layout {
    flex-direction: column; align-items: stretch;
    padding-top: var(--section-pad);
    padding-bottom: clamp(40px, 10vw, 72px);
  }
  .steps_heading { position: static; max-width: none; margin-bottom: clamp(32px, 6vw, 56px); }
  .steps_list { width: 100%; gap: clamp(20px, 4vw, 32px); }
  .step_card-wrapper { position: relative; top: auto; margin-inline: 0; transform: none !important; filter: none !important; }
}

/* ===================================================================
   STATEMENT / BITTERSWEET — Figma annotation 2016:249
   One photograph held in place for the whole section while the story copy
   scrolls over it; the scroll returns to its normal flow once the section ends.
   =================================================================== */
/* every layer (photo, watermark, content) shares a single grid cell, so each can
   be a real 100vh sticky stage that un-sticks exactly with the section instead
   of bleeding over the next one */
.statement {
  position: relative;
  background: var(--ink);
  /* No top padding: the section starts flush so the apla can overlap it and the
     photo runs up under the indigo the gradient above ends on. The bottom keeps a
     small padding only as a fallback — wherever the story blocks are content-sized
     they would otherwise end right on the colour change into the FAQ. The
     scrollytelling layer below drops it to 0, because there each block centres its
     copy in 88vh and the room is already there. */
  padding-block: 0 clamp(48px, 10vw, 72px); display: grid;
  isolation: isolate;   /* local stacking context for the photo / apla / wm / content layers below */
}
/* the pinned photograph. Sticky rather than `position: fixed` so it releases on
   its own at the end of the section — no JS, no scroll hijacking. */
.statement__photo {
  grid-area: 1 / 1;
  position: sticky; top: 0; height: 100vh;
  z-index: 0; pointer-events: none;
  background-image: url('assets/statement.png');
  background-size: cover; background-position: center;
  background-color: #5a7bb0;   /* the photo's own sky, as a load fallback */
}
/* the apla overlaps the top of the section: absolute (not in the grid cell) so it
   sits over the photo, and it scrolls away with the section while the photo stays
   pinned. The wave along its lower edge is cut out of the PNG, so the photograph
   reads through it. */
.statement__apla {
  position: absolute; top: -1px; left: 0; z-index: 3;
  display: block; width: 100%; height: auto;
  pointer-events: none;
}
/* legibility scrim — the copy is white and the sky underneath is bright. Kept
   light so the photograph still reads as itself; the copy carries a soft shadow
   for the rest of the contrast. */
.statement__photo::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(20,18,30,0) 0%, rgba(20,18,30,.06) 45%, rgba(20,18,30,.42) 100%);
}
/* big faded brand watermark (Figma 2016:250-251) pinned to the bottom edge of the
   viewport for the whole section: a 100vh sticky layer whose line is aligned to
   its bottom and bleeds slightly off the edge, like aurae. */
.statement__wm {
  grid-area: 1 / 1;
  position: sticky; top: 0; height: 100vh;
  z-index: 2; pointer-events: none; overflow: hidden;   /* in front of the scrolling story copy (z-index 1) */
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: clamp(12px, 3vh, 40px);   /* sit just above the bottom edge, fully visible */
}
/* viewport-pinned gradient: darkens the bottom of the section so the scrolling
   story copy dissolves and re-emerges from underneath the watermark. Sits above
   the story text, below the watermark glyphs. */
.statement__wm::before {
  content: "";
  position: absolute; inset: auto 0 0 0; height: 40vh;
  background: linear-gradient(to top, rgba(20,18,30,.92) 0%, rgba(20,18,30,.72) 22%, rgba(20,18,30,0) 100%);
}
.statement__wm span {
  position: relative;   /* paint above the fade gradient */
  white-space: nowrap;
  font-family: 'Libre Caslon Text', serif; font-style: italic;
  font-size: clamp(54px, 8.4vw, 120px); line-height: .9; letter-spacing: -.02em;
  color: rgba(255, 255, 255, .34);
}
.statement__inner {
  grid-area: 1 / 1;
  position: relative;   /* no z-index: stays out of the stacking order so its children layer directly against the watermark */
}

/* the story column — blocks pushed to the right edge; within each block the
   heading spans full width (text at the left) and the copy is the narrower
   456px column pulled to the right, exactly like the Figma (2016:255-269) */
.statement__content {
  position: relative; z-index: 1;          /* behind the watermark layer (z-index 2) so the copy scrolls under it */
  display: flex; flex-direction: column; align-items: flex-end;
  gap: clamp(56px, 7vw, 90px);            /* design: 90px between blocks */
}
.story__block {
  width: min(522px, 100%);
  display: flex; flex-direction: column; align-items: flex-end;
  gap: clamp(40px, 6vw, 77px);            /* design: ~77px heading → copy */
}
.story__head {
  width: 100%;
  display: flex; gap: 15px; align-items: flex-end;
  font-size: clamp(30px, 3.4vw, 44px); line-height: .9; letter-spacing: -.02em; white-space: nowrap;
}
/* copy sits on the photograph, so the whole column runs white and carries a soft
   shadow — the same trick the pinned heading uses over the history gradient */
.story__block { text-shadow: 0 2px 18px rgba(20, 18, 30, .45); }
.story__head .n { font-family: 'Libre Caslon Text', serif; font-style: italic; color: var(--gold); }
.story__head .t { font-family: 'Inter', sans-serif; color: #fff; }
.story__copy { width: min(456px, 100%); font-size: 16px; line-height: 1.5; color: #fff; }
.story__copy p { margin-bottom: 1.7em; }
.story__copy p:last-child { margin-bottom: 0; }
.story__copy b { font-weight: 700; color: #fff; }

/* scrollytelling layer (desktop + motion only) — the copy starts one screen down
   so the photograph reads on its own before any text arrives, then each block
   occupies roughly one screen while the photo stays put underneath */
@media (min-width: 861px) and (prefers-reduced-motion: no-preference) {
  .statement { padding-bottom: 0; }   /* the 88vh block below already carries the room */
  .statement__content { padding-top: 100vh; }
  .story__block { min-height: 88vh; justify-content: center; }
}

/* mobile — the photo drops out of the pin and becomes a plain banner above the
   story, which reads as a normal stacked column */
@media (max-width: 860px) {
  /* break the shared grid cell into two rows so the photo sits above the copy
     instead of behind it */
  .statement { grid-template-rows: auto auto; row-gap: clamp(40px, 8vw, 64px); }
  .statement__photo { grid-area: 1 / 1; position: relative; height: 62vh; }
  .statement__inner { grid-area: 2 / 1; }
  .statement__content { align-items: stretch; gap: clamp(48px, 10vw, 72px); }
  .story__block { width: 100%; align-items: stretch; gap: clamp(24px, 5vw, 40px); }
  .story__head { white-space: normal; }     /* let long headings wrap instead of overflowing */
  .story__copy { width: 100%; }
  .statement__wm { display: none; }           /* too wide to read on small screens */
}

/* ===================================================================
   FAQ
   =================================================================== */
/* Figma 2016:333-344 — two columns: heading pinned on the left, accordion cards on the
   right. Cream section; white rounded cards with a dark square +/- button. */
.faq { background: var(--cream); padding-block: var(--section-pad); }
.faq__layout { display: flex; align-items: flex-start; gap: clamp(40px, 6vw, 100px); }
.faq__heading {
  flex: 0 0 auto; width: clamp(220px, 28%, 360px); color: var(--ink);
  font-size: clamp(36px, 4.6vw, 60px); line-height: .9; letter-spacing: -.02em;
  position: sticky; top: clamp(96px, 16vh, 170px);
}

.faq__list { flex: 1 1 auto; max-width: 760px; display: flex; flex-direction: column; gap: clamp(14px, 1.4vw, 20px); }
.faq__item { background: #fff; border-radius: 13px; overflow: hidden; }
.faq__q {
  width: 100%; border: 0; background: transparent; cursor: pointer; text-align: left;
  display: flex; align-items: center; justify-content: space-between; gap: clamp(16px, 2vw, 28px);
  padding: clamp(18px, 1.8vw, 26px) clamp(20px, 2vw, 28px);
  font-family: inherit; font-weight: 700; font-size: clamp(17px, 1.7vw, 24px); color: var(--ink);
}
/* dark rounded-square +/- button (Figma 2016:333-344) */
.faq__icon {
  position: relative; flex: 0 0 auto;
  width: clamp(44px, 4vw, 56px); height: clamp(44px, 4vw, 56px);
  background: var(--ink); border-radius: 8px;
}
.faq__icon::before, .faq__icon::after {
  content: ""; position: absolute; left: 50%; top: 50%; background: #fff; border-radius: 2px;
  transition: transform .35s var(--ease), opacity .35s var(--ease);
}
.faq__icon::before { width: 38%; height: 2px; transform: translate(-50%, -50%); }   /* horizontal */
.faq__icon::after  { width: 2px; height: 38%; transform: translate(-50%, -50%); }   /* vertical   */
.faq__item.is-open .faq__icon::after { transform: translate(-50%, -50%) scaleY(0); opacity: 0; }
.faq__a {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .4s var(--ease);
}
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
/* one wrapper per answer so the 0fr→1fr row collapse keeps working even when the
   answer is a lead-in paragraph plus a list */
.faq__a > .faq__a-in {
  overflow: hidden;
  padding: 0 clamp(24px, 2.4vw, 32px) 0 clamp(24px, 2.4vw, 32px);
  font-size: clamp(15px, 1.5vw, 19px); line-height: 1.5; color: var(--ink);
}
.faq__item.is-open .faq__a > .faq__a-in { padding-bottom: clamp(22px, 2.4vw, 32px); }
.faq__a-in > p { margin-bottom: .8em; }
.faq__a ul { list-style: disc; padding-left: 1.3em; }
.faq__a li { margin-bottom: .55em; }
.faq__a li:last-child { margin-bottom: 0; }
.faq__a li b { font-weight: 700; }

/* mobile — heading on top, accordion below */
@media (max-width: 860px) {
  .faq__layout { flex-direction: column; gap: clamp(28px, 6vw, 44px); }
  .faq__heading { position: static; width: 100%; }
  .faq__list { max-width: none; }
}

/* ===================================================================
   FINAL CTA
   =================================================================== */
/* Figma 2016:590 — the photograph is full-bleed and the card floats over its
   left side. The card is inset from the *viewport* edge (46px in a 1440 frame),
   not from .container, so this section sets its own padding instead. */
.cta {
  position: relative; background: var(--ink); overflow: hidden;
  min-height: clamp(520px, 59vw, 848px);
  display: flex; align-items: center;
  padding: clamp(40px, 6vw, 80px) clamp(16px, 3.2vw, 46px);
}
/* the photo is oversized and absolutely placed so the parallax drift (±6% at
   speed .12) stays inside the frame and never exposes the dark panel behind it */
.cta__photo { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.cta__photo img {
  position: absolute; left: 0; top: -8%;
  width: 100%; height: 116%; object-fit: cover; object-position: center;
}
/* the floating white card (2016:593): 638 × auto, 50px padding, 45px between the
   copy group and the button, 10px radius */
.cta__card {
  position: relative; z-index: 1;
  width: min(638px, 100%);
  background: #fff; border-radius: 10px;
  padding: clamp(32px, 3.5vw, 50px);
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(30px, 3.2vw, 45px);
  text-align: center;
}
/* heading + trio + sub-line, 26px apart (2016:594) */
.cta__card-top {
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(20px, 1.9vw, 26px); width: 100%;
}
.cta__title {
  color: var(--ink); font-size: clamp(38px, 4.2vw, 60px); line-height: .9; letter-spacing: -.02em;
}
.cta__title .reg { font-family: 'Inter', sans-serif; }
.cta__title .it  { font-family: 'Libre Caslon Text', serif; font-style: italic; }
/* the three source PNGs now share one canvas (127 × 171) with the bottle sized
   and placed inside it, so the trio lines up by simply giving every frame the
   same width — the artwork carries the relative sizing and baseline itself. */
.cta__products {
  /* full size down to ~580px wide, then it tracks the viewport so the trio can
     never outgrow the card on small phones */
  --pw: clamp(67px, 22vw, 127px);
  display: flex; align-items: center; justify-content: center; gap: 0;
}
.cta__products img { width: var(--pw); height: auto; flex: none; }
/* design sets leading 0.9; 1.0 is the tightest that keeps Polish diacritics off
   the line above (swój / sklepie) */
.cta__sub { color: var(--ink); font-size: 16px; line-height: 1; letter-spacing: -.02em; }
.cta__btn {
  background: var(--ink); color: #fff; text-decoration: none;
  min-width: min(233px, 100%); padding: 0 36px; height: 57px; border-radius: 8px; font-size: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.cta__btn:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0,0,0,.3); }
/* mobile — the card goes full width and the photo becomes its backdrop */
@media (max-width: 760px) {
  .cta { min-height: 0; padding-block: clamp(48px, 12vw, 80px); }
}

/* ===================================================================
   FOOTER
   =================================================================== */
.footer { background: #fff; padding-block: clamp(40px, 5vw, 72px) clamp(20px, 3vw, 40px); overflow: hidden; }
.footer__inner {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: clamp(32px, 6vw, 96px); flex-wrap: wrap;
}
.footer__brand { display: flex; flex-direction: column; gap: 24px; max-width: 520px; }
.footer__logo img { height: 40px; width: auto; object-fit: contain; }
.footer__addr { font-size: 16px; line-height: 1.5; color: var(--ink); }
.footer__cols { display: flex; gap: clamp(48px, 7vw, 110px); }
.footer__col { display: flex; flex-direction: column; gap: 18px; }
.footer__col a {
  font-size: 16px; font-weight: 400; color: var(--ink); text-decoration: none;
  transition: color .2s var(--ease);
}
.footer__col a:hover { color: var(--gold); }
/* big faded brand line across the bottom (Figma 2016:397-506), bleeding off the edges */
.footer__wm {
  margin-top: clamp(48px, 8vw, 110px); text-align: center; white-space: nowrap;
  font-family: 'Libre Caslon Text', serif; font-style: italic;
  font-size: clamp(34px, 8.4vw, 116px); line-height: 1; letter-spacing: -.02em;
  color: rgba(186, 151, 104, .28);
}

/* Safeguard: both brand watermarks are a single white-space:nowrap line set in a
   huge fluid font, so on some viewports the line is wider than the screen. Cap
   the box at 100% and clip the horizontal bleed so it can never push past the
   viewport width. `overflow-x: clip` (not `hidden`) leaves the vertical axis
   visible, so the italic descenders aren't cut. */
.statement__wm,
.footer__wm { max-width: 100%; overflow-x: clip; }

/* ===================================================================
   ANIMATION PRIMITIVES (JS adds .is-in / GSAP drives the rest)
   =================================================================== */
[data-reveal] { opacity: 0; }
[data-cta-reveal] { opacity: 0; }
[data-clip] { clip-path: inset(0 0 100% 0); }

/* SplitText wraps each line/word/char in an overflow:clip mask (GSAP sets the
   clip inline, so these masks are otherwise class-less — they're named via the
   *Class options in app.js: unit `splitLine` → mask `splitLine-mask`, etc.).
   Padding the mask gives italic Libre Caslon glyphs (ascenders, descenders,
   right lean) 5px of room inside the clip so they aren't cut; the matching
   negative margin keeps the mask's footprint — line spacing and heading
   height — unchanged. Covers notes / people-heading / faq and every other
   split heading. */
.splitLine-mask, .splitWord-mask, .splitChar-mask { padding: 5px; margin: -5px; }
.splitWord{
  padding: 0px 20px 20px 20px;
}
.faq .splitLine-mask{
  padding: 20px;
  margin: -20px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal], [data-cta-reveal], [data-clip] { opacity: 1 !important; clip-path: none !important; }
  * { animation: none !important; }
}