/* =========================================================================
   La Maison Varsovie — arkusz stylów (szkielet)
   Paleta jest w zmiennych: łatwo przełączyć akcent oliwka <-> pastel pomarańcz.
   ========================================================================= */

:root{
  /* --- baza (paleta wg agenta LMV) --- */
  --paper:      #F8F7F3;   /* ciepła biel / off-white */
  --paper-alt:  #EFEDE6;   /* tło alternatywne sekcji, rytm */
  --paper-pure: #FCFBF8;   /* jaśniejsza biel do kart */
  --ink:        #1B1B18;   /* prawie-czerń, ciepła */
  --ink-soft:   #6E6D66;   /* tekst drugorzędny */
  --line:       #DAD8CC;   /* delikatne linie/obwódki */

  /* --- akcent: oliwka jako JEDYNY kolor systemowy --- */
  --olive:      #6B6E52;   /* oliwka — linie, hover, aktywny stan (~8%) */
  --olive-hair: #A8AA92;   /* oliwka jasna — hairline/dividery */
  --peach:      #E3B48C;   /* ciepły mikro-akcent, tylko rzadki detal (1–2%) */

  --accent:     var(--olive);
  --accent-2:   var(--peach);

  /* --- typografia --- */
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans:  "Jost", "Helvetica Neue", Arial, sans-serif;

  /* --- rytm --- */
  --pad-x: clamp(1.25rem, 5vw, 6rem);
  --sec-y: clamp(5rem, 12vw, 11rem);
  --maxw:  1320px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  line-height:1.6;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
}
img,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ margin:0; font-weight:400; }

/* Utility: eyebrow (mała wersalikowa etykieta sekcji) */
.section-head__eyebrow,.manifest__eyebrow,.contact__eyebrow{
  font-size:.72rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--accent);
  margin:0 0 1rem;
}

/* ============================== NAV ============================== */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.4rem var(--pad-x);
  color:#fff;
  transition:background .4s ease, color .4s ease, padding .4s ease;
}
.nav--solid{
  background:var(--paper);
  color:var(--ink);
  padding:.9rem var(--pad-x);
  border-bottom:1px solid var(--line);
}
.nav__brand{
  font-size:1rem; letter-spacing:.18em; text-transform:uppercase; font-weight:400;
}
.nav__links{ display:flex; gap:clamp(1.2rem,3vw,2.6rem); align-items:center; }
.nav__links a{
  font-size:.82rem; letter-spacing:.14em; text-transform:uppercase;
  position:relative; padding-bottom:2px;
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:currentColor; transition:width .35s ease;
}
.nav__links a:hover::after{ width:100%; }
.nav__cta{ color:var(--accent-2); }
.nav--solid .nav__cta{ color:var(--accent); }

/* ============================== HERO ============================== */
.hero{
  position:relative; min-height:100svh; width:100%;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  /* fallback, gdy brak wideo: subtelny ciepły gradient */
  background:
    radial-gradient(120% 90% at 50% 20%, #3a3a30 0%, #24241d 55%, #171712 100%);
}
.hero__video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:0;
}
.hero__scrim{
  position:absolute; inset:0; z-index:1;
  /* jednolita czerń ~30% + delikatne ściemnienie ku dołowi (quiet luxury — nie ciężki banner) */
  background:
    linear-gradient(180deg, rgba(15,15,12,.22) 0%, rgba(15,15,12,.18) 45%, rgba(15,15,12,.40) 100%),
    rgba(15,15,12,.14);
}
.hero__inner{
  position:relative; z-index:2; text-align:center; color:#fff;
  padding:0 var(--pad-x);
}
.hero__wordmark{
  font-family:var(--sans); font-weight:300;
  font-size:clamp(2.6rem, 9vw, 8rem);
  line-height:.98; letter-spacing:.04em;
  display:flex; flex-direction:column; gap:.05em;
}
.hero__tagline{
  margin:1.6rem 0 0;
  font-size:clamp(.8rem,1.6vw,1rem);
  letter-spacing:.28em; text-transform:uppercase; font-weight:300;
  color:rgba(255,255,255,.82);
}
.hero__scroll{
  position:absolute; left:50%; bottom:2.2rem; transform:translateX(-50%); z-index:2;
  height:56px; width:1px; overflow:hidden;
}
.hero__scroll-line{
  display:block; width:1px; height:100%;
  background:linear-gradient(180deg, transparent, rgba(255,255,255,.9));
  animation:scrollpulse 2.4s ease-in-out infinite;
}
@keyframes scrollpulse{
  0%{ transform:translateY(-100%); } 60%,100%{ transform:translateY(100%); }
}

/* ============================== MANIFEST ============================== */
.manifest{
  max-width:var(--maxw); margin-inline:auto;
  padding:var(--sec-y) var(--pad-x);
  text-align:center;
}
.manifest__statement{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(1.9rem, 5vw, 3.6rem);
  line-height:1.16; letter-spacing:.005em;
  max-width:20ch; margin:0 auto;
}
.manifest__body{
  margin:2rem auto 0; max-width:52ch;
  color:var(--ink-soft); font-size:1.02rem;
}

/* ============================== SECTION HEAD ============================== */
.section-head{ margin-bottom:clamp(2.2rem,5vw,4rem); max-width:64ch; }
.section-head__title{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(1.8rem,4.5vw,3.1rem); line-height:1.1;
}
.section-head__lead{
  margin:1.1rem 0 0; color:var(--ink-soft); font-size:1.02rem; max-width:60ch;
}

/* sekcja z alternatywnym tłem (rytm) */
.section--alt{ background:var(--paper-alt); }

/* ============================== PORTFOLIO ============================== */
.portfolio{ max-width:var(--maxw); margin-inline:auto; padding:var(--sec-y) var(--pad-x); }
.portfolio__cta{ margin:clamp(2rem,4vw,3rem) 0 0; }
.portfolio__cta a{
  font-size:.85rem; letter-spacing:.22em; text-transform:uppercase; color:var(--accent);
  border-bottom:1px solid var(--olive-hair); padding-bottom:.2em; transition:border-color .3s ease;
}
.portfolio__cta a:hover{ border-color:var(--accent); }

.grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  grid-auto-rows:22vw;
  gap:clamp(.6rem, 1.4vw, 1.2rem);
}
.tile{ margin:0; overflow:hidden; }
.tile--tall{ grid-row:span 2; }
.tile--wide{ grid-column:span 2; }
.tile__ph{
  position:relative; width:100%; height:100%;
  background:
    linear-gradient(135deg, #ECE6D8 0%, #E0D8C6 100%);
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  transition:transform .8s cubic-bezier(.2,.7,.2,1);
}
.tile:hover .tile__ph{ transform:scale(1.03); }
.tile__ph::after{
  content:attr(data-label);
  font-size:.72rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--ink-soft);
}

/* ============================== O NAS / STUDIO ============================== */
.about{ max-width:var(--maxw); margin-inline:auto; padding:var(--sec-y) var(--pad-x); }

/* wspólny portret duetu — prowadzi sekcję */
.about__portrait{ margin:0; }
.person__ph{
  width:100%;
  background:linear-gradient(135deg, #ECE6D8 0%, #E0D8C6 100%);
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
}
.person__ph--duo{ aspect-ratio:16/9; }
.person__ph::after{
  content:attr(data-label);
  font-size:.72rem; letter-spacing:.28em; text-transform:uppercase; color:var(--ink-soft);
}

/* dwa wkłady pod portretem */
.about__roles{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(1.5rem,4vw,4rem);
  margin-top:clamp(1.8rem,4vw,2.8rem);
}
.person__name{ font-family:var(--serif); font-size:1.6rem; font-weight:400; }
.person__role{ color:var(--ink-soft); margin:.5rem 0 0; max-width:34ch; }
.about__coda{
  font-family:var(--serif); font-style:italic; font-weight:300;
  font-size:clamp(1.3rem,3vw,2rem); line-height:1.3;
  text-align:center; max-width:24ch;
  margin:clamp(2.6rem,6vw,4.5rem) auto 0;
}

/* ============================== PROCES ============================== */
/* pełna szerokość (tło alt), treść wyśrodkowana przez dzieci */
.process{ padding:var(--sec-y) var(--pad-x); }
.process > *{ max-width:var(--maxw); margin-inline:auto; }
.steps{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1rem,2.5vw,2.2rem);
}
.step{ border-top:1px solid var(--line); padding-top:1.2rem; }
.step__num{ font-size:.8rem; letter-spacing:.2em; color:var(--accent); }
.step__name{ font-family:var(--serif); font-size:1.5rem; font-weight:400; margin:.5rem 0 .4rem; }
.step__desc{ color:var(--ink-soft); font-size:.95rem; margin:0; }

/* ============================== KONTAKT ============================== */
.contact{
  background:var(--ink); color:var(--paper);
  text-align:center; padding:var(--sec-y) var(--pad-x);
}
.contact__eyebrow{ color:var(--accent-2); }
.contact__title{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(2rem,6vw,4rem); margin:0 0 1.2rem;
}
.contact__lead{
  margin:0 auto 2.4rem; max-width:46ch;
  color:rgba(248,247,243,.72); font-size:1.02rem;
}
.contact__mail{
  font-size:clamp(1.1rem,3vw,1.8rem); letter-spacing:.02em;
  border-bottom:1px solid rgba(247,244,239,.4); padding-bottom:.15em;
  transition:border-color .3s ease;
}
.contact__mail:hover{ border-color:var(--accent-2); }
.contact__meta{ margin:2rem 0 0; font-size:.85rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(247,244,239,.6); }
.contact__meta a{ border-bottom:1px solid rgba(247,244,239,.4); }

/* ============================== FOOTER ============================== */
.foot{
  display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap;
  padding:1.6rem var(--pad-x);
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft);
  background:var(--paper); border-top:1px solid var(--line);
}
.foot__tag{ color:var(--olive-hair); }

/* ============================== REVEAL (JS) ============================== */
[data-reveal]{ opacity:0; transform:translateY(24px); transition:opacity 1s ease, transform 1s cubic-bezier(.2,.7,.2,1); }
[data-reveal].is-in{ opacity:1; transform:none; }

/* ============================== RESPONSIVE ============================== */
@media (max-width:820px){
  .nav__links{ gap:1.1rem; }
  .nav__links a:not(.nav__cta){ display:none; }
  .grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:38vw; }
  .about__roles{ grid-template-columns:1fr; gap:1.2rem; }
  .steps{ grid-template-columns:1fr 1fr; }
}
@media (max-width:520px){
  .grid{ grid-template-columns:1fr; grid-auto-rows:70vw; }
  .tile--wide,.tile--tall{ grid-column:auto; grid-row:auto; }
  .steps{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none!important; scroll-behavior:auto!important; }
  [data-reveal]{ opacity:1; transform:none; }
}